/*
Theme Name: ELEVAT8
Theme URI: https://elevat8.com
Author: Elevat8
Author URI: https://elevat8.com
Description: Custom-coded theme for ELEVAT8, a premium members club. Matte Black, Graphite Grey and Electric Lime design system built with Bebas Neue + Inter. No page builder — repeating content (facility zones, testimonials, membership tiers, stats, coaching highlights) is managed as custom post types, and one-off pages have editable text/image fields via meta boxes. Site-wide details live in the Customizer.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elevat8
*/

@font-face {
  font-family: "Bebas Neue";
  src: local("Bebas Neue");
  font-weight: 400;
  font-display: swap;
}

:root {
  --radius: 0.25rem;

  /* Brand core */
  --ink: #0f0f0f;
  --graphite: #1e1e1e;
  --lime: #d7ff3f;
  --lime-glow: rgba(215, 255, 63, 0.35);
  --silver: #b8b8b8;

  /* Semantic (dark-first) */
  --background: var(--ink);
  --foreground: #ffffff;
  --card: var(--graphite);
  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.1);
  --muted: #424242;

  --shadow-lime: 0 20px 60px -20px rgba(215, 255, 63, 0.4);

  --font-display: "Bebas Neue", "Impact", sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
  border-color: var(--border);
}

html {
  background-color: var(--background);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--lime);
  color: var(--ink);
}

/* ————————————————————— Layout helpers ————————————————————— */

.container-x {
  padding-inline: 1.25rem;
  margin-inline: auto;
  max-width: 1360px;
}
@media (min-width: 768px) {
  .container-x { padding-inline: 2.5rem; }
}
@media (min-width: 1280px) {
  .container-x { padding-inline: 4rem; }
}

.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 0.9;
}

.text-lime { color: var(--lime); }
.text-silver { color: var(--silver); }
.bg-lime { background-color: var(--lime); }
.bg-graphite { background-color: var(--graphite); }

.text-glow-lime {
  text-shadow: 0 0 40px rgba(215, 255, 63, 0.6);
}

.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ————————————————————— Reveal-on-scroll ————————————————————— */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-shown {
  opacity: 1;
  transform: translateY(0);
}
.no-js .reveal { opacity: 1; transform: none; }

/* ————————————————————— Buttons ————————————————————— */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}
.btn-lime {
  background: var(--lime);
  color: var(--ink);
  padding: 1rem 2rem;
  font-size: 0.8125rem;
  box-shadow: var(--shadow-lime);
}
.btn-lime:hover {
  background: rgba(215, 255, 63, 0.9);
  transform: translateY(-2px);
  color: var(--ink);
}
.btn-outline {
  background: rgba(15, 15, 15, 0.3);
  backdrop-filter: blur(8px);
  color: var(--foreground);
  border: 1px solid var(--border);
  padding: 1rem 2rem;
  font-size: 0.8125rem;
}
.btn-outline:hover {
  border-color: var(--lime);
  color: var(--lime);
}
.btn-sm {
  padding: 0.625rem 1.25rem;
  font-size: 0.6875rem;
}
.icon-up {
  height: 0.875rem;
  width: 0.875rem;
  transition: transform 0.2s ease;
}
.btn:hover .icon-up {
  transform: translate(2px, -2px);
}

/* ————————————————————— Chevron icon ————————————————————— */

.chevron {
  width: 0.75rem;
  height: 0.75rem;
  fill: var(--lime);
  flex-shrink: 0;
}

/* ————————————————————— Nav ————————————————————— */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  transition: all 0.3s ease;
  background: transparent;
}
.nav.is-scrolled {
  background: rgba(15, 15, 15, 0.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
@media (min-width: 768px) {
  .nav-inner { height: 5rem; }
}
.nav-logo img {
  height: 1.5rem;
  width: auto;
}
@media (min-width: 768px) {
  .nav-logo img { height: 1.75rem; }
}
.nav-links {
  display: none;
  align-items: center;
  gap: 2.5rem;
}
.nav-links .menu-list,
.nav-mobile-inner .menu-list,
.nav-links li,
.nav-mobile-inner li,
.footer-col li { display: contents; }
.nav-links a {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}
.nav-links a:hover,
.nav-links .current-menu-item a { color: var(--lime); }
.nav-cta { display: none; }
.nav-toggle {
  background: none;
  border: none;
  color: var(--foreground);
  padding: 0.5rem;
  margin-right: -0.5rem;
  cursor: pointer;
}
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }

@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-cta { display: flex; align-items: center; gap: 0.75rem; }
  .nav-toggle { display: none; }
}

.nav-mobile {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--background);
}
.nav-mobile.is-open { display: block; }
.nav-mobile-inner {
  padding-block: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.nav-mobile-inner a {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.8);
}
.nav-mobile-inner .btn {
  margin-top: 0.5rem;
  justify-content: center;
}

/* ————————————————————— Page hero (subpages) ————————————————————— */

.page-hero {
  position: relative;
  padding-top: 9rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
@media (min-width: 768px) { .page-hero { padding-top: 11rem; padding-bottom: 5rem; } }
.page-hero .eyebrow { display: block; margin-bottom: 1rem; }
.page-hero h1 {
  margin: 0;
  font-size: 3rem;
  max-width: 48rem;
}
@media (min-width: 768px) { .page-hero h1 { font-size: 5rem; } }
@media (min-width: 1024px) { .page-hero h1 { font-size: 6.5rem; } }
.page-hero p {
  margin-top: 1.5rem;
  max-width: 40rem;
  color: var(--silver);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ————————————————————— Hero ————————————————————— */

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 6rem;
  isolation: isolate;
}
@media (min-width: 768px) {
  .hero { padding-top: 7rem; }
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-bg img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--background), rgba(15,15,15,0.85), rgba(15,15,15,0.4));
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--background), rgba(15,15,15,0.4), transparent);
}
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.4;
}
.hero-inner {
  position: relative;
  padding-bottom: 6rem;
}
@media (min-width: 768px) {
  .hero-inner { padding-bottom: 10rem; }
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  background: rgba(15,15,15,0.6);
  backdrop-filter: blur(8px);
  padding: 0.375rem 0.75rem;
}
.hero-badge-dot {
  height: 0.375rem;
  width: 0.375rem;
  background: var(--lime);
  border-radius: 999px;
  animation: pulse 2s ease-in-out infinite;
}
.hero-badge span:last-child {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.8);
}
@media (min-width: 768px) {
  .hero-badge span:last-child { font-size: 0.75rem; }
}
.hero h1 {
  margin: 2rem 0 0;
  font-size: 15vw;
  line-height: 0.85;
  max-width: 72rem;
}
@media (min-width: 768px) { .hero h1 { font-size: 9.5vw; } }
@media (min-width: 1024px) { .hero h1 { font-size: 8.5vw; } }
@media (min-width: 1280px) { .hero h1 { font-size: 160px; } }

.hero-sub {
  margin-top: 2rem;
  max-width: 36rem;
  font-size: 1rem;
  color: var(--silver);
  line-height: 1.7;
}
@media (min-width: 768px) { .hero-sub { font-size: 1.125rem; } }

.hero-ctas {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .hero-ctas { flex-direction: row; gap: 1rem; }
}

.hero-list {
  margin-top: 4rem;
  display: grid;
  gap: 1.5rem;
  max-width: 56rem;
}
@media (min-width: 640px) {
  .hero-list { grid-template-columns: repeat(3, 1fr); }
}
.hero-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
.hero-list .chevron { margin-top: 0.375rem; }
.hero-list span {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ————————————————————— Marquee ————————————————————— */

.marquee {
  position: relative;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(30, 30, 30, 0.4);
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  padding-block: 1.25rem;
  animation: marquee 40s linear infinite;
}
.marquee-track span.item {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-inline: 1.5rem;
}
.marquee-track .word {
  font-size: 1.875rem;
  color: rgba(255,255,255,0.9);
}
@media (min-width: 768px) {
  .marquee-track .word { font-size: 3rem; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ————————————————————— Stats ————————————————————— */

.stats {
  padding-block: 6rem;
}
@media (min-width: 768px) { .stats { padding-block: 8rem; } }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
}
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-card {
  background: var(--background);
  padding: 1.5rem 1rem;
  height: 100%;
  min-width: 0;
}
@media (min-width: 768px) { .stat-card { padding: 2rem 2.5rem; } }
.stat-num {
  font-size: 3.75rem;
  color: var(--lime);
}
@media (min-width: 768px) { .stat-num { font-size: 4.5rem; } }
@media (min-width: 1024px) { .stat-num { font-size: 6rem; } }
.stat-label {
  margin-top: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--silver);
}
@media (min-width: 768px) { .stat-label { font-size: 0.75rem; } }

/* ————————————————————— Section heading eyebrow ————————————————————— */

.eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--lime);
}

/* ————————————————————— About ————————————————————— */

.about {
  padding-block: 6rem;
}
@media (min-width: 768px) { .about { padding-block: 10rem; } }
.about-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: repeat(12, 1fr); gap: 4rem; }
  .about-copy { grid-column: span 7; order: 1; }
  .about-media { grid-column: span 5; order: 2; }
}
.about-copy h2 {
  margin: 1.5rem 0 0;
  font-size: 3.75rem;
}
@media (min-width: 768px) { .about-copy h2 { font-size: 6rem; } }
@media (min-width: 1024px) { .about-copy h2 { font-size: 7rem; } }
.about-copy .body {
  margin-top: 2.5rem;
  max-width: 36rem;
}
.about-copy .body p {
  color: var(--silver);
  line-height: 1.7;
  font-size: 1rem;
  margin: 0 0 1.5rem;
}
@media (min-width: 768px) { .about-copy .body p { font-size: 1.125rem; } }

.about-pillars {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 36rem;
}
.about-pillars > div {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
.about-pillars .k {
  font-family: var(--font-display);
  font-size: 1.5rem;
}
@media (min-width: 768px) { .about-pillars .k { font-size: 1.875rem; } }
.about-pillars .v {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--silver);
  margin-top: 0.25rem;
}

.about-media { position: relative; }
.about-media-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.about-media-frame img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: grayscale(15%) contrast(1.1);
}
.about-media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--border);
}
.about-media-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, var(--background), rgba(15,15,15,0.6), transparent);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.about-media-caption span {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.about-media-caption .chevron { width: 1rem; height: 1rem; }

/* ————————————————————— Facility ————————————————————— */

.facility {
  border-top: 1px solid var(--border);
}
.facility-inner {
  padding-block: 6rem;
}
@media (min-width: 768px) { .facility-inner { padding-block: 10rem; } }
.facility-head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 4rem;
}
@media (min-width: 768px) {
  .facility-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.facility-head h2 {
  margin: 1.5rem 0 0;
  font-size: 3rem;
  max-width: 48rem;
}
@media (min-width: 768px) { .facility-head h2 { font-size: 4.5rem; } }
@media (min-width: 1024px) { .facility-head h2 { font-size: 6rem; } }
.facility-head p {
  max-width: 24rem;
  color: var(--silver);
}
.facility-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .facility-grid { grid-template-columns: repeat(2, 1fr); }
}
.facility-card {
  position: relative;
  overflow: hidden;
  background: var(--graphite);
  border: 1px solid var(--border);
  transition: border-color 0.5s ease;
}
.facility-card:hover { border-color: rgba(215, 255, 63, 0.6); }
.facility-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--graphite);
}
.facility-media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.facility-card:hover .facility-media img { transform: scale(1.05); }
.facility-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--background), rgba(15,15,15,0.3), transparent);
}
.facility-icon {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  height: 2.75rem;
  width: 2.75rem;
  background: rgba(15,15,15,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.facility-icon svg { width: 1.25rem; height: 1.25rem; color: var(--lime); stroke: var(--lime); }
.facility-index {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 0.625rem;
  font-family: monospace;
  color: rgba(184,184,184,0.8);
  z-index: 1;
}
.facility-body { padding: 1.75rem 2rem; }
@media (min-width: 768px) { .facility-body { padding: 2.25rem; } }
.facility-body h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 1.875rem;
  margin: 0;
}
@media (min-width: 768px) { .facility-body h3 { font-size: 2.25rem; } }
.facility-body p {
  margin-top: 0.75rem;
  color: var(--silver);
  line-height: 1.6;
}
.facility-cta {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.7);
  transition: color 0.2s ease;
}
.facility-card:hover .facility-cta { color: var(--lime); }

/* ————————————————————— Coaching ————————————————————— */

.coaching {
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.coaching-inner { padding-block: 6rem; }
@media (min-width: 768px) { .coaching-inner { padding-block: 10rem; } }
.coaching-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .coaching-grid { grid-template-columns: repeat(12, 1fr); gap: 4rem; }
  .coaching-media { grid-column: span 6; }
  .coaching-copy { grid-column: span 6; }
}
.coaching-media { position: relative; }
.coaching-frame {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--graphite);
}
.coaching-frame img { height: 100%; width: 100%; object-fit: cover; }
.coaching-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--border);
}
.coaching-badge {
  position: absolute;
  bottom: -1px;
  right: -1px;
  background: var(--lime);
  color: var(--ink);
  padding: 1.25rem 1.5rem;
  max-width: 240px;
}
.coaching-badge .num {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
}
@media (min-width: 768px) { .coaching-badge .num { font-size: 3.75rem; } }
.coaching-badge .label {
  margin-top: 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.coaching-copy h2 {
  margin: 1.5rem 0 0;
  font-size: 3rem;
}
@media (min-width: 768px) { .coaching-copy h2 { font-size: 4.5rem; } }
@media (min-width: 1024px) { .coaching-copy h2 { font-size: 6rem; } }
.coaching-copy .body {
  margin-top: 2rem;
  max-width: 36rem;
}
.coaching-copy .body p {
  color: var(--silver);
  line-height: 1.7;
  margin: 0 0 1.25rem;
  font-size: 1rem;
}
@media (min-width: 768px) { .coaching-copy .body p { font-size: 1.125rem; } }
.coaching-list {
  margin-top: 2.5rem;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.coaching-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
  padding-block: 0.75rem;
}
.coaching-list svg { width: 1rem; height: 1rem; color: var(--lime); stroke: var(--lime); flex-shrink: 0; }
.coaching-list span {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
}
.coaching-copy .btn { margin-top: 2.5rem; }

/* ————————————————————— Testimonials ————————————————————— */

.testimonials {
  border-top: 1px solid var(--border);
  background: rgba(30,30,30,0.3);
}
.testimonials-inner { padding-block: 6rem; }
@media (min-width: 768px) { .testimonials-inner { padding-block: 8rem; } }
.testimonials-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}
.testimonials-head h2 {
  margin: 1.5rem 0 0;
  font-size: 3rem;
  max-width: 48rem;
}
@media (min-width: 768px) { .testimonials-head h2 { font-size: 4.5rem; } }
.testimonials-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.testimonials-rating svg { width: 1.25rem; height: 1.25rem; fill: var(--lime); stroke: var(--lime); }
.testimonials-rating span {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--silver);
}
.testimonial-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
}
.testimonial-card {
  height: 100%;
  background: var(--background);
  border: 1px solid var(--border);
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: 3.75rem;
  color: var(--lime);
  line-height: 1;
}
.testimonial-text {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.95);
  flex: 1;
}
@media (min-width: 768px) { .testimonial-text { font-size: 1.25rem; } }
.testimonial-foot {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.testimonial-foot .name { font-weight: 600; }
.testimonial-foot .role {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--silver);
  margin-top: 0.25rem;
}

/* ————————————————————— Membership ————————————————————— */

.membership { border-top: 1px solid var(--border); }
.membership-inner { padding-block: 6rem; }
@media (min-width: 768px) { .membership-inner { padding-block: 10rem; } }
.membership-head {
  text-align: center;
  max-width: 48rem;
  margin-inline: auto;
}
.membership-head h2 {
  margin: 1.5rem 0 0;
  font-size: 3rem;
}
@media (min-width: 768px) { .membership-head h2 { font-size: 4.5rem; } }
@media (min-width: 1024px) { .membership-head h2 { font-size: 6rem; } }
.membership-head p {
  margin-top: 1.5rem;
  color: var(--silver);
  font-size: 1.125rem;
}
.tiers {
  margin-top: 4rem;
  display: grid;
  gap: 1.25rem;
  align-items: stretch;
}
@media (min-width: 768px) {
  .tiers { grid-template-columns: repeat(3, 1fr); }
}
.tier {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2rem 2.5rem;
  background: var(--graphite);
  border: 1px solid var(--border);
  transition: all 0.5s ease;
}
.tier:hover { border-color: rgba(215, 255, 63, 0.5); }
.tier.featured {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
  box-shadow: var(--shadow-lime);
}
@media (min-width: 768px) {
  .tier.featured { transform: translateY(-1rem); }
}
.tier-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border: 1px solid var(--border);
  color: var(--silver);
}
.tier.featured .tier-tag {
  background: var(--ink);
  color: var(--lime);
  border: none;
}
.tier-name {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 3rem;
}
@media (min-width: 768px) { .tier-name { font-size: 3.75rem; } }
.tier-price {
  margin-top: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.tier-price .curr {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.7;
}
.tier-price .amount {
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
}
@media (min-width: 768px) { .tier-price .amount { font-size: 6rem; } }
.tier-price .period {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--silver);
}
.tier.featured .tier-price .period { color: inherit; opacity: 0.7; }
.tier-features {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tier.featured .tier-features { border-top-color: rgba(15,15,15,0.2); }
.tier-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.tier-features svg { width: 1rem; height: 1rem; margin-top: 0.2rem; color: var(--lime); stroke: var(--lime); flex-shrink: 0; }
.tier.featured .tier-features svg { color: var(--ink); stroke: var(--ink); }
.tier .btn {
  margin-top: 2.5rem;
  background: var(--lime);
  color: var(--ink);
}
.tier.featured .btn {
  background: var(--ink);
  color: var(--lime);
}

/* ————————————————————— Lead form ————————————————————— */

.apply {
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.apply-glow {
  position: absolute;
  top: -10rem;
  right: -10rem;
  height: 500px;
  width: 500px;
  border-radius: 999px;
  background: rgba(215,255,63,0.1);
  filter: blur(120px);
}
.apply-inner {
  position: relative;
  padding-block: 6rem;
}
@media (min-width: 768px) { .apply-inner { padding-block: 10rem; } }
.apply.is-first-section .apply-inner { padding-top: 9rem; }
@media (min-width: 768px) { .apply.is-first-section .apply-inner { padding-top: 11rem; } }
.apply-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .apply-grid { grid-template-columns: repeat(12, 1fr); gap: 4rem; }
  .apply-copy { grid-column: span 5; }
  .apply-form-wrap { grid-column: span 7; }
}
.apply-copy h2 {
  margin: 1.5rem 0 0;
  font-size: 3rem;
}
@media (min-width: 768px) { .apply-copy h2 { font-size: 4.5rem; } }
@media (min-width: 1024px) { .apply-copy h2 { font-size: 6rem; } }
.apply-copy p {
  margin-top: 1.5rem;
  color: var(--silver);
  font-size: 1.125rem;
  max-width: 28rem;
}
.apply-contact {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.875rem;
}
.apply-contact div,
.apply-contact a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--silver);
}
.apply-contact svg { width: 1rem; height: 1rem; color: var(--lime); stroke: var(--lime); flex-shrink:0; }

.apply-form-card {
  background: var(--graphite);
  border: 1px solid var(--border);
  padding: 1.5rem;
}
@media (min-width: 768px) { .apply-form-card { padding: 2.5rem; } }

.form-grid { display: grid; gap: 1.25rem; }
.form-row-2 { display: grid; gap: 1.25rem; }
@media (min-width: 768px) {
  .form-row-2 { grid-template-columns: repeat(2, 1fr); }
}
.field label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--silver);
  margin-bottom: 0.5rem;
}
.field input,
.field textarea {
  width: 100%;
  background: var(--background);
  border: 1px solid var(--border);
  padding: 0.875rem 1rem;
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  transition: all 0.2s ease;
}
.field textarea { resize: none; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(184,184,184,0.5); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(215,255,63,0.3);
}
.apply-form-card .btn {
  margin-top: 0.5rem;
  width: 100%;
}
.form-disclaimer {
  font-size: 0.6875rem;
  color: rgba(184,184,184,0.7);
  margin: 0.25rem 0 0;
}
.form-msg {
  font-size: 0.8125rem;
  margin: 0 0 0.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
}
.form-msg.is-error { border-color: #ff5f5f; color: #ff9d9d; }

.form-success {
  text-align: center;
  padding-block: 4rem;
}
.form-success .chevron {
  width: 2.5rem;
  height: 2.5rem;
  margin-inline: auto;
}
.form-success h3 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  margin: 1.5rem 0 0;
}
@media (min-width: 768px) { .form-success h3 { font-size: 3rem; } }
.form-success p {
  margin-top: 1rem;
  color: var(--silver);
}

/* ————————————————————— Simple page content (legal etc.) ————————————————————— */

.simple-page { padding-block: 6rem; }
@media (min-width: 768px) { .simple-page { padding-block: 8rem; } }
.simple-page .entry-content { max-width: 48rem; color: var(--silver); line-height: 1.8; font-size: 1.0625rem; }
.simple-page .entry-content p { margin: 0 0 1.5rem; }
.simple-page .entry-content h2 { font-family: var(--font-display); color: var(--foreground); font-size: 2rem; margin: 2rem 0 1rem; }
.simple-page .entry-content a { color: var(--lime); text-decoration: underline; }
.simple-page .entry-content ul,
.simple-page .entry-content ol { padding-left: 1.25rem; margin: 0 0 1.5rem; }
.simple-page .entry-content li { list-style: disc; margin-bottom: 0.5rem; }
.simple-page .entry-content img { margin: 2rem 0; }

/* ————————————————————— Footer ————————————————————— */

footer {
  border-top: 1px solid var(--border);
}
.footer-inner { padding-block: 4rem; }
.footer-grid {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(12, 1fr); }
}
.footer-brand { }
@media (min-width: 768px) { .footer-brand { grid-column: span 5; } }
.footer-brand img { height: 2rem; width: auto; }
.footer-brand p {
  margin-top: 1.5rem;
  max-width: 24rem;
  color: var(--silver);
  line-height: 1.7;
}
.footer-col { }
@media (min-width: 768px) { .footer-col { grid-column: span 2; } }
.footer-col .title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.footer-col ul {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-col a {
  font-size: 0.875rem;
  color: var(--silver);
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--lime); }
.footer-bottom {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; }
}
.footer-copy { font-size: 0.75rem; color: var(--silver); }
.footer-tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--silver);
}
.footer-tag .chevron { width: 0.75rem; height: 0.75rem; }

/* ————————————————————— Admin bar spacing fix ————————————————————— */
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav { top: 46px; } }

/* ————————————————————— WP core alignment helpers ————————————————————— */
.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; max-width: none; }


/* ————————————————————— Elementor page — brand system —————————————————————
 * Verified against the live installed Elementor version: per-WIDGET
 * "CSS Classes" (advanced tab) are NOT rendered into the DOM in this
 * version — only SECTION and COLUMN level css_classes actually attach.
 * So instead of relying on widget classes, these rules target Elementor's
 * own predictable inner markup (.elementor-heading-title, headings by tag,
 * p, a.elementor-button, icon-list) either globally (scoped to `.elementor`)
 * or via the column-level classes that DO attach (elevat8-hero-col,
 * elevat8-card, elevat8-stat-card, elevat8-testimonial-card, elevat8-tier-card,
 * elevat8-tier-featured, elevat8-about-photo, elevat8-coaching-photo,
 * elevat8-btn-outline-col). All rules use !important because Elementor's own
 * generated per-page/kit CSS otherwise wins on specificity or load order. */

body.elementor-page { background: var(--ink); color: var(--foreground); }
.elementor-section, .elementor-column, .elementor-widget-wrap { background-color: transparent; }

/* ---- Headings: Bebas Neue, uppercase, tight tracking, by tag ----
 * Deliberately TAG-only selectors here (not also ".elementor-heading-title")
 * so every rule in this file stays at a predictable, low, and beatable
 * specificity — every more-specific exception below (stat numbers, tier
 * cards, testimonial quote marks, the lime highlight spans, etc.) needs to
 * reliably out-rank this base layer. */
.elementor h1, .elementor h2, .elementor h3, .elementor h4, .elementor h5, .elementor h6 {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  line-height: 0.9 !important;
  font-weight: 400 !important;
  color: var(--foreground) !important;
  margin: 0 0 0.4em !important;
}

/* Inline-content highlight spans (written directly into heading title HTML,
   e.g. <span class="elevat8-lime">higher</span>) — needs (0,2,0) specificity
   or better to beat the generic heading-color rule just above. */
.elementor .elevat8-lime, .elementor span.elevat8-lime { color: var(--lime) !important; }
.elementor .elevat8-glow, .elementor span.elevat8-glow { text-shadow: 0 0 40px rgba(215, 255, 63, 0.6) !important; }

.elementor h1 { font-size: 56px !important; }
@media (min-width: 768px) { .elementor h1 { font-size: 96px !important; } }
@media (min-width: 1280px) { .elementor h1 { font-size: 150px !important; } }

.elementor h2 { font-size: 40px !important; }
@media (min-width: 768px) { .elementor h2 { font-size: 68px !important; } }
@media (min-width: 1024px) { .elementor h2 { font-size: 92px !important; } }

.elementor h3 { font-size: 28px !important; }
@media (min-width: 768px) { .elementor h3 { font-size: 34px !important; } }

.elementor h4 { font-size: 22px !important; }
@media (min-width: 768px) { .elementor h4 { font-size: 28px !important; } }

.elementor h5 {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
}

.elementor h6 {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.28em !important;
  line-height: 1.4 !important;
  color: var(--lime) !important;
  margin-bottom: 0.9em !important;
}

/* ---- Body copy ---- */
.elementor .elementor-widget-text-editor,
.elementor .elementor-widget-text-editor p {
  font-family: var(--font-sans) !important;
  color: var(--silver) !important;
  line-height: 1.7 !important;
  font-size: 16px !important;
  margin: 0 0 1.1em !important;
}
@media (min-width: 768px) {
  .elementor .elementor-widget-text-editor p { font-size: 17px !important; }
}
.elementor .elementor-widget-text-editor p:last-child { margin-bottom: 0 !important; }

/* ---- Buttons: lime by default, with an outline variant ---- */
.elementor a.elementor-button {
  background: var(--lime) !important;
  color: var(--ink) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  font-weight: 700 !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  border-radius: 2px !important;
  box-shadow: var(--shadow-lime) !important;
  padding: 16px 32px !important;
  transition: all 0.2s ease !important;
}
.elementor a.elementor-button:hover { background: rgba(215, 255, 63, 0.9) !important; transform: translateY(-2px); }
.elevat8-btn-outline-col a.elementor-button {
  background: rgba(15, 15, 15, 0.3) !important;
  border: 1px solid var(--border) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.elevat8-btn-outline-col a.elementor-button:hover { border-color: var(--lime) !important; color: var(--lime) !important; }

/* ---- Icon list (hero bullets, coaching highlights, tier features) ---- */
.elementor .elementor-icon-list-text {
  font-family: var(--font-sans) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
}
.elementor .elementor-icon-list-icon svg,
.elementor .elementor-icon-list-icon i { fill: var(--lime) !important; color: var(--lime) !important; }
.elementor .elementor-icon-list-item { margin-bottom: 0.6em !important; }

/* ---- Hero ---- */
.elevat8-hero-section { position: relative; }
.elevat8-hero-ctas .elementor-column { padding: 6px !important; }

/* ---- Stat cards ---- */
.elevat8-stat-card { padding: 24px 0 !important; }
.elevat8-stat-card h3 {
  font-size: 52px !important;
  color: var(--lime) !important;
  text-shadow: 0 0 40px rgba(215, 255, 63, 0.6) !important;
}
@media (min-width: 768px) { .elevat8-stat-card h3 { font-size: 68px !important; } }
@media (min-width: 1024px) { .elevat8-stat-card h3 { font-size: 88px !important; } }
.elevat8-stat-card p {
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  color: var(--silver) !important;
}

/* ---- Facility / generic "card" columns ---- */
.elevat8-card {
  background: var(--graphite) !important;
  border: 1px solid var(--border) !important;
  padding: 28px 32px 32px !important;
  transition: border-color 0.5s ease !important;
}
.elevat8-card:hover { border-color: rgba(215, 255, 63, 0.6) !important; }
.elevat8-card .elementor-widget-image { margin: -28px -32px 22px !important; }
.elevat8-card .elementor-widget-image img {
  aspect-ratio: 16 / 11 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ---- Testimonials ---- */
.elevat8-testimonial-card { background: var(--ink) !important; }
.elevat8-testimonial-card h2 {
  font-size: 44px !important;
  color: var(--lime) !important;
  line-height: 1 !important;
  margin-bottom: 0.2em !important;
}
.elevat8-testimonial-card .elementor-widget-text-editor:first-of-type p {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}
.elevat8-testimonial-card h5 { margin-top: 1.2em !important; }

/* ---- Membership tiers ---- */
.elevat8-tier-card h3 { font-size: 38px !important; }
@media (min-width: 768px) { .elevat8-tier-card h3 { font-size: 46px !important; } }
.elevat8-tier-featured { background: var(--lime) !important; box-shadow: var(--shadow-lime); }
.elevat8-tier-featured h1, .elevat8-tier-featured h2, .elevat8-tier-featured h3,
.elevat8-tier-featured h4, .elevat8-tier-featured h5, .elevat8-tier-featured h6,
.elevat8-tier-featured .elementor-widget-text-editor p,
.elevat8-tier-featured .elementor-icon-list-text { color: var(--ink) !important; }
.elevat8-tier-featured .elementor-icon-list-icon svg,
.elevat8-tier-featured .elementor-icon-list-icon i { fill: var(--ink) !important; color: var(--ink) !important; }
.elevat8-tier-featured a.elementor-button { background: var(--ink) !important; color: var(--lime) !important; box-shadow: none !important; }

/* ---- About / Coaching photography ---- */
.elevat8-about-photo img { aspect-ratio: 4 / 5 !important; object-fit: cover !important; width: 100% !important; filter: grayscale(15%) contrast(1.1); }
.elevat8-coaching-photo img { aspect-ratio: 5 / 6 !important; object-fit: cover !important; width: 100% !important; }

/* ---- Small helper classes used inside raw "html" widgets (badges, tags,
   price line) — these are safe since the class sits directly on the actual
   element in the HTML string, not via Elementor's broken widget css_classes. ---- */
.elevat8-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  background: rgba(15, 15, 15, 0.6);
  padding: 0.375rem 0.9rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.85);
}
.elevat8-tag {
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border: 1px solid var(--border);
  color: var(--silver);
  margin-bottom: 1rem;
}
.elevat8-tier-featured .elevat8-tag { background: var(--ink); color: var(--lime); border: none; }
.elevat8-price { font-family: "Bebas Neue", sans-serif; }
.elevat8-tier-featured .elevat8-price-line,
.elevat8-tier-featured .elevat8-price-line * { color: var(--ink) !important; }

/* ==========================================================================
   HOME — DESIGN 2 "EDITORIAL"  (.home-variant-b)
   Bold, cinematic, magazine-style. Same brand tokens as the main Home
   design, different composition: full-bleed hero with a floating stats
   bar, bento facility grid, full-panel coaching section, press-style
   stacked testimonials, horizontal membership comparison rows.
   ========================================================================== */

.btn-dark {
  background: var(--ink);
  color: var(--lime);
  padding: 1rem 2rem;
  font-size: 0.8125rem;
  box-shadow: none;
}
.btn-dark:hover { background: #000; transform: translateY(-2px); }

.home-variant-b .body p { color: var(--silver); line-height: 1.7; font-size: 1rem; margin: 0 0 1.25rem; }
@media (min-width: 768px) { .home-variant-b .body p { font-size: 1.0625rem; } }

/* ---- Hero ---- */
.hvb-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  padding-top: 8rem;
  padding-bottom: 3rem;
  isolation: isolate;
  text-align: left;
}
@media (min-width: 768px) { .hvb-hero { min-height: 100vh; padding-top: 6rem; padding-bottom: 6rem; } }
.hvb-hero-bg { position: absolute; inset: 0; z-index: -2; }
.hvb-hero-bg img { height: 100%; width: 100%; object-fit: cover; }
.hvb-hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--ink) 5%, rgba(15,15,15,0.75) 45%, rgba(15,15,15,0.35) 75%), linear-gradient(0deg, var(--ink), transparent 45%);
}
.hvb-hero-inner { display: flex; flex-direction: column; align-items: flex-start; max-width: 44rem; }
.hvb-kicker {
  display: inline-flex;
  border: 1px solid var(--border);
  background: rgba(15,15,15,0.5);
  backdrop-filter: blur(8px);
  padding: 0.5rem 1.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.85);
  border-radius: 999px;
}
.hvb-hero-title {
  margin: 1.5rem 0 0;
  font-size: 11vw;
  line-height: 0.95;
}
@media (min-width: 480px) { .hvb-hero-title { font-size: 9vw; } }
@media (min-width: 768px) { .hvb-hero-title { font-size: 6.5vw; line-height: 0.9; } }
@media (min-width: 1280px) { .hvb-hero-title { font-size: 96px; } }
.hvb-hero-sub {
  margin: 1.25rem 0 0;
  max-width: 32rem;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
}
@media (min-width: 768px) { .hvb-hero-sub { margin-top: 1.75rem; font-size: 1.0625rem; line-height: 1.7; } }
.hvb-hero-ctas {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) { .hvb-hero-ctas { margin-top: 2.5rem; flex-direction: row; } }

.hvb-stats-float { margin-top: 1.75rem; position: relative; z-index: 5; }
@media (min-width: 768px) { .hvb-stats-float { margin-top: 2.5rem; } }
.hvb-stats-bar {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .hvb-stats-bar { grid-template-columns: repeat(4, 1fr); } }
.hvb-stat {
  padding: 1.75rem 1.5rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
@media (min-width: 768px) { .hvb-stat { border-bottom: none; } }
.hvb-stat:nth-child(2n) { border-right: none; }
@media (min-width: 768px) {
  .hvb-stat:nth-child(2n) { border-right: 1px solid var(--border); }
  .hvb-stat:last-child { border-right: none; }
}
.hvb-stat-num { font-size: 2.5rem; color: var(--lime); }
@media (min-width: 768px) { .hvb-stat-num { font-size: 3.25rem; } }
.hvb-stat-label { margin-top: 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--silver); }

/* ---- About ---- */
.hvb-about { padding-block: 7rem 6rem; border-top: 1px solid var(--border); }
@media (min-width: 768px) { .hvb-about { padding-top: 9rem; } }
.hvb-about-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hvb-about-grid { grid-template-columns: 5fr 7fr; gap: 5rem; } }
.hvb-about-frame { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.hvb-about-frame img { height: 100%; width: 100%; object-fit: cover; filter: grayscale(15%) contrast(1.1); }
.hvb-about-copy { position: relative; }
.hvb-num-watermark {
  position: absolute;
  top: -3.5rem; left: -0.5rem;
  font-size: 9rem;
  color: rgba(255,255,255,0.04);
  z-index: -1;
  line-height: 1;
}
@media (min-width: 1024px) { .hvb-num-watermark { font-size: 13rem; top: -5.5rem; } }
.hvb-pillars { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.hvb-pillars > div { border-top: 1px solid var(--border); padding-top: 1rem; }
.hvb-pillars .k { font-size: 1.5rem; }
@media (min-width: 768px) { .hvb-pillars .k { font-size: 1.875rem; } }
.hvb-pillars .v { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--silver); }

/* ---- Facility bento ---- */
.hvb-facility { padding-block: 6rem; border-top: 1px solid var(--border); background: var(--card); }
.hvb-facility-head { display: grid; gap: 1.5rem; margin-bottom: 3rem; }
@media (min-width: 1024px) { .hvb-facility-head { grid-template-columns: 1.2fr 1fr; align-items: end; } }
.hvb-facility-head p { color: var(--silver); line-height: 1.7; margin: 0; }
.hvb-bento {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .hvb-bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; }
  .hvb-bento-0 { grid-column: span 2; grid-row: span 2; }
  .hvb-bento-1 { grid-column: span 2; }
  .hvb-bento-2 { grid-column: span 1; grid-row: span 1; }
  .hvb-bento-3 { grid-column: span 1; grid-row: span 1; }
}
.hvb-bento-card {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--border);
  transition: border-color 0.5s ease;
  min-height: 260px;
}
.hvb-bento-card:hover { border-color: rgba(215,255,63,0.6); }
.hvb-bento-media { position: absolute; inset: 0; }
.hvb-bento-media img { height: 100%; width: 100%; object-fit: cover; transition: transform 1.2s ease; }
.hvb-bento-card:hover .hvb-bento-media img { transform: scale(1.06); }
.hvb-bento-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(to top, rgba(15,15,15,0.95), rgba(15,15,15,0.5) 60%, transparent);
}
.hvb-bento-index { font-family: monospace; font-size: 0.6875rem; color: var(--lime); letter-spacing: 0.1em; }
.hvb-bento-body h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: 1.5rem; margin: 0.35rem 0 0; }
.hvb-bento-0 .hvb-bento-body h3 { font-size: 2rem; }
@media (min-width: 768px) { .hvb-bento-0 .hvb-bento-body h3 { font-size: 2.5rem; } }
.hvb-bento-body p { margin: 0.5rem 0 0; color: var(--silver); font-size: 0.9375rem; max-width: 28rem; }

/* ---- Coaching (full panel) ---- */
.hvb-coaching { position: relative; padding-block: 7rem; border-top: 1px solid var(--border); overflow: hidden; isolation: isolate; }
.hvb-coaching-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 15% 20%, rgba(215,255,63,0.06), transparent 45%), var(--ink);
}
.hvb-coaching-inner { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 1024px) { .hvb-coaching-inner { grid-template-columns: 6fr 5fr; } }
.hvb-coaching-copy .body p { color: var(--silver); line-height: 1.7; }
.hvb-chip-list { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hvb-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--border);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.hvb-chip svg { width: 0.875rem; height: 0.875rem; color: var(--lime); stroke: var(--lime); flex-shrink: 0; }
.hvb-coaching-copy .btn { margin-top: 2.5rem; }
.hvb-coaching-media { position: relative; max-width: 26rem; margin-inline: auto; }
.hvb-coaching-frame { position: relative; aspect-ratio: 5/6; overflow: hidden; border: 1px solid var(--lime); }
.hvb-coaching-frame img { height: 100%; width: 100%; object-fit: cover; }
.hvb-coaching-badge {
  position: absolute; bottom: -1px; right: -1px;
  background: var(--lime);
  color: var(--ink);
  padding: 1.25rem 1.5rem;
  max-width: 12rem;
}
.hvb-coaching-badge .num { font-family: var(--font-display); font-size: 3rem; line-height: 1; }
.hvb-coaching-badge .label { margin-top: 0.5rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4; }

/* ---- Testimonials (same .testimonial-grid component as main Home) ---- */
.hvb-testimonials { padding-block: 7rem; border-top: 1px solid var(--border); background: var(--card); }
.hvb-testimonials-head { max-width: 42rem; margin-bottom: 3.5rem; }
.hvb-rating { margin-top: 1.25rem; display: flex; align-items: center; gap: 0.375rem; }
.hvb-rating svg { width: 1rem; height: 1rem; fill: var(--lime); }
.hvb-rating span { margin-left: 0.5rem; font-size: 0.8125rem; color: var(--silver); }

/* ---- Membership (vertical cards, same .tiers/.tier component as main Home) ---- */
.hvb-membership { padding-block: 7rem; border-top: 1px solid var(--border); }
.hvb-membership-head { max-width: 42rem; margin-bottom: 3.5rem; }
.hvb-membership-head p { color: var(--silver); line-height: 1.7; margin-top: 1rem; }

/* ---- Nav dropdown: "Home" submenu (Design 2) ----
   .nav-links li is normally "display: contents" to flatten the menu into a
   flex row; items with children need to opt back into a real box so the
   sub-menu can be positioned against them. ---- */
.nav-links li.menu-item-has-children {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-links li.menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.nav-links li.menu-item-has-children > a::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
  margin-top: -3px;
}
.nav-links .sub-menu {
  position: absolute;
  top: calc(100% + 1.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 200px;
  background: rgba(15,15,15,0.98);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  box-shadow: 0 24px 48px rgba(0,0,0,0.55);
  z-index: 60;
}
.nav-links .sub-menu > li { display: block; }
.nav-links .sub-menu a {
  display: block;
  padding: 0.65rem 0.9rem;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  border-radius: 3px;
  color: rgba(255,255,255,0.75);
}
.nav-links .sub-menu a:hover,
.nav-links .sub-menu .current-menu-item a { background: rgba(215,255,63,0.08); color: var(--lime); }
.nav-links li.menu-item-has-children:hover > .sub-menu,
.nav-links li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-mobile-inner .sub-menu a { padding-left: 1rem; font-size: 0.75rem; opacity: 0.75; }