/* ===================================================================
   Engage360 by Servion: cinematic presentation microsite
   Brand tokens are sampled from the Engage360 source material:
   navy #1E2251, orange #F8A01F, cyan #00ADEF; Poppins + PT Sans.
   Vendor-specific values live in this :root block; the rest of the
   stylesheet only references tokens.
=================================================================== */

:root{
  /* brand */
  --navy:        #1e2251;
  --navy-deep:   #161940;
  --navy-ink:    #0f1131;
  --navy-line:   rgba(168,227,249,.16);
  --orange:      #f8a01f;
  --orange-deep: #e08a0b;
  --cyan:        #00adef;
  --cyan-soft:   #a8e3f9;
  --cyan-ink:    #0079b5;   /* cyan darkened for AA contrast on white */
  --purple:      #6b2d88;
  --white:       #ffffff;
  --paper:       #f6f8fc;
  --ink:         #262a4a;
  --ink-soft:    #555a78;
  --on-dark:     #e9ecf7;
  --on-dark-soft:#b8bdd6;

  /* type */
  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'PT Sans', 'Segoe UI', system-ui, sans-serif;
  --fs-display: clamp(2.5rem, 1.2rem + 5.2vw, 5.6rem);
  --fs-headline: clamp(1.85rem, 1rem + 2.9vw, 3.4rem);
  --fs-lead: clamp(1.15rem, .95rem + .9vw, 1.6rem);
  --fs-body-lg: clamp(1.05rem, .95rem + .45vw, 1.3rem);
  --fs-body: clamp(1rem, .95rem + .2vw, 1.1rem);
  --fs-eyebrow: clamp(.75rem, .7rem + .2vw, .875rem);

  /* 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(--navy); }
body{
  margin:0; background:var(--navy); 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; }
address{ font-style:normal; }
kbd{
  font-family:var(--font-display); font-size:.75em; font-weight:600;
  padding:.15em .5em; border-radius:6px; border:1px solid var(--navy-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; }
.nowrap{ white-space:nowrap; }
.skip-link{
  position:fixed; left:12px; top:-60px; z-index:100; padding:10px 16px; border-radius:8px;
  background:var(--orange); color:var(--navy); font-weight:700; text-decoration:none;
}
.skip-link:focus{ top:12px; }
:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:6px; }

/* ===================================================================
   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(--cyan-soft); stroke-width:1.5; opacity:.16; vector-effect:non-scaling-stroke; }
.bd-node{ fill:var(--cyan-soft); opacity:.28; }
.bd-node--hot{ fill:var(--orange); opacity:.6; }
.bd-ring{ fill:none; stroke:var(--purple); stroke-width:14; opacity:.28; }
.bd-ring-2{ fill:none; stroke:var(--cyan); stroke-width:2; opacity:.13; vector-effect:non-scaling-stroke; }
.bd-tri{ fill:var(--orange); opacity:.45; }
/* keep the reading side of each dark scene calm */
.backdrop::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(30,34,81,.82) 0%, rgba(30,34,81,.55) 45%, rgba(30,34,81,0) 75%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(15,17,49,.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:16px;
  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-logo, .hud-scene{
  background:rgba(22,25,64,.86); border:1px solid var(--navy-line);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:999px; height:44px; display:flex; align-items:center;
}
.hud-logo{ padding:0 18px; transition:opacity .4s, visibility .4s; }
[data-scene="opening"] .hud-logo{ opacity:0; visibility:hidden; }
.hud-logo img{ height:19px; width:auto; }
.hud-scene{ padding:0 18px; gap:12px; font-family:var(--font-display); font-size:.8rem; letter-spacing:.04em; color:var(--on-dark); }
.hud-count{ color:var(--orange); font-weight:600; font-variant-numeric:tabular-nums; }
.hud-title{ font-weight:500; }

.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,25,64,.78); border:1px solid var(--navy-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(233,236,247,.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(--orange); 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(--navy-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,25,64,.86); border:1px solid var(--navy-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(--orange); }
.pager-btn--next svg{ stroke:var(--navy); }
.pager-btn--next:hover{ background:#ffb444; }
.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(--orange); 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(20px, 4vh, 48px)) var(--gutter) calc(clamp(72px, 10vh, 104px) + 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(--ink); }
.scene--orange{ background:var(--orange); color:var(--navy); }

/* type */
.eyebrow{
  font-family:var(--font-display); font-weight:600; font-size:var(--fs-eyebrow);
  letter-spacing:.24em; text-transform:uppercase; color:var(--orange); margin-bottom:clamp(12px, 2vh, 20px);
}
.eyebrow--cyan{ color:var(--cyan); }
.eyebrow--dark{ color:var(--cyan-ink); }
.display{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-display);
  line-height:1.02; letter-spacing:-.02em; text-transform:uppercase; color:var(--orange);
}
.headline{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-headline);
  line-height:1.1; letter-spacing:-.015em; color:var(--white); max-width:22ch;
}
.headline--cyan{ color:var(--cyan-ink); }
.hl-orange{ color:var(--orange); }
.headline, .display, .lead, .voice blockquote p{ text-wrap:balance; }
.lead{ font-family:var(--font-display); font-weight:500; font-size:var(--fs-lead); line-height:1.38; max-width:30ch; }
.lead--cyan{ color:var(--cyan); }
.body-lg{ font-size:var(--fs-body-lg); color:var(--on-dark-soft); max-width:58ch; margin-top:clamp(14px, 2.2vh, 24px); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 26px;
  border-radius:999px; font-family:var(--font-display); font-weight:600; font-size:.95rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  transition:transform .25s var(--ease-out), background .25s, box-shadow .25s;
}
.btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.btn--primary{ background:var(--orange); color:var(--navy); box-shadow:0 10px 30px rgba(248,160,31,.25); }
.btn--primary:hover{ background:#ffb444; transform:translateY(-2px); }
.btn--ghost{ border:1.5px solid rgba(233,236,247,.4); color:var(--on-dark); }
.btn--ghost:hover{ border-color:var(--cyan); color:var(--white); }

/* ---------------- 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 · OPENING
=================================================================== */
.scene--opening{ background:transparent; }
.opening-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,4vw,64px); align-items:center; }
.opening-lockup{ width:clamp(170px, 16vw, 230px); margin-bottom:clamp(22px, 5vh, 52px); }
.opening-copy .display{ margin-bottom:clamp(16px, 3vh, 28px); }
.opening-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 22px; margin-top:clamp(22px, 4.5vh, 44px); }
.key-hint{ font-size:.92rem; color:var(--on-dark-soft); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.opening-visual{ transform-origin:50% 55%; will-change:transform, opacity; }
.opening-visual img{ width:100%; }
.js .opening-visual{ opacity:0; transform:scale(.9); transition:opacity 1.2s var(--ease-out) .25s, transform 1.6s var(--ease-out) .25s; }
.js .scene--opening.is-in .opening-visual{ opacity:1; transform:scale(1); }
.js .scene--opening.is-in .opening-visual.is-scrubbed{ transition:none; }

/* ===================================================================
   02 · CHALLENGE: OEM gap diagram
=================================================================== */
.scene--challenge .headline{ max-width:24ch; }
.gap-diagram{ margin-top:clamp(26px, 5vh, 52px); }
.gap-stack{ display:flex; align-items:stretch; }
.gap-tile{
  flex:1 1 0; min-width:0; padding:16px 18px 18px; border-radius:14px;
  background:rgba(255,255,255,.05); border:1px solid var(--navy-line);
  display:flex; flex-direction:column; gap:6px;
}
.gap-tile strong{ font-family:var(--font-display); font-weight:600; font-size:clamp(1rem, .8rem + .8vw, 1.35rem); color:var(--white); }
.gap-tile--more strong{ color:var(--cyan-soft); }
.gap-oem{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-soft); }
.gap-hole{
  flex:0 0 clamp(22px, 3vw, 44px); position:relative;
  background:repeating-linear-gradient(90deg, transparent 0 5px, rgba(248,160,31,.0) 5px 10px);
}
.gap-hole::before{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px;
  border-radius:50%; background:var(--orange); box-shadow:0 0 0 0 rgba(248,160,31,.6);
}
.gap-hole::after{
  content:""; position:absolute; left:4px; right:4px; top:50%; border-top:2px dashed rgba(248,160,31,.55);
}
.scene--challenge.is-in .gap-hole::before{ animation:gapPulse 1.6s var(--ease-out) .9s 3; }
@keyframes gapPulse{ 0%{ box-shadow:0 0 0 0 rgba(248,160,31,.6);} 100%{ box-shadow:0 0 0 16px rgba(248,160,31,0);} }
.gap-legend{ display:flex; align-items:center; gap:10px; margin-top:14px; font-size:.9rem; color:var(--orange); }
.gap-legend-dot{ width:10px; height:10px; border-radius:50%; background:var(--orange); }
.gap-span{ margin-top:clamp(18px, 3vh, 28px); }
.gap-span-bar{
  display:block; height:10px; border-radius:10px;
  background:linear-gradient(90deg, var(--cyan), var(--orange));
  transform-origin:left center;
}
.js .gap-span-bar{ transform:scaleX(0); transition:transform 1.3s var(--ease-inout) .85s; }
.js .scene--challenge.is-in .gap-span-bar{ transform:scaleX(1); }
.gap-span p{ margin-top:12px; color:var(--on-dark); font-size:var(--fs-body-lg); }
.gap-span strong{ font-family:var(--font-display); color:var(--cyan); font-weight:600; }
.footnote-strong{ margin-top:clamp(20px, 3.5vh, 36px); color:var(--on-dark-soft); max-width:70ch; font-size:.98rem; }
.footnote-strong strong{ color:var(--white); }

/* ===================================================================
   03 · SERVICES: the 360 ring
=================================================================== */
.services-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,80px); align-items:center; }
.jw-logo{ width:clamp(150px, 13vw, 190px); margin-bottom:14px; }
.services-copy .headline{ max-width:none; margin-bottom:clamp(16px, 3vh, 30px); }
.ring{ position:relative; width:min(100%, 460px, 62vh); aspect-ratio:1; margin:0 auto; }
.ring-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ring-track{ fill:none; stroke:#e7ecf6; stroke-width:16; }
.ring-arc{
  fill:none; stroke:var(--orange); stroke-width:16; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100; transform:rotate(-90deg); transform-origin:200px 200px;
}
.ring-inner{ fill:var(--navy); }
.ring-arrow{ fill:var(--orange); opacity:0; }
.scene--services.is-in .ring-arc{ stroke-dashoffset:4; transition:stroke-dashoffset 1.6s var(--ease-inout) .3s; }
.scene--services.is-in .ring-arrow{ opacity:1; transition:opacity .5s 1.7s; }
.no-js .ring-arc, html:not(.js) .ring-arc{ stroke-dashoffset:4; }
html:not(.js) .ring-arrow{ opacity:1; }
.ring-core{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.ring-360{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.6rem, 6vh, 4rem); line-height:1; color:var(--orange); }
.ring-name{ font-family:var(--font-display); font-weight:600; letter-spacing:.26em; text-transform:uppercase; font-size:.8rem; color:var(--white); margin-bottom:4px; }
.ring-node{
  position:absolute; left:50%; top:50%; width:20%; aspect-ratio:1; margin:-10% 0 0 -10%;
  border-radius:50%; background:var(--white); box-shadow:0 10px 30px rgba(30,34,81,.14);
  left:calc(50% + cos(var(--a)) * 37.5%); top:calc(50% + sin(var(--a)) * 37.5%);
  transition:box-shadow .3s;
}
.ring-node.is-hot{ box-shadow:0 0 0 5px var(--cyan), 0 14px 36px rgba(0,173,239,.3); }
.service-list{ display:grid; gap:clamp(4px, .8vh, 10px); }
.service{
  display:grid; grid-template-columns:40px 1fr; gap:16px; align-items:start;
  padding:clamp(8px, 1.3vh, 14px) 14px; margin-left:-14px; border-radius:14px;
  transition:background .3s; outline-offset:0;
}
.service:hover, .service:focus-visible, .service.is-hot{ background:var(--paper); }
.service h3{ font-family:var(--font-display); font-weight:600; font-size:clamp(1rem, .9rem + .35vw, 1.18rem); color:var(--cyan-ink); line-height:1.3; }
.service p{ color:var(--ink-soft); margin-top:2px; }
.service::before{
  counter-increment:svc; content:"0" counter(svc);
  font-family:var(--font-display); font-weight:700; color:var(--orange-deep); font-size:1.05rem; padding-top:2px;
}
.service-list{ counter-reset:svc; }

/* ===================================================================
   04 · NUMBERS
=================================================================== */
.scene--numbers{ background:linear-gradient(180deg, rgba(15,17,49,.0), rgba(15,17,49,.55)); }
.numbers-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px, 5vw, 80px); align-items:center; margin-top:clamp(22px, 4vh, 44px); }
.hero-stat-num{
  font-family:var(--font-display); font-weight:700; line-height:.9; letter-spacing:-.04em;
  font-size:clamp(4.4rem, 1rem + 12vw, 11.5rem); color:var(--orange); font-variant-numeric:tabular-nums;
}
.hero-stat-num .unit{ font-size:.5em; margin-left:.04em; vertical-align:.62em; }
.hero-stat-label{ font-family:var(--font-display); font-weight:500; font-size:var(--fs-lead); color:var(--white); margin-top:14px; display:flex; align-items:center; gap:14px; }
.hero-stat-label::before{ content:""; width:42px; height:3px; background:var(--cyan); border-radius:3px; }
.meters{ display:grid; gap:clamp(14px, 2.6vh, 26px); }
.meter{ display:grid; grid-template-columns:auto 1fr; align-items:baseline; column-gap:18px; row-gap:8px; }
.meter-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem, 1.1rem + 2vw, 2.8rem); color:var(--white); line-height:1; min-width:4.2ch; font-variant-numeric:tabular-nums; }
.meter-num .unit{ font-size:.55em; color:var(--on-dark-soft); }
.meter--orange .meter-num{ color:var(--orange); }
.meter-label{ color:var(--on-dark-soft); font-size:var(--fs-body); }
.meter-bar{ grid-column:1 / -1; height:6px; border-radius:6px; background:rgba(255,255,255,.1); overflow:hidden; }
.meter-bar span{ display:block; height:100%; width:calc(var(--v) * 1%); background:var(--cyan); border-radius:6px; transform-origin:left; }
.meter--orange .meter-bar span{ background:var(--orange); }
.js .meter-bar span{ transform:scaleX(0); transition:transform 1.4s var(--ease-out); transition-delay:calc(var(--i, 0) * 85ms + 300ms); }
.js .scene.is-in .meter-bar span{ transform:scaleX(1); }

/* ===================================================================
   05 · CERTIFIED & PROVEN
=================================================================== */
.proven-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(28px,5vw,80px); align-items:center; }
.proven-copy .headline{ max-width:none; }
.badges{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(20px, 3.5vh, 34px); }
.badge{
  display:flex; flex-direction:column; justify-content:center; min-width:150px; padding:14px 20px;
  border-radius:14px; border:1px solid var(--navy-line); background:rgba(255,255,255,.04);
  border-left:4px solid var(--cyan);
}
.badge-k{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--white); line-height:1.1; }
.badge-v{ font-size:.9rem; color:var(--on-dark-soft); }
.loyalty{ display:flex; align-items:center; gap:18px; margin-top:clamp(20px, 3.5vh, 34px); }
.loyalty-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(3rem, 2rem + 3vw, 4.6rem); color:var(--orange); line-height:1; }
.loyalty-label{ font-size:var(--fs-body-lg); color:var(--on-dark); max-width:18ch; line-height:1.35; }
.loyalty-label strong{ color:var(--white); }
.about-strip{ margin-top:clamp(18px, 3vh, 28px); padding-top:16px; border-top:1px solid var(--navy-line); color:var(--on-dark-soft); font-size:.95rem; max-width:52ch; }
.about-strip strong{ color:var(--cyan-soft); }
.sun-dial{ position:relative; width:min(100%, 380px, 52vh); margin:0 auto; aspect-ratio:1; }
.sun-dial svg{ width:100%; height:100%; overflow:visible; }
.dial-track{ fill:none; stroke:rgba(168,227,249,.14); stroke-width:22; }
.dial-day{ fill:none; stroke:url(#none); stroke:var(--cyan); stroke-width:22; stroke-dasharray:100; stroke-dashoffset:100; transform:rotate(-90deg); transform-origin:160px 160px; opacity:.85; }
.scene--proven.is-in .dial-day{ stroke-dashoffset:0; transition:stroke-dashoffset 2.6s var(--ease-inout) .4s; }
html:not(.js) .dial-day{ stroke-dashoffset:0; }
.dial-ticks line{ stroke:rgba(233,236,247,.35); stroke-width:2; }
.dial-hour{ fill:var(--on-dark-soft); font-family:var(--font-display); font-size:13px; font-weight:600; text-anchor:middle; }
.dial-sun{ transform-origin:160px 160px; transform:rotate(0deg); }
.dial-sun circle{ fill:var(--orange); filter:drop-shadow(0 0 10px rgba(248,160,31,.8)); }
.scene--proven.is-in .dial-sun{ transform:rotate(360deg); transition:transform 2.6s var(--ease-inout) .4s; }
.sun-dial figcaption{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.dial-caption-k{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem, 1rem + 1vw, 1.8rem); color:var(--white); }
.dial-caption-v{ font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; color:var(--orange); margin-top:4px; }

/* ===================================================================
   06 · VOICE
=================================================================== */
.voice-inner{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px, 3vw, 44px); align-items:start; max-width:1120px; }
.voice-mark{
  font-family:var(--font-display); font-weight:700; font-size:clamp(7rem, 4rem + 10vw, 15rem); line-height:.72;
  color:var(--navy);
}
.voice blockquote p{
  font-family:var(--font-display); font-weight:600; font-style:normal;
  font-size:clamp(1.6rem, .9rem + 2.8vw, 3.3rem); line-height:1.18; letter-spacing:-.015em; color:var(--navy);
}
.voice figcaption{ margin-top:clamp(20px, 4vh, 40px); display:flex; flex-direction:column; gap:2px; font-size:var(--fs-body-lg); color:var(--navy); }
.voice figcaption strong{ font-family:var(--font-display); font-weight:700; }
.voice figcaption::before{ content:""; width:56px; height:4px; background:var(--navy); border-radius:4px; margin-bottom:14px; }

/* ===================================================================
   07 · HEALTH CHECK
=================================================================== */
.scene--health{ background:var(--paper); }
.steps{ position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(18px, 3vw, 40px); margin-top:clamp(28px, 6vh, 64px); }
.steps::before{
  content:""; position:absolute; left:0; right:0; top:34px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--cyan), var(--orange)); transform-origin:left;
}
.js .steps::before{ transform:scaleX(0); transition:transform 1.4s var(--ease-inout) .35s; }
.js .scene--health.is-in .steps::before{ transform:scaleX(1); }
.step{ position:relative; padding-top:0; }
.step-num{
  display:grid; place-items:center; width:70px; height:70px; border-radius:50%;
  background:var(--navy); color:var(--white); font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  box-shadow:0 0 0 8px var(--paper); position:relative; margin-bottom:22px;
}
.step h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem, 1rem + 1vw, 1.75rem); color:var(--cyan-ink); }
.step p{ color:var(--ink-soft); font-size:var(--fs-body-lg); margin-top:8px; max-width:32ch; }
.step .step-chip{
  display:inline-block; margin-top:10px; padding:5px 12px; border-radius:999px;
  background:var(--orange); color:var(--navy); font-family:var(--font-display); font-weight:600; font-size:.8rem; letter-spacing:.04em;
}

/* ===================================================================
   08 · TIERS
=================================================================== */
.tiers-grid{ display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(28px,4.5vw,72px); align-items:center; }
/* Grid: label column + three tier columns. Rows 1–3 are the "rise" (each
   tier's bar starts one step lower), rows 4–7 hold the compared values, and
   row 8 is the shared Technical Account Manager base. */
.tiers-visual{
  --step: clamp(40px, 6.5vh, 62px);
  display:grid; position:relative;
  grid-template-columns:minmax(92px,.9fr) repeat(3, minmax(0,1fr));
  grid-template-rows:var(--step) var(--step) var(--step) repeat(4, minmax(52px, auto)) auto;
  column-gap:clamp(8px, 1.4vw, 18px);
}
.tier{
  position:relative; border-radius:16px 16px 0 0; display:flex; align-items:flex-start; justify-content:center;
  padding-top:14px; transform-origin:bottom; border:1px solid var(--navy-line); border-bottom:0; grid-row-end:8;
}
.tier--1{ grid-column:2; grid-row-start:3; background:linear-gradient(180deg, rgba(168,227,249,.22), rgba(168,227,249,.06)); }
.tier--2{ grid-column:3; grid-row-start:2; background:linear-gradient(180deg, rgba(0,173,239,.5), rgba(0,173,239,.12)); }
.tier--3{ grid-column:4; grid-row-start:1; background:linear-gradient(180deg, var(--orange), rgba(248,160,31,.25)); }
.tier-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(1rem, .85rem + .6vw, 1.35rem); color:var(--white); }
.tier--3 .tier-name{ color:var(--navy); }

.tier-label, .tier-val{ grid-row:var(--r); position:relative; z-index:1; display:flex; align-items:center; border-top:1px solid var(--navy-line); }
.tier-label{
  grid-column:1; padding-right:6px;
  font-family:var(--font-display); font-weight:500; font-size:clamp(.78rem, .72rem + .25vw, .95rem); line-height:1.25; color:var(--on-dark-soft);
}
.tier-val{
  grid-column:var(--c); justify-content:center; gap:.2em; padding:0 4px; text-align:center;
  font-family:var(--font-display); font-weight:500; font-size:clamp(.8rem, .74rem + .25vw, .95rem); color:var(--on-dark);
}
.tier-val b{ font-weight:700; font-size:1.6em; line-height:1; color:var(--white); }
.tier-val--text{ font-weight:600; color:var(--white); }
.tier-val--no{ color:var(--on-dark-soft); opacity:.6; }
.tick{ width:26px; height:26px; fill:none; stroke:var(--cyan-soft); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.tier-val[style*="--c:4"] .tick{ stroke:var(--white); }

.js .tier{ transform:scaleY(0); transition:transform 1.1s var(--ease-out); }
.js .tier--2{ transition-delay:.15s; } .js .tier--3{ transition-delay:.3s; }
.js .scene--tiers.is-in .tier{ transform:scaleY(1); }
.js .tier-label, .js .tier-val{ opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js .scene--tiers.is-in .tier-label, .js .scene--tiers.is-in .tier-val{ opacity:1; transform:none; transition-delay:calc(.55s + (var(--r) - 4) * .09s); }
.tam{
  grid-column:2 / -1; grid-row:8; display:flex; align-items:center; justify-content:center; gap:12px;
  min-height:62px; padding:12px 18px; border-radius:0 0 16px 16px; background:var(--white); color:var(--navy);
  font-family:var(--font-display); font-weight:500; font-size:clamp(.88rem, .8rem + .35vw, 1.05rem); text-align:center;
}
.tam svg{ width:26px; height:26px; flex:none; fill:none; stroke:var(--navy); stroke-width:2; }
.tam strong{ font-weight:700; white-space:nowrap; }

/* ===================================================================
   09 · CTA
=================================================================== */
.scene--cta{ background:var(--navy-ink); 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.2fr) minmax(0,.8fr); gap:clamp(28px,5vw,80px); }
.display--cta{ font-size:clamp(2.3rem, 1rem + 4.6vw, 5rem); margin-bottom:clamp(14px, 2.5vh, 24px); }
.scene--cta .lead{ color:var(--on-dark); max-width:34ch; font-size:clamp(1.05rem, .95rem + .6vw, 1.35rem); font-family:var(--font-body); font-weight:400; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(22px, 4vh, 40px); }
.contact-card{
  position:relative; padding:clamp(24px, 3vw, 36px); border-radius:22px;
  background:var(--navy); border:1px solid var(--navy-line); box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.contact-card::before{ content:""; position:absolute; left:0; top:28px; bottom:28px; width:4px; border-radius:0 4px 4px 0; background:var(--orange); }
.contact-label{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-eyebrow); letter-spacing:.22em; text-transform:uppercase; color:var(--orange); }
.contact-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); color:var(--white); margin-top:10px; line-height:1.1; }
.contact-org{ color:var(--cyan); font-family:var(--font-display); font-weight:500; }
.contact-list{ margin-top:22px; display:grid; gap:12px; }
.contact-list li{ display:grid; grid-template-columns:64px 1fr; align-items:center; gap:8px; }
.contact-k{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-soft); }
.contact-list a{
  color:var(--white); text-decoration:none; font-size:var(--fs-body-lg); word-break:break-word;
  min-height:44px; display:flex; align-items:center; border-bottom:1px solid transparent;
}
.contact-list a:hover{ color:var(--cyan); }
.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(--cyan); stroke-width:3; stroke-linecap:round; opacity:.7;
}
.cta-footer{
  width:100%; max-width:var(--maxw); margin:clamp(28px, 5vh, 56px) auto 0; padding-top:20px;
  border-top:1px solid var(--navy-line); display:flex; align-items:center; gap:22px; flex-wrap:wrap; position:relative;
}
.cta-footer img{ height:20px; width:auto; }
.cta-footer a{ color:var(--on-dark-soft); text-decoration:none; font-size:.9rem; }
.cta-footer a:hover{ color:var(--white); }
.presenter{ margin:0 0 0 auto; opacity:.7; transition:opacity .25s; }
.presenter:hover, .presenter:focus-within{ opacity:1; }
.cta-footer .presenter a, .cta-footer .presenter a:visited, .cta-footer .presenter a:hover, .cta-footer .presenter a:active{
  display:flex; align-items:center; gap:12px; min-height:44px; color:var(--white); text-decoration:none;
}
.presenter span{ font-family:var(--font-display); font-weight:600; font-size:11px; letter-spacing:.22em; text-transform:uppercase; }
.cta-footer .presenter img{ height:clamp(36px, 4.4vh, 48px); width:auto; }
@media (min-width: 760px){
  /* keep the Cresyn credit 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(2.4rem, 1rem + 4.6vw, 4.6rem); --fs-headline: clamp(1.8rem, 1rem + 2.3vw, 2.9rem); }
  .service p{ font-size:.98rem; }
  .service{ padding-top:7px; padding-bottom:7px; }
  .gap-diagram{ margin-top:22px; }
  .gap-tile{ padding:12px 16px 14px; }
  .footnote-strong{ margin-top:16px; }
  .scene--challenge .body-lg{ margin-top:12px; }
  .step-num{ width:60px; height:60px; font-size:1.3rem; }
  .steps::before{ top:29px; }
}

@media (min-width: 1600px) and (min-height: 900px){
  :root{
    --maxw: 1440px;
    --fs-display: clamp(4rem, 1rem + 4.4vw, 7rem);
    --fs-headline: clamp(3rem, 1rem + 2.4vw, 4.3rem);
    --fs-lead: 1.85rem; --fs-body-lg: 1.42rem; --fs-body: 1.2rem; --fs-eyebrow: 1rem;
  }
  .ring{ width:min(100%, 560px, 60vh); }
  .service h3{ font-size:1.4rem; }
  .opening-lockup{ width:260px; }
}

@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; }
}

@media (max-width: 899px){
  :root{ --hud-h: 64px; --pager-h: 64px; }
  .opening-grid, .services-grid, .numbers-grid, .proven-grid, .tiers-grid, .cta-grid{ grid-template-columns:minmax(0,1fr); }
  .opening-visual{ order:-1; width:min(100%, 520px, 52vh); margin:0 auto -6px; }
  .opening-lockup{ margin-bottom:22px; }
  .services-visual{ order:-1; }
  .ring{ width:min(100%, 300px); }
  .sun-dial{ width:min(78%, 300px); }
  .cta-lines{ opacity:.35; }
}

@media (max-width: 759px){
  .hud-title{ display:none; }
  .hud-logo{ padding:0 14px; }
  .hud-logo img{ height:16px; }
  .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; }
  .display{ font-size:clamp(2.3rem, 1rem + 7.4vw, 3.4rem); }
  .key-hint{ display:none; }
  .opening-actions{ display:none; }
  .scene--voice, .scene--tiers{ align-items:center; }
  .opening-visual{ width:min(100%, 340px, 40vh); }
  .opening-lockup{ width:160px; margin-bottom:16px; }
  .ring{ width:min(100%, 280px); }

  /* challenge diagram becomes a vertical stack */
  .gap-stack{ flex-direction:column; }
  .gap-tile{ flex-direction:row; align-items:baseline; justify-content:space-between; padding:12px 16px; }
  .gap-hole{ flex:0 0 26px; }
  .gap-hole::after{ left:50%; right:auto; top:4px; bottom:4px; border-top:0; border-left:2px dashed rgba(248,160,31,.55); }

  .service{ grid-template-columns:36px 1fr; gap:12px; margin-left:0; padding:10px 0; }
  .service:hover, .service.is-hot{ background:none; }

  .numbers-grid{ gap:28px; }
  .meter-num{ min-width:0; }

  .badges{ gap:10px; }
  .badge{ min-width:0; flex:1 1 calc(50% - 10px); padding:12px 14px; }
  .loyalty{ gap:14px; }

  .voice-inner{ grid-template-columns:1fr; gap:0; }
  .voice-mark{ font-size:7rem; height:.6em; }

  .steps{ grid-template-columns:1fr; gap:26px; margin-top:28px; }
  .steps::before{ left:29px; right:auto; top:8px; bottom:8px; width:3px; height:auto; background:linear-gradient(180deg, var(--cyan), var(--orange)); transform-origin:top; }
  .js .steps::before{ transform:scaleY(0); }
  .js .scene--health.is-in .steps::before{ transform:scaleY(1); }
  .step{ display:grid; grid-template-columns:60px 1fr; column-gap:16px; }
  .step-num{ width:60px; height:60px; font-size:1.2rem; grid-row:1 / span 3; margin:0; }
  .step h3, .step p{ grid-column:2; }
  .step .step-chip{ justify-self:start; }

  .tiers-grid{ row-gap:18px; }
  .tiers-visual{ --step:30px; grid-template-columns:minmax(78px,.95fr) repeat(3, minmax(0,1fr)); grid-template-rows:var(--step) var(--step) var(--step) repeat(4, minmax(44px, auto)) auto; column-gap:6px; }
  .tier{ border-radius:12px 12px 0 0; padding-top:6px; }
  .tier-name{ font-size:.9rem; }
  .tier-label{ font-size:.74rem; }
  .tier-val{ font-size:.74rem; padding:0 2px; }
  .tier-val--text{ font-size:.68rem; }
  .tick{ width:20px; height:20px; }
  .tam{ border-radius:0 0 12px 12px; min-height:46px; gap:8px; padding:8px 10px; font-size:.76rem; line-height:1.25; }
  .tam svg{ width:20px; height:20px; }

  .cta-actions .btn{ width:100%; justify-content:center; }
  .contact-list li{ grid-template-columns:1fr; gap:0; }
}

@media (max-width: 359px){
  .tier-val--text{ font-size:.6rem; }
  .tier-name{ font-size:.78rem; }
}

/* ===================================================================
   REDUCED MOTION: everything visible, no camera travel
=================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-snap-type:none; }
  .js [data-reveal], .js .opening-visual, .js .tier, .js .tier-label, .js .tier-val, .js .meter-bar span, .js .gap-span-bar, .js .steps::before{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .ring-arc{ stroke-dashoffset:4 !important; transition:none !important; }
  .ring-arrow{ opacity:1 !important; transition:none !important; }
  .dial-day{ stroke-dashoffset:0 !important; transition:none !important; }
  .dial-sun, .scene--proven.is-in .dial-sun{ transform:none !important; transition:none !important; }
  .scene--challenge.is-in .gap-hole::before{ animation:none; }
  .backdrop-world{ will-change:auto; }
}