/* ============================================================
   CELLAR DOOR STUDIOS — Design System
   Bold & contemporary. One framework, per-studio moods.
   ============================================================ */

:root {
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --max: 1280px;
  --pad: clamp(20px, 4vw, 56px);
  --radius: 18px;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

/* ---------- Per-studio themes ---------- */
body[data-theme="home"]    { --bg:#0b0b0d; --bg2:#131316; --ink:#f4f1ea; --muted:#9d9a92; --accent:#e8c15a; --accent-ink:#181206; --line:rgba(244,241,234,.14); }
body[data-theme="s1"]      { --bg:#0e0a06; --bg2:#171009; --ink:#f7f0e4; --muted:#a39a89; --accent:#ffae00; --accent-ink:#1c1200; --line:rgba(247,240,228,.14); }
body[data-theme="s2"]      { --bg:#120d0b; --bg2:#1c1310; --ink:#f6efe9; --muted:#a89a90; --accent:#ff7a59; --accent-ink:#210b03; --line:rgba(246,239,233,.14); }
body[data-theme="s3"]      { --bg:#090b10; --bg2:#101420; --ink:#eef1f7; --muted:#8f96a6; --accent:#5b8cff; --accent-ink:#050a1a; --line:rgba(238,241,247,.14); }
body[data-theme="s4"]      { --bg:#0d0a10; --bg2:#161020; --ink:#f5f0f7; --muted:#a094ab; --accent:#d9a441; --accent2:#c84dff; --accent-ink:#1a1204; --line:rgba(245,240,247,.14); }
body[data-theme="loft"]    { --bg:#0f0c07; --bg2:#191207; --ink:#f7f1e6; --muted:#a79b85; --accent:#d9a441; --accent-ink:#1c1300; --line:rgba(247,241,230,.14); }
body[data-theme="montage"] { --bg:#0b0710; --bg2:#150d1f; --ink:#f4eefb; --muted:#a294b3; --accent:#c84dff; --accent-ink:#1c0428; --line:rgba(244,238,251,.15); }

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection { background:var(--accent); color:var(--accent-ink); }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }

h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; line-height:1.02; letter-spacing:-.02em; text-wrap:balance; }

.wrap { max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ---------- Utility type ---------- */
.kicker {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
}
.kicker::before { content:""; width:26px; height:2px; background:var(--accent); }
.display-xl { font-size:clamp(44px, 8.5vw, 118px); text-transform:uppercase; }
.display-l  { font-size:clamp(34px, 5.6vw, 76px); text-transform:uppercase; }
.display-m  { font-size:clamp(26px, 3.6vw, 46px); }
.lede { font-size:clamp(17px, 1.6vw, 21px); color:var(--muted); max-width:56ch; }
.accent { color:var(--accent); }
.outline-text {
  color:transparent; -webkit-text-stroke:1.5px var(--ink);
}

/* ---------- Nav ---------- */
.nav {
  position:fixed; inset:0 0 auto 0; z-index:100;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom:1px solid var(--line);
}
.nav-inner {
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between; height:72px;
}
.nav-logo { font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; }
.nav-logo em { font-style:normal; color:var(--accent); }
.nav-logo img { height:38px; width:auto; display:block; }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links > a { font-size:14px; font-weight:500; color:var(--muted); transition:color .25s; letter-spacing:.02em; }
.nav-links > a:hover, .nav-links > a.active { color:var(--ink); }
/* the nav link colour outranked .btn-solid, greying out the Book a Studio label */
.nav-links > a.btn-solid,
.nav-links > a.btn-solid:hover,
.nav-links > a.btn-solid.active { color:var(--accent-ink); }
.nav-dd { position:relative; }
.nav-dd > a { font-size:14px; font-weight:500; color:var(--muted); transition:color .25s; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.nav-dd > a::after { content:"▾"; font-size:10px; }
.nav-dd:hover > a { color:var(--ink); }
.nav-dd-menu {
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  display:grid; grid-template-columns:18px auto 1fr; column-gap:12px;
  padding:10px; min-width:max-content; opacity:0; pointer-events:none; transition:.3s var(--ease);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.nav-dd:hover .nav-dd-menu { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.nav-dd-menu-grid { display:grid; grid-template-columns:18px auto 1fr; column-gap:12px; }
.nav-dd-menu a {
  display:grid; grid-template-columns:18px auto 1fr; grid-column:1 / -1;
  align-items:baseline; column-gap:12px;
  padding:11px 14px; border-radius:9px; font-size:14px; transition:background .2s; white-space:nowrap;
}
/* one shared set of columns across all rows, so names and subtitles line up */
@supports (grid-template-columns: subgrid) {
  .nav-dd-menu a { grid-template-columns:subgrid; }
}
.nav-dd-menu a:hover { background:color-mix(in srgb, var(--ink) 7%, transparent); }
.nav-dd-menu .num { font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--accent); }
.nav-dd-menu .sub { font-size:11px; color:var(--muted); }
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:.04em;
  padding:13px 26px; border-radius:999px; border:1px solid transparent;
  transition:.3s var(--ease); cursor:pointer;
}
.btn-solid { background:var(--accent); color:var(--accent-ink); }
.btn-solid:hover { transform:translateY(-2px); box-shadow:0 12px 32px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-ghost { border-color:var(--line); color:var(--ink); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn-lg { padding:17px 34px; font-size:16px; }
.nav-burger { display:none; background:none; border:none; color:var(--ink); font-size:26px; cursor:pointer; }

@media (max-width: 900px) {
  .nav-links { display:none; position:fixed; top:72px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; padding:24px var(--pad) 32px; gap:18px; }
  .nav-links.open { display:flex; }
  .nav-burger { display:block; }
  .nav-dd-menu { position:static; transform:none; opacity:1; pointer-events:auto; box-shadow:none; border:none; background:transparent; padding:4px 0 0 12px; min-width:0; display:none; }
  .nav-dd.open .nav-dd-menu { display:block; }
  /* stacked panel on phones — plain rows, no shared columns */
  .nav-dd-menu a { display:flex; align-items:baseline; gap:10px; white-space:normal; padding:9px 0; }
  .nav-dd-menu .num { flex:0 0 18px; }
  .nav-dd-menu .sub { margin-left:auto; text-align:right; }
}

/* ---------- Hero ---------- */
.hero { position:relative; min-height:92svh; display:flex; align-items:flex-end; padding:140px 0 64px; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; opacity:.5; transform:scale(1.06); animation:heroZoom 12s var(--ease) forwards; }
@keyframes heroZoom { to { transform:scale(1); } }
.hero-bg::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg) 4%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, color-mix(in srgb, var(--bg) 25%, transparent) 100%);
}
/* Hero background video — desktop only, sits under the still, never over the text */
.hero-bg video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s var(--ease); pointer-events:none; z-index:0;
}
.hero-bg.has-video video { opacity:.42; }
.hero-bg.has-video img { opacity:0; transition:opacity 1.2s var(--ease); animation:none; }
.hero-bg.has-video::after {
  background:linear-gradient(to top, var(--bg) 6%, color-mix(in srgb, var(--bg) 68%, transparent) 48%, color-mix(in srgb, var(--bg) 38%, transparent) 100%);
}
.hero-bg::after { z-index:1; }
@media (prefers-reduced-motion: reduce) { .hero-bg video { display:none; } }

.hero-content { position:relative; z-index:2; width:100%; }
.hero-meta { display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:34px; padding-top:24px; border-top:1px solid var(--line); }
.hero-meta div { font-size:13px; color:var(--muted); letter-spacing:.06em; }
.hero-meta strong { display:block; color:var(--ink); font-family:var(--font-display); font-size:16px; letter-spacing:0; margin-top:2px; }
.hero-num {
  position:absolute; right:calc(var(--pad) * .6); top:16vh; z-index:1;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(160px, 30vw, 420px); line-height:1;
  color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--accent) 55%, transparent);
  user-select:none; pointer-events:none;
}

/* ---------- Marquee ---------- */
.marquee { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; background:var(--bg2); }
.marquee-track { display:flex; gap:48px; width:max-content; animation:marquee 28s linear infinite; }
.marquee-track span { font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; color:var(--muted); }
.marquee-track span b { color:var(--accent); font-weight:600; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding:clamp(72px, 10vw, 140px) 0; }
.section-tight { padding:clamp(48px, 6vw, 84px) 0; }
.section-head { margin-bottom:clamp(36px, 5vw, 64px); display:grid; gap:18px; }
.section-head .lede { margin-top:2px; }
.bg2 { background:var(--bg2); }

/* ---------- Studio index (home) ---------- */
.studio-index { border-top:1px solid var(--line); }
.studio-row {
  position:relative; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:clamp(16px,3vw,44px);
  padding:clamp(28px,4vw,44px) 0; border-bottom:1px solid var(--line); transition:.35s var(--ease);
}
.studio-row .num { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--muted); transition:.3s; }
.studio-row .name { font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(26px,4.4vw,58px); line-height:1; letter-spacing:-.02em; transition:.3s var(--ease); }
.studio-row .tag { font-size:14px; color:var(--muted); max-width:26ch; text-align:right; }
.studio-row .arrow { font-family:var(--font-display); font-size:26px; color:var(--muted); transition:.35s var(--ease); }
.studio-row:hover { padding-left:14px; }
.studio-row:hover .name { color:var(--row-accent, var(--accent)); }
.studio-row:hover .num { color:var(--row-accent, var(--accent)); }
.studio-row:hover .arrow { transform:translateX(8px) rotate(-45deg); color:var(--row-accent, var(--accent)); }
.studio-row .peek {
  position:absolute; right:16%; top:50%; transform:translateY(-50%) rotate(-4deg) scale(.92);
  width:min(300px, 26vw); aspect-ratio:4/3; object-fit:cover; border-radius:12px;
  opacity:0; transition:.4s var(--ease); pointer-events:none; z-index:3;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.studio-row:hover .peek { opacity:1; transform:translateY(-50%) rotate(-2deg) scale(1); }
@media (max-width:800px){
  .studio-row { grid-template-columns:auto 1fr auto; }
  .studio-row .tag { display:none; }
  .studio-row .peek { display:none; }
}

/* ---------- Cards & grids ---------- */
.grid { display:grid; gap:clamp(16px, 2.4vw, 28px); }
.grid-2 { grid-template-columns:repeat(2, 1fr); }
.grid-3 { grid-template-columns:repeat(3, 1fr); }
.grid-4 { grid-template-columns:repeat(4, 1fr); }
@media (max-width: 980px){ .grid-3, .grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; } }

.card {
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px, 2.6vw, 34px); transition:.35s var(--ease); position:relative; overflow:hidden;
}
.card:hover { transform:translateY(-5px); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); }
.card h3 { font-size:clamp(18px, 1.7vw, 22px); margin-bottom:10px; }
.card p { color:var(--muted); font-size:15px; }
.card .chip-num { font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--accent); letter-spacing:.14em; display:block; margin-bottom:16px; }

/* feature icon card */
.feature { display:grid; gap:10px; padding:26px 24px; border:1px solid var(--line); border-radius:var(--radius); background:color-mix(in srgb, var(--bg2) 60%, transparent); transition:.3s var(--ease); }
.feature:hover { border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); background:var(--bg2); }
.feature .ico { font-size:22px; }
.feature h4 { font-size:16.5px; }
.feature p { font-size:14px; color:var(--muted); }

/* ---------- Split blocks (setup showcase) ---------- */
.split { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px, 4.5vw, 72px); align-items:center; }
.split.rev { direction:rtl; } .split.rev > * { direction:ltr; }
.split-media { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.split-media img { width:100%; height:100%; object-fit:cover; transition:1.1s var(--ease); }
.split:hover .split-media img { transform:scale(1.045); }
.split-media .badge {
  position:absolute; top:16px; left:16px; background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:999px;
  font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:8px 16px; color:var(--accent);
}
.split-copy .kicker { margin-bottom:16px; }
.split-copy h3 { font-size:clamp(26px, 3.4vw, 44px); text-transform:uppercase; margin-bottom:16px; }
.split-copy p { color:var(--muted); max-width:52ch; }
.split-copy .mini-list { margin-top:20px; display:grid; gap:9px; }
.split-copy .mini-list li { display:flex; gap:12px; font-size:15px; color:var(--muted); }
.split-copy .mini-list li::before { content:"→"; color:var(--accent); font-family:var(--font-display); }
.stack > * + * { margin-top:clamp(56px, 8vw, 110px); }
@media (max-width: 900px){ .split, .split.rev { grid-template-columns:1fr; direction:ltr; } }

/* ---------- Gallery ---------- */
.gallery { columns:3 300px; gap:16px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery-grid figure { margin:0; border-radius:14px; overflow:hidden; position:relative; aspect-ratio:4/3; }
.gallery-grid img { width:100%; height:100%; object-fit:cover; transition:.8s var(--ease); }
.gallery-grid figure:hover img { transform:scale(1.04); }
@media (max-width:760px){ .gallery-grid { grid-template-columns:repeat(2,1fr); } }
.gallery figure { break-inside:avoid; margin-bottom:16px; border-radius:14px; overflow:hidden; position:relative; }
.gallery img { width:100%; transition:.8s var(--ease); }
.gallery figure:hover img { transform:scale(1.04); }

/* ---------- Stats strip ---------- */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.stats div { padding:26px 24px; border-left:1px solid var(--line); background:var(--bg2); }
.stats div:first-child { border-left:none; }
.stats b { display:block; font-family:var(--font-display); font-size:clamp(22px,2.4vw,32px); font-weight:700; color:var(--accent); }
.stats span { font-size:13px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }

/* ---------- Use-case chips ---------- */
.chips { display:flex; flex-wrap:wrap; gap:12px; }
.chips span {
  border:1px solid var(--line); border-radius:999px; padding:11px 22px;
  font-family:var(--font-display); font-size:14px; font-weight:500; color:var(--muted); transition:.3s;
}
.chips span:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* ---------- FAQ ---------- */
.faq details { border-bottom:1px solid var(--line); }
.faq summary {
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--font-display); font-weight:600; font-size:clamp(16px,1.6vw,19px); padding:24px 4px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:24px; color:var(--accent); transition:.3s; flex:0 0 auto; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { color:var(--muted); padding:0 4px 26px; max-width:75ch; }

/* ---------- CTA band ---------- */
.cta-band { position:relative; overflow:hidden; border-radius:calc(var(--radius) + 8px); background:var(--bg2); border:1px solid var(--line); padding:clamp(44px,6vw,84px); text-align:center; }
.cta-band::before {
  content:""; position:absolute; inset:-40%;
  background:radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 55%);
  pointer-events:none;
}
.cta-band h2 { position:relative; }
.cta-band .lede { margin:16px auto 30px; position:relative; }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; }

/* ---------- Footer ---------- */
footer { border-top:1px solid var(--line); padding:clamp(48px,6vw,80px) 0 40px; background:var(--bg2); }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(24px,4vw,56px); margin-bottom:48px; }
.foot-grid h5 { font-family:var(--font-display); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.foot-grid a, .foot-grid p { display:block; font-size:14.5px; color:var(--muted); margin-bottom:10px; }
.foot-grid a:hover { color:var(--accent); }
.foot-brand { font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
.foot-brand em { font-style:normal; color:var(--accent); }
.foot-bottom { border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
@media (max-width:900px){ .foot-grid { grid-template-columns:1fr 1fr; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity:0; transform:translateY(34px); transition:.9s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal-d1 { transition-delay:.08s; } .reveal-d2 { transition-delay:.16s; } .reveal-d3 { transition-delay:.24s; }

/* ---------- Montage specials ---------- */
.set-card { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:3/3.6; cursor:pointer; }
.set-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.9s var(--ease); }
.set-card:hover img { transform:scale(1.06); }
.set-card .veil { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.82) 8%, transparent 60%); }
.set-card .set-info { position:absolute; left:20px; right:20px; bottom:18px; }
.set-card .set-info h3 { font-size:clamp(22px,2.2vw,30px); text-transform:uppercase; letter-spacing:.02em; color:#fff; }
.set-card .set-info p { font-size:13.5px; color:rgba(255,255,255,.82); margin-top:6px; max-height:0; opacity:0; overflow:hidden; transition:.5s var(--ease); }
.set-card:hover .set-info p { max-height:120px; opacity:1; }
.set-card .set-num { position:absolute; top:14px; left:16px; font-family:var(--font-display); font-weight:700; color:#fff; background:rgba(0,0,0,.4); backdrop-filter:blur(6px); border-radius:999px; padding:6px 13px; font-size:12px; letter-spacing:.12em; }
.set-card::after { content:""; position:absolute; inset:0; border-radius:var(--radius); border:1.5px solid transparent; transition:.4s; pointer-events:none; }
.set-card:hover::after { border-color:var(--set-accent, var(--accent)); }

/* rainbow text for montage */
.vibgyor {
  background:linear-gradient(90deg,#ff4d4d,#ffae00,#ffe600,#3ddc84,#4dc3ff,#7a5cff,#c84dff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Pricing ---------- */
.rate-card { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:clamp(24px,3vw,36px); border:1px solid var(--line); border-radius:var(--radius); background:var(--bg2); transition:.35s var(--ease); }
.rate-card:hover { transform:translateY(-4px); border-color:var(--rc-accent, var(--accent)); }
.rate-card .rc-left { display:flex; align-items:center; gap:22px; }
.rate-card .rc-num { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--rc-accent, var(--accent)); border:1.5px solid var(--rc-accent, var(--accent)); border-radius:999px; width:46px; height:46px; display:grid; place-items:center; flex:0 0 auto; }
.rate-card h3 { font-size:clamp(18px,2vw,24px); text-transform:uppercase; }
.rate-card p { font-size:13.5px; color:var(--muted); margin-top:3px; }
.rate-card .rc-dl { font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--rc-accent, var(--accent)); white-space:nowrap; display:inline-flex; gap:8px; align-items:center; }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); }
.loc-card { border:1px solid var(--line); border-left:3px solid var(--loc-accent, var(--accent)); border-radius:12px; padding:22px 24px; background:var(--bg2); transition:.3s var(--ease); }
.loc-card:hover { transform:translateX(6px); }
.loc-card h4 { font-size:16px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; color:var(--loc-accent, var(--accent)); }
.loc-card p { font-size:14.5px; color:var(--muted); }
.big-link { font-family:var(--font-display); font-weight:700; font-size:clamp(22px,3.2vw,40px); display:block; margin:6px 0; transition:.3s; letter-spacing:-.01em; }
.big-link:hover { color:var(--accent); transform:translateX(6px); }

/* dual hero (studio four) */
.dual { display:grid; grid-template-columns:1fr 1fr; min-height:78svh; gap:2px; }
.dual a { position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:44px clamp(24px,3.5vw,56px); }
.dual a img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transition:1s var(--ease); }
.dual a:hover img { opacity:.75; transform:scale(1.05); }
.dual a::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.85), transparent 60%); }
.dual .dual-info { position:relative; z-index:2; }
.dual .dual-info h2 { font-size:clamp(30px,4.2vw,58px); text-transform:uppercase; }
.dual .dual-info p { color:rgba(255,255,255,.8); max-width:44ch; margin-top:10px; font-size:15px; }
.dual .dual-info .btn { margin-top:20px; }
@media (max-width:820px){ .dual { grid-template-columns:1fr; } .dual a { min-height:46svh; } }

/* ---------- Video cards ---------- */
.video-card { position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/9; cursor:pointer; background:#000; border:1px solid var(--line); }
.video-card img { width:100%; height:100%; object-fit:cover; opacity:.85; transition:.5s var(--ease); }
.video-card:hover img { opacity:1; transform:scale(1.03); }
.video-card .play {
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}
.video-card .play span {
  width:58px; height:58px; border-radius:50%; background:color-mix(in srgb, var(--accent) 92%, #fff);
  color:var(--accent-ink); display:grid; place-items:center; font-size:20px; padding-left:4px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); transition:.3s var(--ease);
}
.video-card:hover .play span { transform:scale(1.1); }
.video-card .vc-title {
  position:absolute; left:0; right:0; bottom:0; padding:28px 14px 10px;
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent);
  font-family:var(--font-display); font-size:13.5px; font-weight:600; color:#fff; letter-spacing:.02em;
}
.video-card iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); }
.video-grid-2 { grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .video-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .video-grid, .video-grid-2 { grid-template-columns:1fr; } }
.video-feature { max-width:980px; margin:0 auto; }

/* ---------- Watch strips (shared across studio + landing pages) ---------- */
.vidsec { padding:clamp(48px,6vw,86px) 0; border-top:1px solid var(--line); }
.vidsec-head { max-width:820px; margin:0 0 34px; }
.vidsec-head h2 { margin:0; }
.vidsec-head p { color:var(--muted); margin:14px 0 0; max-width:62ch; }
.vidsec-head .btn { margin-top:22px; }
.vidsec .video-grid { margin-top:0; align-items:start; }
.vidsec .video-grid:empty { display:none; }

/* Instagram reel card — collapsed it matches the 16:9 cards so the grid stays even;
   it only becomes vertical once played. */
.video-card.reel-card { aspect-ratio:16/9; }
.video-card.reel-card.reel-live { aspect-ratio:9/16; max-height:620px; }
.video-card.reel-card .reel-ph img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9;
}
.video-card.reel-card:hover .reel-ph img { opacity:1; }
.video-card.reel-card .reel-ph {
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%),
    linear-gradient(160deg, #17171c, #0c0c10);
}
.video-card.reel-card .reel-mark {
  position:absolute; top:14px; left:14px; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding:5px 10px; border-radius:999px;
}
.video-card .vc-title span { display:block; font-weight:400; font-size:12px; color:rgba(255,255,255,.62); margin-top:3px; letter-spacing:.03em; }
.video-card.reel-live { background:#0c0c10; }
.video-card.reel-live iframe { background:#fff; }
@media (max-width:600px){ .video-card.reel-card.reel-live { max-height:none; } }

/* ---------- Films filter ---------- */
.filter-chips { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(24px,3vw,40px); }
.filter-chips button {
  border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:999px;
  padding:10px 20px; font-family:var(--font-display); font-size:13.5px; font-weight:600; cursor:pointer; transition:.25s;
}
.filter-chips button:hover { border-color:var(--accent); color:var(--accent); }
.filter-chips button.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.credit-names { display:flex; flex-wrap:wrap; gap:10px 26px; }
.credit-names span { font-family:var(--font-display); font-weight:600; font-size:clamp(15px,1.6vw,19px); color:var(--muted); }
.credit-names span b { color:var(--accent); font-weight:600; margin-right:8px; }

/* ---------- Dual hover peeks (studio rows with two spaces) ---------- */
.studio-row .peek-b {
  right:4%; transform:translateY(-46%) rotate(5deg) scale(.92);
  transition-delay:.05s;
}
.studio-row:hover .peek-b { opacity:1; transform:translateY(-46%) rotate(3deg) scale(1); }
.studio-row .peek-a { right:24%; }
.studio-row .peek-a, .studio-row .peek-b { width:min(260px, 22vw); }

/* ---------- Dropdown hover fix: bridge the gap + delayed close ---------- */
.nav-dd::before { content:""; position:absolute; left:-24px; right:-24px; top:100%; height:22px; }
.nav-dd-menu { transition:opacity .25s var(--ease), transform .25s var(--ease); transition-delay:.18s; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { transition-delay:0s; }
@media (max-width:900px){ .nav-dd::before { display:none; } }

/* ---------- New page themes ---------- */
body[data-theme="events"]  { --bg:#0c0a06; --bg2:#151107; --ink:#f6f1e4; --muted:#a79e8a; --accent:#d9b45c; --accent-ink:#1c1300; --line:rgba(246,241,228,.14); }
body[data-theme="consult"] { --bg:#141614; --bg2:#1d201c; --ink:#eef0e6; --muted:#9aa090; --accent:#b9c19a; --accent-ink:#181c10; --line:rgba(238,240,230,.14); }
body[data-theme="tcr"]     { --bg:#0a0a16; --bg2:#12122a; --ink:#eef0fb; --muted:#9297b8; --accent:#7c8cff; --accent2:#ff5ad1; --accent-ink:#06071c; --line:rgba(238,240,251,.15); }
body[data-theme="academy"] { --bg:#0d0b07; --bg2:#161209; --ink:#f6efe0; --muted:#a89e88; --accent:#cf9d3d; --accent-ink:#1c1300; --line:rgba(246,239,224,.14); }

/* neon text for content room */
.neon {
  background:linear-gradient(90deg,#7c8cff,#b06bff,#ff5ad1);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* process steps */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; counter-reset:step; }
.steps div { border:1px solid var(--line); border-radius:14px; padding:22px 20px; background:var(--bg2); position:relative; }
.steps div::before { counter-increment:step; content:"0" counter(step); font-family:var(--font-display); font-weight:700; color:var(--accent); font-size:13px; letter-spacing:.15em; display:block; margin-bottom:10px; }
.steps h4 { font-size:16.5px; margin-bottom:6px; }
.steps p { font-size:13.5px; color:var(--muted); }

/* tier cards */
.tier { border:1px solid var(--line); border-radius:var(--radius); background:var(--bg2); padding:clamp(24px,3vw,36px); display:grid; gap:14px; transition:.3s var(--ease); }
.tier:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); }
.tier .t-num { font-family:var(--font-display); font-weight:700; color:var(--accent); font-size:13px; letter-spacing:.18em; }
.tier h3 { font-size:clamp(20px,2vw,26px); }
.tier .t-sub { color:var(--ink); font-weight:600; font-size:14.5px; }
.tier ul { display:grid; gap:8px; }
.tier li { display:flex; gap:10px; font-size:14px; color:var(--muted); }
.tier li::before { content:"→"; color:var(--accent); font-family:var(--font-display); flex:0 0 auto; }
.tier .t-meta { border-top:1px solid var(--line); padding-top:14px; font-size:13.5px; color:var(--muted); }
.tier .t-meta b { color:var(--ink); }

/* partner band */
.partner-band { border:1px solid var(--line); border-radius:calc(var(--radius) + 6px); overflow:hidden; background:var(--bg2); }
.partner-band .pb-head { padding:clamp(28px,4vw,44px) clamp(24px,4vw,44px) 0; }
.partner-band .pb-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,32px); padding:clamp(22px,3vw,36px) clamp(24px,4vw,44px) clamp(28px,4vw,44px); }
.partner-band .pb-col h4 { font-size:16px; margin-bottom:12px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }
.partner-band .pb-col li { display:flex; gap:10px; font-size:14px; color:var(--muted); margin-bottom:8px; }
.partner-band .pb-col li::before { content:"→"; color:var(--accent); font-family:var(--font-display); flex:0 0 auto; }
@media (max-width:760px){ .partner-band .pb-grid { grid-template-columns:1fr; } }

/* simple data table (packages) */
.pkg-table { width:100%; border-collapse:collapse; font-size:14px; }
.pkg-table th, .pkg-table td { border:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top; }
.pkg-table th { font-family:var(--font-display); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); background:var(--bg2); }
.pkg-table td { color:var(--muted); }
.pkg-table td b { color:var(--ink); }
.table-scroll { overflow-x:auto; border-radius:12px; }

/* ---------- Films filter — original-site style (text links with dividers) ---------- */
.filter-links { display:flex; flex-wrap:wrap; align-items:center; gap:0; margin-bottom:clamp(26px,3.5vw,44px); }
.filter-links button {
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-family:var(--font-display); font-size:clamp(14.5px,1.4vw,17px); font-weight:500;
  padding:6px 2px; letter-spacing:.01em; transition:color .2s;
  border-bottom:2px solid transparent;
}
.filter-links button:hover { color:var(--ink); }
.filter-links button.on { color:var(--ink); font-weight:700; border-bottom-color:var(--accent); }
.filter-links .sep { color:var(--line); margin:0 clamp(10px,1.6vw,22px); user-select:none; color:color-mix(in srgb, var(--muted) 55%, transparent); }

/* ---------- Pricing calculator ---------- */
.calc { border:1px solid var(--line); border-radius:calc(var(--radius) + 6px); background:var(--bg2); overflow:hidden; }
.calc-grid { display:grid; grid-template-columns:1.5fr 1fr; }
.calc-left { padding:clamp(24px,3.5vw,44px); border-right:1px solid var(--line); }
.calc-right { padding:clamp(24px,3.5vw,44px); background:color-mix(in srgb, var(--bg) 55%, var(--bg2)); display:flex; flex-direction:column; }
@media (max-width:960px){ .calc-grid { grid-template-columns:1fr; } .calc-left { border-right:none; border-bottom:1px solid var(--line); } }
.calc-step { margin-bottom:clamp(22px,3vw,32px); }
.calc-step > label { display:block; font-family:var(--font-display); font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--calc-accent, var(--accent)); margin-bottom:12px; }
.opt-row { display:flex; flex-wrap:wrap; gap:10px; }
.opt {
  border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--muted);
  font-family:var(--font-display); font-size:14px; font-weight:500; padding:10px 16px; cursor:pointer;
  transition:.22s var(--ease); text-align:left;
}
.opt small { display:block; font-family:var(--font-body); font-size:11.5px; color:var(--muted); font-weight:400; margin-top:2px; }
.opt:hover { border-color:color-mix(in srgb, var(--calc-accent, var(--accent)) 60%, var(--line)); color:var(--ink); }
.opt.on { background:var(--calc-accent, var(--accent)); border-color:var(--calc-accent, var(--accent)); color:var(--calc-ink, var(--accent-ink)); }
.opt.on small { color:color-mix(in srgb, var(--calc-ink, var(--accent-ink)) 75%, transparent); }
.opt:disabled { opacity:.35; cursor:not-allowed; }
.calc select {
  width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:12px;
  font-family:var(--font-display); font-size:14.5px; padding:13px 14px; cursor:pointer;
}
.stepper { display:inline-flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.stepper button { background:transparent; border:none; color:var(--ink); width:38px; height:38px; font-size:17px; cursor:pointer; font-family:var(--font-display); }
.stepper button:hover { background:color-mix(in srgb, var(--ink) 8%, transparent); }
.stepper span { min-width:38px; text-align:center; font-family:var(--font-display); font-weight:600; font-size:14.5px; }
.addon-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px dashed color-mix(in srgb, var(--line) 70%, transparent); }
.addon-row:last-child { border-bottom:none; }
.addon-row .a-name { font-size:14px; color:var(--ink); }
.addon-row .a-name small { display:block; font-size:12px; color:var(--muted); }
.addon-check { display:flex; align-items:center; gap:12px; cursor:pointer; }
.addon-check input { accent-color:var(--calc-accent, var(--accent)); width:17px; height:17px; cursor:pointer; }
.sum-items { flex:1; display:grid; gap:10px; align-content:start; margin:18px 0; }
.sum-line { display:flex; justify-content:space-between; gap:16px; font-size:14px; color:var(--muted); }
.sum-line b { color:var(--ink); font-weight:500; }
.sum-line .amt { font-family:var(--font-display); font-weight:600; color:var(--ink); white-space:nowrap; }
.sum-total { border-top:1px solid var(--line); padding-top:18px; margin-top:6px; }
.sum-total .t-row { display:flex; justify-content:space-between; align-items:baseline; }
.sum-total .t-label { font-family:var(--font-display); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.sum-total .t-amt { font-family:var(--font-display); font-weight:700; font-size:clamp(28px,3vw,40px); color:var(--calc-accent, var(--accent)); }
.sum-note { font-size:12px; color:var(--muted); margin-top:10px; line-height:1.55; }
.calc-ctas { display:grid; gap:10px; margin-top:18px; }
.calc-ctas .btn { justify-content:center; }
.rc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }

/* calculator v2 */
.beta-chip { display:inline-block; font-family:var(--font-display); font-size:10.5px; font-weight:700; letter-spacing:.14em; background:var(--calc-accent, var(--accent)); color:var(--calc-ink, var(--accent-ink)); border-radius:999px; padding:3px 10px; margin-left:10px; vertical-align:middle; }
.sum-pkg { margin-top:14px; border:1px dashed color-mix(in srgb, var(--calc-accent, var(--accent)) 55%, transparent); border-radius:12px; padding:12px 16px; font-size:13px; color:var(--muted); }
.sum-pkg b { display:block; font-family:var(--font-display); font-size:16.5px; color:var(--calc-accent, var(--accent)); margin-top:2px; }
.inq { border-top:1px solid var(--line); margin-top:20px; padding-top:18px; display:grid; gap:10px; }
.inq h4 { font-family:var(--font-display); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.inq input, .inq textarea {
  width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px;
  font-family:var(--font-body); font-size:14px; padding:11px 13px;
}
.inq input::placeholder, .inq textarea::placeholder { color:color-mix(in srgb, var(--muted) 75%, transparent); }
.inq .inq-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.inq .inq-msg { font-size:12px; color:var(--calc-accent, var(--accent)); min-height:16px; }
.addon-row input[type=checkbox]:disabled { opacity:.6; cursor:not-allowed; }
.addon-row .incl { font-size:11px; font-family:var(--font-display); font-weight:600; letter-spacing:.1em; color:var(--calc-accent, var(--accent)); }
.hero-brand { display:block; height:clamp(44px,6vw,72px); width:auto; margin-bottom:26px; }
.hero-brand.board { height:clamp(84px,12vw,150px); }
.foot-logo { height:48px; width:auto; display:block; margin-bottom:16px; }
.when-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.calc input[type=date] {
  background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:12px;
  font-family:var(--font-display); font-size:14.5px; padding:11px 14px; cursor:pointer; color-scheme:dark;
}
.when-row select { width:auto !important; min-width:150px; }
.when-note { font-size:12.5px; color:var(--muted); margin-top:10px; }
.sum-sched { display:block; font-size:12px; color:var(--muted); margin-top:6px; }
.calc .btn-solid { background:var(--calc-accent, var(--accent)); color:var(--calc-ink, var(--accent-ink)); }
.calc .btn-solid:hover { box-shadow:0 12px 32px color-mix(in srgb, var(--calc-accent, var(--accent)) 35%, transparent); }
.calc .btn-ghost:hover { border-color:var(--calc-accent, var(--accent)); color:var(--calc-accent, var(--accent)); }

/* vertical (9:16) video cards & testimonial strip */
.video-card.v916 { aspect-ratio:9/16; }
.vgrid-6 { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
@media (max-width:1100px){ .vgrid-6 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .vgrid-6 { grid-template-columns:repeat(2,1fr); } }
.video-card video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---- Writings / blog ---- */
body[data-theme="writings"] { --bg:#0b0b0d; --bg2:#131316; --ink:#f4f1ea; --muted:#9d9a92; --accent:#e8c15a; --accent-ink:#181206; --line:rgba(244,241,234,.14); }
.post-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:20px; }
.post-card { display:block; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg2); padding:clamp(24px,3vw,32px); transition:.3s var(--ease); }
.post-card:hover { border-color:color-mix(in srgb, var(--accent) 55%, var(--line)); transform:translateY(-3px); }
.post-card .p-date { font-family:var(--font-display); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.post-card h3 { font-family:var(--font-display); font-size:clamp(19px,2vw,23px); line-height:1.25; margin:12px 0 10px; color:var(--ink); }
.post-card p { font-size:14.5px; color:var(--muted); line-height:1.6; }
.post-card .p-more { display:inline-block; margin-top:16px; font-family:var(--font-display); font-size:13px; color:var(--accent); }
.article { max-width:760px; margin:0 auto; }
.article .a-meta { font-family:var(--font-display); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; }
.article h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4.4vw,52px); line-height:1.1; letter-spacing:-.01em; margin-bottom:26px; }
.article h2 { font-family:var(--font-display); font-size:clamp(22px,2.6vw,30px); line-height:1.2; margin:44px 0 16px; color:var(--ink); }
.article h3 { font-family:var(--font-display); font-size:clamp(18px,2vw,22px); margin:32px 0 12px; color:var(--ink); }
.article h4 { font-family:var(--font-display); font-size:16.5px; margin:26px 0 10px; color:var(--accent); }
.article p { font-size:16.5px; line-height:1.75; color:var(--muted); margin-bottom:18px; }
.article p strong, .article li strong { color:var(--ink); font-weight:600; }
.article ul, .article ol { margin:0 0 22px 22px; }
.article li { font-size:16.5px; line-height:1.75; color:var(--muted); margin-bottom:10px; }
.article a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
/* buttons inside article bodies must keep their own colours, not the link colour */
.article a.btn { text-decoration:none; }
.article a.btn-solid { color:var(--accent-ink); }
.article a.btn-ghost { color:var(--ink); }
.article a.btn-ghost:hover { color:var(--accent); }
.article .a-lede { font-size:19px; line-height:1.65; color:var(--ink); margin-bottom:30px; }
.article-cta { border-top:1px solid var(--line); margin-top:52px; padding-top:34px; }
.article-cta h4 { font-family:var(--font-display); font-size:20px; color:var(--ink); margin-bottom:10px; }
.article-cta p { color:var(--muted); font-size:15px; margin-bottom:20px; }
.a-related { margin-top:44px; padding-top:26px; border-top:1px solid var(--line); }
.a-related h4 { font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; font-weight:600; }
.a-related ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.a-related li a { display:block; padding:12px 16px; border:1px solid var(--line); border-radius:12px; color:var(--ink); text-decoration:none; font-size:.95rem; transition:border-color .2s, background .2s; }
.a-related li a:hover { border-color:var(--accent); background:rgba(255,255,255,.03); }

.a-nav { display:flex; gap:14px; flex-wrap:wrap; margin-top:44px; padding-top:26px; border-top:1px solid var(--line); }

/* ---- Legal / policy pages ---- */
body[data-theme="legal"] { --bg:#0b0b0d; --bg2:#131316; --ink:#f4f1ea; --muted:#9d9a92; --accent:#e8c15a; --accent-ink:#181206; --line:rgba(244,241,234,.14); }
.legal { max-width:820px; margin:0 auto; }
.legal .l-updated { font-family:var(--font-display); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:34px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.legal h2 { font-family:var(--font-display); font-size:clamp(20px,2.4vw,27px); line-height:1.2; margin:46px 0 16px; color:var(--ink); }
.legal h3 { font-family:var(--font-display); font-size:17px; margin:28px 0 10px; color:var(--accent); letter-spacing:0; }
.legal p { font-size:15.5px; line-height:1.75; color:var(--muted); margin-bottom:16px; }
.legal p strong, .legal li strong { color:var(--ink); font-weight:600; }
.legal ul { margin:0 0 20px 20px; list-style:disc; }
.legal li { font-size:15.5px; line-height:1.75; color:var(--muted); margin-bottom:9px; }
.legal a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.legal .l-note { border:1px solid var(--line); border-radius:14px; background:var(--bg2); padding:22px 26px; margin:26px 0; }
.legal .l-note p:last-child { margin-bottom:0; }
.legal-tabs { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.legal-tabs a { font-family:var(--font-display); font-size:13.5px; padding:9px 18px; border:1px solid var(--line); border-radius:999px; color:var(--muted); transition:.25s var(--ease); }
.legal-tabs a:hover { border-color:var(--accent); color:var(--accent); }
.legal-tabs a.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.legal-tabs a, .legal .a-nav a, .legal .btn { text-decoration:none; }

/* ---- SEO landing pages ---- */
body[data-theme="lp"] { --bg:#0b0b0d; --bg2:#131316; --ink:#f4f1ea; --muted:#9d9a92; --accent:#e8c15a; --accent-ink:#181206; --line:rgba(244,241,234,.14); }
.lp-hero { position:relative; min-height:78svh; display:flex; align-items:flex-end; padding:150px 0 60px; overflow:hidden; }
.lp-hero .hero-bg img { opacity:.45; }
.lp-body { max-width:820px; }
.lp-body h2 { font-family:var(--font-display); font-size:clamp(24px,3vw,38px); line-height:1.15; margin:0 0 18px; color:var(--ink); }
.lp-body p { font-size:16.5px; line-height:1.78; color:var(--muted); margin-bottom:18px; }
.lp-body p strong { color:var(--ink); font-weight:600; }
.lp-sec { padding:clamp(48px,6vw,86px) 0; border-top:1px solid var(--line); }
.lp-sec.no-rule { border-top:none; }
/* section galleries — masonry-free uniform grid */
.lp-gal { display:grid; gap:16px; margin-top:34px; }
.lp-gal.g2 { grid-template-columns:repeat(2,1fr); }
.lp-gal.g3 { grid-template-columns:repeat(3,1fr); }
.lp-gal figure { margin:0; border-radius:16px; overflow:hidden; aspect-ratio:4/3; position:relative; }
.lp-gal img { width:100%; height:100%; object-fit:cover; transition:.8s var(--ease); }
.lp-gal figure:hover img { transform:scale(1.05); }
@media (max-width:760px){ .lp-gal.g2, .lp-gal.g3 { grid-template-columns:1fr 1fr; } }
/* use-case image cards */
.uc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:34px; }
.uc-card { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5; }
.uc-card img { width:100%; height:100%; object-fit:cover; transition:.8s var(--ease); }
.uc-card:hover img { transform:scale(1.06); }
.uc-card::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.86) 6%, rgba(0,0,0,.15) 55%, transparent 85%); }
.uc-card h3 { position:absolute; left:22px; right:18px; bottom:20px; z-index:2; font-family:var(--font-display); font-size:18px; line-height:1.25; color:#fff; letter-spacing:-.01em; }
.faq { max-width:820px; }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; padding:20px 40px 20px 0; font-family:var(--font-display); font-size:16.5px; color:var(--ink); position:relative; transition:color .2s; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:6px; top:18px; font-size:22px; color:var(--accent); font-weight:400; transition:transform .25s var(--ease); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq summary:hover { color:var(--accent); }
.faq .faq-a { padding:0 40px 22px 0; font-size:15.5px; line-height:1.75; color:var(--muted); }
.lp-cta { border:1px solid var(--line); border-radius:calc(var(--radius) + 4px); background:var(--bg2); padding:clamp(28px,4vw,52px); }
.lp-cta h3 { font-family:var(--font-display); font-size:clamp(22px,2.8vw,32px); margin-bottom:12px; }
.lp-cta p { color:var(--muted); margin-bottom:24px; max-width:52ch; }
.lp-crumbs { font-size:13px; color:var(--muted); margin-bottom:26px; }
.lp-crumbs a { color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.lp-crumbs a:hover { color:var(--accent); }
.lp-inline-cta { margin-top:30px; }
/* captioned gallery + feature list + other spaces */
.lp-cap { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin-top:34px; }
.lp-cap figure { margin:0; }
.lp-cap .ph { border-radius:16px; overflow:hidden; aspect-ratio:4/3; }
.lp-cap img { width:100%; height:100%; object-fit:cover; transition:.8s var(--ease); }
.lp-cap figure:hover img { transform:scale(1.05); }
.lp-cap figcaption { margin-top:12px; font-size:14.5px; color:var(--muted); line-height:1.5; }
.lp-feat { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:34px; }
.lp-feat .f { display:flex; gap:16px; align-items:flex-start; }
.lp-feat .f img { width:66px; height:66px; border-radius:12px; object-fit:cover; flex:none; }
.lp-feat .f h4 { font-family:var(--font-display); font-size:16px; color:var(--ink); margin-bottom:6px; letter-spacing:0; }
.lp-feat .f p { font-size:14px; color:var(--muted); line-height:1.6; margin:0; }
.lp-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-top:34px; }
.lp-links a { display:block; border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:.3s var(--ease); }
.lp-links a:hover { border-color:var(--accent); transform:translateY(-2px); }
.lp-links .ph { aspect-ratio:16/10; overflow:hidden; }
.lp-links img { width:100%; height:100%; object-fit:cover; }
.lp-links span { display:block; padding:14px 16px; font-family:var(--font-display); font-size:14px; color:var(--ink); }
.lp-vids { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:34px; }

/* ---- Space picker (landing pages hosting more than one studio) ---- */
.spacepick { padding:clamp(26px,3.4vw,42px) 0 clamp(30px,3.6vw,46px); background:var(--bg2); border-bottom:1px solid var(--line); }
.spacepick-head { display:flex; align-items:baseline; gap:8px 18px; flex-wrap:wrap; margin-bottom:20px; }
.spacepick-head p { margin:0; font-size:14.5px; color:var(--muted); }
.spacepick-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; }
.spacecard {
  display:block; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:color-mix(in srgb, var(--bg) 60%, transparent); transition:.3s var(--ease);
}
.spacecard .ph { height:clamp(130px, 16vw, 205px); overflow:hidden; }
.spacecard .ph img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; transition:.7s var(--ease); }
.spacecard:hover { border-color:var(--accent); transform:translateY(-3px); }
.spacecard:hover img { transform:scale(1.06); }
.spacecard-txt { padding:13px 16px 15px; display:flex; align-items:center; gap:12px; }
.spacecard b { display:block; font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--ink); letter-spacing:0; }
.spacecard span { display:block; margin-top:4px; font-size:12.5px; color:var(--muted); letter-spacing:.02em; }
.spacecard .arw { margin-left:auto; flex:none; font-size:15px; color:var(--accent); transition:transform .3s var(--ease); }
.spacecard:hover .arw { transform:translateY(3px); }
.spacecard.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent); }
.spacepick + .vidsec, .spacepick + .section { border-top:none; }
.space-anchor { scroll-margin-top:92px; }
@media (max-width:620px) {
  .spacepick-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .spacecard-txt { padding:11px 12px 13px; }
  .spacecard b { font-size:14px; }
  .spacecard span { font-size:11.5px; }
}

/* Two-up video grid — for set walkthroughs that deserve a bigger frame */
.lp-vids.lp-vids-2 { grid-template-columns:repeat(2,1fr); }
@media (max-width:640px) { .lp-vids.lp-vids-2 { grid-template-columns:1fr; } }

/* fixed-nav offset for the pricing estimator anchor */
#calculator { scroll-margin-top:92px; }