/* ============================================================
   Work Worth Doing — components

   Built from components/**.jsx in the Work Worth Doing design
   system in Claude Design, which is the source of truth for
   styling. Structure and copy come from the page designs
   (*.dc.html) in the Website V1 project there. Every value here resolves through a
   token in tokens.css; there is no raw hex in this file.

   Rules the system enforces, worth keeping in mind when editing:
     · Pairings stay intact — a ground always takes its listed ink.
     · Flare on burgundy and violet on aubergine are headline-only.
       Body copy on those grounds switches to cream.
     · One theme leads per page.
     · Everything interactive is a pill.
   ============================================================ */

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--text-body);
  font-family:var(--font-text);
  font-weight:var(--weight-text-light);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

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

/* Icons — Material Symbols Rounded, Thin (100), unfilled. Written as the
   icon's name inside .icon, or as a ::after with the same settings. */
.icon,.faq summary::after,.select::after{
  font-family:"Material Symbols Rounded";
  font-weight:100;
  font-style:normal;
  font-size:24px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  white-space:nowrap;
  direction:ltr;
  font-feature-settings:"liga";
  font-variation-settings:"FILL" 0,"wght" 100,"GRAD" 0,"opsz" 24;
  -webkit-font-smoothing:antialiased;
}
.icon{display:inline-block;vertical-align:middle;user-select:none}
a{color:var(--link)}
a:hover{color:var(--link-hover)}

/* ── The page shell ──────────────────────────────────────────
   Every section runs the full width of the screen and sits flush
   against the next, square-cornered. What it holds is kept to one
   centred column no wider than --content-max.

   --content-max grows with the screen, the way apollo.io's container
   does. Up to a 13" laptop (1470px) it is 1120px; from there it widens
   steadily, reaching 1728px — about two-thirds of the screen — on a
   2560px monitor, and holds there on anything wider.

   --bleed is the side padding that does this: the gutter on a
   narrow screen, and half the leftover width on a wide one. It is
   written with 100% on purpose — it resolves against whichever
   full-width section uses it. */

:root{
  --content-max:clamp(1120px, calc(55.78vw + 300px), 1728px);
  --gutter:40px;
  --bleed:max(var(--gutter), calc((100% - var(--content-max)) / 2));
  /* Space above and below the content of every section. --strip-y is
     for the slim bands (logos, badges). */
  --section-y:80px;
  --strip-y:56px;
  /* Annotation — form labels and fine print. The design system sets
     10.5px; the site uses 12px so it stays comfortably readable. */
  --size-annotation:12px;
  /* Captions, button labels and the nav links share one setting: 12px
     capitals, tracked wider than the design system's 0.06em. */
  --ls-caption:0.12em;
}
@media (max-width:40rem){ :root{--gutter:22px;--section-y:56px;--strip-y:40px} }

.page{display:flex;flex-direction:column}

.block{
  position:relative;
  background:var(--surface-page);
  padding:var(--section-y) var(--bleed);
}
.block--strip{padding-block:var(--strip-y)}

/* Two cream sections in a row would read as one, so a hairline marks
   the join — inset to the content column, not run edge to edge. */
.block:not([class*="block--"]) + .block:not([class*="block--"]):not(.logostrip)::before{
  content:"";
  position:absolute;
  top:0;left:var(--bleed);right:var(--bleed);
  height:1px;
  background:var(--hairline);
}
.block--primary + .block--primary::before{
  content:"";
  position:absolute;
  top:0;left:var(--bleed);right:var(--bleed);
  height:1px;
  background:var(--rule-on-dark);
}
/* Two rich sections in different themes already read as separate. */
.block--primary + .block--primary[data-theme]::before{content:none}

.block--panel{background:var(--surface-panel)}
.block--white{background:var(--white)}
.block--tertiary{background:var(--theme-tertiary-bg)}
.block--primary{background:var(--theme-primary-bg)}
.block--secondary{background:var(--theme-secondary-bg)}
.block--flush{padding:0;overflow:hidden}
.block--band{padding:var(--pad-band-y) var(--pad-band-x)}

/* Colour-scoped text inside coloured blocks */
.block--tertiary{color:var(--theme-tertiary-ink)}
.block--tertiary .body,.block--tertiary p{color:var(--ink)}
.block--primary{color:var(--text-body-inverse)}
.block--secondary{color:var(--theme-secondary-ink)}

/* ── Type ────────────────────────────────────────────────────
   Codec Pro for display, Hanken Grotesk for anything read at
   length. Sentence case for h2–h4; capitals only for h1, h5,
   captions, eyebrows, nav, tags and buttons. */

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--text-heading);
  margin:0;
  text-wrap:pretty;
}

h1{
  font-size:clamp(34px,5vw,var(--size-h1));
  line-height:var(--lh-h1);
  letter-spacing:var(--ls-h1);
  font-weight:var(--weight-display-regular);
  text-transform:uppercase;
}
/* A page whose title is a sentence rather than a brand-caps statement —
   the apply form. Still the h1 the document needs, held at h2 scale. */
h1.h1--sentence{
  font-size:clamp(30px,3.6vw,var(--size-h2));
  line-height:var(--lh-h2);
  letter-spacing:0;
  text-transform:none;
  font-weight:var(--weight-display-regular);
}
h2{
  font-size:clamp(30px,3.2vw,var(--size-h2));
  line-height:var(--lh-h2);
  font-weight:var(--weight-display-regular);
}
h3{
  font-size:clamp(28px,3.6vw,var(--size-h3));
  line-height:var(--lh-h3);
  font-weight:var(--weight-display-medium);
}
h4{
  font-size:var(--size-h4);
  line-height:var(--lh-h4);
  letter-spacing:var(--ls-h4);
  font-weight:var(--weight-display-medium);
}
h5{
  font-size:var(--size-h5);
  line-height:var(--lh-h5);
  letter-spacing:var(--ls-h5);
  font-weight:var(--weight-display-regular);
  text-transform:uppercase;
}

/* The Fat device — exactly one word per line, the word carrying
   the meaning. Mark it with <b>. */
h1 b,h2 b,h3 b,h4 b,h5 b,.caption b,.eyebrow b{
  font-weight:var(--weight-display-fat);
}

p{margin:0}
.stack{display:flex;flex-direction:column;gap:var(--space-5)}
.stack--tight{gap:var(--space-4)}
.stack--loose{gap:var(--space-6)}

/* Body copy. 16px / 1.75 / weight 300, measured at 68ch —
   the paragraph spec every .dc.html page repeats verbatim. */
.body{
  font-family:var(--font-text);
  font-weight:var(--weight-text-light);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  max-width:var(--measure);
  color:var(--ink);
  text-wrap:pretty;
}
.body--sm{font-size:var(--size-body-sm);line-height:var(--lh-body-sm)}
.body--card{font-size:var(--size-body);line-height:var(--lh-body);max-width:62ch}
.body--lead{font-weight:var(--weight-text-bold)}
.body--note{font-size:var(--size-body-sm);line-height:var(--lh-body-sm);font-style:italic}
.body em{font-style:italic}
.body strong{font-weight:var(--weight-text-bold)}

/* On a rich ground body copy switches to cream — rule two. */
.block--primary .body,.block--primary p{color:var(--text-body-inverse)}
.block--secondary .body,.block--secondary p{color:var(--theme-secondary-ink)}

.subheading{
  font-family:var(--font-text);
  font-weight:var(--weight-text-bold);
  font-size:var(--size-subheading);
  line-height:var(--lh-subheading);
  color:var(--text-heading);
}

/* Caption — 12px capitals at 0.06em, per Caption.jsx, in Codec Pro
   Regular. */
.caption,.eyebrow{
  display:block;
  font-family:var(--font-display);
  font-weight:var(--weight-display-regular);
  font-size:var(--size-caption);
  line-height:var(--lh-caption);
  letter-spacing:var(--ls-caption);
  text-transform:uppercase;
  color:var(--text-heading);
}
.caption--theme{color:var(--theme-primary-bg)}
.block--primary .caption,.block--primary .eyebrow{color:var(--cream)}
.block--secondary .caption,.block--secondary .eyebrow{color:var(--theme-secondary-heading)}
.block--tertiary .caption,.block--tertiary .eyebrow{color:var(--theme-tertiary-ink)}

.annotation{
  font-family:var(--font-text);
  font-weight:var(--weight-text-light);
  font-size:var(--size-annotation);
  line-height:var(--lh-annotation);
  color:var(--text-muted);
}

/* Headings on a rich ground take the bright — headline scale only */
.block--primary h1,.block--primary h2,.block--primary h3,
.block--primary h4,.block--primary h5{color:var(--theme-primary-ink)}
.block--secondary h1,.block--secondary h2,.block--secondary h3,
.block--secondary h4,.block--secondary h5{color:var(--theme-secondary-heading)}
.block--tertiary h1,.block--tertiary h2,.block--tertiary h3,
.block--tertiary h4,.block--tertiary h5{color:var(--theme-tertiary-ink)}

/* ── Layout ───────────────────────────────────────────────────
   40/60 — caption and heading left, body or list right. The
   design system writes this as flex with calc(40% - 16px), so
   the narrow column holds at 40% and the gap is real. */

.cols{display:flex;flex-wrap:wrap;align-items:flex-start;gap:28px 32px}
.cols > *{min-width:240px}
.cols--4060 > :first-child{flex:0 0 calc(40% - 16px);max-width:calc(40% - 16px)}
.cols--4060 > :last-child{flex:1 1 0}
.cols--6040 > :first-child{flex:1 1 0}
.cols--6040 > :last-child{flex:0 0 calc(40% - 16px);max-width:calc(40% - 16px)}
.cols--center{align-items:center}
.cols--stretch{align-items:stretch}
@media (max-width:52rem){
  .cols--4060 > :first-child,.cols--6040 > :last-child{flex:1 1 100%;max-width:none}
}

/* A column that holds its place while the column beside it scrolls. Once
   the two stack, there is nothing beside it any more — left sticky it
   would sit over the content that follows, so it goes back into flow. */
/* --head-h is the header's height while it is on screen, 0 while it
   is hidden (site.js keeps it current), so the column never tucks
   under the header. */
.sticky-col{position:sticky;top:calc(var(--head-h, 0px) + 24px);transition:top 250ms ease}
@media (max-width:52rem){ .sticky-col{position:static} }

/* Even columns fall back to an auto-fit grid, as the mockups do */
.cols--5050,.cols--3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px 32px;
  align-items:start;
}
.cols--5050.cols--center,.cols--3.cols--center{align-items:center}

.grid{display:grid;gap:var(--gap-card-grid);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid--4{grid-template-columns:minmax(0,1fr)}
@media (min-width:34rem){ .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:64rem){ .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.grid--wide{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px}

/* ── Buttons ─────────────────────────────────────────────────
   Button.jsx: 14px Codec Pro Medium at 0.01em, sentence case,
   pill, button shadow. Hover lightens, press darkens for filled;
   hover fills, press deepens for outline. Colour only — no
   scale, no lift. */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--control-hit);
  padding:var(--pad-button-y) var(--pad-button-x);
  border:0;
  border-radius:var(--radius-pill);
  /* Labels in the caption style — Codec Pro Regular, 12px capitals. Every
     button on the site. */
  font-family:var(--font-display);
  font-weight:var(--weight-display-regular);
  font-size:var(--size-caption);
  letter-spacing:var(--ls-caption);
  text-transform:uppercase;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  box-shadow:var(--shadow-button);
  transition:background 140ms ease,color 140ms ease,border-color 140ms ease;
}

.btn--primary{background:var(--theme-primary-bg);color:var(--white)}
.btn--primary:hover{background:var(--theme-primary-hover);color:var(--white)}
.btn--primary:active{background:var(--theme-primary-active)}

.btn--secondary{background:var(--theme-secondary-bg);color:var(--theme-secondary-ink)}
.btn--secondary:hover{background:var(--theme-secondary-hover);color:var(--theme-secondary-ink)}
.btn--secondary:active{background:var(--theme-secondary-active);color:var(--theme-secondary-active-ink)}

.btn--tertiary{
  background:transparent;
  color:var(--theme-tertiary-ink);
  border:var(--border-control) solid var(--theme-tertiary-ink);
  padding-block:var(--pad-button-outline-y);
  box-shadow:none;
}
.btn--tertiary:hover{background:var(--theme-tertiary-bg);color:var(--theme-tertiary-ink)}
.btn--tertiary:active{
  background:var(--theme-tertiary-active-bg);
  color:var(--theme-tertiary-active-ink);
  border-color:var(--theme-tertiary-active-ink);
}

/* onDark — a tertiary turned cream outline, for rich grounds.
   The 12% / 22% wash is the component's own. */
.btn--onDark{
  background:transparent;
  color:var(--cream);
  border:var(--border-control) solid var(--cream);
  padding-block:var(--pad-button-outline-y);
  box-shadow:none;
}
.btn--onDark:hover{background:rgba(245,237,225,0.12);color:var(--cream)}
.btn--onDark:active{background:rgba(245,237,225,0.22);color:var(--cream)}

/* invert — the tier's pairing swapped: its ink becomes the
   ground. This is the hero call to action on every page.

   One documented departure. Button.jsx sets the lettering to the
   tier's ground, which puts burgundy on flare at 3.94:1 and
   aubergine on violet at 3.99:1 — under AA for 14px text, and the
   system's own note says the brights are "headline scale only".
   The lettering therefore takes the pressed step of the same
   ground (--theme-primary-active), which is all but identical to
   the eye and clears 4.5:1 in all three themes. */
.btn--invert{
  background:var(--theme-primary-ink);
  color:var(--theme-primary-active);
  border:0;
  padding:15px 30px;
}
.btn--invert:hover{background:var(--cream);color:var(--theme-primary-bg)}

.btn--invert-secondary{
  background:var(--theme-secondary-ink);
  color:var(--theme-secondary-bg);
  border:0;
  padding:15px 30px;
}
.btn--invert-secondary:hover{background:var(--white);color:var(--theme-secondary-bg)}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.btn-row--center{justify-content:center}
.btn-col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}

/* Text link in the caption style — "Read the essay" */
.textlink .icon{font-size:20px;margin-right:2px;vertical-align:-5px}
.textlink{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:var(--weight-display-regular);
  font-size:var(--size-caption);
  letter-spacing:var(--ls-caption);
  text-transform:uppercase;
  text-decoration:none;
  color:var(--theme-tertiary-ink);
  transition:color 130ms ease;
}
.textlink:hover{color:var(--theme-primary-bg)}
.block--primary .textlink{color:var(--theme-primary-ink)}
.block--primary .textlink:hover{color:var(--cream)}

:where(a,button,summary,input,textarea,select,label):focus-visible{
  outline:2px solid var(--border-focus);
  outline-offset:3px;
}

/* ── Tags ────────────────────────────────────────────────────── */

.tag{
  display:inline-block;
  padding:var(--pad-tag-y) var(--pad-tag-x);
  border-radius:var(--radius-pill);
  font-family:var(--font-display);
  font-weight:var(--weight-display-regular);
  font-size:var(--size-caption);
  letter-spacing:var(--ls-caption);
  text-transform:uppercase;
  background:var(--theme-tertiary-bg);
  color:var(--theme-tertiary-ink);
}

/* ── Header ──────────────────────────────────────────────────
   SiteHeader.jsx: cream ground, hairline border, 18/24 padding,
   13px nav at caption tracking, 26px gap, the active item
   underlined 2px in the theme's primary ground.

   On desktop it is pinned to the top of the screen. It slides away
   while you read down and comes back the moment you scroll up
   (site.js sets .is-hidden). It never hides while something in it
   has keyboard focus. On a phone it scrolls away with the page. */

.masthead{
  --mh-y:18px;
  position:relative;
  z-index:50;
  background:var(--cream);
  border-bottom:var(--border-hairline) solid var(--hairline);
  padding:var(--mh-y) var(--bleed);
}
@media (min-width:58rem){
  .masthead{
    position:sticky;top:0;
    transition:transform 250ms ease;
  }
  .masthead.is-hidden:not(:focus-within){transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){ .masthead{transition:none} }

.masthead__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

/* The wordmark is a type lockup, so it takes the page theme —
   22px Codec Pro capitals in the theme's primary ground, the
   middle word in Fat. SiteHeader.jsx renders it exactly this way. */
.masthead__mark{display:inline-flex;align-items:center;text-decoration:none}
.masthead__mark span{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:var(--weight-display-regular);
  line-height:1;
  text-transform:uppercase;
  color:var(--theme-primary-bg);
}
.masthead__mark b{font-weight:var(--weight-display-fat)}

.nav{display:none;flex-wrap:wrap;align-items:stretch;gap:26px;align-self:stretch;margin-bottom:calc(-1 * var(--mh-y))}
@media (min-width:58rem){ .nav{display:flex} }

.nav a:not(.btn){
  display:flex;
  align-items:center;
  padding-bottom:var(--mh-y);
  font-family:var(--font-display);
  font-size:var(--size-caption);
  font-weight:var(--weight-display-regular);
  letter-spacing:var(--ls-caption);
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border-bottom:2px solid transparent;
  transition:color 130ms ease,border-color 130ms ease;
}
.nav a:not(.btn):hover{color:var(--theme-primary-bg)}
.nav a:not(.btn)[aria-current="page"]{
  color:var(--theme-primary-bg);
  border-bottom-color:var(--theme-primary-bg);
}
/* The header button: the site's button label, a slimmer pill. */
.nav .btn{padding:11px 22px;align-self:center;margin-bottom:var(--mh-y);min-height:0}

/* Mobile menu button — a hamburger (Material Symbols, Light) that turns
   into a close cross while the menu is open. */
.menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--control-hit);
  height:var(--control-hit);
  margin-right:-10px;
  background:transparent;
  border:0;
  color:var(--ink);
  cursor:pointer;
}
.menu-toggle .icon{font-size:32px;font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 24}
.menu-toggle .icon:last-child,
.menu-state:checked ~ .masthead__inner .menu-toggle .icon:first-child{display:none}
.menu-state:checked ~ .masthead__inner .menu-toggle .icon:last-child{display:inline-block}
@media (min-width:58rem){ .menu-toggle{display:none} }

/* The open mobile menu drops down over the page rather than pushing it
   down: out of the flow, just below the header bar, full width. */
.mobile-nav{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  padding:0 var(--bleed) var(--space-4);
  background:var(--cream);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  box-shadow:0 12px 24px rgba(36,28,24,0.12);
}
.mobile-nav a{
  display:block;
  padding:var(--space-4) 0;
  border-bottom:1px solid var(--hairline);
  font-family:var(--font-display);
  font-size:var(--size-caption);
  letter-spacing:var(--ls-caption);
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
}
.menu-state:checked ~ .mobile-nav{display:block}
@media (min-width:58rem){ .menu-state:checked ~ .mobile-nav{display:none} }
.menu-state{position:absolute;opacity:0;pointer-events:none}

/* ── Hero ────────────────────────────────────────────────────
   Hero.jsx: rich ground, a two-up with a 40px gutter. Heading in
   the bright, body in cream at 520px.

   Narrow screens stack the words over the photograph, which runs
   to both edges and the bottom. From 52rem the screen splits exactly
   in half: the words on the left, kept to the content column (the
   half is half the width, so its column edge is 100% - content / 2),
   and the photograph filling the right half out to the screen edge.
   The hero fills 80% of the screen up to 760px, taller only if the
   words need it. */

.hero{
  background:var(--theme-primary-bg);
  color:var(--text-body-inverse);
  padding:var(--section-y) var(--bleed);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:40px;
  align-items:center;
}
@media (min-width:52rem){
  .hero{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0;
    padding-inline:0;
    /* 80% of the screen, but never taller than 760px — on a tall
       monitor 80% would be over 1100px of hero. */
    min-height:min(80vh, 760px);
    min-height:min(80svh, 760px);
  }
}

.hero__text{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.hero__text h1,.hero__text h2,.hero__text h3{color:var(--theme-primary-ink)}
.hero__text h2,.hero__text h3{
  font-size:clamp(30px,3.2vw,var(--size-h2));
  line-height:var(--lh-h2);
  font-weight:var(--weight-display-regular);
}
.hero__text .body{color:var(--text-body-inverse);max-width:520px}
.hero__text .body--note{max-width:34rem;color:var(--cream)}
/* Rule two: the bright is headline-only. A 12px caption is not a
   headline, so captions and small labels on a rich ground take cream. */
.hero__text .caption,.hero__text .annotation{color:var(--cream)}

/* The photograph bleeds out of the hero's padding. Stacked, the
   gutter is the same on both sides, so matching negative margins take
   it to the screen edges exactly — nothing hangs over. */
.hero__media{
  margin:0 calc(-1 * var(--gutter)) calc(-1 * var(--section-y));
  overflow:hidden;
  background:var(--cream);
}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 28%;aspect-ratio:4/3}
@media (min-width:52rem){
  /* Positioned, so the photograph fills the column without deciding
     the hero's height. */
  .hero__text{padding-left:max(var(--gutter), calc(100% - var(--content-max) / 2));padding-right:var(--gutter)}
  .hero__media{position:relative;align-self:stretch;margin:calc(-1 * var(--section-y)) 0}
  .hero__media img{position:absolute;inset:0;aspect-ratio:auto}
}

/* Words and a photograph side by side, inside the content column like any
   other section (.block--split as a section of its own, .split inside
   one). The photograph has rounded corners, fills the right-hand column's
   width and is exactly as tall as the words beside it. Stacked on a
   narrow screen, it sits under the words. */
.block.block--split,.split{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.split__media{
  overflow:hidden;
  border-radius:var(--radius-block);
  background:var(--surface-panel);
}
.split__media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:52rem){
  /* Same 32px gutter as the two-column layouts, so the photograph lines
     up with the right-hand column of the sections around it. */
  .block.block--split,.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:stretch}
  /* Out of the flow, so the words alone set the row's height and the
     photograph fills its whole column to exactly that height. */
  .split__media{position:relative}
  .split__media img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
}

/* A plain framed photograph, used beside body copy rather than in a hero */
.photo{border-radius:var(--radius-block);overflow:hidden;background:var(--surface-panel)}
.photo img{width:100%;height:100%;object-fit:cover}
/* A photograph that takes the height of the words beside it rather than
   setting its own. Stacked on a phone, it falls back to 4:3. */
.photo--fill{position:relative;align-self:stretch;min-height:240px}
.photo--fill img{position:absolute;inset:0;height:100%}
@media (max-width:40rem){ .photo--fill{aspect-ratio:4/3} }

.hero__rule{height:1px;background:var(--rule-on-dark);border:0;margin:0}

/* ── Logo strip ──────────────────────────────────────────────
   Knocked back to a single ink at 34% — the marks sit under the
   line of type, not beside it. Heights are set per mark so the
   optical weight matches, exactly as drawn. */

.logostrip{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:24px 0;
}
@media (max-width:40rem){ .logostrip{padding-block:20px} }
/* Content that follows the marks in the same section: on the content
   column, half a section's space above, and the section's usual padding
   below (less the strip's own). */
.logostrip__after{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  gap:var(--section-y);
  padding:calc(var(--section-y) / 2) var(--bleed) calc(var(--section-y) - 24px);
}
@media (max-width:40rem){ .logostrip__after{padding-bottom:calc(var(--section-y) - 20px)} }
/* The line of copy sits on the content column, centred; the marks
   below run the full width of the screen. */
.logostrip > p{
  align-self:stretch;
  padding-inline:var(--bleed);
  font-family:var(--font-text);
  font-weight:var(--weight-text-bold);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--ink);
  text-align:center;
}
/* The strip runs the full width of the screen. The track holds the set
   twice and slides by exactly one set, so the loop is seamless; a mask
   fades the marks in and out at the edges. Hovering pauses it. With
   reduced motion it stands still, one centred set. */
.logos{
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
}
.logos__track{
  display:flex;
  width:max-content;
  animation:logos-drift 48s linear infinite;
}
.logos:hover .logos__track{animation-play-state:paused}
/* Each set is at least a screen wide, or a wide screen would see an
   empty stretch as the loop comes round. Extra width is shared out
   around every mark, so the spacing stays even across the join. */
.logos__set{
  --logo-gap:104px;
  display:flex;
  flex:none;
  align-items:center;
  justify-content:space-around;
  min-width:100vw;
  gap:var(--logo-gap);
  padding-right:var(--logo-gap);
}
@media (max-width:40rem){ .logos__set{--logo-gap:64px} }
@keyframes logos-drift{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .logos{-webkit-mask-image:none;mask-image:none}
  .logos__track{animation:none;width:auto;justify-content:center}
  .logos__set{flex-wrap:wrap;justify-content:center;min-width:0;gap:24px 52px;padding-inline:var(--gutter)}
  .logos__set[aria-hidden="true"]{display:none}
}
.logos img{
  width:auto;
  flex:none;
  filter:grayscale(1) brightness(0) opacity(0.55);
}

/* TETR is drawn on a grey panel with white lettering, so it can't be
   flattened to one ink like the rest. At 80% it matches the average tone
   of the other marks. */
.logos img[data-mark="tetr"]{filter:grayscale(1) opacity(0.8)}
.logos img[data-h="88"]{height:clamp(64px,8.4vw,106px)}
.logos img[data-h="76"]{height:clamp(58px,7.2vw,91px)}
.logos img[data-h="70"]{height:clamp(53px,6.7vw,84px)}
.logos img[data-h="60"]{height:clamp(48px,5.8vw,72px)}
.logos img[data-h="48"]{height:clamp(38px,4.6vw,58px)}
/* Two marks that read large beside the others, taken down a touch. */
.logos img[data-mark="tetr"]{height:clamp(34px,4.1vw,52px)}
.logos img[data-mark="bodyshop"]{height:clamp(46px,5.9vw,74px)}

/* ── Numbered list ───────────────────────────────────────────
   NumberedList.jsx, set in body medium (the component draws 15px /
   1.5; the site uses body medium throughout), hairline rules
   top and bottom, and the 01 / 02 markers in the text face at
   caption size and tracking. No panel. */

.numbered{
  list-style:none;
  margin:0;
  padding:0;
  border-top:var(--border-hairline) solid var(--list-rule);
}
.numbered li{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:14px 0;
  border-bottom:var(--border-hairline) solid var(--list-rule);
  font-family:var(--font-text);
  font-weight:var(--weight-text-light);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--ink);
}
.numbered li::before{
  content:attr(data-n);
  flex:none;
  font-family:var(--font-display);
  font-weight:var(--weight-display-regular);
  font-size:var(--size-caption);
  letter-spacing:var(--ls-caption);
  color:var(--theme-tertiary-ink);
}
.numbered li > span{flex:1}
/* On a rich ground the rules go translucent-cream, the copy goes
   cream, and the markers take the theme's bright. */
.block--primary .numbered{border-top-color:var(--rule-on-dark)}
.block--primary .numbered li{border-bottom-color:var(--rule-on-dark);color:var(--cream)}
.block--primary .numbered li::before{color:var(--theme-primary-ink)}
.block--secondary .numbered{border-top-color:var(--rule-on-dark)}
.block--secondary .numbered li{border-bottom-color:var(--rule-on-dark);color:var(--theme-secondary-ink)}
.block--secondary .numbered li::before{color:var(--theme-secondary-heading)}
.card--secondary .numbered{border-top-color:var(--rule-on-dark)}
.card--secondary .numbered li{border-bottom-color:var(--rule-on-dark);color:var(--theme-secondary-ink)}
.card--secondary .numbered li::before{color:var(--theme-secondary-heading)}

/* ── Cards ───────────────────────────────────────────────────
   Card.jsx: flat ground, 8px, 26px padding, card shadow. The
   tertiary tier is the only one with a border, at 24% of its
   own ink. Number in the text face, title at h4 / Medium. */

.card{
  background:var(--surface-card);
  border-radius:var(--radius-block);
  padding:var(--pad-card);
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
}
.card__num{
  font-family:var(--font-display);
  font-weight:var(--weight-display-regular);
  font-size:var(--size-caption);
  letter-spacing:var(--ls-caption);
  color:var(--theme-primary-bg);
}
/* Number and badge share the card's top line, badge to the right. */
.card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
/* A tag is pale tertiary by default, which would vanish on a tertiary
   card, so there it takes the theme's primary ground with cream type. */
.card--tertiary .tag{background:var(--theme-primary-bg);color:var(--cream)}
.card__title{
  font-family:var(--font-display);
  font-size:var(--size-h4);
  font-weight:var(--weight-display-medium);
  line-height:var(--lh-h4);
  letter-spacing:var(--ls-h4);
  color:var(--theme-primary-bg);
}
.card .body{font-size:var(--size-body);line-height:var(--lh-body);max-width:62ch}
/* Every card heading is set like an accordion question: Codec Pro
   Regular at quote size, so cards and FAQs read as one family. */
.card .card__title,.card h3,.card h4,
.stackcards .card__title,
.article.card .article__title{
  font-size:var(--size-quote);
  line-height:var(--lh-quote);
  font-weight:var(--weight-display-regular);
  letter-spacing:0;
}

.card--tertiary{
  background:var(--theme-tertiary-bg);
  border:1px solid color-mix(in srgb, var(--theme-tertiary-ink) 24%, transparent);
}
.card--tertiary .card__num,.card--tertiary .card__title,
.card--tertiary h3,.card--tertiary h4{color:var(--theme-tertiary-ink)}
.card--primary{background:var(--theme-primary-bg)}
.card--primary .card__num,.card--primary .card__title,
.card--primary h3,.card--primary h4{color:var(--theme-primary-ink)}
.card--primary .body{color:var(--cream)}
.card--white{background:var(--white)}
/* Secondary card — the theme's secondary ground with its own pairing:
   headings in the pale secondary heading tone, copy in cream. */
.card--secondary{background:var(--theme-secondary-bg)}
.card--secondary .card__num,.card--secondary .card__title,
.card--secondary h3,.card--secondary h4{color:var(--theme-secondary-heading)}
.card--secondary .body,.card--secondary p{color:var(--theme-secondary-ink)}
/* A block of content on a coloured card, within a cream section. The card reaches out past the content column by its own
   side padding, so the words inside stay aligned with every other
   section's. How far it reaches is capped by the room outside the column
   (the gutter, or more on a wide screen), so it never runs off the page. */
.card--wide{
  --card-out:min(64px, max(var(--gutter), calc((100vw - var(--content-max)) / 2 - 12px)));
  margin-inline:calc(-1 * var(--card-out));
  padding:clamp(28px,5vw,64px) var(--card-out);
  box-shadow:none;
}
/* Its heading keeps section scale, not card-title scale. */
.card--wide h3{
  font-size:clamp(28px,3.6vw,var(--size-h3));
  line-height:var(--lh-h3);
  font-weight:var(--weight-display-medium);
}
.card--cream{background:var(--cream)}
.card a{text-decoration:none}
/* On a coloured section the section's own text colours would reach into
   a light card; the card keeps its own pairing. */
.card--tertiary .body,.card--tertiary p,
.card--white .body,.card--white p,
.card--cream .body,.card--cream p{color:var(--ink)}
.card--tertiary .caption,.card--tertiary .eyebrow{color:var(--theme-tertiary-ink)}
.card--white .caption,.card--white .eyebrow,
.card--cream .caption,.card--cream .eyebrow{color:var(--theme-primary-bg)}
.card--white h3,.card--white h4,
.card--cream h3,.card--cream h4{color:var(--text-heading)}
.card--white .card__num,.card--cream .card__num{color:var(--theme-primary-bg)}
/* Newsletter and coaching offers on the homepage */
.offer{gap:16px;padding:clamp(28px,3.5vw,48px)}
/* The offer headings at heading 3 size (h2 in the outline). */
.card.offer h2{
  font-size:clamp(28px,3.6vw,var(--size-h3));
  line-height:var(--lh-h3);
  font-weight:var(--weight-display-medium);
}

/* Stacked cards — the Coaching "What's included" ladder.
   StackCards.jsx: a hairline lip along the top edge and a shadow
   thrown upwards so each card reads as sitting on the one behind it.

   Each card sticks as the column scrolls, and the next slides up over
   it. Every card sticks --peek lower than the one before, so the
   heading line of each covered card stays visible above the next —
   by the end, the headings read as a stacked index. The offsets also
   clear the header while it is on screen (--head-h, from site.js). */

.stackcards{--peek:78px}
.stackcards > div{
  position:sticky;
  pointer-events:none;
  padding-bottom:var(--space-7);
  top:calc(var(--head-h, 0px) + 24px + var(--i, 0) * var(--peek));
  transition:top 250ms ease;
}
.stackcards > div:nth-child(2){--i:1}
.stackcards > div:nth-child(3){--i:2}
.stackcards > div:nth-child(4){--i:3}
.stackcards > div:nth-child(5){--i:4}
.stackcards > div:nth-child(6){--i:5}
@media (max-width:40rem){ .stackcards{--peek:70px} }
/* site.js sizes the card boxes; the empty part of a box must not catch
   clicks meant for the card showing through it. */
.stackcards article{pointer-events:auto}
.stackcards .card__top{min-height:0}
/* Number, heading and badge on one line, spaced like an accordion row. */
.card__top--inline{justify-content:flex-start;gap:8px}
.card__top--inline .card__num{flex:none;width:22px;line-height:var(--lh-quote)}
.card__top--inline .card__title{flex:1}
.stackcards .card__title{margin:0}
.stackcards article{
  background:var(--theme-tertiary-bg);
  border:1px solid color-mix(in srgb, var(--theme-tertiary-ink) 24%, transparent);
  border-radius:var(--radius-block);
  width:100%;
  max-width:680px;
  padding:var(--pad-card);
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  box-shadow:0 -10px 24px rgba(36,28,24,0.16), var(--shadow-card);
}
/* Tertiary cards: body in ink, heading and number in the theme's deep
   ink, badges on the theme's primary ground. */
.stackcards article .body,.stackcards article p{color:var(--ink)}
.stackcards article h4,.stackcards article .card__title,
.stackcards article .card__num{color:var(--theme-tertiary-ink)}
.stackcards article .tag{background:var(--theme-primary-bg);color:var(--cream)}
@media (prefers-reduced-motion:reduce){ .stackcards > div{position:static} }

/* Plain article links — the home page's latest three. No card,
   no shadow: image, kicker, title, standfirst. */

.article{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.article__media{
  aspect-ratio:3/2;
  border-radius:var(--radius-block);
  border:1px solid var(--hairline);
  background:var(--panel);
  overflow:hidden;
}
.article__media img{width:100%;height:100%;object-fit:cover}
/* As a card, the photograph runs to the card's edges and the words sit
   in the card's padding beneath it. */
.article.card{padding:0;gap:0;overflow:hidden;transition:box-shadow 150ms ease}
.article.card:hover{box-shadow:0 6px 18px rgba(36,28,24,0.16)}
.article.card .article__media{border:0;border-radius:0;border-bottom:1px solid var(--hairline)}
.article__text{display:flex;flex-direction:column;gap:10px;padding:20px 22px 24px}

/* The date and the reading time each stay whole; a narrow card breaks
   the line between them, never inside one. */
.article__meta > *{white-space:nowrap}
.article__meta{
  margin:0;
  font-family:var(--font-text);
  font-weight:var(--weight-text-regular);
  font-size:var(--size-body-sm);
  line-height:var(--lh-body-sm);
  color:var(--text-muted);
}
.article__kicker{
  font-family:var(--font-text);
  font-weight:var(--weight-text-regular);
  font-size:var(--size-caption);
  letter-spacing:var(--ls-caption);
  text-transform:uppercase;
  color:var(--theme-tertiary-ink);
}
.article__title{
  font-family:var(--font-display);
  font-size:var(--size-quote);
  font-weight:var(--weight-display-regular);
  line-height:var(--lh-quote);
  color:var(--theme-primary-bg);
  margin:0;
}
.article:hover .article__title{color:var(--theme-tertiary-ink)}

/* ── Pull quote ──────────────────────────────────────────────
   PullQuote.jsx: the text face, italic, at body size. A 3px
   rule in the theme's secondary ground. Not a display setting. */

.pullquote{
  margin:0;
  border-left:3px solid var(--theme-secondary-bg);
  padding-left:22px;
  font-family:var(--font-text);
  font-weight:var(--weight-text-light);
  font-size:var(--size-body);
  font-style:italic;
  line-height:var(--lh-body);
  color:var(--theme-primary-bg);
  max-width:660px;
}
.block--primary .pullquote{border-left-color:var(--theme-primary-ink);color:var(--cream)}

/* ── Testimonial carousel ────────────────────────────────────
   TestimonialCarousel.jsx: a cream section with a hairline
   border, holding three white cards in one grid cell. The
   active card sits centred at 42% of the section; its
   neighbours are pushed 52% left and right, dropped to 45%
   opacity and inset 22px, and can be clicked to bring them
   forward. Pill arrows in the tertiary pairing sit over the
   edges; the progress dots sit underneath. */

.carousel{
  background:var(--theme-tertiary-bg);
  padding:var(--section-y) var(--bleed);
  position:relative;
  overflow:hidden;
}
.carousel__heading{text-align:center;margin-bottom:40px;color:var(--theme-tertiary-ink)}
.carousel__stage{position:relative}
.carousel__track{display:grid}

.carousel__item{
  grid-area:1 / 1;
  width:42%;
  justify-self:center;
  margin:0;
  height:100%;
  box-sizing:border-box;
  padding:22px 0;
  opacity:0;
  z-index:8;
  pointer-events:none;
  cursor:pointer;
  transition:transform 720ms cubic-bezier(.22,1,.36,1),
             opacity 720ms cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity;
}
.carousel__item[data-rel="0"]{
  transform:translateX(0);
  padding:0;
  opacity:1;
  z-index:10;
  pointer-events:auto;
  cursor:default;
}
.carousel__item[data-rel="-1"]{transform:translateX(-52%);opacity:0.45;z-index:9;pointer-events:auto}
.carousel__item[data-rel="1"]{transform:translateX(52%);opacity:0.45;z-index:9;pointer-events:auto}
.carousel__item[data-rel="-2"]{transform:translateX(-104%)}
.carousel__item[data-rel="2"]{transform:translateX(104%)}

.carousel__card{
  background:var(--white);
  border-top:1px solid var(--hairline);
  border-radius:var(--radius-block);
  box-shadow:var(--shadow-card);
  padding:44px 40px;
  min-height:340px;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:24px;
  transition:box-shadow 720ms cubic-bezier(.22,1,.36,1);
}
.carousel__item[data-rel="0"] .carousel__card{box-shadow:0 14px 34px rgba(36,28,24,0.18)}

.carousel__quote{
  margin:0;
  font-family:var(--font-text);
  font-weight:var(--weight-text-light);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--theme-primary-bg);
  text-wrap:pretty;
}
.carousel__cite{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-style:normal;
}
.carousel__name{
  font-family:var(--font-display);
  font-weight:var(--weight-display-regular);
  font-size:var(--size-caption);
  letter-spacing:var(--ls-caption);
  text-transform:uppercase;
  color:var(--theme-primary-bg);
}
.carousel__role{
  font-family:var(--font-text);
  font-weight:var(--weight-text-light);
  font-size:var(--size-body-sm);
  line-height:var(--lh-body-sm);
  color:var(--ink);
}

.carousel__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;height:46px;
  flex:none;
  padding:0;
  border:none;
  border-radius:var(--radius-pill);
  background:var(--white);
  color:var(--theme-tertiary-ink);
  box-shadow:var(--shadow-button);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:20;
  transition:background 140ms ease;
}
.carousel__arrow--prev{left:4px}
.carousel__arrow--next{right:4px}
.carousel__arrow:hover{background:var(--cream)}
.carousel__arrow .icon{font-size:26px}

.carousel__dots{
  margin-top:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.carousel__dots button{
  width:8px;height:8px;
  padding:0;
  border:none;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--theme-primary-bg) 22%, transparent);
  cursor:pointer;
  transition:width 300ms ease,background 300ms ease;
}
.carousel__dots button[aria-current="true"]{
  width:28px;
  background:var(--theme-tertiary-ink);
}

@media (max-width:62rem){
  .carousel{padding:var(--section-y) 20px}
  .carousel__item{width:64%}
  .carousel__item[data-rel="-1"],.carousel__item[data-rel="1"]{opacity:0;pointer-events:none}
  .carousel__card{padding:32px 26px}
}
/* On a phone there is no room for neighbours, so the arrows drop
   below the card and sit as a centred pair. */
@media (max-width:40rem){
  .carousel__item{width:100%;padding:0}
  .carousel__stage{padding-bottom:64px}
  .carousel__arrow{top:auto;bottom:0;transform:none}
  .carousel__arrow--prev{left:calc(50% - 52px)}
  .carousel__arrow--next{right:calc(50% - 52px)}
  .carousel__dots{margin-top:20px;gap:12px}
}

/* ── FAQ / disclosure list ───────────────────────────────────
   FaqList.jsx: hairline dividers only, no panel. A 01 / 02
   marker in the text face at caption size in the tertiary ink,
   the question at quote size in Codec Pro Regular, and a 38px
   + / − in a 52px box. The sign is typography, not an icon. */

.faq{border-top:var(--border-hairline) solid var(--hairline)}
.faq details{border-bottom:var(--border-hairline) solid var(--hairline)}
.faq details[open]{border-bottom:none}
.faq summary{
  display:flex;
  align-items:center;
  gap:8px;
  padding:16px 0;
  cursor:pointer;
  list-style:none;
  border-bottom:var(--border-hairline) solid transparent;
}
.faq details[open] summary{border-bottom:none}
.faq summary::-webkit-details-marker{display:none}
.faq__n{
  flex:none;
  width:22px;
  font-family:var(--font-display);
  font-weight:var(--weight-display-regular);
  font-size:var(--size-caption);
  letter-spacing:var(--ls-caption);
  line-height:var(--lh-quote);
  color:var(--theme-tertiary-ink);
}
.faq__q{
  flex:1;
  font-family:var(--font-display);
  font-size:var(--size-quote);
  font-weight:var(--weight-display-regular);
  line-height:var(--lh-quote);
  color:var(--theme-primary-bg);
}
.faq summary::after{
  content:"add";
  flex:none;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;
  color:var(--ink-muted);
}
.faq details[open] summary::after{content:"remove";color:var(--theme-tertiary-ink)}
.faq .answer{
  padding:0 0 20px 30px;
  border-bottom:var(--border-hairline) solid var(--hairline);
}
.faq .answer .body{font-size:var(--size-body);line-height:var(--lh-body);max-width:none}
/* Without numerals, an answer starts in line with its heading. */
.faq--plain .answer{padding-left:0}
.block--tertiary .faq,
.block--tertiary .faq details,
.block--tertiary .faq .answer{border-color:color-mix(in srgb, var(--theme-tertiary-ink) 28%, transparent)}
/* On the secondary ground: questions and numbers in the pale secondary
   heading tone, the +/− in cream, translucent cream rules. */
.block--secondary .faq,.card--secondary .faq,
.block--secondary .faq details,.card--secondary .faq details,
.block--secondary .faq .answer,.card--secondary .faq .answer{border-color:var(--rule-on-dark)}
.block--secondary .faq__q,.card--secondary .faq__q,
.block--secondary .faq__n,.card--secondary .faq__n{color:var(--theme-secondary-heading)}
.block--secondary .faq summary::after,.card--secondary .faq summary::after,
.block--secondary .faq details[open] summary::after,.card--secondary .faq details[open] summary::after{color:var(--theme-secondary-ink)}
/* On the rich primary ground: the bright is headline-only, so questions,
   numbers and the +/− go cream, with translucent cream rules. */
.block--primary .faq,
.block--primary .faq details,
.block--primary .faq .answer{border-color:var(--rule-on-dark)}
.block--primary .faq__q,
.block--primary .faq__n,
.block--primary .faq summary::after,
.block--primary .faq details[open] summary::after{color:var(--cream)}

/* A single centred column — the heading over its content, both centred
   on the page at a comfortable reading width. */
.centred-column{max-width:880px;margin-inline:auto;display:flex;flex-direction:column;gap:32px}
.centred-column > h1,.centred-column > h2,.centred-column > h3{text-align:center}
/* Apply: the steps are only as wide as their longest line, centred under
   the heading. */
.apply > .numbered{align-self:center;max-width:100%}
/* Apply: half the usual padding where the hero meets the form. */
.block:has(> .apply){padding-bottom:calc(var(--section-y) / 2)}
.block:has(> .apply-form){padding-top:calc(var(--section-y) / 2)}

/* For running text: the column narrows to a reading measure. */
.centred-column--text{max-width:68ch}

/* Dated credential rows inside a disclosure */
.creds{list-style:none;margin:0;padding:0}
.creds li{
  display:flex;align-items:baseline;gap:12px;
  padding:6px 0;
  font-family:var(--font-text);
  font-weight:var(--weight-text-light);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--ink);
}
.creds .yr{flex:none;font-weight:var(--weight-text-regular)}
.creds li > span:last-child{flex:1}

/* ── Forms ───────────────────────────────────────────────────
   Field.jsx and Input.jsx. Every control fully rounded. The
   label is the text face at annotation size in the muted ink —
   not a caption. Focus is the border switching to ink; a
   coloured ring reads as an error. */

.field{display:flex;flex-direction:column;gap:7px;margin-bottom:22px}
.field > label{
  font-family:var(--font-text);
  font-weight:var(--weight-text-regular);
  font-size:var(--size-body-sm);
  line-height:var(--lh-body-sm);
  color:var(--ink);
}
/* Required fields carry an asterisk; the field itself is marked required,
   so screen readers announce it without reading the symbol. */
.field .req{color:var(--theme-tertiary-ink);margin-left:2px}
.field .help{
  font-family:var(--font-text);
  font-size:var(--size-micro);
  letter-spacing:var(--ls-caption);
  color:var(--text-eyebrow);
}
.field input,.field select,.field textarea{
  width:100%;
  padding:var(--pad-field-y) var(--pad-field-x);
  font-family:var(--font-text);
  font-weight:var(--weight-text-light);
  font-size:var(--size-body);
  color:var(--ink);
  background:var(--surface-field);
  border:var(--border-control) solid var(--border-default);
  border-radius:var(--radius-pill);
  transition:border-color 130ms ease;
}
.field select{
  padding-right:52px;
  appearance:none;
  cursor:pointer;
}
.select{position:relative}
/* Searchable dropdown (site.js): a text box over a hidden native select,
   with the matching options in a panel below. */
.combo input{padding-right:52px}
.combo__native{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;pointer-events:none;
}
.combo__list{
  position:absolute;left:0;top:calc(100% + 6px);z-index:30;
  width:max(100%, min(340px, 86vw));
  margin:0;padding:6px;list-style:none;
  max-height:280px;overflow-y:auto;
  background:var(--white);
  border:var(--border-hairline) solid var(--hairline);
  border-radius:var(--radius-block);
  box-shadow:var(--shadow-card);
}
.combo__list li{
  padding:9px 14px;
  border-radius:6px;
  font-family:var(--font-text);
  font-size:var(--size-body);
  line-height:1.4;
  color:var(--ink);
  cursor:pointer;
}
.combo__list li[aria-selected="true"],
.combo__list li[role="option"]:hover{background:var(--theme-tertiary-bg)}
.combo__list .combo__none{color:var(--text-muted);cursor:default}
.select::after{
  content:"expand_more";
  position:absolute;
  right:16px;top:50%;
  transform:translateY(-50%);
  font-size:26px;
  color:var(--ink);
  pointer-events:none;
}
/* The textarea sits inside a rounded shell that draws the border and
   ground. The textarea itself is square and inset, so its resize grip
   lands inside the box instead of floating over the rounded corner. */
.field .textarea{
  background:var(--surface-field);
  border:var(--border-control) solid var(--border-default);
  border-radius:var(--radius-textarea);
  padding:6px 10px 10px 0;
  transition:border-color 130ms ease;
}
.field .textarea:focus-within{border-color:var(--border-focus)}
.field .textarea textarea{
  display:block;
  border:0;border-radius:0;
  background:transparent;
  min-height:8rem;
  resize:vertical;
  padding:var(--pad-field-y) 0 var(--pad-field-y) var(--pad-field-x);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--border-focus);
  outline:none;
}
.field-row{display:grid;gap:22px}
@media (min-width:34rem){ .field-row{grid-template-columns:1fr 1fr} }
/* A dialling code needs a fraction of the width its number does, so the
   pair splits 40/100 rather than evenly, as the mockup sets it. */
@media (min-width:34rem){
  .field-row--narrow-first{grid-template-columns:minmax(120px,0.4fr) minmax(180px,1fr)}
}
/* Apply: every field the same width. Names and email on one line, then country code, WhatsApp number
   and how they found me on the next, once there is room. In between, the
   third field of each row takes a line of its own; on a phone, all stack. */
@media (min-width:34rem){
  .field-row--three > :last-child{grid-column:1 / -1}
  .field-row--contact{grid-template-columns:1fr 1fr}
  .field-row--contact > :last-child{grid-column:1 / -1}
}
@media (min-width:52rem){
  .field-row--three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .field-row--three > :last-child{grid-column:auto}
  .field-row--contact{grid-template-columns:repeat(3,minmax(0,1fr))}
  .field-row--contact > :last-child{grid-column:auto}
}
/* The Apply form sits on the tertiary ground, so its fields take white
   to stand clear of it. */
.apply-form .field input,.apply-form .field select,.apply-form .field .textarea{background:var(--white)}
.apply-form .field .textarea textarea{background:transparent}

.form-foot{
  display:flex;justify-content:center;
  padding-top:18px;
  border-top:var(--border-hairline) solid var(--hairline);
}

/* ── CTA band ────────────────────────────────────────────────
   CtaBand.jsx: heading and button in the 40% column, body in
   the 60%. The button inverts its tier's pairing. */

.ctaband{padding:var(--section-y) var(--bleed);display:flex;justify-content:center}
.ctaband__inner{
  max-width:64ch;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  text-align:center;
}
.ctaband--secondary{background:var(--theme-secondary-bg);color:var(--theme-secondary-ink)}
.ctaband--secondary .body,.ctaband--secondary p{color:var(--theme-secondary-ink)}
.ctaband--secondary h2,.ctaband--secondary h3{color:var(--theme-secondary-heading)}
.ctaband--secondary .caption{color:var(--theme-secondary-heading)}
.ctaband--primary{background:var(--theme-primary-bg);color:var(--text-body-inverse)}
.ctaband--primary .body,.ctaband--primary p{color:var(--text-body-inverse)}
.ctaband--primary h2,.ctaband--primary h3{color:var(--theme-primary-ink)}
.ctaband--primary .caption{color:var(--cream)}

/* ── Footer ──────────────────────────────────────────────────
   SiteFooter.jsx: the page theme's primary ground, the wordmark
   in that theme's bright, muted body and quieter labels, links
   in cream at 15px, the blurb in body medium. Two columns: brand,
   then the link columns. */

.footer{
  background:var(--theme-primary-bg);
  color:var(--cream);
  padding:var(--section-y) var(--bleed) 40px;
  display:flex;
  flex-direction:column;
  gap:40px;
}
.footer__top{display:grid;grid-template-columns:minmax(220px,2fr) minmax(280px,3fr);gap:28px}
@media (max-width:52rem){ .footer__top{grid-template-columns:minmax(0,1fr)} }
.footer__brand{display:flex;flex-direction:column;gap:12px}
.footer__mark{display:inline-flex;text-decoration:none}
/* The wordmark can't wrap, so on the narrowest phones it scales down
   rather than pushing the footer past the edge of the screen. */
.footer__mark span{
  font-family:var(--font-display);
  font-size:clamp(22px,7.6vw,28px);
  font-weight:var(--weight-display-regular);
  line-height:1;
  text-transform:uppercase;
  color:var(--theme-primary-ink);
}
.footer__mark b{font-weight:var(--weight-display-fat)}
.footer__mark:hover span{color:var(--theme-primary-ink)}
.footer__brand p{
  font-family:var(--font-text);
  font-weight:var(--weight-text-light);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--footer-body);
}
.footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:34rem){ .footer__cols{grid-template-columns:1fr 1fr} }
.footer__cols > div{display:flex;flex-direction:column;gap:16px}
.footer h2{
  font-family:var(--font-display);
  font-weight:var(--weight-display-regular);
  font-size:var(--size-caption);
  line-height:var(--lh-caption);
  letter-spacing:var(--ls-caption);
  text-transform:uppercase;
  color:var(--footer-label);
  margin-bottom:8px;
}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.footer a{
  font-family:var(--font-text);
  font-weight:var(--weight-text-light);
  font-size:15px;
  color:var(--cream);
  text-decoration:none;
}
/* The bright is headline-only, so a 15px link brightens to the
   theme's pale tint rather than to its flare. */
.footer a:hover{color:var(--theme-tertiary-bg)}
.footer__base{
  border-top:var(--border-hairline) solid var(--rule-on-dark);
  padding-top:14px;
  display:flex;flex-wrap:wrap;gap:8px 32px;
  justify-content:space-between;
  font-family:var(--font-text);
  font-weight:var(--weight-text-light);
  font-size:var(--size-body-sm);
  line-height:var(--lh-body-sm);
  color:var(--footer-body);
}

/* ── Badges ──────────────────────────────────────────────────── */

/* Accreditation badges. The four files are all square, but their marks
   carry different visual weight, so each is nudged to look the same size
   as the others: the ICF seal has a margin inside its file, the Animas
   seal's serrated edge makes it read smaller than its outline, and the
   RYT seal's heavy black ring makes it read larger. */
.badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px 56px}
.badges img{--badge:clamp(80px,8.5vw,120px);height:var(--badge);width:auto;flex:none}
.badges img[src*="badge-3"]{height:calc(var(--badge) * 1.07)}
.badges img[src*="badge-1"]{height:calc(var(--badge) * 1.05)}
.badges img[src*="badge-4"]{height:calc(var(--badge) * 0.95)}
/* The IFS mark is a wide wordmark, not a seal. A rectangle reads larger
   than a circle of the same height, and the file carries a margin, so it
   is sized against the round badges by eye rather than by height. */
.badges img[src*="badge-6"]{height:calc(var(--badge) * 1.05)}
/* The EMCC mark is wider still, so it is set a little lower again. */
.badges img[src*="badge-8"]{height:calc(var(--badge) * 0.9)}
/* In a row beneath body copy: left-aligned. On the About page's wide
   column all six sit on one line. In the half-width text column of a split
   section (homepage, Coaching) they are set in two rows of three instead,
   so they can be larger without an orphan on a second line. */
.badges--inline{justify-content:flex-start;gap:20px 28px;margin-block:8px 4px}
.badges--inline img{--badge:clamp(64px,5.4vw,78px)}
.split__text .badges--inline{
  display:grid;
  grid-template-columns:repeat(3,auto);
  justify-content:start;
  align-items:center;
  justify-items:start;
  gap:24px 36px;
}
/* A band of its own (About): the badges large and centred, well spaced. */
.badges--band{gap:32px 64px}
.badges--band img{--badge:clamp(84px,8.4vw,120px)}
/* Below laptop width six don't fit on one line; two rows of three. */
@media (max-width:64rem){
  .badges--band{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;justify-items:center;align-items:center;gap:32px 56px}
}
@media (max-width:40rem){
  .badges--inline img{--badge:60px}
  .badges--band{gap:28px 32px}
  .badges--band img{--badge:72px}
  .badges--inline,.split__text .badges--inline{
    display:grid;grid-template-columns:repeat(3,auto);
    justify-content:start;align-items:center;justify-items:start;gap:20px 24px;
  }
}

/* ── Skip link ───────────────────────────────────────────────── */

.skip{position:absolute;left:-9999px}
.skip:focus{
  left:16px;top:16px;z-index:100;
  background:var(--cream);color:var(--ink);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-pill);
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:0.01ms !important}
}

/* ============================================================
   Writing — the essay shell and the archive
   ============================================================ */

.post{max-width:none}
.post__title{
  margin-top:26px;
  font-family:var(--font-display);
  font-size:clamp(26px,3vw,var(--size-h4));
  font-weight:var(--weight-display-medium);
  line-height:var(--lh-h4);
  letter-spacing:var(--ls-h4);
  color:var(--theme-primary-bg);
  max-width:24ch;
}
.post__standfirst{
  margin-top:var(--space-4);
  font-family:var(--font-text);
  font-weight:var(--weight-text-bold);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--ink);
  max-width:62ch;
}
.post__meta{
  margin-top:var(--space-6);
  font-family:var(--font-text);
  font-weight:var(--weight-text-regular);
  font-size:var(--size-caption);
  letter-spacing:var(--ls-caption);
  text-transform:uppercase;
  color:var(--theme-tertiary-ink);
}
.post__aside{
  font-style:italic;
  border-left:1px solid var(--rule-on-dark);
  padding-left:var(--space-6);
}
.post__cover{
  margin:var(--space-11) 0 0;
  border-radius:var(--radius-block);
  overflow:hidden;
  background:var(--surface-panel);
}
.post__cover img{width:100%}

/* The essay itself, at a single measure. */
.post__body{
  margin-top:var(--space-11);
  max-width:var(--measure);
  font-family:var(--font-text);
  font-weight:var(--weight-text-light);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--ink);
}
.post__body > * + *{margin-top:1.45em}
.post__body h2{
  margin-top:2.2em;
  font-family:var(--font-display);
  font-size:var(--size-h4);
  font-weight:var(--weight-display-medium);
  line-height:var(--lh-h4);
  letter-spacing:var(--ls-h4);
  color:var(--theme-primary-bg);
  text-transform:none;
}
.post__body h2 + *{margin-top:0.85em}
.post__body a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.post__body ul,.post__body ol{margin:0;padding-left:1.4rem}
.post__body li{margin-bottom:0.5em}
.post__body li > p{margin:0}
.post__body li::marker{color:var(--theme-tertiary-ink)}
.post__body blockquote{
  margin:2em 0;
  border-left:3px solid var(--theme-secondary-bg);
  padding-left:22px;
  font-family:var(--font-text);
  font-weight:var(--weight-text-light);
  font-size:var(--size-body);
  font-style:italic;
  line-height:var(--lh-body);
  color:var(--theme-primary-bg);
  max-width:660px;
}
.post__body blockquote p + p{margin-top:0.6em}
.post__body hr{border:0;height:1px;background:var(--hairline);margin:2.6em 0}
.post__body figure{margin:2.4em 0}
.post__body figure img{width:100%;border-radius:var(--radius-block)}
.post__body figcaption{
  margin-top:var(--space-3);
  font-family:var(--font-display);
  font-weight:var(--weight-display-regular);
  font-size:var(--size-caption);
  letter-spacing:var(--ls-caption);
  text-transform:uppercase;
  color:var(--text-muted);
}
.post__body .embed{
  position:relative;padding-top:56.25%;
  border-radius:var(--radius-block);overflow:hidden;
  background:var(--surface-panel);
}
.post__body .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.post__body .callout{
  margin:2em 0;
  padding:var(--pad-card);
  background:var(--surface-panel);
  border-left:3px solid var(--ink);
  border-radius:0 var(--radius-block) var(--radius-block) 0;
  font-size:var(--size-body);
  line-height:var(--lh-body);
}
.post__body .callout--cta{
  background:var(--theme-tertiary-bg);
  border-left-color:var(--theme-tertiary-ink);
}
.post__body .callout > * + *{margin-top:1em}
.post__foot{
  margin-top:var(--space-11);
  padding-top:var(--space-7);
  border-top:1px solid var(--hairline);
  max-width:var(--measure);
  font-family:var(--font-text);
  font-size:var(--size-body-sm);
  line-height:var(--lh-body-sm);
  color:var(--text-muted);
}

/* Archive: "Start here" (three tiles) and the full list below (a grid of
   four), both the homepage's article card. */
.archive-start{display:flex;flex-direction:column;gap:32px}
.archive__heading{margin:0}
.archive-latest{display:flex;flex-direction:column;gap:40px}
/* On every essay tile (Writing page and the homepage's Articles): the
   date and reading time in the caption style; the
   headline in Hanken Grotesk at body medium, bold, held to two lines; the
   standfirst to one. Cut lines end in an ellipsis; the full text stays in
   the page for search and screen readers. */
.article-tiles .article__meta{
  font-family:var(--font-display);
  font-weight:var(--weight-display-regular);
  font-size:var(--size-caption);
  line-height:var(--lh-body-sm);
  letter-spacing:var(--ls-caption);
  text-transform:uppercase;
  color:var(--theme-primary-bg);
}
.article-tiles .article.card .article__title{
  font-family:var(--font-text);
  font-size:var(--size-body);
  font-weight:var(--weight-text-bold);
  line-height:1.5;
  letter-spacing:0;
}
.article-tiles .article__title,.article-tiles .article .body{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.article-tiles .article__title{-webkit-line-clamp:2;line-clamp:2}
.article-tiles .article .body{-webkit-line-clamp:1;line-clamp:1}
/* Writing hero: one centred column — the wordmark, the line under it and
   the Substack form, all on the page's centre line. */
@media (min-width:52rem){ .hero--writing{grid-template-columns:minmax(0,1fr)} }
.hero--writing .hero__text{align-items:center;text-align:center;padding-inline:var(--gutter)}
.hero--writing .substack-embed{margin-inline:auto}
/* Only as tall as its content plus the usual section padding. */
@media (min-width:52rem){ .hero--writing{min-height:0} }
/* Substack's own subscribe form, framed (the compact light version, for a
   dark ground). The frame never overflows a narrow screen. */
.substack-embed{display:block;width:100%;max-width:480px;height:150px;border:0;background:transparent}
/* In the homepage's Newsletter card: the compact embed, cut to just the
   email box and button (the frame is shorter than the form). Substack
   writes its small print in white for dark grounds, which vanishes on a
   white card, so the same notice is set underneath in the site's own
   type. */
.offer__subscribe{padding-top:8px}
/* The frame keeps its own 150px (Substack lays the form out for that
   height); the wrapper shows only its top, where the email box is. */
.offer__subscribe .substack-clip{height:72px;overflow:hidden;max-width:480px}
.offer__subscribe .offer__embed{height:150px;margin-inline:0}
.offer__notice{
  margin:6px 0 0;
  font-family:var(--font-text);
  font-size:var(--size-annotation);
  line-height:1.5;
  color:var(--text-muted);
}
.offer__notice a{color:inherit;text-decoration:underline}
.grid--3{grid-template-columns:minmax(0,1fr)}
@media (min-width:40rem){ .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:64rem){ .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} }