:root{--ink:#050506;--fg:#f4f1ec;--mut:#9a9aa6;--acc:#ff5a36;--line:rgba(255,255,255,.12);--ease:cubic-bezier(.2,.8,.2,1);
--disp:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;background:var(--ink)}
body{font-family:var(--sans);color:var(--fg);background:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased;line-height:1.45}
img,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--fg);color:#000;padding:8px 12px}.skip:focus{left:8px}
em{font-style:italic;font-family:var(--disp);color:var(--acc);font-weight:400}
.kicker{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mut);margin-bottom:18px}
.big{font-family:var(--disp);font-weight:400;font-size:clamp(2.2rem,6.4vw,5.6rem);line-height:.98;letter-spacing:-.02em;max-width:14ch}
.mid{font-family:var(--disp);font-weight:400;font-size:clamp(1.8rem,4vw,3rem);margin-bottom:28px}
.proto{position:fixed;left:12px;bottom:12px;z-index:60;font-size:.68rem;letter-spacing:.02em;background:rgba(10,10,12,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);color:#cfcfd6;padding:7px 11px;border-radius:999px;max-width:calc(100% - 24px)}
.bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,3vw,36px);mix-blend-mode:normal;transition:background .4s}
.bar.solid{background:linear-gradient(rgba(5,5,6,.85),rgba(5,5,6,0))}
.brand img{height:34px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}
.bar nav{display:flex;gap:10px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--fg);color:#0b0b0d;font-weight:600;font-size:.88rem;text-decoration:none;transition:transform .3s var(--ease),background .3s}
.pill:hover{transform:translateY(-2px);background:#fff}
.pill.ghost{background:rgba(255,255,255,.06);color:var(--fg);border:1px solid var(--line)}
.sound-btn{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(10,10,12,.5);backdrop-filter:blur(10px);font-size:.82rem}
.eq{display:flex;gap:2px;align-items:flex-end;height:12px}.eq i{width:2px;height:3px;background:currentColor;border-radius:2px}
.sound-btn[aria-pressed=true] .eq i{animation:eq 1s infinite ease-in-out;background:var(--acc)}.eq i:nth-child(2){animation-delay:-.3s!important}.eq i:nth-child(3){animation-delay:-.6s!important}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}

/* HERO */
.hero{position:relative;height:100svh;min-height:560px;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 60%,transparent 20%,rgba(5,5,6,.85) 80%),linear-gradient(transparent 60%,var(--ink))}
.hero-in{text-align:center;padding:0 20px}
.hero h1{font-family:var(--disp);font-weight:400;font-size:clamp(3rem,11vw,10rem);line-height:.9;letter-spacing:-.035em}
.hero h1 span{display:block;font-size:.42em;letter-spacing:-.01em;color:#d9d6d0;margin-bottom:.15em;font-family:var(--sans);font-weight:300}
.hero h1 em{color:var(--fg);text-shadow:0 0 60px rgba(255,90,54,.55)}
.play-reel{margin-top:38px;display:inline-flex;align-items:center;gap:14px;font-size:.92rem;color:#e9e6e0}
.ring{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);font-size:.8rem;position:relative}
.ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(255,90,54,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
.scrollcue{position:absolute;bottom:64px;left:50%;width:1px;height:56px;background:var(--line);overflow:hidden}
.scrollcue span{position:absolute;inset:0;background:var(--fg);animation:cue 2s infinite var(--ease)}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
.reveal{opacity:0;transform:translateY(24px);animation:rise 1.2s var(--ease) forwards}.reveal:nth-child(2){animation-delay:.2s}.reveal:nth-child(3){animation-delay:.5s}
@keyframes rise{to{opacity:1;transform:none}}

/* LIGHTS OUT */
.lights{position:relative;height:420vh}
.lights-sticky{position:sticky;top:0;height:100svh;overflow:hidden;--x:60%;--y:40%;--r:170px}
.scene{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease),transform 6s linear;transform:scale(1.06)}
.scene.is-on{opacity:1;transform:scale(1)}
.scene video{width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.05)}
.dark{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--x) var(--y),rgba(0,0,0,0) 0,rgba(0,0,0,0) var(--r),rgba(2,2,3,.93) calc(var(--r)*2.3));transition:background .05s}
.lights-copy{position:absolute;left:clamp(18px,5vw,72px);bottom:clamp(70px,12vh,120px);width:min(560px,88vw);pointer-events:none}
.lines{list-style:none;display:grid}
.lines li{grid-area:1/1;font-size:clamp(1.15rem,2.2vw,1.6rem);line-height:1.3;opacity:0;transform:translateY(14px);transition:.7s var(--ease);text-shadow:0 2px 20px #000}
.lines li b{display:block;font-family:var(--disp);font-weight:400;font-size:2.1em;line-height:1;margin-bottom:10px;color:#fff}
.lines li.is-on{opacity:1;transform:none}
.hint{font-size:.75rem;color:var(--mut);margin-top:14px}
.progress{position:absolute;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.progress i{width:2px;height:28px;background:var(--line);border-radius:2px;transition:.4s}.progress i.on{background:var(--acc);height:44px}

/* SOUND */
.sound{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;padding:110px 20px}
.dim{opacity:.22;filter:blur(2px) saturate(.6)}
.sound::after,.talk::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--ink),transparent 25%,transparent 75%,var(--ink))}
.sound-in{width:min(1100px,100%);text-align:center;display:flex;flex-direction:column;align-items:center}
#viz{width:100%;height:clamp(120px,22vw,240px);margin:34px 0 26px}
.instruments{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.inst{display:flex;flex-direction:column;align-items:center;gap:8px;width:clamp(96px,22vw,150px);padding:20px 10px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:1rem;transition:.35s var(--ease)}
.inst .ico{font-size:1.6rem;opacity:.7}
.inst:hover{background:rgba(255,255,255,.07);transform:translateY(-3px)}
.inst.playing{border-color:var(--acc);background:rgba(255,90,54,.12);box-shadow:0 0 50px rgba(255,90,54,.25)}
.ab{position:relative;display:flex;margin-top:26px;border:1px solid var(--line);border-radius:999px;padding:4px;background:rgba(0,0,0,.4)}
.ab button{position:relative;z-index:1;padding:10px 20px;font-size:.88rem;border-radius:999px;transition:color .3s;color:var(--mut)}
.ab button[aria-checked=true]{color:#0b0b0d;font-weight:600}
.knob{position:absolute;top:4px;bottom:4px;border-radius:999px;background:var(--fg);transition:.45s var(--ease)}
.fine{font-size:.72rem;color:var(--mut);max-width:60ch;margin-top:18px}

/* TEAM */
.team{padding:120px clamp(16px,4vw,56px) 80px}
.team-head{margin-bottom:46px}.sub{color:var(--mut);max-width:46ch;margin-top:18px}
.reels{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.reel{position:relative;aspect-ratio:3/4.6;border-radius:20px;overflow:hidden;background:#111;transition:transform .5s var(--ease),flex .5s}
.reel video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.6);transition:filter .6s var(--ease),transform 1.2s var(--ease)}
.reel.on video,.reel:hover video,.reel:focus video{filter:none;transform:scale(1.05)}
.reel.solid{background:radial-gradient(circle at 30% 20%,rgba(255,90,54,.35),transparent 60%),#121214;border:1px solid var(--line)}
.tag{position:absolute;inset:auto 0 0;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.tag span{font-size:.7rem;color:var(--acc);letter-spacing:.2em}
.tag h3{font-family:var(--disp);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.2rem)}
.tag p{font-size:.85rem;color:#cfcfd6;max-height:0;opacity:0;overflow:hidden;transition:.5s var(--ease)}
.reel.on .tag p,.reel:hover .tag p,.reel:focus .tag p{max-height:4em;opacity:1}

/* DETAILS */
.details{padding:90px clamp(16px,4vw,56px);border-top:1px solid var(--line)}
.wrap{max-width:1100px}
.svc{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 40px}
.svc li{padding:18px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.svc b{font-weight:500;font-size:1.05rem}.svc span{font-size:.88rem;color:var(--mut)}
.offices{margin-top:28px;font-size:.9rem;color:#cfcfd6}
.tbc{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;border:1px dashed var(--mut);color:var(--mut);padding:2px 7px;border-radius:6px;margin-left:6px}

/* TALK */
.talk{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;padding:110px 20px}
.talk-in{width:min(820px,100%)}
.talk-actions{display:flex;gap:12px;flex-wrap:wrap;margin:36px 0 26px}
.wa{display:inline-flex;flex-direction:column;padding:13px 22px;border-radius:999px;background:#25d366;color:#04230f;font-weight:700;text-decoration:none;line-height:1.1}
.wa small{font-weight:500;font-size:.66rem;opacity:.8}
.tf{display:grid;gap:16px;padding:24px;border:1px solid var(--line);border-radius:24px;background:rgba(12,12,14,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:rise .6s var(--ease)}
.fq{font-size:1.05rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{padding:9px 15px;border-radius:999px;border:1px solid var(--line);font-size:.86rem;transition:.25s}
.chips label:has(input:checked){background:var(--fg);color:#0b0b0d;border-color:var(--fg)}
.chips label:has(input:focus-visible){outline:2px solid var(--acc)}
.fld{display:grid;gap:6px;font-size:.78rem;color:var(--mut)}
.fld input{width:100%;min-width:0;font:inherit;font-size:1rem;color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--line);padding:8px 0}
.fld input:focus{outline:none;border-color:var(--acc)}
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ok{font-size:.85rem;color:#9be7b3;min-height:1.2em}
.foot{padding:40px clamp(16px,4vw,56px) 70px;border-top:1px solid var(--line);display:flex;gap:18px;align-items:center;color:var(--mut);font-size:.78rem}
.foot img{height:28px;width:auto}

/* REEL MODAL */
.reelbox{border:0;padding:0;background:#000;width:min(1100px,94vw);border-radius:18px;overflow:hidden;margin:auto}
.reelbox::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(6px)}
.reelbox video{width:100%;aspect-ratio:16/9;background:#000}
.reelbox .x{position:absolute;top:8px;right:12px;z-index:2;font-size:1.8rem;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.5)}

@media (max-width:820px){
  .reels{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  .reel{scroll-snap-align:start}
  .row{grid-template-columns:1fr 1fr}
  .lights-copy{bottom:84px}
  .progress{top:auto;bottom:auto;top:90px;transform:none;flex-direction:row}.progress i{width:22px;height:2px}.progress i.on{width:36px;height:2px}
  .sound-btn .lbl{display:none}
  .foot{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
.tf[hidden]{display:none}