/* B.A.S.S. — long scroll.
   Replaces style.css. No particle field, no custom cursor, no glitch.
   Weight comes from type, space, and numbers. */

:root {
  --ink:#050506; --ink-2:#0a0a0d; --line:rgba(255,255,255,.08);
  --gold:#d4af37; --gold-bright:#f3d98b; --gold-deep:#a8811f; --cyan:#00f2fe;
  --text:#c4c4cc; --dim:#6b6b74;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--ink); color:var(--text); line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:78px;
}
body.portal-open { overflow:hidden; }
.wrap { max-width:1240px; margin:0 auto; padding:0 40px; }
a { color:inherit; }

/* ── Nav ── */
.nav { position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(5,5,6,.82); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:26px; height:70px; }
.nav-mark { width:112px; }
.nav-links { display:flex; gap:17px; flex:0 1 auto; min-width:0; }
.nav-links a { color:#9a9aa3; text-decoration:none; font-size:.72rem; letter-spacing:.2px; white-space:nowrap;
  display:flex; align-items:baseline; gap:7px; transition:color .2s; }
.nav-links a:hover { color:#fff; }
.nav-links .n { font-size:.55rem; color:var(--gold); font-weight:700; }

/* ── Hero ── */
.hero { padding:230px 0 140px; }
.hero-mark { width:min(660px,86vw); margin-bottom:52px; }
.eyebrow { font-size:.66rem; letter-spacing:4px; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:30px; }
h1 { font-size:clamp(2.6rem,7vw,6rem); font-weight:900; line-height:.94; letter-spacing:-3px; color:#fff; }
h1 em { font-style:italic; font-weight:400; color:var(--gold-bright); }
.lede { font-size:clamp(1.02rem,1.9vw,1.32rem); color:#9a9aa3; max-width:48ch; margin-top:30px; line-height:1.55; }
.scroll-cue { margin-top:66px; font-size:.66rem; letter-spacing:3px; text-transform:uppercase; color:#4a4a52; }

/* ── Sections ── */
section { padding:110px 0; border-top:1px solid var(--line); }
.sec-label { display:flex; gap:10px; font-size:.66rem; letter-spacing:3px; text-transform:uppercase; color:#52525b; margin-bottom:24px; }
.sec-label .n { color:var(--gold); font-weight:700; }
h2 { font-size:clamp(1.8rem,4.2vw,3.2rem); font-weight:900; line-height:1.05; letter-spacing:-1.5px; color:#fff; margin-bottom:44px; }
h2 em { font-style:italic; font-weight:400; color:var(--gold-bright); }

/* ── Figures ── */
.figures { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.fig { background:var(--ink); padding:34px 26px; }
.fig-n { font-size:clamp(2.1rem,4.2vw,3.2rem); font-weight:900; color:#fff; letter-spacing:-2px; line-height:1; }
.fig-l { font-size:.68rem; color:var(--dim); margin-top:12px; text-transform:uppercase; letter-spacing:1.5px; line-height:1.45; }

/* ── Divisions ── */
.divisions { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.div-row { background:var(--ink); padding:38px 32px; display:grid; grid-template-columns:58px 1fr 1.15fr 100px;
  gap:28px; align-items:center; cursor:pointer; transition:background .25s; text-align:left; border:0; width:100%; font:inherit; color:inherit; }
.div-row:hover { background:#101014; }
.div-n { font-size:.7rem; color:var(--gold); font-weight:700; letter-spacing:1px; }
.div-name { font-size:1.55rem; font-weight:800; color:#fff; letter-spacing:-.5px; }
.div-desc { font-size:.92rem; color:var(--dim); line-height:1.65; }
.div-go { font-size:.66rem; letter-spacing:2px; text-transform:uppercase; color:#3f3f46; text-align:right; transition:color .25s; }
.div-row:hover .div-go { color:var(--gold-bright); }

/* ── Letter ── */
.letter { display:grid; grid-template-columns:1fr 350px; gap:76px; align-items:start; }
.letter p { margin-bottom:22px; font-size:1.01rem; line-height:1.85; color:#b8b8c0; }
.letter p:first-child { font-size:1.14rem; color:#e4e4e7; }
.sig-block { margin-top:42px; padding-top:28px; border-top:1px solid var(--line); }
.sig-img { height:74px; width:auto; display:block; margin-bottom:14px; filter:invert(1) brightness(1.7); }
.sig-name { font-weight:800; color:#fff; font-size:.97rem; }
.sig-role { font-size:.68rem; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-top:5px; }
.portrait { position:sticky; top:110px; }
.portrait img, .portrait .ph { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:3px; border:1px solid var(--line); display:block; }
.portrait .ph { background:linear-gradient(155deg,#15151a,#0a0a0d); display:flex; align-items:center; justify-content:center; text-align:center; padding:26px; color:#3f3f46; font-size:.76rem; line-height:1.6; }
.portrait-cap { font-size:.66rem; color:#3f3f46; margin-top:13px; letter-spacing:1px; }

/* ── Reveal ── */
[data-reveal] { opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
[data-reveal].in { opacity:1; transform:none; }

/* ── Footer ── */
footer { padding:90px 0 46px; border-top:1px solid var(--line); }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; margin-bottom:60px; }
.foot-h { font-size:.62rem; letter-spacing:2.5px; text-transform:uppercase; color:#3f3f46; margin-bottom:16px; }
.foot-grid a { display:block; color:#9a9aa3; text-decoration:none; font-size:.86rem; margin-bottom:9px; }
.foot-grid a:hover { color:#fff; }
.coords { font-family:monospace; font-size:.7rem; color:#3f3f46; margin-top:12px; }
.foot-bottom { border-top:1px solid var(--line); padding-top:24px; font-size:.72rem; color:#3f3f46; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* ── Audio deck, pinned ── */
.deck { position:fixed; bottom:0; left:0; right:0; z-index:55; height:78px;
  background:rgba(5,5,6,.9); backdrop-filter:blur(16px); border-top:1px solid var(--line); }
.deck-inner { display:flex; align-items:center; gap:22px; height:100%; }
.deck-controls { display:flex; gap:8px; }
.action-node { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.05);
  border:1px solid var(--line); color:#fff; cursor:pointer; font-size:.72rem; }
.action-node:hover { background:var(--gold-bright); color:#000; border-color:var(--gold-bright); }
.deck-meta { min-width:0; flex:1; }
.track-title-view { font-size:.8rem; color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-artist-view { font-size:.68rem; color:var(--dim); margin-top:2px; }
.frequency-bars { display:flex; gap:3px; align-items:flex-end; height:20px; }
.freq-bar { width:3px; height:5px; background:var(--gold); opacity:.35; border-radius:2px; }
.active-audio .freq-bar { opacity:1; animation:eq .9s ease-in-out infinite; }
.active-audio .freq-bar:nth-child(2){ animation-delay:.15s } .active-audio .freq-bar:nth-child(3){ animation-delay:.3s } .active-audio .freq-bar:nth-child(4){ animation-delay:.45s }
@keyframes eq { 0%,100%{height:5px} 50%{height:19px} }
.deck-legal { display:flex; gap:20px; font-size:.66rem; }
.deck-legal a { color:#4a4a52; text-decoration:none; }
.deck-legal a:hover { color:#fff; }

/* ── Modal ── */
.app-portal-modal { position:fixed; inset:0; z-index:100; background:rgba(3,3,5,.92); backdrop-filter:blur(14px);
  display:none; align-items:flex-start; justify-content:center; padding:70px 24px; overflow-y:auto; }
.app-portal-modal.is-active { display:flex; }
.modal-surface { background:var(--ink-2); border:1px solid var(--line); border-radius:18px;
  max-width:1180px; width:100%; padding:54px; position:relative; }
.modal-close-node { position:absolute; top:24px; right:26px; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:#fff; cursor:pointer; }
.modal-close-node:hover { background:#fff; color:#000; }
.modal-header-tag { font-size:.66rem; letter-spacing:3px; text-transform:uppercase; color:var(--cyan); font-weight:700; }
.modal-title { font-size:clamp(1.7rem,4vw,2.8rem); font-weight:900; text-transform:uppercase; color:#fff; margin:12px 0 30px; letter-spacing:-1px; }
.modal-body-scroll-area { color:var(--text); }
.portal-lede { color:#9a9aa3; margin-bottom:30px; }

/* Roster */
.roster-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:22px; }
.artist-mini-card { background:#0e0e12; border:1px solid var(--line); border-radius:12px; padding:26px 20px;
  text-align:center; cursor:pointer; transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s; }
.artist-mini-card:hover { transform:translateY(-6px); border-color:var(--gold-bright); }
.amc-frame-img { width:104px; height:104px; border-radius:50%; object-fit:cover; margin:0 auto 16px; display:block; border:1px solid var(--line); }
.amc-name { font-size:1rem; font-weight:800; color:#fff; min-height:2.4em; display:flex; align-items:center; justify-content:center; }
.amc-meta { font-size:.66rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-top:6px; }
.artist-profile-layout { display:grid; grid-template-columns:280px 1fr; gap:44px; }
.profile-dynamic-image { width:100%; border-radius:10px; display:block; }
.p-deceased-banner { margin-top:14px; text-align:center; font-size:.65rem; letter-spacing:2px; text-transform:uppercase; color:#f472b6; }
.profile-real-name { font-size:.7rem; letter-spacing:3px; text-transform:uppercase; color:var(--gold); }
.profile-bio-text { margin:16px 0 30px; line-height:1.8; color:#b8b8c0; }
.embed-header-label { font-size:.62rem; letter-spacing:2.5px; text-transform:uppercase; color:#52525b; margin-bottom:12px; }
.back-roster-node-btn { margin-top:26px; padding:11px 22px; border-radius:30px; background:transparent;
  border:1px solid var(--line); color:#fff; cursor:pointer; font-size:.74rem; }
.back-roster-node-btn:hover { border-color:var(--gold-bright); color:var(--gold-bright); }

@media (max-width:960px) {
  .wrap { padding:0 22px; }
  .nav-links { display:none; }
  .hero { padding:150px 0 90px; }
  .div-row { grid-template-columns:38px 1fr; }
  .div-desc, .div-go { grid-column:2; }
  .div-go { text-align:left; }
  .letter { grid-template-columns:1fr; gap:44px; }
  .portrait { position:static; max-width:290px; }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .artist-profile-layout { grid-template-columns:1fr; gap:28px; }
  .modal-surface { padding:34px 24px; }
  .deck-legal { display:none; }
}

/* ── Motion ───────────────────────────────────────────────────────────────
   Type rises out of a mask line by line. This is the effect that separates
   a designed site from a styled one, and it costs almost nothing. */
.ln { display:block; overflow:hidden; }
.ln-i { display:block; transform:translateY(105%); transition:transform 1s cubic-bezier(.16,1,.3,1); }
h1.in .ln-i, h2.in .ln-i { transform:translateY(0); }
h1 .ln:nth-child(3) .ln-i, h2 .ln:nth-child(3) .ln-i { transition-delay:.09s; }
h1 .ln:nth-child(5) .ln-i, h2 .ln:nth-child(5) .ln-i { transition-delay:.18s; }

.eyebrow, .lede, .sec-label { opacity:0; transform:translateY(16px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.eyebrow.in, .lede.in, .sec-label.in { opacity:1; transform:none; }
.lede { transition-delay:.12s; }

.figures .fig { opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.figures.in .fig { opacity:1; transform:none; }
.figures.in .fig:nth-child(2){transition-delay:.06s} .figures.in .fig:nth-child(3){transition-delay:.12s}
.figures.in .fig:nth-child(4){transition-delay:.18s} .figures.in .fig:nth-child(5){transition-delay:.24s}
.figures.in .fig:nth-child(6){transition-delay:.3s}
.fig-n { font-variant-numeric:tabular-nums; }

.divisions .div-row, .work .work-row { opacity:0; transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1), background .25s; }
.divisions.in .div-row, .work-row.in { opacity:1; transform:none; }
.divisions.in .div-row:nth-child(2){transition-delay:.08s} .divisions.in .div-row:nth-child(3){transition-delay:.16s}
.divisions.in .div-row:nth-child(4){transition-delay:.24s}

.letter { opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.letter.in { opacity:1; transform:none; }

#heroMark { will-change:transform, opacity; }

/* ── Client wall ──────────────────────────────────────────────────────── */
.marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:34px 0 38px; overflow:hidden; }
.marquee-head { margin-bottom:22px; }
.marquee-rail { overflow:hidden; white-space:nowrap; }
.marquee-track { display:inline-block; animation:marquee 58s linear infinite; will-change:transform; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track span {
  font-size:clamp(1.1rem,2.1vw,1.7rem); font-weight:800; letter-spacing:-.5px;
  color:#5a5a63; padding:0 22px; transition:color .3s;
}
.marquee-track span:hover { color:#fff; }
.marquee-track .dot { color:var(--gold); padding:0; font-weight:400; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ── Work ── */
.work { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.work-row { background:var(--ink); display:grid; grid-template-columns:1fr 1.05fr; gap:0; align-items:stretch; }
.work-copy { padding:52px 46px; display:flex; flex-direction:column; justify-content:center; }
.work-n { font-size:.66rem; color:var(--gold); font-weight:700; letter-spacing:2px; margin-bottom:16px; }
.work-logo { height:56px; margin-bottom:18px; display:flex; align-items:center; }
.work-logo img { max-height:100%; max-width:210px; width:auto; object-fit:contain; display:block; }
/* Square marks read smaller than wide lockups at the same height — pull the
   BlvckMeta shield down so the row feels evenly weighted. */
.work-logo img[alt="BlvckMeta"] { max-height:82%; }
.work-name { font-size:clamp(1.6rem,3vw,2.3rem); font-weight:900; color:#fff; letter-spacing:-1px; line-height:1.05; }
.work-hook { font-size:.98rem; color:#9a9aa3; margin-top:14px; line-height:1.7; max-width:44ch; }
.work-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.work-tag { font-size:.62rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--line); border-radius:30px; padding:6px 13px; }
.work-link { margin-top:28px; font-size:.7rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold-bright); text-decoration:none; display:inline-flex; gap:8px; }
.work-link:hover { color:#fff; }
/* The panel is a window. The image is absolutely positioned inside it, so
   nothing in here can ever set the row height — that was the stretch. */
.work-shot { position:relative; overflow:hidden; background:#0d0d11; min-height:340px; }
/* Placeholder label sits behind the image so a missing file degrades to text
   rather than a blank box. */
.work-shot .ph { z-index:0; }
.work-shot img { z-index:1; }
.work-shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:top center; display:block; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.work-shot.tall img { object-fit:contain; object-position:center; padding:26px 0; }

/* ── A live site inside the panel ─────────────────────────────────────────
   A real 1440px-wide page rendered at scale, not a screenshot. It moves,
   it's current, and it can never go out of date. Pointer events are off so
   scrolling the page doesn't get captured by the frame. */
.work-shot.live iframe {
  position:absolute; top:0; left:0;
  width:1440px; height:1900px; border:0;
  transform:scale(.42); transform-origin:top left;
  pointer-events:none; background:#000;
}
/* Sits under the iframe. If the site refuses to be framed the frame renders
   nothing and this shows through, so the panel is never an empty black box. */
.live-fallback { z-index:1; }
.work-shot.live iframe { z-index:1; }
.live-veil {
  position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; gap:8px;
  padding:20px 22px; text-decoration:none; color:#fff;
  font-size:.66rem; letter-spacing:2px; text-transform:uppercase;
  background:linear-gradient(to top, rgba(4,4,5,.85) 0%, transparent 34%);
  opacity:0; transition:opacity .35s ease;
}
.work-row:hover /* Sits under the iframe. If the site refuses to be framed the frame renders
   nothing and this shows through, so the panel is never an empty black box. */
.live-fallback { z-index:1; }
.work-shot.live iframe { z-index:1; }
.live-veil { opacity:1; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 8px #22c55e;
  align-self:center; animation:livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.work-row:hover .work-shot img { transform:scale(1.04); }
.work-shot .ph { position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center;
  color:#2e2e36; font-size:.76rem; text-align:center; padding:26px; line-height:1.6; }
.work-shot img { position:relative; z-index:1; }

@media (max-width:960px) {
  .work-row { grid-template-columns:1fr; }
  .work-copy { padding:34px 26px; }
  .work-shot { order:-1; }
}

/* ── Loading curtain ──────────────────────────────────────────────────── */
html.loading, html.loading body { overflow:hidden; }
.curtain { position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
  transition:transform 1s cubic-bezier(.76,0,.24,1), opacity .6s ease .3s; }
.curtain.lift { transform:translateY(-100%); opacity:0; }
.curtain-mark { width:min(300px,52vw); aspect-ratio:1000/430;
  background-image:url('/BassGold.png'); background-size:contain; background-repeat:no-repeat; background-position:center;
  animation:curtainBreath 2.4s ease-in-out infinite; }
@keyframes curtainBreath { 0%,100%{opacity:.5} 50%{opacity:1} }
.curtain-bar { width:min(220px,44vw); height:1px; background:rgba(255,255,255,.12); overflow:hidden; }
.curtain-bar span { display:block; height:100%; background:var(--gold-bright);
  transform:scaleX(0); transform-origin:left center; }
.curtain-num { font-family:monospace; font-size:.72rem; letter-spacing:3px; color:#3f3f46; }

/* ── Lerped scroll ────────────────────────────────────────────────────── */
/* The lerped scroll is gone (see fx.js). Native smooth scrolling instead. */
html { scroll-behavior:smooth; }
/* Pinned to the viewport. */

.app-portal-modal { z-index:200; }
.curtain { z-index:9999; }

/* ── Cursor light ─────────────────────────────────────────────────────── */
.cursor-glow { position:fixed; top:0; left:0; width:600px; height:600px; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(201,162,39,.09) 0%, rgba(201,162,39,.035) 34%, transparent 66%);
  will-change:transform; }

/* ── Magnetic ─────────────────────────────────────────────────────────── */
.magnetic { transition:transform .45s cubic-bezier(.16,1,.3,1); }
.div-row.magnetic:hover { transition:transform .1s ease, background .25s; }

/* ── Signature ────────────────────────────────────────────────────────── */
/* Already white on transparent — no invert needed. */
.sig-img { height:132px; width:auto; display:block; margin-bottom:18px;
  filter:none; opacity:1; mix-blend-mode:screen; background:transparent; }

/* ── MacBook Pro frame ────────────────────────────────────────────────────
   Aluminium unibody drawn in CSS — no image, so it stays sharp at any size
   and costs nothing to load. The screenshot inside pans slowly, which reads
   as someone scrolling the app rather than a still. */
.work-shot.device { display:flex; align-items:center; justify-content:center;
  padding:34px 26px; background:radial-gradient(ellipse at 50% 40%, #14141a 0%, #08080b 70%); }

.macbook { width:100%; max-width:520px; }

.mb-lid {
  position:relative; aspect-ratio:16/10; border-radius:12px 12px 4px 4px;
  padding:11px 11px 15px;
  background:linear-gradient(160deg, #3a3a41 0%, #1d1d22 42%, #2c2c33 100%);
  box-shadow:0 22px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
}
.mb-screen {
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:3px; background:#000;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.9);
}
.mb-screen img {
  position:absolute; top:0; left:0; width:100%; height:auto; display:block;
  animation:mbScroll 26s ease-in-out infinite alternate;
}
/* Pans down and back. Long enough that it never feels like a loop. */
@keyframes mbScroll {
  0%   { transform:translateY(0); }
  100% { transform:translateY(calc(-100% + 100px)); }
}
/* Screen glare — one soft diagonal, the thing that sells it as glass. */
.mb-screen::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.055) 0%, transparent 32%, transparent 100%);
}
.mb-camera {
  position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%;
  background:#0b0b0d; box-shadow:inset 0 0 2px rgba(120,160,200,.5);
}

.mb-hinge { height:3px; margin:0 34px;
  background:linear-gradient(to bottom, #16161a, #26262c); }

.mb-base {
  position:relative; height:11px; border-radius:0 0 11px 11px;
  background:linear-gradient(to bottom, #3d3d44 0%, #26262c 38%, #17171b 100%);
  box-shadow:0 14px 26px rgba(0,0,0,.55);
}
/* The notch you grip to open it */
.mb-lip {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:82px; height:5px; border-radius:0 0 6px 6px;
  background:linear-gradient(to bottom, #121215, #1e1e23);
}

@media (prefers-reduced-motion: reduce) {
  .mb-screen img { animation:none; }
}
@media (max-width:960px) {
  .work-shot.device { padding:24px 18px; }
}

/* ── Networks detail ──────────────────────────────────────────────────── */
.network-detail { display:grid; grid-template-columns:320px 1fr; gap:48px; align-items:center; }
.network-device { display:flex; justify-content:center; }
.network-copy p { font-size:1.02rem; line-height:1.8; color:#b8b8c0; margin-bottom:26px; }
.network-links { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.network-links a { font-size:.7rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold-bright); text-decoration:none; border:1px solid var(--line);
  border-radius:30px; padding:10px 18px; }
.network-links a:hover { border-color:var(--gold-bright); background:rgba(201,162,39,.08); }

/* ── iPhone frame ─────────────────────────────────────────────────────── */
.iphone { position:relative; width:100%; max-width:250px; aspect-ratio:9/19.5;
  border-radius:38px; padding:9px;
  background:linear-gradient(155deg, #45454d 0%, #1c1c21 40%, #35353d 100%);
  box-shadow:0 24px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.16); }
.ip-screen { position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:30px; background:#000; }
.ip-screen img { position:absolute; top:0; left:0; width:100%; height:auto; display:block;
  animation:mbScroll 24s ease-in-out infinite alternate; }
.ip-island { position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:32%; height:22px; border-radius:14px; background:#000; }

@media (max-width:820px) {
  .network-detail { grid-template-columns:1fr; gap:32px; }
  .network-device { order:-1; }
}

/* ── Contact ──────────────────────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:60px; align-items:start; }
.contact-form { display:flex; flex-direction:column; gap:22px; }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.contact-form label { display:flex; flex-direction:column; gap:9px; }
.contact-form label span { font-size:.66rem; letter-spacing:2px; text-transform:uppercase; color:#52525b; }
.contact-form input, .contact-form select, .contact-form textarea {
  background:#0c0c10; border:1px solid var(--line); border-radius:4px;
  color:#fff; padding:14px 16px; font-family:inherit; font-size:.94rem;
  transition:border-color .25s, background .25s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline:none; border-color:var(--gold); background:#101015;
}
.contact-form textarea { resize:vertical; min-height:130px; }
.contact-form select { appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#6b6b74 50%),linear-gradient(135deg,#6b6b74 50%,transparent 50%);
  background-position:calc(100% - 19px) center, calc(100% - 14px) center;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.contact-form select option { background:#0c0c10; }
.cf-trap { position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.cf-send { align-self:flex-start; background:var(--gold-bright); color:#000; border:0;
  border-radius:30px; padding:15px 34px; font-size:.72rem; letter-spacing:2px;
  text-transform:uppercase; font-weight:700; cursor:pointer; transition:transform .3s cubic-bezier(.16,1,.3,1), background .25s; }
.cf-send:hover { background:#fff; transform:translateY(-2px); }
.cf-send:disabled { opacity:.45; cursor:default; transform:none; }
.cf-status { font-size:.84rem; color:#9a9aa3; min-height:1.2em; }
.cf-status.ok { color:#22c55e; }
.cf-status.bad { color:#f87171; }

.contact-aside { display:flex; flex-direction:column; gap:34px; padding-top:8px; }
.ca-h { font-size:.62rem; letter-spacing:2.5px; text-transform:uppercase; color:#3f3f46; margin-bottom:12px; }
.contact-aside a { color:var(--gold-bright); text-decoration:none; font-size:.95rem; }
.contact-aside a:hover { color:#fff; }
.contact-aside p { font-size:.92rem; color:#9a9aa3; line-height:1.75; }

@media (max-width:900px) {
  .contact-grid { grid-template-columns:1fr; gap:44px; }
  .cf-row { grid-template-columns:1fr; }
}

/* ── Persistent CTA ───────────────────────────────────────────────────── */
.nav-cta { background:linear-gradient(135deg,#f7e3a4 0%,var(--gold) 46%,var(--gold-deep) 100%);
  color:#120d02; text-decoration:none; box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
  border-radius:30px; padding:9px 17px; font-size:.63rem; letter-spacing:1.1px;
  text-transform:uppercase; font-weight:800; white-space:nowrap;
  transition:transform .3s cubic-bezier(.16,1,.3,1), background .25s; }
.nav-cta:hover { background:linear-gradient(135deg,#fff3cf 0%,#e8c65a 50%,#c39a2c 100%); transform:translateY(-2px); }

/* ── Welcome bubble ───────────────────────────────────────────────────── */
.welcome { position:fixed; left:22px; bottom:96px; z-index:70;
  width:104px; height:150px; border-radius:12px; overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); background:#0c0c10;
  box-shadow:0 16px 40px rgba(0,0,0,.6);
  opacity:0; transform:translateY(20px) scale(.92);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1),
             width .5s cubic-bezier(.16,1,.3,1), height .5s cubic-bezier(.16,1,.3,1); }
.welcome.in { opacity:1; transform:none; }
.welcome.open { width:260px; height:372px; }
.welcome video { width:100%; height:100%; object-fit:cover; display:block; }
.welcome-label { position:absolute; left:0; right:0; bottom:0; padding:7px 8px;
  background:var(--gold-bright); color:#000; font-size:.6rem; font-weight:800;
  letter-spacing:1.5px; text-transform:uppercase; text-align:center; }
.welcome-close { position:absolute; top:5px; right:5px; z-index:2; width:20px; height:20px;
  border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff; cursor:pointer;
  font-size:.6rem; line-height:1; opacity:0; transition:opacity .25s; }
.welcome:hover .welcome-close { opacity:1; }

/* ── Cookie bar ───────────────────────────────────────────────────────── */
.cookiebar { position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:rgba(8,8,11,.97); backdrop-filter:blur(18px);
  border-top:1px solid var(--gold);
  transform:translateY(100%); transition:transform .6s cubic-bezier(.16,1,.3,1); }
.cookiebar.in { transform:none; }
.cookiebar-inner { max-width:1240px; margin:0 auto; padding:22px 40px 26px;
  display:grid; grid-template-columns:1fr auto; gap:20px 40px; align-items:center; }
.cb-copy { font-size:.86rem; color:#9a9aa3; line-height:1.65; max-width:64ch; }
.cb-copy strong { color:#fff; display:block; margin-bottom:3px; }
.cb-copy a { color:var(--gold-bright); }
.cb-prefs { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:22px;
  padding-top:16px; border-top:1px solid var(--line); }
.cb-prefs label { display:flex; align-items:center; gap:9px; font-size:.8rem; color:#c4c4cc; cursor:pointer; }
.cb-prefs input { accent-color:var(--gold); width:15px; height:15px; }
.cb-actions { display:flex; gap:10px; flex-wrap:wrap; }
.cb-btn { border-radius:30px; padding:11px 20px; font-size:.68rem; letter-spacing:1.5px;
  text-transform:uppercase; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:background .25s, color .25s, border-color .25s; }
.cb-ghost { background:transparent; border:1px solid var(--line); color:#c4c4cc; }
.cb-ghost:hover { border-color:#fff; color:#fff; }
.cb-solid { background:var(--gold-bright); border:1px solid var(--gold-bright); color:#000; }
.cb-solid:hover { background:#fff; border-color:#fff; }

/* ── Smoke ────────────────────────────────────────────────────────────── */
section { position:relative; }
.smoke { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
.smoke video { width:100%; height:100%; object-fit:cover; opacity:.10;
  filter:grayscale(1) contrast(1.25) brightness(.75);
  animation:smokeDrift 90s linear infinite; }
.smoke-alt video { opacity:.07; animation-duration:130s; animation-direction:reverse;
  filter:grayscale(1) contrast(1.1) brightness(.6) hue-rotate(30deg); }
@keyframes smokeDrift {
  0%   { transform:scale(1.25) translate3d(-3%, 0, 0); }
  50%  { transform:scale(1.4)  translate3d(3%, -2%, 0); }
  100% { transform:scale(1.25) translate3d(-3%, 0, 0); }
}
section > .wrap { position:relative; z-index:1; }

@media (max-width:900px) {
  .nav-cta { padding:9px 16px; font-size:.64rem; }
  .welcome { width:74px; height:106px; left:14px; bottom:90px; }
  .welcome.open { width:200px; height:286px; }
  .cookiebar-inner { grid-template-columns:1fr; padding:20px 22px 24px; }
  .cb-actions { justify-content:flex-start; }
}

/* ── The motto ────────────────────────────────────────────────────────────
   Three lines that flip on the X axis, one at a time. The accent word is a
   brush script in gold at a larger size and slight tilt — the whole point is
   that one word breaks the grid and everything else holds it. */
.motto-section { padding:130px 0; border-top:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 50%, #101015 0%, var(--ink) 72%); }
.motto-eyebrow { font-size:.66rem; letter-spacing:4px; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:40px; }

.motto-stage { position:relative; min-height:clamp(150px, 22vw, 280px);
  perspective:1400px; }

.motto-line {
  position:absolute; inset:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:0 .32em;
  font-size:clamp(1.9rem, 5.6vw, 4.6rem); font-weight:900; line-height:1.06;
  letter-spacing:-2px; color:#fff;
  opacity:0; transform:rotateX(-92deg) translateY(30px); transform-origin:50% 0;
  transition:opacity .5s ease, transform .85s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.motto-line.is-live { opacity:1; transform:none; }
.motto-line.is-out { opacity:0; transform:rotateX(88deg) translateY(-30px); transform-origin:50% 100%; }

/* The word that does the work */
.motto-line .hit {
  font-family:'Yellowtail', 'Snell Roundhand', cursive;
  font-style:normal; font-weight:400;
  font-size:1.42em; line-height:.85;
  letter-spacing:0;
  color:var(--gold-bright);
  display:inline-block;
  transform:rotate(-3.5deg) translateY(.06em);
  text-shadow:0 0 34px rgba(255,234,121,.34), 0 0 90px rgba(201,162,39,.16);
  padding:0 .06em;
}
.motto-line.is-live .hit { animation:hitLand 1.05s cubic-bezier(.16,1,.3,1) .18s both; }
@keyframes hitLand {
  0%   { opacity:0; transform:rotate(-13deg) translateY(.34em) scale(.72); filter:blur(7px); }
  62%  { opacity:1; }
  100% { opacity:1; transform:rotate(-3.5deg) translateY(.06em) scale(1); filter:blur(0); }
}

.motto-sig { margin-top:44px; font-size:.68rem; letter-spacing:2.5px;
  text-transform:uppercase; color:#4a4a52; }

@media (prefers-reduced-motion: reduce) {
  .motto-line { transition:opacity .3s ease; transform:none; }
  .motto-line.is-out { transform:none; }
  .motto-line.is-live .hit { animation:none; }
}
@media (max-width:700px) {
  .motto-section { padding:90px 0; }
  .motto-stage { min-height:220px; }
}

/* ── Announcement bar ─────────────────────────────────────────────────────
   AIIMS runs their awards up here. We run what's actually shipped — every
   item links somewhere real, which is what stops it being decoration. */
.topbar { position:fixed; top:0; left:0; right:0; z-index:65; height:38px;
  display:flex; align-items:center; gap:20px;
  background:#0a0a0d; border-bottom:1px solid var(--line); overflow:hidden; }
.topbar-label { flex:none; padding-left:40px; font-size:.6rem; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--gold); font-weight:700; }
.topbar-rail { flex:1; overflow:hidden; white-space:nowrap;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 3%, #000 92%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 3%, #000 92%, transparent); }
.topbar-track { display:inline-block; animation:topbarRun 48s linear infinite; }
.topbar:hover .topbar-track { animation-play-state:paused; }
.topbar-track a { display:inline-flex; align-items:center; gap:9px; padding:0 26px;
  font-size:.72rem; color:#8a8a93; text-decoration:none; }
.topbar-track a:hover { color:#fff; }
.topbar-track b { color:var(--gold-bright); font-weight:700; font-size:.6rem;
  letter-spacing:1.5px; text-transform:uppercase; }
.topbar-track span { color:var(--gold); }
@keyframes topbarRun { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* Everything shifts down to clear it */
.nav { top:38px; }
.hero { padding-top:268px; }

/* ── Header contact block ─────────────────────────────────────────────── */
.nav-contact { display:flex; align-items:center; gap:15px; flex:0 0 auto; }
.nav-tel { display:flex; flex-direction:column; text-decoration:none; line-height:1.25; }
.nav-tel-l { font-size:.56rem; letter-spacing:2px; text-transform:uppercase; color:#52525b; }
.nav-tel-n { font-size:.82rem; font-weight:800; color:#fff; white-space:nowrap; }
.nav-tel:hover .nav-tel-n { color:var(--gold-bright); }

@media (max-width:1180px) { .nav-links { gap:20px; } .nav-links a { font-size:.7rem; } }
@media (max-width:1024px) { .nav-tel { display:none; } }
@media (max-width:900px)  {
  .topbar-label { padding-left:22px; }
  .hero { padding-top:180px; }
}

/* ── The wall ─────────────────────────────────────────────────────────────
   Framed work hung on a dark wall, drifting at different speeds as you
   scroll. The headline sits over the top of it, so the whole thing reads as
   one depth-stacked scene rather than a row of cards. */
.wall { position:relative; padding:150px 0 190px; overflow:hidden;
  background:#060608; border-top:1px solid var(--line); }

/* Wall texture — two soft pools of light plus a fine grain */
.wall-tex { position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 22% 18%, rgba(201,162,39,.055), transparent 60%),
    radial-gradient(ellipse 60% 55% at 82% 76%, rgba(255,255,255,.035), transparent 62%),
    repeating-linear-gradient(102deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px);
}

.wall-head { position:relative; z-index:3; text-align:center; margin-bottom:-40px; }
.wall-title { font-size:clamp(2.2rem, 7.4vw, 6.2rem); font-weight:900; line-height:.98;
  letter-spacing:-3px; color:#fff; margin-bottom:34px;
  text-shadow:0 18px 60px rgba(0,0,0,.85); }
.wall-title .hit { font-family:'Yellowtail','Snell Roundhand',cursive; font-weight:400;
  font-size:1.26em; line-height:.8; letter-spacing:0; color:var(--gold-bright);
  display:inline-block; transform:rotate(-3deg) translateY(.05em);
  text-shadow:0 0 46px rgba(255,234,121,.3); }
.wall-cta { display:inline-block; background:var(--gold-bright); color:#000;
  text-decoration:none; padding:16px 34px; border-radius:4px;
  font-size:.76rem; letter-spacing:2px; text-transform:uppercase; font-weight:800;
  box-shadow:0 14px 40px rgba(0,0,0,.6);
  transition:transform .35s cubic-bezier(.16,1,.3,1), background .25s; }
.wall-cta:hover { background:#fff; transform:translateY(-3px); }

.wall-frames { position:relative; z-index:1; max-width:1240px; margin:0 auto;
  padding:0 40px; min-height:clamp(420px, 52vw, 640px); }

.frame { position:absolute; margin:0; will-change:transform; }
.frame-inner {
  position:relative; overflow:hidden; background:#0b0b0e;
  border:11px solid transparent;
  border-image:linear-gradient(150deg,#2f2f36,#111114 45%,#26262d) 1;
  box-shadow:0 34px 70px rgba(0,0,0,.72), inset 0 0 0 1px rgba(0,0,0,.85);
}
.frame-inner::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(122deg, rgba(255,255,255,.07) 0%, transparent 34%); }
.frame img, .frame video { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.frame-b img { object-fit:contain; background:#000; }
.frame figcaption { margin-top:13px; font-size:.58rem; letter-spacing:2px;
  text-transform:uppercase; color:#4a4a52; text-align:center; }

/* Hung at different heights and angles, the way a real wall looks */
.frame-a { left:2%;  top:34%;  width:23%; transform:rotate(-1.6deg); }
.frame-a .frame-inner { aspect-ratio:16/10; }
.frame-b { left:29%; top:6%;   width:15%; transform:rotate(1.1deg); }
.frame-b .frame-inner { aspect-ratio:9/16; }
.frame-c { left:48%; top:42%;  width:21%; transform:rotate(-0.8deg); }
.frame-c .frame-inner { aspect-ratio:4/3; }
.frame-d { left:74%; top:14%;  width:24%; transform:rotate(1.7deg); }
.frame-d .frame-inner { aspect-ratio:4/3; }

@media (max-width:900px) {
  .wall { padding:100px 0 120px; }
  .wall-head { margin-bottom:34px; }
  .wall-frames { min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .frame { position:static; width:auto !important; transform:none !important; }
}
@media (prefers-reduced-motion: reduce) { .frame { transform:none !important; } }

/* ── Stacking, settled ────────────────────────────────────────────────────
   The modal must sit above the topbar (65), nav (60), deck (55), welcome
   bubble (70) and cookie bar (120). One place, one order, no surprises. */
.app-portal-modal { z-index:300 !important; }
.curtain { z-index:9999; }

/* ── Quote engine, in page ────────────────────────────────────────────── */
.q-grid { display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:start; }
.q-build { display:flex; flex-direction:column; gap:26px; }
.q-hide { display:none !important; }

.q-lbl { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#52525b;
  font-weight:700; margin-bottom:.6rem; display:block; }

.q-field select, .q-field textarea, .q-promo-row input {
  width:100%; background:#09090b; border:1px solid var(--line); color:#fff;
  border-radius:6px; padding:.85rem 1rem; font-family:inherit; font-size:.95rem;
  transition:border-color .25s, background .25s;
}
.q-field select:focus, .q-field textarea:focus, .q-promo-row input:focus {
  outline:none; border-color:var(--gold); background:#0e0e12;
}
.q-field select { appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#6b6b74 50%),linear-gradient(135deg,#6b6b74 50%,transparent 50%);
  background-position:calc(100% - 19px) center, calc(100% - 14px) center;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.q-field select option { background:#09090b; }
.q-field textarea { resize:vertical; }

/* Mode switch */
.q-mode { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-bottom:22px; border-bottom:1px solid var(--line); }
.q-mode-lbl { font-size:.84rem; font-weight:700; color:#fff; transition:color .25s; }
.q-mode-lbl.q-dim { color:#52525b; font-weight:500; }
.q-mode-hint { flex-basis:100%; font-size:.76rem; color:#6b6b74; }
.q-switch { position:relative; width:52px; height:28px; flex:none; }
.q-switch input { position:absolute; opacity:0; width:0; height:0; }
.q-slider { position:absolute; inset:0; background:#27272a; border-radius:999px; cursor:pointer; transition:background .3s; }
.q-slider::before { content:''; position:absolute; width:20px; height:20px; left:4px; top:4px;
  background:#fff; border-radius:50%; transition:transform .3s; }
.q-switch input:checked + .q-slider { background:var(--gold); }
.q-switch input:checked + .q-slider::before { transform:translateX(24px); }

.q-stock { display:inline-block; margin-top:12px; font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; border:1px solid var(--line); border-radius:999px; padding:.35rem .8rem; }
.q-stock.q-in  { color:#4ade80; border-color:rgba(74,222,128,.35); }
.q-stock.q-out { color:#fb923c; border-color:rgba(251,146,60,.35); }

.q-check { display:flex; gap:12px; align-items:flex-start; cursor:pointer; }
.q-check input { margin-top:4px; width:16px; height:16px; accent-color:var(--gold); flex:none; }
.q-check strong { display:block; font-size:.9rem; color:#fff; }
.q-check em { display:block; font-style:normal; font-size:.78rem; color:#6b6b74; margin-top:5px; line-height:1.6; }
.q-check b { display:block; font-size:.75rem; color:var(--gold-bright); margin-top:5px; }

.q-assets { border:1px solid var(--line); border-radius:10px; padding:22px 24px; }
.q-assets ul { list-style:none; margin:0; padding:0; }
.q-assets li { font-size:.88rem; color:#c4c4cc; padding-left:18px; position:relative; margin-bottom:9px; line-height:1.6; }
.q-assets li::before { content:'●'; position:absolute; left:0; color:var(--gold); font-size:.6rem; top:.35em; }

/* Panel */
.q-panel { position:sticky; top:130px; border:1px solid var(--line); border-radius:14px;
  padding:28px 26px; background:#08080b; }
.q-list { display:flex; align-items:baseline; gap:11px; margin-bottom:5px; }
.q-list s { font-size:1.05rem; color:#52525b; }
.q-cut { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800;
  padding:.25rem .55rem; border-radius:4px; background:rgba(74,222,128,.14); color:#4ade80; }
.q-range { font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:900; letter-spacing:-1.5px;
  line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.q-note { font-size:.72rem; color:#6b6b74; margin-top:9px; line-height:1.5; }

.q-saved { margin-top:18px; padding:14px 16px; border-radius:10px;
  background:linear-gradient(100deg, rgba(74,222,128,.13), rgba(74,222,128,.03));
  border:1px solid rgba(74,222,128,.28); }
.q-saved-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.q-saved-top span { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:#4ade80; }
.q-saved-top strong { font-size:1.3rem; font-weight:900; color:#4ade80; font-variant-numeric:tabular-nums; }
.q-saved ul { list-style:none; margin:9px 0 0; padding:0; }
.q-saved li { display:flex; justify-content:space-between; gap:12px; font-size:.76rem; color:#9a9aa3; margin-top:5px; }
.q-saved li b { color:#4ade80; font-weight:700; }

.q-custom strong { display:block; font-size:1.05rem; font-weight:900; color:var(--gold-bright); line-height:1.25; }
.q-custom p { font-size:.86rem; color:#9a9aa3; margin-top:9px; line-height:1.65; }

.q-rows { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.q-row { display:flex; justify-content:space-between; gap:16px; font-size:.85rem; margin-bottom:8px; }
.q-row span { color:#6b6b74; }
.q-row b { color:#fff; font-weight:600; }

.q-arrival { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.q-arrival-date { font-size:1.05rem; font-weight:800; color:var(--gold-bright); }
.q-arrival-note { font-size:.72rem; color:#6b6b74; margin-top:5px; }

.q-promo { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.q-promo-row { display:flex; gap:8px; }
.q-promo-row input { font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; }
.q-promo-row input.q-ok-input  { border-color:#4ade80; }
.q-promo-row input.q-bad-input { border-color:#f87171; }
.q-promo-row button { flex:none; border-radius:6px; padding:0 18px; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:#c4c4cc;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  transition:border-color .25s, color .25s; }
.q-promo-row button:hover { border-color:var(--gold-bright); color:var(--gold-bright); }
.q-promo-status { font-size:.74rem; margin-top:9px; min-height:1.1em; line-height:1.5; }
.q-promo-status.q-ok  { color:#4ade80; }
.q-promo-status.q-bad { color:#f87171; }

.q-send { width:100%; margin-top:22px; border:0; border-radius:999px; cursor:pointer;
  padding:15px; background:var(--gold-bright); color:#000;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
  transition:transform .3s cubic-bezier(.16,1,.3,1), background .25s; }
.q-send:hover { background:#fff; transform:translateY(-2px); }
.q-ghost { width:100%; margin-top:9px; border-radius:999px; cursor:pointer; padding:13px;
  background:transparent; border:1px solid var(--line); color:#c4c4cc;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  transition:border-color .25s, color .25s; }
.q-ghost:hover { border-color:#fff; color:#fff; }
.q-fine { font-size:.66rem; color:#4a4a52; line-height:1.65; margin-top:16px; }

@media (max-width:960px) {
  .q-grid { grid-template-columns:1fr; gap:34px; }
  .q-panel { position:static; }
}

/* ── Deposit ──────────────────────────────────────────────────────────── */
.q-deposit { margin-top:20px; padding:16px 18px; border-radius:10px;
  background:rgba(201,162,39,.07); border:1px solid rgba(201,162,39,.3); }
.q-deposit-amt { font-size:1.5rem; font-weight:900; color:var(--gold-bright);
  letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.q-deposit-note { font-size:.74rem; color:#9a9aa3; margin-top:7px; line-height:1.6; }

/* ── Financing ────────────────────────────────────────────────────────── */
.q-finance { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.q-fin-rows { display:flex; flex-direction:column; gap:9px; }
.q-fin-row { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.q-fin-row b { font-size:1.15rem; font-weight:900; color:#fff; font-variant-numeric:tabular-nums; }
.q-fin-row span { font-size:.74rem; color:#6b6b74; text-align:right; }
.q-fin-brands { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.q-fin-brands span { font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:#8a8a93; border:1px solid var(--line); border-radius:999px; padding:.3rem .65rem; }
.q-fin-note { font-size:.68rem; color:#4a4a52; line-height:1.65; margin-top:12px; }


/* ── Design pass, Aug 17 2026 ──────────────────────────────────────────── */

/* The 01-08 markers are the first thing to go when the bar gets tight —
   losing them is cheaper than losing the phone number. */
@media (max-width:1400px) { .nav-links .n { display:none; } .nav-links { gap:19px; } }
@media (max-width:1260px) { .nav-links { gap:15px; } .nav-links a { font-size:.68rem; } }

/* Where a real logo loaded, the wordmark under it is saying the same thing
   twice. JS hides it only on success, so a 404 still leaves a readable name. */
.work-logo img { max-height:46px; width:auto; }
.work-copy .work-logo + .work-name.dupe { display:none; }

/* Metallic gold for the things that were reading as mustard. */
.eyebrow, .sec-label .n, .work-n, .div-n {
  background:linear-gradient(100deg,#e9cf7d 0%,var(--gold) 45%,#b8922a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1 em, h2 em {
  background:linear-gradient(100deg,#fbeec2 0%,#f0d074 40%,var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}


/* ══════════════════════════════════════════════════════════════════════════
   GOLD SYSTEM — Aug 17 2026
   The problem was never the hue, it was the role. --gold-bright was doing
   duty as a solid button fill, and a pale cream as a flat fill can only read
   as yellow. Metal reads as metal because it has a light edge, a body and a
   shadow side. So: gradients on fills, gradient text on accents, and every
   glow retuned from lemon to gold.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --gold-fill:  linear-gradient(135deg, #f7e6b0 0%, #e3c25f 22%, #d4af37 52%, #b58f27 78%, #8f6f18 100%);
  --gold-fill-hi: linear-gradient(135deg, #fff6da 0%, #f0d67f 24%, #e0bd4a 54%, #c79c2e 80%, #a5801f 100%);
  --gold-edge:  0 1px 0 rgba(255,248,220,.45) inset, 0 -1px 0 rgba(0,0,0,.30) inset;
  --gold-glow:  0 0 40px rgba(212,175,55,.30);
}

/* ── Anything that was a flat pale fill is now struck metal ─────────────── */
.wall-cta, .cf-send, .cb-solid, .q-submit, .q-send,
.topbar-track b.pill, .action-node:hover {
  background: var(--gold-fill) !important;
  color: #140f02 !important;
  border-color: #b58f27 !important;
  box-shadow: var(--gold-edge), 0 14px 40px rgba(0,0,0,.55) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.22);
}
.wall-cta:hover, .cf-send:hover, .cb-solid:hover, .q-submit:hover, .q-send:hover {
  background: var(--gold-fill-hi) !important;
  color: #140f02 !important;
  transform: translateY(-3px);
}

/* ── Accent text: gradient, so it catches a highlight like metal does ───── */
h1 em, h2 em, .wall-title .hit, .q-deposit-amt, .q-arrival-date, .q-custom strong {
  background: linear-gradient(100deg, #fdf3d4 0%, #f0d074 26%, #d4af37 62%, #a8811f 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
}

/* The lemon glow was doing most of the damage. Gold, and softer. */
.wall-title .hit { text-shadow: none !important; filter: drop-shadow(0 0 26px rgba(212,175,55,.34)); }
.motto-hit, .hero-hit { text-shadow: none !important; filter: drop-shadow(0 0 30px rgba(212,175,55,.32)); }


/* ══════════════════════════════════════════════════════════════════════════
   DEVICE STAGE — Aug 18 2026
   The bezel, the glass highlight and the tilt are baked into the WebP. CSS
   only has to place them, throw a shadow, and light them from behind. Two
   devices per product: the hero screen forward-left, a second angled behind
   it. Kills the old frame divs, the iframes and the aspect-ratio hacks.
   ══════════════════════════════════════════════════════════════════════════ */

.work-shot.stage {
  position: relative;
  overflow: visible;
  background: transparent;
  min-height: clamp(380px, 40vw, 600px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 0;
}

/* Brand bloom. Half of why the reference reads so well is the glow, not the
   hardware — tinted per product via the inline --glow on the element. */
.work-shot.stage::before {
  content: ''; position: absolute; inset: 4% -2% 8%;
  background:
    radial-gradient(ellipse 56% 52% at 50% 48%,
      rgba(var(--glow), .32) 0%, rgba(var(--glow), .11) 44%, transparent 72%),
    radial-gradient(ellipse 32% 28% at 64% 26%, rgba(255,255,255,.06) 0%, transparent 66%);
  filter: blur(24px);
  z-index: 0; pointer-events: none;
}

/* Reset everything the old .work-shot img rules imposed. */
.work-shot.stage .dev {
  position: relative; inset: auto;
  width: auto; height: auto; max-height: none;
  object-fit: contain; padding: 0; background: none;
  display: block; z-index: 1;
  filter:
    drop-shadow(0 30px 48px rgba(0,0,0,.62))
    drop-shadow(0 8px 16px rgba(0,0,0,.55))
    drop-shadow(0 0 34px rgba(var(--glow), .20));
  transition: transform 1.05s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}

/* Side by side in flow, then pulled across each other so they overlap.
   Stays responsive — no absolute positioning to re-tune at every breakpoint. */
.work-shot.stage .dev-back  { width: 40%; opacity: .95; z-index: 1; transform: translateX(30%)  translateY(-6%); }
.work-shot.stage .dev-front { width: 45%;               z-index: 2; transform: translateX(-20%) translateY(5%); }

.work-row:hover .stage .dev-back  { transform: translateX(34%)  translateY(-10%); }
.work-row:hover .stage .dev-front { transform: translateX(-23%) translateY(2%); }

@media (max-width: 960px) {
  .work-shot.stage { min-height: 420px; padding: 26px 0; }
  .work-shot.stage .dev-back  { width: 38%; transform: translateX(26%)  translateY(-5%); }
  .work-shot.stage .dev-front { width: 43%; transform: translateX(-18%) translateY(4%); }
}
@media (max-width: 560px) {
  .work-shot.stage { min-height: 340px; }
  .work-shot.stage .dev-back  { width: 40%; }
  .work-shot.stage .dev-front { width: 46%; }
}

@media (prefers-reduced-motion: reduce) {
  .work-shot.stage .dev { transition: none; }
  .work-row:hover .stage .dev-back,
  .work-row:hover .stage .dev-front { transform: none; }
  .work-shot.stage .dev-back  { transform: translateX(30%)  translateY(-6%); }
  .work-shot.stage .dev-front { transform: translateX(-20%) translateY(5%); }
}


/* A landscape device — one machine, no overlap, wider stage. */
.work-shot.stage.wide { min-height: clamp(300px, 30vw, 460px); }
.work-shot.stage.wide::before { inset: 8% -6% 4%; }
.work-shot.stage .dev-solo {
  width: 100%; max-width: 640px; z-index: 2;
  transform: translateY(2%);
  filter:
    drop-shadow(0 34px 52px rgba(0,0,0,.66))
    drop-shadow(0 10px 20px rgba(0,0,0,.5))
    drop-shadow(0 0 38px rgba(var(--glow), .18));
}
.work-row:hover .stage .dev-solo { transform: translateY(-1%) scale(1.015); }
@media (prefers-reduced-motion: reduce) {
  .work-row:hover .stage .dev-solo { transform: translateY(2%); }
}
@media (max-width: 960px) { .work-shot.stage.wide { min-height: 260px; } }


/* ══════════════════════════════════════════════════════════════════════════
   DESIGN GALLERY — Aug 18 2026
   The Work section is all software. This is the other half of the shop, and
   the site had no evidence of it at all. Twelve-column grid with deliberate
   spans rather than masonry — a designer's portfolio should be composed, not
   packed by an algorithm.
   ══════════════════════════════════════════════════════════════════════════ */

#design { padding: 120px 0 130px; border-top: 1px solid var(--line); }
#design h2 { margin: 14px 0 12px; }
.dz-intro { color: #8d8d97; font-size: .95rem; line-height: 1.65; max-width: 62ch; margin: 0 0 52px; }

.dz-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.2vw, 30px); align-items: start;
}

.dz-tile { margin: 0; }
/* 12 | 6+6 | 4+4+4 — every row fills, and each shape is close enough to its
   source ratio that nothing important gets cropped away. */
.t-wide       { grid-column: span 12; }
.t-half       { grid-column: span 6;  }
.t-third      { grid-column: span 4;  }
.t-third-tall { grid-column: span 4;  }

/* The frame carries the aspect ratio so the grid stays even no matter what
   shape the source art is. */
.dz-frame {
  position: relative; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--line); background: #0c0c0f;
  transition: transform .7s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .45s;
}
.t-wide       .dz-frame { aspect-ratio: 27/10; }  /* native 2.71:1 — no crop */
.t-half       .dz-frame { aspect-ratio: 3/2;   }
.t-third      .dz-frame { aspect-ratio: 1/1;   }
.t-third-tall .dz-frame { aspect-ratio: 2/3;   }  /* the cover stands taller on purpose */

.dz-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}

/* A logo supplied on transparency carries its own light plate. Sat on the
   black tile it reads as a grey box, so give it a proper light field —
   which is how you'd present a mark anyway. */
.dz-tile.plate .dz-frame { background: #f4f4f2; }
.dz-tile.plate .dz-frame img { object-fit: contain; padding: 9%; }

.dz-tile:hover .dz-frame {
  transform: translateY(-4px);
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 26px 54px rgba(0,0,0,.6), 0 0 0 1px rgba(212,175,55,.16);
}
.dz-tile:hover .dz-frame img { transform: scale(1.035); }

.dz-tile figcaption { padding: 14px 2px 0; }
.dz-tile figcaption b {
  display: block; font-size: .74rem; font-weight: 800; letter-spacing: 1.3px;
  text-transform: uppercase; color: #d8d8de;
}
.dz-tile figcaption span {
  display: block; font-size: .62rem; letter-spacing: 2.2px; text-transform: uppercase;
  color: #7a7a86; margin-top: 4px;
}

@media (max-width: 900px) {
  #design { padding: 84px 0 90px; }
  .t-half, .t-third { grid-column: span 6; }
}
@media (max-width: 560px) {
  .dz-grid { grid-template-columns: 1fr; }
  .t-wide, .t-half, .t-third, .t-third-tall { grid-column: 1 / -1; }
  .t-wide .dz-frame { aspect-ratio: 16/9; }
  .t-third-tall .dz-frame { aspect-ratio: 2/3; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-frame, .dz-frame img { transition: none; }
  .dz-tile:hover .dz-frame { transform: none; }
  .dz-tile:hover .dz-frame img { transform: none; }
}


/* ── BACKGROUND FOOTAGE — Aug 18 2026 ──────────────────────────────────────
   The particle clip was abstract, so grayscale at 10% read as texture. This
   one is the Rixx City mark on a wall — desaturated to a tenth it would just
   be noise, and nobody would ever know whose logo it was. Keep the colour,
   lift it enough to register, keep it far enough back that the type still
   wins. It is warm amber against a black page, which is the same family as
   the gold, so it sits down rather than fighting.
   ────────────────────────────────────────────────────────────────────────── */
.smoke video {
  opacity: .17;
  filter: contrast(1.06) brightness(.72) saturate(1.05);
}
.smoke-alt video {
  opacity: .11;
  filter: contrast(1.02) brightness(.6) saturate(.9) hue-rotate(-6deg);
}


/* ══════════════════════════════════════════════════════════════════════════
   BOOK SHELF — Aug 18 2026
   Four covers in the mixed grid would have swamped it — portraits are loud
   and they're a set, not one-offs. So they get their own row: identical
   width, identical ratio, lined up the way books actually sit. Sameness is
   the point; it's what makes them read as two series rather than four
   unrelated pictures.
   ══════════════════════════════════════════════════════════════════════════ */

.bk-head { margin: 84px 0 30px; }
.bk-head .sec-label { margin-bottom: 12px; }
.bk-head .dz-intro { margin-bottom: 0; }

/* The covers sit ON the design grid, not beside it — same twelve columns,
   same gutters. Three columns each puts four on a row at a size that reads
   as part of the set instead of dominating it. */
.bk-shelf {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.2vw, 30px); align-items: start;
}
.bk { margin: 0; grid-column: span 3; }

.bk-frame {
  position: relative; overflow: hidden; border-radius: 8px;
  aspect-ratio: 2/3;                       /* trade paperback, every one */
  background: #0c0c0f; border: 1px solid var(--line);
  /* A cover wants to sit on a shelf, so the shadow falls to one side and
     there's a hint of a spine down the left edge. */
  box-shadow: 0 22px 44px rgba(0,0,0,.6), -1px 0 0 rgba(255,255,255,.05) inset;
  transition: transform .7s cubic-bezier(.16,1,.3,1), box-shadow .45s, border-color .35s;
}
.bk-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; display: block;
}
.bk:hover .bk-frame {
  transform: translateY(-8px) rotate(-.6deg);
  border-color: rgba(212,175,55,.4);
  box-shadow: 0 34px 62px rgba(0,0,0,.7), 0 0 0 1px rgba(212,175,55,.14);
}

.bk figcaption { padding: 14px 2px 0; }
.bk figcaption b {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: #d8d8de;
}
.bk figcaption span {
  display: block; font-size: .62rem; letter-spacing: 1.4px;
  color: #7a7a86; margin-top: 4px; line-height: 1.45;
}

@media (max-width: 900px) { .bk { grid-column: span 6; } .bk-head { margin-top: 60px; } }
@media (max-width: 460px) { .bk-shelf { gap: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .bk-frame { transition: none; }
  .bk:hover .bk-frame { transform: none; }
}