/*
Theme Name: LPB Authority
Theme URI: https://lpblawgroup.com/
Author: LPB Law Group
Description: Editorial authority theme for lpblawgroup.com. Broadsheet-masthead design system derived from the logo's own device — high-contrast display serif over a heavy orange rule. Answer-first, no JS, no third-party requests, no icon library.
Version: 1.6.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: lpb-authority
*/

/* ==========================================================================
   DESIGN NOTE — the organising idea
   --------------------------------------------------------------------------
   The logo is "LPB" in a high-contrast serif sitting on a heavy, full-width
   orange rule. That pairing IS the brand's graphic device, so it becomes the
   structural system of the site:

     · display serif + heavy rule   = the masthead / hero
     · the rule at reducing weights = section hierarchy (6px / 3px / 1px)
     · orange = rule, marker, numeral, link — and the single CTA fill

   The supplied mark is orange over WHITE type ("LPB" orange, "Law Group"
   white), so it only resolves on a dark ground. That is why the masthead and
   the homepage hero are a full-bleed ink band, closed by the heavy orange
   rule, with the paper editorial column below it.

   Everything else is white space, measure, and figures. There are no photos,
   no cards, no icons, and no gradients anywhere in this system.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Brand */
  --brand-orange: #F15A24;
  --orange-dark:  #C2461A;

  /* Ink */
  --ink:        #000000;
  --ink-body:   #1A1A1A;
  --ink-muted:  #5A5A5A;

  /* Surface */
  --paper:       #FFFFFF;
  --wash:        #FAF8F6;
  --rule:        #E4E4E4;
  --rule-strong: #C9C9C9;

  /* Reversed-out (on --ink) */
  --paper-muted: #B4B4B4;   /* 9.7:1 on ink */
  --rule-inverse: #333333;

  /* Semantic */
  --caution: #8A5A00;

  /* Type */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:  "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid scale — clamp(), so there is no per-size media query anywhere. */
  --fs-display: clamp(2.75rem, 8vw, 5rem);
  --fs-h1:      clamp(2rem, 5.5vw, 3.25rem);
  --fs-h2:      clamp(1.5rem, 3.4vw, 2.125rem);
  --fs-h3:      clamp(1.25rem, 2.2vw, 1.5rem);
  --fs-lede:    clamp(1.1875rem, 1.9vw, 1.4375rem);
  --fs-body:    1.125rem;          /* hard floor — never shrinks */
  --fs-small:   0.9375rem;
  --fs-meta:    0.875rem;
  --fs-eyebrow: 0.6875rem;

  /* Numerals used as display objects (01, 51%, 2) */
  --fs-numeral: clamp(2.5rem, 6vw, 4rem);

  /* Spacing — 4px base */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  /* The rule system — the logo device at three weights */
  --rule-heavy: 6px;
  --rule-mid:   3px;
  --rule-hair:  1px;

  /* Layout
     --measure      = READING measure. Applies to running prose only.
     --measure-page = the PAGE container. The page is wide; the paragraph is not.
     Putting the whole page at --measure is what made the first build look
     like a column of text floating in a white field. */
  --measure:      68ch;
  --measure-wide: 54rem;
  --measure-page: 76rem;
  --pad-inline:   clamp(16px, 5vw, 64px);
}

/* ==========================================================================
   2. FONTS — self-hosted variable, weight axis only. 78KB total.
   ========================================================================== */

@font-face {
  font-family: "Source Serif 4";
  src: url("assets/fonts/SourceSerif4Variable.woff2") format("woff2-variations"),
       url("assets/fonts/SourceSerif4Variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/PublicSansVariable.woff2") format("woff2-variations"),
       url("assets/fonts/PublicSansVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   3. RESET + RESPONSIVE FOUNDATION (mobile-first)
   Breakpoints, used with min-width only: 640 / 768 / 1024 / 1280.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* One container. Every section uses it. */
.wrap {
  width: 100%;
  max-width: var(--measure-page);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
.wrap--wide   { max-width: var(--measure-wide); }
.wrap--narrow { max-width: var(--measure); }   /* prose-led pages */
.wrap--full   { max-width: none; }

/* Running prose keeps the reading measure wherever it sits. */
.prose { max-width: var(--measure); }

/* The editorial two-column: section heading in the left rail, content right.
   Collapses to one column below 1024px. This is what fills the screen. */
.section-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }

@media (min-width: 1024px) {
  .section-grid {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
  .section-grid > .section-head { margin-bottom: 0; position: sticky; top: var(--sp-5); }
}

.section  { margin-block: var(--sp-9); }
.section--tight { margin-block: var(--sp-7); }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--fs-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2); line-height: 1.2; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
h4 { font-size: 1.125rem; line-height: 1.35; }

p, ul, ol, dl, blockquote, figure, table { margin-bottom: var(--sp-5); }
p { orphans: 2; widows: 2; }

ul, ol { padding-left: var(--sp-5); }
li { margin-bottom: var(--sp-2); }
strong, b { font-weight: 600; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.lede {
  font-family: var(--font-serif);
  font-size: var(--fs-lede);
  line-height: 1.5;
  font-weight: 400;
  text-wrap: pretty;
}

a {
  color: var(--orange-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
  transition: color 120ms ease, background-color 120ms ease;
}
a:hover { color: var(--ink); }

/* ==========================================================================
   5. THE RULE SYSTEM — the logo device, three weights
   ========================================================================== */

.rule-heavy {
  height: var(--rule-heavy);
  background: var(--brand-orange);
  border: 0;
  margin: 0;
}
.rule-mid {
  height: var(--rule-mid);
  background: var(--ink);
  border: 0;
  margin: 0;
}
.rule-hair {
  height: var(--rule-hair);
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* A section heading sitting on its own hairline, with a numeral in the gutter */
.section-head {
  margin-bottom: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: var(--rule-mid) solid var(--ink);
}
.section-head .eyebrow { display: block; margin-bottom: var(--sp-3); }
.section-head h2 { margin: 0; }

/* ==========================================================================
   6. MASTHEAD (site header) — reversed out on ink.

   The supplied mark is orange on a black ground, so the masthead is ink
   sitewide. On the homepage the ink continues into the hero band, making the
   two read as one unit. Orange on ink measures 6.23:1; white on ink, 21:1.
   ========================================================================== */

.site-header { background: var(--ink); color: var(--paper); }

.site-header__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-block: var(--sp-5) var(--sp-3);
}

.brand { text-decoration: none; display: block; flex: none; }
.brand:hover { color: inherit; }
.brand__logo { width: clamp(150px, 26vw, 210px); height: auto; }
.brand__name {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--paper);
  margin-top: var(--sp-1);
}

.site-nav ul {
  display: flex;
  gap: clamp(var(--sp-4), 3vw, var(--sp-6));
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.site-nav li { margin: 0; }
.site-nav a {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--paper);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover,
.site-nav .current-menu-item > a {
  border-bottom-color: var(--brand-orange);
  color: var(--brand-orange);
}

/* The masthead rule — the logo's own device, full-bleed */
.masthead-rule {
  height: var(--rule-heavy);
  background: var(--brand-orange);
}

/* ==========================================================================
   7. HERO — the broadsheet front page
   ========================================================================== */

.hero {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(var(--sp-6), 5vw, var(--sp-8)) 0;
  border-bottom: var(--rule-heavy) solid var(--brand-orange);
}

/* Two columns from 1024px: the argument on the left, the people on the right. */
.hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(var(--sp-6), 5vw, var(--sp-8)); }

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    gap: var(--sp-9);
    align-items: start;
  }
}

/* Attorney portraits — named, with admissions. Never decorative:
   every portrait carries the licence line beneath it (ATTORNEYS.md rule 1). */
.hero__people { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }

@media (min-width: 1024px) {
  .hero__people { grid-template-columns: 1fr; gap: var(--sp-6); }
}

.portrait { margin: 0; }
.portrait img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 22%;
  border-bottom: var(--rule-mid) solid var(--brand-orange);
  background: var(--rule-inverse);
}
.portrait figcaption { padding-top: var(--sp-3); }
.portrait__name {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--paper);
  line-height: 1.25;
}
.portrait__admissions {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--paper-muted);
}
.portrait__role {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-meta);
  line-height: 1.35;
  color: var(--brand-orange);
}

.hero__dateline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  padding-bottom: var(--sp-4);
  margin-bottom: clamp(var(--sp-5), 4vw, var(--sp-6));
  border-bottom: var(--rule-hair) solid var(--rule-inverse);
}
.hero__dateline .eyebrow { color: var(--brand-orange); }
.hero__dateline .sep { color: var(--rule-inverse); }

.hero__question {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--paper);
  text-wrap: balance;
  margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-6));
}

/* The device: heavy orange rule directly under the display type. */
.hero__rule {
  height: var(--rule-mid);
  background: var(--brand-orange);
  width: min(100%, 22ch);
  margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-6));
}

.hero__answer {
  font-family: var(--font-serif);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--paper);
  text-wrap: pretty;
  max-width: 60ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  margin-top: clamp(var(--sp-5), 3vw, var(--sp-6));
}
.hero__reassure {
  font-size: var(--fs-small);
  color: var(--paper-muted);
  margin: 0;
}

/* Statutory figures, carried inside the band as its closing strip */
.hero__figures {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(var(--sp-6), 4vw, var(--sp-8));
  border-top: var(--rule-hair) solid var(--rule-inverse);
}
.hero__figures .keyfigure {
  padding: var(--sp-5) 0;
  border-bottom: var(--rule-hair) solid var(--rule-inverse);
}
.hero__figures .keyfigure:last-child { border-bottom: 0; }
.hero__figures .keyfigure__label { color: var(--paper); }
.hero__figures .keyfigure__note  { color: var(--paper-muted); }
.hero__figures .keyfigure__cite  { color: var(--paper-muted); }

@media (min-width: 768px) {
  .hero__figures {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--sp-6);
  }
  .hero__figures .keyfigure { border-bottom: 0; padding-bottom: var(--sp-7); }
}

/* Byline — the review stamp, set like a newspaper credit line */
.byline {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: var(--rule-hair) solid var(--rule);
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 62ch;
}
.byline a { color: var(--ink-muted); }
.byline a:hover { color: var(--ink); }
.byline__pending { color: var(--caution); font-weight: 600; }

/* Inside the ink band the byline reverses out too. */
.hero .byline { border-top-color: var(--rule-inverse); color: var(--paper-muted); }
.hero .byline a { color: var(--paper-muted); }
.hero .byline a:hover { color: var(--brand-orange); }
.hero .byline__pending { color: var(--brand-orange); }

/* On ink, the CTA fills brand orange with INK text: 6.23:1.
   (White on brand orange would be 3.37:1 and fail.) */
.btn--onink { background: var(--brand-orange); color: var(--ink); }
.btn--onink:hover { background: var(--paper); color: var(--ink); }
.btn--onink-ghost { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn--onink-ghost:hover { background: var(--paper); color: var(--ink); }

/* The cta-block rule spans the grid, not just the heading rail. */
.cta-block .section-head { border-top: 0; padding-top: 0; }

/* --- Hero trust row — verifiable credentials, not badges ---------------- */
.trustrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--rule-hair) solid var(--rule-inverse);
  font-size: var(--fs-meta);
  color: var(--paper-muted);
}
.trustrow strong { color: var(--paper); font-weight: 600; }
.trustrow a { color: var(--paper-muted); text-decoration-color: var(--rule-inverse); }
.trustrow a:hover { color: var(--brand-orange); }
.trustrow .sep { color: var(--rule-inverse); }

/* --- Problem awareness -------------------------------------------------- */
.problems { list-style: none; padding: 0; margin: 0; }
.problems > li {
  padding-block: var(--sp-5);
  border-top: var(--rule-hair) solid var(--rule);
  margin: 0;
}
.problems > li:first-child { border-top: var(--rule-mid) solid var(--ink); }
.problems h3 {
  margin: 0 0 var(--sp-2);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-muted);
}
.problems p { margin: 0; max-width: 62ch; }
.problems b { color: var(--ink); }

/* --- Credential verification block -------------------------------------- */
.creds {
  border-top: var(--rule-mid) solid var(--ink);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.cred {
  padding-block: var(--sp-5);
  border-bottom: var(--rule-hair) solid var(--rule);
}
.cred__label {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--sp-2);
}
.cred__value {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
.cred p { margin: 0; font-size: var(--fs-small); color: var(--ink-muted); max-width: 60ch; }

/* ==========================================================================
   8. ANSWER BOX — on interior pages (pillars, spokes)
   ========================================================================== */

.answer-box {
  border-left: var(--rule-heavy) solid var(--brand-orange);
  background: var(--wash);
  padding: var(--sp-5) clamp(var(--sp-4), 4vw, var(--sp-6));
  margin-bottom: var(--sp-8);
}
.answer-box > h1, .answer-box > h2 { margin: 0 0 var(--sp-4); }
.answer-box__answer {
  font-family: var(--font-serif);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-body);
  text-wrap: pretty;
  margin: 0;
}
.answer-box .byline { border-top-color: var(--rule-strong); }

/* ==========================================================================
   9. KEY FIGURES — statutory facts as display objects.
   Static. Not counters, not animated, not results claims.
   ========================================================================== */

.keyfigures {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--rule-mid) solid var(--ink);
}
.keyfigure {
  padding: var(--sp-5) 0;
  border-bottom: var(--rule-hair) solid var(--rule);
}
.keyfigure__value {
  font-family: var(--font-serif);
  font-size: var(--fs-numeral);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--brand-orange);
  display: block;
  margin-bottom: var(--sp-3);
}
.keyfigure__label {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: var(--sp-2);
}
.keyfigure__note {
  font-size: var(--fs-small);
  color: var(--ink-muted);
  margin: 0;
}
.keyfigure__cite {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .keyfigures { grid-template-columns: repeat(3, 1fr); gap: 0 var(--sp-6); }
  .keyfigure  { border-bottom: 0; }
}

/* ==========================================================================
   10. SEQUENCE — the numbered "what decides it" list.
   Real <ol>, designed. Not cards, not icons.
   ========================================================================== */

.sequence { list-style: none; padding: 0; margin: 0; counter-reset: seq; }

.sequence > li {
  counter-increment: seq;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
  padding-block: var(--sp-5);
  border-top: var(--rule-hair) solid var(--rule);
  margin: 0;
}
.sequence > li:first-child { border-top: var(--rule-mid) solid var(--ink); }

.sequence > li::before {
  content: "0" counter(seq);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brand-orange);
  line-height: 1.25;
}
.sequence h3 { margin: 0 0 var(--sp-2); grid-column: 2; }
.sequence p  { margin: 0; grid-column: 2; color: var(--ink-body); }

/* ==========================================================================
   11. FIGURES — built from HTML + CSS, never images.
   Real text: selectable, translatable, extractable by an LLM, and legible at
   320px without a second asset. STYLE-GUIDE.md §3a.
   ========================================================================== */

.figure {
  margin-block: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: var(--rule-mid) solid var(--ink);
}
.figure__caption {
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  margin-bottom: var(--sp-5);
  max-width: 60ch;
}
.figure__caption b { color: var(--ink); font-weight: 600; }

/* --- Figure: the 51% comparative-fault bar ------------------------------ */
.faultbar { margin-bottom: var(--sp-4); }
.faultbar__track {
  display: flex;
  height: clamp(48px, 9vw, 64px);
  border: var(--rule-hair) solid var(--rule-strong);
}
.faultbar__zone {
  display: flex;
  align-items: center;
  padding-inline: var(--sp-3);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 1.2;
}
.faultbar__zone--ok {
  flex: 0 0 51%;
  background: var(--wash);
  color: var(--ink);
  border-right: var(--rule-heavy) solid var(--brand-orange);
}
.faultbar__zone--barred {
  flex: 1;
  background: var(--ink);
  color: var(--paper);
}
.faultbar__scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-2);
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Figure: the two-year timeline -------------------------------------- */
.timeline { border-top: var(--rule-hair) solid var(--rule-strong); }
.timeline__stop {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: var(--rule-hair) solid var(--rule);
}
.timeline__marker {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-small);
  /* --orange-dark, not --brand-orange: this is 15px text on white.
     Bright orange measures 3.37:1 there and fails AA. STYLE-GUIDE.md §1. */
  color: var(--orange-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 7ch;
}
.timeline__what { margin: 0; }
.timeline__what b { display: block; font-family: var(--font-serif); font-size: var(--fs-h3); }
.timeline__what span { font-size: var(--fs-small); color: var(--ink-muted); }

/* ==========================================================================
   12. TABLES
   ========================================================================== */

.table-scroll { overflow-x: auto; margin-bottom: var(--sp-5); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  padding-bottom: var(--sp-3);
}
th {
  text-align: left;
  font-weight: 600;
  border-bottom: var(--rule-mid) solid var(--ink);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  vertical-align: bottom;
}
td {
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  border-bottom: var(--rule-hair) solid var(--rule);
  vertical-align: top;
}
tbody th { font-family: var(--font-serif); font-size: var(--fs-body); border-bottom: var(--rule-hair) solid var(--rule); }

/* ==========================================================================
   13. BUTTONS — primary fills --orange-dark (5.02:1).
   NEVER white text on --brand-orange (3.37:1, fails AA).
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn--primary { background: var(--orange-dark); color: var(--paper); }
.btn--primary:hover { background: var(--ink); color: var(--paper); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--wash); }

/* ==========================================================================
   14. LINK LIST — the pillar index. Editorial, not a card grid.
   ========================================================================== */

.link-list { list-style: none; padding: 0; margin: 0; border-top: var(--rule-mid) solid var(--ink); }
.link-list > li {
  margin: 0;
  border-bottom: var(--rule-hair) solid var(--rule);
  transition: background-color 120ms ease;
}
.link-list > li:hover { background: var(--wash); }
.link-list a {
  display: block;
  padding: var(--sp-5) 0 var(--sp-2);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.link-list a:hover { color: var(--orange-dark); }
.link-list p {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-small);
  color: var(--ink-muted);
  max-width: 62ch;
}

@media (min-width: 768px) {
  .link-list > li { display: grid; grid-template-columns: minmax(0, 22ch) 1fr; gap: var(--sp-6); align-items: baseline; }
  .link-list a { padding-bottom: var(--sp-5); }
}

/* ==========================================================================
   15. PULL QUOTE
   ========================================================================== */

.pullquote {
  margin-block: var(--sp-7);
  padding-left: clamp(var(--sp-4), 4vw, var(--sp-6));
  border-left: var(--rule-heavy) solid var(--brand-orange);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.35;
  font-weight: 400;
  color: var(--ink);
  text-wrap: pretty;
}

/* ==========================================================================
   16. ATTORNEY
   ========================================================================== */

.attorney {
  padding-block: var(--sp-5);
  border-top: var(--rule-hair) solid var(--rule);
}
.attorney:first-of-type { border-top: var(--rule-mid) solid var(--ink); }
.attorney__name {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--sp-1);
}
.attorney__admissions {
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  margin-bottom: var(--sp-3);
}
.attorney p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  .attorney { display: grid; grid-template-columns: minmax(0, 24ch) 1fr; gap: var(--sp-6); }
  .attorney__head { grid-column: 1; }
  .attorney__body { grid-column: 2; }
  .attorney__name, .attorney__admissions { margin-bottom: var(--sp-2); }
}

/* ==========================================================================
   17. CTA BLOCK
   ========================================================================== */

.cta-block {
  border-top: var(--rule-heavy) solid var(--brand-orange);
  padding-top: var(--sp-6);
}
.cta-block h2 { margin-bottom: var(--sp-4); }
.cta-block p { max-width: 62ch; }

/* ==========================================================================
   18. SOURCES
   ========================================================================== */

.sources {
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: var(--rule-mid) solid var(--ink);
  font-size: var(--fs-meta);
}
.sources h2 { font-size: var(--fs-h3); margin: 0 0 var(--sp-4); }
.sources ol { padding-left: var(--sp-5); }
.sources li { margin-bottom: var(--sp-3); color: var(--ink-muted); }
.sources cite { font-style: normal; color: var(--ink); }

.ext {
  width: 12px; height: 12px;
  display: inline-block;
  margin-left: 0.25em;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

/* ==========================================================================
   19. STICKY CTA — one slim bar, mobile only
   ========================================================================== */

.sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--pad-inline);
  background: var(--paper);
  border-top: var(--rule-mid) solid var(--brand-orange);
  min-height: 56px;
}
.sticky-cta .btn { flex: 1; font-size: var(--fs-small); padding-inline: var(--sp-4); min-height: 44px; }
.sticky-cta__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  min-height: 44px;
  padding-inline: var(--sp-2);
}

@media (max-width: 767.98px) {
  .sticky-cta { display: flex; }
  body.has-sticky-cta { padding-bottom: 72px; }
}

/* ==========================================================================
   20. ICONS — 6 functional glyphs, hard-capped at 24px
   ========================================================================== */

.icon {
  width: 1.125em; height: 1.125em;
  max-width: 24px; max-height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex: none;
  vertical-align: -0.15em;
  display: inline-block;
}

/* ==========================================================================
   21. FOOTER
   ========================================================================== */

.site-footer {
  margin-top: var(--sp-10);
  border-top: var(--rule-heavy) solid var(--brand-orange);
  background: var(--wash);
  padding-block: var(--sp-8);
  font-size: var(--fs-meta);
  color: var(--ink-muted);
}
.site-footer h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
}
.site-footer a { color: var(--ink-body); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.site-footer a:hover { color: var(--ink); border-bottom-color: var(--brand-orange); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--sp-3); }

.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  margin-bottom: var(--sp-8);
}
@media (min-width: 640px)  { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }

.disclosure {
  border-top: var(--rule-hair) solid var(--rule-strong);
  padding-top: var(--sp-5);
  max-width: 78ch;
}
.disclosure p { margin-bottom: var(--sp-3); }
.disclosure p:last-child { margin-bottom: 0; }

/* ==========================================================================
   22. MOTION — CSS-only. No JS, no animation library.

   ⚠️ THE SCROLL REVEAL WAS REMOVED 2026-07-28, DO NOT REINSTATE IT.

   It was specified as `animation: lpb-fade-in linear both` on a `view()`
   timeline, on the belief that content stayed visible until the scroll range
   was entered. That is wrong: `animation-fill-mode: both` applies the FROM
   state before the range begins, so every section below the fold computed to
   `opacity: 0` and stayed there — verified live at 1440px, five sections
   invisible. Any renderer that does not advance a scroll timeline (print,
   screenshot and preview tools, some crawler render paths) saw a blank page.

   That is the exact risk MOTION-PROFILE.md forbids: motion must never sit
   between an extractor and the answer. The `.lpb-reveal` class is retained in
   the markup as a hook but is deliberately inert. If motion is ever wanted
   here, it must be provably additive — an element must never be able to end
   up at opacity 0 because an animation failed to run.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

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

/* ==========================================================================
   23. ACCESSIBILITY
   ========================================================================== */

:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); color: var(--paper); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   24. WP CORE + PRINT
   ========================================================================== */

.alignleft  { float: left;  margin: 0 var(--sp-5) var(--sp-4) 0; }
.alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-5); }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, figcaption { font-size: var(--fs-meta); color: var(--ink-muted); margin-top: var(--sp-2); }

@media print {
  .site-nav, .sticky-cta, .skip-link, .cta-block, .masthead-rule { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .hero__rule, .rule-heavy { background: #000 !important; height: 3px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* ==========================================================================
   25. CASE-REVIEW FORM  — custom theme form, no form plugin.
   JS loads only on the intake page; every other page stays JS-free.
   ========================================================================== */

.intake-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); }

@media (min-width: 1024px) {
  .intake-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--sp-9);
    align-items: start;
  }
}

.case-form {
  border-top: var(--rule-heavy) solid var(--brand-orange);
  padding-top: var(--sp-5);
}

.case-form__progress {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.case-form__progress span {
  height: 3px;
  width: 40px;
  background: var(--rule);
  display: block;
}
.case-form__progress span.is-active { background: var(--brand-orange); }
.case-form__steplabel {
  font-style: normal;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-left: var(--sp-2);
}

.case-form label {
  display: block;
  margin-bottom: var(--sp-5);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.case-form .opt {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--ink-muted);
  margin-left: var(--sp-2);
}

.case-form input[type="text"],
.case-form input[type="tel"],
.case-form input[type="email"],
.case-form input[type="date"],
.case-form select,
.case-form textarea {
  display: block;
  width: 100%;
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  min-height: 48px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--ink-body);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  transition: border-color 120ms ease;
}
.case-form textarea { min-height: 96px; resize: vertical; }
.case-form input:hover, .case-form select:hover, .case-form textarea:hover { border-color: var(--ink-muted); }
.case-form input:focus-visible, .case-form select:focus-visible, .case-form textarea:focus-visible {
  border-color: var(--ink);
  outline: 2px solid var(--brand-orange);
  outline-offset: 1px;
}

.case-form__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-body);
  background: var(--wash);
  padding: var(--sp-4);
  border-left: var(--rule-mid) solid var(--rule-strong);
}
.case-form__consent input[type="checkbox"] {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--orange-dark);
  flex: none;
}

.case-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-6);
}
.btn--block { width: 100%; }

.case-form__fineprint,
.case-form__noscript {
  font-size: var(--fs-meta);
  color: var(--ink-muted);
  margin-top: var(--sp-4);
  margin-bottom: 0;
}

.case-form__status { margin-top: var(--sp-4); font-size: var(--fs-small); }
.case-form__status.is-error { color: #B32D2E; font-weight: 600; }
.case-form__status.is-ok    { color: var(--ink-muted); }

.case-form__thanks {
  border-left: var(--rule-heavy) solid var(--brand-orange);
  background: var(--wash);
  padding: var(--sp-6);
}
.case-form__thanks h3 { margin: 0 0 var(--sp-3); }
.case-form__thanks p  { margin: 0; }

/* Honeypot — off-screen, never focusable, never announced. */
.lpb-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}