/* ── TYPE SCALE — settled by John, 2026-08-20, twice ─────────────────────────
     "Make the font about 30% larger. Make it easier to view and simpler." and then
     "Make the fonts cleaner and slightly larger." Root carries the whole scale in
     one place so every rem-based size moves together and the ratios cannot drift.
     140% desktop / 124% tablet / 112% phone — the phone step exists because 140%
     on a 375px screen made a single reference card ~1550px tall. Measured, not
     guessed. Carried into 9D unchanged. */
  html { font-size: 140%; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
                 "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  @media (max-width: 700px) { html { font-size: 112%; } }
  @media (min-width: 701px) and (max-width: 899px) { html { font-size: 124%; } }

  /* ── REFERENCE CARDS — landscape, ONE full-width column ──────────────────────
     Carried from 9C: the card interior is a two-track row, quote left and
     attribution right, so each card is wide and short instead of tall and narrow.
     9D narrows the attribution track from 26% to 19% and steps the quote down one
     notch INSIDE THE CARD ONLY. That buys back line width and lifts the measured
     ratio without touching the page type scale above. Below 900px the row never
     applies and the card stacks. */
  @media (min-width: 900px) {
    .quotes-grid,
    #references .quotes-grid {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: .7rem;
      margin-left: auto;
      margin-right: auto;
    }
    .quotes-grid figure,
    #references .quotes-grid figure {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 1.1rem;
    }
    .quotes-grid figure > blockquote,
    #references .quotes-grid figure > blockquote { flex: 1 1 auto; min-width: 0; margin: 0; }
    .quotes-grid figure > figcaption,
    #references .quotes-grid figure > figcaption {
      flex: 0 0 19%;
      min-width: 0;
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
      border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
      padding-left: 1rem;
      align-self: stretch;
    }
    .quotes-grid blockquote p,
    #references .quotes-grid blockquote p { font-size: .95rem; line-height: 1.44; }
  }
  @media (max-width: 899px) {
    .quotes-grid,
    #references .quotes-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .quotes-grid blockquote p { line-height: 1.46; }
  }

  /* ── EDIT 4 · LESS SPACE BETWEEN THE SECTIONS ────────────────────────────────
     John: "less space between the sections." 9C separated every section with
     58px of padding INSIDE the box plus 58px of margin outside it — 116px of
     whitespace between one section's last line and the next section's eyebrow, on
     a page that is already nine sections long. 9D cuts that to 32px + 32px (64px)
     at desktop and scales it down with the viewport, and tightens the same rhythm
     everywhere else it accumulates: the hero, the case rows, the tables, the FAQ,
     the closing band and the footer.

     Headings cannot collide with the block above them: every section keeps a real
     padding-bottom, its hairline rule, and a scroll-margin-top large enough to
     clear the sticky masthead (and, on a phone, the sticky rail under it). */
  .q {
    padding-bottom: clamp(22px, 2.6vw, 32px);
    margin-bottom: clamp(22px, 2.6vw, 32px);
    scroll-margin-top: 76px;
  }
  .q:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
  @media (max-width: 900px) { .q { scroll-margin-top: 118px; } }

  .layout   { padding: clamp(20px, 2.6vw, 32px) 0 0; }
  .opening  { padding: clamp(22px, 3vw, 38px) 0 clamp(24px, 3vw, 40px); }
  .closing  { margin-top: clamp(28px, 3.6vw, 46px); padding: clamp(26px, 3.6vw, 44px) 0; scroll-margin-top: 56px; }
  .foot     { padding: 20px 0 26px; }

  .eyebrow  { margin-bottom: .6rem; }
  h2        { margin-bottom: 12px; }
  .q p      { margin-bottom: 12px; }
  .sub      { margin-bottom: 16px; }
  .answer   { margin: 16px 0; padding: 15px 20px; }
  .cost     { margin-top: 16px; padding: 13px 18px; }
  .case     { padding: 14px 0; }
  .case:first-of-type { padding-top: 2px; }
  .quotes-grid { margin-top: 14px; }
  th, td    { padding: 11px 16px 11px 0; }
  caption   { margin-bottom: 11px; }
  .stamp    { margin-top: 18px; padding-top: 12px; }
  .closing p { margin-bottom: 16px; }

  /* Gamma-inspired visual layer approved by John, 2026-08-21. */
  .opening {
    position: relative;
    isolation: isolate;
    background: linear-gradient(105deg, #0f272f 0%, #0f3b4c 100%);
  }
  .opening .shell { position: relative; z-index: 1; }
  .selected-work { padding: clamp(34px, 5vw, 64px) 0; background: #f7f4ed; border-bottom: 1px solid rgba(31,51,44,.14); }
  .selected-work__head { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.9fr); gap: 28px; align-items: end; margin-bottom: 24px; }
  .selected-work__head h2 { margin: 0; }
  .selected-work__head p { margin: 0; color: #52655e; }
  .selected-work__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
  .selected-card { overflow: hidden; background: #fff; border: 1px solid rgba(31,51,44,.15); border-radius: 10px; box-shadow: 0 14px 34px rgba(20,35,30,.07); }
  .selected-card__media { position: relative; display: block; overflow: hidden; color: #fff; }
  .selected-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .selected-card__image--carpe { object-position: center 62%; }
  .selected-card__media img { transition: transform .24s ease, filter .24s ease; }
  .selected-card__media:hover img,
  .selected-card__media:focus-visible img { transform: scale(1.025); filter: brightness(.82); }
  .selected-card__play { position: absolute; inset: 50% auto auto 50%; display: grid; width: 54px; height: 54px; place-items: center; transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,.88); border-radius: 50%; background: rgba(15,39,47,.86); color: #fff; font-size: 1.15rem; line-height: 1; box-shadow: 0 8px 24px rgba(0,0,0,.24); }
  .selected-card__watch { position: absolute; left: 12px; bottom: 12px; padding: 6px 9px; border-radius: 4px; background: rgba(15,39,47,.9); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
  .selected-card__body { padding: 18px 18px 20px; }
  .selected-card__where { margin: 0 0 7px; color: #66897e; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .selected-card h3 { margin: 0 0 10px; font-size: 1.18rem; }
  .selected-card__role { display: inline-block; margin: 0 0 13px; padding: 5px 8px; color: #2b5b50; border: 1px solid rgba(43,91,80,.4); border-radius: 5px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .selected-card__body > p:last-child { margin: 0; color: #40534c; font-size: .9rem; line-height: 1.55; }
  .selected-work__note { margin: 18px 0 0; color: #66746f; font-size: .78rem; font-style: italic; }
  @media (max-width: 900px) {
    .selected-work__head { grid-template-columns: 1fr; gap: 10px; }
    .selected-work__grid { grid-template-columns: 1fr; }
    .selected-card { display: grid; grid-template-columns: minmax(120px,.78fr) minmax(0,1.22fr); }
    .selected-card img { height: 100%; aspect-ratio: auto; min-height: 210px; }
  }
  @media (max-width: 560px) {
    .selected-card { display: block; }
    .selected-card img { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
  }

/* The Sell-Through Line: approved four-stage operating model for the
   production site's existing Forest Signal design authority. */
.operating-model {
  padding: clamp(36px, 5vw, 64px) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.operating-model__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: end;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.operating-model__head h2 {
  margin: 0;
  max-width: 18ch;
  font-family: "Playfair Display", "Iowan Old Style", Palatino, Georgia, serif;
}
.operating-model__intro {
  margin: 0;
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.62;
}
.operating-model__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  list-style: none;
}
.operating-stage {
  position: relative;
  min-width: 0;
  min-height: 286px;
  padding: 100px 24px 28px;
  border-left: 1px solid var(--rule);
}
.operating-stage:first-child { border-left: 0; }
.operating-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 64px;
  left: 0;
  right: 0;
  height: 2px;
  background: #DA9935;
}
.operating-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 52px;
  left: 24px;
  width: 22px;
  height: 22px;
  border: 4px solid var(--card);
  border-radius: 50%;
  background: #DA9935;
  box-shadow: 0 0 0 2px var(--aqua-deep);
}
.operating-stage__label {
  position: absolute;
  top: 25px;
  left: 24px;
  margin: 0;
  color: var(--aqua-deep);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.operating-stage h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-family: "Playfair Display", "Iowan Old Style", Palatino, Georgia, serif;
  font-size: clamp(1.12rem, 1.8vw, 1.3rem);
}
.operating-stage p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.6;
}
/* Inherited selected-work values were just below WCAG AA; these darker values
   preserve the approved layout while restoring AA contrast. */
.selected-card__where { color: #476D63; }
.selected-work__note { color: #52655E; }
@media (max-width: 900px) {
  .operating-model__head { grid-template-columns: 1fr; gap: 10px; }
  .operating-model__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .operating-stage { min-height: 270px; }
  .operating-stage:nth-child(3) { border-left: 0; border-top: 1px solid var(--rule); }
  .operating-stage:nth-child(4) { border-top: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  .operating-model__grid { display: block; }
  .operating-stage,
  .operating-stage:nth-child(3),
  .operating-stage:nth-child(4) {
    min-height: 0;
    padding: 26px 20px 30px 68px;
    border-top: 1px solid var(--rule);
    border-left: 0;
  }
  .operating-stage:first-child { border-top: 0; }
  .operating-stage::before {
    top: 0;
    bottom: 0;
    left: 31px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .operating-stage::after { top: 29px; left: 20px; }
  .operating-stage__label {
    position: static;
    margin: 0 0 8px;
  }
  .operating-stage h3 { font-size: 1.18rem; }
}
@media print {
  .operating-model__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.opening--executive h1 { max-width: 22ch; }
  .opening--executive h1,
  .executive-summary h2,
  .executive-range h2,
  .executive-range h3 { font-family: "Playfair Display", "Iowan Old Style", Palatino, Georgia, serif; }
  .opening--executive .sub { max-width: 66ch; }
  .button--outline {
    color: #fff;
    background: transparent;
    border-color: rgba(255,255,255,.62);
  }
  .button--outline:hover { color: var(--navy); background: #fff; border-color: #fff; }
  .executive-summary .who-grid { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); }
  .executive-summary .who-copy > p {
    max-width: 68ch;
    margin: 0 0 14px;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.64;
  }
  .executive-summary .who-copy > p:first-child { color: var(--ink); font-size: 1.08rem; }
  .executive-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 22px 0 0;
    padding: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    list-style: none;
  }
  .executive-facts li { padding: 14px 18px; border-left: 1px solid var(--rule); }
  .executive-facts li:first-child { padding-left: 0; border-left: 0; }
  .executive-facts strong { display: block; color: var(--navy); font-family: var(--serif); font-size: 1.1rem; font-weight: 500; }
  .executive-facts span { display: block; margin-top: 2px; color: var(--muted); font-size: .75rem; line-height: 1.4; }

  .executive-range {
    padding: clamp(42px, 5.5vw, 68px) 0;
    color: #fff;
    background: var(--navy);
    border-bottom: 1px solid var(--navy-hairline);
    scroll-margin-top: 56px;
  }
  .executive-range__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
    gap: clamp(24px, 5vw, 68px);
    align-items: end;
    margin-bottom: clamp(28px, 4vw, 46px);
  }
  .executive-range h2 { max-width: 18ch; margin: 0; color: #fff; }
  .executive-range__intro { margin: 0; color: var(--on-navy); font-size: 1rem; line-height: 1.62; }
  .executive-range__index {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 6vw, 74px);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .executive-range__index li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    padding: 17px 0 18px;
    border-top: 1px solid var(--navy-hairline);
  }
  .executive-range__index > li > span {
    color: var(--aqua-bright);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
  }
  .executive-range__index h3 { margin: 0 0 5px; color: #fff; font-size: 1.03rem; }
  .executive-range__index p { margin: 0; color: var(--on-navy); font-size: .86rem; line-height: 1.54; }

  .leadership-fit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(24px, 5vw, 52px);
    margin: 24px 0 30px;
    padding: 0;
    border-bottom: 1px solid var(--rule);
    list-style: none;
  }
  .leadership-fit li {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--rule);
  }
  .leadership-fit strong { color: var(--navy); font-family: var(--serif); font-size: 1.02rem; font-weight: 500; }
  .leadership-fit span { color: var(--ink-soft); font-size: .86rem; line-height: 1.5; }

  @media (max-width: 900px) {
    .executive-summary .who-grid,
    .executive-range__head { grid-template-columns: 1fr; }
  }
  @media (max-width: 680px) {
    .executive-facts,
    .executive-range__index,
    .leadership-fit { grid-template-columns: 1fr; }
    .executive-facts li,
    .executive-facts li:first-child { padding: 12px 0; border-left: 0; border-top: 1px solid var(--rule); }
    .executive-facts li:first-child { border-top: 0; }
  }
  @media (max-width: 620px) {
    .top .shell { gap: 10px; }
    .top-name { gap: 7px; }
    .top-name strong { font-size: .88rem; white-space: nowrap; }
    .top-link { padding: .45rem .62rem; font-size: .58rem; letter-spacing: .05em; }
    .top-link__full { display: none; }
    .top-link__compact { display: inline; }
  }
  @media (min-width: 621px) { .top-link__compact { display: none; } }