/*
 * Theme Name:    Fiestic Office
 * Theme URI:     https://office.fiestic.com
 * Author:        Fiestic
 * Author URI:    https://fiestic.com
 * Description:   Two-color editorial theme for office.fiestic.com.
 *                Brand palette: --pk (#fa0d4b) + --dk (#231842).
 *                Typography: proxima-nova (headings) + proxima-nova-condensed (body).
 *                Layout: alternating light/dark sections, pink accent system.
 * Version:       3.0.0
 * Requires at least: 6.4
 * Tested up to:  6.8
 * Requires PHP:  8.0
 * License:       GPL-2.0-or-later
 * Text Domain:   fiestic-office
 */

/* ============================================================
   TYPEKIT — proxima-nova + proxima-nova-condensed
   ============================================================ */
@import url("https://use.typekit.net/yzq8zgx.css");

/* ============================================================
   1. DESIGN TOKENS — two colors, everything derived from them
   ============================================================ */
:root {
  /* --- Core brand — only two true colors --- */
  --pk:        #fa0d4b;   /* Fiestic pink  — every accent, CTA, action   */
  --pk-deep:   #AF0431;   /* Darkened pink — hover states on pink elements */
  --dk:        #231842;   /* Fiestic blue  — dark backgrounds + body text  */
  --dk-mid:    #48397F;   /* Mid blue      — secondary text on light bg    */
  --dk-lt:     #A2A8D8;   /* Light blue    — muted text on dark bg         */
  --dk-pale:   #F0EEF8;   /* Pale blue     — light section backgrounds     */

  /* --- Functional surfaces (derived tints, not new hues) --- */
  --surface:   #ffffff;
  --surface-2: #F0EEF8;   /* pale blue-white — alternating light sections  */
  --surface-3: #E8E5F4;   /* slightly deeper pale — hover on light cards   */
  --border:    rgba(35, 24, 66, 0.12);   /* subtle blue border on white     */
  --border-dk: rgba(255, 255, 255, 0.08);/* subtle border on dark bg        */
  --muted:     rgba(35, 24, 66, 0.45);   /* secondary text on white         */
  --muted-dk:  rgba(162, 168, 216, 0.6); /* secondary text on dark bg       */

  /* --- Green — seat availability only (functional, not brand) --- */
  --av:        #1D9E75;   /* available seat fill                            */
  --av-lt:     #E8F8F2;   /* available seat background                      */
  --av-dk:     #085041;   /* available seat text                            */

  /* --- Typography --- */
  --font-head: proxima-nova, sans-serif;
  --font-body: proxima-nova-condensed, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Mono", "Courier New", monospace;

  /* --- Type scale --- */
  --text-xs:   10px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;

  /* --- Spacing --- */
  --space-xs:  6px;
  --space-sm:  12px;
  --space-md:  20px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;

  /* --- Layout --- */
  --pad-x:       24px;
  --max-width:   1180px;
  --nav-h:       56px;
  --border-r:    4px;
  --border-r-lg: 10px;

  /* --- Shadows (structural only — no decorative shadows) --- */
  --focus-ring: 0 0 0 3px rgba(250, 13, 75, 0.25);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  color: var(--dk);
  background: var(--surface);
  line-height: 1.6;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

ul, ol { list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

/* Headings use proxima-nova (non-condensed) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--dk);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); letter-spacing: 0; }
h6 { font-size: var(--text-base); letter-spacing: 0.04em; }

/* Pink emphasis within headings */
h1 em, h2 em, h3 em {
  font-style: normal;
  color: var(--pk);
}

/* Dark section heading overrides */
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 { color: var(--surface); }

.section-dark h1 em,
.section-dark h2 em,
.section-dark h3 em { color: var(--pk); }

/* Body text */
p {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--dk-mid);
}

.section-dark p { color: var(--muted-dk); }

/* Eyebrow labels — monospace, uppercase, pink */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pk);
  display: block;
  margin-bottom: var(--space-sm);
}

.section-dark .eyebrow { color: rgba(255,255,255,0.35); }
.eyebrow-pk { color: var(--pk) !important; }

/* Monospace data / ticker text */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}

/* Blockquote / pull quote */
blockquote {
  border-left: 3px solid var(--pk);
  border-radius: 0;
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-lg) 0;
  background: var(--dk-pale);
}

blockquote p {
  font-family: var(--font-head);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--dk);
  line-height: 1.5;
  margin: 0;
}

blockquote cite {
  font-size: var(--text-sm);
  color: var(--muted);
  display: block;
  margin-top: var(--space-xs);
}

/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.section-light {
  background: var(--surface);
  padding: var(--space-xl) var(--pad-x);
}

.section-pale {
  background: var(--surface-2);
  padding: var(--space-xl) var(--pad-x);
  border-left: 3px solid var(--pk);
  border-radius: 0;
}

.section-dark {
  background: var(--dk);
  padding: var(--space-xl) var(--pad-x);
}

.section-mid {
  background: var(--dk-mid);
  padding: var(--space-xl) var(--pad-x);
}

/* Section accent lines */
.section-dark + .section-light { border-top: 2px solid var(--pk); }
.section-light + .section-dark { border-top: 1px solid var(--border); }

/* Two-column grid */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

/* Three-column grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

/* Four-column grid */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

/* Auto-fit grid */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-sm);
}

/* ============================================================
   5. NAVIGATION
   ============================================================ */
/* ── Header ─────────────────────────────────────────────────── */
.fo-header {
  position: sticky;
  top: 0;
  z-index: 9000;
  height: var(--nav-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--pad-x);
  gap: var(--space-lg);
}

.fo-header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 2px;
  background: var(--pk);
}

/* Logo */
.fo-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dk);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.fo-logo span { color: var(--pk); }
.fo-logo-mark {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
  order: -1;
}
.fo-footer-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  margin-bottom: var(--space-sm);
}
.fo-footer-logo span { color: var(--pk); }
.fo-footer-mark {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
  order: -1;
  filter: drop-shadow(0 0 5px rgba(201,168,76,.3));
}

/* Desktop nav */
.fo-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-left: auto;
}

.fo-nav-link {
  font-size: var(--text-sm);
  color: var(--dk-mid);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: 4px;
}
.fo-nav-link:hover,
.fo-nav-link.is-active { color: var(--dk); font-weight: 600; }

.fo-nav-cta {
  display: inline-flex;
  align-items: center;
  background: var(--pk);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 8px 18px;
  border-radius: var(--border-r);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s;
  flex-shrink: 0;
}
.fo-nav-cta:hover { opacity: .88; }

/* Dropdown */
.fo-dd-wrap { position: relative; }

.fo-dd-btn svg {
  transition: transform .2s;
  flex-shrink: 0;
}
.fo-dd-btn.is-open svg { transform: rotate(180deg); }

.fo-dd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--pk);
  border-radius: var(--border-r-lg);
  box-shadow: 0 12px 40px rgba(35,24,66,.14);
  padding: 8px;
  z-index: 9100;
}
.fo-dd-panel.is-open { display: block; }

.fo-dd-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--border-r);
  text-decoration: none;
  transition: background .1s;
}
.fo-dd-item:hover { background: var(--surface-2); }

.fo-dd-icon {
  font-size: 1.1rem;
  width: 26px;
  flex-shrink: 0;
  line-height: 1.3;
}

.fo-dd-item strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--dk);
  line-height: 1.3;
}
.fo-dd-item small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
  font-style: normal;
}

/* Burger */
.fo-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--border-r);
  cursor: pointer;
  padding: 0 9px;
  margin-left: auto;
  flex-shrink: 0;
}
.fo-burger span {
  display: block;
  height: 2px;
  background: var(--dk);
  border-radius: 1px;
  transition: transform .25s, opacity .2s;
}
.fo-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fo-burger.is-open span:nth-child(2) { opacity: 0; }
.fo-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer */
.fo-drawer {
  display: none;
  position: fixed;
  top: var(--nav-h);
  right: 0;
  bottom: 0;
  width: min(340px, 88vw);
  background: var(--surface);
  box-shadow: -8px 0 40px rgba(35,24,66,.16);
  z-index: 8998;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.fo-drawer.is-open {
  transform: translateX(0);
}

.fo-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(35,24,66,.45);
  z-index: 8997;
  opacity: 0;
  transition: opacity .28s;
}
.fo-overlay.is-visible { opacity: 1; }

.fo-drawer-inner {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) var(--space-lg) var(--space-2xl);
  gap: 2px;
}

.fo-dr-link {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--dk);
  text-decoration: none;
  padding: 13px 4px;
  border-bottom: 1px solid var(--border);
  transition: color .15s;
}
.fo-dr-link:hover { color: var(--pk); }

.fo-dr-sub {
  font-size: 15px;
  font-weight: 400;
  color: var(--dk-mid);
  padding-left: var(--space-md);
}

.fo-dr-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pk);
  padding: 20px 4px 8px;
}

.fo-dr-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

.fo-dr-cta {
  display: block;
  background: var(--pk);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  padding: 14px;
  border-radius: var(--border-r);
  text-decoration: none;
  margin-bottom: var(--space-sm);
  transition: opacity .15s;
}
.fo-dr-cta:hover { opacity: .88; }

/* Ticker */
.fo-ticker {
  overflow: hidden;
  background: var(--dk);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.fo-ticker-track {
  display: flex;
  animation: fo-ticker 32s linear infinite;
  width: max-content;
}
.fo-tick {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: rgba(255,255,255,.35);
  padding: 9px 24px;
  border-right: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;
  flex-shrink: 0;
}
.fo-tick b { color: var(--pk); font-weight: 700; }

@keyframes fo-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Legacy classes still used in page templates */
.site-header { display: none; }
.status-ticker, .ticker-inner, .tick { display: none; }
.site-logo { display: none; }
.site-nav { display: none !important; }
.nav-toggle { display: none !important; }

/* Footer social icons */
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  color: rgba(255,255,255,.45);
  transition: color .15s, border-color .15s;
  text-decoration: none;
}
.footer-social:hover { color: var(--pk); border-color: var(--pk); }

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: var(--border-r);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1;
  white-space: nowrap;
}

/* Primary — pink fill */
.btn-primary {
  background: var(--pk);
  color: var(--surface);
  border-color: var(--pk);
}
.btn-primary:hover {
  background: var(--pk-deep);
  border-color: var(--pk-deep);
  color: var(--surface);
  text-decoration: none;
}

/* Secondary — outlined, pink border */
.btn-secondary {
  background: transparent;
  color: var(--pk);
  border-color: var(--pk);
}
.btn-secondary:hover {
  background: var(--pk);
  color: var(--surface);
  text-decoration: none;
}

/* Ghost — for dark backgrounds */
.btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.65);
  border-color: rgba(255,255,255,0.2);
}
.btn-ghost:hover {
  border-color: rgba(255,255,255,0.5);
  color: var(--surface);
  text-decoration: none;
}

/* Dark fill — on light backgrounds */
.btn-dark {
  background: var(--dk);
  color: var(--surface);
  border-color: var(--dk);
}
.btn-dark:hover {
  background: var(--dk-mid);
  border-color: var(--dk-mid);
  color: var(--surface);
}

/* Muted — inactive tier CTA */
.btn-muted {
  background: var(--surface-3);
  color: var(--dk);
  border-color: transparent;
}
.btn-muted:hover {
  background: var(--border);
  text-decoration: none;
}

/* Size modifiers */
.btn-sm { font-size: var(--text-xs); padding: 6px 14px; }
.btn-lg { font-size: var(--text-base); padding: 13px 28px; }
.btn-full { display: block; width: 100%; text-align: center; }

/* Button focus */
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ============================================================
   7. STATUS TICKER
   ============================================================ */
.status-ticker {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--pk);
  border-radius: 0;
  padding: 8px var(--pad-x);
  overflow: hidden;
  white-space: nowrap;
}

.ticker-inner {
  display: inline-flex;
  gap: var(--space-lg);
  animation: ticker-scroll 30s linear infinite;
}

.ticker-inner:hover { animation-play-state: paused; }

.tick {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--dk-mid);
  white-space: nowrap;
}

.tick b {
  color: var(--dk);
  font-weight: 700;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   8. HERO SECTION
   ============================================================ */
.hero {
  background: transparent;
  padding: var(--space-2xl) var(--pad-x) var(--space-xl);
  position: relative;
  overflow: hidden;
}

/* Pink top accent line */
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--pk);
  z-index: 10;
}

/* Subtle grid texture on hero */
.hero-grid-overlay {
  background-image:
    repeating-linear-gradient(
      0deg, transparent, transparent 39px,
      rgba(250,13,75,0.04) 39px, rgba(250,13,75,0.04) 40px
    ),
    repeating-linear-gradient(
      90deg, transparent, transparent 59px,
      rgba(250,13,75,0.04) 59px, rgba(250,13,75,0.04) 60px
    );
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.35);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.hero h1 {
  color: var(--surface);
  font-size: clamp(28px, 5vw, 48px);
  margin-bottom: var(--space-sm);
}

.hero p {
  color: rgba(255,255,255,0.45);
  font-size: var(--text-base);
  max-width: 400px;
  margin-bottom: var(--space-lg);
}

.hero-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

/* Hero stat strip */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  max-width: 480px;
}

.hero-stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--border-r);
  padding: 12px 14px;
}

.hero-stat-num {
  font-family: var(--font-head);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--surface);
  line-height: 1;
}

.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
}

/* ============================================================
   9. MISSION STRIP
   ============================================================ */
.mission-strip {
  background: var(--surface-2);
  border-left: 3px solid var(--pk);
  border-radius: 0;
  padding: var(--space-lg) var(--pad-x);
}

.mission-quote {
  font-family: var(--font-head);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--dk);
  line-height: 1.4;
  max-width: 600px;
}

.mission-quote em {
  font-style: normal;
  color: var(--pk);
}

/* ============================================================
   10. WORKSPACE SPECS GRID
   ============================================================ */
.specs-section {
  background: var(--dk);
  padding: var(--space-xl) var(--pad-x);
}

.spec-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 2px solid var(--pk);
  border-radius: var(--border-r-lg);
  padding: var(--space-md);
}

.spec-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.2);
  margin-bottom: 5px;
}

.spec-title {
  font-family: var(--font-head);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--surface);
  margin-bottom: 4px;
}

.spec-desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.35);
  line-height: 1.55;
}

.spec-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  font-weight: 700;
  color: rgba(250,13,75,0.65);
  margin-top: 8px;
  display: block;
}

/* ============================================================
   11. MEMBERSHIP TIER CARDS
   ============================================================ */
.tiers-section {
  background: var(--surface);
  padding: var(--space-xl) var(--pad-x);
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.tier-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--border-r-lg);
  padding: var(--space-md);
  position: relative;
  transition: border-color 0.15s;
}

.tier-card:hover { border-color: var(--dk-lt); }

/* Featured / most popular */
.tier-card.featured {
  background: var(--surface);
  border: 2px solid var(--pk);
}

.tier-card.featured:hover { border-color: var(--pk-deep); }

/* Popular badge */
.tier-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pk);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

.tier-num {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 5px;
}

.featured .tier-num { color: var(--pk); }

.tier-name {
  font-family: var(--font-head);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--dk);
  margin-bottom: 4px;
}

.tier-price {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 700;
  color: var(--dk);
  line-height: 1;
  margin-bottom: 3px;
}

.featured .tier-price { color: var(--pk); }

.tier-price .per {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted);
}

.tier-desc {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: var(--space-md);
  line-height: 1.5;
  padding-top: var(--space-xs);
  border-top: 1px solid var(--border);
  margin-top: var(--space-sm);
}

.tier-features {
  font-size: var(--text-sm);
  color: var(--dk-mid);
  line-height: 2;
  margin-bottom: var(--space-md);
}

.tier-features li::before {
  content: "— ";
  color: var(--pk);
  font-weight: 700;
}

/* ============================================================
   12. FEATURE COMPARISON TABLE
   ============================================================ */
.comparison-wrap {
  overflow-x: auto;
  margin-top: var(--space-lg);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  table-layout: fixed;
}

.comparison-table thead th {
  font-family: var(--font-head);
  font-weight: 700;
  padding: 10px var(--space-sm);
  text-align: center;
  border-bottom: 2px solid var(--pk);
  color: var(--dk);
}

.comparison-table thead th:first-child {
  text-align: left;
  color: var(--muted);
  font-weight: 400;
}

.comparison-table tbody td {
  padding: 9px var(--space-sm);
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}

.comparison-table tbody td:first-child {
  text-align: left;
  color: var(--dk);
  font-weight: 600;
}

.comparison-table .check { color: var(--pk); font-weight: 700; }

/* ============================================================
   13. VISIT / TOUR SECTION
   ============================================================ */
.visit-section {
  background: var(--dk);
  padding: var(--space-xl) var(--pad-x);
}

.visit-step {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-bottom: var(--space-md);
}

.visit-step-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--pk);
  width: 22px;
  flex-shrink: 0;
  padding-top: 1px;
}

.visit-step-title {
  font-family: var(--font-head);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--surface);
  margin-bottom: 3px;
}

.visit-step-sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.4);
  line-height: 1.55;
}

/* Tour request form (on dark bg) */
.tour-form {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid var(--pk);
  border-radius: var(--border-r-lg);
  padding: var(--space-md);
}

.tour-form .form-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--pk);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: var(--space-sm);
}

/* ============================================================
   14. FLOOR PLAN / SEAT RESERVATION
   ============================================================ */
.reserve-section {
  background: var(--surface-2);
  padding: var(--space-xl) var(--pad-x);
}

.floorplan-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: start;
  margin-top: var(--space-md);
}

.floorplan-map {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--pk);
  border-radius: var(--border-r-lg);
  padding: var(--space-md);
}

.floorplan-eyebrow {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--pk);
  margin-bottom: var(--space-sm);
}

.floorplan-legend {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--dk-mid);
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.legend-dot.av  { background: var(--av); }
.legend-dot.tk  { background: #D3D1C7; }
.legend-dot.sel { background: var(--pk); }

.floorplan-controls {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.floorplan-controls select {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  padding: 6px 10px;
  background: var(--surface-2);
  color: var(--dk);
  border: 1px solid var(--border);
  border-radius: var(--border-r);
  outline: none;
  cursor: pointer;
}

.floorplan-controls select:focus { box-shadow: var(--focus-ring); }

/* Zones and seats */
.zones-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.zone-group { min-width: 68px; }

.zone-label {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--dk-mid);
  margin-bottom: 5px;
}

.seats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.seat {
  width: 26px;
  height: 20px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  border: 1px solid transparent;
}

.seat.available {
  background: var(--av-lt);
  border-color: var(--av);
  color: var(--av-dk);
}

.seat.available:hover,
.seat.available:focus {
  background: var(--av);
  color: var(--surface);
  outline: none;
}

.seat.reserved {
  background: #F1EFE8;
  border-color: #D3D1C7;
  color: #B4B2A9;
  cursor: not-allowed;
}

.seat.selected {
  background: var(--pk);
  border-color: var(--pk-deep);
  color: var(--surface);
}

/* Seat detail sidebar */
.seat-sidebar {
  width: 148px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--dk);
  border-radius: var(--border-r-lg);
  padding: var(--space-sm);
}

.seat-sidebar-eyebrow {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--dk-mid);
  margin-bottom: 5px;
}

.seat-sidebar-id {
  font-family: var(--font-head);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--dk);
  margin-bottom: 2px;
  line-height: 1;
}

.seat-sidebar-zone {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

.seat-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-xs);
}

.seat-detail-row:last-of-type { border-bottom: none; }
.seat-detail-key { color: var(--muted); }
.seat-detail-val { color: var(--dk); font-weight: 700; }

/* Guest gate notice */
.guest-gate {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pk);
  border-radius: 0;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  color: var(--dk-mid);
  margin-bottom: var(--space-md);
}

.guest-gate a { color: var(--pk); font-weight: 600; }

/* ============================================================
   15. MEMBER DASHBOARD
   ============================================================ */
.dashboard {
  background: var(--surface-2);
  min-height: 100vh;
}

.dashboard-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--space-sm) var(--pad-x);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(250,13,75,0.1);
  border: 1px solid rgba(250,13,75,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--pk);
  flex-shrink: 0;
}

.member-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--dk);
}

.member-tier-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(250,13,75,0.1);
  color: var(--pk);
  border: 1px solid rgba(250,13,75,0.2);
}

/* Dashboard subnav */
.dashboard-subnav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--pad-x);
  display: flex;
  gap: var(--space-lg);
}

.dashboard-subnav a {
  font-size: var(--text-sm);
  color: var(--muted);
  padding: var(--space-sm) 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
  transition: color 0.15s, border-color 0.15s;
}

.dashboard-subnav a:hover { color: var(--dk); }

.dashboard-subnav a.active {
  color: var(--dk);
  border-bottom-color: var(--pk);
  font-weight: 600;
}

/* Dashboard body */
.dashboard-body {
  padding: var(--space-lg) var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* Dashboard stat strip */
.dash-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.dash-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-r-lg);
  padding: 12px var(--space-md);
}

.dash-stat-num {
  font-family: var(--font-head);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--dk);
  line-height: 1;
}

.dash-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 4px;
}

/* Pass usage bar */
.pass-bar-wrap { margin: var(--space-xs) 0 var(--space-sm); }

.pass-bar-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 5px;
}

.pass-bar-bg {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.pass-bar-fill {
  height: 4px;
  background: var(--pk);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Booking list */
.booking-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.booking-item:last-child { border-bottom: none; }

.booking-date {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--dk);
}

.booking-seat {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 2px;
}

/* Status badges */
.badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 3px;
}

.badge-confirmed { background: var(--av-lt); color: var(--av-dk); }
.badge-pending   { background: rgba(250,13,75,0.08); color: var(--pk); }
.badge-cancelled { background: var(--surface-3); color: var(--muted); }

/* Quick action buttons */
.quick-action {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-r);
  padding: 10px var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--pk);
  cursor: pointer;
  margin-bottom: var(--space-xs);
  transition: background 0.15s, border-color 0.15s;
}

.quick-action:hover {
  background: rgba(250,13,75,0.05);
  border-color: rgba(250,13,75,0.3);
  text-decoration: none;
}

/* ============================================================
   16. FORMS — general + login + contact
   ============================================================ */

/* Light background forms */
.fo-form-field,
.fo-form input[type="text"],
.fo-form input[type="email"],
.fo-form input[type="password"],
.fo-form input[type="tel"],
.fo-form textarea,
.fo-form select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  color: var(--dk);
  background: rgba(255,255,255,0.9);
  border: 0;
  border-bottom: 2px solid var(--border);
  border-radius: 0;
  padding: 8px 2px;
  outline: none;
  transition: border-color 0.15s;
  margin-bottom: var(--space-md);
}

.fo-form input:focus,
.fo-form textarea:focus,
.fo-form select:focus { border-bottom-color: var(--pk); }

.fo-form ::placeholder { color: var(--muted); }

.fo-form textarea { height: 100px; resize: vertical; }

.fo-form label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}

/* Dark background forms (tour form, login form) */
.fo-form-dark input,
.fo-form-dark textarea,
.fo-form-dark select {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--border-r);
  color: rgba(255,255,255,0.7);
  padding: 8px 10px;
  margin-bottom: var(--space-sm);
}

.fo-form-dark input::placeholder,
.fo-form-dark textarea::placeholder { color: rgba(255,255,255,0.3); }

.fo-form-dark input:focus,
.fo-form-dark textarea:focus {
  outline: none;
  border-color: var(--pk);
}

/* Form response messages */
.form-success { color: var(--av); font-weight: 600; margin: var(--space-sm) 0; font-size: var(--text-sm); }
.form-error   { color: var(--pk); font-weight: 600; margin: var(--space-sm) 0; font-size: var(--text-sm); }

/* ============================================================
   17. LOGIN PAGE
   ============================================================ */
.login-section {
  background: var(--dk);
  padding: var(--space-xl) var(--pad-x);
  border-top: 2px solid var(--pk);
}

.login-features-list .login-feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--space-sm);
}

.login-feature-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pk);
  flex-shrink: 0;
}

.login-form-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid var(--pk);
  border-radius: var(--border-r-lg);
  padding: var(--space-md);
}

.login-form-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  margin-bottom: var(--space-sm);
  display: block;
}

.login-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  font-size: var(--text-xs);
}

.login-meta-row .remember { color: rgba(255,255,255,0.3); }
.login-meta-row .forgot   { color: var(--pk); }
.login-meta-row .forgot:hover { color: var(--pk-deep); }

.login-join-prompt {
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
  text-align: center;
}

.login-join-prompt a { color: var(--pk); font-weight: 700; }

/* ============================================================
   18. MEMBER DIRECTORY
   ============================================================ */
.directory-section {
  background: var(--surface);
  padding: var(--space-xl) var(--pad-x);
}

.directory-filter {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.directory-filter input[type="search"] {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 8px var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--border-r);
  background: var(--surface-2);
  color: var(--dk);
  outline: none;
  min-width: 200px;
}

.directory-filter input:focus { border-color: var(--pk); }

.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-sm);
}

.directory-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-r-lg);
  padding: var(--space-md);
  transition: border-color 0.15s;
}

.directory-card:hover { border-color: var(--pk); }

/* Spotlight member variant */
.directory-card.spotlight {
  border-color: var(--dk-lt);
  background: var(--surface-2);
}

.directory-card.spotlight:hover { border-color: var(--pk); }

.dir-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(250,13,75,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--pk);
  margin-bottom: var(--space-sm);
}

.dir-name {
  font-family: var(--font-head);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--dk);
  margin-bottom: 2px;
}

.dir-company {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: var(--space-xs);
}

.dir-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--dk-mid);
  display: inline-block;
}

/* ============================================================
   19. FAQ SECTION
   ============================================================ */
.faq-section {
  background: var(--surface);
  padding: var(--space-xl) var(--pad-x);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 0;
  font-family: var(--font-head);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--dk);
  cursor: pointer;
  gap: var(--space-sm);
}

.faq-question::after {
  content: "+";
  color: var(--pk);
  font-size: var(--text-xl);
  font-weight: 300;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.faq-item.open .faq-question::after { transform: rotate(45deg); }

.faq-answer {
  font-size: var(--text-sm);
  color: var(--dk-mid);
  line-height: 1.65;
  padding-bottom: var(--space-md);
  display: none;
}

.faq-item.open .faq-answer { display: block; }

/* ============================================================
   20. FOOTER
   ============================================================ */
.site-footer {
  background: #160E28;
  padding: var(--space-xl) var(--pad-x) var(--space-md);
  border-top: 2px solid var(--pk);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-logo {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--surface);
  margin-bottom: var(--space-xs);
}

.footer-logo span { color: var(--pk); }

.footer-tagline {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.3);
  line-height: 1.65;
  max-width: 200px;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.4);
  transition: color 0.15s, border-color 0.15s;
}

.footer-social:hover {
  color: var(--pk);
  border-color: var(--pk);
}

.footer-col-head {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--pk);
  margin-bottom: var(--space-sm);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer-links a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.3);
  transition: color 0.15s;
  text-decoration: none;
}

.footer-links a:hover { color: var(--surface); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: rgba(255,255,255,0.2);
}

.footer-bottom a { color: rgba(255,255,255,0.2); }
.footer-bottom a:hover { color: rgba(255,255,255,0.5); }

/* ============================================================
   21. CONTENT CARDS (generic panels)
   ============================================================ */
.fo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-r-lg);
  padding: var(--space-md);
}

.fo-card-dark {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--border-r-lg);
  padding: var(--space-md);
}

.fo-card-accent {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--pk);
  border-radius: var(--border-r-lg);
  padding: var(--space-md);
}

.fo-divider {
  border: 0;
  border-bottom: 1px solid var(--border);
  margin: var(--space-lg) 0;
}

.fo-divider-pink {
  border: 0;
  border-bottom: 2px solid var(--pk);
  margin: var(--space-lg) 0;
}

/* ============================================================
   22. SECTION HEADING PATTERN
   ============================================================ */
.section-heading {
  margin-bottom: var(--space-lg);
}

.section-heading .eyebrow { margin-bottom: var(--space-xs); }

.section-heading h2 { margin-bottom: 4px; }

.section-heading .section-sub {
  font-size: var(--text-sm);
  color: var(--muted);
}

.section-dark .section-heading .section-sub { color: var(--muted-dk); }

/* ============================================================
   23. UTILITY CLASSES
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.text-pk    { color: var(--pk) !important; }
.text-dk    { color: var(--dk) !important; }
.text-muted { color: var(--muted) !important; }
.text-white { color: var(--surface) !important; }

.bg-dk   { background: var(--dk); }
.bg-pale { background: var(--surface-2); }
.bg-wh   { background: var(--surface); }

.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }

.flex        { display: flex; }
.flex-center { display: flex; align-items: center; }
.gap-sm      { gap: var(--space-sm); }
.gap-md      { gap: var(--space-md); }
.ml-auto     { margin-left: auto; }

.border-t-pk { border-top: 2px solid var(--pk); }
.border-l-pk { border-left: 3px solid var(--pk); border-radius: 0; }

/* ============================================================
   24. AMELIA PLUGIN OVERRIDES
      Force Amelia booking UI into theme colors
   ============================================================ */
.amelia-booking-button-wrapper .amelia-booking-button,
button.amelia-btn-primary {
  background: var(--pk) !important;
  border-color: var(--pk) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border-radius: var(--border-r) !important;
}

.amelia-booking-button-wrapper .amelia-booking-button:hover,
button.amelia-btn-primary:hover {
  background: var(--pk-deep) !important;
  border-color: var(--pk-deep) !important;
}

.amelia-step-tab.amelia-current .amelia-step-tab-number { background: var(--pk) !important; }
.amelia-step-tab.amelia-completed .amelia-step-tab-number { background: var(--av) !important; }

.amelia-booking-section .amelia-booking-heading { color: var(--dk) !important; font-family: var(--font-head) !important; }

/* ============================================================
   25. ULTIMATE MEMBER PLUGIN OVERRIDES
   ============================================================ */
.um .um-form .um-field-label { font-family: var(--font-mono) !important; font-size: var(--text-xs) !important; letter-spacing: 0.08em !important; color: var(--muted) !important; }
.um .um-form input[type="text"],
.um .um-form input[type="email"],
.um .um-form input[type="password"] {
  font-family: var(--font-body) !important;
  border-bottom: 2px solid var(--border) !important;
  border-radius: 0 !important;
}
.um .um-form input:focus { border-bottom-color: var(--pk) !important; }
.um .um-button { background: var(--pk) !important; border-color: var(--pk) !important; font-family: var(--font-body) !important; font-weight: 700 !important; border-radius: var(--border-r) !important; }
.um .um-button:hover { background: var(--pk-deep) !important; border-color: var(--pk-deep) !important; }
.um-account-navigation li.current a { color: var(--pk) !important; border-color: var(--pk) !important; }

/* ============================================================
   26. PAID MEMBERSHIPS PRO OVERRIDES
   ============================================================ */
#pmpro_checkout input[type="submit"],
.pmpro_btn {
  background: var(--pk) !important;
  border-color: var(--pk) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  border-radius: var(--border-r) !important;
  color: var(--surface) !important;
}

#pmpro_checkout input[type="submit"]:hover,
.pmpro_btn:hover {
  background: var(--pk-deep) !important;
  border-color: var(--pk-deep) !important;
}

.pmpro_level_cost { color: var(--pk) !important; font-weight: 700 !important; }
.pmpro_thead th { background: var(--dk) !important; color: var(--surface) !important; font-family: var(--font-head) !important; }

/* ============================================================
   27. RESPONSIVE — 1024px (iPad landscape)
   ============================================================ */
@media (max-width: 1024px) {
  :root { --pad-x: 24px; --space-xl: 40px; --space-2xl: 52px; }
  .tier-grid   { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .dash-stats  { grid-template-columns: repeat(2,1fr); }
  .comparison-wrap { overflow-x: auto; }
}

/* ============================================================
   28. RESPONSIVE — 860px (iPad portrait)
   ============================================================ */
@media (max-width: 860px) {
  :root { --space-xl: 36px; --space-2xl: 48px; --text-3xl: 34px; }

  /* Show burger, hide desktop nav */
  .fo-burger { display: flex; }
  .fo-nav    { display: none; }
  .fo-drawer { display: block; }
  .fo-overlay { display: none; }

  /* Collapse grids */
  .grid-2      { grid-template-columns: 1fr; }
  .grid-3      { grid-template-columns: 1fr 1fr; }
  .tier-grid   { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .floorplan-wrap { grid-template-columns: 1fr; }
  .seat-sidebar   { width: 100%; }
  .dashboard-body { grid-template-columns: 1fr; }
  .dash-stats     { grid-template-columns: repeat(2,1fr); }
  .hero-stats     { grid-template-columns: repeat(3,1fr); }
  .comparison-wrap { overflow-x: auto; }

  /* Inline-style grids from page templates */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:300px 1fr"],
  [style*="grid-template-columns:320px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================================================
   29. RESPONSIVE — 580px (iPhone / small phone)
   ============================================================ */
@media (max-width: 580px) {
  :root {
    --pad-x:    16px;
    --space-lg: 24px;
    --space-xl: 28px;
    --text-2xl: 22px;
    --text-3xl: 26px;
    --text-4xl: 30px;
  }

  .fo-ticker { display: none; }

  /* All grids → single column */
  .grid-2, .grid-3, .grid-4,
  .tier-grid, .footer-grid,
  .hero-stats, .dash-stats {
    grid-template-columns: 1fr;
  }
  .hero-stats  { grid-template-columns: 1fr 1fr; }
  .dash-stats  { grid-template-columns: 1fr 1fr; }
  .comparison-wrap { overflow-x: auto; }
  .directory-grid  { grid-template-columns: 1fr 1fr; }

  /* All inline-style grids → single column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero buttons stack */
  .hero-btns { flex-direction: column; }
  .hero-btns .btn { text-align: center; width: 100%; }

  /* Member dashboard stat strip */
  #tab-overview [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Staff dashboard tabs overflow scroll */
  #dash-tabs, .staff-tabs, [id="dash-tabs"] {
    overflow-x: auto;
    scrollbar-width: none;
  }

  /* Acct form grid */
  .acct-grid { grid-template-columns: 1fr !important; }
}



/* ============================================================
   30. PRINT
   ============================================================ */
@media print {
  .site-header, .site-footer, .status-ticker, .nav-toggle { display: none; }
  .section-dark { background: #fff !important; color: #000 !important; }
  .section-dark h1, .section-dark h2, .section-dark p { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
}

/* ============================================================
   FOOTER REDESIGN
   ============================================================ */
.fo-footer {
  background: #0d0a1e;
  color: rgba(255,255,255,.55);
  font-size: var(--text-sm);
  line-height: 1.6;
  position: relative;
}

/* Animated gold shimmer line across top of footer */
.fo-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,168,76,0) 10%,
    rgba(201,168,76,.7) 30%,
    rgba(245,229,184,1) 50%,
    rgba(201,168,76,.7) 70%,
    rgba(201,168,76,0) 90%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: footer-gold 7s ease-in-out infinite;
}
@keyframes footer-gold {
  0%, 100% { background-position: 0% 50%; opacity: .5; }
  50%       { background-position: 100% 50%; opacity: 1; }
}

.fo-footer-top {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--pad-x);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-2xl);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.fo-footer-tagline {
  color: rgba(255,255,255,.38);
  font-size: 13px;
  line-height: 1.65;
  max-width: 220px;
  margin: 0 0 var(--space-md);
}

.fo-footer-socials {
  display: flex;
  gap: 10px;
}
.fo-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.fo-footer-social:hover {
  color: var(--gold-light);
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(201,168,76,.35);
}

.fo-footer-nav {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--space-xl);
}
.fo-footer-col-head {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: linear-gradient(105deg, #96762e 0%, #c9a84c 40%, #f5e5b8 50%, #c9a84c 60%, #96762e 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gold-sweep 5s linear infinite;
  margin-bottom: var(--space-md);
  display: block;
}
.fo-footer-nav a {
  display: block;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 0;
  transition: color .15s;
  line-height: 1.5;
}
.fo-footer-nav a:hover { color: #fff; }

/* CTA strip */
.fo-footer-cta-strip {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  border-top: 1px solid rgba(201,168,76,.2);
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: relative;
}
.fo-footer-cta-strip strong {
  display: block;
  color: #fff;
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: 2px;
}
.fo-footer-cta-strip span {
  font-size: 13px;
  color: rgba(255,255,255,.4);
}
.fo-footer-cta-btns { display: flex; gap: 10px; flex-shrink: 0; }
.fo-footer-cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: var(--border-r);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .15s;
  white-space: nowrap;
}
.fo-footer-cta-btn--primary { background: var(--pk); color: #fff; }
.fo-footer-cta-btn--ghost   { border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.7); }
.fo-footer-cta-btn:hover    { opacity: .85; }

/* Bottom bar */
.fo-footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-md) var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,255,255,.25);
}
.fo-footer-legal { display: flex; gap: var(--space-md); }
.fo-footer-legal a { color: rgba(255,255,255,.25); text-decoration: none; }
.fo-footer-legal a:hover { color: rgba(255,255,255,.5); }

/* Legacy footer hide */
.site-footer { display: none; }

/* ============================================================
   MEMBER & STAFF DASHBOARD — MOBILE FIXES
   ============================================================ */
@media (max-width: 860px) {
  /* Member dashboard tab bar scrolls */
  #dash-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0;
  }
  #dash-tabs::-webkit-scrollbar { display: none; }
  .dash-tab-btn { font-size: 8px; padding: 10px 12px; white-space: nowrap; }

  /* Staff dashboard tabs */
  .staff-tabs, .staff-subnav {
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }

  /* Member dashboard panels */
  #tab-overview [style*="grid-template-columns:repeat(4"],
  #tab-overview [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Billing cards */
  #tab-billing [style*="grid-template-columns:1fr 1fr"],
  #tab-billing [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Account form */
  #tab-account [style*="grid-template-columns:1fr 1fr"],
  #tab-account [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Staff panel grids */
  .staff-panel [style*="grid-template-columns:1fr 360px"],
  .staff-panel [style*="grid-template-columns: 1fr 360px"],
  .staff-panel [style*="grid-template-columns:1fr 340px"],
  .staff-panel [style*="grid-template-columns: 300px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Floor plan SVG on mobile */
  #sm-floor-plan, #floor-plan { width: 100% !important; }

  /* Invoice tables scroll */
  .inv-table { min-width: 560px; }
  .fo-card[style*="overflow-x:auto"],
  .fo-card[style*="overflow: auto"] { overflow-x: auto; }
}

@media (max-width: 580px) {
  .dash-tab-btn { font-size: 7px; padding: 10px 10px; letter-spacing: .05em; }

  /* WP Admin link + Staff portal - stack on mobile */
  #dash-tabs ~ .section-light [style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column !important;
  }

  /* Staff dashboard 7-tab bar */
  [id^="stab-"] .panel-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Nayax cards table scroll */
  .nayax-row { display: block; }

  /* M365 app grid */
  .m365-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   FOOTER RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .fo-footer-top { grid-template-columns: 1fr; gap: var(--space-xl); }
  .fo-footer-nav { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 580px) {
  .fo-footer-nav { grid-template-columns: 1fr 1fr; }
  .fo-footer-cta-strip { flex-direction: column; align-items: flex-start; }
  .fo-footer-cta-btns { width: 100%; }
  .fo-footer-cta-btn { flex: 1; justify-content: center; }
  .fo-footer-bottom { flex-direction: column; text-align: center; }
  .fo-footer-legal { justify-content: center; }
  .fo-logo-mark, .fo-footer-mark { display: none; }
}

/* ============================================================
   GOLD GLIMMER SYSTEM
   ============================================================ */

/* Gold color tokens */
:root {
  --gold:         #c9a84c;
  --gold-light:   #e2c27a;
  --gold-pale:    #f5e5b8;
  --gold-dark:    #96762e;
  --gold-shine:   linear-gradient(105deg, #96762e 0%, #c9a84c 35%, #f5e5b8 50%, #c9a84c 65%, #96762e 100%);
  --gold-shimmer: linear-gradient(105deg,
    transparent 0%,
    rgba(201,168,76,.0)  20%,
    rgba(201,168,76,.55) 48%,
    rgba(245,229,184,.8) 50%,
    rgba(201,168,76,.55) 52%,
    rgba(201,168,76,.0)  80%,
    transparent 100%);
}

/* ── Gold text shimmer (for headlines, eyebrows) ─── */
.gold-text {
  background: var(--gold-shine);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gold-sweep 4s linear infinite;
}

@keyframes gold-sweep {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── Gold ticker accent ─── */
.fo-tick b { color: var(--pk); }
.fo-tick b.gold { color: var(--gold-light); }

/* ── Gold accent line (thin horizontal rule) ─── */
.gold-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
  margin-block: var(--space-xl);
  opacity: .6;
}

/* ── Gold shimmer border on cards ─── */
.fo-card-gold {
  position: relative;
  overflow: hidden;
}
.fo-card-gold::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%;
  height: 100%;
  background: var(--gold-shimmer);
  transform: skewX(-20deg);
  animation: card-shimmer 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes card-shimmer {
  0%   { left: -75%; opacity: 0; }
  10%  { opacity: 1; }
  40%  { left: 125%; opacity: 1; }
  41%  { opacity: 0; }
  100% { left: 125%; opacity: 0; }
}

/* ── Gold dot/spark ─── */
.gold-spark {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 6px 2px rgba(201,168,76,.6);
  animation: spark-pulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes spark-pulse {
  0%, 100% { opacity: .5; transform: scale(.8); box-shadow: 0 0 4px 1px rgba(201,168,76,.4); }
  50%       { opacity: 1;  transform: scale(1.3); box-shadow: 0 0 10px 4px rgba(201,168,76,.7); }
}

/* ── Gold eyebrow ─── */
.eyebrow-gold {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--gold-shine);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gold-sweep 4s linear infinite;
}

/* ── Gold hero stat accent ─── */
.hero-stat-gold .hero-stat-num {
  background: var(--gold-shine);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gold-sweep 4s linear infinite;
}



/* ── Gold section divider pulse ─── */
.section-gold-divider {
  text-align: center;
  padding: var(--space-md) 0;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.section-gold-divider::before,
.section-gold-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.4));
}
.section-gold-divider::after {
  background: linear-gradient(270deg, transparent, rgba(201,168,76,.4));
}

/* ── Gold button variant ─── */
.btn-gold {
  background: linear-gradient(135deg, #96762e 0%, #c9a84c 50%, #96762e 100%);
  background-size: 200% auto;
  color: #1a1200;
  font-weight: 800;
  transition: background-position .4s, box-shadow .3s;
  box-shadow: 0 2px 16px rgba(201,168,76,.25);
}
.btn-gold:hover {
  background-position: right center;
  box-shadow: 0 4px 24px rgba(201,168,76,.45);
  color: #1a1200;
}

/* ── Gold membership tier accent (Executive tier) ─── */
.tier-executive-gold {
  border-top: 2px solid var(--gold) !important;
  position: relative;
}
.tier-executive-gold::after {
  content: '✦ EXECUTIVE';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .15em;
  background: var(--gold-shine);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gold-sweep 4s linear infinite;
  white-space: nowrap;
  padding: 0 8px;
}

/* ── Nav gold accent ─── */
.fo-nav-cta {
  position: relative;
  overflow: hidden;
}
.fo-nav-cta::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform: skewX(-20deg);
  animation: btn-shine 4s ease-in-out infinite 2s;
}
@keyframes btn-shine {
  0%   { left: -100%; }
  30%  { left: 150%; }
  100% { left: 150%; }
}

/* ── Hero gold sparkle dots — disabled ─── */
.hero-sparkles { display: none; }

/* Base sparkle — round glowing dot */
.hero-sparkle {
  position: absolute;
  border-radius: 50%;
  background: var(--gold-light);
}

/* Varied sizes for depth */
.hero-sparkle:nth-child(1)  { width:4px; height:4px; top:14%; left:8%;   box-shadow:0 0 8px 4px rgba(201,168,76,.7); animation:sparkle-float 5s ease-in-out infinite 0s; }
.hero-sparkle:nth-child(2)  { width:3px; height:3px; top:71%; left:14%;  box-shadow:0 0 6px 3px rgba(201,168,76,.6); animation:sparkle-float 7s ease-in-out infinite 1s; }
.hero-sparkle:nth-child(3)  { width:5px; height:5px; top:27%; left:83%;  box-shadow:0 0 10px 5px rgba(201,168,76,.8); animation:sparkle-float 6s ease-in-out infinite .5s; }
.hero-sparkle:nth-child(4)  { width:3px; height:3px; top:84%; left:71%;  box-shadow:0 0 6px 3px rgba(201,168,76,.5); animation:sparkle-float 8s ease-in-out infinite 2s; }
.hero-sparkle:nth-child(5)  { width:4px; height:4px; top:44%; left:91%;  box-shadow:0 0 8px 4px rgba(201,168,76,.65); animation:sparkle-float 5.5s ease-in-out infinite 3s; }
.hero-sparkle:nth-child(6)  { width:6px; height:6px; top:59%; left:44%;  box-shadow:0 0 12px 6px rgba(201,168,76,.75); animation:sparkle-float 9s ease-in-out infinite .3s; }
.hero-sparkle:nth-child(7)  { width:3px; height:3px; top:9%;  left:56%;  box-shadow:0 0 6px 3px rgba(201,168,76,.55); animation:sparkle-float 6.5s ease-in-out infinite 1.5s; }
.hero-sparkle:nth-child(8)  { width:4px; height:4px; top:89%; left:29%;  box-shadow:0 0 8px 4px rgba(201,168,76,.6); animation:sparkle-float 7.5s ease-in-out infinite 2.5s; }
/* Extra sparkles for more coverage */
.hero-sparkle:nth-child(9)  { width:3px; height:3px; top:38%; left:22%;  box-shadow:0 0 6px 3px rgba(201,168,76,.5); animation:sparkle-float 8.5s ease-in-out infinite 1.2s; }
.hero-sparkle:nth-child(10) { width:5px; height:5px; top:55%; left:66%;  box-shadow:0 0 10px 5px rgba(201,168,76,.7); animation:sparkle-float 6.2s ease-in-out infinite 4s; }
.hero-sparkle:nth-child(11) { width:3px; height:3px; top:20%; left:40%;  box-shadow:0 0 6px 3px rgba(201,168,76,.45); animation:sparkle-float 7.8s ease-in-out infinite .8s; }
.hero-sparkle:nth-child(12) { width:4px; height:4px; top:77%; left:88%;  box-shadow:0 0 8px 4px rgba(201,168,76,.6); animation:sparkle-float 5.8s ease-in-out infinite 3.5s; }

@keyframes sparkle-float {
  0%, 100% { opacity: 0;   transform: translateY(0)   scale(0.6); }
  20%       { opacity: 0.9; transform: translateY(-6px) scale(1.2); }
  40%       { opacity: 0.5; transform: translateY(-3px) scale(0.9); }
  60%       { opacity: 1;   transform: translateY(-10px) scale(1.5); }
  80%       { opacity: 0.7; transform: translateY(-5px) scale(1.1); }
}

/* ── Print — hide gold animations for print ─── */
@media print {
  .gold-text, .eyebrow-gold { -webkit-text-fill-color: #c9a84c; animation: none; }
  .fo-card-gold::before, .hero-sparkles { display: none; }
}