/* Xtreme Events — design tokens + components.
   Brand (Jandre): complete black + vibrant, glowing white. One deliberate theme: the room is black, the light is white. */
:root {
  --ink-0: #000000; --ink-1: #0A0A0A; --ink-2: #121212; --ink-3: #1A1A1A;
  --line: #222222; --line-strong: #363636;
  --text: #FFFFFF; --muted: #B4B4B4; --faint: #8A8A8A; /* faint lifted 767676 → 8A8A8A (09-13 pass 2): 5.6:1 on ink-1, was 4.36 */
  --accent: #FFFFFF; --accent-2: #E6E6E6; --accent-ink: #000000; --accent-soft: rgba(255,255,255,.10);
  --glow: 0 0 0 1px rgba(255,255,255,.18), 0 0 18px rgba(255,255,255,.45), 0 0 56px rgba(255,255,255,.22);
  --glow-text: 0 0 14px rgba(255,255,255,.65), 0 0 44px rgba(255,255,255,.28);
  --good: #7CE0A5; --good-soft: rgba(124,224,165,.14);
  --warn: #FF7A5C; --warn-soft: rgba(255,122,92,.16);
  /* Champagne — the one warm accent, reserved for the wedding rate card (design unlocked 09-08).
     Echoes the brochure's ELITE gold and Jandre's own amber/warm-white advice. Use sparingly. */
  --gold: #E8C87C; --gold-soft: rgba(232,200,124,.12); --gold-line: rgba(232,200,124,.4);
  --shadow-1: 0 1px 2px rgba(0,0,0,.6), 0 10px 30px -14px rgba(0,0,0,.9);
  --shadow-2: 0 2px 6px rgba(0,0,0,.6), 0 24px 60px -20px rgba(255,255,255,.10);
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
  --ease-spring: cubic-bezier(.2,.8,.2,1.15); --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: 160ms; --t-base: 240ms; --t-reveal: 420ms; --t-cinematic: 560ms;
  --font-display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --wrap: 1180px; --gutter: clamp(18px, 4vw, 48px);
  /* KIT 2026-09-13 — the sync set with Receptia (identical values there; DESIGN-SYSTEM.md). White is the only light. */
  --edge: inset 0 1px 0 rgba(255,255,255,.09);
  --sh-1: var(--edge), 0 0 0 1px rgba(255,255,255,.04), 0 4px 10px -4px rgba(0,0,0,.55), 0 14px 30px -12px rgba(0,0,0,.6);
  --sh-2: var(--edge), 0 0 0 1px rgba(255,255,255,.05), 0 14px 30px -10px rgba(0,0,0,.6), 0 34px 70px -18px rgba(0,0,0,.65);
  --sh-3: var(--edge), 0 0 0 1px rgba(255,255,255,.05), 0 24px 52px -14px rgba(0,0,0,.65), 0 60px 130px -24px rgba(0,0,0,.72), 0 36px 110px -34px rgba(255,255,255,.08);
  --glass: linear-gradient(168deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --hair: rgba(255,255,255,.28);
  --bevel: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.35);
  --ease-editorial: cubic-bezier(.22,1,.36,1); --t-editorial: 650ms; --t-exit: 128ms;
  --eq-core: #FFFFFF; --eq-glow: 255 255 255; --header-h: 69px; --parallax: 14;
}
@media (max-width: 899px) { :root { --header-h: 65px; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding: calc(var(--header-h) + 16px) 0 100px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body { margin: 0; background: var(--ink-0); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; touch-action: manipulation; }
img, video { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #FFFFFF; text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7.2vw, 5.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 56ch; line-height: 1.55; }
.eyebrow { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section + .section { border-top: 0; } /* 09-14 lines pass: spacing separates bands */
.section-head { display: grid; gap: 12px; max-width: 64ch; margin-bottom: clamp(24px, 4vw, 44px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -48px; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: var(--r-sm); font-weight: 700; z-index: 100; }
.skip:focus { top: 12px; }

/* buttons */
.btn { --bg: var(--ink-2); --fg: var(--text); --bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px;
  border-radius: var(--r-pill); border: 1px solid var(--bd); background: var(--bg); color: var(--fg);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast); }
.btn:hover { transform: translateY(-1px); border-color: var(--faint); color: var(--text); }
.btn:active { transform: translateY(0) scale(.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }
.btn-primary { --bg: var(--accent); --fg: var(--accent-ink); --bd: var(--accent); box-shadow: var(--glow), var(--bevel); }
.btn-primary:hover { --bg: #FFFFFF; --bd: #FFFFFF; color: var(--accent-ink); box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 0 26px rgba(255,255,255,.65), 0 0 72px rgba(255,255,255,.3), inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.3); }
.btn-ghost { --bg: transparent; }
.btn-wa { --bg: #1F3D2E; --bd: #2E5A43; --fg: #DFF7E9; }
.btn-wa:hover { --bg: #26503B; color: #fff; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .92rem; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(11,12,16,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 0; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--text); }
.logo b { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; }
.logo small { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.nav { display: none; align-items: center; gap: 4px; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 10px 12px; border-radius: var(--r-sm); min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: var(--text); background: var(--ink-2); }
.nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.nav .btn { margin-left: 8px; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--ink-1); color: var(--text); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.menu { display: none; border-top: 0; padding: 10px 0 16px; }
.menu[data-open="true"] { display: grid; gap: 4px; animation: rise var(--t-fast) var(--ease-out) both; }
.menu a { color: var(--text); text-decoration: none; font-weight: 600; padding: 12px 8px; border-radius: var(--r-sm); min-height: 44px; display: flex; align-items: center; }
.menu a:hover { background: var(--ink-2); }
@media (min-width: 900px) { .nav { display: flex; } .menu-btn, .menu { display: none !important; } }

/* mobile sticky action bar */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(11,12,16,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .mobile-bar { display: none; } }
body.has-mobile-bar { padding-bottom: 84px; }
@media (min-width: 900px) { body.has-mobile-bar { padding-bottom: 0; } }

/* hero */
.hero { position: relative; overflow: hidden; border-bottom: 0; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,12,16,.35) 0%, rgba(11,12,16,.55) 45%, rgba(11,12,16,.96) 100%), radial-gradient(60% 50% at 70% 30%, rgba(255,255,255,.16), transparent 70%); }
.hero .wrap { position: relative; z-index: 1; padding-top: clamp(72px, 12vw, 150px); padding-bottom: clamp(44px, 7vw, 90px); display: grid; gap: 22px; }
.hero h1 { max-width: 14ch; }
.glow { color: var(--accent); text-shadow: var(--glow-text); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.datecheck { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; max-width: 460px; background: rgba(18,20,27,.85); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-2); }
.datecheck label { display: grid; gap: 6px; font-size: .82rem; color: var(--muted); font-weight: 600; }
.datecheck input { min-height: 48px; }
.datecheck-mid { margin-top: clamp(24px, 4vw, 44px); }
.datefield { position: relative; }
.datefield .dateface { display: flex; align-items: center; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--ink-1); color: var(--faint); font-weight: 600; letter-spacing: .01em; transition: border-color var(--t-fast), color var(--t-fast); }
.datefield .dateface.set { color: var(--text); }
.datefield input[type="date"] { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; min-height: 48px; opacity: 0; cursor: pointer; }
.datefield:hover .dateface { border-color: var(--faint); }
.datefield:focus-within .dateface { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.datefield:has(input:focus-visible) .dateface { outline: 2px solid var(--text); outline-offset: 3px; } /* a real outline on every date field, not only the hero's (re-audit motion-a11y-3) */

/* forms */
input, select, textarea { font: inherit; color: var(--text); background: var(--ink-1); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 12px 14px; min-height: 48px; width: 100%; transition: border-color var(--t-fast); color-scheme: dark; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field { display: grid; gap: 8px; }
.field > label, .field > .label { font-weight: 600; font-size: 1rem; }
.field .help { color: var(--muted); font-size: .9rem; margin: 0; }
.field .error { color: var(--warn); font-size: .9rem; margin: 0; display: none; }
.field[data-invalid="true"] .error { display: block; }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: var(--warn); }
.req { color: var(--accent); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .row-2 { grid-template-columns: 1fr; } }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--ink-1); font-weight: 600; cursor: pointer; transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-fast), background var(--t-fast); }
.choice span:hover { transform: translateY(-1px); border-color: var(--faint); }
.choice input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.yn { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr)); gap: 8px; max-width: 420px; min-width: 0; } /* 09-13 pass 2: auto-fill against an indefinite basis laid three 110px tracks into a 294px column at 360 wide */
.upload { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 16px; color: var(--muted); font-size: .95rem; display: grid; gap: 8px; }
.upload input { min-height: 0; padding: 6px 0; border: 0; background: transparent; }

/* stepper / wizard */
.wizard { max-width: 760px; }
/* 09-14 (Wayne: "centre"): on wide screens the wizard pages read as one centred column: the page head, the card and the note under it share the card's 760px measure and sit in the middle of the wrap; phones unchanged. */
@media (min-width: 900px) { body[data-page="dj"] .page-head, body[data-page="tech"] .page-head, body[data-page="dj"] .wizard, body[data-page="tech"] .wizard, .wizard-note { max-width: 760px; margin-inline: auto; } }
.progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-bottom: 22px; }
.progress .track { height: 6px; background: var(--ink-2); border-radius: var(--r-pill); overflow: hidden; box-shadow: var(--edge), inset 0 0 0 1px rgba(255,255,255,.06); } /* KIT: the edge light on the one bare grey object of a wizard screen */
.progress .fill { height: 100%; width: 100%; transform: scaleX(var(--p, 0)); transform-origin: left; background: var(--accent); border-radius: var(--r-pill); transition: transform var(--t-base) var(--ease-out); }
.progress .count { font-family: var(--font-body); font-size: .9rem; color: var(--muted); white-space: nowrap; }
.step { background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow-1); display: grid; gap: 18px; }
.step h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.step .q { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.015em; }
.step-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.step-actions .right { display: flex; gap: 10px; flex-wrap: wrap; }
/* the priced package step is 2.6k/4.8k px tall: its actions stay on screen while the extras scroll (09-13 audit) */
.step:has(.pkg) .step-actions { position: sticky; bottom: 0; z-index: 3; background: linear-gradient(180deg, rgba(10,10,10,0), var(--ink-1) 38%); padding: 18px 0 12px; margin-top: 14px; }
.enter { animation: rise var(--t-base) var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* availability answer */
.answer { border-radius: var(--r-lg); padding: 20px; border: 1px solid var(--line); background: var(--ink-2); display: grid; gap: 8px; }
.answer .status { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--faint); flex: none; }
.answer.ok { border-color: rgba(95,209,150,.5); } .answer.ok .dot { background: var(--good); box-shadow: 0 0 0 5px var(--good-soft); }
.answer.limited { border-color: rgba(255,255,255,.5); } .answer.limited .dot { background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.answer.full { border-color: rgba(240,112,74,.5); } .answer.full .dot { background: var(--warn); box-shadow: 0 0 0 5px var(--warn-soft); }
.answer .alt { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* packages */
.packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pkg { position: relative; display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--ink-1); cursor: pointer; transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-fast); }
.pkg:hover { transform: translateY(-2px); border-color: var(--faint); }
.pkg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pkg[data-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pkg .cap { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pkg .price { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pkg ul { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: .92rem; }
.pkg li { margin-bottom: 3px; }
.pkg .exvat { font-family: var(--font-mono); font-size: .78rem; color: var(--faint); font-variant-numeric: tabular-nums; margin-top: -6px; }
/* per-tier branching detail — rebuilt on every tier click */
.tier-detail { margin-top: 14px; padding: clamp(16px, 2.5vw, 24px); border-radius: var(--r-lg); border: 1px solid var(--gold-line); background: linear-gradient(160deg, var(--gold-soft), transparent 60%), var(--ink-1); }
.tier-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tier-meta .chip { cursor: default; color: var(--text); gap: 8px; font-size: .85rem; min-height: 34px; padding: 0 12px; border-color: var(--gold-line); }
.tier-meta .chip svg { width: 14px; height: 14px; color: var(--gold); flex: none; }
.tier-segs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.tier-seg h4 { font-size: .78rem; font-family: var(--font-mono); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.tier-seg p { color: var(--muted); font-size: .9rem; margin: 0; line-height: 1.55; }
.callout.gold { border-left-color: var(--gold); color: var(--gold); }
/* weddings page — the rate card as sales cards */
.wpkgs { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.wpkg { cursor: default; }
.wpkg:hover { transform: none; border-color: var(--gold-line); }
.wpkg .tier-meta { margin: 2px 0 4px; }
.wpkg .btn { margin-top: 8px; justify-self: start; }
.wpkg .rig summary { cursor: pointer; font-family: var(--font-body); font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--gold); padding: 8px 0; white-space: nowrap; }
.extra .plus { display: grid; place-items: center; width: 20px; height: 20px; color: var(--gold); font-weight: 700; }
.wpkg .rig summary:hover { color: var(--text); }
.wpkg .rig[open] summary { margin-bottom: 8px; }
.wpkg .rig .tier-segs { grid-template-columns: 1fr; }
.extras { display: grid; gap: 8px; }
.extra { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--ink-1); cursor: pointer; min-height: 52px; }
.extra input { width: 20px; height: 20px; min-height: 0; accent-color: var(--accent); margin: 0; }
.extra .price { font-family: var(--font-mono); color: var(--muted); font-size: .92rem; white-space: nowrap; }
.extra .note { font-style: normal; color: var(--faint); font-size: .85rem; display: block; }
.extra.included { cursor: default; border-color: var(--gold-line); background: linear-gradient(160deg, var(--gold-soft), transparent 65%), var(--ink-1); }
.extra.included .inc-mark { display: grid; place-items: center; width: 20px; height: 20px; color: var(--gold); }
.extra.included .inc-mark svg { width: 16px; height: 16px; }
.extra.included .price { color: var(--gold); }
.summary { display: grid; gap: 6px; font-size: .98rem; }
.summary .line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 0; }
.summary .line b { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary .total { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; border-bottom: 0; padding-top: 12px; }
.tag { display: inline-block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tag-good { background: var(--good-soft); color: var(--good); }
.tag-muted { background: var(--ink-2); color: var(--muted); border: 1px solid var(--line); }
.callout { border-left: 3px solid var(--accent); padding: 6px 0 6px 16px; color: var(--muted); font-size: .95rem; }

/* cards & grids */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.door { display: grid; gap: 12px; align-content: start; padding: clamp(20px, 3vw, 30px); border-radius: var(--r-lg); border: 0; background: var(--ink-1); box-shadow: var(--shadow-1); transition: transform var(--t-base) var(--ease-spring), border-color var(--t-base); }
.door:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.door h3 { font-size: 1.6rem; }
.door p { color: var(--muted); margin: 0; }
.door.dj { border-color: rgba(255,255,255,.45); background: linear-gradient(160deg, rgba(255,255,255,.12), transparent 55%), var(--ink-1); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { display: grid; gap: 10px; align-content: start; border-radius: var(--r-lg); border: 0; background: var(--ink-1); overflow: hidden; transition: transform var(--t-base) var(--ease-spring), border-color var(--t-base); }
.card[data-action]:hover, .card[data-clip]:hover, .card[role="button"]:hover, a.card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.card .body { padding: 16px 18px 18px; display: grid; gap: 8px; }
.card p { color: var(--muted); margin: 0; font-size: .95rem; }
.media { position: relative; aspect-ratio: 16 / 10; background: radial-gradient(80% 70% at 30% 20%, rgba(255,255,255,.22), transparent 60%), linear-gradient(160deg, var(--ink-3), var(--ink-1)); overflow: hidden; }
.media img, .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media .ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; color: var(--faint); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; }
.media .ph::before { content: ""; position: absolute; inset: 12px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.media .play { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: rgba(11,12,16,.7); border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--text); }
.media .play svg { width: 18px; height: 18px; }
.media.portrait { aspect-ratio: 3 / 4; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--ink-1); color: var(--muted); font-weight: 600; font-size: .9rem; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.chip:hover { color: var(--text); border-color: var(--faint); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 28px; }
.stat { padding: 20px 0 18px; border: 0; border-radius: 0; background: none; } /* 09-13: hairlines, not boxes — the work/weddings grammar */
.stat .k { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; letter-spacing: -0.03em; line-height: 1; }
.stat .v { color: var(--muted); font-size: .9rem; margin-top: 6px; }
.venues { display: flex; flex-wrap: wrap; gap: 10px; }
.venue { font-family: var(--font-display); font-weight: 700; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-1); color: var(--muted); }
.review { display: grid; gap: 10px; padding: 20px; border-radius: var(--r-lg); border: 0; background: var(--ink-1); }
.review .who { font-size: .9rem; color: var(--muted); font-family: var(--font-body); }
.slot { border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: 20px; color: var(--muted); display: grid; gap: 8px; }
.slot .tag { justify-self: start; }
.faq details { border-top: 0; padding: 8px 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent); font-size: 1.2rem; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); margin: 0 0 14px; max-width: 64ch; }
.timeline { display: grid; gap: 0; border-left: 2px solid var(--line); margin-left: 8px; }
.tl { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 12px 0 12px 20px; position: relative; }
.tl::before { content: ""; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.tl .y { font-family: var(--font-mono); color: var(--accent); font-weight: 600; }
.tl .t { color: var(--muted); }
.cta-band { background: linear-gradient(120deg, rgba(255,255,255,.16), transparent 60%), var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); display: grid; gap: 14px; }
.cta-band h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--t-editorial) var(--ease-editorial), transform var(--t-editorial) var(--ease-editorial); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* footer */
.site-footer { border-top: 0; padding: 48px 0 40px; color: var(--muted); font-size: .92rem; }
.site-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.site-footer h3, .site-footer h4 { font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--muted); font-family: var(--font-body); font-weight: 600; margin-bottom: 10px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }
.site-footer .legal { margin-top: 28px; padding-top: 18px; border-top: 0; display: grid; gap: 6px; font-size: .82rem; color: var(--faint); }
.hero-media .ph { align-content: end; justify-items: end; padding: 0 16px 14px; font-size: .62rem; }
.hero-media .ph::before { display: none; }

/* page header */
.page-head { padding: clamp(40px, 6vw, 72px) 0 clamp(20px, 3vw, 36px); display: grid; gap: 12px; }
.page-head h1 { font-size: clamp(2.2rem, 5.6vw, 4rem); }
/* 09-14 (Wayne 10:50: "both book a dj and plan a production to have a main foto behind it, the same idea as wedding and work"):
   a photograph behind the page head on the two wizard pages, the weddings hero grammar at a form page's height. The frame sits
   behind the head only; the scrim runs down to the page ground so the wizard card starts on solid ink; the copy keeps its local
   fade (the doors device) instead of a darker photograph; the frame drifts on the parallax engine (motion.js writes --fy on the
   [data-parallax] carrier, transform only, off under reduced motion). Tiers 800/1170/1600 by width; --hero-pos per frame. */
.page-hero { position: relative; min-height: min(64vh, 640px); display: grid; align-content: end; overflow: hidden; }
/* Wayne 11:05 on the first render: "make this line fade better". The scrim alone left the photograph's texture readable up to the
   cut; the photograph now dissolves itself (a mask on the carrier, transparent 3px above the band's foot) and the scrim eases in. */
.page-hero > picture[data-parallax] { position: absolute; inset: -22px 0; display: block; -webkit-mask-image: linear-gradient(180deg, #000 50%, rgba(0, 0, 0, 0.74) 68%, rgba(0, 0, 0, 0.34) 84%, transparent 96%); mask-image: linear-gradient(180deg, #000 50%, rgba(0, 0, 0, 0.74) 68%, rgba(0, 0, 0, 0.34) 84%, transparent 96%); }
.page-hero > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, center 50%); filter: saturate(0.92) contrast(1.05); transform: translateY(calc(var(--fy, 0) * 1px)); will-change: transform; }
.page-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.28) 62%, rgba(0, 0, 0, 0.7) 86%, var(--ink-0) 100%); }
.page-hero-inner { position: relative; z-index: 1; width: 100%; }
body[data-page="dj"] .page-hero { --hero-pos: center 58%; }   /* the console: faders and jog wheels in the band, the dark hood above */
/* Wayne 11:05: "rather use the part you are cutting out a bit more because we want to see the stage better": the frame is anchored
   to its foot and the band is taller on desktop, so the deck and the movers sit whole above the type and the type lands on the dark floor. */
body[data-page="tech"] .page-hero { --hero-pos: center 100%; }
@media (min-width: 900px) { body[data-page="tech"] .page-hero { min-height: min(80vh, 800px); } }
.page-hero .page-head { position: relative; isolation: isolate; padding-top: clamp(88px, 14vw, 150px); padding-bottom: clamp(14px, 2vw, 24px); }
.page-hero .page-head::before { content: ""; position: absolute; inset: -56px -14% -20px -12%; z-index: -1; pointer-events: none; background: radial-gradient(72% 110% at 34% 62%, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.46) 48%, rgba(0, 0, 0, 0) 76%); }
@media (max-width: 899px) {
  .page-hero { min-height: 58vh; }
  .page-hero::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.28) 28%, rgba(0, 0, 0, 0.6) 58%, var(--ink-0) 100%); }
}
@media (prefers-reduced-motion: reduce) { .page-hero > picture > img { transform: none !important; } }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px 48px; align-items: start; }
.prose { max-width: 60ch; }
.prose h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: -0.02em; margin: 36px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); }
.prose h3 { margin: 22px 0 8px; }
.json { background: var(--ink-0); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; font-family: var(--font-mono); font-size: .8rem; line-height: 1.5; color: var(--muted); overflow-x: auto; max-height: 320px; }
/* glow accents */
.eyebrow { color: #D9D9D9; }
.answer.ok { box-shadow: var(--sh-2), 0 0 40px -18px rgba(255,255,255,.45); } /* the light on the object, not a halo on the headline (09-13 pass 2) */
.pkg[data-checked="true"] { box-shadow: inset 0 0 0 1px var(--accent), var(--glow); }
.choice input:checked + span, .chip[aria-pressed="true"] { box-shadow: var(--bevel), 0 0 16px rgba(255,255,255,.35); } /* KIT: a pressed key, not a glowing chip */
.progress .fill { box-shadow: 0 0 12px rgba(255,255,255,.5); }
.stat .k[data-count], .stat .k:has([data-count]) { text-shadow: 0 0 18px rgba(255,255,255,.25); } /* live numbers only; word stats stay clean (09-13 pass 2) */
.hero-media::after { background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.68) 45%, rgba(0,0,0,.98) 100%), radial-gradient(55% 45% at 70% 30%, rgba(255,255,255,.12), transparent 70%); }
.hero .lede { color: #E9E9E9; text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 0 18px rgba(0,0,0,.6); }
.hero h1 { text-shadow: 0 2px 4px rgba(0,0,0,.5); }

/* hover-to-play clips + video modal */
.media video.hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-base); }
.media video.hover.on { opacity: 1; }
.media .play { cursor: pointer; transition: transform var(--t-fast) var(--ease-spring); }
.media .play:hover { transform: scale(1.06); box-shadow: var(--glow); }
.card[data-clip] { cursor: pointer; }
.vmodal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.88); display: grid; place-items: center; padding: 16px; animation: modal-in 200ms var(--ease-out) both; }
.vmodal > video, .vmodal > .frame, .vmodal > img { animation: modal-pop 220ms var(--ease-out) both; }
.vmodal.closing { animation: modal-out 150ms var(--ease-out) forwards; pointer-events: none; }
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-out { to { opacity: 0; } }
@keyframes modal-pop { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
.vmodal video { max-width: min(100%, 1100px); max-height: 88vh; border-radius: 12px; background: #000; box-shadow: var(--glow); outline: none; }
.vmodal.portrait video { max-width: min(100%, 460px); }
.vmodal .close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--ink-2); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.vmodal .close svg { width: 20px; height: 20px; }
.hero-media video { display: block; }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink-2); border: 1px solid var(--line-strong); color: var(--text); padding: 12px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-2); z-index: 70; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity var(--t-base); }
.toast.show { opacity: 1; }
@media (min-width: 900px) { .toast { bottom: 24px; } }

/* logo + socials + YouTube frame (shared by every page) */
.logo { align-items: center; }
.logo-img { display: block; height: 56px; width: auto; filter: drop-shadow(0 0 10px rgba(255,255,255,.18)); transition: transform var(--t-base) var(--ease-spring); }
.logo:hover .logo-img { transform: translateY(-1px); } /* the drop-shadow is set once, never tweened (design system) */
@media (max-width: 899px) { .logo-img { height: 44px; } .site-header .bar { min-height: 64px; } }
.footer-logo { display: block; height: 52px; width: auto; margin-bottom: 12px; opacity: .9; }
.site-footer .socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.site-footer .socials a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted); text-decoration: none; font-size: .88rem; transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-spring); }
.site-footer .socials a:hover { color: var(--text); border-color: var(--faint); transform: translateY(-1px); }
.site-footer .socials svg { width: 16px; height: 16px; }
.site-footer .legal a { color: var(--muted); }
.vmodal .frame { width: min(100%, 1100px); aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: var(--glow); }
.vmodal .frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.media .tag.views { position: absolute; z-index: 2; }
/* work gallery: masonry columns, mixed aspect, photo lightbox */
.masonry { columns: 3; column-gap: 14px; padding-bottom: 64px; }
.masonry .card { break-inside: avoid; margin: 0 0 14px; display: block; }
.masonry .card .media.portrait { aspect-ratio: 3 / 4; }
.masonry .card[data-action] { cursor: pointer; }
.masonry .card .chips { margin-bottom: 4px; }
@media (max-width: 1023px) { .masonry { columns: 2; } }
@media (max-width: 599px) { .masonry { columns: 1; } }
.vmodal.img img { max-width: min(100%, 1100px); max-height: 88vh; border-radius: 12px; box-shadow: var(--glow); object-fit: contain; }
.legacy { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ink-1); display: grid; gap: 6px; }
.legacy img { height: 54px; width: auto; }
.legacy::after { content: "Xtreme Promotions Sound & Lighting, the 1986 lockup, still on the trucks."; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

/* ============ Photo-forward tier cards (Direction C — Jandre's pick, 09-11) ============
   Cards carry their photo via --tier-photo (inline, from data/content.json tier.photo).
   The gradient stack keeps the text zone near-solid black for contrast; a faint champagne
   tint warms every photo the same way so six different shots read as one family. */
.pkg.has-photo {
  background-image:
    linear-gradient(178deg, rgba(10, 8, 5, 0.38) 0%, rgba(10, 8, 5, 0.56) 32%, rgba(8, 6, 4, 0.9) 58%, rgba(6, 5, 3, 0.965) 100%),
    linear-gradient(0deg, rgba(232, 200, 124, 0.09), rgba(232, 200, 124, 0.09)),
    var(--tier-photo);
  background-size: cover, cover, cover;
  background-position: center top, center, center;
  background-color: var(--ink-1);
  border-color: rgba(255, 255, 255, 0.13);
}
.pkg.has-photo .cap { color: var(--gold); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65); }
.pkg.has-photo h3,
.pkg.has-photo .price { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
.pkg.has-photo .exvat { color: #cfc8bb; }
.pkg.has-photo ul { color: #d9d2c5; }
.pkg.has-photo li { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }

/* wizard picker: compact photo header above the tier name */
.pkg.has-photo .cap { margin-top: 44px; }
.pkg.has-photo[data-checked="true"] { border-color: var(--gold-line); }

/* ============ Weddings page — editorial exhibit layout (design pass 09-11) ============
   Reference lock: KeepGrading (void-black gallery, imagery = the exhibit, hairline UI)
   + Kobu (wide-tracked mono museum labels) + one monumental hero type gesture.
   Photos are clean-edged panels with text BESIDE them — never text over gradients. */
:root { --hairline: rgba(255, 255, 255, 0.14); } /* --label (a warm grey) retired 09-14: white is the only light; labels use --muted */

/* hero */
.wed-hero { position: relative; min-height: min(88vh, 860px); display: grid; align-content: end; overflow: hidden; }
.wed-hero > img, .wed-hero > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: saturate(0.92) contrast(1.05); }
.wed-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.05) 32%, rgba(0, 0, 0, 0.06) 55%, rgba(0, 0, 0, 0.86) 100%); }
.wed-hero-inner { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(28px, 5vw, 64px); }
.wed-hero h1 { font-size: clamp(3rem, 8.5vw, 6.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 0.96; margin: 14px 0 18px; text-wrap: balance; }
.wed-lede { max-width: 560px; color: #d6d2c9; font-size: 1.02rem; line-height: 1.7; margin: 0; }
.wed-kicker { display: block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.wed-hero-meta { position: relative; z-index: 1; border-top: 0; margin-top: clamp(24px, 4vw, 44px); }
.wed-hero-meta > div { display: flex; flex-wrap: wrap; gap: 8px clamp(20px, 4vw, 56px); padding-top: 16px; padding-bottom: 16px; }
.wed-hero-meta span { font-family: var(--font-body); font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--muted); white-space: nowrap; }

/* mid-week ticker */
.wed-ticker { font-family: var(--font-body); font-size: 1.05rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gold); text-align: center; padding: clamp(28px, 5vw, 52px) 0 0; margin: 0; }

/* tier exhibits */
.tiers-x { margin-top: clamp(24px, 4vw, 44px); }
.tier-x { display: grid; grid-template-columns: minmax(0, 44%) 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(36px, 6vw, 72px) 0; border-top: 0; }
.tier-x-photo { margin: 0; }
.tier-x-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; filter: saturate(0.88) contrast(1.06); }
.tier-x-index { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; font-family: var(--font-body); font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.tier-x-index .ix { color: var(--gold); font-weight: 600; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; }
.tier-x-index .flag { color: var(--gold); }
.tier-x h3 { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; margin: 10px 0 4px; }
.tier-x-price { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 14px; }
.tier-x-price .sub { font-family: var(--font-body); font-weight: 400; font-size: .9rem; letter-spacing: 0; color: var(--muted); }
.tier-x-sum { margin: 0 0 16px; padding: 0; list-style: none; color: var(--muted); font-size: 0.95rem; } /* 09-13 pass 2: no cap, so its rules end where the meta and rig rules end */
.tier-x-sum li { padding: 7px 0 7px 18px; position: relative; border-top: 0; }
.tier-x-sum li:first-child { border-top: 0; }
.tier-x-sum li::before { content: ""; position: absolute; left: 2px; top: .95em; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.tier-x-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; border-top: 0; border-bottom: 0; padding: 11px 0; margin-bottom: 16px; font-family: var(--font-body); font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.tier-x .rig { margin-bottom: 18px; }
.tier-x .rig summary { cursor: pointer; font-family: var(--font-body); font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--gold); padding: 4px 0; }
.tier-x .rig summary:hover { color: var(--text); }
.tier-x .rig[open] summary { margin-bottom: 10px; }
.tier-x .rig .tier-segs { grid-template-columns: 1fr; }
.tier-x.flagship .tier-x-photo img { box-shadow: 0 24px 70px -30px rgba(232, 200, 124, 0.28); }
.tier-x.flagship { border-top-color: var(--gold-line); }

/* fine print + X-tras museum price list */
.wed-fineprint { border-top: 0; padding: clamp(24px, 4vw, 40px) 0; }
.wed-fineprint p { margin: 12px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.75; max-width: 78ch; }
.wed-xtras { padding: clamp(40px, 7vw, 88px) 0 0; }
.wed-xtras h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); letter-spacing: -0.03em; margin: 12px 0 10px; }
.xlist { margin-top: clamp(20px, 3vw, 34px); border-top: 0; }
.xrow { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 0; }
.xname { color: var(--text); font-size: 0.98rem; min-width: 0; }
.xsub { display: block; font-style: normal; color: var(--faint); font-size: 0.82rem; margin-top: 2px; }
.xlead { flex: 1; border-bottom: 0; transform: translateY(-4px); min-width: 40px; }
.xprice { font-family: var(--font-mono); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.04em; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wed-rider { margin: 22px 0 0; color: var(--faint); font-size: 0.85rem; max-width: 70ch; }

/* closing CTA */
.wed-cta { border-top: 0; margin-top: clamp(48px, 8vw, 96px); padding: clamp(48px, 8vw, 96px) 0 clamp(24px, 4vw, 48px); }
.wed-cta h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: -0.035em; line-height: 0.98; margin: 14px 0 16px; }
.wed-cta .wed-lede { margin-bottom: 26px; }

@media (max-width: 899px) {
  .tier-x { grid-template-columns: 1fr; gap: 20px; }
  .tier-x-photo img { aspect-ratio: 3 / 2; }
  .wed-hero { min-height: 76vh; }
  /* Portrait crops the frame onto the venue's white gable, so the champagne kicker and the
     first H1 line lose their ground. Deepen the scrim and sit the type over the dark archway. */
  .wed-hero > img, .wed-hero > picture > img { object-position: center 50%; }
  .wed-hero::after { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.3) 26%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.92) 100%); }
}

/* ============ Tier ramp — each tier its own metal, richer as you climb (09-11) ============
   One family, escalating: accent tint per tier (index code, ticks, rule tints), photo
   panel grows and gains a metal-tinted glow up the ladder; Inimitable is the showpiece. */
.tier-x { --tacc: #b0866b; --tglow: transparent; }
#silver.tier-x { --tacc: #c3cad2; }
#gold.tier-x { --tacc: #e8c87c; --tglow: rgba(232, 200, 124, 0.16); }
#diamond.tier-x { --tacc: #cfe6ee; --tglow: rgba(180, 220, 235, 0.18); }
#platinum.tier-x { --tacc: #eae7e0; --tglow: rgba(234, 231, 224, 0.2); }
#inimitable.tier-x { --tacc: #e9c87c; --tglow: rgba(233, 200, 124, 0.26); }

.tier-x-index .ix { color: var(--tacc); }
.tier-x-sum li::before { background: var(--tacc); }
.tier-x .rig summary { color: var(--tacc); }
.tier-x-meta { border-top-color: color-mix(in srgb, var(--tacc) 28%, transparent); border-bottom-color: color-mix(in srgb, var(--tacc) 28%, transparent); }

/* panel scale + glow ramp */
#gold.tier-x, #diamond.tier-x { grid-template-columns: minmax(0, 47%) 1fr; }
#platinum.tier-x { grid-template-columns: minmax(0, 50%) 1fr; }
#gold.tier-x .tier-x-photo img,
#diamond.tier-x .tier-x-photo img,
#platinum.tier-x .tier-x-photo img { box-shadow: 0 26px 80px -34px var(--tglow), 0 10px 34px -18px rgba(0, 0, 0, 0.8); }
#platinum.tier-x .tier-x h3, #platinum.tier-x h3 { font-size: clamp(2.2rem, 3.9vw, 3.1rem); }

/* Inimitable — the showpiece: full-width 21/9 photo, framed in champagne, scaled type */
.tier-x.flagship { grid-template-columns: 1fr; gap: 26px; border-top: 0; margin-top: clamp(20px, 3vw, 36px); padding: clamp(28px, 4vw, 48px); border: 1px solid var(--gold-line); border-radius: 6px;
  background: radial-gradient(120% 80% at 85% -10%, rgba(233, 200, 124, 0.08), transparent 55%), var(--ink-1); }
.tier-x.flagship .tier-x-photo img { aspect-ratio: 21 / 9; box-shadow: 0 30px 90px -30px var(--tglow); }
.tier-x.flagship h3 { font-size: clamp(2.6rem, 5vw, 4rem);
  background: linear-gradient(115deg, #fff 30%, var(--tacc) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tier-x.flagship .tier-x-price { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.tier-x.flagship .tier-x-body { max-width: 74ch; }
@media (max-width: 899px) {
  #gold.tier-x, #diamond.tier-x, #platinum.tier-x { grid-template-columns: 1fr; }
  .tier-x.flagship { padding: 20px; }
  .tier-x.flagship .tier-x-photo img { aspect-ratio: 3 / 2; }
}

/* ============ Launch-audit fixes 2026-09-12 ============ */
/* Quote rows: long explanations live on a muted sub-line, never inside the tabular <b>
   (a long string there pushed the whole money screen out of the card). */
.summary .line { align-items: baseline; }
.summary .line > span { min-width: 0; }
.summary .line-sub { display: block; font-style: normal; color: var(--faint); font-size: .82rem; line-height: 1.5; margin-top: 3px; max-width: 46ch; }
.summary .line b { max-width: 48%; text-align: right; }

/* X-tras: the per-unit qualifier rides with the price, in label voice, not price voice. */
.xprice .xunit { font-family: var(--font-body); font-weight: 400; color: var(--faint); font-size: .8rem; margin-left: 6px; letter-spacing: 0; }

/* Saturday strip with no calendar feed: quick-picks, no invented free/busy colour. */
.dates .plain .dot { background: var(--faint); }
.dates .plain .s { color: var(--muted); font-weight: 500; }

/* Choice chips: the visible pill fills its grid row, so neighbours can't sit short. */
.choice { display: grid; }
.choice span { height: 100%; }
.step:has(.pkg) .step-actions .running { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em; color: var(--muted); align-self: center; margin-left: 12px; font-variant-numeric: tabular-nums; }
.step:has(.pkg) .step-actions .running b { color: var(--text); font-weight: 600; text-shadow: var(--glow-text); }

/* 09-13 polish: a visible focus ring on every field; white checkboxes on the extras; quiet list markers */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: none; }
.extra input[type="checkbox"] { accent-color: #fff; width: 18px; height: 18px; }
.prose ul { padding-left: 1.2em; }
.prose li::marker { color: var(--faint); }

/* 09-13 audit (design-core-2): the hero copy sits where the scrim is thinnest — a local fade behind the copy block, the doors device, instead of darkening the whole photograph */
.wed-hero-inner { isolation: isolate; }
.wed-hero-inner::before { content: ""; position: absolute; inset: -72px -24% -28px -22%; z-index: -1; pointer-events: none; background: radial-gradient(76% 112% at 14% 62%, rgba(0,0,0,.86), rgba(0,0,0,.5) 46%, rgba(0,0,0,0) 76%); }

/* ============ KIT 2026-09-13 — the Receptia material + motion system, ported in white (Step 7). ============
   Sync set (identical on Receptia): --edge --sh-1/2/3 --glass --hair --bevel --ease-editorial --t-editorial --t-exit --parallax. Xtreme dropped --dot on 09-13 (the bands carry a waveform strip, not Receptia's dot grid) and added --eq-core/--eq-glow for the hero visualizer, the one colour outside the champagne rule.
   Utilities carry the xe- prefix (house rule: no bare utility-word selectors). Pseudo-elements: .xe-glass uses ::before,
   .xe-lit and .xe-brackets use ::after — never put .xe-lit and .xe-brackets on the same element. See DESIGN-SYSTEM.md. */

/* selection + scrollbar: two cheap craft signals */
::selection { background: #fff; color: #000; }
html { scrollbar-width: thin; scrollbar-color: #2A2A2A #000; }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #000; } ::-webkit-scrollbar-thumb { background: #2A2A2A; border-radius: 8px; }

/* progress bar — painted once, moved by --sp (motion.js) */
.pbar { position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 80; pointer-events: none; }
.pbar i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(var(--sp, 0)); transform-origin: 0 50%; box-shadow: 0 0 12px rgba(255,255,255,.5); }

/* glass panel — gradient border via the mask-composite padding trick; one per section on phones (backdrop-filter budget) */
.xe-glass { position: relative; border-radius: var(--r-lg); background: var(--glass), var(--ink-1); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); border: 1px solid transparent; background-clip: padding-box; box-shadow: var(--sh-2); }
.xe-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.42), rgba(255,255,255,.08) 40%, rgba(255,255,255,.04) 62%, rgba(255,255,255,.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
@media (max-width: 899px) { .xe-glass.xe-flat { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ink-2); } }

/* corner-lit hairline — the light source top-left, static (Linear's masked hairline, via Receptia) */
.xe-lit { position: relative; }
.xe-lit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px solid var(--hair);
  -webkit-mask: radial-gradient(34% 40% at 0 0, #000 0%, transparent 92%); mask: radial-gradient(34% 40% at 0 0, #000 0%, transparent 92%); }

/* corner brackets — the console grammar; 8 no-repeat gradients, no extra element */
.xe-brackets { position: relative; }
.xe-brackets::after { content: ""; position: absolute; inset: -7px; z-index: 2; pointer-events: none; opacity: .5;
  background:
    linear-gradient(#fff 0 0) no-repeat 0 0 / 20px 1.5px, linear-gradient(#fff 0 0) no-repeat 0 0 / 1.5px 20px,
    linear-gradient(#fff 0 0) no-repeat 100% 0 / 20px 1.5px, linear-gradient(#fff 0 0) no-repeat 100% 0 / 1.5px 20px,
    linear-gradient(#fff 0 0) no-repeat 0 100% / 20px 1.5px, linear-gradient(#fff 0 0) no-repeat 0 100% / 1.5px 20px,
    linear-gradient(#fff 0 0) no-repeat 100% 100% / 20px 1.5px, linear-gradient(#fff 0 0) no-repeat 100% 100% / 1.5px 20px; }

/* alternate band — the hero's LED wall asleep: a dim, top-faded plate of the rendered equalizer (Higgsfield, 09-13) at the band's foot,
   full width, under the content (Wayne: the waveform lines "look like an afterthought"; the dots before them were "little white dots")
   + a top-left light wash on ink-1, its own hairlines so no seam prints. 1600 px plate on desktop, 800 px on phones. */
.section.alt { background: url("media/bands/led-foot.webp") 50% 100% / 100% auto no-repeat, radial-gradient(90% 70% at 8% 0%, rgba(255,255,255,.05), transparent 60%), var(--ink-1); border-block: 0; }
@media (max-width: 899px) { .section.alt { background-image: url("media/bands/led-foot-sm.webp"), radial-gradient(90% 70% at 8% 0%, rgba(255,255,255,.05), transparent 60%); } }
.section.alt + .section { border-top: 0; }

/* photo band — the parallax carrier (data-parallax on .xe-film-media) and the vertical mask that kills every crop edge */
.xe-film { position: relative; isolation: isolate; overflow: clip; }
.xe-film-media { position: absolute; inset: -32px 0; z-index: 0; overflow: clip; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
.xe-film-media img, .xe-film-media video { width: 100%; height: 100%; object-fit: cover; display: block; transform: translateY(calc(var(--fy, 0) * 1px)); will-change: transform; }
.xe-film > .wrap { position: relative; z-index: 2; }

/* mono-indexed eyebrow — "01 | Two ways in": the index, a hairline, the label. One per section head, rationed. */
.eyebrow[data-n]::before { content: attr(data-n); color: var(--faint); font-variant-numeric: tabular-nums; margin-right: 10px; padding-right: 0; border-right: 0; }

/* masked line reveal — words rise out of a clipped baseline (anxious kid .fx-line); [data-split] is split by motion.js */
.xe-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .06em 0 .22em; margin: -.06em 0 -.22em; }
.xe-line { display: inline-block; transform: translateY(135%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
.xe-in .xe-line, .in .xe-line { transform: none; }

/* photo settle — opacity + 8% scale into place inside its frame (anxious kid .fx-img); .in from motion.js */
.xe-img { overflow: hidden; }
.xe-img > img, .xe-img > picture > img, .xe-img > video { opacity: 0; transform: scale(1.08); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.xe-img.in > img, .xe-img.in > picture > img, .xe-img.in > video { opacity: 1; transform: none; }

/* arrow-nudge text links (anxious kid) */
.xe-more { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; text-decoration: none; }
.xe-more::after { content: "\2192"; display: inline-block; transition: transform .5s var(--ease-out); }
.xe-more:hover, .xe-more:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.xe-more:hover::after, .xe-more:focus-visible::after { transform: translateX(4px); }

/* ghost buttons invert on hover (anxious kid); the primary stays the lit object */
.btn-ghost:hover { --bg: #fff; --bd: #fff; color: var(--accent-ink); }

/* nav: the hairline draws from the left on hover; the current page keeps its bar */
.nav a { position: relative; }
.nav a:not([aria-current]):not(.btn)::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.nav a:not([aria-current]):not(.btn):hover::after, .nav a:not([aria-current]):not(.btn):focus-visible::after { transform: scaleX(1); }

/* index: the header is clear over the hero photograph until the page moves (html.scrolled from motion.js); solid while the menu is open */
body[data-hero] .site-header { background-color: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .5s var(--ease-out), border-color .5s var(--ease-out); }
html.scrolled body[data-hero] .site-header, body[data-hero] .site-header:has(.menu[data-open="true"]) { background-color: rgba(11,12,16,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* the mobile bar hides on scroll-down with a 6px dead zone and returns on scroll-up (motion.js); transform only */
.mobile-bar { transition: transform .32s var(--ease-out); }
body.mobile-bar-hidden .mobile-bar, body.cta-open .mobile-bar { transform: translateY(120%); } /* cta-open: a lit primary button of the page is on screen (motion.js) */
@media (max-width: 899px) { .xe-film-media img, .xe-film-media video, .xe-wordmark b { transform: none; will-change: auto; } } /* atmosphere never ships to phones */

/* the burger becomes an X */
.menu-btn .bars { position: relative; width: 22px; height: 14px; display: block; }
.menu-btn .bars i { position: absolute; left: 0; right: 0; top: 2px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform var(--t-base) var(--ease-out); }
.menu-btn .bars i + i { top: auto; bottom: 2px; }
.menu-btn[aria-expanded="true"] .bars i:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars i + i { transform: translateY(-4.25px) rotate(-45deg); }
/* the mobile menu arrives line by line */
.menu[data-open="true"] a { animation: rise var(--t-base) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* footer wordmark — the ghost at the bottom of every page (Receptia's kinetic wordmark); drifts with the parallax engine */
.xe-wordmark { overflow: hidden; pointer-events: none; user-select: none; line-height: .8; margin: -8px 0 8px; }
.xe-wordmark b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 12.5vw, 12rem); letter-spacing: -0.045em; color: #fff; opacity: .07; white-space: nowrap; text-align: center; transform: translateY(calc(var(--fy, 0) * 1px)); will-change: transform; }

/* numbers that count keep their width */
[data-count] { font-variant-numeric: tabular-nums; }

/* grain — the one atmosphere layer on every page, desktop only (atmosphere layers never ship to phones), painted once and tiled */
@media (min-width: 900px) {
  body::after { content: ""; position: fixed; inset: 0; z-index: 65; pointer-events: none; opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .xe-line, .xe-img > img, .xe-img > picture > img, .xe-img > video { transform: none; opacity: 1; transition: none; }
  .xe-film-media img, .xe-film-media video, .xe-wordmark b { transform: none !important; }
  .pbar i, .mobile-bar, body[data-hero] .site-header { transition: none; }
}