/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{display:block;max-width:100%}
button{cursor:pointer;font:inherit;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand-light);outline-offset:2px}

/* ============ VARIABLES ============ */
:root{
  --background:#ffffff;--foreground:#0a0a0a;
  --brand:#0e7c54;--brand-deep:#0d0d0d;--brand-light:#2e8b57;
  --accent-teal:#c2a96e;--surface:#f4f4f4;--surface-card:#ffffff;
  --ink:#0a0a0a;--ink-soft:#717784;--ghost:#d7dae1;--hairline:#e6e8ec;
  --on-brand:#ffffff;
  --radius-card:1.5rem;--radius-card-lg:2rem;--radius-pill:62.5rem;--radius-xl:0.75rem;
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-out-quart:cubic-bezier(0.25,1,0.5,1);
  --ease-in-out-cubic:cubic-bezier(0.65,0,0.35,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
} 

/* ============ ADAPTIVE FONT ============ */
html{font-size:clamp(15px, 1.5vw + 4px, 18px)} 

body{
  font-family:"Onest",system-ui,sans-serif;
  background:var(--background);color:var(--foreground);
  min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5;
  font-weight:400;
}
html.locked{position:relative;overflow:hidden;height:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============ MAIN ============ */
main{width:100%;overflow-x:clip;padding:0.5rem}
@media(min-width:640px){main{padding:0.75rem}}

/* ============ BALL MARK ============ */
.ball-mark{width:1.75rem;height:1.75rem;flex-shrink:0}
.ball-mark svg{width:100%;height:100%}

/* ============ EYEBROW ============ */
.eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.22em}
.eyebrow-dot{width:0.375rem;height:0.375rem;border-radius:var(--radius-pill);flex-shrink:0}
.eyebrow-dark{color:var(--ink-soft)}.eyebrow-dark .eyebrow-dot{background:var(--brand)}
.eyebrow-light{color:rgba(255,255,255,0.7)}.eyebrow-light .eyebrow-dot{background:var(--brand-light)}

/* ============ PILL BUTTON ============ */
.pill-btn{display:inline-flex;align-items:center;gap:0.5rem;border-radius:var(--radius-pill);padding:0.875rem 1.75rem;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;transition:background .25s,color .25s;white-space:nowrap}
.pill-btn .arrow-icon{width:1rem;height:1rem;transition:transform .35s var(--ease-out-expo)}
.pill-btn-light{background:#fff;color:var(--brand-deep)}.pill-btn-light:hover{background:var(--brand-light);color:#fff}
.pill-btn-solid{background:var(--ink);color:#fff}.pill-btn-solid:hover{background:var(--brand-deep)}
.pill-btn-brand{background:var(--brand);color:#fff}.pill-btn-brand:hover{background:var(--brand-deep)}

/* ============ ARROW BUTTON ============ */
.arrow-btn{width:3rem;height:3rem;display:grid;place-items:center;border-radius:var(--radius-pill);border:1px solid var(--hairline);transition:border-color .25s,background .25s,color .25s}
@media(min-width:640px){.arrow-btn{width:3.5rem;height:3.5rem}}
.arrow-btn svg{width:1.25rem;height:1.25rem;transition:transform .35s var(--ease-out-expo)}
.arrow-btn:hover svg{transform:scale(1.15)}
.arrow-btn-outline{border-color:var(--hairline);background:transparent;color:var(--ink)}.arrow-btn-outline:hover{border-color:var(--ink)}
.arrow-btn-solid{background:var(--ink);border-color:var(--ink);color:#fff}.arrow-btn-solid:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.arrow-btn.prev svg{transform:scaleX(-1)}.arrow-btn.prev:hover svg{transform:scaleX(-1) scale(1.15)}

/* ============ CAROUSEL DOTS ============ */
.carousel-dots{display:flex;gap:0.5rem;align-items:center}
.carousel-dot{padding:0.375rem;background:none;border:none;display:block}
.carousel-dot .dot-pill{display:block;height:0.375rem;width:0.375rem;border-radius:var(--radius-pill);transition:width .35s var(--ease-out-expo),background .25s}
.carousel-dots-dark .dot-pill{background:var(--ghost)}
.carousel-dots-dark .carousel-dot.active .dot-pill{background:var(--ink);width:1.25rem}
.carousel-dots-light .dot-pill{background:rgba(255,255,255,0.4)}
.carousel-dots-light .carousel-dot.active .dot-pill{background:#fff;width:1.25rem}

/* ============ LOADER ============ */
.loader{position:fixed;inset:0;z-index:200;background:var(--brand-deep);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;transition:transform 850ms var(--ease-in-out-cubic)}
.loader.exiting{transform:translateY(-105%)}
.loader-wordmark{display:flex;align-items:center;gap:0.5rem;font-size:1.5rem;font-weight:500;text-transform:uppercase;letter-spacing:0.2em;opacity:0;transform:translateY(16px);transition:opacity 600ms var(--ease-out-expo),transform 600ms var(--ease-out-expo)}
.loader.visible .loader-wordmark{opacity:1;transform:translateY(0)}
.loader-progress{width:10rem;height:1px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.2);overflow:hidden}
.loader-progress-fill{height:100%;background:#fff;transform-origin:left center;transform:scaleX(0)}
.loader.active .loader-progress-fill{animation:progressFill 1280ms var(--ease-in-out-cubic) 120ms forwards}
@keyframes progressFill{to{transform:scaleX(1)}}

/* ============ FLOATING NAVBAR ============ */
.site-header{position:fixed;top:1rem;left:50%;transform:translateX(-50%);width:calc(100% - 2rem);max-width:1200px;background:#fff;border-radius:var(--radius-pill);padding:0.5rem 0.75rem 0.5rem 1.5rem;display:flex;align-items:center;z-index:50;box-shadow:0 10px 30px -5px rgba(0,0,0,0.3)}
.header-left{flex:1;display:none;gap:2rem;justify-content:center}
@media(min-width:1024px){.header-left{display:flex}}
.header-left a{color:var(--ink-soft);font-size:0.875rem;font-weight:500;transition:color .2s;position:relative;padding-bottom:4px}
.header-left a:hover{color:var(--ink)}
.header-left a.active{color:var(--ink)}
.header-left a.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:1.5rem;height:2px;background:var(--brand);border-radius:2px}
.header-brand{flex:1;display:flex;align-items:center;gap:0.5rem;font-size:1rem;font-weight:500;text-transform:uppercase;letter-spacing:0.2em;color:var(--ink)}
.header-brand .ball-mark{width:1.25rem;height:1.25rem}
.header-right{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:1rem}
@media(min-width:640px){.header-right{gap:1.25rem}}
.book-visit-text{display:none;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink);transition:opacity .2s}
@media(min-width:640px){.book-visit-text{display:inline}}
.book-visit-text:hover{text-decoration:underline}
.burger-btn{width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:var(--radius-pill);background:var(--ink);transition:background .2s}
.burger-btn:hover{background:var(--brand-deep)}
.burger-btn .bars{display:flex;flex-direction:column;gap:5px}
.burger-btn .bars span{display:block;width:1rem;height:1px;background:#fff}
@media(min-width:1024px){.burger-btn{display:none}}

/* ============ HERO ============ */
.hero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-card-lg);background:var(--brand-deep);color:#fff;min-height:36rem;height:calc(100svh - 1rem);display:flex;flex-direction:column}
@media(min-width:640px){.hero{height:calc(100svh - 1.5rem)}}
.hero-bg{position:absolute;inset:0;z-index:-10;overflow:hidden}
.hero-bg-inner{position:absolute;left:0;right:0;top:-16%;width:100%;height:132%;will-change:transform}
.hero-bg-inner img{width:100%;height:100%;object-fit:cover}
.hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,13,13,0.65),rgba(13,13,13,0.35),rgba(13,13,13,0.85))}

.hero-title-wrap{padding:6rem 1.5rem 0;position:relative;z-index:2;text-align:center}
@media(min-width:640px){.hero-title-wrap{padding:6rem 2.5rem 0}}
.hero-title{font-size:clamp(2.5rem, 12vw, 12rem);font-weight:500;text-transform:uppercase;line-height:0.85;letter-spacing:-0.02em;white-space:nowrap;text-shadow:0 10px 30px rgba(0,0,0,0.4)}
@media(max-width:640px){.hero-title{white-space:normal;font-size:16vw}}
.clip-word{display:inline-block;overflow:hidden;padding-bottom:0.14em;vertical-align:top}
.word-inner{display:inline-block;transform:translateY(115%);opacity:0;transition:transform 1100ms var(--ease-out-expo),opacity 1100ms var(--ease-out-expo);transition-delay:calc(var(--i) * 140ms)}
.hero-title.revealed .word-inner{transform:translateY(0);opacity:1}
.hero-bottom{margin-top:auto;padding:0 1.5rem 2rem;display:flex;flex-direction:column;gap:1.5rem;position:relative;z-index:2;align-items:flex-start}
@media(min-width:640px){.hero-bottom{padding:0 2.5rem 2.5rem;flex-direction:row;justify-content:space-between;align-items:flex-end}}
.tagline{display:flex;flex-direction:column;font-size:clamp(1.5rem, 5vw, 2.4rem);font-weight:500;text-transform:uppercase;line-height:0.95;letter-spacing:-0.02em;color:rgba(255,255,255,0.85);text-shadow:0 4px 12px rgba(0,0,0,0.3)}
.clip-line{display:block;overflow:hidden;padding-bottom:0.14em}
.line-inner{display:block;transform:translateY(115%);opacity:0;transition:transform 900ms var(--ease-out-expo),opacity 900ms var(--ease-out-expo);transition-delay:calc(var(--i) * 110ms + 350ms)}
.tagline.revealed .line-inner{transform:translateY(0);opacity:1}
.hero-right-cluster{display:flex;align-items:flex-end;gap:1rem;width:100%;flex-direction:column}
@media(min-width:640px){.hero-right-cluster{width:auto;flex-direction:row}}
.collection-slider{display:none}
@media(min-width:768px){.collection-slider{display:flex;flex-direction:column;gap:0.75rem;width:16rem}}
.collection-slides{display:grid;position:relative}
.collection-card{grid-area:1/1;display:flex;gap:0.75rem;border-radius:var(--radius-card);border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.1);padding:0.75rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 32px rgba(0,0,0,0.2);opacity:0;transform:translateY(16px) scale(0.96);transition:opacity 450ms var(--ease-out-expo),transform 450ms var(--ease-out-expo);pointer-events:none}
.collection-card.active{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.collection-card-img{width:3.5rem;height:3.5rem;border-radius:var(--radius-xl);object-fit:cover;flex-shrink:0}
.collection-card-info{display:flex;flex-direction:column;justify-content:center;gap:0.125rem;min-width:0}
.collection-card-brand{font-size:0.7rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}
.collection-card-title{font-size:0.7rem;text-transform:uppercase;opacity:0.8}
.collection-card-cta{font-size:0.65rem;text-decoration:underline;margin-top:0.25rem;display:inline-block}

/* Live Availability Card */
.live-card{width:100%;max-width:20rem;display:flex;gap:0.75rem;border-radius:var(--radius-card);border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.1);padding:0.75rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 32px rgba(0,0,0,0.2);align-items:center}
@media(min-width:640px){.live-card{max-width:15rem}}
.live-card-left{flex:1;display:flex;flex-direction:column;justify-content:center;gap:0.25rem}
.live-status{display:flex;align-items:center;gap:0.375rem;font-size:0.65rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:rgba(255,255,255,0.8)}
.live-dot{width:0.5rem;height:0.5rem;background:var(--brand-light);border-radius:var(--radius-pill);box-shadow:0 0 8px var(--brand-light);animation:pulse 2s infinite}
@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}
.live-value{font-size:1.5rem;font-weight:500;line-height:1}
.live-card-btn{padding:0.5rem 0.875rem;font-size:0.65rem}

[data-gated]{opacity:0;transform:translateY(28px);transition:opacity 700ms var(--ease-out-expo),transform 700ms var(--ease-out-expo);transition-delay:var(--gate-delay,0ms)}
[data-gated].revealed{opacity:1;transform:translateY(0)}

/* ============ TRUST & VIBE ============ */
.trust{position:relative;isolation:isolate;overflow:hidden;background:var(--background);padding:4rem 1.5rem;margin-top:0.75rem}
@media(min-width:640px){.trust{padding:5rem 2.5rem}}
.trust-badges{position:relative;z-index:20;display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:640px){.trust-badges{flex-direction:row;justify-content:space-between;align-items:flex-start}}

/* Refined First Hour Card */
.first-hour-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0.25rem;width:100%;max-width:200px;padding:2rem 1rem;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-card);flex-shrink:0}
.fh-eyebrow{font-size:0.75rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.1em}
.fh-value{font-size:2rem;font-weight:500;color:var(--brand);line-height:1}
.fh-desc{font-size:0.65rem;color:var(--ink-soft)}

.badge-card{max-width:28rem;display:flex;gap:1rem;border-radius:var(--radius-card);background:var(--surface);padding:1.25rem}
@media(min-width:640px){.badge-card{gap:1.25rem;padding:1.5rem}}
.badge-card-chip{border-radius:var(--radius-xl);background:var(--background);padding:0.5rem 1rem;font-size:1.25rem;font-weight:500;flex-shrink:0;height:fit-content}
@media(min-width:640px){.badge-card-chip{font-size:1.5rem}}
.badge-card-title{font-size:1.125rem;font-weight:500}
.badge-card-body{font-size:0.75rem;color:var(--ink-soft);line-height:1.6;margin-top:0.5rem}

.vibe-section{margin-top:5rem;text-align:left}
.vibe-text{max-width:48rem;margin:0;text-align:left}
.vibe-title{font-size:clamp(2rem, 6vw, 3rem);font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1rem}
.vibe-desc{font-size:0.875rem;color:var(--ink-soft);max-width:32rem;margin:1.5rem 0 0;line-height:1.6}

/* Vibe Marquee - 2 Horizontal Rows */
.vibe-marquee {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.vibe-row { display: flex; width: max-content; }
.vibe-row-1 { animation: scrollLeft 40s linear infinite; }
.vibe-row-2 { animation: scrollRight 40s linear infinite; }
.vibe-col { display: flex; }
.vibe-img {
  width: 500px;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius-card);
  flex-shrink: 0;
  margin-right: 1.25rem;
}
@media (max-width: 767px) {
  .vibe-img { width: 300px; height: 180px; }
}
@keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes scrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

[data-inview]{opacity:0;transform:translateY(var(--iv-y,28px)) scale(var(--iv-scale,1));transition:opacity 700ms var(--ease-out-expo),transform 700ms var(--ease-out-expo);transition-delay:var(--iv-delay,0ms)}
[data-inview].revealed{opacity:1;transform:translateY(0) scale(1)}

/* ============ PROGRAMS ============ */
.programs{background:var(--surface);padding:6rem 1.5rem}
@media(min-width:640px){.programs{padding:6rem 2.5rem}}
.programs-header{margin-bottom:3.5rem}
.programs-title{font-size:clamp(2rem, 6vw, 3rem);font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1rem}
.program-list{list-style:none}
.program-row{display:flex;align-items:center;gap:1.5rem;padding:1.75rem 0;border-top:1px solid var(--hairline);transition:background .2s}
.program-row:last-child{border-bottom:1px solid var(--hairline)}
.program-row:focus-visible{background:var(--background)}
.program-index{width:2.5rem;font-size:0.875rem;font-weight:500;color:var(--ink-soft);flex-shrink:0}
.program-info{flex:1}
.program-name{font-size:clamp(1.25rem, 4vw, 1.875rem);font-weight:500;letter-spacing:-0.02em;line-height:1.1}
.program-desc{font-size:0.875rem;color:var(--ink-soft);margin-top:0.25rem}
.program-arrow{width:2.75rem;height:2.75rem;border-radius:var(--radius-pill);border:1px solid var(--hairline);display:grid;place-items:center;flex-shrink:0;transition:transform .35s var(--ease-out-expo),opacity .35s,border-color .25s;transform:translateX(0);opacity:0.55}
.program-arrow svg{width:1.25rem;height:1.25rem}
@media (hover: hover) and (min-width:769px){.program-row:hover .program-arrow{transform:translateX(8px);opacity:1;border-color:var(--ink)}}

/* ============ FACILITIES ============ */
.facilities{position:relative;z-index:1;background:var(--background);border-radius:var(--radius-card-lg);margin-top:-2.5rem;padding:4rem 1.5rem 5rem}
@media(min-width:640px){.facilities{padding:4rem 2.5rem 5rem}}
.facilities-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:end}
@media(min-width:768px){.facilities-grid{grid-template-columns:1fr 1fr}}
.facilities-intro{max-width:24rem}
.facilities-icon{width:4rem;height:4rem;border-radius:var(--radius-card);object-fit:cover}
.facilities-title{font-size:clamp(2rem, 6vw, 3rem);font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1.5rem}

.specs-grid{list-style:none;margin-top:1.5rem;display:flex;flex-direction:column;gap:0.5rem;border-top:1px solid var(--hairline);padding-top:1rem}
.specs-row{display:flex;justify-content:space-between;align-items:center;font-size:0.875rem;gap:1rem}
.specs-label{color:var(--ink-soft)}
.specs-value{font-weight:500;text-align:right}

.court-cards{display:flex;flex-direction:column;align-items:end;gap:1.25rem;perspective:1000px}
@media(min-width:768px){.court-cards{flex-direction:row;gap:1.25rem}}
.court-card{flex:1;aspect-ratio:4/3;border-radius:var(--radius-card);overflow:hidden;background:var(--surface);position:relative;width:100%;transform-style:preserve-3d;transition:transform 0.2s ease-out;will-change:transform}
@media(min-width:768px){.court-card{aspect-ratio:3/4}.court-card:nth-child(2){margin-bottom:2rem}}
.court-card-media{position:absolute;inset:0;overflow:hidden}
.court-card-media img{width:100%;height:100%;object-fit:cover;transition:transform 500ms var(--ease-out-expo)}
@media (hover: hover) and (min-width:769px){.court-card:hover .court-card-media img{transform:scale(1.03)}}
.court-card-caption{position:absolute;left:0.75rem;right:0.75rem;bottom:0.75rem;border-radius:var(--radius-xl);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:0.75rem 1rem;color:#fff}
.court-card-caption-clay{background:rgba(194,169,110,0.55)}
.court-card-caption-blue{background:rgba(14,124,84,0.55)}
.court-card-name{font-size:0.875rem;font-weight:500}
.court-card-desc{font-size:0.65rem;opacity:0.85;margin-top:0.25rem;line-height:1.4}

/* ============ STATS ============ */
.stats{background:var(--brand-deep);color:#fff;border-radius:var(--radius-card-lg);margin-top:0.75rem;padding:5rem 1.5rem}
@media(min-width:640px){.stats{padding:5rem 2.5rem}}
.stats-header{margin-bottom:4rem}
.stats-title{font-size:clamp(2rem, 6vw, 3rem);font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1rem}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem 2rem}
@media(min-width:1024px){.stats-grid{grid-template-columns:1fr 1fr 1fr 1fr;gap:2rem 3rem}}
.stat-cell{border-top:1px solid rgba(255,255,255,0.2);padding-top:1.25rem}
.stat-value{font-size:clamp(2.5rem, 10vw, 4.5rem);font-weight:500;line-height:0.95;letter-spacing:-0.02em}
.stat-label{font-size:0.875rem;color:rgba(255,255,255,0.65);margin-top:0.75rem;display:block}

/* ============ MEMBERSHIP TIERS ============ */
.tiers{background:var(--background);padding:5rem 1.5rem;margin-top:0.75rem;border-radius:var(--radius-card-lg)}
@media(min-width:640px){.tiers{padding:6rem 2.5rem}}
.tiers-header{margin-bottom:3.5rem}
.tiers-title{font-size:clamp(2rem, 6vw, 3rem);font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1rem}
.tiers-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:768px){.tiers-grid{grid-template-columns:1fr 1fr 1fr}}
.tier-card{display:flex;flex-direction:column;border-radius:var(--radius-card);background:var(--surface);padding:2rem;border:1px solid var(--hairline);position:relative;overflow:hidden}
.tier-card.featured{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep)}
.tier-badge{position:absolute;top:1.5rem;right:1.5rem;background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);color:#fff;font-size:0.65rem;font-weight:500;text-transform:uppercase;letter-spacing:0.1em;padding:0.375rem 0.75rem;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:0.375rem;border:1px solid rgba(255,255,255,0.2)}
.tier-badge .pulse-dot{width:0.375rem;height:0.375rem;border-radius:var(--radius-pill);background:var(--brand-light);animation:pulse 2s infinite}
.tier-name{font-size:1.25rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em}
.tier-price{font-size:3rem;font-weight:500;line-height:1;margin-top:1rem}
.tier-price span{font-size:0.875rem;font-weight:400;color:var(--ink-soft)}
.tier-card.featured .tier-price span{color:rgba(255,255,255,0.7)}
.tier-features{list-style:none;margin-top:2rem;flex:1;display:flex;flex-direction:column;gap:0.75rem}
.tier-features li{font-size:0.875rem;display:flex;align-items:center;gap:0.75rem}
.tier-features li::before{content:'';width:0.5rem;height:0.5rem;background:var(--brand);border-radius:var(--radius-pill);flex-shrink:0}
.tier-card.featured .tier-features li::before{background:var(--brand-light)}
.tier-btn{margin-top:2rem;text-align:center}

/* ============ EVENTS CALENDAR ============ */
.events{background:var(--surface);padding:5rem 1.5rem;margin-top:0.75rem;border-radius:var(--radius-card-lg)}
@media(min-width:640px){.events{padding:6rem 2.5rem}}
.events-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2rem;gap:1rem;flex-wrap:wrap}
.events-title{font-size:clamp(2rem, 6vw, 3rem);font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1rem}
.events-scroll{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.events-scroll::-webkit-scrollbar{display:none}
.event-card{flex:0 0 280px;background:var(--background);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;height:220px;transition:transform .35s var(--ease-out-expo),border-color .2s}
@media(min-width:640px){.event-card{flex:0 0 320px}}
.event-card:hover{transform:translateY(-8px);border-color:var(--ink)}
.event-date{font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.1em;color:var(--brand)}
.event-name{font-size:1.25rem;font-weight:500;margin-top:0.5rem;line-height:1.2}
.event-desc{font-size:0.875rem;color:var(--ink-soft);margin-top:0.5rem}
.event-cta{font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;margin-top:1rem;display:inline-flex;align-items:center;gap:0.5rem;cursor:pointer}
.event-cta svg{width:1rem;height:1rem;transition:transform .3s var(--ease-out-expo)}
.event-card:hover .event-cta svg{transform:translateX(5px)}
@media(max-width:767px){.events-nav-buttons{display:none}}

/* ============ BOOKING SECTION (LIGHT MODE) ============ */
.booking{background:var(--surface);color:var(--ink);border-radius:var(--radius-card-lg);margin-top:0.75rem;padding:5rem 1.5rem;position:relative;overflow:hidden}
@media(min-width:640px){.booking{padding:6rem 2.5rem} }
.booking::after{content:'';position:absolute;bottom:0;left:0;width:80%;height:100%;background:radial-gradient(circle at bottom left, rgba(14, 124, 84, 0.25), transparent 60%);pointer-events:none;z-index:0}
.booking-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:start;position:relative;z-index:1}
@media(min-width:768px){.booking-grid{grid-template-columns:1fr 1.2fr}}
.booking-intro{position:relative;z-index:2}
.booking-title{font-size:clamp(2rem, 6vw, 3rem);font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1rem}
.booking-desc{font-size:0.875rem;color:var(--ink-soft);max-width:24rem;margin-top:1.5rem;line-height:1.6}
.booking-app{background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:1.5rem;box-shadow:0 20px 40px -10px rgba(0,0,0,0.05);position:relative;z-index:2}
.booking-progress{display:flex;gap:0.5rem;margin-bottom:2rem}
.progress-step{flex:1;height:4px;background:var(--hairline);border-radius:var(--radius-pill);transition:background .35s var(--ease-out-expo)}
.progress-step.active{background:var(--brand)}
.progress-step.completed{background:var(--ink)}
.booking-steps{position:relative;min-height:320px;transition:min-height 0.4s var(--ease-out-expo)}
.booking-step{position:absolute;top:0;left:0;width:100%;opacity:0;transform:translateX(40px);pointer-events:none;transition:opacity 400ms var(--ease-out-expo),transform 400ms var(--ease-out-expo)}
.booking-step.active{opacity:1;transform:translateX(0);pointer-events:auto}
.booking-step.prev{opacity:0;transform:translateX(-40px)}
.step-label{font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--ink-soft);margin-bottom:1rem}
.table-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.table-card{border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:1rem;cursor:pointer;transition:border-color .2s,background .2s;position:relative;background:var(--background)}
.table-card:hover{border-color:var(--ink)}
.table-card.selected{border-color:var(--brand);background:rgba(14,124,84,0.05)}
.table-card.locked{opacity:0.3;cursor:not-allowed}
.table-card.locked:hover{border-color:var(--hairline)}
.table-name{font-weight:500;font-size:1rem;color:var(--ink)}
.table-type{font-size:0.75rem;color:var(--ink-soft);margin-top:0.25rem}
.table-status{font-size:0.65rem;text-transform:uppercase;letter-spacing:0.1em;margin-top:0.75rem;color:var(--brand)}
.table-status.locked{color:var(--ink-soft)}
.date-pills{display:flex;gap:0.5rem;overflow-x:auto;padding-bottom:0.5rem;scrollbar-width:none}
.date-pills::-webkit-scrollbar{display:none}
.date-pill{padding:0.75rem 1rem;border:1px solid var(--hairline);border-radius:var(--radius-xl);text-align:center;min-width:60px;cursor:pointer;transition:border-color .2s,background .2s;background:var(--background)}
.date-pill:hover{border-color:var(--ink)}
.date-pill.selected{border-color:var(--brand);background:var(--brand);color:#fff}
.date-day{font-size:0.65rem;text-transform:uppercase;letter-spacing:0.1em}
.date-num{font-size:1.125rem;font-weight:500;margin-top:0.25rem}
.time-slots{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-top:1.5rem}
@media(min-width:480px){.time-slots{grid-template-columns:1fr 1fr 1fr}}
.time-slot{padding:0.75rem;border:1px solid var(--hairline);border-radius:var(--radius-xl);text-align:center;font-size:0.875rem;font-weight:500;cursor:pointer;transition:border-color .2s,background .2s;color:var(--ink);background:var(--background)}
.time-slot:hover{border-color:var(--ink)}
.time-slot.selected{border-color:var(--brand);background:var(--brand);color:#fff}
.time-slot.locked{opacity:0.3;cursor:not-allowed;text-decoration:line-through}
.form-field{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}
.form-label{font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.18em;color:var(--ink-soft)}
.form-input{width:100%;border-radius:var(--radius-xl);border:1px solid var(--hairline);background:var(--background);padding:0.75rem 1rem;font-size:0.875rem;transition:border-color .2s;outline:none;color:var(--ink)}
.form-input::placeholder{color:var(--ink-soft)}
.form-input:focus{border-color:var(--brand)}

.form-input.error { border-color: #ef4444; animation: shake 0.4s var(--ease-in-out-cubic); }
.error-text { color: #ef4444; font-size: 0.75rem; margin-top: 0.25rem; display: none; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0px 1000px var(--background) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.booking-summary{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-xl);padding:1rem;margin-bottom:1rem;font-size:0.875rem}
.summary-row{display:flex;justify-content:space-between;padding:0.25rem 0;gap:1rem}
.summary-label{color:var(--ink-soft);white-space:nowrap}
.summary-row span:last-child{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}
.booking-nav{display:flex;justify-content:space-between;gap:0.75rem;margin-top:1.5rem}
.btn-back{padding:0.875rem 1.5rem;font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-soft);transition:color .2s}
.btn-back:hover{color:var(--ink)}
.success-panel{text-align:center;padding:1rem 0}
.success-icon{width:4rem;height:4rem;border-radius:var(--radius-pill);background:var(--brand);display:grid;place-items:center;margin:0 auto 1.5rem;color:#fff;animation:popIn 500ms var(--ease-spring)}
@keyframes popIn{0%{transform:scale(0)}100%{transform:scale(1)}}
.success-icon svg{width:2rem;height:2rem}
.success-title{font-size:1.5rem;font-weight:500;margin-bottom:0.5rem;color:var(--ink)}
.success-subtext{font-size:0.875rem;color:var(--ink-soft);line-height:1.5;max-width:280px;margin:0 auto 1.5rem}

/* ============ LOUNGE ============ */
.lounge{background:var(--background);padding:5rem 1.5rem;margin-top:0.75rem;border-radius:var(--radius-card-lg)}
@media(min-width:640px){.lounge{padding:6rem 2.5rem}}
.lounge-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:768px){.lounge-grid{grid-template-columns:1fr 1.2fr}}
.lounge-text{max-width:32rem}
.lounge-title{font-size:clamp(2rem, 6vw, 3rem);font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1rem}
.lounge-desc{font-size:0.875rem;color:var(--ink-soft);max-width:24rem;margin-top:1.5rem;line-height:1.6}
.lounge-features{list-style:none;margin-top:2rem;display:flex;flex-direction:column;gap:0.75rem}
.lounge-features li{font-size:0.875rem;display:flex;align-items:center;gap:0.75rem}
.lounge-features li::before{content:'';width:0.5rem;height:0.5rem;background:var(--accent-teal);border-radius:var(--radius-pill);flex-shrink:0}

.lounge-img{position:relative;width:100%;aspect-ratio:16/10;border-radius:var(--radius-card);overflow:hidden}
.lounge-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ============ FAQ ============ */
.faq{background:var(--surface);padding:5rem 1.5rem;margin-top:0.75rem;border-radius:var(--radius-card-lg)}
@media(min-width:640px){.faq{padding:6rem 2.5rem}}
.faq-header{margin-bottom:3.5rem}
.faq-title{font-size:clamp(2rem, 6vw, 3rem);font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1rem}
.faq-list{max-width:48rem;margin:0 auto}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;text-align:left;font-size:1.125rem;font-weight:500;transition:color .2s;gap:1rem}
.faq-question:hover{color:var(--brand)}
.faq-icon{width:1.5rem;height:1.5rem;position:relative;flex-shrink:0}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:currentColor;transition:transform .35s var(--ease-out-expo)}
.faq-icon::before{width:100%;height:1px;top:50%;left:0;transform:translateY(-50%)}
.faq-icon::after{width:1px;height:100%;left:50%;top:0;transform:translateX(-50%)}
.faq-item.open .faq-icon::after{transform:translateX(-50%) rotate(90deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4ms var(--ease-out-expo)}
.faq-answer-inner{padding-bottom:1.5rem;color:var(--ink-soft);line-height:1.6}

/* ============ TESTIMONIALS (FIXED MARQUEE) ============ */
.testimonials{background:var(--background);padding:5rem 1.5rem;margin-top:0.75rem;overflow:hidden}
@media(min-width:640px){.testimonials{padding:6rem 2.5rem}}
.testimonials-header{margin-bottom:3.5rem;max-width:1400px;margin-left:auto;margin-right:auto}
.testimonials-title{font-size:clamp(2rem, 6vw, 3rem);font-weight:500;line-height:0.95;letter-spacing:-0.02em;margin-top:1rem}

.testimonials-marquee {
  max-width: 1400px;
  margin: 0 auto;
  height: 600px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
.testimonials-track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  height: 100%;
}
@media(min-width:768px){.testimonials-track{grid-template-columns:1fr 1fr 1fr}}

.testimonial-col{display:flex;flex-direction:column;gap:1.25rem}
.testimonial-col.up{animation:scrollUp 25s linear infinite}
.testimonial-col.down{animation:scrollDown 25s linear infinite}
.testimonial-card{flex-shrink:0;display:flex;flex-direction:column;justify-content:space-between;border-radius:var(--radius-card);background:var(--surface);padding:1.75rem}
.testimonial-quote{font-size:2.25rem;color:var(--brand);line-height:1;font-weight:500}
.testimonial-blockquote{font-size:1.125rem;line-height:1.5;color:var(--ink);margin-top:1rem}
.testimonial-figcaption{border-top:1px solid var(--hairline);padding-top:1rem;margin-top:1.5rem}
.testimonial-name{font-weight:500;font-size:0.875rem}
.testimonial-role{font-size:0.875rem;color:var(--ink-soft)}

@keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes scrollDown { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } }

/* ============ MAP SECTION ============ */
.map-section{margin-top:0.75rem;border-radius:var(--radius-card-lg);overflow:hidden;height:450px;position:relative}
.map-container{width:100%;height:100%;filter:invert(90%) hue-rotate(180deg) grayscale(0.3) contrast(1.2) brightness(0.9)}
.map-container iframe{width:100%;height:100%;border:0}

/* ============ FOOTER ============ */
.site-footer{background:var(--brand-deep);color:#fff;border-radius:var(--radius-card-lg);margin-top:0.75rem;padding:3.5rem 1.5rem;position:relative;overflow:hidden}
.site-footer::after{content:'';position:absolute;bottom:0;right:0;width:80%;height:100%;background:radial-gradient(circle at bottom right, rgba(14, 124, 84, 0.25), transparent 60%);pointer-events:none;z-index:0}
.site-footer > *{position:relative;z-index:1}
@media(min-width:640px){.site-footer{padding:4rem 2.5rem}}
.footer-cta{border-bottom:1px solid rgba(255,255,255,0.15);padding-bottom:3.5rem;display:flex;flex-direction:column;gap:2rem}
@media(min-width:640px){.footer-cta{flex-direction:row;justify-content:space-between;align-items:flex-end}}
.footer-cta-title{font-size:clamp(2.5rem, 8vw, 3.75rem);font-weight:500;line-height:0.92;letter-spacing:-0.02em;margin-top:1rem}
.footer-columns{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;padding:3.5rem 0}
@media(min-width:768px){.footer-columns{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}}
.footer-brand-col{max-width:20rem;grid-column:1 / -1}
@media(min-width:768px){.footer-brand-col{grid-column:auto}}
.footer-brand-name{display:flex;align-items:center;gap:0.5rem;font-size:1.125rem;font-weight:500;text-transform:uppercase;letter-spacing:0.2em}
.footer-brand-name .ball-mark{width:1.25rem;height:1.25rem}
.footer-blurb{font-size:0.875rem;color:rgba(255,255,255,0.65);margin-top:1rem;line-height:1.6}
.footer-address{font-style:normal;margin-top:1.5rem;color:rgba(255,255,255,0.8);font-size:0.875rem;line-height:1.6}
.footer-address a{display:block;transition:opacity .2s}
.footer-address a:hover{opacity:0.7}
.footer-address .muted{color:rgba(255,255,255,0.55);margin-top:0.5rem}
.footer-col-heading{font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.2em;color:rgba(255,255,255,0.5);margin-bottom:1rem}
.footer-col-list{list-style:none;display:flex;flex-direction:column;gap:0.75rem;font-size:0.875rem;color:rgba(255,255,255,0.8)}
.footer-col-list a{transition:opacity .2s}
.footer-col-list a:hover{opacity:0.7}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.15);padding-top:2rem;display:flex;flex-direction:column;gap:1.25rem;font-size:0.875rem;color:rgba(255,255,255,0.6);text-align:center;align-items:center}
@media(min-width:640px){.footer-bottom{flex-direction:row;justify-content:space-between;align-items:center;text-align:left}}
.footer-social,.footer-legal{display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center}
.footer-social a,.footer-legal a{transition:color .2s}
.footer-social a:hover,.footer-legal a:hover{color:#fff}

/* ============ MENU ============ */
.menu-overlay{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;pointer-events:none}
.menu-backdrop{position:absolute;inset:0;background:var(--brand-deep);opacity:0;transition:opacity 400ms var(--ease-out-expo)}
.menu-overlay.open{pointer-events:auto}
.menu-overlay.open .menu-backdrop{opacity:1}
.menu-panel{position:relative;z-index:1;height:100%;padding:0.5rem;display:flex;flex-direction:column;opacity:0;transform:translateY(-24px);transition:opacity 400ms var(--ease-out-expo),transform 400ms var(--ease-out-expo)}
@media(min-width:640px){.menu-panel{padding:0.75rem}}
.menu-overlay.open .menu-panel{opacity:1;transform:translateY(0)}
.menu-panel-inner{flex:1;padding:1.5rem;display:flex;flex-direction:column;border-radius:var(--radius-card-lg);background:var(--brand-deep);color:#fff;overflow-y:auto}
@media(min-width:640px){.menu-panel-inner{padding:2.5rem}}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-brand{display:flex;align-items:center;gap:0.5rem;font-size:1rem;font-weight:500;text-transform:uppercase;letter-spacing:0.2em}
.menu-brand .ball-mark{width:1.25rem;height:1.25rem}
.menu-close{width:2.5rem;height:2.5rem;border-radius:var(--radius-pill);background:rgba(255,255,255,0.15);display:grid;place-items:center;transition:background .2s}
.menu-close:hover{background:rgba(255,255,255,0.25)}
.menu-close svg{width:1.25rem;height:1.25rem;transition:transform .35s var(--ease-out-expo)}
.menu-close:hover svg{transform:rotate(90deg)}
.menu-nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:0.5rem}
.menu-link{font-size:clamp(2.5rem, 10vw, 4.5rem);font-weight:500;line-height:1;letter-spacing:-0.02em;color:#fff;opacity:0;transform:translateY(28px);transition:opacity 500ms var(--ease-out-expo),transform 500ms var(--ease-out-expo),color .2s;transition-delay:calc(120ms + var(--i) * 70ms)}
.menu-overlay.open .menu-link{opacity:1;transform:translateY(0)}
.menu-link:hover{color:var(--brand-light)}
.menu-bottom{border-top:1px solid rgba(255,255,255,0.15);padding-top:2rem;display:flex;flex-direction:column;gap:1.5rem;align-items:center;text-align:center}
@media(min-width:640px){.menu-bottom{flex-direction:row;justify-content:space-between;align-items:center;text-align:left}}
.menu-social{display:flex;gap:1.25rem;font-size:0.875rem;color:rgba(255,255,255,0.7)}
.menu-social a:hover{color:#fff}

/* ============ FLOATING ELEMENTS ============ */
.mobile-book-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:60;box-shadow:0 10px 25px rgba(14,124,84,0.4);display:none}
@media(max-width:1023px){
  .mobile-book-btn{
    display:inline-flex;
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .mobile-book-btn.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition:opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
  }
}

.audio-toggle{position:fixed;bottom:1.25rem;left:1.25rem;z-index:60;width:3rem;height:3rem;display:grid;place-items:center;border-radius:var(--radius-pill);background:var(--brand-deep);color:#fff;box-shadow:0 10px 25px rgba(0,0,0,0.2);transition:transform 0.2s var(--ease-out-expo), background 0.2s}
.audio-toggle:hover{transform:scale(1.05);background:var(--ink)}
.audio-toggle svg{width:1.25rem;height:1.25rem}

/* ============ STACKED LINES ============ */
.stacked-lines{display:block}
.stacked-lines .clip-line{display:block}
.stacked-lines .line-inner{transition-delay:calc(var(--i) * 120ms)}
.stacked-lines.revealed .line-inner{transform:translateY(0);opacity:1}

/* ============ MOBILE FIXES FOR GRADIENTS & BOOKING ============ */
@media (max-width: 767px) {
  .site-footer::after,
  .booking::after {
    width: 150%;
    height: 50%;
    opacity: 0.8;
  }
}

@media (max-width: 480px) {
  .booking-nav {
    flex-direction: column-reverse;
    gap: 0.5rem;
  }
  .booking-nav .btn-back {
    width: 100%;
    text-align: center;
    padding: 0.875rem 1rem;
  }
  .booking-nav .pill-btn {
    width: 100%;
    justify-content: center;
  }
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
  .loader{transition:none}
}