@charset "UTF-8";
/* ==========================================================================
   CoCo Fitness — site.css
   Healthy Ageing Coach · Noosa

   The seven laws this file encodes:
     1. Gold is spent, not spread — <6% coverage, live element only.
     2. Separation by space, not by line — sections never divide by a rule.
        Hairlines exist only inside components that need structure.
     3. No gradients. One shadow token.
     4. One photograph per screen.
     5. Nothing below 16px. Body at 18px.
     6. Icons from three primitives — circle, stroke, tick.
     7. The script is a signature, not a typeface — twice per page, maximum.

   Contents
     01  Fonts
     02  Tokens
     03  Reset & base
     04  Typography
     05  Layout & rhythm
     06  Buttons
     07  Header & navigation
     08  Hero
     09  Components
     10  Sections
     11  Footer
     12  Sticky call bar
     13  Motion
     14  Utilities
     15  Print
   ========================================================================== */


/* 01  FONTS ================================================================ */

@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dm-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kaushan Script";
  src: url("../fonts/kaushan-script-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}


/* 02  TOKENS =============================================================== */

:root {
  /* Colour — see brand.html CF-04 for the coverage budget */
  --paper:      #FBF7F0;   /* page ground, ~55% */
  --white:      #FFFFFF;   /* floating cards, ~25% */
  --ink-900:    #1E2B3A;   /* headings */
  --ink-600:    #4A5560;   /* body */
  --ink-400:    #616A73;   /* metadata only — never body copy. 4.97:1 on the lightest ground */
  --teal-700:   #1F5B58;   /* deep ground, CTA band, footer */
  --teal-600:   #2E7D78;   /* brand, icon strokes, links */
  --teal-300:   #8FBDB8;   /* on-dark STROKES only — 3.76:1, never text */
  --teal-200:   #AFD0CB;   /* on-dark TEXT — 4.71:1 on teal-700 */
  --teal-100:   #DDEBE8;   /* THE MID-LIGHT GROUND. 1.23:1 vs white — the widest
                              ground separation this palette allows. paper↔white is
                              1.07:1 and separates nothing, so law 2 needs this. */
  --teal-050:   #EEF5F3;   /* faintest wash */
  --gold-500:   #E0AE3C;   /* THE LIVE ELEMENT. <6%. Fills and washes only. */
  --gold-700:   #A5771A;   /* gold as a meaningful stroke on light ground — 4.00:1 */
  --gold-100:   #F6E9CC;   /* pull-quote wash */
  --sage-400:   #8FA98A;   /* rare; echoes the logo figure */
  --hairline:   #E6DFD3;   /* the one rule colour — DECORATIVE dividers only, 1.24:1 */
  --hairline-d: #35706C;   /* the one rule colour, on deep ground */

  /* Control boundaries. A hairline that is the ONLY thing identifying a control
     has to clear 3:1 (WCAG 1.4.11) — --hairline is 1.24:1 and cannot do that job.
     Measured: --edge is 3.16:1 on paper, 3.38:1 on white, 3.05:1 on teal-050.
     --edge-d is 3.76:1 on teal-700, which is exactly what --teal-300 exists for. */
  --edge:       #9A8A6B;
  --edge-d:     #8FBDB8;

  /* Type */
  --sans:   "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:   "DM Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --script: "Kaushan Script", "Snell Roundhand", "Brush Script MT", cursive;

  --fs-h1:    clamp(2.5rem, 1.62rem + 3.5vw, 4rem);
  --fs-h2:    clamp(1.875rem, 1.44rem + 1.75vw, 2.75rem);
  --fs-h3:    clamp(1.25rem, 1.16rem + 0.35vw, 1.4375rem);
  --fs-lead:  clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem);
  --fs-body:  1.125rem;              /* 18px — law 5 */
  --fs-small: 1rem;                  /* 16px floor */
  --fs-mono:  0.75rem;               /* 12px — CF-05's stated mono floor */
  --fs-mono-xs: 0.6875rem;           /* 11px — the two brand lockup lines ONLY.
                                        CF-07 fixes their tracking at 0.16em, and the
                                        header runs at 91% width at its own breakpoint,
                                        so 12px there overflows. Nothing else uses this. */
  --fs-meta:  1.0625rem;             /* 17px — a trust CLAIM is content, not metadata.
                                        The credentials were set at 12px; they decide
                                        whether she rings. */
  --fs-numeral: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);  /* the step display numeral */
  --fs-script: clamp(1.875rem, 1.4rem + 1.9vw, 2.875rem);

  /* Space — 8px scale */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 2.5rem;  --s-6: 3rem;   --s-8: 4rem;    --s-10: 5rem;
  --s-12: 6rem;   --s-16: 8rem;

  /* Rhythm. Two values, not one — a repeated interval is not a rhythm.
     --section-y is the working interval; --section-y-loose is spent only where the
     page genuinely earns air (before the empathy turn, before the closing band).
     Was a flat clamp(4.5rem, …, 8rem) = 256px between every pair of sections,
     which is 33% of the page height and larger than most of the content. */
  --section-y:       clamp(3rem, 1.75rem + 4.25vw, 5.5rem);
  --section-y-loose: clamp(4rem, 2.25rem + 5.5vw, 7rem);
  --wrap: 75rem;        /* 1200px */
  --measure: 66ch;      /* law: prose never wider */

  /* Shape */
  --r-card:  20px;
  --r-photo: 24px;
  --r-pill:  999px;

  /* The shadow tokens — law 3. Three, and no literal box-shadow anywhere else. */
  --shadow: 0 1px 2px rgb(30 43 58 / 0.04), 0 12px 32px rgb(30 43 58 / 0.05);
  --shadow-lift: 0 2px 4px rgb(30 43 58 / 0.06), 0 18px 44px rgb(30 43 58 / 0.09);
  --shadow-bar: 0 -8px 24px rgb(30 43 58 / 0.12);   /* throws upward — the call bar only */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* 03  RESET & BASE ========================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  /* the sticky call bar sits at the bottom on mobile — a focused element must not
     land underneath it */
  scroll-padding-bottom: 5.5rem;
  /* pins the light intent. Without it, Android/Samsung forced-dark inverts the palette
     and the coverage budget stops meaning anything. */
  color-scheme: light;
}
@media (min-width: 66em) { html { scroll-padding-bottom: 2rem; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-600);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

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

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

/* No 300ms double-tap delay on the one thing this site exists to do. */
a, button, summary, label { touch-action: manipulation; }
a, button, summary { -webkit-tap-highlight-color: rgb(46 125 120 / 0.12); }

/* Focus — visible, generous, never removed */
:focus-visible {
  outline: 2px solid var(--teal-600);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--deep :focus-visible,
.site-footer :focus-visible,
.callbar :focus-visible { outline-color: var(--gold-500); }

::selection { background: var(--gold-100); color: var(--ink-900); }

.skip-link {
  position: absolute; left: var(--s-2); top: -100%;
  z-index: 200;
  background: var(--teal-700); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: var(--r-pill);
  text-decoration: none; font-weight: 500;
}
.skip-link:focus { top: var(--s-2); }


/* 04  TYPOGRAPHY =========================================================== */

h1, h2, h3, h4 {
  color: var(--ink-900);
  font-weight: 600;          /* never 700 — weight is not how this brand shows confidence */
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.18; }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }
h4 { font-size: 1.125rem; letter-spacing: -0.005em; }

p { margin: 0 0 var(--s-3); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-600);
  max-width: 34ch;      /* 44 chars — the poster shape. Do not narrow. */
  text-wrap: pretty;
}
.lead--wide { max-width: 46ch; }

a { color: var(--teal-700); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: #164845; text-decoration-color: var(--gold-700); }

strong, b { font-weight: 600; color: var(--ink-900); }

/* The signature. Law 7 — twice per page, maximum. */
.script {
  font-family: var(--script);
  font-size: var(--fs-script);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--teal-600);
  display: block;
  margin-bottom: var(--s-2);
}
/* .script--gold and .script--light are deliberately absent. They were declared,
   unused, and painted the signature in gold — a trap for anyone adding a flourish. */

/* Metadata. DM Mono lives here and nowhere else. */
.meta {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  line-height: 1.6;
}
.meta--teal { color: var(--teal-700); }
.meta--light { color: var(--teal-200); }

/* The single gold rule beneath a headline — one of the few gold moments */
.rule-gold {
  width: 3.5rem; height: 3px;
  background: var(--gold-500);
  border: 0; border-radius: 2px;
  margin: 0 0 var(--s-4);
}
.rule-gold--center { margin-inline: auto; }

/* There is deliberately NO generic `.hairline` divider utility. Law 2 forbids
   separating sections with a rule, and a spare full-width rule class is the first
   thing a density pass reaches for. Hairlines live INSIDE components only — the
   trust strip, the FAQ list, the outcome panel, the step columns, the footer base. */


/* 05  LAYOUT & RHYTHM ====================================================== */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
@media (min-width: 48em) { .wrap { width: min(100% - 4rem, var(--wrap)); } }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
.section--loose { padding-block: var(--section-y-loose); }

/* GROUNDS. Law 2 delegates all section separation to a change of ground, so the
   grounds have to be perceptibly different. paper↔white is 1.07:1 — invisible on a
   dimmed screen and invisible to age-normal contrast loss. Never place those two
   adjacent: if two sections would touch on paper and white, they are one section.
   The usable ladder, lightest to darkest:
     white 1.00 → paper 1.07 → teal-050 1.11 → teal-100 1.23 → teal-700 6.35   */
.section--paper  { background: var(--paper); }
.section--white  { background: var(--white); }
.section--tint   { background: var(--teal-050); }
.section--tint-2 { background: var(--teal-100); }
.section--deep   { background: var(--teal-700); color: #E4EFED; }

.section--deep h1, .section--deep h2, .section--deep h3 { color: #fff; }
.section--deep a { color: #E4EFED; text-decoration-color: var(--gold-500); }
.section--deep .lead { color: #CFE2DF; }

/* ink-400 on teal-100 measures 4.49:1 — one hundredth under AA. Metadata on the
   mid-light ground uses ink-600 or teal-700, never ink-400. */
.section--tint-2 .meta { color: var(--teal-700); }
.section--tint-2 .photo-caption,
.section--tint-2 .cta-note { color: var(--ink-600); }

.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }
.section-head > :last-child { margin-bottom: 0; }

/* The section head, laid across the band instead of stacked in the left third.
   A 46rem head flush-left inside a 75rem wrap leaves an L-shaped void at the
   top-right of every section — measured at 39% of the band on five of ten sections.
   Here the h2 holds one column and the lead holds the next, so the head fills the
   width it was already occupying vertically. Used on three sections per page, not
   all of them: the variation is the point. */
.section-head--beside { max-width: none; }
@media (min-width: 60em) {
  .section-head--beside {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(2rem, 0.5rem + 4vw, 4.5rem);
    align-items: end;
  }
  .section-head--beside h2 { margin-bottom: 0; max-width: 22ch; }
  .section-head--beside .lead { max-width: 42ch; }
}

/* Grids */
.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--6 { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); }

@media (min-width: 40em) {
  /* 2-up from 640px. The 768–959px band was every grid on the site collapsed to a
     single column while the viewport had room for two — the worst-performing width. */
  .grid--3 { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 60em) {
  .grid--2 { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  /* six-across at 1200px gave each item a 180px column holding a 56px icon —
     69% of the icon's own line empty, and titles forced onto three ragged lines */
  .grid--6 { grid-template-columns: repeat(3, 1fr); gap: var(--s-5) var(--s-4); }
}

/* Split: text beside one photograph (law 4).
   Default is top-aligned. Centring a 361px column against a 672px one leaves up to
   155px of void at the top of the short column — measured on five splits — which is
   most of what "the page looks empty" actually is. Use --center only where both
   columns are genuinely close in height. */
.split { display: grid; gap: var(--s-6); align-items: start; }
.split--center { align-items: center; }
@media (min-width: 60em) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 1rem + 4.5vw, 4.5rem); }
  .split--wide-text { grid-template-columns: 1.15fr 1fr; }
  .split--wide-photo { grid-template-columns: 1fr 1.2fr; }
  .split--flip > :first-child { order: 2; }
}

/* Asymmetric on purpose: a heading groups with the content BELOW it. A uniform 24px
   put every h2 the same distance from the paragraph above as from its own paragraph
   below, which made the legal pages read as one undifferentiated column. */
.stack > * + * { margin-top: var(--s-3); }
.stack > * + h2 { margin-top: var(--s-5); }
.stack > h2 + * { margin-top: var(--s-2); }
.stack > * + h3 { margin-top: var(--s-4); }
.stack > h3 + * { margin-top: var(--s-1); }
.stack-lg > * + * { margin-top: var(--s-6); }


/* 06  BUTTONS ============================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;               /* ≥48px tap target, comfortably */
  padding: 0.875rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

/* Primary — deep teal. Repeats often, so it is never the gold. */
.btn--primary {
  background: var(--teal-700); color: #fff;
}
.btn--primary:hover { background: #174C49; color: #fff; box-shadow: var(--shadow-lift); }

/* Ghost — the border IS the control, so it uses --edge (3:1+), not --hairline (1.24:1) */
.btn--ghost {
  background: transparent; color: var(--teal-700);
  border-color: var(--edge);
}
.btn--ghost:hover { border-color: var(--teal-600); color: var(--teal-700); background: var(--white); }

/* Gold — THE live element. One per page, on the closing band. Law 1. */
.btn--gold {
  background: var(--gold-500); color: var(--ink-900);
  font-weight: 600;
}
.btn--gold:hover { background: #EFC157; color: var(--ink-900); box-shadow: var(--shadow-lift); }

/* On deep ground — same reasoning: the label is #fff, identical to the headings
   around it, so with the border invisible the button was indistinguishable from text */
.btn--on-deep {
  background: transparent; color: #fff; border-color: var(--edge-d);
}
.btn--on-deep:hover { border-color: #fff; background: rgb(255 255 255 / 0.08); color: #fff; }

.btn--sm { min-height: 3rem; padding: 0.5rem 1.125rem; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

.btn-row {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  align-items: center;
}

/* The reassurance line that follows every CTA */
.cta-note {
  font-size: var(--fs-small);
  color: var(--ink-400);
  margin-top: var(--s-2);
  max-width: 38ch;
}
.section--deep .cta-note { color: #BBD6D2; }


/* 07  HEADER & NAVIGATION ================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgb(251 247 240 / 0.86);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--hairline); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  min-height: 4.5rem;
  padding-block: 0.625rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand img { width: 46px; height: 46px; } /* no radius — the mark supplies its own container (CF-07) */
.brand__name {
  display: none;
  line-height: 1.1;
}
.brand__name b {
  display: block; color: var(--ink-900); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: -0.01em;
}
.brand__name span {
  display: block;
  font-family: var(--mono); font-size: var(--fs-mono-xs); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-700);
  margin-top: 2px;
}
@media (min-width: 26em) { .brand__name { display: block; } }

.nav { display: none; }
.nav ul {
  display: flex; align-items: center; gap: clamp(1rem, 0.2rem + 1.4vw, 1.75rem);
  list-style: none; margin: 0; padding: 0;
}
.nav a {
  position: relative;
  color: var(--ink-600); text-decoration: none;
  font-size: 1rem; font-weight: 500;
  padding-block: 0.5rem;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink-900); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--gold-700);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink-900); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { display: none; }

/* 66em, not 64em. At exactly 1024px the brand lockup, six nowrap nav links and the
   phone CTA needed ~876px of 960px — 91% — with no intermediate step to relieve it.
   A font fallback or a raised default text size wrapped the header onto two lines and
   broke scroll-padding-top with it. 66em gives the row 32px of slack. */
@media (min-width: 66em) {
  .nav { display: block; }
  .header-cta { display: inline-flex; }
}

/* Mobile menu */
.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.5rem 0.875rem 0.5rem 1rem;
  background: transparent; border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  color: var(--ink-900); font-weight: 500; font-size: 1rem;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--teal-600); }
.nav-toggle__bars { display: block; width: 18px; height: 12px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars i {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: var(--ink-900); border-radius: 2px;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars i { top: 5.25px; }
.nav-toggle__bars::after { bottom: 0; }
[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5.25px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bars i { opacity: 0; }
[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5.25px) rotate(-45deg); }

@media (min-width: 66em) { .nav-toggle { display: none; } }

.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--paper);
  padding: 6rem var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;   /* the panel scrolls; the page behind it does not */
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav ul { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.mobile-nav li + li { border-top: 1px solid var(--hairline); }
.mobile-nav a {
  display: block; padding: 1.125rem 0;
  color: var(--ink-900); text-decoration: none;
  font-size: 1.375rem; font-weight: 500; letter-spacing: -0.01em;
}
.mobile-nav a[aria-current="page"] { color: var(--teal-600); }
.mobile-nav .btn { width: 100%; }
@media (min-width: 66em) { .mobile-nav { display: none; } }


/* 08  HERO ================================================================= */

.hero { padding-block: clamp(1.75rem, 1rem + 3vw, 3.25rem) clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

/* start, not center. Centring a 567px text stack in a 688px grid row put 60px of
   nothing above the first word; with the old top padding the first ink landed 230px
   down a 820px viewport — 28% of the opening screen empty before anything was said. */
.hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: start; }
@media (min-width: 62em) {
  .hero__grid { grid-template-columns: 1fr 1.05fr; align-items: center; }
}

.hero h1 { margin-bottom: var(--s-3); }
.hero .lead { margin-bottom: var(--s-2); }

/* The credential, compressed into the fold rather than deferred to the About page.
   17px, not 12px mono — it is the reason to trust the sentence above it. */
.hero__cred {
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--ink-600);
  max-width: 42ch;
  margin-bottom: var(--s-4);
}

.hero__photo {
  position: relative;
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--teal-100);
  /* 4:3 while stacked, matching the landscape crop the <picture> serves below 62em.
     A 4:5 box was 1,119px tall at 959px wide — one photograph taller than the
     viewport, and the hero section 2,023px. */
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow);
}
@media (min-width: 62em) { .hero__photo { aspect-ratio: 5 / 6; } }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* TRUST STRIP — a component, so the hairlines inside it are law-2 permitted.
   These are the facts that decide whether she rings: the qualification, the current
   first aid, the venues she already coaches at. They were set at 12px, the smallest
   type on the page. The claim is now content at 17px; the mono is demoted to the
   label above it, which is what mono is for. */
.trust {
  margin-top: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-3);
}
.trust ul {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0; list-style: none; margin: 0; padding: 0;
}
@media (min-width: 44em) { .trust ul { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68em) { .trust ul { grid-template-columns: repeat(5, 1fr); } }

.trust li {
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--ink-900);
  font-weight: 500;
  letter-spacing: -0.005em;
}
/* the first row of each layout has the component's own top border above it already */
.trust li:nth-child(-n+2) { border-top: 0; }
@media (min-width: 44em) { .trust li:nth-child(-n+3) { border-top: 0; } }
@media (min-width: 68em) {
  .trust li:nth-child(n) { border-top: 0; }
  .trust li + li { border-left: 1px solid var(--hairline); padding-left: var(--s-3); }
}
.trust li b {
  display: block;
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 0.3rem;
}


/* 09  COMPONENTS =========================================================== */

/* --- Card -------------------------------------------------------------- */
.card {
  background: var(--white);
  border-radius: var(--r-card);
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  box-shadow: var(--shadow);
  height: 100%;
}
.card--flat { box-shadow: none; border: 1px solid var(--hairline); }
.card--tint { background: var(--teal-050); box-shadow: none; }
.card h3 { margin-bottom: 0.75rem; }
.card p { font-size: var(--fs-meta); }
.section--tint-2 .card { background: var(--white); }

/* --- Icon (law 6: circle, stroke, tick — 24 grid, 1.5 hairline) --------- */
.icon { width: 28px; height: 28px; flex: none; }
.icon-stroke { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-node { fill: var(--gold-500); stroke: none; }

.icon-frame {
  width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--teal-050);
  color: var(--teal-600);
  margin-bottom: var(--s-2);
}
.section--white .icon-frame { background: var(--teal-050); }
.section--tint .icon-frame { background: var(--white); }
.section--tint-2 .icon-frame { background: var(--white); }
.section--deep .icon-frame { background: rgb(255 255 255 / 0.08); color: var(--teal-200); }

/* --- Outcome (the flyer's six) -----------------------------------------
   Six unbounded icons over three-line ragged headings, in 180px columns, was the
   flattest object on the site. Now one panel with hairline-separated cells — a
   hairline inside a component, the same grammar as the trust strip and the FAQ —
   and the icon sits beside the words instead of floating above them. */
.outcome { text-align: left; }
.outcome h3 {
  font-size: var(--fs-meta); font-weight: 600; line-height: 1.35;
  letter-spacing: -0.005em; margin: 0;
  color: var(--ink-900);
}
.outcome p {
  font-size: var(--fs-small); margin: 0.4rem 0 0; color: var(--ink-600);
  max-width: 32ch;
}

.outcomes {
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.section--white .outcomes { background: var(--teal-050); box-shadow: none; }
.outcomes .outcome {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: 1px solid var(--hairline);
}
.outcomes .outcome:first-child { border-top: 0; }
.outcomes .icon-frame { margin-bottom: 0; width: 3rem; height: 3rem; flex: none; }
/* Law 6: grow the FRAME, keep the drawing at 28px. A 24-viewBox SVG at 28px renders
   its stroke at 1.75px, which is what the brand board's own icon specimens do; at
   34px it would be ~2.1px and the hairline rule breaks. */
.outcomes .icon { width: 28px; height: 28px; }
.section--white .outcomes .icon-frame { background: var(--white); }

@media (min-width: 44em) {
  .outcomes { grid-template-columns: repeat(2, 1fr); }
  .outcomes .outcome:nth-child(2) { border-top: 0; }
  .outcomes .outcome:nth-child(even) { border-left: 1px solid var(--hairline); }
}
@media (min-width: 60em) {
  .outcomes { grid-template-columns: repeat(3, 1fr); }
  .outcomes .outcome:nth-child(even) { border-left: 0; }
  .outcomes .outcome:nth-child(-n+3) { border-top: 0; }
  .outcomes .outcome:not(:nth-child(3n+1)) { border-left: 1px solid var(--hairline); }
}

/* --- Tick list --------------------------------------------------------- */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 2.125rem;
  margin-bottom: var(--s-2);
  font-size: var(--fs-meta);
}
.ticks li:last-child { margin-bottom: 0; }
/* Two columns ONLY at full band width. Tried and rejected inside a .split column:
   552px halves to ~250px, and these items need ~300px, so every second one wrapped —
   two columns of ragged two-line items is worse than one column of clean ones. */
@media (min-width: 60em) {
  .ticks--2col { columns: 2; column-gap: var(--s-6); }
  .ticks--2col li { break-inside: avoid; }
}
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: 0.44em;
  width: 15px; height: 9px;
  border-left: 2px solid var(--gold-700);      /* gold, spent on the tick */
  border-bottom: 2px solid var(--gold-700);
  border-radius: 1px;
  transform: rotate(-45deg);
}
.section--deep .ticks li::before { border-color: var(--gold-500); }

/* --- Numbered steps -----------------------------------------------------
   The page's second display moment, and the only one in the middle third.
   Below the hero there were nine h2s at one size and nothing else — no scale
   variance in ~5,000px of scroll. The numeral was 12px: the smallest thing in a
   component whose whole subject is sequence. It is now the largest, in General Sans
   at up to 52px, in teal — 4.40:1 on the tint ground, and it is aria-hidden anyway
   because the <ol> already conveys the order. Not gold: three numerals at this size
   would spend the whole 6% budget in one section. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: step; }
@media (min-width: 60em) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.step { counter-increment: step; }
.step__num {
  font-family: var(--sans);
  font-size: var(--fs-numeral); font-weight: 600;
  letter-spacing: -0.03em; line-height: 0.9;
  color: var(--teal-600);
  display: block; margin-bottom: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step h3 { margin-bottom: 0.625rem; }
.step p { font-size: var(--fs-meta); margin-bottom: 0; }

/* Hairline columns — inside the component, so law 2 holds. Gives the three steps a
   visible structure that whitespace alone was not supplying. */
@media (min-width: 60em) {
  .steps--ruled { gap: 0; }
  .steps--ruled .step { padding-inline: var(--s-4); }
  .steps--ruled .step:first-child { padding-left: 0; }
  .steps--ruled .step:last-child { padding-right: 0; }
  .steps--ruled .step + .step { border-left: 1px solid var(--hairline); }
}

/* Stays one column at every width — inside a narrow panel, where the big numeral
   sits beside the words rather than above them. */
.steps--stacked { gap: var(--s-3); }
@media (min-width: 60em) { .steps--stacked { grid-template-columns: 1fr; } }
.steps--stacked .step {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: var(--s-2); align-items: baseline;
}
.steps--stacked .step__num {
  grid-row: 1 / span 2;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  margin-bottom: 0;
}
.steps--stacked .step h3 { font-size: var(--fs-meta); margin-bottom: 0.25rem; }
.steps--stacked .step p { font-size: var(--fs-small); }

/* --- Fact pairs (contact) ------------------------------------------------ */
.facts { display: grid; gap: var(--s-4); }
@media (min-width: 40em) { .facts { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
.facts .meta { margin-bottom: 0.4rem; }
.fact { font-size: var(--fs-meta); margin-bottom: 0; }

/* h2 that needs to sit at h3 scale — a panel heading inside a page that already
   owns the h2 slot. Semantics stay correct; only the size changes. */
.h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.01em; }

/* --- Photograph -------------------------------------------------------- */
.photo {
  border-radius: var(--r-photo);
  overflow: hidden;
  background: var(--teal-100);
  box-shadow: var(--shadow);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* Portrait crops only once the layout is side-by-side. Stacked, a 4:5 box at a
   704px column is 880px tall — one photograph taller than the viewport — and that
   was the single tallest thing on the site in the 768–959px band. */
.photo--4-5, .photo--3-4 { aspect-ratio: 4 / 3; }
@media (min-width: 60em) {
  .photo--4-5 { aspect-ratio: 4 / 5; }
  .photo--3-4 { aspect-ratio: 3 / 4; }
}
.photo--4-3 { aspect-ratio: 4 / 3; }
.photo--16-9 { aspect-ratio: 16 / 9; }
.photo--square { aspect-ratio: 1; }

.photo-caption {
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-400); margin-top: 0.75rem;
}

/* The photography landed on 5 August 2026, so no page uses this any more. The class
   stays because the shot list is not finished — PHOTO-BRIEF shot D, Corinna coaching
   a client in a living room, is still outstanding and is the highest-value image on
   the site. Solid teal-100, never a dashed outline: dashed read as a broken asset
   rather than a reserved crop, and put pseudo-rules in space, which law 2 forbids. */
.photo--placeholder {
  display: grid; place-items: center;
  background: var(--teal-100);
  padding: var(--s-4);
  text-align: center;
}
.photo--placeholder span {
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal-700); line-height: 1.9;
}

/* <picture> must not become a layout box between .photo and its <img>, or the img's
   height:100% resolves against an auto-height parent and the crop letterboxes. */
.photo picture,
.hero__photo picture { display: contents; }

/* --- Quote -------------------------------------------------------------
   Note the gold discipline here. The gold-100 wash is one of CF-04's six permitted
   gold moments, but a 46rem panel of it filled a fifth of a 1440x900 viewport, which
   is functionally "a gold section" — law 1's one explicit prohibition. So the wash
   is width-capped, and the editorial band below uses a permitted GROUND instead. */
.quote {
  background: var(--gold-100);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  margin: 0;
  max-width: 34rem;   /* the wash is rationed by area, not just by count */
}
.quote p {
  font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-900);
  letter-spacing: -0.01em;
  max-width: 34ch;
  margin-bottom: var(--s-2);
}
.quote blockquote { margin: 0; }
.quote footer, .quote .attrib {
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-400);
}
.quote--plain { background: var(--white); box-shadow: var(--shadow); max-width: none; }
.quote--tint { background: var(--teal-050); max-width: none; }
.quote--deep { background: rgb(255 255 255 / 0.06); max-width: none; }
.quote--deep p { color: #fff; }
.quote--deep .attrib { color: #CFE2DF; }

/* Was var(--script). That put a Kaushan glyph in every quote, so index.html and
   stories.html each carried FOUR script instances against law 7's limit of two —
   and spent the signature face on punctuation. General Sans, in gold-700 so the mark
   is a meaningful gold stroke (4.00:1 on white) rather than gold text on cream. */
.quote-mark {
  font-family: var(--sans); font-weight: 600;
  font-size: 3rem; line-height: 0.55;
  color: var(--gold-700); display: block; margin-bottom: 0.35rem;
}
.quote--deep .quote-mark { color: var(--gold-500); }
.quote--tint .quote-mark, .quote--plain .quote-mark { color: var(--gold-700); }

/* --- Editorial pull-quote band -----------------------------------------
   A genuine scale jump and a genuine ground change in the anchorless middle third,
   built from a permitted ground rather than more gold. One per page, maximum. */
.quote-band { margin: 0; text-align: left; }
.quote-band blockquote { margin: 0; }
.quote-band p {
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.375rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-weight: 500;
  max-width: 26ch;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
.quote-band .attrib {
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-700);
  display: block;
}
.quote-band .quote-mark { font-size: 3.5rem; }
.section--deep .quote-band p { color: #fff; }
.section--deep .quote-band .attrib { color: #CFE2DF; }

/* --- FAQ (native disclosure) -------------------------------------------- */
.faq { max-width: 48rem; }
/* Two columns from 60em. A single 48rem column left 432px of the band empty for the
   whole 1,110px height of the FAQ on faq.html. .faq__body caps at 60ch = 594px,
   which still fits a 568px column — so two columns, and not three. */
/* Multi-column flow, not a 2-col grid. As a grid, one open answer made its whole row
   tall and left a matching void beside it; as columns the items flow continuously and
   an open answer only lengthens its own column.
   The rule therefore sits ON TOP of every item with the container closing the bottom,
   so both columns are correctly ruled at their first item — which a
   :first-of-type top rule cannot do once the items are flowing. */
.faq--2col { max-width: none; }
@media (min-width: 60em) {
  .faq--2col { columns: 2; column-gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
  .faq--2col > details { break-inside: avoid; }
}
.faq { border-bottom: 1px solid var(--hairline); }
.faq details { border-top: 1px solid var(--hairline); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  padding: 1.125rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink-900);
  font-size: 1.125rem; font-weight: 500; line-height: 1.45;
  letter-spacing: -0.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal-700); }
.faq summary::after {
  content: ""; flex: none;
  width: 13px; height: 13px; margin-top: 0.45em;
  border-right: 2px solid var(--teal-600);
  border-bottom: 2px solid var(--teal-600);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details[open] summary { color: var(--teal-700); }
.faq .faq__body { padding: 0 0 1.25rem; }
.faq .faq__body p { font-size: var(--fs-meta); max-width: 60ch; }

/* --- Contact rows -------------------------------------------------------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.contact-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 1.125rem 1.375rem;
  background: var(--white); border-radius: var(--r-card);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.contact-row .icon-frame { width: 2.75rem; height: 2.75rem; margin: 0; }
.contact-row .icon { width: 22px; height: 22px; }
.contact-row__text { min-width: 0; }
.contact-row__label {
  display: block;
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-400);
}
.contact-row__value {
  display: block; color: var(--ink-900);
  font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.01em;
  line-height: 1.35;
}
.section--deep .contact-row { background: rgb(255 255 255 / 0.07); box-shadow: none; }
.section--deep .contact-row:hover { background: rgb(255 255 255 / 0.12); }
.section--deep .contact-row__value { color: #fff; }
.section--deep .contact-row__label { color: var(--teal-200); }

/* --- Pill tags ----------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.tags li {
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--edge); border-radius: var(--r-pill);
  color: var(--ink-600);
}
.section--deep .tags li { border-color: var(--edge-d); color: #CFE2DF; }

/* --- Closing CTA band ----------------------------------------------------
   Centred, it occupied 45% of the band and left 660px empty across both sides in a
   717px-tall section. Two columns: the words on the left, the action on the right —
   which is also the reading order the page has used the whole way down. */
.closing { display: grid; gap: var(--s-4); align-items: center; }
.closing .script { color: var(--teal-200); }   /* the gold on this band belongs to the button */
.closing h2 { max-width: 24ch; margin-bottom: var(--s-3); }
.closing .lead { max-width: 40ch; margin-bottom: 0; }
.closing .cta-note { max-width: 34ch; }
@media (min-width: 56em) {
  .closing { grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
  .closing__action { justify-self: start; }
}

/* --- Breadcrumb ---------------------------------------------------------- */
.crumb { padding-top: var(--s-3); }
.crumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.crumb li { display: flex; align-items: center; gap: 0.5rem; }
/* the "/" is a rendered glyph, so it is text: teal-300 measured 1.94:1 here */
.crumb li + li::before { content: "/"; color: var(--ink-400); }
.crumb a { color: var(--ink-400); text-decoration: none; padding-block: 0.35rem; }
.crumb a:hover { color: var(--teal-700); }
.crumb [aria-current] { color: var(--ink-600); }

/* --- Page hero (interior pages) ------------------------------------------ */
.page-hero { padding-block: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) clamp(2rem, 1.25rem + 2.5vw, 3rem); }
.page-hero h1 { max-width: 18ch; }
.page-hero .lead { max-width: 44ch; }
/* The interior page heads sat in the left third of a 1200px band, leaving an
   L-shaped void to their right on eight pages.
   Placed by explicit grid area rather than by wrapper divs, because every interior
   hero has the same shape — eyebrow, h1, gold rule, then lead / buttons / note — and
   wrapping them would collapse .m-seq's per-line load stagger down to two blocks.
   row-gap is 0 on purpose: the elements' own margins already do the spacing, and a
   gap would open a phantom row on the two pages that have no eyebrow. */
@media (min-width: 60em) {
  .page-hero .m-seq {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    column-gap: clamp(2rem, 0.5rem + 4vw, 4.5rem);
    row-gap: 0;
    align-items: end;
  }
  .page-hero .m-seq > .meta,
  .page-hero .m-seq > .script   { grid-area: 1 / 1; }
  .page-hero .m-seq > h1        { grid-area: 2 / 1; }
  .page-hero .m-seq > .rule-gold{ grid-area: 3 / 1; align-self: start; }
  .page-hero .m-seq > .lead     { grid-area: 2 / 2; margin-bottom: 0; max-width: 40ch; }
  .page-hero .m-seq > .btn-row  { grid-area: 3 / 2; align-self: start; margin-top: var(--s-3); }
  .page-hero .m-seq > .cta-note { grid-area: 4 / 2; }
}


/* 10  SECTIONS ============================================================= */

/* Empathy — the emotional turn. 48ch at 22px/1.6 is dead centre of the readable
   band; the fix for the 585px of dead column beside it is to fill the column, never
   to widen the measure. */
.empathy { max-width: 44rem; }
.empathy p { font-size: var(--fs-lead); line-height: 1.6; max-width: 48ch; }

/* Coaching panel */
.panel {
  background: var(--white);
  border-radius: var(--r-photo);
  padding: clamp(1.75rem, 1.2rem + 3vw, 3.5rem);
  box-shadow: var(--shadow);
}
.panel--tint { background: var(--teal-050); box-shadow: none; }
.panel--deep { background: var(--teal-700); color: #E4EFED; box-shadow: none; }
.panel--deep h2, .panel--deep h3 { color: #fff; }


/* 11  FOOTER =============================================================== */

.site-footer {
  background: var(--teal-700);
  color: #C6DCD9;
  padding-block: var(--s-8) var(--s-5);
  font-size: var(--fs-meta);
}
.site-footer a { color: #E4EFED; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gold-500); }

/* Two columns from 26em. Fully stacked, the footer was 1,170px on a phone — the
   single most gratuitous block on the mobile page, and it repeats on all ten pages.
   The two link columns sit side by side; the brand block spans them. */
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-4); }
.footer-grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 48em) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s-6); }
  .footer-grid > :first-child { grid-column: auto; }
}

.site-footer h2 {
  font-size: var(--fs-mono); color: var(--teal-200);
  font-family: var(--mono); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: 0.625rem; }

.footer-brand { display: flex; align-items: center; gap: 0.875rem; margin-bottom: var(--s-3); }
.footer-brand img { width: 56px; height: 56px; }
.footer-brand b { display: block; color: #fff; font-size: 1.125rem; font-weight: 600; }
.footer-brand span {
  display: block; font-family: var(--mono); font-size: var(--fs-mono-xs); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-200); margin-top: 3px;
}

.footer-bottom {
  margin-top: var(--s-6); padding-top: var(--s-3);
  border-top: 1px solid var(--hairline-d);
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  justify-content: space-between; align-items: center;
}
.footer-bottom, .footer-bottom a {
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase; color: #AFD0CB;
}
/* these were ~19px tall, the smallest targets on a site built for women over 40 */
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.footer-bottom nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }

.social { display: flex; gap: 0.75rem; margin-top: var(--s-3); }
.social a {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--edge-d); color: #E4EFED;
}
.social a:hover { background: rgb(255 255 255 / 0.08); border-color: #fff; }


/* 12  STICKY CALL BAR ====================================================== */

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--teal-700);
  padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom));
  display: flex; gap: 0.625rem;
  transform: translateY(110%);
  transition: transform 0.3s var(--ease);
  box-shadow: var(--shadow-bar);
}
.callbar.is-visible { transform: none; }
.callbar .btn { flex: 1; min-height: 3rem; font-size: var(--fs-meta); }
.callbar .btn--gold { flex: 1.6; }

/* Law 1 is audited per VIEWPORT, not per page: "count the gold buttons visible in one
   viewport (one)". The bar appeared after the hero and never hid again, so at the
   closing band a phone showed the gold 0497 button and the gold Call Corinna button
   ~200px apart — two gold buttons and 6.5% gold on that one screenful. The bar now
   stands down while the closing band is on screen, where a bigger CTA already is. */
.callbar[hidden] { display: none; }

@media (min-width: 66em) { .callbar { display: none; } }

/* The bar is fixed, so the footer reserves room for it rather than sitting under it.
   The reserve has to include the safe-area inset the bar itself adds, or on a
   home-indicator iPhone the bar covers the Disclaimer and Privacy links. */
@media (max-width: 65.99em) {
  .site-footer { padding-bottom: calc(var(--s-5) + 4.75rem + env(safe-area-inset-bottom)); }
}


/* 13  MOTION =============================================================== */

.reveal {
  opacity: 0;
  transform: translateY(14px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal:nth-child(2).is-in { transition-delay: 0.06s; }
.reveal:nth-child(3).is-in { transition-delay: 0.12s; }
.reveal:nth-child(4).is-in { transition-delay: 0.18s; }
.reveal:nth-child(5).is-in { transition-delay: 0.24s; }
.reveal:nth-child(6).is-in { transition-delay: 0.3s; }

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


/* 14  UTILITIES ============================================================ */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.measure { max-width: var(--measure); }
.nowrap { white-space: nowrap; }


/* 15  PRINT ================================================================ */

@media print {
  .site-header, .callbar, .mobile-nav, .nav-toggle, .reveal { position: static; }
  .site-header, .callbar, .mobile-nav, .nav-toggle { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .section, .hero { padding-block: 1.5rem; }
  .section--deep, .site-footer { background: #fff !important; color: #000 !important; }
  .section--deep h2, .site-footer a, .site-footer b { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .photo, .card { box-shadow: none; border: 1px solid #ccc; }
}