:root {
  --bg: #0b0a08;
  --bg-2: #110f0c;
  --panel: #15120e;
  --panel-2: #1c1813;
  --line: rgba(229, 184, 92, 0.12);
  --line-soft: rgba(255, 255, 255, 0.06);
  --gold: #e5b85c;
  --gold-hi: #f5d99a;
  --gold-lo: #9c6f2c;
  --gold-dim: rgba(229, 184, 92, 0.14);
  --text: #f2ede3;
  --muted: #9b9486;
  --red: #ef5a4f;
  --green: #7fcf97;
  --radius: 18px;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pad: clamp(18px, 4vw, 56px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2, h3 { margin: 0; font-family: var(--display); text-transform: uppercase; line-height: .92; letter-spacing: .005em; }
h2 { font-size: clamp(44px, 6vw, 84px); font-weight: 800; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.gold, .gold-text { color: var(--gold); }
.gold-text {
  background: linear-gradient(100deg, var(--gold-lo), var(--gold-hi) 40%, var(--gold) 60%, var(--gold-lo));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 7s linear infinite;
}
@keyframes sheen { to { background-position: -220% 0; } }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--gold); color: #120d00; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }

.grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Buttons */
.btn {
  --mx: 0px; --my: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transform: translate(var(--mx), var(--my));
  transition: transform .35s var(--ease), background .25s, border-color .25s, box-shadow .25s, color .25s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, #c9973f); color: #1a1204; box-shadow: 0 10px 30px -10px rgba(229,184,92,.55), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-gold:hover { box-shadow: 0 16px 40px -12px rgba(229,184,92,.75), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-line { border-color: rgba(229,184,92,.45); color: var(--text); background: rgba(21,18,14,.5); backdrop-filter: blur(6px); }
.btn-line:hover { border-color: var(--gold); background: var(--gold-dim); }
.btn.wide { width: 100%; }
.round-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--gold); cursor: pointer; transition: .25s var(--ease); }
.round-btn:hover { border-color: var(--gold); background: var(--gold-dim); }
.icon-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 42px; min-width: 42px; justify-content: center; padding: 0 10px; border-radius: 999px; border: 1px solid transparent; background: none; cursor: pointer; transition: .2s; }
.icon-btn:hover { background: var(--panel-2); border-color: var(--line); }
.icon-btn svg { width: 22px; height: 22px; }
.dot { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--gold); color: #1a1204; font: 700 11px/18px var(--body); text-align: center; }
.dot.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.45); } }

.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(239,90,79,.6); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(239,90,79,0); } 100% { box-shadow: 0 0 0 0 rgba(239,90,79,0); } }

/* AI spark glyph */
.spark { position: relative; display: inline-block; width: 16px; height: 16px; flex: none; }
.spark::before, .spark::after {
  content: ""; position: absolute; inset: 0; background: var(--gold);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.spark::after { inset: auto -3px -3px auto; width: 7px; height: 7px; opacity: .8; animation: twinkle 2.4s var(--ease) infinite; }
.spark.dark::before, .spark.dark::after { background: #1a1204; }
@keyframes twinkle { 50% { transform: scale(.4) rotate(45deg); opacity: .3; } }

/* LIVE now banner (shown while staff are live; see site.js) */
.live-banner {
  position: relative; z-index: 31; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 10px var(--pad); background: linear-gradient(90deg, #5a1712, #a8291f 50%, #5a1712); color: #fff;
  font-size: 14px; font-weight: 600; text-align: center; border-bottom: 1px solid rgba(255,255,255,.12);
}
.live-banner[hidden] { display: none; }
.live-banner .live-dot { background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
.live-banner-tag { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.28); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.live-banner-text { min-width: 0; }
.live-banner-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: #fff; color: #7a1d15; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: transform .25s var(--ease); }
.live-banner-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.live-banner:hover .live-banner-btn { transform: translateX(3px); }

/* Upcoming lives (inside the Live shopping intro) */
.live-next { display: grid; gap: 6px; width: 100%; max-width: 380px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.live-next[hidden] { display: none; }
.live-next-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #ff8c83; }
.live-next-title { font-family: var(--display); font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.live-next-when { color: #cfc8b9; font-size: 14px; }
.live-next-count { color: var(--gold); font-weight: 700; }
.live-next-cal { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.live-next-btn { padding: 10px 18px; font-size: 12px; }
.live-next-google { color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.live-later { list-style: none; margin: 8px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.live-later li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; font-size: 13px; }
.live-later li span { color: var(--muted); white-space: nowrap; }
.live-later li b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.live-later button { border: 0; background: none; color: var(--gold); font: inherit; font-size: 12px; cursor: pointer; padding: 0; }

/* Ticker */
.ticker { position: relative; z-index: 30; overflow: hidden; border-bottom: 1px solid var(--line-soft); background: #080705; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #cfc8b9; }
.ticker-track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; gap: 44px; padding: 10px 22px; }
.ticker-set span { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.ticker-set svg { width: 16px; height: 16px; color: var(--gold); }
.stars { color: var(--gold); letter-spacing: .12em; }
.stars b, .stars span { color: var(--text); letter-spacing: .04em; margin-left: 4px; }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes band { to { translate: -50% 0; } }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 28px; padding: 14px var(--pad);
  transition: background .3s, backdrop-filter .3s, border-color .3s, padding .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(11,10,8,.78); backdrop-filter: blur(16px) saturate(140%); border-color: var(--line-soft); padding-block: 10px; }
.logo { display: inline-grid; justify-items: center; line-height: .82; font-family: var(--display); text-transform: uppercase; }
.logo-the { font-size: 13px; font-weight: 800; letter-spacing: .38em; color: #d9d2c3; display: flex; align-items: center; gap: 6px; }
.logo-the::before, .logo-the::after { content: ""; width: 22px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold)); }
.logo-the::after { transform: scaleX(-1); }
.logo-main { font-size: 34px; font-weight: 900; letter-spacing: .02em; background: linear-gradient(180deg, var(--gold-hi) 10%, var(--gold) 50%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-vault { font-size: 22px; font-weight: 900; letter-spacing: .26em; margin-right: -.26em; background: linear-gradient(180deg, #fff, #9a978f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { display: flex; gap: 6px; margin-left: 8px; }
.nav-links a { position: relative; padding: 10px 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ddd6c7; transition: color .2s; }
.nav-links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav-links a:hover, .nav-links a.active { color: var(--gold-hi); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); transform-origin: left; }
.nav-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ask-pill {
  display: flex; align-items: center; gap: 10px; min-width: 250px; height: 44px; padding: 0 8px 0 16px; margin-right: 6px;
  border-radius: 999px; border: 1px solid var(--line); cursor: pointer; color: var(--muted); font-size: 14px; text-align: left;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, conic-gradient(from var(--angle, 0deg), transparent 0 60%, var(--gold) 80%, transparent) border-box;
  border-color: transparent; animation: orbit 5s linear infinite;
}
.ask-pill:hover { color: var(--text); }
.ask-pill-text { flex: 1; }
.ask-pill kbd { font: 600 11px var(--mono); padding: 4px 7px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--muted); }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes orbit { to { --angle: 360deg; } }
.staff-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.menu-btn { display: none; }

/* Hero: a pinned full-screen scene. Scrolling zooms through the open vault door into the vault (driven by site.js). */
.hero { position: relative; height: 230svh; margin-top: calc(var(--nav-h, 100px) * -1); }
.hero-stage { position: sticky; top: 0; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; }
.hero-copy {
  position: absolute; z-index: 4; left: var(--pad); top: 50%; width: min(660px, 52vw); display: grid; gap: clamp(14px, 2.5vh, 26px); align-content: center;
  transform: translateY(calc(-50% + var(--nav-h, 100px) / 2 - 40px - var(--p, 0) * 140px)); opacity: calc(1 - var(--p, 0) * 3.2);
}
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); }
.hero-title { font-size: clamp(72px, min(10.4vw, 15vh), 200px); font-weight: 900; line-height: .82; margin-left: -6px; text-shadow: 0 20px 60px rgba(0,0,0,.55); }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title .word { display: inline-block; transform: translateY(105%); animation: rise .95s var(--ease) forwards; animation-delay: calc(var(--d) * 90ms + 150ms); }
.gold-word { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes rise { to { transform: none; } }
.reveal-load { opacity: 0; transform: translateY(18px); animation: fadeUp .9s var(--ease) forwards; animation-delay: calc(var(--d) * 90ms + 200ms); }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
.hero-sub { max-width: 30em; font-size: clamp(17px, 1.4vw, 21px); color: #ddd6c7; }
.hero-sub b { color: var(--gold); }

.ai-search {
  position: relative; display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 7px 7px 7px 18px; border-radius: 999px;
  background: linear-gradient(rgba(21,18,14,.85), rgba(21,18,14,.85)) padding-box, linear-gradient(120deg, rgba(229,184,92,.6), rgba(229,184,92,.08) 40%, rgba(229,184,92,.5)) border-box;
  border: 1px solid transparent; backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.8);
  transition: box-shadow .3s;
}
.ai-search:focus-within { box-shadow: 0 0 0 4px var(--gold-dim), 0 20px 50px -20px rgba(0,0,0,.8); }
.ai-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: 500 16px var(--body); padding: 10px 0; }
.ai-search input::placeholder { color: #8d8677; }
.ai-search-go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--gold); color: #1a1204; cursor: pointer; transition: transform .25s var(--ease); }
.ai-search-go:hover { transform: scale(1.07); }
.ai-search.big { width: 100%; max-width: 640px; margin-inline: auto; padding-left: 22px; }
.ai-search.big input { font-size: 17px; padding: 14px 0; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -8px; }
.suggest button { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-soft); background: rgba(255,255,255,.03); color: #cfc8b9; font-size: 13px; cursor: pointer; transition: .2s; }
.suggest button:hover { border-color: var(--gold); color: var(--gold-hi); background: var(--gold-dim); }
.suggest.col { flex-direction: column; align-items: stretch; margin: 0; }
.suggest.col button { text-align: left; padding: 11px 15px; border-radius: 12px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.vault-scene { position: absolute; inset: 0; z-index: 0; background: #070605; }
.vault-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; will-change: transform, opacity; }
.vault-door {
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(var(--zoom, 1)); transition: transform .35s cubic-bezier(.2,.7,.2,1);
  opacity: var(--door, 1); animation: vaultIn 2.2s var(--ease) both;
}
@keyframes vaultIn { from { opacity: 0; filter: brightness(.2) blur(6px); } }
.vault-inside { opacity: var(--inside, 0); transform: scale(var(--iz, 1.3)); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.vault-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.vault-light { position: absolute; inset: 0; background: radial-gradient(520px circle at var(--lx, 62%) var(--ly, 50%), rgba(255,206,120,.2), transparent 62%); mix-blend-mode: screen; pointer-events: none; }
/* Keeps the headline readable over the dark left side, and fades the scene into the page at the bottom. */
.vault-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,10,8,.94) 0%, rgba(11,10,8,.72) 26%, rgba(11,10,8,.12) 52%, transparent 70%),
    linear-gradient(180deg, rgba(11,10,8,.55), transparent 22%, transparent 70%, rgba(11,10,8,.92));
  opacity: calc(1 - var(--p, 0) * 1.4);
}
.hero-floats { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: calc(1 - var(--p, 0) * 3.4); }
.hero-floats > * { pointer-events: auto; }
.hero-inside {
  position: absolute; z-index: 4; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; text-align: center; padding: var(--pad);
  opacity: var(--in-copy, 0); transform: translateY(calc((1 - var(--in-copy, 0)) * 40px)); pointer-events: none;
}
.hero-inside.on { pointer-events: auto; }
.inside-title { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .86; font-size: clamp(64px, 9vw, 168px); text-shadow: 0 20px 80px rgba(0,0,0,.8); }
.hero-foot {
  position: absolute; z-index: 4; left: var(--pad); right: var(--pad); bottom: calc(28px + var(--ticker-h, 0px) * (1 - min(var(--p, 0) * 20, 1))); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  opacity: calc(1 - var(--p, 0) * 4);
}
.scroll-cue { display: grid; justify-items: center; gap: 10px; color: var(--gold); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.scroll-cue i { position: relative; width: 26px; height: 42px; border: 1.5px solid rgba(229,184,92,.6); border-radius: 14px; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--gold); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 60%, 100% { transform: translateY(14px); opacity: 0; } }

.float-card {
  position: absolute; z-index: 3; padding: 14px 16px; border-radius: 16px;
  background: rgba(20,17,13,.72); border: 1px solid rgba(229,184,92,.22); backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translate(var(--fx, 0), var(--fy, 0)); transition: transform .6s var(--ease);
  opacity: 0; animation: fadeUp .9s var(--ease) forwards;
}
.price-check { right: 30%; bottom: 15%; width: 290px; animation-delay: 1.2s; }
.stat-card { right: 5%; top: calc(var(--nav-h, 100px) + 6%); animation-delay: 1.45s; }
.drop-chip { right: 6%; bottom: 17%; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 10px 16px; animation-delay: 1.7s; }
.fc-head { display: flex; align-items: center; gap: 8px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.fc-head .spark { width: 12px; height: 12px; }
.fc-body { display: flex; gap: 12px; align-items: center; margin: 10px 0; }
.fc-body img { width: 64px; height: 44px; object-fit: cover; border-radius: 8px; }
.fc-title { font-weight: 700; font-size: 14px; }
.fc-price b { color: var(--gold-hi); font-size: 17px; }
.fc-price s, .price s { color: var(--muted); font-size: 13px; }
.meter { height: 6px; border-radius: 9px; background: rgba(255,255,255,.07); overflow: hidden; }
.meter span { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); border-radius: inherit; transform-origin: left; animation: grow 1.4s var(--ease) 1.8s both; }
@keyframes grow { from { transform: scaleX(0); } }
.fc-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: #cfc8b9; }
.fc-foot .mono { color: var(--green); font-size: 11px; }
.label { color: var(--muted); font-size: 11px; }
.stat-big { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: 1; margin: 4px 0; color: var(--gold-hi); }
.stars.small { font-size: 12px; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 14px 44px; list-style: none; margin: 0; padding: 0; }
.hero-trust li { display: flex; align-items: center; gap: 12px; }
.hero-trust svg { width: 30px; height: 30px; color: var(--gold); stroke-width: 1.4; }
.hero-trust b { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.hero-trust span { font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

/* Sections */
.section { position: relative; padding: clamp(60px, 9vw, 120px) var(--pad); }
.section-head { display: grid; gap: 16px; margin-bottom: 44px; }
.section-head.split { grid-template-columns: 1fr auto; align-items: end; gap: 28px; }
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Live */
.live { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 36px; align-items: center; border-block: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.live h2 { font-size: clamp(56px, 5.6vw, 104px); }
@media (min-width: 1400px) { .live { grid-template-columns: 420px minmax(0, 1fr); } }
.live-intro { display: grid; gap: 18px; justify-items: start; }
.live-intro p { color: #cfc8b9; }
.pill-live { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: 999px; background: rgba(239,90,79,.14); color: #ff8c83; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tt { width: 18px; height: 18px; }
.rail-wrap { position: relative; min-width: 0; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 16px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.stream {
  --rx: 0deg; --ry: 0deg;
  position: relative; scroll-snap-align: start; aspect-ratio: 5 / 4; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); isolation: isolate;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease), border-color .3s;
  text-align: left; padding: 0;
}
.stream:hover, .stream.is-active { border-color: rgba(229,184,92,.6); }
.stream img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.02); transition: transform 1.2s var(--ease); }
.stream:hover img, .stream.is-active img { transform: scale(1.12); }
.stream::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,10,8,.1) 30%, rgba(11,10,8,.94)); }
.stream-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; }
.badge-live { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 6px; background: var(--red); color: #fff; font: 700 11px var(--body); letter-spacing: .12em; }
.badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.stream-body { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 4px; }
.stream-body b { font-family: var(--display); font-size: 30px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.stream-body span { font-size: 14px; color: #d6cfc0; }
.stream-go { position: absolute; right: 16px; bottom: 18px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(229,184,92,.5); color: var(--gold); transition: .3s var(--ease); }
.stream:hover .stream-go, .stream.is-active .stream-go { background: var(--gold); color: #1a1204; transform: rotate(-45deg); }

/* Vault AI */
.ai-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 6vw, 90px); align-items: center; overflow: hidden; }
.ai-section::before { content: ""; position: absolute; width: 700px; height: 700px; right: -200px; top: 50%; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(229,184,92,.1), transparent); pointer-events: none; }
.ai-copy { display: grid; gap: 24px; justify-items: start; }
.lead { font-size: 18px; color: #d6cfc0; max-width: 34em; }
.ai-steps { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 0; width: 100%; max-width: 520px; }
.ai-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.ai-steps li:last-child { border-bottom: 1px solid var(--line-soft); }
.ai-steps .mono { color: var(--gold); padding-top: 3px; }
.ai-steps b { font-size: 16px; }
.ai-steps p { color: var(--muted); font-size: 14px; margin-top: 2px; }

.radar { position: relative; padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(28,24,19,.9), rgba(17,15,12,.9)); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.radar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--angle), transparent 0 70%, rgba(229,184,92,.7) 85%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: orbit 8s linear infinite; pointer-events: none; }
.radar-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.radar-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.k-vault { background: var(--gold); }
.k-msrp { background: #4a443a; }
.radar-rows { display: grid; gap: 16px; }
.radar-row { display: grid; grid-template-columns: 150px 1fr 64px; gap: 14px; align-items: center; cursor: pointer; border-radius: 10px; padding: 4px; margin: -4px; transition: background .2s; background: none; border: 0; text-align: left; }
.radar-row:hover { background: rgba(255,255,255,.03); }
.radar-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bars { position: relative; height: 22px; border-radius: 6px; background: #2a261f; overflow: hidden; }
.bars .msrp { position: absolute; inset: 0 auto 0 0; background: #4a443a; border-radius: inherit; }
.bars .vault { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--gold-lo), var(--gold)); border-radius: inherit; display: flex; align-items: center; justify-content: flex-end; padding-right: 7px; font: 600 11px var(--mono); color: #1a1204; }
.bars span { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.radar.in .bars span { transform: scaleX(1); }
.radar.in .bars .vault { transition-delay: .35s; }
.radar-off { font: 600 14px var(--mono); color: var(--gold-hi); text-align: right; }
.radar-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--line); }
.radar-foot .mono { color: var(--muted); }
.radar-foot b { font-family: var(--display); font-size: 40px; font-weight: 900; color: var(--gold-hi); }

/* Departments */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 14px; }
.dept {
  --sx: 50%; --sy: 50%;
  position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; cursor: pointer; text-align: left;
  transition: border-color .3s, opacity 1s var(--ease), transform 1s var(--ease);
}
.dept:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.dept:nth-child(4) { grid-row: span 2; }
.dept-stage { position: absolute; inset: 0; z-index: -2; overflow: hidden; container-type: size; }
.dept-media { --mw: max(100cqw, 133.87cqh); position: absolute; left: calc(50% - var(--mw) / 2); top: calc(50% - var(--mw) * .3735); width: var(--mw); aspect-ratio: 1000 / 747; filter: saturate(.9) brightness(.8); transition: transform 1.2s var(--ease), filter .6s; }
.dept-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dept::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(360px circle at var(--sx) var(--sy), rgba(229,184,92,.2), transparent 55%), linear-gradient(180deg, transparent 35%, rgba(11,10,8,.92)); }
.dept:hover, .dept.is-active { border-color: rgba(229,184,92,.6); }
.dept:hover .dept-media, .dept.is-active .dept-media { transform: scale(1.1); filter: saturate(1.05) brightness(.95); }
.dept-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(11,10,8,.6); border: 1px solid var(--line); color: var(--gold); margin-bottom: auto; backdrop-filter: blur(6px); }
.dept-name { font-family: var(--display); font-size: 30px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.dept:nth-child(1) .dept-name { font-size: clamp(40px, 5vw, 64px); }
.dept-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.dept-cta svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.dept:hover .dept-cta svg, .dept.is-active .dept-cta svg { transform: translateX(4px); }

/* Department motion: each tile has its own idle loop. The photo sits in .dept-media, a box that
   covers the tile at the photo's own aspect ratio, so effect layers use photo coordinates and stay
   on their subject at any tile size. Loops use translate/rotate/scale so they compose with hover. */
.dept-media { animation: 14s ease-in-out infinite alternate both; }
.dept-media > i, .fx-car { position: absolute; pointer-events: none; }
.fx-defs { position: absolute; width: 0; height: 0; }
.dept-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.dept-fx::before, .dept-fx::after { content: ""; position: absolute; pointer-events: none; }
.dept-icon { animation: 6s ease-in-out infinite both; }

/* Apparel: an autumn wind gusts in from the left, swaying the jackets on the rack and carrying
   leaves across the tile, while a soft glow travels along the LED rail. The third mask layer keeps
   the rack's right-hand post out of the moving copy so the frame stays rigid. */
.dept--apparel .dept-media { transform-origin: 50% 20%; animation-name: fx-push; animation-duration: 18s; }
.dept--apparel .fx-cloth { filter: url(#fx-breeze); transform-origin: 50% 30%; animation: fx-gust 7s ease-in-out infinite;
  -webkit-mask: linear-gradient(180deg, transparent 29%, #000 38%, #000 84%, transparent 93%), linear-gradient(90deg, transparent 15.5%, #000 18%, #000 87%, transparent 90%), radial-gradient(3.5% 16% at 79.8% 94%, transparent 60%, #000 100%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(180deg, transparent 29%, #000 38%, #000 84%, transparent 93%) intersect, linear-gradient(90deg, transparent 15.5%, #000 18%, #000 87%, transparent 90%) intersect, radial-gradient(3.5% 16% at 79.8% 94%, transparent 60%, #000 100%); }
.dept--apparel .fx-rail { left: 6%; top: -5%; width: 34%; height: 34%; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,226,160,.42), rgba(255,214,140,.14) 50%, rgba(255,214,140,0));
  animation: fx-rail 9s ease-in-out infinite alternate; }
.dept--apparel .fx-leaf { inset: 0; opacity: 0; --y: 50%; --c: #e6802a; animation: fx-blow 7s cubic-bezier(.4,0,.7,1) infinite; }
.dept--apparel .fx-leaf::before { content: ""; position: absolute; left: 0; top: var(--y); width: 2.3%; aspect-ratio: 1.7; border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c), #3a1a08 40%)); box-shadow: 0 2px 5px rgba(0,0,0,.4); filter: brightness(1.25); animation: fx-flutter 1.5s linear infinite; }
.dept--apparel .fx-leaf:nth-of-type(2) { --y: 34%; animation-delay: .2s; }
.dept--apparel .fx-leaf:nth-of-type(3) { --y: 52%; --c: #d0562a; animation-delay: 1.3s; animation-duration: 8s; }
.dept--apparel .fx-leaf:nth-of-type(4) { --y: 64%; --c: #f2a93c; animation-delay: 2.1s; animation-duration: 6.5s; }
.dept--apparel .fx-leaf:nth-of-type(5) { --y: 42%; --c: #b8541f; animation-delay: 3.4s; }
.dept--apparel .fx-leaf:nth-of-type(6) { --y: 72%; animation-delay: 4.2s; animation-duration: 7.5s; }
.dept--apparel .fx-leaf:nth-of-type(7) { --y: 28%; --c: #f2a93c; animation-delay: 5.1s; animation-duration: 6s; }
.dept--apparel .fx-leaf:nth-of-type(8) { --y: 58%; --c: #e0702a; animation-delay: 6s; animation-duration: 8.5s; }
.dept--apparel .fx-leaf:nth-of-type(odd)::before { width: 1.8%; animation-duration: 1.1s; animation-direction: reverse; }
.dept--apparel .dept-icon { animation-name: fx-icon-swing; }
@keyframes fx-push { 0% { scale: 1; } 100% { scale: 1.05; } }
@keyframes fx-gust { 0%, 100% { transform: skewX(0deg); } 25% { transform: skewX(1.6deg); } 45% { transform: skewX(.5deg); } 60% { transform: skewX(1.2deg); } }
@keyframes fx-rail { 0% { translate: 0 0; } 100% { translate: 170% 26%; } }
@keyframes fx-blow { 0% { opacity: 0; translate: -4% 0; } 6%, 90% { opacity: 1; } 35% { translate: 30% 7%; } 65% { translate: 66% 2%; } 100% { opacity: 0; translate: 104% 9%; } }
@keyframes fx-flutter { 0% { transform: rotate(0deg) scaleX(1); } 25% { transform: rotate(90deg) scaleX(.35); } 50% { transform: rotate(180deg) scaleX(1); } 75% { transform: rotate(270deg) scaleX(.35); } 100% { transform: rotate(360deg) scaleX(1); } }

/* Footwear: a display spotlight falls on the sneakers and gold rings ripple out across the plinth */
.dept--footwear .dept-media { transform-origin: 50% 70%; animation-name: fx-push; animation-duration: 16s; }
.dept--footwear .fx-beam { inset: 0; mix-blend-mode: screen; transform-origin: 51% -8%;
  background: conic-gradient(from 152deg at 51% -8%, rgba(255,226,160,0), rgba(255,226,160,.3) 28deg, rgba(255,226,160,0) 56deg);
  -webkit-mask: linear-gradient(180deg, transparent 5%, #000 30%, #000 72%, transparent 84%); mask: linear-gradient(180deg, transparent 5%, #000 30%, #000 72%, transparent 84%);
  animation: fx-beam 6s ease-in-out infinite alternate; }
.dept--footwear .fx-halo { left: 13%; top: 65.5%; width: 74%; height: 16%; border-radius: 50%; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,210,130,0) 56%, rgba(255,210,130,.7) 76%, rgba(255,210,130,0)); animation: fx-halo 3.6s ease-out infinite; }
.dept--footwear .fx-halo:nth-of-type(3) { animation-delay: 1.8s; }
.dept--footwear .fx-dust { left: 28%; right: 28%; top: 30%; height: 42%; overflow: hidden;
  -webkit-mask: linear-gradient(0deg, transparent, #000 25%, #000 60%, transparent); mask: linear-gradient(0deg, transparent, #000 25%, #000 60%, transparent); }
.dept--footwear .fx-dust::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 200%;
  background: radial-gradient(1.5px 1.5px at 12% 20%, rgba(255,232,190,.9), transparent), radial-gradient(1px 1px at 30% 60%, rgba(255,232,190,.8), transparent), radial-gradient(1.5px 1.5px at 52% 35%, rgba(255,232,190,.7), transparent), radial-gradient(1px 1px at 71% 80%, rgba(255,232,190,.9), transparent), radial-gradient(1.5px 1.5px at 88% 50%, rgba(255,232,190,.8), transparent), radial-gradient(1px 1px at 42% 92%, rgba(255,232,190,.8), transparent);
  animation: fx-rise 12s linear infinite; }
.dept--footwear .dept-icon { animation-name: fx-icon-hop; animation-duration: 3.2s; }
@keyframes fx-beam { from { opacity: .65; rotate: -2deg; } to { opacity: 1; rotate: 2deg; } }
@keyframes fx-halo { 0% { opacity: 0; scale: .7; } 25% { opacity: 1; } 100% { opacity: 0; scale: 1.25; } }

/* Electronics: sound waves pulse out from the headphones */
.dept--electronics .dept-media { animation-name: fx-beat; animation-duration: 1.6s; animation-direction: normal; }
.dept--electronics .dept-fx::before, .dept--electronics .dept-fx::after { left: 22%; top: 2%; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(229,184,92,.55); animation: fx-wave 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.dept--electronics .dept-fx::after { animation-delay: 1.2s; }
.dept--electronics .dept-icon { animation-name: fx-icon-pulse; animation-duration: 1.6s; }
@keyframes fx-beat { 0%, 100% { scale: 1.02; } 12% { scale: 1.04; } 24% { scale: 1.02; } 36% { scale: 1.035; } }
@keyframes fx-wave { 0% { scale: .4; opacity: 0; } 15% { opacity: .9; } 100% { scale: 1.8; opacity: 0; } }

/* Beauty: slow glide toward the bottles with shimmer rising like vapour */
.dept--beauty .dept-media { animation-name: fx-drift-in; animation-duration: 18s; }
.dept--beauty .dept-fx::before, .dept--beauty .dept-fx::after { inset: 100% 0 auto; height: 200%;
  background: radial-gradient(3px 3px at 20% 10%, rgba(255,230,170,.9), transparent), radial-gradient(2px 2px at 55% 30%, rgba(255,230,170,.8), transparent), radial-gradient(3px 3px at 80% 55%, rgba(255,230,170,.7), transparent), radial-gradient(2px 2px at 35% 70%, rgba(255,230,170,.8), transparent), radial-gradient(2px 2px at 65% 90%, rgba(255,230,170,.9), transparent);
  animation: fx-rise 11s linear infinite; }
.dept--beauty .dept-fx::after { animation-duration: 16s; animation-delay: -6s; translate: 8% 0; opacity: .6; }
.dept--beauty .dept-icon { animation-name: fx-icon-float; }
@keyframes fx-drift-in { 0% { scale: 1.03; translate: 0 1.5%; } 100% { scale: 1.12; translate: 0 -1.5%; } }
@keyframes fx-rise { from { transform: translateY(0); } to { transform: translateY(-150%); } }

/* Home: the lamp casts a soft, gently throbbing glow and a warm pool of light; the candle flickers */
.dept--home .dept-media { animation-name: fx-pan-left; animation-duration: 16s; }
.dept--home .fx-lamp-glow { left: 32%; top: -14%; width: 48%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,200,120,.5), rgba(255,180,90,.2) 45%, rgba(255,180,90,0)); animation: fx-throb 2.6s ease-in-out infinite; }
.dept--home .fx-lamp-pool { left: 26%; top: 18%; width: 60%; height: 62%; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,186,100,.2), rgba(255,186,100,.07) 55%, rgba(255,186,100,0)); animation: fx-throb 2.6s ease-in-out infinite; }
.dept--home .fx-lamp-bulb { left: 51%; top: 14%; width: 10%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,236,180,.75), rgba(255,210,130,.25) 50%, rgba(255,210,130,0)); animation: fx-flicker 7s linear infinite; }
.dept--home .fx-candle { left: 88.5%; top: 57.5%; width: 7%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,190,90,.6), rgba(255,160,60,0)); animation: fx-flicker 2.3s linear infinite; }
.dept--home .dept-icon { animation-name: fx-icon-glow; animation-duration: 2.6s; }
@keyframes fx-pan-left { 0% { scale: 1.04; translate: 1.5% 0; } 100% { scale: 1.04; translate: -1.5% 0; } }
@keyframes fx-throb { 0%, 100% { opacity: .55; scale: .94; } 18% { opacity: 1; scale: 1.06; } 32% { opacity: .8; scale: 1; } 46% { opacity: .95; scale: 1.04; } }
@keyframes fx-flicker { 0%, 100% { opacity: 1; } 18% { opacity: .82; } 21% { opacity: 1; } 47% { opacity: .9; } 52% { opacity: .7; } 55% { opacity: .95; } 80% { opacity: .85; } }

/* Toys & Games: the RC truck drives out from behind the boxes, rocks as it brakes, then reverses back.
   The truck is a cut-out over a truck-free copy of the photo; the blocks and boxes sit in front of it.
   Its two visible wheels spin while it moves; each wheel is squashed to a circle, rotated, and
   stretched back so it turns within its perspective ellipse. */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.dept--toys .fx-car { inset: 0; transform-origin: 40% 72%; animation: fx-drive 11s cubic-bezier(.3,.1,.3,1) infinite; }
.dept--toys .fx-car img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dept--toys .fx-wheel { position: absolute; animation: fx-spin 11s cubic-bezier(.3,.1,.3,1) infinite; }
.dept--toys .fx-wheel-1 { left: 11.3%; top: 50.2%; width: 14.4%; height: 21.42%; transform: scaleX(.9) rotate(var(--spin)) scaleX(1.1111); }
.dept--toys .fx-wheel-2 { left: 37.2%; top: 51.81%; width: 15.6%; height: 23.56%; transform: scaleX(.8864) rotate(var(--spin)) scaleX(1.1282); }
.dept--toys .dept-icon { animation-name: fx-icon-wiggle; animation-duration: 2s; }
@keyframes fx-drive {
  0%, 5% { translate: 95% 0; rotate: 0deg; }
  17% { translate: -1.2% 0; rotate: -1deg; }
  20% { translate: 0 0; rotate: 1deg; }
  23% { rotate: -.3deg; }
  26%, 78% { translate: 0 0; rotate: 0deg; }
  81% { rotate: -.8deg; }
  93%, 100% { translate: 95% 0; rotate: 0deg; }
}
@keyframes fx-spin { 0%, 5% { --spin: 640deg; } 17%, 78% { --spin: 0deg; } 93%, 100% { --spin: 640deg; } }

/* Accessories: the bag swings gently with a glint across the leather */
.dept--accessories .dept-media { transform-origin: 50% 20%; animation-name: fx-pendulum; animation-duration: 4.5s; }
.dept--accessories .dept-fx::before { inset: -50%; background: linear-gradient(120deg, transparent 44%, rgba(255,236,190,.22) 50%, transparent 56%); animation: fx-glint 5s ease-in-out infinite; }
.dept--accessories .dept-icon { animation-name: fx-icon-swing; animation-duration: 4.5s; }
@keyframes fx-pendulum { 0% { scale: 1.05; rotate: -1.2deg; } 100% { scale: 1.05; rotate: 1.2deg; } }
@keyframes fx-glint { 0%, 20% { translate: -60% 0; } 70%, 100% { translate: 60% 0; } }

/* Outdoor: smoke curls up from the grill lid while the lantern flickers */
.dept--outdoor .dept-media { animation-name: fx-kenburns; animation-duration: 20s; }
.dept--outdoor .fx-smoke { left: 36%; top: 25.5%; width: 9%; aspect-ratio: 1; border-radius: 50%; opacity: 0; filter: blur(4px);
  background: radial-gradient(closest-side, rgba(205,205,210,.85), rgba(190,190,196,.35) 55%, rgba(190,190,196,0)); animation: fx-smoke 7.5s ease-out infinite; }
.dept--outdoor .fx-smoke:nth-of-type(2) { animation-delay: -1.5s; animation-duration: 8.5s; }
.dept--outdoor .fx-smoke:nth-of-type(3) { animation-delay: -3s; }
.dept--outdoor .fx-smoke:nth-of-type(4) { animation-delay: -4.5s; animation-duration: 8s; }
.dept--outdoor .fx-smoke:nth-of-type(5) { animation-delay: -6s; }
.dept--outdoor .fx-lantern { left: 51%; top: 64%; width: 16%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,190,100,.45), rgba(255,170,80,.12) 50%, rgba(255,170,80,0)); animation: fx-flicker 2.8s linear infinite; }
.dept--outdoor .dept-icon { animation-name: fx-icon-float; animation-duration: 7s; }
@keyframes fx-kenburns { 0% { scale: 1.04; translate: -1.5% 1%; } 100% { scale: 1.1; translate: 1.5% -1%; } }
@keyframes fx-smoke {
  0% { opacity: 0; translate: 0 0; scale: .5; }
  12% { opacity: .9; }
  50% { translate: 30% -170%; scale: 1.4; opacity: .6; }
  100% { opacity: 0; translate: -20% -380%; scale: 2.4; }
}

/* Icon micro-motions */
@keyframes fx-icon-swing { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@keyframes fx-icon-hop { 0%, 100% { translate: 0 0; } 40%, 60% { translate: 0 -4px; } }
@keyframes fx-icon-pulse { 0%, 100% { scale: 1; } 12% { scale: 1.12; } 24% { scale: 1; } 36% { scale: 1.08; } }
@keyframes fx-icon-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes fx-icon-glow { 0%, 100% { box-shadow: 0 0 0 rgba(229,184,92,0); } 50% { box-shadow: 0 0 18px rgba(229,184,92,.45); } }
@keyframes fx-icon-wiggle { 0%, 70%, 100% { rotate: 0deg; } 76% { rotate: -10deg; } 82% { rotate: 8deg; } 88% { rotate: -5deg; } 94% { rotate: 3deg; } }

/* Drops */
.drop-tools { display: grid; gap: 14px; justify-items: end; }
.chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.chip { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--panel); color: #cfc8b9; font-size: 13px; font-weight: 600; cursor: pointer; transition: .2s; }
.chip:hover { border-color: var(--line); color: var(--text); }
.chip[aria-selected="true"] { background: var(--gold); color: #1a1204; border-color: var(--gold); }
.sort { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.sort select { background: var(--panel); color: var(--text); border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 12px; font: inherit; }
.drop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.drop {
  position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius); overflow: hidden;
  background: var(--panel); border: 1px solid var(--line-soft); transition: border-color .3s, transform .5s var(--ease), box-shadow .5s;
  animation: fadeUp .6s var(--ease) both; animation-delay: calc(var(--i) * 70ms);
}
.drop:hover, .drop.is-active { border-color: rgba(229,184,92,.45); transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.drop-media { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 60%, #26211a, #121010); overflow: hidden; }
.drop-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px 18px 8px; transition: transform .8s var(--ease); }
.drop:hover .drop-media img, .drop.is-active .drop-media img { transform: scale(1.08) rotate(-2deg); }
.off { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 8px; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1a1204; font: 700 12px var(--mono); }
.heart { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-soft); background: rgba(11,10,8,.6); cursor: pointer; backdrop-filter: blur(6px); transition: .25s var(--ease); }
.heart:hover { border-color: var(--gold); }
.heart svg { width: 18px; height: 18px; }
.heart[aria-pressed="true"] { color: var(--red); border-color: rgba(239,90,79,.5); }
.heart[aria-pressed="true"] svg { fill: currentColor; animation: bump .45s var(--ease); }
.drop-info { display: grid; gap: 6px; padding: 16px 18px 18px; align-content: start; }
.drop-dept { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.drop-name { font-weight: 700; font-size: 16px; line-height: 1.3; }
.price { display: flex; align-items: baseline; gap: 10px; }
.price b { font-family: var(--display); font-size: 30px; font-weight: 800; color: var(--gold-hi); }
.save-line { font-size: 13px; color: var(--green); }
.drop-actions { display: flex; gap: 8px; margin-top: 8px; }
.add { flex: 1; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--gold); background: transparent; color: var(--gold-hi); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: .25s var(--ease); }
.add:hover { background: var(--gold); color: #1a1204; }
.add.done { background: var(--gold); color: #1a1204; }
.ask-mini { display: grid; place-items: center; width: 42px; border-radius: 50%; border: 1px solid var(--line-soft); background: var(--panel-2); cursor: pointer; transition: .25s; }
.ask-mini:hover { border-color: var(--gold); background: var(--gold-dim); }
.empty-state { grid-column: 1 / -1; padding: 50px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty-state button, .empty-state .btn { margin-top: 14px; }
.empty-state p { max-width: 520px; margin: 0 auto; }

/* Real product photos are mostly shot on white, so they sit on a light studio plate and blend in with multiply. */
.drop-media.photo { background: radial-gradient(circle at 50% 38%, #ffffff, #efeae1 70%, #e2dccf); }
.drop-media.photo img { mix-blend-mode: multiply; padding: 18px 22px 12px; }
/* Items without a photo show their department artwork full-bleed. */
.drop-media:not(.photo) img { object-fit: cover; padding: 0; filter: brightness(.85); }
.drop:hover .drop-media:not(.photo) img, .drop.is-active .drop-media:not(.photo) img { transform: scale(1.06); }
.fc-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stock { position: absolute; left: 12px; bottom: 12px; padding: 4px 9px; border-radius: 6px; background: rgba(11,10,8,.78); color: #ffb3ad; font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(6px); }
.drop-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.drop-meta { font-size: 13px; color: var(--muted); }
.stock-count { letter-spacing: .08em; color: var(--muted); }
.stock-count:empty { display: none; }
.drop.skeleton { animation: none; pointer-events: none; }
.drop.skeleton .drop-media, .drop.skeleton i { background: linear-gradient(100deg, #17140f 30%, #241f17 50%, #17140f 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
.drop.skeleton i { display: block; height: 12px; border-radius: 6px; }
.drop.skeleton i:nth-child(1) { width: 40%; }
.drop.skeleton i:nth-child(2) { width: 85%; height: 16px; }
.drop.skeleton i:nth-child(3) { width: 55%; height: 26px; margin-top: 6px; }
@keyframes shimmer { to { background-position: -300% 0; } }
.radar-empty { color: var(--muted); font-size: 14px; padding: 18px 0; }
a.price-check { color: inherit; text-decoration: none; }
.float-card[hidden] { display: none; }

/* Seen on TikTok */
.tt-side { display: grid; gap: 16px; justify-items: start; max-width: 360px; color: #cfc8b9; }
.clip-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 16px; scrollbar-width: none; }
.clip-rail::-webkit-scrollbar { display: none; }
.clip {
  position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; isolation: isolate; scroll-snap-align: start;
  border: 1px solid var(--line-soft); background: var(--panel); color: var(--text); text-decoration: none; transition: border-color .3s, transform .5s var(--ease);
}
.clip:hover, .clip.is-active { border-color: rgba(229,184,92,.6); transform: translateY(-6px); }
.clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.clip-cover-empty { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 50% 35%, var(--gold-dim), var(--panel) 70%); }
.clip:hover img, .clip.is-active img { transform: scale(1.06); }
.clip::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,10,8,.4), transparent 20%, transparent 42%, rgba(11,10,8,.88) 72%, #0b0a08); }
.clip-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(11,10,8,.5); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px); opacity: .9; transition: .3s var(--ease); }
.clip-play svg { width: 22px; height: 22px; fill: #fff; stroke: none; margin-left: 3px; }
.clip:hover .clip-play, .clip.is-active .clip-play { background: var(--gold); border-color: var(--gold); transform: scale(1.08); }
.clip:hover .clip-play svg, .clip.is-active .clip-play svg { fill: #1a1204; }
.clip-body { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 4px; }
.clip-body b { font-family: var(--display); font-size: 22px; font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.clip-body span { font-size: 13px; color: #d6cfc0; }
.clip-bid { position: absolute; top: 14px; left: 14px; padding: 5px 10px; border-radius: 999px; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1a1204; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* Numbers */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line-soft); padding-block: 56px; }
.numbers div { display: grid; gap: 6px; padding: 0 24px; border-left: 1px solid var(--line-soft); }
.numbers div:first-child { border-left: 0; padding-left: 0; }
.numbers b { font-family: var(--display); font-size: clamp(44px, 5vw, 72px); font-weight: 900; line-height: 1; color: var(--gold-hi); }
.numbers div > span { color: var(--muted); font-size: 14px; }

/* CTA */
.cta { text-align: center; }
.cta-inner { position: relative; display: grid; gap: 20px; padding: clamp(40px, 6vw, 80px) 24px; border-radius: 32px; border: 1px solid var(--line); overflow: hidden; background: radial-gradient(ellipse at 50% 120%, rgba(229,184,92,.22), transparent 60%), var(--bg-2); }
.cta-inner p { color: #cfc8b9; font-size: 18px; }

/* Footer */
.footer { display: grid; grid-template-columns: 1fr auto; gap: 36px; padding: 60px var(--pad) 40px; border-top: 1px solid var(--line-soft); background: #080705; }
.footer-brand { display: grid; gap: 16px; justify-items: start; }
.footer-brand p { color: var(--muted); max-width: 28em; }
.footer-cols { display: flex; gap: 60px; }
.footer-cols div { display: grid; gap: 10px; align-content: start; }
.footer-cols h3 { font-size: 16px; letter-spacing: .14em; color: var(--gold); margin-bottom: 4px; }
.footer-cols a, .footer-cols button { color: #cfc8b9; font-size: 14px; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.footer-cols a:hover, .footer-cols button:hover { color: var(--gold-hi); }
.footer-legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line-soft); color: #6f695e; font-size: 13px; }

/* AI launcher */
.ai-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 45; display: flex; align-items: center; gap: 10px;
  padding: 14px 20px 14px 16px; border-radius: 999px; border: 1px solid rgba(229,184,92,.45); cursor: pointer;
  background: rgba(21,18,14,.85); backdrop-filter: blur(14px); color: var(--text); font-weight: 700; font-size: 14px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.8), 0 0 0 0 rgba(229,184,92,.4);
  transform: translateY(120px); transition: transform .5s var(--ease), border-color .25s;
  animation: halo 3s infinite;
}
.ai-fab.show { transform: none; }
.ai-fab:hover { border-color: var(--gold); }
/* Mini gold vault: the dial spins slowly and the AI spark twinkles on its corner. */
.fab-vault { position: relative; display: grid; width: 28px; height: 28px; flex: none; filter: drop-shadow(0 3px 8px rgba(229,184,92,.35)); }
.fab-vault svg { width: 100%; height: 100%; overflow: visible; }
.fab-wheel { transform-box: fill-box; transform-origin: center; animation: dial 7s var(--ease) infinite; }
.fab-vault .spark { position: absolute; top: -7px; right: -8px; width: 13px; height: 13px; }
.ai-fab:hover .fab-wheel { animation-duration: 1.6s; }
@keyframes dial { 0%, 20% { transform: rotate(0); } 50%, 70% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes halo { 50% { box-shadow: 0 20px 40px -12px rgba(0,0,0,.8), 0 0 0 8px rgba(229,184,92,0); } }

/* Drawers */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(5,4,3,.6); backdrop-filter: blur(4px); animation: fadeIn .3s; }
@keyframes fadeIn { from { opacity: 0; } }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(440px, 100vw);
  display: flex; flex-direction: column; background: var(--bg-2); border-left: 1px solid var(--line);
  transform: translateX(105%); transition: transform .5s var(--ease); box-shadow: -40px 0 80px -30px rgba(0,0,0,.9);
}
.drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.ai-id { display: flex; align-items: center; gap: 12px; }
.ai-id div { display: grid; line-height: 1.2; }
.ai-id .mono { color: var(--muted); font-size: 11px; }
.ai-orb { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3d1, var(--gold) 35%, var(--gold-lo) 70%, #3a2a10); box-shadow: 0 0 24px rgba(229,184,92,.45); animation: breathe 3.2s ease-in-out infinite; }
.ai-orb.big { width: 64px; height: 64px; }
.ai-orb.thinking { animation: breathe .9s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(.88); box-shadow: 0 0 40px rgba(229,184,92,.7); } }

.chat { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.chat-empty { margin: auto 0; display: grid; gap: 12px; justify-items: center; text-align: center; }
.chat-empty h3 { font-size: 34px; margin-top: 8px; }
.chat-empty p { color: var(--muted); font-size: 14px; max-width: 26em; }
.chat-empty .suggest { width: 100%; margin-top: 10px; }
.msg { max-width: 88%; padding: 12px 15px; border-radius: 16px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; animation: fadeUp .35s var(--ease) both; }
.msg.user { align-self: flex-end; background: var(--gold); color: #1a1204; border-bottom-right-radius: 5px; font-weight: 500; }
.msg.ai { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line-soft); border-bottom-left-radius: 5px; }
.msg.ai.error { border-color: rgba(239,90,79,.45); color: #ffb3ad; }
.typing { display: inline-flex; gap: 5px; padding: 4px 0; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: dots 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 30% { transform: translateY(-5px); opacity: .4; } }
.caret::after { content: ""; display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--gold); animation: blink .8s infinite; }
.recs { display: grid; gap: 8px; margin-top: 12px; white-space: normal; }
.rec { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line-soft); }
.rec img { width: 56px; height: 42px; object-fit: contain; border-radius: 8px; background: #1f1a14; }
.rec-name { font-size: 13px; font-weight: 700; line-height: 1.3; }
.rec-price { font-size: 13px; color: var(--gold-hi); }
.rec-price s { color: var(--muted); margin-left: 4px; }
.rec button { padding: 7px 11px; border-radius: 999px; border: 1px solid var(--gold); background: none; color: var(--gold-hi); font-size: 12px; font-weight: 700; cursor: pointer; }
.rec button:hover { background: var(--gold); color: #1a1204; }
.chat-form { display: flex; gap: 10px; align-items: flex-end; margin: 0 14px; padding: 8px 8px 8px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); transition: box-shadow .2s, border-color .2s; }
.chat-form:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-dim); }
.chat-form textarea { flex: 1; resize: none; background: none; border: 0; outline: none; color: var(--text); font: 15px/1.45 var(--body); padding: 9px 0; max-height: 140px; }
.send { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--gold); color: #1a1204; cursor: pointer; }
.send:disabled { opacity: .45; cursor: progress; }
.chat-note { padding: 10px 18px 16px; font-size: 11px; color: #6f695e; text-align: center; }

.cart-list { list-style: none; margin: 0; padding: 12px 18px; flex: 1; overflow-y: auto; display: grid; gap: 12px; align-content: start; }
.cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line-soft); animation: fadeUp .35s var(--ease) both; }
.cart-item img { width: 72px; height: 54px; object-fit: contain; background: #1f1a14; border-radius: 10px; }
.cart-item .name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.cart-item .p { color: var(--gold-hi); font-size: 14px; }
.qty { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line-soft); border-radius: 999px; }
.qty button { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 16px; }
.qty button:hover { color: var(--gold); }
.qty span { min-width: 16px; text-align: center; font-size: 14px; }
.cart-empty { flex: 1; display: grid; align-content: center; justify-items: center; gap: 16px; color: var(--muted); }
.cart-empty svg { width: 54px; height: 54px; color: var(--gold); stroke-width: 1.2; }
.cart-foot { padding: 18px; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; }
.cart-foot .row { display: flex; justify-content: space-between; }
.cart-foot .save { color: var(--green); font-size: 14px; }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 95; transform: translate(-50%, calc(100% + 40px)); opacity: 0; padding: 13px 20px; border-radius: 999px; background: #f2ede3; color: #15120e; font-weight: 600; font-size: 14px; box-shadow: 0 20px 40px -12px rgba(0,0,0,.7); transition: transform .45s var(--ease), opacity .3s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* Marquee band */
.band { position: relative; overflow: hidden; padding: clamp(26px, 3.4vw, 48px) 0; border-block: 1px solid var(--line); background: linear-gradient(180deg, #0e0c09, var(--bg)); }
.band-track {
  display: flex; align-items: center; gap: clamp(28px, 3vw, 56px); width: max-content; white-space: nowrap;
  font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(64px, 10vw, 180px); line-height: .9;
  animation: band 42s linear infinite; transform: skewX(var(--skew, 0deg)); transition: transform .4s var(--ease);
}
.band-track .o { color: transparent; -webkit-text-stroke: 1.5px var(--gold); }
.band-track b { font-size: .4em; color: var(--gold); }

/* Bigger, roomier layout across the page */
:root { --pad: clamp(20px, 5vw, 96px); --radius: 22px; }
h2 { font-size: clamp(58px, 8vw, 140px); }
.section { padding: clamp(84px, 12vw, 190px) var(--pad); }
.section-head { margin-bottom: clamp(44px, 5vw, 80px); gap: 20px; }
.eyebrow { font-size: 14px; }
.bento { grid-auto-rows: clamp(220px, 19vw, 320px); gap: 18px; }
.dept-name { font-size: clamp(28px, 2.6vw, 44px); }
.dept:nth-child(1) .dept-name { font-size: clamp(48px, 5vw, 92px); }
.drop-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.drop-name { font-size: 18px; }
.price b { font-size: 36px; }
.rail { grid-auto-columns: minmax(300px, 1fr); gap: 20px; }
.clip-rail { grid-auto-columns: minmax(240px, 1fr); gap: 20px; }
.numbers { padding-block: clamp(56px, 7vw, 110px); }
.numbers b { font-size: clamp(52px, 6.4vw, 112px); }

/* Responsive */
@media (max-width: 1180px) {
  .ask-pill { min-width: 0; }
  .ask-pill-text, .ask-pill kbd, .staff-label { display: none; }
  .nav-links a { padding-inline: 10px; }
}
@media (max-width: 980px) {
  .menu-btn { display: inline-flex; }
  .nav-links {
    position: fixed; inset: 0 0 auto 0; top: 0; z-index: -1; flex-direction: column; gap: 0; margin: 0;
    padding: 110px var(--pad) 28px; background: rgba(11,10,8,.97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
    transform: translateY(-100%); transition: transform .45s var(--ease);
  }
  .nav-links.open { transform: none; }
  .nav-links a { font-size: 22px; font-family: var(--display); padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  .nav-links a::after { display: none; }
  /* Small screens: the copy scrolls over a pinned vault scene, then the scene zooms through the door
     into the vault and "You're inside" holds on screen (progress driven by site.js, like desktop). */
  .hero { height: auto; }
  .hero-stage { position: relative; height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; padding: 0 0 36px; gap: 34px; }
  .hero-stage::after { content: ""; order: 3; flex: none; height: 110svh; }
  .vault-scene { position: sticky; inset: auto; top: 0; flex: none; overflow: hidden; height: 100svh; margin-bottom: -100svh; }
  .vault-scene::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: var(--veil, 0); pointer-events: none; }
  .vault-scene img { object-position: 64% 50%; }
  .vault-shade { background: linear-gradient(180deg, rgba(11,10,8,.35), transparent 18%, rgba(11,10,8,.4) 32%, rgba(11,10,8,.93) 48%, var(--bg)); opacity: var(--shade, 1); }
  .hero-copy { position: relative; left: 0; top: 0; width: auto; margin-top: calc(var(--nav-h, 100px) + 34vh - 34px); padding-inline: var(--pad); transform: none; opacity: 1; }
  .hero-inside { position: sticky; inset: auto; top: 0; order: 2; flex: none; height: 100svh; }
  .inside-title { font-size: clamp(44px, 13vw, 84px); }
  .hero-foot { position: relative; left: 0; right: 0; bottom: 0; order: 1; padding-inline: var(--pad); opacity: 1; }
  .scroll-cue { display: none; }
  .stat-card { top: calc(var(--nav-h, 100px) + 12px); right: 5%; padding: 10px 12px; }
  .stat-card .stat-big { font-size: 30px; }
  /* Floating cards join the mobile layout instead of disappearing: the price check sits under the
     buttons, the drop chip rests on the vault photo. */
  .hero-floats { display: contents; }
  .price-check { position: relative; right: auto; bottom: auto; align-self: flex-start; width: min(380px, calc(100% - var(--pad) * 2)); margin-inline: var(--pad); }
  .drop-chip { top: calc(var(--nav-h, 100px) + 34vh - 58px); left: var(--pad); right: auto; bottom: auto; font-size: 12px; padding: 8px 14px; }
  .live { grid-template-columns: 1fr; }
  .ai-section { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .dept:nth-child(4) { grid-row: span 1; }
  .section-head.split { grid-template-columns: 1fr; }
  .drop-tools, .chips { justify-items: start; justify-content: flex-start; }
  .numbers { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .numbers div:nth-child(3) { border-left: 0; padding-left: 0; }
  .footer { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .logo-main { font-size: 27px; }
  .logo-vault { font-size: 18px; }
  .logo-the { font-size: 11px; }
  .nav { gap: 10px; }
  .staff { display: none; }
  .hero-title { font-size: clamp(64px, 21vw, 110px); }
  .ai-search input { font-size: 15px; }
  .radar { padding: 20px; }
  .radar-row { grid-template-columns: 1fr 56px; }
  .radar-row .bars { grid-column: 1 / -1; grid-row: 2; }
  .footer-cols { flex-wrap: wrap; gap: 30px; }
  .ai-fab-text { display: none; }
  .ai-fab { padding: 14px; }
  .fab-vault { width: 30px; height: 30px; }
  .numbers div { padding: 0 14px; }
  /* CTA: let the heading wrap naturally at a size that fits, and stack the ask button under the input. */
  .cta { padding-inline: 14px; }
  .cta-inner { padding: 44px 18px; border-radius: 24px; gap: 16px; }
  .cta h2 { font-size: clamp(40px, 12.5vw, 58px); overflow-wrap: break-word; }
  .cta h2 br { display: none; }
  .cta-inner p { font-size: 16px; }
  .cta .ai-search.big { flex-wrap: wrap; padding: 8px 8px 8px 16px; border-radius: 22px; }
  .cta .ai-search.big input { flex: 1 1 0; font-size: 15px; padding: 12px 0; }
  .cta .ai-search.big .btn { flex: 1 1 100%; }
}

/* Touch screens have no cursor to steer the vault glow, so it drifts across the door on its own. */
@media (hover: none) {
  .vault-light { inset: -25%; background: radial-gradient(420px circle at 60% 32%, rgba(255,206,120,.24), transparent 62%); animation: glow-drift 9s ease-in-out infinite alternate; }
}
@keyframes glow-drift { 0% { translate: -10% -4%; } 50% { translate: 6% 5%; } 100% { translate: 12% -3%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero { height: auto; }
  .hero-stage { position: relative; }
  .hero-stage::after { content: none; }
  .hero-inside { display: none; }
  .band-track { animation: none; }
  .dept-media, .dept-media *, .dept-media *::before, .dept-icon, .dept-fx::before, .dept-fx::after { animation: none !important; }
  .fx-layer, .fx-car, .dept-media > i { display: none; }
}

/* ---------- AI avatar hosts ---------- */
.host { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(18px, 3vw, 40px); align-items: center; margin-bottom: 28px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, var(--panel), var(--bg-2)); }
.host-media { position: relative; aspect-ratio: 9 / 16; max-height: 70vh; border-radius: 14px; overflow: hidden; background: #000; }
.host-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-tag { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 99px; background: rgba(11,10,8,.72); border: 1px solid var(--line); color: var(--gold-hi); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.host-copy { display: grid; gap: 12px; justify-items: start; }
.host-copy h3 { font-size: clamp(34px, 5vw, 60px); }
.host-copy p.muted { color: var(--muted); max-width: 440px; margin: 0; }
.pitch-btn svg { width: 16px; height: 16px; fill: var(--gold); }
.pitch-dialog { width: min(360px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: visible; }
.pitch-dialog::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }
.pitch-dialog .host-media { border-radius: var(--radius); }
.pitch-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: rgba(11,10,8,.72); color: var(--text); border: 1px solid var(--line); cursor: pointer; }
@media (max-width: 700px) {
  .host { grid-template-columns: 1fr; padding: 14px; }
  .host-media { max-height: 62vh; width: 100%; max-width: 320px; justify-self: center; }
}