/* ============================================
   Accord VI — Styles
   "Resonance" identity: navy + brass, per the
   official logo handoff (see assets/logo/).
   ============================================ */

/* Self-hosted variable fonts, pulled from google/fonts on GitHub
   (github.com/google/fonts/tree/main/ofl) instead of Google's CDN. */
/* @section fonts: Sora (headings), Inter (body), Fraunces (serif); compressed .woff2, Latin only */
@font-face {
  font-family: 'Sora';
  src: url('../assets/fonts/Sora-Variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #0e0f12;
  --color-bg-alt: #101116;
  --color-surface: #14151a;
  --color-border: #23252e;

  /* Theme: Turquoise & Gold, Deep teal (client pick, 23 Oct 2026). Turquoise leads, gold is the partner. */
  --color-primary: #0f8f87;
  --color-primary-light: #3aa39d;   /* lighter start of button fades, so dark button text stays readable */
  --color-primary-dark: #0b6b65;    /* shading in decorative beams only, never behind text */
  --color-accent: #0f8f87;
  --color-gold: #e0b455;            /* partner: the "VI" in the logo, badges and small tags */

  --color-text: #efece6;
  --color-text-dim: #9a9aa8;
  --color-text-faint: #82849a;

  --font-display: 'Sora', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --container-w: 1140px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color: var(--color-bg);
  box-shadow: 0 8px 24px rgba(15, 143, 135, 0.35);
}
.btn-primary:hover { box-shadow: 0 10px 30px rgba(15, 143, 135, 0.5); }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-ghost:hover { border-color: var(--color-primary); }

.btn-block { width: 100%; }

.text-link {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.95rem;
}
.text-link:hover { text-decoration: underline; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(18, 20, 28, 0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}
.logo-text { color: var(--color-text); }       /* "Accord" in the text colour */
.logo-text span { color: var(--color-gold); }  /* "VI" in the gold partner colour */

.logo-mark {
  width: 26px;
  height: 26px;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.logo-mark-wrap {
  position: relative;
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.logo:hover .logo-mark, .logo:focus-visible .logo-mark { transform: scale(1.12); }

/* Two rings that ping outward from the mark on hover, like the sound
   resonance the mark itself depicts. */
.logo-ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  opacity: 0;
  pointer-events: none;
}
.logo:hover .logo-ping, .logo:focus-visible .logo-ping {
  animation: logo-ping-pulse 1.2s ease-out infinite;
}
.logo-ping-2 { animation-delay: 0.4s; }
@keyframes logo-ping-pulse {
  0% { transform: scale(0.55); opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0; }
}

.nav-links {
  position: fixed;
  top: 64px;
  left: 0; right: 0;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.5rem 1.25rem 1.25rem;
  z-index: 1;
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.7);
  /* The menu grows downward out of the bar's bottom edge: it is clipped to nothing along
     its top edge, so it never travels across the logo the way a slide-in from above did. */
  clip-path: inset(0 -1px 100% -1px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: clip-path 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, visibility 0s linear 0.34s;
}
.nav-links.open {
  clip-path: inset(0 -1px -40px -1px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: clip-path 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, visibility 0s;
}

.nav-link {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
  color: var(--color-text-dim);
}
.nav-link:hover { color: var(--color-text); }

.nav-cta {
  margin-top: 1rem;
  text-align: center;
  padding: 0.75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color: var(--color-bg);
  font-weight: 600;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
}
/* Three bars become an X in two beats: the outer bars slide to the middle, then turn.
   Closing plays it backwards (turn first, then spread). translate / rotate / scale are
   separate properties so each gets its own timing. */
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition:
    translate 0.28s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
    rotate 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.2s ease 0.1s,
    opacity 0.2s ease 0.1s;
}
.nav-toggle[aria-expanded="true"] span {
  transition:
    translate 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    rotate 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
    scale 0.2s ease,
    opacity 0.16s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; scale: 0.2 1; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 9rem 0 5rem;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(15, 143, 135, 0.35) 0%, rgba(15, 143, 135, 0) 65%);
  pointer-events: none;
}

.hero-inner { position: relative; text-align: center; }

.hero-mark { display: flex; justify-content: center; margin-bottom: 1.1rem; }
.logo-mark-hero {
  width: 60px;
  height: 60px;
  color: var(--color-primary);
}

.eyebrow {
  color: var(--color-accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

/* ---------- Page hero (register.html / sponsor.html) ---------- */
.page-hero {
  position: relative;
  padding: 8rem 0 3.5rem;
  overflow: hidden;
}
.page-hero-inner { position: relative; text-align: center; }

.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 760px;
  margin: 0 auto;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 14vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.hero-title .outline {
  -webkit-text-stroke: 2px var(--color-primary);
  color: transparent;
}

.hero-tagline {
  max-width: 560px;
  margin: 1.5rem auto 0;
  color: var(--color-text-dim);
  font-size: 1.05rem;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem 0;
}

.meta-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.7rem 1.1rem;
  min-width: 180px;
  text-align: left;
}
.meta-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
}
.meta-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  margin-top: 0.15rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

/* ---------- Countdown ---------- */
.countdown {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.countdown-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  min-width: 72px;
}

.countdown-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.countdown-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  margin-top: 0.2rem;
}

/* ---------- Sections ---------- */
.section { padding: 5rem 0; }
/* Some blocks (the sponsor form) slide in from the side and start 100px off to the right. Phones widen
   the whole page to fit that starting spot, so the page loads zoomed out. Clip at the screen edge. */
.section { overflow-x: hidden; }
@supports (overflow: clip) { .section { overflow-x: clip; } }
.section-alt { background: var(--color-bg-alt); }

.section-kicker {
  color: var(--color-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  margin-bottom: 0.6rem;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  line-height: 1.15;
  max-width: 640px;
}

/* ---------- Legal pages (privacy / terms) ---------- */
.legal-content { max-width: 720px; }
.legal-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 2.25rem 0 0.75rem;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p { color: var(--color-text-dim); margin-bottom: 1rem; }
.legal-content ul { margin: 0 0 1rem; padding-left: 0; }
.legal-content ul li {
  color: var(--color-text-dim);
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: 0.4rem;
}
.legal-content ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-text-faint);
}
.legal-content strong { color: var(--color-text); }

.section-lead {
  color: var(--color-text-dim);
  max-width: 560px;
  margin-top: 0.9rem;
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 2.5rem;
}

.about-copy p {
  color: var(--color-text-dim);
  margin-bottom: 1rem;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  text-align: center;
}
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--color-primary);
}
.stat-label {
  display: block;
  color: var(--color-text-faint);
  font-size: 0.82rem;
  margin-top: 0.35rem;
}

/* ---------- Urgency banner ---------- */
.urgency-banner {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  background: rgba(15, 143, 135, 0.08);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
}
.urgency-badge {
  background: var(--color-primary);
  color: #211a05;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.urgency-banner p { color: var(--color-text-dim); font-size: 0.9rem; }

/* ---------- Sponsorship ---------- */
.tier-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.tier-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.tier-featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), 0 20px 40px rgba(15, 143, 135, 0.15);
}

.tier-badge {
  position: absolute;
  top: -12px;
  right: 1.5rem;
  background: var(--color-gold);
  color: #211a05;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.tier-title {
  border: 2px solid var(--color-primary);
  background: linear-gradient(160deg, var(--color-surface), var(--color-bg-alt));
}

.tier-badge-title { background: var(--color-primary); color: #0e0f12; } /* dark text on teal: 4.9:1 */

/* Animated border-beam (turquoise; the Gold tier keeps gold), scaled by tier (the Title sponsor rules are no longer used): Platinum gets
   the full treatment — a tighter, faster beam plus a light shimmer sweep,
   echoing the president/director card treatment on the immersive site.
   Gold gets a dimmer, slower beam only; Bronze/Silver/Diamond stay plain. */
@property --tier-beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.tier-featured, .tier-title { position: relative; }
/* The shimmer sweeps past the card's sides, so the card clips sideways. It has to be
   `clip`, not `hidden`: overflow-x:hidden quietly turns overflow-y into auto too, which
   sliced the "Title Sponsor" / "Most popular" badge (it sits 12px above the card) in half. */
@supports (overflow: clip) { .tier-featured, .tier-title { overflow-x: clip; } }
@supports not (overflow: clip) { .tier-title::before { display: none; } }

.tier-featured::after, .tier-title::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--tier-beam-angle),
    transparent 0deg,
    transparent 260deg,
    var(--color-primary-dark) 300deg,
    var(--color-primary) 330deg,
    var(--color-primary-dark) 350deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: tier-beam-spin 9s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.tier-title::after {
  padding: 2px;
  background: conic-gradient(from var(--tier-beam-angle),
    transparent 0deg,
    transparent 230deg,
    var(--color-bg) 260deg,
    var(--color-primary-dark) 300deg,
    var(--color-primary) 330deg,
    var(--color-primary-dark) 350deg,
    transparent 360deg);
  animation-duration: 7s;
}
@keyframes tier-beam-spin { to { --tier-beam-angle: 360deg; } }

.tier-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(15, 143, 135, 0.3) 48%, rgba(15, 143, 135, 0.55) 50%, rgba(15, 143, 135, 0.3) 52%, transparent 58%);
  transform: translateX(-130%);
  animation: tier-shimmer 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes tier-shimmer {
  0% { transform: translateX(-130%); }
  37% { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

.tier-badge { z-index: 2; }
.tier-featured .tier-name, .tier-featured .tier-price, .tier-featured .tier-blurb, .tier-featured .tier-list,
.tier-title .tier-name, .tier-title .tier-price, .tier-title .tier-blurb, .tier-title .tier-list {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tier-featured::after, .tier-title::after, .tier-title::before {
    animation: none;
  }
}

.tier-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
}

.tier-price {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-accent);
  margin: 0.3rem 0 0.6rem;
}

.tier-blurb {
  color: var(--color-text-dim);
  font-size: 0.92rem;
  margin-bottom: 1.1rem;
}

.tier-list li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--color-text-dim);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.tier-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.tier-note {
  margin-top: 1.5rem;
  color: var(--color-text-faint);
  font-size: 0.8rem;
  font-style: italic;
}

/* ---------- Ideal-for-brands strip ---------- */
.brands-strip {
  margin-top: 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.brands-label {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.brands-value { color: var(--color-text-dim); font-size: 0.92rem; }

/* ---------- Custom add-ons ---------- */
.addon-block {
  margin-top: 2.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.addon-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.addon-lead {
  color: var(--color-text-dim);
  font-size: 0.92rem;
  margin-bottom: 1.1rem;
}
.addon-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
.addon-list li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--color-text-dim);
  font-size: 0.9rem;
}
.addon-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* ---------- Sponsor marquee ---------- */
.sponsor-marquee {
  margin-top: 3rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.sponsor-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: sponsor-scroll 22s linear infinite;
}

/* A tap counts as :hover on a phone, which froze the strip, so only a real mouse pauses it.
   js/marquee.js takes over the motion (class is-js) so touch can also swipe it. */
@media (hover: hover) { .sponsor-marquee:hover .sponsor-track { animation-play-state: paused; } }
.sponsor-marquee { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.marquee-toggle {
  display: block;
  margin: 0.9rem auto 0;
  padding: 0.55rem 1.3rem;
  min-height: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: none;
  color: var(--color-text-dim);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.marquee-toggle:hover { color: var(--color-text); border-color: var(--color-text-dim); }
.marquee-toggle[hidden] { display: none; }
.sponsor-marquee.is-js .sponsor-track { animation: none !important; will-change: transform; }

.sponsor-chip {
  flex: 0 0 auto;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.75rem;
  color: var(--color-text-faint);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

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

@media (prefers-reduced-motion: reduce) {
  .sponsor-track { animation: none; }
}

.cta-banner {
  margin-top: 3rem;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}
.cta-banner h2,
.cta-banner h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
  color: var(--color-bg);
}

/* Text for screen readers only (a page heading that the design shows another way). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cta-banner p { color: rgba(14, 15, 18, 0.82); font-size: 0.92rem; }
.cta-banner .btn-primary {
  background: var(--color-bg);
  color: var(--color-primary);
  box-shadow: none;
}

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  margin-top: 2.5rem;
}

.gallery-item {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote-block {
  margin-top: 2.5rem;
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.quote-block p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.4rem;
  color: var(--color-text);
}
.quote-block cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  color: var(--color-text-faint);
  font-size: 0.85rem;
}

/* ---------- Schedule ---------- */
.schedule-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.schedule-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.schedule-day {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary);
}
.schedule-date {
  display: block;
  color: var(--color-text-faint);
  font-size: 0.85rem;
  margin-top: 0.2rem;
  margin-bottom: 1.25rem;
}
.schedule-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.schedule-list li {
  display: flex;
  gap: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
}
.schedule-list li:first-child {
  padding-top: 0;
  border-top: none;
}
.schedule-time {
  flex: 0 0 auto;
  width: 5.5rem;
  color: var(--color-text-faint);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- FAQ ---------- */
.faq-list {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  text-align: left;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
}

.faq-icon {
  flex: 0 0 auto;
  color: var(--color-accent);
  font-size: 1.2rem;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.faq-answer p {
  color: var(--color-text-dim);
  font-size: 0.92rem;
  padding: 0 1.4rem 1.1rem;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.contact-details { margin-top: 1.75rem; }
.contact-details li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
}
.contact-label {
  width: 90px;
  color: var(--color-text-faint);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.contact-value { font-weight: 600; }
.ph-tag {
  font-size: 0.68rem;
  color: var(--color-gold);
  border: 1px solid var(--color-gold);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
/* Spans are inline pills within body text; keep the whole pill together
   as one unit instead of splitting mid-phrase at the line wrap. The
   block <p class="ph-tag"> banner variant is unaffected. */
span.ph-tag {
  display: inline-block;
}

.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

.form-row { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.form-row[hidden] { display: none; }
.form-row label { font-size: 0.85rem; color: var(--color-text-dim); font-weight: 500; }

/* @section form-fields: text boxes, dropdowns and message boxes on the forms */
.form-row input,
.form-row select,
.form-row textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem; /* 16px: anything smaller makes iPhones zoom in when the field is tapped */
  resize: vertical;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.form-note {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--color-accent);
  min-height: 1.2em;
}
.form-note.is-error { color: #e0555a; }
.form-note.is-success { color: #5ecb8f; }

.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  background: var(--color-primary);
  color: #0e0f12;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- Map embed ---------- */
.map-embed {
  margin: 1rem 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  filter: grayscale(0.3) invert(0.92) contrast(0.9);
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(14, 15, 18, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border);
}
body:has(.sticky-mobile-cta) { padding-bottom: 4.5rem; }
@media (min-width: 768px) {
  .sticky-mobile-cta { display: none; }
  body:has(.sticky-mobile-cta) { padding-bottom: 0; }
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 3rem 0;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.footer-logo { font-size: 1.1rem; justify-content: center; }
.footer-tag, .footer-copy, .footer-legal { color: var(--color-text-faint); font-size: 0.85rem; }
.footer-legal .text-link { color: var(--color-text-faint); }
.footer-legal .text-link:hover { color: var(--color-text); }
.footer-admin-link { color: inherit; text-decoration: none; cursor: default; }
.footer-secret { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: default; position: relative; }
/* the hidden staff entry is a 12px character; an invisible larger area makes it hittable with a thumb */
.footer-secret::after { content: ""; position: absolute; inset: -10px -14px; }
.footer-ig {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.9rem;
  /* 44px touch area; the negative margin cancels the added space so the footer does not move */
  display: inline-block;
  padding: 0.7rem 0.4rem;
  margin: -0.7rem -0.4rem;
}

/* ============================================
   Tablet / Desktop
   ============================================ */
@media (min-width: 768px) {
  .about-grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  .tier-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .schedule-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .addon-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }

  .nav-links {
    position: static;
    flex-direction: row;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    gap: 2rem;
    transform: none;
    opacity: 1;
    clip-path: none;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    z-index: auto;
    transition: none;
  }
  .nav-link { border-bottom: none; padding: 0; }
  .nav-cta { margin-top: 0; padding: 0.6rem 1.3rem; font-size: 0.9rem; }

  .tier-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Accessibility: focus ring + reduced motion ---------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}
.btn-primary:focus-visible,
.nav-cta:focus-visible {
  outline-color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  .logo-ping { animation: none !important; opacity: 0; }
  .logo-mark { transition: none; }
  .logo:hover .logo-mark, .logo:focus-visible .logo-mark { transform: none; }
  .nav-toggle span, .nav-toggle[aria-expanded="true"] span, .nav-links, .nav-links.open { transition: none; }
}