/* ============================================================
   Angel's homepage — STRUCTURE ONLY
   Layout, type and spacing. Contains NO color decisions:
   every color reads from a --c-* variable set in color.css.
   To change how the page looks colour-wise, edit color.css —
   you should never need to touch this file.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{background:var(--c-page);color:var(--text-default);font-family:var(--sans);font-size:var(--t-body);line-height:1.55;overflow-x:hidden;letter-spacing:-.01em}
::selection{background:var(--teal);color:var(--porcelain)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible{outline-color:var(--w)}
.skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--ink);color:var(--w);padding:11px 18px;border-radius:0 0 8px 8px;font-weight:600;font-size:var(--t-ui);transition:top .3s var(--ease)}
.skip:focus{top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Full-bleed sections escape the container with
   `calc(50vw - 50%)`. 50vw INCLUDES the scrollbar, so every bleed
   overhangs by half the scrollbar width on each side — 8px of real
   horizontal overflow at 375. `clip` (not `hidden`) trims it without
   creating a scroll container, so the sticky policy rail on Privacy
   keeps working. */
html{overflow-x:clip}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
/* A <br class="brk"> is a DESIGNED line break for wide screens. Below
   820 it fights the column and produces ragged orphan lines, so it
   stops applying and the copy wraps naturally. */
@media (max-width:820px){.brk{display:none}}
/* Joined the shared padding scale 20 Aug so the homepage and the rebuilt
   subpages share one rhythm. Was clamp(84px,13vh,158px) = up to 316px per
   section, which left the homepage 26% dead space. Spacing only; no structural
   change to the homepage. */
.section{padding:var(--pad-base) 0;position:relative}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-weight:var(--fw-semi);font-size:var(--t-btn);letter-spacing:-.01em;padding:.92em 1.5em;border-radius:var(--r-md);transition:.4s var(--ease);cursor:pointer;border:1.5px solid transparent}
.btn .a{transition:transform .4s var(--ease)}
.btn:hover .a{transform:translateX(4px)}
.btn-primary{background:var(--c-btn-bg);color:var(--c-btn-fg)}
.btn-primary:hover{background:var(--c-btn-bg-hover)}
.btn-wht{background:var(--w);color:var(--ink)}
.btn-wht:hover{background:transparent;color:var(--w);border-color:var(--w)}
.tl{display:inline-flex;align-items:center;gap:.45em;font-weight:var(--fw-semi);font-size:var(--t-ui);color:var(--c-link);transition:.35s}
.tl .a{transition:transform .35s}
.tl:hover .a{transform:translateX(3px)}
.tl:hover{color:var(--c-link-hover)}

/* was .sideset — the label that sat beside the copy is gone; the block
   keeps its own class so page-head layout stays addressable. */
.head-copy{display:block}
/* The two CENTRED sections (The Difference, How I Help) take the same
   label turned horizontal, so it sits on the section's own axis. Same
   type, same colour, same rule — the rule moves from side to underneath. */

/* ---------- nav ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.5s var(--ease)}
/* nav scrim — 170px to match the Figma nav-scrim node, and at .75 rather
   than .5: the nav links sit over the BRIGHT right side of the hero photo,
   where the old .5/150px scrim left them at 1.68:1 against white. */
header::before{content:"";position:absolute;inset:0 0 auto 0;height:170px;background:var(--c-nav-scrim);z-index:0;transition:opacity .45s var(--ease);pointer-events:none}
header.solid::before{opacity:0}
.mast{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:22px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:30px;transition:.4s var(--ease)}
header.solid{background:var(--c-nav-solid);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1)}
header.solid .mast{padding-top:12px;padding-bottom:12px}
/* 68px matches the V3 wordmark; at 36px the stacked lockup went illegible */
/* V4 header lockup: submark + three stacked lines. There is no single
   asset for this, so the mark is the SVG and the words are live text —
   crisper, and guaranteed to use the brand font. */
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand .mark{height:56px;width:auto;display:block;transition:height .4s var(--ease)}
header.solid .brand .mark{height:44px}
.brand .lockup{display:flex;flex-direction:column;line-height:1.16;font-weight:var(--fw-x);letter-spacing:-.01em;font-size:var(--t-lockup);color:var(--w);transition:color .4s var(--ease),font-size .4s var(--ease)}
header.solid .brand .lockup{color:var(--text-strong);font-size:var(--t-nav)}
.brand .lc{display:none}
header.solid .brand .lw{display:none}
header.solid .brand .lc{display:block}
.mast nav{display:flex;align-items:center;gap:30px}
.mast nav a{font-size:var(--t-nav);font-weight:var(--fw-med);color:var(--c-nav-link);transition:.3s}
.mast nav a:hover{color:var(--w)}
.mast .book{color:var(--w);font-weight:var(--fw-semi)}
header.solid .mast nav a{color:var(--text-muted)}
header.solid .mast nav a:hover{color:var(--text-strong)}
header.solid .mast .book{color:var(--c-link)}
.navtoggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;color:var(--w);cursor:pointer;margin:-10px -10px -10px 0}
header.solid .navtoggle{color:var(--ink)}
.bars,.bars::before,.bars::after{display:block;width:24px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.bars{position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-7px}.bars::after{top:7px}
header.nav-open .bars{background:transparent}
header.nav-open .bars::before{transform:translateY(7px) rotate(45deg)}
header.nav-open .bars::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
/* Figma is 1440x677 = 47vw. Scaling on that ratio keeps the crop honest on
   wide monitors instead of letterboxing, with sane floor and ceiling. */
.hero{position:relative;height:clamp(560px,47vw,880px);overflow:hidden;isolation:isolate;display:flex}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:var(--c-photo-filter)}
.hero .scrim{position:absolute;inset:0;z-index:-1;background:var(--c-hero-scrim)}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;max-width:var(--maxw);width:100%;margin:0 auto;padding:90px var(--gut) 0}
/* 800px matches the V3 headline text box (799px), so it breaks into two
   lines in the same place the client approved */
.hero-copy h1{font-size:var(--t-display);line-height:1.02;letter-spacing:var(--tr-display);font-weight:var(--fw-bold);max-width:800px;color:var(--w);margin-bottom:26px}
.hero-copy h1 .accent-phrase{color:var(--c-hero-accent)}
/* the lead is light-on-dark here and must override the muted body color */
.hero-copy .t-lead{max-width:66ch;color:var(--w-dim);margin-bottom:34px}
.hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero .tl{color:var(--w)}
/* Captions sit directly on photography, so they carry their own ground —
   a text-shadow is not a contrast guarantee and axe can't score it. */
.cap{position:absolute;z-index:2;font-size:var(--t-photo-cap);font-weight:var(--fw-bold);letter-spacing:.16em;text-transform:uppercase;color:var(--w-dim);background:var(--c-cap-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:6px 10px;border-radius:var(--r-sm)}
.hero .cap{right:24px;bottom:20px}
.ph-note{position:absolute;left:var(--gut);bottom:20px;z-index:2;font-size:var(--t-micro);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ph-note-fg);background:var(--c-cap-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:6px 10px;border-radius:var(--r-sm)}

/* ---------- marquee ---------- */
.marq{background:var(--c-marq-bg);overflow:hidden;padding:16px 0}
.marq .tk{display:flex;width:max-content;white-space:nowrap;animation:sc 42s linear infinite}
.marq:hover .tk{animation-play-state:paused}
.marq .it{font-weight:var(--fw-semi);font-size:clamp(.95rem,1.3vw,1.15rem);color:var(--text-muted);padding-right:clamp(28px,3vw,56px);display:inline-flex;align-items:center;gap:clamp(28px,3vw,56px)}
.marq .it::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--c-marq-dot)}
@keyframes sc{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marq .tk{animation:none}}

/* ---------- 01 the gap ---------- */
.gap{background:var(--c-gap-bg)}
/* The left track is the headline's own measure, not a fraction of the row.
   At 1.3fr it was 785 wide while the h2 could never exceed its 15ch cap of 658,
   so 127px of the gap was dead track the `gap` value had no control over.
   NB: the track CANNOT be 15ch — `ch` on the grid container resolves against
   the container's 16px font, not the h2's 62px, and collapses it to ~132px. */
.gap-grid{display:grid;grid-template-columns:minmax(0,658px) minmax(0,1fr);gap:clamp(30px,6.95vw,100px);align-items:end}
.gap h2{max-width:15ch}   /* 658 at Desktop/H1 — keep in step with the track above */
.gap .r{padding-bottom:6px}
.gap .r p+p{margin-top:var(--s4)}
.gap .sign{color:var(--text-strong);font-weight:var(--fw-semi)}

/* ---------- 02 the difference — CENTRED, per V3 ---------- */
.diff{background:var(--c-diff-bg);color:var(--c-diff-fg);text-align:center}
/* on dark grounds the chip inverts: a light wash, white label */
.diff .statement{font-size:clamp(1.75rem,3.4vw,3rem);line-height:1.2;letter-spacing:-.03em;font-weight:var(--fw-bold);color:var(--c-diff-fg);max-width:34ch;margin:0 auto clamp(30px,4vh,44px)}
.diff .statement .lead-in{color:var(--c-diff-fg-dim)}
.diff .statement .accent-phrase{color:var(--c-diff-accent-phrase)}
.diff .notfoot{max-width:96ch;margin:0 auto}
.diff .notfoot p{font-family:var(--serif);font-style:italic;font-size:var(--t-lockup);line-height:1.6;color:var(--c-diff-fg-dim)}

/* ---------- 03 how i help — tinted card grid ----------
   Headline + intro stay CENTRED as in V3. Six-column grid:
   three cards of span 2, then two of span 3. Replaces the
   accordion, so nothing is hidden behind a click. */
.help{background:var(--c-help-bg)}
/* V4: the intro is Desktop/Subhead 27/34 centred across the full measure,
   not Lead 18. It was reading as a caption at the smaller size. */
.help{text-align:center}
.help .intro{font-size:var(--t-subhead);line-height:1.26;font-weight:var(--fw-med);color:var(--text-muted);max-width:none;margin:0 auto}
.help-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s5)}
.help-card{grid-column:span 2;padding:var(--s6);border-radius:var(--r-lg);display:flex;flex-direction:column;gap:var(--s3);background:var(--c-card-1)}
.help-card:nth-child(2){background:var(--c-card-2)}
.help-card:nth-child(3){background:var(--c-card-3)}
.help-card:nth-child(4),.help-card:nth-child(5){grid-column:span 3}
.help-card:nth-child(4){background:var(--c-card-2)}
.help-card:nth-child(5){background:var(--c-card-1)}
.help-card h3{font-size:clamp(1.25rem,1.7vw,1.6rem)}
.help-card p{color:var(--text-default);opacity:.78}

/* ---------- 04 who it's for — EXACT V4 ----------
   Full-bleed photo, no container. The panel is inset 27px from the right,
   35px from the top, 693 wide — matching Figma 1:1 at desktop. */
/* Figma is 1440x630 = 43.75vw. Fixed 630 made this a thin letterbox on a
   wide display. */
.who{position:relative;height:clamp(520px,43.75vw,860px);overflow:hidden;isolation:isolate}
/* The panel measures from the CONTENT column, not the viewport edge. This is
   the whole fix for the 86px overhang it used to have against the card row —
   it does not need the page to be wider, it needs the same frame as the page. */
.who .who-frame{position:relative;max-width:var(--maxw);height:100%;margin:0 auto}
.who .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:var(--c-photo-filter)}
.who::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--c-who-wash)}
/* Fluid by default so it never overflows; the exact Figma pinning below
   only switches on at >=1240, where 693 + 27 actually fits. */
.who .panel{width:min(693px,calc(100% - (var(--gut) * 2)));margin:35px var(--gut) 0 auto;background:var(--c-who-panel);color:var(--w);padding:20px;border-radius:var(--r-md);text-align:right}
.who .panel h2{color:var(--w);margin-bottom:var(--s4);font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.06;letter-spacing:-.03em;font-weight:var(--fw-bold)}
.who .panel p{color:var(--w);font-size:var(--t-lead);line-height:var(--lh-lead)}
.who .cap{position:absolute;left:var(--gut);bottom:29px;background:var(--c-who-cap);padding:20px;border-radius:var(--r-md);-webkit-backdrop-filter:none;backdrop-filter:none}
@media(min-width:1240px){
  .who .panel{position:absolute;top:35px;right:var(--gut);width:693px;margin:0}
}

/* ---------- 05 meet colleen ---------- */
.colleen{background:var(--c-colleen-bg)}
.col-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,88px);align-items:center}
@media(min-width:1240px){
  /* V4's 420 + 88 + 727 = 1235, which `justify-content:center` then floated 23px
     inside the 1280 content column — this section alone sat off the page's grid.
     Portrait keeps its exact 420; the copy column takes the remainder (772) so
     the block starts and ends on the same pixels as the cards above it. */
  .col-grid{grid-template-columns:420px minmax(0,1fr);gap:88px}
}
/* the hand-drawn line illustration from V3, exported from the Figma frame.
   Transparent PNG, so it sits on whatever ground the section has. */
.col-mark{width:100%;max-width:420px;display:flex;align-items:center;justify-content:center}
.col-mark img{width:100%;height:auto;filter:var(--c-illus-filter)}
.col-mark .img-slot{width:100%}
/* V4: 34/41, and the block gaps are 22 — it was squished at the old values */
.col-body .pull{font-weight:var(--fw-semi);letter-spacing:-.025em;font-size:clamp(1.5rem,2.36vw,2.125rem);line-height:1.21;margin-bottom:22px;color:var(--text-strong)}
.col-body .body{max-width:none;margin-bottom:0}
.col-sign{margin-top:34px}
/* All three values want 682px on one line. That did not fit the old 727 column
   once gaps were counted; it does fit the 772 the column-fill above gives back. */
.creds{display:grid;grid-template-columns:auto auto minmax(0,1fr);justify-content:start;gap:14px 30px;align-items:start}
/* belt and braces below 1240, where the row does have to wrap: the school name
   is one unit, so it can never break as "UC Santa / Cruz" */
.cred .v .nb{white-space:nowrap}
.cred .k{font-size:var(--t-micro);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);margin-bottom:4px}
.cred .v{font-size:var(--t-ui);font-weight:var(--fw-semi);color:var(--text-strong)}

/* ---------- 06 the first step — EXACT V4 ----------
   Copy block is 622 wide, right-aligned, sitting in the right half.
   Section padding 110/72, block gap 22. */
.final{position:relative;overflow:hidden;isolation:isolate;padding:110px 0;min-height:clamp(460px,38.5vw,700px);display:flex;align-items:center;color:var(--w)}
.final .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:var(--c-photo-filter)}
.final::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--c-final-wash)}
.final .inner{max-width:622px;margin-left:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:22px}
.final .wrap{width:100%;max-width:var(--maxw)}
.final h2{color:var(--w);font-size:clamp(2rem,3.33vw,3rem);line-height:1.02;letter-spacing:-.03em;font-weight:var(--fw-bold);margin:0}
.final p{color:var(--w);margin:0;font-weight:var(--fw-med);font-size:var(--t-lead);line-height:var(--lh-lead)}
.final .kicker{font-family:var(--serif);font-style:italic;font-size:var(--t-subhead);line-height:1.12;color:var(--w);margin:0}
/* the default accent teal drops to unreadable over the coffee photo */
.final .kicker .accent-phrase{color:var(--c-final-accent-phrase)}
.final .note{margin:0;font-size:var(--t-ui);color:var(--w-dim)}

/* ---------- footer ---------- */
footer{background:var(--c-foot-bg);color:var(--w);padding:clamp(64px,8vh,96px) 0 36px}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:44px;padding-bottom:46px}
.foot-brand img{height:44px;width:auto;margin-bottom:18px}
.foot-brand p{color:var(--w-dim2);font-size:var(--t-ui);max-width:32ch}
.fcol h2{font-size:var(--t-micro);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--c-foot-head);margin-bottom:16px}
.fcol a{display:block;color:var(--w-dim);font-size:var(--t-ui);margin-bottom:11px;transition:.3s;width:fit-content}
.fcol a:hover{color:var(--w)}
.foot-bot{display:flex;justify-content:space-between;padding-top:26px;flex-wrap:wrap;gap:12px}
.foot-bot span{font-size:var(--t-caption);color:var(--w-dim2)}

/* ---------- reveal + progress ---------- */
/* ---------- reveal on entry (retuned 27 Aug, Ali picked "stagger") --
   Was 24px over a full second, which read as one slow block sliding
   up rather than a sequence. Now 18px over .55s on an ease-out that
   decelerates hard, so each element arrives and settles rather than
   drifting, and the 90ms steps between siblings are actually legible
   against the shorter duration. */
.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.js .reveal.in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.09s}[data-d="2"]{transition-delay:.18s}[data-d="3"]{transition-delay:.27s}
[data-d="4"]{transition-delay:.36s}[data-d="5"]{transition-delay:.45s}

/* HEADINGS · a longer, softer rise than body copy.
   Ali picked demo 6 but asked for it softer. The demo masked each
   LINE and slid it out from behind its own edge — that needs the
   heading split into per-line spans, which means measuring rendered
   line boxes in JS and redoing it on every resize. It breaks the
   moment a heading rewraps.
   So: no mask, no per-line split. The whole heading travels further
   than body copy (26px against 18) over longer (.8s) on the site's
   softest curve, which decelerates almost to a stop. It reads as the
   heading settling rather than sliding, and it cannot break. */
.js .reveal.rise{transform:translateY(26px);
  transition-duration:.8s;
  transition-timing-function:var(--ease)}

/* When the container IS the revealed element, it stops moving itself
   and hands the motion to its children — otherwise the group slides
   up and then each card slides up again inside it. */
.js .reveal.stagger{opacity:1;transform:none;transition:none}

/* Cards and list items inside a revealed group follow each other
   rather than arriving together. Six steps is the longest run on the
   site (the homepage help cards); past that the tail feels late. */
.js .reveal.in > .stagger > *,
.js .stagger.reveal.in > *{animation:rv-in .5s cubic-bezier(.22,.61,.36,1) both}
.js .stagger > *:nth-child(2){animation-delay:.07s}
.js .stagger > *:nth-child(3){animation-delay:.14s}
.js .stagger > *:nth-child(4){animation-delay:.21s}
.js .stagger > *:nth-child(5){animation-delay:.28s}
.js .stagger > *:nth-child(6){animation-delay:.35s}
@keyframes rv-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- arrows and links (Ali: "implement the hover both") ----
   The arrow travels; the underline draws left to right instead of
   appearing all at once. Both are 280ms, the same curve as the
   reveal, so the site has one motion accent rather than three. */
.po-btn .a,.hp-btn .a{display:inline-block;
  transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.po-btn:hover .a,.hp-btn:hover .a{transform:translateX(5px)}
.tl{position:relative;text-decoration:none}
.tl::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;
  background:currentColor;
  transition:right .32s cubic-bezier(.22,.61,.36,1)}
.tl:hover::after,.tl:focus-visible::after{right:0}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--c-progress);z-index:200;will-change:transform}

/* ---------- responsive ---------- */
@media(max-width:900px){
  /* rotated text does not survive a narrow column — back to horizontal */
  .navtoggle{display:inline-flex}
  .mast nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--c-nav-panel-bg);box-shadow:var(--c-nav-panel-shadow);padding:4px var(--gut) 16px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
  header.nav-open nav{opacity:1;visibility:visible;transform:none}
  .mast nav a{font-size:var(--t-nav-mobile);padding:14px 2px;color:var(--text-default)}
  .mast nav a:hover{color:var(--text-default)}
  .mast nav a:last-child{border-bottom:0}
  .mast .book{color:var(--c-link)}
  .gap-grid,.col-grid,.foot-top{grid-template-columns:1fr}
  .gap-grid{align-items:start;gap:var(--s6)}
  .help-grid{grid-template-columns:1fr}
  .help-card,.help-card:nth-child(4),.help-card:nth-child(5){grid-column:span 1}
  .hero{height:auto;min-height:0}
  .hero-copy{padding:120px var(--gut) 56px}
  .who{min-height:0;padding:clamp(90px,14vh,140px) 0}
  /* the exact-Figma desktop panel is absolute; below 980 it returns to flow */
  .who{height:auto;padding:clamp(56px,8vh,80px) 0}
  .who .panel{position:static;width:auto;max-width:none;margin:0 var(--gut);text-align:left}
  .who .cap{position:static;display:inline-block;margin:var(--s5) var(--gut) 0}
  .final{padding:clamp(72px,10vh,110px) 0}
  .final .inner{margin-left:0;max-width:none;text-align:left;align-items:flex-start}
  .col-grid{grid-template-columns:1fr;justify-content:stretch;gap:var(--s6)}
  .col-mark{width:auto;max-width:420px}
  .col-mark{margin-inline:auto}
  .foot-top{gap:32px}
  .diff .notfoot{flex-direction:column;gap:var(--s3)}
}

/* ============================================================
   INNER PAGES
   Shared structure for the sub-pages. Nav, footer, buttons and
   the section shells all come from the blocks above — only the page
   header and a few list/grid shapes are new.
   ============================================================ */

/* ---------- page header ---------- */
/* top padding clears the fixed nav; it is not decorative space */
.page-head{background:var(--c-page-head-bg);padding:clamp(150px,20vh,210px) 0 clamp(64px,9vh,104px)}
.page-head h1{max-width:17ch;margin-bottom:var(--s5)}
.page-head .lead{max-width:58ch}
.page-head .lead p+p{margin-top:var(--s4)}

/* ---------- generic page section ---------- */
.psec{padding:clamp(72px,11vh,128px) 0}
.psec.warm{background:var(--c-page-warm)}
.psec.tint{background:var(--c-page-tint)}
/* dark ground for inner pages — NOT .diff, which carries text-align:center */
.psec.ink{background:var(--c-diff-bg);color:var(--c-diff-fg)}
.psec.ink h2{color:var(--w)}
.psec.ink .intro,.psec.ink .lede{color:var(--c-diff-fg-dim)}
/* on ink the accent phrase goes white, as on the homepage — teal is only
   3.9:1 here, which passes for large type but reads dim */
.psec.ink .accent-phrase{color:var(--c-diff-accent-phrase)}
.psec h2{margin-bottom:var(--s5)}
.psec .intro{max-width:62ch}
.psec .intro p+p{margin-top:var(--s4)}
/* heading left, copy right — keeps long prose off the full measure */
.psec-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s9);align-items:start}
.psec-split h2{margin-bottom:0;max-width:14ch}

/* ---------- 3-across card grid (6 items) ---------- */
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.card-grid-3 .card{padding:var(--s6);border-radius:var(--r-lg);background:var(--c-card-1);display:flex;flex-direction:column;gap:var(--s3)}
.card-grid-3 .card h3{font-size:clamp(1.1rem,1.4vw,1.3rem)}
.card-grid-3 .card p{color:var(--text-default);opacity:.78}

/* ---------- the "what it is not" list, on the ink ground ---------- */
.notlist{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s7);margin-top:var(--s6);list-style:none}
.notlist li{display:flex;gap:var(--s4);align-items:baseline;padding:calc(var(--s4) * .7) 0}
.notlist li::before{content:"";width:14px;height:2px;background:var(--c-not-mark);flex:0 0 auto;transform:translateY(-4px)}
.notlist li b{font-weight:var(--fw-semi);color:var(--w)}
.notlist li span{color:var(--c-diff-fg-dim)}

/* ---------- the "what you can expect" list ---------- */
.expect{list-style:none;margin-top:var(--s5);max-width:60ch}
.expect li{display:flex;gap:var(--s4);align-items:baseline;padding:calc(var(--s4) * .7) 0;font-size:var(--t-lead);line-height:1.4;color:var(--text-strong);font-weight:var(--fw-med)}
.expect li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c-expect-dot);flex:0 0 auto}

/* ---------- closing block ---------- */
/* photo + scrim; the ink version blended into the footer below it */
.pclose{position:relative;isolation:isolate;overflow:hidden;
  background:var(--c-pclose-bg);padding:clamp(84px,13vh,132px) 0;text-align:center}
.pclose .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pclose::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--c-pclose-wash)}
.pclose h2{max-width:20ch;margin:0 auto var(--s4);color:var(--c-pclose-fg)}
.pclose h2 .accent-phrase{color:var(--c-pclose-accent)}
.pclose p{max-width:52ch;margin:0 auto var(--s6);color:var(--c-pclose-body);font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--fw-med);letter-spacing:var(--tr-lead)}
/* on ink the primary teal button drops to 2.4:1 against the ground; the
   porcelain button is 20.8:1 and reads as the one thing to press */
.pclose .btn-primary{background:var(--w);color:var(--ink)}
.pclose .btn-primary:hover{background:transparent;color:var(--w);border-color:var(--w)}

@media(max-width:900px){
  .psec-split{grid-template-columns:1fr;gap:var(--s6)}
  .psec-split h2{max-width:none}
  .card-grid-3{grid-template-columns:1fr}
  .notlist{grid-template-columns:1fr}
}

/* ============================================================
   INNER PAGE PATTERNS — added for the six-page prototype
   ============================================================ */

/* ---------- page header with a portrait / illustration slot ---------- */
.page-head-split{display:grid;grid-template-columns:420px 1fr;gap:var(--s9);align-items:center}
.portrait{aspect-ratio:7/8;border-radius:var(--r-lg);background:var(--c-card-1);overflow:hidden;display:flex;align-items:center;justify-content:center}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait .ph{font-size:var(--t-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--text-muted)}

/* ---------- 2-across cards ---------- */
.card-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5)}
.card-grid-2 .card{padding:var(--s6);border-radius:var(--r-lg);background:var(--c-card-1)}
.card-grid-2 .card p{font-size:var(--t-lead);line-height:1.45;font-weight:var(--fw-semi);color:var(--text-strong)}

/* ---------- ruled tick list ---------- */
.ticklist{list-style:none;max-width:64ch}
.ticklist li{display:flex;gap:var(--s4);align-items:baseline;padding:calc(var(--s4) * .7) 0;font-size:var(--t-lead);line-height:1.45;color:var(--text-strong);font-weight:var(--fw-med)}
.ticklist li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c-expect-dot);flex:0 0 auto;transform:translateY(-2px)}
.psec.ink .ticklist li{border-bottom-color:var(--c-rule-dark-soft);color:var(--c-diff-fg-dim);font-weight:var(--fw-med)}
/* goldenrod is a RULE here, never type */
.psec.ink .ticklist li::before{background:var(--c-not-mark);border-radius:2px;width:14px;height:2px;transform:translateY(-5px)}

/* ---------- meta row — the facts a visitor wants before booking ---------- */
.meta-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s6);padding-top:var(--s5);max-width:76ch}
.meta-row .k{font-size:var(--t-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.meta-row .v{font-size:var(--t-body);font-weight:var(--fw-semi);color:var(--text-strong);line-height:1.4}

/* ---------- booking / Calendly ---------- */
.booking{background:var(--c-page-tint);padding:clamp(72px,11vh,120px) 0}
.booking h2{margin-bottom:var(--s4)}
.booking .lede{max-width:56ch;margin-bottom:var(--s6);color:var(--text-muted);font-size:var(--t-lead);line-height:var(--lh-lead)}
.booking .box{background:var(--porcelain);border-radius:var(--r-lg);padding:var(--s5);min-height:680px;display:flex;flex-direction:column}
.calendly-inline-widget{flex:1;min-width:320px;min-height:640px}
/* shown until the real Calendly URL is wired in, and if the embed fails */
.booking .await{margin:auto;text-align:center;max-width:46ch}
.booking .await .tag{display:inline-block;font-size:var(--t-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--c-tag-fg);background:var(--teal-tint);padding:8px 14px;border-radius:var(--r-pill);margin-bottom:var(--s4)}
.booking .await p{color:var(--text-muted);line-height:1.6}

/* ---------- legal / long-form ---------- */
.legal{display:grid;grid-template-columns:280px 1fr;gap:var(--s9);align-items:start}
.legal-rail{position:sticky;top:112px}
.legal-rail h2{font-size:var(--t-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s4)}
.legal-rail a{display:block;padding:8px 0;font-size:var(--t-ui);line-height:1.35;color:var(--text-muted);transition:color .3s}
.legal-rail a:hover{color:var(--text-accent)}
.legal-body>section+section{margin-top:var(--s8)}
.legal-body h2{font-size:var(--t-h3);line-height:1.25;letter-spacing:var(--tr-h3);font-weight:var(--fw-bold);color:var(--text-strong);margin-bottom:var(--s4);scroll-margin-top:120px}
.legal-body p{max-width:70ch}
.legal-body p+p{margin-top:var(--s4)}
.legal-body ul{list-style:none;margin-top:var(--s4);max-width:70ch}
.legal-body li{display:flex;gap:var(--s4);align-items:baseline;padding:var(--s3) 0}
.legal-body li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-expect-dot);flex:0 0 auto;transform:translateY(-2px)}
.eff{font-size:var(--t-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s5)}

@media(max-width:900px){
  .page-head-split{grid-template-columns:1fr;gap:var(--s6)}
  .portrait{max-width:380px}
  .card-grid-2{grid-template-columns:1fr}
  .meta-row{grid-template-columns:1fr;gap:var(--s4)}
  .legal{grid-template-columns:1fr;gap:var(--s6)}
  .legal-rail{position:static}
  .booking .box{min-height:0}
}

/* ---------- image placeholder ----------
   Mirrors the Figma "Image Placeholder" component. Teal wash + dashed
   keyline so a missing image reads as intentional rather than broken.
   To swap in the real artwork, replace the div with an <img> — the
   ratio classes keep the layout identical either way. */
.img-slot{background:var(--c-card-1);border:1.5px dashed var(--c-ph-line);border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden}
.img-slot svg{width:56px;height:44px;flex:0 0 auto;color:var(--c-ph-glyph)}
/* 10px text needs 4.5:1. At 75% the teal only reached 3.11 over the tint;
   full-strength teal is 4.79. The glyph and keyline stay soft — decorative. */
.img-slot .ph-cap{font-size:var(--t-micro);font-weight:var(--fw-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--c-ph-cap)}
/* ratios matching the Figma variants */
.img-slot.square{aspect-ratio:1/1}
.img-slot.landscape{aspect-ratio:4/3}
.img-slot.portrait{aspect-ratio:7/8}
.img-slot.wide{aspect-ratio:16/9}
/* a real image drops straight in with no layout change */
.img-slot>img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   V4 HOMEPAGE
   ============================================================ */

/* ---------- statement band ----------
   Full-bleed teal with Crete Round Regular. Porcelain on teal is
   5.31:1, so it clears AA at any size. */
.band{background:var(--c-band-bg);padding:clamp(56px,8vh,88px) 0;text-align:center}
.band p{color:var(--c-band-fg);max-width:none;margin:0}

/* ---------- V4 card grid ----------
   Same mechanic as the ACF core-disciplines bento: 3 → 2 → 1 at
   980 and 560, with grid-auto-rows:1fr so every card in a row
   equalises to the tallest. That is what keeps the row level even
   when one body runs long. */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:28px;margin-top:var(--s7)}
.vcard{display:flex;flex-direction:column;height:100%;text-align:left;background:var(--c-vcard-bg);border:2px solid var(--c-vcard-line);border-radius:var(--r-lg);overflow:hidden;transition:transform .6s var(--ease),box-shadow .5s var(--ease)}
.vcard:hover{transform:translateY(-6px);box-shadow:var(--c-vcard-shadow)}
@media(prefers-reduced-motion:reduce){.vcard,.vcard:hover{transform:none;transition:none}}

/* image slot sits flush at the top of the card */
.vcard .img-slot{border:0;border-radius:0;aspect-ratio:auto;height:154px;flex:0 0 auto}
.vcard .vbody{padding:10px 32px 30px;display:flex;flex-direction:column;flex:1}
.vcard h3{margin-bottom:12px}
/* the divider under each heading */
.vcard .vrule{height:2px;background:var(--c-vcard-line);width:100%;margin-bottom:8px}
/* three lines at desktop, so every card's text block is the same depth
   before the grid equalises heights */
.vcard p{color:var(--text-muted);min-height:calc(var(--lh-body) * 3em)}

@media(max-width:980px){
  .vgrid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .vcard p{min-height:0}   /* the 3-line rule is a desktop intent only */
}
@media(max-width:560px){
  .vgrid{grid-template-columns:1fr}
  /* three cred columns will not fit a phone — the education line alone
     is 46 characters. Stack them. */
  .creds{grid-template-columns:1fr;gap:var(--s4)}
}
/* belt and braces: nothing may push the page wider than the viewport */
img,svg,video{max-width:100%}
.wrap>*{min-width:0}

/* ---------- footer wordmark (live text, not an image) ---------- */
/* The footer wordmark is the artwork file, inlined (27 Aug, Ali:
   "needs to be the actual file not recreated and all in white").
   The old version rebuilt it from two spans with the second line in
   gold; the file sets every glyph to #FFFFFF. Inlined rather than
   linked because an <img> cannot reach the page's webfont, and the
   file is set in type rather than outlined. */
.foot-wordmark{display:block;width:clamp(150px,15vw,190px);height:auto;margin:0 0 16px}
.foot-wordmark text{font-family:var(--sans);font-weight:800;
  font-variation-settings:'wght' 800;fill:#FFFFFF}

/* The same pride bar the homepage carries in "Built for established,
   values-driven owners" — same gradient, same height.
   No plate behind it: Ali, 27 Aug, "it's okay if it's subtle, that's
   the point." The flag's black stripe reads as a gap on the footer's
   black ground and that is accepted rather than corrected, because
   recolouring a stripe of the Progress Pride flag is not an option. */
.foot-pride{height:6px;border-radius:2px;max-width:min(280px,100%);
  margin:0 0 18px;
  background:linear-gradient(90deg,
    #E40303 0 9.09%, #FF8C00 9.09% 18.18%, #FFED00 18.18% 27.27%,
    #008026 27.27% 36.36%, #24408E 36.36% 45.45%, #732982 45.45% 54.54%,
    #5BCEFA 54.54% 63.63%, #FFFFFF 63.63% 72.72%, #F5A9B8 72.72% 81.81%,
    #000000 81.81% 90.90%, #613915 90.90% 100%)}

/* the place line sits between the wordmark and the bar, and is the
   bold one — the descriptor below it is the quiet one */
.foot-place{margin:0 0 14px;color:var(--w);font-size:var(--t-ui);
  font-weight:var(--fw-bold);letter-spacing:-.01em}

.foot-credit{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,254,250,.45)}
.foot-credit:hover{color:var(--w);text-decoration-color:var(--w)}

/* ============================================================
   INNER PAGES — V1 language (from Ali's Advisory V1, 12 Aug)
   Colour bands do the sectioning and the heading ladder does the
   hierarchy. Replaces the old .psec / .psec-split rhythm, which
   was the same shape six times.
   ============================================================ */

/* ---------- page head over an image ---------- */
/* the header is fixed, so the top pad carries its 112px as well as the 80 */
.phero{position:relative;isolation:isolate;padding:clamp(140px,13vw,192px) 0 clamp(56px,6vw,80px);overflow:hidden}
.phero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--c-phero-wash)}
.phero .wrap{display:flex;flex-direction:column;gap:20px}
.phero h1{font-size:var(--t-page-title);line-height:var(--lh-page-title);
  letter-spacing:var(--tr-page-title);font-weight:var(--fw-bold);color:var(--text-strong);margin:0}
.phero .sub{display:flex;flex-direction:column;gap:30px;max-width:863px}
.phero .sub h2{font-size:var(--t-page-sub);line-height:var(--lh-page-sub);
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong);margin:0}
.phero .sub p{font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--fw-med);letter-spacing:var(--tr-lead);color:var(--text-muted);margin:0}
/* The slot the client photo drops into. Unlike a card placeholder this sits
   BEHIND live text, so the centred glyph would read straight through the
   headline — it is pinned quietly to the corner instead. */
.phero .img-slot{position:absolute;inset:0;z-index:-2;border:0;border-radius:0;
  flex-direction:row;align-items:flex-end;justify-content:flex-start;
  padding:0 0 20px var(--gut);gap:10px}
.phero .img-slot svg{width:26px;height:20px;opacity:.5}
.phero .img-slot .ph-cap{opacity:.75}

/* ---------- section shells: the band IS the section break ---------- */
.isec{padding:clamp(64px,7.5vw,99px) 0}
.isec.tint{background:var(--c-isec-tint)}
.isec.deep{background:var(--c-isec-deep);color:var(--w)}
.isec.ink{background:var(--c-isec-ink);color:var(--w)}
.isec.pale{background:var(--c-isec-pale)}
/* the head band is tighter than the rest — it is a lead-in, not a section */
.isec.lead-in{padding:clamp(56px,6vw,80px) 0}

/* section headings sit a full step below the page title */
.isec h2{font-size:var(--t-h3);line-height:var(--lh-sec);letter-spacing:var(--tr-h3);
  font-weight:var(--fw-semi);color:var(--text-strong);margin:0}
.isec.deep h2,.isec.ink h2{color:var(--w)}
.isec .lede{font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--fw-med);letter-spacing:var(--tr-lead);color:var(--text-muted);margin:0}
.isec.deep .lede,.isec.ink .lede{color:var(--w)}
.isec .stack{display:flex;flex-direction:column;gap:var(--s6)}

/* heading left, copy right — 424 / 816 at 1280, a much wider copy column
   than the old 503/681 split, so it reads as one idea not two columns */
.isplit{display:grid;grid-template-columns:minmax(0,424px) minmax(0,1fr);gap:40px;align-items:start}
.isplit p{font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--fw-med);letter-spacing:var(--tr-lead);color:var(--text-muted);margin:0}
.isec.deep .isplit p,.isec.ink .isplit p{color:var(--c-on-deep-body)}

/* ---------- the deep band: copy left, outcomes right ---------- */
.deep-grid{display:grid;grid-template-columns:minmax(0,592px) minmax(0,1fr);
  gap:clamp(48px,14vw,224px);align-items:start}
.deep-grid .c{display:flex;flex-direction:column;gap:24px}
.deep-grid .c p{font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--fw-med);letter-spacing:var(--tr-lead);color:var(--c-on-deep-body);margin:0}
.outcomes{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.outcomes li{font-size:var(--t-lead);line-height:1.4;font-weight:var(--fw-med);letter-spacing:var(--tr-lead);color:var(--w)}

/* ---------- the "what it's not" list on ink ---------- */
.notgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.notgrid li{display:flex;gap:16px;padding:12px 0;
  font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--fw-med);
  letter-spacing:var(--tr-body);color:var(--w);list-style:none}
.notgrid li::before{content:"";flex:0 0 auto;width:18px;height:2px;margin-top:12px;
  background:var(--c-not-mark)}
.notgrid{margin:0;padding:0}

@media(max-width:900px){
  .isplit,.deep-grid,.notgrid{grid-template-columns:1fr}
  .deep-grid{gap:var(--s6)}
  .isplit{gap:var(--s4)}
}

/* V1 sets the closing headline at 48/49 — a hair tighter than --lh-h2 */
.pclose h2{line-height:1.0208}

/* ---------- "What I help you with" — poster panel + list ----------
   The section title lives INSIDE the left panel, so it is separated from the
   item titles by ground rather than by size. That was the hierarchy fault:
   at a 34px heading, 26-30px item titles competed instead of sitting under it.
   Ladder is now 34 (in-panel) / 22 / 17.
   The panel ground is still to be chosen — solid, or a pattern. */
.poster-sec{padding:clamp(56px,7vw,99px) 0}
/* stretch, not start — the panel and the list finish on the same line */
.poster-sec .grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(36px,5vw,88px);align-items:stretch}
/* no aspect-ratio: the row height comes from whichever side is taller and the
   panel fills it, so the two can never drift apart as copy changes */
.poster{position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:100%;
  display:flex;align-items:flex-end;padding:clamp(28px,3vw,40px);
  background:var(--c-poster-bg);border:1.5px dashed var(--c-poster-line)}
.poster h2{margin:0;font-size:clamp(2rem,3.2vw,2.875rem);line-height:1.02;
  letter-spacing:-.035em;font-weight:var(--fw-bold);color:var(--c-poster-fg)}
.poster .tag{position:absolute;left:clamp(28px,3vw,40px);top:clamp(28px,3vw,40px);
  font-size:var(--t-micro);font-weight:var(--fw-bold);letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--c-poster-tag)}
/* S4: one vertical rule down the side with the rows hanging off it, rather
   than a hairline chopping the list into six pieces. Goldenrod is a RULE here,
   never type — the one use the brand book allows on porcelain. */
.poster-sec .rows{border-left:2px solid var(--c-list-spine);padding-left:clamp(20px,2.4vw,30px)}
.poster-sec .row{padding:0;margin-bottom:clamp(24px,2.8vw,36px)}
.poster-sec .row:last-child{margin-bottom:0}
.poster-sec h3{font-size:22px;line-height:1.22;letter-spacing:-.025em;
  font-weight:var(--fw-semi);color:var(--text-strong);margin:0 0 5px}
.poster-sec p{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--fw-med);
  letter-spacing:var(--tr-body);color:var(--text-muted);margin:0}
@media(max-width:900px){
  .poster-sec .grid{grid-template-columns:1fr}
  .poster{min-height:0;aspect-ratio:16/9;align-items:center}
}

/* Moved off Advisory 12 Aug: Who It's For already made the same four "not a fit"
   points from the client's side, so only the accountant relationship needed
   carrying across. */
.psec.ink .keeps{margin-top:var(--s6);max-width:70ch;font-size:var(--t-body);
  line-height:var(--lh-body);font-weight:var(--fw-med);letter-spacing:var(--tr-body);
  color:var(--w-dim)}

/* ---------- outcomes on a line ----------
   Placeholder treatment, agreed 12 Aug: the simplest honest form while the
   infographic is parked. A single rule with five marks on it and the labels
   beneath. No icons, no circles, no colour rotation — nothing that has to be
   redesigned when the real graphic arrives.
   On mobile the line turns vertical; five labels cannot sit side by side at 390. */
.outcomes-line{padding:clamp(48px,6vw,80px) 0;background:var(--c-outline-bg)}
.outcomes-line h2{margin:0 0 clamp(28px,3.4vw,44px);font-size:22px;line-height:1.22;
  letter-spacing:-.025em;font-weight:var(--fw-semi);color:var(--text-strong)}
.outcomes-line ol{list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
/* the line itself, running behind the marks between the first and last */
.outcomes-line ol::before{content:"";position:absolute;top:6px;left:10%;right:10%;height:2px;
  background:var(--c-outline-rule)}
.outcomes-line li{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(14px,1.8vw,20px);position:relative}
.outcomes-line li::before{content:"";width:14px;height:14px;border-radius:50%;
  background:var(--c-outline-mark);position:relative;z-index:1;flex:0 0 auto}
.outcomes-line .lbl{font-size:17px;line-height:25px;font-weight:var(--fw-med);
  letter-spacing:var(--tr-body);color:var(--text-strong);max-width:20ch}
@media(max-width:900px){
  .outcomes-line ol{grid-template-columns:1fr;gap:0}
  .outcomes-line ol::before{display:none}
  .outcomes-line li{flex-direction:row;align-items:flex-start;text-align:left;
    gap:16px;padding-bottom:clamp(20px,4vw,28px)}
  .outcomes-line li:last-child{padding-bottom:0}
  .outcomes-line li::before{margin-top:6px}
  /* the vertical run of the line between marks */
  .outcomes-line li::after{content:"";position:absolute;left:6px;top:20px;bottom:0;width:2px;
    background:var(--c-outline-rule)}
  .outcomes-line li:last-child::after{display:none}
  .outcomes-line .lbl{max-width:none}
}

/* ---------- ABOUT — V1 language ----------
   Same ladder as Advisory: page title 110, sections 34, items 22.
   The three prose sections were identical in shape AND height (306 each),
   so each now takes a different form and a different ground. */
.about-story{padding:clamp(56px,7vw,99px) 0}
.about-story.deep{background:var(--c-isec-deep);color:var(--w)}
.about-story.warm{background:var(--c-page-warm)}
.about-story h2{margin:0;font-size:34px;line-height:41px;letter-spacing:var(--tr-h3);
  font-weight:var(--fw-semi);color:var(--text-strong)}
.about-story.deep h2{color:var(--w)}
.about-story p{margin:0;font-size:var(--t-lead);line-height:var(--lh-lead);
  font-weight:var(--fw-med);letter-spacing:var(--tr-lead);color:var(--text-muted)}
.about-story.deep p{color:var(--c-on-deep-body)}
.about-story .split{display:grid;grid-template-columns:minmax(0,424px) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:start}
.about-story .stack{display:flex;flex-direction:column;gap:var(--s5)}
/* the "how I work" section runs as prose at scale instead of a third split */
.about-story .prose{max-width:34ch;margin-top:var(--s6)}
.about-story .prose p{font-size:clamp(1.25rem,2.05vw,1.6875rem);line-height:1.5;
  letter-spacing:-.025em;color:var(--text-default)}
.about-story .prose p + p{margin-top:var(--s5)}

/* values — five short lines, ruled, no cards */
.values{padding:clamp(56px,7vw,99px) 0;background:var(--c-isec-pale)}
.values h2{margin:0 0 clamp(28px,3.4vw,44px);font-size:34px;line-height:41px;
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong)}
.values ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.values li{padding-top:16px;border-top:2px solid var(--c-list-spine)}
.values h3{margin:0 0 6px;font-size:22px;line-height:1.22;letter-spacing:-.025em;
  font-weight:var(--fw-semi);color:var(--text-strong)}
.values p{margin:0;font-size:var(--t-body);line-height:var(--lh-body);
  font-weight:var(--fw-med);letter-spacing:var(--tr-body);color:var(--text-muted)}
@media(max-width:900px){
  .about-story .split{grid-template-columns:1fr;gap:var(--s4)}
  .about-story .prose{max-width:none}
  .values ol{grid-template-columns:1fr;gap:var(--s5)}
}

/* ============================================================
   ABOUT — its own language.
   Advisory is about a service, so it got a system: poster panel,
   gold spine, colour bands. About is about a PERSON, so none of
   those appear here. Its devices are the portrait, Colleen's
   voice at scale, and an editorial alternation down the page.
   ============================================================ */

/* portrait-led head — not the full-bleed banner Advisory uses */
.bio-head{padding:clamp(140px,13vw,192px) 0 clamp(48px,6vw,80px);background:var(--c-isec-pale)}
.bio-head .grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);
  gap:clamp(36px,5vw,80px);align-items:center}
.bio-head .shot{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;
  background:var(--c-poster-bg);border:1.5px dashed var(--c-poster-line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.bio-head .shot svg{width:46px;height:36px;color:var(--c-ph-glyph)}
.bio-head .shot .ph-cap{color:var(--c-ph-cap)}
.bio-head h1{margin:0 0 var(--s5);font-size:var(--t-page-title);line-height:var(--lh-page-title);
  letter-spacing:var(--tr-page-title);font-weight:var(--fw-bold);color:var(--text-strong)}
.bio-head p{margin:0;font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--fw-med);
  letter-spacing:var(--tr-lead);color:var(--text-muted);max-width:52ch}

/* Colleen's voice at scale — the one page where she speaks, so she gets
   the serif and the room. Crete Round, matching the homepage statements. */
.bio-voice{padding:clamp(64px,8vw,110px) 0;background:var(--c-page-warm)}
.bio-voice blockquote{margin:0;max-width:26ch}
.bio-voice blockquote p{margin:0;font-family:var(--serif);
  font-size:clamp(1.625rem,3.1vw,2.625rem);line-height:1.26;letter-spacing:-.012em;
  color:var(--text-strong)}
.bio-voice .after{margin:var(--s7) 0 0;max-width:56ch;font-size:var(--t-lead);
  line-height:var(--lh-lead);font-weight:var(--fw-med);letter-spacing:var(--tr-lead);
  color:var(--text-muted)}

/* editorial alternation: copy and image trade sides down the page */
.bio-row{padding:clamp(56px,7vw,96px) 0;background:var(--c-isec-pale)}
.bio-row .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:clamp(36px,5vw,80px);align-items:center}
.bio-row.flip .grid{grid-template-columns:minmax(0,440px) minmax(0,1fr)}
.bio-row.flip .copy{order:2}
.bio-row h2{margin:0 0 var(--s5);font-size:34px;line-height:41px;letter-spacing:var(--tr-h3);
  font-weight:var(--fw-semi);color:var(--text-strong)}
.bio-row p{margin:0;font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--fw-med);
  letter-spacing:var(--tr-lead);color:var(--text-muted)}
.bio-row p + p{margin-top:var(--s5)}
.bio-row .shot{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1;
  background:var(--c-poster-bg);border:1.5px dashed var(--c-poster-line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.bio-row .shot svg{width:44px;height:34px;color:var(--c-ph-glyph)}
.bio-row .shot .ph-cap{color:var(--c-ph-cap)}
/* the facts sit under the background copy as a plain strip, not a list */
.bio-facts{margin-top:var(--s7);padding-top:var(--s5);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.bio-facts dt{margin:0 0 4px;font-size:var(--t-body-sm);line-height:1.4;font-weight:var(--fw-semi);
  letter-spacing:var(--tr-body);color:var(--text-strong)}
.bio-facts dd{margin:0;font-size:var(--t-body-sm);line-height:1.5;font-weight:var(--fw-med);
  letter-spacing:var(--tr-body);color:var(--text-muted)}

/* values — quiet two-column prose, no rules and no boxes */
.bio-values{padding:clamp(56px,7vw,96px) 0;background:var(--c-page-warm)}
.bio-values h2{margin:0 0 clamp(28px,3.4vw,44px);font-size:34px;line-height:41px;
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong)}
.bio-values ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,6vw,96px);
  row-gap:clamp(24px,3vw,36px);max-width:1040px}
.bio-values h3{margin:0 0 4px;font-size:20px;line-height:1.25;letter-spacing:-.022em;
  font-weight:var(--fw-semi);color:var(--text-strong)}
.bio-values p{margin:0;font-size:var(--t-body);line-height:var(--lh-body);
  font-weight:var(--fw-med);letter-spacing:var(--tr-body);color:var(--text-muted)}

@media(max-width:900px){
  .bio-head .grid,.bio-row .grid,.bio-row.flip .grid{grid-template-columns:1fr;gap:var(--s6)}
  .bio-row.flip .copy{order:0}
  .bio-head .shot,.bio-row .shot{aspect-ratio:4/3}
  .bio-facts,.bio-values ul{grid-template-columns:1fr}
}

/* ============================================================
   WHO IT'S FOR — its own language.
   The page is a mirror: twelve statements about the reader. So the
   statements ARE the page rather than sitting inside sections, set
   large enough to read as sentences about you.
   No poster panel or spine (Advisory), no portrait or serif quote
   (About). Its device is the yes/no inversion.
   ============================================================ */
.fit-head{padding:clamp(140px,13vw,192px) 0 clamp(40px,5vw,64px);background:var(--c-isec-pale)}
.fit-head h1{margin:0 0 var(--s5);font-size:var(--t-page-title);line-height:var(--lh-page-title);
  letter-spacing:var(--tr-page-title);font-weight:var(--fw-bold);color:var(--text-strong);
  max-width:14ch}
.fit-head p{margin:0;font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--fw-med);
  letter-spacing:var(--tr-lead);color:var(--text-muted);max-width:52ch}

.fit-block{padding:clamp(56px,7vw,96px) 0}
.fit-block.yes{background:var(--c-isec-pale)}
.fit-block.warm{background:var(--c-page-warm)}
.fit-block.no{background:var(--c-fit-no-bg);color:var(--w)}
.fit-block h2{margin:0 0 clamp(28px,3.4vw,44px);font-size:34px;line-height:41px;
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong)}
.fit-block.no h2{color:var(--w)}
.fit-block .lede{margin:-24px 0 clamp(28px,3.4vw,44px);font-size:var(--t-lead);
  line-height:var(--lh-lead);font-weight:var(--fw-med);letter-spacing:var(--tr-lead);
  color:var(--text-muted);max-width:56ch}
.fit-block.no .lede{color:var(--c-on-deep-body)}

/* the statements — large, second person, one per row */
.fit-list{list-style:none;margin:0;padding:0}
.fit-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,26px);
  align-items:baseline;padding:clamp(13px,1.6vw,19px) 0}
.fit-list .mk{width:22px;height:22px;flex:0 0 auto;align-self:start;margin-top:6px;
  color:var(--c-fit-yes-mark)}
.fit-block.no .fit-list .mk{color:var(--c-fit-no-mark)}
.fit-list .mk svg{width:100%;height:100%;display:block}
.fit-list .t{font-size:clamp(1.25rem,2.05vw,1.6875rem);line-height:1.36;letter-spacing:-.025em;
  font-weight:var(--fw-med);color:var(--text-strong)}
.fit-block.no .fit-list .t{color:var(--w)}

/* the inclusion note — quiet, wide, between the two halves */
.fit-note{padding:clamp(44px,5.5vw,72px) 0;background:var(--c-isec-tint)}
.fit-note p{margin:0;font-size:clamp(1.1875rem,1.85vw,1.4375rem);line-height:1.5;
  letter-spacing:-.022em;font-weight:var(--fw-med);color:var(--text-strong);max-width:60ch}

@media(max-width:900px){
  .fit-list .t{font-size:1.125rem;line-height:1.5}
  .fit-list .mk{width:18px;height:18px;margin-top:4px}
}

/* ============================================================
   COFFEE CHAT — its own language.
   This is the one page with a JOB rather than a story: book a time.
   So the calendar sits high, not after four sections of prose, and
   the supporting detail goes below for anyone who still needs it.
   It is also the only centred page on the site.
   No panel or spine (Advisory), no portrait or serif quote (About),
   no statement list (Who It's For).
   ============================================================ */
.chat-head{padding:clamp(140px,13vw,192px) 0 clamp(32px,4vw,48px);
  background:var(--c-page-warm);text-align:center}
.chat-head h1{margin:0 auto var(--s5);font-size:var(--t-page-title);
  line-height:var(--lh-page-title);letter-spacing:var(--tr-page-title);
  font-weight:var(--fw-bold);color:var(--text-strong);max-width:12ch}
.chat-head h1 .accent-phrase{color:var(--text-accent)}
.chat-head p{margin:0 auto;font-size:var(--t-lead);line-height:var(--lh-lead);
  font-weight:var(--fw-med);letter-spacing:var(--tr-lead);color:var(--text-muted);max-width:48ch}
/* the three facts, on one line — what someone checks before booking */
.chat-facts{background:var(--c-page-warm);padding:0 0 clamp(40px,5vw,64px)}
.chat-facts dl{display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(24px,4vw,64px);padding-top:clamp(24px,3vw,36px);
  max-width:820px;margin:0 auto}
.chat-facts div{text-align:center}
.chat-facts dt{margin:0 0 4px;font-size:var(--t-body-sm);line-height:1.4;
  font-weight:var(--fw-semi);letter-spacing:var(--tr-body);color:var(--text-strong)}
.chat-facts dd{margin:0;font-size:var(--t-body-sm);line-height:1.5;font-weight:var(--fw-med);
  letter-spacing:var(--tr-body);color:var(--text-muted)}

/* the calendar, high on the page and given real room */
.chat-book{padding:clamp(48px,6vw,80px) 0;background:var(--c-isec-pale)}
.chat-book h2{margin:0 0 var(--s5);font-size:34px;line-height:41px;letter-spacing:var(--tr-h3);
  font-weight:var(--fw-semi);color:var(--text-strong);text-align:center}
.chat-book .box{margin-top:clamp(24px,3vw,36px);border-radius:var(--r-lg);overflow:hidden;
  background:var(--c-page-warm);min-height:680px}

/* the detail below, for anyone who scrolls rather than books */
.chat-detail{padding:clamp(56px,7vw,96px) 0;background:var(--c-page-warm)}
.chat-detail .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(48px,7vw,110px);row-gap:clamp(36px,4.5vw,56px)}
.chat-detail h2{margin:0 0 clamp(28px,3.4vw,44px);font-size:34px;line-height:41px;
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong)}
.chat-detail h3{margin:0 0 10px;font-size:20px;line-height:1.25;letter-spacing:-.022em;
  font-weight:var(--fw-semi);color:var(--text-strong)}
.chat-detail p{margin:0;font-size:var(--t-body);line-height:var(--lh-body);
  font-weight:var(--fw-med);letter-spacing:var(--tr-body);color:var(--text-muted)}
.chat-detail ul{list-style:none;margin:0;padding:0}
.chat-detail li{position:relative;padding-left:22px;margin-bottom:10px;
  font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--fw-med);
  letter-spacing:var(--tr-body);color:var(--text-muted)}
.chat-detail li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:2px;
  background:var(--c-expect-dot)}
@media(max-width:900px){
  .chat-detail .grid{grid-template-columns:1fr}
  .chat-book .box{min-height:620px}
}

/* ---------- placeholder blocks awaiting client content ----------
   Same dashed treatment as the poster panel, so anything still open reads
   as deliberately unfinished at a glance. Remove .tbc when the copy lands. */
.tbc{border:1.5px dashed var(--c-poster-line);border-radius:var(--r-md);
  padding:clamp(18px,2.2vw,26px);position:relative}
.tbc .tbc-tag{display:block;font-size:var(--t-micro);font-weight:var(--fw-bold);
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--c-poster-tag);
  margin-bottom:10px}

/* Slot A — trust anchor, inside the panel beside the service list.
   The section heading moves out of the panel so the portrait can occupy it. */
.poster-sec > .wrap > h2{margin:0 0 clamp(28px,3.4vw,44px);font-size:34px;line-height:41px;
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong)}
.slot-a{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px);min-height:100%;
  background:var(--c-poster-bg);border:1.5px dashed var(--c-poster-line);
  border-radius:var(--r-lg);padding:clamp(24px,2.8vw,34px)}
.slot-a .shot{aspect-ratio:4/5;border-radius:var(--r-md);background:var(--c-page-tint);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.slot-a .shot svg{width:40px;height:32px;color:var(--c-ph-glyph)}
.slot-a .shot .ph-cap{color:var(--c-ph-cap)}
.slot-a p{margin:0;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--fw-med);
  letter-spacing:var(--tr-body);color:var(--text-muted)}

/* Slot B — how it starts. Four steps; the numeral is a label, not a bullet. */
.steps{padding:clamp(56px,7vw,96px) 0;background:var(--c-page-warm)}
.steps > .wrap > h2{margin:0 0 clamp(28px,3.4vw,44px);font-size:34px;line-height:41px;
  letter-spacing:var(--tr-h3);font-weight:var(--fw-semi);color:var(--text-strong)}
.steps ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.steps li{padding-top:16px;border-top:2px solid var(--c-step-rule)}
.steps .n{display:block;font-size:var(--t-body-sm);line-height:1.4;font-weight:var(--fw-bold);
  letter-spacing:var(--tr-body);color:var(--c-step-num);margin-bottom:8px}
.steps h3{margin:0 0 6px;font-size:20px;line-height:1.25;letter-spacing:-.022em;
  font-weight:var(--fw-semi);color:var(--text-strong)}
.steps p{margin:0;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--fw-med);
  letter-spacing:var(--tr-body);color:var(--text-muted)}

/* Slot C — who I work with. One line, compact strip. */
.wholine{padding:clamp(40px,5vw,64px) 0;background:var(--c-isec-pale)}
.wholine p{margin:0;font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--fw-med);
  letter-spacing:var(--tr-lead);color:var(--text-muted);max-width:70ch}

/* Conviction line — a statement moment, light rather than another dark band */
.conviction{padding:clamp(64px,8vw,110px) 0;background:var(--c-page-tint)}
.conviction p{margin:0;font-family:var(--serif);font-size:var(--t-statement-serif);
  line-height:var(--lh-statement-serif);letter-spacing:-.012em;color:var(--text-strong);
  max-width:24ch}
@media(max-width:900px){
  .steps ol{grid-template-columns:1fr;gap:var(--s5)}
}

/* Slot A as its own full-width section — moved out of the panel in Figma 14 Aug,
   so the panel goes back to carrying the section heading. */
.slot-a-sec{padding:clamp(40px,5vw,64px) 0 clamp(56px,7vw,96px);background:var(--c-isec-pale)}
.slot-a-sec .slot-a{min-height:0}
.slot-a-sec .slot-a p{max-width:1280px}

/* Slot B sits on porcelain now, not warm */
.steps{background:var(--c-isec-pale)}
/* the conviction line runs the full column rather than a 24ch measure */
.conviction p{max-width:none}

/* ---------- "What a fractional CFO is" — the definition the page was missing ----
   Advisory names the service and never defines it. Every direct competitor has an
   explainer; it is also the phrase a $2M owner searches before they know they need
   one. Set larger than body but below a section heading, so it reads as a plain
   answer rather than a pitch. */
.explainer{padding:clamp(48px,6vw,80px) 0;background:var(--c-page-warm)}
.explainer .grid{display:grid;grid-template-columns:minmax(0,424px) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);align-items:start}
.explainer h2{margin:0;font-size:34px;line-height:41px;letter-spacing:var(--tr-h3);
  font-weight:var(--fw-semi);color:var(--text-strong)}
.explainer p{margin:0;font-size:clamp(1.125rem,1.55vw,1.3125rem);line-height:1.5;
  letter-spacing:-.02em;font-weight:var(--fw-med);color:var(--text-default)}
.explainer p + p{margin-top:var(--s5)}
@media(max-width:900px){.explainer .grid{grid-template-columns:1fr;gap:var(--s4)}}

/* ---------- Coffee Chat form ----------
   Replaces the Calendly embed. Fields are exactly the ones the approved Privacy
   Policy already names: name, pronouns (optional), business name, email, message.
   Adding a field means the privacy copy is no longer accurate, so don't. */
.chat-form{max-width:720px;margin:0 auto}
.chat-form .row{margin-bottom:clamp(18px,2.2vw,24px)}
.chat-form .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,22px)}
.chat-form label{display:block;font-size:var(--t-body-sm);line-height:1.4;
  font-weight:var(--fw-semi);letter-spacing:var(--tr-body);color:var(--text-strong);
  margin-bottom:7px}
.chat-form .opt{font-weight:var(--fw-med);color:var(--text-muted)}
.chat-form input,.chat-form textarea{width:100%;font-family:var(--sans);
  font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--fw-med);
  letter-spacing:var(--tr-body);color:var(--text-strong);
  background:var(--c-field-bg);border:1.5px solid var(--c-field-line);
  border-radius:var(--r-md);padding:13px 15px;transition:border-color .25s var(--ease)}
.chat-form input:hover,.chat-form textarea:hover{border-color:var(--c-field-line-hover)}
.chat-form input:focus-visible,.chat-form textarea:focus-visible{
  border-color:var(--c-field-line-focus);outline:2px solid var(--c-field-line-focus);
  outline-offset:1px}
.chat-form textarea{min-height:160px;resize:vertical}
.chat-form .hint{margin:7px 0 0;font-size:var(--t-body-sm);line-height:1.5;
  font-weight:var(--fw-med);letter-spacing:var(--tr-body);color:var(--text-muted)}
/* spam trap: never shown, never announced, never tabbed to */
.chat-form .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.chat-form .send{margin-top:clamp(24px,3vw,32px);display:flex;align-items:center;
  gap:clamp(16px,2vw,24px);flex-wrap:wrap}
.chat-form .send .note{margin:0;font-size:var(--t-body-sm);line-height:1.5;
  font-weight:var(--fw-med);letter-spacing:var(--tr-body);color:var(--text-muted);
  max-width:34ch}
.chat-form button{border:0;cursor:pointer;font-family:var(--sans)}

/* ---------- measure floor (25 Aug) -------------------------
   Capping paragraphs one selector at a time kept missing things:
   first the ledes, then the panel intros, then every <li> on
   Privacy and About (106 characters at 1440). This is the floor
   instead — deliberately weak specificity (0,0,2), so any
   component that genuinely needs a longer line just says so and
   wins. See --measure in tokens.css for why it is set in em. */
main :is(p,li){max-width:var(--measure)}

/* ---------- no hairlines (26 Aug) --------------------------
   Ali: "i do not want hairlines anywhere on the site."

   21 decorative 1px rules removed across comp.css and poster.css
   — list dividers, section rules, the footer divider, the marquee
   band, the nav bar edge, the mobile menu separators, the photo
   note chip, the booking box outline. Where a rule was doing the
   separating, the spacing around it was opened up to take over.

   THREE 1px borders remain, all load-bearing rather than
   decorative. Removing them would be a defect, not a style
   change:

     poster.css  .po-field input / textarea
     layouts.css .L16 input / textarea
       Form fields. Without a border the input is an invisible
       rectangle on a near-matching ground; people cannot see
       where to type.

     home.css    .hp-link
       A link underline. Take it away and the link is
       distinguished from body text by colour alone, which is
       WCAG 1.4.1. It is an affordance, not a divider.

   27 Aug: a FOURTH border was found still standing — the teal
   2px rule above the last role row on Advisory
   (.po-roles .po-roles-mine). It was decorative, not
   load-bearing, and it is gone. check-page.py now catches this
   class of leftover automatically.

   If any of those three should also go, they need a replacement
   affordance designed first — a filled field, a button, an icon —
   not just a deletion. */

/* ---------- first-section clearance -------------------------
   Every page's first section has to clear the fixed header. This
   lived in layouts.css, which is the OLD 16-layout stylesheet that
   only privacy.html actually uses — but the rule is not namespaced,
   so four pages were loading 32KB of dead CSS for one line.
   QA caught it: dropping layouts.css from those pages changed every
   hero, and this was why. Rule moved here, where the shared chrome
   lives; layouts.css is now genuinely Privacy-only. */
main > section:first-child{padding-top:clamp(140px,13vw,192px)}

/* ---------- responsive photography (27 Aug) -----------------
   Every photograph now ships as <picture> with WebP + JPEG at four
   widths, so a phone downloads 87KB of the homepage hero and a
   retina laptop downloads 535KB of the same picture.
   <picture> is a container, not a box — display:contents keeps it
   out of the layout so the <img> positions against the section
   exactly as it did when it was a bare tag. */
picture{display:contents}

/* ============================================================
   PHONE PASS · 28 Aug, from Ali on a real device
   Everything below 560. Measured on the live preview at 375.
   ============================================================ */
@media (max-width:560px){

  /* 1 · the header was 100px tall on a 375 screen — a quarter of the
     first view spent on the logo before any content. The mark comes
     down from 56 to 40 and the bar tightens with it. */
  .mast{padding:14px var(--gut);gap:16px}
  header.solid .mast{padding-top:10px;padding-bottom:10px}
  .brand{gap:10px}
  .brand .mark{height:40px}
  header.solid .brand .mark{height:34px}

  /* 2 · THE TYPE FLOOR.
     Audited every text node under 15px at 430. The whole secondary
     layer of the site was sized for a 1440 screen and landed as fine
     print on a phone: buttons at 14.4, every footer link at 14.4, the
     copyright at 12, the photo caption at 10.6. None of it is a
     contrast problem — it is a size problem, and it is why the pages
     read as "not right" on a phone however the padding is set.
     16px is the floor for anything you are meant to read or tap. */
  /* .tl only. The BUTTON sizes live in poster.css and home.css, which
     both load after this file — setting them here lost on source order
     and silently did nothing. Sixth time source order has caught me in
     this project; the rule is: style a component in the sheet that
     owns it. */
  .tl{font-size:16px}

  footer .fcol a,.foot-place,.foot-brand p{font-size:16px;line-height:1.5}
  footer .fcol a{padding-block:3px}
  .foot-bot span,.foot-credit{font-size:13.5px}
  footer .fcol h2{font-size:11.5px}
}