:root {
  --cyan: #01a8ff;
  --ink: #000;
  --paper: #fff;
  --mist: #dee0ed;
  --muted: #c8c8c8;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: Outfit, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.45;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea { font-family: inherit; }
.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.narrow { width: min(760px, 100%); }
.center { text-align: center; }

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 28px;
  color: #fff;
}
.nav.solid { background: #fff; color: #000; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.logo img { height: 54px; width: auto; }
.nav.solid .logo-light, .nav:not(.solid) .logo-dark { display: none; }
.nav-links { display: flex; gap: 22px; align-items: center; justify-content: center; }
.nav-links > a, .drop-btn {
  background: none; border: 0; color: inherit; cursor: pointer;
  text-decoration: none; font-weight: 700; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
}
.drop { position: relative; }
.drop-panel {
  display: none; position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%); background: #fff; color: #000; min-width: 260px;
  padding: 8px 0; box-shadow: 0 12px 30px rgba(0,0,0,.2);
}
.drop:hover .drop-panel, .drop:focus-within .drop-panel, .drop.open .drop-panel { display: block; }
.drop-panel a { display: block; padding: 10px 18px; text-decoration: none; font-weight: 700; font-size: 14px; }
.drop-panel a:hover { background: #f3f5f8; }
.join-btn {
  justify-self: end; background: var(--mist); color: #111; text-decoration: none;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 13px;
  padding: 12px 18px; transform: skewX(-8deg);
}
.join-btn span { display: inline-block; transform: skewX(8deg); }
.nav.solid .join-btn { background: var(--cyan); color: #fff; }
.burger { display: none; background: none; border: 0; width: 42px; height: 42px; padding: 8px; }
.burger span { display: block; height: 2px; margin: 6px 0; background: currentColor; }

.hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 120px 8vw 80px;
  background: #111 center/cover no-repeat;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 48%, rgba(0,0,0,.15) 100%);
}
.hero-inner { position: relative; z-index: 1; max-width: 920px; }
.kicker { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1, .hero h1 {
  margin: 0;
  font-size: clamp(42px, 5.4vw, 78px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: .95;
  text-transform: uppercase;
}
.subhead { margin: 18px 0 0; max-width: 640px; font-size: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.btn-cyan, .btn-dark, .btn-light, .btn-ghost {
  display: inline-flex; align-items: center; gap: 18px;
  margin-top: 28px; padding: 14px 18px; text-decoration: none;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 14px;
  transform: skewX(-8deg); border: 0; cursor: pointer;
}
.btn-cyan span, .btn-dark span, .btn-light span, .btn-ghost span, .btn-cyan svg { transform: skewX(8deg); }
.btn-cyan { background: var(--cyan); color: #fff; }
.btn-cyan svg { width: 18px; height: 18px; }
.btn-dark { background: #111; color: #fff; }
.btn-light { background: #fff; color: #111; margin-top: 0; }
.btn-ghost { background: transparent; color: #fff; outline: 1px solid #fff; }

.slant {
  background: #fff; color: #000;
  transform: skewY(-1.6deg);
  margin: -36px 0;
  padding: 110px 0 120px;
  position: relative;
  z-index: 2;
}
.slant > * { transform: skewY(1.6deg); }
.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; text-align: center; }
.benefit h2, .steps h3, .amenities h2, .community h2, .map-block h2, .reviews h2, .closing h2, .coach-band h2, .page-copy h2 {
  font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; line-height: 1.05;
}
.benefit { max-width: 360px; margin: 0 auto; }
.benefit h2 { font-size: 28px; margin: 12px 0; }
.benefit p { margin: 0 auto; max-width: 280px; }
.icon { width: 64px; height: 64px; }

.program-band { background: #000; padding: 120px 6vw 90px; }
.program-layout { display: grid; grid-template-columns: minmax(220px, 280px) 1fr 1fr; gap: 28px 32px; align-items: start; }
.program-intro { grid-row: span 2; }
.program-intro h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; margin: 0 0 16px; }
.program-intro p { font-size: 18px; margin: 0 0 8px; }
.program-card { color: #fff; text-decoration: none; display: block; }
.program-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; margin-bottom: 16px; }
.program-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; }
.program-card p { margin: 0 0 12px; color: #ddd; font-size: 15px; }
.card-link { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid #fff; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; }
.steps h2, .slant h2.center { text-align: center; font-size: 36px; margin: 0; }
.num { display: block; font-size: 42px; font-weight: 900; color: var(--cyan); }
.steps h3 { margin: 8px 0; font-size: 20px; text-transform: uppercase; }
.steps p { margin: 0; }

.amenities { padding: 100px 0 80px; }
.amenities h2 { font-size: 34px; margin: 0 0 36px; }
.amenity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.amenity-grid article, .chip { text-align: center; }
.amenity-grid h3, .chip h3 { margin: 10px 0 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }

.community { padding: 40px 0 80px; }
.community-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.community h2 { font-size: 36px; margin-top: 0; }
.community img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; }

.map-block { padding: 20px 0 80px; }
.map-block h2 { font-size: 36px; max-width: 640px; }
.address-line { font-size: 22px; text-transform: uppercase; letter-spacing: -.02em; margin: 8px 0; }
.map-copy { max-width: 640px; color: #ddd; }
.text-link { color: var(--cyan); font-weight: 700; }
.map-frame { margin-top: 24px; height: 420px; background: #111; }
.map-frame iframe { width: 100%; height: 100%; border: 0; }

.reviews { padding: 20px 0 60px; text-align: center; }
.reviews h2 { font-size: 32px; max-width: 760px; margin: 0 auto 20px; }
.callout { padding: 10px 0 70px; text-align: center; }
.call-title { font-size: 28px; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
.call-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.faq { padding: 10px 0 80px; }
.faq h2 { font-size: 36px; text-transform: uppercase; }
details { border-bottom: 1px solid rgba(255,255,255,.25); padding: 14px 0; }
summary { cursor: pointer; font-weight: 700; font-size: 18px; }
details p { color: #ddd; }

.closing {
  background: #fff; color: #000; text-align: center;
  transform: skewY(-1.6deg); padding: 90px 0 100px; margin-top: 20px;
}
.closing .wrap { transform: skewY(1.6deg); }
.closing h2 { font-size: clamp(28px, 4vw, 44px); max-width: 800px; margin: 0 auto; }

.footer { padding: 70px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px; }
.footer h3 { margin: 0 0 12px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.foot-gap { margin-top: 28px; }
.foot-links { display: flex; flex-direction: column; gap: 8px; }
.foot-links a { text-decoration: none; }
.footer-logo { height: 64px; width: auto; margin-bottom: 16px; }
.badge img { height: 42px; width: auto; margin: 8px 0 16px; }
.social { display: flex; gap: 12px; }
.social a { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; }
.social.dark a { color: #111; width: auto; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(255,255,255,.25); margin-top: 36px; padding-top: 16px; }
.footer-bottom p { margin: 0; }

.page-copy { padding: 70px 0 40px; }
.page-copy h2 { font-size: 32px; margin: 28px 0 12px; }
.page-copy h3 { font-size: 20px; text-transform: uppercase; letter-spacing: -.02em; margin: 22px 0 8px; }
.page-copy p, .page-copy li { font-size: 18px; color: #eee; }
.page-copy ul { padding-left: 20px; }
.split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: start; }
.side-photo { width: 100%; object-fit: cover; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 12px 0 8px; }
.price-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: #fff; color: #000; padding: 22px 16px; text-align: center; transform: skewX(-6deg);
}
.price-card strong, .price-card span { transform: skewX(6deg); }
.price-card strong { font-size: 22px; }
.price-card span { color: var(--cyan); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }

.coach-band { padding: 20px 0 70px; }
.coach-band h2 { font-size: 32px; margin-bottom: 24px; }
.coach-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.coach-card { text-decoration: none; color: #fff; }
.coach-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center top; margin-bottom: 10px; }
.role, .credential { margin: 0; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; font-weight: 800; opacity: .75; }
.coach-card h3, .coach-profile h1 { margin: 4px 0; font-size: 22px; text-transform: uppercase; letter-spacing: -.02em; }
.more { color: var(--cyan); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.coach-profile { padding: 140px 0 80px; }
.coach-profile-grid { display: grid; grid-template-columns: 360px 1fr; gap: 48px; align-items: start; }
.coach-profile img { width: 100%; object-fit: cover; }
.coach-profile h1 { font-size: clamp(36px, 5vw, 64px); }
.bio { font-size: 18px; color: #eee; }

.contact-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; }
.contact-aside h3 { text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
.form-frame, .calendar-frame { width: 100%; border: 0; background: #fff; min-height: 760px; }
.calendar-frame { min-height: 900px; }
.public-form label { display: block; margin-top: 16px; font-weight: 700; }
.public-form .help, .help { color: #bbb; font-size: 14px; margin: 4px 0; }
.req { color: var(--cyan); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.public-form input[type="text"], .public-form textarea, .public-form input[type="file"] {
  width: 100%; margin-top: 6px; padding: 12px; background: #111; color: #fff; border: 1px solid #333;
}
.hp { position: absolute; left: -9999px; }
.notice { background: #012433; padding: 12px 14px; border-left: 4px solid var(--cyan); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: -30px; }
.gallery img { height: 220px; width: 100%; object-fit: cover; }
.hours { padding: 10px 0 50px; }
.hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.hours dl { margin: 0; }
.hours dl div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.2); padding: 8px 0; }
.hours dt { font-weight: 700; }
.hours dd { margin: 0; }
.areas { list-style: none; padding: 0; }
.areas li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 10px; }
.feature-row div { background: #111; padding: 16px; text-align: center; }
.feature-row p { margin: 8px 0 0; }
.chip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 24px; }
.filters button {
  background: transparent; color: #fff; border: 1px solid #444; padding: 8px 12px;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 12px; cursor: pointer;
}
.filters button.on { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.recipe-count { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.recipe-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.recipe-list a { text-decoration: none; border-bottom: 1px solid transparent; }
.recipe-list a:hover { border-color: var(--cyan); }
.schedule-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #333; }
th { text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }

@media (max-width: 980px) {
  .nav { grid-template-columns: auto auto; }
  .burger { display: block; justify-self: end; }
  .join-btn { display: none; }
  .nav.open .join-btn { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; color: #000; flex-direction: column; align-items: flex-start;
    padding: 12px 20px 20px; gap: 12px;
  }
  .nav.open .nav-links { display: flex; }
  .drop-panel { position: static; transform: none; box-shadow: none; padding: 0 0 0 10px; }
  .program-layout, .benefit-grid, .steps, .amenity-grid, .community-grid, .footer-grid,
  .split, .coach-grid, .coach-profile-grid, .contact-grid, .hours-grid, .price-grid,
  .feature-row, .chip-grid, .recipe-list, .gallery { grid-template-columns: 1fr; }
  .program-intro { grid-row: auto; }
  .coach-grid { grid-template-columns: 1fr 1fr; }
  .hero { min-height: 78vh; padding: 110px 24px 60px; }
  .wrap { width: min(1180px, calc(100% - 32px)); }
}