/* ============================================================================
   APU Imports, Editorial Heritage design system
   Ivory paper, navy ink, blue accents, gold eyebrows, hairline rules.
   Cormorant Garamond for display, Jost 300 for body (loaded by head.php).
   Layers: tokens, base, type utilities, header and drawer, heroes, layout
   components, forms, long form, journal, footer, platform partials, admin
   section backgrounds, responsive, motion.
   ========================================================================== */

:root {
  --apu-blue: #4d5eb1;
  --apu-blue-deep: #344185;
  --apu-navy: #151727;
  --apu-ivory: #fbfaf6;
  --apu-warm-ivory: #f0eadb;
  --apu-soft-ivory: #f6f2e9;
  --apu-pale-blue: #e6e9f5;
  --apu-gold: #a88c45;
  --apu-gold-text: #7e755f;
  --apu-muted-text: #66676b;
  --apu-line: #d8d3c7;
  --white: #fff;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --page-gutter: clamp(1.5rem, 6.25vw, 7rem);
  --content-width: 101rem;
  --header-height: 6.75rem;
  --header-height-condensed: 4.4rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

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

html {
  /* Computer scale: every size in this sheet is rem or vw, so the root size
     scales the whole design at once, as browser zoom would. 62.5% on any
     computer, at any window width (user's call: the design read too large
     at 100%; and narrowing a laptop window must not make the text grow).
     Touch devices (phones, tablets) keep the full size below. */
  font-size: 10px;
  min-width: 20rem;
  scroll-behavior: smooth;
  /* In-page anchors (skip link, #top) land below the sticky header. */
  scroll-padding-top: calc(var(--header-height-condensed) + 1rem);
}

/* Phones and tablets: a touch screen with no mouse gets the design at its
   full size, which is what it was drawn for on small screens. A wide touch
   screen (a touch laptop, a large tablet held sideways) is read like a
   computer and keeps the 62.5% scale, otherwise every text came out 1.6 times
   larger than designed (user's report, 1 October 2026). */
@media (hover: none) and (pointer: coarse) and (max-width: 1100px) {
  html { font-size: 16px; }
}

/* Layout switch points: every @media width/height below is written twice,
   the original rem value for touch devices (phones, tablets: full-size
   design), and 62.5% of it for computers, where the whole design is drawn
   at 62.5% (html font-size above), so a computer switches layout only when
   the smaller design really runs out of room (user's call: the menu turned
   into a burger far too early). assets/js/app.js mirrors the menu one. */

html.menu-is-open,
html.menu-is-open body {
  overflow: hidden;
}

body {
  min-width: 20rem;
  margin: 0;
  overflow-x: hidden;
  background: var(--apu-ivory);
  color: var(--apu-navy);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--apu-blue);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .8rem 1rem;
  transform: translateY(-160%);
  background: var(--apu-navy);
  color: var(--white);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ── Type utilities ───────────────────────────────────────────────────── */

.desktop-nav a,
.header-cta,
.eyebrow,
.proof-list,
.hero__motif,
.text-link,
.site-footer,
.lang-switch,
.credit,
.page-hero__meta,
.ledger thead th,
.field label,
.footer-heading,
.journal-row__date,
.pager,
.article__meta {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 1.7rem;
  color: var(--apu-gold);
  line-height: 1.7;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: center;
  justify-content: center;
}

.button {
  min-height: 3.4rem;
  padding: .95rem 1.9rem;
  border: 1px solid transparent;
  display: inline-flex;
  gap: 1.4rem;
  align-items: center;
  justify-content: center;
  background: transparent;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}

.button--solid {
  border-color: var(--apu-blue);
  background: var(--apu-blue);
  color: var(--white);
}

.button--solid:hover,
.button--solid:focus-visible {
  border-color: var(--apu-blue-deep);
  background: var(--apu-blue-deep);
}

.button--text {
  min-height: 3.1rem;
  padding-right: .3rem;
  padding-left: .3rem;
  border-bottom-color: var(--apu-line);
  color: var(--apu-navy);
  text-transform: none;
}

.button--text:hover,
.button--text:focus-visible {
  border-bottom-color: var(--apu-blue);
  color: var(--apu-blue);
}

/* Second choice beside a solid button: same size and shape, outlined. */
.button--outline {
  border-color: var(--apu-blue);
  color: var(--apu-blue);
}

.button--outline:hover,
.button--outline:focus-visible {
  border-color: var(--apu-blue-deep);
  background: var(--apu-blue-deep);
  color: var(--white);
}

.button--light {
  margin-top: 2rem;
  border-color: rgba(255, 255, 255, .68);
  color: var(--white);
}

.button--light:hover,
.button--light:focus-visible {
  background: var(--white);
  color: var(--apu-blue-deep);
}

.text-link {
  padding: .5rem 0 .3rem;
  margin-top: 2.1rem;
  border-bottom: 1px solid var(--apu-blue);
  display: inline-flex;
  gap: 1.4rem;
  color: var(--apu-blue);
  letter-spacing: .16em;
}

.proof-list {
  width: 100%;
  max-width: 37rem;
  padding: 1.55rem 0 0;
  margin: 2.8rem 0 0;
  border-top: 1px solid rgba(168, 140, 69, .25);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 2rem;
  color: var(--apu-gold-text);
  font-size: .58rem;
  letter-spacing: .16em;
}

.hero__motif {
  margin: auto 0 0;
  display: flex;
  gap: 1.4rem;
  align-items: center;
  color: var(--apu-gold);
  font-size: .57rem;
}

.hero__motif b {
  font-size: 1rem;
  font-weight: 400;
}

.hero__rule {
  width: 1px;
  height: 4.25rem;
  margin-bottom: 2.35rem;
  display: block;
  background: var(--apu-gold);
}

.credit {
  width: 100%;
  max-width: 37rem;
  padding-top: 1.2rem;
  margin: 2.6rem 0 0;
  border-top: 1px solid rgba(168, 140, 69, .25);
  color: var(--apu-gold-text);
  font-size: .58rem;
  letter-spacing: .16em;
  line-height: 1.8;
}

.proof-list + .credit {
  padding-top: 0;
  margin-top: 1.8rem;
  border-top: 0;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Sections (and legal paragraphs) appearing while scrolling down; the
   classes are set by app.js, so without JavaScript nothing is hidden. */
.sr {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.sr.sr-in {
  opacity: 1;
  transform: none;
}

/* ── Header ───────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(168, 140, 69, .22);
  background: rgba(251, 250, 246, .98);
  transition: box-shadow .3s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 1px 0 rgba(21, 23, 39, .04);
}

/* The header stays in view while scrolling. On the first screen it is full
   size; once the page has moved (app.js adds .is-condensed past 120px, and
   removes it again under 40px) it settles into a slimmer bar with a smaller
   wordmark and button, giving reading space back without losing the menu. */
.site-header__inner,
.brand {
  transition: min-height .35s var(--ease), padding .35s var(--ease), width .35s var(--ease);
}

.site-header.is-condensed .site-header__inner {
  min-height: var(--header-height-condensed);
  padding-top: .45rem;
  padding-bottom: .45rem;
}

.site-header.is-condensed .brand {
  width: clamp(6.5rem, 8vw, 7.75rem);
}

.site-header.is-condensed .header-cta {
  min-height: 2.7rem;
  padding: .55rem 1.1rem;
}

.site-header__inner {
  width: 100%;
  min-height: var(--header-height);
  padding: 1rem 1.5rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(9rem, auto) minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
}

.brand {
  width: clamp(8.75rem, 11vw, 10.75rem);
  justify-self: start;
}

.brand img {
  width: 100%;
  height: auto;
}

.desktop-nav {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.2rem, 2vw, 2.2rem);
  align-items: center;
  justify-content: center;
}

.desktop-nav a {
  position: relative;
  padding: .65rem 0;
  font-size: .78rem;
  letter-spacing: .2em;
  white-space: nowrap;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: .35rem;
  left: 0;
  height: 1px;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  background: var(--apu-blue);
  transition: transform .35s var(--ease);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Menu group ("About us"): a button styled like the links, opening a hairline
   dropdown on hover, keyboard focus, or click (app.js toggles .is-open). */
.nav-group {
  position: relative;
}

.nav-group__toggle {
  position: relative;
  padding: .65rem 0;
  border: 0;
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.nav-group__toggle::after {
  position: absolute;
  right: 0;
  bottom: .35rem;
  left: 0;
  height: 1px;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  background: var(--apu-blue);
  transition: transform .35s var(--ease);
}

.nav-group:hover .nav-group__toggle::after,
.nav-group.is-open .nav-group__toggle::after,
.nav-group__toggle:focus-visible::after,
.nav-group__toggle.is-current::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-group__chevron {
  color: var(--apu-gold);
  transition: transform .25s ease;
}

.nav-group:hover .nav-group__chevron,
.nav-group.is-open .nav-group__chevron {
  transform: rotate(180deg);
}

.nav-group__menu {
  position: absolute;
  z-index: 120;
  top: 100%;
  left: 50%;
  min-width: 15rem;
  padding: .5rem 0;
  border: 1px solid var(--apu-line);
  display: none;
  background: var(--apu-ivory);
  box-shadow: 0 1rem 2.4rem rgba(21, 23, 39, .1);
  transform: translateX(-50%);
}

/* An invisible bridge over the gap, so the pointer can travel from the
   button into the menu without it closing. */
.nav-group__menu::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: .6rem;
  content: "";
}

.nav-group:hover .nav-group__menu,
.nav-group__menu:focus-within,
.nav-group.is-open .nav-group__menu {
  display: block;
}

.desktop-nav .nav-group__menu a {
  padding: .75rem 1.3rem;
  display: block;
  letter-spacing: .16em;
}

.desktop-nav .nav-group__menu a::after {
  display: none;
}

.desktop-nav .nav-group__menu a:hover,
.desktop-nav .nav-group__menu a:focus-visible {
  background: var(--apu-warm-ivory);
  color: var(--apu-blue);
}

.desktop-nav .nav-group__menu a[aria-current="page"] {
  color: var(--apu-blue);
}

/* Drawer: the group name as a small heading, its pages indented beneath. */
.mobile-menu__group {
  margin: 1.4rem 0 .2rem;
  color: var(--apu-gold);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.mobile-menu nav a.mobile-menu__sublink {
  padding-left: 1.2rem;
  font-size: 1.5rem;
}

.header-tools {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  justify-self: end;
}

.header-cta {
  min-height: 3.4rem;
  padding: .85rem 1.5rem;
  border: 1px solid #7d7d82;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .19em;
  text-align: center;
  white-space: nowrap;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, min-height .35s var(--ease), padding .35s var(--ease);
}

.header-cta:hover,
.header-cta:focus-visible {
  border-color: var(--apu-blue);
  background: var(--apu-blue);
  color: var(--white);
}

.header-cta[aria-current="page"] {
  border-color: var(--apu-blue);
  color: var(--apu-blue);
}

.menu-button {
  width: 2.9rem;
  height: 2.9rem;
  padding: .75rem;
  border: 1px solid var(--apu-line);
  display: none;
  background: transparent;
  cursor: pointer;
}

.menu-button span {
  width: 100%;
  height: 1px;
  margin: .27rem 0;
  display: block;
  background: var(--apu-navy);
}

/* Language switch: globe button and a hairline dropdown, opened by click. */
.lang-switch {
  position: relative;
  letter-spacing: .16em;
}

.lang-globe {
  padding: .6rem .2rem;
  border: 0;
  display: inline-flex;
  gap: .55rem;
  align-items: center;
  background: transparent;
  color: var(--apu-navy);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.lang-flag {
  width: 1.05rem;
  height: .75rem;
  object-fit: cover;
}

.lang-globe-icon {
  width: 1rem;
  height: 1rem;
  color: var(--apu-gold);
}

.lang-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + .4rem);
  right: 0;
  min-width: 11rem;
  padding: .4rem 0;
  margin: 0;
  border: 1px solid var(--apu-line);
  list-style: none;
  display: none;
  background: var(--apu-ivory);
  box-shadow: 0 1rem 2.4rem rgba(21, 23, 39, .1);
}

.lang-switch.is-open .lang-menu,
.lang-switch:focus-within .lang-menu {
  display: block;
}

.lang-menu a {
  padding: .7rem 1.1rem;
  display: flex;
  gap: .7rem;
  align-items: center;
  white-space: nowrap;
}

.lang-menu a:hover,
.lang-menu a:focus-visible {
  background: var(--apu-warm-ivory);
}

.lang-menu a.active {
  color: var(--apu-blue);
}

.lang-switch--footer .lang-globe,
.lang-switch--drawer .lang-globe {
  padding-left: 0;
}

.lang-switch--footer .lang-menu {
  top: auto;
  right: auto;
  bottom: calc(100% + .4rem);
  left: 0;
}

.lang-switch--drawer {
  margin-top: 2rem;
}

.lang-switch--drawer .lang-menu {
  position: static;
  min-width: 0;
  margin-top: .5rem;
  border: 0;
  border-top: 1px solid var(--apu-line);
  box-shadow: none;
}

/* ── Language window ─────────────────────────────────────────────────────
   One centred dialog for the whole page, opened by any language button
   (header, drawer, footer): an ivory card under the gold rule, the languages
   in two columns, a round flag beside each name written in its own language,
   the current one on pale blue (user's choice, mockup 6, 1 October 2026;
   views/partials/lang-window.php, assets/js/app.js). A native <dialog>, so
   the page behind is inert and Escape closes it. Sizes are set once as
   variables: the computer scale (root 10px) here, the touch scale (root
   16px) and the narrow screens below. */
.lang-window {
  /* Kept small (user's call, 2 October 2026: the first version filled the
     screen): the name at the size of a caption title, the labels at 9. */
  --lw-width: 42rem;
  --lw-pad: 2.2rem 2.6rem 2rem;
  --lw-title: 2rem;
  --lw-name: 1.35rem;
  --lw-label: .8rem;
  --lw-flag: 1.7rem;
  --lw-row: .55rem .6rem;
  --lw-gap: 2.2rem;
  --lw-close: 2.6rem;
  width: min(var(--lw-width), calc(100% - 3.2rem));
  max-width: none;
  max-height: calc(100% - 3.2rem);
  padding: 0;
  border: 0;
  border-top: 3px solid var(--apu-gold);
  background: var(--apu-ivory);
  color: var(--apu-navy);
  box-shadow: 0 3rem 8rem rgba(21, 23, 39, .32);
  opacity: 0;
  transform: translateY(.8rem);
  /* It fades in and out. The second line adds the fade on the way out; a
     browser that does not know it keeps the first and simply closes at once. */
  transition: opacity .22s ease, transform .22s ease;
  transition: opacity .22s ease, transform .22s ease, overlay .22s ease allow-discrete, display .22s ease allow-discrete;
}

.lang-window[open] {
  opacity: 1;
  transform: none;
}

@starting-style {
  .lang-window[open] {
    opacity: 0;
    transform: translateY(.8rem);
  }
}

.lang-window::backdrop {
  background: rgba(21, 23, 39, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color .22s ease, backdrop-filter .22s ease;
  transition: background-color .22s ease, backdrop-filter .22s ease, overlay .22s ease allow-discrete, display .22s ease allow-discrete;
}

.lang-window[open]::backdrop {
  background: rgba(21, 23, 39, .52);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

@starting-style {
  .lang-window[open]::backdrop {
    background: rgba(21, 23, 39, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
}

.lang-window__card {
  position: relative;
  padding: var(--lw-pad);
}

.lang-window .eyebrow {
  margin: 0;
}

.lang-window h2 {
  margin: .5rem 0 1.4rem;
  padding-right: var(--lw-close);
  font-family: var(--serif);
  font-size: var(--lw-title);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}

.lang-window__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: var(--lw-close);
  height: var(--lw-close);
  padding: 0;
  border: 1px solid var(--apu-line);
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--apu-navy);
  cursor: pointer;
}

.lang-window__close:hover,
.lang-window__close:focus-visible {
  border-color: var(--apu-navy);
}

.lang-window__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--lw-gap);
}

.lang-window__list a {
  padding: var(--lw-row);
  border-top: 1px solid var(--apu-line);
  display: grid;
  grid-template-columns: var(--lw-flag) minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: center;
}

.lang-window__list img {
  width: var(--lw-flag);
  height: var(--lw-flag);
  border: 1px solid var(--apu-line);
  border-radius: 50%;
  object-fit: cover;
}

.lang-window__list b {
  font-family: var(--serif);
  font-size: var(--lw-name);
  font-weight: 500;
  line-height: 1.15;
}

.lang-window__list span {
  color: var(--apu-gold-text);
  font-size: var(--lw-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lang-window__list a:hover,
.lang-window__list a:focus-visible {
  background: var(--apu-warm-ivory);
}

.lang-window__list a:focus-visible,
.lang-window__close:focus-visible {
  outline: 2px solid var(--apu-blue);
  outline-offset: -2px;
}

.lang-window__list a.is-current {
  background: var(--apu-pale-blue);
}

.lang-window__list a.is-current b,
.lang-window__list a.is-current span {
  color: var(--apu-blue-deep);
}

/* While the window is open the page behind does not scroll; the scrollbar's
   place is kept, so nothing shifts sideways. */
html.lang-window-is-open,
html.lang-window-is-open body {
  overflow: hidden;
}

html.lang-window-is-open {
  scrollbar-gutter: stable;
}

/* With the window in place, the small menu under the button stays closed
   (it remains the fallback when the script or <dialog> is missing). */
.has-lang-window .lang-switch.is-open .lang-menu,
.has-lang-window .lang-switch:focus-within .lang-menu {
  display: none;
}

/* Touch devices draw at the full root size, so the same sizes in rem. */
@media (hover: none) and (pointer: coarse) and (max-width: 1100px) {
  .lang-window {
    --lw-width: 26.25rem;
    --lw-pad: 1.4rem 1.6rem 1.25rem;
    --lw-title: 1.25rem;
    --lw-name: .95rem;
    --lw-label: .55rem;
    --lw-flag: 1.1rem;
    --lw-row: .62rem .4rem;
    --lw-gap: 1.4rem;
    --lw-close: 1.9rem;
  }

  .lang-window h2 {
    margin: .3rem 0 .9rem;
  }

  .lang-window__close {
    top: .75rem;
    right: .75rem;
  }

  .lang-window__list a {
    column-gap: .65rem;
  }
}

/* Narrow screens: one column. A phone first, then a narrow computer window. */
@media (max-width: 600px) {
  .lang-window__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 600px) {
  .lang-window {
    --lw-width: 19rem;
    --lw-pad: 1.2rem 1.1rem .9rem;
    --lw-title: 1.2rem;
  }

  .lang-window h2 {
    margin: .25rem 0 .8rem;
  }

  .lang-window__close {
    top: .6rem;
    right: .6rem;
  }
}

@media (hover: hover) and (max-width: 600px), (pointer: fine) and (max-width: 600px) {
  .lang-window {
    --lw-width: 28rem;
    --lw-pad: 2rem 1.8rem 1.5rem;
    --lw-title: 2rem;
  }

  .lang-window h2 {
    margin: .5rem 0 1.2rem;
  }

  .lang-window__close {
    top: 1rem;
    right: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-window,
  .lang-window::backdrop {
    transition: none;
  }
}

/* Maintenance preview bar, admin only. */
.maint-preview-bar {
  padding: .7rem var(--page-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  align-items: center;
  background: var(--apu-navy);
  color: var(--apu-ivory);
  font-size: .8rem;
  letter-spacing: .04em;
}

.maint-preview-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  display: inline-block;
  background: var(--apu-gold);
}

.maint-preview-bar a {
  border-bottom: 1px solid rgba(255, 255, 255, .5);
}

/* ── Drawer (mobile menu) ─────────────────────────────────────────────── */

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
}

.mobile-menu__scrim {
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(21, 23, 39, .46);
  cursor: pointer;
}

.mobile-menu__panel {
  min-width: 0;
  height: 100%;
  padding: 2rem;
  overflow-y: auto;
  background: var(--apu-ivory);
  box-shadow: -1rem 0 3rem rgba(21, 23, 39, .14);
}

.mobile-menu__heading {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--apu-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu__heading p,
.mobile-menu__heading button {
  margin: 0;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.mobile-menu__heading button {
  padding: .5rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.mobile-menu nav {
  padding: 1.6rem 0 2.2rem;
  display: grid;
}

.mobile-menu nav a {
  padding: .8rem 0;
  border-bottom: 1px solid var(--apu-line);
  font-family: var(--serif);
  font-size: 1.85rem;
}

.mobile-menu nav a[aria-current="page"] {
  color: var(--apu-blue);
}

.mobile-menu .button--solid {
  width: 100%;
}

/* ── Home hero ────────────────────────────────────────────────────────── */

/* The home hero is sized to the visible screen: window height minus the
   header, as a minimum (a very short window makes it grow and scroll rather
   than clip). The title scales with the window height as well as its width so
   its two lines always fit, and the room around the rule, introduction and
   buttons compresses on short windows. The motif stays pinned to the bottom
   edge as the scroll cue. */
.hero {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  padding: clamp(1.5rem, 3vh, 3rem) var(--page-gutter) clamp(1.25rem, 2.5vh, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.hero .hero__rule {
  height: clamp(2.4rem, 5vh, 4.25rem);
  margin-top: auto;
  margin-bottom: clamp(1.1rem, 2.6vh, 2.35rem);
}

.hero .eyebrow {
  margin-bottom: clamp(.9rem, 2vh, 1.7rem);
}

.hero h1 {
  max-width: 24ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.2rem, min(7.7vw, 15vh), 8.25rem);
  font-weight: 500;
  letter-spacing: -.038em;
  line-height: .83;
}

.hero .button-group {
  margin-bottom: auto;
}

.hero .hero__motif {
  margin-top: clamp(1.4rem, 3vh, 3rem);
}

@media (hover: none) and (pointer: coarse) and (max-height: 42rem), (hover: hover) and (max-height: 26.25rem), (pointer: fine) and (max-height: 26.25rem) {
  .hero .hero__motif {
    display: none;
  }

  .hero .hero__rule {
    height: 2rem;
  }
}

.hero h1 span,
.hero h1 em {
  display: block;
}

.hero h1 em {
  color: var(--apu-blue);
  font-weight: 400;
}

.hero__introduction {
  max-width: 73ch;
  margin: clamp(1.3rem, 3.2vh, 3.2rem) auto clamp(1.1rem, 2.2vh, 2rem);
  color: var(--apu-muted-text);
  font-size: clamp(.92rem, min(1.15vw, 2vh), 1.2rem);
  line-height: 1.75;
}

/* ── Page hero ────────────────────────────────────────────────────────── */

.page-hero {
  min-height: clamp(30rem, 44vw, 42rem);
  padding: clamp(5rem, 7.5vw, 8.5rem) var(--page-gutter) 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.page-hero h1 {
  max-width: 16ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.6rem, 6.2vw, 6.6rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: .9;
}

.page-hero h1 span,
.page-hero h1 em {
  display: block;
}

.page-hero h1 em {
  color: var(--apu-blue);
  font-weight: 400;
}

.page-hero__lead {
  max-width: 66ch;
  margin: 2.6rem auto 0;
  color: var(--apu-muted-text);
  font-size: clamp(.98rem, 1.15vw, 1.2rem);
  line-height: 1.75;
}

.page-hero .button-group {
  margin-top: 2.2rem;
}

.page-hero .hero__motif {
  margin-top: auto;
  padding-top: 3.5rem;
}

.page-hero--compact {
  min-height: 0;
  padding-bottom: 2rem;
}

.page-hero--compact h1 {
  max-width: 20ch;
  font-size: clamp(3rem, 5vw, 5rem);
}

.page-hero__meta {
  margin: 1.8rem 0 0;
  color: var(--apu-gold-text);
  font-size: .62rem;
  letter-spacing: .2em;
}

/* ── Sections ─────────────────────────────────────────────────────────── */

.section {
  width: min(100%, var(--content-width));
  padding: clamp(6rem, 9vw, 10rem) var(--page-gutter);
  margin: 0 auto;
}

.section--tight {
  padding-top: clamp(4rem, 6vw, 6.5rem);
  padding-bottom: clamp(4rem, 6vw, 6.5rem);
}

.section--narrow {
  max-width: 76rem;
}

.section--warm {
  width: 100%;
  max-width: none;
  background: var(--apu-warm-ivory);
}

.section--warm > .section__inner {
  width: min(100%, var(--content-width));
  margin: 0 auto;
}

.section-heading {
  margin-bottom: clamp(3.5rem, 6vw, 6.5rem);
}

.section-heading h2 {
  max-width: 18ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 5.1vw, 5.8rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: .96;
}

.section-heading__lead {
  max-width: 56ch;
  margin: 1.8rem 0 0;
  color: var(--apu-muted-text);
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.8;
}

.columns {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: start;
}

.columns h2 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 4.2vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: .98;
}

.prose {
  max-width: 62ch;
}

.prose p {
  margin: 0 0 1.4rem;
  color: var(--apu-muted-text);
  font-size: clamp(1rem, 1.18vw, 1.18rem);
  line-height: 1.85;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose strong {
  color: var(--apu-navy);
  font-weight: 500;
}

.prose a {
  color: var(--apu-blue);
  border-bottom: 1px solid rgba(77, 94, 177, .4);
}

.lede {
  max-width: 30ch;
  margin: 0 0 2rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.35;
}

.statement {
  width: min(100%, 80rem);
  padding: clamp(5rem, 8vw, 9rem) var(--page-gutter);
  margin: 0 auto;
  text-align: center;
}

.statement__text {
  max-width: 26ch;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: clamp(2.3rem, 3.7vw, 4.1rem);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.12;
}

.statement__text em {
  color: var(--apu-blue);
}

.statement__note {
  max-width: 52ch;
  margin: 2.2rem auto 0;
  color: var(--apu-muted-text);
  font-size: .9rem;
  line-height: 1.7;
}

/* Split: photograph beside a warm panel. */
.split {
  min-height: clamp(44rem, 64vw, 60rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split--tall {
  min-height: clamp(49rem, 72vw, 66rem);
}

.split__image {
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #dad3c4;
}

.split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.split__image--top img {
  object-position: 50% 18%;
}

.split__content {
  padding: clamp(5rem, 8vw, 10rem) clamp(3rem, 7.5vw, 9rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: var(--apu-warm-ivory);
}

.split--reverse .split__image {
  grid-column: 2;
  grid-row: 1;
}

.split--reverse .split__content {
  background: var(--apu-soft-ivory);
}

.split h2 {
  max-width: 11ch;
  margin: 0 0 2.4rem;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 4.8vw, 5.4rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: .95;
}

.split--tall h2 {
  max-width: 9ch;
  font-size: clamp(3.6rem, 5.35vw, 6rem);
  line-height: .93;
}

.split__content > p:not(.eyebrow):not(.credit),
.split__content > .ar-edit--block {
  max-width: 38ch;
  margin: 0 0 1.2rem;
  color: var(--apu-muted-text);
  font-size: clamp(1rem, 1.18vw, 1.18rem);
  line-height: 1.85;
}

.split__content > div.prose p {
  max-width: 38ch;
}

.split__content .proof-list {
  margin-top: 1.8rem;
}

.wide-figure {
  margin: 0;
  background: #dad3c4;
}

.wide-figure img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.wide-figure figcaption {
  width: min(100%, var(--content-width));
  padding: 1.2rem var(--page-gutter) 0;
  margin: 0 auto;
  background: var(--apu-ivory);
  color: var(--apu-gold-text);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Framed pictures (ei(..., ['frame' => true])): the frame box clips; the <img>
   inside is always the COMPLETE picture at its own proportions (--r = width ÷
   height, set by the view), sized to cover the frame whatever its shape, centred,
   then moved / zoomed by the framing chosen in the editor (left/top shift as a %
   of the frame, scale around its centre). No object-fit crop, no stretching. */
.pic-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
}

.pic-frame .pic-frame__img {
  /* Framing chosen in the editor: --fx / --fy shift the picture by a % of the
     frame, --fz zooms it (lib/picture_frames.php). The shift is limited to the
     picture's overhang at the frame's CURRENT size (--bx / --by), so the
     picture always covers its frame at every screen width, never leaving an
     empty band; a picture zoomed out below the frame stays centred. */
  --pw: max(100cqw, calc(100cqh * var(--r, 1.5)));
  --bx: max(0px, calc((var(--pw) * var(--fz, 1) - 100cqw) / 2));
  --by: max(0px, calc((var(--pw) / var(--r, 1.5) * var(--fz, 1) - 100cqh) / 2));
  position: absolute;
  top: calc(50% + clamp(calc(-1 * var(--by)), calc(var(--fy, 0) * 1cqh), var(--by)));
  left: calc(50% + clamp(calc(-1 * var(--bx)), calc(var(--fx, 0) * 1cqw), var(--bx)));
  width: var(--pw);
  height: auto;
  max-width: none;
  aspect-ratio: auto;
  object-fit: fill;
  transform: translate(-50%, -50%) scale(var(--fz, 1));
}

.wide-figure > .pic-frame {
  height: auto;
  aspect-ratio: 2 / 1;
}

/* A wide picture shown whole: the frame takes the picture's own proportions
   (--r, set by the view), so nothing is cropped top or bottom. Who we are,
   the Monte Carlo photograph, down to the shoes (user's call, 1 October 2026). */
.wide-figure--whole > .pic-frame {
  aspect-ratio: var(--r, 2);
}

/* Caption over a large picture (lib/lang.php picCaption, edited in the visual
   editor): a small light frame in the bottom-right corner, text aligned right,
   dark on near-white (user's call). It fades in when the
   picture scrolls into view, fades out a few seconds later (assets/js/app.js),
   and returns while the picture is pointed at or focused. The text is always
   in the page, so search engines and screen readers read it; without script
   or with reduced motion it simply stays shown. */
.pic-caption {
  position: absolute;
  right: clamp(1rem, 2.2vw, 1.8rem);
  bottom: clamp(1rem, 2.2vw, 1.8rem);
  z-index: 2;
  max-width: min(26rem, calc(100% - 2rem));
  padding: 1rem 1.2rem .95rem;
  /* Dark glass (user's call): a clearly see-through black pane over the photo,
     white text; a light blur behind it keeps the text readable. */
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  background: rgba(10, 11, 16, .38);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(7px) saturate(1.2);
  backdrop-filter: blur(7px) saturate(1.2);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  text-align: left;
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.6;
  pointer-events: none;
}

/* A picture on the right of its text (split--reverse): the caption sits in the
   bottom-LEFT corner instead, on the side facing the text. The text inside is
   always aligned left (user's call). */
.split--reverse .pic-frame > .pic-caption {
  right: auto;
  left: clamp(1rem, 2.2vw, 1.8rem);
  transform-origin: 0 100%;
}

/* A clear white rule above the text, aligned with it (user's call: visible
   on the dark glass, not the thin gold one). */
.pic-caption::before {
  content: "";
  display: block;
  width: 3.4rem;
  height: 2px;
  margin: 0 0 .7rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* The large pane (user's choice, mockup 6 of 1 October 2026): drawn when the
   caption carries a label or a title (lib/lang.php picCaption). Same dark
   glass, bigger, with the small gold label, a serif title and the text. On a
   split picture, narrower than the page, the pane and its title are scaled
   down so the picture stays visible around it. */
.pic-caption--titled {
  /* Sized in proportion to the picture (cqw: the .pic-frame is a size
     container), so the pane keeps the proportions of the approved mockup at
     every window width, about 37% of the picture's width, instead of growing
     as the window shrinks (user's call, 1 October 2026). The text has a floor
     so it stays readable on a narrow picture. */
  max-width: min(37cqw, calc(100% - 2.4rem));
  right: 2.4cqw;
  bottom: 2.4cqw;
  padding: 1.4cqw 1.6cqw 1.3cqw;
  font-size: max(.78rem, .76cqw);
  line-height: 1.65;
}

.pic-caption--titled::before {
  width: 2.3cqw;
  margin-bottom: 1cqw;
}

.pic-caption__label,
.pic-caption__title,
.pic-caption__text {
  display: block;
}

.pic-caption__label {
  margin: 0 0 .4cqw;
  color: #e6cf86;
  font-size: max(.5rem, .46cqw);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.pic-caption__title {
  margin: 0 0 .7cqw;
  font-family: var(--serif);
  font-size: max(1.5rem, 2.5cqw);
  font-weight: 500;
  line-height: 1.02;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.pic-caption__title:last-child,
.pic-caption__label:last-child {
  margin-bottom: 0;
}

/* A picture on the right of its text keeps the pane on its left corner. */
.split--reverse .pic-frame > .pic-caption--titled {
  right: auto;
  left: 2.4cqw;
}

/* Split and card pictures are narrower, so the same proportions would leave
   the text too small: the pane takes a little more of the picture and the
   floors above hold the text size. */
.split__image .pic-caption--titled,
.story-card__media .pic-caption--titled {
  max-width: min(58cqw, calc(100% - 2.4rem));
  padding: 2cqw 2.2cqw 1.9cqw;
}

.split__image .pic-caption__title,
.story-card__media .pic-caption__title {
  font-size: max(1.4rem, 3.4cqw);
}

/* Without backdrop blur the pane is kept darker, so it stays legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pic-caption {
    background: rgba(10, 11, 16, .62);
  }
}

/* Fade: rises a little and grows into place as it appears; sinks back and
   fades as it leaves. */
.js .pic-caption {
  opacity: 0;
  transform: translateY(.9rem) scale(.97);
  transform-origin: 100% 100%;
  transition:
    opacity .9s var(--ease),
    transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.js .pic-caption.is-shown,
.js .pic-frame:hover > .pic-caption,
.js .pic-frame:focus-within > .pic-caption {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .pic-caption {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Ledger: hairline table with a complete header row. */
.ledger {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--apu-line);
}

.ledger th,
.ledger td {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--apu-line);
  text-align: left;
  vertical-align: top;
}

.ledger thead th {
  padding: .9rem 0;
  color: var(--apu-gold-text);
  font-size: .58rem;
  letter-spacing: .16em;
}

.ledger tbody th {
  width: 34%;
  padding-right: 2rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
}

.ledger td {
  color: var(--apu-muted-text);
  font-size: 1rem;
  line-height: 1.7;
}

.ledger td a {
  color: var(--apu-blue);
  border-bottom: 1px solid rgba(77, 94, 177, .4);
}

.ledger-note {
  max-width: 60ch;
  padding-left: 1.2rem;
  margin: 1.8rem 0 0;
  border-left: 1px solid var(--apu-gold);
  color: var(--apu-muted-text);
  font-size: .86rem;
  line-height: 1.7;
}

/* Rule grid: hairline cells, no numbering. */
.rule-grid {
  --cols: 4;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--apu-line);
  border-bottom: 1px solid var(--apu-line);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

.rule-grid > li {
  min-height: 18rem;
  padding: 2.6rem clamp(1.4rem, 2.5vw, 2.75rem) 3rem 0;
}

.rule-grid > li + li {
  padding-left: clamp(1.4rem, 2.5vw, 2.75rem);
  border-left: 1px solid var(--apu-line);
}

.rule-grid--rows {
  border-top: 0;
}

.rule-grid--rows > li {
  border-top: 1px solid var(--apu-line);
}

.rule-grid ul li + li {
  margin-top: .55rem;
}

.rule-grid--compact > li {
  min-height: 0;
  padding-top: 2rem;
  padding-bottom: 2.2rem;
}

.rule-grid .marker {
  display: block;
  color: var(--apu-gold);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
}

.rule-grid h3 {
  margin: 2rem 0 1.1rem;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.2vw, 2.4rem);
  font-weight: 500;
  line-height: 1.05;
}

/* Home product families: an optional picture above each name. The pictures
   form one banner across the grid: every frame is the same landscape 4:3 box,
   spans its whole column (over the cell padding and the hairline between
   cells) and touches the grid's top line, so neighbouring pictures meet edge to
   edge. Each picture covers its frame at its own proportions (never stretched,
   never cut in the file); the admin chooses which part shows by dragging and
   zooming in the editor. */
.family-grid {
  --fam-gap: clamp(1.4rem, 2.5vw, 2.75rem);
}

.rule-grid.family-grid > li:has(> .family-card__media) {
  padding-top: 0;
}

.family-card__media {
  position: relative;
  margin: 0 calc(-1 * var(--fam-gap)) 0 calc(-1 * var(--fam-gap) - 1px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.family-card__media .ar-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* The <img> is always the COMPLETE picture at its own proportions (no
   object-fit crop): sized to cover the frame, centred, and moved/zoomed by the
   framing (left/top shift as % of the frame, scale around its centre). The
   frame's overflow hides what falls outside, and nothing else. A picture wider
   than 4:3 is sized by height, a narrower one by width (class set by the view). */
.family-card__media img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  transform: translate(-50%, -50%);
}

.family-card__media img.fam-img--wide {
  width: auto;
  height: 100%;
}

.family-card__media img.fam-img--tall {
  width: 100%;
  height: auto;
}

/* The first cell of each row has no left padding or hairline to cover. */
.family-grid > li:first-child .family-card__media {
  margin-left: 0;
}

@media (hover: none) and (pointer: coarse) and (min-width: 64.001rem), (hover: hover) and (min-width: 40.0006rem), (pointer: fine) and (min-width: 40.0006rem) {
  .family-grid > li:nth-child(4n + 1) .family-card__media {
    margin-left: 0;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 32.001rem) and (max-width: 64rem), (hover: hover) and (min-width: 20.0006rem) and (max-width: 40rem), (pointer: fine) and (min-width: 20.0006rem) and (max-width: 40rem) {
  .family-grid > li:nth-child(odd) .family-card__media {
    margin-left: 0;
  }
}

/* Phones: one column with no side padding, so the frame is the full width. */
@media (hover: none) and (pointer: coarse) and (max-width: 32rem), (hover: hover) and (max-width: 20rem), (pointer: fine) and (max-width: 20rem) {
  .family-card__media {
    margin: 0;
  }

  .rule-grid.family-grid > li:has(> .family-card__media) {
    padding-top: 0;
  }
}

.family-card__media + h3 {
  margin-top: 1.6rem;
}

/* More than four families wrap onto a second row of the four-column grid. */
@media (hover: none) and (pointer: coarse) and (min-width: 64.001rem), (hover: hover) and (min-width: 40.0006rem), (pointer: fine) and (min-width: 40.0006rem) {
  .family-grid > li:nth-child(4n + 1) {
    padding-left: 0;
    border-left: 0;
  }

  .family-grid > li:nth-child(n + 5) {
    border-top: 1px solid var(--apu-line);
  }
}

/* What we source: every card ends with an Origin / Species spec line. The card
   is a column and the spec line takes the leftover space above it, so it sits
   at the bottom of every card and lines up across the row. Descriptions are
   capped at 450 characters in the editor (PRODUCT_TEXT_MAX) and reserve the
   height of a full one (about 11 lines at 1440px, 13 at 1280px), so every row
   of cards has the same shape. */
.family-grid--spec > li {
  display: flex;
  flex-direction: column;
}

.family-grid--spec .fam-desc {
  margin-bottom: 1.4rem;
}

@media (hover: none) and (pointer: coarse) and (min-width: 64.001rem), (hover: hover) and (min-width: 40.0006rem), (pointer: fine) and (min-width: 40.0006rem) {
  .family-grid--spec .fam-desc {
    min-height: calc(13 * 1.8em);
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 88rem), (hover: hover) and (min-width: 55rem), (pointer: fine) and (min-width: 55rem) {
  .family-grid--spec .fam-desc {
    min-height: calc(11 * 1.8em);
  }
}

.fam-spec {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr);
  row-gap: .1rem;
  margin: auto 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--apu-line);
  font-size: .86rem;
  line-height: 1.35;
}

.fam-spec dt {
  color: var(--apu-gold-text);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.35rem;
  text-transform: uppercase;
}

.fam-spec dd {
  margin: 0;
  color: var(--apu-navy);
  font-weight: 400;
  line-height: 1.35rem;
}

.fam-spec .fam-spec__species {
  font-style: italic;
}

.rule-grid--compact h3 {
  margin-top: 1.2rem;
  font-size: clamp(1.4rem, 1.6vw, 1.7rem);
}

.rule-grid h3 a {
  color: var(--apu-blue);
  border-bottom: 1px solid rgba(77, 94, 177, .4);
  overflow-wrap: anywhere;
}

.rule-grid p,
.rule-grid ul,
.rule-grid .ar-edit--block {
  max-width: 30ch;
  margin: 0;
  color: var(--apu-muted-text);
  font-size: .94rem;
  line-height: 1.8;
}

.rule-grid ul {
  padding: 0;
  list-style: none;
}

.rule-grid p + p {
  margin-top: .8rem;
}

.rule-grid .text-link {
  margin-top: 1.6rem;
}

/* Process grid: numbered, for real sequences. */
.process-grid {
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--apu-line);
  border-bottom: 1px solid var(--apu-line);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.process-grid li {
  min-height: 22rem;
  padding: 2.8rem clamp(1.4rem, 2.5vw, 2.75rem) 3.3rem 0;
}

.process-grid li + li {
  padding-left: clamp(1.4rem, 2.5vw, 2.75rem);
  border-left: 1px solid var(--apu-line);
}

.process-grid span {
  color: var(--apu-gold);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
}

/* The step number itself (the span straight inside the step, not a title
   resized in the editor): drawn large, its old-style figures standing about as
   tall as the title's capitals (user's call: at 1.2rem the numbers could not
   be seen). The floor is what a phone gets, the ceiling what a computer gets. */
.process-grid li > span {
  display: block;
  font-size: clamp(3.6rem, 5vw, 7rem);
  line-height: 1;
  letter-spacing: .02em;
}

.process-grid h3 {
  margin: 1.5rem 0 1.25rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 2.5vw, 2.7rem);
  font-weight: 500;
}

.process-grid p {
  max-width: 26ch;
  margin: 0;
  color: var(--apu-muted-text);
  /* A third larger than the .94rem it had on a computer (user's call: the
     smallest text on the page); a phone keeps about its former size. */
  font-size: clamp(1rem, .8rem + .35vw, 1.25rem);
  line-height: 1.7;
}

/* What we do, export program: room between the founder text and the steps. */
.export-steps__heading {
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

/* What we do, the U.S. producers band: a large outline star behind the
   headline, sized to the band so its top point and two left points run out
   of it while the lower points stay inside (services.php). */
.market-access--outward {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.market-access__star {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: auto;
  height: min(120%, 140vw);
  aspect-ratio: 1 / 1;
  transform: translate(-24%, -17%);
  fill: rgba(214, 220, 245, .05);
  stroke: rgba(214, 220, 245, .42);
  stroke-width: .3;
  stroke-linejoin: round;
  pointer-events: none;
}

.market-access--outward .market-access__inner {
  position: relative;
  z-index: 1;
}

/* Home, the U.S. market readiness band drawn like the flag on the band's
   navy: a field of small faint stars on the left, fading out under the
   headline, and thirteen faint stripes on the right, fading in beyond the
   text column (user's choice, mockup 4, 30 September 2026). Both go when the
   band folds to one column, they would run behind the text (see the layout
   switch below). */
.market-access--flag::before,
.market-access--flag::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}

.market-access--flag::before {
  left: 0;
  width: 38%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='rgba(255,255,255,0.22)' d='M20 4l3.5 8.6 9.3.5-7.2 5.9 2.4 9L20 23l-8 5 2.4-9-7.2-5.9 9.3-.5z'/></svg>");
  background-size: 5.4rem 5.4rem;
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
  mask-image: linear-gradient(to right, #000 55%, transparent);
}

/* The stripes fill the right half of the band, from the middle to the right
   border: transparent in the middle, faint under the text, full red and
   white at the border (user's call, 2 October 2026, as on What we do; they
   used to stop in the margin, short of the text). */
.market-access--flag::after {
  left: 50%;
  right: 0;
  background: repeating-linear-gradient(to bottom, rgba(178, 34, 52, .62) 0 7.6923%, rgba(255, 255, 255, .22) 7.6923% 15.3846%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .22) 60%, rgba(0, 0, 0, .45) 82%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .22) 60%, rgba(0, 0, 0, .45) 82%, #000 100%);
}

/* The band for U.S. producers on What we do: the big outline star stays on
   the left and the stripes of the flag fill the right half of the band, from
   the middle to the right border. They start transparent in the middle, stay
   faint under the text and reach full strength at the border (user's call,
   1 October 2026). Same stripes as the home page band. */
.market-access--stripes::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(178, 34, 52, .62) 0 7.6923%, rgba(255, 255, 255, .22) 7.6923% 15.3846%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .22) 60%, rgba(0, 0, 0, .45) 82%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .22) 60%, rgba(0, 0, 0, .45) 82%, #000 100%);
}

/* Timeline: the company's years, top to bottom, as hairline rows with the
   year in gold on the left, then a title and a short text (Who we are,
   user's call, 1 October 2026). Built on the .steps rows below. */
.steps.timeline li::before {
  content: none;
}

.steps.timeline li {
  grid-template-columns: 9rem minmax(0, 20rem) minmax(0, 1fr);
}

.timeline__year {
  margin: 0;
  color: var(--apu-gold);
  font-family: var(--serif);
  font-size: clamp(1.9rem, 2.2vw, 2.4rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
}

/* The chosen form (mockup 3, 1 October 2026): a gold line down the centre,
   the entries alternating left and right of it, a dot on the line for each,
   the year above the title. On a narrow screen the line moves to the left and
   every entry sits to its right. */
.timeline-centre {
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
}

.timeline-centre::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--apu-gold);
}

.timeline-centre li {
  position: relative;
  width: calc(50% - 3rem);
  min-height: 6rem;
  padding: 0 0 2.6rem;
}

.timeline-centre li:nth-child(odd) {
  margin-right: auto;
  text-align: right;
}

.timeline-centre li:nth-child(even) {
  margin-left: auto;
}

.timeline-centre li::before {
  content: "";
  position: absolute;
  top: .55rem;
  width: 11px;
  height: 11px;
  border: 2px solid var(--apu-gold);
  border-radius: 50%;
  background: var(--apu-ivory);
}

.timeline-centre li:nth-child(odd)::before {
  right: -3rem;
  transform: translateX(50%);
}

.timeline-centre li:nth-child(even)::before {
  left: -3rem;
  transform: translateX(-50%);
}

.timeline-centre .timeline__year {
  margin: 0 0 .4rem;
}

.timeline-centre h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  font-weight: 500;
  line-height: 1.1;
}

.timeline-centre p:not(.timeline__year) {
  max-width: 48ch;
  margin: .5rem 0 0;
  color: var(--apu-muted-text);
  line-height: 1.8;
}

.timeline-centre li:nth-child(odd) p:not(.timeline__year) {
  margin-left: auto;
}

/* The timeline under the heading and text of its section. */
.timeline-centre--under {
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

/* Our background on Who we are, the chosen layout (mockup 1, 1 October
   2026): the label and the title across the top, the title on one line, then
   the years down a gold line on the left and the text on the right. The last
   paragraph's lines are balanced so no word ends up alone on the last line. */
.section-heading--wide h2 {
  max-width: none;
}

.background-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: start;
  margin-top: 3.5rem;
}

.background-grid .prose p:last-child {
  text-wrap: balance;
}

.timeline-left {
  position: relative;
  padding: 0 0 0 2.6rem;
  margin: 0;
  list-style: none;
}

.timeline-left::before {
  content: "";
  position: absolute;
  top: .5rem;
  bottom: .5rem;
  left: .4rem;
  width: 1px;
  background: var(--apu-gold);
}

.timeline-left li {
  position: relative;
  padding: 0 0 2.2rem;
}

.timeline-left li:last-child {
  padding-bottom: 0;
}

.timeline-left li::before {
  content: "";
  position: absolute;
  top: .5rem;
  left: -2.2rem;
  width: 11px;
  height: 11px;
  border: 2px solid var(--apu-gold);
  border-radius: 50%;
  background: var(--apu-ivory);
  transform: translateX(-50%);
}

.timeline-left .timeline__year {
  margin: 0 0 .3rem;
  font-size: 2rem;
}

.timeline-left h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.15;
}

.timeline-left p:not(.timeline__year) {
  max-width: 34ch;
  margin: .35rem 0 0;
  color: var(--apu-muted-text);
  line-height: 1.6;
}

/* Steps: numbered hairline rows. */
.steps {
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--apu-line);
  list-style: none;
  counter-reset: step;
}

.steps li {
  padding: 2rem 0;
  border-bottom: 1px solid var(--apu-line);
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 20rem) minmax(0, 1fr);
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
}

/* The step numbers, large and upright: at 1.2rem italic they could barely be
   seen (user's call, 1 October 2026, Partnership, What a partnership includes). */
.steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  color: var(--apu-gold);
  font-family: var(--serif);
  font-size: clamp(3rem, 3.6vw, 4.4rem);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: .9;
  letter-spacing: .02em;
}

.steps--roman li::before {
  content: counter(step, upper-roman) ".";
}

.steps h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2vw, 2.1rem);
  font-weight: 500;
  line-height: 1.1;
}

.steps p {
  max-width: 56ch;
  margin: 0;
  color: var(--apu-muted-text);
  font-size: .96rem;
  line-height: 1.8;
}

/* Segments: two column definition list. */
.segments {
  margin: 0;
  border-top: 1px solid var(--apu-line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
}

.segments > div {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--apu-line);
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 1rem;
}

.segments dt {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.2;
}

.segments dd {
  margin: 0;
  color: var(--apu-muted-text);
  font-size: .92rem;
  line-height: 1.7;
}

/* Who we serve, Who buys from us: four stops on a gold line, a ring on the
   line for each, the buyer, who they are, then what they need in gold
   capitals (user's choice, mockup 2, 1 October 2026). Two by two on a
   narrow screen, one column on a phone, without the line. */
.buyer-stops {
  list-style: none;
  margin: 0;
  padding: 3.4rem 0 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem;
}

.buyer-stops::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: .6rem;
  height: 1px;
  background: var(--apu-gold);
}

.buyer-stops li {
  position: relative;
}

.buyer-stops li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3.4rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--apu-ivory);
  border: 1.5px solid var(--apu-gold);
}

.buyer-stops h3 {
  margin: 0 0 .9rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 2.2vw, 2.4rem);
  font-weight: 500;
  line-height: 1.1;
}

.buyer-stops p {
  margin: 0;
  color: var(--apu-muted-text);
  line-height: 1.7;
}

.buyer-stops__need {
  margin-top: 1.2rem !important;
  font-size: .9rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--apu-gold-text) !important;
  line-height: 1.7 !important;
}

@media (max-width: 64rem) {
  .buyer-stops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 4rem;
  }
}

@media (max-width: 40rem) {
  .buyer-stops {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
    row-gap: 2.6rem;
  }

  .buyer-stops::before,
  .buyer-stops li::before {
    display: none;
  }

  .buyer-stops li {
    padding-top: 1.4rem;
    border-top: 1px solid var(--apu-line);
  }
}

/* Negation list. */
.not-list {
  max-width: 62ch;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--apu-line);
  list-style: none;
}

.not-list li {
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--apu-line);
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1rem;
  color: var(--apu-muted-text);
  font-size: 1rem;
  line-height: 1.7;
}

.not-list li::before {
  content: attr(data-marker);
  color: var(--apu-gold);
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
}

/* Audience grid: two articles. */
.audience-grid {
  border-top: 1px solid var(--apu-line);
  border-bottom: 1px solid var(--apu-line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.audience-grid article {
  padding: clamp(3rem, 5vw, 5.5rem) clamp(2rem, 5vw, 5.5rem) clamp(3.5rem, 5vw, 5.5rem) 0;
}

.audience-grid article + article {
  padding-right: 0;
  padding-left: clamp(2rem, 5vw, 5.5rem);
  border-left: 1px solid var(--apu-line);
}

.audience-grid h3 {
  max-width: 15ch;
  margin: 0 0 1.3rem;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 3.4vw, 3.8rem);
  font-weight: 500;
  line-height: 1;
}

.audience-grid article > p:not(.eyebrow) {
  max-width: 45ch;
  margin: 0;
  color: var(--apu-muted-text);
  line-height: 1.8;
}

/* A section title in two parts, the second on its own line in the same navy
   as the first (user's call, 1 October 2026: the blue second line is the page
   title's own signature; What we do, Two directions). */
.section-heading h2 em {
  display: block;
  color: inherit;
  font-style: normal;
  font-weight: inherit;
}

/* A centered section heading, eyebrow and title in the middle of the page
   (What we do, Two directions, user's call, 1 October 2026). */
.section-heading--center {
  text-align: center;
}

.section-heading--center h2 {
  max-width: none;
}

.section-heading--center .eyebrow {
  margin-left: auto;
  margin-right: auto;
}

/* What we do, Two directions: the chain in three points above the two sides,
   the producer at origin, APU in Miami, the kitchen in the United States, a
   gold line through the numerals and the middle one in the blue of the site;
   then one line per service, a gold ring before each (user's choice, mockup
   3, 1 October 2026). On a phone the three points stay side by side, smaller. */
.chain-row {
  list-style: none;
  margin: 0 0 clamp(3rem, 5vw, 5rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
  text-align: center;
}

.chain-row::before {
  content: "";
  position: absolute;
  left: 16.6%;
  right: 16.6%;
  top: 2.2rem;
  height: 1px;
  background: var(--apu-gold);
}

.chain-row li {
  position: relative;
  padding: 0 1rem;
}

.chain-row b {
  display: inline-block;
  width: 4.4rem;
  height: 4.4rem;
  line-height: 4.2rem;
  border-radius: 50%;
  background: var(--apu-ivory);
  border: 1px solid var(--apu-gold);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2rem;
  color: var(--apu-blue-deep);
  position: relative;
  z-index: 1;
}

.chain-row li:nth-child(2) b {
  background: var(--apu-blue);
  border-color: var(--apu-blue);
  color: #fff;
}

.chain-row__label {
  display: block;
  margin-top: 1.1rem;
  font-size: .9rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--apu-gold-text);
}

.chain-row__name {
  display: block;
  margin-top: .3rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 1.1;
  color: var(--apu-blue-deep);
}

.direction-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One line per point (user's call): the lines are kept short in the texts
   and the list uses the whole column. */
.direction-list li {
  position: relative;
  padding: .8rem 0 .8rem 2.4rem;
  border-bottom: 1px solid var(--apu-line);
  color: var(--apu-muted-text);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.direction-list li:last-child {
  border-bottom: 0;
}

.direction-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  border: 1px solid var(--apu-gold);
  background: var(--apu-ivory);
}

@media (max-width: 40rem) {
  .direction-list li {
    white-space: normal;
  }

  .chain-row b {
    width: 3.2rem;
    height: 3.2rem;
    line-height: 3rem;
    font-size: 1.4rem;
  }

  .chain-row::before {
    top: 1.6rem;
  }

  .chain-row__label {
    font-size: .65rem;
    letter-spacing: .14em;
  }

  .chain-row__name {
    font-size: 1.3rem;
  }
}

.section-note {
  max-width: 60ch;
  margin: 2.4rem 0 0;
  color: var(--apu-muted-text);
  font-size: .95rem;
  line-height: 1.7;
}

.section-note__link {
  color: var(--apu-blue);
  border-bottom: 1px solid rgba(77, 94, 177, .4);
}

/* Deep blue band. */
.market-access {
  background: var(--apu-blue-deep);
  color: var(--white);
}

.market-access__inner {
  width: min(100%, var(--content-width));
  min-height: 32rem;
  padding: clamp(6rem, 9vw, 9rem) var(--page-gutter);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, .85fr);
  gap: clamp(4rem, 9vw, 10rem);
  align-items: start;
}

.market-access .eyebrow {
  color: #d3b76a;
}

.market-access h2 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.7rem, 5.2vw, 5.8rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: .94;
}

.market-access__inner > div:nth-child(2) > p,
.market-access__inner > div:nth-child(2) > .ar-edit--block {
  max-width: 50ch;
  margin: 0;
  color: #d2d5e3;
  font-size: 1.02rem;
  line-height: 1.85;
}

.market-access__inner > div:nth-child(2) > p + p {
  margin-top: 1.2rem;
}

/* Titled paragraphs inside the band (Partnership, How it works). */
.market-access__subhead {
  margin: 2.4rem 0 .6rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.8vw, 1.9rem);
  font-weight: 500;
  line-height: 1.15;
}

.market-access__subhead:first-child {
  margin-top: 0;
}

/* The people behind the product (Sourcing, fair work; user's choice, mockup
   2, 2 October 2026): the title and a text on the left, what we ask of every
   producer as lines on the right, a short title and its sentence side by
   side. :where() keeps the column rule at the weight of the band's own, so
   the one column rule of narrow screens, further down, still wins. */
:where(.market-access--people) .market-access__inner {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(4rem, 7vw, 8rem);
}

.market-access--people h2 {
  max-width: 13ch;
}

.market-access__lead {
  max-width: 44ch;
  margin: 2.4rem 0 0;
  color: #d2d5e3;
  line-height: 1.8;
}

.people-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.people-list li {
  padding: 1.7rem 0 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: .6rem 2.4rem;
  align-items: baseline;
}

.people-list li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.people-list h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 2vw, 2.1rem);
  font-weight: 500;
  line-height: 1.15;
}

.people-list p {
  margin: 0;
  color: #d2d5e3;
  line-height: 1.75;
}

.market-access--people .qualification-note {
  max-width: none;
  margin-top: 2.6rem !important;
}

@media (max-width: 48rem) {
  .people-list li {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Story cards: a framed photograph above an eyebrow, a title and text.
   Used for the partnership stories (two columns) and the chefs (four). */
.story-grid {
  --cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(3rem, 5vw, 5.5rem) clamp(2rem, 4vw, 4.5rem);
}

.story-grid--4 {
  --cols: 4;
  gap: clamp(3rem, 5vw, 4.5rem) clamp(1.4rem, 2.5vw, 2.75rem);
}

.story-card {
  min-width: 0;
}

.story-card__media {
  margin: 0 0 2rem;
  overflow: hidden;
  background: #dad3c4;
}

.story-card__media--landscape {
  aspect-ratio: 3 / 2;
}

.story-card__media--portrait {
  aspect-ratio: 4 / 5;
}

.story-card__media > img,
.story-card__media > .ar-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-card h3 {
  margin: 0 0 1.1rem;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.2vw, 2.4rem);
  font-weight: 500;
  line-height: 1.05;
}

.story-grid--4 .story-card h3 {
  font-size: clamp(1.5rem, 1.7vw, 1.8rem);
}

.story-card > p:not(.eyebrow):not(.credit) {
  max-width: 52ch;
  margin: 0;
  color: var(--apu-muted-text);
  font-size: .96rem;
  line-height: 1.8;
}

.story-card > p:not(.eyebrow):not(.credit) + p:not(.credit) {
  margin-top: .9rem;
}

.story-card .eyebrow {
  margin-bottom: .9rem;
}

.story-card .credit {
  margin-top: 1.6rem;
}

@media (hover: none) and (pointer: coarse) and (max-width: 64rem), (hover: hover) and (max-width: 40rem), (pointer: fine) and (max-width: 40rem) {
  .story-grid--4 {
    --cols: 2;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 48rem), (hover: hover) and (max-width: 30rem), (pointer: fine) and (max-width: 30rem) {
  .story-grid {
    --cols: 1;
  }
}

@media (hover: none) and (pointer: coarse) and (min-width: 32.001rem) and (max-width: 48rem), (hover: hover) and (min-width: 20.0006rem) and (max-width: 30rem), (pointer: fine) and (min-width: 20.0006rem) and (max-width: 30rem) {
  .story-grid--4 {
    --cols: 2;
  }
}

.qualification-note {
  padding-left: 1.2rem;
  margin-top: 1.5rem !important;
  border-left: 1px solid #d3b76a;
  font-size: .83rem !important;
}

.market-access .not-list {
  max-width: none;
  border-color: rgba(255, 255, 255, .22);
}

.market-access .not-list li {
  border-color: rgba(255, 255, 255, .22);
  color: #d2d5e3;
}

.market-access .not-list li::before {
  color: #d3b76a;
}

/* Final call to action. */
.final-cta {
  width: min(100%, 76rem);
  min-height: 35rem;
  padding: clamp(7rem, 10vw, 11rem) var(--page-gutter);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* The closing title: a slightly wider measure (18ch, was 15ch) and balanced
   lines, so its last line never holds one short word alone. "contact us."
   stays together on Partnership, and "one." / "for." no longer hang alone on
   What we do and Who we serve (user's call, 1 October 2026; measured at 850
   to 1520 px wide). */
.final-cta h2 {
  max-width: 18ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.7rem, 5.5vw, 6rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: .96;
  text-wrap: balance;
}

.final-cta > p:not(.eyebrow) {
  max-width: 57ch;
  margin: 2rem 0 2.5rem;
  color: var(--apu-muted-text);
  font-size: 1.05rem;
  line-height: 1.8;
}

/* ── Forms ────────────────────────────────────────────────────────────── */

.form {
  max-width: 54rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem clamp(2rem, 4vw, 3.5rem);
}

.field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  color: var(--apu-gold-text);
  font-size: .6rem;
  letter-spacing: .2em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem 0;
  border: 0;
  border-bottom: 1px solid var(--apu-line);
  border-radius: 0;
  background: transparent;
  color: var(--apu-navy);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.5;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #9a9aa0;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--apu-blue);
  box-shadow: 0 1px 0 var(--apu-blue);
}

.field select {
  padding-right: 1.8rem;
  appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23151727' stroke-width='1'/%3E%3C/svg%3E") no-repeat right center;
  cursor: pointer;
}

.field select.is-placeholder {
  color: #9a9aa0;
}

.field textarea {
  min-height: 11rem;
  resize: vertical;
}

.char-counter {
  position: absolute;
  right: 0;
  bottom: -1.4rem;
  color: var(--apu-gold-text);
  font-size: .62rem;
  letter-spacing: .12em;
}

.char-counter.is-near {
  color: #9b2d2d;
}

.hp-field {
  position: absolute;
  left: -200vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.5rem;
  align-items: center;
}

.form-note {
  max-width: 34ch;
  margin: 0;
  color: var(--apu-muted-text);
  font-size: .82rem;
  line-height: 1.6;
}

.form-note a {
  color: var(--apu-blue);
  border-bottom: 1px solid rgba(77, 94, 177, .4);
}

/* ── Form answers: sent, or not sent ──────────────────────────────────
   User's choice, mockup 5, 2 October 2026 (a red box above the form was too
   heavy). Not sent: a short red line beside the Send button, where the
   visitor is looking, and each wrong field with a thin red border and its
   reason under it, in regular letters. Sent: the form gives way to a thank
   you. The sizes on a computer are in the type scale at the end of this
   file; the wrong field itself is styled after the compact card's fields. */

.form-status {
  display: flex;
  flex: 1 1 14rem;
  gap: .6em;
  align-items: baseline;
  max-width: 34rem;
  margin: 0;
  color: #b3261e;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.4;
}

.form-status::before {
  content: "";
  flex: none;
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-.08em);
}

.form-status b {
  font-weight: 500;
}

.form-status:focus,
.form-thanks:focus {
  outline: none;
}

.form-status[hidden],
.field-error[hidden] {
  display: none;
}

.form-status.is-fresh {
  animation: form-status-in .4s ease-out;
}

@keyframes form-status-in {
  from { opacity: 0; transform: translateX(-.6rem); }
  to { opacity: 1; transform: none; }
}

/* With the line shown, the privacy note takes the row under the button. */
.form-actions.has-status .form-note {
  flex-basis: 100%;
  max-width: none;
}

.form-thanks {
  display: grid;
  gap: 1rem;
  justify-items: center;
  padding: 2.6rem 1rem 3rem;
  text-align: center;
}

.form-thanks__sign {
  display: grid;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--apu-gold);
  border-radius: 50%;
  color: var(--apu-gold);
  font-size: 1.3rem;
  line-height: 1;
  place-items: center;
}

.form-thanks__title {
  margin: 0;
  color: var(--apu-navy);
  font-family: var(--serif);
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 1;
}

.form-thanks__text {
  max-width: 30ch;
  margin: 0;
  color: var(--apu-muted-text);
  font-size: 1rem;
  line-height: 1.6;
}

.form-thanks .text-link {
  margin-top: .5rem;
}

/* ── Long form: legal, article ────────────────────────────────────────── */

.legal,
.article__body {
  max-width: 66ch;
}

/* Centred reading column (the cookie policy): a wider column with larger
   titles and text, sitting in the middle of the page; the text stays
   left-aligned for reading. */
.page--legal-centered .legal {
  max-width: min(100%, 64rem);
  margin-inline: auto;
}

.page--legal-centered .legal__intro {
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
}

.page--legal-centered .legal h2 {
  font-size: clamp(2rem, 3vw, 3rem);
}

/* The contact form at the end of a centred legal page lines up with the
   centred text column above it. */
.page--legal-centered .form-panel .section__inner {
  margin-inline: auto;
}

/* ── Compact contact card (end of the legal pages) ────────────────────
   A white card instead of the full-width warm band: boxed fields with a
   very light warm fill so each one is easy to see, and tight spacing. */

.form-panel {
  padding-top: 0;
}

.form-panel .section__inner {
  max-width: min(100%, 64rem);
  margin-inline: auto;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid var(--apu-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(21, 23, 39, .06);
}

.form-panel .section-heading {
  margin-bottom: 1.6rem;
}

.form-panel .section-heading .eyebrow {
  margin-bottom: .6rem;
}

.form-panel .section-heading h2 {
  margin: 0;
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  line-height: 1.15;
}

.form-panel .section-heading__lead {
  margin: .6rem 0 0;
  font-size: 1rem;
}

.form-panel .form {
  max-width: none;
}

.form-panel .form-grid {
  gap: 1rem 1.2rem;
}

.form-panel .field {
  gap: .35rem;
}

.form-panel .field label {
  color: var(--apu-navy);
  font-size: .66rem;
  letter-spacing: .14em;
}

.form-panel .field input,
.form-panel .field select,
.form-panel .field textarea {
  padding: .62rem .8rem;
  border: 1px solid #e3d9c6;
  border-radius: 8px;
  background-color: #faf6ee;
  font-size: .98rem;
}

.form-panel .field select {
  padding-right: 2.2rem;
  background-position: right .8rem center;
}

.form-panel .field input:focus-visible,
.form-panel .field select:focus-visible,
.form-panel .field textarea:focus-visible {
  border-color: var(--apu-blue);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(77, 94, 177, .15);
}

.form-panel .field textarea {
  height: 8.5rem;
  min-height: 6rem;
}

.form-panel .char-counter {
  position: static;
  align-self: flex-end;
  margin-top: .1rem;
}

.form-panel .form-actions {
  gap: .8rem 1.6rem;
  margin-top: .2rem;
}

@media (hover: none) and (pointer: coarse) and (max-width: 40rem), (hover: hover) and (max-width: 25rem), (pointer: fine) and (max-width: 25rem) {
  .form-panel .form-grid {
    grid-template-columns: 1fr;
  }
}

/* A wrong field, and its reason (after the compact card's own field rules,
   which have the same weight): a thin red border, nothing more. */
.field.field--invalid label {
  color: #b3261e;
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea,
.field--invalid input:focus-visible,
.field--invalid select:focus-visible,
.field--invalid textarea:focus-visible {
  border-bottom-color: #b3261e;
  box-shadow: 0 1px 0 #b3261e;
}

.form-panel .field--invalid input,
.form-panel .field--invalid select,
.form-panel .field--invalid textarea {
  border-color: #b3261e;
  box-shadow: none;
}

.form-panel .field--invalid input:focus-visible,
.form-panel .field--invalid select:focus-visible,
.form-panel .field--invalid textarea:focus-visible {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .1);
}

.field-error {
  margin: 0;
  color: #b3261e;
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.4;
}

.page--legal-centered .legal p,
.page--legal-centered .legal li,
.page--legal-centered .legal .ar-edit--block {
  font-size: clamp(1.08rem, 1.3vw, 1.22rem);
}

.legal__intro {
  margin: 0 0 2.5rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  font-weight: 400;
  line-height: 1.45;
}

.legal h2,
.article__body h2,
.article__h {
  margin: 3.2rem 0 1rem;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.2vw, 2.2rem);
  font-weight: 500;
  line-height: 1.15;
}

.legal p,
.legal li,
.article__body p,
.article__body li {
  color: var(--apu-navy);
  font-size: 1.02rem;
  line-height: 1.8;
}

.legal p,
.article__body p {
  margin: 0 0 1.2rem;
}

.legal ul,
.article__body ul {
  padding-left: 1.2rem;
  margin: 0 0 1.2rem;
}

.legal li {
  margin-bottom: .5rem;
}

.legal a,
.article__body a {
  color: var(--apu-blue);
  border-bottom: 1px solid rgba(77, 94, 177, .4);
}

/* ── Journal ──────────────────────────────────────────────────────────── */

.journal-list {
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--apu-line);
  list-style: none;
}

.journal-row {
  padding: 2.4rem 0;
  border-bottom: 1px solid var(--apu-line);
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 1.2rem clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.journal-row__figure {
  grid-column: 1 / -1;
  max-width: 34rem;
  margin: 0 0 .4rem;
  overflow: hidden;
  background: #dad3c4;
}

.journal-row__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.journal-row__date {
  margin: .4rem 0 0;
  color: var(--apu-gold-text);
  font-size: .62rem;
  letter-spacing: .2em;
}

.journal-row__title {
  max-width: 24ch;
  margin: 0 0 .9rem;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 2.6vw, 2.8rem);
  font-weight: 500;
  line-height: 1.05;
}

.journal-row__title a:hover,
.journal-row__title a:focus-visible {
  color: var(--apu-blue);
}

.journal-row__excerpt {
  max-width: 62ch;
  margin: 0;
  color: var(--apu-muted-text);
  font-size: 1rem;
  line-height: 1.8;
}

.journal-row .text-link {
  margin-top: 1.4rem;
}

/* The list (user's choice, mockup 2, 2 October 2026): the latest entry
   large, its date, title and two lines in the dark glass pane over its
   picture; the older entries under it, four per row. Pictures are framed
   (.pic-frame): whole picture, covering, moved and zoomed as set in the
   admin. Narrow screens: the pane drops under the picture, the cards go two
   per row, then one. */
.journal-lead {
  position: relative;
  margin: 0 0 clamp(3.4rem, 5vw, 5rem);
}

.journal-lead__figure {
  display: block;
  aspect-ratio: 2.3 / 1;
  /* never lower than the pane that sits on it */
  min-height: 42rem;
  background: #dad3c4;
}

.journal-lead__pane {
  position: absolute;
  left: clamp(1.6rem, 3.2vw, 4rem);
  bottom: clamp(1.6rem, 3.2vw, 4rem);
  width: min(58rem, 62%);
  padding: 3.2rem 3.6rem 3rem;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(21, 23, 39, .74);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
}

.journal-lead__pane::before {
  content: "";
  display: block;
  width: 4.4rem;
  height: 2px;
  margin-bottom: 1.6rem;
  background: #fff;
}

.journal-lead__date,
.journal-card__date {
  margin: 0;
  color: var(--apu-gold-text);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.journal-lead__date {
  color: #dcc98f;
}

.journal-lead__title {
  margin: 1.1rem 0 1.2rem;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 3.2vw, 4rem);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.06;
  text-wrap: balance;
}

.journal-lead__excerpt {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 1.4rem;
  line-height: 1.75;
}

.journal-lead .text-link {
  margin-top: 1.6rem;
  border-bottom-color: #dcc98f;
  color: #fff;
}

/* An entry without a picture: the pane stands by itself, on warm ivory. */
.journal-lead--plain .journal-lead__pane {
  position: static;
  width: auto;
  border: 0;
  border-top: 3px solid var(--apu-gold);
  background: var(--apu-warm-ivory);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--apu-navy);
}

.journal-lead--plain .journal-lead__pane::before {
  content: none;
}

.journal-lead--plain .journal-lead__date {
  color: var(--apu-gold-text);
}

.journal-lead--plain .journal-lead__excerpt {
  color: var(--apu-muted-text);
}

.journal-lead--plain .text-link {
  border-bottom-color: var(--apu-blue);
  color: var(--apu-blue);
}

.journal-grid {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(3rem, 4vw, 4.4rem) clamp(2rem, 2.6vw, 3rem);
}

.journal-card__figure {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.8rem;
  background: #dad3c4;
}

.journal-card__title {
  margin: .9rem 0 1rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 2.1vw, 2.4rem);
  font-weight: 500;
  line-height: 1.1;
}

.journal-lead__title a:hover,
.journal-lead__title a:focus-visible {
  color: #dcc98f;
}

.journal-card__title a:hover,
.journal-card__title a:focus-visible {
  color: var(--apu-blue);
}

.journal-card__excerpt {
  margin: 0;
  color: var(--apu-muted-text);
  font-size: 1.3rem;
  line-height: 1.7;
}

/* Widths written twice, as everywhere in this sheet: the rem value for touch
   devices, 62.5% of it for computers, where the design is drawn at 62.5%. */
@media (hover: none) and (pointer: coarse) and (max-width: 64rem), (hover: hover) and (max-width: 40rem), (pointer: fine) and (max-width: 40rem) {
  .journal-lead__figure {
    aspect-ratio: 3 / 2;
    min-height: 0;
  }

  .journal-lead__pane {
    position: static;
    width: auto;
    border: 0;
    background: var(--apu-navy);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 2.4rem 2.2rem 2.2rem;
  }

  .journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 34rem), (hover: hover) and (max-width: 21.25rem), (pointer: fine) and (max-width: 21.25rem) {
  .journal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.journal-empty {
  max-width: 50ch;
  padding: 3rem 0;
  margin: 0;
  border-top: 1px solid var(--apu-line);
  border-bottom: 1px solid var(--apu-line);
  color: var(--apu-muted-text);
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.4;
}

.pager {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.4rem;
  align-items: center;
  justify-content: space-between;
  color: var(--apu-gold-text);
  font-size: .62rem;
  letter-spacing: .2em;
}

.pager__link {
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--apu-blue);
  color: var(--apu-blue);
}

.article {
  padding-top: clamp(2rem, 4vw, 4rem);
}

.article__figure {
  max-width: 66ch;
  margin: 0 0 3rem;
  background: #dad3c4;
}

.article__figure img {
  width: 100%;
  height: auto;
}

.article__figure figcaption,
.article-figure figcaption {
  padding-top: .8rem;
  color: var(--apu-gold-text);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.article-figure {
  margin: 2rem 0;
}

.article-figure img,
.article-figure video {
  width: 100%;
  height: auto;
}

.article-figure--left {
  float: left;
  max-width: 46%;
  margin: .4rem 2rem 1.2rem 0;
}

.article-figure--right {
  float: right;
  max-width: 46%;
  margin: .4rem 0 1.2rem 2rem;
}

/* Size of a picture set in the text (admin Journal screen): small, medium or
   large. Beside the text, a share of the column; between paragraphs, a
   centred picture narrower than the column. No size: as before. */
.article-figure--left.article-figure--small,
.article-figure--right.article-figure--small {
  max-width: 30%;
}

.article-figure--left.article-figure--medium,
.article-figure--right.article-figure--medium {
  max-width: 46%;
}

.article-figure--left.article-figure--large,
.article-figure--right.article-figure--large {
  max-width: 60%;
}

.article-figure--small:not(.article-figure--left):not(.article-figure--right) {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.article-figure--medium:not(.article-figure--left):not(.article-figure--right) {
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.article__body::after {
  content: "";
  display: table;
  clear: both;
}

/* The entry page (user's choice, design 2, 2 October 2026). Head: the main
   picture edge to edge, framed as set in the admin, the label, the title and
   the date in the dark glass pane on it. Body, after the Amazonian Reserve
   news page: a back link, a gold bar over an italic lead, pictures inside the
   text column with the text wrapping beside them, captions in italic. */
.article-hero {
  position: relative;
  background: #dad3c4;
}

.article-hero__figure {
  height: clamp(42rem, 40vw, 60rem);
}

.article-hero__pane {
  position: absolute;
  left: max(var(--page-gutter), calc((100% - var(--content-width)) / 2 + var(--page-gutter)));
  bottom: clamp(2.4rem, 3.4vw, 4.4rem);
  width: min(64rem, 60%);
  padding: 3.2rem 3.6rem 3rem;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(21, 23, 39, .74);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
}

.article-hero__pane::before {
  content: "";
  display: block;
  width: 4.4rem;
  height: 2px;
  margin-bottom: 1.6rem;
  background: #fff;
}

.article-hero__pane .eyebrow {
  margin: 0;
  color: #dcc98f;
}

.article-hero__pane h1 {
  margin: 1.2rem 0 1.4rem;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 3.6vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.04;
  text-wrap: balance;
}

.article-hero__date {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.article__back--top {
  margin: 0 0 3.6rem;
}

.article__back--top .text-link {
  margin-top: 0;
}

/* The reading column: 76rem of text, the pictures set inside it. */
.article--editorial.section--narrow {
  max-width: calc(76rem + 2 * var(--page-gutter));
}

.article--editorial .article__body {
  max-width: none;
}

.article--editorial .article__lead {
  margin: 0 0 2.8rem;
  color: var(--apu-blue-deep);
  font-family: var(--serif);
  /* "!important": the site wide type scale sets every paragraph of an entry */
  font-size: clamp(2rem, 2.3vw, 2.5rem) !important;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
}

.article--editorial .article__lead::before {
  content: "";
  display: block;
  width: 4.4rem;
  height: 3px;
  margin-bottom: 1.6rem;
  background: var(--apu-gold);
}

/* Pictures inside the text: the text wraps beside them; two on the same side
   stack instead of colliding; a full width one starts under any picture. */
.article--editorial .article-figure--left {
  clear: left;
  max-width: min(46%, 34rem);
  margin: .5rem 2.4rem 1.4rem 0;
}

.article--editorial .article-figure--right {
  clear: right;
  max-width: min(46%, 34rem);
  margin: .5rem 0 1.4rem 2.4rem;
}

.article--editorial .article-figure--left.article-figure--small,
.article--editorial .article-figure--right.article-figure--small {
  max-width: min(30%, 22rem);
}

.article--editorial .article-figure--left.article-figure--large,
.article--editorial .article-figure--right.article-figure--large {
  max-width: 60%;
}

.article--editorial .article-figure:not(.article-figure--left):not(.article-figure--right) {
  clear: both;
}

.article--editorial .article-figure figcaption {
  padding: .7rem .2rem 0;
  color: var(--apu-gold-text);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

/* Narrow screens: the pane drops under the picture, and the pictures in the
   text take the full width and stop floating. Widths written twice, the rem
   value for touch devices, 62.5% of it for computers. */
@media (hover: none) and (pointer: coarse) and (max-width: 64rem), (hover: hover) and (max-width: 40rem), (pointer: fine) and (max-width: 40rem) {
  .article-hero__figure {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .article-hero__pane {
    position: static;
    width: auto;
    padding: 2.4rem var(--page-gutter) 2.2rem;
    border: 0;
    background: var(--apu-navy);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .article--editorial .article-figure--left,
  .article--editorial .article-figure--right,
  .article--editorial .article-figure--left.article-figure--small,
  .article--editorial .article-figure--right.article-figure--small,
  .article--editorial .article-figure--left.article-figure--large,
  .article--editorial .article-figure--right.article-figure--large {
    float: none;
    max-width: none;
    margin: 2rem 0;
  }
}

.article__back {
  margin: 3rem 0 0;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--apu-line);
  color: #777681;
  letter-spacing: .13em;
  line-height: 1.7;
}

.site-footer__inner {
  width: min(100%, var(--content-width));
  padding: clamp(3.5rem, 5vw, 5rem) var(--page-gutter) clamp(3rem, 4vw, 4rem);
  margin: 0 auto;
  display: grid;
  /* The brand column grows to fit the logo, however large it is set. */
  grid-template-columns: minmax(min-content, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 3rem clamp(2rem, 4vw, 4rem);
}

/* Footer logo width: set in the visual editor with no upper limit (settings
   `footer_logo_width`, passed as --footer-logo-w); 9rem until it is set. */
.footer-brand img {
  width: var(--footer-logo-w, 9rem);
  max-width: none;
  height: auto;
  margin-bottom: 1.6rem;
}

/* Two- and one-column footers (tablets, phones): the logo stops at its column. */
@media (hover: none) and (pointer: coarse) and (max-width: 64rem), (hover: hover) and (max-width: 40rem), (pointer: fine) and (max-width: 40rem) {
  .footer-brand img {
    max-width: 100%;
  }
}

.footer-tagline,
.footer-motto {
  max-width: 34ch;
  margin: 0 0 1rem;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: none;
}

.footer-motto {
  color: var(--apu-gold-text);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.footer-social {
  margin-top: 1.4rem;
  display: flex;
  gap: 1rem;
}

.footer-heading {
  margin: 0 0 1.3rem;
  color: var(--apu-navy);
  font-size: .62rem;
  letter-spacing: .2em;
}

.footer-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-list li {
  margin-bottom: .75rem;
  font-size: .72rem;
  letter-spacing: .12em;
}

.footer-label {
  display: block;
  color: var(--apu-gold-text);
  font-size: .58rem;
  letter-spacing: .16em;
}

/* One office per line under "Offices". */
.footer-line {
  display: block;
}

.footer-line + .footer-line {
  margin-top: .3rem;
}

.site-footer a {
  border-bottom: 1px solid transparent;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  border-color: currentColor;
}

.footer-lang {
  margin-top: 2rem;
}

.footer-bottom {
  border-top: 1px solid var(--apu-line);
}

.footer-bottom__inner {
  width: min(100%, var(--content-width));
  padding: 1.6rem var(--page-gutter);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  justify-content: space-between;
  font-size: .62rem;
}

.footer-bottom p {
  margin: 0;
}

/* ── Cookie consent ───────────────────────────────────────────────────── */

.cookie-consent {
  position: fixed;
  z-index: 200;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 1px solid var(--apu-line);
  background: rgba(251, 250, 246, .98);
  box-shadow: 0 -1rem 3rem rgba(21, 23, 39, .08);
}

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent-inner {
  width: min(100%, var(--content-width));
  padding: 1.6rem var(--page-gutter);
  margin: 0 auto;
}

.cc-main {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 3rem;
  align-items: center;
  justify-content: space-between;
}

.cookie-consent-text {
  max-width: 70ch;
  margin: 0;
  color: var(--apu-muted-text);
  font-size: .88rem;
  line-height: 1.6;
}

.cookie-consent-text a {
  color: var(--apu-blue);
  border-bottom: 1px solid rgba(77, 94, 177, .4);
}

.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.cookie-consent .button {
  min-height: 2.8rem;
  padding: .6rem 1.2rem;
}

.cc-prefs {
  padding-top: 1.4rem;
  margin-top: 1.4rem;
  border-top: 1px solid var(--apu-line);
}

.cc-prefs[hidden] {
  display: none;
}

.cc-cat {
  padding: .9rem 0;
  border-bottom: 1px solid var(--apu-line);
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}

.cc-cat-info strong {
  display: block;
  font-weight: 500;
}

.cc-cat-info span {
  color: var(--apu-muted-text);
  font-size: .84rem;
  line-height: 1.5;
}

.cc-always {
  color: var(--apu-gold-text);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cc-switch {
  position: relative;
  width: 2.8rem;
  height: 1.5rem;
  flex: none;
  display: inline-block;
}

.cc-switch input {
  position: absolute;
  opacity: 0;
}

.cc-slider {
  position: absolute;
  inset: 0;
  border: 1px solid var(--apu-line);
  border-radius: 1rem;
  background: var(--white);
  cursor: pointer;
  transition: background .2s ease;
}

.cc-slider::before {
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  content: "";
  background: var(--apu-navy);
  transition: transform .2s ease;
}

.cc-switch input:checked + .cc-slider {
  background: var(--apu-blue);
  border-color: var(--apu-blue);
}

.cc-switch input:checked + .cc-slider::before {
  transform: translateX(1.3rem);
  background: var(--white);
}

.cc-switch input:focus-visible + .cc-slider {
  outline: 2px solid var(--apu-blue);
  outline-offset: 3px;
}

.cc-prefs .cookie-consent-actions {
  margin-top: 1.2rem;
}

/* ── Language suggestion ──────────────────────────────────────────────── */

.lang-suggest {
  position: fixed;
  z-index: 190;
  bottom: 1.25rem;
  left: 1.25rem;
  width: min(22rem, calc(100% - 2.5rem));
  padding: 1.4rem 2.4rem 1.4rem 1.4rem;
  border: 1px solid var(--apu-line);
  background: var(--apu-ivory);
  box-shadow: 0 1rem 3rem rgba(21, 23, 39, .12);
}

.lang-suggest-close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  padding: .4rem;
  border: 0;
  background: transparent;
  color: var(--apu-muted-text);
  cursor: pointer;
}

.lang-suggest-top {
  display: flex;
  gap: .6rem;
  align-items: center;
  color: var(--apu-gold-text);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.lang-suggest-flag {
  width: 1.05rem;
  height: .75rem;
  object-fit: cover;
}

.lang-suggest-msg {
  margin: .8rem 0 1rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.3;
}

.lang-suggest-cta {
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--apu-blue);
  color: var(--apu-blue);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ── Admin section backgrounds (choice made in admin/layout.php) ─────── */

.ar-secbg-white {
  background: var(--white);
}

.ar-secbg-cream {
  background: var(--apu-warm-ivory);
}

.ar-secbg-lightgreen {
  background: var(--apu-pale-blue);
}

.ar-secbg-cream .split__content,
.ar-secbg-cream .section--warm,
.ar-secbg-lightgreen .split__content,
.ar-secbg-lightgreen .section--warm,
.ar-secbg-white .split__content,
.ar-secbg-white .section--warm,
.ar-secbg-green .split__content,
.ar-secbg-green .section--warm {
  background: transparent;
}

.ar-secbg-green {
  background: var(--apu-blue-deep);
  color: var(--white);
}

.ar-secbg-green .eyebrow,
.ar-secbg-green .rule-grid .marker,
.ar-secbg-green .steps li::before,
.ar-secbg-green .process-grid span,
.ar-secbg-green .not-list li::before,
.ar-secbg-green .credit,
.ar-secbg-green .proof-list,
.ar-secbg-green .ledger thead th,
.ar-secbg-green .journal-row__date,
.ar-secbg-green .field label {
  color: #d3b76a;
}

.ar-secbg-green h1,
.ar-secbg-green h2,
.ar-secbg-green h3,
.ar-secbg-green dt,
.ar-secbg-green .ledger tbody th,
.ar-secbg-green .statement__text,
.ar-secbg-green .legal__intro {
  color: var(--white);
}

.ar-secbg-green p,
.ar-secbg-green li,
.ar-secbg-green dd,
.ar-secbg-green td,
.ar-secbg-green .prose p,
.ar-secbg-green .legal p,
.ar-secbg-green .ar-edit--block {
  color: #d2d5e3;
}

.ar-secbg-green .statement__text em,
.ar-secbg-green .page-hero h1 em,
.ar-secbg-green .hero h1 em {
  color: #d3b76a;
}

.ar-secbg-green .ledger,
.ar-secbg-green .ledger th,
.ar-secbg-green .ledger td,
.ar-secbg-green .rule-grid,
.ar-secbg-green .rule-grid > li + li,
.ar-secbg-green .process-grid,
.ar-secbg-green .process-grid li + li,
.ar-secbg-green .steps,
.ar-secbg-green .steps li,
.ar-secbg-green .segments,
.ar-secbg-green .segments > div,
.ar-secbg-green .audience-grid,
.ar-secbg-green .audience-grid article + article,
.ar-secbg-green .journal-list,
.ar-secbg-green .journal-row,
.ar-secbg-green .proof-list,
.ar-secbg-green .credit {
  border-color: rgba(255, 255, 255, .22);
}

.ar-secbg-green .button--solid {
  border-color: var(--white);
  background: var(--white);
  color: var(--apu-blue-deep);
}

.ar-secbg-green .button--text,
.ar-secbg-green .text-link,
.ar-secbg-green .prose a,
.ar-secbg-green .ledger td a {
  border-color: rgba(255, 255, 255, .5);
  color: var(--white);
}

.ar-secbg-green .market-access {
  background: var(--apu-navy);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (hover: none) and (pointer: coarse) and (max-width: 100rem), (hover: hover) and (max-width: 62.5rem), (pointer: fine) and (max-width: 62.5rem) {
  .site-header__inner {
    gap: 1.4rem;
  }

  .desktop-nav {
    gap: 0 1.1rem;
  }

  .desktop-nav a,
  .nav-group__toggle {
    font-size: .72rem;
    letter-spacing: .12em;
  }

  .header-cta {
    font-size: .64rem;
    letter-spacing: .12em;
  }

  .header-tools {
    gap: 1rem;
  }

  .header-cta {
    min-height: 3rem;
    padding: .7rem 1rem;
  }

  .lang-switch--header .lang-current {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 90rem), (hover: hover) and (max-width: 56.25rem), (pointer: fine) and (max-width: 56.25rem) {
  .process-grid li {
    min-height: 20rem;
  }

  .rule-grid > li {
    min-height: 16rem;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 78rem), (hover: hover) and (max-width: 48.75rem), (pointer: fine) and (max-width: 48.75rem) {
  :root {
    --header-height: 5.6rem;
  }

  .site-header__inner {
    grid-template-columns: 1fr auto;
  }

  .desktop-nav,
  .header-tools {
    display: none;
  }

  .menu-button {
    display: block;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 64rem), (hover: hover) and (max-width: 40rem), (pointer: fine) and (max-width: 40rem) {
  .hero {
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
  }

  .columns {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .split {
    min-height: 42rem;
  }

  .split--tall {
    min-height: 46rem;
  }

  .split__content {
    padding: 4.5rem clamp(2.5rem, 6vw, 4.5rem);
  }

  .rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rule-grid > li {
    min-height: 14rem;
  }

  .rule-grid > li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .rule-grid > li:nth-child(n + 3) {
    border-top: 1px solid var(--apu-line);
  }

  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-grid li {
    min-height: 18rem;
  }

  .process-grid li:nth-child(3) {
    padding-left: 0;
    border-top: 1px solid var(--apu-line);
    border-left: 0;
  }

  .process-grid li:nth-child(4) {
    border-top: 1px solid var(--apu-line);
  }

  .steps li {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  .steps li::before {
    font-size: 2.4rem;
  }

  .steps.timeline li {
    grid-template-columns: 7rem minmax(0, 1fr);
  }

  .steps p {
    grid-column: 2;
  }

  .segments {
    grid-template-columns: 1fr;
  }

  .market-access__inner {
    grid-template-columns: 1fr;
  }

  .market-access h2 {
    max-width: 13ch;
  }

  /* One column: the stars and stripes would sit behind the text. */
  .market-access--flag::before,
  .market-access--flag::after,
  .market-access--stripes::after {
    display: none;
  }

  /* Small screens: the picture is narrow, so the pane takes more of it and
     the text keeps a readable size. */
  .pic-caption--titled,
  .split__image .pic-caption--titled {
    max-width: calc(100% - 2rem);
    right: 1rem;
    bottom: 1rem;
    padding: .9rem 1rem .85rem;
    font-size: .8rem;
    line-height: 1.5;
  }

  .split--reverse .pic-frame > .pic-caption--titled {
    left: 1rem;
  }

  .pic-caption__title,
  .split__image .pic-caption__title {
    font-size: 1.5rem;
    margin-bottom: .4rem;
  }

  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journal-row {
    grid-template-columns: 1fr;
    gap: .6rem;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 48rem), (hover: hover) and (max-width: 30rem), (pointer: fine) and (max-width: 30rem) {
  :root {
    --page-gutter: 1.5rem;
  }

  .brand {
    width: 8.5rem;
  }

  .hero {
    padding-top: 5rem;
    padding-bottom: 3rem;
  }

  .hero__rule {
    height: 3.25rem;
  }

  .hero h1 {
    font-size: clamp(3.65rem, 12.5vw, 5.2rem);
    line-height: .9;
  }

  .hero__introduction {
    margin-top: 2.4rem;
  }

  .page-hero {
    min-height: 0;
    padding-top: 4.5rem;
    padding-bottom: 3rem;
  }

  .page-hero h1 {
    font-size: clamp(3rem, 11vw, 4.6rem);
    line-height: .95;
  }

  .page-hero__lead {
    margin-top: 2rem;
  }

  .page-hero .hero__motif {
    padding-top: 2.5rem;
  }

  .section {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .section-heading h2 {
    font-size: clamp(3.2rem, 10.5vw, 4.5rem);
  }

  .split,
  .split--tall {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .split__image {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .split__content {
    padding: 4.5rem var(--page-gutter) 5rem;
  }

  .split--reverse .split__image {
    order: 1;
  }

  .split--reverse .split__content {
    order: 2;
  }

  .split h2,
  .split--tall h2 {
    max-width: 12ch;
    font-size: clamp(3rem, 10.5vw, 4.4rem);
  }

  .wide-figure img,
  .wide-figure > .pic-frame {
    aspect-ratio: 4 / 3;
  }

  .ledger thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ledger tbody th,
  .ledger td {
    display: block;
    width: 100%;
  }

  .ledger tbody th {
    padding-right: 0;
    padding-bottom: .4rem;
    border-bottom: 0;
  }

  .ledger td {
    padding-top: 0;
  }

  .segments > div {
    grid-template-columns: 1fr;
    gap: .4rem;
  }

  .audience-grid {
    grid-template-columns: 1fr;
  }

  .audience-grid article {
    padding: 3.5rem 0;
  }

  .audience-grid article + article {
    padding-left: 0;
    border-top: 1px solid var(--apu-line);
    border-left: 0;
  }

  .market-access h2,
  .final-cta h2 {
    font-size: clamp(3.45rem, 11vw, 4.8rem);
  }

  .form-grid {
    gap: 2rem;
  }

  .article-figure--left,
  .article-figure--right {
    float: none;
    max-width: none;
    margin: 2rem 0;
  }

  .cc-main {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 32rem), (hover: hover) and (max-width: 20rem), (pointer: fine) and (max-width: 20rem) {
  :root {
    --page-gutter: 1.25rem;
  }

  .hero {
    padding-top: 4rem;
  }

  .hero h1 {
    font-size: clamp(3.35rem, 15.5vw, 4.25rem);
  }

  .hero .eyebrow {
    max-width: 30ch;
  }

  .button-group {
    width: 100%;
  }

  .button {
    width: 100%;
  }

  .button--text {
    width: auto;
  }

  .hero__motif {
    gap: .8rem;
  }

  .proof-list {
    display: grid;
  }

  .rule-grid {
    grid-template-columns: 1fr;
  }

  .rule-grid > li,
  .rule-grid > li + li,
  .rule-grid > li:nth-child(odd) {
    min-height: 0;
    padding: 2.4rem 0 2.8rem;
    border-top: 1px solid var(--apu-line);
    border-left: 0;
  }

  .rule-grid > li:first-child {
    border-top: 0;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-grid li,
  .process-grid li + li,
  .process-grid li:nth-child(3) {
    min-height: 0;
    padding: 2.5rem 0 3rem;
    border-top: 1px solid var(--apu-line);
    border-left: 0;
  }

  .process-grid li:first-child {
    border-top: 0;
  }

  .steps li,
  .steps.timeline li {
    grid-template-columns: 1fr;
    gap: .6rem;
  }

  /* Our background on a narrow screen: the text first, the years under it. */
  .background-grid {
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
  }

  .background-grid .timeline-left {
    order: 2;
  }

  /* Timeline on a narrow screen: the line on the left, every entry to its right. */
  .timeline-centre::before {
    left: .4rem;
  }

  .timeline-centre li,
  .timeline-centre li:nth-child(odd),
  .timeline-centre li:nth-child(even) {
    width: auto;
    margin: 0;
    padding-left: 2.4rem;
    text-align: left;
  }

  .timeline-centre li:nth-child(odd)::before,
  .timeline-centre li:nth-child(even)::before {
    left: .4rem;
    right: auto;
    transform: translateX(-50%);
  }

  .timeline-centre li:nth-child(odd) p:not(.timeline__year) {
    margin-left: 0;
  }

  .steps p {
    grid-column: 1;
  }

  .not-list li {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .market-access__inner {
    padding-top: 5.5rem;
    padding-bottom: 6rem;
  }

  .final-cta {
    min-height: 0;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-actions .button {
    width: 100%;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  .mobile-menu {
    display: block;
  }

  .mobile-menu__scrim {
    position: absolute;
    inset: 0;
  }

  .mobile-menu__panel {
    position: relative;
    width: calc(100% - 1.5rem);
    max-width: 26rem;
    margin-left: auto;
  }

  .cookie-consent .button {
    width: auto;
  }
}

/* ── Motion ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ── Type scale on computers (user's call, 1 October 2026) ───────────────
   One scale for the whole site instead of a size set text by text in the
   editor: labels 9 px, text 14 px, small lines 10 px, caption text 12 px and
   caption titles 16 px, main titles 58 px, buttons 10 px. The root is 10px on
   a computer, so 1rem is 1px of this scale. Phones and tablets keep the fluid
   sizes above. A size typed for one text in the visual editor still wins, it
   is drawn inside the text. The "!important" on the text group outranks the
   many specific rules above, on purpose. */
@media (hover: hover), (pointer: fine), (min-width: 1101px) {
  .eyebrow,
  .pic-caption__label,
  .buyer-stops__need,
  .mobile-menu__group {
    font-size: .9rem;
  }

  .prose p,
  .prose li,
  .split__content > p:not(.eyebrow):not(.credit),
  .split__content > div.prose p,
  .section-heading__lead,
  .page-hero__lead,
  .hero__introduction,
  .statement__note,
  .market-access__inner > div:nth-child(2) > p,
  .qualification-note,
  .process-grid p,
  .rule-grid p,
  .rule-grid ul,
  .steps p:not(.timeline__year),
  .timeline-centre p:not(.timeline__year),
  .timeline-left p:not(.timeline__year),
  .segments dd,
  .not-list li,
  .section-note,
  .ledger-note,
  .audience-grid article > p:not(.eyebrow),
  .market-access__lead,
  .people-list p,
  .direction-list li,
  .buyer-stops p:not(.buyer-stops__need),
  .story-card p:not(.credit),
  .final-cta p,
  .form-note,
  .legal p,
  .legal li,
  .page--legal-centered .legal p,
  .page--legal-centered .legal li,
  .article__body p,
  .article__body li {
    font-size: 1.4rem !important;
  }

  .credit,
  .proof-list,
  .page-hero__meta,
  .journal-row__date,
  .article__meta,
  .pager,
  .fam-spec {
    font-size: 1rem;
  }

  .pic-caption,
  .pic-caption--titled,
  .split__image .pic-caption--titled,
  .story-card__media .pic-caption--titled {
    font-size: 1.2rem;
  }

  .pic-caption__title,
  .split__image .pic-caption__title,
  .story-card__media .pic-caption__title {
    font-size: 1.6rem;
  }

  .hero h1,
  .page-hero h1 {
    font-size: 5.8rem;
  }

  .button,
  .text-link {
    font-size: 1rem;
  }

  /* Form answers (mockup 5): small regular red letters, and the thank you. */
  .form-status {
    font-size: 1.25rem;
  }

  .field-error {
    font-size: 1.15rem;
  }

  .form-thanks {
    gap: 1.1rem;
    padding: 4.6rem 2rem 5rem;
  }

  .form-thanks__sign {
    width: 4.6rem;
    height: 4.6rem;
    font-size: 2rem;
  }

  .form-thanks__title {
    font-size: 3.4rem;
  }

  .form-thanks__text {
    font-size: 1.4rem;
  }
}