/* ==========================================================================
   Freesheart™ — Accessibility, layout rhythm & reading controls
   Loaded on every route. Built on an 8px spacing grid.
   ========================================================================== */

:root {
  /* 8px grid */
  --fh-1: 8px;
  --fh-2: 16px;
  --fh-3: 24px;
  --fh-4: 32px;
  --fh-5: 40px;
  --fh-6: 48px;
  --fh-8: 64px;
  --fh-10: 80px;
  --fh-12: 96px;

  --fh-shell-max: 1200px;
  --fh-measure: 68ch;

  /* Focus indicator */
  --fh-focus: #7a2e00;
  --fh-focus-halo: #ffffff;

  --fh-body-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fh-display-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/* --------------------------------------------------------------------------
   1. Focus visibility — 3px solid accent with a high-contrast surrounding ring
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid var(--fh-focus) !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 6px var(--fh-focus-halo),
    0 0 0 9px rgba(28, 21, 16, 0.6) !important;
  border-radius: 2px;
}

/* Fallback for engines without :focus-visible */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:focus {
    outline: 3px solid var(--fh-focus) !important;
    outline-offset: 3px !important;
  }
}

main:focus {
  outline: none;
}

/* Programmatic focus target after skip-link / route change */
main:focus-visible {
  outline: 3px dashed var(--fh-focus) !important;
  outline-offset: -6px !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   2. Skip navigation
   -------------------------------------------------------------------------- */

.fh-skip-list {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
}

.fh-skip {
  position: absolute;
  top: var(--fh-1);
  left: var(--fh-1);
  transform: translateY(-200%);
  display: inline-block;
  padding: 14px 24px;
  background: var(--dark);
  color: #ffffff;
  font-family: var(--fh-body-font);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 2px solid var(--gold);
  white-space: nowrap;
}

.fh-skip:nth-of-type(2) { left: 220px; }
.fh-skip:nth-of-type(3) { left: 420px; }

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

/* --------------------------------------------------------------------------
   3. Screen-reader-only utility
   -------------------------------------------------------------------------- */

.fh-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Global page shell — sticky header & primary navigation
   -------------------------------------------------------------------------- */

.fh-shell {
  background: var(--warm-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The header is sticky, so an anchored heading would otherwise land underneath
   it. This offsets both native fragment navigation and the scrollIntoView call
   the router makes when a route is opened with a hash. */
html {
  /* The header publishes its measured height at runtime; the literals are the
     first-paint fallback, so an anchored heading is never hidden underneath. */
  scroll-padding-top: calc(var(--fh-header-bar-height, 88px) + 16px);
}

@media (min-width: 1080px) {
  html { scroll-padding-top: calc(var(--fh-header-bar-height, 120px) + 16px); }
}

.fh-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(253, 251, 247, 0.97);
  border-bottom: 1px solid var(--sand);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.fh-header-inner {
  max-width: var(--fh-shell-max);
  margin: 0 auto;
  padding: var(--fh-2) clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fh-3);
  /* The header carries a brand block, seven navigation items, the reading
     controls and a long call to action. Their combined intrinsic width exceeds
     the shell at every viewport, so every child must be allowed to shrink or
     wrap — otherwise the last item (the consultation button) is pushed past the
     right edge and clipped. */
  flex-wrap: wrap;
  row-gap: var(--fh-2);
}

.fh-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex: 0 1 auto;
  min-width: 0;
}

/* Flex children default to min-width: auto, which would stop the brand text
   from ever shrinking. Releasing it lets the tagline wrap instead of pushing
   the menu button off-screen on narrow viewports. */
.fh-brand > span {
  min-width: 0;
}

.fh-brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.fh-brand-name {
  font-family: var(--fh-display-font);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--dark);
  line-height: 1.1;
  display: block;
}

.fh-brand-tag {
  font-family: var(--fh-body-font);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown-mid);
  display: block;
  margin-top: 2px;
}

.fh-nav-desktop {
  display: none;
  min-width: 0;
}

.fh-nav-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fh-3);
  row-gap: var(--fh-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fh-nav-link {
  display: inline-block;
  padding: var(--fh-1) 2px;
  font-family: var(--fh-body-font);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brown);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.fh-nav-link:hover {
  color: var(--amber);
  border-bottom-color: var(--sand);
}

.fh-nav-link[aria-current="page"] {
  color: var(--amber);
  border-bottom-color: var(--terracotta);
  font-weight: 700;
}

.fh-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--fh-2);
  flex: 0 1 auto;
  /* On a 360px-wide phone the brand and this cluster cannot share one line, so
     the cluster wraps onto a second row. `justify-content: space-between` on the
     header places a lone item at the *start* of its line, which left-aligned the
     reading controls and the menu button under the brand. The auto start margin
     keeps them against the right edge on whichever line they land. */
  margin-inline-start: auto;
}

.fh-header-cta {
  display: none;
  padding: 12px 20px;
  background: var(--terracotta);
  color: #ffffff;
  font-family: var(--fh-body-font);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--terracotta);
  /* Keep the label on one line: a mid-phrase break reads as a broken button,
     and the two-row desktop header below guarantees there is room for it. */
  white-space: nowrap;
  flex: 0 0 auto;
}

.fh-header-cta:hover {
  background: var(--amber);
  border-color: var(--amber);
}

.fh-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--fh-1);
  min-height: 48px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--sand);
  cursor: pointer;
  font-family: var(--fh-body-font);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown);
}

.fh-nav-mobile {
  border-top: 1px solid var(--sand-light);
  background: var(--warm-white);
  padding: var(--fh-2) clamp(16px, 4vw, 32px) var(--fh-4);
  /* Seven links plus padding are taller than a phone held in landscape. Scroll
     the list inside the menu so every destination stays reachable instead of
     pushing the page content down by more than a screenful. */
  max-height: calc(100vh - var(--fh-header-bar-height, 96px));
  max-height: calc(100dvh - var(--fh-header-bar-height, 96px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.fh-nav-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.fh-nav-mobile .fh-nav-link {
  display: block;
  padding: var(--fh-2) 0;
  border-bottom: 1px solid var(--sand-light);
  font-size: 0.9rem;
  min-height: 48px;
}

.fh-nav-mobile .fh-nav-link[aria-current="page"] {
  border-bottom-color: var(--terracotta);
}

/* Desktop header.

   A single row cannot hold the brand, seven navigation items, the reading
   controls and "Schedule a Strategic Consultation" — measured against the
   1200px shell the intrinsic width overruns by roughly 350px, so the button sat
   outside the right edge and was clipped. The row is therefore split in two:
   brand and actions on top, primary navigation beneath. Nothing is hidden,
   shortened, or scrolled out of reach. */
@media (min-width: 1080px) {
  .fh-header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand actions"
      "nav   nav";
    align-items: center;
    justify-content: normal;
    column-gap: var(--fh-3);
    row-gap: var(--fh-1);
    padding-top: var(--fh-2);
    padding-bottom: var(--fh-1);
  }

  .fh-brand { grid-area: brand; }

  .fh-header-actions {
    grid-area: actions;
    /* Stretched across the track rather than sized to its content, with the
       base rule right-aligning the children. If a larger reading font ever
       makes the pair too wide, the button wraps below the reading controls
       instead of being clipped. An auto margin would override that stretch, so
       the wrapping fix above is dropped for this layout. */
    justify-self: stretch;
    margin-inline-start: 0;
  }

  .fh-nav-desktop {
    grid-area: nav;
    display: block;
  }

  .fh-header-cta { display: inline-flex; align-items: center; }
  .fh-menu-toggle { display: none; }
  .fh-nav-mobile { display: none; }
}

/* --------------------------------------------------------------------------
   5. Breadcrumbs
   -------------------------------------------------------------------------- */

.fh-breadcrumb {
  background: var(--cream);
  border-bottom: 1px solid var(--sand-light);
}

.fh-breadcrumb-inner {
  max-width: var(--fh-shell-max);
  margin: 0 auto;
  padding: var(--fh-2) clamp(16px, 4vw, 32px);
}

.fh-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fh-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--fh-body-font);
  font-size: 0.78rem;
  color: var(--brown-mid);
}

.fh-breadcrumb a {
  color: var(--brown);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 2px;
}

.fh-breadcrumb a:hover { color: var(--amber); }

.fh-breadcrumb [aria-current="page"] {
  color: var(--dark);
  font-weight: 600;
}

.fh-breadcrumb-sep {
  color: var(--brown-mid);
}

/* --------------------------------------------------------------------------
   6. Page heading block & section rhythm
   -------------------------------------------------------------------------- */

.fh-main {
  flex: 1 1 auto;
  display: block;
}

.fh-pagehead {
  background: var(--warm-white);
  border-bottom: 1px solid var(--sand-light);
}

.fh-pagehead-inner {
  max-width: var(--fh-shell-max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 32px);
}

.fh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--fh-3);
  font-family: var(--fh-body-font);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--amber);
}

.fh-eyebrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--terracotta);
}

.fh-pagetitle {
  font-family: var(--fh-display-font);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--dark);
  margin: 0 0 var(--fh-3);
  max-width: 22ch;
  text-wrap: balance;
}

.fh-lede {
  font-family: var(--fh-body-font);
  font-size: clamp(0.98rem, 1.6vw, 1.08rem);
  line-height: 1.9;
  color: var(--brown);
  margin: 0;
  max-width: var(--fh-measure);
  text-wrap: pretty;
}

.fh-onthispage {
  margin-top: var(--fh-4);
  padding: var(--fh-3);
  background: var(--cream);
  border: 1px solid var(--sand-light);
  border-left: 4px solid var(--gold);
  max-width: var(--fh-measure);
}

.fh-onthispage h2 {
  font-family: var(--fh-body-font);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown-mid);
  margin: 0 0 var(--fh-2);
  font-weight: 700;
}

.fh-onthispage ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fh-1);
}

.fh-onthispage a {
  font-family: var(--fh-body-font);
  font-size: 0.9rem;
  color: var(--brown);
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
  padding: 4px 0;
}

.fh-onthispage a:hover { color: var(--amber); }

/* Section wrapper used to introduce grouped legacy sections */
.fh-band {
  padding: 0;
}

.fh-band-head {
  max-width: var(--fh-shell-max);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 32px) 0;
}

.fh-band-title {
  font-family: var(--fh-display-font);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 400;
  color: var(--dark);
  margin: 0 0 var(--fh-2);
  line-height: 1.2;
}

.fh-band-note {
  font-family: var(--fh-body-font);
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--brown);
  margin: 0;
  max-width: var(--fh-measure);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   7. Progressive disclosure — accordions
   -------------------------------------------------------------------------- */

.fh-accordion {
  max-width: var(--fh-shell-max);
  margin: 0 auto;
  padding: var(--fh-4) clamp(16px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: var(--fh-2);
}

.fh-acc-item {
  border: 1px solid var(--sand);
  background: var(--warm-white);
}

.fh-acc-trigger {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fh-2);
  padding: var(--fh-2) var(--fh-3);
  background: var(--cream);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--fh-body-font);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--dark);
}

.fh-acc-trigger:hover { background: var(--sand-light); }

.fh-acc-icon {
  flex: 0 0 auto;
  font-family: var(--fh-body-font);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--amber);
}

.fh-acc-panel {
  padding: var(--fh-3);
  border-top: 1px solid var(--sand-light);
}

/* --------------------------------------------------------------------------
   8. Summary cards (home routing cards)
   -------------------------------------------------------------------------- */

.fh-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--fh-3);
  max-width: var(--fh-shell-max);
  margin: 0 auto;
  padding: var(--fh-5) clamp(16px, 4vw, 32px);
  list-style: none;
}

.fh-card {
  display: flex;
  flex-direction: column;
  gap: var(--fh-2);
  padding: var(--fh-4);
  background: var(--warm-white);
  border: 1px solid var(--sand);
  border-top: 4px solid var(--terracotta);
}

.fh-card-index {
  font-family: var(--fh-body-font);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--amber);
}

.fh-card h3 {
  font-family: var(--fh-display-font);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--dark);
  margin: 0;
  line-height: 1.25;
}

.fh-card p {
  font-family: var(--fh-body-font);
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--brown);
  margin: 0;
  text-wrap: pretty;
}

.fh-card-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--fh-1);
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--terracotta);
  color: var(--amber);
  font-family: var(--fh-body-font);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.fh-card-link:hover {
  background: var(--terracotta);
  color: #ffffff;
}

.fh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fh-2);
  max-width: var(--fh-shell-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px) var(--fh-8);
}

/* --------------------------------------------------------------------------
   9. Back to top
   -------------------------------------------------------------------------- */

.fh-backtotop {
  position: fixed;
  right: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 8800;
  display: inline-flex;
  align-items: center;
  gap: var(--fh-1);
  min-height: 48px;
  padding: 12px 18px;
  background: var(--dark);
  color: #ffffff;
  border: 1px solid var(--gold);
  cursor: pointer;
  font-family: var(--fh-body-font);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fh-backtotop:hover { background: #000000; }

/* --------------------------------------------------------------------------
   10. Accessibility & reading controls toolbar (header widget)
   -------------------------------------------------------------------------- */

/* Below the desktop breakpoint the panel is measured against the header, not
   against this button-sized wrapper, so the wrapper must not be the containing
   block for it. */
.fh-a11y {
  position: static;
}

.fh-a11y-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--fh-1);
  min-height: 48px;
  padding: 10px 16px;
  background: var(--cream);
  border: 1px solid var(--sand);
  cursor: pointer;
  font-family: var(--fh-body-font);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brown);
}

.fh-a11y-toggle:hover { background: var(--sand-light); }

.fh-a11y-toggle[aria-expanded="true"] {
  background: var(--dark);
  color: #ffffff;
  border-color: var(--dark);
}

/* Under 640px the button shows only its icon, but the label has to stay in the
   accessibility tree: `display: none` left the control with no accessible name
   at all, so TalkBack and VoiceOver announced a bare "button". Hide it visually
   instead — the SVG is already aria-hidden. */
.fh-a11y-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 640px) {
  .fh-a11y-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: nowrap;
  }
}

/* The panel is anchored to the header rather than to the toggle button.
   Below 1080px that button is a 54px icon sitting to the *left* of the menu
   button, and on a 360px-wide phone the whole actions cluster wraps below the
   brand near the left edge — so `right: 0` on the button drew a ~330px panel
   from roughly x:-258 to x:70, which `html { overflow-x: hidden }` then clipped
   away. The controls were on the page but off the screen and unreachable.

   .fh-header is sticky, which makes it the containing block for this absolutely
   positioned panel: `top: 100%` therefore lands just under the header and the
   insets are measured against the full header width. `position: fixed` is
   deliberately not used — the header's backdrop-filter also makes it the
   containing block for fixed descendants in Chromium, so `top` would resolve
   against the header in some browsers and the viewport in others. */
.fh-a11y-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: clamp(16px, 4vw, 32px);
  right: clamp(16px, 4vw, 32px);
  /* Edge to edge on a phone, but never a 1000px-wide sheet on a tablet. With
     both insets set and no explicit width, the auto start margin absorbs the
     leftover space, keeping the panel under the toggle at the top right. */
  max-width: 420px;
  margin-inline-start: auto;
  z-index: 950;
  /* Five switches with descriptions are taller than a phone in landscape, and
     the panel travels with the sticky header, so anything past the fold could
     never be scrolled to. Cap it and scroll the list inside the panel instead. */
  max-height: calc(100vh - var(--fh-header-bar-height, 96px) - 24px);
  max-height: calc(100dvh - var(--fh-header-bar-height, 96px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--fh-3);
  background: var(--warm-white);
  border: 2px solid var(--dark);
  box-shadow: 0 24px 48px -12px rgba(28, 21, 16, 0.35);
}

/* The floating assistant (z-index 9100) and back-to-top button (8800) are fixed
   to the lower right, above the header's 900. On a phone, where the panel now
   spans most of the screen, they would sit on top of its lower half. Lift the
   header — and with it the panel — for as long as the panel is open. */
:root.fh-a11y-open .fh-header {
  z-index: 9300;
}

/* From 1080px the header becomes a two-row grid with the actions cluster pinned
   to the top right, where there is room for a conventional dropdown anchored to
   the button itself. */
@media (min-width: 1080px) {
  .fh-a11y {
    position: relative;
  }

  .fh-a11y-panel {
    top: calc(100% + 12px);
    left: auto;
    right: 0;
    width: min(360px, calc(100vw - 32px));
    max-width: none;
    margin-inline-start: 0;
  }
}

.fh-a11y-title {
  font-family: var(--fh-body-font);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brown-mid);
  margin: 0 0 var(--fh-1);
}

.fh-a11y-intro {
  font-family: var(--fh-body-font);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--brown);
  margin: 0 0 var(--fh-3);
}

.fh-a11y-list {
  list-style: none;
  margin: 0 0 var(--fh-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fh-1);
}

.fh-switch {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--fh-2);
  padding: 12px var(--fh-2);
  background: var(--cream);
  border: 1px solid var(--sand-light);
  cursor: pointer;
  text-align: left;
  font-family: var(--fh-body-font);
  color: var(--dark);
}

.fh-switch:hover { border-color: var(--terracotta); }

.fh-switch[aria-pressed="true"] {
  background: #efe6d6;
  border-color: var(--terracotta);
}

.fh-switch-box {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid var(--brown);
  background: var(--warm-white);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--amber);
  font-weight: 700;
}

.fh-switch[aria-pressed="true"] .fh-switch-box {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #ffffff;
}

.fh-switch-text { display: block; }

.fh-switch-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

.fh-switch-desc {
  display: block;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--brown-mid);
  margin-top: 2px;
}

.fh-a11y-reset {
  min-height: 48px;
  width: 100%;
  padding: 12px var(--fh-2);
  background: transparent;
  border: 1px solid var(--brown);
  cursor: pointer;
  font-family: var(--fh-body-font);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brown);
}

.fh-a11y-reset:hover { background: var(--brown); color: #ffffff; }

.fh-a11y-status {
  font-family: var(--fh-body-font);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--amber);
  margin: var(--fh-2) 0 0;
  min-height: 1.6em;
}

/* --------------------------------------------------------------------------
   11. Global footer
   -------------------------------------------------------------------------- */

.fh-footer {
  background: var(--dark);
  color: #ffffff;
  padding: var(--fh-8) 0 var(--fh-5);
  border-top: 1px solid rgba(247, 242, 234, 0.14);
}

.fh-footer-inner {
  max-width: var(--fh-shell-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

.fh-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fh-5);
  margin-bottom: var(--fh-6);
}

.fh-footer-brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.fh-footer-brandrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--fh-1);
}

.fh-footer-name {
  font-family: var(--fh-display-font);
  font-size: 1.5rem;
  color: #ffffff;
}

.fh-footer-tag {
  font-family: var(--fh-body-font);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 242, 234, 0.82);
  margin: 0 0 var(--fh-2);
}

.fh-footer-blurb {
  font-family: var(--fh-body-font);
  font-size: 0.88rem;
  line-height: 1.9;
  color: rgba(247, 242, 234, 0.86);
  margin: 0;
  max-width: 42ch;
  text-wrap: pretty;
}

.fh-footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--fh-5);
  flex: 1 1 420px;
}

.fh-footer-nav h3 {
  font-family: var(--fh-body-font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 var(--fh-2);
}

.fh-footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fh-footer-link {
  display: inline-block;
  padding: 8px 0;
  font-family: var(--fh-body-font);
  font-size: 0.86rem;
  color: rgba(247, 242, 234, 0.88);
  text-decoration: none;
}

.fh-footer-link:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fh-footer-rule {
  height: 1px;
  background: rgba(247, 242, 234, 0.18);
  margin: var(--fh-4) 0 var(--fh-4);
}

.fh-footer-motto {
  font-family: var(--fh-display-font);
  font-size: 1.05rem;
  color: rgba(247, 242, 234, 0.9);
  text-align: center;
  margin: 0 0 var(--fh-4);
}

.fh-footer-motto .fh-mark { color: var(--gold-light); }

.fh-compliance {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.fh-brands {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 0 var(--fh-4);
}

.fh-brands-label {
  font-family: var(--fh-body-font);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 242, 234, 0.8);
  margin: 0;
}

.fh-brands-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.fh-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 16px 8px 8px;
  border: 1px solid rgba(247, 242, 234, 0.3);
  background: rgba(247, 242, 234, 0.06);
  text-decoration: none;
  font-family: var(--fh-body-font);
  font-size: 0.8rem;
  color: rgba(247, 242, 234, 0.92);
}

.fh-brand-chip:hover {
  border-color: var(--gold-light);
  background: rgba(247, 242, 234, 0.12);
  color: #ffffff;
}

.fh-brand-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background: var(--cream);
  overflow: hidden;
}

.fh-brand-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

.fh-compliance h2 {
  font-family: var(--fh-body-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 242, 234, 0.82);
  margin: 0 0 12px;
}

.fh-compliance p {
  font-family: var(--fh-body-font);
  font-size: 0.78rem;
  line-height: 1.85;
  color: rgba(247, 242, 234, 0.78);
  margin: 0 auto 12px;
  max-width: 72ch;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.fh-governance-label {
  color: #ffffff;
  font-weight: 700;
}

.fh-compliance a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 600px) {
  .fh-footer-top { flex-direction: column; }
  .fh-compliance { text-align: left; }
  .fh-footer-motto { text-align: left; }
}

/* --------------------------------------------------------------------------
   12. Line focus guide (reading ruler)
   -------------------------------------------------------------------------- */

#fh-reading-guide {
  position: fixed;
  left: 0;
  right: 0;
  height: 2.6rem;
  z-index: 8500;
  pointer-events: none;
  background: rgba(196, 154, 60, 0.16);
  border-top: 2px solid rgba(122, 46, 0, 0.55);
  border-bottom: 2px solid rgba(122, 46, 0, 0.55);
  transform: translateY(-50%);
  display: none;
}

:root.fh-ruler #fh-reading-guide { display: block; }

/* --------------------------------------------------------------------------
   13. Focus / Calm mode
   -------------------------------------------------------------------------- */

:root.fh-calm .grain-overlay { display: none !important; }

:root.fh-calm [aria-hidden="true"][style*="position: absolute"],
:root.fh-calm [aria-hidden="true"][style*="position:absolute"],
:root.fh-calm [aria-hidden="true"][style*="position: fixed"] {
  display: none !important;
}

:root.fh-calm p,
:root.fh-calm li,
:root.fh-calm blockquote,
:root.fh-calm dd,
:root.fh-calm figcaption {
  line-height: 2.1 !important;
  letter-spacing: 0.012em !important;
  max-width: 74ch;
  text-wrap: pretty;
}

:root.fh-calm h1,
:root.fh-calm h2,
:root.fh-calm h3,
:root.fh-calm h4 {
  line-height: 1.4 !important;
  margin-bottom: 0.6em;
}

:root.fh-calm section {
  padding-top: clamp(48px, 7vw, 96px) !important;
  padding-bottom: clamp(48px, 7vw, 96px) !important;
}

:root.fh-calm .fh-card,
:root.fh-calm .fh-acc-panel,
:root.fh-calm .fh-a11y-panel {
  padding: var(--fh-5) !important;
}

:root.fh-calm *,
:root.fh-calm *::before,
:root.fh-calm *::after {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  background-image: none !important;
}

:root.fh-calm .animate-fade-up,
:root.fh-calm .animate-fade-in,
:root.fh-calm [class*="delay-"] {
  opacity: 1 !important;
}

:root.fh-calm iframe,
:root.fh-calm video {
  border: 1px solid var(--sand);
}

/* Keep the focus ring even though shadows are suppressed in Calm mode */
:root.fh-calm a:focus-visible,
:root.fh-calm button:focus-visible,
:root.fh-calm input:focus-visible,
:root.fh-calm select:focus-visible,
:root.fh-calm textarea:focus-visible,
:root.fh-calm [tabindex]:focus-visible {
  outline: 4px solid var(--fh-focus) !important;
  outline-offset: 3px !important;
}

/* --------------------------------------------------------------------------
   14. Dyslexia-friendly typography
   -------------------------------------------------------------------------- */

:root.fh-dyslexic body,
:root.fh-dyslexic p,
:root.fh-dyslexic li,
:root.fh-dyslexic a,
:root.fh-dyslexic span,
:root.fh-dyslexic div,
:root.fh-dyslexic h1,
:root.fh-dyslexic h2,
:root.fh-dyslexic h3,
:root.fh-dyslexic h4,
:root.fh-dyslexic h5,
:root.fh-dyslexic h6,
:root.fh-dyslexic button,
:root.fh-dyslexic input,
:root.fh-dyslexic select,
:root.fh-dyslexic textarea,
:root.fh-dyslexic label,
:root.fh-dyslexic blockquote,
:root.fh-dyslexic figcaption,
:root.fh-dyslexic strong,
:root.fh-dyslexic em {
  font-family: "OpenDyslexic", "OpenDyslexicAlta", "Atkinson Hyperlegible",
    "Lexend Deca", "Verdana", "Tahoma", "Trebuchet MS", sans-serif !important;
  font-style: normal !important;
  letter-spacing: 0.045em !important;
  word-spacing: 0.14em !important;
}

:root.fh-dyslexic p,
:root.fh-dyslexic li,
:root.fh-dyslexic blockquote {
  line-height: 2 !important;
  max-width: 66ch;
}

:root.fh-dyslexic h1,
:root.fh-dyslexic h2,
:root.fh-dyslexic h3 {
  font-weight: 700 !important;
  text-transform: none !important;
}

/* --------------------------------------------------------------------------
   15. High contrast mode (targets WCAG AAA, >= 7:1 for body text)
   -------------------------------------------------------------------------- */

:root.fh-contrast {
  --cream: #ffffff;
  --warm-white: #ffffff;
  --dark: #000000;
  --brown: #14100d;
  --brown-mid: #241c17;
  --terracotta: #8f2f00;
  --terracotta-light: #8f2f00;
  --amber: #7a2800;
  --gold: #4f3a00;
  --gold-light: #ffe08a;
  --sage: #14401f;
  --sage-light: #14401f;
  --sand: #4a4a4a;
  --sand-light: #6b6b6b;
  --fh-focus: #000000;
  --fh-focus-halo: #ffe08a;
}

:root.fh-contrast body {
  background: #ffffff;
  color: #000000;
}

:root.fh-contrast .grain-overlay { display: none !important; }

:root.fh-contrast .fh-header,
:root.fh-contrast .fh-breadcrumb,
:root.fh-contrast .fh-pagehead,
:root.fh-contrast .fh-a11y-panel,
:root.fh-contrast .fh-card,
:root.fh-contrast .fh-acc-item {
  background: #ffffff;
  border-color: #000000;
}

:root.fh-contrast .fh-nav-link,
:root.fh-contrast .fh-lede,
:root.fh-contrast .fh-card p,
:root.fh-contrast .fh-band-note,
:root.fh-contrast .fh-breadcrumb ol {
  color: #000000;
}

:root.fh-contrast .fh-nav-link[aria-current="page"],
:root.fh-contrast .fh-eyebrow,
:root.fh-contrast .fh-card-index {
  color: #7a2800;
}

:root.fh-contrast .fh-header-cta,
:root.fh-contrast .fh-backtotop,
:root.fh-contrast .btn-primary {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

:root.fh-contrast .btn-secondary {
  color: #000000 !important;
  border-color: #000000 !important;
  background: #ffffff !important;
}

:root.fh-contrast .fh-footer,
:root.fh-contrast .fh-footer * {
  color: #ffffff;
}

:root.fh-contrast .fh-footer {
  background: #000000;
  border-top-color: #ffffff;
}

:root.fh-contrast .fh-footer-link,
:root.fh-contrast .fh-compliance a,
:root.fh-contrast .fh-footer-nav h3 {
  color: #ffe08a;
}

:root.fh-contrast .fh-switch { background: #ffffff; border-color: #000000; }
:root.fh-contrast .fh-switch[aria-pressed="true"] { background: #000000; color: #ffffff; }
:root.fh-contrast .fh-switch[aria-pressed="true"] .fh-switch-desc { color: #ffffff; }
:root.fh-contrast .fh-switch[aria-pressed="true"] .fh-switch-box {
  background: #ffe08a;
  border-color: #ffffff;
  color: #000000;
}

:root.fh-contrast img,
:root.fh-contrast iframe {
  border: 2px solid #000000;
}

:root.fh-contrast a { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   16. Motion controls
   -------------------------------------------------------------------------- */

:root.fh-reduce-motion *,
:root.fh-reduce-motion *::before,
:root.fh-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

:root.fh-reduce-motion .animate-fade-up,
:root.fh-reduce-motion .animate-fade-in,
:root.fh-reduce-motion [class*="delay-"] {
  opacity: 1 !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  #fh-reading-guide { transition: none !important; }
}

/* --------------------------------------------------------------------------
   17. Touch target sizing (WCAG 2.2 Target Size)
   -------------------------------------------------------------------------- */

.fh-nav-link,
.fh-footer-link,
.fh-breadcrumb a,
.fh-onthispage a {
  min-height: 24px;
}

@media (pointer: coarse) {
  .fh-nav-link,
  .fh-footer-link,
  .fh-breadcrumb a,
  .fh-card-link,
  .fh-onthispage a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
}

/* Print: strip chrome, keep content */
@media print {
  .fh-header,
  .fh-a11y,
  .fh-backtotop,
  .fh-fab-dock,
  #fh-reading-guide {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   18. Band surfaces, prose, chips, disclosure controls and calls to action
   -------------------------------------------------------------------------- */

.fh-band-cream { background: var(--cream); }
.fh-band-warm { background: var(--warm-white); }
.fh-band-dark { background: var(--dark); }

.fh-band-cream + .fh-band-cream,
.fh-band-warm + .fh-band-warm {
  border-top: 1px solid var(--sand-light);
}

/* Wraps an authored heading directly above a preserved legacy section so the
   two read as one band rather than two stacked slabs. */
.fh-band-wrap { display: block; }

.fh-band-flush { background: var(--warm-white); }
.fh-band-flush .fh-band-head { padding-bottom: 0; }

.fh-acc-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.fh-acc-heading .fh-acc-trigger { font-family: var(--fh-body-font); }

/* Cards ------------------------------------------------------------------ */

.fh-cards-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.fh-cards-quiet .fh-card {
  border-top: 1px solid var(--sand);
  border-left: 4px solid var(--gold);
}

.fh-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fh-2);
}

.fh-card-number {
  font-family: var(--fh-body-font);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--amber);
  font-weight: 700;
}

.fh-card-tag {
  font-family: var(--fh-body-font);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brown);
  border: 1px solid var(--sand);
  border-radius: 999px;
  padding: 4px 12px;
}

.fh-card-title a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Audience chips --------------------------------------------------------- */

.fh-chiplist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--fh-2);
  max-width: var(--fh-shell-max);
  margin: 0 auto;
  padding: var(--fh-4) clamp(16px, 4vw, 32px) var(--fh-8);
  list-style: none;
}

.fh-chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 48px;
  padding: var(--fh-3);
  background: var(--warm-white);
  border: 1px solid var(--sand);
  text-decoration: none;
}

.fh-chip:hover { border-color: var(--terracotta); }

.fh-chip-eyebrow {
  font-family: var(--fh-body-font);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}

.fh-chip-title {
  font-family: var(--fh-display-font);
  font-size: 1.2rem;
  color: var(--dark);
  line-height: 1.3;
}

/* Authored prose --------------------------------------------------------- */

.fh-prose {
  max-width: var(--fh-shell-max);
  margin: 0 auto;
  padding: var(--fh-3) clamp(16px, 4vw, 32px) 0;
}

.fh-prose p {
  font-family: var(--fh-body-font);
  font-size: 1rem;
  line-height: 1.95;
  color: var(--brown);
  margin: 0 0 var(--fh-3);
  max-width: var(--fh-measure);
  text-wrap: pretty;
}

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

.fh-note {
  max-width: var(--fh-shell-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px) var(--fh-8);
  font-family: var(--fh-body-font);
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--brown-mid);
  text-wrap: pretty;
}

.fh-band .fh-prose + .fh-actions { padding-top: var(--fh-4); }

.fh-btn { min-height: 48px; }

/* Call to action band ---------------------------------------------------- */

.fh-cta {
  padding: clamp(48px, 7vw, 88px) 0;
  text-align: left;
}

.fh-cta-title,
.fh-cta-body {
  max-width: var(--fh-shell-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

.fh-cta-title {
  font-family: var(--fh-display-font);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: var(--fh-3);
}

.fh-cta-body {
  font-family: var(--fh-body-font);
  font-size: 1rem;
  line-height: 1.95;
  color: var(--sand);
  margin-bottom: var(--fh-4);
}

.fh-cta .fh-actions { padding-bottom: 0; }

/* Section collapse controls ---------------------------------------------- */

.fh-disclosure { display: block; }

.fh-disclosure-bar {
  max-width: var(--fh-shell-max);
  margin: 0 auto;
  padding: var(--fh-3) clamp(16px, 4vw, 32px) 0;
  display: flex;
  justify-content: flex-end;
}

.fh-disclosure-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--fh-1);
  min-height: 48px;
  padding: 10px 18px;
  background: var(--warm-white);
  border: 1px solid var(--sand);
  cursor: pointer;
  font-family: var(--fh-body-font);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--brown);
}

.fh-disclosure-toggle:hover {
  border-color: var(--terracotta);
  color: var(--amber);
}

.fh-disclosure-icon {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--amber);
}

.fh-disclosure-label { font-weight: 600; }

.fh-disclosure.is-collapsed {
  border-bottom: 1px solid var(--sand-light);
  padding-bottom: var(--fh-3);
}

/* Mode overrides for the additions above ---------------------------------- */

:root.fh-calm .fh-chip,
:root.fh-calm .fh-disclosure-toggle {
  box-shadow: none;
}

:root.fh-contrast .fh-band-cream,
:root.fh-contrast .fh-band-warm,
:root.fh-contrast .fh-band-flush,
:root.fh-contrast .fh-chip,
:root.fh-contrast .fh-disclosure-toggle {
  background: #ffffff;
  border-color: #000000;
}

:root.fh-contrast .fh-band-dark { background: #000000; }

:root.fh-contrast .fh-cta-body,
:root.fh-contrast .fh-note,
:root.fh-contrast .fh-prose p {
  color: inherit;
}

:root.fh-contrast .fh-cta-title,
:root.fh-contrast .fh-cta-body { color: #ffffff; }

:root.fh-contrast .fh-prose p,
:root.fh-contrast .fh-note,
:root.fh-contrast .fh-card-tag,
:root.fh-contrast .fh-chip-title { color: #000000; }

@media print {
  .fh-disclosure-bar { display: none; }
}

/* --------------------------------------------------------------------------
   19. Neutralising the legacy global `nav` rule
   --------------------------------------------------------------------------
   index-4kxeew06.css styles every <nav> element as if it were the old fixed
   site bar, including an `@supports not (backdrop-filter)` fallback that forces
   a light background with !important. That would wash out the breadcrumb bar,
   the "on this page" box, and the three footer navs on browsers without
   backdrop-filter. These rules restore each surface with matching specificity.
   -------------------------------------------------------------------------- */

.fh-breadcrumb,
.fh-onthispage,
.fh-nav-desktop,
.fh-nav-mobile,
.fh-footer nav {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-left: 0;
  padding-right: 0;
}

.fh-breadcrumb { background: var(--cream) !important; }
.fh-onthispage { background: var(--cream) !important; }
.fh-nav-desktop { background: transparent !important; }
.fh-nav-mobile { background: var(--warm-white) !important; }
.fh-footer nav { background: transparent !important; }

.fh-nav-mobile {
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}

.fh-onthispage {
  padding-left: var(--fh-3);
  padding-right: var(--fh-3);
}

:root.fh-contrast .fh-breadcrumb,
:root.fh-contrast .fh-onthispage,
:root.fh-contrast .fh-nav-mobile {
  background: #ffffff !important;
}

/* --------------------------------------------------------------------------
   20. Trusted Circle profiles (RaSynths)
   --------------------------------------------------------------------------
   A person profile: portrait beside name, role, biography, credential list and
   an optional outbound link. Single column on narrow viewports so the portrait
   never squeezes the measure below a comfortable reading width.
   -------------------------------------------------------------------------- */

.fh-person {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fh-4);
  align-items: start;
  max-width: var(--fh-shell-max);
  margin: var(--fh-5) auto 0;
  padding: 0 clamp(16px, 4vw, 32px);
}

@media (min-width: 820px) {
  .fh-person {
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: var(--fh-6);
  }
}

/* A second profile reads as the next entry in one roster, not a new section. */
.fh-person + .fh-person {
  margin-top: var(--fh-8);
  padding-top: var(--fh-8);
  border-top: 1px solid var(--sand);
}

.fh-person-portrait {
  margin: 0;
}

.fh-person-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--warm-white);
  border: 1px solid var(--sand);
  filter: sepia(10%) saturate(0.85);
}

.fh-person-credit {
  font-family: var(--fh-body-font);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--brown-mid);
  margin-top: var(--fh-2);
}

/* The reused painting credit carries an inline 0.95rem size tuned for the
   larger About layout; scale it to this caption without touching the markup. */
.fh-person-credit em {
  font-size: 1.05em !important;
}

.fh-person-body > .fh-prose {
  margin: var(--fh-3) 0 0;
  padding: 0;
}

.fh-person-eyebrow {
  font-family: var(--fh-body-font);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 var(--fh-1);
}

.fh-person-name {
  font-family: var(--fh-display-font);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.2;
  color: var(--dark);
  margin: 0 0 var(--fh-1);
}

/* Role and affiliation sit tight together; the spacing that separates them
   from the biography lives on the prose block, so a profile without an
   affiliation line spaces identically to one that has it. */
.fh-person-role {
  font-family: var(--fh-body-font);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--terracotta);
  margin: 0;
}

.fh-person-affiliation {
  font-family: var(--fh-body-font);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brown-mid);
  margin: 6px 0 0;
}

.fh-person-subhead {
  font-family: var(--fh-body-font);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brown);
  margin: var(--fh-4) 0 var(--fh-2);
}

.fh-person-creds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fh-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fh-person-creds li {
  font-family: var(--fh-body-font);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--brown);
  background: var(--warm-white);
  border: 1px solid var(--sand);
  border-radius: 999px;
  padding: 8px 16px;
}

.fh-person-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--fh-4);
  padding: var(--fh-3);
  min-height: 48px;
  background: var(--warm-white);
  border: 1px solid var(--sand);
  border-left: 4px solid var(--gold);
  text-decoration: none;
}

.fh-person-link:hover { border-color: var(--terracotta); }

.fh-person-link-eyebrow {
  font-family: var(--fh-body-font);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}

.fh-person-link-title {
  font-family: var(--fh-display-font);
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Calm mode strips the portrait treatment so nothing competes with the text. */
:root.fh-calm .fh-person-portrait img { filter: none; }

:root.fh-contrast .fh-person-portrait img,
:root.fh-contrast .fh-person-creds li,
:root.fh-contrast .fh-person-link {
  background: #ffffff;
  border-color: #000000;
}

:root.fh-contrast .fh-person-portrait img { filter: none; }

:root.fh-contrast .fh-person + .fh-person { border-top-color: #000000; }

:root.fh-contrast .fh-person-name,
:root.fh-contrast .fh-person-role,
:root.fh-contrast .fh-person-eyebrow,
:root.fh-contrast .fh-person-affiliation,
:root.fh-contrast .fh-person-credit,
:root.fh-contrast .fh-person-subhead,
:root.fh-contrast .fh-person-creds li,
:root.fh-contrast .fh-person-link-eyebrow,
:root.fh-contrast .fh-person-link-title {
  color: #000000;
}

:root.fh-contrast .fh-footer nav { background: transparent !important; }