/*
Copyright (c) 2025-2026 Systèmes Calibre Inc. All rights reserved.
Proprietary and confidential. See LICENSE at the repository root.

LeNir.AI, direction C: "Warm and personal". THE SHARED STYLESHEET for every page.
Ported into Eleventy 2026-09-24 from the approved mockup (LeNirAI-Redesign/site/style.css) with only the font
loading changed; tokens, selectors and values are the mockup's. Page CSS lives in css/<page>.css.
Headlines: Besley (Clarendon slab, 500-900), self-hosted from fonts/ (see the @font-face note below).
Body: Inter, self-hosted from the Strategy Hub brand kit (SIL OFL 1.1) so the slab-serif capital I (cv08) works:
"AI" in running text can never read as "Al". Google Fonts' Inter strips that feature, which is why it is not used here.
The ground is white. Colour is spent as whole blocks: forest, amber, and sage as the only quiet band.
The brand device: the amber full stop, from the wordmark into every headline that ends on one.
Round 2 (2026-09-23): white ground, credentials line, amber hours block, heading leading opened, Inter body.
Round 3 (2026-09-23): made into the shared system. Page builders do NOT edit this file: page-only CSS goes in
css/<page>.css, linked after this one. _components.html renders every component below; _shared.html holds the
canonical header, footer and script.
Round 4 (2026-09-23, consistency pass): the components the page builders flagged for promotion now live here
(.chapter, .page-hero.is-display, the .choices focus ring, cite, stacked .cta-band-lede, .avatar); Home's v3
overrides are folded into section 6 so no selector is defined in two files; the unused round-2 home blocks
(.close price pair, .work columns, .pull) are gone. A selector lives in exactly one file.
Round 5 (2026-09-23, review 07 fixes): three radii only (14px framed, 10px inputs, pill controls; bands square); the
price block loses its amber fill and keeps the price as one sentence; the tile covers (.tile-over, .tile-fig,
.tile-edit, .tile-say) move here from css/work.css so a project wears one cover on Home and Work; forest footer
with the dark logo; 44px tap targets on the "Or write to" lines; .mockup-only hides whole blocks with the notes.
Heading rule: each page gets one display moment (its h1) and at most one statement at --fs-h2; other section
heads use .h2-md. The CTA band's closing line is the exception every page shares.

Map of this file
  1  Fonts, tokens, base, layout
  2  Links, buttons, mockup notes
  3  Chrome: skip link, header + phone menu, language switch (+ the French header folds), footer
  4  Section bands and headings
  5  Shared components (inner pages): page hero (+ .is-display), section head, side head, chapter, split, prose,
     pull quote, rule list, Q&A, price block, facts, tags, portfolio cards, CTA band, form
  6  Home sections (hero, credentials, who, steps + session foot, hours, letter, testimonial slots). Reused
     elsewhere: .shapes (the hours, on Coaching). Home-only additions of round 4 are in css/home.css
*/

/* =====================================================================================================
   1  FONTS, TOKENS, BASE, LAYOUT
   ===================================================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
/* Besley, self-hosted (SIL OFL 1.1, fonts/OFL-Besley.txt). The mockup loaded it from Google Fonts; the built site
   cannot, because the privacy page promises no third-party requests. Built 2026-09-24 from the full variable TTF in
   the Strategy Hub brand kit with fontTools: Latin + Latin-1 + Latin Extended-A + punctuation, all layout features
   kept, wght axis 400-900. Do NOT swap in the brand kit's own Besley-Variable.woff2: it holds 158 ASCII-only glyphs
   and would drop every é, à, ç, « » and curly apostrophe in a headline into Georgia. */
@font-face { font-family: "Besley"; src: url("fonts/Besley-Latin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Besley"; src: url("fonts/Besley-Italic-Latin.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --forest: #0E3A24;        /* colour blocks + heading ink. White on it 12.7:1, amber on it 6.4:1 */
  --forest-2: #164A30;      /* raised surface on forest, behind the photo while it loads */
  --amber: #F2A93B;         /* fills (buttons, hours block, price block) and type ON FOREST only */
  --amber-hover: #F7BD62;
  --amber-dot: #E0901F;     /* the full stop and link underlines on white (graphic, not text) */
  --amber-ink: #9A5A06;     /* the only amber allowed as small text on white: 5.5:1 */
  --ground: #FFFFFF;        /* the page */
  --sage: #E9EDE2;          /* the one quiet band, and placeholder fills ("mist" in the brief is this colour) */
  --ink: #1D2A21;           /* body text: 14.9:1 on white, 7.5:1 on amber */
  --muted: #4E554A;         /* secondary text: 7.7:1 on white, 6.5:1 on sage */
  --on-forest: #FFFFFF;     /* type on forest */
  --on-forest-dim: #D6E0D8; /* secondary type on forest: 9.4:1 */
  --line: #DDE2D8;          /* decorative hairlines on white */
  --line-sage: #CBD2C4;     /* decorative hairlines on sage (--line disappears there) */
  --line-strong: #7C8478;   /* edges that must be seen: 3.9:1 on white, 3.3:1 on sage */
  --line-forest: rgba(255, 255, 255, 0.22);
  --error: #8E2A1B;         /* form error text: 8.4:1 on white */

  --display: "Besley", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Leading: 0.96 only for display that is always one line; everything that can wrap gets room for Besley's
     long descenders (the p and y were landing on the line below at 1.0). */
  --lh-one-line: 0.96;
  --lh-display: 1.04;
  --lh-heading: 1.08;

  /* Type scale (the home rules below keep their literal values; new components use these) */
  --fs-display: clamp(3.2rem, 7.1vw, 7rem);       /* home hero only */
  --fs-title: clamp(3rem, 6.4vw, 6.25rem);        /* inner-page h1 */
  --fs-h2: clamp(2.5rem, 5.2vw, 4.75rem);         /* .h2, a section that leads a page */
  --fs-h2-md: clamp(2.125rem, 3.9vw, 3.5rem);     /* .h2-md, a section inside a longer page */
  --fs-h3: 1.75rem;                               /* .h3, side heads, card titles */
  --fs-lede: 1.3125rem;
  --fs-lede-lg: 1.5rem;
  --fs-body: 1.125rem;
  --fs-prose: 1.1875rem;
  --fs-small: 0.9375rem;
  --fs-note: 0.8125rem;

  /* Space scale (brand sheet: 4 8 16 24 32 48 64 96 128) */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px;

  --measure: 34em;          /* long-form reading column: about 65-70 characters of Inter at the element's size.
                               (65ch measured ~77 characters: Inter's zero is wider than its average letter) */
  --maxw: 1200px;
  --gutter: 64px;
  --section: 8rem;
  /* Three radii and no others: 14px for anything framed (photos, screenshots, tiles, the form panel, testimonial
     slots, the nameplate), 10px for inputs and what sits inside a frame, the pill for buttons and tags. Colour bands
     run edge to edge and stay square. */
  --radius: 14px;           /* framed panels: the form panel, testimonial slots, the nameplate */
  --radius-media: 14px;     /* photos, screenshots, tiles */
  --radius-input: 10px;     /* inputs, the form status, a panel inside a frame */
}

@media (max-width: 1024px) { :root { --gutter: 40px; --section: 6rem; } }
@media (max-width: 640px)  { :root { --gutter: 16px; --section: 4.5rem; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--body);
  font-feature-settings: "cv08" 1;  /* slab-serif capital I, to match the wordmark */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); color: var(--forest); margin: 0; font-weight: 800; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
button, input, textarea, select { font: inherit; font-feature-settings: inherit; }
[id] { scroll-margin-top: 24px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
/* Book titles: Besley italic, because the self-hosted Inter has no italic (a browser-faked slant looks cheap) */
cite { font-family: var(--display); font-style: italic; font-weight: 500; letter-spacing: -0.005em; }

.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.container-narrow { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; }

/* The brand device: the full stop that ends a headline */
.stop { color: var(--amber-dot); }
.on-forest .stop { color: var(--amber); }
.on-amber .stop { color: var(--forest); }

/* Focus: always visible, colour chosen per ground */
:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; border-radius: 4px; }
.on-forest :focus-visible { outline-color: var(--amber); }
.on-amber :focus-visible { outline-color: var(--forest); }

/* =====================================================================================================
   2  LINKS, BUTTONS, MOCKUP NOTES
   ===================================================================================================== */

.link {
  color: var(--forest);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--amber-dot);
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
  transition: text-decoration-color .2s ease, color .2s ease;
  display: inline-block; padding-block: 11px; margin-block: -11px;
}
.link-inline { display: inline; padding: 0; margin: 0; }
.link:hover { text-decoration-color: var(--forest); }
.on-forest .link { color: var(--on-forest); text-decoration-color: var(--amber); }
.on-forest .link:hover { text-decoration-color: var(--on-forest); }
.on-amber .link { color: var(--forest); text-decoration-color: var(--forest); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border-radius: 999px; border: 2px solid transparent;
  font: 600 1.0625rem/1 var(--body); letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lg { min-height: 62px; padding: 0 38px; font-size: 1.1875rem; }
.btn-primary { background: var(--amber); color: var(--forest); }
.btn-primary:hover { background: var(--amber-hover); }
.btn-secondary { background: transparent; color: var(--forest); border-color: var(--forest); }
.btn-secondary:hover { background: var(--forest); color: var(--on-forest); }
.btn-ghost { background: transparent; color: var(--on-forest); border-color: var(--on-forest-dim); }
.btn-ghost:hover { background: var(--on-forest); color: var(--forest); border-color: var(--on-forest); }
/* On amber the primary would vanish: use .btn-forest there */
.btn-forest { background: var(--forest); color: var(--on-forest); }
.btn-forest:hover { background: var(--forest-2); }

/* A row of buttons. On a phone they stack, full width */
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }
@media (max-width: 640px) {
  .actions { flex-direction: column; margin-top: 32px; }
  .actions .btn { width: 100%; }
}

/* A round portrait on a colour band: <img class="avatar"> (Coaching's closing ask, the Contact reply). The page sets
   the size. The amber ring is the one frame Phil's face gets, the same wherever it appears */
.avatar {
  display: block; flex: none; aspect-ratio: 1 / 1;
  border-radius: 50%; object-fit: cover; object-position: 50% 26%;
  background: var(--forest-2); box-shadow: 0 0 0 4px var(--amber);
}

/* ---------- Mockup notes (decisions still open) ---------- */
.note {
  display: inline-block;
  font: 600 0.8125rem/1.35 var(--body);
  color: var(--amber-ink);
  background: #FFF8E9;
  border: 1.5px dashed currentColor;
  border-radius: 6px;
  padding: 3px 8px;
  vertical-align: middle;
}
.on-forest .note { color: var(--amber); background: transparent; }
.note-row { margin-top: 28px; }
.note-block {
  margin-top: 28px; max-width: 46rem;
  font-size: 0.9375rem; color: var(--muted);
  border-left: 3px dashed var(--line-strong); padding-left: 14px;
}
.on-forest .note-block { color: var(--on-forest-dim); border-left-color: var(--amber); }
.note a, .note-block a { color: inherit; font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
/* .mockup-only: a whole block that is on the page for Phil's review but would not ship yet (the empty testimonial
   slots, a portfolio card whose label or inclusion is still open). It hides with the notes, so ?clean shows the
   page as it would go live */
body.hide-notes .note, body.hide-notes .note-block, body.hide-notes .note-row,
body.hide-notes .mockup-only { display: none !important; }

/* =====================================================================================================
   3  CHROME: SKIP LINK, HEADER + PHONE MENU, FOOTER
   ===================================================================================================== */

.skip-link {
  position: absolute; left: 16px; top: -120px; z-index: 50;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  background: var(--forest); color: var(--on-forest); border-radius: 999px;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.skip-link:focus-visible { outline-color: var(--amber); }

/* ---------- Header ---------- */
.site-header {
  position: relative; z-index: 20;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; padding: 5px 0; }
.brand img { height: 34px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 36px; }
.site-nav a:not(.btn) {
  font-weight: 500; font-size: 1.0625rem; color: var(--ink); text-decoration: none;
  padding: 10px 0; border-bottom: 3px solid transparent; transition: border-color .2s ease;
}
.site-nav a:not(.btn):hover { border-bottom-color: var(--amber-dot); }
.site-nav a[aria-current="page"]:not(.btn) { color: var(--forest); font-weight: 600; border-bottom-color: var(--amber-dot); }
.header-actions { display: none; align-items: center; gap: 8px; }
.menu-toggle {
  min-height: 44px; min-width: 44px; padding: 0 16px;
  background: transparent; color: var(--forest);
  border: 2px solid var(--forest); border-radius: 999px;
  font-weight: 600; font-size: 1rem; cursor: pointer;
}
.menu-toggle[aria-expanded="true"] { background: var(--forest); color: var(--on-forest); }
/* English bar between 981 and 1100 px: "Articles" (2026-09-29) made it ~100 px longer, which wrapped "Work & projects"
   at ~985. Tighter gaps keep it on one line. French folds into the menu in this range (see below), so only English. */
@media (min-width: 981px) and (max-width: 1100px) { :where(html:lang(en)) .site-nav { gap: 24px; } }

/* The bar folds into the phone menu at 980 px (860 until 2026-09-24: the language switch made the English bar
   ~95 px longer, and it wraps "Work & projects" below ~955). French folds at 1100: see the language switch */
@media (max-width: 980px) {
  .header-row { min-height: 68px; }
  .brand img { height: 26px; }
  .header-actions { display: flex; }
  .header-actions .btn { min-height: 44px; padding: 0 20px; font-size: 1rem; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ground); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) {
    display: flex; align-items: center; min-height: 52px; padding: 0;
    font-size: 1.25rem; font-family: var(--display); font-weight: 700; color: var(--forest);
    border-bottom: 1px solid var(--line);
  }
  .site-nav a[aria-current="page"]:not(.btn) {
    border-bottom-color: var(--line);
    text-decoration: underline; text-decoration-color: var(--amber-dot);
    text-decoration-thickness: 3px; text-underline-offset: 7px;
  }
  .site-nav .btn { display: none; }
}

/* ---------- Language switch (2026-09-24) ----------
   One <div class="lang-switch"> inside .site-nav, after the Book button, on every page in both languages: EN then FR,
   always in that order. The current language is a <span aria-current="true">, the other is a link to the SAME page in
   the other language (hreflang + lang + aria-label). Desktop: a quiet pair at the right end of the bar; the current
   one wears the nav's amber underline. Phone: the last row of the open menu. The phone bar keeps only the logo, Book
   and Menu, because it has 11 px to spare at 390 and none at 360. Selectors carry .site-nav + :not(.btn) so they
   outrank the nav-link rules above at every width. */
.lang-switch { display: flex; align-items: center; margin-left: -18px; }
.site-nav .lang-switch a:not(.btn), .lang-switch > [aria-current] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 44px; padding: 0 8px;
  font: 500 0.875rem/1 var(--body); letter-spacing: 0.08em;
  color: var(--muted); border: 0; text-decoration: none;
}
.lang-switch > [aria-current] {
  font-weight: 700; color: var(--forest);
  text-decoration: underline; text-decoration-color: var(--amber-dot);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.site-nav .lang-switch a:not(.btn):hover {
  color: var(--forest);
  text-decoration: underline; text-decoration-color: var(--amber-dot);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
/* the hairline between EN and FR: 1 x 14 px, drawn on the second item so it needs no markup */
.lang-switch > * + * { background: linear-gradient(var(--line-strong), var(--line-strong)) left center / 1px 14px no-repeat; }
@media (max-width: 980px) {
  /* padding 0 13px keeps each target ~49 px wide; the -13px margin lines the E of EN up with the menu links */
  .lang-switch { margin: 10px 0 0 -13px; }
  .site-nav .lang-switch a:not(.btn), .lang-switch > [aria-current] { min-width: 0; min-height: 48px; padding: 0 13px; font-size: 1rem; }
}
/* French bar. Its nav is ~70 px longer ("Travaux et projets", "À propos", "Réservez une heure") and only fits from
   ~1080 px, so between 981 and 1100 French pages fold into the phone menu too: the same rules as the 980 px block,
   scoped to <html lang="fr-CA">. :where() adds no specificity, so each rule outranks its desktop twin by coming
   later, exactly as the 980 px block does. Change one block, change the other. */
@media (min-width: 981px) and (max-width: 1100px) {
  :where(html:lang(fr)) .header-row { min-height: 68px; }
  :where(html:lang(fr)) .brand img { height: 26px; }
  :where(html:lang(fr)) .header-actions { display: flex; }
  :where(html:lang(fr)) .header-actions .btn { min-height: 44px; padding: 0 20px; font-size: 1rem; }
  :where(html:lang(fr)) .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ground); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
  }
  :where(html:lang(fr)) .site-nav.is-open { display: flex; }
  :where(html:lang(fr)) .site-nav a:not(.btn) {
    display: flex; align-items: center; min-height: 52px; padding: 0;
    font-size: 1.25rem; font-family: var(--display); font-weight: 700; color: var(--forest);
    border-bottom: 1px solid var(--line);
  }
  :where(html:lang(fr)) .site-nav a[aria-current="page"]:not(.btn) {
    border-bottom-color: var(--line);
    text-decoration: underline; text-decoration-color: var(--amber-dot);
    text-decoration-thickness: 3px; text-underline-offset: 7px;
  }
  :where(html:lang(fr)) .site-nav .btn { display: none; }
  :where(html:lang(fr)) .lang-switch { margin: 10px 0 0 -13px; }
  :where(html:lang(fr)) .site-nav .lang-switch a:not(.btn),
  :where(html:lang(fr)) .lang-switch > [aria-current] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 0; min-height: 48px; padding: 0 13px;
    font: 500 1rem/1 var(--body); letter-spacing: 0.08em;
    color: var(--muted); border: 0; text-decoration: none;
  }
  :where(html:lang(fr)) .lang-switch > [aria-current] {
    font-weight: 700; color: var(--forest);
    text-decoration: underline; text-decoration-color: var(--amber-dot);
    text-decoration-thickness: 2px; text-underline-offset: 6px;
  }
}
/* French phone bar: "Réservez" is ~32 px wider than "Book", which squeezed the wordmark at 390. Tighter button,
   Menu and gaps, French pages only */
@media (max-width: 480px) {
  :where(html:lang(fr)) .header-row { gap: 16px; }
  :where(html:lang(fr)) .header-actions { gap: 6px; }
  :where(html:lang(fr)) .header-actions .btn { padding: 0 14px; }
  :where(html:lang(fr)) .menu-toggle { padding: 0 12px; }
}

/* ---------- Footer ----------
   Forest, with the dark wordmark (logo-dark.svg), so every page ends in colour. A white hairline separates it from
   a forest closing band above it. (.ruled is kept for a page that might end on white; it changes nothing now.) */
.site-footer {
  padding: 72px 0 40px;
  background: var(--forest); color: var(--on-forest-dim);
  border-top: 1px solid var(--line-forest);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer-grid img { height: 30px; width: auto; margin-bottom: 20px; }
.footer-grid p, .footer-grid li { font-size: 1rem; color: var(--on-forest-dim); line-height: 1.5; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li a, .footer-grid p a { display: inline-block; padding: 6px 0; min-height: 44px; line-height: 32px; }
.footer-grid a { color: var(--on-forest); text-decoration: none; border-bottom: 2px solid transparent; }
.footer-grid a:hover { border-bottom-color: var(--amber); }
.footer-grid a[aria-current="page"] { border-bottom-color: var(--amber); }
/* 320 px fix (2026-09-24, confirmed a mockup defect by its author): confidentialite@lenirai.com cannot wrap, so the
   Legal column's min-content width ran ~13 px past a 320 px phone on every page. `anywhere` (not `break-word`) also
   lowers the link's min-content size, which is what lets the grid column shrink. No effect wherever the address fits. */
.footer-grid a[href^="mailto:"] { overflow-wrap: anywhere; }
.footer-grid h2 { font: 700 1.125rem/1.3 var(--display); color: var(--on-forest); margin: 4px 0 10px; }
.footer-base {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-forest);
  font-size: 0.9375rem; color: var(--on-forest-dim);
}
.site-footer :focus-visible { outline-color: var(--amber); }
.site-footer .note { color: var(--amber); background: transparent; }
.notes-toggle {
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: transparent; color: var(--amber); border: 1.5px dashed currentColor;
  font-weight: 600; font-size: 0.875rem; cursor: pointer;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } }

/* =====================================================================================================
   4  SECTION BANDS AND HEADINGS
   A band is a full-width <section>. Pair the colour with its ground class so stops, links, focus and notes
   recolour: band-forest + on-forest, band-amber + on-amber. band-sage and band-white need nothing extra.
   ===================================================================================================== */

.section { padding-block: var(--section); }
.section-sm { padding-block: calc(var(--section) * 0.625); }
.section.flush-top, .section-sm.flush-top { padding-top: 0; }
.rule-top { border-top: 1px solid var(--line); }   /* two white sections in a row */
.band-forest { background: var(--forest); color: var(--on-forest); }
.band-amber { background: var(--amber); color: var(--ink); }
.band-sage { background: var(--sage); }
.band-white { background: var(--ground); }
.h2 {
  font-family: var(--display); color: var(--forest); text-wrap: balance;
  font-weight: 900;
  font-size: clamp(2.5rem, 5.2vw, 4.75rem);
  line-height: var(--lh-heading);
  letter-spacing: -0.025em;
}
.h2-md {
  font-family: var(--display); color: var(--forest); text-wrap: balance;
  font-weight: 900;
  font-size: var(--fs-h2-md);
  line-height: var(--lh-heading);
  letter-spacing: -0.022em;
}
.h3 { font-family: var(--display); color: var(--forest); text-wrap: balance; font-size: var(--fs-h3); font-weight: 800; line-height: 1.2; letter-spacing: -0.012em; }
.on-forest .h2, .on-forest .h2-md, .on-forest h3 { color: var(--on-forest); }
.on-amber .h2, .on-amber .h2-md, .on-amber h3 { color: var(--forest); }
.on-forest .h3 { color: var(--on-forest); }
.on-amber .h3 { color: var(--forest); }

/* A run-in head that opens a paragraph ("English or Quebec French, or a mix.") */
.lead-in { font: 800 1.1em/1 var(--display); color: var(--forest); letter-spacing: -0.005em; }
.on-forest .lead-in { color: var(--on-forest); }

/* =====================================================================================================
   5  SHARED COMPONENTS (inner pages)
   ===================================================================================================== */

/* ---------- Inner-page hero ----------
   <section class="page-hero band-forest on-forest"> (or white: no band class; or band-sage)
     <div class="container page-hero-inner">
       <div class="page-hero-text"><h1 class="page-title">…<span class="stop">.</span></h1><p class="page-lede">…</p></div>
       optional <figure class="page-hero-photo"> with .has-photo on the section
   Smaller than home's hero, still loud. One h1 per page. */
.page-hero { padding-block: 112px 104px; }
.page-title {
  font-family: var(--display); color: var(--forest); text-wrap: balance;
  font-weight: 900;
  font-size: var(--fs-title);
  line-height: var(--lh-display);
  letter-spacing: -0.028em;
  max-width: 15ch;
}
.on-forest .page-title { color: var(--on-forest); }
.on-amber .page-title { color: var(--forest); }
.page-lede { margin-top: 32px; max-width: 38rem; font-size: var(--fs-lede-lg); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.on-forest .page-lede { color: var(--on-forest-dim); }
.page-hero .actions { margin-top: 40px; }
.page-hero-meta { margin-top: 22px; font-size: 1.0625rem; color: var(--muted); }
.on-forest .page-hero-meta { color: var(--on-forest-dim); }
.page-hero.has-photo .page-hero-inner {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center;
}
.page-hero-photo {
  margin: 0; overflow: hidden; border-radius: var(--radius-media);
  aspect-ratio: 4 / 5; background: var(--forest-2);
}
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.page-hero.is-tall { min-height: min(calc(100vh - 84px), 760px); display: flex; align-items: center; }
@media (max-width: 900px) {
  .page-hero.has-photo .page-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .page-hero-photo { aspect-ratio: 1 / 1; max-width: 520px; }
}
@media (max-width: 640px) {
  .page-hero { padding-block: 60px 64px; }
  .page-title { font-size: 3rem; max-width: none; }
  .page-lede { margin-top: 22px; font-size: 1.25rem; }
  .page-hero .actions { flex-direction: column; margin-top: 32px; }
  .page-hero .actions .btn { width: 100%; }
  .page-hero.is-tall { min-height: 0; }
}
/* .is-display: a page that is one headline and little else (the 404). The title goes to home-hero size, because the
   standard .page-title stops at 6.25rem and would leave half the band empty */
.page-hero.is-display .page-title { font-size: clamp(3.6rem, 10.4vw, 9.5rem); max-width: none; line-height: var(--lh-one-line); }
.page-hero.is-display .page-lede { margin-top: 52px; font-size: clamp(1.3125rem, 1.9vw, 1.75rem); max-width: 46rem; }
.page-hero.is-display .actions { margin-top: 48px; }
@media (max-width: 640px) {
  .page-hero.is-display { padding-block: 72px 80px; }
  .page-hero.is-display .page-title { font-size: 3.6rem; line-height: var(--lh-display); }
  .page-hero.is-display .page-lede { margin-top: 24px; font-size: 1.25rem; }
  .page-hero.is-display .actions { margin-top: 36px; }
}

/* ---------- Section head: the h2 that opens a section, with an optional lede ---------- */
.section-head { max-width: 50rem; margin-bottom: 64px; }
.section-lede { margin-top: 22px; max-width: 40rem; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.on-forest .section-lede { color: var(--on-forest-dim); }
.on-amber .section-lede { color: var(--ink); }
@media (max-width: 640px) { .section-head { margin-bottom: 40px; } .section-lede { font-size: 1.1875rem; } }

/* ---------- Side head: heading left, text right, on a 2px forest rule (home's "Who it's for") ----------
   <div class="side-head"><h2 class="h3">Who it's for</h2><div class="side-head-body">…</div></div>
   Stack several: each one after the first gets space above it. */
.side-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px;
  padding-top: 36px; border-top: 2px solid var(--forest);
}
.side-head + .side-head { margin-top: 88px; }
.side-head-body > * + * { margin-top: 1em; }
.side-head-body p { font-size: var(--fs-prose); line-height: 1.65; max-width: var(--measure); }
.side-head-body .side-head-big { font-size: 1.4375rem; line-height: 1.5; max-width: 36rem; }
.on-forest .side-head { border-top-color: var(--amber); }
.on-forest .side-head-body p { color: var(--on-forest-dim); }
@media (max-width: 760px) {
  .side-head { grid-template-columns: 1fr; gap: 16px; padding-top: 28px; }
  .side-head + .side-head { margin-top: 64px; }
  .side-head-body p { font-size: 1.125rem; }
  .side-head-body .side-head-big { font-size: 1.25rem; }
}

/* ---------- Chapter: the side head with a section-size heading (About's career, Coaching's interview) ----------
   <div class="chapter"><h2 class="h2-md chapter-title">…</h2>
     <div class="chapter-body"><p class="chapter-big">…</p><p>…</p><p class="chapter-link"><a class="link">…</a></p></div></div>
   .is-small with an .h3 heading for a short closing chapter. */
.chapter {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 88px;
  padding-top: 44px; border-top: 2px solid var(--forest);
}
.chapter-title { max-width: 12ch; }
.chapter.is-small { padding-top: 36px; }
.chapter.is-small .chapter-title { padding-top: 4px; }
.chapter-body > * + * { margin-top: 1.1em; }
.chapter-body p { font-size: var(--fs-prose); line-height: 1.65; max-width: var(--measure); text-wrap: pretty; }
.chapter-body .chapter-big { font-size: 1.4375rem; line-height: 1.55; max-width: 36rem; color: var(--ink); }
.chapter-body .note-row { margin-top: 20px; }
.chapter-body .chapter-link { margin-top: 32px; }
.on-forest .chapter { border-top-color: var(--amber); }
.on-forest .chapter-body p { color: var(--on-forest-dim); }
.on-forest .chapter-body .chapter-big { color: var(--on-forest); }
@media (max-width: 860px) {
  .chapter { grid-template-columns: 1fr; gap: 22px; padding-top: 30px; }
  .chapter-title { max-width: 14ch; }
  .chapter.is-small { padding-top: 28px; }
}
@media (max-width: 640px) {
  .chapter-body p { font-size: 1.125rem; }
  .chapter-body .chapter-big { font-size: 1.25rem; }
}

/* ---------- Split: text + aside ----------
   <div class="split"><div class="split-main">…</div><aside class="split-aside">…</aside></div>
   .split-aside sits on a 2px rule. Add .is-sticky to keep it in view beside a long main column. */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 88px; row-gap: 48px; align-items: start; }
.split.is-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; }
.split-aside { border-top: 2px solid var(--forest); padding-top: 26px; }
.split-aside.is-sticky { position: sticky; top: 32px; }
.split-aside > * + * { margin-top: 14px; }
.split-aside p { font-size: 1.0625rem; line-height: 1.6; }
.split-aside .h3 { font-size: 1.5rem; }
.on-forest .split-aside { border-top-color: var(--amber); }
@media (max-width: 960px) {
  .split, .split.is-even { grid-template-columns: 1fr; }
  .split-aside.is-sticky { position: static; }
}

/* ---------- Prose: the long-form column (About's essay) ----------
   Ordinary body text, ~65 characters to the line. h2/h3, lists, links and .pull-quote inside it are styled. */
.prose { max-width: var(--measure); font-size: var(--fs-prose); line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose p, .side-head-body p, .qa-a p, .card-body p, .card-line, .cta-band-lede { text-wrap: pretty; }
.prose h2 {
  margin-top: 2.2em;
  font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.018em;
}
.prose h3 { margin-top: 1.9em; font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--amber-dot); }
.prose a:not(.btn):not(.link) {
  color: var(--forest); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--amber-dot);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.prose a:not(.btn):not(.link):hover { text-decoration-color: var(--forest); }
.prose strong, .prose b { font-weight: 700; color: var(--forest); }
.prose .pull-quote { margin-block: 1.8em; }
.on-forest .prose { color: var(--on-forest-dim); }
.on-forest .prose h2, .on-forest .prose h3, .on-forest .prose strong { color: var(--on-forest); }
@media (max-width: 640px) { .prose { font-size: 1.125rem; line-height: 1.65; } }

/* ---------- Pull quote ----------
   <blockquote class="pull-quote"><p>…</p></blockquote>. Phil's own words only, never a testimonial. */
.pull-quote {
  margin: 0; padding: 26px 0 0;
  border-top: 2px solid var(--forest);
  font: italic 700 clamp(1.75rem, 3vw, 2.5rem)/1.2 var(--display);
  color: var(--forest); letter-spacing: -0.01em; text-wrap: balance;
}
.pull-quote p { margin: 0; }
.pull-quote p + p { margin-top: 0.4em; }
.on-forest .pull-quote { color: var(--on-forest); border-top-color: var(--amber); }
.on-amber .pull-quote { border-top-color: var(--forest); }

/* ---------- Rule list: items on hairlines, with the amber dot ----------
   <ul class="rule-list"><li>…</li></ul> ("What you leave with") */
.rule-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--forest); }
.rule-list > li {
  position: relative; padding: 20px 0 20px 30px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-prose); line-height: 1.6;
}
.rule-list > li::before {
  content: ""; position: absolute; left: 3px; top: calc(20px + 0.8em);
  width: 10px; height: 10px; border-radius: 50%; background: var(--amber-dot);
  transform: translateY(-50%);
}
.band-sage .rule-list > li { border-bottom-color: var(--line-sage); }
.on-forest .rule-list { border-top-color: var(--amber); }
.on-forest .rule-list > li { border-bottom-color: var(--line-forest); color: var(--on-forest-dim); }
.on-forest .rule-list > li::before { background: var(--amber); }
.on-amber .rule-list > li { border-bottom-color: rgba(14, 58, 36, 0.25); }
.on-amber .rule-list > li::before { background: var(--forest); }
@media (max-width: 640px) { .rule-list > li { font-size: 1.125rem; padding: 18px 0 18px 26px; } .rule-list > li::before { top: calc(18px + 0.8em); } }

/* ---------- Q&A ----------
   <div class="qa"><div class="qa-item" id="which-ai"><h3 class="qa-q">…?</h3><div class="qa-a"><p>…</p></div></div></div>
   Open, not an accordion: there are few questions and every answer is worth reading. */
.qa { border-top: 2px solid var(--forest); }
.qa-item {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 64px;
  padding: 40px 0; border-bottom: 1px solid var(--line);
}
.qa-q { font-family: var(--display); color: var(--forest); text-wrap: balance; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.014em; }
.qa-a > * + * { margin-top: 1em; }
.qa-a p { font-size: var(--fs-prose); line-height: 1.65; max-width: var(--measure); }
.band-sage .qa-item { border-bottom-color: var(--line-sage); }
.on-forest .qa { border-top-color: var(--amber); }
.on-forest .qa-item { border-bottom-color: var(--line-forest); }
.on-forest .qa-a p { color: var(--on-forest-dim); }
@media (max-width: 860px) {
  .qa-item { grid-template-columns: 1fr; gap: 14px; padding: 30px 0; }
  .qa-a p { font-size: 1.125rem; }
}

/* ---------- Price block ----------
   <div class="price-block">
     <h2 class="h3 price-block-head">What it costs</h2>
     <p class="price-block-fig"><span class="num">$350</span> <span class="unit">an hour,</span> <span class="rest">in Canadian dollars, taxes extra.</span></p>
     <div class="price-block-body"><p>I invoice after we've worked.</p>…</div>
   </div>
   The price is ONE sentence (copy v3, choice 2): the figure carries the comma, never a full stop, and the rest of the
   sentence follows it, so a screen reader hears "$350 an hour, in Canadian dollars, taxes extra." On white it is
   loud from size alone, on a 2px forest rule: no fill, so amber stays for the band that says how long. Inside a
   band-amber section (Contact) the same figure sits on the amber. */
.price-block {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "head head" "fig body";
  column-gap: 88px; row-gap: 28px; align-items: end;
  padding-top: 40px; border-top: 2px solid var(--forest);
  color: var(--ink);
}
.price-block-head { grid-area: head; color: var(--forest); }
.price-block-fig { grid-area: fig; font-family: var(--display); font-weight: 900; color: var(--forest); }
.price-block-fig .num { display: block; font-size: clamp(5rem, 10vw, 8.5rem); line-height: 0.86; letter-spacing: -0.02em; }
.price-block-fig .unit { display: block; margin-top: 12px; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -0.025em; }
.price-block-fig .rest {
  display: block; margin-top: 14px;
  font: 500 var(--fs-lede)/1.4 var(--body); letter-spacing: 0; color: var(--ink);
}
.price-block-body { grid-area: body; max-width: 32rem; padding-bottom: 6px; }
.price-block-body p { font-size: 1.25rem; line-height: 1.5; }
.price-block-body p + p { margin-top: 14px; }
.price-block-body .btn { margin-top: 28px; }
@media (max-width: 860px) {
  .price-block { grid-template-columns: 1fr; grid-template-areas: "head" "fig" "body"; row-gap: 24px; padding-top: 32px; }
}
@media (max-width: 640px) {
  .price-block-fig .rest { font-size: 1.1875rem; }
  .price-block-body p { font-size: 1.1875rem; }
  .price-block-body .btn { width: 100%; }
}

/* ---------- Facts: checkable facts in words, on forest rules (never big numbers, never a stat bar) ----------
   <ul class="facts"><li><b>SpeechWorks and Nuance</b><span>Seven years building speech recognition</span></li>…</ul>
   Four across by default; .cols-3 or .cols-2 for fewer. Home's .creds band uses the same styles. */
.facts, .creds ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 32px;
}
.facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts li, .creds li { border-top: 2px solid var(--forest); padding-top: 18px; }
.facts b, .creds b { display: block; font: 800 1.25rem/1.25 var(--display); color: var(--forest); letter-spacing: -0.01em; }
.facts span, .creds span { display: block; margin-top: 6px; font-size: 1.0625rem; line-height: 1.45; color: var(--muted); }
.facts a, .creds a {
  color: inherit; text-decoration: underline; text-decoration-color: var(--amber-dot);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
  display: inline-block; padding-block: 10px; margin-block: -10px;
}
.facts a:hover, .creds a:hover { text-decoration-color: var(--forest); }
.on-forest .facts li { border-top-color: var(--amber); }
.on-forest .facts b { color: var(--on-forest); }
.on-forest .facts span { color: var(--on-forest-dim); }
.on-forest .facts a { text-decoration-color: var(--amber); }
@media (max-width: 1000px) { .facts, .facts.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .facts, .facts.cols-3, .facts.cols-2 { grid-template-columns: 1fr; gap: 22px; }
  .facts li, .creds li { padding-top: 14px; }
  .facts span, .creds span { margin-top: 2px; }
}

/* ---------- Tag: the small label on a portfolio card ("Hobby project"). Sentence case, never tracked caps ---------- */
.tag {
  display: inline-flex; align-items: center;
  min-height: 30px; padding: 3px 13px;
  font: 600 0.875rem/1.25 var(--body); letter-spacing: 0;
  color: var(--forest); background: var(--ground);
  border: 1.5px solid var(--forest); border-radius: 999px;
}
.on-forest .tag { color: var(--on-forest); background: transparent; border-color: var(--on-forest-dim); }

/* ---------- Portfolio cards ----------
   Blocks, not cards: no panel, no shadow. A media slot (real screenshot, or a typographic tile), then the words.
   A project wears ONE cover wherever it appears: Home's tiles are built from the same tile markup as its Work card.
   <div class="card-grid"> (two across, Home and Work; .cols-3 scales the covers down for three across)
     <article class="card" id="slug">
       <div class="card-media"><img …></div>
         or <div class="card-media card-tile band-forest on-forest"><p class="card-tile-text">…<span class="stop">.</span></p></div>
         or <div class="card-media shot">Real screenshot to come</div>
       <div class="card-meta"><span class="tag">Hobby project</span> <span class="note">OPEN 25</span></div>
       <h3 class="card-title">…</h3>
       <p class="card-line">one-liner (home tiles)</p>
       <div class="card-body"><p>…</p></div>
       <p class="card-link"><a class="link" href="…">…</a></p>
       <p class="card-small">…</p>
     </article> */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px 56px; }
.card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 40px; }
.card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.card > * { max-width: 100%; }
.card-media {
  width: 100%; aspect-ratio: 16 / 10; margin-bottom: 24px;
  overflow: hidden; border-radius: var(--radius-media);
  background: var(--sage); border: 1px solid var(--line);
}
.card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.card-media.shot { border: 1.5px dashed var(--line-strong); background: var(--ground); }
.card-tile { display: flex; align-items: flex-end; padding: 32px 36px; border: 0; }
/* .card-media's sage fill comes later in the cascade than the band classes, so each tile restates its colour */
.card-tile.band-forest { background: var(--forest); }
.card-tile.band-amber { background: var(--amber); }
.card-tile.band-sage { background: var(--sage); }
.card-tile.band-white { background: var(--ground); border: 1px solid var(--line); }
.band-sage .card-tile.band-sage { background: var(--ground); }  /* a sage tile would vanish on a sage band */
.card-tile-text {
  font: 900 clamp(1.75rem, 2.9vw, 2.625rem)/1.1 var(--display);   /* 1.1: room for Besley's descenders */
  letter-spacing: -0.022em; color: var(--forest); text-wrap: balance;
  max-width: 14ch;
}
.card-grid.cols-3 .card-tile-text { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.card-tile.on-forest .card-tile-text { color: var(--on-forest); }

/* The covers. Tile words are verbatim fragments of the card; the tile is aria-hidden because the card says them.
   .tile-over  a small italic line over a big one (card 1)
   .tile-fig   one giant figure with its words (kept for a card that needs it; at most one number-led cover)
   .tile-edit  the struck French edit (card 3): what the AI wrote, struck in amber, and what went out
   .tile-say   one statement, set big; .tile-say-long for a longer one, smaller and wider */
.tile-over, .tile-fig, .tile-edit { max-width: none; }
.tile-over .t-small {
  display: block; margin-bottom: 14px;
  font: italic 700 clamp(1.125rem, 1.6vw, 1.5rem)/1.25 var(--display); letter-spacing: -0.005em;
}
.tile-over .t-big {
  display: block; max-width: 11ch;
  font: 900 clamp(2.75rem, 4.6vw, 4.25rem)/1.02 var(--display); letter-spacing: -0.028em;
}
.card-tile.on-forest .t-small { color: var(--on-forest-dim); }
.card-tile.on-forest .t-big { color: var(--amber); }
.card-tile.on-amber .t-small { color: var(--ink); }
.card-tile.on-amber .t-big { color: var(--forest); }
.tile-fig .t-pre { display: block; font: italic 700 clamp(1.25rem, 1.8vw, 1.625rem)/1.1 var(--display); letter-spacing: -0.005em; }
.tile-fig .t-num { display: block; font: 900 clamp(5rem, 9vw, 8.25rem)/0.9 var(--display); letter-spacing: -0.035em; margin-top: 4px; }
.tile-fig .t-post { display: block; margin-top: 0.62em; font: 900 clamp(1.75rem, 2.6vw, 2.5rem)/1.04 var(--display); letter-spacing: -0.02em; }
.tile-edit .t-struck {
  display: block; margin-bottom: 12px;
  font: italic 600 clamp(1.125rem, 1.6vw, 1.4375rem)/1.3 var(--display); color: var(--muted);
  text-decoration: line-through; text-decoration-color: var(--amber-dot); text-decoration-thickness: 3px;
}
.tile-edit .t-big { display: block; font: 900 clamp(2.75rem, 4.6vw, 4.25rem)/1.02 var(--display); letter-spacing: -0.028em; color: var(--forest); }
.tile-say { font-size: clamp(2.5rem, 4.4vw, 4.25rem); max-width: 11ch; line-height: var(--lh-display); letter-spacing: -0.026em; }
.tile-say-long { font-size: clamp(2rem, 3.3vw, 3.125rem); max-width: 14ch; line-height: 1.1; }
/* Three across: every cover a size down */
.card-grid.cols-3 .tile-over .t-big, .card-grid.cols-3 .tile-edit .t-big { font-size: clamp(2rem, 3.2vw, 3rem); }
.card-grid.cols-3 .tile-over .t-small, .card-grid.cols-3 .tile-edit .t-struck { font-size: clamp(1rem, 1.2vw, 1.1875rem); }
.card-grid.cols-3 .tile-fig .t-num { font-size: clamp(3.5rem, 6vw, 5.5rem); }
.card-grid.cols-3 .tile-say { font-size: clamp(1.875rem, 3vw, 2.75rem); }
.card-grid.cols-3 .tile-say-long { font-size: clamp(1.5rem, 2.3vw, 2.125rem); }
/* A real image: a figure in the media slot, with a caption that ships when the picture needs one to be read right */
.card-media.is-shot img { object-position: 50% 50%; }
.card-media.is-drawing { position: relative; margin-inline: 0; margin-top: 0; background: #F8F8F8; }
.card-media-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 16px; background: rgba(255, 255, 255, 0.94); border-top: 1px solid var(--line);
  font-size: var(--fs-small); line-height: 1.4; color: var(--muted);
}

.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 30px; }  /* holds the row while a label is open */
.card-title { font-family: var(--display); color: var(--forest); text-wrap: balance; margin-top: 16px; font-size: var(--fs-h3); font-weight: 800; line-height: 1.15; letter-spacing: -0.012em; }
.card-grid.cols-3 .card-title { font-size: 1.5rem; }
.card-line { margin-top: 10px; font-size: 1.125rem; line-height: 1.5; color: var(--ink); }
.card-body { margin-top: 14px; }
.card-body p { font-size: 1.0625rem; line-height: 1.65; color: var(--ink); max-width: var(--measure); }
.card-body p + p { margin-top: 0.8em; }
.card-link { margin-top: 20px; }
.card-small { margin-top: 10px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.band-sage .card-media { border-color: var(--line-sage); }
.band-sage .card-media.shot { border-color: var(--line-strong); }
@media (max-width: 1000px) { .card-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .card-grid, .card-grid.cols-3 { grid-template-columns: 1fr; gap: 56px; }
  .card-title, .card-grid.cols-3 .card-title { font-size: 1.5rem; }
  /* One column: a floor instead of a fixed ratio, so a narrow phone grows the tile rather than clipping its words.
     16:10 by default; Home's tiles take 2:1 (css/home.css) to keep the phone page short */
  .card-tile { padding: 22px 22px; aspect-ratio: auto; min-height: calc((100vw - 2 * var(--gutter)) * 0.625); }
  .card-tile-text, .card-grid.cols-3 .card-tile-text { font-size: 1.875rem; }
  .tile-over .t-small, .card-grid.cols-3 .tile-over .t-small { font-size: 1.0625rem; margin-bottom: 8px; }
  .tile-over .t-big, .card-grid.cols-3 .tile-over .t-big { font-size: 2.625rem; }
  .tile-fig .t-num, .card-grid.cols-3 .tile-fig .t-num { font-size: 5rem; }
  .tile-fig .t-post { font-size: 1.75rem; }
  .tile-fig .t-pre { font-size: 1.25rem; }
  .tile-edit .t-struck, .card-grid.cols-3 .tile-edit .t-struck { font-size: 1.0625rem; }
  .tile-edit .t-big, .card-grid.cols-3 .tile-edit .t-big { font-size: 2.625rem; }
  .tile-say, .card-grid.cols-3 .tile-say { font-size: 2.375rem; }
  .tile-say-long, .card-grid.cols-3 .tile-say-long { font-size: 1.875rem; }
  .card-media-cap { padding: 8px 12px; font-size: 0.875rem; }
}
@media (max-width: 400px) {
  .tile-over .t-big, .tile-edit .t-big, .card-grid.cols-3 .tile-over .t-big, .card-grid.cols-3 .tile-edit .t-big { font-size: 2.25rem; }
  .tile-say, .card-grid.cols-3 .tile-say { font-size: 2.125rem; }
  .tile-say-long, .card-grid.cols-3 .tile-say-long { font-size: 1.75rem; }
  .tile-fig .t-num { font-size: 4.25rem; }
}

/* ---------- CTA band: the closing ask on an inner page ----------
   <section class="cta-band band-forest on-forest" aria-labelledby="…">
     <div class="container cta-band-inner"><div><h2 class="h2">…<span class="stop">.</span></h2><p class="cta-band-lede">optional</p></div>
       <div class="cta-band-actions"><a class="btn btn-primary btn-lg" href="contact.html">Book a first hour</a><p>Or write to …</p></div>
   For a price with the ask, put a .price-block in the section before the band (Coaching does). */
.cta-band { padding-block: 112px; }
.cta-band-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px 72px; align-items: end; }
.cta-band .h2 { max-width: 13ch; }
.cta-band-lede { margin-top: 24px; max-width: 32rem; font-size: var(--fs-lede); line-height: 1.55; color: var(--muted); }
.on-forest .cta-band-lede { color: var(--on-forest-dim); }
.on-amber .cta-band-lede { color: var(--ink); }
.cta-band-lede + .cta-band-lede { margin-top: 14px; }
.cta-band-actions p { margin-top: 24px; font-size: 1.1875rem; color: var(--muted); }
/* The address sits on its own line, so it gets the full 44px tap target (the .link padding trick) */
.cta-band-actions .link-inline { display: inline-block; padding-block: 11px; margin-block: -11px; }
.on-forest .cta-band-actions p { color: var(--on-forest-dim); }
.on-amber .cta-band-actions p { color: var(--ink); }
@media (max-width: 860px) { .cta-band-inner { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .cta-band { padding-block: 72px; }
  .cta-band-actions .btn { width: 100%; }
}

/* ---------- Form ----------
   <form class="form-panel">: .field (label + input/textarea/select), fieldset.field + .choices for radios,
   .field-hint, .form-status.is-success / .is-error (role="status"; add hidden until it applies). */
.form-panel { background: var(--sage); border-radius: var(--radius); padding: 44px 44px 40px; }  /* 14px, framed */
.field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; }
.field label, .field legend { font-weight: 600; font-size: 1rem; color: var(--forest); padding: 0; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea, .field select {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font-size: 1.0625rem; color: var(--ink); background: var(--ground);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-input);
}
.field textarea { min-height: 168px; resize: vertical; line-height: 1.5; }
.field textarea::placeholder, .field input::placeholder { color: #6B7266; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--forest); outline-offset: 1px; border-color: var(--forest); }
.field-hint { font-size: var(--fs-small); color: var(--muted); line-height: 1.45; }
fieldset.field { border: 0; padding: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.choices label {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px;
  background: var(--ground); border: 1.5px solid var(--line-strong); border-radius: 999px;
  font-weight: 500; color: var(--ink); cursor: pointer;
}
.choices label:has(input:checked) { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
.choices input { accent-color: var(--forest); width: 18px; height: 18px; margin: 0; }
/* The keyboard focus ring goes round the whole pill, not in a square round the 18px radio dot */
.choices input:focus-visible { outline: none; }
.choices label:has(input:focus-visible) { outline: 3px solid var(--forest); outline-offset: 3px; }
.form-panel .btn { margin-top: 6px; }
.form-panel .note { margin-top: 16px; }
.form-status {
  margin-top: 18px; padding: 14px 16px 14px 18px;
  border-radius: var(--radius-input); border-left: 4px solid var(--forest);
  background: var(--ground); font-weight: 600; line-height: 1.45;
}
.form-status.is-success { color: var(--forest); }
.form-status.is-error { color: var(--error); border-left-color: var(--error); }
.form-status[hidden] { display: none; }
@media (max-width: 640px) {
  .form-panel { padding: 28px 18px; }
  .form-panel .btn { width: 100%; }
}

/* =====================================================================================================
   6  HOME SECTIONS
   Reusable elsewhere: .shapes (inside band-amber on-amber, on Coaching), .shot, .slots (testimonial slots, never
   filled by us). Home's round-4 additions (the letter story, the six tiles) are in css/home.css.
   ===================================================================================================== */

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 52fr 48fr;
  min-height: min(calc(100vh - 84px), 860px);
  background: var(--forest);
}
.hero-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px 72px 96px max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  color: var(--on-forest);
}
.hero h1 {
  color: var(--on-forest);
  font-weight: 900;
  font-size: clamp(3.2rem, 7.1vw, 7rem);
  line-height: var(--lh-display);
  letter-spacing: -0.028em;
  max-width: 7.2ch;
}
.hero h1 .accent { color: var(--amber); }  /* whole-line accent: once per site, here only */
.hero-sub {
  margin-top: 36px; max-width: 30rem;
  font-size: 1.3125rem; line-height: 1.55; color: var(--on-forest-dim);
}
.hero-mail { margin-top: 22px; font-size: 1.0625rem; color: var(--on-forest-dim); }
.hero-mail a {
  color: var(--on-forest); font-weight: 600; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 5px;
  display: inline-block; padding-block: 11px; margin-block: -11px;   /* a 44px tap target on its own line */
}

.hero-photo { position: relative; margin: 0; min-height: 100%; background: var(--forest-2); }
.hero-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 16%;
}
.nameplate {
  position: absolute; right: 40px; bottom: 40px; z-index: 2;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--ground); color: var(--ink);
  padding: 20px 28px 20px 24px; border-radius: var(--radius);
  box-shadow: 0 18px 40px -18px rgba(14, 58, 36, 0.55);
}
.nameplate strong { font: 800 1.625rem/1.1 var(--display); color: var(--forest); letter-spacing: -0.01em; }
.nameplate span { font-size: 1.0625rem; color: var(--muted); }
.nameplate .note { margin-top: 8px; align-self: flex-start; color: var(--amber-ink); background: #FFF8E9; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-photo { order: -1; height: clamp(380px, 104vw, 620px); min-height: 0; }
  .hero-photo img { object-position: 50% 12%; }
  .nameplate { left: var(--gutter); right: auto; bottom: -34px; padding: 14px 20px 14px 18px; }
  .nameplate strong { font-size: 1.375rem; }
  .nameplate span { font-size: 1rem; }
  .hero-text { padding: 84px var(--gutter) 64px; }
  .hero h1 { max-width: none; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .hero h1 { font-size: clamp(3.7rem, 10vw, 5.75rem); }
  /* Tablet portrait: cap the photo so the headline and the button reach the fold */
  .hero-photo { height: min(42vh, 420px); }
  .hero-text { padding-top: 72px; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 3.6rem; }
  .hero-sub { font-size: 1.1875rem; margin-top: 24px; }
  .hero-mail { text-align: center; }
}

/* ---------- Credentials line (home band; its items share the .facts rules in section 5) ---------- */
/* Management first (review 07): CoachingOurselves and Henry Mintzberg is the credential that says "understands my
   world" to a consultant; speech recognition and the patent follow */
.creds { padding-top: 56px; }
.creds ul { grid-template-columns: 1.15fr 1.2fr 1fr 0.95fr; }
@media (max-width: 1000px) { .creds ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 640px) {
  .creds { padding-top: 48px; }
  .creds ul { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- Who it's for ---------- */
.who { padding-top: 6.5rem; }
.statement {
  font-weight: 800;
  font-size: clamp(2.25rem, 5.7vw, 5.25rem);
  line-height: var(--lh-heading);
  letter-spacing: -0.024em;
  max-width: 21ch;
}
.who-for {
  display: grid; grid-template-columns: 1fr 2fr; gap: 48px;
  margin-top: 80px; padding-top: 36px; border-top: 2px solid var(--forest);
}
.who-for h3 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.who-for p { font-size: 1.4375rem; line-height: 1.5; max-width: 36rem; }
.who-for .aside-line {
  margin-top: 22px;
  font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.2 var(--display);
  color: var(--forest); letter-spacing: -0.01em;
}
.who-for .note { margin-top: 14px; }
@media (max-width: 900px) { .who { padding-top: var(--section); } }
@media (max-width: 760px) {
  .who-for { grid-template-columns: 1fr; gap: 14px; margin-top: 48px; }
  .who-for p { font-size: 1.25rem; }
}

/* ---------- How it starts (numbered: a real sequence, home only) ----------
   Step 1, the interview, is how every engagement starts, and v3 asks for it to carry weight: it runs the full width
   on an amber rule, numeral beside the words, the lead-in set as a head. Steps 2 to 4 follow three across. */
.steps {
  list-style: none; margin: 72px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px;
}
.steps li { border-top: 1px solid var(--line-forest); padding-top: 24px; }
.steps li:first-child {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 48px; align-items: start;
  border-top: 2px solid var(--amber); padding-top: 32px;
}
.steps li:first-child .step-n { font-size: 8rem; margin: 0; }
.steps li:first-child p { max-width: 44rem; font-size: 1.3125rem; line-height: 1.55; color: var(--on-forest); }
.steps li:first-child .lead-in { display: block; margin: 6px 0 16px; font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; }
.step-n {
  display: block;
  font: 900 5.5rem/0.9 var(--display);
  color: var(--amber);
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.steps p { font-size: 1.125rem; line-height: 1.6; color: var(--on-forest-dim); }
.steps .lead-in { font: 800 1.3125rem/1 var(--display); color: var(--on-forest); letter-spacing: -0.005em; }
/* Under the steps: the account line and the price (stated once, calmly: Phil, 2026-09-23), then the two links.
   The two lines carry equal weight, body-large: the price stays calm without ranking below "which AI" */
.session-foot {
  margin-top: 72px; padding-top: 40px;
  border-top: 1px solid var(--line-forest);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: 28px 88px;
}
.session-facts { max-width: 46rem; }
.session-account, .session-price { font-size: var(--fs-lede); line-height: 1.55; color: var(--on-forest); text-wrap: pretty; }
.session-price { margin-top: 12px; }
.session-links { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-bottom: 6px; }
@media (max-width: 860px) {
  .session-foot { grid-template-columns: 1fr; }
  .session-links { flex-direction: row; flex-wrap: wrap; gap: 22px 40px; }
}
@media (max-width: 1100px) { .steps { gap: 48px 32px; } .steps li:first-child .step-n { font-size: 6.5rem; } }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 0; margin-top: 56px; }
  .steps li, .steps li:first-child { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; padding: 28px 0 32px; }
  .step-n, .steps li:first-child .step-n { font-size: 4rem; margin: 0; }
  .steps li:first-child .lead-in { margin: 4px 0 12px; font-size: 2rem; }
  .steps li:first-child p { font-size: 1.25rem; }
}
@media (max-width: 640px) {
  .steps { margin-top: 44px; }
  .steps li, .steps li:first-child { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; padding: 24px 0 28px; }
  .step-n, .steps li:first-child .step-n { font-size: 3.5rem; }
  .steps .lead-in { font-size: 1.1875rem; }
  .steps li:first-child .lead-in { font-size: 1.75rem; margin: 2px 0 10px; }
  .steps li:first-child p { font-size: 1.1875rem; }
  .session-foot { margin-top: 40px; padding-top: 32px; gap: 28px; }
  .session-account, .session-price { font-size: 1.1875rem; }
  .session-links { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* ---------- The hours (amber block, with the price). Reusable on Coaching ---------- */
.price-line { margin-top: 26px; font-size: 1.5rem; line-height: 1.45; color: var(--forest); font-weight: 500; }
.price-line b { font-weight: 700; }
.shapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; margin-top: 64px; }
.shape { border-top: 2px solid var(--forest); padding-top: 28px; }
.shape-fig { display: flex; align-items: baseline; gap: 12px; color: var(--forest); margin-bottom: 26px; }
.shape-fig b { font: 900 8rem/0.85 var(--display); letter-spacing: -0.04em; }
.shape-fig i { font: italic 700 1.875rem/1 var(--display); }
.shape h3 { font-size: 1.875rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.012em; margin-bottom: 14px; }
.shape p { color: var(--ink); max-width: 30rem; }
@media (max-width: 900px) {
  .shapes { grid-template-columns: 1fr; gap: 44px; margin-top: 44px; }
  .shape-fig b { font-size: 5.5rem; }
  .price-line { font-size: 1.1875rem; }
}

/* ---------- Who Phil is ---------- */
.letter { display: grid; grid-template-columns: 6fr 5fr; column-gap: 80px; row-gap: 48px; }
.letter .h2 { grid-column: 1 / -1; font-size: var(--fs-h2); line-height: var(--lh-one-line); }  /* --fs-h2, so it never twins the h1 */
.letter-body p { font-size: 1.25rem; line-height: 1.65; }
.letter-foot { margin-top: 36px; }
@media (max-width: 1000px) { .letter { grid-template-columns: 1fr; row-gap: 32px; } }
@media (max-width: 640px) {
  .letter .h2 { line-height: var(--lh-heading); }  /* wraps to two lines on a phone */
  .letter-body p { font-size: 1.1875rem; }
}

/* ---------- Screenshot slot: a dashed box standing in for a real screenshot (.card-media.shot) ---------- */
.shot {
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 20px;
  background: var(--ground);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-media);
  color: var(--muted); font-size: 0.9375rem; line-height: 1.4;
}
@media (max-width: 960px) { .shot { aspect-ratio: 16 / 9; } }

/* ---------- In their words (testimonial slots: no quote text until Phil supplies it) ---------- */
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 64px; }
.slot {
  display: flex; flex-direction: column;
  padding: 32px;
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--ground);
}
.slot-label { font-weight: 600; font-size: 0.9375rem; color: var(--amber-ink); }
.slot-quote {
  display: flex; align-items: center; justify-content: center;
  margin: 20px 0 24px; height: 150px;
  border-radius: var(--radius-input); background: var(--sage);
  font: italic 600 1.125rem/1.3 var(--display); color: var(--muted);
}
.slot-who { display: flex; align-items: center; gap: 16px; }
.slot-photo {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  border: 2px dashed var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: var(--muted);
}
.slot-who strong { display: block; font: 800 1.25rem/1.2 var(--display); color: var(--forest); }
.slot-who div span { display: block; font-size: 0.9375rem; color: var(--muted); margin-top: 2px; }
.slot .note { margin-top: auto; align-self: flex-start; }
@media (max-width: 960px) { .slots { grid-template-columns: 1fr; } }
/* The slots carry neutral labels only: no name is in this file (review 07). The whole section is .mockup-only, so
   ?clean hides it, as the built site does until at least one real quote is in */

/* =====================================================================================================
   MOTION PREFERENCES
   ===================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .btn:hover { transform: none; }
}