/* Full-frame opening and yellow background lighting. */
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 104px;
  padding-inline: 4.5%;
  background: linear-gradient(180deg, #080808bd, #08080800);
  border: 0;
}
.desktop-nav { gap: 34px; color: #f4f4eb; }
.brand-image { width: 120px; height: 53px; }
.brand-image img { width: 132px; top: -33px; left: -6px; }
.branch { color: #fff; border-color: #ffffff66; }
.hero {
  height: 100svh;
  min-height: 790px;
  max-height: none;
}
.hero-photo {
  background-image:
    linear-gradient(180deg, #08080833 0%, #08080844 23%, #08080866 65%, #080808ec 100%),
    linear-gradient(90deg, #08080842, #08080826 45%, #08080842),
    var(--hero-image);
  background-size: cover;
  background-position: center, center, center 57%;
}
.hero-photo:after { background: radial-gradient(ellipse at 12% 15%, #ffe00022, transparent 47%); }
.hero-content {
  width: 100%;
  padding: 140px 32px 56px;
  position: relative;
  z-index: 2;
}
.hero .eyebrow { margin-bottom: 23px; font-size: 11px; letter-spacing: .25em; }
.hero h1 { font-size: clamp(82px, 8.4vw, 150px); line-height: 1.09; letter-spacing: -.045em; }
.hero h1 .hero-location { font-size: .44em; margin-bottom: 20px; }
.hero h1>span:last-child { font-size: 1.17em; margin-top: 9px; }
.hero-description { margin-top: 27px; font-size: 16px; }
.hero .actions { margin-top: 30px; }
.hero .button { min-width: 192px; min-height: 58px; }
.hero .button.outline { border-color: #ffffff99; background: #08080838; }
.section { position: relative; isolation: isolate; overflow: hidden; }
.section>.container { position: relative; z-index: 1; }
.event-section {
  background: radial-gradient(ellipse 70% 45% at 0% 0%, #ffe0001c, transparent 75%),
    radial-gradient(ellipse 50% 45% at 100% 100%, #ffe0000b, transparent 70%), #0b0b0b;
}
.membership-section {
  background: radial-gradient(ellipse 70% 40% at 100% 24%, #ffe00020, transparent 75%),
    radial-gradient(ellipse 45% 35% at 0% 75%, #ffe0000d, transparent 75%), #080808;
}
.programs-section {
  background: radial-gradient(ellipse 70% 68% at 0% 50%, #ffe00020, transparent 75%), #101010;
}
.facilities-section {
  background: radial-gradient(ellipse 70% 30% at 95% 0%, #ffe0001a, transparent 70%), #080808;
}
.people-section {
  background: radial-gradient(ellipse 65% 38% at 0% 57%, #ffe00015, transparent 75%), #101010;
}
.faq-section { background: radial-gradient(ellipse 60% 80% at 100% 50%, #ffe0000c, transparent 75%), #080808; }
.location-section { background: radial-gradient(ellipse 60% 60% at 0% 100%, #ffe00014, transparent 75%), #111; }
.price-card { background: linear-gradient(145deg, #292715, #131313 65%); }
.program-card { background: linear-gradient(145deg, #1e1e16, #141414 70%); }
.event-number span, .event-number i { letter-spacing: 0; }
.final-cta {
  position: relative;
  overflow: hidden;
  background: var(--yellow);
  color: #080808;
  padding-block: 92px;
}
.final-cta .eyebrow,
.final-cta h2 { color: #080808; }
.final-cta .button { background: #080808; color: var(--yellow); border-color: #080808; }
.final-cta .button:focus-visible { outline-color: #080808; }
.final-cta p:last-child { color: #383100; opacity: 1; }
@media(min-width:1600px) {
  .hero { min-height: 900px; }
  .hero h1 { font-size: clamp(135px, 8.2vw, 174px); }
  .hero .eyebrow { margin-bottom: 28px; }
}
@media(min-width:1001px) and (max-height:820px) {
  .hero { min-height: 720px; }
  .hero-content { padding-top: 112px; padding-bottom: 35px; }
  .hero h1 { font-size: clamp(86px, 7.8vw, 120px); }
  .hero h1 .hero-location { margin-bottom: 14px; }
  .hero-description { margin-top: 22px; }
  .hero .actions { margin-top: 24px; }
}
@media(max-width:1000px) {
  .header { height: 86px; padding-inline: 28px; }
  .mobile-menu { top: 78px; margin: 0 20px; left: 0; right: 0; border: 1px solid #ffe00050; border-radius: 6px; background: #111; }
  .hero { min-height: 820px; }
  .hero-content { padding: 128px 24px 70px; }
  .hero h1 { font-size: clamp(65px, 9.1vw, 94px); }
  .hero h1 .hero-location { font-size: .52em; }
  .hero-description { font-size: 14px; }
}
@media(max-width:640px) {
  .header { height: 78px; padding-inline: 18px; gap: 14px; }
  .brand-image { width: 83px; height: 39px; }
  .brand-image img { width: 93px; top: -24px; left: -5px; }
  .hero { height: 100svh; min-height: 700px; max-height: none; }
  .hero-content { padding: 110px 16px 90px; }
  .hero-photo { background-position: center, center, 55% center; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .15em; margin-bottom: 28px; }
  .hero h1 { font-size: clamp(38px, 10.8vw, 69px); line-height: 1.14; letter-spacing: -.045em; }
  .hero h1 .hero-location { font-size: .6em; margin-bottom: 20px; }
  .hero h1>span:last-child { font-size: 1.35em; margin-top: 13px; }
  .hero-description { font-size: 12px; line-height: 1.9; margin-top: 30px; }
  .hero .actions { margin-top: 30px; gap: 10px; }
  .hero .button { min-width: 0; min-height: 50px; padding: 12px 18px; gap: 20px; }
  .final-cta { padding-block: 70px; }
}
@media(max-width:360px) {
  .hero { min-height: 660px; }
  .hero-content { padding-inline: 12px; }
  .hero .eyebrow { font-size: 7px; }
  .hero h1 { font-size: 10.7vw; }
  .hero-description { font-size: 11px; }
  .hero .button { padding-inline: 14px; gap: 13px; }
}