:root{
  --bg:#04111d;
  --bg-deep:#020a12;
  --panel:#071827;
  --panel-2:#0a2032;
  --text:#f5f8fb;
  --muted:rgba(245,248,251,.70);
  --muted-2:rgba(245,248,251,.48);
  --teal:#38d7d9;
  --teal-soft:#7cecea;
  --line:rgba(124,236,234,.16);
  --hair:rgba(255,255,255,.09);
  --shadow:0 22px 70px rgba(0,0,0,.30);
  --max:1240px;
  --progress:0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:
  radial-gradient(circle at 82% 8%,rgba(28,168,180,.14),transparent 28%),
  radial-gradient(circle at 14% 20%,rgba(40,103,145,.11),transparent 26%),
  linear-gradient(180deg,#04111d 0%,#061827 30%,#04111d 64%,#020a12 100%);
  color:var(--text);font-family:"Poppins","Avenir Next","Segoe UI",Arial,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(circle,rgba(123,240,238,.20) .55px,transparent .7px);background-size:30px 30px;opacity:.13;mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
img,svg{display:block;max-width:100%}
/* the intrinsic width/height attributes reserve space against layout shift;
   height:auto keeps the aspect ratio when CSS sets a different width.
   Images that need a fixed box (.map-card img, .logo-img) override this. */
img{height:auto}
a{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}

/* continuous ambient layer — deliberately very faint so it never competes with content */
.ambient-myds{position:fixed;z-index:0;right:-7vw;top:36%;pointer-events:none;user-select:none;white-space:nowrap;font-size:clamp(180px,27vw,410px);font-weight:800;line-height:.78;letter-spacing:-.075em;color:rgba(56,215,217,.006);-webkit-text-stroke:1px rgba(124,236,234,.055);opacity:.78;transform:translate3d(0,0,0) rotate(-1.2deg);transform-origin:center;will-change:transform,opacity;animation:ambientMYDS 22s ease-in-out infinite alternate}
main{position:relative;z-index:1}
@keyframes ambientMYDS{
  0%{transform:translate3d(-10px,-8px,0) rotate(-1.2deg) scale(1);opacity:.58}
  50%{transform:translate3d(10px,6px,0) rotate(-.3deg) scale(1.018);opacity:.86}
  100%{transform:translate3d(-2px,15px,0) rotate(.7deg) scale(1.006);opacity:.64}
}

/* global UI */
.progress{position:fixed;z-index:100;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.05);pointer-events:none}
.progress span{display:block;height:100%;width:calc(var(--progress)*100%);background:linear-gradient(90deg,var(--teal),var(--teal-soft));box-shadow:0 0 18px rgba(56,215,217,.55)}
.side-nav{position:fixed;z-index:90;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:13px;align-items:flex-end}
.side-nav a{display:flex;align-items:center;gap:10px;color:var(--muted-2);text-decoration:none;min-height:34px}
.side-nav .label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateX(8px);transition:.25s ease;white-space:nowrap}
.side-nav .dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.42);transition:.25s ease}
.side-nav:hover .label,.side-nav a.active .label{opacity:1;transform:none}
.side-nav a.active{color:#fff}
.side-nav a.active .dot{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 7px rgba(56,215,217,.11),0 0 17px rgba(56,215,217,.5)}

.shell{width:min(calc(100% - 80px),var(--max));margin:0 auto}
.section{position:relative;padding:110px 0 100px;overflow:hidden}
.section::before{content:attr(data-ghost);position:absolute;left:50%;top:8%;transform:translateX(-50%);font-size:clamp(110px,18vw,260px);font-weight:800;line-height:.8;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(109,236,234,.05);white-space:nowrap;pointer-events:none;user-select:none}
.section-kicker{margin:0 0 14px;color:var(--teal);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.section-title{margin:0;font-size:clamp(42px,5.2vw,76px);line-height:.96;letter-spacing:-.05em;font-weight:700}
.body-copy{margin:18px 0 0;color:var(--muted);font-size:16px;line-height:1.72;max-width:760px}
.rule{position:relative;height:1px;background:linear-gradient(90deg,var(--teal),rgba(124,236,234,.08),transparent);margin-top:24px;max-width:160px;overflow:hidden}
.rule::after{content:"";position:absolute;top:0;bottom:0;width:42%;left:-48%;background:linear-gradient(90deg,transparent,rgba(124,236,234,.8),transparent);opacity:.32;animation:ruleFlow 5.8s ease-in-out infinite}
@keyframes ruleFlow{0%,28%{transform:translateX(0);opacity:0}38%{opacity:.34}65%{transform:translateX(470%);opacity:.14}72%,100%{transform:translateX(470%);opacity:0}}

/* hero */
.hero-scene{position:relative;min-height:190vh}
.hero-stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.hero-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 73% 47%,rgba(56,215,217,.10),transparent 28%);pointer-events:none}
/* NOTE: this element also carries the .shell class for its max-width and
   centered gutters. Do NOT set width:100% here — it overrides .shell and
   pins the hero flush to the viewport's left edge while every other section
   sits at the shell gutter. Let .shell own the width. */
/* align-items:start so the copy column's first element (the JCG logo) shares a
   top line with the route map, rather than being centred against the taller
   map column and sitting ~72px lower. */
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(420px,1.03fr) minmax(420px,.97fr);gap:52px;align-items:start;padding:76px 0 48px}
.hero-copy{min-width:0}
.hero-logo{width:128px;margin-bottom:38px;opacity:.95}
.hero-kicker{color:var(--teal);font-size:15px;line-height:1.4;font-weight:600;margin-bottom:16px;max-width:460px}
.hero-title{margin:0;font-size:clamp(58px,6.5vw,100px);line-height:.90;letter-spacing:-.055em;font-weight:800}
.hero-text{display:grid;gap:14px;margin-top:26px;max-width:660px}
.hero-text p{margin:0;color:var(--muted);font-size:16px;line-height:1.68}
.corridor-card{margin-top:28px;display:grid;grid-template-columns:190px 1fr;gap:24px;padding:22px 24px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(10,31,47,.88),rgba(5,20,32,.70));box-shadow:var(--shadow)}
.corridor-num{font-size:72px;line-height:.88;letter-spacing:-.055em;font-weight:800;color:var(--teal-soft)}
.corridor-num small{font-size:26px;letter-spacing:-.02em}
.corridor-label{margin-top:9px;font-size:13px;font-weight:600;letter-spacing:.10em;text-transform:uppercase}
.corridor-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.58;align-self:center}
.map-column{min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px}
/* 504px = the original 560px reduced by 10% */
.map-window{position:relative;width:min(100%,504px);aspect-ratio:950/1515;perspective:1200px;isolation:isolate}
.map-glow{position:absolute;inset:7% 7%;border-radius:50%;background:radial-gradient(circle,rgba(56,215,217,.22),transparent 62%);filter:blur(30px);opacity:.55;z-index:-1;animation:mapBreath 7.6s ease-in-out infinite}
.map-card{position:relative;width:100%;height:100%;border-radius:28px;overflow:hidden;border:1px solid rgba(110,235,233,.13);background:rgba(2,12,22,.72);box-shadow:0 34px 90px rgba(0,0,0,.42);transform-style:preserve-3d;will-change:transform}
.map-card::after{content:"";position:absolute;inset:-8% auto -8% -38%;width:32%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(124,236,234,.16),transparent);mix-blend-mode:screen;transform:translateX(-150%) skewX(-10deg);opacity:0;animation:mapLightSweep 10.5s ease-in-out infinite}
@keyframes mapBreath{0%,100%{opacity:.40;transform:scale(.985)}50%{opacity:.68;transform:scale(1.025)}}
@keyframes mapLightSweep{0%,62%{transform:translateX(-150%) skewX(-10deg);opacity:0}68%{opacity:.08}76%{opacity:.22}88%{transform:translateX(520%) skewX(-10deg);opacity:.08}94%,100%{transform:translateX(520%) skewX(-10deg);opacity:0}}
/* contain, never cover: a route map must never lose its edges. With cover, any
   drift between the box ratio and the image's 950x1515 silently crops the
   coastline; contain always shows the whole map and just scales it down. */
.map-card img{width:100%;height:100%;object-fit:contain;object-position:center;mix-blend-mode:screen;opacity:.98}

/* ---- Interactive phase waypoints, pinned on the fibre route ---------
   The three deployment phases live on the map as live nodes. A signal
   auto-travels the corridor south->north lighting each node and blooming
   its card; hover / tap / focus takes over and holds a node. */
.phase-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.phase-point{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
/* The map's baked teal dots ARE the markers. This overlay adds no dot of its
   own — only a transparent hit area over each dot, and a highlight ring +
   ping that encircle the existing dot on hover/active. Nothing at rest. */
.phase-node{position:absolute;left:0;top:0;width:46px;height:46px;transform:translate(-50%,-50%);padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.pn-core{display:none}
.phase-node::before{content:"";grid-area:1/1;width:26px;height:26px;border-radius:50%;border:1px solid rgba(124,236,234,.9);opacity:0;transform:scale(.55);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1),width .4s,height .4s,box-shadow .4s}
.phase-node::after{content:"";grid-area:1/1;width:18px;height:18px;border-radius:50%;border:1px solid rgba(124,236,234,.6);opacity:0}
.phase-node:hover::before,.phase-node:focus-visible::before{opacity:.8;transform:scale(1)}
.phase-node:focus-visible{outline:none}

/* active: the existing dot gets a bloom ring + travelling ping around it */
.phase-point.is-active .phase-node::before{opacity:1;transform:scale(1);width:34px;height:34px;border-color:rgba(150,245,242,.95);box-shadow:0 0 16px rgba(56,215,217,.55)}
.phase-point.is-active .phase-node::after{opacity:1;animation:phasePing 1.9s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes phasePing{0%{width:18px;height:18px;opacity:.7}70%{width:60px;height:60px;opacity:0}100%{opacity:0}}

/* always-visible location label; the active one (auto-signal / hover) brightens */
.phase-label{position:absolute;display:flex;flex-direction:column;gap:1px;padding:5px 10px;border-radius:10px;background:rgba(4,14,25,.72);border:1px solid rgba(124,236,234,.16);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);white-space:nowrap;pointer-events:none;opacity:.85;transition:opacity .35s ease,background-color .35s,border-color .35s,box-shadow .35s;z-index:6}
.phase-label .pl-name{font-size:12.5px;font-weight:700;letter-spacing:-.01em;line-height:1.08;color:#eafcfb}
.phase-label .pl-meta{font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-soft)}
.phase-label::after{content:"";position:absolute;width:7px;height:7px;background:inherit;border:1px solid rgba(124,236,234,.16);border-right:0;border-bottom:0}
.phase-point.is-active .phase-label{opacity:1;background:rgba(9,28,45,.95);border-color:rgba(124,236,234,.5);box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 18px rgba(56,215,217,.12)}
.phase-point.is-active .phase-label .pl-name{color:#fff}
.phase-node:hover ~ .phase-label,.phase-node:focus-visible ~ .phase-label{opacity:1;border-color:rgba(124,236,234,.42)}

/* open directions (kept inside the map bounds) */
.phase-point[data-open="up"] .phase-label{left:50%;bottom:15px;transform:translateX(-50%)}
.phase-point[data-open="up"] .phase-label::after{left:calc(50% - 3.5px);bottom:-4px;transform:rotate(-135deg)}
.phase-point[data-open="upleft"] .phase-label{right:15px;bottom:15px}
.phase-point[data-open="upleft"] .phase-label::after{right:-4px;bottom:13px;transform:rotate(135deg)}
.phase-point[data-open="left"] .phase-label{right:15px;top:50%;transform:translateY(-50%)}
.phase-point[data-open="left"] .phase-label::after{right:-4px;top:calc(50% - 3.5px);transform:rotate(45deg)}
.phase-point[data-open="down"] .phase-label{left:50%;top:15px;transform:translateX(-50%)}
.phase-point[data-open="down"] .phase-label::after{left:calc(50% - 3.5px);top:-4px;transform:rotate(45deg)}
.phase-point[data-open="right"] .phase-label{left:15px;top:50%;transform:translateY(-50%)}
.phase-point[data-open="right"] .phase-label::after{left:-4px;top:calc(50% - 3.5px);transform:rotate(-45deg)}
.phase-point[data-open="downright"] .phase-label{left:14px;top:12px}
.phase-point[data-open="downright"] .phase-label::after{left:-4px;top:13px;transform:rotate(-45deg)}

@media (prefers-reduced-motion:reduce){
  .phase-point.is-active .phase-node::after{animation:none}
}
.phase-strip{width:min(100%,620px);display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.phase{padding:13px 14px;border-radius:16px;border:1px solid var(--hair);background:rgba(7,22,34,.68);min-height:92px}
.phase span{display:block;color:var(--teal);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.phase strong{display:block;font-size:26px;letter-spacing:-.04em;line-height:1}
.phase p{margin:7px 0 0;font-size:11px;line-height:1.35;color:var(--muted)}

/* cards and icon system */
.icon-wrap{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:rgba(56,215,217,.08);border:1px solid rgba(124,236,234,.12);color:var(--teal);flex:0 0 auto;will-change:transform,box-shadow,background-color;animation:iconFloat 5.6s ease-in-out infinite alternate,iconGlow 4.9s ease-in-out infinite}
.icon-wrap svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.90;animation:iconStrokeGlow 4.9s ease-in-out infinite}
@keyframes iconFloat{from{transform:translateY(-2px) rotate(-.25deg)}to{transform:translateY(3px) rotate(.25deg)}}
@keyframes iconGlow{0%,100%{background:rgba(56,215,217,.075);border-color:rgba(124,236,234,.11);box-shadow:0 0 0 rgba(56,215,217,0)}50%{background:rgba(56,215,217,.125);border-color:rgba(124,236,234,.23);box-shadow:0 0 18px rgba(56,215,217,.11),inset 0 0 14px rgba(56,215,217,.035)}}
@keyframes iconStrokeGlow{0%,100%{opacity:.82;filter:drop-shadow(0 0 0 rgba(56,215,217,0))}50%{opacity:1;filter:drop-shadow(0 0 4px rgba(124,236,234,.38))}}
/* stagger the breathing so the whole page never flashes in sync */
.why-card:nth-child(2) .icon-wrap,.service:nth-child(2) .icon-wrap,.person:nth-child(2) .icon-wrap{animation-delay:-1.1s,-1.1s}
.why-card:nth-child(3) .icon-wrap,.service:nth-child(3) .icon-wrap,.person:nth-child(3) .icon-wrap{animation-delay:-2.2s,-2.2s}
.why-card:nth-child(4) .icon-wrap,.service:nth-child(4) .icon-wrap,.person:nth-child(4) .icon-wrap{animation-delay:-3.3s,-3.3s}
.why-card:nth-child(5) .icon-wrap,.service:nth-child(5) .icon-wrap,.person:nth-child(5) .icon-wrap{animation-delay:-4.1s,-4.1s}
.service:nth-child(6) .icon-wrap,.person:nth-child(6) .icon-wrap{animation-delay:-2.7s,-2.7s}
.person:nth-child(7) .icon-wrap{animation-delay:-1.7s,-1.7s}
.person:nth-child(8) .icon-wrap{animation-delay:-3.8s,-3.8s}
.why-card:nth-child(2) .icon-wrap svg,.service:nth-child(2) .icon-wrap svg,.person:nth-child(2) .icon-wrap svg{animation-delay:-1.1s}
.why-card:nth-child(3) .icon-wrap svg,.service:nth-child(3) .icon-wrap svg,.person:nth-child(3) .icon-wrap svg{animation-delay:-2.2s}
.why-card:nth-child(4) .icon-wrap svg,.service:nth-child(4) .icon-wrap svg,.person:nth-child(4) .icon-wrap svg{animation-delay:-3.3s}
.why-card:nth-child(5) .icon-wrap svg,.service:nth-child(5) .icon-wrap svg,.person:nth-child(5) .icon-wrap svg{animation-delay:-4.1s}
.service:nth-child(6) .icon-wrap svg,.person:nth-child(6) .icon-wrap svg{animation-delay:-2.7s}
.person:nth-child(7) .icon-wrap svg{animation-delay:-1.7s}
.person:nth-child(8) .icon-wrap svg{animation-delay:-3.8s}

/* why */
.why-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:42px}
.why-card{position:relative;padding:24px;border-radius:25px;background:linear-gradient(180deg,rgba(11,31,47,.90),rgba(6,21,33,.72));border:1px solid var(--hair);box-shadow:0 18px 44px rgba(0,0,0,.22);min-height:210px;overflow:hidden}
.why-card::after{content:"";position:absolute;right:-40px;bottom:-55px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(56,215,217,.13),transparent 68%)}
.why-card:nth-child(1){grid-column:1/span 4}
.why-card:nth-child(2){grid-column:5/span 4;transform:translateY(34px)}
.why-card:nth-child(3){grid-column:9/span 4}
.why-card:nth-child(4){grid-column:2/span 5;margin-top:4px}
.why-card:nth-child(5){grid-column:7/span 5;margin-top:38px}
.why-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.why-index{font-size:11px;color:var(--teal);letter-spacing:.14em;font-weight:700}
.why-card h3{margin:22px 0 8px;font-size:24px;line-height:1.08;letter-spacing:-.03em}
.why-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.58;max-width:34ch}
.subsection{margin-top:86px}
.glance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.glance-card{padding:23px;border-radius:22px;background:rgba(5,19,31,.72);border:1px solid var(--hair);min-height:270px;display:flex;flex-direction:column;align-items:flex-start}
.glance-card .mini{color:var(--teal);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.glance-card .logo-img{height:58px;width:auto;max-width:150px;object-fit:contain;margin:24px 0 18px}
.glance-card h3{margin:24px 0 14px;font-size:27px;line-height:1.05;letter-spacing:-.04em}
.glance-card p{margin:auto 0 0;color:var(--muted);font-size:14px;line-height:1.58}

/* opportunity */
.metric-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:120px;gap:16px;margin-top:42px}
.metric{padding:24px;border-radius:25px;background:linear-gradient(180deg,rgba(11,32,49,.90),rgba(5,20,32,.72));border:1px solid var(--hair);box-shadow:0 18px 44px rgba(0,0,0,.20);overflow:hidden;position:relative}
.metric::before{content:"";position:absolute;right:-55px;bottom:-70px;width:190px;height:190px;border-radius:50%;border:1px solid rgba(124,236,234,.12)}
.metric .metric-value{font-size:clamp(42px,4.5vw,72px);line-height:.92;letter-spacing:-.055em;font-weight:800}
.metric .unit{color:var(--teal);font-size:.34em;letter-spacing:-.015em;margin-left:4px}
.metric .metric-label{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.46;max-width:28ch}
.metric .metric-note{display:block;color:var(--teal);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px}
.metric.m1{grid-column:1/span 5;grid-row:1/span 2}
.metric.m2{grid-column:6/span 3;grid-row:1/span 2;transform:translateY(28px)}
.metric.m3{grid-column:9/span 4;grid-row:1/span 2}
.metric.m4{grid-column:1/span 4;grid-row:3/span 2;transform:translateY(10px)}
.metric.m5{grid-column:5/span 3;grid-row:3/span 2;transform:translateY(38px)}
.metric.m6{grid-column:8/span 5;grid-row:3/span 2;transform:translateY(12px)}

/* corridor & services */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:42px;align-items:start}
.deep-card{padding:28px;border-radius:26px;background:linear-gradient(180deg,rgba(10,29,45,.90),rgba(5,18,29,.72));border:1px solid var(--hair);box-shadow:var(--shadow)}
.list{display:grid;gap:0}
.list-row{display:grid;grid-template-columns:58px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--hair)}
.list-row:first-child{border-top:none;padding-top:0}
.number{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(56,215,217,.11);border:1px solid rgba(124,236,234,.13);color:var(--teal);font-size:12px;font-weight:700;letter-spacing:.08em}
.list-row h3{margin:0 0 6px;font-size:22px;line-height:1.08;letter-spacing:-.025em}
.list-row p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.services{display:grid;gap:10px}
.service{display:flex;align-items:center;gap:15px;padding:14px 15px;border-radius:18px;background:rgba(255,255,255,.025);border:1px solid var(--hair);min-height:76px}
.service strong{font-size:17px;line-height:1.25;letter-spacing:-.015em}

/* participation */
.participant-intro{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:end}
.participant-copy{color:var(--muted);font-size:16px;line-height:1.68;margin:0}
.people-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.person{min-height:144px;padding:18px;border-radius:22px;background:rgba(6,20,32,.72);border:1px solid var(--hair);display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.person .icon-wrap{width:44px;height:44px}
.person strong{font-size:17px;line-height:1.25;letter-spacing:-.015em}

/* closing */
.final{position:relative;padding:100px 0 0;min-height:780px;overflow:hidden;background:linear-gradient(180deg,transparent,rgba(1,8,14,.88))}
.final-earth{position:absolute;right:-6%;bottom:-4%;width:92%;min-width:900px;opacity:.83;transform-origin:75% 100%;will-change:transform;filter:drop-shadow(0 25px 70px rgba(0,0,0,.42))}
.final::before{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;background:linear-gradient(180deg,transparent,rgba(1,8,14,.20) 25%,rgba(1,8,14,.48));z-index:1;pointer-events:none}
.final-copy{position:relative;z-index:2;padding-top:190px;padding-bottom:110px;max-width:900px}
.final-copy h2{margin:0;font-size:clamp(58px,7.8vw,112px);line-height:.90;letter-spacing:-.06em;font-weight:700}
.final-copy h2 span{display:block;color:var(--teal)}
.final-url{display:inline-block;text-decoration:none;margin-top:26px;padding:12px 16px;border-radius:999px;background:rgba(2,12,22,.68);border:1px solid var(--hair);font-size:22px;font-weight:700;letter-spacing:-.03em}

/* reveals */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:.001;transform:translateY(26px);transition:opacity .72s ease,transform .72s cubic-bezier(.22,1,.36,1)}
.js .reveal.in{opacity:1;transform:none}
.js .delay1{transition-delay:.08s}.js .delay2{transition-delay:.16s}.js .delay3{transition-delay:.24s}

/* tablet */
@media (max-width:1050px){
  .shell{width:min(calc(100% - 48px),var(--max))}
  .hero-grid{grid-template-columns:.95fr 1.05fr;gap:28px}
  .hero-title{font-size:62px}
  .corridor-card{grid-template-columns:160px 1fr}
  .why-card:nth-child(1),.why-card:nth-child(2),.why-card:nth-child(3),.why-card:nth-child(4),.why-card:nth-child(5){grid-column:span 6;transform:none;margin-top:0}
  .why-card:nth-child(5){grid-column:4/span 6}
  .glance-grid{grid-template-columns:repeat(2,1fr)}
  .metric-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:135px}
  .metric.m1,.metric.m2,.metric.m3,.metric.m4,.metric.m5,.metric.m6{grid-column:span 3;grid-row:span 2;transform:none}
  .participant-intro{grid-template-columns:1fr}
  .people-grid{grid-template-columns:repeat(2,1fr)}
}

/* phone: normal document flow, no clipped sticky panels, larger touch-safe spacing */
@media (max-width:760px){
  body{background:linear-gradient(180deg,#04111d 0%,#061827 34%,#04111d 68%,#020a12 100%)}
  body::before{opacity:.08;background-size:34px 34px}
  .ambient-myds{right:-15vw;top:43%;font-size:46vw;letter-spacing:-.08em;-webkit-text-stroke:1px rgba(124,236,234,.045);color:transparent;opacity:.62;animation-duration:26s}
  .side-nav{display:none}
  .shell{width:min(calc(100% - 32px),var(--max))}
  .section{padding:84px 0 76px;overflow:hidden}
  .section::before{display:none}
  .section-kicker{font-size:11px;line-height:1.45;margin-bottom:12px}
  .section-title{font-size:42px;line-height:.98}
  .body-copy{font-size:16px;line-height:1.68}

  .hero-scene{min-height:auto;padding-top:calc(18px + env(safe-area-inset-top))}
  .hero-stage{position:relative;top:auto;height:auto;overflow:visible;display:block}
  .hero-grid{display:flex;flex-direction:column;gap:32px;padding:34px 0 68px}
  .hero-copy{width:100%}
  .hero-logo{width:104px;margin-bottom:28px}
  .hero-kicker{font-size:14px;margin-bottom:14px}
  .hero-title{font-size:50px;line-height:.91;overflow-wrap:anywhere}
  .hero-text{margin-top:24px;gap:13px}
  .hero-text p{font-size:16px;line-height:1.66}
  .corridor-card{grid-template-columns:1fr;gap:14px;margin-top:24px;padding:20px;border-radius:22px}
  .corridor-num{font-size:68px}
  .corridor-card p{font-size:14px;line-height:1.56}
  .map-column{width:100%;gap:18px}
  .map-window{width:min(100%,390px);aspect-ratio:950/1515}
  .map-card{border-radius:24px;box-shadow:0 24px 58px rgba(0,0,0,.34)}
  .phase-strip{grid-template-columns:1fr;gap:9px;width:100%}
  .phase{min-height:auto;padding:13px 15px;display:grid;grid-template-columns:76px 82px 1fr;gap:10px;align-items:center}
  .phase span{margin:0}
  .phase strong{font-size:24px}
  .phase p{margin:0;font-size:11px}

  .why-grid{grid-template-columns:1fr;margin-top:30px;gap:12px}
  .why-card,.why-card:nth-child(1),.why-card:nth-child(2),.why-card:nth-child(3),.why-card:nth-child(4),.why-card:nth-child(5){grid-column:auto;transform:none;margin:0;min-height:auto;padding:20px;border-radius:21px}
  .why-card h3{font-size:22px;margin-top:18px}
  .why-card p{font-size:14px;max-width:none}
  .subsection{margin-top:60px}
  .glance-grid{grid-template-columns:1fr;gap:11px;margin-top:24px}
  .glance-card{min-height:auto;padding:20px;border-radius:20px}
  .glance-card .logo-img{height:48px;margin:20px 0 16px}
  .glance-card h3{font-size:25px;margin:20px 0 12px}
  .glance-card p{margin-top:8px}

  .metric-grid{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:12px;margin-top:30px}
  .metric,.metric.m1,.metric.m2,.metric.m3,.metric.m4,.metric.m5,.metric.m6{grid-column:auto;grid-row:auto;transform:none;min-height:168px;padding:21px;border-radius:21px}
  .metric .metric-value{font-size:48px;line-height:.94}
  .metric .metric-label{font-size:14px;margin-top:11px;max-width:none}

  .two-col{grid-template-columns:1fr;gap:18px;margin-top:30px}
  .deep-card{padding:20px;border-radius:22px}
  .list-row{grid-template-columns:50px 1fr;gap:13px;padding:18px 0}
  .number{width:44px;height:44px}
  .list-row h3{font-size:21px}
  .list-row p{font-size:14px}
  .service{min-height:72px;padding:13px 14px;border-radius:17px}
  .service strong{font-size:16px}
  .icon-wrap{width:44px;height:44px;border-radius:14px}
  .icon-wrap svg{width:24px;height:24px}

  .participant-intro{display:block}
  .participant-copy{margin-top:18px;font-size:16px}
  .people-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:26px}
  .person{min-height:132px;padding:15px;border-radius:19px}
  .person strong{font-size:15px;overflow-wrap:anywhere}

  .final{min-height:auto;padding:80px 0 0}
  .final-earth{position:relative;right:auto;bottom:auto;width:150%;min-width:0;margin-left:-36%;margin-top:14px;opacity:.78;transform:none!important}
  .final::before{height:56%;bottom:0;background:linear-gradient(180deg,transparent,rgba(1,8,14,.45))}
  .final-copy{padding:0 0 36px;max-width:none}
  .final-copy h2{font-size:52px;line-height:.93}
  .final-url{font-size:17px;line-height:1.25;overflow-wrap:anywhere;max-width:100%;margin-top:22px}
}

@media (max-width:380px){
  .hero-title{font-size:46px}
  .section-title{font-size:38px}
  .phase{grid-template-columns:68px 72px 1fr;padding:12px}
  .phase strong{font-size:22px}
  .people-grid{grid-template-columns:1fr}
  .person{min-height:112px}
  .final-copy h2{font-size:46px}
}

@media (hover:hover) and (pointer:fine){
  .why-card,.metric,.glance-card,.service,.person{transition:border-color .25s ease,background-color .25s ease,transform .25s ease}
  .why-card:hover,.metric:hover,.glance-card:hover,.service:hover,.person:hover{border-color:rgba(124,236,234,.25)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1!important;transform:none!important}
  .map-card,.final-earth{transform:none!important}
  .ambient-myds{transform:none!important;opacity:.45}
  .icon-wrap svg{filter:none!important;opacity:.92}
}


/* scene-to-scene transition experiences */
.transition-scene{position:relative;min-height:140vh;overflow:clip;isolation:isolate;--tp:0}
.transition-stage{position:sticky;top:0;min-height:100vh;display:grid;place-items:center;overflow:hidden;background:linear-gradient(180deg,rgba(2,10,18,.12),rgba(2,10,18,.72));border-top:1px solid rgba(124,236,234,.05);border-bottom:1px solid rgba(124,236,234,.05)}
.transition-stage::before{content:"";position:absolute;inset:10% 8%;border-radius:50%;background:radial-gradient(circle,rgba(56,215,217,.08),transparent 62%);filter:blur(26px);transform:scale(calc(.8 + var(--tp)*.35));opacity:calc(.3 + var(--tp)*.5);pointer-events:none}
.transition-content{position:relative;z-index:3;width:min(calc(100% - 56px),980px);text-align:center}
.transition-kicker{font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:var(--teal);margin-bottom:14px;opacity:.78}
/* Title stays fully legible the whole time the scene is on screen; the scrub
   now only adds a subtle settle (opacity .92->1, ~12px rise) instead of fading
   the title in from .35, which left it half-formed at most scroll positions. */
.transition-title{margin:0;font-size:clamp(44px,8vw,118px);line-height:.88;letter-spacing:-.06em;font-weight:800;transform:translateY(calc((.5 - var(--tp))*12px)) scale(calc(.985 + var(--tp)*.015));opacity:calc(.92 + var(--tp)*.08);will-change:transform,opacity}
.transition-sub{margin:18px auto 0;max-width:720px;color:var(--muted);font-size:15px;line-height:1.65;opacity:calc(.7 + var(--tp)*.3);transform:translateY(calc((.5 - var(--tp))*10px))}
.transition-line{position:relative;width:min(78vw,760px);height:2px;margin:36px auto 0;background:rgba(124,236,234,.10);overflow:visible}
.transition-line::before{content:"";position:absolute;left:0;top:0;height:100%;width:calc(var(--tp)*100%);background:linear-gradient(90deg,var(--teal),var(--teal-soft));box-shadow:0 0 18px rgba(56,215,217,.45)}
.transition-line::after{content:"";position:absolute;left:calc(var(--tp)*100%);top:50%;width:12px;height:12px;border-radius:50%;background:var(--teal-soft);box-shadow:0 0 0 8px rgba(56,215,217,.10),0 0 24px rgba(56,215,217,.65);transform:translate(-50%,-50%)}
.transition-word{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%) translateY(calc((.5 - var(--tp))*50px));font-size:clamp(140px,28vw,430px);font-weight:800;line-height:.8;letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1px rgba(124,236,234,.05);white-space:nowrap;pointer-events:none;opacity:.7}

/* why scene */
.t-why .transition-orbits{position:absolute;inset:0;z-index:2;pointer-events:none}
.t-why .orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(124,236,234,.10);border-radius:50%;transform:translate(-50%,-50%) rotate(calc(var(--tp)*55deg));}
.t-why .orbit:nth-child(1){width:min(72vw,720px);aspect-ratio:1}
.t-why .orbit:nth-child(2){width:min(54vw,540px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(calc(var(--tp)*-70deg))}
.t-why .orbit:nth-child(3){width:min(36vw,360px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(calc(var(--tp)*95deg))}
.t-why .orbit i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 14px rgba(56,215,217,.65)}
.t-why .orbit i:nth-child(1){left:8%;top:48%}.t-why .orbit i:nth-child(2){right:13%;top:22%}.t-why .orbit i:nth-child(3){left:46%;bottom:-5px}

/* opportunity scene */
.t-opportunity .metric-ghost{position:absolute;z-index:1;font-weight:800;letter-spacing:-.07em;color:rgba(124,236,234,.055);will-change:transform,opacity;pointer-events:none}
.t-opportunity .g1{left:3%;top:18%;font-size:clamp(72px,15vw,210px);transform:translateY(calc((.5 - var(--tp))*90px)) rotate(-5deg)}
.t-opportunity .g2{right:4%;top:25%;font-size:clamp(70px,13vw,180px);transform:translateY(calc((var(--tp) - .5)*110px)) rotate(4deg)}
.t-opportunity .g3{left:12%;bottom:10%;font-size:clamp(54px,10vw,145px);transform:translateX(calc((.5 - var(--tp))*90px))}

/* corridor scene */
.t-corridor .route-labels{display:flex;justify-content:space-between;align-items:center;width:min(82vw,800px);margin:18px auto 0;color:rgba(255,255,255,.75);font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.t-corridor .route-labels span:nth-child(2){color:var(--teal-soft)}

/* participate scene */
.t-participate .access-cloud{position:absolute;inset:0;z-index:2;pointer-events:none}
.t-participate .access-cloud i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 16px rgba(56,215,217,.55);opacity:calc(.2 + var(--tp)*.8);transform:translate(calc((.5 - var(--tp))*30px),calc((.5 - var(--tp))*20px))}
.t-participate .access-cloud i:nth-child(1){left:14%;top:24%}.t-participate .access-cloud i:nth-child(2){left:28%;top:70%}.t-participate .access-cloud i:nth-child(3){left:44%;top:16%}.t-participate .access-cloud i:nth-child(4){left:59%;top:76%}.t-participate .access-cloud i:nth-child(5){left:76%;top:22%}.t-participate .access-cloud i:nth-child(6){left:87%;top:64%}.t-participate .access-cloud i:nth-child(7){left:68%;top:46%}.t-participate .access-cloud i:nth-child(8){left:21%;top:47%}

@media (max-width:760px){
  .transition-scene{min-height:130svh}
  .transition-stage{min-height:100svh}
  .transition-content{width:min(calc(100% - 34px),640px)}
  .transition-title{font-size:clamp(38px,14vw,68px);line-height:.9}
  .transition-sub{font-size:14px;line-height:1.55;max-width:32ch}
  .transition-word{font-size:44vw;opacity:.5}
  .transition-line{width:78vw;margin-top:30px}
  .t-why .orbit:nth-child(1){width:82vw}.t-why .orbit:nth-child(2){width:62vw}.t-why .orbit:nth-child(3){width:42vw}
  .t-opportunity .g1{font-size:24vw;top:19%}.t-opportunity .g2{font-size:23vw;top:62%}.t-opportunity .g3{font-size:18vw;left:4%;bottom:20%}
  .t-corridor .route-labels{width:82vw;font-size:9px;letter-spacing:.09em;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .transition-title,.transition-sub,.transition-word,.t-opportunity .metric-ghost,.transition-stage::before{transform:none!important;opacity:1!important}
  .transition-line::before{width:100%!important}.transition-line::after{left:100%!important}
}


/* =========================================================
   MYDS — DISTINCT SECTION EXPERIENCES
   Content is unchanged; only spatial/interaction treatment.
   ========================================================= */

/* Shared section atmosphere */
.experience-constellation,.experience-data-tunnel,.experience-route,.experience-network{position:relative;isolation:isolate;overflow:hidden}
.experience-constellation::before,.experience-data-tunnel::before,.experience-route::before,.experience-network::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1}
.experience-constellation::before{background:radial-gradient(circle at 50% 30%,rgba(40,220,220,.11),transparent 33%),radial-gradient(circle at 12% 68%,rgba(40,220,220,.06),transparent 22%)}
.experience-data-tunnel::before{background:linear-gradient(180deg,rgba(2,11,21,.2),rgba(0,4,10,.72)),repeating-linear-gradient(90deg,transparent 0 9.8%,rgba(58,221,221,.035) 10% 10.15%)}
.experience-route::before{background:radial-gradient(ellipse at 50% 50%,rgba(39,205,215,.075),transparent 42%),linear-gradient(180deg,rgba(4,12,21,.2),rgba(2,8,15,.8))}
.experience-network::before{background:radial-gradient(circle at 50% 52%,rgba(55,220,220,.11),transparent 28%),radial-gradient(circle at 50% 52%,rgba(0,0,0,0) 0 56%,rgba(0,0,0,.28) 78%)}

/* 1 — WHY MYDS: constellation around a living core */
.experience-constellation .why-grid{position:relative;display:block;min-height:900px;margin-top:54px;perspective:1200px}
.experience-constellation .myds-core{position:absolute;left:50%;top:47%;width:250px;height:250px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle,rgba(31,191,199,.18),rgba(3,15,27,.9) 58%,rgba(3,11,20,.98));border:1px solid rgba(93,240,235,.24);box-shadow:0 0 90px rgba(42,220,220,.12),inset 0 0 60px rgba(42,220,220,.08);z-index:3}
.experience-constellation .myds-core strong{font-size:56px;line-height:.9;letter-spacing:-.06em;color:#fff;text-shadow:0 0 30px rgba(67,237,233,.25)}
.experience-constellation .myds-core span{display:block;margin-top:12px;max-width:150px;font-size:10px;line-height:1.45;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.48)}
.experience-constellation .core-rings i{position:absolute;inset:12%;border:1px solid rgba(73,229,227,.12);border-radius:50%;animation:coreBreath 7s ease-in-out infinite}
.experience-constellation .core-rings i:nth-child(2){inset:-12%;animation-delay:-2.2s}
.experience-constellation .core-rings i:nth-child(3){inset:-36%;animation-delay:-4.4s}
@keyframes coreBreath{0%,100%{transform:scale(.94);opacity:.28}50%{transform:scale(1.04);opacity:.75}}
.experience-constellation .why-card{position:absolute;width:min(310px,27%);min-height:208px;margin:0!important;background:linear-gradient(145deg,rgba(10,27,42,.90),rgba(5,18,31,.78));border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 50px rgba(0,0,0,.28);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:4;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s,box-shadow .45s}
.experience-constellation .why-card:nth-of-type(1){left:2%;top:6%}
.experience-constellation .why-card:nth-of-type(2){right:2%;top:8%}
.experience-constellation .why-card:nth-of-type(3){left:0;bottom:10%}
.experience-constellation .why-card:nth-of-type(4){right:0;bottom:8%}
.experience-constellation .why-card:nth-of-type(5){left:50%;bottom:0;transform:translateX(-50%)}
/* the centred card keeps its own X offset once revealed — .in is the class
   the reveal observer actually sets */
.experience-constellation .why-card:nth-of-type(5).in{transform:translateX(-50%) translateY(0)!important}
.experience-constellation .why-card:hover{border-color:rgba(94,239,235,.28);box-shadow:0 28px 70px rgba(0,0,0,.38),0 0 45px rgba(43,220,220,.08)}
.experience-constellation .why-connectors{position:absolute;inset:0;z-index:1;pointer-events:none}
.experience-constellation .beam{position:absolute;left:50%;top:47%;width:1px;height:34%;transform-origin:top;background:linear-gradient(180deg,rgba(80,236,233,.34),transparent);opacity:.35}
.experience-constellation .b1{transform:rotate(-52deg)} .experience-constellation .b2{transform:rotate(52deg)} .experience-constellation .b3{transform:rotate(-127deg)} .experience-constellation .b4{transform:rotate(127deg)} .experience-constellation .b5{transform:rotate(180deg);height:31%}
.experience-constellation .glance-console{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:12px;border:1px solid rgba(91,230,228,.13);border-radius:28px;background:linear-gradient(180deg,rgba(2,12,22,.66),rgba(5,19,31,.85));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.experience-constellation .glance-console .glance-card{position:relative;border:none;border-radius:20px;background:rgba(255,255,255,.025);box-shadow:none;overflow:hidden}
.experience-constellation .glance-console .glance-card::before{content:attr(data-console);position:absolute;right:16px;top:12px;font-size:11px;letter-spacing:.14em;color:rgba(63,228,225,.45)}
.experience-constellation .glance-console .glance-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(53,229,225,.65),transparent);transform:translateX(-100%);animation:consoleScan 8s linear infinite}
.experience-constellation .glance-console .glance-card:nth-child(2)::after{animation-delay:-2s}.experience-constellation .glance-console .glance-card:nth-child(3)::after{animation-delay:-4s}.experience-constellation .glance-console .glance-card:nth-child(4)::after{animation-delay:-6s}
@keyframes consoleScan{0%{transform:translateX(-100%)}40%,100%{transform:translateX(100%)}}

/* 2 — OPPORTUNITY: a sequence of immersive data chambers */
/* Uses the standard .shell width so its title and chambers share the same
   left gutter as every other section (was max-width:1180px, which set this
   section 30px more inset than the rest and made titles jog on scroll). */
.experience-data-tunnel .data-story{display:block!important;margin-top:50px;position:relative}
.experience-data-tunnel .data-rail{position:sticky;top:34%;float:right;z-index:20;display:flex;flex-direction:column;gap:12px;margin-right:-28px;height:0}
.experience-data-tunnel .data-rail i{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);box-shadow:0 0 0 0 rgba(57,220,220,0);transition:.35s}
.experience-data-tunnel .data-rail i.active{background:#38dadd;box-shadow:0 0 0 7px rgba(56,218,221,.10),0 0 20px rgba(56,218,221,.3)}
.experience-data-tunnel .metric{position:relative!important;display:flex!important;align-items:center;min-height:68vh;margin:0 0 16vh!important;padding:clamp(28px,5vw,72px)!important;border-radius:38px!important;overflow:hidden;background:linear-gradient(135deg,rgba(8,27,43,.84),rgba(3,12,23,.93))!important;border:1px solid rgba(90,232,230,.13)!important;box-shadow:0 38px 100px rgba(0,0,0,.34)!important;isolation:isolate}
.experience-data-tunnel .metric:nth-child(even){justify-content:flex-end;text-align:right}
.experience-data-tunnel .metric-inner{position:relative;z-index:3;width:min(720px,74%)}
.experience-data-tunnel .metric-note{font-size:clamp(14px,1.7vw,19px)!important;letter-spacing:.04em!important;text-transform:none!important;color:rgba(255,255,255,.66)!important;max-width:28ch}
.experience-data-tunnel .metric:nth-child(even) .metric-note{margin-left:auto}
.experience-data-tunnel .metric-value{font-size:clamp(54px,9vw,126px)!important;line-height:.88!important;letter-spacing:-.065em!important;margin-top:24px!important;text-shadow:0 0 50px rgba(53,220,220,.08)}
.experience-data-tunnel .metric-value .unit{display:block!important;margin-top:14px;font-size:clamp(18px,2.2vw,30px)!important;letter-spacing:-.02em!important;color:#3ddbdd!important}
.experience-data-tunnel .metric-ghost{position:absolute;z-index:0;right:-1%;bottom:-19%;font-size:clamp(240px,35vw,560px);line-height:.8;font-weight:800;letter-spacing:-.1em;color:transparent;-webkit-text-stroke:1px rgba(62,225,224,.09);transform:rotate(-7deg);pointer-events:none;transition:transform .4s ease-out}
.experience-data-tunnel .metric:nth-child(even) .metric-ghost{left:-5%;right:auto;transform:rotate(7deg)}
.experience-data-tunnel .metric::before{content:"";position:absolute;inset:-30%;z-index:-1;background:conic-gradient(from 180deg at 50% 50%,transparent 0 22%,rgba(43,219,221,.08) 28%,transparent 34% 100%);animation:dataRotate 18s linear infinite}
@keyframes dataRotate{to{transform:rotate(360deg)}}

/* 3 — CORRIDOR: an actual journey along a route */
.experience-route .route-experience{display:block!important;margin-top:50px}
.experience-route .route-card{position:relative;overflow:visible!important;padding:40px 32px 40px 120px!important;background:linear-gradient(180deg,rgba(8,26,40,.82),rgba(4,16,28,.72))!important}
.experience-route .route-spine-head{position:absolute;left:36px;top:34px;bottom:34px;width:50px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;color:rgba(255,255,255,.5);font-size:10px;letter-spacing:.14em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}
.experience-route .route-line{position:absolute;left:50%;top:70px;bottom:70px;width:2px;background:rgba(53,219,221,.14);transform:translateX(-50%);overflow:hidden}
.experience-route .route-line i{position:absolute;left:0;top:-25%;width:100%;height:26%;background:linear-gradient(180deg,transparent,#4ce7e4,transparent);box-shadow:0 0 16px rgba(76,231,228,.85);animation:routeEnergy 4.8s linear infinite}
@keyframes routeEnergy{to{top:105%}}
.experience-route .route-list{position:relative;display:grid;gap:10px}
.experience-route .route-list::before{content:"";position:absolute;left:-45px;top:25px;bottom:25px;width:1px;background:linear-gradient(180deg,rgba(65,224,221,.14),rgba(65,224,221,.65),rgba(65,224,221,.14))}
.experience-route .route-list .list-row{position:relative;display:grid!important;grid-template-columns:74px 1fr!important;min-height:160px;align-items:center;padding:28px 26px!important;border:0!important;border-radius:24px;background:rgba(255,255,255,.025);transition:.4s ease}
.experience-route .route-list .list-row::before{content:"";position:absolute;left:-50px;top:50%;width:12px;height:12px;border-radius:50%;background:#061625;border:2px solid rgba(71,230,227,.45);transform:translateY(-50%);box-shadow:0 0 0 8px rgba(57,219,218,.045)}
.experience-route .route-list .list-row.active{background:rgba(50,218,216,.055);box-shadow:inset 0 0 0 1px rgba(61,227,224,.14)}
.experience-route .route-list .list-row.active::before{background:#42dedb;border-color:#8ff4f0;box-shadow:0 0 0 9px rgba(57,219,218,.08),0 0 28px rgba(57,219,218,.45)}
.experience-route .route-list .number{font-size:15px!important;color:#46dfdc!important;border:1px solid rgba(69,225,222,.18);border-radius:999px;width:50px;height:50px;display:grid;place-items:center;background:rgba(55,220,218,.06)}
.experience-route .service-station-card{margin-top:40px!important;background:linear-gradient(135deg,rgba(3,13,24,.94),rgba(8,29,44,.82))!important;overflow:hidden}
.experience-route .service-station-card::before{content:"COMMERCIAL SERVICES";position:absolute;right:-18px;top:16px;font-size:clamp(58px,10vw,150px);line-height:.8;font-weight:800;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(80,232,229,.055);pointer-events:none}
.experience-route .service-track{position:relative;z-index:2;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important}
.experience-route .service-track .service{position:relative;min-height:150px!important;display:flex!important;flex-direction:column;align-items:flex-start!important;justify-content:flex-end;gap:12px!important;padding:22px!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:22px;background:rgba(255,255,255,.025);overflow:hidden}
.experience-route .service-track .service::after{content:attr(data-service);position:absolute;right:14px;top:10px;font-size:12px;letter-spacing:.14em;color:rgba(65,225,222,.35)}
.experience-route .service-track .icon-wrap{transform:scale(1.05)}

/* 4 — PARTICIPATE: open-access ecosystem as a live network */
.experience-network .network-grid{position:relative!important;display:block!important;min-height:880px;margin-top:44px;border-radius:42px;background:radial-gradient(circle at center,rgba(34,188,196,.08),transparent 40%),rgba(1,9,17,.28);border:1px solid rgba(255,255,255,.055);overflow:hidden}
.experience-network .network-radar{position:absolute;left:50%;top:50%;width:520px;height:520px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.experience-network .radar-ring{position:absolute;border:1px solid rgba(64,224,222,.11);border-radius:50%}
.experience-network .r1{inset:13%}.experience-network .r2{inset:0}.experience-network .r3{inset:-16%}
.experience-network .radar-sweep{position:absolute;left:50%;top:50%;width:50%;height:1px;transform-origin:left center;background:linear-gradient(90deg,rgba(74,231,228,.65),transparent);box-shadow:0 0 15px rgba(74,231,228,.35);animation:radarSweep 11s linear infinite}
@keyframes radarSweep{to{transform:rotate(360deg)}}
.experience-network .network-hub{position:absolute;left:50%;top:50%;width:190px;height:190px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-content:center;text-align:center;z-index:4;background:radial-gradient(circle,rgba(53,218,218,.18),rgba(5,21,34,.96) 62%);border:1px solid rgba(85,235,232,.25);box-shadow:0 0 0 22px rgba(58,218,217,.025),0 0 80px rgba(54,218,218,.16)}
.experience-network .network-hub span{font-size:10px;letter-spacing:.28em;color:#47dfdc}.experience-network .network-hub strong{font-size:48px;line-height:.95;letter-spacing:-.055em}.experience-network .network-hub small{margin-top:7px;font-size:9px;line-height:1.45;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.48)}
.experience-network .network-grid .person{position:absolute!important;width:230px;min-height:116px;margin:0!important;padding:18px!important;display:grid!important;grid-template-columns:44px 1fr;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.08)!important;border-radius:20px;background:rgba(7,22,34,.78)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 45px rgba(0,0,0,.24);z-index:5;overflow:visible;transition:.4s ease}
.experience-network .network-grid .person:nth-of-type(1){left:5%;top:9%}.experience-network .network-grid .person:nth-of-type(2){left:39%;top:3%}.experience-network .network-grid .person:nth-of-type(3){right:4%;top:13%}.experience-network .network-grid .person:nth-of-type(4){right:2%;top:43%}.experience-network .network-grid .person:nth-of-type(5){right:8%;bottom:7%}.experience-network .network-grid .person:nth-of-type(6){left:39%;bottom:3%}.experience-network .network-grid .person:nth-of-type(7){left:5%;bottom:11%}.experience-network .network-grid .person:nth-of-type(8){left:2%;top:43%}
.experience-network .node-pulse{position:absolute;left:-4px;top:50%;width:8px;height:8px;border-radius:50%;background:#44dfdc;transform:translate(-50%,-50%);box-shadow:0 0 0 0 rgba(68,223,220,.35);animation:nodePulse 3.8s ease-out infinite}
.experience-network .person:nth-of-type(2n) .node-pulse{animation-delay:-1.9s}
@keyframes nodePulse{0%,65%{box-shadow:0 0 0 0 rgba(68,223,220,.34)}100%{box-shadow:0 0 0 20px rgba(68,223,220,0)}}
.experience-network .network-grid .person:hover{border-color:rgba(72,229,225,.25)!important;transform:translateY(-4px)!important}

/* Mobile: preserve uniqueness without overlap or horizontal page overflow */
@media (max-width:760px){
  .experience-constellation .why-grid{min-height:auto;display:grid!important;grid-template-columns:1fr;gap:14px;margin-top:28px;padding-top:220px}
  .experience-constellation .myds-core{top:92px;width:168px;height:168px}
  .experience-constellation .myds-core strong{font-size:42px}.experience-constellation .myds-core span{font-size:8px;max-width:118px}.experience-constellation .core-rings i:nth-child(3){inset:-24%}
  .experience-constellation .why-connectors{display:none}
  .experience-constellation .why-card,.experience-constellation .why-card:nth-of-type(1),.experience-constellation .why-card:nth-of-type(2),.experience-constellation .why-card:nth-of-type(3),.experience-constellation .why-card:nth-of-type(4),.experience-constellation .why-card:nth-of-type(5){position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;min-height:0;transform:none!important}
  .experience-constellation .glance-console{grid-template-columns:1fr!important;border-radius:22px;padding:8px}.experience-constellation .glance-console .glance-card{min-height:0!important}

  .experience-data-tunnel .data-rail{display:none}
  .experience-data-tunnel .data-story{margin-top:28px}
  .experience-data-tunnel .metric{min-height:64svh;margin-bottom:8vh!important;padding:28px 22px!important;border-radius:28px!important;text-align:left!important;justify-content:flex-start!important}
  .experience-data-tunnel .metric-inner{width:100%}.experience-data-tunnel .metric:nth-child(even) .metric-note{margin-left:0}
  .experience-data-tunnel .metric-value{font-size:clamp(54px,18vw,82px)!important}.experience-data-tunnel .metric-ghost{font-size:76vw;right:-7%;bottom:-5%;opacity:.8}.experience-data-tunnel .metric:nth-child(even) .metric-ghost{left:auto;right:-7%;transform:rotate(-7deg)}

  .experience-route .route-card{padding:88px 18px 24px 38px!important}
  .experience-route .route-spine-head{left:9px;top:24px;bottom:24px;width:24px;font-size:8px}
  .experience-route .route-line{top:60px;bottom:60px}
  .experience-route .route-list::before{left:-17px}
  .experience-route .route-list .list-row{grid-template-columns:52px 1fr!important;min-height:0;padding:20px 15px!important;border-radius:18px}.experience-route .route-list .list-row::before{left:-22px;width:10px;height:10px}
  .experience-route .route-list .number{width:40px;height:40px;font-size:12px!important}
  .experience-route .route-list h3{font-size:19px!important}.experience-route .route-list p{font-size:13px!important}
  .experience-route .service-station-card{padding:22px 0 24px!important;overflow:hidden}
  .experience-route .service-station-card>.section-kicker{padding:0 20px}
  .experience-route .service-track{display:flex!important;grid-template-columns:none!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 14px;scroll-padding-left:20px;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
  .experience-route .service-track::-webkit-scrollbar{display:none}
  .experience-route .service-track .service{flex:0 0 min(78vw,290px);min-height:170px!important;scroll-snap-align:start}
  .experience-route .service-station-card::before{font-size:78px;right:-50px;top:8px}

  .experience-network .network-grid{min-height:auto;padding:230px 12px 16px;border-radius:28px;display:grid!important;grid-template-columns:1fr;gap:10px}
  .experience-network .network-radar{top:105px;width:230px;height:230px}
  .experience-network .network-hub{top:105px;width:138px;height:138px}.experience-network .network-hub strong{font-size:38px}.experience-network .network-hub small{font-size:7px}
  .experience-network .network-grid .person,.experience-network .network-grid .person:nth-of-type(1),.experience-network .network-grid .person:nth-of-type(2),.experience-network .network-grid .person:nth-of-type(3),.experience-network .network-grid .person:nth-of-type(4),.experience-network .network-grid .person:nth-of-type(5),.experience-network .network-grid .person:nth-of-type(6),.experience-network .network-grid .person:nth-of-type(7),.experience-network .network-grid .person:nth-of-type(8){position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;min-height:82px;margin:0!important}
  .experience-network .node-pulse{left:8px}
}

@media (prefers-reduced-motion:reduce){.core-rings i,.glance-card::after,.metric::before,.route-line i,.radar-sweep,.node-pulse{animation:none!important}}


/* =========================================================
   MOBILE HARDENING
   Small-screen viewport, touch and performance corrections.
   Kept last so it settles the cascade.
   ========================================================= */

/* safety net for a failed/blocked main.js — see the inline head script */
.reveal-all .reveal{opacity:1!important;transform:none!important}

/* keyboard entry point, visible only when focused */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;border-radius:0 0 14px 0;background:var(--teal);color:#03131f;font-size:14px;font-weight:700;text-decoration:none}
.skip-link:focus-visible{left:0}
:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--teal-soft);outline-offset:3px;border-radius:6px}

/* hash links must clear the fixed mobile header */
section[id]{scroll-margin-top:84px}

/* nothing may push the document sideways on a phone */
html,body{max-width:100%}

/* Dynamic viewport units, but only above the phone breakpoint. Phones lay the
   hero out in normal flow (height:auto) and use svh for the sticky transition
   stages — svh does not reflow as browser chrome collapses. Applying dvh here
   unguarded would force the hero stage back to one screen and clip it. */
@supports (height:100dvh){
  @media (min-width:761px){
    .hero-stage{height:100dvh}
    .transition-stage{min-height:100dvh}
  }
}

@media (max-width:760px){
  /* keep long uppercase strings from spilling */
  .transition-kicker,.section-kicker{overflow-wrap:anywhere}

  /* blur and full-page conic sweeps are the two heaviest paints on
     mid-range phones — swap them for flat equivalents */
  .experience-constellation .why-card,
  .experience-network .network-grid .person{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .experience-data-tunnel .metric::before{animation:none;opacity:.5}
  .map-glow{filter:blur(20px)}

  /* horizontal service carousel: give the scroll a visible affordance */
  .experience-route .service-track{scrollbar-width:none}
  .experience-route .service-track .service{scroll-snap-align:start}
}

/* =========================================================
   PHONE DENSITY
   The desktop composition spends its height on atmosphere: full-screen
   chapter transitions and 64svh data chambers holding ~150px of text.
   That reads as ~19 screens of thumb travel on a handset. Everything below
   trims empty space only — no content is dropped and the desktop
   composition is untouched.
   ========================================================= */
@media (max-width:760px){

  /* Data chambers: measured content is 134–270px inside a 520px box.
     min-height still lets any chamber grow if its text wraps further. */
  .experience-data-tunnel .metric{min-height:36svh;margin-bottom:3.5vh!important;padding:26px 22px!important}
  .experience-data-tunnel .data-story{margin-top:24px}

  /* Chapter transitions: the sticky scrub needs the scene taller than the
     viewport, so 112svh is the floor that keeps the effect. ~97px of travel. */
  .transition-scene{min-height:112svh}
  .transition-content{width:min(calc(100% - 34px),640px)}

  /* Section rhythm */
  .section{padding:60px 0 52px}
  .subsection{margin-top:40px}

  /* Hero. Measured at 375x812 it ran 1734px, and the route map alone was 542px
     of that — a 950x1515 portrait at nearly full bleed. The map scales back to
     an inset while the phase strip below it keeps every distance and endpoint
     in text, so no information depends on the map's size. Body copy stays at
     16px/1.66 and keeps every word; the savings are all spacing. */
  .hero-scene{padding-top:calc(16px + env(safe-area-inset-top))}
  .hero-grid{padding:20px 0 24px;gap:20px}
  .hero-logo{width:88px;margin-bottom:16px}
  .hero-kicker{margin-bottom:11px}
  .hero-text{margin-top:16px;gap:11px}
  /* one clear action in the phone hero; the ghost "explore" is redundant
     with scrolling, so drop it and let the primary span the column */
  .hero-actions{margin-top:18px;gap:10px}
  .hero-actions .btn{width:100%}
  .hero-actions .btn--ghost{display:none}
  .map-column{gap:13px}
  .map-window{width:min(76%,250px)}

  /* the 874 km card reads heavy on a phone at a 68px numeral */
  .corridor-card{margin-top:16px;padding:17px;gap:11px}
  .corridor-num{font-size:54px}
  .corridor-num small{font-size:22px}
  .corridor-label{margin-top:7px}

  .phase-strip{gap:7px}
  .phase{padding:10px 13px}

  /* Floating core / radar headers: reclaim the reserved band above them */
  .experience-constellation .why-grid{padding-top:182px;margin-top:24px}
  .experience-constellation .myds-core{top:76px}
  .experience-network .network-grid{padding:192px 12px 16px}
  .experience-network .network-radar{top:88px}
  .experience-network .network-hub{top:88px}

  /* Closing scene */
  .final{padding:52px 0 0}
  .final-copy{padding-bottom:28px}
  /* the horizon is authored as a 150%-wide bleed; the global max-width:100%
     was clamping it to the viewport and leaving the right edge bare */
  .final-earth{max-width:none;width:150%;margin-left:-25%}
}

/* Tablet portrait: the participation nodes are a fixed 230px pinned at
   percentage offsets, so they collide once the container drops under ~950px —
   well before the phone breakpoint. Hand this section its stacked layout
   early, in two columns, and keep the radar as a header motif. */
@media (min-width:761px) and (max-width:1049px){
  .experience-network .network-grid{min-height:auto;padding:290px 18px 22px;border-radius:34px;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .experience-network .network-radar{top:146px;width:300px;height:300px}
  .experience-network .network-hub{top:146px;width:170px;height:170px}
  .experience-network .network-hub strong{font-size:42px}
  .experience-network .network-grid .person,
  .experience-network .network-grid .person:nth-of-type(1),
  .experience-network .network-grid .person:nth-of-type(2),
  .experience-network .network-grid .person:nth-of-type(3),
  .experience-network .network-grid .person:nth-of-type(4),
  .experience-network .network-grid .person:nth-of-type(5),
  .experience-network .network-grid .person:nth-of-type(6),
  .experience-network .network-grid .person:nth-of-type(7),
  .experience-network .network-grid .person:nth-of-type(8){position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;min-height:96px;margin:0!important}
  .experience-network .node-pulse{left:8px}
}

/* landscape phones: short viewports must not trap the full-screen scenes */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  .transition-scene{min-height:150svh}
  .transition-stage{min-height:100svh;padding:44px 0}
  .transition-title{font-size:clamp(30px,7vw,52px)}
  .transition-sub{font-size:13px;margin-top:12px}
  .transition-line{margin-top:20px}
  .transition-word{font-size:26vw}
  .hero-scene{padding-top:calc(16px + env(safe-area-inset-top))}
}

/* very wide screens: keep the reading measure sane */
@media (min-width:1700px){
  .shell{width:min(calc(100% - 120px),1440px)}
}

/* touch devices never get hover-only affordances stuck on */
@media (hover:none){
  .experience-constellation .why-card:hover,
  .experience-network .network-grid .person:hover{transform:none!important}
}

/* printing the fact sheet should produce a readable document */
@media print{
  body{background:#fff;color:#000}
  .progress,.side-nav,.ambient-myds,.transition-scene,
  .why-connectors,.network-radar,.data-rail,.route-line{display:none!important}
  .section{padding:24px 0;page-break-inside:avoid}
  .js .reveal{opacity:1!important;transform:none!important}
  .site-header,.scroll-cue{display:none!important}
}


/* =========================================================
   DESKTOP UI/UX ENHANCEMENTS
   Additive layer: a button system, a persistent header with a
   live CTA, a hero action row + scroll cue, a real closing
   conversion block, and a progress rail behind the side-nav.
   Section treatments above are untouched.
   ========================================================= */

/* --- Button system -------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 22px;border-radius:999px;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,background-color .25s ease,border-color .25s ease}
.btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.btn--primary{background:linear-gradient(180deg,var(--teal-soft),var(--teal));color:#03131f;box-shadow:0 10px 30px rgba(56,215,217,.26),inset 0 1px 0 rgba(255,255,255,.35)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(56,215,217,.42),inset 0 1px 0 rgba(255,255,255,.45)}
.btn--primary:hover svg{transform:translateX(3px)}
.btn--ghost{background:rgba(255,255,255,.03);color:var(--text);border-color:rgba(124,236,234,.30)}
.btn--ghost:hover{border-color:var(--teal);background:rgba(56,215,217,.08);transform:translateY(-2px)}
.btn--sm{padding:10px 18px;font-size:13px}
.btn--sm svg{width:16px;height:16px}
.btn--lg{padding:17px 30px;font-size:17px}
.btn:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover,.btn svg{transform:none!important}}

/* --- Persistent header (desktop only) ------------------------------- */
.site-header{display:none}
@media (min-width:761px){
  .site-header{position:fixed;z-index:96;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px;padding:0 clamp(24px,4vw,52px);background:rgba(3,13,23,.74);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid rgba(124,236,234,.12);transform:translateY(-102%);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
  .site-header.is-visible{transform:none;opacity:1;pointer-events:auto}
  .site-header__brand{display:flex;align-items:baseline;gap:13px;text-decoration:none;min-width:0}
  .site-header__mark{font-size:17px;font-weight:800;letter-spacing:.02em;color:var(--text)}
  .site-header__ctx{position:relative;padding-left:14px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s ease}
  .site-header__ctx::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(56,215,217,.7)}
  .site-header__cta{flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){.site-header{transition:opacity .3s ease}}

/* --- Hero action row + scroll cue ----------------------------------- */
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.scroll-cue{display:none}
@media (min-width:761px){
  .scroll-cue{display:block;position:absolute;left:50%;bottom:24px;width:26px;height:42px;margin-left:-13px;border:1.5px solid rgba(124,236,234,.42);border-radius:999px;z-index:3;cursor:pointer;transition:opacity .4s ease,border-color .25s ease}
  .scroll-cue:hover{border-color:var(--teal)}
  .scroll-cue::before{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--teal-soft);animation:scrollCue 1.9s ease-in-out infinite}
  .scroll-cue.is-hidden{opacity:0;pointer-events:none}
}
@keyframes scrollCue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}70%{opacity:1;transform:translateY(13px)}100%{opacity:0;transform:translateY(13px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue::before{animation:none}}

/* --- Closing conversion block --------------------------------------- */
.final-kicker{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin:0 0 20px}
.final-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:32px}
.final-actions .final-url{margin-top:0}

/* --- Side-nav progress rail ----------------------------------------- */
.side-nav a{position:relative;z-index:1}
.side-nav__track{position:absolute;right:4px;top:4px;bottom:4px;width:2px;border-radius:2px;background:rgba(124,236,234,.14);z-index:0;overflow:hidden;pointer-events:none}
.side-nav__fill{display:block;width:100%;height:calc(var(--progress,0)*100%);background:linear-gradient(180deg,var(--teal-soft),var(--teal));box-shadow:0 0 12px rgba(56,215,217,.5)}

/* --- Short-viewport hero (the clipping fix) -------------------------- */
/* The pinned 100vh hero holds ~1000px of content: an 893px portrait route
   map plus a full copy column with logo, title, body, CTAs and the 874 km
   card. It only fits displays taller than ~960px, so on every laptop the
   overflow:hidden stage cropped the bottom row (phase strip, 874 km card).
   Below that height, unpin the hero into a naturally flowing two-column
   layout: the content defines the height, nothing can clip, and the spacing
   stays generous. Only genuinely tall displays (>1080px, where the map column
   clears with margin) keep the cinematic pinned map. */
@media (min-width:761px) and (max-height:1080px){
  .hero-scene{min-height:auto}
  .hero-stage{position:static;height:auto;min-height:auto;overflow:visible;display:block}
  .hero-stage::after{display:none}
  .hero-grid{padding:clamp(96px,13vh,132px) 0 clamp(60px,9vh,96px);align-items:start}
  .scroll-cue{display:none}
}

/* --- Contain the ghost decorations ---------------------------------- */
/* The oversized watermark numerals and wordmarks were positioned with
   negative offsets, so the card's overflow:hidden sliced them: the chamber
   numerals lost 35-42% of their area off the bottom-right, and
   "COMMERCIAL SERVICES" (1502px) overflowed its 1240px card by 280px.
   Sliced type reads as broken content rather than deliberate texture, so
   each ghost is now sized and positioned to sit fully inside its box.
   The 68vh chamber has room for this: a ~450px numeral clears the
   ~150px copy column it sits behind, and the JS parallax moves it +/-17px,
   which the inset absorbs. */
.experience-data-tunnel .metric-ghost{right:3%;bottom:6%;font-size:clamp(200px,28vw,440px)}
.experience-data-tunnel .metric:nth-child(even) .metric-ghost{left:3%;right:auto}
.experience-route .service-station-card::before{right:24px;font-size:clamp(44px,7.4vw,112px)}

@media (max-width:760px){
  /* same containment at phone scale */
  .experience-data-tunnel .metric-ghost{font-size:58vw;right:4%;bottom:5%}
  .experience-data-tunnel .metric:nth-child(even) .metric-ghost{left:auto;right:4%}
  .experience-route .service-station-card::before{right:14px;font-size:64px}
}