/* ==========================================================================
   MILLIKAN LAW OFFICE — site prototype stylesheet
   Internal design prototype under designs/site/. Not part of the build;
   never deployed. Extracted from designs/design-d6-merged.html (the frozen
   single-file merge, kept as the parity oracle) — the homepage half of this
   file is D6's stylesheet with three deliberate changes:
   · .site-bar is now .site-bar. On inner pages it is the header at every
     width; the homepage copy carries .site-bar--home and still hides at
     ≥62em, where the nav lives in the photo notch.
   · the sticky call bar's body padding applies only to pages that have a
     call bar (thank-you does not).
   · the scroll-driven reveal is gone: site.js fades data-reveal blocks in
     (see Reveal), and the menu has a close state (see Menu).
   The inner-page components (page hero, article/prose/TOC, link cards, CTA
   band, team cards, testimonials list, field grid) follow the homepage
   rules, before the footer and the reduced-motion block.
   Brand rules carried over: Georgia regular at ≥20px only, Helvetica body,
   one brass accent per view, no gradients (the notch's hard-stop radial is
   a drawing primitive), no pure black.
   ========================================================================== */

:root {
  --brand-navy:  #1D446D;
  --navy-deep:   #0E2137;
  --ink:         #131311;
  --brass:       #A67C2E;
  --paper-warm:  #F7F6F3;
  --canvas:      #EDECE8;
  --paper:       #FFFFFF;
  --brass-tint:  #F3E8CE;
  --brass-bright: #C9A24A;  /* gold on navy: stars and quote marks (24 Sep 2026) */
  --text-body:   #2A2A26;
  --text-muted:  #5C5C55;
  --hairline:    #E4E3DD;
  --on-navy-muted: #C7D0DA;

  --font-display: Georgia, 'Times New Roman', serif;
  --font-body:    Helvetica, Arial, sans-serif;

  --radius-pill:  999px;
  --radius-card:  20px;
  --radius-photo: 26px;
  --radius-field: 14px;

  --shadow-card:  0 2px 6px rgba(19, 19, 17, 0.08);
  --shadow-lift:  0 6px 16px rgba(19, 19, 17, 0.10);

  --motion: 220ms ease;
  --motion-slow: 600ms cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --wrap:    1180px;
  --measure: 66ch;
  --gutter:  clamp(1.25rem, 5vw, 3rem);

  --logo-w: 240px;
  --logo-ratio: 0.2278;
  --logo-clear: calc(var(--logo-w) * var(--logo-ratio));

  /* Radius of the concave fillets where the nav tab meets the photo. */
  --notch: 26px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper-warm);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
::selection { background: var(--brass-tint); color: var(--ink); }
h1, h2, h3, p, figure, figcaption, address, dl { margin: 0; }
address { font-style: normal; }
ul { margin: 0; padding: 0; list-style: none; }

/* --- Type --- */
.display-1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 7.5vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--text-body);
  max-width: 15ch;
  text-wrap: balance;
}
.heading-1 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.75rem, 4.4vw, 2.875rem);
  line-height: 1.109;
  letter-spacing: -0.005em;
  color: var(--text-body);
  text-wrap: balance;
}
.lead {
  font-size: clamp(1.125rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  max-width: var(--measure);
  text-wrap: pretty;
}
.body { font-size: 17px; line-height: 28px; max-width: var(--measure); }
.eyebrow, .label {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

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

/* --- Links, focus --- */
a { color: var(--brand-navy); text-decoration: none; transition: color var(--motion); }
a:hover { color: var(--navy-deep); text-decoration: underline; }
/* No border-radius here: `a:focus-visible` outweighs `.btn`, which would
   flatten every pill to a 2px rectangle for keyboard users. Outlines already
   follow each element's own radius. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}
/* A link inside running text needs a cue beyond colour: navy on the body
   colour is under 3:1 (WCAG 1.4.1, Lighthouse "link-in-text-block"). Pills,
   chips, cards, arrow links and standalone phone numbers carry their own
   affordance and are left alone. */
.prose p a:not(.arrow-link), .prose li a:not(.link-card), .lead a, .body a, .faq__body a,
.section-head__note a, .hero__proof a, .card__body a, .step__body a,
.intake__note a, .side-card__body a, .cta__body a, .footer__address a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: rgba(29, 68, 109, 0.45);
}
.prose p a:not(.arrow-link):hover, .prose li a:not(.link-card):hover, .lead a:hover, .body a:hover,
.faq__body a:hover, .section-head__note a:hover, .hero__proof a:hover,
.footer__address a:hover { text-decoration-color: currentColor; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--paper); color: var(--brand-navy);
  padding: 0.75rem 1.25rem; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
}
.skip-link:focus { left: var(--gutter); top: 0.75rem; }

/* --- Layout --- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.band { background: var(--canvas); }
.band > .wrap { padding-block: clamp(3.5rem, 8vw, 6rem); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.5rem 0.5rem 1.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;   /* a pill button never wraps to a second line */
  transition: background-color var(--motion), transform var(--motion), box-shadow var(--motion);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-card); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: #0B0B0A; color: var(--paper); }
.btn--secondary { background: var(--brand-navy); color: var(--paper); }
.btn--secondary:hover { background: var(--navy-deep); color: var(--paper); }
.btn__disc {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  display: grid;
  place-content: center;
}
.btn__disc svg { transition: transform var(--motion); }
.btn:hover .btn__disc svg { transform: translate(1.5px, -1.5px); }
.btn--primary .btn__disc { background: var(--paper); color: var(--ink); }
.btn--secondary .btn__disc { background: var(--paper); color: var(--brand-navy); }

/* --- Menu ------------------------------------------------------------------
   The MENU pill opens a full-page sheet of deep-navy glass: the whole page
   frosts over in brand navy, type reverses to paper (10:1+), oversized
   numbered links, the office details at the foot. Pure <details> underneath
   — the script only adds polish (Esc, backdrop click, scroll lock). While
   open, the summary pins to the top-right of the viewport as the close
   control, its bars folded into a cross. */
.menu { position: relative; }
.menu summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--paper);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-pill);
  padding: 0.8125rem 1.25rem;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-body);
  transition: box-shadow var(--motion), transform var(--motion);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.menu summary:active { transform: translateY(0); }
.menu__bars { width: 16px; display: grid; gap: 3px; }
.menu__bars span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--motion), opacity var(--motion);
}
.menu[open] .menu__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu[open] .menu__bars span:nth-child(2) { opacity: 0; }
.menu[open] .menu__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.menu__word--close { display: none; }
.menu[open] .menu__word--open { display: none; }
.menu[open] .menu__word--close { display: inline; }

/* While open, the close pill lives at the viewport's top-right — not at
   whatever spot the trigger happened to occupy. */
.menu[open] summary {
  position: fixed;
  top: 1.25rem;
  right: var(--gutter);
}

.menu__overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(14, 33, 55, 0.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  animation: overlay-in 280ms ease both;
}
/* backdrop-filter fallback: near-opaque navy keeps the text separated. */
@supports not (backdrop-filter: blur(20px)) {
  .menu__overlay { background: rgba(14, 33, 55, 0.98); }
}
@keyframes overlay-in { from { opacity: 0; } }
/* Close: the glass fades out under .menu--closing (site.js adds it, then
   closes the <details> when the fade ends); the pill morphs back during
   the fade rather than after it. The [open] rules above stay as they are. */
@keyframes overlay-out { to { opacity: 0; } }
.menu.menu--closing .menu__overlay { animation: overlay-out 200ms ease both; }
.menu[open].menu--closing .menu__bars span { transform: none; opacity: 1; }
.menu[open].menu--closing .menu__word--open { display: inline; }
.menu[open].menu--closing .menu__word--close { display: none; }

.menu__sheet {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(6rem, 14vh, 9rem) var(--gutter) 3rem;
  display: grid;
}
.menu__sheet > * { animation: fade-up 480ms var(--ease-out) both; }
/* Released after the entrance (backwards, not both): a forwards fill would
   keep transform: none applied and silence .menu__link:hover's slide. */
.menu__sheet > * { animation-fill-mode: backwards; }
.menu__sheet > :nth-child(1) { animation-delay: 60ms; }
.menu__sheet > :nth-child(2) { animation-delay: 110ms; }
.menu__sheet > :nth-child(3) { animation-delay: 160ms; }
.menu__sheet > :nth-child(4) { animation-delay: 210ms; }
.menu__sheet > :nth-child(5) { animation-delay: 260ms; }
.menu__sheet > :nth-child(6) { animation-delay: 320ms; }
.menu__sheet > :nth-child(7) { animation-delay: 370ms; }
.menu__sheet > :nth-child(8) { animation-delay: 420ms; }
.menu__sheet > :nth-child(9) { animation-delay: 470ms; }
.menu__sheet > :nth-child(10) { animation-delay: 520ms; }

.menu__eyebrow {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-navy-muted);
  margin-bottom: 1.5rem;
}
.menu__link {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  font-family: var(--font-body);
  font-size: clamp(1.875rem, 4.6vw, 2.75rem);
  line-height: 1.15;
  color: var(--paper);
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  transition: transform var(--motion);
}
.menu__link:hover {
  color: var(--paper);
  text-decoration: none;
  transform: translateX(8px);
}
.menu__no {
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--on-navy-muted);
  min-width: 1.75rem;
}
.menu__meta { margin-top: 2.75rem; }
.menu__phone { font-size: 20px; line-height: 28px; color: var(--paper); }
.menu__phone:hover { color: var(--paper); }
.menu__addr { font-size: 14px; line-height: 22px; color: var(--on-navy-muted); margin-top: 0.375rem; }
/* Both selectors: iOS Safari historically ignores overflow on <html> alone. */
html.menu-open, html.menu-open body { overflow: hidden; }

/* --- Site header bar --------------------------------------------------------
   A conventional top bar: small lockup left, phone and MENU right. Inner
   pages use it at every width. On the homepage (.site-bar--home) the photo
   and its tab sit under the text below 62em, so the bar carries the nav
   there; at desktop it disappears and the nav moves into the photo notch. */
.site-bar { background: var(--paper-warm); }
.site-bar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem;
}
.site-bar__logo img { width: 200px; min-width: 180px; height: auto; }
.site-bar__links { display: flex; align-items: center; gap: 1rem; }
.site-bar__phone { display: none; font-size: 17px; line-height: 28px; white-space: nowrap; }
@media (min-width: 40em) { .site-bar__phone { display: inline; } }
@media (min-width: 62em) {
  .site-bar--home { display: none; }
  .site-bar:not(.site-bar--home) .wrap { padding-block: 1.5rem; }
  .site-bar:not(.site-bar--home) .site-bar__logo img { width: var(--logo-w); }
}

/* --- Hero ------------------------------------------------------------------
   At desktop there is no separate header: the lockup tops the left column,
   and the nav lives in the tab notched into the photo's top-left corner. */
.hero { background: var(--paper-warm); }
.hero .wrap { padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(3.5rem, 8vw, 6rem); }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: stretch;
}
.hero__left { display: flex; flex-direction: column; }
.logo { padding: var(--logo-clear) 0; display: none; }
@media (min-width: 62em) { .logo { display: block; } }
.logo__img { width: var(--logo-w); min-width: 180px; height: auto; }
.hero__inner { margin-block: auto; padding-block: 1.5rem; }
.hero__inner > * + * { margin-top: 1.375rem; }

/* Entrance: the hero settles in with a quiet stagger. The global
   reduced-motion rule collapses all of this to a static render. */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.hero__inner > * { animation: fade-up 600ms var(--ease-out) both; }
.hero__inner > :nth-child(1) { animation-delay: 60ms; }
.hero__inner > :nth-child(2) { animation-delay: 110ms; }
.hero__inner > :nth-child(3) { animation-delay: 160ms; }
.hero__inner > :nth-child(4) { animation-delay: 230ms; }
.hero__inner > :nth-child(5) { animation-delay: 320ms; }
.hero__inner > :nth-child(6) { animation-delay: 400ms; }
/* The photograph and name bar animate individually — never their ancestors.
   An animated ancestor of the menu (even a filled opacity animation) would
   become the overlay's backdrop root, and the frosted glass would blur only
   the photo instead of the whole page. */
@keyframes fade-in { from { opacity: 0; } }
.hero__img { animation: fade-in 700ms var(--ease-out) 180ms both; }
.hero__name { animation: fade-up 600ms var(--ease-out) 380ms both; }

/* --- Reveal ----------------------------------------------------------------
   Blocks marked data-reveal fade up once: those on screen at load in a
   stagger behind the hero, the rest as they scroll in. site.js does the
   timing (an IntersectionObserver, as for the call bar); the one-line
   gate in <head> adds html.js before first paint and removes it after 4s
   if the script never runs, so nothing is ever hidden without the script.
   Reduced motion and print never see the hidden state.
   A transition, not a keyframe: once it ends nothing lingers, so hover
   transforms inside a revealed block keep working and no filled opacity
   ancestor can become the menu's backdrop root. Targets are containers
   with no transition of their own (.review, .link-card, .card__media and
   .btn are never targets; this shorthand would replace theirs) and never
   an ancestor of the menu — check.py enforces both. */
[data-reveal] {
  transition: opacity var(--motion-slow) var(--reveal-delay, 0s),
              transform var(--motion-slow) var(--reveal-delay, 0s);
}
@media screen and (prefers-reduced-motion: no-preference) {
  html.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(14px); }
}
.brass-rule {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--brass);
  margin-bottom: 1.75rem;
}
.hero__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
/* Trust line: the Google rating sits directly under the CTAs. */
.hero__proof {
  margin-top: 1.25rem;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-muted);
}

/* On small screens the media block (photo + tab) simply follows the text;
   the tab still notches into the photo's top-left. The radius lives on the
   image, not an overflow-hidden container, so the menu dropdown is never
   clipped. */
.hero__media { position: relative; }
.hero__photo {
  position: relative;
  aspect-ratio: 3 / 4;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: var(--radius-photo);
}

/* The page-coloured tab holding the nav, notched into the photo's top-left.
   Two pseudo-elements paint the concave fillets. Each is a hard-stop radial
   — a drawing primitive for a solid curve, not a colour gradient: inside
   the quarter-circle it is fully transparent (photo shows through), outside
   it is solid page colour. Unlike a box-shadow fillet, nothing bleeds back
   over the tab's own content. */
.hero__tab {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--paper-warm);
  padding: 0 1.25rem 1.25rem 0;
  border-bottom-right-radius: calc(var(--notch) + 6px);
  display: none;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 62em) { .hero__tab { display: flex; } }
.hero__tab::before,
.hero__tab::after {
  content: "";
  position: absolute;
  width: var(--notch);
  height: var(--notch);
  pointer-events: none;
  background: radial-gradient(circle at 100% 100%,
    rgba(247, 246, 243, 0) calc(var(--notch) - 0.5px),
    var(--paper-warm) calc(var(--notch) - 0.5px));
}
.hero__tab::before { top: 100%; left: 0; }
.hero__tab::after { top: 0; left: 100%; }
/* The tab itself only exists at ≥62em, so the phone can simply show. */
.hero__tab-phone { font-size: 17px; line-height: 28px; white-space: nowrap; }

/* The attorney's name as a frosted strip riding the photo's lower edge —
   the same treatment as the practice-card title bars. The identity line is
   from Brian's own promo narration. */
.hero__name {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 0.875rem 1.25rem;
}
.hero__name-title { font-size: 19px; line-height: 1.4; color: var(--text-body); }
.hero__name-role { font-size: 14px; line-height: 22px; color: var(--text-body); margin-top: 0.125rem; }

@media (min-width: 62em) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
    gap: 4rem;
  }
  .hero__photo { aspect-ratio: auto; height: 100%; min-height: 640px; }
  .hero__img { height: 100%; }
}

/* --- Chips, section heads --- */
.chip {
  display: inline-block;
  background: var(--paper);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.6875rem 1.0625rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  margin-bottom: 1.375rem;
  transition: box-shadow var(--motion), color var(--motion);
}
a.chip:hover { color: var(--brand-navy); text-decoration: none; box-shadow: var(--shadow-lift); }
.section-head { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-bottom: 2.75rem; }
.section-head__note { font-size: 17px; line-height: 28px; color: var(--text-muted); max-width: 44ch; text-wrap: pretty; }
@media (min-width: 62em) {
  .section-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    gap: 4rem;
    align-items: end;
  }
}

/* --- Practice tiles ---------------------------------------------------------
   Square photographs at the photography radius, set directly on the canvas
   band — no card chrome. The frosted title bar rides each photo's lower
   edge; the body copy sits beneath in the open. */
.cards { display: grid; gap: 2.5rem 1.5rem; grid-template-columns: 1fr; }
.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-photo);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  transition: transform var(--motion-slow);
}
.card__media:hover .card__img { transform: scale(1.03); }
.card__media:hover .card__bar { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card__media:hover .card__bar-disc svg { transform: translate(1.5px, -1.5px); }

/* The reference's frosted title bar: a blurred translucent strip across the
   photo's lower edge carrying the title and an arrow disc (a preview of the
   practice-page link the full site will have). */
.card__bar {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.625rem 0.625rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
  transition: transform var(--motion), box-shadow var(--motion);
}
.card__bar-title {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--text-body);
}
.card__bar-disc {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  display: grid;
  place-content: center;
}
.card__bar-disc svg { transition: transform var(--motion); }
.card__text { padding: 1.25rem 0.25rem 0; }
.card__body { font-size: 17px; line-height: 28px; color: var(--text-body); max-width: var(--measure); text-wrap: pretty; }
@media (min-width: 62em) { .cards { grid-template-columns: repeat(3, 1fr); } }
/* A tile whose photograph is the link to its page. */
a.card__media { display: block; color: inherit; }
a.card__media:hover { text-decoration: none; color: inherit; }
/* Two related areas beside each other, held to a width that keeps the
   squares from becoming posters. */
.cards--two { max-width: 52rem; }
@media (min-width: 62em) { .cards--two { grid-template-columns: repeat(2, 1fr); } }

/* --- Video band --- */
/* Every anchor target lands with a little air above it. */
main section[id] { scroll-margin-top: 1rem; }

.videoband { background: var(--paper-warm); }
.videoband > .wrap { padding-block: clamp(3.5rem, 8vw, 6rem); }
.videoband__transcript { margin-top: 1rem; }
.video-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-photo);
  overflow: hidden;
  background: var(--canvas);
  box-shadow: var(--shadow-card);
}
.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The homepage film casts a small, heavily blurred copy of its current frame
   across the whole navy section, and the text sits directly on it. The wash
   is capped instead of backed: what shows is
   navy + opacity × (1 − tint) × (frame − navy), and a pure white frame is the
   brightest thing that can appear, so at these values white text never drops
   below 4.8:1 (desktop), 5.1:1 (tablet) or 5.4:1 (small). Re-run that worst
   case before raising an opacity or lowering a tint. */
.videoband[data-ambient-video] {
  --ambient-opacity: 0.37;
  --ambient-blur: 64px;
  --ambient-bleed: 144px;
  --ambient-tint: 0.30;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--brand-navy);
  color: var(--paper);
}
.videoband[data-ambient-video] > .wrap {
  position: relative;
  z-index: 1;
}
.videoband[data-ambient-video] .heading-1,
.videoband[data-ambient-video] .section-head__note,
.videoband[data-ambient-video] .videoband__transcript a { color: var(--paper); }
.videoband[data-ambient-video] .videoband__transcript a:hover { color: var(--paper); }
.videoband[data-ambient-video] .videoband__transcript a:focus-visible,
.videoband[data-ambient-video] .video-ambient__toggle:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--navy-deep);
}
.video-stage { position: relative; z-index: 1; }
.video-ambient {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 600ms ease;
}
.video-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(29 68 109 / var(--ambient-tint));
}
.video-ambient__canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: calc(100% + var(--ambient-bleed) + var(--ambient-bleed));
  height: calc(100% + var(--ambient-bleed) + var(--ambient-bleed));
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translate(-50%, -50%);
  filter: blur(var(--ambient-blur)) saturate(0.90);
}
.videoband.is-ambient-visible .video-ambient {
  opacity: var(--ambient-opacity);
  transition-duration: 450ms;
}
.videoband__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-top: 1rem;
}
.videoband__meta .videoband__transcript { margin-top: 0; }
/* The Ambient lighting switch rides in the player's top-right corner, clear of
   the native controls along the bottom. Like those controls it shows before
   play, while paused, and while the pointer or focus is on the player; it is
   never hidden while it holds focus itself. */
.video-ambient__toggle {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: var(--radius-pill);
  padding: 0.625rem 0.75rem 0.625rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--navy-deep);
  color: var(--paper);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(14, 33, 55, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.video-stage.is-chip-visible .video-ambient__toggle,
.video-ambient__toggle:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.video-ambient__toggle[hidden] { display: none; }
.video-ambient__toggle:hover { border-color: var(--paper); }
.video-ambient__toggle[aria-disabled="true"] { cursor: default; }
.video-ambient__state {
  min-width: 2.7rem;
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.55rem;
  background: var(--paper);
  color: var(--navy-deep);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}
.video-ambient__toggle[aria-pressed="false"] .video-ambient__state {
  background: transparent;
  color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}
/* Shown only when the wash is unavailable, so it always sits on plain navy. */
.video-ambient__motion-note {
  max-width: 30ch;
  color: var(--on-navy-muted);
  font-size: 13px;
  line-height: 1.4;
  text-align: right;
}
@media (min-width: 40em) and (max-width: 63.99em) {
  .videoband[data-ambient-video] {
    --ambient-opacity: 0.36;
    --ambient-blur: 44px;
    --ambient-bleed: 104px;
    --ambient-tint: 0.34;
  }
}
@media (max-width: 39.99em) {
  .videoband[data-ambient-video] {
    --ambient-opacity: 0.35;
    --ambient-blur: 32px;
    --ambient-bleed: 80px;
    --ambient-tint: 0.38;
  }
  .video-ambient__canvas { filter: blur(var(--ambient-blur)) saturate(0.85); }
  /* A phone-width player is under 200px tall, so the switch shrinks to
     "Ambient · On"; the full name stays for assistive tech, and the hit
     area is padded back out to 44px. */
  .video-ambient__toggle {
    top: 0.5rem;
    right: 0.5rem;
    min-height: 36px;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    gap: 0.5rem;
    font-size: 13px;
  }
  /* Measured from the padding box inside the 1px border: 34 + 2 × 5 = 44px. */
  .video-ambient__toggle::before { content: ""; position: absolute; inset: -5px; }
  .video-ambient__state { min-width: 2.25rem; padding: 0.4rem 0.45rem; font-size: 11px; }
  .video-ambient__label-rest {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .videoband__meta { display: grid; }
  .video-ambient__motion-note { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .videoband[data-ambient-video] .video-ambient { display: none; }
}
@media (forced-colors: active) {
  .videoband[data-ambient-video] { background: Canvas; color: CanvasText; }
  .videoband[data-ambient-video] .section-head,
  .videoband[data-ambient-video] .videoband__meta { background: Canvas; }
  .videoband[data-ambient-video] .heading-1,
  .videoband[data-ambient-video] .section-head__note,
  .videoband[data-ambient-video] .videoband__transcript a,
  .video-ambient__motion-note { color: CanvasText; }
  .videoband[data-ambient-video] .chip {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: auto;
  }
  .video-ambient { display: none; }
  .video-ambient__toggle { background: ButtonFace; color: ButtonText; border-color: ButtonText; forced-color-adjust: auto; }
  .video-ambient__state { background: ButtonFace; color: ButtonText; box-shadow: inset 0 0 0 1px ButtonText; }
}
@media print {
  .videoband[data-ambient-video] { background: none; color: var(--text-body); }
  .videoband[data-ambient-video] .section-head,
  .videoband[data-ambient-video] .videoband__meta { background: none; }
  .videoband[data-ambient-video] .heading-1,
  .videoband[data-ambient-video] .section-head__note,
  .videoband[data-ambient-video] .videoband__transcript a { color: var(--text-body); }
  .video-ambient, .video-ambient__toggle, .video-ambient__motion-note { display: none; }
  .video-stage .video-frame { box-shadow: none; }
}

/* --- Intake strip -----------------------------------------------------------
   The low-friction ask, immediately after the hero: four fields (name,
   email, phone, message — Brian wants both contact routes), an
   expectation-setting note, and the phone number for people who would
   rather talk. The free first consultation lives in the FAQ. */
.intake { background: var(--paper-warm); }
.intake > .wrap { padding-block: 0 clamp(3rem, 6vw, 4.5rem); }
.intake-panel {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: grid;
  gap: 2.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 62em) {
  .intake-panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3.5rem; }
}
.intake__title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.intake__aside > * + * { margin-top: 1rem; }
.intake__aside .label { display: block; margin-bottom: 0.25rem; }
.intake__phone { font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.3; }
.intake__note { font-size: 17px; line-height: 28px; color: var(--text-body); text-wrap: pretty; }
.intake__fact { font-size: 14px; line-height: 22px; color: var(--text-muted); text-wrap: pretty; }
/* A photograph of the work takes the space under the note at desktop, where
   the form column runs long, and ends level with the form. Below 62em the
   aside follows the form and has no space to fill, so the photo stands down
   (it is lazy, so a phone never fetches it). */
.intake__photo { display: none; }
@media (min-width: 62em) {
  .intake__aside { display: flex; flex-direction: column; }
  .intake__photo { display: block; position: relative; flex: 1 1 0; min-height: 16rem; margin: 1.75rem 0 0; }
  .intake__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    border-radius: var(--radius-photo);
  }
}

/* --- Steps strip ------------------------------------------------------------
   What happens when you reach out — three plain steps that lower the
   barrier to a first call. */
.steps { background: var(--paper-warm); }
.steps > .wrap { padding-block: 0 clamp(3.5rem, 8vw, 6rem); }
.steps__heading {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}
.steps__grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--hairline);
  list-style: none;
  margin: 0;
  padding: 1.75rem 0 0;
}
@media (min-width: 62em) { .steps__grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.step__no {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--text-muted);
  margin-bottom: 0.625rem;
}
.step__title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.4;
  color: var(--brand-navy);
  margin-bottom: 0.5rem;
}
.step__body { font-size: 17px; line-height: 28px; color: var(--text-body); text-wrap: pretty; }

/* --- Sticky call bar (mobile) -----------------------------------------------
   Mobile converts materially worse than desktop; the countermeasure is a
   call action that never scrolls away. It stays hidden until the hero's
   own two CTAs have scrolled out of view — otherwise the first screen
   shows the same two actions twice. Hidden at desktop widths; sits under
   the menu frost when the menu is open. */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem calc(0.625rem + env(safe-area-inset-bottom));
  background: rgba(247, 246, 243, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--hairline);
  transform: translateY(101%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--motion), opacity var(--motion), visibility var(--motion);
}
.callbar.is-visible { transform: none; opacity: 1; visibility: visible; }

/* Tighter chrome and a smaller label than a full-size pill: two of these
   share a phone's width, and they must never wrap to a second line. */
.callbar .btn {
  flex: 1;
  min-width: 0;
  justify-content: space-between;
  font-size: 15px;
  letter-spacing: 0.02em;
  gap: 0.5rem;
  padding: 0.4375rem 0.4375rem 0.4375rem 1rem;
}
.callbar .btn__disc { width: 2rem; height: 2rem; }
@media (min-width: 62em) { .callbar { display: none; } }
/* Room for the call bar, inside the navy footer: the bar hides over the
   contact card, and a padded body would then show a paper strip below. */
@media (max-width: 61.99em) { body:has(> .callbar) .site-footer { padding-bottom: 4.75rem; } }

/* --- About the attorney -----------------------------------------------------
   The bio the homepage was missing: portrait, transcript-grounded prose,
   and a three-stop timeline. Sits on the canvas band. */
.about__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62em) {
  .about__grid { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 4rem; }
}
.about__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-photo);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
.about__prose > * + * { margin-top: 1.25rem; }
.about__prose .chip + .heading-1 { margin-top: 0; }
.about__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

.tline {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 48em) { .tline { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.tline > li { border-top: 2px solid var(--brand-navy); padding-top: 0.875rem; }
.tline__year {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--text-body);
  margin-bottom: 0.25rem;
}
.tline__what { font-size: 14px; line-height: 22px; color: var(--text-muted); text-wrap: pretty; }
/* The homepage's About timeline sets its years as display figures at desktop,
   as D9 and D11d do. Scoped to .about so the About page's own timeline (in
   .prose) keeps its size. */
@media (min-width: 62em) { .about .tline__year { font-size: 2rem; } }

/* --- FAQ --------------------------------------------------------------------
   Native <details> accordions on the canvas band — same zero-dependency
   machinery as the menu. No fee questions: consultation cost is
   unconfirmed with Brian. */
.faq__list { display: grid; gap: 0.875rem; max-width: 52rem; }
/* D9: a side card fills the empty column beside the list at desktop and
   follows the list on phones. The mobile margin must precede the media rule. */
.faq__card { margin-top: 2rem; }
.faq__card .side-card__body { margin-top: 0; }
@media (min-width: 62em) {
  .faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 2.5rem; align-items: start; }
  .faq__card { margin-top: 0; }
}
.faq__item {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  font-size: 17px;
  line-height: 24px;
  color: var(--text-body);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--brand-navy); }
.faq__item summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 8px; }
.faq__plus {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--paper-warm);
  display: grid;
  place-content: center;
  color: var(--ink);
  transition: transform var(--motion);
}
.faq__item[open] .faq__plus { transform: rotate(45deg); }
.faq__body { padding: 0 1.5rem 1.375rem; }
.faq__body p { font-size: 17px; line-height: 28px; color: var(--text-body); max-width: var(--measure); text-wrap: pretty; }
.faq__body p + p { margin-top: 0.75rem; }

/* --- Skyline strip ----------------------------------------------------------
   The St. Louis aerial (Brenden-supplied Pexels photo) as a full-bleed band
   between the FAQ and contact, with a frosted service-area bar. */
.skyline__fig { position: relative; margin: 0; }
.skyline__fig img {
  display: block;
  width: 100%;
  height: clamp(220px, 30vw, 340px);
  object-fit: cover;
  object-position: 50% 45%;
}
.skyline__bar {
  position: absolute;
  left: var(--gutter);
  bottom: 1.25rem;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 0.75rem 1.25rem;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-body);
}

/* --- In the press -----------------------------------------------------------
   Results as press coverage: outlet, a one-line summary, and a link to the
   article. ENTRIES ARE PLACEHOLDERS — the office supplies each article and
   approves its summary. Anything describing an outcome carries the
   prior-results disclaimer below, per Missouri advertising rules; and per
   Brian's 26 Aug review notes, articles must not be criminal/DUI matters. */
.press { background: var(--paper-warm); }
.press > .wrap { padding-block: clamp(3.5rem, 8vw, 6rem); }
.press--ruled > .wrap { border-top: 1px solid var(--hairline); }
.press__list { border-top: 1px solid var(--hairline); list-style: none; margin: 0; padding: 0; }
.press__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.375rem 3rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--hairline);
}
.press__outlet {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.press__summary {
  font-size: 17px;
  line-height: 28px;
  color: var(--text-body);
  max-width: var(--measure);
  text-wrap: pretty;
}
.press__link { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: 15px; }
.press__link svg { transition: transform var(--motion); }
.press__item:hover .press__link svg { transform: translate(1.5px, -1.5px); }
@media (min-width: 62em) {
  .press__item { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; align-items: baseline; }
}

/* --- Contact extras ---------------------------------------------------------
   Service area and directions join the aside. */
.contact-panel__area { font-size: 14px; line-height: 22px; color: var(--text-muted); }
.btn--directions { margin-top: 0.75rem; }

/* --- Google reviews ---------------------------------------------------------
   Excerpts from the firm's public Google profile, in the reviewers' own
   words. Service-focused quotes only — no outcome claims, which would pull
   in Missouri results-disclaimer requirements. Stars are navy (brass never
   carries meaning-bearing marks at this size). On paper here — the canvas
   bands moved to About and the FAQ. */
.reviews { background: var(--paper-warm); }
.reviews > .wrap { padding-block: clamp(3.5rem, 8vw, 6rem); }
/* On the reviews page the grid follows the page hero directly. */
.reviews--page > .wrap { padding-top: 0; }
.reviews__more { margin-top: 1.75rem; }
/* D9: the rating as an unboxed display figure in the section head. */
.reviews__lede { margin-top: 1rem; }
.rating-line { display: flex; align-items: center; gap: 1.5rem; }
.rating-line__score {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 7vw, 5rem);
  line-height: 1;
  color: var(--text-body);
}
.rating-line__body .arrow-link { margin-top: 0.5rem; }
@media (min-width: 62em) { .rating-line { justify-content: flex-end; } }
.reviews__leave { margin-top: 2.5rem; }
.reviews__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.review {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform var(--motion), box-shadow var(--motion);
}
.review:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.review__stars {
  color: var(--brand-navy);
  font-size: 15px;
  letter-spacing: 0.35em;
  line-height: 1;
}
.review__quote {
  margin: 0;
  font-size: 17px;
  line-height: 28px;
  color: var(--text-body);
  text-wrap: pretty;
}
.review__by {
  margin-top: auto;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (min-width: 62em) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Contact --- */
.contact { background: var(--paper-warm); }
.contact .wrap { padding-block: clamp(3.5rem, 8vw, 6rem); }
/* On the contact page the panel follows the page hero directly. */
.contact--page .wrap { padding-block: 0 clamp(3.5rem, 8vw, 6rem); }
.contact-panel {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.75rem, 4.5vw, 3rem);
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 48em) {
  .contact-panel { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 3.5rem; }
}
.contact-panel__aside > * + * { margin-top: 1.75rem; }
.contact-panel__row dt { margin-bottom: 0.5rem; }
.contact-panel__row dd { margin: 0; font-size: 17px; line-height: 28px; }
.contact-panel__phone { font-size: 20px; line-height: 28px; }
.contact-panel__divider { border: 0; height: 1px; background: var(--hairline); margin: 1.75rem 0 0; }

.field { margin-bottom: 1.5rem; }
.field__label { display: block; font-size: 14px; line-height: 1.4; color: var(--text-body); margin-bottom: 0.5rem; }
.field__input {
  display: block; width: 100%;
  font-family: var(--font-body); font-size: 17px; line-height: 24px;
  color: var(--text-body); background: var(--paper);
  border: 1px solid var(--hairline); border-radius: var(--radius-field);
  padding: 0.875rem 1rem;
  transition: border-color var(--motion);
}
.field__input::placeholder { color: var(--text-muted); opacity: 1; }
.field__input:hover { border-color: #D6D5CE; }
.field__input:focus-visible { outline: 3px solid var(--brand-navy); outline-offset: 1px; border-color: var(--brand-navy); }
.field__input--area { resize: vertical; min-height: 8.5rem; }
/* Netlify Forms honeypot: off screen for people, still in the form for bots */
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.disclaimer { font-size: 14px; line-height: 22px; color: var(--text-muted); margin-top: 1.5rem; max-width: var(--measure); }
.disclaimer + .disclaimer { margin-top: 0.75rem; }

/* ==========================================================================
   INNER PAGES
   Every page other than the homepage is built from the pieces below on top
   of the homepage's primitives (chips, section heads, tiles, FAQ, form
   fields, buttons). The site bar is the header at every width here; there
   is no photograph notch to carry the nav.
   ========================================================================== */

/* --- Page hero --------------------------------------------------------------
   Brass rule, chip (a link back to the parent on sub-pages), the display
   serif at a reduced scale, lead, CTA row. The --photo variant sets a 4:3
   photograph beside the text with the frosted caption bar from the
   homepage hero. The photo and caption animate individually, never the
   hero itself (backdrop-root rule, see the menu notes). */
.page-hero { background: var(--paper-warm); }
.page-hero > .wrap { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3.5rem, 8vw, 6rem); }
.page-hero__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.page-hero__inner > * + * { margin-top: 1.375rem; }
.page-hero__inner > * { animation: fade-up 600ms var(--ease-out) both; }
.page-hero__inner > :nth-child(1) { animation-delay: 60ms; }
.page-hero__inner > :nth-child(2) { animation-delay: 110ms; }
.page-hero__inner > :nth-child(3) { animation-delay: 160ms; }
.page-hero__inner > :nth-child(4) { animation-delay: 230ms; }
.page-hero__inner > :nth-child(5) { animation-delay: 320ms; }
.page-hero .display-1 { font-size: clamp(2.5rem, 6vw, 4rem); max-width: 16ch; }
.page-hero__photo { position: relative; aspect-ratio: 4 / 3; margin: 0; }
.page-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-card);
  animation: fade-in 700ms var(--ease-out) 180ms both;
}
.page-hero__caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 0.875rem 1.25rem;
  animation: fade-up 600ms var(--ease-out) 380ms both;
}
@media (min-width: 62em) {
  .page-hero--photo .page-hero__grid,
  .page-hero--aside .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 4rem; }
}
/* Short pages — a text-only hero with less air beneath it. */
.page-hero--compact > .wrap { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* The reviews page: the rating beside the heading, as a paper card. */
.rating-card {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  animation: fade-up 600ms var(--ease-out) 380ms both;
}
.rating-card__score {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 7vw, 5rem);
  line-height: 1;
  color: var(--text-body);
}
.rating-card__stars { color: var(--brand-navy); font-size: 18px; letter-spacing: 0.3em; line-height: 1; }
.rating-card__meta { font-size: 15px; line-height: 24px; color: var(--text-muted); margin-top: 0.25rem; }
.rating-card .arrow-link { margin-top: 0.75rem; }

/* --- Article, prose, sidebar ------------------------------------------------
   Long pages read in one measure-width column with a sidebar beside it at
   desktop: the "On this page" list (pages with four or more sections) and
   the office card. Below 62em the list sits above the prose and the card
   stands down — the sticky call bar covers the same ground. The sidebar
   comes first in the source so the list is the first thing a screen
   reader meets, as on any long document. */
.article { background: var(--paper-warm); }
.article > .wrap { padding-block: 0 clamp(3.5rem, 8vw, 6rem); }
.article__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
.sidebar { display: grid; gap: 2rem; }
.sidebar .side-card { display: none; }
@media (min-width: 62em) {
  .article__grid { grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem); gap: 5rem; }
  .article__grid > .prose { grid-column: 1; grid-row: 1; }
  .sidebar { grid-column: 2; grid-row: 1; position: sticky; top: 1.5rem; }
  .sidebar .side-card { display: block; }
}
.toc__label {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.toc__list { border-top: 1px solid var(--hairline); }
.toc__list li { border-bottom: 1px solid var(--hairline); }
.toc__list a { display: flex; align-items: baseline; gap: 0.875rem; padding: 0.625rem 0; font-size: 15px; line-height: 22px; color: var(--text-body); }
.toc__list a:hover { color: var(--brand-navy); text-decoration: none; }
.toc__no { flex: none; min-width: 1.5rem; font-size: 12px; letter-spacing: 0.16em; color: var(--text-muted); }

/* --- Side card --------------------------------------------------------------
   The office, in the sidebar of every long page: who you would be talking
   to, the phone number, one button. Also the "leave a review" card. */
.side-card {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}
.side-card__label {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.side-card__who { display: flex; align-items: center; gap: 1rem; }
.side-card__photo { flex: none; width: 4rem; height: 4rem; border-radius: 14px; overflow: hidden; background: var(--canvas); }
.side-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.side-card__name { font-size: 17px; line-height: 1.3; color: var(--text-body); }
.side-card__role { font-size: 13px; line-height: 20px; color: var(--text-muted); margin-top: 0.125rem; }
.side-card__body { font-size: 15px; line-height: 24px; color: var(--text-body); margin-top: 1rem; text-wrap: pretty; }
.side-card__phone { display: inline-block; margin-top: 1rem; font-size: 20px; line-height: 28px; }
.side-card .btn { margin-top: 1rem; width: 100%; justify-content: space-between; }
.side-card__note { font-size: 13px; line-height: 20px; color: var(--text-muted); margin-top: 1rem; }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--text-body);
  margin-top: 3rem;
  scroll-margin-top: 1.5rem;
  text-wrap: balance;
}
main h2[id], main h3[id] { scroll-margin-top: 1.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.4;
  color: var(--brand-navy);
  margin-top: 2rem;
}
.prose p, .prose li { font-size: 17px; line-height: 28px; color: var(--text-body); text-wrap: pretty; }
.prose ul, .prose ol { margin: 0; padding-left: 1.25rem; }
.prose > * + :is(ul, ol) { margin-top: 1.25rem; }   /* a list after a heading or paragraph */
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5rem; }
.prose .disclaimer { margin-top: 1.25rem; }
.prose .video-frame, .prose .link-cards { margin-top: 1.75rem; }
.prose .tline { list-style: none; padding-left: 0; margin-top: 2.25rem; }
.prose .tline > li + li { margin-top: 0; }

/* --- Callout ----------------------------------------------------------------
   One line worth lifting out of the prose — a deadline, a rule of thumb —
   on a paper card with a small label. Kept to one or two per page. */
.callout {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.5rem 1.375rem;
  margin-top: 1.75rem;
}
.callout__label {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.prose .callout p { max-width: none; }
.prose .callout__label { font-size: 12px; line-height: 1.4; }
.prose .callout + * { margin-top: 1.75rem; }
.prose .callout + h2 { margin-top: 3rem; }

/* --- Pending content --------------------------------------------------------
   Copy the office still has to supply. A dashed hairline and a label so a
   reviewer reads it as a request, not as finished text. Delete the block
   when the real content lands; check.py counts them as warnings. */
.pending {
  border: 1px dashed var(--text-muted);
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  color: var(--text-muted);
}
.pending p { font-size: 15px; line-height: 24px; color: var(--text-muted); max-width: none; }
.pending__label { font-size: 12px; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.375rem; }

/* --- Pull quote -------------------------------------------------------------
   Brian's own words, in the display serif (regular, well above 20px). */
.pull { margin: 2.25rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
.pull p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.35;
  color: var(--text-body);
  max-width: 26ch;
  text-wrap: balance;
}
.pull cite {
  display: block;
  font-style: normal;
  margin-top: 0.875rem;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Arrow link -------------------------------------------------------------
   The press list's "Read the article" treatment, for any inline pointer. */
.arrow-link { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: 15px; }
.arrow-link svg { transition: transform var(--motion); }
.arrow-link:hover svg { transform: translate(1.5px, -1.5px); }

/* --- Link cards -------------------------------------------------------------
   Pointers to sub-pages without photography: a paper card carrying a
   title, one line, and the arrow disc. */
.link-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
.prose .link-cards { list-style: none; padding-left: 0; }   /* not prose bullets */
.link-cards > li + li { margin-top: 0; }
@media (min-width: 40em) { .link-cards { grid-template-columns: repeat(2, 1fr); } }
.link-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.375rem 1.5rem;
  color: var(--text-body);
  transition: transform var(--motion), box-shadow var(--motion);
}
.link-card:hover { text-decoration: none; color: var(--text-body); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.link-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 19px;
  line-height: 1.4;
  color: var(--brand-navy);
}
.link-card__disc {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--paper-warm);
  color: var(--ink);
  display: grid;
  place-content: center;
}
.link-card__disc svg { transition: transform var(--motion); }
.link-card:hover .link-card__disc svg { transform: translate(1.5px, -1.5px); }
.link-card__body { font-size: 15px; line-height: 22px; color: var(--text-muted); text-wrap: pretty; }

/* --- Related areas ----------------------------------------------------------
   The homepage tiles, two-up, ruled off from the article above. */
.related { background: var(--paper-warm); }
.related > .wrap { padding-block: clamp(3.5rem, 8vw, 6rem); border-top: 1px solid var(--hairline); }

/* --- CTA band ---------------------------------------------------------------
   "Talk to the office" closes every inner page that has no form of its
   own. A paper panel on the canvas band, so it never runs into the navy
   footer. */
.cta { background: var(--canvas); }
.cta > .wrap { padding-block: clamp(3.5rem, 8vw, 6rem); }
.cta__panel {
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62em) { .cta__panel { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }
.cta__title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  line-height: 1.2;
  text-wrap: balance;
}
.cta__body { font-size: 17px; line-height: 28px; color: var(--text-body); max-width: 44ch; margin-top: 0.75rem; text-wrap: pretty; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* --- Team -------------------------------------------------------------------
   One card per person: 4:5 photograph (or a monogram tile while a
   photograph is pending), name, role, prose, and a ruled credentials list. */
.team { background: var(--paper-warm); }
.team > .wrap { padding-block: 0 clamp(3.5rem, 8vw, 6rem); }
.team__grid { display: grid; gap: 3rem; }
.team__grid > * + * { border-top: 1px solid var(--hairline); padding-top: 3rem; }
.team-card { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62em) { .team-card { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 4rem; } }
.team-card__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-photo);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--canvas);
  margin: 0;
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.team-card__mono {
  height: 100%;
  display: grid;
  place-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4rem;
  color: var(--text-muted);
}
.team-card__name {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.109;
  letter-spacing: -0.005em;
  color: var(--text-body);
}
.team-card__role {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.625rem;
}
.team-card__prose { margin-top: 1.5rem; }
.team-card__prose > * + * { margin-top: 1.25rem; }
.team-card__prose p { font-size: 17px; line-height: 28px; max-width: var(--measure); text-wrap: pretty; }
.creds { margin-top: 2rem; border-top: 1px solid var(--hairline); max-width: var(--measure); }
.creds > div { display: grid; grid-template-columns: 1fr; gap: 0.25rem 2rem; padding: 0.875rem 0; border-bottom: 1px solid var(--hairline); }
@media (min-width: 40em) { .creds > div { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); } }
.creds dt { font-size: 12px; line-height: 22px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.creds dd { margin: 0; font-size: 15px; line-height: 22px; color: var(--text-body); }

/* --- Testimonials -----------------------------------------------------------
   Former-client quotes as a ruled list, in their own words. */
.clients__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62em) {
  .clients__grid { grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem); gap: 5rem; }
  .clients__grid > .side-card { position: sticky; top: 1.5rem; }
}
.testimonials { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); max-width: 52rem; }
.testimonials > li { padding-block: 1.75rem; border-bottom: 1px solid var(--hairline); }
.testimonials blockquote { margin: 0; font-size: 17px; line-height: 28px; color: var(--text-body); max-width: var(--measure); text-wrap: pretty; }
.testimonials cite {
  display: block;
  font-style: normal;
  margin-top: 0.75rem;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Homepage hero (D11d) ----------------------------------------------------
   The first screen of the homepage, ported from designs/design-d11d-split-
   wide.html on 20 Sep 2026: a transparent header over a full-bleed hero, deep
   navy on the left, the white-brick portrait running the full height of the
   right and melting into the navy. Gradients are used on purpose here.
   The D6 hero rules above (.hero__grid, .hero__tab and its fillets,
   .hero__name) are no longer used by any page; they stay because
   `check.py --parity` holds this file to D6 line for line. */

/* The header: the homepage site bar, transparent, over the hero at every
   width. Its own stacking level keeps the menu sheet above the call bar. */
.site-bar--over { position: absolute; top: 0; left: 0; right: 0; z-index: 60; background: transparent; }
.site-bar--over .site-bar__phone,
.site-bar--over .site-bar__phone:hover { color: var(--paper); }
.skip-link { z-index: 70; }   /* above that header when it takes focus */

.fhero {
  --fhero-band: 21rem;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--navy-deep);
  color: var(--paper);
}
/* picture is display: contents, so each <source> would be a (zero-height)
   grid row of .fhero at desktop and take a share of its spare height. */
.fhero source { display: none; }
.fhero__bg {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -2;
  width: 100%;
  height: var(--fhero-band);
  max-width: none;
  object-fit: cover;
  object-position: 50% 21%;
  animation: fade-in 900ms var(--ease-out) both;
}
/* Phones and tablets: a band of photograph that melts into the navy, and the
   copy beneath it. Copy laid over the picture at this width would put the
   headline across his face. */
.fhero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--fhero-band);
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(14, 33, 55, 0.7) 0%, rgba(14, 33, 55, 0) 34%),
    linear-gradient(0deg, #0E2137 0%, rgba(14, 33, 55, 0.72) 18%, rgba(14, 33, 55, 0) 48%);
}
.fhero__wrap {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 2rem;
  padding-block: calc(var(--fhero-band) - 1.5rem) 1.75rem;
}
.fhero__copy { max-width: 37rem; }
.fhero__copy > * + * { margin-top: 1.375rem; }
.fhero__copy > * { animation: fade-up 700ms var(--ease-out) both; }
.fhero__copy > :nth-child(1) { animation-delay: 80ms; }
.fhero__copy > :nth-child(2) { animation-delay: 140ms; }
.fhero__copy > :nth-child(3) { animation-delay: 220ms; }
.fhero__copy > :nth-child(4) { animation-delay: 320ms; }
.fhero .eyebrow, .closing .eyebrow, .reviews--band .eyebrow { color: var(--on-navy-muted); }
.fhero .display-1 { color: var(--paper); font-size: clamp(2.75rem, 5.6vw, 4.75rem); max-width: 13ch; }
.fhero__place { color: var(--brass-tint); }
.fhero .lead { color: rgba(255, 255, 255, 0.88); max-width: 33rem; }
.fhero__copy > .fhero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.fhero .btn--primary, .closing .btn--primary { background: var(--paper); color: var(--ink); }
.fhero .btn--primary:hover, .closing .btn--primary:hover { background: var(--canvas); color: var(--ink); }
.fhero .btn--primary .btn__disc, .closing .btn--primary .btn__disc { background: var(--ink); color: var(--paper); }
.fhero .btn--secondary, .closing .btn--secondary { background: rgba(14, 33, 55, 0.35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fhero .btn--secondary:hover, .closing .btn--secondary:hover { background: var(--brand-navy); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), var(--shadow-lift); }
.fhero .btn--secondary .btn__disc, .closing .btn--secondary .btn__disc { color: var(--navy-deep); }

/* The foot: one quiet line under a hairline. Rating left, the attorney right. */
.fhero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px;
  line-height: 22px;
  color: var(--on-navy-muted);
  animation: fade-in 900ms var(--ease-out) 500ms both;
}
.fhero__rating { display: inline-flex; align-items: center; gap: 0.875rem; color: var(--on-navy-muted); }
.fhero__rating:hover { color: var(--paper); text-decoration: none; }
.fhero__rating-fig { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--paper); }
.fhero__stars { color: var(--brass-tint); letter-spacing: 0.18em; margin-right: 0.5rem; }
.fhero__who { display: flex; flex-direction: column; text-align: left; }
.fhero__who b { font-weight: 400; color: var(--paper); font-size: 15px; }

/* The hero ends on an edge, so what follows brings its own air. */
.fhero + .intake > .wrap { padding-top: clamp(2.5rem, 5vw, 4rem); }

@media (min-width: 48em) { .fhero { --fhero-band: 27rem; } }

@media (min-width: 62em) {
  .fhero { display: grid; min-height: clamp(42rem, 100svh, 60rem); }
  .fhero::before {
    inset: 0;
    height: auto;
    background:
      linear-gradient(180deg, rgba(14, 33, 55, 0.5) 0%, rgba(14, 33, 55, 0) 16%),
      linear-gradient(0deg, rgba(14, 33, 55, 0.85) 0%, rgba(14, 33, 55, 0) 22%),
      linear-gradient(90deg, #0E2137 0%, #0E2137 28%, rgba(14, 33, 55, 0.94) 35.8%, rgba(14, 33, 55, 0.784) 43.6%, rgba(14, 33, 55, 0.575) 51.4%, rgba(14, 33, 55, 0.352) 59.2%, rgba(14, 33, 55, 0.156) 67%, rgba(14, 33, 55, 0.028) 74.8%, rgba(14, 33, 55, 0) 80%);
  }
  /* The wide cut (the rest of the original frame, then a clean strip of wall
     and floor mirrored) is 1962px to the portrait crop's 1200px, so this box
     keeps Brian at the size and place a 46% column of the crop would. */
  .fhero__bg { inset: 0 0 0 auto; width: calc(46% * 1962 / 1200); height: 100%; object-position: 100% 58%; }
  .fhero__wrap { padding-block: 8.5rem 2rem; }
  /* Centred between the header and the foot line; the 1rem is the optical lift. */
  .fhero__copy { align-self: center; padding-bottom: 1rem; }
  .fhero__who { text-align: right; }
}
/* Small laptops: a narrower measure keeps the copy off the photograph. */
@media (min-width: 62em) and (max-width: 74.99em) {
  .fhero__copy { max-width: 31rem; }
  .fhero .display-1 { font-size: 3.5rem; }
}

@media print {
  .fhero { min-height: 0; background: none; color: var(--text-body); }
  .fhero::before, .fhero__bg { display: none; }
  .fhero .display-1, .fhero .lead, .fhero__who b, .fhero__rating-fig { color: var(--text-body); }
  .fhero__place { color: var(--brand-navy); }
}

/* --- Closing contact card (homepage, 24 Sep 2026) ---------------------------
   The hero's language at the foot of the page: deep navy, a real photograph
   melting into it, white copy and the hero's two buttons. It is an inset card
   on the paper ground rather than a full-bleed band, so it never meets the
   navy footer. The photo (the office sign, Brian in the lounge chair) sits
   left, mirroring the hero; the fade lands on the cabinet side of the frame
   and is solid navy before the copy starts, so the lit sign never sits
   behind the heading.
   Phones and tablets: a band of the photograph on top, copy beneath. */
.closing { background: var(--paper-warm); }
/* Room to breathe (24 Sep follow-up): the card breaks out of the 1180px
   text column to 1280px, so the page's last call to action matches the
   scale of the full-width bands above it, and the section keeps the
   reviews band's vertical rhythm. */
.closing > .wrap { max-width: calc(1280px + 2 * var(--gutter)); padding-block: clamp(4rem, 9vw, 7rem); }
.closing__card {
  /* Close to 3:4 of the card's width, so the band holds the sign and Brian's
     face above the copy at every phone and tablet width. */
  --closing-band: clamp(16rem, 72vw, 32rem);
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--navy-deep);
  color: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.closing source { display: none; }
.closing__media {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--closing-band);
  margin: 0;
  z-index: -1;
}
.closing__photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 26%;
}
.closing__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 33, 55, 0.35) 0%, rgba(14, 33, 55, 0) 30%),
    linear-gradient(0deg, #0E2137 0%, rgba(14, 33, 55, 0.72) 18%, rgba(14, 33, 55, 0) 48%);
}
.closing__copy { padding: calc(var(--closing-band) - 1.5rem) clamp(1.75rem, 6vw, 3rem) clamp(1.75rem, 6vw, 3rem); }
/* Grouped rhythm: eyebrow and title close, then the lead, then clear air
   before the buttons and again before the details. */
.closing__copy > * + * { margin-top: 1.25rem; }
.closing__copy > .closing__title { margin-top: 1rem; }
.closing__title, .voices__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--paper);
  text-wrap: balance;
}
.closing__title { font-size: clamp(2.25rem, 4vw, 3.75rem); }
.closing .lead { color: rgba(255, 255, 255, 0.88); max-width: 32rem; }
.closing__copy > .closing__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.closing__facts {
  display: grid;
  gap: 2.25rem 3rem;
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.closing__facts dt { color: var(--on-navy-muted); margin-bottom: 0.4rem; }
.closing__facts dd { margin: 0; font-size: 17px; line-height: 28px; color: var(--paper); }
.closing__facts dd.closing__note { margin-top: 0.2rem; font-size: 14px; line-height: 22px; color: var(--on-navy-muted); }
.closing__facts dd.closing__phone { font-size: 20px; }
.closing__facts a { color: var(--paper); }
.closing__facts a:hover { color: var(--paper); text-decoration: underline; }
.closing a:focus-visible, .reviews--band a:focus-visible { outline-color: var(--brass); }

@media (min-width: 48em) {
  .closing__facts { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 62em) {
  /* 45/55 so the two buttons sit side by side. The photo box (60%) runs
     under the copy column; its fade is centred near the copy's left edge
     and is at least 85% navy wherever text starts. */
  .closing__card { display: grid; grid-template-columns: 45fr 55fr; min-height: 42rem; }
  .closing__media { inset: 0 auto 0 0; width: 60%; height: auto; }
  .closing__photo { object-position: 40% 40%; }
  .closing__media::after {
    background:
      linear-gradient(0deg, rgba(14, 33, 55, 0.55) 0%, rgba(14, 33, 55, 0) 22%),
      linear-gradient(270deg, #0E2137 0%, #0E2137 6%, rgba(14, 33, 55, 0.94) 12.3%, rgba(14, 33, 55, 0.784) 18.6%, rgba(14, 33, 55, 0.575) 24.9%, rgba(14, 33, 55, 0.352) 31.1%, rgba(14, 33, 55, 0.156) 37.4%, rgba(14, 33, 55, 0.028) 43.7%, rgba(14, 33, 55, 0) 50%);
  }
  /* The lit sign runs across the top of the frame and would show beside
     the heading. Over the top of the photo only, an earlier fade melts the
     sign's far end away; it blends out above Brian's head, so lower down the
     main fade stays centred near the copy. */
  .closing__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(270deg, #0E2137 0%, #0E2137 24%, rgba(14, 33, 55, 0.75) 31%, rgba(14, 33, 55, 0.35) 38%, rgba(14, 33, 55, 0) 44%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 36%, transparent 52%);
    mask-image: linear-gradient(180deg, #000 0%, #000 36%, transparent 52%);
    pointer-events: none;
  }
  .closing__copy { grid-column: 2; align-self: center; padding: clamp(3.5rem, 5vw, 5rem) clamp(2.5rem, 4.5vw, 4.5rem); }
}

/* Small laptops: the card is back at the wrap's width, so the copy takes
   less side padding and the details a narrower gutter; the address and
   hours then stay on their lines. */
@media (min-width: 62em) and (max-width: 74.99em) {
  .closing__copy { padding-inline: 2.5rem; }
  .closing__facts { column-gap: 1.75rem; }
}

@media print {
  .closing__card { background: none; color: var(--text-body); box-shadow: none; }
  .closing__media { display: none; }
  .closing__copy { padding: 0; }
  .closing__title, .closing .lead, .closing__facts dd, .closing__facts a { color: var(--text-body); }
}

/* --- Reviews band (homepage, 24 Sep 2026) ----------------------------------
   Deep navy mid-page, so the page is not paper and canvas all the way down.
   One quote set large as the section's voice, the 4.8 rating beside it as
   a display figure, two more quotes beneath, split by hairlines. No boxes,
   no photograph: this is the clients' voice, and the page already shows
   Brian four times. reviews.html keeps its cards. */
.reviews--band { position: relative; isolation: isolate; overflow: clip; background: var(--navy-deep); color: var(--paper); }
/* The downtown aerial, faint: a navy duotone of the city under the quotes,
   washed heavier on the left, where the heading and rating sit. */
.reviews__bg { position: absolute; inset: 0; z-index: -1; }
.reviews__bg source { display: none; }
.reviews__bg img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 55%; opacity: 0.18; }
.reviews__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 33, 55, 0.65) 0%, rgba(14, 33, 55, 0.3) 50%, rgba(14, 33, 55, 0.2) 100%);
}
.reviews--band > .wrap { padding-block: clamp(4rem, 9vw, 7rem); }
.reviews--band a { color: var(--paper); }
.reviews--band a:hover { color: var(--paper); text-decoration: underline; }
.voices { display: grid; gap: 2.25rem; }
.voices__head > * + * { margin-top: 1rem; }
.voices__rating { display: flex; align-items: flex-start; gap: 1.25rem; }
.voices__score {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4rem, 8vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.voices__stars { color: var(--brass-bright); font-size: 16px; letter-spacing: 0.18em; line-height: 1; }
.voices__meta { margin-top: 0.75rem; font-size: 14px; line-height: 22px; color: var(--on-navy-muted); max-width: 17rem; text-wrap: pretty; }
.voices__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-top: 1.25rem; }
.voices__feature { margin: 0; }
.voices__mark {
  display: block;
  height: 0.5em;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--brass-bright);
}
.voices__feature blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.125rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--paper);
  text-wrap: pretty;
}
.voices figcaption {
  margin-top: 1.25rem;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-navy-muted);
}
.voices__more {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 2rem 0 0;
  display: grid;
  gap: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.voices__more figure { margin: 0; }
.voices__more blockquote { margin: 0; font-size: 17px; line-height: 28px; color: rgba(255, 255, 255, 0.88); text-wrap: pretty; }
.voices__more figcaption { margin-top: 1rem; }
.voices__more li + li { padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.reviews--band .disclaimer { color: var(--on-navy-muted); }

@media (min-width: 48em) {
  .voices__more { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .voices__more li + li { padding-top: 0; border-top: 0; padding-left: 3rem; border-left: 1px solid rgba(255, 255, 255, 0.16); }
}

@media (min-width: 62em) {
  .voices {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-areas: "head head" "rating feature" "more more" "note note";
    column-gap: clamp(3rem, 6vw, 6rem);
    row-gap: 2.75rem;
  }
  .voices__head { grid-area: head; }
  .voices__rating { grid-area: rating; flex-direction: column; gap: 1.5rem; padding-right: clamp(2rem, 4vw, 3.5rem); border-right: 1px solid rgba(255, 255, 255, 0.16); }
  .voices__feature { grid-area: feature; align-self: center; }
  .voices__more { grid-area: more; margin-top: 0.5rem; }
  .voices__note { grid-area: note; }
}

@media print {
  .reviews--band { background: none; color: var(--text-body); }
  .reviews__bg { display: none; }
  .voices__title, .voices__score, .voices__feature blockquote, .voices__more blockquote, .reviews--band a { color: var(--text-body); }
  .voices__stars, .voices__mark { color: var(--brand-navy); }
}

/* --- Inner pages: the homepage's navy (INNER-PAGES-PLAN.md, 24 Sep 2026) ----
   Every inner page opens on the homepage hero, as a modifier of it, and the
   pages with a sidebar article, a FAQ or a contact card take the rest of the
   homepage's language in one move per section. Nothing here reaches the
   homepage: every rule is scoped to a modifier the homepage never carries.

   The hero, three kinds:
   - a photograph right, melting into the navy along the homepage's eased
     ramp. Brian's studio portraits use wide cuts (the plain backdrop
     extended left), so his pages keep the homepage's box and its gentle
     fade. The stock photographs are placed so each face is either clear or
     fully under the navy, never half-veiled;
   - --plain: the navy band and the copy, no photograph;
   - Reviews: --plain with the homepage reviews band's city layer and the
     rating beside the copy.
   The solid navy runs to just short of the copy's measure at every width
   (--ph-s, taken from the wrap), and each page sets its own crops. */
.fhero.fhero--page { --fhero-band: 16rem; }
.fhero.fhero--brian { --fhero-band: 20rem; }
.fhero--page .fhero__bg { object-position: var(--fhero-pos, 50% 25%); }
.fhero--page .fhero__wrap { grid-template-rows: auto; padding-block: calc(var(--fhero-band) - 1.5rem) 3rem; }
.fhero--page .display-1 { font-size: clamp(2.5rem, 5vw, 4rem); max-width: 14ch; }
.fhero--page .lead { max-width: 32rem; }
/* Phones and tablets: the header's white phone number (from 40em) sits on
   the photograph's light backdrop, so the top shade is measured in rem and
   holds about 0.6 behind the header. */
.fhero--page::before {
  background:
    linear-gradient(180deg, rgba(14, 33, 55, 0.75) 0, rgba(14, 33, 55, 0.62) 4.5rem, rgba(14, 33, 55, 0) 11rem),
    linear-gradient(0deg, #0E2137 0%, rgba(14, 33, 55, 0.72) 18%, rgba(14, 33, 55, 0) 48%);
}
.fhero--plain::before { content: none; }
.fhero--plain .fhero__wrap { padding-block: 7rem 3.5rem; }

/* The back link to Personal injury, as a glass pill on the navy. */
.fhero a.chip {
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  color: var(--on-navy-muted);
}
.fhero a.chip:hover { color: var(--paper); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
/* Links in the copy (a phone number, the reviews links): white, underlined. */
.fhero--page a:not(.btn):not(.chip):not(.arrow-link) {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}
.fhero--page a:not(.btn):not(.chip):not(.arrow-link):hover { text-decoration-color: currentColor; }
/* Focus on the navy: brass is under 3:1 over the photographs and the blue. */
.site-bar--over :is(a, summary):focus-visible,
.fhero--page a:focus-visible { outline-color: var(--paper); }

/* Per-page crops: --fhero-pos for the phone band, --fhero-pos-lg at desktop. */
.fhero--about { --fhero-pos: 50% 22%; --fhero-pos-lg: 100% 30%; }
.fhero--car { --fhero-pos: 50% 26%; --fhero-pos-lg: 100% 28%; }
.fhero--slips { --fhero-pos: 50% 12%; --fhero-pos-lg: 100% 8%; }
/* The practice-area photographs share .fhero--stock's box and ramp; each
   sets its own crop. Workers' comp puts the colleague's face under the navy
   and keeps his hand on the shoulder. First responder's frame is wide with
   a paramedic at each end: from 75em both fit, on a shorter ramp; below
   that the right-hand one carries it and the other goes under the navy. */
.fhero--stock { --fhero-pos: 50% 25%; --fhero-pos-lg: 100% 30%; }
/* Missouri Rule 4-7.1(i): a posed picture of a client, victim or scene must
   say so conspicuously. The stock photographs of people carry this label
   (and "(stock photo, posed by models)" in their alt text). */
.photo-note {
  position: absolute; z-index: 1;
  font-size: 12px; line-height: 16px; letter-spacing: 0.01em;
  color: #FFFFFF; background: rgba(14, 33, 55, 0.78);
  padding: 0.25rem 0.625rem; border-radius: 999px;
  pointer-events: none;
}
.fhero > .photo-note { right: 1rem; top: calc(var(--fhero-band) - 4.5rem); }
.card__media > .photo-note { top: 0.75rem; right: 0.75rem; }
.fhero--injury { --fhero-pos: 50% 30%; --fhero-pos-lg: 100% 50%; }
.fhero--workers { --fhero-pos: 50% 35%; --fhero-pos-lg: 100% 50%; }
.fhero--responder { --fhero-pos: 60% 35%; --fhero-pos-lg: 64% 50%; }

/* What follows the hero brings its own air (the hero ends on an edge). */
.fhero + :is(.article, .team, .reviews--page, .contact--page, .steps) > .wrap { padding-top: clamp(3rem, 6vw, 4.5rem); }

@media (min-width: 48em) {
  .fhero.fhero--page { --fhero-band: 22rem; }
  .fhero.fhero--brian { --fhero-band: 26rem; }
}

@media (min-width: 62em) {
  .fhero.fhero--page {
    min-height: clamp(34rem, 72svh, 44rem);
    --ph-s: calc(max(0px, (100% - var(--wrap)) / 2) + var(--gutter) + 29rem);
    --ph-e: calc(var(--ph-s) + 42%);
  }
  /* Stock photographs: the ramp starts later and runs shorter, so a figure
     on the left of the frame goes under the navy. */
  .fhero.fhero--stock { --ph-s: 50%; --ph-e: 86%; }
  .fhero.fhero--responder { --ph-e: 80%; }
  .fhero--page::before {
    background:
      linear-gradient(180deg, rgba(14, 33, 55, 0.72) 0, rgba(14, 33, 55, 0.6) 5rem, rgba(14, 33, 55, 0) 13rem),
      linear-gradient(0deg, rgba(14, 33, 55, 0.6) 0%, rgba(14, 33, 55, 0) 20%),
      linear-gradient(90deg,
        #0E2137 var(--ph-s, 44%),
        rgba(14, 33, 55, 0.94) calc(var(--ph-s, 44%) + (var(--ph-e, 86%) - var(--ph-s, 44%)) * 0.15),
        rgba(14, 33, 55, 0.784) calc(var(--ph-s, 44%) + (var(--ph-e, 86%) - var(--ph-s, 44%)) * 0.3),
        rgba(14, 33, 55, 0.575) calc(var(--ph-s, 44%) + (var(--ph-e, 86%) - var(--ph-s, 44%)) * 0.45),
        rgba(14, 33, 55, 0.352) calc(var(--ph-s, 44%) + (var(--ph-e, 86%) - var(--ph-s, 44%)) * 0.6),
        rgba(14, 33, 55, 0.156) calc(var(--ph-s, 44%) + (var(--ph-e, 86%) - var(--ph-s, 44%)) * 0.75),
        rgba(14, 33, 55, 0.028) calc(var(--ph-s, 44%) + (var(--ph-e, 86%) - var(--ph-s, 44%)) * 0.9),
        rgba(14, 33, 55, 0) var(--ph-e, 86%));
  }
  /* Brian's wide cuts are about 1.63 times the portrait crop, as the
     homepage's is, so this is the homepage's box. Stock photographs take a
     box whose left edge sits under solid navy. */
  .fhero--page .fhero__bg { inset: 0 0 0 auto; width: calc(46% * 1960 / 1200); height: 100%; object-position: var(--fhero-pos-lg, 100% 30%); }
  .fhero--stock .fhero__bg { width: 54%; }
  .fhero > .photo-note { top: auto; bottom: 1.25rem; right: 1.5rem; }
  .fhero--page .fhero__wrap { padding-block: 8.5rem 4rem; }
  .fhero--page .fhero__copy { align-self: center; padding-bottom: 0; max-width: 31rem; }
  .fhero.fhero--plain { min-height: 0; }
  .fhero--plain .fhero__wrap { padding-block: 10rem 5rem; }
  .fhero--plain .fhero__copy { max-width: 44rem; }
  .fhero--plain .display-1 { max-width: 18ch; }
  .fhero--plain .lead { max-width: 38rem; }
}
@media (min-width: 62em) and (max-width: 74.99em) {
  .fhero--page .fhero__copy { max-width: 31rem; }
  .fhero--page .lead { max-width: 28rem; }
  /* No photograph to keep clear: the plain heroes keep their measure. */
  .fhero--plain .fhero__copy { max-width: 44rem; }
  .fhero--plain .lead { max-width: 38rem; }
  .fhero--page .display-1 { font-size: 3.25rem; }
  .fhero.fhero--page { --ph-s: calc(var(--gutter) + 26rem); }
  .fhero.fhero--stock { --ph-s: 52%; --ph-e: 88%; }
  .fhero.fhero--responder { --ph-e: 88%; --fhero-pos-lg: 100% 50%; }
}

/* --- The blue band ------------------------------------------------------------
   The film band's blue (--brand-navy) for one full-width band per page: the
   FAQ on the practice pages, the credentials on Team. No boxes on the blue:
   items sit on hairlines, as in the homepage's navy bands. */
.band--blue { background: var(--brand-navy); color: var(--paper); }
.band--blue .heading-1 { color: var(--paper); }
.band--blue .section-head .eyebrow { margin-bottom: 1rem; }
.band--blue :is(.eyebrow, .label, .section-head__note, .disclaimer) { color: var(--on-navy-muted); }
.band--blue a { color: var(--paper); }
.band--blue a:hover { color: var(--paper); }
.band--blue :is(a, summary, button):focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--navy-deep);
}
.band--blue .faq__list { gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.band--blue .faq__item { background: none; border-radius: 0; box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.band--blue .faq__item summary { padding-inline: 0; color: var(--paper); }
.band--blue .faq__item summary:hover { color: var(--paper); }
.band--blue .faq__item summary:focus-visible { border-radius: 4px; }
.band--blue .faq__plus { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); color: var(--paper); }
.band--blue .faq__item summary:hover .faq__plus { background: rgba(255, 255, 255, 0.2); }
.band--blue .faq__body { padding-inline: 0; }
.band--blue .faq__body p { color: rgba(255, 255, 255, 0.88); }
.band--blue .faq__body a { color: var(--paper); text-decoration-color: rgba(255, 255, 255, 0.5); }

/* --- The callout, tinted ------------------------------------------------------
   The one line each article lifts out (Notice, Deadlines, Statements…): a
   pale blue with a blue rule, so it reads as part of the
   same palette without competing with the navy hero just above it. */
.prose .callout {
  background: #E8EEF5;   /* a pale blue: a transparent tint of the brand blue reads grey on the warm paper */
  box-shadow: none;
  border-left: 3px solid var(--brand-navy);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.prose .callout__label { color: var(--brand-navy); }

/* --- Team, 24 Sep 2026 --------------------------------------------------------
   Brian's feature (a studio portrait and his three paragraphs), his
   credentials on the blue band, then Mike and Rebecca as a short roster
   (Mike's photograph was taken off at Brenden's request). The older .team-card rules above stay for reference. */
.team-lead { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
.team-lead__photo {
  margin: 0;
  width: 100%;
  max-width: 26rem;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-photo);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--canvas);
}
.team-lead__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.team-lead__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-body);
  margin-top: 0.75rem;
  text-wrap: balance;
}
.team-lead .team-card__prose { margin-top: 1.75rem; }
.team--more > .wrap { padding-block: clamp(3.5rem, 8vw, 6rem); }
/* Mike and Rebecca: a short roster on hairlines, name, role, a line of
   bio, email. */
.team-office { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
.team-office__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.team-office__list > li {
  display: grid;
  gap: 0.25rem 2rem;
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: 1.375rem;
  border-bottom: 1px solid var(--hairline);
}
.team-office__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.2; color: var(--text-body); }
.team-office__role { font-size: 15px; line-height: 24px; color: var(--text-muted); }
.team-office__mail { font-size: 17px; line-height: 28px; }
.team-office__bio { font-size: 17px; line-height: 28px; color: var(--text-muted); max-width: 62ch; margin-top: 0.5rem; }
@media (min-width: 48em) {
  /* Name over role on the left, the email right, so nothing collides in
     the narrower column at small-laptop widths; the bio runs across both. */
  .team-office__list > li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name mail" "role mail" "bio bio"; }
  .team-office__name { grid-area: name; }
  .team-office__role { grid-area: role; }
  .team-office__bio { grid-area: bio; }
  .team-office__mail { grid-area: mail; justify-self: end; }
}
@media (min-width: 62em) {
  .team-lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; }
  .team-lead__photo { justify-self: start; }
  .team-office { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; }
  .team-office > .label { padding-top: 1.5rem; }
}

/* "At a glance": Brian's credentials on the blue, two columns, the roles
   across both. */
.glance__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.glance__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  color: var(--paper);
  margin-top: 0.75rem;
}
.creds--glance { margin-top: 0; max-width: none; border-top: 1px solid rgba(255, 255, 255, 0.16); display: grid; grid-template-columns: 1fr; column-gap: 3rem; }
.creds--glance > div { grid-template-columns: 1fr; align-content: start; gap: 0.375rem; padding: 1.125rem 0 1.25rem; border-bottom-color: rgba(255, 255, 255, 0.16); }
.creds--glance dt { color: var(--on-navy-muted); }
.creds--glance dd { color: var(--paper); font-size: 17px; line-height: 26px; }
@media (min-width: 48em) {
  .creds--glance { grid-template-columns: 1fr 1fr; }
  .creds--glance > .creds__wide { grid-column: 1 / -1; }
}
@media (min-width: 62em) { .glance__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; } }

/* --- Reviews page, 24 Sep 2026 ------------------------------------------------
   The hero takes the homepage reviews band's city layer and its 4.8 (the
   unscoped .voices__score/__stars/__meta rules), so the page opens on the
   rating. Below, on paper: the former clients first, one note set large,
   then the Google excerpts beside their heading, and one quiet ask for a
   review. No cards: quotes sit on hairlines, as in the homepage band. */
.fhero__aside {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  animation: fade-up 700ms var(--ease-out) 400ms both;
}
.fhero__aside-link { margin-top: 1.25rem; }
.fhero--page .arrow-link, .fhero--page .arrow-link:hover { color: var(--paper); }
@media (min-width: 62em) {
  .fhero--page .fhero__wrap--aside { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4rem; }
  .fhero__aside { padding: 0 0 0 3rem; border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.2); }
}

.quotes { display: grid; gap: 2.75rem; }
.quotes__feature { margin: 0; max-width: 56rem; }
.quotes__mark {
  display: block;
  height: 0.5em;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--brass);
}
.quotes__feature blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--text-body);
  text-wrap: pretty;
}
.quotes figcaption, .google__by {
  margin-top: 1.25rem;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.quotes__more { list-style: none; margin: 0; padding: 2rem 0 0; display: grid; gap: 2rem; border-top: 1px solid var(--hairline); }
.quotes__more figure { margin: 0; }
.quotes__more blockquote { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.45; color: var(--text-body); text-wrap: pretty; }
.quotes__more figcaption { margin-top: 1rem; }
.quotes__more li + li { padding-top: 2rem; border-top: 1px solid var(--hairline); }
@media (min-width: 48em) {
  .quotes__more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .quotes__more li { padding-right: 2.5rem; }
  .quotes__more li + li { padding-top: 0; padding-left: 2.5rem; border-top: 0; border-left: 1px solid var(--hairline); }
}

.reviews--google > .wrap { padding-top: 0; }
.google { display: grid; gap: 2.5rem; padding-top: clamp(3.5rem, 8vw, 6rem); border-top: 1px solid var(--hairline); }
.google__head .chip { margin-bottom: 1.375rem; }
.google__head .section-head__note { margin-top: 1.25rem; }
.google__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.google__list > li { padding-block: 1.75rem; border-bottom: 1px solid var(--hairline); }
.google__stars { color: var(--brand-navy); font-size: 15px; line-height: 1; letter-spacing: 0.18em; }
.google__list blockquote {
  margin: 0.875rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.4;
  color: var(--text-body);
  max-width: 44rem;
  text-wrap: pretty;
}
.google__by { margin-top: 1rem; }
@media (min-width: 62em) {
  .google { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 5rem; align-items: start; }
  .google__head { position: sticky; top: 1.5rem; }
}
.review-ask {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
.review-ask__body { margin-top: 0.75rem; font-size: 17px; line-height: 28px; color: var(--text-body); max-width: 44rem; text-wrap: pretty; }
.review-ask__note { margin-top: 0.5rem; font-size: 14px; line-height: 22px; color: var(--text-muted); }
@media (min-width: 62em) { .review-ask { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }

/* --- Contact page, 24 Sep 2026 ------------------------------------------------
   The panel rises out of the navy hero by --rise, so the hero and the panel
   read as one shape: the white form first, the office details beside it on
   deep navy in the contact card's style. The D6 .contact-panel rules above
   stay; --split overrides them. */
.fhero--contact { --rise: 4rem; }
.fhero--contact .fhero__wrap { padding-bottom: calc(3.5rem + var(--rise)); }
.fhero--contact + .contact--page > .wrap { padding-top: 0; }
.contact-panel--split {
  position: relative;   /* above the hero it overlaps */
  z-index: 1;
  margin-top: calc(-1 * 4rem);
  padding: 0;
  gap: 0;
  overflow: clip;
  background: transparent;   /* the columns bring their own, so no white edge shows at the navy corner */
}
.contact-panel__form { padding: clamp(1.75rem, 4.5vw, 3rem); background: var(--paper); }
.contact-facts { background: var(--navy-deep); color: var(--paper); padding: clamp(1.75rem, 4.5vw, 3rem); }
.contact-facts .label { color: var(--on-navy-muted); }
.contact-facts a { color: var(--paper); }
.contact-facts a:hover { color: var(--paper); text-decoration: underline; }
.contact-facts a:focus-visible { outline-color: var(--paper); }
.contact-facts__list { margin-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.contact-facts__list > div { padding-block: 1.125rem; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.contact-facts__list dt { margin-bottom: 0.375rem; }
.contact-facts__list dd { margin: 0; font-size: 17px; line-height: 26px; color: var(--paper); }
.contact-facts__phone { font-size: 20px; }
.contact-facts dd.contact-facts__note { margin-top: 0.25rem; font-size: 14px; line-height: 22px; color: var(--on-navy-muted); }
.contact-facts__note a { font-size: 14px; }
.contact-facts__area { margin-top: 1.5rem; font-size: 14px; line-height: 22px; color: var(--on-navy-muted); }
@media (min-width: 48em) {
  .contact-panel--split { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 0; }
}
@media (min-width: 62em) {
  .fhero--contact { --rise: 6rem; }
  .contact-panel--split { margin-top: calc(-1 * 6rem); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .fhero--contact .fhero__wrap { padding-bottom: calc(4rem + var(--rise)); }
}

/* --- Contact hero: the office front, by day or at dusk (29 Oct 2026) --------
   The firm's own building, by day in office hours and at dusk the rest of
   the time. site.js sets html[data-office] to open, closed or weekend from
   Kirkwood's clock ("hours" if it cannot tell); with no script, html has no
   .js and the day stands. With the script, the hero holds its navy until the
   state is known, so a night visit never opens on daylight. The dusk frame
   is the day frame relit, so the photographs cross-fade in place.
   - Phones and tablets: the house band of photograph over the copy on navy.
     By day the band's sky is white, so the header goes dark over it.
   - Desktop: the whole frame across the width, under the copy. Its sky is
     pure white, so by day a multiplied blue (::after) tints the sky and
     nothing else, and the hero's white background carries that sky up behind
     the copy. By night the background is the dusk photograph's navy. */
.fhero.fhero--office { --fhero-band: 18rem; --fhero-pos: 50% 40%; }
.fhero--office .fhero__bg { opacity: 0; }
html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office .fhero__bg--day,
html:is([data-office="closed"], [data-office="weekend"]) .fhero--office .fhero__bg--dusk { opacity: 1; }
/* Only the fade into the navy below: by day the header is dark, and the
   dusk sky is navy already. */
.fhero--office::before { background: linear-gradient(0deg, #0E2137 0%, rgba(14, 33, 55, 0.72) 18%, rgba(14, 33, 55, 0) 48%); }
.fhero--office::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--fhero-band);
  z-index: -1;
  mix-blend-mode: multiply;
  background: linear-gradient(180deg, #C4D7EC 0%, #DDE8F4 18%, #FFFFFF 34%);
  opacity: 0;
}
html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office::after { opacity: 1; }

/* Each message in its two versions; the status line in four. */
.fhero__when { display: none; align-items: center; gap: 0.625rem; }
html:is(:not([data-office]), [data-office="hours"]) .fhero__when--hours,
html[data-office="open"] .fhero__when--open,
html[data-office="closed"] .fhero__when--closed,
html[data-office="weekend"] .fhero__when--weekend { display: inline-flex; }
.fhero__when:not(.fhero__when--hours)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fhero__when--open { color: #A9D8B4; }
.fhero__when--closed, .fhero__when--weekend { color: var(--brass-bright); }
html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office .fhero__night,
html.js:not([data-office="open"]):not([data-office="hours"]) .fhero--office .fhero__day { display: none; }
.fhero__or { align-self: center; font-size: 15px; line-height: 22px; color: var(--on-navy-muted); }

/* By day the header sits on white sky: the logo and the number go dark. */
html:is([data-office="open"], [data-office="hours"]) .site-bar--over .site-bar__logo img,
html:not(.js) .site-bar--over:has(~ main .fhero--office) .site-bar__logo img { filter: brightness(0); }
html:is([data-office="open"], [data-office="hours"]) .site-bar--over .site-bar__phone,
html:is([data-office="open"], [data-office="hours"]) .site-bar--over .site-bar__phone:hover,
html:not(.js) .site-bar--over:has(~ main .fhero--office) .site-bar__phone { color: var(--navy-deep); }
html:is([data-office="open"], [data-office="hours"]) .site-bar--over :is(a, summary):focus-visible { outline-color: var(--navy-deep); }

@media (min-width: 48em) {
  .fhero.fhero--office { --fhero-band: 26rem; --fhero-pos: 50% 32%; }
}
/* Phones and tablets by day: the trees reach the top right of the band, so a
   pale veil keeps the dark number legible over them. */
@media (max-width: 61.99em) {
  html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office::before {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0) 6.5rem),
      linear-gradient(0deg, #0E2137 0%, rgba(14, 33, 55, 0.72) 18%, rgba(14, 33, 55, 0) 48%);
  }
}

@media (min-width: 62em) {
  .fhero.fhero--office { grid-template-rows: auto auto; min-height: 0; background: #02163E; }   /* the dusk photograph's sky */
  html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero.fhero--office { background: #FFFFFF; }
  .fhero--office .fhero__wrap { grid-row: 1; padding-block: 8.5rem 2rem; }
  /* The frame's top fifth is all sky, so it runs up under the copy (a
     margin in % follows the width, as the frame does). */
  .fhero--office .fhero__bg {
    position: relative;
    grid-area: 2 / 1;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 2000 / 1336;
    margin-top: -20%;
    object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%);
  }
  .fhero--office::before {
    inset: 0;
    height: auto;
    background: linear-gradient(0deg, #0E2137 0, #0E2137 calc(var(--rise) * 0.5), rgba(14, 33, 55, 0.8) calc(var(--rise) + 3rem), rgba(14, 33, 55, 0) calc(var(--rise) + 15rem));
  }
  .fhero--office::after { inset: 0; height: auto; background: linear-gradient(180deg, #C4D7EC 0%, #DDE8F4 26%, #FFFFFF 46%); }
  .fhero--office .fhero__copy { align-self: start; max-width: 44rem; }
  .fhero--office .display-1 { max-width: 18ch; }
  .fhero--office .lead { max-width: 36rem; }

  /* By day the copy is on the sky: dark type and the site's own buttons. */
  html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office .eyebrow { color: #4A5D75; }
  html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office .fhero__when--open { color: #2F6B45; }
  html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office .display-1 { color: var(--navy-deep); }
  html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office .lead { color: #22344A; }
  html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office .btn--primary { background: var(--ink); color: var(--paper); }
  html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office .btn--primary:hover { background: #0B0B0A; color: var(--paper); }
  html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office .btn--primary .btn__disc { background: var(--paper); color: var(--ink); }
  html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office .btn--secondary { background: var(--brand-navy); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office .btn--secondary:hover { background: var(--navy-deep); box-shadow: var(--shadow-lift); }
  html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office .btn--secondary .btn__disc { color: var(--brand-navy); }
  html:is(:not(.js), [data-office="open"], [data-office="hours"]) .fhero--office a:focus-visible { outline-color: var(--navy-deep); }
}
/* Small laptops: the copy is as tall as ever and the frame smaller, so a
   little more air keeps the buttons off the next-door roof. */
@media (min-width: 62em) and (max-width: 74.99em) {
  .fhero--office .fhero__wrap { padding-bottom: 3rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .fhero--office, .fhero--office::after, .fhero--office .fhero__bg { transition: background-color 900ms var(--ease-out), opacity 900ms var(--ease-out); }
  /* At dusk the day photograph leaves only once the dusk one is in, so the
     two never show through each other where they fade out at the top. */
  html.js:not([data-office="open"]):not([data-office="hours"]) .fhero--office .fhero__bg--day { transition: opacity 0s linear 900ms; }
}

/* The steps under the contact panel and on Thank-you: display numbers in the
   brand blue. A modifier, so the homepage's own steps keep theirs. */
.steps--page .step__no { font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1; color: var(--brand-navy); margin-bottom: 1rem; }

/* "Other areas of work": the heading and note stacked on the left, the two
   tiles filling the right, as the Google excerpts sit on Reviews. */
@media (min-width: 62em) {
  .related > .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 5rem; align-items: start; }
  .related .section-head--split { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 0; align-items: start; }
  .related .cards--two { max-width: none; }
}

/* After the blue FAQ, the related tiles need no rule of their own. */
.band--blue + .related > .wrap { border-top: 0; }

/* The contact card after an article, the tiles or the team: that section's
   own bottom padding is the gap, so the air above the card is not doubled.
   (Not after .band: on the homepage the FAQ band sits right before it.) */
:is(.article, .related, .team, .reviews--google) + .closing > .wrap { padding-top: 0; }

@media print {
  .fhero--page { background: none; color: var(--text-body); }
  .fhero--page .eyebrow, .fhero a.chip { color: var(--text-muted); background: none; box-shadow: none; }
  .fhero--page a:not(.btn):not(.chip):not(.arrow-link), .fhero--page .arrow-link { color: var(--text-body); }
  .fhero__copy > .fhero__actions, .closing__copy > .closing__actions { display: none; }
  .fhero--reviews .reviews__bg { display: none; }
  .fhero--page .voices__score { color: var(--text-body); }
  .fhero--page .voices__stars { color: var(--brand-navy); }
  .fhero--page .voices__meta { color: var(--text-muted); }
  .site-bar--over { position: static; }
  .site-bar--over .site-bar__logo img { filter: brightness(0); }
  .site-bar--over .site-bar__phone { color: var(--text-body); }
  .band--blue { background: none; color: var(--text-body); }
  .band--blue .heading-1, .band--blue .faq__item summary, .band--blue .faq__body p, .glance__title, .creds--glance dd { color: var(--text-body); }
  .band--blue :is(.eyebrow, .label, .section-head__note, .disclaimer) { color: var(--text-muted); }
  .creds--glance dt { color: var(--text-muted); }
  .band--blue :is(.faq__list, .faq__item, .creds--glance, .creds--glance > div) { border-color: var(--hairline); }
  .band--blue .faq__plus { display: none; }
  .band--blue a, .band--blue .faq__body a { color: var(--text-body); text-decoration-color: currentColor; }
  .closing .eyebrow, .closing__facts dt, .closing__facts dd.closing__note { color: var(--text-muted); }
  .contact-panel--split { margin-top: 0; }
  .contact-facts { background: none; color: var(--text-body); }
  .contact-facts .label, .contact-facts dd.contact-facts__note, .contact-facts__area { color: var(--text-muted); }
  .contact-facts__list dd, .contact-facts a { color: var(--text-body); }
}

/* --- News (NEWS-PLAN.md, 5 Oct 2026) ------------------------------------------
   Officers' cases in the press. The First Responder page leads with one story
   as a navy card, the rest in a row of photo cards that scrolls sideways
   (arrow buttons appear once site.js is running); the homepage shows the top
   three in the same row. Every card opens the office's own summary page
   (news-*.html, generated by build_news.py), and those pages link out to the
   publishers. The photographs are Wikimedia Commons pictures of downtown
   St. Louis, credited on each summary page — never the publishers' own. */
.news { background: var(--paper-warm); }
.news > .wrap { padding-block: clamp(3.5rem, 8vw, 6rem); border-top: 1px solid var(--hairline); }
.news--home > .wrap { border-top: 0; }   /* after the navy reviews band */
.news__head { display: grid; gap: 1.25rem; margin-bottom: 2.5rem; }
.news__head .eyebrow { margin-bottom: 1rem; }
.news__all { margin-top: 0.875rem; }
@media (min-width: 62em) {
  .news__head { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 4rem; align-items: end; }
}

/* The featured story: the contact card's language, photograph melting into
   the navy, the headline in the white display serif. The headline's link is
   stretched over the whole card. */
.news-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  background: var(--navy-deep);
  color: var(--paper);
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-card);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.news-feature__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.news-feature__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; transition: transform var(--motion-slow); }
.news-feature:hover .news-feature__img { transform: scale(1.03); }
.news-feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #0E2137 0%, rgba(14, 33, 55, 0.6) 22%, rgba(14, 33, 55, 0) 55%);
}
.news-feature__copy { padding: 0.5rem clamp(1.5rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3rem); }
.news-feature__copy > * + * { margin-top: 1rem; }
.news-feature .eyebrow { color: var(--on-navy-muted); }
.news-feature__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--paper);
  max-width: 24ch;
  text-wrap: balance;
}
.news-feature__link, .news-feature__link:hover { color: inherit; text-decoration: none; }
.news-feature__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.news-feature__link:focus-visible { outline: none; }
.news-feature__link:focus-visible::after { outline: 3px solid var(--paper); outline-offset: -6px; border-radius: var(--radius-photo); }
.news-feature__summary { font-size: 17px; line-height: 28px; color: rgba(255, 255, 255, 0.88); max-width: 52ch; text-wrap: pretty; }
.news-feature__meta { font-size: 14px; line-height: 22px; color: var(--on-navy-muted); }
.news-feature .news-feature__more { margin-top: 1.75rem; background: var(--paper); color: var(--ink); }
.news-feature .news-feature__more .btn__disc { background: var(--ink); color: var(--paper); }
.news-feature:hover .news-feature__more { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.news-feature:hover .news-feature__more .btn__disc svg { transform: translate(1.5px, -1.5px); }
@media (min-width: 62em) {
  .news-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 27rem; }
  .news-feature__media { aspect-ratio: auto; }
  .news-feature__media::after {
    background: linear-gradient(90deg, rgba(14, 33, 55, 0) 45%, rgba(14, 33, 55, 0.55) 72%, #0E2137 100%);
  }
  .news-feature__copy { align-self: center; padding: 3rem 3.5rem 3rem 1.5rem; }
}

/* The row. Cards snap to the start; the row scrolls by swipe, trackpad or
   keyboard (the track takes focus), and site.js adds .is-ready to show the
   arrows, .is-static when every card fits, and aria-disabled at either end.
   The track's padding gives the cards' shadows room; the negative margin
   keeps the cards on the wrap's edges. */
.news-rail__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; min-height: 2.75rem; }
.news-rail__label { font-size: 12px; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.news-rail__controls { display: none; gap: 0.5rem; }
.news-rail.is-ready .news-rail__controls { display: flex; }
.news-rail.is-static .news-rail__controls { display: none; }
.news-rail__btn {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: box-shadow var(--motion), opacity var(--motion), transform var(--motion);
}
.news-rail__btn:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.news-rail__btn[aria-disabled="true"] { opacity: 0.4; cursor: default; box-shadow: none; transform: none; }
.news-track {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.75rem;
  margin: -0.75rem;
  padding: 0.75rem;
  scrollbar-width: thin;
}
.news-rail.is-ready .news-track { scrollbar-width: none; }
.news-rail.is-ready .news-track::-webkit-scrollbar { display: none; }
.news-track:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; border-radius: var(--radius-card); }
.news-track__list { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 40em) { .news-track__list { grid-auto-columns: calc((100% - 1.5rem) / 2); gap: 1.5rem; } }
@media (min-width: 62em) { .news-track__list { grid-auto-columns: calc((100% - 3rem) / 3); } }

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform var(--motion), box-shadow var(--motion);
}
.news-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.news-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--canvas); }
.news-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-slow); }
.news-card:hover .news-card__img { transform: scale(1.03); }
.news-card__tag {
  position: absolute;
  left: 0.875rem;
  top: 0.875rem;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(14, 33, 55, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 0.5625rem 0.8125rem;
  border-radius: var(--radius-pill);
}
.news-card__body { display: flex; flex-direction: column; gap: 0.625rem; flex: 1; padding: 1.25rem 1.375rem 1.375rem; }
.news-card__meta { font-size: 12px; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.news-card__meta span { white-space: nowrap; }
.news-card__title { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.3; color: var(--text-body); text-wrap: balance; transition: color var(--motion); }
.news-card:hover .news-card__title { color: var(--brand-navy); }
.news-card__link, .news-card__link:hover { color: inherit; text-decoration: none; }
.news-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.news-card__link:focus-visible { outline: none; }
.news-card__link:focus-visible::after { outline: 2px solid var(--brass); outline-offset: -2px; border-radius: var(--radius-card); }
.news-card__summary { font-size: 15px; line-height: 24px; color: var(--text-body); text-wrap: pretty; }
.news-card__more { margin-top: auto; padding-top: 0.375rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 15px; color: var(--brand-navy); }
.news-card__more svg { transition: transform var(--motion); }
.news-card:hover .news-card__more svg { transform: translate(1.5px, -1.5px); }

.news .disclaimer { margin-top: 2.25rem; }
.news__credit { font-size: 13px; line-height: 20px; color: var(--text-muted); margin-top: 0.75rem; max-width: var(--measure); }
.news__credit a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }

/* A story's own page: the practice pages' stock hero, a longer headline at a
   smaller size, the date beside the back chip; the case at a glance in the
   sidebar (shown at every width, above the prose on phones), then the
   coverage as link cards. Each photograph sets its own crops. */
.news-hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.news-hero__date { font-size: 12px; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-navy-muted); }
.fhero.fhero--news .display-1 { font-size: clamp(2rem, 4.2vw, 3.125rem); line-height: 1.1; max-width: 20ch; }
.fhero--carnahan { --fhero-pos: 35% 45%; --fhero-pos-lg: 0% 50%; }
.fhero--night { --fhero-pos: 50% 60%; --fhero-pos-lg: 50% 60%; }
.fhero--tahoe { --fhero-pos: 75% 60%; --fhero-pos-lg: 100% 60%; }
.fhero--oldcourthouse { --fhero-pos: 50% 30%; --fhero-pos-lg: 0% 35%; }
.fhero--hq { --fhero-pos: 50% 45%; --fhero-pos-lg: 0% 50%; }
.fhero--civil { --fhero-pos: 40% 35%; --fhero-pos-lg: 0% 40%; }
.fhero--cityhall { --fhero-pos: 50% 60%; --fhero-pos-lg: 50% 60%; }
.news-facts { background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.5rem; }
.news-facts__label { font-size: 12px; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.75rem; }
.news-facts dl { border-top: 1px solid var(--hairline); }
.news-facts dl > div { padding: 0.75rem 0; border-bottom: 1px solid var(--hairline); }
.news-facts dt { font-size: 12px; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.news-facts dd { margin: 0.25rem 0 0; font-size: 16px; line-height: 24px; color: var(--text-body); }
.prose .news-links { grid-template-columns: 1fr; }
.prose .news__credit { margin-top: 0.75rem; }

@media print {
  .news-rail__controls, .news-card__more, .news-feature__more { display: none; }
  .news-track { overflow: visible; margin: 0; padding: 0; }
  .news-track__list { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .news-feature { background: none; color: var(--text-body); box-shadow: none; border: 1px solid var(--hairline); }
  .news-feature__media::after { content: none; }
  .news-feature__title, .news-feature__summary { color: var(--text-body); }
  .news-feature .eyebrow, .news-feature__meta, .news-hero__date { color: var(--text-muted); }
}

/* --- Footer --- */
.site-footer { background: var(--brand-navy); color: var(--paper); }
.site-footer > .wrap { padding-block: clamp(3.25rem, 6vw, 4.5rem); }
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.site-footer a:focus-visible { outline-color: var(--brass); }
.footer__top { display: grid; gap: 3.25rem; grid-template-columns: 1fr; align-items: start; }
.logo--footer { --logo-w: 220px; padding: 0; }
.footer__address { font-size: 17px; line-height: 28px; color: var(--paper); }
.footer__areas { font-size: 14px; line-height: 22px; color: var(--on-navy-muted); margin-top: 0.75rem; }
.footer__areas a { color: var(--on-navy-muted); }
.footer__areas a:hover { color: var(--paper); }
.footer__nav {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 14px;
  line-height: 22px;
}
.footer__nav a { color: var(--on-navy-muted); display: inline-block; padding: 0.25rem 0; }
.footer__nav a:hover { color: var(--paper); }
.footer__legal { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.footer__legal p { font-size: 14px; line-height: 22px; color: var(--on-navy-muted); max-width: 72ch; }
.footer__legal p + p { margin-top: 0.75rem; }
.footer__copyright { margin-top: 1.25rem; }
@media (min-width: 48em) {
  .footer__top { grid-template-columns: auto 1fr; gap: 4rem; align-items: center; }
}

/* --- Tablet tier (48em to 62em) ---------------------------------------------
   Between phone and desktop the grids were one column at twice the size.
   Two columns for the heroes; tiles, steps and reviews three-up. */
@media (min-width: 48em) and (max-width: 61.99em) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 42%); gap: 2.5rem; }
  .hero__photo { aspect-ratio: auto; height: 100%; min-height: 520px; }
  .page-hero--photo .page-hero__grid,
  .page-hero--aside .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 45%); gap: 2.5rem; }
  .cards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .cards--two { grid-template-columns: repeat(2, 1fr); }
  .card__bar-title { font-size: 15px; }
  .steps__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .reviews__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .review { padding: 1.5rem; }
  .about__grid { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 2.5rem; }
}

/* --- Reduced motion ---------------------------------------------------------
   Everything lands in its final, fully visible state instantly:
   zero durations AND zero delays (a delayed fill-both animation would
   otherwise hold content invisible through its delay), and scroll-driven
   timelines reset to time-based so they complete at once. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    animation-timeline: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .review:hover { transform: none; }
  .btn:active { transform: none; }
}