/* ============================================================
   BrightPipe | tokens
   ============================================================ */
:root{
  --navy:#060C22;--navy-2:#0B1533;--navy-3:#132250;--wall-bg:#04081A;
  --seam:rgba(120,150,220,.16);--ink:#F3F6FF;--soft:#D7E0F5;--muted:#9AAAD0;--dim:#66779F;
  --blue:#1E8ED8;--blue-deep:#0072AC;--blue-glow:#3FB2FF;--yellow:#F8E048;--yellow-glow:#FFF3A6;
  --display:'Unbounded',sans-serif;--body:'Nunito',sans-serif;
  --container:1240px;--pad:clamp(20px,5vw,64px);--ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:var(--ink);font:400 17px/1.6 var(--body);position:relative;overflow-x:hidden;min-height:100vh}
body.locked{overflow:hidden}
a{color:inherit}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
::selection{background:var(--yellow);color:var(--navy)}
section{position:relative;padding:clamp(80px,10vw,140px) var(--pad);scroll-margin-top:70px}
section:not(.hero):not(.page-hero):not(#statement)::after{content:"";position:absolute;z-index:0;pointer-events:none;width:min(60vw,820px);height:min(60vw,820px);border-radius:50%;opacity:.75;animation:glowDrift 24s ease-in-out infinite alternate;will-change:transform}
section:not(.hero):not(.page-hero):not(#statement):nth-of-type(odd)::after{left:-18vw;top:-8%;background:radial-gradient(circle,rgba(248,224,72,.12) 0,rgba(248,224,72,.05) 30%,transparent 62%)}
section:not(.hero):not(.page-hero):not(#statement):nth-of-type(even)::after{right:-18vw;bottom:-8%;background:radial-gradient(circle,rgba(30,142,216,.18) 0,rgba(30,142,216,.07) 30%,transparent 62%);animation-delay:-9s}
@keyframes glowDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(5vw,4vh) scale(1.18)}}
section > .ribbon{z-index:0}
section.tight{padding-top:clamp(40px,5vw,70px);padding-bottom:clamp(40px,5vw,70px)}
.container{position:relative;z-index:2;max-width:var(--container);margin:0 auto}
.narrow{max-width:860px}
.sec-head{max-width:820px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
h2{font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.08;margin:0 0 22px;text-wrap:balance}
h3{font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.25;margin:0 0 12px}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--muted);max-width:680px;margin:0}
.lede strong{color:var(--soft);font-weight:600}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:800 12.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin:0 0 18px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--yellow);border-radius:2px}
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:220px 220px}

/* ============================================================
   Logo
   ============================================================ */
.logo{position:relative;display:inline-block;font:900 1em/1 var(--body);letter-spacing:-.015em;padding-top:.74em;text-decoration:none;white-space:nowrap}
.logo-word{display:block;position:relative}
.logo .lb{color:var(--yellow)}
.logo .lp{color:var(--blue)}
.logo-arc{position:absolute;left:21.5%;top:0;width:54%;height:auto;overflow:hidden;display:block}
.logo-arc path{fill:none;stroke:var(--blue);stroke-width:22}

/* ============================================================
   Intro (home only)
   ============================================================ */
#intro{position:fixed;inset:0;z-index:200;background:var(--navy);display:grid;place-items:center;transition:opacity .55s ease,visibility .55s}
#intro::after{content:"";position:absolute;left:50%;top:50%;width:60vmax;height:60vmax;margin:-30vmax 0 0 -30vmax;border-radius:50%;background:radial-gradient(circle,rgba(248,224,72,.35),rgba(63,178,255,.18) 35%,transparent 65%);transform:scale(0);opacity:0;pointer-events:none}
body.intro-out #intro{opacity:0;visibility:hidden}
body.intro-out #intro::after{animation:burst 1.1s var(--ease) forwards}
@keyframes burst{0%{transform:scale(0);opacity:.9}100%{transform:scale(2.6);opacity:0}}
#intro .logo{font-size:clamp(46px,9vw,112px);transition:transform .8s var(--ease),opacity .55s ease}
body.intro-out #intro .logo{transform:scale(.82) translateY(-14px);opacity:0}
#intro .logo-arc path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.05s var(--ease) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
#intro .lb,#intro .lp{display:inline-block;opacity:0;transform:translateY(.4em);animation:riseIn .75s var(--ease) forwards}
#intro .lb{animation-delay:.5s}
#intro .lp{animation-delay:.66s}
@keyframes riseIn{to{opacity:1;transform:none}}

/* ============================================================
   Nav
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--pad);transform:translateY(-120%);transition:transform .6s var(--ease),background .4s ease,padding .4s ease,box-shadow .4s ease}
body.hero-ready .nav{transform:none}
body.hero-ready .nav.hidden{transform:translateY(-120%)}
.nav.scrolled{background:rgba(6,12,34,.78);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);padding:11px var(--pad);box-shadow:0 1px 0 var(--seam)}
.nav .logo{font-size:26px}
.nav-links{display:flex;gap:6px;margin:0;padding:0;list-style:none;align-items:center}
.nav-links > li{position:relative}
.nav-links a{display:block;padding:10px 13px;color:var(--muted);text-decoration:none;font-weight:700;font-size:15px;border-radius:8px;transition:color .3s,background .3s}
.nav-links > li > a:hover,.nav-links > li:hover > a,.nav-links > li > a.active{color:var(--ink)}
.nav-links > li > a.active{color:var(--yellow)}
.nav-links .has-sub > a::after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);margin-left:9px;opacity:.7}
.sub{position:absolute;top:100%;left:0;min-width:250px;padding:10px;margin:8px 0 0;list-style:none;background:rgba(9,16,42,.96);border:1px solid var(--seam);border-radius:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .35s var(--ease),visibility .3s;backdrop-filter:blur(14px)}
.sub.wide{min-width:520px;columns:2;column-gap:6px}
.sub li{break-inside:avoid}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{padding:9px 12px;font-size:14.5px;color:var(--soft);border-radius:7px}
.sub a:hover{background:rgba(63,178,255,.12);color:var(--ink)}
.sub a.active{color:var(--yellow)}
.nav-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative;border-radius:50%}
.burger span{position:absolute;left:11px;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .45s var(--ease),top .45s var(--ease),opacity .3s}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:25px}
.burger.open span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger.open span:nth-child(2){top:21px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:95;background:var(--navy);padding:96px var(--pad) 40px;transform:translateY(-102%);transition:transform .65s var(--ease);visibility:hidden;overflow-y:auto}
.menu.open{transform:none;visibility:visible}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;max-width:900px}
.menu h4{font:800 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.menu ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.menu a{display:block;padding:7px 0;font:600 clamp(1.05rem,4.2vw,1.35rem)/1.3 var(--display);color:var(--ink);text-decoration:none;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .6s var(--ease)}
.menu.open a{opacity:1;transform:none}
.menu .menu-foot{grid-column:1/-1;margin-top:12px;color:var(--muted);font-size:15px;opacity:0;transition:opacity .5s .4s}
.menu.open .menu-foot{opacity:1}
.menu .menu-foot a{display:inline;font:700 15px var(--body);color:var(--ink);opacity:1;transform:none;transition:none;padding:0}
.menu .menu-foot .btn{display:inline-flex;margin-top:16px;font:700 15px var(--body);color:#0B1330}

/* ============================================================
   Buttons
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:999px;font:700 15px var(--body);text-decoration:none;position:relative;overflow:hidden;isolation:isolate;transition:transform .4s var(--ease),box-shadow .4s ease;cursor:pointer;border:0;white-space:nowrap}
.btn-y{background:var(--yellow);color:#0B1330}
.btn-y::before{content:"";position:absolute;top:-40%;bottom:-40%;width:38%;left:-70%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-22deg);transition:left .75s var(--ease);z-index:-1}
.btn-y:hover::before{left:140%}
.btn-y:hover{transform:translateY(-2px);box-shadow:0 14px 42px -12px rgba(248,224,72,.65)}
.btn-o{color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(150,180,255,.38)}
.btn-o:hover{box-shadow:inset 0 0 0 1.5px var(--blue-glow),0 12px 36px -14px rgba(63,178,255,.5);transform:translateY(-2px)}
.btn-sm{padding:11px 20px;font-size:14px}
.btn svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.link{color:var(--yellow);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100%/0 1.5px;transition:background-size .4s var(--ease)}
.link:hover{background-size:100% 1.5px}
.link svg{width:14px;height:14px}
.actions{display:flex;flex-wrap:wrap;gap:14px}

/* ============================================================
   Light pipe (scroll-drawn)
   ============================================================ */
.pipe{position:absolute;top:0;left:0;z-index:1;pointer-events:none;overflow:visible;opacity:0;transition:opacity 1.2s ease .3s}
body.hero-ready .pipe{opacity:1}
.pipe path{fill:none;stroke:url(#pipeGrad);stroke-linecap:round;stroke-linejoin:round}
.pipe .p1{stroke-width:18;opacity:.07}
.pipe .p2{stroke-width:8;opacity:.22}
.pipe .p3{stroke-width:2.6}
.pipe .tip-glow{fill:var(--yellow);opacity:.55;filter:blur(9px)}
.pipe .tip{fill:#fff}

/* ============================================================
   LED engine hosts
   ============================================================ */
.wall{position:relative;overflow:hidden;--pitch:12px;background:var(--wall-bg)}
.wall canvas{position:absolute;top:0;left:0;display:block}
.wall.fill canvas{width:100%;height:100%}
.wall .dots{position:absolute;inset:0;background:radial-gradient(circle closest-side,transparent 0 66%,var(--wall-bg) 80%);background-size:var(--pitch) var(--pitch);pointer-events:none}

/* Screen copy (typography on live screens) */
.screen-copy{position:absolute;left:var(--cl,5%);right:var(--cr,5%);top:var(--ct,12%);bottom:var(--cb,12%);pointer-events:none;z-index:2;font-size:40px}
.screen-copy .msg{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:.06em;visibility:hidden;clip-path:inset(0 100% 0 0)}
.screen-copy .msg.show{visibility:visible}
.screen-copy .ln{display:block;font:700 1em/1.06 var(--display);letter-spacing:.005em;color:#fff;white-space:nowrap;text-shadow:0 .04em .12em rgba(0,0,0,.55),0 0 .22em rgba(255,255,255,.75),0 0 .9em rgba(63,178,255,.5);filter:brightness(1.35)}
.screen-copy .ln.y{color:#FFEF7A;text-shadow:0 .04em .12em rgba(0,0,0,.55),0 0 .22em rgba(255,240,140,.75),0 0 .9em rgba(248,224,72,.45)}
.screen-copy .msg::after{content:"";position:absolute;top:var(--t,-12%);bottom:var(--b,-12%);left:var(--x,0%);width:max(.4em,8px);margin-left:calc(max(.4em,8px) * -.5);border-radius:2px;background:linear-gradient(180deg,rgba(255,255,255,.9),#fff 45%,var(--yellow));box-shadow:0 0 1.2em .5em rgba(255,255,255,.8),0 0 3em 1.4em rgba(248,224,72,.4),0 0 6em 2.5em rgba(63,178,255,.25);opacity:var(--bar,0)}
.screen-copy .msg::before{content:"";position:absolute;top:var(--t,-12%);bottom:var(--b,-12%);left:calc(var(--x,0%) - 2.2em);width:2.2em;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16));-webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);opacity:var(--bar,0);pointer-events:none}
.hero .l-screen .screen-copy{--cl:47%;--cr:5%;--ct:15%;--cb:13%}
.hero.band .l-screen .screen-copy{--ct:19%;--cb:12%}

.copy-dim{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .7s ease;background:radial-gradient(60% 60% at 50% 50%,rgba(3,6,18,.62),rgba(3,6,18,.28) 70%,rgba(3,6,18,.1))}
.showing > .copy-dim{opacity:1}
.ledwall .copy-dim{z-index:2}
.ledwall .dots{opacity:.38}

/* Photo scenes with live screens */
.scene{position:relative;width:100%;overflow:hidden;border-radius:14px;background:var(--wall-bg)}
.scene-stage{position:absolute;left:0;top:0}
.scene-img{position:absolute;left:0;top:0;display:block;width:100%;height:100%;max-width:none;z-index:2;pointer-events:none}
.screen{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:var(--wall-bg);z-index:1;--c:1;--r:1}
.screen canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.screen .seams{position:absolute;inset:0;pointer-events:none;background:
  repeating-linear-gradient(90deg,transparent 0 calc(100%/var(--c) - 1.6px),rgba(2,5,16,.9) calc(100%/var(--c) - 1.6px) calc(100%/var(--c))),
  repeating-linear-gradient(0deg,transparent 0 calc(100%/var(--r) - 1.6px),rgba(2,5,16,.9) calc(100%/var(--r) - 1.6px) calc(100%/var(--r)))}
.screen .led{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.4;background:radial-gradient(circle closest-side,transparent 0 62%,rgba(2,5,16,.6) 84%);background-size:3px 3px}
.screen .sheen{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.07) 50%,transparent 58%)}
.scene .spill{position:absolute;left:0;right:0;bottom:0;height:48%;z-index:3;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(55% 100% at 50% 100%,var(--sp,rgba(30,142,216,0)),transparent 72%);transition:background .5s linear;opacity:.8}
.scene-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:14px;color:var(--muted);font-size:14.5px}
.scene-cap strong{color:var(--ink);font-family:var(--display);font-weight:600;font-size:15px}

/* ============================================================
   Home hero (photo stage)
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:130px var(--pad) 34px;z-index:auto;background:var(--wall-bg)}
.hero .hero-band{position:absolute;inset:0;overflow:hidden}
.hero-stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:center;will-change:transform}
.hero-stage > *{position:absolute;left:0;top:0}
.hero-stage .l-screen{overflow:hidden;background:var(--wall-bg)}
.hero-stage .l-screen canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-stage .l-screen .dots{position:absolute;inset:0;z-index:3;background:radial-gradient(circle closest-side,transparent 0 66%,var(--wall-bg) 92%);background-size:4px 4px;pointer-events:none;opacity:.42}
.hero-stage .l-photo{display:block;max-width:none}
.hero-stage .l-spill{mix-blend-mode:screen;pointer-events:none;background:radial-gradient(52% 70% at 50% 0,var(--sp,rgba(30,142,216,0)),transparent 72%);transition:background .6s linear;will-change:background}
.hero-stage .l-beams,.hero-stage .l-dust{display:block;pointer-events:none;mix-blend-mode:screen}
.hero-stage .l-dust{opacity:.9}
.hero-stage .l-flash{pointer-events:none;mix-blend-mode:screen;opacity:0;background:radial-gradient(circle at 50% 38%,#fff,rgba(255,244,190,.7) 22%,rgba(63,178,255,.25) 50%,transparent 72%)}
body.hero-ready .hero-stage .l-flash{animation:flash 1.3s ease-out .1s}
@keyframes flash{0%{opacity:0}14%{opacity:.95}45%{opacity:.25}100%{opacity:0}}
.hero-stage .l-crowd{display:block;max-width:none;will-change:transform}
.hero-stage .l-haze{mix-blend-mode:screen;opacity:.22;background:url(../assets/tex-haze.webp) center/cover;animation:hazeDrift 26s ease-in-out infinite alternate;will-change:transform,opacity;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 35%,transparent 70%);mask-image:linear-gradient(180deg,#000 0,#000 35%,transparent 70%)}
@keyframes hazeDrift{0%{transform:scale(1.02) translate(0,0);opacity:.12}50%{opacity:.24}100%{transform:scale(1.12) translate(-2%,1.5%);opacity:.16}}
.hero-stage .l-bg{display:block;max-width:none;mix-blend-mode:screen;animation:beamPulse 6s ease-in-out infinite;will-change:opacity,transform;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 22%,transparent 52%);mask-image:linear-gradient(180deg,#000 0,#000 22%,transparent 52%)}
@keyframes beamPulse{0%,100%{opacity:.18;transform:scale(1)}50%{opacity:.45;transform:scale(1.012)}}
.hero .veil{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(6,12,34,.26) 0%,rgba(6,12,34,.06) 36%,rgba(6,12,34,0) 60%),
  linear-gradient(180deg,rgba(6,12,34,.3) 0%,rgba(6,12,34,0) 18%,rgba(6,12,34,0) 60%,rgba(6,12,34,.9) 100%)}
.hero-copy::before{content:"";position:absolute;z-index:-1;left:-8%;right:30%;top:-14%;bottom:-10%;pointer-events:none;background:radial-gradient(60% 70% at 30% 55%,rgba(6,12,34,.62),transparent 70%);filter:blur(6px)}
.hero-copy{position:relative;z-index:2;max-width:1000px;width:100%;will-change:transform}
.hero-sub{max-width:520px}
.hero h1{font-size:clamp(2.2rem,5.4vw,5rem);line-height:1.02;margin:0 0 26px;max-width:12ch;text-shadow:0 10px 40px rgba(4,8,26,.7)}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .12em 0;margin:0 -.06em -.12em 0}
.hero h1 .w span{display:inline-block;transform:translateY(112%) rotate(5deg);transform-origin:left bottom;opacity:0}
.hero h1 .w.y span{color:var(--yellow);text-shadow:0 0 28px rgba(248,224,72,.45),0 10px 40px rgba(4,8,26,.7)}
body.hero-ready .hero h1 .w.y span{animation:wordUp 1.05s var(--ease) forwards,yGlow 5.5s ease-in-out 2.2s infinite}
@keyframes yGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
body.hero-ready .hero h1 .w span{animation:wordUp 1.05s var(--ease) forwards;animation-delay:calc(var(--d) * 1ms)}
@keyframes wordUp{to{transform:none;opacity:1}}
.hero-sub{font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--soft);max-width:560px;margin:0 0 24px;opacity:0;transform:translateY(22px);text-shadow:0 2px 20px rgba(4,8,26,.8)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;opacity:0;transform:translateY(22px)}
body.hero-ready .hero-sub{animation:fadeUp .9s var(--ease) .55s forwards}
body.hero-ready .hero-actions{animation:fadeUp .9s var(--ease) .7s forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:clamp(20px,4vh,44px);padding-top:22px;border-top:1px solid rgba(150,180,255,.18);font-size:14px;color:var(--muted);opacity:0}
body.hero-ready .hero-foot{animation:fadeUp 1s var(--ease) 1s forwards}
.hero-foot .meta{display:flex;flex-wrap:wrap;gap:6px 28px}
.hero-foot .meta a{text-decoration:none;color:var(--muted);transition:color .3s}
.hero-foot .meta a:hover{color:var(--ink)}
.scroll-cue{display:flex;align-items:center;gap:12px;color:var(--dim);font-weight:700;letter-spacing:.02em}
.scroll-cue i{display:block;width:1px;height:46px;background:rgba(150,180,255,.22);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-14px;width:1px;height:14px;background:var(--yellow);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{to{top:100%}}
/* portrait phones: show the stage as a band above the copy */
.hero.band{min-height:0;display:block;padding-top:0}
.hero.band .hero-band{position:relative;inset:auto;height:var(--bandH,58vh);overflow:hidden}
.hero.band .hero-stage{top:0;left:50%;transform:translate(-50%,var(--py,0px)) scale(var(--s,1));transform-origin:top center}
.hero.band .hero-band::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -90px 80px -60px var(--navy)}
.hero.band .veil{background:linear-gradient(180deg,rgba(6,12,34,.35) 0,transparent 30%,transparent 70%,var(--navy) 100%)}
.hero.band .hero-copy{padding:26px var(--pad) 36px;margin-top:0}
.hero.band h1{font-size:clamp(2.3rem,10.5vw,3.2rem)}
.hero.band .hero-copy::before{display:none}

/* ============================================================
   Page hero (subpages)
   ============================================================ */
.page-hero{position:relative;min-height:min(78svh,720px);display:flex;align-items:flex-end;padding:150px var(--pad) 56px;overflow:hidden;background:var(--wall-bg)}
.page-hero.short{min-height:min(56svh,520px)}
.page-hero .ph-media{position:absolute;inset:-12% 0 0;overflow:hidden;will-change:transform}
.page-hero .container{will-change:transform,opacity}
.page-hero h1 .w.y span{text-shadow:0 0 26px rgba(248,224,72,.4),0 10px 40px rgba(4,8,26,.7)}
.page-hero .ph-media img,.page-hero .ph-media .scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0}
.page-hero .ph-media img{transform:scale(1.08);animation:kenburns 14s ease-out forwards}
@keyframes kenburns{to{transform:scale(1)}}
.page-hero .ph-media.right img{object-position:right center}
.page-hero .ph-media.contain{background:var(--wall-bg)}
.page-hero .ph-media.contain img{object-fit:contain;object-position:right center;transform:none;animation:none}
.page-hero .ph-haze{position:absolute;inset:0;mix-blend-mode:screen;opacity:.35;background:url(../assets/tex-haze.webp) center/cover;animation:hazeDrift 24s ease-in-out infinite alternate}
.page-hero .veil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,12,34,.92) 0%,rgba(6,12,34,.6) 45%,rgba(6,12,34,.1) 85%),
  linear-gradient(180deg,rgba(6,12,34,.5) 0%,rgba(6,12,34,0) 35%,rgba(6,12,34,.92) 100%)}
.page-hero .container{max-width:var(--container)}
.page-hero h1{font-size:clamp(2.1rem,5.4vw,4.6rem);line-height:1.04;margin:0 0 22px;max-width:16ch;text-shadow:0 10px 40px rgba(4,8,26,.7)}
.page-hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .12em 0;margin:0 -.06em -.12em 0}
.page-hero h1 .w span{display:inline-block;transform:translateY(112%) rotate(5deg);transform-origin:left bottom;opacity:0}
.page-hero h1 .w.y span{color:var(--yellow)}
body.hero-ready .page-hero h1 .w span{animation:wordUp 1s var(--ease) forwards;animation-delay:calc(var(--d) * 1ms)}
.page-hero .lede{max-width:640px;color:var(--soft);opacity:0;transform:translateY(20px);text-shadow:0 2px 20px rgba(4,8,26,.8)}
body.hero-ready .page-hero .lede{animation:fadeUp .9s var(--ease) .45s forwards}
.page-hero .actions{margin-top:28px;opacity:0;transform:translateY(20px)}
body.hero-ready .page-hero .actions{animation:fadeUp .9s var(--ease) .6s forwards}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:700 13px var(--body);color:var(--dim);margin:0 0 20px;opacity:0}
body.hero-ready .crumb{animation:fadeUp .8s var(--ease) .2s forwards}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb span::before{content:"/";margin:0 4px;color:var(--dim)}

/* ============================================================
   Ticker
   ============================================================ */
.ticker{position:relative;z-index:2;border-top:1px solid var(--seam);border-bottom:1px solid var(--seam);overflow:hidden;padding:15px 0;background:rgba(6,12,34,.72);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker-track{display:flex;width:max-content;animation:tick 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{display:flex;align-items:center;gap:24px;padding:0 12px 0 24px;font:700 15px var(--body);color:var(--muted);letter-spacing:.01em;white-space:nowrap}
.ticker-track svg{width:18px;height:8px;flex:none}
.ticker-track svg path{fill:none;stroke:var(--blue);stroke-width:3}
@keyframes tick{to{transform:translateX(-50%)}}

/* ============================================================
   Reveal ("light on")
   ============================================================ */
.lit-in{opacity:.001;transform:translateY(26px)}
.lit-in.on{animation:riseUp .9s var(--ease) forwards;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes riseUp{0%{opacity:0;transform:translateY(26px);filter:brightness(.7)}70%{filter:brightness(1.08)}100%{opacity:1;transform:none;filter:brightness(1)}}
@keyframes riseUpLite{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}
body.coarse .lit-in.on{animation-name:riseUpLite;animation-duration:.6s}
.lit-in.on.instant{animation-duration:.25s;animation-delay:0s}

/* ============================================================
   Prose + generic blocks
   ============================================================ */
.prose{max-width:760px;color:var(--soft);font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.7}
.prose p{margin:0 0 1.15em}
.prose p:last-child{margin-bottom:0}
.prose h3{margin-top:1.6em}
.prose ul{padding-left:1.2em;margin:0 0 1.2em;color:var(--soft)}
.prose li{margin:0 0 .45em}
.prose a{color:var(--yellow)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center}
.split.rev > :first-child{order:2}
.split .media{position:relative}
.split .media img{display:block;width:100%;border-radius:14px;box-shadow:0 40px 90px -40px rgba(63,178,255,.4)}
.split .media .tag{position:absolute;left:16px;bottom:16px;padding:8px 14px;border-radius:999px;background:rgba(6,12,34,.7);backdrop-filter:blur(8px);font:700 13px var(--body);color:var(--soft);border:1px solid var(--seam)}
.figure{margin:0;position:relative}
.figure img{display:block;width:100%;border-radius:14px}
.figure figcaption{margin-top:12px;color:var(--muted);font-size:14.5px}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;margin-top:40px}
.stat{padding:22px 24px;border:1px solid var(--seam);border-radius:12px;background:rgba(9,16,42,.6)}
.stat b{display:block;font:600 clamp(1.8rem,3vw,2.6rem)/1 var(--display);color:var(--yellow);margin-bottom:8px;font-variant-numeric:tabular-nums}
.stat > span{color:var(--muted);font-size:14.5px;font-weight:700}
.band{position:relative;z-index:2;padding:clamp(40px,5vw,64px) var(--pad);border-top:1px solid var(--seam);border-bottom:1px solid var(--seam);background:linear-gradient(90deg,rgba(248,224,72,.07),rgba(30,142,216,.1))}
.band .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.band h3{margin:0;font-size:clamp(1.3rem,2.2vw,1.9rem);max-width:22ch}
.band p{margin:6px 0 0;color:var(--muted);max-width:60ch}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{position:relative;padding:28px;background:linear-gradient(180deg,rgba(15,26,62,.96),rgba(9,16,42,.98));border:1px solid var(--seam);border-radius:12px;overflow:hidden;transition:border-color .45s ease,transform .55s var(--ease),box-shadow .55s ease}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 28%,rgba(248,224,72,.14) 44%,rgba(63,178,255,.16) 56%,transparent 72%);transform:translateX(-115%)}
.card:hover::after{animation:sweep .95s var(--ease) forwards}
@keyframes sweep{to{transform:translateX(115%)}}
.card:hover{border-color:rgba(248,224,72,.45);transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(63,178,255,.35)}
.card h3{font-size:clamp(1.05rem,1.3vw,1.25rem);margin:0 0 10px;color:var(--ink)}
.card h4{font:800 13px/1.3 var(--body);color:var(--yellow);margin:0 0 8px;letter-spacing:.02em}
.card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.card ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.card li{position:relative;padding-left:20px;color:var(--soft);font-size:15px;line-height:1.5}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:2px;background:var(--yellow);opacity:.85}
.card .num{font:600 12px var(--display);color:var(--blue-glow);margin-bottom:12px;display:block}
.card .card-img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;margin:0 0 18px;padding:12px;background:radial-gradient(60% 60% at 50% 60%,rgba(63,178,255,.14),transparent 70%);border-radius:10px}
.card.light .card-img{background:linear-gradient(180deg,#fff,#e8edf7);object-fit:contain}
.card .card-photo{display:block;width:calc(100% + 56px);margin:-28px -28px 20px;aspect-ratio:16/10;object-fit:cover}
.card.wide{grid-column:span 2}
.card .link{margin-top:16px}

/* pointer tilt + light */
.svc,.card,.case,.model,.person,.demo,.stat,.value,.job,.strip figure{--mx:50%;--my:50%}
.svc::before,.card::before,.case::before,.model::before,.person::before,.demo::before,.stat::before,.value::before,.job::before,.strip figure::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .45s;background:radial-gradient(260px circle at var(--mx) var(--my),rgba(248,224,72,.16),rgba(63,178,255,.08) 45%,transparent 70%)}
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px)!important;transition:transform .18s ease,border-color .4s,box-shadow .5s!important;border-color:rgba(248,224,72,.5)!important}
.tilt::before{opacity:1}
.stat,.value,.job,.demo,.model,.strip figure{position:relative}

/* stat wall (who section) */
.statwall{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;border:1px solid var(--seam);border-radius:18px;background:rgba(4,8,26,.72);box-shadow:0 40px 90px -50px rgba(63,178,255,.5)}
.statwall::before{content:"";position:absolute;inset:0;border-radius:18px;background:url(../assets/tex-led-diodes.webp) center/240px;opacity:.12;pointer-events:none}
.stile{position:relative;padding:26px 24px 22px;border:1px solid var(--seam);border-radius:11px;background:linear-gradient(180deg,rgba(15,26,62,.95),rgba(7,13,36,.98));overflow:hidden}
.stile::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 30%,rgba(248,224,72,.12) 45%,rgba(63,178,255,.14) 55%,transparent 70%);transform:translateX(-120%)}
.stile.on::after{animation:sweep 1.3s var(--ease) .4s forwards}
.stile b{display:block;font:600 clamp(2rem,3.6vw,3.2rem)/1 var(--display);color:var(--yellow);text-shadow:0 0 26px rgba(248,224,72,.45);margin-bottom:10px;font-variant-numeric:tabular-nums}
.stile > span{display:block;color:var(--muted);font-size:14.5px;font-weight:700;line-height:1.45}
.stile i{display:block;height:3px;margin-top:16px;border-radius:2px;background:linear-gradient(90deg,var(--yellow),var(--blue-glow));transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--ease) .3s;box-shadow:0 0 12px rgba(63,178,255,.6)}
.stile.on i{transform:scaleX(1)}
.who-tile{position:absolute;right:-16%;top:-26%;width:clamp(160px,20vw,300px);z-index:0!important;pointer-events:none;opacity:.95;filter:drop-shadow(0 0 40px rgba(63,178,255,.35)) drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.statwall{z-index:1}

/* E4 light rail */
.e4{position:relative}
.e4-rail{position:absolute;left:0;top:0;z-index:1;pointer-events:none;overflow:visible}
.e4-rail path{fill:none;stroke:url(#railGrad);stroke-linecap:round;stroke-linejoin:round}
.e4-rail .r1{stroke-width:16;opacity:.08}
.e4-rail .r2{stroke-width:7;opacity:.25}
.e4-rail .r3{stroke-width:2.5}
.e4-rail .rtip-glow{fill:var(--yellow);opacity:.6;filter:blur(10px)}
.e4-rail .rtip{fill:#fff}
.e4-node{z-index:2}

/* E4 pictograms + watermark */
#process{overflow:hidden}
#process::before{content:"E4";position:absolute;right:-3vw;top:-4vw;font:600 34vw/1 var(--display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(63,178,255,.14);pointer-events:none;z-index:0}
.e4-node .pic{width:46px;height:46px;margin-top:20px;color:var(--dim);transition:color .6s,filter .6s}
.e4-node .pic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.e4-node .pic path{stroke-dasharray:90;stroke-dashoffset:0;opacity:.35;transition:opacity .6s}
@keyframes drawPath{from{stroke-dashoffset:90}to{stroke-dashoffset:0}}
.e4-node.lit .pic{color:var(--yellow);filter:drop-shadow(0 0 10px rgba(248,224,72,.6))}
.e4-node.lit .pic path{opacity:1;animation:drawPath 1.2s var(--ease) .2s both}

/* work band */
.work-band{transform:rotate(-2.2deg) scale(1.04);padding:30px 0}
.work-band .marquee img{height:clamp(170px,20vw,260px);transition:transform .6s var(--ease),filter .6s}
.work-band .marquee img:hover{transform:scale(1.06);filter:brightness(1.15)}
.bgphoto{position:absolute;inset:0;z-index:0;pointer-events:none;background-position:center;background-size:cover;opacity:.16;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
#clients .quote::before{font-size:120px;color:var(--yellow);text-shadow:0 0 30px rgba(248,224,72,.5)}

/* feature list (icon rows) */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;margin:0;padding:0;list-style:none}
.feat li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--seam);color:var(--soft);font-size:16px;line-height:1.5}
.feat li::before{content:"";position:absolute;left:0;top:19px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,var(--yellow) 0 35%,transparent 40%),radial-gradient(circle,rgba(248,224,72,.25),transparent 70%)}
.feat.one{grid-template-columns:1fr}

/* product strip (cut-outs) */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:40px}
.strip figure{margin:0;padding:18px;border:1px solid var(--seam);border-radius:12px;background:rgba(9,16,42,.55);display:grid;place-items:center;aspect-ratio:1;transition:transform .5s var(--ease),border-color .4s}
.strip figure:hover{transform:translateY(-4px);border-color:rgba(63,178,255,.5)}
.strip img{max-height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.5))}
.strip.light figure{background:linear-gradient(180deg,#fff,#e6ebf5)}
.strip.light img{filter:drop-shadow(0 12px 18px rgba(10,20,60,.25))}
.strip-note{margin:14px 0 0;color:var(--dim);font-size:13.5px}

/* MMW model schematics */
.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.model{padding:18px 18px 16px;border:1px solid var(--seam);border-radius:12px;background:rgba(9,16,42,.6);transition:transform .45s var(--ease),border-color .4s,box-shadow .5s}
.model:hover{transform:translateY(-4px);border-color:rgba(248,224,72,.5);box-shadow:0 30px 50px -30px rgba(63,178,255,.4)}
.model svg{display:block;width:100%;height:auto;margin-bottom:12px}
.model b{display:block;font:600 14px/1.3 var(--display);color:var(--ink)}
.model span{display:block;color:var(--dim);font-size:13px;margin-top:4px}
.model-group{margin-top:clamp(36px,4vw,56px)}
.model-group h3{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.model-group h3::after{content:"";flex:1;height:1px;background:var(--seam)}

/* E4 */
.e4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);margin-top:16px}
.e4-node{position:relative;padding-top:20px}
.ring{width:66px;height:66px;border-radius:50%;background:var(--navy);border:2px solid rgba(150,180,255,.3);display:grid;place-items:center;font:600 20px var(--display);color:var(--dim);position:relative;z-index:3;transition:border-color .6s ease,color .6s ease,box-shadow .7s ease,transform .7s var(--ease),background .6s}
.ring::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--yellow);opacity:0;transform:scale(1)}
.e4-node.lit .ring{border-color:var(--yellow);color:#0B1330;background:var(--yellow);box-shadow:0 0 0 8px rgba(248,224,72,.12),0 0 50px rgba(248,224,72,.55);transform:scale(1.1)}
.e4-node.lit .ring::after{animation:ringPulse 1.5s ease-out forwards}
@keyframes ringPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.e4-node h3{font-size:clamp(1.2rem,1.6vw,1.5rem);margin:24px 0 10px;color:var(--dim);transition:color .7s ease}
.e4-node.lit h3{color:var(--ink)}
.e4-node p{color:var(--dim);font-size:15.5px;line-height:1.6;margin:0;transition:color .7s ease}
.e4-node.lit p{color:var(--muted)}
.e4-close{margin-top:clamp(48px,6vw,72px);padding-top:32px;border-top:1px solid var(--seam);max-width:720px;color:var(--soft);font-size:clamp(17px,1.3vw,19px)}

/* Services grid (home) */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc{position:relative;display:block;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;aspect-ratio:4/5;background:var(--navy-2);border:1px solid var(--seam);transition:transform .6s var(--ease),border-color .5s,box-shadow .6s}
.svc .scene,.svc > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform 1.2s var(--ease)}
.svc .scene{overflow:hidden}
.svc:hover{transform:translateY(-6px);border-color:rgba(248,224,72,.5);box-shadow:0 40px 70px -40px rgba(63,178,255,.5)}
.svc:hover > img{transform:scale(1.06)}
.svc .svc-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,34,0) 40%,rgba(6,12,34,.35) 65%,rgba(6,12,34,.96) 100%);z-index:3}
.svc .svc-copy{position:absolute;left:0;right:0;bottom:0;padding:24px;z-index:4}
.svc h3{margin:0 0 8px;font-size:clamp(1.15rem,1.5vw,1.4rem)}
.svc p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5;max-width:40ch}
.svc .go{position:absolute;top:18px;right:18px;z-index:4;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(6,12,34,.6);border:1px solid var(--seam);backdrop-filter:blur(8px);transition:background .4s,transform .5s var(--ease)}
.svc .go svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc:hover .go{background:var(--yellow);transform:rotate(-45deg)}
.svc:hover .go svg{stroke:#0B1330}
.svc.tall{grid-row:span 2;aspect-ratio:auto}
.svc.wide{grid-column:span 2;aspect-ratio:auto;min-height:340px}
.svc.text{aspect-ratio:auto;min-height:260px;background:linear-gradient(135deg,rgba(248,224,72,.13),rgba(30,142,216,.16));display:flex;align-items:flex-end}
.svc.text .svc-copy{position:relative}
.svc.text .svc-veil{display:none}
.svc.text h3{font-size:1.5rem}
.svc.text p{color:var(--soft)}
.svc .pic{position:absolute;top:22px;left:22px;width:54px;height:54px;color:var(--blue-glow);z-index:4}
.svc .pic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* Quotes */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px) clamp(32px,5vw,80px)}
.quote{position:relative;padding:34px 0 0;margin:0;border-top:1px solid var(--seam)}
.quote:nth-child(even){margin-top:clamp(40px,7vw,110px)}
.quote::before{content:"\201C";position:absolute;top:-2px;left:-2px;font:900 92px/1 var(--body);color:var(--yellow);line-height:.8;transform:translateY(8px)}
.quote p{margin:26px 0 22px;font-size:clamp(16.5px,1.25vw,19px);line-height:1.62;color:var(--soft)}
.quote cite{display:block;font-style:normal;font-weight:900;font-size:15px;color:var(--ink)}
.quote cite span{display:block;color:var(--muted);font-weight:600;font-size:14px;margin-top:2px}

/* Work marquee + gallery */
.marquee{position:relative;z-index:2;overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:12px;width:max-content;animation:tick var(--dur,70s) linear infinite}
.marquee.rev .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee img{display:block;height:clamp(150px,18vw,240px);width:auto;border-radius:10px;border:1px solid var(--seam);object-fit:cover}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--seam);transition:transform .6s var(--ease),border-color .4s}
.gallery img:hover{transform:scale(1.02);border-color:rgba(248,224,72,.5)}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.case{position:relative;border-radius:14px;overflow:hidden;background:var(--navy-2);border:1px solid var(--seam);transition:transform .55s var(--ease),border-color .4s,box-shadow .5s}
.case:hover{transform:translateY(-5px);border-color:rgba(248,224,72,.45);box-shadow:0 34px 60px -34px rgba(63,178,255,.45)}
.case img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.case .case-copy{padding:20px 22px 24px}
.case h3{font-size:1.1rem;margin:0 0 8px}
.case p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.case .show{display:inline-block;font:800 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin-bottom:10px}

/* People */
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.person{position:relative;border-radius:16px;overflow:hidden;background:var(--navy-2);border:1px solid var(--seam)}
.person img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--ease)}
.person:hover img{transform:scale(1.04)}
.person .p-copy{position:absolute;left:0;right:0;bottom:0;padding:26px;background:linear-gradient(180deg,transparent,rgba(6,12,34,.95))}
.person h3{margin:0 0 4px;font-size:1.5rem}
.person .role{color:var(--yellow);font:800 13px var(--body);letter-spacing:.1em;text-transform:uppercase}
.bio{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:start;padding-top:clamp(56px,7vw,96px);border-top:1px solid var(--seam);margin-top:clamp(56px,7vw,96px)}
.bio .bio-media{position:sticky;top:96px;display:grid;gap:12px}
.bio .bio-media img{display:block;width:100%;border-radius:14px}
.bio .bio-media .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bio .bio-media .row img{aspect-ratio:1;object-fit:cover}

/* Demo days products */
.demo-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.demo{padding:24px 26px;border:1px solid var(--seam);border-radius:12px;background:rgba(9,16,42,.6);display:flex;flex-direction:column;gap:10px}
.demo h3{font-size:1.1rem;margin:0}
.demo p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;flex:1}
.demo .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.demo .links a{font:800 12.5px var(--body);color:var(--soft);text-decoration:none;padding:7px 12px;border-radius:999px;border:1px solid var(--seam);transition:border-color .3s,color .3s,background .3s}
.demo .links a:hover{border-color:var(--yellow);color:var(--yellow);background:rgba(248,224,72,.06)}
.anchors{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px}
.anchors a{font:800 13px var(--body);color:var(--soft);text-decoration:none;padding:8px 14px;border-radius:999px;border:1px solid var(--seam);transition:border-color .3s,color .3s}
.anchors a:hover{border-color:var(--yellow);color:var(--yellow)}

/* Values / benefits */
.values{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.value{padding:22px 20px;border:1px solid var(--seam);border-radius:12px;background:rgba(9,16,42,.6)}
.value b{display:block;font:600 1.05rem var(--display);margin-bottom:8px}
.value span{color:var(--muted);font-size:14.5px}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.pills li{padding:11px 18px;border-radius:999px;border:1px solid var(--seam);background:rgba(9,16,42,.6);color:var(--soft);font-weight:700;font-size:14.5px}
.pills li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-right:10px;vertical-align:1px}
.steps{counter-reset:s;display:grid;gap:0;margin:0;padding:0;list-style:none;max-width:820px}
.steps li{counter-increment:s;position:relative;padding:22px 0 22px 70px;border-bottom:1px solid var(--seam);color:var(--soft);font-size:16.5px;line-height:1.65}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:22px;font:600 15px var(--display);color:var(--yellow)}
.jobs{display:grid;gap:12px}
.job{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:20px 24px;border:1px solid var(--seam);border-radius:12px;background:rgba(9,16,42,.6)}
.job b{font:600 1rem var(--display)}
.job span{color:var(--dim);font-size:14px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(36px,6vw,90px);align-items:start}
.contact-info h2{margin-bottom:18px}
.contact-info .lede{margin-bottom:38px}
.addr{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px}
.addr h3{font:900 13px/1 var(--body);letter-spacing:.02em;color:var(--dim);margin:0 0 10px}
.addr p{margin:0;color:var(--soft);font-size:15.5px;line-height:1.55}
.addr .note{grid-column:1/-1;color:var(--muted);font-size:14.5px;padding:14px 16px;border-left:2px solid var(--yellow);background:rgba(248,224,72,.05)}
.reach{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:30px}
.reach a{font:700 clamp(18px,1.6vw,22px) var(--display);color:var(--ink);text-decoration:none;transition:color .3s}
.reach a:hover{color:var(--yellow)}
.map-link{margin-top:18px;display:inline-flex}
.form{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:clamp(24px,3vw,36px);background:rgba(9,16,42,.78);border:1px solid var(--seam);border-radius:12px;overflow:hidden;backdrop-filter:blur(8px)}
.form::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--yellow),var(--blue-glow));pointer-events:none}
.form h3{grid-column:1/-1;margin:0 0 4px}
.form .intro{grid-column:1/-1;margin:0 0 6px;color:var(--muted);font-size:15px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:800;color:var(--muted)}
.field input,.field textarea,.field select{width:100%;padding:13px 15px;border-radius:7px;border:1px solid rgba(150,180,255,.22);background:rgba(6,12,34,.75);color:var(--ink);font:400 16px var(--body);outline:none;transition:border-color .3s,box-shadow .3s;appearance:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(248,224,72,.18)}
.field textarea{min-height:132px;resize:vertical}
.checks{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin:4px 0}
.checks label{display:flex;gap:10px;align-items:center;color:var(--soft);font-size:15px;font-weight:600}
.checks input{width:18px;height:18px;accent-color:var(--yellow)}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:4px}
.form-foot small{color:var(--dim);font-size:13.5px}
.form-done{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;background:rgba(9,16,42,.97);opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;z-index:3}
.form.sent .form-done{opacity:1;visibility:visible}
.form-done .logo{font-size:38px;margin-bottom:14px}
.form-done h3{font-size:1.4rem;margin:8px 0}
.form-done p{color:var(--muted);margin:0}

/* Floating cut-outs (decor) */
.float{position:absolute;pointer-events:none;z-index:1;opacity:.9;will-change:transform}
.float img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.float.glow img{filter:blur(.4px) drop-shadow(0 0 30px rgba(63,178,255,.35))}
.ribbon{position:absolute;pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:.55;will-change:transform}
.ribbon img{display:block;width:100%;height:auto}
.ribbon.y{animation:ribbonY 14s ease-in-out infinite alternate}
.ribbon.b{animation:ribbonB 17s ease-in-out infinite alternate}
@keyframes ribbonY{from{transform:translate(0,0) rotate(-6deg) scale(1)}to{transform:translate(4%,-6%) rotate(-2deg) scale(1.08)}}
@keyframes ribbonB{from{transform:translate(0,0) rotate(5deg) scale(1)}to{transform:translate(-5%,5%) rotate(1deg) scale(1.06)}}

/* Statement (floating curved wall) */
#statement{padding:clamp(60px,8vw,120px) var(--pad);overflow:hidden;background:radial-gradient(70% 70% at 50% 40%,rgba(30,142,216,.16),transparent 70%)}
#statement .floor{position:absolute;left:0;right:0;bottom:0;height:60%;background:url(../assets/tex-floor.webp) center bottom/cover;opacity:.55;-webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);mask-image:linear-gradient(180deg,transparent,#000 60%);pointer-events:none}
#statement .haze{position:absolute;inset:0;mix-blend-mode:screen;opacity:.4;background:url(../assets/tex-haze.webp) center/cover;animation:hazeDrift 28s ease-in-out infinite alternate;pointer-events:none}
.statement-scene{position:relative;z-index:2;max-width:1100px;margin:0 auto}
.statement-scene .scene{background:transparent;border-radius:0;overflow:visible}
.statement-copy{position:relative;z-index:2;padding:clamp(28px,4vw,48px) 0 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px;max-width:1100px;margin:0 auto}
.statement-copy p{font:600 clamp(1.4rem,2.6vw,2.2rem)/1.2 var(--display);margin:0;max-width:16ch;text-wrap:balance}

/* Footer */
footer{position:relative;z-index:2;border-top:1px solid var(--seam);padding:64px var(--pad) 36px;background:rgba(4,8,26,.6)}
footer::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../assets/tex-led-diodes.webp) center/420px;opacity:.16;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.foot{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
.foot .logo{font-size:30px}
.foot p{color:var(--muted);font-size:15px;max-width:34ch;margin:18px 0 0}
.foot h4{font:900 12.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:6px 0 16px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot li a{color:var(--soft);text-decoration:none;font-size:15px;transition:color .3s}
.foot li a:hover{color:var(--yellow)}
.legal{max-width:var(--container);margin:48px auto 0;padding-top:22px;border-top:1px solid var(--seam);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;color:var(--dim);font-size:13px;line-height:1.5}
.legal p{margin:0;max-width:78ch}
.legal a{color:var(--muted);text-decoration:none}
.legal a:hover{color:var(--yellow)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1100px){
  .cards.four{grid-template-columns:repeat(2,1fr)}
  .values{grid-template-columns:repeat(3,1fr)}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:block}
  .cards,.svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc.wide{grid-column:span 2}
  .e4{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split.rev > :first-child{order:0}
  .bio{grid-template-columns:1fr}
  .bio .bio-media{position:static}
  .people{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .sub.wide{min-width:0}
}
@media (max-width:720px){
  .cards,.cards.two,.svc-grid,.cases,.demo-list,.quotes{grid-template-columns:1fr}
  .svc.wide,.card.wide{grid-column:span 1}
  .svc.tall{grid-row:span 1;aspect-ratio:4/5}
  .quotes{gap:40px}
  .quote:nth-child(even){margin-top:0}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:22px}
  .feat{grid-template-columns:1fr}
  .values{grid-template-columns:1fr 1fr}
  .people{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  .menu-grid{grid-template-columns:1fr}
  .page-hero{min-height:0;padding-top:130px}
  .page-hero .ph-media.contain img{object-fit:cover;opacity:.55}
}
@media (max-width:540px){
  .statwall{grid-template-columns:1fr}
  .who-tile{display:none}
  #process::before{font-size:60vw}
  .e4{grid-template-columns:1fr;gap:34px}
  .e4-node{display:grid;grid-template-columns:66px 1fr;gap:4px 18px;padding-top:0;align-items:start}
  .e4-node .ring{grid-row:1/4}
  .e4-node .pic{grid-column:2;margin-top:0;width:34px;height:34px}
  .e4-node h3{margin:6px 0 4px}
  .e4-node p{grid-column:2}
  .form{grid-template-columns:1fr}
  .addr{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .hero h1{max-width:none}
  .values{grid-template-columns:1fr}
  .steps li{padding-left:52px}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #intro{display:none}
  .nav{transform:none;transition:none}
  .hero h1 .w span,.page-hero h1 .w span,.hero-sub,.hero-actions,.hero-foot,.page-hero .lede,.page-hero .actions,.crumb{opacity:1;transform:none;animation:none!important}
  .lit-in{opacity:1;filter:none;transform:none;animation:none!important}
  .ticker-track,.marquee-track,.hero-stage .l-haze,.page-hero .ph-haze,#statement .haze,.ribbon,.hero-stage .l-beams{animation:none}
  .page-hero .ph-media img{animation:none;transform:none}
  .pipe{opacity:1;transition:none}
  .card::after,.btn-y::before,.scroll-cue i::after,section::after,.l-flash,.l-beams,.l-dust{display:none}
  *{transition-duration:.01ms!important}
}

/* ============================================================
   Touch devices: lighter compositing
   ============================================================ */
body.coarse .l-bg,body.coarse .grain{display:none}
body.coarse .l-haze,body.coarse .page-hero .ph-haze,body.coarse #statement .haze,body.coarse .ribbon,body.coarse section::after{animation:none}
body.coarse .ribbon{opacity:.4}
body.coarse .hero-stage .l-haze{opacity:.14}

/* ============================================================
   Hero: the modular LED wall
   ============================================================ */
.hero-wall{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:92px var(--pad) 28px;overflow:hidden;background:radial-gradient(120% 70% at 50% 0,#0d1a44 0%,var(--wall-bg) 60%,#02040e 100%)}
.hero-wall .room{position:absolute;inset:0;pointer-events:none}
.hero-wall .floor{position:absolute;left:-10%;right:-10%;bottom:0;height:52%;background:url(../assets/tex-floor.webp) center bottom/cover;opacity:.5;-webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);mask-image:linear-gradient(180deg,transparent,#000 45%);transform:perspective(900px) rotateX(24deg);transform-origin:bottom center}
.hero-wall .spill{position:absolute;left:0;right:0;top:38%;bottom:0;mix-blend-mode:screen;background:radial-gradient(55% 60% at 50% 22%,var(--sp,rgba(30,142,216,0)),transparent 72%);transition:background .6s linear}
.hero-wall .l-beams,.hero-wall .l-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.hero-wall .haze{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.16;background:url(../assets/tex-haze.webp) center/cover;animation:hazeDrift 26s ease-in-out infinite alternate;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.wall-wrap{position:relative;z-index:2;width:80vw;max-width:1220px;perspective:1600px}
.wall3d{position:relative;transform-style:preserve-3d;will-change:transform}
.ledwall{position:relative;width:100%;height:520px;border-radius:6px;overflow:hidden;background:var(--wall-bg);--c:9;--r:4;box-shadow:0 60px 120px -50px rgba(63,178,255,.5),0 0 0 1px rgba(150,180,255,.12)}
.ledwall canvas{z-index:1}
.ledwall h1,.ledwall .screen-copy{z-index:2}
.ledwall .seams{position:absolute;inset:0;z-index:3;pointer-events:none;background:
  repeating-linear-gradient(90deg,transparent 0 calc(100%/var(--c) - 1.5px),rgba(2,5,16,.85) calc(100%/var(--c) - 1.5px) calc(100%/var(--c))),
  repeating-linear-gradient(0deg,transparent 0 calc(100%/var(--r) - 1.5px),rgba(2,5,16,.85) calc(100%/var(--r) - 1.5px) calc(100%/var(--r)))}
.ledwall .dots{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle closest-side,transparent 0 64%,rgba(2,5,16,.75) 92%);background-size:4px 4px;opacity:.45}
.ledwall .frame{position:absolute;inset:0;z-index:5;pointer-events:none;border:2px solid rgba(150,180,255,.22);border-radius:6px;box-shadow:inset 0 0 40px rgba(63,178,255,.15)}
.ledwall .flash{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#fff,rgba(255,244,190,.7) 25%,rgba(63,178,255,.25) 55%,transparent 75%);mix-blend-mode:screen}
.hero.lit .ledwall .flash{animation:flash 1.1s ease-out}
/* tiles: the wall assembles from LED tiles */
.ledwall .tiles{position:absolute;inset:0;z-index:4;pointer-events:none;transform-style:preserve-3d}
.ledwall .tiles i{position:absolute;display:block;box-sizing:border-box;background:url(../assets/tex-led-diodes.webp) center/70px,#070d24;border:1px solid rgba(150,180,255,.28);box-shadow:inset 0 0 18px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.6);opacity:0;transform:translate3d(var(--tx),var(--ty),var(--tz)) rotateY(var(--ry)) rotateZ(var(--rz));transition:transform 1.15s cubic-bezier(.2,.75,.2,1) var(--d),opacity .45s ease var(--d)}
.hero.assemble .ledwall .tiles i{opacity:1;transform:none}
.hero.lit .ledwall .tiles i{opacity:0;transition:opacity .55s ease calc(var(--d) * .25)}
/* wall copy (headline is real HTML on the wall) */
.ledwall .screen-copy{left:5%;right:5%;top:8%;bottom:8%}
.hero .ledwall h1,.hero.band .ledwall h1{margin:0;font-size:1em;line-height:1.06;max-width:none;text-shadow:none}
.ledwall h1 .ln{font-weight:700}
.ledwall h1 .ln:not(.y){color:#fff}
.ledwall h1 .ln.y{color:#FFEA6A}
/* reflection under the wall */
.reflect{position:relative;height:30%;margin-top:6px;overflow:hidden;pointer-events:none;opacity:.42;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 85%);mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 85%);filter:blur(1.5px) saturate(1.2);transform:scaleY(1) skewX(0deg)}
.reflect canvas{display:block;width:100%;height:100%}
/* copy under the wall */
.hero-wall .hero-copy{position:relative;z-index:3;width:min(80vw,1220px);margin-top:clamp(4px,1.5vh,18px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px}
.hero-wall .hero-sub{margin:0;flex:1 1 380px;opacity:0;transform:translateY(20px)}
.hero-wall .hero-actions{opacity:0;transform:translateY(20px)}
.hero-wall .hero-foot{width:100%;margin-top:clamp(8px,1.6vh,20px);padding-top:14px;opacity:0}
.hero.lit .hero-sub{animation:fadeUp .9s var(--ease) .2s forwards}
.hero.lit .hero-actions{animation:fadeUp .9s var(--ease) .35s forwards}
.hero.lit .hero-foot{animation:fadeUp 1s var(--ease) .6s forwards}
/* phones: portrait wall, stacked copy */
.hero-wall.band{padding-top:84px;justify-content:flex-start}
.hero-wall.band .wall-wrap{width:90vw}
.hero-wall.band .hero-copy{width:90vw;flex-direction:column;align-items:stretch;gap:14px;margin-top:22px}
.hero-wall.band .hero-sub{flex:none;font-size:16px;line-height:1.5}
.hero-wall.band .hero-actions{gap:10px}
.hero-wall.band .hero-actions .btn{padding:14px 22px}
.hero-wall.band .hero-foot{font-size:13px}
.hero-wall.band .hero-foot .scroll-cue{display:none}
.hero-wall.band .reflect{height:22%}
.hero-wall.band .ledwall .screen-copy{left:6%;right:6%;top:7%;bottom:7%}
.hero-wall.band .floor{height:60%}
body.coarse .hero-wall .haze{animation:none}
@media (prefers-reduced-motion:reduce){
  .ledwall .tiles{display:none}
  .hero-wall .hero-sub,.hero-wall .hero-actions,.hero-wall .hero-foot{opacity:1;transform:none;animation:none!important}
  .reflect{display:none}
}

/* ============================================================
   Code walls (reusable)
   ============================================================ */
.codewall{position:relative;perspective:1400px}
.codewall .ledwall{height:auto;border-radius:8px;box-shadow:0 40px 90px -40px rgba(63,178,255,.5),0 0 0 1px rgba(150,180,255,.12)}
.codewall .ledwall .screen-copy{left:6%;right:6%;top:9%;bottom:9%}
.codewall .reflect{height:24%;margin-top:4px;opacity:.38}
.codewall.fillbox,.codewall.fillbox .wall3d,.codewall.fillbox .ledwall{position:absolute;inset:0;height:auto;border-radius:0}
.codewall.fillbox .ledwall{box-shadow:none}
.codewall.fillbox .frame{border:0;box-shadow:none}
.codewall.assemble .ledwall .tiles i{opacity:1;transform:none}
.codewall.lit .ledwall .tiles i{opacity:0;transition:opacity .55s ease calc(var(--d) * .25)}
.codewall.lit .ledwall .flash{animation:flash 1.1s ease-out}
.codewall.dim .ledwall{opacity:.55}
/* LED tiles page hero wall */
.ph-media.ph-wall{inset:0;display:flex;align-items:center;justify-content:flex-end;padding:70px var(--pad) 0;overflow:visible}
.ph-media.ph-wall .codewall{width:min(58vw,900px);transform:perspective(1600px) rotateY(-16deg) translateX(4%);transform-origin:right center}
.ph-media.ph-wall .floor{position:absolute;left:0;right:0;bottom:0;height:45%;background:url(../assets/tex-floor.webp) center bottom/cover;opacity:.45;-webkit-mask-image:linear-gradient(180deg,transparent,#000 50%);mask-image:linear-gradient(180deg,transparent,#000 50%)}
.page-hero.wall-hero .veil{background:linear-gradient(90deg,rgba(6,12,34,.85) 0%,rgba(6,12,34,.45) 40%,rgba(6,12,34,0) 62%),linear-gradient(180deg,rgba(6,12,34,.3) 0%,rgba(6,12,34,0) 30%,rgba(6,12,34,.85) 100%)}
@media (max-width:960px){
  .ph-media.ph-wall{align-items:flex-start;justify-content:center;padding-top:96px}
  .ph-media.ph-wall .codewall{width:82vw;transform:perspective(1200px) rotateY(-8deg)}
  .page-hero.wall-hero{padding-top:min(62vh,520px)}
  .page-hero.wall-hero .veil{background:linear-gradient(180deg,transparent 30%,rgba(6,12,34,.92) 60%)}
}
/* hero on phones: tighter */
.hero-wall.band{padding-top:76px}
.hero-wall.band .hero-copy{margin-top:6px;gap:10px}
.hero-wall.band .hero-sub{font-size:15.5px;line-height:1.5}
.hero-wall.band .hero-foot{display:none}
.hero-wall.band .ledwall{border-radius:5px}

/* ============================================================
   Touch devices: lite compositing profile (stability first)
   ============================================================ */
body.coarse .reflect,body.coarse .l-beams,body.coarse .l-dust,body.coarse .hero-wall .haze,body.coarse .page-hero .ph-haze,body.coarse #statement .haze,body.coarse .grain{display:none!important}
body.coarse .spill,body.coarse .hero-wall .spill,body.coarse .scene .spill,body.coarse .ribbon,body.coarse .hero-stage .l-haze{mix-blend-mode:normal}
body.coarse .scene .spill{opacity:.35}
body.coarse .hero-wall .spill{opacity:.5}
body.coarse .ribbon{opacity:.28;animation:none}
body.coarse .wall3d,body.coarse .hero-stage,body.coarse .page-hero .ph-media,body.coarse .page-hero .container,body.coarse .float,body.coarse .stile i{will-change:auto}
body.coarse .float img,body.coarse .who-tile,body.coarse .e4-rail .rtip-glow,body.coarse .e4-node.lit .pic{filter:none}
body.coarse .nav.scrolled{background:rgba(6,12,34,.96);backdrop-filter:none;-webkit-backdrop-filter:none}
body.coarse .form{backdrop-filter:none}
body.coarse .sub{backdrop-filter:none}
body.coarse .ledwall .tiles{transform-style:flat}
body.coarse .ledwall .tiles i{transform:translate(var(--tx),var(--ty)) rotate(var(--rz));box-shadow:none;background-size:50px}
body.coarse .hero.assemble .ledwall .tiles i,body.coarse .codewall.assemble .ledwall .tiles i{transform:none}
body.coarse .hero-wall .floor{transform:none;height:40%;opacity:.4}
body.coarse .ph-media.ph-wall .floor{display:none}
body.coarse .ph-media.ph-wall .codewall{transform:none}
body.coarse .card::after,body.coarse .stile::after{display:none}
body.coarse section::after{width:70vw;height:70vw}

/* social links */
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.social a{display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 11px;border-radius:999px;border:1px solid var(--seam);color:var(--soft);text-decoration:none;font:700 14px var(--body);transition:border-color .3s,color .3s,background .3s,transform .4s var(--ease)}
.social a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.social a:hover{border-color:var(--yellow);color:var(--yellow);background:rgba(248,224,72,.06);transform:translateY(-2px)}
.menu-social{margin:16px 0 4px}
.menu .menu-foot .social a{font:700 14px var(--body);color:var(--soft);padding:9px 14px 9px 11px;opacity:1;transform:none;transition:border-color .3s,color .3s}
.contact-social{margin-top:26px}
body.coarse .marquee{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-webkit-mask-image:none;mask-image:none;scrollbar-width:none}
body.coarse .marquee::-webkit-scrollbar{display:none}
body.coarse .marquee-track{animation:none;width:max-content;padding:0 var(--pad)}
body.coarse .marquee img{height:150px}
body.coarse .work-band{transform:none;padding:8px 0}
body.coarse .ticker-track{animation-duration:80s}
body.coarse .wall3d{transform-style:flat}
body.coarse .hero-wall .wall-wrap{perspective:none}