/* meetjohnalvarado.com — DESIGN 9 · FOREST SIGNAL
   Red-team synthesis. Visual system reconciled from Design 3 (Modern Executive) and
   Design 7 (Contents Rail) on John's word; information architecture and copy register
   from Design 8 (Answer Document).

   PALETTE  Forest Signal carries StaffedAgents' forest, marigold, cream and teal
            into the existing answer-document structure. --aqua-deep and --muted
            are accessibility tones from the teal family for small text on paper.
   TYPE     Serif display (3's role) over a geometric sans body (7's role). Design 3 loaded
            Playfair Display + DM Sans off a Google font CDN — an external host, which the
            build rules forbid. Both stacks resolve locally and name the original face first,
            so a visitor who happens to have it still gets 3's intended setting.
   RHYTHM   7's hairline-separated sections, NOT 3's alternating tinted bands: with a contents
            rail on the page, background bands are a second, competing structure signal.
   No framework. No external font. No external image host. */

:root {
  --navy: #1F332C;
  --navy-deep: #14231E;
  --navy-lift: #2A493E;
  --navy-hairline: rgba(245, 241, 233, .18);
  --on-navy: rgba(245, 241, 233, .78);
  --aqua: #DA9935;
  --aqua-bright: #ECB655;
  --aqua-deep: #476D63;
  --aqua-wash: #F3EAD8;
  --surface: #FBFAF7;
  --card: #FFFFFF;
  --ink: #1F332C;
  --ink-soft: #40584F;
  --muted: #58766D;
  --rule: #D8D2C7;
  --rule-soft: #E8E3DA;
  --serif: "Playfair Display", "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", "Avenir Next", "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --max: 1120px;
  --ease: 160ms ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--aqua-deep); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }
::selection { background: var(--aqua-bright); color: var(--navy); }

.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 120;
  padding: .7rem 1rem;
  color: var(--navy);
  background: var(--aqua-bright);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

/* ── eyebrow: Design 3's rule-then-label, the cheapest landing point on a section ── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .85rem;
  color: var(--aqua-deep);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 2rem; height: 2px; background: var(--aqua); }
.eyebrow--light { color: var(--aqua-bright); }
.eyebrow--light::before { background: var(--aqua-bright); }

/* ── sticky masthead ── */
.top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--navy);
  border-bottom: 1px solid var(--navy-hairline);
}
.top .shell {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.top-name { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.top-name strong { font-family: var(--serif); font-size: 1.06rem; font-weight: 500; }
.top-mark { width: 28px; height: 28px; border-radius: 7px; }
.top-link {
  flex: 0 0 auto;
  padding: .5rem .85rem;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
}
.top-link:hover { color: var(--navy); background: var(--aqua-bright); border-color: var(--aqua-bright); }

/* ── the opening: Design 3's navy gradient, sized to Design 8's rule that the
      answer block clears the fold. 3's own hero sets min-height:790px, which on a
      1280x800 laptop puts every fact below the fold. ── */
.opening {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(30px, 4.5vw, 52px) 0 clamp(34px, 5vw, 56px);
  color: #fff;
  background:
    radial-gradient(circle at 86% 12%, rgba(218, 153, 53, .26), transparent 34%),
    linear-gradient(122deg, var(--navy-deep) 0%, var(--navy) 50%, #31594B 100%);
}
h1 {
  max-width: 30ch;
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(1.95rem, 4vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.12;
  text-wrap: balance;
}
/* The answer half of the H1 is an answer, not a second headline. Setting it a step
   down keeps the whole opening — headline, byline, answer block AND the one button —
   inside 800px on a 1280x800 laptop, which is the measurement that matters. */
h1 .said { display: block; margin-top: .18em; color: var(--aqua-bright); font-size: .8em; }
.sub {
  max-width: 56ch;
  margin: 0 0 22px;
  color: var(--on-navy);
  font-size: clamp(1.02rem, 1.9vw, 1.16rem);
  line-height: 1.5;
}

/* byline — a real person stands behind the page */
.byline {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 0;
  border-top: 1px solid var(--navy-hairline);
  border-bottom: 1px solid var(--navy-hairline);
}
.byline img {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 26%;
}
.byline-text { min-width: 0; font-size: .88rem; line-height: 1.5; }
.byline-name { display: block; font-family: var(--serif); font-size: 1.16rem; }
.byline-meta { display: block; color: var(--on-navy); font-size: .8rem; }
.byline a { color: var(--aqua-bright); }
.byline a:hover { color: #fff; }

/* the answer, above the fold */
.answer {
  max-width: 68ch;
  margin: 22px 0;
  padding: 18px 24px;
  border-left: 3px solid var(--aqua);
  background: var(--navy-lift);
}
.answer p { margin: 0; font-size: 1.06rem; line-height: 1.56; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: .8rem 1.35rem;
  border: 1px solid var(--aqua-bright);
  border-radius: 999px;
  color: var(--navy);
  background: var(--aqua-bright);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--ease), background-color var(--ease);
}
.button:hover { color: var(--navy); background: #fff; border-color: #fff; }
.button--ink { border-color: var(--aqua-deep); color: #fff; background: var(--aqua-deep); }
.button--ink:hover { color: var(--aqua-deep); background: transparent; }
.cta-aside { margin: 0; color: var(--on-navy); font-size: .93rem; }
.cta-aside a { color: var(--aqua-bright); }

/* ── Design 7's contents rail + long-form column ── */
.layout {
  display: grid;
  grid-template-columns: minmax(172px, 216px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 68px);
  padding: clamp(34px, 5vw, 56px) 0 0;
}
.rail-col { min-width: 0; }
.rail { position: sticky; top: 78px; }
.rail-heading {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.rail-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.rail-link {
  display: block;
  margin-left: -1px;
  padding: 8px 0 8px 17px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--ease), border-color var(--ease);
}
.rail-link:hover { color: var(--ink); }
.rail-link.is-active { color: var(--ink); font-weight: 700; border-left-color: var(--aqua); }

.content-col { min-width: 0; }
.q {
  padding-bottom: clamp(38px, 5.5vw, 58px);
  margin-bottom: clamp(38px, 5.5vw, 58px);
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 84px;
}
.q:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
h2 {
  max-width: 24ch;
  margin: 0 0 16px;
  color: var(--navy);
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  font-weight: 500;
  letter-spacing: -.018em;
  line-height: 1.14;
  text-wrap: balance;
}
h3 { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 500; line-height: 1.28; }
.q p { max-width: 66ch; margin: 0 0 14px; color: var(--ink-soft); }
.q p:last-child { margin-bottom: 0; }
.q p.lead { color: var(--ink); font-size: 1.1rem; }
.cost {
  max-width: 66ch;
  margin: 22px 0 0;
  padding: 15px 20px;
  border-left: 3px solid var(--aqua);
  background: var(--aqua-wash);
  color: var(--ink);
  font-size: .97rem;
}

/* ── proof: Design 3's three-part map row (what / detail / why it matters to you),
      rebuilt as a real article rather than a role="table" of divs ── */
.case { padding: 22px 0; border-top: 1px solid var(--rule-soft); }
.case:first-of-type { padding-top: 4px; border-top: 0; }
.case-where {
  margin: 0 0 5px;
  color: var(--aqua-deep);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.case h3 { color: var(--navy); }
.case ul { max-width: 66ch; margin: 10px 0 0; padding-left: 19px; color: var(--ink-soft); }
.case li { margin-bottom: 5px; }
.case li::marker { color: var(--aqua); }
/* A case can carry two links (the Interval directory entry and the property's own site).
   They are separate destinations and must not read as one run-on string. */
.case-link { display: inline-block; margin: 10px 22px 0 0; font-size: .86rem; font-weight: 700; }
.case-link:last-of-type { margin-right: 0; }

/* ── engagement table ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; }
caption { margin-bottom: 14px; color: var(--muted); font-size: .85rem; text-align: left; }
th, td { padding: 14px 18px 14px 0; border-bottom: 1px solid var(--rule-soft); text-align: left; vertical-align: top; }
thead th {
  border-bottom: 1px solid var(--rule);
  color: var(--aqua-deep);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
tbody th { color: var(--navy); font-family: var(--serif); font-size: 1.06rem; font-weight: 500; }
tbody td { color: var(--ink-soft); }

/* ── the one cleared quote ── */
.quote { max-width: 66ch; margin: 0; padding: 26px 28px; border-left: 3px solid var(--aqua); background: var(--card); }
.quote blockquote { margin: 0; }
.quote blockquote p { max-width: none; margin: 0 0 14px; color: var(--ink); font-family: var(--serif); font-size: 1.12rem; line-height: 1.45; }
.quote blockquote p:last-of-type { margin-bottom: 0; }
.quote figcaption { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.quote-name { display: block; color: var(--navy); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.quote-role { display: block; margin-top: 4px; color: var(--muted); font-size: .84rem; }
.quote-note { max-width: 66ch; margin: 14px 0 0; color: var(--muted); font-size: .89rem; }
.rail-resume { display: inline-block; margin-top: 16px; padding: 8px 14px;
  border: 1px solid var(--rule-soft); border-radius: 999px; color: var(--navy);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.rail-resume:hover { border-color: var(--aqua); color: var(--aqua); }
.quotes-grid { display: grid; gap: 18px; margin-top: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
.quotes-grid .quote { display: flex; flex-direction: column; max-width: none; height: 100%; }
.quotes-grid .quote figcaption { margin-top: auto; }
.quotes-grid .quote--anchor { grid-column: 1 / -1; }

/* ── background: Design 5's "earlier foundation" absorb block. One short block,
      no cards, no section parity — the fix for the tri-split persona finding. ── */
.background { max-width: 66ch; padding: 20px 24px; border-left: 3px solid var(--rule); background: var(--card); }
.background p { margin: 0 0 12px; color: var(--ink-soft); font-size: .97rem; }
.background p:last-child { margin-bottom: 0; }

/* ── FAQ ── */
.faq { max-width: 68ch; }
.faq h3 { margin: 24px 0 6px; color: var(--navy); font-size: 1.15rem; }
.faq h3:first-of-type { margin-top: 6px; }
.faq p { margin: 0; }

/* ── Design 3's dark closing card, carrying Design 7's contact-action rows ── */
.closing { margin-top: clamp(48px, 7vw, 80px); padding: clamp(38px, 5.5vw, 60px) 0; color: #fff; background: linear-gradient(122deg, var(--navy-deep) 0%, var(--navy) 60%, #31594B 100%); scroll-margin-top: 56px; }
.closing h2 { max-width: 20ch; color: #fff; }
.closing p { max-width: 60ch; margin: 0 0 22px; color: var(--on-navy); }
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
.actions { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.action {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--navy-hairline);
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  transition: border-color var(--ease), background-color var(--ease);
}
.action:hover { color: #fff; border-color: var(--aqua-bright); background: rgba(255, 255, 255, .05); }
.action-index { flex: 0 0 auto; color: var(--aqua-bright); font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.action-body { min-width: 0; display: block; line-height: 1.35; }
.action-body strong { display: block; font-size: .97rem; font-weight: 600; }
.action-body small { display: block; color: var(--on-navy); font-size: .84rem; }
.action-arrow { margin-left: auto; color: var(--aqua-bright); }
.stamp { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--navy-hairline); color: var(--on-navy); font-size: .8rem; }

.foot { padding: 26px 0 36px; background: var(--navy-deep); }
.foot .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; color: var(--on-navy); font-size: .79rem; }

/* ── phone. Design 7's rail disappears entirely below 900px, which leaves its
      signature element desktop-only and the phone reader with no wayfinding at all.
      Here it becomes a sticky one-row scroller under the masthead instead. ── */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .rail-col {
    position: sticky;
    top: 56px;
    z-index: 50;
    margin: 0 -20px;
    padding: 0 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
  }
  .rail { position: static; }
  .rail-heading { display: none; }
  .rail-list {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-left: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .rail-list::-webkit-scrollbar { display: none; }
  .rail-list li { flex: 0 0 auto; }
  .rail-link {
    margin-left: 0;
    padding: 13px 10px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-size: .82rem;
  }
  .rail-link.is-active { border-left-color: transparent; border-bottom-color: var(--aqua); }
  .content-col { padding-top: clamp(30px, 6vw, 44px); }
  .closing-grid { grid-template-columns: minmax(0, 1fr); }
}

/* On a phone the opening has to do the same job in half the height: the reader's first
   screen must contain a fact, not just a name. Measured at 390x844 — with these values
   the eyebrow, headline, subheadline, byline and the whole answer block land above 844.
   Design 3's opening does not clear 844 at any setting; Design 7's does not contain a
   fact to clear it with. */
@media (max-width: 620px) {
  body { font-size: 16px; }
  .shell { width: calc(100% - 28px); }
  .rail-col { margin: 0 -14px; padding: 0 14px; }
  .opening { padding-top: 20px; }
  .eyebrow { margin-bottom: .55rem; font-size: .66rem; letter-spacing: .12em; }
  .eyebrow::before { width: 1.4rem; }
  h1 { margin-bottom: 8px; font-size: 1.62rem; line-height: 1.16; }
  h1 .said { margin-top: .3em; font-size: .88em; }
  .sub { margin-bottom: 13px; font-size: .95rem; line-height: 1.45; }
  .byline { gap: 12px; padding: 10px 0; }
  .byline img { width: 50px; height: 50px; }
  .byline-text { font-size: .82rem; line-height: 1.4; }
  .byline-name { font-size: 1.02rem; }
  .byline-meta { font-size: .72rem; }
  .answer { margin: 13px 0; padding: 14px 16px; }
  .answer p { font-size: .97rem; line-height: 1.46; }
  .cta-aside { font-size: .88rem; }
  .quote { padding: 20px 20px; }
  .quote blockquote p { font-size: 1.04rem; }
  .background { padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

@media print {
  .top, .rail-col, .button, .closing, .foot { display: none; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .opening { color: #000; background: none; }
  .layout { display: block; }
  .q { page-break-inside: avoid; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   DESIGN 9D — additions only. Everything above this line is Design 9C's system,
   byte-for-byte, and is not modified.

   9D = Design 3C's CONTENT rendered through Design 9C's DESIGN AND FLOW
   (John, 2026-08-20: "the content of 3C with the flow of 9C").

   The five edits John named, and where each one lives:
     1. "On this page" contents rail  ........ .rail (inherited from 9C, unchanged)
     2. Rail sits UNDER "Who Is John Alvarado" ....... .profile-band + .layout
     3. Portrait on the LEFT ......................... .hero-grid / .portrait-card
     4. Less space between sections .................. § RHYTHM, in the page <style>
     5. Summarize-with-AI widget ..................... § .ai-summarize
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── LAYOUT TOKENS ────────────────────────────────────────────────────────────
   9C set the rail column with an inline minmax(). 9D lifts the two values into
   custom properties so any rule that has to reason about the rail's width can
   read the same number instead of re-deriving it and drifting. */
.layout {
  --rail-w: 216px;
  --layout-gap: clamp(28px, 5vw, 68px);
}
/* Scoped to the desktop range on purpose. 9C collapses .layout to a single column
   inside @media (max-width: 900px); an unscoped rule here sits LATER in the file at
   the same specificity and silently beats that collapse, which pins a 216px rail
   column on a 390px phone and drives the page into horizontal scroll. Caught by
   render-measurement, not by reading. */
@media (min-width: 901px) {
  .layout {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    gap: var(--layout-gap);
  }
}

/* ── EDIT 3 · THE PORTRAIT ON THE LEFT ────────────────────────────────────────
   John approved 9C's opener whole ("I like this as the opener"), and in it the
   portrait is already where he wants it: a small circular avatar at the HEAD of the
   identity row, hard left, ahead of the name. 9C's .byline is a flex row with the
   image first, so left is structural rather than a positioning trick — nothing here
   needs to move it, and nothing here may move it right.

   The avatar is a fixed 62px square crop of a 568x568 source. It is not a responsive
   image, so it carries an explicit 62px height by design; the page-wide
   `img { height: auto }` in the base sheet still governs every image that IS
   responsive, which is the rule that matters (a 896x1344 portrait once rendered at
   its natural height and pushed the hero 1.7 viewports down).

   An earlier 9D draft rebuilt 3C's large right-hand portrait card and moved it into
   a left grid column. That is superseded: John approved this opener, not that one,
   so the .hero-grid / .portrait-card / .triad rules that draft needed are removed
   rather than left behind as dead weight. */

/* the little credential pill 3C carries in the hero and the profile block */
.pill {
  display: inline-block;
  margin: 0 0 4px;
  padding: 5px 12px;
  border: 1px solid var(--aqua);
  border-radius: 999px;
  color: var(--aqua-bright);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pill--ink { border-color: var(--rule); color: var(--aqua-deep); }

/* 3C's hero carried a three-up credential strip (Harvard University / Interval
   International / Public Adjuster). The approved opener has no such strip, so the
   markup and its rules are both gone. Flagged in the report rather than smuggled
   somewhere else on the page. */

/* ── EDIT 2 · THE PROFILE BLOCK SITS ABOVE THE RAIL ───────────────────────────
   John: "i want the table of contents of 9c - you can place under hwo is John
   Alvarado." So "Who Is John Alvarado" is lifted OUT of the two-column layout and
   runs the full reading width; the rail begins immediately beneath it and stays
   sticky from there down. */
.profile-band { padding-top: clamp(22px, 3vw, 34px); }
.profile-band .q { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.who-grid { display: grid; gap: clamp(16px, 2.6vw, 34px); align-items: start; }
@media (min-width: 901px) { .who-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.who-grid h2 { margin-bottom: 10px; }
.who-copy .answer {
  margin: 0 0 14px;
  padding: 14px 20px;
  border-left: 3px solid var(--aqua);
  background: var(--aqua-wash);
  color: var(--ink);
}
.who-copy .answer p { margin: 0; font-size: 1.04rem; color: var(--ink); }

/* ── EDIT 5 · SUMMARIZE WITH AI ───────────────────────────────────────────────
   Ported from scripts/ai-summarize-widget.html (alvarado.ai). Markup structure,
   the five providers, the aria-labels, the focus-visible ring and the inline
   href-rewrite script are unchanged. The CSS is REBUILT from this page's own
   tokens — the source was cream/green Manrope for alvarado.ai and would have read
   as a pasted-in foreign block here. The prompt is rewritten for this page's
   reader: a resort developer evaluating John, not a local business owner. */
.ai-summarize {
  margin: 0 0 clamp(22px, 2.6vw, 32px);
  padding: 20px 24px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--aqua);
  border-radius: 4px;
  background: var(--card);
}
.ai-summarize-inner { max-width: 66ch; }
.ai-summarize-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .5rem;
  color: var(--aqua-deep);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}
.ai-summarize-eyebrow::before { content: ""; width: 2rem; height: 2px; background: var(--aqua); }
.ai-summarize-title {
  margin: 0 0 8px;
  max-width: 24ch;
  color: var(--navy);
  font-family: var(--serif);
  font-size: clamp(1.24rem, 2.2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -.018em;
  line-height: 1.16;
}
.ai-summarize-copy { margin: 0 0 14px; color: var(--ink-soft); font-size: .97rem; line-height: 1.5; }
.ai-summarize-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ai-summarize-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 42px;
  padding: .5rem .85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--navy);
  background: var(--surface);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: color var(--ease), background-color var(--ease), border-color var(--ease);
}
.ai-summarize-link:hover { color: var(--navy); background: var(--aqua-wash); border-color: var(--aqua); }
.ai-summarize-link:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
.ai-summarize-link svg { width: 17px; height: 17px; flex: 0 0 auto; display: block; color: var(--aqua-deep); }
.ai-summarize-link span { display: block; }
@media (max-width: 620px) {
  .ai-summarize { padding: 16px 18px; }
  .ai-summarize-links { gap: 6px; }
  .ai-summarize-link { padding: .45rem .7rem; font-size: .78rem; }
}

/* ── REFERENCE CARDS · landscape, one full-width column ───────────────────────
   Measured, not assumed. 9C rendered 836x525 (ratio 1.59) at 1440. 9D narrows the
   attribution track and steps the quote down one notch inside the card only, which
   buys back line width and lifts the ratio without touching the page type scale
   John set. See REPORT-9D for the before/after table and for why 3.3-4.2 is not
   reachable at this column width without shrinking the quote below the settled
   scale or editing approved quote text. */
.quotes-grid .quote { padding: 20px 22px; }
.quotes-grid .quote figcaption { margin-top: 14px; padding-top: 12px; }

/* ── FAQ, tightened ─────────────────────────────────────────────────────────── */
.faq h3 { margin: 18px 0 5px; }
.faq h3:first-of-type { margin-top: 4px; }

/* ── print: the widget is a screen affordance ─────────────────────────────────*/
@media print { .ai-summarize { display: none; } }


/* td .spec — John's own role specifics (Sales Story brief, 2026-05-29), added
   2026-08-21 on his instruction to "be a little more detailed on that". */
td ul.spec { margin:.5em 0 0; padding-left:1.05em; list-style:disc; }
td ul.spec li { margin:.18em 0; font-size:.92em; color:var(--ink-3, inherit); opacity:.92; }
td ul.spec li::marker { color:var(--aqua-deep, currentColor); }


/* ═══════════════════════════════════════════════════════════════════════════
   V2 PROGRESSIVE DISCLOSURE — added 2026-08-21.

   John, 2026-08-21: "we need to decide on design where we maybe just have
   sub-links or cascading/waterfall below the topic line information so they
   can click on it if they want more information out of curiosity, to keep the
   page tight but provide additional information should the user want it."

   ADDITIVE ONLY. Version 1 (/index.html) uses none of these class names, so
   every rule below is inert there and V1 renders byte-identically to before.
   Only /v2.html carries .more, .v2-flag, .numbered, .loop and .gets.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the preview flag, /v2.html only ──────────────────────────────────────── */
.v2-flag {
  background: var(--aqua-wash);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 20px;
  text-align: center;
}
.v2-flag strong { color: var(--navy); }
.v2-flag a { color: var(--aqua-deep); font-weight: 500; white-space: nowrap; }

/* ── the disclosure itself ────────────────────────────────────────────────── */
.more { margin: .55em 0 0; }
.more > summary {
  color: var(--aqua-deep);
  cursor: pointer;
  display: block;             /* kills the default disclosure triangle       */
  font-family: var(--sans);
  font-size: .88em;
  font-weight: 500;
  letter-spacing: .005em;
  list-style: none;           /* Firefox                                     */
  padding: 3px 0 3px 1.35em;
  position: relative;
  transition: color var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.more > summary::-webkit-details-marker { display: none; }   /* Safari       */
.more > summary::marker { content: ""; }

/* the +/− affordance: a real glyph, so it survives a font failure */
.more > summary::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  line-height: 1;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: .86em;
  font-weight: 600;
  opacity: .75;
  transition: opacity var(--ease), background var(--ease), color var(--ease);
}
.more[open] > summary::before { content: "\2212"; }          /* proper minus */
.more > summary:hover { color: var(--navy); }
.more > summary:hover::before { opacity: 1; background: var(--aqua-wash); }
.more > summary:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
  border-radius: 3px;
}

/* the revealed body */
.more > *:not(summary) { animation: more-in 180ms ease both; }
@keyframes more-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .more > *:not(summary) { animation: none; }
}

.more > p,
.more .more-body {
  color: var(--ink-soft);
  font-size: .93em;
  line-height: 1.62;
  margin: .35em 0 .2em;
  padding-left: 1.35em;
}
.more > ul.spec { margin: .35em 0 .2em; padding-left: 2.4em; }

/* ── the block-level variant, used inside #operating ──────────────────────── */
.more--block {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  margin: 10px 0 0;
  overflow: hidden;
}
.more--block > summary {
  background: var(--surface);
  border-bottom: 1px solid transparent;
  font-size: .95em;
  padding: 13px 18px 13px 2.5em;
}
.more--block > summary::before { left: 18px; }
.more--block[open] > summary { border-bottom-color: var(--rule); }
.more--block .more-body { padding: 16px 20px 18px; margin: 0; font-size: .95em; }

/* ── list shapes carried in from the two briefs ───────────────────────────── */
.more-body > :first-child { margin-top: 0; }
.more-body > :last-child  { margin-bottom: 0; }

ol.numbered { counter-reset: n; list-style: none; margin: 0; padding: 0; }
ol.numbered > li {
  counter-increment: n;
  margin: 0 0 14px;
  padding-left: 2.6em;
  position: relative;
}
ol.numbered > li:last-child { margin-bottom: 0; }
ol.numbered > li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .05em;
  color: var(--aqua-deep);
  font-family: var(--sans);
  font-size: .84em;
  font-weight: 700;
  letter-spacing: .04em;
}
ol.numbered strong { color: var(--navy); }

ol.loop { counter-reset: s; list-style: none; margin: 14px 0 0; padding: 0; }
ol.loop > li {
  counter-increment: s;
  border-left: 2px solid var(--rule);
  margin: 0;
  padding: 0 0 14px 18px;
  position: relative;
}
ol.loop > li:last-child { padding-bottom: 0; border-left-color: transparent; }
ol.loop > li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: .45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aqua-deep);
}
.loop-step {
  display: block;
  color: var(--navy);
  font-family: var(--sans);
  font-size: .82em;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

dl.gets { margin: 0; }
dl.gets dt {
  color: var(--navy);
  font-family: var(--sans);
  font-size: .93em;
  font-weight: 600;
  margin-top: 13px;
}
dl.gets dt:first-child { margin-top: 0; }
dl.gets dd { margin: 2px 0 0; padding: 0; }

.operating-close {
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  margin-top: 22px;
  padding-top: 16px;
}
.operating-close strong { color: var(--navy); }

/* ── inside a table cell, the disclosure has to stay compact ──────────────── */
td > .more { margin-top: .5em; }
td > .more > summary { font-size: .85em; }

/* ── print: a printed page must not lose half its content ────────────────── */
@media print {
  .v2-flag { display: none; }
  .more > summary { color: var(--ink); padding-left: 0; }
  .more > summary::before { display: none; }
  .more--block { border-color: var(--rule); break-inside: avoid; }
  .more > *:not(summary) { animation: none; }
}

/* a table folded inside a disclosure keeps the block's own padding, not its own */
.more-body > .table-wrap { margin: 0; }
.more-body > .table-wrap table { margin: 0; }

/* ── FAQ as a waterfall: question visible, answer on demand ──────────────── */
.faq details.more { border-bottom: 1px solid var(--rule-soft); margin: 0; }
.faq details.more:last-of-type { border-bottom: 0; }
.faq details.more > summary { font-size: 1rem; padding: 12px 0 12px 1.7em; }
.faq details.more > summary h3 { display: inline; margin: 0; font-size: inherit; color: inherit; }
.faq details.more > summary::before { left: .1em; }
.faq details.more > p { margin: 0 0 15px; padding-left: 1.7em; }


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — John, 2026-08-21: "optimize it for mobile, as most people will
   probably view it from their phones."

   Measured at 375px before writing any of this:
     · the page itself did NOT scroll sideways (scrollWidth == clientWidth);
       the overflowing nodes were the rail's chip scroller and the tables
       inside their own .table-wrap scrollers, both intentional.
     · 11 of 21 <summary> elements rendered 29px tall. The entire page is now
       driven by tapping those lines, and 29px is well under the 44px minimum
       both Apple and Google publish. THAT was the real defect.
     · three-column tables forced sideways scrolling inside .table-wrap to
       reach the third column — on the single most important section.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · disclosure rows become real touch targets ───────────────────────── */
@media (max-width: 760px), (pointer: coarse) {
  .more > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
    line-height: 1.35;
  }
  /* flex on <summary> removes the UA marker in Chrome; Safari's is already
     hidden via ::-webkit-details-marker, so the custom +/- stays correct. */
  .more--block > summary { min-height: 48px; }
  .faq details.more > summary { min-height: 48px; }
  .faq details.more > summary h3 { line-height: 1.35; }

  /* a tapped row should confirm itself even without hover */
  .more > summary:active { background: var(--aqua-wash); }
  .more > summary:active::before { background: var(--aqua-wash); }
}

/* ── 2 · tables stop scrolling sideways and stack into cards ─────────────── */
@media (max-width: 760px) {
  .table-wrap { overflow-x: visible; }
  .table-wrap table,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap th,
  .table-wrap td {
    display: block;
    width: auto;
    max-width: 100%;
  }
  .table-wrap thead { display: none; }          /* headers move onto the cells */
  .table-wrap caption { text-align: left; margin-bottom: 10px; }

  .table-wrap tr {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 15px 16px;
    margin: 0 0 12px;
  }
  .table-wrap tr:last-child { margin-bottom: 0; }

  .table-wrap th[scope="row"] {
    border: 0;
    color: var(--navy);
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 0 0 10px;
    text-align: left;
  }
  .table-wrap td {
    border: 0;
    padding: 0 0 12px;
  }
  .table-wrap tr > td:last-child { padding-bottom: 0; }

  /* the hidden column header, reattached to the cell it belongs to */
  .table-wrap td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  /* a disclosure living inside a stacked cell needs its own breathing room */
  td > .more { margin-top: 10px; }
  .more-body { padding-left: 0; }
  .more > p { padding-left: 1.5em; }
}

/* ── 3 · the folded lists at phone width ─────────────────────────────────── */
@media (max-width: 760px) {
  .more--block .more-body { padding: 14px 15px 16px; }
  .more--block > summary { padding-left: 2.6em; }

  ol.numbered > li { padding-left: 2.3em; margin-bottom: 16px; }
  ol.loop > li { padding-bottom: 16px; }
  dl.gets dt { margin-top: 16px; }

  /* long strong-led bullets read better with a little more air */
  ul.spec li { margin: .5em 0; line-height: 1.55; }
  .more > ul.spec { padding-left: 1.5em; }
  td > .more > ul.spec { padding-left: 1.3em; }
}

/* ── 4 · nothing may push the page sideways ──────────────────────────────── */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  img, video, svg, table { max-width: 100%; }
  /* long unbroken strings (URLs, emails) wrap instead of widening the page */
  .case-link, .quote-name, a[href^="mailto:"], a[href^="http"] {
    overflow-wrap: anywhere;
  }
}

/* The base stylesheet pins tables to min-width:640px so the desktop grid holds.
   Stacking them for phones with `width:auto` does NOT beat a min-width, so the
   table stayed 640px wide inside a 347px column and the overflow-x:hidden above
   silently CLIPPED the right-hand cells instead of revealing them. Measured,
   not assumed: wrapScrollW 640 vs wrapClientW 347. Release the floor. */
@media (max-width: 760px) {
  .table-wrap table { min-width: 0; }
  .table-wrap { margin-left: 0; margin-right: 0; }
}

/* ── Experience Map opens with the credibility highlights ────────────────────
   John, 2026-08-21: "we should have that first before they go into the details
   of each job." Deliberately NOT a disclosure — this is the block a reader is
   meant to land on, so it stays open. */
.highlights {
  background: var(--aqua-wash);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--aqua-deep);
  border-radius: 8px;
  padding: 16px 20px 18px;
  margin: 0 0 26px;
}
.highlights-head {
  margin: 0 0 10px;
  color: var(--aqua-deep);
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.highlights-list { margin: 0; padding-left: 1.05em; list-style: disc; }
.highlights-list li {
  margin: .42em 0;
  color: var(--ink-soft);
  line-height: 1.52;
}
.highlights-list li::marker { color: var(--aqua-deep); }
.highlights-list strong { color: var(--navy); font-weight: 600; }

@media (max-width: 760px) {
  .highlights { padding: 14px 15px 16px; margin-bottom: 20px; border-radius: 10px; }
  .highlights-list { padding-left: 1em; }
  .highlights-list li { margin: .55em 0; }
}