/* =========================================================
   Telcopilot LLC — site styles
   Brand colours are the three variables at the top. Change
   them here once and the whole site follows.
   ========================================================= */

:root{
  --navy:#031C45;          /* headings, footer — sampled from the logo */
  --blue:#0A6AE8;          /* links and buttons. The exact logo blue is #0972FB;
                              this is one step darker so white text on it passes
                              the WCAG AA contrast minimum. */
  --blue-light:#3A91FF;    /* accents */
  --blue-dark:#0A52B4;     /* button hover */

  --ink:#1B2A3C;           /* body text */
  --ink-soft:#5A6B80;      /* secondary text */
  --line:#DCE3EB;          /* hairlines */
  --surface:#FFFFFF;
  --surface-tint:#F4F7FB;  /* pale section background */

  --maxw:1120px;
  --measure:62ch;
  --radius:6px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--navy);
  line-height:1.15;
  letter-spacing:-.015em;
  text-wrap:balance;
  margin:0 0 .5em;
}
h1{font-size:clamp(34px,5vw,52px);font-weight:700}
h2{font-size:clamp(26px,3.2vw,34px);font-weight:700}
h3{font-size:21px;font-weight:600}
p{margin:0 0 1.1em}
a{color:var(--blue)}
a:hover{color:var(--blue-dark)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:24px}
.measure{max-width:var(--measure)}

/* ---------- skip link + focus ---------- */
.skip{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
  padding:10px 16px;z-index:100;border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:14px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand img{height:34px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav-links>li{flex:none}
.nav-links .btn{white-space:nowrap}
.nav-links a{
  font-family:Archivo,sans-serif;font-size:15.5px;font-weight:500;
  color:var(--navy);text-decoration:none;padding:4px 0;
  border-bottom:2px solid transparent;
}
.nav-links a:hover{border-bottom-color:var(--blue-light)}
.nav-links a[aria-current="page"]{border-bottom-color:var(--blue)}

.btn{
  display:inline-block;
  font-family:Archivo,sans-serif;font-size:15.5px;font-weight:600;
  background:var(--blue);color:#fff;text-decoration:none;
  padding:11px 20px;border-radius:var(--radius);border:0;cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{background:var(--blue-dark);color:#fff}
.btn-ghost{
  background:transparent;color:var(--navy);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.btn-ghost:hover{background:var(--surface-tint);color:var(--navy)}

.nav-links .btn{            /* must out-rank the .nav-links a rule above */
  padding:11px 20px;color:#fff;border-bottom:0;white-space:nowrap;
}
.nav-links .btn:hover{border-bottom:0;color:#fff}

.nav-toggle{
  display:none;background:none;border:1.5px solid var(--line);border-radius:var(--radius);
  padding:8px 12px;font-family:Archivo,sans-serif;font-size:14px;font-weight:600;
  color:var(--navy);cursor:pointer;
}

/* ---------- sections ---------- */
.section{padding-block:72px}
.section-tint{background:var(--surface-tint);border-block:1px solid var(--line)}
.eyebrow{
  font-family:Archivo,sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue);
  margin:0 0 14px;
}

/* ---------- hero ---------- */
.hero{padding-block:88px 72px}
.hero p.lead{font-size:20.5px;color:var(--ink-soft);max-width:60ch}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* The single strongest line on the site. Kept blue and kept near the top. */
.claim{
  font-family:Archivo,sans-serif;font-size:21px;font-weight:600;
  color:var(--blue);margin:22px 0 0;
}

/* ---------- cards ---------- */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;margin-top:40px;
}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;
}
.card .num{
  font-family:Archivo,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  color:var(--blue-light);display:block;margin-bottom:10px;
}
.card h3{margin-bottom:.35em}
.card p{margin-bottom:0;color:var(--ink-soft);font-size:17px}

/* ---------- steps ---------- */
.steps{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:4px}
.steps li{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;
  padding:22px 0;border-top:1px solid var(--line);
}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps .n{
  font-family:Archivo,sans-serif;font-weight:700;font-size:15px;color:var(--blue);
  padding-top:3px;
}
.steps h3{margin-bottom:.25em}
.steps p{margin-bottom:0;color:var(--ink-soft)}

/* ---------- principals ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;margin-top:44px}
.person img{                /* small portrait, sized to sit just above the name */
  width:132px;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radius);background:var(--surface-tint);
}
.person h2{margin:16px 0 2px;font-size:26px}
.person .role{
  font-family:Archivo,sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);margin:0 0 16px;
}
/* Optional firm line under the role. Pulls up so the spacing is the same
   whether or not a person has one. */
.person .firm{color:var(--ink-soft);font-size:16px;margin:-12px 0 16px}
.person-contact{                /* cell + email on one line, under the Principal label */
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:4px 34px;                 /* 34px column gap reads as the 5-6 spaces asked for;
                                   wraps to two lines on a narrow phone instead of
                                   overflowing, which a run of   would not do. */
  margin:-8px 0 18px;font-size:16.5px;
}
.person-contact a{white-space:nowrap}

/* ---------- category grid ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:16px;margin-top:28px}
.cat{
  border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
  background:var(--surface);
}
.cat strong{
  display:block;font-family:Archivo,sans-serif;font-size:17px;color:var(--navy);
  margin-bottom:4px;
}
.cat span{font-size:16px;color:var(--ink-soft)}

/* ---------- form ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:8px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
label{font-family:Archivo,sans-serif;font-size:14.5px;font-weight:600;color:var(--navy)}
input[type=text],input[type=email],textarea{
  font:inherit;font-size:17px;color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--radius);
  padding:11px 13px;background:var(--surface);width:100%;
}
input:focus,textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(10,106,232,.18)}
textarea{min-height:130px;resize:vertical}
.consent{display:flex;gap:11px;align-items:flex-start;grid-column:1/-1;margin-top:4px}
.consent input{margin-top:6px;width:17px;height:17px;flex:none;accent-color:var(--blue)}
.consent label{font-family:inherit;font-weight:400;font-size:16px;color:var(--ink-soft)}
.form-actions{grid-column:1/-1;margin-top:8px}
.hidden-field{position:absolute;left:-9999px}

/* ---------- footer ---------- */
.site-footer{
  background:var(--navy);color:#C9D6E6;padding-block:48px 36px;margin-top:0;
  font-size:16px;
}
.site-footer a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-top{
  display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;
  padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.16);
}
.footer-brand{font-family:Archivo,sans-serif;font-weight:700;font-size:20px;color:#fff}
.footer-links{display:flex;flex-wrap:wrap;gap:22px;list-style:none;margin:0;padding:0}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.footer-bottom{padding-top:20px;font-size:14.5px;color:#9FB2C9}
.footer-bottom p{margin:0 0 6px}

/* ---------- small print / legal page ---------- */
.legal h2{font-size:22px;margin-top:36px}
.legal ul{padding-left:22px;color:var(--ink-soft)}
.legal li{margin-bottom:8px}

.note{
  border-left:3px solid var(--blue-light);background:var(--surface-tint);
  padding:16px 20px;border-radius:0 var(--radius) var(--radius) 0;
  font-size:16.5px;color:var(--ink-soft);margin:28px 0;max-width:var(--measure);
}
.note p:last-child{margin-bottom:0}

/* ---------- mobile ---------- */
@media (max-width:820px){
  body{font-size:17px}
  .section{padding-block:56px}
  .hero{padding-block:56px 48px}
  .nav-links .btn{            /* must out-rank the .nav-links a rule above */
  padding:11px 20px;color:#fff;border-bottom:0;white-space:nowrap;
}
.nav-links .btn:hover{border-bottom:0;color:#fff}

.nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:8px 24px 18px;
  }
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:12px 0;width:100%;border-bottom:1px solid var(--line)}
  .nav-links li:last-child a{border-bottom:0;padding-top:16px}
  .nav-links .btn{width:100%;text-align:center}
  .site-header .nav{position:relative}
  .people{gap:40px}
}

/* ---------- third-party embeds (preview only) ---------- */
.embed-wrap{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--surface-tint);margin-top:14px;
}
.embed-wrap iframe{display:block;width:100%;border:0}

/* ---------- supplier logos inside a category tile ---------- */
.sample-note{
  margin:34px 0 0;max-width:var(--measure);font-size:17px;color:var(--ink-soft);
  border-left:3px solid var(--blue-light);padding-left:16px;
}
.cat{display:flex;flex-direction:column}
.cat-logos{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line);min-height:44px;
}
.cat-logos img{
  max-height:26px;max-width:31%;width:auto;height:auto;object-fit:contain;
  flex:0 1 auto;min-width:0;
}
/* Placeholder for a supplier whose logo file was not supplied. */
.logo-missing{
  font-family:Archivo,sans-serif;font-size:9px;font-weight:600;color:var(--ink-soft);letter-spacing:-.02em;
  border:1px dashed var(--line);border-radius:4px;padding:3px 4px;
  flex:0 1 auto;min-width:0;max-width:46%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:520px){
  .cat-logos img{max-height:22px}
}

/* ---------------------------------------------------------------------------
   HubSpot embedded form
   HubSpot injects its own markup and its own default styling (orange button,
   tight labels). These rules pull it back onto the site's type scale, colours
   and spacing so it does not read as a bolted-on third-party widget.
   Class names below are HubSpot's, not ours — if a future HubSpot change
   breaks the look, this block is the place to fix it.
--------------------------------------------------------------------------- */
.hs-embed{margin-top:32px;max-width:760px}

.hs-embed .hs-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.hs-embed .hs-form-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.hs-embed .hs-fieldtype-textarea,
.hs-embed .hs_submit,
.hs-embed .hs-richtext,
.hs-embed .hs_error_rollup{grid-column:1/-1}

.hs-embed .hs-form-field>label{
  font-family:Archivo,sans-serif;font-size:14.5px;font-weight:600;color:var(--navy);
}
.hs-embed .hs-form-required{color:#B3261E;margin-left:2px}
.hs-embed .hs-field-desc{font-size:14.5px;color:var(--ink-soft);margin:0}

.hs-embed .hs-input{
  font:inherit;font-size:17px;color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--radius);
  padding:11px 13px;background:var(--surface);width:100%;box-sizing:border-box;
}
.hs-embed select.hs-input{height:46px;appearance:auto}
.hs-embed textarea.hs-input{min-height:130px;resize:vertical}
.hs-embed .hs-input:focus{
  border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(10,106,232,.18);
}
.hs-embed .hs-input.invalid{border-color:#B3261E}

.hs-embed .hs-error-msgs{list-style:none;margin:2px 0 0;padding:0}
.hs-embed .hs-error-msgs label,
.hs-embed .hs-error-msg{font-family:inherit;font-weight:400;font-size:15px;color:#B3261E}

.hs-embed .hs-button,
.hs-embed input[type=submit].hs-button{
  display:inline-block;
  font-family:Archivo,sans-serif;font-size:15.5px;font-weight:600;
  background:var(--blue);color:#fff;text-decoration:none;
  padding:11px 20px;border-radius:var(--radius);border:0;cursor:pointer;
  transition:background .15s ease;width:auto;
}
.hs-embed .hs-button:hover{background:var(--blue-dark)}

.hs-embed .submitted-message{
  font-size:18px;color:var(--ink);
  border-left:3px solid var(--blue-light);padding:4px 0 4px 16px;
}

.form-note,.form-fallback{
  margin:18px 0 0;max-width:var(--measure);
  font-size:15.5px;line-height:1.55;color:var(--ink-soft);
}
.form-fallback{
  border-left:3px solid var(--blue-light);padding-left:16px;color:var(--ink);
}

@media (max-width:560px){
  .hs-embed .hs-form{grid-template-columns:1fr}
}

/* Secondary call-to-action block: a quieter alternative to the form, pointing at
   the Principals page where the direct numbers live. */
.cta-aside{
  margin-top:40px;max-width:var(--measure);
  padding-top:26px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
}
.cta-aside p{flex:1 1 100%;margin:0;color:var(--ink-soft);font-size:17px;line-height:1.55}
.cta-aside .btn{flex:0 0 auto}
@media (max-width:480px){
  .cta-aside .btn{width:100%;text-align:center}
}