/* ============================================================
   NEXTERA - tokens
   Palette sampled from the supplied footage and the brand logo.
   ============================================================ */
:root{
  --canvas:#06131F;
  --canvas-2:#0A1C2B;
  --panel:#0E2334;
  --panel-2:#12293C;
  --line:rgba(168,196,220,.16);
  --line-strong:rgba(168,196,220,.30);
  --accent:#E0A85E;
  --accent-hover:#F0BE7F;
  --accent-muted:rgba(224,168,94,.20);
  --mist:#A9C2D8;
  --text-secondary:#9FB2C4;
  --text-primary:#F3EFE9;

  --display:'Archivo','Archivo Expanded',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;

  --tshadow:0 1px 2px rgba(3,8,14,.95),0 3px 12px rgba(3,8,14,.78),0 10px 44px rgba(3,8,14,.8);
  --ease:cubic-bezier(.22,.68,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --gut:clamp(20px,5vw,68px);
  --maxw:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:clamp(15px,1.02vw,17px);line-height:1.62;
  font-weight:400;-webkit-font-smoothing:antialiased;
  opacity:0;transition:opacity .7s var(--ease);
}
body.ready{opacity:1}
/* height:auto is load bearing: the width/height attributes on every img map to the
   CSS width and height properties, so a rule that only sets width leaves the
   attribute height in place and the image renders squashed */
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;font-stretch:116%;
  line-height:1.03;letter-spacing:-.018em;text-transform:uppercase}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:120;background:var(--accent);
  color:#06131F;padding:11px 18px;border-radius:8px;font-family:var(--mono);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  transition:top .25s var(--ease)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--mist)}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
section[id],footer{scroll-margin-top:88px}

/* every animation stops when the tab is hidden. animation-play-state does not
   inherit, so this has to reach elements and pseudo-elements directly */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ============================================================
   The fixed environment: one survey grid behind the whole page
   ============================================================ */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-grid{position:absolute;inset:-10% -10%;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(168,196,220,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(168,196,220,.055) 1px,transparent 1px),
    linear-gradient(to right,rgba(168,196,220,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(168,196,220,.028) 1px,transparent 1px);
  background-size:320px 320px,320px 320px,64px 64px,64px 64px;
  animation:envdrift 110s linear -24s infinite}
.env-glow{position:absolute;left:50%;top:38%;width:min(1500px,150vw);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(224,168,94,.085) 0%,rgba(224,168,94,.03) 38%,transparent 66%);
  animation:envpulse 90s ease-in-out -30s infinite}
@keyframes envdrift{to{transform:translate3d(-320px,-320px,0)}}
@keyframes envpulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.95;transform:translate(-50%,-50%) scale(1.14)}}

/* ============================================================
   Navigation
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;gap:22px;
  padding:16px var(--gut);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),
    border-color .5s var(--ease),padding .5s var(--ease);
  border-bottom:1px solid transparent}
.nav.solid{background:rgba(6,19,31,.9);backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);padding-top:11px;padding-bottom:11px}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.nav-logo img{width:clamp(118px,11vw,152px);height:auto;
  transition:width .5s var(--ease)}
/* Two grouped dropdowns and one plain link, in the display face at a size that
   actually reads as navigation rather than as fine print. */
.nav-links{display:flex;gap:clamp(18px,2.4vw,42px);margin-left:auto;align-items:center}
.nlink{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:700;font-stretch:112%;
  font-size:clamp(14px,1.12vw,17px);letter-spacing:.005em;text-transform:uppercase;
  text-decoration:none;color:var(--text-secondary);background:none;border:0;
  padding:9px 0;cursor:pointer;position:relative;transition:color .3s var(--ease)}
.nlink::after{content:"";position:absolute;left:0;right:100%;bottom:3px;height:2px;
  background:var(--accent);transition:right .38s var(--ease)}
.nlink:hover{color:var(--text-primary)}
.nlink:hover::after{right:0}
.nlink[aria-current="page"],.nlink[data-current="1"]{color:var(--text-primary)}
.nlink[aria-current="page"]::after,.nlink[data-current="1"]::after{right:0}
.ncar{width:10px;height:6px;opacity:.7;transition:transform .34s var(--ease)}
.ndrop.open .ncar{transform:rotate(180deg)}
.ndrop.open > .nlink{color:var(--text-primary)}
.ndrop.open > .nlink::after{right:0}

.ndrop{position:relative}
/* the nav is right aligned, so the panels anchor right or they run off screen */
.ndrop-panel{position:absolute;top:calc(100% + 12px);right:-22px;z-index:95;
  min-width:270px;padding:14px;border-radius:14px;
  background:rgba(7,18,30,.97);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line-strong);box-shadow:0 30px 70px -28px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility .34s}
.ndrop-panel.two{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;min-width:520px}
.ndrop.open .ndrop-panel{opacity:1;visibility:visible;transform:none}
.ndrop-panel::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.ndrop-panel .grp{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);padding:6px 11px 8px}
.ndrop-panel a{display:block;padding:9px 11px;border-radius:9px;text-decoration:none;
  font-family:var(--body);font-size:13.5px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--text-secondary);
  transition:background .28s var(--ease),color .28s var(--ease)}
.ndrop-panel a:hover{background:rgba(224,168,94,.11);color:var(--text-primary)}
.ndrop-panel a[aria-current="page"]{color:var(--accent);background:rgba(224,168,94,.08)}
.panel-menu a[aria-current="page"]{color:var(--accent)}
.nav-cta{flex:0 0 auto}
.nav-burger{display:none;flex:0 0 auto;margin-left:auto;width:44px;height:44px;
  background:none;border:1px solid var(--line);border-radius:9px;cursor:pointer;
  align-items:center;justify-content:center;transition:border-color .3s var(--ease)}
.nav-burger:hover{border-color:var(--line-strong)}
.nav-burger span{display:block;width:17px;height:1.5px;background:var(--text-primary);
  position:relative;transition:background .3s var(--ease)}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;
  width:17px;height:1.5px;background:var(--text-primary);transition:transform .38s var(--ease)}
.nav-burger span::before{top:-5.5px}.nav-burger span::after{top:5.5px}
.nav-burger[aria-expanded="true"] span{background:transparent}
.nav-burger[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

.panel-menu{position:fixed;inset:0;z-index:89;background:rgba(6,19,31,.98);
  backdrop-filter:blur(18px);display:flex;flex-direction:column;
  padding:92px var(--gut) 40px;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .42s var(--ease),visibility .42s}
.panel-menu.open{opacity:1;visibility:visible}
.panel-menu a{font-family:var(--display);font-weight:700;font-stretch:112%;
  text-transform:uppercase;font-size:clamp(21px,5.6vw,30px);letter-spacing:-.01em;
  text-decoration:none;padding:11px 0;border-bottom:1px solid var(--line);
  color:var(--text-primary);opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease)}
.panel-menu.open a{opacity:1;transform:none}
.panel-menu a:hover{color:var(--accent)}
.panel-menu .pm-foot{margin-top:auto;padding-top:26px;display:flex;gap:12px;flex-wrap:wrap}

/* ============================================================
   Buttons
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:500;text-decoration:none;cursor:pointer;
  padding:14px 24px;border-radius:9px;border:1px solid transparent;
  background:var(--accent);color:#06131F;
  transition:background .34s var(--ease),transform .34s var(--ease),
    box-shadow .34s var(--ease),border-color .34s var(--ease),color .34s var(--ease);
  box-shadow:0 0 0 0 rgba(224,168,94,0)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);
  box-shadow:0 12px 34px -14px rgba(224,168,94,.7)}
.btn:active{transform:translateY(0)}
.btn .arw{transition:transform .34s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--line-strong)}
.btn-ghost:hover{background:rgba(224,168,94,.09);border-color:var(--accent);
  color:var(--text-primary);box-shadow:none}
.btn-sm{padding:11px 17px;font-size:10.5px}
.band .btn{text-shadow:none}

/* ============================================================
   HERO - pinned scrub stage
   ============================================================ */
.hero{position:relative;height:800vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#04101a}
.stage-media{position:absolute;inset:0;pointer-events:none}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;
  background-repeat:no-repeat;transform:scale(1.015)}
#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .85s var(--ease);
  will-change:transform;transform:translateZ(0)}
.stage.video-ready #hero-video{opacity:1}
.stage.video-ready .poster{opacity:0;transition:opacity .85s var(--ease)}

.scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(4,10,18,.82) 0%,rgba(4,10,18,.56) 22%,
      rgba(4,10,18,.14) 48%,rgba(4,10,18,0) 64%),
    linear-gradient(to bottom,rgba(4,10,18,.55) 0%,rgba(4,10,18,0) 26%),
    radial-gradient(ellipse 132% 96% at 50% 42%,rgba(4,10,18,0) 40%,rgba(4,10,18,.48) 100%)}

.ring{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);
  width:44px;height:44px;color:var(--accent);opacity:.9;
  transition:opacity .5s var(--ease)}
.ring circle{transition:stroke-dashoffset .12s linear;transform:rotate(-90deg);
  transform-origin:50% 50%}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}

.cue{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  opacity:0;transition:opacity .7s var(--ease) .3s;pointer-events:none}
.stage.video-ready .cue,.stage.video-failed .cue{opacity:.72}
.stage.cue-gone .cue{opacity:0 !important}
.cue .mono{font-size:9.5px;letter-spacing:.24em}
.cue svg{animation:cuebob 2.6s var(--ease) -.4s infinite}
@keyframes cuebob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}

.hud{position:absolute;z-index:4;pointer-events:none}
.chip{background:rgba(6,14,24,.55);border:1px solid rgba(168,196,220,.24);
  border-radius:9px;backdrop-filter:blur(10px);padding:7px 12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist);text-shadow:0 1px 3px rgba(3,8,14,.85)}
.hud-l{left:var(--gut);top:clamp(96px,13vh,132px)}
.hud-r{right:var(--gut);top:clamp(96px,13vh,132px);display:flex;align-items:center;gap:9px}
.hud-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(224,168,94,.55);animation:dotpulse 3.4s var(--ease) -1s infinite}
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 0 rgba(224,168,94,.5)}
  50%{box-shadow:0 0 0 7px rgba(224,168,94,0)}}

.prog{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:5;
  background:rgba(168,196,220,.12);transition:opacity .5s var(--ease)}
.stage.arrived .prog{opacity:0}
.prog i{display:block;height:100%;background:var(--accent);
  transform-origin:0 50%;transform:scaleX(var(--hp,0))}

/* ---------- caption bands ---------- */
.bands{position:absolute;inset:0;z-index:3}
.band{position:absolute;left:50%;bottom:17vh;transform:translateX(-50%);
  width:min(1120px,88vw);text-align:center;opacity:0}
.band::before{content:"";position:absolute;inset:-46% -14%;pointer-events:none;z-index:-1;
  opacity:calc(.24 + .76*var(--k,1));
  background:radial-gradient(ellipse 72% 60% at 50% 52%,
    rgba(3,8,14,calc(var(--sa,.62))) 0%,
    rgba(3,8,14,calc(var(--sa,.62) * .66)) 46%,
    rgba(3,8,14,0) 76%)}
/* the settle block is the tallest and sits highest in frame, so its scrim
   reaches further than the beats above it. Measured, not guessed. */
/* the settle lands lower in frame than the beats above it, over the boulevard
   rather than across the sunlit skyline, which is where the contrast audit failed */
.band.e-settle{bottom:11vh}
.band.e-settle::before{inset:-44% -20%;
  /* the settle uses a long staged ramp for its text, so its scrim must NOT ride --k:
     the words finish fading in long before --k reaches 1 and the scrim would lag them */
  opacity:1;
  /* vertical radius is exactly half the box, so the gradient reaches zero at the box
     edge instead of being clipped mid-fade, which showed as a hard line across frame */
  background:radial-gradient(ellipse 80% 50% at 50% 50%,
    rgba(3,8,14,calc(var(--sa,.84))) 0%,
    rgba(3,8,14,calc(var(--sa,.84) * .9)) 53%,
    rgba(3,8,14,0) 100%)}
.band .kick{display:block;margin-bottom:clamp(12px,1.6vw,20px);
  font-family:var(--mono);font-size:clamp(9.5px,.78vw,11.5px);letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent)}
.band .hl{font-family:var(--display);font-weight:800;font-stretch:118%;
  text-transform:uppercase;line-height:.99;letter-spacing:-.022em;
  font-size:clamp(34px,7.3vw,104px);text-wrap:balance}
.band .hl-sm{font-size:clamp(28px,5.5vw,76px)}
/* the settle runs two lines, not three: a third line pushes the top of the block
   up into the brightest part of the frame and the contrast audit fails it */
.band .hl-set{font-size:clamp(30px,6.05vw,88px)}
.band .sub{margin-top:clamp(14px,1.7vw,22px);font-size:clamp(15px,1.28vw,20px);
  color:var(--text-primary);opacity:.93;max-width:34ch;margin-left:auto;margin-right:auto}
.band .cta-row{margin-top:clamp(20px,2.4vw,32px);display:flex;gap:12px;
  justify-content:center;flex-wrap:wrap}
.band .disclose{margin-top:clamp(16px,1.9vw,26px);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--mist);opacity:.84}
.band .w{display:inline-block;white-space:nowrap}
.band .c{display:inline-block;will-change:transform,opacity}
.band .sp{display:inline-block;width:.28em}
.band{text-shadow:var(--tshadow)}

/* entrances, one per beat, all transform + opacity, all reversible */
.e-depth .hl{--kc:clamp(0,var(--k,0) * 1.3,1);opacity:var(--kc);
  transform:scale(calc(.865 + .135 * var(--kc)))}
.e-depth .kick{--kk:clamp(0,(var(--k,0) - .16) * 2.6,1);opacity:var(--kk);
  transform:translateY(calc((1 - var(--kk)) * 12px))}

.e-grid .c{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.7,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)))}

.e-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1)) * var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.12)) * var(--kc) - var(--ov,.12) * var(--ks)))}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}

.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 28px))}

.e-settle .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.6,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 24px))}
.e-settle .sub{--ks:clamp(0,(var(--k,0) - .56) * 4,1);opacity:calc(var(--ks) * .93);
  transform:translateY(calc((1 - var(--ks)) * 15px))}
.e-settle .cta-row{--kb:clamp(0,(var(--k,0) - .70) * 4.6,1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb)) * 17px))}
.e-settle .disclose{--kd:clamp(0,(var(--k,0) - .84) * 6,1);opacity:calc(var(--kd) * .84)}

/* ---------- static hero (phones, tablets, reduced motion) ---------- */
.hero-static{display:none;position:relative;min-height:100vh;min-height:100svh;
  align-items:flex-end;padding:120px var(--gut) clamp(46px,9vh,80px);
  background:#04101a;overflow:hidden;z-index:1}
.hero-static .hs-bg{position:absolute;inset:0;background-size:cover;
  background-position:58% center;transform:scale(1.04)}
.hero-static .hs-scrim{position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(4,10,18,.94) 4%,rgba(4,10,18,.66) 30%,
      rgba(4,10,18,.16) 58%,rgba(4,10,18,.04) 74%),
    linear-gradient(to bottom,rgba(4,10,18,.66) 0%,rgba(4,10,18,0) 30%)}
.hero-static .hs-in{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  text-shadow:var(--tshadow)}
.hero-static .kick{display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.hero-static h1{font-size:clamp(31px,8.4vw,60px);letter-spacing:-.022em;
  font-stretch:118%;max-width:17ch}
.hero-static .sub{margin-top:15px;font-size:clamp(15px,4vw,18px);color:var(--text-primary);
  opacity:.92;max-width:32ch}
.hero-static .cta-row{margin-top:26px;display:flex;gap:11px;flex-wrap:wrap}
.hero-static .cta-row .btn{text-shadow:none}
.hero-static .disclose{margin-top:24px;font-family:var(--mono);font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mist);opacity:.86}

/* ============================================================
   Section system
   ============================================================ */
/* section grounds are translucent on purpose: the fixed survey grid drifts
   behind the whole page, so scrolling reads as moving through one place */
main{position:relative;z-index:2}
.sec{position:relative;padding:clamp(72px,11vh,132px) 0;background:rgba(6,19,31,.88)}
.sec.alt{background:rgba(10,28,43,.9)}
.sec > .wrap{position:relative}
.sec-head{max-width:78ch}
.kicker{display:flex;align-items:center;gap:11px;margin-bottom:clamp(16px,2vw,24px);
  color:var(--accent)}
.kicker::after{content:"";flex:1;height:1px;max-width:190px;
  background:linear-gradient(to right,var(--accent-muted),transparent)}
.h2{font-size:clamp(28px,4.9vw,62px);letter-spacing:-.021em;max-width:19ch;
  text-wrap:balance}
.h2.wide{max-width:24ch}
/* a second head shape, so fourteen sections do not open the same way fourteen times */
.sec-head.duo{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(22px,4vw,64px);align-items:end;max-width:none}
.sec-head.duo .kicker{grid-column:1/-1}
.sec-head.duo .lede{margin-top:0;padding-bottom:.5em}
.lede{margin-top:clamp(16px,2vw,24px);font-size:clamp(16px,1.32vw,20px);
  color:var(--text-secondary);max-width:62ch;line-height:1.62}
.note{margin-top:22px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist);opacity:.8;max-width:68ch;line-height:1.85}

/* survey rule with corner ticks, drawn on scroll */
.rule{position:relative;height:1px;margin:clamp(46px,6vw,78px) 0;
  background:linear-gradient(to right,var(--line),transparent)}
.rule svg{position:absolute;left:0;top:-7px;width:100%;height:15px;overflow:visible}
.rule path{stroke:var(--line-strong);stroke-width:1;fill:none;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);
  transition:stroke-dashoffset 1.5s var(--ease-out)}
.rule.in path{stroke-dashoffset:0}
.rule .tag{position:absolute;right:0;top:-8px;background:var(--canvas);padding-left:14px}
.sec.alt .rule .tag{background:var(--canvas-2)}

/* The official plans are printed documents. They sit on paper on top of the navy,
   which is the survey idea made literal rather than fighting the page's palette. */
.sheet{position:relative;margin:clamp(22px,3vw,32px) 0;border-radius:12px;overflow:hidden;
  background:#EDEAE4;border:1px solid rgba(168,196,220,.22);
  box-shadow:0 24px 64px -34px rgba(0,0,0,.85)}
.sheet img{width:100%;height:auto;display:block}
.sheet figcaption{padding:11px 15px;background:#E1DDD5;color:#39434F;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  border-top:1px solid rgba(0,0,0,.12);line-height:1.7}
.sheet::after{content:"";position:absolute;inset:8px;pointer-events:none;border-radius:4px;
  background:
    linear-gradient(rgba(224,168,94,.5),rgba(224,168,94,.5)) left top/14px 1px no-repeat,
    linear-gradient(rgba(224,168,94,.5),rgba(224,168,94,.5)) left top/1px 14px no-repeat,
    linear-gradient(rgba(224,168,94,.5),rgba(224,168,94,.5)) right top/14px 1px no-repeat,
    linear-gradient(rgba(224,168,94,.5),rgba(224,168,94,.5)) right top/1px 14px no-repeat}

/* surveyor's crop marks, drawn inside any framed image */
.ch::after{content:"";position:absolute;inset:10px;pointer-events:none;border-radius:3px;
  background:
    linear-gradient(var(--accent-muted),var(--accent-muted)) left top/13px 1px no-repeat,
    linear-gradient(var(--accent-muted),var(--accent-muted)) left top/1px 13px no-repeat,
    linear-gradient(var(--accent-muted),var(--accent-muted)) right top/13px 1px no-repeat,
    linear-gradient(var(--accent-muted),var(--accent-muted)) right top/1px 13px no-repeat,
    linear-gradient(var(--accent-muted),var(--accent-muted)) left bottom/13px 1px no-repeat,
    linear-gradient(var(--accent-muted),var(--accent-muted)) left bottom/1px 13px no-repeat,
    linear-gradient(var(--accent-muted),var(--accent-muted)) right bottom/13px 1px no-repeat,
    linear-gradient(var(--accent-muted),var(--accent-muted)) right bottom/1px 13px no-repeat}

/* choreographed entrances */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .78s var(--ease-out),transform .78s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.stg > *{opacity:0;transform:translateY(24px);
  transition:opacity .72s var(--ease-out),transform .72s var(--ease-out)}
.stg.in > *{opacity:1;transform:none}
.stg.in > *:nth-child(1){transition-delay:0ms}
.stg.in > *:nth-child(2){transition-delay:80ms}
.stg.in > *:nth-child(3){transition-delay:160ms}
.stg.in > *:nth-child(4){transition-delay:240ms}
.stg.in > *:nth-child(5){transition-delay:320ms}
.stg.in > *:nth-child(6){transition-delay:400ms}
.stg.in > *:nth-child(7){transition-delay:480ms}
.stg.in > *:nth-child(8){transition-delay:560ms}
/* retire the stagger once the entrance has run, so hovers never lag.
   selector repeats :nth-child so it matches the specificity of the delay rules above */
.stg.settled > *:nth-child(n){transition-delay:0ms !important}

/* ============================================================
   02 - story strip
   ============================================================ */
.story-grid{display:grid;gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(4,1fr)}
.ch{position:relative;border-radius:12px;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);min-height:250px;display:flex;flex-direction:column;
  justify-content:flex-end;padding:20px;isolation:isolate;
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.ch:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.ch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.2s var(--ease)}
.ch:hover img{transform:scale(1.055)}
.ch::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(5,13,22,.94) 6%,rgba(5,13,22,.62) 44%,
    rgba(5,13,22,.24) 76%)}
.ch.plain{background:var(--panel-2)}
.ch.plain::before{background:linear-gradient(140deg,rgba(224,168,94,.10),transparent 62%)}
.ch .fig{position:absolute;right:-14px;top:14px;width:132px;height:132px;z-index:-1;
  color:var(--accent);opacity:.5}
.ch .fig svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1}
.ch .fig .g2{stroke:var(--mist);opacity:.45}
.ch .n{position:absolute;top:16px;left:20px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;color:var(--accent);
  text-shadow:0 1px 2px rgba(3,8,14,.95),0 2px 10px rgba(3,8,14,.85)}
.ch h3{font-size:clamp(14px,1.16vw,17px);letter-spacing:.01em;font-stretch:112%;
  margin-bottom:8px}
.ch p{font-size:13.5px;color:var(--text-secondary);line-height:1.56}
.ch.wide{grid-column:span 2}
.story-close{margin-top:clamp(36px,5vw,58px);text-align:center}
.story-close .big{font-family:var(--display);font-weight:800;font-stretch:118%;
  text-transform:uppercase;font-size:clamp(26px,5.2vw,64px);letter-spacing:-.02em;
  line-height:1.02}
.story-close .big em{font-style:normal;color:var(--accent)}
.story-close img{width:clamp(180px,20vw,258px);margin:clamp(26px,3.4vw,40px) auto 14px}
.story-close .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mist)}
.story-close .btn{margin-top:clamp(26px,3.4vw,40px)}

/* ============================================================
   03 - what is Dholera
   ============================================================ */
.split3{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,80px);
  align-items:start}
.dl{border-top:1px solid var(--line)}
.dl .row{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:18px;
  padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.dl dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0}
.dl dd{margin:0;font-size:15px;color:var(--text-primary)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3vw,34px)}
.chip-z{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 13px;border:1px solid var(--line);border-radius:999px;color:var(--text-secondary);
  transition:border-color .35s var(--ease),color .35s var(--ease)}
.chip-z:hover{border-color:var(--accent);color:var(--text-primary)}

/* ============================================================
   04 - why Dholera counters
   ============================================================ */
.stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,20px)}
/* a four-up row, so four stats never wrap to three plus a lonely one */
.stat-grid.four{grid-template-columns:repeat(4,1fr)}
.stat-grid.four .stat{grid-column:span 1}
.stat{grid-column:span 2;border:1px solid var(--line);border-radius:12px;
  padding:clamp(22px,2.6vw,34px);background:var(--panel);position:relative;overflow:hidden;
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.stat:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.stat::after{content:"";position:absolute;right:-30%;top:-58%;width:78%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(224,168,94,.12),transparent 66%);
  opacity:0;transition:opacity .6s var(--ease)}
.stat:hover::after{opacity:1}
.stat .num{display:flex;flex-wrap:wrap;align-items:baseline;
  font-family:var(--display);font-weight:800;font-stretch:118%;
  font-size:clamp(30px,3.5vw,48px);line-height:1.04;letter-spacing:-.028em;
  color:var(--text-primary)}
.stat.big .num{font-size:clamp(34px,4.3vw,60px)}
.stat .num small{font-size:clamp(12px,.94vw,15px);letter-spacing:.1em;color:var(--accent);
  margin-left:9px;font-stretch:100%;font-weight:600;white-space:nowrap}
.stat p{margin-top:13px;font-size:14.5px;color:var(--text-secondary);line-height:1.58}
.stat .src{margin-top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist);opacity:.78}

/* ============================================================
   05 - the map (the interactive moment)
   ============================================================ */
.map-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(22px,3vw,40px);
  align-items:start;margin-top:clamp(28px,3.4vw,46px)}
.map-box{position:relative}
.sheet-map{margin-top:0}
.map-stack{position:relative;line-height:0}
.map-stack img{width:100%;height:auto;display:block}
/* the highlight layer sits exactly over the printed plan, same aspect ratio */
.hotspots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.zone .zfill{fill:rgba(224,168,94,0);stroke:rgba(224,168,94,0);stroke-width:3;
  transition:fill .5s var(--ease),stroke .5s var(--ease)}
.zone.on .zfill{fill:rgba(224,120,40,.24);stroke:#C25A18;stroke-width:4;
  stroke-linejoin:round}
.zone.hi.on .zfill{fill:rgba(224,120,40,.3)}

/* the scheme picker doubles as the legend: colour, name, size */
.tp-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:clamp(20px,2.4vw,28px)}
.tp{display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left;
  padding:11px 13px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel);color:var(--text-secondary);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.tp i{flex:0 0 auto;width:12px;height:12px;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.tp span{flex:1}
.tp em{font-style:normal;color:var(--mist);opacity:.8;font-size:9.5px;letter-spacing:.06em}
.tp:hover{border-color:var(--line-strong);background:var(--panel-2);color:var(--text-primary)}
.tp[aria-pressed="true"]{border-color:var(--accent);background:rgba(224,168,94,.1);
  color:var(--text-primary)}
.tp[aria-pressed="true"] em{color:var(--accent);opacity:1}
.tp.wide{grid-column:1/-1}

.map-info{border:1px solid var(--line);border-radius:14px;background:var(--canvas-2);
  padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column}
.sec .map-info{background:var(--panel)}

/* the land use plan and its legend */
.lu-wrap{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(24px,3.4vw,52px);
  align-items:start}
.lu-h{font-size:clamp(17px,1.7vw,24px);font-stretch:112%;letter-spacing:-.01em}
.lu-p{margin-top:14px;font-size:15px;color:var(--text-secondary);line-height:1.66;
  max-width:56ch}
.lu-legend{margin-top:clamp(22px,2.6vw,30px);display:grid;grid-template-columns:1fr 1fr;
  gap:2px 18px}
.lu-legend li{display:flex;align-items:center;gap:10px;padding:8px 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-secondary);border-bottom:1px solid var(--line)}
.lu-legend i{flex:0 0 auto;width:13px;height:13px;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
.map-info .mi-k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}
.map-info h3{margin-top:12px;font-size:clamp(19px,1.9vw,26px);font-stretch:112%;
  letter-spacing:-.012em}
.map-info .mi-body{margin-top:14px;font-size:14.5px;color:var(--text-secondary);
  line-height:1.66}
.map-info .mi-meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:7px}
.mi-fade{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mi-fade.on{opacity:1;transform:none}
.mi-fade.d1{transition-delay:70ms}.mi-fade.d2{transition-delay:150ms}
.mi-fade.d3{transition-delay:230ms}
.map-legend{margin-top:clamp(24px,3vw,34px)}
.map-legend .lg-t{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mist);margin-bottom:13px}

/* ============================================================
   Inner page header (every page that is not the home page)
   ============================================================ */
.phead{position:relative;overflow:hidden;background:var(--canvas-2);
  border-bottom:1px solid var(--line);
  padding:clamp(128px,16vh,186px) 0 clamp(46px,7vh,84px)}
.phead-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.26;filter:saturate(.75)}
.phead-scrim{position:absolute;inset:0;
  background:linear-gradient(to top,var(--canvas-2) 2%,rgba(10,28,43,.86) 40%,rgba(10,28,43,.6) 100%)}
.phead > .wrap{position:relative;z-index:2}
.crumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:clamp(16px,2vw,24px)}
.crumb a{color:var(--mist);text-decoration:none;transition:color .3s var(--ease)}
.crumb a:hover{color:var(--accent)}
.crumb span[aria-current]{color:var(--accent)}
.crumb .sep{opacity:.4}
.phead h1{font-size:clamp(30px,5.3vw,66px);letter-spacing:-.022em;max-width:20ch;
  text-wrap:balance}
.phead .lede{margin-top:clamp(16px,2vw,24px);max-width:64ch}
.phead .cta-row{margin-top:clamp(22px,2.8vw,34px);display:flex;gap:12px;flex-wrap:wrap}

/* a quiet label for renders, used wherever an image is an impression not a photo */
.impression{margin-top:10px;font-family:var(--mono);font-size:9px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mist);opacity:.72}

/* ============================================================
   Project cards
   ============================================================ */
.pcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.pcard{display:block;text-decoration:none;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;background:var(--panel);
  transition:border-color .45s var(--ease),transform .45s var(--ease)}
.pcard:hover{border-color:var(--accent);transform:translateY(-5px)}
.pcard-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--canvas-2)}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.045)}
/* the status pill sits over a bright render, so it needs its own ground.
   Specificity here has to beat .pill.building and .pill.open further down. */
.pcard .pcard-img .pill{position:absolute;top:14px;left:14px;
  background:rgba(5,12,20,.82);backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.22);color:var(--text-primary);
  text-shadow:0 1px 3px rgba(3,8,14,.9)}
.pcard .pcard-img .pill.open{color:#A8E3B4;border-color:rgba(168,227,180,.5)}
.pcard .pcard-img .pill.building{color:var(--accent-hover);border-color:rgba(240,190,124,.5)}
.pcard-bd{padding:clamp(20px,2.3vw,28px)}
.pcard-kind{color:var(--accent);font-size:10px;letter-spacing:.16em}
.pcard-bd h3{margin-top:10px;font-size:clamp(18px,1.9vw,26px);font-stretch:112%;
  letter-spacing:-.012em}
.pcard-bd p{margin-top:11px;font-size:14.5px;color:var(--text-secondary);line-height:1.6}
.pcard-go{display:inline-block;margin-top:16px;font-size:10px;letter-spacing:.16em;
  color:var(--accent)}
.pcard:hover .pcard-go .arw{transform:translateX(4px)}
.pcard-go .arw{display:inline-block;transition:transform .34s var(--ease)}

/* a pillar row with no number, used for project selling points */
.pillar .pn:empty{display:none}

/* ============================================================
   06 - what is actually built
   ============================================================ */
.built-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);
  margin-top:clamp(28px,3.4vw,46px)}
.shot{margin:0;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  background:var(--panel);transition:border-color .45s var(--ease)}
.shot:hover{border-color:var(--line-strong)}
.shot img{width:100%;height:auto;display:block;aspect-ratio:16/8.6;object-fit:cover}
.shot figcaption{padding:clamp(18px,2vw,26px)}
.shot figcaption strong{display:block;font-family:var(--display);font-weight:700;
  font-stretch:112%;text-transform:uppercase;letter-spacing:.012em;
  font-size:clamp(14px,1.16vw,17px)}
.shot figcaption span{display:block;margin-top:10px;font-size:14px;
  color:var(--text-secondary);line-height:1.6}
.built-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);
  margin-top:clamp(36px,4.6vw,66px);align-items:start}
.dl.util{margin-top:clamp(18px,2vw,26px)}
.tline{margin-top:clamp(18px,2vw,26px);border-top:1px solid var(--line)}
.tline li{display:grid;grid-template-columns:58px minmax(0,1fr);gap:clamp(12px,1.6vw,22px);
  padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline;
  transition:background .4s var(--ease)}
.tline li:hover{background:rgba(224,168,94,.04)}
.tline .yr{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent)}
.tline p{font-size:14px;color:var(--text-secondary);line-height:1.58}

/* ============================================================
   07 - connectivity ladder
   ============================================================ */
.ladder{border-top:1px solid var(--line)}
/* fixed proportions, not auto tracks: every rung is its own grid, so auto-sized
   columns would land at a different x on each row */
.rung{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr) 128px;
  gap:clamp(16px,2.4vw,36px);
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line);
  align-items:baseline;position:relative;
  transition:padding-left .5s var(--ease),background .45s var(--ease)}
.rung::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .5s var(--ease)}
.rung:hover{padding-left:14px;background:rgba(224,168,94,.035)}
.rung:hover::before{transform:scaleY(1)}
.rung h3{font-size:clamp(15px,1.34vw,19px);font-stretch:112%;letter-spacing:.005em}
.rung p{font-size:14.5px;color:var(--text-secondary);line-height:1.6}
.pill{justify-self:end;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--text-secondary);white-space:nowrap}
.pill.open{color:#9BD8A8;border-color:rgba(155,216,168,.42);background:rgba(155,216,168,.08)}
.pill.building{color:var(--accent);border-color:rgba(224,168,94,.45);
  background:rgba(224,168,94,.08)}
.pill.planned{color:var(--mist);border-color:rgba(168,196,220,.3)}

/* ============================================================
   07 - industries
   ============================================================ */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,20px)}
.ind{border:1px solid var(--line);border-radius:12px;padding:clamp(22px,2.4vw,30px);
  background:var(--panel);position:relative;overflow:hidden;
  transition:border-color .45s var(--ease),transform .45s var(--ease),
    background .45s var(--ease)}
.ind:hover{border-color:var(--line-strong);transform:translateY(-4px);background:var(--panel-2)}
.ind .ico{width:38px;height:38px;color:var(--accent);margin-bottom:18px}
.ind .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3}
.ind h3{font-size:clamp(14px,1.16vw,17px);font-stretch:112%;letter-spacing:.012em}
.ind p{margin-top:11px;font-size:14px;color:var(--text-secondary);line-height:1.58}

/* ============================================================
   08 - investment
   ============================================================ */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,34px)}
.col-card{border:1px solid var(--line);border-radius:14px;padding:clamp(24px,2.8vw,38px);
  background:var(--panel)}
.col-card.warn{background:linear-gradient(170deg,rgba(224,168,94,.07),transparent 58%);
  border-color:rgba(224,168,94,.26)}
.col-card h3{font-size:clamp(15px,1.34vw,19px);font-stretch:112%;margin-bottom:20px}
.tick{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--text-secondary);line-height:1.56}
.tick:last-child{border-bottom:0}
.tick svg{flex:0 0 auto;width:15px;height:15px;margin-top:4px;stroke:var(--accent);
  fill:none;stroke-width:1.7}
.checklist{margin-top:clamp(20px,2.6vw,34px);border:1px solid var(--line);border-radius:14px;
  background:var(--canvas-2);padding:clamp(24px,2.8vw,38px)}
.sec.alt .checklist{background:var(--canvas)}
.checklist h3{font-size:clamp(15px,1.34vw,19px);font-stretch:112%;margin-bottom:18px}
.checklist ol{counter-reset:c;display:grid;grid-template-columns:1fr 1fr;
  gap:2px clamp(20px,3vw,44px)}
.checklist li{counter-increment:c;display:flex;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;color:var(--text-secondary)}
.checklist li::before{content:counter(c,decimal-leading-zero);font-family:var(--mono);
  font-size:10.5px;color:var(--accent);flex:0 0 auto;padding-top:3px;letter-spacing:.1em}
.standing{margin-top:clamp(26px,3.2vw,40px);padding:clamp(20px,2.4vw,30px);
  border-left:2px solid var(--accent);background:rgba(224,168,94,.06);border-radius:0 11px 11px 0;
  font-family:var(--display);font-weight:700;font-stretch:110%;text-transform:none;
  font-size:clamp(17px,1.72vw,25px);line-height:1.3;letter-spacing:-.012em;max-width:42ch}

/* ============================================================
   09 - plots
   ============================================================ */
.plot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,20px)}
.plot{border:1px solid var(--line);border-radius:12px;background:var(--panel);
  overflow:hidden;transition:border-color .45s var(--ease),transform .45s var(--ease)}
.plot:hover{border-color:var(--accent);transform:translateY(-5px)}
.plot .dia{aspect-ratio:16/10;background:var(--canvas-2);border-bottom:1px solid var(--line);
  display:grid;place-items:center;padding:16px}
.plot .dia svg{width:100%;height:100%;overflow:visible}
.plot .dia .pl{fill:rgba(224,168,94,.11);stroke:var(--accent);stroke-width:1.4}
.plot .dia .gd{stroke:rgba(168,196,220,.22);stroke-width:.8;fill:none}
.plot .dia .dim{stroke:rgba(168,196,220,.4);stroke-width:.8;fill:none}
.plot .dia text{fill:var(--mist);font-family:var(--mono);font-size:8px;letter-spacing:.1em}
.plot .bd{padding:20px}
.plot h3{font-size:14px;font-stretch:112%;letter-spacing:.015em}
.plot p{margin-top:10px;font-size:13.5px;color:var(--text-secondary);line-height:1.56}

/* ============================================================
   10 - why nextera
   ============================================================ */
.pillars{border-top:1px solid var(--line)}
.pillar{display:grid;grid-template-columns:44px minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(14px,2.4vw,40px);padding:clamp(22px,2.6vw,34px) 0;
  border-bottom:1px solid var(--line);align-items:baseline;
  transition:background .45s var(--ease)}
.pillar:hover{background:rgba(224,168,94,.035)}
.pillar .pn{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--accent)}
.pillar h3{font-size:clamp(17px,2.1vw,30px);font-stretch:114%;letter-spacing:-.014em}
.pillar p{font-size:clamp(14.5px,1.16vw,17px);color:var(--text-secondary);line-height:1.6}

/* ============================================================
   11 - insights tiles
   ============================================================ */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
.tile{display:block;text-decoration:none;border:1px solid var(--line);border-radius:11px;
  padding:clamp(18px,2vw,26px);background:var(--panel);position:relative;
  transition:border-color .42s var(--ease),transform .42s var(--ease),
    background .42s var(--ease)}
.tile:hover{border-color:var(--accent);transform:translateY(-4px);background:var(--panel-2)}
.tile .tn{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--mist);
  opacity:.78}
.tile h3{margin-top:14px;font-size:13.5px;font-stretch:112%;letter-spacing:.02em}
.tile p{margin-top:9px;font-size:13px;color:var(--text-secondary);line-height:1.54}
.tile .arw{position:absolute;right:18px;bottom:18px;color:var(--accent);opacity:0;
  transform:translateX(-6px);transition:opacity .42s var(--ease),transform .42s var(--ease)}
.tile:hover .arw{opacity:1;transform:none}

/* ============================================================
   12 - updates feed
   ============================================================ */
.feed{border-top:1px solid var(--line);max-width:88ch}
.item{display:grid;grid-template-columns:132px minmax(0,1fr);gap:clamp(16px,2.4vw,38px);
  padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.item .dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent)}
.item p{font-size:clamp(14.5px,1.18vw,17px);color:var(--text-primary);line-height:1.6}

/* ============================================================
   13 - projects
   ============================================================ */
.proj{border:1px solid var(--line);border-radius:14px;background:var(--panel);
  padding:clamp(26px,3.4vw,50px)}
.proj .big{font-family:var(--display);font-weight:800;font-stretch:116%;text-transform:uppercase;
  font-size:clamp(22px,3.4vw,42px);letter-spacing:-.02em;line-height:1.05;max-width:20ch}
.proj p{margin-top:18px;font-size:clamp(15px,1.24vw,18px);color:var(--text-secondary);
  max-width:56ch;line-height:1.62}
.standard{margin-top:clamp(28px,3.4vw,44px);display:grid;
  grid-template-columns:repeat(8,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:11px;overflow:hidden}
.standard span{background:var(--canvas-2);padding:18px 12px;text-align:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-secondary);transition:background .4s var(--ease),color .4s var(--ease)}
.standard span:hover{background:var(--panel-2);color:var(--accent)}

/* ============================================================
   14 - FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line);max-width:92ch}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;display:flex;align-items:flex-start;gap:18px;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:clamp(18px,2.2vw,26px) 0;
  font-family:var(--display);font-weight:700;font-stretch:112%;text-transform:none;
  font-size:clamp(16px,1.5vw,22px);letter-spacing:-.01em;line-height:1.32;
  color:var(--text-primary);transition:color .35s var(--ease)}
.qa button:hover{color:var(--accent)}
.qa .ic{flex:0 0 auto;width:17px;height:17px;margin-top:5px;position:relative}
.qa .ic::before,.qa .ic::after{content:"";position:absolute;background:var(--accent);
  transition:transform .42s var(--ease),opacity .42s var(--ease)}
.qa .ic::before{left:0;top:8px;width:17px;height:1.4px}
.qa .ic::after{left:8px;top:0;width:1.4px;height:17px}
.qa[data-open="1"] .ic::after{transform:scaleY(0);opacity:0}
.qa .ans{overflow:hidden;height:0;transition:height .5s var(--ease)}
.qa .ans p{padding:0 0 clamp(20px,2.4vw,28px) 35px;font-size:15px;
  color:var(--text-secondary);line-height:1.68;max-width:70ch}

/* ============================================================
   15 - enquiry
   ============================================================ */
.cta-sec{position:relative;overflow:hidden;background:var(--canvas-2)}
.cta-bg{position:absolute;inset:0;background-size:cover;background-position:center 34%;
  opacity:.17;filter:saturate(.7)}
.cta-bg-scrim{position:absolute;inset:0;
  background:linear-gradient(to right,var(--canvas-2) 8%,rgba(10,28,43,.82) 52%,
    rgba(10,28,43,.6) 100%)}
.cta-sec > .wrap{position:relative;z-index:2}
.form-wrap{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(26px,4vw,64px);
  align-items:start;margin-top:clamp(28px,3.4vw,46px)}
form.enq{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px)}
.fld{display:flex;flex-direction:column;gap:8px}
.fld.full{grid-column:1/-1}
.fld label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist)}
.fld input,.fld select{background:rgba(6,19,31,.72);border:1px solid var(--line);
  border-radius:9px;padding:14px 15px;font-size:15px;color:var(--text-primary);
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.fld select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23A9C2D8' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.fld input:hover,.fld select:hover{border-color:var(--line-strong)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--accent);
  background:rgba(6,19,31,.92)}
.fld input::placeholder{color:rgba(159,178,196,.5)}
form.enq .sub-row{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:6px}
.privacy{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mist);opacity:.8;line-height:1.8}
.done{grid-column:1/-1;border:1px solid rgba(224,168,94,.4);border-radius:12px;
  background:rgba(224,168,94,.08);padding:clamp(22px,2.6vw,32px)}
.done h3{font-size:clamp(16px,1.5vw,21px);font-stretch:112%}
.done p{margin-top:11px;font-size:14.5px;color:var(--text-secondary);line-height:1.6}
.acts{display:flex;flex-direction:column;gap:11px}
.act{display:flex;align-items:center;gap:15px;text-decoration:none;
  border:1px solid var(--line);border-radius:12px;padding:17px 19px;background:var(--panel);
  transition:border-color .42s var(--ease),transform .42s var(--ease),
    background .42s var(--ease)}
.act:hover{border-color:var(--accent);transform:translateX(4px);background:var(--panel-2)}
.act svg{flex:0 0 auto;width:19px;height:19px;color:var(--accent);fill:none;
  stroke:currentColor;stroke-width:1.5}
.act .at{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.act .as{display:block;margin-top:4px;font-size:13px;color:var(--text-secondary);
  letter-spacing:0;text-transform:none;font-family:var(--body)}

/* ============================================================
   Footer
   ============================================================ */
footer{position:relative;z-index:2;background:rgba(6,19,31,.9);
  border-top:1px solid var(--line);padding:clamp(52px,7vw,84px) 0 34px}
.f-top{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px)}
.f-top.f-wide{grid-template-columns:1.25fr repeat(4,1fr);gap:clamp(20px,2.4vw,38px)}
.f-brand img{width:clamp(160px,15vw,196px);margin-bottom:18px}
.f-brand .line{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}
.f-col h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist);font-weight:500;margin-bottom:15px}
.f-col a{display:block;text-decoration:none;font-size:14px;color:var(--text-secondary);
  padding:5px 0;transition:color .32s var(--ease),transform .32s var(--ease)}
.f-col a:hover{color:var(--accent);transform:translateX(3px)}
.f-legal{margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--line);
  display:grid;gap:14px}
.f-legal p{font-size:12.5px;color:var(--text-secondary);opacity:.8;line-height:1.7;
  max-width:104ch}
.f-legal .srcs{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mist);opacity:.8;line-height:2}
.f-legal .srcs a{color:var(--mist);text-decoration:none;border-bottom:1px solid var(--line)}
.f-legal .srcs a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.f-end{margin-top:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist);opacity:.78}

/* whisper-level drifting motes, one living element per dark section */
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.motes i{position:absolute;width:2px;height:2px;border-radius:50%;
  background:var(--accent);opacity:0}
.motes.on i{animation:mote 19s linear infinite}
@keyframes mote{0%{opacity:0;transform:translateY(24px)}
  14%{opacity:.4}72%{opacity:.26}100%{opacity:0;transform:translateY(-150px)}}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .story-grid{grid-template-columns:repeat(2,1fr)}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .plot-grid{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .map-wrap{grid-template-columns:1fr}
  .lu-wrap{grid-template-columns:1fr}
  .lu-legend{grid-template-columns:1fr 1fr}
  .split3{grid-template-columns:1fr}
  .form-wrap{grid-template-columns:1fr}
  .f-top,.f-top.f-wide{grid-template-columns:1fr 1fr}
  .standard{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1180px){
  .ndrop-panel.two{grid-template-columns:1fr;min-width:300px}
}
@media (max-width:860px){
  .nav-links,.nav .nav-cta{display:none}
  .nav-burger{display:flex}
  .two-col{grid-template-columns:1fr}
  .built-grid,.built-split{grid-template-columns:1fr}
  .checklist ol{grid-template-columns:1fr}
  .stat-grid,.stat-grid.four{grid-template-columns:repeat(2,1fr)}
  .stat,.stat.big{grid-column:span 1}
  .pillar{grid-template-columns:auto 1fr;row-gap:8px}
  .pillar .pn{grid-row:1;grid-column:1}
  .pillar h3{grid-row:1;grid-column:2}
  .pillar p{grid-row:2;grid-column:2}
  .sec-head.duo{grid-template-columns:1fr}
  .sec-head.duo .lede{margin-top:18px;padding-bottom:0}
  .rung{grid-template-columns:1fr;row-gap:9px}
  .rung .pill{justify-self:start}
  .item{grid-template-columns:1fr;row-gap:7px}
  .ch.wide{grid-column:span 1}
}
@media (max-width:560px){
  .story-grid{grid-template-columns:1fr}
  .tp-list{grid-template-columns:1fr}
  .lu-legend{grid-template-columns:1fr}
  .plot-grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:1fr}
  form.enq{grid-template-columns:1fr}
  .f-top,.f-top.f-wide{grid-template-columns:1fr}
  .standard{grid-template-columns:repeat(2,1fr)}
  .dl .row{grid-template-columns:1fr;row-gap:5px}
  .hero-static .cta-row{flex-direction:column;align-items:stretch}
  .hero-static .cta-row .btn{width:100%}
  .pillar{grid-template-columns:auto 1fr}
}

/* short screens: the hero overlays have no room */
@media (max-height:560px){.cue,.hud{display:none}}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .qa button{min-height:44px}
  .nav-links a{padding:11px 0}
}

/* ============================================================
   THE FIVE STATIC-HERO GATES.
   These five strings must stay character-for-character identical
   to the GATES array in the script below.
   ============================================================ */
@media (max-width:720px){.hero{display:none}.hero-static{display:flex}}
@media (orientation:portrait) and (max-width:1024px){.hero{display:none}.hero-static{display:flex}}
@media (orientation:portrait) and (pointer:coarse){.hero{display:none}.hero-static{display:flex}}
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero{display:none}.hero-static{display:flex}}
@media (prefers-reduced-motion:reduce){.hero{display:none}.hero-static{display:flex}}

/* ============================================================
   Reduced motion, honored completely
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important;
    scroll-behavior:auto !important}
  .rv,.stg > *{opacity:1 !important}
  .rv{transform:none !important}
  .stg > *{transform:none !important}
  .rule path{stroke-dashoffset:0 !important}
  .mi-fade{opacity:1 !important;transform:none !important}
  .motes{display:none}
  .env-grid,.env-glow{animation:none !important}
  /* positional transforms re-applied so nothing lands off screen */
  .band{transform:translateX(-50%) !important}
  .ring,.cue{transform:translateX(-50%) !important}
  .rung::before{transform:scaleY(0) !important}
}