/* ============================================================
   DIVINE STRENGTH FITNESS — stylesheet
   ============================================================
   A single, hand-written CSS file. No build step needed.
   Sections:
     1. Design tokens (colors, fonts, spacing)
     2. Reset & base elements
     3. Typography helpers
     4. Buttons, badges, pills, icons
     5. Layout: container, grids, sections
     6. Navbar + mobile menu (pure CSS, no JS)
     7. Footer
     8. Hero, Mission, War Room, CTA bento (home)
     9. Article cards & article detail page
    10. Page hero (interior pages)
    11. Services bento + weekly schedule grid
    12. Classes grid + coach cards
    13. Contact (info cards, map box)
    ============================================================ */

/* ───────────── 1. DESIGN TOKENS ───────────── */
:root {
  /* Backgrounds & surfaces */
  --bg:            #0e0e0e;
  --black:         #000000;
  --surface:       #1a1a1a;
  --surface-2:     #131313;
  --surface-3:     #20201f;
  --surface-4:     #262626;
  --surface-hover: #2c2c2c;

  /* Accents */
  --cyan:        #69daff;
  --cyan-solid:  #00cffc;
  --blue:        #007FFF;
  --coral:       #ff734c;
  --on-coral:    #350700;
  --on-cyan:     #002a35;

  /* Fonts */
  --font-body:    'Lexend', system-ui, sans-serif;
  --font-head:    'Space Grotesk', system-ui, sans-serif;

  /* Layout */
  --container-max: 1536px;            /* screen-2xl */
  --nav-h: 80px;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-full: 9999px;
}

/* ───────────── 2. RESET & BASE ───────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/lexend.woff2') format('woff2');
}
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF;
  src: url('/fonts/lexend-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/spacegrotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+0300-036F, U+1E00-1EFF;
  src: url('/fonts/spacegrotesk-ext.woff2') format('woff2');
}

html { overflow-x: hidden; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--cyan); color: var(--on-cyan); }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* Main content clears the fixed navbar */
.site-main { padding-top: var(--nav-h); display: flex; flex-direction: column; flex: 1; }

/* ───────────── 3. TYPOGRAPHY HELPERS ───────────── */
.font-headline { font-family: var(--font-head); }
.font-body     { font-family: var(--font-body); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.text-cyan       { color: var(--cyan); }
.text-cyan-solid { color: var(--cyan-solid); }
.text-coral      { color: var(--coral); }
.text-blue       { color: var(--blue); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.eyebrow--cyan       { color: var(--cyan); }
.eyebrow--cyan-solid { color: var(--cyan-solid); }
.eyebrow--coral      { color: var(--coral); }

.section-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-style: italic;
  margin-bottom: 2rem;
}

/* ───────────── 4. BUTTONS, BADGES, PILLS, ICONS ───────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .2s, background-color .2s, color .2s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.95); }
.btn .icon { width: 18px; height: 18px; }

.btn--kinetic {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-solid) 100%);
  color: var(--on-cyan);
  font-size: 0.875rem;
  box-shadow: 0 0 30px rgba(105, 218, 255, 0.3);
}
.btn--kinetic:hover { filter: brightness(1.1); }

.btn--blue {
  background: var(--blue);
  color: var(--on-cyan);
  font-size: 0.75rem;
  padding: 0.625rem 1.5rem;
  box-shadow: 0 0 20px rgba(0, 127, 255, 0.3);
}
.btn--blue:hover { filter: brightness(1.15); }

.btn--cyan-solid { background: var(--cyan); color: var(--on-cyan); }
.btn--cyan-solid:hover { filter: brightness(1.1); }

.btn--white { background: #fff; color: #000; }
.btn--white:hover { background: var(--cyan); }

.btn--dark {
  background: var(--surface-3);
  color: #fff;
  border-color: rgba(255,255,255,0.1);
}
.btn--dark:hover { background: var(--surface-hover); }

.btn--black { background: #000; color: #fff; }
.btn--black:hover { background: var(--surface-4); }

.btn--sm { padding: 0.5rem 1rem; font-size: 0.7rem; }
.btn--block { width: 100%; }

.badge {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  font-style: italic;
}
.badge--coral { background: var(--coral); color: #000; }

.pill {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  border: 1px solid;
}
.pill--strength  { color: var(--cyan); border-color: var(--cyan); }
.pill--hiit      { color: var(--coral); border-color: var(--coral); }
.pill--recovery  { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.4); }

/* Icons */
.icon { width: 24px; height: 24px; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 28px; height: 28px; }
.icon-lg { width: 36px; height: 36px; }
.icon-cyan       { color: var(--cyan); }
.icon-cyan-solid { color: var(--cyan-solid); }
.icon-coral      { color: var(--coral); }
.icon-blue       { color: var(--blue); }

.meta {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
}

/* ───────────── 5. LAYOUT ───────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 768px) { .container { padding: 0 2rem; } }

.section { padding: 7rem 0; }
.section--alt { background: var(--surface-2); }

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.glass-panel {
  background: rgba(14, 14, 14, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.section-head { margin-bottom: 3rem; }
.section-head__sub { color: rgba(255,255,255,0.6); margin-top: 0.5rem; }

/* ───────────── 6. NAVBAR ───────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(14, 14, 14, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 40px 40px -15px rgba(0, 127, 255, 0.08);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}
.navbar__logo {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.5rem;
  color: var(--blue);
  transition: filter .2s;
}
.navbar__logo:hover { filter: brightness(1.25); }

.navbar__links {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.nav-link {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  transition: color .2s;
}
.nav-link:hover { color: #fff; }
.nav-link--active {
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
  padding-bottom: 0.25rem;
}

/* Mobile: hide links/cta, show burger. Drawer hidden by default. */
.navbar__toggle { display: none; }
.navbar__burger,
.navbar__drawer { display: none; }

@media (max-width: 767px) {
  .navbar__links,
  .navbar__cta { display: none; }

  .navbar__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0.5rem;
  }
  .navbar__burger-close { display: none; }

  .navbar__drawer {
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(14, 14, 14, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
    padding-top: 0; padding-bottom: 0;
  }
  .navbar__drawer .nav-link {
    padding: 0.25rem 0 0.25rem 0.5rem;
    border-left: 4px solid transparent;
  }
  .navbar__drawer .nav-link--active {
    border-left-color: var(--blue);
    color: var(--blue);
    border-bottom: none;
  }

  /* When checkbox is checked, open the drawer + swap icon */
  .navbar__toggle:checked ~ .navbar__drawer {
    max-height: 26rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .navbar__toggle:checked ~ .navbar__burger .navbar__burger-open { display: none; }
  .navbar__toggle:checked ~ .navbar__burger .navbar__burger-close { display: inline-flex; }
}

/* ───────────── 7. FOOTER ───────────── */
.footer {
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 5rem;
  padding-bottom: 2.5rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer__logo {
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.footer__tagline { color: rgba(255,255,255,0.5); font-size: 0.9rem; max-width: 22rem; }
.footer__heading {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: #fff;
  margin-bottom: 1rem;
}
.footer__list { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__list a,
.footer__list li { color: rgba(255,255,255,0.5); font-size: 0.9rem; transition: color .2s; }
.footer__list a:hover { color: var(--cyan); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 1.5rem;
  text-align: center;
}
.footer__bottom .container {
  color: rgba(255,255,255,0.3);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ───────────── 8. HOME: HERO ───────────── */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(14,14,14,0.4) 60%, transparent 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 50%);
}
.hero__content { position: relative; z-index: 2; max-width: 56rem; }
.hero__title {
  font-size: clamp(3.75rem, 12vw, 9rem);
  font-style: italic;
  line-height: 0.85;
  margin-bottom: 2rem;
}
.hero__title-accent { color: var(--cyan-solid); display: inline-block; }
.hero__sub {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: rgba(255,255,255,0.7);
  font-weight: 300;
  line-height: 1.6;
  max-width: 36rem;
  border-left: 4px solid var(--coral);
  padding-left: 1.5rem;
  margin-bottom: 2.5rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Performance gauge (desktop only) */
.gauge {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  z-index: 3;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  display: none;
}
@media (min-width: 1024px) { .gauge { display: block; } }
.gauge__eyebrow {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cyan-solid);
  margin-bottom: 0.5rem;
}
.gauge__value {
  display: block;
  font-family: var(--font-head);
  font-weight: 900;
  font-style: italic;
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 1rem;
}
.gauge__bars { display: flex; align-items: flex-end; gap: 0.4rem; height: 4rem; }
.gauge__bar { width: 0.6rem; border-radius: 2px; transition: height .3s; }
.gauge__bar--cyan { background: var(--cyan); }
.gauge__bar--coral { background: var(--coral); }
.gauge__bar--pulse { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* HOME: MISSION */
.mission { background: var(--black); }
.mission__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 768px) {
  .mission__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.mission__media { position: relative; }
.mission__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter .5s;
}
.mission__media:hover img { filter: grayscale(0); }
.mission__est {
  position: absolute;
  bottom: -0.75rem;
  right: -0.75rem;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
}
.mission__copy p {
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.mission__copy strong { color: #fff; font-weight: 700; }
.mission__subcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}
.subcard {
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
}
.subcard__icon { margin-bottom: 0.75rem; display: inline-flex; }
.subcard__title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.subcard p { color: rgba(255,255,255,0.6); font-size: 0.85rem; line-height: 1.5; margin: 0; }

/* HOME: WAR ROOM */
.news-teaser__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.news-teaser__header .section-title { margin-bottom: 0; }

/* HOME: CTA BENTO */
.cta-bento-wrap { padding-bottom: 7rem; }
.cta-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .cta-bento { grid-template-columns: 2fr 1fr; }
}
.cta-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 24rem;
  display: flex;
  align-items: center;
}
.cta-tile__bg { position: absolute; inset: 0; z-index: 0; }
.cta-tile__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.cta-tile__content { position: relative; z-index: 1; padding: 3rem; max-width: 32rem; }
.cta-tile__title { font-size: clamp(2rem, 4vw, 3rem); font-style: italic; margin-bottom: 1rem; }
.cta-tile__content p { color: rgba(255,255,255,0.8); margin-bottom: 1.5rem; line-height: 1.6; }
.cta-coral {
  background: var(--coral);
  color: var(--on-coral);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 24rem;
  transition: filter .2s;
}
.cta-coral:hover { filter: brightness(1.05); }
.cta-coral__top { display: flex; justify-content: space-between; color: var(--on-coral); }
.cta-coral__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-style: italic; margin: 1rem 0; }
.cta-coral p { color: rgba(53, 7, 0, 0.8); font-size: 0.9rem; line-height: 1.5; }

/* ───────────── 9. ARTICLE CARDS & DETAIL ───────────── */
.article-card {
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  transition: border-color .2s;
}
.article-card:hover { border-color: rgba(105, 218, 255, 0.3); }
.article-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.article-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s;
}
.article-card:hover .article-card__media img { transform: scale(1.05); }
.article-card__media .badge {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
}
.article-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.article-card__title { font-size: 1.25rem; line-height: 1.1; }
.article-card__title a { transition: color .2s; }
.article-card__title a:hover { color: var(--cyan); }
.article-card__excerpt {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.read-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--cyan);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: auto;
  transition: transform .2s;
}
.read-link .icon { width: 14px; height: 14px; }
.read-link:hover { transform: translateX(0.3rem); }

/* Article detail */
.article__hero {
  position: relative;
  height: 18rem;
  overflow: hidden;
}
@media (min-width: 768px) { .article__hero { height: 20rem; } }
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
.article__hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg) 0%, rgba(14,14,14,0.4) 50%, rgba(14,14,14,0.3) 100%);
}
.article__hero-content {
  position: absolute; bottom: 2rem; left: 0; right: 0;
  display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start;
}
.article__title { font-size: clamp(2rem, 5vw, 3.5rem); font-style: italic; }
.article__body { padding: 3rem 1.5rem 5rem; max-width: 48rem; }
.article__excerpt {
  border-left: 4px solid var(--cyan);
  padding: 1rem 1.5rem;
  color: rgba(255,255,255,0.8);
  font-style: italic;
  margin-bottom: 2rem;
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.article__body p,
.article__body li { color: rgba(255,255,255,0.75); line-height: 1.8; margin-bottom: 1.25rem; }
.article__body ol { padding-left: 1.5rem; }
.article__footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}
.article__footer-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* ───────────── 10. PAGE HERO (interior pages) ───────────── */
.page-hero { padding: 5rem 0 3rem; }
.page-hero__icon { margin-bottom: 1rem; display: inline-flex; }
.page-hero__title {
  font-size: clamp(3rem, 8vw, 6rem);
  font-style: italic;
  margin-bottom: 1.5rem;
}
.page-hero__title--xl { font-size: clamp(3.75rem, 10vw, 8rem); }
.page-hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: rgba(255,255,255,0.7);
  font-weight: 300;
  max-width: 40rem;
  line-height: 1.6;
}

/* ───────────── 11. SERVICES BENTO + SCHEDULE ───────────── */
.services-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: end;
}
@media (min-width: 1024px) {
  .services-hero__grid { grid-template-columns: 2fr 1fr; }
  .services-hero__portrait { text-align: right; }
}
.services-hero__portrait {
  display: inline-block;
  padding: 0.25rem;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  transform: rotate(3deg);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.services-hero__portrait img {
  width: 16rem;
  height: 20rem;
  object-fit: cover;
  filter: grayscale(100%);
  opacity: 0.8;
  cursor: crosshair;
  transition: filter .5s, opacity .5s;
}
.services-hero__portrait:hover img { filter: grayscale(0); opacity: 1; }

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
}
.bento-feature {
  grid-column: span 1;
  position: relative;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius);
  padding: 2rem;
  min-height: 30rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
@media (min-width: 768px) {
  .bento-feature { grid-column: span 2; padding: 3rem; }
}
.bento-feature__bg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: 0; }
@media (min-width: 768px) { .bento-feature__bg { width: 50%; } }
.bento-feature__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; transition: opacity .3s; }
.bento-feature:hover .bento-feature__bg img { opacity: 0.5; }
.bento-feature__content { position: relative; z-index: 1; max-width: 28rem; display: flex; flex-direction: column; gap: 1.5rem; }
.bento-feature__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 0.9;
}
.bento-feature__content p { color: rgba(255,255,255,0.7); line-height: 1.6; font-size: 0.95rem; }

.bento-standard {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: background-color .2s;
}
.bento-standard:hover { background: var(--surface-3); }
.bento-standard__icon { display: inline-flex; margin-bottom: 0.5rem; }
.bento-standard__title { font-size: 1.75rem; line-height: 0.95; margin-bottom: 0.5rem; }
.bento-standard p { color: rgba(255,255,255,0.6); font-size: 0.85rem; line-height: 1.6; }
.bento-standard__features { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.bento-standard__features li {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}

.bento-coral {
  background: var(--coral);
  color: var(--on-coral);
  border-radius: var(--radius);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
}
.bento-coral__title { font-size: 2.25rem; color: var(--on-coral); line-height: 0.95; margin-bottom: 1rem; }
.bento-coral p { color: rgba(53, 7, 0, 0.8); font-size: 0.9rem; line-height: 1.6; }
.bento-coral__bottom { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }

.avatar-stack { display: flex; }
.avatar-stack__img {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--coral);
  object-fit: cover;
  margin-left: -0.75rem;
}
.avatar-stack__img:first-child { margin-left: 0; }
.avatar-stack__more {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--coral);
  background: #000;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: -0.75rem;
}

/* Recovery variant (icon tiles) */
.recovery { display: flex; flex-direction: column; gap: 2rem; width: 100%; }
@media (min-width: 768px) { .recovery { flex-direction: row; align-items: center; } }
.recovery__copy { flex: 1; }
.recovery__copy .bento-feature__title { margin-top: 0.5rem; }
.recovery__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  width: 100%;
}
@media (min-width: 768px) { .recovery__tiles { width: 33%; } }
.recovery__tile {
  aspect-ratio: 1;
  background: var(--surface-4);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  transition: color .2s;
}
.recovery__tile--cyan:hover       { color: var(--cyan); }
.recovery__tile--coral:hover      { color: var(--coral); }
.recovery__tile--cyan-solid:hover { color: var(--cyan-solid); }

/* Weekly schedule grid */
.schedule-scroll {
  overflow-x: auto;
  padding-bottom: 1rem;
}
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(11rem, 1fr));
  gap: 0.75rem;
  min-width: 62rem;
}
.schedule-day {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.schedule-day--today { background: var(--surface-2); padding: 1rem; border-radius: var(--radius-sm); }
.schedule-day__label {
  font-size: 1rem;
  color: rgba(255,255,255,0.2);
  padding-bottom: 0.5rem;
}
.schedule-day__label--today { color: var(--cyan-solid); }
.schedule-session {
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  border-left: 3px solid;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: background-color .2s;
}
.schedule-session:hover { background: var(--surface-4); }
.schedule-session--strength  { border-left-color: var(--cyan); }
.schedule-session--hiit      { border-left-color: var(--coral); }
.schedule-session--recovery  { border-left-color: rgba(255,255,255,0.4); }
.schedule-session__time { font-size: 0.65rem; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; }
.schedule-session__title { font-family: var(--font-head); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; }
.schedule-session__coach { font-size: 0.7rem; color: rgba(255,255,255,0.6); }
.schedule-rest {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
  font-style: italic;
  padding: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ───────────── 12. CLASSES GRID + COACH CARDS ───────────── */
.class-card {
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color .2s, background-color .2s;
}
.class-card:hover { border-color: rgba(105,218,255,0.3); background: var(--surface-4); }
.class-card__when { font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; color: rgba(255,255,255,0.8); }
.class-card__title { font-size: 1.5rem; }
.class-card__coach { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.class-card__footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}
.class-card__capacity { font-size: 0.75rem; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; }

/* Coach cards */
.coach-card {
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius);
  overflow: hidden;
}
.coach-card__media { aspect-ratio: 1; overflow: hidden; }
.coach-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%);
  transition: filter .5s, transform .5s;
}
.coach-card:hover .coach-card__media img { filter: grayscale(0); transform: scale(1.03); }
.coach-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.coach-card__specialty { color: var(--cyan); font-family: var(--font-head); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.coach-card__name { font-size: 1.5rem; }
.coach-card__role { color: rgba(255,255,255,0.6); font-size: 0.8rem; margin-bottom: 0.5rem; }
.coach-card__bio { color: rgba(255,255,255,0.7); font-size: 0.9rem; line-height: 1.6; }

/* ───────────── 13. CONTACT ───────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}
.info-card {
  background: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 2rem;
}
.info-card--cyan { border-top: 3px solid var(--cyan); }
.info-card--coral { border-top: 3px solid var(--coral); }
.info-card__heading {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.info-card__icon { display: inline-flex; color: var(--coral); }
.info-card__rows { display: flex; flex-direction: column; gap: 1.5rem; }
.info-row { display: flex; gap: 1rem; align-items: flex-start; }
.info-row__icon {
  display: inline-flex;
  padding: 0.6rem;
  background: var(--surface-4);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.info-row__label { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 0.25rem; font-family: var(--font-head); font-weight: 700; }
.info-row__value { color: rgba(255,255,255,0.9); font-size: 0.95rem; line-height: 1.5; }
.hours { display: flex; flex-direction: column; gap: 1rem; }
.hours__row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.hours__label { font-family: var(--font-head); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.8); }
.hours__value { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; color: #fff; }
.hours__note { margin-top: 1.5rem; font-size: 0.8rem; font-style: italic; color: rgba(255,255,255,0.5); line-height: 1.5; }

/* Map box */
.map-box {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 24rem;
  display: flex;
  align-items: flex-end;
}
.map-box__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; filter: grayscale(100%); }
.map-box__overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 0%, transparent 60%); }
.map-box__bar {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: flex-end;
  padding: 2rem;
  background: linear-gradient(to top, rgba(14,14,14,0.95), transparent);
}
.map-box__name { font-family: var(--font-head); font-weight: 900; font-size: 1.25rem; margin: 0.25rem 0; }
.map-box__addr { color: rgba(255,255,255,0.7); font-size: 0.85rem; }
.map-box__dir {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  color: #fff;
}
.map-box__dirtext { color: rgba(255,255,255,0.6); font-size: 0.8rem; margin-top: 0.5rem; max-width: 22rem; line-height: 1.5; }