/* ==========================================================================
   FULL CIRCLE COACHING — DESIGN SYSTEM
   Implements section 1 of full-circle-page-spec.md.
   Mobile first. Breakpoints at 640 and 1024 only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Monochrome only. No accent colour anywhere in v1. If something needs to
   stand out it gets scale, weight or white space, never a colour.
   -------------------------------------------------------------------------- */

:root {
  /* Palette */
  --fc-black:    #000000; /* page background, hero, dark sections */
  --fc-white:    #FFFFFF; /* type on black, light sections */
  --fc-grey-60:  #8E8E8E; /* secondary text */
  --fc-grey-20:  #1F1F1F; /* borders and rules on black */
  --fc-grey-90:  #E5E5E5; /* borders and rules on white */

  /* Semantic roles. Flipped by .section--light. */
  --fc-bg:            var(--fc-black);
  --fc-fg:            var(--fc-white);
  --fc-fg-secondary:  var(--fc-grey-60);
  --fc-rule:          var(--fc-grey-20);

  /* Type families
     Display is licensed via Adobe Fonts. No Google Fonts fallback for it. */
  --fc-font-display: futura-pt-condensed, 'Arial Narrow', sans-serif;
  --fc-font-body:    Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Display metrics, per spec.
     The Adobe Fonts kit publishes futura-pt-condensed as two faces only:
     normal/400 and italic/800. The Extra Bold in the kit is the italic, so
     that is what the display face uses. Weight 800 upright would be faked
     from the 400 book weight. */
  --fc-display-weight:  800;
  --fc-display-style:   italic;
  --fc-display-leading: 0.85;
  --fc-display-track:   -0.02em;

  /* Body metrics */
  --fc-body-leading: 1.6;

  /* Spacing scale */
  --fc-space-1: 0.25rem;
  --fc-space-2: 0.5rem;
  --fc-space-3: 0.75rem;
  --fc-space-4: 1rem;
  --fc-space-5: 1.5rem;
  --fc-space-6: 2rem;
  --fc-space-7: 3rem;
  --fc-space-8: 4rem;
  --fc-space-9: 6rem;

  /* Layout */
  --fc-gutter:    var(--fc-space-5);
  --fc-measure:   34rem;  /* max line length for body copy */
  --fc-container: 68rem;

  /* Controls */
  --fc-tap-min: 56px;     /* minimum tap target, per spec */

  /* Hero shot arrives pre-graded (dramatic spotlight/vignette treatment),
     so no desaturation on top of it. Supporting photography elsewhere on
     the site stays fully mono, per spec section 1; this is the one
     deliberate exception. */
  --fc-hero-grade: none;

  /* How much of the top of the hero shot to crop away, so Jessie's face sits
     near the top edge on load. Must be a length, not a percentage: percentage
     margins resolve against the container's WIDTH, while percentage heights
     resolve against its HEIGHT, so a % here shifts by the wrong amount. */
  --fc-hero-crop-top: 25svh;

  /* Extra image height held in reserve below the visible frame, so scrolling
     has real room to move the photo and reveal Kylo further down in it,
     instead of the copy feeling boxed in by the image's own height. */
  --fc-hero-reveal-bottom: 32svh;

  /* How fast the reveal tracks the scroll. Distance is capped by the
     reserve above, so the reveal always finishes rather than running out
     of image. */
  --fc-hero-parallax: 0.6;

  /* One rhythm for every section boundary, hero included: this is half the
     original section padding, so consecutive sections sit closer, and the
     hero's own bottom padding matches it so the hero-to-content gap reads
     the same as every other section-to-section gap on the page. */
  --fc-section-gap: 1.75rem;
}

@media (min-width: 640px) {
  :root { --fc-section-gap: 2.5rem; }
}

@media (min-width: 640px) {
  :root { --fc-gutter: var(--fc-space-6); }
}

@media (min-width: 1024px) {
  :root { --fc-gutter: var(--fc-space-7); }
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fc-bg);
  color: var(--fc-fg);
  font-family: var(--fc-font-body);
  font-weight: 400;
  font-size: 1.125rem;              /* 18px, readable at arm's length */
  line-height: var(--fc-body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;               /* no horizontal scroll at any width */
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Visible focus everywhere. Never removed. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. SECTIONS AND LAYOUT
   -------------------------------------------------------------------------- */

.section {
  background: var(--fc-bg);
  color: var(--fc-fg);
  padding-block: var(--fc-section-gap);
}

.section--light {
  --fc-bg:           var(--fc-white);
  --fc-fg:           var(--fc-black);
  --fc-fg-secondary: #5A5A5A;   /* grey-60 fails contrast on white, darkened */
  --fc-rule:         var(--fc-grey-90);
}

.section--offwhite {
  --fc-bg:           #F4F4F4;
  --fc-fg:           var(--fc-black);
  --fc-fg-secondary: #5A5A5A;
  --fc-rule:         var(--fc-grey-90);
}

.section--flush { padding-block: 0; }

/* --fc-section-gap already switches to its desktop value above 640px. */

.container {
  width: 100%;
  max-width: var(--fc-container);
  margin-inline: auto;
  padding-inline: var(--fc-gutter);
}

.measure { max-width: var(--fc-measure); }

.rule {
  border: 0;
  border-top: 1px solid var(--fc-rule);
  margin-block: var(--fc-space-6);
}

.stack > * + * { margin-top: var(--fc-space-4); }
.stack-lg > * + * { margin-top: var(--fc-space-6); }

/* --------------------------------------------------------------------------
   4. DISPLAY TYPE
   Brand and headlines only. Every sentence a human has to read is Inter.
   -------------------------------------------------------------------------- */

.display {
  font-family: var(--fc-font-display);
  font-weight: var(--fc-display-weight);
  font-style: var(--fc-display-style);
  text-transform: uppercase;
  line-height: var(--fc-display-leading);
  letter-spacing: var(--fc-display-track);
  margin: 0;
}

.display--xl { font-size: clamp(3.25rem, 14vw, 7rem); }
.display--lg { font-size: clamp(2.5rem, 10vw, 4.5rem); }
/* Matches .btn-call's font-size: "What actually happens" and "Who I work
   with" read at the same size as the Call Jessie label. */
.display--md { font-size: 1.375rem; text-align: center; }
.display--sm { font-size: clamp(1.35rem, 5vw, 2rem); }

/* --------------------------------------------------------------------------
   5. BODY TYPE
   -------------------------------------------------------------------------- */

.lede {
  font-size: 1rem;             /* matches .intro / .hero__sub */
  line-height: 1.5;
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 640px) {
  .lede { font-size: 1.125rem; }
}

.body     { font-size: 1.125rem; }
.body-sm  { font-size: 1rem; }
.body-xs  { font-size: 0.875rem; }

.medium   { font-weight: 500; }
.secondary{ color: var(--fc-fg-secondary); }

.eyebrow {
  font-family: var(--fc-font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--fc-fg);
}

/* A plain text link. Deliberately quiet. Never dressed as a button. */
/* Same size as body copy (.intro / .hero__sub), bold rather than a
   different size, to read as a link and not just quieter text. Full
   foreground colour, not the secondary grey, so it doesn't wash out. */
.link-quiet {
  color: var(--fc-fg);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

@media (min-width: 640px) {
  .link-quiet { font-size: 1.125rem; }
}

.link-quiet:hover { color: var(--fc-fg); }

/* --------------------------------------------------------------------------
   6. WORDMARK
   Three lines, stacked, left aligned, staggered scale so the block sits
   flush on both edges. The multipliers below are the no-JS fallback and are
   measured from the real face. components.js refines them to exact once the
   webfont has loaded.
   -------------------------------------------------------------------------- */

.wordmark {
  display: block;
  text-decoration: none;
  color: currentColor;
  --fc-wordmark-size: 4rem;
  /* Gap between lines, as a multiple of the FULL line's size. Read by
     components.js, which converts it into per line margins so the two gaps
     are optically identical. */
  --fc-wordmark-gap: 0.03;
}

.wordmark__line {
  display: block;
  font-family: var(--fc-font-display);
  font-weight: var(--fc-display-weight);
  font-style: var(--fc-display-style);
  text-transform: uppercase;
  /* line-height 1 keeps the line box equal to the font size, which is what
     the gap maths in components.js assumes. Leading is handled by margins,
     not by line-height, because the three lines are different sizes and a
     shared line-height would produce two different gaps. */
  line-height: 1;
  letter-spacing: var(--fc-display-track);
  white-space: nowrap;
}

/* Ratios approximate equal optical width: FULL is 4 characters, CIRCLE 6,
   COACHING 8, so the shorter the word the larger it sets. */
.wordmark__line--1 { font-size: calc(var(--fc-wordmark-size) * 1.0000); } /* FULL */
.wordmark__line--2 { font-size: calc(var(--fc-wordmark-size) * 0.6781); } /* CIRCLE */
.wordmark__line--3 { font-size: calc(var(--fc-wordmark-size) * 0.4259); } /* COACHING */

/* No JS fallback leading. components.js overwrites these with exact values. */
.wordmark__line--2 { margin-top: 0.06em; }
.wordmark__line--3 { margin-top: 0.09em; }

.wordmark--center { text-align: center; }

/* --------------------------------------------------------------------------
   6b. TESTIMONIAL
   Large Inter, never the display face. Everything warm about Jessie comes out
   of a client's mouth, so this is the one place on the site where praise is
   allowed to sit at size.
   -------------------------------------------------------------------------- */

.testimonial {
  max-width: 32rem;
  margin-inline: auto;
  text-align: center;
}

.testimonial__quote {
  font-family: var(--fc-font-body);
  font-weight: 400;
  font-size: clamp(1.125rem, 3.6vw, 1.375rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.testimonial__cite {
  display: block;
  margin-top: var(--fc-space-5);
  font-size: 1rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--fc-fg-secondary);
}

/* --------------------------------------------------------------------------
   7. BUTTONS
   One action per page. This is the only button on the public site.
   -------------------------------------------------------------------------- */

.btn-call {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;                       /* full width on mobile */
  min-height: var(--fc-tap-min);     /* 56px */
  padding: var(--fc-space-3) var(--fc-space-6);
  border: 1px solid transparent;
  background: var(--fc-fg);          /* white on black sections */
  color: var(--fc-bg);
  font-family: var(--fc-font-display);
  font-weight: var(--fc-display-weight);
  font-style: var(--fc-display-style);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

/* On light sections it inverts to black on white. */
.section--light .btn-call,
.section--offwhite .btn-call { background: var(--fc-black); color: var(--fc-white); }

.btn-call:hover { opacity: 0.82; }
.btn-call:active { opacity: 0.7; }

.btn-call--ghost {
  background: transparent;
  color: var(--fc-fg);
  border-color: var(--fc-fg);
}

.section--light .btn-call--ghost,
.section--offwhite .btn-call--ghost {
  background: transparent;
  color: var(--fc-black);
  border-color: var(--fc-black);
}

/* Full width at every breakpoint: a Call Jessie button always matches the
   width of whatever section it sits in, never sizes to its own content. */

/* --------------------------------------------------------------------------
   8. PHOTOGRAPHY
   Grading lives in CSS, never baked into the files, so colour can come back
   later without re-exporting anything.
   -------------------------------------------------------------------------- */

.photo,
.photo img {
  filter: grayscale(1) contrast(1.1);
}

/* Darkening layer so white type over a photo always passes contrast. */
.photo-frame {
  position: relative;
  overflow: hidden;
}

.photo-frame > .photo,
.photo-frame > .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

.photo-frame > .over {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   9. HEADER AND FOOTER
   Header carries the wordmark only. No nav on the public site.
   -------------------------------------------------------------------------- */

.site-header {
  display: block;
  background: var(--fc-black);
  color: var(--fc-white);
  padding: var(--fc-space-5) 0;
}

.site-header .wordmark { --fc-wordmark-size: 2.75rem; }

@media (min-width: 640px) {
  .site-header .wordmark { --fc-wordmark-size: 3.25rem; }
}

.site-footer {
  background: var(--fc-black);
  color: var(--fc-white);
  padding: var(--fc-space-8) 0 var(--fc-space-7);
  border-top: 1px solid var(--fc-grey-20);
  font-size: 1rem;
}

.site-footer__name {
  font-weight: 500;
  letter-spacing: 0.02em;
}

.site-footer__list > li + li { margin-top: var(--fc-space-1); }

.site-footer a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

/* Still a real tap target, just not the full 56px primary-button minimum,
   which on a single line of plain text read as doubled line spacing. */
.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
}

.site-footer__meta { color: var(--fc-grey-60); font-size: 0.8125rem; }

/* Admin, not content: kept small and quiet. */
.site-footer__ack {
  color: var(--fc-grey-60);
  max-width: var(--fc-measure);
  margin-top: var(--fc-space-5);
  font-size: 0.8125rem;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .site-footer__inner {
    display: flex;
    justify-content: space-between;
    gap: var(--fc-space-8);
  }
  .site-footer__ack { margin-top: 0; text-align: right; }
}

/* --------------------------------------------------------------------------
   10. MOTION
   Almost none. Type never animates in. The images carry the weight.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   11. LANDING PAGE
   One action per page, and the action is a phone call.
   -------------------------------------------------------------------------- */

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--fc-black);
  color: var(--fc-white);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Full bleed at every width, including desktop — the old portrait-frame
   cap here belonged to the previous narrow hero crop. The FCF2 photo is
   closer to square (1155x1400), so cover-fit holds up full width without
   the zoomed-in, fragment-of-Jessie problem the narrow shot had. */

/* The shot has dead space above Jessie's head. Crop it off the top so her
   head sits on the top edge of the frame and her eyes read above the
   wordmark. The box is grown past the container and pulled back up by the
   same amount, which is the only way object-position can bite: with no
   overflow there is nothing for it to move. */
.hero__media img {
  width: 100%;
  height: calc(100% + var(--fc-hero-crop-top) + var(--fc-hero-reveal-bottom));
  margin-top: calc(-1 * var(--fc-hero-crop-top));
  object-fit: cover;
  object-position: center top;
  filter: var(--fc-hero-grade);
}

/* The shot is full colour and already professionally graded (its own
   vignette, dark corners), so this stays subtle: just enough of a dark
   band through the middle, where the wordmark sits, and the bottom, for
   the copy and button, to keep white type legible. Not the heavy top and
   bottom bands the mono treatment needed. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.06) 0%,
      rgba(0,0,0,0.05) 18%,
      rgba(0,0,0,0.18) 42%,
      rgba(0,0,0,0.22) 62%,
      rgba(0,0,0,0.32) 82%,
      rgba(0,0,0,1) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block: var(--fc-space-6) var(--fc-section-gap);
}

/* The wordmark sits low in the open middle, not centred, so Jessie's face
   reads clean above it. Her being visibly mid effort is the argument the
   page is making, so nothing is allowed to cover it. */
.hero__mark {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-block: var(--fc-space-6) 3rem;
}

.hero__mark .wordmark { --fc-wordmark-size: clamp(8.1rem, 37.8vw, 14.4rem); }

/* ---- Hero ring mark --------------------------------------------------------
   Replaces the stacked wordmark on the homepage hero only — the shared
   header wordmark elsewhere is untouched. The outer ring rotates; the
   centred tagline is a separate, non-rotating element so it stays put
   and readable.

   Self-hosted directly from Google's font files, not the css2 API — see
   the note in index.html's <head>. Only the one weight the ring uses. */

@font-face {
  font-family: 'Archivo Expanded';
  font-style: normal;
  font-weight: 500;
  /* block, not swap: gives the browser's own native loading behaviour the
     same "don't paint until it's right" property as the JS reveal below,
     as a second, independent layer of the same fix rather than relying on
     the JS timeout alone on a slow connection. */
  font-display: block;
  src: url('https://fonts.gstatic.com/s/archivo/v25/k3k6o8UDI-1M0wlSV9XAw6lQkqWY8Q8EsJaRE-NWIDdgffTTBjNZ9xdpBUjiVA.woff2') format('woff2');
}

.ring {
  display: block;
  width: clamp(23rem, 85vw, 31.6rem);
  height: auto;
  overflow: visible;
  /* Hidden until the JS at the bottom of the page confirms Archivo Expanded
     has actually loaded, then reveals it. Safari has a known bug where an
     SVG <text> painted with a fallback font before a web font finishes
     loading never re-paints with the real font once it arrives — unlike
     ordinary HTML text, which reflows automatically. Painting the SVG for
     the first time only once the font is already loaded sidesteps the bug
     rather than fighting it. */
  visibility: hidden;
}

.ring.is-ready { visibility: visible; }

/* Small header lockup — about.html, and anywhere else the ring appears
   away from the hero photo. Same markup, just capped much smaller. */
.ring--compact { width: clamp(8.5rem, 46vw, 11rem); }

@media (min-width: 1024px) {
  .ring {
    width: clamp(31.6rem, 47vw, 41.4rem);
  }

  .ring--compact { width: 11rem; }
}

/* Rotation itself is the SMIL <animateTransform> in the markup, not CSS —
   see the comment there. */

.ring__text {
  font-family: 'Archivo Expanded', var(--fc-font-body);
  font-style: normal;   /* Roman, never italic */
  font-weight: 500;
  font-size: 15.5px;
  fill: var(--fc-white);
}

.ring__dot {
  fill: var(--fc-white);
}

.ring__tagline {
  font-family: var(--fc-font-body);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.02em;
  fill: var(--fc-white);
}

/* Everything under the wordmark is centred, so the hero reads as one
   stacked column rather than a centred mark sitting on left aligned copy. */
.hero__copy {
  flex: 0 0 auto;
  text-align: center;
  margin-top: var(--fc-space-7);
}

/* Sized down and set to three lines so it supports the wordmark instead of
   competing with it. Both are heavy italic caps, so the size gap between
   them has to do the work of separating them. */
.hero__h1 {
  font-size: clamp(1.5rem, 6.1vw, 2.5rem);
  max-width: 21ch;       /* holds it to two balanced lines */
  margin-inline: auto;
  text-wrap: balance;
}

.hero__sub {
  margin: var(--fc-space-6) auto 0;   /* clear air off the headline: both are
                                         centred blocks and they crowd each
                                         other without it */
  max-width: 28rem;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--fc-white);
  text-wrap: balance;
}

.hero__cta { margin-top: var(--fc-space-6); }

/* One line, always. Font-size tracks the viewport rather than a fixed rem
   scale, since a fixed size wraps on a narrow phone. */
.hero__note {
  margin: var(--fc-space-3) auto 0;
  font-family: var(--fc-font-display);
  font-weight: var(--fc-display-weight);
  font-style: var(--fc-display-style);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(0.6875rem, 4vw, 0.9375rem);
  line-height: 1.2;
  color: var(--fc-white);
  white-space: nowrap;
}

@media (min-width: 640px) {
  .hero__sub { font-size: 1.125rem; }
}

/* ---- Facts strip --------------------------------------------------------- */

/* Replaces the four-fact accolade strip. This is Jessie talking, not a
   headline, so it stays in Inter at a size built for reading, not scanning. */
/* Matches .hero__sub, "One to one training..." — same size as that line. */
.intro {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

.intro > p + p { margin-top: var(--fc-space-5); }

@media (min-width: 640px) {
  .intro { font-size: 1.125rem; }
}

/* ---- What actually happens ----------------------------------------------- */

.steps {
  margin-top: var(--fc-space-5);
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

.steps > li + li {
  margin-top: var(--fc-space-3);
  padding-top: var(--fc-space-3);
  border-top: 1px solid var(--fc-rule);
}

/* Number folded into the lead line itself ("1. You call.") rather than a
   separate numeral column: at body-copy size the old display numerals had
   nothing to anchor to and just floated in dead grid space. */
.step__lead {
  display: block;
  font-weight: 700;
  font-size: 1rem;             /* matches .intro / .hero__sub */
}

.step__body {
  margin-top: var(--fc-space-1);
  font-size: 1rem;             /* matches .intro / .hero__sub */
  line-height: 1.4;
  color: var(--fc-fg-secondary);
}

@media (min-width: 640px) {
  .step__lead { font-size: 1.125rem; }
  .step__body { font-size: 1.125rem; }
}

/* ---- Closing call --------------------------------------------------------
   Both buttons span the full container width, same as the white section
   above them, rather than sizing to their own content on a wide screen. */

/* The fallback sits below the primary Call Jessie button: same button shape
   so it reads as tappable, but visibly secondary. Smaller, outlined rather
   than filled, muted rather than white. Never equal weight to the call. */

.closing__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: var(--fc-space-4);
  padding: var(--fc-space-2) var(--fc-space-6);
  border: 1px solid var(--fc-white);
  background: transparent;
  color: var(--fc-white);
  font-family: var(--fc-font-display);
  font-weight: var(--fc-display-weight);
  font-style: var(--fc-display-style);
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.closing__fallback:hover {
  background: var(--fc-white);
  color: var(--fc-black);
}

@media (min-width: 640px) {
  .closing__fallback { width: auto; min-width: 18rem; }
}

/* --------------------------------------------------------------------------
   12. THE QUESTIONNAIRE
   The fallback path, not the front door. One question per screen for the
   why, grouped screens for the practical. Everything skippable.
   -------------------------------------------------------------------------- */

.form-shell {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--fc-black);
  color: var(--fc-white);
}

.form-shell__head {
  padding: var(--fc-space-5) 0 var(--fc-space-4);
  border-bottom: 1px solid var(--fc-grey-20);
}

.form-shell__head .wordmark { --fc-wordmark-size: 2.25rem; }

.form-shell__body {
  flex: 1 1 auto;
  padding-block: var(--fc-space-6) var(--fc-space-8);
}

.q-step { display: block; }

/* ---- Progress ------------------------------------------------------------ */

.progress {
  display: flex;
  gap: 4px;
  margin-top: var(--fc-space-4);
}

.progress__seg {
  flex: 1 1 0;
  height: 3px;
  background: var(--fc-grey-20);
}

.progress__seg--done { background: var(--fc-white); }

.progress__label {
  margin-top: var(--fc-space-3);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fc-grey-60);
}

/* ---- Steps --------------------------------------------------------------- */

.step-q {
  font-size: clamp(1.5rem, 6.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 500;
  text-wrap: balance;
  max-width: 22ch;
}

.step-hint {
  margin-top: var(--fc-space-3);
  color: var(--fc-grey-60);
  max-width: 34rem;
}

.step-group__title {
  font-size: clamp(1.5rem, 6.4vw, 2.25rem);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.step-fields {
  margin-top: var(--fc-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-6);
}

/* ---- Fields -------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--fc-space-3); }

.field__label {
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.35;
}

.field__req {
  color: var(--fc-grey-60);
  font-weight: 400;
}

.field__note {
  font-size: 0.9375rem;
  color: var(--fc-grey-60);
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--fc-tap-min);
  padding: var(--fc-space-3) var(--fc-space-4);
  background: transparent;
  color: var(--fc-white);
  border: 1px solid #3A3A3A;
  border-radius: 0;
  font-family: var(--fc-font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}

.textarea { min-height: 8rem; resize: vertical; }

.select {
  background-image: linear-gradient(45deg, transparent 50%, #FFFFFF 50%),
                    linear-gradient(135deg, #FFFFFF 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--fc-space-8);
}

.select option { background: var(--fc-black); color: var(--fc-white); }

.input::placeholder,
.textarea::placeholder { color: #6E6E6E; }

.input:focus, .textarea:focus, .select:focus { border-color: var(--fc-white); }

.field--invalid .input,
.field--invalid .textarea,
.field--invalid .select { border-color: var(--fc-white); border-width: 2px; }

.field__error { font-size: 0.9375rem; color: var(--fc-white); font-weight: 500; }

/* ---- Choices ------------------------------------------------------------- */

.choices { display: flex; flex-direction: column; gap: var(--fc-space-2); }

.choice {
  display: flex;
  align-items: center;
  gap: var(--fc-space-4);
  min-height: var(--fc-tap-min);
  padding: var(--fc-space-3) var(--fc-space-4);
  border: 1px solid #3A3A3A;
  cursor: pointer;
}

.choice:has(input:checked) { border-color: var(--fc-white); background: #141414; }
.choice:has(input:focus-visible) { outline: 2px solid var(--fc-white); outline-offset: 2px; }

.choice input { width: 22px; height: 22px; accent-color: var(--fc-white); flex: 0 0 auto; }

.choice span { font-size: 1.0625rem; line-height: 1.35; }

/* Movement screen: one statement, three answers */
.screen-item {
  border: 1px solid #3A3A3A;
  padding: var(--fc-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-3);
}

.screen-item__text { font-size: 1.0625rem; line-height: 1.35; }

.screen-item__opts { display: flex; gap: var(--fc-space-2); flex-wrap: wrap; }

.screen-item__opts .choice { flex: 1 1 auto; min-width: 6.5rem; justify-content: center; }
.screen-item__opts .choice span { font-size: 1rem; }

/* ---- Navigation ---------------------------------------------------------- */

.step-nav {
  margin-top: var(--fc-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-4);
}

.step-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-4);
}

.btn-back {
  background: none;
  border: 0;
  padding: var(--fc-space-3) 0;
  min-height: var(--fc-tap-min);
  color: var(--fc-grey-60);
  font-size: 1rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.btn-back:hover { color: var(--fc-white); }

.btn-skip {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: var(--fc-space-3) 0;
  min-height: var(--fc-tap-min);
  color: var(--fc-grey-60);
  font-size: 1rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.btn-skip:hover { color: var(--fc-white); }

.saved-note {
  font-size: 0.875rem;
  color: var(--fc-grey-60);
  min-height: 1.2em;
}

/* ---- Thanks -------------------------------------------------------------- */

.thanks {
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--fc-black);
  color: var(--fc-white);
  padding-block: var(--fc-space-8);
}

.thanks__h {
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.thanks__body { margin-top: var(--fc-space-5); max-width: 32rem; }
.thanks__body > p + p { margin-top: var(--fc-space-4); }
.thanks__cta { margin-top: var(--fc-space-7); max-width: 26rem; }


/* --------------------------------------------------------------------------
   13. THE ABOUT PAGE
   -------------------------------------------------------------------------- */

.about-hero {
  padding-block: var(--fc-section-gap);
}

.about-hero__eyebrow {
  color: var(--fc-grey-60);
  text-align: center;
}

/* Large, generous line height. A person talking, not a headline. */
/* Matches .intro / .hero__sub, the body copy size established on the
   landing page. */
.about-hero__prose {
  margin-top: var(--fc-space-5);
  margin-inline: auto;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}

@media (min-width: 640px) {
  .about-hero__prose { font-size: 1.125rem; }
}

.about-hero__prose > p + p { margin-top: var(--fc-space-5); }

.prose { max-width: 34rem; font-size: 1.125rem; line-height: 1.65; }
.prose > p + p { margin-top: var(--fc-space-5); }

.career-list { margin-top: var(--fc-space-5); }
.career-list > li {
  padding-block: var(--fc-space-4);
  font-weight: 500;
  font-size: 1.1875rem;
}
.career-list > li + li { border-top: 1px solid var(--fc-rule); }

.about-testimonials { display: flex; flex-direction: column; align-items: center; gap: var(--fc-space-7); }
.about-testimonials .testimonial { max-width: none; }

/* --------------------------------------------------------------------------
   14. ABOUT GALLERY
   Mum, athlete, competitor. A simple mosaic, mono per spec section 1,
   no captions: the words above already say what these are.
   -------------------------------------------------------------------------- */

.about-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fc-space-3);
}

.about-gallery__item {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.about-gallery__item--tall { aspect-ratio: 3 / 4; }

.about-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The baby-kiss shot (top left) reads flat next to the others. Extra
   contrast on top of the standard mono treatment, this image only. */
.about-gallery__img--contrast {
  filter: grayscale(1) contrast(1.35) brightness(1.04);
}

@media (min-width: 640px) {
  .about-gallery { grid-template-columns: repeat(4, 1fr); gap: var(--fc-space-4); }
}

/* --------------------------------------------------------------------------
   15. COACH TOOL
   Black, white Inter, big tap targets, no display face beyond the
   wordmark — spec section 1's "one exception". This is a tool, not the
   public site.
   -------------------------------------------------------------------------- */

body.coach {
  background: var(--fc-black);
  color: var(--fc-white);
}

.coach-shell { min-height: 100svh; }

.coach-header {
  display: flex;
  align-items: center;
  gap: var(--fc-space-4);
  padding: var(--fc-space-4) var(--fc-gutter);
  border-bottom: 1px solid var(--fc-grey-20);
}

.coach-header__link {
  color: var(--fc-grey-60);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  font-size: 0.9375rem;
}
.coach-header__link:hover { color: var(--fc-white); }

.coach-header__title { font-weight: 500; font-size: 1.0625rem; flex: 1 1 auto; }

/* ---- Client list ----------------------------------------------------- */

.coach-list { padding-block: var(--fc-space-6); }

.coach-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-4);
  min-height: var(--fc-tap-min);
  padding-block: var(--fc-space-4);
  border-bottom: 1px solid var(--fc-grey-20);
  text-decoration: none;
  color: var(--fc-white);
}

.coach-row__name { font-weight: 500; font-size: 1.0625rem; }

.coach-row__meta { display: flex; align-items: center; gap: var(--fc-space-4); }

.coach-row__status {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--fc-grey-20);
  color: var(--fc-grey-60);
  white-space: nowrap;
}
.coach-row__status--new-answers { color: var(--fc-white); border-color: var(--fc-white); }
.coach-row__status--draft-ready { color: #C9A227; border-color: #C9A227; }
.coach-row__status--due-check-in { color: #E0913A; border-color: #E0913A; }
.coach-row__status--approved { color: #4CAF6D; border-color: #4CAF6D; }

.coach-row__date { color: var(--fc-grey-60); font-size: 0.875rem; }

/* ---- Client list stats bar --------------------------------------------- */

.coach-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fc-space-3);
  margin-bottom: var(--fc-space-2);
}
@media (min-width: 640px) {
  .coach-stats { grid-template-columns: repeat(5, 1fr); }
}

.coach-stat {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-1);
  padding: var(--fc-space-4);
  border: 1px solid var(--fc-grey-20);
}
.coach-stat--total { border-color: var(--fc-white); }
.coach-stat__count { font-size: 1.75rem; font-weight: 500; line-height: 1; }
.coach-stat__label { font-size: 0.8125rem; color: var(--fc-grey-60); }

/* ---- Builder ------------------------------------------------------------ */

.builder {
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-6);
  padding: var(--fc-gutter);
}

@media (min-width: 1024px) {
  .builder { flex-direction: row; align-items: flex-start; }
  .builder__answers { flex: 0 0 20rem; position: sticky; top: var(--fc-space-4); }
  .builder__main { flex: 1 1 auto; min-width: 0; }
}

.builder__answers {
  border: 1px solid var(--fc-grey-20);
  padding: var(--fc-space-4);
}

.answer-row {
  display: flex;
  justify-content: space-between;
  gap: var(--fc-space-3);
  padding-block: var(--fc-space-2);
  border-bottom: 1px solid var(--fc-grey-20);
  font-size: 0.9375rem;
}
.answer-row__label { color: var(--fc-grey-60); }
.answer-row__val { text-align: right; }

.builder-flags {
  border: 1px solid var(--fc-white);
  padding: var(--fc-space-4);
  margin-bottom: var(--fc-space-5);
}

.builder-reasons {
  margin-top: var(--fc-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-1);
}

.builder-day {
  margin-top: var(--fc-space-6);
  padding-top: var(--fc-space-5);
  border-top: 1px solid var(--fc-grey-20);
}
.builder-day__title { font-weight: 500; font-size: 1.0625rem; margin-bottom: var(--fc-space-4); }

.builder-ex {
  border: 1px solid var(--fc-grey-20);
  padding: var(--fc-space-4);
  margin-bottom: var(--fc-space-3);
}
.builder-ex--locked { opacity: 0.7; }

.builder-ex__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fc-space-3);
}
@media (min-width: 640px) {
  .builder-ex__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.builder-field { display: flex; flex-direction: column; gap: var(--fc-space-1); margin-bottom: var(--fc-space-3); }
.builder-field__label { font-size: 0.8125rem; color: var(--fc-grey-60); }
.builder-field__input { min-height: 44px; }
textarea.builder-field__input { min-height: 4.5rem; }

.builder-ex__actions { display: flex; gap: var(--fc-space-2); margin-top: var(--fc-space-3); }

.builder-btn {
  min-height: 44px;
  padding: 0 var(--fc-space-4);
  background: transparent;
  border: 1px solid var(--fc-grey-20);
  color: var(--fc-white);
  cursor: pointer;
  font-size: 0.9375rem;
}
.builder-btn:hover { border-color: var(--fc-white); }
.builder-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.builder-btn--danger { border-color: #8E2A2A; color: #E0A3A3; }

.builder-swap {
  margin-top: var(--fc-space-3);
  padding-top: var(--fc-space-3);
  border-top: 1px dashed var(--fc-grey-20);
}
.builder-swap__row { display: flex; flex-wrap: wrap; gap: var(--fc-space-2); margin-block: var(--fc-space-2); }

.builder-block {
  border: 1px solid var(--fc-grey-20);
  padding: var(--fc-space-4);
  margin-bottom: var(--fc-space-4);
}
.builder-block__head { display: flex; align-items: center; gap: var(--fc-space-3); flex-wrap: wrap; }
.builder-block__format { min-height: 44px; flex: 1 1 auto; min-width: 10rem; }
.builder-block__explain { margin-top: var(--fc-space-2); }
.builder-block__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fc-space-3);
  margin-top: var(--fc-space-3);
}
@media (min-width: 640px) {
  .builder-block__meta { grid-template-columns: repeat(2, 1fr); }
}

.builder-intro {
  margin-top: var(--fc-space-5);
  padding-top: var(--fc-space-5);
  border-top: 1px solid var(--fc-grey-20);
}

.checkins {
  margin-top: var(--fc-space-5);
  padding-top: var(--fc-space-5);
  border-top: 1px solid var(--fc-grey-20);
}
.checkins__add { display: flex; flex-direction: column; gap: var(--fc-space-2); margin-top: var(--fc-space-3); }
.checkins__add textarea { min-height: 4rem; }
.checkins__history { margin-top: var(--fc-space-4); display: flex; flex-direction: column; gap: var(--fc-space-3); }

.checkin-row { padding-bottom: var(--fc-space-3); border-bottom: 1px solid var(--fc-grey-20); }
.checkin-row__date { font-size: 0.8125rem; color: var(--fc-grey-60); }
.checkin-row__note { margin-top: var(--fc-space-1); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   16. CLIENT PROGRAM
   -------------------------------------------------------------------------- */

body.client-program { background: var(--fc-black); color: var(--fc-white); }

.client-note {
  margin-top: var(--fc-space-4);
  font-size: 1.0625rem;
  line-height: 1.5;
  padding: var(--fc-space-4);
  border-left: 2px solid var(--fc-white);
}

.client-checkin {
  margin-top: var(--fc-space-5);
  padding: var(--fc-space-4);
  border: 1px solid var(--fc-grey-20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-space-4);
  flex-wrap: wrap;
}
.client-checkin--due { border-color: #E0913A; }
.client-checkin__label { font-weight: 500; }
.client-checkin--due .client-checkin__label { color: #E0913A; }
.client-checkin .btn-call { width: auto; min-width: 0; flex: 0 0 auto; padding-inline: var(--fc-space-5); }
.client-checkin__done { font-weight: 500; }

.client-days { margin-top: var(--fc-space-6); }

.client-day {
  border-bottom: 1px solid var(--fc-grey-20);
}

.client-day__summary {
  min-height: var(--fc-tap-min);
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 1.1875rem;
  cursor: pointer;
  padding-block: var(--fc-space-3);
}

.client-day__body { padding-bottom: var(--fc-space-5); }

.client-ex {
  padding: var(--fc-space-4) 0;
  border-top: 1px solid var(--fc-grey-20);
}

.client-ex__tick {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  min-height: var(--fc-tap-min);
  cursor: pointer;
}
.client-ex__tick input { width: 26px; height: 26px; accent-color: var(--fc-white); flex: 0 0 auto; }
.client-ex__name { font-size: 1.125rem; font-weight: 500; }

.client-ex__meta { margin-top: var(--fc-space-2); color: var(--fc-grey-60); font-size: 1rem; }
.client-ex__cue { margin-top: var(--fc-space-1); font-size: 1rem; }
.client-ex__note { margin-top: var(--fc-space-1); font-size: 1rem; color: var(--fc-grey-60); font-style: italic; }

.client-intro {
  margin-top: var(--fc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-4);
}
.client-intro__block { padding: var(--fc-space-4); border-left: 2px solid var(--fc-grey-20); }
.client-intro__label { font-weight: 500; margin-bottom: var(--fc-space-1); }
.client-intro__body { color: var(--fc-grey-60); line-height: 1.5; }

.client-block { padding-top: var(--fc-space-4); }
.client-block__format { font-weight: 500; font-size: 1rem; }
.client-block__explain { margin-top: var(--fc-space-1); color: var(--fc-grey-60); font-size: 0.9375rem; }