/* Enables native cross-page transitions in supporting browsers. Kept deliberately
   quiet (a plain crossfade, no scale/rotate) so it reads as seamless rather than
   like an effect — the header/marquee are excluded below so they never appear
   to jump or refade, since they're identical on every page. */
@view-transition{
  navigation: auto;
}
::view-transition-old(root){ animation: view-page-out 0.4s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root){ animation: view-page-in 0.5s cubic-bezier(.16,1,.3,1) both; }
@keyframes view-page-out{ from{ opacity:1; transform: translateY(0); } to{ opacity:0; transform: translateY(-10px); } }
@keyframes view-page-in{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform: translateY(0); } }

.site-header{ view-transition-name: site-header; }
.marquee{ view-transition-name: site-marquee; }
::view-transition-old(site-header), ::view-transition-new(site-header),
::view-transition-old(site-marquee), ::view-transition-new(site-marquee){
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-group(nav-active-pill){
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(.16,1,.3,1);
}

/* ===== Tokens ===== */
:root{
  --ink: #0A1628;
  --ink-2: #101F35;
  --ink-3: #17293F;
  --charcoal: #2A2E38;
  --felt: #16283D;
  --felt-2: #1E3350;
  --rail: #081220;
  --white: #FFFFFF;
  --white-soft: #E9EAEC;
  --cream: #F3F2EE;
  --smoke: #96A0AC;
  --line: rgba(200,210,225,0.14);
  --line-strong: rgba(200,210,225,0.4);

  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --wrap: 1180px;
  --radius: 16px;
}

*,*::before,*::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
:focus-visible{ outline: 2px solid var(--white); outline-offset: 3px; }
::selection{ background: var(--white); color: var(--ink); }

.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0 0 0.9rem;
  display:flex; align-items:center; gap:0.5rem;
}
.eyebrow.center{ justify-content:center; }
.eyebrow::before{ content:""; width:14px; height:1px; background: var(--white-soft); display:inline-block; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 600; color: var(--white); margin: 0 0 1rem; letter-spacing: -0.01em; }
h1 em, .hero-copy em{ font-style: normal; font-weight: 500; color: var(--smoke); }
#hero-heading > span, #hero-heading > em{ display:block; }

.section-title{ font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 700; }
.section-title.center{ text-align:center; }

.mono{ font-family: var(--font-mono); }

/* ambient backgrounds */
.haze{
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(700px 480px at 12% -8%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(900px 560px at 92% 8%, rgba(255,255,255,0.04), transparent 60%),
    var(--ink);
}
.spotlight{
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(320px 320px at var(--sx,50%) var(--sy,30%), rgba(255,255,255,0.05), transparent 70%);
}

/* ===== Marquee ===== */
.marquee{
  background: var(--white);
  color: var(--ink);
  overflow: hidden;
  white-space: nowrap;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--ink);
}
.marquee-track{
  display:inline-flex; gap: 0.9rem; align-items:center;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; font-weight:600;
  animation: scroll-left 32s linear infinite;
}
.marquee-track .dot{ opacity:0.4; font-size:0.6rem; }
@keyframes scroll-left{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state: paused; }

/* ===== Header ===== */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(10,22,40,0.68);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.site-header.is-scrolled{
  background: rgba(10,22,40,0.9);
  border-bottom-color: var(--line);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px; transition: height 0.35s ease;
}
.site-header.is-scrolled .header-inner{ height: 64px; }
.brand{ display:flex; align-items:center; gap:0.7rem; font-family: var(--font-display); font-weight:700; font-size:1.15rem; color: var(--white); }
.brand-mark{ display:block; width:40px; height:auto; transition: width 0.35s ease; }
.site-header.is-scrolled .brand-mark{ width: 34px; }
.brand-word-thin{ font-weight:400; color: var(--smoke); }

.main-nav{ position:relative; display:flex; align-items:center; gap: 0.1rem; }
.main-nav a{
  position:relative; z-index:2; font-size:0.82rem; color: var(--smoke); white-space:nowrap;
  padding: 0.55rem 0.75rem; border-radius: 999px; transition: color 0.25s ease;
}
.main-nav a:hover{ color: var(--white); }
.main-nav a.active{ color: var(--white); }
.main-nav a.active:not(.nav-cta){ box-shadow: inset 0 -2px 0 var(--white); }

.nav-pill, .nav-hover-glow{
  position:absolute; top:0; left:0; z-index:1; border-radius:999px;
  opacity:0; pointer-events:none;
  transition: transform 0.45s cubic-bezier(.16,1,.3,1), width 0.4s cubic-bezier(.16,1,.3,1), height 0.4s ease, opacity 0.25s ease;
}
.nav-pill{ background: var(--white); view-transition-name: nav-active-pill; }
.nav-pill.is-active{ opacity:1; }
.nav-hover-glow{ background: var(--ink-3); border: 1px solid var(--line); }
.nav-hover-glow.is-active{ opacity:1; }

@media (hover:hover) and (pointer:fine){
  .main-nav.nav-pill-ready a.active:not(.nav-cta){ box-shadow:none; color: var(--ink); }
}

/* ===== Header actions (language switch + mobile menu toggle) ===== */
.header-actions{ display:flex; align-items:center; gap: 0.75rem; flex-shrink:0; }

/* ===== Language switch ===== */
.lang-switch{ position:relative; }
.lang-switch-btn{
  display:flex; align-items:center; gap: 0.4rem;
  background: transparent; border: 1px solid var(--line); color: var(--cream);
  font-family: var(--font-mono); font-size: 0.78rem; font-weight:600;
  padding: 0.45rem 0.7rem; border-radius: 999px; cursor:pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lang-switch-btn:hover{ border-color: var(--line-strong); background: var(--ink-2); }
.lang-menu{
  position:absolute; top: calc(100% + 10px); right:0; z-index:70;
  list-style:none; margin:0; padding: 0.4rem; min-width: 168px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.lang-menu li{
  display:flex; align-items:center; gap: 0.6rem;
  padding: 0.55rem 0.7rem; border-radius: 8px; font-size: 0.88rem; color: var(--cream);
  cursor:pointer; transition: background 0.15s ease;
}
.lang-menu li:hover{ background: var(--ink-3); }
.lang-menu li span{ font-size: 1rem; }
.nav-cta{
  font-family: var(--font-mono); font-size:0.82rem !important;
  color: var(--ink) !important; background: var(--white);
  padding: 0.6rem 1.2rem; border-radius: 999px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.nav-cta:hover{ background: var(--white-soft); color: var(--ink) !important; transform: translateY(-1px); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding: 8px; }
.nav-toggle span{ width: 22px; height: 2px; background: var(--cream); display:block; }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding: 0.85rem 1.5rem; border-radius: 999px; font-weight:700; font-size:0.95rem;
  border: 0; cursor: pointer; font-family: var(--font-body);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.btn-lg{ padding: 1rem 1.9rem; font-size: 1rem; }
.btn-solid{ background: var(--white); color: var(--ink); box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
.btn-solid:hover{ background: var(--white-soft); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,0,0,0.5); }
.btn-solid:active{ transform: translateY(0); }
.btn-ghost{ background: transparent; border: 1px solid var(--line-strong); color: var(--cream); }
.btn-ghost:hover{ border-color: var(--white); color: var(--white); transform: translateY(-2px); }
.btn-ghost-invert{ background: transparent; border: 1px solid rgba(10,22,40,0.35); color: var(--ink); }
.btn-ghost-invert:hover{ border-color: var(--ink); transform: translateY(-2px); }

/* ===== Hero ===== */
.hero{ position:relative; min-height: 92vh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video{
  width:100%; height:100%; object-fit:cover;
  filter: grayscale(1) contrast(1.15) brightness(0.75);
  transform: scale(1.12); will-change: transform;
}
.hero-media-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(10,22,40,0.96) 0%, rgba(10,22,40,0.75) 32%, rgba(10,22,40,0.35) 62%, rgba(10,22,40,0.55) 100%),
    linear-gradient(90deg, rgba(10,22,40,0.55) 0%, rgba(10,22,40,0.15) 55%);
}
.hero-inner{ position:relative; z-index:1; padding: 8rem 28px 4.5rem; width:100%; }
.hero-logo{ width: 150px; height:auto; margin-bottom: 2rem; }
.hero-copy h1, .hero h1{ font-size: clamp(2.9rem, 6vw, 5rem); line-height: 0.98; letter-spacing: -0.02em; font-weight:700; max-width: 16ch; }
.hero-sub{ color: var(--smoke); font-size: 1.1rem; max-width: 46ch; margin-bottom: 2.2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap: 1rem; margin-bottom: 2.75rem; }
.hero-actions .btn-ghost svg{ color: var(--cream); }
.hero-actions .btn-ghost:hover svg{ color: var(--white); }

.hero-stats{ list-style:none; display:flex; gap: 2.2rem; padding:0; margin:0; border-top: 1px solid var(--line); padding-top: 1.5rem; max-width: fit-content; }
.hero-stats li{ display:flex; flex-direction:column; gap:0.25rem; }
.hero-stats .num{ font-family: var(--font-mono); font-size: 1.05rem; color: var(--white); }
.hero-stats .lbl{ font-size: 0.8rem; color: var(--smoke); }

/* ===== Ethos ===== */
.ethos{ padding: 6.5rem 0; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.03) 30%, rgba(255,255,255,0.03) 70%, transparent); }
.ethos-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items:center; }
.ethos-visual{ position:relative; height: 380px; display:flex; align-items:center; justify-content:center; }
.ethos-photo{ width: 92%; height: 92%; box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.bloom{ position:absolute; border-radius:50%; filter: blur(42px); opacity:0.5; animation: drift 14s ease-in-out infinite; background: var(--white); }
.bloom-1{ width:220px; height:220px; top:10%; left:15%; opacity:0.12; }
.bloom-2{ width:180px; height:180px; top:40%; left:45%; animation-delay: -4s; opacity:0.08; }
.bloom-3{ width:150px; height:150px; top:15%; left:55%; animation-delay: -9s; opacity:0.1; }
@keyframes drift{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(15px,-20px) scale(1.08); } }
.ethos-mark{ position:relative; width: 130px; opacity:0.9; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6)); }
.ethos-copy p{ color: var(--smoke); max-width: 58ch; }
.ethos-copy h2{ max-width: 16ch; font-size: clamp(1.9rem, 3vw, 2.5rem); }

/* ===== Table demo ===== */
.table-demo{ padding: 6rem 0; }
.table-demo-inner{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 3rem; align-items:center; }
.table-demo-copy h2{ max-width: 12ch; }
.table-demo-copy p{ color: var(--smoke); max-width: 40ch; }
.table-demo-visual{ position:relative; display:flex; flex-direction:column; align-items:center; gap: 1.5rem; }
.table-art{ position:relative; width: 100%; max-width: 520px; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6)); }
.rack circle, .cue-ball{ filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.break-btn{ font-size: 0.85rem; padding: 0.7rem 1.3rem; }

/* ===== Features ===== */
.features{ padding: 6.5rem 0; }
.feature-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; }
.feature-card{
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2.1rem 1.7rem;
  transition: border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.feature-card:hover, .feature-card:focus-visible{
  border-color: var(--line-strong); transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  background: var(--ink-3);
}
.feature-icon{ width:40px; height:40px; margin-bottom:1.25rem; transition: transform 0.3s ease; }
.feature-card:hover .feature-icon{ transform: scale(1.12) rotate(-4deg); }
.feature-card h3{ font-size: 1.15rem; margin-bottom: 0.6rem; }
.feature-card p{ color: var(--smoke); font-size: 0.92rem; margin:0; }

/* ===== Tournament banner ===== */
.tournament{ background: var(--cream); color: var(--ink); padding: 4.5rem 0; position: relative; overflow:hidden; }
.tournament-mark{
  position:absolute; right:-40px; top:50%; transform: translateY(-50%);
  width: 340px; opacity:0.06; filter: invert(1);
}
.tournament-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:3rem; flex-wrap:wrap; }
.tournament-text{ max-width: 52ch; }
.tournament-text h2{ color: var(--ink); }
.tournament-text p{ color: rgba(10,22,40,0.7); }
.tournament-text .eyebrow{ color: rgba(10,22,40,0.55); }
.tournament-text .eyebrow::before{ background: rgba(10,22,40,0.4); }
.tournament-text .btn{ margin-top: 0.5rem; }

.countdown{ text-align:center; }
.countdown .eyebrow{ color: rgba(10,22,40,0.55); justify-content:center; }
.countdown .eyebrow::before{ background: rgba(10,22,40,0.4); }
.countdown-grid{ display:flex; gap: 0.9rem; }
.countdown-cell{
  background: rgba(10,22,40,0.04); border: 1px solid rgba(10,22,40,0.16);
  border-radius: 12px; padding: 0.9rem 1.1rem; min-width: 74px;
  display:flex; flex-direction:column; align-items:center; gap:0.3rem;
}
.countdown-val{ font-size: 1.6rem; color: var(--ink); font-weight:600; }
.countdown-key{ font-size: 0.68rem; text-transform:uppercase; letter-spacing:0.1em; color: rgba(10,22,40,0.55); }

/* ===== Booking ===== */
.book{ padding: 7rem 0; position:relative; }
.book-grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 4rem; align-items:start; }
.book-grid > *{ min-width:0; }
.book-intro h2{ font-size: clamp(1.9rem, 3vw, 2.5rem); max-width: 14ch; }
.book-copy{ color: var(--smoke); max-width: 42ch; margin-bottom: 1.75rem; }
.book-notes{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 0.9rem; }
.book-notes li{ color: var(--smoke); font-size: 0.92rem; padding-left: 1.2rem; position:relative; }
.book-notes li::before{ content:"—"; position:absolute; left:0; color: var(--white-soft); }
.inline-link{ color: var(--white); border-bottom: 1px solid var(--line-strong); }
.inline-link:hover{ border-color: var(--white); }

.book-form{
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 22px; padding: 2.5rem; display:flex; flex-direction:column; gap: 1.5rem;
}
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.phone-field{ display:flex; gap: 0.6rem; min-width:0; }
.phone-field select{ flex: 0 0 132px; min-width:0; max-width:100%; }
.phone-field input{ flex: 1; min-width:0; max-width:100%; }
.field{ display:flex; flex-direction:column; gap: 0.5rem; min-width:0; }
.field-row{ min-width:0; }
.field select, .field input, .field textarea{ min-width:0; max-width:100%; }
.field label{ font-size: 0.8rem; color: var(--smoke); font-weight:600; }
.field label .opt{ color: rgba(143,143,143,0.6); font-weight:400; }
.field input, .field select, .field textarea{
  background: var(--ink); border: 1px solid var(--line);
  color: var(--cream); border-radius: 10px; padding: 0.8rem 1rem;
  font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(143,143,143,0.6); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--white); box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}
.field select{ appearance:none; background-image: linear-gradient(45deg, transparent 50%, var(--white) 50%), linear-gradient(135deg, var(--white) 50%, transparent 50%); background-position: calc(100% - 22px) center, calc(100% - 16px) center; background-size: 6px 6px; background-repeat: no-repeat; }
.field textarea{ resize: vertical; min-height: 64px; }
.field input:invalid:not(:placeholder-shown){ border-color: var(--smoke); }

.stepper{ display:flex; align-items:center; gap: 1rem; }
.stepper-btn{
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--ink); color: var(--white); font-size: 1.2rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: background 0.2s ease, transform 0.15s ease;
}
.stepper-btn:hover{ background: var(--ink-3); transform: scale(1.06); }
.stepper-val{ font-size: 1.2rem; min-width: 1.5ch; text-align:center; }
.stepper-lbl{ color: var(--smoke); font-size: 0.85rem; }

.table-picker{ display:flex; flex-wrap:wrap; gap: 0.6rem; }
.table-chip{
  display:inline-flex; align-items:center; gap: 0.5rem;
  background: var(--ink); border: 1px solid var(--line); color: var(--smoke);
  border-radius: 999px; padding: 0.55rem 1rem 0.55rem 0.55rem; font-size: 0.85rem; cursor:pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.chip-dot{
  width: 22px; height: 22px; border-radius: 50%; background: var(--ink-3); color: var(--white);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size: 0.72rem;
}
.table-chip:hover{ border-color: var(--line-strong); color: var(--cream); }
.table-chip[aria-pressed="true"]{ background: var(--white); color: var(--ink); border-color: var(--white); }
.table-chip[aria-pressed="true"] .chip-dot{ background: rgba(10,22,40,0.15); color: var(--ink); }

.book-actions{ display:flex; flex-direction:column; gap: 0.6rem; align-items:flex-start; }
.book-fineprint{ color: var(--smoke); font-size: 0.8rem; margin:0; }
.book-confirm{
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 1rem 1.2rem; font-size: 0.9rem; color: var(--cream);
}
.book-confirm .mono{ color: var(--white); }

/* ===== Visit ===== */
.visit{ padding: 6rem 0; }
.visit-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.visit-panel{ background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.5rem; }
.hours-row{ display:flex; justify-content:space-between; align-items:baseline; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
.hours-row .mono{ color: var(--white); font-size: 1.1rem; }
.visit-note{ color: var(--smoke); font-size: 0.9rem; margin-top: 1rem; }
.phone-row{ display:flex; flex-direction:column; gap: 0.75rem; margin-top: 0.5rem; }
.phone-link{ font-size: 1.15rem; color: var(--white); border-bottom: 1px solid transparent; width: fit-content; }
.phone-link:hover{ border-color: var(--white); }
address{ font-style: normal; font-size: 1.1rem; margin: 0 0 1rem; line-height: 1.5; }

/* ===== Footer ===== */
.site-footer{ border-top: 1px solid var(--line); padding: 3rem 0 5.5rem; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; }
.footer-logo{ width: 130px; height:auto; opacity:0.9; }
.footer-meta{ display:flex; gap: 1.75rem; color: var(--smoke); font-size: 0.85rem; flex-wrap:wrap; }

/* ===== Floating book button ===== */
.fab{
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display:flex; align-items:center; gap: 0.5rem;
  background: var(--white); color: var(--ink); font-weight:700; font-size:0.95rem;
  padding: 0.9rem 1.3rem; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  animation: pulse 2.8s ease-in-out infinite;
  transition: transform 0.2s ease;
}
.fab:hover{ transform: translateY(-3px) scale(1.03); }
body:has(.cookie-banner:not([hidden])) .fab{ bottom: 96px; }
@keyframes pulse{ 0%,100%{ box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 0 rgba(255,255,255,0.25); } 50%{ box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 8px rgba(255,255,255,0); } }

/* ===== Page header (sub-pages) ===== */
.page-header{ padding: 7rem 0 3.5rem; }
.page-header h1{ font-size: clamp(2.2rem, 4.4vw, 3.4rem); max-width: 20ch; }
.page-header-sub{ color: var(--smoke); max-width: 60ch; font-size: 1.05rem; }

/* ===== About (home) ===== */
.about{ padding: 5.5rem 0 6.5rem; }
.about-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; align-items:center; }
.about-copy h2{ font-size: clamp(1.7rem, 2.8vw, 2.3rem); max-width: 18ch; }
.about-copy p{ color: var(--smoke); max-width: 62ch; }
.about-photo{ aspect-ratio: 3/4; }
.about-tags{ list-style:none; margin: 1.5rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap: 0.75rem; }
.about-tags li{
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--cream);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.6rem 1.1rem;
  background: var(--ink-2);
}

/* ===== Table specs (room page) ===== */
.specs-section{ padding: 6rem 0; }
.specs-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items:center; }
.specs-copy h2{ font-size: clamp(1.7rem, 2.8vw, 2.3rem); max-width: 16ch; }
.specs-copy p{ color: var(--smoke); max-width: 48ch; margin-bottom: 1.5rem; }
.specs-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 0.75rem; }
.specs-list li{
  color: var(--cream); font-size: 0.92rem; padding-left: 1.2rem; position:relative;
}
.specs-list li::before{ content:"—"; position:absolute; left:0; color: var(--white-soft); }
.specs-photo{ aspect-ratio: 4/3; }

/* ===== Gallery (photo grid) ===== */
.gallery-section{ padding: 2rem 0 6.5rem; }
.gallery-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap: 0.6rem; margin-bottom: 2.5rem; }
.gallery-filter-btn{
  background: transparent; border: 1px solid var(--line); color: var(--smoke);
  font-family: var(--font-mono); font-size: 0.78rem; padding: 0.55rem 1.1rem;
  border-radius: 999px; cursor:pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.gallery-filter-btn:hover{ border-color: var(--line-strong); color: var(--cream); }
.gallery-filter-btn.active{ background: var(--white); color: var(--ink); border-color: var(--white); }
.gallery-empty{ text-align:center; color: var(--smoke); padding: 3rem 0; }
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 3rem; }
.gallery-grid-3{ grid-template-columns: repeat(3, 1fr); }
.gallery-card{
  position:relative; overflow:hidden; border-radius: var(--radius);
  aspect-ratio: 4 / 5; border: 1px solid var(--line); background: var(--ink-2);
  cursor: pointer;
}
.gallery-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.18); opacity:0; filter: grayscale(0.1) contrast(1.05);
  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1), opacity 0.9s ease;
}
.gallery-card.is-visible img{ opacity:1; transform: scale(1); }
.gallery-card:hover img{ transform: scale(1.08); }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0; padding: 1rem 1.1rem;
  background: linear-gradient(0deg, rgba(10,22,40,0.9), transparent);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--cream);
  opacity:0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery-card:hover .gallery-caption{ opacity:1; transform: translateY(0); }

/* ===== Gallery lightbox ===== */
.lightbox{
  position: fixed; inset: 0; z-index: 300;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.lightbox-backdrop{
  position:absolute; inset:0; background: rgba(6,12,22,0.94); backdrop-filter: blur(6px);
}
.lightbox-close, .lightbox-nav{
  position:absolute; z-index:2; display:flex; align-items:center; justify-content:center;
  width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(16,31,53,0.7); color: var(--white); cursor:pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.lightbox-close:hover, .lightbox-nav:hover{ background: var(--ink-3); border-color: var(--line-strong); }
.lightbox-close{ top: 20px; right: 20px; }
.lightbox-nav{ top: 50%; transform: translateY(-50%); }
.lightbox-nav:hover{ transform: translateY(-50%) scale(1.06); }
.lightbox-prev{ left: 20px; }
.lightbox-next{ right: 20px; }
.lightbox-nav[disabled]{ opacity: 0.3; pointer-events:none; }

.lightbox-stage{
  position:relative; z-index:1; width: min(88vw, 1400px); height: min(76vh, 900px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  touch-action: none;
}
.lightbox-img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit: contain; user-select:none; -webkit-user-drag:none;
  cursor: zoom-in; transform-origin: center center;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.lightbox-img.is-zoomed{ cursor: grab; transition: none; }
.lightbox-img.is-panning{ cursor: grabbing; }

.lightbox-footer{
  position:absolute; left:0; right:0; bottom: 18px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap: 0.3rem;
  padding: 0 5rem; text-align:center;
}
.lightbox-caption{ color: var(--cream); font-size: 0.92rem; max-width: 60ch; }
.lightbox-counter{ font-family: var(--font-mono); font-size: 0.75rem; color: var(--smoke); }

@media (max-width: 720px){
  .lightbox-stage{ width: 94vw; height: 62vh; }
  .lightbox-close{ top: 12px; right: 12px; width: 40px; height: 40px; }
  .lightbox-prev{ left: 8px; }
  .lightbox-next{ right: 8px; }
  .lightbox-nav{ width: 40px; height: 40px; }
  .lightbox-footer{ padding: 0 1.5rem; bottom: 10px; }
}

/* ===== Photo feature (single supporting photo) ===== */
.photo-feature{
  border-radius: var(--radius); overflow:hidden; border: 1px solid var(--line);
  background: var(--ink-2);
}
.photo-feature img{ width:100%; height:100%; object-fit:cover; object-position: center 45%; display:block; }

/* ===== Video embed (tournaments page) ===== */
.video-embed{ border-radius: var(--radius); overflow:hidden; border: 1px solid var(--line); background: var(--ink-2); }
.video-embed iframe{ width:100%; aspect-ratio: 9/16; max-height: 640px; border:0; display:block; margin: 0 auto; }

/* ===== Recap section (tournaments page) ===== */
.recap-section{ padding: 1rem 0 6rem; }
.recap-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items:start; }
.recap-copy h2{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); max-width: 16ch; }
.recap-copy p{ color: var(--smoke); max-width: 42ch; margin-bottom: 1.75rem; }
.recap-photo{ aspect-ratio: 4/3; }

/* ===== Explore teasers (home) ===== */
.explore{ padding: 6.5rem 0; }
.teaser-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.teaser-card{
  display:flex; flex-direction:column; gap: 0.5rem;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.2rem 1.8rem; transition: border-color 0.2s ease, transform 0.25s ease, background 0.25s ease;
}
.teaser-card:hover{ border-color: var(--line-strong); transform: translateY(-6px); background: var(--ink-3); }
.teaser-photo{ margin: -2.2rem -1.8rem 0.5rem; border-radius: var(--radius) var(--radius) 0 0; overflow:hidden; aspect-ratio: 16/10; }
.teaser-photo img{ width:100%; height:100%; object-fit:cover; object-position: center 45%; display:block; transition: transform 0.5s cubic-bezier(.2,.8,.2,1); filter: grayscale(0.15); }
.teaser-card:hover .teaser-photo img{ transform: scale(1.06); }
.teaser-index{ color: var(--smoke); font-size: 0.8rem; margin-bottom: 0.5rem; }
.teaser-card h3{ font-size: 1.25rem; }
.teaser-card p{ color: var(--smoke); font-size: 0.92rem; flex:1; }
.teaser-link{ color: var(--white); font-size: 0.88rem; font-weight:600; margin-top: 0.5rem; }
.teaser-card:hover .teaser-link span{ transform: translateX(3px); }
.teaser-link span{ display:inline-block; transition: transform 0.2s ease; }

/* ===== International community (home) ===== */
.community{ padding: 1rem 0 6rem; }
.community-inner{ max-width: 760px; margin: 0 auto; text-align:center; }
.community-body{ color: var(--smoke); font-size: 1.02rem; max-width: 62ch; margin: 0 auto; }
.community-flags{
  list-style:none; display:flex; justify-content:center; flex-wrap:wrap;
  gap: 0.9rem; margin: 2rem 0 0; padding:0; font-size: 1.6rem;
}
.community-flags li{ opacity:0.9; transition: transform 0.2s ease; }
.community-flags li:hover{ transform: translateY(-3px) scale(1.1); }

/* ===== Community (dedicated page) ===== */
.community-about{ padding: 1rem 0 4rem; }
.community-about-inner{ max-width: 68ch; }
.community-about-inner h2{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 1.25rem; }
.community-about-inner p{ color: var(--smoke); margin-bottom: 1.1rem; }
.community-about-inner p:last-child{ margin-bottom: 0; }

.community-flags-section{ padding: 1rem 0 5rem; }
.community-flags-lg{ gap: 1.75rem; margin-top: 2.5rem; }
.community-flags-lg li{
  display:flex; flex-direction:column; align-items:center; gap: 0.5rem;
  font-size: 2.4rem;
}
.community-flags-lg small{ font-family: var(--font-mono); font-size: 0.7rem; color: var(--smoke); text-transform:uppercase; letter-spacing:0.04em; }
.community-flags-note{ color: var(--smoke); font-size: 0.9rem; max-width: 56ch; margin: 2.5rem auto 0; }

.community-photo-section{ padding: 1rem 0 5rem; }
.community-photo{ aspect-ratio: 21/9; }
.community-photo img{ object-position: center 65%; }

/* ===== Sponsor (home) ===== */
.sponsor{ padding: 1rem 0 6rem; }
.sponsor-inner{
  display:flex; align-items:center; gap: 2.5rem;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 22px; padding: 3rem;
}
.sponsor-logo-frame{
  flex-shrink:0; width: 160px; height: 160px; border-radius: 16px;
  background: var(--ink-3); border: 1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sponsor-logo-frame img{ width:100%; height:100%; object-fit:contain; padding: 1.25rem; }
.sponsor-logo-placeholder{
  font-family: var(--font-display); font-weight:700; font-size: 1rem; letter-spacing: 0.04em;
  color: var(--smoke); text-align:center; line-height:1.4;
}
.sponsor-inner h2{ max-width: 24ch; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.sponsor-inner p{ color: var(--smoke); max-width: 56ch; margin:0; }

/* ===== Announcements (home) ===== */
.announcements{ padding: 1rem 0 6rem; }
.announcements-list{ list-style:none; margin: 2rem 0 0; padding:0; display:flex; flex-direction:column; gap: 1.25rem; }
.announcement-item{
  border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem 1.75rem;
  display:flex; flex-direction:column; gap: 0.4rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.announcement-item:hover{ border-color: var(--line-strong); background: var(--ink-2); }
.announcement-date{ font-family: var(--font-mono); font-size: 0.75rem; color: var(--smoke); }
.announcement-title{ font-family: var(--font-display); font-weight:600; color: var(--white); margin:0; font-size: 1.05rem; }
.announcement-body{ color: var(--smoke); font-size: 0.92rem; margin:0; }

/* ===== Ethos teaser (home) ===== */
.ethos-teaser{ padding: 5rem 0; }
.ethos-teaser-inner{
  display:flex; align-items:center; gap: 2.5rem;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 22px; padding: 3rem;
}
.ethos-teaser-mark{ width: 90px; flex-shrink:0; opacity:0.85; }
.ethos-teaser-inner h2{ max-width: 20ch; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.ethos-teaser-inner p{ color: var(--smoke); max-width: 56ch; margin-bottom: 1.25rem; }

/* ===== Visit strip (home) ===== */
.visit-strip{ padding: 2rem 0 7rem; }
.visit-strip-inner{
  display:flex; align-items:center; justify-content:space-between; gap: 2rem; flex-wrap:wrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2.75rem 0;
}
.visit-strip-inner h2{ font-size: clamp(1.4rem, 2.2vw, 1.9rem); max-width: 22ch; }
.visit-strip-inner p{ color: var(--smoke); max-width: 48ch; margin:0; }

/* ===== Reviews (visit page) ===== */
.reviews{ padding: 1rem 0 6.5rem; }
.reviews-header{
  display:flex; align-items:center; justify-content:space-between; gap: 2rem; flex-wrap:wrap;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 22px; padding: 2.75rem 3rem;
  margin-bottom: 2.5rem;
}
.reviews-header h2{ font-size: clamp(1.4rem, 2.2vw, 1.9rem); max-width: 24ch; margin: 0 0 0.75rem; }
.reviews-header p{ color: var(--smoke); max-width: 46ch; margin:0; }
.reviews-header .btn svg{ color: var(--ink); }
.reviews-rating{ display:flex; align-items:baseline; gap: 0.6rem; margin-bottom: 1rem; }
.google-g-icon{ align-self:center; flex-shrink:0; }
.reviews-stars{ color: var(--white); font-size: 1.1rem; letter-spacing: 0.1em; }
.reviews-score{ font-size: 1.3rem; color: var(--white); font-weight:600; }
.reviews-score-max{ color: var(--smoke); font-size: 0.95rem; font-weight:400; }
.reviews-score-label{ color: var(--smoke); font-size: 0.85rem; }

.review-carousel{ position:relative; }
.review-carousel-controls{ display:flex; justify-content:flex-end; gap: 0.6rem; margin-bottom: 1.25rem; }
.review-carousel-btn{
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--ink-2); color: var(--cream); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.review-carousel-btn:hover{ border-color: var(--line-strong); background: var(--ink-3); transform: translateY(-2px); }
.review-track{
  display:flex; gap: 1.25rem; overflow-x:auto; scroll-snap-type: x mandatory;
  padding: 0.4rem 0.25rem 1rem; scrollbar-width:none; -ms-overflow-style:none;
}
.review-track::-webkit-scrollbar{ display:none; }
.review-card{
  flex: 0 0 340px; scroll-snap-align:start; position:relative; overflow:hidden;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.1rem 1.85rem 1.75rem; display:flex; flex-direction:column; gap: 0.85rem;
  transition: border-color 0.2s ease, transform 0.25s ease, background 0.25s ease;
}
.review-card::before{
  content:"“"; position:absolute; top: -0.6rem; right: 1.3rem; font-family: var(--font-display);
  font-size: 4.5rem; color: var(--line-strong); line-height:1; pointer-events:none;
}
.review-card:hover{ border-color: var(--line-strong); transform: translateY(-4px); background: var(--ink-3); }
.review-stars{ color: var(--white); font-size: 0.85rem; letter-spacing: 0.08em; }
.review-quote{ color: var(--cream); font-size: 0.95rem; line-height: 1.55; margin:0; flex:1; position:relative; }
.review-author{ font-family: var(--font-display); font-weight:600; color: var(--white); margin:0; font-size: 0.98rem; }
.review-meta{ color: var(--smoke); font-size: 0.8rem; margin:0; }

/* ===== Loyalty: tiers ===== */
.loyalty-tiers-section{ padding: 2rem 0 6rem; }
.loyalty-tiers-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items:center; margin-top: 3rem; }
.loyalty-photo{ aspect-ratio: 4/5; }
.loyalty-tiers{ list-style:none; margin: 0; padding:0; display:flex; flex-direction:column; gap: 0.9rem; }
.loyalty-tiers li{
  display:flex; align-items:center; gap: 1.25rem;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.5rem;
  transition: border-color 0.2s ease;
}
.tier-count{
  width: 48px; height:48px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--ink-3); color: var(--white); font-size: 1.05rem; font-weight:600;
  border: 1px solid var(--line-strong);
}
.tier-title{ margin:0; font-weight:600; color: var(--white); font-size: 1rem; }
.tier-desc{ margin:0; color: var(--smoke); font-size: 0.88rem; }
.tier-check{
  margin-left:auto; width: 26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--line); color: transparent; font-size: 0.85rem;
  transition: all 0.2s ease;
}
.loyalty-tiers li.reached{ border-color: var(--line-strong); background: var(--ink-3); }
.loyalty-tiers li.reached .tier-check{ background: var(--white); color: var(--ink); border-color: var(--white); }
.loyalty-tiers li.reached .tier-count{ background: var(--white); color: var(--ink); border-color: var(--white); }
.loyalty-note{ text-align:left; color: var(--smoke); font-size: 0.88rem; max-width: 56ch; margin: 2rem 0 0; }

/* ===== Loyalty: register + card ===== */
.loyalty-app{ padding: 2rem 0 7rem; }
.loyalty-app-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items:start; }
.loyalty-app-grid > *{ min-width:0; }
.wallet-grid-single{ grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
.wallet-error{ color: #E2572B; font-size: 0.85rem; margin: -0.5rem 0 0; }
.wallet-error a{ color: inherit; text-decoration: underline; }
.loyalty-form{
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 22px;
  padding: 2.5rem; display:flex; flex-direction:column; gap: 1.25rem;
}
.loyalty-form h2{ font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: -0.5rem 0 0.25rem; }
.loyalty-form .field{ display:flex; flex-direction:column; gap: 0.5rem; }
.loyalty-form label{ font-size: 0.8rem; color: var(--smoke); font-weight:600; }
.loyalty-form input{
  background: var(--ink); border: 1px solid var(--line); color: var(--cream);
  border-radius: 10px; padding: 0.8rem 1rem; font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.loyalty-form input::placeholder{ color: rgba(143,143,143,0.6); }
.loyalty-form input:focus{ outline:none; border-color: var(--white); box-shadow: 0 0 0 3px rgba(255,255,255,0.1); }

.member-card-scene{ perspective: 1800px; }
.member-card-flip{
  position:relative; transition: transform 0.75s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}
.member-card-flip.is-flipped{ transform: rotateY(180deg); }
.member-card-front, .member-card-back{ backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.member-card-back{
  position:absolute; inset:0; transform: rotateY(180deg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap: 1rem;
}
.member-card-back-mark{ width: 56px; opacity:0.8; }
.member-card-back h3{ font-size: 1.3rem; margin:0; }
.member-card-back p{ color: var(--smoke); max-width: 38ch; margin:0; font-size: 0.92rem; }
.member-card-qr{
  background: var(--white); border-radius: 12px; padding: 8px; flex-shrink:0;
  width: 92px; height: 92px; display:flex; align-items:center; justify-content:center;
}
.member-card-qr canvas{ display:block; width:100% !important; height:100% !important; }
.member-card-qr-caption{ max-width: 26ch; font-size: 0.8rem !important; margin: 0 !important; color: var(--smoke); }
.member-card-qr-row{
  display:flex; align-items:center; gap: 1rem;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: 14px; padding: 0.9rem 1.1rem; margin-bottom: 1.75rem;
}
.member-card-back .member-card-qr-caption{ max-width: 34ch; }
.card-flip-btn{
  background:none; border: 1px solid var(--line-strong); color: var(--cream);
  padding: 0.6rem 1.15rem; border-radius: 999px; font-size: 0.82rem; cursor:pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.card-flip-btn:hover{ border-color: var(--white); color: var(--white); transform: translateY(-1px); }

.member-card{
  position:relative; overflow:hidden;
  background: linear-gradient(155deg, var(--ink-3) 0%, var(--ink-2) 60%, var(--ink) 100%);
  border: 1px solid var(--line-strong); border-radius: 22px; padding: 2.25rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.member-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(420px 220px at 90% -10%, rgba(255,255,255,0.08), transparent 70%);
}
.member-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 1.75rem; }
.member-card-logo{ width: 34px; opacity:0.9; }
.member-card-tier{ font-size: 0.72rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--smoke); }
.member-card-name{ font-family: var(--font-display); font-size: 1.5rem; color: var(--white); margin: 0 0 1.5rem; }
.member-card-meta{ display:flex; gap: 2.5rem; margin-bottom: 1.75rem; }
.member-card-meta > div{ display:flex; flex-direction:column; gap: 0.3rem; }
.member-card-label{ font-size: 0.7rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--smoke); display:block; margin-bottom: 0.5rem; }
.member-card-meta .mono{ font-size: 0.95rem; color: var(--cream); }
.member-card-stamps{ display:flex; flex-wrap:wrap; gap: 0.5rem; margin-bottom: 1rem; }
.stamp-dot{
  width: 26px; height:26px; border-radius:50%; border: 1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-size: 0.7rem; color: var(--smoke);
}
.stamp-dot.filled{ background: var(--white); color: var(--ink); border-color: var(--white); }
.member-card-progress{ color: var(--smoke); font-size: 0.88rem; margin: 0 0 1.75rem; }
.member-card-actions{ display:flex; flex-wrap:wrap; align-items:center; gap: 1.25rem; }
.card-reset{ background:none; border:0; color: var(--smoke); font-size: 0.85rem; cursor:pointer; text-decoration: underline; text-underline-offset: 3px; }
.card-reset:hover{ color: var(--white); }

/* ===== CTA banner (sub-pages) ===== */
.cta-banner{ padding: 5rem 0 7rem; }
.cta-banner-inner{
  display:flex; align-items:center; justify-content:space-between; gap: 2rem; flex-wrap:wrap;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 22px; padding: 2.75rem 3rem;
}
.cta-banner-inner h2{ font-size: clamp(1.4rem, 2.4vw, 2rem); max-width: 20ch; margin:0; }

/* ===== Footer nav ===== */
.footer-nav{ display:flex; gap: 1.5rem; flex-wrap:wrap; }
.footer-nav a{ color: var(--smoke); font-size: 0.9rem; transition: color 0.2s ease; }
.footer-nav a:hover{ color: var(--white); }

/* ===== Bracket (tournaments page) ===== */
.bracket-section{ padding: 2rem 0 6rem; }
.bracket-note{ color: var(--smoke); font-size: 0.9rem; max-width: 52ch; margin: 0 auto 2.5rem; }
.bracket-note.center{ text-align:center; }
.bracket{ display:flex; justify-content:center; gap: 3rem; overflow-x:auto; padding: 1rem 0; }
.bracket-round{ display:flex; flex-direction:column; gap: 1.5rem; justify-content:center; min-width: 200px; }
.bracket-round-title{ color: var(--smoke); font-size: 0.72rem; text-transform:uppercase; letter-spacing:0.1em; text-align:center; margin:0 0 0.5rem; }
.bracket-match{
  display:flex; flex-direction:column; gap: 0.4rem;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.8rem 1rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--smoke);
  cursor:pointer; transition: border-color 0.2s ease, background 0.2s ease;
  text-align:left;
}
.bracket-match:hover{ border-color: var(--line-strong); }
.bracket-match span{ padding: 0.15rem 0; }
.bracket-match.is-tbd span{ opacity:0.5; }
.bracket-match span.winner{ color: var(--white); font-weight:600; opacity:1 !important; }
.bracket-match span.loser{ text-decoration: line-through; opacity: 0.35 !important; }
.bracket-hint{ color: var(--smoke); font-size: 0.82rem; margin-top: 2rem; }
.bracket-hint.center{ text-align:center; }

/* ===== FAQ / Accordion ===== */
.faq{ padding: 2rem 0 7rem; }
.accordion{ max-width: 720px; margin: 3rem auto 0; display:flex; flex-direction:column; gap: 0.75rem; }
.accordion-item{ border: 1px solid var(--line); border-radius: 12px; overflow:hidden; background: var(--ink-2); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:0; color: var(--cream); font-family: var(--font-display); font-size: 1.02rem; font-weight:600;
  padding: 1.2rem 1.4rem; cursor:pointer; text-align:left;
}
.accordion-icon{ font-family: var(--font-mono); color: var(--smoke); font-size: 1.2rem; transition: transform 0.25s ease; flex-shrink:0; margin-left: 1rem; }
.accordion-trigger[aria-expanded="true"] .accordion-icon{ transform: rotate(45deg); }
.accordion-content{ display:grid; overflow:hidden; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.accordion-content > p{ overflow:hidden; margin:0; padding: 0 1.4rem; color: var(--smoke); font-size: 0.95rem; }
.accordion-content.is-open{ grid-template-rows: 1fr; }
.accordion-content.is-open > p{ padding: 0 1.4rem 1.3rem; }

/* ===== Pricing page ===== */
.pricing-section{ padding: 6rem 0 2rem; }
.pricing-grid{ grid-template-columns: repeat(3, 1fr); }
.pricing-grid-2{ grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 3rem auto 0; }
.pricing-card{ position:relative; display:flex; flex-direction:column; gap: 0.5rem; }
.pricing-card-highlight{ border-color: var(--line-strong); background: var(--ink-3); }
.pricing-tag{ color: var(--smoke); font-size: 0.78rem; text-transform:uppercase; letter-spacing:0.06em; }
.pricing-amount{ font-family: var(--font-display); font-size: 2rem; font-weight:700; color: var(--white); margin: 0.3rem 0 0.6rem; }
.pricing-unit{ font-family: var(--font-body); font-size: 0.95rem; font-weight:500; color: var(--smoke); margin-left: 0.3rem; }
.pricing-note{ max-width: 640px; margin: 2.5rem auto 0; text-align:center; }

/* ===== Practice Pass ===== */
.practice-pass-section{ padding: 2rem 0 5rem; }
.practice-pass-badge{
  position:absolute; top: -0.6rem; right: 1.25rem;
  font-family: var(--font-mono); font-size: 0.66rem; text-transform:uppercase; letter-spacing: 0.05em;
  background: var(--white); color: var(--ink); padding: 0.3rem 0.7rem; border-radius: 999px;
}
.practice-pass-name{ color: var(--cream); font-size: 0.95rem; margin: 0.1rem 0 0; }
.practice-pass-offers{ max-width: 640px; margin: 3.5rem auto 0; }
.practice-pass-offers ul{ list-style:none; margin: 1.5rem 0 0; padding:0; display:flex; flex-direction:column; gap: 0.7rem; }
.practice-pass-offers li{
  display:flex; align-items:baseline; gap: 0.7rem;
  border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1.1rem;
  color: var(--cream); font-size: 0.92rem;
}
.practice-pass-offers li small{ color: var(--smoke); font-size: 0.82rem; }
.practice-pass-discount{ font-family: var(--font-mono); font-weight:600; color: var(--white); flex-shrink:0; }
.practice-pass-terms{ max-width: 640px; margin: 3rem auto 0; }
.practice-pass-terms-title{ font-family: var(--font-mono); font-size: 0.78rem; text-transform:uppercase; letter-spacing: 0.06em; color: var(--smoke); margin-bottom: 0.9rem; }
.practice-pass-terms ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 0.55rem; }
.practice-pass-terms li{ color: var(--smoke); font-size: 0.85rem; padding-left: 1.1rem; position:relative; }
.practice-pass-terms li::before{ content:"—"; position:absolute; left:0; }
.practice-pass-terms a{ color: var(--cream); text-decoration: underline; }
.pricing-loyalty-recap{ padding: 2rem 0 5rem; }
.loyalty-tiers-static{ max-width: 640px; margin: 3rem auto 0; }
.pricing-loyalty-cta{ text-align:center; margin-top: 2rem; }
.pricing-payments{ padding: 2rem 0 5rem; }
.payment-methods{ display:flex; flex-wrap:wrap; justify-content:center; gap: 0.9rem; margin-top: 2.5rem; }
.payment-chip{
  border: 1px solid var(--line); border-radius: 999px; padding: 0.65rem 1.3rem;
  font-size: 0.82rem; color: var(--cream);
}

/* ===== Events page ===== */
.event-packages{ padding: 6rem 0 2rem; }
.event-grid{ grid-template-columns: repeat(3, 1fr); }
.event-card{ display:flex; flex-direction:column; gap: 0.6rem; }
.event-card h3{ font-size: 1.15rem; }
.event-card p{ color: var(--smoke); font-size: 0.92rem; margin:0; }
.event-card ul{ list-style:none; margin: 0.6rem 0 0; padding:0; display:flex; flex-direction:column; gap: 0.4rem; }
.event-card li{ color: var(--cream); font-size: 0.88rem; padding-left: 1.1rem; position:relative; }
.event-card li::before{ content:"—"; position:absolute; left:0; color: var(--smoke); }
.event-inquiry{ padding: 2rem 0 6rem; }
.event-inquiry-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items:flex-start; }
.event-inquiry-grid > *{ min-width:0; }

/* ===== Footer legal nav ===== */
.footer-nav-legal{ margin-top: -1.2rem; }
.footer-nav-legal a{ font-size: 0.82rem; opacity: 0.75; }

/* ===== Legal pages ===== */
.legal-body{ padding: 2rem 0 7rem; }
.legal-content{ max-width: 760px; margin: 0 auto; }
.legal-content h2{ font-size: 1.2rem; margin: 2.5rem 0 0.75rem; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ color: var(--smoke); font-size: 0.95rem; line-height:1.7; margin:0; }
.legal-disclaimer{ font-style: italic; font-size: 0.85rem !important; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }

/* ===== Cookie consent banner ===== */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(10,22,40,0.97); border-top: 1px solid var(--line); backdrop-filter: blur(10px);
}
.cookie-banner-inner{
  padding: 1.2rem 28px; display:flex; align-items:center; justify-content:space-between;
  gap: 1.5rem; flex-wrap:wrap;
}
.cookie-banner-inner p{ margin:0; color: var(--smoke); font-size: 0.85rem; max-width: 60ch; }
.cookie-banner-inner p a{ color: var(--cream); text-decoration: underline; }
.cookie-banner-actions{ display:flex; gap: 0.75rem; flex-shrink:0; }
.cookie-banner-actions .btn{ padding: 0.6rem 1.2rem; font-size: 0.85rem; }

/* ===== 404 ===== */
.error-404{ min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 2rem; }
.error-404-inner{ max-width: 520px; text-align:center; display:flex; flex-direction:column; align-items:center; gap: 1rem; }
.error-404-logo{ width: 56px; margin-bottom: 0.5rem; opacity:0.85; }
.error-404-inner .btn{ margin-top: 1rem; }

/* ===== Map embed (visit page) ===== */
.visit-photo{ aspect-ratio: 21/9; margin-top: 2.5rem; }
.visit-photo img{ object-position: center 65%; }
.map-embed{ margin-top: 2.5rem; border-radius: var(--radius); overflow:hidden; border: 1px solid var(--line); filter: grayscale(0.6) contrast(1.05); }
.map-embed iframe{ width:100%; height: 380px; border:0; display:block; }

/* ===== Reveal-on-scroll (3D entrance) ===== */
.reveal{
  opacity:0; transform: perspective(1000px) translateY(26px) rotateX(10deg); transform-origin: 50% 100%;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible{ opacity:1; transform: perspective(1000px) translateY(0) rotateX(0deg); }

/* ===== 3D tilt (cards) ===== */
.tilt{ transition: opacity 0.7s ease, transform 0.4s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.tilt.tilting{ transition: opacity 0.7s ease, transform 0.08s linear; }

/* ===== Magnetic buttons ===== */
.magnetic{ transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform; }
.magnetic.magnet-active{ transition: transform 0.08s linear; }

/* ===== Text-mask scroll reveal ===== */
.text-mask{ overflow: hidden; display:block; }
.text-mask-inner{ display:block; transform: translateY(105%); transition: transform 0.9s cubic-bezier(0.16,1,0.3,1); }
.text-mask.mask-revealed .text-mask-inner{ transform: translateY(0); }

/* ===== Bracket match: 3D flip on selection ===== */
.bracket-match{ transform-style: preserve-3d; }
.bracket-match.flip-pulse{ animation: bracketFlip 0.5s cubic-bezier(.3,.6,.3,1); }
@keyframes bracketFlip{
  0%{ transform: perspective(600px) rotateY(0); }
  45%{ transform: perspective(600px) rotateY(90deg); }
  55%{ transform: perspective(600px) rotateY(90deg); }
  100%{ transform: perspective(600px) rotateY(0); }
}

/* ===== Responsive ===== */
@media (max-width: 1080px){
  .main-nav{ gap: 1.1rem; }
  .main-nav a:not(.nav-cta){ font-size: 0.86rem; }
}

@media (max-width: 980px){
  .ethos-grid{ grid-template-columns: 1fr; }
  .ethos-visual{ height: auto; }
  .ethos-photo{ width: 100%; height: auto; aspect-ratio: 4/5; }
  .table-demo-inner{ grid-template-columns: 1fr; }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .visit-grid{ grid-template-columns: 1fr; }
  .book-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
  .book-form{ padding: 2rem; }
  .hero{ min-height: 82vh; }
  .about-grid{ grid-template-columns: 1fr; }
  .about-photo{ order:-1; aspect-ratio: 4/5; }
  .teaser-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .recap-grid{ grid-template-columns: 1fr; }
  .specs-grid{ grid-template-columns: 1fr; }
  .gallery-grid-3{ grid-template-columns: repeat(2, 1fr); }
  .loyalty-tiers-grid{ grid-template-columns: 1fr; }
  .ethos-teaser-inner{ flex-direction:column; text-align:center; padding: 2.5rem; }
  .sponsor-inner{ flex-direction:column; text-align:center; padding: 2.5rem; }
  .visit-strip-inner{ flex-direction:column; align-items:flex-start; }
  .cta-banner-inner{ flex-direction:column; align-items:flex-start; padding: 2.25rem; }
  .reviews-header{ flex-direction:column; align-items:flex-start; padding: 2.25rem; }
  .review-card{ flex-basis: 300px; }
  .loyalty-app-grid{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .event-grid{ grid-template-columns: 1fr; }
  .event-inquiry-grid{ grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 620px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .review-card{ flex-basis: 82vw; }
  .review-carousel-controls{ display:none; }
  .phone-field{ flex-direction:column; }
  .phone-field select{ flex-basis:auto; }
  .teaser-photo{ aspect-ratio: 4/5; }
  .specs-photo{ aspect-ratio: 4/5; }
  .recap-photo{ aspect-ratio: 4/5; }
  .about-photo{ aspect-ratio: 4/5; }
  .loyalty-photo{ aspect-ratio: 4/5; }
  .ethos-photo{ aspect-ratio: 4/5; }
  /* Native ratio of the source photos — zero cropping on mobile */
  .about-photo img, .teaser-photo img, .loyalty-photo img,
  .specs-photo img, .recap-photo img, .ethos-photo img{ object-position: center center; }
}

@media (max-width: 860px){
  .main-nav{
    position:absolute; top:76px; left:0; right:0;
    background: rgba(10,22,40,0.98); backdrop-filter: blur(16px);
    flex-direction:column; align-items:flex-start; gap:0;
    padding: 0.5rem 28px 1.5rem;
    border-bottom: 1px solid var(--line);
    clip-path: inset(0 0 100% 0); opacity:0; pointer-events:none;
    transition: clip-path 0.4s cubic-bezier(.16,1,.3,1), opacity 0.3s ease;
  }
  .main-nav.is-open{ clip-path: inset(0 0 0% 0); opacity:1; pointer-events:auto; }
  .main-nav a:not(.nav-cta){
    font-size: 0.95rem; padding: 0.75rem 0; width:100%;
    opacity:0; transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .main-nav.is-open a:not(.nav-cta){ opacity:1; transform: translateY(0); }
  .main-nav.is-open a:nth-child(1){ transition-delay: 0.04s; }
  .main-nav.is-open a:nth-child(2){ transition-delay: 0.08s; }
  .main-nav.is-open a:nth-child(3){ transition-delay: 0.12s; }
  .main-nav.is-open a:nth-child(4){ transition-delay: 0.16s; }
  .main-nav.is-open a:nth-child(5){ transition-delay: 0.2s; }
  .main-nav.is-open a:nth-child(6){ transition-delay: 0.24s; }
  .main-nav.is-open a:nth-child(7){ transition-delay: 0.28s; }
  .nav-cta{ margin-top: 0.5rem; }
  .nav-pill, .nav-hover-glow{ display:none; }
  .nav-toggle{ display:flex; }
  .lang-switch-btn{ padding: 0.5rem 0.65rem; }
  .lang-switch-btn span:last-child{ display:none; }
  .lang-menu{ min-width: 180px; }
  .feature-grid{ grid-template-columns: 1fr; }
  .tournament-inner{ flex-direction:column; align-items:flex-start; }
  .tournament-mark{ display:none; }
  .field-row{ grid-template-columns: 1fr; }
  .fab{ right: 16px; bottom: 16px; padding: 0.8rem 1.1rem; }
  .hero-inner{ padding: 7rem 20px 3.5rem; }
  .hero-logo{ width: 110px; }
  .bracket{ justify-content:flex-start; }
  .loyalty-tiers li{ flex-wrap:wrap; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html{ scroll-behavior: auto; }
  .rack circle, .cue-ball{ transition: none; }
}