/* ── tokens ─────────────────────────────────────────────── */
:root {
  --bg:        #ECE7DD;          /* warm bone */
  --bg-deep:   #E1DBCE;          /* slightly deeper, for spec strip */
  --fg:        #16140F;          /* near-black, warm */
  --mute:      rgba(22,20,15,0.52);
  --quiet:     rgba(22,20,15,0.34);
  --line:      rgba(22,20,15,0.14);
  --accent:    #B84617;          /* burnt rust — only the CTA */
  --accent-hi: #D8552A;
  --soon:      #2F9E5B;          /* forthcoming availability (use in lieu of red) */
  --easing:    cubic-bezier(.2,.7,.2,1);
}
html.theme-graphite {
  --bg:        #15151A;
  --bg-deep:   #1B1B22;
  --fg:        #ECE9E2;
  --mute:      rgba(236,233,226,0.55);
  --quiet:     rgba(236,233,226,0.32);
  --line:      rgba(236,233,226,0.16);
  --accent:    #E2643A;
  --accent-hi: #F0794D;
}
html.theme-linen {
  --bg:        #F4F1E9;
  --bg-deep:   #EBE6DA;
  --fg:        #1B1A14;
  --accent:    #1B1A14;
  --accent-hi: #2C2A20;
}

/* ── reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background .5s var(--easing), color .5s var(--easing);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.mono {
  font-family: 'Geist Mono', ui-monospace, "JetBrains Mono", monospace;
  font-feature-settings: "tnum","ss01";
}

/* ── top nav — frosted glass ─────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(236,231,221,0.62);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav .brand { display: flex; align-items: center; gap: 10px; }
.nav .brand .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 2.6s var(--easing) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184,70,23,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(184,70,23,0); }
}
.nav .brand b { font-weight: 600; letter-spacing: 0.18em; }
.nav .brand span { color: var(--mute); }

.nav .right { display: flex; align-items: center; gap: 18px; }
.nav .right .status { color: var(--mute); }

/* ── top product photography ─────────────────────────────── */
.photo-top {
  position: relative;
  min-height: auto;
  padding: 58px max(28px, calc((100vw - 1480px) / 2 + 28px)) 22px;
  display: grid;
  grid-template-columns: minmax(0, 1480px);
  justify-content: center;
  gap: clamp(8px, 1.2vw, 18px);
  align-items: start;
  border-bottom: 0;
  background:
    radial-gradient(ellipse at 78% 42%, rgba(216,85,42,0.12), transparent 38%),
    radial-gradient(ellipse at 58% 68%, rgba(22,20,15,0.06), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
  overflow: hidden;
}
.photo-top::before {
  content: "";
  position: absolute;
  inset: 8% -12% -10% 38%;
  z-index: 0;
  background:
    radial-gradient(circle at 45% 28%, rgba(216,85,42,0.18), transparent 28%),
    radial-gradient(circle at 72% 66%, rgba(22,20,15,0.14), transparent 34%);
  filter: blur(36px);
  opacity: 0.85;
  pointer-events: none;
}
.photo-top > * { position: relative; z-index: 1; }
.photo-copy {
  align-self: start;
  max-width: 1280px;
  padding: 0;
}
.photo-copy .mono {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--mute);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.photo-copy h1 {
  margin: 0;
  font-size: clamp(72px, 9.2vw, 170px);
  line-height: 0.90;
  letter-spacing: -0.055em;
  font-weight: 500;
}
.photo-copy p {
  max-width: none;
  width: 100%;
  margin: 18px 0 0;
  color: var(--mute);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.42;
  white-space: nowrap;
}
.hero-banner-photo {
  margin: -22px 0 0;
  position: relative;
  justify-self: stretch;
  width: 100%;
  min-height: clamp(620px, 70vw, 1040px);
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.hero-banner-photo img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: contain;
  object-position: center;
  padding: 0;
}

.top-cta-wrap {
  padding: 24px max(28px, calc((100vw - 1480px) / 2 + 28px)) 10px;
  border-bottom: 0;
}
.top-cta-fixed {
  display: none;
}
.top-cta-fixed.is-pinned {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: linear-gradient(180deg, rgba(236,231,221,0), rgba(236,231,221,0.92) 34%, rgba(236,231,221,0.98));
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  transition: transform 180ms ease, padding 180ms ease;
}
body.cta-pinned {
  padding-bottom: 92px;
}
.top-cta-wrap .hero-cta {
  width: 100%;
  margin: 0 auto;
  border-radius: 18px;
  border: 0;
  box-shadow: none;
}

/* ── hero stage ──────────────────────────────────────────── */
.stage {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto auto;
  padding: 76px 28px 32px;
  gap: 18px;
}

.eyebrow {
  display: flex; justify-content: space-between; align-items: flex-start;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}
.eyebrow .group { display: flex; flex-direction: column; gap: 6px; }
.eyebrow .group b { color: var(--fg); font-weight: 500; letter-spacing: 0.18em; }
.eyebrow .right { text-align: right; }

/* product viewport */
.product {
  position: relative;
  width: 100%;
  align-self: center;
  display: grid; place-items: center;
  user-select: none;
}
.product model-viewer {
  width: min(86vw, 1180px);
  aspect-ratio: 16/10;
  height: auto;
  max-height: 48vh;
  --poster-color: transparent;
  background: transparent;
  display: block;
}

/* faint floor shadow under the product */
.product::after {
  content: "";
  position: absolute; left: 50%; bottom: 6%;
  width: 52%; height: 28px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(22,20,15,0.18), rgba(22,20,15,0) 70%);
  filter: blur(2px);
  pointer-events: none;
}

/* corner crosshair brackets */
.crosshair { position: absolute; inset: 6% 4%; pointer-events: none; z-index: 1; }
.crosshair span {
  position: absolute; width: 14px; height: 14px;
  border-color: var(--quiet);
  border-style: solid; border-width: 0;
}
.crosshair span.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.crosshair span.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.crosshair span.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.crosshair span.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* "Glows in the Dark" neon callout — appears only when glow finish is active */
.glow-callout {
  position: absolute;
  top: 6%; left: 6%;
  z-index: 2;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #BCE9FF;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(91,224,255,0.65);
  background: rgba(7,15,30,0.55);
  box-shadow:
    0 0 14px rgba(91,224,255,0.55),
    0 0 28px rgba(91,224,255,0.25),
    inset 0 0 8px rgba(91,224,255,0.18);
  text-shadow: 0 0 6px rgba(91,224,255,0.85);
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  transition: opacity .5s var(--easing), transform .5s var(--easing);
  pointer-events: none;
}
body.glow-mode .glow-callout {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: glow-callout-flicker 4.5s ease-in-out infinite;
}
@keyframes glow-callout-flicker {
  0%, 100% {
    box-shadow:
      0 0 14px rgba(91,224,255,0.55),
      0 0 28px rgba(91,224,255,0.25),
      inset 0 0 8px rgba(91,224,255,0.18);
  }
  50% {
    box-shadow:
      0 0 22px rgba(91,224,255,0.85),
      0 0 44px rgba(91,224,255,0.40),
      inset 0 0 12px rgba(91,224,255,0.28);
  }
}

/* ── hero cluster: swatches + name + lede + CTA ──────────── */
.hero-cluster {
  width: min(720px, 92vw);
  margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* finish picker — color circle swatches */
.finish-picker {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.finish-dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.15),
    0 1px 2px rgba(22,20,15,0.18);
  position: relative;
  transition: transform .25s var(--easing), box-shadow .25s var(--easing);
}
.finish-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--fg);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity .25s var(--easing), transform .25s var(--easing);
}
.finish-dot:hover { transform: translateY(-1px); }
.finish-dot.active::after { opacity: 1; transform: scale(1); }
.finish-dot:focus-visible { outline: 0; }
.finish-dot:focus-visible::after { opacity: 1; transform: scale(1); }

/* future-availability state — communicates "coming soon," not "out of stock" */
.finish-dot.coming-soon { opacity: 0.65; cursor: not-allowed; }
.finish-dot.coming-soon::after {
  opacity: 1;
  transform: scale(1);
  border-color: var(--soon);
  border-style: dashed;
}
body.glow-mode .finish-dot.coming-soon::after {
  border-color: rgba(91,224,255,0.75);
}

.finish-name {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mute);
  min-height: 1.4em;
}
body.glow-mode .finish-name { color: rgba(188,233,255,0.85); }

.hero-cluster .lede {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mute);
  max-width: 52ch;
  margin: 2px 0 4px;
}
body.glow-mode .hero-cluster .lede { color: rgba(188,233,255,0.75); }

/* full-width hero CTA — price + disclaimer in one line */
.hero-cta {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  background: var(--fg);
  color: var(--bg);
  border-radius: 14px;
  transition: background .25s var(--easing), transform .25s var(--easing), box-shadow .25s var(--easing);
  box-shadow: 0 18px 50px -20px rgba(22,20,15,0.45);
  text-align: left;
}
.hero-cta:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 22px 60px -18px rgba(184,70,23,0.55);
}
.hero-cta .lhs { display: flex; flex-direction: column; gap: 3px; }
.hero-cta .lbl {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
}
.hero-cta .dis {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(236,231,221,0.62);
}
.hero-cta .no-break { white-space: nowrap; }
.hero-cta .px {
  display: flex; align-items: baseline; gap: 8px;
  white-space: nowrap;
}
.hero-cta .px-num {
  font-size: 24px; font-weight: 500;
  letter-spacing: -0.02em;
}
.hero-cta .px-sub {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236,231,221,0.55);
}
/* ── squared PNG product triptych ─────────────────────────── */
.png-triptych {
  max-width: 1760px;
  margin: 0 auto;
  padding: 4vh 28px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.png-triptych figure {
  margin: 0;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
  border: 0;
}
.png-triptych img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 0;
}
.stage {
  min-height: 88vh;
  padding-bottom: 16px;
}
.png-triptych {
  padding-top: 2vh;
}

/* ── statement headline ──────────────────────────────────── */
.statement {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: 6vh 28px;
  max-width: 1760px;
  margin: 0 auto;
  min-height: 60vh;
}
.statement-copy {
  flex: 0 1 42%;
}
.statement h1 {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: clamp(44px, 7.4vw, 132px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  margin: 0;
  text-wrap: balance;
}
.statement h1 em {
  font-family: 'Dancing Script', 'Apple Chancery', 'Segoe Script', cursive;
  font-style: normal;
  color: var(--mute);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.statement-photo {
  flex: 1 1 58%;
  margin: 0;
  max-height: 82vh;
  overflow: visible;
}
.statement-photo img {
  width: 100%;
  height: 100%;
  max-height: 82vh;
  display: block;
  object-fit: contain;
  object-position: center;
}

/* ── spec strip ──────────────────────────────────────────── */
.specs {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
  transition: background .5s var(--easing);
}
.specs-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 1760px; margin: 0 auto;
}
.specs-row .cell {
  padding: 28px 32px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.specs-row .cell:last-child { border-right: none; }
.specs-row .cell .k {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--quiet);
}
.specs-row .cell .v {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.specs-row .cell .v small {
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--mute);
  margin-top: 4px; letter-spacing: 0.04em;
}

/* ── reserve panel ───────────────────────────────────────── */
.reserve {
  padding: 8vh 28px 7vh;
  max-width: 1760px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(420px, 0.86fr) minmax(560px, 1.14fr);
  gap: clamp(28px, 3.5vw, 48px);
  align-items: stretch;
}

.reserve .left {
  display: flex;
  flex-direction: column;
  gap: clamp(42px, 4.5vw, 72px);
  min-height: 100%;
}
.reserve-photo {
  margin: auto 0 0;
  width: 100%;
  min-height: 340px;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.reserve-photo img {
  width: min(100%, 520px);
  max-height: min(50vh, 560px);
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 26px 34px rgba(22,20,15,0.18));
}

.reserve .left .ledger {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
  position: static;
  top: auto;
}
.reserve .left .ledger .row {
  display: grid; grid-template-columns: 14ch 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  align-items: baseline;
}
.reserve .left .ledger .row .k {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--quiet);
}
.reserve .left .ledger .row .v { color: var(--fg); }
.reserve .left .ledger .row .ix {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; color: var(--quiet);
}

/* the conversion card */
.reserve .right {
  position: relative;
  scroll-margin-top: 68px;
  background: var(--fg);
  color: var(--bg);
  border-radius: 22px;
  padding: 36px 36px 28px;
  overflow: hidden;
  transition: transform .5s var(--easing), box-shadow .5s var(--easing);
  box-shadow: 0 30px 80px -40px rgba(22,20,15,0.5);
}
.reserve .right::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 40%);
  pointer-events: none;
}
.reserve .right .badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(236,231,221,0.65);
}
.reserve .right .badge i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(184,70,23,0.18);
}
.reserve .right .price {
  margin-top: 18px;
  display: flex; align-items: baseline; gap: 12px;
}
.reserve .right .price .num {
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}
.reserve .right .price .sym { font-size: 26px; opacity: 0.7; }
.reserve .right .price .unit {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; color: rgba(236,231,221,0.6); letter-spacing: 0.14em;
  text-transform: uppercase; margin-left: 8px;
}
.reserve .right .lede {
  margin-top: 12px;
  color: rgba(236,231,221,0.7);
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 38ch;
}

/* the dominant CTA */
.reserve .right form {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reserve .right .field-grid {
  display: grid;
  gap: 12px;
}
.reserve .right .field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reserve .right label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  color: rgba(236,231,221,0.68);
}
.reserve .right label span {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236,231,221,0.48);
}
.reserve .right input,
.reserve .right select,
.reserve .right textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  outline: 0;
  color: var(--bg);
  font: inherit;
  font-size: 14px;
  padding: 13px 14px;
  border-radius: 12px;
  font-family: 'Geist', sans-serif;
}
.reserve .right select option { color: #16140F; }
.reserve .right textarea { min-height: 74px; resize: vertical; }
.reserve .right input::placeholder,
.reserve .right textarea::placeholder { color: rgba(236,231,221,0.34); }
.reserve .right button.cta {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  padding: 0 22px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .25s var(--easing), transform .35s var(--easing), opacity .25s var(--easing);
}
.reserve .right button.cta:hover { background: var(--accent-hi); }
.reserve .right button.cta:disabled { opacity: 0.62; cursor: wait; }
.reserve .right button.cta .arr { transition: transform .35s var(--easing); }
.reserve .right button.cta:hover .arr { transform: translateX(4px); }
.reserve .right .fineprint {
  margin-top: 14px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.08em;
  color: rgba(236,231,221,0.45);
  line-height: 1.5;
}

/* success state */
.reserve .right.success { background: var(--fg); }
.success-msg {
  display: none;
  align-items: center; gap: 14px;
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid rgba(216,85,42,0.4);
  background: rgba(216,85,42,0.10);
  border-radius: 14px;
  color: var(--bg);
  font-size: 14px;
}
.success-msg .check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  color: #fff; font-size: 12px;
}
.reserve .right.success .success-msg { display: flex; }
.reserve .right.success form { display: none; }
.error-msg {
  display: none;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.07);
  border-radius: 12px;
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
}
.error-msg.visible { display: block; }

/* ── admin dashboard ─────────────────────────────────────── */
.admin-page { background: var(--bg); color: var(--fg); }
.admin-shell { max-width: 1500px; margin: 0 auto; padding: 40px 24px 80px; }
.admin-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.admin-head h1 { margin: 8px 0 10px; font-size: clamp(42px, 7vw, 92px); line-height: 0.9; letter-spacing: -0.055em; font-weight: 500; }
.admin-head p { margin: 0; color: var(--mute); }
.admin-note { margin-top: 10px !important; color: var(--accent) !important; }
.admin-export, .admin-filters button, .admin-table button {
  border: 0; border-radius: 999px; background: var(--fg); color: var(--bg); padding: 12px 16px;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.metrics { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; margin: 24px 0; }
.metric { border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: rgba(255,255,255,0.14); }
.metric b { display: block; font-size: 26px; font-weight: 500; }
.metric span { display: block; margin-top: 5px; color: var(--mute); font-size: 13px; }
.metric.hero { background: var(--fg); color: var(--bg); }
.metric.hero span { color: rgba(236,231,221,0.65); }
.admin-filters { display: grid; grid-template-columns: 1fr 190px auto; gap: 12px; margin-bottom: 18px; }
.admin-filters input, .admin-filters select, .admin-table select {
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.22); color: var(--fg); padding: 12px 14px; font: inherit;
}
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,0.16); }
.admin-table { width: 100%; border-collapse: collapse; min-width: 1180px; }
.admin-table th, .admin-table td { text-align: left; vertical-align: top; padding: 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.admin-table th { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--quiet); }
.admin-table small { display: block; margin-top: 5px; color: var(--mute); line-height: 1.35; }
.admin-table form { display: flex; gap: 8px; align-items: center; }
.pill { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; color: var(--mute); }
.empty { color: var(--mute); text-align: center !important; padding: 40px !important; }

/* ── footer ─────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line);
  padding: 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute);
}
footer .links { display: flex; gap: 22px; }
footer .links a:hover { color: var(--fg); }

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav {
    max-width: 100vw;
    padding: 12px 16px;
    gap: 12px;
    overflow: hidden;
    font-size: 10px;
    letter-spacing: 0.10em;
  }
  .nav .brand { flex: 0 0 auto; gap: 8px; }
  .nav .brand b { letter-spacing: 0.14em; }
  .nav .right { min-width: 0; flex: 1 1 auto; justify-content: flex-end; overflow: hidden; }
  .nav .right .status {
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .photo-top {
    min-height: auto;
    padding: 58px 18px 19px;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .photo-copy { align-self: start; max-width: 100%; padding: 0; }
  .photo-copy h1 { font-size: clamp(40px, 11.6vw, 66px); line-height: 0.91; letter-spacing: -0.075em; }
  .photo-copy p { font-size: 16px; max-width: 38ch; white-space: normal; }
  .hero-banner-photo { justify-self: stretch; width: 100%; min-height: clamp(240px, 34vh, 368px); margin-top: -10px; }
  .hero-banner-photo img { object-position: center; padding: 0; }
  .top-cta-wrap { padding: 12px 14px 6px; }
  .top-cta-wrap .hero-cta { width: 100%; }
  .stage { padding: 68px 18px 6px; gap: 11px; min-height: auto; align-content: start; overflow: hidden; }
  .product model-viewer { max-height: 38vh; }
  .hero-cluster { width: 100%; max-width: 100%; gap: 10px; }
  .hero-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 14px; }
  .hero-cta .lbl { font-size: 14px; }
  .hero-cta .dis { font-size: 9px; letter-spacing: 0.085em; line-height: 1.25; }
  .hero-cta .px { justify-content: flex-end; }
  .hero-cta .px-num { font-size: 20px; }
  .png-triptych { padding: 0.5vh 8px 0; gap: 2px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .png-triptych figure { aspect-ratio: 1 / 1; }
  .png-triptych img { padding: 0; }
  .statement {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 4vh 18px;
    min-height: auto;
  }
  .statement-copy { flex: none; width: 100%; }
  .statement h1 { font-size: clamp(42px, 13vw, 68px); line-height: 0.98; }
  .statement-photo { flex: none; width: 100%; max-height: none; }
  .statement-photo img { max-height: none; width: 100%; height: auto; }
  .specs-row { grid-template-columns: repeat(2, 1fr); }
  .specs-row .cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .specs-row .cell:nth-child(2n) { border-right: none; }
  .reserve { grid-template-columns: 1fr; gap: 40px; }
  .reserve-photo { display: none; }
  .reserve .left .ledger { position: static; }
  .reserve .right .field-grid.two { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admin-head { flex-direction: column; }
  .admin-filters { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .nav .right .status {
    max-width: none;
    font-size: 0;
    letter-spacing: 0;
  }
  .nav .right .status::before {
    content: "Pre-order";
    font-size: 10px;
    letter-spacing: 0.10em;
  }
}

/* ── glow-in-the-dark blue finish: scoped dark-room mode ────
   Glow mode now only changes the 3D stage/model treatment so the rest of
   the website keeps the normal EXO visual tone. */

body.glow-mode {
  --glow:       #5BE0FF;
  --glow-deep:  #0F1B3A;
}
body.glow-mode .hero-cluster .lede {
  color: rgba(188,233,255,0.92);
  text-shadow: 0 0 12px rgba(91,224,255,0.62), 0 0 26px rgba(91,224,255,0.28);
}
body.glow-mode .stage {
  overflow: hidden;
  background:
    radial-gradient(ellipse 82% 66% at 50% 42%,
                    rgba(91, 224, 255, 0.18) 0%,
                    rgba(30, 58, 138, 0.11) 40%,
                    rgba(7, 8, 12, 0.02)   72%),
    linear-gradient(180deg, #050610 0%, #0A0B14 100%);
}
body.glow-mode .stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.96;
  background:
    radial-gradient(ellipse 16% 66% at 18% 54%, rgba(48,132,255,0.22) 0%, rgba(48,132,255,0.08) 38%, transparent 72%),
    radial-gradient(ellipse 18% 80% at 30% 48%, rgba(91,224,255,0.12) 0%, rgba(46,130,255,0.06) 42%, transparent 76%),
    radial-gradient(circle at 8% 18%, rgba(188,233,255,0.78) 0 0.9px, transparent 1.6px),
    radial-gradient(circle at 10% 31%, rgba(188,233,255,0.54) 0 0.7px, transparent 1.4px),
    radial-gradient(circle at 12% 26%, rgba(188,233,255,0.92) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 15% 58%, rgba(230,244,255,0.82) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 18% 48%, rgba(91,224,255,0.54) 0 0.9px, transparent 1.6px),
    radial-gradient(circle at 19% 64%, rgba(188,233,255,0.62) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 22% 68%, rgba(91,224,255,0.62) 0 1px, transparent 1.7px),
    radial-gradient(circle at 24% 24%, rgba(230,244,255,0.64) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 28% 32%, rgba(188,233,255,0.55) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 31% 54%, rgba(188,233,255,0.88) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 35% 18%, rgba(188,233,255,0.72) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 38% 44%, rgba(91,224,255,0.50) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 42% 84%, rgba(188,233,255,0.50) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 46% 28%, rgba(230,244,255,0.58) 0 0.7px, transparent 1.4px),
    radial-gradient(circle at 54% 76%, rgba(91,224,255,0.48) 0 1px, transparent 1.8px),
    radial-gradient(circle at 60% 14%, rgba(188,233,255,0.56) 0 0.9px, transparent 1.6px),
    radial-gradient(circle at 64% 58%, rgba(230,244,255,0.70) 0 0.9px, transparent 1.6px),
    radial-gradient(circle at 69% 22%, rgba(188,233,255,0.78) 0 1.3px, transparent 2px),
    radial-gradient(circle at 73% 47%, rgba(91,224,255,0.52) 0 0.9px, transparent 1.6px),
    radial-gradient(circle at 78% 63%, rgba(91,224,255,0.64) 0 1px, transparent 1.7px),
    radial-gradient(circle at 82% 72%, rgba(230,244,255,0.58) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 84% 12%, rgba(188,233,255,0.48) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 88% 34%, rgba(188,233,255,0.86) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 91% 56%, rgba(188,233,255,0.52) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 9% 82%, rgba(188,233,255,0.55) 0 0.9px, transparent 1.6px),
    radial-gradient(circle at 94% 78%, rgba(188,233,255,0.66) 0 1px, transparent 1.7px);
  filter: drop-shadow(0 0 7px rgba(91,224,255,0.50));
}
body.glow-mode .stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.68;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 700'%3E%3Cg fill='%23E6F4FF' opacity='.92'%3E%3Ccircle cx='132' cy='118' r='1.8'/%3E%3Ccircle cx='176' cy='96' r='1.2'/%3E%3Ccircle cx='226' cy='126' r='1.7'/%3E%3Ccircle cx='268' cy='98' r='1.3'/%3E%3Ccircle cx='316' cy='122' r='1.8'/%3E%3Ccircle cx='356' cy='92' r='1.1'/%3E%3Ccircle cx='414' cy='110' r='1.4'/%3E%3Ccircle cx='742' cy='120' r='1.3'/%3E%3Ccircle cx='778' cy='158' r='1.8'/%3E%3Ccircle cx='826' cy='142' r='1.2'/%3E%3Ccircle cx='866' cy='188' r='1.7'/%3E%3Ccircle cx='918' cy='206' r='1.3'/%3E%3Ccircle cx='954' cy='250' r='1.5'/%3E%3Ccircle cx='106' cy='518' r='1.4'/%3E%3Ccircle cx='156' cy='476' r='1.9'/%3E%3Ccircle cx='204' cy='500' r='1.2'/%3E%3Ccircle cx='250' cy='452' r='1.7'/%3E%3Ccircle cx='302' cy='470' r='1.3'/%3E%3Ccircle cx='470' cy='172' r='1.1'/%3E%3Ccircle cx='512' cy='216' r='1.5'/%3E%3Ccircle cx='566' cy='198' r='1.1'/%3E%3Ccircle cx='608' cy='242' r='1.4'/%3E%3Ccircle cx='646' cy='224' r='1.1'/%3E%3Ccircle cx='690' cy='268' r='1.3'/%3E%3Ccircle cx='520' cy='552' r='1.4'/%3E%3Ccircle cx='560' cy='512' r='1.1'/%3E%3Ccircle cx='604' cy='536' r='1.7'/%3E%3Ccircle cx='650' cy='498' r='1.2'/%3E%3Ccircle cx='704' cy='520' r='1.6'/%3E%3C/g%3E%3Cg fill='%235BE0FF' opacity='.55'%3E%3Ccircle cx='148' cy='142' r='1'/%3E%3Ccircle cx='190' cy='152' r='.8'/%3E%3Ccircle cx='286' cy='148' r='.9'/%3E%3Ccircle cx='332' cy='154' r='.8'/%3E%3Ccircle cx='768' cy='96' r='.8'/%3E%3Ccircle cx='810' cy='184' r='.9'/%3E%3Ccircle cx='890' cy='236' r='.8'/%3E%3Ccircle cx='132' cy='548' r='.9'/%3E%3Ccircle cx='232' cy='532' r='.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  filter: drop-shadow(0 0 8px rgba(91,224,255,0.55));
}
body.glow-mode .stage > * {
  position: relative;
  z-index: 1;
}
body.glow-mode .product::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 112%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center,
                rgba(91, 224, 255, 0.64) 0%,
                rgba(46, 130, 255, 0.30) 28%,
                rgba(20, 50, 130, 0.12)  52%,
                rgba(7, 8, 12, 0)        74%);
  filter: blur(38px);
  pointer-events: none;
  z-index: 0;
  animation: glow-pulse 4.2s ease-in-out infinite;
}
body.glow-mode .product { isolation: isolate; }
body.glow-mode .product model-viewer { position: relative; z-index: 1; }
body.glow-mode .product::after {
  background: radial-gradient(ellipse at center,
                rgba(91, 224, 255, 0.30),
                rgba(91, 224, 255, 0) 70%);
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.00); }
  50%      { opacity: 1.00; transform: translate(-50%, -50%) scale(1.04); }
}

body.glow-mode .eyebrow,
body.glow-mode .crosshair span { color: rgba(180, 220, 255, 0.65); border-color: rgba(91, 224, 255, 0.18); }
body.glow-mode .crosshair span { border-color: rgba(91, 224, 255, 0.35); }

/* glow dot in the hero picker */
.finish-dot.glow-dot {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 10px rgba(91, 224, 255, 0.55),
    0 0 22px rgba(91, 224, 255, 0.25);
}
body.glow-mode .finish-dot.glow-dot {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 14px rgba(91, 224, 255, 0.95),
    0 0 30px rgba(91, 224, 255, 0.55);
}