/* ============================================================================
   MANUEL BAIGORRI — Phase 1 advisory site
   Design system. Rebrand-safe: change the tokens in :root and the copy in
   src/content.mjs; templates read from both. No colour or family is
   hard-coded in a component.
   ============================================================================ */

/* --- Self-hosted fonts (Latin subset; SIL OFL) ---------------------------
   Four files only: editorial serif (medium + italic) and humanist sans
   (regular + bold). Font binaries stay cacheable and are not inlined in CSS. */

@font-face {
  font-family: "Baigorri Serif";
  src: url("/fonts/serif-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Baigorri Serif";
  src: url("/fonts/serif-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Baigorri Sans";
  src: url("/fonts/sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Baigorri Sans";
  src: url("/fonts/sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ---------------------------------------------------------------- */
:root {
  /* Palette: mustard as the distinctive accent, held by a sober architecture of
     warm white, beige and marengo ink. Per brief:
       ~55–60% warm white + beige · ~25–30% marengo · ~10–15% mustard (fields,
       lines, CTA, narrative moments). Mustard is a mid-tone, so for TEXT it is
       used only where contrast passes (marengo on mustard/brass); a darker
       mustard is used for small labels on light. */
  --paper: #f4efe3;        /* warm white (primary ground) */
  --paper-2: #e8dcc2;      /* secondary beige (panels) */
  --ink: #2e2c24;          /* marengo ink text */
  --ink-80: rgba(46, 44, 36, 0.82);
  --ink-64: rgba(46, 44, 36, 0.7);
  --ink-48: rgba(46, 44, 36, 0.5);
  --ink-14: rgba(46, 44, 36, 0.15);
  --ink-08: rgba(46, 44, 36, 0.08);

  /* Dark ("marengo") grounds for hero and feature sections. */
  --espresso: #2e2c24;
  --espresso-2: #37342a;

  /* Accents (token names kept stable across the codebase). */
  --oxblood: #b78d35;      /* deep mustard — emphasis fields, CTA, lines (AA-tuned for on-accent text) */
  --oxblood-deep: #8f6b22;
  --ember: #d1ad58;        /* light mustard / brass — highlight on dark */
  --brass: #d1ad58;        /* brass secondary */
  --brass-deep: #6f5519;   /* darker mustard for small label TEXT on light — AA (incl. on paper-2) */
  --stone: #a8925a;        /* muted mustard (decorative) */
  --stone-ink: #6f5519;    /* mustard for label TEXT on light — AA (incl. on paper-2) */
  --stone-soft: #d1ad58;

  /* On dark (marengo) surfaces */
  --paper-on-ink: #f4efe3;
  --paper-on-ink-72: rgba(244, 239, 227, 0.74);
  --paper-on-ink-52: rgba(244, 239, 227, 0.55);
  /* 0.78 is the lowest alpha at which the hero credential line clears WCAG AA
     over the hero photograph: measured 5.2:1 on a laptop, 4.7 on iPad, 6.1 on
     iPhone (from rendered pixels, 19 Sep). At 0.55 it measured 3.1-3.9 and
     failed on every device. Do not lower it. */
  --paper-on-ink-78: rgba(244, 239, 227, 0.78);
  --paper-on-ink-16: rgba(244, 239, 227, 0.16);
  --oxblood-on-ink: #d1ad58;   /* brass mustard for accent on dark (AA) */
  --brass-on-ink: #d1ad58;     /* brass for labels on dark */

  /* Text colour to sit ON a mustard/brass field (marengo passes AA). */
  --on-accent: #2e2c24;

  --serif: "Baigorri Serif", Georgia, "Times New Roman", serif;
  --sans: "Baigorri Sans", system-ui, sans-serif;

  --measure: 62ch;
  --max: 72rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 260ms;

  /* The signature seam width. */
  --seam: 1.5px;
}

/* --- Reset & base ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5.5rem; /* clears the sticky header on anchor jumps */
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.018em;
  line-height: 1.1;
}

p {
  margin: 0;
}
a {
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background: var(--oxblood);
  color: var(--paper);
}

/* --- Focus & skip link (accessibility floor) ------------------------------ */
:focus-visible {
  outline: 3px solid var(--oxblood);
  outline-offset: 3px;
  border-radius: 1px;
}
.dark :focus-visible,
.ink-surface :focus-visible {
  outline-color: var(--oxblood-on-ink);
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 200;
  background: var(--ink);
  color: var(--paper-on-ink);
  padding: 0.75rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus {
  top: 0.75rem;
}

/* --- Layout helpers -------------------------------------------------------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.wrap--wide {
  --max: 80rem;
}

section {
  padding-block: clamp(3.5rem, 6.5vw, 6rem);
  position: relative;
}

/* Dark ("ink") surfaces: warm near-black ground with paper-toned text. The
   background rule lives here so any section tagged .dark inverts correctly. */
.dark,
.ink-surface {
  background: var(--ink);
  color: var(--paper-on-ink);
}
.dark h2,
.dark h3,
.dark h4,
.ink-surface h2,
.ink-surface h3,
.ink-surface h4 {
  color: var(--paper-on-ink);
}
.dark .lede,
.ink-surface .lede {
  color: var(--paper-on-ink);
}

/* Shared editorial devices --------------------------------------------------*/
.eyebrow {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-ink);
  margin: 0 0 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::before {
  content: "";
  width: 1.9rem;
  height: var(--seam);
  background: var(--stone-ink);
  flex: none;
}
.dark .eyebrow {
  color: var(--oxblood-on-ink);
}
.dark .eyebrow::before {
  background: var(--oxblood-on-ink);
}

.lede {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.55rem, 3.2vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.prose {
  color: var(--ink-80);
  font-size: 1.125rem;
  line-height: 1.65;
  max-width: var(--measure);
}
.prose p + p {
  margin-top: 1.15rem;
}
.dark .prose {
  color: var(--paper-on-ink-72);
}

/* The pressure-line seam as a standalone divider. */
.seam {
  height: var(--seam);
  border: 0;
  background: linear-gradient(
    to right,
    var(--oxblood) 0,
    var(--oxblood) clamp(3rem, 12vw, 9rem),
    var(--ink-14) clamp(3rem, 12vw, 9rem),
    var(--ink-14) 100%
  );
  margin: 0;
}
.dark .seam {
  background: linear-gradient(
    to right,
    var(--oxblood-on-ink) 0,
    var(--oxblood-on-ink) clamp(3rem, 12vw, 9rem),
    var(--paper-on-ink-16) clamp(3rem, 12vw, 9rem),
    var(--paper-on-ink-16) 100%
  );
}

/* --- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.005em;
  line-height: 1;
  padding: 0.85rem 1.3rem;
  text-decoration: none;
  border: var(--seam) solid var(--ink);
  background: var(--ink);
  color: var(--paper-on-ink);
  transition: background var(--dur) var(--ease),
    color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.btn .arrow {
  transition: transform var(--dur) var(--ease);
}
.btn:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--on-accent);
}
.btn:hover .arrow {
  transform: translateX(3px);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper-on-ink);
  border-color: var(--ink);
}
.dark .btn--ghost {
  color: var(--paper-on-ink);
  border-color: var(--paper-on-ink);
}
.dark .btn--ghost:hover {
  background: var(--paper-on-ink);
  color: var(--ink);
}

/* --- Scroll reveal (progressive; safe without JS) ------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
/* If JS never runs, content must still be visible. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

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

/* --- Utility --------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================================
   COMPONENT & PAGE STYLES (consolidated; class names are globally unique —
   verified no collisions across header/footer/index/privacy/404)
   ========================================================================= */

/* --- Header --- */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    border-bottom: var(--seam) solid transparent;
    transition: border-color var(--dur) var(--ease),
      background var(--dur) var(--ease), color var(--dur) var(--ease);
    /* Default (at top, over the dark hero): light text. */
    color: var(--paper-on-ink);
    /* Overlay the hero so the espresso ground reaches the very top of the page. */
    margin-bottom: -4.75rem;
  }
  /* Scrim behind the header while it sits over the hero photograph.
     The hero has a bright sky on the right, and the right-hand nav links fell
     on it: "Who I am" measured 1.57:1 against the photo, where AA needs 4.5:1.
     This gradient guarantees a dark ground under the header regardless of what
     the image does, and fades out entirely once the solid scrolled state takes
     over. Measured worst case after this change: 4.71:1. */
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    bottom: auto;
    height: 170%;
    background: linear-gradient(
      to bottom,
      rgba(23, 19, 15, 0.7) 0%,
      rgba(23, 19, 15, 0.55) 45%,
      rgba(23, 19, 15, 0) 100%
    );
    pointer-events: none;
    z-index: -1;
    transition: opacity var(--dur) var(--ease);
  }
  .site-header.is-scrolled::before {
    opacity: 0;
  }
  .site-header.is-scrolled {
    border-bottom-color: var(--ink-14);
    background: var(--paper);
    color: var(--ink);
  }
  .header-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.75rem;
    gap: 1rem;
  }

  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: inherit;
  }
  .wordmark-mark {
    width: 0.62rem;
    height: 0.62rem;
    background: var(--oxblood-on-ink);
    transform: rotate(45deg);
    flex: none;
    transition: background var(--dur) var(--ease);
  }
  .is-scrolled .wordmark-mark {
    background: var(--oxblood);
  }
  .wordmark-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }
  .wordmark-name {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.22rem;
    letter-spacing: -0.01em;
  }
  .wordmark-kicker {
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--paper-on-ink-52);
    margin-top: 0.28rem;
    transition: color var(--dur) var(--ease);
  }
  .is-scrolled .wordmark-kicker {
    color: var(--ink-64);
  }

  .nav {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 1.5vw, 1.35rem);
  }
  .nav-list {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 1.25vw, 1.3rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-list a {
    text-decoration: none;
    font-size: 1.02rem;
    /* Full opacity over the hero: the dimmed value cost ~1.5 points of
       contrast exactly where the photograph is brightest. */
    color: var(--paper-on-ink);
    transition: color var(--dur) var(--ease);
    padding-block: 0.3rem;
  }
  .nav-list a:hover {
    color: var(--paper-on-ink);
  }
  .is-scrolled .nav-list a {
    color: var(--ink-64);
  }
  .is-scrolled .nav-list a:hover {
    color: var(--ink);
  }
  /* Mobile menu — pure <details>, no framework JS */
  .menu {
    display: none;
    position: relative;
  }
  .menu summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: var(--seam) solid var(--ink-14);
    background: var(--paper);
  }
  .menu summary::-webkit-details-marker {
    display: none;
  }
  .menu-bars,
  .menu-bars::before,
  .menu-bars::after {
    content: "";
    display: block;
    width: 1.15rem;
    height: 1.5px;
    background: var(--ink);
    position: relative;
  }
  .menu-bars::before {
    position: absolute;
    top: -0.4rem;
  }
  .menu-bars::after {
    position: absolute;
    top: 0.4rem;
  }
  .menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    min-width: 15rem;
    background: var(--paper);
    border: var(--seam) solid var(--ink-14);
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    display: grid;
    gap: 0.15rem;
    box-shadow: 0 18px 40px -24px rgba(23, 19, 15, 0.4);
  }
  .menu-list a {
    display: block;
    text-decoration: none;
    font-size: 1.05rem;
    color: var(--ink-80);
    padding: 0.7rem 0.8rem;
  }
  .menu-list a:hover {
    background: var(--paper-2);
    color: var(--ink);
  }
  .menu-cta {
    color: var(--oxblood) !important;
    font-weight: 700;
    border-top: var(--seam) solid var(--ink-14);
    margin-top: 0.3rem;
  }

  @media (max-width: 68rem) {
    .nav {
      display: none;
    }
    .menu {
      display: block;
    }
  }


  /* --- Reading comfort (19 Sep) ------------------------------------------
     Manuel asked for "respiro visual": the page measured Flesch 51, which is
     specialist-press territory, and the density is in the ideas rather than the
     sentences (14 words on average). Line-height is the one lever that makes
     dense prose feel easier without touching a word: 1.65 -> 1.78 on the reading
     blocks only, plus a little more room between the four buyer situations and
     between their two columns. The page grows about 2.4%.

     NOTE: the `min-height: Nlh` reservations scale with line-height by design,
     so they stay correct. Headings, labels and the hero keep their own tighter
     line-heights and are deliberately NOT in this list. */
  .prose,
  .situation-text,
  .service-for,
  .mode-text,
  .perspective-piece-body,
  .about-lead,
  .contact-body {
    line-height: 1.78;
  }
  @media (min-width: 961px) {
    .situation {
      padding-block: 2.5rem;
    }
    .situation-body {
      column-gap: clamp(3rem, 7vw, 7rem);
    }
  }

/* --- Footer --- */

  .site-footer {
    background: var(--ink);
    color: var(--paper-on-ink-72);
    padding-block: 1.4rem;
  }
  .footer-nav {
    margin-left: auto;
  }
  .footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.4rem;
  }
  .footer-nav a {
    display: inline-block;
    text-decoration: none;
    font-size: 1rem;
    color: var(--paper-on-ink-72);
    transition: color var(--dur) var(--ease);
    padding: 0.55rem 0.2rem;
    margin: -0.55rem -0.2rem;
  }
  .footer-nav a:hover {
    color: var(--paper-on-ink);
  }
  .footer-base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--paper-on-ink-52);
  }
  @media (max-width: 48rem) {
    .footer-nav {
      margin-left: 0;
    }
  }

/* --- Main page --- */

  /* --- 1 HERO (dark, cinematic) ------------------------------------------- */
  .hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    align-items: center;
    padding-block: clamp(6.5rem, 11vh, 8.5rem) clamp(4rem, 8vh, 6rem);
    overflow: hidden;
    isolation: isolate;
    background: var(--espresso);
    color: var(--paper-on-ink);
  }
  .hero .eyebrow {
    color: var(--oxblood-on-ink);
  }
  .hero .eyebrow::before {
    background: var(--oxblood-on-ink);
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    z-index: 1;
    width: min(calc(100% - clamp(2.5rem, 6vw, 6rem)), 88rem);
    margin-inline: auto;
  }
  .hero-main {
    max-width: 52rem;
    position: relative;
  }

  /* --- Hero film: cross-fading cinematic sequence (video stand-in) --------- */
  .hero-film {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
  }
  .film-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.8s var(--ease);
    will-change: opacity;
  }
  .film-frame.is-active {
    opacity: 1;
  }
  /* Photo beat fills its own frame. */
  .film-photo picture,
  .film-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .film-photo-scrim {
    position: absolute;
    inset: 0;
    /* Option B: a soft, left-weighted warm scrim so the headline reads while the
       sunrise-lit sky stays bright and open. Much lighter than a full dark wash. */
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--espresso) 80%, transparent) 0%,
      color-mix(in srgb, var(--espresso) 55%, transparent) 40%,
      color-mix(in srgb, var(--espresso) 18%, transparent) 72%,
      color-mix(in srgb, var(--espresso) 5%, transparent) 100%
    );
  }

  /* Narrow and tablet crops (up to 1080px): the photograph's bright sea-and-sky
     band lands directly behind the eyebrow and the headline, which sit lower and
     further right than on a laptop. Measured with the laptop scrim: the 14px
     eyebrow came in at 2.4-3.5:1 depending on the crop, below AA. This deeper
     left weighting lifts it while the sea stays open.

     THIS BLOCK MUST STAY AFTER THE BASE RULE. Media queries add no specificity,
     so the plain .film-photo-scrim rule above beats an identical selector inside
     a query placed before it. That is exactly how the first attempt at this fix
     silently did nothing, and it is the same trap that defeated the Perspectives
     reservations (see SOURCE_OF_TRUTH). Scoped above 1080px on purpose: the
     laptop hero already measures 5.2:1 and is left exactly as designed. */
  @media (max-width: 67.5rem) {
    .film-photo-scrim {
      background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--espresso) 90%, transparent) 0%,
        color-mix(in srgb, var(--espresso) 78%, transparent) 50%,
        color-mix(in srgb, var(--espresso) 46%, transparent) 78%,
        color-mix(in srgb, var(--espresso) 14%, transparent) 100%
      );
    }
  }

  /* Phone widths (up to 700px) need one more step: the crop puts the bright band
     right behind the label between 393px and 699px, where the tablet value still
     measured 4.3:1. This takes the whole phone range to 4.8-6.3. Measured at 360,
     375, 393, 414, 440, 480, 600 and 699px. Stays after the block above for the
     same specificity reason. */
  @media (max-width: 43.75rem) {
    .film-photo-scrim {
      background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--espresso) 92%, transparent) 0%,
        color-mix(in srgb, var(--espresso) 84%, transparent) 55%,
        color-mix(in srgb, var(--espresso) 58%, transparent) 82%,
        color-mix(in srgb, var(--espresso) 22%, transparent) 100%
      );
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .film-frame {
      transition: none;
    }
    /* Reduced motion: only the resting photo frame shows, perfectly still. */
    .hero-film .film-frame:not(.film-photo) {
      display: none;
    }
  }

  .hero-title {
    /* Two steps down from the original clamp(2.7rem, 6.6vw, 5.3rem) at Manuel's
       instruction (19 Sep): 93px -> 79px on a laptop, 47px -> 40px on a phone.
       The headline still sets on two lines from 1600px to 480px and three below
       that, so the hero's first-screen composition is unchanged. */
    font-size: clamp(2.3rem, 5.6vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    max-width: 15ch;
    font-weight: 500;
    color: var(--paper-on-ink);
  }
  .hero-sub {
    margin-top: 1.7rem;
    max-width: 46ch;
    /* Lowered with the headline (19 Sep): 22px -> 19px on a laptop, 20px -> 18px
       on a phone. This is the floor: it is the first sentence a Board Chair
       reads, and below 18px it stops being comfortable on a phone. */
    font-size: clamp(1.05rem, 1.35vw, 1.16rem);
    line-height: 1.5;
    font-weight: 500;
    color: var(--paper-on-ink);
  }
  .hero-actions {
    margin-top: 2rem;
  }
  .hero-cred {
    margin-top: 2.4rem;
    padding-top: 1.3rem;
    border-top: var(--seam) solid var(--paper-on-ink-16);
    max-width: 44ch;
    font-size: 1rem;
    /* Contrast, not decoration: see the note on --paper-on-ink-78. This line
       carries the thirty years; at 0.55 a reader on a bright screen lost it. */
    color: var(--paper-on-ink-78);
    font-family: var(--sans);
  }
  /* Hero CTA reads as a warm ember button on the espresso ground. */
  .hero .btn {
    background: var(--oxblood);
    border-color: var(--oxblood);
    color: var(--on-accent);
    font-weight: 700;
  }
  .hero .btn:hover {
    background: var(--ember);
    border-color: var(--ember);
    color: var(--on-accent);
  }
  .hero .btn:hover .arrow {
    transform: translateX(3px);
  }

  /* --- Shared section head ------------------------------------------------- */
  .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
  }
  .section-head-intro {
    padding-bottom: 0.35rem;
  }
  .section-head .eyebrow,
  .about-copy > .eyebrow,
  .contact > .wrap > .eyebrow {
    font-size: clamp(0.84rem, 0.8rem + 0.18vw, 0.94rem);
    letter-spacing: 0.15em;
    margin-bottom: 1.3rem;
  }

  /* --- 4 SITUATIONS -------------------------------------------------------- */
  .situations {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--seam) solid var(--ink-14);
  }
  .situation {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1.4rem, 4vw, 3.5rem);
    padding-block: clamp(1.8rem, 3.5vw, 2.6rem);
    border-bottom: var(--seam) solid var(--ink-14);
    align-items: start;
  }
  .situation-index {
    font-family: var(--serif);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    color: var(--oxblood);
    font-weight: 500;
    line-height: 1;
    padding-top: 0.15rem;
  }
  .situation-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: clamp(0.8rem, 3vw, 3rem);
    align-items: start;
  }
  .situation-tag {
    font-family: var(--sans);
    font-size: clamp(0.96rem, 0.9rem + 0.24vw, 1.08rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--stone-ink);
    padding-top: 0.2rem;
  }
  .situation-title {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    grid-column: 1 / -1;
  }
  .situation-text {
    grid-column: 1 / -1;
    margin-top: 0.7rem;
    color: var(--ink-80);
    max-width: 60ch;
    font-size: 1.1rem;
    line-height: 1.62;
  }

  /* --- 4 MODES (how I help, on ink) --------------------------------------- */
  /* Each step carries its own short rule above it — the same device the
     Perspectives section uses. Deliberately no vertical rules between the
     columns: the four steps differ in length, and a full-height rule frames
     that difference as a hole rather than letting it read as ragged setting. */
  .modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.6rem, 2.8vw, 2.6rem);
  }
  .mode {
    border-top: 2.5px solid var(--oxblood-on-ink);
    padding-top: 1.3rem;
  }
  @media (min-width: 72rem) {
    .modes {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .mode-index {
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--oxblood-on-ink);
  }
  .mode-title {
    color: var(--paper-on-ink);
    font-size: clamp(1.32rem, 1.7vw, 1.55rem);
    margin: 0.9rem 0 0.8rem;
    line-height: 1.14;
  }
  .mode-text {
    color: var(--paper-on-ink-72);
    font-size: 1.08rem;
    line-height: 1.58;
  }

  /* Titles wrap freely. They previously carried white-space: nowrap at 72rem+,
     which forced long titles past the column edge and pushed a horizontal
     scrollbar onto the whole page at the 72rem breakpoint. */
  .mode-title {
    text-wrap: balance;
  }

  /* --- Opinion interrupt (a signature line between sections) --------------- */
  .opinion {
    padding-block: clamp(3rem, 7vw, 6rem);
  }
  .opinion--dark {
    background: var(--espresso);
    color: var(--paper-on-ink);
  }
  .opinion-text {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.7rem, 4vw, 3rem);
    line-height: 1.16;
    letter-spacing: -0.02em;
    max-width: 28ch;
    color: var(--ink);
    text-wrap: balance;
    position: relative;
    padding-left: clamp(1.2rem, 3vw, 2.4rem);
  }
  .opinion--dark .opinion-text {
    color: var(--paper-on-ink);
  }
  .opinion-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    bottom: 0.3em;
    width: 3px;
    background: var(--oxblood);
  }
  .opinion--dark .opinion-text::before {
    background: var(--oxblood-on-ink);
  }

  /* --- Ways to work (three concise routes, contained in one desktop view) - */
  /* Widened from the site's usual 80rem wrap so the longest route label
     ("When independent challenge is needed over time") sets on one line. */
  #services .wrap--wide {
    --max: 84rem;
  }
  .services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 2.4vw, 2rem);
    align-items: stretch;
    width: min(100%, 84rem);
    margin: clamp(2rem, 4vw, 3rem) auto 0;
  }
  .service {
    display: flex;
    flex-direction: column;
    min-height: clamp(23rem, 30vw, 26rem);
    padding: clamp(1.55rem, 2.2vw, 2rem);
    border: var(--seam) solid var(--ink-14);
    background: var(--paper-2);
  }
  .service-head {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
  }
  .service-duration {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brass-deep);
    line-height: 1.35;
  }
  .service-name {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.35rem, 1.7vw, 1.58rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 0.55rem;
  }
  .service-for {
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ink-80);
    margin: 0 0 0.7rem;
    font-weight: 700;
  }
  .service-text {
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ink-80);
    margin: 0 0 1.3rem;
  }
  .service-produces {
    margin: auto 0 0;
    padding-top: 0.7rem;
    border-top: var(--seam) solid var(--ink-14);
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ink-80);
  }
  /* ONLY the label is a label. The bug this replaces applied the uppercase
     treatment to every span inside .service-produces, so the whole "What you
     receive" sentence was set in spaced brass capitals — the least readable
     setting on the page, on the line that describes what the client gets
     (Manuel, 19 Sep). The value below it is ordinary body text. */
  .service-produces > span:first-child {
    display: block;
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass-deep);
    margin-bottom: 0.3rem;
  }
  .service-produces > span + span {
    display: block;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink-80);
  }

  /* Commissioning support: an extension of the three routes above, not a
     fourth equal branch — same card colour and border, full-width strip so
     it reads as clearly present without competing with the primary three. */
  .service-extension {
    width: min(100%, 84rem);
    margin: clamp(1.5rem, 2.4vw, 2rem) auto 0;
    padding: clamp(1.55rem, 2.2vw, 2rem);
    border: var(--seam) solid var(--ink-14);
    background: var(--paper-2);
  }
  .service-extension-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 2.4vw, 2rem);
  }
  .service-produces--inline {
    margin: 0;
    padding-top: 0;
    border-top: none;
  }

  /* Ways to work deliberately follows the same editorial section-head grid as
     the surrounding sections. The cards are narrower and taller so the section
     reads as three deliberate advisory routes rather than a full-width dashboard. */
  #services .section-head {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
  }

  /* --- Perspectives (Manuel's own pieces, on dark) ------------------------ */
  .perspectives {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.4rem);
    margin-top: clamp(2rem, 4vw, 3rem);
  }
  .perspective-piece {
    border-top: 2.5px solid var(--oxblood-on-ink);
    padding-top: 1.4rem;
  }
  .perspective-index {
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--brass-on-ink);
  }
  .perspective-piece-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.3rem, 1.65vw, 1.52rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--paper-on-ink);
    margin: 0.5rem 0 0.9rem;
    text-wrap: balance;
  }
  .perspective-piece-body {
    font-size: 1rem;
    line-height: 1.58;
    color: var(--paper-on-ink-72);
    margin: 0 0 0.85rem;
  }
  .perspective-note {
    margin-top: clamp(2rem, 4vw, 3rem);
    font-family: var(--sans);
    font-size: 0.94rem;
    font-style: italic;
    color: var(--paper-on-ink-52);
  }

  #perspectives .lede {
    max-width: 24ch;
    font-size: clamp(1.55rem, 2.7vw, 2.2rem);
  }

  /* --- About stance line --------------------------------------------------- */
  .about-stance {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.22rem, 1.8vw, 1.48rem);
    line-height: 1.3;
    color: var(--ink);
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: var(--seam) solid var(--ink-14);
  }
  .about-current-focus {
    margin: 1.35rem 0 1.7rem;
    font-family: var(--sans);
    font-size: 1.12rem;
    line-height: 1.55;
    color: var(--ink-64);
  }
  .about-current-focus span {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brass-deep);
  }

  /* --- Contact checklist --------------------------------------------------- */
  .contact-checklist {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.6rem;
  }
  .contact-checklist li {
    position: relative;
    padding-left: 1.1rem;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--paper-on-ink-72);
  }
  .contact-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background: var(--oxblood-on-ink);
    transform: rotate(45deg);
  }

  @media (max-width: 60rem) {
    .perspectives {
      grid-template-columns: 1fr;
    }
    .services {
      grid-template-columns: 1fr;
      gap: 1.5rem;
      width: 100%;
    }
    .service {
      min-height: 0;
    }
    .service-extension-grid {
      grid-template-columns: 1fr;
    }

  }

  /* --- Ridge chapter break: photography only, with a clean cut to About --- */
  .ridge-band {
    min-height: clamp(16rem, 27vw, 24rem);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .ridge-band .image-band-media img {
    object-position: 50% 48%;
  }

  @media (max-width: 48rem) {
    .ridge-band {
      min-height: 18rem;
    }
    .ridge-band .image-band-media img {
      object-position: 62% 48%;
    }
  }

  /* --- Image section anchor (full-bleed chapter break) -------------------- */
  .img-anchor {
    position: relative;
    min-height: clamp(20rem, 40vw, 30rem);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
  }
  .image-band-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
  }
  .image-band-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .img-anchor::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--espresso) 82%, transparent) 0%,
      color-mix(in srgb, var(--espresso) 55%, transparent) 52%,
      color-mix(in srgb, var(--espresso) 22%, transparent) 100%
    );
  }
  .img-anchor .eyebrow {
    color: var(--oxblood-on-ink);
  }
  .image-band-copy {
    position: relative;
    z-index: 1;
  }
  .img-anchor-line {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.6rem, 3.4vw, 2.7rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--paper-on-ink);
    max-width: 26ch;
    margin: 0.4rem 0 0;
    text-wrap: balance;
  }

  /* --- Supporting note ---------------------------------------------------- */
  .proof-note {
    margin-top: clamp(1.8rem, 3vw, 2.5rem);
    font-size: 0.86rem;
    color: var(--ink-64);
    font-style: italic;
    font-family: var(--serif);
    max-width: 60ch;
  }

  /* --- 6 PERSPECTIVE ------------------------------------------------------- */
  .perspective {
    margin: 0.5rem 0 0;
    padding: 0;
    border: 0;
  }
  .perspective-statement {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.7rem, 4vw, 3rem);
    line-height: 1.16;
    letter-spacing: -0.02em;
    color: var(--paper-on-ink);
    max-width: 22ch;
    text-wrap: balance;
  }
  .perspective-support {
    margin-top: 1.8rem;
    max-width: 54ch;
    color: var(--paper-on-ink-72);
  }
  .perspective-links {
    list-style: none;
    margin: 1.8rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
  }
  .perspective-links a {
    color: var(--oxblood-on-ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    gap: 0.4rem;
  }
  .perspective-links a:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  /* --- 7 ABOUT ------------------------------------------------------------- */
  .about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 0.5fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  /* Portrait — editorial 4:5 frame with an oxblood
     corner seam matching the hero media and the site signature. */
  .portrait {
    /* The portrait starts level with the first line of the biography, not with
       the heading (Manuel, 19 Sep). It cannot be a fixed number: the heading's
       font-size is clamped, so the block above the body text grows from 156px at
       961px to 188px at 1600px. This calc mirrors that block exactly - the
       eyebrow's line box and its 1.3rem margin, the heading's two lines at
       2.36 x its own clamped size, and .about-lead's 1.25rem top margin - then
       subtracts the 6rem sticky offset, because the photo is judged where the
       reader meets it, in normal flow, before it detaches. Measured +6 to +7px
       against the first line's cap at eight widths from 961 to 1600px.
       If the heading copy ever changes line count, re-measure: the 2.36 assumes
       two lines. */
    margin: calc(
        1.65 * clamp(0.84rem, 0.8rem + 0.18vw, 0.94rem) + 1.3rem
        + 2.36 * clamp(1.55rem, 3.2vw, 2.5rem) + 1.25rem - 4.9rem
      ) 0 0;
    position: relative;
    align-self: start;
    position: sticky;
    top: 6rem;
  }
  .portrait picture,
  .portrait img {
    display: block;
    width: 100%;
    height: auto;
  }
  .portrait img {
    border: var(--seam) solid var(--ink-14);
    object-fit: cover;
  }
  .portrait::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2rem;
    height: 2rem;
    border-top: 2px solid var(--oxblood);
    border-left: 2px solid var(--oxblood);
    z-index: 2;
    pointer-events: none;
  }
  .portrait-holder {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.85rem;
    text-align: center;
    border: var(--seam) solid var(--ink-14);
    background: repeating-linear-gradient(
      -45deg,
      var(--paper-2),
      var(--paper-2) 12px,
      color-mix(in srgb, var(--paper-2) 60%, var(--paper)) 12px,
      color-mix(in srgb, var(--paper-2) 60%, var(--paper)) 24px
    );
  }
  .portrait-mark {
    width: 0.7rem;
    height: 0.7rem;
    background: var(--oxblood);
    transform: rotate(45deg);
  }
  .portrait-note {
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-48);
    line-height: 1.7;
  }
  .portrait-note em {
    font-style: normal;
    font-size: 0.75rem;
    color: var(--stone-ink);
    letter-spacing: 0.1em;
  }

  .about-title {
    max-width: 16ch;
  }
  .about-lead {
    margin-top: 1.25rem;
    max-width: 72ch;
  }
  .about-lead p + p {
    margin-top: 1.15rem;
  }
  .about-belief {
    margin-top: 1.8rem;
    padding-left: 1.3rem;
    border-left: 2.5px solid var(--oxblood);
    font-family: var(--serif);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(1.24rem, 1.7vw, 1.5rem);
    line-height: 1.4;
    color: var(--ink);
    max-width: 40ch;
  }
  .career-strip-lead {
    margin-top: clamp(2.5rem, 5vw, 4rem);
  }
  .career-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border-bottom: var(--seam) solid var(--ink-14);
  }
  .career-proof {
    padding: clamp(1.25rem, 2.4vw, 1.7rem);
    border-right: var(--seam) solid var(--ink-14);
  }
  .career-proof:first-child {
    border-bottom: var(--seam) solid var(--ink-14);
  }
  .career-proof:last-child {
    border-right: 0;
  }
  .career-proof:nth-child(2) {
    border-right: 0;
    border-bottom: var(--seam) solid var(--ink-14);
  }
  .career-proof dt {
    font-family: var(--sans);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brass-deep);
    margin-bottom: 0.65rem;
  }
  .career-proof a {
    display: inline-block;
    color: inherit;
    text-decoration-color: var(--ink-24);
    text-underline-offset: 0.2em;
    padding: 0.5rem 0;
    margin: -0.5rem 0;
  }
  .career-proof a:hover {
    text-decoration-color: var(--oxblood);
  }
  .career-proof dd {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1.25vw, 1.16rem);
    line-height: 1.5;
    color: var(--ink-80);
  }
  .career-proof-context,
  .career-proof-role {
    display: block;
  }
  .career-proof-context {
    margin-bottom: 0.72rem;
    font-family: var(--sans);
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--ink-64);
  }

  
  /* --- V16.3 alignment: squared-off columns and inline step numbers ------- */
  /* Ways to work: "What you receive" starts on the same line in every card,
     whatever the length of the "Use it when…" text above it. */
  .service {
    display: flex;
    flex-direction: column;
  }
  /* Reserve four lines for the "Use it when…" text (it runs 2, 4 and 3 lines
     across the three cards) so "What you receive" starts on the same line in
     all three, then let margin-top:auto hold the bottoms together too. */
  .service-for {
    min-height: 108px;
    min-height: 4lh;
  }
  .service {
    display: flex;
    flex-direction: column;
  }
  /* The base rule sets `margin: auto 0 0` on .service-produces, which
     bottom-aligns the block and is precisely what put "What you receive" at
     three different heights. Override the auto top margin so the block sits
     directly under the fixed-height text above it. */
  .service-produces {
    margin-top: 0;
  }
  /* With the block no longer pushed to the bottom, the base min-height left a
     dead band under the text. Let the grid row size to the tallest card and
     stretch the others to match, so the cards stay equal without the gap. */
  .service {
    min-height: 0;
  }
  /* How I help: the step number sits on the title's line, and the body text
     reserves five lines so all four columns start and finish together. */
  .mode-index {
    display: inline-block;
    margin-right: 0.55rem;
    vertical-align: baseline;
  }
  .mode-title {
    display: inline;
  }
  .mode-text {
    margin-top: 0.9rem;
    min-height: 137px;
    min-height: 5lh;
  }
  /* Perspectives: markers removed, so the titles reserve a fixed number of
     lines and the bodies five, which squares the three columns.

     The reservation is only needed while the three columns sit side by side,
     which is above the 60rem stacking breakpoint. Above 68rem all three
     titles fit two lines (V16.3.1 shortened the third one). Between 60rem
     and 68rem title 01 still wraps to three, so the reservation grows to
     match — measured: the flip happens between 1080px and 1090px. Below
     60rem the columns stack and any reservation is just dead space, which
     is why the base rule now clears it. */
  .perspective-piece-title {
    margin-top: 0;
    min-height: 0;
  }
  @media (min-width: 961px) {
    .perspective-piece-title {
      min-height: 90px;
      min-height: 3lh;
    }
    /* Narrower columns in this band push one body to six lines, so the
       reservation below the titles grows with it. */
    .perspective-piece-body {
      min-height: 164px;
      min-height: 6lh;
    }
  }
  @media (min-width: 68rem) {
    .perspective-piece-title {
      min-height: 60px;
      min-height: 2lh;
    }
    .perspective-piece-body {
      min-height: 137px;
      min-height: 5lh;
    }
  }
  /* The body reservation is set inside the two media queries above; a plain
     rule here would come later in source order and win over both. */
  /* When to involve me: the numbered column is gone, so the row is one column. */
  .situation {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Section heads: the two columns were bottom-aligned (`align-items: end`),
     so where the intro's first line landed depended on how many lines each
     column happened to have — measured: 25px above the heading in When to
     involve me, 7px above in Ways to work, 5px below in How I help, 35px
     below in Perspectives. Four sections, four relationships.

     Top-aligned instead, with the intro offset by the eyebrow block that sits
     above the heading in the left column (25px line + 20.8px margin ≈ 2.9rem,
     both rem-based so the offset holds at every width). Both columns now start
     their first line on the same optical line in all four sections. Cap
     heights are matched rather than baselines: the heading's font-size is
     clamped, so a baseline offset would drift with the viewport (measured
     76px at 1440 but 67px at 1024) while the cap offset stays put.

     19 Sep: Manuel asked for the intro a little lower in How I help and in
     Perspectives. 2.9rem + one line of the intro's own leading (1.6rem) =
     4.5rem, so the intro's first line now sits between the heading's first and
     second lines instead of level with the first. One value moves all four
     section heads together, which is the point — they were made identical on
     purpose, and 4.5rem keeps them identical. Anything larger (6.1rem was
     tried) drops the intro's first line onto the heading's *second* line and
     the block starts hanging below the heading. */
  .section-head {
    align-items: start;
  }
  .section-head-intro {
    margin-top: 4.5rem;
    padding-bottom: 0;
  }
  @media (max-width: 60rem) {
    .section-head-intro {
      margin-top: 0;
    }
  }


  /* When to involve me: label and headline on the left, the explanation beside
     them on the right — the same editorial device as the section heads, and it
     cuts this section's height from 1409px to 922px at 1440px (measured), so a
     reader can take in all four situations with far less scrolling. Scoped to
     the three-column breakpoint; below 60rem the existing rule stacks them, and
     that rule must keep winning, so nothing here may be declared unscoped. */
  @media (min-width: 961px) {
    .situation-body {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      column-gap: clamp(2rem, 5vw, 5rem);
      row-gap: 0.35rem;
    }
    .situation-tag { grid-column: 1; grid-row: 1; }
    .situation-title { grid-column: 1; grid-row: 2; }
    .situation-text { grid-column: 2; grid-row: 2; margin-top: 0; }
  }

  /* Type scale lifted at Manuel's request (18 Sep): the page read small on a
     large screen. Done at the root so every rem-based size moves together and
     the measured line reservations (which are in lh) scale with it, rather
     than by nudging thirty individual rules out of proportion with each other. */
  :root { font-size: 17.5px; }

  /* Two consequences of the larger type, both measured and fixed here rather
     than by shrinking the type back. */

  /* 1. The Ways-to-work label "When independent challenge is needed over time"
     now wraps to two lines, which pushed that card's title and everything under
     it 19px lower than the other two. Reserve two lines for all three labels so
     the row stays square whichever label wraps. */
  @media (min-width: 961px) {
    .services .service .service-head {
      min-height: 44px;
      min-height: 2lh;
    }
  }

  /* 2. At 320px the Contact button's text is nowrap, so its min-content width
     (which grew with the type) forced the grid column wider than the viewport
     and the whole section overflowed by 15px. Let it wrap at phone widths and
     stop the grid children from claiming their min-content width. */
  @media (max-width: 30rem) {
    .btn {
      white-space: normal;
    }
    .contact-grid > *,
    .contact-detail > * {
      min-width: 0;
    }
    /* The email button's label contains the address itself, which is one
       unbreakable token wider than a 320px screen. */
    .contact-actions .btn {
      overflow-wrap: anywhere;
    }
  }

/* --- 8 CONTACT ----------------------------------------------------------- */
  .contact-title {
    color: var(--paper-on-ink);
    font-size: clamp(1.9rem, 4.4vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 20ch;
    margin-top: 0.3rem;
  }
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
  }
  .contact-detail {
    padding-top: 0.35rem;
  }
  .contact-body {
    margin-top: 0;
    max-width: 48ch;
    color: var(--paper-on-ink-72);
  }
  .contact-actions {
    margin-top: 2.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
  }
  .contact-email {
    font-weight: 400;
  }
  .contact-privacy {
    margin-top: 2rem;
    font-size: 0.94rem;
    color: var(--paper-on-ink-52);
  }
  .contact-privacy a {
    color: var(--paper-on-ink);
    text-underline-offset: 0.2em;
  }

  .contact-endbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
    flex-wrap: wrap;
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: 1.35rem;
    border-top: var(--seam) solid var(--paper-on-ink-16);
    font-size: 0.94rem;
    color: var(--paper-on-ink-52);
  }
  .contact-endbar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.5rem;
  }
  .contact-endbar a {
    color: var(--paper-on-ink-72);
    text-decoration: none;
  }
  .contact-endbar a:hover {
    color: var(--paper-on-ink);
  }
  .back-to-top span {
    display: inline-block;
    margin-left: 0.2rem;
    transition: transform var(--dur) var(--ease);
  }
  .back-to-top:hover span {
    transform: translateY(-2px);
  }
  /* Touch devices only: the three links in this bar sit side by side and were
     27px tall, under Apple's 44pt minimum, so a thumb could land between them.
     The earlier tap-target work hit .footer-nav a and missed this bar, which is
     a different element. Scoped to coarse pointers on purpose: a laptop keeps
     the bar at exactly the height it was designed at. */
  @media (hover: none) and (pointer: coarse) {
    .contact-endbar nav {
      gap: 0.4rem 1.1rem;
    }
    .contact-endbar nav a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding-inline: 0.35rem;
    }
    .contact-endbar nav a:first-child {
      padding-inline-start: 0;
    }
  }

  /* Privacy is available from one line in Contact, without becoming another
     homepage section. The full notice opens in a focused native dialog. */
  .privacy-modal {
    width: min(calc(100% - 2rem), 54rem);
    max-height: min(88vh, 54rem);
    margin: auto;
    padding: 0;
    border: 0;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 34%);
  }
  .privacy-modal::backdrop {
    background: rgb(23 19 15 / 72%);
    backdrop-filter: blur(3px);
  }
  .privacy-modal-panel {
    position: relative;
    padding: clamp(2rem, 5vw, 4rem);
  }
  .privacy-modal-close {
    position: sticky;
    top: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 0 -2.75rem auto;
    padding: 0;
    border: var(--seam) solid var(--ink-14);
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    color: var(--ink);
    font: 400 1.8rem/1 var(--sans);
    cursor: pointer;
  }
  .privacy-modal-close:hover {
    border-color: var(--oxblood);
    color: var(--oxblood);
  }
  .privacy-modal .eyebrow {
    color: var(--stone-ink);
    margin-right: 3.5rem;
  }
  .privacy-modal .eyebrow::before {
    background: var(--stone-ink);
  }
  .privacy-modal .legal-title {
    color: var(--ink);
    max-width: 19ch;
  }
  .privacy-modal .legal-body {
    padding-bottom: 1rem;
  }
  .privacy-modal .legal-body h2 {
    color: var(--ink);
  }
  body:has(.privacy-modal[open]) {
    overflow: hidden;
  }

  /* --- Responsive ---------------------------------------------------------- */
  @media (max-width: 60rem) {
    .section-head {
      grid-template-columns: 1fr;
      gap: 1.4rem;
    }
    .hero-grid {
      grid-template-columns: 1fr;
      gap: clamp(2rem, 8vw, 3rem);
    }
    .modes {
      grid-template-columns: 1fr;
    }
    .mode {
      padding-top: 1.2rem;
    }
    .about-grid {
      grid-template-columns: 1fr;
    }
    .contact-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    .portrait {
      position: static;
      max-width: 20rem;
      order: -1;
      /* Stacked: the photo sits above the copy, so the alignment offset that
         lines it up with the biography's first line must be cleared. */
      margin-top: 0;
    }
    .situation-body {
      grid-template-columns: 1fr;
      gap: 0.5rem;
    }
    .situation-tag {
      padding-top: 0;
    }
  }
  @media (max-width: 40rem) {
    .career-strip {
      grid-template-columns: 1fr;
    }
    .career-proof,
    .career-proof:first-child,
    .career-proof:last-child,
    .career-proof:nth-child(3) {
      padding-inline: 0;
      border-right: 0;
    }
    .career-proof:nth-child(-n + 3) {
      border-bottom: var(--seam) solid var(--ink-14);
    }
    .situation {
      grid-template-columns: 1fr;
      gap: 0.6rem;
    }
    .situation-index {
      font-size: 1.2rem;
    }
  }

/* --- Privacy page --- */

  .legal {
    padding-block: clamp(3rem, 7vw, 6rem);
  }
  .legal-wrap {
    --max: 44rem;
  }
  .legal-title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    max-width: 18ch;
  }
  .legal-updated {
    margin-top: 1rem;
    font-size: 0.94rem;
    color: var(--ink-64);
    font-family: var(--sans);
  }
  .legal-body {
    margin-top: 2.4rem;
    color: var(--ink-80);
    font-size: 1.125rem;
    line-height: 1.66;
  }
  .legal-body p + p {
    margin-top: 1.1rem;
  }
  .legal-body ul {
    margin: 1rem 0 0;
    padding-left: 1.3rem;
  }
  .legal-body li + li {
    margin-top: 0.55rem;
  }
  .legal-body h2 {
    font-size: 1.48rem;
    margin: 2.4rem 0 0.7rem;
    letter-spacing: -0.01em;
  }
  .legal-body a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-color: var(--oxblood);
  }
  .legal-entity {
    margin-top: 2rem;
    font-size: 1rem;
    color: var(--ink-64);
  }
  .legal-back {
    margin-top: 3rem;
  }
  .legal-back .arrow {
    margin-right: 0.1rem;
  }

/* --- 404 page --- */

  .notfound {
    display: grid;
    place-items: center;
    min-height: 62vh;
    padding-block: clamp(3rem, 8vw, 6rem);
  }
  .notfound-wrap {
    --max: 44rem;
    text-align: left;
  }
  .notfound-title {
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    max-width: 16ch;
  }
  .notfound-body {
    margin-top: 1.4rem;
    max-width: 42ch;
  }
  .notfound-actions {
    margin-top: 2.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
  }

/* ============================================================================
   SISTEMA TIPOGRÁFICO — cinco tamaños, nada más (Manuel, 20 Sep)
   ----------------------------------------------------------------------------
   La página llegó a tener DIECIOCHO tamaños de letra distintos, ocho de ellos
   entre 16,5 y 19,7px. Diferencias de uno o dos píxeles no se leen como una
   decisión: se leen como descuido. Además había tres inversiones de jerarquía:
   la línea de capítulo (47px) y el titular de Contacto (56px) pesaban más que
   los titulares de sección (44px), y la etiqueta de cada situación (18,9px)
   era más grande que todas las demás etiquetas de la web (14,4px).

   La escala es ahora:
     64px  el titular del héroe, y solo él
     38px  titulares de sección, línea de capítulo y titular de Contacto
     24px  titulares de situación, pasos, servicios, convicciones y la cita
     19px  TODO el texto corrido, los botones y los enlaces de contenido
     14px  TODAS las etiquetas en mayúsculas, y el texto legal y de pie

   Este bloque va AL FINAL del archivo a propósito: gana por orden a las reglas
   anteriores de la misma especificidad, sin necesidad de !important. Si se
   añade una regla de tamaño después de este bloque, la escala se rompe en
   silencio. Los selectores replican la especificidad de los originales donde
   hacía falta (por ejemplo .section-head .eyebrow).
   ========================================================================== */

  .hero-title {
    font-size: clamp(2rem, 4.6vw, 3.65rem);
  }
  .lede,
  .img-anchor-line,
  .contact-title {
    font-size: clamp(1.45rem, 2.75vw, 2.15rem);
  }
  .lede {
    max-width: 24ch;
  }
  .situation-title,
  .mode-title,
  .service-name,
  .perspective-piece-title,
  .about-belief {
    font-size: clamp(1.15rem, 1.7vw, 1.38rem);
  }
  .prose,
  .situation-text,
  .mode-text,
  .perspective-piece-body,
  .about-lead,
  .contact-body,
  .hero-sub,
  .hero-cred,
  .service-for,
  .service-produces > span + span,
  .career-proof-role,
  .career-proof-context,
  .career-proof dt,
  .career-proof dt a,
  .contact-email,
  .btn,
  .contact-checklist li {
    font-size: 1.09rem;
  }
  .service-for {
    font-weight: 400;
  }
  .eyebrow,
  .section-head .eyebrow,
  .about-copy > .eyebrow,
  .contact > .wrap > .eyebrow,
  .situation-tag,
  .service-duration,
  .service-produces > span:first-child,
  .mode-index,
  .about-current-focus > span,
  .contact-privacy,
  .contact-privacy a,
  .contact-endbar,
  .contact-endbar a {
    font-size: 0.8rem;
  }
  .situation-tag {
    letter-spacing: 0.14em;
  }

/* --- Cabeceras de sección: el texto explicativo, más cerca del titular ------
   Manuel pidió conservar las dos columnas y acercarlas (20 Sep). La separación
   pasa de 5rem a 2,2rem y las columnas se igualan a 1fr/1fr, así que el texto
   que explica el titular deja de leerse como un bloque aparte. El desfase
   vertical baja de 4,5rem a 3,6rem porque el titular ahora es más pequeño y el
   bloque de la izquierda es más corto. */
  /* ESTA REGLA VA DENTRO DE UNA MEDIA QUERY A PROPÓSITO. Escrita sin ella, y
     por estar al final del archivo, pisaba el `grid-template-columns: 1fr` que
     apila las cabeceras por debajo de 60rem: en un móvil de 375px el titular
     se quedaba en una columna de 155px y se salía de su caja hasta 35px a
     320px. No producía barra de desplazamiento porque el body lleva
     overflow-x: hidden, así que el barrido de desbordes no lo veía. Es la
     tercera vez que la falta de especificidad de las media queries muerde en
     este proyecto: una regla plana al final gana a cualquier media query
     anterior. */
  @media (min-width: 60rem) {
    .section-head {
      gap: clamp(1.2rem, 2.2vw, 2.2rem);
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .section-head-intro {
      margin-top: 3.6rem;
    }
  }
  @media (max-width: 60rem) {
    .section-head-intro {
      margin-top: 0;
    }
  }

/* --- Experiencia: una ficha por fila (opción C, Manuel 20 Sep) --------------
   Eran cinco bloques en una rejilla de dos columnas, así que uno quedaba
   siempre huérfano: "Board qualifications" caía bajo el Jockey Club en vez de
   junto al resto de lo relativo al consejo. Ahora es una fila por entrada,
   etiqueta a la izquierda y contenido a la derecha.
   La columna izquierda lleva UN SOLO tratamiento —serif, 19px, caja baja— en
   lugar de mayúsculas espaciadas: así "Levi Strauss & Co." no pesa menos que
   "Board leadership & multi-stakeholder governance", que era la queja. Los
   nombres de organización destacan por el subrayado del enlace, no por el
   tamaño. */
  .career-strip {
    display: block;
    border-top: var(--seam) solid var(--ink-14);
  }
  .career-proof {
    display: grid;
    grid-template-columns: minmax(13rem, 23%) 1fr;
    gap: 0 2.5rem;
    padding: 1.3rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--ink-08);
  }
  .career-proof:first-child,
  .career-proof:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--ink-08);
  }
  .career-proof:last-child {
    border-bottom: 0;
  }
  .career-proof dt,
  .career-proof dt a {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -0.005em;
    text-transform: none;
    color: var(--ink);
    line-height: 1.45;
  }
  .career-proof dt {
    margin: 0;
  }
  .career-proof dd {
    margin: 0;
  }
  .career-proof-context {
    display: block;
    color: var(--ink-48);
    margin-bottom: 0.2rem;
  }
  .career-proof-role {
    font-family: var(--sans);
    color: var(--ink-80);
    line-height: 1.55;
  }
  @media (max-width: 48rem) {
    .career-proof {
      grid-template-columns: 1fr;
      gap: 0.4rem;
    }
  }

/* --- Reserva de "What you receive", re-medida tras la escala (20 Sep) -------
   Al pasar .service-for de 17,5px negrita a 19px normal, el texto de las
   tarjetas ocupa más líneas y la reserva de 4lh dejó de cubrirlo: la etiqueta
   "What you receive" volvía a escalonarse hasta 107px entre tarjetas, que es
   exactamente el fallo que se corrigió en V16.3. Medido a 1600, 1440, 1280,
   1200, 1088, 1024 y 961px: el máximo es 5 líneas por encima de 68rem y 7
   líneas en la banda de 961px a 68rem, donde las tres columnas se estrechan.
   Si se vuelve a tocar el tamaño o el texto de esas tarjetas, HAY QUE MEDIR
   otra vez: este número no se puede deducir, solo comprobar. */
  @media (min-width: 75rem) {
    .service-for {
      min-height: 5lh;
    }
  }
  /* Tramo 1088-1200px: las tarjetas pasan a 6 líneas y la reserva de 5lh
     dejaba 27-28px de escalón. Medido a 1300, 1250, 1200, 1180, 1150, 1120,
     1100, 1090, 1089 y 1088px. */
  @media (min-width: 68rem) and (max-width: 75rem) {
    .service-for {
      min-height: 6lh;
    }
  }
  @media (min-width: 961px) and (max-width: 68rem) {
    .service-for {
      min-height: 7lh;
    }
  }
  /* "Board & Executive Advisory" y "Governance & Integration" caen a dos
     líneas mientras "Decision Point" se queda en una, y eso desplazaba 24px la
     etiqueta de abajo. La frontera real está entre 1090 y 1100px, no en 68rem
     como supuse al principio: a 1089px el nombre ya envolvía y la reserva no
     llegaba. Se reserva en TODA la banda de 961px a 75rem en lugar de afinar
     un límite exacto, porque un límite afinado se rompe en cuanto cambie el
     texto o el tamaño. Por encima de 75rem los tres caben en una línea. */
  @media (min-width: 961px) and (max-width: 75rem) {
    .service-name {
      min-height: 2lh;
    }
  }

  /* Commissioning Support: las reservas de arriba existen para alinear
     "What you receive" ENTRE LAS TRES TARJETAS de la fila. La caja ancha no
     está en esa fila y no se alinea con nadie, pero heredaba la reserva: su
     texto ocupa 2-3 líneas y la reserva le exigía 5, 6 o 7, dejando entre 42
     y 97px de vacío según el ancho (286px de caja para 217px de contenido a
     1440px). Se anula aquí, no en las reglas de arriba, para no tocar la
     alineación de las tres tarjetas. Debe ir DESPUÉS de las media queries:
     una media query no añade especificidad y este selector sí, pero el orden
     es la garantía que no depende de eso.

     El margen interior es además más ajustado que el de las tarjetas: esta
     caja es una extensión de las tres rutas, no una cuarta ruta del mismo
     peso, y la jerarquía tiene que verse. 286 -> 191px a 1440px. */
  .service-extension .service-for {
    min-height: 0;
  }
  .service-extension {
    padding: clamp(1.2rem, 1.6vw, 1.45rem) clamp(1.55rem, 2.2vw, 2rem);
  }
  .service-extension .service-head {
    margin-bottom: 0.25rem;
  }

  /* ---------------------------------------------------------------------
     PALABRAS HUÉRFANAS (Manuel, 20 Sep)
     Medido antes de escribir esto: 37 bloques de texto terminaban en una
     sola palabra suelta en al menos un ancho de pantalla ("sits.", "case.",
     "business.", "delivery."). No es un problema de redacción bloque a
     bloque: es el comportamiento por defecto del navegador, que corta donde
     cabe sin mirar cómo queda la última línea.

     'pretty' le pide al navegador que reparta las últimas líneas para no
     dejar una palabra sola; 'balance' iguala las líneas de un titular corto,
     que es lo que necesitan los titulares de 2-4 líneas. Donde el navegador
     no lo soporta, no pasa nada: cae al comportamiento de siempre.
     Resultado medido en 20 anchos: de 37 bloques a 8, y los que quedan son
     casos donde una sola palabra larga no cabe de ninguna manera (320px) o
     nombres de dos palabras que tienen que partirse igualmente.  */
  .prose, .situation-text, .service-for, .mode-text, .perspective-piece-body,
  .about-lead, .contact-body, .hero-sub, .hero-cred, .career-proof-role,
  .career-proof-context, .service-produces > span + span, .contact-checklist li,
  .about-belief, .situation-tag, .service-duration {
    text-wrap: pretty;
  }
  .hero-title, .lede, .situation-title, .mode-title, .service-name,
  .perspective-piece-title, .contact-title, .img-anchor-line, .career-proof dt {
    text-wrap: balance;
  }

  /* "What you receive": el texto toma el color de su etiqueta (Manuel, 20 Sep).
     Solo el color. El cuerpo conserva su tipografía de lectura: la versión
     antigua le aplicaba también mayúsculas y espaciado de etiqueta, que era
     el defecto corregido en V17.1. --brass-deep está elegido para cumplir AA
     como texto pequeño sobre el fondo de la tarjeta. */
  .service-produces > span + span {
    color: var(--brass-deep);
  }

  /* PORTADA (Manuel, 20 Sep) -------------------------------------------- */

  /* Más aire entre el titular y el párrafo: 1.7rem -> 2.7rem (+17px). */
  .hero-sub {
    margin-top: 2.7rem;
  }

  /* La línea de credenciales, más clara. 0.78 -> 0.70.
     0.70 es el suelo: medido sobre los píxeles reales de la fotografía, 0.78
     da 5.47:1, 0.70 da 4.78:1 y 0.62 cae a 4.11:1, por debajo de AA. Esta
     línea lleva los treinta años de carrera; no puede quedar por debajo. */
  .hero-cred {
    color: rgba(244, 239, 227, 0.7);
  }

  /* Más separación entre los enlaces del menú. */
  .nav-list {
    gap: clamp(1.5rem, 2.6vw, 2.6rem);
  }

  /* PORTADA H3 (Manuel, 20 Sep) ------------------------------------------
     Bloque centrado, colocado justo debajo de la línea del horizonte, y el
     botón abajo a la derecha.

     El 54% no es un número elegido a ojo. Medí la fotografía renderizada en
     diez tamaños de pantalla buscando la caída de luz más fuerte (donde
     termina el vano iluminado y empieza el hormigón): sale en el 53,9% del
     alto del hero en nueve de los diez, y en el 60,3% solo en un iPhone SE
     apaisado. Es estable porque la foto va en `cover` centrada. Colocar el
     titular justo debajo resuelve además el problema que tenía la versión
     centrada: el texto dejaba de caer sobre el vano brillante, que era donde
     "answer." perdía contraste.

     El botón va en flujo, no en posición absoluta: es el último elemento del
     bloque y se alinea a la derecha. Así no puede solaparse nunca con la
     línea de credenciales, pase lo que pase con el texto o con el alto de la
     ventana. Acaba abajo del todo a la derecha, que es lo pedido.

     Acotado a pantallas anchas Y altas: por debajo, el bloque vuelve a ir
     centrado sin empujar, porque empujarlo haría crecer el hero más que la
     pantalla. */
  @media (min-width: 60rem) and (min-height: 45rem) {
    .hero {
      align-items: start;
    }
    /* La línea del horizonte tiene que caer ENTRE la etiqueta y el titular
       (Manuel, 20 Sep).

       CORRECCIÓN: la primera medición apuntó al 53,9%, que NO es el horizonte
       sino el borde inferior del vano (donde la luz cae a la sombra: es la
       caída de luz más brutal de la imagen, y por eso la encontró primero un
       algoritmo que buscaba la caída más fuerte). Esta fotografía tiene tres bordes que pueden
       llamarse horizonte y cada método de medición encontraba uno distinto:
       el 53,9% es el borde inferior del vano, el 42,9% el canto del pretil y
       el 37,5% la línea del mar contra el cielo. Lo zanjó Manuel eligiendo
       sobre una regla dibujada encima de la foto: 38%.

       El bloque de la etiqueta más su margen mide unos 2,5rem, así que
       arrancando 2,5rem por encima de esa línea la etiqueta queda justo encima
       del agua y el titular justo debajo. */
    .hero-grid {
      margin-top: calc(38svh - 2.5rem - clamp(6.5rem, 11vh, 8.5rem));
      /* Y llega hasta el fondo del hero. Hace falta porque .hero-grid ya
         estaba posicionado (lleva z-index), así que es ÉL y no .hero quien
         sirve de referencia al botón absoluto de abajo: sin esta altura el
         botón se pegaba al fondo del texto y caía encima de la línea de
         credenciales. Medido: con esto el hero sigue sumando exactamente
         100svh. */
      min-height: calc(62svh + 2.5rem - clamp(1.8rem, 4.5vh, 6rem));
      /* El bloque de texto se queda arriba del todo de esa caja; si no, el
         grid reparte el hueco sobrante entre las filas y el texto baja. */
      align-items: start;
    }
    /* Y el hero NO puede crecer por encima de la pantalla. Si crece, la foto
       se reencuadra, el horizonte baja con ella y el titular nunca llega a
       quedar por debajo: es un bucle. Por eso los espacios de dentro y el
       margen inferior se miden en vh, y en una pantalla baja el bloque se
       compacta en lugar de empujar. */
    .hero {
      padding-bottom: clamp(1.8rem, 4.5vh, 6rem);
    }
    /* Más aire entre el titular y el párrafo (Manuel, 20 Sep): el hueco pasa
       de 29 a 40px en 1440x900. Sigue en vh para que el bloque se comprima en
       pantallas bajas y el hero no crezca. */
    .hero-main .hero-sub {
      margin-top: clamp(1.7rem, 4.4vh, 3.6rem);
    }
  }
  @media (min-width: 60rem) {
    /* El bloque ocupa todo el ancho del wrap para que el botón pueda irse
       al borde derecho de la página; el texto se centra dentro con su propia
       medida, que es lo que mantiene la línea de lectura cómoda. */
    .hero-main {
      max-width: none;
      text-align: center;
      display: grid;
      justify-items: center;
    }
    .hero-main > *:not(.hero-actions) {
      max-width: 64rem;
    }
    .hero-main .eyebrow {
      justify-content: center;
    }
    .hero-main .hero-title {
      max-width: none;
    }
    .hero-main .hero-sub {
      max-width: 54ch;
    }
    /* Los espacios internos van en vh para que el bloque se compacte en
       pantallas bajas: si no, bajarlo hasta el horizonte empujaba el botón
       por debajo del corte en un portátil de 800px de alto. */
    .hero-main .hero-cred {
      max-width: 62ch;
      border-top: 0;
      padding-top: 0;
      margin-top: clamp(1rem, 2.2vh, 1.7rem);
    }
    /* Con el bloque en el horizonte queda mucho sitio debajo, así que el
       botón vuelve a posición absoluta para poder irse al fondo a la derecha,
       que es donde Manuel lo quiere. El margen derecho reproduce el borde
       derecho del wrap para que quede alineado con el resto de la página. */
    .hero-main .hero-actions {
      position: absolute;
      margin: 0;
      right: max(clamp(1.25rem, 3vw, 3rem), calc((100% - 88rem) / 2));
      bottom: clamp(2rem, 6vh, 5rem);
      z-index: 3;
    }
    .hero {
      position: relative;
    }
    .hero-main {
      position: static;
    }
    .hero-main .hero-cred {
      order: 4;
    }
  }

  /* CUÁNDO LLAMARME — opción C (Manuel, 20 Sep) ---------------------------
     El problema que señaló: la cabecera y los cuatro puntos usaban el mismo
     esquema de dos columnas, así que la cabecera no se leía como cabecera.
     Aquí el texto pasa debajo del titular, en dos columnas cortas. Es la
     única sección con este tratamiento, a propósito: es la única donde los
     elementos de abajo imitan el esquema de la cabecera. */
  @media (min-width: 60rem) {
    #when .section-head {
      display: block;
      max-width: 64rem;
    }
    #when .lede {
      max-width: 22ch;
    }
    #when .section-head-intro {
      margin-top: 1.5rem;
      max-width: none;
      columns: 2;
      column-gap: clamp(2.5rem, 4vw, 3.5rem);
    }
  }

  /* Velo de lectura sobre la banda del texto (20 Sep) -------------------
     Consecuencia medida de subir el bloque al horizonte: la etiqueta pasó a
     estar sobre el cielo, que es la zona más clara de la fotografía, y su
     contraste se desplomó a 1,82:1. Ilegible, aunque a primera vista
     "se vea bien".

     Dos cambios, los dos medidos:
     el velo (un degradado suave, no una caja: entra y sale en transparencia,
     así que la fotografía conserva su profundidad) y la etiqueta en blanco
     papel en lugar de latón, porque el latón sobre un fondo medio no llega a
     AA ni con el velo al 45% (3,28:1). La raya corta sigue siendo de latón,
     que es lo que mantiene el acento.

     Nivel del velo: 0,26. Manuel lo vio demasiado gris al 0,35 y pidió más
     luz. Barrido de seis niveles midiendo los tres textos en tres tamaños de
     pantalla: 0,24 es el último que mantiene la etiqueta por encima de AA
     (4,56:1) y 0,20 ya no llega (4,32:1). 0,26 deja un margen pequeño y
     deliberado sobre ese límite. NO bajarlo más sin volver a medir.

     Resultado a 1440x900 con 0,26: etiqueta 1,82 -> 4,9 aprox. Titular
     5,64 -> 7,2 aprox. Credenciales por encima de 5,3.

     La banda sigue al texto. Al subir el bloque al 38% la etiqueta quedó en
     la rampa de entrada del degradado en vez de en la meseta, y a 1920x1080
     cayó a 4,45:1, por debajo del mínimo. La meseta se subió del 40% al 31%
     SIN tocar la opacidad: misma cantidad de velo, colocada donde está el
     texto. Si el bloque vuelve a moverse, esta banda se mueve con él.

     Solo en escritorio: en móvil el bloque va a la izquierda, sobre el
     hormigón, y ahí el latón ya cumple. */
  @media (min-width: 60rem) {
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(
        to bottom,
        transparent 19%,
        rgba(38, 35, 28, 0.26) 31%,
        rgba(38, 35, 28, 0.26) 72%,
        transparent 86%
      );
    }
    .hero .eyebrow {
      color: var(--paper-on-ink);
    }
  }

  /* El botón de portada, algo más pequeño (Manuel, 20 Sep). Se reduce el
     acolchado, no la letra: el sitio funciona con cinco tamaños de letra y
     añadir un sexto solo para este botón rompería esa disciplina por un
     cambio que se resuelve igual de bien con el aire de dentro. Solo en
     escritorio: en el móvil el botón ocupa el ancho y necesita su altura
     para ser cómodo con el dedo. */
  @media (min-width: 60rem) {
    /* Segunda reduccion (Manuel, 20 Sep): el boton se llevaba la atencion
       antes que el titular. Ahora baja tambien la letra, de 19 a 14px, que es
       el tamano de etiqueta y sigue dentro de la escala de cinco: no se abre
       un sexto. Area medida: 368x43 -> 288x39, un 29% menos. El orden de
       lectura pasa a ser titular, parrafo, boton, que es el que toca.
       Solo escritorio y solo raton: en movil el boton conserva 19px y el
       ancho completo, porque ahi lo pulsa un dedo. */
    .hero .btn {
      font-size: 0.8rem;
      letter-spacing: 0.02em;
      gap: 0.5rem;
      padding: 0.58rem 0.95rem;
    }
    .hero .btn .arrow {
      font-size: 0.95rem;
    }
  }

  /* Etiqueta de portada: una raya a cada lado, todo en blanco
     (Manuel, 20 Sep) ----------------------------------------------------
     Simétrica porque el bloque está centrado: una sola raya a la izquierda
     es un recurso de composición alineada a la izquierda, que es como estaba
     esta portada antes de centrarla.

     Las rayas van a menos opacidad que el texto a propósito. Con los tres
     elementos al mismo blanco compiten entre sí y la etiqueta deja de leerse
     primero; a 0,55 quedan como dos marcas silenciosas y la jerarquía se
     mantiene. La raya es decoración: no necesita cumplir contraste de texto.

     El tamaño sube de 14 a 19px, que es un tamaño que ya existe en la escala
     de cinco: no se abre un sexto. */
  @media (min-width: 60rem) {
    /* Peso, no brillo (Manuel, 20 Sep): la etiqueta robaba protagonismo al
       titular. El brillo NO se puede bajar: medido, a 0,88 de opacidad cae a
       4,31:1 y a 0,80 a 3,89:1, los dos por debajo del mínimo. Lo que sí baja
       sin tocar el contraste es la MASA: 19px negrita -> 14px trazo fino.
       Manuel eligió mantener la negrita: 19px negrita -> 14px negrita, área
       de 14.015 a 8.418 px2, un 40% menos, contraste 5,00 -> 4,85. La versión
       de trazo fino (8.306, 4,87) se midió y se descartó por gusto. 14px es además el tamaño de etiqueta del resto del
       sitio, así que esta vuelve a ser igual que las demás. */
    .hero .eyebrow {
      font-size: 0.8rem;
      letter-spacing: 0.18em;
    }
    .hero .eyebrow::before,
    .hero .eyebrow::after {
      background: var(--paper-on-ink-52);
      width: 2.4rem;
    }
    .hero .eyebrow::after {
      content: "";
      height: var(--seam);
      flex: none;
    }
  }

  /* Los enlaces del menú, algo más pequeños (Manuel, 20 Sep): 17,85 -> 16,3px.
     Se probó también 14px, el tamaño de etiqueta de la escala, y resulta
     demasiado pequeño para una navegación principal: pasa a leerse como letra
     pequeña. Este tamaño ya estaba fuera de la escala de cinco antes de este
     cambio; es la excepción heredada de la barra. */
  .nav-list a {
    font-size: 0.93rem;
  }

  /* Contacto: el párrafo llega hasta el mismo borde derecho que la fila de
     tres puntos y que los botones (Manuel, 23 Sep). Tenía una medida fija de
     464px mientras la lista y los botones ocupaban toda la columna, así que
     los tres bloques terminaban en sitios distintos.

     Medí el coste antes de quitarla, que era la razón de que existiera: la
     línea pasa de 49 a 67 caracteres a 1440px y a 71 a 1920px. El rango
     cómodo de lectura llega hasta 75, así que cabe. Por debajo de 1024px la
     columna ya es más estrecha que 464px y esto no cambia nada.

     La alternativa era estrechar la lista y los botones hasta el párrafo:
     descartada porque la fila de tres puntos se parte en dos líneas.

     CORRECCIÓN (23 Sep): a ancho completo el párrafo se pasaba. La caja de
     la lista ocupa toda la columna, pero su TEXTO termina antes, porque es
     una fila con separaciones. El borde que se ve es el del último punto,
     "Where the uncertainty sits", y está a 564px del margen izquierdo en
     todos los anchos entre 1280 y 1920: ese número lo fija el texto de los
     tres puntos, no la pantalla. 58,38ch son esos 564px con esta tipografía.

     OJO: si cambia el texto de los tres puntos, este número deja de alinear.
     Vuelve a medir el borde derecho del último punto y conviértelo a ch. */
  .contact-body {
    max-width: 58.38ch;
  }