/* ============================================================
   SAPIENNE v5 — "Deep Signal" shared stylesheet
   System spec: SAPIENNE-V5-DESIGN-SYSTEM.md
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --nav-h:74px;
  /* canvas */
  --white:#FFFFFF;
  --lavender:#F4F4FE;
  --lavender-deep:#DFE4FB;
  --page-tint:#F8F9FE;
  --hair:#E9EBF7;
  /* ink */
  --ink:#0B0F1D;
  --body:#565D6D;
  --muted:#9CA0AB;
  /* deep space */
  --space-900:#090F29;
  --space-800:#0E183C;
  --space-700:#132455;
  --space-glow:#1E3375;
  /* electric blue */
  --blue:#316AFF;
  --blue-bright:#3473FE;
  --blue-hover:#2456DB;
  --blue-soft:#E8F0FE;
  --blue-border:rgba(49,106,255,.16);
  /* dots */
  --dot-light:#C9CFF2;
  --dot-dark:#2A3968;
  --dot-spark:#3473FE;
  /* type */
  --font:'Onest',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  /* shape */
  --r-slab:10px;
  --r-card:8px;
  --r-inner:6px;
  --r-chip:4px;
  --r-pill:999px;
  /* motion */
  --ease:cubic-bezier(.22,.8,.26,.99);
  /* layout */
  --maxw:1200px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --slab-inset:clamp(10px,1.6vw,22px);
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--white);color:var(--body);font-family:var(--font);font-size:17px;line-height:1.65;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}
section{position:relative}
.sec{padding:clamp(5rem,9vw,7.5rem) 0}
.sec-tight{padding:clamp(3.5rem,6vw,5rem) 0}

h1,h2,h3,h4{color:var(--ink);font-weight:600;letter-spacing:-.015em}
.h-display{font-size:clamp(3.1rem,5.7vw,4.7rem);line-height:1.06;font-weight:600}
.h-sec{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.12;max-width:24ch}
.h-sec.center{margin-left:auto;margin-right:auto;text-align:center}
.h-sec .em{color:var(--blue)}
.sec-intro{margin-top:1.1rem;font-size:1.1rem;line-height:1.65;max-width:56ch}
.sec-intro.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head-row{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.sec-head-row.center{align-items:center;text-align:center}

/* On dark slabs */
.on-dark{color:rgba(244,246,255,.72)}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark .sec-intro{color:rgba(244,246,255,.72)}

/* ---------- Eyebrow chip ---------- */
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--hair);box-shadow:0 6px 16px rgba(9,15,41,.06);
  font-size:.85rem;font-weight:550;color:var(--ink);line-height:1;white-space:nowrap}
.chip svg{width:14px;height:14px;color:var(--ink);flex:none}
.chip--dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);box-shadow:none;color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.chip--dark svg{color:var(--blue-bright)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.95rem 1.65rem;border-radius:var(--r-pill);
  font-family:var(--font);font-weight:550;font-size:1rem;line-height:1;color:#fff;cursor:pointer;border:0;
  background:linear-gradient(180deg,#2A3A6E,#0F1D42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.25),0 10px 24px rgba(13,22,66,.30);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease)}
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:42%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .01s}
.btn:hover::before{left:130%;transition:left .55s var(--ease)}

.btn:active{transition-duration:.08s}
.btn svg{width:14px;height:14px;transition:transform .2s var(--ease)}


.btn--sm{padding:.7rem 1.25rem;font-size:.9rem}
.link-more{display:inline-flex;align-items:center;gap:.45rem;font-weight:550;color:var(--ink);font-size:1rem;
  transition:color .2s}
.link-more svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.link-more:hover{color:var(--blue)}
.link-more:hover svg{transform:translateX(3px)}
.link-blue{color:var(--blue);font-weight:550}
.link-blue:hover{color:var(--blue-hover)}

/* circular pager buttons (soft-3D) */
.pager-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--hair);cursor:pointer;
  background:linear-gradient(180deg,#FFFFFF,#EEF1FD);display:grid;place-items:center;color:var(--ink);
  box-shadow:inset 0 1px 0 #fff,0 6px 14px rgba(9,15,41,.08);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease)}


.pager-btn--dark{border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px rgba(13,22,66,.3)}
.pager-btn svg{width:16px;height:16px}
.pager-btn[disabled]{opacity:.35;pointer-events:none}

/* ---------- Dark slab ---------- */
.slab{position:relative;margin:0 var(--slab-inset);border-radius:var(--r-slab);overflow:hidden;
  background:linear-gradient(180deg,var(--space-900),var(--space-800));color:rgba(244,246,255,.72)}
.slab::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.slab .bloom{position:absolute;left:0;right:0;bottom:0;height:70%;pointer-events:none;
  background:radial-gradient(60% 48% at 50% 108%,rgba(52,115,254,.5),transparent 72%)}
.slab .bloom--soft{background:radial-gradient(55% 40% at 50% 110%,rgba(52,115,254,.32),transparent 70%)}
@media(max-width:680px){.slab{border-radius:8px}}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.scrolled{border-color:var(--hair)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-weight:700;font-size:1.25rem;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:.5rem}
.nav-logo .mark{width:30px;height:30px;border-radius:4px;background:linear-gradient(160deg,var(--space-700),var(--space-900));
  display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.nav-logo .mark svg{width:16px;height:16px}
.nav-menu{display:flex;gap:.25rem;align-items:center}
.nav-menu a{font-size:.95rem;font-weight:500}


.nav-cta{white-space:nowrap}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:26px;height:18px;position:relative}
.nav-toggle span,.nav-toggle::before,.nav-toggle::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.nav-toggle::before{top:0}.nav-toggle span{top:8px}.nav-toggle::after{bottom:0}
.nav.menu-open .nav-toggle::before{transform:translateY(8px) rotate(45deg)}
.nav.menu-open .nav-toggle span{opacity:0}
.nav.menu-open .nav-toggle::after{transform:translateY(-8px) rotate(-45deg)}
@media(max-width:920px){
  .nav-toggle{display:block}
  .nav-menu{border-bottom:1px solid var(--hair)}
  
  .nav-menu a{border-radius:0}
}

/* ---------- Hero ---------- */
.hero{padding-top:calc(64px + var(--slab-inset))}
.hero .slab{padding:clamp(4.5rem,8vw,7rem) 0 0}
.hero-copy{max-width:860px;text-align:center;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.hero-copy .h-display .em{color:var(--blue-bright)}
.hero-sub{font-size:1.24rem;line-height:1.6;max-width:52ch;color:rgba(244,246,255,.78)}
.hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}
.hero-art{position:relative;margin:clamp(4.5rem,8.5vw,7rem) auto 0;max-width:840px;perspective:1200px;padding:0 var(--gutter)}
.hero-panel{position:relative;border-radius:6px 6px 0 0;overflow:hidden;
  background:linear-gradient(180deg,#101A40,#0B1230);
  border:1px solid rgba(255,255,255,.09);border-bottom:0;
  box-shadow:0 -20px 80px rgba(52,115,254,.18);
  transform:rotateX(9deg);transform-origin:bottom center}
.hero-panel-bar{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.07)}
.hero-panel-bar .dots3{position:absolute;left:1rem;display:flex;gap:5px}
.hero-panel-bar .dots3 i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)}
.hero-panel-bar .path{font-family:var(--mono);font-size:.78rem;color:rgba(244,246,255,.5);letter-spacing:.02em}
.hero-panel-body{padding:clamp(1.5rem,4vw,2.75rem) clamp(1rem,4vw,2.5rem) 0;text-align:center}
.hero-panel-body .pc-word{margin:0 auto;max-width:540px;opacity:.94}
.hero-panel-body .pc-lines{font-family:var(--mono);font-size:clamp(.7rem,1.4vw,.82rem);line-height:1.9;
  color:rgba(244,246,255,.45);text-align:left;max-width:560px;margin:1.6rem auto 0;padding-bottom:1.2rem}
.hero-panel-body .pc-lines .ok{color:#7FD6A4}
.hero-panel-body .pc-lines .hl{color:var(--blue-bright)}

/* ---------- Marquee ---------- */
.marquee-sec{padding:clamp(3rem,5vw,4rem) 0}
.marquee-head{text-align:center;margin-bottom:1.8rem}
.marquee-head p{font-size:.95rem;color:var(--body);font-weight:500}
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:marquee 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.lchip{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.3rem;border-radius:var(--r-pill);background:#fff;border:1px solid var(--hair);box-shadow:0 6px 16px rgba(9,15,41,.05);white-space:nowrap}
.lchip .lc-dot{width:9px;height:9px;border-radius:3px;background:var(--blue);opacity:.85;flex:none}
.lchip .lc-name{font-weight:600;font-size:.95rem;color:var(--ink);letter-spacing:-.01em}
.lchip{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.lchip:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(9,15,41,.10)}

/* ---------- Cards (generic) ---------- */
.card{background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);
  box-shadow:0 18px 44px rgba(9,15,41,.06);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card:hover{transform:translateY(-5px);border-color:rgba(49,106,255,.30);
  box-shadow:0 28px 60px rgba(9,15,41,.09),0 12px 32px rgba(49,106,255,.10)}
.card:hover .icon-chip{transform:translateY(-2px) scale(1.07)}
.card:hover .link-more{color:var(--blue)}
.card:hover .link-more svg{transform:translateX(3px)}
.card--static:hover{transform:none;box-shadow:0 18px 44px rgba(9,15,41,.06)}
.card--navy{background:linear-gradient(165deg,var(--space-700),var(--space-900));border:0;color:rgba(244,246,255,.75)}
.card--navy h3,.card--navy h4{color:#fff}
.icon-chip{width:42px;height:42px;border-radius:5px;background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 18px rgba(49,106,255,.35)}
.icon-chip svg{width:20px;height:20px}
.icon-chip{transition:transform .35s var(--ease)}

/* ---------- Pattern / compare ---------- */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem;align-items:stretch}
.compare-card{padding:2.2rem 2.2rem 2rem;position:relative;overflow:hidden}
.compare-card .cc-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.compare-card .cc-label{font-size:.85rem;font-weight:550;color:var(--muted)}
.compare-card .cc-title{font-size:1.3rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.compare-card ul{display:flex;flex-direction:column;gap:.8rem;padding-top:1.3rem;border-top:1px solid var(--hair)}
.compare-card li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem;line-height:1.5}
.compare-card .mk{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.compare-card .mk--ok{background:var(--blue-soft);color:var(--blue)}
.compare-card .mk--gap{background:rgba(255,255,255,.09);color:rgba(244,246,255,.55)}
.compare-card .mk svg{width:11px;height:11px}
.compare-card .cc-status{margin-top:1.5rem;font-size:.95rem;font-weight:550;color:var(--ink)}
.compare-card.card--navy .cc-label{color:rgba(244,246,255,.55)}
.compare-card.card--navy .cc-title{color:#fff}
.compare-card.card--navy ul{border-top-color:rgba(255,255,255,.12)}
.compare-card.card--navy .cc-status{color:#fff}
.compare-card .cc-badge{position:absolute;top:1.4rem;right:1.4rem}
@media(max-width:880px){.compare-grid{grid-template-columns:1fr}}

/* ---------- Photo quote band ---------- */
.quoteband{position:relative;margin:0 var(--slab-inset);border-radius:var(--r-slab);overflow:hidden;
  min-height:min(58vh,540px);display:grid;place-items:center;padding:clamp(4.5rem,8vw,6.5rem) 0}
.quoteband .qb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.quoteband .qb-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,15,41,.55),rgba(9,15,41,.78))}
.quoteband .container{text-align:center}
.quoteband blockquote{font-size:clamp(1.7rem,3.3vw,2.55rem);line-height:1.28;font-weight:600;letter-spacing:-.015em;
  color:#fff;max-width:26ch;margin:0 auto}
.quoteband blockquote .em{color:var(--blue-bright);font-style:italic}
.quoteband .attr{margin-top:1.5rem;font-size:1rem;font-weight:550;color:rgba(244,246,255,.75)}
@media(max-width:680px){.quoteband{border-radius:8px}}

/* ---------- Industry carousel ---------- */
.icar{margin-top:3rem}
.icar-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 14px}
.icar-viewport::-webkit-scrollbar{display:none}
.icar-track{display:flex;gap:18px}
.icard{position:relative;flex:0 0 300px;height:400px;border-radius:var(--r-card);overflow:hidden;scroll-snap-align:start;
  background:linear-gradient(175deg,var(--space-800) 0%,var(--space-900) 62%,#0A1439 100%);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.icard:hover{transform:translateY(-6px);box-shadow:0 28px 58px rgba(9,15,41,.30)}
.icard::before{transition:transform .8s var(--ease);transform-origin:50% 100%}
.icard:hover::before{transform:scale(1.35)}
.icard .ic-bottom{transition:transform .4s var(--ease)}
.icard:hover .ic-bottom{transform:translateY(-5px)}
.icard::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 45% at 50% 112%,rgba(52,115,254,.38),transparent 70%)}
.icard .ph-pill{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);z-index:2;
  font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-align:center;line-height:1.5;
  color:#B9CBFA;background:rgba(10,18,48,.55);border:1px solid rgba(255,255,255,.13);
  padding:.55rem .9rem;border-radius:var(--r-pill);max-width:82%;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.icard .ic-bottom{position:absolute;left:1.5rem;right:1.5rem;bottom:1.4rem;z-index:2}
.icard .ic-kicker{font-size:.82rem;font-weight:500;color:rgba(244,246,255,.6)}
.icard .ic-name{margin-top:.35rem;font-size:1.35rem;font-weight:600;letter-spacing:-.01em;color:#fff;line-height:1.2}
.icard .ic-dots{position:absolute;top:1.1rem;right:1.1rem;opacity:.9}
.icar-foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:1.2rem}
.icar-bar{flex:1;max-width:340px;height:4px;border-radius:99px;background:var(--hair);position:relative;overflow:hidden}
.icar-thumb{position:absolute;left:0;top:0;height:100%;width:26%;border-radius:99px;background:var(--blue);
  transition:transform .18s ease}
.icar-arrows{display:flex;gap:.6rem}

/* ---------- Method cards ---------- */
.mtd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
.mtd-card{padding:2rem 1.9rem;display:flex;flex-direction:column;gap:.9rem}
.mtd-num{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--blue);letter-spacing:.06em}
.mtd-k{font-size:.9rem;font-weight:550;color:var(--muted)}
.mtd-q{font-size:1.2rem;font-weight:600;color:var(--ink);line-height:1.35;letter-spacing:-.01em}
.mtd-line{font-size:1rem;line-height:1.6}
.mtd-tease{margin-top:2.2rem;font-size:1.05rem;color:var(--body)}
@media(max-width:880px){.mtd-grid{grid-template-columns:1fr}}

/* ---------- Outcomes ---------- */
.wbp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
.wbp-card{padding:1.9rem 1.8rem;display:flex;flex-direction:column;gap:1.1rem}
.wbp-k{font-size:.85rem;font-weight:550;color:var(--blue)}
.wbp-h{font-size:1.3rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.25;margin-top:.35rem}
.wbp-row{border-top:1px solid var(--hair);padding-top:1rem}
.wbp-tag{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.02em;padding:.3rem .7rem;border-radius:var(--r-pill);margin-bottom:.55rem}
.wbp-row.before .wbp-tag{background:#F1F2F6;color:var(--muted)}
.wbp-row.after .wbp-tag{background:var(--blue-soft);color:var(--blue)}
.wbp-row p{font-size:.98rem;line-height:1.55}
.wbp-payoff{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2.2rem;
  background:var(--lavender);border:0;padding:2.2rem 2.4rem;position:relative;overflow:hidden}
.wbp-payoff .big{font-size:clamp(2.8rem,5vw,4rem);font-weight:600;letter-spacing:-.02em;color:var(--blue);line-height:1}
.wbp-payoff .pk{font-size:.85rem;font-weight:550;color:var(--muted)}
.wbp-payoff .pp{margin-top:.4rem;font-size:1.15rem;font-weight:550;color:var(--ink);max-width:44ch}
.wbp-payoff .pl{margin-top:.6rem}
@media(max-width:980px){.wbp-grid{grid-template-columns:1fr}.wbp-payoff{grid-template-columns:1fr;gap:1rem}}

/* ---------- Case study slab ---------- */
.case .slab{padding:clamp(4.5rem,8vw,6.5rem) 0}
.case-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.5rem);margin-top:3rem;align-items:start}
.case-body p{font-size:1.05rem;line-height:1.75;color:rgba(244,246,255,.9);font-weight:500}
.case-body p+p{margin-top:1.1rem}
.case-aside{display:flex;flex-direction:column;gap:1.4rem}
.case-quote-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-card);
  padding:1.8rem 1.8rem 1.6rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

.case-quote-card blockquote{font-weight:500;color:#fff}
.case-quote-card .cq-attr{margin-top:1.1rem;font-size:.95rem}
.case-quote-card .cq-attr strong{display:block;color:#fff;font-weight:600}
.case-quote-card .cq-attr span{color:rgba(244,246,255,.6)}
.case-meta{display:grid;grid-template-columns:1fr 1fr}
.case-meta>div{padding-top:.8rem}

.case-meta .cm-v{color:#fff;line-height:1.4}
.case-photo{margin-top:2.6rem;position:relative;aspect-ratio:21/8;border-radius:var(--r-inner);overflow:hidden;
  background:linear-gradient(160deg,#101A40,#0A1439);border:1px dashed rgba(255,255,255,.22);
  display:grid;place-items:center}
.case-photo .ph-pill{font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-align:center;
  color:#B9CBFA;background:rgba(10,18,48,.55);border:1px solid rgba(255,255,255,.13);
  padding:.55rem 1rem;border-radius:var(--r-pill);max-width:80%;line-height:1.5}
@media(max-width:920px){.case-grid{grid-template-columns:1fr}}

/* ---------- Testimonial split ---------- */
.tsplit{display:grid;grid-template-columns:1.35fr .65fr;gap:1.4rem;margin-top:3rem;align-items:stretch}
.tcar{padding:2.2rem 2.4rem;display:flex;flex-direction:column;min-height:380px}
.tcar-top{display:flex;align-items:center;gap:1rem}
.tcar-top .tk{font-size:1rem;font-weight:550;color:var(--muted)}
.tcar-arrows{display:flex;gap:.6rem}
.tcar-quote{flex:1;display:flex;align-items:center;margin:1.6rem 0}
.tcar-quote p{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.45;font-weight:550;color:var(--ink);letter-spacing:-.01em}
.tcar-who{display:flex;align-items:center;gap:.9rem}
.tcar-av{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:600;font-size:.9rem;
  background:linear-gradient(160deg,var(--blue),var(--space-700))}
.tcar-who strong{display:block;color:var(--ink);font-weight:600;font-size:.98rem}
.tcar-who span{color:var(--muted);font-size:.9rem}
.tcar-count{margin-left:auto;font-size:.85rem;color:var(--muted);font-weight:500}
.tfacts{padding:2.2rem 2.2rem;display:flex;flex-direction:column;position:relative;overflow:hidden}
.tfacts .tk{font-size:1rem;font-weight:500;color:rgba(244,246,255,.6)}
.tfacts .tf-num{margin-top:auto;font-size:clamp(3.2rem,5.5vw,4.5rem);font-weight:600;letter-spacing:-.02em;color:#fff;line-height:1}
.tfacts .tf-line{margin-top:.9rem;font-size:1.05rem;line-height:1.5;color:rgba(244,246,255,.8);max-width:24ch}
@media(max-width:920px){.tsplit{grid-template-columns:1fr}}

/* ---------- Offers ---------- */
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem;align-items:stretch}
.offer-card{padding:2.1rem 2rem;display:flex;flex-direction:column;gap:.9rem;position:relative}
.offer-k{font-size:.85rem;font-weight:550;color:var(--blue)}
.offer-name{font-size:1.4rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.offer-line{font-size:.98rem;line-height:1.55}
.offer-out{font-size:.98rem;line-height:1.55;padding-top:.9rem;border-top:1px solid var(--hair)}
.offer-log{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:1.2rem;
  font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.offer-cta-row{margin-top:1rem}
.offer-card.featured .offer-k{color:var(--blue-bright)}
.offer-card.featured .offer-name{color:#fff}
.offer-card.featured .offer-line,.offer-card.featured .offer-out{color:rgba(244,246,255,.78)}
.offer-card.featured .offer-out{border-top-color:rgba(255,255,255,.12)}
.offer-card.featured .offer-log{color:rgba(244,246,255,.55)}
.offer-card.featured .flag{position:absolute;top:-13px;left:1.8rem;background:var(--blue);color:#fff;
  font-size:.75rem;font-weight:600;letter-spacing:.02em;padding:.4rem .85rem;border-radius:var(--r-pill);
  box-shadow:0 8px 18px rgba(49,106,255,.4)}
.offer-guide{margin-top:2rem;font-size:1rem;color:var(--body);max-width:64ch}
@media(max-width:980px){.offer-grid{grid-template-columns:1fr}.offer-card.featured{order:-1}}

/* ---------- Diagnostic ---------- */
.diag-card{margin-top:3rem;padding:2.4rem 2.4rem 2.2rem}
.diag-instruction{font-size:1rem;font-weight:550;color:var(--ink)}
.diag-list{margin-top:1.4rem;display:flex;flex-direction:column}
.diag-item{display:flex;gap:1rem;align-items:flex-start;padding:1.05rem .6rem;border-top:1px solid var(--hair);
  cursor:pointer;border-radius:5px;transition:background .2s}
.diag-item:hover{background:var(--page-tint)}
.diag-cb{flex:none;width:24px;height:24px;border-radius:4px;border:1.5px solid #CBD2E8;background:#fff;
  display:grid;place-items:center;color:#fff;margin-top:1px;transition:background .2s,border-color .2s}
.diag-cb svg{width:13px;height:13px;opacity:0;transition:opacity .15s}
.diag-item.checked .diag-cb{background:var(--blue);border-color:var(--blue);animation:cbpop .32s var(--ease)}
@keyframes cbpop{50%{transform:scale(1.22)}}
.diag-item.checked .diag-cb svg{opacity:1}
.diag-text{font-size:1.02rem;line-height:1.55;color:var(--body)}
.diag-item.checked .diag-text{color:var(--ink)}
.diag-footer{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--hair)}
.diag-counter{font-size:1.05rem;color:var(--ink)}
.diag-counter strong{color:var(--blue);font-size:1.3rem}
.diag-counter-label{display:block;font-size:.88rem;color:var(--muted);margin-top:.2rem}

/* ---------- Founder ---------- */
.founder-grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(2rem,4vw,3.5rem);margin-top:3rem;align-items:start}
.founder-photo{position:relative;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(165deg,var(--lavender),var(--lavender-deep));border:1px solid var(--hair);
  display:grid;place-items:center}
.founder-photo img{width:100%;object-fit:cover;transition:transform .8s var(--ease)}
.founder-photo:hover img{transform:scale(1.035)}
.founder-photo .ph-pill{position:absolute;font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--blue);background:rgba(255,255,255,.8);border:1px solid var(--blue-border);
  padding:.55rem 1rem;border-radius:var(--r-pill);max-width:82%;text-align:center;line-height:1.5}
.founder-bio p{font-size:1.05rem;line-height:1.72}
.founder-bio p+p{margin-top:1rem}
.roles-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.6rem}
.role-card{padding:1.6rem 1.6rem;display:flex;flex-direction:column;gap:.6rem}
.role-name{font-size:1.05rem;font-weight:600;color:var(--ink);line-height:1.35;letter-spacing:-.005em}
.role-body{font-size:.95rem;line-height:1.6}
@media(max-width:920px){.founder-grid{grid-template-columns:1fr}.founder-photo{max-width:420px}.roles-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq-wash{background:linear-gradient(180deg,var(--white) 0%,var(--lavender) 45%,var(--lavender-deep) 100%)}
.faq-card{margin:3rem auto 0;max-width:880px;padding:1rem 2rem}
.faq-item{border-top:1px solid var(--hair);border-radius:5px;transition:background .25s var(--ease)}
.faq-item:hover{background:var(--blue-soft)}
.faq-item .faq-q{padding-left:.8rem;padding-right:.8rem}
.faq-item .faq-a p{padding-left:.8rem;padding-right:.8rem}
.faq-item:first-child{border-top:0}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  background:none;border:0;cursor:pointer;text-align:left;padding:1.4rem .2rem;
  font-family:var(--font);font-size:1.1rem;font-weight:600;color:var(--ink);letter-spacing:-.005em;line-height:1.4}
.faq-ic{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#FFFFFF,#EEF1FD);border:1px solid var(--hair);color:var(--ink);
  transition:transform .3s var(--ease),background .3s,color .3s}
.faq-ic svg{width:14px;height:14px}
.faq-item.open .faq-ic{transform:rotate(180deg);background:linear-gradient(180deg,#2A3A6E,#0F1D42);color:#fff;border:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-a p{padding:0 .2rem 1.5rem;font-size:1rem;line-height:1.7;max-width:66ch;
  opacity:0;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.faq-item.open .faq-a p{opacity:1;transform:none;transition-delay:.14s}
.faq-q:hover .faq-ic{transform:translateY(1px) scale(1.06)}
.faq-item.open .faq-q:hover .faq-ic{transform:rotate(180deg) scale(1.06)}
.faq-more{margin:2.4rem auto 0;max-width:880px;padding:1.8rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.faq-more h3{font-size:1.25rem;letter-spacing:-.01em}
.faq-more p{margin-top:.4rem;font-size:.98rem}

/* ---------- Final CTA slab ---------- */
.final .slab{padding:clamp(5rem,9vw,7.5rem) 0;text-align:center}
.final .h-sec{max-width:20ch;margin-left:auto;margin-right:auto}
.final p{max-width:52ch;margin:1.3rem auto 0;font-size:1.1rem;line-height:1.65}
.final .btn{margin-top:2.2rem}
.final .cta-alt{margin-top:1.4rem;font-size:.98rem;color:rgba(244,246,255,.6)}
.final .cta-alt a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}

/* ---------- Footer slab ---------- */
.footer-wrap{padding:var(--slab-inset);padding-top:0}
.footer{border-radius:var(--r-slab);margin:0;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--space-900) 0%,#081128 100%);color:rgba(244,246,255,.7)}
.footer .bloom{position:absolute;left:0;right:0;bottom:0;height:55%;pointer-events:none;
  background:radial-gradient(55% 42% at 50% 112%,rgba(52,115,254,.35),transparent 72%)}
.footer-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(3.5rem,6vw,5rem) var(--gutter) 2rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.4rem}
.footer-brand .nav-logo{color:#fff}
.footer-brand p{margin-top:1rem;font-size:.98rem;line-height:1.65;color:rgba(244,246,255,.6);max-width:38ch}
.footer-chip{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;padding:.55rem .95rem;
  border-radius:var(--r-pill);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  font-family:var(--mono);font-size:.78rem;color:rgba(244,246,255,.75)}
.footer-col h4{font-size:.95rem;font-weight:600;color:#fff;margin-bottom:1rem}
.footer-col a,.footer-col span{display:block;font-size:.95rem;color:rgba(244,246,255,.62);margin-bottom:.6rem;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-state{display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;
  margin-top:3.5rem;padding-top:3rem;border-top:1px solid rgba(255,255,255,.1)}
.footer-state h3{font-size:clamp(1.9rem,3.6vw,2.75rem);font-weight:600;letter-spacing:-.015em;line-height:1.12;color:#fff;max-width:18ch}
.nl-pill{display:flex;align-items:center;gap:.4rem;background:#fff;border-radius:var(--r-pill);padding:.45rem .45rem .45rem 1.3rem;
  box-shadow:0 14px 34px rgba(0,0,0,.35);min-width:min(420px,100%)}
.nl-pill input{flex:1;min-width:120px;border:0;outline:none;font-family:var(--font);font-size:.98rem;color:var(--ink);background:none}
.nl-pill input::placeholder{color:var(--muted)}
.nl-pill .btn{padding:.8rem 1.4rem;font-size:.92rem}
.nl-note{display:block;margin-top:.8rem;font-size:.9rem;color:var(--blue-bright)}
.nl-block p{font-size:.95rem;color:rgba(244,246,255,.6);margin-bottom:1rem;max-width:44ch}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:3rem;padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.1);font-size:.9rem;color:rgba(244,246,255,.5)}
.footer-bottom-links{display:flex;gap:1.4rem;flex-wrap:wrap}
.footer-bottom a:hover{color:#fff}
@media(max-width:920px){.footer-grid{grid-template-columns:1fr 1fr}.footer-state{flex-direction:column;align-items:flex-start}}

/* ---------- Reveal motion ---------- */
.reveal{opacity:0;transform:translateY(26px);filter:blur(6px)}
.reveal.in{opacity:1;transform:none;filter:blur(0);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .55s var(--ease)}
.reveal-scale{opacity:0;transform:translateY(32px) scale(.955);filter:blur(10px)}
.reveal-scale.in{opacity:1;transform:none;filter:blur(0);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .65s var(--ease)}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.reveal-scale{opacity:1;transform:none}
  .marquee-track{animation:none}
}

/* ---------- Skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--space-900);color:#fff;padding:.8rem 1.2rem;font-weight:600;border-radius:0 0 4px 0}
.skip-link:focus{left:0}


/* ---------- v5.1 picked sections ---------- */
/* blue primary button (equal-weight CTA on dark) */
.btn--blue{background:linear-gradient(180deg,#4A80FF,#2456DB);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.2),0 10px 26px rgba(49,106,255,.4)}
.btn--blue:hover{filter:brightness(1.08)}

/* outcomes — segmented selector */
.os-seg{display:inline-flex;gap:.3rem;padding:.3rem;border-radius:var(--r-pill);background:#fff;border:1px solid var(--hair);box-shadow:0 8px 20px rgba(9,15,41,.06)}
.os-seg button{border:0;background:none;cursor:pointer;font-family:var(--font);font-size:.95rem;font-weight:550;color:var(--body);padding:.65rem 1.3rem;border-radius:var(--r-pill);transition:background .25s,color .25s}
.os-seg button.on{background:linear-gradient(180deg,#2A3A6E,#0F1D42);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.os-panel{margin:1.8rem auto 0;max-width:980px;border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;text-align:left;box-shadow:0 20px 50px rgba(9,15,41,.07)}
.os-two{display:grid;grid-template-columns:1fr 1fr}
.os-side{padding:2.4rem 2.5rem;min-height:230px}
.os-side--before{background:var(--lavender)}
.os-side--after{background:#fff;border-left:1px solid var(--hair)}
.os-ey{display:inline-block;font-size:.72rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.os-ey--after{color:var(--blue)}
.os-side h3{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.18;letter-spacing:-.012em;margin:0 0 .9rem}
.os-side--before h3{color:var(--muted);font-weight:550}
.os-side--after h3{color:var(--ink);font-weight:600}
.os-side p{font-size:1.02rem;line-height:1.6;margin:0}
.os-side--before p{color:var(--muted)}
.os-side--after p{color:var(--body)}
@media(max-width:820px){.os-two{grid-template-columns:1fr}.os-side--after{border-left:0;border-top:1px solid var(--hair)}.os-side{min-height:0}}

/* founder — node strip */
.rt-label{font-size:1.2rem;font-weight:600;color:var(--ink);letter-spacing:-.005em;margin-top:2.8rem}
.rt-wrap{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem;padding-top:.4rem;margin-top:2rem}
.rt-line{position:absolute;top:22px;left:6%;right:6%;height:2px;background:var(--hair);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.rt-wrap.on .rt-line{transform:scaleX(1)}
.rt-node{position:relative;z-index:1;opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rt-wrap.on .rt-node{opacity:1;transform:none}
.rt-wrap.on .rt-node:nth-child(3){transition-delay:.12s}
.rt-wrap.on .rt-node:nth-child(4){transition-delay:.24s}
.rt-wrap.on .rt-node:nth-child(5){transition-delay:.36s}
.rt-dot{width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 22px rgba(49,106,255,.35);transition:transform .3s var(--ease)}
.rt-node:hover .rt-dot{transform:translateY(-3px) scale(1.06)}
.rt-dot svg{width:20px;height:20px}
.rt-node h4{margin-top:1.1rem;font-size:1rem;font-weight:600;line-height:1.35}
.rt-node p{margin-top:.45rem;font-size:.9rem;line-height:1.55;color:var(--body)}
@media(max-width:880px){.rt-wrap{grid-template-columns:1fr 1fr}.rt-line{display:none}}

/* method — sticky stack */
.mk-card{position:sticky;background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);padding:2.6rem 2.8rem;box-shadow:0 16px 44px rgba(9,15,41,.08);display:grid;grid-template-columns:auto 1fr;gap:2.4rem;min-height:220px;margin-bottom:1.2rem}
.mk-num{font-size:clamp(3rem,6vw,4.6rem);font-weight:700;color:rgba(49,106,255,.13);line-height:.8}
.mk-body .k{font-size:.85rem;font-weight:550;color:var(--blue)}
.mk-body h3{margin-top:.4rem;font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.012em;line-height:1.25;max-width:26ch}
.mk-body p{margin-top:.8rem;font-size:1.02rem;line-height:1.65;color:var(--body);max-width:58ch}
@media(max-width:760px){.mk-card{grid-template-columns:1fr;gap:1rem}}

/* final CTA — two equal-weight path cards */
.fp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.6rem;position:relative;z-index:2;text-align:left}
.fp-card{border-radius:var(--r-card);padding:2.2rem 2.2rem;display:flex;flex-direction:column;gap:.8rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.fp-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22)}
.fp-card h3{font-size:1.3rem;letter-spacing:-.01em;color:#fff}
.fp-card p{font-size:.98rem;line-height:1.62;flex:1;color:rgba(244,246,255,.72)}
.fp-card .btn{align-self:flex-start}
.fp-note{margin:1.8rem auto 0;text-align:center;font-size:.92rem;color:rgba(244,246,255,.55);position:relative;z-index:2;max-width:60ch}
@media(max-width:820px){.fp-grid{grid-template-columns:1fr}}


/* ---------- pattern — sticky visual split (E3, outcome-focused) ---------- */
.sv-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:2.6rem}
.sv-panel{position:sticky;top:96px;border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(170deg,var(--space-800),var(--space-900));
  aspect-ratio:4/4.4;display:grid;place-items:center;padding:2rem}
.sv-panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;pointer-events:none;
  background:radial-gradient(65% 50% at 50% 110%,rgba(52,115,254,.35),transparent 72%)}
.sv-panel .sv-cloud{width:72%;opacity:.95;position:relative;z-index:1}
.sv-panel .cap{position:absolute;bottom:1.5rem;left:1.7rem;right:1.7rem;z-index:2;
  font-family:var(--mono);font-size:.8rem;color:rgba(244,246,255,.6);line-height:1.55}
.sv-items{display:grid;gap:1.6rem}
.sv-item{display:flex;gap:1rem;align-items:flex-start}
.sv-mark{flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue-soft);color:var(--blue);
  display:grid;place-items:center;margin-top:2px}
.sv-mark svg{width:12px;height:12px}
.sv-item h4{font-size:1.1rem;font-weight:600;line-height:1.4;color:var(--ink)}
.sv-item p{margin-top:.3rem;font-size:.95rem;color:var(--body);line-height:1.55}
@media(max-width:880px){.sv-grid{grid-template-columns:1fr}.sv-panel{position:static;aspect-ratio:16/9}}

/* ---------- offers — gradient-tile cards (F1, name-led, CTA bottom) ---------- */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;align-items:stretch}
.pf-card{background:#fff;border:1px solid var(--hair);border-radius:10px;padding:1.1rem 1.1rem 1.6rem;
  display:flex;flex-direction:column;box-shadow:0 18px 44px rgba(9,15,41,.06);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pf-card:hover{transform:translateY(-5px);box-shadow:0 28px 60px rgba(9,15,41,.10)}
.pf-tile{border-radius:6px;padding:1.6rem 1.6rem 1.4rem;color:var(--ink)}
.pf-tile.g1{background:linear-gradient(135deg,#DCEBFF,#9CC2FF)}
.pf-tile.g2{background:linear-gradient(135deg,#C9D4FF,#7D96F5)}
.pf-tile.g3{background:linear-gradient(135deg,#8FA6E8,#4A5FB8);color:#fff}
.pf-name{font-size:1.35rem;font-weight:650;letter-spacing:-.012em;line-height:1.22}
.pf-dur{margin-top:.55rem;font-size:.95rem;font-weight:550;opacity:.8}
.pf-best{padding:1.3rem .7rem .1rem;font-size:.97rem;line-height:1.55;color:var(--body)}
.pf-inc{padding:1.3rem .7rem 0;flex:1}
.pf-inc .lbl{font-size:.78rem;font-weight:650;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.pf-inc ul{margin-top:.9rem;display:grid;gap:.75rem}
.pf-inc li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;line-height:1.5;color:var(--ink)}
.pf-inc .ck{flex:none;width:18px;height:18px;margin-top:2px}
.pf-card.c1 .ck{color:#4A80FF}.pf-card.c2 .ck{color:#5B6FE0}.pf-card.c3 .ck{color:#2F4699}
.pf-cta{margin:1.5rem .7rem 0}
.pf-cta .btn{width:100%;justify-content:center;white-space:nowrap;font-size:.95rem;padding:.95rem .9rem}
@media(max-width:960px){.pf-grid{grid-template-columns:1fr}}


/* ---------- v5 subpages ---------- */
.page-hero{position:relative;padding:calc(64px + clamp(3rem,6vw,4.5rem)) 0 clamp(2.5rem,4vw,3.5rem);background:var(--white)}
.page-hero h1{font-size:clamp(2.3rem,4.2vw,3.4rem);line-height:1.1;letter-spacing:-.015em;max-width:24ch;margin-top:1.2rem}
.page-hero p{margin-top:1.2rem;font-size:1.12rem;line-height:1.65;max-width:62ch;color:var(--body)}

/* captioned photo slots */
.pslot{position:relative;border-radius:var(--r-inner);overflow:hidden;display:grid;place-items:center;min-height:140px;
  background:linear-gradient(150deg,var(--lavender),var(--lavender-deep));border:1px dashed #C4CBE8}
.pslot .ph-pill{position:static;font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-align:center;line-height:1.5;
  color:var(--blue);background:rgba(255,255,255,.85);border:1px solid var(--blue-border);padding:.55rem 1rem;border-radius:var(--r-pill);max-width:82%}
.pslot--dark{background:linear-gradient(160deg,var(--space-800),var(--space-900));border:1px dashed rgba(255,255,255,.22)}
.pslot--dark .ph-pill{color:#B9CBFA;background:rgba(10,18,48,.55);border-color:rgba(255,255,255,.13)}

/* method "you leave with" chip */
.leave-chip{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.2rem;padding:.55rem .95rem;border-radius:var(--r-pill);
  background:var(--blue-soft);border:1px solid var(--blue-border);font-size:.88rem;font-weight:550;color:var(--ink)}
.leave-chip span{font-size:.72rem;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--blue)}

/* five-questions dark panel */
.q-panel{position:relative;border-radius:var(--r-card);overflow:hidden;padding:clamp(1.8rem,3.5vw,2.6rem);
  background:linear-gradient(170deg,var(--space-800),var(--space-900))}
.q-panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;pointer-events:none;
  background:radial-gradient(65% 50% at 50% 112%,rgba(52,115,254,.34),transparent 72%)}
.qp-lines{position:relative;z-index:1;font-family:var(--mono);font-size:clamp(.85rem,1.4vw,1rem);line-height:2.1;color:rgba(244,246,255,.82)}
.qp-lines .dim{margin-top:.6rem;color:rgba(244,246,255,.45);font-size:.85em}

/* router mode cards + facts row */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.6rem}
.mode-card{gap:.9rem}
.mode-card h3{font-size:1.3rem;letter-spacing:-.01em}
.mode-card p{flex:1}
@media(max-width:820px){.mode-grid{grid-template-columns:1fr}}
.facts-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--hair)}
.fact{display:flex;gap:1rem;align-items:flex-start}
.fact .icon-chip{flex:none}
.fact strong{display:block;color:var(--ink);font-weight:600;margin-bottom:.15rem}
.fact div{font-size:.95rem;line-height:1.5}
@media(max-width:820px){.facts-row{grid-template-columns:1fr}}
.rt-when{display:inline-block;margin-top:.6rem;font-family:var(--mono);font-size:.75rem;color:var(--blue)}

/* contact split card */
.cc-card{display:grid;grid-template-columns:.85fr 1.15fr;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--hair);box-shadow:0 24px 60px rgba(9,15,41,.08);background:#fff}
.cc-left{position:relative;overflow:hidden;padding:2.4rem 2.2rem;display:flex;flex-direction:column;gap:1rem;
  background:linear-gradient(170deg,var(--space-700),var(--space-900));color:rgba(244,246,255,.75)}
.cc-left h2{color:#fff;font-size:1.6rem;letter-spacing:-.012em;position:relative;z-index:2}
.cc-left .cc-line{font-size:.98rem;position:relative;z-index:2}
.cc-left blockquote{position:relative;z-index:2;margin-top:1.2rem;font-size:1.08rem;line-height:1.55;font-weight:500;color:#fff}
.cc-attr{position:relative;z-index:2;font-size:.9rem}
.cc-attr strong{display:block;color:#fff}
.cc-attr span{color:rgba(244,246,255,.6)}
.cc-mail{position:relative;z-index:2;margin-top:.6rem;font-size:.92rem}
.cc-mail a{color:var(--blue-bright);border-bottom:1px solid rgba(52,115,254,.4)}
.cc-left .pslot{position:relative;z-index:2;margin-top:1.4rem}
.cc-form{padding:2.4rem 2.4rem}


.cf-field label{display:block;margin-bottom:.4rem}

.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{box-shadow:0 0 0 3px rgba(49,106,255,.12)}

.cf-hint{display:block;margin-top:.4rem;font-size:.82rem;color:var(--muted)}
.cf-hp{opacity:0}
.cf-foot{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:1.6rem}
.cf-note{color:var(--blue)}
.cf-reassure{margin-top:1.2rem;font-size:.9rem;line-height:1.6;color:var(--muted)}
.cf-field.err input,.cf-field.err textarea{border-color:#D23B4B;box-shadow:0 0 0 3px rgba(210,59,75,.1)}
@media(max-width:920px){.cc-card{grid-template-columns:1fr}}

/* faq sub-nav */
.fsub{display:inline-flex;gap:.3rem;padding:.3rem;margin-top:1.6rem;border-radius:var(--r-pill);background:#fff;
  border:1px solid var(--hair);box-shadow:0 8px 20px rgba(9,15,41,.06);flex-wrap:wrap}
.fsub a{font-size:.9rem;font-weight:550;color:var(--body);padding:.55rem 1.1rem;border-radius:var(--r-pill);transition:background .25s,color .25s}
.fsub a:hover{color:var(--ink);background:var(--lavender)}
.fsub a.on{background:linear-gradient(180deg,#2A3A6E,#0F1D42);color:#fff}

/* guide cards */
.gc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2rem}
.gcard{overflow:hidden;flex-direction:column}
.gcover{position:relative;background:linear-gradient(160deg,var(--space-800),var(--space-900));padding:2.2rem;display:grid;place-items:center}
.gc-doc{position:relative;z-index:2;width:min(240px,70%);aspect-ratio:8.5/11;background:#fff;border-radius:4px;
  box-shadow:0 22px 44px rgba(0,0,0,.4);padding:1.2rem 1.1rem;display:flex;flex-direction:column;gap:.6rem;
  transform:rotate(-1.5deg);transition:transform .4s var(--ease)}
.gcard:hover .gc-doc{transform:rotate(0) translateY(-4px)}
.gc-aud{font-size:.6rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.gc-title{font-size:.85rem;font-weight:650;line-height:1.3;color:var(--ink)}
.gc-mark{margin-top:auto;font-family:var(--mono);font-size:.55rem;color:var(--muted)}
.gbody{padding:1.8rem 1.9rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.gbody h3{font-size:1.2rem;line-height:1.3;letter-spacing:-.008em}
.gbody p{font-size:.95rem;line-height:1.6;flex:1}
.gbody .btn{align-self:flex-start}
.gc-k{font-size:.8rem;font-weight:600;color:var(--blue)}
@media(max-width:880px){.gc-grid{grid-template-columns:1fr}}

/* featured-in */
.lead-card{display:grid;grid-template-columns:1.1fr .9fr;gap:0;overflow:hidden;padding:0}
.lead-body{display:flex;flex-direction:column}
.lead-card .pslot--dark{border-radius:0;border:0}
@media(max-width:880px){.lead-card{grid-template-columns:1fr}}

.acard{padding:0}
.acard .abody{padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.acard h3{font-size:1.05rem;line-height:1.4;letter-spacing:-.005em;flex:1}
@media(max-width:880px){.a-grid{grid-template-columns:1fr}}
.prow-list{margin-top:2.4rem}
.prow{border-radius:5px;transition:background .25s}

.prow:last-child{border-bottom:1px solid var(--hair)}
.prow-kind{background:var(--blue-soft);padding:.35rem .75rem;border-radius:var(--r-pill)}
.prow:hover .prow-kind{background:#fff}


.prow-meta{font-family:var(--mono);font-size:.75rem;color:var(--muted);margin-top:.3rem}
@media(max-width:760px){.prow{grid-template-columns:1fr}}

/* prose pages */
.prose{max-width:760px}
.prose h2{font-size:1.35rem;letter-spacing:-.01em;margin:2.2rem 0 .8rem}
.prose p,.prose li{font-size:1rem;line-height:1.7;color:var(--body)}
.prose ul{display:grid;gap:.7rem;padding-left:1.2rem}
.prose li{list-style:disc}
.prose li::marker{color:var(--blue)}


/* ---------- who we work with ---------- */
.dir-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.dir-card{overflow:hidden;padding:0;display:flex;flex-direction:column}
.dir-photo{aspect-ratio:16/8.5;border-radius:0;border:0;border-bottom:1px solid var(--hair)}
.dir-body{padding:1.6rem 1.8rem 1.7rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.dir-body h3{font-size:1.2rem;line-height:1.3;letter-spacing:-.008em}
.dir-body p{flex:1}
.dir-btn{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;margin-top:.5rem;
  padding:.6rem 1.15rem;border-radius:var(--r-pill);border:1.5px solid var(--ink);
  font-size:.88rem;font-weight:600;color:var(--ink);transition:background .25s,color .25s}
.dir-btn svg{width:13px;height:13px}
.dir-card:hover .dir-btn{background:var(--ink);color:#fff}
@media(max-width:820px){.dir-grid{grid-template-columns:1fr}}

.seg-band{position:relative;min-height:clamp(400px,46vw,580px);display:flex;align-items:flex-end;overflow:hidden;border-radius:var(--r-card)}
.seg-band-slot{position:absolute;inset:0;border-radius:0;border:0;display:grid;place-items:center}
.seg-band-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,15,41,.25),rgba(9,15,41,.82));pointer-events:none}
.seg-band-inner{position:relative;z-index:2;padding:4rem 2.2rem 2rem;width:100%}
.seg-band-inner h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem);letter-spacing:-.014em;line-height:1.15;max-width:24ch}
.seg-num{display:inline-block;font-family:var(--mono);font-size:.85rem;color:var(--blue-bright);margin-bottom:.5rem}
.seg-copy{margin:3.2rem 0 0;max-width:none}
.seg-p{font-size:1.05rem;line-height:1.72;color:var(--body)}
.seg-p+.seg-p{margin-top:1rem}
.seg-p strong{color:var(--ink)}


/* lighter-blue slab (Who we work with hero) */
.slab--sky{background:linear-gradient(180deg,#27439A,#3B63D8);--dot-dark:rgba(255,255,255,.55);--dot-spark:#FFFFFF}
.slab--sky .bloom{background:radial-gradient(60% 48% at 50% 108%,rgba(255,255,255,.28),transparent 72%)}
.slab--sky .hero-sub{color:rgba(244,246,255,.88)}

/* ============ v6 native component upgrades (Deep Signal) ============ */

/* --- CTA hover glow (Signal blue) --- */
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.22),0 14px 30px rgba(13,22,66,.34),0 10px 42px rgba(52,115,254,.42),0 0 0 1px rgba(52,115,254,.20)}


@media(prefers-reduced-motion:reduce){.btn:hover{transform:none}.btn:hover::before{left:-70%;transition:none}.btn:hover svg{transform:none}}

/* --- Accordion: dots expand on open + open-state polish --- */
.faq-card{position:relative;overflow:hidden}
.faq-item{position:relative;z-index:1}
.faq-card::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--dot-light) 1.2px,transparent 1.3px);background-size:17px 17px;
  opacity:.08;
  -webkit-mask-image:radial-gradient(70% 55% at 94% 6%,#000 0%,transparent 60%);
  mask-image:radial-gradient(70% 55% at 94% 6%,#000 0%,transparent 60%)}
.faq-item.open{background:linear-gradient(180deg,rgba(52,115,254,.045),transparent 62%)}
.faq-item.open .faq-q{color:var(--blue)}

/* --- 3-box pricing (offers) --- */
.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:3rem;align-items:stretch}
.price-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);border-radius:8px;padding:2rem 1.85rem;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.price-card:hover{transform:translateY(-6px);box-shadow:0 30px 64px rgba(9,15,41,.12),0 10px 42px rgba(52,115,254,.20);border-color:rgba(52,115,254,.30)}
.price-card--reco{background:linear-gradient(180deg,#0E1A3E,#0A1230);border-color:transparent;box-shadow:0 30px 70px rgba(9,15,41,.30)}
.price-card--reco:hover{box-shadow:0 40px 92px rgba(9,15,41,.36),0 12px 54px rgba(52,115,254,.42)}
.price-kicker{display:inline-block;font-size:.72rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:.9rem}
.price-head{display:flex;flex-direction:column;gap:.7rem;padding-bottom:1.2rem;border-bottom:1px solid var(--hair)}
.price-card--reco .price-head{border-color:rgba(255,255,255,.13)}
.price-name{font-size:1.35rem;font-weight:650;letter-spacing:-.014em;line-height:1.2;color:var(--ink)}
.price-card--reco .price-name{color:#fff}
.price-dur{align-self:flex-start;font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--blue);background:var(--blue-soft);border:1px solid var(--blue-border);padding:.3rem .75rem;border-radius:var(--r-pill)}
.price-card--reco .price-dur{color:#d5e4ff;background:rgba(52,115,254,.20);border-color:rgba(52,115,254,.34)}
.price-best{font-size:.98rem;line-height:1.55;color:var(--body)}
.price-card--reco .price-best{color:rgba(255,255,255,.74)}
.price-feat{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.72rem;flex:1}
.price-feat li{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;line-height:1.5;color:var(--ink)}
.price-card--reco .price-feat li{color:rgba(255,255,255,.88)}
.price-feat .ck{flex:none;width:18px;height:18px;margin-top:1px;color:var(--blue)}
.price-card--reco .price-feat .ck{color:var(--blue-bright)}
.price-cta{margin-top:1.7rem;width:100%;justify-content:center}
@media(max-width:960px){.pricing-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}}
@media(prefers-reduced-motion:no-preference){
  .spark{animation:spk 5.5s ease-in-out infinite}
  @keyframes spk{0%,100%{opacity:.92}50%{opacity:.42}}
}

/* --- CTA cursor-follow spotlight glow (replicates the reference hover) --- */
.btn{isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),rgba(122,152,255,.78),rgba(74,110,240,.34) 42%,transparent 66%);
  opacity:0;transition:opacity .3s var(--ease)}
.btn:hover::after,.btn:focus-visible::after{opacity:1}
.btn--light::after{background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),rgba(84,116,250,.55),rgba(84,116,250,.20) 42%,transparent 66%)}
.btn--blue::after{background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),rgba(190,210,255,.72),rgba(120,150,255,.32) 44%,transparent 68%)}

/* --- CTA tuning: remove sheen sweep + tighten outer glow (spotlight leads) --- */
.btn::before{display:none}

.btn--light:hover{box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(9,15,41,.09),0 4px 14px rgba(52,115,254,.16)}
.btn--blue:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 12px 26px rgba(49,106,255,.34),0 4px 16px rgba(52,115,254,.30)}

/* --- pricing v2: header tile; only the featured card's head is dark (card stays white) --- */
.price-head{background:var(--lavender);border-radius:6px;padding:1.3rem 1.35rem;margin-bottom:1.3rem;border-bottom:0}
.price-card--feat .price-head{background:linear-gradient(180deg,#12224A,#0B1330)}
.price-card--feat .price-name{color:#fff}
.price-card--feat .price-dur{color:#d5e4ff;background:rgba(52,115,254,.22);border-color:rgba(52,115,254,.36)}
.price-best{padding-top:.2rem}
.price-card--feat{border-color:rgba(52,115,254,.30);box-shadow:0 24px 56px rgba(9,15,41,.14)}
.price-card--feat:hover{transform:translateY(-6px);box-shadow:0 34px 74px rgba(9,15,41,.18),0 12px 46px rgba(52,115,254,.22)}

/* --- How we work: fit self-qualifier --- */
.fitq{max-width:760px;margin:2.6rem auto 0;background:var(--lavender);border-radius:8px;padding:1.7rem 1.8rem}
.fitq-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fitq-item{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border:1px solid var(--hair);border-radius:5px;
  padding:.85rem 1rem;font-size:1rem;line-height:1.5;color:var(--ink);cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.fitq-item:hover{border-color:var(--blue-border)}
.fitq-item:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.fitq-box{flex:none;width:20px;height:20px;border-radius:6px;border:1.6px solid #C9CCDA;background:#fff;display:grid;
  place-items:center;margin-top:1px;color:transparent;transition:background .2s,border-color .2s,color .2s}
.fitq-box svg{width:12px;height:12px}
.fitq-item.checked{background:var(--blue-soft);border-color:var(--blue-border)}
.fitq-item.checked .fitq-box{background:var(--blue);border-color:var(--blue);color:#fff}
.fitq-foot{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap;
  margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--hair)}
.fitq-count{font-size:1rem;color:var(--ink)}
.fitq-count strong{font-weight:600}
.fitq-msg{display:block;font-size:.88rem;color:var(--muted);margin-top:.15rem}
.fitq-not{max-width:70ch;margin:1.4rem auto 0;text-align:center;font-size:.92rem;line-height:1.55;color:var(--muted)}
@media(max-width:560px){.fitq-foot{flex-direction:column;align-items:stretch}}

/* --- How we work: photo band (brand statement) --- */
.photoband{position:relative;padding:clamp(4.5rem,10vw,8rem) 0;overflow:hidden;isolation:isolate}
.pb-media{position:absolute;inset:0;background:linear-gradient(135deg,#12224A,#0A1230);display:grid;place-items:center;z-index:0}
.pb-media .ph-pill{color:rgba(255,255,255,.5)}
.pb-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,14,32,.78),rgba(9,14,32,.42) 70%,rgba(9,14,32,.30))}
.photoband .container{position:relative;z-index:2}
.pb-head{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.16;letter-spacing:-.015em;font-weight:600;color:#fff;max-width:22ch;margin:0}

/* --- How we work: "What you leave with" — compact 3x2 icon grid --- */
.lw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem 2rem;margin-top:3rem}
.lw-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:5px;background:#12224A;color:#fff;margin-bottom:1rem}
.lw-ic svg{width:22px;height:22px}
.lw-cell h4{font-size:1.12rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin:0 0 .4rem;line-height:1.25}
.lw-cell p{font-size:.98rem;line-height:1.55;color:var(--body);margin:0;max-width:34ch}
@media(max-width:900px){.lw-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lw-grid{grid-template-columns:1fr}}

/* ================= v7 polish (additive) ================= */
/* typography flow */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
::selection{background:rgba(52,115,254,.16)}
/* consistent, visible keyboard focus */
a:focus-visible,button:focus-visible,.btn:focus-visible,.pager-btn:focus-visible,.faq-q:focus-visible,
.diag-item:focus-visible,.fitq-item:focus-visible,.os-seg button:focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
/* tactile press */
.btn:active{transform:translateY(1px)}
/* reveal stagger for sibling groups (auto-disabled under reduced motion) */
@media (prefers-reduced-motion:no-preference){
  .sv-items .sv-item.reveal:nth-child(2).in{transition-delay:.06s}
  .sv-items .sv-item.reveal:nth-child(3).in{transition-delay:.12s}
  .sv-items .sv-item.reveal:nth-child(4).in{transition-delay:.18s}
  .sv-items .sv-item.reveal:nth-child(5).in{transition-delay:.24s}
  .sv-items .sv-item.reveal:nth-child(6).in{transition-delay:.30s}
  .pricing-grid .price-card.reveal:nth-child(2).in{transition-delay:.09s}
  .pricing-grid .price-card.reveal:nth-child(3).in{transition-delay:.18s}
  .fp-grid .fp-card.reveal:nth-child(2).in{transition-delay:.09s}
  .rt-wrap .rt-node:nth-child(3).in{transition-delay:.08s}
  .rt-wrap .rt-node:nth-child(4).in{transition-delay:.16s}
  .rt-wrap .rt-node:nth-child(5).in{transition-delay:.24s}
}
/* keep checked diagnostic items keyboard-discoverable */
.diag-item{cursor:pointer}

/* ================= v7 performance ================= */
/* skip rendering below-fold sections until near viewport (sticky-stack + marquee sections excluded) */
body > section:not(#how-we-work):not(#steps):not(.marquee-sec){content-visibility:auto;contain-intrinsic-size:auto 720px}
.footer-wrap{content-visibility:auto;contain-intrinsic-size:auto 1300px}
/* blur transitions are the main paint cost on low-end devices — drop them on small screens, keep the motion */
@media(max-width:820px){
  .reveal{filter:none;transform:translateY(16px)}
  .reveal.in{filter:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .reveal-scale{filter:none;transform:translateY(20px) scale(.975)}
  .reveal-scale.in{filter:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
}

/* ================= v7 mobile pass (390px-first tuning) ================= */
@media(max-width:560px){
  .os-seg{flex-wrap:wrap;justify-content:center}
  .os-side{padding:1.6rem 1.3rem;min-height:0}
  .os-side h3{font-size:1.25rem}
  .fitq{padding:1.3rem 1rem;border-radius:8px}
  .fitq-item{font-size:.95rem;padding:.8rem .85rem}
  .price-card{padding:1.6rem 1.35rem}
  .price-head{padding:1.1rem 1.15rem}
  .lw-ic{width:40px;height:40px}
  .lw-ic svg{width:20px;height:20px}
  .seg-band{min-height:clamp(280px,78vw,380px)}
  .seg-band-inner{padding:3rem 1.3rem 1.5rem}
  .seg-copy{margin:2.4rem 0 0}
  .pb-head{font-size:1.65rem}
  .photoband{padding:3.5rem 0}
  .faq-card{padding:.6rem 1.1rem}
  .faq-q{font-size:1rem;gap:.9rem}
  .case-body p{font-size:1rem}
  .tcar-quote p{font-size:1.08rem}
  .founder-grid{gap:1.6rem}
  .fp-card{padding:1.6rem 1.4rem}
  .diag-card{padding:1.6rem 1.2rem!important}
  .mtd-tease{font-size:.98rem}
}
@media(max-width:400px){
  .h-display{font-size:2.55rem}
  .h-sec{font-size:1.65rem}
  .btn{padding-left:1.15rem;padding-right:1.15rem}
  .os-side h3{font-size:1.15rem}
}

/* --- How we work: evidence ladder --- */
.evl{max-width:820px;margin-top:2.6rem}
.evl-item{display:flex;gap:1.1rem;align-items:flex-start;padding:1.05rem 0;border-top:1px solid var(--hair)}
.evl-item:first-child{border-top:0}
.evl-n{font-family:var(--mono);font-size:.78rem;color:var(--blue);letter-spacing:.05em;padding-top:.25rem;flex:none}
.evl-item p{margin:0;font-size:1.05rem;line-height:1.5;color:var(--muted)}
.evl-item:nth-child(3) p{color:var(--body)}
.evl-item:nth-child(4) p,.evl-item:nth-child(5) p{color:var(--ink);font-weight:550}
.evl-close{max-width:66ch;margin-top:1.6rem;font-size:1.02rem;line-height:1.6;color:var(--body)}
/* --- Who we work with: stall block (founders) --- */
.seg-stall{margin:3.2rem 0 0}
.seg-stall h3{font-size:clamp(1.35rem,2.2vw,1.7rem);letter-spacing:-.012em;line-height:1.2;margin:0 0 .9rem}
.seg-stall p{font-size:1.05rem;line-height:1.65;color:var(--body);margin:0}

/* --- How we work: prose sections (already-tried, what-you-keep, what-it-asks) --- */
.prose-col{max-width:68ch;margin-top:1.8rem}
.prose-col p{font-size:1.08rem;line-height:1.7;color:var(--body);margin:0}
.prose-col p+p{margin-top:1.15rem}
@media(max-width:560px){.prose-col p{font-size:1.02rem}}

/* --- Who we work with: directory cards read as navigation, not headings --- */
.dir-kicker{font-size:.72rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .6rem;line-height:1.3}
.dir-body p{font-size:1.05rem;line-height:1.55;color:var(--ink)}

/* --- Who we work with: split band treatment (alternates with the dark photo band) --- */
.seg-band--split{min-height:0;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:center;overflow:visible;border-radius:0;background:transparent}
.seg-band--split .seg-band-slot{position:relative;inset:auto;aspect-ratio:4/3;border-radius:var(--r-card)}
.seg-band--split .seg-band-scrim{display:none}
.seg-band--split .seg-band-inner{position:relative;padding:0;width:auto}
.seg-band--split .seg-band-inner h2{color:var(--ink);max-width:16ch}
.seg-band--split .seg-num{color:var(--blue)}
@media(max-width:760px){
  .seg-band--split{grid-template-columns:1fr;gap:1.3rem}
  .seg-band--split .seg-band-slot{aspect-ratio:16/10}
}

/* --- Contact: privacy note, early-stage catcher, form note states --- */
.cf-privacy{margin-top:.9rem;font-size:.88rem;line-height:1.55;color:var(--muted)}


.cf-early{margin-top:1.6rem;border-top:1px solid var(--hair);padding-top:1.6rem}
.cf-early h3{font-size:1.08rem;font-weight:600;color:var(--ink);margin:0 0 .5rem;letter-spacing:-.005em}
.cf-early p{font-size:.98rem;line-height:1.6;color:var(--body);margin:0}

/* ============================================================
   V8 — BRAND MARKS + LOGO MARQUEE
   ============================================================ */
/* owl mark: naked on the white nav, white-badged on the navy footer */
.nav-logo .owl{display:block;height:30px;width:auto;flex:none}
.nav-logo .owl--badge{height:30px;width:30px;border-radius:7px}

/* logo chips — the pill container unifies logos of very different
   colour, weight, and aspect ratio, and works on white and lavender */
/* naked logos, no container. heights are set per logo (--lh) because a 7:1
   wordmark and a circular badge need different heights to read as equal weight.
   the gap does the separating work the pill used to do. */
.marquee-track{gap:clamp(34px,4.4vw,56px);align-items:center}
.lc-logo{display:block;width:auto;height:var(--lh,56px);flex:none}
@media (max-width:900px){ .lc-logo{height:calc(var(--lh,56px) * .78)} }
@media (max-width:560px){
  .marquee-track{gap:clamp(24px,7vw,34px)}
  .lc-logo{height:calc(var(--lh,56px) * .62)}
}

/* ============================================================
   V8 — QA PASS: touch targets + layout safety
   ============================================================ */
/* WCAG 2.5.5 / project rule: 44px minimum on touch. Buttons were
   37–40px tall on mobile; the hamburger was a 26x18 hit area. */
@media (max-width:880px){
  .nav-toggle{width:44px;height:44px;margin-right:-10px}
  .nav-toggle span,.nav-toggle::before,.nav-toggle::after{left:9px;right:9px}
  .nav-toggle::before{top:14px}
  .nav-toggle span{top:22px}
  .nav-toggle::after{bottom:14px}
  .nav.menu-open .nav-toggle::before{transform:translateY(8px) rotate(45deg)}
  .nav.menu-open .nav-toggle::after{transform:translateY(-8px) rotate(-45deg)}
}
@media (max-width:560px){
  .btn,.btn--sm,.btn--light,.btn--blue{min-height:44px}
  .dir-card .btn,.fp-card .btn,.gcard .btn{min-height:44px}
  .os-seg button{min-height:44px}
}
/* aspect-ratio boxes stop layout shift while the two photos decode */
.quoteband .qb-img{aspect-ratio:2000/1389}
.founder-photo img,.fx-photo img{aspect-ratio:1400/933}

/* ============================================================
   V9 — STRUCTURAL ROUND (approved decisions 1-4)
   ============================================================ */
/* industries: static grid of eight, replacing the carousel */
.igrid{margin-top:3rem;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.igrid .icard{flex:none;width:auto;height:480px}
@media(max-width:1080px){.igrid{grid-template-columns:repeat(2,1fr)}.igrid .icard{height:416px}}
@media(max-width:820px){.igrid{grid-template-columns:1fr 1fr}.igrid .icard{height:360px}}
@media(max-width:480px){.igrid{grid-template-columns:1fr 1fr;gap:12px}.igrid .icard{height:300px}}
/* who: objections as visible prose (replaces the segment accordions) */
.seg-obj{margin-top:3.2rem}
.seg-obj h3{font-size:1.15rem;letter-spacing:-.008em;margin:2.2rem 0 .55rem}
.seg-obj h3:first-child{margin-top:0}
.seg-obj p{line-height:1.65;max-width:68ch;color:var(--body)}
.footer-state .nl-sub{margin:.4rem 0 0;font-size:.95rem;color:rgba(244,246,255,.6)}
/* who: segment beat components */
.seg-beat{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:3rem 0 1rem}
.seg-pains{list-style:none;padding:0;margin:0;display:grid;gap:.7rem;max-width:66ch}
.seg-pains li{position:relative;padding-left:1.5rem;line-height:1.6;color:var(--body)}
.seg-pains li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:3px;background:var(--blue);opacity:.85}
.seg-outs{margin-top:1.4rem;gap:1.8rem 1.6rem}
.seg-outs .lw-cell p{font-size:.92rem;line-height:1.55;color:var(--body);margin:0}
.seg-proof{margin-top:3rem;border-left:3px solid var(--blue);padding:0.2rem 0 0.2rem 1.4rem}
.seg-proof p{max-width:68ch;line-height:1.65;color:var(--body);margin:0}
@media(max-width:900px){.seg-outs{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.seg-outs{grid-template-columns:1fr}}
/* homepage: slim engagement ledger (full cards live on how-we-work#offers) */
.offer-ledger{margin-top:2.6rem;border-top:1px solid var(--hair)}
.ol-row{display:grid;grid-template-columns:minmax(220px,1.1fr) auto 2fr auto;gap:1.2rem 2rem;align-items:center;
  padding:1.35rem .4rem;border-bottom:1px solid var(--hair);color:inherit;text-decoration:none;
  transition:background .25s var(--ease)}
.ol-row:hover{background:var(--blue-soft)}
.ol-name{font-weight:600;color:var(--ink);letter-spacing:-.01em}
.ol-dur{font-family:var(--mono);font-size:.75rem;color:var(--blue);white-space:nowrap}
.ol-line{color:var(--body);font-size:.98rem;line-height:1.5}
.ol-go{color:var(--blue);display:grid;place-items:center}
.ol-go svg{width:16px;height:16px}
.ol-foot{margin:1.4rem 0 0;font-size:.95rem;color:var(--muted)}
@media(max-width:820px){
  .ol-row{grid-template-columns:1fr auto;grid-template-areas:"name go" "dur go" "line go"}
  .ol-name{grid-area:name}.ol-dur{grid-area:dur}.ol-line{grid-area:line}.ol-go{grid-area:go}
}
/* hww: requirement tiles (visual, replaces three paragraphs) */
.req-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.6rem}
.req-cell{background:var(--lavender);border:1px solid var(--hair);border-radius:var(--r-card);padding:2rem 2.1rem}
.req-big{display:block;font-family:var(--mono);font-size:clamp(2.2rem,3.6vw,3rem);font-weight:500;color:var(--blue);letter-spacing:-.02em;line-height:1}
.req-k{display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:.6rem 0 1rem}
.req-cell p{font-size:.95rem;line-height:1.6;color:var(--body);margin:0}
@media(max-width:820px){.req-grid{grid-template-columns:1fr}}
/* hww: proof band quote */
.hw-quote{margin:0 0 2.6rem;max-width:760px}
.hw-quote blockquote{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.4;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0}
.hw-quote figcaption{margin-top:1rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* who: magazine-pull segment layout (Option D) */
.od-grid{display:grid;grid-template-columns:1.02fr 1.42fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.od-pull{position:sticky;top:96px}
.od-big{font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.24;color:var(--ink)}
.od-cap{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:1.1rem 0 1.8rem}
.od-main .seg-p{max-width:64ch}
.land-rows{display:grid;border-top:1px solid var(--hair)}
.land-row{display:grid;grid-template-columns:44px 1fr;gap:1.2rem;align-items:start;padding:1.15rem .2rem;border-bottom:1px solid var(--hair)}
.land-row b{display:block;color:var(--ink);letter-spacing:-.012em;font-size:1.06rem;margin-bottom:.15rem}
.land-row span:last-child, .land-row div > span{color:var(--body);font-size:.95rem;line-height:1.55}
@media(max-width:900px){.od-grid{grid-template-columns:1fr}.od-pull{position:static}}
/* who: breathing room between the photo band and the magazine-pull grid */
.seg .od-grid{margin-top:clamp(4rem,7vw,6.5rem)}
/* homepage: offers as a dark slab so the section cannot be scrolled past */
.slab--offers{padding:clamp(3.5rem,6vw,5rem) 0}
.slab--pkg .h-sec{color:#fff}
.slab--pkg .sec-intro{color:rgba(244,246,255,.75)}
/* four-questions section: air between head and the card stack */
#how-we-work .sec-head-row{margin-bottom:clamp(2.6rem,4.5vw,3.8rem)}
#how-we-work .sec-intro{margin-top:1.4rem}
/* homepage hero: panel removed — slab + logo bar together fill the first viewport */
.hero--full .slab{padding:clamp(2.4rem,4vw,3.5rem) 0;display:flex;align-items:center;
  min-height:calc(100vh - 64px - var(--slab-inset) - 195px);
  min-height:calc(100svh - 64px - var(--slab-inset) - 195px)}
.hero--full .slab .container{width:100%}
.hero--full .h-display{font-size:clamp(2.5rem,4.35vw,3.45rem)}
.hero--full .hero-sub{font-size:1.14rem;max-width:56ch}
.hero--full .hero-copy{gap:1.05rem}
.hero--full + .marquee-sec{padding:1.7rem 0 2.1rem}
@media(max-width:680px){.hero--full .slab{min-height:0}}
@media(max-height:800px) and (min-width:681px){
  .hero--full .h-display{font-size:clamp(2.3rem,3.9vw,3rem)}
  .hero--full .hero-sub{font-size:1.05rem}
  .hero--full .slab{padding:1.7rem 0}
}
/* founder: name caption beneath the photo */
figure.founder-photo{margin:0}
.founder-cap{display:block;margin-top:1rem}
.founder-cap b{display:block;font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.founder-cap span{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-top:.3rem}

/* v10 additions: What-you-get label, ecosystem card note, 4-tab seg wrap */
.price-what{margin:1.25rem 0 -.5rem;font-size:.76rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--body);opacity:.72}
.price-note{margin-top:1.15rem;font-size:.92rem;line-height:1.55;color:var(--body)}
.pricing-grid .price-card.reveal:nth-child(4).in{transition-delay:.27s}
@media(max-width:680px){.os-seg{display:flex;flex-wrap:wrap;justify-content:center;border-radius:var(--r-pill)}}

/* v10 chosen designs: founder 2A + industries 5B */
@media(min-width:921px){.founder-grid{grid-template-columns:minmax(340px,430px) 1fr}}
.founder-photo img{aspect-ratio:auto;height:100%}
.founder-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:2.4rem 1.4rem 1.2rem;background:linear-gradient(180deg,transparent,rgba(9,15,41,.85));z-index:2}
.founder-cap b{color:#fff}
.founder-cap span{color:rgba(233,237,255,.78)}
.fdr-chips{margin-top:1.1rem;border-top:1px solid var(--hair)}
.fdr-chips div{display:flex;justify-content:space-between;gap:1rem;padding:.72rem .2rem;border-bottom:1px solid var(--hair);font-size:.86rem;align-items:baseline}
.fdr-chips b{font-family:var(--mono);font-weight:600;color:var(--ink);white-space:nowrap}
.fdr-chips span{color:var(--muted);text-align:right}
.founder-bio .fdr-lead{font-size:1.32rem;line-height:1.45;color:var(--ink);font-weight:550}
.founder-bio .fdr-pull{margin-top:1.5rem;padding-top:1.35rem;border-top:1px solid var(--hair);font-size:1.2rem;line-height:1.5;color:var(--ink);font-weight:600}
.igrid .ic-name{font-size:1.85rem;line-height:1.15}
.igrid .ic-kicker{font-size:.9rem}
.igrid .icard .ic-bottom::before{content:"";position:absolute;left:-1.6rem;right:-1.6rem;bottom:-1.5rem;top:-3.6rem;background:linear-gradient(180deg,transparent,rgba(5,9,26,.78));z-index:-1;pointer-events:none;border-radius:0}
@media(max-width:820px){.igrid .ic-name{font-size:1.45rem}}
@media(max-width:560px){.igrid{grid-template-columns:1fr}.igrid .icard{height:360px}.igrid .ic-name{font-size:1.4rem}}


/* ---------- Hero — photo slab (v4) ---------- */
.hero--photo .slab{padding:0;background:linear-gradient(180deg,var(--space-900),var(--space-800))}
.hero--photo .slab > .container{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(620px,78vh,860px);padding-top:clamp(5rem,9vw,8rem);padding-bottom:clamp(2.2rem,3vw,3.25rem)}
.hero-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,15,41,.74) 0%,rgba(9,15,41,.34) 34%,rgba(9,15,41,.52) 62%,rgba(9,15,41,.92) 100%)}
.hero-copy--left{max-width:730px;margin:0;text-align:left;align-items:flex-start;gap:1.35rem}
.hero--photo .h-display{font-size:clamp(2.7rem,4.9vw,4.25rem);line-height:1.03;letter-spacing:-.035em;font-weight:650;max-width:22ch;text-wrap:pretty}
.hero--photo .hero-sub{font-size:1.13rem;max-width:60ch;color:rgba(255,255,255,.8)}
.hero--photo .hero-sub em{color:#fff}
.hero--photo .hero-ctas{justify-content:flex-start}

.btn--ghost:hover{filter:none;box-shadow:none}
.hero-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;
  margin-top:clamp(2.6rem,6vw,5rem);padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.18)}
.hero-rail .hr-l{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.4;color:rgba(255,255,255,.62)}
.hero-rail .hr-v{margin-top:.7rem;font-size:clamp(2.1rem,3.4vw,3.25rem);font-weight:600;letter-spacing:-.04em;line-height:.9;color:#fff}
@media(max-width:920px){.hero-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.7rem 1.5rem}}
@media(max-width:600px){
  .hero--photo .slab > .container{min-height:0;padding-bottom:2.5rem}
  .hero-rail{grid-template-columns:1fr;gap:1.3rem}
  .hero-rail .hr-v{font-size:2.4rem}
}


/* ---------- The pattern — accordion ledger (v4) ---------- */
.pat-split{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(3rem,7vw,6.5rem);align-items:start}
.pat-kicker{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.pat-kicker span{width:8px;height:8px;border-radius:2.4px;background:var(--blue)}
.pat-head .h-sec{margin-top:1.4rem;max-width:20ch}
.pat-head .sec-intro{margin-top:1.35rem}
.pat-statement{margin-top:2.25rem;padding-top:1.6rem;border-top:1px solid var(--lavender-deep);
  font-size:1.19rem;font-weight:500;line-height:1.4;letter-spacing:-.018em;color:var(--ink)}
.pacc{border-bottom:1px solid var(--lavender-deep)}
.pacc-item{border-top:1px solid var(--lavender-deep)}
.pacc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem;background:none;border:0;
  cursor:pointer;text-align:left;padding:1.7rem 0;font-family:var(--font);font-size:1.5rem;font-weight:550;
  letter-spacing:-.022em;line-height:1.24;color:var(--ink);transition:color .2s var(--ease)}
.pacc-q:hover{color:var(--blue)}
.pacc-ic{flex:none;width:20px;height:20px;color:var(--body);transition:transform .25s var(--ease),color .25s}
.pacc-ic svg{display:block;width:20px;height:20px}
.pacc-item.open .pacc-ic{transform:rotate(45deg);color:var(--blue)}
.pacc-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.pacc-a p{padding:0 0 1.85rem;font-size:1.03rem;line-height:1.6;max-width:58ch;color:var(--body);
  opacity:0;transform:translateY(-5px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pacc-item.open .pacc-a p{opacity:1;transform:none;transition-delay:.1s}
@media(max-width:920px){
  .pat-split{grid-template-columns:1fr;gap:2.75rem}
  .pat-head .h-sec{max-width:24ch}
  .pacc-q{font-size:1.3rem;padding:1.4rem 0}
}


/* ---------- The method — bleeding question rail (v4) ---------- */
.sec--rail{overflow-x:clip}
.qrail-bleed{padding-left:max(var(--gutter),calc((100vw - var(--maxw))/2));padding-right:0;position:relative;z-index:2}
.qrail-split{display:grid;grid-template-columns:400px minmax(0,1fr);gap:clamp(3rem,6vw,5.5rem);align-items:start}
.qrail-head .h-sec{max-width:22ch}
.qrail-head .sec-intro{margin-top:1.5rem}
.qrail-nav{display:flex;align-items:center;gap:1.35rem;margin-top:2.75rem}
.qr-btn{width:48px;height:48px;border-radius:4px;border:1px solid var(--hair);background:#fff;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease)}
.qr-btn svg{width:16px;height:16px}
.qr-btn:hover{border-color:var(--ink)}
.qr-btn[disabled]{opacity:.35;cursor:default}
.qr-btn[disabled]:hover{border-color:var(--hair)}
.qr-count{font-family:var(--mono);font-size:.85rem;font-weight:500;letter-spacing:.06em;color:var(--body)}
.qrail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-right:var(--gutter);
  scrollbar-width:none;-ms-overflow-style:none}
.qrail::-webkit-scrollbar{display:none}
.qcard{flex:0 0 min(420px,84vw);scroll-snap-align:start;min-height:440px;display:flex;flex-direction:column;
  background:var(--lavender);border-radius:var(--r-card);padding:2.75rem 2.6rem}
.qc-num{font-size:2.75rem;font-weight:600;letter-spacing:-.05em;line-height:.9;color:var(--ink)}
.qc-q{margin-top:2rem;font-size:1.68rem;font-weight:600;letter-spacing:-.026em;line-height:1.16;color:var(--ink)}
.qc-body{margin-top:1.1rem;font-size:1.03rem;line-height:1.62;color:var(--body)}
.qc-test{margin-top:auto;padding-top:1.6rem;border-top:1px solid var(--lavender-deep);font-size:1rem;line-height:1.5;color:var(--ink)}
.qc-test em{font-style:italic}
@media(max-width:1080px){.qrail-split{grid-template-columns:340px minmax(0,1fr);gap:2.75rem}}
@media(max-width:820px){
  .qrail-bleed{padding-left:var(--gutter)}
  .qrail-split{grid-template-columns:1fr;gap:2.5rem}
  .qrail-head .h-sec,.qrail-head .sec-intro{max-width:none}
  .qcard{min-height:400px;padding:2.25rem 2rem}
}


/* ---------- Outcomes — numbered tab plate (v4) ---------- */
.sec--otabs .h-sec{max-width:22ch}
.sec--otabs .sec-intro{margin-top:1.4rem;max-width:60ch}
.otabs{display:flex;align-items:flex-end;gap:0;margin-top:clamp(2.75rem,5vw,4rem);overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.otabs::-webkit-scrollbar{display:none}
.otab{flex:none;display:inline-flex;align-items:baseline;gap:.7rem;cursor:pointer;font-family:var(--font);font-weight:600}
.otab .ot-n{font-family:var(--mono);font-size:.8rem;font-weight:500}


.sec--otabs .os-panel{margin-top:0;padding:0;background:none;border:0;border-radius:0 0 var(--r-card) var(--r-card);overflow:hidden;text-align:left}
.sec--otabs .os-two{display:grid;grid-template-columns:1fr 1fr;gap:0}
.sec--otabs .os-side{min-height:330px;padding:clamp(2.4rem,3.8vw,3.4rem) clamp(2rem,3.2vw,3rem) clamp(2.8rem,4.6vw,4.2rem);
  border:0;border-radius:0;background:none;display:block}
.sec--otabs .os-side--before{background:var(--page-tint)}

.sec--otabs .os-ey{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--body);background:none;padding:0;border:0}
.sec--otabs .os-ey--after{color:var(--blue)}
.sec--otabs .os-side h3{margin-top:1.55rem;font-size:1.62rem;font-weight:600;letter-spacing:-.022em;line-height:1.22}


.sec--otabs .os-side p{margin-top:1.05rem;font-size:1.03rem;line-height:1.62;color:var(--body);max-width:46ch}
@media(max-width:900px){
  
  .sec--otabs .os-two{grid-template-columns:1fr}
  
  .sec--otabs .os-side{min-height:0}
}


/* ---------- Outcomes v4.1 — separated tabs, stronger before/after ---------- */
.otabs{gap:8px;align-items:stretch;padding-bottom:0}
.otab{background:#fff;border:1px solid var(--hair);border-bottom:0;color:var(--body);border-radius:5px 5px 0 0;transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.otab .ot-n{color:var(--muted)}
.otab:hover{color:var(--ink);background:var(--lavender);border-color:var(--lavender-deep)}
.otab:hover .ot-n{color:var(--body)}
.otab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.otab.on .ot-n{color:rgba(255,255,255,.62)}
.sec--otabs .os-panel{border-top:1px solid var(--ink)}

/* before: deeper tint, quieter type — after: white, full ink */
.sec--otabs .os-side--before{background:var(--lavender)}
.sec--otabs .os-side--after{background:#fff;border-left:1px solid var(--ink)}
.sec--otabs .os-ey{display:flex;align-items:center;gap:.6rem}
.os-mk{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.os-mk svg{width:12px;height:12px}
.os-mk--x{background:#FBEAE8;color:#B3261E}
.os-mk--v{background:#E7F3EC;color:#1B6E44}
.sec--otabs .os-side--before .os-ey{color:#8A5B57}
.sec--otabs .os-side--after .os-ey{color:#1B6E44}
.sec--otabs .os-side--before h3{color:#5A6072;font-weight:550}
.sec--otabs .os-side--after h3{color:var(--ink);font-weight:600;font-size:1.72rem}
.sec--otabs .os-side--before p{color:#6E7486}
.sec--otabs .os-side--after p{color:var(--body)}
@media(max-width:900px){
  
  
  .sec--otabs .os-side--after{border-left:0;border-top:1px solid var(--ink)}
}


/* ---------- Outcomes v4.2 — tab row spans exactly the panel width ---------- */
.otabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:visible}
.otab{width:100%;justify-content:center;text-align:center;padding:1.05rem 1rem;font-size:1.02rem;letter-spacing:-.014em;line-height:1.25}
.otab .ot-n{align-self:center}
@media(max-width:900px){
  .otabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .otab{padding:.9rem .85rem;font-size:.97rem}
}
@media(max-width:520px){
  .otabs{grid-template-columns:1fr}
  .otab{border-radius:5px;border-bottom:1px solid var(--hair)}
  .otab.on{border-bottom-color:var(--ink)}
}


/* ---------- Outcomes v4.3 — panel matches the tab row exactly ---------- */
.sec--otabs .os-panel{max-width:none;width:100%;margin:0;box-shadow:none}


/* ---------- Case study — aligned with the v4 sections ---------- */
.case-quote-card{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.16);border-radius:var(--r-card);padding:2rem 2rem 1.8rem}
.case-quote-card .cq-k{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-bright);display:block}
.case-quote-card blockquote{margin-top:1.1rem;font-size:1.18rem;line-height:1.5;letter-spacing:-.012em}
.case-meta{gap:0}
.case-meta>div{border-top:1px solid rgba(255,255,255,.14);padding:1rem 0 .95rem;grid-column:1/-1}
.case-meta>div:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.case-meta .cm-l{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,246,255,.6)}
.case-meta .cm-v{margin-top:.5rem;font-size:1.02rem;font-weight:550}


/* quote labels removed — a quote announces itself */
.case-quote-card blockquote{margin-top:0}
.tcar-top{justify-content:flex-end}


/* ---------- Offers — ink packages (v4) ---------- */
.slab--pkg{background:linear-gradient(180deg,var(--space-900),var(--space-800));padding:clamp(4.5rem,8vw,7rem) 0}
.pkg-head{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(3rem,7vw,6rem);align-items:end}
.pkg-head .h-sec{max-width:22ch;color:#fff}
.pkg-head .sec-intro{color:rgba(255,255,255,.74)}
.pkg-grid{margin-top:clamp(3rem,6vw,4.5rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pkg{display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-card);padding:2.6rem 2.75rem;color:inherit;transition:background .2s var(--ease),border-color .2s var(--ease)}

.pkg-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem}
.pkg-name{font-size:1.7rem;font-weight:600;letter-spacing:-.026em;line-height:1.16;color:#fff;max-width:16ch}
.pkg-term{flex:none;font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;border:1px solid rgba(255,255,255,.24);border-radius:4px;padding:.45rem .7rem;white-space:nowrap}
.pkg-fit{margin-top:1.1rem;font-size:1.03rem;line-height:1.6;color:rgba(255,255,255,.74)}
.pkg-feat{list-style:none;margin:1.6rem 0 0;padding:1.5rem 0 0;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-direction:column;gap:.75rem}
.pkg-feat li{display:flex;gap:.7rem;font-size:1rem;line-height:1.5;color:#fff}
.pk-ck{flex:none;margin-top:3px;color:var(--blue-bright)}
.pk-ck svg{width:14px;height:14px;display:block}
.pkg-go{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;font-size:.97rem;font-weight:550;color:#fff}
.pkg-go svg{flex:none;width:20px;height:20px;transition:transform .2s var(--ease)}
.pkg:hover .pkg-go svg{transform:translateX(4px)}
.pkg-foot{margin-top:2.4rem;font-size:1.03rem;line-height:1.6;color:rgba(255,255,255,.74)}
.pkg-foot a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.pkg-foot a:hover{color:#fff;border-bottom-color:#fff}
@media(max-width:1000px){
  .pkg-head{grid-template-columns:1fr;gap:1.6rem;align-items:start}
  .pkg-head .h-sec{max-width:24ch}
}
@media(max-width:820px){
  .pkg-grid{grid-template-columns:1fr}
  .pkg{padding:2.1rem 1.9rem}
  .pkg-name{font-size:1.5rem}
}


/* ---------- Founder — portrait left + roles accordion (v4) ---------- */
.fdr-split{display:grid;grid-template-columns:460px minmax(0,1fr);gap:clamp(3rem,6vw,5.5rem);
  align-items:start;margin-top:clamp(2.5rem,5vw,4rem)}
.sec--fdr .founder-photo{margin:0}
.fdr-cred{margin-top:1.7rem}
.fdr-cred>div{display:flex;align-items:baseline;gap:1.25rem;padding:1rem 0;border-top:1px solid var(--hair)}
.fdr-cred>div:last-child{border-bottom:1px solid var(--hair)}
.fc-n{flex:none;width:96px;font-size:1.2rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.fc-l{font-size:.97rem;line-height:1.5;color:var(--body)}
.sec--fdr .rt-label{margin:clamp(3.5rem,6vw,5rem) 0 0;font-size:1.44rem;font-weight:600;letter-spacing:-.022em;
  color:var(--ink);text-align:left}
.racc{margin-top:1.5rem;border-bottom:1px solid var(--hair)}
.racc-item{border-top:1px solid var(--hair)}
.racc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem;background:none;border:0;
  cursor:pointer;text-align:left;padding:1.6rem 0;font-family:var(--font);font-size:1.36rem;font-weight:600;
  letter-spacing:-.02em;line-height:1.26;color:var(--ink);transition:color .2s var(--ease)}
.racc-q:hover{color:var(--blue)}
.racc-ic{flex:none;width:20px;height:20px;color:var(--body);transition:transform .25s var(--ease),color .25s}
.racc-ic svg{display:block;width:20px;height:20px}
.racc-item.open .racc-ic{transform:rotate(45deg);color:var(--blue)}
.racc-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.racc-a p{padding:0 0 1.75rem;max-width:70ch;font-size:1.03rem;line-height:1.6;color:var(--body);
  opacity:0;transform:translateY(-5px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.racc-item.open .racc-a p{opacity:1;transform:none;transition-delay:.1s}
@media(max-width:900px){
  .fdr-split{grid-template-columns:1fr;gap:2.5rem}
  .fc-n{width:80px;font-size:1.1rem}
  .racc-q{font-size:1.18rem;padding:1.3rem 0}
}


/* ---------- FAQ — heading column + accordion (v4) ---------- */
.fq-split{display:grid;grid-template-columns:400px minmax(0,1fr);gap:clamp(3rem,6vw,5.5rem);align-items:start}
.fq-head .h-sec{max-width:none;text-align:left}
.fq-head .btn{margin-top:2rem}
.facc{border-bottom:1px solid var(--lavender-deep)}
.facc-item{border-top:1px solid var(--lavender-deep)}
.facc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem;background:none;border:0;
  cursor:pointer;text-align:left;padding:1.75rem .9rem;margin:0 -.9rem;border-radius:5px;
  font-family:var(--font);font-size:1.44rem;font-weight:600;letter-spacing:-.02em;line-height:1.28;color:var(--ink);
  transition:background .2s var(--ease),color .2s var(--ease)}
.facc-q:hover{background:var(--blue-soft)}
.facc-item.open .facc-q{color:var(--blue)}
.facc-ic{flex:none;width:20px;height:20px;color:var(--body);transition:transform .25s var(--ease),color .25s}
.facc-ic svg{display:block;width:20px;height:20px}
.facc-item.open .facc-ic{transform:rotate(45deg);color:var(--blue)}
.facc-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.facc-a p{padding:0 .9rem 1.9rem;max-width:76ch;font-size:1.03rem;line-height:1.68;color:var(--body);
  opacity:0;transform:translateY(-5px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.facc-item.open .facc-a p{opacity:1;transform:none;transition-delay:.1s}
@media(max-width:900px){
  .fq-split{grid-template-columns:1fr;gap:2.25rem}
  .facc-q{font-size:1.18rem;padding:1.35rem .7rem;margin:0 -.7rem}
  .facc-a p{padding:0 .7rem 1.5rem}
}


/* ---------- Buttons — flat, one hover state (v4) ---------- */
.btn{background:var(--space-800);color:#fff;border:1px solid var(--space-800);box-shadow:none;
  font-weight:600;overflow:visible;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.btn::before{display:none}
.btn:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:none;filter:none;box-shadow:none}
.btn:active{transform:none}
.btn:hover svg{transform:none}
.btn--light{background:#fff;color:var(--ink);border:1px solid var(--hair);box-shadow:none}
.btn--light:hover{background:var(--blue-soft);border-color:var(--blue-border);color:var(--ink);filter:none}
.btn--ghost{background:none;border:1px solid rgba(255,255,255,.34);color:#fff;box-shadow:none;font-weight:500}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34);color:#fff}
.nav-cta{background:var(--space-800);border-color:var(--space-800)}
.nav-cta:hover{background:var(--blue);border-color:var(--blue)}


/* ---------- Buttons — colour change only (final) ---------- */
.btn,.btn--light,.btn--ghost,.nav-cta{box-shadow:none;filter:none;overflow:visible;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.btn::before,.btn--light::before,.btn--ghost::before{display:none;content:none}
.btn svg,.btn--light svg,.btn--ghost svg{transition:none}
.btn:hover svg,.btn:active svg,.btn--light:hover svg,.btn--ghost:hover svg{transform:none}
.btn:hover,.btn:focus-visible,.btn:active,
.btn--light:hover,.btn--light:focus-visible,.btn--light:active,
.btn--ghost:hover,.btn--ghost:focus-visible,.btn--ghost:active,
.nav-cta:hover,.nav-cta:active{
  background:var(--blue);border-color:var(--blue);color:#fff;
  transform:none;filter:none;box-shadow:none}


/* offers band matched to the case-study slab */
.slab--pkg{background:linear-gradient(180deg,var(--space-900),var(--space-800))}
.pkg{border-color:rgba(255,255,255,.14)}
.pkg:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}


/* ---------- Owl mark ---------- */
.nav-logo .owl{display:block;width:auto;height:26px}
.footer .nav-logo .owl--badge{height:28px;width:auto;filter:brightness(0) invert(1)}
@media(max-width:680px){}


/* ---------- Closing CTA band + footer (v4) ---------- */
.cta-band{background:linear-gradient(180deg,var(--space-900),var(--space-800));
  padding:clamp(4.5rem,8vw,7rem) 0;text-align:center}
.cta-band .h-sec{max-width:20ch;margin:0 auto;color:#fff}
.cta-sub{max-width:56ch;margin:1.4rem auto 0;font-size:1.1rem;line-height:1.65;color:rgba(255,255,255,.74)}
.cta-actions{margin-top:2.2rem;display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.btn--blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-hover);border-color:var(--blue-hover);color:#fff}

.ftr{background:#0B0F1D;color:rgba(255,255,255,.72)}
.ftr-nl{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:clamp(2.5rem,5vw,5rem);align-items:center;
  padding:clamp(2.75rem,5vw,3.5rem) 0}
.ftr-nl h3{font-size:1.62rem;font-weight:600;letter-spacing:-.024em;color:#fff}
.ftr-nl .nl-sub{margin-top:.55rem;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.7)}
.ftr .nl-pill{display:flex;gap:.6rem;background:none;border:0;padding:0}
.ftr .nl-pill input{flex:1;min-width:0;padding:.95rem 1.15rem;font-size:.97rem;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);outline:none}
.ftr .nl-pill input::placeholder{color:rgba(255,255,255,.5)}
.ftr .nl-pill input:focus{border-color:var(--blue)}
.ftr .nl-note{display:block;margin-top:.7rem;font-size:.9rem;color:rgba(255,255,255,.7)}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem);
  padding:clamp(2.75rem,5vw,3.25rem) 0;border-top:1px solid rgba(255,255,255,.14)}
.ftr-brand .nav-logo{color:#fff}
.ftr-brand p{margin-top:1.1rem;max-width:42ch;font-size:.97rem;line-height:1.65;color:rgba(255,255,255,.7)}
.ftr-chip{margin-top:1.25rem;display:inline-flex;font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:.45rem .7rem}
.ftr-col h4{margin:0;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.ftr-col{display:flex;flex-direction:column;gap:.7rem}
.ftr-col h4{margin-bottom:.4rem}
.ftr-col a,.ftr-col span{font-size:.97rem;line-height:1.4;color:rgba(255,255,255,.72);transition:color .15s var(--ease)}
.ftr-col a:hover{color:#fff}
.ftr-legal{padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.14);display:flex;align-items:center;
  justify-content:space-between;gap:2rem;flex-wrap:wrap;font-size:.9rem;color:rgba(255,255,255,.62)}
.ftr-legal-links{display:flex;gap:1.75rem;flex-wrap:wrap}
.ftr-legal-links a{color:rgba(255,255,255,.62);transition:color .15s var(--ease)}
.ftr-legal-links a:hover{color:#fff}
@media(max-width:1000px){
  .ftr-nl{grid-template-columns:1fr;gap:1.5rem}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem}
}
@media(max-width:680px){
  .ftr-grid{grid-template-columns:1fr}
  .ftr .nl-pill{flex-direction:column}
  .ftr .nl-pill .btn{justify-content:center}
}


/* quote band — keep both telescope domes in frame */
.quoteband{min-height:min(66vh,620px)}
.qb-img{transform:none;object-position:50% 72%;aspect-ratio:auto}
@media(max-width:820px){.qb-img{object-position:42% 76%}}
@media(max-width:560px){.quoteband{min-height:min(72vh,560px)}.qb-img{object-position:38% 80%}}


/* ---------- Closing CTA + footer as inset blocks (11b, as approved) ---------- */
.cta-band{margin:0 var(--slab-inset);border-radius:var(--r-slab);overflow:hidden}
.ftr{margin:var(--slab-inset);border-radius:var(--r-slab);overflow:hidden}
.ftr .container{padding-top:0;padding-bottom:0}
@media(max-width:680px){
  .cta-band,.ftr{border-radius:8px}
}


/* ---------- Industry cards with real photography ---------- */
.icard--photo{background:var(--space-900)}
.ic-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.icard--photo:hover .ic-img{transform:scale(1.04)}
.icard--photo::before{background:linear-gradient(180deg,rgba(9,15,41,.15) 0%,rgba(9,15,41,.35) 55%,rgba(5,9,26,.85) 100%);z-index:1}
.icard--photo:hover::before{transform:none}
.icard--photo .ic-bottom{z-index:2}


/* offers: no deliverable lists — the fit line carries it, the CTA takes them onward */
.pkg-fit{margin-top:1.25rem}
.pkg-go{margin-top:1.9rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.16)}
.pkg{min-height:270px}


/* case study photo */
.case-photo--real{margin:2.6rem 0 0;border:0;background:none}
.case-photo--real img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}


/* ---------- Current roles — ledger, not an accordion ---------- */
.rledger{margin-top:1.6rem;border-bottom:1px solid var(--hair)}
.rrow{grid-template-columns:72px minmax(0,420px) minmax(0,1fr);gap:2.5rem;align-items:start}
.rr-n{font-family:var(--mono);font-size:.82rem;font-weight:500;letter-spacing:.06em;color:var(--blue);padding-top:.35rem}
.rr-t{margin:0;font-weight:600;letter-spacing:-.018em;color:var(--ink)}
.rr-d{color:var(--body)}
@media(max-width:900px){
  .rrow{grid-template-columns:48px minmax(0,1fr);gap:.6rem 1.25rem;padding:1.4rem 0}
  .rr-n{grid-row:1;padding-top:.2rem}
  .rr-d{grid-column:2}
}


/* ---------- Homepage coherence pass ---------- */
/* question rail now sits on lavender, so the cards flip to white */
.qcard{background:#fff;border:1px solid var(--hair)}
.qc-test{border-top-color:var(--hair)}

/* testimonials: same hairline vocabulary as the rest of the page */
#proof .sec-head-row{text-align:left}
#proof .h-sec{max-width:22ch;margin-left:0}
#proof .card{box-shadow:none;border:1px solid var(--hair);border-radius:var(--r-card);background:#fff}
#proof .card--navy{border:0;background:linear-gradient(180deg,var(--space-900),var(--space-800))}
#proof .tk{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--body)}
#proof .card--navy .tk{color:rgba(255,255,255,.7)}
.pager-btn{width:44px;height:44px;border-radius:4px;background:#fff;border:1px solid var(--hair);box-shadow:none;
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.pager-btn:hover{border-color:var(--ink);background:var(--blue-soft);transform:none;box-shadow:none}
.pager-btn:active{transform:none}


/* ---------- Testimonials brought into the v4 vocabulary ---------- */
#proof .sec-head-row{text-align:left}
#proof .tsplit{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(2.5rem,5vw,4.5rem);align-items:start;
  margin-top:clamp(2.5rem,5vw,3.5rem)}
#proof .tcar{background:none;border:0;border-radius:0;padding:2rem 0 0;box-shadow:none;border-top:1px solid var(--hair)}


#proof .tcar-who{align-items:center}
#proof .tcar-av{border-radius:4px;background:var(--space-800);font-family:var(--mono);font-size:.8rem}
#proof .tcar-count{margin-left:auto;font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.08em;color:var(--body)}
#proof .tfacts{border-radius:var(--r-card);padding:2.1rem 2rem;box-shadow:none}
#proof .tfacts .tk{display:block;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
#proof .tf-num{margin-top:1.1rem}
#proof .tf-line{margin-top:.9rem}
.pager-btn--dark{background:var(--space-800);border-color:var(--space-800);color:#fff}
.pager-btn--dark:hover{background:var(--blue);border-color:var(--blue);color:#fff}
@media(max-width:900px){#proof .tsplit{grid-template-columns:1fr}}

/* ecosystem marquee intro: left-aligned like every other line on the page */
.marquee-head{text-align:left}


/* marquee intro back to centre */
.marquee-head{text-align:center}
.marquee-head p{margin-left:auto;margin-right:auto;max-width:58ch}

/* ---------- Testimonials: make the quote an object again, and louder ---------- */
#proof .tcar{background:#fff;border:1px solid var(--hair);border-top:1px solid var(--hair);border-radius:var(--r-card);
  padding:clamp(2.2rem,4vw,3rem)}
#proof .tcar-top{position:relative;justify-content:flex-start;margin-bottom:1.1rem}
#proof .tcar-top::before{content:"\201C";font-family:var(--font);font-size:4.6rem;font-weight:700;line-height:.7;
  color:var(--blue);display:block}
#proof .tcar-arrows{position:absolute;right:0;top:0}
#proof .tcar-quote p{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.34;font-weight:600;letter-spacing:-.026em;color:var(--ink)}
#proof .tcar-who{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--hair)}
#proof .tfacts{background:linear-gradient(180deg,var(--space-900),var(--space-800));border:0;color:rgba(255,255,255,.74)}
#proof .tfacts .tk{color:rgba(255,255,255,.7)}
#proof .tf-num{color:#fff}
#proof .tf-line{color:rgba(255,255,255,.74)}

/* ---------- Current roles: 2x2, half the height ---------- */
.rledger{margin-top:1.6rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2.5rem,5vw,4.5rem);row-gap:0;border-bottom:0}
.rrow{display:block;padding:1.5rem 0;border-top:1px solid var(--hair)}
.rledger .rrow:nth-last-child(-n+2){border-bottom:1px solid var(--hair)}
.rr-n{display:block;padding:0;margin-bottom:.55rem}
.rr-t{font-size:1.15rem;line-height:1.32}
.rr-d{margin-top:.6rem;font-size:.97rem;line-height:1.58;max-width:46ch}
@media(max-width:900px){
  .rledger{grid-template-columns:1fr}
  .rledger .rrow:nth-last-child(-n+2){border-bottom:0}
  .rledger .rrow:last-child{border-bottom:1px solid var(--hair)}
}


/* ---------- Nav — inset floating bar (12a) ---------- */
.nav{position:fixed;top:var(--slab-inset);left:var(--slab-inset);right:var(--slab-inset);bottom:auto;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;transition:none}
.nav.scrolled{border:0;box-shadow:none}
.nav-inner{position:relative;max-width:none;margin:0;padding:.72rem 1.25rem;gap:1.5rem;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.6);border-radius:var(--r-slab);transition:background .2s var(--ease),border-color .2s var(--ease)}
.nav.scrolled .nav-inner{background:#fff;border-color:var(--hair)}
.nav-logo{color:var(--ink)}
.nav-logo .owl{height:24px}

/* links centred, hairline underline on hover */
.nav-menu{margin:0 auto;gap:1.9rem}
.nav-menu a{padding:0 0 3px;border-radius:0;background:none;color:var(--body);border-bottom:1px solid transparent;transition:color .15s var(--ease),border-color .15s var(--ease)}
.nav-menu a:hover{background:none;color:var(--ink);border-bottom-color:var(--ink)}
.nav-menu a.active{background:none;color:var(--ink);border-bottom-color:var(--ink)}

.nav-cta{padding:.68rem 1.25rem}

@media(max-width:920px){
  .nav-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border:1px solid var(--hair);border-radius:var(--r-slab);max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
  .nav.menu-open .nav-menu{max-height:70vh}
  .nav-menu a{padding:.95rem 1.25rem;border-bottom:1px solid var(--hair)}
  .nav-menu a:last-child{border-bottom:0}
  .nav-menu a:hover{background:var(--blue-soft);border-bottom-color:var(--hair)}
}
@media(max-width:680px){
  .nav-inner{padding:.6rem .75rem .6rem 1rem}
  .nav-logo .owl{height:22px}
}


/* =========================================================
   UTILITY PAGES — contact, resources, privacy, terms (v4)
   ========================================================= */

/* ---------- page hero ---------- */
.phero{padding:calc(var(--nav-h, 82px) + clamp(4rem,7vw,6.5rem)) 0 clamp(2.75rem,5vw,4rem);background:var(--white)}
.h-page{font-size:clamp(2.6rem,5vw,4rem);font-weight:600;letter-spacing:-.035em;line-height:1.04;color:var(--ink);max-width:22ch}
.phero-sub{margin-top:1.5rem;max-width:62ch;font-size:1.14rem;line-height:1.62;color:var(--body)}
.phero-sub + .phero-sub{margin-top:.9rem}

/* ---------- logo bar (static, not a marquee) ---------- */
.logobar{padding:0 0 clamp(2.5rem,5vw,3.5rem);background:var(--white)}
.logobar-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.75rem,3.5vw,3rem);
  padding-top:clamp(1.75rem,3vw,2.25rem);border-top:1px solid var(--hair)}
.logobar-row .lc-logo{height:var(--lh);width:auto;flex:none;opacity:.72;filter:grayscale(1);
  transition:opacity .2s var(--ease),filter .2s var(--ease)}
.logobar-row .lc-logo:hover{opacity:1;filter:none}

/* ---------- application form ---------- */
.fm-split{display:grid;grid-template-columns:400px minmax(0,1fr);gap:clamp(3rem,6vw,5.5rem);align-items:start}
.fm-head .h-sec{max-width:18ch}
.fm-head .sec-intro{margin-top:1.3rem}
.fm-privacy{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--lavender-deep);
  font-size:.95rem;line-height:1.6;color:var(--body)}
.fm-privacy + .fm-privacy{border-top:0;padding-top:0;margin-top:.9rem}
.cform{background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);padding:clamp(1.75rem,3vw,2.5rem)}
.cf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.35rem 1.5rem}
.cf-field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.cf-wide{grid-column:1/-1}
.cf-field label{font-size:.9rem;font-weight:550;color:var(--ink)}
.cf-field input,.cf-field select,.cf-field textarea{width:100%;font-family:var(--font);font-size:1rem;color:var(--ink);background:var(--page-tint);border:1px solid var(--hair);border-radius:var(--r-inner);padding:.8rem .95rem;outline:none;transition:border-color .15s var(--ease),background .15s var(--ease)}
.cf-field textarea{resize:vertical;min-height:140px;line-height:1.55}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{border-color:var(--blue);background:#fff}
.cf-field.err input,.cf-field.err select,.cf-field.err textarea{border-color:#B3261E;background:#FDF6F5}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-submit{margin-top:1.9rem;padding-top:1.6rem;border-top:1px solid var(--hair);
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.cf-note{font-size:.95rem;line-height:1.55;max-width:52ch}
.cf-note.err{color:#B3261E}
.cf-note.ok{color:#1B6E44}

/* ---------- what happens next ---------- */
.wn-ledger{margin-top:clamp(2.25rem,4vw,3rem);border-bottom:1px solid var(--hair)}
.wn-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:2rem;padding:1.75rem 0;border-top:1px solid var(--hair)}
.wn-n{font-family:var(--mono);font-size:.85rem;font-weight:500;letter-spacing:.06em;color:var(--blue);padding-top:.3rem}
.wn-t{margin:0;font-size:1.3rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.wn-d{margin-top:.7rem;max-width:62ch;font-size:1.02rem;line-height:1.62;color:var(--body)}
.wn-timing{margin-top:1.75rem;font-size:1rem;color:var(--body)}

/* ---------- resources ---------- */
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.guide{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);
  padding:clamp(2rem,3.4vw,2.75rem)}
.guide-t{font-size:1.72rem;font-weight:600;letter-spacing:-.026em;line-height:1.18;color:var(--ink);max-width:20ch}
.guide-for{margin-top:.85rem;font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--body)}
.guide-d{margin-top:1.2rem;font-size:1.03rem;line-height:1.65;color:var(--body)}
.guide-cta{margin-top:auto;align-self:flex-start;margin-top:2rem}
.sec--guides .guide-cta{margin-top:2rem}

/* ---------- legal pages ---------- */
.phero--legal .h-page{max-width:24ch}
.lg-updated{font-family:var(--mono);font-weight:500;text-transform:uppercase}
.sec--legal{padding:clamp(2.5rem,5vw,4rem) 0 clamp(4rem,7vw,6rem)}
.lg-split{display:grid;grid-template-columns:270px minmax(0,1fr);align-items:start}
.lg-toc{position:sticky;top:calc(var(--nav-h, 82px) + 1.5rem);display:flex;flex-direction:column;gap:.6rem;padding-top:1.4rem;border-top:1px solid var(--ink)}
.lg-toc-h{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}


.lg-body{max-width:72ch}


.lg-n{flex:none;font-family:var(--mono);font-weight:500;letter-spacing:.06em}


.lg-sec h2 + p{margin-top:1.1rem}
.lg-list{margin:1rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column}
.lg-list li{position:relative;color:var(--body)}
.lg-list li::before{left:0}

.lg-addr strong{color:var(--ink)}

/* ---------- utility footer (legal pages) ---------- */
.ftr--util .container{padding-top:0;padding-bottom:0}
.ftr-util-grid{display:flex;align-items:flex-start;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;
  padding:clamp(2.5rem,4.5vw,3.25rem) 0}
.ftr-util-addr{margin-top:1.1rem;font-size:.97rem;line-height:1.7;color:rgba(255,255,255,.72)}
.ftr-util-addr a{color:rgba(255,255,255,.72);transition:color .15s var(--ease)}
.ftr-util-addr a:hover{color:#fff}
.ftr-util-links{display:flex;gap:1.75rem}
.ftr-util-links a{font-size:.97rem;color:rgba(255,255,255,.72);transition:color .15s var(--ease)}
.ftr-util-links a:hover{color:#fff}

@media(max-width:1000px){
  .fm-split{grid-template-columns:1fr;gap:2.25rem}
  .fm-head .h-sec{max-width:24ch}
  .lg-split{grid-template-columns:1fr;gap:2.25rem}
  .lg-toc{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.5rem}
  .lg-toc-h{grid-column:1/-1}
}
@media(max-width:820px){
  .guide-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .cf-grid{grid-template-columns:1fr}
  .wn-row{grid-template-columns:48px minmax(0,1fr);gap:1.1rem}
  .lg-toc{grid-template-columns:1fr}
  .ftr-util-grid{flex-direction:column;gap:1.5rem}
}


/* ---------- contact: logo bar in two even rows, full colour ---------- */
.logobar-rows{display:flex;flex-direction:column;gap:clamp(1.5rem,2.6vw,2.25rem);
  padding-top:clamp(1.75rem,3vw,2.25rem);border-top:1px solid var(--hair)}
.logobar-rows .logobar-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;
  gap:clamp(1.25rem,2.5vw,2.25rem);padding:0;border:0}
.logobar-rows .logobar-row:last-child{grid-template-columns:repeat(5,minmax(0,1fr))}
.logobar-rows .lc-logo{height:var(--lh);width:auto;max-width:100%;margin:0 auto;opacity:1;filter:none}

/* ---------- contact: three-step timeline ---------- */
.wn-timeline{position:relative;margin-top:clamp(2.5rem,4.5vw,3.5rem);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3.25rem)}
.tl-rail{position:absolute;top:7px;left:0;right:0;height:1px;background:var(--hair)}
.tl-step{position:relative;padding-top:2.6rem}
.tl-dot{position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;
  background:#fff;border:1px solid var(--blue);box-shadow:inset 0 0 0 3.5px #fff, inset 0 0 0 9px var(--blue)}
.tl-n{display:block;font-family:var(--mono);font-size:.82rem;font-weight:500;letter-spacing:.1em;color:var(--blue)}
.tl-t{margin-top:.85rem;font-size:1.28rem;font-weight:600;letter-spacing:-.02em;line-height:1.28;color:var(--ink)}
.tl-d{margin-top:.8rem;font-size:1.01rem;line-height:1.62;color:var(--body)}
@media(max-width:900px){
  .logobar-rows .logobar-row,.logobar-rows .logobar-row:last-child{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 1.25rem}
  .wn-timeline{grid-template-columns:1fr;gap:0}
  .tl-rail{top:7px;bottom:auto;left:7px;right:auto;width:1px;height:100%}
  .tl-step{padding:0 0 2rem 2.6rem}
  .tl-step:last-child{padding-bottom:0}
}


/* =========================================================
   CONTACT v4.1 — application slab + editorial process steps
   ========================================================= */
.fm-slab{display:grid;grid-template-columns:392px minmax(0,1fr);gap:0;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r-slab);overflow:hidden}
.fm-brief{background:linear-gradient(180deg,var(--space-900),var(--space-800));
  padding:clamp(2.25rem,3.6vw,3rem);display:flex;flex-direction:column}
.fm-brief-h{font-size:clamp(1.75rem,2.6vw,2.15rem);font-weight:600;letter-spacing:-.028em;line-height:1.14;color:#fff;max-width:16ch}
.fm-brief-sub{margin-top:1.1rem;font-size:1.03rem;line-height:1.62;color:rgba(255,255,255,.74)}
.fm-facts{margin:2rem 0 0;padding:0;display:flex;flex-direction:column}
.fm-facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.85rem 0;border-top:1px solid rgba(255,255,255,.16)}
.fm-facts>div:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.fm-facts dt{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
.fm-facts dd{margin:0;font-size:.97rem;font-weight:550;color:#fff;text-align:right}
.fm-notes{margin-top:auto;padding-top:2rem}
.fm-notes p{font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.66)}
.fm-notes p + p{margin-top:.85rem}
.fm-notes a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.fm-notes a:hover{color:#fff;border-bottom-color:#fff}
.fm-mark{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:.5rem;border-radius:4px;
  background:rgba(255,255,255,.12);color:#fff;font-family:var(--mono);font-size:.7rem;font-weight:500;transform:translateY(2px)}

.sec--form .cform{background:#fff;border:0;border-radius:0;padding:clamp(2rem,3.4vw,3rem)}
.cf-group{border:0;margin:0;padding:0}
.cf-group + .cf-group{margin-top:2.25rem;padding-top:2rem;border-top:1px solid var(--hair)}
.cf-group legend{display:flex;align-items:baseline;gap:.85rem;padding:0 0 1.35rem;
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.cf-gn{color:var(--blue)}
.sec--form .cf-field input,.sec--form .cf-field select,.sec--form .cf-field textarea{
  background:#fff;border:1px solid var(--lavender-deep);border-radius:var(--r-inner);padding:.85rem 1rem}
.sec--form .cf-field input:hover,.sec--form .cf-field select:hover,.sec--form .cf-field textarea:hover{border-color:var(--dot-light)}
.sec--form .cf-field input:focus,.sec--form .cf-field select:focus,.sec--form .cf-field textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.sec--form .cf-field label{font-size:.92rem}
.sec--form .cf-submit{margin-top:2.25rem;padding-top:1.9rem}

/* process steps */
.next-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.next-sub{font-size:1.03rem;color:var(--body)}
.psteps{margin-top:clamp(2.5rem,4.5vw,3.5rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,3.5rem)}
.pstep{position:relative;display:flex;flex-direction:column}
.pstep-rule{position:relative;height:1px;background:var(--hair);margin-bottom:1.75rem}
.pstep:first-child .pstep-rule{background:var(--ink)}
.pstep-node{position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:2px;background:var(--blue)}
.pstep-n{font-size:clamp(2.4rem,4vw,3.25rem);font-weight:600;letter-spacing:-.05em;line-height:.88;color:var(--ink)}
.pstep-t{margin-top:1.4rem;font-size:1.32rem;font-weight:600;letter-spacing:-.022em;line-height:1.26;color:var(--ink)}
.pstep-d{margin-top:.85rem;font-size:1.01rem;line-height:1.62;color:var(--body)}
.pstep-when{margin-top:1.5rem;align-self:flex-start;font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--body);
  border:1px solid var(--hair);border-radius:4px;padding:.4rem .65rem}

@media(max-width:1000px){
  .fm-slab{grid-template-columns:1fr}
  .fm-brief-h{max-width:22ch}
  .fm-notes{margin-top:1.5rem}
}
@media(max-width:900px){
  .psteps{grid-template-columns:1fr;gap:0}
  .pstep{padding-bottom:2rem}
  .pstep:last-child{padding-bottom:0}
  .pstep-rule{margin-bottom:1.25rem}
}


/* process step chips seat on one baseline */
.pstep-when{margin-top:auto;margin-block-start:auto}
.pstep-d{margin-bottom:1.5rem}
@media(max-width:900px){.pstep-when{margin-top:0}.pstep-d{margin-bottom:1rem}}

/* navy brief panel: no void above the notices when stacked */
@media(max-width:1000px){.fm-notes{margin-top:1.75rem}}


/* =========================================================
   LEGAL PAGES v4.1 — document typography
   ========================================================= */
.phero--legal{padding-bottom:0}
.lg-doc-head{padding-bottom:clamp(2.25rem,4vw,3.25rem);border-bottom:1px solid var(--ink)}
.phero--legal .h-page{font-size:clamp(2.4rem,4.4vw,3.5rem);max-width:20ch}
.lg-updated{display:inline-flex;margin-top:1.25rem;padding:.45rem .7rem;border:1px solid var(--hair);border-radius:4px;font-size:.72rem;letter-spacing:.14em;color:var(--body);background:var(--page-tint)}
.phero--legal .phero-sub{margin-top:1.6rem;max-width:68ch;font-size:1.18rem;line-height:1.66;color:var(--ink)}
.phero--legal .phero-sub + .phero-sub{margin-top:.8rem;font-size:1.06rem;color:var(--body)}

.sec--legal{padding-top:clamp(2.75rem,5vw,4rem)}
.lg-split{gap:clamp(3rem,6.5vw,6rem)}
@media(min-width:1001px){}

/* index */
.lg-toc{gap:0;padding-top:0;border-top:0}
.lg-toc-h{margin:0 0 1rem;padding-bottom:.85rem;border-bottom:1px solid var(--hair);color:var(--body)}
.lg-toc a{border-left:1px solid transparent;padding-left:.85rem;margin-left:-.85rem;transition:color .15s var(--ease),border-color .15s var(--ease)}

.lg-toc a.on{border-left-color:var(--blue)}

/* body */
.lg-body{max-width:68ch}
.lg-sec{scroll-margin-top:calc(var(--nav-h) + 1.5rem)}
.lg-sec h2{position:relative}
.lg-n{position:absolute;left:-3.4rem;top:.35em;font-size:.78rem;color:var(--blue)}

.lg-sec h2 + h3{margin-top:1.5rem}
.lg-sec p{text-wrap:pretty}
.lg-sec h3 + p{margin-top:.75rem}
.lg-sec a{transition:border-color .15s var(--ease)}

.lg-list{margin-top:1.1rem;gap:.6rem}

.lg-list li::before{top:.66em;opacity:.75}

/* closing contact block reads as a card, not another paragraph */
#contact.lg-sec{margin-top:.5rem;padding:clamp(1.75rem,3vw,2.25rem);border:1px solid var(--hair);
  border-radius:var(--r-card);background:var(--page-tint)}
#contact.lg-sec h2{margin-bottom:.25rem}
#contact.lg-sec .lg-n{position:static;margin-bottom:.5rem;left:auto}


.lg-top{display:inline-flex;align-items:center;gap:.5rem;width:100%;font-family:var(--mono);font-weight:500;text-transform:uppercase;color:var(--body)}
.lg-top:hover{color:var(--ink)}
.lg-top::before{content:"\2191"}

@media(max-width:1080px){
  .lg-n{position:static;display:inline-block;margin-right:.7rem;left:auto;top:auto}
  .lg-sec h2{display:flex;align-items:baseline;gap:0}
}
@media(max-width:1000px){
  .lg-toc{border:1px solid var(--hair);border-radius:var(--r-card);padding:1.25rem 1.4rem;background:var(--page-tint)}
  .lg-toc a{margin-left:0;padding-left:0;border-left:0}
  .lg-toc a.on{border-left:0;color:var(--blue)}
  .lg-toc-h{border-bottom:0;padding-bottom:0;margin-bottom:.6rem}
}


/* =========================================================
   LEGAL PAGES v4.2 — clinical / paper setting
   (header untouched; body re-set as a numbered document)
   ========================================================= */
.sec--legal{padding-top:clamp(2.5rem,4.5vw,3.5rem);counter-reset:lgsec}
@media(min-width:1001px){.lg-split{grid-template-columns:232px minmax(0,1fr);gap:clamp(3rem,5.5vw,5rem)}}

/* index — a contents table, numerals aligned */
.lg-toc-h{margin:0 0 .9rem;padding-bottom:.7rem;border-bottom:1px solid var(--ink);
  font-size:.68rem;letter-spacing:.16em;color:var(--ink)}
.lg-toc{counter-reset:lgtoc}
.lg-toc a{display:grid;grid-template-columns:1.9rem minmax(0,1fr);gap:.35rem;align-items:baseline;padding:.42rem 0;margin:0;border:0;border-bottom:1px solid transparent;font-size:.855rem;line-height:1.35;color:var(--body);font-variant-numeric:tabular-nums}
.lg-toc a::before{counter-increment:lgtoc;content:counter(lgtoc) ".";
  font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.lg-toc a:hover{color:var(--ink);border-bottom-color:var(--hair)}
.lg-toc a.on{color:var(--ink);font-weight:550;border-left:0}
.lg-toc a.on::before{color:var(--blue)}

/* body — narrow measure, numbered clauses, no cards */
.lg-body{max-width:64ch;border-top:1px solid var(--ink)}
.lg-sec{counter-increment:lgsec;counter-reset:lgsub;padding:1.9rem 0;border-top:1px solid var(--hair)}
.lg-sec:first-child{border-top:0;padding-top:1.9rem}
.lg-n{display:none}
.lg-sec h2{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.25rem;align-items:baseline;font-size:1.06rem;font-weight:600;letter-spacing:-.008em;line-height:1.4;color:var(--ink)}
.lg-sec h2::before{content:counter(lgsec) ".";font-family:var(--mono);font-size:.82rem;font-weight:500;
  color:var(--body);font-variant-numeric:tabular-nums}
.lg-sec h3{counter-increment:lgsub;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.25rem;align-items:baseline;margin-top:1.5rem;padding-top:0;border-top:0;font-size:.98rem;font-weight:600;letter-spacing:-.004em;color:var(--ink)}
.lg-sec h3::before{content:counter(lgsec) "." counter(lgsub);font-family:var(--mono);font-size:.76rem;
  font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.lg-sec p{margin-top:.8rem;margin-left:2.65rem;font-size:.97rem;line-height:1.72;color:var(--body)}
.lg-sec h2 + p,.lg-sec h3 + p{margin-top:.7rem}
.lg-sec a{color:var(--ink);border-bottom:1px solid var(--dot-light)}
.lg-sec a:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* clauses lettered (a), (b), (c) */
.lg-list{margin:.85rem 0 0 2.65rem;padding:0;counter-reset:lgitem;gap:.4rem}
.lg-list li{counter-increment:lgitem;padding-left:2rem;font-size:.97rem;line-height:1.66}
.lg-list li::before{content:"(" counter(lgitem, lower-alpha) ")";position:static;display:inline-block;width:2rem;margin-left:-2rem;background:none;border-radius:0;height:auto;font-family:var(--mono);font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* closing clause: no card */
#contact.lg-sec{margin-top:0;padding:1.9rem 0;border:0;border-top:1px solid var(--hair);
  border-radius:0;background:none}
#contact.lg-sec .lg-n{display:none}
.lg-addr{font-size:.97rem;line-height:1.8}

.lg-top{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--ink);font-size:.68rem;letter-spacing:.16em}

@media(max-width:1080px){
  .lg-sec h2,.lg-sec h3{grid-template-columns:2.4rem minmax(0,1fr);display:grid}
}
@media(max-width:680px){
  .lg-sec h2,.lg-sec h3{grid-template-columns:1.9rem minmax(0,1fr)}
  .lg-sec p{margin-left:0}
  .lg-list{margin-left:0}
}

/* legal pages: single column below 1000px (asserted last) */ @media(max-width:1000px){.lg-split{grid-template-columns:1fr;gap:2.25rem}
  .lg-toc{position:static;display:block;background:var(--page-tint)}
  .lg-body{border-top:0}}


/* =========================================================
   RESOURCES v4.2 — guide rows with cover mockups
   ========================================================= */
.phero-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.9rem 0 0;padding:0;list-style:none}
.phero-meta li{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--body);border:1px solid var(--hair);border-radius:4px;padding:.45rem .7rem}


.guide-stack{display:flex;flex-direction:column}
.gcard{grid-template-columns:392px minmax(0,1fr);gap:clamp(3rem,6vw,5.5rem);align-items:center;border-top:1px solid var(--hair)}

.gcard--flip .gmock{order:2}

/* ---- cover mockup ---- */
.gmock{position:relative;padding:0 26px 26px 0}

.gsheet--back,.gsheet--mid{position:absolute;inset:0;border:1px solid var(--hair);background:#fff}
.gsheet--back{transform:translate(26px,26px)}
.gsheet--mid{transform:translate(13px,13px)}
.gsheet--front{border:1px solid var(--hair);background:#fff}
.gmock--ink .gsheet--front{border-color:var(--space-900)}
.gmock--light .gsheet--front{background:var(--lavender);border-color:var(--lavender-deep)}


.gs-grid span{height:4px;border-radius:1px;background:var(--lavender-deep)}
.gs-grid span:nth-child(3){background:var(--blue)}
.gmock--ink .gs-grid span{background:rgba(255,255,255,.2)}
.gmock--ink .gs-grid span:nth-child(3){background:var(--blue-bright)}
.gs-body{padding-bottom:1.3rem}


/* ---- guide copy ---- */
.gb-head{display:flex;align-items:center;gap:1rem}
.gb-n{font-family:var(--mono);font-size:.85rem;font-weight:500;letter-spacing:.08em;color:var(--blue)}

.gb-t{max-width:20ch}
.gb-d{max-width:60ch}
.gb-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.75rem 0 0;padding:0;list-style:none}
.gb-meta li{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:var(--lavender);border-radius:4px;padding:.45rem .7rem}


@media(max-width:1000px){
  .gcard{grid-template-columns:1fr;gap:2.5rem}
  .gcard--flip .gmock{order:0}
  .gmock{max-width:360px}
  .gb-t{max-width:24ch}
}


/* =========================================================
   RESOURCES v4.3 — shelf on white
   ========================================================= */
.phero--center{text-align:center}
.phero--center .h-page{margin:0 auto;max-width:18ch}
.phero--center .phero-sub{margin-left:auto;margin-right:auto;max-width:60ch}

.sec--guides{padding-top:clamp(2.5rem,5vw,4rem)}
.guide-shelf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(3rem,6vw,5rem)}
.gcard{display:block;padding:0;border:0}
.gcard:last-child{border-bottom:0}

/* covers: one navy, one lavender — neither is white on a white page */
.gmock{position:relative;padding:0 26px 26px 0}
.gsheet{border-radius:var(--r-card);aspect-ratio:8.5/11}
.gsheet--back{position:absolute;left:26px;right:0;top:26px;bottom:0;height:auto;aspect-ratio:auto;background:var(--page-tint);border:1px solid var(--hair)}
.gsheet--front{position:relative;display:flex;flex-direction:column;padding:clamp(1.9rem,3vw,2.75rem);overflow:hidden}
.gmock--ink .gsheet--front{background:linear-gradient(180deg,var(--space-900),var(--space-800));border:1px solid var(--space-900)}
.gmock--lav .gsheet--front{background:var(--lavender);border:1px solid var(--lavender-deep)}
.gs-top{display:flex;align-items:center;gap:.6rem}
.gs-owl{display:block;height:22px;width:auto}
.gmock--ink .gs-owl{filter:brightness(0) invert(1)}
.gs-wm{font-size:1.16rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.gmock--ink .gs-wm{color:#fff}
.gs-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-top:1.6rem}
.gs-bar{height:5px;border-radius:2px;background:var(--lavender-deep)}
.gs-bar--on{background:var(--blue)}
.gmock--ink .gs-bar{background:rgba(255,255,255,.2)}
.gmock--ink .gs-bar--on{background:var(--blue-bright)}
.gs-body{margin-top:auto}
.gs-kind{display:block;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--body)}
.gmock--ink .gs-kind{color:rgba(255,255,255,.65)}
.gs-title{display:block;margin-top:.95rem;font-size:clamp(2rem,3.1vw,2.75rem);font-weight:600;letter-spacing:-.036em;line-height:1.02;color:var(--ink)}
.gmock--ink .gs-title{color:#fff}
.gs-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.8rem;padding-top:1rem;border-top:1px solid var(--lavender-deep);font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--body)}
.gmock--ink .gs-foot{border-top-color:rgba(255,255,255,.18);color:rgba(255,255,255,.65)}
.gs-pages{color:var(--ink)}
.gmock--ink .gs-pages{color:#fff}

.gbody{margin-top:2.1rem}
.gb-who{display:block;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--body)}
.gb-t{margin-top:.9rem;font-size:clamp(1.75rem,2.6vw,1.95rem);font-weight:600;letter-spacing:-.03em;line-height:1.12;color:var(--ink)}
.gb-d{margin-top:1rem;font-size:1.03rem;line-height:1.65;color:var(--body)}
.gb-cta{margin-top:1.6rem}

/* closing CTA: copy left, buttons right */
.cta-band--split{text-align:left}
.cta-band--split .container{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2.5rem,5vw,4rem);align-items:center}
.cta-band--split .h-sec{margin:0;max-width:none}
.cta-band--split .cta-sub{margin:1rem 0 0;max-width:60ch}
.cta-band--split .cta-actions{margin:0;justify-content:flex-end}

@media(max-width:900px){
  .guide-shelf{grid-template-columns:1fr;gap:3.5rem}
  .cta-band--split .container{grid-template-columns:1fr}
  .cta-band--split .cta-actions{justify-content:flex-start}
}


/* resources v4.3 fixes */
.gsheet--back{transform:none}
@media(max-width:1080px){
  .cta-band--split .container{grid-template-columns:1fr;gap:2rem}
  .cta-band--split .cta-actions{justify-content:flex-start}
}


/* ink cover: owl keeps its cut-out detail on a light chip instead of being flattened white */
.gmock--ink .gs-owl{filter:none;height:18px;padding:0}
.gmock--ink .gs-top{gap:.55rem}
.gmock--ink .gs-owl-chip{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:5px;background:#fff}


/* =========================================================
   PRINT — utility pages
   ========================================================= */
@media print{
  @page{margin:14mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{background:#fff}
  .nav,.skip-link,.nav-toggle,.lg-top,.ftr-nl,.cta-band,.logobar,.cf-submit .btn,.gb-cta,.cta-actions{display:none !important}
  .reveal,.reveal-scale{opacity:1 !important;transform:none !important}
  .phero{padding-top:0 !important;padding-bottom:1.5rem !important}
  .sec,.sec--legal{padding-top:.75rem !important;padding-bottom:.75rem !important}
  .container{max-width:none;padding-left:0;padding-right:0}

  /* legal: keep the numbered document, drop the sticky index */
  .lg-split{display:block}
  .lg-toc{display:none}
  .lg-body{max-width:none;border-top:1px solid #0B0F1D}
  .lg-sec{break-inside:avoid;page-break-inside:avoid}

  /* contact */
  .fm-slab{display:block;border-color:#DFE4FB}
  .fm-brief{break-inside:avoid}
  .cf-field input,.cf-field select,.cf-field textarea{background:#fff !important}
  .pstep,.gcard,.guide-shelf article{break-inside:avoid;page-break-inside:avoid}
  .psteps{gap:1.5rem}

  /* resources */
  .guide-shelf{gap:2rem}
  .gmock{padding:0}
  .gsheet--back{display:none}

  /* footer: keep the address block, lose the link grid */
  .ftr{margin:1.5rem 0 0;border-radius:0}
  .ftr-grid .ftr-col,.ftr-legal-links{display:none}
  .ftr-grid{grid-template-columns:1fr;border-top:1px solid rgba(255,255,255,.2)}
}


/* =========================================================
   SERVICES PAGE (how-we-work) v4
   ========================================================= */
.sec--origin{padding-top:0;background:var(--white)}
.slab--origin{background:linear-gradient(180deg,var(--space-900),var(--space-800));
  margin:0 var(--slab-inset);border-radius:var(--r-slab);padding:clamp(3.5rem,6vw,5.5rem) 0}
.or-split{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:clamp(3rem,6vw,5rem);align-items:start}
.or-split .h-sec{max-width:18ch}
.or-lead{margin-top:1.5rem;font-size:clamp(1.3rem,2.1vw,1.62rem);font-weight:550;letter-spacing:-.022em;line-height:1.36;max-width:34ch}
.or-p{margin-top:1.1rem;max-width:60ch;font-size:1.03rem;line-height:1.7}
.or-photo{margin:0;aspect-ratio:4/5;border-radius:var(--r-card);border:1px dashed rgba(255,255,255,.28);display:grid;place-items:center;padding:1.5rem;text-align:center}
.or-photo .ph-pill{position:static;background:none;border:0;font-size:.85rem;line-height:1.5}

.at-split{display:grid;grid-template-columns:400px minmax(0,1fr);gap:clamp(3rem,6vw,5.5rem);align-items:start}
.at-split .h-sec{max-width:16ch}
.at-p{font-size:1.06rem;line-height:1.7;color:var(--body);max-width:64ch}
.at-p + .at-p{margin-top:1.1rem}
.at-p--em{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--hair);
  font-size:1.2rem;font-weight:550;line-height:1.5;letter-spacing:-.016em;color:var(--ink)}

.mt-split{display:grid;grid-template-columns:400px minmax(0,1fr);gap:clamp(3rem,6vw,5.5rem);align-items:start}
.mt-head .h-sec{max-width:14ch}
.mt-head .sec-intro{margin-top:1.3rem}
.msteps{border-bottom:1px solid var(--lavender-deep)}
.mstep{display:grid;grid-template-columns:64px minmax(0,1fr);gap:1.75rem;padding:1.9rem 0;
  border-top:1px solid var(--lavender-deep)}
.ms-n{font-family:var(--mono);font-size:.85rem;font-weight:500;letter-spacing:.06em;color:var(--blue);padding-top:.35rem}
.ms-t{margin:0;font-size:1.34rem;font-weight:600;letter-spacing:-.022em;line-height:1.28;color:var(--ink)}
.ms-d{margin-top:.85rem;max-width:62ch;font-size:1.02rem;line-height:1.65;color:var(--body)}

.ev-split{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:clamp(3rem,6vw,5.5rem);align-items:start}
.ev-head .h-sec{max-width:14ch}
.ev-head .sec-intro{margin-top:1.3rem;max-width:56ch}
.ev-close{margin-top:1.6rem;max-width:56ch;font-size:1.03rem;line-height:1.68;color:var(--body)}
.ev-em{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--hair);max-width:40ch;
  font-size:1.24rem;font-weight:600;letter-spacing:-.018em;line-height:1.42;color:var(--ink)}
.ladder{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden}
.ladder-cap{padding:.75rem 1.5rem;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body);background:var(--page-tint)}
.ladder-cap--top{color:var(--ink);background:var(--lavender)}
.rung{display:grid;grid-template-columns:52px minmax(0,1fr);gap:1rem;align-items:baseline;
  padding:1.15rem 1.5rem;border-top:1px solid var(--hair)}
.rung-n{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.rung-t{font-size:1.04rem;line-height:1.5;color:var(--body)}
.rung--top{background:var(--lavender)}

.rung--top .rung-t{font-weight:600;color:var(--ink)}
.ladder .ladder-cap:last-child{border-top:1px solid var(--hair)}

.wk-split{display:grid;grid-template-columns:400px minmax(0,1fr);gap:clamp(3rem,6vw,5.5rem);align-items:start}
.wk-head .h-sec{max-width:12ch}
.wk-lead{margin-top:1.3rem;font-size:1.18rem;font-weight:550;line-height:1.5;letter-spacing:-.016em;color:var(--ink)}
.wk-p{font-size:1.04rem;line-height:1.7;color:var(--body);max-width:64ch}
.wk-p + .wk-p{margin-top:1.1rem}
.wk-case{margin-top:2rem;padding:1.6rem 1.75rem;background:#fff;border:1px solid var(--hair);border-radius:var(--r-card)}
.wk-case p{font-size:1.04rem;line-height:1.6;color:var(--ink)}
.wk-case a{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.97rem;font-weight:600}
.wk-case a svg{width:13px;height:13px}

.run-pair{margin-top:clamp(2.25rem,4vw,3rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.run-card{padding:clamp(1.9rem,3vw,2.5rem);border:1px solid var(--hair);border-radius:var(--r-card);background:#fff}
.run-card--alt{background:var(--lavender);border-color:var(--lavender-deep)}
.run-card h3{font-size:1.34rem;font-weight:600;letter-spacing:-.022em;color:var(--ink)}
.run-card p{margin-top:1rem;font-size:1.02rem;line-height:1.68;color:var(--body)}

.pkg--static{cursor:default}
.pkg--static:hover{background:none;border-color:rgba(255,255,255,.14)}
.pkg-actions{margin-top:2.5rem}

.asks{margin-top:clamp(2.25rem,4vw,3rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,3.5vw,3rem)}
.ask{padding-top:1.4rem;border-top:1px solid var(--ink)}
.ask-n{display:block;font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.1em;color:var(--blue)}
.ask p{margin-top:1rem;font-size:1.03rem;line-height:1.68;color:var(--body)}

.cmp-split{display:grid;grid-template-columns:400px minmax(0,1fr);gap:clamp(3rem,6vw,5.5rem);align-items:start}
.cmp-head .h-sec{max-width:18ch}
.cmp-head .sec-intro{margin-top:1.3rem}
.cmp-ledger{border-bottom:1px solid var(--hair)}
.cmp-row{display:grid;grid-template-columns:280px minmax(0,1fr);gap:2.5rem;padding:1.7rem 0;border-top:1px solid var(--hair)}
.cmp-t{margin:0;font-size:1.14rem;font-weight:600;letter-spacing:-.018em;line-height:1.32;color:var(--ink)}
.cmp-d{font-size:1.01rem;line-height:1.66;color:var(--body)}

@media(max-width:1000px){
  .or-split,.at-split,.mt-split,.ev-split,.wk-split,.cmp-split{grid-template-columns:1fr;gap:2.25rem}
  .or-split .h-sec,.at-split .h-sec,.mt-head .h-sec,.ev-head .h-sec,.wk-head .h-sec,.cmp-head .h-sec{max-width:22ch}
  .or-photo{aspect-ratio:16/10}
  .asks{grid-template-columns:1fr}
  .run-pair{grid-template-columns:1fr}
  .cmp-row{grid-template-columns:1fr;gap:.7rem}
}


/* evidence ladder: legible numerals */
.rung-n{color:var(--body)}
.rung--top .rung-n{color:var(--ink)}


/* =========================================================
   SERVICES — four tall engagement cards
   ========================================================= */
.sec--svc .svc-head-row{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:clamp(2.5rem,5vw,4.5rem);align-items:end}

.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.svc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);border-radius:var(--r-card)}
.svc-head{display:flex}
.svc-name{font-weight:600;color:var(--ink)}
.svc-term{font-family:var(--mono);font-weight:500;text-transform:uppercase;background:var(--blue-soft);border-radius:var(--r-pill)}


.svc-list{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-direction:column}
.svc-list li{display:flex}
.sv-ck{flex:none;color:var(--blue)}
.sv-ck svg{display:block}


@media(max-width:1200px){
  
  .svc-fit{min-height:0}
}
@media(max-width:1000px){
  
}
@media(max-width:680px){
  .svc-grid{grid-template-columns:1fr}
  .svc-head{min-height:0}
}


/* =========================================================
   SERVICES HERO — photo band
   ========================================================= */
.shero{position:relative;margin:var(--slab-inset);border-radius:var(--r-slab);overflow:hidden;
  background:linear-gradient(160deg,var(--space-700),var(--space-900));isolation:isolate}
.shero-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.shero-ph{position:absolute;inset:0;z-index:0;display:grid;place-items:center;padding:2rem;text-align:center}
.shero-ph span{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.38);border:1px dashed rgba(255,255,255,.22);border-radius:4px;padding:.6rem .9rem}
.shero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,15,41,.62) 0%,rgba(9,15,41,.3) 38%,rgba(9,15,41,.86) 100%)}
.shero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 420px;
  gap:clamp(2.5rem,5vw,4.5rem);align-items:end;
  min-height:clamp(460px,62vh,660px);padding-top:calc(var(--nav-h) + 4rem);padding-bottom:clamp(2.5rem,4vw,3.5rem)}
.shero-h{font-size:clamp(2.6rem,5vw,4.15rem);font-weight:650;letter-spacing:-.038em;line-height:1.02;color:#fff;max-width:16ch}
.shero-note p{font-size:1rem;line-height:1.66}


/* =========================================================
   METHOD RAIL
   ========================================================= */
.sec--mrail{overflow-x:clip}
.mrail-bleed{padding-left:max(var(--gutter),calc((100vw - var(--maxw))/2));padding-right:0;position:relative;z-index:2}
.mrail-split{display:grid;grid-template-columns:400px minmax(0,1fr);gap:clamp(3rem,6vw,5rem);align-items:start}
.mrail-head .h-sec{max-width:14ch}
.mrail-head .sec-intro{margin-top:1.4rem}
.mrail-nav{display:flex;align-items:center;gap:1.35rem;margin-top:2.5rem}
.mrail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-right:var(--gutter);
  scrollbar-width:none;-ms-overflow-style:none}
.mrail::-webkit-scrollbar{display:none}
.mcard{flex:0 0 min(340px,80vw);scroll-snap-align:start;min-height:420px;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);padding:2.4rem 2.25rem}
.mc-n{font-size:2.5rem;font-weight:600;letter-spacing:-.05em;line-height:.9;color:var(--ink)}
.mc-t{margin-top:1.75rem;font-size:1.44rem;font-weight:600;letter-spacing:-.022em;line-height:1.24;color:var(--ink)}
.mc-d{margin-top:1rem;font-size:.97rem;line-height:1.64;color:var(--body)}
.mcard--ink{background:var(--space-800);border-color:var(--space-800)}
.mcard--ink .mc-n,.mcard--ink .mc-t{color:#fff}
.mcard--ink .mc-d{color:rgba(255,255,255,.76)}

@media(max-width:1000px){
  .shero-inner{grid-template-columns:1fr;gap:1.75rem;align-items:start}
  .shero-h{max-width:20ch}
  .mrail-split{grid-template-columns:1fr;gap:2.25rem}
  .mrail-bleed{padding-left:var(--gutter)}
  .mrail-head .h-sec{max-width:22ch}
}


/* hero placeholder label legibility */
.shero-ph span{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.3)}


/* ---- Services page corrections ---- */
/* origin story on white, ink type */
.slab--origin{background:#fff;border:1px solid var(--hair)}
.or-split .h-sec{color:var(--ink)}
.or-lead{color:var(--ink)}
.or-p{color:var(--body)}
.or-photo{border-color:var(--lavender-deep);background:var(--page-tint)}
.or-photo .ph-pill{color:var(--body)}

/* engagement cards: two per row, roomy — never four skinny columns */
.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}


.svc-term{flex:none}


/* packages heading is on a light ground */
.sec--svc .h-sec,.sec--svc .sec-intro{color:var(--ink)}


@media(max-width:1200px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){
  
  
}


/* services hero: legible over the teal photo */
.shero-scrim{background:linear-gradient(180deg,rgba(9,15,41,.68) 0%,rgba(9,15,41,.5) 38%,rgba(9,15,41,.8) 72%,rgba(9,15,41,.94) 100%)}
.shero-note{background:rgba(9,15,41,.72);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-card);
  padding:1.5rem 1.6rem}
.shero-note p{color:#fff}
.shero-note p + p{margin-top:.8rem;color:rgba(255,255,255,.88)}


/* ---- engagements 16a: wide 2x2, CTA pinned to a foot rule ---- */
.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.svc{padding:2.5rem}
.svc-head{flex-direction:row;justify-content:space-between;border-bottom:1px solid var(--hair);min-height:0}

.svc-term{align-self:auto}
.svc-fit{max-width:none;min-height:0}


.svc-cta{order:9;margin-top:auto;padding-top:0;width:100%;justify-content:center;align-self:stretch}

.svc{position:relative}
@media(max-width:820px){
  .svc-grid{grid-template-columns:1fr}
  
  .svc-head{flex-direction:column;align-items:flex-start;gap:.85rem}
  .svc-name{font-size:1.42rem}
}


/* origin story photo */
.or-photo--real{border:0;background:var(--space-900);padding:0;display:block;overflow:hidden;border-radius:var(--r-card)}
.or-photo--real img{width:100%;height:100%;object-fit:cover;display:block}


/* engagements band on navy so the white cards stand out */
.sec--svc{background:linear-gradient(180deg,var(--space-900),var(--space-800)) !important}
.sec--svc .h-sec{color:#fff}
.sec--svc .sec-intro{color:rgba(255,255,255,.74)}
#alternatives{background:var(--white) !important}


/* engagement term pills: legible blue on the pale blue fill */
.svc-term{color:var(--blue-hover);font-size:.72rem}


/* ---- What you keep (18c) ---- */
.sec--keep .keep-label{display:block;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--body)}
.keep-h{margin-top:1.6rem;font-size:clamp(2.2rem,4vw,3.35rem);font-weight:600;letter-spacing:-.036em;
  line-height:1.08;color:var(--ink);max-width:22ch}
.keep-cols{margin-top:clamp(2.5rem,4.5vw,3.25rem);padding-top:clamp(1.75rem,3vw,2.1rem);
  border-top:1px solid var(--lavender-deep);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,5vw,4rem)}
.keep-cols p{font-size:1.03rem;line-height:1.7;color:var(--body)}
.keep-case{margin-top:clamp(2.25rem,4vw,2.75rem);padding-top:1.75rem;border-top:1px solid var(--lavender-deep);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3rem;align-items:center}
.keep-case p{font-size:1.06rem;line-height:1.6;color:var(--ink);max-width:70ch}
.keep-case .btn{white-space:nowrap}

/* hero: 15% taller */
.shero-inner{min-height:clamp(529px,71vh,759px)}

@media(max-width:900px){
  .keep-cols{grid-template-columns:1fr;gap:1.25rem}
  .keep-case{grid-template-columns:1fr;gap:1.5rem}
}


/* =========================================================
   ENGAGEMENTS — refined spacing (v4.4)
   ========================================================= */
.sec--svc{padding-top:clamp(4.5rem,8vw,7rem);padding-bottom:clamp(4.5rem,8vw,7rem)}
.sec--svc .svc-head-row{gap:clamp(3rem,6vw,5.5rem);
  padding-bottom:clamp(2.5rem,4vw,3.25rem);border-bottom:1px solid rgba(255,255,255,.16)}
.sec--svc .h-sec{max-width:19ch;font-size:clamp(2.2rem,3.6vw,3.05rem)}
.sec--svc .sec-intro{font-size:1.06rem;line-height:1.68}
.svc-grid{margin-top:clamp(2.75rem,4.5vw,3.5rem);gap:24px}

/* card rhythm: header → fit → included → list → cta, each step on its own beat */
.svc{padding:clamp(2.25rem,3vw,3rem);border-radius:10px}
.svc-head{gap:1.5rem;padding-bottom:1.5rem;align-items:flex-start}
.svc-name{font-size:clamp(1.45rem,1.9vw,1.72rem);line-height:1.18;letter-spacing:-.028em;max-width:15ch}
.svc-term{margin-top:.2rem;padding:.5rem .8rem;font-size:.72rem;letter-spacing:.1em;color:var(--blue-hover)}
.svc-fit{margin-top:1.6rem;font-size:1.04rem;line-height:1.66;color:var(--body)}
.svc-label{margin-top:2.1rem;padding-top:1.6rem;border-top:1px solid var(--hair);font-family:var(--font);font-size:1rem;font-weight:650;letter-spacing:-.012em;text-transform:none;color:var(--ink)}
.svc-list{margin-top:1.15rem;margin-bottom:2.25rem;gap:.85rem}
.svc-list li{gap:.75rem;font-size:1rem;line-height:1.55;color:var(--ink)}
.sv-ck{margin-top:5px}
.sv-ck svg{width:14px;height:14px}
.svc-note{margin-top:0;margin-bottom:2rem;padding-top:1.35rem;border-top:1px solid var(--hair);font-size:.95rem;line-height:1.62;color:var(--body)}
.svc-cta{padding:1.05rem 1.5rem;font-size:1.01rem}

@media(max-width:820px){
  .svc{padding:2.1rem 1.85rem}
  .svc-name{max-width:none}
  .svc-label{margin-top:1.8rem}
}

@media(min-width:1001px){.sec--svc .svc-head-row{grid-template-columns:minmax(0,1fr) 440px}}
@media(max-width:1000px){
  .sec--svc .svc-head-row{grid-template-columns:1fr;gap:1.4rem;align-items:start}
  .sec--svc .h-sec{max-width:22ch}
}


/* =========================================================
   WHO WE WORK WITH
   ========================================================= */
.logobar-note{margin-bottom:1.6rem;font-size:1.02rem;line-height:1.6;color:var(--body);max-width:60ch}

/* index of the four audiences */
.sec--audindex{padding-top:clamp(3rem,5vw,4.5rem);padding-bottom:clamp(3rem,5vw,4.5rem)}
.aud-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.aud-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);color:inherit;transition:border-color .2s var(--ease),background .2s var(--ease)}
.aud-card:hover{border-color:var(--ink);color:inherit}
.aud-n{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.1em;color:var(--blue)}
.aud-name{margin-top:1rem;font-weight:600;letter-spacing:-.022em;line-height:1.24;color:var(--ink)}
.aud-sum{font-size:.97rem;line-height:1.6;color:var(--body)}
.aud-jump{margin-top:auto;padding-top:1.6rem;display:inline-flex;align-items:center;gap:.5rem;font-size:.92rem;font-weight:600;color:var(--ink)}
.aud-jump svg{width:12px;height:12px;transition:transform .2s var(--ease)}
.aud-card:hover .aud-jump svg{transform:translate(2px,-2px)}

/* photo divider between segments */
.seg-photo{padding:0 var(--slab-inset)}
.segp{position:relative;margin:0;height:clamp(240px,30vw,400px);border-radius:var(--r-slab);overflow:hidden;
  background:linear-gradient(160deg,var(--space-700),var(--space-900));
  display:grid;place-items:center;padding:2rem;text-align:center}
.segp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.segp-label{position:absolute;left:clamp(1.5rem,3vw,2.5rem);bottom:clamp(1.25rem,2.5vw,2rem);
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff;z-index:2}
.segp .ph-pill{position:static;color:rgba(255,255,255,.7);background:none;border:1px dashed rgba(255,255,255,.3);
  border-radius:4px;padding:.6rem .9rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}

/* audience segments */
.sec--aud{padding-top:clamp(3.5rem,6vw,5rem);padding-bottom:clamp(3.5rem,6vw,5.5rem);scroll-margin-top:calc(var(--nav-h) + 1rem)}
.aud-split{display:grid;grid-template-columns:400px minmax(0,1fr);gap:clamp(3rem,6vw,5.5rem);align-items:start}
.aud-head{position:sticky;top:calc(var(--nav-h) + 2rem)}
.aud-idx{display:block;font-family:var(--mono);font-size:.82rem;font-weight:500;letter-spacing:.1em;color:var(--blue)}
.aud-head .h-sec{margin-top:1rem;max-width:14ch}
.aud-head .btn{margin-top:1.9rem}
.aud-lead{font-size:clamp(1.3rem,2.1vw,1.62rem);font-weight:550;letter-spacing:-.02em;line-height:1.4;color:var(--ink);max-width:34ch}
.aud-p{margin-top:1.2rem;font-size:1.04rem;line-height:1.72;color:var(--body);max-width:66ch}
.sec--aud .facc{margin-top:2.5rem;border-bottom:1px solid var(--hair)}
.sec--aud .facc-item{border-top:1px solid var(--hair)}
.sec--aud .facc-q{font-size:1.16rem;padding:1.35rem .9rem}
.sec--aud .facc-a p{max-width:68ch}

@media(max-width:1000px){
  .aud-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aud-split{grid-template-columns:1fr;gap:2rem}
  .aud-head{position:static}
  .aud-head .h-sec{max-width:22ch}
}
@media(max-width:600px){
  .aud-grid{grid-template-columns:1fr}
}


/* open accordion question: legible blue, site-wide */
.facc-item.open .facc-q,.pacc-item.open .pacc-q,.racc-item.open .racc-q{color:var(--blue-hover)}
.facc-item.open .facc-ic,.pacc-item.open .pacc-ic,.racc-item.open .racc-ic{color:var(--blue-hover)}


/* ---- who we work with v2 ---- */
.sec--audindex{padding-top:clamp(3rem,5vw,4rem)}
.aud-card{padding:0;overflow:hidden}
.aud-photo{display:grid;place-items:center;padding:1.25rem;text-align:center;background:linear-gradient(160deg,var(--space-700),var(--space-900));border-bottom:1px solid var(--hair)}

.aud-photo .ph-pill{position:static;background:none;border:1px dashed rgba(255,255,255,.28);border-radius:4px;padding:.5rem .7rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);line-height:1.4}
.aud-name{margin:0}


/* photo dividers align to the 1200px container, white margins either side */
.seg-photo{padding:0;background:var(--white)}
.seg-photo .segp{max-width:var(--maxw);margin:0 auto;width:calc(100% - var(--gutter) * 2);
  height:clamp(260px,32vw,420px);border-radius:var(--r-card)}


/* who-we-work-with hero: photo has a bright quadrant, so the scrim runs deeper */
.shero--who .shero-scrim{background:
  linear-gradient(180deg,rgba(9,15,41,.72) 0%,rgba(9,15,41,.62) 40%,rgba(9,15,41,.86) 75%,rgba(9,15,41,.96) 100%),
  linear-gradient(90deg,rgba(9,15,41,.4) 0%,rgba(9,15,41,.1) 55%,rgba(9,15,41,.55) 100%)}


/* hero note hugs its copy when the hero stacks */
@media(max-width:1000px){
  .shero-note{max-width:46ch;width:max-content;padding:1.25rem 1.4rem}
  .shero-note p{max-width:44ch}
}


/* real photography in the who-we-work-with dividers and cards */
.segp--real{background:var(--space-900);padding:0;display:block}
.segp--real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.segp-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,15,41,0) 40%,rgba(9,15,41,.72) 100%)}
.aud-photo img{display:block}


/* audience card photos fill the top panel edge to edge */
.aud-photo{padding:0;background:var(--page-tint);overflow:hidden}
.aud-photo:has(img){background:none}

.aud-photo .ph-pill{margin:1.25rem}
.aud-photo:not(:has(img)){background:linear-gradient(160deg,var(--space-700),var(--space-900));display:grid;place-items:center}


/* card photo panels: reuse the divider pattern so object-fit actually covers */
.aud-photo{position:relative}
.aud-photo:has(img){display:block}
.aud-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}


/* breathing room above every segment divider, so no photo touches the section above it */
.seg-photo{padding:clamp(3rem,5.5vw,4.5rem) 0 0}
.sec--aud{padding-top:clamp(2.5rem,4vw,3.25rem)}


/* audience cards span the same width as the divider photos below them */
.sec--audindex .container{max-width:none;padding-left:0;padding-right:0}
.aud-grid{max-width:var(--maxw);margin:0 auto;width:calc(100% - var(--gutter) * 2);gap:20px}
.aud-photo{height:205px}
.aud-name{padding:1.75rem 1.9rem 0;font-size:1.28rem}
.aud-sum{padding:0 1.9rem;margin-top:.9rem}
.aud-jump{padding:1.6rem 1.9rem 1.9rem}
@media(max-width:600px){.aud-photo{height:190px}}


/* =========================================================
   FEATURED IN
   ========================================================= */
.shero--featured .shero-inner{min-height:clamp(400px,52vh,540px)}

/* lead placement */
.sec--lead{padding-top:clamp(3rem,5vw,4.5rem)}
.lead-split{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.lead-photo{position:relative;margin:0;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;background:var(--space-900)}
.lead-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.lead-p{max-width:56ch}
.lead-meta{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--body)}

/* speaking ledger */
.fi-split{display:grid;grid-template-columns:400px minmax(0,1fr);gap:clamp(3rem,6vw,5.5rem);align-items:start}
.fi-head .h-sec{max-width:14ch}
.fi-head .sec-intro{margin-top:1.3rem}
.fi-ledger{border-bottom:1px solid var(--lavender-deep)}
.fi-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:2rem;padding:1.75rem 0;border-top:1px solid var(--lavender-deep)}
.fi-kind{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-hover);padding-top:.3rem}
.fi-title{margin:0;font-size:1.24rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.fi-note{margin-top:.7rem;font-size:1rem;line-height:1.62;color:var(--body);max-width:62ch}

/* articles + podcasts */
.fi-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.fi-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-card);padding:clamp(2rem,3vw,2.75rem)}
.fi-card-h{font-size:1.62rem;font-weight:600;letter-spacing:-.026em;line-height:1.18;color:var(--ink)}
.fi-card-p{margin-top:1rem;font-size:1.03rem;line-height:1.64;color:var(--body)}
.fi-empty{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--hair);
  font-size:.97rem;line-height:1.62;color:var(--body)}
.fi-link{margin-top:auto;padding-top:1.6rem}


/* two ways in */
.mode-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.mode-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);padding:clamp(2rem,3vw,2.75rem)}
.mode-card--alt{background:linear-gradient(180deg,var(--space-900),var(--space-800));border:0}
.mode-card h2{font-size:1.48rem;font-weight:600;letter-spacing:-.024em;line-height:1.22;color:var(--ink);max-width:24ch}
.mode-card p{margin-top:1.1rem;font-size:1.02rem;line-height:1.66;color:var(--body)}
.mode-card .btn{margin-top:auto;align-self:flex-start;margin-top:1.9rem}
.mode-card--alt h2{color:#fff}
.mode-card--alt p{color:rgba(255,255,255,.78)}

@media(max-width:1000px){
  .lead-split,.fi-split{grid-template-columns:1fr;gap:2.25rem}
  .fi-head .h-sec{max-width:22ch}
  .fi-pair,.mode-pair{grid-template-columns:1fr}
}
@media(max-width:680px){
  .fi-row{grid-template-columns:1fr;gap:.6rem}
}


/* =========================================================
   FEATURED IN v2 — original layout, current design language
   ========================================================= */
/* fill-in photo slots */
.fslot{position:relative;display:grid;place-items:center;padding:1.5rem;text-align:center;overflow:hidden;
  background:linear-gradient(160deg,var(--space-700),var(--space-900));border-radius:var(--r-card)}
.fslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fslot-note{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.5;color:rgba(255,255,255,.72);border:1px dashed rgba(255,255,255,.3);border-radius:4px;padding:.55rem .8rem}
.fslot--21x9{aspect-ratio:21/9}
.fslot--16x9{aspect-ratio:16/9;border-radius:var(--r-card) var(--r-card) 0 0}
.fslot--4x5{aspect-ratio:4/5}

/* fill-in text bits */
.fkick{display:block;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-hover)}
.fmeta{display:block;margin-top:.7rem;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--body)}
.fi-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.97rem;font-weight:600;color:var(--ink)}
.fi-link svg{width:12px;height:12px;transition:transform .2s var(--ease)}
.fi-link:hover{color:var(--blue-hover)}

/* lead placement card */
.sec--flead{padding-top:clamp(2.5rem,4vw,3.5rem);padding-bottom:clamp(2.5rem,4vw,3.5rem)}
.lead-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);
  align-items:center;background:#fff;border:1px solid var(--hair);border-radius:var(--r-slab);
  padding:clamp(1.25rem,2vw,1.6rem);color:inherit;transition:border-color .2s var(--ease)}
.lead-card:hover{border-color:var(--ink);color:inherit}
.lead-card .fslot{border-radius:var(--r-card)}
.lead-body{padding:0 clamp(.5rem,2vw,1.4rem) 0 0}
.lead-h{margin-top:.85rem;font-size:clamp(1.62rem,2.6vw,2.15rem);font-weight:600;letter-spacing:-.028em;line-height:1.14;color:var(--ink)}
.lead-p{margin-top:1rem;font-size:1.03rem;line-height:1.64;color:var(--body)}
.lead-card .fi-link{margin-top:1.5rem}
.lead-card:hover .fi-link svg{transform:translate(2px,-2px)}

/* articles grid */
.sec--fi .sec-head-row{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:clamp(2.5rem,5vw,4.5rem);
  align-items:end;text-align:left}
.sec--fi .h-sec{max-width:20ch}
.a-grid{margin-top:clamp(2.25rem,4vw,3rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.acard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden}
.acard-body{display:flex;flex-direction:column;flex:1;padding:1.75rem}
.acard-t{margin-top:.85rem;font-size:1.2rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.acard .fi-link{margin-top:auto;padding-top:1.5rem}

/* podcast / talk rows */
.prow-list{margin-top:clamp(2.25rem,4vw,3rem);border-bottom:1px solid var(--hair)}
.prow-list--flush{margin-top:0}
.prow{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:2rem;align-items:center;padding:1.6rem 0;border-top:1px solid var(--hair)}
.prow-kind{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-hover)}
.prow-outlet{display:block;font-size:.95rem;font-weight:550;color:var(--body)}
.prow-title{margin-top:.4rem;font-size:1.2rem;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.prow-main .fmeta{margin-top:.55rem}
.sec--fi[style*="lavender"] .prow,.sec--fi[style*="lavender"] .prow-list{border-color:var(--lavender-deep)}

/* speaking: sticky photo + rows */
.sv-grid{margin-top:clamp(2.25rem,4vw,3rem);display:grid;grid-template-columns:360px minmax(0,1fr);
  gap:clamp(2.5rem,5vw,4rem);align-items:start}
.sv-photo{position:sticky;top:calc(var(--nav-h) + 2rem)}

/* two ways in */
.mode-actions{margin-top:auto;padding-top:1.9rem;display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}
.mode-card .mode-actions .btn{margin-top:0}

@media(max-width:1000px){
  .lead-card{grid-template-columns:1fr;gap:1.5rem}
  .lead-body{padding:0 .75rem 1rem}
  .sec--fi .sec-head-row{grid-template-columns:1fr;gap:1.3rem;align-items:start}
  .a-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-grid{grid-template-columns:1fr}
  .sv-photo{position:static;max-width:360px}
}
@media(max-width:680px){
  .a-grid{grid-template-columns:1fr}
  .prow{grid-template-columns:1fr;gap:.65rem}
}


/* featured-in v2.1 refinements */
/* the two-card block now closes the page, so it gets closing-band weight */
.sec--close{padding-top:clamp(4rem,7vw,6rem);padding-bottom:clamp(4rem,7vw,6rem)}
.sec--close .mode-card{padding:clamp(2.25rem,3.2vw,3rem)}
.sec--close .mode-card h2{font-size:clamp(1.5rem,2.2vw,1.75rem)}

/* hero: this page's photo is a crop of the panel shot, so hold it shorter and darker */
.shero--featured .shero-inner{min-height:clamp(360px,44vh,480px)}
.shero--featured .shero-scrim{background:linear-gradient(180deg,rgba(9,15,41,.66) 0%,rgba(9,15,41,.5) 40%,rgba(9,15,41,.88) 100%)}

/* lead card: photo wider, body tighter — reads as one featured piece, not a 50/50 split */
.lead-card{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}

/* article cards: kicker sits above a hairline so the meta reads as a caption block */
.acard-body{padding:1.6rem 1.65rem 1.75rem}
.acard .fmeta{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--hair)}

/* rows: hover affordance, since each one is a link target */
.prow{transition:background .18s var(--ease)}
.prow:hover{background:rgba(255,255,255,.55)}
.sec--fi[style*="white"] .prow:hover{background:var(--page-tint)}
.prow:hover .prow-title{color:var(--blue-hover)}

/* speaking photo: taller so it holds the four rows beside it */
.fslot--4x5{aspect-ratio:4/4.6}


/* =========================================================
   FEATURED IN hero — full image, undarkened
   ========================================================= */
.fhero{padding:var(--slab-inset) var(--slab-inset) 0;background:var(--white)}
.fhero-frame{position:relative;max-width:var(--maxw);margin:0 auto;border-radius:var(--r-slab);overflow:hidden;
  background:var(--space-900);margin-top:var(--nav-h)}
.fhero-photo{display:block;width:100%;height:auto}
.fhero-card{position:absolute;left:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);
  max-width:min(46ch,calc(100% - 2 * clamp(1rem,2.5vw,2rem)));
  background:rgba(9,15,41,.86);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-card);
  padding:clamp(1.25rem,2.2vw,1.85rem) clamp(1.4rem,2.4vw,2.1rem)}
.fhero-h{font-size:clamp(2.1rem,3.6vw,3.1rem);font-weight:650;letter-spacing:-.036em;line-height:1.04;color:#fff}
.fhero-sub{margin-top:.85rem;font-size:1.03rem;line-height:1.6;color:#fff}
@media(max-width:680px){
  .fhero-card{position:static;max-width:none;margin:0;border:0;border-radius:0;background:var(--space-900)}
}


/* Featured in: fill-in slots are not yet links — show them as pending, not clickable */
.lead-card--todo{cursor:default}
.lead-card--todo:hover{border-color:var(--hair)}
.fi-link--todo{color:var(--body);cursor:default}
.fi-link--todo:hover{color:var(--body)}


/* =========================================================
   BENEFITS — what you leave with (Services)
   ========================================================= */
.ben-head{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}

.ben-lede p{font-size:1.06rem;line-height:1.66;color:var(--body)}
.ben-lede p + p{margin-top:1rem}
.ben-grid{margin-top:clamp(2.5rem,4.5vw,3.5rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ben-card{display:grid;grid-template-columns:78px minmax(0,1fr);gap:1.6rem;align-items:start;
  background:var(--page-tint);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:clamp(1.6rem,2.2vw,2rem);transition:border-color .18s var(--ease),background .18s var(--ease)}
.ben-card:hover{border-color:var(--lavender-deep);background:var(--lavender)}
.ben-ic{display:grid;place-items:center;width:78px;height:78px;border-radius:var(--r-inner);
  background:#fff;border:1px solid var(--hair);color:var(--blue)}
.ben-ic svg{width:30px;height:30px;display:block}


@media(max-width:1000px){
  .ben-head{grid-template-columns:1fr;gap:1.4rem}
  .sec--ben .h-sec{max-width:24ch}
  .ben-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .ben-card{grid-template-columns:1fr;gap:1.1rem}
  .ben-ic{width:64px;height:64px}
  .ben-ic svg{width:26px;height:26px}
}


/* ---------- Benefits v2 — one tall photo + ticked rows ---------- */
.sec--ben .ben-head{display:block;max-width:900px}
.sec--ben .h-sec{max-width:24ch}
.sec--ben .ben-head .sec-intro{margin-top:1.4rem;max-width:70ch}
.sec--ben .ben-head .sec-intro + .sec-intro{margin-top:.9rem}
.ben-split{margin-top:clamp(2.75rem,5vw,3.75rem);display:grid;grid-template-columns:440px minmax(0,1fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.ben-photo{position:relative;margin:0;aspect-ratio:4/5.2;border-radius:var(--r-card);overflow:hidden;
  background:var(--space-900)}
.ben-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ben-list{border-bottom:1px solid var(--lavender-deep)}
.ben-row{padding:1.65rem 0;border-top:1px solid var(--lavender-deep)}
.ben-row--first{border-top:1px solid var(--ink)}
.ben-t{display:flex;align-items:flex-start;gap:.85rem;font-size:1.5rem;font-weight:600;letter-spacing:-.024em;line-height:1.24;color:var(--ink)}
.ben-ck{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-top:2px;border-radius:50%;
  background:#E7F3EC;color:#1B6E44}
.ben-ck svg{width:14px;height:14px;display:block}
.ben-p{margin-top:.7rem;padding-left:calc(26px + .85rem);font-size:1rem;line-height:1.6;color:var(--body);max-width:66ch}
@media(max-width:1000px){
  .ben-split{grid-template-columns:1fr;gap:2.25rem}
  .ben-photo{max-width:440px;aspect-ratio:4/3}
}
@media(max-width:600px){
  .ben-t{font-size:1.24rem}
  .ben-p{padding-left:0}
}


/* benefits: tall column travels with the rows instead of leaving dead space */
.ben-photo{position:sticky;top:calc(var(--nav-h) + 2rem)}
@media(max-width:1000px){.ben-photo{position:static}}


/* benefits now sits on white */
.ben-list{border-bottom-color:var(--hair)}
.ben-row{border-top-color:var(--hair)}
.ben-row--first{border-top-color:var(--ink)}


/* benefits back on the pale tint */
.sec--ben .ben-list{border-bottom-color:var(--lavender-deep)}


/* ---------- Engagements on navy ---------- */
.sec--svc-dark{background:linear-gradient(180deg,var(--space-900),var(--space-800))}
.sec--svc-dark .h-sec{color:#fff}
.sec--svc-dark .sec-intro{color:rgba(255,255,255,.76)}
.sec--svc-dark .svc{background:#fff;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-card)}
.sec--svc-dark .svc-note{border-top-color:var(--hair)}

/* benefits back on white */
.sec--ben{background:var(--white)}
.sec--ben .ben-list{border-bottom-color:var(--hair)}
.sec--ben .ben-row{border-top-color:var(--hair)}
.sec--ben .ben-row--first{border-top-color:var(--ink)}

/* FAQ on white: hairlines follow */
.sec--faq .facc{border-bottom-color:var(--hair)}
.sec--faq .facc-item{border-top-color:var(--hair)}


/* ---------- Secondary routes (text links) ---------- */
.txt-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.97rem;font-weight:600;color:var(--ink);
  transition:color .15s var(--ease)}
.txt-link svg{flex:none;transition:transform .18s var(--ease)}
.txt-link:hover{color:var(--blue-hover)}
.txt-link:hover svg{transform:translateX(3px)}
.txt-link--block{display:inline-flex;margin-top:2.5rem}
.qrail-nav .txt-link,.mrail-nav .txt-link{margin-left:.25rem}
.aud-actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.aud-head .aud-actions{margin-top:1.75rem}

/* industries: a way through */
.ind-foot{margin-top:clamp(2rem,3.5vw,2.75rem);padding-top:1.75rem;border-top:1px solid var(--hair);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.ind-foot p{font-size:1.03rem;line-height:1.6;color:var(--body);max-width:52ch}


/* ---------- Client voice (single quote) ---------- */
.sec--voice .voice{margin:0;max-width:1000px}
.sec--voice blockquote{margin:0;font-size:clamp(1.35rem,2.3vw,1.85rem);font-weight:500;letter-spacing:-.022em;
  line-height:1.38;color:var(--ink)}
.sec--voice figcaption{margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--lavender-deep);
  display:flex;align-items:center;gap:.9rem}
.voice-av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--space-800);
  color:#fff;font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.04em}
.voice-who{display:flex;flex-direction:column;line-height:1.4}
.voice-who strong{font-size:1.03rem;font-weight:600;color:var(--ink)}
.voice-who span{font-size:.95rem;color:var(--body)}
.voice-more{margin-top:2rem}

/* the services page carries its own marquee */
.sec--svc-dark + .sec--voice{border-top:0}


/* =========================================================
   MOBILE LAYER — chrome, heroes, rhythm, touch
   One block, ordered widest → narrowest. Nothing above 940px is touched.
   ========================================================= */

/* --- global: stop iOS text inflation and grey tap flashes --- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}

/* --- notch/safe-area for the floating bar --- */
.nav{top:calc(var(--slab-inset) + env(safe-area-inset-top));
  left:calc(var(--slab-inset) + env(safe-area-inset-left));
  right:calc(var(--slab-inset) + env(safe-area-inset-right))}

@media(max-width:940px){
  /* the bar reads solid on mobile — translucency over photography looked unfinished */
  .nav-inner{background:#fff;border-color:var(--hair)}
  .nav.scrolled .nav-inner{background:#fff;border-color:var(--hair)}
  .nav-logo{font-size:1.14rem}

  /* dropdown panel: real elevation off the bar, scrollable, generous rows */
  .nav-menu{top:calc(100% + 8px);border-color:var(--hair);box-shadow:0 18px 40px -22px rgba(9,15,41,.35);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .nav.menu-open .nav-menu{max-height:min(70dvh,30rem)}
  .nav-menu a{display:flex;align-items:center;min-height:52px;padding:.95rem 1.15rem;
    font-size:1.02rem;font-weight:550;color:var(--ink)}
  .nav-menu a.active{color:var(--blue);background:var(--blue-soft)}
  .nav-toggle{display:grid;place-items:center}
  body.menu-lock{overflow:hidden}
}

@media(max-width:700px){
  /* --- vertical rhythm: 80px minimums made every page a long scroll --- */
  .sec{padding:clamp(3.25rem,11vw,5rem) 0}
  .cta-band{padding:clamp(3.25rem,11vw,5rem) 0}
  .sec--close{padding-top:clamp(3.25rem,11vw,5rem);padding-bottom:clamp(3.25rem,11vw,5rem)}
  .slab--pkg{padding:clamp(3rem,10vw,4.5rem) 0}

  /* --- homepage hero: let content set the height, don't force a viewport --- */
  .hero--full .slab{min-height:0;padding:calc(var(--nav-h) + 1.25rem) 0 2rem}
  .h-display{font-size:clamp(2.15rem,9vw,2.75rem);letter-spacing:-.032em}
  .hero-sub{font-size:1.02rem}
  .hero-copy{gap:1.15rem}

  /* --- photo-band heroes: the nav offset plus 4rem was pushing copy off-screen --- */
  .shero-inner{min-height:min(74dvh,520px);padding-top:calc(var(--nav-h) + 1.5rem);padding-bottom:2rem}
  .shero--featured .shero-inner{min-height:min(58dvh,420px)}
  .shero-h{font-size:clamp(2.05rem,8.6vw,2.7rem);max-width:none;letter-spacing:-.034em}
  .shero-note p{font-size:1.02rem}

  /* --- featured-in hero: card sits under the photo, joined to it --- */
  .fhero{padding:0 var(--slab-inset)}
  .fhero-frame{margin-top:calc(var(--nav-h) + .5rem)}
  .fhero-card{padding:1.4rem 1.25rem 1.5rem;border-radius:0}
  .fhero-h{font-size:clamp(1.95rem,8.4vw,2.5rem)}
  .fhero-sub{font-size:1rem}

  /* --- rails: card min-heights were taller than a phone viewport --- */
  .qcard,.mcard,.pkg,.tcar{min-height:0}
  .qc-q,.mc-t{font-size:1.3rem}

  /* --- section heads that sit beside a column collapse to stacked --- */
  .sec--fi .sec-head-row,.sec--svc .svc-head-row,.ben-head{gap:1.1rem}
}

@media(max-width:600px){
  /* the four proof figures read better 2×2 than as four stacked rows */
  .hero-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1.25rem}
  .hero-rail .hr-l{font-size:.68rem}
  .hero-rail .hr-v{font-size:2rem}

  /* long strings that can push the page sideways */
  .ftr-legal-links a,.prose a{overflow-wrap:anywhere}

  /* inputs below 16px make iOS zoom the whole page on focus */
  .nl-pill input,.ftr .nl-pill input,.cf-field input,.cf-field select,.cf-field textarea{font-size:16px}
}

@media(max-width:480px){
  /* thumb-reach: primary actions span the column instead of sitting half-width */
  .hero-ctas,.cta-actions,.mode-actions{width:100%}
  .hero-ctas .btn,.cta-actions .btn,.ind-foot .btn,.aud-actions .btn,.mode-card .btn,.keep-case .btn{
    width:100%;justify-content:center}
  .aud-actions{align-items:stretch}
  .ftr .nl-pill{flex-direction:column}
  .ftr .nl-pill .btn{width:100%;justify-content:center}

  /* the closing CTA and section heads get their own line lengths */
  .cta-sub{font-size:1rem}
  .ind-foot{flex-direction:column;align-items:stretch}
}

@media(max-width:380px){
  .hero-rail{grid-template-columns:1fr;gap:1.1rem}
  .h-display{font-size:2rem}
  .shero-h{font-size:1.92rem}
  .nav-logo{font-size:1.06rem}
  .nav-logo .owl{height:20px}
}


/* --- mobile fixes: hero track blowout + text-link touch targets --- */
@media(max-width:1000px){
  /* a max-content child was setting the track's automatic minimum and pushing
     the headline past the frame; minmax(0,1fr) stops any item expanding it */
  .shero-inner{grid-template-columns:minmax(0,1fr)}
  .shero-note{width:auto;max-width:min(46ch,100%)}
  .shero-h{max-width:min(20ch,100%)}
}
@media(max-width:700px){
  /* secondary routes are the only way through to the method, guides and case study
     on a phone — they need a real target, not a 26px line of text */
  .txt-link{min-height:44px;align-items:center}
  .txt-link--block{margin-top:1.75rem}
  .voice-more{margin-top:1.25rem}
}


/* =========================================================
   MOBILE LAYER 2 — sections that needed a different pattern
   ========================================================= */

/* --- outcomes: tabs above a 720px panel meant scrolling up to switch and
       back down to read. On mobile each audience becomes its own row. --- */
.os-stack{display:none}
@media(max-width:900px){
  .sec--otabs .otabs,.sec--otabs .os-panel{display:none}
  .os-stack{display:block;margin-top:clamp(2rem,7vw,2.75rem);border-bottom:1px solid var(--hair)}
  .osd{border-top:1px solid var(--hair)}
  .osd-q{display:flex;align-items:center;gap:.85rem;padding:1.15rem .2rem;cursor:pointer;list-style:none;
    font-family:var(--font);font-size:1.06rem;font-weight:550;letter-spacing:-.014em;color:var(--ink)}
  .osd-q::-webkit-details-marker{display:none}
  .osd-n{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;color:var(--body)}
  .osd-name{flex:1}
  .osd-ic{flex:none;width:18px;height:18px;color:var(--body);transition:transform .25s var(--ease),color .25s}
  .osd-ic svg{display:block;width:18px;height:18px}
  .osd[open] .osd-q{color:var(--blue)}
  .osd[open] .osd-ic{transform:rotate(45deg);color:var(--blue)}
  .osd-body{display:grid;gap:1px;background:var(--hair);border-radius:var(--r-card);overflow:hidden;
    margin:0 0 1.35rem}
  .osd-half{padding:1.4rem 1.35rem 1.5rem}
  .osd-half--before{background:var(--lavender)}
  .osd-half--after{background:#fff}
  .osd-half .os-ey{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.7rem;
    font-weight:500;letter-spacing:.14em;text-transform:uppercase;background:none;padding:0;border:0}
  .osd-half--before .os-ey{color:#8A5B57}
  .osd-half--after .os-ey{color:#1B6E44}
  .osd-half h3{margin-top:.9rem;font-size:1.22rem;font-weight:600;letter-spacing:-.02em;line-height:1.26}
  .osd-half--before h3{color:#5A6072}
  .osd-half--after h3{color:var(--ink)}
  .osd-half p{margin-top:.65rem;font-size:.98rem;line-height:1.6;color:var(--body)}
}

/* --- logo bars: badges and wordmarks needed separate optical scales,
       and the 38px bar was too thin to read as a band --- */
@media(max-width:820px){
  .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    padding:.35rem 0}
  .marquee-track{gap:2.4rem;align-items:center}
  .lc-logo{height:auto}
  .lc-logo--badge{height:34px;width:auto}
  .lc-logo--word{height:auto;max-height:21px;width:auto;max-width:124px}
  .marquee-head{margin-bottom:1.35rem}
  .marquee-head p{font-size:.97rem;line-height:1.55}
}
@media(max-width:480px){
  .marquee-track{gap:2rem}
  .lc-logo--badge{height:30px}
  .lc-logo--word{max-height:19px;max-width:108px}
}

/* --- benefits: body copy was hanging left of its own headline once the
       tick indent was dropped. Keep the row aligned as one unit. --- */
@media(max-width:600px){
  .ben-ck{width:22px;height:22px;margin-top:1px}
  .ben-ck svg{width:12px;height:12px}
  .ben-t{font-size:1.18rem;gap:.7rem;line-height:1.3}
  .ben-p{padding-left:calc(22px + .7rem);font-size:.98rem}
  .ben-row{padding:1.35rem 0}
  .ben-photo{aspect-ratio:16/10}
}

/* --- FAQ: 600-weight questions at 19px read as a wall on a phone --- */
@media(max-width:700px){
  .facc-q{font-size:1.09rem;font-weight:500;letter-spacing:-.012em;line-height:1.38;padding:1.25rem .7rem}
  .facc-item.open .facc-q{font-weight:550}
  .facc-a p{font-size:.98rem;line-height:1.62}
  .racc-q,.pacc-q{font-size:1.09rem;font-weight:500;line-height:1.38}
  .racc-item.open .racc-q,.pacc-item.open .pacc-q{font-weight:550}
}


/* --- logo bars, corrected: the contact page's two-row grid scopes .lc-logo at
       higher specificity, so the mobile sizes must be scoped to match. Wordmarks
       also get an explicit box so they reserve space before they load. --- */
@media(max-width:820px){
  .lc-logo--badge,
  .marquee-track .lc-logo--badge,
  .logobar-row .lc-logo--badge,
  .logobar-rows .lc-logo--badge{height:34px;width:auto;max-width:none}
  .lc-logo--word,
  .marquee-track .lc-logo--word,
  .logobar-row .lc-logo--word,
  .logobar-rows .lc-logo--word{height:19px;width:auto;max-height:none;max-width:124px}
  .logobar-rows .lc-logo--badge,.logobar-rows .lc-logo--word{margin:0 auto}
}
@media(max-width:480px){
  .lc-logo--badge,
  .marquee-track .lc-logo--badge,
  .logobar-row .lc-logo--badge,
  .logobar-rows .lc-logo--badge{height:30px}
  .lc-logo--word,
  .marquee-track .lc-logo--word,
  .logobar-row .lc-logo--word,
  .logobar-rows .lc-logo--word{height:17px;max-width:108px}
}


/* --- hero eyebrow: 43 characters at nowrap measured 346px inside a 315px
       column, so the pill was sliced by the slab. Let it wrap into a
       two-line pill instead of trimming the label. --- */
@media(max-width:700px){
  .chip{white-space:normal;max-width:100%;line-height:1.4;align-items:flex-start;
    padding-top:.5rem;padding-bottom:.5rem;text-wrap:pretty}
  .chip svg,.chip > span:first-child{margin-top:.22rem}
}
@media(max-width:480px){
  .chip{font-size:.82rem;padding-left:.85rem;padding-right:.95rem}
}


/* wrapping kept the label but a 3-line pill reads as a mistake; on phones the
   hero eyebrow drops its frame and becomes a plain label line with the spark */
@media(max-width:560px){
  .hero-copy--left .chip,.hero-copy .chip--dark{background:none;border:0;padding:0;
    font-size:.8rem;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.82);gap:.6rem;
    line-height:1.45;max-width:34ch}
  .hero-copy--left .chip svg,.hero-copy .chip--dark svg{margin-top:.2rem}
}


/* =========================================================
   MOBILE LAYER 3 — chrome, hero proportion, logo legibility
   ========================================================= */

@media(max-width:940px){
  /* 1. the Apply pill leaves the bar: logo + menu only */
  .nav-cta{display:none}
  .nav-inner{gap:1rem;justify-content:space-between}

  /* 2. the white line under the bar was the CLOSED dropdown: max-height:0 with
        overflow:hidden still paints its top+bottom borders as a 2px strip.
        Borders and shadow now belong to the open state only. */
  .nav-menu{border:0;box-shadow:none;background:#fff}
  .nav.menu-open .nav-menu{border:1px solid var(--hair);
    box-shadow:0 18px 40px -22px rgba(9,15,41,.35)}
  /* and the legacy nav border can never resurface */
  .nav,.nav.scrolled{border:0;box-shadow:none}
}

@media(max-width:700px){
  /* 3. headline carries the hero; sub-copy steps back to a clear second voice */
  .h-display{font-size:clamp(2.2rem,9.2vw,2.8rem);line-height:1.05;letter-spacing:-.034em}
  .hero-sub{font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.76);max-width:38ch}
  .shero-h{font-size:clamp(2.1rem,8.8vw,2.75rem);line-height:1.06;letter-spacing:-.034em}
  .shero-note p{font-size:.98rem;line-height:1.6;max-width:40ch}
  .fhero-h{font-size:clamp(2rem,8.6vw,2.55rem);line-height:1.06}
  .fhero-sub{font-size:.97rem;line-height:1.58}

  /* 4. hero actions: one solid pill, the second choice as a quiet link under it.
        Two stacked full-width buttons read as a form, not a hero. */
  .hero-ctas{flex-direction:column;align-items:stretch;gap:.85rem;margin-top:1.6rem;width:100%}
  .hero-ctas .btn{width:100%;justify-content:center;padding:1rem 1.4rem;font-size:1rem}
  .hero-ctas .btn--ghost{background:none;border:0;padding:.2rem 0;width:auto;
    align-self:center;font-size:.97rem;font-weight:600;color:#fff;
    text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);
    text-underline-offset:5px;text-decoration-thickness:1px}
  .hero-ctas .btn--ghost:hover{background:none;border:0;color:#fff;
    text-decoration-color:#fff}
  .hero--photo .hero-ctas{align-items:stretch}
  .hero--photo .hero-ctas .btn--ghost{align-self:flex-start}
}

/* 5. logos ~18% larger — fewer in view, each one readable */
@media(max-width:820px){
  .lc-logo--badge,
  .marquee-track .lc-logo--badge,
  .logobar-row .lc-logo--badge,
  .logobar-rows .lc-logo--badge{height:40px}
  .lc-logo--word,
  .marquee-track .lc-logo--word,
  .logobar-row .lc-logo--word,
  .logobar-rows .lc-logo--word{height:23px;max-width:148px}
  .marquee-track{gap:2.75rem}
  .marquee{padding:.5rem 0}
}
@media(max-width:480px){
  .lc-logo--badge,
  .marquee-track .lc-logo--badge,
  .logobar-row .lc-logo--badge,
  .logobar-rows .lc-logo--badge{height:36px}
  .lc-logo--word,
  .marquee-track .lc-logo--word,
  .logobar-row .lc-logo--word,
  .logobar-rows .lc-logo--word{height:21px;max-width:132px}
  .marquee-track{gap:2.4rem}
}


/* homepage hero: .hero--photo scoping outranked the mobile sizes, so the
   headline and sub stayed on their desktop scale. Match the other heroes. */
@media(max-width:700px){
  .hero--photo .h-display{font-size:clamp(2.2rem,9.2vw,2.8rem);line-height:1.05;
    letter-spacing:-.034em;max-width:none}
  .hero--photo .hero-sub{font-size:.98rem;line-height:1.6;max-width:38ch;
    color:rgba(255,255,255,.76)}
}


/* =========================================================
   MOBILE LAYER 4 — button scale, headline-led heroes
   ========================================================= */

@media(max-width:700px){
  /* headline leads: with the second paragraph gone these can run bigger */
  .shero-h{font-size:clamp(2.5rem,11vw,3.2rem);line-height:1.02;letter-spacing:-.038em}
  .shero--who .shero-h{font-size:clamp(2.7rem,12vw,3.5rem)}
  .shero--who .shero-inner{min-height:min(62dvh,440px)}
  .shero-note{max-width:34ch}
  .shero-note p{font-size:1rem;line-height:1.58}
  .shero-note p + p{margin-top:.75rem}
}

@media(max-width:480px){
  /* buttons size to their label — full-bleed pills read as form controls */
  .hero-ctas,.cta-actions,.mode-actions{width:auto}
  .hero-ctas .btn,.cta-actions .btn,.ind-foot .btn,.aud-actions .btn,
  .mode-card .btn,.keep-case .btn,.fq-head .btn{width:auto;justify-content:center}
  .btn{padding:.92rem 1.45rem;font-size:.97rem}

  /* two actions sit side by side when they fit, wrap when they don't */
  .cta-actions,.mode-actions,.aud-actions{display:flex;flex-wrap:wrap;gap:.7rem .8rem;
    align-items:center;width:auto}
  .hero-ctas{flex-direction:column;align-items:flex-start;gap:1rem}
  .hero-ctas .btn{align-self:flex-start}

  /* newsletter: the field takes the width, the button takes its label */
  .ftr .nl-pill,.nl-pill{flex-direction:row;flex-wrap:nowrap;gap:.6rem;align-items:stretch}
  .ftr .nl-pill input,.nl-pill input{flex:1 1 auto;min-width:0}
  .ftr .nl-pill .btn,.nl-pill .btn{flex:0 0 auto;width:auto;padding:.9rem 1.2rem;
    justify-content:center;white-space:nowrap}
}

@media(max-width:380px){
  /* only here does the field need its own line */
  .ftr .nl-pill,.nl-pill{flex-wrap:wrap}
  .ftr .nl-pill input,.nl-pill input{flex:1 1 100%}
  .ftr .nl-pill .btn,.nl-pill .btn{flex:1 1 100%;width:100%}
}


/* stacked action blocks were stretching their button via align-items:stretch */
@media(max-width:480px){
  .ind-foot{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .keep-case,.mode-card,.fq-head{align-items:flex-start}
  .ind-foot .btn,.keep-case .btn,.mode-card .btn,.fq-head .btn{align-self:flex-start;width:auto}
}


/* .keep-case is a grid: its button needs justify-self, not align-self */
@media(max-width:480px){
  .keep-case{justify-items:start}
  .keep-case .btn{justify-self:start;align-self:start;width:auto}
}


/* =========================================================
   MOBILE LAYER 5 — logo legibility, benefits order, case copy
   ========================================================= */

/* second row is mobile-only */
.marquee--rev{display:none}
@keyframes marquee-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}

@media(max-width:820px){
  /* two rows, counter-rotating: each mark can be much larger and still read */
  .marquee--rev{display:block;margin-top:.9rem}
  .marquee-track--rev{animation:marquee-rev 46s linear infinite}

  .lc-logo--badge,
  .marquee-track .lc-logo--badge,
  .logobar-row .lc-logo--badge,
  .logobar-rows .lc-logo--badge{height:48px}
  .lc-logo--word,
  .marquee-track .lc-logo--word,
  .logobar-row .lc-logo--word,
  .logobar-rows .lc-logo--word{height:28px;max-width:186px}
  .marquee-track{gap:3rem}
  .marquee{padding:.4rem 0}
}
@media(max-width:480px){
  .lc-logo--badge,
  .marquee-track .lc-logo--badge,
  .logobar-row .lc-logo--badge,
  .logobar-rows .lc-logo--badge{height:44px}
  .lc-logo--word,
  .marquee-track .lc-logo--word,
  .logobar-row .lc-logo--word,
  .logobar-rows .lc-logo--word{height:26px;max-width:168px}
  .marquee-track{gap:2.6rem}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track--rev{animation:none}
}

/* --- benefits: the photo was sticky, so the rows travelled over it and the
       copy sat on the image with no contrast. Photo is now a band ABOVE the
       rows, full width, and never shares space with type. --- */
.sec--ben .ben-photo{position:static;top:auto}
.sec--ben .ben-split{display:block;margin-top:clamp(2.25rem,4vw,3rem)}
.sec--ben .ben-photo{max-width:none;aspect-ratio:21/8;margin:0 0 clamp(2rem,3.5vw,2.75rem)}
.sec--ben .ben-photo img{object-position:50% 45%}
.sec--ben .ben-list{max-width:none}
@media(min-width:901px){
  /* two columns of rows on wide screens so the list doesn't run 1200px long */
  .sec--ben .ben-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(2.5rem,5vw,4.5rem);border-bottom:0}
  .sec--ben .ben-row{border-top:1px solid var(--hair)}
  .sec--ben .ben-row--first{border-top:1px solid var(--ink)}
  .sec--ben .ben-row:nth-child(2){border-top:1px solid var(--ink)}
}
@media(max-width:700px){
  .sec--ben .ben-photo{aspect-ratio:16/9;margin-bottom:1.75rem}
}

/* --- case study body copy: one step down --- */
.case-body p{font-size:.99rem;line-height:1.72}
@media(max-width:700px){
  .case-body p{font-size:.95rem;line-height:1.68}
}


/* =========================================================
   MOBILE LAYER 6 — M1 hero, single prominent logo bar
   ========================================================= */

/* --- M1 "one axis": the note card is gone; headline and paragraph share one
       left edge, divided by a hairline, so reading order is forced. --- */
@media(max-width:700px){
  .shero .shero-note{background:none;border:0;border-radius:0;padding:0;
    max-width:none;width:auto;margin-top:1.1rem;padding-top:1.1rem;
    border-top:1px solid rgba(255,255,255,.22)}
  .shero .shero-note p{font-size:.97rem;line-height:1.6;max-width:42ch;
    color:rgba(255,255,255,.8)}
  .shero .shero-note p + p{margin-top:.7rem}
  .shero--who .shero-note{border-top:0;padding-top:0}
}

/* --- one bar, one direction, marks 28% larger again --- */
.marquee--rev{display:none}
@media(max-width:820px){
  .marquee--rev{display:none}
  .lc-logo--badge,
  .marquee-track .lc-logo--badge,
  .logobar-row .lc-logo--badge,
  .logobar-rows .lc-logo--badge{height:62px}
  .lc-logo--word,
  .marquee-track .lc-logo--word,
  .logobar-row .lc-logo--word,
  .logobar-rows .lc-logo--word{height:36px;max-width:238px}
  .marquee-track{gap:3.25rem}
  .marquee{padding:.6rem 0}
  .marquee-head{margin-bottom:1.5rem}
}
@media(max-width:480px){
  .lc-logo--badge,
  .marquee-track .lc-logo--badge,
  .logobar-row .lc-logo--badge,
  .logobar-rows .lc-logo--badge{height:56px}
  .lc-logo--word,
  .marquee-track .lc-logo--word,
  .logobar-row .lc-logo--word,
  .logobar-rows .lc-logo--word{height:33px;max-width:214px}
  .marquee-track{gap:2.9rem}
}


/* =========================================================
   MOBILE LAYER 7 — two real CTAs, copy scale, 3-up stat rail
   ========================================================= */

/* --- both hero actions stay buttons: the ghost becomes an outlined pill,
       not an underlined link. Auto width, wrapping if needed. --- */
@media(max-width:700px){
  .hero-ctas{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.7rem .75rem;
    width:auto;margin-top:1.6rem}
  .hero-ctas .btn{width:auto;justify-content:center;padding:.92rem 1.4rem;font-size:.96rem}
  .hero-ctas .btn--ghost{background:none;border:1px solid rgba(255,255,255,.42);
    padding:.92rem 1.4rem;width:auto;align-self:auto;font-size:.96rem;font-weight:600;
    color:#fff;text-decoration:none}
  .hero-ctas .btn--ghost:hover{background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.42);color:#fff;text-decoration:none}
  .hero--photo .hero-ctas{align-items:center}
  .hero--photo .hero-ctas .btn--ghost{align-self:auto}

  /* secondary routes elsewhere read as buttons too, not quiet links */
  .aud-actions .txt-link,.fq-head .txt-link,.mode-actions .txt-link,.ind-foot .txt-link{
    border:1px solid var(--hair);border-radius:var(--r-pill);
    padding:.85rem 1.3rem;font-size:.95rem;background:#fff;color:var(--ink)}
  .aud-actions .txt-link:hover,.fq-head .txt-link:hover,
  .mode-actions .txt-link:hover,.ind-foot .txt-link:hover{
    background:var(--blue-soft);border-color:var(--blue-border);color:var(--ink)}
  .aud-actions .txt-link svg,.fq-head .txt-link svg{transform:none}
  .on-dark .aud-actions .txt-link,.on-dark .mode-actions .txt-link{
    background:none;border-color:rgba(255,255,255,.34);color:#fff}
}
@media(max-width:480px){
  .hero-ctas .btn,.hero-ctas .btn--ghost{padding:.88rem 1.25rem;font-size:.94rem}
}

/* --- body copy: bring every long-form class to the case-study scale (.95rem),
       which is the size signed off on the homepage. --- */
@media(max-width:700px){
  .sec-intro,.founder-bio p,.fi-note,.fi-card-p,.fi-empty,.mode-card p,
  .prose-col p,.dir-body p,.lw-cell p,.tfacts .tf-line,.mtd-tease,.mtd-line,
  .offer-line,.offer-out,.diag-text,.qc-body,.qc-test,.pkg-fit,.svc-fit,
  .ben-lede p,.ol-line,.ol-foot,.seg-outs .lw-cell p,.voice-more,
  .keep-case p,.ind-foot p,.marquee-head p,.cta-sub,.osd-half p{
    font-size:.95rem;line-height:1.62}
  .ben-p,.facc-a p,.racc-a p,.pacc-a p{font-size:.95rem;line-height:1.62}
  .svc-feat li,.pkg-feat li,.ben-list .ben-p{font-size:.95rem}
  .ftr-brand p,.ftr-col a,.ftr-col span,.ftr-nl .nl-sub{font-size:.94rem}
}

/* --- hero rail: three figures, one row, side by side --- */
@media(max-width:900px){
  .hero-rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
}
@media(max-width:600px){
  .hero-rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
  .hero-rail .hr-l{font-size:.62rem;letter-spacing:.08em;line-height:1.35}
  .hero-rail .hr-v{font-size:1.6rem;letter-spacing:-.03em}
}
@media(max-width:380px){
  .hero-rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
  .hero-rail .hr-v{font-size:1.4rem}
  .hero-rail .hr-l{font-size:.58rem}
}


/* hero rail labels were 9.92px uppercase with wide tracking in a 102px cell —
   three lines and mismatched cell heights. Bigger, tighter, brighter, and the
   figures share one baseline regardless of label line count. */
@media(max-width:600px){
  .hero-rail{align-items:start;gap:.85rem}
  .hero-rail > div{display:flex;flex-direction:column;height:100%}
  .hero-rail .hr-l{font-size:.7rem;letter-spacing:.03em;line-height:1.3;
    color:rgba(255,255,255,.82);min-height:2.6em}
  .hero-rail .hr-v{margin-top:auto;padding-top:.5rem;font-size:1.75rem}
}
@media(max-width:380px){
  .hero-rail{gap:.7rem}
  .hero-rail .hr-l{font-size:.66rem;min-height:3.9em}
  .hero-rail .hr-v{font-size:1.5rem}
}


/* =========================================================
   MOBILE LAYER 8 — M1 hero as approved: low block, rule, copy, CTA
   ========================================================= */
.shero-cta{margin-top:1.6rem}

@media(max-width:700px){
  /* the copy block sits LOW in a taller slab, not pinned to the top */
  .shero .shero-inner{align-items:end;justify-items:start;
    min-height:min(86dvh,660px);
    padding-top:calc(var(--nav-h) + 3.5rem);padding-bottom:2.25rem}
  .shero--who .shero-inner{min-height:min(80dvh,600px)}
  .shero--featured .shero-inner{min-height:min(66dvh,480px)}

  /* headline → hairline → copy → button, tight as one group */
  .shero .shero-note{margin-top:1.35rem;padding-top:1.35rem;
    border-top:1px solid rgba(255,255,255,.28)}
  .shero--who .shero-note{border-top:1px solid rgba(255,255,255,.28);padding-top:1.35rem}
  .shero .shero-cta{margin-top:1.5rem;width:auto;justify-content:center;
    padding:.95rem 1.45rem;font-size:.96rem}
  .shero .shero-note p + .shero-cta{margin-top:1.5rem}
}
@media(max-width:380px){
  .shero .shero-inner{padding-top:calc(var(--nav-h) + 2.5rem)}
}


/* the grid's two rows were stretching to fill the 660px slab, so the headline
   sat at the foot of an over-tall row 1 with a 131px void before the copy.
   Rows now size to content and the whole group anchors to the bottom. */
@media(max-width:700px){
  .shero .shero-inner{grid-template-rows:auto auto;align-content:end;row-gap:0}
  .shero .shero-note{margin-top:1.1rem;padding-top:1.1rem}
}


/* =========================================================
   MOBILE LAYER 9 — contact, legal and featured-in polish
   ========================================================= */

/* contact: the 6+5 logo grid became a wall of tiny marks on a phone.
   One rotating bar instead, matching every other page. */
.logobar-mq{display:none}
@media(max-width:820px){
  .logobar-rows{display:none}
  .logobar-mq{display:block;overflow:hidden;padding-top:1.5rem;
    border-top:1px solid var(--hair);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .logobar-mq-track{display:flex;align-items:center;gap:2.9rem;width:max-content;
    padding:.5rem 0;animation:marquee 46s linear infinite}
  .logobar-mq .lc-logo{opacity:1;filter:none;margin:0}
}
@media(prefers-reduced-motion:reduce){.logobar-mq-track{animation:none}}

/* the form brief loses its warning row: tighten what remains */
@media(max-width:700px){
  .fm-notes p{font-size:.9rem;line-height:1.55}
  .fm-brief-sub{font-size:.95rem;line-height:1.62}
  .fm-facts dt{font-size:.72rem}
  .fm-facts dd{font-size:.95rem}
}

/* --- legal pages: the section index is the main mobile weakness.
       It sat as a bare two-column link list above 25 sections. --- */
@media(max-width:900px){
  .lg-toc{grid-template-columns:1fr;gap:0;padding:1.1rem 1.15rem;
    background:var(--page-tint);border:1px solid var(--hair);border-radius:var(--r-card)}
  .lg-toc-h{margin:0 0 .35rem;padding-bottom:.75rem;border-bottom:1px solid var(--hair)}
  .lg-toc a{display:flex;align-items:center;min-height:44px;padding:.55rem .2rem;
    margin:0;border-left:0;border-bottom:1px solid var(--hair);font-size:.95rem}
  .lg-toc a:last-child{border-bottom:0}
  .lg-toc a.on{border-left:0;color:var(--blue)}
}
@media(max-width:700px){
  /* the hanging section numeral was pulled 3.4rem into the left margin,
     off-canvas on a phone — inline it above the heading instead */
  .lg-n{position:static;left:auto;top:auto;display:block;margin-bottom:.4rem;font-size:.72rem}
  .lg-sec h2{font-size:1.3rem;line-height:1.3}
  .lg-sec p,.lg-list li{font-size:.95rem;line-height:1.68}
  .lg-body{max-width:none}
  .lg-doc-head{padding-bottom:1.75rem}
  .prose p,.prose li{font-size:.95rem;line-height:1.68}
  .prose h2{font-size:1.3rem;margin:1.9rem 0 .7rem}
}

/* --- featured-in: the fill-in rows and cards on a phone --- */
@media(max-width:700px){
  .lead-card{padding:1rem}
  .lead-h{font-size:1.55rem;line-height:1.15}
  .lead-p{font-size:.95rem;line-height:1.62}
  .prow{padding:1.25rem 0}
  .prow-title{font-size:1.12rem;line-height:1.32}
  .prow-outlet{font-size:.9rem}
  .fi-card{padding:1.6rem 1.4rem}
  .fi-card-h{font-size:1.42rem}
  .acard-body{padding:1.4rem 1.35rem 1.5rem}
  .acard-t{font-size:1.12rem}
  .fslot-note{font-size:.62rem;padding:.45rem .65rem}
  .sv-photo{max-width:none}
}


/* the 1.35fr lead-card split was written unmediated and therefore beat the
   mobile collapse, leaving a 124px text column. Scope it to desktop and
   re-assert one column below it. */
@media(min-width:1001px){
  .lead-card{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}
@media(max-width:1000px){
  .lead-card{grid-template-columns:1fr}
}
@media(max-width:700px){
  .lead-card{grid-template-columns:1fr}
  /* slot instructions are the copy the user still has to act on — same
     legibility floor as the hero rail labels */
  .fslot-note{font-size:.72rem;letter-spacing:.06em;line-height:1.45;
    padding:.5rem .75rem;color:rgba(255,255,255,.86)}
  .lead-card .fslot{aspect-ratio:16/9}
  .fslot--21x9{aspect-ratio:16/9}
}


/* =========================================================
   PAIRED CTAs — outlined secondary pill, consistent gap
   Every secondary route reads as a button, at the same
   spacing, on every ground.
   ========================================================= */
.aud-actions,.mode-actions,.ind-foot,.cta-actions,.hero-ctas,.keep-case{gap:1rem}
.aud-actions{gap:1rem;align-items:center}

.txt-link{padding:.9rem 1.4rem;border:1px solid var(--ink);border-radius:var(--r-pill);
  background:none;color:var(--ink);font-size:.97rem;font-weight:600;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.txt-link:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--ink)}
.txt-link:hover svg{transform:none}
.on-dark .txt-link,.slab .txt-link,.cta-band .txt-link{border-color:rgba(255,255,255,.5);color:#fff}
.on-dark .txt-link:hover,.slab .txt-link:hover,.cta-band .txt-link:hover{
  background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* stacked pairs: a full row of air between the two pills */
.aud-actions{flex-wrap:wrap;row-gap:1rem}
.mode-actions{row-gap:1rem}
.ind-foot{row-gap:1.1rem}

/* the method rail link sits under the pager, not glued to it */
.qrail-nav{flex-wrap:wrap;gap:1rem 1.25rem}
.qrail-nav + .txt-link{margin-top:1.4rem;margin-left:0;padding:.75rem 1.2rem;font-size:.93rem}

@media(max-width:900px){
  .aud-actions{flex-direction:column;align-items:flex-start;gap:.9rem}
  .aud-actions .btn,.aud-actions .txt-link{width:auto}
}
@media(max-width:700px){
  .txt-link{padding:.85rem 1.3rem;font-size:.95rem}
  .aud-actions .txt-link,.fq-head .txt-link,.mode-actions .txt-link,.ind-foot .txt-link{
    border-color:var(--ink);background:none;color:var(--ink)}
  .aud-actions .txt-link:hover,.mode-actions .txt-link:hover,.ind-foot .txt-link:hover{
    background:var(--blue-soft);border-color:var(--blue);color:var(--ink)}
}

/* Services testimonials: single column, no facts panel */
.tsplit--solo{grid-template-columns:minmax(0,1fr);max-width:920px}


/* client voice band: rotation controls sit with the attribution, wide band unchanged */
.sec--voice figcaption{flex-wrap:wrap;gap:.9rem}
.voice-nav{margin-left:auto;display:flex;gap:.6rem;flex:none}
.sec--voice .voice{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.sec--voice blockquote{min-height:4.2em}
@media(max-width:700px){
  .sec--voice blockquote{min-height:0}
  .voice-nav{margin-left:0}
}


/* --- nav: one breakpoint governs the whole collapse. The toggle appeared at
       940px while the menu only collapsed at 920px, so 921–940px showed both
       and wrapped the bar to 110px against a 74px --nav-h. --- */
@media(max-width:940px){
  .nav-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;max-height:0;overflow:hidden}
  .nav.menu-open .nav-menu{max-height:min(70dvh,30rem)}
  .nav-cta{display:none}
}
@media(min-width:941px){
  .nav-toggle{display:none}
}

/* --- voice band: hold the tallest quote so rotation never reflows the page --- */
.sec--voice blockquote{min-height:5.9em}
@media(max-width:900px){.sec--voice blockquote{min-height:7.6em}}
@media(max-width:700px){.sec--voice blockquote{min-height:0}}

/* --- the closing pill aligns to the quote's left edge, not 18px past it --- */
.sec--voice .voice{margin:0 auto}
.voice-more{margin-left:0}
.sec--voice .container{display:flex;flex-direction:column;align-items:flex-start}
.sec--voice .voice{width:100%;max-width:1000px}


/* --- .btn--light on light grounds carried a --hair (20% ink) outline, which
       read as a faint lavender edge. Match the secondary pill: 1px ink,
       transparent ground. --- */
.btn--light{background:none;border:1px solid var(--ink);color:var(--ink);box-shadow:none}
.btn--light:hover,.btn--light:focus-visible{background:var(--blue-soft);
  border-color:var(--blue);color:var(--ink);box-shadow:none;filter:none}
/* on dark grounds the light button stays solid white */
.on-dark .btn--light,.slab .btn--light,.cta-band .btn--light,.mode-card--alt .btn--light,
.shero .btn--light,.hero .btn--light{background:#fff;border-color:#fff;color:var(--ink)}
.on-dark .btn--light:hover,.slab .btn--light:hover,.cta-band .btn--light:hover,
.mode-card--alt .btn--light:hover,.shero .btn--light:hover,.hero .btn--light:hover{
  background:var(--blue);border-color:var(--blue);color:#fff}


/* =========================================================
   CURRENT ROLES — expanding cards (R5)
   ========================================================= */
.rcards{display:flex;gap:14px;align-items:stretch;margin-top:1.5rem}
.rcard{flex:1;min-width:0;display:flex;flex-direction:column;text-align:left;cursor:pointer;
  background:var(--lavender);border:1px solid var(--lavender-deep);border-radius:var(--r-card);
  padding:1.75rem 1.6rem;font-family:var(--font);overflow:hidden;
  transition:flex .4s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.rc-n{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.06em;color:var(--body);
  transition:color .3s var(--ease)}
.rc-t{margin-top:1rem;font-size:1.18rem;font-weight:600;letter-spacing:-.018em;line-height:1.28;color:var(--ink);
  transition:color .3s var(--ease)}
.rc-d{display:block;max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.rc-d > span{display:block;padding-top:.9rem;font-size:.97rem;line-height:1.6;
  color:rgba(255,255,255,.78);opacity:0;transition:opacity .3s var(--ease)}
.rcard.on{flex:2.6;background:var(--space-800);border-color:var(--space-800)}
.rcard.on .rc-n{color:rgba(255,255,255,.6)}
.rcard.on .rc-t{color:#fff}
.rcard.on .rc-d{max-height:16rem}
.rcard.on .rc-d > span{opacity:1;transition-delay:.12s}
.rcard:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* tablet: two rows of two, still expanding */
@media(max-width:1000px){
  .rcards{flex-wrap:wrap}
  .rcard{flex:1 1 calc(50% - 7px);min-height:150px}
  .rcard.on{flex:1 1 100%}
}
/* phone: stack, expansion becomes vertical only */
@media(max-width:700px){
  .rcards{flex-direction:column;gap:10px;margin-top:1.25rem}
  .rcard{flex:none;min-height:0;padding:1.4rem 1.35rem}
  .rcard.on{flex:none}
  .rc-t{font-size:1.1rem;margin-top:.7rem}
  .rc-d > span{font-size:.95rem}
  .rcard.on .rc-d{max-height:22rem}
}


/* --- desktop sizing: at a 1200px container, flex 1 vs 2.6 left the three
       collapsed cards 156px of content, so the longest title ran six lines and
       stretched the whole row to ~290px. Wider collapsed columns + a smaller
       card title bring every title to three lines or fewer. --- */
@media(min-width:1001px){
  .rcard.on{flex:1.9}
  .rc-t{font-size:1.02rem;line-height:1.3;letter-spacing:-.014em;margin-top:.85rem}
  .rcard.on .rc-t{font-size:1.18rem;line-height:1.26}
  .rcard{padding:1.6rem 1.45rem}
  .rc-d > span{font-size:.95rem}
}
@media(min-width:1001px) and (max-width:1120px){
  .rc-t{font-size:.97rem}
}


/* --- roles cards: one duration and one curve for every animated property,
       so the widen, the colour change and the copy fade move as one gesture
       instead of three overlapping ones. --- */
.rcards{--rc-dur:560ms;--rc-ease:cubic-bezier(.22,.9,.28,1)}
.rcard{transition:flex-grow var(--rc-dur) var(--rc-ease),
                  flex-basis var(--rc-dur) var(--rc-ease),
                  background-color var(--rc-dur) var(--rc-ease),
                  border-color var(--rc-dur) var(--rc-ease);
  will-change:flex-grow,flex-basis}
.rc-n,.rc-t{transition:color var(--rc-dur) var(--rc-ease)}
.rc-d{transition:max-height var(--rc-dur) var(--rc-ease)}
.rc-d > span{transition:opacity 300ms var(--rc-ease),transform 380ms var(--rc-ease);
  transform:translateY(4px)}
.rcard.on .rc-d > span{transform:none;transition-delay:180ms}

@media(max-width:700px){
  .rcards{--rc-dur:440ms}
  .rc-d > span{transform:translateY(3px)}
  .rcard.on .rc-d > span{transition-delay:120ms}
}
@media(prefers-reduced-motion:reduce){
  .rcards{--rc-dur:1ms}
  .rc-d > span{transform:none;transition:none}
}


/* tablet: keep collapsed cards at half width even when one sits alone on a row */
@media(max-width:1000px){
  .rcard{flex:0 1 calc(50% - 7px)}
  .rcard.on{flex:0 1 100%}
}


/* =========================================================
   CTA HOVER — one clean colour change, no moving light
   ========================================================= */
.btn::after,.btn::before,
.btn--light::after,.btn--blue::after,.btn--ghost::after,
.nav-cta::after,.txt-link::after{content:none;display:none;background:none}
.btn,.btn--light,.btn--blue,.btn--ghost,.nav-cta,.txt-link{
  isolation:auto;box-shadow:none;filter:none;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.btn:hover,.btn:focus-visible,.btn:active,
.btn--blue:hover,.btn--blue:focus-visible,
.nav-cta:hover,.nav-cta:focus-visible{
  background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:none;filter:none;transform:none}

/* outlined pills fill blue with white type, same as the solid ones */
.btn--light:hover,.btn--light:focus-visible,
.txt-link:hover,.txt-link:focus-visible{
  background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:none}
.btn--ghost:hover,.btn--ghost:focus-visible{
  background:var(--blue);border-color:var(--blue);color:#fff}

/* on navy grounds the white button also goes blue */
.on-dark .btn--light:hover,.slab .btn--light:hover,.cta-band .btn--light:hover,
.mode-card--alt .btn--light:hover,.shero .btn--light:hover,.hero .btn--light:hover,
.on-dark .txt-link:hover,.slab .txt-link:hover,.cta-band .txt-link:hover{
  background:var(--blue);border-color:var(--blue);color:#fff}


/* the mobile layer's .hero-ctas .btn--ghost:hover (0,3,0) outranked the unified
   rule (0,2,0) inside its media query — match the specificity to win it back */
@media(max-width:700px){
  .hero-ctas .btn--ghost:hover,.hero-ctas .btn--ghost:focus-visible,
  .hero-ctas .btn--light:hover,.hero-ctas .btn--light:focus-visible,
  .hero-ctas .btn:hover,.hero-ctas .btn:focus-visible,
  .shero .btn--light:hover,.shero .btn--light:focus-visible,
  .shero .shero-cta:hover,.shero .shero-cta:focus-visible{
    background:var(--blue);border-color:var(--blue);color:#fff}
}
@media(max-width:480px){
  .hero-ctas .btn--ghost:hover,.hero-ctas .btn:hover,.shero .btn--light:hover{
    background:var(--blue);border-color:var(--blue);color:#fff}
}


/* same 0,3,0 specificity trap for the scoped .txt-link pills at ≤700px */
@media(max-width:700px){
  .aud-actions .txt-link:hover,.aud-actions .txt-link:focus-visible,
  .mode-actions .txt-link:hover,.mode-actions .txt-link:focus-visible,
  .ind-foot .txt-link:hover,.ind-foot .txt-link:focus-visible,
  .fq-head .txt-link:hover,.fq-head .txt-link:focus-visible,
  .qrail-nav + .txt-link:hover,.qrail-nav + .txt-link:focus-visible{
    background:var(--blue);border-color:var(--blue);color:#fff}
}


/* --- paired CTAs: the secondary pill now takes the primary's exact box
       metrics (font-size, line-height, padding), and pair wrappers supply all
       vertical spacing so neither child carries its own margin. --- */
.txt-link{display:inline-flex;align-items:center;justify-content:center;
  font-size:1rem;line-height:1;padding:.95rem 1.65rem;border-width:1px}
.aud-actions > *,.mode-actions > *,.ind-foot > .btn,.ind-foot > .txt-link,
.cta-actions > *,.hero-ctas > *{margin-top:0;margin-bottom:0}
@media(max-width:700px){
  .txt-link{font-size:1rem;line-height:1;padding:.95rem 1.65rem}
}


/* .aud-head .btn (0,2,0) kept a 1.9rem top margin the paired pill lacked,
   throwing the centred flex line 15px off-axis — match specificity to clear it.
   The wrapper's own margin supplies the spacing under the paragraph. */
.aud-actions{margin-top:1.9rem}
.aud-actions .btn,.aud-actions .txt-link{margin-top:0}


/* =========================================================
   FEATURED IN v3 — lengthwise media rows
   Row: index · outlet artwork · copy · date + CTA
   ========================================================= */
.sec--fintro{padding-top:clamp(2.5rem,4.5vw,3.75rem);padding-bottom:0}
.fintro{max-width:74ch;font-size:clamp(1.14rem,1.7vw,1.36rem);font-weight:500;line-height:1.5;
  letter-spacing:-.018em;color:var(--ink)}

/* reserved featured placement */
.sec--fplace{padding-top:clamp(3rem,5vw,4.5rem);padding-bottom:clamp(3rem,5vw,4.5rem)}
.fplace{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);
  align-items:center;background:#fff;border:1px solid var(--hair);border-radius:var(--r-card);
  padding:clamp(1.15rem,1.8vw,1.5rem)}
.fplace-art{aspect-ratio:16/9;border-radius:var(--r-inner);display:grid;place-items:center;
  border:1px dashed var(--lavender-deep);background:var(--lavender)}
.fplace-body{padding-right:clamp(.5rem,2vw,1.5rem)}
.fplace-h{margin-top:.9rem;font-size:clamp(1.5rem,2.3vw,1.95rem);font-weight:600;letter-spacing:-.028em;
  line-height:1.14;color:var(--ink)}
.fplace-d{margin-top:1rem;font-size:1.02rem;line-height:1.64;color:var(--body);max-width:52ch}
.fplace-body .ml-pending{margin-top:1.5rem}

/* the list */
.sec--ml .ml-head{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:clamp(2.5rem,5vw,4.5rem);align-items:end}
.sec--ml .h-sec{max-width:18ch}
.mlist{margin-top:clamp(2.25rem,4vw,3rem);border-bottom:1px solid var(--hair)}
.mrow{display:grid;grid-template-columns:52px 188px minmax(0,1fr) 190px;gap:clamp(1.5rem,2.6vw,2.5rem);
  align-items:start;padding:clamp(1.75rem,2.6vw,2.25rem) 0;border-top:1px solid var(--hair)}
.ml-n{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.06em;color:var(--body);padding-top:.35rem}
.ml-art{aspect-ratio:4/3;border-radius:var(--r-inner);overflow:hidden;background:var(--lavender);
  border:1px solid var(--hair);display:grid;place-items:center}
.ml-art img{width:100%;height:100%;object-fit:contain;padding:.65rem;background:#fff}
.ml-slot{font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  line-height:1.5;text-align:center;color:var(--body);padding:.5rem}
.ml-kick{display:block;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue-hover)}
.ml-t{margin-top:.8rem;font-size:clamp(1.18rem,1.6vw,1.4rem);font-weight:600;letter-spacing:-.022em;
  line-height:1.26;color:var(--ink);text-wrap:pretty}
.ml-d{margin-top:.85rem;font-size:1rem;line-height:1.62;color:var(--body);max-width:62ch}
.ml-meta{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;padding-top:.15rem}
.ml-date{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.5;color:var(--body)}
.ml-cta{padding:.8rem 1.4rem;font-size:.95rem}
.ml-pending{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--body);
  border:1px dashed var(--lavender-deep);border-radius:4px;padding:.6rem .85rem}

/* hairlines follow the ground */
.sec--ml[style*="lavender"] .mlist,.sec--ml[style*="lavender"] .mrow{border-color:var(--lavender-deep)}
.sec--ml[style*="lavender"] .ml-art{border-color:var(--lavender-deep)}

/* speaking section photo, container-aligned */
.spk-photo{margin:clamp(2rem,3.5vw,2.75rem) 0 0;border-radius:var(--r-card);overflow:hidden;background:var(--space-900)}
.spk-photo img{display:block;width:100%;height:auto}

@media(max-width:1080px){
  .mrow{grid-template-columns:44px 150px minmax(0,1fr);gap:1.5rem 1.75rem}
  .ml-meta{grid-column:2 / -1;flex-direction:row;align-items:center;gap:1.25rem;padding-top:0}
}
@media(max-width:900px){
  .sec--ml .ml-head{grid-template-columns:1fr;gap:1.2rem;align-items:start}
  .sec--ml .h-sec{max-width:22ch}
  .fplace{grid-template-columns:1fr;gap:1.5rem}
  .fplace-body{padding:0 .75rem .75rem}
}
@media(max-width:700px){
  .mrow{grid-template-columns:112px minmax(0,1fr);gap:1.1rem 1.25rem;padding:1.6rem 0}
  .ml-n{display:none}
  .ml-body{grid-column:1 / -1}
  .ml-art{grid-column:1;aspect-ratio:4/3}
  .ml-date{grid-column:2;align-self:center;font-size:.68rem}
  .ml-meta{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;gap:.9rem 1.1rem}
  .ml-t{font-size:1.14rem}
  .ml-d{font-size:.97rem}
  .fintro{font-size:1.08rem}
}


/* speaking photo: crop to a band and bias low — the panel row sits in the
   bottom third of the frame, the top two-thirds is empty stage curtain */
.spk-photo{aspect-ratio:16/7}
.spk-photo img{height:100%;object-fit:cover;object-position:50% 78%}
@media(max-width:700px){.spk-photo{aspect-ratio:16/9}}


/* =========================================================
   FEATURED IN v3.1 — jump nav, normalized logo tiles, closing note
   ========================================================= */

/* #1 jump nav */
.fjump{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.75rem,3vw,2.25rem)}
.fjump a{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.25rem;
  border:1px solid var(--ink);border-radius:var(--r-pill);
  font-size:.95rem;font-weight:600;line-height:1;color:var(--ink);
  transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.fjump a span{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.06em;
  color:var(--body);transition:color .18s var(--ease)}
.fjump a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.fjump a:hover span{color:rgba(255,255,255,.72)}

/* #5 numerals removed — reclaim the column */
.mrow{grid-template-columns:188px minmax(0,1fr) 190px}

/* #3 uniform white logo tiles: same frame, same optical weight */
.ml-art{aspect-ratio:16/10;background:#fff;border:1px solid var(--hair);padding:1.15rem 1.35rem}
.ml-art img{width:100%;height:100%;object-fit:contain;padding:0;background:none}
.sec--ml[style*="lavender"] .ml-art{border-color:var(--lavender-deep)}

/* #6 closing note */
.ml-foot{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin-top:clamp(1.75rem,3vw,2.25rem);font-size:1rem;line-height:1.62;color:var(--body)}
.ml-foot a{font-weight:600;color:var(--ink);border-bottom:1px solid var(--lavender-deep)}
.ml-foot a:hover{color:var(--blue-hover);border-bottom-color:var(--blue)}
.ml-foot svg{flex:none;color:var(--body)}

@media(max-width:1080px){
  .mrow{grid-template-columns:150px minmax(0,1fr)}
  .ml-meta{grid-column:1 / -1}
}
@media(max-width:700px){
  .fjump{gap:.6rem}
  .fjump a{padding:.75rem 1.05rem;font-size:.92rem}
  .mrow{grid-template-columns:112px minmax(0,1fr)}
  .ml-art{padding:.8rem .9rem}
  .ml-foot{font-size:.97rem}
}


/* thumbnails: centre the logo at its own ratio inside the tile — no stretch,
   no crop, whatever its native proportions are */
.ml-art{display:flex;align-items:center;justify-content:center;overflow:hidden}
.ml-art img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;padding:0;background:none}


/* tiles are pre-normalized to 16:10 with their dead margin trimmed —
   the frame no longer pads or letterboxes, the art fills it edge to edge */
.ml-art{padding:0;display:block;background:#fff}
.ml-art img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:50% 50%}
@media(max-width:700px){.ml-art{padding:0}}


/* =========================================================
   FEATURED IN — mobile, rewritten
   The ≤700 rules were authored when rows had a numeral column:
   .ml-body spanned 1/-1 against a grid that no longer has 3 tracks,
   and .ml-art was pinned back to 4/3 while the tiles are now 16:10 —
   so object-fit:cover was cropping the artwork again on phones.
   ========================================================= */
@media(max-width:700px){
  .mrow{grid-template-columns:minmax(0,1fr);gap:1.05rem;padding:1.5rem 0}

  /* artwork gets the full column: at 390px a 112px tile made every logo
     unreadable, which is the whole point of showing outlet art */
  .ml-art{grid-column:1;aspect-ratio:16/10;border-radius:var(--r-inner)}
  .ml-art img{object-fit:cover}

  .ml-body{grid-column:1}
  .ml-t{margin-top:.7rem;font-size:1.16rem;line-height:1.28}
  .ml-d{margin-top:.7rem;font-size:.97rem;line-height:1.6}

  /* date and action share one line, pushed apart */
  .ml-meta{grid-column:1;flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:space-between;gap:.85rem 1rem;width:100%}
  .ml-date{grid-column:auto;align-self:auto;font-size:.68rem}
  .ml-cta{padding:.78rem 1.3rem;font-size:.93rem}

  /* jump pills: three full-width rows is a wall — let them sit two-up */
  .fjump{gap:.5rem}
  .fjump a{flex:1 1 calc(50% - .25rem);justify-content:space-between;padding:.72rem .9rem;font-size:.9rem}
  .fjump a:first-child{flex-basis:100%}

  /* reserved placement + speaking photo */
  .fplace{padding:.85rem}
  .fplace-art{aspect-ratio:16/10}
  .fplace-h{margin-top:.7rem}
  .fplace-d{margin-top:.8rem;font-size:.99rem}
  .spk-photo{aspect-ratio:16/10;margin-top:1.6rem}
  .ml-foot{margin-top:1.6rem;font-size:.97rem}
}
@media(max-width:420px){
  .fjump a{flex-basis:100%}
  .ml-meta{justify-content:flex-start}
}


/* jump pills: meet the 44px touch minimum used elsewhere on mobile */
@media(max-width:700px){
  .fjump a{min-height:44px;padding:.72rem .95rem;align-items:center}
}


/* speaking panel: keep the seated row and the stage in frame */
.spk-photo img{object-position:50% 56%}
@media(max-width:700px){.spk-photo img{object-position:50% 58%}}


/* ---------- Homepage hero photograph ---------- */
/* the image is atmosphere, not subject: held back so the headline and the two
   buttons stay the only things competing for attention */
.hero--photo .hero-photo{opacity:.34;object-position:58% 42%}
.hero--photo .slab{background:linear-gradient(180deg,var(--space-900),var(--space-800))}
.hero--photo .hero-scrim{background:
  radial-gradient(115% 85% at 22% 78%, rgba(9,15,41,.94) 0%, rgba(9,15,41,.66) 42%, rgba(9,15,41,.3) 100%),
  linear-gradient(180deg,rgba(9,15,41,.82) 0%,rgba(9,15,41,.5) 32%,rgba(9,15,41,.66) 64%,rgba(9,15,41,.96) 100%)}
@media(max-width:700px){
  .hero--photo .hero-photo{opacity:.28;object-position:62% 40%}
  .hero--photo .hero-scrim{background:
    linear-gradient(180deg,rgba(9,15,41,.8) 0%,rgba(9,15,41,.62) 30%,rgba(9,15,41,.8) 62%,rgba(9,15,41,.97) 100%)}
}


/* hero photo: less fade, and framed lower so the sun and horizon show at the top */
.hero--photo .hero-photo{opacity:.58;object-position:58% 22%}
.hero--photo .hero-scrim{background:
  radial-gradient(115% 85% at 22% 80%, rgba(9,15,41,.9) 0%, rgba(9,15,41,.52) 46%, rgba(9,15,41,.16) 100%),
  linear-gradient(180deg,rgba(9,15,41,.58) 0%,rgba(9,15,41,.3) 30%,rgba(9,15,41,.56) 64%,rgba(9,15,41,.94) 100%)}
@media(max-width:700px){
  .hero--photo .hero-photo{opacity:.48;object-position:60% 20%}
  .hero--photo .hero-scrim{background:
    linear-gradient(180deg,rgba(9,15,41,.62) 0%,rgba(9,15,41,.46) 28%,rgba(9,15,41,.72) 60%,rgba(9,15,41,.96) 100%)}
}


/* hero photo: the image itself, unaltered and fully opaque.
   Darkening is one flat scrim on top — no opacity blend with the slab beneath,
   which was washing navy through the picture. */
.hero--photo .slab{background:#05070F}
.hero--photo .hero-photo{opacity:1;object-position:50% 40%}
.hero--photo .hero-scrim{background:
  linear-gradient(180deg,rgba(4,7,16,.5) 0%,rgba(4,7,16,.42) 38%,rgba(4,7,16,.68) 72%,rgba(4,7,16,.9) 100%)}
@media(max-width:700px){
  .hero--photo .hero-photo{opacity:1;object-position:56% 38%}
  .hero--photo .hero-scrim{background:
    linear-gradient(180deg,rgba(4,7,16,.52) 0%,rgba(4,7,16,.5) 32%,rgba(4,7,16,.76) 68%,rgba(4,7,16,.93) 100%)}
}


/* +10% scrim */
.hero--photo .hero-scrim{background:
  linear-gradient(180deg,rgba(4,7,16,.6) 0%,rgba(4,7,16,.52) 38%,rgba(4,7,16,.78) 72%,rgba(4,7,16,1) 100%)}
@media(max-width:700px){
  .hero--photo .hero-scrim{background:
    linear-gradient(180deg,rgba(4,7,16,.62) 0%,rgba(4,7,16,.6) 32%,rgba(4,7,16,.86) 68%,rgba(4,7,16,1) 100%)}
}


/* =========================================================
   Current roles — smooth expand (supersedes earlier tuning)
   Three causes of the jank, fixed:
   1. max-height was a 16rem GUESS. Copy runs 2–4 lines, so the curve
      raced past short text and clipped long text at the end.
      grid-template-rows 0fr→1fr animates to the exact content height.
   2. Titles re-wrapped as the width changed, so line count jumped
      mid-animation. The title block now reserves its tallest height,
      so re-wrap never moves anything vertically.
   3. flex-grow AND flex-basis both animated — two competing length
      calculations per frame. Only flex-grow animates now.
   ========================================================= */
@media(min-width:861px){
  .rcards{--rc-dur:520ms;--rc-ease:cubic-bezier(.32,.72,0,1);align-items:stretch}
  .rcard{flex:1 1 0%;
    transition:flex-grow var(--rc-dur) var(--rc-ease),
               background-color var(--rc-dur) var(--rc-ease),
               border-color var(--rc-dur) var(--rc-ease);
    will-change:flex-grow;contain:layout paint}
  .rcard.on{flex:2.6 1 0%}

  /* reserve the tallest title so re-wrapping never shifts the rows below */
  .rc-t{display:block}

  /* exact-height reveal, no magic number */
  .rc-d{display:grid;grid-template-rows:0fr;max-height:none;
    transition:grid-template-rows var(--rc-dur) var(--rc-ease)}
  .rc-d > span{min-height:0;padding-top:0;
    transition:opacity 260ms var(--rc-ease),padding-top var(--rc-dur) var(--rc-ease)}
  .rcard.on .rc-d{grid-template-rows:1fr;max-height:none}
  .rcard.on .rc-d > span{padding-top:.9rem;transition-delay:140ms}
}

/* two-up tablet: same mechanics */
@media(min-width:601px) and (max-width:860px){
  .rc-d{display:grid;grid-template-rows:0fr;max-height:none;
    transition:grid-template-rows 480ms cubic-bezier(.32,.72,0,1)}
  .rcard.on .rc-d{grid-template-rows:1fr;max-height:none}
  .rc-d > span{min-height:0;padding-top:0;transition:opacity 260ms ease,padding-top 480ms cubic-bezier(.32,.72,0,1)}
  .rcard.on .rc-d > span{padding-top:.85rem}
}

/* stacked mobile: height animates on its own, titles never re-wrap on change */
@media(max-width:600px){
  .rc-d{display:grid;grid-template-rows:0fr;max-height:none;
    transition:grid-template-rows 420ms cubic-bezier(.32,.72,0,1)}
  .rcard.on .rc-d{grid-template-rows:1fr;max-height:none}
  .rc-d > span{min-height:0;padding-top:0;
    transition:opacity 240ms ease,padding-top 420ms cubic-bezier(.32,.72,0,1)}
  .rcard.on .rc-d > span{padding-top:.8rem}
  .rc-t{min-height:0}
}

@media(prefers-reduced-motion:reduce){
  .rcard,.rc-d,.rc-d > span{transition:none}
}


/* =========================================================
   Current roles v3 — zero reflow during the transition
   The 3-line reserve was the wrong number: closed cards are ~207px wide
   and run titles to 6 lines, open cards ~470px and run 3. Reserving
   either height leaves the other jumping. Instead the text is pinned to
   its resting width (measured in JS) so it never re-wraps at all.
   ========================================================= */
@media(min-width:1081px){
  .rcards{--rc-grow:2.2;--rc-dur:520ms;--rc-ease:cubic-bezier(.32,.72,0,1)}
  .rcard.on{flex:2.2 1 0%}

  /* title keeps the CLOSED width in both states: line count never changes */
  .rc-t{min-height:0;width:var(--rc-tw,100%);max-width:100%}

  /* description is hidden when closed, so it can hold the OPEN width */
  .rc-d > span{width:var(--rc-dw,100%);max-width:none}

  /* short titles left a dead band at the card foot — the reveal now sits
     on the floor, so the slack reads as deliberate air */
  .rc-d{margin-top:auto}
  .rcard{padding-bottom:1.5rem}
}

/* the 861–1080px band squeezed closed cards to ~157px, forcing 6-line
   titles. Two-up starts higher now, so no card is ever that narrow. */
@media(min-width:601px) and (max-width:1080px){
  .rcards{flex-wrap:wrap}
  .rcard{flex:0 1 calc(50% - 7px);min-height:150px}
  .rcard.on{flex:0 1 100%}
  .rc-t{min-height:0;width:auto}
}


/* =========================================================
   Current roles v4 — the width animation goes
   Pinning text to the closed width fixed the reflow but left the open
   card with a 163px headline column over a 420px paragraph. Pinning to
   the open width instead would clip the collapsed titles, and all four
   role titles need to be readable at rest — that is the point of the row.
   Since those two requirements are incompatible with an animated width,
   the width is now constant and the card expands downward only.
   Result: nothing re-wraps, nothing to guess, one property animating.
   ========================================================= */
@media(min-width:1081px){
  .rcards{--rc-tw:auto;--rc-dw:auto;align-items:stretch}
  .rcard,.rcard.on{flex:1 1 0%}
  .rcard{transition:background-color var(--rc-dur) var(--rc-ease),
                    border-color var(--rc-dur) var(--rc-ease)}
  .rc-t{width:auto;max-width:100%;min-height:0}
  .rc-d > span{width:auto;max-width:100%}
  .rc-d{margin-top:1rem}
}


/* cards sized to their own content: with the reveal driving height,
   align-items:stretch was matching all four to the tallest and leaving
   ~250px of empty lavender in the three closed ones */
@media(min-width:1081px){
  .rcards{align-items:flex-start}
  .rcard{min-height:180px}
}


/* featured placement now carries a real image + link */
.fplace-art{border:0;background:var(--space-900);overflow:hidden}
.fplace-art img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.fplace-meta{margin-top:1.6rem;display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.fplace-meta .ml-date{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--body)}
@media(max-width:700px){
  .fplace-meta{margin-top:1.25rem;gap:1rem}
}


/* ---------- Contact: founder frame beside the process ---------- */
.next-split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
.next-split .next-head{display:block}
.founder-frame{margin:0}
.founder-frame img{width:100%;height:auto;display:block;border-radius:var(--r-card);background:var(--space-900)}
.founder-frame figcaption{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--hair);
  display:flex;flex-direction:column;gap:.2rem;line-height:1.4}
.founder-frame strong{font-size:1rem;font-weight:600;letter-spacing:-.014em;color:var(--ink)}
.founder-frame span{font-size:.93rem;color:var(--body)}
.next-split .next-sub{margin-top:1rem;max-width:44ch}

/* ---------- Services: the coaching band ---------- */
.keep-photo{margin:clamp(2.5rem,4.5vw,3.5rem) 0 0;border-radius:var(--r-card);overflow:hidden;
  background:var(--space-900)}
.keep-photo img{width:100%;height:auto;display:block}

@media(max-width:820px){
  .next-split{grid-template-columns:1fr;gap:1.75rem}
  .founder-frame{display:grid;grid-template-columns:132px minmax(0,1fr);gap:1.15rem;align-items:center}
  .founder-frame figcaption{margin-top:0;padding-top:0;border-top:0}
}


/* pending artwork tiles on Featured in */
.ml-art--pending{display:grid;place-items:center;background:var(--lavender);border-style:dashed;border-color:var(--lavender-deep)}
.sec--ml[style*="lavender"] .ml-art--pending{background:#fff}


/* ---------- Tanya brief: four proof items + long stat ---------- */
/* hero rail now carries four items (MBA added) */
.hero-rail{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){ .hero-rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem} }
/* on phones four across leaves ~80px per label; 2×2 keeps every label on two lines */
@media(max-width:600px){
  .hero-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1rem}
  .hero-rail .hr-l{min-height:2.7em;font-size:.7rem}
  .hero-rail .hr-v{font-size:1.6rem}
}
@media(max-width:380px){ .hero-rail{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem .8rem} }

/* "PhD + MBA" is twice the length of the other figures — step it down so it holds one line */
.tf-num.tf-num--long{font-size:clamp(2.3rem,3.6vw,3.1rem);letter-spacing:-.025em;white-space:nowrap}
@media(max-width:600px){ .tf-num.tf-num--long{font-size:2.2rem} }

/* founder credentials: four rows, the value column wide enough for "20+ yrs" and "MBA" alike */
.fdr-cred .fc-n{min-width:5.2rem}


/* =========================================================
   NAV — floats at the top of the page, docks flush once scrolled
   The gap above the floating bar let page content show through
   while scrolling. On scroll the bar now slides up to the screen
   edge, goes full width and square-topped, and tightens slightly.
   Logo and Apply stay pinned to the 1200px content edges in both
   states, so nothing jumps sideways during the transition.
   ========================================================= */
:root{--nav-ease:cubic-bezier(.22,.8,.26,.99)}
.nav{transition:top .32s var(--nav-ease),left .32s var(--nav-ease),right .32s var(--nav-ease)}
.nav-inner{
  --nav-side:max(1.25rem,calc((100vw - var(--maxw)) / 2 - var(--slab-inset)));
  padding-left:var(--nav-side);padding-right:var(--nav-side);
  transition:border-radius .32s var(--nav-ease),padding .32s var(--nav-ease),
    background-color .25s ease,border-color .25s ease,box-shadow .32s var(--nav-ease)}

/* docked */
.nav.scrolled{top:0;left:0;right:0}
.nav.scrolled .nav-inner{
  --nav-side:max(var(--gutter),calc((100vw - var(--maxw)) / 2));
  border-radius:0;border-width:0 0 1px;border-color:var(--hair);background:#fff;
  padding-top:calc(.58rem + env(safe-area-inset-top));padding-bottom:.58rem;
  box-shadow:0 10px 28px -22px rgba(9,15,41,.28)}

/* nav links: clearer active state and keyboard focus */
.nav-menu a.active{font-weight:600}
.nav-menu a:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:3px}

@media(max-width:940px){
  .nav-inner{--nav-side:1rem}
  .nav.scrolled .nav-inner{--nav-side:calc(var(--gutter) - .15rem);padding-top:calc(.5rem + env(safe-area-inset-top));padding-bottom:.5rem}
  /* docked: the menu drops straight off the bar, edge to edge, square-topped */
  .nav.scrolled .nav-menu{top:100%;left:0;right:0;border-radius:0 0 var(--r-slab) var(--r-slab)}
  .nav.scrolled.menu-open .nav-menu{border-top:0}
}

@media(prefers-reduced-motion:reduce){ .nav,.nav-inner{transition:none} }


/* nav height: floating 55 → 63px, docked 47 → 54px (~15% taller) */
.nav-inner{padding-top:.95rem;padding-bottom:.95rem}
.nav.scrolled .nav-inner{padding-top:calc(.8rem + env(safe-area-inset-top));padding-bottom:.8rem}
@media(max-width:940px){
  .nav-inner{padding-top:.85rem;padding-bottom:.85rem}
  .nav.scrolled .nav-inner{padding-top:calc(.72rem + env(safe-area-inset-top));padding-bottom:.72rem}
}


/* homepage hero: background video test */
.hero-video{object-fit:cover;object-position:50% 50%}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}.hero--photo .slab{background:#040710 url(/assets/img/hero-earth.webp) 56% 38%/cover no-repeat}}


/* video hero: 10% darker */
.hero-video{filter:brightness(.9)}


/* speaking pitch under the panel photo */
.spk-pitch{margin-top:clamp(1.75rem,3vw,2.5rem);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:end;padding-bottom:clamp(2rem,3.5vw,2.75rem);border-bottom:1px solid var(--hair)}
.spk-pitch p{max-width:68ch;font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.64;color:var(--ink)}
.spk-pitch .btn{white-space:nowrap}
@media(max-width:820px){
  .spk-pitch{grid-template-columns:1fr;gap:1.4rem;align-items:start}
  .spk-pitch p{font-size:1rem;line-height:1.62}
  .spk-pitch .btn{justify-self:start}
}


/* anchor targets clear the fixed menu bar */
[id]{scroll-margin-top:calc(var(--nav-h) + 1.5rem)}


/* content-visibility:auto held stale section heights (Featured in: 886px box for 3,400px of
   content), letting later sections paint over — and swallow clicks on — the lower rows. */
.sec,section,.sec--ml,.sec--fi{content-visibility:visible;contain-intrinsic-size:none}

body > section,body > footer,.footer-wrap{content-visibility:visible !important;contain-intrinsic-size:none !important}


/* who we work with: longer statement lines and closing copy */
.sec--aud .aud-lead{text-wrap:pretty;max-width:34ch}
.cta-band .cta-sub{max-width:60ch;text-wrap:pretty}
.aud-sum{text-wrap:pretty}
@media(max-width:700px){.sec--aud .aud-lead{max-width:none}}


/* homepage tabs: longer audience names — number above, label wraps cleanly */
@media(min-width:901px){
  .otabs .otab{flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;gap:.4rem;
    padding:1.05rem 1.25rem 1.15rem;line-height:1.28;text-wrap:balance}
  .otabs .otab .ot-n{align-self:flex-start}
}
.hero-sub{max-width:54ch}
.pkg-fit{text-wrap:pretty}


/* hero: video only — no photo poster or photo fallback */
@media(prefers-reduced-motion:reduce){.hero-video{display:block}.hero--photo .slab{background:#040710}}


/* current roles: numbers removed — title sits at the top of the card */
.rc-t{margin-top:0}


/* homepage closing headline: hold to 2–3 lines */
.cta-band .cta-h--long{max-width:31ch;text-wrap:balance}
@media(max-width:600px){.cta-band .cta-h--long{max-width:none;font-size:clamp(1.5rem,6.4vw,1.8rem);line-height:1.14}}


/* rails: the final card is its own snap point, so the end of the rail is reachable */
#qrail > :last-child,#mrail > :last-child{scroll-snap-align:end}


/* homepage packages: "See our services" reads as a pill button again, arrow beside the label */
.pkg .pkg-go{align-self:flex-start;justify-content:flex-start;gap:.55rem;margin-top:auto;margin-top:max(auto,0px);
  padding:.8rem 1.35rem;border:1px solid rgba(255,255,255,.55);border-radius:var(--r-pill);
  font-size:.97rem;font-weight:600;line-height:1;color:#fff;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.pkg .pkg-go svg{width:14px;height:14px;transform:none}
.pkg:hover .pkg-go,.pkg:focus-visible .pkg-go{background:var(--blue);border-color:var(--blue);color:#fff}
.pkg:hover .pkg-go svg{transform:none}
.pkg-go-wrap{margin-top:auto}


/* package cards: even vertical rhythm, button always clear of the copy */
.pkg{padding:clamp(2.25rem,3vw,2.75rem) clamp(2rem,3vw,2.75rem)}
.pkg .pkg-top{gap:1.25rem}
.pkg .pkg-fit{margin-top:1.25rem;margin-bottom:2.25rem}
.pkg .pkg-go{margin-top:auto !important}
@media(max-width:820px){.pkg .pkg-fit{margin-bottom:1.9rem}}


/* offers: short headline on its own, the positioning line becomes the section's takeaway */
.pkg-head--solo{display:block}
.pkg-head--solo .h-sec{max-width:none;color:#fff}
.pkg-take{margin-top:clamp(2.25rem,4vw,3rem);padding-top:clamp(1.75rem,3vw,2.25rem);border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.pkg-take p{max-width:62ch;font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.6;color:rgba(255,255,255,.86);text-wrap:pretty}
.pkg-take .btn{white-space:nowrap}
@media(max-width:820px){
  .pkg-take{grid-template-columns:1fr;gap:1.4rem;align-items:start}
  .pkg-take p{font-size:1rem}
  .pkg-take .btn{justify-self:start}
}


/* =========================================================
   SERVICES v5 — decision-first copy pass
   ========================================================= */
/* decision-first section: statement line under the heading */
#already-tried .at-lead{margin-top:1.25rem;font-size:clamp(1.12rem,1.6vw,1.3rem);font-weight:550;line-height:1.42;
  letter-spacing:-.016em;color:var(--ink);max-width:30ch;text-wrap:pretty}
/* method cards: several short paragraphs per card */
.mcard .mc-d + .mc-d{margin-top:.75rem}
/* ROI statement band */
.sec--roi{background:linear-gradient(180deg,var(--space-900),var(--space-800))}
.roi-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:end}
.sec--roi .h-sec{color:#fff;max-width:18ch}
.roi-p{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.64;color:rgba(255,255,255,.84);max-width:52ch;text-wrap:pretty}
/* accelerators & incubators */
.acc-split{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:start}
.sec--acc .keep-label{margin-bottom:1.1rem}
.sec--acc .h-sec{max-width:16ch}
.acc-p{font-size:1.06rem;line-height:1.7;color:var(--body);max-width:62ch}
.acc-p--proof{margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--lavender-deep);
  font-size:1.12rem;font-weight:550;line-height:1.5;color:var(--ink)}
.sec--acc .btn{margin-top:1.9rem}
/* what you keep: each column now holds two paragraphs */
.keep-cols > div p + p{margin-top:1rem}
/* FAQ fee line under the heading */
.fq-fee{margin-top:1.4rem;max-width:30ch;font-size:1rem;line-height:1.55;color:var(--ink)}
.fq-fee strong{font-weight:600}
/* closing CTA: two short paragraphs */
.cta-band .cta-sub--2{margin-top:.9rem}
@media(max-width:900px){
  .roi-split,.acc-split{grid-template-columns:1fr;gap:1.5rem;align-items:start}
  .sec--roi .h-sec,.sec--acc .h-sec{max-width:none}
  .fq-fee{max-width:none}
}

.cf-help{margin-top:.5rem;font-size:.9rem;line-height:1.5;color:var(--body)}


/* guide 02 cover: longer title holds the brief's two-line stack */
.gs-title.gs-title--long{font-size:calc(clamp(2rem,3.1vw,2.75rem) * .86)}
.gs-title .gs-nw{white-space:nowrap}


/* =========================================================
   MOBILE QA — Oct 2026 copy pass
   ========================================================= */
@media(max-width:700px){
  /* no single orphaned word at the end of a heading or paragraph */
  h1,h2,h3,h4,.gb-t,.svc-name,.ben-t,.pstep-t{text-wrap:balance}
  p,li,dd,.cta-sub,.sec-intro,.phero-sub,.hero-sub{text-wrap:pretty}
}
@media(max-width:480px){
  /* longer offer and speaking labels stay on one line inside narrow cards */
  .svc .btn,.mode-card .btn{font-size:.9rem;padding-left:1.05rem;padding-right:1.05rem;gap:.45rem;letter-spacing:-.01em}
}
@media(max-width:380px){
  .svc .btn,.mode-card .btn{font-size:.85rem;padding-left:.9rem;padding-right:.9rem}
}

.ben-tx{text-wrap:balance}
@media(max-width:480px){
  .mode-card .btn{white-space:nowrap;font-size:.86rem;padding-left:.95rem;padding-right:.95rem}
}
@media(max-width:360px){ .mode-card .btn{white-space:normal} }


/* =========================================================
   HOME HERO — phone proportions (match interior heroes)
   ========================================================= */
@media(max-width:700px){
  .hero.hero--photo{padding-top:var(--slab-inset)}
  .hero.hero--photo .slab{padding-top:0}
  .hero.hero--photo .slab > .container{padding-top:calc(var(--nav-h) + 1.6rem);padding-bottom:1.6rem;min-height:0}
  .hero.hero--photo .hero-copy{padding-bottom:0;gap:.95rem}
  .hero.hero--photo .hero-sub{font-size:1rem;line-height:1.55}
  .hero.hero--photo .hero-ctas{margin-top:.6rem;gap:.6rem}
  .hero.hero--photo .hero-rail{margin-top:1.6rem;padding-top:1.1rem;gap:.85rem 1rem}
  .hero.hero--photo .hero-rail .hr-l{font-size:.64rem;line-height:1.3}
  .hero.hero--photo .hero-rail .hr-v{margin-top:.35rem;font-size:1.45rem}
}


/* =========================================================
   HOME HERO + TESTIMONIALS + CLOSING CTA — phone pass
   ========================================================= */
/* desktop/tablet: the track is invisible to layout, the loop copy is off */
.hr-track{display:contents}
.hr-dup{display:none}
.cta-sub--short{display:none}

@media(max-width:700px){
  /* headline at the same scale as Services; copy steps down so the headline leads */
  .hero.hero--photo .h-display{font-size:clamp(2.5rem,11vw,3.2rem);line-height:1.02;letter-spacing:-.038em}
  .hero.hero--photo .hero-sub{font-size:.92rem;line-height:1.55;max-width:none}
  .hero.hero--photo .hero-copy{gap:.85rem}

  /* CTAs: compact pills, stacked tight, left-aligned */
  .hero.hero--photo .hero-ctas{flex-direction:column;align-items:flex-start;gap:.55rem;margin-top:.5rem}
  .hero.hero--photo .hero-ctas .btn,
  .hero.hero--photo .hero-ctas .btn--ghost{padding:.68rem 1.1rem;font-size:.88rem;align-self:flex-start}
  .hero.hero--photo .hero-ctas .btn svg{width:12px;height:12px}

  /* stats: a slow train, two cells always fully in view */
  .hero.hero--photo .hero-rail{display:block;container-type:inline-size;overflow:hidden;
    margin-top:1.5rem;padding-top:1rem;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent)}
  .hero.hero--photo .hr-track{display:flex;width:max-content;animation:hrTrain 22s linear infinite}
  .hero.hero--photo .hr-track > div{flex:0 0 50cqw;display:block;padding-right:1rem;box-sizing:border-box}
  .hero.hero--photo .hr-dup{display:block}
  .hero.hero--photo .hero-rail .hr-l{min-height:0;font-size:.68rem;line-height:1.3;color:rgba(255,255,255,.82)}
  .hero.hero--photo .hero-rail .hr-v{margin-top:.4rem;padding-top:0;font-size:1.6rem}
  .hero.hero--photo .hero-rail:hover .hr-track,
  .hero.hero--photo .hero-rail:active .hr-track{animation-play-state:paused}

  /* testimonials, every page: readable in one view, facts panel off */
  .tcar-quote p,#proof .tcar-quote p{font-size:1.06rem;line-height:1.52;font-weight:550;letter-spacing:-.01em}
  .tcar-quote{margin:1.1rem 0}
  #proof .tcar-who{margin-top:1.2rem;padding-top:1rem}
  .tfacts,#proof .tfacts{display:none}
  .tsplit{grid-template-columns:minmax(0,1fr)}

  /* closing CTA on the homepage: the short version */
  .cta-band .cta-sub--full{display:none}
  .cta-band .cta-sub--short{display:block}
}
@keyframes hrTrain{from{transform:translateX(0)}to{transform:translateX(-200cqw)}}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .hero.hero--photo .hero-rail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none}
  .hero.hero--photo .hr-track{animation:none}
  .hero.hero--photo .hr-track > div{scroll-snap-align:start}
  .hero.hero--photo .hr-dup{display:none}
}

/* the old ".hero-rail > div" cell rule also matches the track wrapper — reset it */
@media(max-width:700px){
  .hero.hero--photo .hero-rail > .hr-track{display:flex;flex-direction:row;flex-wrap:nowrap;height:auto;width:max-content}
  .hero.hero--photo .hr-track > div{height:auto}
}


/* =========================================================
   Phone: stats leave the hero, credentials under Tanya's photo become the train
   ========================================================= */
.fc-track{display:contents}
.fc-dup{display:none}
@media(max-width:700px){
  .hero.hero--photo .hero-rail{display:none}

  .fdr-cred{container-type:inline-size;overflow:hidden;margin-top:1.4rem;
    border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent)}
  .fdr-cred > .fc-track{display:flex;flex-direction:row;flex-wrap:nowrap;width:max-content;animation:fcTrain 24s linear infinite}
  .fdr-cred .fc-track > div{flex:0 0 50cqw;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
    padding:1rem 1rem 1rem 0;border:0;box-sizing:border-box}
  .fdr-cred .fc-track > div:last-child{border-bottom:0}
  .fdr-cred .fc-dup{display:flex}
  .fdr-cred .fc-n{width:auto;min-width:0;font-size:1.45rem;line-height:1}
  .fdr-cred .fc-l{font-size:.82rem;line-height:1.4}
  .fdr-cred:hover .fc-track,.fdr-cred:active .fc-track{animation-play-state:paused}
}
@keyframes fcTrain{from{transform:translateX(0)}to{transform:translateX(-200cqw)}}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .fdr-cred{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none}
  .fdr-cred > .fc-track{animation:none}
  .fdr-cred .fc-track > div{scroll-snap-align:start}
  .fdr-cred .fc-dup{display:none}
}

/* the desktop ".fdr-cred > div" row rule also matches the track wrapper — neutralize it */
@media(max-width:700px){
  .fdr-cred > .fc-track,
  .fdr-cred > .fc-track:last-child{gap:0;column-gap:0;padding:0;border:0;align-items:stretch}
  .hero.hero--photo .hero-rail > .hr-track{gap:0;column-gap:0;padding:0;border:0}
}


/* phone-only removals + homepage hero air */
@media(max-width:700px){
  .hide-phone{display:none!important}
  /* hero ~10% taller: 632 → ~700px; the extra space sits above the copy, which stays anchored to the foot */
  .hero.hero--photo .slab > .container{min-height:700px;padding-bottom:2.1rem}
}
@media(max-width:380px){
  .hero.hero--photo .slab > .container{min-height:660px}
}

/* founder CTA: always one line */
#founder .txt-link{white-space:nowrap}


/* =========================================================
   Phone rails: obvious that there is more to the right
   ========================================================= */
.rail-cue{display:none}
@media(max-width:700px){
  /* a fifth of the next card is always in view, not a sliver */
  .qrail,.mrail{gap:12px;scroll-padding-left:0}
  .qrail .qcard,.mrail .mcard{flex:0 0 78%}
  .rail-cue{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.1rem}
  .rc-bars{display:flex;gap:6px}
  .rc-bars span{display:block;width:18px;height:3px;border-radius:2px;background:var(--hair);
    transition:width .3s var(--ease),background .3s var(--ease)}
  .rc-bars span.on{width:34px;background:var(--ink)}
  .rc-hint{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:600;color:var(--ink);
    transition:opacity .4s var(--ease)}
  .rc-hint svg{animation:rcNudge 1.6s var(--ease) infinite}
  .rail-cue.used .rc-hint{opacity:0}
  .sec--svc-dark .rc-bars span{background:rgba(255,255,255,.22)}
  .sec--svc-dark .rc-bars span.on{background:#fff}
  .sec--svc-dark .rc-hint{color:#fff}
}
@keyframes rcNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.rc-hint svg{animation:none}}

/* the cue becomes its own grid row — cancel the parent's row-gap so it sits with the cards */
@media(max-width:700px){
  .qrail-split > .rail-cue{margin-top:calc(1.1rem - 40px)}
  .mrail-split > .rail-cue{margin-top:calc(1.1rem - 36px)}
}


/* benefits photo: keep the frame as the image's positioning box (not sticky, not static) —
   'static' let the absolutely-positioned image escape and cover the whole section */
.sec--ben .ben-photo{position:relative;top:auto;overflow:hidden;isolation:isolate}
.sec--ben .ben-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}


/* ROI band: ~15% taller so the statement has room */
.sec.sec--roi{padding:clamp(6.25rem,10.5vw,9.75rem) 0}
@media(max-width:700px){.sec.sec--roi{padding:clamp(4.25rem,14vw,5.75rem) 0}}


/* =========================================================
   Footer — condensed on phones
   ========================================================= */
@media(max-width:700px){
  .ftr-nl{padding:2rem 0 1.75rem;gap:1rem}
  .ftr-nl h3{font-size:1.3rem}
  .ftr-nl .nl-sub{display:none}

  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1.25rem;padding:1.75rem 0}
  .ftr-brand{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .ftr-brand p{display:none}
  .ftr-brand .ftr-chip{margin-top:0}
  .ftr-col--ind{display:none}
  .ftr-col{gap:.55rem}
  .ftr-col h4{margin-bottom:.2rem}
  .ftr-col a,.ftr-col span{font-size:.9rem;line-height:1.35}

  .ftr-legal{flex-direction:column;align-items:flex-start;gap:.6rem;padding:1.1rem 0 1.4rem;font-size:.8rem}
  .ftr-legal-links{gap:.5rem 1.1rem;font-size:.8rem}
}

/* contact form intro on phones: heading + one line, straight into the form */
@media(max-width:700px){
  .fm-brief .fm-facts,.fm-brief .fm-notes{display:none}
}

/* Who we work with hero: same phone height as Services */
@media(max-width:700px){.shero--who .shero-inner{min-height:min(86dvh,660px)}}


/* =========================================================
   CTA labels never wrap — the button moves to its own row instead
   ========================================================= */
.btn,.txt-link,.gb-cta,.nav-cta,.shero-cta,.fi-link{white-space:nowrap}
.btn{flex:0 0 auto;max-width:100%}
.aud-actions,.mode-actions,.ind-foot,.cta-actions,.hero-ctas,.keep-case,.fq-head,.fplace-actions,.mrow-actions,.ml-actions{flex-wrap:wrap}
@media(max-width:700px){
  .btn,.gb-cta{padding-left:1.15rem;padding-right:1.15rem}
  .mode-card .mode-actions{flex-direction:column;align-items:flex-start}
}
@media(max-width:380px){
  .btn,.gb-cta{font-size:.88rem;padding-left:1rem;padding-right:1rem}
}


/* =========================================================
   THANK-YOU PAGE + conditional form fields
   ========================================================= */
.cf-cond[hidden]{display:none}
.cf-req[hidden]{display:none}
.thx-hero{text-align:left}
.thx-mark{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--blue);color:#fff;margin-bottom:1.4rem}
.thx-mark svg{width:20px;height:20px}
.thx-next{padding-top:clamp(2.5rem,5vw,4rem)}
.thx-h2{font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:600;letter-spacing:-.024em;color:var(--ink)}
.thx-steps{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.thx-steps li{display:flex;gap:1rem;border-top:1px solid var(--ink);padding-top:1.3rem}
.thx-n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--hair);font-size:.85rem;font-weight:600;color:var(--ink)}
.thx-steps h3{font-size:1.1rem;font-weight:600;letter-spacing:-.016em;line-height:1.3;color:var(--ink)}
.thx-steps p{margin-top:.5rem;font-size:.97rem;line-height:1.6;color:var(--body)}
.thx-more{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--hair)}
.thx-more > p{font-size:.95rem;font-weight:600;color:var(--ink)}
.thx-actions{justify-content:flex-start;margin-top:1rem}
@media(max-width:900px){.thx-steps{grid-template-columns:1fr;gap:1.4rem}}


/* quote band: brushed-metal photo (3:2), lit edge kept upper-left of the quote */
.quoteband .qb-img{aspect-ratio:auto;object-position:35% 30%}


/* four-questions rail, mobile: the section bleeds right so the cards can peek,
   but the heading and intro were bleeding with it (0 right margin). Give the text
   the same gutter as every other section; the card rail still runs to the edge. */
@media(max-width:820px){
  .qrail-head{padding-right:var(--gutter)}
  .qrail-split > .rail-cue{margin-right:var(--gutter)}
}


/* ===== COHORT CARD (trial) — delete this block + restore drafts/services-before-cohort-card.html to revert ===== */
.svc--wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:start}
.svc--wide .svw-main,.svc--wide .svw-side{display:flex;flex-direction:column;min-width:0}
.svc--wide .svw-side{height:100%;padding-left:clamp(2rem,4vw,3.5rem);border-left:1px solid var(--hair)}
.svw-for{margin-top:.9rem;font-size:.97rem;font-weight:600;color:var(--blue-hover)}
.svc--wide .svc-fit{margin-top:1rem}
.svw-proof{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--hair);
  font-size:1rem;line-height:1.6;color:var(--ink);font-weight:500}
.svc--wide .svc-label{margin-top:0}
.svc--wide .svc-cta{margin-top:auto}
.svc--wide .svc-list{margin-bottom:1.75rem}
@media(max-width:900px){
  .svc--wide{grid-template-columns:1fr;gap:0}
  .svc--wide .svw-side{padding-left:0;border-left:0;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--hair)}
}
.svc--wide .svc-label{border-top:0;padding-top:0}
/* ===== /COHORT CARD (trial) ===== */


/* guide covers: the real title pages replace the drawn mockups */
.gsheet--cover{padding:0;overflow:hidden;background:none}
.gsheet--cover img{display:block;width:100%;height:100%;object-fit:cover}
.gmock--lav .gsheet--cover{border-color:var(--hair)}
.gmock--ink .gsheet--cover{border-color:var(--space-900)}


/* Founder credentials, desktop: the mobile rail's track wrapper was being styled as
   one flex row, so four figures ran inline and their labels collided. 2×2, figure over label. */
@media(min-width:701px){
  .fdr-cred{margin-top:1.75rem;border:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .fdr-cred > .fc-track,.fdr-cred > .fc-track:last-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    width:auto;gap:0;padding:0;border:0;animation:none;align-items:stretch}
  .fdr-cred .fc-track > div{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;
    padding:1.15rem 1.25rem 1.2rem 0;border:0;border-top:1px solid var(--hair)}
  .fdr-cred .fc-track > div:nth-child(even){padding-left:1.25rem;border-left:1px solid var(--hair)}
  .fdr-cred .fc-track > div:nth-child(3),.fdr-cred .fc-track > div:nth-child(4){border-bottom:1px solid var(--hair)}
  .fdr-cred .fc-dup{display:none}
  .fdr-cred .fc-n{width:auto;min-width:0;font-size:1.5rem;line-height:1;letter-spacing:-.025em}
  .fdr-cred .fc-l{font-size:.92rem;line-height:1.45;color:var(--body)}
  .sec--fdr .fdr-cred + .btn,.sec--fdr .fdr-split .btn{margin-top:2rem}
}

@media(min-width:701px){.fdr-cred .fc-track > div.fc-dup{display:none}}


/* newsletter: first name + email + subscribe */
.ftr .nl-pill{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) auto;gap:.6rem;align-items:stretch}
.ftr .nl-pill .sr-only{position:absolute}
.ftr .nl-pill .btn{width:auto;white-space:nowrap}
.ftr-nl{grid-template-columns:minmax(0,1fr) minmax(0,600px)}
.nl-note.ok{color:#fff}
.nl-note.err{color:#FFB4A8}
@media(max-width:1000px){.ftr-nl{grid-template-columns:1fr}}
@media(max-width:600px){
  .ftr .nl-pill{grid-template-columns:minmax(0,1fr) auto}
  .ftr .nl-pill #nl-first{grid-column:1 / -1}
  .ftr .nl-pill .btn{flex:none;width:auto}
}

/* mobile: email takes the full-width line; first name sits beside Subscribe */
@media(max-width:600px){
  .ftr .nl-pill{grid-template-columns:minmax(0,1fr) auto}
  .ftr .nl-pill #nl-first{grid-column:auto;grid-row:2}
  .ftr .nl-pill #nl-email{grid-column:1 / -1;grid-row:1}
  .ftr .nl-pill .btn{grid-row:2}
}

/* homepage hero, mobile: drop the chip so the headline leads */
@media(max-width:700px){ .hero--photo .hero-copy > .chip{display:none} }

/* footer legal bar, mobile: email on its own line, Privacy · Terms together, copyright last */
@media(max-width:600px){
  .ftr-legal{flex-direction:column;align-items:flex-start;gap:.9rem;padding:1.4rem 0 1.6rem}
  .ftr-legal > span{order:2;font-size:.82rem;color:rgba(255,255,255,.5)}
  .ftr-legal-links{order:1;display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 1.5rem;width:100%}
  .ftr-legal-links a{font-size:.92rem}
  .ftr-legal-links a[href^="mailto:"]{flex:1 0 100%;color:rgba(255,255,255,.82)}
}

.nw{white-space:nowrap}
@media(max-width:600px){ .ftr-legal > span{text-wrap:balance} }