/* =============================================================
   Judiciary of Eswatini — design system
   Palette: sampled from the High Court building on Hospital Hill
            (img/high1.jpg) — dusk navy, sunlit ochre plaster,
            façade brick, plaster read as parchment.
   Type:    Spectral (display) + Archivo (UI / body / data)
   Motif:   the building's parabolic arch rising through its
            pitched pediment. Drawn once in the hero, repeated
            at hairline weight on every section head.
   ============================================================= */

/* ---------------------------------------------------- tokens */
:root {
  /* -- monument (navy surfaces: header, hero, stats, footer) -- */
  --night:       #071A31;   /* dusk sky over Hospital Hill */
  --night-2:     #0A2340;
  --navy:        #0D2C4E;
  --navy-2:      #123761;
  --navy-line:   rgba(198, 150, 63, 0.22);   /* brass hairline on navy */
  --navy-line-2: rgba(198, 150, 63, 0.40);
  --navy-rule:   rgba(226, 214, 190, 0.14);  /* neutral hairline on navy */

  /* -- ground (parchment surfaces: the body of every page) -- */
  --parchment:   #F5F0E4;   /* the façade plaster, read as paper */
  --vellum:      #EBE4D3;   /* alternate bands */
  --vellum-2:    #E1D8C2;   /* pressed wells, card edges */
  --card:        #FCFAF4;   /* raised surface above parchment */
  --line:        rgba(20, 36, 58, 0.14);
  --line-strong: rgba(20, 36, 58, 0.26);

  /* -- accents -- */
  --brass:       #C6963F;   /* sunlit ochre plaster */
  --brass-lit:   #E0B662;   /* highlight / hover on navy */
  --brass-ink:   #7A5514;   /* the same ochre, dark enough to be text
                               on parchment — 5.83:1 */
  --brick:       #92503A;   /* façade brick — categories, new-flags */
  --brick-soft:  rgba(146, 80, 58, 0.10);
  /* The third state colour. --link and --brick already carried info and
     warning; success was the one left as a literal in two places. 5.5:1 on
     parchment, 6.0:1 on card, so it reads as text as well as an accent. */
  --leaf:        #2F6B4F;
  --leaf-soft:   rgba(47, 107, 79, 0.07);

  /* -- text -- */
  --ink:         #14243A;   /* 13.8:1 on parchment */
  --ink-dim:     #46566E;   /* 6.5:1  on parchment */
  --ink-faint:   #5B6880;   /* 4.9:1  on parchment */
  --link:        #1B4B7E;   /* 7.9:1  on parchment */
  --link-hover:  #0F3560;

  --on-night:      #EDE6D8; /* 14.1:1 on night */
  --on-night-dim:  #A9BBD0; /*  8.8:1 on night */
  --on-night-faint:#8195AF; /*  5.5:1 on night */

  /* Brass is a fill, never a text colour on light ground — white on
     brass is 2.7:1. Primary controls are brass with navy text (6.6:1). */
  --grad-brass:  linear-gradient(135deg, #D2A44E 0%, #C6963F 55%, #B4842F 100%);
  --grad-sheen:  linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 70%);
  --shadow-1:    0 2px 10px -2px rgba(20, 36, 58, 0.10), 0 8px 26px -12px rgba(20, 36, 58, 0.18);
  --shadow-2:    0 6px 20px -4px rgba(20, 36, 58, 0.13), 0 22px 50px -20px rgba(20, 36, 58, 0.28);
  --shadow-navy: 0 10px 40px -14px rgba(0, 0, 0, 0.6);

  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body:    "Archivo", "Segoe UI", Arial, sans-serif;

  /* The building has no rounded corners. Neither does this. A 2px
     softening keeps controls from looking cut by a guillotine; nothing
     goes further than that. */
  --radius:      3px;
  --radius-sm:   2px;
  --radius-lg:   4px;

  --header-h:    76px;
  --topbar-h:    38px;
  --container:   1240px;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur:         0.45s;

  /* --------------------------------------------- type roles
     Roles, not arbitrary sizes. --text-label is the floor for any
     tracked-caps run: 0.77rem = 12.3px. */
  --text-display:  clamp(2.5rem, 5.6vw, 4.15rem);
  --text-h2:       clamp(1.85rem, 3.4vw, 2.55rem);
  --text-h3:       clamp(1.1rem, 1.5vw, 1.26rem);
  --text-body-lg:  clamp(1rem, 1.4vw, 1.13rem);
  --text-body:     1rem;
  --text-small:    0.9rem;
  --text-label:    0.77rem;

  --reading:     68ch;

  /* ------------------------------------------------- spacing */
  --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:     4.5rem;

  /* --------------------------------------------------- motion */
  --dur-fast:    0.12s;
  --dur-base:    0.2s;
  --dur-slow:    0.36s;

  /* -------------------------------------------------- layering */
  --z-header:    120;
  --z-drawer-scrim: 190;
  --z-drawer:    200;
  --z-search:    210;
  --z-skip:      300;

  /* Minimum comfortable hit area (WCAG 2.2 AA target size). */
  --target-min:  44px;
}

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

/* An author-level `display` beats the UA `[hidden]` rule, so state it
   explicitly. Without this, hidden overlays still swallow clicks. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

/* --link is a deep navy tuned for parchment (7.9:1) and is invisible on
   the navy monuments — the newsletter consent link caught it at 1.96:1.
   Scoped to inline prose only: the footer columns, breadcrumbs and nav
   set their own link colours and must not be overridden here. */
.hero-lead a, .page-hero-lead a, .big-quote a,
.check-label a, .footer-about a, .newsletter-band .section-lead a {
  color: var(--brass-lit);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hero-lead a:hover, .page-hero-lead a:hover, .big-quote a:hover,
.check-label a:hover, .footer-about a:hover,
.newsletter-band .section-lead a:hover { color: #F2DCAE; }

h1, h2, h3, h4, h5 { margin: 0 0 0.5em; line-height: 1.15; font-weight: 600; }
p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* Dates, reference numbers and statistics are compared column-wise.
   Archivo ships proportional figures by default. */
time, .stat-n, .page-stat-n, .principle-num, .doc-row-meta, .news-row-date,
.news-card-meta, .step-n { font-variant-numeric: tabular-nums lining-nums; }

::selection { background: rgba(198, 150, 63, 0.34); color: var(--ink); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brass-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On the navy monuments the ink-toned ring disappears. */
.site-header :focus-visible,
.hero :focus-visible,
.quote-band :focus-visible,
.site-footer :focus-visible,
.mobile-drawer :focus-visible,
.search-overlay :focus-visible { outline-color: var(--brass-lit); }

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

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 300;
  padding: 10px 18px; background: var(--night); color: var(--parchment);
  border-radius: 2px; font-weight: 600; transition: top 0.2s;
}
.skip-link:focus { top: 12px; color: var(--parchment); }

/* Ambient ground. Two barely-there warm washes so the parchment is not a
   flat fill — the same gesture the plaster makes in raking light. No
   script, no canvas, no remote origin. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(198, 150, 63, 0.10), rgba(0,0,0,0) 70%),
    radial-gradient(900px 600px at 8% 108%, rgba(146, 80, 58, 0.055), rgba(0,0,0,0) 70%);
}

/* ------------------------------------------------ typography */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 40px);
}

/* ------------------------------------------------ the arch
   The building's motif, reduced to a hairline. `.arch-rule` is a
   shallow parabola springing from a full-width rule — the section-head
   echo of the aperture drawn full size in the hero. */
.arch-rule {
  display: block; width: 60px; height: 18px;
  margin: 0 0 13px;
  color: var(--brass);
  overflow: visible;
}
.arch-rule path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.arch-rule .arch-base { stroke: currentColor; opacity: 0.42; }
.section-head.is-center .arch-rule { margin-left: auto; margin-right: auto; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: var(--text-label); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-ink);
}
.section-head.is-center .eyebrow { justify-content: center; }

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.14;
  color: var(--ink);
  text-wrap: balance;
}
.section-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-ink);
}

.section-lead {
  max-width: 62ch;
  color: var(--ink-dim);
  font-size: 1.03rem;
}

/* -------------------------------------------- spacing utilities */
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-6 { margin-bottom: var(--space-6); }
.gap-5 { gap: var(--space-5); }

.section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.section-head.is-flush { margin-bottom: 0; }
.section-head.is-center { text-align: center; }
.carousel-viewall { margin-right: 10px; }
.section-head.is-center .section-lead { margin-left: auto; margin-right: auto; }

.section { position: relative; padding: clamp(64px, 9vw, 110px) 0; }
.section-tight { padding: clamp(44px, 6vw, 72px) 0; }
/* Tonal band, not a spotlight. */
.section-alt {
  background: var(--vellum);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.dot {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-faint); vertical-align: middle; margin: 0 8px;
}

.icon { width: 1.2em; height: 1.2em; flex: none; }

/* ----------------------------------------------------- chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--vellum);
}
.chip-tier { color: var(--brass-ink); border-color: rgba(122, 85, 20, 0.34); background: rgba(198, 150, 63, 0.11); }
.chip-cat {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(7, 26, 49, 0.86);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-color: rgba(198, 150, 63, 0.4);
  color: #F0E4CB;
}
.chip-new {
  background: var(--brick); color: #FFF6F1; border: 0;
  font-size: 0.62rem; padding: 3px 9px; vertical-align: 3px;
}

/* --------------------------------------------------- buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.95rem;
  line-height: 1; letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              background-color 0.25s, border-color 0.25s, color 0.25s;
  overflow: hidden;
  white-space: nowrap;
}
.btn .icon { transition: transform 0.35s var(--ease-out); }
.btn:hover .icon { transform: translateX(3px); }

/* Brass fill, navy text — 6.6:1. White on brass is 2.7:1 and is never
   used. Resting state carries no glow; elevation is reserved for hover,
   where it signals the control responded. */
.btn-primary {
  background: var(--grad-brass);
  color: var(--night);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: var(--grad-sheen);
  transform: translateX(-110%);
  transition: transform 0.8s var(--ease-out);
}
.btn-primary:hover { color: var(--night); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), var(--shadow-1); }
.btn-primary:hover::after { transform: translateX(110%); }

.btn-ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover {
  color: var(--night); border-color: var(--brass);
  background: rgba(198, 150, 63, 0.12);
  transform: translateY(-2px);
}
/* On the navy monuments the ghost button inverts. */
.hero .btn-ghost, .quote-band .btn-ghost, .site-footer .btn-ghost {
  color: var(--on-night); border-color: var(--navy-line-2);
}
.hero .btn-ghost:hover, .quote-band .btn-ghost:hover, .site-footer .btn-ghost:hover {
  color: #FFF; border-color: var(--brass); background: rgba(198, 150, 63, 0.16);
}

/* min-height keeps small buttons at the WCAG 2.2 AA target size even
   though their padding alone would not. */
.btn-sm { padding: 10px 18px; font-size: 0.88rem; min-height: var(--target-min); }
.btn-lg { padding: 17px 34px; font-size: 1rem; }

.text-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 24px;
  color: var(--link); font-weight: 600; font-size: 0.92rem;
}
.text-link .icon { width: 1.05em; height: 1.05em; transition: transform 0.3s var(--ease-out); }
.text-link:hover .icon { transform: translateX(4px); }
.site-footer .text-link, .quote-band .text-link { color: var(--brass-lit); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  background: transparent;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.2s;
}
.icon-btn:hover { color: var(--night); border-color: var(--brass); background: rgba(198, 150, 63, 0.12); }
.icon-btn .icon { width: 20px; height: 20px; }
.site-header .icon-btn, .mobile-drawer .icon-btn, .search-panel .icon-btn {
  border-color: var(--navy-line); color: var(--on-night-dim);
}
.site-header .icon-btn:hover, .mobile-drawer .icon-btn:hover, .search-panel .icon-btn:hover {
  color: var(--night); background: var(--brass); border-color: var(--brass);
}

/* ----------------------------------------------------- glass
   Was a blurred dark pane. On parchment the same role is played by a
   raised card: a lighter fill, one hairline, and a low shadow. */
.glass {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
/* Inside a navy band the card stays navy. */
.hero .glass, .quote-band .glass {
  background: rgba(13, 44, 78, 0.62);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: var(--navy-line);
  box-shadow: var(--shadow-navy);
}

/* ---------------------------------------------------- header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  transition: transform 0.4s var(--ease-out);
}

/* Height is animated deliberately: collapsing the utility bar has to
   reclaim its space so the navbar below moves up. */
.topbar {
  height: var(--topbar-h);
  background: var(--night);
  border-bottom: 1px solid rgba(198, 150, 63, 0.16);
  font-size: 0.78rem;
  overflow: hidden;
  transition: height 0.35s var(--ease-out), opacity 0.3s;
}
.topbar-inner {
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.topbar-motto {
  margin: 0; color: var(--brass);
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; font-size: var(--text-label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-links { display: flex; gap: 22px; }
.topbar-links a {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 24px;
  color: var(--on-night-dim); font-weight: 500;
}
.topbar-links a:hover { color: var(--brass-lit); }
.topbar-links .icon { width: 14px; height: 14px; color: var(--brass); }

.navbar {
  height: var(--header-h);
  background: var(--night);
  border-bottom: 1px solid var(--navy-line);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.site-header.is-scrolled .topbar { height: 0; opacity: 0; }
.site-header.is-scrolled .navbar {
  border-bottom-color: var(--brass);
  box-shadow: 0 10px 34px -20px rgba(0, 0, 0, 0.85);
}

.navbar-inner {
  height: 100%;
  display: flex; align-items: center; gap: 26px;
}

.brand { display: inline-flex; align-items: center; gap: 13px; }
/* The crest is a black-and-white line emblem drawn for a light ground.
   It spent the previous design as a 46px favicon washed out on near
   black; here it gets a parchment disc of its own to sit on. */
.brand-crest {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  background: var(--parchment);
  box-shadow: 0 0 0 1px var(--brass), 0 0 0 4px rgba(198, 150, 63, 0.16);
  padding: 2px;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.06rem; font-weight: 600; line-height: 1.15;
  color: var(--parchment);
  letter-spacing: 0.11em; text-transform: uppercase;
}
.brand-name em {
  display: block;
  font-style: normal; font-weight: 400; font-size: 0.86em;
  letter-spacing: 0.16em;
  color: var(--brass);
}

.main-nav { margin-left: auto; }
.main-nav > ul {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 13px;
  color: var(--on-night-dim);
  font-weight: 500; font-size: 0.92rem;
  border-radius: var(--radius-sm);
  transition: color 0.2s;
}
.nav-link:hover { color: var(--brass-lit); }
.nav-link.is-active { color: var(--parchment); }
.nav-link.is-active::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 2px;
  background: var(--brass);
}
.nav-caret { width: 13px; height: 13px; opacity: 0.7; transition: transform 0.25s; }
.nav-item:hover .nav-caret,
.nav-item.is-open .nav-caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%;
  min-width: 236px;
  margin: 0; padding: 6px; list-style: none;
  background: var(--night-2);
  border: 1px solid var(--navy-line);
  border-top: 2px solid var(--brass);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-navy);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
  z-index: 50;
}
.dropdown::before {
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 14px;
}
.nav-item:hover .dropdown,
.nav-item.is-open .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
}
.dropdown a {
  display: block; padding: 9px 14px;
  border-radius: var(--radius-sm);
  color: var(--on-night-dim);
  font-size: 0.9rem; font-weight: 500;
  transition: color 0.15s, background-color 0.15s, transform 0.2s var(--ease-out);
}
.dropdown a:hover {
  color: var(--night);
  background: var(--brass);
  transform: translateX(3px);
}

.navbar-actions { display: flex; align-items: center; gap: 10px; margin-left: 4px; }
.nav-cta .icon { width: 15px; height: 15px; }
.nav-burger { display: none; }

/* --------------------------------------------- mobile drawer */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(4, 14, 27, 0.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.3s;
}
.drawer-scrim.is-visible { opacity: 1; }

.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
  width: min(400px, 92vw);
  background: var(--night);
  border-left: 2px solid var(--brass);
  transform: translateX(102%);
  transition: transform 0.45s var(--ease-out);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mobile-drawer.is-open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--navy-line);
}
.drawer-head .brand-crest { width: 42px; height: 42px; }
.drawer-head .brand-name { font-size: 0.95rem; }

.drawer-nav { padding: 14px 22px 34px; display: flex; flex-direction: column; }
.drawer-nav > ul { list-style: none; margin: 0 0 22px; padding: 0; }
.drawer-item { border-bottom: 1px solid var(--navy-rule); }
.drawer-link, .drawer-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 15px 2px;
  color: var(--on-night); font-size: 1.02rem; font-weight: 600;
  text-align: left;
}
.drawer-link.is-active, .drawer-toggle.is-active { color: var(--brass-lit); }
.drawer-toggle .icon { width: 17px; height: 17px; color: var(--on-night-faint); transition: transform 0.3s; }
.drawer-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); color: var(--brass); }
.drawer-sub { list-style: none; margin: 0; padding: 2px 0 12px 14px; border-left: 1px solid var(--navy-line); }
.drawer-sub a {
  display: block; padding: 9px 0 9px 12px;
  color: var(--on-night-dim); font-size: 0.94rem;
}
.drawer-sub a:hover { color: var(--brass-lit); }
.drawer-cta { width: 100%; }
.drawer-contact { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.drawer-contact a {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--on-night-dim); font-size: 0.92rem;
}
.drawer-contact .icon { color: var(--brass); width: 16px; height: 16px; }

/* -------------------------------------------- search overlay */
.search-overlay {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(80px, 16vh, 160px) 20px 40px;
  background: rgba(4, 14, 27, 0.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.3s;
}
.search-overlay.is-visible { opacity: 1; }
.search-panel {
  position: relative;
  width: min(680px, 100%);
  /* The close button is absolutely placed at top:14px and is 42px tall,
     so it reaches y=56 — the top padding has to clear it or it lands on
     the search field's top-right corner. */
  padding: 62px clamp(22px, 4vw, 36px) clamp(22px, 4vw, 36px);
  background: var(--night-2);
  border: 1px solid var(--navy-line);
  border-top: 3px solid var(--brass);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-navy);
}
.search-form {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 18px;
  background: rgba(4, 14, 27, 0.6);
  border: 1px solid var(--navy-line-2);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-form:focus-within { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(198, 150, 63, 0.2); }
.search-form-icon { width: 20px; height: 20px; color: var(--brass); }
.search-form input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  padding: 12px 0;
  color: var(--on-night); font-size: 1.05rem;
}
.search-form input::placeholder { color: var(--on-night-faint); }
.search-hints { margin: 18px 4px 0; color: var(--on-night-faint); font-size: 0.86rem; }
.search-hints a {
  display: inline-block; margin: 4px 6px 0 0;
  padding: 5px 12px;
  border: 1px solid var(--navy-line);
  border-radius: var(--radius-sm);
  color: var(--on-night-dim); font-size: 0.8rem;
}
.search-hints a:hover { color: var(--night); border-color: var(--brass); background: var(--brass); }
.search-close { position: absolute; top: 14px; right: 14px; }

/* ------------------------------------------------- home hero
   Full-bleed image slider (Proposal 2 — Editorial). Real photographs
   crossfade behind a lower-third statement; a thumbnail filmstrip is the
   slide picker. Overlay copy is thematic — no photograph is ever labelled
   as a specific court. Autoplay is enhancement: gated behind `.js`, stopped
   by the pause control, by hover / keyboard focus / a hidden tab, and by
   reduced motion. */
/* The hero starts BELOW the fixed header rather than under it, so the
   photograph is never cropped by the navigation and the navbar keeps a solid
   ground. `--header-h + --topbar-h` is the same measurement .page-hero pads
   by; it is subtracted from the height as well as added as an offset, so the
   hero plus the header still resolve to the 88vh the composition was drawn
   for instead of overflowing by the header's height. */
.hero {
  position: relative;
  margin-top: calc(var(--header-h) + var(--topbar-h));
  min-height: min(calc(88vh - var(--header-h) - var(--topbar-h)), 800px);
  display: flex;
  background: var(--night);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* crossfading stack — image and its caption move together */
.cine-track { position: absolute; inset: 0; z-index: 0; }
.cine-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.9s var(--ease-out), visibility 0.9s;
}
.cine-slide.is-active { opacity: 1; visibility: visible; }

.cine-media { position: absolute; inset: 0; overflow: hidden; }
.cine-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 46%;
}
/* a slow settle so the frame feels alive; the global reduced-motion
   block collapses this to nothing */
.cine-slide.is-active .cine-media img { animation: cineDrift 9s var(--ease-out) forwards; }
@keyframes cineDrift { from { transform: scale(1.07); } to { transform: scale(1); } }

/* scrim: dark at the foot for the caption, a lighter wash up top so the
   transparent header stays legible over a bright photograph */
.cine-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,26,49,0.62) 0%, rgba(7,26,49,0.14) 18%, rgba(7,26,49,0) 38%,
                    rgba(7,26,49,0.48) 64%, rgba(7,26,49,0.96) 100%),
    linear-gradient(90deg, rgba(7,26,49,0.72) 0%, rgba(7,26,49,0.22) 44%, rgba(7,26,49,0) 72%);
}

/* the caption, in the lower third, on the site measure */
/* The statement sits in the lower third, but it is anchored at BOTH edges,
   not just the bottom. Anchored only at the bottom it grows upward as the
   copy gets taller or the viewport gets shorter, and on a short viewport it
   ran off the top of the frame — the brass rule and the eyebrow disappeared
   and the title started at the very edge. Anchoring the top as well makes
   that impossible at any viewport; `align-items: flex-end` keeps the
   lower-third composition when there is room to spare.

   The offset is a plain 24px, NOT the header calc: the hero itself now
   begins below the header, so adding the header height here again would
   count it twice and push the statement needlessly far down the frame. */
.cine-copy {
  position: absolute; left: 0; right: 0;
  top: 24px;
  bottom: clamp(150px, 17vh, 200px);
  z-index: 2;
  display: flex;
  align-items: flex-end;
}
.cine-copy > .container { width: 100%; }
.cine-rule { width: 64px; height: 2px; background: var(--brass); margin-bottom: 20px; }
.cine-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font-family: var(--font-display); font-size: var(--text-label); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-lit);
  text-shadow: 0 1px 10px rgba(4,12,24,0.8);
}
.cine-title {
  margin: 0 0 16px; max-width: 18ch;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 4.2rem); line-height: 1.04; letter-spacing: -0.018em;
  color: #FFFDF8; text-shadow: 0 2px 28px rgba(4,12,24,0.55), 0 1px 3px rgba(4,12,24,0.5);
  text-wrap: balance;
}
.cine-title em { font-style: italic; font-weight: 300; color: var(--brass-lit); }
.cine-lead {
  margin: 0 0 26px; max-width: 46ch;
  color: #EAEFF7; font-size: var(--text-body-lg); line-height: 1.6;
  text-shadow: 0 1px 12px rgba(4,12,24,0.7);
}
.cine-actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* over a photograph the ghost CTA needs a faint backing */
.hero .btn-ghost {
  color: #fff; border-color: rgba(237,230,216,0.5);
  background: rgba(7,26,49,0.30);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.hero .btn-ghost:hover { color: var(--night); background: var(--brass); border-color: var(--brass); }

/* ---- the bar: pause control + thumbnail filmstrip + counter ---- */
.cine-bar {
  position: absolute; left: 0; right: 0; bottom: clamp(30px, 5vh, 44px); z-index: 3;
}
.cine-bar .container { display: flex; align-items: flex-end; gap: 14px; }
.cine-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(237,230,216,0.16); z-index: 1;
}
.cine-progress i { display: block; height: 100%; width: 0; background: var(--brass); }
.cine-pause {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(237,230,216,0.4); border-radius: var(--radius-sm);
  background: rgba(7,26,49,0.35); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.cine-pause:hover { background: var(--brass); border-color: var(--brass); color: var(--night); }
.cine-pause .i-play { display: none; }
.hero.is-paused .cine-pause .i-pause { display: none; }
.hero.is-paused .cine-pause .i-play { display: inline-flex; }
.cine-pause .icon { width: 18px; height: 18px; }

.cine-counter {
  flex: none; align-self: center; margin: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 0.84rem;
  color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.cine-counter b { color: var(--brass-lit); }

.cine-thumbs { display: flex; gap: 12px; margin-left: auto; list-style: none; padding: 0; }
.cine-thumbs li { display: flex; }
.cine-thumb {
  position: relative; width: 122px; height: 76px; padding: 0;
  border: 1px solid rgba(237,230,216,0.3); overflow: hidden;
  background: none; cursor: pointer;
  filter: saturate(0.85) brightness(0.62);
  transition: filter 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.cine-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cine-thumb .t-label {
  position: absolute; left: 8px; bottom: 6px; right: 6px;
  font-family: var(--font-display); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 4px #000; text-align: left;
}
.cine-thumb:hover { filter: saturate(1) brightness(0.86); border-color: rgba(198,150,63,0.6); }
.cine-thumb.is-active {
  filter: none; border: 2px solid var(--brass);
  box-shadow: 0 10px 28px -10px rgba(0,0,0,0.6);
}

/* The header is solid navy on the homepage exactly as it is everywhere else.
   It used to be transparent over the hero — 42% navy on the topbar, fully
   transparent navbar — so the photograph ran up behind the navigation. That
   put moving imagery behind the wordmark and the links, and legibility then
   depended on a text-shadow rather than on contrast. The hero now begins
   below the header instead (see `.hero`), so the photograph is whole and the
   navigation sits on its own ground. */

/* No JS: show the first slide; hide the controls it cannot drive. */
:root:not(.js) .cine-slide:first-child { opacity: 1; visibility: visible; }
:root:not(.js) .cine-bar { display: none; }

/* -------------------------------------------------- hero responsive */
@media (max-width: 900px) {
  .cine-copy { bottom: clamp(126px, 15vh, 168px); }
  .cine-title { font-size: clamp(2.1rem, 7vw, 3.2rem); }
  .cine-thumb { width: 96px; height: 62px; }
  .cine-thumb .t-label { font-size: 0.58rem; }
}
@media (max-width: 640px) {
  /* the caption clears the controls, and the filmstrip becomes a compact
     two-up that never overflows a narrow screen */
  .cine-copy { bottom: clamp(150px, 26vh, 210px); }
  .cine-lead { display: none; }
  .cine-bar .container { flex-wrap: wrap; gap: 10px; }
  .cine-counter { order: 2; }
  .cine-thumbs { width: 100%; margin-left: 0; order: 3; }
  .cine-thumbs li { flex: 1; }
  .cine-thumb { width: 100%; height: 56px; }
  .cine-thumb .t-label { display: none; }
}

/* Short viewports — a laptop once browser chrome is subtracted, or any
   zoom above 100%. These are height queries, not width ones: the hero
   fails on vertical space, and a wide 1900x620 window hits it exactly as
   a narrow one does. The rhythm is compressed so the statement still fits
   between the header and the filmstrip instead of being clamped against
   the top anchor. */
@media (max-height: 860px) {
  .cine-rule { margin-bottom: 14px; }
  .cine-eyebrow { margin-bottom: 10px; }
  .cine-title { font-size: clamp(1.95rem, 3.4vw, 3rem); margin-bottom: 12px; }
  .cine-lead { margin-bottom: 18px; font-size: var(--text-body); }
}
@media (max-height: 720px) {
  /* The lead goes first, exactly as it does on a narrow screen above:
     the title and the two actions carry the message on their own.
     Note what is NOT touched here — `bottom`. That offset is what holds
     the statement clear of the filmstrip, which is ~123px tall; pulling it
     in to buy vertical room simply trades a collision with the header for
     a collision with the thumbnails. The room comes from the copy. */
  .cine-title { font-size: clamp(1.7rem, 3vw, 2.4rem); }
  .cine-lead { display: none; }
}
@media (max-height: 580px) {
  /* The floor. Sized against the longest headline in the deck —
     "Independent. Impartial. Committed to Justice." — because that is the
     one that decides whether this collides, not whichever slide happens to
     be showing when someone looks. The eyebrow and rule go: at this height
     they are decoration competing with the headline for the last 40px. */
  .cine-rule, .cine-eyebrow { display: none; }
  .cine-title { font-size: clamp(1.45rem, 2.6vw, 2rem); margin-bottom: 10px; }
  .cine-actions { gap: 10px; }
  .hero .btn-lg { padding: 10px 18px; font-size: var(--text-body); }
}

/* I WANT TO rail — the counter. Brass rules, parchment ground: it
   steps out of the navy monument because it is the one part of the
   hero addressed to a person rather than to the institution. */
/* Full-bleed: `.wantto` sits outside `.container` so its ground reaches
   both edges, while its own inner container keeps the links on the
   site's measure. */
.wantto {
  border-top: 2px solid var(--brass);
  background: var(--parchment);
}
.wantto-inner {
  display: flex; align-items: stretch; gap: 0;
}
.wantto-label {
  flex: none;
  display: flex; align-items: center;
  padding: 20px 24px 20px 0;
  font-family: var(--font-display);
  font-size: var(--text-label); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-ink);
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.wantto-link {
  flex: 1 0 auto;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 20px 24px;
  min-height: var(--target-min);
  color: var(--ink);
  font-weight: 600; font-size: 0.93rem;
  border-right: 1px solid var(--line);
  transition: color var(--dur-base), background-color 0.25s;
  white-space: nowrap;
}
.wantto-link:last-of-type { border-right: 0; }
.wantto-link .icon { width: 19px; height: 19px; color: var(--brass-ink); }
.wantto-link .icon-go { width: 15px; height: 15px; color: var(--ink-faint); margin-left: 2px; transition: transform 0.3s var(--ease-out), color 0.2s; }
.wantto-link:hover { color: var(--night); background: rgba(198, 150, 63, 0.14); }
.wantto-link:hover .icon-go { transform: translateX(4px); color: var(--brass-ink); }

/* -------------------------------------------- our commitment
   Three institutional guarantees, set as a ruled register rather than
   a card grid: a brass rule, a mark, a term, a definition. */
.commit-band { padding-top: clamp(40px, 5vw, 62px); padding-bottom: clamp(40px, 5vw, 62px); }
.commit-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-label); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass-ink);
}
.commit-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 52px);
}
.commit-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding-top: var(--space-4);
  border-top: 2px solid var(--brass);
}
.commit-icon { flex: none; display: inline-flex; color: var(--brass-ink); }
.commit-icon .icon { width: 24px; height: 24px; }
.commit-item h3 {
  margin: 0 0 5px;
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-h3); color: var(--ink);
  letter-spacing: -0.005em;
}
.commit-item p { margin: 0; font-size: var(--text-small); color: var(--ink-dim); line-height: 1.6; }

@media (max-width: 860px) {
  .commit-list { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ----------------------------------------------- court cards */
.carousel-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.carousel-nav { display: flex; gap: 10px; }
.carousel-nav .icon-btn[disabled] { opacity: 0.35; cursor: default; }

.courts-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(250px, 23vw, 300px);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 6px 6px 22px;
  margin: -6px -6px 0;
  scrollbar-width: none;
}
.courts-track::-webkit-scrollbar { display: none; }
.courts-track > * { scroll-snap-align: start; }

.court-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 24px 22px 56px;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color 0.3s;
}
.court-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  border-top-color: var(--brass-ink);
  box-shadow: var(--shadow-2);
}

.court-card-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 16px;
}
.court-card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brass-ink);
  transition: transform 0.4s var(--ease-out), color 0.3s;
}
.court-card-icon .icon { width: 30px; height: 30px; }
.court-card:hover .court-card-icon { transform: translateY(-2px); }
.court-card-title { font-family: var(--font-display); font-weight: 500; font-size: 1.28rem; margin-bottom: 8px; letter-spacing: -0.008em; }
.court-card-title a { color: var(--ink); }
.court-card-title a::after { content: ""; position: absolute; inset: 0; }
.court-card-text { color: var(--ink-dim); font-size: 0.9rem; margin: 0; }

.court-card-meta {
  list-style: none; margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: 7px;
  font-size: 0.82rem; color: var(--ink-dim);
}
.court-card-meta li { display: flex; align-items: center; gap: 9px; }
.court-card-meta .icon { width: 14px; height: 14px; color: var(--brass-ink); }

.card-arrow {
  position: absolute; left: 22px; bottom: 18px;
  display: inline-flex;
  color: var(--ink-faint);
  transition: color 0.25s, transform 0.35s var(--ease-out);
}
.court-card:hover .card-arrow { color: var(--brass-ink); transform: translateX(5px); }

/* --------------------------------------- news & quick access */
.home-news-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
}

.news-rows { display: grid; gap: 12px; }
.news-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 18px; align-items: center;
  padding: 13px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  transition: transform 0.35s var(--ease-out), border-color 0.25s, box-shadow 0.35s var(--ease-out);
}
.news-row:hover {
  transform: translateX(4px);
  border-color: var(--line-strong);
  border-left-color: var(--brass);
  box-shadow: var(--shadow-1);
}
.news-row-media {
  border-radius: var(--radius-sm); overflow: hidden; height: 88px;
}
.news-row-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.news-row:hover .news-row-media img { transform: scale(1.06); }
.news-row-title {
  display: block;
  color: var(--ink); font-weight: 600; font-size: 0.99rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-row-date { display: block; margin-top: 6px; color: var(--ink-faint); font-size: 0.82rem; }
.news-row-arrow { color: var(--ink-faint); transition: color 0.2s, transform 0.3s var(--ease-out); }
.news-row:hover .news-row-arrow { color: var(--brass-ink); transform: translateX(4px); }

.quick-panel { padding: clamp(20px, 2.6vw, 30px); border-top: 3px solid var(--brass); border-radius: 0 0 var(--radius) var(--radius); }
.quick-panel h3 {
  font-family: var(--font-display);
  font-weight: 500; font-size: 1.4rem; margin-bottom: 16px; color: var(--ink);
  letter-spacing: -0.008em;
}
.quick-links { display: grid; gap: 0; }
.quick-link {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 4px;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  /* The nudge on hover is a transform, not padding. Animating padding-left
     re-runs layout on every frame of every hover, on a list that appears on
     fifteen pages; translateX composites instead and lands in the same
     place. */
  transition: background-color 0.2s, color 0.2s, transform 0.25s var(--ease-out);
}
.quick-link:first-child { border-top: 0; }
.quick-link:hover {
  color: var(--night);
  background: rgba(198, 150, 63, 0.10);
  transform: translateX(6px);
}
.quick-link-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brass-ink);
}
.quick-link-icon .icon { width: 19px; height: 19px; }
.quick-link-label { flex: 1; font-weight: 600; font-size: 0.93rem; color: var(--ink); }
.quick-link-arrow { color: var(--ink-faint); display: inline-flex; transition: transform 0.3s var(--ease-out), color 0.2s; }
.quick-link:hover .quick-link-arrow { transform: translateX(3px); color: var(--brass-ink); }
.quick-link-arrow .icon { width: 15px; height: 15px; }

/* news cards (news page) */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
.news-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color 0.3s;
}
.news-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}
.news-card-media {
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 2px solid var(--brass);
}
.news-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.news-card:hover .news-card-media img { transform: scale(1.05); }
.news-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1; }
.news-card-meta {
  display: flex; align-items: center;
  margin: 0;
  color: var(--ink-faint); font-size: 0.82rem;
}
.news-card-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; line-height: 1.32; letter-spacing: -0.008em; }
.news-card-title a { color: var(--ink); }
.news-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.news-card-excerpt { margin: 0; color: var(--ink-dim); font-size: 0.9rem; flex: 1; }
.news-card .text-link { margin-top: 4px; position: relative; z-index: 2; }

/* ------------------------------------------ quote + stats band
   The second navy monument. */
.quote-band {
  position: relative;
  border-top: 2px solid var(--brass);
  border-bottom: 1px solid var(--navy-line);
  background: var(--night);
  color: var(--on-night);
  overflow: hidden;
}
.quote-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(760px 520px at 22% 40%, rgba(18, 55, 97, 0.7), rgba(0,0,0,0) 70%);
}
.quote-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.big-quote { position: relative; padding-left: clamp(20px, 3vw, 34px); margin: 0; }
.big-quote::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--brass), rgba(198, 150, 63, 0.06));
}
.big-quote .icon {
  width: 32px; height: 32px; color: var(--brass); opacity: 0.85;
  margin-bottom: 12px;
}
.big-quote p {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.95rem);
  font-style: italic; font-weight: 300;
  line-height: 1.4; color: #FBF6EC;
}
.big-quote cite {
  font-style: normal; font-size: 0.8rem; color: var(--brass);
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}

.stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--navy-line);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-cell {
  padding: clamp(20px, 2.6vw, 30px);
  background: rgba(10, 35, 64, 0.92);
  display: flex; flex-direction: column; gap: 4px;
}
.stat-n {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 400; line-height: 1; color: #FFFDF8;
  letter-spacing: -0.02em;
}
.stat-n sup { font-size: 0.5em; color: var(--brass); vertical-align: super; }
.stat-l {
  color: var(--brass); font-size: 0.74rem; font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* --------------------------------------------- generic cards */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.value-card {
  position: relative;
  padding: 24px 24px 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color 0.3s;
}
.value-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  border-top-color: var(--brass-ink);
  box-shadow: var(--shadow-2);
}
.value-card-title {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.15rem; margin-bottom: var(--space-2); color: var(--ink);
  letter-spacing: -0.008em;
}
.value-card-title .icon { width: 20px; height: 20px; color: var(--brass-ink); flex: none; }
.value-card-text { margin: 0; color: var(--ink-dim); font-size: 0.9rem; }

/* ------------------------------------- constitutional principles
   Structure comes from a numeral, an alignment line, and a hairline
   rule — not from six containers. */
.principle-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 72px);
}
.principle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
}
.principle-num {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600;
  line-height: 1.5;
  color: var(--brass-ink);
}
.principle-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-h3); color: var(--ink);
  letter-spacing: -0.005em;
}
.principle-text {
  margin: 0; max-width: 46ch;
  color: var(--ink-dim); font-size: var(--text-small); line-height: 1.6;
}

/* ------------------------------------------------ court services */
.service-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
}
.service-row { border-top: 2px solid var(--brass); padding-top: var(--space-4); }
.service-row-title {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-h3); color: var(--ink);
  letter-spacing: -0.005em;
}
.service-row-title .icon { width: 20px; height: 20px; color: var(--brass-ink); }
.service-row-text {
  margin: 0; color: var(--ink-dim); font-size: var(--text-small); line-height: 1.6;
}

.section-cta { margin-top: clamp(32px, 4vw, 48px); text-align: center; }

/* -------------------------------------------- vision / mission */
.tenet-list { display: grid; gap: clamp(28px, 4vw, 44px); max-width: var(--reading); }
.tenet { display: grid; gap: var(--space-3); }
.tenet-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-label); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-ink);
}
.tenet-text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.22rem, 2vw, 1.58rem);
  line-height: 1.5; color: var(--ink);
}

/* --------------------------------------------------- doc rows */
.doc-group { margin-bottom: clamp(30px, 4vw, 44px); }
.doc-group-title {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 500; font-size: 1.32rem; color: var(--ink);
  letter-spacing: -0.008em;
}
.doc-group-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--brass), rgba(198, 150, 63, 0));
}
.doc-list { display: grid; gap: 8px; }
.doc-row {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color 0.25s, background-color 0.25s, transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.doc-row:hover {
  border-color: var(--line-strong);
  border-left-color: var(--brass);
  transform: translateX(4px);
  box-shadow: var(--shadow-1);
}
.doc-row-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brass-ink);
}
.doc-row-icon .icon { width: 22px; height: 22px; }
.doc-row-main { flex: 1; min-width: 0; }
.doc-row-title { margin: 0 0 3px; font-size: 0.99rem; color: var(--ink); font-weight: 600; }
.doc-row-meta { margin: 0; color: var(--ink-faint); font-size: 0.82rem; }
.doc-row-actions { flex: none; display: flex; gap: 8px; }
.doc-registry {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-faint); font-size: 0.82rem; font-weight: 600;
}
.doc-registry:hover { color: var(--brass-ink); border-color: var(--brass); }
.doc-registry .icon { width: 15px; height: 15px; }

/* ---------------------------------------------------- alerts */
/* The accent is a rule along the top, not a tab down the side. It still
   carries the state — the variants below recolour it, and the icon matches —
   but it now reads as the same device the panels, cards and search field use,
   rather than the generic left-stripe callout that belongs to no particular
   product. The accented edge is square, as it is everywhere else. */
.alert {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 17px;
  margin-bottom: 20px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--ink-faint);
  background: var(--card);
  font-size: 0.93rem;
}
.alert-icon { display: inline-flex; margin-top: 2px; }
.alert-icon .icon { width: 19px; height: 19px; }
.alert-info    { border-top-color: var(--link); }
.alert-info    .alert-icon { color: var(--link); }
.alert-success { border-top-color: var(--leaf); background: var(--leaf-soft); }
.alert-success .alert-icon { color: var(--leaf); }
.alert-warning { border-top-color: var(--brick); background: var(--brick-soft); }
.alert-warning .alert-icon { color: var(--brick); }
.alert-body { color: var(--ink-dim); }
.alert-title { color: var(--ink); }

/* ------------------------------------------------- page hero
   Interior masthead — the third navy surface, shallower than the
   homepage aperture. */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + var(--topbar-h) + clamp(38px, 6vh, 66px)) 0 clamp(38px, 5.5vh, 58px);
  background: var(--night);
  color: var(--on-night);
  border-bottom: 2px solid var(--brass);
  overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(820px 520px at 72% 10%, rgba(18, 55, 97, 0.8), rgba(0,0,0,0) 70%);
}
.page-hero > .container { position: relative; }
.page-hero .eyebrow { color: var(--brass); }
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: end;
}
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 4.3vw, 3.3rem);
  font-weight: 400; line-height: 1.08;
  letter-spacing: -0.018em;
  color: #FFFDF8;
  margin: 0 0 14px;
  text-wrap: balance;
}
.page-hero-title em { font-style: italic; font-weight: 300; color: var(--brass-lit); }
.page-hero-lead { max-width: 62ch; color: var(--on-night-dim); font-size: 1.04rem; margin: 0; }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.page-hero-stats {
  display: grid; grid-template-columns: repeat(3, auto); gap: 1px;
  background: var(--navy-line);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  overflow: hidden;
  justify-self: end;
}
.page-stat {
  padding: 16px 20px;
  background: rgba(10, 35, 64, 0.92);
  display: flex; flex-direction: column; gap: 3px;
  min-width: 108px;
}
.page-stat-n {
  font-family: var(--font-display);
  font-weight: 400; font-size: 1.62rem; line-height: 1.05; color: #FFFDF8;
  letter-spacing: -0.015em;
}
.page-stat-l {
  font-size: 0.7rem; color: var(--brass);
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}

.breadcrumbs { margin-bottom: clamp(20px, 3.5vh, 34px); font-size: 0.84rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: 6px; color: var(--on-night-faint); }
.breadcrumbs li + li::before { content: "/"; color: var(--on-night-faint); opacity: 0.6; margin-right: 2px; }
.breadcrumbs a { color: var(--on-night-dim); }
.breadcrumbs a:hover { color: var(--brass-lit); }
.breadcrumbs [aria-current] span { color: var(--brass); font-weight: 600; }

/* --------------------------------------------- content + toc */
.content-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.toc {
  position: sticky; top: calc(var(--header-h) + 24px);
  padding: 18px 8px 18px 18px;
  max-height: calc(100vh - var(--header-h) - 48px);
  overflow-y: auto;
  border-top: 3px solid var(--brass);
  border-radius: 0 0 var(--radius) var(--radius);
}
.toc-label {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-ink);
}
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.toc a {
  display: block;
  padding: 7px 12px 7px 14px;
  border-left: 2px solid transparent;
  color: var(--ink-dim); font-size: 0.88rem; font-weight: 500;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.toc a:hover { color: var(--night); background: rgba(198, 150, 63, 0.10); }
.toc a.is-current {
  color: var(--brass-ink); font-weight: 600;
  border-left-color: var(--brass);
  background: rgba(198, 150, 63, 0.13);
}

/* --reading (68ch) lands around 78 real characters in Archivo. */
.prose { max-width: var(--reading); }
.prose h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.5vw, 2.05rem);
  letter-spacing: -0.012em;
  margin: 1.6em 0 0.55em;
  color: var(--ink);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.24rem; margin: 1.5em 0 0.5em; color: var(--ink); }
.prose h4 { font-size: 1.02rem; margin: 1.3em 0 0.4em; color: var(--ink); }
.prose p, .prose li { color: var(--ink-dim); }
.prose li { margin-bottom: 0.45em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 2px solid var(--brass);
}
.prose blockquote p {
  font-family: var(--font-display);
  font-size: 1.24rem; font-style: italic; font-weight: 300; color: var(--ink);
}
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }
.prose img { border-radius: var(--radius); }

.anchor-section { scroll-margin-top: calc(var(--header-h) + 30px); padding-top: 8px; }
.anchor-section + .anchor-section { margin-top: clamp(36px, 5vw, 56px); }

/* ----------------------------------------------------- steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.step {
  position: relative;
  display: flex; gap: 22px;
  padding: 22px 0 26px 0;
}
.step::before {
  content: ""; position: absolute; left: 23px; top: 70px; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--brass), rgba(198, 150, 63, 0.06));
}
.step:last-child::before { display: none; }
.step-n {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 47px; height: 47px;
  border-radius: 50%;
  border: 1px solid var(--brass);
  background: rgba(198, 150, 63, 0.12);
  color: var(--brass-ink);
  font-family: var(--font-display);
  font-size: 1.22rem; font-weight: 600;
}
.step-title { font-family: var(--font-display); font-weight: 500; margin: 10px 0 6px; font-size: 1.14rem; color: var(--ink); }
.step-text { color: var(--ink-dim); font-size: 0.93rem; max-width: var(--reading); }
.step-text p { margin-bottom: 0.5em; }
.step-text ul { margin: 0.4em 0 0.4em; }
.step-text li { margin-bottom: 0.3em; }

/* ------------------------------------------------- accordions */
.acc {
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--card);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.25s;
}
.acc[open] { border-color: var(--line-strong); border-left-color: var(--brass); }
.acc-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  color: var(--ink); font-weight: 600; font-size: 0.98rem;
  transition: color 0.2s;
}
.acc-q::-webkit-details-marker { display: none; }
.acc-q:hover { color: var(--brass-ink); }
.acc-marker {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  transition: transform 0.35s var(--ease-out), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.acc-marker .icon { width: 14px; height: 14px; }
.acc[open] .acc-marker { transform: rotate(45deg); background: var(--brass); border-color: var(--brass); color: var(--night); }
.acc-a { padding: 0 20px 18px; color: var(--ink-dim); font-size: 0.93rem; }
.acc-a p { margin: 0; }

/* ------------------------------------------------------ tabs */
.tabs { margin-top: 8px; }
.tab-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0;
}
.tab-btn {
  padding: 9px 18px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--ink-dim);
  font-size: 0.88rem; font-weight: 600;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
  min-height: var(--target-min);
}
.tab-btn:hover { color: var(--night); background: rgba(198, 150, 63, 0.10); }
.tab-btn[aria-selected="true"] {
  color: var(--brass-ink);
  border-bottom-color: var(--brass);
  background: transparent;
}
.tab-panel[hidden] { display: none; }

/* ----------------------------------------------------- forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.is-full { grid-column: 1 / -1; }
.form-field label { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.form-field label .req { color: var(--brick); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-faint); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(198, 150, 63, 0.25);
  background: #FFF;
}
.form-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2346566E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9.4 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 42px;
}
.form-field select option { background: var(--card); color: var(--ink); }
.form-field textarea { min-height: 140px; resize: vertical; }

/* The consent control gates the only form on the homepage. Padding lifts
   the whole label into a comfortable hit area. */
.check-label {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: var(--target-min);
  padding: var(--space-2) 0;
  color: var(--on-night-dim); font-size: 0.87rem;
  cursor: pointer;
}
.check-label input {
  width: 20px; height: 20px; margin-top: 1px;
  accent-color: var(--brass);
  flex: none;
}

/* ------------------------------------------- newsletter band
   The closing navy monument, sharing the footer's field. */
.newsletter-band {
  position: relative;
  padding: clamp(52px, 7vw, 84px) 0;
  border-top: 2px solid var(--brass);
  background: var(--night);
  color: var(--on-night);
  overflow: hidden;
}
.newsletter-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 420px at 80% 30%, rgba(18, 55, 97, 0.7), rgba(0,0,0,0) 70%);
}
.newsletter-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.newsletter-band .eyebrow { color: var(--brass); }
.newsletter-band .section-title { color: #FFFDF8; }
.newsletter-band .section-title em { color: var(--brass-lit); }
.newsletter-band .section-lead { color: var(--on-night-dim); }
.newsletter-copy .section-title { margin-bottom: 10px; }
.newsletter-copy .section-lead { margin: 0; }
.newsletter-form { display: grid; gap: 12px; }
.newsletter-row {
  display: flex; gap: 8px;
  padding: 6px;
  background: rgba(4, 14, 27, 0.55);
  border: 1px solid var(--navy-line-2);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.newsletter-row:focus-within { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(198, 150, 63, 0.2); }
.newsletter-row input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none;
  padding: 10px 12px;
  color: var(--on-night); font-size: 0.97rem;
}
.newsletter-row input::placeholder { color: var(--on-night-faint); }
.newsletter-band .alert { background: rgba(10, 35, 64, 0.8); border-color: var(--navy-line-2); }
.newsletter-band .alert-body { color: var(--on-night-dim); }
.newsletter-band .alert-title { color: var(--on-night); }

/* ---------------------------------------------------- footer
   The crest, which the previous design used as a 46px favicon, is set
   here at scale as a watermark — the emblem doing the work an emblem
   is for. */
.site-footer {
  position: relative;
  background: var(--night);
  color: var(--on-night-dim);
  padding-top: clamp(52px, 7vw, 84px);
  font-size: 0.92rem;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute; right: -70px; top: 50%;
  transform: translateY(-50%);
  width: min(460px, 46vw); aspect-ratio: 1;
  background: url("../img/logo.png") center / contain no-repeat;
  opacity: 0.045;
  filter: grayscale(1) brightness(3);
  pointer-events: none;
}
.site-footer > .container { position: relative; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr) 1.35fr;
  gap: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(40px, 6vw, 64px);
}
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand .brand-crest { width: 56px; height: 56px; }
.footer-about { color: var(--on-night-dim); font-size: 0.9rem; max-width: 34ch; }
.footer-social { display: flex; gap: 8px; list-style: none; margin: 20px 0 0; padding: 0; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--navy-line);
  color: var(--on-night-dim);
  transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.25s var(--ease-out);
}
.footer-social a:hover {
  color: var(--night); border-color: var(--brass);
  background: var(--brass);
  transform: translateY(-3px);
}
.footer-social .icon { width: 17px; height: 17px; }

.footer-col h3 {
  font-family: var(--font-display);
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--navy-line);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a {
  display: inline-flex; align-items: center;   /* transforms do not apply to inline boxes */
  min-height: 24px;                            /* WCAG 2.2 AA target size (2.5.8) */
  color: var(--on-night-dim); font-size: 0.9rem;
  transition: color 0.15s, transform 0.2s var(--ease-out);
}
.footer-col a:hover { color: var(--brass-lit); transform: translateX(4px); }

.footer-contact-list { display: grid; gap: 12px; }
.footer-contact-list li, .footer-contact-list a { display: flex; gap: 11px; align-items: flex-start; min-height: 24px; color: var(--on-night-dim); }
.footer-contact-list .icon { width: 16px; height: 16px; color: var(--brass); margin-top: 3px; }
.footer-contact .text-link { margin-top: 16px; }

.footer-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--navy-line);
  color: var(--on-night-faint); font-size: 0.84rem;
}
.footer-bar p { margin: 0; }
.footer-legal { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; align-items: center; }
.footer-legal a {
  color: var(--on-night-faint);
  display: inline-flex; align-items: center; min-height: 24px;
}
.footer-legal a:hover { color: var(--brass-lit); }

/* -------------------------------------------------- back top */
.back-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--night);
  border: 1px solid var(--brass);
  color: var(--brass);
  box-shadow: var(--shadow-2);
  transition: color 0.2s, background-color 0.2s, transform 0.3s var(--ease-out), opacity 0.3s;
}
.back-top:hover { color: var(--night); background: var(--brass); transform: translateY(-3px); }
.back-top .icon { width: 19px; height: 19px; }

/* ----------------------------------------------- reveal anim
   Scoped to .js so content stays visible when scripts fail. */
/* No `will-change` here. There are 167 `.reveal` elements across the site,
   and the hint was never released — js/main.js unobserves each element once
   it has appeared but nothing clears the CSS, so every one of them held a
   compositor layer for the life of the page. That is memory and compositor
   pressure on a mid-range phone in exchange for a one-shot fade that opacity
   and transform already composite cheaply. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* hero caption entrance — the active slide's statement rises as it fades
   in, re-running each time the slide changes. `backwards` fill states the
   finished position as the base, so if the animation never runs the
   caption is already in place, never stranded invisible. */
.js .hero .cine-slide.is-active .cine-eyebrow,
.js .hero .cine-slide.is-active .cine-title,
.js .hero .cine-slide.is-active .cine-lead,
.js .hero .cine-slide.is-active .cine-actions {
  animation: heroIn 0.8s var(--ease-out) backwards;
}
.hero .cine-slide.is-active .cine-title   { animation-delay: 0.06s; }
.hero .cine-slide.is-active .cine-lead    { animation-delay: 0.16s; }
.hero .cine-slide.is-active .cine-actions { animation-delay: 0.26s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } }

/* The arch does not draw itself on load, and neither does the emblem fade
   in. Both were tried and cut: the block already rises with the rest of
   the hero, so a second motion on the same element is one gesture too
   many, and a mark that only appears once a timer elapses is a mark that
   can fail to appear at all. A courthouse does not assemble itself when
   you walk up to it. One entrance, shared — then the page is still. */

/* page transition veil */
body { animation: pageIn 0.5s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body.is-leaving { opacity: 0; transition: opacity 0.22s ease; }

/* ------------------------------------------------ pagination */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: clamp(30px, 4vw, 48px);
}
.page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  color: var(--ink-dim); font-weight: 600; font-size: 0.9rem;
}
.page-link:hover { color: var(--night); border-color: var(--brass); background: rgba(198, 150, 63, 0.12); }
.page-link.is-current { background: var(--brass); color: var(--night); border-color: var(--brass); }

/* --------------------------------------------- misc sections */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.filter-btn {
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-dim);
  font-size: 0.87rem; font-weight: 600;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.25s var(--ease-out);
}
.filter-btn:hover { color: var(--night); border-color: var(--brass); background: rgba(198, 150, 63, 0.12); transform: translateY(-2px); }
.filter-btn.is-active {
  color: var(--night); background: var(--brass);
  border-color: var(--brass);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 26px 0;
}
.gallery-grid a {
  display: block; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
}
.gallery-grid img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease-out), filter 0.4s;
}
.gallery-grid a:hover img { transform: scale(1.05); filter: saturate(1.08); }

/* Square the edge the brass rule sits on, as every other accented surface
   here does (`border-radius: 0 0 …` on the panels, search field and cards).
   With all four corners rounded the 3px rule had to bend into the curve at
   both ends and thinned as it went. */
.article-hero-img {
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--brass);
  margin-bottom: clamp(26px, 4vw, 40px);
  box-shadow: var(--shadow-1);
}
.article-hero-img img { width: 100%; max-height: 520px; object-fit: cover; }

/* ------------------------------------------- content figures */
.figure {
  position: relative;
  margin: clamp(22px, 3vw, 32px) 0;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--brass);
  box-shadow: var(--shadow-1);
}
.figure img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.figure:hover img { transform: scale(1.02); }
.figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 20px 14px;
  background: linear-gradient(180deg, rgba(7,26,49,0) 0%, rgba(7,26,49,0.9) 72%);
  color: #E6DCC8;
  font-size: 0.85rem;
}
.figure-tall img { aspect-ratio: 16 / 10; }

/* portrait card — a person with a verified role */
.portrait-card {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
  padding: clamp(20px, 2.6vw, 30px);
}
.portrait-figure {
  margin: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--brass);
  box-shadow: var(--shadow-1);
}
.portrait-figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 18%;
}
.portrait-role {
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-ink);
  margin: 0 0 8px;
}
.portrait-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.2vw, 1.72rem);
  letter-spacing: -0.012em;
  color: var(--ink); margin: 0 0 10px;
}
.portrait-body { margin: 0; color: var(--ink-dim); font-size: 0.94rem; }

@media (max-width: 620px) {
  .portrait-card { grid-template-columns: 1fr; }
  .portrait-figure { max-width: 220px; }
}

/* ------------------------------------------------- bench portraits */
.bench-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 18px;
  margin-top: clamp(20px, 3vw, 30px);
}
.bench-member { margin: 0; }
.bench-photo {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  border-bottom: 2px solid var(--brass);
  box-shadow: var(--shadow-1);
  transition: border-color 0.3s, box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.bench-member:hover .bench-photo {
  border-color: var(--line-strong);
  border-bottom-color: var(--brass-ink);
  box-shadow: var(--shadow-2);
  transform: translateY(-4px);
}
.bench-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 15%;
  filter: grayscale(0.2) contrast(1.02);
  transition: filter 0.4s;
}
.bench-member:hover .bench-photo img { filter: none; }
.bench-member figcaption { padding: 12px 2px 0; }
.bench-name {
  display: block;
  color: var(--ink); font-weight: 600; font-size: 0.94rem; line-height: 1.35;
}
.bench-title {
  display: block; margin-top: 3px;
  color: var(--ink-faint); font-size: 0.78rem;
}

.share-row { display: flex; align-items: center; gap: 10px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.share-row span { color: var(--ink-faint); font-size: 0.86rem; font-weight: 600; margin-right: 6px; }

.contact-line { display: flex; gap: 14px; align-items: flex-start; }
.contact-line-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(198, 150, 63, 0.12);
  border: 1px solid rgba(198, 150, 63, 0.4);
  color: var(--brass-ink);
}
.contact-line-icon .icon { width: 19px; height: 19px; }
.contact-line-label { display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: 2px; }
.contact-line-value { color: var(--ink); font-size: 0.96rem; }
.contact-line-value a { color: var(--ink); }
.contact-line-value a:hover { color: var(--brass-ink); }

/* hierarchy diagram (courts page) */
.hierarchy { display: grid; gap: 14px; max-width: 720px; margin: 0 auto; }
.hier-tier { position: relative; text-align: center; }
.hier-tier + .hier-tier::before {
  content: ""; position: absolute; top: -14px; left: 50%;
  width: 1px; height: 14px;
  background: var(--brass);
}
.hier-node {
  display: inline-block;
  padding: 13px 24px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--brass);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--ink); font-weight: 600; font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.3s, transform 0.3s var(--ease-out);
}
a.hier-node:hover { border-color: var(--brass); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.hier-node small { display: block; margin-top: 2px; color: var(--ink-faint); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.hier-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* 404 */
.error-hero { min-height: 70vh; display: flex; align-items: center; text-align: center; padding-top: var(--header-h); }
.error-code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 11rem);
  line-height: 1; font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--vellum-2);
  margin-bottom: 8px;
}

/* ------------------------------------------------ responsive */
@media (max-width: 1160px) {
  .main-nav .nav-link { padding: 10px 9px; font-size: 0.87rem; }
}

@media (max-width: 1020px) {
  .main-nav { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-cta { display: none; }

  /* The image hero stays tall on a narrow screen — it is the whole hero,
     not a panel beside a column. */
  .hero { min-height: 82vh; }

  .home-news-grid { grid-template-columns: 1fr; }
  .quote-inner { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .content-layout { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; order: -1; padding: 16px 18px; }
  .toc ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .toc a { border-left: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 14px; font-size: 0.82rem; }
  .toc a.is-current { border-color: var(--brass); }

  .page-hero-grid { grid-template-columns: 1fr; align-items: start; }
  .page-hero-stats { justify-self: start; }

  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  /* minmax(0, 1fr) lets the column go narrower than its contents'
     natural width — the nowrap Subscribe button was pushing the
     document to 359px inside a 320px viewport. */
  .newsletter-inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* Four items fit a 2x2 grid, so nothing needs hiding behind a
     horizontal scroll with no affordance. */
  .wantto-inner { display: grid; grid-template-columns: repeat(2, 1fr); }
  .wantto-label {
    grid-column: 1 / -1;
    padding: 15px 0 11px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .wantto-link { white-space: normal; border-bottom: 1px solid var(--line); }
  .wantto-link:nth-of-type(even) { border-right: 0; }
}

@media (max-width: 700px) {
  :root { --header-h: 66px; }

  .topbar-motto { display: none; }
  .topbar-inner { justify-content: center; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  .principle-list { grid-template-columns: 1fr; }
  .service-list { grid-template-columns: 1fr; }

  /* 24px clears WCAG 2.2 AA, but the footer is exactly where a
     thumb-scrolling visitor ends up. Give it a real touch target. */
  .footer-col ul { gap: var(--space-1); }
  .footer-col a,
  .footer-contact-list a {
    display: flex; align-items: center;
    min-height: var(--target-min);
  }

  .wantto-inner { grid-template-columns: 1fr; }
  .wantto-link { border-right: 0; }
  .wantto-link:last-of-type { border-bottom: 0; }

  /* let the kicker flow as normal text instead of a flex row that
     breaks between the name and the descriptor */
  .hero-kicker { display: block; font-size: var(--text-label); letter-spacing: 0.16em; }
  .hero-kicker::before { display: none; }

  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .wantto-label { padding-right: 18px; }
  .wantto-link { padding: 16px 18px; }

  .news-row { grid-template-columns: 96px minmax(0, 1fr); }
  .news-row-arrow { display: none; }
  .news-row-media { height: 72px; }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .page-hero-stats { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .page-stat { min-width: 0; padding: 14px 14px; }

  .doc-row { flex-wrap: wrap; }
  .doc-row-actions { width: 100%; padding-left: 38px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-bar { flex-direction: column; text-align: center; }
  .site-footer::before { width: 300px; right: -110px; opacity: 0.035; }

  .search-overlay { padding-top: 70px; }
  .back-top { right: 14px; bottom: 14px; }
}

@media (max-width: 420px) {
  .brand-name { font-size: 0.92rem; letter-spacing: 0.09em; }
  .brand-crest { width: 42px; height: 42px; }
  .footer-grid { grid-template-columns: 1fr; }

  /* At 320px the input and a nowrap Subscribe button cannot share a row
     and still leave a usable typing area. Stack them. */
  .newsletter-row { flex-wrap: wrap; }
  .newsletter-row input { flex: 1 0 100%; }
  .newsletter-row .btn { width: 100%; }

  /* The courts carousel controls sat past the right edge at 320. */
  .carousel-head { flex-wrap: wrap; }
}

/* --------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    transition-duration: 0.001s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  /* The hero caption is present, not animated in; the slide swap is
     instant and the photograph does not drift. The controller also
     honours this flag and never starts autoplay. */
  .js .hero .cine-slide.is-active .cine-eyebrow,
  .js .hero .cine-slide.is-active .cine-title,
  .js .hero .cine-slide.is-active .cine-lead,
  .js .hero .cine-slide.is-active .cine-actions { animation: none; }
  .cine-slide.is-active .cine-media img { animation: none; }
  .cine-slide { transition: none; }
}