/* ===================================================================
   Cresyn · Your CX practice for AWS partners
   Cinematic presentation microsite.
   Palette aligned with AWS's current web design system: ink backgrounds
   (#0F141A / #161D26), the AWS orange → magenta → violet gradient as the
   signature accent, AWS blues for links and focus. Inter stands in for
   Amazon Ember (proprietary). Brand values live in :root; the rest of
   the stylesheet only references tokens.
=================================================================== */

:root{
  /* palette */
  --ink:         #0f141a;   /* page background */
  --ink-2:       #161d26;   /* raised surfaces; text on light */
  --ink-3:       #232b37;   /* elevated surfaces */
  --line:        rgba(255,255,255,.13);
  --blue:        #006ce0;   /* links & accents on light */
  --blue-bright: #0099ff;   /* links & accents on dark */
  --blue-soft:   #75cfff;
  --flame:       #fa6f00;
  --magenta:     #e433ff;
  --violet:      #8575ff;
  --violet-deep: #6842ff;
  --magenta-ink: #a000b8;   /* AA contrast on white */
  --grad:        linear-gradient(123deg, #fa6f00 0%, #e433ff 50%, #8575ff 100%);
  --grad-deep:   linear-gradient(123deg, #d14600 0%, #c300e0 50%, #6842ff 100%);
  --white:       #ffffff;
  --paper:       #f3f3f7;
  --line-light:  #dedee3;
  --tl:          #161d26;   /* text on light */
  --tl-soft:     #656871;
  --on-dark:     #f9f9fb;
  --on-dark-soft:#a4a4ad;

  /* type */
  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --fs-display: clamp(2.2rem, 1rem + 3.4vw, 4.2rem);
  --fs-headline: clamp(1.75rem, 1rem + 2.5vw, 3.1rem);
  --fs-lead: clamp(1.08rem, .95rem + .6vw, 1.4rem);
  --fs-body-lg: clamp(1.02rem, .95rem + .35vw, 1.22rem);
  --fs-body: clamp(1rem, .95rem + .2vw, 1.08rem);
  --fs-small: clamp(.86rem, .82rem + .15vw, .95rem);
  --fs-eyebrow: clamp(.72rem, .68rem + .2vw, .85rem);

  /* layout */
  --gutter: clamp(16px, 4.5vw, 72px);
  --hud-h: 72px;
  --pager-h: 0px;
  --maxw: 1240px;

  /* motion */
  --ease-out: cubic-bezier(.16,.84,.3,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --t-reveal: 760ms;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; background:var(--ink); }
body{
  margin:0; background:var(--ink); color:var(--on-dark);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,p,ol,ul,figure,blockquote{ margin:0; }
ol,ul{ padding:0; list-style:none; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
kbd{
  font-family:var(--font-display); font-size:.75em; font-weight:600;
  padding:.15em .5em; border-radius:6px; border:1px solid var(--line);
  background:rgba(255,255,255,.06); color:var(--on-dark);
}
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.skip-link{
  position:fixed; left:12px; top:-60px; z-index:100; padding:10px 16px; border-radius:8px;
  background:var(--white); color:var(--ink-2); font-weight:600; text-decoration:none;
}
.skip-link:focus{ top:12px; }
:focus-visible{ outline:3px solid var(--blue-bright); outline-offset:3px; border-radius:6px; }
.scene--light :focus-visible{ outline-color:var(--blue); }
.scene--accent :focus-visible{ outline-color:var(--white); }

/* the AWS gradient as text */
.hl-grad, .display-alt, .years-num, .outcome::before, .gap-bar--want .gap-bar-num{
  background-image:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.scene--light .hl-grad{ background-image:var(--grad-deep); }

/* ===================================================================
   CAMERA BACKDROP
=================================================================== */
.backdrop{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.backdrop-world{
  position:absolute; left:50%; top:50%; width:3200px; height:2200px;
  margin:-1100px 0 0 -1600px; transform-origin:50% 50%; will-change:transform;
}
.backdrop-world svg{ width:100%; height:100%; overflow:visible; }
.bd-line{ fill:none; stroke:var(--blue-soft); stroke-width:1.5; opacity:.16; vector-effect:non-scaling-stroke; }
.bd-node{ fill:var(--blue-soft); opacity:.28; }
.bd-node--hot{ fill:var(--magenta); opacity:.55; }
.bd-ring{ fill:none; stroke:var(--violet-deep); stroke-width:14; opacity:.32; }
.bd-ring-2{ fill:none; stroke:var(--blue-bright); stroke-width:2; opacity:.13; vector-effect:non-scaling-stroke; }
/* keep the reading side of each dark scene calm */
.backdrop::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(15,20,26,.86) 0%, rgba(15,20,26,.6) 45%, rgba(15,20,26,0) 75%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(15,20,26,.6) 100%);
}

/* ===================================================================
   HUD / RAIL / PAGER
=================================================================== */
.hud{
  position:fixed; z-index:20; top:0; left:0; right:0; height:var(--hud-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:max(12px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  pointer-events:none;
}
.hud > *{ pointer-events:auto; }
.hud-right{ display:flex; align-items:center; gap:10px; min-width:0; }
.hud-logo, .hud-scene{
  background:rgba(22,29,38,.86); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:999px; height:44px; display:flex; align-items:center;
}
.hud-logo{ padding:0 16px 0 8px; gap:10px; text-decoration:none; transition:opacity .4s, visibility .4s; }
[data-scene="opportunity"] .hud-logo{ opacity:0; visibility:hidden; }
.hud-logo img{ height:30px; width:30px; }
.hud-wordmark{ font-family:var(--font-display); font-weight:600; font-size:.8rem; letter-spacing:.26em; text-transform:uppercase; color:var(--on-dark); }
.hud-scene{ padding:0 18px; gap:12px; font-family:var(--font-display); font-size:.8rem; letter-spacing:0; color:var(--on-dark); white-space:nowrap; }
.hud-count{ color:var(--blue-soft); font-weight:600; font-variant-numeric:tabular-nums; }
.hud-title{ font-weight:500; }
.hud-cta{
  height:44px; display:flex; align-items:center; padding:0 18px; border-radius:999px;
  background:var(--white); color:var(--ink-2); text-decoration:none; white-space:nowrap;
  font-family:var(--font-display); font-weight:600; font-size:.82rem; letter-spacing:0;
  box-shadow:0 8px 24px rgba(0,0,0,.3); transition:background .25s, opacity .4s, visibility .4s;
}
.hud-cta:hover{ background:var(--paper); }
.hud-cta-short{ display:none; }
[data-scene="cta"] .hud-cta{ opacity:0; visibility:hidden; }

.rail{
  position:fixed; z-index:20; right:max(18px, env(safe-area-inset-right)); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:4px; padding:10px 6px; border-radius:999px;
  background:rgba(22,29,38,.78); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.rail-dot{ position:relative; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; }
.rail-dot::before{
  content:""; width:8px; height:8px; border-radius:50%; background:rgba(249,249,251,.38);
  transition:transform .35s var(--ease-out), background .35s;
}
.rail-dot:hover::before{ background:var(--on-dark); }
.rail-dot[aria-current="step"]::before{ background:var(--grad); transform:scale(1.5); }
.rail-label{
  position:absolute; right:40px; top:50%; transform:translate(6px,-50%); white-space:nowrap;
  padding:6px 12px; border-radius:8px; background:var(--ink); color:var(--on-dark);
  font-family:var(--font-display); font-size:.78rem; font-weight:500;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.rail-dot:hover .rail-label, .rail-dot:focus-visible .rail-label{ opacity:1; transform:translate(0,-50%); }

.pager{
  position:fixed; z-index:20; right:max(var(--gutter), env(safe-area-inset-right)); bottom:max(22px, env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:10px; padding:6px; border-radius:999px;
  background:rgba(22,29,38,.86); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.pager-btn{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  transition:background .25s, opacity .25s;
}
.pager-btn svg{ width:22px; height:22px; fill:none; stroke:var(--on-dark); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pager-btn:hover{ background:rgba(255,255,255,.08); }
.pager-btn--next{ background:var(--white); }
.pager-btn--next svg{ stroke:var(--ink-2); }
.pager-btn--next:hover{ background:var(--paper); }
.pager-btn:disabled{ opacity:.3; cursor:default; background:none; }
.pager-btn--next:disabled svg{ stroke:var(--on-dark); }
.pager-meter{ width:84px; height:4px; border-radius:4px; background:rgba(255,255,255,.14); overflow:hidden; }
.pager-fill{ display:block; height:100%; width:0; background:var(--grad); border-radius:4px; transition:width .6s var(--ease-out); }

/* ===================================================================
   SCENES
=================================================================== */
#deck{ position:relative; z-index:1; }
.scene{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--hud-h) + clamp(16px, 3.5vh, 44px)) var(--gutter) calc(clamp(76px, 10vh, 100px) + var(--pager-h));
  overflow:hidden; scroll-margin-top:0;
}
.scene-inner{ width:100%; max-width:var(--maxw); margin:0 auto; position:relative; }
.scene--dark{ background:transparent; color:var(--on-dark); }
.scene--light{ background:var(--white); color:var(--tl); }
/* the accent scene: AWS deep gradient, lightly shaded so white text holds AA contrast */
.scene--accent{ background:linear-gradient(rgba(15,20,26,.2), rgba(15,20,26,.2)), var(--grad-deep); color:var(--white); }

/* type */
.eyebrow{
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-eyebrow);
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue-soft); margin-bottom:clamp(10px, 1.8vh, 18px);
}
.eyebrow--cyan{ color:var(--blue-bright); }
.eyebrow--dark{ color:var(--blue); }
.eyebrow--on-accent{ color:var(--white); }
.display{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-display);
  line-height:1.04; letter-spacing:-.035em; color:var(--white);
}
.display-alt{ display:block; }
.headline{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-headline);
  line-height:1.1; letter-spacing:-.03em; color:var(--white); max-width:22ch;
}
.headline--ink{ color:var(--tl); }
.headline, .display, .lead{ text-wrap:balance; }
.lead{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-lead); line-height:1.45; max-width:34ch; color:var(--on-dark-soft); letter-spacing:-.01em; }
.body-lg{ font-size:var(--fs-body-lg); color:var(--on-dark-soft); max-width:58ch; margin-top:clamp(12px, 2vh, 22px); }
.body-lg--ink{ color:var(--tl-soft); }
.src{ font-size:.8rem; line-height:1.35; margin-top:6px; }
.src a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px;
  border-radius:999px; font-family:var(--font-display); font-weight:600; font-size:.98rem;
  letter-spacing:-.005em; text-decoration:none;
  transition:transform .25s var(--ease-out), background .25s, box-shadow .25s;
}
.btn svg{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.btn--primary{ position:relative; background:var(--white); color:var(--ink-2); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.btn--primary::after{ /* AWS-style gradient glow on hover */
  content:""; position:absolute; inset:-2px; z-index:-1; border-radius:inherit; background:var(--grad); opacity:0; filter:blur(10px); transition:opacity .3s;
}
.btn--primary:hover{ background:var(--white); transform:translateY(-2px); }
.btn--primary:hover::after{ opacity:.85; }
.btn--block{ width:100%; }

/* tick lists */
.ticks{ display:grid; gap:8px; margin-top:14px; }
.ticks li{ position:relative; padding-left:28px; }
.ticks li::before{
  content:""; position:absolute; left:2px; top:.42em; width:14px; height:8px;
  border-left:2.5px solid var(--blue); border-bottom:2.5px solid var(--blue); transform:rotate(-45deg);
}
.ticks--dark li{ color:var(--on-dark); }
.ticks--dark li::before{ border-color:var(--blue-bright); }

/* ---------------- reveal system ---------------- */
.js [data-reveal]{
  opacity:0; transform:translate3d(0,28px,0);
  transition:opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay:calc(var(--i, 0) * 85ms);
}
.js .scene.is-in [data-reveal]{ opacity:1; transform:none; }

/* ===================================================================
   01 · THE OPPORTUNITY: account diagram
=================================================================== */
.scene--opening{ background:transparent; }
.opening-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(28px,4.5vw,72px); align-items:center; }
.opening-logo{ width:clamp(64px, 6vw, 92px); margin-bottom:clamp(16px, 3.5vh, 36px); }
.opening-copy .eyebrow{ letter-spacing:.14em; }
.opening-copy .display{ margin-bottom:clamp(14px, 2.6vh, 26px); }
.opening-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 22px; margin-top:clamp(20px, 4vh, 40px); }
.key-hint{ font-size:.92rem; color:var(--on-dark-soft); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }

.acct{
  position:relative; display:grid;
  grid-template-columns:minmax(96px,.62fr) minmax(0,1.6fr) minmax(96px,.62fr);
  grid-template-rows:auto auto auto; column-gap:clamp(22px, 3vw, 40px); row-gap:12px; align-items:center;
}
.acct-wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.acct-org{ display:contents; }
.acct-org::before{
  content:""; grid-column:2; grid-row:1 / 4; align-self:stretch; margin:-12px -12px; z-index:0;
  border-radius:22px; border:1px solid var(--line); background:rgba(15,20,26,.55);
}
.acct-org-label{
  grid-column:2; grid-row:1; z-index:1; font-family:var(--font-display); font-weight:600; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-soft); padding-top:4px;
}
.acct-half{
  position:relative; z-index:1; border-radius:16px; padding:14px 16px 16px;
  transition:border-color .6s, background .6s, box-shadow .6s;
}
.acct-half--tech{ grid-column:2; grid-row:2; border:1.5px solid rgba(0,153,255,.6); background:rgba(0,153,255,.1); }
.acct-half--cx{ grid-column:2; grid-row:3; border:1.5px dashed var(--flame); background:rgba(250,111,0,.08); }
.acct-half-k{ font-family:var(--font-display); font-weight:600; font-size:.92rem; color:var(--white); display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.acct-status{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px; border-radius:999px;
  background:var(--flame); color:var(--ink); font-weight:700; transition:background .5s, color .5s;
}
.acct-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.acct-chips li{
  font-size:.8rem; line-height:1.2; padding:5px 10px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid var(--line); color:var(--on-dark);
}
.acct-node{
  position:relative; z-index:1; border-radius:16px; padding:12px 14px; text-align:center;
  display:flex; flex-direction:column; gap:2px; transition:opacity .7s var(--ease-out), transform .9s var(--ease-out);
}
.acct-node-k{ display:block; font-family:var(--font-display); font-weight:600; font-size:.9rem; line-height:1.2; }
.acct-node-v{ display:block; font-size:.76rem; line-height:1.25; }
.acct-node--you{ grid-column:1; grid-row:2; background:var(--blue-bright); color:var(--ink); box-shadow:0 12px 30px rgba(0,153,255,.28); }
.acct-node--cresyn{
  grid-column:1; grid-row:3; flex-direction:row; align-items:center; gap:10px; text-align:left;
  border:1.5px solid transparent; color:var(--white); box-shadow:0 12px 30px rgba(228,51,255,.22);
  background:linear-gradient(var(--ink-2), var(--ink-2)) padding-box, var(--grad) border-box;
}
.acct-node--cresyn img{ width:30px; height:30px; flex:none; }
.acct-node--cresyn .acct-node-v{ color:var(--blue-soft); }
.acct-node--rival{ grid-column:3; grid-row:3; background:rgba(255,255,255,.05); border:1.5px dashed rgba(249,249,251,.5); color:var(--on-dark); }
.acct-node--rival .acct-node-v{ color:var(--flame); }

/* wires */
.wire{ fill:none; stroke-width:2.5; stroke-linecap:round; transition:opacity .6s; }
.wire--you{ stroke:var(--blue-bright); }
.wire--rival{ stroke:var(--flame); stroke-dasharray:7 7; }
.wire--spread{ stroke:var(--flame); stroke-dasharray:2 8; opacity:.55; }
.wire--cresyn{ stroke:var(--magenta); }
.wire--team{ stroke:var(--blue-soft); stroke-dasharray:3 6; }
.acct.is-live .wire--rival{ animation:flow 1.2s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-28; } }

/* states */
.acct[data-state="gap"] .acct-node--cresyn{ opacity:0; transform:translateX(-18px) scale(.92); }
.acct[data-state="gap"] .wire--cresyn, .acct[data-state="gap"] .wire--team{ opacity:0; }
.acct[data-state="gap"] .acct-half--cx{ box-shadow:0 0 0 0 rgba(250,111,0,.4); }
.acct.is-live[data-state="gap"] .acct-half--cx{ animation:gapPulse 2.4s var(--ease-out) infinite; }
@keyframes gapPulse{ 0%{ box-shadow:0 0 0 0 rgba(250,111,0,.45);} 70%,100%{ box-shadow:0 0 0 14px rgba(250,111,0,0);} }
.acct[data-state="covered"] .acct-half--cx{ border-style:solid; border-color:rgba(0,153,255,.6); background:rgba(0,153,255,.1); }
.acct[data-state="covered"] .acct-status{ background:var(--blue-bright); color:var(--ink); }
.acct[data-state="covered"] .acct-node--rival{ opacity:.22; transform:translateX(16px); }
.acct[data-state="covered"] .wire--rival, .acct[data-state="covered"] .wire--spread{ opacity:0; }
/* rival arrives after the scene settles */
.js .acct .acct-node--rival{ opacity:0; transform:translateX(24px); }
.js .acct .wire--rival, .js .acct .wire--spread{ opacity:0; }
.js .acct.is-live[data-state="gap"] .acct-node--rival{ opacity:1; transform:none; transition-delay:.5s; }
.js .acct.is-live[data-state="gap"] .wire--rival{ opacity:1; transition-delay:1s; }
.js .acct.is-live[data-state="gap"] .wire--spread{ opacity:.55; transition-delay:1.8s; }
.js .acct.is-live[data-state="covered"] .acct-node--rival{ opacity:.22; transform:translateX(16px); }

.acct-toggle{ display:flex; gap:6px; margin-top:clamp(18px, 3vh, 28px); padding:5px; border-radius:999px; background:rgba(15,20,26,.6); border:1px solid var(--line); width:max-content; max-width:100%; }
.acct-toggle-btn{
  min-height:42px; padding:0 18px; border-radius:999px; font-family:var(--font-display); font-weight:600; font-size:.82rem;
  color:var(--on-dark-soft); transition:background .3s, color .3s;
}
.acct-toggle-btn:hover{ color:var(--white); }
.acct-toggle-btn[aria-pressed="true"]{ background:rgba(250,111,0,.18); color:#ffa766; }
.acct-toggle-btn--cresyn[aria-pressed="true"]{ background:var(--grad); color:var(--ink); }
.acct-toggle-btn--cresyn[aria-pressed="false"]{ animation:nudge 2.4s var(--ease-out) 2.4s 2; }
@keyframes nudge{ 0%,100%{ box-shadow:0 0 0 0 rgba(228,51,255,0);} 30%{ box-shadow:0 0 0 4px rgba(228,51,255,.5);} }
.acct-caption{ margin-top:12px; font-size:var(--fs-small); color:var(--on-dark-soft); max-width:52ch; min-height:2.9em; }

/* ===================================================================
   02 · WHY NOW (accent gradient)
=================================================================== */
.scene--why .headline{ max-width:24ch; }
.why-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px, 4.5vw, 72px); margin-top:clamp(22px, 4vh, 44px); align-items:center; }
.gap-stat{ background:var(--ink); color:var(--on-dark); border-radius:24px; padding:clamp(20px, 2.6vw, 34px); box-shadow:0 30px 60px rgba(15,20,26,.4); }
.gap-bars{ display:grid; gap:12px; margin-bottom:18px; }
.gap-bar{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:14px; }
.gap-bar-num{ min-width:2.6em; font-family:var(--font-display); font-weight:700; font-size:clamp(2rem, 1.2rem + 2.2vw, 3.2rem); line-height:1; font-variant-numeric:tabular-nums; }
.gap-bar--do .gap-bar-num{ color:var(--blue-bright); }
.gap-bar-fill{ position:relative; height:16px; border-radius:16px; background:rgba(255,255,255,.08); overflow:hidden; }
.gap-bar-fill::after{ content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--v) * 2%); border-radius:16px; background:var(--grad); transform-origin:left; }
.gap-bar--do .gap-bar-fill::after{ background:var(--blue-bright); }
.js .gap-bar-fill::after{ transform:scaleX(0); transition:transform 1.4s var(--ease-out) .5s; }
.js .scene.is-in .gap-bar-fill::after{ transform:scaleX(1); }
.gap-stat-text{ font-size:var(--fs-body-lg); line-height:1.45; }
.gap-stat-text strong{ color:var(--white); font-family:var(--font-display); }
.gap-stat-text em{ font-style:normal; color:var(--blue-soft); }
.gap-stat .src{ color:var(--on-dark-soft); }
.why-stats{ display:grid; gap:clamp(10px, 2vh, 18px); }
.why-stat{ display:grid; grid-template-columns:auto 1fr; gap:clamp(14px, 2vw, 24px); align-items:center; padding-bottom:clamp(10px, 2vh, 18px); border-bottom:1.5px solid rgba(255,255,255,.28); }
.why-stat:last-child{ border-bottom:0; padding-bottom:0; }
.why-stat .why-num{ width:2.9em; font-family:var(--font-display); font-weight:700; font-size:clamp(2.6rem, 1.6rem + 2.6vw, 4.2rem); line-height:.95; color:var(--white); min-width:2.9ch; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.why-stat p{ font-size:var(--fs-body); color:var(--white); line-height:1.4; }
.why-stat .src{ color:rgba(255,255,255,.88); font-size:.8rem; }
.why-kicker{ margin-top:clamp(18px, 3.5vh, 36px); font-family:var(--font-display); font-weight:500; font-size:var(--fs-body-lg); color:var(--white); max-width:60ch; }
.why-kicker strong{ font-weight:700; }

/* ===================================================================
   03 · THE BIGGER OPPORTUNITY: AWS ecosystem
=================================================================== */
.eco-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px, 4.5vw, 72px); align-items:center; }
.eco-copy .headline{ max-width:20ch; }
.outcomes{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px, 1.8vh, 18px) clamp(16px, 2vw, 28px); margin-top:clamp(18px, 3.5vh, 34px); counter-reset:oc; }
.outcome{ position:relative; padding-left:40px; }
.outcome::before{
  counter-increment:oc; content:"0" counter(oc); position:absolute; left:0; top:2px;
  font-family:var(--font-display); font-weight:700; font-size:.9rem;
}
.outcome h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(.98rem, .9rem + .3vw, 1.12rem); color:var(--white); line-height:1.3; }
.outcome p{ font-size:var(--fs-small); color:var(--on-dark-soft); line-height:1.4; margin-top:2px; }

.eco-visual{ display:flex; flex-direction:column; align-items:center; }
.eco{ position:relative; width:min(100%, 500px, 60vh); aspect-ratio:1; margin:0 auto; }
.eco-orbits{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.eco-orbit{ fill:none; stroke:var(--blue-soft); stroke-width:1.5; opacity:.35; stroke-dasharray:100; stroke-dashoffset:0; transform:rotate(-90deg); transform-origin:200px 200px; }
.eco-orbit[data-layer="1"]{ stroke:var(--violet-deep); stroke-width:10; opacity:.55; }
.eco-orbit[data-layer="3"]{ stroke-dasharray:1.2 1.6; }
.js .eco-orbit{ stroke-dashoffset:100; transition:stroke-dashoffset 1.2s var(--ease-inout), opacity .4s; }
.js .eco-orbit[data-layer="3"]{ stroke-dasharray:1.2 1.6; stroke-dashoffset:0; opacity:0; transition:opacity 1s; }
.js .scene--eco.is-in .eco-orbit{ stroke-dashoffset:0; }
.js .scene--eco.is-in .eco-orbit[data-layer="3"]{ opacity:.35; transition-delay:1.3s; }
.js .scene--eco.is-in .eco-orbit[data-layer="1"]{ transition-delay:.3s; }
.js .scene--eco.is-in .eco-orbit[data-layer="2"]{ transition-delay:.8s; }
.eco-spoke{ stroke:var(--blue-soft); stroke-width:1.5; stroke-dasharray:3 6; opacity:.6; }
.scene--eco.is-in .eco-spoke{ animation:flow 1.6s linear 6; }
.eco-hub{
  position:absolute; left:50%; top:50%; width:24%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--grad); color:var(--ink); display:grid; place-content:center; text-align:center;
  box-shadow:0 0 0 8px rgba(228,51,255,.16), 0 20px 50px rgba(228,51,255,.35);
}
.eco-hub-k{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem, 1rem + 1.4vw, 2.1rem); line-height:1; }
.eco-hub-v{ font-family:var(--font-display); font-weight:600; font-size:clamp(.58rem, .5rem + .25vw, .74rem); letter-spacing:.14em; text-transform:uppercase; }
.eco-node{
  position:absolute; width:26%; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  left:calc(50% + cos(var(--a)) * var(--r)); top:calc(50% + sin(var(--a)) * var(--r));
  transform:translate(-50%, -22%); transition:opacity .5s, filter .5s;
}
.eco-node img{ width:clamp(34px, 11%, 52px); width:clamp(34px, 4.2vw, 52px); border-radius:10px; box-shadow:0 8px 22px rgba(0,0,0,.35); }
.eco-name{ font-family:var(--font-display); font-weight:600; font-size:clamp(.64rem, .56rem + .3vw, .82rem); line-height:1.2; color:var(--white); text-shadow:0 1px 8px rgba(15,20,26,.9); }
.eco-sub{ font-size:clamp(.6rem, .54rem + .22vw, .74rem); line-height:1; margin-top:-2px; color:var(--blue-soft); }
.eco-node--up{ flex-direction:column-reverse; transform:translate(-50%, -78%); }
.eco-node--up .eco-sub{ order:-1; margin:0 0 -2px; }
.js .eco-node{ opacity:0; }
.js .scene--eco.is-in .eco-node{ opacity:1; transition:opacity .7s var(--ease-out), filter .5s; }
.js .scene--eco.is-in .eco-node[data-layer="1"]{ transition-delay:.5s; }
.js .scene--eco.is-in .eco-node[data-layer="2"]{ transition-delay:1s; }
.js .scene--eco.is-in .eco-node[data-layer="3"]{ transition-delay:1.5s; }
.eco-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:clamp(14px, 2.4vh, 22px); }
.eco-tag{
  font-family:var(--font-display); font-weight:500; font-size:.74rem; padding:5px 11px; border-radius:999px;
  border:1px dashed rgba(117,207,255,.45); color:var(--blue-soft); background:rgba(15,20,26,.55); transition:opacity .5s;
}
.js .eco-tag{ opacity:0; }
.js .scene--eco.is-in .eco-tag{ opacity:1; transition:opacity .7s 2s; }
/* layer focus */
.eco-visual[data-focus] .eco-node, .eco-visual[data-focus] .eco-tag{ opacity:.18 !important; filter:grayscale(.6); transition-delay:0s !important; }
.eco-visual[data-focus="1"] [data-layer="1"], .eco-visual[data-focus="2"] [data-layer="2"],
.eco-visual[data-focus="3"] [data-layer="3"], .eco-visual[data-focus="4"] [data-layer="4"]{ opacity:1 !important; filter:none; }
.eco-visual[data-focus] .eco-spoke{ opacity:.15; }
.eco-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:clamp(10px, 1.6vh, 16px); }
.eco-legend button{
  display:flex; align-items:center; gap:8px; min-height:36px; padding:0 12px; border-radius:999px;
  font-family:var(--font-display); font-weight:500; font-size:.76rem; color:var(--on-dark-soft);
  border:1px solid var(--line); background:rgba(15,20,26,.5); transition:color .25s, border-color .25s, background .25s;
}
.eco-legend button:hover, .eco-legend button[aria-pressed="true"]{ color:var(--white); border-color:var(--blue-bright); background:rgba(0,153,255,.14); }
.eco-dot{ width:8px; height:8px; border-radius:50%; background:var(--violet-deep); box-shadow:0 0 0 2px rgba(255,255,255,.2); }
[data-eco-layer="2"] .eco-dot{ background:var(--blue-soft); }
[data-eco-layer="3"] .eco-dot{ background:var(--blue-bright); }
[data-eco-layer="4"] .eco-dot{ background:transparent; border:1px dashed var(--blue-soft); box-shadow:none; }
.eco-note{ margin-top:8px; font-size:.78rem; color:var(--on-dark-soft); text-align:center; }

/* ===================================================================
   04 · YOUR CX PRACTICE: lifecycle
=================================================================== */
.practice-head{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(20px, 4vw, 64px); align-items:end; }
.practice-head .headline{ max-width:16ch; }
.practice-head .body-lg{ margin-top:0; }
.cycle{ position:relative; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:clamp(10px, 1.4vw, 20px); margin-top:clamp(28px, 6vh, 64px); }
.cycle::before{
  content:""; position:absolute; left:0; right:0; top:27px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--blue), var(--violet-deep) 50%, #c300e0 80%, #d14600); transform-origin:left;
}
.js .cycle::before{ transform:scaleX(0); transition:transform 1.8s var(--ease-inout) .3s; }
.js .scene--practice.is-in .cycle::before{ transform:scaleX(1); }
.cycle::after{ /* the loop back to the start: managed services keep the cycle going */
  content:"↻"; position:absolute; right:-6px; top:-4px; font-size:1.4rem; line-height:1; color:#d14600;
}
.cycle-step{ position:relative; }
.cycle-num{
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--ink-2); color:var(--white); font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  box-shadow:0 0 0 7px var(--white); position:relative; margin-bottom:16px;
}
.cycle-step:nth-child(n+6) .cycle-num{ background:var(--grad-deep); color:var(--white); }
.cycle-step h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.02rem, .9rem + .5vw, 1.3rem); color:var(--blue); line-height:1.2; }
.cycle-step p{ color:var(--tl-soft); font-size:var(--fs-small); line-height:1.42; margin-top:6px; }
.nohire{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:clamp(24px, 5vh, 52px); }
.nohire li{
  display:flex; align-items:center; gap:10px; padding:10px 18px 10px 12px; border-radius:999px;
  background:var(--ink-2); color:var(--white); font-family:var(--font-display); font-weight:600; font-size:clamp(.82rem, .78rem + .2vw, .95rem);
}
.nohire svg{ width:22px; height:22px; flex:none; padding:3px; border-radius:50%; background:var(--grad); fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* ===================================================================
   05 · WHY CRESYN: people & the team behind your team
=================================================================== */
.team-grid{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(28px, 5vw, 80px); align-items:center; }
.team-copy .headline{ max-width:16ch; }
.years{ display:flex; align-items:center; gap:18px; margin-top:clamp(18px, 3.5vh, 34px); }
.years-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(3.4rem, 2rem + 4vw, 6rem); line-height:.95; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.years-label{ font-family:var(--font-display); font-weight:500; font-size:var(--fs-body-lg); color:var(--white); max-width:17ch; line-height:1.3; }
.founders{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(16px, 3vh, 28px); }
.founders li{
  display:flex; flex-direction:column; padding:12px 18px; border-radius:14px; min-width:170px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-left:4px solid var(--violet);
}
.founder-name{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--white); }
.founder-role{ font-size:.86rem; color:var(--on-dark-soft); }
.team-promise{ margin-top:clamp(16px, 3vh, 28px); padding-top:14px; border-top:1px solid var(--line); color:var(--on-dark); font-size:var(--fs-body); max-width:46ch; }

.layers{ position:relative; display:grid; gap:12px; perspective:1200px; }
.layer{
  position:relative; border-radius:18px; padding:clamp(14px, 2vh, 20px) clamp(16px, 2vw, 24px);
  transition:transform 1s var(--ease-out), opacity .9s var(--ease-out);
}
.layer--you{ background:var(--white); color:var(--tl); margin-right:12%; box-shadow:0 24px 50px rgba(0,0,0,.35); z-index:3; }
.layer--cresyn{ border:1.5px solid transparent; background:linear-gradient(var(--ink-2), var(--ink-2)) padding-box, var(--grad) border-box; margin:0 6% 0 6%; z-index:2; box-shadow:0 20px 40px rgba(0,0,0,.3); }
.layer--eco{ background:rgba(15,20,26,.72); border:1px solid var(--line); margin-left:12%; z-index:1; }
.layer::before{ /* connector down the left edge */
  content:""; position:absolute; left:28px; top:-12px; height:12px; width:2px; background:var(--blue-soft); opacity:.5;
}
.layer--you::before{ display:none; }
.layer-k{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }
.layer--cresyn .layer-k{ color:var(--violet); }
.layer--eco .layer-k{ color:var(--blue-soft); }
.layer-k img{ width:22px; height:22px; }
.layer-t{ font-family:var(--font-display); font-weight:600; font-size:clamp(1rem, .9rem + .4vw, 1.2rem); margin-top:4px; line-height:1.3; }
.layer--cresyn .layer-t{ color:var(--white); }
.layer-list{ display:grid; gap:8px; margin-top:8px; font-size:var(--fs-small); color:var(--on-dark-soft); line-height:1.4; }
.layer-list strong{ color:var(--white); font-weight:700; }
.layer-omni{ display:flex; align-items:center; gap:12px; padding:8px 10px; margin-top:2px; border-radius:12px; background:var(--white); color:var(--tl-soft); }
.layer-omni img{ width:34px; flex:none; }
.layer-omni strong{ color:var(--tl); }
.js .layer{ opacity:0; transform:translate3d(40px,0,0) rotateY(-8deg); }
.js .scene--team.is-in .layer{ opacity:1; transform:none; }
.js .scene--team.is-in .layer--you{ transition-delay:.3s; }
.js .scene--team.is-in .layer--cresyn{ transition-delay:.55s; }
.js .scene--team.is-in .layer--eco{ transition-delay:.8s; }

/* ===================================================================
   06 · FUNDING & RFP
=================================================================== */
.scene--fund{ background:var(--paper); }
.fund-h{ max-width:30ch; }
.fund-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px, 2.6vw, 36px); margin-top:clamp(22px, 4.5vh, 48px); }
.fund-card{
  position:relative; background:var(--white); border-radius:22px; padding:clamp(20px, 2.4vw, 32px);
  box-shadow:0 20px 50px rgba(15,20,26,.08); color:var(--tl); overflow:hidden;
}
.fund-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--blue); }
.fund-card--rfp::before{ background:var(--grad-deep); }
.fund-tag{ font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); }
.fund-card--rfp .fund-tag{ color:var(--magenta-ink); }
.fund-card h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.2rem, 1rem + .8vw, 1.6rem); color:var(--tl); line-height:1.2; letter-spacing:-.02em; margin:6px 0 10px; }
.fund-card > p{ color:var(--tl-soft); font-size:var(--fs-body); line-height:1.5; }
.fund-card .ticks{ color:var(--tl); }
.fine{ margin-top:14px !important; padding-top:12px; border-top:1px solid var(--line-light); font-size:.8rem !important; line-height:1.45 !important; color:var(--tl-soft); }
.fine a{ color:var(--blue); }
.rfp-flow{ display:flex; flex-wrap:wrap; gap:6px; counter-reset:rf; }
.rfp-flow li{
  position:relative; display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  background:var(--paper); border:1px solid var(--line-light); font-family:var(--font-display); font-weight:600; font-size:.8rem; color:var(--tl);
}
.rfp-flow li::before{ counter-increment:rf; content:counter(rf); display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--grad); color:var(--ink); font-size:.68rem; }
.js .rfp-flow li{ opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .scene--fund.is-in .rfp-flow li{ opacity:1; transform:none; }
.js .scene--fund.is-in .rfp-flow li:nth-child(1){ transition-delay:.6s; }
.js .scene--fund.is-in .rfp-flow li:nth-child(2){ transition-delay:.75s; }
.js .scene--fund.is-in .rfp-flow li:nth-child(3){ transition-delay:.9s; }
.js .scene--fund.is-in .rfp-flow li:nth-child(4){ transition-delay:1.05s; }
.js .scene--fund.is-in .rfp-flow li:nth-child(5){ transition-delay:1.2s; }
.rfp-quote{ margin-top:16px; padding:14px 18px; border-radius:14px; background:var(--ink-2); }
.rfp-quote p{ font-family:var(--font-display); font-weight:600; font-size:clamp(.95rem, .88rem + .3vw, 1.08rem); line-height:1.4; color:var(--white); }

/* ===================================================================
   07 · CTA
=================================================================== */
.scene--cta{ background:radial-gradient(70% 60% at 88% 0%, rgba(104,66,255,.28), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgba(228,51,255,.12), transparent 70%), #000; flex-direction:column; justify-content:center; }
.scene--cta > .scene-inner{ flex:1; display:grid; align-items:center; }
.cta-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,80px); }
.headline--cta{ max-width:20ch; }
.lead--body{ font-family:var(--font-body); font-weight:400; color:var(--on-dark); max-width:46ch; margin-top:clamp(14px, 2.4vh, 22px); font-size:var(--fs-body-lg); }
.cta-copy .ticks{ margin-top:12px; font-size:var(--fs-body); }
.cta-form{
  position:relative; padding:clamp(20px, 2.6vw, 32px); border-radius:22px;
  background:var(--ink-2); border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.cta-form::before{ content:""; position:absolute; left:0; top:28px; bottom:28px; width:4px; border-radius:0 4px 4px 0; background:var(--grad); }
.form-h{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.05rem, .95rem + .4vw, 1.25rem); color:var(--white); line-height:1.25; margin-bottom:14px; }
.field{ display:grid; gap:4px; margin-bottom:10px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field label{ font-family:var(--font-display); font-weight:500; font-size:.8rem; color:var(--on-dark); }
.optional{ color:var(--on-dark-soft); font-weight:400; }
.field input, .field textarea{
  width:100%; min-height:44px; padding:10px 14px; border-radius:12px; border:1.5px solid rgba(117,207,255,.25);
  background:rgba(15,20,26,.6); color:var(--white); font:inherit; font-size:16px; transition:border-color .2s, box-shadow .2s;
}
.field textarea{ resize:vertical; min-height:72px; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--blue-bright); box-shadow:0 0 0 3px rgba(0,153,255,.25); }
.field input[aria-invalid="true"]{ border-color:#ff8a7a; }
.field-err{ min-height:0; font-size:.78rem; color:#ffb3a8; }
.field-err:empty{ display:none; }
.cta-form .btn{ margin-top:6px; }
.form-note{ margin-top:10px; font-size:.8rem; color:var(--on-dark-soft); line-height:1.4; }
.form-note a{ color:var(--blue-soft); }
.form-note.is-done{ color:var(--blue-soft); }
.cta-lines{
  position:absolute; right:-20px; top:calc(var(--hud-h) + 10px); width:clamp(140px, 18vw, 260px); pointer-events:none; transform:scaleY(-1);
  fill:none; stroke:var(--violet); stroke-width:3; stroke-linecap:round; opacity:.55;
}
.cta-footer{
  width:100%; max-width:var(--maxw); margin:clamp(24px, 4vh, 48px) auto 0; padding-top:18px;
  border-top:1px solid var(--line); display:flex; align-items:center; gap:10px 22px; flex-wrap:wrap; position:relative;
}
.cta-footer > img{ height:52px; width:auto; }
.cta-footer > a{ color:var(--on-dark-soft); text-decoration:none; font-size:.9rem; min-height:44px; display:inline-flex; align-items:center; }
.cta-footer > a:hover{ color:var(--white); }
.legal{ flex-basis:100%; display:flex; align-items:center; gap:12px; font-size:.72rem; color:var(--on-dark-soft); line-height:1.4; max-width:80ch; }
.legal-aws{ width:40px; height:auto; flex:none; opacity:.85; }
@media (min-width: 760px){
  /* keep the footer clear of the fixed pager in the bottom-right corner */
  .cta-footer{ padding-right:230px; }
}

/* ===================================================================
   RESPONSIVE
=================================================================== */
/* short laptop screens (e.g. 1366×768): tighten vertical rhythm */
@media (min-width: 900px) and (max-height: 820px){
  :root{ --fs-display: clamp(2rem, 1rem + 2.8vw, 3.5rem); --fs-headline: clamp(1.7rem, 1rem + 1.9vw, 2.6rem); }
  .opening-logo{ width:56px; margin-bottom:12px; }
  .scene--opening{ padding-top:calc(var(--hud-h) + 8px); }
  .acct-half{ padding:10px 14px 12px; }
  .acct-chips{ margin-top:8px; }
  .cycle{ margin-top:28px; }
  .cycle-num{ width:48px; height:48px; margin-bottom:12px; }
  .cycle::before{ top:23px; }
  .nohire{ margin-top:24px; }
  .eco{ width:min(100%, 440px, 58vh); }
  .outcome p{ font-size:.86rem; }
  .fund-card > p{ font-size:.96rem; }
  .ticks{ gap:5px; }
  .layer-list{ gap:6px; }
  .years-num{ font-size:clamp(3rem, 2rem + 3vw, 4.6rem); }
  .field{ margin-bottom:6px; }
  .field textarea{ min-height:52px; }
  .fund-card{ padding:20px 24px; }
  .fund-grid{ margin-top:22px; }
  .fund-card h3{ margin:4px 0 8px; }
  .rfp-quote{ margin-top:12px; padding:12px 16px; }
  .cta-footer{ margin-top:16px; padding-top:12px; }
  .cta-footer > img{ height:44px; }
  .form-h{ margin-bottom:10px; }
}

@media (min-width: 1600px) and (min-height: 900px){
  :root{
    --maxw: 1440px;
    --fs-display: clamp(3.2rem, 1rem + 2.4vw, 4.3rem);
    --fs-headline: clamp(2.8rem, 1rem + 2vw, 3.8rem);
    --fs-lead: 1.6rem; --fs-body-lg: 1.32rem; --fs-body: 1.14rem; --fs-small: 1rem; --fs-eyebrow: .95rem;
  }
  .eco{ width:min(100%, 600px, 60vh); }
  .acct{ grid-template-columns:minmax(120px,.62fr) minmax(0,1.6fr) minmax(120px,.62fr); column-gap:44px; row-gap:16px; }
  .acct-half{ padding:18px 20px 20px; }
  .acct-chips li{ font-size:.92rem; padding:6px 12px; }
  .acct-node{ padding:16px 18px; }
  .acct-node-k{ font-size:1rem; }
  .acct-node-v{ font-size:.84rem; }
  .acct-half-k{ font-size:1.02rem; }
}

@media (min-width: 900px){
  html{ scroll-snap-type:y proximity; }
  .scene{ scroll-snap-align:start; }
}

@media (min-width: 1100px){
  .scene{ padding-right:max(var(--gutter), 96px); }
}
@media (max-width: 1099px){
  .rail{ display:none; }
}

/* tablet: single column */
@media (max-width: 899px){
  :root{ --hud-h: 64px; --pager-h: 64px; }
  .opening-grid, .why-grid, .eco-grid, .team-grid, .cta-grid, .practice-head{ grid-template-columns:minmax(0,1fr); }
  .eco-grid{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .eco-copy{ display:contents; }
  .eco-visual{ order:1; margin:clamp(18px, 3vh, 28px) 0 8px; }
  .outcomes{ order:2; }
  .eco{ width:min(100%, 440px); }
  .cycle{ grid-template-columns:repeat(4, minmax(0,1fr)); row-gap:28px; }
  .cycle::before, .cycle::after{ display:none; }
  .cycle-num{ box-shadow:none; }
  .layers{ max-width:620px; }
  .cta-lines{ opacity:.3; }
}

@media (max-width: 759px){
  .hud-title{ display:none; }
  .hud-scene{ padding:0 14px; }
  .hud-logo{ padding:0 8px; }
  .hud-wordmark{ display:none; }
  .hud-cta{ padding:0 14px; font-size:.76rem; }
  .hud-cta-long{ display:none; }
  .hud-cta-short{ display:inline; }
  .pager{
    left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right));
    bottom:max(12px, env(safe-area-inset-bottom)); justify-content:space-between;
  }
  .pager-meter{ flex:1; width:auto; margin:0 6px; }
  .pager-btn{ width:48px; height:48px; }
  .scene{ align-items:flex-start; }
  .key-hint{ display:none; }
  .opening-logo{ width:56px; margin-bottom:14px; }
  .display{ font-size:clamp(1.8rem, .9rem + 5.2vw, 2.6rem); }

  /* account diagram stacks vertically */
  .acct{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto auto auto; column-gap:12px; row-gap:10px; }
  .acct-org::before{ grid-column:1 / 3; grid-row:2 / 5; margin:-6px -6px; }
  .acct-org-label, .acct-half--tech, .acct-half--cx{ grid-column:1 / 3; }
  .acct-node--you{ grid-column:1 / 3; grid-row:1; justify-self:center; min-width:60%; margin-bottom:14px; }
  .acct-org-label{ grid-row:2; padding:4px 6px 0; }
  .acct-half--tech{ grid-row:3; margin:0 4px; }
  .acct-half--cx{ grid-row:4; margin:0 4px; }
  .acct-node--cresyn{ grid-column:1; grid-row:5; margin-top:14px; }
  .acct-node--rival{ grid-column:2; grid-row:5; margin-top:14px; }
  .acct-half{ padding:10px 12px 12px; }
  .acct-chips li{ font-size:.74rem; padding:4px 9px; }
  .acct-toggle{ width:100%; }
  .acct-toggle-btn{ flex:1; padding:0 10px; font-size:.76rem; line-height:1.2; }

  .why-stat .why-num{ font-size:2.3rem; width:2.55em; }
  .cta-form .btn{ font-size:.92rem; padding:0 18px; }

  .outcomes{ grid-template-columns:1fr; gap:10px; }
  .eco-name{ font-size:.62rem; }
  .eco-sub{ font-size:.58rem; }
  .eco-node{ width:30%; }
  .eco-node img{ width:32px; border-radius:7px; }
  .eco-legend button{ font-size:.72rem; padding:0 10px; }

  /* lifecycle becomes a vertical timeline */
  .cycle{ grid-template-columns:1fr; gap:14px; margin-top:24px; }
  .cycle::before{ display:block; left:21px; right:auto; top:8px; bottom:8px; width:3px; height:auto; background:linear-gradient(180deg, var(--blue), var(--violet-deep) 50%, #c300e0 80%, #d14600); transform-origin:top; }
  .js .cycle::before{ transform:scaleY(0); }
  .js .scene--practice.is-in .cycle::before{ transform:scaleY(1); }
  .cycle-step{ display:grid; grid-template-columns:44px 1fr; column-gap:14px; align-items:start; }
  .cycle-num{ width:44px; height:44px; font-size:.9rem; grid-row:1 / span 2; margin:0; box-shadow:0 0 0 5px var(--white); }
  .cycle-step h3, .cycle-step p{ grid-column:2; }
  .cycle-step p{ margin-top:2px; }
  .nohire{ flex-direction:column; align-items:stretch; }

  .years-num{ font-size:3.6rem; }
  .founders li{ flex:1 1 140px; min-width:0; }
  .layer--you, .layer--cresyn, .layer--eco{ margin:0; }
  .layer--cresyn{ margin-left:10px; }
  .layer--eco{ margin-left:20px; }

  .fund-grid{ grid-template-columns:1fr; }

  .field-row{ grid-template-columns:1fr; gap:0; }
  .cta-footer > img{ height:40px; }
}

@media (max-width: 359px){
  .acct-toggle-btn{ font-size:.7rem; }
  .eco-name{ font-size:.56rem; }
}

/* ===================================================================
   REDUCED MOTION: everything visible, no camera travel
=================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-snap-type:none; }
  .js [data-reveal], .js .layer, .js .eco-node, .js .eco-tag, .js .rfp-flow li, .js .cycle::before,
  .js .gap-bar-fill::after, .js .acct .acct-node--rival{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .js .acct .wire--rival, .js .acct .wire--spread{ opacity:1; transition:none; }
  .acct[data-state="covered"] .acct-node--rival{ opacity:.22 !important; }
  .acct[data-state="covered"] .wire--rival, .acct[data-state="covered"] .wire--spread{ opacity:0 !important; }
  .js .eco-orbit{ stroke-dashoffset:0 !important; transition:none !important; }
  .js .eco-orbit[data-layer="3"]{ opacity:.35 !important; }
  .eco-spoke, .wire--rival, .acct-half--cx, .acct-toggle-btn--cresyn{ animation:none !important; }
  .acct-node--cresyn{ transition:none; }
  .backdrop-world{ will-change:auto; }
}