/* ==========================================================================
   Scrimgeour & Company — stylesheet (VERSION 2)
   --------------------------------------------------------------------------
   A more open, more characterful treatment than v1. The differences that
   matter:

     - Full-bleed horizontal BANDS with alternating grounds, so a long page
       reads as a sequence of rooms rather than one column of text.
     - Much more vertical air: bands breathe at 5-9rem of padding.
     - A bigger, more confident display scale, set in a classical serif that
       echoes the engraved lettering in the firm's logo.
     - Numbered sections and a gold hairline as the partition rhythm.
     - A deep navy hero with a curved lower edge and the ampersand from the
       logo used as a large watermark.

   Still: no build step, no webfonts, no third-party requests.

   Sections:
     1. Design tokens          6. Bands and rhythm
     2. Reset and base         7. Components
     3. Typography             8. Forms
     4. Layout                 9. Utilities
     5. Header / footer       10. Responsive and motion
   ========================================================================== */


/* 1. DESIGN TOKENS =========================================================
   Every pair below was measured. The rules that must not be broken:

     --gold  is 4.21:1 on --cream and 4.01:1 on --navy-deep. It is BELOW the
             4.5:1 needed for normal text on BOTH. It is a decorative colour:
             rules, borders, marks, and very large display numerals only.

     On light grounds, text is --ink / --ink-soft / --gold-text.
     On navy grounds, text is white / --cream-text / --gold-pale / --gold-bright.
   -------------------------------------------------------------------------- */
:root {
  /* Grounds */
  --cream:       #FAF6EF;   /* primary light ground, warm                     */
  --cream-deep:  #F1E9DB;   /* secondary band, a shade deeper                 */
  --white:       #FFFFFF;
  --navy-deep:   #0A1430;   /* hero and closing bands                         */
  --navy:        #12224A;   /* secondary dark band                            */

  /* Ink — light grounds */
  --ink:         #0B1733;   /* 16.46:1 on cream — body and headings           */
  --ink-soft:    #3A4665;   /* 8.69:1  — secondary text                       */
  --gold-text:   #6E5836;   /* 6.26:1  — the ONLY gold usable as small text   */

  /* Ink — dark grounds */
  --cream-text:  #EDE6DA;   /* 14.65:1 on navy-deep — body text on navy       */
  --gold-pale:   #D9C9A3;   /* 11.11:1 — display numerals, labels on navy     */
  --gold-bright: #C9A227;   /* 7.51:1  — accent text on navy                  */

  /* Decoration only — never text */
  --gold:        #8D7249;   /* the logo gold. Rules, borders, marks.          */
  --line:        #E2D9C8;   /* hairline on light grounds                      */
  --line-navy:   rgba(217, 201, 163, 0.22);
  --control:     #8D7F68;   /* interactive borders — 3.9:1, meets SC 1.4.11   */

  /* Type — a classical serif for display, echoing the logo's lettering */
  --font-display: "Palatino Linotype", "Book Antiqua", Palatino,
                  "Iowan Old Style", Georgia, serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  /* A wider scale than v1 — the top end carries the hero */
  --step--2: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step--1: clamp(0.95rem, 0.92rem + 0.15vw, 1.02rem);
  --step-0:  clamp(1.125rem, 1.08rem + 0.2vw, 1.22rem);
  --step-1:  clamp(1.3rem, 1.2rem + 0.45vw, 1.6rem);
  --step-2:  clamp(1.6rem, 1.4rem + 0.9vw, 2.3rem);
  /* The lower bound is set so the longest heading word on the site
     ("Accessibility") still fits across a 320px screen. */
  --step-3:  clamp(1.75rem, 1.28rem + 2.1vw, 3.2rem);
  --step-4:  clamp(2.5rem, 1.9rem + 2.9vw, 4.4rem);
  --step-5:  clamp(3rem, 2rem + 4.6vw, 6rem);   /* hero only */

  /* Space */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;

  /* Band padding — the main source of the extra openness */
  --band-pad: clamp(4.5rem, 9vw, 8.5rem);

  --measure: 62ch;
  --wide: 78rem;
  --mid: 62rem;
  --radius: 3px;
}


/* 2. RESET AND BASE ======================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  text-underline-offset: .2em;
  overflow-x: hidden;   /* the hero's curved edge can round-off sub-pixel */
}

img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--gold); color: #fff; }


/* 3. TYPOGRAPHY ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.005em; }
h4 { font-size: var(--step-0); letter-spacing: 0; }

p, li { text-wrap: pretty; }
p { margin: 0 0 var(--sp-5); }

a { color: inherit; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-text); }

/* Eyebrow — wide-tracked small caps, echoing "CPA PROFESSIONAL CORPORATION"
   in the logo lockup. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 var(--sp-4);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}

.prose { max-width: var(--measure); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 var(--sp-5); }
.prose li { margin-bottom: var(--sp-3); }

.rule { border: 0; border-top: 2px solid var(--gold); width: 4rem; margin: 0 0 var(--sp-6); }


/* 4. LAYOUT ================================================================ */
.wrap { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.wrap--mid { width: min(100% - 2.5rem, var(--mid)); margin-inline: auto; }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }

/* Split layout: sticky section header beside flowing content. This is what
   creates the open, editorial feel on wide screens. */
.split { display: grid; gap: var(--sp-7); }
/* Grid items default to min-width:auto, which stops a track shrinking below
   its longest unbreakable word. A long heading in the aside column was
   forcing the track wider than the container and pushing the page into
   horizontal scroll at 320px. min-width:0 lets the track shrink properly. */
.split > * { min-width: 0; }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(15rem, 22rem) 1fr; gap: var(--sp-9); }
  .split__aside { position: sticky; top: 7rem; align-self: start; }
}


/* 5. HEADER AND FOOTER ===================================================== */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100vh; z-index: 999;
  background: var(--navy-deep); color: #fff;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--sp-4); color: #fff; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 246, 239, .92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
/* NOTE: the home page header used to be transparent and overlaid on the navy
   hero, with the logo filtered to solid white. That was dropped so the logo
   can keep its own navy-and-gold artwork — those colours are illegible on a
   dark ground, and filtering them away loses the gold entirely. The header is
   now the same cream bar on every page, which also means the sticky nav stays
   readable the whole way down the long home page. */

.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-4);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* The logo is 800x134 — roughly 6:1 — so its height drives a lot of width.
   Fluid sizing keeps it large on desktop without overflowing a 320px phone.
   No filter: the artwork keeps its own navy and gold. */
.brand img { width: auto; height: clamp(2.75rem, 1.5rem + 3.6vw, 5rem); }

.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin: 0; padding: 0; }
.nav a {
  display: block; padding: var(--sp-2) var(--sp-3);
  text-decoration: none; font-weight: 600;
  font-size: var(--step--1); border-radius: var(--radius);
  border-bottom: 2px solid transparent;
}
.nav a:hover { background: rgba(141,114,73,.1); }
.nav a[aria-current="page"] { border-bottom-color: var(--gold); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.band--navy :focus-visible, .site-footer :focus-visible {
  outline-color: var(--gold-bright);
}

.site-footer {
  background: var(--navy-deep); color: var(--cream-text);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--step--1); line-height: 1.75;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--gold-bright); }
.site-footer h2 {
  font-family: var(--font-body); font-size: var(--step--2);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-pale); margin: 0 0 var(--sp-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-2); }
.site-footer address { font-style: normal; }
.footer-grid { display: grid; gap: var(--sp-7); grid-template-columns: repeat(auto-fit, minmax(min(14rem,100%), 1fr)); }
.footer-legal {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid var(--line-navy); color: #B9C0D2;
}
.footer-legal p { margin-bottom: var(--sp-2); }


/* 6. BANDS AND RHYTHM ======================================================
   A band is a full-bleed horizontal section. Alternating their grounds is
   what makes a long page read as distinct, partitioned rooms.
   -------------------------------------------------------------------------- */
.band { padding-block: var(--band-pad); }
.band--cream      { background: var(--cream); }
.band--cream-deep { background: var(--cream-deep); }
.band--white      { background: var(--white); }
.band--navy       { background: var(--navy-deep); color: var(--cream-text); }
.band--navy h2, .band--navy h3, .band--navy h4 { color: #fff; }
.band--navy .eyebrow { color: var(--gold-pale); }
.band--navy .lede { color: var(--cream-text); }
.band--navy a { color: #fff; }
.band--navy a:hover { color: var(--gold-bright); }
.band--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

/* Section header: number, eyebrow, title, and a gold hairline that runs the
   full width of the band. The numerals are the partition rhythm. */
.section-head { margin-bottom: var(--sp-8); }
.section-head__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: var(--sp-3);
}
.band--navy .section-head__num { color: var(--gold-pale); }
.section-head h2 { margin-bottom: var(--sp-4); }
.section-head__line { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0 0; }
.band--navy .section-head__line { border-top-color: var(--line-navy); }


/* --- HERO ---------------------------------------------------------------
   Deep navy field with a curved lower edge, and the logo's ampersand set
   very large behind the text as a watermark. */
.hero {
  position: relative;
  background: var(--navy-deep);
  color: var(--cream-text);
  padding-block: clamp(4.5rem, 11vw, 9rem) clamp(6rem, 14vw, 11rem);
  border-radius: 0 0 50% 50% / 0 0 4.5rem 4.5rem;
  overflow: hidden;
  margin-bottom: calc(var(--band-pad) * -0.15);
}
/* A soft gold bloom, off to one side — keeps the large navy field from
   reading as flat. */
.hero::before {
  content: "";
  position: absolute;
  right: -10%; top: -30%;
  width: 60rem; height: 60rem;
  background: radial-gradient(circle, rgba(141,114,73,.32) 0%, rgba(141,114,73,0) 62%);
  pointer-events: none;
}
/* The ampersand watermark. aria-hidden in the markup. */
.hero__mark {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: min(46rem, 62vw);
  line-height: .8;
  color: rgba(217, 201, 163, .07);
  pointer-events: none;
  user-select: none;
}
.hero__inner { position: relative; z-index: 1; max-width: 54rem; }
.hero .eyebrow { color: var(--gold-pale); }
.hero h1 {
  font-size: var(--step-5);
  color: #fff;
  margin-bottom: var(--sp-6);
  letter-spacing: -0.02em;
}
.hero__lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--cream-text);
  max-width: 40ch;
  margin-bottom: var(--sp-7);
}
.hero__rule { border: 0; border-top: 2px solid var(--gold-bright); width: 4.5rem; margin: 0 0 var(--sp-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }


/* 7. COMPONENTS ============================================================ */

.btn {
  display: inline-block; font: inherit; font-weight: 700;
  font-size: var(--step--1); letter-spacing: .04em;
  background: var(--gold-bright); color: var(--navy-deep);
  border: 2px solid var(--gold-bright); border-radius: 999px;
  padding: var(--sp-3) var(--sp-6); text-decoration: none; cursor: pointer;
}
.btn:hover { background: #DCB434; border-color: #DCB434; color: var(--navy-deep); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(237,230,218,.5); }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.btn--ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* .band--navy a{color:#fff} is more specific than .btn and would otherwise
   paint white text onto the gold button — 2.4:1. Restate the button colours
   at equal-or-higher specificity inside dark bands. */
.band--navy .btn { color: var(--navy-deep); }
.band--navy .btn:hover { color: var(--navy-deep); }
.band--navy .btn--ghost { color: #fff; }
.band--navy .btn--ghost:hover { color: #fff; }

/* --- Card --- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6);
}
.band--white .card { background: var(--cream); }
.band--navy .card {
  background: rgba(255,255,255,.045);
  border-color: var(--line-navy);
}
.card h3 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* --- Feature: numbered service block --- */
.feature { border-top: 1px solid var(--line); padding-top: var(--sp-6); }
.band--navy .feature { border-top-color: var(--line-navy); }
.feature__num {
  font-family: var(--font-display); font-size: var(--step-1);
  color: var(--gold); line-height: 1; display: block; margin-bottom: var(--sp-3);
}
.band--navy .feature__num { color: var(--gold-pale); }
.feature h3 { margin: 0 0 var(--sp-4); }
.feature ul { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.feature li { padding-left: 1.1rem; position: relative; margin-bottom: var(--sp-2); font-size: var(--step--1); color: var(--ink-soft); }
.band--navy .feature li { color: var(--cream-text); }
.feature li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}

/* --- Stat ---
   Its own grid with a smaller minimum than .grid--3, so three stats stay on
   one row inside the narrower content column of a .split. */
.stats {
  display: grid;
  gap: var(--sp-5) var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}
.stat__value {
  font-family: var(--font-display); font-size: var(--step-3);
  font-weight: 700; line-height: 1; color: var(--ink); margin: 0 0 var(--sp-2);
}
.band--navy .stat__value { color: var(--gold-pale); }
.stat__label {
  font-size: var(--step--2); letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-text); margin: 0;
}
.band--navy .stat__label { color: var(--cream-text); }

/* --- Arrow link --- */
.arrow-link {
  display: inline-block; font-weight: 700; font-size: var(--step--1);
  letter-spacing: .03em; color: var(--gold-text); text-decoration: none;
  border-bottom: 1px solid var(--gold); padding-bottom: 2px;
}
.arrow-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.band--navy .arrow-link { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.band--navy .arrow-link:hover { color: #fff; border-bottom-color: #fff; }

/* --- People --- */
.people-group { margin-top: var(--sp-8); }
.people-group:first-child { margin-top: 0; }
.people-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--sp-3);
  border-bottom: 1px solid var(--gold); padding-bottom: var(--sp-3); margin-bottom: var(--sp-6);
}
.people-group__head h2 { margin: 0; font-size: var(--step-2); }
.people-group__count { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }

.people-list {
  list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
.person {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--gold); border-radius: var(--radius);
  padding: var(--sp-6);
}
.band--cream-deep .person, .band--white .person { background: var(--white); }
.person__name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; margin: 0 0 var(--sp-1); line-height: 1.2; }
.person__creds { font-size: var(--step--2); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 var(--sp-3); }
.person__title { color: var(--ink-soft); margin: 0 0 var(--sp-4); }
.person__handles { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 var(--sp-4); }
.person__handles strong { color: var(--ink); }
.person__contact { margin: auto 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--step--1); }
.person__contact dt { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: var(--step--2); color: var(--ink-soft); margin-bottom: 2px; }
.person__contact dd { margin: 0 0 var(--sp-3); }
.person__contact dd:last-child { margin-bottom: 0; }

.person--todo { border-style: dashed; border-color: var(--control); background: var(--cream-deep); color: var(--ink-soft); }
.person--todo .person__name { color: var(--ink-soft); font-style: italic; }
.todo-flag {
  display: inline-block; font-size: var(--step--2); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--navy-deep); color: #fff; padding: 3px var(--sp-3);
  border-radius: 2px; margin-bottom: var(--sp-3);
}

/* --- Directory filter (injected by site.js) --- */
.filter {
  margin-top: var(--sp-6); padding: var(--sp-6);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.filter__group { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
.filter__group:last-of-type { margin-bottom: 0; }
.filter__legend { font-size: var(--step--2); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--sp-3); padding: 0; }
.filter__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.filter__btn {
  font: inherit; font-size: var(--step--1); font-weight: 600;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--control); border-radius: 999px;
  padding: var(--sp-2) var(--sp-5); cursor: pointer;
}
.filter__btn:hover { background: var(--cream-deep); }
.filter__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* --- Chips --- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.chips a {
  display: block; border: 1px solid var(--control); border-radius: 999px;
  padding: var(--sp-2) var(--sp-5); text-decoration: none;
  font-size: var(--step--1); font-weight: 600; background: transparent;
}
.chips a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.band--navy .chips a { border-color: rgba(217,201,163,.45); }
.band--navy .chips a:hover { background: var(--gold-bright); color: var(--navy-deep); border-color: var(--gold-bright); }

/* --- Embedded map ---
   OpenStreetMap rather than Google: it sets no cookies, runs no advertising
   trackers, needs no API key or account, and costs nothing to keep working.
   The map is an ADDITION to the written address, never a replacement — the
   address and the link out both stand on their own if the frame fails to
   load or the visitor cannot use an interactive map. */
.map {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-deep);
}
.map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.map__note {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: var(--sp-4) 0 0;
}
.band--navy .map { border-color: var(--line-navy); }
.band--navy .map__note { color: var(--cream-text); }
@media (max-width: 44rem) {
  .map iframe { aspect-ratio: 4 / 3; }
}

/* --- Callout --- */
.callout {
  border-left: 3px solid var(--gold); background: var(--white);
  padding: var(--sp-6); border-radius: 0 var(--radius) var(--radius) 0;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.band--navy .callout { background: rgba(255,255,255,.05); border-color: var(--line-navy); border-left-color: var(--gold-bright); }
.callout > :last-child { margin-bottom: 0; }
.callout h3 { margin-top: 0; }

/* --- Outbound --- */
.outbound { display: block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6); text-decoration: none; }
.outbound:hover { border-color: var(--gold); }
.outbound h3 { margin: 0 0 var(--sp-2); }
.outbound p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
/* In a dark band the headings turn white, so the card ground must go dark
   too — otherwise it is white text on a white card. */
.band--navy .outbound { background: rgba(255,255,255,.045); border-color: var(--line-navy); }
.band--navy .outbound:hover { border-color: var(--gold-bright); }
.band--navy .outbound p { color: var(--cream-text); }
.ext::after { content: " \2197"; font-size: .85em; color: var(--gold-text); }
.band--navy .ext::after { color: var(--gold-bright); }

/* --- Fact list --- */
.facts { margin: 0; }
.facts dt { font-size: var(--step--2); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); margin-bottom: var(--sp-2); }
.band--navy .facts dt { color: var(--gold-pale); }
.facts dd { margin: 0 0 var(--sp-6); font-size: var(--step-0); }
.facts dd:last-child { margin-bottom: 0; }

/* --- Table --- */
.table-scroll { overflow-x: auto; margin-bottom: var(--sp-6); }
.table-scroll:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.dates { width: 100%; border-collapse: collapse; }
.dates caption { text-align: left; font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; padding-bottom: var(--sp-4); }
.dates th, .dates td { text-align: left; padding: var(--sp-4) var(--sp-5) var(--sp-4) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.dates thead th { font-family: var(--font-body); font-size: var(--step--2); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--gold); }
.dates td:last-child { font-weight: 700; white-space: nowrap; }
.band--navy .dates th, .band--navy .dates td { border-bottom-color: var(--line-navy); }
.band--navy .dates thead th { color: var(--gold-pale); border-bottom-color: var(--gold-bright); }

/* --- Checklist --- */
.checklist { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.checklist li { position: relative; padding-left: 1.9rem; margin-bottom: var(--sp-3); break-inside: avoid; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: .85rem; height: .85rem; border: 1.5px solid var(--gold); border-radius: 2px;
}

/* --- Service block (services page) --- */
.service { border-top: 2px solid var(--gold); padding-top: var(--sp-6); margin-top: var(--sp-8); }
.service:first-of-type { margin-top: 0; }
.service h2 { margin-top: 0; }
.service__list { columns: 2; column-gap: var(--sp-7); }
.service__list li { break-inside: avoid; margin-bottom: var(--sp-3); }
@media (max-width: 44rem) { .service__list { columns: 1; } }
.who-link { display: inline-block; margin-top: var(--sp-5); font-weight: 700; font-size: var(--step--1); color: var(--gold-text); border-bottom: 1px solid var(--gold); padding-bottom: 2px; text-decoration: none; }
.who-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* --- Page head (inner pages) --- */
.page-head { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3.5rem); }
.page-head h1 { margin-bottom: var(--sp-5); }
.page-head .lede { margin-bottom: 0; max-width: 52ch; }


/* 8. FORMS ================================================================= */
label { display: block; font-weight: 700; font-size: var(--step--1); margin-bottom: var(--sp-2); }
input, textarea, select {
  font: inherit; width: 100%; padding: var(--sp-3);
  border: 1px solid var(--control); border-radius: var(--radius);
  background: var(--white); color: var(--ink);
}
.field { margin-bottom: var(--sp-5); }
.hint { display: block; font-size: var(--step--1); color: var(--ink-soft); font-weight: 400; line-height: 1.5; margin-top: var(--sp-2); }
.band--navy .hint { color: var(--cream-text); }


/* 9. UTILITIES ============================================================= */
/* Components below use display:flex/grid, which would otherwise beat the
   browser default [hidden]{display:none}. The JS filter depends on this. */
[hidden] { display: none !important; }
.print-head { display: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Keep a heading's level while changing its size — never demote a tag to
   fix appearance. */
.as-h2 { font-size: var(--step-2); }
.as-h3 { font-size: var(--step-1); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.tel { font-weight: 700; white-space: nowrap; }
.email { font-weight: 600; }


/* 10. RESPONSIVE AND MOTION ================================================ */
@media (max-width: 40rem) {
  /* A two-row nav stuck to the top would eat ~40% of a phone screen. */
  .site-header { position: static; }
  html { scroll-padding-top: 1rem; }

  .site-header__inner { justify-content: center; text-align: center; }
  .nav ul { justify-content: center; }

  .hero { border-radius: 0 0 50% 50% / 0 0 2.25rem 2.25rem; }
  .hero__mark { font-size: 34rem; right: -8%; opacity: .7; }

  .dates td:last-child { white-space: normal; }
  .dates th, .dates td { padding-right: var(--sp-3); }
  .checklist[style] { columns: 1 !important; }
}

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

@media (forced-colors: active) {
  .card, .person, .outbound, .callout, .feature { border: 1px solid CanvasText; }
  .hero::before, .hero__mark { display: none; }
  .filter__btn[aria-pressed="true"] { forced-color-adjust: none; }
}