/* ============================================================
   PILATES BY PEAK — Taylors Lakes studio
   Warm cream base, high-contrast serif, editorial spacing.
   Deliberately separate from the dark Peak Fitness gym theme.
   ============================================================ */

:root {
  --p-cream:     #ece4dc;
  --p-cream-lt:  #f5f1ea;
  --p-ink:       #3a322b;
  --p-ink-soft:  #6b6055;
  --p-line:      rgba(58,50,43,0.16);
  --p-white:     #ffffff;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'EB Garamond', Georgia, serif;
  background: var(--p-cream);
  color: var(--p-ink);
  line-height: 1.7;
  font-size: 1.05rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.p-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---------------- Typography ---------------- */
h1, h2, h3 {
  font-family: 'Bodoni Moda', 'Didot', Georgia, serif;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: 0.16em; text-transform: uppercase; }

.p-lead { font-weight: 600; }

/* Wordmark */
.p-wordmark {
  font-family: 'Bodoni Moda', 'Didot', Georgia, serif;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.p-wordmark em {
  font-style: italic;
  font-size: 0.78em;
  margin: 0 0.1em;
}
.p-wordmark-sub {
  display: block;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.42rem;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  text-align: center;
  margin-top: 3px;
  opacity: 0.75;
  font-style: italic;
}

/* ---------------- Buttons ---------------- */
.p-btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: 999px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  border: 1px solid var(--p-ink);
  background: var(--p-ink);
  color: var(--p-cream);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.p-btn:hover {
  background: transparent;
  color: var(--p-ink);
  transform: translateY(-2px);
}
.p-btn-outline {
  background: transparent;
  color: var(--p-ink);
}
.p-btn-outline:hover {
  background: var(--p-ink);
  color: var(--p-cream);
}

/* Book A Visit — white tile, dark text, dark outline. Matches the gym site. */
.p-btn-book {
  background: var(--p-white);
  color: var(--p-ink);
  border: 2px solid var(--p-ink);
}
.p-btn-book:hover {
  background: var(--p-ink);
  color: var(--p-white);
}

/* ---------------- Header ---------------- */
.p-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(236,228,220,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.p-nav {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.p-nav-menu {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
}
.p-nav-menu a {
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.p-nav-menu a:hover,
.p-nav-menu a.active { border-bottom-color: var(--p-ink); }

.p-nav-menu .p-nav-btn {
  border-bottom: 0;
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--p-ink);
  color: var(--p-cream);
  font-size: 0.95rem;
  transition: opacity 0.25s ease;
}
.p-nav-menu .p-nav-btn:hover { opacity: 0.85; border-bottom-color: transparent; }
.p-nav-menu .p-nav-btn-book {
  border: 2px solid var(--p-ink);
  background: var(--p-white);
  color: var(--p-ink);
}
.p-nav-menu .p-nav-btn-book:hover {
  background: var(--p-ink);
  color: var(--p-white);
  opacity: 1;
}

.p-burger {
  display: none;
  background: none;
  border: 0;
  width: 30px; height: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.p-burger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--p-ink);
}

/* ---------------- Hero banner ---------------- */
.p-hero {
  padding: 0 40px;
  margin-top: 10px;
}
.p-hero-inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  aspect-ratio: 21 / 10;
  min-height: 340px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-hero-media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  z-index: 0;
}
.p-hero-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20,16,12,0.18);
  z-index: 1;
}
.p-hero-mark {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--p-white);
}
.p-hero-mark .p-wordmark {
  font-size: clamp(1.9rem, 5.2vw, 4.2rem);
  text-shadow: 0 2px 30px rgba(0,0,0,0.3);
}
.p-hero-mark .p-wordmark-sub {
  font-size: clamp(0.5rem, 1vw, 0.8rem);
  margin-top: 8px;
}

/* ---------------- Sections ---------------- */
.p-section { padding: 110px 0; }
.p-section-alt { background: var(--p-cream-lt); }

.p-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}
.p-two-col-media {
  aspect-ratio: 4/5;
  overflow: hidden;
}
.p-two-col-media img,
.p-two-col-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
}
.p-two-col h2 { margin-bottom: 28px; }
.p-two-col p { margin-bottom: 18px; color: var(--p-ink-soft); }
.p-two-col p strong { color: var(--p-ink); font-weight: 600; }

.p-section-head {
  text-align: center;
  margin-bottom: 60px;
}
.p-section-head h2 { margin-bottom: 20px; }
.p-section-head p {
  max-width: 640px;
  margin: 0 auto;
  color: var(--p-ink-soft);
}

/* Split head — big title left, intro right (Class Styles page) */
.p-split-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 80px;
}
.p-split-head p { color: var(--p-ink-soft); }
.p-split-head p strong { color: var(--p-ink); font-weight: 600; }

/* ---------------- Class cards ---------------- */
.p-classes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}
.p-class {
  background: var(--p-cream);
  padding: 18px 18px 34px;
}
.p-section-alt .p-class { background: var(--p-cream); }
.p-class-media {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-class-media img,
.p-class-media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  transition: transform 0.7s ease;
}
.p-class:hover .p-class-media img,
.p-class:hover .p-class-media video { transform: scale(1.05); }
/* Scrim so the class name stays legible over busy studio footage */
.p-class-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(20,16,12,0.42) 0%, rgba(20,16,12,0.18) 70%, transparent 100%);
  z-index: 1;
}
.p-class-label {
  position: relative;
  z-index: 2;
  font-family: 'Bodoni Moda', 'Didot', Georgia, serif;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  letter-spacing: 0.06em;
  color: var(--p-white);
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.p-class h3 {
  text-align: center;
  margin-bottom: 16px;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
}
.p-class p {
  text-align: center;
  font-size: 0.98rem;
  color: var(--p-ink-soft);
  line-height: 1.65;
}
.p-class p strong { color: var(--p-ink); font-weight: 600; }

.p-center { text-align: center; margin-top: 56px; }

/* ---------------- Booking form ---------------- */
.p-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.p-form-media {
  aspect-ratio: 3/4;
  overflow: hidden;
  position: sticky;
  top: 120px;
}
.p-form-media img,
.p-form-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
}
.p-embed {
  background: var(--p-white);
  border-radius: 4px;
  overflow: hidden;
  padding: 8px;
}
.p-embed iframe {
  width: 100%;
  min-height: 760px;
  border: 0;
  display: block;
  border-radius: 3px;
}

/* ---------------- Socials strip ---------------- */
.p-socials {
  text-align: center;
  padding: 90px 0;
}
.p-socials h2 { margin-bottom: 28px; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

/* ---------------- Footer ---------------- */
.p-footer {
  padding: 80px 0 50px;
  border-top: 1px solid var(--p-line);
}
.p-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 50px;
}
.p-footer .p-wordmark { font-size: 1.9rem; }
.p-footer h4 {
  font-family: 'Bodoni Moda', 'Didot', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 20px;
}
.p-footer p, .p-footer li {
  color: var(--p-ink-soft);
  font-size: 1rem;
  list-style: none;
  margin-bottom: 8px;
}
.p-footer a:hover { text-decoration: underline; }
.p-footer-links { margin-top: 22px; }
.p-footer-bottom {
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid var(--p-line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--p-ink-soft);
}

/* ---------------- Reveal ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .p-container, .p-nav { padding-left: 24px; padding-right: 24px; }
  .p-hero { padding: 0 24px; }
  .p-two-col,
  .p-split-head,
  .p-form-grid { grid-template-columns: 1fr; gap: 44px; }
  .p-form-media { position: static; aspect-ratio: 16/10; }
  .p-classes { grid-template-columns: 1fr; gap: 40px; }
  .p-footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .p-section { padding: 80px 0; }

  /* Hero goes full-bleed on phones. Inset + wide crop reads as a small
     floating strip on a narrow screen. */
  .p-hero { padding: 0; margin-top: 0; }
  .p-hero-inner { aspect-ratio: 4/3; min-height: 0; }
  .p-hero-mark .p-wordmark { font-size: clamp(2.1rem, 9vw, 3rem); }
  .p-hero-mark .p-wordmark-sub { font-size: 0.6rem; letter-spacing: 0.22em; }

  .p-burger { display: flex; }
  /* Anchored to the header rather than shifted by a percentage of its own
     height. translateY(-125%) at top:76px left the closed panel's bottom edge
     about 1px below the viewport top, so any extra nav height would bleed the
     cream panel over the header. Same fault the gym nav had. */
  .p-nav-menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--p-cream);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px 24px;
    border-bottom: 1px solid var(--p-line);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  .p-nav-menu.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .p-nav-menu li { width: 100%; }
  .p-nav-menu a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--p-line);
  }
  .p-nav-menu .p-nav-btn,
  .p-nav-menu .p-nav-btn-alt {
    text-align: center;
    margin-top: 14px;
    border-bottom: 0;
  }
}