/* ============================================================
   Yield Dynamics
   Shared stylesheet. Carries the FAFAI advertisement identity.
   Palette and type are fixed by the printed ad and the logo sheet.
   ============================================================ */

/* ---------- Fonts -------------------------------------------------
   Charis SIL stands in for Bitstream Charter (the ad face).
   Lato stands in for Carlito, as sanctioned by the logo sheet.
------------------------------------------------------------------ */
@font-face {
  font-family: 'Charis';
  src: url('../fonts/charis-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Charis';
  src: url('../fonts/charis-400i.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Charis';
  src: url('../fonts/charis-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LatoWeb';
  src: url('../fonts/lato-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LatoWeb';
  src: url('../fonts/lato-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------------------------------------------- */
:root {
  --navy:        #17324E;
  --navy-soft:   #2C4B69;
  --amber:       #B8672A;
  --amber-pale:  #E8D3BE;
  --cream:       #FDF9F3;
  --cream-panel: #F6EDE1;
  --mute:        #6E7C8A;
  --mute-light:  #8A96A2;
  --rule:        #E3D6C6;
  --rule-cool:   #D6DDE4;
  --band:        #B9C6D2;

  --serif: 'Charis', 'Bitstream Charter', Charter, 'Source Serif 4', Georgia, serif;
  --sans:  'LatoWeb', Carlito, Calibri, 'Source Sans 3', system-ui, sans-serif;

  --measure: 62rem;   /* main text column */
  --wide:    78rem;   /* figures, bands, wide grids */

  --s1: 0.35rem;
  --s2: 0.7rem;
  --s3: 1.2rem;
  --s4: 2rem;
  --s5: 2.5rem;
  --s6: 3.6rem;
  --s7: 7rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--amber); text-decoration: none; border-bottom: 1px solid var(--amber-pale); }
a:hover { border-bottom-color: var(--amber); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--cream);
  padding: .7rem 1rem; z-index: 100;
  font-family: var(--sans); font-size: .9rem;
  border: 0;
}
.skip:focus { left: 0; }

/* ---------- Layout ------------------------------------------------ */
.wrap {
  width: min(100% - 2.5rem, var(--measure));
  margin-inline: auto;
}
.wrap-wide {
  width: min(100% - 2.5rem, var(--wide));
  margin-inline: auto;
}

section { padding-block: var(--s5); }
section.tight { padding-block: var(--s3); }

hr.rule {
  border: 0; height: 1px; background: var(--rule);
  margin-block: var(--s4);
}

/* ---------- Type -------------------------------------------------- */
.eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 .9rem;
}
.eyebrow::after {
  content: "";
  display: block;
  width: 3.4rem; height: 2px;
  background: var(--amber);
  margin-top: .65rem;
}
.eyebrow.bare::after { display: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.16;
  margin: 0 0 var(--s3);
  letter-spacing: -0.004em;
}

h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.5rem);
  max-width: none;
}
h2 {
  font-size: clamp(1.55rem, 3.4vw, 2.3rem);
  max-width: none;
}
h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  max-width: none;
}
h4 {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--s2);
}

/* The literary voice of the ad: Charter italic, muted */
.lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.08rem, 2.1vw, 1.32rem);
  line-height: 1.58;
  color: var(--mute);
  max-width: none;
  margin: 0 0 var(--s3);
}
.lede-sm {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--mute);
  max-width: none;
  margin: 0 0 var(--s3);
}

/* The tracked navy statement, as under the ad's subhead */
.statement {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(.95rem, 1.9vw, 1.12rem);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--s3);
}

p { margin: 0 0 var(--s3); max-width: none; }
p.wide-p { max-width: none; }

.note-small {
  font-size: .85rem;
  color: var(--mute);
  line-height: 1.55;
  max-width: none;
}

strong { font-weight: 700; }

/* ---------- Header ------------------------------------------------ */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--cream);
  position: sticky; top: 0; z-index: 40;
}
.header-inner {
  width: min(100% - 2.5rem, var(--wide));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding-block: .95rem;
}

.brand { display: flex; align-items: center; gap: .7rem; border: 0; }
.brand:hover { border: 0; }
.brand svg { width: 38px; height: 35px; flex: none; }
.brand-word {
  font-family: var(--sans);
  color: var(--navy);
  line-height: 1.02;
  letter-spacing: .17em;
  font-size: .78rem;
}
.brand-word b { display: block; font-weight: 700; }

.nav { display: flex; align-items: center; gap: 1.35rem; flex-wrap: wrap; }
.nav a {
  font-family: var(--sans);
  font-size: .84rem;
  color: var(--navy);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.nav a:hover, .nav a[aria-current="page"] {
  border-bottom-color: var(--amber);
  color: var(--navy);
}

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--rule);
  color: var(--navy); font-family: var(--sans); font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .5rem .8rem; cursor: pointer;
}

/* ---------- Applications dropdown --------------------------------- */
.has-sub {
  position: relative;
  display: inline-flex;   /* match the box model of the sibling links */
  align-items: center;
}
.has-sub::after {           /* invisible bridge across the gap to the menu */
  content: "";
  position: absolute;
  top: 100%; left: -1rem;
  width: 21rem; height: 1.15rem;
}
.subnav {
  display: none;
  position: absolute; top: calc(100% + .9rem); left: -1rem;
  min-width: 21rem;
  background: var(--cream);
  border: 1px solid var(--rule);
  box-shadow: 0 10px 28px rgba(23,50,78,.10);
  padding: .45rem 0;
  list-style: none; margin: 0; z-index: 50;
}
/* an invisible bridge across the gap, so the menu survives the mouse
   travelling from the link down to the panel */
.has-sub:hover::after,
.has-sub:focus-within::after {
  content: "";
  position: absolute;
  top: 100%; left: -1.2rem; right: -1.2rem;
  height: 1.2rem;
}
.has-sub:hover .subnav,
.has-sub:focus-within .subnav { display: block; }
.subnav li { margin: 0; }
.subnav a {
  display: block;
  padding: .5rem 1.1rem;
  font-size: .85rem;
  color: var(--navy);
  border-bottom: 0;
  white-space: nowrap;
}
.subnav a:hover, .subnav a:focus-visible {
  background: rgba(184,103,42,.07);
  color: var(--amber);
  border-bottom: 0;
}
.subnav .subnav-all {
  border-top: 1px solid var(--rule);
  margin-top: .45rem; padding-top: .6rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream);
    border-bottom: 1px solid var(--rule);
    flex-direction: column; align-items: flex-start;
    gap: 0; padding: .5rem 1.25rem 1.25rem;
  }
  .nav.open { display: flex; }
  .nav a { padding: .65rem 0; width: 100%; border-bottom: 1px solid var(--rule); }
  .site-header { position: relative; }

  /* the dropdown becomes a plain indented list inside the open menu */
  .has-sub { width: 100%; }
  .subnav {
    display: block; position: static; min-width: 0; width: 100%;
    border: 0; box-shadow: none; background: none;
    padding: 0 0 .3rem .9rem;
  }
  .subnav a {
    padding: .5rem 0; font-size: .82rem; color: var(--mute);
    border-bottom: 1px solid var(--rule); white-space: normal;
  }
  .subnav .subnav-all { border-top: 0; margin-top: 0; padding-top: .5rem; }
}

/* a small hinge line used to return to the main argument */
.hinge {
  font-family: var(--sans);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--mute-light);
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
  margin: 0 0 var(--s4);
}

/* ---------- Page intro / status ------------------------------------ */
.page-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.24rem);
  line-height: 1.58;
  color: var(--mute);
  max-width: 50ch;
  margin: 0 0 var(--s3);
}

/* ---------- Test-it-yourself callout ------------------------------- */
.testbox {
  border: 1px solid var(--rule);
  background: var(--cream-panel);
  padding: var(--s4);
  margin-block: var(--s4);
}
.testbox h4 { color: var(--amber); letter-spacing: .17em; }
.testbox p { margin-bottom: var(--s2); max-width: none; }
.testbox p:last-child { margin-bottom: 0; }

/* ---------- Today / with TC-APC table ------------------------------- */
.dtable { width: 100%; border-collapse: collapse; margin-top: var(--s4); }
.dtable th, .dtable td {
  text-align: left;
  vertical-align: top;
  padding: .85rem 1rem .85rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .93rem;
  line-height: 1.55;
}
.dtable thead th {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute);
  border-bottom: 1px solid var(--navy);
  padding-bottom: .6rem;
}
.dtable tbody th {
  font-family: var(--sans); font-weight: 700;
  color: var(--navy); width: 22%;
}
.dtable td { color: var(--mute); width: 39%; }
.dtable td.after { color: var(--navy); }
.dtable thead th.after { color: var(--amber); }
@media (max-width: 720px) {
  .dtable, .dtable tbody, .dtable tr, .dtable th, .dtable td { display: block; width: auto; }
  .dtable thead { display: none; }
  .dtable tr { border-bottom: 1px solid var(--rule); padding-bottom: .8rem; margin-bottom: .8rem; }
  .dtable th, .dtable td { border: 0; padding: .15rem 0; }
  .dtable tbody th { font-size: .95rem; margin-bottom: .25rem; }
  .dtable td::before {
    content: "Today  ";
    font-family: var(--sans); font-size: .7rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase; color: var(--mute-light);
    display: block; margin-top: .5rem;
  }
  .dtable td.after::before { content: "With TC-APC  "; color: var(--amber); }
}

/* ---------- Limits -------------------------------------------------- */
.limits { list-style: none; margin: var(--s4) 0 0; padding: 0; }
.limits li {
  border-top: 1px solid var(--rule);
  padding: var(--s3) 0;
  max-width: 72ch;
}
.limits li:last-child { border-bottom: 1px solid var(--rule); }
.limits b { display: block; font-family: var(--sans); font-size: .95rem; margin-bottom: .3rem; }
.limits span { color: var(--mute); font-size: .95rem; }

/* ---------- Sector strip ------------------------------------------
   Sits under the header, scrolls away with the page. Names every
   industry on every page, and wraps rather than hides on a phone.
------------------------------------------------------------------ */
.sectors {
  border-bottom: 1px solid var(--rule);
  background: var(--cream);
}
.sectors ul {
  width: min(100% - 2.5rem, var(--wide));
  margin-inline: auto;
  list-style: none;
  margin-block: 0;
  padding: .58rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: .15rem;
}
.sectors li { display: flex; align-items: center; }
.sectors li + li::before {
  content: "";
  width: 1px; height: .74rem;
  background: var(--rule);
  margin-inline: .9rem;
  flex: none;
}
.sectors a {
  font-family: var(--sans);
  font-size: .705rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute);
  border-bottom: 0;
  white-space: nowrap;
  padding-block: .2rem;
}
.sectors a:hover,
.sectors a:focus-visible { color: var(--amber); border-bottom: 0; }

@media (max-width: 760px) {
  /* wrapping would leave a divider stranded at the start of a line */
  .sectors li + li::before { display: none; }
  .sectors ul { column-gap: 1.15rem; row-gap: .3rem; }
  .sectors a { font-size: .66rem; letter-spacing: .11em; }
}

/* ---------- Hero -------------------------------------------------- */
.hero { padding-block: var(--s6) var(--s5); }
.hero h1 { margin-bottom: var(--s4); }

@media (max-width: 700px) {
  /* the strip costs height at the top, so take it back here */
  .hero { padding-block: var(--s4) var(--s4); }
}

.hero-reach {
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--mute);
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
  margin-top: var(--s4);
  max-width: 72ch;
}
.hero-reach a { color: var(--navy); border-bottom-color: var(--amber-pale); }
.hero-reach a:hover { border-bottom-color: var(--amber); }

/* ---------- The false-signal figure ------------------------------- */
.figure-block { margin-block: var(--s4) var(--s3); }
.figure-block svg { width: 100%; height: auto; }

.figcap-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  align-items: baseline;
  margin-top: var(--s3);
}
.figcap-split p {
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--navy);
  margin: 0;
  max-width: none;
}
.figcap-split .punch { font-weight: 700; }
@media (max-width: 760px) {
  .figcap-split { grid-template-columns: 1fr; gap: var(--s2); }
}

/* Diagrams are drawn twice: a wide version and a narrow one, so the
   labels stay legible on a phone instead of shrinking to nothing. */
.fig-narrow { display: none; }
@media (max-width: 700px) {
  .fig-wide { display: none; }
  .fig-narrow { display: block; }
}

/* the sticky header must not cover an anchored heading */
[id] { scroll-margin-top: 5.5rem; }
.figcap {
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--navy);
  max-width: none;
  margin-top: var(--s3);
  line-height: 1.6;
}

/* ---------- Two-column technical body ----------------------------- */
.cols2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
}
.cols3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4) var(--s4);
}
.cols2 p, .cols3 p { max-width: none; }
@media (max-width: 760px) {
  .cols2, .cols3 { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ---------- Two-column prose --------------------------------------
   A run of paragraphs set in two columns. Halves the height and gives
   a shorter measure than one wide column would.
------------------------------------------------------------------ */
.prose {
  columns: 2;
  column-gap: var(--s5);
  max-width: none;
}
.prose p { max-width: none; break-inside: avoid; margin-bottom: var(--s3); }
.prose p:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .prose { columns: 1; } }

/* ---------- Marked block (the ad's ruled callouts) ---------------- */
.marked {
  border-left: 2px solid var(--rule-cool);
  padding-left: var(--s3);
}
.marked.amber { border-left-color: var(--amber); border-left-width: 3px; }
.marked h4 { margin-bottom: .35rem; }
.marked p { margin-bottom: 0; color: var(--mute); font-size: .95rem; }

/* ---------- The turn: solution block ------------------------------ */
.turn {
  border-left: 3px solid var(--amber);
  padding-left: var(--s4);
  margin-block: var(--s5);
}
.turn .kicker {
  max-width: none;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.9vw, 1.85rem);
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 var(--s3);
  max-width: none;
}
.turn h2 { margin-bottom: var(--s2); }

/* ---------- Standalone claim line ----------------------------------- */
.claim {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.7vw, 1.75rem);
  line-height: 1.28;
  color: var(--navy);
  max-width: none;
  margin: 0 0 var(--s3);
}

/* ---------- Split kicker -------------------------------------------
   The question sits in the left column, the answer in the right, so the
   line lands across the gutter instead of wrapping mid-sentence.
------------------------------------------------------------------ */
.kicker-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  align-items: baseline;
  margin: 0 0 var(--s4);
}
.kicker-split p {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.24;
  margin: 0;
  max-width: none;
}
.kicker-split .q { color: var(--navy); }
.kicker-split .a { color: var(--amber); }
@media (max-width: 760px) {
  .kicker-split { grid-template-columns: 1fr; gap: var(--s2); }
}
.kicker-split.sm p { font-size: clamp(1.05rem, 2.1vw, 1.38rem); font-weight: 400; }
.kicker-split.sm .q { font-style: italic; color: var(--mute); }
.kicker-split.sm .a { font-weight: 700; }

/* ---------- Navy band (full bleed) -------------------------------- */
.band-navy {
  background: var(--navy);
  color: var(--cream);
  padding-block: var(--s5);
}
.band-navy h2, .band-navy h3, .band-navy h4 { color: var(--cream); }
.band-navy p { color: #C9D4DF; }
.band-navy .eyebrow { color: #D9A46F; }
.band-navy .eyebrow::after { background: #D9A46F; }
.band-navy a { color: #E0A86F; border-bottom-color: rgba(224,168,111,.4); }
.band-navy a:hover { border-bottom-color: #E0A86F; }

.plate { text-align: center; }
.plate img {
  margin-inline: auto;
  width: 100%;
  max-width: 1672px;
}
.plate-cap {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: #CBD6E1;
  max-width: 100ch;
  margin: var(--s3) auto 0;
  line-height: 1.55;
}
.plate-cap span {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: .82rem;
  color: #93A3B4;
  margin-top: .6rem;
}

/* ---------- Hardware / supply ------------------------------------- */
.supply::after { content: ""; display: table; clear: both; }
.supply-fig {
  float: left;
  width: 46%;
  margin: .3rem var(--s4) 1rem 0;
}
.supply img { border: 1px solid var(--rule); }
@media (max-width: 760px) {
  .supply-fig { float: none; width: 100%; margin: 0 0 var(--s3); }
}

/* full-width picture, specification in two columns underneath */
.supply.full .supply-fig { float: none; width: 100%; margin: 0 0 var(--s4); }
.supply.full .spec-list { columns: 2; column-gap: var(--s5); }
.supply.full .spec-list li { break-inside: avoid; }
@media (max-width: 760px) { .supply.full .spec-list { columns: 1; } }

.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  border-bottom: 1px solid var(--rule);
  padding: .72rem 0;
  font-family: var(--sans);
  font-size: .94rem;
  color: var(--mute);
  line-height: 1.6;
}
.spec-list li b {
  font-weight: 700;
  color: var(--navy);
  margin-right: .45rem;
}
.spec-list li b::after { content: "."; }

.imgcap {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--mute);
  margin-top: .7rem;
  line-height: 1.55;
  max-width: 60ch;
}

/* ---------- Text beside a diagram ---------------------------------- */
.splitfig {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--s5);
  align-items: center;
  margin-top: var(--s3);
}
.splitfig > div:first-child p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .splitfig { grid-template-columns: 1fr; gap: var(--s3); }
}

/* ---------- Steps (a real sequence) ------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s4); }
.step {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: var(--s3);
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--amber);
  line-height: 1;
}
.step h3 { font-size: 1.18rem; margin-bottom: .45rem; }
.step p { margin: 0; color: var(--mute); font-size: .96rem; max-width: none; }
@media (max-width: 560px) {
  .step { grid-template-columns: 1fr; gap: .5rem; }
}

/* ---------- The eight doors --------------------------------------- */
.doors { list-style: none; margin: 0; padding: 0; }
.doors li { border-top: 1px solid var(--rule); }
.doors li:last-child { border-bottom: 1px solid var(--rule); }
.doors a {
  display: grid;
  grid-template-columns: 19rem 1fr;
  gap: var(--s3) var(--s4);
  align-items: baseline;
  padding: var(--s3) 0;
  border: 0;
  color: var(--navy);
}
.doors a:hover { border: 0; background: rgba(184,103,42,.045); }
.doors .door-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
}
.doors a:hover .door-name { color: var(--amber); }
.doors .door-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--mute);
  line-height: 1.5;
}
@media (max-width: 780px) {
  .doors a { grid-template-columns: 1fr; gap: .3rem; }
}

/* ---------- Evidence ---------------------------------------------- */
.evidence {
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: var(--s5);
  align-items: start;
}
@media (max-width: 900px) {
  .evidence { grid-template-columns: 1fr; }
}
.cert-card { border: 1px solid var(--rule); background: #fff; padding: .55rem; }
.cert-card img { display: block; }

.witness {
  display: flex; gap: var(--s3); align-items: center;
  margin-top: var(--s3);
}
.witness img {
  width: 72px; height: 72px; flex: none;
  border: 1px solid var(--rule);
  object-fit: cover;
}
.witness-name {
  font-family: var(--sans); font-size: .9rem; line-height: 1.45; color: var(--navy);
}
.witness-name span { display: block; color: var(--mute); font-size: .82rem; }

blockquote.pull {
  margin: 0 0 var(--s3);
  border-left: 3px solid var(--amber);
  padding-left: var(--s3);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--navy);
  max-width: 50ch;
}

.status {
  display: inline-block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--amber-pale);
  padding: .3rem .65rem;
  margin-bottom: var(--s3);
}
.status.validated { color: var(--navy); border-color: var(--rule-cool); background: #EEF2F6; }

/* ---------- Blocks ------------------------------------------------
   Dense, gridded panels for the application pages. Hairline dividers
   come from a 1px grid gap over a rule-coloured background, which
   keeps the print language rather than drawing boxes.
------------------------------------------------------------------ */
.blocks {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-block: var(--s4);
}
.blocks.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blocks.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blocks.four  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blocks.one   { grid-template-columns: 1fr; }

/* chart beside a stack of blocks, as the slide sets it */
.chartrow {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--s4);
  align-items: center;
  margin-block: var(--s4);
}
.chartrow .blocks { margin-block: 0; }
@media (max-width: 900px) {
  .chartrow { grid-template-columns: 1fr; }
}

/* the amber bar the decks use for an honest qualifier */
.callout {
  background: var(--amber);
  color: #FFF7EF;
  font-family: var(--sans);
  font-size: .95rem;
  line-height: 1.55;
  padding: 1.05rem 1.3rem;
  margin-block: var(--s4) 0;
  max-width: none;
}
.callout strong { color: #fff; }

@media (max-width: 820px) { .blocks.three, .blocks.four { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .blocks.two { grid-template-columns: 1fr; } }

.block {
  background: var(--cream);
  padding: 1.55rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
}
.block.accent { background: var(--cream-panel); }

.block .num {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--amber);
  margin-bottom: .7rem;
}
.block .lbl {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 .55rem;
}
.block h3,
.block h4 {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
  margin: 0 0 .55rem;
  max-width: none;
}
.block p {
  font-family: var(--sans);
  font-size: .91rem;
  line-height: 1.58;
  color: var(--mute);
  margin: 0 0 .6rem;
  max-width: none;
}
.block p:last-child { margin-bottom: 0; }
.block p strong { color: var(--navy); }

/* a block that carries a short statement rather than a card */
.block.wide { grid-column: 1 / -1; }
.block.wide p { font-size: .96rem; }

@media (max-width: 900px) {
  .blocks.three, .blocks.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .blocks.two, .blocks.three, .blocks.four { grid-template-columns: 1fr; }
  .block { padding: 1.3rem 1.25rem; }
}

/* application pages run tighter than the home page */
.app section { padding-block: var(--s5); }
.app section.tight { padding-block: var(--s3); }
.app h2 { margin-bottom: var(--s2); }
.app .lede-sm { margin-bottom: var(--s3); }

.eqn {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--navy);
  margin: .9rem 0 .9rem;
  letter-spacing: .01em;
}
.eqn sub { font-size: .68em; }

/* ---------- Reaction equations ------------------------------------- */
.eqn {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 2.1;
  color: var(--navy);
  border-left: 3px solid var(--amber);
  padding: .9rem 0 .9rem var(--s3);
  margin-block: var(--s3);
  max-width: none;
}
.eqn span { display: block; white-space: nowrap; }

/* ---------- Small status line inside a block ----------------------- */
.block .stat {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute-light);
  margin: var(--s2) 0 0;
  border-top: 1px solid var(--rule);
  padding-top: .6rem;
}
.block.accent .stat { color: var(--amber); border-top-color: var(--amber-pale); }
.block .door {
  font-family: var(--serif);
  font-style: italic;
  color: var(--mute);
  margin-bottom: var(--s2);
}

/* ---------- Two figures side by side -------------------------------- */
.figpair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  align-items: center;
  margin-block: var(--s4);
}
.figpair figure { margin: 0; }
.figpair svg { width: 100%; height: auto; }
@media (max-width: 860px) { .figpair { grid-template-columns: 1fr; } }

/* ---------- Reproduced document ------------------------------------
   A centred reading column. Not a half-width ribbon: the margins are
   equal, which is how a document is set rather than a web section.
------------------------------------------------------------------ */
.doc { max-width: 74ch; margin-inline: auto; }
.doc h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin-top: var(--s5);
  margin-bottom: var(--s2);
  max-width: none;
}
.doc h3:first-child { margin-top: 0; }
.doc h3 .n { color: var(--amber); margin-right: .6rem; }
.doc p { font-size: 1.09rem; line-height: 1.72; margin-bottom: var(--s3); max-width: none; }
.doc ul { margin: 0 0 var(--s3); padding-left: 1.1rem; }
.doc li { font-size: 1.06rem; line-height: 1.66; margin-bottom: .5rem; color: var(--navy); }
.doc .formula {
  font-family: var(--serif);
  font-size: 1.12rem;
  border-left: 3px solid var(--amber);
  padding: .7rem 0 .7rem var(--s3);
  margin-block: var(--s3);
}
.doc .sig {
  border-top: 1px solid var(--rule);
  margin-top: var(--s5);
  padding-top: var(--s3);
  font-size: .95rem;
  color: var(--mute);
}
@media (max-width: 700px) { .doc p, .doc li { font-size: 1.02rem; } }

/* ---------- Status table ------------------------------------------- */
.stable { width: 100%; border-collapse: collapse; margin-block: var(--s4); font-family: var(--sans); font-size: .94rem; }
.stable th, .stable td { text-align: left; vertical-align: top; padding: .85rem 1.2rem .85rem 0; border-bottom: 1px solid var(--rule); }
.stable thead th { font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--mute); border-bottom: 1px solid var(--navy); padding-bottom: .6rem; }
.stable tbody th { font-weight: 700; color: var(--navy); width: 22rem; }
.stable.three tbody th { width: 15rem; }
.mlabel { display: none; }
@media (max-width: 720px) {
  .mlabel {
    display: block; font-size: .66rem; font-weight: 700; letter-spacing: .15em;
    text-transform: uppercase; color: var(--mute-light); margin-top: .5rem;
  }
}
.stable td { color: var(--mute); }
.stable tr.lead th { color: var(--navy); }
.stable tr.lead td { color: var(--navy); font-weight: 700; }
.stable a { color: var(--navy); border-bottom-color: var(--amber-pale); }
@media (max-width: 720px) {
  .stable, .stable tbody, .stable tr, .stable td, .stable th { display: block; width: auto; }
  .stable thead { display: none; }
  .stable tr { border-bottom: 1px solid var(--rule); padding-block: .8rem; }
  .stable th, .stable td { border: 0; padding: 0 0 .3rem; }
}

/* three-column variant, for the variable against the proxy */
.stable.tri tbody th { width: 15rem; }
.stable.tri td.a { color: var(--navy); }
.stable.tri td.b { color: var(--mute); }
@media (max-width: 780px) {
  .stable.tri td::before {
    display: block; font-size: .66rem; font-weight: 700; letter-spacing: .15em;
    text-transform: uppercase; color: var(--mute-light); margin-top: .45rem;
  }
  .stable.tri td.a::before { content: "What decides the money"; color: var(--amber); }
  .stable.tri td.b::before { content: "What you steer by instead"; }
}

/* ---------- Offers ------------------------------------------------ */
.offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 760px) { .offers { grid-template-columns: 1fr; } }
.offer { background: var(--cream-panel); padding: var(--s4); }
.offer h3 {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--s3);
  max-width: none;
}
.offer .offer-title {
  font-family: var(--serif); font-style: italic;
  font-size: 1.22rem; line-height: 1.38; color: var(--navy);
  margin: 0 0 .6rem; max-width: 34ch;
}
.offer p { font-size: .94rem; color: var(--mute); max-width: 40ch; margin-bottom: var(--s3); }
.offer p:last-child { margin-bottom: 0; }

.btn {
  display: inline-block;
  font-family: var(--sans); font-size: .86rem; font-weight: 700;
  letter-spacing: .04em;
  background: var(--navy); color: var(--cream);
  padding: .78rem 1.3rem;
  border: 1px solid var(--navy);
}
.btn:hover { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn.ghost { background: transparent; color: var(--navy); }
.btn.ghost:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }

/* ---------- Footer ------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--s5) var(--s4);
  margin-top: var(--s5);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s4);
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-grid h4 { color: var(--mute); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .45rem; font-size: .9rem; }
.footer-grid a { color: var(--navy); border-bottom-color: transparent; }
.footer-grid a:hover { border-bottom-color: var(--amber); }

.colophon {
  border-top: 1px solid var(--rule);
  margin-top: var(--s4);
  padding-top: var(--s3);
  font-size: .82rem;
  color: var(--mute);
  line-height: 1.6;
  max-width: none;
}

/* ---------- Utilities ---------------------------------------------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.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;
}

/* ---------- What it is --------------------------------------------
   One line between the sector strip and the hero, home page only.
   Says what TC-APC does before the hero asks its question.
   New selectors only; the hero rules above are untouched.
------------------------------------------------------------------ */
.whatis {
  background: var(--cream-panel);
  border-bottom: 1px solid var(--rule);
}
.whatis p {
  margin: 0;
  padding-block: .8rem;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--navy);
  text-wrap: pretty;
}
.whatis b { font-weight: 700; letter-spacing: .02em; }

@media (max-width: 700px) {
  .whatis p { font-size: .92rem; padding-block: .65rem; }
}

/* ---------- Plant Ledger: tier headings ----------------------------- */
.tier-head { margin: var(--s5) 0 0; }
.tier-head:first-of-type { margin-top: var(--s4); }

/* a block that spans the whole grid but keeps the card's own type sizes */
.block.span-all { grid-column: 1 / -1; }

/* ---------- Where you are -------------------------------------------
   The current page is marked in the industry strip and in the
   Applications menu, and the menu's parent link is marked while you are
   anywhere inside that section. New selectors only.
--------------------------------------------------------------------- */
.sectors a[aria-current="page"] {
  color: var(--amber);
  font-weight: 700;
  box-shadow: 0 2px 0 0 var(--amber);   /* an underline that costs no height */
}
.subnav a[aria-current="page"] {
  color: var(--amber);
  font-weight: 700;
  background: rgba(184,103,42,.07);
  box-shadow: inset 3px 0 0 0 var(--amber);
}
.nav a.in-section { border-bottom-color: var(--amber-pale); }

/* the page you are on, in the main menu: amber, with a thicker underline.
   Hover keeps the thin line, so the two cannot be confused. */
.nav a[aria-current="page"] {
  color: var(--amber);
  border-bottom-color: transparent;
  box-shadow: 0 2px 0 0 var(--amber);
}

/* ---------- The mark on the industry strip --------------------------
   "Find the optimum. Hold it while it moves." sits at the right end of
   the strip, in the serif, so it reads as a signature and not as
   another industry. New selectors only.
--------------------------------------------------------------------- */
.sectors .mark {
  margin-left: auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: .86rem;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--mute);
  white-space: nowrap;
}
.sectors .mark::before { content: none; }

@media (max-width: 1180px) {
  .sectors .mark { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 700px) {
  .sectors .mark { font-size: .8rem; white-space: normal; }
}

/* ---------- Plain link list (the 404 page) -------------------------- */
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { margin: 0 0 .45rem; font-size: .95rem; }

/* ---------- WhatsApp ------------------------------------------------ */
/* Beside the email button in each call to action. */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.btn-wa { display: inline-flex; align-items: center; gap: .5rem; }
.btn-wa .wa-icon { color: #1FA855; flex: none; }
.btn-wa:hover .wa-icon { color: #25D366; }

/* Always within reach, bottom right, in the site's own navy. */
.wa-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 30;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-size: .86rem; font-weight: 700; letter-spacing: .04em;
  background: var(--navy); color: var(--cream);
  padding: .7rem 1.05rem;
  border: 1px solid var(--cream);
  box-shadow: 0 2px 10px rgba(23, 50, 78, .28);
}
.wa-float .wa-icon { color: #25D366; flex: none; }
.wa-float:hover { background: var(--amber); border-color: var(--amber); color: #fff; }
.wa-float:hover .wa-icon { color: #fff; }

@media (max-width: 720px) {
  .wa-float { padding: .62rem .85rem; font-size: .82rem; }
  .site-footer { padding-bottom: 5.5rem; }   /* keeps the last footer lines clear of the button */
}
@media print { .wa-float { display: none; } }

/* ---------- Industry strip: applications, industries, then the mark --
   Row 1 holds the nine applications, row 2 the industry pages led by
   "Industries:", row 3 the mark, all starting at the same left edge.
--------------------------------------------------------------------- */
.sectors ul:first-of-type { padding-bottom: .1rem; }
.sectors ul + ul { padding-top: 0; }
.sectors .lead a { font-weight: 700; color: var(--navy); }
.sectors .lead a:hover, .sectors .lead a:focus-visible { color: var(--amber); }
.sectors p.mark {
  width: min(100% - 2.5rem, var(--wide));
  margin: 0 auto;
  padding: .1rem 0 .58rem;
}

/* ---------- Dryers page ---------------------------------------------
   The two-part jump under the hero, the money tiles, tick lists, the
   worked example table, the two calculators and the assumptions at the
   foot of the page. New selectors only; nothing above is changed.
--------------------------------------------------------------------- */
.jump {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: var(--s4);
}
.jump a {
  display: block;
  background: var(--cream-panel);
  padding: 1.15rem 1.35rem 1.25rem;
  border: 0;
  color: var(--navy);
}
.jump a:hover, .jump a:focus-visible { background: #F1E3D1; border: 0; }
.jump .jn {
  display: block;
  font-family: var(--sans);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .3rem;
}
.jump .jt {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.25;
}
.jump a:hover .jt { color: var(--amber); }
.jump .jd {
  display: block;
  font-family: var(--sans);
  font-size: .9rem; line-height: 1.5;
  color: var(--mute);
  margin-top: .35rem;
}
@media (max-width: 620px) {
  .jump { grid-template-columns: 1fr; }
  .jump a { padding: 1rem 1.15rem 1.1rem; }
}

/* the money tiles */
.block .big {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  line-height: 1.1;
  color: var(--navy);
  margin: 0 0 .3rem;
}
.block.accent .big { color: var(--amber); }

/* short lists inside a block, each line led by an amber tick */
ul.ticks { list-style: none; margin: 0; padding: 0; }
ul.ticks li {
  position: relative;
  padding-left: 1.05rem;
  margin-bottom: .5rem;
  font-family: var(--sans);
  font-size: .91rem; line-height: 1.55;
  color: var(--mute);
}
ul.ticks li:last-child { margin-bottom: 0; }
ul.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .66em;
  width: .45rem; height: 2px;
  background: var(--amber);
}
ul.ticks b { color: var(--navy); font-weight: 700; }

/* the worked example */
.stable.worth tbody th { width: 15rem; }
.stable.worth thead th:last-child { text-align: right; padding-right: 0; }
.stable.worth td.rs {
  color: var(--navy); font-weight: 700;
  white-space: nowrap; text-align: right; padding-right: 0;
}
.stable.worth tr.lead td.rs { color: var(--amber); }
@media (max-width: 720px) {
  .stable.worth td.rs { text-align: left; white-space: normal; }
  .stable.worth td.blank { display: none; }
}

/* the calculators */
.calc {
  border: 1px solid var(--rule);
  background: var(--cream-panel);
  padding: var(--s4);
  margin-block: var(--s4) 0;
}
.calc-title {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 var(--s3);
}
.calc-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
  align-items: end;
}
.calc label { display: flex; flex-direction: column; justify-content: flex-end; margin: 0; }
.calc label span {
  display: block;
  font-family: var(--sans);
  font-size: .8rem; font-weight: 700; line-height: 1.35;
  color: var(--navy);
  margin-bottom: .35rem;
}
.calc input {
  width: 100%;
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--navy);
  background: #fff;
  border: 1px solid #D9C8B3;
  border-radius: 0;
  padding: .55rem .7rem;
  -moz-appearance: textfield;
  appearance: textfield;
}
.calc input::-webkit-outer-spin-button,
.calc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc input:focus { outline: 2px solid var(--amber); outline-offset: 0; border-color: var(--amber); }
.calc-out {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--navy);
  border-top: 1px solid var(--amber-pale);
  margin: var(--s3) 0 0;
  padding-top: var(--s3);
}
.calc-out b { font-weight: 700; }
.calc-total {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--amber);
}
.calc-note {
  font-family: var(--sans);
  font-size: .82rem; line-height: 1.55;
  color: var(--mute);
  margin: .7rem 0 0;
}
.calc-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) 10rem;
  gap: var(--s3);
  align-items: end;
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
}
.calc-title + .calc-row { border-top: 0; padding-top: 0; }
.calc-row .calc-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc-lever {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 .6rem;
}
.calc-res {
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--navy);
  text-align: right;
  margin: 0 0 .6rem;
}
@media (max-width: 900px) {
  .calc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-row { grid-template-columns: 1fr; gap: .5rem; }
  .calc-row .calc-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc-lever { margin: 0; }
  .calc-res { text-align: left; margin: 0; }
  .calc-res:empty { display: none; }
}
@media (max-width: 520px) {
  .calc { padding: var(--s3); }
  .calc-fields { gap: var(--s3) .8rem; }
  .calc-row .calc-fields { gap: .7rem .6rem; }
  .calc input { padding: .5rem .55rem; }
}

/* the assumptions, in small print at the foot of the page */
.assume { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.assume h4 { color: var(--mute); }
.assume ul { margin: 0; padding-left: 1.1rem; }
.assume li {
  font-size: .85rem; line-height: 1.55;
  color: var(--mute);
  margin-bottom: .4rem;
}

/* on a phone the dryers tables give the row title the full width, and the
   comparison table names its own columns */
@media (max-width: 720px) {
  .dtable.dry tbody th { width: auto; }
  .dtable.vs td::before { content: "General-purpose APC  "; }
  .dtable.vs td.after::before { content: "TC-APC  "; }
}

/* ---------- Version 59 ----------------------------------------------
   A slightly tighter industry strip between 761 and 1180 px, so each of
   its rows stays on one line on laptops and on large screens at high
   scaling. And the site stays light when a browser forces dark mode on
   websites: "only light" is the opt-out browsers honor.
--------------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1180px) {
  .sectors a { letter-spacing: .1em; }
  .sectors li + li::before { margin-inline: .7rem; }
}
:root { color-scheme: only light; }

/* ---------- WhatsApp and call, side by side ------------------------
   The two buttons always take the same width. The calling hours sit
   under the call button only. Inside the two-column offer boxes, and
   on phones, the buttons stack.
--------------------------------------------------------------------- */
.btn-pair {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: start;
  gap: var(--s2);
}
.btn-pair .btn { justify-content: center; white-space: nowrap; }
.btn-row:has(.btn-pair) { align-items: flex-start; }
.offer .btn-pair {
  grid-auto-flow: row;
  grid-auto-columns: max-content;
  justify-content: start;
  flex-basis: 100%;
}
.offer p.btn-row { max-width: none; }
.call-cell { display: grid; gap: .45rem; }
.btn-call { display: inline-flex; align-items: center; gap: .5rem; }
.btn-call .call-icon { flex: none; }
.call-hours {
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.4;
  color: var(--mute);
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .btn-pair { grid-auto-flow: row; grid-auto-columns: max-content; }
  .btn-pair .btn, .call-hours { white-space: normal; }
}

/* ---------- Advisors and associates --------------------------------
   The advisors bar above the header on every page, the advisor cards
   and the associates on About, the compact advisor strip on the home,
   partners and start pages, and the advisor line on application pages.
   New selectors only; nothing above is changed.
------------------------------------------------------------------ */
.advisor-bar { background: var(--navy); }
.advisor-bar-inner {
  width: min(100% - 2.5rem, var(--wide));
  margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: .75rem; row-gap: .1rem;
  padding-block: .5rem;
  font-family: var(--sans); font-size: .8rem; line-height: 1.45;
  color: #DCE3EA;
  border: 0;
}
.advisor-bar-inner:hover { border: 0; }
.advisor-bar .ab-label {
  font-size: .64rem; font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: var(--amber-pale);
}
.advisor-bar b { font-weight: 700; color: #FFFFFF; }
.advisor-bar .ab-sep { color: #8195A9; }
.advisor-bar-inner:hover b,
.advisor-bar-inner:focus-visible b { color: var(--amber-pale); }
@media (max-width: 760px) {
  .advisor-bar-inner {
    flex-direction: column; align-items: flex-start; row-gap: .05rem;
    font-size: .76rem; padding-block: .45rem .5rem;
  }
  .advisor-bar .ab-sep,
  .advisor-bar .ab-long { display: none; }
}

/* About: the line under the H1 */
.advised {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.1vw, 1.36rem);
  line-height: 1.5;
  color: var(--navy);
  margin: 0;
}
.advised b { font-weight: 700; }

/* About: advisor cards, on the hairline grid the blocks use */
.advisors {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  margin-block: var(--s4) 0;
}
.advisor {
  background: var(--cream);
  padding: 1.8rem 1.7rem 1.7rem;
  display: grid; grid-template-columns: 128px minmax(0, 1fr);
  column-gap: 1.4rem; align-items: start;
}
.advisor-photo {
  width: 128px; height: 128px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule); background: var(--cream-panel);
}
.advisor-role {
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--amber); margin: 0 0 .4rem;
}
.advisor h3 { font-size: clamp(1.35rem, 2.4vw, 1.6rem); margin: 0 0 .55rem; }
.advisor-lead {
  font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1.4;
  color: var(--navy); margin: 0 0 .3rem;
}
.advisor-note {
  font-family: var(--serif); font-style: italic; font-size: .98rem; line-height: 1.5;
  color: var(--mute); margin: 0 0 1rem;
}
.advisor-facts { list-style: none; margin: 0 0 .9rem; padding: 0; border-top: 1px solid var(--rule); }
.advisor-facts li {
  font-size: .9rem; line-height: 1.55; color: var(--navy);
  padding: .45rem 0; border-bottom: 1px solid var(--rule);
}
.advisor-deg { font-size: .84rem; line-height: 1.5; color: var(--mute); margin: 0 0 .5rem; }
.advisor-links { font-size: .84rem; margin: 0; }
.advisor-links .sep { color: var(--mute-light); }
@media (max-width: 1000px) { .advisors { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .advisor { grid-template-columns: 1fr; padding: 1.4rem 1.25rem; }
  .advisor-photo { width: 112px; height: 112px; margin-bottom: 1rem; }
}

/* About: associates, two columns of rows with hairlines between them */
.people-head { margin: var(--s4) 0 var(--s2); }
.people {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.person {
  display: grid; grid-template-columns: 84px minmax(0, 1fr);
  column-gap: 1.1rem; align-items: start;
  padding: 1.15rem 0; border-top: 1px solid var(--rule);
}
.avatar {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule); background: var(--cream-panel);
}
.avatar-initials {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.55rem; letter-spacing: .03em;
  color: var(--navy-soft);
}
.person-name {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 700; line-height: 1.3;
  color: var(--navy); margin: 0;
}
.person-tag,
.person-place {
  display: block; font-family: var(--sans); font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin: .25rem 0 0;
}
.person-tag { color: var(--amber); }
.person-place { color: var(--mute); }
.person-text { font-size: .89rem; line-height: 1.55; color: var(--navy); margin: .45rem 0 .35rem; }
.person-text .hl { color: var(--amber); font-weight: 700; }
.person-deg { font-size: .8rem; line-height: 1.5; color: var(--mute); margin: 0; }
@media (max-width: 860px) { .people { grid-template-columns: 1fr; } }
@media (max-width: 420px) {
  .person { grid-template-columns: 64px minmax(0, 1fr); column-gap: .9rem; }
  .avatar { width: 64px; height: 64px; }
  .avatar-initials { font-size: 1.2rem; }
}

/* About: the fifth commitment closes the row on wide screens */
.blocks.three > .block.span-2 { grid-column: span 2; }
@media (max-width: 620px) { .blocks.three > .block.span-2 { grid-column: auto; } }

/* Home, partners and start: the two advisors, compact */
.adv-mini {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3); margin: var(--s3) 0 var(--s4);
}
.adv-mini-item {
  display: grid; grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 1rem; align-items: center;
  color: var(--navy); border: 0;
}
.adv-mini-item:hover { border: 0; }
.adv-mini-item img {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule); background: var(--cream-panel);
}
.adv-mini-role {
  display: block; font-family: var(--sans); font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--amber);
}
.adv-mini-name {
  display: block; font-family: var(--serif); font-size: 1.08rem; font-weight: 700;
  line-height: 1.3; margin: .1rem 0 .15rem;
}
.adv-mini-line { display: block; font-size: .86rem; line-height: 1.45; color: var(--mute); }
.adv-mini-item:hover .adv-mini-name,
.adv-mini-item:focus-visible .adv-mini-name { color: var(--amber); }
@media (max-width: 720px) { .adv-mini { grid-template-columns: 1fr; } }

/* Application pages: one line naming the advisor whose field it is */
.adv-line {
  display: flex; align-items: center; gap: .85rem;
  margin: var(--s3) 0 0; max-width: 46rem;
  font-family: var(--sans); font-size: .92rem; line-height: 1.5; color: var(--navy);
}
.adv-line img {
  width: 52px; height: 52px; flex: none; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule); background: var(--cream-panel);
}

/* About: the wider circle, set as a statement with the amber bar */
.circle-line {
  margin: var(--s4) 0 var(--s3);
  max-width: 66rem;
  text-wrap: balance;
  border-left: 3px solid var(--amber);
  padding: .15rem 0 .15rem var(--s3);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.12rem, 2vw, 1.32rem);
  line-height: 1.45;
  color: var(--navy);
}

/* ---------- The science under TC-APC --------------------------------
   The navy band on the home page, the science card on application and
   industry pages, the advisor's record cards and lists.
   New selectors only; nothing above is changed.
------------------------------------------------------------------ */
.science-band h2 { margin-bottom: var(--s3); }
.science-lines { margin: 0 0 var(--s3); }
.science-lines p {
  margin: 0 0 .3rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.35;
  color: var(--cream);
}
.science-lines a { color: var(--cream); border-bottom: 1px solid rgba(232, 211, 190, .4); }
.science-lines a:hover,
.science-lines a:focus-visible { color: var(--amber-pale); border-bottom-color: var(--amber-pale); }
.science-close {
  font-family: var(--sans); font-size: 1.04rem; line-height: 1.55;
  color: #DCE3EA; margin: 0 0 var(--s4);
}
.band-navy .science-close { color: #DCE3EA; }
.science-adv {
  display: grid; grid-template-columns: 76px minmax(0, 1fr);
  column-gap: 1.1rem; align-items: center; max-width: 62rem;
}
.science-adv img {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .28); background: var(--navy-soft);
}
.science-adv p { margin: 0; font-size: .95rem; line-height: 1.58; color: #DCE3EA; }
.science-adv b { color: #FFFFFF; }

/* application and industry pages: the same idea as a card with the amber bar */
.science-card {
  border-left: 3px solid var(--amber);
  padding: .2rem 0 .2rem var(--s4);
  max-width: 64rem;
}
.science-card h2 { margin-bottom: var(--s2); }
.science-sub {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.9vw, 1.22rem);
  line-height: 1.55;
  color: var(--navy);
  margin: 0 0 var(--s3);
}
.science-card .science-adv { grid-template-columns: 60px minmax(0, 1fr); margin: var(--s3) 0 var(--s2); }
.science-card .science-adv img { width: 60px; height: 60px; border-color: var(--rule); background: var(--cream-panel); }
.science-card .science-adv p { color: var(--navy); font-size: .93rem; }
.science-lines.light p { color: var(--navy); font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.science-lines.light a { color: var(--navy); border-bottom-color: var(--amber-pale); }
.science-lines.light a:hover,
.science-lines.light a:focus-visible { color: var(--amber); border-bottom-color: var(--amber); }
.science-more { font-size: .86rem; margin: 0; }
@media (max-width: 620px) {
  .science-card { padding-left: var(--s3); }
  .science-adv { grid-template-columns: 60px minmax(0, 1fr); }
  .science-adv img { width: 60px; height: 60px; }
}

/* lists of his work, with the source under each line */
.work-list { list-style: none; margin: 0 0 var(--s2); padding: 0; border-top: 1px solid var(--rule); }
.work-list li {
  font-family: var(--sans); font-size: .9rem; line-height: 1.5; color: var(--navy);
  padding: .5rem 0; border-bottom: 1px solid var(--rule);
}
.work-list .src { display: block; font-size: .8rem; color: var(--mute); margin-top: .15rem; }
.block .work-list li { font-size: .86rem; }

/* track record: the two parts and the advisor's record cards */
.record-head { margin: var(--s4) 0 0; font-size: clamp(1.15rem, 2vw, 1.35rem); }
.record-cards { margin-top: var(--s3); }
.record-cards .block p.src { margin-top: auto; padding-top: .6rem; font-size: .84rem; }
.record-lists .block p.src { margin: .6rem 0 0; font-size: .84rem; }

/* advisors bar from tablet to small laptop: one advisor per line, both
   aligned after the label, with no separator left at a line end */
@media (min-width: 761px) and (max-width: 1080px) {
  .advisor-bar-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
  .advisor-bar .ab-sep { display: none; }
  .advisor-bar .ab-item { grid-column: 2; }
}
.advisor-bar .ab-item { text-wrap: balance; }
.adv-mini-line { text-wrap: balance; }
.nw { white-space: nowrap; }
.work-list sub { font-size: .75em; line-height: 0; }
/* phones: the advisor's photo sits at the top of his paragraph */
@media (max-width: 620px) {
  .science-adv { align-items: start; }
  .science-adv img { margin-top: .25rem; }
}

/* the strip under the header, from tablet to small laptop: spaced rather than divided, so a
   line that wraps never starts with a divider */
@media (min-width: 761px) and (max-width: 1099px) {
  .sectors li + li::before { display: none; }
  .sectors ul { column-gap: 1.15rem; row-gap: .3rem; }
}