/* ============================================================
   BAUDER & ASSOCIATES, TRIAL LAWYERS
   Design system. Four registers carry the whole site:
     - Libre Caslon Display: the counsel voice at size. Caslon is
       the typeface of American law (the founding documents, the
       law reviews); at display sizes it argues on its own.
     - Libre Caslon Text: the same voice at reading size (h3s,
       amounts, italics, letters from clients).
     - Public Sans: the plain-language voice. The United States
       government's own forms typeface, the register a filing is
       actually written in.
     - IBM Plex Mono: the RECORD register. Every dollar figure,
       date, docket line, and disclosure label is set in mono so
       numbers read as entries in a file, not marketing claims.
   Dark navy = the courtroom. Cream and paper = the file.
   Gold is rationed: it marks money, deadlines, and the way out.
   Goldenrod (--sticker) belongs to exhibit stickers alone.
   The motion identity: nothing fades in for decoration. Display
   lines are ENTERED INTO THE RECORD (a sweep reveal, left to
   right, like a line being scanned into the file); everything
   else settles quietly. See .rv / .section-head h2 / .hl-w.
   ============================================================ */

:root {
  --navy: #0B1628;
  --navy-soft: #122036;
  --navy-band: #091222;
  --navy-deep: #060D1B;
  --cream: #F4EFE3;
  --paper: #FAF7ED;
  --paper-warm: #EFE7D4;
  --gold: #C9A84C;
  --gold-bright: #E0BE62;
  --gold-dim: #A98A38;
  --sticker: #E3C36A;
  --ink: #0B1628;
  --gray: #C9D0DC;
  --gray-dim: #8A95A8;
  --warm-gray: #5C5246;
  --urgent: #8E1F2C;
  --urgent-deep: #6E1722;
  --live: #4ade80;
  --hairline-gold: rgba(201, 168, 76, 0.22);
  --hairline-gold-strong: rgba(201, 168, 76, 0.45);
  --hairline-ink: rgba(11, 22, 40, 0.12);
  --shadow-soft: 0 2px 14px rgba(11, 22, 40, 0.10);
  --shadow-lift: 0 12px 32px rgba(11, 22, 40, 0.16);

  --display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif;
  --serif: 'Libre Caslon Text', Georgia, serif;
  --sans: 'Public Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --fs-display: clamp(2.6rem, 4.9vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 3.1vw, 2.7rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0313rem;
  --fs-eyebrow: 0.72rem;

  --pad-section: clamp(4.25rem, 8vw, 7rem) clamp(1.25rem, 5vw, 3rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Cross-document page transitions: the file's pages turn quietly instead of
   flashing white. Progressive; browsers without the API simply navigate. */
@view-transition { navigation: auto; }
@media not (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: vt-out 0.22s ease both; }
  ::view-transition-new(root) { animation: vt-in 0.3s ease both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* A breath of paper grain over the light surfaces; the file is a physical
   object. Kept under 3% so it is felt, never seen. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@media print { body::after { display: none; } }

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink);
  background: var(--cream);
  font-feature-settings: 'kern', 'liga';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2 { font-family: var(--display); line-height: 1.08; font-weight: 400; letter-spacing: -0.01em; }
h3, h4 { font-family: var(--serif); line-height: 1.2; font-weight: 700; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
::selection { background: rgba(201, 168, 76, 0.35); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 600;
  padding: 0.7rem 1.2rem;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------------- shared atoms ---------------- */

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-block;
}

.record-line {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.section { padding: var(--pad-section); }
.container { max-width: 1200px; margin: 0 auto; }
.container-narrow { max-width: 880px; margin: 0 auto; }

.section-head { text-align: center; margin-bottom: 3.25rem; }
.section-head h2 {
  font-size: var(--fs-h2);
  color: var(--ink);
  margin: 0.875rem 0 1rem;
  text-wrap: balance;
}
.section-head p { color: var(--warm-gray); max-width: 640px; margin: 0 auto; }
.section-head--left { text-align: left; }
.section-head--left p { margin: 0; }

.on-dark .section-head h2, .section-head.on-dark h2 { color: var(--cream); }
.on-dark .section-head p, .section-head.on-dark p { color: var(--gray); }

/* Buttons */
.btn {
  display: inline-block;
  padding: 1rem 2rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  border: none;
  text-align: center;
}
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover {
  background: var(--gold-bright);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(201, 168, 76, 0.25);
}
.btn-ghost { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.btn-ghost:hover { background: rgba(201, 168, 76, 0.08); transform: translateY(-1px); }
.btn-ghost--ink { color: var(--ink); border-color: var(--ink); }
.btn-ghost--ink:hover { background: rgba(11, 22, 40, 0.05); }
/* the press: a button lands like a stamp, not a spring */
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.08s; }

/* Reveals: JS adds .in; no-JS pages render finished via the html.no-js rule.
   Body content SETTLES (a quiet 14px), it does not bounce in. Display lines
   are ENTERED INTO THE RECORD instead: a left-to-right sweep with a gold
   scan edge, applied automatically to every .section-head h2 so no page has
   to opt in. The sweep is the site's one motion signature; keep it rationed. */
.rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.rv.in { opacity: 1; transform: none; }

.js-anim .section-head h2,
.js-anim .sweep-line {
  clip-path: inset(-4% 102% -12% -2%);
  transition: clip-path 1s cubic-bezier(0.6, 0.05, 0.2, 1);
  position: relative;
}
.js-anim .section-head.in h2,
.js-anim .sweep-line.in,
.js-anim .rv.in .sweep-line,
.js-anim .section-head.rv.in h2 { clip-path: inset(-4% -2% -12% -2%); }
.js-anim .section-head.in h2::after,
.js-anim .sweep-line.in::after {
  content: '';
  position: absolute;
  top: 6%; bottom: 0;
  left: 0;
  width: 2px;
  background: var(--gold);
  animation: sweep-edge 1s cubic-bezier(0.6, 0.05, 0.2, 1) forwards;
  pointer-events: none;
}
@keyframes sweep-edge {
  0% { left: 0%; opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { left: 100%; opacity: 0; }
}
html.no-js .section-head h2, html.reduced .section-head h2,
html.no-js .sweep-line, html.reduced .sweep-line { clip-path: none; }
.rv-rule {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.rv-rule.in { transform: scaleX(1); }
html.no-js .rv, html.no-js .rv-rule { opacity: 1; transform: none; }

/* The gold hairline that draws itself under section heads */
.head-rule {
  width: 84px;
  height: 1px;
  background: var(--gold);
  margin: 1.1rem auto 0;
}
.section-head--left .head-rule { margin-left: 0; }

/* ============================================================
   URGENT STRIP + VERDICTS TICKER
   ============================================================ */

.urgent-strip {
  background: var(--urgent);
  border-bottom: 1px solid var(--urgent-deep);
  color: var(--cream);
  overflow: hidden;
}
.urgent-strip__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0 clamp(1.25rem, 4vw, 2.4rem);
}
.urgent-strip__inner--simple { grid-template-columns: auto 1fr auto; }
.urgent-strip__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.1rem 0.6rem 0;
  color: var(--cream);
  text-transform: uppercase;
  border-right: 1px solid rgba(244, 239, 227, 0.18);
  font-feature-settings: 'tnum' on, 'lnum' on;
  white-space: nowrap;
}
.urgent-strip__phone strong { color: var(--gold-bright); font-weight: 600; letter-spacing: 0.04em; }
.urgent-strip__phone .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.22);
  display: inline-block;
  animation: livepulse 2.4s ease-in-out infinite;
  flex: none;
}
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.urgent-strip__results {
  overflow: hidden;
  position: relative;
  padding: 0 1.1rem;
  border-right: 1px solid rgba(244, 239, 227, 0.18);
  min-width: 0;
}
.urgent-strip__results::before,
.urgent-strip__results::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 36px;
  z-index: 2;
  pointer-events: none;
}
.urgent-strip__results::before { left: 1.1rem; background: linear-gradient(90deg, var(--urgent), rgba(142, 31, 44, 0)); }
.urgent-strip__results::after { right: 1.1rem; background: linear-gradient(-90deg, var(--urgent), rgba(142, 31, 44, 0)); }
.urgent-strip__ticker {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  padding: 0.6rem 0;
  white-space: nowrap;
  animation: ticker 44s linear infinite;
}
.urgent-strip__results:hover .urgent-strip__ticker { animation-play-state: paused; }
.urgent-strip__ticker-eyebrow {
  color: rgba(244, 239, 227, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  margin-right: 0.6rem;
}
.urgent-strip__verdict {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  color: var(--cream);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  font-feature-settings: 'tnum' on, 'lnum' on;
}
.urgent-strip__verdict strong {
  color: var(--gold-bright);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
}
.urgent-strip__verdict-tag { color: rgba(244, 239, 227, 0.55); font-size: 0.7rem; letter-spacing: 0.04em; }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Language toggle: lives in the strip on every page */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0 0.35rem 1.1rem;
  align-self: center;
}
.lang-toggle .hablamos {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--cream);
  margin-right: 0.65rem;
  white-space: nowrap;
}
.lang-toggle button {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  background: transparent;
  color: rgba(244, 239, 227, 0.65);
  border: 1px solid transparent;
  padding: 0.28rem 0.5rem;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.lang-toggle button[aria-pressed="true"] {
  color: var(--gold-bright);
  border-color: rgba(224, 190, 98, 0.55);
}
.lang-toggle button:hover { color: var(--cream); }

/* ============================================================
   NAV
   ============================================================ */

.nav { position: sticky; top: 0; z-index: 80; background: var(--navy); }
.nav.scrolled { box-shadow: 0 6px 24px rgba(6, 13, 27, 0.45); }
.nav-bottom-inner { transition: padding 0.35s ease; }
.nav.scrolled .nav-bottom-inner { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.nav-top { background: var(--navy-band); border-bottom: 1px solid rgba(201, 168, 76, 0.10); }
.nav-top-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.55rem clamp(1.25rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.nav-phone {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--cream);
  letter-spacing: 0.04em;
  font-weight: 500;
  font-feature-settings: 'tnum' on, 'lnum' on;
}
.nav-phone:hover { color: var(--gold); }
.nav-top-cta { padding: 0.55rem 1.15rem; font-size: 0.6875rem; letter-spacing: 0.18em; }

.nav-bottom { border-bottom: 1px solid var(--hairline-gold); }
.nav-bottom-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.95rem clamp(1.25rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.wordmark-wrap { display: flex; align-items: center; gap: 0.8rem; }
/* The mark draws with stroke="currentColor", so it MUST be given a colour.
   Without this it inherits the page ink, which is the same navy as the
   header behind it, and the mark renders invisibly at full opacity. */
.wordmark-wrap .mark-slot { display: inline-flex; width: 34px; height: 34px; flex: none; color: var(--gold); }
.wordmark-wrap .mark-slot svg { width: 100%; height: 100%; }
.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark-sub {
  display: block;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray-dim);
  margin-top: 0.15rem;
}

.nav-links { display: flex; gap: 1.9rem; list-style: none; align-items: center; }
.nav-links a {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--cream);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
  padding: 0.35rem 0;
  border-bottom: 1px solid transparent;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--hairline-gold-strong); }

.nav-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--hairline-gold);
  border-radius: 2px;
  width: 44px;
  height: 40px;
  cursor: pointer;
  position: relative;
}
.nav-burger span, .nav-burger::before, .nav-burger::after {
  content: '';
  position: absolute;
  left: 11px; right: 11px;
  height: 1.5px;
  background: var(--gold);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-burger::before { top: 13px; }
.nav-burger span { top: 19px; }
.nav-burger::after { top: 25px; }
.nav-burger[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span { opacity: 0; }
.nav-burger[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(6, 13, 27, 0.96);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 1.25rem;
  flex-direction: column;
}
.drawer.open { display: flex; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.drawer-close {
  background: transparent;
  border: 1px solid var(--hairline-gold);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  border-radius: 2px;
  cursor: pointer;
}
.drawer-links { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
.drawer-links a {
  display: block;
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--cream);
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.14);
}
.drawer-links a[aria-current="page"] { color: var(--gold); }
.drawer-cta { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.drawer-note {
  margin-top: auto;
  font-family: var(--mono);
  color: var(--gray-dim);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 0.75rem;
}

/* ============================================================
   HERO (homepage split + interior page heroes)
   ============================================================ */

.hero {
  background: var(--navy);
  color: var(--cream);
  min-height: 88vh;
  /* iOS Safari: 88vh measures the URL-bar-collapsed viewport and overshoots
     the first paint. svh is the honest first-paint height; vh stays as the
     fallback for engines without it. */
  min-height: 88svh;
  display: grid;
  grid-template-columns: 52% 48%;
  position: relative;
  overflow: hidden;
}
.hero-content {
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-size: clamp(2.2rem, 4.1vw, 3.8rem);
  color: var(--cream);
  line-height: 1.08;
  margin-bottom: 1.75rem;
  max-width: 700px;
}
.hero h1 em { color: var(--gold); font-family: var(--serif); font-style: italic; font-weight: 400; }
/* Each word sits in an overflow-hidden mask (.hl-w) and rises within it,
   so lines surface the way a page comes up out of a folder: whole words,
   baseline-true, no letter confetti. */
.hl-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hl-w > span { display: inline-block; }
.js-anim .hl-w > span { transform: translateY(112%); }
.js-anim .hero-title.in .hl-w > span {
  transform: none;
  transition: transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);
}
.hero-sub {
  color: var(--cream);
  max-width: 560px;
  margin-bottom: 2.4rem;
  line-height: 1.85;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.1rem; }
.hero-rule { width: 80px; height: 1px; background: var(--gold); margin-bottom: 1.2rem; }
.trustline {
  font-family: var(--mono);
  color: var(--gray-dim);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.9;
}
.hero-photo { position: relative; height: 100%; min-height: 88vh; }
.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--navy) 0%, transparent 30%);
  z-index: 1;
  pointer-events: none;
}
.hero-photo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  background: linear-gradient(0deg, rgba(11, 22, 40, 0.55), transparent);
  z-index: 1;
  pointer-events: none;
}
.hero-photo figcaption { position: absolute; right: clamp(1.5rem, 2.6vw, 2.4rem); bottom: clamp(1.2rem, 2vw, 1.6rem); z-index: 2; }

/* HERO FIGURES. Both partners are lifted off their backgrounds and stand on
   the navy itself, so the hero carries the firm rather than a room. Equal
   scale, equal plate, bottom aligned: neither is the other's inset, because a
   subordinate figure would illustrate the pyramid the copy argues against. */
.hero-figures {
  position: relative;
  height: 100%;
  min-height: 88vh;
  min-height: 88svh;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Biased ABOVE centre rather than bottom aligned. Bottom alignment pins the
     pair to the foot of the hero, so on a tall window their heads sink far
     below the headline and the top half of the column empties out. The uneven
     block padding is what holds them high without stranding them at the top of
     a short one. */
  justify-content: center;
  padding: clamp(0.5rem, 1vw, 1rem) clamp(0.9rem, 2.2vw, 2.2rem) clamp(3.2rem, 7vw, 6rem);
}
/* The two overlap by design. Sized as a percentage of the stage rather than in
   vh so the pair scales with its column instead of with the window, which is
   what keeps the heads the same size at every width. */
.hero-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-fig { display: block; height: auto; }
.hero-fig--bauder { width: 63%; }
.hero-fig--vasquez { width: 47%; margin-left: -10%; }
/* The partners take the stand: each figure rises into place once, Bauder
   first, Vasquez a beat behind, and the plates follow. Keyframes only, so
   the no-JS page and reduced motion (global animation kill) render the
   finished state with zero extra rules. */
@keyframes fig-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
.js-anim .hero-fig--bauder { animation: fig-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; }
.js-anim .hero-fig--vasquez { animation: fig-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }
.js-anim .hero-plates .counsel-plate:first-child { animation: fig-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; }
.js-anim .hero-plates .counsel-plate:last-child { animation: fig-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both; }
.hero-plates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(0.6rem, 1.4vw, 1.4rem);
  margin-top: clamp(0.9rem, 1.6vw, 1.4rem);
}
/* A cut-out figure on flat colour floats. This is the ground it stands on:
   one soft warm pool under both of them, never a drop shadow, which would
   claim a light direction the two photographs do not share. It is painted on
   the HERO rather than on the figure column, because a gradient bounded by the
   column would step visibly against flat navy at the column edge. */
.hero::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 66%;
  height: 74%;
  background: radial-gradient(64% 56% at 56% 90%, rgba(201, 168, 76, 0.085), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* MEASURED, not chosen. Joshua's supplied cut-outs frame the two differently:
   his head is 628px across a 1954px frame (he is shown to the thigh), hers is
   730px across 1691px (she stops at the hip). Equal widths would render his
   head 26% smaller. His source is cropped to the SAME height-to-head ratio as
   hers before export, which makes both figures the same rendered height, and
   the widths above then fall out of their aspect ratios with the heads
   matching on screen. Re-derive both numbers if either source is replaced. */
.counsel-plate {
  position: static;
  align-self: stretch;
  margin-top: clamp(0.9rem, 1.6vw, 1.4rem);
  z-index: 3;
}
.counsel-plate::before {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 0.72rem;
}
.counsel-plate b {
  display: block;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 0.45rem;
}
.counsel-name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1rem, 1.45vw, 1.32rem);
  line-height: 1.14;
  color: var(--cream);
  margin-bottom: 0.3rem;
}
.counsel-role {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  line-height: 1.5;
}

.no-fee {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: rgba(201, 168, 76, 0.06);
  margin-bottom: 1.6rem;
  align-self: flex-start;
}
.no-fee__mark { color: var(--gold); display: inline-flex; width: 15px; height: 15px; }
.no-fee__mark svg { width: 100%; height: 100%; }
.no-fee__text {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.6875rem;
  color: var(--gold);
  font-weight: 500;
}
.hero-eyebrow { margin-bottom: 1.6rem; }

/* Editorial photo strip under the hero */
.hero-strip {
  background: var(--navy);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1px, 0.2vw, 4px);
}
.hero-strip-card { margin: 0; position: relative; overflow: hidden; background: #0a1426; }
.hero-strip-card img {
  display: block;
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-strip-card:hover img { transform: scale(1.03); }
.hero-strip-card.hero-strip-tall img { aspect-ratio: 4 / 5; object-position: center 35%; }
.hero-strip-card figcaption { position: absolute; left: clamp(1rem, 2vw, 1.6rem); bottom: clamp(1.1rem, 2vw, 1.5rem); }

/* Exhibit stickers. The goldenrod tag every litigator inks and slaps on a
   deposition exhibit; here it labels the photography. Deliberately imperfect:
   a half-degree of rotation, a hard shadow, no border radius. Goldenrod is
   reserved for these tags alone. */
figure figcaption.exhibit,
figcaption.exhibit {
  background: var(--sticker);
  color: var(--navy);
  border: none;
  padding: 0.5rem 0.9rem 0.55rem;
  transform: rotate(-1.4deg);
  box-shadow: 0 2px 0 rgba(6, 13, 27, 0.35), 0 6px 16px rgba(6, 13, 27, 0.3);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  max-width: min(70%, 300px);
}
figcaption.exhibit b {
  display: block;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  color: var(--urgent-deep);
  border-bottom: 1px solid rgba(11, 22, 40, 0.35);
  padding-bottom: 0.2rem;
  margin-bottom: 0.25rem;
}
figcaption.exhibit.flip { transform: rotate(1.1deg); }

/* Interior page hero */
.page-hero {
  background: var(--navy);
  color: var(--cream);
  padding: clamp(3.75rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 {
  font-size: var(--fs-display);
  color: var(--cream);
  margin: 1rem 0 1.25rem;
  max-width: 820px;
  text-wrap: balance;
}
.page-hero h1 em { color: var(--gold); font-style: italic; }
.page-hero .lede { color: var(--gray); max-width: 700px; font-size: 1.09rem; line-height: 1.8; }
.page-hero--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.24;
}
.page-hero--image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 22, 40, 0.55), var(--navy) 88%);
}
.page-hero--gavel::before { background-image: url('../images/bauder/exhibit-g-eighteen.jpg'); }
.page-hero--library::before { background-image: url('../images/bauder/exhibit-i-records.jpg'); }
/* Every inner page opens over an artifact of the work its page describes.
   NOTE two files are named for each other's content and are wired by
   CONTENT, deliberately: exhibit-h-intake.jpg is the stenotype (the FAQ's
   examination-transcript register) and exhibit-e-stenotype.jpg is the
   2:14 a.m. intake desk (the 24/7 claim on the case-review page). */
.page-hero--scene::before { background-image: url('../images/bauder/exhibit-c-scene.jpg'); background-position: center 42%; }
.page-hero--ecm::before { background-image: url('../images/bauder/exhibit-d-ecm.jpg'); }
.page-hero--closing::before { background-image: url('../images/bauder/exhibit-f-closing.jpg'); background-position: center 38%; }
.page-hero--steno::before { background-image: url('../images/bauder/exhibit-h-intake.jpg'); background-position: center 60%; }
.page-hero--night::before { background-image: url('../images/bauder/exhibit-e-stenotype.jpg'); background-position: center 55%; }
.page-hero .head-rule { margin: 1.4rem 0 0; }

/* Big stat band (counters) */
.statband { background: var(--navy-band); border-top: 1px solid var(--hairline-gold); border-bottom: 1px solid var(--hairline-gold); }
.statband-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem clamp(1.25rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.stat { text-align: center; }
.stat b {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  color: var(--gold);
  font-feature-settings: 'tnum' on, 'lnum' on;
  letter-spacing: -0.01em;
}
.stat span {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-dim);
}

/* ============================================================
   THE ANATOMY OF A VERDICT (pinned scroll showpiece)
   ============================================================ */

.an-wrap { position: relative; background: var(--navy-deep); }
.an-stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--cream);
  padding: clamp(1.5rem, 3vh, 3rem) clamp(1.25rem, 5vw, 3rem);
  overflow: hidden;
}
.an-spacer { height: 460vh; }
html.no-js .an-spacer, html.reduced .an-spacer { height: 0; }
.an-inner { max-width: 1200px; margin: 0 auto; width: 100%; }
.an-head { text-align: center; margin-bottom: clamp(1rem, 3vh, 2.25rem); }
.an-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); color: var(--cream); margin: 0.7rem 0 0.5rem; }
.an-head .an-disclosure {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-dim);
}
.an-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.an-phase { min-height: 15.5rem; position: relative; }
.js-anim .an-phase.swap .an-kicker,
.js-anim .an-phase.swap .an-title,
.js-anim .an-phase.swap .an-copy,
.js-anim .an-phase.swap .an-record { animation: an-swap 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.js-anim .an-phase.swap .an-title { animation-delay: 0.03s; animation-fill-mode: backwards; }
.js-anim .an-phase.swap .an-copy { animation-delay: 0.07s; animation-fill-mode: backwards; }
.js-anim .an-phase.swap .an-record { animation-delay: 0.1s; animation-fill-mode: backwards; }
@keyframes an-swap {
  0% { opacity: 0; transform: translateY(9px); }
  100% { opacity: 1; transform: none; }
}
.an-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.an-kicker .an-day { color: var(--cream); font-size: 0.9rem; letter-spacing: 0.1em; }
.an-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: var(--cream); margin-bottom: 0.8rem; }
.an-copy { color: var(--gray); line-height: 1.8; max-width: 460px; margin-bottom: 1rem; font-size: 0.98rem; }
.an-record {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gold-dim);
  border-left: 2px solid var(--gold);
  padding: 0.35rem 0 0.35rem 0.9rem;
  text-transform: uppercase;
  line-height: 1.8;
}
.an-offer {
  margin-top: 1.4rem;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.an-offer-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-dim);
}
.an-offer-value {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--gold);
  font-feature-settings: 'tnum' on, 'lnum' on;
  min-width: 7ch;
}
.an-offer-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--urgentText, #d98a94);
}
.an-chart-wrap { position: relative; }
.an-chart { width: 100%; height: auto; display: block; }
.an-chart .axis { stroke: rgba(201, 208, 220, 0.18); stroke-width: 1; }
.an-chart .tick-label {
  font-family: var(--mono);
  font-size: 10.5px;
  fill: var(--gray-dim);
  letter-spacing: 0.06em;
}
.an-chart .offer-path {
  stroke: var(--gold);
  stroke-width: 2.5;
  fill: none;
  stroke-linejoin: miter;
}
.an-chart .offer-fill { fill: rgba(201, 168, 76, 0.08); stroke: none; }
.an-chart .sweep { stroke: rgba(224, 190, 98, 0.65); stroke-width: 1; stroke-dasharray: 3 4; }
.an-chart .ev-dot { fill: var(--cream); stroke: var(--gold); stroke-width: 1.5; }
.an-chart .ev-dot.lit { fill: var(--gold); }
.an-chart .ev-label {
  font-family: var(--mono);
  font-size: 9.5px;
  fill: var(--gray-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.an-chart .ev-label.lit { opacity: 1; fill: var(--gray); }
.an-rail { display: flex; gap: 0.5rem; justify-content: center; margin-top: clamp(0.9rem, 2.5vh, 1.6rem); }
.an-rail i {
  width: 26px; height: 3px;
  background: rgba(201, 208, 220, 0.18);
  border-radius: 2px;
  transition: background 0.3s ease;
}
.an-rail i.on { background: var(--gold); }
.an-stamp {
  position: absolute;
  right: 4.5%;
  top: clamp(9.5rem, 17vh, 12rem);
  font-family: var(--mono);
  font-size: clamp(0.8rem, 1.4vw, 1.05rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  border: 3px double var(--gold);
  border-radius: 3px;
  padding: 0.55rem 1.1rem 0.55rem 1.35rem;
  transform: rotate(-7deg) scale(1.9);
  opacity: 0;
  pointer-events: none;
}
.an-stamp.in {
  opacity: 0.92;
  transform: rotate(-7deg) scale(1);
  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.2, 1.6, 0.4, 1);
}
html.no-js .an-stamp, html.reduced .an-stamp { opacity: 0.92; transform: rotate(-7deg) scale(1); }

/* Static fallback (no JS / reduced motion): stage unpins, final state */
html.no-js .an-stage, html.reduced .an-stage { position: relative; min-height: 0; }

/* ============================================================
   THE RECORD (verdicts ledger)
   ============================================================ */

.ledger { max-width: 1020px; margin: 0 auto; }
.ledger-header {
  display: grid;
  grid-template-columns: 64px 1.5fr 0.9fr 0.9fr auto;
  gap: 1.25rem;
  padding: 0 0.5rem 0.9rem;
  border-bottom: 1px solid var(--hairline-gold-strong);
}
.ledger-header span {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.ledger-header span:last-child { text-align: right; }
.ledger-row-wrap { border-bottom: 1px solid var(--hairline-gold); }
.ledger-row-wrap.hide { display: none; }
.ledger-row {
  display: grid;
  grid-template-columns: 64px 1.5fr 0.9fr 0.9fr auto;
  gap: 1.25rem;
  padding: 1.2rem 0.5rem;
  align-items: baseline;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 0.2s ease;
}
.ledger-row:hover { background: rgba(201, 168, 76, 0.05); }
.ledger-row .col-year {
  font-family: var(--mono);
  color: var(--gold-dim);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}
.ledger-row .col-case { font-family: var(--sans); color: var(--ink); font-weight: 500; font-size: 1.03rem; }
.ledger-row .col-case .chev {
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.8rem;
  transition: transform 0.25s ease;
}
.ledger-row[aria-expanded="true"] .chev { transform: rotate(90deg); }
.ledger-row .col-forum, .ledger-row .col-kind {
  font-family: var(--mono);
  color: var(--warm-gray);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ledger-row .col-result {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink);
  font-size: 1.45rem;
  text-align: right;
  font-feature-settings: 'tnum' on, 'lnum' on;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ledger-detail {
  display: none;
  padding: 0 0.5rem 1.4rem;
  max-width: 760px;
}
.ledger-detail.open { display: block; }
.ledger-detail p { color: var(--warm-gray); font-size: 0.95rem; line-height: 1.75; }
.ledger-detail .arc-label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dim);
  display: block;
  margin-bottom: 0.4rem;
}
.ledger-disclosure {
  text-align: center;
  color: var(--warm-gray);
  font-size: 0.9rem;
  margin: 2.25rem auto 0;
  max-width: 640px;
}
.ledger-summary {
  font-family: var(--mono);
  text-align: center;
  color: var(--warm-gray);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  margin: 0 0 2rem;
}
.ledger-summary b { color: var(--ink); font-weight: 600; }

/* Filter chips */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  justify-content: center;
  margin-bottom: 2.25rem;
}
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.filter-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-right: 0.35rem;
}
.chip {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  background: transparent;
  color: var(--warm-gray);
  border: 1px solid var(--hairline-ink);
  border-radius: 999px;
  padding: 0.38rem 0.9rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.chip:hover { border-color: var(--gold); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--navy); color: var(--gold-bright); border-color: var(--navy); }

/* Result cards (homepage preview) */
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
}
.result-card {
  background: var(--paper);
  border-top: 2px solid var(--gold);
  padding: 1.5rem 1.5rem 1.75rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.result-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.result-card .result-amount {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink);
  font-size: 1.875rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  font-feature-settings: 'tnum' on, 'lnum' on;
  letter-spacing: -0.01em;
}
.result-card .result-label {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.64rem;
  color: var(--gold-dim);
  font-weight: 500;
  margin-bottom: 0.75rem;
  display: block;
}
.result-card p { color: var(--warm-gray); font-size: 0.9375rem; line-height: 1.7; }

/* ============================================================
   PRACTICE AREAS
   ============================================================ */

.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1120px;
  margin: 0 auto;
}
.practice-card {
  background: var(--cream);
  box-shadow: var(--shadow-soft);
  border-left: 2px solid var(--gold);
  padding: 1.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.practice-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.practice-card h3 { color: var(--ink); font-size: 1.3rem; margin-bottom: 0.45rem; }
.practice-card .law-line {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 0.8rem;
  display: block;
}
.practice-card p { color: var(--warm-gray); font-size: 0.96rem; line-height: 1.7; }
.practice-card .evidence {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline-ink);
}
.practice-card .evidence b {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 500;
  display: block;
  margin-bottom: 0.4rem;
}
.practice-card .evidence span { color: var(--warm-gray); font-size: 0.85rem; line-height: 1.65; display: block; }

/* Trucking deep-dive band */
.deep-band { background: var(--navy); color: var(--cream); }
.deep-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 1120px;
  margin: 0 auto;
  align-items: center;
}
.deep-grid h2 { color: var(--cream); font-size: var(--fs-h2); margin: 0.9rem 0 1.1rem; }
.deep-grid p { color: var(--gray); line-height: 1.8; margin-bottom: 1.1rem; }
.deep-list { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; }
.deep-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  font-size: 0.95rem;
  color: var(--gray);
  line-height: 1.65;
}
.deep-list .tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  border: 1px solid var(--hairline-gold-strong);
  padding: 0.22rem 0.5rem;
  border-radius: 2px;
  white-space: nowrap;
  margin-top: 0.15rem;
}
.deep-list b { color: var(--cream); font-weight: 600; }

/* ============================================================
   WHY (settlement mill positioning, split with portrait)
   ============================================================ */

.why { background: var(--navy); color: var(--cream); position: relative; overflow: visible; padding: 0; }
.why-grid { display: grid; grid-template-columns: 60% 40%; align-items: stretch; min-height: 640px; }
.why-text {
  padding: clamp(4.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.why-text-inner { max-width: 560px; margin-left: auto; margin-right: clamp(1.5rem, 4vw, 3.5rem); }
.why-head { margin-bottom: 3rem; }
.why-head h2 { font-size: var(--fs-h2); color: var(--cream); margin: 0.875rem 0 0; line-height: 1.15; }
.why-list { display: flex; flex-direction: column; gap: 2.4rem; }
.why-row { display: grid; grid-template-columns: 32px 1fr; gap: 1.25rem; align-items: start; }
.why-row .glyph { color: var(--gold); width: 19px; height: 19px; margin-top: 0.35rem; }
.why-row .glyph svg { width: 100%; height: 100%; }
.why-row h3 { color: var(--cream); font-size: 1.4rem; margin-bottom: 0.5rem; }
.why-row p { color: var(--gray); line-height: 1.8; }
.why-photo { position: relative; width: 100%; margin-bottom: -60px; z-index: 2; }
.why-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  min-height: 640px;
}
.why-photo figcaption { position: absolute; left: clamp(1rem, 2vw, 1.6rem); bottom: clamp(1.1rem, 2vw, 1.5rem); }

/* ============================================================
   ATTORNEYS
   ============================================================ */

.attorney-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1080px;
  margin: 0 auto;
}
.attorney-card {
  background: var(--paper);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.attorney-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.attorney-card .portrait { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.attorney-card .portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.attorney-card:hover .portrait img { transform: scale(1.035); }
.attorney-card .card-body { padding: 1.6rem 1.75rem 1.9rem; }
.attorney-card h3 { color: var(--ink); font-size: 1.5rem; margin-bottom: 0.3rem; }
.attorney-card .post-nominals {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.64rem;
  color: var(--gold-dim);
  font-weight: 500;
  margin-bottom: 1rem;
  display: block;
}
.attorney-card p { color: var(--warm-gray); font-size: 0.96rem; line-height: 1.75; }
.attorney-card .card-link {
  margin-top: 1.1rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-dim);
}
.attorney-card .card-link:hover { color: var(--ink); }

/* Full profile (attorneys page) */
.profile { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); max-width: 1120px; margin: 0 auto; align-items: start; }
.profile.flip .profile-photo { order: 2; }
.profile-photo { position: relative; }
.profile-photo img { width: 100%; display: block; box-shadow: var(--shadow-lift); }
.profile-photo figcaption { position: absolute; left: 1rem; bottom: 1.1rem; }
.profile-body h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); color: var(--ink); margin: 0.7rem 0 0.4rem; }
.profile-body .post-nominals {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.66rem;
  color: var(--gold-dim);
  display: block;
  margin-bottom: 1.4rem;
}
.profile-body p { color: var(--warm-gray); line-height: 1.85; margin-bottom: 1.2rem; }
.credential-block {
  background: var(--cream);
  border: 1px solid var(--hairline-gold);
  border-left: 2px solid var(--gold);
  padding: 1.2rem 1.4rem;
  margin: 1.6rem 0;
}
.credential-block dl { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem 1.25rem; }
.credential-block dt {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim);
  padding-top: 0.2rem;
  white-space: nowrap;
}
.credential-block dd { font-family: var(--mono); font-size: 0.8rem; color: var(--ink); letter-spacing: 0.02em; }
.matters { margin-top: 1.4rem; }
.matters b {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  display: block;
  margin-bottom: 0.6rem;
  font-weight: 500;
}
.matters ul { list-style: none; }
.matters li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--hairline-ink);
  font-size: 0.92rem;
  color: var(--warm-gray);
}
.matters li strong { font-family: var(--serif); color: var(--ink); font-weight: 700; white-space: nowrap; }

/* The team (no-photo, deliberate) */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1080px; margin: 0 auto; }
.team-card { background: var(--cream); border-top: 1px solid var(--hairline-gold-strong); padding: 1.5rem 1.5rem 1.7rem; box-shadow: var(--shadow-soft); }
.team-card h3 { font-size: 1.15rem; color: var(--ink); margin-bottom: 0.35rem; }
.team-card .role {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim);
  display: block;
  margin-bottom: 0.7rem;
}
.team-card p { color: var(--warm-gray); font-size: 0.9rem; line-height: 1.7; }

/* ============================================================
   PROCESS / STEPS
   ============================================================ */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
.process-grid::before {
  content: '';
  position: absolute;
  top: 1.55rem;
  left: 12%; right: 12%;
  height: 1px;
  background: var(--hairline-gold);
  z-index: 0;
}
.step { position: relative; z-index: 1; padding: 0 0.25rem; }
.step .num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--gold);
  line-height: 1;
  display: inline-block;
  margin-bottom: 1rem;
  background: var(--paper);
  padding-right: 0.875rem;
  font-feature-settings: 'tnum' on, 'lnum' on;
}
.section--cream .step .num { background: var(--cream); }
.step h3 { color: var(--ink); font-size: 1.25rem; margin-bottom: 0.625rem; }
.step p { color: var(--warm-gray); font-size: 0.9375rem; line-height: 1.7; }

/* After-a-wreck numbered protocol */
.protocol { max-width: 880px; margin: 0 auto; counter-reset: aa; }
.protocol-step {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 1.4rem;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--hairline-gold);
  counter-increment: aa;
  position: relative;
}
.protocol-step::before {
  content: counter(aa, decimal-leading-zero);
  font-family: var(--serif);
  font-weight: 700;
  color: var(--gold);
  font-size: 2.2rem;
  line-height: 1;
  padding-top: 0.1rem;
  font-feature-settings: 'tnum' on, 'lnum' on;
}
.protocol-step h3 { color: var(--ink); font-size: 1.35rem; margin-bottom: 0.5rem; }
.protocol-step > div > p { color: var(--warm-gray); line-height: 1.8; margin-bottom: 0.7rem; }
.protocol-step .why-line {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-dim);
  border-left: 2px solid var(--gold);
  padding-left: 0.8rem;
  line-height: 1.8;
}
.warning-block {
  max-width: 880px;
  margin: 3rem auto 0;
  background: var(--navy);
  color: var(--cream);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-left: 3px solid var(--urgent);
  box-shadow: var(--shadow-lift);
}
.warning-block h3 { color: var(--cream); font-size: 1.45rem; margin: 0.6rem 0 0.8rem; }
.warning-block p { color: var(--gray); line-height: 1.8; }
.warning-block .eyebrow { color: #d98a94; }

/* ============================================================
   TOOLS (statute clock + recovery math)
   ============================================================ */

.tool {
  max-width: 980px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--hairline-gold);
  box-shadow: var(--shadow-lift);
  border-radius: 2px;
  overflow: hidden;
}
.tool-head {
  background: var(--navy);
  color: var(--cream);
  padding: 1.4rem clamp(1.25rem, 3vw, 2.25rem);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.tool-head h3 { color: var(--cream); font-size: 1.35rem; }
.tool-head .record-line { color: var(--gold); }
.tool-body { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.tool-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }

.field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.35rem; }
.field label {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  font-weight: 500;
}
.field input, .field textarea, .field select {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--hairline-ink);
  border-radius: 2px;
  padding: 0.75rem 0.875rem;
  transition: border-color 0.2s ease;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); }
.field .hint { font-size: 0.8rem; color: var(--warm-gray); line-height: 1.6; }
.field input[type="range"] { padding: 0; accent-color: var(--gold-dim); background: transparent; border: none; }

.seg {
  display: inline-flex;
  border: 1px solid var(--hairline-ink);
  border-radius: 2px;
  overflow: hidden;
}
.seg button {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  background: transparent;
  border: none;
  color: var(--warm-gray);
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.seg button + button { border-left: 1px solid var(--hairline-ink); }
.seg button[aria-pressed="true"] { background: var(--navy); color: var(--gold-bright); }

/* The closing statement document */
.closing-doc {
  background: var(--cream);
  border: 1px solid var(--hairline-ink);
  padding: 1.6rem 1.7rem 1.4rem;
  font-family: var(--mono);
  position: relative;
}
.closing-doc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 16px);
  opacity: 0.6;
}
.closing-doc .doc-title {
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-dim);
  text-align: center;
  margin-bottom: 1.2rem;
}
.closing-doc .doc-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px dotted rgba(11, 22, 40, 0.22);
  font-size: 0.82rem;
  color: var(--ink);
}
.closing-doc .doc-row .lbl { color: var(--warm-gray); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.closing-doc .doc-row .val { font-feature-settings: 'tnum' on; white-space: nowrap; }
.closing-doc .doc-row.minus .val { color: var(--urgent); }
.closing-doc .doc-row.total {
  border-bottom: none;
  border-top: 2px solid var(--ink);
  margin-top: 0.6rem;
  padding-top: 0.9rem;
}
.closing-doc .doc-row.total .lbl { color: var(--ink); font-weight: 600; }
.closing-doc .doc-row.total .val {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
}
.closing-doc .doc-note { margin-top: 1rem; font-size: 0.68rem; color: var(--warm-gray); line-height: 1.7; letter-spacing: 0.02em; }

/* Statute clock output */
.clock-out { margin-top: 0.5rem; }
.clock-verdict { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); margin-bottom: 0.4rem; }
.clock-verdict b { color: var(--urgent); font-weight: 700; }
.clock-sub { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warm-gray); margin-bottom: 1.1rem; }
.clock-bar {
  height: 8px;
  background: rgba(11, 22, 40, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.45rem;
}
.clock-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--urgent));
  border-radius: 999px;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.clock-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--gray-dim);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.decay { list-style: none; margin-top: 0.4rem; }
.decay li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px dotted rgba(11, 22, 40, 0.18);
  font-size: 0.9rem;
  color: var(--warm-gray);
}
.decay .d-tag {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dim);
  white-space: nowrap;
}
.decay li.gone .d-tag { color: var(--urgent); }
.decay li.gone { color: rgba(92, 82, 70, 0.6); }
.tool-fineprint { margin-top: 1.4rem; font-size: 0.78rem; color: var(--warm-gray); line-height: 1.7; }

/* ============================================================
   QUOTES / TESTIMONIALS
   ============================================================ */

/* Letters from the file. Client words are shown as correspondence, not as
   marketing pull-quotes: paper cards, a filing line across the top, a half
   degree of rotation so the stack reads as handled paper, Caslon for the
   hand that wrote them. */
.testimonials { background: var(--navy); color: var(--cream); position: relative; }
.testimonials-inner { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 2.75rem; }
.quote {
  position: relative;
  /* A real sheet: the folded-letter scan sits under the type, so the cards
     read as correspondence that has been opened, not as UI panels. The
     paper color stays as the fallback while the texture loads. */
  background: var(--paper) url('../images/bauder/texture-letter-paper.jpg') center / cover;
  color: var(--ink);
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: 0 3px 0 rgba(6, 13, 27, 0.5), 0 18px 40px rgba(6, 13, 27, 0.45);
  transform: rotate(-0.5deg);
}
.quote + .quote { transform: rotate(0.45deg); }
.quote .letter-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim);
  border-bottom: 1px solid var(--hairline-ink);
  padding-bottom: 0.7rem;
  margin-bottom: 1.3rem;
}
.quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.65;
  margin-bottom: 1.3rem;
}
.quote cite {
  font-family: var(--mono);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.66rem;
  color: var(--warm-gray);
  font-weight: 500;
}
.quote cite::before { content: ''; display: inline-block; width: 1.4rem; height: 1px; background: var(--gold-dim); vertical-align: middle; margin-right: 0.5rem; }

/* ============================================================
   FULL-BLEED EVIDENCE BANDS (homepage)
   ============================================================ */

/* The partners, one file between them: the two-shot runs edge to edge under
   the attorney cards, sealing the no-pyramid argument with a photograph. */
.partners-band { position: relative; margin: 0; background: var(--navy-deep); overflow: hidden; }
.partners-band img {
  display: block;
  width: 100%;
  height: clamp(320px, 46vw, 620px);
  object-fit: cover;
  object-position: center 26%;
}
.partners-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 22, 40, 0.18), transparent 30%, transparent 72%, rgba(6, 13, 27, 0.45));
  pointer-events: none;
}
.partners-band figcaption { position: absolute; left: clamp(1.25rem, 4vw, 3rem); bottom: clamp(1.2rem, 2.4vw, 2rem); z-index: 2; }

/* The closing room: the last image before the closing argument. The copy
   sits ON the photograph, so it carries its own navy for legibility. */
.closing-band { position: relative; margin: 0; background: var(--navy-deep); overflow: hidden; }
.closing-band img {
  display: block;
  width: 100%;
  height: clamp(360px, 42vw, 560px);
  object-fit: cover;
  object-position: center 62%;
}
.closing-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 13, 27, 0.6), rgba(6, 13, 27, 0.34) 45%, rgba(6, 13, 27, 0.66));
  pointer-events: none;
}
.closing-band .closing-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
}
.closing-band .closing-line {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  color: var(--cream);
  max-width: 780px;
  line-height: 1.2;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(6, 13, 27, 0.8);
}
.closing-band .closing-sub {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow: 0 1px 12px rgba(6, 13, 27, 0.9);
}

/* ============================================================
   THE OFFER AUDIT (teaser band + tool accents)
   ============================================================ */

/* The urgency register belongs to the oxblood strip; the teaser borrows it
   for the one question every injured reader is actually sitting on. */
.offer-band { background: var(--urgent); border-top: 1px solid var(--urgent-deep); border-bottom: 1px solid var(--urgent-deep); color: var(--cream); }
.offer-band-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 5vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.offer-band .offer-q {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.25;
  max-width: 640px;
  text-wrap: balance;
}
.offer-band .offer-q em { font-family: var(--serif); font-style: italic; color: var(--gold-bright); }
.offer-band .offer-sub {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 239, 227, 0.7);
}
.audit-record {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--warm-gray);
  border-left: 2px solid var(--urgent);
  padding: 0.45rem 0 0.45rem 0.95rem;
  line-height: 1.85;
  margin-top: 1.3rem;
}
.audit-record b { color: var(--ink); font-weight: 600; }
.closing-doc .doc-row.total.audit-zero .val { color: var(--urgent); }

/* ============================================================
   RECOGNITION / BADGES
   ============================================================ */

.badges-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; max-width: 1080px; margin: 0 auto; }
.badge {
  background: var(--cream);
  border: 1px solid var(--hairline-gold);
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.badge__mark { color: var(--gold); display: inline-flex; width: 26px; height: 26px; margin-bottom: 0.6rem; }
.badge__mark svg { width: 100%; height: 100%; }
.badge__name { font-family: var(--serif); font-weight: 700; color: var(--ink); font-size: 1.0625rem; margin-bottom: 0.375rem; line-height: 1.25; }
.badge__year {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.62rem;
  color: var(--gold-dim);
  font-weight: 500;
}

/* ============================================================
   INTAKE / FORMS
   ============================================================ */

.intake-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}
.intake-copy h2 { font-size: var(--fs-h2); color: var(--ink); margin: 0.875rem 0 1.25rem; }
.intake-copy > p { color: var(--warm-gray); margin-bottom: 1.5rem; line-height: 1.85; }
.intake-promise {
  border-left: 2px solid var(--gold);
  padding: 0.875rem 1.25rem;
  background: rgba(201, 168, 76, 0.05);
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.intake-form {
  background: var(--cream);
  border: 1px solid var(--hairline-gold);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border-radius: 2px;
}
.intake-form h3 { color: var(--ink); font-size: 1.375rem; margin-bottom: 1.5rem; }
.intake-form .btn-gold { width: 100%; margin-top: 0.5rem; }
.intake-form .fineprint { margin-top: 1rem; font-size: 0.75rem; color: var(--warm-gray); line-height: 1.6; }
.form-ok {
  display: none;
  background: rgba(23, 126, 112, 0.08);
  border: 1px solid rgba(23, 126, 112, 0.35);
  color: #14574d;
  border-radius: 2px;
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}
.form-ok.show { display: block; }
.statute-inline {
  display: none;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--gold-dim);
  background: rgba(201, 168, 76, 0.07);
  border-left: 2px solid var(--gold);
  padding: 0.55rem 0.8rem;
  line-height: 1.7;
  margin-top: 0.35rem;
}
.statute-inline.show { display: block; }
.radio-row { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}
.radio-row input { width: auto; accent-color: var(--gold-dim); }

/* What happens next timeline */
.next-steps { max-width: 880px; margin: 0 auto; }
.next-step {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--hairline-gold);
}
.next-step .when {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dim);
  padding-top: 0.3rem;
}
.next-step h3 { font-size: 1.2rem; color: var(--ink); margin-bottom: 0.4rem; }
.next-step p { color: var(--warm-gray); font-size: 0.95rem; line-height: 1.7; }

/* Contact modes */
.contact-modes { background: var(--navy); color: var(--cream); }
.modes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; max-width: 1080px; margin: 0 auto; }
.mode {
  border: 1px solid var(--hairline-gold);
  padding: 1.75rem 1.5rem;
  text-align: center;
  background: rgba(244, 239, 227, 0.02);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  display: block;
}
.mode:hover { background: rgba(201, 168, 76, 0.06); border-color: var(--gold); transform: translateY(-2px); }
.mode__glyph { color: var(--gold); display: inline-flex; width: 30px; height: 30px; margin-bottom: 0.8rem; }
.mode__glyph svg { width: 100%; height: 100%; }
.mode__title { font-family: var(--serif); font-weight: 700; color: var(--cream); font-size: 1.1875rem; margin-bottom: 0.5rem; display: block; }
.mode__line {
  font-family: var(--mono);
  color: var(--gold-bright);
  font-size: 0.9rem;
  font-feature-settings: 'tnum' on, 'lnum' on;
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 0.5rem;
}
.mode__sub { color: var(--gray); font-size: 0.8125rem; line-height: 1.6; }

/* Offices + metroplex map */
.offices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1080px; margin: 0 auto; }
.office {
  background: var(--paper);
  border-left: 2px solid var(--gold);
  padding: 1.75rem;
  box-shadow: var(--shadow-soft);
}
.office h3 { color: var(--ink); font-size: 1.25rem; margin-bottom: 0.625rem; }
.office p { color: var(--warm-gray); font-size: 0.9375rem; line-height: 1.7; margin-bottom: 0.5rem; }
.office .county {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dim);
  display: block;
  margin-bottom: 0.6rem;
}
.office a {
  font-family: var(--mono);
  color: var(--gold-dim);
  font-size: 0.9rem;
  font-feature-settings: 'tnum' on, 'lnum' on;
  display: inline-block;
  margin-top: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.office a:hover { border-bottom-color: var(--gold); color: var(--ink); }

.metro-map { max-width: 880px; margin: 0 auto 3rem; }
.metro-map svg { width: 100%; height: auto; display: block; }
.metro-map .road { stroke: rgba(201, 168, 76, 0.35); stroke-width: 1.4; fill: none; }
.metro-map .road--major { stroke-width: 2.2; }
.metro-map .county-line { stroke: rgba(244, 239, 227, 0.14); stroke-width: 1; stroke-dasharray: 5 6; fill: none; }
.metro-map .county-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  fill: rgba(201, 208, 220, 0.4);
  text-transform: uppercase;
}
.metro-map .road-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.12em; fill: rgba(201, 168, 76, 0.6); }
.metro-map .pin-dot { fill: var(--gold); }
.metro-map .pin-halo { fill: rgba(201, 168, 76, 0.14); }
.metro-map .pin-label { font-family: var(--serif); font-size: 13px; fill: var(--cream); }
.metro-map .pin-sub { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; fill: var(--gray-dim); text-transform: uppercase; }
.metro-map figcaption {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-dim);
  margin-top: 0.9rem;
}

/* ============================================================
   FAQ
   ============================================================ */

/* Answers unfold instead of snapping open. Progressive: browsers without
   interpolate-size keep the instant toggle. */
:root { interpolate-size: allow-keywords; }
details.faq-item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 0.4s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.4s allow-discrete;
}
details.faq-item[open]::details-content { block-size: auto; }

.faq-list { max-width: 880px; margin: 0 auto; }
.faq-group-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin: 2.75rem 0 0.5rem;
  display: block;
}
.faq-group-label:first-child { margin-top: 0; }
.faq-item { border-top: 1px solid var(--hairline-gold); }
.faq-item:last-child { border-bottom: 1px solid var(--hairline-gold); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.5rem 2.25rem 1.5rem 2.6rem;
  position: relative;
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  font-size: 1.1875rem;
  line-height: 1.45;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: '\00d7'; font-size: 1.35rem; }

/* The examination register: questions and answers carry the transcript's
   own markers. Q. and A. in English; the Spanish record reads P. and R.
   (pregunta / respuesta), switched purely by the document language. */
.faq-item summary::before {
  content: 'Q.';
  position: absolute;
  left: 0.1rem;
  top: 1.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-dim);
  font-size: 1.1rem;
}
.faq-item .faq-answer {
  padding: 0 0 1.6rem 2.6rem;
  color: var(--warm-gray);
  line-height: 1.85;
  font-size: 1rem;
  max-width: 800px;
  position: relative;
}
.faq-item .faq-answer::before {
  content: 'A.';
  position: absolute;
  left: 0.1rem;
  top: 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-dim);
  font-size: 1.1rem;
}
html[lang="es"] .faq-item summary::before { content: 'P.'; }
html[lang="es"] .faq-item .faq-answer::before { content: 'R.'; }
.transcript-cert {
  max-width: 880px;
  margin: 2.75rem auto 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-dim);
  text-align: center;
  line-height: 2;
}
.transcript-cert::before {
  content: '';
  display: block;
  width: 54px;
  height: 1px;
  background: var(--hairline-gold-strong);
  margin: 0 auto 0.9rem;
}

/* ============================================================
   CTA + FOOTER
   ============================================================ */

.cta { background: var(--cream); text-align: center; }
.cta h2 { font-size: var(--fs-h2); color: var(--ink); margin: 0 auto 1.25rem; max-width: 760px; }
.cta p { color: var(--warm-gray); max-width: 580px; margin: 0 auto 2rem; line-height: 1.8; }
.cta-call { display: block; margin-top: 1.25rem; color: var(--warm-gray); font-size: 0.875rem; letter-spacing: 0.04em; }
.cta-call a { color: var(--gold-dim); border-bottom: 1px solid transparent; }
.cta-call a:hover { border-bottom-color: var(--gold-dim); }

.footer {
  background: var(--navy-band);
  color: var(--gray);
  padding: clamp(3.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 3rem) 0;
}
.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.9fr 1.4fr;
  gap: 3rem;
  padding-bottom: 3rem;
}
.footer-brand .mark-slot { display: inline-flex; width: 46px; height: 46px; margin-bottom: 0.9rem; color: var(--gold); }
.footer-brand .mark-slot svg { width: 100%; height: 100%; }
.footer-col .wordmark { font-size: 1rem; margin-bottom: 0.5rem; display: block; }
.footer-meta {
  color: var(--gray-dim);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 0.5rem;
  line-height: 2;
}
.footer-col h4 {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.64rem;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 1rem;
}
.footer-col p, .footer-col li, .footer-col address { color: var(--gray); font-size: 0.9rem; line-height: 1.85; font-style: normal; }
.footer-col ul { list-style: none; }
.footer-col a { color: var(--gray); font-size: 0.9rem; line-height: 2; display: inline-block; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--cream); }
.footer-col a.f-tel { font-family: var(--mono); font-size: 0.84rem; color: var(--gold-dim); }
.footer-col a.f-tel:hover { color: var(--gold); }
.disclaimer { color: var(--gray-dim); font-size: 0.75rem; line-height: 1.7; margin-bottom: 1.25rem; }
.dbj-credit {
  font-family: var(--sans);
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.dbj-credit:hover { color: var(--gold-bright); }
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid var(--hairline-gold);
  padding: 1.5rem 0 2rem;
  text-align: center;
  color: var(--gray-dim);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  font-family: var(--mono);
}

/* Sticky mobile CTA */
.sticky-cta { display: none; }

/* ============================================================
   PRINT (the after-a-wreck checklist prints clean)
   ============================================================ */

@media print {
  .urgent-strip, .nav, .sticky-cta, .footer, .cta, .no-print, .warning-block .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero { background: #fff; color: #000; padding: 1rem 0; }
  .page-hero h1, .page-hero .lede { color: #000; }
  .page-hero--image::before, .page-hero--image::after { display: none; }
  .protocol-step { break-inside: avoid; }
  .print-only { display: block !important; }
}
.print-only { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .nav-links { gap: 1.3rem; }
}

@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }

  .hero { grid-template-columns: 1fr; min-height: auto; }
  /* THE PARTNERS LEAD ON A PHONE (Joshua, 2026-08-18): the two cut-outs are
     the first thing the hero shows, above the fold, with the headline
     surfacing directly beneath them. Copy-first put both figures below the
     fold, which read as a text page with a photo appendix. */
  .hero-content { padding: 1.9rem clamp(1.25rem, 5vw, 2rem) clamp(3rem, 8vw, 4.5rem); order: 2; }
  .hero-photo { order: 1; min-height: 62vh; height: 62vh; }
  .hero-photo::before { background: linear-gradient(180deg, var(--navy) 0%, transparent 18%); }
  /* The pair stays side by side, compact: figures about 44svh tall, plates
     tight beneath, so the headline still enters the first viewport. */
  .hero-figures { order: 1; min-height: 0; height: auto; padding: 1rem 0.9rem 0; justify-content: flex-start; }
  .hero-stage { max-width: min(78vw, 350px); margin: 0 auto; width: 100%; }
  .hero-plates { max-width: min(88vw, 400px); margin: 0.7rem auto 0; width: 100%; }
  /* the warm ground pool re-centers under the stacked pair */
  .hero::after { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 52vh; height: 52svh; background: radial-gradient(60% 52% at 50% 36%, rgba(201, 168, 76, 0.085), transparent 70%); }
  .counsel-plate { margin-top: 0.7rem; }
  .counsel-plate::before { width: 24px; margin-bottom: 0.5rem; }
  .counsel-plate b { font-size: 0.5rem; letter-spacing: 0.15em; margin-bottom: 0.3rem; }
  .counsel-name { font-size: 0.95rem; }
  .counsel-role { font-size: 0.55rem; letter-spacing: 0.07em; }

  .statband-inner { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }

  /* Phone anatomy: the CHART leads (it is the argument), the copy
     follows compactly; the stage top-aligns under the sticky nav so
     both halves actually share the viewport. */
  .an-stage { justify-content: flex-start; padding-top: clamp(6.5rem, 16vh, 8.5rem); }
  .an-head { margin-bottom: 0.9rem; }
  .an-head h2 { font-size: 1.35rem; }
  .an-head .an-disclosure { font-size: 0.56rem; }
  .an-grid { grid-template-columns: 1fr; gap: 0.9rem; align-items: start; }
  .an-chart-wrap { order: -1; }
  .an-phase { min-height: 12rem; }
  .an-title { font-size: 1.2rem; margin-bottom: 0.45rem; }
  .an-copy { font-size: 0.85rem; line-height: 1.6; margin-bottom: 0.6rem; }
  .an-record { font-size: 0.62rem; line-height: 1.6; }
  .an-kicker { margin-bottom: 0.5rem; }
  .an-offer { margin-top: 0.7rem; }
  .an-offer-value { font-size: 1.4rem; }
  .an-rail { margin-top: 0.7rem; }
  .an-stamp { display: none; }
  .an-chart-wrap > .an-record { display: none; }

  .why-grid { grid-template-columns: 1fr; min-height: auto; }
  .why-text { padding: clamp(3.5rem, 8vw, 5rem) clamp(1.25rem, 5vw, 2rem); }
  .why-text-inner { margin-left: auto; margin-right: auto; max-width: 640px; }
  .why-photo { margin-bottom: 0; }
  .why-photo img { min-height: auto; max-height: 560px; }

  .practice-grid { grid-template-columns: repeat(2, 1fr); }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .attorney-cards { grid-template-columns: 1fr; max-width: 640px; }
  .profile, .profile.flip { grid-template-columns: 1fr; }
  .profile.flip .profile-photo { order: 0; }
  .profile-photo { max-width: 480px; }
  .team-grid { grid-template-columns: 1fr; max-width: 640px; }
  .process-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
  .process-grid::before { display: none; }
  .deep-grid { grid-template-columns: 1fr; }
  .tool-grid { grid-template-columns: 1fr; }
  .intake-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .modes-grid { grid-template-columns: repeat(2, 1fr); }
  .offices-grid { grid-template-columns: 1fr; max-width: 560px; }
  .badges-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .hero-strip { grid-template-columns: 1fr; }
  .hero-strip-card.hero-strip-tall img { aspect-ratio: 3 / 2; }
}

@media (max-width: 768px) {
  .urgent-strip__inner { grid-template-columns: 1fr auto; padding: 0 0.75rem; }
  .urgent-strip__results { display: none; }
  .urgent-strip__phone { border-right: 0; padding: 0.55rem 0.4rem 0.55rem 0; font-size: 0.75rem; }
  .lang-toggle .hablamos { display: none; }
  .lang-toggle { padding-left: 0.5rem; }
  .lang-toggle button { padding: 0.24rem 0.4rem; }

  /* The phone number already lives in the urgent strip above and the
     sticky bar below; the nav-top row is desktop-only chrome. */
  .nav-top { display: none; }
  .nav-top-inner { padding: 0.5rem 1.25rem; gap: 0.75rem; }
  .nav-bottom-inner { padding: 0.8rem 1.25rem; gap: 1rem; }
  .wordmark { font-size: 0.92rem; letter-spacing: 0.13em; }
  .wordmark-sub { display: none; }

  .ledger-header { display: none; }
  .ledger-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem 1rem;
    padding: 1.1rem 0.25rem;
  }
  .ledger-row .col-case { flex: 1 1 55%; order: 1; }
  .ledger-row .col-result { order: 2; margin-left: auto; font-size: 1.25rem; }
  .ledger-row .col-year, .ledger-row .col-forum, .ledger-row .col-kind { order: 3; }

  .quote { transform: rotate(-0.35deg); }
  .quote + .quote { transform: rotate(0.3deg); }
  .quote blockquote { font-size: 1.05rem; }
  .faq-item summary { padding-left: 2rem; }
  .faq-item .faq-answer { padding-left: 2rem; }
  figcaption.exhibit { font-size: 0.54rem; padding: 0.4rem 0.7rem 0.45rem; }
  figcaption.exhibit b { font-size: 0.58rem; }
  .practice-grid { grid-template-columns: 1fr; }
  .results-grid { grid-template-columns: 1fr; }
  .modes-grid { grid-template-columns: 1fr; }
  .badges-grid { grid-template-columns: 1fr 1fr; }
  .protocol-step { grid-template-columns: 52px 1fr; gap: 1rem; }
  .protocol-step::before { font-size: 1.7rem; }
  .next-step { grid-template-columns: 1fr; gap: 0.35rem; }
  .credential-block dl { grid-template-columns: 1fr; gap: 0.15rem; }
  .credential-block dt { margin-top: 0.6rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .statband-inner { grid-template-columns: 1fr 1fr; }

  .sticky-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 60;
    box-shadow: 0 -4px 18px rgba(11, 22, 40, 0.18);
  }
  .sticky-cta a {
    padding: 0.95rem 0.5rem;
    text-align: center;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .sticky-cta a.sticky-cta__call { background: var(--gold); color: var(--navy); }
  .sticky-cta a.sticky-cta__form { background: var(--navy); color: var(--cream); }
  body { padding-bottom: 56px; }
}

@media (max-width: 480px) {
  .urgent-strip__phone span[data-i18n="strip.live"] { display: none; }
  .hero h1 { font-size: 1.9rem; }
  .nav-top-cta { padding: 0.5rem 0.875rem; font-size: 0.625rem; }
  .badges-grid { grid-template-columns: 1fr; }
  .statband-inner { grid-template-columns: 1fr 1fr; gap: 1.4rem 0.75rem; }
  .stat b { font-size: 1.45rem; }
  .an-phase { min-height: 15rem; }
  .filters { gap: 1rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .rv, .rv-rule { opacity: 1; transform: none; }
  .js-anim .hl-w > span { transform: none; }
  .js-anim .section-head h2, .js-anim .sweep-line { clip-path: none; }
}