/* ═══════════════════════════════════════════════════════
   JD Software Solutions — studio site
   Design: obsidian canvas · JD green accent · bone hard-cuts
   ═══════════════════════════════════════════════════════ */

:root{
  --ink:#06080f;
  --ink2:#0b0f1c;
  --navy:#111a31;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.055);
  --txt:#eef1f6;
  --dim:#98a1b4;
  --dim2:#6b7488;
  --acc:#5fd694;
  --acc2:#4ea76e;
  --acc-dk:#1d7a4c;
  /* gold is spent ONLY where money lives — AED figures, prices, the ledger.
     Everything else stays green; the restraint is the statement. */
  --gold:#e6c36b;
  --gold-deep:#8a6a15;
  --paper:#f2f0ea;
  --paper-ink:#0d1220;
  --red:#ff6b6b;
  --amber:#f5b544;
  --glass:rgba(255,255,255,.045);

  --f-disp:"Bricolage Grotesque","Inter Tight",system-ui,sans-serif;
  --f-body:"Inter Tight",system-ui,-apple-system,sans-serif;
  --f-ser:"Fraunces",Georgia,serif;
  --f-mono:"Geist Mono",ui-monospace,monospace;

  --pad:clamp(20px,5vw,90px);
  --maxw:1400px;
  --ease:cubic-bezier(.22,1,.36,1);
}
html[dir="rtl"]{ --f-disp:"IBM Plex Sans Arabic",sans-serif; --f-body:"IBM Plex Sans Arabic",sans-serif; --f-ser:"IBM Plex Sans Arabic",serif; }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--ink);color:var(--txt);
  font-family:var(--f-body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  hanging-punctuation:first last;
  font-kerning:normal;font-variant-ligatures:common-ligatures contextual;
}
.h2,.hero-title,.statement,.ct-title,.tk-type,.nb b{text-wrap:balance}
.hero-sub,.case-lede,.st-lede,.ct-lede,.cc p,.bx p,.mg p{text-wrap:pretty}
/* ── Arabic / RTL typography hardening ── */
html[dir="rtl"]{font-size:17.5px}
html[dir="rtl"] *{letter-spacing:normal!important}
html[dir="rtl"] .hero-title,html[dir="rtl"] .h2,html[dir="rtl"] .statement,
html[dir="rtl"] .ct-title,html[dir="rtl"] .tk-type{letter-spacing:0!important;line-height:1.18}
html[dir="rtl"] [data-i18n]{text-transform:none;hyphens:none}
html[dir="rtl"] .nav-links a::after,html[dir="rtl"] .ct-alt a{text-underline-offset:6px}
html[dir="rtl"] .eyebrow,html[dir="rtl"] .chap,html[dir="rtl"] .nb-label,html[dir="rtl"] .cap-title{letter-spacing:.05em!important}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--acc);color:#04240f}

.skip{position:fixed;left:-999px;top:10px;z-index:99999;background:var(--acc);color:#04240f;padding:10px 16px;border-radius:8px}
.skip:focus{left:10px}

/* ─── ambient layers ─── */
#stage{position:fixed;inset:0;z-index:0;pointer-events:none}
#stage canvas{width:100%;height:100%;display:block}
/* readability scrim over the city: protects the left text column, nav and footer edge */
#stage .veil{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(6,8,15,.97) 0%, rgba(6,8,15,.93) 30%, rgba(6,8,15,.62) 52%, rgba(6,8,15,.22) 74%, rgba(6,8,15,0) 100%),
    linear-gradient(to bottom, rgba(6,8,15,.92) 0%, rgba(6,8,15,.25) 16%, rgba(6,8,15,0) 42%, rgba(6,8,15,.30) 80%, rgba(6,8,15,.96) 100%);
}
html[dir="rtl"] #stage .veil{transform:scaleX(-1)}
/* past the hero the globe is paused (a frozen frame), so flatten it behind
   the content instead of letting it compete with the copy */
#stage .scrim{position:absolute;inset:0;pointer-events:none;background:#06080f;
  opacity:0;transition:opacity .5s var(--ease)}
body.past-hero #stage .scrim{opacity:.88}
body.stage-grab #stage{pointer-events:auto;cursor:grab}
body.stage-grab.grabbing #stage{cursor:grabbing}

.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}}

#progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:900;background:rgba(255,255,255,.06);
  contain:strict;will-change:transform}
#progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc-dk),var(--acc));box-shadow:0 0 14px var(--acc)}

/* ─── boot sequence ─── */
#loader{position:fixed;inset:0;z-index:99998;background:var(--ink);
  display:grid;place-items:center;padding:var(--pad);
  transition:opacity .5s var(--ease),visibility .5s;cursor:pointer}
#loader.done{opacity:0;visibility:hidden}
/* the boot frame — same corner brackets the live HUD uses, so the site
   appears to be "already booted" into the same chrome */
.ld-inner{width:min(92vw,560px);position:relative;padding:26px 28px 22px}
.ld-inner::before,.ld-inner::after{content:"";position:absolute;width:16px;height:16px;
  border:1px solid rgba(95,214,148,.5)}
.ld-inner::before{top:0;left:0;border-width:1px 0 0 1px}
.ld-inner::after{bottom:0;right:0;border-width:0 1px 1px 0}
.ld-top{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.ld-logo{width:26px;border-radius:8px;opacity:.95;flex:none}
.ld-id{font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;color:var(--dim2);text-transform:uppercase}
.ld-id b{color:var(--acc);font-weight:400}
.ld-log{font-family:var(--f-mono);font-size:11.5px;line-height:1.85;color:var(--dim2);
  min-height:13em;letter-spacing:.02em;white-space:nowrap;overflow:hidden}
.ld-log div{opacity:0;animation:ldIn .18s var(--ease) forwards}
.ld-log .ok{color:var(--acc)}
.ld-log .k{color:var(--dim)}
@keyframes ldIn{to{opacity:1}}
.ld-cursor{display:inline-block;width:7px;height:13px;background:var(--acc);
  vertical-align:-2px;animation:ldBlink 1s steps(1) infinite}
@keyframes ldBlink{50%{opacity:0}}
.ld-bar{height:1px;background:var(--line);margin-top:20px;overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:var(--acc);
  box-shadow:0 0 12px var(--acc);transition:width .18s linear}
.ld-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:11px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim2);text-transform:uppercase}
.ld-foot b{color:var(--acc);font-weight:400;font-variant-numeric:tabular-nums}
.ld-skip{opacity:0;transition:opacity .4s}
#loader.armed .ld-skip{opacity:1}
/* final beat: the whole frame punches out as the hero takes over */
#loader.done .ld-inner{transform:scale(1.04);transition:transform .5s var(--ease)}

/* ─── nav ─── */
#nav{position:fixed;top:0;left:0;right:0;z-index:800;display:flex;align-items:center;gap:26px;
  padding:18px var(--pad);transition:padding .4s var(--ease),background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent}
body.scrolled #nav{padding:12px var(--pad);background:rgba(6,8,15,.72);backdrop-filter:blur(10px);border-bottom-color:var(--line2)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--f-disp);font-weight:600;letter-spacing:-.02em;font-size:16px}
.brand img{width:30px;border-radius:9px}
.brand em{font-style:normal;font-weight:300;color:var(--dim);margin-left:.32em}
.nav-links{display:flex;gap:28px;margin-left:auto;font-size:14px;color:var(--dim)}
.nav-links a{position:relative;padding:4px 0;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav-links a:hover{color:var(--txt)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-right{display:flex;align-items:center;gap:12px}
.ghost-btn{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;font-size:13px;color:var(--dim);transition:.3s;display:grid;place-items:center}
.ghost-btn:hover{border-color:var(--acc);color:var(--acc)}
.ghost-btn.sm{width:30px;height:30px;font-size:11px}
.ghost-btn.on{border-color:var(--acc);color:var(--acc)}
/* sound toggle — four bars that only dance while sound is actually on */
.ghost-btn.snd{gap:2.5px;align-items:flex-end;padding-bottom:11px}
.ghost-btn.snd i{width:2px;height:4px;border-radius:2px;background:var(--dim2);transition:height .3s,background .3s}
.ghost-btn.snd:hover i{background:var(--txt)}
.ghost-btn.snd.on i{background:var(--acc);animation:eq 1.1s ease-in-out infinite}
.ghost-btn.snd.on i:nth-child(2){animation-delay:.14s}
.ghost-btn.snd.on i:nth-child(3){animation-delay:.28s}
.ghost-btn.snd.on i:nth-child(4){animation-delay:.42s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
@media (prefers-reduced-motion:reduce){.ghost-btn.snd.on i{animation:none;height:8px}}
.pill-btn{border:1px solid var(--line);border-radius:100px;padding:10px 20px;font-size:14px;position:relative;overflow:hidden;transition:color .35s,border-color .35s}
.pill-btn span{position:relative;z-index:2}
.pill-btn::before{content:"";position:absolute;inset:0;background:var(--acc);transform:translateY(101%);transition:transform .5s var(--ease)}
.pill-btn:hover{color:#04240f;border-color:var(--acc)}
.pill-btn:hover::before{transform:translateY(0)}
#burger{display:none;width:38px;height:38px;flex-direction:column;justify-content:center;gap:6px;align-items:center}
#burger i{width:20px;height:1.5px;background:var(--txt);transition:.35s var(--ease)}
body.menu-open #burger i:first-child{transform:translateY(3.75px) rotate(45deg)}
body.menu-open #burger i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
#mobileMenu{position:fixed;inset:0;z-index:790;background:rgba(6,8,15,.97);backdrop-filter:blur(24px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad)}
#mobileMenu a{font-family:var(--f-disp);font-size:clamp(30px,8vw,48px);font-weight:300;letter-spacing:-.03em;padding:10px 0;border-bottom:1px solid var(--line2)}
#mobileMenu .mm-cta{color:var(--acc);border:0;margin-top:20px}

/* ─── shared ─── */
.sec{position:relative;z-index:5;padding:clamp(90px,13vh,150px) var(--pad);max-width:var(--maxw);margin:0 auto}
.chap{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.3em;color:var(--dim2);margin-bottom:38px}
.chap i{width:34px;height:1px;background:var(--acc);flex:none}
/* display sizes run deliberately large — the contrast between a 82px headline
   and a 9px mono channel label is the whole typographic idea */
.h2{font-family:var(--f-disp);font-weight:300;font-size:clamp(32px,6vw,82px);line-height:.99;
  letter-spacing:-.042em;margin:0 0 34px;max-width:16ch;
  font-variation-settings:"opsz" 72,"wdth" 100}
.h2 em,.accent-ln em{font-family:var(--f-ser);font-style:italic;color:var(--acc);font-weight:400}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.26em;color:var(--dim);margin-bottom:30px;text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc);animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:100px;font-size:15px;font-weight:500;
  position:relative;overflow:hidden;transition:transform .3s var(--ease),color .35s,border-color .35s;will-change:transform}
.btn span,.btn i{position:relative;z-index:2}
.btn .arr{font-style:normal;transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.primary{background:var(--acc);color:#04240f}
.btn.primary::before{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);transition:transform .5s var(--ease)}
.btn.primary:hover::before{transform:translateY(0)}
.btn.ghost{border:1px solid var(--line);color:var(--txt)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc)}
.btn.big{padding:18px 34px;font-size:16px}

/* reveal — CSS transitions, NOT JS tweens. GSAP entrances freeze mid-flight
   (visible but blurred) whenever rAF is throttled: embedded panes, background
   tabs, low-power mode. Compositor-driven transitions finish regardless, and
   the .lit end-state is plain CSS, so the worst case is "appears late",
   never "stuck blurry". */
[data-reveal]{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
[data-reveal].lit{opacity:1;transform:none;filter:none}
body.reduced [data-reveal],body.loaded.no-motion [data-reveal]{opacity:1!important;transform:none!important;filter:none!important;transition:none}
.split-c{display:inline-block;will-change:transform}
.split-l{display:inline-block;overflow:hidden;vertical-align:top}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;z-index:5;min-height:100svh;display:flex;align-items:center;padding:120px var(--pad) 90px;max-width:var(--maxw);margin:0 auto}
.hero-grid{width:100%;position:relative}
.hero-copy{max-width:min(760px,64%)}
.hero-title{font-family:var(--f-disp);font-weight:280;font-size:clamp(42px,7.9vw,110px);line-height:.93;
  letter-spacing:-.052em;margin:0 0 32px;
  font-variation-settings:"wght" var(--hwt,300),"opsz" 96,"wdth" 100}
.hero-title .ln{display:block}
.hero-title .accent-ln em{font-size:1.02em}
.hero-sub{font-size:clamp(15px,1.65vw,19px);color:var(--dim);max-width:54ch;margin:0 0 38px;line-height:1.62}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px}
.hero-proof{display:flex;gap:clamp(24px,4vw,58px);flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--line2)}
.hp{display:flex;flex-direction:column;gap:5px}
.hp b{font-family:var(--f-disp);font-size:clamp(26px,3.4vw,42px);font-weight:300;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.hp span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;color:var(--dim2);text-transform:uppercase}
.hero-live{margin-top:26px;font-family:var(--f-mono);font-size:11px;color:var(--dim2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hero-live b{color:var(--acc);font-variant-numeric:tabular-nums}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:pulse 2s infinite}
.hero-stagehint{position:absolute;right:0;bottom:8px;display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--dim2);text-transform:uppercase}
.sh-line{width:40px;height:1px;background:var(--line)}
.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.3em;color:var(--dim2);text-transform:uppercase}
.scroll-cue i{width:1px;height:44px;background:linear-gradient(var(--acc),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ═══════════ TAPE ═══════════ */
.tape{position:relative;z-index:5;overflow:hidden;border-block:1px solid var(--line2);padding:18px 0;background:rgba(255,255,255,.015)}
.tape-track{display:flex;width:max-content;will-change:transform}
.tape span{font-family:var(--f-disp);font-size:clamp(15px,2vw,24px);font-weight:400;letter-spacing:-.01em;white-space:nowrap;padding-right:0;color:var(--dim)}
/* each phrase is its own <b> so it can be translated — keep it looking like plain text */
.tape b{font-weight:inherit}
.tape i{font-style:normal;color:var(--acc);margin:0 26px;font-size:.6em;vertical-align:middle}

/* ═══════════ MANIFESTO ═══════════ */
.statement{font-family:var(--f-disp);font-weight:300;font-size:clamp(26px,4.2vw,54px);line-height:1.14;letter-spacing:-.03em;max-width:22ch;margin:0 0 70px}
.statement em{font-family:var(--f-ser);font-style:italic;color:var(--acc);display:inline}
.statement span:last-child{color:var(--dim);display:block;font-size:.5em;line-height:1.5;max-width:38ch;margin-top:28px;letter-spacing:-.01em}
.man-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2)}
.mg{background:var(--ink);padding:34px 30px}
.mg b{font-family:var(--f-mono);font-size:11px;color:var(--acc);letter-spacing:.2em}
.mg h4{font-family:var(--f-disp);font-weight:400;font-size:20px;letter-spacing:-.02em;margin:16px 0 12px}
.mg p{color:var(--dim);font-size:15px;margin:0;line-height:1.6}

/* ═══════════ TAKEOVER ═══════════ */
.takeover{position:relative;z-index:5;height:100svh;overflow:hidden}
.tk-inner{position:relative;height:100%;display:grid;place-items:center}
.tk-type{position:absolute;z-index:3;text-align:center;font-family:var(--f-disp);font-weight:300;
  font-size:clamp(38px,10vw,148px);line-height:.92;letter-spacing:-.05em;pointer-events:none;width:100%}
.tk-type span{display:block}
.tk-a{transform:translateY(0)}
.tk-b{color:var(--acc)}
/* base width is near-fullscreen; the timeline scales it DOWN to start and
   back to 1, so the zoom genuinely ends wall-to-wall instead of ~70% */
.tk-media{margin:0;width:min(88vw,1680px);max-width:none;position:relative;border-radius:12px;overflow:hidden;box-shadow:0 50px 120px rgba(0,0,0,.7);border:1px solid var(--line)}
/* height-capped: at 88vw a 16:10 screenshot is taller than a 1080p-minus-
   chrome viewport, which pushed the caption clean out of the section */
.tk-media img{width:100%;display:block;max-height:80svh;object-fit:cover;object-position:top center}
.tk-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  background:linear-gradient(transparent,rgba(0,0,0,.85));color:var(--dim);text-transform:uppercase}

/* ═══════════ CASE ═══════════ */
.case-head{display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(30px,6vw,80px);align-items:end;margin-bottom:52px}
.case-client{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--acc);margin-bottom:20px;text-transform:uppercase}
.case-lede{color:var(--dim);font-size:clamp(15px,1.5vw,18px);line-height:1.65;margin:0}
.case-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2);margin-bottom:64px}
.case-meta div{background:var(--ink);padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.case-meta span{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--dim2);text-transform:uppercase}
.case-meta b{font-weight:500;font-size:15px}
.case-meta .ok{color:var(--acc)}
.built{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;perspective:1200px}
/* NO backdrop-filter here: it is a grouping property that forces the used
   transform-style to flat and silently kills every translateZ layer below.
   The translucent --glass background carries the look on its own. */
.bx{position:relative;padding:34px 30px 30px;border:1px solid var(--line2);border-radius:14px;background:var(--glass);
  transform-style:preserve-3d;transition:border-color .4s,background .4s,box-shadow .4s}
.bx:hover{border-color:rgba(95,214,148,.35);background:rgba(95,214,148,.045);
  box-shadow:0 34px 90px rgba(0,0,0,.55),inset 0 0 0 1px rgba(95,214,148,.12)}
/* real depth: the content floats on layers above the glass while the tilt
   runs, so the card reads as a hologram rather than a flat tile */
.bx .bx-n{display:inline-block;transform:translateZ(52px)}   /* inline spans can't transform */
.bx h3{transform:translateZ(40px)}
.bx p{transform:translateZ(26px)}
.bx ul{transform:translateZ(14px)}
.bx .bx-n,.bx h3,.bx p,.bx ul{will-change:transform}
/* holographic sheen sweeping across on hover */
.bx::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.075) 50%,transparent 62%);
  background-size:240% 100%;background-position:120% 0;transition:background-position 1s var(--ease)}
.bx:hover::after{background-position:-120% 0}
@media (prefers-reduced-motion:reduce){
  .bx .bx-n,.bx h3,.bx p,.bx ul{transform:none}
}
.bx-n{font-family:var(--f-mono);font-size:11px;color:var(--acc);letter-spacing:.2em}
.bx h3{font-family:var(--f-disp);font-weight:400;font-size:23px;letter-spacing:-.025em;margin:14px 0 12px}
.bx p{color:var(--dim);font-size:14.5px;line-height:1.6;margin:0 0 18px}
.bx ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line2);padding-top:14px;display:flex;flex-direction:column;gap:7px}
.bx li{font-size:13px;color:var(--dim2);padding-inline-start:16px;position:relative}
.bx li::before{content:"";position:absolute;inset-inline-start:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--acc);opacity:.7}

/* ═══════════ NUMBERS (bone hard-cut) ═══════════ */
.numbers{position:relative;z-index:6;background:var(--paper);color:var(--paper-ink);padding:clamp(70px,10vh,120px) var(--pad)}
.nb-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.32em;color:rgba(13,18,32,.5);margin-bottom:46px;max-width:var(--maxw);margin-inline:auto}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(24px,4vw,50px);max-width:var(--maxw);margin:0 auto 60px}
.nb b{display:block;font-family:var(--f-disp);font-weight:300;font-size:clamp(38px,5.6vw,80px);line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.nb span{display:block;margin-top:12px;font-size:14.5px;color:rgba(13,18,32,.62);max-width:19ch}
.nb-foot{display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;max-width:var(--maxw);margin:0 auto;padding-top:38px;border-top:1px solid rgba(13,18,32,.14)}
.nb-ba span{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:rgba(13,18,32,.5);text-transform:uppercase;margin-bottom:8px}
.nb-ba b{font-family:var(--f-disp);font-weight:400;font-size:clamp(20px,2.5vw,31px);letter-spacing:-.03em}
.nb-ba b i{font-style:normal;font-size:.5em;color:rgba(13,18,32,.45)}
.nb-ba .down{color:var(--acc-dk)}
.nb-arrow{font-size:26px;color:rgba(13,18,32,.35)}
.nb-note{flex:1 1 260px;font-size:12px;color:rgba(13,18,32,.45);margin:0;min-width:220px;line-height:1.5}

/* ═══════════ MAKE IT YOURS ═══════════ */
.mine{position:relative;z-index:5}
.mine-head{max-width:64ch;margin-bottom:clamp(28px,4vh,44px)}
.mine-lede{color:var(--dim);font-size:clamp(15px,1.5vw,18px);line-height:1.65;margin:14px 0 0}
.mine-form{display:flex;gap:10px;flex-wrap:wrap;max-width:640px}
.mine-form input{flex:1 1 320px;min-width:0;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:12px;padding:15px 18px;color:var(--txt);
  font:inherit;font-size:15px;outline:none;transition:border-color .3s}
.mine-form input:focus{border-color:var(--acc)}
.mine-form button{padding:0 24px;border:1px solid var(--acc);border-radius:12px;
  background:var(--acc);color:#04240f;font-weight:500;font-size:14px;white-space:nowrap;transition:.3s}
.mine-form button:hover{background:#fff;border-color:#fff}
.mine-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.mine-chip{padding:8px 14px;border:1px solid var(--line2);border-radius:100px;
  font-size:13px;color:var(--dim);transition:.25s}
.mine-chip:hover{border-color:var(--acc);color:var(--acc)}
.mine-stage{margin-top:clamp(30px,4vh,52px);min-height:120px}
.mine-empty{border:1px dashed var(--line);border-radius:16px;padding:40px;
  text-align:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim2)}

/* the live provisioning log */
.mine-boot{border:1px solid var(--line2);border-radius:16px;padding:22px 24px;
  font-family:var(--f-mono);font-size:12px;line-height:2;background:rgba(255,255,255,.02)}
.mine-boot div{display:flex;align-items:center;gap:12px;color:var(--dim2);
  opacity:0;animation:ldIn .2s var(--ease) forwards}
.mine-boot span{color:var(--dim);min-width:150px}
.mine-boot em{flex:1;font-style:normal;color:var(--dim2)}
.mine-boot .ok{color:var(--acc)}

/* the morphed Command Center (flow variant of the descent console) */
.mine-console{border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,rgba(95,214,148,.06),transparent 60%),rgba(255,255,255,.015)}
.mine-console .dc-bar{padding:18px 22px;border-bottom:1px solid var(--line2)}
.mine-console .dc-grid{border:0;border-bottom:1px solid var(--line2)}
.mine-badge{margin-inline-start:auto;font-family:var(--f-mono);font-size:8.5px;
  letter-spacing:.2em;color:var(--amber);border:1px solid rgba(245,181,68,.4);
  border-radius:100px;padding:4px 10px;white-space:nowrap}
.mine-brief{padding:18px 22px;border-bottom:1px solid var(--line2);
  background:rgba(95,214,148,.03)}
.mine-brief-k{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;
  color:var(--acc);margin-bottom:9px}
.mine-brief p{margin:0;font-size:15px;line-height:1.6;color:var(--txt);max-width:80ch}
.mine-console .dc-note{padding:16px 22px}

/* live branch stepper */
.mine-steer{display:flex;align-items:center;gap:12px;padding:12px 22px;border-bottom:1px solid var(--line2)}
.mine-steer-k{font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;color:var(--dim2)}
.mine-step{width:26px;height:26px;border:1px solid var(--line);border-radius:8px;
  color:var(--acc);font-size:16px;line-height:1;transition:.25s}
.mine-step:hover{border-color:var(--acc);background:rgba(95,214,148,.1)}
.mine-steer b{font-family:var(--f-disp);font-weight:400;font-size:16px;letter-spacing:-.02em;
  min-width:8ch;font-variant-numeric:tabular-nums}
.mine-steer b span{color:var(--dim)}

/* per-domain AI staff roster */
.mine-agents{padding:16px 22px;border-bottom:1px solid var(--line2)}
.mine-agents-k{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;
  color:var(--acc);margin-bottom:12px}
.mine-agents-row{display:flex;gap:8px;flex-wrap:wrap}
.mine-agent{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;
  border:1px solid var(--line2);border-radius:100px;background:var(--glass)}
.mine-agent i{width:6px;height:6px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 8px var(--acc);animation:pulse 2.4s infinite;flex:none}
.mine-agent em{font-style:normal;font-size:12.5px;color:var(--dim)}

/* indicative cost + share */
.mine-cost{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:15px 22px;
  border-bottom:1px solid var(--line2);background:rgba(95,214,148,.03)}
.mine-cost>span{font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim2)}
.mine-cost b{font-family:var(--f-disp);font-weight:400;font-size:clamp(16px,1.9vw,22px);letter-spacing:-.02em}
.mine-cost b i{font-style:normal;font-size:13px;color:var(--dim2)}
.mine-cost-link{margin-inline-start:auto;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.14em;color:var(--acc);border-bottom:1px solid transparent;transition:.25s}
.mine-cost-link:hover{border-color:var(--acc)}
.mine-share{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:15px 22px;border-bottom:1px solid var(--line2)}
#mineCopy{padding:9px 16px;border:1px solid var(--line);border-radius:100px;font-size:13px;color:var(--dim);transition:.25s}
#mineCopy:hover{border-color:var(--acc);color:var(--acc)}
.mine-cta{margin-inline-start:auto;font-family:var(--f-disp);font-size:14px;color:var(--acc)}
.mine-cta:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:820px){
  .mine-boot span{min-width:110px}
}

/* ═══════════ SCRUB THE BOOKS (inside the bone section) ═══════════ */
.rew{max-width:var(--maxw);margin:clamp(56px,7vh,90px) auto 0;
  padding-top:clamp(40px,5vh,64px);border-top:1px solid rgba(13,18,32,.14)}
.rew-head{max-width:62ch;margin-bottom:clamp(26px,3.5vh,40px)}
.rew-head h3{font-family:var(--f-disp);font-weight:300;font-size:clamp(26px,3.6vw,46px);
  letter-spacing:-.035em;line-height:1.02;margin:0 0 14px}
.rew-head p{color:rgba(13,18,32,.62);font-size:15.5px;line-height:1.6;margin:0}
.rew-month{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.rew-month b{font-family:var(--f-disp);font-weight:300;font-size:clamp(30px,4.4vw,58px);
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
#rwBar{display:block;height:3px;background:var(--acc-dk);border-radius:2px;
  width:2%;transition:width .25s var(--ease)}
#rwSlider{-webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:rgba(13,18,32,.18);border-radius:2px;outline:none;cursor:ew-resize;
  margin:8px 0 26px}
#rwSlider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;background:var(--acc-dk);cursor:grab;
  border:3px solid var(--paper);box-shadow:0 1px 8px rgba(13,18,32,.3)}
#rwSlider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--acc-dk);cursor:grab;border:3px solid var(--paper);
  box-shadow:0 1px 8px rgba(13,18,32,.3)}
#rwSlider:focus-visible{outline:2px solid var(--acc-dk);outline-offset:6px}
.rew-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:rgba(13,18,32,.12);border:1px solid rgba(13,18,32,.12)}
.rs{background:var(--paper);padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.rs span{font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(13,18,32,.5)}
.rs b{font-family:var(--f-disp);font-weight:300;font-size:clamp(19px,2.4vw,30px);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ═══════════ VISITOR RECORD (contact) ═══════════ */
.vrec{width:min(560px,100%);margin:0 auto 40px;text-align:start;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:rgba(8,11,20,.86);backdrop-filter:blur(18px);
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.vrec.on{opacity:1;transform:none}
.vr-attach{display:flex;align-items:center;gap:11px;width:100%;
  padding:14px 22px;border-top:1px solid var(--line2);
  font-size:13.5px;color:var(--dim);text-align:start;transition:.3s}
.vr-attach:hover{color:var(--txt)}
.vr-attach i{width:15px;height:15px;border-radius:5px;border:1px solid var(--line);
  flex:none;position:relative;transition:.3s}
.vr-attach.on{color:var(--acc)}
.vr-attach.on i{background:var(--acc);border-color:var(--acc)}
.vr-attach.on i::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #04240f;border-width:0 2px 2px 0;transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.vrec{opacity:1;transform:none}}

/* ═══════════ LEAKAGE MODEL (inside the bone section) ═══════════ */
.leak{max-width:var(--maxw);margin:clamp(56px,7vh,90px) auto 0;padding-top:clamp(40px,5vh,64px);
  border-top:1px solid rgba(13,18,32,.14)}
.leak-head{max-width:62ch;margin-bottom:clamp(30px,4vh,46px)}
.leak-head h3{font-family:var(--f-disp);font-weight:300;font-size:clamp(26px,3.6vw,46px);
  letter-spacing:-.035em;line-height:1.02;margin:0 0 14px}
.leak-head p{color:rgba(13,18,32,.62);font-size:15.5px;line-height:1.6;margin:0}
.leak-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:clamp(22px,3vw,40px);margin-bottom:clamp(34px,4vh,52px)}
.lk-f{display:block}
.lk-f>span{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(13,18,32,.5);margin-bottom:16px;min-height:2.4em;line-height:1.45}
.lk-f>b{display:block;font-family:var(--f-disp);font-weight:400;font-size:clamp(21px,2.4vw,28px);
  letter-spacing:-.03em;margin-top:12px;font-variant-numeric:tabular-nums}
/* range track — restyled for the bone background in both engines */
.lk-f input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:rgba(13,18,32,.18);border-radius:2px;outline:none;cursor:ew-resize}
.lk-f input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:19px;height:19px;border-radius:50%;background:var(--acc-dk);cursor:grab;
  border:3px solid var(--paper);box-shadow:0 1px 8px rgba(13,18,32,.3)}
.lk-f input[type=range]::-moz-range-thumb{width:19px;height:19px;border-radius:50%;
  background:var(--acc-dk);cursor:grab;border:3px solid var(--paper);
  box-shadow:0 1px 8px rgba(13,18,32,.3)}
.lk-f input[type=range]:focus-visible{outline:2px solid var(--acc-dk);outline-offset:6px}

.leak-out{border:1px solid rgba(13,18,32,.14);border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.5)}
.lk-r{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:16px 24px;border-bottom:1px solid rgba(13,18,32,.09)}
.lk-r span{font-size:14.5px;color:rgba(13,18,32,.62);line-height:1.4}
.lk-r b{font-family:var(--f-disp);font-weight:400;font-size:clamp(17px,2vw,23px);
  letter-spacing:-.025em;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:end}
.lk-total{background:rgba(29,122,76,.07);border-bottom:0}
.lk-total span{color:var(--paper-ink);font-weight:500}
.lk-total b{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.04em;color:var(--acc-dk)}
.lk-pay{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:15px 24px;border-top:1px solid rgba(13,18,32,.09);background:rgba(13,18,32,.03)}
.lk-pay span{font-size:13.5px;color:rgba(13,18,32,.55)}
.lk-pay b{font-family:var(--f-disp);font-weight:500;font-size:18px;letter-spacing:-.02em;white-space:nowrap}

.leak-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px}
.leak-cta .btn.primary{background:var(--acc-dk);color:#fff}
.leak-cta .btn.ghost.sm{border:1px solid rgba(13,18,32,.22);color:rgba(13,18,32,.72);
  padding:13px 22px;font-size:14px}
.leak-cta .btn.ghost.sm:hover{border-color:var(--acc-dk);color:var(--acc-dk)}
.leak-note{margin:24px 0 0;font-size:12.5px;line-height:1.6;color:rgba(13,18,32,.48);max-width:84ch}
@media (max-width:820px){
  /* stacked: override the base align-items:baseline, or the value box stays
     content-sized and drifts to the middle of the row instead of aligning
     to the reading edge (very visible in RTL) */
  .lk-r,.lk-pay{flex-direction:column;align-items:stretch;gap:6px}
  .lk-r b,.lk-pay b{text-align:start}
  .lk-pay{gap:4px}
}

/* ═══════════ BEFORE/AFTER ═══════════ */
.ba{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9.4;user-select:none;touch-action:pan-y;cursor:ew-resize;background:#0a0d16}
.ba img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;pointer-events:none}
.ba-before{position:absolute;inset:0;width:var(--pos);overflow:hidden}
.ba-before img{width:calc(100vw - var(--pad)*2);max-width:calc(var(--maxw) - var(--pad)*2);height:100%}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--acc);transform:translateX(-1px);pointer-events:none;box-shadow:0 0 24px rgba(95,214,148,.6)}
.ba-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;
  background:var(--acc);color:#04240f;display:grid;place-items:center;font-size:15px;font-weight:600;letter-spacing:-1px}
.ba-tag{position:absolute;top:16px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;padding:7px 12px;border-radius:100px;
  background:rgba(6,8,15,.75);backdrop-filter:blur(8px);border:1px solid var(--line);pointer-events:none}
.ba-t1{inset-inline-start:16px}
.ba-t2{inset-inline-end:16px;color:var(--acc);border-color:rgba(95,214,148,.4)}

/* ═══════════ GALLERY ═══════════ */
.gal{position:relative;z-index:5;padding:clamp(80px,12vh,140px) 0;overflow:hidden}
.gal-head{padding:0 var(--pad);max-width:var(--maxw);margin:0 auto 48px}
.gal-track{display:flex;gap:22px;padding:0 var(--pad);width:max-content;will-change:transform}
.gc{margin:0;width:clamp(280px,42vw,620px);flex:none}
.gc.ph{width:clamp(190px,20vw,290px)}
.gm{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0a0d16;aspect-ratio:16/10;position:relative}
.gc.ph .gm{aspect-ratio:9/16.5}
.gm img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s var(--ease)}
.gc:hover .gm img{transform:scale(1.045)}
.gc figcaption{padding-top:16px;display:flex;flex-direction:column;gap:5px}
.gc figcaption b{font-family:var(--f-disp);font-weight:400;font-size:17px;letter-spacing:-.02em}
.gc figcaption span{font-size:13px;color:var(--dim2)}

/* ═══════════ PARTICLE MORPH ═══════════ */
.px{position:relative;z-index:5;min-height:190vh;padding:clamp(70px,10vh,120px) var(--pad) 0}
.px-copy{position:sticky;top:clamp(90px,14vh,150px);max-width:var(--maxw);margin:0 auto;
  pointer-events:none;z-index:2}
.px-title{font-family:var(--f-disp);font-weight:300;font-size:clamp(30px,5vw,62px);line-height:1.02;
  letter-spacing:-.04em;margin:0 0 22px;max-width:12ch}
.px-title span{display:block}
.px-title em{display:block;font-family:var(--f-ser);font-style:italic;color:var(--acc)}
.px-lede{color:var(--dim);font-size:clamp(14px,1.45vw,17px);line-height:1.65;max-width:44ch;margin:0}
#pxCanvas{position:sticky;top:0;display:block;width:100%;height:100svh;margin-top:-42vh;z-index:1;pointer-events:none}
@media (max-width:900px){
  .px{min-height:170vh}
  .px-title{max-width:100%}
  #pxCanvas{height:70svh;margin-top:-18vh}
}

/* ═══════════ CAPABILITIES ═══════════ */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2)}
/* 9 cards must land 3×3 — auto-fit gives 4 columns on common desktops,
   which strands the CTA card beside a three-cell hole */
@media (min-width:1100px){.cap-grid{grid-template-columns:repeat(3,1fr)}}
.cc{background:var(--ink);padding:36px 30px 34px;transition:background .45s;transform-style:preserve-3d}
.cc:hover{background:#0c1120}
.cc-i{font-style:normal;font-size:22px;color:var(--acc);display:block;margin-bottom:20px}
.cc h3{font-family:var(--f-disp);font-weight:400;font-size:21px;letter-spacing:-.025em;margin:0 0 12px}
.cc p{color:var(--dim);font-size:14.5px;line-height:1.62;margin:0}
/* the 9th cell: the capability we haven't built yet — theirs */
.cc-cta{display:block;background:rgba(95,214,148,.05);position:relative}
.cc-cta:hover{background:rgba(95,214,148,.09)}
.cc-cta .cc-i{opacity:.9}
.cc-go{display:inline-block;margin-top:16px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.16em;color:var(--acc);border-bottom:1px solid transparent;transition:.3s}
.cc-cta:hover .cc-go{border-color:var(--acc)}

/* ═══════════ PROCESS ═══════════ */
.proc-list{border-top:1px solid var(--line2)}
.pr{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,54px);align-items:start;
  padding:38px 0;border-bottom:1px solid var(--line2);transition:padding-inline .5s var(--ease)}
.pr:hover{padding-inline-start:14px}
.pr>b{font-family:var(--f-mono);font-size:12px;color:var(--acc);letter-spacing:.2em;padding-top:6px}
.pr h3{font-family:var(--f-disp);font-weight:400;font-size:clamp(21px,2.6vw,31px);letter-spacing:-.03em;margin:0 0 12px}
.pr p{color:var(--dim);font-size:15px;line-height:1.62;margin:0;max-width:62ch}
.pr-time{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--dim2);white-space:nowrap;padding-top:8px;text-transform:uppercase}

/* ═══════════ OTHER WORK ═══════════ */
.oth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.ot{border:1px solid var(--line2);border-radius:14px;padding:30px 26px;transition:.4s;background:var(--glass)}
.ot:hover{border-color:rgba(95,214,148,.3);transform:translateY(-4px)}
.ot-k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.24em;color:var(--dim2)}
.ot h3{font-family:var(--f-disp);font-weight:400;font-size:22px;letter-spacing:-.025em;margin:14px 0 10px}
.ot p{color:var(--dim);font-size:14px;line-height:1.6;margin:0}

/* ═══════════ PRICING ═══════════ */
/* one page, no tabs — group headings separate the two ladders */
.pr-group{display:flex;align-items:center;gap:14px;margin:0 0 28px;
  font-family:var(--f-mono);font-weight:400;font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dim)}
.pr-group i{width:34px;height:1px;background:var(--gold);flex:none}
.pr-panel + .pr-group{margin-top:clamp(48px,7vh,72px)}
.pr-panel{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:16px}
.pc{position:relative;border:1px solid var(--line2);border-radius:16px;padding:34px 30px;background:var(--glass);
  backdrop-filter:blur(8px);transform-style:preserve-3d;transition:border-color .4s}
.pc:hover{border-color:rgba(95,214,148,.3)}
.pc.feat{border-color:rgba(95,214,148,.45);background:rgba(95,214,148,.05)}
.pc-flag{position:absolute;top:-1px;inset-inline-end:20px;background:var(--acc);color:#04240f;font-family:var(--f-mono);
  font-size:9px;letter-spacing:.18em;padding:5px 12px;border-radius:0 0 7px 7px}
.pc h3{font-family:var(--f-disp);font-weight:400;font-size:26px;letter-spacing:-.03em;margin:0 0 8px}
.pc-for{color:var(--dim2);font-size:13.5px;margin:0 0 26px}
.pc-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.pc-price span{font-family:var(--f-mono);font-size:11px;color:var(--dim2);letter-spacing:.1em}
.pc-price b{font-family:var(--f-disp);font-weight:300;font-size:clamp(34px,4vw,48px);letter-spacing:-.045em;line-height:1}
.pc-price i{font-style:normal;font-size:15px;color:var(--dim)}
.pc-setup{font-size:13px;color:var(--acc);margin-bottom:26px}
.pc ul{margin:0;padding:24px 0 0;list-style:none;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:11px}
.pc li{font-size:14px;color:var(--dim);padding-inline-start:22px;position:relative;line-height:1.45}
.pc li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--acc);font-size:12px}
.pr-care{margin-top:22px;padding:20px 26px;border:1px dashed var(--line);border-radius:12px;display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.pr-care b{font-family:var(--f-disp);font-weight:500;font-size:16px}
.pr-care span{color:var(--dim);font-size:14.5px}
.pr-note{margin-top:26px;font-size:13px;color:var(--dim2);max-width:76ch;line-height:1.6}

/* estimator */
.est{margin-top:64px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.02)}
.est-head{padding:32px 32px 4px}
.est-head h3{font-family:var(--f-disp);font-weight:400;font-size:27px;letter-spacing:-.03em;margin:0 0 8px}
.est-head p{color:var(--dim);font-size:15px;margin:0}
.est-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;padding:30px 32px}
.est-q label{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--dim2);margin-bottom:14px;text-transform:uppercase}
.est-opts{display:flex;flex-direction:column;gap:8px}
.eo{text-align:start;padding:12px 16px;border:1px solid var(--line2);border-radius:10px;font-size:14px;color:var(--dim);transition:.3s}
.eo:hover{border-color:var(--line);color:var(--txt)}
.eo.on{border-color:var(--acc);background:rgba(95,214,148,.1);color:var(--txt)}
.est-out{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:26px 32px;border-top:1px solid var(--line2);background:rgba(95,214,148,.045)}
.est-num span{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--dim2);text-transform:uppercase;margin-bottom:8px}
.est-num b{font-family:var(--f-disp);font-weight:300;font-size:clamp(24px,3.2vw,38px);letter-spacing:-.04em;display:block}
.est-num i{font-style:normal;font-size:13px;color:var(--dim2)}

/* ═══════════ STUDIO ═══════════ */
.st-head{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,6vw,80px);align-items:end;margin-bottom:52px}
.st-lede{color:var(--dim);font-size:16px;line-height:1.65;margin:0}
.st-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin-bottom:22px}
.stc{border:1px solid var(--line2);border-radius:14px;padding:32px 28px;background:var(--glass)}
.st-r{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.26em;color:var(--acc)}
.stc h3{font-family:var(--f-disp);font-weight:400;font-size:22px;letter-spacing:-.025em;margin:16px 0 12px}
.stc p{color:var(--dim);font-size:14.5px;line-height:1.62;margin:0}
.st-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2)}
.stt{background:var(--ink);padding:24px 26px}
.stt b{display:block;font-family:var(--f-disp);font-weight:400;font-size:21px;letter-spacing:-.02em;color:var(--acc);margin-bottom:7px}
.stt span{font-size:13.5px;color:var(--dim)}

/* ═══════════ CONTACT ═══════════ */
.contact{position:relative;z-index:5;padding:clamp(90px,14vh,160px) var(--pad);border-top:1px solid var(--line2);
  background:radial-gradient(120% 90% at 50% 0%,rgba(95,214,148,.07),transparent 60%)}
.ct-inner{max-width:840px;margin:0 auto;text-align:center}
.ct-inner .chap{justify-content:center}
.ct-title{font-family:var(--f-disp);font-weight:300;font-size:clamp(33px,6vw,74px);line-height:1.02;letter-spacing:-.04em;margin:0 0 20px}
.ct-title em{font-family:var(--f-ser);font-style:italic;color:var(--acc)}
.ct-lede{color:var(--dim);font-size:17px;margin:0 auto 44px;max-width:50ch}
.ct-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:start}
.fr{position:relative}
.fr.full{grid-column:1/-1}
.fr input,.fr textarea{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:11px;
  padding:20px 16px 10px;color:var(--txt);font:inherit;font-size:15px;transition:border-color .3s;resize:none}
.fr input:focus,.fr textarea:focus{outline:none;border-color:var(--acc)}
.fr label{position:absolute;inset-inline-start:16px;top:16px;color:var(--dim2);font-size:15px;pointer-events:none;transition:.25s var(--ease)}
.fr input:focus+label,.fr input:not(:placeholder-shown)+label,
.fr textarea:focus+label,.fr textarea:not(:placeholder-shown)+label{top:7px;font-size:10.5px;letter-spacing:.14em;color:var(--acc);font-family:var(--f-mono)}
.ct-form .btn{grid-column:1/-1;justify-self:center;margin-top:10px}
.ct-alt{margin-top:32px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;font-size:14px;color:var(--dim)}
.ct-alt a{border-bottom:1px solid var(--line);padding-bottom:2px;transition:.3s}
.ct-alt a:hover{color:var(--acc);border-color:var(--acc)}

/* ═══════════ FOOTER ═══════════ */
/* bottom padding clears the fixed telemetry/pilot band at max scroll —
   34px left the © row sliced behind the chrome */
footer{position:relative;z-index:5;padding:0 var(--pad) 96px;overflow:hidden;border-top:1px solid var(--line2)}
.ft-word{font-family:var(--f-disp);font-weight:300;font-size:clamp(52px,15.5vw,230px);line-height:.85;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.09);text-align:center;padding:44px 0 22px;white-space:nowrap}
.ft-row{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line2)}
.ft-brand{display:flex;align-items:center;gap:13px}
.ft-brand img{width:34px;border-radius:10px}
.ft-brand b{display:block;font-family:var(--f-disp);font-weight:500;font-size:15px}
.ft-brand span{font-size:12.5px;color:var(--dim2)}
.ft-links{display:flex;gap:22px;font-size:14px;color:var(--dim)}
.ft-links a:hover{color:var(--acc)}
.ft-meta{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--dim2)}

/* ═══════════ VOICE GUIDE PILL ═══════════ */
.vp{position:fixed;inset-inline-start:var(--pad);bottom:26px;z-index:850;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px 10px 14px;border-radius:100px;
  border:1px solid var(--line);background:rgba(6,8,15,.78);backdrop-filter:blur(14px);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);cursor:pointer;transition:.4s var(--ease)}
.vp:hover{border-color:var(--acc);color:var(--txt)}
.vp.on{border-color:rgba(95,214,148,.5);color:var(--txt)}
.vp.muted{opacity:.62}
.vp-ico{display:inline-flex;align-items:flex-end;gap:2.5px;height:13px}
.vp-ico b{width:2.5px;border-radius:2px;background:var(--acc);height:4px;transition:height .2s}
.vp.on .vp-ico b{animation:vpEq 1s ease-in-out infinite}
.vp.on .vp-ico b:nth-child(2){animation-delay:.18s}
.vp.on .vp-ico b:nth-child(3){animation-delay:.36s}
.vp.muted .vp-ico b{background:var(--dim2);height:3px;animation:none}
@keyframes vpEq{0%,100%{height:4px}50%{height:13px}}
@media (max-width:820px){.vp{bottom:16px;padding:9px 14px 9px 12px;font-size:9px}}
@media (prefers-reduced-motion:reduce){.vp.on .vp-ico b{animation:none}}

/* ═══════════ WIREFRAME BLUEPRINT SKELETONS ═══════════
   Each placeholder sketches the real layout of what is coming, in
   thin outlines that draw themselves in. Pure CSS: the stagger is
   nth-child delays, so 17 of these cost nothing. */
.sk{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  background:
    linear-gradient(rgba(95,214,148,.028),rgba(95,214,148,.028)),
    repeating-linear-gradient(to right,rgba(95,214,148,.05) 0 1px,transparent 1px 38px),
    repeating-linear-gradient(to bottom,rgba(95,214,148,.05) 0 1px,transparent 1px 38px),
    #080b13;
  transition:opacity .4s var(--ease)}
.sk.sk-out{opacity:0}
.sk i{position:absolute;display:block;border:1px solid rgba(95,214,148,.30);
  border-radius:3px;opacity:0;transform-origin:left center;
  animation:skDraw .5s var(--ease) forwards}
.sk i:nth-child(1){animation-delay:.02s} .sk i:nth-child(2){animation-delay:.08s}
.sk i:nth-child(3){animation-delay:.14s} .sk i:nth-child(4){animation-delay:.19s}
.sk i:nth-child(5){animation-delay:.24s} .sk i:nth-child(6){animation-delay:.29s}
.sk i:nth-child(7){animation-delay:.34s} .sk i:nth-child(8){animation-delay:.39s}
.sk i:nth-child(9){animation-delay:.44s}
@keyframes skDraw{from{opacity:0;transform:scaleX(.05)}to{opacity:1;transform:scaleX(1)}}
/* a slow sweep so it reads as working, not frozen */
.sk::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 42%,rgba(95,214,148,.09) 50%,transparent 58%);
  background-size:260% 100%;animation:skSweep 2.1s linear infinite}
@keyframes skSweep{from{background-position:130% 0}to{background-position:-130% 0}}
.sk-still i{opacity:1;animation:none;transform:none}
.sk-still::after{animation:none;opacity:.35}

/* dashboard blueprint */
.sk-side{left:3%;top:6%;width:15%;height:88%}
.sk-bar{left:21%;top:6%;width:76%;height:9%}
.sk-shot .sk-k{top:19%;width:17%;height:15%}
.sk-shot .k1{left:21%} .sk-shot .k2{left:40%}
.sk-shot .k3{left:59%} .sk-shot .k4{left:78%}
.sk-p1{left:21%;top:38%;width:36%;height:56%}
.sk-p2{left:59%;top:38%;width:38%;height:56%}

/* phone blueprint */
.sk-phone .sk-bar{left:8%;top:4%;width:84%;height:6%}
.sk .sk-row{left:8%;width:84%;height:9%;border-radius:5px}
.sk-row.r1{top:14%} .sk-row.r2{top:26%} .sk-row.r3{top:38%}
.sk-phone .sk-full{left:8%;top:51%;width:84%;height:44%}

/* satellite blueprint */
.sk-grid{left:0;top:0;width:100%;height:100%;border:0;
  background:
    repeating-linear-gradient(to right,rgba(95,214,148,.10) 0 1px,transparent 1px 12%),
    repeating-linear-gradient(to bottom,rgba(95,214,148,.10) 0 1px,transparent 1px 18%)}
.sk .sk-pin{width:13px;height:13px;border-radius:50%;border-width:1.5px}
.sk-pin.p1{left:38%;top:44%} .sk-pin.p2{left:52%;top:57%} .sk-pin.p3{left:61%;top:38%}
.sk .sk-cross{left:calc(50% - 26px);top:calc(50% - 26px);width:52px;height:52px;
  border-radius:50%;border-style:dashed}
.sk-lbl{position:absolute;left:0;right:0;bottom:12%;text-align:center;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.26em;font-style:normal;
  color:rgba(95,214,148,.6);animation:gePulse 2s ease-in-out infinite}

/* Command Center blueprint — 6 KPI cells in two rows */
.sk.sk-panel .sk-bar{left:4%;top:5%;width:92%;height:12%}
.sk.sk-panel .sk-k{width:29%;height:20%}
.sk.sk-panel .k1{left:4%;top:22%}   .sk.sk-panel .k2{left:35.5%;top:22%}
.sk.sk-panel .k3{left:67%;top:22%}  .sk.sk-panel .k4{left:4%;top:45%}
.sk.sk-panel .k5{left:35.5%;top:45%} .sk.sk-panel .k6{left:67%;top:45%}
.sk.sk-panel .sk-full{left:4%;top:69%;width:92%;height:26%}

/* text lines */
.sk-lines{position:relative;height:52px;background:none}
.sk-lines::after{display:none}
.sk .sk-l{position:relative;height:12px;border:0;border-radius:6px;
  background:rgba(95,214,148,.14);margin-bottom:10px;display:block;
  animation:skDraw .5s var(--ease) forwards,skPulse 1.6s ease-in-out infinite .5s}
.sk-l.w1{width:52%} .sk-l.w2{width:34%}
@keyframes skPulse{0%,100%{opacity:1}50%{opacity:.45}}

/* the host needs a positioning context while a skeleton sits in it */
.sk-host{position:relative}

/* the Command Center blueprint, drawn beside the provisioning log */
.mine-skwrap{position:relative;height:clamp(220px,30vw,300px);margin-top:18px;
  border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.mine-skwrap .sk{border-radius:14px}
@media (max-width:820px){.mine-skwrap{height:200px}}

/* ═══════════ SEARCH RESULTS ═══════════ */
.pal-i{align-items:baseline}
.pal-t{flex:none}
.pal-s{font-size:12px;color:var(--dim2);margin-inline-start:12px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:1}
.pal-none{padding:16px 14px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.1em;color:var(--dim2)}

/* ═══════════ INSTALL / OFFLINE ═══════════ */
.offline{position:fixed;left:0;right:0;top:0;z-index:99993;display:none;
  align-items:center;justify-content:center;gap:10px;padding:9px var(--pad);
  background:var(--amber);color:#2a1f00;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
body.is-offline .offline{display:flex}
body.is-offline #nav{top:36px}
.offline i{width:6px;height:6px;border-radius:50%;background:#2a1f00;flex:none}

.inst{position:fixed;inset-inline-start:var(--pad);bottom:26px;z-index:870;
  width:min(360px,calc(100vw - 2*var(--pad)));
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:rgba(6,9,17,.95);backdrop-filter:blur(18px);
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.inst.on{opacity:1;transform:none}
.inst-b{padding:18px 20px 14px}
.inst-b b{display:block;font-family:var(--f-disp);font-weight:400;font-size:18px;
  letter-spacing:-.02em;margin-bottom:8px}
.inst-b span{font-size:13px;line-height:1.55;color:var(--dim)}
.inst-a{display:flex;gap:8px;padding:0 20px 18px}
#instGo{padding:10px 20px;border-radius:100px;background:var(--acc);color:#04240f;
  font-size:13px;font-weight:500;transition:.25s}
#instGo:hover{background:#fff}
#instNo{padding:10px 16px;border-radius:100px;border:1px solid var(--line2);
  font-size:13px;color:var(--dim2);transition:.25s}
#instNo:hover{color:var(--txt);border-color:var(--line)}
@media (max-width:820px){.inst{bottom:auto;top:70px}}

/* ═══════════ YOUR BUILDING ═══════════ */
.yrs{margin:0 0 clamp(30px,4vh,48px);padding-bottom:clamp(28px,4vh,44px);
  border-bottom:1px solid var(--line2)}
.yrs-head{max-width:60ch;margin-bottom:20px}
.yrs-k{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.26em;
  color:var(--gold);margin-bottom:12px}
.yrs-head h3{font-family:var(--f-disp);font-weight:300;font-size:clamp(24px,3.2vw,40px);
  letter-spacing:-.035em;line-height:1.04;margin:0 0 12px}
.yrs-head p{color:var(--dim);font-size:15.5px;line-height:1.6;margin:0}
.yrs-form{display:flex;gap:10px;flex-wrap:wrap;max-width:620px}
.yrs-form input{flex:1 1 300px;min-width:0;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:12px;padding:15px 18px;color:var(--txt);
  font:inherit;font-size:15px;outline:none;transition:border-color .3s}
.yrs-form input:focus{border-color:var(--gold)}
.yrs-form button{padding:0 24px;border:1px solid var(--gold);border-radius:12px;
  background:var(--gold);color:#2a1f00;font-weight:500;font-size:14px;white-space:nowrap;transition:.3s}
.yrs-form button:hover{background:#fff;border-color:#fff}
.yrs-out{margin-top:18px;font-size:14.5px;color:var(--dim)}
.yrs-msg{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;color:var(--dim2)}
.yrs-out.miss .yrs-msg{color:var(--amber)}
.yrs-hit{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:14px 18px;border:1px solid rgba(230,195,107,.35);border-radius:12px;
  background:rgba(230,195,107,.05)}
.yrs-lbl{font-family:var(--f-disp);font-size:18px;letter-spacing:-.02em;color:var(--txt)}
.yrs-co{margin-inline-start:auto;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.14em;color:var(--gold)}
.yrs-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.yrs-reset{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim2);border-bottom:1px solid var(--line);
  padding-bottom:3px;transition:.25s}
.yrs-reset:hover{color:var(--acc);border-color:var(--acc)}
.yrs-note{margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--dim2);max-width:76ch}
/* over a guest's coordinates the building copy would be a lie — hide it */
.dive.guest .dive-copy,.dive.guest .dsc-legend{display:none}
.dive.guest .dive-hud .dv-row:nth-child(4){display:none}

/* ═══════════ CAPACITY ═══════════ */
.cap{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--dim);
  border:1px solid rgba(230,195,107,.32);border-radius:100px;padding:8px 15px;
  background:rgba(230,195,107,.05)}
.cap i{width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 9px var(--gold);animation:pulse 2.6s infinite;flex:none}
.cap.full i{background:var(--dim2);box-shadow:none;animation:none}
.cap-hero{margin-top:6px}
.cap-contact{margin:0 auto 30px}
.cap-price{margin-top:20px}
.numbers .cap{border-color:rgba(138,106,21,.4);color:rgba(13,18,32,.7)}
@media (max-width:820px){.cap{font-size:9px;letter-spacing:.1em;padding:7px 12px}}

/* ═══════════ THE PROPOSAL ═══════════ */
#ppBtn{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--gold);
  padding:12px 22px;border:1px solid rgba(230,195,107,.4);border-radius:100px;
  transition:.3s;text-transform:uppercase;background:none;cursor:pointer}
#ppBtn:hover{background:rgba(230,195,107,.1)}
#ppBtn i{font-style:normal;font-size:13px}
#pp{position:fixed;inset:0;z-index:99998;overflow-y:auto;background:#0a0d15;
  display:none;padding:40px 20px 120px}
body.pp-on{overflow:hidden}
body.pp-on #pp{display:block}
.pp-sheet{width:min(820px,100%);margin:0 auto;background:#fff;color:#101418;
  padding:clamp(28px,5vw,56px);border-radius:6px;
  font-family:var(--f-body);line-height:1.6;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.pp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding-bottom:18px;border-bottom:2px solid #101418;margin-bottom:30px}
.pp-head b{display:block;font-family:var(--f-disp);font-size:20px;letter-spacing:-.02em}
.pp-head span{font-size:12px;color:#5a6472}
.pp-meta{font-family:var(--f-mono);font-size:11px;color:#5a6472;white-space:nowrap}
.pp-sheet h1{font-family:var(--f-disp);font-weight:300;font-size:clamp(28px,4vw,40px);
  letter-spacing:-.035em;margin:0 0 12px}
.pp-sheet h2{font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:#8a6a15;margin:32px 0 12px;font-weight:400}
.pp-lede{font-size:15px;color:#3d4653;margin:0 0 8px;max-width:70ch}
.pp-sheet ul,.pp-next{margin:0;padding-inline-start:20px;font-size:14.5px}
.pp-sheet li{margin-bottom:6px}
.pp-t{width:100%;border-collapse:collapse;font-size:14.5px}
.pp-t th{text-align:start;font-weight:400;color:#5a6472;padding:9px 0;
  border-bottom:1px solid #e4e7ec;width:45%}
.pp-t td{text-align:end;font-weight:500;padding:9px 0;border-bottom:1px solid #e4e7ec;
  font-variant-numeric:tabular-nums}
.pp-fine{font-size:11.5px;color:#5a6472;line-height:1.55;margin:10px 0 0}
.pp-foot{margin-top:36px;padding-top:16px;border-top:1px solid #e4e7ec;
  display:flex;gap:18px;flex-wrap:wrap;font-size:11.5px;color:#5a6472}
.pp-foot div:last-child{flex:1 1 100%;margin-top:6px}
.pp-bar{position:fixed;left:0;right:0;bottom:0;z-index:2;display:flex;
  align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;
  padding:16px var(--pad);background:rgba(6,9,17,.96);border-top:1px solid var(--line2)}
.pp-bar button{padding:11px 22px;border-radius:100px;font-size:13.5px;transition:.25s}
#ppPrint{background:var(--gold);color:#2a1f00;font-weight:500}
#ppPrint:hover{background:#fff}
#ppClose{border:1px solid var(--line);color:var(--dim)}
#ppClose:hover{border-color:var(--acc);color:var(--acc)}
.pp-hint{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;color:var(--dim2)}
@media print{
  body.pp-on>*{display:none!important}
  body.pp-on #pp{display:block!important;position:static;background:#fff;padding:0;overflow:visible}
  .pp-bar{display:none!important}
  .pp-sheet{box-shadow:none;border-radius:0;width:100%;padding:0}
  .pp-sheet h2{color:#000}
}

/* ═══════════ GOLD — money only ═══════════ */
/* count-up money carries data-pre="AED " already, so one selector covers
   the hero and the bone Numbers section without touching markup */
b[data-pre^="AED"]{color:var(--gold)}
.numbers b[data-pre^="AED"]{color:var(--gold-deep)}
.nb-ba b,.nb-ba .down{color:var(--gold-deep)}
.pc-price b,.pc-price span,.pc-price i{color:var(--gold)}
.pc-setup{color:var(--gold)}
.est-num b{color:var(--gold)}
#cfgBuild,#cfgCare,.cfg-p{color:var(--gold)}
.lk-total b{color:var(--gold-deep)}
#rwM,#rwC{color:var(--gold-deep)}
#rwBar{background:var(--gold-deep)}
#rwSlider::-webkit-slider-thumb{background:var(--gold-deep)}
#rwSlider::-moz-range-thumb{background:var(--gold-deep)}
.mine-cost b{color:var(--gold)}
/* generated consoles mark their AED KPIs with .au */
.dc-k.au b{color:var(--gold)}

/* ═══════════ HOLD-TO-VERIFY — receipts on demand ═══════════ */
[data-verify]{cursor:help;border-bottom:1px dashed rgba(230,195,107,.45);
  padding-bottom:2px;-webkit-touch-callout:none;user-select:none;
  transition:border-color .3s,text-shadow .55s linear}
.numbers [data-verify]{border-bottom-color:rgba(138,106,21,.5)}
[data-verify]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
[data-verify].vhold{text-shadow:0 0 22px rgba(230,195,107,.9);
  border-bottom-color:var(--gold)}
.rc-hint{display:block;margin-top:14px;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim2)}
.numbers .rc-hint{color:rgba(13,18,32,.45)}
#rcWrap{position:fixed;inset:0;z-index:99996;display:grid;place-items:center;
  background:rgba(4,6,12,.72);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;transition:opacity .3s}
#rcWrap.on{opacity:1;pointer-events:auto}
.rc-card{width:min(92vw,560px);border:1px solid rgba(230,195,107,.4);border-radius:16px;
  overflow:hidden;background:rgba(8,11,19,.96);box-shadow:0 40px 110px rgba(0,0,0,.7);
  transform:translateY(14px);transition:transform .3s var(--ease)}
#rcWrap.on .rc-card{transform:none}
.rc-top{padding:18px 24px 14px;border-bottom:1px solid var(--line2)}
.rc-k{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.26em;
  color:var(--gold);margin-bottom:9px}
.rc-val{unicode-bidi:plaintext;font-family:var(--f-disp);font-weight:300;font-size:clamp(26px,4vw,40px);
  letter-spacing:-.03em;color:var(--gold)}
.rc-claim{display:block;margin-top:4px;font-size:13.5px;color:var(--dim)}
.rc-trace{padding:14px 24px 18px;font-family:var(--f-mono);font-size:11px;
  line-height:2;color:var(--dim2)}
.rc-trace div{display:flex;gap:10px}
.rc-trace div::before{content:"›";color:var(--gold);flex:none}
.rc-note{padding:12px 24px 16px;border-top:1px solid var(--line2);font-size:11.5px;
  color:var(--dim2);line-height:1.55}
.rc-close{position:absolute;top:14px;inset-inline-end:16px;width:30px;height:30px;
  border:1px solid var(--line);border-radius:50%;color:var(--dim);font-size:13px}
.rc-close:hover{border-color:var(--gold);color:var(--gold)}
.rc-card{position:relative}

/* ═══════════ THE FILM — letterboxed trailer ═══════════ */
/* compact — the button must not push the hero proof row below the fold,
   and in RTL it must clear the fixed voice pill */
.hero-cta:has(+ #filmBtn){margin-bottom:18px}
#filmBtn{display:inline-flex;align-items:center;gap:10px;margin-top:0;margin-bottom:20px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;color:var(--gold);
  padding:11px 20px;border:1px solid rgba(230,195,107,.4);border-radius:100px;
  transition:.3s;text-transform:uppercase;cursor:pointer;background:none}
#filmBtn:hover{background:rgba(230,195,107,.1)}
#filmBtn i{font-style:normal}
.film-bar{position:fixed;left:0;right:0;height:9svh;min-height:56px;background:#020308;
  z-index:99994;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);transition:transform .7s var(--ease)}
.film-bar.top{top:0;transform:translateY(-101%)}
.film-bar.bot{bottom:0;transform:translateY(101%)}
body.film .film-bar{transform:none}
.film-bar b{font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;color:var(--gold)}
.film-bar span{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--dim2)}
#flTime{color:var(--txt);font-variant-numeric:tabular-nums}
/* the site steps offstage while the film runs */
body.film #nav,body.film #tele,body.film #rail,body.film #hud,
body.film .vp,body.film #pilot{opacity:0;pointer-events:none;transition:opacity .5s}
body.film .pl-cap{bottom:calc(9svh + 26px);font-size:clamp(19px,2.5vw,32px)}
body.film{cursor:none}

/* ═══════════ THE LANDING ═══════════ */
.land-hud{position:absolute;inset-inline-end:var(--pad);top:90px;
  display:flex;flex-direction:column;gap:7px;text-align:end;pointer-events:none;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.land-hud .lh-r{display:flex;gap:14px;justify-content:flex-end;align-items:baseline}
.land-hud span{color:var(--dim2)}
.land-hud b{color:var(--dim);font-weight:400;font-variant-numeric:tabular-nums}
.land-hud .lh-alt{color:var(--acc);font-size:13px}
#contact.landed .lh-alt{color:var(--gold)}
.lh-touch{opacity:0;transition:opacity .6s;color:var(--gold)!important}
#contact.landed .lh-touch{opacity:1}
@media (max-width:1080px){.land-hud{display:none}}
/* the form becomes the pad on touchdown */
.ct-form{position:relative;transition:box-shadow .8s var(--ease)}
#contact.landed .ct-form{box-shadow:0 0 0 1px rgba(230,195,107,.25),0 30px 90px rgba(0,0,0,.4)}
#contact.landed .ct-form::before,#contact.landed .ct-form::after{content:"";position:absolute;
  width:18px;height:18px;border:1px solid rgba(230,195,107,.6);transition:opacity .6s}
#contact.landed .ct-form::before{top:-10px;left:-10px;border-width:1px 0 0 1px}
#contact.landed .ct-form::after{bottom:-10px;right:-10px;border-width:0 1px 1px 0}

/* ═══════════ SHUTDOWN (after send) ═══════════ */
#sd{position:fixed;inset:0;z-index:99997;background:#04060c;display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .5s}
#sd.on{opacity:1;pointer-events:auto}
.sd-inner{width:min(88vw,460px);text-align:start}
.sd-log{font-family:var(--f-mono);font-size:12px;line-height:2.1;color:var(--dim2);min-height:6.3em}
.sd-log .ok{color:var(--acc)}
.sd-log div{opacity:0;animation:ldIn .2s var(--ease) forwards}
.sd-line{height:1px;background:var(--line);margin:22px 0;transform-origin:center;
  transition:transform 1.1s var(--ease)}
#sd.off .sd-line{transform:scaleX(0)}
.sd-end{font-family:var(--f-disp);font-weight:300;font-size:clamp(20px,3vw,30px);
  letter-spacing:-.02em;opacity:0;transition:opacity .8s .3s}
#sd.done .sd-end{opacity:1}
.sd-wake{margin-top:26px;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  color:var(--dim2);border:1px solid var(--line);border-radius:100px;padding:10px 18px;
  opacity:0;transition:.3s}
#sd.done .sd-wake{opacity:1}
.sd-wake:hover{color:var(--acc);border-color:var(--acc)}

/* ═══════════ PILOT ═══════════ */
#pilot{position:fixed;inset-inline-end:var(--pad);bottom:64px;z-index:860;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}
html[dir="rtl"] #pilot{align-items:flex-start}
.pl-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;
  border-radius:100px;border:1px solid rgba(95,214,148,.5);
  background:rgba(6,8,15,.82);backdrop-filter:blur(14px);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;color:var(--acc);
  cursor:pointer;transition:.3s}
.pl-btn:hover{background:rgba(95,214,148,.12)}
.pl-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 10px var(--acc);animation:pulse 2s infinite}
#plPanel{width:min(400px,calc(100vw - 2*var(--pad)));
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:rgba(6,9,17,.93);backdrop-filter:blur(20px);
  box-shadow:0 34px 90px rgba(0,0,0,.7)}
.pl-head{padding:14px 18px 12px;border-bottom:1px solid var(--line2);
  display:flex;flex-direction:column;gap:3px}
.pl-head b{font-family:var(--f-mono);font-size:10px;letter-spacing:.26em;color:var(--acc)}
.pl-head span{font-size:11.5px;color:var(--dim2)}
.pl-log{height:190px;overflow-y:auto;padding:12px 18px;
  font-family:var(--f-mono);font-size:11px;line-height:1.8;color:var(--dim2)}
.pl-log .ok{color:var(--txt)}
.pl-log .k{color:var(--dim2);opacity:.75}
.pl-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 12px}
.pl-chips button{padding:7px 12px;border:1px solid var(--line2);border-radius:100px;
  font-size:11.5px;color:var(--dim);transition:.25s}
.pl-chips button:hover{border-color:var(--acc);color:var(--acc)}
#plForm{display:flex;border-top:1px solid var(--line2)}
#plIn{flex:1;background:none;border:0;padding:13px 18px;color:var(--txt);
  font:inherit;font-size:13.5px;outline:none;min-width:0}
#plForm button{padding:0 20px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.18em;color:var(--acc)}
/* while the pilot is flying, the console chrome acknowledges it */
body.piloting .hud-c{border-color:var(--acc);box-shadow:0 0 14px rgba(95,214,148,.25)}
body.piloting .pl-dot{animation-duration:.7s}
@media (max-width:820px){#pilot{bottom:76px}}

/* voice toggle in the cockpit header */
.pl-head{position:relative}
.pl-mute{position:absolute;top:12px;inset-inline-end:14px;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;
  padding:5px 10px;border:1px solid rgba(95,214,148,.4);border-radius:100px;
  color:var(--acc);transition:.25s}
.pl-mute.off{border-color:var(--line2);color:var(--dim2);text-decoration:line-through}

/* the pilot's hand — a visible ghost cursor that travels to what it operates */
.pl-cur{position:fixed;left:0;top:0;z-index:99992;pointer-events:none;
  opacity:0;transition:opacity .4s;will-change:transform}
.pl-cur.on{opacity:1}
.pl-cur i{display:block;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:1.5px solid var(--acc);background:rgba(95,214,148,.14);
  box-shadow:0 0 18px rgba(95,214,148,.55);transition:transform .2s}
.pl-cur.press i{transform:scale(.62);background:rgba(95,214,148,.4)}
.pl-cur span{position:absolute;left:16px;top:14px;font-family:var(--f-mono);
  font-size:8px;letter-spacing:.22em;color:var(--acc);
  background:rgba(6,8,15,.85);border:1px solid rgba(95,214,148,.35);
  border-radius:100px;padding:3px 8px;white-space:nowrap}

/* cinematic captions — the pilot's words, typed across the bottom */
.pl-cap{position:fixed;left:50%;bottom:calc(24px + 52px + 18px);z-index:99991;
  transform:translateX(-50%);max-width:min(76ch,88vw);text-align:center;
  font-family:var(--f-disp);font-weight:350;font-size:clamp(17px,2.1vw,27px);
  letter-spacing:-.015em;line-height:1.3;color:var(--txt);
  padding:12px 26px;border-radius:14px;
  background:rgba(5,7,13,.78);backdrop-filter:blur(16px);
  border:1px solid var(--line2);
  text-shadow:0 2px 18px rgba(0,0,0,.9);
  opacity:0;transition:opacity .35s;pointer-events:none}
.pl-cap.on{opacity:1}
html[dir="rtl"] .pl-cap{letter-spacing:0}

/* spotlight — dims the page around whatever the pilot is talking about */
.pl-spot{position:fixed;z-index:99990;pointer-events:none;border-radius:16px;
  border:1px solid rgba(95,214,148,.65);
  box-shadow:0 0 0 9999px rgba(4,6,12,.6),0 0 28px rgba(95,214,148,.3);
  opacity:0;transition:opacity .5s,left .6s var(--ease),top .6s var(--ease),
    width .6s var(--ease),height .6s var(--ease)}
.pl-spot.on{opacity:1}
@media (prefers-reduced-motion:reduce){.pl-cur,.pl-cap,.pl-spot{display:none}}

/* ═══════════ CURSOR ═══════════ */
.cursor{position:fixed;top:0;left:0;z-index:99990;pointer-events:none;mix-blend-mode:difference;opacity:0}
body.has-cursor .cursor{opacity:1}
.cur-dot{position:absolute;width:6px;height:6px;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}
.cur-ring{position:absolute;width:36px;height:36px;border:1px solid rgba(255,255,255,.6);border-radius:50%;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),background .35s}
.cursor.hot .cur-ring{width:58px;height:58px;background:rgba(255,255,255,.12)}
.cur-lbl{position:absolute;transform:translate(-50%,-50%);font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;opacity:0;transition:opacity .3s;white-space:nowrap}
.cursor.labeled .cur-lbl{opacity:1}
.cursor.labeled .cur-ring{width:74px;height:74px}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ═══════════════════════════════════════════════════════
   CONSOLE CHROME
   The site is a surveillance console over a real portfolio.
   These three layers are always present so every section
   reads as a channel of one system, not a separate set piece.
   ═══════════════════════════════════════════════════════ */

/* ── 1 · viewport frame ── */
#hud{position:fixed;inset:0;z-index:700;pointer-events:none;contain:strict;
  opacity:0;transition:opacity 1.2s var(--ease) .2s}
body.loaded #hud{opacity:1}
.hud-c{position:absolute;width:22px;height:22px;border:0 solid rgba(95,214,148,.42)}
.hud-c.tl{top:14px;left:14px;border-width:1px 0 0 1px}
.hud-c.tr{top:14px;right:14px;border-width:1px 1px 0 0}
.hud-c.bl{bottom:14px;left:14px;border-width:0 0 1px 1px}
.hud-c.br{bottom:14px;right:14px;border-width:0 1px 1px 0}
/* edge ticks — a measured rule down each side, like a gunsight reticle */
.hud-e{position:absolute;background:
  repeating-linear-gradient(to bottom,rgba(255,255,255,.16) 0 1px,transparent 1px 100%);
  background-size:1px 44px;width:1px;top:70px;bottom:70px}
.hud-e.l{left:22px} .hud-e.r{right:22px}
@media (max-width:1080px){#hud{display:none}}

/* ── 2 · channel rail — the spine of the whole page ── */
#rail{position:fixed;inset-inline-start:30px;top:50%;transform:translateY(-50%);
  z-index:760;display:flex;flex-direction:column;gap:2px;
  opacity:0;transition:opacity .8s var(--ease)}
body.loaded.scrolled #rail{opacity:1}
.rl{display:flex;align-items:center;gap:10px;padding:3px 0;cursor:pointer;
  pointer-events:auto;background:none;border:0}
.rl i{width:14px;height:1px;background:rgba(255,255,255,.22);flex:none;
  transition:width .45s var(--ease),background .45s}
.rl b{font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;color:var(--dim2);
  font-weight:400;transition:color .4s;font-variant-numeric:tabular-nums}
.rl s{text-decoration:none;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim2);white-space:nowrap;
  max-width:0;overflow:hidden;opacity:0;transition:max-width .5s var(--ease),opacity .35s}
.rl:hover i,.rl.on i{width:26px;background:var(--acc)}
.rl:hover b,.rl.on b{color:var(--acc)}
/* labels only ever open on hover — an always-on active label overran the
   content column on the wider sections. The lit number and the longer
   tick already carry the active state. */
#rail:hover .rl s{max-width:170px;opacity:1;color:var(--dim)}
#rail:hover .rl.on s{opacity:1;color:var(--acc)}
@media (max-width:1439px){#rail{display:none}}

/* ── 3 · telemetry strip — proof the system is live, always on screen ── */
/* it floats over live content, so it carries its own glass — without a
   backdrop it collided with card copy on every dark section */
#tele{position:fixed;inset-inline-end:var(--pad);bottom:24px;z-index:760;
  display:flex;align-items:center;gap:14px;pointer-events:none;
  padding:9px 16px;border-radius:100px;
  border:1px solid var(--line);background:rgba(6,8,15,.78);backdrop-filter:blur(14px);
  font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim2);opacity:0;transition:opacity .8s var(--ease)}
body.loaded #tele{opacity:1}
.tl-g{display:flex;align-items:baseline;gap:6px}
.tl-g b{color:var(--dim);font-weight:400;font-variant-numeric:tabular-nums}
.tl-g em{font-style:normal;color:var(--acc)}
.tl-sep{width:1px;height:9px;background:var(--line)}
.tl-led{width:5px;height:5px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 8px var(--acc);animation:pulse 2.4s infinite;flex:none}
@media (max-width:1080px){#tele{display:none}}
/* the strip keeps its dark glass everywhere; only the frame, which has no
   backdrop of its own, has to invert over the bone Numbers section */
body.on-paper .hud-c{border-color:rgba(13,18,32,.35)}
body.on-paper .hud-e{background-image:repeating-linear-gradient(to bottom,rgba(13,18,32,.18) 0 1px,transparent 1px 100%)}

/* ── 4 · channel markers (was .chap) ── */
.chap{display:flex;align-items:center;gap:0;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.26em;color:var(--dim2);margin-bottom:38px;text-transform:uppercase}
.chap i{width:34px;height:1px;background:var(--acc);flex:none;order:2;margin:0 14px}
.chap span{order:3}
.chap::before{content:"["attr(data-ch)"]";order:1;color:var(--acc);
  font-variant-numeric:tabular-nums;letter-spacing:.16em}
/* boot-in: the label types itself when the channel comes into view */
.chap span{display:inline-block;clip-path:inset(0 100% 0 0);
  transition:clip-path .55s cubic-bezier(.7,0,.3,1)}
.chap.lit span{clip-path:inset(0 0 0 0)}
body.reduced .chap span,body.no-motion .chap span{clip-path:none!important}

/* ═══════════ PALETTE ═══════════ */
#pal{position:fixed;inset:0;z-index:99995;background:rgba(4,6,12,.7);backdrop-filter:blur(10px);display:grid;place-items:start center;padding-top:16vh}
.pal-box{width:min(92vw,560px);background:rgba(14,18,30,.96);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.6)}
#palIn{width:100%;background:none;border:0;border-bottom:1px solid var(--line2);padding:20px 22px;color:var(--txt);font:inherit;font-size:17px;outline:none}
#palList{max-height:min(50vh,340px);overflow:auto;padding:8px}
.pal-i{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:9px;font-size:15px;color:var(--dim);cursor:pointer}
.pal-i.sel{background:rgba(95,214,148,.13);color:var(--txt)}
.pal-i i{font-style:normal;font-family:var(--f-mono);font-size:10px;color:var(--dim2);margin-inline-start:auto}
.pal-foot{padding:10px 18px;border-top:1px solid var(--line2);font-family:var(--f-mono);font-size:10px;color:var(--dim2);display:flex;gap:14px}
.pal-foot kbd{background:rgba(255,255,255,.07);border-radius:4px;padding:2px 6px;margin-inline-end:4px}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .hero-copy{max-width:100%}
  .hero-stagehint{display:none}
  .case-head,.st-head{grid-template-columns:1fr}
  .tk-media{width:92vw}
}
@media (max-width:820px){
  body{font-size:16px}
  .nav-links,.nav-right .pill-btn{display:none}
  .nav-right{margin-left:auto}
  #burger{display:flex}
  .hero{min-height:auto;padding:130px var(--pad) 70px}
  .hero-proof{gap:22px}
  .hp{flex:1 1 40%}
  .scroll-cue{display:none}
  .pr{grid-template-columns:auto 1fr}
  .pr-time{grid-column:2;padding-top:0}
  .ct-form{grid-template-columns:1fr}
  .tk-media{width:92vw}
  .ba{aspect-ratio:4/3}
  .ba-before img{width:calc(100vw - var(--pad)*2)}
  .gal-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:16px}
  .gal-track::-webkit-scrollbar{display:none}
  .gc{scroll-snap-align:center}
  .est-out{flex-direction:column;align-items:stretch}
  .est-out .btn{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .grain{display:none}
}
body.reduced .grain{display:none}

/* ═══════════ PRINT — one-page studio profile ═══════════ */
@media print{
  #stage,.grain,#nav,#hud,#rail,#tele,#loader,.cursor,#pal,#progress,.scroll-cue,.tape,.gal,#mobileMenu,.est,.ct-form,.ba,footer .ft-word{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .sec,.hero{padding:12pt 0;max-width:100%}
  .h2,.hero-title{color:#000;font-size:20pt}
  .numbers{background:#fff;color:#000}
  .bx,.cc,.pc,.ot,.stc{border:1px solid #ccc;background:#fff;color:#000;break-inside:avoid}
  p,.hero-sub,.case-lede{color:#333}
}

/* ═══════════ LIQUID GALLERY ═══════════ */
#liquid{position:fixed;inset:0;z-index:6;pointer-events:none;
  width:100%;height:100%;opacity:0;transition:opacity .3s linear}
@media (hover:none),(pointer:coarse){#liquid{display:none}}
@media (prefers-reduced-motion:reduce){#liquid{display:none}}

/* ═══════════ CONFIGURATOR ═══════════ */
.cfg-head{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,6vw,80px);align-items:end;margin-bottom:46px}
.cfg-lede{color:var(--dim);font-size:clamp(15px,1.5vw,17px);line-height:1.65;margin:0}
.cfg-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,44px);align-items:start}
.cfg-label{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim2);
  text-transform:uppercase;margin:0 0 12px}
.cfg-size{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.cfg-sz{padding:10px 18px;border:1px solid var(--line2);border-radius:100px;font-size:13.5px;
  color:var(--dim);transition:.35s var(--ease)}
.cfg-sz:hover{border-color:var(--line);color:var(--txt)}
.cfg-sz.on{background:var(--acc);border-color:var(--acc);color:#04240f;font-weight:500}
.cfg-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.cfg-mod{position:relative;text-align:start;padding:16px 16px 16px 42px;border:1px solid var(--line2);
  border-radius:12px;background:var(--glass);transition:.3s var(--ease);display:block}
.cfg-mod:hover{border-color:var(--line)}
.cfg-mod.on{border-color:rgba(95,214,148,.45);background:rgba(95,214,148,.06)}
.cfg-mod.req{opacity:.9;cursor:default}
.cfg-tick{position:absolute;inset-inline-start:15px;top:18px;width:15px;height:15px;border-radius:5px;
  border:1px solid var(--line);transition:.3s}
.cfg-mod.on .cfg-tick{background:var(--acc);border-color:var(--acc)}
.cfg-mod.on .cfg-tick::after{content:"";position:absolute;inset-inline-start:4px;top:1px;width:4px;height:8px;
  border:solid #04240f;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cfg-n{display:block;font-weight:500;font-size:14.5px;margin-bottom:4px}
.cfg-d{display:block;font-size:12.5px;color:var(--dim2);line-height:1.45;margin-bottom:8px}
.cfg-p{display:block;font-family:var(--f-mono);font-size:11px;color:var(--acc);letter-spacing:.05em}
.cfg-right{position:sticky;top:100px;border:1px solid var(--line2);border-radius:16px;overflow:hidden;
  background:radial-gradient(90% 70% at 50% 0%,rgba(95,214,148,.07),transparent 62%),rgba(255,255,255,.02)}
#cfgCanvas{display:block;width:100%;height:clamp(240px,32vh,320px)}
.cfg-out{padding:6px 24px 24px}
.cfg-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line2)}
.cfg-row span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;color:var(--dim2);text-transform:uppercase}
.cfg-row b{font-family:var(--f-disp);font-weight:400;font-size:clamp(15px,1.7vw,19px);letter-spacing:-.02em;text-align:end}
.cfg-out .btn{width:100%;justify-content:center;margin-top:18px}
.cfg-note{font-size:11.5px;color:var(--dim2);margin:12px 0 0;line-height:1.5}
@media (max-width:980px){
  .cfg-head,.cfg-grid{grid-template-columns:1fr}
  .cfg-right{position:static}
}

/* ═══════════ GOD'S EYE HUD ═══════════ */
#ge{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;
  transition:opacity .8s var(--ease);contain:strict}
#ge.on{opacity:1}
#ge.off{opacity:0}
.ge-svg{position:absolute;top:50%;left:62%;width:min(52vw,620px);height:min(52vw,620px);
  transform:translate3d(0,0,0);margin:-26vw 0 0 -26vw;overflow:visible;will-change:transform}
@media(max-width:1080px){.ge-svg{left:50%;width:min(78vw,520px);height:min(78vw,520px);margin:-39vw 0 0 -39vw}}
.ge-svg *{fill:none;stroke:var(--acc);vector-effect:non-scaling-stroke}
.ge-r1{stroke-width:1;opacity:.30;stroke-dasharray:6 14;transform-origin:500px 500px;
  animation:geSpin 26s linear infinite}
.ge-r2{stroke-width:1;opacity:.5;stroke-dasharray:52 210;transform-origin:500px 500px;
  animation:geSpin 14s linear infinite reverse}
.ge-tick{stroke-width:1.4;opacity:.55}
.ge-br{stroke-width:2;opacity:0;transition:opacity .5s var(--ease) .1s}
#ge.locked .ge-br{opacity:.95}
#ge.locked .ge-r2{stroke-dasharray:none;opacity:.75}
@keyframes geSpin{to{transform:rotate(360deg)}}

.ge-hud{position:absolute;inset-inline-end:var(--pad);bottom:20%;display:flex;flex-direction:column;
  gap:7px;text-align:end;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase}
@media(max-width:1080px){.ge-hud{display:none}}
.ge-line{display:flex;gap:14px;justify-content:flex-end;align-items:baseline}
.ge-line span{color:var(--dim2)}
.ge-line b{color:var(--dim);font-weight:400}
.ge-status{color:var(--amber)!important}
#ge.locked .ge-status{color:var(--acc)!important}
.ge-n{font-style:normal;color:var(--acc)}
.ge-live{color:var(--acc)!important;animation:gePulse 2.2s ease-in-out infinite}
@keyframes gePulse{0%,100%{opacity:1}50%{opacity:.42}}

.ge-scan{position:absolute;inset-inline:0;height:150px;top:0;
  background:linear-gradient(to bottom,transparent,rgba(95,214,148,.055),transparent);
  animation:geScan 7s linear infinite;will-change:transform}
@keyframes geScan{0%{transform:translateY(-160px)}100%{transform:translateY(100vh)}}

/* ═══════════ THE DESCENT ═══════════
   orbit → rooftops → geometry → floor → unit → record.
   The section is long on purpose: seven beats need room, and a
   rushed descent reads as a glitch rather than a camera move. */
.dive{position:relative;z-index:5;height:720vh}
.dive-stick{position:sticky;top:0;height:100svh;overflow:hidden;background:#06080f}
.dive-mapwrap{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.dive.ready .dive-mapwrap{opacity:1}
/* maplibre's own stylesheet forces .maplibregl-map{position:relative}, which
   kills `inset:0` on the map element itself and collapses it to 0 height.
   So the absolute layer is a WRAPPER and the map fills it with 100%. */
.dive-map{width:100%;height:100%}
.dive-map canvas{outline:none}
.dive-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,8,15,.95) 0%,rgba(6,8,15,.80) 34%,rgba(6,8,15,.28) 60%,rgba(6,8,15,.05) 100%),
             linear-gradient(to bottom,rgba(6,8,15,.85) 0%,rgba(6,8,15,0) 26%,rgba(6,8,15,0) 62%,rgba(6,8,15,.92) 100%)}
.dive-copy{position:absolute;inset-inline-start:var(--pad);top:50%;transform:translateY(-50%);
  max-width:min(560px,46vw);z-index:3;pointer-events:none}
.dive-title{font-family:var(--f-disp);font-weight:300;font-size:clamp(30px,5vw,60px);line-height:1.02;
  letter-spacing:-.04em;margin:0 0 20px}
.dive-title span,.dive-title em{display:block}
.dive-title em{font-family:var(--f-ser);font-style:italic;color:var(--acc)}
.dive-lede{color:var(--dim);font-size:clamp(14px,1.45vw,17px);line-height:1.65;margin:0}
.dive-hud{position:absolute;inset-inline-end:var(--pad);bottom:14%;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;gap:7px;text-align:end;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.dv-row{display:flex;gap:14px;justify-content:flex-end;align-items:baseline}
.dv-row span{color:var(--dim2)}
.dv-row b{color:var(--dim);font-weight:400}
.dv-st{color:var(--amber)!important}
.dive-hud.locked .dv-st{color:var(--acc)!important}
.dv-pin{position:relative;display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .6s var(--ease)}
.dive.close .dv-pin{opacity:1}
.dv-pin i{width:11px;height:11px;border-radius:50%;background:var(--acc);flex:none;
  box-shadow:0 0 0 4px rgba(95,214,148,.22),0 0 14px rgba(95,214,148,.75)}
.dv-warn i{background:var(--amber);box-shadow:0 0 0 4px rgba(245,181,68,.22),0 0 14px rgba(245,181,68,.7)}
.dv-crit i{background:var(--red);box-shadow:0 0 0 4px rgba(255,107,107,.22),0 0 14px rgba(255,107,107,.7)}
.dv-pin span{font-family:var(--f-mono);font-size:9px;letter-spacing:.13em;color:#eef1f6;
  text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.95)}
.maplibregl-ctrl-attrib{font-size:9px!important;background:rgba(6,8,15,.6)!important}
.maplibregl-ctrl-attrib a{color:var(--dim2)!important}
@media (max-width:900px){
  .dive{height:280vh}
  .dive-copy{max-width:none;inset-inline-end:var(--pad);top:16%;transform:none}
  .dive-hud{display:none}
}
.dive.failed .dive-map,.dive.static .dive-map{display:none}

/* ── the geometry layer ──
   sits over the satellite plate and cross-fades in at max zoom, so the
   building appears to resolve out of the photograph */
.dsc-gl{position:absolute;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none;opacity:0;will-change:opacity}
/* Once the geometry has the frame, pull the plate right back. At 60° pitch
   a half-lit satellite tile reads as a floating shard behind the tower, not
   as ground — better as a faint suggestion of the site underneath. */
.dive.resolved .dive-mapwrap{opacity:.13;transition:opacity 1.4s var(--ease)}
/* the headline has said its piece by the time we're inside the building */
.dive.resolved .dive-copy{opacity:0;transform:translateY(-50%) translateX(-24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);pointer-events:none}
html[dir="rtl"] .dive.resolved .dive-copy{transform:translateY(-50%) translateX(24px)}

/* ── legend ── */
.dsc-legend{position:absolute;inset-inline-start:var(--pad);bottom:12%;z-index:4;
  display:flex;gap:18px;flex-wrap:wrap;pointer-events:none;
  opacity:0;transition:opacity .7s var(--ease)}
.dive.resolved .dsc-legend{opacity:1}
.dsc-legend span{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim2)}
.dsc-legend .lg{width:9px;height:9px;border-radius:3px;flex:none}
.dsc-legend .lg.paid{background:var(--acc)}
.dsc-legend .lg.chase{background:var(--amber)}
.dsc-legend .lg.void{background:#2b3145}
@media (max-width:900px){.dsc-legend{bottom:6%;gap:12px}}

/* ── INSIDE: the Command Center the descent lands in ──
   Scales up from the point the camera passed through the façade, so it
   reads as arriving inside the building rather than as a panel sliding in. */
.dsc-console{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(14px,2.2vh,26px);
  padding:clamp(26px,5vw,80px);pointer-events:none;
  opacity:0;transform:scale(.72);filter:blur(14px);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease)}
.dive.inside .dsc-console{opacity:1;transform:scale(1);filter:blur(0)}
/* once we are inside, the world outside is gone — the satellite plate and
   the unit legend both belong to the approach, not to the room */
.dive.inside .dive-mapwrap{opacity:0;transition:opacity .9s var(--ease)}
.dive.inside .dsc-legend{opacity:0}
.dive.inside .dive-veil{opacity:0;transition:opacity .9s var(--ease)}
/* the room the screen sits in */
.dive.inside .dive-stick{background:
  radial-gradient(120% 90% at 50% 45%,rgba(95,214,148,.10),transparent 62%),#06080f}

.dc-bar{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.dc-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 12px var(--acc);animation:pulse 2.4s infinite;flex:none;align-self:center}
.dc-bar b{font-family:var(--f-disp);font-weight:300;letter-spacing:-.03em;
  font-size:clamp(24px,3.4vw,44px)}
.dc-sub{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim2)}
.dc-asof{margin-inline-start:auto;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.18em;color:var(--dim2)}

.dc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px;background:var(--line2);border:1px solid var(--line2)}
.dc-k{background:rgba(9,12,22,.92);padding:clamp(14px,2.2vh,24px) clamp(14px,1.6vw,22px);
  display:flex;flex-direction:column;gap:9px}
.dc-k span{font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim2)}
.dc-k b{font-family:var(--f-disp);font-weight:300;letter-spacing:-.04em;
  font-size:clamp(21px,2.9vw,40px);line-height:1;font-variant-numeric:tabular-nums}
.dc-k.good b{color:var(--acc)}
.dc-note{margin:0;max-width:78ch;font-size:clamp(12px,1.15vw,14px);line-height:1.6;color:var(--dim2)}
@media (max-width:820px){
  .dsc-console{gap:12px}
  .dc-grid{grid-template-columns:repeat(2,1fr)}
  .dc-note{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dsc-console{opacity:1;transform:none;filter:none;position:relative;inset:auto}
}

/* ── the record the whole descent lands on ── */
.dsc-record{position:absolute;inset-inline-end:var(--pad);top:50%;z-index:5;
  width:min(390px,86vw);pointer-events:none;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:rgba(8,11,20,.86);backdrop-filter:blur(18px);
  box-shadow:0 40px 110px rgba(0,0,0,.72);
  opacity:0;transform:translateY(-46%) translateX(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
html[dir="rtl"] .dsc-record{transform:translateY(-46%) translateX(-26px)}
.dive.at-unit .dsc-record{opacity:1;transform:translateY(-50%) translateX(0)}
.dr-top{padding:18px 22px 14px;border-bottom:1px solid var(--line2)}
.dr-k{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.26em;
  color:var(--acc);margin-bottom:9px}
.dr-code{font-family:var(--f-disp);font-weight:400;font-size:18px;letter-spacing:-.02em;display:block}
.dr-rows{padding:6px 22px 14px}
.dr-r{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line2)}
.dr-r:last-child{border-bottom:0}
.dr-r span{font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim2);flex:none}
.dr-r b{font-weight:500;font-size:14.5px;text-align:end;font-variant-numeric:tabular-nums}
.dr-paid{color:var(--acc)} .dr-chase{color:var(--amber)} .dr-late{color:var(--red)}
.dr-void{color:var(--dim2)}
/* the redaction is a feature, so it is styled like one */
.dr-redact b{color:var(--dim2);font-style:italic;font-weight:400;font-size:13px;
  text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}
.dr-note{margin:0;padding:14px 22px 18px;border-top:1px solid var(--line2);
  font-size:11.5px;line-height:1.55;color:var(--dim2);background:rgba(255,255,255,.02)}
@media (max-width:1080px){
  .dsc-record{inset-inline:auto var(--pad);top:auto;bottom:16%;width:min(360px,80vw);
    transform:translateY(20px)}
  .dive.at-unit .dsc-record{transform:translateY(0)}
}
@media (max-width:720px){
  .dsc-record{inset-inline:var(--pad);width:auto;bottom:10%}
  .dr-note{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dsc-gl{display:none}
  .dsc-record{opacity:1;transform:none;position:relative;inset:auto;margin:20px auto}
}