/* Pharm Fitness — shared styles */

:root {
  --pf-bg: #d4d4d4;
  --pf-bg-2: #c4c4c4;
  --pf-bg-3: #b4b4b4;
  --pf-line: rgba(0, 0, 0, 0.09);
  --pf-line-2: rgba(0, 0, 0, 0.16);
  --pf-text: #0b0b0c;
  --pf-text-2: rgba(11, 11, 12, 0.62);
  --pf-text-3: rgba(11, 11, 12, 0.42);
  --pf-accent: #0b0b0c;
  --pf-accent-ink: #d4d4d4;
}

* { box-sizing: border-box; }

.pf-root {
  background: var(--pf-bg);
  color: var(--pf-text);
  font-family: "Bebas Neue", "Anton", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pf-root h1, .pf-root h2, .pf-root h3, .pf-root h4 {
  font-family: "Anton", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
}

.pf-root p { margin: 0; }

/* ─────────── nav ─────────── */
.pf-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 28px 56px;
  color: #0b0b0c;
  mix-blend-mode: normal;
}
.pf-nav__brand {
  justify-self: center;
  font-family: "Anton", sans-serif;
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  color: inherit;
  text-decoration: none;
}
.pf-nav__brand span.dot { display: none; }
.pf-nav__menu {
  justify-self: start;
  display: flex; gap: 36px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pf-nav__menu a {
  color: rgba(0, 0, 0,0.78);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color .2s ease;
}
.pf-nav__menu a:hover { color: #0b0b0c; }
.pf-nav__menu a.is-active { color: #0b0b0c; }
.pf-nav__menu a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: #0b0b0c;
}
.pf-nav__cta {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0b0b0c;
  text-decoration: none;
  padding: 10px 18px;
  border: 1px solid rgba(0, 0, 0,0.45);
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pf-nav__cta:hover { background: #0b0b0c; color: #d4d4d4; border-color: #0b0b0c; }
.pf-nav__cta .arr { display: inline-block; transition: transform .2s ease; }
.pf-nav__cta:hover .arr { transform: translateX(3px); }

/* ─────────── hero (top-fade into solid dark) ─────────── */
.pf-hero {
  position: relative;
  /* sized so the hero + marquee strap together fit one viewport */
  height: calc(100vh - 70px);
  height: calc(100svh - 70px);
  min-height: 540px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--pf-bg);
}
.pf-hero__photo {
  position: absolute;
  inset: 0;
  background-image: url("img/hero.jpg");
  background-size: cover;
  /* Image shifted up 40px from the top anchor so 40px more of the
     bottom of the photo becomes visible (mobile keeps its own
     top-anchored position via the @media override). */
  background-position: center -40px;
  filter: grayscale(20%) contrast(1.05) brightness(0.85);
}
.pf-hero__photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(212, 212, 212,0) 0%, rgba(212, 212, 212,0.0) 30%, rgba(212, 212, 212,0.55) 60%, rgba(212, 212, 212,1) 100%),
    linear-gradient(180deg, rgba(212, 212, 212,0.45) 0%, rgba(212, 212, 212,0.0) 25%);
}
.pf-hero__inner {
  position: relative;
  width: 100%;
  padding: 0 56px 80px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 48px;
}
.pf-hero h1 {
  font-size: clamp(64px, 8.4vw, 136px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  max-width: 1100px;
}
.pf-hero h1 em {
  font-style: normal;
  display: block;
  color: var(--pf-text-2);
  margin-top: 0.09em;
}
.pf-hero__meta {
  text-align: right;
  font-family: "Bebas Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pf-text-2);
  max-width: 280px;
}
.pf-hero__meta strong {
  display: block;
  color: #0b0b0c;
  font-weight: 400;
  margin-bottom: 8px;
}
.pf-hero__strap {
  position: absolute;
  left: 56px; right: 56px;
  bottom: 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pf-text-3);
}

/* ─────────── strap / marquee ─────────── */
.pf-strap {
  border-top: 1px solid var(--pf-line);
  border-bottom: 1px solid var(--pf-line);
  overflow: hidden;
  background: var(--pf-bg);
}
.pf-strap__track {
  display: flex;
  /* CRITICAL: without `width: max-content` the flex container fills
     its parent (viewport width), and `translateX(-50%)` then shifts
     the content by half a viewport instead of half the track. The
     animation appears to "scroll a little, snap back" on every cycle.
     `max-content` sizes the track to the sum of its children, so
     -50% = exactly one copy width = a seamless loop point. */
  width: max-content;
  padding: 22px 0;
  font-family: "Anton", sans-serif;
  font-size: 22px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0, 0, 0,0.55);
  white-space: nowrap;
  animation: pf-marquee 30s linear infinite;
}
.pf-strap__track > span {
  display: inline-flex;
  align-items: center;
  gap: 64px;
  /* Trailing space lives inside each span (instead of on the flex
     container as `gap`) so every copy has the same width and the
     animation can land cleanly at the next copy's start. */
  padding-right: 64px;
}
.pf-strap__track .dot { width: 8px; height: 8px; background: var(--pf-accent); display: inline-block; transform: translateY(-4px); }
@keyframes pf-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────────── section base ─────────── */
.pf-section {
  padding: 140px 56px;
  border-top: 1px solid var(--pf-line);
  position: relative;
}
.pf-section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 80px;
}
.pf-section__num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--pf-text-3);
}
.pf-section__num strong { color: #0b0b0c; font-weight: 400; margin-right: 14px; }
.pf-section__title h2 {
  font-size: clamp(38px, 5.2vw, 78px);
  line-height: 0.95;
  max-width: 18ch;
}
/* Used inside an h2 to break onto a new line with a visible gap
   (e.g. between two sentences). Block-level so it forces a line wrap. */
.pf-h2-break {
  display: block;
  margin-top: 0.5em;
}
.pf-section__title p {
  margin-top: 24px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--pf-text-2);
  max-width: 56ch;
}

/* ─────────── about / credibility ─────────── */
.pf-about {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: stretch;
}
.pf-about__photo {
  position: relative;
  background: linear-gradient(180deg, #b4b4b4 0%, #aaaaaa 100%);
  min-height: 620px;
  overflow: hidden;
}
.pf-about__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(45%) contrast(1.05) brightness(0.95);
}
.pf-about__photo .tag {
  position: absolute; left: 24px; top: 24px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px; letter-spacing: 0.3em;
  color: rgba(0, 0, 0,0.85);
  border: 1px solid rgba(0, 0, 0,0.4);
  padding: 6px 12px;
}
.pf-about__copy {
  display: flex;
  flex-direction: column;
}
.pf-about__copy h3 {
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1;
  margin-bottom: 32px;
  max-width: 16ch;
}
.pf-about__copy .lede {
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: rgba(11, 11, 12,0.85);
  margin-bottom: 28px;
  max-width: 48ch;
}
.pf-about__copy p {
  font-family: "Bebas Neue", sans-serif;
  font-size: 17px;
  letter-spacing: 0.05em;
  line-height: 1.55;
  color: var(--pf-text-2);
  max-width: 52ch;
  margin-bottom: 18px;
}
/* Instagram follow link sitting under the stats — small, inline,
   with the icon left of the label so it reads naturally. */
.pf-about__social {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 10px 18px 10px 14px;
  border: 1px solid var(--pf-text);
  border-radius: 999px;
  color: var(--pf-text);
  text-decoration: none;
  font-family: "Bebas Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.pf-about__social svg {
  width: 20px;
  height: 20px;
  display: block;
}
.pf-about__social:hover {
  background: var(--pf-text);
  color: var(--pf-bg);
  transform: translateY(-1px);
}
.pf-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: auto;
  border-top: 1px solid var(--pf-line);
}
.pf-stats__item {
  padding: 28px 24px 28px 0;
  border-right: 1px solid var(--pf-line);
}
.pf-stats__item:last-child { border-right: 0; padding-right: 0; }
.pf-stats__num {
  font-family: "Anton", sans-serif;
  font-size: 54px;
  line-height: 0.9;
  color: #0b0b0c;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.pf-stats__num sup {
  font-size: 22px; vertical-align: top; color: var(--pf-text-2); margin-left: 4px;
}
.pf-stats__lbl {
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pf-text-3);
}

/* ─────────── services ─────────── */
.pf-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--pf-line);
  border: 1px solid var(--pf-line);
}
.pf-service {
  background: var(--pf-bg);
  padding: 48px 36px 40px;
  position: relative;
  min-height: 576px;
  display: flex; flex-direction: column;
  transition: background .3s ease;
}
.pf-service:hover { background: var(--pf-bg-2); }
.pf-service__num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--pf-text-3);
  margin-bottom: 296px;
}
.pf-service__img {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 336px;
  background-size: cover; background-position: center;
  filter: grayscale(50%) contrast(1.05) brightness(0.7);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
}
.pf-service h3 {
  font-size: 28px;
  line-height: 0.95;
  margin-bottom: 18px;
  max-width: 12ch;
}
.pf-service p {
  font-family: "Bebas Neue", sans-serif;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--pf-text-2);
  line-height: 1.5;
  margin-bottom: 28px;
  max-width: 36ch;
}
.pf-service__list {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--pf-line);
  display: grid; gap: 8px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pf-text-2);
}
.pf-service__list span::before {
  content: "—"; margin-right: 12px; color: var(--pf-text-3);
}

/* ─────────── process ─────────── */
.pf-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--pf-line);
}
.pf-step {
  padding: 40px 28px 48px 0;
  border-right: 1px solid var(--pf-line);
  position: relative;
}
.pf-step:last-child { border-right: 0; padding-right: 0; }
.pf-step:not(:first-child) { padding-left: 28px; }
.pf-step__num {
  font-family: "Anton", sans-serif;
  font-size: 86px;
  line-height: 0.85;
  color: #0b0b0c;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.pf-step__num em {
  font-style: normal;
  color: var(--pf-text-3);
  font-size: 24px;
  vertical-align: top;
  margin-left: 4px;
}
.pf-step h4 {
  font-size: 22px;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.pf-step p {
  font-family: "Bebas Neue", sans-serif;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: var(--pf-text-2);
  line-height: 1.55;
}

/* ─────────── testimonials ─────────── */
.pf-testimonials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* carousel layout for testimonials */
.pf-carousel {
  --pf-card-w: 760px;
  --pf-card-gap: 56px;
  margin-top: 0;
}
.pf-carousel__viewport {
  padding-top: 0;
  overflow: hidden;
  /* extend the visible area to the right edge of the artboard so the next card peeks */
  margin-right: -56px;
}
.pf-carousel__track {
  display: flex;
  gap: var(--pf-card-gap);
  transition: transform 480ms cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.pf-quote--card {
  flex: 0 0 var(--pf-card-w);
  width: var(--pf-card-w);
  border-top: 0;
  padding-top: 0;
  opacity: 0.32;
  transition: opacity 360ms ease;
}
.pf-quote--card.is-active {
  opacity: 1;
}
.pf-quote--card .pf-quote__mark {
  font-size: 84px;
}
.pf-quote--card blockquote {
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.34;
  margin-bottom: 36px;
}
.pf-carousel__controls {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--pf-line);
  display: flex; align-items: center; gap: 28px;
}
.pf-carousel__btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--pf-line);
  background: transparent;
  color: var(--pf-text);
  font-family: "Anton", sans-serif;
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.pf-carousel__btn:hover {
  background: var(--pf-accent);
  border-color: var(--pf-accent);
  color: #d4d4d4;
}
.pf-carousel__dots {
  display: flex; gap: 10px;
}
.pf-carousel__dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--pf-text-3);
  background: transparent;
  padding: 0; cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.pf-carousel__dot.is-active {
  background: var(--pf-accent);
  border-color: var(--pf-accent);
  transform: scale(1.15);
}
.pf-carousel__count {
  margin-left: auto;
  display: flex; align-items: baseline; gap: 6px;
  font-family: "Anton", sans-serif;
  letter-spacing: 0.06em;
}
.pf-carousel__count strong {
  font-size: 32px;
  font-weight: 400;
  color: var(--pf-text);
}
.pf-carousel__count span {
  font-size: 14px;
  color: var(--pf-text-3);
  letter-spacing: 0.2em;
}

.pf-quote {
  padding-top: 32px;
}
.pf-quote__mark {
  font-family: "Anton", sans-serif;
  font-size: 54px;
  /* Tight line-height collapses the extra below-glyph leading inside
     the line-box, halving the visible gap to the testimonial text
     that follows. Applies to every quote on the home + testimonials
     pages. */
  line-height: 0.75;
  color: var(--pf-text-3);
  margin-bottom: 4px;
}
.pf-quote blockquote {
  margin: 0 0 28px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 24px;
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: rgba(11, 11, 12,0.92);
}
.pf-quote__cite {
  display: flex; align-items: center; gap: 14px;
}
.pf-quote__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pf-bg-3);
  border: 1px solid var(--pf-line-2);
  font-family: "Anton", sans-serif;
  font-size: 18px;
  letter-spacing: 0;
  color: rgba(0, 0, 0, 0.78);
  text-transform: uppercase;
}
.pf-quote__name {
  font-family: "Anton", sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pf-quote__role {
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--pf-text-3);
  text-transform: uppercase;
}

/* before/after */
.pf-results {
  margin-top: 100px;
  padding-top: 80px;
  border-top: 1px solid var(--pf-line);
}
.pf-results__head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 48px;
}
.pf-results__head h3 {
  font-size: clamp(26px, 3.7vw, 54px);
  line-height: 0.95;
  max-width: 14ch;
}
.pf-results__head .meta {
  font-family: "Bebas Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.28em;
  color: var(--pf-text-3);
  text-transform: uppercase;
  text-align: right;
  max-width: 24ch;
}
.pf-grid-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.pf-results-carousel { position: relative; }
.pf-results-carousel__viewport {
  overflow: hidden;
  margin-bottom: 28px;
}
.pf-results-carousel__track {
  display: flex;
  gap: 24px;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pf-result--slide {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  background: var(--pf-bg-2);
  border: 1px solid var(--pf-line);
  opacity: 0.5;
  transition: opacity 0.35s ease;
}
.pf-result--slide.is-active,
.pf-result--slide.is-near {
  opacity: 1;
}
.pf-result {
  background: var(--pf-bg-2);
  border: 1px solid var(--pf-line);
}
.pf-result__pair {
  position: relative;
  display: block;
  background: #b8b8b8;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.pf-result__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(8%) contrast(1.02);
}
.pf-result__tag {
  position: absolute;
  top: 16px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #0b0b0c;
  background: rgba(212, 212, 212,0.7);
  padding: 4px 10px;
  backdrop-filter: blur(4px);
  z-index: 2;
}
.pf-result__tag--before { left: 16px; }
.pf-result__tag--after { right: 16px; }
.pf-result__pair::before {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(0, 0, 0,0.3);
  z-index: 2;
}
.pf-result__body {
  padding: 24px 24px 28px;
}
.pf-result__name {
  font-family: "Anton", sans-serif;
  font-size: 22px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pf-result__stats {
  display: flex; gap: 18px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pf-text-2);
}
.pf-result__stats strong { color: #0b0b0c; font-weight: 400; }

/* ─────────── CTA band ─────────── */
.pf-cta {
  padding: 80px 56px 160px;
  border-top: 1px solid var(--pf-line);
  background: linear-gradient(180deg, var(--pf-bg) 0%, #c0c0c0 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* (CTA had a stock-photo overlay; removed in favour of the
   plain dark gradient background defined on .pf-cta itself.) */
.pf-cta > * { position: relative; z-index: 1; }
.pf-cta__eyebrow {
  font-family: "Bebas Neue", sans-serif;
  font-size: 13px; letter-spacing: 0.32em;
  color: var(--pf-text-3);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.pf-cta h2 {
  font-size: clamp(43px, 6.6vw, 107px);
  line-height: 0.9;
  max-width: 16ch;
  margin: 0 auto 40px;
}
.pf-cta__btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #d4d4d4;
  background: #0b0b0c;
  padding: 20px 40px;
  text-decoration: none;
  border: 1px solid #0b0b0c;
  transition:
    color .2s ease,
    transform .25s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow .25s ease;
}
/* Light button on a dark section: greying the text + lifting the
   button reads more clearly than inverting the colours, which
   collides with the off-white inline background and made the text
   invisible. */
.pf-cta__btn:hover {
  color: rgba(212, 212, 212, 0.55);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.7);
}
.pf-cta__btn .arr { display: inline-block; transition: transform .2s ease; }
.pf-cta__btn:hover .arr { transform: translateX(4px); }
.pf-cta__sub {
  font-family: "Bebas Neue", sans-serif;
  font-size: 13px;
  letter-spacing: 0.26em;
  color: var(--pf-text-3);
  text-transform: uppercase;
  margin-top: 28px;
}

/* ─────────── footer ─────────── */
.pf-footer {
  border-top: 1px solid var(--pf-line);
  background: #c0c0c0;
  padding: 24px 56px;
}
.pf-footer__row {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.pf-footer__brand {
  display: flex; align-items: center; gap: 14px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pf-text-2);
}
.pf-footer__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  font-family: "Anton", sans-serif;
  font-size: 13px; letter-spacing: 0.04em;
  color: #d4d4d4; background: #0b0b0c;
  border-radius: 2px;
}
.pf-footer__name { color: rgba(11, 11, 12,0.92); }
.pf-footer__year { color: var(--pf-text-3); }
.pf-footer__links { display: flex; gap: 28px; }
.pf-footer__links a,
.pf-footer__links .pf-footer__placeholder {
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--pf-text-2); text-decoration: none;
  transition: color .2s;
}
.pf-footer__links a:hover { color: #0b0b0c; }
/* Inert placeholder for footer links until real Terms / Privacy
   pages exist. Looks identical to a link but isn't interactive. */
.pf-footer__placeholder { cursor: default; }

/* ─────────── direction B (tactical) overrides ─────────── */
.pf-root.is-tactical .pf-hero h1 { letter-spacing: -0.015em; }
.pf-root.is-tactical .pf-hero__inner {
  grid-template-columns: 1fr;
  padding-bottom: 120px;
}
.pf-root.is-tactical .pf-hero h1 em { color: #0b0b0c; opacity: 0.4; }
.pf-root.is-tactical .pf-hero__crosshair {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(0, 0, 0,0.08) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(0, 0, 0,0.08) 50%, transparent calc(50% + 0.5px));
}
.pf-root.is-tactical .pf-hero__corners::before,
.pf-root.is-tactical .pf-hero__corners::after,
.pf-root.is-tactical .pf-hero__corners > span::before,
.pf-root.is-tactical .pf-hero__corners > span::after {
  content: ""; position: absolute; width: 24px; height: 24px;
  border: 1px solid rgba(0, 0, 0,0.5);
}
.pf-root.is-tactical .pf-hero__corners {
  position: absolute; inset: 32px; pointer-events: none;
}
.pf-root.is-tactical .pf-hero__corners::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.pf-root.is-tactical .pf-hero__corners::after  { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.pf-root.is-tactical .pf-hero__corners > span::before { bottom: 0; left: 0; border-right: 0; border-top: 0; position: absolute; }
.pf-root.is-tactical .pf-hero__corners > span::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; position: absolute; }

/* ─────────── direction C (cinematic) overrides ─────────── */
.pf-root.is-cinematic { font-family: "Bebas Neue", sans-serif; }
.pf-root.is-cinematic .pf-hero { height: 960px; }
.pf-root.is-cinematic .pf-hero h1 {
  font-size: clamp(60px, 8vw, 120px);
  letter-spacing: 0.04em;
  line-height: 0.92;
}
.pf-root.is-cinematic .pf-hero__photo {
  filter: grayscale(60%) contrast(1.15) brightness(0.75);
}
.pf-root.is-cinematic .pf-section { padding: 120px 80px; }
.pf-root.is-cinematic .pf-services { grid-template-columns: 1fr; }
.pf-root.is-cinematic .pf-service { min-height: auto; }

/* ─────────── carrier (artboard scroll container) ─────────── */
.pf-artboard {
  width: 100%; height: 100%;
  overflow-y: auto; overflow-x: hidden;
  background: var(--pf-bg);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0,0.2) transparent;
}
.pf-artboard::-webkit-scrollbar { width: 8px; }
.pf-artboard::-webkit-scrollbar-thumb { background: rgba(0, 0, 0,0.2); border-radius: 4px; }

/* utility */
.pf-rule { height: 1px; background: var(--pf-line); margin: 0; }
.pf-link {
  font-family: "Bebas Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0b0b0c;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0,0.4);
  padding-bottom: 4px;
  display: inline-flex; gap: 10px; align-items: center;
}
.pf-link:hover { border-color: #0b0b0c; }


/* ─────────── for-you (pain points) ─────────── */
.pf-section--foryou { position: relative; overflow: hidden; padding-bottom: 140px; z-index: 0; }
.pf-section--foryou > * { position: relative; z-index: 1; }
.pf-foryou-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Solid page-bg on the left (covers the headline so dark text is
       legible against the otherwise-very-dark photo), fading out to
       reveal the photo on the right. */
    linear-gradient(90deg, var(--pf-bg) 0%, var(--pf-bg) 45%, rgba(212, 212, 212, 0.6) 65%, rgba(212, 212, 212, 0) 85%),
    /* Strong bottom-to-top grey fade — bottom 20% goes solid
       page-bg so the dark photo doesn't show through where text
       overlaps it. */
    linear-gradient(180deg, rgba(212, 212, 212, 0) 0%, rgba(212, 212, 212, 0) 35%, rgba(212, 212, 212, 0.5) 55%, rgba(212, 212, 212, 0.95) 75%, var(--pf-bg) 80%, var(--pf-bg) 100%),
    url("img/foryou-wallball-2.png");
  background-size: cover;
  background-position: right top;
  filter: contrast(1.02);
}
.pf-foryou {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 80px;
  row-gap: 48px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
/* (For You sub-classes — copy/pains/pivot/lede/setting — were
   removed when the section was simplified to title + photo only.) */

/* ─────────── goals (5 outcomes grid) ─────────── */
.pf-section--goals { position: relative; overflow: hidden; padding-bottom: 0; }
.pf-section--testimonials { padding-top: 70px; padding-bottom: 20px; }
.pf-section--testimonials .pf-section__head { margin-bottom: 40px; }
.pf-section--process { padding-top: 140px; position: relative; overflow: hidden; }
.pf-section--process > *:not(.pf-process-photo) { position: relative; z-index: 1; }
.pf-process-photo {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    /* Solid page-bg on the left so the headline ("How we work
       together.") reads cleanly against the dark photo. */
    linear-gradient(90deg, var(--pf-bg) 0%, var(--pf-bg) 45%, rgba(212, 212, 212, 0.6) 65%, rgba(212, 212, 212, 0) 85%),
    linear-gradient(180deg, rgba(212, 212, 212, 0) 70%, var(--pf-bg) 100%),
    url("img/process-rope-team.png");
  background-size: cover;
  /* Anchor to the top of the photo on desktop so the top of the
     frame is visible (mobile rule below has its own position). */
  background-position: center top;
  pointer-events: none;
}
.pf-section--pricing { padding-top: 0; border-top: 0; }
.pf-section--goals > * { position: relative; z-index: 1; }
.pf-goals-photo {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
  background-image:
    /* Solid page-bg on the left so the headline ("Whatever your
       goal…") reads cleanly against the dark photo. */
    linear-gradient(90deg, var(--pf-bg) 0%, var(--pf-bg) 45%, rgba(212, 212, 212, 0.6) 65%, rgba(212, 212, 212, 0) 85%),
    linear-gradient(180deg, rgba(212, 212, 212, 0) 0%, rgba(212, 212, 212, 0) 70%, rgba(212, 212, 212, 0.55) 88%, var(--pf-bg) 100%),
    url("assets/tz-ropes-fade.png");
  background-size: cover;
  background-position: right top;
  filter: contrast(1.02);
}
.pf-goals {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--pf-line);
  margin-top: 165px;
}
.pf-goal {
  padding: 32px 24px 36px 0;
  border-right: 1px solid var(--pf-line);
}
.pf-goal:last-child { border-right: 0; padding-right: 0; }
.pf-goal:not(:first-child) { padding-left: 24px; }
.pf-goal__num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 12px; letter-spacing: 0.3em;
  color: var(--pf-text-3); margin-bottom: 28px;
}
.pf-goal h4 {
  font-size: 22px; letter-spacing: 0.02em;
  margin-bottom: 12px; line-height: 1;
}
.pf-goal p {
  font-family: "Bebas Neue", sans-serif;
  font-size: 14px; letter-spacing: 0.05em;
  line-height: 1.55;
  color: var(--pf-text-2);
}

/* ─────────── pricing ─────────── */
.pf-pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.pf-tier {
  position: relative;
  padding: 48px 40px;
  border: 1px solid var(--pf-line);
  background: var(--pf-bg-2);
  display: flex; flex-direction: column;
  transition:
    transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 280ms ease,
    background-color 280ms ease,
    box-shadow 280ms ease;
}
.pf-tier:hover {
  transform: translateY(-6px);
  border-color: var(--pf-text-2);
  background: var(--pf-bg-3);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}
.pf-tier.is-featured {
  border-color: var(--pf-text-2);
  background: var(--pf-bg-3);
}
.pf-tier.is-featured:hover {
  transform: translateY(-6px);
  border-color: #0b0b0c;
  box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.7);
}
.pf-tier__badge {
  position: absolute; top: -1px; right: -1px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: #d4d4d4; background: #0b0b0c;
  padding: 6px 14px;
}
.pf-tier__h {
  font-family: "Anton", sans-serif;
  font-size: 62px; line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase;
  color: #0b0b0c;
  margin-bottom: 16px;
}
.pf-tier__price {
  font-family: "Anton", sans-serif;
  font-size: 18px; letter-spacing: 0.04em;
  color: #0b0b0c;
  margin-bottom: 8px;
}
.pf-tier__sub {
  font-family: "Bebas Neue", sans-serif;
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--pf-text-3);
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--pf-line);
}
.pf-tier__bullets {
  list-style: none; padding: 0; margin: 0 0 36px;
  display: grid; gap: 12px;
}
.pf-tier__bullets li {
  font-family: "Bebas Neue", sans-serif;
  font-size: 16px; letter-spacing: 0.05em;
  color: rgba(11, 11, 12,0.88);
  padding-left: 24px;
  position: relative;
}
.pf-tier__bullets li::before {
  content: "—"; position: absolute; left: 0;
  color: var(--pf-text-3);
}
.pf-tier__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: space-between;
  font-family: "Bebas Neue", sans-serif;
  font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #0b0b0c; text-decoration: none;
  padding: 16px 22px;
  border: 1px solid rgba(0, 0, 0,0.45);
  transition: background .2s, color .2s, border-color .2s;
}
.pf-tier__cta:hover { background: #0b0b0c; color: #d4d4d4; border-color: #0b0b0c; }
.pf-tier__cta .arr { transition: transform .2s; }
.pf-tier__cta:hover .arr { transform: translateX(3px); }
/* Featured (recommended) tier shows the dark variant by default —
   matches the hover state of the regular tier so it pops in the
   pricing strip. */
.pf-tier.is-featured .pf-tier__cta { background: #0b0b0c; color: #d4d4d4; border-color: #0b0b0c; }

/* The For You section now contains its photo cleanly, so the next
   section uses normal section styling — no overrides needed here.
   We do tighten the top buffer on the About / Meet Shyam section so
   it sits closer to the section divider above. */
.pf-section[data-screen-label="About"] { padding-top: 70px; }
.pf-section[data-screen-label="Services"] { padding-top: 70px; }

/* (Outcomes / tick-list section was removed from the page; its
   styles have been deleted with it.) */

/* ============================================================
   ─────────── MOBILE OPTIMIZATION ───────────
   Restack multi-column grids, shrink section padding, simplify
   the nav, resize the carousels and CTA. Two breakpoints:
   - max-width: 900px  → tablet portrait & phones
   - max-width: 480px  → finer phone-only tweaks
   ============================================================ */

/* ───────── Mobile burger nav ─────────
   Burger lives in the .pf-nav header on every page. On desktop it's
   hidden; on mobile it sits top-left, the brand wordmark centres,
   and the menu is a drop-down panel below the nav bar. */

.pf-nav__burger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  z-index: 31;
}
.pf-nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #0b0b0c;
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
.pf-nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.pf-nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.pf-nav__burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Push the Process section's steps further down beneath the title. */
.pf-section--process .pf-section__head { margin-bottom: 160px; }

/* Pricing section photo — desktop hides it, mobile shows it
   above the 'Coaching packages' heading. */
.pf-pricing-photo { display: none; }

@media (max-width: 900px) {
/* ── nav ── */
  .pf-nav {
    padding: 18px 24px;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
  .pf-nav__menu { display: none; }
  .pf-nav__brand { justify-self: start; font-size: 18px; gap: 8px; }
  .pf-nav__brand span:not(.dot) { white-space: nowrap; }
  .pf-nav__cta { padding: 8px 14px; font-size: 12px; letter-spacing: 0.18em; }

  /* ── hero ── */
  .pf-hero { min-height: 480px; }
  /* Portrait-oriented hero shot for mobile (the desktop wide hero
     gets cropped awkwardly on a phone). Top anchor matches desktop. */
  .pf-hero__photo {
    background-image: url("img/hero-mobile.jpeg");
    background-position: center top;
  }
  .pf-hero__inner {
    padding: 0 24px 56px;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pf-hero h1 { font-size: clamp(48px, 12vw, 88px); }
  .pf-hero__strap {
    left: 24px; right: 24px; bottom: 18px;
    font-size: 11px;
    letter-spacing: 0.2em;
  }

  /* ── marquee ── */
  .pf-strap__track { font-size: 18px; gap: 0; padding: 18px 0; }
  .pf-strap__track > span { gap: 32px; padding-right: 32px; }

  /* ── section base ── */
  .pf-section { padding: 64px 24px; }
  .pf-section__head { gap: 24px; margin-bottom: 40px; }
  .pf-section__title h2 { font-size: clamp(32px, 7.5vw, 56px); max-width: 22ch; }
  .pf-section__title p { font-size: 16px; }

  /* per-section padding overrides we set earlier */
  .pf-section[data-screen-label="About"] { padding-top: 40px; }
  .pf-section[data-screen-label="Services"] { padding-top: 40px; }
  .pf-section--testimonials { padding-top: 40px; }
  .pf-section--testimonials .pf-section__head { margin-bottom: 24px; }
  .pf-section--process { padding-top: 64px; }
  .pf-section--pricing { padding-top: 0; }

  /* For You section is title + photo only — no further mobile
     rules needed for sub-elements. */

  /* ── About (home preview) ── */
  .pf-about {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pf-about__photo { min-height: 360px; }
  .pf-about__copy h3 { font-size: clamp(28px, 6vw, 40px); }
  .pf-about__copy .lede { font-size: 19px; }
  .pf-about__copy p { font-size: 16px; }
  .pf-stats { grid-template-columns: 1fr; gap: 16px; }
  .pf-stats__item { padding: 16px 0; }

  /* ── Goals (5-up grid → 1-up) ── */
  .pf-goals {
    grid-template-columns: 1fr;
    margin-top: 80px;
  }
  .pf-goal {
    padding: 24px 0 28px 0;
    border-right: 0;
    border-top: 1px solid var(--pf-line);
  }
  .pf-goal:first-child { border-top: 0; }
  .pf-goal:last-child { padding-right: 0; }
  .pf-goals-photo { background-position: center top; }

  /* ── Services (3-up → 1-up) ── */
  .pf-services { grid-template-columns: 1fr; gap: 24px; }
  .pf-service { padding: 28px 24px; }
  .pf-service h3 { font-size: 24px; max-width: none; }
  .pf-service p { max-width: none; font-size: 15px; }

  /* ── Pricing (2-up → 1-up) ── */
  .pf-pricing { grid-template-columns: 1fr; gap: 24px; }
  .pf-tier { padding: 32px 24px; }
  /* Swapped per the new layout — the tier name (e.g. "3 Months")
     is now the big number on mobile, POA is the small uppercase line. */
  .pf-tier__h { font-size: 45px; }
  .pf-tier__price { font-size: 16px; }

  /* ── Process (4-up → 1-up) ── */
  .pf-process { grid-template-columns: 1fr; }
  .pf-step {
    padding: 28px 0 32px 0;
    border-right: 0;
    border-top: 1px solid var(--pf-line);
  }
  .pf-step:first-child { border-top: 0; }
  .pf-step:not(:first-child) { padding-left: 0; }
  .pf-step__num { font-size: 64px; margin-bottom: 14px; }
  .pf-step h4 { font-size: 19px; }
  .pf-step p { font-size: 15px; }

  /* ── Testimonials carousel ── */
  .pf-carousel {
    --pf-card-w: calc(100vw - 48px);
    --pf-card-gap: 24px;
  }
  .pf-carousel__viewport { margin-right: -24px; }
  .pf-quote--card blockquote { font-size: 19px; line-height: 1.4; }
  .pf-quote__cite { gap: 12px; }
  .pf-quote__avatar { width: 36px; height: 36px; }
  .pf-carousel__controls {
    margin-top: 32px;
    padding-top: 22px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .pf-carousel__btn { width: 44px; height: 44px; }
  .pf-carousel__count { font-size: 13px; }
  .pf-carousel__count strong { font-size: 22px; }

  /* ── Transformations carousel (3-up → 1-up) ── */
  .pf-results { margin-top: 60px; padding-top: 50px; }
  .pf-results-carousel { --pf-result-step: calc(100% + 24px); }
  .pf-result--slide { flex: 0 0 100%; }

  /* ── CTA band ── */
  .pf-cta { padding: 56px 24px 80px; }
  .pf-cta__eyebrow { font-size: 11px; letter-spacing: 0.22em; }
  .pf-cta h2 { font-size: clamp(32px, 8vw, 56px); margin: 12px 0 28px; }
  .pf-cta__btn { padding: 16px 28px; font-size: 14px; letter-spacing: 0.22em; }
  .pf-cta__sub { font-size: 12px; letter-spacing: 0.22em; }

  /* ── Footer ── */
  .pf-footer { padding: 24px; }
  .pf-footer__row {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .pf-footer__brand { gap: 10px; flex-wrap: wrap; }
  .pf-footer__links { gap: 16px; }

/* Stats — compact 3-column row instead of vertical stack */
  .pf-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--pf-line);
    padding-top: 20px;
  }
  .pf-stats__item {
    padding: 14px 8px;
    text-align: center;
    border-right: 1px solid var(--pf-line);
  }
  .pf-stats__item:last-child { border-right: 0; }
  .pf-stats__num { font-size: 32px; line-height: 1; }
  .pf-stats__num sup { font-size: 0.5em; }
  .pf-stats__lbl { font-size: 11px; letter-spacing: 0.16em; }

  /* Goals — desktop adds padding-left: 24px to non-first children
     for the 5-column grid; on mobile single-column that misaligns
     goal 1 against 2–5. Reset to 0 so all goals are flush left. */
  .pf-goal:not(:first-child) { padding-left: 0; }

  /* Goals + Process backgrounds on mobile. Goals: stay pushed
     right and add a stronger dark overlay so the headline reads
     cleanly against the photo at narrow widths. Process: shift
     slightly left so the figure on the right of the original photo
     sits closer to the centre of the viewport. */
  .pf-goals-photo {
    background-image:
      linear-gradient(
        180deg,
        rgba(212, 212, 212, 0.55) 0%,
        rgba(212, 212, 212, 0.4) 50%,
        rgba(212, 212, 212, 0.7) 88%,
        var(--pf-bg) 100%
      ),
      url("assets/tz-ropes-fade.png");
    background-position: 75% top;
  }
  .pf-process-photo { background-position: 80% 30%; }

  /* CTA heading: max-width was leaving the block left-aligned
     even though text-align is center. Auto margins centre the
     heading block on the page. */
  .pf-cta h2 { margin-left: auto; margin-right: auto; }

  /* Footer — center every part instead of flex-start */
  .pf-footer__row { align-items: center; text-align: center; }
  .pf-footer__brand { justify-content: center; }
  .pf-footer__links { justify-content: center; }

/* Three-column nav: burger left, brand centre, CTA right. */
  .pf-nav { grid-template-columns: auto 1fr auto; }
  .pf-nav__burger { display: flex; justify-self: start; }
  .pf-nav__brand { justify-self: center; }

  /* Override the earlier `display:none` on .pf-nav__menu — on mobile it
     becomes the drop-down panel that the burger toggles. */
  .pf-nav__menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--pf-bg);
    border-top: 1px solid var(--pf-line);
    border-bottom: 1px solid var(--pf-line);
    padding: 8px 24px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
    z-index: 28;
  }
  .pf-nav__menu.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .pf-nav__menu a {
    padding: 16px 0;
    border-bottom: 1px solid var(--pf-line);
    font-size: 15px;
  }
  .pf-nav__menu a:last-child { border-bottom: 0; }

  /* Mobile drop-down shows all three nav items (Home / About / Contact). */

/* Mobile drop-down panel sits on the light page bg, so its
     links go back to dark text for legibility. */
  .pf-nav__menu { background: var(--pf-bg); }
  .pf-nav__menu a,
  .pf-nav__menu a:hover,
  .pf-nav__menu a.is-active { color: var(--pf-text); }
  .pf-nav__menu a.is-active::after { background: var(--pf-text); }

.pf-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .pf-reveal.is-revealed {
    opacity: 1;
    transform: none;
  }

.pf-pricing-photo {
    display: block;
    width: 100vw;
    margin-left: -24px;   /* break out of the 24px section padding */
    margin-right: -24px;
    height: 280px;
    background-image: url("img/pricing-pullup-2.jpeg");
    background-size: cover;
    background-position: center;
    margin-bottom: 32px;
  }

/* For You: cap headline width so dark text never crosses
     into the dark photo area on the right. */
  .pf-section--foryou .pf-section__title h2 { max-width: 60%; }

  /* Hero ticker — slower on mobile so a single phrase has time
     to be read at small font sizes. */
  .pf-strap__track { animation-duration: 22.11s; }

  /* Process section: photo sits as the section's absolute
     background (same approach as the Goals section) — heading and
     steps render on top, the desktop left-fade gradient keeps the
     left side opaque so text reads cleanly. */
  .pf-section--process {
    padding-top: 64px;
    padding-bottom: 64px;
    overflow: hidden;
    /* Drop any flex-direction layout — let the photo be absolute and
       text flow normally on top. */
    display: block;
    position: relative;
  }
  .pf-section--process .pf-section__head {
    margin-bottom: 8px;
  }

  /* Coaching packages photo: contained (no breakout) + 1px border
     so it reads like a framed photo, similar to the Meet Shyam image. */
  .pf-pricing-photo {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border: 1px solid var(--pf-line);
  }
  /* Drop the hairline above the steps that sat directly under the
     'How we work together' heading. Inter-step borders stay. */
  .pf-process { border-top: 0; }
}

@media (max-width: 480px) {
  .pf-section { padding: 48px 18px; }
  .pf-nav { padding: 14px 18px; }
  .pf-hero__inner { padding: 0 18px 48px; }
  .pf-hero__strap { left: 18px; right: 18px; }
  .pf-cta { padding: 48px 18px 64px; }
  .pf-footer { padding: 20px 18px; }
  .pf-tier { padding: 28px 20px; }
  .pf-service { padding: 24px 20px; }
  .pf-quote--card blockquote { font-size: 17px; }
}

/* ───────── Mobile follow-up tweaks ───────── */






/* ============================================================
   ─────────── DARK HERO OVERRIDES ───────────
   The hero section keeps its dark-photo treatment regardless of
   the page being on the light theme. Photos fade to black, all
   hero text is white, the nav (which lives inside the hero) is
   white, the burger lines are white. The mobile drop-down menu
   panel still uses dark text on light bg (it sits below the
   hero, on the page bg).
   ============================================================ */

/* Bottom + top fades on the hero photo, now black. */
.pf-hero__photo::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 1) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 25%);
}

/* Hero text — white. */
.pf-hero h1 { color: #fff; }
.pf-hero h1 em { color: rgba(255, 255, 255, 0.62); }
.pf-hero__strap { color: rgba(255, 255, 255, 0.42); }
.pf-hero__meta { color: rgba(255, 255, 255, 0.62); }
.pf-hero__meta strong { color: #fff; }

/* Nav (always inside a dark hero on every page) — white. */
.pf-nav { color: #fff; }
.pf-nav__menu a { color: rgba(255, 255, 255, 0.78); }
.pf-nav__menu a:hover { color: #fff; }
.pf-nav__menu a.is-active { color: #fff; }
.pf-nav__menu a.is-active::after { background: #fff; }
.pf-nav__cta { color: #fff; border: 1px solid #fff; }
.pf-nav__cta:hover { background: #fff; color: #0b0b0c; border-color: #fff; }
.pf-nav__burger span { background: #fff; }

/* The dark-hero overrides above set every nav menu link white,
   which is correct over the dark hero photo. But the mobile
   burger drop-down panel sits below the hero on the light grey
   page bg — so links and dividers need to flip back to black for
   legibility. This re-asserts those styles AFTER the dark-hero
   block so source order wins on mobile. */
@media (max-width: 900px) {
  .pf-nav__menu a,
  .pf-nav__menu a:hover,
  .pf-nav__menu a.is-active { color: var(--pf-text); }
  .pf-nav__menu a { border-bottom: 1px solid var(--pf-text); }
  .pf-nav__menu a:last-child { border-bottom: 0; }
  /* The desktop active indicator (::after underline at bottom: -2px)
     would stack with the bottom border above, making the divider
     under the current page look ~2x thicker. Hide it on mobile —
     the bottom border alone is enough visual separation. */
  .pf-nav__menu a.is-active::after { display: none; }
}





/* ───────── Mobile scroll-reveal ─────────
   Subtle fade + 16px rise as elements enter the viewport on mobile.
   Driven by reveal.js (which adds .pf-reveal then .is-revealed).
   Respects prefers-reduced-motion. */


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


/* ============================================================
   ─────────── Mobile auto-hide sticky nav ───────────
   Once the user scrolls past the hero on mobile, the nav becomes
   a fixed bar at the top of the viewport. Scrolling DOWN slides
   it out of view; scrolling UP brings it back. Activated only
   <=900px via nav.js; the desktop layout is unchanged.
   ============================================================ */
@media (max-width: 900px) {
  .pf-nav.pf-nav--stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--pf-bg);
    border-bottom: 1px solid rgba(11, 11, 12, 0.12);
    padding: 14px 24px;
    transform: translateY(0);
    transition: transform 0.22s ease, opacity 0.22s ease;
    box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.25);
  }
  .pf-nav.pf-nav--stuck.pf-nav--hidden {
    transform: translateY(-100%);
  }
  /* When the nav is "stuck" over the light page background, override
     the dark-hero white text rules so links and the burger lines
     stay legible. */
  .pf-nav.pf-nav--stuck,
  .pf-nav.pf-nav--stuck .pf-nav__brand,
  .pf-nav.pf-nav--stuck .pf-nav__brand span,
  .pf-nav.pf-nav--stuck .pf-nav__cta {
    color: var(--pf-text);
  }
  .pf-nav.pf-nav--stuck .pf-nav__cta {
    border-color: var(--pf-text);
  }
  .pf-nav.pf-nav--stuck .pf-nav__burger span {
    background: var(--pf-text);
  }
  /* The drop-down panel anchors below the nav. When the nav is
     stuck, ensure the panel still appears immediately under it. */
  .pf-nav.pf-nav--stuck .pf-nav__menu {
    top: 100%;
  }
}


/* ============================================================
   ─────────── My Journey section ───────────
   Sits between Process and Testimonials on the home page. Photo
   + body copy, side-by-side on desktop, photo-on-top stack on
   mobile (source order: photo then copy, so the mobile stack is
   automatic).
   ============================================================ */
/* Section buffers halved on this section specifically so the
   distance between the section divider/title and the content
   matches the user's spec. */
.pf-section--journey { padding-top: 70px; padding-bottom: 70px; }
.pf-journey {
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr;
  gap: 64px;
  align-items: center;
  /* No max-width / auto margins here: the photo's left edge needs
     to align with the section's title (which uses the section's
     own left padding as its left bound). */
}
.pf-journey__photo {
  width: 100%;
  overflow: hidden;
}
.pf-journey__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.pf-journey__copy p {
  /* Match the home page Outcomes Not Opinions testimonial copy. */
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: 0.03em;
  line-height: 1.4;
  color: rgba(11, 11, 12, 0.92);
  /* No max-width — let the paragraph fill its grid column so the
     line-length matches the testimonial in Outcomes Not Opinions
     (which is also unconstrained inside its right-column). */
  max-width: none;
  margin: 0 0 28px;
}
.pf-journey__copy p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  /* Mobile: halve the section buffers too (default mobile padding
     is 64px → 32px each side). */
  .pf-section--journey { padding-top: 32px; padding-bottom: 32px; }
  .pf-journey {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pf-journey__copy p {
    /* Match the mobile testimonial card font-size from the carousel. */
    font-size: 19px;
    line-height: 1.4;
    max-width: none;
  }
}

/* ============================================================
   ─────────── Home testimonial preview ───────────
   A single, centered quote replaces the full carousel on the
   home page. Below it sits a "See more" link that routes to
   the dedicated /testimonials page. A single transformation
   card (Sagaar) sits above the quote.
   ============================================================ */
/* Legacy single-column wrapper, kept for any pages that still use it. */
.pf-home-transform {
  max-width: 520px;
  margin: 0 0 48px;
}
@media (max-width: 900px) {
  .pf-home-transform { max-width: 100%; margin-bottom: 32px; }
}
/* New home testimonial layout — Sagaar's transformation card on the
   left, his written quote on the right. Stacks on mobile. */
.pf-home-testimonial {
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr;
  gap: 56px;
  /* Top-align so the big quote marks line up with the top of the
     transformation image on the left. */
  align-items: start;
  margin-bottom: 48px;
}
.pf-home-testimonial__card { width: 100%; }
.pf-home-testimonial__quote .pf-quote--single {
  max-width: none;
  width: 100%;
}
.pf-home-testimonial__quote .pf-quote--single blockquote {
  margin-bottom: 0;
}
/* Paragraph spacing inside the blockquote — the home quote is split
   into two paragraphs (after "...follow and sustainable."), so each
   <p> gets a clean break without inheriting external margins. */
.pf-home-testimonial__quote blockquote p {
  margin: 0;
}
.pf-home-testimonial__quote blockquote p + p {
  margin-top: 1em;
}
/* The base `.pf-quote { padding-top: 32px }` rule wins on source
   order over `.pf-quote--card { padding-top: 0 }`. Without this,
   the quote mark sits 32px lower than the image top. Add a tight
   line-height + small negative margin to also compensate for the
   Anton font's above-cap space so the visible `"` glyph lines up
   flush with the top of the image. */
.pf-home-testimonial__quote .pf-quote { padding-top: 0; }
.pf-home-testimonial__quote .pf-quote__mark {
  /* Inherits line-height: 0.75 from the base rule. Only the
     margin-top is needed here, to keep the visible glyph aligned
     with the image top after compensating for Anton's above-cap
     metrics. */
  margin-top: -10px;
}
@media (max-width: 900px) {
  .pf-home-testimonial {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 32px;
  }
}
.pf-testimonial-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
}
/* Single-card variant overrides the carousel's flex-sizing so
   the quote isn't constrained to a card width. */
.pf-quote--single {
  flex: 0 1 auto;
  width: 100%;
  max-width: 880px;
  opacity: 1;
}
.pf-quote--single .pf-quote__mark {
  font-size: 84px;
}
.pf-quote--single blockquote {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.4;
  margin-bottom: 36px;
}
.pf-testimonial-preview__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pf-text);
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid var(--pf-text);
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.pf-testimonial-preview__cta:hover {
  background: var(--pf-text);
  color: var(--pf-bg);
  transform: translateY(-1px);
}
.pf-testimonial-preview__cta .arr {
  transition: transform 160ms ease;
}
.pf-testimonial-preview__cta:hover .arr {
  transform: translateX(3px);
}
@media (max-width: 900px) {
  .pf-quote--single blockquote { font-size: 19px; line-height: 1.45; }
  .pf-testimonial-preview { gap: 28px; }
  .pf-testimonial-preview__cta { padding: 12px 20px; font-size: 13px; }
}

/* ============================================================
   ─────────── Application modal ───────────
   Triggered by the "Book a call" CTA in the nav. Mirrors the
   contact-page application form inside a centered dialog with
   a dimmed backdrop. Closed via the corner X, backdrop click,
   or the Escape key (handled in modal.js).
   ============================================================ */
.pf-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.pf-modal[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.pf-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 11, 12, 0.55);
  cursor: pointer;
}
.pf-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--pf-bg);
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 56px 56px 48px;
  border: 1px solid rgba(11, 11, 12, 0.18);
  box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.55);
  transform: translateY(12px);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  -webkit-overflow-scrolling: touch;
}
.pf-modal[aria-hidden="false"] .pf-modal__panel {
  transform: translateY(0);
}
.pf-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Bebas Neue", sans-serif;
  font-size: 28px;
  line-height: 1;
  color: var(--pf-text);
  border-radius: 999px;
  transition: background 160ms ease, transform 160ms ease;
}
.pf-modal__close:hover {
  background: rgba(11, 11, 12, 0.08);
  transform: rotate(90deg);
}
/* Inside the modal panel, the form title doesn't need the contact
   page's bottom-margin since the panel padding already provides
   space below. */
.pf-modal__panel .pf-contact__form-title {
  margin-bottom: 36px;
}
/* Lock background scroll while modal is open. */
body.pf-modal-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  /* On small screens the modal goes full-bleed so the form has
     room to breathe; the X stays pinned to the top-right. */
  .pf-modal { padding: 0; align-items: stretch; }
  .pf-modal__panel {
    padding: 56px 20px 32px;
    max-width: 100%;
    max-height: 100vh;
    border: 0;
  }
  .pf-modal__close { top: 10px; right: 10px; }
  .pf-modal__panel .pf-contact__form-title { margin-bottom: 28px; }
}




/* ───────── More v2 mobile tweaks ───────── */


/* CTA heading — give it a touch more line-height so wrapped lines
   don't collide with their neighbours. Applies on home + about. */
.pf-cta h2 { line-height: 1.15; }



/* ───────── Border around mobile section photos + remove process line ───────── */


@media (max-width: 900px) {
  /* In the Process section the small grey description under each
     step heading shouldn't run past 70% of the viewport so it
     doesn't sit over the photo's right side. */
  .pf-section--process .pf-step p { max-width: 70%; }
}

@media (max-width: 900px) {
  /* Process photo: zoom out ~20% so more of the image is visible
     (image gets sized to 80% of container height instead of cover). */
  .pf-process-photo {
    background-size: cover, cover, auto 80%;
    /* Don't tile the (now-smaller) image — the empty space shows
       the section's grey bg instead of repeating the photo. */
    background-repeat: no-repeat;
    background-color: var(--pf-bg);
  }
}

/* On very small phones (≈iPhone SE / 12 mini width and below) the
   "Apply for coaching" text inside the nav CTA can't fit on one
   line, so it wraps to two. Pull the text closer to the arrow and
   shrink the overall box: tighter padding, smaller letter-spacing,
   smaller gap, and a tight line-height so the wrapped lines stack
   cleanly without a big visual gap to the arrow on the right. */
@media (max-width: 430px) {
  .pf-nav__cta {
    padding: 6px 10px;
    font-size: 11px;
    letter-spacing: 0.10em;
    gap: 4px;
    line-height: 1.15;
  }
}