/* ═══════════════════════════════════════════════════════
   ENERGY BASICS — v2 "High Voltage"
   Heavy Archivo display · black / electric yellow · CSS 3D
   ═══════════════════════════════════════════════════════ */

:root{
  --ink:      #08080A;
  --ink-2:    #0E0E12;
  --ink-3:    #16161C;
  --paper:    #F2F0EA;
  --paper-2:  #E7E4DB;
  --white:    #FFFFFF;

  --volt:     #FFE600;
  --volt-2:   #FFF35C;
  --volt-ink: #B8A500;

  --mute:     rgba(255,255,255,.58);
  --mute-ink: rgba(8,8,10,.62);
  --line:     rgba(255,255,255,.13);
  --line-ink: rgba(8,8,10,.14);

  --shell:    1320px;
  --pad:      clamp(20px, 4.5vw, 56px);

  --e:        cubic-bezier(.16,.84,.28,1);
  --e-out:    cubic-bezier(.2,.7,.2,1);

  --r-sm:     14px;
  --r-md:     18px;
  --r-lg:     26px;
  --r-xl:     34px;
  --r-pill:   999px;

  --disp: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --ui:   "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
svg{ display:block; }

::selection{ background:var(--volt); color:var(--ink); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  border-radius:0 0 var(--r-md) 0;
  background:var(--volt); color:var(--ink);
  padding:12px 20px; font-weight:700;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--volt); outline-offset:3px; }

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

/* ── Scroll progress ─────────────────────────── */
.progress{
  position:fixed; top:0; left:0; z-index:200;
  height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--volt),var(--volt-2));
  box-shadow:0 0 18px rgba(255,230,0,.55);
  will-change:transform;
}

/* ═══════════ TYPE ═══════════ */

.h2{
  font-family:var(--disp);
  font-weight:900;
  font-stretch:118%;
  font-size:clamp(2.6rem, 6.6vw, 6.4rem);
  line-height:.86;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--white);
}
.h2--sm{ font-size:clamp(2.2rem, 4.4vw, 4.2rem); }
.h2--ink{ color:var(--ink); }

.h2__out{
  color:transparent;
  -webkit-text-stroke:2px var(--volt);
  paint-order:stroke fill;
}
.h2__out--ink{ -webkit-text-stroke-color:var(--ink); }

.tag{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--ui); font-weight:700;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--volt);
  margin-bottom:26px;
}
.tag b{ width:9px; height:9px; border-radius:50%; background:var(--volt); flex:none;
        box-shadow:0 0 14px rgba(255,230,0,.8); }
.tag--ink{ color:var(--ink); }
.tag--ink b{ background:var(--ink); box-shadow:none; }

.lede{
  font-size:clamp(1rem, 1.3vw, 1.14rem);
  line-height:1.7; color:var(--mute); max-width:56ch;
}
.lede--ink{ color:var(--mute-ink); }
.lede + .lede{ margin-top:1em; }

/* ═══════════ BUTTONS ═══════════ */

.btn{
  --bg:var(--volt); --fg:var(--ink); --bd:var(--volt);
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:12px;
  padding:17px 32px;
  border:2px solid var(--bd);
  border-radius:var(--r-pill);
  background:var(--bg); color:var(--fg);
  font-family:var(--ui); font-weight:700; font-size:.9rem;
  letter-spacing:.02em; text-transform:uppercase;
  cursor:pointer; overflow:hidden;
  transition:color .3s var(--e-out), border-color .3s var(--e-out), transform .25s var(--e-out);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--fg);
  transform:translate3d(0,101%,0);
  transition:transform .45s var(--e);
}
.btn em{ font-style:normal; transition:transform .35s var(--e-out); }
.btn:hover{ color:var(--bg); }
.btn:hover::before{ transform:translate3d(0,0,0); }
.btn:hover em{ transform:translateX(6px); }
.btn:active{ transform:scale(.97); }

.btn--wire{ --bg:transparent; --fg:var(--white); --bd:rgba(255,255,255,.4); }
.btn--wire::before{ background:var(--white); }
.btn--wire:hover{ color:var(--ink); border-color:var(--white); }

.btn--ink{ --bg:var(--ink); --fg:var(--white); --bd:var(--ink); }
.btn--ink::before{ background:var(--volt); }
.btn--ink:hover{ color:var(--ink); }

.btn--sm{ padding:12px 20px; font-size:.78rem; }
.btn--full{ width:100%; justify-content:center; }

/* ═══════════ NAV ═══════════ */

.nav{
  position:fixed; inset:3px 0 auto 0; z-index:150;
  padding-block:18px;
  transition:background .35s var(--e-out), padding .35s var(--e-out), border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.stuck{ padding-block:10px; }

.nav__in{
  display:flex; align-items:center; gap:26px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  transition:padding .4s var(--e-out), background .4s var(--e-out),
             border-color .4s var(--e-out), box-shadow .4s var(--e-out);
}
.nav.stuck .nav__in{
  width:calc(100% - var(--pad)*2);
  max-width:calc(var(--shell) - var(--pad)*2);
  margin-inline:auto;
  padding-inline:24px 10px;
  background:rgba(8,8,10,.74);
  backdrop-filter:blur(22px) saturate(155%);
  -webkit-backdrop-filter:blur(22px) saturate(155%);
  border-color:var(--line);
  box-shadow:0 26px 54px -32px rgba(0,0,0,.95);
}

.brand{ display:flex; align-items:center; flex:none; }
.brand img{
  height:38px; width:auto;
  transition:transform .4s var(--e), opacity .3s var(--e-out);
}
.brand:hover img{ transform:scale(1.04); opacity:.88; }
.foot .brand img{ height:46px; }

.nav__links{ display:flex; gap:2px; margin-left:auto; }
.nav__links a{
  position:relative;
  display:flex; align-items:baseline; gap:7px;
  padding:10px 15px;
  font-family:var(--ui); font-weight:500; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
  transition:color .3s var(--e-out);
}
.nav__links a i{ font-style:normal; font-size:.6rem; color:var(--volt); opacity:.6; }
.nav__links a::after{
  content:""; position:absolute; left:15px; right:15px; bottom:5px;
  height:2px; background:var(--volt);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .35s var(--e);
}
.nav__links a:hover{ color:var(--white); }
.nav__links a:hover::after{ transform:scaleX(1); }

.nav__act{ display:flex; align-items:center; gap:12px; }

.burger{
  display:none; width:46px; height:46px;
  border:2px solid rgba(255,255,255,.3); border-radius:50%; background:transparent;
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.burger span{ width:18px; height:2px; background:var(--white); transition:transform .3s var(--e); }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

.mnav{
  position:fixed; inset:72px 0 auto 0; z-index:149;
  background:rgba(8,8,10,.97);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--line);
  border-radius:0 0 var(--r-xl) var(--r-xl);
  padding:12px var(--pad) 34px;
  display:flex; flex-direction:column;
}
.mnav[hidden]{ display:none; }
.mnav a{
  display:flex; align-items:baseline; gap:14px;
  padding:18px 0; border-bottom:1px solid var(--line);
  font-family:var(--disp); font-weight:900; font-stretch:115%;
  font-size:1.7rem; text-transform:uppercase; letter-spacing:-.02em;
}
.mnav a i{ font-style:normal; font-family:var(--ui); font-size:.7rem;
           font-weight:700; letter-spacing:.2em; color:var(--volt); }

/* ═══════════ HERO ═══════════ */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:128px;
  background:var(--ink);
  overflow:hidden;
  isolation:isolate;
}

.hero__grid{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; opacity:.85;
}

.hero__photo{ position:absolute; inset:-4% -4% -4% 32%; z-index:-1; }
.hero__photo img,
.hero__photo video{
  width:100%; height:100%; object-fit:cover;
  object-position:60% 55%;
  opacity:1;
  mask-image:linear-gradient(100deg, transparent 0%, rgba(0,0,0,.6) 26%, #000 62%);
  -webkit-mask-image:linear-gradient(100deg, transparent 0%, rgba(0,0,0,.6) 26%, #000 62%);
}
.hero__veil{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 8% 82%, rgba(8,8,10,.86) 0%, rgba(8,8,10,.3) 48%, transparent 80%),
    linear-gradient(to bottom, rgba(8,8,10,.8) 0%, transparent 34%, rgba(8,8,10,.5) 100%);
}

.hero__in{
  position:relative; z-index:2;
  padding-bottom:40px;
  perspective:1100px;
}
.hero__deck{ transform-style:preserve-3d; will-change:transform; }

.hero__h1{
  font-family:var(--disp); font-weight:900; font-stretch:122%;
  font-size:clamp(2.1rem, 11vw, 9.2rem);
  line-height:.82;
  letter-spacing:-.05em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.hero__h1 .ln{ display:block; }
.hero__h1 .ln--out{
  color:transparent;
  -webkit-text-stroke:clamp(1.5px,.28vw,3.5px) var(--volt);
}

.hero__sub{
  font-family:var(--ui); font-weight:700;
  font-size:clamp(.8rem, 1.35vw, 1.05rem);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--volt);
  margin-bottom:18px;
}

.hero__lede{
  font-size:clamp(.98rem, 1.25vw, 1.1rem);
  line-height:1.68; color:rgba(255,255,255,.72);
  max-width:48ch; margin-bottom:26px;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__strip{
  position:relative; z-index:2;
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(12px,2.4vw,26px);
  padding:18px var(--pad);
  border-top:1px solid var(--line);
  background:rgba(8,8,10,.5);
  backdrop-filter:blur(10px);
  font-family:var(--ui); font-weight:500;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.hero__strip i{ width:5px; height:5px; border-radius:50%; background:var(--volt); }
.hero__scroll{
  margin-left:auto; display:flex; align-items:center; gap:9px;
  color:var(--volt); font-weight:700;
}
.hero__scroll em{ font-style:normal; animation:bob 1.8s var(--e) infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* ═══════════ 3D TICKER BAND ═══════════ */

.band3d{
  background:var(--ink);
  padding-block:34px 26px;
  perspective:420px;
  overflow:hidden;
}
.band3d__row{ transform:rotateX(26deg); transform-origin:50% 100%; }
.band3d__track{
  display:flex; align-items:center; gap:30px;
  width:max-content;
  padding-block:16px;
  background:var(--volt);
  color:var(--ink);
  font-family:var(--disp); font-weight:900; font-stretch:112%;
  font-size:clamp(1.1rem,2.2vw,1.9rem);
  text-transform:uppercase; letter-spacing:-.01em; white-space:nowrap;
  box-shadow:0 20px 60px -18px rgba(255,230,0,.4);
  animation:slide 40s linear infinite;
}
.band3d__track b{ font-size:.7em; opacity:.55; }
@keyframes slide{ to{ transform:translate3d(-50%,0,0); } }

/* ═══════════ SECTIONS ═══════════ */

.sec{ padding-block:clamp(78px, 9vw, 148px); position:relative; }
.sec--dark{ background:var(--ink); }
.sec--ink{ background:var(--ink-2); }
.sec--creds{ background:var(--ink-3); }
.sec--paper{ background:var(--paper); color:var(--ink); }

.head{ margin-bottom:clamp(44px, 5.5vw, 76px); max-width:1000px; }
.head__note{
  margin-top:26px; max-width:46ch;
  color:var(--mute); font-size:1rem;
}
.sec--paper .head__note{ color:var(--mute-ink); }

/* ═══════════ SERVICE TILT CARDS ═══════════ */

.deck{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:18px;
  perspective:1200px;
}
.tilt{ transform-style:preserve-3d; }
.tilt__in{
  position:relative; height:100%;
  padding:clamp(26px,2.6vw,36px);
  background:linear-gradient(160deg, var(--ink-3) 0%, var(--ink-2) 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  display:flex; flex-direction:column;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform .45s var(--e-out), border-color .45s, box-shadow .45s;
  will-change:transform;
}
.tilt:hover .tilt__in{
  border-color:rgba(255,230,0,.5);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,230,0,.12);
  transition:transform .1s linear, border-color .45s, box-shadow .45s;
}
.tilt__glare{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,230,0,.16), transparent 62%);
  transition:opacity .4s var(--e-out);
}
.tilt:hover .tilt__glare{ opacity:1; }

.tilt__no{
  font-family:var(--disp); font-weight:900; font-stretch:115%;
  font-size:2.6rem; line-height:1; color:transparent;
  -webkit-text-stroke:1.5px rgba(255,230,0,.45);
  transform:translateZ(28px);
  transition:-webkit-text-stroke-color .4s;
}
.tilt:hover .tilt__no{ -webkit-text-stroke-color:var(--volt); }

.tilt__ico{
  width:64px; height:64px; margin:22px 0 20px;
  display:grid; place-items:center;
  background:var(--volt);
  border-radius:var(--r-md);
  transform:translateZ(44px);
  transition:transform .5s var(--e);
}
.tilt:hover .tilt__ico{ transform:translateZ(58px) rotate(-8deg) scale(1.05); }
.tilt__ico img{
  width:38px; height:38px; object-fit:contain;
}

.tilt h3{
  font-family:var(--disp); font-weight:800; font-stretch:110%;
  font-size:1.28rem; line-height:1.14; letter-spacing:-.02em;
  text-transform:uppercase; margin-bottom:12px;
  transform:translateZ(34px);
}
.tilt p{
  font-size:.94rem; line-height:1.62; color:var(--mute);
  transform:translateZ(22px);
}
.tilt__go{
  margin-top:auto; padding-top:26px;
  font-size:1.3rem; color:var(--volt);
  opacity:0; transform:translateZ(30px) translateX(-10px);
  transition:opacity .4s var(--e-out), transform .4s var(--e-out);
}
.tilt:hover .tilt__go{ opacity:1; transform:translateZ(46px) translateX(0); }

/* ═══════════ SPLIT + FRAMES ═══════════ */

.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(34px, 5vw, 84px);
  align-items:center;
  perspective:1400px;
}
.split--rev .frame{ order:2; }

.frame{
  position:relative; margin:0; overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform .5s var(--e-out), box-shadow .5s;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9);
  will-change:transform;
}
.frame img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform 1.1s var(--e);
}
.frame:hover img{ transform:scale(1.06); }
.frame--ink{
  border:1px solid rgba(8,8,10,.1);
  box-shadow:0 44px 84px -44px rgba(8,8,10,.55);
}
.frame--tall img{ aspect-ratio:auto; height:100%; min-height:520px; }
.sec--why .split{ align-items:stretch; }
.sec--why .frame{ min-height:100%; }

.frame figcaption{
  position:absolute; left:18px; bottom:18px;
  padding:11px 20px;
  border-radius:var(--r-pill);
  background:var(--volt); color:var(--ink);
  font-family:var(--ui); font-weight:700;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  transform:translateZ(30px);
}

.split__body .h2{ margin-bottom:24px; }
.split__body .btn{ margin-top:32px; }

.checks{ margin-top:30px; display:grid; gap:15px; }
.checks li{
  position:relative; padding-left:38px;
  color:rgba(255,255,255,.74); font-size:.98rem;
}
.checks li::before{
  content:""; position:absolute; left:0; top:.28em;
  width:22px; height:22px; border-radius:50%; background:var(--volt);
}
.checks li::after{
  content:""; position:absolute; left:7.5px; top:.68em;
  width:8px; height:4px;
  border-left:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(-45deg);
}

/* ═══════════ CREDENTIALS + CUBE ═══════════ */

.creds{
  display:grid; grid-template-columns:1fr auto;
  gap:clamp(40px,6vw,90px); align-items:center;
}
.cube-stage{
  position:relative;
  width:min(330px, 62vw); height:min(330px, 62vw);
  display:grid; place-items:center;
  perspective:900px;
}
.cube{
  --s:110px;
  position:relative; width:calc(var(--s)*2); height:calc(var(--s)*2);
  transform-style:preserve-3d;
  animation:spin 18s linear infinite;
  will-change:transform;
}
@keyframes spin{
  from{ transform:rotateX(-22deg) rotateY(0deg); }
  to  { transform:rotateX(-22deg) rotateY(360deg); }
}
.cube__f{
  position:absolute; inset:0;
  display:grid; place-items:center; text-align:center;
  font-family:var(--disp); font-weight:900; font-stretch:112%;
  font-size:1.35rem; line-height:1.05; letter-spacing:-.01em;
  text-transform:uppercase;
  border:2px solid var(--volt);
  border-radius:22px;
  background:rgba(255,230,0,.08);
  backdrop-filter:blur(2px);
  color:var(--volt);
  box-shadow:inset 0 0 40px rgba(255,230,0,.14);
  backface-visibility:hidden;
}
.cube__f--fr{ transform:translateZ(var(--s)); }
.cube__f--bk{ transform:rotateY(180deg) translateZ(var(--s)); }
.cube__f--rt{ transform:rotateY(90deg)  translateZ(var(--s)); }
.cube__f--lf{ transform:rotateY(-90deg) translateZ(var(--s)); }
.cube__f--tp{ transform:rotateX(90deg)  translateZ(var(--s)); }
.cube__f--bt{ transform:rotateX(-90deg) translateZ(var(--s)); font-size:3rem; }

.cube__shadow{
  position:absolute; bottom:6%; left:50%;
  width:58%; height:16px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(255,230,0,.3), transparent 70%);
  filter:blur(9px);
  animation:pulse 18s var(--e) infinite;
}
@keyframes pulse{ 0%,100%{opacity:.55;width:58%} 50%{opacity:.9;width:66%} }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  margin-top:clamp(52px,6vw,86px);
}
.stat{ background:var(--ink-3); padding:clamp(26px,3vw,40px) 10px; text-align:center; }
.stat dt{
  font-family:var(--disp); font-weight:900; font-stretch:118%;
  font-size:clamp(2.6rem,5.4vw,4.6rem); line-height:.9;
  letter-spacing:-.05em; color:var(--volt);
  font-variant-numeric:tabular-nums;
}
.stat dd{
  margin-top:12px; font-size:.74rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
}

/* ═══════════ CTA BAND ═══════════ */

.cta3d{
  position:relative; overflow:hidden;
  padding-block:clamp(100px,13vw,190px);
  background:var(--ink);
}
.cta3d__bg{ position:absolute; inset:-8%; }
.cta3d__bg img{ width:100%; height:100%; object-fit:cover; }
.cta3d__veil{
  position:absolute; inset:0;
  background:linear-gradient(96deg, rgba(8,8,10,.9) 0%, rgba(8,8,10,.68) 40%, transparent 100%);
}
.cta3d__in{ position:relative; }
.cta3d__in .h2{ margin-bottom:26px; }
.cta3d__in .hero__cta{ margin-top:36px; }

/* ═══════════ PROJECT ROWS ═══════════ */

.rows{ display:grid; gap:12px; }
.row{
  position:relative; isolation:isolate;
  display:grid;
  grid-template-columns:80px minmax(0,1.15fr) minmax(0,.95fr) 60px;
  grid-template-areas:
    "no title note go"
    "no tag   note go";
  align-items:center; gap:0 26px;
  padding:clamp(26px,3.2vw,40px) clamp(22px,2.6vw,34px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.02);
  cursor:pointer; overflow:hidden;
  transition:transform .45s var(--e), border-color .45s var(--e);
}
.row::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--volt); border-radius:inherit;
  transform:scaleY(0); transform-origin:50% 100%;
  transition:transform .45s var(--e);
}
.row:hover{ transform:translateX(12px); border-color:var(--volt); color:var(--ink); }
.row:hover::before{ transform:scaleY(1); }

.row__no{
  grid-area:no; align-self:center;
  font-family:var(--disp); font-weight:900; font-stretch:115%;
  font-size:1.05rem; color:var(--volt);
  transition:color .45s var(--e);
}
.row:hover .row__no{ color:var(--ink); }

.row h3{
  grid-area:title; align-self:end;
  font-family:var(--disp); font-weight:900; font-stretch:118%;
  font-size:clamp(1.6rem,3.4vw,3rem); line-height:.92;
  letter-spacing:-.035em; text-transform:uppercase;
}
.row__tag{
  grid-area:tag; align-self:start;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute); margin-top:10px;
  transition:color .45s var(--e);
}
.row:hover .row__tag{ color:rgba(8,8,10,.66); }
.row__note{
  grid-area:note; align-self:center;
  font-size:.96rem; color:var(--mute);
  transition:color .45s var(--e);
}
.row:hover .row__note{ color:rgba(8,8,10,.74); }

.row__go{
  grid-area:go; align-self:center;
  justify-self:end; width:52px; height:52px;
  display:grid; place-items:center;
  border:2px solid var(--line); border-radius:50%; font-size:1.15rem;
  transition:transform .45s var(--e), background .45s, border-color .45s, color .45s;
}
.row:hover .row__go{
  background:var(--ink); border-color:var(--ink);
  color:var(--volt); transform:rotate(-45deg);
}

/* floating 3D preview that follows the cursor */
.peek{
  position:fixed; top:0; left:0; z-index:120;
  width:280px; height:200px;
  margin:-100px 0 0 -140px;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-100vw,0,0) rotateY(0deg) scale(.85);
  transition:opacity .35s var(--e-out), transform .1s linear;
  will-change:transform,opacity;
  border:2px solid var(--volt);
  border-radius:var(--r-lg);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  overflow:hidden;
}
.peek.on{ opacity:1; }
.peek img{ width:100%; height:100%; object-fit:cover; }

/* ═══════════ WHY ═══════════ */

.whys{ margin-top:36px; }
.why{
  display:grid; grid-template-columns:auto 1fr; gap:22px;
  padding:24px 0; border-top:1px solid var(--line);
}
.why:last-child{ border-bottom:1px solid var(--line); }
.why > span{
  font-family:var(--disp); font-weight:900; font-stretch:115%;
  font-size:.9rem; color:var(--volt); padding-top:4px;
}
.why h3{
  font-family:var(--disp); font-weight:800; font-stretch:110%;
  font-size:1.1rem; text-transform:uppercase; letter-spacing:-.015em;
  margin-bottom:7px;
}
.why p{ color:var(--mute); font-size:.94rem; }
.sec--why .hero__cta{ margin-top:38px; }

/* ═══════════ QUOTE ═══════════ */

.quote{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:start; }
.quote__copy .h2{ margin-bottom:24px; }
.quote__copy .lede{ margin-bottom:38px; }

.contacts{ display:grid; }
.contacts li{
  display:grid; grid-template-columns:140px 1fr; gap:16px;
  align-items:baseline; padding:16px 0;
  border-top:1px solid var(--line-ink);
}
.contacts li:last-child{ border-bottom:1px solid var(--line-ink); }
.contacts span{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-ink);
}
.contacts a{
  font-family:var(--disp); font-weight:800; font-stretch:108%;
  font-size:1rem; word-break:break-word;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-size:0 2px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .4s var(--e);
}
.contacts a:hover{ background-size:100% 2px; }

.form{
  background:var(--white);
  border:1px solid rgba(8,8,10,.09);
  border-radius:var(--r-xl);
  padding:clamp(26px,3vw,42px);
  display:grid; gap:16px;
  box-shadow:0 34px 74px -38px rgba(8,8,10,.5);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:8px; }
.field > span{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute-ink); font-weight:700;
}
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px;
  background:var(--paper);
  border:1.5px solid rgba(8,8,10,.13);
  border-radius:var(--r-sm);
  font-size:.95rem;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.field textarea{ resize:vertical; min-height:112px; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(8,8,10,.34); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ink); background:var(--white);
  box-shadow:0 0 0 4px rgba(255,230,0,.55);
}
.field input:user-invalid{ border-color:#C4453B; }
.form__note{ font-size:.8rem; color:var(--mute-ink); text-align:center; }
.form__note.ok{ color:#12703B; font-weight:700; }

/* ═══════════ FOOTER ═══════════ */

.foot{ background:var(--ink); padding-block:clamp(56px,6vw,80px) 30px; color:var(--mute); }

.foot__giant{
  font-family:var(--disp); font-weight:900; font-stretch:125%;
  font-size:clamp(3rem, 13vw, 12rem);
  line-height:.78; letter-spacing:-.05em; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.14);
  margin-bottom:clamp(40px,5vw,72px);
  user-select:none;
}

.foot__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr;
  gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(38px,4.5vw,60px);
  border-bottom:1px solid var(--line);
}
.foot__brand .brand{ margin-bottom:22px; }
.foot__brand p{ max-width:30ch; font-size:.94rem; }

.foot__col{ display:flex; flex-direction:column; gap:11px; align-items:flex-start; }
.foot__col h4{
  font-family:var(--ui); font-weight:700; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--volt); margin-bottom:14px;
}
.foot__col a{ font-size:.92rem; transition:color .3s, transform .3s var(--e); }
.foot__col a:hover{ color:var(--volt); transform:translateX(4px); }

.foot__end{
  display:flex; flex-wrap:wrap; gap:20px;
  align-items:center; justify-content:space-between;
  padding-top:26px; font-size:.82rem; color:rgba(255,255,255,.42);
}
.social{ display:flex; gap:10px; }
.social a{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%;
  transition:background .35s, border-color .35s, transform .35s var(--e);
}
.social svg{ width:17px; height:17px; fill:rgba(255,255,255,.7); transition:fill .35s; }
.social a:hover{ background:var(--volt); border-color:var(--volt); transform:translateY(-4px); }
.social a:hover svg{ fill:var(--ink); }

/* ═══════════ 3D SCROLL REVEAL ═══════════ */

.rv{
  opacity:0;
  transform:perspective(1000px) rotateX(14deg) translate3d(0,44px,-60px);
  transition:opacity .85s var(--e), transform .95s var(--e);
  transition-delay:calc(var(--d,0) * 95ms);
}
.rv.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .cube{ animation:none; transform:rotateX(-18deg) rotateY(-28deg); }
  .band3d__track,.cube__shadow,.hero__scroll em{ animation:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ═══════════ RESPONSIVE ═══════════ */

@media (max-width:1100px){
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .creds{ grid-template-columns:1fr; justify-items:start; }
  .cube-stage{ margin-top:28px; }
}

@media (max-width:1024px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  .split,.quote{ grid-template-columns:1fr; }
  .split--rev .frame{ order:0; }
  .frame--tall img{ min-height:0; aspect-ratio:4/3; }
  .sec--why .split{ align-items:center; }
  .hero__photo{ inset:-4% -4% -4% 8%; }
  .peek{ display:none; }
  .row{
    grid-template-columns:1fr;
    grid-template-areas:"no" "title" "tag" "note" "go";
    gap:0;
  }
  .row__no{ align-self:start; margin-bottom:12px; }
  .row h3{ align-self:start; }
  .row__note{ align-self:start; margin-top:14px; }
  .row__go{ justify-self:start; align-self:start; margin-top:22px; }
}

@media (max-width:700px){
  .nav{ padding-block:12px; }
  .nav__act .btn--sm{ display:none; }
  .nav__act{ margin-left:auto; }
  .mnav{ inset:66px 0 auto 0; }
  .hero{ padding-top:104px; }
  .hero__strip{ font-size:.64rem; letter-spacing:.14em; }
  .hero__scroll{ display:none; }
  .cube{ --s:82px; }
}

@media (max-width:560px){
  .form__row{ grid-template-columns:1fr; }
  .contacts li{ grid-template-columns:1fr; gap:4px; }
  .foot__grid{ grid-template-columns:1fr; }
  .foot__end{ flex-direction:column; align-items:flex-start; }
  .form{ box-shadow:0 24px 50px -30px rgba(8,8,10,.45); }
}