/* ==========================================================================
   Bodyworks Co. — marketing site
   Recreated from the design handoff. Plain static CSS, no build step.
   ========================================================================== */

:root {
  --coral: #e86952;
  --coral-dark: #95483c;
  --brown: #78523a;
  --warm-grey: #6b5f57;
  --cream: #f6f4f1;
  --ink: #383838;
  --body: #4a4744;
  --muted: #6b6663;
  --white: #ffffff;
  --serif: Marcellus, Georgia, serif;
  --sans: Montserrat, Questrial, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --easing-reveal: cubic-bezier(.22, .61, .36, 1);
  --easing-flip: cubic-bezier(.5, 0, .2, 1);
  --easing-image: cubic-bezier(.2, .62, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: Questrial, "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
img { display: block; max-width: 100%; }
input, textarea, select, button { font: inherit; color: inherit; }
a { color: var(--coral); text-decoration: none; }
a:hover { color: var(--coral-dark); }
/* No hard focus box on controls (client request). Form fields still show a
   soft coral border on focus so keyboard users can see where they are. */
:focus-visible { outline: none; }
.form__label input:focus,
.form__label select:focus,
.form__label textarea:focus { outline: none; border-color: var(--coral); }

h1, h2, h3, p { margin: 0; }

/* Hide scrollbars on the horizontal track */
.track { scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }
.scrolly { scrollbar-width: thin; }

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes bw-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bw-hint {
  0%, 100% { transform: translateX(0); opacity: .7; }
  50% { transform: translateX(7px); opacity: 1; }
}
@keyframes bw-nextpulse {
  0%, 100% { transform: translate(0, -50%); opacity: .38; }
  50% { transform: translate(7px, -50%); opacity: .72; }
}

/* ==========================================================================
   Root + horizontal track
   ========================================================================== */
.root {
  height: 100dvh;
  overflow: hidden;
  background: var(--cream);
}
.track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  touch-action: pan-y;
  cursor: grab;
}
.panel {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  scroll-snap-align: start;
}

/* ==========================================================================
   Fixed header (always visible, every panel, all viewports)
   ========================================================================== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 92px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 44px);
  padding: 0 clamp(16px, 3vw, 44px);
  background: var(--cream);
  border-bottom: 1px solid rgba(120, 82, 58, 0.14);
}
.header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header__mark {
  flex: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 10px rgba(30, 26, 25, 0.18));
}
.header__mark img { width: 100%; height: 100%; }
.header__wordmark {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* Burger button (top-right, all viewports) */
.header__burger {
  flex: none;
  width: 46px;
  height: 46px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.header__burger-line {
  display: block;
  width: 27px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

/* ==========================================================================
   Burger menu overlay
   ========================================================================== */
.menu[hidden] { display: none; }
.menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
}
.menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 26, 25, 0.55);
  opacity: 0;
  transition: opacity .4s ease;
}
.menu.is-open .menu__backdrop { opacity: 1; }
.menu__panel {
  position: relative;
  width: min(420px, 84vw);
  height: 100%;
  background: var(--cream);
  padding: clamp(84px, 13vh, 128px) clamp(28px, 5vw, 56px) 40px;
  box-shadow: -22px 0 60px rgba(30, 26, 25, 0.28);
  transform: translateX(100%);
  transition: transform .45s var(--easing-reveal);
  display: flex;
  flex-direction: column;
}
.menu.is-open .menu__panel { transform: none; }
.menu__close {
  position: absolute;
  top: 22px; right: 26px;
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}
.menu__close:hover { color: var(--coral); }
.menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.6vh, 28px);
}
.menu__link {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.menu__link:hover { color: var(--coral); }

/* ==========================================================================
   [0] Cover / Home
   ========================================================================== */
.cover {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vh, 52px) clamp(20px, 4vw, 64px);
  overflow: hidden;
}
.cover__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 50%;
}
.cover__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(30, 26, 25, 0.72) 0%, rgba(30, 26, 25, 0.42) 55%, rgba(30, 26, 25, 0.2) 100%),
    linear-gradient(180deg, rgba(56, 56, 56, 0.5), rgba(149, 72, 60, 0.58));
}
.cover__inner {
  position: relative;
  width: 100%;
  max-width: 1340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4.6vh, 58px);
}
.cover__headline { max-width: 1360px; text-align: center; }
.hero-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.18;
  letter-spacing: 0.05em;
  color: var(--white);
  text-transform: uppercase;
}
/* Desktop: keep each line on one row so the headline is exactly two lines. */
.hero-h1__line { display: block; white-space: nowrap; }
.hero-h1 .accent { color: var(--coral); }

.cover__support {
  max-width: 1100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 18px);
  align-items: center;
}
.cover__tagline {
  font-size: clamp(10px, 0.95vw, 14px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--white);
  font-weight: 700;
}
.cover__intro {
  max-width: 620px;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
.cover__cta {
  display: block;
  min-width: 230px;
  text-align: center;
  padding: 15px 30px;
  border-radius: 4px;
  border: 1px solid var(--coral);
  background: var(--coral);
  font-family: var(--serif);
  font-size: clamp(12px, 0.95vw, 15px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  transition: transform .35s ease, background .3s ease;
}
.cover__cta:hover { background: var(--coral-dark); color: var(--white); transform: translateY(-2px); }

/* Desktop: clear the fixed header up top and the dot-pips/scroll hint below,
   so the centred cover content never collides with either. */
@media (min-width: 961px) {
  .cover {
    padding-top: clamp(104px, 12vh, 150px);
    padding-bottom: clamp(104px, 14vh, 160px);
  }
}

/* ==========================================================================
   Arch photo frames + hover zoom (shared)
   ========================================================================== */
.arch {
  overflow: hidden;
  border-radius: 999px 999px 8px 8px;
}
.arch img,
.zoom-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform .85s var(--easing-image);
}
.arch:hover img,
.zoom-wrap:hover .zoom-img { transform: scale(1.08); }

/* ==========================================================================
   [1] About Me
   ========================================================================== */
.about {
  background: var(--white);
  padding: 104px clamp(24px, 5vw, 80px) 44px;
  display: flex;
  align-items: center;
}
.about__grid {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.about__text {
  max-height: calc(100dvh - 200px);
  overflow-y: auto;
  padding-right: 10px;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 12px;
}
.about__text .eyebrow { margin-bottom: 14px; }
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
}
.about__title {
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: 0.1em;
  margin-bottom: 26px;
}
.about__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.8;
  color: var(--body);
  max-width: 62ch;
}
.about__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid rgba(120, 82, 58, 0.16);
}
.stat__num {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--coral);
}
.stat__label {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown);
}
.about__trusted { margin-top: 22px; }
.about__trusted-label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brown);
  margin: 0 0 5px;
}
.about__trusted-names {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0;
}
.about__figure { display: flex; justify-content: center; }
.portrait {
  position: relative;
  height: min(calc(100dvh - 190px), 746px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 3 / 4;
}
/* About slideshow — cross-fading images inside one fixed arched frame */
.portrait .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease, transform .85s var(--easing-image);
}
.portrait .slide.is-active { opacity: 1; }
.portrait:hover .slide.is-active { transform: scale(1.08); }
/* Single About photo (slideshow removed for now): zoom in + crop toward the
   top so there isn't loads of headroom, with a dark scrim like the other images. */
/* Selector matches .arch img's specificity+ so it wins the transform. */
.arch img.about__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.5);
  transform-origin: 50% 40%;
  filter: brightness(1.26) contrast(1.02);
}
.arch__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 26, 25, 0.20), rgba(30, 26, 25, 0.40));
  pointer-events: none;
}

/* ==========================================================================
   [2] Highlights
   ========================================================================== */
.highlights {
  background: linear-gradient(180deg, #f6f4f1 0%, #ffffff 60%, #f6f4f1 100%);
  padding: 104px clamp(24px, 5vw, 80px) 44px;
  display: flex;
  align-items: center;
}
.highlights__inner { width: 100%; max-width: 1240px; margin: 0 auto; }
.highlights__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(22px, 3.5vh, 44px);
}
.highlights__title {
  font-size: clamp(26px, 3.2vw, 46px);
  letter-spacing: 0.12em;
}
.highlights__lead {
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
}
.hl-card { margin: 0; }
.hl-card .arch { width: 100%; aspect-ratio: 3 / 4; max-height: 42dvh; }
/* Where max-height makes the arch landscape, bias the crop up so the trainer's
   arm stays in frame instead of being centre-cropped out. */
.arch img.hl-card__img--coaching { object-position: 50% 28%; }
.hl-card figcaption { padding: 18px 4px 0; }
.hl-card h3 {
  margin-bottom: 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.hl-card p { font-size: 14px; line-height: 1.7; color: var(--muted); }

/* ==========================================================================
   [3] Pricing
   ========================================================================== */
.pricing {
  background: var(--coral-dark);
  padding: clamp(84px, 11vh, 104px) clamp(24px, 5vw, 80px) clamp(28px, 4vh, 48px);
  display: flex;
  align-items: center;
}
.pricing { display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.pricing__inner { width: 100%; max-width: 1280px; margin: 0 auto; max-height: 100%; overflow-y: auto; }
.pricing__title {
  margin-top: clamp(0px, 1vh, 14px);
  margin-bottom: clamp(10px, 1.8vh, 22px);
  text-align: center;
  font-size: clamp(23px, 3vw, 44px);
  letter-spacing: 0.14em;
  color: var(--cream);
}
.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
}
.price-card { display: flex; flex-direction: column; }
.price-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
}
.price-card__media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 18dvh;
  object-fit: cover;
  border-radius: 999px 999px 0 0;
  transform: scale(1.001);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform .85s var(--easing-image);
}
.price-card__media:hover img { transform: scale(1.08); }
/* Nutrition photo: shift the framing up so more of the bowl is visible. */
.price-card__img--nutrition { object-position: 50% 78%; }
.price-card__scrim {
  position: absolute;
  inset: 0;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(62, 45, 38, 0.24), rgba(45, 32, 27, 0.42));
  pointer-events: none;
}
/* The studio photo is a bright room, so it needs a deeper scrim than the
   other cards to keep the white STUDIO label legible. */
.price-card__scrim--studio {
  background: linear-gradient(180deg, rgba(62, 45, 38, 0.38), rgba(45, 32, 27, 0.56));
}
.price-card__label {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  pointer-events: none;
  font-family: Questrial, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: 0.04em;
  color: var(--white);
}
.price-card__body {
  background: var(--cream);
  padding: 18px 16px;
  border-radius: 0 0 6px 6px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
}
/* Fixed 2-line height so the "From £X" price sits on the same row across cards. */
.price-card__desc { font-size: 14px; line-height: 1.6; color: var(--ink); min-height: 3.2em; display: flex; align-items: center; justify-content: center; }
.price-card__price {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral-dark);
}
.price-card__inc {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #5b5652;
}
.price-card__inc li {
  position: relative;
  padding-left: 14px;
}
.price-card__inc li::before {
  content: "";
  position: absolute;
  left: 2px; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--coral);
}
.price-card__note {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--coral-dark);
}
.price-card__best {
  display: inline-block;
  margin-left: 5px;
  padding: 3px 9px 2px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}
/* Bridal Intensive strip: sits under the four cards rather than becoming a
   fifth, since it's a fixed-term package rather than a monthly option. */
.bridal-strip {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(16px, 2.4vh, 28px);
  padding: 8px clamp(14px, 2vw, 22px) 8px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(30, 26, 25, 0.18);
  transition: transform .3s ease, box-shadow .3s ease;
}
.bridal-strip:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(30, 26, 25, 0.26); }
.bridal-strip__media {
  flex: 0 0 auto;
  width: clamp(46px, 5vw, 60px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 999px;
}
.bridal-strip__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: brightness(1.12); }
.bridal-strip__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bridal-strip__label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral-dark);
}
.bridal-strip__title { font-family: var(--serif); font-size: clamp(15px, 1.6vw, 19px); }
.bridal-strip__sub { font-size: 12px; color: var(--muted); }
.bridal-strip__cta {
  flex: 0 0 auto;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--coral);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .bridal-strip { border-radius: 22px; flex-wrap: wrap; }
  /* Indent the copy and button so they don't sit hard against the left edge. */
  .bridal-strip__body { padding-left: 16px; }
  .bridal-strip__cta { width: 100%; text-align: center; }
}
.pricing__consult {
  margin-top: clamp(12px, 2vh, 24px);
  text-align: center;
}
.pricing__consult-lead {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.02em;
  color: var(--cream);
}
.pricing__consult-sub {
  margin: 5px auto 0;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(246, 244, 241, 0.85);
}
.pricing__consult-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 13px 30px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--coral-dark);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.pricing__consult-btn:hover {
  background: #fff;
  color: var(--coral-dark);
  transform: translateY(-2px);
}
.pricing__foot {
  margin-top: clamp(28px, 4vh, 52px);
  padding: 0 12px;
  text-align: center;
  line-height: 1.6;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 244, 241, 0.78);
}
.pricing__foot a {
  color: var(--cream);
  border-bottom: 1px solid rgba(246, 244, 241, 0.5);
}

/* ==========================================================================
   [4] Reviews
   ========================================================================== */
.reviews {
  padding: 104px clamp(24px, 5vw, 80px) 44px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.reviews__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reviews__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 26, 25, 0.55), rgba(30, 26, 25, 0.68));
}
.reviews__inner { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; }
.reviews__title {
  margin-bottom: clamp(20px, 3vh, 38px);
  text-align: center;
  font-size: clamp(30px, 4.2vw, 62px);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--white);
}
.reviews__title .accent { color: var(--coral); font-weight: 700; }
/* Prompt for clients to leave a Google review. Sits under the title, not the
   carousel — the fixed pips/hint own the bottom ~50px of every panel. */
.reviews__cta {
  margin: calc(-1 * clamp(8px, 1.4vh, 18px)) auto clamp(16px, 2.4vh, 30px);
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(246, 244, 241, 0.85);
}
.reviews__cta-link {
  margin-left: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(232, 105, 82, 0.75);
  color: var(--white);
  text-decoration: none;
  transition: color .3s ease, border-color .3s ease;
}
.reviews__cta-link:hover { color: var(--coral); border-bottom-color: var(--coral); }
/* Reviews carousel: one long, slightly-transparent arch holding all reviews;
   arrows either side + dots to flick through. */
.reviews__carousel {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 18px);
  max-width: 860px;
  margin: 0 auto;
}
.reviews__arch {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(232, 105, 82, 0.66);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 200px 200px 18px 18px;
  padding: clamp(52px, 6vw, 88px) clamp(34px, 4vw, 60px) 26px;
  box-shadow: 0 22px 54px rgba(30, 26, 25, 0.22);
}
.reviews__viewport { overflow: hidden; }
.reviews__track { display: flex; transition: transform .5s var(--easing-reveal); }
.review {
  flex: 0 0 100%;
  margin: 0;
  padding: 0 clamp(4px, 1vw, 14px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 210px;
}
.review__stars { color: #fff; font-size: 16px; letter-spacing: 0.32em; text-align: center; }
.review__quote {
  font-weight: 700;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.45;
  color: #3a2622;
  text-align: center;
}
.review__body { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.96); text-align: center; }
.review__author {
  margin-top: 6px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #3a2622;
}
.reviews__dots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }
.rev-dot {
  width: 8px; height: 8px; padding: 0; border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.rev-dot.is-active { background: #fff; transform: scale(1.25); }
.rev-arrow {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(120, 82, 58, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--coral-dark);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease, color .3s ease;
}
.rev-arrow svg { width: 22px; height: 22px; }
.rev-arrow:hover { background: var(--coral); color: #fff; border-color: var(--coral); transform: scale(1.06); }

/* ==========================================================================
   [5] Contact
   ========================================================================== */
.contact {
  background: var(--warm-grey);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.contact__watermark {
  position: absolute;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  height: min(86dvh, 900px);
  width: auto;
  max-width: none;
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}
.contact__scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  padding: 104px clamp(24px, 5vw, 80px) 28px;
}
.contact__grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0px;
  gap: 0px;
  align-items: center;
  transition: grid-template-columns .7s var(--easing-reveal), gap .7s var(--easing-reveal);
}
.contact__copy { min-width: 0; text-align: center; }
.contact__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.contact__links a {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.04em;
  color: var(--white);
}
.contact__links a:hover { color: var(--coral); }
.contact__sep { font-size: 19px; color: var(--coral); }
.contact__title {
  margin-bottom: 22px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 76px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.15;
}
.contact__title .accent { color: var(--coral); }
.contact__title .c-line { display: block; }
.contact__title .c-phrase { display: inline-block; white-space: nowrap; }
.contact__lead {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.86);
}

/* Form — collapsed by default, revealed on open */
.contact__form {
  min-width: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateX(60px);
  pointer-events: none;
  transition:
    opacity .55s ease,
    max-height .7s var(--easing-reveal),
    padding .7s var(--easing-reveal),
    transform .7s var(--easing-reveal);
  background: rgba(246, 244, 241, 0.97);
  border-radius: 120px 120px 10px 10px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1vh, 12px);
}
.contact__grid.is-open {
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 64px);
}
.contact__grid.is-open .contact__copy { text-align: left; }
.contact__grid.is-open .contact__links { justify-content: flex-start; }
.contact__grid.is-open .contact__lead { margin: 0; }
.contact__grid.is-open .contact__form {
  max-height: 2000px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  padding: clamp(38px, 3vw, 50px) clamp(26px, 2.2vw, 36px) 20px;
}
.form__heading {
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(15px, 1.6vh, 18px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.form__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown);
}
.form__label input,
.form__label select,
.form__label textarea {
  padding: clamp(8px, 1.1vh, 11px) 13px;
  border: 1px solid rgba(120, 82, 58, 0.3);
  border-radius: 6px;
  background: var(--white);
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}
.form__label textarea { line-height: 1.6; resize: vertical; }
.form__submit {
  margin-top: 2px;
  padding: clamp(10px, 1.4vh, 14px) 20px;
  border: 0;
  border-radius: 999px;
  background: var(--coral);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease;
}
.form__submit:hover { background: var(--coral-dark); }
.form__status {
  min-height: 18px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-dark);
}

/* Marquee */
.marquee {
  position: relative;
  background: var(--coral);
  padding: 11px 0;
  overflow: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: bw-marq 34s linear infinite;
}
.marquee__group {
  display: flex;
  gap: 44px;
  padding-right: 44px;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

/* Footer */
.footer {
  position: relative;
  background: var(--ink);
  padding: 10px clamp(24px, 5vw, 80px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.footer a { color: rgba(255, 255, 255, 0.7); }
.footer a:hover { color: var(--coral); }

/* ==========================================================================
   Panel pips + hint
   ========================================================================== */
.pips {
  position: fixed;
  left: 0; right: 0;
  bottom: 15px;
  z-index: 40;
  display: flex;
  /* Dots sit inline with the hint so the bottom of each panel stays on one row. */
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease;
}
.pips.is-hidden { opacity: 0; visibility: hidden; }
.pips__group {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}
.pip {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(120, 82, 58, 0.3);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.pip:hover { transform: scale(1.5); }
.pip.is-active { background: var(--coral); }
/* On dark panels inactive pips are light; JS toggles .pips--dark */
.pips--dark .pip { background: rgba(255, 255, 255, 0.4); }
.pips--dark .pip.is-active { background: var(--coral); }
.hint {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(120, 82, 58, 0.55);
  animation: bw-hint 3s ease-in-out infinite;
}
.pips--dark .hint { color: rgba(255, 255, 255, 0.55); }

/* ==========================================================================
   Faint pulsing "slide to next" indicator
   ========================================================================== */
.next-hint {
  position: fixed;
  right: clamp(14px, 2.4vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(120, 82, 58, 0.28);
  border-radius: 999px;
  background: rgba(120, 82, 58, 0.1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--brown);
  cursor: pointer;
  animation: bw-nextpulse 2.4s ease-in-out infinite;
  transition: opacity .3s ease;
}
.next-hint svg { width: 22px; height: 22px; }
.next-hint:hover { opacity: 1 !important; }
.next-hint.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
/* light arrow on dark panels */
.next-hint--dark {
  border-color: rgba(246, 244, 241, 0.4);
  background: rgba(246, 244, 241, 0.16);
  color: var(--cream);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .hint,
  .next-hint { animation: none !important; }
  .arch img, .zoom-img, .price-card__media img, .portrait .slide { transition: none !important; }
  .menu__panel, .menu__backdrop { transition: none !important; }
}

/* ==========================================================================
   Vertical layout variant (JS may set data-vertical="true")
   ========================================================================== */
.track[data-vertical="true"] {
  flex-direction: column !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-snap-type: y proximity !important;
}
.track[data-vertical="true"] .panel {
  width: 100% !important;
  flex: 0 0 auto !important;
  min-height: 100dvh;
  height: auto !important;
}

/* ==========================================================================
   [5] Glow Club
   ========================================================================== */
.glow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, #f6f4f1 0%, #ffffff 55%, #f6f4f1 100%);
  overflow: hidden;
}
.glow__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 104px clamp(24px, 5vw, 80px) 44px;
  max-height: 100%;
  overflow-y: auto;
}
.glow__title {
  text-align: center;
  font-family: "Jost", var(--sans);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 50px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: clamp(24px, 3.5vh, 44px);
  white-space: nowrap;
}
.glow__title .accent { color: var(--coral); font-weight: 700; }
@media (max-width: 420px) {
  /* let it wrap on very narrow phones so it doesn't overflow */
  .glow__title { white-space: normal; }
}
.glow__grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
/* Example glow card (client image on transparent bg) */
.glow-card { margin: 0; display: flex; justify-content: center; }
.glow-card img {
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(30, 26, 25, 0.18));
}
/* Sign-up */
.glow__h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 20px;
}
.glow__lead {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.85;
  color: var(--body);
  max-width: 50ch;
}
.glow__cta-line {
  margin-top: 24px;
  font-weight: 700;
  font-size: clamp(16px, 1.25vw, 19px);
  color: var(--coral-dark);
}
.glow__form { margin-top: 26px; max-width: 500px; }
/* Brand-style the EmailOctopus inline embed (default is purple Bootstrap). */
.glow__form .emailoctopus-form-row,
.glow__form .emailoctopus-form { margin: 0; }
.glow__form .emailoctopus-form input.form-control {
  padding: 13px 16px !important;
  border: 1px solid rgba(120, 82, 58, 0.3) !important;
  border-radius: 999px !important;
  background: #fff !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
.glow__form .emailoctopus-form input.form-control:focus {
  outline: none !important;
  border-color: var(--coral) !important;
}
.glow__form .emailoctopus-form .btn,
.glow__form .emailoctopus-form button[type="submit"],
.glow__form .emailoctopus-form input[type="submit"] {
  padding: 13px 30px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--coral) !important;
  color: #fff !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.glow__form .emailoctopus-form .btn:hover,
.glow__form .emailoctopus-form button[type="submit"]:hover {
  background: var(--coral-dark) !important;
  transform: translateY(-2px);
}
/* "Powered by EmailOctopus" — kept (free plan) but toned down. */
.glow__form .emailoctopus-form-attribution,
.glow__form .emailoctopus-powered-by { opacity: 0.5; }
/* Make the "Thanks for subscribing!" confirmation obvious + gently animate it in.
   Selector covers EmailOctopus message-class variants. */
.glow__form .emailoctopus-success-message,
.glow__form .emailoctopus-error-message,
.glow__form .emailoctopus-form-message,
.glow__form [class*="success-message"],
.glow__form [class*="error-message"] {
  margin: 6px 0 4px !important;
  font-family: var(--serif) !important;
  font-size: clamp(19px, 1.6vw, 24px) !important;
  line-height: 1.35 !important;
  color: var(--coral-dark) !important;
  animation: glow-pop .5s var(--easing-reveal) both;
}
@keyframes glow-pop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .glow__form [class*="success-message"],
  .glow__form [class*="error-message"],
  .glow__form .emailoctopus-form-message { animation: none !important; }
}
.glow__smallprint { margin-top: 16px; font-size: 12px; color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Large screens — scale content up so it isn't marooned small on big monitors
   ========================================================================== */
@media (min-width: 1700px) {
  .cover__inner, .cover__headline { max-width: 1720px; }
  .hero-h1 { font-size: clamp(56px, 3.4vw, 76px); }
  .cover__tagline { font-size: 16px; }
  .cover__intro { font-size: clamp(18px, 1.1vw, 22px); }

  .about__grid { max-width: 1720px; gap: clamp(64px, 5vw, 120px); }
  .about__title { font-size: 56px; }
  .about__body { font-size: 19px; max-width: 66ch; }
  .about__body { gap: 22px; }
  .stat__num { font-size: 40px; }
  .stat__label { font-size: 12px; }
  .about__trusted-names { font-size: 15px; }

  .highlights__inner { max-width: 1660px; }
  .highlights__title { font-size: 56px; }
  .hl-card h3 { font-size: 19px; }
  .hl-card p { font-size: 16px; }

  .pricing__inner { max-width: 1620px; }
  .pricing__title { font-size: 58px; }
  .price-card__media img { max-height: 32dvh; }
  .price-card__label { font-size: 34px; }
  .price-card__desc { font-size: 16px; }
  .price-card__price { font-size: 13px; }
  .price-card__inc { font-size: 15px; }
  .price-card__note { font-size: 13px; }
  .pricing__consult-lead { font-size: 30px; }
  .pricing__consult-sub { font-size: 18px; max-width: 60ch; }
  .pricing__consult-btn { font-size: 13px; padding: 15px 34px; }

  .reviews__inner { max-width: 1660px; }
  .reviews__title { font-size: 70px; }
  .review__quote { font-size: 20px; }
  .review__body { font-size: 16px; }
  .review__author { font-size: 17px; }

  .contact__scroll { padding-left: clamp(40px, 6vw, 130px); padding-right: clamp(40px, 6vw, 130px); }
  .contact__grid { max-width: 1560px; }
  .contact__title { font-size: 88px; }
  .contact__lead { font-size: 18px; }
  .contact__links a, .contact__sep { font-size: 22px; }
  .form__label input, .form__label select, .form__label textarea { font-size: 17px; }
  .form__heading { font-size: 20px; }
}

/* ==========================================================================
   Responsive — collapse to a vertical stack below 960px
   ========================================================================== */
@media (max-width: 960px) {
  .root { height: auto !important; overflow: visible !important; }
  .track {
    display: block !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    height: auto !important;
    cursor: auto;
  }
  .panel {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .portrait { height: auto !important; width: 100% !important; max-width: 520px !important; }
  .scrolly { overflow: visible !important; max-height: none !important; }
  .about__grid, .contact__grid { grid-template-columns: 1fr !important; }
  .cards-3, .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hero-h1 { font-size: clamp(30px, 9vw, 52px) !important; }
  .hero-h1__line { white-space: normal; }
  .header { justify-content: space-between !important; }
  #cover {
    min-height: 100dvh !important;
    padding-top: 104px !important;
    padding-bottom: 40px !important;
  }
  /* Mobile: let the hero photo (weights/dumbbell) read more clearly */
  .cover__bg { object-position: 68% 42% !important; }
  .cover__scrim {
    background: linear-gradient(180deg, rgba(30, 26, 25, 0.32), rgba(149, 72, 60, 0.42)) !important;
  }
  .next-hint { display: none !important; }
  .pips { display: none !important; }
  /* Full-bleed the marquee + footer bars to the screen edges (cancel the
     panel's 20px side padding). */
  .contact .marquee,
  .contact .footer {
    margin-left: -20px !important;
    margin-right: -20px !important;
  }
  /* Glow Club: stack, centre everything, show the card at full size. */
  .glow__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; justify-items: center; }
  .glow-card, .glow__signup { min-width: 0; max-width: 100%; }
  .glow-card img { width: 100%; max-width: min(100%, 420px) !important; margin: 0 auto; }
  .glow__signup { width: 100%; max-width: 520px; text-align: center; }
  .glow__lead { margin-left: auto; margin-right: auto; }
  .glow__form { margin-left: auto; margin-right: auto; }
  /* "On The Go" drops to its own line on mobile. */
  .glow__title { white-space: normal; }
  .glow__title .accent { display: block; }
}
/* Keep the EmailOctopus email + Subscribe on one line (button is a sibling of
   the input row inside .main-form and is full-width by default). */
.glow__form .main-form {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  align-items: stretch;
}
.glow__form .main-form > div { flex: 1 1 auto; min-width: 0; margin-bottom: 0 !important; }
.glow__form .main-form .emailoctopus-form-row { margin-bottom: 0 !important; }
.glow__form .main-form .btn {
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap;
  margin-bottom: 0 !important;
  padding: 13px 22px !important;
}
/* Let the input shrink so it never forces the row wider than the panel. */
.glow__form .main-form input.form-control { min-width: 0 !important; }
/* Very narrow phones: drop Subscribe onto its own full-width line rather than
   overflow. */
@media (max-width: 380px) {
  .glow__form .main-form { flex-wrap: wrap !important; }
  .glow__form .main-form > div { flex: 1 1 100% !important; }
  .glow__form .main-form .btn { flex: 1 1 100% !important; width: 100% !important; }
}
@media (max-width: 560px) {
  .cards-3, .cards-4 { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Social links (cover + contact) — off-white icons per client request
   ========================================================================== */
.socials {
  list-style: none;
  margin: clamp(16px, 2.4vh, 26px) 0 0;
  padding: 0;
  display: flex;
  gap: 6px;
}
.socials--cover { justify-content: center; }
/* Bare glyphs, no chrome — matches the reference the client sent. Padding keeps
   the tap target comfortable without showing a button. */
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Padding rather than a box: keeps a 44px tap target with no visible chrome. */
  padding: 11px;
  color: var(--cream);
  transition: color .3s ease, transform .3s ease;
}
.socials a:hover { color: var(--coral); transform: translateY(-1px); }
.socials svg { width: 22px; height: 22px; display: block; }

/* ==========================================================================
   iOS WebKit safeguard
   Safari (and therefore every iOS browser, plus Instagram's in-app webview)
   can fail to clip a transformed child inside an overflow:hidden box — the
   scaled about photo and the carousel slides both rely on that. When it fails
   the page grows wider than the screen and scrolls sideways, which reads as
   content cut off on the left. Mobile is a plain vertical stack, so there is
   never a legitimate horizontal scroll to preserve.
   overflow-x: clip is used rather than hidden so it cannot create a scroll
   container or disturb the fixed header.
   ========================================================================== */
@media (max-width: 960px) {
  html, body { overflow-x: clip; }
  .panel { overflow-x: clip; }
}
/* Promote the clipping boxes to their own layer so WebKit honours the clip. */
.arch,
.reviews__viewport,
.price-card__media { transform: translateZ(0); }