/* THE COACHING ENTERPRISE — Hunters Strength & Fitness, Ipswich
   One accent (--accent) is reserved for: the chalk path, waypoint numbers, CTAs. */

:root {
  --charcoal: #161616;
  --bone: #f4efe6;
  --ink: #211d18;
  --ink-soft: #4c463d;
  --accent: #dc1e1e;        /* Hunters brand red */
  --accent-deep: #a81717;   /* darkened for large text on bone — 3:1+ */
  --card: #fffdf8;
  --line: #d8d0c1;
  --display: "Anton", "Arial Narrow", sans-serif;
  --body: "Source Sans 3", "Gill Sans", "Trebuchet MS", sans-serif;
}

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

/* A hidden element must actually be hidden. #consult-form and .btn both set
   display, which beats the UA stylesheet's [hidden] rule — without this the
   form stays on screen after a successful submit, and a booking button with
   no link to point at still renders. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
}

/* The offset sections and the camera transform push content past the viewport
   edge. `hidden` only stops that being *scrolled* on some engines — iOS Safari
   still lets a finger drag the page sideways. `clip` creates no scroll
   container at all, so the only thing that moves the view horizontally is the
   scroll-driven camera. Pinch-zoom panning is unaffected. */
html, body {
  overflow-x: hidden;   /* fallback for engines without `clip` */
  overflow-x: clip;
}

/* chalk-dust grain over everything, very quiet */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

p, li { max-width: 62ch; }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--charcoal);
  color: var(--bone);
  padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- buttons: the one action ---------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(220, 30, 30, 0.35); }
.btn:active { transform: translateY(0); }
.btn-primary {
  font-size: 1.35rem;
  padding: 1rem 2.2rem;
}
.btn-small {
  font-size: 1rem;
  padding: 0.55rem 1.1rem;
}

/* ---------- header: logo + CTA, nothing to leak attention ---------- */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
}
/* the supplied lockup, white variant — the header sits over the dark hero */
.logo { line-height: 0; }
.logo img { display: block; height: 4.5rem; width: auto; }
/* the footer is charcoal, so it takes the white variant too */
.footer-logo { display: block; height: 6rem; width: auto; margin: 0 auto 1.4rem; }

/* ---------- hero: charcoal grading to bone ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.25rem 34vh;
  /* Two evenly-spaced stops give the eye two edges to catch: the kink where
     charcoal starts moving, and the near-vertical run into bone. Sampled on a
     smoothstep instead, so the ramp eases in and out with no corner anywhere,
     with a warm bias through the midtones to keep the brown the design had. */
  background: linear-gradient(180deg,
    var(--charcoal) 0%,
    var(--charcoal) 68%,
    #201f1d 72%,
    #3c3831 76%,
    #615b4f 80%,
    #8b8374 84%,
    #b3aa9c 88%,
    #d4cdc0 92%,
    #ebe6db 96%,
    var(--bone) 100%);
  color: var(--bone);
}
.hero-inner { max-width: 60rem; }
.eyebrow {
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.75);
  margin-bottom: 1.4rem;
}
/* his name leads, the company sits under it as the fine print it is */
.eyebrow-name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.8rem, 4.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 0.35rem;
}
.hero h1 {
  font-size: clamp(2.8rem, 8vw, 5.6rem);
  margin-bottom: 1.4rem;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  color: rgba(244, 239, 230, 0.88);
  margin: 0 auto 2.2rem;
}
.trust-line {
  margin: 1.1rem auto 0;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: #fff;
}
/* stacked, the line drops past the hero's fade to bone and lands on the light
   end of it, where white has nothing to sit against */
@media (max-width: 800px) {
  .trust-line { color: var(--ink); }
}

/* ---------- the chalk path ---------- */
#chalk-path {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
#stroke-main {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* soft under-glow on the same geometry — lifts the line off the page */
#stroke-dust {
  fill: none;
  stroke: var(--accent);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.1;
}
#path-arrow {
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 200ms ease;
}
#path-arrow.on { opacity: 0.95; }
#path-marker .marker-dot { fill: var(--accent); }
#path-marker .marker-halo { fill: var(--accent); opacity: 0.22; }

main { position: relative; }
/* everything except the svg sits above the path */
main > section > * { position: relative; z-index: 1; }

/* ---------- waypoint sections ---------- */
.wp {
  position: relative;
  padding: clamp(6rem, 12vh, 9rem) clamp(1.25rem, 5vw, 3rem);
  max-width: 72rem;
  /* the gap below each section is where the line makes its move */
  margin: 0 auto 6rem;
}
.wp h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin-bottom: 1.2rem;
}
.wp-content { width: min(46%, 34rem); }
.wp[data-side="right"] .wp-content { margin-left: auto; }
.wp[data-side="left"] .wp-content { margin-right: auto; }

/* numbered nodes sit ON the line; JS threads the path through their centres */
.node {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}
.node-num {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--bone);
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 6px var(--bone);
}
.node-num span {
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--accent-deep);
}
.node-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--bone);
}
/* node x-positions — the weave. Content sits on the opposite side. */
.wp[data-side="right"] .node { left: 24%; top: clamp(6rem, 12vh, 9rem); }
.wp[data-side="left"]  .node { left: 76%; top: clamp(6rem, 12vh, 9rem); }
.coach .node-dot { left: 50%; top: 3.5rem; }
.finale .node-dot { left: 50%; top: 3rem; }

.next-line {
  margin-top: 1.6rem;
  font-weight: 600;
  font-style: italic;
  color: var(--ink-soft);
}
.next-line.centred { text-align: center; margin-inline: auto; }

.pain-list { list-style: none; margin-bottom: 1.2rem; }
.pain-list li {
  padding: 0.55rem 0 0.55rem 1.6rem;
  position: relative;
  font-size: 1.2rem;
  font-weight: 600;
}
.pain-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-soft);
}

.check-list { list-style: none; }
.check-list li {
  padding: 0.4rem 0 0.4rem 1.9rem;
  position: relative;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78rem;
  width: 14px;
  height: 9px;
  border-left: 3px solid var(--ink-soft);
  border-bottom: 3px solid var(--ink-soft);
  transform: rotate(-45deg);
}
.plain-promise {
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  background: var(--card);
  border-left: 4px solid var(--charcoal);
  font-weight: 600;
}

.steps { list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  padding: 0.7rem 0 0.7rem 3rem;
  position: relative;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.7rem;
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--accent-deep);
}

/* ---------- phones (plan artefact + chat frames) ---------- */
.phone {
  width: min(300px, 78vw);
  aspect-ratio: 390 / 844;
  background: var(--charcoal);
  border-radius: 34px;
  padding: 12px;
  box-shadow: 0 18px 50px rgba(22, 22, 22, 0.28);
}
.phone-screen {
  height: 100%;
  border-radius: 24px;
  background: #211f1c;
  color: #efe9dd;
  padding: 1.5rem 1.1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 0.92rem;
}
.plan-phone { margin-top: 3rem; }
.app-head {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b9b1a2;
}
.app-head span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  color: #efe9dd;
}
.app-rows { list-style: none; }
.app-rows li {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(239, 233, 221, 0.14);
}
.app-rows li strong { display: block; }
.app-rows li span { color: #b9b1a2; font-size: 0.85rem; }
.app-note {
  margin-top: auto;
  font-style: italic;
  font-size: 0.85rem;
  color: #b9b1a2;
  border-left: 3px solid var(--accent);
  padding-left: 0.7rem;
}

.chat-day {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b9b1a2;
}
.bubble {
  max-width: 88%;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.from-client {
  align-self: flex-end;
  background: #3a362f;
  border-bottom-right-radius: 4px;
}
.from-coach {
  align-self: flex-start;
  background: #4a2415;
  border-bottom-left-radius: 4px;
}
.video-chip {
  display: block;
  margin-top: 0.45rem;
  padding: 0.35rem 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  font-size: 0.78rem;
  color: #b9b1a2;
}

/* ---------- week strip ---------- */
.wp-week .wp-content { margin-bottom: 2.5rem; }
.week-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.6rem;
}
.day {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8rem 0.7rem 1rem;
  min-height: 9.5rem;
}
.day-on { border-top: 4px solid var(--charcoal); }
.day-name {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}
.day-what { font-size: 0.88rem; color: var(--ink-soft); }
.phones {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  margin-top: 3.2rem;
  flex-wrap: wrap;
}

/* ---------- proof ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2.2rem 0 3rem;
  text-align: center;
}
.stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.3rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.6rem 1rem;
}
.stat dd .count {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  color: var(--ink);
}
.stat dt { font-size: 0.95rem; color: var(--ink-soft); max-width: none; }

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.t-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.t-card blockquote { font-size: 1.02rem; }
.t-card figcaption { font-size: 0.92rem; color: var(--ink-soft); margin-top: auto; }
.t-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, #e7e0d2, #e7e0d2 6px, #ded6c6 6px, #ded6c6 12px);
  border: 1px dashed #b5ab98;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8d8371;
}
.proof-cta { text-align: center; margin-top: 3rem; }
.proof-cta .next-line { margin-top: 1.4rem; }

/* ---------- coach ---------- */
.coach {
  position: relative;
  padding: clamp(6rem, 12vh, 9rem) 0;
  margin-bottom: 6rem;
}
.coach-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}
.coach-photo {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(22, 22, 22, 0.85), rgba(22, 22, 22, 0.6)),
    repeating-linear-gradient(45deg, #2c2925, #2c2925 8px, #262320 8px, #262320 16px);
  border: 1px dashed #6f675a;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #a89d89;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.coach h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 1.2rem; }
.coach-bio p { margin-bottom: 1rem; }
.quals {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.human-line { font-style: italic; }
.sig { font-weight: 600; }

/* ---------- offer ---------- */
.wp-offer .wp-content { width: auto; text-align: center; margin-bottom: 2.4rem; }
.price-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 26rem));
  justify-content: center;
  gap: 1.4rem;
  align-items: start;
}
.price-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.8rem 1.6rem;
}
.price-flagship {
  border: 3px solid var(--accent);
  box-shadow: 0 14px 40px rgba(22, 22, 22, 0.12);
}
.flag {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  padding: 0.25rem 0.6rem;
  margin-bottom: 0.8rem;
}
.price-card h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.price {
  font-family: var(--display);
  font-size: 2.6rem;
  margin-bottom: 1rem;
}
.price span { font-family: var(--body); font-size: 1rem; color: var(--ink-soft); }
.risk-reversal {
  text-align: center;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 2.2rem auto 0.4rem;
}
.scarcity {
  text-align: center;
  color: var(--ink-soft);
  margin: 0 auto;
}
.wp-offer .next-line { margin-top: 2rem; }

/* ---------- faq ---------- */
.wp-faq .wp-content { margin-bottom: 2rem; }
.faq-list { max-width: 46rem; margin: 0 auto; }
.faq {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 0.7rem;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.08rem;
  padding: 1rem 2.8rem 1rem 1.2rem;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--accent-deep);
}
.faq[open] summary::after { content: "–"; }
.faq p { padding: 0 1.2rem 1.1rem; color: var(--ink-soft); }
.wp-faq .next-line { margin-top: 2rem; }

/* ---------- finale ---------- */
.finale {
  position: relative;
  text-align: center;
  padding: clamp(7rem, 14vh, 10rem) 1.25rem 9rem;
  max-width: 72rem;
  margin: 0 auto;
}
.finale h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 1rem; }
.finale-sub { margin: 0 auto 2.4rem; color: var(--ink-soft); }
#consult-form {
  max-width: 26rem;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.field label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
.field input,
.field select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
}
.field input:focus-visible,
.field select:focus-visible { outline-offset: 0; border-color: var(--accent); }
.field.invalid input,
.field.invalid select { border-color: #b3261e; }
.field-error { color: #b3261e; font-size: 0.9rem; margin-top: 0.3rem; }
#consult-form .btn { margin: 1.4rem auto 0; }
/* generous inner margin so the chalk loop has room around the button */
#final-cta { position: relative; }
.form-note {
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0.4rem auto 0;
}
.form-success {
  max-width: 30rem;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--charcoal);
  border-radius: 10px;
  padding: 1.6rem;
  text-align: left;
}
.form-success p { margin-bottom: 0.5rem; }
.form-success { scroll-margin-top: 1.5rem; }
.booking-embed { display: block; width: 100%; height: 720px; border: 0; border-radius: 8px; background: #fff; margin: 0.8rem 0; }
/* the booking grid needs room; the card only widens once it's actually shown */
.form-success:has(.booking-embed:not([hidden])) { max-width: 52rem; }
.call-line { margin: 2.6rem auto 0; font-weight: 600; }
.call-line a { color: var(--accent-deep); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--charcoal);
  color: rgba(244, 239, 230, 0.8);
  text-align: center;
  padding: 2.8rem 1.25rem;
  font-size: 0.95rem;
}
.site-footer p { margin: 0 auto 0.4rem; }
.site-footer .fine { font-size: 0.82rem; color: rgba(244, 239, 230, 0.55); }

/* ---------- floating CTA — jump to booking the moment they're sold ----------
   Desktop: a pill, bottom-right. Mobile: a full-width bar (see media query).
   Appears once the hero has scrolled away, hides once the form is on screen. */
.sticky-cta {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 50;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.sticky-cta .btn {
  display: block;
  font-size: 1.05rem;
  padding: 0.8rem 1.55rem;
  box-shadow: 0 10px 28px rgba(22, 22, 22, 0.32);
}
body.show-sticky .sticky-cta { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* ================= mobile: the line weaves within the viewport ================
   Nodes alternate sides so the path still zigzags down the page, but nothing
   is pushed off-screen — the sideways storytelling is carried by the reveals
   instead of by moving the viewport. Running text gets a bone background so
   the line lives in the whitespace, not behind words. */
@media (max-width: 700px) {
  .btn-small { font-size: 0.85rem; padding: 0.5rem 0.8rem; white-space: nowrap; }
  .logo img { height: 3.4rem; }
  .footer-logo { height: 4.6rem; }

  .wp-content,
  .wp[data-side="right"] .wp-content,
  .wp[data-side="left"] .wp-content {
    width: auto;
    margin: 0;
    background: var(--bone);
  }
  .wp { padding: 8.5rem 1.25rem 4.5rem; margin-bottom: 8rem; }
  .coach { margin-bottom: 8rem; }
  /* nodes alternate so the line still weaves; sections stay put */
  .wp .node { top: 3.4rem; transform: translate(-50%, -50%) scale(0.82); }
  .wp[data-side="right"] .node { left: 22%; }
  .wp[data-side="left"] .node { left: 78%; }
  .coach .node-dot { left: 50%; top: 3rem; }
  .finale .node-dot { left: 50%; top: 3rem; }

  .week-strip { grid-template-columns: 1fr; }
  .day { min-height: 0; display: flex; gap: 1rem; align-items: baseline; }
  .day-on { border-top: 1px solid var(--line); border-left: 4px solid var(--charcoal); }
  .day-name { min-width: 3rem; margin: 0; }

  .stats, .testimonials, .price-cards { grid-template-columns: 1fr; }
  .risk-reversal, .scarcity, .next-line { background: var(--bone); }

  .coach { padding-top: 8.5rem; }
  .coach-split { grid-template-columns: 1fr; }
  .coach-photo { max-width: 20rem; }

  .coach-bio { background: var(--bone); }

  .finale { padding-top: 8.5rem; }
  .finale h2, .finale-sub, .call-line, .field label { background: var(--bone); }

  /* full-width button on mobile — an easier thumb target than a corner pill */
  .sticky-cta {
    left: 0; right: 0; bottom: 0;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    opacity: 1;
    transform: translateY(110%);
    pointer-events: auto;
  }
  .sticky-cta .btn { font-size: 1.2rem; padding: 0.9rem 1.55rem; text-align: center; }
  body.show-sticky .sticky-cta { transform: translateY(0); }
  .hero { padding-bottom: 40vh; }
  /* the bot check is a fixed 300px box; centre it under the full-width fields */
  .cf-turnstile { display: flex; justify-content: center; }

  /* keep new blocks legible where the straight line runs behind them */
  .pkg-eyebrow, .pkg-title, .form-block legend, .field-hint,
  .badges li, .app-shots figcaption { background: var(--bone); }
}

/* ================= app showcase (placeholder screen recordings) ================= */
.app-shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin: 2.6rem 0 0.5rem;
}
.app-shot { display: flex; flex-direction: column; gap: 0.6rem; }
.app-shot-frame {
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(22, 22, 22, 0.9), rgba(22, 22, 22, 0.7)),
    repeating-linear-gradient(45deg, #2c2925, #2c2925 8px, #262320 8px, #262320 16px);
  border: 1px dashed #6f675a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a89d89;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-shots figcaption { font-size: 0.92rem; color: var(--ink-soft); text-align: center; }

/* ================= package comparison ================= */
.pkg { margin-top: 3.5rem; }
.pkg-eyebrow {
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.4rem;
}
.pkg-title { text-align: center; font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 2rem; }
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  align-items: start;
}
.pkg-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.3rem;
  height: 100%;
}
.pkg-flagship { border: 3px solid var(--accent); box-shadow: 0 14px 40px rgba(22, 22, 22, 0.12); }
.pkg-card h4 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.pkg-card h4 span { font-family: var(--body); font-weight: 400; font-size: 0.9rem; color: var(--ink-soft); }
.pkg-tag { font-weight: 700; margin-bottom: 1rem; }
.pkg-feats { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.pkg-feats li { font-size: 0.95rem; padding-left: 1.5rem; position: relative; }
.pkg-feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 12px;
  height: 8px;
  border-left: 3px solid var(--accent-deep);
  border-bottom: 3px solid var(--accent-deep);
  transform: rotate(-45deg);
}
.pkg .flag {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
  margin-bottom: 0.7rem;
}
.badges {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.4rem;
  text-align: center;
}
.badges li { display: flex; flex-direction: column; gap: 0.2rem; }
.badges strong {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  color: var(--accent-deep);
}
.badges span { font-size: 0.9rem; color: var(--ink-soft); }

/* ================= long intake form ================= */
.long-form { max-width: 34rem; }
.long-form .form-block {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.2rem 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--card);
}
.long-form .form-block legend {
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0 0.4rem;
}
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  resize: vertical;
  min-height: 3.4rem;
}
.field textarea:focus-visible { outline-offset: 0; border-color: var(--accent); }
.field .opt { font-weight: 400; color: var(--ink-soft); font-size: 0.85rem; }
.field-hint { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.35rem; }
.form-block .field-hint { margin: -0.3rem 0 0.2rem; }
.opts { display: flex; flex-direction: column; gap: 0.6rem; }
.opts-row { flex-direction: row; flex-wrap: wrap; }
.opt-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--bone);
  font-weight: 600;
  cursor: pointer;
}
.opt-pill:focus-within { border-color: var(--accent); }
.opt-pill:has(input:checked) { border-color: var(--accent); background: #fbe8de; }
.opt-pill input { accent-color: var(--accent-deep); width: 1.05rem; height: 1.05rem; }

/* collapse the new multi-column blocks on the narrow, panned layout
   (must come after their base rules to win the cascade) */
@media (max-width: 700px) {
  .pkg-grid, .badges, .app-shots { grid-template-columns: 1fr; }
  .long-form { max-width: none; }
  .pkg-card, .pkg-flagship { height: auto; }
}

/* ================= iPhone 16 Pro device frame — reusable chat mockup =========
   One component shared by every phone in .phones. Everything inside the screen
   is sized in cqw (1cqw = 1% of device width) so the whole device — chrome and
   chat type — scales from a single --phone-w with no media-query duplication. */
.phones .iphone { --phone-w: 320px; }

.iphone {
  --w: var(--phone-w, 340px);
  --screen: #1e1b18;
  --coach-bubble: #46251a;
  --client-bubble: #37332f;
  --chat-text: #f4efe7;
  --chat-muted: rgb(244 239 231 / 0.55);
  --chat-accent: var(--accent, #dc1e1e);
  width: min(var(--w), 100%);
  aspect-ratio: 706 / 1466;      /* real iPhone 16 Pro body ratio — reserves space, no CLS */
  position: relative;
  container-type: inline-size;   /* 1cqw = 1% of device width */
  transform: rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 30px 45px rgb(28 20 12 / 0.26))
          drop-shadow(0 6px 14px rgb(28 20 12 / 0.16));
}

/* side buttons — before the rail in the DOM so their inner edge tucks under it */
.iphone__btn {
  position: absolute;
  width: 1cqw;
  border-radius: 0.5cqw;
  background: linear-gradient(180deg, #48484c, #232327);
}
.iphone__btn--act { left: -0.8cqw; top: 19%; height: 4.5%; }
.iphone__btn--vup { left: -0.9cqw; top: 26%; height: 8%; }
.iphone__btn--vdn { left: -0.9cqw; top: 35.5%; height: 8%; }
.iphone__btn--pwr { right: -0.9cqw; top: 29%; height: 12%; }

.iphone__rail {
  position: relative;
  height: 100%;
  border-radius: 17.5cqw;
  padding: 1.1cqw;
  background: linear-gradient(155deg, #4a4a4e 0%, #232327 30%, #2c2c30 55%, #515157 100%);
  box-shadow: inset 0 0 0 0.18cqw rgb(255 255 255 / 0.16);   /* machined edge highlight */
}
.iphone__bezel {
  height: 100%;
  border-radius: 16.4cqw;
  padding: 2.4cqw;
  background: #060606;
}
.iphone__screen {
  height: 100%;
  border-radius: 14cqw;
  background: var(--screen);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: var(--body);
}
.iphone__screen::after {                 /* glass sheen — barely there, matte site */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgb(255 255 255 / 0.04) 0%, transparent 26%);
  pointer-events: none;
  z-index: 5;
}
@supports (corner-shape: squircle) {     /* Apple's continuous corners where supported */
  .iphone__rail, .iphone__bezel, .iphone__screen { corner-shape: squircle; }
}

/* Dynamic Island + camera lens */
.iphone__island {
  position: absolute;
  top: 2.6cqw; left: 50%; translate: -50% 0;
  width: 29.5cqw; height: 8.8cqw;
  border-radius: 4.4cqw;
  background: #000;
  z-index: 6;
}
.iphone__island::after {
  content: "";
  position: absolute;
  width: 4.2cqw; height: 4.2cqw;
  right: 2.2cqw; top: 50%; translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2c3242 0 18%, #10131b 60%, #000 100%);
}

/* status bar */
.iphone__status {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 3.4cqw 8cqw 0;
  color: rgb(255 253 248 / 0.92);
  pointer-events: none;
  z-index: 6;
}
.iphone__status .time { font-weight: 600; font-size: 4.2cqw; letter-spacing: 0.02em; }
.iphone__status .icons { display: flex; align-items: center; gap: 1.7cqw; }
.iphone__status svg { height: 3cqw; width: auto; fill: currentColor; display: block; }

/* home indicator */
.iphone__home {
  position: absolute;
  bottom: 2.2cqw; left: 50%; translate: -50% 0;
  width: 33cqw; height: 1.3cqw;
  border-radius: 1cqw;
  background: rgb(255 255 255 / 0.38);
  z-index: 6;
}

/* ---- in-app chrome: conversation ---- */
.chat-head {
  display: flex; align-items: center; gap: 3cqw;
  padding: 16cqw 5cqw 3.4cqw;            /* padding-top clears island + status bar */
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
.chat-avatar {
  flex: none;
  width: 8cqw; height: 8cqw;
  border-radius: 50%;
  background: var(--chat-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 3.4cqw; letter-spacing: 0.04em;
}
.chat-id { display: flex; flex-direction: column; gap: 0.4cqw; line-height: 1.05; }
.chat-id .name { font-size: 4cqw; font-weight: 600; color: var(--chat-text); }
.chat-id .sub {
  font-size: 2.9cqw; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--chat-muted);
}

.chat-scroll {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2cqw;
  padding: 3.6cqw 4cqw;
  overflow: hidden;
}
/* current bubbles designed at 393px wide → px ÷ 3.93 = cqw */
.iphone .bubble {
  max-width: 82%;
  margin: 0;
  padding: 2.4cqw 3cqw;
  border-radius: 4.5cqw;
  font-size: 3.9cqw;
  line-height: 1.42;
  color: var(--chat-text);
}
.iphone .from-coach {
  align-self: flex-start;
  background: var(--coach-bubble);
  border-bottom-left-radius: 1.2cqw;
}
.iphone .from-client {
  align-self: flex-end;
  background: var(--client-bubble);
  border-bottom-right-radius: 1.2cqw;
}
.iphone .video-chip {
  display: flex; align-items: center; gap: 1.8cqw;
  margin-top: 1.8cqw;
  padding: 2cqw 2.6cqw;
  background: rgb(0 0 0 / 0.28);
  border-radius: 2.6cqw;
  font-size: 3.1cqw;
  color: rgb(244 239 231 / 0.72);
}
.iphone .video-chip svg { width: 2.8cqw; height: 2.8cqw; flex: none; fill: currentColor; }
.chat-receipt {
  align-self: flex-end;
  margin: -0.6cqw 1.4cqw 0 0;
  font-size: 2.9cqw;
  color: rgb(244 239 231 / 0.5);
}

/* input bar pinned above the home indicator */
.chat-input {
  margin-top: auto;
  display: flex; align-items: center; gap: 2.6cqw;
  padding: 2.8cqw 4cqw 7.5cqw;
  color: var(--chat-muted);
}
.chat-input .ci-field {
  flex: 1 1 auto;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 6cqw;
  padding: 2.4cqw 3.6cqw;
  font-size: 3.5cqw;
  color: var(--chat-muted);
}
.chat-input svg { width: 5cqw; height: 5cqw; flex: none; fill: currentColor; }

/* two-up on desktop, stacked on mobile */
@media (max-width: 768px) {
  .phones .iphone { --phone-w: min(78vw, 340px); }
}

/* video-message thumbnail inside a chat bubble — <img> on page 1, <video> on page 2 */
.chat-media {
  position: relative;
  display: block;
  width: 44cqw;
  margin-top: 2.2cqw;
  aspect-ratio: 9 / 16;
  border-radius: 3.2cqw;
  overflow: hidden;
  background: #000;
}
.chat-media img,
.chat-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-media__play {
  position: absolute;
  top: 50%; left: 50%; translate: -50% -50%;
  width: 15cqw; height: 15cqw;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.42);
  display: flex; align-items: center; justify-content: center;
}
.chat-media__play svg { width: 6.5cqw; height: 6.5cqw; margin-left: 1cqw; fill: #fff; }
.chat-media.is-playing .chat-media__play { display: none; }
.chat-media__dur {
  position: absolute;
  right: 2cqw; bottom: 2cqw;
  padding: 0.7cqw 1.7cqw;
  border-radius: 1.8cqw;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font-size: 2.7cqw;
  letter-spacing: 0.02em;
}

/* ---- iMessage-style skin for the chat mockups (style imitation, mockup only) ---- */
.iphone {
  --coach-bubble: #3b3b3d;    /* incoming grey (iOS dark mode) */
  --client-bubble: #0a84ff;   /* outgoing blue */
  --imsg-mask: var(--screen); /* tail carve = screen background */
}
.iphone .bubble { position: relative; color: #fff; }
.iphone .from-coach { border-bottom-left-radius: 4.5cqw; }   /* fully round; the tail adds the point */
.iphone .from-client { border-bottom-right-radius: 4.5cqw; }

/* centred conversation header, iMessage style */
.chat-head {
  flex-direction: column;
  align-items: center;
  gap: 1.2cqw;
  text-align: center;
  padding: 14cqw 5cqw 3cqw;
}
.chat-avatar { width: 11cqw; height: 11cqw; font-size: 4.2cqw; }
.chat-id { align-items: center; gap: 0.6cqw; }
.chat-id .name { font-size: 3.8cqw; }
.chat-id .sub { font-size: 2.7cqw; letter-spacing: 0.14em; }

/* wider gutter so bubble tails aren't clipped by the scroll area's overflow */
.chat-scroll { padding-left: 7.5cqw; padding-right: 7.5cqw; }

/* bubble tails — border technique for a smooth curve; last of a same-sender run only */
.iphone .from-coach::before,
.iphone .from-client::before {
  content: ""; position: absolute; z-index: 0; bottom: 0;
  width: 0; height: 3.7cqw;
}
.iphone .from-coach::after,
.iphone .from-client::after {
  content: ""; position: absolute; z-index: 1; bottom: 0;
  width: 3.2cqw; height: 3.7cqw; background: var(--imsg-mask);
}
.iphone .from-coach::before { left: -1.5cqw; border-left: 3.4cqw solid var(--coach-bubble); border-bottom-right-radius: 2.9cqw 2.5cqw; }
.iphone .from-coach::after  { left: -3.3cqw; border-bottom-right-radius: 2.4cqw; }
.iphone .from-client::before { right: -1.5cqw; border-right: 3.4cqw solid var(--client-bubble); border-bottom-left-radius: 2.9cqw 2.5cqw; }
.iphone .from-client::after  { right: -3.3cqw; border-bottom-left-radius: 2.4cqw; }
.iphone .from-coach:has(+ .from-coach)::before,
.iphone .from-coach:has(+ .from-coach)::after,
.iphone .from-client:has(+ .from-client)::before,
.iphone .from-client:has(+ .from-client)::after { display: none; }

/* ---- iMessage accuracy pass — matches current iOS dark mode ---- */
.iphone {
  --screen: #000;             /* iOS dark background */
  --coach-bubble: #262629;    /* incoming grey */
  --client-bubble: #0a6cf0;   /* outgoing blue — tail + gradient base */
  --imsg-mask: #000;
}
.iphone__screen { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; }
.iphone .from-client { background: linear-gradient(180deg, #2a9dfb 0%, #0a6cf0 60%, #0a6cf0 100%); }
.iphone .from-coach { background: var(--coach-bubble); }

/* header: centred avatar + name, back-chevron & FaceTime in the corners */
.chat-head { position: relative; padding: 13cqw 5cqw 3cqw; gap: 1cqw; }
.chat-back, .chat-ft { position: absolute; top: 13.5cqw; display: flex; align-items: center; color: #3b9bff; }
.chat-back { left: 4cqw; gap: 1cqw; font-weight: 600; }
.chat-back svg { width: 3cqw; height: 5.2cqw; }
.chat-badge { font-style: normal; font-size: 3.4cqw; }
.chat-ft { right: 4cqw; }
.chat-ft svg { width: 7cqw; height: 5cqw; fill: currentColor; }
.chat-name { display: flex; align-items: center; gap: 0.8cqw; font-size: 3.7cqw; font-weight: 600; color: #fff; }
.chat-name .chev { color: rgb(235 235 245 / 0.3); font-size: 3.4cqw; font-weight: 400; }

/* timestamp separators in the message flow */
.chat-time {
  align-self: center; max-width: 92%;
  margin: 0.5cqw 0 1.6cqw; padding: 0;
  text-align: center; font-size: 2.9cqw; letter-spacing: 0;
  text-transform: none; color: rgb(235 235 245 / 0.45); font-weight: 400;
}

/* input: circled +, mic inside the pill */
.chat-input { gap: 2cqw; align-items: center; padding: 2.6cqw 3.5cqw 7.5cqw; }
.ci-plus {
  flex: none; width: 8.6cqw; height: 8.6cqw; border-radius: 50%;
  background: #2a2a2c; display: flex; align-items: center; justify-content: center; color: #d6d6da;
}
.ci-plus svg { width: 4.4cqw; height: 4.4cqw; }
.ci-field {
  display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
  border: 1px solid rgb(255 255 255 / 0.2); border-radius: 6cqw;
  padding: 2cqw 2.4cqw 2cqw 3.6cqw; color: rgb(235 235 245 / 0.42);
}
.ci-mic { flex: none; width: 4.6cqw; height: 4.6cqw; fill: currentColor; }

/* photo/video as its own edge-to-edge iMessage bubble (not nested in a text bubble) */
.chat-media { margin-top: 0; border-radius: 4.6cqw; }
.chat-media--sent { align-self: flex-end; }
/* the text bubble just above the media loses its tail (same-sender group) */
.iphone .from-client:has(+ .chat-media)::before,
.iphone .from-client:has(+ .chat-media)::after { display: none; }

/* ---- real coach photo fills the 4:5 frame ---- */
.coach-photo { overflow: hidden; }
.coach-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coach-photo:has(img) { border: none; background: none; }

/* "your coach" line above the booking form */
.coach-chosen { text-align: center; margin: -0.6rem auto 2rem; color: var(--ink-soft); font-size: 1rem; }
.coach-chosen strong { color: var(--accent-deep); }

/* ======== coach selector — scroll left/right, pick a coach ======== */
.coach-picker { max-width: 74rem; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
.coach-picker-head { text-align: center; margin-bottom: 2rem; }
.coach-picker-head h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 0.8rem; }
.coach-picker-head p { margin: 0 auto; color: var(--ink-soft); }
.coach-track-wrap { position: relative; }
.coach-track {
  display: flex; gap: 1.2rem;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0.6rem 0.4rem 1.6rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.coach-card {
  flex: 0 0 clamp(15.5rem, 70vw, 19rem);
  scroll-snap-align: center; text-align: left;
  background: var(--card); border: 2px solid var(--line); border-radius: 16px;
  overflow: hidden; cursor: pointer; padding: 0; font: inherit; color: inherit;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.coach-card:hover { transform: translateY(-3px); }
.coach-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.coach-card.is-selected { border-color: var(--accent); box-shadow: 0 12px 32px rgba(220, 30, 30, 0.18); }
.coach-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; display: block; }
.coach-card-body { padding: 1.1rem 1.2rem 1.4rem; }
.coach-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.coach-card-top strong { font-family: var(--display); font-size: 1.55rem; text-transform: uppercase; letter-spacing: 0.01em; }
.coach-card .pick {
  flex: none; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 700; white-space: nowrap;
}
.coach-card .pick::after { content: "Select"; }
.coach-card.is-selected .pick::after { content: "Selected ✓"; }
.coach-card-role { display: block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin: 0.25rem 0 0.75rem; }
.coach-card-bio { font-size: 0.95rem; color: var(--ink-soft); max-width: none; }
.coach-arrow {
  position: absolute; top: 34%; z-index: 3;
  width: 3rem; height: 3rem; border-radius: 50%; border: none;
  background: var(--charcoal); color: var(--bone); font-size: 1.7rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(22, 22, 22, 0.28);
}
.coach-arrow:hover { background: #000; }
.coach-arrow--prev { left: -0.6rem; }
.coach-arrow--next { right: -0.6rem; }
@media (max-width: 700px) { .coach-arrow { display: none; } }

/* ================= video-led page (the coach pages) ================= */
.wp-vid .wp-content { width: auto; max-width: 46rem; margin: 0 auto 2.4rem; text-align: center; }
.wp-vid .wp-content p { margin: 0 auto; color: var(--ink-soft); }

/* the player itself */
.vid {
  position: relative;
  background: #0d0c0b;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
}
.vid video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0d0c0b; }
.vid video[hidden] { display: none; }   /* the attribute must beat display:block */
/* vertical (phone-shot) clips get a portrait player — set by JS from the
   video's real dimensions, so landscape uploads keep the 16:9 box */
.vid.is-portrait { aspect-ratio: 9 / 16; max-width: 21rem; margin-inline: auto; }
.vid iframe { width: 100%; height: 100%; border: 0; display: block; }   /* Cloudflare Stream embed */
.vid-missing {
  margin: 0; padding: 1rem;
  font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgb(244 239 231 / 0.5); text-align: center;
}

/* ---- scroll cue ----------------------------------------------------------
   Fixed to the viewport rather than the hero's foot: the hero is taller than
   one screen on mobile, so a cue pinned to its bottom would never be seen.
   Fades the moment the visitor scrolls, well before the sticky CTA appears. */
.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: 1.9rem;
  translate: -50% 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.4rem 0.75rem 1.6rem;
  /* a self-contained chip: it passes over charcoal, the bone gradient and the
     video, so it carries its own background rather than relying on contrast */
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: rgb(18 18 18 / 0.82);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  color: var(--bone);
  cursor: pointer;
  transition: opacity 300ms ease, visibility 300ms ease, background 160ms ease;
}
body.scrolled .scroll-cue { opacity: 0; visibility: hidden; pointer-events: none; }
.scroll-cue:hover { background: var(--accent); }
.scroll-cue-label {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;             /* offset the trailing letter-space so it reads centred */
  text-transform: uppercase;
}
.scroll-cue-arrow {
  width: 1.5rem; height: 1.5rem;
  fill: none; stroke: var(--accent);
  stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
  animation: scroll-bob 1.6s ease-in-out infinite;
}
.scroll-cue:hover .scroll-cue-arrow { stroke: #fff; }
@keyframes scroll-bob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-arrow { animation: none; }
}

/* single feature video (who I am) */
.vid-solo { max-width: 46rem; margin: 0 auto; }

/* ---- hero: the welcome video opens the page rather than a separate section ----
   Stacked on mobile (copy → video → CTA, so the chalk line still starts below
   everything); side by side above 800px. */
.hero { padding-bottom: 14vh; }
.hero-inner {
  display: grid;
  grid-template-areas: "copy" "video" "actions";
  justify-items: center;
  gap: 2rem;
  max-width: 62rem;
}
.hero-copy { grid-area: copy; }
.hero-video { grid-area: video; width: min(21rem, 62vw); }
.hero-actions { grid-area: actions; }
.hero .vid { border-radius: 14px; box-shadow: 0 24px 60px rgb(0 0 0 / 0.45); }
.hero .vid.is-portrait { max-width: none; }     /* the column already sizes it */
.hero .hero-sub { margin-bottom: 0; }
/* the transcript sits on charcoal here, so it needs the light treatment */
.hero .transcript { border-top-color: rgb(244 239 230 / 0.18); margin-top: 0.9rem; }
.hero .transcript summary { color: rgb(244 239 230 / 0.8); }
.hero .transcript p { color: rgb(244 239 230 / 0.72); text-align: left; }

@media (min-width: 801px) {
  .hero { text-align: left; padding-top: 8rem; }
  /* sized for the split column rather than the old full-width hero */
  .hero h1 { font-size: clamp(2.6rem, 4.4vw, 4.2rem); }
  .hero-inner {
    grid-template-areas: "copy video" "actions video";
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: start;
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .hero-video { align-self: center; }
  .hero-sub, .trust-line { margin-inline: 0; }
  /* the copy rows are stretched by the tall video column — meet them in the
     middle so the CTA sits with its pitch instead of drifting to the bottom */
  .hero-copy { align-self: end; }
  .hero-actions { align-self: start; margin-top: 0.4rem; }
}

/* package cards */
/* packages scroll sideways instead of stacking — four cards in one screen's
   height rather than four screens of scrolling */
.vid-track-wrap { position: relative; }
.vid-grid {
  --card-w: clamp(15rem, 76vw, 19.5rem);
  display: flex; gap: 1.4rem; align-items: stretch;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0.4rem 0.2rem 1.4rem;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  -webkit-overflow-scrolling: touch;
}
.vid-grid > .vid-card { flex: 0 0 var(--card-w); scroll-snap-align: center; }
.vid-arrow {
  position: absolute; top: 38%; z-index: 3;
  width: 3rem; height: 3rem; border-radius: 50%; border: none;
  background: var(--charcoal); color: var(--bone); font-size: 1.7rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgb(22 22 22 / 0.28);
}
.vid-arrow:hover { background: #000; }
.vid-arrow--prev { left: -0.6rem; }
.vid-arrow--next { right: -0.6rem; }
@media (max-width: 900px) { .vid-arrow { display: none; } }
/* on wide screens every card fits, so there's nothing left to page through */
.vid-track-wrap.is-static .vid-arrow { display: none; }
/* the rail runs the full width of the screen rather than stopping at the
   section's edge, where the next card was left half-cut with a band of page
   beside it that read as something covering it up. Wide enough for all four
   and the row centres itself; too narrow and `safe` drops it back to the left
   so the first card can never end up stranded off-screen. */
.vid-grid { padding-inline: 1.4rem; justify-content: safe center; }
@media (min-width: 701px) {
  .vid-track-wrap { margin-inline: calc(50% - 50vw); }
  .vid-arrow--prev { left: 0.6rem; }
  .vid-arrow--next { right: 0.6rem; }
}
/* the section's padding is lopsided on mobile — the wider side is the step
   rail's gutter — so each margin has to cancel the padding on its own side.
   Matching them up wrong leaves the row hanging off one edge and a band of
   bare page down the other, which reads as something laid over the cards. */
@media (max-width: 700px) {
  .vid-track-wrap { margin-inline: -1.25rem -2.7rem; }
  /* the end cards reach the middle of the screen like every other one — half a
     screen of run-off each side is what lets them get there */
  .vid-grid { padding-inline: calc((100vw - var(--card-w)) / 2); }
  /* the rail holds its place mid-screen while the page scrolls past it, and
     that scroll walks the cards sideways — see main.js, which owns both sizes
     because they depend on how far the row actually overflows */
  .vid-track-wrap.is-pinned { height: var(--pin-h); }
  .vid-track-wrap.is-pinned .vid-grid {
    position: sticky; top: var(--pin-top);
    /* every stop is a whole package, never the gap between two */
    scroll-snap-type: x mandatory;
  }
}
.vid-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.4rem;
}
.vid-card--flagship { border: 3px solid var(--accent); box-shadow: 0 14px 40px rgba(22, 22, 22, 0.12); }
.vid-card h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
/* flagship: the badge sits on the heading's line, pushed to the right edge */
.vid-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; margin-bottom: 0.4rem;
}
/* the heading wraps within its own column so the badge stays on the right
   rather than dropping below it on narrow cards */
.vid-card-head h3 { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.vid-card-head .flag { flex: none; margin-bottom: 0; margin-left: auto; }
.vid-sum { color: var(--ink-soft); margin-bottom: 1rem; }
.vid-card .vid { margin-bottom: 0.9rem; }

/* the journey video sits between the two things it covers */
.journey-split {
  display: grid;
  grid-template-columns: 1fr minmax(0, 21rem) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  max-width: 68rem;
  margin: 0 auto;
}
/* this block spans the full width, so the chalk path would otherwise run
   straight through the copy — let the columns sit on the page colour */
.journey-aside, .journey-video, .journey-after { background: var(--bone); }
.journey-aside { padding: 0 0.4rem; }
.journey-aside h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.journey-aside p { font-size: 0.98rem; color: var(--ink-soft); margin-bottom: 0.8rem; }
.journey-aside .vid-sum { font-weight: 700; color: var(--ink); }
.journey-video .vid-sum.centred { text-align: center; margin: 0 auto 0.8rem; }
.journey-after {
  max-width: 21rem; margin: 3.5rem auto 0; text-align: center;
}
.journey-after h3 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.journey-after .vid-sum { margin-bottom: 0.8rem; }
.journey-after .transcript, .journey-video .transcript { text-align: left; }
/* stagger the two columns so the eye zigzags rather than reading a flat row:
   the left one starts level with the top of the video, the right one drops to
   its lower quarter. Offsets are measured off the video itself. */
@media (min-width: 901px) {
  .journey-split {
    --vid-top: 4.4rem;                  /* the summary line sitting above the video */
    --vid-h: calc(21rem * 16 / 9);      /* portrait video height at this column width */
  }
  .journey-aside--high { margin-top: var(--vid-top); }
  .journey-aside--low  { margin-top: calc(var(--vid-top) + 0.75 * var(--vid-h)); }
}
@media (max-width: 900px) {
  .journey-split { grid-template-columns: 1fr; max-width: 34rem; }
  .journey-video { order: -1; }          /* video first, then what it explains */
  .journey-video .vid { max-width: 21rem; margin-inline: auto; }
}

/* numbered journey steps */
.vid-steps { list-style: none; display: flex; flex-direction: column; gap: 2.2rem; max-width: 52rem; margin: 0 auto; }
.vid-step { display: flex; gap: 1.4rem; align-items: flex-start; }
.step-n {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--display); font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
}
.step-body { flex: 1 1 auto; min-width: 0; }
.step-body h3 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.step-body .vid { margin-bottom: 0.8rem; }

/* FAQ answers (text, no video) */
.faq .faq-body { padding: 0 1.2rem 1.2rem; }
.faq .faq-body p { padding: 0; margin-bottom: 0.9rem; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* transcripts — full script kept, folded away by default */
.transcript { border-top: 1px solid var(--line); padding-top: 0.7rem; }
.transcript summary {
  cursor: pointer; list-style: none;
  font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 700;
}
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary::after { content: " +"; }
.transcript[open] summary::after { content: " –"; }
.transcript p { font-size: 0.98rem; color: var(--ink-soft); margin-top: 0.8rem; }

@media (max-width: 700px) {
  .vid-grid { grid-template-columns: 1fr; }
  .vid-step { gap: 0.9rem; }
  .step-n { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
  .wp-vid .wp-content, .vid-solo, .vid-steps { background: var(--bone); }
}

/* ================= scroll reveals =================
   Each block arrives from the side its waypoint sits on and settles in
   place, so the left/right storytelling survives without the viewport ever
   moving. The `reveal` class is added by JS, so with JS off (or broken)
   nothing is ever hidden. One-shot: it never replays on scroll-back. */
@media (prefers-reduced-motion: no-preference) {
  .wp > .reveal {
    opacity: 0;
    transform: translate3d(var(--rx, 0), 18px, 0);
    transition:
      opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--rd, 0ms),
      transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--rd, 0ms);
  }
  .wp[data-side="right"] > .reveal { --rx: 34px; }
  .wp[data-side="left"]  > .reveal { --rx: -34px; }
  .wp.is-in > .reveal { opacity: 1; transform: none; }

  /* the blocks land one after another rather than all at once */
  .wp > .reveal:nth-of-type(2) { --rd: 90ms; }
  .wp > .reveal:nth-of-type(3) { --rd: 180ms; }
  .wp > .reveal:nth-of-type(4) { --rd: 260ms; }
  .wp > .reveal:nth-of-type(n + 5) { --rd: 330ms; }

  /* the node marks the line's arrival — a halo, not a transform, so it
     doesn't fight the centring transform the node already carries */
  .wp.is-in .node-num { animation: node-arrive 760ms ease-out; }
  @keyframes node-arrive {
    0%   { box-shadow: 0 0 0 6px var(--bone), 0 0 0 0 rgb(220 30 30 / 0.45); }
    100% { box-shadow: 0 0 0 6px var(--bone), 0 0 0 24px rgb(220 30 30 / 0); }
  }
}

/* ================= step rail =================
   A fixed progress spine: one dot per stage, the current one filled. Built by
   JS from the sections themselves, so it can't drift out of sync with them. */
.step-rail {
  position: fixed;
  right: 0.55rem;
  top: 50%;
  translate: 0 -50%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.step-rail.is-on { opacity: 1; pointer-events: auto; }
.step-rail a {
  --dot: 1.55rem;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  border: 1.5px solid rgb(76 70 61 / 0.35);
  background: var(--bone);
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 0.72rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, scale 200ms ease;
}
/* the connector between dots */
.step-rail a + a { margin-top: 1.5rem; }
.step-rail a + a::before {
  content: "";
  position: absolute;
  width: 1.5px;
  height: 1.5rem;
  translate: 0 -1.5rem;
  background: rgb(76 70 61 / 0.28);
}
.step-rail a { position: relative; }
.step-rail a.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  scale: 1.18;
}
.step-rail a.is-done { border-color: var(--accent); color: var(--accent-deep); }
@media (prefers-reduced-motion: reduce) {
  .step-rail, .step-rail a { transition: none; }
}
/* over the charcoal footer the bone dots would glare */
.step-rail.on-dark a { background: rgb(22 22 22 / 0.6); border-color: rgb(244 239 230 / 0.3); color: rgb(244 239 230 / 0.7); }
.step-rail.on-dark a.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 700px) {
  .step-rail { right: 0.3rem; }
  .step-rail a { --dot: 1.35rem; font-size: 0.62rem; }
  .step-rail a + a { margin-top: 1.1rem; }
  .step-rail a + a::before { height: 1.1rem; translate: 0 -1.1rem; }
  /* keep the rail out of the text's way */
  .wp, .finale { padding-right: 2.7rem; }
}

/* ================= booking form: wider on desktop =================
   The short fields pair up two-across, so the form reads shorter without
   shrinking any of it. Mobile keeps the single column. */
@media (min-width: 900px) {
  #consult-form.long-form { max-width: 46rem; }   /* beats the base #consult-form width */
  .long-form .form-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.2rem;
  }
  .long-form .form-block legend,
  .long-form .form-block .field-hint,
  .long-form .form-block .opts,
  .long-form .form-block .field:has(textarea) { grid-column: 1 / -1; }
}