@font-face {
  font-family: 'Open Sauce';
  src: url('./OpenSauceSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #750000;
  --dark-red: #500000;
  --black: #0c0c0c;
  --white: #ffffff;
  --off-white: #f5f3f0;
  --bg-color: #fcfbf9;
  --text-color: #0c0c0c;

  --font-logo: 'Open Sauce', sans-serif;
  --font-headline: 'Open Sauce', sans-serif;
  --font-base: 'Open Sauce', sans-serif;
  --font-infrared-body: 'Darker Grotesque', sans-serif;

  --events-background-image: url('./background-smoke.png');
  --faq-background-image: url('./background-red2.jpg');

  --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Navbar height used to offset page content when navbar is fixed */
  --navbar-height: 76px;
  --location-marquee-font-size: clamp(1.4rem, 3.1vw, 2.25rem);
  --location-marquee-padding-block: clamp(0.7rem, 1.6vw, 1.15rem);
  --location-marquee-height: calc(
    var(--location-marquee-font-size) +
    var(--location-marquee-padding-block) +
    var(--location-marquee-padding-block) +
    2px
  );
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-base);
  font-weight: normal;
  /* Body text: Helvetica Neue Regular */
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.5;
  letter-spacing: -0.06em;
  overflow-x: hidden;
  /* offset page content so fixed navbar doesn't cover it */
  padding-top: var(--navbar-height);
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

ul {
  list-style: none;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
  opacity: 0;
}

.delay-1 {
  animation-delay: 0.1s;
}

.delay-2 {
  animation-delay: 0.2s;
}

.delay-3 {
  animation-delay: 0.3s;
}

/* Navbar - Default (Mobile/Desktop shared base)
   Use fixed positioning so the navbar stays in view on scroll.
   Background left transparent by design. */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  box-shadow: none;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo img {
  height: 36px;
  width: auto;
  display: block;
}

/* Toggle logos based on screen size */
.logo-desktop {
  display: none !important;
}

.logo-mobile {
  display: block !important;
}

.nav-links {
  display: none;
  /* Hamburger on mobile */
}

/* Desktop Styles */
@media (min-width: 769px) {
  .logo-desktop {
    display: block !important;
    filter: invert(1);
  }

  .logo-mobile {
    display: none !important;
  }

  .navbar {
    --navbar-height: 154px;
    width: 100%;
    height: var(--navbar-height);
    background: transparent;
    padding: 0;
    box-shadow: none;
    display: block;
  }

  .logo img.logo-desktop {
    height: clamp(3.4rem, 5.2vw, 3.68rem);
  }

  .navbar > .logo {
    position: absolute;
    top: 2rem;
    left: 3.15rem;
  }

  .nav-links {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.78);
    position: absolute;
    top: 3.625rem;
    left: 0;
    width: 100%;
    min-height: 1.836rem;
    margin: 0;
    padding: 0 2.6rem;
    justify-content: space-around;
    border-radius: 0;
    backdrop-filter: blur(6px);
  }

  .nav-actions {
    display: none;
    /* Hidden on desktop now that Join is moved to Hero */
  }

  .nav-links a {
    font-family: var(--font-base);
    font-weight: bold;
    font-size: clamp(0.6868rem, 0.9747vw, 1.2217rem);
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 0px;
    position: relative;
    transition: var(--transition);
    padding: 0 0.75rem;
    white-space: nowrap;
  }

  .nav-dropdown {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  .nav-dropdown-toggle {
    font-family: var(--font-base);
    font-weight: bold;
    font-size: clamp(0.6868rem, 0.9747vw, 1.2217rem);
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 0;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0 1rem;
  }

  .nav-dropdown-toggle::after {
    display: none;
  }

  .nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 9rem;
    padding: 0.5rem 0;
    background-color: rgba(255, 255, 255, 0.78);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition: opacity 0.2s ease, visibility 0.2s;
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu,
  .nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%);
  }

  .nav-dropdown-menu a {
    display: block;
    padding: 0.5rem 1rem;
    text-align: left;
    white-space: nowrap;
  }

  .nav-dropdown-menu a:hover {
    background: var(--off-white);
    opacity: 1;
  }

  .nav-links a,
  .nav-dropdown-toggle {
    transition: var(--transition);
  }

  .nav-links a:hover,
  .nav-dropdown-toggle:hover {
    opacity: 1;
  }

  .nav-links a::after {
    display: none;
  }
}

.btn-primary,
.healcode-pricing-option-text-link {
  background-color: var(--black);
  color: var(--white);
  padding: 0.75rem 2rem;
  font-family: var(--font-base);
  font-weight: bold;
  /* Buttons and pricing: Helvetica Neue Bold */
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  display: inline-block;
  text-decoration: none;
}

.btn-primary:hover,
.healcode-pricing-option-text-link:hover {
  background-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(214, 0, 13, 0.2);
  color: var(--white);
}

/* Optimization for Healcode Widgets */
.healcode-btn-wrapper {
  display: inline-block;
  min-height: 36px;
  min-width: 80px;
  /* 10% reduction from original 100px */
  width: fit-content;
  background-color: var(--black);
  transition: var(--transition);
  position: relative;
}

/* Static placeholder that mirrors the real button */
.healcode-btn-wrapper .healcode-placeholder {
  display: inline-block;
  background-color: var(--black);
  color: var(--white);
  padding: 0.475rem 1.8rem;
  /* 10% less wide than original 2rem */
  font-family: var(--font-base);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0px;
  line-height: normal;
  /* Match the real button line-height better */
  cursor: default;
  user-select: none;
  white-space: nowrap;
}

/* Once real widget link loads, hide the placeholder and clear wrapper bg */
.healcode-btn-wrapper:has(.healcode-pricing-option-text-link) {
  background-color: transparent;
}

.healcode-btn-wrapper:has(.healcode-pricing-option-text-link) .healcode-placeholder {
  display: none;
}

/* Match the real button's hover state for the placeholder */
.healcode-btn-wrapper:not(:has(.healcode-pricing-option-text-link)):hover {
  background-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(214, 0, 13, 0.2);
  cursor: pointer;
}

.healcode-btn-wrapper:not(:has(.healcode-pricing-option-text-link)):hover .healcode-placeholder {
  background-color: var(--red);
}

/* Hero Section */
.hero {
  min-height: calc(100dvh - var(--location-marquee-height));
  background: url('./hero-background.jpg') center top/cover no-repeat;
  background-position: center top;
  position: relative;
  overflow: hidden;
  /* Pull the hero up so its background starts at the very top of the page
     while preserving content spacing by adding the navbar height to padding */
  margin-top: calc(-1 * var(--navbar-height));
  padding: 0;
  background-color: #1c1c1c;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(18, 0, 0, 0.13) 0%, transparent 42%, rgba(18, 0, 0, 0.04) 100%);
}

.hero-content {
  position: absolute;
  z-index: 1;
  top: 36%;
  left: 6.25%;
}

.hero-title {
  line-height: 1;
}

.hero-lockup {
  display: block;
  position: relative;
  width: min(57vw, 58rem);
  max-width: calc(100vw - 12.5vw);
}

.hero-wordmark {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.hero-trademark {
  position: absolute;
  top: 54.5%;
  right: -0.35rem;
  color: var(--white);
  font-family: var(--font-base);
  font-size: clamp(0.44rem, 0.88vw, 0.8rem);
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0;
}

.hero-tagline {
  position: absolute;
  z-index: 1;
  right: 3.35%;
  bottom: 8.4%;
  max-width: 35rem;
  color: var(--white);
  font-family: var(--font-headline);
  font-size: clamp(1.445rem, 1.7425vw, 2.04rem);
  font-weight: bold;
  line-height: 0.88;
  letter-spacing: -0.075em;
  text-align: right;
  text-transform: uppercase;
}

/* Studio Locations Marquee */
@keyframes location-marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}

.location-marquee {
  height: var(--location-marquee-height);
  display: flex;
  align-items: center;
  padding-block: var(--location-marquee-padding-block);
  overflow: hidden;
  background: var(--white);
  color: var(--black);
  border-block: 1px solid rgba(12, 12, 12, 0.08);
}

.location-marquee__track {
  display: flex;
  width: max-content;
  min-width: max-content;
  animation: location-marquee-scroll 44s linear infinite;
  will-change: transform;
}

.location-marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  min-width: 100vw;
}

.location-marquee__group span {
  --location-marquee-space: clamp(2.75rem, 4.5vw, 6rem);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--location-marquee-space);
  margin-right: var(--location-marquee-space);
  font-family: var(--font-headline);
  font-size: var(--location-marquee-font-size);
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.location-marquee__group span::after {
  content: '\2022';
  font-size: 0.55em;
}

.location-marquee:hover .location-marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .location-marquee__track {
    animation: none;
    transform: none;
  }

  .location-marquee__group:nth-child(2) {
    display: none;
  }
}

/* Intro Section */
.intro {
  display: flex;
  min-height: clamp(42rem, 64.7vw, 82rem);
  background-color: var(--off-white);
}

.intro-text {
  flex: 1 1 57.85%;
  display: flex;
  flex-direction: column;
  padding: clamp(6rem, 10.75vw, 13.75rem) clamp(2.5rem, 3.45vw, 4.4rem) clamp(6.5rem, 12vw, 15.25rem);
  position: relative;
  color: var(--black);
  background: var(--events-background-image) center / cover no-repeat;
}

.intro-headline-group {
  display: flex;
  flex-direction: column;
}

.intro-headline {
  font-family: var(--font-headline);
  font-size: clamp(2.6325rem, 4.131vw, 5.265rem);
  line-height: 0.87;
  letter-spacing: -0.075em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-weight: bold;
}

.intro-subheadline {
  font-family: var(--font-headline);
  font-size: clamp(2.6325rem, 4.131vw, 5.265rem);
  line-height: 0.88;
  letter-spacing: -0.075em;
  text-transform: uppercase;
  margin-left: 21.5%;
  font-weight: bold;
}

.intro-description {
  align-self: flex-end;
  max-width: clamp(20.5rem, 28vw, 35rem);
  margin-top: clamp(3rem, 5.5vw, 4rem);
  text-align: right;
}

.intro-description p {
  font-family: var(--font-base);
  font-size: clamp(0.85rem, 1.32vw, 1.1rem);
  line-height: 1.25;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: -0.055em;
}

.intro-footer {
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 5.2vw, 3.75rem);
}

.btn-black {
  background-color: var(--black);
  color: var(--white);
  min-width: 9.78rem;
  padding: 0.384rem 1.2rem;
  font-family: var(--font-base);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.936rem;
  line-height: 1.15;
  text-align: center;
  transition: var(--transition);
  border: none;
  cursor: pointer;
}

.btn-black:hover {
  background-color: var(--red);
  transform: translateY(-2px);
}

.intro-image {
  flex: 0 0 42.15%;
  order: -1;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  background: var(--white);
}

.intro-image::before {
  content: '';
  flex: 1 1 auto;
  background: url('./reception.jpg') center/cover no-repeat;
}

.movements-header {
  position: relative;
  z-index: 4;
  width: 100%;
  min-height: 4.2rem;
  margin-top: 0;
  display: flex;
  align-items: center;
  background: inherit;
}

.movements-header h2 {
  width: 42.15%;
  padding: 0.4rem 1.15rem 0;
  color: #9d0000;
  font-family: var(--font-headline);
  font-size: clamp(1.3005rem, 1.5682vw, 1.836rem);
  font-weight: bold;
  line-height: 0.88;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.movements-section {
  display: flow-root;
  margin: 0;
  background: var(--white);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .intro {
    flex-direction: column;
    min-height: auto;
  }

  .intro-text {
    padding: 4rem 2rem;
    min-height: 36rem;
  }

  .intro-subheadline {
    margin-left: 0;
  }

  .intro-description {
    text-align: left;
    margin-top: 2rem;
    max-width: 100%;
  }

  .intro-footer {
    margin-top: 3rem;
  }

  .intro-image {
    flex-basis: auto;
    min-height: 34rem;
  }

  .intro-image::before {
    min-height: 29rem;
  }

  .movements-header {
    width: 100%;
    min-height: 5rem;
    margin-top: 0;
  }

  .movements-header h2 {
    width: 100%;
    font-size: 1.215rem;
  }
}

/* Events page */
.events-body {
  background: var(--off-white);
}

.events-surface {
  background: var(--events-background-image) center / cover no-repeat;
}

@media (min-width: 769px) {
  .events-body .logo-desktop {
    filter: none;
  }
}

.events-page {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 60%);
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
  margin-top: calc(-1 * var(--navbar-height));
  padding: calc(var(--navbar-height) + clamp(2.5rem, 3.5vw, 4.5rem) + 60px) clamp(2rem, 3vw, 4rem) clamp(2rem, 3vw, 3.5rem);
  overflow: hidden;
  color: #740d00;
  background: transparent;
}

.events-title {
  align-self: center;
  grid-column: 1;
  grid-row: 1;
  margin-top: clamp(8rem, 15vw, 18rem);
  font-family: var(--font-headline);
  font-size: clamp(4.05rem, 5.994vw, 7.29rem);
  font-weight: bold;
  line-height: 0.82;
  letter-spacing: -0.085em;
  text-transform: uppercase;
}

.events-gallery {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.25vw, 1.5rem);
  align-self: start;
}

.events-gallery-item {
  aspect-ratio: 0.89;
  overflow: hidden;
}

.events-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .events-gallery-item:hover img {
    transform: scale(1.05);
  }
}

.events-copy {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  max-width: 48rem;
  padding: clamp(3rem, 5vw, 6rem) 3rem 0 0;
  color: var(--white);
  font-family: var(--font-base);
  font-size: clamp(1.125rem, 1.395vw, 1.665rem);
  font-weight: bold;
  line-height: 1.34;
  letter-spacing: -0.06em;
}

.events-copy p + p {
  margin-top: 0.15rem;
}

.events-copy a {
  display: inline-block;
  margin-top: clamp(1.5rem, 2.5vw, 3rem);
  color: #8c1607;
  font-size: 1.08em;
  transition: opacity 0.2s ease;
}

.events-copy a:hover,
.events-cta:hover {
  opacity: 1;
}

.events-cta {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  margin-top: clamp(3rem, 7vw, 8rem);
  color: #821404;
  font-family: var(--font-headline);
  font-size: clamp(1.62rem, 2.025vw, 2.43rem);
  font-weight: bold;
  line-height: 0.95;
  letter-spacing: -0.07em;
  text-align: right;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.brand-carousel.events-brand-carousel {
  margin: 0;
  padding-top: 2rem;
  background: transparent;
}

.brand-carousel.events-brand-carousel::before,
.brand-carousel.events-brand-carousel::after {
  display: none;
}

/* New to the BRRN / FAQ page */
.faq-body {
  background: #8b0007;
}

.faq-page {
  display: grid;
  grid-template-columns: 43% 57%;
  min-height: 100dvh;
  margin-top: calc(-1 * var(--navbar-height));
  padding: calc(var(--navbar-height) + clamp(4rem, 5vw, 6rem) + 60px) clamp(3rem, 5.75vw, 7rem) clamp(5rem, 7vw, 8rem);
  color: var(--white);
  background: var(--faq-background-image) center / cover no-repeat;
}

.faq-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: clamp(3rem, 5vw, 6rem) 3rem 1.5rem 0;
  overflow: hidden;
}

.faq-intro h1 {
  font-family: var(--font-headline);
  font-size: clamp(3.24rem, 4.3335vw, 5.265rem);
  font-weight: bold;
  line-height: 0.85;
  letter-spacing: -0.08em;
  text-align: right;
  text-transform: uppercase;
  overflow: hidden;
  transform: translateX(-10px);
}

.faq-title-line,
.faq-title-brrn {
  display: block;
  white-space: nowrap;
}

.faq-title-brrn {
  transform: translateX(-5px);
}

.faq-intro > p {
  max-width: 29rem;
  font-family: var(--font-headline);
  font-size: clamp(1.8rem, 2.385vw, 2.88rem);
  font-weight: bold;
  line-height: 0.88;
  letter-spacing: -0.075em;
  text-transform: uppercase;
}

.faq-list {
  display: grid;
  align-content: center;
  width: 72%;
  justify-self: end;
  gap: clamp(2rem, 2.7vw, 3.4rem);
}

.faq-item {
  display: block;
}

.faq-summary {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
  color: var(--white);
  cursor: pointer;
  list-style: none;
  transition: color 0.22s ease;
}

.faq-summary::-webkit-details-marker {
  display: none;
}

.faq-summary::marker {
  content: '';
}

.faq-summary:hover,
.faq-summary:focus-visible {
  color: #c3c6c8;
}

.faq-summary:hover .faq-plus,
.faq-summary:hover .faq-heading,
.faq-summary:focus-visible .faq-plus,
.faq-summary:focus-visible .faq-heading {
  color: #c3c6c8;
  background: linear-gradient(
    105deg,
    #74787b 0%,
    #d5d7d8 18%,
    #ffffff 31%,
    #979b9e 47%,
    #f4f5f5 63%,
    #777b7e 81%,
    #d8dadb 100%
  );
  background-size: 240% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: faq-metallic-sheen 4.05s ease-in-out infinite alternate;
}

@keyframes faq-metallic-sheen {
  from {
    background-position: 100% 50%;
  }

  to {
    background-position: 0% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-summary:hover .faq-plus,
  .faq-summary:hover .faq-heading,
  .faq-summary:focus-visible .faq-plus,
  .faq-summary:focus-visible .faq-heading {
    animation: none;
    background-position: 50% 50%;
  }
}

.faq-summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.4rem;
}

.faq-plus {
  font-family: Arial, sans-serif;
  font-size: 2.07rem;
  font-weight: 400;
  line-height: 0.8;
  transform-origin: center;
  transition: transform 0.22s ease;
}

.faq-item[open] .faq-plus {
  transform: rotate(45deg);
}

.faq-heading {
  font-family: var(--font-headline);
  font-size: clamp(1.296rem, 1.5795vw, 1.9035rem);
  font-weight: bold;
  line-height: 0.9;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.faq-answer {
  margin-left: 3.1rem;
  padding-top: 0.65rem;
  animation: faq-answer-reveal 0.24s ease both;
}

@keyframes faq-answer-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.35rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-item p {
  max-width: 58rem;
  font-family: var(--font-base);
  font-size: clamp(0.9rem, 1.125vw, 1.35rem);
  font-weight: bold;
  line-height: 1.06;
  letter-spacing: -0.055em;
}

.faq-item p + p {
  margin-top: 0.85rem;
}

.faq-item small {
  font-size: 0.7em;
  font-style: italic;
}

.events-page a:focus-visible,
.faq-page a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}

@media (max-width: 900px) {
  .events-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: calc(var(--navbar-height) + 3.5rem + 60px) 1.25rem 3rem;
  }

  .events-title,
  .events-gallery,
  .events-copy,
  .events-cta {
    grid-column: 1;
    grid-row: auto;
  }

  .events-title {
    margin: 0 0 2.5rem;
  }

  .events-gallery {
    overflow-x: auto;
    grid-template-columns: repeat(3, minmax(14rem, 75vw));
    padding-bottom: 0.75rem;
  }

  .events-copy {
    padding: 3rem 0 0;
  }

  .events-cta {
    justify-self: start;
    margin-top: 3.5rem;
    text-align: left;
  }

  .faq-page {
    grid-template-columns: 1fr;
    padding: calc(var(--navbar-height) + 4rem + 60px) 1.5rem 5rem;
  }

  .faq-intro {
    gap: 6rem;
    padding: 0 0 5rem;
  }

  .faq-intro h1 {
    font-size: clamp(2.754rem, 3.6837vw, 4.4757rem);
    text-align: right;
  }

  .faq-title-brrn {
    transform: translateX(-5px);
  }

  .faq-list {
    width: 100%;
    justify-self: stretch;
    gap: 2.75rem;
  }
}

@media (max-width: 520px) {
  .events-gallery {
    grid-template-columns: repeat(3, 76vw);
  }

  .faq-item {
    display: block;
  }

  .faq-summary {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.6rem;
  }

  .faq-plus {
    font-size: 1.62rem;
  }

  .faq-answer {
    margin-left: 2.1rem;
  }
}

/* Split Section */
.split-section {
  display: flex;
  height: clamp(32rem, 43.3vw, 55rem);
}

.split-item {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 1.3rem 1.15rem;
  text-decoration: none;
}

.split-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #222;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}

.split-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 50%);
  z-index: 2;
  transition: opacity 0.3s;
}

.split-item:hover .split-bg {
  transform: scale(1.05);
}

.split-item:hover::after {
  opacity: 0.8;
}

.split-title {
  font-family: var(--font-headline);
  font-stretch: condensed;
  font-weight: bold;
  color: var(--white);
  font-size: clamp(2.43rem, 4.05vw, 5.184rem);
  line-height: 0.9;
  letter-spacing: -0.065em;
  width: 100%;
  text-align: left;
  z-index: 3;
  position: relative;
}

.split-sub {
  font-family: var(--font-base);
  font-weight: bold;
  text-transform: uppercase;
  color: var(--white);
  font-size: clamp(0.585rem, 0.9vw, 0.72rem);
  letter-spacing: -0.045em;
  z-index: 3;
  position: relative;
  margin-top: 0.4rem;
  width: 100%;
  text-align: left;
}

/* Why Infrared Home Section */
.why-infrared-home {
  padding: clamp(3rem, 2.9vw, 3.5rem) clamp(2rem, 3.75vw, 4.4rem);
  background-color: var(--off-white);
  color: var(--black);
}

.why-home-header,
.why-home-content {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(26rem, 1fr);
  column-gap: clamp(6rem, 11vw, 14rem);
}

.why-home-header {
  min-height: 8.5rem;
  align-items: start;
}

.why-home-title {
  font-family: var(--font-headline);
  align-self: start;
  font-size: clamp(3.61467rem, 4.8195vw, 5.68017rem);
  line-height: 0.88;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  font-weight: bold;
}

.why-home-kicker {
  max-width: 31rem;
  margin-top: 0;
  color: #9d0000;
  font-family: var(--font-headline);
  font-size: clamp(1.3005rem, 1.56825vw, 1.836rem);
  font-weight: bold;
  line-height: 0.86;
  letter-spacing: -0.075em;
  text-align: right;
  text-transform: uppercase;
  justify-self: end;
  transform: translateX(-clamp(1rem, 2vw, 2.5rem));
}

.why-home-content {
  align-items: start;
  margin-top: 3rem;
}

.why-home-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1.8 / 1;
  overflow: hidden;
  background: #650000;
}

.why-home-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.72) saturate(1.2);
}

.why-home-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(30, 0, 0, 0.24), transparent 64%);
  pointer-events: none;
}

.why-home-media figcaption {
  position: absolute;
  z-index: 1;
  top: 45%;
  left: 27.5%;
  color: var(--white);
  font-family: var(--font-headline);
  font-size: clamp(1.35rem, 1.7vw, 2rem);
  font-weight: bold;
  line-height: 0.95;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.why-home-list {
  display: grid;
  gap: clamp(2.3rem, 2.8vw, 3.3rem);
}

.why-home-item {
  display: block;
}

.why-home-summary {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  color: var(--black);
  cursor: pointer;
  list-style: none;
}

.why-home-summary::-webkit-details-marker {
  display: none;
}

.why-home-summary::marker {
  content: '';
}

.why-home-summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.4rem;
}

.why-home-plus {
  font-family: Arial, sans-serif;
  font-size: 2.07rem;
  font-weight: 400;
  line-height: 0.8;
  transform-origin: center;
  transition: transform 0.22s ease;
}

.why-home-item[open] .why-home-plus {
  transform: rotate(45deg);
}

.why-home-answer {
  margin-left: 3rem;
  padding-top: 0.35rem;
  animation: faq-answer-reveal 0.24s ease both;
}

.why-home-subtitle {
  font-family: var(--font-headline);
  font-size: clamp(1.53rem, 1.845vw, 2.16rem);
  line-height: 0.9;
  letter-spacing: -0.075em;
  text-transform: uppercase;
  font-weight: bold;
}

.why-home-text {
  font-family: var(--font-base);
  max-width: 35rem;
  font-size: clamp(1rem, 1.2vw, 1.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: -0.06em;
}

@media (max-width: 1024px) {
  .why-home-header,
  .why-home-content {
    grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 1fr);
    column-gap: 4rem;
  }

  .why-home-header {
    min-height: 8.5rem;
  }
}

@media (max-width: 768px) {
  .why-infrared-home {
    padding: 4rem 1.5rem;
  }

  .why-home-header,
  .why-home-content {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .why-home-header {
    min-height: 0;
  }

  .why-home-title {
    font-size: clamp(2.601rem, 12.35475vw, 3.9015rem);
  }

  .why-home-kicker {
    margin-top: 2.5rem;
    text-align: left;
    justify-self: start;
    transform: none;
  }

  .why-home-content {
    margin-top: 3.5rem;
    row-gap: 3.5rem;
  }

  .why-home-media figcaption {
    top: 42%;
    left: 8%;
    font-size: 1.2rem;
  }

  .why-home-list {
    gap: 2.75rem;
  }

  .why-home-summary {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: 0.6rem;
  }

  .why-home-plus {
    font-size: 1.62rem;
  }

  .why-home-answer {
    margin-left: 2.1rem;
  }
}

/* Instagram Section */
.instagram-section {
  position: relative;
  height: clamp(420px, 30vw, 520px);
  min-height: 0;
  background-color: var(--bg-color);
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.instagram-bg-text {
  position: absolute;
  top: 20%;
  /* Shifted upward ~10% from original 30% */
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-headline);
  font-stretch: condensed;
  font-size: clamp(4.8rem, 14.4vw, 16rem);
  /* Reduced by 20% from original */
  font-weight: bold;
  color: var(--black);
  white-space: nowrap;
  letter-spacing: -2px;
  z-index: 1;
  pointer-events: none;
  line-height: 1;
}

.instagram-carousel-wrapper {
  /* Position overlayed on top of the section so it can be precisely
     positioned to cover part of the heading. JS will set top/height
     to keep it covering ~35% of the heading's height. */
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transition: top 220ms ease;
}

.instagram-track {
  display: flex;
  gap: 1.5vw;
  width: max-content;
}

.instagram-post {
  position: relative;
  width: 18vw;
  aspect-ratio: 4/5;
  background-color: #222;
  overflow: hidden;
  transition: transform 0.4s ease;
  display: block;
}

.instagram-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.instagram-post:hover {
  transform: scale(1.03);
}

.instagram-post:hover img {
  opacity: 1;
  transform: scale(1.05);
}

.instagram-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>') no-repeat center/contain;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.3s;
}

.instagram-post:hover .instagram-icon {
  opacity: 1;
}

/* Make brand carousel and its contents non-interactable */
.brand-carousel,
.brand-carousel-track,
.brand-carousel * {
  pointer-events: none;
}

@media (max-width: 1024px) {
  .instagram-post {
    width: 25vw;
  }

  .instagram-bg-text {
    font-size: 16vw;
    /* Reduced by 20% from 20vw */
  }
}

@media (min-width: 769px) {
  .instagram-bg-text {
    top: calc(20% + 10px);
  }
}

@media (max-width: 768px) {
  .instagram-section {
    height: 265px;
    min-height: 0;
    padding: 0;
  }

  .instagram-post {
    width: 35vw;
  }

  .instagram-bg-text {
    font-size: 16.8vw;
    /* Reduced by 25% from 22.4vw */
    top: 30%;
    /* Move down a bit to match desktop appearance */
  }
}

/* Major page sections connect edge-to-edge. */
section + section,
.hero + .intro,
.hero + .instagram-section,
.intro + .instagram-section,
.split-section + .instagram-section {
  margin-top: 0;
}

/* Brand Carousel */
@keyframes slide-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes slide-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.brand-carousel {
  background-color: var(--bg-color);
  padding: 3rem 0;
  overflow: hidden;
  position: relative;
}

.brand-carousel.home-magazine-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -1px;
  padding-block: 2.25rem;
  background-color: var(--bg-color);
}

/* Edge fade masks */
.brand-carousel::before,
.brand-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.brand-carousel::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-color), transparent);
}

.brand-carousel::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-color), transparent);
}

.brand-carousel-track {
  display: flex;
  align-items: center;
  gap: 5rem;
  width: max-content;
  will-change: transform;
  animation: slide-left 70s linear infinite;
}

.brand-carousel-track--reverse {
  animation: slide-right 220s linear infinite;
}

.brand-carousel-track img {
  height: 40px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.4s ease;
}

.brand-carousel-track img:hover {
  /* Disabled hover effect for uninteractable brand carousel */
  filter: grayscale(100%) brightness(100%);
  opacity: 0.6;
  transform: none;
}

/* Customer Reviews */
.reviews-section {
  display: grid;
  grid-template-columns: minmax(15rem, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
  padding: clamp(2.75rem, 4vw, 4.5rem) clamp(1.5rem, 7vw, 8.5rem);
  background: var(--bg-color);
  color: var(--black);
  border-top: 1px solid rgba(12, 12, 12, 0.08);
}

.reviews-section__intro {
  padding-top: 0.35rem;
}

.reviews-section__eyebrow {
  color: #8d2424;
  font-family: var(--font-base);
  font-size: clamp(0.62rem, 0.78vw, 0.88rem);
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.reviews-section h2 {
  margin-top: 0.8rem;
  font-family: var(--font-headline);
  font-size: clamp(2.8rem, 4.65vw, 5.6rem);
  font-weight: bold;
  line-height: 0.84;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}

.reviews-section__note {
  max-width: 16rem;
  margin-top: clamp(1.75rem, 3vw, 3.5rem);
  font-family: var(--font-base);
  font-size: clamp(0.72rem, 0.95vw, 1.08rem);
  font-weight: bold;
  line-height: 0.98;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.reviews-section__widget {
  min-width: 0;
  padding-left: clamp(1.5rem, 4vw, 5rem);
  border-left: 1px solid rgba(12, 12, 12, 0.16);
}

.reviews-section__widget [data-fred-widget-reviews] {
  width: 100%;
  min-width: 0;
}

.reviews-section__widget iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0;
}

@media (max-width: 900px) {
  .reviews-section {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 3rem 1.5rem 3.5rem;
  }

  .reviews-section__note {
    margin-top: 1.5rem;
  }

  .reviews-section__widget {
    padding-top: 1.25rem;
    padding-left: 0;
    border-top: 1px solid rgba(12, 12, 12, 0.16);
    border-left: 0;
  }
}

@media (max-width: 520px) {
  .reviews-section h2 {
    font-size: clamp(2.65rem, 14vw, 3.9rem);
  }
}

@media (max-width: 768px) {
  .brand-carousel-track {
    gap: 4rem;
  }

  .brand-carousel-track img {
    height: 32px;
  }

  .brand-carousel.home-magazine-carousel {
    padding-block: 1.8rem;
  }

  .brand-carousel.events-brand-carousel {
    padding-block: 1.6rem 2.4rem;
  }
}

/* Footer Section */
.footer-main {
  background-color: var(--black);
  color: var(--white);
  padding: 6rem 4rem;
  text-align: left;
}

.footer-info h3 {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: 1.35rem;
  margin-bottom: 2rem;
}

/* Policies page styles (matches reference image) */
.policies-hero {
  background: var(--black);
  padding: 3rem 2rem 1rem; /* reduced vertical padding to decrease gap */
}

.house-rules {
  font-family: var(--font-base);
  font-weight: bold;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: -1px;
  margin: 0;
  font-size: 3.6rem; /* match other pages */
  line-height: 0.95;
  padding-left: 0;
  text-align: center;
}

.policies-section {
  background: var(--black);
  color: var(--white);
  padding: 1.5rem 2rem 4rem; /* reduced top padding to halve space between header and rules */
}

.policies-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem 0; /* reduce inner top padding */
  text-align: left;
}

.policies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem 6rem;
  align-items: start;
}

.policy-block h3 {
  font-family: var(--font-headline);
  font-weight: bold;
  font-size: 1.44rem;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  letter-spacing: -0.5px;
  padding-left: 20px; /* shift headings right to match body text */
}

.policy-block p {
  font-family: var(--font-base);
  font-weight: bold;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.05;
  font-size: 1.05rem; /* slightly larger body text */
  margin-bottom: 1.2rem;
  letter-spacing: -0.02em;
  padding-left: 20px; /* shift body text to the right */
}

.policy-block {
  text-align: left;
}

.policies-footnotes {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 4.5rem;
}

.footnote-left {
  font-size: 0.67rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  line-height: 1.1;
}

.footnote-right {
  font-size: 0.82rem;
  color: var(--white);
  text-transform: uppercase;
  font-weight: bold;
}

@media (max-width: 1024px) {
  .policies-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 3rem;
  }

  .house-rules {
    font-size: clamp(2.16rem, 9vw, 4.68rem);
    padding-left: 0;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .policies-grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .policies-inner {
    padding: 1.5rem 1.5rem 0;
  }

  .house-rules {
    text-align: left;
    padding-left: 1.25rem;
    font-size: clamp(1.8rem, 12.6vw, 3.6rem);
  }

  .policies-footnotes {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .footnote-right {
    align-self: flex-end;
  }
}

.footer-phone {
  font-size: 1.25em;
  margin-bottom: 1rem;
}

.footer-socials {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}

.btn-social {
  background-color: var(--white);
  color: var(--black);
  padding: 0.5rem 1.5rem;
  font-family: var(--font-base);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.75rem;
  border: 1px solid var(--white);
  cursor: pointer;
  transition: var(--transition);
  display: inline-block;
  text-align: center;
}

.btn-social:hover {
  background-color: transparent;
  color: var(--white);
  transform: translateY(-2px);
}

.newsletter-signup {
  margin-top: 2rem;
  display: flex;
  gap: 0;
  max-width: 450px;
}

.newsletter-signup input[type="email"] {
  background-color: transparent;
  border: 1px solid var(--white);
  color: var(--white);
  padding: 0.5rem 1rem;
  font-family: var(--font-base);
  font-size: 0.8rem;
  text-transform: uppercase;
  width: 100%;
  outline: none;
  font-weight: bold;
  letter-spacing: 1px;
}

.newsletter-signup input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Mindbody Register Button Styling */
.healcode-register-text-link {
  background-color: var(--white) !important;
  color: var(--black) !important;
  padding: 0.65rem 1.5rem !important;
  /* Slightly more padding to match input height */
  font-family: var(--font-base) !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  font-size: 0.8rem !important;
  border: 1px solid var(--white) !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  display: inline-block !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.healcode-register-text-link:hover {
  background-color: transparent !important;
  color: var(--white) !important;
}

@media (max-width: 768px) {
  .newsletter-signup {
    flex-direction: column;
    max-width: 100%;
  }

  .newsletter-signup input[type="email"] {
    border-bottom: none;
  }
}

.footer-simple {
  background-color: var(--black);
  color: var(--white);
  padding: 2rem 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-base);
  font-size: 0.41rem;
  text-transform: uppercase;
  letter-spacing: 0px;
}

/* Home footer */
.footer-main.footer-home {
  padding: 0;
  background: var(--off-white);
  color: var(--black);
  text-align: left;
  border-top: 0;
}

.footer-contact {
  display: grid;
  grid-template-columns: 43% 57%;
  min-height: 0;
  padding: 0 clamp(3rem, 7vw, 8.5rem) 2.5rem;
  background: var(--off-white);
}

.footer-locations {
  padding-top: clamp(3rem, 4vw, 4.5rem);
}

.footer-socials {
  display: flex;
  gap: 0.3rem;
  margin-top: 0;
  margin-bottom: 1.225rem;
}

.footer-socials a {
  display: block;
  width: 2.03rem;
  height: 2.03rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.footer-socials svg {
  width: 100%;
  height: 100%;
}

.footer-socials a:hover {
  color: #c3c6c8;
  transform: translateY(-2px);
}

.footer-socials a:focus-visible,
.footer-home a:focus-visible {
  outline: 3px solid #c3c6c8;
  outline-offset: 4px;
}

.footer-location-list {
  display: grid;
  gap: 1.4rem;
}

.footer-location h3 {
  margin-bottom: 0.63rem;
  font-family: var(--font-headline);
  font-size: clamp(0.9162rem, 1.0773vw, 1.2663rem);
  line-height: 0.9;
  letter-spacing: -0.075em;
  text-transform: uppercase;
}

.footer-location p {
  font-family: var(--font-base);
  font-size: clamp(0.659rem, 0.826vw, 0.958rem);
  font-weight: bold;
  line-height: 1.28;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.footer-location-address {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem;
  align-items: start;
  font-family: var(--font-base);
  font-size: clamp(0.659rem, 0.826vw, 0.958rem);
  font-weight: bold;
  line-height: 1.28;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.footer-location-toggle {
  display: inline-flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

.footer-location-toggle-text {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.footer-location-toggle:focus-visible {
  outline: 3px solid #c3c6c8;
  outline-offset: 4px;
}

.footer-location-toggle-icon {
  display: inline-block;
  flex: none;
  font-family: Arial, sans-serif;
  font-size: 1.62em;
  font-weight: normal;
  line-height: 0.7;
  letter-spacing: 0;
  text-decoration: none;
  text-align: center;
}

.footer-location-toggle-icon::before {
  content: '+';
}

.footer-location-toggle[aria-expanded="true"] .footer-location-toggle-icon::before {
  content: '-';
}

.footer-map-panel {
  width: min(100%, 36rem);
  max-height: 0;
  margin-top: 0;
  padding: 0;
  background: #e8e5e0;
  box-shadow: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-0.35rem);
  transition:
    max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.45s;
}

.footer-map-panel.is-open {
  max-height: 26rem;
  margin-top: 0.9rem;
  padding: 0.7rem;
  box-shadow: 0 0.8rem 1.8rem rgba(12, 12, 12, 0.12);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.footer-map-panel[hidden] {
  display: none;
}

.footer-map-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #d6d2cc;
}

.footer-map {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.footer-map-external {
  display: inline-flex;
  margin-top: 0.65rem;
  font-family: var(--font-base);
  font-size: clamp(0.55rem, 0.68vw, 0.78rem);
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
  .footer-map-panel,
  .footer-map-panel.is-open {
    transition-duration: 0.01ms;
  }
}

.footer-enquiries {
  padding-top: 3rem;
}

.footer-enquiries-heading {
  text-align: right;
}

.footer-enquiries-heading h2 {
  font-family: var(--font-headline);
  font-size: clamp(1.9935rem, 2.5317vw, 2.9628rem);
  line-height: 0.85;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}

.footer-enquiries-heading p {
  margin-top: 0.525rem;
  font-family: var(--font-base);
  font-size: clamp(0.928rem, 1.138vw, 1.317rem);
  font-weight: bold;
  line-height: 0.95;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}

.footer-enquiry-list {
  display: grid;
  gap: 1.225rem;
  margin-top: 1.575rem;
}

.footer-enquiry-row {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(16rem, 0.9fr);
  gap: 1.4rem;
  align-items: center;
  text-align: right;
}

.footer-enquiry-row p,
.footer-enquiry-row a {
  font-family: var(--font-base);
  font-size: clamp(0.629rem, 0.748vw, 0.868rem);
  font-weight: bold;
  line-height: 0.95;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.footer-brand-band {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  min-height: 0;
  padding: 1.5rem 3.25rem;
  background: var(--black);
  color: var(--white);
}

.footer-legal {
  display: grid;
  justify-self: start;
  gap: 0.49rem;
  font-family: var(--font-base);
  font-size: clamp(0.689rem, 0.868vw, 1.018rem);
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.065em;
}

@media (min-width: 901px) {
  .footer-legal {
    transform: translateY(-0.5rem);
  }
}

.footer-brand-logo {
  width: clamp(7.2rem, 8.55vw, 10.35rem);
  justify-self: center;
  filter: invert(1);
}

.footer-app-link {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0.35rem;
  font-family: var(--font-base);
  font-size: clamp(0.748rem, 0.958vw, 1.107rem);
  font-weight: bold;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

.footer-app-icon {
  display: grid;
  place-items: center;
  width: 1.726rem;
  height: 1.726rem;
  flex: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.footer-app-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.footer-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  min-height: 2.818rem;
  padding: 0 0.805rem;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-base);
  font-size: clamp(8.855px, 0.602vw, 11.385px);
  font-weight: bold;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.footer-meta > :nth-child(2) {
  justify-self: center;
  text-decoration: underline;
}

.footer-meta > :last-child {
  justify-self: end;
}

@media (max-width: 900px) {
  .footer-contact {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 3rem;
    padding: 3rem 1.5rem 3.5rem;
  }

  .footer-locations,
  .footer-enquiries {
    padding-top: 0;
  }

  .footer-enquiries-heading {
    text-align: left;
  }

  .footer-enquiry-row {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    text-align: left;
  }

  .footer-brand-band {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
  }

  .footer-legal,
  .footer-brand-logo,
  .footer-app-link {
    justify-self: center;
  }

  .footer-meta {
    grid-template-columns: 1fr;
    gap: 0.863rem;
    padding: 1.438rem;
    font-size: clamp(8.05px, 0.547vw, 10.35px);
    text-align: center;
  }

  .footer-meta > *,
  .footer-meta > :nth-child(2),
  .footer-meta > :last-child {
    justify-self: center;
  }
}

/* Internal Pages Layout */
.page-header {
  /* Pull page headers to the very top of the viewport (behind transparent navbar)
     and compensate with extra padding so content keeps its visual spacing. */
  margin-top: calc(-1 * var(--navbar-height));
  padding: calc(var(--navbar-height) + 8rem) 4rem 1rem;
  background-color: var(--black);
  text-align: center;
}

/* Compact header variant for pages that should sit closer to the navbar (policies) */
.page-header.page-header--compact {
  padding: calc(var(--navbar-height) + 0rem) 4rem 0.5rem;
}

@media (max-width: 768px) {
  .page-header.page-header--compact {
    /* Compact headers get proportionally reduced top padding on mobile */
    padding: calc(var(--navbar-height) + 0.6rem) 1rem 0.5rem;
  }
}

.page-title {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: 3.6rem;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Mobile: Reduce header text by 20% and add side padding */
@media (max-width: 768px) {
  .page-header {
    /* Reduce top spacing by ~50% on mobile */
    padding: calc(var(--navbar-height) + 4rem) 0.5rem 1rem;
  }

  .page-title {
    font-size: 2.88rem;
  }
}

.content-section {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.schedule-container {
  background-color: var(--white);
  padding: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  min-height: 600px;
}

/* Schedule acknowledgement notice */
body.schedule-notice-open {
  overflow: hidden;
}

.schedule-notice {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: auto;
  padding: 1rem;
  background: rgba(12, 12, 12, 0.28);
}

.schedule-notice[hidden] {
  display: none;
}

.schedule-notice__dialog {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5rem;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 1.5rem);
  border: 1px solid rgba(12, 12, 12, 0.08);
  border-radius: clamp(2rem, 5vw, 4rem);
  background: rgba(247, 246, 245, 0.75);
  color: var(--black);
  box-shadow: 0 1.5rem 4rem rgba(12, 12, 12, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.schedule-notice__copy {
  max-width: 52rem;
  min-width: 0;
}

.schedule-notice__copy p {
  font-family: var(--font-base);
  font-size: clamp(0.765rem, 1.8105vw, 1.1985rem);
  font-weight: bold;
  line-height: 0.92;
  letter-spacing: -0.065em;
  overflow-wrap: break-word;
  text-transform: uppercase;
}

.schedule-notice__copy p + p {
  margin-top: clamp(0.75rem, 1.5vw, 1.125rem);
}

.schedule-notice__copy em {
  font-size: 0.7em;
  font-style: italic;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.schedule-notice__heart {
  display: inline-block;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-style: normal;
  font-size: 1em;
  line-height: 1;
  margin-left: 0.08em;
  vertical-align: -0.08em;
}

.schedule-notice__accept {
  align-self: center;
  width: fit-content;
  max-width: 100%;
  min-height: 2.2275rem;
  padding: 0.486rem 1.215rem;
  border: 0;
  background: var(--black);
  color: var(--off-white);
  font-family: var(--font-base);
  font-size: clamp(0.53703rem, 1.2393vw, 0.8262rem);
  font-style: normal;
  font-weight: bold;
  letter-spacing: -0.065em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.schedule-notice__accept:hover {
  background: #242423;
  color: var(--off-white);
  font-style: italic;
}

.schedule-notice__accept:focus-visible {
  outline: none;
  outline-offset: 0;
}

@media (max-width: 768px) {
  .schedule-notice {
    padding: 1rem;
  }

  .schedule-notice__dialog {
    gap: 1rem;
    max-height: calc(100dvh - 1rem);
    padding: clamp(1.125rem, 3vh, 1.75rem) 1rem clamp(1rem, 3vh, 1.5rem);
    border-radius: 2rem;
  }

  .schedule-notice__copy p {
    font-size: clamp(0.5355rem, 2.754vw, 0.7395rem);
    line-height: 0.95;
  }

  .schedule-notice__copy p + p {
    margin-top: 0.75rem;
  }

  .schedule-notice__accept {
    min-height: 2.2275rem;
    padding: 0.486rem 0.81rem;
    font-size: clamp(0.475065rem, 2.4786vw, 0.61965rem);
  }
}

/* Memberships / Packs Grid */
.pack-section {
  margin-bottom: 4rem;
}

.pack-section-title {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: 2.25rem;
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.pack-card {
  background-color: var(--off-white);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  border-top: 4px solid transparent;
  transition: var(--transition);
}

.pack-card:hover {
  border-top-color: var(--red);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.pack-info h4 {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.pack-info p {
  color: #666;
  font-size: 0.9rem;
}

.pack-price-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pack-price {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: 1.25rem;
}

/* ==========================================================================
   PRICING PAGES (Dubai / Abu Dhabi)
   Full-bleed bands: welcome offers (cream) → packages (white) → memberships.
   Used by memberships.html and memberships-abu-dhabi.html only.
   ========================================================================== */
.pricing-page {
  --pricing-cream: #f4f1ec;
  --pricing-paper: #fdfcfa;
  --pricing-card-bg: #f5f2ed;
  --pricing-gutter: clamp(1.25rem, 5vw, 4rem);
  background-color: var(--pricing-cream);
}

.pricing-band {
  padding: clamp(2.1rem, 4.9vw, 4.55rem) 0;
}

.pricing-band--cream {
  background-color: var(--pricing-cream);
}

.pricing-band--paper {
  background-color: var(--pricing-paper);
}

.pricing-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pricing-gutter);
}

/* Memberships sit on a wider measure than the bands above them */
.pricing-shell--wide {
  max-width: 1560px;
}

/* --- Red cards: welcome offers + memberships ----------------------------- */
.pricing-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 3.5rem);
  min-height: clamp(13rem, 19vw, 17.5rem);
  padding: clamp(1.5rem, 2.4vw, 2.5rem);
  background-color: var(--red);
  /* Warm neutral laid over the red texture: deepens it and pulls the
     saturation back to the muted maroon of the reference. Kept in the
     background stack rather than an overlay element so text and buttons stay
     untinted. */
  background-image: linear-gradient(rgba(90, 60, 55, 0.45), rgba(90, 60, 55, 0.45)), var(--faq-background-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--white);
}

/* The label/title pair is a right-aligned block of its own, with the label
   pushed to the far side of it. That puts the label near the card edge on the
   narrow Dubai cards and around two-thirds across on the wide Abu Dhabi one,
   as in the reference layouts — and it can never overflow, however long the
   label runs. */
.pricing-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  width: 100%;
  max-width: 26.5rem;
  margin-left: auto;
}

.pricing-card__label {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: clamp(0.77rem, 1.05vw, 0.99rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pricing-card__title {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: clamp(1.9rem, 3.3vw, 3.1rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: right;
}

.pricing-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pricing-card__price {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.pricing-card__meta {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: clamp(0.55rem, 0.7vw, 0.68rem);
  line-height: 1.35;
  text-transform: uppercase;
  margin-top: 0.35rem;
  margin-bottom: clamp(0.9rem, 1.6vw, 1.35rem);
}

/* --- Welcome offers ------------------------------------------------------ */
.pricing-offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

/* Abu Dhabi runs a single, full-width welcome offer */
.pricing-offers--single {
  grid-template-columns: 1fr;
}

/* --- Package cards ------------------------------------------------------- */
.pricing-packs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}

.pricing-pack {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 3rem);
  background-color: var(--pricing-card-bg);
}

/* BB FULL ACCESS sits on the smoke gradient, in white type */
.pricing-pack--smoke {
  background-color: var(--off-white);
  /* 15% black wash keeps the white type readable over the smoke gradient */
  background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), var(--events-background-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--white);
}

/* Blurb under the BB FULL ACCESS title */
.pricing-pack__intro {
  max-width: 46ch;
  font-family: var(--font-base);
  font-weight: bold;
  font-size: clamp(0.6rem, 0.8vw, 0.78rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* The blurb takes over the title's trailing space */
.pricing-pack--smoke .pricing-pack__title {
  margin-bottom: clamp(1.25rem, 2.2vw, 1.9rem);
}

.pricing-pack__title {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: clamp(1.9rem, 3.3vw, 3.1rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: right;
  color: var(--red);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.pricing-pack__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.pricing-pack__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
}

/* BB FULL ACCESS: two options side by side, pushed to the foot of the card,
   each with its BUY button stacked underneath rather than alongside. */
.pricing-pack__list--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: auto;
  padding-top: clamp(2rem, 5vw, 4rem);
}

.pricing-pack__row--stacked {
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  align-items: end;
  gap: clamp(1rem, 2vw, 1.6rem);
}

.pricing-pack__row--stacked .healcode-btn-wrapper {
  justify-self: start;
}

.pricing-pack--smoke .pricing-pack__name {
  font-size: clamp(1.15rem, 1.9vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 0.55rem;
}

.pricing-pack--smoke .pricing-pack__price {
  font-size: clamp(0.85rem, 1.05vw, 1rem);
}

.pricing-pack--smoke .pricing-pack__meta {
  margin-top: 0.6rem;
}

.pricing-pack__name,
.pricing-pack__price,
.pricing-pack__meta {
  display: block;
  font-family: var(--font-base);
  font-weight: bold;
  text-transform: uppercase;
}

.pricing-pack__name {
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.pricing-pack__price {
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.pricing-pack__meta {
  font-size: clamp(0.5rem, 0.68vw, 0.65rem);
  line-height: 1.35;
  margin-top: 0.3rem;
}

/* T&Cs pinned to the bottom so both cards line up */
.pricing-terms {
  margin-top: auto;
  padding-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-base);
  font-weight: bold;
  font-size: clamp(0.55rem, 0.7vw, 0.68rem);
  line-height: 1.5;
}

.pricing-terms li {
  display: block;
}

.pricing-terms__title {
  display: block;
  margin-bottom: 0.35rem;
}

.pricing-terms ul {
  list-style: none;
  padding-left: 0.85rem;
}

.pricing-terms li {
  position: relative;
}

.pricing-terms li::before {
  content: "\2022";
  position: absolute;
  left: -0.85rem;
}

/* Single-line T&Cs (Abu Dhabi BB FULL ACCESS) */
.pricing-terms--inline {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: clamp(0.5rem, 0.65vw, 0.62rem);
  letter-spacing: -0.01em;
  text-transform: none;
}

/* --- Memberships --------------------------------------------------------- */
.pricing-memberships-title {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--red);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.pricing-memberships {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
}

/* Memberships run tighter than the welcome offers: the same content with
   ~15% less dead space between the title and the price block. */
/* Membership cards carry a title and no label, so there is nothing for
   space-between to work against — pin the title to the right edge instead. */
.pricing-card--membership .pricing-card__head {
  justify-content: flex-end;
  max-width: none;
}

.pricing-card--membership {
  gap: clamp(1.25rem, 1.7vw, 1.5rem);
  padding-top: clamp(1.25rem, 1.8vw, 2rem);
  padding-bottom: clamp(1.25rem, 1.8vw, 2rem);
  min-height: clamp(11rem, 16vw, 15rem);
}

/* Membership blurbs run on a narrow measure, as in the reference */
.pricing-card--membership .pricing-card__meta {
  max-width: 22ch;
}

.pricing-tagline {
  max-width: 17ch;
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0 auto;
  font-family: var(--font-base);
  font-weight: bold;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: right;
  color: var(--red);
}

/* --- Buy buttons: keep the live Healcode link the same size as the
       placeholder it replaces (see .healcode-btn-wrapper) ------------------ */
.pricing-page .healcode-pricing-option-text-link {
  padding: 0.475rem 1.8rem !important;
  font-size: 0.85rem !important;
}

@media (max-width: 900px) {

  .pricing-offers,
  .pricing-packs,
  .pricing-memberships {
    grid-template-columns: 1fr;
  }

  .pricing-card {
    min-height: 0;
    gap: 2.25rem;
  }

  .pricing-card__head {
    gap: 1.5rem;
  }

  .pricing-tagline {
    max-width: 20ch;
  }
}

@media (max-width: 600px) {
  .pricing-pack__row {
    align-items: start;
  }

  .pricing-pack__row .healcode-btn-wrapper {
    justify-self: end;
  }

  .pricing-pack__list--split {
    grid-template-columns: 1fr;
  }

  .pricing-pack__row--stacked .healcode-btn-wrapper {
    justify-self: start;
  }
}


/* Why Infrared */
.infrared-split {
  display: flex;
  min-height: 80vh;
}

.infrared-image {
  flex: 1;
  background: url('./infrared-bg.jpg') center/cover;
  position: relative;
  display: flex;
  align-items: center;
  padding: 4rem;
  background-color: #1c1c1c;
  /* Fallback */
}

.infrared-title {
  font-family: var(--font-headline);
  font-stretch: condensed;
  font-weight: bold;
  font-size: 3.6rem;
  color: var(--white);
  line-height: 0.9;
  text-transform: uppercase;
}

.infrared-text {
  flex: 1;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}

.infrared-text h3 {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: 1.35rem;
  text-transform: uppercase;
}

.infrared-text p {
  font-family: var(--font-infrared-body);
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: #888;
  font-size: 1.1rem;
  line-height: 1.6;
  letter-spacing: normal;
}

/* Reversed layout (text left, image right) */
.infrared-split--reversed {
  flex-direction: row-reverse;
}

.reformer-image {
  background: #1c1c1c center/cover;
  /* Replace with actual image: background-image: url('./reformer-page-bg.jpg'); */
}

/* Policies */
.policies-bg {
  background-color: var(--black);
  color: var(--white);
  padding: 3.2rem 4rem;
  /* Reduced from 6rem */
}

.policies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  margin-top: 2.3rem;
  /* Reduced from 4rem */
}

.policy-block h4 {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: 1.125rem;
  margin-bottom: 1rem;
  color: var(--white);
}

.policy-block p {
  color: #aaa;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Schedule Placeholder */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
}

.schedule-table th,
.schedule-table td {
  padding: 1.5rem;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.schedule-table th {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: 1.2rem;
}

.schedule-table tr:hover {
  background-color: var(--off-white);
}

/* Responsive */
@media (max-width: 900px) {

  .intro,
  .split-section,
  .infrared-split {
    flex-direction: column;
  }

  .split-item {
    min-height: 300px;
  }



  .policies-grid {
    grid-template-columns: 1fr;
  }

  /* Mobile fix: ensure Why Infrared section sits below the split images */
  .split-section {
    height: auto; /* allow stacked items to size naturally on mobile */
  }

  .split-item {
    min-height: 50vh; /* make each stacked split item tall enough to avoid overlap */
  }

  .why-infrared-home {
    margin-top: 0rem; /* push the Why Infrared section further down on mobile */
    z-index: 1;
  }
}

/* Nav Actions
   Sits outside .navbar in the DOM and is fixed-positioned to line up with it.
   That placement is required: mix-blend-mode only blends against the backdrop
   of its nearest stacking-context ancestor, and .navbar (position: fixed)
   creates one. As a direct child of <body> the bars blend against the page
   itself, so they invert per-pixel against whatever scrolls underneath —
   dark on light backgrounds, light on dark ones, entirely on the compositor
   with no scroll listeners. */
.nav-actions {
  display: none;
  /* shown at <=768px only */
  align-items: center;
  gap: 1rem;
  position: fixed;
  /* matches .navbar padding (1rem 2rem), bars centred on the 36px logo */
  top: calc(1rem + (36px - 18px) / 2);
  right: 2rem;
  z-index: 10002;
  mix-blend-mode: difference;
}

/* Desaturate the backdrop before it is blended, so the difference blend can
   only ever produce greys (white - grey = grey) instead of colour inversions
   like red -> cyan. Lives on body::after rather than .nav-actions because the
   blended box is an isolated stacking context (its children can't reach the
   page backdrop), and clip-path — which does clip backdrop-filter output —
   would also shrink the hamburger's tap target if placed on .nav-actions.
   The overlay mirrors the hamburger's geometry (24x18, bars at 0-2 / 8-10 /
   16-18) and is clipped to just the three bar stripes, so the gaps between
   bars show the untouched backdrop. */
body::after {
  content: "";
  display: none; /* shown at <=768px only, alongside .nav-actions */
  position: fixed;
  top: calc(1rem + (36px - 18px) / 2);
  right: 2rem;
  width: 24px;
  height: 18px;
  /* below .nav-actions (10002); ties .mobile-menu (10001) but paints after it */
  z-index: 10001;
  pointer-events: none;
  backdrop-filter: grayscale(1);
  -webkit-backdrop-filter: grayscale(1);
  clip-path: path("M0 0H24V2H0Z M0 8H24V10H0Z M0 16H24V18H0Z");
}

/* Open state: the bars rotate into an X that leaves the stripes, so widen the
   filter to the full box — it sits over the solid white menu, where grayscale
   is a no-op and the patch is invisible. */
body:has(.hamburger.is-active)::after {
  clip-path: none;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10002;
}

/* Invisible padding so the tap target clears 44px without moving the bars */
.hamburger::before {
  content: "";
  position: absolute;
  inset: -13px;
}

.hamburger .bar {
  width: 100%;
  height: 2px;
  /* white + difference blend = inverse of whatever is behind it */
  background-color: var(--white);
  transition: var(--transition);
}

/* Fallback for the rare engine without blend modes: bring back the chip */
@supports not (mix-blend-mode: difference) {
  .nav-actions {
    background-color: rgba(255, 255, 255, 0.82);
    padding: 0.5rem 1rem;
    margin: -0.5rem -1rem;
    border-radius: 2px;
  }

  .hamburger .bar {
    background-color: var(--black);
  }
}

.hamburger.is-active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.is-active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  z-index: 10001;
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  visibility: hidden;
}

.mobile-menu.is-active {
  transform: translateY(0);
  visibility: visible;
}

.mobile-menu a {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: 1.5342rem;
  text-transform: uppercase;
  color: var(--black);
  transition: color 0.3s ease;
}

.mobile-schedule-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-schedule-toggle {
  font-family: var(--font-base);
  font-weight: bold;
  font-size: 1.5342rem;
  text-transform: uppercase;
  color: var(--black);
  background: none;
  border: 0;
  cursor: pointer;
}

.mobile-schedule-toggle::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 0 5px 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.mobile-schedule-toggle[aria-expanded="true"]::after {
  transform: rotate(225deg) translate(-3px, -3px);
}

.mobile-schedule-links {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.mobile-schedule-links.is-open {
  display: flex;
}

.mobile-menu .mobile-schedule-links a {
  font-size: 0.9205rem;
}

.mobile-menu a:hover {
  color: #c3c6c8;
}

/* Metallic text interaction shared by FAQ accordions, infrared dropdowns and text links. */
:is(
  .faq-summary:hover .faq-plus,
  .faq-summary:hover .faq-heading,
  .faq-summary:focus-visible .faq-plus,
  .faq-summary:focus-visible .faq-heading,
  .why-home-summary:hover .why-home-plus,
  .why-home-summary:hover .why-home-subtitle,
  .why-home-summary:focus-visible .why-home-plus,
  .why-home-summary:focus-visible .why-home-subtitle,
  a:not(.logo, .btn-primary, .btn-black, .healcode-pricing-option-text-link, .instagram-post, .btn-social, .footer-socials a, .footer-app-link):hover,
  a:not(.logo, .btn-primary, .btn-black, .healcode-pricing-option-text-link, .instagram-post, .btn-social, .footer-socials a, .footer-app-link):focus-visible,
  .nav-dropdown-toggle:hover,
  .nav-dropdown-toggle:focus-visible,
  .mobile-schedule-toggle:hover,
  .mobile-schedule-toggle:focus-visible,
  .footer-location-toggle:hover .footer-location-toggle-text,
  .footer-location-toggle:focus-visible .footer-location-toggle-text,
  .footer-location-toggle:active .footer-location-toggle-text,
  .footer-app-link:hover > span:last-child,
  .footer-app-link:focus-visible > span:last-child
) {
  color: #c3c6c8;
  opacity: 1;
  background-image: linear-gradient(
    105deg,
    #74787b 0%,
    #d5d7d8 18%,
    #ffffff 31%,
    #979b9e 47%,
    #f4f5f5 63%,
    #777b7e 81%,
    #d8dadb 100%
  );
  background-size: 240% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: faq-metallic-sheen 4.05s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .why-home-summary:hover .why-home-plus,
    .why-home-summary:hover .why-home-subtitle,
    .why-home-summary:focus-visible .why-home-plus,
    .why-home-summary:focus-visible .why-home-subtitle,
    a:not(.logo, .btn-primary, .btn-black, .healcode-pricing-option-text-link, .instagram-post, .btn-social, .footer-socials a, .footer-app-link):hover,
    a:not(.logo, .btn-primary, .btn-black, .healcode-pricing-option-text-link, .instagram-post, .btn-social, .footer-socials a, .footer-app-link):focus-visible,
    .nav-dropdown-toggle:hover,
    .nav-dropdown-toggle:focus-visible,
    .mobile-schedule-toggle:hover,
    .mobile-schedule-toggle:focus-visible,
    .footer-location-toggle:hover .footer-location-toggle-text,
    .footer-location-toggle:focus-visible .footer-location-toggle-text,
    .footer-location-toggle:active .footer-location-toggle-text,
    .footer-app-link:hover > span:last-child,
    .footer-app-link:focus-visible > span:last-child
  ) {
    animation: none;
    background-position: 50% 50%;
  }
}

@media (max-width: 768px) {
  .navbar {
    --navbar-height: 76px;
    /* mobile sizing only - position handled globally */
    width: 100%;
    background: transparent;
    padding: 1rem 2rem;
    box-shadow: none;
  }

  .nav-links {
    display: none;
  }

  .nav-actions,
  .hamburger {
    display: flex;
  }

  body::after {
    display: block;
  }

  .hero-title {
    line-height: 1;
  }

  .intro-headline,
  .intro-subheadline {
    font-size: clamp(2.48625rem, 3.9015vw, 4.9725rem);
  }

  .split-title {
    font-size: clamp(2.295rem, 3.825vw, 4.896rem);
  }

  .split-sub {
    font-size: clamp(0.5525rem, 0.85vw, 0.68rem);
  }

  .hero {
    min-height: calc(100svh - var(--location-marquee-height));
    padding: 0;
    background-position: 56% top;
  }

  .hero-content {
    top: 36%;
    left: 1.5rem;
    right: 1.5rem;
  }

  .hero-lockup {
    width: 100%;
    max-width: none;
  }

  .hero-trademark {
    right: -0.35rem;
    font-size: 0.52rem;
  }

  .hero-tagline {
    right: 1.5rem;
    bottom: 2rem;
    max-width: 19rem;
    font-size: clamp(1.0925rem, 4.845vw, 1.4915rem);
  }

  .movements-header h2 {
    font-size: clamp(1.15rem, 5.1vw, 1.57rem);
  }

  .why-home-kicker {
    font-size: clamp(0.9775rem, 4.335vw, 1.3345rem);
  }

  .content-section {
    padding: 1rem 0.5rem;
  }

  .schedule-container {
    padding: 0.5rem;
  }

  .footer-simple {
    padding: 2rem 1rem;
  }
}

/* Classes Section (Used in BB Method) */
.classes-section {
  padding: 6rem 4rem;
  background-color: var(--white);
}

.classes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 1024px) {
  .classes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .classes-grid {
    grid-template-columns: 1fr;
  }
}

.class-card {
  cursor: pointer;
}

.class-image-wrapper {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background-color: var(--black);
}

.class-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.5s ease, opacity 0.5s ease;
  opacity: 0.85;
}

.class-card:hover .class-img,
.class-card.active .class-img {
  transform: scale(1.05);
  filter: blur(6px);
  opacity: 0.6;
}

/* Hover text overlay */
.class-hover-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.class-card:hover .class-hover-overlay,
.class-card.active .class-hover-overlay {
  opacity: 1;
}

.class-title-overlay {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  font-family: var(--font-headline);
  font-stretch: condensed;
  font-weight: bold;
  color: var(--white);
  font-size: 1.8rem;
  text-transform: uppercase;
  z-index: 3;
  line-height: 1;
  transition: opacity 0.3s ease, transform 0.4s ease;
}

/* Move title to the top on hover */
.class-card:hover .class-title-overlay,
.class-card.active .class-title-overlay {
  bottom: auto;
  top: 2rem;
  transform: translateY(0);
}

/* Mobile: Position title at top and move to very top on hover/active */
@media (max-width: 768px) {
  .class-title-overlay {
    bottom: auto;
    top: 2rem;
  }

  .class-card:hover .class-title-overlay,
  .class-card.active .class-title-overlay {
    transform: translateY(0);
  }
}

.class-hover-overlay .class-meta {
  display: flex;
  gap: 0.5rem;
  font-family: var(--font-base);
  font-size: 0.6rem;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.5rem;
}

.class-hover-overlay .class-desc-title {
  font-family: var(--font-base);
  font-size: 0.7rem;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--white);
  margin-bottom: 0.4rem;
}

.class-hover-overlay .class-desc {
  font-family: var(--font-base);
  font-size: 0.65rem;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}