/* ============================================================================
   Caledapt — scrollytelling homepage concept v2
   Extends the reference prototype's design system rather than replacing it.

   Two audiences, one page:
     - the unfamiliar buyer  -> the narrative, plain language, a visible way in
     - the informed buyer   -> substance: Gateway, governance, real prices

   The scrollytelling is the top. Everything after it is ordinary, fast,
   crawlable HTML. A page that is only impressive is not findable; a page that
   is only findable is not memorable.
   ========================================================================== */

:root{
  --bg:#061014;--bg2:#08171c;--panel:#0b1d23;--panel2:#0e252b;--text:#f2f7f8;--muted:#8fa5aa;
  --teal:#36e9d8;--teal2:#79f6ff;--blue:#7194ff;--line:rgba(99,238,227,.18);--white-line:rgba(255,255,255,.1);
  --shadow:0 24px 80px rgba(0,0,0,.42);
  --shell:clamp(24px,6vw,120px);
  --max:1320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--teal);color:#031012;padding:12px 18px;
  font-weight:800;border-radius:0 0 8px 0;z-index:200}
.skip:focus{left:0}

/* ---------------------------------------------------------------- chrome */

.site-header{position:fixed;left:0;right:0;top:0;z-index:50;height:76px;display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--shell);
  background:linear-gradient(to bottom,rgba(6,16,20,.84),rgba(6,16,20,.12));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.045)}
.brand{display:flex;align-items:center;gap:10px;letter-spacing:.13em;font-weight:800}
.brand img{width:34px;height:34px}
.brand small{font-size:9px;color:var(--teal);margin-left:-6px;margin-top:-14px}
.site-header nav{display:flex;align-items:center;gap:26px;color:#b8c7ca;font-size:14px}
.site-header nav a:hover{color:#fff}
.nav-cta{border:1px solid rgba(54,233,216,.4);padding:10px 15px;border-radius:999px;
  color:var(--teal)!important;background:rgba(54,233,216,.06)}
.menu-btn{display:none;background:none;color:#fff;border:1px solid var(--white-line);padding:8px 12px;border-radius:9px;
  font:inherit;font-size:13px;cursor:pointer}
.mobile-nav{position:fixed;top:76px;right:18px;z-index:60;background:#0a171c;border:1px solid var(--white-line);
  border-radius:14px;padding:12px;box-shadow:var(--shadow);min-width:212px}
.mobile-nav a{display:block;padding:10px 14px;color:#d8e2e4;font-size:14px}
.mobile-nav a:hover{background:rgba(54,233,216,.08);color:var(--teal)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.17em;
  color:var(--teal);font-size:11px;font-weight:800}
.eyebrow:before{content:"";width:26px;height:1px;background:var(--teal)}
.button{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:11px;
  font-size:14px;font-weight:750;border:1px solid var(--white-line);
  transition:.25s transform,.25s background,.25s border;cursor:pointer}
.button:hover{transform:translateY(-2px)}
.button.primary{color:#031012;background:linear-gradient(135deg,var(--teal2),var(--teal));border-color:transparent;
  box-shadow:0 12px 40px rgba(54,233,216,.16)}
.button.ghost{background:rgba(255,255,255,.035)}
.button.ghost:hover{border-color:rgba(54,233,216,.4)}

/* ================================================================ intro */
.intro{min-height:100svh;position:relative;display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(420px,.94fr);align-items:center;
  padding:120px var(--shell) 70px;overflow:hidden;
  background:radial-gradient(circle at 72% 35%,rgba(46,230,209,.12),transparent 29%),
             radial-gradient(circle at 82% 54%,rgba(113,148,255,.09),transparent 28%),
             linear-gradient(140deg,#061014 20%,#07171d 70%,#061014)}
.intro-grid,.mesh{position:absolute;inset:0;
  background-image:linear-gradient(rgba(77,230,218,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(77,230,218,.055) 1px,transparent 1px);
  background-size:56px 56px;mask-image:linear-gradient(to bottom,black,transparent 90%)}
.intro-orbit{position:absolute;border:1px solid rgba(54,233,216,.1);border-radius:50%;right:-14vw;top:50%;translate:0 -50%}
.orbit-a{width:62vw;height:62vw}.orbit-b{width:48vw;height:48vw}
.intro-glow{position:absolute;width:540px;height:540px;border-radius:50%;right:8vw;top:50%;translate:0 -50%;
  background:radial-gradient(circle,rgba(54,233,216,.11),transparent 66%);filter:blur(16px)}
.intro-content{position:relative;z-index:4;max-width:min(800px,100%)}
.hero-mark{display:block;width:84px;height:84px;margin:34px 0 18px;
  filter:drop-shadow(0 0 26px rgba(54,233,216,.17))}
.intro h1,.scene-copy h2,.proof h2,.start h2,.final-cta h2,.sec-h{
  font-size:clamp(44px,6.2vw,94px);line-height:.95;letter-spacing:-.055em;margin:0;font-weight:760}
.intro h1 .mask-i,.proof h2 span,.start h2 span,.final-cta h2 span,.scene-copy h2 em{
  font-style:normal;color:var(--teal)}
/* Only the SECOND hero line is teal. The mask wrapper is also a span, so the
   accent rule above now targets .mask-i directly and this restores line one. */
.intro h1 .mask:first-child .mask-i{color:var(--text)}
/* The headline is two masked BLOCKS, so a line that is wider than the copy
   column wraps inside its own mask and the mask's overflow:hidden then clips
   the text. `white-space:nowrap` fixes the wrap but overflows instead - measured
   at 1440px the second line needs 707px in a 664px column, so nowrap just
   pushed the clipping to the element edge.

   The real fix is a fluid type size: size the headline from the COLUMN width,
   not the viewport, so both lines always fit the measure they are given. */
.intro h1{font-size:clamp(38px,4.55vw,74px)}
.intro h1 .mask{max-width:100%}
.intro-content>p{max-width:730px;color:#b5c5c8;font-size:clamp(17px,1.45vw,22px);line-height:1.58;margin:28px 0 34px}
.intro-actions{display:flex;gap:12px;flex-wrap:wrap}
.scroll-cue{margin-top:54px;color:#72888c;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:12px}
.scroll-cue span{display:inline-block;width:35px;height:1px;background:#62777b;
  animation:cue 1.6s ease-in-out infinite;transform-origin:left}
@keyframes cue{50%{scale:.55 1;opacity:.45}}

.hero-system{position:relative;z-index:3;width:min(100%,680px);aspect-ratio:1;
  justify-self:end;margin-right:calc(var(--shell) * -.35)}
.hero-system-core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:180px;height:180px;border-radius:50%;
  border:1px solid rgba(54,233,216,.45);
  background:radial-gradient(circle,rgba(54,233,216,.14),rgba(7,24,29,.88) 65%);
  display:grid;place-items:center;font-size:13px;letter-spacing:.28em;color:var(--teal);font-weight:900;
  box-shadow:0 0 100px rgba(54,233,216,.1)}
.hero-node{position:absolute;width:98px;height:98px;border:1px solid rgba(255,255,255,.12);border-radius:50%;
  background:rgba(8,26,31,.8);display:grid;place-items:center;font-size:10px;letter-spacing:.16em;color:#c6d4d6}
.n1{left:50%;top:2%;translate:-50% 0}.n2{right:5%;top:24%}.n3{right:2%;bottom:14%}
.n4{left:4%;bottom:14%}.n5{left:3%;top:24%}
.hero-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-lines path{stroke:rgba(54,233,216,.16);stroke-width:1;fill:none;stroke-dasharray:4 9;animation:dash 14s linear infinite}
@keyframes dash{to{stroke-dashoffset:-200}}

/* ================================================================ story */
.story{height:720vh;position:relative;background:#050d10}
.story-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;
  grid-template-columns:minmax(330px,.86fr) minmax(520px,1.14fr);
  padding:100px var(--shell) 58px;align-items:center}
.stage-bg{position:absolute;inset:0;
  background:radial-gradient(circle at 75% 48%,rgba(54,233,216,.08),transparent 31%),
             radial-gradient(circle at 70% 70%,rgba(113,148,255,.05),transparent 34%)}
.mesh{opacity:.58;mask-image:radial-gradient(circle at 72% 48%,black,transparent 66%)}
.radar{position:absolute;border:1px solid rgba(54,233,216,.07);border-radius:50%;right:12vw;top:50%;translate:0 -50%}
.radar-one{width:50vw;height:50vw}.radar-two{width:38vw;height:38vw}
.story-progress{position:absolute;left:24px;top:50%;translate:0 -50%;height:44vh;width:18px;z-index:4}
.story-progress:before{content:"";position:absolute;left:7px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.09)}
.progress-fill{position:absolute;left:7px;top:0;width:1px;height:0;
  background:linear-gradient(var(--teal2),var(--teal));box-shadow:0 0 12px rgba(54,233,216,.8)}
.progress-dots{height:100%;display:flex;flex-direction:column;justify-content:space-between}
.progress-dots i{width:15px;height:15px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:#071216;
  z-index:1;transition:.25s}
.progress-dots i.on{border-color:var(--teal);background:var(--teal);box-shadow:0 0 18px rgba(54,233,216,.55)}
.copy-stack,.visual-stack{position:relative;height:100%;z-index:3}
.scene-copy{position:absolute;top:50%;left:0;translate:0 -48%;max-width:610px;opacity:0;
  transform:translateY(44px);pointer-events:none;transition:opacity .42s ease,transform .42s ease}
.scene-copy.active{opacity:1;transform:translateY(0)}
.scene-kicker{display:block;color:var(--teal);letter-spacing:.2em;text-transform:uppercase;font-size:11px;
  font-weight:800;margin-bottom:22px}
.scene-copy h2{font-size:clamp(40px,4.7vw,74px)}
.scene-copy p{font-size:clamp(16px,1.25vw,20px);line-height:1.58;color:#9fb1b5;max-width:570px;margin-top:24px}
.micro{margin-top:42px;color:#60777c;font-size:10px;letter-spacing:.24em}
.visual{position:absolute;inset:0;opacity:0;transform:scale(.94) translateY(25px);
  transition:opacity .48s ease,transform .65s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.visual.active{opacity:1;transform:scale(1) translateY(0)}
.scene-index{position:absolute;right:clamp(32px,5vw,78px);bottom:34px;z-index:5;color:#36565b;font-size:13px}
.scene-index span{font-size:28px;color:var(--teal);font-weight:800;margin-right:5px}

/* scene visuals (from the reference, unchanged geometry) */
.problem-orbit,.governance{position:absolute;width:min(52vw,730px);aspect-ratio:1;right:0;top:50%;translate:0 -50%}
.problem-core,.gov-core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:190px;height:190px;border-radius:50%;
  border:1px solid rgba(54,233,216,.5);
  background:radial-gradient(circle,rgba(54,233,216,.16),rgba(7,24,29,.93) 67%);
  display:grid;place-items:center;text-align:center;color:var(--teal);font-size:13px;font-weight:900;
  letter-spacing:.12em;box-shadow:0 0 80px rgba(54,233,216,.11)}
.problem{position:absolute;padding:12px 17px;border-radius:999px;border:1px solid rgba(255,255,255,.1);
  background:rgba(8,23,28,.78);backdrop-filter:blur(8px);font-size:12px;color:#becacc;white-space:nowrap;
  box-shadow:0 12px 40px rgba(0,0,0,.25)}
.p1{left:50%;top:4%;translate:-50% 0}.p2{right:2%;top:27%}.p3{right:2%;bottom:24%}
.p4{left:50%;bottom:4%;translate:-50% 0}.p5{left:0;bottom:24%}.p6{left:0;top:27%}
.flow-board{position:absolute;width:min(55vw,820px);aspect-ratio:1.32;right:0;top:50%;translate:0 -50%;
  border:1px solid rgba(255,255,255,.06);border-radius:28px;
  background:linear-gradient(145deg,rgba(15,40,47,.52),rgba(5,17,21,.4));box-shadow:var(--shadow)}
.flow-card{position:absolute;width:190px;padding:17px;border:1px solid rgba(255,255,255,.09);
  background:rgba(8,25,30,.9);border-radius:14px}
.flow-card b{display:block;color:#d9e3e5;font-size:11px;letter-spacing:.16em}
.flow-card span{display:block;color:#789095;font-size:11px;margin-top:7px}
.f1{left:5%;top:10%}.f2{right:5%;top:10%}.f3{left:5%;bottom:10%}.f4{right:5%;bottom:10%}
.flow-engine{position:absolute;left:50%;top:50%;translate:-50% -50%;width:220px;height:150px;
  border:1px solid rgba(54,233,216,.45);border-radius:22px;
  background:radial-gradient(circle at 50% 20%,rgba(54,233,216,.11),rgba(6,20,24,.97));
  display:grid;align-content:center;justify-items:center;text-align:center;box-shadow:0 0 60px rgba(54,233,216,.1)}
.flow-engine small{font-size:9px;letter-spacing:.26em;color:#5b9698}
.flow-engine strong{margin-top:8px;color:var(--teal);font-size:16px;letter-spacing:.08em}
.flow-board svg{position:absolute;inset:0;width:100%;height:100%}
.flow-board svg path{stroke:rgba(54,233,216,.22);stroke-width:1;fill:none;stroke-dasharray:5 8}
.gov-core{width:170px;height:170px;border-radius:28px}
.gov-core img{width:54px;height:54px}
.gov-core strong{font-size:10px;letter-spacing:.18em;margin-top:-20px}
.governance svg{position:absolute;inset:0;width:100%;height:100%}
.governance svg circle{fill:none;stroke:rgba(54,233,216,.09);stroke-width:1;stroke-dasharray:5 10}
.dept{position:absolute;min-width:165px;padding:16px 18px;border:1px solid rgba(255,255,255,.095);
  background:rgba(8,24,29,.9);border-radius:13px;font-size:11px;letter-spacing:.17em;color:#dbe4e5;font-weight:800}
.dept small{display:block;color:#668086;font-weight:500;letter-spacing:.02em;margin-top:7px}
.d1{left:50%;top:2%;translate:-50% 0}.d2{right:0;top:28%}.d3{right:9%;bottom:9%}
.d4{left:9%;bottom:9%}.d5{left:0;top:28%}
.system-stack{position:absolute;right:0;top:50%;translate:0 -50%;width:min(56vw,820px);height:650px;perspective:1000px}
.stack-layer{position:absolute;left:8%;right:8%;height:74px;border:1px solid rgba(255,255,255,.09);
  border-radius:14px;background:linear-gradient(100deg,rgba(13,38,44,.95),rgba(6,22,26,.92));
  display:grid;grid-template-columns:46px 1fr 1.4fr;align-items:center;padding:0 22px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);transform:skewX(-5deg)}
.stack-layer span{color:var(--teal);font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.stack-layer b{font-size:12px;letter-spacing:.13em}
.stack-layer small{justify-self:end;color:#658086;font-size:11px}
.l1{top:4%;left:20%;right:2%}.l2{top:19%;left:16%;right:6%}.l3{top:34%;left:12%;right:10%}
.l4{top:49%;left:8%;right:14%;border-color:rgba(54,233,216,.35);box-shadow:0 0 50px rgba(54,233,216,.08)}
.l5{top:64%;left:4%;right:18%}.l6{top:79%;left:0;right:22%}
.outcome-grid{position:absolute;right:0;top:50%;translate:0 -50%;width:min(56vw,800px);
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.outcome{height:150px;border:1px solid rgba(255,255,255,.08);border-radius:18px;
  background:linear-gradient(145deg,rgba(13,37,44,.68),rgba(7,19,24,.7));padding:20px;
  display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.outcome:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-20px;top:-35px;
  border:1px solid rgba(54,233,216,.08)}
.outcome span{position:absolute;left:20px;top:18px;color:#35595e;font:800 10px/1 ui-monospace,monospace}
.outcome b{font-size:13px;letter-spacing:.15em;color:#e1e8e9}
.outcome small{color:#6e878c;margin-top:7px}
.outcome:nth-child(3),.outcome:nth-child(4){border-color:rgba(54,233,216,.15)}
.journey{position:absolute;right:0;top:50%;translate:0 -50%;width:min(57vw,850px);height:500px}
/* Behind everything in the group. */
.journey-line{position:absolute;left:9%;right:9%;top:50%;height:1px;z-index:0;background:rgba(255,255,255,.1)}
.journey-line span{display:block;width:100%;height:1px;
  background:linear-gradient(90deg,var(--teal2),var(--teal),var(--blue));box-shadow:0 0 15px rgba(54,233,216,.28)}
/* Anchored to the line, but the BLOCK starts below it: the dot sits on the
   connector and the number/label hang underneath, so the gradient can never
   cross the text. `top:50%` with a downward translate replaces the previous
   centred -50% that caused the overlap. */
.journey-step{position:absolute;top:50%;translate:-50% 0;width:135px;text-align:center;z-index:2}
/* The dot straddles the line, so it needs a negative offset to sit on it
   rather than below it. */
.journey-step:before{content:"";display:block;width:17px;height:17px;border-radius:50%;background:var(--teal);
  border:5px solid #07171b;box-shadow:0 0 18px rgba(54,233,216,.45);margin:-8.5px auto 18px}
.journey-step i{display:block;color:#557077;font-style:normal;font-size:9px;letter-spacing:.2em}
.journey-step b{display:block;font-size:11px;letter-spacing:.15em;margin-top:6px}
.journey-step small{display:block;color:#6f878c;font-size:10px;margin-top:7px;line-height:1.35}
.j1{left:10%}.j2{left:36%}.j3{left:64%}.j4{left:90%}
.evidence-chip{position:absolute;left:50%;bottom:4%;translate:-50% 0;border:1px solid rgba(54,233,216,.24);
  padding:10px 16px;border-radius:999px;color:var(--teal);font-size:9px;letter-spacing:.14em;white-space:nowrap;
  background:rgba(54,233,216,.04)}

/* ====================================================== shared section chrome */
.sec{padding:132px var(--shell);position:relative}
.sec-h{font-size:clamp(36px,4.4vw,64px);letter-spacing:-.045em}
.sec-head{max-width:900px;margin-bottom:64px}
.sec-head h2{margin-top:20px}
.sec-head p{color:#93a7ab;font-size:clamp(16px,1.3vw,19px);line-height:1.62;max-width:760px;margin-top:22px}
.sec-alt{background:#071419}
.sec-alt2{background:linear-gradient(180deg,#071419,#081b21)}
.rule{height:1px;background:var(--white-line);border:0;margin:0}

/* ================================================================= proof */
.proof-points{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.proof-points div{min-height:158px;border:1px solid var(--white-line);border-radius:18px;padding:23px;
  background:rgba(255,255,255,.025)}
.proof-points b{display:block;color:#eef5f6;font-size:14px}
.proof-points span{display:block;color:#71898e;font-size:13px;line-height:1.5;margin-top:11px}

/* ======================================================== credibility band */
.cred-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.cred{border:1px solid var(--white-line);border-radius:20px;padding:28px;min-height:250px;
  background:linear-gradient(150deg,rgba(13,37,44,.6),rgba(7,19,23,.7));display:flex;flex-direction:column}
.cred .n{color:var(--teal);font:800 11px/1 ui-monospace,monospace;letter-spacing:.2em}
.cred h3{font-size:21px;line-height:1.15;letter-spacing:-.025em;margin:20px 0 14px}
.cred p{color:#8ba1a6;font-size:14.5px;line-height:1.62}
.cred .tag{margin-top:auto;padding-top:20px;color:#5e787d;font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* ============================================================== the gateway */
.gw{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.gw-panel{border:1px solid rgba(54,233,216,.22);border-radius:24px;padding:32px;
  background:linear-gradient(150deg,rgba(14,44,50,.62),rgba(6,20,24,.8));box-shadow:0 30px 90px rgba(0,0,0,.3)}
.gw-score{display:flex;align-items:baseline;gap:14px}
.gw-score b{font-size:76px;line-height:.9;letter-spacing:-.05em;color:var(--teal);font-weight:800}
.gw-score span{color:#7e969b;font-size:13px;letter-spacing:.1em}
.gw-bars{margin-top:28px;display:grid;gap:13px}
.gw-bar{display:grid;grid-template-columns:118px 1fr 40px;gap:14px;align-items:center;font-size:12px}
.gw-bar i{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.gw-bar i b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal2),var(--teal))}
.gw-bar em{color:#c3d2d4;font-style:normal;text-align:right;font:700 12px/1 ui-monospace,monospace}
.gw-list{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.gw-list li{display:flex;gap:11px;color:#9fb3b7;font-size:14px;line-height:1.5}
.gw-list li:before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--teal)}
.gw-list li.fail:before{background:#e08a5a}

/* ============================================================== sectors */
.sector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.sector{border:1px solid var(--white-line);border-radius:16px;padding:20px 22px;background:rgba(255,255,255,.022);
  transition:.2s border,.2s background,.2s transform}
.sector:hover{border-color:rgba(54,233,216,.34);background:rgba(54,233,216,.05);transform:translateY(-2px)}
.sector b{display:block;font-size:15px;letter-spacing:-.01em}
.sector span{display:block;color:#6e878c;font-size:12.5px;margin-top:7px;line-height:1.45}

/* ================================================================== start */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price-card{border:1px solid var(--white-line);border-radius:22px;padding:28px;min-height:400px;
  background:linear-gradient(145deg,rgba(14,39,46,.7),rgba(7,19,23,.75));display:flex;flex-direction:column}
.price-card.featured{border-color:rgba(54,233,216,.28);box-shadow:0 0 80px rgba(54,233,216,.05)}
.price-card>span{color:var(--teal);font-size:10px;letter-spacing:.2em;font-weight:800}
.price-card h3{font-size:25px;line-height:1.08;letter-spacing:-.03em;margin:18px 0 16px}
.price-card strong{font-size:48px;letter-spacing:-.04em}
.price-card p{color:#7f989d;line-height:1.55;font-size:14px}
.price-card a{color:var(--teal);margin-top:auto;font-size:13px;font-weight:750}

/* ============================================================ honest note */
.honest{border:1px solid rgba(224,138,90,.28);border-radius:20px;padding:30px;
  background:rgba(224,138,90,.05);max-width:980px}
.honest h3{font-size:19px;margin:0 0 14px;color:#f0c9a8}
.honest p{color:#b9a595;font-size:14.5px;line-height:1.65;margin:0}
.honest p+p{margin-top:12px}

/* ================================================================ faq */
.faq{display:grid;gap:0;max-width:980px;margin:0 auto;border-top:1px solid var(--white-line)}
.faq details{border-bottom:1px solid var(--white-line);padding:22px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;
  font-size:17px;font-weight:650;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--teal);font-size:24px;line-height:1;flex:0 0 auto;transition:.2s}
.faq details[open] summary:after{content:"\2212"}
.faq p{color:#93a7ab;font-size:15px;line-height:1.68;margin-top:14px;max-width:800px}

/* ============================================================== final cta */
.final-cta{padding:170px 28px;text-align:center;
  background:radial-gradient(circle at 50% 35%,rgba(54,233,216,.09),transparent 34%),#050d10}
.final-cta>img{width:92px}
.final-cta .eyebrow{margin:25px 0}
.final-cta>p{max-width:730px;margin:28px auto;color:#92a7ab;font-size:18px;line-height:1.6}
.final-cta .intro-actions{justify-content:center}

/* ================================================================ footer */
footer{border-top:1px solid var(--white-line);padding:60px var(--shell) 46px;background:#040c0f}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;max-width:var(--max);margin:0 auto}
.foot-brand{display:flex;align-items:center;gap:10px;letter-spacing:.13em;font-weight:800}
.foot-brand img{width:32px;height:32px}
.foot-col .foot-h{color:#5e787d;font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 16px;font-weight:800}
.foot-col a{display:block;color:#a9bcc0;font-size:14px;padding:6px 0}
.foot-col a:hover{color:var(--teal)}
.foot-base{max-width:var(--max);margin:44px auto 0;padding-top:26px;border-top:1px solid var(--white-line);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#637b80;font-size:12.5px}
.foot-base a{color:#8ba1a6}

/* ============================================================== responsive */
@media (max-width:1180px){
  .proof-points{grid-template-columns:repeat(2,1fr)}
  .cred-grid{grid-template-columns:1fr}
  .gw{grid-template-columns:1fr;gap:36px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1050px){
  .site-header nav{display:none}
  .menu-btn{display:block}
  .intro{grid-template-columns:1fr;padding-top:120px}
  /* The hero diagram is decorative at this width. It sits BEHIND the copy
     (z-index 1, below .intro-content's z-index 4) and is dimmed, so it reads as
     texture rather than competing with the headline. It must never sit on top
     of the copy, which is what `position:absolute` alone allowed. */
  .hero-system{position:absolute;right:-24vw;top:50%;translate:0 -50%;z-index:1;
    opacity:.26;width:72vw;pointer-events:none}
  .intro-content{max-width:min(760px,100%);position:relative;z-index:4}
  .story-stage{grid-template-columns:1fr;padding-left:56px}
  .copy-stack{z-index:5}
  .scene-copy{max-width:560px;
    background:linear-gradient(90deg,rgba(5,13,16,.96) 60%,rgba(5,13,16,.5),transparent);padding:40px 50px 40px 0}
  .visual-stack{position:absolute;inset:0;opacity:.5}
  .problem-orbit,.flow-board,.governance,.system-stack,.outcome-grid,.journey{right:-13vw}
  .price-grid{grid-template-columns:1fr}
  .price-card{min-height:280px}
  .sec{padding:104px var(--shell)}
}
@media (max-width:680px){
  .site-header{height:66px;padding:0 18px}
  .brand{font-size:13px}.brand img{width:30px;height:30px}
  .mobile-nav{top:66px;right:12px;left:12px}
  .intro{padding:110px 22px 60px}
  .intro h1{font-size:clamp(42px,14.5vw,66px)}
  .intro-content>p{font-size:16px}
  .hero-mark{width:66px;height:66px}
  .hero-system{right:-60vw;top:auto;bottom:-14vw;translate:0 0;width:110vw;opacity:.17;z-index:1}
  .story{height:620vh}
  .story-stage{padding:84px 22px 48px 42px}
  .story-progress{left:10px}
  .scene-copy{top:16%;translate:0 0;max-width:calc(100vw - 52px);padding:20px 0;background:none}
  .scene-copy h2{font-size:clamp(36px,11.5vw,52px)}
  .scene-copy p{font-size:14px;max-width:92%}
  .visual-stack{opacity:.36}
  .problem-orbit,.governance{width:108vw;right:-42vw;top:70%}
  .flow-board{width:110vw;right:-52vw;top:72%}
  .system-stack{width:110vw;right:-48vw;top:72%;height:500px}
  .outcome-grid{width:105vw;right:-50vw;top:72%}
  .journey{width:120vw;right:-60vw;top:72%}
  .scene-index{right:18px;bottom:20px}
  .sec{padding:88px 22px}
  .sec-h{font-size:clamp(34px,12.5vw,54px)}
  .proof-points{grid-template-columns:1fr}
  .price-grid{margin-top:44px}
  .gw-panel{padding:24px}
  .gw-score b{font-size:60px}
  .gw-bar{grid-template-columns:96px 1fr 34px;gap:10px;font-size:11px}
  .final-cta{padding:118px 22px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .foot-base{flex-direction:column;text-align:left}
  .faq summary{font-size:15.5px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-lines path,.scroll-cue span{animation:none}
  .scene-copy,.visual{transition:none}
  /* With no animation the sticky stage still works, but the long 720vh scroll
     becomes tedious. Shorten it so the page is navigable without motion. */
  .story{height:auto}
  .story-stage{position:static;height:auto;padding:70px 22px}
  .copy-stack{height:auto}
  .scene-copy{position:static;opacity:1;transform:none;max-width:none;padding:0 0 42px;background:none}
  .scene-copy p{max-width:70ch}
  .visual-stack{display:none}
  .story-progress,.scene-index{display:none}
}
@media print{.site-header,.menu-btn,.mobile-nav,.story-progress{display:none}}

/* ================================================= motion-layer dependencies */
/* styles.css predates motion.css, so these base rules live here rather than
   being rewritten there. Kept minimal: only what the animations animate. */
.mask,.mask-i{display:block}
.mask{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.intro h1 .mask + .mask{margin-top:-.06em}
.gw-tick{display:flex;align-items:center;gap:9px;margin:16px 0 4px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7f989d}
.gw-tick span{font-variant-numeric:tabular-nums;color:var(--te2,#79f6ff)}
.gw-tick small{color:#5e787d;font-size:10px}
.progress-line{display:none}
.js .progress-line{display:block}

/* ========================================================= copy additions */
/* Blocks added for the five content gaps. Kept in the existing system so they
   inherit the palette and spacing rather than introducing a new visual voice. */

.answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.answer{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:30px 28px 26px;position:relative}
.answer .n{display:block;font-size:11px;letter-spacing:.2em;font-weight:800;
  color:var(--teal);margin-bottom:16px}
.answer h3{font-size:19px;line-height:1.28;letter-spacing:-.02em;margin:0 0 14px}
.answer p{color:#9fb1b5;font-size:15px;line-height:1.62;margin:0 0 14px}
.answer p:last-child{margin-bottom:0}
.answer-foot{color:#7f989d;font-size:13.5px;border-top:1px solid var(--line);
  padding-top:14px;margin-top:18px}

.case{background:var(--panel);border:1px solid var(--line);border-radius:20px;
  margin-top:44px;overflow:hidden}
.case-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  padding:22px 30px;border-bottom:1px solid var(--line);background:rgba(54,233,216,.045)}
.case-tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:800;color:var(--teal)}
.case-scope{font-size:13px;color:#8fa5aa}
.case-body{display:grid;grid-template-columns:repeat(2,1fr)}
.case-step{padding:34px 30px;border-bottom:1px solid var(--line)}
.case-step:nth-child(odd){border-right:1px solid var(--line)}
.case-step:nth-last-child(-n+2){border-bottom:0}
.case-step .n{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:800;color:#5e787d;margin-bottom:14px}
.case-step h3{font-size:18px;line-height:1.3;letter-spacing:-.02em;margin:0 0 12px}
.case-step p{color:#9fb1b5;font-size:14.5px;line-height:1.62;margin:0}
.placeholder-note{margin-top:14px!important;padding:12px 14px;border-radius:10px;
  background:rgba(255,193,87,.09);border:1px solid rgba(255,193,87,.28);
  color:#e8c07a;font-size:13px!important;line-height:1.55!important}
.case-results{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.case-results li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.case-results b{font-size:15px;color:#e8c07a;white-space:nowrap}
.case-results span{font-size:13px;color:#8fa5aa;line-height:1.5}

.cost-answer{margin-top:40px;padding:34px 32px;border:1px solid var(--line);
  border-radius:18px;background:var(--panel)}
.cost-answer h3{font-size:22px;letter-spacing:-.025em;margin:0 0 14px}
.cost-answer>p{color:#9fb1b5;font-size:15.5px;line-height:1.62;max-width:78ch;margin:0 0 26px}
.cost-rows{display:grid;gap:0}
.cost-row{display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:baseline;
  padding:18px 0;border-top:1px solid var(--line)}
.cost-row>b{font-size:17px;color:var(--teal);font-weight:800;letter-spacing:-.01em}
.cost-row span{font-size:14.5px;color:#9fb1b5;line-height:1.6}
.cost-row strong{color:#dfe9ea;font-weight:700}
.cost-honest{margin-top:26px!important;padding-top:20px;border-top:1px solid var(--line);
  font-size:14px!important;color:#7f989d!important;max-width:none!important}

/* Sits directly under the H1. Do NOT pull it up with a negative margin: the
   masked headline uses line-height .95, so descenders on words like "work."
   paint below the H1 box and the negative margin put this line straight through
   them. Real spacing instead. */
.intro-sub{color:var(--teal)!important;font-size:clamp(14px,1.05vw,16px)!important;
  letter-spacing:.01em;margin:22px 0 26px!important;font-weight:600}

@media (max-width:1180px){
  .answer-grid{grid-template-columns:1fr}
  .case-body{grid-template-columns:1fr}
  .case-step:nth-child(odd){border-right:0}
  .case-step:nth-last-child(2){border-bottom:1px solid var(--line)}
}
@media (max-width:680px){
  .case-step{padding:26px 22px}
  .cost-answer{padding:26px 20px}
  .cost-row{grid-template-columns:1fr;gap:6px}
  .case-meta{padding:18px 22px}
}