/* AI strategy overlay components (test build 2026-10-06; design pass 2026-10-11).
   Loaded after owner-first.css on six pages only: index, strategy, about, consulting,
   ai-native-legacy-business, learn. Tokens declared here scope to those six pages.
   Rationale and receipts: docs/review-2026-10-11/DESIGN-PASS-LEDGER.md (untracked review folder). */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/newsreader-latin-var.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;
}

:root {
  /* Display face. One-line revert: --display-face: Georgia, "Times New Roman", serif; */
  --display-face: "Newsreader", Georgia, "Times New Roman", serif;

  /* Type scale: six steps. The display clamp is the only clamp() (PROVISIONAL, see ledger). */
  --t-display: clamp(2.125rem, 1.6rem + 2.2vw, 3.375rem);
  --t-h2: 2.5rem;
  --t-h3: 1.5rem;
  --t-lede: 1.1875rem;
  --t-body: 1.0625rem;
  --t-small: .90625rem;

  /* Spacing scale (4 / 6 / 9 / 13 / 18 / 24 / 32 / 44 px). */
  --s-1: .25rem;
  --s-2: .375rem;
  --s-3: .5625rem;
  --s-4: .8125rem;
  --s-5: 1.125rem;
  --s-6: 1.5rem;
  --s-7: 2rem;
  --s-8: 2.75rem;

  /* Colour tokens for values this file used as literals. */
  --coral-ink: #a63c28;
  --teal-on-dark: #7dd4ca;
  --cream: #fff8ed;
  --on-dark-soft: rgba(255, 255, 255, .78);
  --on-dark-rule: rgba(255, 255, 255, .22);
  --teal-ink: #0f6b64;
  --on-coral: #ffffff;
  --navy-deep: #0e3240;
  }
@media (max-width: 720px) {
  :root { --t-h2: 1.875rem; }
}

/* ---------- Type: every size on the six pages comes from the scale ---------- */
body { font-size: var(--t-body); }
h1, h2, h3, .display, .agenda-title, .brand-primary, .price, .faq summary, .moment strong,
.week-list strong, .ladder-figure b, .native-num, .question-list li::before, .quiet-link strong,
.product-strip strong, body.field-note-page h1, body.field-note-page .article-body h2,
body.field-note-page .next-up a, .field-note-bridge h2 {
  font-family: var(--display-face);
  font-weight: 500;
}
h1, .page-hero h1, .hero h1, body.field-note-page h1 { font-size: var(--t-display); line-height: 1.04; letter-spacing: -.018em; }
h2, .h2-quiet, .field-note-bridge h2, .cta-band h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.015em; }
h3, .price, .compact-offer-grid .price, .faq summary, .moment strong, .week-list strong, .ladder-figure b,
.not-item h3, .resource-card h3, .quiet-link strong, .product-strip strong, body.field-note-page .next-up a {
  font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.01em;
}
.lede, .offer-row .lede, body.field-note-page .article-body p, body.field-note-page .article-body li,
body.field-note-page .article-body ol, body.field-note-page .article-body ul, .question-list li::before { font-size: var(--t-lede); }
.btn, .hero-proof, .agenda-list li, .question-list li, .moment p, .ladder-offers li, .ladder-more, .terms-line,
.week-list span, .resource-card p, .cta-band p, .field-note-bridge p:not(.eyebrow), .card p, .offer-card p { font-size: var(--t-body); }
.small, .eyebrow, .offer-footnote, .agenda-label, .agenda-foot, .agenda-list li::before, .card .num,
.offer-tag, .ladder-tag, .offer-meta span, .offer-row h4, .offer-not, .week-list b, .ladder-figure span,
.ladder-figure figcaption, .diagram-wrap figcaption, .method-note .small, .quiet-link small, .product-strip span,
.resource-card span, label, .form-status, .nav-links a, .brand-line, .nav-menu-toggle, .footer-brand p, .footer-col strong,
.footer-col a, .footer-bottom, footer .foot-work strong, body.field-note-page footer .foot-links,
body.field-note-page .back-link, body.field-note-page .next-up p, .pilot-feature::after {
  font-size: var(--t-small);
}
.eyebrow { letter-spacing: .1em; }
.brand-primary { font-size: var(--t-h3); letter-spacing: -.03em; }
.native-num { font-size: var(--t-h2); }
body.field-note-page .article-body h2 { font-size: var(--t-h2); line-height: 1.1; margin: var(--s-8) 0 var(--s-4); }
.pilot-feature::after { width: 11rem; right: -2.75rem; }

/* ---------- Contrast fixes on tints (contrast-check log in the ledger) ---------- */
.section-teal .eyebrow, .section-coral .eyebrow, .section-teal .text-link, .section-coral .text-link, .offer-tag { color: var(--teal-ink); }
.cta-band p { color: var(--on-coral); }
.form-panel .btn { margin-top: var(--s-5); }

/* ---------- States ---------- */
.btn:active { transform: none; }
.btn-primary:active { background: var(--coral-hover); }
.btn-light:hover { background: var(--card); }
.text-link:hover { color: var(--ink); }
.section-dark .text-link:hover { color: var(--cream); }
.footer-col a:focus-visible, .foot-links a:focus-visible { color: var(--ink); }

/* ---------- Heroes ---------- */
.hero-calm { padding: var(--s-8) 0 calc(var(--s-8) * 2); }
.hero-calm .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
.hero-calm h1 { max-width: 24ch; }
.hero-calm .lede { max-width: 58ch; margin-top: var(--s-6); }
.hero-calm .hero-actions { margin-top: var(--s-7); }
.hero-proof { margin-top: var(--s-5); color: var(--ink); max-width: 60ch; }
.page-hero { padding: var(--s-8) 0 calc(var(--s-8) * 1.5); }
.page-hero h1 { max-width: 20ch; }
.page-hero .lede { max-width: 62ch; margin-top: var(--s-6); }
.page-hero .eyebrow + h1 { margin-top: 0; }
body.field-note-page h1 { max-width: 20ch; margin-bottom: var(--s-7); }

/* The board agenda card: a paper document, not an illustration */
.agenda-card {
  position: relative;
  padding: var(--s-7) var(--s-7) var(--s-6);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.agenda-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--navy) 0 60%, var(--teal) 60% 85%, var(--sun) 85%);
}
.agenda-label { color: var(--ink-soft); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.agenda-title { margin-top: var(--s-3); font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.01em; }
.agenda-list { margin: var(--s-5) 0 0; padding: 0; list-style: none; counter-reset: agenda; }
.agenda-list li { counter-increment: agenda; display: grid; grid-template-columns: var(--s-7) 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.agenda-list li::before { content: counter(agenda, decimal-leading-zero); color: var(--coral-ink); font-weight: 850; padding-top: var(--s-1); }
.agenda-foot { margin-top: var(--s-4); color: var(--ink-soft); }

/* ---------- Ruled columns for lists of equals (rule: alignment) ---------- */
/* Recognizable moments */
.moment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7); margin-top: var(--s-8); align-items: stretch; }
.moment { padding: var(--s-5) 0 0; border-top: 3px solid var(--coral); background: none; border-radius: 0; }
.moment strong { display: block; }
.moment p { margin-top: var(--s-3); color: var(--ink-soft); }

/* Pillars ("How we judge the work", "For / Not for") */
.card-grid { gap: var(--s-7); margin-top: var(--s-8); align-items: stretch; }
.card-grid .card { padding: var(--s-5) 0 0; border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: none; box-shadow: none; }
.card-grid .card .num { color: var(--coral-ink); font-weight: 850; letter-spacing: .1em; }
.card-grid .card h3 { margin-top: var(--s-5); }
.card-grid .card p { margin-top: var(--s-3); }
.section-dark .card-grid .card:not(.card-accent), .section-dark .card-grid .card:not(.card-accent) h3 { color: var(--cream); }
.section-dark .card-grid .card { border-top-color: var(--on-dark-rule); }
.section-dark .card-grid .card p { color: var(--on-dark-soft); }
.section-dark .card-grid .card .num { color: var(--teal-on-dark); }

/* What AI-native means: five plain points */
.native-list { margin: var(--s-8) 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.native-list li { display: grid; grid-template-columns: minmax(3rem, 4.5rem) minmax(0, 1fr); gap: var(--s-4); padding: var(--s-6) 0; border-top: 1px solid var(--rule); }
.native-list li:last-child { border-bottom: 1px solid var(--rule); }
.native-num { line-height: 1; color: var(--teal); }
.native-list p { margin-top: var(--s-3); color: var(--ink-soft); max-width: 68ch; }
.section-dark .native-list li { border-color: var(--on-dark-rule); }
.section-dark .native-num { color: var(--teal-on-dark); }
.section-dark .native-list p { color: var(--on-dark-soft); }

/* The ladder: Advise -> Diagnose -> Build and run. One ruled row, equal columns, the
   navy column kept as emphasis with the same padding and height. */
.ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: var(--s-8); align-items: stretch; border-top: 2px solid var(--ink); }
.ladder-step { position: relative; display: flex; flex-direction: column; padding: var(--s-6) var(--s-6) var(--s-7); border: 0; border-left: 1px solid var(--rule); border-radius: 0; background: none; text-decoration: none; color: var(--ink); }
.ladder-step:first-child { border-left: 0; }
.ladder-step.is-top { background: var(--navy); color: var(--cream); }
.ladder-step.is-top p, .ladder-step.is-top li { color: var(--on-dark-soft); }
.ladder-step.is-top .ladder-tag { background: rgba(255, 255, 255, .12); color: var(--cream); }
.ladder-tag { align-self: flex-start; padding: var(--s-1) var(--s-3); border-radius: 999px; background: var(--teal-soft); color: var(--navy); font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.ladder-step h3 { margin-top: var(--s-5); }
.ladder-step p { margin-top: var(--s-3); color: var(--ink-soft); }
.ladder-offers { margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.ladder-offers li { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--rule); color: var(--ink-soft); }
.ladder-step.is-top .ladder-offers li { border-color: var(--on-dark-rule); }
.ladder-offers b { color: inherit; font-weight: 750; white-space: nowrap; }
.ladder-more { margin-top: auto; padding-top: var(--s-5); color: var(--teal); font-weight: 800; }
.ladder-step.is-top .ladder-more { color: var(--teal-on-dark); }
a.ladder-step { transition: background .18s; }
a.ladder-step:not(.is-top):hover { background: var(--card); }
a.ladder-step.is-top:hover { background: var(--navy-deep); }
a.ladder-step:hover .ladder-more, a.ladder-step:focus-visible .ladder-more { text-decoration: underline; text-underline-offset: .24em; }
a.ladder-step:active { background: var(--paper-deep); }
a.ladder-step.is-top:active { background: var(--ink); }

/* Ladder graphic on the Strategy page: a flat three-step row, equal height, one treatment */
.ladder-figure { margin: var(--s-8) 0 0; }
.ladder-figure ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: var(--s-5); counter-reset: step; }
.ladder-figure li { counter-increment: step; padding: var(--s-5) var(--s-6) var(--s-6); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.ladder-figure li::before { content: counter(step, decimal-leading-zero); display: block; color: var(--coral-ink); font-size: var(--t-small); font-weight: 850; letter-spacing: .1em; }
.ladder-figure b { display: block; margin-top: var(--s-3); }
.ladder-figure span { display: block; margin-top: var(--s-2); color: var(--ink-soft); }
.ladder-figure figcaption { margin-top: var(--s-4); color: var(--ink-soft); }

/* Board questions */
.question-list { margin: var(--s-7) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); counter-reset: q; }
.question-list li { counter-increment: q; display: grid; grid-template-columns: var(--s-7) 1fr; gap: var(--s-3); padding: var(--s-5) 0; border-top: 1px solid var(--rule); }
.question-list li::before { content: counter(q); color: var(--coral-ink); font-family: var(--display-face); line-height: 1.3; }

/* Operating-model diagram */
.diagram-wrap { margin: 0; padding: var(--s-7); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.diagram-wrap svg { display: block; width: 100%; height: auto; max-width: 520px; margin-inline: auto; }
.diagram-wrap figcaption { margin-top: var(--s-5); color: var(--ink-soft); }

/* Offers */
.offer-stack { display: grid; gap: var(--s-5); margin-top: var(--s-8); }
.offer-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-8); padding: var(--s-8); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.offer-row.featured { border: 2px solid var(--coral); }
.offer-row h3 { margin-top: var(--s-4); }
.offer-row .price { margin-top: var(--s-3); }
.offer-meta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.offer-meta span { padding: var(--s-1) var(--s-3); border-radius: 999px; background: var(--teal-soft); color: var(--navy); font-weight: 800; }
.offer-row .lede { margin-top: var(--s-5); }
.offer-row h4 { margin: 0; letter-spacing: .08em; text-transform: uppercase; }
.offer-row .check-list { margin: var(--s-4) 0 var(--s-5); }
.offer-not { padding-top: var(--s-5); border-top: 1px solid var(--rule); color: var(--ink-soft); }
.terms-line { margin-top: var(--s-6); padding: var(--s-5) var(--s-5); border-left: 3px solid var(--teal); background: rgba(255, 255, 255, .5); color: var(--ink); }

/* Price cards (Services): boxed, because each is a real object with a price.
   Every row stretches to one height; the featured card no longer lifts out of the row. */
.offer-grid { gap: var(--s-5); margin-top: var(--s-8); align-items: stretch; }
.offer-grid.compact-offer-grid { align-items: stretch; }
.offer-card.featured { transform: none; }
.compact-offer-grid .offer-card { padding: var(--s-7); }
.compact-offer-grid .offer-tag, .offer-tag { margin-bottom: var(--s-4); }
.offer-card .price { margin-top: var(--s-3); }
.offer-card p { margin-top: var(--s-3); }
#diagnose .split { align-items: stretch; }
#workflow-review > .card { height: 100%; padding: var(--s-7); }
#diagnose .offer-card { padding: var(--s-7); }
#workflow-review .card .num { color: var(--coral-ink); }
#workflow-review .card h3 { margin-top: var(--s-4); }

/* Engagement weeks */
.week-list { margin: var(--s-7) 0 0; padding: 0; list-style: none; }
.week-list li { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5) 0; border-top: 1px solid var(--rule); }
.week-list b { color: var(--navy); font-weight: 850; letter-spacing: .06em; text-transform: uppercase; padding-top: var(--s-1); }
.week-list strong { display: block; }
.week-list span { display: block; margin-top: var(--s-1); color: var(--ink-soft); }

/* What we will not do: ruled 2 x 2 */
.not-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); margin-top: var(--s-7); align-items: stretch; }
.not-item { padding: var(--s-5) 0 0; border: 0; border-top: 1px solid var(--on-dark-rule); border-radius: 0; background: none; }
.not-item p { margin-top: var(--s-3); color: var(--on-dark-soft); }

/* FAQ */
.faq { margin-top: var(--s-7); border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--teal); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 800; }
.faq summary:hover { color: var(--teal); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.faq details p { padding: 0 0 var(--s-5); color: var(--ink-soft); max-width: 70ch; }

/* Operator band: the founder photograph as the signature real figure */
.operator-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: var(--s-8) calc(var(--s-8) * 1.5); align-items: start; }
.operator-photo { display: block; width: 100%; max-width: 400px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); box-shadow: none; }
.operator-photo-sm { max-width: 260px; }
.operator-facts { margin: var(--s-6) 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.operator-facts li { padding: var(--s-4) 0; border-top: 1px solid var(--rule); color: var(--ink-soft); }
.operator-facts strong { color: var(--ink); }
.method-note { margin-top: var(--s-6); padding: var(--s-5) var(--s-5); border-radius: 18px; background: var(--teal-soft); color: var(--ink); }
.method-note p + p { margin-top: var(--s-3); }
.method-note .small { color: var(--ink-soft); }

/* Field notes library (learn): article links as ruled columns */
.resource-grid { gap: var(--s-7); margin-top: var(--s-8); align-items: stretch; }
.resource-card { display: block; padding: var(--s-5) 0 0; border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: none; }
.resource-card span { color: var(--coral-ink); font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.resource-card h3 { margin-top: var(--s-3); }
.resource-card p { margin-top: var(--s-3); color: var(--ink-soft); }
.resource-card:hover h3, .resource-card:focus-visible h3 { text-decoration: underline; text-underline-offset: .18em; }
.resource-card:active h3 { color: var(--teal); }
.resource-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split > .card { padding: var(--s-7); }
.split > .card .num { color: var(--coral-ink); }

/* Quiet secondary navigation (not a call to action) */
.quiet-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.quiet-link { display: block; padding: var(--s-5) var(--s-5); border: 1px solid var(--rule); border-radius: 18px; background: rgba(255, 255, 255, .45); text-decoration: none; }
.quiet-link small { display: block; color: var(--ink-soft); font-weight: 700; }
.quiet-link strong { display: block; margin-top: var(--s-1); }
.quiet-link:hover { background: var(--card); }

/* Products band, compact */
.product-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.product-strip a { display: block; padding: var(--s-5) var(--s-5); border-radius: 16px; border: 1px solid var(--rule); background: var(--card); text-decoration: none; }
.product-strip strong { display: block; }
.product-strip span { display: block; margin-top: var(--s-1); color: var(--ink-soft); }

/* Field note: section headings and lists inside the article body */
body.field-note-page .article-body h2 { color: var(--ink); }
body.field-note-page .article-body ol, body.field-note-page .article-body ul { margin: 0 0 var(--s-6); padding-left: var(--s-6); color: var(--ink-soft); max-width: 66ch; }
body.field-note-page .article-body li { margin: var(--s-3) 0; }
body.field-note-page .back-link:active { color: var(--ink); }

/* Footer "Work with us" row on the reading-shell footers */
footer .foot-work { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-5); }
footer .foot-work strong { letter-spacing: .08em; text-transform: uppercase; }

/* Reading-shell footer for pages built without the legacy inline styles */
body.field-note-page footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-5) var(--s-7); }
body.field-note-page footer .foot-links { display: flex; flex-wrap: wrap; }
body.field-note-page footer .foot-links a { text-decoration: none; }
body.field-note-page footer .foot-links a:hover, body.field-note-page footer .foot-links a:focus-visible { text-decoration: underline; }
body.field-note-page footer .analytics-privacy-choice { color: inherit; }

.card-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.area-grid-side { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }

@media (max-width: 960px) {
  .hero-calm .hero-grid { grid-template-columns: 1fr; }
  .moment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder { grid-template-columns: 1fr; }
  .ladder-step { border-left: 0; border-top: 1px solid var(--rule); }
  .ladder-step:first-child { border-top: 0; }
  .quiet-links, .product-strip { grid-template-columns: 1fr; }
  .offer-row, .operator-grid { grid-template-columns: 1fr; }
  .operator-photo { max-width: 360px; }
}

@media (max-width: 720px) {
  .hero-calm { padding: var(--s-7) 0 var(--s-8); }
  .page-hero { padding: var(--s-7) 0 var(--s-8); }
  .moment-grid, .question-list, .not-grid { grid-template-columns: 1fr; }
  .moment-grid { gap: var(--s-6); }
  .agenda-card { padding: var(--s-6) var(--s-5) var(--s-5); }
  .offer-row { padding: var(--s-6); gap: var(--s-6); }
  .ladder-figure ol { grid-template-columns: 1fr; align-items: stretch; }
  .week-list li { grid-template-columns: 1fr; gap: var(--s-2); }
  .native-list li { grid-template-columns: 1fr; gap: var(--s-3); }
  .diagram-wrap { padding: var(--s-3); }
  .card-grid.two-up, .area-grid-side, .resource-grid.four { grid-template-columns: 1fr; }
  .compact-offer-grid .offer-card, #workflow-review > .card, #diagnose .offer-card, .split > .card { padding: var(--s-6); }
}

/* Narrow phones: site-nav.css shrinks the wordmark and menu label below the scale; keep them on it. */
@media (max-width: 360px) {
  nav.top.has-mobile-menu .brand-primary { font-size: var(--t-h3); }
  nav.top.has-mobile-menu .nav-menu-toggle { font-size: var(--t-small); }
}

/* ---------- Home hero, variant B "Portrait" (axis: hero model) ----------
   Text column against the founder photograph (4:5, ~460px, radius --radius, no filter) with a small
   caption card on its lower-left corner. The board's three questions become a full-width ruled band. */
.hero-portrait-v .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: start; }
.hero-portrait { position: relative; margin: 0; }
.hero-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; border-radius: var(--radius); }
.hero-portrait figcaption { position: absolute; left: calc(var(--s-8) * -1); bottom: var(--s-7); max-width: 75%; padding: var(--s-4) var(--s-5); border: 1px solid var(--rule); border-radius: 12px; background: var(--card); color: var(--ink); font-size: var(--t-small); font-weight: 650; box-shadow: 0 12px 30px rgba(23, 37, 43, .12); }
.hero-portrait-v { padding-bottom: var(--s-8); }
.agenda-band { padding: var(--s-8) 0 calc(var(--s-8) * 1.5); border-top: 2px solid var(--ink); }
.agenda-band .agenda-title { margin-top: var(--s-3); }
.agenda-band .agenda-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); margin-top: var(--s-6); align-items: stretch; }
.agenda-band .agenda-list li { grid-template-columns: 1fr; gap: var(--s-3); padding: var(--s-5) 0 0; border-top: 1px solid var(--rule); }
.agenda-band .agenda-foot { margin-top: var(--s-6); }
@media (max-width: 960px) {
  .hero-portrait-v .hero-grid { grid-template-columns: 1fr; }
  .hero-portrait { max-width: 360px; }
  .hero-portrait figcaption { position: static; max-width: none; margin-top: var(--s-3); box-shadow: none; }
  .agenda-band .agenda-list { grid-template-columns: 1fr; gap: 0; }
}

/* Variant B, round 2: home "Who leads the work" is text-only (the headshot already leads the hero) */
.operator-text > div { max-width: 70ch; }

/* Variant B, round 2: on phones the portrait becomes an 88px byline row between the CTA and the
   proof line. CSS reflow of the same figure and caption; no duplicated DOM. */
@media (max-width: 720px) {
  .hero-portrait-v .hero-grid { row-gap: 0; }
  .hero-portrait-v .hero-grid > div { display: contents; }
  .hero-portrait-v .hero-grid > div > * { order: 0; }
  .hero-portrait-v .hero-grid > div > .hero-actions { order: 1; }
  .hero-portrait-v .hero-portrait { order: 2; display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: var(--s-4); max-width: none; margin-top: var(--s-6); }
  .hero-portrait-v .hero-grid > div > .hero-proof { order: 3; }
  .hero-portrait img { width: 88px; height: 88px; aspect-ratio: 1; object-position: 50% 30%; border-radius: 12px; }
  .hero-portrait figcaption { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
}