@charset "utf-8";
/* =============================================================================
   VHI — Veterinary Holdings International
   Shared stylesheet. Art direction: "Institutional Editorial" (Direction A).

   Fraunces        display — headings, business names, figures, monograms
   Source Serif 4  running prose
   Inter Tight     apparatus only — labels, eyebrows, nav, table heads.
                   NEVER set a sentence in Inter Tight.

   CONTENTS
     01  Reset and document
     02  Design tokens
     03  Base typography
     04  Layout primitives (.wrap, .measure, rules)
     05  Apparatus (.eyebrow, .tnum, .marg, .note)
     06  Masthead, primary nav, mobile nav
     07  Section scaffold + folio rail
     08  Buttons and links
     09  Plates and photo slots (.slot)
     10  Hero
     11  Figure band (.figures)
     12  Business entries (.entry)
     13  Roster table + ledger lists
     14  Key–value list (.kv)
     15  The bench (typographic monograms)
     16  Dark band (.band-dark) + commitments + principle
     17  Councils, ladder, pledges, steps, keeps
     18  Footprint map
     19  CTA block + mail row
     20  Footer
     21  Skip link, focus, motion, print
     22  Plates inside the dark band
     23  Page additions — partner.html
     24  Page additions — contact.html
     25  Page additions — group.html
     26  Page additions — careers.html
     27  Page additions — businesses.html
   ============================================================================ */


/* =============================================================================
   01  RESET AND DOCUMENT
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, figcaption, blockquote, dl, dd, ol, ul {
  margin: 0; padding: 0;
}
ol, ul { list-style: none; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; color: inherit; }


/* =============================================================================
   02  DESIGN TOKENS
   ========================================================================== */
:root {
  /* paper and ink */
  --paper:       #FBFAF8;
  --paper-2:     #F3F0E9;
  --paper-3:     #EBE7DC;
  --ink:         #161915;
  --ink-2:       #4B4E46;   /* >= 7:1 on paper */
  --ink-3:       #5E6159;   /* >= 5.5:1 on paper — smallest text still passes */

  /* institutional colour */
  --forest:      #1B4D3E;
  --forest-deep: #0F3227;
  --forest-tint: #E5EDE7;
  --brass:       #7F6127;

  /* on dark */
  --on-dark-text:  #E9EFEB;
  --on-dark-mute:  #BFD2CA;
  --on-dark-brass: #EBD9A8;
  --on-dark-eyeb:  #9FC4B4;

  /* rules */
  --rule:      #DBD6CB;
  --rule-2:    #BEB9AC;
  --rule-dark: #2E5B4C;

  /* type stacks */
  --serif-display: 'Fraunces', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --serif-text:    'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --grot:          'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* metrics */
  --wrap: 1400px;
  --gutter: clamp(20px, 4.4vw, 72px);
  --hair: 1px;
  --rail-w: 104px;
  --stick-top: 126px;
}


/* =============================================================================
   03  BASE TYPOGRAPHY
   ========================================================================== */
html, body { max-width: 100%; }
body {
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-text);
  font-size: 17px;
  line-height: 1.62;
  font-variation-settings: 'opsz' 16;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
@supports not (overflow-x: clip) { html, body { overflow-x: hidden; } }
@media (min-width: 900px) { body { font-size: 17.5px; } }

h1, h2, h3, h4, .display {
  font-family: var(--serif-display);
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.35rem, 5.8vw, 5rem);
  line-height: 0.99;
  letter-spacing: -0.028em;
  margin-top: 0.28em;
}
h2 { font-size: clamp(1.9rem, 3.8vw, 3.25rem); line-height: 1.03; margin-top: 0.35rem; }
h3 { font-size: clamp(1.4rem, 2.4vw, 2.05rem); line-height: 1.08; font-variation-settings: 'opsz' 72; }
h4 { font-size: 1.0625rem; line-height: 1.25; font-variation-settings: 'opsz' 48; }

.h1-em { font-style: italic; color: var(--forest); }

.lede {
  font-size: clamp(1.08rem, 1.3vw, 1.35rem);
  line-height: 1.55;
  font-variation-settings: 'opsz' 28;
  max-width: 60ch;
}
.subhead { margin-top: 1.1rem; color: var(--ink-2); max-width: 62ch; }
p + p { margin-top: 1em; }
strong { font-weight: 600; }
em { font-style: italic; }
::selection { background: var(--forest); color: var(--paper); }


/* =============================================================================
   04  LAYOUT PRIMITIVES
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure       { max-width: 66ch; }
.measure-tight { max-width: 52ch; }
.rule { height: var(--hair); background: var(--rule); border: 0; }
.stack-sm { margin-top: clamp(18px, 2vw, 26px); }
.stack-md { margin-top: clamp(26px, 3vw, 40px); }
.stack-lg { margin-top: clamp(36px, 4.4vw, 62px); }

/* any wide child scrolls in its own box — the body never does */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.two-up { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3.4vw, 56px); }
@media (min-width: 900px) {
  .two-up {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(32px, 4.4vw, 76px);
    align-items: start;
  }
}
@media (min-width: 900px) { .two-up--wide-left { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }


/* =============================================================================
   05  APPARATUS
   ========================================================================== */
.eyebrow {
  font-family: var(--grot);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.155em;
  color: var(--forest);
  line-height: 1.3;
}
.eyebrow--muted { color: var(--ink-3); }
.tnum { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; }

/* italic marginalia, outer column */
.marg {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
  font-style: italic;
  font-variation-settings: 'opsz' 12;
  border-top: var(--hair) solid var(--rule);
  padding-top: 12px;
  max-width: 36ch;
}
.marg strong { font-style: normal; font-weight: 600; color: var(--ink); }

.note { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.note--italic { font-style: italic; }

.label {
  font-family: var(--grot);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}


/* =============================================================================
   06  MASTHEAD, PRIMARY NAV, MOBILE NAV
   ========================================================================== */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--hair) solid var(--rule);
}
@supports not (backdrop-filter: blur(4px)) { .masthead { background: var(--paper); } }

.strip {
  border-bottom: var(--hair) solid var(--rule);
  font-family: var(--grot);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  overflow: hidden;
  height: 30px;
  transition: height 0.3s ease, opacity 0.25s ease;
}
.strip .wrap { display: flex; justify-content: space-between; align-items: center; height: 30px; gap: 16px; }
.strip span:last-child { white-space: nowrap; }
.masthead.is-scrolled .strip { height: 0; opacity: 0; border-bottom-color: transparent; }
/* Below 720px the full company name cannot sit beside the territories without
   truncating mid-word, which reads as a defect rather than as design. Drop it:
   the wordmark is directly beneath it, so nothing is lost. */
@media (max-width: 719px) {
  .strip .wrap { justify-content: flex-end; }
  .strip .wrap span:first-child { display: none; }
}

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; height: 74px; transition: height 0.3s ease;
}
.masthead.is-scrolled .bar { height: 62px; }

.logo { display: flex; align-items: center; gap: 13px; text-decoration: none; flex-shrink: 0; }
.logo-mark {
  font-family: var(--serif-display);
  font-variation-settings: 'opsz' 144;
  font-size: 1.5rem; font-weight: 500; letter-spacing: 0.24em;
  color: var(--forest); line-height: 1; padding-right: 2px;
}
.logo-name {
  font-family: var(--grot);
  font-size: 0.625rem; font-weight: 500; line-height: 1.28;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2);
  border-left: var(--hair) solid var(--rule-2); padding-left: 12px;
}
@media (max-width: 1179px) { .logo-name { display: none; } }

.nav { display: none; }
@media (min-width: 1180px) {
  .nav { display: flex; align-items: center; gap: clamp(13px, 1.5vw, 26px); }
  .nav a {
    font-family: var(--grot); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em;
    text-decoration: none; color: var(--ink-2); padding: 6px 0; position: relative;
    white-space: nowrap; transition: color 0.18s ease;
  }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
    background: var(--forest); transform: scaleX(0); transform-origin: left;
    transition: transform 0.22s ease;
  }
  .nav a:hover { color: var(--ink); }
  .nav a:hover::after { transform: scaleX(1); }
  .nav a[aria-current="page"] { color: var(--forest); font-weight: 600; }
  .nav a[aria-current="page"]::after { transform: scaleX(1); }
}

.bar-end { display: flex; align-items: center; gap: 16px; }
.contact-link {
  display: none;
  font-family: var(--grot); font-size: 0.75rem; font-weight: 500;
  color: var(--forest); text-decoration: none;
  border-bottom: 1px solid var(--rule-2); padding-bottom: 2px;
}
.contact-link:hover { border-bottom-color: var(--forest); }
@media (min-width: 1420px) { .contact-link { display: block; } }

.menu-btn {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--grot); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  padding: 10px 0;
}
@media (min-width: 1180px) { .menu-btn { display: none; } }
.menu-btn .bars { display: block; width: 20px; height: 9px; position: relative; }
.menu-btn .bars::before, .menu-btn .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
  transition: transform 0.25s ease;
}
.menu-btn .bars::before { top: 0; }
.menu-btn .bars::after { bottom: 0; }
.menu-btn[aria-expanded="true"] .bars::before { transform: translateY(3.75px) rotate(15deg); }
.menu-btn[aria-expanded="true"] .bars::after  { transform: translateY(-3.75px) rotate(-15deg); }

.mobile-nav { display: none; border-top: var(--hair) solid var(--rule); background: var(--paper); }
.mobile-nav.is-open { display: block; }
@media (min-width: 1180px) { .mobile-nav, .mobile-nav.is-open { display: none; } }
.mobile-nav ol { padding-block: 8px 22px; }
.mobile-nav li { border-bottom: var(--hair) solid var(--rule); }
.mobile-nav li:last-child { border-bottom: 0; }
.mobile-nav a {
  display: flex; align-items: baseline; gap: 14px; padding: 15px 0; text-decoration: none;
  font-family: var(--serif-display); font-variation-settings: 'opsz' 72; font-size: 1.3rem;
}
.mobile-nav a[aria-current="page"] { color: var(--forest); }
.mobile-nav a[aria-current="page"] .mn-no { color: var(--brass); }
.mobile-nav .mn-no {
  font-family: var(--grot); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em;
  color: var(--ink-3); min-width: 26px;
}

/* scroll progress hairline */
.progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--forest); transform: scaleX(0); transform-origin: left;
}


/* =============================================================================
   07  SECTION SCAFFOLD + FOLIO RAIL
   ========================================================================== */
.section { border-top: var(--hair) solid var(--rule); position: relative; }

/* Oxford double rule opening a major section */
.section--major { border-top: 2px solid var(--forest); }
.section--major::before {
  content: ""; position: absolute; left: 0; right: 0; top: 3px;
  height: var(--hair); background: var(--rule);
}
.section-inner { padding-block: clamp(48px, 7vw, 104px); }
.section-inner--tight { padding-block: clamp(34px, 4.4vw, 62px); }

.section-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 980px) {
  .section-grid {
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    gap: clamp(30px, 3.6vw, 64px);
  }
  .rail { position: relative; }
  .rail::before {
    content: ""; position: absolute; left: 0; top: 4px; bottom: 0;
    width: var(--hair); background: var(--rule);
  }
  .rail-inner {
    position: sticky; top: var(--stick-top); padding-left: 16px;
    display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
  }
  .rail-label {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--grot); font-size: 0.625rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
  }
}
.folio {
  font-family: var(--serif-display); font-variation-settings: 'opsz' 144;
  font-size: 1.6rem; line-height: 1; color: var(--forest);
  font-variant-numeric: tabular-nums lining-nums;
}
.folio::before { content: "§ "; font-size: 0.72em; color: var(--ink-3); letter-spacing: 0.04em; }

/* rail collapses to a horizontal running head on narrow screens */
@media (max-width: 979px) {
  .rail-inner {
    display: flex; align-items: baseline; gap: 14px;
    padding-bottom: 4px; border-bottom: var(--hair) solid var(--rule);
  }
  .folio { font-size: 1.15rem; }
  .rail-label {
    font-family: var(--grot); font-size: 0.625rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  }
}

.sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
  margin-bottom: clamp(34px, 4.4vw, 60px);
}
@media (min-width: 900px) {
  .sec-head {
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px); align-items: end;
  }
}


/* =============================================================================
   08  BUTTONS AND LINKS
   ========================================================================== */
a { color: inherit; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3vw, 38px); }
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--grot); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em;
  text-decoration: none; padding: 14px 22px;
  border: var(--hair) solid var(--forest); background: var(--forest); color: var(--paper);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn .arw { transition: transform 0.22s ease; }
.btn:hover { background: var(--forest-deep); border-color: var(--forest-deep); }
.btn:hover .arw { transform: translateX(4px); }
.btn--ghost { background: transparent; color: var(--forest); border-color: var(--rule-2); }
.btn--ghost:hover { background: var(--forest-tint); border-color: var(--forest); color: var(--forest-deep); }

.textlink {
  font-family: var(--grot); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em;
  color: var(--forest); text-decoration: none;
  border-bottom: 1px solid var(--rule-2); padding-bottom: 3px;
  display: inline-flex; gap: 9px; align-items: center;
}
.textlink:hover { border-bottom-color: var(--forest); }

/* dark-band variants */
.band-dark .btn { background: var(--paper); color: var(--forest-deep); border-color: var(--paper); }
.band-dark .btn:hover { background: #fff; border-color: #fff; }
.band-dark .btn--ghost { background: transparent; color: var(--paper); border-color: rgba(251, 250, 248, 0.45); }
.band-dark .btn--ghost:hover { background: rgba(251, 250, 248, 0.1); border-color: var(--paper); color: var(--paper); }
.band-dark .textlink { color: var(--on-dark-brass); border-bottom-color: rgba(235, 217, 168, 0.4); }
.band-dark .textlink:hover { border-bottom-color: var(--on-dark-brass); }


/* =============================================================================
   09  PLATES AND PHOTO SLOTS
   Every image position is <figure class="slot"> — filled or reserved.
   Ratio is set per instance with the --ar custom property.
   ========================================================================== */
.slot { margin: 0; width: 100%; }
.slot--band { --ar: 21 / 9; }
@media (max-width: 760px) { .slot--band { --ar: 16 / 10; } }

.slot-frame {
  position: relative;
  aspect-ratio: var(--ar, 3 / 2);
  width: 100%;
  overflow: hidden;
  border: var(--hair) solid var(--rule-2);
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(to right,  rgba(27, 77, 62, 0.055) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(to bottom, rgba(27, 77, 62, 0.055) 0 1px, transparent 1px 28px),
    linear-gradient(158deg, #F6F3EC 0%, #EFEBE1 58%, #EAE5D9 100%);
}

/* --- filled plate: a real photograph ------------------------------------- */
.slot--filled .slot-frame { background: var(--paper-3); }
.slot--filled .slot-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.slot--filled .slot-frame::before,
.slot--filled .slot-frame::after { content: none; }

/* --- reserved plate: the designed empty state ---------------------------- */
/* inset hairline */
.slot-frame::before {
  content: ""; position: absolute; inset: 11px;
  border: var(--hair) solid rgba(27, 77, 62, 0.16);
  pointer-events: none;
}
/* forest registration crop-marks at the four corners */
.slot-frame::after {
  content: ""; position: absolute; inset: 11px; pointer-events: none; opacity: 0.55;
  background-image:
    linear-gradient(var(--forest), var(--forest)), linear-gradient(var(--forest), var(--forest)),
    linear-gradient(var(--forest), var(--forest)), linear-gradient(var(--forest), var(--forest)),
    linear-gradient(var(--forest), var(--forest)), linear-gradient(var(--forest), var(--forest)),
    linear-gradient(var(--forest), var(--forest)), linear-gradient(var(--forest), var(--forest));
  background-repeat: no-repeat;
  background-size: 1px 13px, 13px 1px, 1px 13px, 13px 1px, 1px 13px, 13px 1px, 1px 13px, 13px 1px;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
}
.slot-inner {
  position: relative; z-index: 1; text-align: center; padding: 16px; max-width: 88%;
  display: flex; flex-direction: column; gap: 7px; align-items: center;
}
.slot-kicker {
  font-family: var(--grot); font-size: 0.5625rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--forest);
}
.slot-desc {
  font-family: var(--serif-text); font-style: italic;
  font-size: clamp(0.8125rem, 1.15vw, 1rem); line-height: 1.35; color: var(--ink-2);
}
.slot-ratio {
  font-family: var(--grot); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.18em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* --- Plate-numbered caption --------------------------------------------- */
.slot figcaption {
  font-family: var(--grot); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.055em;
  color: var(--ink-2); padding-top: 9px; margin-top: 10px;
  border-top: var(--hair) solid var(--rule);
  display: flex; gap: 9px; align-items: baseline;
}
.slot figcaption .cap-no {
  color: var(--brass); font-weight: 600; letter-spacing: 0.12em; flex-shrink: 0;
}

/* compact plate, e.g. inside a narrow column */
.slot--sm .slot-inner { gap: 4px; padding: 10px; }
.slot--sm .slot-kicker { display: none; }
.slot--sm .slot-desc { font-size: 0.75rem; }
.slot--sm .slot-ratio { font-size: 0.5625rem; letter-spacing: 0.14em; }
.slot--sm .slot-frame::before { inset: 7px; }
.slot--sm .slot-frame::after {
  inset: 7px;
  background-size: 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px, 1px 9px, 9px 1px;
}


/* =============================================================================
   10  HERO
   ========================================================================== */
.hero { border-top: 0; }
.hero-inner { padding-block: clamp(44px, 6.5vw, 88px) clamp(30px, 3.6vw, 46px); }
/* the opening plate, below the hero text and above §01's double rule */
.hero-plate { padding-bottom: clamp(30px, 4vw, 54px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(34px, 4vw, 58px); }
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(250px, 318px); gap: clamp(40px, 5vw, 88px); }
  .hero-aside { align-self: end; border-left: var(--hair) solid var(--rule); padding-left: clamp(20px, 2.2vw, 32px); }
}
.hero-lede { margin-top: clamp(24px, 2.6vw, 34px); }


/* =============================================================================
   11  FIGURE BAND
   ========================================================================== */
.figures {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--hair) solid var(--rule);
}
@media (min-width: 860px) { .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fig-cell {
  position: relative;
  padding: clamp(20px, 2.6vw, 32px) clamp(14px, 2vw, 28px) clamp(22px, 2.8vw, 34px) 0;
  border-bottom: var(--hair) solid var(--rule);
}
@media (min-width: 860px) { .fig-cell { border-bottom: 0; } }
.fig-cell + .fig-cell { padding-left: clamp(14px, 2vw, 28px); }
.fig-cell + .fig-cell::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--hair); background: var(--rule);
}
@media (max-width: 859px) {
  .fig-cell:nth-child(3)::before { content: none; }
  .fig-cell:nth-child(3) { padding-left: 0; }
  .fig-cell:nth-last-child(-n + 2) { border-bottom: 0; }
}
.fig-n {
  display: block;
  font-family: var(--serif-display); font-variation-settings: 'opsz' 144;
  font-size: clamp(3rem, 7.2vw, 5.6rem); line-height: 0.86; letter-spacing: -0.045em;
  color: var(--forest); font-variant-numeric: tabular-nums lining-nums;
}
.fig-n .unit {
  font-size: 0.42em; letter-spacing: -0.01em; vertical-align: 0.55em;
  margin-left: 0.06em; color: var(--brass);
}
.fig-k {
  font-family: var(--grot); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-top: 14px;
}
.fig-d { font-size: 0.875rem; line-height: 1.45; color: var(--ink-2); margin-top: 7px; max-width: 28ch; }
.fig-foot {
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline;
  border-top: var(--hair) solid var(--rule); padding-top: 14px;
  font-family: var(--grot); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.fig-foot .ff-k { color: var(--ink-3); letter-spacing: 0.18em; }


/* =============================================================================
   12  BUSINESS ENTRIES
   ========================================================================== */
.entries { display: flex; flex-direction: column; }
.entry {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.6vw, 38px);
  padding-block: clamp(32px, 4vw, 54px);
  border-top: var(--hair) solid var(--rule);
}
.entry:first-child { border-top: 2px solid var(--ink); padding-top: clamp(26px, 3vw, 38px); }
@media (min-width: 820px) {
  .entry {
    grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr);
    gap: clamp(28px, 3.6vw, 60px); align-items: start;
  }
  .entry--flip { grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr); }
  .entry--flip .entry-media { order: 2; }
}
/* Both grid children must be allowed to shrink below their content's intrinsic
   width, or a long unbroken string (an address, a URL) blows the column out. */
.entry-media, .entry-body { min-width: 0; }
.entry-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.entry-no {
  font-family: var(--serif-display); font-variation-settings: 'opsz' 72; font-size: 1.05rem;
  color: var(--brass); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.02em;
}
.entry h3 { margin-top: 4px; }
.entry-copy { margin-top: 14px; max-width: 60ch; line-height: 1.6; }
.entry-meta {
  margin-top: 20px;
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px 18px;
  border-top: var(--hair) solid var(--rule); padding-top: 14px;
}
.entry-meta dt {
  font-family: var(--grot); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  line-height: 1.6; padding-top: 2px;
}
.entry-meta dd { font-size: 0.9375rem; line-height: 1.5; }
.entry-link { margin-top: 20px; }


/* =============================================================================
   13  ROSTER TABLE + LEDGER LISTS
   ========================================================================== */
.roster { font-size: 0.9375rem; }
.roster caption {
  text-align: left; padding-bottom: 12px;
  font-family: var(--grot); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}
.roster th {
  text-align: left; font-family: var(--grot); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
  padding: 0 18px 10px 0; border-bottom: 2px solid var(--ink); white-space: nowrap;
}
.roster td { padding: 13px 18px 13px 0; border-bottom: var(--hair) solid var(--rule); vertical-align: baseline; }
.roster td:last-child, .roster th:last-child { padding-right: 0; }
.roster .r-no {
  font-family: var(--grot); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--ink-3); font-variant-numeric: tabular-nums; width: 3.2em;
}
.roster .r-name {
  font-family: var(--serif-display); font-variation-settings: 'opsz' 48;
  font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.008em;
}
.roster .r-desc { font-family: var(--grot); font-size: 0.75rem; color: var(--ink-2); line-height: 1.4; }

/* two-column ledger list (compact alternative to the table) */
.ledger {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(28px, 4vw, 64px); border-top: 2px solid var(--ink);
}
@media (min-width: 760px) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ledger li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px;
  padding: 13px 0; border-bottom: var(--hair) solid var(--rule); align-items: baseline;
}
@media (min-width: 520px) { .ledger li { grid-template-columns: 34px minmax(0, 1.35fr) minmax(0, 1fr); } }
.led-no {
  font-family: var(--grot); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.led-name {
  font-family: var(--serif-display); font-variation-settings: 'opsz' 48;
  font-size: 1.0625rem; line-height: 1.25; letter-spacing: -0.008em;
}
.led-desc {
  font-family: var(--grot); font-size: 0.75rem; color: var(--ink-2);
  grid-column: 2 / -1; line-height: 1.4;
}
@media (min-width: 520px) { .led-desc { grid-column: auto; text-align: right; } }


/* =============================================================================
   14  KEY–VALUE LIST
   ========================================================================== */
.kv-title {
  font-family: var(--grot); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 11px; border-bottom: 1px solid var(--ink); margin-bottom: 4px;
}
.kv { margin: 0; }
.kv-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 0; border-bottom: var(--hair) solid var(--rule);
}
.kv-row:last-child { border-bottom: 0; }
.kv-k {
  display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; min-width: 0;
  font-family: var(--grot); font-size: 0.75rem; font-weight: 500; color: var(--ink-2);
  white-space: nowrap;
}
/* dotted leader between key and value */
.kv-k::after {
  content: ""; flex: 1 1 auto; min-width: 14px;
  border-bottom: 1px dotted var(--rule-2); transform: translateY(-3px);
}
.kv-v {
  font-family: var(--serif-display); font-variation-settings: 'opsz' 72; font-size: 1.0625rem;
  font-variant-numeric: tabular-nums lining-nums; color: var(--ink); white-space: nowrap;
}


/* =============================================================================
   15  THE BENCH — typographic monograms
   Only two of eleven portraits exist, so the bench is set in type, uniformly.
   ========================================================================== */
.bench {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr));
  gap: clamp(22px, 2.6vw, 38px) clamp(18px, 2vw, 32px);
  border-top: 2px solid var(--ink); padding-top: clamp(24px, 3vw, 38px);
}
.person { display: flex; gap: 16px; align-items: flex-start; }
.mono {
  position: relative; flex: 0 0 auto;
  width: 78px; height: 78px;
  display: flex; align-items: center; justify-content: center;
  background: var(--forest-tint);
  border: var(--hair) solid var(--rule-2);
  font-family: var(--serif-display); font-variation-settings: 'opsz' 144;
  font-size: 1.28rem; font-weight: 500; letter-spacing: 0.07em;
  color: var(--forest); line-height: 1;
}
.mono::before {
  content: ""; position: absolute; inset: 6px;
  border: var(--hair) solid rgba(27, 77, 62, 0.22); pointer-events: none;
}
.mono--brass { background: #F2EDE0; color: var(--brass); border-color: #D9CFB4; }
.mono--brass::before { border-color: rgba(127, 97, 39, 0.24); }
.person-b { min-width: 0; }
.person-n {
  font-family: var(--serif-display); font-variation-settings: 'opsz' 48;
  font-size: 1.0625rem; line-height: 1.2; letter-spacing: -0.006em;
}
.person-r {
  font-family: var(--grot); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--forest); margin-top: 7px; line-height: 1.4;
}
.person-d { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); margin-top: 6px; font-style: italic; }

.band-dark .mono { background: rgba(233, 239, 235, 0.09); border-color: var(--rule-dark); color: var(--on-dark-brass); }
.band-dark .mono::before { border-color: rgba(235, 217, 168, 0.22); }
.band-dark .person-r { color: var(--on-dark-eyeb); }
.band-dark .person-d { color: var(--on-dark-mute); }
.band-dark .bench { border-top-color: var(--rule-dark); }


/* =============================================================================
   16  DARK BAND
   ========================================================================== */
.band-dark { background: var(--forest-deep); color: var(--on-dark-text); border-top: 0; }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--paper); }
.band-dark .eyebrow { color: var(--on-dark-eyeb); }
.band-dark .eyebrow--muted { color: var(--on-dark-mute); }
.band-dark .lede, .band-dark p { color: var(--on-dark-text); }
.band-dark .note, .band-dark .subhead { color: var(--on-dark-mute); }
.band-dark .marg { color: var(--on-dark-mute); border-top-color: var(--rule-dark); }
.band-dark .marg strong { color: var(--paper); }
.band-dark .rail::before { background: var(--rule-dark); }
.band-dark .folio { color: var(--on-dark-brass); }
.band-dark .folio::before { color: #7EA396; }
.band-dark .rail-label { color: #8FB3A5; }
.band-dark .rule { background: var(--rule-dark); }
@media (max-width: 979px) { .band-dark .rail-inner { border-bottom-color: var(--rule-dark); } }

.commitments { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule-dark); }
@media (min-width: 860px) {
  .commitments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); border-top: 0; }
}
.commit { padding: 24px 0; border-bottom: 1px solid var(--rule-dark); }
@media (min-width: 860px) { .commit { border-top: 1px solid var(--rule-dark); border-bottom: 0; padding: 22px 0 0; } }
.commit-no {
  font-family: var(--grot); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--on-dark-brass);
}
.commit h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); margin-top: 12px; }
.commit p { margin-top: 11px; font-size: 0.9375rem; line-height: 1.55; color: var(--on-dark-mute); max-width: 42ch; }

.principle {
  margin-top: clamp(40px, 5vw, 68px);
  border-top: 1px solid var(--rule-dark); padding-top: clamp(26px, 3vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
}
@media (min-width: 900px) {
  .principle { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 64px); align-items: end; }
}
.principle-q {
  font-family: var(--serif-display); font-variation-settings: 'opsz' 144; font-weight: 300;
  font-size: clamp(1.7rem, 4.2vw, 3.4rem); line-height: 1.04; letter-spacing: -0.026em;
  color: var(--paper);
}
.principle-q em { font-style: italic; color: var(--on-dark-brass); }
.principle-c { font-size: 0.9375rem; line-height: 1.55; color: var(--on-dark-mute); font-style: italic; max-width: 34ch; }
.principle-c strong {
  display: block; font-style: normal; font-weight: 600; color: var(--paper);
  font-family: var(--grot); font-size: 0.625rem; letter-spacing: 0.2em;
  text-transform: uppercase; margin-bottom: 9px;
}


/* =============================================================================
   17  COUNCILS, LADDER, PLEDGES, STEPS, KEEPS
   ========================================================================== */
.councils {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  gap: 0 clamp(18px, 2.4vw, 36px); border-top: 2px solid var(--ink);
}
.councils li { display: flex; align-items: baseline; gap: 11px; padding: 11px 0; border-bottom: var(--hair) solid var(--rule); }
.council-no { font-family: var(--grot); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; color: var(--brass); font-variant-numeric: tabular-nums; }
.council-n { font-family: var(--serif-text); font-size: 0.9375rem; line-height: 1.3; }
.band-dark .councils { border-top-color: var(--rule-dark); }
.band-dark .councils li { border-bottom-color: var(--rule-dark); }
.band-dark .council-no { color: var(--on-dark-brass); }

.ladder { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
@media (min-width: 700px) { .ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); } }
.rung { position: relative; padding: 14px 0 16px; border-top: 2px solid var(--forest); }
@media (max-width: 699px) {
  .rung { border-top: var(--hair) solid var(--rule); }
  .rung:first-child { border-top: 2px solid var(--forest); }
}
.rung::before { content: ""; position: absolute; left: 0; top: -2px; width: 8px; height: 8px; background: var(--forest); }
.rung-k { font-family: var(--grot); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.rung-n { font-family: var(--serif-display); font-variation-settings: 'opsz' 48; font-size: 1.0625rem; line-height: 1.2; margin-top: 8px; }

.pledges { border-top: 2px solid var(--ink); margin-top: 26px; }
.pledges li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: baseline;
  padding: 14px 0; border-bottom: var(--hair) solid var(--rule);
}
.pledge-mark { font-family: var(--grot); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; color: var(--brass); text-transform: uppercase; }
.pledge-t { font-family: var(--serif-display); font-variation-settings: 'opsz' 48; font-size: 1.0625rem; line-height: 1.25; }
.pledge-d { grid-column: 1 / -1; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 560px) { .pledge-d { grid-column: 2 / -1; } }

.steps { margin-top: 24px; border-top: 2px solid var(--ink); }
.steps li { padding: 16px 0; border-bottom: var(--hair) solid var(--rule); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; }
.step-no { font-family: var(--serif-display); font-variation-settings: 'opsz' 72; font-size: 1rem; color: var(--brass); font-variant-numeric: tabular-nums; }
.step-t { font-family: var(--grot); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.step-d { grid-column: 2 / -1; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }

.keeps { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 26px; border-top: var(--hair) solid var(--rule); }
@media (min-width: 600px) { .keeps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 2.6vw, 40px); } }
.keeps > div { padding: 15px 0; border-bottom: var(--hair) solid var(--rule); }
.keeps h3, .keeps h4 {
  font-family: var(--grot); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--forest); margin-bottom: 7px;
}
.keeps p { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }


/* =============================================================================
   18  FOOTPRINT MAP
   ========================================================================== */
.map-block { border-top: var(--hair) solid var(--rule); margin-top: clamp(30px, 3.6vw, 48px); padding-top: clamp(24px, 2.8vw, 36px); }
.map-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.map-svg { min-width: 540px; width: 100%; height: auto; display: block; }
.map-coast   { fill: var(--forest-tint); stroke: var(--forest); stroke-width: 2; stroke-linejoin: round; }
.map-grat    { stroke: var(--rule-2); stroke-width: 0.75; fill: none; opacity: 0.7; }
.map-sea     { fill: none; }
.map-dot     { fill: var(--forest); }
.map-dot-ring { fill: none; stroke: var(--forest); stroke-width: 1.5; opacity: 0.5; }
.map-leader  { stroke: var(--brass); stroke-width: 1.25; fill: none; }
.map-city {
  font-family: var(--grot); font-size: 23px; font-weight: 600; letter-spacing: 0.06em;
  fill: var(--ink);
}
.map-country {
  font-family: var(--grot); font-size: 20px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; fill: var(--ink-3);
}
.map-key {
  display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 16px;
  border-top: var(--hair) solid var(--rule); padding-top: 14px;
  font-family: var(--grot); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.map-key .mk-k { color: var(--ink-3); letter-spacing: 0.18em; }


/* =============================================================================
   19  CTA BLOCK + MAIL ROW
   ========================================================================== */
.cta {
  border-top: 2px solid var(--forest); margin-top: clamp(34px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 38px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
}
@media (min-width: 860px) {
  .cta { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 64px); align-items: end; }
}
.cta h2, .cta h3 { max-width: 20ch; }
.cta .actions { margin-top: 0; }
@media (min-width: 860px) { .cta .actions { justify-content: flex-end; } }
.band-dark .cta { border-top-color: var(--on-dark-brass); }

.mailrow {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin-top: 26px;
  border-top: 2px solid var(--forest); padding-top: 16px;
}
.mailrow .ml-k {
  font-family: var(--grot); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-3);
}
.mailrow a {
  font-family: var(--serif-display); font-variation-settings: 'opsz' 72;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem); color: var(--forest); text-decoration: none;
  border-bottom: 1px solid var(--rule-2); padding-bottom: 3px;
  letter-spacing: -0.01em; word-break: break-word;
}
.mailrow a:hover { border-bottom-color: var(--forest); }
.band-dark .mailrow { border-top-color: var(--on-dark-brass); }
.band-dark .mailrow .ml-k { color: var(--on-dark-mute); }
.band-dark .mailrow a { color: var(--on-dark-brass); border-bottom-color: rgba(235, 217, 168, 0.4); }


/* =============================================================================
   20  FOOTER
   ========================================================================== */
.site-foot { background: var(--paper-2); border-top: 2px solid var(--forest); }
.foot-top {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 48px);
  padding-block: clamp(40px, 5vw, 72px) clamp(28px, 3.4vw, 44px);
}
@media (min-width: 820px) { .foot-top { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } }
.foot-mark { display: flex; flex-direction: column; gap: 14px; max-width: 38ch; }
.foot-mark .logo-mark { font-size: 1.7rem; }
.foot-blurb { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.foot-h {
  font-family: var(--grot); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 10px; border-bottom: var(--hair) solid var(--rule-2); margin-bottom: 4px;
}
.foot-col li { border-bottom: var(--hair) solid var(--rule); }
.foot-col a {
  display: block; padding: 10px 0; text-decoration: none; font-size: 0.9375rem; color: var(--ink);
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.foot-col a:hover { color: var(--forest); padding-left: 5px; }
.foot-col a[aria-current="page"] { color: var(--forest); font-weight: 600; }

.notice {
  border-top: var(--hair) solid var(--rule-2); padding-block: clamp(20px, 2.4vw, 30px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
@media (min-width: 900px) { .notice { grid-template-columns: minmax(0, auto) minmax(0, 1.9fr); gap: clamp(24px, 4vw, 64px); } }
.notice-k {
  font-family: var(--grot); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brass); white-space: nowrap;
}
.notice p { font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); max-width: 88ch; }
.notice p + p { margin-top: 0.7em; }

.colophon {
  border-top: var(--hair) solid var(--rule-2); padding-block: 20px 30px;
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between;
  font-family: var(--grot); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3);
}


/* =============================================================================
   21  SKIP LINK, FOCUS, MOTION, PRINT
   ========================================================================== */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--forest); color: var(--paper); padding: 12px 18px;
  font-family: var(--grot); font-size: 0.8125rem; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 0; }

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 1px;
}
.band-dark a:focus-visible, .band-dark button:focus-visible { outline-color: var(--on-dark-brass); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

/* Reveal-on-scroll. The hiding rule applies ONLY when the .js hook is present,
   which site.js adds and can remove again. If JS never runs, or the reveal
   machinery fails, content is visible. Nothing can stay at opacity 0. */
.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .masthead, .mobile-nav, .skip, .progress { display: none !important; }
  body { font-size: 11pt; background: #fff; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .band-dark { background: #fff; color: #000; }
  .band-dark .pledge-t, .band-dark .pledge-d, .band-dark .pledge-mark { color: #000 !important; }
  .section { break-inside: avoid; }
}


/* =============================================================================
   22  PLATES INSIDE THE DARK BAND
   Added for governance.html §01, where the reserved dyad plate is mounted on
   the deep-forest band. The plate itself stays paper — that is the point — but
   its caption furniture needs on-dark colours to keep contrast.
   ========================================================================== */
.band-dark .slot figcaption {
  color: var(--on-dark-mute);
  border-top-color: var(--rule-dark);
}
.band-dark .slot figcaption .cap-no { color: var(--on-dark-brass); }
.band-dark .slot-frame { border-color: var(--rule-dark); }


/* =============================================================================
   23  PAGE ADDITIONS — partner.html
   The four never-commitments (.pledges) are set inside the dark band on
   partner.html. The base component is drawn in ink on paper, so it needs the
   same inversion the other components already carry in section 16.
   ========================================================================== */
.band-dark .pledges     { border-top-color: var(--on-dark-brass); }
.band-dark .pledges li  { border-bottom-color: var(--rule-dark); }
.band-dark .pledge-mark { color: var(--on-dark-brass); }
.band-dark .pledge-t    { color: var(--paper); }
.band-dark .pledge-d    { color: var(--on-dark-mute); }


/* =============================================================================
   24  PAGE ADDITIONS — contact.html
   The three correspondence addresses on contact.html §01 sit three-up inside
   the dark band. Structurally this is the .commit card, but the content is an
   address rather than a commitment, so it is drawn as its own component and
   carries the same on-dark inversion. .mailrow--sm is the compact variant of
   the mail row (section 19) for use inside a narrow column, where the full
   display size would break the address across lines.
   ========================================================================== */
.addresses {
  display: grid; grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rule); margin-top: clamp(26px, 3vw, 38px);
}
@media (min-width: 880px) {
  .addresses { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 52px); }
}
.address { padding: 24px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 880px) {
  .address { border-top: 1px solid var(--rule); border-bottom: 0; padding: 22px 0 0; margin-top: -1px; }
}
.address-no {
  font-family: var(--grot); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brass);
}
.address h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); margin-top: 12px; }
.address p { margin-top: 11px; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); max-width: 40ch; }

.band-dark .addresses  { border-top-color: var(--rule-dark); }
.band-dark .address    { border-top-color: var(--rule-dark); border-bottom-color: var(--rule-dark); }
.band-dark .address-no { color: var(--on-dark-brass); }
.band-dark .address p  { color: var(--on-dark-mute); }

/* compact mail row — a single address inside a narrow column */
.mailrow--sm { margin-top: 18px; padding-top: 12px; border-top-width: 1px; gap: 6px 14px; }
.mailrow--sm a { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); }

@media print {
  .address    { border-color: #000 !important; }
  .address p  { color: #000 !important; }
  .address-no { color: #000 !important; }
}


/* =============================================================================
   25  PAGE ADDITIONS — group.html
   One rule. Reusable by any page that closes with a .cta block.
   ========================================================================== */

/* A closing .cta block is a *section* heading on an inner page, so it carries an
   <h2> rather than the <h3> the homepage pattern assumes. Match the h3 measure
   and bring the size down to closing-block scale. */
.cta h2 {
  max-width: 20ch;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.06;
  font-variation-settings: 'opsz' 72;
}


/* =============================================================================
   26  PAGE ADDITIONS — careers.html
   The numbered process (.steps, §17) is set inside the dark band on the
   Careers page. Its default rules are inked for paper, so the four tokens
   that would fall below contrast on forest are re-stated here. Nothing else
   is added; every other component on that page is used as the system ships it.
   ========================================================================== */
.band-dark .steps { border-top-color: var(--on-dark-brass); }
.band-dark .steps li { border-bottom-color: var(--rule-dark); }
.band-dark .step-no { color: var(--on-dark-brass); }
.band-dark .step-t  { color: var(--paper); }
.band-dark .step-d  { color: var(--on-dark-mute); }

/* A reserved plate held to an editorial width, so an empty plate never runs the
   full column on a wide screen and can never read as a failed image. Used for
   the partner.html hero plate. */
.slot--held { max-width: 760px; }


/* =============================================================================
   27  PAGE ADDITIONS — businesses.html
   Three small additions only. Everything else on that page reuses §01–§21.
     .two-up--flip   mirrors a .two-up on wide screens without changing DOM
                     order, so the media column alternates sides down the page
                     while narrow screens always read prose first.
     .plate-pair     two plates side by side inside the content column.
     .lead           the "clinical leadership" block under a business: a rule,
                     a small-caps label, then one .person monogram (§15).
   ========================================================================== */
@media (min-width: 900px) {
  .two-up--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .two-up--flip > :first-child { order: 2; }
}

.plate-pair {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
}
@media (min-width: 620px) {
  .plate-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lead { border-top: var(--hair) solid var(--rule); padding-top: 15px; }
.lead .label { display: block; margin-bottom: 14px; }
.band-dark .lead { border-top-color: var(--rule-dark); }

/* ============================================================
   22 · BENCH PORTRAITS
   A photograph replaces the typographic monogram in .mono.
   The inset hairline of .mono::before is retained and painted
   over the image, so the plate framing stays consistent.
   .mono--brass still distinguishes the administrative track
   by border colour.
   ============================================================ */
.mono--photo {
  padding: 0;
  overflow: hidden;
  background: var(--paper-3, #EBE7DC);
}
.mono--photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.mono--photo::before { z-index: 1; }

/* ============================================================
   23 · BENCH NAME LINKS
   Each bench member's name links to their LinkedIn profile.
   Styled as an editorial name first and a link second: the
   underline only appears on hover or focus.
   ============================================================ */
.person-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  border-radius: 2px;
}
.person-link:hover,
.person-link:focus-visible {
  color: var(--forest);
  text-decoration: underline;
  text-decoration-color: var(--brass);
}
.person-link:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
}
.band-dark .person-link:hover,
.band-dark .person-link:focus-visible { color: var(--d-text, #F4F2ED); }


/* ============================================================
   24 · SECTIONS AWAITING PHOTOGRAPHY  (TEMPORARY)
   Where a section's photograph has not been shot yet, the plate
   was removed rather than left as an empty frame. These rules
   let the remaining column run full width instead of sitting in
   half a grid. Delete this block, and the .two-up--solo classes,
   when the photography lands.
   ============================================================ */
@media (min-width: 900px) {
  .two-up--solo { grid-template-columns: minmax(0, 1fr); }
  .two-up--solo > * { max-width: 78ch; }
}
.entry--nomedia { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) {
  .entry--nomedia { grid-template-columns: minmax(0, 1fr); }
  .entry--nomedia .entry-body { max-width: 82ch; }
}

/* ============================================================
   25 · PRESENTATION MODE LINK
   A discreet way into present.html from the footer. Marked so it
   can be hidden from public visitors with one rule if wanted:
     .foot-present { display: none; }
   ============================================================ */
.foot-present { font-variant: small-caps; letter-spacing: 0.04em; }

/* ------------------------------------------------------------
   25b · PRESENT in the primary nav
   Set apart from the site's own pages by a hairline, because it
   opens a tool rather than another page. Hide both entry points
   from public visitors with:
     .nav-present, .foot-present { display: none; }
   ------------------------------------------------------------ */
.nav .nav-present {
  margin-left: 0.5em;
  padding-left: 0.9em;
  border-left: var(--hair) solid var(--rule-2);
  color: var(--brass);
}
.nav .nav-present:hover,
.nav .nav-present:focus-visible { color: var(--forest); }

/* ============================================================
   26 · MOBILE MENU — scrollable panel
   The menu lives inside a position:sticky masthead. Once it grew
   past the viewport its lower items sat below the fold, and a
   thumb-drag scrolled the page behind it instead of the menu,
   which read as the menu vanishing. Open, it becomes a fixed
   panel under the bar that scrolls on its own, with the page
   behind it locked.
   ============================================================ */
@media (max-width: 1179px) {
  .mobile-nav.is-open {
    position: fixed;
    left: 0; right: 0;
    top: var(--mnav-top, 104px);
    bottom: 0;
    z-index: 59;                      /* under the masthead bar, over the page */
    background: var(--paper);
    overflow-y: auto;
    overscroll-behavior: contain;     /* a scroll that runs out must not chain to the page */
    -webkit-overflow-scrolling: touch;
    border-top: var(--hair) solid var(--rule);
  }
  .mobile-nav.is-open ol { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}

/* page behind the open menu does not scroll */
html.menu-open, html.menu-open body { overflow: hidden; }

/* The masthead's backdrop-filter creates a containing block for position:fixed
   descendants, which collapsed the panel against the header instead of the
   viewport. Drop the blur while the menu is open — the panel is opaque and
   covers the page anyway, so nothing is lost visually. */
html.menu-open .masthead {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--paper);
}

/* Public audience paths, business directory and newsroom. */
.home-routes { margin-top: 44px; margin-bottom: 30px; }
.route-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:2px solid var(--forest); border-bottom:1px solid var(--rule); }
.route-card { display:block; padding:30px; color:var(--ink); text-decoration:none; position:relative; }
.route-card + .route-card { border-left:1px solid var(--rule); }
.route-card h2 { font-size:clamp(1.6rem,2.1vw,2.1rem); margin:14px 0; }
.route-card p { color:var(--ink-2); max-width:32ch; }
.route-card > span:last-child { display:block; font-size:1.5rem; color:var(--forest); margin-top:18px; }
.route-card:hover { background:var(--forest-tint); }
.business-directory { margin-top:30px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 30px; }
.business-card { display:flex; gap:15px; align-items:baseline; padding:20px 0; border-top:1px solid var(--rule); text-decoration:none; color:var(--ink); }
.business-card > span:nth-child(2) { flex:1; min-width:0; }
.business-card strong { font-family:var(--serif-display); font-size:1.25rem; font-weight:400; line-height:1.2; display:block; }
.business-card:hover strong { color:var(--forest); text-decoration:underline; text-underline-offset:4px; }
.business-no { font-size:.78rem; color:var(--brass); font-variant-numeric:tabular-nums; }
.business-discipline { display:block; font-family:var(--grot); font-size:.75rem; line-height:1.5; color:var(--ink-3); margin-top:6px; }
.business-jump { position:sticky; top:var(--header-height,104px); z-index:35; background:var(--paper-2); border-block:1px solid var(--rule); padding:12px 0; }
.business-jump .wrap { display:flex; align-items:center; gap:18px; }
.business-jump label,.business-jump a { font:500 .8rem var(--grot); }
.business-jump select { font:400 .95rem var(--serif-text); min-width:0; max-width:430px; flex:1; border:1px solid var(--rule-2); background:var(--paper); color:var(--ink); padding:10px 12px; min-height:44px; border-radius:0; }
.business-jump ~ section { scroll-margin-top:calc(var(--header-height,104px) + 90px); }
.bench--compact { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:36px; }
.bench--profiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
.bench--profiles .person { scroll-margin-top:140px; }
.bench--profiles .person-d { font-size:.95rem; line-height:1.55; }
.portrait-download { display:inline-block; margin-top:15px; font-size:.85rem; }
.news-card { display:grid; grid-template-columns:1fr 1fr; gap:clamp(25px,4vw,65px); align-items:center; }
.news-card img { width:100%; height:auto; }
.news-card h3 { font-size:clamp(1.5rem,2.5vw,2.4rem); margin:16px 0; }
.news-card h3 a { color:inherit; text-decoration:none; }
.news-card h3 a:hover { text-decoration:underline; text-underline-offset:5px; }
.news-card p { color:var(--ink-2); }
.news-card .textlink { display:inline-block; margin-top:20px; }
@media(max-width:1000px) {
 .business-directory,.bench--profiles,.bench--compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .route-card { padding:24px 18px; }
}
@media(max-width:650px) {
 .route-grid,.news-card { grid-template-columns:1fr; }
 .route-card + .route-card { border-left:0; border-top:1px solid var(--rule); }
 .route-card { padding:25px 0; }
 .route-card p { max-width:none; }
 .route-card > span:last-child { position:absolute;right:4px;top:4px; }
 .business-directory { grid-template-columns:1fr; }
 .business-jump label { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); }
 .business-jump .wrap { gap:12px; }
 .business-jump a { white-space:nowrap; }
 .bench--profiles,.bench--compact { grid-template-columns:1fr; }
}
@media print { .business-jump,.home-routes,.portrait-download { display:none; } }

html.is-restoring { overflow-anchor:none;scroll-behavior:auto; }
.is-restoring .strip,.is-restoring .bar { transition:none!important; }
.band-dark .keeps h3 { color:var(--on-dark-brass); }
.band-dark .keeps p { color:var(--on-dark-mute); }
.band-dark .keeps > div { border-color:var(--rule-dark); }