/* ============================================================
   HIRE A COLD CALLER
   1. Tokens
   2. Base + typography
   3. Layout primitives (bands, wrap, eyebrow)
   4. Buttons
   5. Header + footer
   6. Hero
   7. Section components
   8. Utilities
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --green:#059669;
  --green-lit:#10B981;
  --f:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* display face, hero headline and stat headings only */
  --display:"Anton",Impact,"Inter",sans-serif;

  /* three shared containers. Everything else is full bleed. */
  --container-wide:1340px;      /* header + hero only */
  --container-main:1260px;      /* every standard section */
  --container-reading:1180px;   /* text-heavy: founder, FAQ */
  --gut:32px;                   /* gutter below 1200, unchanged */
  --desk-gutter:clamp(88px,7vw,150px);

  /* vertical rhythm */
  --band-y:clamp(68px,8.3vw,120px);
  --gap-lg:clamp(34px,4.5vw,56px);
  --gap-md:clamp(20px,2.6vw,30px);

  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---------- type scale ----------
     Eight roles. Anything not on this scale is a documented exception.
     Display tiers are Anton; the rest are Inter. Section headlines differ only
     by which of the three display tiers their column can carry. */
  --t-hero:clamp(63px,6.42vw,107px);        /* 1 hero display headline */
  --t-statement:clamp(38px,6.7vw,98px);     /* 2a full-bleed statement headline */
  --t-h2-wide:clamp(36px,5.4vw,78px);       /* 2b section headline, half-width column */
  --t-h2:clamp(32px,4.5vw,64px);            /* 2c section headline, narrow column */
  --t-display-md:clamp(20px,2.4vw,34px);    /* closing statement lines */
  --t-display-sm:clamp(21px,2vw,27px);      /* 3a display sub-heading */
  --t-display-xs:clamp(19px,1.55vw,23px);   /* 3b display sub-heading, tight grid */
  --t-title:clamp(18px,1.6vw,22px);         /* 3c component / offer title (Inter) */
  --t-price:clamp(25px,2.4vw,32px);         /* 4 large price */
  --t-body:16.5px;                          /* 5 body copy */
  --t-body-sm:16px;                         /* 5b in-component body */
  --t-supporting:15px;                      /* 6 supporting copy */
  --t-meta:13.5px;                          /* 6b metadata sentence copy */
  --t-eyebrow:12.5px;                       /* 7 eyebrow / section label */
  --t-label:12px;                           /* 8 small metadata / outcome label */
  --t-label-sm:11px;                        /* 8b smallest label */
  --t-btn:13px;                             /* CTA labels */
  --t-strip:clamp(12px,1.35vw,17px);        /* full-width word strips */
  --t-h2-ls:-.005em;
  --t-eyebrow-ls:.2em;
  --t-label-ls:.16em;

  --bg:#FFFFFF;
  --bg-2:#EDF2EF;          /* pale sage */
  --bg-deep:#000F26;       /* navy */
  --surface:#FFFFFF;
  --surface-2:#FBFCFB;
  --line:#000F2617;
  --line-soft:#000F260D;
  --tx:#000F26;
  --tx-mid:#48586B;
  --tx-dim:#8093A6;
  --accent:var(--green);
  /* small green TEXT on light grounds: --green is only 3.4:1, --green-hov is 5.0:1 */
  --accent-ink:var(--green-hov);
  --amber:#D97706;
  --red:#DC2626;
  --dot:#D9DEE4;
  --green-hov:#047857;
  --shadow:0 1px 2px #000F260A, 0 8px 24px #000F2608;
}
/* ---------- 2. BASE + TYPE ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:var(--f);font-size:var(--t-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background .4s var(--ease),color .4s var(--ease);
}
a{color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* the accent is invisible against the two brand-green bands */
.pilot :focus-visible,.ready :focus-visible{outline-color:#001127}

h1,h2,h3{font-family:var(--f);margin:0;font-weight:600}
h1{font-size:var(--t-h2);line-height:1.06;letter-spacing:-.04em}
h2{font-size:var(--t-h2);line-height:1.12;letter-spacing:-.034em}
h3{font-size:var(--t-title);line-height:1.28;letter-spacing:-.02em}
p{margin:0 0 18px}
.tint{color:var(--accent)}
/* regular hyphen for search engines, held on one line by CSS rather than U+2011 */
.nb{white-space:nowrap}

/* Below 1200 the display headlines are not horizontally compressed (that block
   is min-width:1200), so the wide tier steps down to keep long words such as
   "management burden." inside their column. One step, applied to the token. */
@media(max-width:1199px){:root{--t-h2-wide:clamp(36px,5.1vw,78px)}}

/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.wrap{width:100%;max-width:var(--container-main);margin-inline:auto;padding:0 var(--gut)}
/* the hero and the header sit on the wide container; the two text-heavy
   sections sit on the reading container. Nothing else gets its own width. */
.hero .wrap{max-width:var(--container-wide)}
.ask .wrap,.behind .wrap{max-width:var(--container-reading)}
@media(min-width:1200px){.wrap{width:calc(100% - 2*var(--desk-gutter));padding:0}}
/* the nav is sticky, so anchor targets need to clear it */
[id]{scroll-margin-top:78px}
.band{padding:var(--band-y) 0;position:relative}

/* Inverted band: re-points the colour tokens inside the section, so every
   child (rules, cards, buttons) follows without its own override. */
.band--deep{
  background:var(--bg-deep);
  --bg:#000F26;--bg-2:#04162F;--surface:#07203F;--surface-2:#0A2A50;
  --line:#FFFFFF1F;--line-soft:#FFFFFF0F;
  --tx:#F3F6FA;--tx-mid:#A9BACE;--tx-dim:#7C90A8;
  --accent:var(--green-lit);--accent-ink:var(--green-lit);--shadow:0 1px 0 #FFFFFF0A inset;
  color:var(--tx);
}

/* ---------- 5. HEADER ---------- */
.nav{background:var(--bg);border-bottom:1px solid rgba(7,24,44,.08);position:relative;z-index:10}
.nav__in{display:flex;align-items:center;gap:28px;height:70px;width:100%;max-width:var(--container-wide);margin-inline:auto;padding:0 var(--gut)}
@media(min-width:1200px){.nav__in{width:calc(100% - 2*var(--desk-gutter));padding:0}}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--tx);white-space:nowrap;text-decoration:none}
.logo svg{flex:0 0 auto}
.logo .tint{color:var(--accent)}
.navlinks{display:flex;align-items:center;gap:30px;margin-left:auto}
.navlinks a{font-size:var(--t-supporting);font-weight:500;color:var(--tx-mid);text-decoration:none;white-space:nowrap;transition:color .15s ease}
.navlinks a:hover{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:14px}
.btn-nav{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-size:14.5px;font-weight:600;
  min-width:108px;height:44px;padding:0 22px;border-radius:3px;text-decoration:none;white-space:nowrap;
  transition:background .18s ease;
}
.btn-nav:hover{background:var(--green-hov)}
/* ---------- mobile menu ----------
   The panel IS the desktop <nav>, re-laid out. One set of links in the DOM, so
   there is nothing to keep in sync and the markup is not duplicated for search
   engines. Closed state is visibility:hidden rather than opacity alone, which is
   what takes the links back out of the tab order. */
.nav-toggle{display:none}
/* two classes, not one: the panel CTA also carries .cta, whose display:inline-flex
   is declared later at equal specificity and would otherwise win and show it at
   every width. Same trap the .btn-nav comment below describes. */
.navlinks .navlinks__cta{display:none}

/* the auto margin that pushes the actions right lives on .navlinks, so when the
   links leave the bar it has to move onto .nav-actions or the button drifts to
   mid-bar */
@media(max-width:1080px){
  .nav__in{gap:14px}
  .nav-actions{margin-left:auto}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:44px;height:44px;padding:0;background:none;
    border:1px solid rgba(7,24,44,.14);border-radius:3px;
    color:var(--tx);cursor:pointer;transition:border-color .18s ease;
  }
  .nav-toggle:hover{border-color:rgba(7,24,44,.32)}
  /* three bars from one element: the span is the middle rule and the two pseudos
     are the outer ones, so the open state is three transforms and no extra markup */
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after{
    content:"";display:block;width:18px;height:2px;border-radius:2px;
    background:currentColor;transition:transform .18s ease,background .12s ease;
  }
  .nav-toggle__bar{position:relative}
  .nav-toggle__bar::before{position:absolute;top:-6px;left:0}
  .nav-toggle__bar::after{position:absolute;top:6px;left:0}
  .nav.is-open .nav-toggle__bar{background:transparent}
  .nav.is-open .nav-toggle__bar::before{transform:translateY(6px) rotate(45deg)}
  .nav.is-open .nav-toggle__bar::after{transform:translateY(-6px) rotate(-45deg)}

  .navlinks{
    position:absolute;top:100%;left:0;right:0;z-index:9;
    display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:4px var(--gut) 20px;
    background:var(--bg);border-bottom:1px solid rgba(7,24,44,.08);
    box-shadow:0 20px 30px -22px rgba(7,24,44,.4);
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  .nav.is-open .navlinks{visibility:visible;opacity:1;transform:none}
  .navlinks a:not(.navlinks__cta){
    display:flex;align-items:center;min-height:52px;
    font-size:16.5px;color:var(--tx);border-bottom:1px solid rgba(7,24,44,.07);
  }
  .navlinks a:not(.navlinks__cta):last-of-type{border-bottom:0}
}
@media(max-width:640px){.nav__in{height:66px;gap:16px}}
/* Phone sizing, in two steps, both set by what the bar actually measures.
   At full size the bar needs 437px: lockup 189 + button 108 at its min-width +
   toggle 44 + two 16px gaps + two 32px gutters. Stepping the lockup down to 16px
   and the gutter to 22px takes that to 394, which is what lets the CTA survive on
   every phone from 400px up. The narrower gutter is also why the hero headline
   holds three lines at 320. */
@media(max-width:480px){
  :root{--gut:22px}
  .logo{font-size:16px;gap:8px}
  .logo svg{width:22px;height:22px}
}
/* Below 420 even the compact bar cannot hold all three, so the CTA moves into the
   panel as a full-width button. Nothing is lost: the hero CTA is one screen down. */
@media(max-width:420px){
  .nav-actions{display:none}
  .navlinks .navlinks__cta{
    display:inline-flex;justify-content:center;width:100%;height:50px;
    margin-top:16px;color:#fff;
  }
}
@media(prefers-reduced-motion:reduce){
  .navlinks,.nav-toggle__bar,
  .nav-toggle__bar::before,.nav-toggle__bar::after{transition:none}
}
/* This used to hide .btn-nav below 460px, on the grounds that the sticky bottom bar
   carried the CTA there. That bar is gone, so the nav button is now the only
   persistent CTA in the header and has to stay. The rule never fired anyway: the
   button also carries .cta, whose display:inline-flex is declared later at equal
   specificity and won. */

/* the footer keeps the inline SVG lockup */
.lockup{display:block;height:29px;width:auto}
.lockup text{font-family:var(--f)}


/* ---------- booking launcher (BookingLauncher, collapsed state) ----------
   One instance, fixed bottom-right. z-index 80 sits above every page component
   (.nav is 10) but below the Calendly overlay and any consent layer, so it can
   never cover something that must be dismissed first.
   The expanded card is not built yet - #booking-card is an empty mount point. */
.booking-launcher{
  position:fixed;right:24px;bottom:24px;z-index:80;
  width:62px;height:62px;padding:16px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(0,15,38,.12);
  background:#FFFDF8;cursor:pointer;-webkit-appearance:none;appearance:none;
  box-shadow:0 6px 20px rgba(0,15,38,.12);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.booking-launcher svg{display:block;width:100%;height:100%}
.booking-launcher:hover{
  transform:translateY(-2px);
  border-color:rgba(0,15,38,.24);
  box-shadow:0 10px 26px rgba(0,15,38,.18);
}
/* the launcher floats over navy, green and pale grounds, so the ring carries its own
   contrast rather than relying on whatever is behind it */
.booking-launcher:focus-visible{
  outline:3px solid #001127;outline-offset:3px;
  box-shadow:0 0 0 7px rgba(255,253,248,.92),0 10px 26px rgba(0,15,38,.18);
}
@media(prefers-reduced-motion:reduce){
  .booking-launcher{transition:box-shadow .18s ease,border-color .18s ease}
  .booking-launcher:hover{transform:none}
}
/* the bottom edge is free below 1080, so the launcher sits in the corner */
@media(max-width:1080px){
  .booking-launcher{right:16px;bottom:16px}
}
@media(max-width:620px){
  .booking-launcher{width:56px;height:56px;padding:14px}
}

/* ---------- booking card (BookingLauncher, expanded state) ----------
   Sits directly above the launcher, right edges aligned. z-index 100 stays far
   below the Calendly overlay. No backdrop and no page dimming: this is a popover, not a
   modal, and the page behind it stays usable.
   The bottom offset is derived, not typed: launcher offset + launcher height + gap,
   so it tracks the launcher automatically if that ever moves. */
.booking-card{
  position:fixed;right:24px;bottom:calc(24px + 62px + 16px);z-index:100;
  width:372px;max-width:calc(100vw - 48px);
  padding:20px 20px 22px;
  background:var(--bg-deep);color:#F3F6FA;
  border:1px solid rgba(255,255,255,.14);border-radius:10px;
  box-shadow:0 18px 44px rgba(0,15,38,.34);
  opacity:0;transform:translateY(8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.booking-card[hidden]{display:none}
.booking-card.is-open{opacity:1;transform:none}

.booking-card__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.booking-card__face{
  width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.2);
}
.booking-card__who{flex:1;min-width:0}
.booking-card__name{margin:0;font-size:var(--t-body-sm);font-weight:600;line-height:1.25;color:#F3F6FA}
.booking-card__role{margin:2px 0 0;font-size:var(--t-label);line-height:1.3;color:#A9BACE}

/* 44px hit area, 14px glyph. The negative margins keep the visible cross optically
   aligned with the card edge without shrinking the touch target. */
.booking-card__close{
  flex:none;width:44px;height:44px;margin:-11px -11px -11px 0;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  color:#A9BACE;border-radius:4px;transition:color .18s var(--ease);
}
.booking-card__close svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;fill:none;display:block}
.booking-card__close:hover{color:#F3F6FA}
.booking-card__close:focus-visible{outline:2px solid var(--green-lit);outline-offset:2px;color:#F3F6FA}

.booking-card__h{
  margin:0 0 10px;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:var(--t-display-sm);line-height:1.06;letter-spacing:.005em;color:#FFFDF8;
}
.booking-card__body{margin:0;font-size:var(--t-supporting);line-height:1.5;color:#A9BACE}
.booking-card__note{margin:9px 0 0;font-size:var(--t-meta);line-height:1.45;color:var(--green-lit)}

/* green on navy, navy label: the site's navy CTA would disappear against this card */
.booking-card__cta{
  width:100%;margin-top:18px;min-height:48px;
  background:var(--green-lit);color:#001127;border:1px solid var(--green-lit);
  padding:15px 22px;font-family:var(--f);font-size:var(--t-btn);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;cursor:pointer;
  -webkit-appearance:none;appearance:none;border-radius:2px;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.booking-card__cta:hover{background:#34D3A0;border-color:#34D3A0}
.booking-card__cta:focus-visible{outline:2px solid #FFFDF8;outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  .booking-card{transition:opacity .12s linear;transform:none}
  .booking-card.is-open{transform:none}
}

/* below 1080 the card sits above the launcher, which is in the corner */
@media(max-width:1080px){
  .booking-card{right:16px;bottom:calc(16px + 62px + 16px)}
}
/* bottom sheet: full width between the gutters, above the 56px launcher */
@media(max-width:620px){
  .booking-card{
    left:16px;right:16px;width:auto;max-width:none;
    bottom:calc(16px + 56px + 14px);
  }
}

/* ---------- LEGAL PAGES ----------
   Terms and Privacy share this. One reading column, generous leading, and numbered
   sections that the in-page contents links to. No new tokens: it reuses the type
   scale and colours from the rest of the site. */
.legal{background:var(--bg);padding:clamp(46px,5.6vw,86px) 0 clamp(60px,7vw,110px)}
.legal__in{max-width:var(--container-reading)}

.legal__head{max-width:72ch;padding-bottom:clamp(26px,3vw,40px);border-bottom:1px solid var(--line)}
.legal__eyebrow{
  margin:0 0 14px;font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:var(--accent-ink);
}
.legal__h{
  margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(38px,6vw,74px);line-height:.98;letter-spacing:var(--t-h2-ls);color:var(--tx);
}
.legal__meta{margin:14px 0 0;font-size:var(--t-meta);font-weight:500;color:var(--tx-dim)}
.legal__lede{margin:clamp(18px,2vw,26px) 0 0;font-size:var(--t-body);line-height:1.62;color:var(--tx-mid)}

/* contents. Counter rather than list-style so the numbers take the label styling. */
.legal__toc{
  margin:clamp(30px,3.4vw,46px) 0 0;padding:clamp(22px,2.4vw,30px) clamp(22px,2.6vw,34px);
  background:var(--bg-2);border-radius:8px;
}
.legal__toc h2{
  margin:0 0 14px;font-size:var(--t-label);font-weight:700;
  letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--tx-mid);
}
.legal__toc ol{
  margin:0;padding:0;list-style:none;counter-reset:toc;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px clamp(20px,2.4vw,40px);
}
.legal__toc li{counter-increment:toc;display:flex;gap:10px;font-size:var(--t-supporting);line-height:1.4}
.legal__toc li::before{
  content:counter(toc);flex:none;min-width:1.4em;
  font-size:var(--t-label-sm);font-weight:700;color:var(--tx-dim);padding-top:3px;
}
.legal__toc a{color:var(--tx);text-decoration:none;border-bottom:1px solid transparent}
.legal__toc a:hover{color:var(--accent-ink);border-bottom-color:currentColor}

.legal__body{max-width:76ch;margin-top:clamp(34px,4vw,56px)}
.legal__body section{scroll-margin-top:90px;padding-top:clamp(26px,3vw,40px)}
.legal__body section + section{border-top:1px solid var(--line-soft)}
.legal__body h2{
  margin:0 0 clamp(12px,1.4vw,18px);font-size:var(--t-display-xs);font-weight:700;
  font-family:var(--f);line-height:1.25;letter-spacing:-.02em;color:var(--tx);
}
.legal__body h3{
  margin:clamp(22px,2.4vw,30px) 0 10px;font-size:var(--t-title);font-weight:700;
  line-height:1.3;letter-spacing:-.015em;color:var(--tx);
}
.legal__body p{margin:0 0 16px;font-size:var(--t-body-sm);line-height:1.68;color:var(--tx-mid)}
.legal__body p:last-child{margin-bottom:0}
.legal__body strong{color:var(--tx);font-weight:600}
.legal__body a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid rgba(4,120,87,.35)}
.legal__body a:hover{border-bottom-color:currentColor}

.legal__list,.legal__ol{margin:0 0 16px;padding:0 0 0 22px;color:var(--tx-mid)}
.legal__list{list-style:none;padding-left:20px}
.legal__list li{position:relative;margin:0 0 10px;font-size:var(--t-body-sm);line-height:1.62}
.legal__list li::before{
  content:"";position:absolute;left:-20px;top:.62em;
  width:6px;height:1px;background:var(--accent);
}
.legal__ol li{margin:0 0 10px;font-size:var(--t-body-sm);line-height:1.62}
.legal__list li:last-child,.legal__ol li:last-child{margin-bottom:0}

/* the one or two lines on each page that carry the most weight */
.legal__callout{
  margin:0 0 18px;padding:16px 20px;border-left:3px solid var(--accent);
  background:var(--bg-2);border-radius:0 6px 6px 0;
}
.legal__body .legal__callout{color:var(--tx);font-weight:500}

/* details only the business can supply. Deliberately loud so they cannot ship by
   accident: replace every one of these before this page goes near a customer. */
.legal__fill{
  background:#FEF3C7;border-bottom:1px dashed #B45309;color:#78350F;
  padding:1px 5px;border-radius:3px;font-weight:600;
}

@media(max-width:760px){
  .legal__toc ol{grid-template-columns:1fr}
}
@media(max-width:620px){
  .legal__toc{padding:20px 18px}
  .legal__body{max-width:none}
  .legal__body section{scroll-margin-top:76px}
}

/* ---------- FOOTER ----------
   Two columns: the brand block, and one short list of the sections worth returning
   to. Legal and the podcast sit in the bottom bar so the columns stay to one idea. */
.foot{background:#000F26;padding:clamp(48px,5.4vw,72px) 0 28px;font-size:var(--t-supporting);color:#A9BACE;--accent:var(--green-lit)}
.foot a{color:#A9BACE;text-decoration:none;transition:color .18s}
.foot a:hover{color:var(--green-lit)}
.foot h4{font-size:var(--t-label-sm);font-weight:600;letter-spacing:var(--t-label-ls);text-transform:uppercase;margin:0 0 18px;color:#6E829B}
.foot .lockup{height:29px;color:#F3F6FA}

.foot__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,230px);gap:clamp(28px,5.2vw,78px);align-items:start}
.foot__brand p{margin:20px 0 18px;max-width:46ch;line-height:1.6}
.foot__mail{color:#F3F6FA;border-bottom:1px solid #FFFFFF2E;padding-bottom:2px}
.foot__mail:hover{border-color:var(--green-lit)}
.foot__nav{display:flex;flex-direction:column;align-items:flex-start;gap:11px}

.foot__bar{
  margin-top:clamp(40px,5vw,60px);padding-top:22px;border-top:1px solid #FFFFFF1A;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 26px;font-size:var(--t-meta);color:#6E829B;
}
.foot__legal{display:flex;flex-wrap:wrap;gap:26px}
.foot__legal a{color:#6E829B}
/* Silktide consent manager, positioned bottom-left so it never meets the booking
   launcher, its expanded card or anything else fixed, all of which sit bottom-right.
   The library ships at z-index 99999, above the launcher (80), the card (100) and
   the Calendly overlay, which is the correct order: consent is dismissed first. */
#stcm-banner.stcm-pos-bottom-left,
#stcm-wrapper .stcm-icon{left:16px;right:auto}
@media(max-width:620px){
  /* full width between the gutters on a phone */
  #stcm-banner.stcm-pos-bottom-left{left:12px;right:12px;max-width:none;width:auto}
}
/* the launcher and its card stand down while the consent prompt is showing, so
   they can never sit under it. Set by onPromptOpen/onPromptClose in tracking.js. */
.consent-prompt-open .booking-launcher,
.consent-prompt-open .booking-card{display:none}

/* The floating cookie settings button is hidden, not removed. The library has no
   openPreferences() method, so the footer "Cookie settings" link reopens the panel
   by calling .click() on this button, which still fires while it is display:none.
   Removing the element would break that link. */
#stcm-icon{display:none !important}
/* Silktide's own credit link in the preferences panel. */
#stcm-wrapper .stcm-credit-link{display:none !important}
/* the footer link that reopens the preferences panel */
.foot__legal a[data-cookie-settings]{background:none;border:0;padding:0;cursor:pointer;font:inherit}

/* statutory company disclosure. Quiet by design: it has to be present and legible,
   it does not have to compete with anything. The address sits on its own line from
   560px up so the sentence does not run long. */
.foot__reg{
  /* no max-width: this runs the full footer width. Capped to a reading measure it
     stacked four lines into the left half and read as a cramped block. */
  margin:16px 0 0;
  /* same colour as the footer bar: 4.86:1 on the navy, which small text needs.
     A quieter grey looked better and failed AA, and this text has to be legible. */
  font-size:var(--t-label-sm);line-height:1.6;color:#6E829B;
}

/* Touch sizing. The footer links are the smallest targets on the page - 22 to 25px
   tall against the 44px guideline - and they are the ones people reach for on a
   phone. The height comes from the box rather than the gap so the visual rhythm
   barely moves: .foot__nav trades its 11px gap for the extra box height. */
@media(max-width:1080px){
  .foot__nav{gap:0}
  .foot__nav a{display:flex;align-items:center;min-height:44px}
  .foot__legal{gap:20px}
  .foot__legal a{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:840px){
  .foot__grid{grid-template-columns:1fr;gap:38px}
  .foot__bar{flex-direction:column;align-items:flex-start}
}

/* ---------- 6. HERO ---------- */
/* Single centred column. The vertical rhythm below the headline is the whole
   design: 46 / 30 / 18 to the reassurance line, then 30px of air before the
   section ends, which meets the ticker label's own 14px top padding to leave
   about 64px of clear space under the reassurance line - enough that the label
   reads as the hero's footer, not so much that it floats free of it. The top
   padding is deliberately less than the old 100px: the headline carries the
   weight now, so the group sits higher without crowding the nav. */
.hero{position:relative;overflow:hidden;padding:clamp(56px,4.8vw,76px) 0 clamp(28px,2.1vw,30px)}

.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--dot) 1px,transparent 1px);
  background-size:26px 26px;opacity:.45;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 30%,transparent 100%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 30%,transparent 100%);
}
/* the explicit minmax(0,1fr) track matters: an implicit auto track would size to
   the headline's max-content and push the whole hero wider than the viewport */
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.hero-copy{width:100%}
/* width:max-content keeps the three deliberate <br> breaks intact: the line lays
   out un-wrapped first, so the box is only ever as wide as "WE BUILD AND OPERATE".
   max-width:100% hands it back to normal wrapping on narrow screens. */
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-hero);line-height:1.14;letter-spacing:-.016em;
  text-transform:uppercase;color:var(--tx);
  width:max-content;max-width:100%;margin-inline:auto;
}
/* balance keeps the two lines close to even; without it the sentence breaks
   710/140 and the second line reads as a stub under a centred headline */
.hero__sub{max-width:720px;margin-top:14px;margin-inline:auto;font-size:var(--t-body);line-height:1.62;color:#506078;text-wrap:balance}
.hero__sub:first-of-type{margin-top:46px}
.hero-ctas{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:30px;flex-wrap:wrap}
/* the hero pair runs larger than the shared button: it is the only place two CTAs
   sit alone under a display headline, and the site default reads slight there.
   Scoped, so the six other .cta buttons on the page are untouched. */
.hero-ctas .btn-primary,.hero-ctas .btn-outline{height:54px;padding:0 32px}
.hero-ctas .btn-primary{min-width:168px}
.hero-ctas .btn-outline{min-width:200px}
.btn-primary,.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 27px;font-size:var(--t-btn);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;border-radius:3px;text-decoration:none;white-space:nowrap;
  transition:all .18s ease;
}
.btn-primary{min-width:152px;background:var(--accent);color:#fff;box-shadow:0 6px 18px -6px rgba(5,150,105,.35)}
.btn-primary:hover{background:var(--green-hov);transform:translateY(-1px);box-shadow:0 10px 22px -6px rgba(5,150,105,.5)}
.btn-outline{min-width:184px;background:var(--surface);color:var(--accent);border:1.5px solid var(--accent)}
.btn-outline:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface));transform:translateY(-1px)}

/* ---------- primary CTA contract ----------
   Every "Let's talk" button carries .cta. The arrow lives here rather than in the
   markup, so the glyph, size, gap, alignment and hover are identical on all seven
   and there is nothing to keep in sync by hand. Each section keeps its own colours;
   only the arrow tint varies, via --cta-arrow. Secondary CTAs never take .cta.
   The " / \"\"" alt-text syntax keeps the glyph out of the accessibility tree. */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap}
.cta::after{
  content:"\2192" / "";
  font-size:15px;line-height:1;color:var(--cta-arrow,currentColor);
  transition:transform .18s var(--ease);
}
.cta:hover::after{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.cta:hover::after{transform:none}}
/* navy buttons take the green arrow; the green buttons keep their white label colour */
.pilot__cta,.start__cta,.ask__cta,.ready__cta{--cta-arrow:var(--green-lit)}
.hero-meta{margin-top:18px;margin-inline:auto;font-size:var(--t-meta);line-height:1.5;font-weight:500;color:#3f5068;max-width:520px}

/* ---------- industry ticker ----------
   Two identical sequences sit side by side in one track; the track translates by
   exactly -50%, so the second copy lands where the first began and the loop is
   seamless. Every item carries its own trailing separator, including the last,
   which is what keeps the join between the two copies consistent. */
.ticker{background:var(--bg)}
.ticker__strip{background:var(--green);overflow:hidden}
.ticker__label{
  margin:0;padding:14px var(--gut) 12px;text-align:center;
  font-family:var(--f);font-size:var(--t-eyebrow);font-weight:600;line-height:1.3;
  letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:#63707F;
}
.ticker__viewport{overflow:hidden;display:flex;align-items:center;padding-block:26px}
.ticker__track{
  display:flex;flex:none;width:max-content;
  animation:ticker-scroll 68s linear infinite;
  will-change:transform;
}
.ticker__seq{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.ticker__seq li{
  display:flex;align-items:center;white-space:nowrap;line-height:1;
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--t-label-ls);
  text-transform:uppercase;color:#000F26;
}
.ticker__seq li::after{
  content:"//";margin:0 clamp(20px,2.4vw,38px);
  font-weight:700;color:#000F26;opacity:.4;
}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){
  .ticker__viewport{padding-block:20px}
  .ticker__seq li{letter-spacing:.14em}
  .ticker__seq li::after{margin:0 18px}
}
/* The ticker deliberately keeps animating under prefers-reduced-motion. It used to
   stop and become a hand-scrollable row, but with no affordance that read as a
   broken, clipped list on phones with Reduce Motion enabled - which is most of the
   reason anyone saw it. Product decision, taken knowingly: this is the one element
   on the page that ignores the setting. The scroll-driven effects in scroll.js
   still honour it. */

/* ---------- desktop layout ---------- */
@media(min-width:1200px){
  /* same compression as the hero headline, so long lines hold one line */
  .dial__h{width:max-content;max-width:none;transform:scaleX(.88);transform-origin:left top}
  .pilot__h{width:max-content;max-width:none;transform:scaleX(.88);transform-origin:left top}
  .build__h{width:max-content;max-width:none;transform:scaleX(.88);transform-origin:left top}
  .plate__h{width:max-content;max-width:none;transform:scaleX(.88);transform-origin:left top}
  .model__h{width:max-content;max-width:none;transform:scaleX(.88);transform-origin:left top}
  .ramp__h{width:max-content;max-width:none;transform:scaleX(.88);transform-origin:left top}
  .behind__h{width:max-content;max-width:none;transform:scaleX(.88);transform-origin:left top}
  .ask__h{width:max-content;max-width:none;transform:scaleX(.88);transform-origin:left top}
}
@media(min-width:1440px){
  /* Anton is ~12% wider than the reference letterforms at the same cap height, so
     the headline is compressed horizontally rather than swapped for another face.
     the transform runs after layout, so the centring comes from the auto margins
     on .hero h1 and the origin only has to keep the compression symmetrical. */
  .hero h1{transform:scaleX(.92);transform-origin:top center}
}

/* ---------- hero responsive ---------- */
@media(max-width:1080px){
  .hero h1{font-size:clamp(49px,6.9vw,65px)}
  .hero__sub{max-width:660px}
}
@media(max-width:640px){
  .hero h1{font-size:clamp(33px,8.4vw,49px)}
  .hero__sub:first-of-type{margin-top:26px}
  /* full-width buttons stack, so the row gap becomes the gap between them */
  .hero-ctas{gap:14px;margin-top:26px}
  .btn-primary,.btn-outline{width:100%}
}

/* ---------- 7. SECTION COMPONENTS ---------- */
/* ---------- why the model works ----------
   Reference 1672x941: headline caps ~70 over four lines, five-column table with a
   navy header band and the Hire A Cold Caller row tinted and rule-topped.
   White ground, not the reference's warm off-white: the section above it is warm,
   and two warm bands in a row merge into one. */
.model{background:var(--bg);padding:var(--band-y) 0;color:#000E26}
.model__eyebrow{
  margin:0 0 clamp(24px,3vw,42px);font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:#000E26;
  display:flex;align-items:center;gap:10px;
}
.model__top{display:grid;grid-template-columns:minmax(0,52%) minmax(0,1fr);gap:clamp(28px,4.5vw,68px);align-items:start}
.model__h{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-h2);line-height:1.08;letter-spacing:var(--t-h2-ls);
  text-transform:uppercase;color:#000E26;margin:0;
}
.model__h .tint{color:var(--accent)}
.model__lede p{margin:0 0 26px;font-size:var(--t-body);line-height:1.62;color:#49596D;max-width:46ch}
.model__lede p:last-child{margin-bottom:0}

.model__table{margin-top:clamp(34px,4.4vw,62px)}
.model__head,.model__row{
  display:grid;grid-template-columns:1.05fr 1fr 1.2fr 1.1fr 1.65fr;
  gap:0;align-items:stretch;
}
.model__head span,.model__row span{
  display:flex;align-items:center;padding:0 clamp(12px,1.5vw,24px);
}
.model__head{
  background:#000E27;color:#fff;
  font-size:var(--t-label);font-weight:700;letter-spacing:var(--t-label-ls);text-transform:uppercase;
}
.model__head span{padding-top:19px;padding-bottom:19px}
.model__head span + span{border-left:1px solid rgba(255,255,255,.15)}
.model__row{border-bottom:1px solid #E0E0E0;font-size:var(--t-body-sm);line-height:1.55;color:#2B3746}
.model__row span{padding-top:clamp(16px,1.9vw,24px);padding-bottom:clamp(16px,1.9vw,24px)}
.model__row span + span{border-left:1px solid #E7E7E7}
.model__row--us{
  background:#EAF3ED;border-top:2px solid var(--accent);border-bottom:0;
}
.model__row--us .model__route{color:var(--accent-ink);font-weight:700}

@media(max-width:1000px){
  .model__top{grid-template-columns:1fr;gap:26px}
  /* The table becomes one segmented card per route: title over a rule, then the four
     specs as label / value pairs either side of a hairline. */
  .model__head{display:none}
  .model__table{display:flex;flex-direction:column;gap:14px}
  .model__row{
    display:block;padding:0 20px 18px;
    background:#FFFFFF;border:1px solid #E4E4E2;border-radius:8px;
    font-size:var(--t-body-sm);line-height:1.5;color:#2B3746;
    /* The divider is one continuous line painted on the card rather than a border on
       each row, so it does not break at the gaps between specs. It runs the full
       height and the title's own background masks the part above it. */
    background-image:linear-gradient(#E7E7E7,#E7E7E7);
    background-repeat:no-repeat;background-size:1px 100%;background-position:130px 0;
  }
  .model__row span{
    display:grid;grid-template-columns:100px minmax(0,1fr);
    column-gap:20px;align-items:start;padding:7px 0;
  }
  .model__row span + span{border-left:0}
  .model__row span::before{
    content:attr(data-label);font-size:10.5px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:#8B94A0;margin:0;padding-top:2px;
  }
  /* title sits at the top of the padding box so its background covers the line above
     it; background-color:inherit keeps the mask correct on the tinted card too */
  .model__row .model__route{
    display:block;padding:17px 0 13px;margin-bottom:6px;
    background-color:inherit;border-bottom:1px solid #E4E4E2;
    font-size:var(--t-title);font-weight:700;color:#0B1526;
  }
  .model__row .model__route::before{display:none}
  .model__row--us{
    background:#F1F8F3;border:1px solid var(--accent);
  }
  .model__row--us .model__route{color:var(--accent-ink);border-bottom-color:rgba(5,150,105,.32)}
  .model__row--us span::before{color:var(--accent-ink)}
}

/* ---------- the first eight weeks ----------
   Reference 1672x941: warm ground, three-line headline, a four-stage grid of shared
   1px boxes (x120-1553, 277 tall) hanging off a node rail, and a closing statement
   behind a green bar. The rail stops at the last node rather than running past it. */
.ramp{background:#F7F5F2;padding:var(--band-y) 0;color:#000E26}
.ramp__eyebrow{
  display:flex;align-items:center;gap:9px;margin:0 0 clamp(20px,2.2vw,30px);
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:#000E26;
}

.ramp__top{display:grid;grid-template-columns:minmax(0,52%) minmax(0,1fr);gap:clamp(28px,4.5vw,68px)}
.ramp__h{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-h2);line-height:1.08;letter-spacing:var(--t-h2-ls);
  text-transform:uppercase;color:#000E26;margin:0;
}
.ramp__lede p{margin:0 0 20px;font-size:var(--t-body);line-height:1.62;color:#33404F;max-width:52ch}
.ramp__lede p:last-child{margin-bottom:0}

/* the stage grid. Boxes share their 1px rules: every stage carries a full border
   except the left one, which only the first stage draws. */
.ramp__track{
  list-style:none;margin:clamp(50px,5.6vw,78px) 0 0;padding:60px 0 0;
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
/* the rail runs the full width of the stage grid */
.ramp__track::before{
  content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:#CFCAC2;
}
.ramp__stage{
  position:relative;
  padding:clamp(24px,2.5vw,32px) clamp(20px,2vw,28px) clamp(28px,3vw,38px);
  border:1px solid #DCD7CF;border-left:0;
}
.ramp__stage:first-child{border-left:1px solid #DCD7CF}
/* solid node sitting on the rail. No ring, no stem down to the box. */
.ramp__stage::before{
  content:"";position:absolute;left:50%;top:-60px;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;background:#001127;
}
/* the stage the section is about: green rule, faint wash, green node */
.ramp__stage--now{
  background:#F1F5F1;border-top:3px solid var(--accent);
  padding-top:calc(clamp(24px,2.5vw,32px) - 2px);
}
.ramp__stage--now::before{background:var(--accent)}

.ramp__when{margin:0 0 12px;font-size:var(--t-label);font-weight:700;letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--accent-ink)}
.ramp__stage h3{
  position:relative;margin:0 0 clamp(16px,1.6vw,21px);padding-bottom:clamp(16px,1.6vw,21px);
  font-family:var(--display);font-weight:400;font-size:var(--t-display-sm);
  line-height:1.1;letter-spacing:.005em;text-transform:uppercase;color:#000E26;
}
.ramp__stage h3::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:#CFCAC2}
.ramp__body{margin:0;font-size:var(--t-supporting);line-height:1.55;color:#33404F}

.ramp__foot{
  margin:clamp(34px,3.6vw,50px) 0 0;
  font-family:var(--display);font-weight:400;
  font-size:var(--t-display-md);line-height:1.2;letter-spacing:.005em;
  text-transform:uppercase;color:#000E26;
}

@media(max-width:1080px){
  .ramp__top{grid-template-columns:1fr;gap:26px}
  /* the rail is a desktop device: below this the stages read as plain cards */
  .ramp__track{padding-top:0;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ramp__track::before,.ramp__stage::before{display:none}
  .ramp__stage{border-left:1px solid #DCD7CF}
  .ramp__stage:nth-child(even){border-left:0}
  .ramp__stage:nth-child(n+3){border-top:0}
  .ramp__stage.ramp__stage--now{border-top:3px solid var(--accent)}
}
@media(max-width:620px){
  .ramp__track{grid-template-columns:1fr}
  .ramp__stage:nth-child(even){border-left:1px solid #DCD7CF}
  .ramp__stage + .ramp__stage{border-top:0}
  .ramp__stage.ramp__stage--now{border-top:3px solid var(--accent)}
}

/* ---------- what stays off your plate ----------
   Reference 1774x887: headline caps ~82 over three lines, 5 rows on a ~116px
   pitch behind a hairline spine, and a centred closing line flanked by rules. */
.plate{--accent:var(--green-lit)}
.plate__eyebrow{
  margin:0 0 clamp(24px,3vw,42px);font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:#EFEAE2;
  display:flex;align-items:center;gap:10px;
}
.plate__grid{display:grid;grid-template-columns:minmax(0,47%) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:start}
.plate__h{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-h2-wide);line-height:1.06;letter-spacing:var(--t-h2-ls);
  text-transform:uppercase;color:#EFEAE2;margin:0;
}
.plate__h .tint{color:var(--accent)}
.plate__rule{display:block;width:100px;height:5px;background:var(--accent);margin:clamp(22px,2.8vw,38px) 0 clamp(24px,3vw,40px)}
.plate__lede{margin:0;font-size:var(--t-body);line-height:1.62;color:#F3F5F8;max-width:46ch}

.plate__panel{border-left:1px solid rgba(255,255,255,.12);padding-left:clamp(26px,3.4vw,54px)}
.plate__label{
  margin:0 0 clamp(16px,2vw,26px);font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:var(--accent);
}
.plate__rows{margin:0}
.plate__row{
  display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);
  gap:clamp(13px,1.8vw,27px);align-items:start;
  padding:clamp(16px,2vw,24px) 0;border-top:1px solid rgba(255,255,255,.12);
}
.plate__row:first-child{border-top:0;padding-top:0}
.plate__row dt{
  font-family:var(--display);font-weight:400;font-size:var(--t-display-sm);
  letter-spacing:.01em;text-transform:uppercase;color:#fff;line-height:1.15;
}
.plate__row dd{margin:0;font-size:var(--t-body-sm);line-height:1.55;color:#DDE3EA}

.plate__foot{
  display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);
  margin:clamp(40px,5vw,72px) 0 0;
  font-family:var(--display);font-weight:400;
  font-size:var(--t-display-md);letter-spacing:.005em;text-transform:uppercase;
  line-height:1.2;color:#EFEAE2;
}
.plate__foot-rule{flex:1;height:1px;background:var(--accent);min-width:24px}
.plate__foot b{font-weight:400}
.plate__foot i{font-style:normal;color:var(--accent)}

@media(max-width:1000px){
  .plate__grid{grid-template-columns:1fr;gap:34px}
  .plate__panel{border-left:0;padding-left:0}
}
@media(max-width:620px){
  .plate__row{grid-template-columns:1fr;gap:6px}
  .plate__foot{flex-direction:column;gap:14px;text-align:center}
  .plate__foot-rule{width:70px;flex:0 0 auto}
}

/* ---------- how to start ----------
   One connected Validate -> Launch -> Manage track, not three cards. The three
   stages abut inside a single bordered container and are separated by hairlines;
   Launch is the dominant one and carries the navy ground. The rule that runs from
   each stage label to its column edge reads as one continuous line across the
   track, which is the only directional cue - no rail, no arrows. */
.start{background:var(--bg-2);padding:var(--band-y) 0;color:#00000B}
.start__eyebrow{
  margin:0 0 clamp(20px,2.4vw,32px);font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:#00000B;
  display:flex;align-items:center;gap:9px;
}
.start__top{display:grid;grid-template-columns:minmax(0,52%) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:start}
.start__h{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-h2);line-height:1.08;letter-spacing:var(--t-h2-ls);
  text-transform:uppercase;color:#00000B;margin:0;
}
.start__h .tint{color:var(--accent)}
.start__rule{display:block;width:57px;height:4px;background:var(--accent);margin-top:clamp(18px,2.2vw,30px)}
.start__lede{margin:0;font-size:var(--t-body);line-height:1.62;color:#101B2E;max-width:44ch}

/* three separate cards, not one connected track. Each carries its own border,
   radius and shadow; the grid gap is what makes them read as distinct stages, so
   there is no rail, no arrow and no connecting line. align-items:stretch plus a
   column flex inside each card keeps all three the same height whatever the
   bullet counts are. */
.start__track{
  list-style:none;margin:clamp(34px,4.2vw,54px) 0 0;padding:0;
  display:grid;grid-template-columns:.9fr 1.15fr .95fr;align-items:stretch;
  gap:clamp(16px,1.7vw,24px);
}
.start__stage{
  display:flex;flex-direction:column;
  padding:clamp(26px,2.6vw,36px) clamp(22px,2.2vw,32px) clamp(28px,2.8vw,38px);
  background:var(--surface);border:1px solid #CFDCD6;border-radius:10px;
  box-shadow:0 1px 2px rgba(0,15,38,.04), 0 10px 28px rgba(0,15,38,.06);
}
/* Launch: dominant, and the only stage that changes ground */
.start__stage--launch{
  background:#001127;color:#F3F6FA;border-color:#001127;
  box-shadow:0 1px 2px rgba(0,15,38,.10), 0 14px 34px rgba(0,15,38,.18);
  padding-left:clamp(24px,2.5vw,36px);padding-right:clamp(24px,2.5vw,36px);
  padding-bottom:clamp(30px,3.1vw,44px);
}

.start__step{
  margin:0 0 clamp(16px,1.8vw,24px);font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:#00000B;
  display:flex;align-items:center;gap:9px;
}
.start__step b{color:var(--accent-ink);font-weight:600}
.start__step i{font-style:normal;color:#A7AEB6}
.start__step::after{content:"";flex:1;height:1px;background:#CFDCD6;margin-left:6px}
.start__stage--launch .start__step{color:#F3F6FA}
.start__stage--launch .start__step b{color:var(--green-lit)}
.start__stage--launch .start__step i{color:#5A6472}
.start__stage--launch .start__step::after{background:rgba(255,255,255,.16)}

.start__stage h3{
  font-family:var(--f);font-weight:700;font-size:var(--t-title);
  line-height:1.28;letter-spacing:-.02em;color:#00000B;margin:0 0 13px;
}
/* two-line floor only in the band where the longest title wraps, so the three
   prices stay on one baseline without leaving dead space at wider sizes */
@media(min-width:1081px) and (max-width:1360px){.start__stage h3{min-height:2.5em}}
.start__stage--launch h3{color:#fff}
/* price weight carries the hierarchy: quietest, dominant, then continuation */
.start__price{margin:0;font-size:var(--t-price);font-weight:600;letter-spacing:-.02em;line-height:1.15;color:#00000B}
.start__price span{font-size:.62em;font-weight:500;white-space:nowrap}
.start__stage--launch .start__price{color:var(--green-lit)}
.start__stage--manage .start__price{color:var(--accent-ink)}
.start__sub{margin:8px 0 0;font-size:var(--t-supporting);color:var(--green-lit)}
.start__note{margin:9px 0 0;font-size:var(--t-supporting);color:#4A5260}

.start__body{
  margin:clamp(16px,1.8vw,24px) 0 0;padding-top:clamp(16px,1.8vw,24px);
  border-top:1px solid #DCE6E1;font-size:var(--t-supporting);line-height:1.55;color:#4A5260;
}
.start__stage--launch .start__body{border-top-color:rgba(255,255,255,.16);color:#A9BACE}
.start__list{
  list-style:none;margin:clamp(16px,1.8vw,24px) 0 0;
  /* padding-left:0 matters: only padding-top was set, so the browser default
     ul{padding-left:40px} survived and pushed the whole list 40px right of the
     title, price, description and footer. The marker now sits on the card's
     content edge like every other element, with the text indented from it. */
  padding:clamp(16px,1.8vw,24px) 0 0;
  border-top:1px solid #DCE6E1;
}
.start__stage--launch .start__list{border-top-color:rgba(255,255,255,.16)}
.start__list li{position:relative;padding:0 0 10px 20px;font-size:var(--t-supporting);line-height:1.55;color:#28303E}
.start__list li:last-child{padding-bottom:0}
.start__list li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:1px;background:var(--accent)}
.start__stage--launch .start__list li{color:#DDE3EA}
.start__stage--launch .start__list li::before{background:var(--green-lit)}

/* margin-top:auto pins this to the bottom of the card, which is what keeps the
   three footers on one baseline despite different bullet counts. Launch has no
   footer line, so nothing pins there and its list simply ends. */
.start__foot{
  margin:clamp(16px,1.8vw,24px) 0 0;padding-top:clamp(14px,1.6vw,20px);
  border-top:1px solid #DCE6E1;
  font-size:var(--t-supporting);font-weight:500;line-height:1.5;color:var(--accent-ink);
}
.start__list{margin-bottom:auto}

/* one CTA for the whole journey, not one per stage */
.start__act{display:flex;justify-content:center;margin-top:clamp(28px,3.2vw,42px)}
.start__cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:#001127;color:#fff;text-decoration:none;
  padding:20px 32px;font-size:var(--t-btn);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  transition:background .18s ease,transform .18s ease;
}
.start__cta:hover{background:#04204a;transform:translateY(-1px)}

@media(max-width:1080px){
  .start__top{grid-template-columns:1fr;gap:26px}
  /* stacked in source order, Test then Launch then Manage, separated by the same
     gap rather than by shared borders */
  .start__track{grid-template-columns:1fr;gap:clamp(14px,2.2vw,20px)}
}
@media(max-width:620px){
  .start__stage,.start__stage--launch{padding:24px 20px 28px}
  .start__act{margin-top:26px}
  .start__cta{width:100%}
}

/* ---------- who this is for ----------
   Reference 1533x1026: headline caps ~84 over three lines, a 55x4px rule, two
   qualification columns split by a hairline, and a closing note. */
.who{background:#F9F7F3;padding:var(--band-y) 0;color:#0C1A30}
.who__eyebrow{
  margin:0 0 clamp(20px,2.4vw,32px);font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:#0C1A30;
  display:flex;align-items:center;gap:9px;
}
.who__top{display:grid;grid-template-columns:minmax(0,54%) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:start}
.who__h{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-h2-wide);line-height:1.06;letter-spacing:var(--t-h2-ls);
  text-transform:uppercase;color:#0C1A30;margin:0;
}
.who__h .tint{color:var(--accent)}
.who__rule{display:block;width:55px;height:4px;background:var(--accent);margin-top:clamp(20px,2.4vw,34px)}
.who__lede p{margin:0 0 24px;font-size:var(--t-body);line-height:1.62;color:#101B2E;max-width:44ch}
.who__lede p:last-child{margin-bottom:0}

.who__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,66px);margin-top:clamp(36px,4.5vw,58px)}
.who__col h3{
  font-family:var(--display);font-weight:400;font-size:var(--t-display-sm);
  letter-spacing:.01em;text-transform:uppercase;margin:0 0 clamp(18px,2vw,26px);
}
.who__col--yes{border-left:3px solid var(--accent);padding-left:clamp(20px,2.2vw,32px)}
.who__col--yes h3{color:var(--accent-ink)}
.who__col--no{border-left:1px solid #E2E1DE;padding-left:clamp(20px,2.2vw,32px)}
.who__col--no h3{color:#0C1A30}
.who__col ul{list-style:none;margin:0;padding:0}
.who__col li{
  padding:17px 0;border-bottom:1px solid #E9E8E6;
  font-size:var(--t-body-sm);line-height:1.55;color:#232C3F;
}
.who__col li:last-child{border-bottom:0}

.who__close{
  margin:clamp(34px,4vw,54px) 0 0;font-size:var(--t-body);line-height:1.62;color:#0C1A30;
}
.who__close-rule{display:block;width:82px;height:3px;background:var(--accent);margin-bottom:clamp(16px,1.8vw,24px)}
.who__close b{color:var(--accent-ink);font-weight:700}

@media(max-width:900px){
  .who__top{grid-template-columns:1fr;gap:26px}
  .who__cols{grid-template-columns:1fr;gap:34px}
}

/* ---------- the validation sprint ----------
   Two columns balanced on their centres: the editorial left, a flat navy process
   panel on the right. The green/navy contrast carries the section - no spine, no
   nodes, no gradient, no card shadow. Class stays .pilot: the sprint is the offer
   that replaced the 30-day pilot. */
.pilot{background:var(--accent);padding:clamp(60px,7.4vw,106px) 0;color:#001027}
.pilot__grid{
  display:grid;grid-template-columns:minmax(0,1.013fr) minmax(0,1fr);
  column-gap:clamp(40px,4vw,56px);row-gap:0;align-items:start;
}
.pilot__eyebrow{
  grid-column:1 / -1;margin:0 0 clamp(22px,2.4vw,38px);font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:var(--tx);
  display:flex;align-items:center;gap:9px;
}
/* the spec line is the section's terms, so it gets its own air below rather than
   sitting on top of the headline. Both columns start under it. */
.pilot__price{
  grid-column:1 / -1;margin:0 0 clamp(40px,5vw,72px);font-size:clamp(13px,1.05vw,16px);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#FFFDF8;
}
/* scoped one step below --t-statement: this column is narrower than the final
   CTA's full-bleed centre, so the shared token would crowd the proof and CTA */
.pilot__h{
  font-family:var(--display);font-weight:400;
  /* Mobile headline is set by the floor, not the vw term, so the floor is what to
     raise. It is min(48px, 13vw) rather than a flat 48px so the narrowest phones
     scale down instead of overflowing: "IN TWO WEEKS." is the widest line and at a
     flat 48px it would not fit 320px. Raising the floor rather than overriding in a
     media query keeps the curve monotonic - a breakpoint override would make the
     headline shrink as the screen got wider. The 5.6vw term is untouched. */
  font-size:clamp(min(48px,13vw),5.6vw,82px);line-height:.96;letter-spacing:var(--t-h2-ls);
  text-transform:uppercase;color:#001027;margin:0 0 clamp(20px,2.2vw,30px);
}
.pilot__last{color:#FFFDF8}
.pilot__intro > p:not([class]){margin:0 0 clamp(20px,2.1vw,30px);font-size:var(--t-body);line-height:1.62;color:#001027;max-width:540px}
.pilot__intro > p:not([class]):last-of-type{margin-bottom:0}
/* the go / no-go condition as an operating principle: a hairline, not a box */
.pilot__risk{
  margin:clamp(22px,2.2vw,30px) 0 0;max-width:540px;padding:0 0 0 clamp(16px,1.6vw,22px);
  border-left:2px solid rgba(255,253,248,.85);
  font-size:var(--t-body-sm);line-height:1.55;font-weight:600;color:#001127;
}
.pilot__cta{
  display:inline-flex;align-items:center;margin-top:clamp(20px,2vw,26px);
  background:#001127;color:#FFFDF8;text-decoration:none;
  padding:17px 32px;font-size:var(--t-btn);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  transition:background .18s ease,transform .18s ease;
}
.pilot__cta:hover{background:#04204a;transform:translateY(-1px)}

/* flat navy panel, sized by its content rather than stretched to the column */
.pilot__card{
  list-style:none;width:100%;margin:0;
  padding:clamp(30px,3.6vw,60px) clamp(26px,3.2vw,56px);
  border-radius:10px;background:#03152e;
  align-self:stretch;
  display:flex;flex-direction:column;justify-content:space-between;
}
.pilot__row{
  display:grid;grid-template-columns:56px minmax(0,1fr);
  column-gap:28px;align-items:start;
  padding:clamp(26px,2.9vw,50px) 0;border-top:1px solid rgba(255,255,255,.13);
}
.pilot__row:first-child{border-top:0;padding-top:0}
.pilot__row:last-child{padding-bottom:0}
.pilot__num{margin:0;display:flex;gap:8px;font-size:var(--t-supporting);font-weight:600;letter-spacing:.1em;line-height:1.4;padding-top:6px}
.pilot__num b{color:var(--green-lit);font-weight:600}
.pilot__num i{font-style:normal;color:rgba(255,255,255,.32)}
.pilot__row h3{
  font-family:var(--display);font-weight:400;font-size:clamp(24px,2.55vw,36px);
  line-height:1.1;letter-spacing:.005em;text-transform:uppercase;color:#FFFDF8;margin:0 0 12px;
}
.pilot__row p{margin:0;font-size:clamp(16px,1.25vw,18px);line-height:1.55;color:rgba(255,253,248,.78)}

/* the editorial column is shorter than the process panel, so above the stack point
   it holds while the three steps scroll past it. The header is not sticky, so the
   offset is just breathing room from the top of the viewport. */
@media(min-width:1001px){
  .pilot__intro{position:sticky;top:56px}
}
@media(max-width:1000px){
  /* left content first, then the panel. row-gap stays 0 so the eyebrow and price
     keep their own margins; only the panel takes a gap. */
  .pilot__grid{grid-template-columns:1fr}
  .pilot__card{display:block;margin-top:clamp(30px,4vw,44px)}
  .pilot__row{padding:26px 0}
}
@media(max-width:560px){
  .pilot__card{padding:26px 22px}
  .pilot__row{grid-template-columns:46px minmax(0,1fr);column-gap:20px}
  .pilot__cta{width:100%;justify-content:center}
}

/* ---------- how we build it ----------
   Reference geometry: 4-line headline at 77px cap, 51x6px rule, five steps on a
   ~195px pitch against a hairline spine, and a 95px navy strip. Brand green, not
   the reference's deeper forest tone. */
.build{background:#F7F5F2;padding:var(--band-y) 0 0;color:#051329}
.build__grid{display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr);gap:clamp(30px,4.5vw,66px);align-items:start}
.build__eyebrow{
  margin:0 0 clamp(20px,2.4vw,32px);font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:#051329;
  display:flex;align-items:center;gap:9px;
}
.build__h{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-h2-wide);line-height:1.06;letter-spacing:var(--t-h2-ls);
  text-transform:uppercase;color:#051329;margin:0;
}
.build__h .tint{color:var(--accent)}
.build__rule{display:block;width:51px;height:6px;background:var(--accent);margin:clamp(18px,2.2vw,30px) 0 clamp(20px,2.4vw,30px)}
.build__intro > p:not([class]){margin:0 0 18px;font-size:var(--t-body);line-height:1.62;color:#5F6674;max-width:46ch}
.build__quote{
  margin:clamp(22px,2.6vw,32px) 0 clamp(8px,1vw,14px);padding:4px 0 4px 20px;
  border-left:3px solid var(--accent);
  font-size:var(--t-supporting);font-weight:600;line-height:1.75;letter-spacing:.1em;
  text-transform:uppercase;color:#051329;
}

/* base spine plus a progress spine layered over it; the fill is scaled from the
   top by scroll.js, so no layout is touched while it animates */
.build__steps{list-style:none;margin:0;padding:0 0 0 clamp(22px,2.6vw,38px);position:relative}
.build__spine,.build__spine-fill{position:absolute;left:0;top:0;bottom:0;width:1px}
.build__spine{background:#D3E1DA}
.build__spine-fill{background:var(--accent);transform:scaleY(0);transform-origin:top;will-change:transform}
.build__step{
  position:relative;display:grid;
  grid-template-columns:clamp(72px,6.3vw,100px) minmax(0,1fr) minmax(0,194px);
  gap:clamp(13px,1.8vw,27px);align-items:start;
  padding:clamp(18px,2.35vw,29px) 0;border-top:1px solid #E2E0DA;
}
.build__step:first-child{border-top:0;padding-top:0}
/* the tick that meets the spine */
.build__step::before{
  content:"";position:absolute;left:calc(-1 * clamp(22px,2.6vw,38px));top:clamp(30px,3.4vw,44px);
  width:clamp(14px,1.6vw,22px);height:1px;background:#B9C8C1;
  transition:background .3s ease,opacity .3s ease;opacity:.7;
}
.build__step.is-on::before{background:var(--accent);opacity:1}
.build__stage{
  font-size:var(--t-label);font-weight:700;letter-spacing:var(--t-label-ls);text-transform:uppercase;
  color:#93A0A9;padding-top:5px;transition:color .32s ease;
}
.build__step.is-on .build__stage{color:var(--accent-ink)}
.build__copy h3{
  font-family:var(--f);font-weight:700;font-size:var(--t-title);
  line-height:1.28;letter-spacing:-.02em;color:#0B1526;margin:0 0 10px;
}
.build__copy p{margin:0;font-size:var(--t-supporting);line-height:1.55;color:#6C7280;max-width:40ch}
.build__outcome{
  margin:0;font-size:var(--t-label);font-weight:700;letter-spacing:var(--t-label-ls);
  text-transform:uppercase;color:var(--accent-ink);line-height:1.5;padding-top:4px;
  white-space:nowrap;
}
@media(max-width:1100px){.build__outcome{white-space:normal}}
.build__outcome span{
  display:block;font-size:var(--t-label-sm);font-weight:600;letter-spacing:var(--t-label-ls);
  color:#8C929D;margin-bottom:9px;
}

.build__strip{background:#041023;margin-top:var(--band-y)}
.build__strip-in{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:10px clamp(14px,2vw,30px);min-height:95px;
  font-size:var(--t-strip);font-weight:700;letter-spacing:var(--t-label-ls);
  text-transform:uppercase;color:#fff;
}
.build__strip-in i{font-style:normal;color:var(--green-lit)}
.build__strip-in .tint{color:var(--green-lit)}
/* scroll-lit words. .is-armed is added by scroll.js, so without it the strip keeps
   its static look and "Managed" stays green; with it, every word starts white and
   scroll.js turns them green in sequence. */
.build__strip-in span{transition:color .3s var(--ease)}
.build__strip-in.is-armed .tint{color:#fff}
.build__strip-in.is-armed span.is-lit{color:var(--green-lit)}
@media(prefers-reduced-motion:reduce){.build__strip-in span{transition:none}}

@media(max-width:1000px){
  .build__grid{grid-template-columns:1fr;gap:38px}
  .build__step{grid-template-columns:clamp(70px,9vw,96px) minmax(0,1fr);}
  .build__outcome{grid-column:2;padding-top:12px}
}
@media(max-width:620px){
  /* Three columns on mobile: stage | title and copy | outcome, with the spine and
     its ticks kept. All three tracks are fixed or fr, never auto: each step is its
     own grid, so an auto stage column would size to that row's own word and DESIGN,
     RECRUIT and IMPROVE would each start their title at a different x.
     This block used to say 1fr, meaning to stack, but .build__outcome keeps
     grid-column:2 from the 1000px block, so a second column was created regardless
     and the stack never happened. */
  .build__steps{padding-left:14px}
  .build__step{
    grid-template-columns:48px minmax(0,1fr) 84px;
    gap:0 8px;align-items:start;padding:20px 0;
  }
  .build__step::before{
    display:block;left:-14px;top:26px;width:9px;
  }
  .build__step:first-child::before{top:8px}
  /* Every track is squeezed to leave the copy column as wide as possible: three
     columns inside 326px of content is tight, and the paragraph is the only part
     anyone actually reads. "IMPROVE" sets the stage width, "PERFORMING" the outcome. */
  .build__stage{
    font-size:9.5px;letter-spacing:.04em;padding-top:4px;line-height:1.3;
  }
  .build__copy h3{font-size:17px;line-height:1.25;margin-bottom:7px}
  .build__copy p{font-size:14.5px;line-height:1.5;max-width:none}
  /* hairline separating the outcome, as in the reference */
  .build__outcome{
    grid-column:3;grid-row:1;padding:2px 0 0 11px;
    border-left:1px solid #E2E0DA;align-self:stretch;
    font-size:9.5px;letter-spacing:.03em;line-height:1.55;
  }
  .build__outcome span{font-size:9px;letter-spacing:.06em;margin-bottom:6px}
  /* one line, always. The five words plus separators need ~496px at the desktop
     size and there are only 326px at 390, so the type scales with the viewport and
     the tracking tightens. space-between then spreads whatever slack is left, so the
     row fills the strip at any width rather than depending on an exact gap. */
  .build__strip-in{
    flex-wrap:nowrap;justify-content:space-between;
    font-size:clamp(8px,2.3vw,12px);letter-spacing:.05em;
    gap:0 4px;min-height:0;padding-top:26px;padding-bottom:26px;
  }
  .build__strip-in span,.build__strip-in i{white-space:nowrap}
}

/* ---------- before the first dial ----------
   Reference geometry: headline cap 86px over two lines at 102px pitch, a 207x8px
   rule beneath it, four rows on a 139px pitch with 98px ghost numerals, and a
   callout with a green edge. Uses the site's brand green, not the reference's lime. */
.dial{--accent:var(--green-lit)}
.dial__eyebrow{
  margin:0;font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;
  color:#E8E4D8;display:flex;align-items:center;gap:11px;
}
.dial__intro{
  display:grid;grid-template-columns:minmax(0,61%) minmax(0,1fr);
  gap:clamp(26px,3.6vw,54px);align-items:start;margin-top:clamp(22px,2.6vw,34px);
}
/* below this the 61% track is too tight for "before anyone says hello." and the
   hard break strands "hello." on its own line */
@media(max-width:1180px){.dial__intro{grid-template-columns:minmax(0,66%) minmax(0,1fr)}}
.dial__h{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-h2-wide);line-height:1.06;letter-spacing:var(--t-h2-ls);
  text-transform:uppercase;color:#F2EBDF;margin:0;
}
.dial__rule{display:block;width:207px;max-width:60%;height:8px;background:var(--accent);margin-top:clamp(16px,2vw,26px)}
.dial__lede{padding-top:clamp(4px,1.4vw,20px)}
.dial__lede p{margin:0 0 20px;font-size:var(--t-body);line-height:1.62;color:#A9AEB4;max-width:46ch}
.dial__lede p:last-child{margin-bottom:0}

.dial__steps{list-style:none;margin:clamp(24px,2.4vw,34px) 0 0;padding:0}
.dial__step{
  display:grid;grid-template-columns:132px minmax(0,1fr) minmax(0,300px);
  gap:clamp(16px,2.1vw,34px);align-items:center;
  padding:clamp(15px,1.7vw,21px) 0;border-top:1px solid rgba(255,255,255,.09);
}
.dial__step:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
.dial__n{
  font-family:var(--display);font-weight:400;font-size:clamp(52px,6.3vw,92px);
  line-height:.86;color:#8C9197;letter-spacing:-.01em;
}
.dial__body h3{
  font-family:var(--display);font-weight:400;font-size:var(--t-display-sm);
  letter-spacing:.005em;text-transform:uppercase;color:#F2EBDF;margin:0 0 8px;
}
.dial__body p{margin:0;font-size:var(--t-supporting);line-height:1.55;color:#9AA0A8;max-width:50ch}
.dial__out{
  font-family:var(--display);font-weight:400;font-size:var(--t-display-xs);
  letter-spacing:.01em;text-transform:uppercase;color:#FFFDF5;text-align:right;
}

.dial__note{
  display:flex;flex-direction:column;gap:6px;margin:clamp(18px,2vw,24px) 0 0;
  padding:clamp(24px,2.8vw,34px) clamp(22px,2.6vw,34px);
  border:1px solid rgba(255,255,255,.10);border-left:5px solid var(--accent);
  background:rgba(255,255,255,.02);
  font-family:var(--display);font-weight:400;
  font-size:var(--t-display-md);line-height:1.2;letter-spacing:.005em;
  text-transform:uppercase;color:#F2EBDF;
}
.dial__note .tint{color:var(--accent)}

@media(max-width:900px){
  .dial__intro{grid-template-columns:1fr;gap:24px}
  .dial__step{grid-template-columns:86px minmax(0,1fr);gap:18px}
  .dial__out{grid-column:2;text-align:left;margin-top:6px}
}
@media(max-width:560px){
  /* The number column must be a fixed track. Every step is its own grid, so an auto
     track sizes to that row's own digits: in Anton "01" measures 42px and "02", "03"
     and "04" measure 50px, which started step 1's text 8px left of the rest.
     This used to read grid-template-columns:1fr, intending a full stack, but
     .dial__out keeps grid-column:2 from the 900px block, so an implicit second
     column was created anyway and the layout was never the stack it looked like. */
  .dial__step{grid-template-columns:52px minmax(0,1fr);gap:8px 12px}
  .dial__n{font-size:52px;line-height:1}
}

/* section intro: heading left, supporting text right */

/* why it fails: editorial rows, no cards */

/* the function: grouped specification list */

/* pilot phases: chronological, so numbered */

/* what you know at the end */

/* premium pricing treatment */

/* scale / adjust / stop */

/* prove it / run it / own it */
@media(max-width:920px){
  /* :first-child/:last-child set the horizontal padding above, so they have to
     be re-stated here or they out-specify the stacked rule */
}

/* industries */

/* comparison table */

/* who it's for */

/* founder */
/* ---------- behind the function ----------
   Warm ground, the founder note on the left and the portrait on the right. */
.behind{background:#F7F5F2;padding:var(--band-y) 0;color:#000E26}
.behind__top{
  display:grid;grid-template-columns:minmax(0,56%) minmax(0,1fr);
  gap:clamp(24px,3.6vw,54px);align-items:stretch;
}
/* the portrait fills the row so its bottom edge meets the copy's. The source is a
   square centred headshot, so cover crops the width: keep it centred horizontally,
   biased slightly up so the head is never the part that gets cut. */
.behind__shot{margin:0;display:flex}
.behind__shot img{display:block;width:100%;height:100%;min-height:470px;object-fit:cover;object-position:50% 28%}

.behind__eyebrow{
  display:flex;align-items:center;gap:9px;margin:0 0 clamp(16px,1.8vw,24px);
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:#000E26;
}
.behind__h{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-h2);line-height:1.08;letter-spacing:var(--t-h2-ls);
  text-transform:uppercase;color:#000E26;margin:0;
}
.behind__rule{display:block;width:64px;height:3px;background:var(--accent);margin:clamp(20px,2.2vw,30px) 0 clamp(22px,2.4vw,32px)}
.behind__copy > p:not([class]){margin:0 0 20px;font-size:var(--t-body);line-height:1.62;color:#33404F;max-width:56ch}
.behind__copy > p:not([class]):last-child{margin-bottom:0}

.behind__by{margin:clamp(24px,2.6vw,34px) 0 clamp(16px,1.8vw,24px);padding-left:clamp(14px,1.3vw,20px);border-left:4px solid var(--accent)}
.behind__name{
  margin:0 0 4px;font-family:var(--display);font-weight:400;
  font-size:var(--t-display-sm);letter-spacing:.005em;text-transform:uppercase;color:#000E26;
}
.behind__role{margin:0;font-size:var(--t-label);font-weight:700;letter-spacing:var(--t-label-ls);text-transform:uppercase;color:var(--accent-ink)}

@media(max-width:900px){
  /* stacked, the copy leads and the portrait runs at its own ratio */
  .behind__top{grid-template-columns:1fr;gap:30px}
  .behind__shot{display:block}
  .behind__shot img{height:auto;min-height:0}
}

/* ---------- before we start ----------
   Reference 1536x1024: two columns, a three-line headline with the last line green
   over a short green rule and a dark CTA, and an accordion on the right. The open
   item closes on a 3px green rule; every other row is a hairline. The section keeps
   the page's white ground rather than the reference's warm one, because "Behind the
   function" directly above it is already warm and two warm bands merge. */
.ask{background:var(--bg);padding:var(--band-y) 0}
.ask__grid{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:clamp(30px,4.8vw,76px);align-items:start}

.ask__eyebrow{
  display:flex;align-items:center;gap:9px;margin:0 0 clamp(18px,2vw,26px);
  font-size:var(--t-eyebrow);font-weight:600;letter-spacing:var(--t-eyebrow-ls);text-transform:uppercase;color:var(--tx);
}
.ask__h{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-h2);line-height:1.08;letter-spacing:var(--t-h2-ls);
  text-transform:uppercase;color:var(--tx);margin:0;
}
.ask__rule{display:block;width:60px;height:3px;background:var(--accent);margin:clamp(22px,2.4vw,32px) 0 clamp(22px,2.4vw,30px)}
.ask__intro > p:not([class]){margin:0 0 18px;font-size:var(--t-body);line-height:1.62;color:var(--tx-mid);max-width:44ch}
.ask__cta{
  display:inline-flex;align-items:center;margin-top:clamp(18px,2.2vw,28px);
  background:#001127;color:#fff;text-decoration:none;
  padding:20px 32px;font-size:var(--t-btn);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  transition:background .18s ease,transform .18s ease;
}
.ask__cta:hover{background:#04204a;transform:translateY(-1px)}

/* the accordion. Rows are hairlines; the open row closes on a green rule instead. */
.ask__list{border-top:1px solid var(--line)}
.ask__item{border-bottom:1px solid var(--line)}
.ask__item[open]{border-bottom:3px solid var(--accent)}
.ask__list summary{
  cursor:pointer;list-style:none;position:relative;
  padding:clamp(20px,2.1vw,27px) 56px clamp(20px,2.1vw,27px) 27px;
  font-size:clamp(16px,1.35vw,19px);font-weight:700;letter-spacing:-.018em;line-height:1.35;color:var(--tx);
}
.ask__list summary::-webkit-details-marker{display:none}
/* the +/- is two bars; the vertical one folds away when the row opens */
.ask__item > summary::after,
.ask__item > summary::before{content:"";position:absolute;right:24px;background:var(--accent)}
.ask__item > summary::after{top:50%;width:15px;height:2px;margin-top:-1px}
.ask__item > summary::before{
  top:50%;right:30.5px;width:2px;height:15px;margin-top:-7.5px;
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.ask__item[open] > summary::before{transform:rotate(90deg);opacity:0}
.ask__a{padding:0 56px clamp(22px,2.4vw,30px) 27px}
.ask__a p{margin:0;font-size:var(--t-body-sm);line-height:1.55;color:var(--tx-mid)}


@media(max-width:1000px){
  .ask__grid{grid-template-columns:1fr;gap:34px}
  .ask__intro > p:not([class]){max-width:60ch}
}
@media(max-width:620px){
  .ask__list summary{padding-left:0;padding-right:40px}
  .ask__a{padding-left:0;padding-right:0}
  .ask__item > summary::after{right:8px}
  .ask__item > summary::before{right:14.5px}
}

/* final call to action */
/* ---------- ready to start ----------
   Reference 1254x1254: full-bleed brand green, everything centred, a three-line
   headline whose last line is cream, two short paragraphs and a two-button row.
   A navy strip closes the page above the footer. */
.ready{background:var(--accent);padding:var(--band-y) 0 clamp(66px,7.4vw,104px);text-align:center;color:#001027}
.ready__h{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-statement);line-height:1;letter-spacing:var(--t-h2-ls);
  text-transform:uppercase;color:#001027;margin:0 0 clamp(26px,3vw,42px);
}
/* the line breaks are hard-coded, so the block never needs max-content the way the
   left-aligned headlines do. Scaling about the centre keeps it centred. */
@media(min-width:1200px){.ready__h{transform:scaleX(.9);transform-origin:center top}}
.ready__last{color:#FFFDF8}
/* :not([class]) so this body-copy rule only ever picks up the two unclassed
   paragraphs, never a classed sibling */
.ready p:not([class]){
  margin:0 auto 17px;max-width:52ch;
  font-size:var(--t-body);line-height:1.62;color:#001027;
}
.ready__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.6vw,24px);margin-top:clamp(26px,3vw,42px)}
.ready__cta{
  display:inline-flex;align-items:center;justify-content:center;min-width:172px;
  background:#001127;color:#fff;text-decoration:none;border:1px solid #001127;
  padding:20px 30px;font-size:var(--t-btn);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.ready__cta:hover{background:#04204a;border-color:#04204a;transform:translateY(-1px)}

@media(max-width:560px){
  .ready__btns{flex-direction:column;align-items:stretch}
  .ready__cta{min-width:0}
}

/* ---------- 8. UTILITIES ---------- */
.nb{white-space:nowrap}