/* ══════════════════════════════════════════════════════════════
   CAPE CCTV — v002
   Light, but loud. Luminous white ground, deep navy depth blocks,
   electric beam-cyan as the primary, gold reserved for the
   "this is the differentiator" moments.
   Display: Space Grotesk · Body: Inter · Data: JetBrains Mono
   ══════════════════════════════════════════════════════════════ */

@property --ang { syntax:'<angle>'; initial-value:0deg; inherits:false; }

:root{
  --ink:#04101E;
  --ink2:#0A1F35;
  --ink3:#14395E;
  --paper:#FFFFFF;
  --haze:#EEF3F9;
  --haze2:#E2ECF6;
  --beam:#00C2FF;
  --beam2:#4BE3FF;
  --deep:#0067CC;
  --gold:#FFB020;
  --gold2:#FFD87A;
  --rec:#FF3B30;
  --slate:#55687E;
  --brand:#FD9223;   /* the client's own logo orange — never themed */
  --page:#FFFFFF;
  --txt:#04101E;
  --focus:rgba(0,194,255,.14);
  --r:18px;
  --line:rgba(4,16,30,.10);
  --line2:rgba(4,16,30,.06);
  --lineW:rgba(255,255,255,.14);

  --dsp:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --bdy:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mno:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --wrap:1240px;
  --pad:clamp(18px,4.5vw,44px);
  --secy:clamp(72px,9vw,132px);
  --shadow:0 30px 60px -34px rgba(4,32,64,.42);
  --shadow-lg:0 46px 90px -40px rgba(4,32,64,.55);
}

*,*::before,*::after{box-sizing:border-box}

html{
  font-size:16px; scroll-behavior:smooth; scroll-padding-top:108px;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0; background:var(--page); color:var(--txt);
  font-family:var(--bdy); font-size:1rem; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--dsp);font-weight:700;letter-spacing:-.028em}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--beam);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;padding:.7rem 1.1rem}
.skip:focus{left:10px;top:10px}

.dot{width:7px;height:7px;border-radius:50%;background:var(--beam);display:inline-block;flex:none}
.dot--rec{background:var(--rec);box-shadow:0 0 0 0 rgba(255,59,48,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,48,.55)}70%{box-shadow:0 0 0 9px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}

/* ── gradient text ─────────────────────────────────────────── */
.grad{
  background:linear-gradient(100deg,var(--deep) 0%,var(--beam) 55%,var(--beam2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.grad--gold{background:linear-gradient(100deg,var(--gold) 0%,var(--gold2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── buttons ───────────────────────────────────────────────── */
.cta{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--bdy);font-size:.92rem;font-weight:600;letter-spacing:.01em;
  padding:.82rem 1.5rem;border-radius:11px;text-decoration:none;cursor:pointer;
  border:0;white-space:nowrap;color:#fff;overflow:hidden;isolation:isolate;
  background:linear-gradient(120deg,var(--deep),var(--beam));
  box-shadow:0 12px 26px -12px rgba(0,124,204,.75), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, filter .25s;
}
.cta::after{ /* shine sweep */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 48%,transparent 62%);
  transform:translateX(-120%);transition:transform .7s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(0,140,220,.85), inset 0 1px 0 rgba(255,255,255,.32)}
.cta:hover::after{transform:translateX(120%)}
.cta--lg{padding:1.02rem 1.9rem;font-size:1rem;border-radius:13px}
.cta--sm{padding:.62rem 1.1rem;font-size:.85rem;border-radius:9px}
.cta--full{width:100%}
.cta__wa{width:19px;height:19px;flex:none}
.cta--out{
  background:transparent;color:var(--ink);
  border:1.5px solid var(--line);box-shadow:none;
}
.cta--out:hover{border-color:var(--beam);color:var(--deep);box-shadow:0 12px 26px -16px rgba(0,140,220,.6)}
.cta--gold{
  background:linear-gradient(120deg,#E8890B,var(--gold));color:#2A1A00;
  box-shadow:0 14px 30px -12px rgba(255,176,32,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.cta--gold:hover{box-shadow:0 20px 40px -12px rgba(255,176,32,.75), inset 0 1px 0 rgba(255,255,255,.45)}

/* ── nav ───────────────────────────────────────────────────── */
/* pointer-events:none was needed only while this nav was position:fixed and
   overlaying the page. It is sticky and in normal flow now, and leaving it
   on made every link, the burger and the CTA unclickable. */
.nav{position:sticky;top:14px;left:0;right:0;z-index:120;padding:0 var(--pad)}
.nav__bar{
  max-width:var(--wrap);margin:0 auto;height:129px;
  display:flex;align-items:stretch;gap:1.25rem;padding:0 .7rem 0 0;
  background:linear-gradient(180deg,#000000 0%,#00040F 5%,#010A1A 10%,#001023 15%,#00152B 20%,#001A32 25%,#001F3B 30%,#013457 35%,#002847 40%,#002D4E 45%,#003153 50%,#01355A 55%,#003B5E 60%,#003E65 65%,#00426D 70%,#004A75 75%,#01507D 80%,#005685 85%,#005E8E 90%,#006395 95%,#000103 100%);
  border:1px solid rgba(255,255,255,.14);border-radius:16px;
  box-shadow:0 18px 44px -22px rgba(0,12,28,.75);
  transition:box-shadow .3s;
}
.nav.is-stuck .nav__bar{background:rgba(4,16,30,.92);box-shadow:0 22px 50px -24px rgba(4,24,48,.75)}

.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.logo:hover .logo__chip svg path{fill:var(--brand)}


.nav__links{display:flex;align-items:center;gap:1.35rem;margin-left:auto;flex:none}
.nav__links a{white-space:nowrap}
.nav__links a{
  position:relative;font-size:.855rem;font-weight:500;text-decoration:none;
  color:rgba(255,255,255,.68);padding:.35rem 0;transition:color .2s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--deep),var(--beam2));transition:right .3s ease;
}
.nav__links a:hover,.nav__links a.is-on{color:#fff}
.nav__links a:hover::after,.nav__links a.is-on::after{right:0}

.nav__act{display:flex;align-items:center;gap:.5rem;margin-left:.5rem;flex:none}
.burger{
  display:none;width:40px;height:38px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px;cursor:pointer;
  flex-direction:column;justify-content:space-between;
}
.burger span{display:block;height:1.6px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── hero ──────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(44px,6vw,80px) 0 clamp(56px,7vw,96px);overflow:hidden}
.hero__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mesh{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.mesh--a{width:60vw;height:60vw;max-width:760px;max-height:760px;top:-24%;right:-14%;
  background:radial-gradient(circle,rgba(0,194,255,.55),transparent 68%);animation:float 18s ease-in-out infinite alternate}
.mesh--b{width:48vw;height:48vw;max-width:620px;max-height:620px;bottom:-30%;left:-12%;
  background:radial-gradient(circle,rgba(0,103,204,.34),transparent 68%);animation:float 22s ease-in-out infinite alternate-reverse}
.mesh--c{width:34vw;height:34vw;max-width:420px;max-height:420px;top:32%;left:44%;
  background:radial-gradient(circle,rgba(255,176,32,.26),transparent 66%);animation:float 26s ease-in-out infinite alternate}
@keyframes float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3%,5%,0) scale(1.12)}}

.plan{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(4,16,30,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(4,16,30,.055) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(120% 80% at 50% 10%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 10%,#000 0%,transparent 78%);
}

.hero__in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(30px,4vw,54px);align-items:center}

.pill{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mno);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt);background:var(--paper);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:999px;padding:.42rem .9rem;
  margin-bottom:1.5rem;box-shadow:0 6px 18px -12px rgba(4,32,64,.5);
}

.hero__h1{
  font-size:clamp(2.15rem,5.6vw,4.7rem);line-height:.99;letter-spacing:-.04em;
  margin:0 0 1.4rem;
}
.hero__lede{font-size:clamp(1.02rem,1.4vw,1.16rem);color:var(--slate);max-width:50ch;margin:0 0 2.1rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.6rem}

.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--line);padding-top:1.1rem}
.trust li{display:flex;flex-direction:column;gap:.12rem;padding-right:.8rem}
.trust b{font-family:var(--dsp);font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
.trust span{font-family:var(--mno);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}

/* live feed panel */
.feed{position:relative;perspective:1400px}
.feed__frame{
  position:relative;border-radius:18px;overflow:hidden;
  background:var(--ink);border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow-lg),0 0 0 1px rgba(0,194,255,.18),0 0 60px -14px rgba(0,194,255,.45);
  transform:rotateY(-5deg) rotateX(2deg);transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.feed:hover .feed__frame{transform:rotateY(0deg) rotateX(0deg)}
.feed__frame img{width:100%;aspect-ratio:4/3;object-fit:cover}

.feed__scan{
  position:absolute;left:0;right:0;height:26%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,194,255,.28),transparent);
  animation:scan 4.6s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes scan{0%{top:-26%}100%{top:100%}}

.feed__wedge{
  position:absolute;inset:0;pointer-events:none;
  background:conic-gradient(from 190deg at 22% 6%,transparent 0deg,rgba(0,194,255,.3) 8deg,rgba(0,194,255,.06) 22deg,transparent 30deg);
  animation:wedge 11s cubic-bezier(.55,0,.45,1) infinite alternate;transform-origin:22% 6%;
}
@keyframes wedge{from{transform:rotate(-10deg)}to{transform:rotate(20deg)}}

.feed__br{position:absolute;width:22px;height:22px;border:2px solid var(--beam);pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(0,194,255,.8));animation:brpulse 3s ease-in-out infinite}
.feed__br--tl{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.feed__br--tr{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 5px 0 0;animation-delay:.2s}
.feed__br--bl{bottom:14px;left:14px;border-right:0;border-top:0;border-radius:0 0 0 5px;animation-delay:.4s}
.feed__br--br{bottom:14px;right:14px;border-left:0;border-top:0;border-radius:0 0 5px 0;animation-delay:.6s}
@keyframes brpulse{0%,100%{opacity:.5}50%{opacity:1}}

.feed__osd{
  position:absolute;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:.75rem 1rem;font-family:var(--mno);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;pointer-events:none;
}
.feed__osd--t{top:0;background:linear-gradient(rgba(4,16,30,.72),transparent)}
.feed__osd--b{bottom:0;background:linear-gradient(transparent,rgba(4,16,30,.78))}
.live{display:inline-flex;align-items:center;gap:.4rem;color:#FF6B60;font-weight:700}
.feed__site{color:var(--beam2)}

.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.85rem}
.gauge{
  background:var(--paper);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:12px;padding:.7rem .8rem;
  box-shadow:0 10px 26px -20px rgba(4,32,64,.6);
}
.gauge__k{display:block;font-family:var(--mno);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);margin-bottom:.15rem}
.gauge__v{display:block;font-family:var(--dsp);font-weight:700;font-size:1.16rem;letter-spacing:-.02em;color:var(--txt)}

/* ── ticker ────────────────────────────────────────────────── */
.ticker{overflow:hidden;background:var(--ink);border-block:1px solid rgba(255,255,255,.08)}
.ticker__row{display:flex;align-items:center;gap:1.6rem;padding:.85rem 0;width:max-content;
  animation:slide 42s linear infinite}
.ticker__row span{font-family:var(--mno);font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap}
.ticker__row i{width:5px;height:5px;border-radius:50%;background:var(--beam);flex:none;
  box-shadow:0 0 8px rgba(0,194,255,.9)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── section shells ────────────────────────────────────────── */
.sec{padding:var(--secy) 0;position:relative}
.sec--tint{background:linear-gradient(180deg,var(--haze),#F7FAFD)}
.sec--plan{background:linear-gradient(180deg,var(--paper),var(--haze))}
.sec--contact{background:linear-gradient(180deg,#F7FAFD,var(--haze2))}

.shead{max-width:820px;margin:0 0 clamp(38px,4.6vw,62px)}
.shead--mid{margin-left:auto;margin-right:auto;text-align:center}
.shead--mid .lede{margin-left:auto;margin-right:auto}

.tag{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mno);font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--deep);margin:0 0 1.1rem;
}
.tag__n{
  display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;
  border-radius:8px;background:linear-gradient(130deg,var(--deep),var(--beam));color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.02em;
  box-shadow:0 6px 14px -6px rgba(0,140,220,.8);
}
.tag--on{color:var(--gold2)}
.tag--on .tag__n{background:linear-gradient(130deg,#E8890B,var(--gold));color:#2A1A00;
  box-shadow:0 6px 14px -6px rgba(255,176,32,.9)}

.h2{font-size:clamp(1.95rem,4.3vw,3.3rem);line-height:1.06;margin:0 0 1.1rem}
.h2--on{color:#fff}
.lede{font-size:clamp(1rem,1.35vw,1.12rem);color:var(--slate);max-width:60ch;margin:0 0 1rem}
.lede--on{color:rgba(255,255,255,.7);max-width:54ch}

/* ── approach cards, with the running light ────────────────── */
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:clamp(16px,1.8vw,22px)}

.gcard{position:relative;border-radius:20px;padding:1.5px;background:var(--line);overflow:hidden}
.gcard::before{
  content:"";position:absolute;top:-60%;left:-60%;width:220%;height:220%;
  background:conic-gradient(from var(--ang),transparent 0deg 292deg,var(--beam) 330deg,var(--gold) 352deg,transparent 360deg);
  animation:spin 5.5s linear infinite;opacity:0;transition:opacity .35s;
}
.gcard:hover::before{opacity:1}
@keyframes spin{to{--ang:360deg}}

.gcard__in{
  position:relative;z-index:1;height:100%;border-radius:19px;background:var(--paper);
  padding:clamp(26px,2.6vw,36px);
  box-shadow:0 20px 40px -34px rgba(4,32,64,.5);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.gcard:hover .gcard__in{transform:translateY(-4px);box-shadow:0 34px 60px -34px rgba(4,32,64,.6)}

.gcard__ic{
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:14px;margin-bottom:1.3rem;color:#fff;
  background:linear-gradient(135deg,var(--ink2),var(--deep));
  box-shadow:0 12px 26px -14px rgba(0,103,204,.9), inset 0 1px 0 rgba(255,255,255,.22);
}
.gcard__ic svg{width:25px;height:25px}
.gcard h3{font-size:1.32rem;margin:0 0 .6rem}
.gcard p{color:var(--slate);font-size:.96rem}
.gcard__ft{
  margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line2);
  font-family:var(--mno);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--deep)!important;
}

/* ── the animated site plan ────────────────────────────────── */
.sim{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr);
  gap:clamp(14px,1.6vw,20px);align-items:stretch;
}
.sim__stage{
  position:relative;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,#061A2E,#0A2740 55%,#04101E);
  border:1px solid rgba(0,194,255,.22);
  box-shadow:var(--shadow-lg),0 0 70px -22px rgba(0,194,255,.5);
  padding:clamp(10px,1.2vw,16px);
}
.siteplan{width:100%;height:auto;display:block}

.sp-bound{fill:rgba(0,194,255,.03);stroke:rgba(0,194,255,.35);stroke-width:1.5;stroke-dasharray:7 6}
.sp-drive{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.14);stroke-width:1}
.sp-door{fill:var(--beam);opacity:.7}
.sp-gate{stroke:var(--gold);stroke-width:4;stroke-linecap:round}
.sp-wire{stroke:var(--rec);stroke-width:2;stroke-dasharray:10 8;opacity:.85;
  animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-36}}

.sp-lbl{font-family:var(--mno);font-size:11px;letter-spacing:.14em;fill:rgba(255,255,255,.42)}
.sp-lbl--on{fill:rgba(255,255,255,.72)}
.sp-lbl--cam{fill:var(--beam2);text-anchor:middle;font-size:10px}
.sp-lbl--wire{fill:rgba(255,107,96,.85);font-size:10px}

.sp-cone{animation:conep 4s ease-in-out infinite}
.sp-cone--2{animation-delay:.6s}
.sp-cone--3{animation-delay:1.2s}
@keyframes conep{0%,100%{opacity:.55}50%{opacity:1}}

.sp-cam circle{fill:var(--beam);filter:drop-shadow(0 0 7px rgba(0,194,255,.95))}
.sp-cam--hot circle{fill:var(--gold);filter:drop-shadow(0 0 9px rgba(255,176,32,.95))}

.sp-person{fill:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.9))}
.sp-ping{fill:none;stroke:var(--rec);stroke-width:2;opacity:0}
.sp-walk{animation:walk 13s linear infinite}
@keyframes walk{
  0%{transform:translate(130px,462px);opacity:0}
  6%{opacity:1}
  26%{transform:translate(172px,382px);opacity:1}
  32%{transform:translate(182px,344px);opacity:1}
  50%{transform:translate(216px,296px);opacity:1}
  56%{opacity:0}
  100%{transform:translate(216px,296px);opacity:0}
}
.sp-walk .sp-ping{animation:ping 13s linear infinite}
@keyframes ping{
  0%,29%{opacity:0;transform:scale(.4)}
  32%{opacity:.9;transform:scale(.5)}
  40%{opacity:0;transform:scale(1.9)}
  100%{opacity:0;transform:scale(1.9)}
}

.sp-car{fill:var(--gold);opacity:.9;filter:drop-shadow(0 0 10px rgba(255,176,32,.6))}
.sp-car-g{animation:drive 13s linear infinite}
@keyframes drive{
  0%,58%{transform:translate(400px,500px);opacity:0}
  62%{transform:translate(400px,468px);opacity:1}
  76%{transform:translate(400px,414px);opacity:1}
  96%{transform:translate(400px,406px);opacity:1}
  100%{transform:translate(400px,406px);opacity:0}
}

.sp-flash{fill:none;stroke:var(--rec);stroke-width:3;opacity:0;animation:flash 13s linear infinite}
@keyframes flash{0%,30%{opacity:0}33%{opacity:.85}44%{opacity:0}100%{opacity:0}}

.sim__chip{
  position:absolute;font-family:var(--mno);font-size:.72rem;font-weight:700;letter-spacing:.08em;
  padding:.5rem .8rem;border-radius:9px;opacity:0;pointer-events:none;white-space:nowrap;
}
.sim__chip--a{
  top:14%;left:6%;background:rgba(255,59,48,.16);color:#FF8C82;
  border:1px solid rgba(255,59,48,.5);box-shadow:0 0 24px -6px rgba(255,59,48,.7);
  animation:chipA 13s linear infinite;
}
@keyframes chipA{0%,30%{opacity:0;transform:translateY(6px)}34%{opacity:1;transform:none}50%{opacity:1}55%{opacity:0}100%{opacity:0}}
.sim__chip--b{
  bottom:16%;right:6%;background:rgba(255,176,32,.16);color:var(--gold2);
  border:1px solid rgba(255,176,32,.5);box-shadow:0 0 24px -6px rgba(255,176,32,.7);
  animation:chipB 13s linear infinite;
}
@keyframes chipB{0%,72%{opacity:0;transform:translateY(6px)}77%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}

.sim__log{
  border-radius:20px;background:var(--paper);border:1px solid var(--line);
  padding:clamp(18px,2vw,24px);box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.sim__loghd{
  display:flex;align-items:center;gap:.5rem;font-family:var(--mno);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate);
  padding-bottom:.85rem;border-bottom:1px solid var(--line2);margin-bottom:.3rem;
}
.sim__log ul{flex:1}
.sim__log li{
  display:grid;grid-template-columns:auto auto 1fr;gap:.55rem;align-items:baseline;
  padding:.62rem 0;border-bottom:1px solid var(--line2);font-family:var(--mno);font-size:.72rem;
  opacity:0;
}
.sim.is-in .sim__log li{animation:logIn .5s ease both;animation-delay:var(--d)}
@keyframes logIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.sim__log b{color:var(--txt);font-weight:500}
.sim__log span{color:#fff;background:var(--deep);border-radius:4px;padding:.05rem .34rem;font-size:.64rem;letter-spacing:.06em}
.sim__log em{font-style:normal;color:var(--slate);font-family:var(--bdy);font-size:.8rem}
.sim__log li:last-child span{background:var(--gold);color:#2A1A00}
.sim__note{margin-top:1rem;font-size:.82rem;color:var(--slate);line-height:1.55}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:clamp(28px,3vw,40px)}
.chips li{
  font-family:var(--mno);font-size:.72rem;letter-spacing:.05em;
  padding:.48rem .9rem;border-radius:999px;background:var(--paper);
  border:1px solid var(--line);color:var(--txt);
  box-shadow:0 8px 20px -16px rgba(4,32,64,.7);transition:border-color .25s,transform .25s,color .25s;
}
.chips li:hover{border-color:var(--beam);color:var(--deep);transform:translateY(-2px)}

/* ── services ──────────────────────────────────────────────── */
.svc{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:clamp(24px,2.4vw,32px);overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s;
}
.svc::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--deep),var(--beam),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.svc:hover{transform:translateY(-5px);border-color:rgba(0,194,255,.4);box-shadow:0 30px 55px -34px rgba(4,32,64,.6)}
.svc:hover::before{transform:scaleX(1)}
.svc h3{font-size:1.22rem;margin:0 0 .6rem}
.svc p{color:var(--slate);font-size:.95rem}
.mini{display:flex;flex-wrap:wrap;gap:.34rem;margin-top:1.2rem}
.mini li{
  font-family:var(--mno);font-size:.66rem;letter-spacing:.04em;color:var(--deep);
  border:1px solid rgba(0,194,255,.3);background:rgba(0,194,255,.06);
  border-radius:5px;padding:.22rem .5rem;
}

/* ── the edge (dark full-bleed) ────────────────────────────── */
.edge{position:relative;padding:var(--secy) 0;overflow:hidden;background:var(--ink)}
.edge__bg{position:absolute;inset:0}
.edge__bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.edge::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(4,16,30,.96) 30%,rgba(4,16,30,.72) 62%,rgba(4,16,30,.9)),
             radial-gradient(70% 90% at 12% 30%,rgba(255,176,32,.18),transparent 60%);
}
.edge__in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,4.5vw,64px);align-items:center}
.edge__copy .cta{margin-top:1.6rem}

.edge__list{display:grid;gap:.7rem}
.edge__list li{
  position:relative;padding:1.1rem 1.2rem 1.1rem 1.35rem;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px);transition:border-color .3s,transform .3s,background .3s;
}
.edge__list li::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--gold),var(--beam));
}
.edge__list li:hover{border-color:rgba(255,176,32,.5);transform:translateX(5px);background:rgba(255,255,255,.08)}
.edge__list b{display:block;font-family:var(--dsp);font-size:1.02rem;color:#fff;margin-bottom:.18rem}
.edge__list span{display:block;font-size:.9rem;color:rgba(255,255,255,.6)}

/* ── sectors + projects ────────────────────────────────────── */
.sectors{display:flex;flex-wrap:wrap;gap:.55rem}
.sectors li{
  flex:1 1 190px;display:flex;align-items:center;gap:.65rem;
  padding:.95rem 1.1rem;border-radius:12px;background:var(--paper);border:1px solid var(--line);
  font-size:.93rem;font-weight:500;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.sectors li::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:linear-gradient(130deg,var(--deep),var(--beam));box-shadow:0 0 8px rgba(0,194,255,.7)}
.sectors li:hover{border-color:rgba(0,194,255,.45);transform:translateY(-3px);
  box-shadow:0 18px 34px -26px rgba(4,32,64,.7)}

.projs{
  margin-top:clamp(30px,3.6vw,50px);border-radius:22px;overflow:hidden;
  background:linear-gradient(150deg,#061A2E,#0C2B48);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  box-shadow:var(--shadow-lg);
}
.projs__hd{padding:clamp(28px,3vw,44px)}
.projs__hd .tag{color:var(--beam2)}
.projs__hd .tag__n{display:none}
.projs__hd h3{font-size:clamp(1.5rem,2.6vw,2.1rem);color:#fff;line-height:1.08;margin:0 0 .8rem}
.projs__hd p{color:rgba(255,255,255,.6);font-size:.93rem}
.projs__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-left:1px solid rgba(255,255,255,.1)}
.projs__list li{
  padding:clamp(18px,2vw,26px);border-bottom:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.08);transition:background .28s;
}
.projs__list li:hover{background:rgba(0,194,255,.1)}
.projs__list b{display:block;font-family:var(--dsp);font-size:1.02rem;color:#fff;letter-spacing:-.02em}
.projs__list span{font-family:var(--mno);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--beam2)}

/* ── platforms ─────────────────────────────────────────────── */
.plats{display:flex;flex-wrap:wrap;gap:.7rem}
.plat{
  flex:1 1 250px;background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:1.4rem 1.4rem 1.5rem;transition:transform .28s,border-color .28s,box-shadow .28s;
}
.plat h3{font-size:1.24rem;margin:0 0 .35rem}
.plat p{font-size:.9rem;color:var(--slate)}
.plat:hover{transform:translateY(-4px);border-color:rgba(0,194,255,.45);
  box-shadow:0 26px 46px -32px rgba(4,32,64,.7)}

.split{
  margin-top:clamp(28px,3.4vw,48px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow);
}
.split__img{margin:0}
.split__img img{width:100%;height:100%;aspect-ratio:16/11;object-fit:cover}
.split__tx{padding:clamp(24px,3vw,44px) clamp(24px,3vw,44px) clamp(24px,3vw,44px) 0}
.split__tx h3{font-size:clamp(1.35rem,2.3vw,1.9rem);margin:0 0 .7rem;line-height:1.12}
.split__tx p{color:var(--slate);font-size:.98rem;margin-bottom:1.4rem}

/* ── process rail ──────────────────────────────────────────── */
.rail{display:flex;flex-wrap:wrap;gap:.8rem}
.rail li{
  flex:1 1 265px;position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:1.6rem 1.4rem;transition:transform .28s,border-color .28s,box-shadow .28s;
}
.rail__n{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:11px;font-family:var(--dsp);font-weight:700;font-size:.95rem;color:#fff;
  background:linear-gradient(135deg,var(--ink2),var(--deep));margin-bottom:.9rem;
  box-shadow:0 10px 22px -12px rgba(0,103,204,.9);
}
.rail li:hover{transform:translateY(-4px);border-color:rgba(0,194,255,.45);
  box-shadow:0 26px 46px -32px rgba(4,32,64,.7)}
.rail li:hover .rail__n{background:linear-gradient(135deg,var(--deep),var(--beam))}
.rail h3{font-size:1.08rem;margin:0 0 .4rem}
.rail p{font-size:.91rem;color:var(--slate)}

/* ── homes ─────────────────────────────────────────────────── */
.home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,4.5vw,64px);align-items:center}
.home__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0 1.4rem;margin:1.8rem 0 2.1rem}
.home__list li{display:flex;align-items:center;gap:.6rem;padding:.52rem 0;
  border-bottom:1px solid var(--line2);font-size:.93rem}
.home__list li::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:linear-gradient(130deg,var(--deep),var(--beam));box-shadow:0 0 7px rgba(0,194,255,.7)}
.home__imgs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.home__imgs figure{margin:0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--line)}
.home__imgs img{width:100%;aspect-ratio:16/11;object-fit:cover}
.home__big{grid-column:1/-1}
.home__big img{aspect-ratio:16/9}

/* ── contact ───────────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,60px);align-items:start}
.deets{margin:1.9rem 0 0;border-top:1px solid var(--line)}
.deets > div{display:grid;grid-template-columns:118px minmax(0,1fr);gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--line2);align-items:baseline}
.deets dt{font-family:var(--mno);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate)}
.deets dd{margin:0;font-size:1.02rem;font-weight:600}
.deets a{text-decoration:none;color:var(--deep);transition:color .2s}
.deets a:hover{color:var(--beam)}
.contact__img{margin:2rem 0 0;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow)}
.contact__img img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center 45%}

.formcard{position:relative;border-radius:22px;padding:1.5px;overflow:hidden;
  background:linear-gradient(150deg,rgba(0,194,255,.55),rgba(255,176,32,.35),rgba(0,103,204,.5))}
.formcard__in{position:relative;z-index:1;background:var(--paper);border-radius:21px;
  padding:clamp(24px,3vw,40px);box-shadow:var(--shadow)}

.form__hd{display:flex;align-items:center;gap:.55rem;font-family:var(--mno);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin:0 0 1.6rem}
.f2{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:0 1rem}
.field{margin:0 0 1.05rem;display:block}
.field label{display:block;font-size:.79rem;font-weight:600;letter-spacing:.01em;margin-bottom:.4rem}
.field label i{color:var(--rec);font-style:normal}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--bdy);font-size:.95rem;color:var(--txt);
  background:var(--haze);border:1.5px solid transparent;border-radius:11px;
  padding:.75rem .9rem;transition:border-color .2s,background .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:106px;line-height:1.55}
.field select{
  appearance:none;padding-right:2.2rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2355687E' stroke-width='1.6' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:11px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--beam);background:var(--paper);box-shadow:0 0 0 4px var(--focus)}
.field.is-bad input,.field.is-bad textarea{border-color:var(--rec);background:rgba(255,59,48,.05)}
.err{display:block;font-family:var(--mno);font-size:.69rem;color:var(--rec);margin-top:.3rem}
.hp{position:absolute;left:-9999px;opacity:0;width:0;height:0}
.form__legal{font-size:.82rem;color:var(--slate);margin:0 0 1.3rem;line-height:1.55}
.form__note{font-family:var(--mno);font-size:.77rem;margin:1rem 0 0;line-height:1.5}
.form__note.is-ok{color:#0E8A4F}
.form__note.is-bad{color:var(--rec)}
.form__alt{font-size:.86rem;color:var(--slate);margin:1.3rem 0 0;padding-top:1.2rem;
  border-top:1px solid var(--line2)}
.form__alt a{color:var(--deep);font-weight:600}

/* ── footer ────────────────────────────────────────────────── */
.foot{background:var(--ink);color:rgba(255,255,255,.6);padding:clamp(48px,5.5vw,72px) 0 2rem;
  position:relative;overflow:hidden}
.foot::before{
  content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,194,255,.16),transparent 66%);filter:blur(50px);
}
.foot__in{position:relative;z-index:1;display:grid;gap:1.8rem}
.foot__top{display:flex;flex-wrap:wrap;gap:1.2rem 2.5rem;align-items:center;justify-content:space-between}
.logo--foot .logo--foot .logo--foot .logo--foot .foot__blurb{font-size:.88rem;line-height:1.6}
.foot__nav{display:flex;flex-wrap:wrap;gap:.85rem 1.6rem;padding:1.5rem 0;
  border-block:1px solid rgba(255,255,255,.1)}
.foot__nav a{font-size:.86rem;text-decoration:none;transition:color .2s}
.foot__nav a:hover{color:var(--beam2)}
.foot__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;
  font-family:var(--mno);font-size:.71rem;letter-spacing:.03em}
.foot__by a{color:var(--beam2);text-decoration:none}

/* ── floating WhatsApp ─────────────────────────────────────── */
.wafab{
  position:fixed;right:20px;bottom:20px;z-index:110;width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(140deg,#25D366,#128C7E);
  box-shadow:0 16px 34px -12px rgba(18,140,126,.85);
  transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.wafab svg{width:29px;height:29px;position:relative;z-index:1}
.wafab:hover{transform:scale(1.08)}
.wafab__pulse{position:absolute;inset:0;border-radius:50%;background:rgba(37,211,102,.5);
  animation:fabpulse 2.4s ease-out infinite}
@keyframes fabpulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}

/* ── reveal ────────────────────────────────────────────────── */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .65s cubic-bezier(.2,.8,.3,1),transform .65s cubic-bezier(.2,.8,.3,1)}
.js .reveal.is-in{opacity:1;transform:none}
.js .g3 .reveal:nth-child(2),.js .g3 .reveal:nth-child(5){transition-delay:.08s}
.js .g3 .reveal:nth-child(3),.js .g3 .reveal:nth-child(6){transition-delay:.16s}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width:1120px){
  .nav__links{gap:1rem}
  .nav__links a{font-size:.8rem}
}
@media (max-width:960px){
  .nav__links{
    position:absolute;top:calc(100% + 6px);left:0;right:0;flex-direction:column;gap:0;
    background:rgba(4,16,30,.97);backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:.4rem 1.1rem 1rem;
    box-shadow:0 26px 50px -22px rgba(0,0,0,.7);display:none;
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.95rem}
  .nav__links a::after{display:none}
  .burger{display:flex}
  .nav__act{margin-left:auto}

  .hero__in{grid-template-columns:1fr}
  .feed{order:-1}
  .feed__frame{transform:none}
  .feed__frame img{aspect-ratio:16/10}

  .sim{grid-template-columns:1fr}
  .edge__in,.home,.contact,.split,.projs{grid-template-columns:1fr}
  .split__tx{padding:clamp(22px,3vw,34px)}
  .projs__list{border-left:0;border-top:1px solid rgba(255,255,255,.1)}
  .home__imgs{grid-template-columns:1fr 1fr}
  .foot__meta{flex-direction:column}
}
@media (max-width:600px){
  html{scroll-padding-top:92px}
  .nav__act .cta{display:none}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .cta{width:100%}
  .trust{grid-template-columns:1fr 1fr;gap:.9rem 0}
  .gauges{grid-template-columns:repeat(3,1fr);gap:.4rem}
  .gauge{padding:.55rem .5rem}
  .gauge__k{font-size:.53rem;letter-spacing:.07em}
  .gauge__v{font-size:.94rem}
  .sectors li,.plat,.rail li{flex-basis:100%}
  .deets > div{grid-template-columns:1fr;gap:.1rem}
  .wafab{right:14px;bottom:14px;width:54px;height:54px}
  .sim__chip{font-size:.62rem;padding:.4rem .6rem}
}

/* ── reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .sim__chip{opacity:1}
  .sp-walk{transform:translate(182px,344px);opacity:1}
  .sp-car-g{transform:translate(400px,414px);opacity:1}
}

/* ══════════════════════════════════════════════════════════════
   THEME CHOOSER
   Five complete visual identities over the same content.
   Default (no data-theme) = VOLT.
   Delete this block and the .picker block once a look is chosen.
   ══════════════════════════════════════════════════════════════ */

/* ── STEEL — industrial contractor. Graphite + safety orange. ─ */
html[data-theme="steel"]{
  --page:#F4F5F6; --paper:#FFFFFF; --haze:#E7E9EC; --haze2:#DCDFE3;
  --ink:#16191D; --ink2:#22272E; --ink3:#333A44;
  --txt:#16191D; --slate:#5D666F;
  --beam:#FF6A00; --beam2:#FF9A44; --deep:#D14A00;
  --gold:#FFC300; --gold2:#FFE07A;
  --line:rgba(22,25,29,.14); --line2:rgba(22,25,29,.08);
  --focus:rgba(255,106,0,.16);
  --dsp:"Archivo",ui-sans-serif,system-ui,sans-serif;
}
html[data-theme="steel"] h1,html[data-theme="steel"] h2,
html[data-theme="steel"] h3{font-weight:800;letter-spacing:-.03em;text-transform:none}
html[data-theme="steel"] .gcard,html[data-theme="steel"] .gcard__in,
html[data-theme="steel"] .svc,html[data-theme="steel"] .plat,
html[data-theme="steel"] .rail li,html[data-theme="steel"] .sectors li,
html[data-theme="steel"] .split,html[data-theme="steel"] .projs,
html[data-theme="steel"] .sim__stage,html[data-theme="steel"] .sim__log,
html[data-theme="steel"] .formcard,html[data-theme="steel"] .formcard__in,
html[data-theme="steel"] .nav__bar,html[data-theme="steel"] .feed__frame,
html[data-theme="steel"] .cta,html[data-theme="steel"] .gauge,
html[data-theme="steel"] .home__imgs figure,html[data-theme="steel"] .contact__img,
html[data-theme="steel"] .edge__list li{border-radius:2px}
html[data-theme="steel"] .chips li,html[data-theme="steel"] .pill{border-radius:2px}
html[data-theme="steel"] .tag__n,html[data-theme="steel"] .rail__n,
html[data-theme="steel"] .gcard__ic{border-radius:2px}
html[data-theme="steel"] .mesh{opacity:.3}

/* ── PRESTIGE — hotel register. Ivory, bottle green, brass. ─── */
html[data-theme="prestige"]{
  --page:#FBF8F3; --paper:#FFFDF9; --haze:#F2ECE1; --haze2:#E9E1D2;
  --ink:#10251C; --ink2:#17362A; --ink3:#204638;
  --txt:#10251C; --slate:#5F6A62;
  --beam:#1F6B4F; --beam2:#3E9973; --deep:#134734;
  --gold:#B08641; --gold2:#DFC189;
  --line:rgba(16,37,28,.14); --line2:rgba(16,37,28,.07);
  --focus:rgba(31,107,79,.16);
  --dsp:"Fraunces",Georgia,serif;
}
html[data-theme="prestige"] h1,html[data-theme="prestige"] h2{
  font-weight:600;letter-spacing:-.012em;line-height:1.03}
html[data-theme="prestige"] h3{font-weight:600;letter-spacing:-.01em}
html[data-theme="prestige"] .grad{background-image:linear-gradient(100deg,var(--deep),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="prestige"] .logo__tx b,html[data-theme="prestige"] .logo__mk{color:var(--gold2)}
html[data-theme="prestige"] .nav__bar{background:rgba(16,37,28,.86)}
html[data-theme="prestige"] .nav.is-stuck .nav__bar{background:rgba(16,37,28,.95)}
html[data-theme="prestige"] .cta:not(.cta--out):not(.cta--gold){background:linear-gradient(120deg,var(--ink2),var(--deep))}
html[data-theme="prestige"] .gcard,html[data-theme="prestige"] .svc,
html[data-theme="prestige"] .plat,html[data-theme="prestige"] .rail li,
html[data-theme="prestige"] .sectors li,html[data-theme="prestige"] .chips li{border-radius:4px}
html[data-theme="prestige"] .gcard__in,html[data-theme="prestige"] .formcard__in{border-radius:3px}
html[data-theme="prestige"] .mesh--a{background:radial-gradient(circle,rgba(176,134,65,.32),transparent 68%)}
html[data-theme="prestige"] .mesh--b{background:radial-gradient(circle,rgba(31,107,79,.24),transparent 68%)}
html[data-theme="prestige"] .mesh--c{background:radial-gradient(circle,rgba(176,134,65,.2),transparent 66%)}
html[data-theme="prestige"] .feed__scan{background:linear-gradient(180deg,transparent,rgba(223,193,137,.3),transparent)}
html[data-theme="prestige"] .ticker__row i{background:var(--gold);box-shadow:0 0 8px rgba(176,134,65,.9)}

/* ── NEON — maximum impact. Violet to cyan, huge type. ──────── */
html[data-theme="neon"]{
  --brand:#FD9223;   /* the client's own logo orange — never themed */
  --page:#FFFFFF; --paper:#FFFFFF; --haze:#F3F0FF; --haze2:#E9E3FF;
  --ink:#0B0620; --ink2:#170D3A; --ink3:#241556;
  --txt:#0B0620; --slate:#5F5880;
  --beam:#00E0FF; --beam2:#7CF3FF; --deep:#7B2CFF;
  --gold:#FF2D95; --gold2:#FF7AC0;
  --line:rgba(11,6,32,.10); --line2:rgba(11,6,32,.06);
  --focus:rgba(123,44,255,.18);
  --dsp:"Outfit",ui-sans-serif,system-ui,sans-serif;
}
html[data-theme="neon"] h1,html[data-theme="neon"] h2{font-weight:800;letter-spacing:-.045em;line-height:.96}
html[data-theme="neon"] h3{font-weight:700;letter-spacing:-.03em}
html[data-theme="neon"] .gcard,html[data-theme="neon"] .svc,
html[data-theme="neon"] .plat,html[data-theme="neon"] .rail li,
html[data-theme="neon"] .sectors li{border-radius:24px}
html[data-theme="neon"] .gcard__in{border-radius:23px}
html[data-theme="neon"] .cta{box-shadow:0 16px 40px -12px rgba(123,44,255,.85),inset 0 1px 0 rgba(255,255,255,.3)}
html[data-theme="neon"] .mesh{opacity:.7;filter:blur(80px)}
html[data-theme="neon"] .mesh--a{background:radial-gradient(circle,rgba(0,224,255,.6),transparent 68%)}
html[data-theme="neon"] .mesh--b{background:radial-gradient(circle,rgba(123,44,255,.5),transparent 68%)}
html[data-theme="neon"] .mesh--c{background:radial-gradient(circle,rgba(255,45,149,.4),transparent 66%)}
html[data-theme="neon"] .svc::before{background:linear-gradient(90deg,var(--deep),var(--beam),var(--gold))}

/* ── MIDNIGHT — premium dark. Against the original brief, but
     here in case "not dark" really meant "not badly dark". ──── */
html[data-theme="midnight"]{
  --page:#070B16; --paper:#0F1626; --haze:#0B1220; --haze2:#0F1626;
  --ink:#04070F; --ink2:#0C1526; --ink3:#16243C;
  --txt:#E8EEF7; --slate:#93A2BA;
  --beam:#4FD8FF; --beam2:#9BEDFF; --deep:#1E7BE0;
  --gold:#FFC24D; --gold2:#FFE0A0;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.07);
  --focus:rgba(79,216,255,.18);
  --shadow:0 30px 60px -34px rgba(0,0,0,.8);
  --shadow-lg:0 46px 90px -40px rgba(0,0,0,.9);
  --dsp:"Sora",ui-sans-serif,system-ui,sans-serif;
}
html[data-theme="midnight"] .plan{
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
html[data-theme="midnight"] .sec--tint{background:linear-gradient(180deg,#0B1220,#070B16)}
html[data-theme="midnight"] .sec--plan{background:linear-gradient(180deg,#070B16,#0B1220)}
html[data-theme="midnight"] .sec--contact{background:linear-gradient(180deg,#0B1220,#0F1626)}
html[data-theme="midnight"] .h2--on,html[data-theme="midnight"] .edge__list b,
html[data-theme="midnight"] .projs__hd h3,html[data-theme="midnight"] .projs__list b{color:#fff}
html[data-theme="midnight"] .gauge,html[data-theme="midnight"] .pill{background:rgba(255,255,255,.06)}
html[data-theme="midnight"] .cta--out{color:var(--txt);border-color:rgba(255,255,255,.24)}
html[data-theme="midnight"] .field input,html[data-theme="midnight"] .field select,
html[data-theme="midnight"] .field textarea{background:rgba(255,255,255,.06);color:var(--txt)}
html[data-theme="midnight"] .foot{background:#04070F}
html[data-theme="midnight"] .nav__bar{background:rgba(24,38,62,.88);border-color:rgba(255,255,255,.2)}
html[data-theme="midnight"] .nav.is-stuck .nav__bar{background:rgba(24,38,62,.96)}
html[data-theme="midnight"] .mesh--a{background:radial-gradient(circle,rgba(79,216,255,.34),transparent 68%)}
html[data-theme="midnight"] .mesh--b{background:radial-gradient(circle,rgba(30,123,224,.3),transparent 68%)}

/* ══ the picker itself — REMOVE BEFORE GO-LIVE ═══════════════ */
.picker{
  position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:200;
  display:flex;align-items:center;gap:.55rem;
  max-width:calc(100% - 110px);padding:.45rem .55rem;
  background:rgba(8,14,26,.94);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18);border-radius:14px;
  box-shadow:0 22px 46px -18px rgba(0,0,0,.7);font-family:var(--bdy);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .3s;
}
.picker__hd{
  display:flex;align-items:center;gap:.4rem;flex:none;padding-left:.35rem;
  font-family:var(--mno);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.picker__x{background:none;border:0;color:rgba(255,255,255,.45);cursor:pointer;
  font-size:1.05rem;line-height:1;padding:0 .2rem;order:9}
.picker__x:hover{color:#fff}
.picker__list{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none}
.picker__list::-webkit-scrollbar{display:none}
.picker__b{
  display:flex;align-items:center;gap:.45rem;cursor:pointer;white-space:nowrap;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:9px;padding:.4rem .6rem .4rem .4rem;color:#fff;
  transition:background .2s,border-color .2s;
}
.picker__b:hover{background:rgba(255,255,255,.12)}
.picker__b[aria-pressed="true"]{border-color:#fff;background:rgba(255,255,255,.18)}
.picker__sw{width:22px;height:22px;border-radius:6px;flex:none;border:1px solid rgba(255,255,255,.25)}
.picker__nm{display:block;font-size:.76rem;font-weight:600;line-height:1.1}
.picker__ds{display:none}
.picker__ft{display:none}
.picker.is-hidden{transform:translate(-50%,150%);opacity:0;pointer-events:none}
.picker__open{
  position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:200;display:none;
  background:rgba(8,14,26,.94);color:#fff;border:1px solid rgba(255,255,255,.18);
  border-radius:11px;padding:.6rem .95rem;font-family:var(--mno);font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
}
.picker__open.is-on{display:block}
@media (max-width:760px){
  .picker{left:10px;right:10px;transform:none;max-width:none;bottom:12px;padding:.4rem}
  .picker.is-hidden{transform:translateY(150%)}
  .picker__hd span:first-child{display:none}
  .picker__nm{font-size:.7rem}
  .picker__open{left:12px;transform:none}
}


/* ══════════════════════════════════════════════════════════════
   KELP GULLS
   Three birds at three depths, gliding across the whole page.
   Toggle from the picker bar. Hidden for reduced-motion.
   ══════════════════════════════════════════════════════════════ */
.gulls{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
html.no-gulls .gulls{display:none}

.gull{position:absolute;top:0;left:0;width:130px;will-change:transform}
.gull__b{transform-origin:50% 55%;will-change:transform}
.gull svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 10px 12px rgba(12,28,50,.14))}

.gull__wing{transform-box:view-box;transform-origin:150px 90px;will-change:transform}
.gull__wing--near{animation:flapNear 7.5s cubic-bezier(.42,0,.4,1) infinite}
.gull__wing--far{animation:flapFar 7.5s cubic-bezier(.42,0,.4,1) infinite}

/* four beats, then a long glide — how a gull actually flies */
@keyframes flapNear{
  0%{transform:rotate(-36deg)}
  4%{transform:rotate(31deg)}
  9%{transform:rotate(-34deg)}
  13%{transform:rotate(29deg)}
  18%{transform:rotate(-32deg)}
  22%{transform:rotate(26deg)}
  27%{transform:rotate(-28deg)}
  31%{transform:rotate(6deg)}
  35%,86%{transform:rotate(-3deg)}
  92%{transform:rotate(-30deg)}
  100%{transform:rotate(-36deg)}
}
@keyframes flapFar{
  0%{transform:rotate(30deg)}
  4%{transform:rotate(-26deg)}
  9%{transform:rotate(28deg)}
  13%{transform:rotate(-24deg)}
  18%{transform:rotate(27deg)}
  22%{transform:rotate(-22deg)}
  27%{transform:rotate(24deg)}
  31%{transform:rotate(-5deg)}
  35%,86%{transform:rotate(3deg)}
  92%{transform:rotate(25deg)}
  100%{transform:rotate(30deg)}
}

/* bank and bob, on an offset cycle so it never looks mechanical */
@keyframes bank{
  0%,100%{transform:rotate(-5deg) translateY(0)}
  30%{transform:rotate(4deg) translateY(-13px)}
  62%{transform:rotate(-7deg) translateY(6px)}
}
.gull__b{animation:bank 9s ease-in-out infinite}

/* three crossings, three depths */
.gull--1{width:132px;animation:fly1 38s linear infinite}
.gull--2{width:84px;opacity:.74;animation:fly2 52s linear infinite;animation-delay:-16s}
.gull--3{width:50px;opacity:.46;animation:fly3 66s linear infinite;animation-delay:-38s}
.gull--2 .gull__wing--near,.gull--2 .gull__wing--far{animation-duration:8.4s}
.gull--3 .gull__wing--near,.gull--3 .gull__wing--far{animation-duration:9.6s}
.gull--2 .gull__b{animation-duration:11s}
.gull--3 .gull__b{animation-duration:13s}

@keyframes fly1{
  0%{transform:translate(-20vw,74vh);opacity:0}
  6%{opacity:1}
  30%{transform:translate(26vw,40vh)}
  56%{transform:translate(62vw,58vh)}
  80%{transform:translate(96vw,24vh)}
  94%{opacity:1}
  100%{transform:translate(122vw,12vh);opacity:0}
}
@keyframes fly2{
  0%{transform:translate(118vw,18vh) scaleX(-1);opacity:0}
  8%{opacity:.74}
  34%{transform:translate(74vw,44vh) scaleX(-1)}
  62%{transform:translate(38vw,26vh) scaleX(-1)}
  88%{transform:translate(4vw,52vh) scaleX(-1)}
  92%{opacity:.74}
  100%{transform:translate(-22vw,38vh) scaleX(-1);opacity:0}
}
@keyframes fly3{
  0%{transform:translate(-16vw,22vh);opacity:0}
  10%{opacity:.46}
  40%{transform:translate(34vw,12vh)}
  70%{transform:translate(70vw,30vh)}
  90%{opacity:.46}
  100%{transform:translate(116vw,16vh);opacity:0}
}

/* gull toggle in the picker */
.picker__gull{
  display:flex;align-items:center;gap:.35rem;flex:none;cursor:pointer;white-space:nowrap;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:9px;padding:.42rem .6rem;color:rgba(255,255,255,.55);
  font-family:var(--bdy);font-size:.72rem;font-weight:600;
  transition:background .2s,color .2s,border-color .2s;
}
.picker__gull svg{width:16px;height:16px}
.picker__gull:hover{background:rgba(255,255,255,.12);color:#fff}
.picker__gull[aria-pressed="true"]{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.16)}

@media (max-width:760px){
  .gull--3{display:none}
  .gull--1{width:96px}
  .gull--2{width:64px}
  .picker__gull span{display:none}
}
@media (prefers-reduced-motion:reduce){ .gulls{display:none} }

/* ══════════════════════════════════════════════════════════════
   MULTI-PAGE FURNITURE
   Breadcrumb + page head, the six-door hub on the home page,
   related-page cards, and the dark call-to-action band.
   ══════════════════════════════════════════════════════════════ */

.crumb{display:flex;align-items:center;gap:.55rem;font-family:var(--mno);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:1.3rem}
.crumb a{color:var(--deep);text-decoration:none;border-bottom:1px solid var(--line)}
.crumb a:hover{border-bottom-color:var(--beam)}
.crumb span{opacity:.5}
.crumb b{font-weight:400;color:var(--txt)}

.phero{position:relative;overflow:hidden;
  /* the nav is position:fixed in this build (floating pill at top:14px,
     64px tall), so the page head has to clear 78px before it starts */
  padding:clamp(38px,5vw,72px) 0 clamp(26px,3.4vw,46px);
  background:linear-gradient(180deg,var(--haze),var(--paper));
  border-bottom:1px solid var(--line2)}
.phero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(100% 80% at 15% 0%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(100% 80% at 15% 0%,#000 0%,transparent 75%)}
.phero .wrap{position:relative;z-index:1}
.phero__h1{font-family:var(--dsp);font-weight:700;
  font-size:clamp(1.95rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.032em;margin:0 0 1rem}
.phero__lede{font-size:clamp(1rem,1.35vw,1.12rem);color:var(--slate);max-width:60ch;margin:0}

/* ── the hub ──────────────────────────────────────────────────── */
.hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));
  gap:clamp(14px,1.6vw,20px)}
.hubtile{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,2.3vw,30px);text-decoration:none;color:inherit;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
.hubtile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--deep),var(--beam),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.hubtile:hover{transform:translateY(-5px);border-color:var(--beam);
  box-shadow:0 30px 55px -34px rgba(6,35,64,.55)}
.hubtile:hover::before{transform:scaleX(1)}
.hubtile__ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:13px;margin-bottom:1.15rem;color:#fff;
  background:linear-gradient(135deg,var(--ink2),var(--deep));
  box-shadow:0 12px 26px -14px rgba(6,51,92,.85),inset 0 1px 0 rgba(255,255,255,.22)}
.hubtile__ic svg{width:23px;height:23px}
.hubtile h3{font-size:1.22rem;margin:0 0 .5rem}
.hubtile p{color:var(--slate);font-size:.95rem;margin:0}
.hubtile .mini{margin-top:1rem}
.hubtile__go{margin-top:auto;padding-top:1.2rem;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--bdy);font-weight:600;font-size:.86rem;color:var(--deep)}
.hubtile__go svg{width:16px;height:16px;transition:transform .25s}
.hubtile:hover .hubtile__go svg{transform:translateX(5px)}

/* ── related pages ────────────────────────────────────────────── */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
.relcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:1.5rem 1.5rem 1.3rem;text-decoration:none;color:inherit;
  transition:transform .28s,border-color .28s,box-shadow .28s}
.relcard:hover{transform:translateY(-4px);border-color:var(--beam);
  box-shadow:0 26px 46px -32px rgba(6,35,64,.55)}
.relcard__k{font-family:var(--mno);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--deep);margin-bottom:.6rem}
.relcard h3{font-size:1.12rem;margin:0 0 .4rem}
.relcard p{color:var(--slate);font-size:.9rem;margin:0}
.relcard__go{margin-top:1rem;display:inline-flex;align-items:center;gap:.4rem;
  font-weight:600;font-size:.84rem;color:var(--deep)}
.relcard__go svg{width:15px;height:15px;transition:transform .25s}
.relcard:hover .relcard__go svg{transform:translateX(5px)}

/* ── dark CTA band ────────────────────────────────────────────── */
.ctaband{position:relative;overflow:hidden;background:var(--ink);color:#fff;
  padding:clamp(44px,5.5vw,78px) 0}
.ctaband::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 100% at 85% 20%,rgba(199,152,72,.20),transparent 62%)}
.ctaband__in{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(22px,3vw,52px);align-items:center}
.ctaband .h2{margin-bottom:.8rem}
.ctaband__act{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.cta--onDark{color:#fff;border-color:rgba(255,255,255,.3);background:transparent}
.cta--onDark:hover{color:#fff;border-color:var(--gold);background:rgba(255,255,255,.07)}
.ctaband__tel{flex:1 1 100%;font-family:var(--mno);font-size:.78rem;letter-spacing:.06em;
  color:rgba(255,255,255,.6);margin:.2rem 0 0}
.ctaband__tel a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}

/* ── recent-sites strip ───────────────────────────────────────── */
.strip{display:flex;flex-wrap:wrap;gap:.6rem}
.strip li{flex:1 1 195px;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:1.05rem 1.15rem;transition:transform .25s,border-color .25s}
.strip li:hover{transform:translateY(-3px);border-color:var(--beam)}
.strip b{display:block;font-family:var(--dsp);font-weight:700;font-size:1rem;letter-spacing:-.02em}
.strip span{font-family:var(--mno);font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--deep)}
.strip__more{margin-top:1.5rem}
.strip__more a{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.92rem;
  color:var(--deep);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.strip__more a:hover{border-bottom-color:var(--beam)}
.strip__more svg{width:16px;height:16px;transition:transform .25s}
.strip__more a:hover svg{transform:translateX(5px)}

.nav__links a.is-page{color:#fff}
.nav__links a.is-page::after{right:0}

@media (max-width:960px){
}
@media (max-width:820px){
  .ctaband__in{grid-template-columns:1fr}
  .strip li{flex-basis:100%}
}


/* ══════════════════════════════════════════════════════════════
   BRAND MARK — used in the footer only (the header banner is
   handled in the "BANNER MERGED INTO THE NAV BAR" block below).
   ══════════════════════════════════════════════════════════════ */


/* MIDNIGHT is the one dark-page theme, so the white slab would jar —
   show the knockout logo on the page colour instead. */
html[data-theme="midnight"] html[data-theme="midnight"] 

/* ══════════════════════════════════════════════════════════════
   BANNER MERGED INTO THE NAV BAR
   The banner is not a block above the header any more — it sits
   flush at the LEFT END of the same bar that carries the links,
   and the bar's own background is a gradient sampled from the
   banner's right edge so the two meet with no visible seam.
   ══════════════════════════════════════════════════════════════ */
.logo{display:block;flex:none;line-height:0;text-decoration:none;align-self:stretch}
.logo__banner{
  height:100%;width:auto;display:block;border-radius:15px 0 0 15px;
  /* dissolve the artwork's right edge into the bar so there is no seam */
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 74%,rgba(0,0,0,.55) 90%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0%,#000 74%,rgba(0,0,0,.55) 90%,transparent 100%);
  transition:transform .45s cubic-bezier(.2,.8,.3,1),filter .45s;
}
.logo:hover .logo__banner{transform:scale(1.02);filter:brightness(1.08)}

/* the links sit on the banner's own colour, so lift them for contrast */
.nav__links a{color:rgba(255,255,255,.78);text-shadow:0 1px 3px rgba(0,0,0,.55)}
.nav__links a:hover,.nav__links a.is-on,.nav__links a.is-page{color:#fff}
.burger{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28)}


/* the floating pill keeps its shape; the banner is clipped to the radius */
.nav__bar{border-radius:16px}
/* themes must not repaint the bar — the banner artwork owns it */
html[data-theme="prestige"] .nav__bar,
html[data-theme="prestige"] .nav.is-stuck .nav__bar,
html[data-theme="midnight"] .nav__bar,
html[data-theme="midnight"] .nav.is-stuck .nav__bar,
.nav.is-stuck .nav__bar{background:linear-gradient(180deg,#000000 0%,#00040F 5%,#010A1A 10%,#001023 15%,#00152B 20%,#001A32 25%,#001F3B 30%,#013457 35%,#002847 40%,#002D4E 45%,#003153 50%,#01355A 55%,#003B5E 60%,#003E65 65%,#00426D 70%,#004A75 75%,#01507D 80%,#005685 85%,#005E8E 90%,#006395 95%,#000103 100%)}

/* footer keeps the wordmark on its own, not the banner strip */
.logo--foot{display:block;line-height:0;align-self:auto}
.logo--foot .logo__img{height:clamp(36px,5vw,48px);width:auto;display:block}


/* With the banner at full size the link row no longer fits beside it much
   below 1180px, so the burger takes over earlier than the rest of the
   mobile layout does. */
@media (max-width:1180px){
  .nav__links{
    position:absolute;top:calc(100% + 6px);left:0;right:0;flex-direction:column;gap:0;
    background:rgba(4,16,30,.97);backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:.4rem 1.1rem 1rem;
    box-shadow:0 26px 50px -22px rgba(0,0,0,.7);display:none;
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.95rem}
  .nav__links a::after{display:none}
  .burger{display:flex}
  .nav__act{margin-left:auto}
}

/* Bar height ladder. Above 1180 the banner shares the bar with the full
   link row, so it is capped by what is left over. Below 1180 the links
   have collapsed into the burger and the banner can run at full size
   until the screen itself becomes the limit. */
@media (max-width:1450px){ .nav__bar{height:120px} }
@media (max-width:1340px){ .nav__bar{height:106px} }
@media (max-width:1250px){ .nav__bar{height:96px} }
@media (max-width:1180px){ .nav__bar{height:129px} }
@media (max-width:900px){  .nav__bar{height:104px} }
@media (max-width:820px){  .nav__bar{height:92px} }
@media (max-width:700px){  .nav__bar{height:80px} }
/* On a phone the full 5:1 artwork can only ever be as tall as the screen
   is wide, which leaves the logo tiny. Below 600px the image is cropped to
   its left end instead — the logo and grid stay, the camera at the far
   right is dropped — so the brand can run at nearly twice the height. */
@media (max-width:600px){
  .nav__bar{height:100px}
  .logo__banner{
    width:min(300px, calc(100vw - 118px));
    object-fit:cover;object-position:left center;
  }
}
@media (max-width:430px){ .nav__bar{height:92px} }
@media (max-width:400px){ .nav__bar{height:86px} }
@media (max-width:360px){ .nav__bar{height:78px} }
@media (max-width:330px){ .nav__bar{height:68px} }


/* ══════════════════════════════════════════════════════════════
   MONITOR GLARE ON THE BUTTONS
   The same flash that runs across the "PERIMETER — WEST" camera
   panel in the hero, reused on every call-to-action so the buttons
   read as lit screens rather than flat shapes.
   ══════════════════════════════════════════════════════════════ */
.cta > *{position:relative;z-index:2}
.cta::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  top:-70%;bottom:-70%;width:22%;left:-40%;
  background:linear-gradient(100deg,
    transparent 0%,rgba(255,255,255,.10) 30%,rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.10) 70%,transparent 100%);
  transform:skewX(-18deg);filter:blur(2.5px);
  animation:ctaGlare 6.4s cubic-bezier(.4,0,.5,1) infinite;
}
@keyframes ctaGlare{
  0%,68%{left:-40%;opacity:0}
  70%{opacity:1}
  96%{opacity:1}
  100%{left:132%;opacity:0}
}
/* stagger so they never all flash on the same beat */
.cta--lg::before{animation-duration:7.6s;animation-delay:1.1s}
.cta--out::before{animation-duration:8.4s;animation-delay:2.3s;
  background:linear-gradient(100deg,transparent,rgba(0,194,255,.30),transparent)}
.cta--gold::before{animation-duration:6.9s;animation-delay:.6s}
.cta--full::before{animation-duration:8s;animation-delay:1.7s}
@media (prefers-reduced-motion:reduce){ .cta::before{animation:none;opacity:0} }

/* ══════════════════════════════════════════════════════════════
   REWIND — the back-to-top control
   Styled as a DVR transport button rather than a generic arrow.
   The ring around it is the scroll position: it fills as you go
   down the page and empties as you rewind. It scrolls the CURRENT
   page only, so it behaves identically on every sub-page and can
   never be confused with the "Homes" link.
   ══════════════════════════════════════════════════════════════ */
.rewind{
  position:fixed;left:22px;bottom:22px;z-index:110;
  width:58px;height:58px;padding:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,18,34,.82);backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 16px 34px -14px rgba(0,10,24,.8);
  opacity:0;transform:translateY(18px) scale(.85);pointer-events:none;
  transition:opacity .38s cubic-bezier(.2,.8,.3,1),
             transform .38s cubic-bezier(.2,.8,.3,1),
             width .34s cubic-bezier(.2,.8,.3,1),
             border-radius .34s cubic-bezier(.2,.8,.3,1);
  overflow:hidden;
}
.rewind.is-on{opacity:1;transform:none;pointer-events:auto}
.rewind__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.rewind__ring circle{fill:none;stroke-width:2.4}
.rewind__track{stroke:rgba(255,255,255,.14)}
.rewind__prog{stroke:#00C2FF;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(0,194,255,.9));
  transition:stroke-dashoffset .12s linear}
.rewind__ic{display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex:none;color:#fff;transition:transform .34s cubic-bezier(.2,.8,.3,1)}
.rewind__ic svg{width:100%;height:100%}
.rewind__tx{
  font-family:var(--mno);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;white-space:nowrap;max-width:0;opacity:0;overflow:hidden;
  transition:max-width .34s cubic-bezier(.2,.8,.3,1),opacity .24s,margin .34s;
}
/* expands into a labelled transport control on hover */
.rewind:hover,.rewind:focus-visible{width:186px;border-radius:30px;
  border-color:rgba(0,194,255,.55);box-shadow:0 20px 40px -14px rgba(0,120,190,.9)}
.rewind:hover .rewind__tx,.rewind:focus-visible .rewind__tx{max-width:130px;opacity:1;margin-left:.6rem}
.rewind:hover .rewind__ic,.rewind:focus-visible .rewind__ic{transform:translateX(-2px)}
.rewind:hover .rewind__ring,.rewind:focus-visible .rewind__ring{opacity:0;transition:opacity .2s}
.rewind:active{transform:scale(.94)}
/* a quick tape-rewind spin when it is actually used */
.rewind.is-running .rewind__ic{animation:rewindSpin .55s cubic-bezier(.4,0,.3,1) 2}
@keyframes rewindSpin{0%{transform:translateY(0)}45%{transform:translateY(-13px);opacity:0}
  46%{transform:translateY(13px);opacity:0}100%{transform:translateY(0);opacity:1}}

@media (max-width:600px){
  .rewind{left:14px;bottom:14px;width:50px;height:50px}
  .rewind__ic{width:19px;height:19px}
  .rewind:hover,.rewind:focus-visible{width:50px;border-radius:50%}
  .rewind:hover .rewind__tx,.rewind:focus-visible .rewind__tx{max-width:0;opacity:0;margin-left:0}
  .rewind:hover .rewind__ring{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .rewind{transition:opacity .2s}
  .rewind.is-running .rewind__ic{animation:none}
}

/* clear the theme picker bar, which is fixed to the bottom on this build */
@media (max-width:760px){ .rewind{bottom:80px} }