:root {
  --gold: #bba66a;
  --gold-deep: #ae9860;
  --cream: #f7f4ea;
  --ink: #090908;
  --header-h: 4.25rem;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--ink);
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  color: var(--cream);
  font-family: "Poppins", "Segoe UI", Arial, sans-serif;
  background: var(--ink);
}

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

main {
  flex: 1;
}

/* ---------------------------------------------------------------------------
   CSS-only routing: every .view is hidden until its id matches the URL hash
   (:target), so #home / #book / #about deep-link without any JavaScript.
   #home is the default view when there is no hash. In browsers without
   :has() support the views simply stack, so nothing is ever unreachable.

   #book is never `display: none` (unlike the other views) — it stays in
   normal layout, just clipped to nothing and pulled out of flow, so it
   keeps real dimensions at all times. The Mindbody schedule widget script
   measures its container once, on page load, and never re-measures; if
   #book were display:none the first time that script ran (i.e. any time
   the page didn't load directly on #book), the embedded iframe would be
   sized to 0 and stay broken even after navigating to #book later.
--------------------------------------------------------------------------- */
.view {
  display: none;
  scroll-margin-top: var(--header-h);
}

.view:target {
  display: block;
}

#home {
  display: block;
}

body:has(.view:target:not(#home)) #home {
  display: none;
}

#book {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  height: 100vh;
  clip-path: inset(50%);
  pointer-events: none;
}

#book:target {
  position: static;
  height: auto;
  clip-path: none;
  pointer-events: auto;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999rem;
  top: 0;
  z-index: 20;
  padding: 0.6rem 1.1rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
}

.skip-link:focus-visible {
  left: 0.5rem;
  top: 0.5rem;
}

/* Header / navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding: 0.6rem clamp(1rem, 4vw, 2.4rem);
  background: rgba(9, 9, 8, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(187, 166, 106, 0.35);
}

.site-header__brand img {
  display: block;
  height: 2.2rem;
  width: auto;
  filter: brightness(0) invert(1);
}

.site-header__brand:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.site-nav {
  display: flex;
  gap: clamp(0.9rem, 3vw, 2rem);
}

.site-nav a {
  padding: 0.35rem 0.15rem;
  border-bottom: 2px solid transparent;
  color: var(--cream);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 160ms ease, border-color 160ms ease;
}

.site-nav a:hover {
  color: #ffffff;
  border-color: rgba(187, 166, 106, 0.55);
}

.site-nav a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Highlight the nav link for the view currently shown */
body:not(:has(.view:target)) .site-nav a[href="#home"],
body:has(#home:target) .site-nav a[href="#home"],
body:has(#book:target) .site-nav a[href="#book"],
body:has(#about:target) .site-nav a[href="#about"] {
  color: var(--gold);
  border-color: var(--gold);
}

/* Hero (home view) */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 100%);
  height: calc(100vh - var(--header-h) - 72px);
  overflow: hidden;
  place-items: stretch center;
  background:
    linear-gradient(
      to bottom,
      rgba(6, 6, 5, 0.36),
      rgba(6, 6, 5, 0.24) 42%,
      rgba(6, 6, 5, 0.84) 100%
    ),
    url("leap_splash.webp") 50% 20% / cover no-repeat,
    #11100e;
}

.hero::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 23%, rgba(255, 244, 202, 0.1), transparent 24rem),
    linear-gradient(to right, rgba(0, 0, 0, 0.26), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.26));
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  width: min(92%, 860px);
  height: 100%;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.6rem) 0;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.brand-logo {
  display: block;
  width: clamp(13rem, 34vw, 34rem);
  height: auto;
  margin: 0 auto;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

.hero__lead {
  align-self: center;
  display: grid;
  gap: clamp(1.1rem, 3vw, 1.8rem);
  justify-items: center;
}

.hero__title {
  max-width: 50rem;
  margin: 0 auto;
  font-size: clamp(1.5rem, 2.9vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.btn-cta {
  display: inline-block;
  padding: 0.72rem 2.1rem 0.78rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: var(--ink);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.46);
}

.btn-cta:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}

.hero__scroll {
  position: absolute;
  bottom: clamp(1.1rem, 3vw, 2rem);
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  transform: translateX(-50%);
  color: var(--cream);
  background: rgba(9, 9, 8, 0.28);
  border: 1px solid rgba(247, 244, 234, 0.4);
  animation: hero-scroll-bounce 2.2s ease-in-out infinite;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
  background: rgba(9, 9, 8, 0.48);
  border-color: rgba(247, 244, 234, 0.75);
}

.hero__scroll:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.hero__scroll svg {
  width: 1.3rem;
  height: 1.3rem;
}

@keyframes hero-scroll-bounce {
  0%, 100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 0.4rem);
  }
}

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

/* Home intro (below the fold) */
.home-intro {
  width: min(88%, 54rem);
  margin: 0 auto;
  padding: clamp(3.2rem, 8vw, 6rem) 0;
  text-align: center;
}

.announcement {
  margin: 0 auto;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  font-weight: 500;
  line-height: 1.55;
}

/* Inner pages (Book a Class, About) */
.page {
  width: min(92%, 60rem);
  margin: 0 auto;
  padding: clamp(2.2rem, 6vw, 4rem) 0 clamp(2.8rem, 7vw, 4.5rem);
}

.page h1 {
  margin: 0 0 0.4em;
  color: var(--gold);
  font-size: clamp(1.9rem, 4.2vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.page h2 {
  margin: 1.6em 0 0.45em;
  color: var(--gold);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: 600;
  line-height: 1.15;
}

.page p {
  margin: 0 0 1em;
  font-size: clamp(0.98rem, 1.5vw, 1.15rem);
  font-weight: 400;
  line-height: 1.65;
}

.page .eyebrow {
  margin: 0 0 0.7em;
  color: rgba(247, 244, 234, 0.68);
  font-size: clamp(0.8rem, 1.1vw, 0.92rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.page .lede {
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  font-weight: 600;
  line-height: 1.5;
}

.page .tagline {
  margin: 1.1em 0 0;
  color: var(--gold);
  font-size: clamp(1.1rem, 1.9vw, 1.4rem);
  font-style: normal;
  font-weight: 600;
}

.method-list {
  display: grid;
  gap: 0.85em;
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

.method-list li {
  position: relative;
  padding-left: 1.5em;
  font-size: clamp(0.98rem, 1.5vw, 1.15rem);
  font-weight: 400;
  line-height: 1.65;
}

.method-list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0.42em;
  color: var(--gold);
  font-size: 0.6em;
}

.method-list strong {
  color: var(--gold);
}

.inline-link {
  color: var(--gold);
  border-bottom: 1px solid rgba(187, 166, 106, 0.55);
  transition: color 160ms ease, border-color 160ms ease;
}

.inline-link:hover,
.inline-link:focus-visible {
  color: #ffffff;
  border-color: #ffffff;
}

/* Mindbody schedule embed */
.widget-card {
  margin-top: clamp(1.2rem, 3vw, 2rem);
  padding: clamp(0.8rem, 2.5vw, 1.6rem);
  border-radius: 1rem;
  background: var(--cream);
  color: var(--ink);
}

.widget-card .mindbody-widget {
  min-height: 24rem;
}

.widget-card noscript p {
  margin: 0;
  font-size: 1.1rem;
}

.widget-card noscript a {
  font-weight: 700;
  text-decoration: underline;
}

.site-footer__tagline {
  margin: 0;
  padding: 0.9rem 1.2rem 1rem;
  background: var(--ink);
  color: rgba(247, 244, 234, 0.66);
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  font-weight: 400;
  text-align: center;
}

/* Contact footer (shown on every view) */
.contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(14rem, 24rem));
  gap: clamp(1rem, 4vw, 7rem);
  align-items: stretch;
  justify-content: center;
  min-height: 22vh;
  padding: clamp(1.6rem, 4vw, 3.2rem) clamp(1.1rem, 8vw, 8rem);
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
}

.contact-card {
  display: grid;
  height: 100%;
  justify-items: center;
  text-align: center;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
}

.contact-link {
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  align-items: center;
  width: min(100%, 22rem);
  height: 100%;
  padding: 0.8rem clamp(0.55rem, 2vw, 1rem) 0.9rem;
  border: 2px solid rgba(255, 255, 255, 0.54);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 20px rgba(86, 63, 20, 0.16);
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    text-shadow 180ms ease;
}

.contact-link:hover,
.contact-link:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 14px 26px rgba(86, 63, 20, 0.22);
  text-shadow: 0 3px 9px rgba(0, 0, 0, 0.34);
  transform: translateY(-1px);
}

.contact-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 4px;
}

.contact-card h2 {
  margin: 0;
  color: #fffaf0;
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
}

.contact-card .contact-value,
.contact-card address {
  margin: 0.55rem 0 0;
  color: #fff9ec;
  font-size: clamp(0.85rem, 1.4vw, 1.15rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}

.contact-card address {
  white-space: nowrap;
}

.contact-action {
  align-self: end;
  margin-top: 0.72rem;
  padding: 0.28rem 0.72rem 0.34rem;
  border-radius: 999px;
  color: #6f5a22;
  background: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.82rem, 1.35vw, 1.05rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: none;
}

@media (max-width: 430px) {
  .hero {
    background-position: 50% 20%;
  }

  .brand-logo {
    width: clamp(12rem, 58vw, 16rem);
  }
}

@media (max-width: 680px) {
  .site-header {
    justify-content: center;
    padding-inline: 0.75rem;
  }

  .site-header__brand img {
    height: 1.7rem;
  }

  .site-nav {
    gap: 0.8rem;
  }

  .site-nav a {
    font-size: 0.95rem;
    letter-spacing: 0.06em;
  }

  .contact {
    grid-template-columns: minmax(0, 24rem);
    gap: 0.85rem;
    min-height: 16vh;
    padding-inline: 1rem;
  }

  .contact-link {
    grid-template-rows: auto auto auto;
    height: auto;
  }
}

@media (min-width: 900px) {
  .hero {
    background-position: 50% 20%;
  }

  .contact {
    min-height: 24vh;
  }
}

@media (min-width: 1300px) {
  .hero {
    background-size: cover;
  }
}