/* ==========================================================================
   Asian Bridal Fest UK — Design System
   Direction: Latte & Gold — matched to the Makhmal Edition brand assets
   Single palette. The block near the foot of this file overrides the
   structural rules above; that is where every colour decision lives.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  /* Noir — the dominant surface family */
  --noir-950: #060405;
  --noir-900: #0B0709;   /* page background */
  --noir-800: #120C0F;   /* alternating band */
  --noir-700: #1A1216;   /* cards, inputs */
  --noir-600: #241A1E;   /* raised / hover */
  --noir-500: #33262B;   /* borders on dark */

  /* Wine — supporting accent only, never a primary surface */
  --wine-900: #20060B;
  --wine-800: #3A0B12;
  --wine-700: #55131D;
  --wine-500: #7A1E2B;

  /* Gold — the brand signature */
  --gold-700: #8A6A1C;
  --gold-600: #B08A28;
  --gold-500: #D4A73C;   /* primary metallic */
  --gold-400: #E0BA5E;
  --gold-300: #EFD79A;   /* gold text on dark */
  --gold-200: #F6E9C4;

  /* Neutrals */
  --cream:      #F4EFE9;
  --cream-mute: #BCB0A8;
  --cream-dim:  #A6988F;
  --white: #ffffff;

  /* Semantic */
  --bg:         var(--noir-900);
  --bg-alt:     var(--noir-800);
  --surface:    var(--noir-700);
  --surface-up: var(--noir-600);
  --text:       var(--cream);
  --text-muted: var(--cream-mute);
  --text-dim:   var(--cream-dim);
  --accent:     var(--gold-500);
  --accent-txt: var(--gold-300);
  --line:       rgba(244, 239, 233, 0.10);
  --line-gold:  rgba(212, 167, 60, 0.34);
  --line-gold-strong: rgba(212, 167, 60, 0.62);

  /* Metallic gradient — used for display type and rules */
  --gold-sheen: linear-gradient(96deg, #A87F22 0%, #E7C570 22%, #F6E9C4 40%,
                                 #D4A73C 58%, #EFD79A 76%, #B08A28 100%);

  /* Type */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-script:  "Playfair Display", "Cormorant Garamond", serif;
  --font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
  --step-0:  clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.6rem, 1.4rem + 0.9vw, 2.2rem);
  --step-3:  clamp(2.1rem, 1.7rem + 1.9vw, 3.2rem);
  --step-4:  clamp(2.8rem, 2rem + 3.6vw, 5.2rem);

  /* Space & shape */
  --sp-1: 0.5rem;
  --sp-2: 0.875rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 7rem;
  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow:    0 6px 20px rgba(0, 0, 0, .55);
  --shadow-lg: 0 18px 60px rgba(0, 0, 0, .7);
  --glow-gold: 0 0 28px rgba(212, 167, 60, .28);
  --container: 1200px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text);
  background-color: var(--bg);
  /* Faint gold bokeh, as on the flyers */
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(240,215,154,.30), transparent 60%),
    radial-gradient(2px 2px at 78% 12%, rgba(212,167,60,.16), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 74%, rgba(240,215,154,.16), transparent 60%),
    radial-gradient(2px 2px at 28% 88%, rgba(212,167,60,.12), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gold-500); color: var(--noir-900); }

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--cream);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

/* Metallic gold display type — the flyer's signature move */
.gilt {
  background: var(--gold-sheen);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
.gilt { color: var(--gold-300); -webkit-text-fill-color: var(--gold-300); }
}


.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent-txt);
  display: flex;
  align-items: center;
  gap: .85rem;
}
.eyebrow::before {
  content: "";
  width: 2.25rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500));
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 2.25rem; height: 1px;
  background: linear-gradient(270deg, transparent, var(--gold-500));
  flex: none;
}

/* Boxed tagline — as under the logo on the flyer */
.tagbox {
  display: inline-block;
  border: 1px solid var(--line-gold-strong);
  padding: .55rem 1.4rem;
  font-size: var(--step--1);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.lede { font-size: var(--step-1); font-weight: 300; color: var(--text-muted); line-height: 1.65; }
.muted { color: var(--text-muted); }

/* Gold rule with centre diamond */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; color: var(--accent);
}
.ornament::before, .ornament::after {
  content: ""; height: 1px; width: 4rem;
  background: linear-gradient(90deg, transparent, var(--gold-500));
}
.ornament::after { background: linear-gradient(270deg, transparent, var(--gold-500)); }

/* --- Layout ------------------------------------------------------------- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2.5rem, 820px); margin-inline: auto; }
.section { padding-block: var(--sp-7); position: relative; }
.section--tight { padding-block: var(--sp-6); }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section--dark {
  background:
    radial-gradient(90% 120% at 85% 0%, rgba(122, 30, 43, .34), transparent 62%),
    radial-gradient(70% 90% at 5% 100%, rgba(212, 167, 60, .10), transparent 60%),
    var(--noir-950);
  border-block: 1px solid var(--line-gold);
}
.section-head { max-width: 62ch; display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 2rem;
  min-height: 48px;
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  color: var(--gold-300);
  border: 1px solid var(--line-gold-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease),
              color .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); border-color: var(--gold-400); box-shadow: var(--glow-gold); }
.btn:active { transform: translateY(0); }

/* Solid gold — the primary CTA, exactly the flyer's gold-on-black */
.btn--gold {
  background: linear-gradient(120deg, #C9992F, #E6C46C 45%, #D4A73C);
  color: var(--noir-900);
  border-color: var(--gold-400);
  font-weight: 500;
}
.btn--gold:hover {
  background: linear-gradient(120deg, #D9A93A, #F3DCA0 45%, #E0BA5E);
  color: var(--noir-950);
}
/* Outline on dark */
.btn--ghost { color: var(--cream); border-color: rgba(244,239,233,.32); }
.btn--ghost:hover { border-color: var(--gold-400); color: var(--gold-300); }
.btn--ghost-gold { color: var(--gold-300); border-color: var(--line-gold-strong); }
.btn--ghost-gold:hover { background: rgba(212,167,60,.12); }
.btn--lg { padding: 1.15rem 2.75rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--step--1); font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; color: var(--gold-300);
  border-bottom: 1px solid var(--line-gold);
  padding-bottom: .35rem;
  transition: gap .25s var(--ease), border-color .25s var(--ease);
}
.link-arrow:hover { gap: .9rem; border-color: var(--gold-400); }

/* --- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--gold-500); color: var(--noir-900);
  padding: .75rem 1.5rem;
  font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --- Header ------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(6, 4, 5, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-gold);
  color: var(--cream);
}
.header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  min-height: 88px;
}
.brand { flex: 0 1 auto; }
.header__actions { display: flex; align-items: center; gap: .625rem; }
.brand { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: inherit; }
/* Crest medallion, echoing the banner logo */
.brand__mark {
  width: 50px; height: 50px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: var(--gold-300);
  background: radial-gradient(circle, rgba(212,167,60,.12), transparent 70%);
}
.brand__mark::after {
  content: "";
  position: absolute; inset: 4px;
  border: 1px solid rgba(212, 167, 60, .38);
  border-radius: 50%;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.38rem;
  line-height: 1.05;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cream);
}
.brand__name b { font-weight: 500; color: var(--gold-300); }
.brand__sub {
  display: block;
  font-family: var(--font-body);
  font-size: .58rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-top: .3rem;
}
.nav { display: flex; align-items: center; gap: var(--sp-3); }
.nav a {
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-mute);
  padding: .5rem 0;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-300); border-color: var(--gold-500); }
.header__cta {
  padding: .7rem 1.15rem;
  min-height: 42px;
  letter-spacing: .12em;
  white-space: nowrap;
}
/* The header's ghost button is styled in the PALETTE block at the foot of
   this file — putting it here doesn't work, because the palette comes later
   at equal specificity and wins. */
.cta-short { display: none; }
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line-gold);
  border-radius: var(--radius-sm);
  color: var(--gold-300);
  width: 46px; height: 46px;
  cursor: pointer;
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(90vh, 860px);
  display: grid; align-items: center;
  background:
    radial-gradient(60% 70% at 72% 24%, rgba(212, 167, 60, .20), transparent 62%),
    radial-gradient(70% 80% at 4% 88%, rgba(85, 19, 29, .55), transparent 62%),
    linear-gradient(168deg, var(--noir-950) 0%, var(--noir-800) 48%, var(--noir-950) 100%);
  color: var(--cream);
  overflow: hidden;
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--line-gold);
}
/* Velvet drape suggestion at the edges + gold dust */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(94deg, rgba(85,19,29,.5) 0 14px, rgba(32,6,11,.5) 14px 30px);
  mask-image: linear-gradient(90deg, #000 0%, transparent 18%, transparent 82%, #000 100%);
  opacity: .55;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(240,215,154,.5), transparent 60%),
    radial-gradient(2px 2px at 66% 18%, rgba(212,167,60,.4), transparent 60%),
    radial-gradient(1px 1px at 40% 70%, rgba(246,233,196,.45), transparent 60%),
    radial-gradient(2px 2px at 84% 62%, rgba(212,167,60,.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 56%, rgba(240,215,154,.35), transparent 60%);
  pointer-events: none;
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; gap: var(--sp-5);
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
}
.hero__copy { display: grid; gap: var(--sp-3); max-width: 34ch; }
.hero h1 { line-height: 1.02; }
.hero h1 em {
  font-style: italic;
  font-family: var(--font-script);
  font-weight: 400;
  display: block;
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-gold);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

/* Hero visual — the flyer, then the badge and a photograph beneath it.
   These were absolutely positioned and overlapping; the photo covered the
   flyer's date and venue panel, so they're stacked in flow instead. */
.hero__visual {
  display: grid;
  gap: 1.1rem;
  max-width: 430px;
  margin-inline: auto;
}
.hero__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: center;
}
.frame {
  position: relative;
  border: 1px solid var(--line-gold-strong);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--noir-950);
}
.frame img { width: 100%; height: auto; display: block; }
/* Inner gold hairline, echoing the flyer's double-rule frames */
.frame::after {
  content: "";
  position: absolute; inset: 5px;
  border: 1px solid rgba(212, 167, 60, .28);
  border-radius: 3px;
  pointer-events: none;
}
/* Circular gold roundel — as on the flyer */
.frame__badge {
  width: 138px; height: 138px; flex: none; border-radius: 50%;
  /* Flex column rather than place-items, so the sub-line sits on its own
     baseline instead of drifting onto the border. */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .35rem; padding: 1.1rem;
  text-align: center;
  background: var(--noir-950);
  border: 2px solid var(--gold-500);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-size: 3rem; font-weight: 500; line-height: .9;
  box-shadow: var(--shadow-lg), inset 0 0 0 5px rgba(212,167,60,.2);
}
.frame__badge span {
  display: block; font-family: var(--font-body);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  line-height: 1;
  color: var(--gold-500);
}

/* Framed photograph — the gold double-hairline treatment from the hero,
   as a static block for use inside sections. Keeps the image's own aspect
   ratio so nothing crops. */
.plate {
  position: relative;
  border: 1px solid var(--line-gold-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.plate::after {
  content: "";
  position: absolute; inset: 5px;
  border: 1px solid rgba(212, 167, 60, .28);
  border-radius: 3px;
  pointer-events: none;
}
.plate img { width: 100%; height: auto; }
:root .plate::after { border-color: rgba(122, 90, 17, .3); }

/* A whole poster used as a link. Needs to be a block so the anchor wraps the
   figure rather than sitting on a text baseline, which would leave a few
   stray pixels of gap under the frame. Focus ring is inherited from the
   global :focus-visible rule — do not re-declare it here or the latte
   override at the foot of this file stops applying. */
.poster-link {
  display: block;
  text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.poster-link:hover { transform: translateY(-4px); }
.poster-link:hover .plate { box-shadow: var(--shadow); border-color: var(--gold-500); }

@media (prefers-reduced-motion: reduce) {
  .poster-link, .poster-link:hover { transition: none; transform: none; }
}

/* Image placeholders (swap for real photography) */
.ph {
  width: 100%; height: 100%;
  display: grid; place-items: center; text-align: center;
  padding: var(--sp-2);
  font-size: var(--step--1);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240, 215, 154, .55);
  background:
    radial-gradient(70% 70% at 30% 20%, rgba(212,167,60,.16), transparent 65%),
    linear-gradient(150deg, var(--noir-600), var(--noir-950));
}
.ph--wine {
  background:
    radial-gradient(70% 70% at 70% 20%, rgba(212,167,60,.18), transparent 65%),
    linear-gradient(150deg, var(--wine-700), var(--noir-950));
}
.ph--tall { aspect-ratio: 3 / 4; }
.ph--wide { aspect-ratio: 16 / 10; }
.ph--sq   { aspect-ratio: 1; }

/* --- Stat bar ----------------------------------------------------------- */
.statbar {
  background: linear-gradient(120deg, #C9992F, #E6C46C 42%, #D4A73C);
  color: var(--noir-900);
}
.statbar__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  text-align: center;
}
.statbar__item { padding: var(--sp-4) var(--sp-2); }
.statbar__item + .statbar__item { border-left: 1px solid rgba(11, 7, 9, .22); }
.statbar__num { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--noir-900); }
.statbar__label {
  font-size: var(--step--1); letter-spacing: .22em;
  text-transform: uppercase; margin-top: .5rem; opacity: .78;
}

/* --- Cards -------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-3); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--split { grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: center; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--line-gold-strong);
}
.card__body { padding: var(--sp-3); display: grid; gap: .55rem; }
.card__body h4 { color: var(--gold-200); }
.card__body p { color: var(--text-muted); font-size: .95rem; }

/* Photographic card header. 4:5 to suit runway portraits — a wide crop
   decapitates a full-length shot or shrinks it to nothing. Every rule here
   uses palette tokens rather than literal colours, so the latte block at the
   foot of this file recolours it without needing a :root duplicate. */
.card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-up);
  border-bottom: 1px solid var(--line-gold);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .card__media img { transition: none; }
  .card:hover .card__media img { transform: none; }
}

/* The categories with no photograph yet. Listed rather than dropped — these
   are real stand categories and leaving them out would understate the floor. */
.cat-more {
  margin-top: var(--sp-4);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
}
.cat-more__label {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim);
  margin-right: .25rem;
}
.chip {
  display: inline-block;
  padding: .35rem .7rem;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  background: var(--surface-up);
  font-size: .82rem;
  font-weight: 400;
  color: var(--gold-700);
  white-space: nowrap;
}

/* Category tile */
.tile {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line-gold);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.tile:hover { border-color: var(--gold-400); transform: translateY(-4px); }
.tile__label {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-4) var(--sp-2) var(--sp-3);
  background: linear-gradient(0deg, rgba(6,4,5,.96), rgba(6,4,5,.7) 55%, transparent);
  color: var(--gold-200);
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-align: center;
}

/* The Book a Stand hero is a dark band on an otherwise cream page, so its
   text is explicitly re-lightened. Anything added there needs the same. */
:root .page-hero h1 { color: var(--latte-50); }
:root .page-hero .lede { color: var(--latte-300); }
:root .page-hero .eyebrow { color: var(--gold-300); }
:root .page-hero .eyebrow::before { background: linear-gradient(90deg, transparent, var(--gold-400)); }
:root .page-hero .hero__meta { color: var(--gold-300); border-top-color: rgba(212,167,60,.34); }
:root .page-hero .btn--ghost-gold { color: var(--gold-200); border-color: var(--gold-400); background: rgba(212,167,60,.12); }
:root .page-hero .btn--ghost-gold:hover { background: rgba(212,167,60,.24); color: #FFF6E0; }
:root .page-hero .frame { background: var(--espresso-900); }

:root .section--dark .card {
  background: rgba(246, 235, 210, .06);
  border-color: rgba(212, 167, 60, .3);
}
:root .section--dark .card__body h4 { color: var(--gold-200); }
:root .section--dark .card__body p  { color: var(--latte-300); }

/* --- Brand lockup — a larger mark for use inside sections ---------------- */
.lockup { display: flex; align-items: center; gap: 1rem; }
.lockup__mark {
  width: 68px; height: 68px; flex: none;
  display: grid; place-items: center; position: relative;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.4rem; letter-spacing: .04em;
  color: var(--gold-700);
  background: radial-gradient(circle, rgba(212,167,60,.14), transparent 70%);
}
.lockup__mark::after {
  content: ""; position: absolute; inset: 5px;
  border: 1px solid rgba(176, 138, 40, .4);
  border-radius: 50%;
}
.lockup__name {
  font-family: var(--font-display);
  font-size: 1.6rem; line-height: 1.05;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--espresso-900);
}
.lockup__name b { font-weight: 500; color: var(--gold-700); }
.lockup__sub {
  display: block; font-family: var(--font-body);
  font-size: .62rem; letter-spacing: .38em; text-transform: uppercase;
  color: var(--gold-700); margin-top: .3rem;
}
@media (max-width: 560px) {
  .lockup__mark { width: 54px; height: 54px; font-size: 1.1rem; }
  .lockup__name { font-size: 1.25rem; }
}

/* --- Reels — looping runway video, no captions -------------------------- */
.reels { align-items: start; }
.reel {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--line-gold-strong);
  border-radius: var(--radius);
  background: var(--noir-950);
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.reel:hover { transform: translateY(-4px); border-color: var(--gold-400); box-shadow: var(--shadow-lg); }
/* Inner gold hairline, matching .frame and .plate */
.reel::after {
  content: "";
  position: absolute; inset: 5px;
  border: 1px solid rgba(212, 167, 60, .28);
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
}
.reel__video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: var(--noir-950);
}
/* Native controls only appear once the full clip is playing */
.reel__video::-webkit-media-controls { display: none; }
.reel.is-full .reel__video::-webkit-media-controls { display: flex; }

.reel__play {
  position: absolute; z-index: 3;
  right: 14px; bottom: 14px;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold-400);
  background: rgba(6, 4, 5, .68);
  backdrop-filter: blur(6px);
  color: var(--gold-200);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.reel__play svg { width: 22px; height: 22px; fill: currentColor; margin-left: 2px; }
.reel__play:hover {
  background: linear-gradient(120deg, #C9992F, #E6C46C 45%, #D4A73C);
  color: var(--noir-900);
  transform: scale(1.06);
}
.reel.is-full .reel__play { display: none; }

:root .reel__play { background: rgba(31, 21, 14, .72); }
:root .reel__play:hover {
  background: linear-gradient(120deg, #BE9430, #E2C271 45%, #C9A23C);
  color: var(--espresso-900);
}
:root .reel::after { border-color: rgba(122, 90, 17, .3); }

@media (max-width: 860px) {
/* Two up, then the third centred — better than three squeezed columns */
  .reels { grid-template-columns: repeat(2, 1fr); }
  .reels .reel:last-child { grid-column: 1 / -1; max-width: 60%; margin-inline: auto; }
}

@media (max-width: 560px) {
.reels { grid-template-columns: 1fr; }
  .reels .reel:last-child { grid-column: auto; max-width: none; }
}


/* --- Feature list ------------------------------------------------------- */
.features { display: grid; gap: var(--sp-3); }
.feature {
  display: grid; grid-template-columns: 46px 1fr; gap: var(--sp-2);
  align-items: start;
  padding-block: var(--sp-2);
  border-top: 1px solid var(--line-gold);
}
.feature__num {
  font-family: var(--font-display);
  font-size: 1.6rem; color: var(--gold-500);
  line-height: 1;
}
.feature h4 { margin-bottom: .25rem; color: var(--gold-200); }
.feature p { color: var(--text-muted); font-size: .95rem; }

/* --- Pricing ------------------------------------------------------------ */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); align-items: start; }
.price {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  display: grid; gap: var(--sp-2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.price:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-gold); }
.price--featured {
  border: 1px solid var(--gold-500);
  box-shadow: var(--shadow), var(--glow-gold);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(212,167,60,.14), transparent 60%),
    var(--noir-600);
}
.price__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(120deg, #C9992F, #E6C46C 45%, #D4A73C);
  color: var(--noir-900);
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500;
  padding: .42rem 1.1rem; border-radius: 100px; white-space: nowrap;
}
.price__name { font-family: var(--font-display); font-size: var(--step-2); color: var(--cream); }
.price__size { font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-500); }
.price__amount { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--gold-300); }
.price__amount small {
  font-family: var(--font-body); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-dim); display: block; margin-top: .5rem;
}
.price ul { list-style: none; padding: 0; display: grid; gap: .55rem; font-size: .94rem; color: var(--text-muted); }
.price li { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; }
.price li::before { content: "✦"; color: var(--gold-500); font-size: .8rem; line-height: 1.7; }
.price__foot { margin-top: var(--sp-1); }
.stock {
  font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim);
}
.stock--low { color: #E8A08F; }
.stock--out { color: var(--noir-500); }

/* --- Floor plan --------------------------------------------------------- */
.floorplan {
  background: var(--surface);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  padding: var(--sp-3);
}

/* Hover label for sold stands.
   .floorplan becomes the positioning context so the tip can be placed from
   the stand's bounding box. Red on white deliberately, not the site palette:
   "sold" needs to read as a stop signal, not as decoration. */
.floorplan { position: relative; }
.plan-tip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -100%);
  margin-top: -8px;
  padding: .28rem .6rem;
  border-radius: 4px;
  background: #55504A;          /* default; overridden per status below */
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;          /* never blocks the stand underneath */
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
/* Little arrow pointing down at the stand */
.plan-tip::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: inherit;    /* follows the pill colour via border-color */
}

/* One colour per status. All four are checked against white text at 5:1 or
   better — the label has to be readable over a busy plan, not just tinted. */
/* Only two, matching the only two states the plan shows. The 'held' and
   'blocked' variants that used to live here were unreachable. */
.plan-tip[data-status="available"] { background: #16693F; border-color: #16693F; }
.plan-tip[data-status="sold"]      { background: #B3261E; border-color: #B3261E; }
.plan-tip[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .plan-tip { transition: opacity .12s ease; }
}
.floorplan__legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
.legend-key { display: inline-flex; align-items: center; gap: .5rem; }
.swatch { width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--line); }

/* Honeypot — off-screen rather than display:none, which some bots skip */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Inline form errors, e.g. "that stand has just been taken" */
.form-error {
  margin-top: var(--sp-2);
  padding: .8rem 1rem;
  border: 1px solid #A6402F;
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: rgba(166, 64, 47, .1);
  color: #7C2C20;
  font-size: .92rem;
}
.btn.is-busy { opacity: .65; pointer-events: none; }

/* --- Chosen-stand panel on the booking form ----------------------------- */
.chosen {
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  background: var(--noir-800);
  padding: var(--sp-3);
}
.chosen[data-empty="true"] .chosen__detail { display: none; }
.chosen[data-empty="false"] .chosen__empty { display: none; }
.chosen[data-empty="false"] { border-color: var(--gold-500); background: var(--noir-600); }
.chosen__empty { color: var(--text-dim); font-size: .94rem; margin: 0; }
.chosen__empty a { color: var(--gold-300); }
.chosen__detail {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--sp-3); align-items: center;
}
.chosen__no {
  font-family: var(--font-display); font-size: 2.1rem; line-height: 1;
  color: var(--gold-200);
  border: 1px solid var(--line-gold-strong); border-radius: var(--radius-sm);
  padding: .5rem .9rem; min-width: 68px; text-align: center;
}
.chosen__zone { font-size: .94rem; color: var(--cream); }
.chosen__size { font-size: .84rem; color: var(--text-dim); }
.chosen__price { font-family: var(--font-display); font-size: var(--step-2); color: var(--gold-300); }


:root .chosen { background: var(--surface-up); }
:root .chosen[data-empty="false"] { background: var(--gold-wash); border-color: var(--gold-600); }
:root .chosen__no { color: var(--espresso-900); }
:root .chosen__zone { color: var(--espresso-800); }
:root .chosen__price { color: var(--gold-700); }
:root .chosen__empty a { color: var(--gold-700); }
@media (max-width: 560px) {
.chosen__detail { grid-template-columns: auto 1fr; }
  .chosen__price { grid-column: 1 / -1; }
}


/* Five pricing cards need a tighter grid than three */
.price-grid--five { grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.price-grid--five .price { padding: var(--sp-4) var(--sp-2) var(--sp-2); }
.price-grid--five .price__name { font-size: var(--step-1); }
.price-grid--five .price__amount { font-size: var(--step-2); }
.price-grid--five .price ul { font-size: .86rem; }
@media (max-width: 1200px) {
.price-grid--five { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
}

@media (max-width: 860px) {
.price-grid--five { grid-template-columns: 1fr; }
}


/* --- Floor plan: hall furniture ----------------------------------------- */
.plan-hall  { fill: var(--noir-950); stroke: var(--line-gold); stroke-width: 1.5; }
.plan-wall  { stroke: #6B563C; stroke-width: 7; stroke-linecap: square; }
/* Doors: hairline leaf + swing arc. Deliberately lighter and thinner than
   the walls — they are orientation, not structure, and at 7px they would
   compete with the stands for attention. */
.plan-door  { stroke: #8A7150; stroke-width: 2.5; stroke-linecap: round; }
.plan-door__sill { stroke: rgba(138, 113, 80, .5); stroke-width: 1.5; }
.plan-zone  { fill: rgba(212, 167, 60, .05); stroke: rgba(212, 167, 60, .22); }
.plan-ramp  { fill: var(--wine-700); }
.plan-ramp-grid { stroke: rgba(240, 215, 154, .18); stroke-width: 1; }
.plan-stage { fill: #2A1F14; stroke: var(--gold-600); }
.plan-stage--back { fill: #221A11; }
.plan-carpet { fill: #8E1B22; }
/* Entrance marker. Gold rather than wall-brown so it reads as wayfinding
   rather than as another piece of structure. */
.plan-entrance__arrow {
  fill: none; stroke: var(--gold-500); stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
}
.plan-entrance__label {
  font-family: var(--font-body); font-size: 24px; font-weight: 600;
  letter-spacing: .14em; fill: var(--gold-300);
}
.plan-seat  { fill: #2A2126; stroke: #4A3A2A; stroke-width: 1; }
.plan-rowtag { fill: none; stroke: rgba(212, 167, 60, .4); }
.plan-label {
  font-family: var(--font-body); font-size: 26px; font-weight: 500;
  letter-spacing: .12em; fill: var(--gold-300);
}
.plan-label--zone { font-size: 34px; letter-spacing: .16em; fill: rgba(240, 215, 154, .75); }
.plan-label--ramp { font-size: 34px; letter-spacing: .42em; fill: var(--gold-200); }
.plan-label--carpet { fill: #FFE9E9; font-weight: 500; }
.plan-label-xs {
  font-family: var(--font-body); font-size: 16px; font-weight: 500;
  letter-spacing: .1em; fill: var(--gold-300);
}

/* --- Floor plan: the stands -------------------------------------------- */
.stand-rect { fill: var(--noir-700); stroke: #5A4632; stroke-width: 1.5; }
.stand-no   { font-family: var(--font-body); font-size: 19px; font-weight: 500; fill: var(--gold-200); }
.stand-size { font-family: var(--font-body); font-size: 13px; fill: var(--cream-dim); }

.stand[data-zone="premium"]  .stand-rect { fill: #2E2415; stroke: var(--gold-600); }
.stand[data-zone="frontage"] .stand-rect { fill: #2A1A20; stroke: #7A4A55; }

/* Food-and-drink pitches (data-use="food" in the plan SVG).
   Qualified with [data-status="available"] on purpose. A food stand that
   sells has to look like every other sold stand — red, saying SOLD — and
   tying the green to 'available' means it cannot fight the sold rules below
   whichever order they end up in. Both rules are (0,3,1), so without this
   the winner would be decided by position in the file, which is how the
   wrong colour quietly wins. */
.stand[data-use="food"][data-status="available"] .stand-rect {
  fill: #1B3D28; stroke: #4E9C6B;
}
.stand[data-use="food"][data-status="available"] .stand-no   { fill: #CFE8D9; }
.stand[data-use="food"][data-status="available"] .stand-size { fill: #93BFA6; }
.swatch--food { background: #1B3D28; border-color: #4E9C6B; }

/* Sold stands.
   Loud on purpose. A sold stand used to be a slightly darker grey box, which
   read as "unlit" rather than "gone" — people were choosing them and getting
   an error at checkout. It is now solid red with the word SOLD in it, so the
   answer is legible at a glance and at a distance.

   #B3261E is the same red the hover tooltip already uses for sold, so the
   box and its label agree. White on it is 6.53:1 — AA at any size. */
.stand[data-status="sold"] .stand-rect {
  fill: #B3261E; stroke: #E0554C; stroke-width: 1.5; cursor: not-allowed;
}
.stand[data-status="sold"] .stand-no { fill: #FFFFFF; font-weight: 700; }

/* SOLD takes the place of the size line. The size of a stand you cannot book
   is not information anyone needs, and on the 2x2m stands there is only room
   for one of the two. */
.stand-sold { display: none; }
.stand[data-status="sold"] .stand-size { display: none; }
.stand[data-status="sold"] .stand-sold {
  display: block;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; fill: #FFFFFF;
}

/* Hover highlight is for stands you can actually pick. Overriding it here
   stops a sold stand lighting up gold and looking clickable. */
.stand[data-status="sold"] .stand-rect:hover { stroke: #E0554C; stroke-width: 1.5; }

/* There is no 'blocked' or 'held' state on the public plan. The booking JS
   folds every non-available status into 'sold' before it touches the DOM,
   so a stand is either bookable or it is red and says SOLD. Do not add
   styling for the other statuses here — it would be dead, and the last time
   this file carried dead floor-plan rules they quietly overrode live ones. */

/* Row tags take the colour of their tier */
.plan-rowtag--vip  { fill: #6E93A8; stroke: #3F6376; }
.plan-rowtag--vvip { fill: #A85248; stroke: #6E2F27; }
.plan-label-xs--vip,
.plan-label-xs--vvip { fill: #FFF3EA; font-weight: 500; }

/* Legend swatches */
.swatch--concourse { background: var(--noir-700); border-color: #5A4632; }
.swatch--frontage  { background: #2A1A20; border-color: #7A4A55; }
.swatch--premium   { background: #2E2415; border-color: var(--gold-600); }
.swatch--sold      { background: #B3261E; border-color: #E0554C; }
.swatch--vip       { background: #6E93A8; border-color: #3F6376; }
.swatch--vvip      { background: #A85248; border-color: #6E2F27; }

/* --- Floor plan: mocha ------------------------------------------------- */

















/* --- Floor plan: latte ------------------------------------------------- */
:root .plan-hall  { fill: var(--latte-50); stroke: var(--latte-400); }
:root .plan-wall  { stroke: #6B5A45; }
:root .plan-door  { stroke: #7A6448; }
:root .plan-door__sill { stroke: rgba(122, 100, 72, .45); }
:root .plan-zone  { fill: rgba(122, 90, 17, .07); stroke: rgba(122, 90, 17, .28); }
:root .plan-ramp  { fill: #55402D; }
:root .plan-ramp-grid { stroke: rgba(246, 235, 210, .22); }
:root .plan-stage { fill: #DCCFAE; stroke: var(--gold-600); }
:root .plan-stage--back { fill: #CFC0A0; }
:root .plan-seatrow use { fill: #E4DACB; stroke: #A6957F; }
:root .plan-seatrow--vip  use { fill: #9FBECE; stroke: #4E7186; }
:root .plan-seatrow--vvip use { fill: #C4796F; stroke: #8A3F38; }
:root .plan-rowtag--vip  { fill: #9FBECE; stroke: #4E7186; }
:root .plan-rowtag--vvip { fill: #C4796F; stroke: #8A3F38; }
:root .plan-label-xs--vip,
:root .plan-label-xs--vvip { fill: #1F150E; }
:root .swatch--vip  { background: #9FBECE; border-color: #4E7186; }
:root .swatch--vvip { background: #C4796F; border-color: #8A3F38; }
:root .plan-rowtag { stroke: rgba(122, 90, 17, .45); }
:root .plan-label { fill: #43341F; }
:root .plan-label--zone { fill: rgba(67, 52, 31, .8); }
:root .plan-label--ramp { fill: var(--gold-200); }
:root .plan-label-xs { fill: #43341F; }
/* The red carpet is a dark band whatever the palette does, so its label
   stays white. Without this the generic :root .plan-label-xs rule above
   wins on specificity and renders it dark-on-dark. */
:root .plan-label--carpet { fill: #FFFFFF; font-weight: 500; }
/* The entrance marker sits on the pale hall floor here, where the dark
   theme's gold is far too light to read. Without these two lines it would
   be a faint smudge — the same trap that has caught this file before. */
:root .plan-entrance__arrow { stroke: #7A5A11; }
:root .plan-entrance__label { fill: #43341F; }
:root .stand-rect { fill: #E8E2D8; stroke: #A6957F; }
:root .stand-no   { fill: #2C1E14; }
:root .stand-size { fill: #564430; }
:root .stand[data-zone="premium"]  .stand-rect { fill: #DCCFAE; stroke: #7A5A11; }
:root .stand[data-zone="frontage"] .stand-rect { fill: #DFC5C9; stroke: #8A5561; }
/* Sold stays the same red on the light palette. This block would otherwise
   repaint it grey — these three rules outrank the structural ones — which is
   exactly the trap that has caught this stylesheet before. */
/* Food pitches on the light palette. The dark theme's deep green is almost
   black against the latte floor, so it needs its own pair here — the usual
   trap in this file. The text selector carries four classes because
   `:root .stand[data-status="available"] text` further down would otherwise
   outrank it and paint these labels brown. */
:root .stand[data-use="food"][data-status="available"] .stand-rect { fill: #8FC6A4; stroke: #3F7A57; }
:root .stand[data-use="food"][data-status="available"] .stand-no   { fill: #10301D; }
:root .stand[data-use="food"][data-status="available"] .stand-size { fill: #1E4531; }
:root .swatch--food { background: #8FC6A4; border-color: #3F7A57; }

:root .stand[data-status="sold"] .stand-rect { fill: #B3261E; stroke: #8E1B16; }
:root .stand[data-status="sold"] .stand-no,
:root .stand[data-status="sold"] .stand-sold { fill: #FFFFFF; }
:root .swatch--concourse { background: #E8E2D8; border-color: #A6957F; }
:root .swatch--frontage  { background: #DFC5C9; border-color: #8A5561; }
:root .swatch--premium   { background: #DCCFAE; border-color: #7A5A11; }
:root .swatch--sold      { background: #B3261E; border-color: #8E1B16; }

/* --- Steps -------------------------------------------------------------- */
.steps { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-4); }
.step {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
}
.step__dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  font-size: .8rem;
  background: var(--noir-700);
}
.step[aria-current="step"] { color: var(--gold-300); }
.step[aria-current="step"] .step__dot { background: var(--noir-900); color: var(--gold-300); border-color: var(--gold-500); }
.step--done .step__dot {
  background: linear-gradient(120deg, #C9992F, #E6C46C 45%, #D4A73C);
  color: var(--noir-900); border-color: var(--gold-400);
}
.steps__sep { flex: 1 1 20px; height: 1px; background: var(--line-gold); min-width: 20px; }

/* --- Forms -------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-3); }
.field { display: grid; gap: .45rem; }
.field label {
  font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}
.field .req { color: var(--gold-500); }
.field input, .field select, .field textarea {
  padding: .85rem 1rem;
  min-height: 48px;
  background: var(--noir-800);
  color: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--noir-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-500);
  background: var(--noir-900);
  box-shadow: 0 0 0 3px rgba(212, 167, 60, .16);
  outline: none;
}
.field__hint { font-size: .82rem; color: var(--text-dim); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
fieldset { border: none; padding: 0; display: grid; gap: var(--sp-2); }
legend {
  font-family: var(--font-display); font-size: var(--step-1);
  color: var(--gold-200);
  padding-bottom: .4rem;
}
.checkbox { display: grid; grid-template-columns: 20px 1fr; gap: .7rem; align-items: start; font-size: .92rem; color: var(--text-muted); }
.checkbox input { min-height: 0; width: 18px; height: 18px; margin-top: .28rem; accent-color: var(--gold-500); }
.checkbox a { color: var(--gold-300); }

/* .checkbox is a 20px + 1fr grid, so EVERY child becomes a grid item — an
   <a> or a <span> placed after the text lands in the 20px checkbox column
   and wraps to one word per line. Labels now wrap their text in a single
   <span>, and this rule keeps anything else out of column 1 regardless. */
.checkbox > *:not(input) { grid-column: 2; }
.checkbox > span { display: block; }

/* --- Promo banner (homepage) ------------------------------------------- */
.promo-bar {
  background: linear-gradient(120deg, #C9992F, #E6C46C 42%, #D4A73C);
  color: var(--espresso-900);
  font-size: .9rem;
}
.promo-bar[hidden] { display: none; }
.promo-bar__inner {
  display: flex; align-items: center; gap: .9rem;
  padding: .55rem var(--sp-3);
  flex-wrap: wrap;
}
.promo-bar__text { margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.promo-bar__tag {
  background: var(--espresso-900); color: #F0DDAE;
  padding: .16rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.promo-bar__code {
  font-weight: 700; letter-spacing: .08em;
  border-bottom: 1px dashed rgba(31,21,14,.5);
}
.promo-bar__cta {
  margin-left: auto;
  color: var(--espresso-900);
  font-weight: 600; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(31,21,14,.45);
  white-space: nowrap;
}
.promo-bar__cta:hover { border-bottom-color: var(--espresso-900); }
.promo-bar__close {
  background: none; border: 0; cursor: pointer;
  color: var(--espresso-900);
  font-size: 1.4rem; line-height: 1;
  padding: 0 .2rem; opacity: .6;
}
.promo-bar__close:hover { opacity: 1; }

@media (max-width: 640px) {
  .promo-bar__inner { padding: .5rem var(--sp-2); gap: .5rem; }
  .promo-bar { font-size: .82rem; }
  /* On a phone the CTA would push the close button off the row; the whole
     banner is a link target anyway once you reach the booking page. */
  .promo-bar__cta { display: none; }
}

/* --- Discount code field in the booking summary ------------------------ */
.promo { margin-top: var(--sp-3); }
.promo__label {
  display: block;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .35rem;
}
.promo__row { display: flex; gap: .5rem; }
.promo__row input {
  flex: 1 1 auto; min-width: 0;
  padding: .55rem .7rem;
  font: inherit; font-size: .9rem;
  background: var(--noir-800); color: var(--cream);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.promo__row .btn { flex: 0 0 auto; }
.promo__msg { margin: .4rem 0 0; font-size: .82rem; min-height: 1.1em; }
.promo__msg[data-kind="ok"]  { color: #2E8B57; }
.promo__msg[data-kind="bad"] { color: #C0463C; }

/* The discount line sits between the stand details and the total. */
.summary__line--off span:last-child { color: #2E8B57; font-weight: 500; }

/* Latte overrides — the field is on a light panel here, so the dark-theme
   colours above would leave the typed code invisible. Same trap that hid the
   booking form inputs earlier. */
:root .promo__row input {
  background: var(--surface-up);
  color: var(--espresso-900);
  border-color: var(--line-firm, var(--line));
}
:root .promo__row input::placeholder { color: #6F6050; }
:root .promo__msg[data-kind="ok"]  { color: #16693F; }
:root .promo__msg[data-kind="bad"] { color: #A32219; }
:root .summary__line--off span:last-child { color: #16693F; }

/* Option cards (radio / checkbox) */
.option-list { display: grid; gap: var(--sp-2); }
.option {
  position: relative;
  display: grid; grid-template-columns: 22px 1fr auto; gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--noir-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.option:hover { border-color: var(--line-gold); background: var(--noir-700); }
.option input { accent-color: var(--gold-500); width: 18px; height: 18px; }
.option:has(input:checked) {
  border-color: var(--gold-500);
  background:
    radial-gradient(120% 100% at 0% 50%, rgba(212,167,60,.14), transparent 70%),
    var(--noir-600);
}
.option__name { font-weight: 400; color: var(--cream); }
.option__desc { font-size: .86rem; color: var(--text-dim); }
.option__price { font-family: var(--font-display); font-size: var(--step-1); color: var(--gold-300); white-space: nowrap; }

/* Order summary */
.summary {
  position: sticky; top: 112px;
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(212,167,60,.08), transparent 60%),
    var(--surface);
  border: 1px solid var(--line-gold-strong);
  border-radius: var(--radius);
  padding: var(--sp-3);
  box-shadow: var(--shadow);
}
.summary h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); color: var(--gold-200); }
.summary__line { display: flex; justify-content: space-between; gap: var(--sp-2); padding-block: .5rem; font-size: .94rem; }
.summary__line + .summary__line { border-top: 1px dashed var(--line); }
.summary__line span:first-child { color: var(--text-dim); }
.summary__line span:last-child { color: var(--cream); }
.summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--sp-2); padding-top: var(--sp-2);
  border-top: 1px solid var(--line-gold-strong);
  font-family: var(--font-display); font-size: var(--step-2);
  color: var(--gold-300);
}
.trust {
  display: flex; flex-wrap: wrap; gap: .5rem var(--sp-2);
  margin-top: var(--sp-2);
  font-size: .78rem; color: var(--text-dim);
}
.trust span { display: inline-flex; align-items: center; gap: .35rem; }

/* --- Testimonial -------------------------------------------------------- */
.quote {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-500);
  border-radius: var(--radius);
}
.quote p { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.5; color: var(--cream); }
.quote footer { font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-500); }

/* --- FAQ ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line-gold); }
.faq details { border-bottom: 1px solid var(--line-gold); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--sp-3) 2.5rem var(--sp-3) 0;
  position: relative;
  font-family: var(--font-display); font-size: var(--step-1);
  color: var(--cream);
  transition: color .2s var(--ease);
}
.faq summary:hover { color: var(--gold-300); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%;
  transform: translateY(-50%); color: var(--gold-500); font-size: 1.5rem;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: var(--sp-3); color: var(--text-muted); max-width: 68ch; }
.faq details a { color: var(--gold-300); }

/* --- Logo strip --------------------------------------------------------- */
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); align-items: center; }
.logo-chip {
  aspect-ratio: 5 / 2;
  display: grid; place-items: center;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .1em;
  color: var(--text-dim);
  background: var(--noir-800);
}

/* --- Venue map ----------------------------------------------------------
   Click-to-load: the Google iframe sets third-party cookies, so it must not
   load before the visitor asks for it. Also saves ~1MB on first paint.
   ------------------------------------------------------------------------ */
.map {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--line-gold-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(70% 70% at 30% 20%, rgba(212,167,60,.14), transparent 65%),
    linear-gradient(150deg, var(--noir-600), var(--noir-950));
}
.map::after {
  content: "";
  position: absolute; inset: 5px;
  border: 1px solid rgba(212, 167, 60, .28);
  border-radius: 3px;
  pointer-events: none;
  z-index: 3;
}
.map iframe {
  width: 100%; height: 100%;
  border: 0; display: block;
}
/* Tints Google's light map toward the site's noir palette.
   Remove this rule if you'd rather show the map in its native colours. */
.map--tinted iframe {
  filter: invert(92%) hue-rotate(180deg) saturate(.72) contrast(.92) brightness(.94);
}
.map__prompt {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  text-align: center;
}
/* The panel behind is a gradient with a street-grid pattern over it, which
   is exactly the wrong surface for 12px type. The content sits on its own
   plate instead. */
.map__plate {
  display: grid; justify-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: rgba(6, 4, 5, .55);
  backdrop-filter: blur(2px);
}
/* Faint street-grid suggestion behind the prompt */
.map__prompt::before {
  opacity: .7;
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    repeating-linear-gradient(0deg,   rgba(212,167,60,.10) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg,  rgba(212,167,60,.10) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(58deg,  rgba(212,167,60,.07) 0 1px, transparent 1px 120px);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 80%);
}
.map__pin {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--gold-500);
  color: var(--gold-300);
  background: rgba(6, 4, 5, .7);
}
.map__name {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 500;
  line-height: 1.15; color: var(--gold-200);
}
/* 400, not the site's usual 300 — a light weight does not hold at this size
   over a textured panel. */
.map__addr { font-size: .95rem; font-weight: 400; color: var(--text-muted); max-width: 32ch; }
.map__note { font-size: .82rem; font-weight: 400; color: var(--text-dim); max-width: 34ch; }
.map__actions { display: flex; flex-wrap: wrap; gap: .625rem; justify-content: center; }
.map.is-loaded .map__prompt { display: none; }




/* --- CTA band ----------------------------------------------------------- */
.cta-band {
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(212, 167, 60, .18), transparent 60%),
    radial-gradient(80% 120% at 0% 100%, rgba(85, 19, 29, .55), transparent 62%),
    var(--noir-950);
  border-block: 1px solid var(--line-gold);
  text-align: center;
}
.cta-band .container { display: grid; gap: var(--sp-3); justify-items: center; }

/* --- Footer ------------------------------------------------------------- */
.footer {
  background: var(--noir-950);
  border-top: 1px solid var(--line-gold);
  color: var(--text-muted);
  padding-block: var(--sp-6) var(--sp-4);
  font-size: .92rem;
}
.footer a { color: var(--text-muted); text-decoration: none; transition: color .2s var(--ease); }
.footer a:hover { color: var(--gold-300); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--sp-4); }
.footer h4 {
  font-family: var(--font-body); font-size: var(--step--1);
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold-500);
  margin-bottom: var(--sp-2);
}
.footer ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.footer__bottom {
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between;
  font-size: .82rem; color: var(--text-dim);
}
.social { display: flex; gap: .7rem; }
.social a {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .78rem; letter-spacing: .06em;
  border: 1px solid var(--line-gold);
  color: var(--gold-300);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.social a:hover { background: var(--gold-500); color: var(--noir-900); border-color: var(--gold-500); }



/* --- Light panels inside dark sections ---------------------------------
   The Visit band is dark, but the map placeholder inside it is a light tan
   panel. The `.section--dark .btn` rule above lightens buttons for the dark
   background, which made these two invisible on the pale panel. Scoped
   higher so the panel wins over the section.
   ---------------------------------------------------------------------- */
:root .section--dark .map__prompt .btn,
:root .map__prompt .btn {
  color: var(--gold-700);
  border-color: var(--gold-700);
  /* Solid-ish light fill rather than a tint: the panel behind is a gradient,
     and a translucent button dropped to 3.3:1 at its dark end. */
  background: rgba(253, 250, 245, .82);
}
:root .section--dark .map__prompt .btn:hover,
:root .map__prompt .btn:hover {
  background: #FDFAF5;
  color: var(--espresso-900);
  border-color: var(--espresso-800);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
.grid--4 { grid-template-columns: repeat(2, 1fr); }
  .logos { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { max-width: 520px; }
  .hero__copy { max-width: 100%; }
}

@media (max-width: 860px) {
:root { --sp-7: 4.5rem; --sp-6: 3.25rem; }
  .nav { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .header__bar { min-height: 74px; }
  .grid--2, .grid--3, .grid--split, .price-grid { grid-template-columns: 1fr; }
  .statbar__grid { grid-template-columns: repeat(2, 1fr); }
  .statbar__item:nth-child(odd) { border-left: none; }
  .statbar__item:nth-child(n/**/+3) { border-top: 1px solid rgba(11,7,9,.22); }
  .summary { position: static; }
  .field-row { grid-template-columns: 1fr; }
  .booking-layout { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
/* --- Phone header ------------------------------------------------------
   The two CTAs stack, second under first, instead of running off the side.

   What was actually broken: `.btn { width: 100% }` further down this block
   applies to the header buttons too, so each one demanded the full bar
   width. Measured at 390px, "Book Tickets" ended 118px past the container
   and the hamburger sat 145px off-screen entirely — there was no way to
   open the menu on a phone. The `.cta-short` labels had been written into
   the markup for exactly this situation but no rule ever switched them on.

   .brand gets flex:0 0 auto so the wordmark keeps its own width rather than
   being shrunk to min-content; see the note in partials/header.php. */
  .header__bar { min-height: 64px; gap: .7rem; }
  .brand { flex: 0 0 auto; gap: .6rem; }
  .brand__mark { width: 40px; height: 40px; font-size: .85rem; }
  .brand__name { font-size: 1.02rem; letter-spacing: .04em; }
  .header .brand__word { display: block; }
  .brand__sub { font-size: .46rem; letter-spacing: .2em; margin-top: .18rem; }
  .header__actions { flex-direction: column; align-items: stretch; gap: .3rem; }
  .header__actions .btn { width: auto; }   /* undo the full-width rule below */
  .header__cta { padding: .45rem .8rem; min-height: 32px; font-size: .66rem; letter-spacing: .1em; }
  .cta-long  { display: none; }
  .cta-short { display: inline; }
  .nav-toggle { width: 40px; height: 40px; }

  .grid--4 { grid-template-columns: 1fr; }
  .frame__badge {
    width: 104px; height: 104px; font-size: 2.1rem;
    gap: .2rem; padding: .6rem; right: 0; top: 1%;
    border-width: 1px;
    box-shadow: var(--shadow-lg), inset 0 0 0 3px rgba(122, 90, 17, .22);
  }
  .frame__badge span { font-size: .52rem; letter-spacing: .06em; }
  /* Full-width CTAs on a phone. Note what this catches: `width` also
     resolves flex-basis, so ANY .btn sharing a flex row with something else
     demands the whole row and squashes its neighbour. It has now done that
     twice — to the header CTAs, and to the Apply button, which flattened the
     discount input to a 24px sliver and pushed Apply 32px off the card.
     Buttons that live beside another control need the exception below. */
  .btn { width: 100%; }
  .hero__actions .btn { width: 100%; }
  .promo__row .btn { width: auto; }
}

/* Small phones (360px and below). The values above leave the header about
   20px over the container at 320px, mostly because "UNITED KINGDOM" with
   0.2em tracking is the widest thing in the brand lockup. */
@media (max-width: 380px) {
  .header__bar { gap: .5rem; }
  .brand__name { font-size: .92rem; }
  .brand__sub { font-size: .44rem; letter-spacing: .12em; }
  .header__cta { padding: .45rem .6rem; font-size: .62rem; }
  .nav-toggle { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
}


/* ==========================================================================
   THEME: LATTE
   A warm, light alternative — oat and cream surfaces, espresso text,

   Contrast rule, inverted from the noir theme: gold TEXT is always
   --gold-700. --gold-500 is decorative only (rules, borders, icons) —
   it fails against every light surface here.
   ========================================================================== */
:root {
  /* Latte — light surface family */
  --latte-50:  #DED7CB;
  --latte-100: #D2CABD;
  --latte-200: #C6BCAC;
  --latte-300: #B8AB98;
  --latte-400: #A6957F;

  /* Espresso — text and the few dark bands */
  --espresso-900: #1F150E;
  --espresso-800: #2C1E14;
  --espresso-700: #3D2B1D;
  --espresso-600: #55402D;
  --mocha-500:    #54422F;
  --mocha-400:    #564430;

  /* Antique gold, darkened for light backgrounds */
  --gold-700: #563D0C;
  --gold-600: #7A5A11;
  --gold-500: #B08A28;
  --gold-400: #C9A23C;
  --gold-300: #E0C173;
  --gold-200: #F0DDAE;
  --gold-wash: #DCCFAE;

  /* Semantic remap */
  --bg:         var(--latte-100);
  --bg-alt:     var(--latte-200);
  --surface:    var(--latte-50);
  --surface-up: #E8E2D8;
  --text:       var(--espresso-800);
  --text-muted: var(--mocha-500);
  --text-dim:   var(--mocha-400);
  --accent:     var(--gold-600);
  --accent-txt: var(--gold-700);
  --line:            rgba(44, 30, 20, .14);
  --line-gold:       rgba(176, 138, 40, .40);
  --line-gold-strong: rgba(138, 102, 20, .58);

  --gold-sheen: linear-gradient(96deg, #563D0C 0%, #8A6A1B 22%, #74560F 42%,
                                 #563D0C 60%, #7F5F16 78%, #563D0C 100%);

  --shadow-sm: 0 1px 3px rgba(44, 30, 20, .07), 0 6px 18px rgba(44, 30, 20, .05);
  --shadow:    0 4px 14px rgba(44, 30, 20, .10), 0 20px 50px rgba(44, 30, 20, .08);
  --shadow-lg: 0 10px 28px rgba(44, 30, 20, .14), 0 38px 84px rgba(44, 30, 20, .16);
  --glow-gold: 0 0 26px rgba(176, 138, 40, .22);
}

/* --- Base ---------------------------------------------------------------- */
:root body {
  /* The bokeh reads as dirt on a light background — replace with a whisper of warmth */
  background-image:
    radial-gradient(60% 50% at 82% 4%,  rgba(176, 138, 40, .07), transparent 62%),
    radial-gradient(50% 40% at 6% 96%,  rgba(85, 64, 45, .05),   transparent 62%);
}
:root h1,
:root h2,
:root h3,
:root h4 { color: var(--espresso-900); }
:root ::selection { background: var(--gold-400); color: var(--espresso-900); }
:root :focus-visible { outline-color: var(--gold-700); }

/* --- Buttons ------------------------------------------------------------- */
:root .btn { color: var(--gold-700); }
:root .btn--gold {
  background: linear-gradient(120deg, #BE9430, #E2C271 45%, #C9A23C);
  color: var(--espresso-900);
  border-color: var(--gold-600);
}
:root .btn--gold:hover {
  background: linear-gradient(120deg, #CBA038, #F0D48C 45%, #D9B658);
  color: var(--espresso-900);
}
:root .btn--ghost { color: var(--espresso-700); border-color: rgba(44, 30, 20, .3); }
:root .btn--ghost:hover { color: var(--gold-700); }
:root .btn--ghost-gold { color: var(--gold-700); }
:root .btn--ghost-gold:hover { background: rgba(176, 138, 40, .12); }

/* On the dark header the same button needs the light gold, a solid border
   and a faint fill — outlined-on-dark otherwise reads as disabled next to
   the solid gold Book Tickets. */
:root .header .btn--ghost-gold {
  color: var(--gold-200);
  border-color: var(--gold-400);
  background: rgba(212, 167, 60, .12);
}
:root .header .btn--ghost-gold:hover {
  background: rgba(212, 167, 60, .24);
  border-color: var(--gold-300);
  color: #FFF6E0;
}
:root .link-arrow { color: var(--gold-700); }
:root .skip-link { background: var(--espresso-900); color: var(--gold-200); }

/* --- Header stays espresso: it's the brand bar in both themes ------------- */
:root .header {
  background: rgba(31, 21, 14, .93);
  border-bottom-color: rgba(176, 138, 40, .5);
}
:root .brand__mark,
:root .brand__sub,
:root .brand__name b,
:root .nav a:hover,
:root .nav a[aria-current="page"] { color: var(--gold-300); }
:root .brand__mark { border-color: var(--gold-400); }
:root .nav a:hover,
:root .nav a[aria-current="page"] { border-color: var(--gold-400); }
:root .nav-toggle { color: var(--gold-300); border-color: rgba(176, 138, 40, .5); }


/* --- Hero ---------------------------------------------------------------- */
:root .hero {
  background:
    radial-gradient(55% 65% at 74% 22%, rgba(176, 138, 40, .16), transparent 64%),
    radial-gradient(65% 75% at 2% 90%,  rgba(166, 149, 127, .55), transparent 64%),
    linear-gradient(168deg, var(--latte-50) 0%, var(--latte-200) 52%, var(--latte-100) 100%);
  color: var(--text);
  border-bottom-color: var(--line-gold);
}
:root .hero::before {
  background-image:
    repeating-linear-gradient(94deg, rgba(166, 149, 127, .55) 0 14px, rgba(210, 202, 189, .55) 14px 30px);
  opacity: .5;
}
:root .hero::after { opacity: .35; }
:root .hero__meta { color: var(--gold-700); border-top-color: var(--line-gold); }
:root .tagbox { color: var(--gold-700); }
:root .frame { background: var(--latte-200); }
:root .frame__badge {
  /* A warm cream-to-gold wash gives it depth; flat cream on a cream page
     was disappearing into the flyer behind it. */
  background: linear-gradient(158deg, #F2EADA 0%, var(--gold-wash) 100%);
  border-color: var(--gold-600);
  color: var(--espresso-900);
  box-shadow: var(--shadow-lg), inset 0 0 0 5px rgba(122, 90, 17, .22);
}
:root .frame__badge span { color: var(--gold-700); }

/* --- Sections ------------------------------------------------------------ */
:root .section--alt { border-block-color: var(--line); }
/* The one genuinely dark band — espresso, not black */
:root .section--dark,
:root .cta-band {
  background:
    radial-gradient(85% 115% at 86% 0%, rgba(107, 78, 16, .38), transparent 64%),
    linear-gradient(150deg, var(--espresso-900), #34241A 60%, var(--espresso-900));
  border-block-color: rgba(176, 138, 40, .45);
  color: var(--latte-100);
}
:root .section--dark h2,
:root .section--dark h3,
:root .cta-band h2,
:root .page-hero h1 { color: var(--latte-50); }
:root .section--dark .lede,
:root .cta-band .lede,
:root .page-hero .lede,
:root .section--dark .feature p { color: var(--latte-300); }
:root .section--dark .eyebrow,
:root .cta-band .eyebrow,
:root .page-hero .eyebrow,
:root .section--dark .feature h4 { color: var(--gold-300); }
:root .section--dark .eyebrow::before,
:root .section--dark .eyebrow::after,
:root .cta-band .eyebrow::before,
:root .cta-band .eyebrow::after,
:root .page-hero .eyebrow::before { background: var(--gold-400); }
:root .section--dark .feature { border-top-color: rgba(176, 138, 40, .34); }
:root .section--dark .btn,
:root .cta-band .btn { color: var(--gold-300); border-color: rgba(176, 138, 40, .55); }
:root .section--dark .btn--gold,
:root .cta-band .btn--gold { color: var(--espresso-900); }

/* --- Placeholders -------------------------------------------------------- */
:root .ph {
  color: var(--mocha-500);
  background:
    radial-gradient(70% 70% at 30% 20%, rgba(176, 138, 40, .16), transparent 65%),
    linear-gradient(150deg, var(--latte-200), var(--latte-400));
}
:root .ph--wine {
  background:
    radial-gradient(70% 70% at 70% 20%, rgba(176, 138, 40, .2), transparent 65%),
    linear-gradient(150deg, var(--latte-300), #9C8266);
}
/* Tiles live inside the espresso band, so their captions stay light */
:root .tile__label {
  background: linear-gradient(0deg, rgba(31, 21, 14, .94), rgba(31, 21, 14, .6) 55%, transparent);
  color: var(--gold-200);
}

/* --- Cards, pricing, quotes ---------------------------------------------- */
:root .card,
:root .price,
:root .quote,
:root .floorplan,
:root .summary { background: var(--surface-up); }
:root .card__body h4,
:root .feature h4,
:root .summary h3,
:root legend,
:root .map__name { color: var(--espresso-900); }
:root .price--featured {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(176, 138, 40, .16), transparent 60%),
    var(--gold-wash);
  border-color: var(--gold-600);
}
:root .price__flag {
  background: linear-gradient(120deg, #BE9430, #E2C271 45%, #C9A23C);
  color: var(--espresso-900);
}
:root .price__name { color: var(--espresso-900); }
:root .price__size,
:root .price__amount,
:root .summary__total,
:root .option__price,
:root .quote footer,
:root .footer h4 { color: var(--gold-700); }
:root .price li::before,
:root .feature__num,
:root .faq summary::after,
:root .field .req { color: var(--gold-600); }
:root .quote p,
:root .faq summary,
:root .option__name,
:root .summary__line span:last-child { color: var(--espresso-800); }
:root .faq summary:hover { color: var(--gold-700); }
:root .stock--low { color: #A6402F; }
:root .logo-chip { background: var(--surface-up); color: var(--mocha-500); }

/* --- Forms --------------------------------------------------------------- */
/* Both background AND colour. An earlier version set only the background:
   the structural rule above still applied color: var(--cream) (#F4EFE9),
   which on this #E8E2D8 field is 1.09:1 — text you have typed but cannot
   see. Autofilled fields looked fine only because Chrome overrides the
   colour itself, which is what made the bug look intermittent. */
:root .field input,
:root .field select,
:root .field textarea,
:root .option {
  background: var(--surface-up);
  color: var(--espresso-900);
}

/* Chrome paints its own pale-blue autofill background and ignores the rule
   above. This forces our own surface back, so an autofilled field looks the
   same as one typed by hand. */
:root .field input:-webkit-autofill,
:root .field input:-webkit-autofill:hover,
:root .field input:-webkit-autofill:focus,
:root .field textarea:-webkit-autofill,
:root .field select:-webkit-autofill {
  -webkit-text-fill-color: var(--espresso-900);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-up) inset;
  caret-color: var(--espresso-900);
}
/* Was --latte-400 (#A6957F), which is 2.26:1 on the field — faint enough
   that empty fields looked washed out and it was hard to tell an empty
   field from a filled one. 4.70:1 still reads as placeholder grey but is
   actually legible. */
:root .field input::placeholder,
:root .field textarea::placeholder { color: #6F6050; }
:root .field input:focus,
:root .field select:focus,
:root .field textarea:focus {
  background: #F1ECE4;
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px rgba(176, 138, 40, .18);
}
:root .option:hover { background: var(--latte-50); }
:root .option:has(input:checked) {
  background:
    radial-gradient(120% 100% at 0% 50%, rgba(176, 138, 40, .16), transparent 70%),
    var(--gold-wash);
  border-color: var(--gold-600);
}
:root .option input,
:root .checkbox input { accent-color: var(--gold-700); }
:root .checkbox a,
:root .faq details a { color: var(--gold-700); }
:root .step__dot { background: var(--surface-up); }
:root .step[aria-current="step"] { color: var(--gold-700); }
:root .step[aria-current="step"] .step__dot {
  background: var(--surface-up); color: var(--gold-700); border-color: var(--gold-600);
}
:root .step--done .step__dot {
  background: linear-gradient(120deg, #BE9430, #E2C271 45%, #C9A23C);
  color: var(--espresso-900); border-color: var(--gold-600);
}

/* --- Map ----------------------------------------------------------------- */
:root .map {
  background:
    radial-gradient(70% 70% at 30% 20%, rgba(176, 138, 40, .14), transparent 65%),
    linear-gradient(150deg, var(--latte-200), var(--latte-400));
}
:root .map__plate {
  background: rgba(253, 250, 245, .72);
  box-shadow: 0 2px 14px rgba(44, 30, 20, .10);
}
:root .map__addr { color: var(--espresso-800); }
:root .map__note { color: var(--mocha-500); }
:root .map__pin { background: rgba(222, 215, 203, .82); color: var(--gold-700); border-color: var(--gold-600); }
:root .map__prompt::before {
  opacity: .7;
  background-image:
    repeating-linear-gradient(0deg,  rgba(107, 78, 16, .12) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(107, 78, 16, .12) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(58deg, rgba(107, 78, 16, .09) 0 1px, transparent 1px 120px);
}
/* Google's map is already light — no inversion needed, just a warm tint */
:root .map--tinted iframe { filter: sepia(.22) saturate(.92) contrast(.98); }

/* --- Footer stays espresso ----------------------------------------------- */
:root .footer {
  background: var(--espresso-900);
  border-top-color: rgba(176, 138, 40, .45);
  color: var(--latte-300);
}
:root .footer a { color: var(--latte-300); }
:root .footer a:hover,
:root .social a { color: var(--gold-300); }
:root .social a { border-color: rgba(176, 138, 40, .45); }
:root .social a:hover { background: var(--gold-400); color: var(--espresso-900); border-color: var(--gold-400); }
:root .footer .brand__name { color: var(--latte-50); }
:root .footer .muted { color: var(--latte-300); }
:root .footer__bottom { border-top-color: rgba(240, 221, 174, .18); color: var(--latte-400); }

/* --- Floor plan SVG ------------------------------------------------------ */
:root .plan-hall     { fill: #DED7CB; stroke: #A6957F; }

/* Removed here: a leftover latte block for the FIRST version of the floor
   plan — .plan-runway, .plan-entrance, .plan-cafe and three
   [data-type="..."] stand rules. None of those classes or that attribute
   survive in the markup (the plan uses data-zone now), so they were dead.
   Two rules in it were not dead, though: they repainted sold stands grey and
   greyed every text inside them, and being the last word in the file they
   quietly beat the sold styling further up. That is why sold stands stayed
   grey on the light palette. Both are gone; the sold rules now live in one
   place, in the latte block above. */

:root .stand[data-status="available"] text { fill: #3D2B1D; }
:root .stand-rect:hover      { stroke: var(--gold-700); }
:root .stand-rect.is-selected { stroke: var(--gold-700); }

/* --- Stat bar: warm the gold to match the latte gradient ----------------- */
:root .statbar {
  background: linear-gradient(120deg, #BE9430, #E2C271 45%, #C9A23C);
  color: var(--espresso-900);
}
:root .statbar__num { color: var(--espresso-900); }
:root .statbar__item + .statbar__item { border-left-color: rgba(31, 21, 14, .24); }
@media (max-width: 860px) {
:root .statbar__item:nth-child(n/**/+3) { border-top-color: rgba(31, 21, 14, .24); }
}




/* --- Base ---------------------------------------------------------------- */


/* --- Header / footer: the deepest umber, still clearly a brand bar -------- */



/* --- Hero ---------------------------------------------------------------- */






/* --- Sections ------------------------------------------------------------ */


/* --- Placeholders -------------------------------------------------------- */




/* --- Surfaces ------------------------------------------------------------ */












/* --- Map ----------------------------------------------------------------- */




/* --- Floor plan SVG ------------------------------------------------------ */














/* --- WhatsApp -----------------------------------------------------------
   Brand green with a near-black glyph, not white: white on #25D366 is only
   1.98:1, whereas dark on it is 10:1. Same "dark on bright fill" logic as the
   gold CTA, so it sits with the design rather than fighting it.

   This is a plain wa.me link, not an embedded widget — no third-party script,
   no cookies, nothing to disclose in a consent banner, and it opens the app
   on mobile and WhatsApp Web on desktop.
   ------------------------------------------------------------------------ */
.wa-float {
  --wa-bg: #25D366;
  position: fixed; right: 16px; bottom: 16px; z-index: 120;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.25rem .8rem 1rem;
  border-radius: 100px;
  background: var(--wa-bg);
  color: #06231A;
  border: 1px solid rgba(6, 35, 26, .3);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .38);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.wa-float:hover {
  --wa-bg: #34E074;
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .46);
}
.wa-float:active { transform: translateY(0); }
.wa-float svg { width: 22px; height: 22px; fill: currentColor; flex: none; }

/* Inline WhatsApp buttons (footer, enquiry CTA) */
.btn--wa {
  background: #25D366;
  color: #06231A;
  border-color: rgba(6, 35, 26, .35);
  font-weight: 500;
}
.btn--wa:hover { background: #34E074; color: #06231A; }
.btn--wa svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

@media (max-width: 700px) {
/* Collapse to a circle so it never covers content on a phone */
  .wa-float { padding: 0; width: 56px; height: 56px; justify-content: center; right: 12px; bottom: 12px; }
  .wa-float__label { display: none; }
  .wa-float svg { width: 26px; height: 26px; }
}


/* --- Latte: surfaces that were still resolving to noir tokens ----------- */
/* The payment panel and card mock-ups sit inside the page's own <style>
   block, which hardcodes noir. Without these they stayed near-black on a
   cream page. */
:root .pay-panel { background: var(--latte-200); border-color: var(--line-gold); }
:root .card-mock { background: var(--surface-up); border-color: var(--line); }
:root .reel,
:root .reel__video { background: var(--latte-300); }
:root .stock--out { color: var(--latte-400); }

/* Replaces the fake card rows in the payment panel. Plain sentence, no box,
   nothing that reads as an input. */
.pay-panel__lead {
  margin: .5rem 0 .6rem;
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cream);
}
:root .pay-panel__lead { color: var(--espresso-800); }
:root .pay-panel__lead strong { color: var(--gold-700); }