:root{
  --bg:#031426;
  --bg2:#061b31;
  --ink:#f2f0e8;
  --muted:rgba(242,240,232,.58);
  --soft:rgba(242,240,232,.22);
  --line:rgba(203,171,92,.18);
  --gold:#c9a85a;
  --gold2:#8f7438;
  --blue:#0a2746;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-height:100vh;background:radial-gradient(900px 580px at 76% 13%,rgba(18,52,88,.7),transparent 55%),linear-gradient(180deg,#031426 0%,#05182b 38%,#031426 100%);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",sans-serif;font-size:13px;line-height:1.45;overflow-x:hidden;letter-spacing:-.015em}
body::selection{background:var(--gold);color:#06111d}
a{color:inherit;text-decoration:none}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;background:transparent}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
.progress{position:fixed;left:0;right:0;top:0;height:1px;z-index:20;background:rgba(255,255,255,.05)}
.progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,var(--gold),rgba(201,168,90,.25));will-change:transform}
.nav{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:24px clamp(20px,5vw,70px);font-size:10px;letter-spacing:.08em;text-transform:lowercase;color:rgba(242,240,232,.76);mix-blend-mode:screen}
.brand{display:flex;gap:8px;align-items:center;font-weight:600}
.brand span{width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 18px rgba(201,168,90,.9)}
.nav nav{display:flex;gap:22px}.nav a{transition:color .25s,opacity .25s}.nav a:hover{color:var(--gold)}
main,section,header{position:relative;z-index:2}.zone{min-height:100vh;padding:110px clamp(20px,5vw,70px);max-width:calc(var(--max) + 140px);margin:0 auto}.hero{display:flex;flex-direction:column;justify-content:center;gap:7vh}.kicker,.section-mark,.pre{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:600}.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(40px,8vw,110px);align-items:end}.hero-copy{max-width:660px;transform-style:preserve-3d;will-change:transform}.hero h1,.section-title h2,.stage-copy h2,.proof h2,.contact h2{font-family:ui-serif,Georgia,Cambria,"Times New Roman",serif;font-weight:400;letter-spacing:-.055em;line-height:.92;margin:0;color:var(--ink)}
.hero h1{font-size:clamp(38px,5.2vw,74px)}em{font-style:italic;color:var(--gold);font-weight:400}.lede{max-width:460px;margin:28px 0 0;color:var(--muted);font-size:14px;line-height:1.9;letter-spacing:-.02em}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:34px}.primary{border:1px solid rgba(201,168,90,.42);border-radius:999px;padding:11px 17px;background:rgba(201,168,90,.11);color:var(--ink);font-size:12px;transition:transform .25s,border-color .25s,background .25s}.primary:hover{transform:translateY(-2px);border-color:rgba(201,168,90,.8);background:rgba(201,168,90,.18)}.plain{font-size:12px;color:var(--muted)}.plain:hover{color:var(--gold)}.scroll-cue{position:absolute;bottom:28px;left:clamp(20px,5vw,70px);font-size:10px;color:rgba(242,240,232,.42);letter-spacing:.14em;text-transform:uppercase}
.live-card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));padding:18px;min-height:380px;display:flex;flex-direction:column;justify-content:space-between;transform-style:preserve-3d;will-change:transform}.live-top,.readout{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.live-top b{color:var(--gold);font-weight:500}.pulse-map{height:190px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:28px 0}.pulse-map i{border:1px solid rgba(201,168,90,.14);background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(201,168,90,.28),transparent 38%);transition:opacity .3s}.readout{border-top:1px solid var(--line);padding-top:12px}.readout strong{font-size:20px;color:var(--ink);font-weight:500;letter-spacing:-.04em}
.split{display:grid;grid-template-columns:360px minmax(0,1fr);gap:clamp(42px,8vw,120px);align-items:start}.section-title{position:sticky;top:120px}.section-title h2,.stage-copy h2,.proof h2,.contact h2{font-size:clamp(30px,4vw,58px)}.section-title p,.stage-text,.micro-copy{margin-top:24px;color:var(--muted);max-width:330px;line-height:1.8}.capabilities{border-top:1px solid var(--line)}.cap{min-height:132px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:50px 170px 1fr;gap:20px;align-items:center;padding:22px 0;cursor:pointer;opacity:.58;transition:opacity .2s,transform .2s,background .2s}.cap span{font-size:10px;color:var(--gold)}.cap h3{font-family:ui-serif,Georgia,serif;font-size:24px;font-weight:400;margin:0;letter-spacing:-.04em}.cap p{margin:0;color:var(--muted);max-width:420px}.cap.active,.cap:hover{opacity:1;transform:translateX(10px);background:linear-gradient(90deg,rgba(201,168,90,.06),transparent)}
.system{min-height:190vh}.sticky-stage{position:sticky;top:0;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:70px;align-items:center}.sequence{display:grid;gap:10px}.step{border:1px solid rgba(201,168,90,.12);padding:18px;background:rgba(255,255,255,.018);opacity:.45;transform:translateY(18px) scale(.98);transition:opacity .25s,transform .25s,border-color .25s,background .25s}.step.current{opacity:1;transform:translateY(0) scale(1);border-color:rgba(201,168,90,.45);background:rgba(201,168,90,.07)}.step span{font-size:10px;color:var(--gold);letter-spacing:.14em}.step b{display:block;margin-top:12px;font-family:ui-serif,Georgia,serif;font-size:27px;font-weight:400}.step p{margin:8px 0 0;color:var(--muted);max-width:270px}.proof h2{max-width:850px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:70px;border:1px solid var(--line);background:var(--line)}.metric{background:rgba(3,20,38,.92);min-height:200px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;transform-style:preserve-3d;will-change:transform}.metric strong{font-family:ui-serif,Georgia,serif;font-size:46px;font-weight:400;color:var(--gold);letter-spacing:-.06em}.metric span{color:var(--muted);max-width:170px}.intelligence{min-height:100vh;display:grid;grid-template-columns:1fr 380px;gap:70px;align-items:center}.brief-lab{border:1px solid rgba(201,168,90,.22);background:linear-gradient(135deg,rgba(201,168,90,.08),rgba(255,255,255,.018));padding:24px;width:min(620px,100%);margin-left:auto;transform-style:preserve-3d;will-change:transform}.lab-meta,.lab-line{display:flex;justify-content:space-between;gap:30px;border-bottom:1px solid var(--line);padding:16px 0;font-size:11px}.lab-meta{padding-top:0;color:var(--gold);text-transform:uppercase;letter-spacing:.14em}.lab-line span{color:var(--muted)}.lab-line em{text-align:right;max-width:280px;color:var(--ink)}button{margin-top:22px;border:1px solid rgba(201,168,90,.35);background:transparent;color:var(--gold);border-radius:999px;padding:10px 14px;font:inherit;font-size:11px;cursor:pointer}button:hover{background:rgba(201,168,90,.1)}.contact{min-height:96vh;display:flex;flex-direction:column;justify-content:center}.contact h2{max-width:620px}.email{font-family:ui-serif,Georgia,serif;font-size:clamp(22px,3vw,42px);margin-top:30px;color:var(--gold);width:max-content}.email:hover{color:var(--ink)}footer{position:absolute;left:clamp(20px,5vw,70px);right:clamp(20px,5vw,70px);bottom:28px;display:flex;justify-content:space-between;color:rgba(242,240,232,.4);font-size:10px;text-transform:uppercase;letter-spacing:.14em;border-top:1px solid rgba(201,168,90,.12);padding-top:16px}
.is-visible{animation:rise .7s both}@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.nav{padding:20px}.nav nav{gap:12px}.hero-grid,.split,.sticky-stage,.intelligence{grid-template-columns:1fr}.live-card{min-height:300px}.section-title{position:relative;top:auto}.cap{grid-template-columns:40px 1fr;align-items:start}.cap p{grid-column:2}.metrics{grid-template-columns:1fr 1fr}.system{min-height:auto}.sticky-stage{position:relative;min-height:auto}.zone{padding:96px 20px}.hero h1{font-size:clamp(34px,12vw,58px)}}
@media(max-width:560px){body{font-size:12px}.nav nav a:nth-child(2),.nav nav a:nth-child(3){display:none}.hero-actions{gap:16px}.metrics{grid-template-columns:1fr}.live-card{display:none}.section-title h2,.stage-copy h2,.proof h2,.contact h2{font-size:34px}.cap h3{font-size:22px}footer{display:grid;gap:8px}.intelligence{display:block}.micro-copy{margin-top:24px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}#field{display:none}}


/* v14 performance pass: keep the same design, reduce paint/composite cost */
.zone, .cap, .step, .metric, .brief-lab { content-visibility:auto; contain-intrinsic-size: 720px; }
.hero, .contact { content-visibility:visible; }
#field { contain:strict; }
@media(max-width:560px){
  .noise{display:none}
  .cap:hover{transform:none}
  .metric{min-height:156px}
}

/* v17: client content applied to the approved v14 visual system. */
.brand-logo{display:block;width:78px;height:18px}
.brand-logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}
.about-zone{padding-top:0}
.about-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:7vh;position:relative;padding-top:110px}
.content-block{padding-top:120px;padding-bottom:40px}
.founder-grid-v14{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(36px,7vw,90px);align-items:center;margin-top:46px}
.founder-portrait{border:1px solid var(--line);padding:8px;background:rgba(255,255,255,.018);transform-style:preserve-3d;will-change:transform}
.founder-portrait img{display:block;width:100%;aspect-ratio:1;object-fit:cover;filter:saturate(.8) contrast(.96)}
.founder-copy-v14 h2{font-family:ui-serif,Georgia,Cambria,"Times New Roman",serif;font-weight:400;letter-spacing:-.05em;line-height:.96;font-size:clamp(30px,4vw,54px);margin:16px 0 22px}
.founder-copy-v14 p{max-width:670px;color:var(--muted);line-height:1.8;margin:0 0 16px}
.muted-copy{opacity:.82}
.about-metrics{margin-top:54px}
.services-zone{padding-top:130px}
.services-intro{margin-bottom:130px}
.disciplines-v14{padding-top:0}
.discipline-stack{border-top:1px solid var(--line);margin-top:30px}
.discipline-row{border-bottom:1px solid var(--line)}
.discipline-head{width:100%;margin:0;border:0;border-radius:0;padding:22px 0;background:transparent;display:grid;grid-template-columns:50px minmax(180px,1fr) minmax(180px,.7fr) 20px;gap:20px;align-items:center;text-align:left;color:var(--ink)}
.discipline-head:hover{background:linear-gradient(90deg,rgba(201,168,90,.06),transparent)}
.discipline-head span{font-size:10px;color:var(--gold)}
.discipline-head b{font-family:ui-serif,Georgia,serif;font-size:22px;font-weight:400;letter-spacing:-.04em}
.discipline-head em{font-family:inherit;font-style:normal;color:var(--muted);font-size:12px}
.discipline-head i{font-style:normal;color:var(--gold);font-size:18px;text-align:right}
.discipline-body-v14{padding:0 0 26px 70px;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted)}
.discipline-body-v14[hidden]{display:none}
.discipline-body-v14 span{font-size:11px;padding:6px 0;border-bottom:1px solid rgba(201,168,90,.12)}
.process-v14{margin-top:60px}
.process-v14 .sequence{grid-template-columns:1fr}
.connect-zone{justify-content:flex-start;padding-top:130px}
.connect-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:clamp(42px,8vw,120px);align-items:start;margin-top:60px}
.connect-grid>div:first-child{position:sticky;top:120px}
.connect-grid h2{font-family:ui-serif,Georgia,Cambria,"Times New Roman",serif;font-weight:400;letter-spacing:-.055em;line-height:.92;margin:0;color:var(--ink);font-size:clamp(30px,4vw,58px)}
.contact-line{margin-top:120px;padding-top:34px;border-top:1px solid var(--line)}
.contact-meta{color:var(--muted);font-size:11px;letter-spacing:.02em;margin-top:14px}
@media(max-width:900px){
  .founder-grid-v14,.connect-grid{grid-template-columns:1fr}
  .founder-portrait{max-width:220px}
  .connect-grid>div:first-child{position:relative;top:auto}
  .discipline-head{grid-template-columns:40px 1fr 20px}.discipline-head em{display:none}
  .discipline-body-v14{padding-left:60px}
}
@media(max-width:560px){
  .brand-logo{width:68px;height:16px}
  .about-hero{padding-top:96px}
  .content-block{padding-top:88px}
  .services-intro{margin-bottom:90px}
  .founder-grid-v14{gap:28px}
  .discipline-body-v14{padding-left:40px}
  .contact-line{margin-top:80px}
}

/* v20 — Apple-like confidence pass.
   Preserve the approved v17 layout and palette; only rebalance type hierarchy and polish scale. */
:root{
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
}
body{
  font-family:var(--text);
  font-size:15px;
  line-height:1.55;
  letter-spacing:-.012em;
}
.nav{
  font-size:11.5px;
  letter-spacing:.075em;
  padding-top:26px;
  padding-bottom:26px;
}
.brand-logo{width:96px;height:24px}
.kicker,.section-mark,.pre{
  font-size:11px;
  letter-spacing:.22em;
  font-weight:650;
}
.hero h1,
.section-title h2,
.stage-copy h2,
.proof h2,
.contact h2,
.founder-copy-v14 h2,
.connect-grid h2{
  font-family:var(--display);
  font-weight:620;
  letter-spacing:-.048em;
  line-height:.96;
}
em{
  font-family:inherit;
  font-style:normal;
  font-weight:inherit;
  color:var(--gold);
}
.hero-copy{max-width:760px}
.hero h1{font-size:clamp(58px,6vw,88px)}
.lede{
  max-width:590px;
  margin-top:32px;
  font-size:17px;
  line-height:1.65;
  letter-spacing:-.018em;
}
.hero-actions{margin-top:38px;gap:30px}
.primary,.plain{font-size:13.5px}
.primary{padding:12px 19px}
.scroll-cue{font-size:10.5px}
.section-title h2,.stage-copy h2,.proof h2,.contact h2,.connect-grid h2{
  font-size:clamp(46px,4.7vw,66px);
}
.section-title p,.stage-text,.micro-copy{
  font-size:15px;
  line-height:1.72;
  max-width:390px;
}
.split{grid-template-columns:390px minmax(0,1fr)}
.cap{
  min-height:146px;
  grid-template-columns:52px 200px 1fr;
  padding:26px 0;
}
.cap span{font-size:11px}
.cap h3{
  font-family:var(--display);
  font-size:27px;
  font-weight:570;
  letter-spacing:-.032em;
  line-height:1.05;
}
.cap p{
  font-size:14.5px;
  line-height:1.65;
}
.founder-copy-v14 h2{
  font-size:clamp(48px,4.8vw,66px);
  margin:18px 0 24px;
}
.founder-copy-v14 p{
  font-size:15px;
  line-height:1.7;
}
.metric{min-height:215px;padding:28px}
.metric strong{
  font-family:var(--display);
  font-size:clamp(54px,4.5vw,68px);
  font-weight:610;
  letter-spacing:-.055em;
}
.metric span{font-size:13.5px;line-height:1.45}
.discipline-head{padding:26px 0}
.discipline-head span{font-size:11px}
.discipline-head b{
  font-family:var(--display);
  font-size:25px;
  font-weight:580;
  letter-spacing:-.032em;
}
.discipline-head em{font-size:13px;color:var(--muted)}
.discipline-body-v14 span{font-size:12.5px;padding:8px 0}
.step{padding:20px}
.step span{font-size:10.5px}
.step b{
  font-family:var(--display);
  font-size:27px;
  font-weight:580;
  letter-spacing:-.03em;
}
.step p{font-size:13.5px;line-height:1.55}
.email{
  font-family:var(--display);
  font-size:clamp(34px,3.5vw,50px);
  font-weight:560;
  letter-spacing:-.035em;
}
.contact-meta{font-size:12px}
footer{font-size:10.5px}

@media(max-width:900px){
  body{font-size:14.5px}
  .brand-logo{width:90px;height:22px}
  .hero h1{font-size:clamp(52px,10vw,72px)}
  .lede{font-size:16.5px;max-width:560px}
  .section-title h2,.stage-copy h2,.proof h2,.contact h2,.connect-grid h2{font-size:clamp(42px,7.5vw,58px)}
  .split{grid-template-columns:1fr}
  .cap{grid-template-columns:42px 1fr;min-height:132px}
  .cap p{grid-column:2}
  .cap h3{font-size:26px}
  .founder-copy-v14 h2{font-size:clamp(42px,7.5vw,58px)}
}

@media(max-width:560px){
  body{font-size:14px}
  .nav{font-size:11px;padding:20px}
  .brand-logo{width:86px;height:21px}
  .kicker,.section-mark,.pre{font-size:10px;letter-spacing:.18em}
  .hero h1{font-size:clamp(48px,14.2vw,64px);line-height:.98}
  .lede{font-size:16px;line-height:1.58;margin-top:26px}
  .primary,.plain{font-size:13px}
  .section-title h2,.stage-copy h2,.proof h2,.contact h2,.connect-grid h2{font-size:40px;line-height:.98}
  .section-title p,.stage-text,.micro-copy{font-size:14.5px;line-height:1.62}
  .cap{padding:23px 0}
  .cap h3{font-size:24px}
  .cap p{font-size:14px}
  .founder-copy-v14 h2{font-size:40px}
  .founder-copy-v14 p{font-size:14.5px}
  .metric strong{font-size:52px}
  .metric span{font-size:13px}
  .discipline-head b{font-size:22px}
  .discipline-body-v14 span{font-size:12px}
  .step b{font-size:25px}
  .email{font-size:clamp(28px,8.8vw,38px)}
}

/* v21 — confident scale only.
   IMPORTANT: visual layout, palette and particle field remain untouched.
   This pass only increases typographic presence and hierarchy. */

/* Desktop navigation: no longer metadata-small. */
.nav{
  font-size:15px;
  letter-spacing:.055em;
  padding-top:28px;
  padding-bottom:28px;
}
.nav nav{gap:34px}
.brand-logo{width:124px;height:31px}

/* Hero microcopy is still restrained, but readable and intentional. */
.kicker,.section-mark,.pre{
  font-size:13px;
  letter-spacing:.20em;
  font-weight:650;
}

/* Strong Apple-like headline presence. Explicit line breaks keep it controlled. */
.hero-copy{max-width:900px}
.hero h1{
  font-size:clamp(88px,7.2vw,118px);
  line-height:.91;
  letter-spacing:-.055em;
  font-weight:650;
}
.lede{
  max-width:690px;
  margin-top:38px;
  font-size:20px;
  line-height:1.55;
  letter-spacing:-.022em;
}
.hero-actions{margin-top:42px;gap:34px}
.primary,.plain{font-size:15px}
.primary{padding:13px 21px}
.scroll-cue{font-size:11.5px}

/* Keep the rest of the page proportional to the stronger hero. */
.section-title h2,.stage-copy h2,.proof h2,.contact h2,.connect-grid h2{
  font-size:clamp(56px,5vw,76px);
  line-height:.94;
}
.section-title p,.stage-text,.micro-copy{
  font-size:17px;
  line-height:1.66;
  max-width:430px;
}
.founder-copy-v14 h2{
  font-size:clamp(58px,5vw,76px);
}
.founder-copy-v14 p{
  font-size:17px;
  line-height:1.65;
}
.cap h3{font-size:30px}
.cap p{font-size:16px;line-height:1.6}
.metric strong{font-size:clamp(62px,5vw,78px)}
.metric span{font-size:15px}
.discipline-head b{font-size:28px}
.discipline-head em{font-size:14px}
.discipline-body-v14 span{font-size:13.5px}
.step b{font-size:30px}
.step p{font-size:15px}
.email{font-size:clamp(40px,4vw,58px)}
.contact-meta{font-size:13px}

@media(max-width:900px){
  .nav{font-size:14px}
  .nav nav{gap:24px}
  .brand-logo{width:112px;height:28px}
  .kicker,.section-mark,.pre{font-size:12px}
  .hero h1{font-size:clamp(70px,12vw,94px)}
  .lede{font-size:19px;max-width:620px}
  .primary,.plain{font-size:14.5px}
  .section-title h2,.stage-copy h2,.proof h2,.contact h2,.connect-grid h2{font-size:clamp(50px,8vw,68px)}
  .section-title p,.stage-text,.micro-copy{font-size:16.5px}
  .founder-copy-v14 h2{font-size:clamp(50px,8vw,68px)}
  .founder-copy-v14 p{font-size:16.5px}
  .cap h3{font-size:28px}
  .cap p{font-size:15.5px}
}

@media(max-width:560px){
  .nav{font-size:13.5px;padding:20px}
  .nav nav{gap:18px}
  .nav nav a:nth-child(2),.nav nav a:nth-child(3){display:inline}
  .brand-logo{width:104px;height:26px}
  .kicker,.section-mark,.pre{font-size:11px;letter-spacing:.16em}
  .hero h1{
    font-size:clamp(62px,17vw,80px);
    line-height:.92;
  }
  .lede{font-size:18px;line-height:1.5;margin-top:30px}
  .primary,.plain{font-size:14px}
  .hero-actions{gap:20px;flex-wrap:wrap}
  .section-title h2,.stage-copy h2,.proof h2,.contact h2,.connect-grid h2{font-size:48px;line-height:.95}
  .section-title p,.stage-text,.micro-copy{font-size:16px;line-height:1.58}
  .cap h3{font-size:27px}
  .cap p{font-size:15px}
  .founder-copy-v14 h2{font-size:48px}
  .founder-copy-v14 p{font-size:16px}
  .metric strong{font-size:58px}
  .metric span{font-size:14px}
  .discipline-head b{font-size:24px}
  .step b{font-size:27px}
  .email{font-size:clamp(30px,9vw,42px)}
}

/* v22 — executive hero reset.
   The first screen now uses only client-profile language, with a high-end editorial hierarchy.
   No duplicate eyebrow/tagline stack. */

.nav{
  padding:30px clamp(28px,3.8vw,68px);
  font-family:var(--display);
  font-size:16px;
  font-weight:500;
  letter-spacing:-.015em;
  text-transform:none;
  color:rgba(242,240,232,.86);
  mix-blend-mode:normal;
}
.nav nav{gap:38px}
.nav nav a{position:relative;padding:7px 0}
.nav nav a::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:1px;
  height:1px;
  background:var(--gold);
  transition:right .28s ease;
}
.nav nav a:hover::after{right:0}
.brand-logo{width:132px;height:33px}

.executive-hero{
  min-height:100svh;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:128px;
  padding-bottom:112px;
}
.executive-hero-grid{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,930px) 1fr;
  align-items:center;
}
.executive-copy{
  max-width:930px;
  position:relative;
  z-index:3;
}
.executive-copy h1{
  margin:0;
  font-family:var(--display);
  font-size:clamp(60px,5.25vw,90px);
  line-height:.98;
  letter-spacing:-.057em;
  font-weight:620;
  color:var(--ink);
  text-wrap:balance;
}
.executive-copy h1 em{
  display:block;
  margin-top:.08em;
  font:inherit;
  color:var(--gold);
}
.executive-lede{
  margin:34px 0 0;
  max-width:760px;
  color:rgba(242,240,232,.68);
  font-size:20px;
  line-height:1.55;
  letter-spacing:-.025em;
  font-weight:420;
}
.executive-actions{
  display:flex;
  align-items:center;
  gap:38px;
  margin-top:38px;
}
.executive-actions a{
  position:relative;
  display:inline-flex;
  gap:9px;
  align-items:center;
  padding:8px 0 9px;
  color:rgba(242,240,232,.9);
  font-size:16px;
  font-weight:520;
  letter-spacing:-.018em;
  border-bottom:1px solid rgba(201,168,90,.34);
  transition:color .22s,border-color .22s,transform .22s;
}
.executive-actions a span{color:var(--gold);font-size:.95em}
.executive-actions a:hover{color:var(--gold);border-color:var(--gold);transform:translateY(-1px)}
.executive-proof{
  position:absolute;
  right:clamp(28px,3.8vw,68px);
  bottom:72px;
  display:flex;
  gap:42px;
  z-index:3;
}
.executive-proof div{
  min-width:118px;
  padding-top:10px;
  border-top:1px solid rgba(201,168,90,.24);
}
.executive-proof strong{
  display:block;
  font-family:var(--display);
  font-size:24px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.045em;
  color:var(--ink);
}
.executive-proof span{
  display:block;
  margin-top:7px;
  font-size:11px;
  line-height:1.35;
  color:rgba(242,240,232,.48);
}
.executive-hero .scroll-cue{
  left:0;
  bottom:32px;
  font-size:10px;
  letter-spacing:.16em;
  color:rgba(242,240,232,.32);
}

/* Remove inherited hero rules from earlier revisions. */
.executive-hero .hero-grid,
.executive-hero .hero-copy,
.executive-hero .kicker,
.executive-hero .pre,
.executive-hero .hero-actions{all:unset}

/* Executive typography throughout the remaining three-section site. */
.section-mark{
  font-size:11px;
  letter-spacing:.16em;
  color:rgba(201,168,90,.78);
}
.section-title h2,.stage-copy h2,.proof h2,.contact h2,.connect-grid h2,
.founder-copy-v14 h2{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:.98;
}
.section-title h2,.stage-copy h2,.proof h2,.contact h2,.connect-grid h2{
  font-size:clamp(48px,4.4vw,70px);
}
.section-title p,.stage-text,.micro-copy,.founder-copy-v14 p{
  font-size:16.5px;
  line-height:1.65;
}
.cap h3,.discipline-head b,.step b{font-family:var(--display)}
.cap h3{font-size:28px;font-weight:580}
.cap p{font-size:15px}

@media(max-width:1100px){
  .executive-hero-grid{grid-template-columns:minmax(0,820px) 1fr}
  .executive-copy h1{font-size:clamp(58px,6.6vw,78px)}
  .executive-proof{gap:26px}
}

@media(max-width:900px){
  .nav{padding:24px 24px;font-size:15px}
  .nav nav{gap:24px}
  .brand-logo{width:118px;height:30px}
  .executive-hero{padding:122px 24px 138px;justify-content:center}
  .executive-hero-grid{display:block}
  .executive-copy{max-width:760px}
  .executive-copy h1{font-size:clamp(54px,9.2vw,72px)}
  .executive-lede{font-size:18px;max-width:620px}
  .executive-proof{left:24px;right:24px;bottom:60px;justify-content:flex-start}
  .executive-proof div{min-width:0;flex:0 1 150px}
  .executive-hero .scroll-cue{display:none}
}

@media(max-width:560px){
  .nav{padding:20px;font-size:13px}
  .nav nav{gap:15px}
  .brand-logo{width:104px;height:26px}
  .executive-hero{padding:112px 20px 176px;min-height:100svh}
  .executive-copy h1{font-size:clamp(46px,13.7vw,62px);line-height:.99;letter-spacing:-.05em}
  .executive-copy h1 em{margin-top:.12em}
  .executive-lede{font-size:17px;line-height:1.5;margin-top:28px}
  .executive-actions{gap:26px;margin-top:30px}
  .executive-actions a{font-size:14.5px}
  .executive-proof{bottom:52px;gap:16px}
  .executive-proof div{flex:1}
  .executive-proof strong{font-size:20px}
  .executive-proof span{font-size:9.5px}
  .section-title h2,.stage-copy h2,.proof h2,.contact h2,.connect-grid h2,.founder-copy-v14 h2{font-size:44px}
}

/* v23 — surgical interaction pass on the approved v22 executive layout. */
/* Hero copy is intentionally shorter; structure and scale remain v22. */
.executive-copy{max-width:820px}
.executive-copy h1{max-width:760px}
.executive-lede{max-width:650px}

/* Disciplines open on hover (desktop) and tap (touch), with a proper premium transition. */
.discipline-row{position:relative;overflow:hidden}
.discipline-head{cursor:pointer}
.discipline-body-v14{
  display:flex;
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding-top:0;
  padding-bottom:0;
  transform:translateY(-7px);
  transition:max-height .42s cubic-bezier(.22,.61,.36,1),opacity .24s ease,transform .34s ease,padding .34s ease;
}
.discipline-body-v14[hidden]{display:flex}
.discipline-row.open .discipline-body-v14{
  max-height:220px;
  opacity:1;
  transform:translateY(0);
  padding-bottom:26px;
}
.discipline-row.open .discipline-head{
  background:linear-gradient(90deg,rgba(201,168,90,.055),transparent 76%);
}
@media(max-width:560px){
  .discipline-row.open .discipline-body-v14{max-height:360px;padding-bottom:22px}
}


/* v24 — copy + cluster correction only. Layout remains v22/v23. */
.executive-copy h1{max-width:900px}
.executive-lede{max-width:720px}


/* v25 — V14 typography + casing only. Sizes and layout remain the current executive build. */
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",sans-serif;
}
.nav{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",sans-serif;
  text-transform:lowercase;
}
.executive-actions a{ text-transform:lowercase; }
.kicker,.section-mark,.pre{ text-transform:uppercase; }

/* Restore V14's editorial serif voice without changing any current font-size rules. */
.executive-copy h1,
.section-title h2,
.stage-copy h2,
.proof h2,
.contact h2,
.connect-grid h2,
.founder-copy-v14 h2,
.cap h3,
.discipline-head b,
.step b,
.email{
  font-family:ui-serif,Georgia,Cambria,"Times New Roman",serif;
  font-weight:400;
}
.executive-copy h1{
  letter-spacing:-.055em;
  line-height:.92;
}
.executive-copy h1 em{
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  font-weight:400;
  font-style:italic;
  color:var(--gold);
}

/* v35 — adaptive mobile scroll behavior only.
   Desktop layout and particle/constellation physics are unchanged. */
@media (hover:none), (pointer:coarse) {
  /* visualViewport-backed height avoids Safari chrome making the page behave like
     a taller/shorter device mid-scroll. Safe-area values cover modern notched phones. */
  .about-hero{min-height:var(--app-vh,100dvh)}
  .zone{
    padding-left:max(clamp(18px,5vw,28px),env(safe-area-inset-left));
    padding-right:max(clamp(18px,5vw,28px),env(safe-area-inset-right));
  }
  .nav{
    padding-left:max(clamp(18px,5vw,28px),env(safe-area-inset-left));
    padding-right:max(clamp(18px,5vw,28px),env(safe-area-inset-right));
  }

  /* Discipline expansion remains the same design, but touch devices get dimensions
     derived from viewport size rather than one phone-specific fixed size. */
  .discipline-stack{margin-top:clamp(22px,4dvh,32px)}
  .discipline-head{
    min-height:clamp(72px,10dvh,94px);
    padding-block:clamp(18px,2.8dvh,26px);
  }
  .discipline-row.open .discipline-body-v14{
    max-height:min(46dvh,430px);
    padding-bottom:clamp(18px,2.8dvh,26px);
  }

  /* On mobile the process is a normal document-flow sequence. Its active state is
     selected from each card's real screen position, so no synthetic scroll distance
     can run ahead of the user's thumb. */
  .process-v14{margin-top:clamp(52px,8dvh,76px)}
  .process-v14 .sticky-stage{gap:clamp(28px,5dvh,48px)}
  .process-v14 .sequence{gap:clamp(9px,1.4dvh,14px)}
  .process-v14 .step{padding:clamp(17px,2.6dvh,22px)}
}

/* Very compact modern phones (iPhone 13 mini class and similar) keep the same visual
   language but tighten only spacing that would otherwise crowd the viewport. */
@media (max-width:390px) and (hover:none), (max-width:390px) and (pointer:coarse) {
  .zone{padding-top:clamp(82px,11dvh,96px)}
  .content-block{padding-top:clamp(88px,12dvh,112px)}
  .services-intro{margin-bottom:clamp(88px,12dvh,116px)}
  .discipline-head{grid-template-columns:34px minmax(0,1fr) 18px;gap:12px}
  .discipline-body-v14{padding-left:46px}
  .process-v14 .stage-copy h2{margin-bottom:0}
}

@media (orientation:landscape) and (hover:none), (orientation:landscape) and (pointer:coarse) {
  .discipline-head{min-height:64px;padding-block:14px}
  .discipline-row.open .discipline-body-v14{max-height:62dvh}
  .process-v14{margin-top:44px}
}

/* v36 — canonical mobile scroll + iOS stability pass.
   No desktop visual changes; mobile state is owned by one stable viewport focus line. */
@media (hover:none), (pointer:coarse) {
  /* Do not tie document geometry to Safari's animated visualViewport height. */
  .about-hero{min-height:100svh}

  /* Safari can flash auto-skipped content when rapidly scrolling a fixed canvas above it.
     Mobile pages are small enough that deterministic rendering is the better tradeoff. */
  .zone,.cap,.step,.metric,.brief-lab{
    content-visibility:visible;
    contain:none;
  }

  /* The reveal class used to animate from opacity:0 at the moment a section intersected,
     which can look like a page blink on iOS. Keep reveal motion on desktop only. */
  .is-visible{animation:none!important}

  /* Avoid unnecessary compositing layers on touch devices where tilt is disabled anyway. */
  .metric,.founder-portrait,.brief-lab{
    will-change:auto;
    transform-style:flat;
  }

  /* Scroll is the canonical interaction on touch. Active cards change quietly rather
     than jumping sideways as the focus line moves through About / Services / Connect. */
  .cap{transition:opacity .28s ease,background .28s ease,border-color .28s ease}
  .cap.active,.cap:hover{transform:none}
}
@media (hover:none), (pointer:coarse) {
  /* Prevent accordion height changes from making the browser auto-correct scroll
     position behind our viewport-driven state machine. */
  .discipline-stack,.discipline-row{overflow-anchor:none}
}

/* v37 — one scroll-owned interaction language on every device.
   Active/open/current state comes only from the canonical scroll controller. */
.cap{cursor:default}
.cap:hover{
  opacity:.58;
  transform:none;
  background:transparent;
}
.cap.active,.cap.active:hover{
  opacity:1;
  transform:translateX(10px);
  background:linear-gradient(90deg,rgba(201,168,90,.06),transparent);
}
.discipline-head{cursor:default}
.discipline-stack,.discipline-row{overflow-anchor:none}
@media (hover:none), (pointer:coarse) {
  .cap.active,.cap.active:hover{transform:none}
}

/* v38 — one physical scroll architecture everywhere.
   Every selectable section now uses the same pinned-stage + deterministic scroll-track
   mechanic as the approved Proven Process composition. */
.story-track{
  --story-steps:3;
  position:relative;
  min-height:var(--story-height,154svh);
  padding-top:0!important;
  padding-bottom:0!important;
  margin-top:0!important;
  margin-bottom:0!important;
  content-visibility:visible!important;
  contain:none!important;
  overflow:visible;
}
.story-track > .story-stage{
  position:sticky!important;
  top:0!important;
  height:100svh;
  min-height:100svh!important;
  width:100%;
  padding:clamp(86px,10svh,116px) 0 clamp(62px,8svh,92px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(22px,3.2svh,34px);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.story-track > .story-stage > .section-mark{margin:0}
.story-track .section-title{position:relative!important;top:auto!important}
.story-track .services-intro{margin-bottom:0!important}
.story-track .connect-grid{margin-top:0!important}
.story-track .connect-grid>div:first-child{position:relative!important;top:auto!important}

/* Keep the proven-process two-column composition as the visual reference on wide screens. */
.process-v14.story-track > .story-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) 440px;
  gap:70px;
  align-items:center;
}

/* The three scroll stories inside Services should meet without extra loose document flow. */
.services-zone{padding-top:0;padding-bottom:0}
.connect-zone{padding-top:0;padding-bottom:120px;display:block;min-height:auto}
.disciplines-v14{padding-top:0!important}
.process-v14{margin-top:0!important}

/* The active item is the scroll position made visible — no pointer-hover ownership. */
.story-track .cap,
.story-track .step,
.story-track .discipline-row{
  scroll-margin:0;
}
.story-track .cap.active,
.story-track .step.current{
  transition:opacity .26s ease,transform .26s ease,border-color .26s ease,background .26s ease;
}

@media(max-width:900px){
  .story-track{
    min-height:var(--story-height,154svh);
  }
  .story-track > .story-stage{
    height:100svh;
    min-height:100svh!important;
    padding:clamp(76px,9svh,92px) 0 clamp(42px,6svh,62px);
    gap:clamp(16px,2.5svh,24px);
    justify-content:center;
  }
  .story-track .split,
  .story-track .connect-grid{
    grid-template-columns:1fr;
    gap:clamp(16px,2.8svh,26px);
  }
  .story-track .section-title p,
  .story-track .stage-text{margin-top:clamp(10px,1.8svh,16px);line-height:1.52}
  .story-track .cap{
    min-height:0;
    padding:clamp(12px,1.8svh,17px) 0;
  }
  .story-track .cap p{line-height:1.45}

  /* Process now follows the exact same pinned-scroll geometry on phones/tablets too. */
  .process-v14.story-track > .story-stage{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:clamp(14px,2.2svh,22px);
  }
  .process-v14 .sequence{gap:clamp(5px,.9svh,9px)}
  .process-v14 .step{padding:clamp(10px,1.6svh,15px)}
  .process-v14 .step b{margin-top:clamp(5px,.8svh,9px)}
  .process-v14 .step p{margin-top:4px}

  /* Accordion remains expandable, but its geometry lives inside a fixed pinned stage. */
  .story-disciplines .discipline-stack{margin-top:0}
  .story-disciplines .discipline-head{min-height:0;padding:clamp(13px,2svh,18px) 0}
  .story-disciplines .discipline-row.open .discipline-body-v14{
    max-height:min(34svh,300px);
    padding-bottom:clamp(12px,1.8svh,18px);
  }
  .story-disciplines .discipline-body-v14{gap:5px 14px}
  .story-disciplines .discipline-body-v14 span{font-size:11.5px;padding:5px 0}

  .connect-zone{padding-bottom:100px}
  .contact-line{margin-top:clamp(64px,9svh,88px)}
}

@media(max-width:390px){
  .story-track > .story-stage{
    padding-top:max(70px,calc(env(safe-area-inset-top) + 56px));
    padding-bottom:max(34px,calc(env(safe-area-inset-bottom) + 20px));
    gap:14px;
  }
  .story-track .split,
  .story-track .connect-grid{gap:14px}
  .story-track .cap{padding:10px 0}
  .story-track .cap p{font-size:12px;line-height:1.38}
  .story-track .cap h3{font-size:21px}
  .process-v14 .sequence{gap:4px}
  .process-v14 .step{padding:9px 12px}
  .process-v14 .step b{font-size:20px}
  .process-v14 .step p{font-size:11.5px}
  .story-disciplines .discipline-head{padding:11px 0}
  .story-disciplines .discipline-row.open .discipline-body-v14{max-height:30svh}
}

/* v39 — requested refinements on the approved v38 pinned architecture. */

/* Founder is its own pinned proof story. The count-up runs once automatically;
   the longer sticky travel deliberately holds the finished proof on screen. */
.founder-story{
  --story-height:220svh;
}
.founder-story > .founder-stage{
  justify-content:center;
}
.founder-story .founder-grid-v14{
  margin-top:0;
}
.founder-story .about-metrics{
  margin-top:clamp(28px,4.5svh,52px);
}

/* The process copy is centered in the viewport independently of the taller step stack. */
@media(min-width:901px){
  .process-v14.story-track > .story-stage{
    position:sticky!important;
    align-items:start;
  }
  .process-v14.story-track .stage-copy{
    position:absolute;
    left:0;
    top:50%;
    width:min(520px,calc(100% - 520px));
    transform:translateY(-50%);
    z-index:1;
  }
  .process-v14.story-track .sequence{
    grid-column:2;
    align-self:start;
  }
}

/* Scroll is canonical; click/tap is the only manual preview. Hover must be visually
   inert so a resting mouse can never compete with the scroll-owned active item. */
.story-track .cap,
.story-track .step,
.story-track .discipline-head{
  cursor:pointer;
}
.story-track .cap:not(.active):hover{
  opacity:.58;
  transform:none;
  background:transparent;
}
.story-track .cap.active:hover{
  opacity:1;
  transform:translateX(10px);
  background:linear-gradient(90deg,rgba(201,168,90,.06),transparent);
}
.story-track .step:not(.current):hover{
  opacity:.45;
  transform:translateY(18px) scale(.98);
  border-color:rgba(201,168,90,.12);
  background:rgba(255,255,255,.018);
}
.story-track .step.current:hover{
  opacity:1;
  transform:translateY(0) scale(1);
  border-color:rgba(201,168,90,.45);
  background:rgba(201,168,90,.07);
}
.story-track .discipline-head:hover{
  background:transparent;
}
.discipline-row.current-discipline .discipline-head,
.discipline-row.current-discipline .discipline-head:hover{
  background:linear-gradient(90deg,rgba(201,168,90,.09),transparent 76%);
}

/* Cumulative disciplines: passed disciplines remain open; only future ones collapse. */
.story-disciplines .discipline-row.open .discipline-body-v14{
  opacity:1;
  transform:translateY(0);
}

/* A pinned founder has to fit the real viewport on phones, including iPhone mini sizes. */
@media(max-width:900px){
  .founder-story > .founder-stage{
    gap:clamp(12px,2svh,20px);
  }
  .founder-story .founder-grid-v14{
    grid-template-columns:clamp(92px,24vw,126px) minmax(0,1fr)!important;
    align-items:start;
    gap:clamp(14px,4vw,24px);
  }
  .founder-story .founder-portrait{
    max-width:126px;
  }
  .founder-story .founder-copy-v14 h2{
    font-size:clamp(32px,7vw,42px);
    margin:8px 0 12px;
  }
  .founder-story .founder-copy-v14 p{
    font-size:clamp(12px,2.8vw,14px);
    line-height:1.45;
    margin-bottom:8px;
  }
  .founder-story .about-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    margin-top:clamp(10px,2svh,18px);
  }
  .founder-story .metric{
    min-height:clamp(92px,13svh,118px);
    padding:clamp(12px,2.2vw,18px);
  }
  .founder-story .metric strong{
    font-size:clamp(34px,8vw,46px);
  }
  .founder-story .metric span{
    font-size:clamp(10px,2.4vw,12px);
    line-height:1.3;
  }

  .process-v14.story-track .stage-copy{
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    transform:none;
  }
}

@media(max-width:390px){
  .founder-story > .founder-stage{
    padding-top:max(66px,calc(env(safe-area-inset-top) + 52px));
    padding-bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px));
    gap:10px;
  }
  .founder-story .founder-grid-v14{
    grid-template-columns:84px minmax(0,1fr)!important;
    gap:12px;
  }
  .founder-story .founder-portrait{max-width:84px}
  .founder-story .founder-copy-v14 h2{font-size:30px;margin:6px 0 9px}
  .founder-story .founder-copy-v14 p{font-size:11.5px;line-height:1.38;margin-bottom:6px}
  .founder-story .founder-copy-v14 .pre{font-size:9px}
  .founder-story .about-metrics{margin-top:8px}
  .founder-story .metric{min-height:84px;padding:10px}
  .founder-story .metric strong{font-size:32px}
  .founder-story .metric span{font-size:9.5px}
}

@media (hover:none), (pointer:coarse){
  .story-track .cap:hover{
    opacity:.58;
    transform:none;
    background:transparent;
  }
  .story-track .cap.active:hover{
    opacity:1;
    background:linear-gradient(90deg,rgba(201,168,90,.06),transparent);
  }
  .story-track .step:hover{
    opacity:.45;
    transform:translateY(18px) scale(.98);
    border-color:rgba(201,168,90,.12);
    background:rgba(255,255,255,.018);
  }
  .story-track .step.current:hover{
    opacity:1;
    transform:translateY(0) scale(1);
    border-color:rgba(201,168,90,.45);
    background:rgba(201,168,90,.07);
  }
}

/* v41 — stability + pinned hero proof + discipline/current-state polish.
   Keep v40's approved visual language; only tighten the requested interaction/layout details. */

/* A real opaque navigation layer prevents pinned story labels/content from bleeding through it. */
.nav{
  z-index:1000;
  mix-blend-mode:normal!important;
  background:#031426;
  border-bottom:1px solid rgba(201,168,90,.10);
  box-shadow:0 10px 28px rgba(3,20,38,.24);
  isolation:isolate;
}

/* Predeclare canonical track heights in CSS so first paint already matches the JS model.
   This removes the initial reflow/jump when script attaches the story engine. */
.story-about,.story-disciplines,.connect-story{--story-height:154svh}
.service-challenges{--story-height:172svh}
.story-process{--story-height:190svh}
.founder-story{--story-height:220svh}

/* Hero now uses the same pinned, one-time proof rhythm as Founder. */
.about-hero.hero-counter-story{
  min-height:220svh!important;
  padding:0!important;
  display:block!important;
  position:relative;
}
.hero-pin-stage{
  position:sticky;
  top:0;
  height:100svh;
  min-height:100svh;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:128px;
  padding-bottom:112px;
  box-sizing:border-box;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.hero-pin-stage .executive-proof{position:absolute}

/* Disciplines: cumulative opening remains, but only the current scroll step is gold.
   A mouse hover previews gold visually only; it never changes open/scroll state. */
.story-disciplines .discipline-row.open .discipline-head{
  background:transparent!important;
}
.story-disciplines .discipline-row.current-discipline .discipline-head{
  background:linear-gradient(90deg,rgba(201,168,90,.13),rgba(201,168,90,.035) 48%,transparent 82%)!important;
  box-shadow:inset 2px 0 0 rgba(201,168,90,.78);
}
@media (hover:hover) and (pointer:fine){
  .story-disciplines .discipline-head:hover{
    background:linear-gradient(90deg,rgba(201,168,90,.13),rgba(201,168,90,.035) 48%,transparent 82%)!important;
    box-shadow:inset 2px 0 0 rgba(201,168,90,.78);
  }
  .story-disciplines .discipline-head:hover b,
  .story-disciplines .discipline-head:hover em{
    color:var(--gold);
  }
}

/* Proven Process: the full five-step stack must fit comfortably inside the pinned viewport. */
@media(min-width:901px){
  .process-v14.story-track > .story-stage{
    grid-template-columns:minmax(0,1fr) minmax(410px,520px);
    gap:clamp(54px,6vw,86px);
    padding-top:clamp(94px,10svh,112px);
    padding-bottom:clamp(42px,5svh,58px);
    align-items:center;
  }
  .process-v14.story-track .sequence{
    grid-column:2;
    align-self:center!important;
    height:min(70svh,680px);
    display:grid;
    grid-template-rows:repeat(5,minmax(0,1fr));
    gap:8px;
    overflow:visible;
  }
  .process-v14.story-track .step{
    min-height:0;
    padding:12px 18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .process-v14.story-track .step b{
    margin-top:6px;
    font-size:clamp(22px,1.65vw,28px);
    line-height:1.02;
  }
  .process-v14.story-track .step p{
    margin-top:5px;
    font-size:13px;
    line-height:1.3;
  }
}

/* Pinned stories are small enough to render deterministically. Avoid first-entry flashes from
   content-visibility and reveal animations while sticky positioning is taking ownership. */
.story-track,
.story-track .story-stage,
.story-track .cap,
.story-track .step,
.story-track .metric,
.story-track .discipline-row,
.story-track .discipline-head,
.story-track .discipline-body-v14,
.hero-counter-story,
.hero-pin-stage{
  content-visibility:visible!important;
  contain:none!important;
}
.is-visible{animation:none!important;opacity:1!important;transform:none!important}

@media(max-width:900px){
  .hero-pin-stage{
    padding:122px 24px 138px;
  }
}
@media(max-width:560px){
  .hero-pin-stage{
    padding:112px 20px 176px;
  }
}
@media(max-width:390px){
  .hero-pin-stage{
    padding-top:max(100px,calc(env(safe-area-inset-top) + 82px));
    padding-bottom:max(148px,calc(env(safe-area-inset-bottom) + 132px));
  }
}

/* v42 — surgical polish only: hero proof numerals use the canonical NorthX gold. */
.hero-counter-story .executive-proof strong{
  color:var(--gold);
}


/* v43 — hero KPI proof is revealed sequentially by first-scroll progress only.
   No transition is used here: the scroll position itself is the animation clock,
   which keeps the pinned interaction immediate and deterministic. */
.hero-counter-story .executive-proof > div{
  opacity:0;
  transform:translate3d(0,12px,0);
  will-change:opacity,transform;
}
.hero-counter-story.hero-kpis-complete .executive-proof > div{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* v44 — canonical responsive layout model.
   Desktop (>900px) remains exactly v43. Below that, one geometry-driven system owns
   nav sizing, typography, pinned-stage fit and accordion/process composition. No
   device-name or model-specific branches. Width AND stable viewport height constrain
   every scale so the same rules fit compact phones, large phones and touch tablets. */
@media (max-width:900px){
  :root{
    --m-inline:clamp(16px,4.8vw,28px);
    --m-nav-h:clamp(60px,9svh,84px);
    --m-stage-top:clamp(8px,1.8svh,18px);
    --m-stage-bottom:clamp(10px,2svh,22px);
    --m-gap:clamp(10px,1.8svh,18px);
    --m-title:clamp(30px,min(9.2vw,5.8svh),44px);
    --m-card-title:clamp(19px,min(5.8vw,3.4svh),27px);
    --m-body:clamp(12px,min(3.7vw,2.25svh),15px);
    --m-small:clamp(9.5px,min(2.85vw,1.7svh),11.5px);
  }

  html,body{overflow-x:hidden}
  body{font-size:var(--m-body)}

  /* One stable mobile header geometry. All three links remain visible. */
  .nav{
    height:var(--m-nav-h)!important;
    min-height:var(--m-nav-h)!important;
    padding:0 var(--m-inline)!important;
    gap:clamp(14px,4vw,28px);
    font-size:clamp(12px,min(3.6vw,2.1svh),15px)!important;
  }
  .brand-logo{
    width:clamp(96px,27vw,122px)!important;
    height:auto!important;
    flex:0 0 auto;
  }
  .nav nav{
    display:flex!important;
    flex:0 1 auto;
    min-width:0;
    gap:clamp(11px,3.4vw,22px)!important;
    white-space:nowrap;
  }
  .nav nav a{display:block!important;padding:5px 0!important}

  /* Keep one horizontal rhythm for every section. */
  .zone{
    padding-left:var(--m-inline)!important;
    padding-right:var(--m-inline)!important;
  }
  .content-block{padding-left:0!important;padding-right:0!important}

  /* Every pinned story consumes exactly one stable viewport. Its contents must fit
     inside that viewport; later sections can never paint over the current stage. */
  .story-track > .story-stage,
  .hero-pin-stage{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    padding-top:calc(var(--m-nav-h) + var(--m-stage-top))!important;
    padding-bottom:var(--m-stage-bottom)!important;
    overflow:hidden!important;
    gap:var(--m-gap)!important;
    justify-content:center!important;
  }
  .story-track > .story-stage{display:flex!important;flex-direction:column!important}

  .section-mark,.pre{
    flex:0 0 auto;
    font-size:clamp(9px,min(2.6vw,1.55svh),11px)!important;
    line-height:1.2;
  }
  .section-title h2,.stage-copy h2,.connect-grid h2,.founder-copy-v14 h2{
    font-size:var(--m-title)!important;
    line-height:.96!important;
  }
  .section-title p,.stage-text,.founder-copy-v14 p,.cap p{
    font-size:var(--m-body)!important;
    line-height:1.42!important;
  }

  /* ABOUT / SERVICES / CONNECT all use the same compact two-zone composition:
     intro takes only what it needs, selectable rows receive the remaining height. */
  .story-track .split,
  .story-track .connect-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto minmax(0,1fr);
    gap:var(--m-gap)!important;
    width:100%;
    min-height:0;
    flex:1 1 auto;
    overflow:hidden;
  }
  .story-track .section-title,
  .story-track .connect-grid>div:first-child{
    flex:0 0 auto;
    min-height:0;
  }
  .story-track .section-title p,
  .story-track .stage-text{margin-top:clamp(8px,1.35svh,14px)!important}
  .story-track .capabilities{
    min-height:0;
    overflow:hidden;
    display:grid;
    grid-auto-rows:minmax(0,1fr);
  }
  .story-track .cap{
    min-height:0!important;
    padding:clamp(8px,1.35svh,14px) 0!important;
    grid-template-columns:clamp(26px,7vw,38px) minmax(0,1fr)!important;
    column-gap:clamp(10px,3vw,16px)!important;
    align-content:center;
  }
  .story-track .cap h3{
    font-size:var(--m-card-title)!important;
    line-height:1.02!important;
  }
  .story-track .cap p{
    grid-column:2!important;
    margin-top:clamp(3px,.65svh,6px)!important;
  }
  .story-track .cap.active,.story-track .cap.active:hover{transform:none!important}

  /* HERO: same pinned behavior, but proof sits in document flow on narrow screens.
     This guarantees no collision between headline/actions and KPI row at any height. */
  .about-hero.hero-counter-story{min-height:220svh!important}
  .hero-pin-stage{
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto;
    align-items:center;
    padding-left:var(--m-inline)!important;
    padding-right:var(--m-inline)!important;
  }
  .executive-hero-grid{display:block!important;min-height:0}
  .executive-copy h1{
    font-size:clamp(44px,min(14vw,9svh),68px)!important;
    line-height:.92!important;
  }
  .executive-lede{
    max-width:36em;
    margin-top:clamp(18px,3svh,28px)!important;
    font-size:clamp(14px,min(4vw,2.45svh),17px)!important;
    line-height:1.45!important;
  }
  .executive-actions{margin-top:clamp(18px,3svh,30px)!important;gap:clamp(20px,6vw,30px)!important}
  .executive-actions a{font-size:clamp(13px,min(3.8vw,2.2svh),15px)!important}
  .hero-pin-stage .executive-proof{
    position:relative!important;
    inset:auto!important;
    width:100%;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(10px,3.2vw,18px)!important;
    align-self:end;
    margin:0!important;
  }
  .hero-pin-stage .executive-proof div{min-width:0!important;padding-top:clamp(7px,1.2svh,10px)!important}
  .hero-pin-stage .executive-proof strong{font-size:clamp(18px,min(5.8vw,3.2svh),24px)!important}
  .hero-pin-stage .executive-proof span{font-size:clamp(8.5px,min(2.6vw,1.45svh),10.5px)!important;line-height:1.25!important}

  /* FOUNDER: side-by-side identity + compact 2x2 proof grid scales from geometry. */
  .founder-story > .founder-stage{justify-content:center!important}
  .founder-story .founder-grid-v14{
    display:grid!important;
    grid-template-columns:clamp(76px,22vw,118px) minmax(0,1fr)!important;
    gap:clamp(12px,4vw,22px)!important;
    align-items:start;
    min-height:0;
  }
  .founder-story .founder-portrait{max-width:118px!important;width:100%}
  .founder-story .founder-copy-v14 h2{margin:clamp(5px,.8svh,8px) 0 clamp(8px,1.2svh,12px)!important}
  .founder-story .founder-copy-v14 p{margin-bottom:clamp(5px,.8svh,8px)!important;font-size:clamp(10.5px,min(3vw,1.85svh),13px)!important}
  .founder-story .about-metrics{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:1px!important;
    margin-top:clamp(6px,1.2svh,12px)!important;
    min-height:0;
  }
  .founder-story .metric{
    min-height:0!important;
    height:clamp(72px,11.5svh,104px)!important;
    padding:clamp(9px,1.5svh,14px)!important;
  }
  .founder-story .metric strong{font-size:clamp(28px,min(8vw,5.2svh),42px)!important}
  .founder-story .metric span{font-size:clamp(8.75px,min(2.5vw,1.45svh),11px)!important;line-height:1.2!important}

  /* DISCIPLINES: cumulative opening is preserved, but the whole stack is engineered
     to remain inside the pinned viewport. Bodies use a responsive two-column detail grid
     rather than an ever-growing single vertical list. */
  .story-disciplines > .story-stage{justify-content:center!important}
  .story-disciplines .discipline-stack{
    margin-top:0!important;
    min-height:0;
    flex:1 1 auto;
    width:100%;
    overflow:hidden!important;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .story-disciplines .discipline-row{flex:0 0 auto;min-height:0;overflow:hidden!important}
  .story-disciplines .discipline-head{
    min-height:0!important;
    padding:clamp(9px,1.45svh,14px) 0!important;
    grid-template-columns:clamp(24px,6.5vw,34px) minmax(0,1fr) clamp(16px,4.4vw,20px)!important;
    gap:clamp(8px,2.6vw,14px)!important;
  }
  .story-disciplines .discipline-head em{display:none!important}
  .story-disciplines .discipline-head b{
    font-size:clamp(18px,min(5.5vw,3.15svh),24px)!important;
    line-height:1.02!important;
  }
  .story-disciplines .discipline-body-v14{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2px clamp(10px,3vw,16px)!important;
    padding-left:calc(clamp(24px,6.5vw,34px) + clamp(8px,2.6vw,14px))!important;
    padding-right:0!important;
    max-height:0!important;
    min-height:0;
    overflow:hidden!important;
    align-content:start;
  }
  .story-disciplines .discipline-row.open .discipline-body-v14{
    max-height:min(15svh,132px)!important;
    padding-bottom:clamp(4px,.8svh,8px)!important;
  }
  .story-disciplines .discipline-body-v14 span{
    min-width:0;
    padding:clamp(2px,.42svh,4px) 0!important;
    font-size:clamp(9.5px,min(2.75vw,1.55svh),11px)!important;
    line-height:1.18!important;
    overflow-wrap:anywhere;
  }

  /* PROCESS: one viewport, two flex regions. Intro takes intrinsic height, five steps
     divide all remaining height equally. This prevents any card from spilling below
     the screen regardless of phone height. */
  .process-v14.story-track > .story-stage{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:center!important;
  }
  .process-v14.story-track .stage-copy{
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    transform:none!important;
    flex:0 0 auto;
    min-height:0;
  }
  .process-v14.story-track .stage-copy h2{
    font-size:var(--m-title)!important;
    line-height:.92!important;
    margin:0!important;
  }
  .process-v14.story-track .stage-text{
    max-width:42em;
    margin-top:clamp(7px,1.1svh,12px)!important;
  }
  .process-v14.story-track .sequence{
    grid-column:auto!important;
    align-self:stretch!important;
    flex:1 1 auto;
    min-height:0!important;
    height:auto!important;
    display:grid!important;
    grid-template-rows:repeat(5,minmax(0,1fr))!important;
    gap:clamp(4px,.8svh,7px)!important;
    overflow:hidden!important;
  }
  .process-v14.story-track .step{
    min-height:0!important;
    padding:clamp(7px,1.05svh,11px) clamp(10px,3vw,16px)!important;
    justify-content:center!important;
  }
  .process-v14.story-track .step span{font-size:clamp(8.5px,min(2.4vw,1.35svh),10px)!important}
  .process-v14.story-track .step b{
    margin-top:clamp(2px,.42svh,5px)!important;
    font-size:clamp(17px,min(5.1vw,2.85svh),23px)!important;
    line-height:1!important;
  }
  .process-v14.story-track .step p{
    margin-top:clamp(2px,.38svh,4px)!important;
    font-size:clamp(9.5px,min(2.8vw,1.55svh),11.5px)!important;
    line-height:1.18!important;
  }

  /* Connect keeps the same canonical story model and shares the mobile cap sizing. */
  .connect-zone{padding-bottom:clamp(78px,10svh,110px)!important}
  .contact-line{margin-top:clamp(52px,8svh,82px)!important}

  /* The final canonical mobile layer owns overflow anchoring/compositing behavior. */
  .story-track,.story-stage,.discipline-stack,.discipline-row,.sequence{overflow-anchor:none!important}
  .story-track,.story-stage,.discipline-row,.step,.cap{backface-visibility:hidden;-webkit-backface-visibility:hidden}
}

/* v45 — canonical mobile pinning.
   Mobile/tablet pinned stories now use one stable, orientation-level viewport height
   supplied by JS. This is the same physical model as desktop: the stage stays fixed
   while the parent track provides scroll travel. No device/model-specific breakpoints. */
@media (max-width:900px){
  :root{ --pin-vh:100svh; }

  /* Sticky must resolve against the document scrollport, never a local clipping ancestor. */
  main,
  .zone,
  .story-track,
  .about-hero.hero-counter-story{
    overflow-y:visible!important;
    contain:none!important;
  }

  .story-track{
    position:relative!important;
    display:block!important;
  }

  .story-track > .story-stage,
  .hero-pin-stage{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:0!important;
    height:var(--pin-vh)!important;
    min-height:var(--pin-vh)!important;
    max-height:var(--pin-vh)!important;
    box-sizing:border-box!important;
    margin:0!important;
    transform:none!important;
    will-change:auto!important;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  /* Every pinned stage owns the current viewport while its track is active. */
  .story-track > .story-stage{
    z-index:2;
  }
  .hero-pin-stage{
    z-index:2;
  }
}

/* v48 — native sticky is the physical source of truth.
   `overflow-x:hidden` on the scrolling root can establish an overflow scroll container
   on WebKit and break sticky descendants. `clip` prevents horizontal paint overflow
   without changing the vertical scrollport. */
html, body{
  overflow-x:clip!important;
}
body{
  overflow-y:visible!important;
}
main,
.zone,
.story-track,
.about-hero.hero-counter-story{
  overflow-y:visible!important;
  contain:none!important;
}

/* One pin model on every modern viewport. JS may provide a stable pixel `--pin-vh`
   on compact screens; desktop falls back to the small viewport unit. */
.story-track > .story-stage,
.hero-pin-stage{
  position:-webkit-sticky!important;
  position:sticky!important;
  top:0!important;
  height:var(--pin-vh,100svh)!important;
  min-height:var(--pin-vh,100svh)!important;
  max-height:var(--pin-vh,100svh)!important;
  box-sizing:border-box!important;
}

/* Never let browser anchoring compete with the canonical story positions. */
.story-track,
.story-track > .story-stage,
.hero-counter-story,
.hero-pin-stage{
  overflow-anchor:none!important;
}

/* v48 scroll controller only drives the document scroll position. It never swaps the
   stage to fixed/absolute, so there is no layout handoff or first-frame jump. */
html.nx-story-driving{
  scroll-behavior:auto!important;
}

/* v49 — mobile fit polish only.
   Preserve v48's desktop/pinning/particle behavior. On compact screens:
   1) inactive About rows collapse their detail copy so the active Values row can fully fit;
   2) Process cards never translate into one another, so the active card cannot overlap its neighbors. */
@media (max-width:900px){
  /* ABOUT: one detail block at a time. Titles for all three choices remain visible,
     but only the scroll-owned active row consumes body-copy height. */
  .story-about .about-caps{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:0!important;
    overflow:hidden!important;
  }
  .story-about .about-caps .cap{
    flex:0 0 auto!important;
    min-height:0!important;
    grid-template-rows:auto auto!important;
  }
  .story-about .about-caps .cap p{
    max-height:0!important;
    opacity:0!important;
    overflow:hidden!important;
    margin-top:0!important;
    transform:translateY(-4px);
    transition:max-height .28s ease,opacity .22s ease,transform .28s ease,margin-top .28s ease!important;
  }
  .story-about .about-caps .cap.active p{
    max-height:min(18svh,170px)!important;
    opacity:1!important;
    margin-top:clamp(4px,.65svh,7px)!important;
    transform:none!important;
  }

  /* PROCESS: the original desktop inactive-state translateY creates visual overlap on
     compact pinned grids. Keep the emphasis via opacity/border/background only. */
  .process-v14.story-track .step,
  .process-v14.story-track .step.current,
  .process-v14.story-track .step:hover,
  .process-v14.story-track .step.current:hover{
    transform:none!important;
  }
  .process-v14.story-track .step{
    position:relative;
    z-index:0;
    overflow:hidden!important;
  }
  .process-v14.story-track .step.current{
    z-index:1;
  }
}

/* v51 — seamless native pinned storytelling polish.
   One responsive geometry model, no device-model hacks and no synthetic wheel/touch
   scrolling. The browser owns movement; sticky owns pinning; JS only selects the state
   belonging to the current document position. */

html{scroll-padding-top:84px}
.story-track > .story-stage,
.hero-pin-stage{
  isolation:isolate;
  overscroll-behavior:none;
}

/* Avoid layout-shifting emphasis. Active states change paint, never their outer position. */
.story-track .cap,
.story-track .step,
.story-disciplines .discipline-row{
  transform:none!important;
}

@media (max-width:900px){
  :root{
    --nx-row-closed:clamp(48px,7.2svh,58px);
    --nx-row-open:clamp(132px,21svh,170px);
    --nx-service-open:clamp(108px,17svh,138px);
    --nx-process-closed:clamp(46px,6.7svh,56px);
    --nx-process-open:clamp(84px,13.5svh,108px);
  }

  /* Sticky stages must fit one stable viewport and never clip their own final state. */
  .story-track > .story-stage,
  .hero-pin-stage{
    overflow:hidden!important;
    padding-top:calc(var(--m-nav-h) + clamp(8px,1.4svh,14px))!important;
    padding-bottom:clamp(10px,1.8svh,18px)!important;
  }

  /* ABOUT — three fixed slots: two compact rows + one expanded active row. Because
     exactly one row is expanded, Values has the same guaranteed space as What we do. */
  .story-about .split{
    grid-template-rows:auto minmax(0,1fr)!important;
    align-content:stretch!important;
  }
  .story-about .section-title h2{
    font-size:clamp(31px,min(8.7vw,5.4svh),42px)!important;
  }
  .story-about .section-title p{
    font-size:clamp(11.5px,min(3.45vw,2.05svh),14px)!important;
    line-height:1.42!important;
  }
  .story-about .about-caps{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .story-about .about-caps .cap{
    flex:0 0 var(--nx-row-closed)!important;
    height:var(--nx-row-closed)!important;
    min-height:var(--nx-row-closed)!important;
    max-height:var(--nx-row-closed)!important;
    box-sizing:border-box!important;
    align-content:center!important;
    padding:clamp(8px,1.1svh,11px) 0!important;
    transition:height .32s cubic-bezier(.22,1,.36,1),
               min-height .32s cubic-bezier(.22,1,.36,1),
               max-height .32s cubic-bezier(.22,1,.36,1),
               opacity .22s ease,background .22s ease,border-color .22s ease!important;
  }
  .story-about .about-caps .cap.active{
    flex-basis:var(--nx-row-open)!important;
    height:var(--nx-row-open)!important;
    min-height:var(--nx-row-open)!important;
    max-height:var(--nx-row-open)!important;
  }
  .story-about .about-caps .cap p{
    max-height:0!important;
    opacity:0!important;
    overflow:hidden!important;
    margin-top:0!important;
    transform:none!important;
    transition:opacity .22s ease,max-height .28s cubic-bezier(.22,1,.36,1),margin-top .28s ease!important;
  }
  .story-about .about-caps .cap.active p{
    max-height:calc(var(--nx-row-open) - 58px)!important;
    opacity:1!important;
    margin-top:clamp(5px,.75svh,8px)!important;
  }

  /* SERVICES + CONNECT use the same fixed-slot language. Nothing in the active state
     changes the story height, so sticky boundaries remain stable on Safari. */
  .service-challenges .challenge-list,
  .connect-story .partnership-list{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .service-challenges .challenge-list .cap,
  .connect-story .partnership-list .cap{
    flex:0 0 var(--nx-row-closed)!important;
    height:var(--nx-row-closed)!important;
    min-height:var(--nx-row-closed)!important;
    max-height:var(--nx-row-closed)!important;
    box-sizing:border-box!important;
    align-content:center!important;
    padding:clamp(7px,1svh,10px) 0!important;
    transition:height .3s cubic-bezier(.22,1,.36,1),min-height .3s cubic-bezier(.22,1,.36,1),max-height .3s cubic-bezier(.22,1,.36,1),opacity .2s ease,background .2s ease!important;
  }
  .service-challenges .challenge-list .cap.active,
  .connect-story .partnership-list .cap.active{
    flex-basis:var(--nx-service-open)!important;
    height:var(--nx-service-open)!important;
    min-height:var(--nx-service-open)!important;
    max-height:var(--nx-service-open)!important;
  }
  .service-challenges .challenge-list .cap p,
  .connect-story .partnership-list .cap p{
    max-height:0!important;opacity:0!important;overflow:hidden!important;margin-top:0!important;
    transition:opacity .2s ease,max-height .26s cubic-bezier(.22,1,.36,1),margin-top .26s ease!important;
  }
  .service-challenges .challenge-list .cap.active p,
  .connect-story .partnership-list .cap.active p{
    max-height:calc(var(--nx-service-open) - 54px)!important;opacity:1!important;margin-top:4px!important;
  }

  /* PROCESS — exactly one expanded row at a time. Total sequence height is constant,
     so an active card can never grow over a previous/next card. */
  .process-v14.story-track > .story-stage{
    gap:clamp(10px,1.45svh,15px)!important;
  }
  .process-v14.story-track .stage-copy h2{
    font-size:clamp(34px,min(9.4vw,5.8svh),44px)!important;
    line-height:.91!important;
  }
  .process-v14.story-track .stage-text{
    font-size:clamp(11.5px,min(3.4vw,2svh),14px)!important;
    line-height:1.4!important;
  }
  .process-v14.story-track .sequence{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:clamp(4px,.65svh,6px)!important;
    overflow:hidden!important;
    min-height:0!important;
  }
  .process-v14.story-track .step{
    flex:0 0 var(--nx-process-closed)!important;
    height:var(--nx-process-closed)!important;
    min-height:var(--nx-process-closed)!important;
    max-height:var(--nx-process-closed)!important;
    box-sizing:border-box!important;
    padding:clamp(6px,.9svh,9px) clamp(10px,3vw,15px)!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:8px!important;
    align-content:center!important;
    overflow:hidden!important;
    transition:height .3s cubic-bezier(.22,1,.36,1),min-height .3s cubic-bezier(.22,1,.36,1),max-height .3s cubic-bezier(.22,1,.36,1),opacity .2s ease,border-color .2s ease,background .2s ease!important;
  }
  .process-v14.story-track .step.current{
    flex-basis:var(--nx-process-open)!important;
    height:var(--nx-process-open)!important;
    min-height:var(--nx-process-open)!important;
    max-height:var(--nx-process-open)!important;
  }
  .process-v14.story-track .step span{grid-column:1;grid-row:1 / span 2;align-self:start;padding-top:2px}
  .process-v14.story-track .step b{
    grid-column:2;grid-row:1;margin:0!important;
    font-size:clamp(17px,min(5vw,2.75svh),22px)!important;
    line-height:1.02!important;
  }
  .process-v14.story-track .step p{
    grid-column:2;grid-row:2;
    max-height:0!important;opacity:0!important;overflow:hidden!important;margin:0!important;
    font-size:clamp(9.5px,min(2.8vw,1.5svh),11.5px)!important;
    line-height:1.2!important;
    transition:max-height .24s ease,opacity .2s ease,margin-top .24s ease!important;
  }
  .process-v14.story-track .step.current p{
    max-height:32px!important;opacity:1!important;margin-top:4px!important;
  }

  /* Disciplines keep cumulative disclosure, but transitions only affect the body within
     the fixed stage; outer story geometry never changes. */
  .story-disciplines .discipline-body-v14{
    transition:max-height .28s cubic-bezier(.22,1,.36,1),opacity .2s ease,padding .28s ease!important;
  }

  /* WebKit paint stability: avoid transforms on sticky descendants and stop automatic
     scroll anchoring from compensating while accordion paint changes. */
  .story-track,.story-stage,.cap,.step,.discipline-row,.discipline-body-v14{
    overflow-anchor:none!important;
  }
  .story-stage,.hero-pin-stage{
    -webkit-transform:none!important;
    transform:none!important;
    will-change:auto!important;
  }
}

/* v52 — editorial responsive geometry.
   Keep the approved visual system. Native scroll remains the only physical scroll system.
   Mobile/tablet layouts consume the available pinned viewport instead of compressing
   content into a small block or leaving a dead lower half. */

html{scroll-behavior:auto!important}
.story-track > .story-stage,
.hero-pin-stage{overscroll-behavior:auto!important}

/* Desktop: composed pinned travel, but not so long that the page feels frozen. */
@media (min-width:901px){
  .story-about,.story-disciplines,.connect-story{--story-height:148svh}
  .service-challenges{--story-height:172svh}
  .story-process{--story-height:196svh}

  .story-track > .story-stage{
    padding-top:clamp(92px,10svh,116px);
    padding-bottom:clamp(56px,7svh,82px);
  }
}

@media (max-width:900px){
  /* One geometry model for every compact viewport. Nothing here depends on a phone model. */
  :root{
    --nx-stage-top:calc(var(--m-nav-h) + clamp(14px,2.2svh,22px));
    --nx-stage-bottom:clamp(18px,3svh,30px);
    --nx-stage-gap:clamp(20px,3.1svh,32px);
  }

  .story-track > .story-stage,
  .hero-pin-stage{
    padding:var(--nx-stage-top) clamp(18px,5vw,30px) var(--nx-stage-bottom)!important;
    overflow:hidden!important;
  }

  /* ABOUT — fill the stage. The intro gets breathing room, then the three rows share
     every remaining pixel. The active row receives more flex instead of a hardcoded height. */
  .story-about > .story-stage{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    align-content:stretch!important;
    gap:var(--nx-stage-gap)!important;
  }
  .story-about > .story-stage > .section-mark{align-self:start}
  .story-about .split{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:clamp(24px,4.2svh,40px)!important;
    min-height:0!important;
    height:100%!important;
    align-content:stretch!important;
  }
  .story-about .section-title{
    max-width:46rem!important;
    padding-right:clamp(0px,2vw,12px);
  }
  .story-about .section-title h2{
    font-size:clamp(36px,min(10vw,5.7svh),52px)!important;
    line-height:.95!important;
    letter-spacing:-.045em!important;
    max-width:15ch;
  }
  .story-about .section-title p{
    margin-top:clamp(14px,2.1svh,20px)!important;
    font-size:clamp(14px,min(3.8vw,2.15svh),17px)!important;
    line-height:1.55!important;
    max-width:34em!important;
  }
  .story-about .about-caps{
    display:flex!important;
    flex-direction:column!important;
    justify-content:stretch!important;
    align-items:stretch!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
    border-top:1px solid var(--line);
  }
  .story-about .about-caps .cap{
    flex:1 1 0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:clamp(12px,1.8svh,18px) 0!important;
    grid-template-columns:clamp(28px,7vw,38px) minmax(0,1fr)!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    column-gap:clamp(12px,3.4vw,18px)!important;
    align-content:center!important;
    transition:flex-grow .34s cubic-bezier(.22,1,.36,1),opacity .22s ease,background .22s ease,border-color .22s ease!important;
  }
  .story-about .about-caps .cap.active{flex-grow:2.05!important}
  .story-about .about-caps .cap h3{
    font-size:clamp(25px,min(7.2vw,4svh),34px)!important;
    line-height:1!important;
  }
  .story-about .about-caps .cap p{
    grid-column:2!important;
    max-height:0!important;
    opacity:0!important;
    overflow:hidden!important;
    margin:0!important;
    transform:none!important;
    font-size:clamp(13px,min(3.5vw,2svh),16px)!important;
    line-height:1.55!important;
    max-width:38em!important;
    transition:opacity .22s ease,max-height .3s cubic-bezier(.22,1,.36,1),margin-top .3s ease!important;
  }
  .story-about .about-caps .cap.active p{
    max-height:12em!important;
    opacity:1!important;
    margin-top:clamp(10px,1.5svh,14px)!important;
  }

  /* SERVICES / CONNECT — same responsive flex-slot language as About. */
  .service-challenges > .story-stage,
  .connect-story > .story-stage{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:var(--nx-stage-gap)!important;
    align-content:stretch!important;
  }
  .service-challenges .split,
  .connect-story .connect-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:clamp(22px,3.8svh,36px)!important;
    min-height:0!important;
    height:100%!important;
  }
  .service-challenges .challenge-list,
  .connect-story .partnership-list{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
    border-top:1px solid var(--line);
  }
  .service-challenges .challenge-list .cap,
  .connect-story .partnership-list .cap{
    flex:1 1 0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:clamp(10px,1.55svh,15px) 0!important;
    transition:flex-grow .32s cubic-bezier(.22,1,.36,1),opacity .2s ease,background .2s ease!important;
  }
  .service-challenges .challenge-list .cap.active,
  .connect-story .partnership-list .cap.active{flex-grow:1.75!important}
  .service-challenges .challenge-list .cap p,
  .connect-story .partnership-list .cap p{
    max-height:0!important;opacity:0!important;overflow:hidden!important;margin:0!important;
    transition:max-height .28s ease,opacity .2s ease,margin-top .28s ease!important;
  }
  .service-challenges .challenge-list .cap.active p,
  .connect-story .partnership-list .cap.active p{
    max-height:7em!important;opacity:1!important;margin-top:clamp(6px,1svh,10px)!important;
  }

  /* PROCESS — editorial intro plus five equal, fixed slots. The active state changes
     only paint and copy visibility, never the outer row size, so cards cannot overlap. */
  .process-v14.story-track > .story-stage{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    align-content:stretch!important;
    gap:clamp(24px,3.8svh,38px)!important;
  }
  .process-v14.story-track .stage-copy{
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    transform:none!important;
    max-width:42rem;
  }
  .process-v14.story-track .stage-copy h2{
    font-size:clamp(38px,min(10.5vw,6svh),54px)!important;
    line-height:.92!important;
  }
  .process-v14.story-track .stage-text{
    margin-top:clamp(12px,1.8svh,18px)!important;
    font-size:clamp(13.5px,min(3.6vw,2.05svh),16px)!important;
    line-height:1.5!important;
  }
  .process-v14.story-track .sequence{
    display:grid!important;
    grid-template-rows:repeat(5,minmax(0,1fr))!important;
    gap:clamp(6px,.9svh,9px)!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
  }
  .process-v14.story-track .step,
  .process-v14.story-track .step.current{
    flex:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    transform:none!important;
    padding:clamp(9px,1.25svh,13px) clamp(12px,3.4vw,18px)!important;
    display:grid!important;
    grid-template-columns:clamp(30px,8vw,42px) minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:clamp(8px,2.4vw,13px)!important;
    align-content:center!important;
    overflow:hidden!important;
  }
  .process-v14.story-track .step span{grid-column:1;grid-row:1 / span 2;align-self:start;padding-top:2px}
  .process-v14.story-track .step b{
    grid-column:2;grid-row:1;margin:0!important;
    font-size:clamp(20px,min(5.8vw,3.3svh),27px)!important;
    line-height:1.03!important;
  }
  .process-v14.story-track .step p{
    grid-column:2;grid-row:2;
    margin:0!important;max-height:0!important;opacity:0!important;overflow:hidden!important;
    font-size:clamp(11px,min(3.1vw,1.7svh),13px)!important;
    line-height:1.3!important;
    transition:max-height .22s ease,opacity .18s ease,margin-top .22s ease!important;
  }
  .process-v14.story-track .step.current p{
    max-height:2.8em!important;opacity:1!important;margin-top:clamp(3px,.55svh,6px)!important;
  }

  /* Disciplines: use more of the stage instead of crowding the top. */
  .story-disciplines > .story-stage{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:clamp(18px,3svh,28px)!important;
    align-content:stretch!important;
  }
  .story-disciplines .discipline-stack{
    height:100%!important;
    justify-content:center!important;
  }

  /* Let typography breathe on compact screens; do not force everything to micro sizes. */
  .story-track .section-mark,
  .story-track .pre{font-size:clamp(9.5px,min(2.7vw,1.45svh),11px)!important}
}

/* Very short landscape-style viewports use the same system, only reduce vertical gaps.
   This is geometry-based, not device-specific. */
@media (max-width:900px) and (max-height:620px){
  :root{--nx-stage-gap:14px}
  .story-track > .story-stage,.hero-pin-stage{
    padding-top:calc(var(--m-nav-h) + 8px)!important;
    padding-bottom:10px!important;
  }
  .story-about .split,
  .service-challenges .split,
  .connect-story .connect-grid{gap:14px!important}
  .story-about .section-title h2,
  .process-v14.story-track .stage-copy h2{font-size:clamp(30px,6.5svh,40px)!important}
  .story-about .section-title p,
  .process-v14.story-track .stage-text{font-size:12px!important;line-height:1.35!important}
}

/* v52.1 — ensure the mobile Process story fully leaves the desktop 2-column grid. */
@media (max-width:900px){
  .process-v14.story-track > .story-stage{
    grid-template-columns:1fr!important;
    column-gap:0!important;
  }
  .process-v14.story-track .stage-copy,
  .process-v14.story-track .sequence{
    grid-column:1!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    left:auto!important;
    right:auto!important;
  }
}

/* v53 — canonical mobile editorial stack.
   Desktop remains untouched. On compact viewports, inactive story rows occupy a calm,
   fixed title slot while the active row owns the remaining vertical space. This prevents
   long copy from colliding with the next row and keeps the composition spacious. */
@media (max-width:900px){
  .story-about > .story-stage{
    gap:clamp(18px,2.6svh,26px)!important;
  }
  .story-about .split{
    grid-template-rows:auto minmax(0,1fr)!important;
    gap:clamp(22px,3.2svh,32px)!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .story-about .section-title{
    min-height:0!important;
    max-width:none!important;
    padding-right:0!important;
  }
  .story-about .section-title h2{
    font-size:clamp(38px,min(10.2vw,5.6svh),50px)!important;
    line-height:.94!important;
    letter-spacing:-.045em!important;
    max-width:13ch!important;
  }
  .story-about .section-title p{
    margin-top:clamp(14px,2.1svh,20px)!important;
    font-size:clamp(14px,min(3.65vw,1.95svh),16.5px)!important;
    line-height:1.5!important;
    max-width:34em!important;
  }

  .story-about .about-caps{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
    border-top:1px solid var(--line)!important;
  }
  .story-about .about-caps .cap{
    box-sizing:border-box!important;
    flex:0 0 clamp(58px,7.25svh,70px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    padding:clamp(10px,1.35svh,14px) 0!important;
    grid-template-columns:clamp(30px,7vw,38px) minmax(0,1fr)!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    column-gap:clamp(12px,3.3vw,18px)!important;
    align-content:start!important;
    transition:flex-basis .34s cubic-bezier(.22,1,.36,1),flex-grow .34s cubic-bezier(.22,1,.36,1),opacity .22s ease,background .22s ease,border-color .22s ease!important;
  }
  .story-about .about-caps .cap.active{
    flex:1 1 auto!important;
  }
  .story-about .about-caps .cap h3{
    font-size:clamp(25px,min(7vw,3.85svh),33px)!important;
    line-height:1!important;
    align-self:start!important;
  }
  .story-about .about-caps .cap p{
    grid-column:2!important;
    grid-row:2!important;
    max-height:0!important;
    min-height:0!important;
    opacity:0!important;
    overflow:hidden!important;
    margin:0!important;
    font-size:clamp(12.5px,min(3.35vw,1.72svh),15px)!important;
    line-height:1.45!important;
    max-width:38em!important;
    transition:opacity .2s ease,max-height .3s cubic-bezier(.22,1,.36,1),margin-top .3s ease!important;
  }
  .story-about .about-caps .cap.active p{
    max-height:100%!important;
    opacity:1!important;
    margin-top:clamp(10px,1.35svh,14px)!important;
  }

  /* Services and Connect use the same fixed-closed / flexible-active geometry. */
  .service-challenges .challenge-list,
  .connect-story .partnership-list{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
  }
  .service-challenges .challenge-list .cap,
  .connect-story .partnership-list .cap{
    box-sizing:border-box!important;
    flex:0 0 clamp(52px,6.5svh,64px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    padding:clamp(9px,1.2svh,13px) 0!important;
    grid-template-rows:auto minmax(0,1fr)!important;
  }
  .service-challenges .challenge-list .cap.active,
  .connect-story .partnership-list .cap.active{
    flex:1 1 auto!important;
  }
  .service-challenges .challenge-list .cap p,
  .connect-story .partnership-list .cap p{
    max-height:0!important;
    opacity:0!important;
    overflow:hidden!important;
    margin:0!important;
  }
  .service-challenges .challenge-list .cap.active p,
  .connect-story .partnership-list .cap.active p{
    max-height:100%!important;
    opacity:1!important;
    margin-top:clamp(7px,1svh,10px)!important;
  }

  /* Compact-height devices use the same model with slightly tighter closed rows;
     this is viewport geometry, not device detection. */
  @media (max-height:720px){
    .story-about .about-caps .cap{flex-basis:54px!important}
    .service-challenges .challenge-list .cap,
    .connect-story .partnership-list .cap{flex-basis:48px!important}
    .story-about .section-title h2{font-size:clamp(34px,min(9.6vw,5.3svh),44px)!important}
    .story-about .section-title p{font-size:clamp(13px,min(3.45vw,1.85svh),15px)!important;line-height:1.45!important}
  }
}

/* v54 — mobile story rows use intrinsic content height, never clipped flex height.
   Desktop is untouched. One geometry model applies to every compact viewport. */
@media (max-width:900px){
  :root{
    --nx-mobile-closed-row:clamp(56px,7svh,68px);
    --nx-mobile-open-min:clamp(166px,24svh,224px);
  }

  /* ABOUT: intro + intrinsically-sized story list. No percentage max-height or
     flex redistribution can crop the active copy. */
  .story-about > .story-stage{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    gap:clamp(16px,2.2svh,22px)!important;
    overflow:hidden!important;
  }
  .story-about .split{
    display:flex!important;
    flex-direction:column!important;
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    gap:clamp(20px,2.8svh,28px)!important;
    overflow:visible!important;
  }
  .story-about .section-title{
    flex:0 0 auto!important;
  }
  .story-about .about-caps{
    display:flex!important;
    flex-direction:column!important;
    flex:0 0 auto!important;
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    justify-content:flex-start!important;
  }
  .story-about .about-caps .cap,
  .story-about .about-caps .cap.active{
    flex:0 0 auto!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  .story-about .about-caps .cap:not(.active){
    min-height:var(--nx-mobile-closed-row)!important;
  }
  .story-about .about-caps .cap.active{
    min-height:var(--nx-mobile-open-min)!important;
  }
  .story-about .about-caps .cap p{
    height:auto!important;
    min-height:0!important;
    max-height:0!important;
    overflow:hidden!important;
  }
  .story-about .about-caps .cap.active p{
    height:auto!important;
    min-height:max-content!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:clamp(4px,.7svh,8px)!important;
  }

  /* Services + Connect use the same intrinsic-open-row rule so long copy can never
     be clipped by a flex share on another mobile size. */
  .service-challenges .challenge-list,
  .connect-story .partnership-list{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    flex:0 0 auto!important;
  }
  .service-challenges .challenge-list .cap,
  .connect-story .partnership-list .cap,
  .service-challenges .challenge-list .cap.active,
  .connect-story .partnership-list .cap.active{
    flex:0 0 auto!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .service-challenges .challenge-list .cap:not(.active),
  .connect-story .partnership-list .cap:not(.active){
    min-height:clamp(50px,6.3svh,62px)!important;
  }
  .service-challenges .challenge-list .cap.active,
  .connect-story .partnership-list .cap.active{
    min-height:clamp(126px,17.5svh,172px)!important;
  }
  .service-challenges .challenge-list .cap.active p,
  .connect-story .partnership-list .cap.active p{
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:4px!important;
  }
}

/* v61 canonical story measurement sandbox — never rendered to the user. */
.story-measure-clone,
.story-measure-clone *{
  transition:none!important;
  animation:none!important;
  scroll-behavior:auto!important;
}
.story-measure-clone > .story-stage,
.story-measure-clone .story-stage{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
.story-measure-clone .discipline-stack{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  transform:none!important;
}