/* Theme layer: glossy monochrome look (loads after styles.css + motion.css). Animations and videos are untouched. */
:root{
  --bg:#060606;--bg2:#0d0d0d;--surface:#111;--ink:#f5f5f5;--muted:#9a9a9a;--line:rgba(255,255,255,.09);
  --coral:#f0f0f0;--violet:#c4c4c4;--amber:#a8a8a8;--teal:#dcdcdc;--glow:#8a8a8a;--lane:#0a0a0a;--clip-ink:#0a0a0a;
  --head:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --panel-bg:linear-gradient(165deg,#121212 0%,#0a0a0a 70%);
  --rim:linear-gradient(145deg,rgba(255,255,255,.25),rgba(255,255,255,.02) 40%,rgba(255,255,255,.12));
}
body{background:var(--bg)}
::selection{background:#fff;color:#000}
:focus-visible{outline-color:#fff}
#spot{background:radial-gradient(520px circle at var(--x,50%) var(--y,25%),rgba(255,255,255,.07),transparent 70%)}
body::before{content:"";position:fixed;top:-20%;left:50%;width:1200px;height:1200px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 60%);pointer-events:none;z-index:0}
h1,h2,h3,.logo{letter-spacing:-.02em}
h1{font-weight:700}
h2{font-weight:600}

/* Header */
header.top.scrolled{background:rgba(6,6,6,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.logo{display:inline-flex;align-items:center;gap:10px;font:600 1.05rem var(--head)}
.logo svg{width:30px;height:30px;flex:none}
.logo span{color:var(--muted);font-weight:400}

/* Buttons: white pills */
.btn,.offer .btn,.btn.go{background:linear-gradient(180deg,#fff,#cfcfcf);color:#0a0a0a;border-radius:100px;padding:14px 28px;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px rgba(255,255,255,.08)}
.btn:hover,.offer .btn:hover,.btn.go:hover{background:linear-gradient(180deg,#fff,#e2e2e2)}
.btn.sm{padding:9px 18px}
.btn.alt{background:rgba(255,255,255,.02);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.alt:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}
.menu-btn{border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.02)}
.menu-btn:hover{background:rgba(255,255,255,.06)}
.x{border-radius:50%;border:1px solid var(--line)}
.x:hover{background:rgba(255,255,255,.06)}

/* Hero: centred, gradient headline */
.hero-in{text-align:center}
.hero-in h1{margin-inline:auto;max-width:15ch}
.hero-in .lede{margin-inline:auto}
.hero-in .btns{justify-content:center}
h1 .mi,html:not(.mjs) h1 span{background:linear-gradient(180deg,#fff 0%,#fff 45%,#8a8a8a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero-in .tl{text-align:left}
.pill{border:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,.03)}

/* Glossy panels */
.svc,.offer,.work,.cta,.tl{background:var(--panel-bg);border:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 36px -14px rgba(0,0,0,.9)}
.svc{border-top:1px solid var(--line)}
.svc.pop,.offer.pop,.work.pop,.cta.pop,.svc:hover,.offer:hover,.work:hover,.cta:hover{border-color:rgba(255,255,255,.28);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 34px 54px -12px rgba(0,0,0,.95),0 0 40px -10px rgba(255,255,255,.18)}
.cta{border-radius:24px;padding:64px 32px;text-align:center;position:relative}
.cta .frm{max-width:520px;margin-inline:auto}
.cta .frm button{align-self:center}
.cta .mail-row{justify-content:center}
.frm input,.frm textarea,.frm select{background:#0a0a0a;border:1px solid var(--line);border-radius:12px}
.frm input:focus,.frm textarea:focus{border-color:rgba(255,255,255,.4);outline:none}
.pick button{border-radius:100px;background:#0a0a0a}
.pick button:hover,.pick button.on{border-color:#fff;color:#0a0a0a;background:#fff}
.msg.err{color:#ff9d9d}.msg.ok{color:#bfe8c8}
.thumb{background:linear-gradient(135deg,#1c1c1c,#070707 70%)}
.reel .work.more{background:linear-gradient(135deg,#1c1c1c,#0a0a0a)}
.reel .work.more span{color:var(--muted)}
.badge{color:var(--muted)}

/* Sections: hairline dividers like the reference */
.wrap>section:not(.fx):not(.intro):not(:first-child){border-top:1px solid var(--line);margin-top:90px;padding-top:72px}
.intro{text-align:center}.intro h2,.intro p{margin-inline:auto}

/* Services stack: numbered gloss cards */
.x-sc{background:var(--panel-bg);border:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 -12px 36px rgba(0,0,0,.6)}
.x-sc small{color:rgba(255,255,255,.12);font-weight:700}
.x-sc em{color:var(--ink)}
.x-sc:hover{border-color:rgba(255,255,255,.3)}
.x-gl{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.cmp{border-color:var(--line)}
.cap span{background:#fff}

/* Menu panel */
#panel{background:var(--bg2);border-left:1px solid var(--line)}
#panel nav a{font-weight:600}
#panel nav a:hover,#panel nav a[aria-current="page"]{color:#fff}

/* Timeline clips: greyscale */
.c1{background:#f0f0f0}.c2{background:#b5b5b5}.c3{background:#d6d6d6}.c4{background:#8f8f8f}
.ph{box-shadow:0 0 14px rgba(255,255,255,.6)}

/* Playhead progress bar */
#mprog{background:linear-gradient(90deg,#555,#fff)}

/* Stats panel (home) */
.stats{margin:0 auto;max-width:900px;border-radius:24px;padding:2px;background:var(--rim)}
.stats-in{border-radius:22px;background:linear-gradient(160deg,#121212,#0a0a0a 60%);padding:44px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative;overflow:hidden}
.stats-in::after{content:"";position:absolute;top:-60%;left:-20%;width:70%;height:220%;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%);transform:rotate(12deg);pointer-events:none}
.stats b{display:block;font:700 2.1rem var(--head)}
.stats span{display:block;color:var(--muted);font-size:.85rem;margin-top:6px}
@media(max-width:640px){.stats-in{grid-template-columns:1fr;padding:32px 26px;gap:20px}}
footer{border-top:1px solid var(--line);margin-top:60px}

/* ===== Update: no intro/clouds, no $49 card, tight spacing, glossy blur cards ===== */
#intro{display:none!important}

/* Never leave empty gaps: headings and cards are always visible */
html.mjs .mh{clip-path:none;transform:none}
.rv:not(.in){opacity:1}

/* Tighter vertical rhythm */
section,section.fx2,section.fx3,section.fx6,section.fx7{padding-block:40px 0}
.wrap>section:not(.fx):not(.intro):not(:first-child){margin-top:28px;padding-top:36px}
.hero{min-height:auto;margin-bottom:24px;padding-bottom:32px}
.marq{margin-top:12px}
section.fx2{gap:20px}
.x-sc{margin-bottom:14px;height:min(34svh,260px)}
.reel-h{margin-top:32px}
h2+.grid{margin-top:24px}.sub{margin-bottom:20px}
footer{margin-top:32px}

/* Glossy dark cards (page background stays very dark) */
.svc,.offer,.work,.cta,.tl,.x-sc,.slide-tl,.cmp,.x-stage,.reel .work.more,details,.steps li{
  background:linear-gradient(165deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 32%),linear-gradient(180deg,#141414,#0a0a0a);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 18px 36px -14px rgba(0,0,0,.95)}
.x-sc{border-top:1px solid rgba(255,255,255,.18)}
.svc{border-top:1px solid rgba(255,255,255,.18)}
.work .t{background:transparent}
.svc.pop,.offer.pop,.work.pop,.cta.pop,.svc:hover,.offer:hover,.work:hover,.cta:hover,.x-sc:hover{border-color:rgba(255,255,255,.3);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 30px 54px -14px rgba(0,0,0,.95),0 0 30px -12px rgba(255,255,255,.15)}
.x-gl{background:rgba(255,255,255,.06);-webkit-backdrop-filter:none;backdrop-filter:none}