:root{--ink:#fff;--muted:#a6a6a6;--line:#262626;--bg:#000;--raised:#111}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
.display{font-family:Oswald,'Arial Narrow',Impact,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:.92;margin:0}
.eyebrow{font-family:Oswald,'Arial Narrow',sans-serif;font-weight:500;letter-spacing:.16em;font-size:14px;color:var(--muted);text-transform:uppercase}
.btn{display:inline-block;padding:15px 28px;background:#fff;color:#000;text-decoration:none;font-family:Oswald,sans-serif;font-weight:600;letter-spacing:.1em;font-size:15px;border:2px solid #fff;border-radius:999px;transition:background .25s,color .25s;cursor:pointer}
.btn:hover{background:transparent;color:#fff}
.btn.ghost{background:transparent;color:#fff}
.btn.ghost:hover{background:#fff;color:#000}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:99;background:#fff;color:#000;padding:8px 12px}
/* nav */
nav.top{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:40;width:min(1180px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:999px;padding:8px 10px 8px 18px;background:rgba(18,18,18,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1)}
nav.top .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
nav.top .logo img{height:40px;width:auto;display:block}
nav.top .logo span{font-family:Oswald,sans-serif;font-weight:600;letter-spacing:.12em;font-size:13px;line-height:1.05;text-transform:uppercase}
nav.top ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
nav.top ul a{text-decoration:none;font-family:Oswald,sans-serif;font-weight:500;letter-spacing:.14em;font-size:14px;color:#cfcfcf;text-transform:uppercase}
nav.top ul a:hover,nav.top ul a[aria-current]{color:#fff}
nav.top .btn{padding:10px 18px;font-size:13px}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:999px;width:42px;height:42px;cursor:pointer}
.drawer{display:none}
@media(max-width:900px){nav.top ul,nav.top .btn{display:none}.menu-btn{display:block}
 .drawer.open{display:flex;position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.96);flex-direction:column;justify-content:center;padding:90px 28px;gap:6px}
 .drawer a{font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;font-size:40px;text-decoration:none;line-height:1.2}}
/* layout */
section.block{position:relative;padding:clamp(80px,12vh,150px) clamp(20px,5vw,80px)}
.wrap{max-width:1240px;margin:0 auto}
.narrow{max-width:820px;margin:0 auto}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.head h2{font-size:clamp(42px,6vw,84px)}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:#cfcfcf;max-width:640px}
/* hero (home) */
#hero{position:relative;height:420vh}
#hero .stick{position:sticky;top:0;height:100vh;overflow:hidden}
.bgtype{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(90px,19vw,330px);line-height:.86;text-align:center;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #2c2c2c;pointer-events:none;will-change:transform,opacity}
.stage{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 42%;display:flex;align-items:center;justify-content:center;padding-bottom:12vh}
.rig{position:relative;width:min(56vw,860px,80vh);aspect-ratio:16/9;transform-style:preserve-3d;will-change:transform}
.scr{position:absolute;inset:0;margin:0;border-radius:18px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 40px 110px rgba(0,0,0,.85),0 0 90px rgba(255,255,255,.07);will-change:transform,filter;cursor:pointer}
.scr img{width:100%;height:100%;object-fit:cover;display:block}
.scr:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 32%);pointer-events:none}
.hero-copy{position:absolute;left:clamp(20px,5vw,80px);bottom:clamp(28px,6vh,64px);max-width:540px;z-index:2}
.hero-copy h1{font-size:clamp(28px,3.2vw,46px);line-height:1}
.hero-copy p{margin:12px 0 20px;font-size:16px;line-height:1.5;color:#d4d4d4}
.row{display:flex;gap:12px;flex-wrap:wrap}
.cap{position:absolute;right:clamp(20px,5vw,80px);bottom:clamp(84px,13vh,130px);z-index:2;text-align:right}
.capn{font-family:Oswald,sans-serif;letter-spacing:.14em;font-size:14px;color:var(--muted)}.capn b{color:#fff;font-weight:600}
.capt{font-family:Oswald,sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(28px,3vw,44px);line-height:1.05;margin-top:6px}
.capk{color:var(--muted);font-size:14px;margin-top:4px}
.scrollhint{position:absolute;right:clamp(20px,5vw,80px);bottom:40px;z-index:2;display:flex;align-items:center;gap:12px}
.rec{width:10px;height:10px;border-radius:9999px;background:#fff;animation:blink 1.4s infinite;display:inline-block}
@keyframes blink{50%{opacity:.15}}
.fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:3}
@media(max-width:860px){.rig{width:min(84vw,80vh)}.stage{padding-bottom:26vh}.cap{left:20px;right:auto;text-align:left;bottom:auto;top:92px}.hero-copy{bottom:74px}.hero-copy p{display:none}.hero-copy h1{margin-bottom:16px}.scrollhint{left:20px;right:auto;bottom:26px}}
#statement .big{font-size:clamp(36px,5.6vw,88px);line-height:1.02}
#statement .big span{color:#2e2e2e;transition:color .5s}
#statement .big span.on{color:#fff}
/* video strip */
.vstrip{overflow:hidden;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);touch-action:pan-y}
.vstrip.drag{cursor:grabbing}
.vtrack{display:flex;gap:18px;width:max-content;will-change:transform;padding:6px 0 10px}
.vid{flex:0 0 clamp(250px,28vw,400px);text-decoration:none;display:flex;flex-direction:column;gap:4px;background:none;border:0;padding:0;color:inherit;text-align:left;font:inherit;cursor:pointer}
.th{position:relative;display:block;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.th.vert img{object-fit:contain;background:#0a0a0a}
.pl{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:.3s}
.vid:hover .th img{transform:scale(1.05)}.vid:hover .pl,.vid:focus-visible .pl{opacity:1;transform:none}
.vt{font-family:Oswald,sans-serif;font-weight:600;text-transform:uppercase;font-size:19px;margin-top:8px;display:block}
.vk{color:var(--muted);font-size:14px;display:block}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px}
.vgrid .vid{flex:none}
@media(max-width:960px){.vgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.vgrid{grid-template-columns:1fr}}
/* marquee */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:24px 0;white-space:nowrap}
.marquee .track{display:inline-flex;gap:56px;animation:mq 40s linear infinite;padding-left:56px}
.marquee span{font-family:Oswald,sans-serif;font-weight:600;font-size:clamp(26px,3.6vw,48px);text-transform:uppercase;color:#3a3a3a}
.marquee span b{color:#fff;font-weight:600}
@keyframes mq{to{transform:translateX(-50%)}}
/* cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:960px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid{grid-template-columns:1fr}}
.card{border:1px solid #222;border-radius:22px;background:linear-gradient(160deg,#121212,#060606);padding:34px 30px;min-height:250px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;text-decoration:none;transition:transform .25s ease-out,border-color .3s}
.card:hover{border-color:#444}
.card .num{font-family:Oswald,sans-serif;font-size:14px;letter-spacing:.16em;color:var(--muted)}
.card h3{font-size:36px;margin:56px 0 12px}
.card p{margin:0;color:#bdbdbd;line-height:1.55;font-size:16px}
.card .go{margin-top:18px;font-family:Oswald,sans-serif;letter-spacing:.14em;font-size:13px;color:#fff;text-transform:uppercase}
.card .ring{position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:9999px;border:2px solid #1f1f1f;transition:transform .6s,border-color .6s}
.card .ring:after{content:"";position:absolute;inset:28px;border-radius:9999px;border:10px solid #161616}
.card:hover .ring{transform:scale(1.25) rotate(40deg);border-color:#3a3a3a}
.ind .grid{grid-template-columns:repeat(4,1fr)}.ind .card{min-height:250px;padding:30px 26px}.ind .card h3{font-size:30px;margin-top:44px}@media(max-width:1100px){.ind .grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.ind .grid{grid-template-columns:1fr}}
/* reviews */
.rv-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;scrollbar-width:thin;scrollbar-color:#333 transparent}
.rv{flex:0 0 min(420px,85vw);scroll-snap-align:start;background:var(--raised);border:1px solid var(--line);border-radius:22px;padding:32px 30px;display:flex;flex-direction:column;gap:20px}
.rv blockquote{margin:0;font-size:18px;line-height:1.55;color:#e8e8e8;flex:1}
.rv .who{font-family:Oswald,sans-serif;font-weight:600;letter-spacing:.12em;font-size:14px;color:var(--muted);text-transform:uppercase}
.stars{display:flex;gap:4px}
.rv-ctrl{display:flex;gap:10px}
.rv-ctrl button{width:52px;height:52px;border:2px solid #fff;background:transparent;color:#fff;cursor:pointer;font-size:20px;border-radius:999px}
.rv-ctrl button:hover{background:#fff;color:#000}
.rvgrid{columns:3 320px;column-gap:20px}
.rvgrid .rv{break-inside:avoid;margin-bottom:20px;width:100%}
/* landing */
.lhero{padding:150px clamp(20px,5vw,80px) 70px}
.lhero .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.lhero h1{font-size:clamp(50px,7vw,108px)}
.lhero .lede{margin:24px 0 30px}
.feat{perspective:1400px}
.feat .vid{width:100%}
.feat .th{border-radius:22px;transform:rotateY(-10deg) rotateX(4deg);transition:transform .6s;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 40px 110px rgba(0,0,0,.85),0 0 90px rgba(255,255,255,.06)}
.feat .vid:hover .th{transform:none}
.feat .pl{opacity:1;transform:none;width:76px;height:76px;margin:-38px 0 0 -38px}
@media(max-width:900px){.lhero .wrap{grid-template-columns:1fr}.feat .th{transform:none}}
.pts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.pts div{padding:30px 28px 30px 0;border-bottom:1px solid var(--line)}
.pts h3{font-family:Oswald,sans-serif;text-transform:uppercase;font-size:24px;margin:0 0 10px}
.pts p{margin:0;color:#bdbdbd;line-height:1.55}
@media(max-width:800px){.pts{grid-template-columns:1fr}}
/* prose (seo pages, blog) */
.prose{font-size:18px;line-height:1.7;color:#d6d6d6}
.prose h2{font-family:Oswald,sans-serif;text-transform:uppercase;font-size:34px;line-height:1.1;color:#fff;margin:48px 0 14px}
.prose h3,.prose h4{font-family:Oswald,sans-serif;text-transform:uppercase;font-size:22px;color:#fff;margin:32px 0 10px}
.prose a{color:#fff;text-decoration-color:#666;text-underline-offset:3px}
.prose li{margin:6px 0}
.prose table{border-collapse:collapse;width:100%}.prose td,.prose th{border:1px solid var(--line);padding:8px 10px;text-align:left}
.phero{padding:150px clamp(20px,5vw,80px) 20px}
.phero h1{font-size:clamp(40px,6vw,84px)}
/* contact */
form.contact{display:grid;gap:16px;margin-top:10px}
form.contact .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){form.contact .two{grid-template-columns:1fr}}
form.contact label{display:grid;gap:8px;font-family:Oswald,sans-serif;letter-spacing:.12em;font-size:13px;text-transform:uppercase;color:var(--muted)}
form.contact input,form.contact select,form.contact textarea{background:#0d0d0d;border:1px solid #2a2a2a;border-radius:14px;color:#fff;font:inherit;font-size:17px;padding:14px 16px;font-family:Inter,sans-serif;letter-spacing:0;text-transform:none}
form.contact input:focus,form.contact select:focus,form.contact textarea:focus{outline:2px solid #fff;outline-offset:1px}
.contact-side{display:grid;gap:22px;align-content:start}
.contact-side a{font-size:20px;text-decoration:none}
/* cta + footer */
#cta{text-align:center;padding:clamp(110px,18vh,200px) 20px;border-top:1px solid var(--line);overflow:hidden;position:relative}
#cta h2{font-size:clamp(60px,12vw,190px)}
#cta p{color:#bdbdbd;font-size:19px;margin:24px 0 36px}
#cta .rings{position:absolute;left:50%;top:50%;width:min(1100px,160vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:.5}
footer{padding:56px clamp(20px,5vw,80px) 40px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;max-width:1240px;margin:0 auto}
footer h4{font-family:Oswald,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-size:13px;margin:0 0 12px;font-weight:600}
footer a{display:block;text-decoration:none;color:#bdbdbd;margin:6px 0}footer a:hover{color:#fff}
footer img{height:72px;margin-bottom:12px}
footer .base{max-width:1240px;margin:36px auto 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);padding-top:20px}
@media(max-width:800px){footer .cols{grid-template-columns:1fr 1fr}}
/* lightbox */
.lb{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:4vw}
.lb.open{display:flex}
.lb .frame{width:min(1200px,100%);aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.lb .frame.vert{width:auto;height:min(86vh,1000px);aspect-ratio:9/16}
.lb iframe{width:100%;height:100%;border:0;display:block}
.lb .x{position:absolute;top:18px;right:18px;width:52px;height:52px;border-radius:999px;border:2px solid #fff;background:transparent;color:#fff;font-size:22px;cursor:pointer}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}.marquee .track{animation:none}html{scroll-behavior:auto}}