/* ── Fonts, self-hosted ──────────────────────────────────────────────────────
   Previously loaded from fonts.googleapis.com. That cost a render-blocking
   stylesheet on a third-party origin (PageSpeed measured 750ms), and put the
   font files one level deeper in the critical path: the browser could not even
   discover them until that stylesheet came back. Serving them ourselves makes
   the fonts a direct, parallel request from an origin already connected.

   Latin subset only — the site is lang="en". Google also ships cyrillic,
   cyrillic-ext, latin-ext and vietnamese cuts; none are used here.

   Cormorant Garamond is a VARIABLE font: one file covers 300-600, which is why
   a single @font-face declares a weight range rather than four files. Barlow is
   static, so each weight is its own file. Six files in total, where the Google
   CSS described ten faces.

   font-display: swap means text paints immediately in the fallback and swaps
   when the webfont lands, so a slow font never blocks content.
   ────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-roman.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/barlow-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/barlow-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ambitura Mentoring — palette taken from the green / black / gold mountain on the business card */
:root {
  --ink: #050608;
  --ink-2: #0a0f0d;
  --forest-900: #0d1a15;
  --forest-800: #12261e;
  --forest-700: #1c3a30;
  --forest-500: #3f6350;
  --sage: #7f9f8b;
  --gold: #d9ac6c;
  --gold-bright: #e9bd7d;
  --gold-dim: rgba(217, 172, 108, .35);
  --paper: #f3efe6;
  --text: #d6d2c7;
  --text-dim: #a8a59b;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --header-h: 76px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-bright); }

:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 2px; }

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

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--ink); padding: 10px 16px; border-radius: 4px; text-decoration: none; font-weight: 500; }
.skip-link:focus { top: 12px; color: var(--ink); }

/* ── Header ─────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(5, 6, 8, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(217, 172, 108, .18);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--gold); }
.brand:hover { color: var(--gold-bright); }
/* The logo is the painterly mountain from the brand artwork — a wide mark
   (about 3.52 : 1), not the square emblem that used to sit here. It is a raster
   image: the supplied "SVG" was a 3072px PNG wrapped in SVG, so there is no
   vector version to scale. The asset is 140px tall, which covers the 34px
   display size at 4x device pixel ratio.
   Height is fixed and width follows the aspect ratio, so no layout shift. */
.brand-logo { height: 34px; width: auto; display: block; }
.brand-logo-small { height: 26px; }
@media (max-width: 460px) {
  /* The wordmark and the nav toggle both need room on a narrow phone. */
  .brand-logo { height: 24px; }
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--serif); font-size: 1.55rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }

.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.site-nav a {
  font-family: var(--sans); font-weight: 500; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text); text-decoration: none; padding: 6px 0; position: relative;
}
.site-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.site-nav a:hover { color: var(--gold-bright); }
.site-nav a:not(.nav-cta):hover::after { transform: scaleX(1); }
.site-nav .nav-cta { color: var(--gold); border: 1px solid var(--gold-dim); padding: 9px 20px; border-radius: 999px; transition: background .25s, color .25s, border-color .25s; }
.site-nav .nav-cta:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; color: var(--gold); position: relative; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .3s ease, opacity .2s ease;
}
.nav-toggle-bars { top: 21px; }
.nav-toggle-bars::before { left: 0; right: 0; top: -7px; }
.nav-toggle-bars::after  { left: 0; right: 0; top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: rgba(5, 6, 8, .97); border-bottom: 1px solid rgba(217, 172, 108, .2);
    padding: 12px var(--gutter) 28px;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .site-nav.open { transform: none; opacity: 1; visibility: visible; }
  .site-nav a { width: 100%; padding: 16px 0; font-size: .9rem; border-bottom: 1px solid rgba(217, 172, 108, .12); }
  .site-nav .nav-cta { margin-top: 18px; text-align: center; border-bottom: 1px solid var(--gold-dim); }
  .site-header { background: rgba(5, 6, 8, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .brand-name { font-size: 1.3rem; letter-spacing: .2em; }
}

/* ── Hero ───────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; align-items: center;
  padding: calc(var(--header-h) + 40px) 0 clamp(300px, 30vw, 380px);
  background:
    radial-gradient(70% 55% at 78% 62%, rgba(44, 84, 66, .32), transparent 70%),
    linear-gradient(180deg, #050608 0%, #070b09 100%);
}
.hero-mountain { position: absolute; inset: auto 0 0 0; height: clamp(300px, 46vw, 560px); z-index: -1; }
.hero-mountain img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.hero-inner { position: relative; }

.eyebrow { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--text); letter-spacing: .04em; margin: 0 0 clamp(24px, 5vw, 48px); opacity: .9; }

.hero-title { margin: 0; font-family: var(--serif); font-weight: 300; color: var(--paper); font-size: clamp(3.4rem, 11vw, 8.2rem); line-height: .98; letter-spacing: -.01em; }
.hero-title span { display: block; }
/* The tagline's periods are plain text. They were once empty <i> elements with a CSS-drawn
   square, so copied text, scraped text and screen readers all got "Flow Focus Ascend"; putting
   a transparent period inside the square then broke for anyone holding the week-cached old
   stylesheet, who saw the square AND the glyph. /css/styles.css is unversioned and cached for
   a week, so markup and CSS cannot be changed in lockstep. Keep the punctuation in the text. */

.hero-lede { max-width: 30ch; margin: clamp(24px, 4vw, 40px) 0 0; font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.4; color: var(--text); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4vw, 44px); }

.hero-inner > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero-inner > :nth-child(2) { animation-delay: .08s; }
.hero-inner > :nth-child(3) { animation-delay: .18s; }
.hero-inner > :nth-child(4) { animation-delay: .28s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ── Buttons ────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 500; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: 15px 28px; border-radius: 999px; border: 1px solid var(--gold); transition: background .25s, color .25s, transform .25s, border-color .25s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-solid { background: var(--gold); color: var(--ink); }
.btn-ghost { background: rgba(5, 6, 8, .35); color: var(--gold); border-color: var(--gold-dim); }

/* Buttons are genuinely interactive, so the colour change is kept everywhere —
   it confirms a tap registered. The 2px lift is pointer-only: on touch it would
   latch after the tap and stay raised. */
.btn-solid:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); }
@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover, .btn-ghost:hover { transform: translateY(-2px); }
}
/* A pressed state, so a tap gives feedback on touch where hover cannot. */
.btn-solid:active, .btn-ghost:active { transform: translateY(1px); }

/* ── Sections ───────────────────────────────────── */
.section { padding: clamp(72px, 11vw, 140px) 0; position: relative; }
.section-tint {
  background:
    linear-gradient(180deg, rgba(18, 38, 30, .0) 0%, rgba(18, 38, 30, .7) 12%, rgba(18, 38, 30, .7) 88%, rgba(18, 38, 30, 0) 100%);
}

.section-head { margin-bottom: clamp(36px, 6vw, 64px); max-width: 720px; }
.section-head.center { margin-inline: auto; text-align: center; }
.kicker { margin: 0 0 14px; font-weight: 500; font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
h2 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--paper); font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.1; }
h3 { margin: 0 0 12px; font-family: var(--serif); font-weight: 500; color: var(--paper); font-size: 1.6rem; line-height: 1.2; }
.rule { display: block; width: 72px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin-top: 26px; }
.center .rule { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); width: 120px; }

.icon { display: inline-flex; width: 52px; height: 52px; color: var(--gold); margin-bottom: 20px; }
/* The numeral on a numbered card (the concierge inclusions on the guide).
   Serif and gold so it reads as a figure in the packet, not a list bullet. */
.card-num { display: block; margin: 0 0 12px; font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--gold); }
.icon svg { width: 100%; height: 100%; }

/* Essence */
.essence-grid { display: grid; gap: clamp(32px, 6vw, 80px); grid-template-columns: 1fr; align-items: start; }
.essence-intro p { font-family: var(--serif); font-size: 1.5rem; line-height: 1.4; color: var(--text); margin: 0; max-width: 22ch; }
.skills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.skills li {
  position: relative; padding: 18px 20px 18px 46px; border: 1px solid rgba(217, 172, 108, .2); border-radius: 10px;
  background: linear-gradient(135deg, rgba(28, 58, 48, .55), rgba(13, 26, 21, .55));
  font-weight: 400; color: var(--paper);
}
.skills li::before {
  content: ""; position: absolute; left: 20px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: var(--gold); transform: rotate(45deg);
}
/* These are the names of skills, not links, filters or toggles — clicking one
   does nothing. They used to lift and change border colour on hover, which made
   them read as buttons. On touch it was worse: :hover latches after a tap, so a
   skill stayed lit as though it had been selected. No hover, no transition. */
@media (min-width: 900px) { .essence-grid { grid-template-columns: .8fr 1.4fr; } }

/* Cards */
.cards { display: grid; gap: 22px; }
.card {
  padding: clamp(26px, 3.2vw, 40px); border: 1px solid rgba(217, 172, 108, .2); border-radius: 14px;
  background: linear-gradient(160deg, rgba(28, 58, 48, .55) 0%, rgba(8, 14, 12, .75) 100%);
  transition: border-color .3s, transform .3s;
}
/* NO blanket .card:hover. A lift-and-glow on hover reads as "this is clickable",
   so it belongs only on cards that actually go somewhere. Four cards on the home
   page (Ambition + Nature, Relational Approach, Strategies for Growth,
   Mindfulness Practices) are plain prose with no link; they used to lift, which
   invited a click that did nothing.

   The two interactive kinds are `.link-cards .card` (inner pages) and
   `.home-who-card` (home page). Both wrap their whole area in a stretched link
   (`h3 a::after { inset: 0 }`), so the entire card really is one click target —
   the hover lift is honest there.

   Only apply it where a pointer can truly hover. On a touchscreen :hover latches
   after a tap and stays stuck until you tap elsewhere, leaving the card lit up as
   though it had been selected. That was the worst of it on mobile. */
@media (hover: hover) and (pointer: fine) {
  .link-cards .card:hover,
  .home-who-card:hover { border-color: rgba(217, 172, 108, .55); transform: translateY(-4px); }
}
.card p { margin: 0 0 14px; color: var(--text); }
.card p:last-child { margin-bottom: 0; }
@media (min-width: 760px) { .cards.two { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cards.three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px) and (max-width: 899px) { .cards.three { grid-template-columns: repeat(2, 1fr); } .cards.three .card:last-child { grid-column: 1 / -1; } }

.pull { margin: clamp(48px, 8vw, 88px) auto 0; max-width: 780px; text-align: center; }
.pull p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--gold-bright); font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.3; }
.pull footer { margin-top: 20px; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text-dim); font-weight: 500; }

/* About */
.about-grid { display: grid; gap: clamp(36px, 6vw, 80px); grid-template-columns: 1fr; align-items: start; }
.about-mark {
  text-align: center; padding: clamp(28px, 4vw, 44px); border: 1px solid rgba(217, 172, 108, .25); border-radius: 14px;
  background: radial-gradient(90% 70% at 50% 30%, rgba(44, 84, 66, .4), rgba(5, 6, 8, .5));
}
.about-mark img { width: min(220px, 60%); height: auto; margin: 0 auto 24px; }
.about-name { margin: 0; font-family: var(--serif); font-size: 1.6rem; color: var(--paper); }
.about-role { margin: 4px 0 0; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.about-body p { margin: 0 0 20px; }
.about-body .kicker { margin-bottom: 14px; }
.about-body .rule { margin-bottom: 32px; }
.about-body .lead { font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.5; color: var(--paper); }
@media (min-width: 900px) { .about-grid { grid-template-columns: 320px 1fr; } .about-mark { position: sticky; top: calc(var(--header-h) + 24px); } }

/* Contact */
.contact { padding-bottom: clamp(260px, 34vw, 420px); overflow: hidden; isolation: isolate; text-align: center; }
.contact-mountain { position: absolute; inset: auto 0 0 0; height: clamp(240px, 36vw, 440px); z-index: -1; opacity: .95; }
.contact-mountain img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.contact-name { margin: 0 0 32px; font-family: var(--serif); font-size: 1.5rem; color: var(--paper); }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* Footer */
.site-footer { border-top: 1px solid rgba(217, 172, 108, .2); background: #030405; padding: 44px 0; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.brand-small .brand-name { font-size: 1.2rem; }
.footer-line { margin: 0; font-family: var(--serif); font-size: 1.15rem; color: var(--text); }
.footer-fine { margin: 0; font-size: .82rem; color: var(--text-dim); letter-spacing: .04em; }

/* ── Scroll reveal (only when JS is on) ─────────── */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .cards .reveal:nth-child(2), .js .skills.reveal { transition-delay: .08s; }
.js .cards .reveal:nth-child(3) { transition-delay: .16s; }

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

/* ── Generated footer (built from src/partials/footer.html) ─────────── */
.footer-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px 40px; width: 100%; max-width: 860px; margin: 14px 0 6px; text-align: center; }
.footer-group { min-width: 0; }
.footer-heading { margin: 0 0 12px; font-family: var(--sans); font-weight: 500; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.footer-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-group li { margin: 0; padding: 0; }
.footer-group a { color: var(--text); font-size: .92rem; text-decoration: none; overflow-wrap: anywhere; }
.footer-group a:hover, .footer-group a:focus-visible { color: var(--gold-bright); text-decoration: underline; }
.footer-email { margin: 0; font-size: .92rem; overflow-wrap: anywhere; }
.footer-email a { color: var(--text); text-decoration: none; }
.footer-email a:hover, .footer-email a:focus-visible { color: var(--gold-bright); text-decoration: underline; }
@media (max-width: 520px) {
  .site-footer { padding: 36px 0; }
  .footer-nav { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Current page in the primary nav ─────────── */
.site-nav a[aria-current="page"] { color: var(--gold-bright); }
.site-nav a[aria-current="page"]:not(.nav-cta)::after { transform: scaleX(1); background: var(--gold-bright); }
.site-nav .nav-cta[aria-current="page"] { border-color: var(--gold); background: rgba(217, 172, 108, .12); }
.site-nav .nav-cta[aria-current="page"]:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* ── Home page ─────────────────────────────────── */
.hero-h1 { margin: clamp(22px, 3.5vw, 36px) 0 0; max-width: 26ch; font-family: var(--serif); font-weight: 400; color: var(--paper); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.2; }
.hero-h1 + .hero-lede { margin-top: 14px; }
.hero-serving { margin: 18px 0 0; font-size: .95rem; letter-spacing: .04em; color: var(--text); }
.hero-inner > :nth-child(5) { animation-delay: .38s; }
.hero-inner > :nth-child(6) { animation-delay: .48s; }

/* Laptop/desktop: keep the buttons above the fold. The display title scales with the
   viewport height as well as the width (it never grows past its original 8.2rem), and the
   H1, lede and serving line are set on fewer lines. Scoped to the home hero only. */
@media (min-width: 900px) {
  .page-home .hero { padding-top: calc(var(--header-h) + 24px); }
  .page-home .hero .eyebrow { margin-bottom: clamp(12px, 2.4vh, 28px); }
  .page-home .hero-title { font-size: clamp(3.4rem, min(11vw, 14.3vh), 8.2rem); line-height: .94; }
  .page-home .hero-h1 { max-width: none; margin-top: clamp(14px, 2.4vh, 26px); }
  .page-home .hero-h1 + .hero-lede { max-width: 44ch; margin-top: 8px; font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
  .page-home .hero-serving { margin-top: 12px; }
  .page-home .hero-actions { margin-top: clamp(16px, 3vh, 26px); }
}

.home-more { margin: 18px 0 0; font-weight: 500; letter-spacing: .04em; }
.home-more a::after { content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: .45em; transition: transform .25s ease; }
.home-more a:hover::after, .home-more a:focus-visible::after { transform: translateX(4px); }
.essence-intro .home-more { font-family: var(--sans); font-size: 1rem; max-width: none; margin-top: 18px; }
.home-more-center { text-align: center; margin: clamp(28px, 4vw, 44px) 0 0; }
.home-more-center a::after { content: none; }

/* Who I work with: five linked cards, direct children of .cards.
   These carry the same arrow as .link-cards on the inner pages. Without it they
   were visually identical to the four prose-only cards further down the home
   page, so there was no way to tell which cards went somewhere. The arrow is the
   one consistent signal across the site for "this card is a link". */
.home-who { grid-template-columns: 1fr; }
.home-who-card { position: relative; padding-bottom: calc(clamp(26px, 3.2vw, 40px) + 26px); }
.home-who-card h3 { font-size: 1.5rem; }
.home-who-card h3 a { color: var(--paper); text-decoration: none; }
.home-who-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.home-who-card:hover h3 a, .home-who-card h3 a:focus-visible { color: var(--gold-bright); }
.home-who-card h3 a:focus-visible::after { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.home-who-card::after {
  content: "\2192"; content: "\2192" / ""; position: absolute; right: clamp(24px, 3vw, 36px); bottom: clamp(18px, 2.4vw, 26px);
  color: var(--gold); line-height: 1; transition: transform .25s ease; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .home-who-card:hover::after { transform: translateX(4px); }
}
@media (min-width: 620px) {
  .home-who { grid-template-columns: repeat(2, 1fr); }
  .home-who .home-who-card:last-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .home-who { grid-template-columns: repeat(6, 1fr); }
  .home-who .home-who-card { grid-column: span 2; }
  .home-who .home-who-card:nth-child(n+4) { grid-column: span 3; }
}
.js .home-who .home-who-card:nth-child(4) { transition-delay: .08s; }
.js .home-who .home-who-card:nth-child(5) { transition-delay: .16s; }

/* Care-team band: wider than a card */
.care-band {
  display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start;
  margin-top: clamp(22px, 3vw, 34px); padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(217, 172, 108, .35); border-radius: 14px;
  background: linear-gradient(135deg, rgba(28, 58, 48, .7) 0%, rgba(8, 14, 12, .8) 100%);
}
.care-band .icon { margin-bottom: 0; }
.care-band .kicker { margin-bottom: 10px; }
.care-band h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.care-band p { margin: 0 0 14px; max-width: 68ch; }
.care-band .care-band-note { color: var(--text-dim); font-size: .95rem; margin-bottom: 24px; }
.care-band .btn { text-align: center; }
@media (min-width: 700px) { .care-band { grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 48px); } .care-band .icon { width: 64px; height: 64px; } }

/* About: portrait */
.home-portrait { margin: 0 auto; width: 100%; max-width: 360px; }
.home-portrait img { width: 100%; height: auto; border: 1px solid rgba(217, 172, 108, .45); border-radius: 14px; background: var(--forest-900); }
.home-portrait figcaption { margin-top: 18px; text-align: center; }
.home-portrait .about-name, .home-portrait .about-role { display: block; }
@media (min-width: 900px) { .home-portrait { max-width: none; position: sticky; top: calc(var(--header-h) + 24px); } }
.about-body .home-more { margin-top: 8px; }

.contact-serving { margin: 0 0 32px; font-size: .95rem; letter-spacing: .04em; color: var(--text); }
.contact-name + .contact-serving { margin-top: -20px; }

/* Narrow phones: the email address is long, so let it wrap inside the button instead of
   pushing the button past the page gutters. */
.contact-actions .btn { text-transform: none; letter-spacing: .02em; overflow-wrap: anywhere; }

/* ══════════════════════════════════════════════════════════════════════════
   Shared building blocks for inner pages (see docs/site-build.md, "Components").
   Nothing above this line is changed by these rules.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page header band (emitted by the build's {{pageHeader}} token) ───────── */
.page-header {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--header-h) + clamp(28px, 4vw, 48px)) 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid rgba(217, 172, 108, .35);
  background:
    radial-gradient(60% 90% at 82% 100%, rgba(44, 84, 66, .34), transparent 72%),
    linear-gradient(180deg, #050608 0%, #070b09 100%);
}
/* Subtle ridgeline motif behind the text: sized by the band, faded out towards the top. */
.page-header::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: min(100%, 300px); z-index: -1;
  background: url("../assets/mountain.svg") 50% 100% / cover no-repeat; opacity: .26;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 92%);
  mask-image: linear-gradient(to top, #000 0%, transparent 92%);
}
.page-header .kicker { margin-bottom: 12px; }
.page-header h1 {
  margin: 0; max-width: 24ch; text-wrap: balance; font-family: var(--serif); font-weight: 400; color: var(--paper);
  font-size: clamp(2.3rem, 6vw, 4.2rem); line-height: 1.05; letter-spacing: -.005em; overflow-wrap: break-word;
}
.lede {
  margin: 0 0 1.4em; max-width: 60ch; font-family: var(--serif); font-weight: 400; color: var(--text);
  font-size: clamp(1.2rem, 2.3vw, 1.55rem); line-height: 1.4; overflow-wrap: break-word;
}
.page-header .lede { margin: clamp(16px, 2.4vw, 24px) 0 0; }

/* ── Legal copy (2026-10-19 language audit) ──────────────────────────────────
   Standard disclaimer A, set quietly under the h1 on every page. It has to be
   present and legible, not prominent: the owner chose the small-line treatment
   over a bordered box so it does not push real content below the fold on all
   13 pages. Kept above the WCAG 4.5:1 contrast floor against --ink despite
   being dim, because a disclaimer nobody can read is not a disclaimer. */
.legal-note {
  max-width: 78ch;
  margin: clamp(14px, 2vw, 20px) 0 0;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--text-dim);
}
.legal-note-hero { margin-top: clamp(16px, 2.2vw, 22px); }

.footer-legal {
  max-width: 86ch;
  margin: 0 0 .7em;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--text-dim);
}

/* The crisis note is the one block on the page that someone may need in a
   hurry, so it gets a visible edge rather than the quiet treatment above. */
.callout-crisis { border-color: var(--gold-dim); }
.callout-crisis .callout-title { color: var(--gold); }
.section-crisis { padding-top: 0; }
.page-header + .section { padding-top: clamp(48px, 7vw, 88px); }

/* ── Breadcrumb (last crumb is <li aria-current="page">, not a link) ──────── */
.breadcrumb { margin: 0 0 clamp(20px, 3vw, 32px); }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  font-weight: 500; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3;
}
.breadcrumb li { display: inline-flex; align-items: center; min-width: 0; margin: 0; color: var(--text-dim); }
.breadcrumb li + li::before { content: "/"; content: "/" / ""; color: var(--gold); margin: 0 .85em; }
.breadcrumb a { display: inline-block; padding: 8px 0; color: var(--text); text-decoration: none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--gold-bright); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--paper); overflow-wrap: anywhere; }

/* ── Prose: comfortable long-form text ────────────────────────────────────── */
.prose { max-width: 68ch; line-height: 1.75; overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 1.25em; }
.prose h2 { margin: 2.1em 0 .6em; font-size: clamp(1.75rem, 3.2vw, 2.3rem); line-height: 1.15; }
.prose h3 { margin: 1.8em 0 .5em; font-size: clamp(1.35rem, 2.3vw, 1.6rem); }
.prose h2 + h3 { margin-top: 1.2em; }
.prose h4 { margin: 1.6em 0 .4em; font-family: var(--sans); font-weight: 500; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; color: var(--gold); }
.prose strong { color: var(--paper); font-weight: 500; }
.prose em { font-style: italic; }
.prose a:not(.btn) { color: var(--gold); text-decoration: underline; overflow-wrap: anywhere; }
.prose a:not(.btn):hover { color: var(--gold-bright); }
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.prose li { margin: 0 0 .55em; padding-left: .3em; }
.prose li:last-child { margin-bottom: 0; }
.prose li::marker { color: var(--gold); }
.prose ol li::marker { font-weight: 500; }
.prose li > ul, .prose li > ol { margin: .55em 0 0; }
.prose blockquote {
  margin: 1.8em 0; padding: .2em 0 .2em 1.4em; border-left: 1px solid var(--gold-dim);
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--paper); font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.45;
}
.prose blockquote p { margin: 0 0 .8em; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote footer, .prose blockquote cite {
  display: block; margin-top: .9em; font-family: var(--sans); font-style: normal; font-weight: 500; font-size: .78rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim);
}
.prose hr { border: 0; height: 1px; margin: 2.4em 0; background: linear-gradient(90deg, var(--gold-dim), transparent); }
.prose dl { margin: 0 0 1.4em; }
.prose dt { margin: 1em 0 .2em; font-weight: 500; color: var(--paper); }
.prose dt:first-child { margin-top: 0; }
.prose dd { margin: 0 0 .6em; padding-left: 1.4em; border-left: 1px solid var(--gold-dim); }
.prose table { width: 100%; margin: 0 0 1.6em; border-collapse: collapse; font-size: .98rem; line-height: 1.5; }
.prose th, .prose td { padding: .7em .9em; border: 1px solid var(--gold-dim); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.prose th { font-weight: 500; color: var(--paper); background: rgba(217, 172, 108, .08); overflow-wrap: break-word; }
.prose code { padding: .1em .35em; border-radius: 4px; background: rgba(217, 172, 108, .1); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere; }
.prose pre { margin: 0 0 1.6em; padding: 1em 1.2em; overflow-x: auto; border: 1px solid var(--gold-dim); border-radius: 8px; background: rgba(13, 26, 21, .8); font-size: .9rem; line-height: 1.55; }
.prose pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.prose figure { margin: 1.8em 0; }
.prose img { max-width: 100%; height: auto; border-radius: 10px; }
.prose figcaption { margin-top: .7em; font-size: .9rem; line-height: 1.5; color: var(--text-dim); }
/* A callout inside prose adds vertical spacing only on the sides that face a sibling, so a
   callout that is the first or last child never adds outer margin. */
.prose > .callout { margin-block: 0; }
.prose > .callout:not(:first-child) { margin-top: 2em; }
.prose > .callout:not(:last-child) { margin-bottom: 2em; }

/* ── Split: prose + sticky aside ──────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 56px); align-items: start; }
.split > * { min-width: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(48px, 6vw, 88px); }
  .split > .aside-card { position: sticky; top: calc(var(--header-h) + 24px); }
}
.aside-card {
  padding: clamp(24px, 3vw, 34px); border: 1px solid rgba(217, 172, 108, .3); border-radius: 14px;
  background: linear-gradient(160deg, rgba(28, 58, 48, .6) 0%, rgba(8, 14, 12, .8) 100%);
}
.aside-card > :first-child { margin-top: 0; }
.aside-card > :last-child { margin-bottom: 0; }
.aside-card .kicker { margin: 0 0 10px; }
.aside-card h2, .aside-card h3 { margin: 0 0 12px; font-size: 1.5rem; line-height: 1.2; }
.aside-card p:not(.kicker) { margin: 0 0 14px; font-size: .98rem; line-height: 1.6; color: var(--text); }
.aside-card ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; font-size: .98rem; }
.aside-card li { margin: 0; padding: 0; }
.aside-card a:not(.btn) { color: var(--gold); overflow-wrap: anywhere; }
.aside-card a:not(.btn):hover { color: var(--gold-bright); }

/* ── Callout: a highlighted note ──────────────────────────────────────────── */
.callout {
  margin: clamp(24px, 4vw, 40px) 0; padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 32px);
  border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0;
  background: linear-gradient(135deg, rgba(28, 58, 48, .6) 0%, rgba(13, 26, 21, .75) 100%);
  color: var(--text); overflow-wrap: break-word;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout p { margin: 0 0 .8em; font-size: 1.0625rem; line-height: 1.6; }
.callout strong { color: var(--paper); font-weight: 500; }
.callout .callout-title { margin: 0 0 .5em; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; line-height: 1.25; color: var(--paper); }
.callout a:not(.btn) { color: var(--gold); overflow-wrap: anywhere; }
.callout a:not(.btn):hover { color: var(--gold-bright); }
/* A card grid followed directly by a callout (or a prose block that holds one) needs a gap. */
.link-cards + .callout, .cards + .callout, .callout + .link-cards, .cards + .prose, .callout + .cards, .prose + .cards { margin-top: 32px; }

/* ── Link cards: a .cards grid whose cards are whole-card links ───────────── */
.link-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.link-cards .card { position: relative; padding-bottom: calc(clamp(26px, 3.2vw, 40px) + 26px); }
.link-cards .card h3 { font-size: 1.5rem; }
.link-cards .card h3 a { color: var(--paper); text-decoration: none; }
.link-cards .card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.link-cards .card:hover h3 a, .link-cards .card h3 a:focus-visible { color: var(--gold-bright); }
.link-cards .card h3 a:focus-visible { outline: none; }
.link-cards .card h3 a:focus-visible::after { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.link-cards .card::after {
  content: "\2192"; content: "\2192" / ""; position: absolute; right: clamp(24px, 3vw, 36px); bottom: clamp(18px, 2.4vw, 26px);
  color: var(--gold); line-height: 1; transition: transform .25s ease; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .link-cards .card:hover::after { transform: translateX(4px); }
}

/* ── CTA band: dark green contact panel (src/partials/cta-contact.html) ───── */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--wrap) - 2 * var(--gutter)));
  margin: 0 auto clamp(56px, 8vw, 96px); padding: clamp(40px, 6vw, 72px) clamp(22px, 5vw, 64px) clamp(96px, 12vw, 136px);
  border: 1px solid rgba(217, 172, 108, .4); border-radius: 18px;
  background: linear-gradient(135deg, #1c3a30 0%, #0d1a15 100%);
}
.cta-band::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: clamp(90px, 14vw, 150px); z-index: -1;
  background: url("../assets/mountain.svg") 50% 100% / cover no-repeat; opacity: .42;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, transparent 100%);
}
.wrap .cta-band { width: 100%; }
.cta-band .kicker { margin: 0 0 12px; }
.cta-band h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.cta-band-text { margin: 14px auto 0; max-width: 52ch; color: var(--text); }
.cta-band-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(22px, 3vw, 32px); }

/* ── Buttons inside components: the email address is long, so never all caps, and it wraps
   inside its container instead of spilling out (min-width: 0 lets a flex item shrink). ───── */
.aside-card .btn, .prose .btn, .callout .btn, .faq details .btn, .cta-band .btn {
  text-transform: none; letter-spacing: .02em; overflow-wrap: anywhere; max-width: 100%; min-width: 0; text-align: center;
}

/* ── FAQ: native <details>, no JavaScript ─────────────────────────────────── */
.faq { max-width: 68ch; overflow-wrap: break-word; border-top: 1px solid rgba(217, 172, 108, .25); }
.faq details { border-bottom: 1px solid rgba(217, 172, 108, .25); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 18px 0; cursor: pointer;
  list-style: none; font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 2.3vw, 1.5rem); line-height: 1.25; color: var(--paper);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary:hover { color: var(--gold-bright); }
.faq summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 4px; }
.faq summary::after {
  content: ""; flex: none; width: 16px; height: 16px; color: var(--gold);
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 50% / 1.5px 100% no-repeat;
  transition: background-size .2s ease;
}
.faq details[open] summary::after {
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 50% / 1.5px 0 no-repeat;
}
.faq details > :not(summary) { margin: 0 0 1.1em; }
.faq details > :not(summary):not(.btn) { padding-right: 36px; }
.faq details > :not(summary):last-child { margin-bottom: 22px; }
.faq details a:not(.btn) { color: var(--gold); overflow-wrap: anywhere; }
.faq details a:not(.btn):hover { color: var(--gold-bright); }
.faq details ul, .faq details ol { padding-left: 1.4em; }
.faq details li { margin: 0 0 .5em; padding-left: .3em; }
.faq details li:last-child { margin-bottom: 0; }
.faq details li::marker { color: var(--gold); }

/* ── Portrait: framed photo with optional caption ─────────────────────────── */
.portrait { margin: 0 auto; width: 100%; max-width: 360px; }
.portrait img { width: 100%; height: auto; border: 1px solid rgba(217, 172, 108, .45); border-radius: 14px; background: var(--forest-900); }
.portrait figcaption { margin-top: 18px; text-align: center; }
.portrait-name { display: block; font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; color: var(--paper); }
.portrait-role { display: block; margin-top: 4px; font-weight: 500; font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }

/* ── Link list (404 page and other plain lists of pages) ──────────────────── */
.link-list { list-style: none; margin: 0; padding: 0; max-width: 34rem; border-top: 1px solid rgba(217, 172, 108, .25); }
.link-list li { margin: 0; padding: 0; border-bottom: 1px solid rgba(217, 172, 108, .25); }
.link-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 0;
  font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.25; color: var(--gold); text-decoration: none;
}
.link-list a::after { content: "\2192"; content: "\2192" / ""; flex: none; transition: transform .25s ease; }
.link-list a:hover, .link-list a:focus-visible { color: var(--gold-bright); }
.link-list a:hover::after, .link-list a:focus-visible::after { transform: translateX(4px); }

/* ── Referral guide: two-column skill list ──────────────────────────────── */
.two-col { columns: 2; column-gap: 32px; }
@media (max-width: 520px) { .two-col { columns: 1; } }

/* On screen, tell the reader this page is meant to be printed. In print that
   instruction is noise, so it is hidden below. The reverse is true of the URL
   line: useless on screen (they are already on the site), essential on paper. */
.print-note {
  border: 1px solid var(--gold-dim); border-radius: 8px;
  padding: 12px 16px; font-size: .95rem; color: var(--text-dim);
}
.print-url { display: none; }

/* ── Print ──────────────────────────────────────────────────────────────────
   The site is dark-themed. Printing it as-is would produce an unreadable,
   ink-flooded page, so print gets black-on-white and drops every piece of
   site furniture: nav, footer, the contact band, breadcrumbs and decorative
   mountains. What is left is the document itself.

   This is what makes the referral guide a one-pager without maintaining a
   separate PDF: the page IS the source, and "Save as PDF" produces the file.
   ────────────────────────────────────────────────────────────────────────── */
@media print {
  @page { margin: 14mm; }

  :root { --paper: #000; --text: #1a1a1a; --text-dim: #444; --gold: #6b5120; }

  html, body {
    background: #fff !important; color: #000 !important;
    font-size: 10pt; line-height: 1.3;
  }

  /* Site furniture has no place on a printed handout. */
  .site-header, .site-nav, .nav-toggle, .site-footer, .cta-band,
  .breadcrumb, .hero-mountain, .contact-mountain, .skip-link,
  .print-note { display: none !important; }

  /* EVERY dark background and decorative image has to go, not just the obvious
     ones. The page header carries a dark gradient AND a mountain.svg layer on
     a ::before; left in place they print as a black box with black text on it,
     because the headings use --paper, which is redefined to black above. That
     is exactly what happened on the first attempt. Belt and braces: strip
     background images and colours from everything, then re-state white. */
  *, *::before, *::after {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .page-header, .section, .section-tint, .hero, .card, .callout, .cta-band,
  .portrait, .home-portrait, .aside-card, .skills li {
    background: none !important;
    background-color: transparent !important;
  }
  .page-header::before, .section-tint::before, .hero::before { display: none !important; }

  /* The header's top padding exists to clear the fixed site header, which is
     hidden in print. Keeping it would waste a third of the first page. */
  .page-header {
    margin: 0 0 7pt !important; padding: 0 !important;
    border-bottom: 0.5pt solid #999 !important; padding-bottom: 5pt !important;
    overflow: visible !important;
  }
  .page-header + .section { padding-top: 0 !important; }
  .section { padding: 0 !important; }
  .wrap { max-width: none; width: auto; padding: 0 !important; }

  /* max-width in ch units is set for on-screen measure; on paper it strands the
     title in a narrow column. */
  .page-header h1, h1 { max-width: none !important; }

  h1 { font-size: 16pt !important; line-height: 1.15; margin: 0 0 3pt; color: #000 !important; }
  h2 { font-size: 12.5pt !important; font-weight: 600 !important; margin: 9.5pt 0 3pt; color: #000 !important; }
  p, li { color: #1a1a1a !important; margin: 0 0 2.5pt; }
  .kicker, .lede { color: #444 !important; }
  .kicker { font-size: 8pt !important; margin: 0 0 3pt !important; }
  .lede { font-size: 10pt !important; margin: 2pt 0 0 !important; max-width: none !important; }
  .prose p, .prose li { max-width: none !important; }

  ul { margin: 0 0 3pt; padding-left: 14pt; }
  li { line-height: 1.38; margin-bottom: 2.5pt; }

  /* SPECIFICITY, not taste. The rules above are single-element selectors
     (0,0,1); the on-screen .prose rules that set generous reading spacing are
     (0,1,1) and therefore win, so without these the printed page keeps a 1.75
     line-height and 2.1em heading margins. Six h2s at 2.1em was costing about
     a third of the sheet on its own, which is why trimming words had almost no
     effect on the page count. Scope the overrides to .prose and mark them. */
  .prose { line-height: 1.42 !important; max-width: none !important; }
  .prose p, .prose li { margin: 0 0 4.5pt !important; padding-left: 0 !important; }
  .prose ul, .prose ol { margin: 0 0 7pt !important; padding-left: 14pt !important; }
  .prose h2 { margin: 9.5pt 0 3pt !important; line-height: 1.15 !important; }
  .prose h3 { margin: 9pt 0 2.5pt !important; }
  .prose > :first-child { margin-top: 0 !important; }

  /* The guide fills the sheet, so the spacing above is set to use it rather
     than to survive it. Squeezing it tighter only produced a third of a page
     of white at the bottom and headings that read as body text. */

  /* Links are useless as links on paper; print the address for the one that
     matters (the email) and leave the rest as plain text. */
  a { color: #000 !important; text-decoration: none; }
  a[href^="mailto:"]::after { content: ""; }

  .print-url { display: block !important; margin-top: 10pt; font-size: 9pt; color: #444 !important; }

  /* The scope disclaimer is the single most important block for a referrer.
     Keep it visually distinct, and never let it split across pages. */
  .callout {
    border: 1pt solid #666 !important; background: none !important;
    padding: 8pt 10pt !important; margin: 9.5pt 0 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .callout-title { font-weight: 600; color: #000 !important; }

  h2, h3 { break-after: avoid; page-break-after: avoid; }
  .two-col { columns: 2; column-gap: 20pt; }

  /* ── Printing the welcome & referral guide ──────────────────────────────
     Everything below exists because that guide is built from the SECTION
     components (section-head, cards, pull quote), not from .prose alone like
     the one-pager it replaced. Left at their on-screen values those components
     cost roughly two extra sheets: a .card is a roomy tinted panel with a 52px
     icon and ~40px of padding, and .cards collapses to one column below 760px,
     which a print context always is. Four pillars then filled a page and a
     half, and the pull quote at 2.5rem filled a third of another.
     ────────────────────────────────────────────────────────────────────── */

  /* A section head stranded at the foot of a sheet, with its heading on the
     next one, is the single ugliest break this page can produce. */
  .section-head {
    margin: 0 0 6pt !important; max-width: none !important;
    break-inside: avoid; page-break-inside: avoid;
    break-after: avoid; page-break-after: avoid;
  }
  .section + .section { margin-top: 11pt; }

  /* The gold hairline under each section head is hidden on the rest of the
     site in print, but here it is the divider that makes the numbered sections
     legible. Set background-COLOR: the blanket rule above kills background-
     image, and .rule is drawn with a gradient. */
  .section-head .rule {
    display: block !important; width: 100% !important; height: 0.75pt !important;
    background-color: #999 !important; margin: 4pt 0 0 !important;
  }

  /* Cards: flatten the panel to a rule-and-text block, and hold the two-column
     grid that the screen media query drops. */
  .cards { display: grid !important; gap: 7pt 16pt !important; margin: 0 !important; }
  .cards.two, .cards.three { grid-template-columns: 1fr 1fr !important; }
  .card {
    padding: 0 0 0 7pt !important; border: 0 !important;
    border-left: 0.75pt solid #aaa !important; border-radius: 0 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .card h3 { font-size: 10.5pt !important; margin: 0 0 2pt !important; line-height: 1.2; }
  .card p { margin: 0 0 3pt !important; font-size: 9pt !important; line-height: 1.35; }
  .card > :last-child { margin-bottom: 0 !important; }

  /* The icons stay -- they are most of what makes the printed sheet look like
     Meghan's packet rather than a memo -- but at handout scale, not 52px. */
  .icon { width: 15pt !important; height: 15pt !important; margin: 0 0 3pt !important; }
  /* --gold prints as a mid brown, which at 10pt in a light serif reads as a
     smudge rather than a figure. Give the numerals weight and near-black. */
  .card-num { font-size: 10pt !important; font-weight: 600 !important; color: #333 !important; margin: 0 0 1pt !important; }

  .pull { margin: 9pt 0 0 !important; max-width: none !important; }
  .pull p { font-size: 11pt !important; line-height: 1.35; }
  .pull footer { margin-top: 4pt !important; font-size: 7.5pt !important; letter-spacing: .14em; }

  /* Who-works-with-Meghan reads as a list of labelled rows, so keep each row
     whole and stop the description indenting away from its term. */
  .prose dl { margin: 0 !important; }
  .prose dt { margin: 5pt 0 1pt !important; font-weight: 600; break-after: avoid; page-break-after: avoid; }
  .prose dd {
    margin: 0 !important; padding-left: 7pt !important;
    border-left: 0.75pt solid #aaa !important;
    break-inside: avoid; page-break-inside: avoid;
  }

  /* The crisis note is a section of its own, and it must never be the thing
     that splits across a page break. */
  .section-crisis { break-inside: avoid; page-break-inside: avoid; }

  /* The reveal animation leaves elements at opacity 0 until scrolled into
     view. Printing without this reset can yield a blank page. */
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
}