/* =============================================================================
   VB ATTORNEYS — PAGE TEMPLATE DESIGN SYSTEM
   Matches vb-maritime-service-page.html (the finalized template for all
   practice area pages). Adds missing CSS tokens and all section styles.
   Enqueued after vbs-service-pages so these selectors take precedence.
============================================================================= */

/* ── ADDITIONAL CSS TOKENS (not in main style.css) ──────── */
:root {
  --gold-lt:    #DEC9AA;   /* alias for --gold-light */
  --off:        #FAFAF8;   /* near-white page bg */
  --warm:       #F5F0EA;   /* warm cream section bg */
  --border:     #E2DDD7;   /* standard rule color */
  --text:       #00022D;   /* body text (= --navy) */
  --text-mid:   #4A4740;   /* mid-tone prose */
  --text-lt:    #7A756E;   /* light/meta text */
  /* --nav-h is deliberately NOT declared here. style.css owns it (72px, dropping
     to 60px under 768px). page-templates.css loads last, so re-declaring it at
     :root outside a media query silently clobbered the mobile 60px and left the
     nav offset 12px too tall on phones. Inherit it — do not re-add. */

  /* WCAG AA text colors for LIGHT backgrounds. --gold (#B29261) and
     --gold-lt (#DEC9AA) were chosen for dark navy and fail 4.5:1 on
     cream/white, so they must not be used for text here. New token
     names only — nothing in style.css references these. */
  --gold-text:  #856539;   /* 5.13:1 on #FAFAF8, 5.36:1 on #fff, 4.73:1 on #F5F0EA */
  --text-lt-aa: #69645C;   /* 5.62:1 on #FAFAF8, 5.18:1 on #F5F0EA */
}

/* ── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb {
  background: var(--off);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.breadcrumb-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-lt);
}
.breadcrumb a { color: var(--text-lt-aa); transition: color .2s; }
.breadcrumb a:hover { color: var(--navy); }
/* The "/" was --border (#E2DDD7) = 1.29:1. It only ever passed unnoticed because
   the breadcrumb sat behind the fixed nav; once the nav offset landed it became
   visible text and had to meet 4.5:1. #726D66 is the lightest warm gray that
   clears 4.5:1 on all three page backgrounds (4.91 on --off, 5.13 on white,
   4.53 on --warm), so the separator still reads lighter than the crumb links.
   Markup carries aria-hidden="true" — screen readers get the list structure,
   not a spoken slash between every crumb. */
.breadcrumb-sep { color: #726D66; }
.breadcrumb-current { color: var(--navy); font-weight: 500; }

/* ── PAGE HERO (Option B: cream left, photo right) ──────── */
.page-hero {
  position: relative;
  overflow: hidden;
  /* Viewport-aware so a laptop always sees the next section start. On a 13"
     MacBook the content viewport is ~800px; a flat 520px hero plus nav and
     breadcrumb left barely a sliver below the fold. 58vh keeps the hero
     generous on a desktop monitor and lets it give ground on a short screen,
     which is where the "does this page even scroll?" problem lives. */
  min-height: min(520px, 58vh);
  display: flex;
  align-items: center;
  background: var(--off);
  padding: 0;
}
.page-hero-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 46%;
  background-size: cover;
  background-position: center 40%;
  filter: none;
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(250,250,248,1.0) 0%,
    rgba(250,250,248,1.0) 52%,
    rgba(250,250,248,0.0) 74%
  );
}
/* BIO PROSE HEADINGS — one treatment, whoever wrote them.
   A bio's Credentials heading comes from the template and carried
   .content-section-h2; every other heading comes from block content and carried
   only .wp-block-heading, which is 30px with 34px above rather than 31.9px with
   none. So a single bio page rendered two different h2 styles, and Brian (all
   template) did not match Vuk (mostly blocks). Ross, 2026-08-18: "Brian and Vuk
   should match in terms of layout and design." This makes a heading inside the
   bio body look the same regardless of where it came from, which is also what
   lets Brian's prose move into the editor without his page changing. */
.bio-page .content-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 16px;
}
.bio-page .content-body .content-section + .content-section h2,
.bio-page .content-body h2.wp-block-heading { margin-top: 34px; }
.bio-page .content-body h2.content-section-h2:first-child { margin-top: 0; }

/* A HERO WITH NO PHOTOGRAPH DOES NOT NEED PHOTO HEIGHT.
   .page-hero carries min-height: min(520px, 58vh) so a background photograph has
   room to be a photograph. Two thirds of the site's heroes (66 of 100 — every
   case result, every testimonial, the listings, the transportation spokes,
   privacy and terms) have NO photograph, and were being padded out to 520px with
   the content floated in the middle of it. Measured on /testimonials/ and
   /case-results/: 519px of hero holding 258px of content — 156px of dead space
   (Ross, 2026-08-18: "one example I see immediately on desktop where we can trim
   padding is the hero on /testimonials/").

   Keyed on :has() rather than a modifier class so it cannot be forgotten when a
   template is added. Browsers without :has() simply keep the old height, which
   is the current behaviour — so this degrades to exactly what shipped before.
   The 300px floor stops a one-line hero collapsing onto the breadcrumb. Bio
   heroes are excluded: their portrait IS the photograph. */
.page-hero:not(:has(.page-hero-bg)):not(:has(.page-hero-portrait)):not(:has(.bio-photo)):not(:has(.hero-photo-panel)) {
  min-height: 300px;
}

/* THE RULE: A HERO WITH NO PHOTOGRAPH SHOWS THE VB MARK.
   Ross, 2026-08-20: "can we make a rule that where a hero has no image, it gets
   the 'ghost' VB symbol, and implement that across our pages?"

   It began as .page-hero--mark on /practice-areas/ (2026-08-18): "The image is
   barely visible behind 'On This Page' so I'd rather not leave users struggling
   to see it." A flat warm ground with the mark set lightly into it reads as
   deliberate; a photograph half-hidden reads as a mistake. An EMPTY panel reads
   as unfinished, which is what the pages below had.

   Keyed on :has(), not a modifier class, so it cannot be forgotten when a
   template is added — the same reasoning as the min-height rule above. A hero
   qualifies when it has no photograph AND is not a bio (a portrait IS the
   photograph) AND does not carry a .hero-photo-panel.

   THAT LAST EXCLUSION WAS MISSING AND IT COST SOMETHING. /why-vb-attorneys/
   holds its two partner portraits in .hero-photo-panel, a shape none of the
   other tests knew about, so this hero counted as "no photograph": it was given
   the warm ground and the ghost mark it should never have had. Worse, the 300px
   floor above shares this selector shape, and at four :not()s it outranks
   .page-hero-partners { min-height: min(640px, 62vh) } — so the hero collapsed
   from 640px to ~394px, which squashed two 900x1350 portraits into landscape
   boxes and cropped both men at the chest. Ross, 2026-08-20: "this is wrong."
   A hero is only markless if it has NO photograph of any kind. Browsers without :has() get the plain ground that shipped
   before, so this degrades to the old behaviour rather than breaking.

   Ground and mark are separate layers on purpose: opacity on the mark must not
   drag the warm ground down with it. The ground is a hard-stop gradient on the
   element, so it works whether or not the template has a .page-hero-bg div —
   19 templates do not have one. The mark is ::before, which paints as the FIRST
   child, so .page-hero-overlay still sits over it exactly as it does over a
   photograph, and .page-hero-inner (z-index 2) stays clear of both. */
.page-hero:not(:has(.page-hero-bg[style*="background-image"])):not(:has(.page-hero-portrait)):not(:has(.bio-photo)):not(:has(.hero-photo-panel)) {
  /* Soft hand-off, not a hard edge at 46%. The overlay used to hide that seam;
     it is switched off below, so the ground has to do it itself. */
  background: linear-gradient(to right, var(--off) 0 42%, var(--warm) 52% 100%);
}
/* NO OVERLAY on a mark hero. .page-hero-overlay is opaque to 52% and fades out
   by 74% — its job is to keep h1 readable ON TOP OF A PHOTOGRAPH. There is no
   photograph here, so all it did was wash out the left half of the mark.
   Ross, 2026-08-20, on the burn injuries hero: the mark should be "fully visible
   instead of behind the bleed." The bleed IS this overlay. */
.page-hero:not(:has(.page-hero-bg[style*="background-image"])):not(:has(.page-hero-portrait)):not(:has(.bio-photo)):not(:has(.hero-photo-panel)) .page-hero-overlay { background: none; }
.page-hero:not(:has(.page-hero-bg[style*="background-image"])):not(:has(.page-hero-portrait)):not(:has(.bio-photo)):not(:has(.hero-photo-panel))::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 46%;
  /* NOT centred. The "On This Page" card occupies the right ~60% of this panel,
     so a centred mark sits behind it and is invisible — which is the whole
     complaint about the photograph it replaced. The clear strip is the panel's
     left ~40%, so the mark is anchored there. */
  /* Centred in the panel by default: with the overlay gone there is nothing to
     hide behind, and most mark heroes have no contents card. */
  background: url("../icons/vb-mark-gold.svg") no-repeat center center;
  background-size: min(210px, 26%);
  opacity: .16;
}
/* The exception: heroes that DO carry an "On This Page" card. The card owns the
   right ~60% of the panel, so a centred mark would sit behind it and vanish —
   the original complaint about the photograph this replaced. Anchored left of
   the card instead, which is clear now that the overlay is off. */
.page-hero:not(:has(.page-hero-bg[style*="background-image"])):not(:has(.page-hero-portrait)):not(:has(.bio-photo)):not(:has(.hero-photo-panel)):has(.page-hero-card)::before {
  background-position: 14% center;
}
/* Below 1024px the contents card drops out of the panel, so the mark can have
   the middle back. */
@media (max-width: 1024px) {
  .page-hero:not(:has(.page-hero-bg[style*="background-image"])):not(:has(.page-hero-portrait)):not(:has(.bio-photo)):not(:has(.hero-photo-panel))::before {
    background-position: center;
  }
}

.page-hero-gold-rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 56px var(--gutter) 48px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  /* Centre, not end (Ross, 2026-08-10). This bottom-aligned the two columns, so
     on the 24 templates that put a .page-hero-card beside the copy the card sat
     on the copy's baseline — a 408px card against a 522px copy block left a
     114px gap above it. The copy itself was already centred in the hero band
     (measured +4px), so this moves the card, not the text. */
  align-items: center;
}
.page-hero-left {}
.page-hero-eyebrow {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-hero-eyebrow-line {
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.page-hero-eyebrow-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--navy);
  margin-bottom: 20px;
}
.page-hero h1 em { font-style: italic; color: var(--gold-display); }
.page-hero-intro {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.72;
  max-width: 560px;
  margin-bottom: 28px;
}
.page-hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.page-hero-phone {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--navy);
  transition: color .2s;
}
.page-hero-phone:hover { color: var(--gold); }
/* Right: quick-nav card */
.page-hero-card {
  background: rgba(250,250,248,0.90);
  border: 1px solid var(--border);
  padding: 28px 24px;
}
.page-hero-card-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 16px;
  display: block;
}
.page-hero-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.page-hero-nav li { border-bottom: 1px solid var(--border); }
.page-hero-nav li:last-child { border-bottom: none; }
.page-hero-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-mid);
  transition: color .2s;
}
.page-hero-nav a:hover { color: var(--navy); }
.page-hero-nav a::after { content: "↓"; font-size: 11px; opacity: 0.5; }

/* ── SECTION BASE ────────────────────────────────────────── */
/* ── VERTICAL RHYTHM ──────────────────────────────────────
   Ross, 2026-08-15: the padding problem "is on most (if not all) pages", not
   just the bios. Measured before this change on /maritime-injury-lawyer/:
   SIX .section bands at 108px top AND bottom — 1,296px of padding on one page,
   and 216px of empty space between every pair of adjacent sections.

   One scale now governs the whole site, roughly a third off every band. The
   clamp keeps it fluid: small screens were never the problem, so the floor
   barely moves while the desktop ceiling comes down hard.
   ───────────────────────────────────────────────────────── */
.section { padding: clamp(40px, 3.6vw, 56px) 0; }
/* Second pass, 2026-08-20 (3.99.0). Item 77 took this from 108 to 68; Ross
   looked again on a tall desktop and it still read as too much — a section
   boundary was 133px of nothing, and the same numbers recurred on every page
   type (measured: 13-19% of page height was whitespace runs over 60px).
   At 1512px this is now 54px instead of 66.5; at 1920 it is 56 instead of 72.
   THE MOBILE FLOOR IS DELIBERATELY UNCHANGED at 40px — item 77 tuned that for
   phones and Ross's complaint was about desktop, so the scaling was tightened
   and the floor left alone. */
/* The clamp FLOOR is what phones get — 4.4vw is only 16px at 375px, so the
   floor always wins there. At 48px every section boundary was a 96px gap on a
   phone; 40px makes it 80px, which still separates the bands clearly. Section
   padding is only ~4% of a long mobile page, so this is a polish change, not a
   page-length one — the length is content. */
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── INTRO STATEMENT ─────────────────────────────────────── */
.intro-statement {
  background: var(--white, #fff);
  border-bottom: 1px solid var(--border);
}
.intro-statement-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.intro-label { padding-top: 4px; }
.intro-label .eyebrow { margin-bottom: 12px; display: block; }
.intro-divider { width: 40px; height: 2px; background: var(--gold); margin-bottom: 0; }
.intro-display {
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 24px;
}
.intro-body {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 16px;
}
.intro-body:last-of-type { margin-bottom: 32px; }

/* ── QUESTION CALLOUT ────────────────────────────────────── */
.question-callout {
  background: var(--warm);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(28px, 3vw, 44px) var(--gutter);
}
.question-callout-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
}
.question-callout-icon {
  /* NO BORDER. The mark's own ring is the frame now — a bordered square around a
     stroked circle gave two nested containers and squeezed the glyph down to a
     hairline. Keeps the 56px footprint so the text beside it does not shift. */
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.question-callout-icon svg { width: 52px; height: 52px; }
.question-callout-pre {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-lt-aa);
  margin-bottom: 8px;
}
.question-callout-q {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 400;
  font-style: italic;
  color: var(--navy);
  line-height: 1.3;
}

/* ── CONTENT AREA (sidebar + body) ──────────────────────── */
.content-area {
  background: var(--white, #fff);
  border-bottom: 1px solid var(--border);
}
.content-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
/* Sticky sidebar TOC */
.content-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.sidebar-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-lt);
  margin-bottom: 16px;
}
.sidebar-toc {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 2px solid var(--border);
}
.sidebar-toc a {
  display: block;
  padding: 9px 0 9px 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-lt);
  border-bottom: 1px solid var(--border);
  transition: color .2s, border-left-color .2s;
  border-left: 2px solid transparent;
  margin-left: -2px;
}
.sidebar-toc li:last-child a { border-bottom: none; }
.sidebar-toc a:hover,
.sidebar-toc a.active { color: var(--navy); border-left-color: var(--gold); }
/* Body content */
.content-section {
  /* 3.2vw -> 2.6vw, 2026-08-20. Two adjacent prose sections were ~150px apart
     on a 1512px screen. Floor unchanged at 32px for the same reason as .section. */
  padding: clamp(32px, 2.6vw, 40px) 0;
  border-bottom: 1px solid var(--border);
}
.content-section:last-child { border-bottom: none; }

/* A trailing paragraph's own margin-bottom stacks on top of the section padding,
   so the last line of a band sat 16-32px further from the edge than the first
   line did. Nobody designed that; it is just two spacing systems adding up.
   Scoped to the prose containers — cards and lists keep their margins. */
.intro-statement-inner p:last-child,
.content-section > p:last-child { margin-bottom: 0; }
.content-section-h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 400;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 20px;
}
.content-section-h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--navy);
  margin: 28px 0 12px;
}
.content-p {
  font-size: 17px;
  font-weight: 400;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 16px;
}
.content-p:last-of-type { margin-bottom: 0; }
.content-p a { color: var(--gold-text); border-bottom: 1px solid var(--gold-text); transition: border-color .2s; }
.content-p a:hover { border-color: var(--gold-text); }
/* Coverage checklist */
.coverage-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-lt);
  margin-bottom: 16px;
}
.coverage-list {
  list-style: none;
  border-top: 1px solid var(--border);
}
/* The row is a BLOCK, not a flex container, and the dot is positioned out of
   flow. It was flex with `gap: 14px`, which silently assumed every row held
   exactly one run of plain text: any inline element inside a row — a link, an
   <em>, a <strong> — became a flex ITEM of its own and was pushed 14px away
   from the words around it, breaking the sentence into free-floating pieces.
   That hit 7 rows across two pages (the linked doctrines on jones-act-claims
   and the five bolded lead-ins on industrial-explosion-lawyers).

   Block layout keeps inline content inline, so a row can now hold any markup.
   It also puts the dot on the FIRST line of a row that wraps instead of
   centring it against both lines. 2026-08-20 (3.103.0). */
.coverage-item {
  position: relative;
  padding: 11px 0 11px 20px;   /* 20px = 6px dot + the 14px gap it replaces */
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-mid);
}
.coverage-item:last-child { border-bottom: none; }
/* Bold lead-ins inside a coverage row are labels, exactly like bold inside body
   copy. They were inheriting --text-mid, so they read as heavier grey rather
   than as a label. Matched to .content-p strong. 2026-08-20 (3.104.0). */
/* A coverage row links to its spoke page when one exists (vbs_link_if_built).
   The underline is permanent, not hover-only: in a list where some rows link
   and some do not, colour alone would be the only thing telling them apart,
   which fails WCAG 1.4.1. The 44px touch target for these is already set in
   the mobile block near the end of this file. */
.coverage-item a {
  color: var(--gold-text);
  border-bottom: 1px solid var(--gold-text);   /* same underline as .content-p a */
  transition: border-color .2s, color .2s;
}
.coverage-item a:hover,
.coverage-item a:focus-visible { color: var(--navy); border-bottom-color: var(--navy); }
.coverage-dot {
  position: absolute;
  left: 0;
  top: 17px;                   /* 11px row padding + half a 19px line box, less half the dot */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
/* Sub-topic cards grid */
.subtopic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: 32px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.subtopic-card {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px 22px;
  transition: background .2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.subtopic-card:hover { background: var(--off); }

/* A spoke that has not been built yet. The heading and blurb stay — the firm
   does handle the work — but everything that promises a destination goes: no
   anchor (see inc/links.php), no pointer, no hover tint, and no gold "→" call
   to action. Added 2026-08-19 so hubs can list their full planned spoke set
   without shipping 404s. Delete nothing when a spoke is built; publishing the
   page is enough, and the card becomes a link again on its own. */
.subtopic-card--unbuilt { cursor: default; }
.subtopic-card--unbuilt:hover { background: transparent; }
.subtopic-card--unbuilt .subtopic-card-link { display: none; }
.subtopic-card-h {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--navy);
}
.subtopic-card-p {
  font-weight: 400;
  font-size: 15px;
  color: var(--text-lt);
  line-height: 1.55;
  flex: 1;
}
.subtopic-card-link {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-text);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.subtopic-card-link::after { content: "→"; }
.subtopic-card:hover .subtopic-card-link { gap: 10px; }
/* Warning callout */
.warning-callout {
  background: var(--warm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 24px 24px;
  margin: 28px 0;
}
.warning-callout-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 10px;
}
.warning-callout p {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.7;
}
/* Numbered action list */
.action-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 20px 0;
}
.action-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.action-item:first-child { border-top: 1px solid var(--border); }
.action-num {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  /* --gold (#B29261) is 2.93:1 on white and fails. These numerals are content,
     not decoration — they carry the step order — so they take the full 4.5:1.
     --gold-text is 5.36:1 on white and keeps the numerals gold. */
  color: var(--gold-text);
  line-height: 1;
  min-width: 28px;
  flex-shrink: 0;
}
.action-text {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.7;
  padding-top: 2px;
}
.action-text strong {
  color: var(--navy);
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
}
/* Cases chip grid */
.cases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  margin-top: 8px;
}
.case-chip {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  gap: 8px;
}
.case-chip-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
/* External reference link row */
.ext-link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.ext-link-row a { font-size: 14px; color: var(--gold); }
.ext-link-row span { font-size: 14px; color: var(--text-lt); }

/* ── FAQ SECTION ─────────────────────────────────────────── */
.faq-section {
  background: var(--off);
  border-bottom: 1px solid var(--border);
}
.faq-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.faq-header { margin-bottom: 40px; }
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 20px;
}
.faq-q-text {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.3;
}
.faq-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  transition: transform .25s, border-color .2s;
}
/* The + glyph. It had no intrinsic size and no CSS size: an <svg> with only a
   viewBox has no intrinsic dimensions, and as a flex item inside the 28px
   .faq-icon box Chrome fell back to the default replaced-element size while
   WebKit collapsed it — which is why the icon rendered as an empty square on
   iPad while looking fine on desktop. Sized here rather than only in
   inc/faq.php because eight templates still hand-write this markup instead of
   calling vbs_faq_list(); this rule catches every instance either way. */
.faq-icon svg { width: 14px; height: 14px; display: block; }
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  border-color: var(--gold);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .3s ease;
}
.faq-item.open .faq-a { max-height: 600px; padding-bottom: 20px; }
.faq-a-inner {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.75;
}
.faq-a-inner a { color: var(--gold-text); border-bottom: 1px solid var(--gold-text); }

/* ── RELATED RESULTS ─────────────────────────────────────── */
.related-results {
  background: var(--white, #fff);
  border-bottom: 1px solid var(--border);
}
.related-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.related-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 48px;
}
.related-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}
.related-header-right p {
  font-weight: 400;
  font-size: 15px;
  color: var(--text-lt);
  text-align: right;
  max-width: 280px;
  line-height: 1.6;
}
.results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
/* ── .result-card, part 1 of 2 ──────────────────────────────────────────────
   Moved here from style.css (3.91.0, checklist item 24). These used to sit in
   style.css, which loads FIRST, while the block below sits in this file, which
   loads LAST — so a homepage result card was a blend of the two and nobody
   could see it by reading either file.

   Kept verbatim and in the same order so the cascade is byte-for-byte what it
   was. What actually wins, for anyone reading: background, display, overflow
   and the right/bottom borders come from part 2; padding, position, the gold
   ::before rule and the hover shadow come from part 1. .result-type ends up
   NAVY, not the gold declared here — which is why item 24's contrast worry
   never showed up on screen.
   ──────────────────────────────────────────────────────────────────────── */
.result-card { background: var(--off-white); border: 1px solid var(--n200); padding: 32px 26px; position: relative; transition: box-shadow 0.25s; }
.result-card:hover { box-shadow: 0 4px 20px rgba(0,2,45,0.08); }
.result-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); }
.result-amount { font-family: var(--serif); font-size: clamp(26px, 2.5vw, 38px); font-weight: 300; color: var(--navy); line-height: 1; margin-bottom: 10px; }
.result-case { font-size: 14px; font-weight: 500; color: var(--n900); margin-bottom: 6px; }
.result-type { font-size: 14px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.result-desc { font-size: 15px; font-weight: 400; color: var(--n500); margin-top: 10px; line-height: 1.55; }

/* ── .result-card, part 2 of 2 ─────────────────────────────────────────── */
.result-card {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--white, #fff);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background .2s;
}
.result-card:hover { background: var(--off); }
.result-card-img {
  height: 140px;
  overflow: hidden;
  background: var(--navy);
  flex-shrink: 0;
}
.result-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.6) brightness(0.8);
  transition: transform .4s;
}
.result-card:hover .result-card-img img { transform: scale(1.04); }
.result-card-body {
  padding: 18px 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.result-amount {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
}
.result-verdict {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.result-type {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
.result-desc {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-lt);
  line-height: 1.5;
  flex: 1;
  margin-top: 4px;
}
.result-link {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
}
.result-link::after { content: "→"; }
.result-card:hover .result-link { gap: 9px; }
.results-note {
  font-size: 14px;
  color: var(--text-lt);
  margin-top: 20px;
  line-height: 1.6;
}
.results-note a { color: var(--gold); }
/* CTA inline arrow link (results header) */
.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1.5px solid var(--gold);
  padding-bottom: 3px;
  transition: gap .2s;
}
.cta-primary:hover { gap: 14px; }
.cta-primary svg { width: 16px; height: 12px; }

/* ── ATTORNEYS SECTION ───────────────────────────────────── */
.attorneys-section {
  background: var(--warm);
  border-bottom: 1px solid var(--border);
}
.attorneys-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.attorneys-header { margin-bottom: 48px; }
.attorneys-header p {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.75;
  max-width: 560px;
  margin-top: 14px;
}
.attorneys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.attorney-card {
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white, #fff);
  transition: box-shadow .3s;
}
.attorney-card:hover { box-shadow: 0 8px 32px rgba(0,2,45,0.09); }
/* .attorney-photo lives in style.css — see the note there. Declaring it here
   too is what let a stale height beat an aspect ratio on 2026-08-20. */
.attorney-card:hover .attorney-photo img { transform: scale(1.02); }
.attorney-body {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.attorney-body h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--navy);
}
.attorney-role {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  display: block;
}
.attorney-body p {
  font-size: 15px;
  font-weight: 400;
  color: var(--text-mid);
  line-height: 1.7;
  flex: 1;
}
.attorney-creds {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.attorney-cred {
  font-size: 14px;
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid var(--border);
  color: var(--text-mid);
}
.attorney-link {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap .2s;
}
.attorney-link::after { content: "→"; }
.attorney-card:hover .attorney-link { gap: 10px; }

/* ── CONTACT CTA BAND ────────────────────────────────────── */
.contact-cta {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.contact-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}
.contact-cta-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
}
.contact-cta .cc-eyebrow { color: var(--gold); margin-bottom: 18px; display: block; }  /* dark panel: keep the light gold; outranks .eyebrow regardless of source order */
.cc-h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 50px);
  font-weight: 400;
  color: var(--white, #fff);
  line-height: 1.1;
  margin-bottom: 20px;
}
.cc-h2 em { font-style: italic; color: var(--gold-lt); }
.cc-body {
  font-size: 16px;
  color: rgba(255,255,255,0.72);
  line-height: 1.8;
  margin-bottom: 28px;
}
.cc-phone {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  color: var(--gold);
  display: block;
  margin-bottom: 6px;
  transition: color .2s;
}
.cc-phone:hover { color: var(--gold-lt); }
.cc-phone-note { font-size: 14px; color: rgba(255,255,255,0.7); }
/* Form */
.cc-form {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 32px 28px;
}
.form-label-tag {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 6px;
  display: block;
}
.form-group { margin-bottom: 11px; }
.form-control {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  font-family: var(--sans);
  /* 16px, not 14px: iOS Safari zooms the whole page when a focused field is
     under 16px, and the user then has to pinch back out. This is the single
     most common mobile-form defect and it applied to every field on the site. */
  font-size: 16px;
  min-height: 44px;
  color: var(--white, #fff);
  outline: none;
  -webkit-appearance: none;
  transition: border-color .2s, background .2s;
}
.form-control:focus { border-color: var(--gold); background: rgba(255,255,255,0.1); }
.form-control::placeholder { color: rgba(255,255,255,0.6); }   /* 7.22:1 on navy; 0.28 was 2.31:1 and failed AA */
textarea.form-control { resize: vertical; min-height: 80px; }
.form-submit {
  width: 100%;
  height: 48px;
  border: none;
  cursor: pointer;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background .2s;
  margin-top: 6px;
}
.form-submit:hover { background: var(--gold-lt); }
.form-disclaimer {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin-top: 10px;
  text-align: center;
  line-height: 1.5;
}

/* ── EYEBROW (for sections that need it inline) ──────────── */
.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* ── SCROLL REVEAL ANIMATION ─────────────────────────────── */
/* Reveal-on-scroll is an ENHANCEMENT, not a gate. Content is visible by default so the
   page still reads if JS fails or is slow; .js-fade is added by page-templates.js only
   once it is running, and prefers-reduced-motion opts out entirely. */
.fade { opacity: 1; transform: none; }
.js-fade .fade { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js-fade .fade.in { opacity: 1; transform: translateY(0); }
/* The section directly after a hero NEVER fades in. Whether the reader can tell
   the page scrolls must not depend on JavaScript having run, an observer having
   fired, or the tab having been focused — if that first band is invisible the
   page looks like it ends at the hero, which is exactly what Ross reported on a
   13" screen. Everything further down still animates; this one is simply always
   painted, so there is always real content peeking above the fold. */
.js-fade .page-hero + .fade,
.js-fade .page-hero + * > .fade:first-child { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-fade .fade { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.fd1 { transition-delay: .1s; }
.fd2 { transition-delay: .2s; }
.fd3 { transition-delay: .3s; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* minmax(0,1fr) not 1fr: a bare 1fr has min-width:auto, so a wide child (the
     supply-chain table, min-content 403px) stretches the column and drags the
     whole page sideways instead of scrolling inside its own overflow wrapper. */
  .content-inner { grid-template-columns: minmax(0, 1fr); }
  .content-sidebar { position: static; }
  /* The stacked sidebar becomes a horizontal index below 1024px. It was
     flex-wrap, so items of different widths paired up unpredictably — five
     entries on their own line and two sharing the sixth, which reads as a
     layout fault rather than a deliberate row. A grid gives even columns that
     collapse to one when the screen is too narrow to hold two honestly. */
  .sidebar-toc {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    column-gap: 12px;
    border-left: none;
    border-top: 2px solid var(--border);
  }
  .sidebar-toc a {
    border-left: none;
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    font-size: 14px;
  }
  /* Sub-items keep their indent so the hierarchy survives the reflow. */
  .sidebar-toc li.toc-sub a { padding-left: 16px; }
  .page-hero-inner { grid-template-columns: 1fr; }
  .page-hero-card { display: none; }
}
@media (max-width: 900px) {
  /* Hero image is removed below 900px. There is no spare width on a phone, so the
     photo sat directly under the headline, eyebrow, intro and CTA (text ran to 370px
     of a 390px screen while the gradient was already transparent by 289px). The cream
     ground, gold rule and type carry the hero on their own. */
  .page-hero-bg,
  .page-hero-overlay { display: none; }
  .page-hero { min-height: 0; }
  .page-hero-inner { padding: 48px var(--gutter) 44px; }

  .intro-statement-inner { grid-template-columns: 1fr; gap: 24px; }
  .related-header { grid-template-columns: 1fr; }
  .related-header-right { align-items: flex-start; }
  .related-header-right p { text-align: left; }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .attorneys-grid { grid-template-columns: 1fr; }
  /* .attorney-photo needs no override here: its aspect ratio holds at every
     width, which is the whole point of using one. */
  .contact-cta-inner { grid-template-columns: 1fr; }
  .subtopic-grid { grid-template-columns: 1fr; }
  .cases-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .results-grid { grid-template-columns: 1fr; }
  .page-hero-inner { padding: 40px var(--gutter) 34px; }
  .cases-grid { grid-template-columns: 1fr; }
}

/* ── HERO PROOF LINE ─────────────────────────────────────── */
.page-hero-proof {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.58);
  margin-top: 10px;
  line-height: 1.55;
}

/* ── RESULT CARD NOTE ────────────────────────────────────── */
.result-card-note {
  font-size: 14px;
  color: var(--text-lt);
  font-style: italic;
  margin-top: 10px;
  line-height: 1.5;
}

/* ── TESTIMONIALS SECTION ────────────────────────────────── */
.testimonials-section {
  background: var(--warm);
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 32px);
}
.testimonial-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: clamp(24px, 3vw, 36px);
  border-radius: 2px;
}
.testimonial-quote-mark {
  font-family: var(--serif);
  font-size: 3rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}
.testimonial-text {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--navy);
  font-style: italic;
  margin: 0;
}
.testimonial-cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-size: 0.875rem; /* was 0.8125rem = 13px, under the 14px sitewide floor */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text); /* was --gold: 2.58:1 on --warm, fails AA. --gold-text is 4.73:1. */
}
@media (max-width: 700px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* Visually-hidden utility — used for the supply-chain table caption, which screen
   readers need but the visual design doesn't show. New class name; nothing in
   style.css or service-pages.css declares .sr-only. */
.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;
}

/* ── TOUCH TAP TARGETS (WCAG 2.5.8 / touch guidance) ─────────
   Inline links and the phone CTA were 19-34px tall. Originally gated at
   max-width:900px, which missed the device this matters most on: an iPad in
   landscape is 1024px wide (iPad Pro 11" is 1194px) and is entirely touch, so
   it got desktop-sized hit areas. Width is the wrong signal for "is this a
   finger or a mouse".

   Now it applies to narrow screens OR any coarse-pointer device at any width.
   A mouse-driven 900px window still gets desktop spacing; a 1194px tablet does
   not. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .breadcrumb-inner a,
  .breadcrumb-current { display: inline-flex; align-items: center; min-height: 44px; }
  .cc-phone { display: inline-flex; align-items: center; min-height: 44px; }
  .sidebar-toc a,
  .page-hero-nav a { min-height: 44px; }
  .subtopic-card-link,
  .attorney-link,
  .result-link { min-height: 44px; align-items: center; }
  /* Card CTAs measured 20-34px tall on a phone. They are standalone actions,
     not inline prose links, so they get the full 44px. */
  .ts-link,
  .result-card-link,
  .cr-card-link,
  .testimonial-link,
  .cta-primary { display: inline-flex; align-items: center; min-height: 44px; }
  /* The logo is a 36px image in a link with no padding. */
  .nav-logo { min-height: 44px; }
  /* Standalone navigation links that are not inline in a sentence: the external
     resource rows, the coverage lists, and headings that are themselves links.
     Measured 18-26px. Inline links inside .content-p, list prose and the
     address block are deliberately NOT here — WCAG 2.5.8 exempts links in a
     sentence, and padding them would wreck the line rhythm of body copy. */
  .ext-link-row a,
  .coverage-item > a:only-of-type,
  .content-section-h3 a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── SERVICE AREAS INDEX ─────────────────────────────────
   The /service-areas/ page reuses the homepage's .practice-card visual, but in
   a responsive grid instead of the homepage's horizontal drag-rail.

   .sa-* are new class names — nothing in style.css uses them, so there is no
   cascade conflict (see the CSS rule in VB-BUILD-STANDARD.md §6). The two
   .practice-card rules below are deliberately SCOPED to .sa-grid: they adjust
   the card for grid layout without redeclaring the base class, so the homepage
   rail is untouched. */
.sa-section { background: var(--warm); padding: 60px 0; }
.sa-inner { max-width: var(--max-w, 1360px); margin: 0 auto; padding: 0 var(--gutter); }
.sa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3px;
}
/* Cards are fixed-width in the homepage rail; in a grid they fill their track. */
.sa-grid .practice-card { width: auto; }
/* The homepage card heading is an <h3> inside a section led by an <h2>. On this
   page the cards sit directly under the <h1>, so they are <h2> for a correct
   heading order — this mirrors the .practice-card-body h3 type. */
.sa-grid .practice-card-body h2 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--navy);
  line-height: 1.25;
}
@media (max-width: 640px) {
  .sa-section { padding: 56px 0; }
  .sa-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   CASE RESULTS  (build 3.6.0)

   Namespaced .cr-* on purpose. The listing grid deliberately does NOT reuse
   .result-card: that class is declared in BOTH style.css and page-templates.css
   with different rules, and since page-templates.css loads last on every page
   the two already blend on the homepage. Reusing it here would mean any fix to
   one surface silently changes the other. The cards below are styled to match
   the approved homepage design without sharing its class.

   Colour: --gold-text (not --gold) on light backgrounds, per the type standard.
   ========================================================================== */

/* --- hero: no photo, so the navy carries it ------------------------------- */
/* .cr-hero deliberately sets NO background. .page-hero is cream (--off) and the
   overlay gradient fades to transparent at 74%, so a hero with no .page-hero-bg
   shows whatever the section background is on its right-hand quarter. This rule
   used to force --navy, which put a blue slab beside the copy on a page that has
   no hero photograph. Cream is the agreed no-photo treatment (see page-attorneys
   and page-testimonials, which simply omit the override). */
.cr-hero .page-hero-intro { max-width: 62ch; }

/* --- facts strip ---------------------------------------------------------- */
.cr-facts-band {
  background: var(--n50);
  border-bottom: 1px solid var(--border);
  padding-top: 26px;
  padding-bottom: 26px;
}
.cr-facts-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.cr-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
}
.cr-fact { display: flex; flex-direction: column; gap: 3px; }
.cr-fact-k {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.cr-fact-v {
  font-size: 16px;
  font-weight: 400;
  color: var(--n900);
  line-height: 1.4;
}
.cr-fact-v a { color: var(--n900); text-decoration: underline; text-underline-offset: 2px; }
.cr-fact-v a:hover { color: var(--gold-text); }

/* --- evidence ledger ------------------------------------------------------ */
.cr-evidence-lead {
  font-size: 16px;
  color: var(--text-lt-aa);
  margin-bottom: 18px;
}
ol.cr-evidence {
  list-style: none;
  counter-reset: cre;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
ol.cr-evidence li {
  counter-increment: cre;
  position: relative;
  padding: 16px 0 16px 46px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  line-height: 1.6;
  color: var(--n900);
}
ol.cr-evidence li::before {
  content: counter(cre, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 17px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--gold-text);
}

/* --- contrast band -------------------------------------------------------- */
.cr-contrast {
  border-top: 2px solid var(--navy);
  margin-bottom: 18px;
}
.cr-contrast-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}
.cr-contrast-k {
  flex: 1 1 260px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-lt-aa);
}
.cr-contrast-v {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--navy);
}
.cr-contrast-note {
  font-size: 16px;
  line-height: 1.65;
  color: var(--n900);
}

/* --- video ---------------------------------------------------------------- */
.cr-video { max-width: 880px; margin: 0 auto 44px; }
.cr-video-frame {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  background: var(--navy);
}
.cr-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cr-video-cap {
  text-align: center;
  font-size: 14px;
  color: var(--text-lt-aa);
  margin-top: 14px;
  font-style: italic;
}

/* --- per-page disclaimer -------------------------------------------------- */
.cr-disclaimer {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-lt-aa);
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

/* ==========================================================================
   CASE MATCHER  —  PROTOTYPE (inc/matcher.php). Copy not approved.
   Navy band so it reads as a distinct instrument rather than page furniture,
   matching the treatment the firm's own mock used.
   ========================================================================== */
.matcher { background: var(--navy); color: var(--off-white); padding: clamp(38px, 4vw, 58px) 0; }
.matcher[hidden] { display: none; }
.matcher-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.matcher .page-hero-eyebrow-text { color: var(--gold-light); }
.matcher .page-hero-eyebrow-line { background: var(--gold-light); }
.matcher-h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--off-white);
}
.matcher-guide {
  font-size: 17px;
  line-height: 1.6;
  /* --gold-light on navy, not --gold: the darker gold fails AA on this ground. */
  color: var(--gold-light);
  max-width: 56ch;
  margin: 0 0 26px;
}
.matcher-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.matcher-chip {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  color: var(--off-white);
  background: rgba(255, 244, 234, .06);
  border: 1px solid rgba(255, 244, 234, .22);
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.matcher-chip:hover { border-color: var(--gold-light); background: rgba(178, 146, 97, .22); }
.matcher-chip[aria-pressed="true"] {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--navy);
}
.matcher-chip:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

.matcher-answer {
  margin-top: 26px;
  background: var(--off-white);
  color: var(--n900);
  border-radius: 4px;
  padding: clamp(22px, 2.4vw, 30px);
  max-width: 70ch;
}
.matcher-answer[hidden] { display: none; }
.matcher-yes {
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 10px;
}
.matcher-body { font-size: 16px; line-height: 1.65; color: var(--n900); margin: 0 0 20px; }
.matcher-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.matcher-cta {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--off-white);
  background: var(--navy);
  padding: 13px 22px;
  border-radius: 3px;
  text-decoration: none;
}
.matcher-cta:hover { background: var(--blue); }
.matcher-call { font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--gold-text); text-decoration: none; }
.matcher-call:hover { text-decoration: underline; }

/* Required by the same advertising-rules thinking that shaped the tool: the
   disclaimer is quiet but must still pass AA on navy, so --gold-light. */
.matcher-disclaimer {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gold-light);
  opacity: .85;
  max-width: 78ch;
  margin: 26px 0 0;
}
@media (pointer: coarse) { .matcher-chip { min-height: 44px; } }

/* ==========================================================================
   LISTING FILTERS  —  /case-results/, /testimonials/, /news-insights/
   Built by assets/js/filter.js from the config in inc/filter.php. The bar is
   [hidden] in the markup and only unhidden once the script has drawn its
   controls, so a JS failure leaves no dead UI behind — see inc/filter.php.
   ========================================================================== */
.vbs-filter {
  max-width: var(--max-w);
  margin: 0 auto 28px;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}
.vbs-filter[hidden] { display: none; }

/* THE FILTER'S HIDE RULE. Without this, filtering silently does nothing.
   filter.js sets the `hidden` attribute on a card, but `hidden` only carries
   `display: none` from the UA stylesheet, and ANY author `display` beats it —
   both .cr-card and .ts-card are `display: flex`, so every card stayed on
   screen while reporting itself hidden. Clicking "Truck Accidents" left all 18
   results visible (Ross, 2026-08-15).

   Scoped to [data-vbs-grp] so it only ever touches cards the filter tagged.
   !important because .cr-card/.ts-card carry their display from a class of
   equal specificity, and a visibility utility must not lose that race.

   VERIFY FILTERING BY COMPUTED DISPLAY OR offsetParent, NEVER by reading
   el.hidden — that reads back the property you just set and passes while the
   page is unchanged. That is exactly how this shipped. */
[data-vbs-grp][hidden] { display: none !important; }
/* filter.js moves the bar inside the listing column, under the intro copy. Once
   there it is already inside that column's max-width and gutter, so it must not
   apply them a second time. */
.vbs-filter--inline { max-width: none; padding: 0; margin: 22px 0 26px; }

.vbs-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vbs-chip {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--n900);
  background: transparent;
  border: 1px solid var(--n200);
  border-radius: 999px;
  padding: 9px 15px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.vbs-chip:hover { border-color: var(--gold-text); color: var(--gold-text); }
.vbs-chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--off-white);
}
/* The count is a quieter companion to the label, but it still has to pass on
   both chip states — hence two values rather than an opacity. */
.vbs-chip-n { color: var(--text-lt-aa); font-variant-numeric: tabular-nums; }
.vbs-chip[aria-pressed="true"] .vbs-chip-n { color: var(--gold-light); }

.vbs-filter-search { display: block; flex: 1 1 240px; max-width: 340px; }
.vbs-filter-input {
  width: 100%;
  font-family: var(--sans);
  /* 16px floor: below it iOS Safari zooms the page when the field takes focus. */
  font-size: 16px;
  color: var(--n900);
  background: var(--n0);
  border: 1px solid var(--n200);
  border-radius: 4px;
  padding: 10px 14px;
}
.vbs-filter-input::placeholder { color: var(--n500-aa); }
.vbs-filter-input:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 1px; }

.vbs-filter-count {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-lt-aa);
  margin: 0;
  flex: 0 0 auto;
}

/* Empty state. Reached only by a search that matches nothing — a chip can never
   land here, because chips are drawn only for groups that have items. */
.vbs-filter-empty {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 8px var(--gutter) 0;
}
.vbs-filter-empty[hidden] { display: none; }
.vbs-filter-empty-msg {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--n900);
  margin: 0 0 6px;
}
.vbs-filter-empty-alt { font-size: 16px; color: var(--text-lt-aa); margin: 0 0 16px; }
.vbs-filter-empty-alt a { color: var(--gold-text); font-weight: 500; }
.vbs-filter-clear {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--off-white);
  background: var(--navy);
  border: 0;
  border-radius: 3px;
  padding: 11px 20px;
  cursor: pointer;
}
.vbs-filter-clear:hover { background: var(--blue); }

/* At 375px the seven chips wrapped onto FIVE rows — about 260px of controls
   stacked above the first result, which is the same false-bottom problem the
   short-viewport work fixed today: the page looks like it starts with a wall of
   buttons. One scrolling row instead. The strip bleeds to the screen edge so it
   reads as scrollable, while the page itself never scrolls sideways. */
@media (max-width: 700px) {
  .vbs-filter { gap: 10px; }
  .vbs-filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter));
    padding: 2px var(--gutter);
    max-width: 100vw;
  }
  .vbs-filter-chips::-webkit-scrollbar { display: none; }
  /* No scroll-snap. With snap-align:start the strip snapped past its own left
     gutter on load, so the first chip sat flush against the screen edge while
     the search box below it lined up correctly. Snapping buys nothing on a row
     of filter chips. */
  .vbs-chip { flex: 0 0 auto; }
  /* Search and its count share a row. On its own line the count cost ~34px of
     the mobile fold and pushed the first card off the screen entirely. */
  .vbs-filter-search { max-width: none; flex: 1 1 60%; }
  .vbs-filter-count { flex: 1 1 auto; text-align: right; }
}

/* Touch targets are gated on the pointer, not the viewport — a landscape iPad
   is 1024px wide and entirely touch, so a width-only rule would miss it. */
@media (pointer: coarse) {
  .vbs-chip { min-height: 44px; padding: 11px 16px; }
  .vbs-filter-clear { min-height: 44px; }
}

/* Visually hidden, still announced. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   LISTING GRID  —  /case-results/
   ========================================================================== */
.cr-listing-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.cr-lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-lt-aa);
  max-width: 62ch;
  margin: 0 0 34px;
}
/* Gutenberg inserts a .wp-block-group__inner-container between a group and its
   inner blocks. Without accounting for it the grid has exactly ONE child and all
   18 cards stack in a single column — which is what shipped until it was caught
   in the browser. Both levels get the grid, and the wrapper spans the full row,
   so the layout is correct whether or not WordPress emits that div. */
.cr-grid,
.cr-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.cr-grid { margin: 0 0 16px; }
.cr-grid > .wp-block-group__inner-container { grid-column: 1 / -1; }
.cr-grid > .wp-block-group,
.cr-grid > .wp-block-group__inner-container > .wp-block-group { margin: 0; }
.cr-card > * { margin: 0; }
.cr-card-link-wrap { margin-top: auto !important; padding-top: 16px; }
.cr-card {
  background: var(--off-white);
  border: 1px solid var(--n200);
  padding: 30px 26px 26px;
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow .25s;
}
.cr-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
}
.cr-card:hover { box-shadow: 0 4px 20px rgba(0,2,45,.08); }
.cr-card-amount {
  font-family: var(--serif);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 300;
  color: var(--navy);
  line-height: 1.05;
  margin-bottom: 10px;
}
.cr-card-case {
  font-size: 14px;
  font-weight: 500;
  color: var(--n900);
  margin-bottom: 6px;
}
.cr-card-type {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.cr-card-desc {
  font-size: 15px;
  font-weight: 400;
  color: var(--n500-aa);
  margin-top: 10px;
  line-height: 1.55;
  flex: 1;
}
.cr-card-link {
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: gap .2s;
}
.cr-card:hover .cr-card-link { gap: 11px; }
.cr-card-link::after { content: '\2192'; }

@media (max-width: 1024px) {
  .cr-grid,
  .cr-grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cr-grid,
  .cr-grid > .wp-block-group__inner-container { grid-template-columns: 1fr; }
  .cr-facts { gap: 12px 24px; }
  .cr-contrast-k { flex-basis: 100%; }
}

/* ==========================================================================
   LEGAL PAGES  (build 3.10.0)  — Privacy Policy, Terms and Conditions
   Single-column policy list. .svc-geo is two-column with gold dots and suits
   short link labels, not multi-clause policy bullets. New namespaced classes,
   nothing shared redeclared.
   ========================================================================== */
.legal-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  border-top: 1px solid var(--border);
}
.legal-list li {
  position: relative;
  padding: 14px 0 14px 22px;
  border-bottom: 1px solid var(--border);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--n900);
}
.legal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.5em;
  width: 6px;
  height: 6px;
  background: var(--gold-text);
  border-radius: 50%;
}
.legal-address {
  font-style: normal;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--n900);
  border-left: 2px solid var(--gold-text);
  padding-left: 20px;
  margin-top: 6px;
}
.legal-address a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }  /* was --n900. On /terms-and-conditions/ the later `.legal-body a` rule
     overrode it to gold and on /privacy-policy/ it did not, so the same
     phone link was two different colours. Gold matches every other body
     link on the site. 3.104.0 */
.legal-address a:hover { color: var(--gold-text); }

/* --- Terms and Conditions components (3.11.0) -----------------------------
   Ported from an inline <style> that lived inside post_content. That block
   carried a parallel design system — hardcoded #16223B / #A8814A, 16.5px body,
   a 13px line under the sitewide floor, and 'EB Garamond' named directly rather
   than var(--serif). Rebuilt here on real tokens. Namespaced; nothing shared is
   redeclared. -------------------------------------------------------------- */
.legal-num { color: var(--gold-text); font-size: 0.8em; margin-right: 8px; }
.legal-lead { font-size: 18px; line-height: 1.75; color: var(--navy); }
.legal-body ul { margin: 0 0 16px; padding-left: 20px; }
.legal-body li { font-size: 17px; font-weight: 400; line-height: 1.7; color: var(--n900); margin-bottom: 8px; }
.legal-body a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
.legal-callout {
  background: var(--warm);
  border-left: 3px solid var(--gold-text);
  padding: 18px 22px;
  margin: 18px 0 24px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--n900);
}
.legal-keys { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; }
.legal-keys span {
  border: 1px solid var(--n200);
  background: var(--n50);
  color: var(--navy);
  font-weight: 600;
  font-size: 14px;          /* was 13px — under the sitewide floor */
  letter-spacing: .04em;
  padding: 6px 14px;
  border-radius: 999px;
}
.legal-address strong {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: 2px;
}

/* ==========================================================================
   TESTIMONIALS  (build 3.12.0)
   Namespaced .ts-*; nothing shared redeclared. Grid rules cover the Gutenberg
   .wp-block-group__inner-container, which sits between a group and its blocks —
   without that, every card stacks in one column (see build standard 6b).
   ========================================================================== */
.ts-featured,
.ts-featured > .wp-block-group__inner-container {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
}
.ts-featured > .wp-block-group__inner-container { grid-column: 1 / -1; }
.ts-bank,
.ts-bank > .wp-block-group__inner-container {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
}
.ts-bank > .wp-block-group__inner-container { grid-column: 1 / -1; }
.ts-featured { margin: 0 0 3px; }
.ts-bank { margin: 0 0 20px; }
.ts-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.ts-card > * { margin: 0; }
.ts-card-featured { background: var(--warm); }
.ts-quote {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--navy);
  font-style: italic;
  margin-bottom: 16px !important;
}
.ts-card-featured .ts-quote { font-size: 19px; }
.ts-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-top: auto !important;
}
.ts-ctx { font-size: 14px; font-weight: 400; color: var(--text-lt-aa); margin-top: 4px !important; }
.ts-link-wrap { margin-top: 14px !important; }
.ts-link {
  font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  transition: gap .2s;
}
.ts-link::after { content: '\2192'; }
.ts-card:hover .ts-link { gap: 11px; }
@media (max-width: 1024px) {
  .ts-featured, .ts-featured > .wp-block-group__inner-container,
  .ts-bank, .ts-bank > .wp-block-group__inner-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ts-featured, .ts-featured > .wp-block-group__inner-container,
  .ts-bank, .ts-bank > .wp-block-group__inner-container { grid-template-columns: 1fr; }
}

/* --- result / testimonial card links (3.13.0) -----------------------------
   Cards on hubs and spokes now link through to the built Case Result and
   Testimonial pages. Namespaced additions; nothing shared is redeclared. ---- */
.result-card-link-wrap, .testimonial-link-wrap { margin-top: 14px; }
.result-card-link, .testimonial-link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: gap .2s;
}
.result-card-link::after, .testimonial-link::after { content: '\2192'; }
.result-card:hover .result-card-link,
.testimonial-card:hover .testimonial-link { gap: 11px; }

/* ── ONE DEFINITION PER LINK ROLE ─────────────────────────────────
   Container rules written for prose links — `.bio-prose a`, `.legal-body a` —
   also match COMPONENT links that already carry their own definition, and beat
   that definition on specificity (0,1,1 over 0,1,0). The component then looked
   different purely because of where it sat: the "Read the result" CTA is
   underlined on the two bio pages and nowhere else among the 17 pages that use
   it, and a body link on /terms-and-conditions/ got the prose underline ON TOP
   of the border-bottom that already serves as its underline.

   Each rule below hands the component back its own definition. Audited across
   all 111 pages, 2026-08-20 (3.104.0); these were the only two containers
   affected — articles and case-result pages contain no component links. */
.bio-prose .result-card-link,
.bio-prose .testimonial-link { text-decoration: none; }
.legal-body .content-p a { text-decoration: none; }

/* Bio pull quote - the signature line on an attorney profile. Sits inside the
   hero intro column, so it inherits that column's width; no new container. */
.bio-pullquote {
  margin: 34px 0 0;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--gold);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.45;
  font-weight: 500;
  font-style: normal;
  color: var(--navy);
  letter-spacing: -0.01em;
}
@media (max-width: 768px) {
  .bio-pullquote { font-size: 19px; margin-top: 26px; padding-left: 16px; }
}

/* Attorney hero portrait - fills the 360px column .page-hero-inner already
   declares. Fixed 440px box so the hero grows to ~592px rather than the 540px
   the raw 2:3 asset would force; object-position keeps the face off the top
   edge. Below 768px the grid is 1fr and this stacks under the copy. */
.page-hero-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--warm);
}
.page-hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
@media (max-width: 768px) {
  .page-hero-portrait { aspect-ratio: 1 / 1; height: auto; margin-top: 28px; }   /* square, as everywhere else */
  .page-hero-portrait img { object-position: center 30%; }
}

/* Partner-portrait hero (Why VB Attorneys). Reuses the homepage .hero-photo-*
   panel verbatim; only the shell changes. The copy column drops to half width so
   it never runs under the 52% panel, and centres rather than bottom-aligning,
   matching the homepage. Below 1024px style.css hides the panel and the column
   is already 1fr, so nothing here needs a mobile override. */
@media (min-width: 1025px) {
  /* min(), not a flat 640px: this rule lives LATER in the file than the
     short-viewport block above, so an override there could never beat it — the
     third time that trap has cost a deploy today. On a 13" laptop (~683px of
     viewport) a 640px hero ran past the fold and nothing below could peek.
     72vh keeps it generous on a desktop monitor and yields on a laptop. */
  .page-hero-partners { min-height: min(640px, 62vh); }
  .page-hero-partners .page-hero-inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  /* .hero-photo-wrap is capped at 95% height for the homepage, where the hero is
     a full 828px viewport and the 41px of navy above the photos reads as head
     room. This hero is 640px and sits directly under the breadcrumb, so the same
     rule left a 32px navy band above the portraits that read as a gap. Scoped to
     the partners variant so the homepage is untouched. */
  .page-hero-partners .hero-photo-wrap { max-height: 100%; }

  /* THE PORTRAITS KEEP THEIR SHAPE, WHATEVER THE HERO'S HEIGHT IS.
     They were flex: 1 — each took half the panel's width however tall the panel
     happened to be. On a short window the hero drops to about 292px (deliberate:
     the short-viewport rules stop a hero eating the fold), and two half-panel
     boxes at that height are LANDSCAPE, so a 900x1350 portrait was cropped at the
     chest. Measured before the fix: 53% of the picture at 1512x630, 63% at
     1280x700.

     Sizing from the HEIGHT instead means the width follows the panel rather than
     the other way round. Square, capped at half the panel: at a full window that
     is 392x556, showing 0%-71% of the portrait; on a short window 292x292,
     showing 0%-66%. Either way the crop lands around the tie rather than at the
     chest, and the photograph is as large as the panel allows — which is what
     Ross asked for on 2026-08-20. 2/3 (full length) was tried first and made the
     men small on short windows. */
  .page-hero-partners .hero-photo-wrap {
    /* A square whose side is the SMALLER of the two limits: the panel's height,
       or half its width. height:100% alone loses the square at a full window
       (the box became 369x556 and went back to full length); a width-driven
       square overflows a short hero. A vw height with a max-height ceiling picks
       whichever binds, and unlike min() with a percentage it resolves the same
       way in every case measured. */
    flex: 0 0 auto;
    width: auto;
    height: 24vw;          /* half the panel: 52vw wide, less 6% padding, shared by two */
    max-height: 100%;      /* ...but never taller than the hero, which is short on a short window */
    aspect-ratio: 1 / 1;
  }
}

/* Editorial photo with caption, for the approved images in the Aug 4 photo
   index. Constrained to the site max width; fixed-height cover crop so portrait
   and landscape sources both behave. */
.page-figure {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) 8px;
}
.page-figure img {
  width: 100%;
  /* ASPECT, NOT A FIXED HEIGHT. This was height: clamp(260px, 38vw, 460px),
     which at the 1236px content width is a 2.69:1 letterbox — and the source
     photos are 3:2 and 4:3, so it threw away 44-50% of every one of them,
     half off the top and half off the bottom. On the drawworks photo that
     removed the men's hands and the equipment they are bending over, which is
     the entire subject (Ross, 2026-08-17: "it looks as if they are paying
     particular attention to something that has been cropped out").
     16:9 cuts a 3:2 source by 16% instead of 44%. A fixed height can only ever
     be right for one source shape; an aspect ratio is right for all of them. */
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* FOCAL POINTS, per photo.
   Even a 16% crop is taken half off the top and half off the bottom, and in
   most of these frames the subject is not vertically centred — people bending
   over machinery sit low, a standing figure sits high. Keyed on the filename so
   every focal decision lives here in one place rather than being scattered
   through ten templates, and so re-cropping a photo cannot be forgotten in
   markup someone else owns.
   Y% is the share of the OVERFLOW removed from the top: 62% keeps the bottom. */
.page-figure img[src*="inspecting-rig-drawworks"]      { object-position: 50% 62%; } /* hands + drawworks below centre */
.page-figure img[src*="examining-corroded-rig"]        { object-position: 50% 60%; } /* both men bending, looking down */
.page-figure img[src*="rusted-rigging-chain"]          { object-position: 50% 58%; } /* keep the whole hook */
.page-figure img[src*="documenting-truck-during"]      { object-position: 50% 34%; } /* standing figure — keep head + camera */
.page-figure img[src*="safety-briefing-room"]          { object-position: 50% 45%; }
.page-figure img[src*="explaining-case-to-attorney"]   { object-position: 50% 30%; } /* square source, 44% still cut — keep faces */
.page-figure img[src*="trial-team-outside-jefferson"]  { object-position: 50% 30%; } /* portrait source — keep the people, lose sky */
.page-figure img[src*="vessel-inspection-container"] { object-position: 50% 32%; } /* 9:16 selfie - hard hat, face, shoulders; loses empty sky */
.page-figure img[src*="inspecting-tug-at-dock"]      { object-position: 50% 40%; } /* 3:4 source, only 6% cut - trims foreground grass, keeps the mast */
/* PORTRAIT SOURCES. A 9:16 phone photo cannot put a head into a 16:9 band at
   the full content width: the band is 679 source pixels tall and the hard hat
   to chin measures 842, so the crop sliced both. Verified by rendering the
   exact object-fit band rather than eyeballing it. A portrait photo therefore
   gets its own shape - 4:5, held to a column width and centred - which keeps
   70% of the frame instead of 32%. The caption is held to the same column so
   the block reads as one unit. */
.page-figure-portrait img {
  aspect-ratio: 4 / 5;
  max-width: 560px;
  margin-inline: auto;
}
.page-figure-portrait figcaption {
  max-width: 560px;
  margin-inline: auto;
}
.page-figure figcaption {
  font-size: 14px;
  font-weight: 400;
  color: var(--n700);
  padding-top: 12px;
  border-top: 1px solid var(--n200);
  margin-top: 12px;
}
/* No mobile height override needed any more — the aspect ratio scales itself,
   and at 375px 16:9 lands at ~190px, close to the 220px this used to force. */

/* Result-card fields. The `-card-` vocabulary is what 19 templates and
   vbs_cr_grid() actually render, but it had no CSS at all — the headline
   figure was inheriting body type, so every result card on the site rendered
   flat. These mirror the styled legacy .result-amount / .result-type /
   .result-desc rules in style.css, with two corrections: the label uses
   --gold-text and the description --n700, because --gold and --n500 both fail
   WCAG AA on the cream card background. */
.result-card-amount {
  font-family: var(--serif);
  font-size: clamp(26px, 2.5vw, 38px);
  font-weight: 300;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 10px;
}
.result-card-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.result-card-desc {
  font-size: 15px;
  font-weight: 400;
  color: var(--n700);
  margin-top: 10px;
  line-height: 1.55;
}

/* ==========================================================================
   CONTACT PAGE  (3.27.0, restructured 3.29.0) — /contact-us/ only
   The one template with no .page-hero, no .content-area / sidebar TOC and no
   question callout. Everything below is namespaced .contact-* and used by that
   single template; nothing shared is redeclared.
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────────────
   The .contact-cta band is hoisted into the hero slot so the form is the first
   thing on the page instead of the last. .section supplies the vertical rhythm
   and .contact-cta::before already draws the gold rule other heroes get from
   .page-hero-gold-rule, so only the h1 has to step up to hero scale.

   The band is three areas, not two. Stacked the ordinary way on a phone, the
   form lands under three paragraphs and the phone number — so the mobile order
   is heading, form, copy. Both branches set grid-template-columns explicitly:
   the sitewide .contact-cta-inner rules would otherwise disagree with the areas
   declared here about how many columns the grid has. */
.contact-hero .cc-h2 { font-size: clamp(34px, 4.4vw, 58px); }
.contact-hero .contact-cta-inner {
  grid-template-columns: 1fr;
  grid-template-areas: "head" "form" "copy";
  align-items: start;
  gap: 0;
}
.contact-hero .cc-head { grid-area: head; }
.contact-hero .cc-form { grid-area: form; margin-top: 10px; }
.contact-hero .cc-copy { grid-area: copy; margin-top: 30px; }
.contact-hero .cc-copy .cc-body:last-of-type { margin-bottom: 22px; }

@media (min-width: 1025px) {
  .contact-hero .contact-cta-inner {
    grid-template-columns: 1fr 420px;
    grid-template-areas: "head form" "copy form";
    column-gap: clamp(48px, 6vw, 88px);
    row-gap: 0;
  }
  .contact-hero .cc-form { margin-top: 0; }
  .contact-hero .cc-copy { margin-top: 0; }
}

/* ── Overview + What happens next, side by side ───────────────────────────── */
.contact-duo {
  background: var(--white, #fff);
  border-bottom: 1px solid var(--border);
}
.contact-duo-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.contact-duo .eyebrow { display: block; margin-bottom: 14px; }
.contact-duo-h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 22px;
}

/* A numbered process list. .svc-geo is two columns of gold-dotted short labels
   and would set these three multi-clause steps in cramped half-columns; the
   same reasoning that produced .legal-list on the policy pages applies here. */
.contact-steps {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  counter-reset: cstep;
  border-top: 1px solid var(--border);
}
.contact-steps li {
  counter-increment: cstep;
  position: relative;
  padding: 16px 0 16px 44px;
  border-bottom: 1px solid var(--border);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-mid);
}
.contact-steps li::before {
  content: counter(cstep);
  position: absolute;
  left: 0;
  top: 17px;
  width: 27px;
  height: 27px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-text);          /* --gold fails AA on light; --gold-text is 4.7:1 */
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Frequently Asked Questions ───────────────────────────────────────────── */
.contact-faq {
  background: var(--off);
  border-bottom: 1px solid var(--border);
}
.contact-faq-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.contact-faq .eyebrow { display: block; margin-bottom: 14px; }
.contact-faq-h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: 28px;
}
.contact-faq .faq-item:first-child { border-top: 1px solid var(--border); }

/* ── Closing section ──────────────────────────────────────────────────────── */
.contact-close { background: var(--white, #fff); }
.contact-close-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.contact-close .eyebrow { display: block; margin-bottom: 14px; }
.contact-close-h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: 24px;
}
.contact-close .content-p { margin-bottom: 20px; }
.contact-close-phone-wrap { margin-top: 30px; }
.contact-close-phone {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  color: var(--gold-text);          /* light background — not --gold */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color .2s;
}
.contact-close-phone:hover { color: var(--navy); }

@media (max-width: 900px) {
  .contact-duo-inner { grid-template-columns: 1fr; }
}

/* ── BRIAN BECKCOM BIO (3.36.0) ──────────────────────────────────────────────
   Structure comes from "Ross' Rewrite": Background is an H2 with three H3
   subsections beneath it, and Case Results sits between two prose sections.
   Putting the results band inside the content column keeps one content area and
   one sticky sidebar; splitting the column in two to run a full-bleed band
   through the middle would orphan the sidebar halfway down the page. */
.content-body .results-grid { grid-template-columns: repeat(2, 1fr); margin-top: 6px; }
@media (max-width: 760px) { .content-body .results-grid { grid-template-columns: 1fr; } }

/* H3 subsections inside Background. Indented rule rather than a border so they
   read as children of the section without competing with .content-section. */
.bio-sub { padding-top: 26px; }
.bio-sub + .bio-sub { padding-top: 22px; }

/* First paragraph of Background carries the narrative hook; it was the
   .intro-display of the old Overview band and keeps that weight. */
.bio-lede { font-size: 19px; line-height: 1.7; color: var(--navy); }


/* The three Background children in the sticky sidebar, indented under it. */
.sidebar-toc li.toc-sub a { padding-left: 30px; }

/* ── BIO HERO (Brian Beckcom) — portrait in the second column ────────────────
   .page-hero-inner bottom-aligns its two cells (align-items:end), which is
   right for the 24 templates whose second column holds a .page-hero-card or
   .page-hero-nav — those are meant to sit on the same baseline as the copy.
   With a 440px portrait beside a 260px copy block it put the copy 89px BELOW
   the portrait's optical centre, which read as the text sitting too low.
   Centre them instead, and scope it so those 24 pages are untouched.

   The portrait also grows: 360x440 -> 400x500. It was cropping a 900x1350
   source hard; the extra height gives the figure room without making the hero
   unreasonably tall (80 + 500 + 72 = 652px). */
/* ---------------------------------------------------------------------------
   BIO PAGE DENSITY (3.58.0)
   Ross, 2026-08-14: "There is simply too much white space here… his image could
   append to the navigation bar and drastically reduce the space of the hero…
   There is also just too much padding between sections."

   Measured before: the hero band was 652px tall to hold a 500px portrait — 152px
   of dead air — and .content-section carries 72px top AND bottom, so consecutive
   sections sat 144px apart, on top of .content-area's own 108px.

   EVERYTHING HERE IS SCOPED to .page-hero-bio / .bio-page / .bio-head on purpose.
   .content-section is used by 46 templates and .svc-geo by 6; loosening them
   globally would restyle the whole site off the back of a bio-page complaint.
   --------------------------------------------------------------------------- */

/* The portrait now fills the band instead of floating in it: the hero's height
   is set by the image, not by padding around it. */
/* Section rhythm: 144px between sections becomes 72px, and the band around the
   whole content area comes in from 108px to 56px. */
.bio-page.content-area { padding-top: 56px; padding-bottom: 56px; }
.bio-page .content-section { padding: 36px 0; }
.bio-page .content-section:first-child { padding-top: 0; }
.bio-page .content-section-h2 { margin-bottom: 16px; }

/* Credential groups. Ross: the bullets "need to be much more thoughtfully
   designed and laid out" — so they are no longer bullets. Each line is a ruled
   row under a small-caps label, which reads as a record rather than a list of
   marketing points, and keeps long and short entries visually equal. */
.cred-groups { display: grid; gap: 30px; }
@media (min-width: 900px) { .cred-groups { grid-template-columns: 1fr 1fr; gap: 30px 48px; } .cred-group--wide { grid-column: 1 / -1; } }.cred-group-label {
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-text); margin: 0 0 10px;
}
.cred-list { list-style: none; margin: 0; padding: 0; }
.cred-list li {
  font-size: 16px; line-height: 1.6; color: var(--n900);
  padding: 11px 0 11px 16px; border-top: 1px solid rgba(0,2,45,0.10); position: relative;
}
.cred-list li:first-child { border-top: none; }
.cred-list li::before {
  content: ''; position: absolute; left: 0;
  /* Centred on the first LINE, not pinned near the top of the row: padding-top
     plus half a line box (line-height 1.6 -> 0.8em). Expressed in em so it stays
     centred if the type size changes. A fixed pixel top drifts the moment an
     item wraps to two lines. */
  top: calc(11px + 0.8em);
  width: 7px; height: 1px; background: var(--gold);
}
.cred-list li em { font-style: italic; }

.page-hero-bio .page-hero-inner {
  /* The portrait column now STRETCHES rather than centring a fixed 500px image
     inside a taller band. Before this the hero measured 652px to hold a 500px
     photograph — 152px of dead air that Ross flagged. Now the image defines the
     band's height and the copy column centres against it. Edited in place rather
     than overridden further down the file: a second competing block is how the
     first attempt at this silently did nothing. */
  grid-template-columns: 1fr 400px;
  align-items: stretch;
  /* The band's OWN padding has to go, not just the portrait's height. .page-hero-inner
     carries 80px top and 72px bottom; with those in place the photograph could
     stretch only within the content box, so removing its fixed height simply made
     the band taller and left the same 152px of dead air. Zeroed here and moved
     onto the copy column, so the portrait genuinely reaches the top and bottom
     edges — Ross's "image could append to the navigation bar". */
  padding-top: 0;
  padding-bottom: 0;
}
/* .page-hero sets min-height:520px sitewide; the bio hero opts out so the band
   is sized by its own content. */
.page-hero-bio { min-height: 0; }
.page-hero-bio .page-hero-left { padding: 44px 0; align-self: center; }
/* A DEFINITE height, not auto. With height:auto the 900x1350 portrait dictated
   the band: 400px of column width x 1.5 = 600px, so the hero stayed tall no
   matter what the padding did. Fixed height + object-fit:cover means the image
   crops to the band instead of the band growing to the image. */
/* Square, and start-aligned rather than stretched: a stretched item would be
   sized by the row and the aspect ratio would never bind. 400px column ->
   400x400 -> 0%-67% of the portrait, the same crop as the partner cards and
   the /why-vb-attorneys/ hero. 2026-08-20. */
.page-hero-bio .page-hero-portrait { aspect-ratio: 1 / 1; height: auto; align-self: start; min-height: 0; }
.page-hero-bio .page-hero-portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block;
}
@media (max-width: 768px) {
  .page-hero-bio .page-hero-portrait { aspect-ratio: 1 / 1; height: auto; min-height: 0; }
  .page-hero-bio .page-hero-left { padding: 30px 0 22px; }
}

@media (max-width: 768px) {
  /* Below the collapse the column is 1fr and the portrait stacks; keep the
     shorter crop style.css already uses and re-establish top alignment so the
     copy does not float in the middle of a full-width stack. */
  .page-hero-bio .page-hero-inner { grid-template-columns: 1fr; align-items: start; }
  .page-hero-bio .page-hero-portrait { aspect-ratio: 1 / 1; height: auto; }
}

/* ---------------------------------------------------------------------------
   Contact form, rendered by inc/contact-form.php (3.44.0).

   The form is now native markup, not HubSpot's iframe embed, so it simply
   reuses the design system's own field tokens — .form-group, .form-label-tag,
   .form-control, .form-submit, .form-disclaimer are all already defined above.
   Only the pieces that did not exist before are declared here.

   The previous block in this position mapped HubSpot's .hs-* classes onto those
   tokens. It never applied: the embed rendered in a cross-origin iframe that no
   stylesheet here can reach, which is why the form had to be rebuilt natively.
   --------------------------------------------------------------------------- */

/* Two fields per row on desktop; stacked on mobile, where the row is the whole
   reason the form now fits. */
.vbs-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 600px) { .vbs-form-row { grid-template-columns: 1fr; } }

.vbs-form select.form-control {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23DEC9AA' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.vbs-form select.form-control option { color: #111; }

/* Consent: the two sentences that replaced HubSpot's two paragraphs. 14px is
   the sitewide floor; rgba .82 on navy clears AA. */
.vbs-consent { margin: 4px 0 10px; display: grid; gap: 7px; }
.vbs-consent label { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.vbs-consent input[type="checkbox"] {
  width: 17px; height: 17px; min-width: 17px; margin-top: 2px;
  accent-color: var(--gold); cursor: pointer;
}
.vbs-consent span { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.vbs-consent a { color: var(--gold-lt); text-decoration: underline; }
.vbs-optional { font-style: normal; color: rgba(255,255,255,0.55); }
/* Disclosure under the "Can we text you?" select. Same size and colour as the
   consent sentences it replaced — it IS the consent text, revealed the moment
   "Yes" is chosen so the person sees the terms before submitting. It carries the
   `hidden` attribute until then; do not give this rule a `display`, or `hidden`
   stops working and the terms show on every page load. */
.vbs-sms-note { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.82); margin: 7px 0 0; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.vbs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vbs-form .form-submit { border: none; }
.vbs-form .form-submit[disabled] { opacity: .65; cursor: default; }

.vbs-form-msg { font-size: 14px; line-height: 1.5; margin-top: 10px; text-align: center; }
.vbs-form-msg:empty { display: none; }
.vbs-form-msg.is-ok  { color: rgba(255,255,255,0.8); }
.vbs-form-msg.is-err { color: #FFB4A2; }

.vbs-form-thanks { font-size: 16px; line-height: 1.6; color: var(--white, #fff); }
.vbs-form-thanks a { color: var(--gold-lt); text-decoration: underline; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   ARTICLES — /news-insights/ (3.50.0)
   An article is writing, so the page is a single measured column rather than
   the marketing templates' hero + sidebar. All new class names (.art-*), so
   nothing here can collide with style.css.
   --------------------------------------------------------------------------- */
.art-head { background: var(--cream, #FBF7F2); padding: 44px 0 32px; }
.art-head-inner { max-width: 780px; margin: 0 auto; padding: 0 var(--gutter); }
.art-title {
  font-family: var(--serif); font-weight: 300; line-height: 1.12;
  font-size: clamp(32px, 4.2vw, 52px); color: var(--navy); margin: 18px 0 0;
}
.art-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: 22px; font-size: 15px; color: #4A4640;
}
.art-byline a { color: var(--gold-text); text-decoration: underline; }
.art-date { color: #6B665E; }
/* The location, split out of the author's credential sentence so it can be a
   thing rather than the end of a sentence. */
.art-tag {
  display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold-text);
  border: 1px solid rgba(133,101,57,0.35); padding: 4px 10px; border-radius: 2px;
}
.art-body { padding: 44px 0 0; }

/* Layout. A single centred column at 780px is the right MEASURE for reading —
   roughly 75 characters — and widening it to fill a 1600px monitor would make
   the article harder to read, not easier. What actually filled the empty space
   (Ross, 2026-08-14: "it only takes up a third of my page") is a contents rail
   in the left margin, which uses the width for navigation instead of stretching
   the line length. Below 1200px the rail is hidden and the column simply
   centres, exactly as before. */
.art-layout { display: grid; grid-template-columns: minmax(0, 820px); justify-content: center; }
.art-col { min-width: 0; }
.art-toc { display: none; }
@media (min-width: 1200px) {
  .art-layout {
    grid-template-columns: 250px minmax(0, 820px);
    gap: clamp(40px, 5vw, 90px);
    align-items: start;
  }
  .art-toc { display: block; position: sticky; top: 120px; max-height: calc(100vh - 160px); overflow-y: auto; }
  .art-body-inner { margin: 0; }
  /* Scoped through .art-layout so these beat the base sizes below, which appear
     LATER in the file and would otherwise win on equal specificity. */
  .art-layout .art-body-inner p, .art-layout .art-body-inner li { font-size: 18px; }
}
.art-body-inner { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.art-body-inner p { font-size: 17px; line-height: 1.78; margin: 0 0 20px; }
.art-body-inner h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2.7vw, 34px);
  color: var(--navy); line-height: 1.2; margin: 44px 0 14px;
}
.art-body-inner h3 {
  font-family: var(--sans); font-weight: 700; font-size: 19px; color: var(--navy);
  margin: 32px 0 10px;
}
.art-body-inner ul, .art-body-inner ol { margin: 0 0 22px 22px; }
.art-body-inner li { font-size: 17px; line-height: 1.75; margin-bottom: 9px; }
.art-body-inner blockquote {
  border-left: 3px solid var(--gold); margin: 26px 0; padding: 4px 0 4px 22px;
  font-family: var(--serif); font-size: 20px; line-height: 1.55; color: var(--navy);
}
.art-body-inner a { color: var(--gold-text); text-decoration: underline; }
.art-body-inner img { max-width: 100%; height: auto; }

/* About the author */
.art-author {
  display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: start;
  margin: 56px 0 8px; padding: 30px; background: var(--cream, #FBF7F2);
  border-top: 3px solid var(--gold);
}
.art-author-photo img { width: 100%; height: auto; display: block; }.art-author-eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-text); display: block; margin-bottom: 8px;
}
.art-author-name { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--navy); margin: 0; }
.art-author-name a { color: var(--navy); text-decoration: none; }
.art-author-name a:hover { color: var(--gold-text); }
.art-author-role { font-size: 14px; color: #6B665E; margin: 4px 0 12px; }
.art-author-about { font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.art-author-link { margin: 14px 0 0; font-size: 15px; }
.art-author-link a { color: var(--gold-text); text-decoration: underline; }
@media (max-width: 700px) {
  .art-author { grid-template-columns: 1fr; }
  .art-author-photo { max-width: 160px; }
}

/* Listing cards */
.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 8px; }
@media (max-width: 1024px) { .art-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .art-grid { grid-template-columns: 1fr; } }
.art-card {
  display: block; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid rgba(0,2,45,0.09); transition: border-color .2s, transform .2s;
}
.art-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.art-card-photo img { width: 100%; height: 200px; object-fit: cover; display: block; }
.art-card-body { padding: 22px 22px 24px; }.art-card-date { font-size: 14px; color: #6B665E; letter-spacing: .04em; }
.art-card-title {
  font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25;
  color: var(--navy); margin: 8px 0 10px;
}
.art-card-excerpt { font-size: 15px; line-height: 1.65; color: #4A4640; margin: 0 0 14px; }.art-card-by { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); }
.art-empty { font-size: 17px; line-height: 1.7; }

/* ---------------------------------------------------------------------------
   THE FIRM'S PEOPLE — /attorneys/ (3.53.0)
   Three tiers, and the RANK IS THE LAYOUT: partners get half the page each,
   attorneys a third, support a quarter, with the detail shrinking to match.
   Someone is promoted by moving tier in inc/team.php, never by restyling a card.
   All new .team-* names, so nothing here can collide with style.css.
   --------------------------------------------------------------------------- */
.team-section { padding: 56px 0; }
.team-section--partners { padding-top: 56px; background: var(--n50, #F8F5F1); }
.team-section--support { background: var(--n50, #F8F5F1); }
.team-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }

.team-head { margin-bottom: 38px; }
.team-head--lead { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: end; }
@media (max-width: 900px) { .team-head--lead { grid-template-columns: 1fr; align-items: start; } }
.team-eyebrow { display: block; margin-bottom: 14px; }
.team-h1 {
  font-family: var(--serif); font-weight: 300; line-height: 1.08;
  font-size: clamp(30px, 3.6vw, 52px); color: var(--navy); margin: 0;
}
.team-h2 {
  font-family: var(--serif); font-weight: 300; line-height: 1.1;
  font-size: clamp(26px, 2.8vw, 40px); color: var(--navy); margin: 0;
}
.team-lede { font-size: 17px; line-height: 1.75; color: var(--n700); max-width: 460px; }
.team-intro { font-size: 16px; line-height: 1.7; color: var(--n700); max-width: 620px; margin-top: 12px; }

.team-grid { display: grid; gap: 30px; }
.team-grid--partners { grid-template-columns: repeat(2, 1fr); gap: clamp(30px, 4vw, 56px); }
.team-grid--attorneys { grid-template-columns: repeat(3, 1fr); }
.team-grid--support   { grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) {
  .team-grid--attorneys { grid-template-columns: repeat(2, 1fr); }
  .team-grid--support   { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .team-grid--partners, .team-grid--attorneys { grid-template-columns: 1fr; }
  .team-grid--support { grid-template-columns: repeat(2, 1fr); }
}

.team-card { display: block; background: #fff; color: inherit; text-decoration: none;
  border: 1px solid rgba(0,2,45,0.08); transition: border-color .2s, transform .2s; }
/* One hover rule for every tier again (3.57.0). This was split in 3.54.2 because
   only one of the two founding partners was a link — Vuk had no bio page, so his
   card rendered as a div and Brian's was the only one that lifted, which read as
   a rendering bug. His page now exists, every card in every tier is a link, and
   the special case is gone. */
a.team-card:hover { border-color: var(--gold); transform: translateY(-2px); }
a.team-card:hover .team-link { color: var(--navy); border-bottom-color: var(--navy); }
.team-photo { position: relative; overflow: hidden; background: var(--navy); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
/* Rank, expressed as height. */
.team-card--partners .team-photo { aspect-ratio: 4 / 5; }
.team-card--attorneys .team-photo { aspect-ratio: 1 / 1; }
.team-card--support .team-photo { aspect-ratio: 1 / 1; }

/* Stand-in until a photograph exists, so a confirmed name can go live at once. */
.team-monogram { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--navy) 0%, #0B0E3D 100%); }
.team-monogram img { width: 46%; max-width: 150px; height: auto; opacity: .92; }

.team-body { padding: 26px 26px 30px; }
.team-card--support .team-body { padding: 18px 18px 20px; }
.team-name { font-family: var(--serif); font-weight: 400; color: var(--navy); margin: 0; }
.team-card--partners .team-name { font-size: clamp(24px, 2.2vw, 32px); }
.team-card--attorneys .team-name { font-size: 22px; }
.team-card--support .team-name { font-size: 18px; }.team-role {
  display: block; margin-top: 6px; font-size: 14px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text);
}.team-card--support .team-role { font-size: 14px; letter-spacing: .1em; }
.team-bio { font-size: 16px; line-height: 1.7; color: var(--n700); margin: 16px 0 0; }.team-link {
  display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* Individual bio pages (3.55.0) — one template, every person except the two
   founding partners, who keep bespoke pages. */
/* Same density as Brian's page (3.59.0) — the shared template defines its own
   spacing, so it did not inherit the .bio-page reductions and stayed loose. */
.bio-head { padding: 0; background: var(--n50, #F8F5F1); }
/* Same geometry as .page-hero-bio on Brian's page: full --max-w container, copy
   column first, 400px portrait on the right. Before this the shared template ran
   a narrower 1040px box with the portrait on the LEFT, so the two founding
   partners' pages were mirror images of each other. */
.bio-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 400px; gap: clamp(30px, 5vw, 70px); align-items: stretch; }
@media (max-width: 800px) {
  .bio-inner { grid-template-columns: 1fr; padding-bottom: 28px; }
  /* Portrait first on a phone, as on every other stacked hero. */
  .bio-intro { order: 2; padding: 22px 0 0; }
  .bio-photo { order: 1; max-width: 260px; }   /* the square carries the height */
}
/* Portrait fills the band edge to edge, exactly as on Brian's page — no dead
   air above and below a floating image. */
/* Square, like every other partner portrait on the site — 0%-67%, the tie crop. */
.bio-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--navy); }
.bio-intro { padding: 40px 0; align-self: center; }
.bio-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.bio-photo .team-monogram { position: absolute; inset: 0; }
.bio-name { font-family: var(--serif); font-weight: 300; line-height: 1.08;
  font-size: clamp(32px, 4vw, 52px); color: var(--navy); margin: 16px 0 0; }.bio-role { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-text); margin: 10px 0 0; }
/* The lede under the name, matching .page-hero-intro on Brian's page. */
.bio-lede { font-size: 17px; line-height: 1.7; color: var(--n700); max-width: 560px; margin: 16px 0 0; }
.bio-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.bio-body { padding: 40px 0 0; }
.bio-body-inner { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.bio-body-inner p { font-size: 17px; line-height: 1.78; margin: 0 0 20px; }
.bio-body-inner h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 2.4vw, 30px);
  color: var(--navy); margin: 38px 0 12px; }
.bio-body-inner ul { margin: 0 0 22px 22px; }
.bio-body-inner li { font-size: 17px; line-height: 1.75; margin-bottom: 8px; }
.bio-body-inner blockquote { border-left: 3px solid var(--gold); margin: 26px 0; padding: 4px 0 4px 22px;
  font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--navy); }
.bio-back { margin-top: 36px; font-size: 15px; }
.bio-back a { color: var(--gold-text); text-decoration: underline; }

/* Credential block on the shared bio template. Sits above the prose, matching
   Brian's page; renders nothing at all when a person has no credential fields. */
.bio-creds { padding: 34px 0 0; }
.bio-creds:empty { display: none; }

/* Bio pages with too little to index drop the rail and use the full width, so a
   short bio is not left with an empty 240px gutter. */
.bio-page--no-rail .content-inner { grid-template-columns: minmax(0, 900px); justify-content: center; }
/* Body prose keeps a readable measure inside the wider column; the credential
   grid deliberately does not, so it can run two real columns like Brian's. */
.bio-prose { max-width: 820px; }
/* BIO PROSE = THE SITE'S PROSE. .content-p is the standard body paragraph on 46
   templates — --text-mid, 1.8 line-height, 16px apart, gold underlined links,
   navy <strong>. Bio bodies only set size and line-height, so a paragraph
   written in the editor rendered darker and tighter than the same paragraph on
   every other page, and Brian (template .content-p) did not match Vuk (blocks).
   Matching them here is what let Brian's prose move into the editor without his
   page changing — and it brings bios in line with the rest of the site.
   Ross, 2026-08-18: Brian and Vuk should match in layout and design. */
.bio-prose p, .bio-prose li {
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-mid);
}
.bio-prose p { margin-bottom: 16px; }
.bio-prose p:last-child { margin-bottom: 0; }
.bio-prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 2.4vw, 30px); color: var(--navy); margin: 34px 0 12px; }
/* .bio-prose had a rule for h2 and nothing for h3, so an H3 written in the block
   editor fell through to the browser default — 16px, body colour, no top margin.
   Brian's page escaped it only because its H3s were hand-marked
   class="content-section-h3"; Vuk's, written as ordinary editor headings, did
   not. Ross spotted it on Vuk's Background, 2026-08-25.
   Matching .content-section-h3 exactly, so an H3 looks the same whether it was
   typed in the editor or hand-written in a template — which matters now that the
   bios are meant to be editable. Applies to every team bio, not just these two. */
.bio-prose h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--navy); margin: 28px 0 12px; }
.bio-prose h4 { font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--navy); margin: 24px 0 10px; letter-spacing: .01em; }
.bio-prose blockquote { border-left: 3px solid var(--gold); margin: 26px 0; padding: 4px 0 4px 22px; font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--navy); }
.bio-prose a { color: var(--gold-text); text-decoration: underline; }

/* ===========================================================================
   SHORT VIEWPORTS — "can you tell the page scrolls?"
   Ross, 2026-08-15, on a 13" MacBook: the hero filled the screen and "it is not
   readily apparent... that you can scroll down... The little bit of padding that
   is there makes it seems like that is the end of the screen rather than showing
   a little bit of content."

   Two separate causes, both fixed here:
     1. the hero was taller than the fold (or nearly), and
     2. what did peek below it was pure section PADDING, not content.

   This block lives at the END of the stylesheet on purpose. It has to beat
   .sa-section, .section and the hero variants, all declared later than the
   spacing rules — an override placed earlier loses on source order at equal
   specificity, which cost three deploys today alone. This is an override LAYER,
   which is different from duplicating a single declaration: edit those in place.
   =========================================================================== */
@media (max-height: 850px) {
  .page-hero { min-height: 0; }
  .page-hero-inner { padding-top: 34px; padding-bottom: 30px; }
  .page-hero h1 { font-size: clamp(28px, 3.2vw, 42px); }
  .page-hero-intro { font-size: 16px; line-height: 1.6; }
  .page-hero-actions { margin-top: 22px; }

  /* On /practice-areas/ the hero's jump-nav card — not the copy — is what sets
     the hero's height: eight rows at 39px each. Tighter rows, same 14px type
     (the sitewide floor), buys back ~64px and lets the first practice card
     break the fold. */
  .page-hero-card { padding-top: 20px; padding-bottom: 20px; }
  .page-hero-nav a { padding-top: 7px; padding-bottom: 7px; }

  /* The band under the hero starts its content almost immediately, so the thing
     peeking above the fold is a heading — not 68px of empty padding. */
  .page-hero + .section,
  .page-hero + .sa-section,
  .page-hero + .content-area { padding-top: 26px; }

  /* Bios follow the same rule. */
  .page-hero-bio .page-hero-left { padding: 28px 0; }
  .page-hero-bio .page-hero-portrait { aspect-ratio: 1 / 1; height: auto; }
  /* .bio-photo needs no height here: its aspect ratio holds at every width. */
  .bio-intro { padding: 26px 0; }
  .bio-head + .content-area { padding-top: 26px; }
}

/* ── Partner bio results: four cards, then an expander ──────────────────────
   Ross, 2026-08-24: "keep it to 4 visible on each partner's page, with a
   'see more' carat ... Limiting to four gives enough weight and allowing
   visitors to see more shows they have significantly more experience."

   OPT-IN, exactly like .fade/.js-fade above. Every card is in the markup and
   stays visible if page-templates.js never runs, so a reader without
   JavaScript loses nothing and a crawler that does not execute scripts still
   sees the full list. .js-results-collapse is added by the script only after
   it has found a grid with more than four cards.

   Scoped to .bio-prose. Hub and spoke result grids render through
   vbs_cr_grid() elsewhere on the site and are deliberately untouched. */
.js-results-collapse .bio-prose .results-grid:not(.is-open) > .result-card:nth-child(n+5) {
  display: none;
}
.results-more { margin: 0 0 18px; }
.results-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  padding: 12px 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
  transition: color 0.2s;
}
.results-more-btn:hover { color: var(--gold-text); }
.results-more-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
/* Chevron drawn from two borders so there is no asset to load and it inherits
   the button's colour on hover. Rotates to point up when the list is open. */
.results-more-caret {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.results-more-btn[aria-expanded="true"] .results-more-caret {
  transform: translateY(2px) rotate(-135deg);
}
@media (prefers-reduced-motion: reduce) {
  .results-more-btn, .results-more-caret { transition: none; }
}

/* ==========================================================================
   .result-card-all — the "view all" tile (3.166.0)
   The fourth slot of a three-result section. See inc/related-results.php for
   the rule that inserts it. It is inverted to navy on purpose: an off-white
   fourth tile would read as a result the visitor cannot make out, while a navy
   one reads as a deliberate end-cap to the row. Gold on navy, not the
   --gold-text used on cream, because the contrast direction is reversed here.
   ========================================================================== */
.result-card-all {
  background: var(--navy);
  text-decoration: none;
  justify-content: center;
}
.result-card-all:hover {
  background: var(--navy);
  box-shadow: 0 4px 20px rgba(0,2,45,0.18);
}
.result-card-all .result-card-amount { color: #fff; }
.result-card-all .result-card-label  { color: var(--gold); }
.result-card-all .result-card-desc   { color: rgba(255,255,255,0.82); }
.result-card-all .result-card-link   { color: #fff; }
.result-card-all:hover .result-card-link { color: var(--gold); }