/* =============================================================
   Apex Luxe Concierge — Ultra-luxury dark-first design system
   Deep black surfaces, champagne gold, rose-gold accents.
   Editorial serif display + Switzer body.
   ============================================================= */

/* ---------- Tokens: dark-first (default) ---------- */
:root,
[data-theme='dark'] {
  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Switzer', 'Inter', system-ui, sans-serif;

  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.3vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.4rem);
  --text-3xl: clamp(2.75rem, 1rem + 5vw, 5.75rem);
  --text-hero: clamp(3.25rem, 0.5rem + 7.5vw, 7.75rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Surfaces — deep black, with subtle warm undertone */
  --color-bg: #0A0907;
  --color-surface: #100E0B;
  --color-surface-2: #15120E;
  --color-surface-offset: #1B1712;
  --color-surface-dynamic: #221C16;
  --color-divider: rgba(228, 199, 151, 0.10);
  --color-border: rgba(228, 199, 151, 0.16);
  --color-border-strong: rgba(228, 199, 151, 0.28);

  /* Text */
  --color-text: #F4EADC;
  --color-text-muted: #B7A78F;
  --color-text-faint: #7A6E5C;
  --color-text-inverse: #0A0907;

  /* Brand palette — champagne gold + rose-gold */
  --color-gold: #D4AE74;
  --color-gold-bright: #EFD09A;
  --color-gold-deep: #9A7A45;
  --color-rose: #E0B5A2;
  --color-rose-deep: #C28A78;
  --color-champagne: #F2E0C2;

  --color-primary: var(--color-gold);
  --color-primary-hover: var(--color-gold-bright);
  --color-primary-active: var(--color-champagne);
  --color-primary-soft: rgba(212, 174, 116, 0.16);
  --color-rose-soft: rgba(224, 181, 162, 0.18);

  --color-ink: #050402;
  --color-success: #8FAE6F;
  --color-error: #C9776B;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --radius-3xl: 2.25rem;
  --radius-full: 9999px;

  /* Motion */
  --transition-interactive: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 32px 90px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px rgba(212, 174, 116, 0.20), 0 24px 60px rgba(0, 0, 0, 0.6);

  --content-wide: 1240px;
  --content-narrow: 960px;
}

/* ---------- Light mode (still warm, restrained) ---------- */
[data-theme='light'] {
  --color-bg: #F7F2E8;
  --color-surface: #FBF7EE;
  --color-surface-2: #EFE6D3;
  --color-surface-offset: #E2D5BB;
  --color-surface-dynamic: #D4C3A2;
  --color-divider: rgba(40, 28, 14, 0.12);
  --color-border: rgba(40, 28, 14, 0.18);
  --color-border-strong: rgba(40, 28, 14, 0.32);

  --color-text: #1A140C;
  --color-text-muted: #6B5C45;
  --color-text-faint: #A89A7E;
  --color-text-inverse: #FBF7EE;

  --color-gold: #8E6F2C;
  --color-gold-bright: #B58A3A;
  --color-gold-deep: #5C4719;
  --color-rose: #B07565;
  --color-rose-deep: #874F40;
  --color-champagne: #C9A85A;

  --color-primary: var(--color-gold);
  --color-primary-hover: var(--color-gold-bright);
  --color-primary-active: var(--color-gold-deep);
  --color-primary-soft: rgba(142, 111, 44, 0.14);
  --color-rose-soft: rgba(176, 117, 101, 0.16);

  --color-ink: #1A140C;
  --color-success: #4F6B36;
  --color-error: #9F3E3E;

  --shadow-sm: 0 1px 2px rgba(40, 28, 14, 0.10);
  --shadow-md: 0 14px 40px rgba(40, 28, 14, 0.14);
  --shadow-lg: 0 32px 90px rgba(40, 28, 14, 0.20);
  --shadow-glow: 0 0 0 1px rgba(142, 111, 44, 0.22), 0 24px 60px rgba(40, 28, 14, 0.16);
}

/* ---------- Rose mode (pastel pink surfaces, rose-gold accents) ---------- */
[data-theme='rose'] {
  --color-bg: #FBEEEB;
  --color-surface: #FCF2EF;
  --color-surface-2: #F7E2DC;
  --color-surface-offset: #F0CFC6;
  --color-surface-dynamic: #E6B8AC;
  --color-divider: rgba(96, 38, 38, 0.12);
  --color-border: rgba(96, 38, 38, 0.18);
  --color-border-strong: rgba(96, 38, 38, 0.32);

  --color-text: #3A1A1A;
  --color-text-muted: #6B4646;
  --color-text-faint: #9A7A7A;
  --color-text-inverse: #FCF2EF;

  /* Rose-gold accent family — true rose-gold, pink-forward */
  --color-gold: #B76E79;          /* classic rose-gold, hue ~350° */
  --color-gold-bright: #D4929A;   /* lighter highlight rose-gold */
  --color-gold-deep: #8B4A52;     /* deep rose-gold for active states */
  --color-rose: #E8A0B0;          /* soft pink secondary */
  --color-rose-deep: #A0586A;     /* deeper pink */
  --color-champagne: #F0C4C8;     /* blush champagne highlight */

  --color-primary: var(--color-gold);
  --color-primary-hover: var(--color-gold-bright);
  --color-primary-active: var(--color-gold-deep);
  --color-primary-soft: rgba(183, 110, 121, 0.16);
  --color-rose-soft: rgba(232, 160, 176, 0.20);

  --color-ink: #2A1218;
  --color-success: #5C7A4A;
  --color-error: #A64545;

  --shadow-sm: 0 1px 2px rgba(96, 38, 50, 0.10);
  --shadow-md: 0 14px 40px rgba(96, 38, 50, 0.14);
  --shadow-lg: 0 32px 90px rgba(96, 38, 50, 0.20);
  --shadow-glow: 0 0 0 1px rgba(183, 110, 121, 0.28), 0 24px 60px rgba(96, 38, 50, 0.18);
}

/* ---------- Rose mode component overrides ---------- */

/* Primary button: rose-gold gradient, no orange */
[data-theme='rose'] .button.primary {
  background: linear-gradient(135deg, #E8A0B0 0%, #C97A87 45%, #B76E79 100%);
  color: #2A1218;
  box-shadow: 0 6px 20px rgba(183, 110, 121, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
[data-theme='rose'] .button.primary:hover {
  box-shadow: 0 12px 32px rgba(183, 110, 121, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.60);
  filter: brightness(1.05);
}

/* Logo mark: rose-gold hue shift (gold is ~30-36°, rose-gold is ~350° = rotate ≈ -40°) */
[data-theme='rose'] .brand-symbol {
  filter: drop-shadow(0 4px 12px rgba(183, 110, 121, 0.32)) hue-rotate(-40deg) saturate(1.2);
}

/* Hero h1 em (“handled”) — shiny METALLIC shimmer in rose mode        */
/* Specular: two razor-thin hard stops at 46–48% create a crisp hot-spot  */
@keyframes rose-shimmer {
  0%   { background-position: 220% center; }
  100% { background-position: -220% center; }
}
[data-theme='rose'] h1 em {
  background: linear-gradient(
    118deg,
    #7A3D48  0%,
    #B76E79 12%,
    #D4929A 26%,
    #EBBCC5 38%,
    #F8E0E4 44%,
    #ffffff 46%,
    #FFF0F3 47%,
    #ffffff 48%,
    #F0C8D0 50%,
    #D4929A 60%,
    #B76E79 74%,
    #8B4A52 88%,
    #7A3D48 100%
  );
  background-size: 400% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* deep-shadow = depth; glow = reflected light off metal */
  filter: drop-shadow(0 2px 6px rgba(139, 74, 82, 0.55))
          drop-shadow(0 0px 2px rgba(255, 220, 228, 0.40));
  animation: rose-shimmer 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  [data-theme='rose'] h1 em {
    animation: none;
    background-position: 60% center;
    background-size: 100% auto;
  }
}
/* Hero card italic “handled.” — subtler metallic tint, no animation */
[data-theme='rose'] .hero-card-top strong {
  background: linear-gradient(
    118deg,
    #9A5560  0%,
    #C97A87 28%,
    #F0C0CB 46%,
    #FDEEF1 50%,
    #F0C0CB 54%,
    #C97A87 72%,
    #9A5560 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Body / global ---------- */
body {
  background:
    radial-gradient(ellipse at 18% -10%, color-mix(in oklab, var(--color-rose) 22%, transparent), transparent 38rem),
    radial-gradient(ellipse at 92% 110%, color-mix(in oklab, var(--color-gold) 18%, transparent), transparent 42rem),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--color-primary);
}

.skip-link {
  position: fixed;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-weight: 600;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--space-4);
  background: color-mix(in oklab, var(--color-bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-divider);
  background: color-mix(in oklab, var(--color-bg) 92%, transparent);
}

.nav-shell {
  width: min(var(--content-wide), calc(100vw - var(--space-8)));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
}

.brand-symbol {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 12px rgba(212, 174, 116, 0.18));
}

.brand-mark strong,
.brand-mark small { display: block; }

.brand-mark strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
}

.brand-mark small {
  margin-top: 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 3vw, var(--space-8));
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.nav-links a {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.04em;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-rose));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-luxe);
}

.nav-links a:hover {
  color: var(--color-text);
}
.nav-links a:hover::after { transform: scaleX(1); }

.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Member Login link in nav: subtle pill to distinguish from text links. */
.nav-links a.nav-member-login {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  min-height: 36px;
  color: var(--color-text);
  background: color-mix(in oklab, var(--color-surface) 60%, transparent);
  transition: border-color var(--transition-interactive),
              background var(--transition-interactive),
              color var(--transition-interactive);
}
.nav-links a.nav-member-login:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface));
}
/* Suppress the underline pseudo from regular nav links on this pill. */
.nav-links a.nav-member-login::after { display: none; }

/* Hero "Member Login" CTA: ghost-styled with a subtle accent so it sits as
   a tertiary action next to "Request access" / "Visit the showroom". */
.button.member-login-cta {
  color: var(--color-primary);
  border-color: var(--color-border);
}
.button.member-login-cta:hover {
  color: var(--color-primary-hover);
  border-color: var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 8%, transparent);
}

/* Signed-in member-name pill in private-club nav-actions.
   Replaces the prior generic "Go to dashboard" CTA. Hidden by default;
   private-club.js reveals it after renderMember(member) and writes the
   first name (or full display name) into [data-club-member-name]. */
.nav-actions .nav-member-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-surface) 60%, transparent);
  color: var(--color-text);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color var(--transition-interactive),
              background var(--transition-interactive),
              color var(--transition-interactive),
              transform var(--transition-interactive);
}
.nav-actions .nav-member-name:hover {
  border-color: var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-primary);
  transform: translateY(-1px);
}
.nav-actions .nav-member-name[hidden] { display: none; }

.nav-member-name-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 500;
}
.nav-member-name:hover .nav-member-name-eyebrow { color: inherit; }

.nav-member-name-value {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-member-name:hover .nav-member-name-value { color: var(--color-primary-hover); }

/* On narrow screens collapse the nav-member-login into the mobile menu look
   (the .nav-links container itself is repositioned below at the existing
   responsive breakpoint, so we just need to drop the pill chrome there).
   The signed-in member-name pill drops its eyebrow on small screens to keep
   the nav row compact, but stays visible — it's the only signed-in surface. */
@media (max-width: 880px) {
  .nav-links a.nav-member-login {
    border: none;
    background: transparent;
    padding: var(--space-3) var(--space-4);
  }
  .nav-actions .nav-member-name {
    padding: var(--space-2) var(--space-3);
  }
  .nav-member-name-eyebrow { display: none; }
  .nav-member-name-value { max-width: 9ch; }
}

.theme-toggle,
.menu-toggle {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-surface) 70%, transparent);
  color: var(--color-text);
}

.theme-toggle:hover,
.menu-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--color-border-strong);
  background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface));
}

.theme-toggle svg { width: 20px; }
.theme-toggle .theme-icon { display: none; }
[data-theme='dark'] .theme-toggle .theme-icon--dark { display: block; }
[data-theme='light'] .theme-toggle .theme-icon--light { display: block; }
[data-theme='rose'] .theme-toggle .theme-icon--rose { display: block; color: var(--color-rose-deep); }

.menu-toggle { display: none; gap: 4px; }
.menu-toggle span { width: 18px; height: 1px; background: currentColor; }

/* ---------- Hero ---------- */
.hero-section {
  min-height: calc(100svh - 90px);
  display: grid;
  align-items: center;
  padding: clamp(var(--space-12), 8vw, var(--space-24)) var(--space-4);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, color-mix(in oklab, var(--color-rose) 18%, transparent), transparent 30rem),
    radial-gradient(ellipse at 10% 90%, color-mix(in oklab, var(--color-gold) 14%, transparent), transparent 36rem);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  width: min(var(--content-wide), calc(100vw - var(--space-8)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.78fr);
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  align-items: center;
}

.eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--color-primary);
  font-weight: 600;
  max-width: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

h1 {
  margin-top: var(--space-5);
  font-size: var(--text-hero);
  line-height: 0.98;
  max-width: 12ch;
  font-style: normal;
}

h1 em {
  font-style: italic;
  background: linear-gradient(120deg, var(--color-gold-bright), var(--color-rose) 50%, var(--color-gold-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

h2 { font-size: var(--text-2xl); line-height: 1.05; }
h3 { font-size: var(--text-lg); line-height: 1.2; font-weight: 500; }

.hero-lede {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  max-width: 52ch;
  font-size: var(--text-base);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* ---------- Buttons ---------- */
.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }

.button.primary {
  background: linear-gradient(135deg, var(--color-gold-bright) 0%, var(--color-gold) 60%, var(--color-rose) 100%);
  color: var(--color-ink);
  box-shadow: 0 6px 20px rgba(212, 174, 116, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.button.primary:hover {
  box-shadow: 0 12px 32px rgba(212, 174, 116, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  filter: brightness(1.04);
}

.button.secondary {
  border-color: var(--color-border-strong);
  color: var(--color-text);
  background: color-mix(in oklab, var(--color-surface) 60%, transparent);
  backdrop-filter: blur(10px);
}
.button.secondary:hover {
  border-color: var(--color-primary);
  background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface));
}

.button.ghost {
  background: transparent;
  color: var(--color-text);
  border-color: transparent;
  padding-inline: var(--space-3);
}
.button.ghost:hover { color: var(--color-primary); }

/* ---------- Hero card ---------- */
.hero-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background: color-mix(in oklab, var(--color-surface) 88%, transparent);
  box-shadow: var(--shadow-glow);
  position: relative;
}

.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(212, 174, 116, 0.18), transparent 40%, rgba(224, 181, 162, 0.12));
  pointer-events: none;
  mix-blend-mode: overlay;
}

.hero-card-top {
  padding: var(--space-6);
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 2;
}

.hero-card-top span {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  color: var(--color-text-faint);
}

.hero-card-top strong {
  max-width: 18ch;
  color: var(--color-text);
  text-align: right;
  line-height: 1.25;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  font-style: italic;
}

.hero-visual {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  background: var(--color-ink);
}

.hero-visual.photo-visual { background: var(--color-ink); }

.hero-visual.photo-visual img {
  display: block;
  width: 100%;
  min-height: 460px;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.05);
  transition: transform 1200ms var(--ease-luxe);
}

.hero-card:hover .hero-visual img { transform: scale(1.04); }

.hero-visual.photo-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(90deg, rgba(10, 9, 7, 0.18), transparent 35%, rgba(10, 9, 7, 0.22));
  pointer-events: none;
}

.concierge-photo img { object-position: 50% 48%; }
.showroom-photo img { object-position: 50% 56%; }

.market-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-border);
  position: relative;
  z-index: 2;
}

.market-stats div {
  padding: var(--space-5);
  border-right: 1px solid var(--color-border);
}
.market-stats div:last-child { border-right: 0; }

.market-stats b {
  display: block;
  font-size: var(--text-lg);
  font-family: var(--font-display);
  color: var(--color-text);
  font-weight: 400;
}

.market-stats span {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- Trust strip ---------- */
.trust-strip {
  width: min(var(--content-wide), calc(100vw - var(--space-8)));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-surface) 70%, transparent);
  backdrop-filter: blur(10px);
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}

.trust-strip span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0 var(--space-3);
  position: relative;
}

.trust-strip span:not(:last-child)::after {
  content: '·';
  position: absolute;
  right: -4px;
  color: var(--color-gold);
  opacity: 0.5;
}

/* ---------- Section / layout ---------- */
.section {
  width: min(var(--content-wide), calc(100vw - var(--space-8)));
  margin: 0 auto;
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}

.section-kicker { margin-bottom: var(--space-6); }

.intro-section {
  display: grid;
  grid-template-columns: 0.32fr 0.68fr;
  gap: var(--space-12);
  align-items: start;
}

.intro-copy h2 { max-width: 22ch; }

.intro-copy p,
.section-heading p,
.panel-copy p,
.inquiry-card p,
.vehicle-teaser p {
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  font-size: var(--text-base);
  line-height: 1.65;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(280px, 0.32fr);
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-12);
}

.section-heading.compact {
  grid-template-columns: 1fr;
  max-width: 760px;
}

/* ---------- Lifestyle module grid (homepage) ---------- */
.lifestyle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.lifestyle-card {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--color-surface) 92%, transparent), color-mix(in oklab, var(--color-surface-2) 80%, transparent));
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  transition: transform 420ms var(--ease-luxe), border-color 420ms var(--ease-luxe), box-shadow 420ms var(--ease-luxe);
}

.lifestyle-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 0%, transparent 60%, color-mix(in oklab, var(--color-rose) 35%, transparent) 100%);
  opacity: 0;
  transition: opacity 420ms var(--ease-luxe);
  pointer-events: none;
  mix-blend-mode: overlay;
}

.lifestyle-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
.lifestyle-card:hover::before { opacity: 1; }

.lifestyle-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-primary) 18%, var(--color-surface));
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.lifestyle-icon svg { width: 22px; height: 22px; }

.lifestyle-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
  font-weight: 400;
}

.lifestyle-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  flex: 1;
}

.lifestyle-card span.tag {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ---------- Concierge ledger panel ---------- */
.concierge-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) 1fr;
  gap: var(--space-12);
  padding: clamp(var(--space-8), 6vw, var(--space-16));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in oklab, var(--color-rose) 12%, transparent), transparent 26rem),
    linear-gradient(135deg, color-mix(in oklab, var(--color-surface) 92%, transparent), color-mix(in oklab, var(--color-surface-2) 84%, transparent));
  box-shadow: var(--shadow-md);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-6);
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.text-link::after {
  content: '→';
  transition: transform 240ms var(--ease-luxe);
}
.text-link:hover { color: var(--color-primary-hover); }
.text-link:hover::after { transform: translateX(4px); }

.service-ledger {
  display: grid;
  gap: var(--space-2);
}

.service-ledger article {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.service-ledger article:last-child { border-bottom: 0; }

.service-ledger span {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  letter-spacing: 0;
}

.service-ledger p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ---------- Discreet proof points ---------- */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.proof-grid article {
  min-height: 280px;
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 90% 0%, color-mix(in oklab, var(--color-rose) 16%, transparent), transparent 15rem),
    color-mix(in oklab, var(--color-surface) 86%, transparent);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.proof-grid span {
  width: max-content;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.75rem;
  color: var(--color-primary);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.proof-grid h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1.15;
  font-weight: 400;
  color: var(--color-text);
}

.proof-grid p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-top: auto;
}

/* ---------- Membership flow ---------- */
.membership-section {
  padding-top: clamp(var(--space-10), 6vw, var(--space-18));
}

.membership-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.membership-flow article {
  min-height: 260px;
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--color-surface) 88%, transparent), color-mix(in oklab, var(--color-surface-2) 78%, transparent));
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  overflow: hidden;
}

.membership-flow article::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, color-mix(in oklab, var(--color-gold) 16%, transparent), transparent 14rem);
  opacity: 0.8;
  pointer-events: none;
}

.membership-flow span,
.membership-flow h3,
.membership-flow p {
  position: relative;
}

.membership-flow span {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
}

.membership-flow h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--color-text);
}

.membership-flow p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ---------- Process ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.process-grid article {
  padding: var(--space-8);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: color-mix(in oklab, var(--color-surface) 78%, transparent);
  position: relative;
  overflow: hidden;
}

.process-grid article::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 56%;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
}

.process-grid span {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
}

.process-grid h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text);
}

.process-grid p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ---------- Private desk standards ---------- */
.standards-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.36fr) 1fr;
  gap: var(--space-10);
  padding: clamp(var(--space-8), 6vw, var(--space-16));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in oklab, var(--color-gold) 16%, transparent), transparent 22rem),
    color-mix(in oklab, var(--color-surface) 90%, transparent);
  box-shadow: var(--shadow-md);
}

.standards-panel > div:first-child p {
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  font-size: var(--text-base);
  line-height: 1.65;
}

.standards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.standards-grid article {
  padding: var(--space-5);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--color-surface-2) 76%, transparent);
}

.standards-grid h3 {
  color: var(--color-text);
  font-size: var(--text-base);
  letter-spacing: 0.02em;
}

.standards-grid p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* ---------- Vehicle teaser ---------- */
.vehicle-teaser {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) auto;
  gap: var(--space-10);
  align-items: center;
  padding: clamp(var(--space-10), 6vw, var(--space-16));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background:
    radial-gradient(circle at 92% 16%, color-mix(in oklab, var(--color-gold) 22%, transparent), transparent 18rem),
    radial-gradient(circle at 8% 92%, color-mix(in oklab, var(--color-rose) 16%, transparent), transparent 22rem),
    color-mix(in oklab, var(--color-surface) 88%, transparent);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.vehicle-teaser::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(212, 174, 116, 0.06), transparent 50%);
  pointer-events: none;
}

/* ---------- Showroom-page distinctive treatment ---------- */
.showroom-page .hero-section::before {
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--color-gold) 16%, transparent), transparent 28rem),
    radial-gradient(ellipse at 0% 100%, color-mix(in oklab, var(--color-rose) 14%, transparent), transparent 26rem);
}

.showroom-hero h1 { max-width: 12ch; }
.showroom-hero .hero-card-top strong { max-width: 16ch; }

/* Showroom inventory toolbar */
.inventory-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 440px) 1fr;
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-10);
}

.search-field { position: relative; }
.search-field::before {
  content: '⌕';
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-faint);
  font-size: 1.1rem;
  pointer-events: none;
}

.search-field input,
.inquiry-form input,
.inquiry-form textarea,
.inquiry-form select {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-surface) 78%, transparent);
  padding: var(--space-3) var(--space-5);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.search-field input { padding-left: 2.7rem; }

.inquiry-form input:focus,
.inquiry-form textarea:focus,
.inquiry-form select:focus,
.search-field input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.inquiry-form textarea {
  resize: vertical;
  min-height: 132px;
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.chip {
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0 var(--space-5);
  color: var(--color-text-muted);
  background: color-mix(in oklab, var(--color-surface) 68%, transparent);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.chip:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.chip.is-active {
  color: var(--color-ink);
  background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold), var(--color-rose));
  border-color: transparent;
}

/* ---------- Vehicle cards (inset rounded media) ---------- */
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.vehicle-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: color-mix(in oklab, var(--color-surface) 86%, transparent);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
  transition: transform 420ms var(--ease-luxe), border-color 420ms var(--ease-luxe), box-shadow 420ms var(--ease-luxe);
}

.vehicle-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.vehicle-card[data-available='Sourcing'] {
  background: color-mix(in oklab, var(--color-surface-2) 78%, var(--color-surface));
}

/* Inset rounded image crop — image lives inside an inset frame so it never bleeds into text */
.vehicle-media {
  position: relative;
  margin: var(--space-3) var(--space-3) 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-ink);
  isolation: isolate;
}

.vehicle-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
  transition: transform 700ms var(--ease-luxe), filter 700ms var(--ease-luxe);
  display: block;
}

.vehicle-card:hover .vehicle-media img {
  transform: scale(1.05);
  filter: saturate(1.05) contrast(1.02);
}

.vehicle-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

.vehicle-badge {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.8rem;
  background: rgba(10, 9, 7, 0.72);
  color: var(--color-champagne);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  z-index: 2;
}

.vehicle-photo-count {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.8rem;
  background: rgba(10, 9, 7, 0.72);
  color: var(--color-text);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  z-index: 2;
}
.vehicle-photo-count::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid currentColor;
  display: inline-block;
}

.vehicle-body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}

.vehicle-title-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: baseline;
}

.vehicle-title-row h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.15;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.vehicle-price {
  color: var(--color-primary);
  font-weight: 600;
  text-align: right;
  min-width: 9ch;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.vehicle-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vehicle-meta span {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.7rem;
}

.vehicle-story {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.vehicle-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
}

.vehicle-actions .button {
  min-height: 44px;
  flex: 1;
  padding-inline: var(--space-4);
  font-size: 0.85rem;
}

/* ---------- Empty / loading / error ---------- */
.empty-state,
.error-state {
  text-align: center;
  padding: clamp(var(--space-12), 8vw, var(--space-20));
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-3xl);
  background: color-mix(in oklab, var(--color-surface) 70%, transparent);
}

.empty-glyph {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  background: color-mix(in oklab, var(--color-primary) 10%, transparent);
}

.empty-state h3,
.error-state h3 {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
}

.empty-state p,
.error-state p {
  margin: var(--space-3) auto var(--space-6);
  color: var(--color-text-muted);
  max-width: 50ch;
}

/* ---------- Inquiry form ---------- */
.inquiry-card {
  display: grid;
  grid-template-columns: 0.46fr 0.54fr;
  gap: var(--space-10);
  padding: clamp(var(--space-8), 5vw, var(--space-16));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in oklab, var(--color-gold) 18%, transparent), transparent 28rem),
    radial-gradient(circle at 100% 100%, color-mix(in oklab, var(--color-rose) 14%, transparent), transparent 30rem),
    color-mix(in oklab, var(--color-surface) 92%, transparent);
  box-shadow: var(--shadow-md);
}

.inquiry-form {
  display: grid;
  gap: var(--space-4);
}

.inquiry-form label {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.form-footnote {
  margin-top: 0 !important;
  font-size: var(--text-xs);
  color: var(--color-text-faint) !important;
  letter-spacing: 0.04em;
  text-transform: none;
}

.form-status {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--color-surface) 86%, transparent);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
}

.form-status strong,
.form-status span {
  display: block;
}

.form-status strong {
  color: var(--color-text);
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
}

.form-status span + span {
  margin-top: var(--space-2);
}
.form-status.success {
  border-color: color-mix(in oklab, var(--color-success) 50%, var(--color-border));
  color: var(--color-text);
  background: color-mix(in oklab, var(--color-success) 14%, var(--color-surface));
}
.form-status.error {
  border-color: color-mix(in oklab, var(--color-error) 60%, var(--color-border));
  color: var(--color-text);
}
.form-status.loading { color: var(--color-text-muted); }

.button[disabled],
.button[data-loading='true'] { cursor: wait; opacity: 0.72; }

/* ---------- Skeleton loaders ---------- */
.skeleton {
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--color-surface-offset) 88%, transparent) 25%,
    color-mix(in oklab, var(--color-surface-dynamic) 82%, var(--color-text) 5%) 50%,
    color-mix(in oklab, var(--color-surface-offset) 88%, transparent) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-image { min-height: 240px; border-radius: var(--radius-xl); }
.skeleton-heading,
.skeleton-text,
.skeleton-button { border-radius: var(--radius-full); }
.skeleton-heading { width: 68%; height: 1.4rem; }
.skeleton-text { width: 100%; height: 0.9rem; }
.skeleton-text:nth-child(3) { width: 76%; }
.skeleton-button { width: 8rem; height: 2.65rem; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---------- Footer ---------- */
.site-footer {
  width: min(var(--content-wide), calc(100vw - var(--space-8)));
  margin: 0 auto;
  padding: var(--space-16) 0 var(--space-20);
  display: flex;
  justify-content: space-between;
  gap: var(--space-10);
  border-top: 1px solid var(--color-divider);
  flex-wrap: wrap;
}

.site-footer p {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 38ch;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
}

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

.footer-fineprint {
  width: 100%;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  color: var(--color-text-faint);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ---------- Vehicle dialog (detail) ---------- */
.vehicle-dialog {
  width: min(1040px, calc(100vw - var(--space-6)));
  max-height: min(900px, calc(100vh - var(--space-6)));
  margin: auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-lg);
  overflow: auto;
}

.vehicle-dialog::backdrop {
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(10px);
}

.dialog-close {
  position: sticky;
  top: var(--space-4);
  margin: var(--space-4) var(--space-4) 0 auto;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-lg);
  font-weight: 400;
}

.dialog-layout {
  display: grid;
  grid-template-columns: 0.58fr 0.42fr;
  gap: var(--space-8);
  padding: 0 var(--space-6) var(--space-8);
}

/* ---------- Carousel / horizontal gallery ---------- */
.gallery-shell {
  position: relative;
}

.vehicle-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--space-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-2xl);
}
.vehicle-gallery::-webkit-scrollbar { display: none; }

.vehicle-gallery-frame {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--color-ink);
  scroll-snap-align: center;
  aspect-ratio: 4 / 3;
}

.vehicle-gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.04);
}

.gallery-controls {
  position: absolute;
  inset: auto 0 50% 0;
  transform: translateY(50%);
  display: flex;
  justify-content: space-between;
  padding: 0 var(--space-3);
  pointer-events: none;
}

.gallery-controls button {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: rgba(10, 9, 7, 0.72);
  color: var(--color-champagne);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(10px);
  font-size: 1.1rem;
  font-family: var(--font-body);
}
.gallery-controls button:hover {
  background: rgba(10, 9, 7, 0.88);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.gallery-controls button[disabled] { opacity: 0.4; cursor: not-allowed; }

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: var(--space-3);
}
.gallery-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-strong);
  border: 0;
  padding: 0;
  transition: background 200ms var(--ease-luxe), width 240ms var(--ease-luxe);
}
.gallery-dots button[aria-current='true'] {
  background: var(--color-primary);
  width: 22px;
  border-radius: var(--radius-full);
}

.gallery-hint {
  margin-top: var(--space-3);
  color: var(--color-text-faint);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

.dialog-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-2);
}

.dialog-detail h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: -0.01em;
}

.dialog-detail .vehicle-price {
  font-size: 1.1rem;
  text-align: left;
  min-width: 0;
}

.spec-list {
  display: grid;
  gap: var(--space-3);
}

.spec-list div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}

.spec-list dt {
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.spec-list dd { text-align: right; color: var(--color-text); }

.image-credit {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}
.image-credit a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease-luxe), transform 800ms var(--ease-luxe);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll-driven animation intentionally NOT applied to .lifestyle-card / .vehicle-card
   to keep cards visible without JS / inside fullPage snapshot tools.
   Cards still get a soft IntersectionObserver reveal via the `.reveal` class
   on their parent containers. */

@keyframes reveal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes reveal-rise {
  from { opacity: 0.001; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero-grid,
  .intro-section,
  .section-heading,
  .concierge-panel,
  .inquiry-card,
  .standards-panel,
  .vehicle-teaser {
    grid-template-columns: 1fr;
  }

  .vehicle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lifestyle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .membership-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-grid { grid-template-columns: 1fr; }

  .dialog-layout { grid-template-columns: 1fr; padding: 0 var(--space-5) var(--space-6); }
}

@media (max-width: 780px) {
  .site-header { padding: var(--space-3); }
  .nav-shell { width: min(var(--content-wide), calc(100vw - var(--space-4))); }
  .menu-toggle { display: inline-grid; }

  .nav-links {
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    top: calc(100% + var(--space-2));
    display: grid;
    gap: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 240ms var(--ease-luxe), transform 240ms var(--ease-luxe);
  }
  .nav-links.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-links a { padding: var(--space-3) var(--space-4); }

  .hero-section { min-height: auto; padding-top: var(--space-12); }

  .hero-grid,
  .section,
  .trust-strip,
  .site-footer { width: calc(100vw - var(--space-6)); }

  h1 { font-size: clamp(2.75rem, 13vw, 4.5rem); }

  .hero-visual,
  .hero-visual.photo-visual img { min-height: 340px; }

  .market-stats,
  .inventory-toolbar,
  .vehicle-grid,
  .lifestyle-grid,
  .proof-grid,
  .membership-flow {
    grid-template-columns: 1fr;
  }

  .standards-grid { grid-template-columns: 1fr; }

  .filter-chips { justify-content: flex-start; }

  .trust-strip { border-radius: var(--radius-2xl); flex-direction: column; gap: 0; padding: var(--space-2); }
  .trust-strip span { width: 100%; padding: var(--space-2) var(--space-3); }
  .trust-strip span:not(:last-child)::after { display: none; }
  .trust-strip span:not(:last-child) { border-bottom: 1px solid var(--color-divider); }

  .site-footer { flex-direction: column; }

  .vehicle-gallery-frame { aspect-ratio: 4 / 3; }
}

@media (max-width: 460px) {
  .brand-mark small { display: none; }
  .brand-symbol { width: 38px; height: 38px; }

  .hero-actions,
  .vehicle-actions { flex-direction: column; }

  .concierge-panel,
  .inquiry-card,
  .standards-panel,
  .vehicle-teaser { border-radius: var(--radius-2xl); }

  .lifestyle-grid,
  .proof-grid,
  .membership-flow { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .vehicle-card:hover .vehicle-media img,
  .hero-card:hover .hero-visual img { transform: none; }
}

/* =============================================================
   Private members club — namespaced under .club-page
   Reuses tokens from the dark-first system (gold, rose, surfaces).
   No selectors here override public homepage / showroom behavior.
   ============================================================= */

.club-page main {
  padding-top: var(--space-6);
}

/* ---- Member hero ---- */
.club-hero {
  width: min(var(--content-wide), calc(100vw - var(--space-8)));
  margin: 0 auto;
  padding-block: clamp(var(--space-12), 7vw, var(--space-20));
}

.club-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: stretch;
}

.club-hero-copy h1 {
  font-size: clamp(2.5rem, 0.8rem + 5vw, 4.75rem);
  line-height: 1.02;
  max-width: 16ch;
}

.club-id-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-3xl);
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in oklab, var(--color-rose) 20%, transparent), transparent 22rem),
    radial-gradient(ellipse at 100% 100%, color-mix(in oklab, var(--color-gold) 22%, transparent), transparent 24rem),
    linear-gradient(160deg, color-mix(in oklab, var(--color-surface) 92%, transparent), color-mix(in oklab, var(--color-surface-2) 88%, transparent));
  box-shadow: var(--shadow-glow);
  overflow: hidden;
  isolation: isolate;
}

.club-id-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in oklab, var(--color-gold) 6%, transparent) 14px 15px);
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
}

.club-id-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-text-muted);
}

.club-id-status {
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: color-mix(in oklab, var(--color-primary) 14%, var(--color-surface));
  color: var(--color-primary);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  font-weight: 600;
}

.club-id-monogram {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--color-gold-bright) 70%, transparent), color-mix(in oklab, var(--color-gold-deep) 70%, transparent));
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.club-id-name strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.1rem);
  letter-spacing: -0.01em;
  color: var(--color-text);
  font-weight: 400;
}

.club-id-name small {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.club-id-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
}

.club-id-meta dt {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.club-id-meta dd {
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-text);
}

/* ---- Generic club-section helpers ---- */
.club-section {
  scroll-margin-top: 90px;
}

/* ---- Profile tiles ---- */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.profile-tile {
  position: relative;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-surface) 92%, transparent), color-mix(in oklab, var(--color-surface-2) 80%, transparent));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 180px;
  transition: transform 420ms var(--ease-luxe), border-color 420ms var(--ease-luxe), box-shadow 420ms var(--ease-luxe);
}

.profile-tile:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.profile-tile .tile-label {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.profile-tile .tile-value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--color-text);
  font-weight: 400;
}

.profile-tile .tile-meta {
  margin-top: auto;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.tile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tile-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface));
  color: var(--color-text);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* ---- Saved vehicle cards ---- */
.saved-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.saved-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: color-mix(in oklab, var(--color-surface) 90%, transparent);
  overflow: hidden;
  transition: transform 420ms var(--ease-luxe), border-color 420ms var(--ease-luxe), box-shadow 420ms var(--ease-luxe);
}

.saved-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.saved-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-surface-2);
  overflow: hidden;
}

.saved-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.saved-media .saved-flag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: color-mix(in oklab, var(--color-bg) 70%, transparent);
  color: var(--color-primary);
  border: 1px solid var(--color-border-strong);
  backdrop-filter: blur(8px);
}

.saved-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  flex: 1;
}

.saved-body h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: 400;
  color: var(--color-text);
}

.saved-body .saved-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.saved-body .saved-meta strong {
  color: var(--color-text);
  font-weight: 600;
}

.saved-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
}

.saved-actions .button {
  flex: 1;
  min-height: 44px;
  font-size: 0.8rem;
  padding-inline: var(--space-4);
}

/* ---- Request history ---- */
.history-shell {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background: color-mix(in oklab, var(--color-surface) 90%, transparent);
  overflow: hidden;
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.history-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-5) clamp(var(--space-5), 3vw, var(--space-8));
  border-bottom: 1px solid var(--color-divider);
}

.history-row:last-child { border-bottom: 0; }

.history-date {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  font-size: 1.05rem;
  letter-spacing: 0;
}

.history-date small {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 0.3rem;
}

.history-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--color-text);
}

.history-body p {
  margin-top: 0.3rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  max-width: 60ch;
}

.history-status {
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: color-mix(in oklab, var(--color-surface) 80%, transparent);
  white-space: nowrap;
}

.history-status[data-status="completed"] {
  color: var(--color-success);
  border-color: color-mix(in oklab, var(--color-success) 50%, var(--color-border));
}

.history-status[data-status="active"] {
  color: var(--color-primary);
  border-color: var(--color-border-strong);
  background: color-mix(in oklab, var(--color-primary) 12%, var(--color-surface));
}

.history-status[data-status="scheduled"] {
  color: var(--color-rose);
  border-color: color-mix(in oklab, var(--color-rose) 40%, var(--color-border));
}

/* ---- VIP drops ---- */
.drops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

/* ---- Connected operations dashboard ---- */
.operations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.operations-grid article {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  background:
    radial-gradient(circle at 20% 0%, color-mix(in oklab, var(--color-gold) 14%, transparent), transparent 16rem),
    color-mix(in oklab, var(--color-surface) 84%, transparent);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.operations-grid span {
  width: max-content;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.75rem;
  color: var(--color-primary);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.operations-grid h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--color-text);
}

.operations-grid p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.drop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--color-rose) 22%, transparent), transparent 14rem),
    linear-gradient(160deg, color-mix(in oklab, var(--color-surface) 92%, transparent), color-mix(in oklab, var(--color-surface-2) 84%, transparent));
  overflow: hidden;
  isolation: isolate;
  min-height: 260px;
  transition: transform 420ms var(--ease-luxe), border-color 420ms var(--ease-luxe), box-shadow 420ms var(--ease-luxe);
}

.drop-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.drop-card .drop-tag {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
}

.drop-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-text);
}

.drop-card p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  flex: 1;
}

.drop-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.drop-meta strong {
  color: var(--color-text);
}

.drop-action {
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.drop-action::after {
  content: "→";
  transition: transform 240ms var(--ease-luxe);
}

.drop-card:hover .drop-action::after { transform: translateX(4px); }

/* ---- Concierge promise list ---- */
.club-promise {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.club-promise li {
  display: flex;
  gap: 0.7rem;
}

.club-promise li span {
  color: var(--color-primary);
  font-weight: 600;
  flex: 0 0 auto;
}

/* ---- Empty / loading states (club-scoped, reuse public empty-state look) ---- */
.club-empty {
  text-align: center;
  padding: clamp(var(--space-10), 6vw, var(--space-16));
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-3xl);
  background: color-mix(in oklab, var(--color-surface) 70%, transparent);
}

.club-empty h3 {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
}

.club-empty p {
  margin: var(--space-2) auto var(--space-5);
  color: var(--color-text-muted);
  max-width: 50ch;
}

/* ---- Skeleton sizing for club tiles ---- */
.skeleton-tile { pointer-events: none; }
.skeleton-tile .skeleton-text + .skeleton-heading {
  margin-top: 0.6rem;
  height: 1.6rem;
}
.skeleton-tile .skeleton-image {
  min-height: 0;
  aspect-ratio: 16 / 10;
}

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .club-hero-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saved-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .club-id-meta { grid-template-columns: 1fr 1fr; }
  .profile-grid,
  .saved-grid,
  .drops-grid,
  .operations-grid { grid-template-columns: 1fr; }
  .history-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .history-status { justify-self: start; }
}

/* ============================================================
   Gate-wall layout — signed-out / locked private club state
   ============================================================ */

/* Outer section: full viewport height, centered, with same atmospheric
   background gradient as the main hero. */
.club-gate {
  min-height: calc(100dvh - 72px);
  display: flex;
  align-items: center;
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
  padding-inline: clamp(var(--space-6), 5vw, var(--space-12));
  background:
    radial-gradient(ellipse at 10% 0%, color-mix(in oklab, var(--color-rose) 14%, transparent), transparent 36rem),
    radial-gradient(ellipse at 90% 100%, color-mix(in oklab, var(--color-gold) 12%, transparent), transparent 40rem);
}

/* Inner wrapper: two-column on wide screens, stacks to single column */
.club-gate-inner {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  align-items: center;
}

/* Copy column */
.club-gate-copy h1 {
  font-size: clamp(2.6rem, 1rem + 5vw, 5.5rem);
  line-height: 1.02;
  margin-top: var(--space-5);
  max-width: 14ch;
}

/* Centered variant (no Clerk card alongside) */
.club-gate-copy--centered {
  grid-column: 1 / -1;
  max-width: var(--content-narrow);
  margin: 0 auto;
  text-align: center;
}

.club-gate-copy--centered .eyebrow {
  justify-content: center;
}

.club-gate-copy--centered .eyebrow::before {
  display: none;
}

.club-gate-copy--centered h1 {
  max-width: none;
}

.club-gate-copy--centered .hero-actions {
  justify-content: center;
}

.club-gate-note {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--color-surface) 82%, transparent);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.club-gate-note strong,
.club-gate-note span {
  display: block;
}

.club-gate-note strong {
  color: var(--color-text);
  margin-bottom: var(--space-1);
  letter-spacing: 0.02em;
}

/* ============================================================
   Clerk widget card — framed sign-in panel
   ============================================================ */

/* Luxury card that wraps the Clerk sign-in widget.
   In Night mode: slightly elevated dark surface over the page.
   In Light/Rose: meaningfully deeper tone than the page bg so the card
   has clear visual separation without needing a hard border. */
.clerk-widget-card {
  position: relative;
  padding: clamp(var(--space-8), 3.5vw, var(--space-10));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-3xl);
  /* Night: glass-dark panel floating over the deep bg */
  background:
    radial-gradient(ellipse at 8% 0%, color-mix(in oklab, var(--color-rose) 14%, transparent), transparent 20rem),
    radial-gradient(ellipse at 96% 104%, color-mix(in oklab, var(--color-gold) 16%, transparent), transparent 22rem),
    linear-gradient(155deg,
      color-mix(in oklab, var(--color-surface) 96%, var(--color-gold)),
      color-mix(in oklab, var(--color-surface-offset) 92%, var(--color-rose)));
  box-shadow: var(--shadow-glow);
  overflow: hidden;
  isolation: isolate;
}

/* Light mode: card surface is #EDE3CC (set by clerkAppearance), but we
   also pull the CSS card bg to a matching amber-parchment so the card
   shell matches what Clerk renders inside it. */
[data-theme='light'] .clerk-widget-card {
  background:
    radial-gradient(ellipse at 8% 0%, color-mix(in oklab, var(--color-rose) 10%, transparent), transparent 18rem),
    radial-gradient(ellipse at 96% 104%, color-mix(in oklab, var(--color-gold) 12%, transparent), transparent 20rem),
    linear-gradient(155deg, #EAD9BA, #DFC9A2);
  border-color: rgba(142, 111, 44, 0.32);
  box-shadow: 0 0 0 1px rgba(142,111,44,0.22), 0 16px 40px rgba(40,28,14,0.14);
}

/* Rose mode: deeper blush shell matches the Clerk inner card (#EDD6D0). */
[data-theme='rose'] .clerk-widget-card {
  background:
    radial-gradient(ellipse at 8% 0%, color-mix(in oklab, var(--color-rose) 12%, transparent), transparent 18rem),
    radial-gradient(ellipse at 96% 104%, color-mix(in oklab, var(--color-gold) 10%, transparent), transparent 20rem),
    linear-gradient(155deg, #E8CCCA, #D9B9B5);
  border-color: rgba(183, 110, 121, 0.36);
  box-shadow: 0 0 0 1px rgba(183,110,121,0.24), 0 16px 40px rgba(96,38,50,0.16);
}

/* Subtle diagonal line texture — same treatment as .club-id-card */
.clerk-widget-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 14px,
    color-mix(in oklab, var(--color-gold) 5%, transparent) 14px 15px
  );
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
}

/* Eyebrow label above the widget */
.clerk-widget-eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--color-primary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-5);
}

.clerk-widget-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
  flex-shrink: 0;
}

/* ============================================================
   Clerk auth mount — the actual Clerk component target
   ============================================================ */

/* min-height prevents collapse before Clerk's React renders.
   Once Clerk injects its own structure the min-height relaxes. */
.clerk-auth-mount {
  width: 100%;
  min-height: 360px;
  transition: min-height 0.3s var(--ease-luxe);
}

.clerk-auth-mount:has(.cl-rootBox),
.clerk-auth-mount:not(:empty) {
  min-height: 0;
}

/* ── Core Clerk inner card overrides ──────────────────────────────────────
   Strip Clerk's own card chrome so our .clerk-widget-card is the only
   visual container. The inner card background is transparent, relying on
   the JS appearance.variables.colorBackground to tint the internal chrome
   (inputs, buttons, divider) while the outer shell handles shape + shadow. */
.clerk-auth-mount .cl-card,
.clerk-auth-mount .cl-rootBox,
.clerk-auth-mount .cl-cardBox {
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
}

/* ── Input field focus-ring — gold glow ──────────────────────────────────*/
.clerk-auth-mount .cl-formFieldInput:focus,
.clerk-auth-mount .cl-formFieldInput:focus-within {
  outline: none;
  box-shadow: 0 0 0 2.5px rgba(212, 174, 116, 0.45) !important;
  border-color: rgba(212, 174, 116, 0.65) !important;
}

[data-theme='light'] .clerk-auth-mount .cl-formFieldInput:focus,
[data-theme='light'] .clerk-auth-mount .cl-formFieldInput:focus-within {
  box-shadow: 0 0 0 2.5px rgba(142, 111, 44, 0.38) !important;
  border-color: rgba(142, 111, 44, 0.60) !important;
}

[data-theme='rose'] .clerk-auth-mount .cl-formFieldInput:focus,
[data-theme='rose'] .clerk-auth-mount .cl-formFieldInput:focus-within {
  box-shadow: 0 0 0 2.5px rgba(183, 110, 121, 0.40) !important;
  border-color: rgba(183, 110, 121, 0.62) !important;
}

/* ── Social button ring + hover — Clerk uses box-shadow for its internal border  */
/* Night: stronger gold ring around social button so it reads as a distinct element */
.clerk-auth-mount .cl-socialButtonsBlockButton,
.clerk-auth-mount .cl-socialButtonsIconButton {
  box-shadow: rgba(228, 199, 151, 0.55) 0 0 0 1.5px, rgba(0, 0, 0, 0.30) 0 2px 8px !important;
}

[data-theme='light'] .clerk-auth-mount .cl-socialButtonsBlockButton,
[data-theme='light'] .clerk-auth-mount .cl-socialButtonsIconButton {
  box-shadow: rgba(40, 28, 14, 0.65) 0 0 0 1.5px, rgba(40, 28, 14, 0.22) 0 3px 10px !important;
}

[data-theme='rose'] .clerk-auth-mount .cl-socialButtonsBlockButton,
[data-theme='rose'] .clerk-auth-mount .cl-socialButtonsIconButton {
  box-shadow: rgba(96, 38, 50, 0.60) 0 0 0 1.5px, rgba(96, 38, 50, 0.22) 0 3px 10px !important;
}

/* Hover: elevate the ring opacity */
.clerk-auth-mount .cl-socialButtonsBlockButton:hover,
.clerk-auth-mount .cl-socialButtonsIconButton:hover {
  box-shadow: rgba(228, 199, 151, 0.80) 0 0 0 2px, rgba(0, 0, 0, 0.40) 0 4px 16px !important;
  filter: brightness(1.07);
}

[data-theme='light'] .clerk-auth-mount .cl-socialButtonsBlockButton:hover {
  box-shadow: rgba(40, 28, 14, 0.80) 0 0 0 2px, rgba(40, 28, 14, 0.32) 0 4px 14px !important;
  filter: brightness(1.05);
}

[data-theme='rose'] .clerk-auth-mount .cl-socialButtonsBlockButton:hover {
  box-shadow: rgba(96, 38, 50, 0.78) 0 0 0 2px, rgba(96, 38, 50, 0.32) 0 4px 14px !important;
  filter: brightness(1.05);
}

/* ── Primary button hover — brighten gradient ────────────────────────────*/
.clerk-auth-mount .cl-formButtonPrimary:hover {
  filter: brightness(1.10);
  box-shadow: 0 6px 24px rgba(212, 174, 116, 0.52), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

[data-theme='light'] .clerk-auth-mount .cl-formButtonPrimary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 22px rgba(142, 111, 44, 0.44), inset 0 1px 0 rgba(255,255,255,0.40) !important;
}

[data-theme='rose'] .clerk-auth-mount .cl-formButtonPrimary:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 22px rgba(183, 110, 121, 0.50), inset 0 1px 0 rgba(255,255,255,0.40) !important;
}

/* ── Clerk internal footer — no double bottom chrome ─────────────────────*/
.clerk-auth-mount .cl-footer,
.clerk-auth-mount .cl-footerPages {
  background: transparent !important;
  border: none !important;
}

/* ── Clerk internal divider lines ────────────────────────────────────────*/
.clerk-auth-mount .cl-dividerLine {
  opacity: 0.9;
}

/* ── "Secured by Clerk" branding — tint to match theme ──────────────────*/
.clerk-auth-mount .cl-powered-by-clerk,
.clerk-auth-mount .cl-internal-1fcczg3,
[class*='cl-powered'],
[class*='cl-internal'] .cl-clerkLogo {
  opacity: 0.45;
  filter: grayscale(0.3);
}

/* ============================================================
   Clerk signed-in bar (shown above portal when user is logged in)
   ============================================================ */

.clerk-signed-in-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: color-mix(in oklab, var(--color-primary-soft) 80%, transparent);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.clerk-user-email {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clerk-signout-btn {
  flex-shrink: 0;
}

/* ============================================================
   Clerk fallback / error messages
   ============================================================ */

.clerk-mount-fallback,
.clerk-load-error {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--color-primary-soft) 40%, transparent);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.clerk-load-error p + p {
  margin-top: var(--space-2);
}

.clerk-load-error-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   Responsive: gate-wall collapses to single column on mobile
   ============================================================ */

@media (max-width: 860px) {
  .club-gate {
    align-items: flex-start;
    padding-block: clamp(var(--space-10), 8vw, var(--space-16));
  }

  .club-gate-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .club-gate-copy h1 {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .club-gate-copy .eyebrow {
    letter-spacing: 0.16em;
    font-size: 0.7rem;
  }

  /* ── Mobile sign-in card fit (iPhone-class viewports ≤480px) ──────────────
     Problem: at 390px the Clerk widget extended past the right edge because
     (a) .club-gate's horizontal padding + .clerk-widget-card's padding ate
     ~112px of width, and (b) Clerk's own .cl-rootBox / .cl-cardBox / .cl-main
     carry default min-widths (~340-352px) that ignore an ancestor that's
     narrower than they expect. Below: tighten the gate padding, tighten the
     card padding, and force every Clerk container/control to honor the
     parent width with min-width:0 so flex/grid children can actually shrink.
     Desktop look (the framed card + diagonal texture + glow) is preserved
     because every rule below is gated to ≤480px. */
  .club-gate {
    padding-inline: var(--space-4); /* 16px gutter both sides */
  }

  .club-gate-inner {
    width: 100%;
    max-width: calc(100vw - 32px);
    margin-inline: auto;
  }

  .clerk-widget-card {
    width: 100%;
    max-width: calc(100vw - 32px);
    /* Trim the inner card padding so the Clerk widget itself has the room */
    padding: var(--space-6) var(--space-5);
    margin-inline: auto;
    box-sizing: border-box;
  }

  .clerk-auth-mount,
  .clerk-auth-mount .cl-rootBox,
  .clerk-auth-mount .cl-cardBox,
  .clerk-auth-mount .cl-card,
  .clerk-auth-mount .cl-main,
  .clerk-auth-mount .cl-form,
  .clerk-auth-mount .cl-socialButtons,
  .clerk-auth-mount .cl-formButtonPrimary,
  .clerk-auth-mount .cl-socialButtonsBlockButton,
  .clerk-auth-mount .cl-socialButtonsIconButton,
  .clerk-auth-mount .cl-formFieldRow,
  .clerk-auth-mount .cl-formField,
  .clerk-auth-mount .cl-formFieldInput,
  .clerk-auth-mount .cl-headerTitle,
  .clerk-auth-mount .cl-headerSubtitle,
  .clerk-auth-mount .cl-footer,
  .clerk-auth-mount .cl-footerPages,
  .clerk-auth-mount .cl-dividerRow {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Header subtitle was rendering as one clipped line — let it wrap. */
  .clerk-auth-mount .cl-headerSubtitle,
  .clerk-auth-mount .cl-headerTitle {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    text-align: center;
  }

  /* Social + primary buttons: never overflow, label wraps if needed. */
  .clerk-auth-mount .cl-socialButtonsBlockButton,
  .clerk-auth-mount .cl-socialButtonsIconButton,
  .clerk-auth-mount .cl-formButtonPrimary {
    white-space: normal !important;
    text-align: center;
  }

  /* The signed-in bar we mount ourselves should also fit the new width. */
  .clerk-auth-mount .clerk-signed-in-bar {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}