/* ==========================================================================
   Coachable Labs - multi-page components and layout.

   Loaded after styles.css. styles.css holds the design tokens and the visual
   language of the original single page; everything the restructure introduced
   lives here, along with the breakpoint tiers that file never had.

   Contents
     0.  Corrections to existing tokens and base
     1.  Header, navigation, skip link
     2.  Page furniture: titles, lists, links
     3.  TrackCard
     4.  Testimonial and proof
     5.  CoachCard
     6.  FAQItem
     7.  Forms
     8.  Comparison lists
     9.  Pricing
     10. CTABlock
     11. Footer
     12. Responsive: 1024px, 768px, 480px
   ========================================================================== */

/* ---------- 0. Corrections to existing tokens and base ------------------- */

:root {
  /* The old muted greys failed 4.5:1 against the cream background (§3.3).
     Darkened here rather than in styles.css so the change is legible. */
  --gray-500: #6a6a6a;
  --gray-400: #6f6f6f;
}

/* No page scrolls horizontally, at any width (§0.6). The blobs and the hero
   swirl are decorative and sit outside the content box by design. */
html, body { overflow-x: clip; }
.bg-blobs { overflow: hidden; }

:where(a, button, input, select, textarea, summary, details):focus-visible {
  outline: 3px solid #1f7f87;
  outline-offset: 2px;
  border-radius: 4px;
}

.section { padding: 72px 0; }
.section + .section { padding-top: 0; }

/* ---------- 1. Header, navigation, skip link ---------------------------- */

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  background: var(--near-black);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 8px; }

.main-nav { align-items: center; gap: 6px; }

.main-nav a.nav-link,
.nav-menu a {
  font-weight: 600;
  font-size: 15px;
  color: var(--near-black);
  padding: 10px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.main-nav a.nav-link:hover,
.nav-menu a:hover { background: rgba(70, 189, 198, 0.14); }

.main-nav a.nav-link.is-current {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--teal);
  font-weight: 700;
}

.nav-cta { margin-left: 8px; min-height: 44px; }

.nav-item-menu { position: relative; display: flex; align-items: center; }

.nav-caret {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--near-black);
  padding: 12px 6px;
  min-width: 32px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-caret svg { transition: transform 0.2s ease; }
.nav-caret[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(18, 17, 17, 0.14);
  display: none;
  z-index: 120;
}
.nav-item-menu.is-open .nav-menu { display: flex; }

/* Sticky header is suppressed on the intake page below 768px, where it competes
   with the on-screen keyboard for vertical space (§4.2). */

/* ---------- 2. Page furniture ------------------------------------------- */

/* The home headline runs left rather than centred: at 25 words a centred block
   stacks into a narrow tower, where a left-set one can use the full measure. */
.hero { padding: 150px 0 120px; text-align: left; }
.hero-inner { max-width: 1000px; }
.hero-title {
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.14;
  margin-bottom: 26px;
}
.hero-sub {
  max-width: 58ch;
  margin: 0 0 34px;
}
.hero-ctas { justify-content: flex-start; }

.page-head { padding-top: 96px; }

.page-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  color: var(--near-black);
}

.page-lede {
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.6;
  color: var(--gray-700);
  margin: 0 0 18px;
  max-width: 44em;
}

.section-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0 0 22px;
  color: var(--near-black);
}
.section-heading.center { text-align: center; }

.sub-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.015em;
  margin: 34px 0 14px;
  color: var(--near-black);
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #1f7f87;
  margin: 0 0 14px;
}

.section p { font-size: 17px; line-height: 1.65; color: var(--gray-700); max-width: 46em; }
.section p strong { color: var(--near-black); }
.quiet { font-size: 15.5px; color: var(--gray-500); }
.center { text-align: center; }

.inline-link {
  color: #1a7078;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.inline-link:hover { color: var(--near-black); }

.recognition-list, .related-list, .reassurance-list, .compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The lines a visitor is meant to see themselves in. Plain rows: body sans, a
   teal dot, a hairline between each. The colour and movement come from the
   marker sweep below, not from boxing them up.

   Do not set display:grid on the li. Each <em> becomes its own grid item and
   the sentence gets broken across cells. */
.recognition-list li {
  --lift: 0px;
  /* The dot is centred on the first line, so it has to track the row padding. */
  --pad-y: 18px;
  position: relative;
  margin: 0 -20px;
  padding: var(--pad-y) 20px var(--pad-y) 50px;
  border-radius: 14px;
  transform: translateY(calc((1 - var(--lit, 1)) * 12px + var(--lift)));
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.5;
  color: var(--near-black);
  transition: background 0.45s ease, box-shadow 0.45s ease;
}

/* The row you are level with lifts and takes a soft teal wash, the same
   treatment the process steps use for the step you have reached. */
.recognition-list li.is-active {
  --lift: -3px;
  background: linear-gradient(90deg, rgba(70, 189, 198, 0.16), rgba(70, 189, 198, 0) 66%);
  box-shadow: 0 12px 28px rgba(42, 143, 151, 0.1);
}
.recognition-list li.is-active::before {
  background: #2a8f97;
  box-shadow: 0 0 0 5px rgba(70, 189, 198, 0.22);
}

.recognition-list li::before {
  content: "";
  position: absolute;
  left: 22px;
  top: calc(var(--pad-y) + 0.75em - 5px);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--teal);
  transform: scale(calc(0.3 + var(--lit, 1) * 0.7));
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* The hairline under each row, drawn rather than simply present. */
.recognition-list li::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 1px;
  background: rgba(18, 17, 17, 0.16);
  transform: scaleX(var(--lit, 1));
  transform-origin: left center;
}

/* The marker sweep. A background gradient rather than an absolutely positioned
   bar, so it still works when the phrase wraps onto a second line. */
.recognition-list em {
  font-style: normal;
  background-image: linear-gradient(rgba(70, 189, 198, 0.45), rgba(70, 189, 198, 0.45));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: calc(var(--lit, 1) * 100%) 0.36em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.dot-list { list-style: none; margin: 0; padding: 0; }
.dot-list li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-700);
}
.dot-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
}

.related-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16.5px;
  color: var(--gray-700);
}
.related-list a {
  font-weight: 600;
  color: #1a7078;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.related-list a:hover { color: var(--near-black); }



/* how-it-works reuses the scroll-driven step spine; its rows carry h2 here
   because the page has no intervening h2 to hang an h3 from (§3.3). */
.step-list h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--near-black);
  margin: 0 0 8px;
}
.step-list li h2 {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.step-list li.is-visible h2 { opacity: 1; translate: 0 0; transition-delay: 0.12s; }

.service-hero { padding-top: 96px; }
.service-cta { margin-top: 12px; min-height: 48px; }

/* Copy first in source order, so the H1 is the first thing rendered on a phone
   even though the photo sits beside it on a desktop (§4.1). */
.service-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
}
.service-hero-media {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: rgba(70, 189, 198, 0.12);
}
.service-hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.hero-quiet-link, .footer-quiet-link, .cta-secondary {
  font-weight: 600;
  color: #1a7078;
  text-decoration: underline;
  text-underline-offset: 4px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.hero-quiet-link:hover, .cta-secondary:hover { color: var(--near-black); }

.hero-ctas { align-items: center; flex-wrap: wrap; }

.footnotes {
  border-top: 1px solid var(--line-soft);
  margin-top: 34px;
  padding-top: 18px;
}
.footnotes-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin: 0 0 10px;
}
.footnote-list { list-style: decimal; margin: 0; padding-left: 20px; }
.footnote-list li { font-size: 14px; line-height: 1.65; color: var(--gray-500); }
.fn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: #1a7078;
  text-decoration: none;
}

/* ---------- 3. TrackCard ------------------------------------------------ */

.track-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 32px 0 26px;
  align-items: stretch;
}
.track-grid-full { grid-template-columns: repeat(3, 1fr); gap: 20px; }

.track-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fffdf2;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 24px 22px;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.track-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(18, 17, 17, 0.1); }

/* Fixed aspect ratio so the card never reflows as the photo loads, and cover so
   portrait and landscape sources both crop cleanly. */
.track-media {
  margin: -24px -22px 18px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden;
  background: rgba(70, 189, 198, 0.12);
}
.track-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.track-name {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
/* The whole card is the tap target, not just the link text (§4.3). */
.track-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

.track-desc { font-size: 15.5px; line-height: 1.55; color: var(--gray-700); margin: 0 0 12px; }
.track-who { font-size: 15px; line-height: 1.5; color: var(--gray-500); margin: 0 0 12px; }
.track-sessions {
  font-size: 14px;
  font-weight: 700;
  color: #14595f;
  margin: 0 0 14px;
}
.track-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; }
.track-tag {
  font-size: 12.5px;
  font-weight: 600;
  color: #14595f;
  background: rgba(70, 189, 198, 0.16);
  border-radius: 999px;
  padding: 5px 11px;
}
.tracks-note { margin-top: 8px; }

/* ---------- 4. Testimonial and proof ------------------------------------ */

.testimonial-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 28px; }

.testimonial {
  margin: 0;
  background: #fffdf2;
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--teal);
  border-radius: 12px;
  padding: 24px 24px 20px;
}
.testimonial-quote {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.35;
  margin: 0 0 16px;
  color: var(--near-black);
}
.testimonial-cite { display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; }
.testimonial-name { font-weight: 700; color: var(--near-black); }
.testimonial-who { color: var(--gray-500); }
.testimonial-change { color: #14595f; font-weight: 600; }

.proof-figure {
  font-size: clamp(17px, 2.2vw, 19px);
  line-height: 1.6;
  border-left: 4px solid var(--teal);
  padding-left: 20px;
}

/* ---------- 5. CoachCard ------------------------------------------------ */

.coach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 32px; }
.coach-grid-preview { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }

.coach-card {
  background: #fffdf2;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 22px;
}
.coach-photo-frame {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(70, 189, 198, 0.12);
  margin-bottom: 18px;
}
/* Fixed aspect ratio with cover, so varied source photographs do not distort
   the layout (§4.12). */
.coach-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* Shown only while [COACH PHOTOS] is outstanding, on a page nothing links to. */
.coach-photo-missing {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-weight: 700;
  font-size: 14px !important;
  letter-spacing: 0.1em;
  color: #14595f !important;
}
.coach-name { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.02em; }
.coach-role { font-size: 14px; font-weight: 600; color: #14595f; margin: 0 0 12px; }
.coach-bio { font-size: 15.5px; line-height: 1.6; color: var(--gray-700); margin: 0 0 12px; }
.coach-works { font-size: 14.5px; color: var(--gray-500); margin: 0; }
.coach-works-label { font-weight: 700; color: var(--near-black); }

/* ---------- 6. FAQItem -------------------------------------------------- */

.faq-list { border-top: 1px solid var(--line-soft); }

.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 18px 2px;
  cursor: pointer;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--near-black);
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }

.faq-icon {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--teal);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq-icon::before { left: 0; top: 9px; width: 20px; height: 2px; }
.faq-icon::after { left: 9px; top: 0; width: 2px; height: 20px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); opacity: 0; }

.faq-a { padding: 0 2px 22px; }
.faq-a p { font-size: 16.5px; line-height: 1.65; color: var(--gray-700); margin: 0 0 12px; }
.faq-a p:last-child { margin-bottom: 0; }

/* ---------- 7. Forms ---------------------------------------------------- */

/* Layout: the heading spans the page, then the form and a supporting column.
   The form is first in source order so it leads on a phone. */
.start-head { max-width: 46em; margin-bottom: 34px; }
.start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 32px;
  align-items: start;
}

.form-card {
  position: relative;
  overflow: hidden;
  background: #fffefa;
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  padding: 34px 32px 30px;
  box-shadow: 0 20px 50px rgba(18, 17, 17, 0.07);
}
/* A teal edge along the top, so the card reads as the active thing on the page. */
.form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal), #2a8f97);
}

.intake-form { margin: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; margin-bottom: 20px; }

.form-field label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--near-black);
  margin-bottom: 8px;
}
.field-optional { font-weight: 400; color: var(--gray-500); }

/* 16px minimum: below it, iOS Safari zooms the viewport on focus (§4.2). */
.intake-form input,
.intake-form select,
.intake-form textarea {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--near-black);
  background: #fff;
  border: 1.5px solid rgba(18, 17, 17, 0.14);
  border-radius: 12px;
  padding: 13px 15px;
  min-height: 50px;
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.intake-form textarea { min-height: 170px; resize: vertical; }

.intake-form input::placeholder,
.intake-form textarea::placeholder { color: var(--gray-400); }

.intake-form input:hover,
.intake-form select:hover,
.intake-form textarea:hover { border-color: rgba(18, 17, 17, 0.28); }

.intake-form input:focus,
.intake-form select:focus,
.intake-form textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(70, 189, 198, 0.22);
}

/* The select had appearance:none and no replacement indicator, which left it
   with no arrow at all. This draws one. */
.select-wrap { position: relative; display: flex; }
.intake-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 46px;
  cursor: pointer;
}
.select-wrap::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 12px;
  height: 8px;
  margin-top: -4px;
  pointer-events: none;
  background: var(--near-black);
  clip-path: polygon(0 0, 12px 0, 6px 8px);
}

.field-help { font-size: 14px; color: var(--gray-500); margin: 8px 0 0; }
.field-error {
  font-size: 14.5px;
  font-weight: 600;
  color: #b3261e;
  margin: 8px 0 0;
}
.form-field.has-error input,
.form-field.has-error textarea { border-color: #b3261e; border-width: 2px; }

.form-submit { min-height: 56px; margin-top: 8px; font-size: 16px; }
.form-status { font-size: 15px; color: var(--gray-700); margin: 14px 0 0; min-height: 22px; }

.form-confirm { text-align: center; padding: 14px 6px 6px; }
.confirm-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: rgba(70, 189, 198, 0.16);
  color: #1f7f87;
  margin-bottom: 18px;
}
.confirm-heading { font-family: var(--font-serif); font-weight: 400; font-size: 34px; margin: 0 0 14px; }
.form-confirm p { font-size: 16.5px; line-height: 1.6; color: var(--gray-700); margin: 0 auto 12px; max-width: 34em; }
.confirm-alt { font-size: 15.5px !important; color: var(--gray-500) !important; }

/* ---------- The supporting column ---------- */

.aside-card {
  background: rgba(70, 189, 198, 0.1);
  border: 1px solid rgba(70, 189, 198, 0.28);
  border-radius: 20px;
  padding: 26px 24px;
}
.aside-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #14595f;
  margin: 0 0 20px;
}

.start-steps { list-style: none; margin: 0; padding: 0; }
.start-steps li {
  position: relative;
  display: flex;
  gap: 14px;
  padding-bottom: 22px;
}
.start-steps li:last-child { padding-bottom: 0; }
/* A connector between the markers, so the three read as a sequence. */
.start-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 8px;
  width: 2px;
  background: rgba(70, 189, 198, 0.4);
}
.start-step-n {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.start-step-copy { font-size: 15px; line-height: 1.5; color: var(--gray-700); }
.start-step-copy strong { display: block; color: var(--near-black); font-size: 15.5px; margin-bottom: 2px; }

.reassurance-list { margin: 24px 0 0; padding: 0; }
.reassurance-list li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gray-500);
  margin-bottom: 12px;
  padding-left: 24px;
  position: relative;
}
.reassurance-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 2px solid var(--teal);
}
.aside-alt { font-size: 14.5px; color: var(--gray-500); margin: 20px 0 0; }

/* This page opens tighter than the rest of the site: the calendar is what the
   page is for, and it has to be visible without scrolling for it. */
.page-book .page-head { padding-top: 56px; padding-bottom: 26px; }
.page-book .booking-section { padding-top: 0; }
.page-book .page-lede { margin-bottom: 0; }

/* Cal.com resizes the iframe itself once it loads. The min-height stops the
   page collapsing and then jumping while that happens, and there is no nested
   scroll container: the embed grows and the page scrolls normally. */
.booking-embed {
  min-height: 620px;
  margin-bottom: 24px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: rgba(70, 189, 198, 0.06);
}

/* Sits outside the embed so it is still there if the script never loads. */
.booking-fallback {
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
}
.booking-fallback p { margin: 0 0 8px; }

/* ---------- 8. Comparison lists ----------------------------------------- */

.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.compare-col {
  background: #fffdf2;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 26px 24px;
}
.compare-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--teal);
}
.compare-list li {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--gray-700);
  padding: 11px 0 11px 24px;
  position: relative;
}
.compare-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 19px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--teal);
}
.compare-note { font-size: 15.5px !important; color: var(--gray-500) !important; margin-top: 14px !important; }

.boundary-section .container { border-left: 4px solid var(--teal); padding-left: 26px; }

/* ---------- 9. Pricing -------------------------------------------------- */

/* Currently unused: no fee is published anywhere. Kept ready for the real
   figure, which should read as a heading-weight element when it lands. */
.price-figure {
  font-family: var(--font-serif) !important;
  font-size: clamp(32px, 5.5vw, 48px) !important;
  line-height: 1.15;
  color: var(--near-black) !important;
  margin: 0 0 18px !important;
}

/* ---------- 10. CTABlock ------------------------------------------------ */

/* The pale teal band this replaced read as a footer, not as the last thing the
   page asks of you. It is now the site's own panel treatment: full teal, the
   signature vertical striping, and the big panel radius. */
.cta-block { padding: 40px 0 76px; }

.cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-panel);
  padding: 88px 48px;
  text-align: center;
  background: var(--teal);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.07) 0px,
    rgba(255, 255, 255, 0.07) 1px,
    transparent 1px,
    transparent calc((100% - 5px) / 6 + 1px)
  );
  box-shadow: 0 30px 70px rgba(42, 143, 151, 0.28);
}

/* A slow wash of light drifting behind the copy, so the panel is never quite
   static. Killed under reduced motion, where it rests centred. */
.cta-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 249, 224, 0.5), rgba(255, 249, 224, 0) 68%);
  animation: cta-drift 15s ease-in-out infinite alternate;
}
@keyframes cta-drift {
  from { transform: translate(-16%, -12%) scale(0.9); opacity: 0.5; }
  to { transform: translate(16%, 12%) scale(1.15); opacity: 0.85; }
}

.cta-panel-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Near-black on teal, not cream: cream on this teal is 2:1 and fails outright.
   Near-black clears 7:1 and the panel still reads as teal. */
.cta-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 5.2vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  color: var(--near-black);
}
.cta-body {
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.6;
  color: #16292b;
  max-width: 34em;
  margin: 0 0 32px;
}

.cta-primary {
  max-width: 380px;
  min-height: 56px;
  font-size: 16px;
  padding: 16px 32px;
  box-shadow: 0 12px 28px rgba(18, 17, 17, 0.28);
}
.cta-secondary {
  margin-top: 18px;
  color: var(--near-black);
  text-decoration-thickness: 2px;
}
.cta-secondary:hover { color: #fff; }

/* The button is both staggered in and magnetic on hover. Without this the
   entrance easing (0.8s) would also govern the pointer tracking and make it
   feel laggy, so the transform gets its own timing. */
.cta-primary.magnetic {
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s ease,
    filter 0.18s ease;
}

/* ---------- 11. Footer -------------------------------------------------- */

.footer-cols { display: flex; gap: 48px; }
.footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 150px; }
.footer-col-title { font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.footer-col a { min-height: 32px; display: inline-flex; align-items: center; }
/* styles.css sets .footer-col a { color: teal }, which is more specific than
   .btn-teal and left the footer button with teal text on a teal background.
   Any button placed in a footer column needs its own colour back. */
.footer-col .btn { color: #fff; }
.footer-col .btn::after { display: none; }
.footer-note { font-size: 14px; line-height: 1.55; color: var(--gray-500); margin: 0; max-width: 26ch; }
.footer-col-cta .btn { align-self: flex-start; }
.footer-quiet-link { font-size: 14.5px; }

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  /* Form first, supporting column underneath. */
  .start-grid { grid-template-columns: 1fr; gap: 26px; }
  /* The tracks turn into a horizontal strip here rather than dropping to two
     columns. Cards are sized so the next one always peeks in, which is the
     whole affordance: the row reads as scrollable without needing arrows.
     The strip bleeds to the screen edges so cards run off the side rather
     than stopping short in a gutter. */
  .track-grid, .track-grid-full {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 32px;
    margin: 30px -32px 24px;
    padding: 4px 32px 10px;
    scrollbar-width: none;
  }
  .track-grid::-webkit-scrollbar, .track-grid-full::-webkit-scrollbar { display: none; }
  .track-card { flex: 0 0 42%; scroll-snap-align: start; }
  .coach-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { flex-wrap: wrap; gap: 32px; }
}

@media (max-width: 960px) {
  /* The mobile menu panel is inherited from styles.css; these are the parts the
     dropdown needs on top of it. */
  .main-nav { align-items: stretch; gap: 2px; min-width: 220px; }
  .nav-item-menu { flex-wrap: wrap; }
  .nav-item-menu > a { flex: 1; }
  .nav-menu {
    position: static;
    display: flex;
    box-shadow: none;
    border: none;
    padding: 0 0 6px 12px;
    min-width: 0;
    background: none;
  }
  .nav-caret { display: none; }
  .nav-cta { margin: 8px 0 0; }
}

@media (max-width: 768px) {
  .section { padding: 52px 0; }
  .page-head, .service-hero { padding-top: 64px; }
  .container { padding: 0 20px; }

  /* One card at a time from here down, with the next one peeking. */
  .track-grid, .track-grid-full {
    gap: 14px;
    scroll-padding-left: 20px;
    margin: 30px -20px 24px;
    padding: 4px 20px 8px;
  }
  .track-card { flex-basis: 78%; }
  /* Sticky hover has nowhere to go on a touch screen. */
  .track-card:hover { transform: none; box-shadow: 0 8px 22px rgba(18, 17, 17, 0.05); }
  .coach-grid, .coach-grid-preview { grid-template-columns: 1fr; }
  .testimonial-row { grid-template-columns: 1fr; }

  /* Comparison lists stack, coaching first. A two-column table below 768px is
     the most common mobile layout failure (§4.14). */
  .compare-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Photo drops below the copy, so the H1 is still the first thing rendered. */
  .service-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .service-hero-media img { aspect-ratio: 16 / 10; }

  .form-row { grid-template-columns: 1fr; gap: 0; }
  .cta-primary, .service-cta, .btn-block { width: 100%; max-width: none; min-height: 48px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; min-height: 48px; }
  .hero-quiet-link { justify-content: center; }

  .footer-cols { flex-direction: column; gap: 28px; }
  .footer-note { max-width: none; }

  /* The keyboard needs the vertical space on the intake page (§4.2). */
  .page-start .site-header { position: static; }
  .page-start .floating-cta { display: none; }

  .boundary-section .container { padding-left: 20px; }
  .recognition-list li { --pad-y: 16px; margin: 0 -12px; padding: var(--pad-y) 12px var(--pad-y) 42px; }
  .recognition-list li::before { left: 14px; }
  .recognition-list li::after { left: 12px; right: 12px; }
  .credential-row { grid-template-columns: 1fr; gap: 22px; }
  .booking-embed { min-height: 560px; }
  .page-book .page-head { padding-top: 36px; padding-bottom: 20px; }

  .cta-panel { border-radius: 32px; padding: 56px 24px; }
  .cta-glow { width: 420px; height: 420px; margin: -210px 0 0 -210px; }

  .form-card { padding: 26px 20px 24px; border-radius: 20px; }
  .start-head { margin-bottom: 24px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero { padding: 72px 0 64px; }
  .page-title { font-size: clamp(28px, 8vw, 36px); }
  .track-card, .coach-card, .compare-col { padding: 20px 18px; }
  .form-card { padding: 22px 16px 20px; }
  .track-media { margin: -20px -18px 16px; }
  .track-grid, .track-grid-full { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px; }
  .track-card { flex-basis: 82%; }
  .cta-block { padding: 24px 0 52px; }
  .cta-panel { border-radius: 26px; padding: 44px 18px; }
  .step-list li { padding-left: 48px; }
}

/* ==========================================================================
   13. Scroll-in motion

   The text-heavy pages (how it works, approach, questions, coaching vs
   therapy) are long runs of prose with nothing to hold the eye. These give
   each block a small entrance as it arrives.

   Every class here is applied by js/main.js and never written into the
   markup, so with JavaScript off the page renders fully visible instead of
   invisible. The script also skips all of it entirely under
   prefers-reduced-motion; the media query at the end is the second belt.
   ========================================================================== */

.anim-up, .anim-left, .anim-right, .anim-pop {
  opacity: 0;
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-up { transform: translateY(26px); }
.anim-left { transform: translateX(-30px); }
.anim-right { transform: translateX(30px); }
.anim-pop { transform: scale(0.94); }

.anim-up.is-visible,
.anim-left.is-visible,
.anim-right.is-visible,
.anim-pop.is-visible {
  opacity: 1;
  transform: none;
}

/* A short rule that draws itself under each section heading as the section
   arrives. It is the one repeated motif, so the pages feel related. */
.anim-keyline { position: relative; padding-bottom: 16px; }
.anim-keyline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}
.anim-keyline.is-visible::after { transform: scaleX(1); }
.section-heading.center.anim-keyline::after {
  left: 50%;
  margin-left: -28px;
  transform-origin: center;
}

/* The pricing figure is the one number on the site, so it gets its own beat. */
.price-figure.anim-pop { transition-duration: 0.5s, 0.7s; }

/* ---------- Recognition rows ----------
   These are the lines a visitor is meant to see themselves in, so they arrive
   one at a time from the left rather than as a block, and the dot lands last. */
@media (hover: hover) and (pointer: fine) {
  /* A halo rather than a scale: `transform` on this dot is driven by scroll
     position every frame, so a hover transform would be overwritten. */
  .recognition-list li:hover::before {
    background: #2a8f97;
    box-shadow: 0 0 0 6px rgba(70, 189, 198, 0.2);
  }
}

/* The stat pair that carries the experience claim. */
.credential-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.credential {
  border-left: 4px solid var(--teal);
  padding-left: 20px;
}
.credential-figure {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--near-black);
}
.credential-label {
  display: block;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--gray-700);
  margin-top: 8px;
  max-width: 24em;
}


/* ---------- The two approach diagrams ----------
   The whole argument of that page is in these two pictures, so the tracks draw
   themselves: four lines running out to nothing, then four curves arriving at
   one point. Path lengths are measured at runtime in js/main.js. */
/* styles.css leaves the tracks, endpoints and hub hidden until a class is added,
   which used to come from `reveal`. Default them all to drawn, so the diagram is
   complete with JavaScript off and under reduced motion. The .diagram-anim rules
   below re-hide them only when the script is actually going to draw them. */
.dg-split path, .dg-join path { stroke-dashoffset: 0; }
.dg-ends circle { opacity: 1; }
.dg-hub, .dg-hub-ring { transform: scale(1); }

.diagram-anim .dg-labels text {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.diagram-anim.is-drawn .dg-labels text { opacity: 1; }

/* styles.css drives these off a .is-visible class the figures no longer carry,
   so the rules below take the endpoints over completely. Higher specificity and
   a later file, so they win outright rather than by accident. */
.diagram-anim .dg-ends circle,
.diagram-anim .dg-hub,
.diagram-anim .dg-hub-ring {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.diagram-anim.is-drawn .dg-ends circle,
.diagram-anim.is-drawn .dg-hub { opacity: 1; transform: scale(1); }
.diagram-anim.is-drawn .dg-hub-ring { opacity: 0.4; transform: scale(1); }

/* Once everything has arrived the hub keeps a slow pulse: the one point the
   whole diagram is making. */
.diagram-anim.is-drawn .dg-hub-ring { animation: hub-pulse 3s ease-in-out 2.2s infinite; }
@keyframes hub-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.12; transform: scale(1.3); }
}

/* ---------- Reduced motion additions ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .step-list li h2 { opacity: 1; translate: none; }
  .track-card:hover { transform: none; }
  .anim-up, .anim-left, .anim-right, .anim-pop { opacity: 1; transform: none; }
  .anim-keyline { padding-bottom: 0; }
  .anim-keyline::after { display: none; }

  .cta-glow { animation: none; transform: none; opacity: 0.6; }
  /* --lit is never set under reduced motion, so its fallback of 1 already
     leaves every row finished. Nothing to undo here. */
  .diagram-anim .dg-labels text { opacity: 1; }
  .diagram-anim .dg-ends circle,
  .diagram-anim .dg-hub { opacity: 1; transform: none; }
  .diagram-anim .dg-hub-ring { opacity: 0.4; transform: none; animation: none; }
}