/* site.css — nemolegal.com v3 "NLF Brand" design system (reskin stage 1).

   Source of truth: docs/PRD-reskin-direction-a.md §5 for the token table,
   mockups/direction-a/direction-a.html for the component look, spacing, radii,
   shadows and clamp() type scale. The mockup's class names differ from the
   site's; this file maps the mockup's LOOK onto the class names templates/
   actually emit. Every selector any file in templates/ references is styled
   here.

   Desktop-first: base rules are the 1200px composition, max-width queries step
   down at 1020 / 900 / 400. The 900px step is load-bearing — nav.main hides and
   .mbar takes over there (D14).

   --nlf-r, --nlf-line, --nlf-ink, --nlf-muted, --nlf-prose, --nlf-copper, --nlf-copper-dk and --nlf-sage are
   also read by the scoped <style> blocks inside partials/finder.html,
   partials/lead_form_vl.html and templates/admin_leads.html. Renaming one
   silently unstyles those partials.

   No @import, no CDN, no third-party host, no data: URI. Fonts are the
   self-hosted woff2 files in ../fonts (SPEC §6). */

/* ---------------------------------------------------------------- fonts -- */
/* Variable latin subsets: one file per family/style covers every weight the
   design uses, so a page pulls 3 files instead of 8. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url(../fonts/inter-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url(../fonts/lora-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 500;
  font-display: optional;
  src: url(../fonts/lora-var-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* METRIC-MATCHED LOCAL FALLBACKS (QC S5-F1: mobile CLS 0.309, every bit of it
   the font swap). The three faces above now load with font-display:optional
   (Patrick's ruling 2026-08-03, sign-off Decision B): a cold-cache first view
   renders the fallbacks below and NEVER swaps, so shift is structurally zero;
   warm caches get the real faces at first paint. The fallbacks stay metric-
   matched anyway — they are what optional shows, and they must hold the same
   layout. History of the swap-era defect this solved: with font-display:swap,
   the first paint used a system font and the swap re-metriced the page. Measured
   cause on the homepage: `.topline`'s two spans fit on ONE line in the swap-out
   font and need TWO with real Inter, so the swap pushed EVERYTHING below the
   header down 29.6px in one shift.

   The cure is a fallback @font-face that renders a LOCAL font at Lora's/Inter's
   metrics: size-adjust scales the advance widths so lines wrap identically,
   and the ascent/descent/line-gap overrides give the line box the web font's
   own height. Percentages follow the standard relation
       override% = webfontMetric / unitsPerEm / size-adjust
   (the overrides are themselves scaled by size-adjust), from the real font
   files' head/hhea (Lora upm 1000, asc 1006, desc 274, gap 0; Inter upm 2048,
   asc 1984, desc 494, gap 0) and @capsizecss/metrics' latin xWidthAvg for the
   local faces (Lora 468/1000; Georgia 913/2048; Times New Roman + its
   metric-compatible clones Tinos / Liberation Serif / Nimbus Roman 832/2048;
   Inter 978/2048; Arial + Arimo / Liberation Sans / Helvetica 913/2048).

   WHY TWO SERIF FALLBACKS: Georgia and Times are ~13% apart in width, so one
   size-adjust cannot serve both. Georgia exists on Windows and macOS; on Linux
   (including every headless Chrome that scores this site — Lighthouse, PSI,
   our own QC) it does not, and `local('Georgia')` does NOT resolve there, so a
   Georgia-only face would be inert exactly where the budget is measured. The
   second face catches the Times-metric clones that Linux actually has. Whichever
   one resolves first wins and the rest of the stack never runs. Sans needs only
   one face because Arial, Arimo, Liberation Sans and Helvetica share Arial's
   metrics exactly.

   ITALIC FACES ARE REQUIRED, and their absence was QC S5-F5. Lora italic
   carries the same ascent/descent as its roman, so a synthetic oblique already
   has the right line box and the first cut of this block shipped roman-only.
   Widths are the problem: Lora italic is 2.8% NARROWER than Lora roman, while
   Times italic is 0.5% WIDER than Times roman, so a synthetic oblique — which
   keeps the roman's advance widths — rendered the hero headline's italic run
   about 4% too wide. That is not academic; the headline is half italic, and it
   pushed the h1 to six lines at 1440 where real Lora takes five. Declaring the
   italic faces separates the two knobs: roman and italic now carry their own
   size-adjust, and the 1440-vs-390 conflict that no single roman value could
   resolve disappears.

   If `local('Georgia Italic')` does not resolve on some platform, italic text
   falls through to the NEXT family — 'Lora-fallback-times' — whose italic face
   is metric-matched to Times italic, which is present anywhere Georgia is. The
   chain degrades to a correct answer rather than an unadjusted one.

   Tuned by measurement, not by faith — every size-adjust here was swept against
   the real homepage with the woff2 files blocked vs served, at 320/360/390/412/
   768/1440, scoring the hero h1's line count and box height plus twelve page
   landmarks.

   SANS 108.3%: the topline flips to two lines somewhere under 107.5% and other
   blocks flip over ~109.2%, so this is the middle of the band that holds at both
   390 and 412, rather than the textbook 107.64% that sits on its lower edge.

   SERIF 118.0% roman / 112.63% italic: the h1 wraps identically to real Lora at
   all six widths for roman in [117.3%, 121.5%]; below that 390 loses a line
   (S5-F5), above it 1440 gains one. 118.0% sits 0.7% clear of the lower edge
   and inside the sub-band [117.4%, 118.2%] that also minimises total landmark
   drift. The italic value is measured directly off the headline's own italic
   run (Lora italic 1753px vs Liberation Serif italic 1556.36px at 100px).

   Both Georgia faces are the capsize-predicted ratio times the SAME content
   correction the measurable faces needed (roman x1.0243, italic x1.0105). That
   excess over the frequency-weighted average is a property of this page's text,
   not of the local font, so it carries to the platforms this machine cannot
   measure. Georgia is absent here, so those two faces are computed, not swept —
   the only numbers in this block that are.

   Result at the 412x823 budget viewport: every landmark from .topline down to
   section.pillars is pixel-identical between the two paints; instrumented
   layout-shift totals under 1.6Mbps/150ms are ~0.001 at both 390 and 412
   (Lighthouse mobile CLS 0.001, down from 0.309). Residual below-the-fold wrap
   differences remain in .faq, .finder and the closing band, where individual
   serif blocks flip a line in opposite directions; no single size-adjust fixes
   all of them and none are in the viewport when CLS is scored.

   NOTE for anyone retuning: ascent-override cannot absorb a wrap difference
   here. line-height on h1/h2/h3 is the unitless 1.15, so the line box is
   font-size x 1.15 regardless of font metrics, and every height delta in this
   design is an integer number of lines. size-adjust is the only lever.

   KNOWN RESIDUAL, measured and provably not fixable from these numbers: the
   three woff2 files swap INDEPENDENTLY, so between "Lora roman has arrived"
   and "Lora italic has arrived" the headline renders real roman against
   fallback italic. At 390 that intermediate paint takes six lines where both
   the before and after take seven, costing ~0.05 (unthrottled) to ~0.20
   (1.6Mbps) of transient layout shift; at 412 it costs 0.001 because the
   headline is six lines in every combination. That intermediate state depends
   ONLY on the italic size-adjust, and it wants >=117.5% at 390 while 1440 wants
   <=116.5% for the same reason in reverse — an empty intersection, so no pair
   of values here can remove it. Removing it means removing the swap:
   `font-display: optional` on the three faces above measures a flat 0.000 at
   both widths, throttled and not, and because these fallbacks are now
   pixel-identical to the real faces at every tested width it costs no layout
   change at all — only the typeface a cold-cache visitor sees on their first
   page view. RESOLVED: Patrick ruled for `optional` 2026-08-03 (Decision B),
   so this residual is gone by construction; the paragraph above is the record
   of why. Do not revert to `swap` without re-reading it. */
@font-face {
  font-family: 'Inter-fallback';
  font-style: normal;
  font-weight: 400 700;
  src: local('Arial'), local('Liberation Sans'), local('Arimo'), local('Helvetica');
  size-adjust: 108.3%;
  ascent-override: 89.451%;
  descent-override: 22.272%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Lora-fallback';
  font-style: normal;
  font-weight: 400 600;
  src: local('Georgia');
  size-adjust: 107.53%;
  ascent-override: 93.554%;
  descent-override: 25.481%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Lora-fallback';
  font-style: italic;
  font-weight: 400 600;
  src: local('Georgia Italic'), local('Georgia-Italic');
  size-adjust: 101.14%;
  ascent-override: 99.463%;
  descent-override: 27.090%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Lora-fallback-times';
  font-style: normal;
  font-weight: 400 600;
  src: local('Liberation Serif'), local('Tinos'), local('Times New Roman'), local('Nimbus Roman');
  size-adjust: 118.0%;
  ascent-override: 85.254%;
  descent-override: 23.220%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Lora-fallback-times';
  font-style: italic;
  font-weight: 400 600;
  src: local('Liberation Serif Italic'), local('Tinos Italic'), local('Times New Roman Italic'), local('Nimbus Roman Italic');
  size-adjust: 112.63%;
  ascent-override: 89.319%;
  descent-override: 24.328%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  /* ground + ink (PRD §5). --nlf-stone is an ALTERNATE SECTION TINT only; the page
     ground is white. */
  --nlf-ground: #FFFFFF;
  --nlf-stone: #FAF8F5;
  --nlf-card: #FFFFFF;
  --nlf-ink: #2C2822;
  --nlf-prose: #4A453B;
  --nlf-muted: #7A7365;
  --nlf-line: #DDD8CE;

  /* gold is the primary CTA and always carries dark text */
  --nlf-gold: #F7B40B;
  --nlf-gold-dk: #DFA00A;
  --nlf-on-gold: #2C2822;

  --nlf-copper: #C47A4F;
  --nlf-copper-dk: #9B5530;

  --nlf-sage: #3D5232;
  --nlf-sage-deep: #2C3A24;
  --nlf-sage-soft: #5C7A4A;
  --nlf-on-sage: #F3EEE2;
  --nlf-on-sage-muted: #C0C9B4;
  --nlf-on-dark: #FFF8EF;
  --nlf-warm-dk: #57503C;          /* band gradient tail, per mockup --dark3 */

  --nlf-footer-bg: #23282D;
  --nlf-footer-line: #3A414B;
  --nlf-footer-text: #AEB3BA;
  --nlf-footer-muted: #7D838C;

  --nlf-tint: rgba(196, 122, 79, 0.10);
  --nlf-tint2: rgba(196, 122, 79, 0.03);

  /* per-pillar accent; overridden on .pillar[data-pillar] */
  --nlf-accent: var(--nlf-copper);
  --nlf-accent-dk: var(--nlf-copper-dk);

  --nlf-r: 6px;
  --nlf-r-btn: 4px;
  --nlf-r-pill: 999px;
  --nlf-shadow-card: 0 18px 40px -28px rgba(38, 34, 28, 0.35);
  --nlf-shadow-panel: 0 24px 50px -30px rgba(38, 34, 28, 0.40);
  --nlf-shadow-band: 0 34px 70px -34px rgba(10, 14, 8, 0.85);

  /* The *-fallback families sit directly behind the web font: they ARE the
     system font, re-metricked to it, so first paint and post-swap paint lay out
     the same. Everything after them is the pre-existing safety net. */
  --nlf-sans: 'Inter', 'Inter-fallback', Arial, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nlf-serif: 'Lora', 'Lora-fallback', 'Lora-fallback-times', Georgia, 'Times New Roman', serif;
  --nlf-wrap: 1200px;
  --nlf-sec: 88px;                 /* section rhythm; tightened at <=900px */
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* R4: never a horizontal scrollbar. `clip` (not `hidden`): hidden makes body
     a scroll container, which killed position:sticky site-wide since v2 launch
     (QC S3-F1). clip forbids scrolling entirely, so R4 holds AND sticky works. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* html body (0,0,2): migrated WP pages ship inline `body{}` rules (cream
   grounds, Georgia/DM Sans). Those must never restyle the chrome; content
   elements that set their OWN fonts keep them. */
html body {
  font-family: var(--nlf-sans);
  background: var(--nlf-ground);
  color: var(--nlf-ink);
  line-height: 1.6;
  font-size: 16.5px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: var(--nlf-serif);
  font-weight: 500;
  line-height: 1.15;
  overflow-wrap: break-word;
  text-wrap: balance;
}
h4, h5, h6 { font-family: var(--nlf-sans); }

a { color: var(--nlf-copper-dk); }
img, video, svg { max-width: 100%; height: auto; }

.wrap {
  max-width: var(--nlf-wrap);
  margin: 0 auto;
  padding: 0 28px;
}

/* Grid and flex items default to min-width:auto, which is min-content: one wide
   table inside a column silently widens the whole column past the viewport.
   Every track in this design is allowed to shrink; the wide thing scrolls
   inside its own scroll container instead (R4: no horizontal scrollbar at any
   width >= 320px). */
.body-sec .cols > *,
.contact-grid > *,
.pgrid > *,
.sgrid > li,
.nlf-card-grid > li,
.wgrid > li,
.result-list > li,
.atty .wrap > *,
footer.site .cols > * { min-width: 0; }

/* ------------------------------------------------------- accessibility -- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--nlf-ink);
  color: var(--nlf-on-dark);
  padding: 12px 18px;
  border-radius: 0 0 var(--nlf-r) 0;
  font: 600 15px/1 var(--nlf-sans);
  text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--nlf-copper-dk);
  outline-offset: 2px;
  border-radius: 3px;
}
/* dark grounds need the gold ring instead; copper-dk disappears on sage */
.topline :focus-visible,
header.site :focus-visible,
.hero :focus-visible,
.atty :focus-visible,
.band :focus-visible,
.errorpage :focus-visible,
.rail .mini-cta :focus-visible,
footer.site :focus-visible { outline-color: var(--nlf-gold); }

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

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-block;
  cursor: pointer;
  font: 600 15.5px/1.15 var(--nlf-sans);
  padding: 14px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--nlf-r-btn);
  text-decoration: none;
  text-align: center;
}
/* .btn-gold is the primary CTA (stage 3 rename; it paints gold, so the copper
   name was a lie every reader had to un-learn).

   .btn-copper is a PERMANENT alias, not a deprecation to be swept later:
   markup outside this repo's control emits it and always will —
     · 5 migrated content pages (content/pages/family-law*.md) carry
       <a class="btn btn-copper">, and content/ is gate-protected and read-only;
     · content/snippets/leads.yaml sets style: "copper", which the lead-form
       partial renders as btn-{{.Style}}.
   Deleting the alias silently unstyles a live CTA on six surfaces. Keep both
   selectors on every rule below. */
.btn-gold, .btn-copper { background: var(--nlf-gold); border-color: var(--nlf-gold); color: var(--nlf-on-gold); }
.btn-gold:hover, .btn-copper:hover { background: var(--nlf-gold-dk); border-color: var(--nlf-gold-dk); }

/* sage stays a distinct affordance for veterans-law surfaces (R4 heritage) */
.btn-sage { background: var(--nlf-sage); border-color: var(--nlf-sage); color: var(--nlf-on-dark); }
.btn-sage:hover { background: var(--nlf-sage-deep); border-color: var(--nlf-sage-deep); }

.btn-ghost { background: transparent; border-color: var(--nlf-copper); color: var(--nlf-copper-dk); }
.btn-ghost:hover { background: rgba(196, 122, 79, 0.09); border-color: var(--nlf-copper-dk); }
.btn-block { display: block; width: 100%; }

/* Dark-band context. Templates cannot change this stage, so the light variants
   of btn-ghost and btn-sage are reached by descendant selector instead of by a
   btn-ghost-light class (the mockup's approach, adapted). Sage-on-sage would be
   invisible, so it lifts to sage-soft with a light rule and stays sage. */
.hero .btn-ghost,
.atty .btn-ghost,
.band .btn-ghost,
.errorpage .btn-ghost,
.rail .mini-cta .btn-ghost {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--nlf-on-dark);
  background: transparent;
}
.hero .btn-ghost:hover,
.atty .btn-ghost:hover,
.band .btn-ghost:hover,
.errorpage .btn-ghost:hover,
.rail .mini-cta .btn-ghost:hover {
  border-color: var(--nlf-on-dark);
  background: rgba(255, 255, 255, 0.08);
}
header.site .btn-sage,
.hero .btn-sage,
.atty .btn-sage,
.band .btn-sage {
  background: var(--nlf-sage-soft);
  border-color: rgba(255, 248, 239, 0.55);
  color: var(--nlf-on-dark);
}
header.site .btn-sage:hover,
.hero .btn-sage:hover,
.atty .btn-sage:hover,
.band .btn-sage:hover {
  background: #6B8A57;
  border-color: var(--nlf-on-dark);
}

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ------------------------------------------------------ eyebrow / kicker -- */
/* .kicker is the templates' eyebrow element; PRD §5 sets the treatment. */
.kicker {
  display: block;
  font: 600 12.5px/1.5 var(--nlf-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nlf-accent-dk);
  margin-bottom: 12px;
}

.lede {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--nlf-muted);
  max-width: 56ch;
}

/* --------------------------------------------------------------- header -- */
.topline {
  background: var(--nlf-sage-deep);
  color: var(--nlf-on-sage-muted);
  font-size: 13.5px;
  padding: 8px 0;
}
.topline .wrap { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.topline a { color: var(--nlf-gold); text-decoration: none; font-weight: 600; letter-spacing: 0.03em; }
.topline a:hover { text-decoration: underline; }

header.site {
  background: var(--nlf-sage);
  color: var(--nlf-on-sage);
  position: sticky;
  top: 0;
  z-index: 50;
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo {
  font-family: var(--nlf-serif);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #FFFFFF;
  white-space: nowrap;
}
.logo .shield {
  display: inline-block;
  width: 11px; height: 13px;
  background: var(--nlf-gold);
  clip-path: polygon(0 0, 100% 0, 100% 65%, 50% 100%, 0 65%);
  margin-right: 8px;
  vertical-align: -1px;
}

nav.main { display: none; gap: 30px; margin-left: auto; }
nav.main a {
  color: var(--nlf-on-sage);
  opacity: 0.92;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}
nav.main a:hover { color: var(--nlf-gold); opacity: 1; }
nav.main a[aria-current="true"] {
  color: var(--nlf-gold);
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: var(--nlf-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.hd-cta { margin-left: auto; padding: 11px 20px; font-size: 14.5px; }

/* ----------------------------------------------------------------- hero -- */
/* Stage 2: the mockup's layered hero. Stacking order, bottom to top:
     .hero background   sage-deep, the ground that can never fail to paint
     .hero-aerial       z 0   NAIP aerial, desaturated and darkened
     .hero-sky          z 1   sky loop, covers the aerial while it plays
     .hero::before      z 2   sage gradient overlay — over BOTH art layers, so
                              headline contrast is identical either way
     pin / copy / creds z 3
   The video carries onerror="this.hidden=true" (an inline JS handler); the
   [hidden] reveal of the aerial below is pure CSS with no layout shift, and
   with JS disabled a broken loop still shows its poster.
   Nothing here may set `display` on .hero-sky or that fallback breaks. (.hero-sky, not .hero-video: the media-slot block below owns .hero-video.) */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--nlf-sage-deep);
  color: var(--nlf-on-dark);
  padding: 0;
}
.hero-aerial,
.hero-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  border: 0;
  pointer-events: none;
}
.hero-aerial { z-index: 0; filter: saturate(0.55) brightness(0.82); }
.hero-sky { z-index: 1; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg,
    rgba(22, 28, 16, 0.88) 0%,
    rgba(22, 28, 16, 0.62) 52%,
    rgba(22, 28, 16, 0.34) 100%);
  pointer-events: none;
}

/* Map pin: the aerial has no burned-in label (the mockup's Google screenshot
   never ships — Decision 7), so the firm's mark is set in site type here. It
   belongs to the aerial state only, so it appears exactly when the video is
   gone. Decorative; the aerial's alt already carries the meaning. */
.hero-pin {
  display: none;
  position: absolute;
  z-index: 3;
  top: 11%;
  left: 46%;
  align-items: center;
  gap: 10px;
  font: 600 12.5px/1 var(--nlf-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 248, 239, 0.92);
  text-shadow: 0 1px 12px rgba(10, 14, 8, 0.95);
  pointer-events: none;
}
.hero-sky[hidden] ~ .hero-pin { display: flex; }
.hero-pin::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--nlf-gold);
  box-shadow: 0 0 0 5px rgba(247, 180, 11, 0.20), 0 0 18px rgba(247, 180, 11, 0.55);
  flex: none;
}

.hero .wrap { position: relative; z-index: 3; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  padding: 72px 0 108px;
}
.hero-copy { max-width: 680px; }
.hero .kicker { color: var(--nlf-gold); margin-bottom: 18px; }
.hero h1 {
  font-size: clamp(26px, 2.6vw, 40px);
  color: #FFFFFF;
  margin: 0 0 22px;
  text-shadow: 0 2px 24px rgba(20, 25, 18, 0.45);
}
.hero h1 em { font-style: italic; color: #FFE0A0; }
.hero p.lede {
  font-size: clamp(17px, 1.6vw, 20px);
  color: rgba(255, 248, 239, 0.92);
  max-width: 52ch;
  margin-bottom: 34px;
}

/* portrait slot: the mockup's framed treatment (inset hairline, deep shadow) */
.hero-portrait {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 5;
  justify-self: end;
  border-radius: var(--nlf-r);
  overflow: hidden;
  border: 1px solid rgba(255, 248, 239, 0.28);
  box-shadow: var(--nlf-shadow-band);
  background: linear-gradient(200deg, var(--nlf-warm-dk) 0%, var(--nlf-sage-deep) 88%);
}
.hero-portrait img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.hero-portrait::before {
  content: "";
  position: absolute;
  inset: 13px;
  z-index: 2;
  border: 1px solid rgba(255, 248, 239, 0.30);
  border-radius: 4px;
  pointer-events: none;
}

/* credential band across the foot of the hero */
.cred-band {
  position: relative;
  z-index: 3;
  background: rgba(20, 28, 15, 0.55);
  backdrop-filter: blur(3px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.cred-band .wrap { padding-top: 15px; padding-bottom: 15px; }
.trust {
  display: flex;
  gap: 12px 40px;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 248, 239, 0.85);
  list-style: none;
}
.trust li { display: flex; align-items: center; gap: 9px; }
.trust b { color: var(--nlf-gold); font-weight: 700; }
.trust li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nlf-copper);
  flex: none;
}

/* ---------------------------------------------------- section  rhythm -- */
.finder, .pillars, .atty, .faq, .writing, .spokes,
.body-sec, .section, .listing { padding: var(--nlf-sec) 0; }
.pillars, .writing, .spokes, .body-sec, .section, .listing {
  border-bottom: 1px solid var(--nlf-line);
}
/* dark and tinted bands carry their own edge */
.hero, .atty, .faq, .band { border-bottom: none; }

/* Section heads follow the mockup: eyebrow, large Lora h2, generous space
   before the content. */
.finder h2, .pillars h2, .faq h2, .writing h2, .spokes h2 {
  font-size: clamp(30px, 3.2vw, 44px);
  max-width: 22ch;
  margin: 0 0 40px;
}

/* --------------------------------------------------------------- finder -- */
/* The widget itself is partials/finder.html with its own scoped styles; this
   section is the stone-tinted ground it sits on. */
.finder {
  background: var(--nlf-stone);
  border-top: 1px solid var(--nlf-line);
  border-bottom: 1px solid var(--nlf-line);
}
.finder h2 { margin-bottom: 24px; }

/* -------------------------------------------------------------- pillars -- */
/* Section head is a two-column grid: the head on the left, the pull quote on
   the right behind a copper rule. Collapses to one column at 1020px. */
.pillars-head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
  margin-bottom: 52px;
}
.pillars-head .sec-head { max-width: 640px; }
.pillars-head h2 { margin-bottom: 0; }

.pullquote { border-left: 3px solid var(--nlf-copper); padding-left: 30px; }
.pullquote .kicker { color: var(--nlf-copper-dk); }
.pullquote blockquote {
  font-family: var(--nlf-serif);
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.4;
  color: var(--nlf-ink);
  text-wrap: balance;
}
.pullquote cite {
  display: block;
  margin-top: 16px;
  font: 600 12.5px/1.5 var(--nlf-sans);
  font-style: normal;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--nlf-muted);
}

.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.pcard {
  background: var(--nlf-card);
  border: 1px solid var(--nlf-line);
  border-radius: var(--nlf-r);
  box-shadow: var(--nlf-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* emblem header: full-bleed colour block, so the card's padding lives on
   .pcard-body rather than on .pcard */
.pcard-art {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pcard-art svg { width: 74px; height: 74px; opacity: 0.95; }
.art-estate { background: linear-gradient(160deg, var(--nlf-sage-soft), var(--nlf-sage-deep)); }
.art-family { background: linear-gradient(160deg, var(--nlf-copper), var(--nlf-copper-dk)); }
.art-vets   { background: linear-gradient(160deg, var(--nlf-warm-dk), #322D1F); }
.pcard-body {
  padding: 26px 28px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pcard h3 { font-size: 24px; margin-bottom: 10px; }
.pcard .tagline { font-size: 15.5px; color: var(--nlf-prose); margin-bottom: 18px; }
.pcard ul { list-style: none; margin: 0 0 22px; }
.pcard li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--nlf-line);
  font-size: 15px;
  color: var(--nlf-prose);
}
.pcard li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--nlf-copper);
  flex: none;
}
.pcard li:last-child { border-bottom: 0; }
.pcard li a { text-decoration: none; color: var(--nlf-prose); }
.pcard li a:hover { color: var(--nlf-copper-dk); }
.pcard .go { margin-top: auto; font-weight: 600; font-size: 15px; color: var(--nlf-copper-dk); text-decoration: none; }
.pcard .go:hover { color: var(--nlf-copper); text-decoration: underline; }

/* the mockup's vets flag: gold tint, not a sage pill */
.badge-free {
  display: inline-block;
  align-self: flex-start;
  background: rgba(247, 180, 11, 0.14);
  color: #8F6420;
  border: 1px solid rgba(180, 130, 50, 0.40);
  font: 700 12px/1.5 var(--nlf-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--nlf-r-pill);
  margin-bottom: 14px;
}

/* ------------------------------------------------- Warrior-Lawyer band -- */
/* The mockup's sage attorney band: slideshow frame left, copy right. */
.atty {
  background: var(--nlf-sage);
  color: var(--nlf-on-sage);
  padding: 96px 0;
}
.atty .wrap {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 64px;
  align-items: center;
}

/* Six stacked <img> crossfaded by CSS alone: 6s a slide, 36s a loop. Every
   frame is a real <img> in the HTML with its own alt (no JS-rendered content,
   PRD §5). Reduced motion gets slide 1 and no animation at all. */
.warrior-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--nlf-r);
  overflow: hidden;
  background: var(--nlf-sage-deep);
  border: 1px solid rgba(255, 248, 239, 0.14);
  box-shadow: var(--nlf-shadow-band);
}
.warrior-frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 3;
  border: 1px solid rgba(255, 248, 239, 0.25);
  border-radius: 4px;
  pointer-events: none;
}
.wph {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
}
.wph-top { object-position: center 18%; }
/* visible baseline: slide 1 shows with no animation and no media query */
.wph:nth-of-type(1) { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .wph { animation: nlf-wph-fade 36s linear infinite; }
  .wph:nth-of-type(1) { animation-delay: 0s; }
  .wph:nth-of-type(2) { animation-delay: 6s; }
  .wph:nth-of-type(3) { animation-delay: 12s; }
  .wph:nth-of-type(4) { animation-delay: 18s; }
  .wph:nth-of-type(5) { animation-delay: 24s; }
  .wph:nth-of-type(6) { animation-delay: 30s; }
  @keyframes nlf-wph-fade {
    0%    { opacity: 0; }
    3%    { opacity: 1; }
    16.7% { opacity: 1; }
    20%   { opacity: 0; }
    100%  { opacity: 0; }
  }
}

.atty h2 em { font-style: italic; color: var(--nlf-gold); }
.atty .meet { margin-top: 30px; }
.atty .kicker { color: var(--nlf-gold); }
.atty h2 { font-size: clamp(30px, 3.2vw, 46px); color: #FFFFFF; margin: 0 0 20px; }
.atty p { color: var(--nlf-on-sage-muted); font-size: 17px; max-width: 60ch; margin-bottom: 16px; }
.creds { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; list-style: none; }
.creds li {
  background: transparent;
  border: 1px solid rgba(255, 248, 239, 0.30);
  border-radius: var(--nlf-r-pill);
  color: var(--nlf-on-sage);
  font: 600 13px/1.4 var(--nlf-sans);
  letter-spacing: 0.04em;
  padding: 7px 14px;
}

/* ------------------------------------------------------------------ faq -- */
/* <details>/<summary>: the mockup's toggle behaviour with zero JavaScript. */
.faq { background: linear-gradient(180deg, var(--nlf-tint), var(--nlf-tint2)); }
.fitem {
  background: var(--nlf-card);
  border: 1px solid var(--nlf-line);
  border-radius: var(--nlf-r);
  padding: 0 26px;
  margin-bottom: 14px;
}
.fitem summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  font-family: var(--nlf-serif);
  font-size: 19px;
  color: var(--nlf-ink);
  padding: 20px 0;
}
.fitem summary::-webkit-details-marker { display: none; }
.fitem summary::after {
  content: "+";
  font: 300 24px/1 var(--nlf-sans);
  color: var(--nlf-copper-dk);
  flex: none;
}
.fitem[open] summary::after { content: "\2013"; }
.fitem .a { color: var(--nlf-prose); padding: 0 0 22px; max-width: 62ch; font-size: 16px; }
.fitem .a p + p { margin-top: 12px; }

/* -------------------------------------------------------------- writing -- */
.writing .head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.writing .head h2 { margin-bottom: 0; }
.writing .head .kicker { margin-bottom: 10px; }
.writing .all {
  font-weight: 600;
  font-size: 15px;
  color: var(--nlf-copper-dk);
  text-decoration: none;
  white-space: nowrap;
}
.writing .all:hover { text-decoration: underline; }

/* ------------------------------------- .nlf-card (D13) + listing grids -- */
.nlf-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; list-style: none; }
.wgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; list-style: none; }

.nlf-card {
  background: var(--nlf-card);
  border: 1px solid var(--nlf-line);
  border-radius: var(--nlf-r);
  box-shadow: var(--nlf-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.nlf-card:hover { border-color: var(--nlf-copper); }
.nlf-card img {
  width: 100%;
  aspect-ratio: 1024 / 538;
  object-fit: cover;
  display: block;
}
.nlf-card .body { padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.nlf-card h3 { font-size: 18.5px; line-height: 1.3; }
.nlf-card h3 a { color: var(--nlf-ink); text-decoration: none; }
.nlf-card h3 a:hover { color: var(--nlf-copper-dk); }
/* mockup .wcard meta: the category reads as a coloured eyebrow above a muted
   date, so the two are separated onto their own lines rather than run together */
.nlf-card .meta {
  font-size: 13.5px;
  color: var(--nlf-muted);
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.nlf-card .meta a {
  color: var(--nlf-copper-dk);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.nlf-card .meta a:hover { text-decoration: underline; }
.nlf-card .excerpt { font-size: 14.5px; color: var(--nlf-prose); }

/* ------------------------------------------------------------- cta band -- */
.band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(175deg, var(--nlf-sage-deep) 0%, var(--nlf-sage) 55%, var(--nlf-warm-dk) 100%);
  color: var(--nlf-on-dark);
  padding: 104px 0;
}
.band::after {
  content: "";
  position: absolute;
  right: -140px; bottom: -190px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 180, 11, 0.30), rgba(247, 180, 11, 0) 70%);
  pointer-events: none;
}
.band .wrap { position: relative; z-index: 2; max-width: 820px; text-align: center; }
.band h2 { font-size: clamp(34px, 3.8vw, 54px); color: #FFFFFF; margin-bottom: 20px; }
.band p { color: var(--nlf-on-sage-muted); font-size: 18px; max-width: 58ch; margin: 0 auto 34px; }
.band .cta-row { justify-content: center; }
.band .note { font-size: 15px; color: var(--nlf-on-sage-muted); margin: 26px auto 0; }
.band .note a { color: var(--nlf-gold); font-weight: 600; }

/* --------------------------------------------------------------- footer -- */
footer.site {
  background: var(--nlf-footer-bg);
  color: var(--nlf-footer-text);
  padding: 70px 0 100px;
  font-size: 15px;
}
footer.site .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 48px; }
footer.site a { color: var(--nlf-footer-text); text-decoration: none; display: block; padding: 4px 0; }
footer.site a:hover { color: var(--nlf-gold); }
footer.site h2 {
  color: #E8E2D2;
  font: 600 13px/1.4 var(--nlf-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
footer.site ul { list-style: none; }
footer.site .legal {
  margin-top: 24px;
  border-top: 1px solid var(--nlf-footer-line);
  padding-top: 24px;
  font-size: 13px;
  color: var(--nlf-footer-muted);
}
/* two .legal lines render in sequence; only the first is a divider */
footer.site .legal + .legal { margin-top: 8px; border-top: 0; padding-top: 0; }

/* ---------------------------------------------------- sticky mobile bar -- */
/* hidden on desktop; the <=899px tier switches it on */
.mbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--nlf-line);
  z-index: 60;
  border-top: 1px solid var(--nlf-line);
}
.mbar a { padding: 15px 0; text-align: center; font: 600 15px/1.2 var(--nlf-sans); text-decoration: none; }
.mbar .call { background: #fff; color: var(--nlf-ink); }
.mbar .book { background: var(--nlf-gold); color: var(--nlf-on-gold); }
.mbar .book.sage { background: var(--nlf-sage); color: var(--nlf-on-dark); }

/* --------------------------------------------------------------- crumbs -- */
/* Eyebrow language (weight, tracking, muted colour) WITHOUT uppercasing: the
   trail's last segment is the page title, and titles like "Estate Planning in
   Missouri: The Complete Guide (Updated 2026)" shout in caps. The ancestor
   links carry the accent; the current page stays quiet. */
.crumbs {
  font: 500 12.5px/1.6 var(--nlf-sans);
  letter-spacing: 0.06em;
  color: var(--nlf-muted);
  padding: 26px 0 0;
}
.crumbs a { color: var(--nlf-accent-dk); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------- pillar hub -- */
/* data-pillar drives the accent the eyebrows and rules pick up. */
.pillar[data-pillar="vl"] { --nlf-accent: var(--nlf-sage-soft); --nlf-accent-dk: var(--nlf-sage); }

/* Desktop-first hub hero: copy column plus a cost panel, on a tinted ground so
   the hub reads as a composed opening rather than a stack of left-aligned text.
   VL has no aside (no fee language, R4) and .hub-grid stays one column. */
.hub-hero {
  padding: 40px 0 72px;
  background: linear-gradient(180deg, var(--nlf-stone), var(--nlf-ground) 78%);
  border-bottom: 1px solid var(--nlf-line);
}
.hub-grid { display: grid; gap: 56px; align-items: start; }
.hub-grid.has-aside { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
.hub-hero h1 { font-size: clamp(34px, 4.4vw, 52px); max-width: 20ch; margin: 0 0 20px; }
.hub-hero .lede { max-width: 60ch; margin-bottom: 30px; }
.hub-aside { position: sticky; top: 96px; }
/* FL hero (Patrick 2026-08-03): the spokes render inside the hero grid's
   second row so the aside (quality line + lede + CTA; the consult-cost card
   is retired site-wide on his order) sits beside them and no dead band opens
   under the h1. Mobile resets the explicit placements back to single-column
   flow in the <=899px block below. */
.hub-grid-fl { grid-template-rows: auto auto; }
.hub-grid-fl .hub-aside { grid-column: 2; grid-row: 1 / span 2; }
.hub-grid-fl .hub-spokes { grid-column: 1; grid-row: 2; margin-top: 44px; min-width: 0; }
.hub-spokes h2 { font-size: clamp(26px, 2.4vw, 36px); max-width: 22ch; margin: 0 0 32px; }
@media (min-width: 900px) {
  .hub-spokes .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hub-aside .aside-lede { margin: 22px 0 18px; font-size: 16px; line-height: 1.6; color: var(--nlf-prose); }

/* the cost panel takes the mockup's answer-panel treatment: white card, copper
   top rule, panel shadow */
.fees {
  background: var(--nlf-card);
  border: 1px solid var(--nlf-line);
  border-top: 4px solid var(--nlf-accent);
  border-radius: var(--nlf-r);
  box-shadow: var(--nlf-shadow-panel);
  padding: 24px 26px 26px;
  font-size: 15.5px;
  color: var(--nlf-prose);
}
.fees b {
  display: block;
  margin-bottom: 6px;
  font: 600 12.5px/1.5 var(--nlf-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nlf-accent-dk);
}
.fees.free { border-top-color: var(--nlf-sage); }

/* --------------------------------------------------------------- spokes -- */
/* Text cards in the pillar-card language: same border, radius, shadow and
   copper "go" line, no emblem header (that block belongs to the three
   home-page pillars alone, where it distinguishes three fixed practice areas).
   The accent rule appears on hover so a grid of six does not read as stripes. */
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; list-style: none; }
.scard {
  position: relative;
  background: var(--nlf-card);
  border: 1px solid var(--nlf-line);
  border-radius: var(--nlf-r);
  box-shadow: var(--nlf-shadow-card);
  padding: 26px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--nlf-ink);
  height: 100%;
  overflow: hidden;
}
.scard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--nlf-accent);
  opacity: 0;
}
.scard:hover { border-color: var(--nlf-accent); }
.scard:hover::before { opacity: 1; }
.scard h3 { font-size: 22px; }
.scard p { font-size: 15px; color: var(--nlf-prose); margin-bottom: 6px; }
.scard .go { margin-top: auto; font: 600 15px/1.4 var(--nlf-sans); color: var(--nlf-accent-dk); }

/* ----------------------------------------------------- body + side rail -- */
.body-sec .cols { display: grid; grid-template-columns: 2fr 1fr; gap: 56px; align-items: start; }
/* Bounded height (QC S3-F3): the EP rail is ~1500px tall — taller than any
   viewport — so an unbounded sticky pins with its lower links unreachable.
   Bounding to the viewport keeps the pin and makes the rail scroll internally. */
.rail {
  display: grid; gap: 18px;
  position: sticky; top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.rail .card {
  background: var(--nlf-card);
  border: 1px solid var(--nlf-line);
  border-radius: var(--nlf-r);
  box-shadow: var(--nlf-shadow-card);
  padding: 24px;
}
.rail h3 { font-size: 18px; margin-bottom: 12px; }
.rail ul { list-style: none; }
.rail li { padding: 7px 0; border-top: 1px solid var(--nlf-line); font-size: 14.5px; }
.rail li a { text-decoration: none; color: var(--nlf-prose); }
.rail li a:hover { color: var(--nlf-copper-dk); }
/* stays warm charcoal, not sage: both the gold and the sage CTA have to read
   on it (the VL variant of this card renders btn-sage). */
.rail .mini-cta { background: var(--nlf-ink); color: var(--nlf-on-sage-muted); border: none; box-shadow: none; }
.rail .mini-cta h3 { color: var(--nlf-on-dark); }
.rail .mini-cta p { color: var(--nlf-on-sage-muted); font-size: 14.5px; margin: 8px 0 16px; }

/* --------------------------------------------------------- page headers -- */
/* Desktop-first: these were built at 390 and stayed cramped at 1200. The head
   now carries real vertical space and a display-scale h1, and the meta line
   takes the eyebrow treatment. */
.page-head { padding: 34px 0 42px; border-bottom: 1px solid var(--nlf-line); }
.page-head h1 { font-size: clamp(32px, 4.2vw, 48px); margin: 0 0 14px; max-width: 22ch; }
.page-head .lede { max-width: 62ch; }
.page-meta {
  font: 600 12.5px/1.5 var(--nlf-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nlf-muted);
  margin-top: 14px;
}
.page-meta a { color: var(--nlf-muted); }

/* the section-page trailing nav lists */
.child-pages, .post-cats, .post-tags {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--nlf-line);
}

/* -------------------------------------------------------- media  slots -- */
/* D12: these rules only ever apply when the frontmatter set a slot, so a page
   with no media has no box, no min-height and no gap. */
.hero-media { margin: 0 0 30px; }
.hero-media img { width: 100%; border-radius: var(--nlf-r); border: 1px solid var(--nlf-line); display: block; }
.hero-media figcaption { font-size: 13px; color: var(--nlf-muted); margin-top: 8px; }
.hero-video { margin: 0 0 30px; }
.hero-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--nlf-r); }

/* ------------------------------------- prose: migrated WordPress bodies -- */
/* Content-affecting behaviour is unchanged from v2: same measure, same table
   and embed handling. Only the palette moved. Tinted blocks use --nlf-stone, not
   --nlf-card, because the page ground is now white. */
.prose { overflow-wrap: break-word; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol, .prose dl, .prose blockquote, .prose figure, .prose pre {
  margin-bottom: 16px;
}
.prose p, .prose li { color: var(--nlf-prose); max-width: 68ch; }
.prose li { margin-bottom: 6px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose h1 { font-size: clamp(25px, 3.4vw, 33px); margin: 34px 0 14px; }
.prose h2 { font-size: clamp(23px, 3.2vw, 31px); margin: 34px 0 14px; }
.prose h3 { font-size: clamp(19px, 2.6vw, 23px); margin: 26px 0 10px; }
.prose h4 { font-size: 17px; margin: 20px 0 8px; font-weight: 600; }
.prose h1:first-child, .prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose a { color: var(--nlf-copper-dk); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--nlf-copper); }
/* Ten migrated bodies carry <a class="btn btn-sage|btn-copper"> CTAs. ".prose a"
   outspecifies ".btn-sage", so without these the sage buttons rendered
   copper-on-sage and the gold ones copper-on-gold. Pre-existing since v2. */
.prose a.btn { text-decoration: none; }
.prose a.btn-gold, .prose a.btn-copper { color: var(--nlf-on-gold); }
.prose a.btn-sage { color: var(--nlf-on-dark); }
.prose a.btn-ghost { color: var(--nlf-copper-dk); }
.prose a.btn:hover { color: inherit; }
.prose a.btn-gold:hover, .prose a.btn-copper:hover { color: var(--nlf-on-gold); }
.prose a.btn-sage:hover { color: var(--nlf-on-dark); }
.prose strong, .prose b { font-weight: 600; color: var(--nlf-ink); }
.prose blockquote {
  border-left: 4px solid var(--nlf-copper);
  background: var(--nlf-stone);
  border-radius: 0 var(--nlf-r) var(--nlf-r) 0;
  padding: 14px 18px;
}
.prose hr { border: none; border-top: 1px solid var(--nlf-line); margin: 32px 0; }
.prose img { border-radius: var(--nlf-r); height: auto; }
.prose figure img { display: block; }
.prose figcaption { font-size: 13px; color: var(--nlf-muted); margin-top: 6px; }
.prose code, .prose kbd, .prose samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: var(--nlf-stone);
  border: 1px solid var(--nlf-line);
  border-radius: 4px;
  padding: 1px 5px;
}
.prose pre { background: var(--nlf-stone); border: 1px solid var(--nlf-line); border-radius: var(--nlf-r); padding: 14px; overflow-x: auto; }
.prose pre code { border: none; background: none; padding: 0; }

/* tables: wide WordPress tables scroll instead of blowing out the layout.
   A table inside .table-wrap overflows its wrapper (the wrapper scrolls); a
   bare table scrolls itself. */
.prose table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.prose .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 18px;
  border: 1px solid var(--nlf-line);
  border-radius: var(--nlf-r);
  background: var(--nlf-card);
}
.prose .table-wrap table {
  display: table;
  overflow: visible;
  width: 100%;
  min-width: 34rem;
  margin: 0;
}
.prose th, .prose td {
  border-bottom: 1px solid var(--nlf-line);
  padding: 9px 12px;
  text-align: left;
  font-size: 14.5px;
  vertical-align: top;
}
.prose thead th { background: var(--nlf-stone); font-weight: 600; color: var(--nlf-ink); }
.prose tbody tr:last-child td { border-bottom: none; }

/* responsive video embeds (WordPress oEmbed markup, carried verbatim) */
.prose iframe { max-width: 100%; border: 0; }
.prose .wp-block-embed { margin-bottom: 18px; }
.prose .wp-block-embed__wrapper iframe,
.prose .wp-block-embed iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: var(--nlf-r);
}
.prose .wp-embed-aspect-16-9 iframe { aspect-ratio: 16 / 9; }
.prose .wp-embed-aspect-4-3 iframe { aspect-ratio: 4 / 3; }
.prose .wp-embed-aspect-1-1 iframe { aspect-ratio: 1 / 1; }
.prose .wp-embed-aspect-9-16 .wp-block-embed__wrapper { max-width: 360px; }
.prose .wp-embed-aspect-9-16 iframe { aspect-ratio: 9 / 16; }

/* PDF downloads read as what they are */
.prose a[href$=".pdf"]::after,
.prose a[href$=".PDF"]::after {
  content: "PDF";
  font: 600 10.5px/1 var(--nlf-sans);
  letter-spacing: .04em;
  color: var(--nlf-muted);
  border: 1px solid var(--nlf-line);
  background: var(--nlf-stone);
  border-radius: 4px;
  padding: 3px 5px;
  margin-left: 7px;
  vertical-align: 2px;
  text-decoration: none;
}

/* ----------------------------------------------------- blog index, list -- */
.list-head {
  padding: 34px 0 38px;
  background: linear-gradient(180deg, var(--nlf-stone), var(--nlf-ground) 82%);
  border-bottom: 1px solid var(--nlf-line);
}
.list-head h1 { font-size: clamp(32px, 4.2vw, 48px); margin: 0 0 14px; max-width: 22ch; }
.list-head p { color: var(--nlf-muted); font-size: 17px; max-width: 62ch; }

.blog-search { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 0; }
.blog-search input[type="search"] {
  flex: 1 1 240px;
  min-width: 0;
  font: 400 15px/1.2 var(--nlf-sans);
  padding: 13px 15px;
  border: 1.5px solid var(--nlf-line);
  border-radius: var(--nlf-r);
  background: var(--nlf-card);
  color: var(--nlf-ink);
}
.blog-search input[type="search"]::placeholder { color: #9A9084; }

.result-list { list-style: none; display: grid; gap: 18px; }
.result {
  background: var(--nlf-card);
  border: 1px solid var(--nlf-line);
  border-radius: var(--nlf-r);
  box-shadow: var(--nlf-shadow-card);
  padding: 20px 22px;
}
.result h3 { font-size: 20px; margin-bottom: 6px; }
.result h3 a { color: var(--nlf-ink); text-decoration: none; }
.result h3 a:hover { color: var(--nlf-copper-dk); }
.result .snippet { color: var(--nlf-prose); font-size: 14.5px; }
.result mark { background: rgba(247, 180, 11, 0.30); color: var(--nlf-ink); padding: 0 2px; border-radius: 2px; }
.result-empty { color: var(--nlf-muted); }

.pagination {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--nlf-line);
  font-size: 14.5px;
}
.pagination a {
  text-decoration: none;
  font-weight: 600;
  border: 1px solid var(--nlf-line);
  background: var(--nlf-card);
  border-radius: var(--nlf-r);
  padding: 10px 16px;
  color: var(--nlf-copper-dk);
}
.pagination a:hover { border-color: var(--nlf-copper); }
.pagination .page-of { color: var(--nlf-muted); }

.taxonomy { display: flex; gap: 9px; flex-wrap: wrap; list-style: none; margin-top: 16px; }
.taxonomy li a {
  display: inline-block;
  font: 500 13px/1.4 var(--nlf-sans);
  background: var(--nlf-card);
  border: 1px solid var(--nlf-line);
  border-radius: var(--nlf-r-pill);
  padding: 6px 14px;
  text-decoration: none;
  color: var(--nlf-prose);
}
.taxonomy li a:hover { border-color: var(--nlf-copper); color: var(--nlf-copper-dk); }

.feed-link { font-size: 14px; margin-top: 12px; display: inline-block; color: var(--nlf-copper-dk); }

/* -------------------------------------------------------- sitemap  page -- */
.sitemap-sec { padding: 34px 0; border-bottom: 1px solid var(--nlf-line); }
.sitemap-sec:last-of-type { border-bottom: none; }
.sitemap-sec h2 { font-size: 24px; margin-bottom: 16px; }
.sitemap-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 28px; }
.sitemap-list li { border-top: 1px solid var(--nlf-line); padding: 8px 0; font-size: 14.5px; }
.sitemap-list a { text-decoration: none; color: var(--nlf-prose); }
.sitemap-list a:hover { color: var(--nlf-copper-dk); }
.sitemap-list .count { color: var(--nlf-muted); font-size: 12.5px; }

/* ------------------------------------------------------------------ 404 -- */
/* A dead end is still a firm surface: sage band, gold status chip, and the
   four routes people actually arrive looking for. */
.errorpage {
  position: relative;
  overflow: hidden;
  padding: 104px 0 112px;
  background: linear-gradient(168deg, var(--nlf-sage-deep) 0%, var(--nlf-sage) 62%, var(--nlf-warm-dk) 100%);
  color: var(--nlf-on-dark);
}
.errorpage::after {
  content: "";
  position: absolute;
  right: -140px; bottom: -190px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 180, 11, 0.28), rgba(247, 180, 11, 0) 70%);
  pointer-events: none;
}
.errorpage .wrap { position: relative; z-index: 2; max-width: 760px; }
.errorpage h1 { font-size: clamp(34px, 4.6vw, 52px); color: #FFFFFF; margin: 0 0 16px; }
.errorpage p { color: var(--nlf-on-sage-muted); max-width: 56ch; margin-bottom: 30px; font-size: 17.5px; }
.errorpage .code {
  display: inline-block;
  font: 700 12px/1 var(--nlf-sans);
  color: var(--nlf-on-gold);
  background: var(--nlf-gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--nlf-r-pill);
  padding: 6px 13px;
  margin-bottom: 20px;
}
.errorpage .taxonomy { margin-top: 30px; }
.errorpage .taxonomy li a {
  background: transparent;
  border-color: rgba(255, 248, 239, 0.32);
  color: var(--nlf-on-dark);
}
.errorpage .taxonomy li a:hover {
  border-color: var(--nlf-on-dark);
  background: rgba(255, 255, 255, 0.08);
  color: var(--nlf-on-dark);
}

/* ------------------------------------------------------- contact  shell -- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; align-items: start; }
/* the office card follows the reader down the form */
.contact-grid > aside { position: sticky; top: 96px; }
.contact-card {
  background: var(--nlf-card);
  border: 1px solid var(--nlf-line);
  border-top: 4px solid var(--nlf-copper);
  border-radius: var(--nlf-r);
  box-shadow: var(--nlf-shadow-panel);
  padding: 26px;
}
.contact-card h2 { font-size: 20px; margin-bottom: 12px; }
.contact-card p { font-size: 15px; color: var(--nlf-prose); margin-bottom: 10px; }
.contact-card a { color: var(--nlf-copper-dk); font-weight: 600; }
/* wraps the two live lead forms; they carry their own styling in
   partials/lead_form_vl.html, so this is a spacing hook only. */
.contact-form-slot { margin-top: 6px; }
/* the one lead-form element that partial does not space */
.lead-actions { margin-top: 22px; }

/* --------------------------------------------------------- admin  leads -- */
/* templates/admin_leads.html ships its own scoped block; this is the base it
   layers onto. */
.admin-leads { padding: 34px 0 60px; }
.admin-leads table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.admin-leads th, .admin-leads td { border-bottom: 1px solid var(--nlf-line); padding: 9px 12px; text-align: left; }
.admin-leads th { background: var(--nlf-stone); font-weight: 600; }

/* ------------------------------------------------------- responsive -- */
/* Desktop is the base above. These tiers step it down; 900px is where the
   header nav gives way to the sticky .mbar (D14). */
@media (max-width: 1020px) {
  :root { --nlf-sec: 76px; }
  .pgrid { grid-template-columns: 1fr 1fr; }
  .pcard:last-child { grid-column: span 2; }
  .wgrid { grid-template-columns: 1fr 1fr; }
  .atty .wrap { grid-template-columns: 1fr; gap: 40px; }
  .warrior-frame { max-width: 480px; }
  .nlf-card-grid { grid-template-columns: repeat(2, 1fr); }
  .sgrid { grid-template-columns: repeat(2, 1fr); }
  .sitemap-list { grid-template-columns: repeat(2, 1fr); }
  .body-sec .cols { gap: 40px; }
  /* the hub cost panel drops under the copy and stops tracking the scroll */
  .hub-grid.has-aside { grid-template-columns: 1fr; gap: 34px; }
  .hub-aside { position: static; max-width: 62ch; }
  .hub-grid-fl .hub-aside, .hub-grid-fl .hub-spokes { grid-column: auto; grid-row: auto; }
  .hub-hero { padding: 34px 0 56px; }
  .pillars-head { grid-template-columns: 1fr; gap: 32px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; padding: 64px 0 88px; }
  .hero-portrait { justify-self: start; max-width: 330px; }
  /* the stacked hero puts copy where the pin used to sit */
  .hero-pin { display: none !important; }
  /* Stacked, the copy spans the full width, so it can no longer rely on the
     diagonal's dark end. A vertical wash keeps every line legible over ANY
     frame of the loop, including the bright ones. */
  .hero::before {
    background: linear-gradient(180deg,
      rgba(22, 28, 16, 0.86) 0%,
      rgba(22, 28, 16, 0.74) 55%,
      rgba(22, 28, 16, 0.82) 100%);
  }
  .band { padding: 84px 0; }
}

@media (max-width: 899px) {
  :root { --nlf-sec: 64px; }
  .wrap { padding: 0 20px; }
  header.site .wrap { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .hd-cta { padding: 10px 14px; font-size: 14px; }
  .mbar { display: grid; }
  footer.site .cols { grid-template-columns: 1fr 1fr; gap: 30px; }
  .body-sec .cols { grid-template-columns: 1fr; }
  /* undo the WHOLE sticky treatment at mobile, not just position — the S3-F3
     max-height would otherwise nest a scroll trap inside the page (QC S3-F4) */
  .rail { position: static; max-height: none; overflow-y: visible; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid > aside { position: static; }
  .page-head { padding: 26px 0 30px; }
  .list-head { padding: 26px 0 30px; }
  .errorpage { padding: 72px 0 78px; }
  .hero-grid { padding: 56px 0 64px; }
  .atty { padding: 68px 0; }
  .band { padding: 72px 0; }
  .trust { gap: 10px 24px; }
}

@media (max-width: 760px) {
  .cred-band .wrap { padding-top: 13px; padding-bottom: 13px; }
  .trust { flex-direction: column; gap: 8px; }
  .pgrid { grid-template-columns: 1fr; }
  .pcard:last-child { grid-column: auto; }
  .wgrid { grid-template-columns: 1fr; }
  .nlf-card-grid { grid-template-columns: 1fr; }
  .sgrid { grid-template-columns: 1fr; }
  .sitemap-list { grid-template-columns: 1fr; }
  .writing .head { align-items: flex-start; }
}

@media (min-width: 900px) {
  nav.main { display: flex; }
  /* two auto margins split the free space: logo | nav | CTA, per the mockup */
  .hd-cta { margin-left: auto; }
  footer.site { padding-bottom: 40px; }
}

@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  header.site .wrap { gap: 8px; }
  .logo { font-size: 19px; }
  .hd-cta { padding: 9px 11px; font-size: 13px; }
  .btn { padding: 13px 20px; font-size: 15px; }
  .hero-grid { padding: 44px 0 52px; gap: 34px; }
  .fitem { padding: 0 18px; }
  .fitem summary { font-size: 17.5px; gap: 14px; }
  .pcard-body { padding: 24px 20px 26px; }
  .pcard-art { height: 128px; }
  .pullquote { padding-left: 22px; }
  .scard { padding: 22px 20px 24px; }
  .fees { padding: 20px 18px 22px; }
  .contact-card { padding: 22px 20px; }
  .errorpage { padding: 60px 0 64px; }
}

/* ----------------------------------------------------------- motion -- */
/* Every transition here is decoration; reduced-motion users get the end state
   with no animation. */
@media (prefers-reduced-motion: no-preference) {
  .btn, .pcard, .scard, .nlf-card, .result, .taxonomy li a, .pagination a,
  nav.main a, .topline a, footer.site a, .pcard .go, .fitem summary::after {
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
  }
  .pcard, .scard, .nlf-card { transition: border-color .16s ease, box-shadow .2s ease, transform .2s ease; }
  .pcard:hover, .scard:hover, .nlf-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--nlf-shadow-panel);
  }
}