/* ============================================================
   STAX SALES KIOSK — shared design system
   Target: 1920 × 1080 landscape touchscreen
   Brand: Midnight Blue / Slate / Cloud / Off-white / Coral
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Fraunces:ital,opsz,wght@1,144,500;1,144,600&display=swap');

:root {
  /* ---- brand palette ---- */
  --midnight:    #495867;
  --midnight-90: #495867e6;
  --midnight-60: #49586799;
  --midnight-40: #49586766;
  --midnight-15: #49586726;
  --midnight-08: #49586714;
  --slate:       #577399;
  --slate-40:    #57739966;
  --cloud:       #BDD5EA;
  --cloud-40:    #BDD5EA66;
  --cloud-20:    #BDD5EA33;
  --off-white:   #F7F7FF;
  --coral:       #FE5F55;
  --coral-15:    #FE5F5526;
  --unit-loc:    #7C93AD;        /* steel blue — matches the unit-location highlight in the renders */
  --ink:         #1c2630;
  --muted:       #6e7d8c;

  /* ---- semantic ---- */
  --bg:          var(--off-white);
  --surface:     #ffffff;
  --fg:          var(--ink);
  --accent:      var(--coral);

  /* unit status colors */
  --available:   var(--cloud);
  --selected:    var(--coral);
  --reserved:    #d4b896;        /* warm taupe — held */
  --sold:        var(--midnight);

  /* ---- type ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif; /* Flawsome stand-in for wordmark */
  --font-headline: 'Montserrat', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* ---- rhythm ---- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --hairline:  1px solid var(--midnight-15);
  --hairline-strong: 1px solid var(--midnight-40);
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--fg);
  background: var(--bg);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* kiosk: no scrollbars on the page */
  cursor: default;
  user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* ============================================================
   Touch hardening — the kiosk runs on a touchscreen, no mouse.
   Kill tap-highlight flashes, double-tap zoom, and rubber-band
   overscroll; keep text selection inside form fields only.
   ============================================================ */
* { -webkit-tap-highlight-color: transparent; }
html, body { overscroll-behavior: none; }
a, button, [role="button"], input, select, textarea, label, summary {
  touch-action: manipulation;
}
input, textarea { user-select: text; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-headline); font-weight: 500; color: var(--midnight); letter-spacing: -0.01em; }

/* ============================================================
   Kiosk frame — fixed 1920×1080, scaled to fit any viewport
   Bulletproof pattern: stage anchored top-left, scaled from top-left,
   then absolutely positioned via JS-computed left/top offsets.
   ============================================================ */
.kiosk {
  position: fixed;
  inset: 0;
  background: #0d141a;
  overflow: hidden;
}
.kiosk-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  /* JS sets: transform: scale(N); top: Ypx; left: Xpx; */
  background: var(--bg);
  overflow: hidden;
}

/* ============================================================
   App shell — top bar + main + bottom nav
   ============================================================ */
.shell {
  display: grid;
  grid-template-rows: 88px 1fr 96px;
  height: 100%;
}

/* ---- top bar ---- */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 56px;
  border-bottom: var(--hairline);
  background: var(--surface);
}
.wordmark {
  display: flex; align-items: center; gap: 16px;
  text-decoration: none;
  color: var(--midnight);
  /* hover affordance — tap to return home */
  transition: opacity 0.15s;
}
@media (hover: hover) { .wordmark:hover { opacity: 0.7; } }
.wordmark:active { opacity: 0.7; }
.wordmark .mark-img {
  height: 52px;
  width: auto;
  display: block;
}
/* full-colour brand lockup variant — the PNG already includes the
   S monogram + STAX wordmark + STACKED TOWNHOMES tagline in brand
   colours, so we don't draw a divider rule or sub-text alongside it. */
.wordmark--full {
  gap: 0;
}
.wordmark--full .mark-img {
  height: 64px;
}
.wordmark .lockup-rule {
  width: 1px;
  height: 32px;
  background: var(--midnight-15);
  display: block;
}
.wordmark .lockup-sub {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}
.wordmark .lockup-sub b {
  display: block;
  font-weight: 500;
  color: var(--midnight);
  font-size: 12px;
  letter-spacing: 0.22em;
}
.topbar-center {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--midnight-60);
}
.topbar-right {
  justify-self: end;
  display: flex; align-items: center; gap: 24px;
  font-size: 13px; color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.live-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral);
  animation: pulse 2s ease-in-out infinite;
  margin-right: 8px;
  vertical-align: middle;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

/* ---- main ---- */
.main {
  position: relative;
  overflow: hidden;
}

/* ---- bottom nav ---- */
.bottomnav {
  display: flex;
  align-items: stretch;
  border-top: var(--hairline);
  background: var(--surface);
}
.navbtn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--midnight-60);
  border-right: var(--hairline);
  transition: background 0.15s, color 0.15s;
  min-height: 88px;
}
.navbtn:last-child { border-right: 0; }
@media (hover: hover) { .navbtn:hover { background: var(--midnight-08); color: var(--midnight); } }
.navbtn:focus-visible { background: var(--midnight-08); color: var(--midnight); }
.navbtn:active { background: var(--midnight-15); color: var(--midnight); }
.navbtn[aria-current="page"] {
  color: var(--midnight);
  background: var(--cloud-20);
  position: relative;
}
.navbtn[aria-current="page"]::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 3px;
  background: var(--coral);
}
.navbtn-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 11px;
  color: var(--midnight-40);
  letter-spacing: 0;
}
.navbtn[aria-current="page"] .navbtn-num { color: var(--coral); }
.navbtn svg { width: 22px; height: 22px; }

/* ============================================================
   Reusable components
   ============================================================ */

/* kicker — Flawsome italic substitute */
.kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--coral);
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.display {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 88px;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--midnight);
}
.h1 { font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; }
.h2 { font-size: 36px; line-height: 1.1;  letter-spacing: -0.015em; }
.h3 { font-size: 24px; line-height: 1.2;  font-weight: 500; }

.lede {
  font-size: 22px;
  line-height: 1.45;
  color: var(--midnight-90);
  font-weight: 300;
  max-width: 60ch;
}

.tabular { font-variant-numeric: tabular-nums; }

/* primary CTA */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 22px 36px;
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--midnight);
  color: var(--off-white);
  border-radius: var(--radius);
  min-height: 64px;
  transition: transform 0.12s ease-out, background 0.15s;
}
.btn:active { transform: scale(0.98); background: var(--ink); }
@media (hover: hover) { .btn:hover { background: var(--ink); } }
.btn--coral { background: var(--coral); }
@media (hover: hover) { .btn--coral:hover { background: #e54a40; } }
.btn--coral:active { background: #e54a40; }
/* reserve = RESERVED legend colour (site plan); sold = SOLD legend red */
.btn--reserve { background: #d4b896; color: #1c2630; }
@media (hover: hover) { .btn--reserve:hover { background: #c9a87f; } }
.btn--reserve:active { background: #c9a87f; }
.btn--sold { background: #C0392B; color: #fff; }
@media (hover: hover) { .btn--sold:hover { background: #a93226; } }
.btn--sold:active { background: #a93226; }
.btn--ghost {
  background: transparent;
  color: var(--midnight);
  border: 1px solid var(--midnight-40);
}
@media (hover: hover) { .btn--ghost:hover { background: var(--midnight-08); } }
.btn--ghost:active { background: var(--midnight-08); }

.btn .arrow { width: 18px; height: 18px; transition: transform 0.15s; }
@media (hover: hover) { .btn:hover .arrow { transform: translateX(4px); } }

/* legend chip */
.swatch {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--midnight-90);
}
.swatch::before {
  content: '';
  width: 18px; height: 18px;
  border-radius: 3px;
  background: var(--bg-color, #ccc);
  border: 1px solid var(--midnight-15);
}

/* attract-loop fade */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   PAGE TRANSITIONS — shared curtain + content enter
   The curtain is a midnight panel that drops on departure and
   lifts on arrival. Below it the main content fades + lifts up
   to feel like a real scene change rather than a hard cut.
   ============================================================ */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: var(--midnight);
  transform: translateY(100%);
  will-change: transform;
}
.curtain::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--coral);
  box-shadow: 0 0 24px rgba(254,95,85,0.7);
}
.curtain::after {
  /* Real white-knockout Stax lockup, large and centered.
     This is the brand moment between every page transition. */
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../mp464jqo-Artboard-2-copy-4_150x.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 420px auto;
  opacity: 0.18;
  /* fallback for older browsers that can't load the image */
  filter: brightness(1.2);
}
.curtain.lift {
  animation: curtainLift 0.9s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.curtain.drop {
  animation: curtainDrop 0.65s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes curtainLift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
@keyframes curtainDrop {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

/* Content entrance — staggered fade-up choreography on every
   subscreen. The curtain lifts above this, so the scene assembles
   itself underneath as the curtain peels off.

   Strategy: target the natural structural children of each screen
   layout (left rail / main stage / right rail) and stagger their
   fade-up with progressive delays. Then within each panel, give
   small interior elements (headings, list rows, buttons, table
   rows) their own micro-stagger so the screen reads as composed
   rather than appearing as a single block. */

/* base scene fade — kept very light so it's just a wash, the real
   movement is in the child elements below */
.main {
  animation: sceneFade 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes sceneFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Tier 1: structural panels (left rail / stage / right rail)
        fade up with a progressive ~80ms stagger ---- */
.fp-layout > *,
.siteplan-layout > *,
.gallery-layout > *,
.avail-layout > *,
.cmp-layout > *,
.fn-layout > *,
.nb-layout > * {
  animation: panelEnter 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Per-layout child stagger */
.fp-layout       > *:nth-child(1),
.siteplan-layout > *:nth-child(1),
.gallery-layout  > *:nth-child(1),
.avail-layout    > *:nth-child(1),
.cmp-layout      > *:nth-child(1),
.fn-layout       > *:nth-child(1),
.nb-layout       > *:nth-child(1) { animation-delay: 0.20s; }

.fp-layout       > *:nth-child(2),
.siteplan-layout > *:nth-child(2),
.gallery-layout  > *:nth-child(2),
.avail-layout    > *:nth-child(2),
.cmp-layout      > *:nth-child(2),
.fn-layout       > *:nth-child(2),
.nb-layout       > *:nth-child(2) { animation-delay: 0.30s; }

.fp-layout       > *:nth-child(3),
.siteplan-layout > *:nth-child(3),
.gallery-layout  > *:nth-child(3),
.avail-layout    > *:nth-child(3),
.cmp-layout      > *:nth-child(3),
.fn-layout       > *:nth-child(3),
.nb-layout       > *:nth-child(3) { animation-delay: 0.40s; }

@keyframes panelEnter {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Tier 2: hero canvases get a quiet scale-in + de-blur ----
   Applies to the big visual element on each screen: the floorplan
   SVG canvas, the site-plan image, the gallery hero, the finishes
   preview stage, the neighbourhood map. Subtle — 1.03 → 1.0 over
   1.2s. We target the CONTAINER not the SVG so screen-specific
   inner animations (e.g. finishes swap) still play normally. */
.fp-canvas,
.plan-canvas,
.gallery-main .hero-render,
.map-stage > svg,
.preview-stage {
  animation: canvasReveal 1.1s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  transform-origin: center;
}
@keyframes canvasReveal {
  from {
    opacity: 0;
    transform: scale(1.035);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* ---- Tier 3: interior micro-stagger ----
   Inside each panel, small repeated elements (type buttons, spec
   rows, swatches, etc.) get a quick stagger so panels read as
   composed not pasted. Delays start AFTER the panel has entered. */

/* type buttons on floorplans, palette cards on finishes,
   filter chips on gallery, pills on availability, POI rows
   on neighbourhood */
.type-btn,
.palette-card,
.filter-chip,
.pill,
.poi {
  animation: itemEnter 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 0.55s;
}
.type-btn:nth-child(1),
.palette-card:nth-child(1),
.filter-chip:nth-child(1),
.poi:nth-child(1) { animation-delay: 0.55s; }
.type-btn:nth-child(2),
.palette-card:nth-child(2),
.filter-chip:nth-child(2),
.poi:nth-child(2) { animation-delay: 0.62s; }
.type-btn:nth-child(3),
.palette-card:nth-child(3),
.filter-chip:nth-child(3),
.poi:nth-child(3) { animation-delay: 0.69s; }
.type-btn:nth-child(4),
.palette-card:nth-child(4),
.filter-chip:nth-child(4),
.poi:nth-child(4) { animation-delay: 0.76s; }
.type-btn:nth-child(5),
.palette-card:nth-child(5),
.filter-chip:nth-child(5),
.poi:nth-child(5) { animation-delay: 0.83s; }
.type-btn:nth-child(6),
.palette-card:nth-child(6),
.filter-chip:nth-child(6),
.poi:nth-child(6) { animation-delay: 0.90s; }
.type-btn:nth-child(7),
.filter-chip:nth-child(7),
.poi:nth-child(7) { animation-delay: 0.97s; }
.type-btn:nth-child(8),
.filter-chip:nth-child(8),
.poi:nth-child(8) { animation-delay: 1.04s; }
.poi:nth-child(9)  { animation-delay: 1.11s; }
.poi:nth-child(10) { animation-delay: 1.18s; }
.poi:nth-child(11) { animation-delay: 1.25s; }
.poi:nth-child(12) { animation-delay: 1.32s; }

/* pills (filter bar on availability) stagger horizontally */
.pill:nth-child(1) { animation-delay: 0.50s; }
.pill:nth-child(2) { animation-delay: 0.55s; }
.pill:nth-child(3) { animation-delay: 0.60s; }
.pill:nth-child(4) { animation-delay: 0.65s; }
.pill:nth-child(5) { animation-delay: 0.70s; }
.pill:nth-child(6) { animation-delay: 0.75s; }
.pill:nth-child(7) { animation-delay: 0.80s; }
.pill:nth-child(8) { animation-delay: 0.85s; }

/* spec rows (right-rail data on floorplans, site-plan) */
.spec-row {
  animation: itemEnter 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 0.7s;
}
.spec-row:nth-child(2) { animation-delay: 0.74s; }
.spec-row:nth-child(3) { animation-delay: 0.78s; }
.spec-row:nth-child(4) { animation-delay: 0.82s; }
.spec-row:nth-child(5) { animation-delay: 0.86s; }
.spec-row:nth-child(6) { animation-delay: 0.90s; }
.spec-row:nth-child(7) { animation-delay: 0.94s; }
.spec-row:nth-child(8) { animation-delay: 0.98s; }
.spec-row:nth-child(9) { animation-delay: 1.02s; }
.spec-row:nth-child(10) { animation-delay: 1.06s; }

/* headings inside panels get a quick lift */
.fp-header,
.fp-types .kicker,
.fp-types h2,
.fp-specs .kicker,
.fp-specs h3,
.fp-specs .sub {
  animation: itemEnter 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.fp-types .kicker  { animation-delay: 0.40s; }
.fp-types h2       { animation-delay: 0.48s; }
.fp-header         { animation-delay: 0.55s; }
.fp-specs .kicker  { animation-delay: 0.50s; }
.fp-specs h3       { animation-delay: 0.56s; }
.fp-specs .sub     { animation-delay: 0.62s; }

@keyframes itemEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- coral-thread micro-flourish ----
   On every screen, draw a 2px coral hairline across the top of the
   main content area for 0.6s as the scene composes. Vanishes after.
   This echoes the coral seam on the attract and gives every page
   transition a tiny shared signature. */
.main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--coral);
  z-index: 5;
  pointer-events: none;
  animation: coralThread 1.4s 0.15s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  box-shadow: 0 0 14px rgba(254, 95, 85, 0.55);
}
@keyframes coralThread {
  0%   { width: 0;    opacity: 0; }
  20%  { width: 0;    opacity: 1; }
  70%  { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

/* reduced-motion: short fade, no transform/scale gymnastics */
@media (prefers-reduced-motion: reduce) {
  .main,
  .topbar,
  .bottomnav,
  .fp-layout > *, .siteplan-layout > *, .gallery-layout > *,
  .avail-layout > *, .cmp-layout > *, .fn-layout > *, .nb-layout > *,
  .type-btn, .spec-row, .palette-card, .filter-chip, .pill, .poi,
  .fp-canvas, .plan-canvas, .gallery-main .hero-render,
  .map-stage > svg, .preview-stage,
  .fp-header, .fp-types .kicker, .fp-types h2,
  .fp-specs .kicker, .fp-specs h3, .fp-specs .sub {
    animation: sceneFade 0.3s ease-out both !important;
    animation-delay: 0s !important;
  }
  .main::before { display: none; }
}

/* topbar slides down from above; bottom nav slides up.
   Gives the chrome a deliberate set-the-stage moment. */
.topbar {
  animation: barDown 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.bottomnav {
  animation: barUp 0.7s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes barDown {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes barUp {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* nav button hover/press refinements with smooth coral underline */
.navbtn {
  position: relative;
  overflow: hidden;
}
.navbtn::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 0; height: 3px;
  background: var(--coral);
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (hover: hover) { .navbtn:hover::after { width: 76%; } }
.navbtn:active::after,
.navbtn:focus-visible::after {
  width: 76%;
}
.navbtn[aria-current="page"]::after {
  width: 76%;
}
/* the older ::before underline is now redundant — neutralize it */
.navbtn[aria-current="page"]::before {
  display: none;
}

/* small util */
.row    { display: flex; align-items: center; }
.col    { display: flex; flex-direction: column; }
.gap-sm { gap: 12px; }
.gap-md { gap: 24px; }
.gap-lg { gap: 40px; }
.tac    { text-align: center; }

/* ============================================================
   BRAND PRESENCE — every page carries Stax beyond the topbar:
     (1) faint S-monogram watermark behind the page background
     (2) Stax brand cell at the right end of the bottom nav
     (3) .brand-watermark element for dark panels (knockout S)
   ============================================================ */

/* (1) Faint background watermark — sits OUTSIDE any content. Lives
   on body so it's behind every layered surface. Tiled at huge size
   for a quiet textile effect; opacity dialed way down. */
body.has-brand-bg .kiosk-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../mp464jqp-Artboard-2-copy-2_150x.png');
  background-repeat: no-repeat;
  background-position: 92% 50%;
  background-size: 720px auto;
  opacity: 0.025;
  pointer-events: none;
  z-index: 0;
}
/* Ensure shell renders above the watermark */
.kiosk-stage > .shell { position: relative; z-index: 1; }

/* (2) Stax brand cell at the right edge of the bottom nav.
   Behaves like a nav button (same height, right border-less) but
   shows the wordmark + "tap to start over" hint. Sits above any
   .brand-seal styles so it never collides. */
.nav-brand {
  flex: 0 0 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 20px;
  text-decoration: none;
  color: var(--midnight);
  background: var(--midnight-08);
  border-left: var(--hairline);
  transition: background 0.15s;
  min-height: 88px;
  position: relative;
}
@media (hover: hover) { .nav-brand:hover { background: var(--midnight-15); } }
.nav-brand:active { background: var(--midnight-40); }
.nav-brand img {
  height: 36px;
  width: auto;
  display: block;
}
.nav-brand span {
  font-family: var(--font-headline);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
  display: block;
}
.nav-brand span b {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--midnight);
  margin-bottom: 2px;
}
/* a thin coral accent rule above the brand cell to mark it as
   distinct from the 7 module buttons */
.nav-brand::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 2px;
  background: var(--coral);
  opacity: 0.6;
}

/* (3) White-knockout S watermark for dark panels.
   Drop a .brand-watermark element inside any dark surface and it
   sits in the corner with the white-knockout S at low opacity. */
.brand-watermark {
  position: absolute;
  right: 24px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  background-image: url('../mp464jqp-Artboard-2-copy-2_150x.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: brightness(0) invert(1);
  opacity: 0.22;
  pointer-events: none;
}
.brand-watermark.lg {
  width: 84px;
  height: 84px;
  opacity: 0.18;
}

/* ============================================================
   Idle overlay (attract-loop reset cue)
   ============================================================ */
.idle-cue {
  position: absolute; inset: auto 0 96px 0;
  display: flex; justify-content: center;
  pointer-events: none;
}
.idle-cue-inner {
  background: var(--midnight);
  color: var(--off-white);
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 14px;
}
.idle-cue-inner::before {
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--coral);
  animation: pulse 1.4s ease-in-out infinite;
}

/* tappable hint */
.tap-hint {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--coral);
}

/* ============================================================
   SHARED CAPTURE MODAL (js/reserve-modal.js)
   One reserve / mark-sold flow used by availability + site-plan,
   so a hold or sale recorded on any screen propagates everywhere.
   Namespaced `sx-` so it never collides with a screen's own styles.
   ============================================================ */
.sx-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(28, 38, 48, 0.78);
  backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center;
  padding: 40px;
  animation: sxFade 0.22s ease-out;
}
.sx-modal.is-open { display: flex; }
@keyframes sxFade { from { opacity: 0; } to { opacity: 1; } }
.sx-card {
  width: 100%; max-width: 720px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.4);
  animation: sxScale 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes sxScale {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.sx-head { padding: 28px 32px 22px; background: var(--midnight); color: var(--off-white); position: relative; }
.sx-head .kicker { color: var(--coral); display: block; margin-bottom: 6px; }
.sx-head h3 {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 34px; color: #fff; letter-spacing: -0.02em; line-height: 1;
}
.sx-head .sx-sub { margin-top: 8px; font-family: var(--font-headline); font-size: 13px; color: var(--cloud); letter-spacing: 0.02em; }
.sx-head .sx-sub .price { color: var(--coral); font-weight: 600; margin-left: 8px; }
.sx-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(255,255,255,0.32);
  color: #fff; display: grid; place-items: center; font-size: 22px; cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
@media (hover: hover) { .sx-close:hover { background: var(--coral); border-color: var(--coral); transform: rotate(90deg); } }
.sx-close:active { background: var(--coral); border-color: var(--coral); }
.sx-body { padding: 24px 32px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.sx-body .row.full { grid-column: 1 / -1; }
.sx-label {
  display: block; font-family: var(--font-headline); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px; font-weight: 500;
}
.sx-label .req { color: var(--coral); margin-left: 3px; }
.sx-input {
  width: 100%; padding: 12px 14px; box-sizing: border-box;
  border: 1px solid var(--midnight-15); border-radius: var(--radius-sm);
  background: var(--off-white); font-family: var(--font-headline);
  font-size: 15px; color: var(--midnight);
  transition: border-color 0.15s, background 0.15s;
}
.sx-input:focus { outline: none; border-color: var(--coral); background: #fff; }
.sx-input::placeholder { color: var(--midnight-40); }
textarea.sx-input { resize: vertical; min-height: 64px; }
.sx-foot {
  padding: 18px 32px 24px; border-top: var(--hairline);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--midnight-08);
}
.sx-foot .hint { font-family: var(--font-headline); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; max-width: 36ch; line-height: 1.5; }
.sx-foot .hint b { color: var(--midnight); font-weight: 500; }
.sx-foot .btn-row { display: flex; gap: 10px; }
.sx-success { display: none; padding: 36px 32px 32px; text-align: center; }
.sx-success.is-on { display: block; }
.sx-success .check {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--coral); color: #fff; display: grid; place-items: center;
  margin: 0 auto 18px; font-family: var(--font-display); font-style: italic; font-size: 32px;
  box-shadow: 0 8px 24px -4px rgba(254, 95, 85, 0.5);
}
.sx-success.is-sold .check { background: #C0392B; box-shadow: 0 8px 24px -4px rgba(192,57,43,0.5); }
.sx-success h4 {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 28px; color: var(--midnight); letter-spacing: -0.015em; margin-bottom: 8px;
}
.sx-success .lede { font-family: var(--font-headline); font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 44ch; margin: 0 auto 22px; }
.sx-success .summary {
  background: var(--off-white); border: var(--hairline); border-radius: var(--radius);
  padding: 16px 20px; text-align: left; margin-bottom: 22px;
  font-family: var(--font-headline); font-size: 13px; color: var(--midnight);
}
.sx-success .summary .row { display: flex; justify-content: space-between; padding: 5px 0; gap: 16px; }
.sx-success .summary .row .k { color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; white-space: nowrap; }
.sx-success .summary .row .v { font-weight: 500; text-align: right; }

/* shared toast */
.sx-toast {
  position: fixed; bottom: 120px; right: 32px; z-index: 1100;
  background: var(--midnight); color: #fff; padding: 14px 20px;
  border-radius: var(--radius); font-family: var(--font-headline);
  font-size: 13px; letter-spacing: 0.02em;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.4);
  display: flex; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s; pointer-events: none;
}
.sx-toast.is-on { opacity: 1; transform: translateY(0); }
.sx-toast::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 0 6px rgba(254, 95, 85, 0.25);
}