/*
  Look: federal  (Direction A, "Federal-first", in reference/visual-audit/VISUAL-AUDIT.md)

  U.S. Web Design System 3 design language, recreated as tokens here - no USWDS
  code is loaded and nothing is fetched from a CDN. Values follow USWDS system
  tokens (colour grades, type scale, 8px spacing units, 0.25rem focus ring,
  card radius) and are themed as ONE ANA Training and Technical Assistance Center
  (navy frame, primary blue, a gold accent). One Center (2026-10-11): the former
  per-region accents, region marks and four-quadrant emblem were removed.

  Fonts (self-hosted, SIL OFL 1.1, licence files next to the fonts):
    Public Sans  - assets/fonts/public-sans/   (USWDS default sans)
    Merriweather - assets/fonts/merriweather/  (USWDS serif option; H1/H2 only)

  Signature element: one Center emblem drawn with CSS - a navy disc inside a
  gold ring on a white seal - over the hero photograph, echoed by the single
  navy/gold band under the hero. Abstract geometry only; no legacy logos or
  Native motifs.

  Motion: 150 ms colour/border transitions and one load moment (the emblem
  settles into place). All of it sits inside
  @media (prefers-reduced-motion: no-preference); tokens.css also zeroes the
  duration under reduce.
*/

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../../fonts/public-sans/public-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../../fonts/public-sans/public-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("../../fonts/public-sans/public-sans-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../../fonts/merriweather/merriweather-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../../fonts/merriweather/merriweather-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
  /* USWDS system colours used by this look */
  --fed-ink: #1b1b1b;          /* base-darkest */
  --fed-ink-2: #3d4551;        /* base-darker */
  --fed-muted: #565c65;        /* base-dark */
  --fed-line: #dfe1e2;         /* base-lighter */
  --fed-wash: #f0f0f0;         /* base-lightest */
  --fed-paper: #ffffff;
  --fed-navy: #162e51;         /* primary-darker: ANA frame */
  --fed-navy-2: #0f2240;       /* deeper frame for the footer strip */
  --fed-blue: #005ea2;         /* primary */
  --fed-blue-dark: #1a4480;    /* primary-dark */
  --fed-focus: #1c74d8;        /* USWDS focus blue darkened from #2491ff: 2491ff is only 2.8:1 on base-lightest */
  --fed-sky: #d9e8f6;          /* primary-lighter */
  --fed-gold: #ffbe2e;         /* accent-warm, non-text accents only */

  /* base token overrides */
  --color-text: var(--fed-ink);
  --color-text-muted: var(--fed-muted);
  --color-text-subtle: var(--fed-ink-2);
  --color-bg: var(--fed-paper);
  --color-surface: var(--fed-paper);
  --color-surface-soft: var(--fed-wash);
  --color-border: var(--fed-line);
  --color-banner-bg: var(--fed-wash);
  --color-brand: var(--fed-navy);
  --color-brand-contrast: #ffffff;
  --color-link: var(--fed-blue);
  --color-link-hover: var(--fed-blue-dark);
  --color-focus: var(--fed-focus);
  --color-accent: var(--fed-blue);
  --color-accent-soft: var(--fed-sky);
  --color-button-bg: var(--fed-blue);
  --color-button-bg-hover: var(--fed-blue-dark);
  --color-button-text: #ffffff;
  --color-hero-bg: var(--fed-navy);
  --color-hero-text: #ffffff;
  --color-hero-lead: #dfe1e2;
  --color-hero-eyebrow: #ffbe2e;
  --color-hero-outline: #ffffff;
  --color-footer-bg: var(--fed-navy);
  --color-footer-text: #ffffff;
  --color-footer-link: #ffffff;
  --color-footer-muted: #c6cace;
  --color-footer-rule: #2f4668;
  --color-notice-bg: #faf3d1;  /* warning-lighter */
  --color-notice-border: #ffbe2e;
  --color-archive: #775540;

  /* the one Center's accent (tokens.css hooks) */
  --center-accent: var(--fed-navy);
  --center-tint: var(--fed-sky);

  /* type: USWDS scale (rem at 16px root) */
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Merriweather", Georgia, Cambria, "Times New Roman", serif;
  --font-size-base: 1.0625rem;  /* 17px, "md" */
  --line-height-base: 1.62;      /* line-height-5 */
  --font-size-xs: 0.8125rem;     /* 13px */
  --font-size-sm: 0.9375rem;     /* 15px */
  --font-size-md: 1rem;          /* 16px */
  --font-size-lead: 1.375rem;    /* 22px, "lg" */
  --font-size-h1: clamp(2.375rem, 4.6vw, 3.5rem);
  --font-size-h1-content: clamp(2rem, 3.6vw, 2.75rem);
  --font-size-h2: clamp(1.5rem, 2.4vw, 2rem);
  --font-size-h3: 1.25rem;
  --font-weight-bold: 700;
  --letter-spacing-tight: -0.01em;
  --measure: 68ch;

  /* space: USWDS 8px units */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --content-width: 1200px;
  --prose-width: 880px;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --border-accent-width: 0.5rem;
  --motion-duration: 150ms;
  --motion-ease: cubic-bezier(.2, .7, .3, 1);

  --fed-shadow: 0 1px 4px rgba(27, 27, 27, .12), 0 8px 24px rgba(22, 46, 81, .10);
  --fed-mark: 2.75rem;
}

/* ---------- base ---------- */
html { font-size: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2 { font-weight: 700; line-height: 1.2; }
h3 { font-family: var(--font-body); font-weight: 700; line-height: 1.3; letter-spacing: 0; }
a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: .25rem solid var(--color-focus); outline-offset: .25rem; }
.wrap { width: min(var(--content-width), calc(100% - 4rem)); }

/* ---------- review banner (USWDS banner proportions; never claims to be official) ---------- */
.prototype { padding: .375rem 0; font-size: var(--font-size-xs); letter-spacing: 0; font-weight: 400; color: var(--fed-ink); border-bottom: 1px solid var(--fed-line); }
.prototype__text strong { letter-spacing: .02em; font-weight: 700; }
.prototype span { font-size: var(--font-size-xs); }

/* ---------- header ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--fed-line); }
.header { padding: 1.25rem 0 0; align-items: stretch; }
.brand { font-family: var(--font-body); font-size: 1.0625rem; color: var(--fed-navy); padding-bottom: 1.25rem; gap: .875rem; }
.brand-mark { position: relative; padding: .75rem .625rem .75rem .75rem; font-size: 1.375rem; letter-spacing: -.02em; border-radius: 0 0 0 1.75rem; }
.brand-name { font-weight: 700; }
.site-nav { gap: 0 !important; align-items: flex-end; }
.header nav a { position: relative; display: block; padding: .75rem 1rem 1.375rem; font-size: 1rem; font-weight: 700; color: var(--fed-muted); }
.header nav a::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: .25rem; background: transparent; }
.header nav a:hover { color: var(--fed-blue); text-decoration: none; }
.header nav a:hover::after { background: var(--fed-line); }
.header nav a[aria-current] { color: var(--fed-navy); text-decoration: none; }
.header nav a[aria-current]::after { background: var(--fed-blue); }

/* ---------- buttons ---------- */
.button { border-radius: var(--radius-sm); padding: .8125rem 1.25rem; font-size: 1.0625rem; line-height: 1; transition: background-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease); }
.hero .button { background: #fff; color: var(--fed-navy); }
.hero .button:hover { background: var(--fed-sky); color: var(--fed-navy); }
.hero .button.secondary { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; border: 0; }
.hero .button.secondary:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- the Center emblem (CSS geometry, one element) ---------- */
.emblem {
  display: grid; place-items: center; width: 13rem; aspect-ratio: 1;
}
.emblem__core {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--fed-navy) 0 58%, #fff 58% 64%, var(--fed-gold) 64% 80%, var(--fed-navy) 80% 84%, transparent 84%);
}

/* ---------- art slots (uncleared imagery placeholders) ---------- */
.art-slot {
  display: flex; align-items: flex-end; margin: 0;
  background-color: #e6e8ea;
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(61, 69, 81, .06) 14px 15px);
  border: 1px solid #c6cace;
}
.art-slot__label {
  margin: 1rem; padding: .25rem .625rem; background: #fff; color: var(--fed-ink-2);
  font-size: var(--font-size-sm); font-weight: 600; border-radius: var(--radius-sm);
}

/* ---------- home hero ---------- */
.hero { padding: 0; border-bottom: 0; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .5rem; border-top: 3px solid #fff; box-sizing: content-box; background: linear-gradient(90deg, var(--fed-navy) 0 70%, var(--fed-gold) 70%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; align-items: stretch; }
.hero__body { padding: 5rem 0 5.5rem; }
.hero .eyebrow { text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 600; margin-bottom: 1.5rem; }
.hero h1 { font-size: var(--font-size-h1); line-height: 1.12; letter-spacing: -.015em; margin-bottom: 1.5rem; }
.hero .lead { font-size: var(--font-size-lead); line-height: 1.5; max-width: 34ch; }
.actions { margin-top: 2.25rem; gap: 1rem; }
.hero__media { display: block; position: relative; padding-top: 3.5rem; }
/* cleared hero photo fills the media column; its credit is a solid navy chip in the
   top corner (white on navy, 13.6:1), so no text sits on the photo's own pixels */
.hero__media .hero__photo { display: block; position: relative; height: 100%; min-height: 26rem; background: #2a4166; }
.hero__media .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-position: 35% 50%; }
.hero__credit { position: absolute; top: 0; right: 0; max-width: 100%; padding: .375rem .75rem; background: var(--fed-navy); color: #fff; font-size: .8125rem; line-height: 1.35; }
.hero__credit span { color: var(--fed-line); }
.hero__media .emblem { position: absolute; left: -3.25rem; bottom: 3rem; padding: .75rem; background: #fff; border-radius: 50%; width: 14.5rem; box-shadow: var(--fed-shadow); }

/* ---------- sections ---------- */
.section { padding: 4.5rem 0; }
.section.soft { background: var(--fed-wash); }
.section-header { display: block; margin-bottom: 2rem; max-width: 46rem; }
.section-header h2 { margin-bottom: .5rem; }
.section-header p { max-width: none; font-size: 1.125rem; color: var(--fed-ink-2); }
.section--services { padding-top: 5.5rem; }

/* ---------- cards (USWDS card: 2px base-lighter border, 0.5rem radius) ---------- */
.grid { gap: 1.5rem; }
.card {
  border: 2px solid var(--fed-line); border-radius: var(--radius-md); padding: 1.5rem;
  background: #fff;
  transition: border-color var(--motion-duration) var(--motion-ease), box-shadow var(--motion-duration) var(--motion-ease);
}
.card__title { font-size: 1.375rem; margin: 0 0 .75rem; }
.card .card__body { font-size: 1rem; color: var(--fed-ink-2); margin-bottom: 1rem; }
.card .card__meta { font-size: var(--font-size-sm); color: var(--fed-muted); }
.card .card__cta {
  align-self: flex-start; margin-top: auto; padding: .5rem .875rem; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 2px var(--fed-blue); color: var(--fed-blue); text-decoration: none; font-size: .9375rem;
  transition: background-color var(--motion-duration) var(--motion-ease), color var(--motion-duration) var(--motion-ease);
}
.card:hover { border-color: var(--center-accent); box-shadow: var(--fed-shadow); }
.card:hover .card__cta { background: var(--fed-blue); color: #fff; }
.card:has(.card__link:focus-visible) { outline: .25rem solid var(--color-focus); outline-offset: .25rem; }

/* service cards: the Center's four ways in (USWDS card, navy top bar) */
.card-group--services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service-card { border-top: .5rem solid var(--fed-navy); padding-top: 1.5rem; }
.service-card .card__title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--fed-navy); }
/* USWDS card media: the cleared photo bleeds to the card edges under the navy top bar (decorative, alt="") */
.service-card .card__figure { display: block; }
.service-card .card__media { width: calc(100% + 3rem); max-width: none; margin: -1.5rem -1.5rem 1.25rem; }
.service-card[data-service="assistance"] { background: var(--fed-navy); border-color: var(--fed-navy); border-top-color: var(--fed-gold); color: #fff; }
.service-card[data-service="assistance"] .card__title, .service-card[data-service="assistance"] .card__body { color: #fff; }
.service-card[data-service="assistance"] .card__cta { background: #fff; color: var(--fed-navy); box-shadow: none; }
.service-card[data-service="assistance"]:hover { border-color: var(--fed-navy); border-top-color: var(--fed-gold); }
.service-card[data-service="assistance"]:hover .card__cta { background: var(--fed-sky); color: var(--fed-navy); }

.topic-card { border-top: .5rem solid var(--fed-navy); border-radius: var(--radius-md); }
.section--next .card { border-color: transparent; border-top-color: var(--fed-navy); }
.section--next .card:hover { border-color: var(--fed-navy); }

.link-row { gap: .75rem; }
.link-row a {
  display: inline-block; padding: .625rem 1rem; border: 2px solid var(--fed-line); border-radius: 999px;
  text-decoration: none; font-weight: 600; color: var(--fed-navy);
  transition: border-color var(--motion-duration) var(--motion-ease), background-color var(--motion-duration) var(--motion-ease);
}
.link-row a:hover { border-color: var(--fed-blue); background: var(--fed-sky); }

/* ---------- page headers ---------- */
.page-header { padding: 2rem 0 2.5rem; background: var(--fed-wash); border-bottom: 1px solid var(--fed-line); }
.page-header__inner { position: relative; width: min(var(--content-width), calc(100% - 4rem)); }
.page-header h1 { font-size: var(--font-size-h1-content); max-width: 24ch; margin-bottom: .75rem; }
.page-header .lead-text { font-size: 1.25rem; color: var(--fed-ink-2); max-width: 60ch; margin-top: .5rem; }
.page-header .eyebrow-label { text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 700; color: var(--fed-blue); margin-bottom: .25rem; }
.breadcrumb { font-size: var(--font-size-sm); margin-bottom: 1.5rem; }
.breadcrumb li + li::before { content: "›"; color: var(--fed-muted); }

/* ---------- content ---------- */
/* content column aligns with the page header; text keeps a readable measure */
.content { padding-top: 2.5rem; padding-bottom: 4.5rem; max-width: var(--content-width); }
.content > * { max-width: var(--prose-width); }
.content h2 { font-size: var(--font-size-h2); margin-top: 3rem; }
.prose { font-size: 1.0625rem; }
.prose h2, .prose h3 { scroll-margin-top: 1rem; }
.prose table { font-size: var(--font-size-sm); }
.prose th { background: var(--fed-wash); }
.prose th, .prose td { border-color: #a9aeb1; padding: .5rem .75rem; }
.prose blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: .25rem solid var(--fed-line); color: var(--fed-ink-2); }

/* USWDS alert (warning) for the migration note; summary box for meta */
.migration-note { border-left-width: .5rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: var(--font-size-sm); border-radius: 0; }
.item-meta { background: #fff; border: 1px solid var(--fed-line); border-radius: var(--radius-md); padding: 1rem 1.25rem; gap: .75rem 2.5rem; margin-bottom: 2rem; }
.item-meta dt { font-size: var(--font-size-xs); color: var(--fed-muted); font-weight: 700; }
.item-meta dd { font-weight: 500; }
.files { border-top: 1px solid var(--fed-line); padding-top: 1.5rem; }
.provenance { margin: -1.25rem 0 2rem; padding-left: .75rem; border-left: .25rem solid var(--fed-gold); color: var(--fed-muted); font-size: var(--font-size-sm); }
.filters-inline { font-size: var(--font-size-sm); color: var(--fed-ink-2); }
.filters-inline a { margin-left: .25rem; font-weight: 600; }

/* ---------- lists (USWDS collection) ---------- */
.item-list__item { padding: 1rem 0; gap: .375rem; border-bottom-color: var(--fed-line); }
.item-list__title { font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.item-list__meta { gap: .5rem; align-items: center; }
.item-list__summary { color: var(--fed-ink-2); }
.tag { border: 0; border-radius: 2px; padding: .0625rem .5rem; font-size: var(--font-size-xs); font-weight: 600; background: var(--fed-wash); color: var(--fed-ink-2); }
.tag--archive { background: #f2e4d4; color: var(--color-archive); }
.file-list li { padding: .5rem 0; }

.filters { background: #fff; border: 1px solid var(--fed-line); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 2rem; }
.filters p { line-height: 2; }
.filters a[aria-current] { background: var(--fed-navy); color: #fff; padding: .125rem .5rem; border-radius: 2px; text-decoration: none; }
.list-heading { font-size: var(--font-size-h2); }
.archive-link { padding: 1rem 1.25rem; background: var(--fed-wash); border-radius: var(--radius-md); }

/* ---------- footer (USWDS footer + identifier) ---------- */
.site-footer { padding: 3.5rem 0 0; font-size: var(--font-size-sm); }
.footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-title { font-family: var(--font-heading); font-size: 1.25rem; }
.footer-heading { font-size: 1rem; font-family: var(--font-body); margin-bottom: 1rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-bottom { margin-top: 3rem; background: var(--fed-navy-2); padding: 1.25rem 0; }
.footer-bottom .wrap { border-top: 0; padding-top: 0; }
.site-footer a:focus-visible { outline-color: var(--fed-gold); }
.hero a:focus-visible { outline-color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero__media .emblem { left: -2rem; width: 11rem; }
}
@media (max-width: 900px) {
  .wrap, .page-header__inner { width: calc(100% - 3rem); }
  .header { padding-top: 1rem; }
  .site-nav { flex-wrap: wrap; margin-left: -1rem; }
  .header nav a { padding: .5rem 1rem .875rem; }
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero__body { padding: 3.5rem 0 1rem; }
  .hero__media { padding: 0 0 3rem; }
  .hero__media .hero__photo { min-height: 15rem; }
  .hero__media .emblem { left: auto; right: 1rem; bottom: 1.75rem; width: 8.5rem; padding: .5rem; }
  .card-group--services { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 550px) {
  .wrap, .page-header__inner { width: calc(100% - 2rem); }
  .brand-mark { padding: .625rem; font-size: 1.125rem; }
  .site-nav { margin-left: -.5rem; }
  .header nav a { padding: .5rem .5rem .75rem; font-size: .9375rem; }
  .header nav a::after { left: .5rem; right: .5rem; }
  .hero h1 { font-size: 2.25rem; }
  .hero .lead { font-size: 1.1875rem; }
  .section { padding: 3rem 0; }
  .section--services { padding-top: 3.5rem; }
  .card-group--services { grid-template-columns: 1fr; gap: 1rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- motion: one load moment + hover feedback, never under reduce ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__media .emblem__core { animation: fed-settle 700ms 150ms var(--motion-ease) both; }
}
@keyframes fed-settle {
  from { opacity: 0; transform: scale(.85) rotate(-20deg); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .card__cta, .button, .link-row a, .emblem__core { transition: none !important; animation: none !important; }
}

/* ---------- imagery (2026-10-12): captions, photo band, section art, line textures ----------
   Card captions sit on the card, never on the photo: muted on white (6.9:1), sky on
   navy (10.6:1). Textures are AI-generated contour lines baked at 9-11% alpha, so the
   band colour moves by less than 3% and every text pair keeps its contrast. */
.service-card .card__credit { display: -webkit-box; margin: -.875rem 0 .875rem; color: var(--fed-muted); }
.service-card[data-service="assistance"] .card__credit { color: var(--fed-sky); }
/* no emblem over the hero photo: with a real photo the empty navy disc read as a
   broken image (supervisor review 2026-10-12). The photo carries the hero alone. */
.hero__media .emblem { display: none; }
@media (max-width: 900px) { .hero__media { padding-bottom: 0; } }
/* this photo's subject (table and net) sits right of centre */
.hero__media .hero__photo img { object-position: 66% 50%; }
.photo-band { display: block; background: var(--fed-wash); border-top: 1px solid var(--fed-line); }
.photo-band__credit { color: var(--fed-muted); }
.photo-band__credit a { color: var(--fed-blue); }
.section.soft { background: var(--fed-wash) url("../../img/patterns/contour-dark.webp") center / cover no-repeat; }
.site-footer { background: var(--fed-navy) url("../../img/patterns/contour-light.webp") center / cover no-repeat; }
.page-header { position: relative; }
.page-header__art { display: block; position: absolute; right: calc((100% - min(var(--content-width), 100% - 4rem)) / 2); bottom: 2.5rem; width: 20rem; aspect-ratio: 3 / 2; object-fit: cover; border: 2px solid var(--fed-line); border-radius: var(--radius-md); background: #fff; }
.page-header:has(.page-header__art) { min-height: 18rem; }
.page-header:has(.page-header__art) .page-header__inner { padding-right: 23rem; }
@media (max-width: 1100px) {
  .page-header__art { position: static; width: calc(100% - 3rem); max-width: 40rem; height: 8rem; aspect-ratio: auto; margin: 1.5rem auto 0; }
  .page-header:has(.page-header__art) { min-height: 0; }
  .page-header:has(.page-header__art) .page-header__inner { padding-right: 0; }
}
@media (max-width: 900px) { .page-header__art { margin-left: 1.5rem; } }
@media (max-width: 550px) { .page-header__art { width: calc(100% - 2rem); margin-left: 1rem; height: 6.5rem; } }