/* ── CWD Scrollytelling — cinematic multi-scene ──────────────────────────────
   Self-hosted, dependency-free. Scrubbed scenes (see scrolly.js). */

/* NOTE: do NOT put overflow-x:hidden here — it forces overflow-y:auto, making this
   a scroll container, which breaks position:sticky on the scenes (the pinned
   graphic scrolls away and the animation fires off-screen). Keep it visible. */
.cwd-story{--nav:#071a2f;--nav2:#0e2f52;--red:#e2231a;--gold:#ffcf4a;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--nav);color:#fff;}
.cwd-story *{box-sizing:border-box;}

/* ══ HERO ══ */
.cwd-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(120% 100% at 70% 15%,#16416e 0%,var(--nav) 60%,#03101f 100%);padding:40px 22px;}
.cwd-hero__inner{max-width:840px;}
.cwd-hero__eyebrow{font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin:0 0 22px;}
/* explicit color — the theme's h1 rule would otherwise override the inherited white */
.cwd-hero__title{font-size:clamp(38px,7vw,72px);line-height:1.04;font-weight:800;letter-spacing:-1px;margin:0;color:#fff;}
.cwd-hero__title span{color:var(--red);}
.cwd-hero__sub{font-size:clamp(16px,2.3vw,21px);line-height:1.5;color:#a9c2dd;max-width:600px;margin:26px auto 0;}
.cwd-hero__cue{margin-top:46px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#6f8bab;}
.cwd-hero__cue span{display:block;font-size:24px;color:#9fb6d1;animation:cwdBob 1.8s ease-in-out infinite;margin-top:6px;}
@keyframes cwdBob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ══ SCENE SCAFFOLD ══ */
.cwd-sc{position:relative;}
.cwd-sc__pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:24px;}
.cwd-sc__pin--dark{background:radial-gradient(120% 90% at 50% 25%,#123a63 0%,var(--nav) 62%,#03101f 100%);}
.cwd-sc__pin--gold{background:radial-gradient(120% 90% at 50% 30%,#3a2e08 0%,#1a1403 70%,#0d0a02 100%);}
.cwd-sc__stage{width:min(960px,94vw);text-align:center;position:relative;}
.cwd-sc-svg{width:100%;height:auto;overflow:visible;display:block;margin:6px 0;}

/* fade-in elements (JS toggles opacity/transform via show()) */
.cwd-sc-cap,.cwd-sc-mark,.cwd-sc-endlbl--us,.cwd-sc-endlbl--ca,.cwd-sc-cap--big,.cwd-sc-roi-line{
  opacity:0;transition:opacity .55s ease,transform .55s ease;}
.cwd-sc-cap,.cwd-sc-cap--big{transform:translateY(14px);}

/* ── Scene 1: divergence ── */
.cwd-sc-cap{position:absolute;left:0;right:0;top:-4px;font-size:clamp(20px,3.4vw,34px);font-weight:700;line-height:1.3;color:#eaf2fb;padding:0 10px;}
.cwd-sc-cap em{color:var(--red);font-style:normal;}
.cwd-sc-cap strong{color:var(--gold);}
.cwd-sc-cap--b strong{color:#37e0b0;}
.cwd-sc__stage{padding-top:78px;}
.cwd-sc-axis{stroke:rgba(255,255,255,.14);stroke-width:1;}
.cwd-sc-line--us{fill:none;stroke:#ff5a5f;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,90,95,.4));}
.cwd-sc-line--ca{fill:none;stroke:#37e0b0;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(55,224,176,.4));}
.cwd-sc-gap{fill:#ff5a5f;opacity:0;}
.cwd-sc-markline{stroke:rgba(255,255,255,.35);stroke-width:1.5;stroke-dasharray:4 4;}
.cwd-sc-marktext{fill:#cdd9e5;font-size:13px;font-weight:600;}
.cwd-sc-endlbl--us{fill:#ff8b8f;font-size:16px;font-weight:800;}
.cwd-sc-endlbl--ca{fill:#5ff0c6;font-size:16px;font-weight:800;}
.cwd-sc-foot{font-size:12px;color:#7f95ad;margin:10px 0 0;letter-spacing:.2px;}
.cwd-sc-foot--dark{color:#b39a52;}

/* ── Scene 2: savings ── */
.cwd-sc-kicker{font-size:clamp(15px,2vw,18px);color:#a9c2dd;letter-spacing:.3px;margin-bottom:6px;}
.cwd-sc-bignum{font-size:clamp(46px,9vw,88px);font-weight:800;letter-spacing:-2px;line-height:1;color:#fff;}
.cwd-scrolly__track{fill:rgba(255,255,255,.08);}
.cwd-scrolly__seg{transition:width .12s linear;}
.cwd-scrolly__seglabel-name{fill:#c9d8e8;font-size:14px;font-weight:600;}
.cwd-scrolly__seglabel-val{fill:#fff;font-size:17px;font-weight:800;}
.cwd-sc-cap--big{position:static;margin-top:14px;font-size:clamp(18px,2.6vw,26px);font-weight:700;color:#fff;}

/* ── Scene 3: ROI ── */
.cwd-sc__stage--roi{max-width:760px;}
.cwd-sc-mult{font-size:clamp(84px,20vw,190px);font-weight:900;letter-spacing:-4px;line-height:.9;
  color:var(--gold);text-shadow:0 6px 40px rgba(255,207,74,.35);}
.cwd-sc-multlabel{font-size:clamp(18px,3vw,26px);font-weight:700;color:#fff;margin-top:6px;}
.cwd-sc-roi-line{display:inline-flex;align-items:stretch;gap:16px;margin-top:34px;}
.cwd-sc-roi-invest,.cwd-sc-roi-return{display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px 22px;border-radius:12px;min-width:150px;}
.cwd-sc-roi-invest{background:rgba(255,255,255,.08);}
.cwd-sc-roi-return{background:linear-gradient(180deg,#ffcf4a,#f0a800);color:#241a00;transform-origin:bottom;}
.cwd-sc-roi-invest b,.cwd-sc-roi-return b{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;opacity:.7;margin-bottom:4px;}
.cwd-sc-roi-invest span{font-size:26px;font-weight:800;color:#fff;}
.cwd-sc-roi-return span{font-size:26px;font-weight:800;}
.cwd-sc-roi-arrow{align-self:center;font-size:30px;color:#8a7a3a;}

/* ── Scene 4: network / relational map ── */
.cwd-net-kicker{font-size:clamp(16px,2.4vw,22px);font-weight:700;color:#eaf2fb;margin-bottom:2px;opacity:0;transition:opacity .5s ease;}
.cwd-net-svg{max-height:62vh;}
.cwd-net-link{stroke:rgba(120,200,255,.30);stroke-width:2;}
.cwd-net-node{fill:#37e0b0;stroke:#07223b;stroke-width:2.5;}
.cwd-net-label{fill:#dbe8f5;font-size:15px;font-weight:600;}
.cwd-net-center{transition:opacity .4s ease;}
.cwd-net-hub{fill:#ffcf4a;filter:drop-shadow(0 4px 22px rgba(255,207,74,.4));}
.cwd-net-hubtext{fill:#241a00;font-size:15px;font-weight:800;}
.cwd-net-cap{position:static;margin-top:6px;}

/* ══ OUTRO ══ */
.cwd-scrolly-outro{background:var(--nav);text-align:center;padding:90px 24px 40px;}
.cwd-scrolly-outro h2{font-size:clamp(26px,4vw,40px);color:#fff;margin:0 0 14px;font-weight:800;letter-spacing:-.5px;}
.cwd-scrolly-outro p{font-size:17px;line-height:1.6;color:#a9c2dd;max-width:560px;margin:0 auto 24px;}
.cwd-scrolly-outro .cwd-scrolly-cta{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:700;padding:14px 34px;border-radius:10px;font-size:17px;}
.cwd-scrolly-note{background:var(--nav);color:#5f7896;text-align:center;font-size:12px;line-height:1.6;max-width:720px;margin:0 auto;padding:8px 24px 60px;}

@media (max-width:640px){
  .cwd-sc__stage{padding-top:88px;}
  .cwd-sc-roi-line{gap:10px;}
  .cwd-sc-roi-invest,.cwd-sc-roi-return{min-width:120px;padding:12px 16px;}
}

/* Reduced motion: engine renders final state; disable transitions/animation */
@media (prefers-reduced-motion:reduce){
  .cwd-sc-cap,.cwd-sc-mark,.cwd-sc-endlbl--us,.cwd-sc-endlbl--ca,.cwd-sc-cap--big,.cwd-sc-roi-line,
  .cwd-scrolly__seg,.cwd-hero__cue span{transition:none!important;animation:none!important;}
}