/* Colyer Law Firm - Shared interior CSS (inlined, no nav/footer) - built 2026-06-05T14:42:08Z */

/* ============================================================
   Colyer Law Firm — Design Tokens
   Source of truth for colors, typography, spacing, motion.
   ============================================================ */

:root {
  /* ---------- Layout ---------- */
  --header-height:  96px;

  /* ---------- Core palette (client-confirmed) ---------- */
  --c-navy:         #1a2a43;
  --c-navy-deep:    #162f4c;
  --c-ink:          #0e0c19;
  --c-slate:        #3e3e50;
  --c-paper:        #fffdff;
  --c-teal:         #479bbe;
  --c-gold:         #b9a755;

  /* ---------- Derived neutrals ---------- */
  --c-line:         #e6e4dc;
  --c-stone:        #d9d4c6;
  --c-cream:        #f5f1e6;
  --c-cream-2:      #efe9d8;
  --c-ink-2:        #2a3a54;

  /* ---------- Accent variants ---------- */
  --c-gold-soft:    #d7c47a;
  --c-gold-deep:    #8a7a3c;
  --c-teal-soft:    #b3d6e3;
  --c-teal-deep:    #2c7395;

  /* ---------- Semantic aliases ---------- */
  --accent:         var(--c-gold);
  --accent-soft:    var(--c-gold-soft);
  --accent-deep:    var(--c-gold-deep);
  --accent-2:       var(--c-teal);
  --accent-2-soft:  var(--c-teal-soft);
  --accent-2-deep:  var(--c-teal-deep);

  /* ---------- Overlays / scrims ---------- */
  --scrim-navy-72:  rgba(26, 42, 67, 0.72);
  --scrim-navy-88:  rgba(22, 47, 76, 0.88);
  --scrim-ink-60:   rgba(14, 12, 25, 0.60);

  /* ---------- Typography ---------- */
  --f-display: "Big Shoulders Display", "Impact", "Arial Narrow Bold", sans-serif;
  --f-body:    "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl: 128px;

  --lh-tight: 0.92;
  --lh-snug:  1.12;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  --ls-tight: -0.02em;
  --ls-wide:  0.14em;
  --ls-xwide: 0.24em;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10:128px;
  --s-11:160px;

  /* ---------- Radii ---------- */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:  16px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --sh-sm:   0 1px  2px rgba(14, 12, 25, 0.08);
  --sh-md:   0 6px 20px rgba(14, 12, 25, 0.10);
  --sh-lg:   0 24px 60px rgba(14, 12, 25, 0.18);
  --sh-gold: 0 12px 32px rgba(185, 167, 85, 0.28);
  --sh-teal: 0 12px 32px rgba(66, 169, 202, 0.28);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.7,0,.3,1);
  --dur-fast: 180ms;
  --dur-med:  320ms;
  --dur-slow: 600ms;

  /* ---------- Section rhythm ---------- */
  --density: 1;
  --sec-pad-y: calc(var(--s-9) * var(--density));
  --sec-pad-x: calc(var(--s-7) * var(--density));

  /* ---------- Container widths ---------- */
  --w-narrow: 960px;
  --w-reg:   1200px;
  --w-wide:  1440px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-med:  1ms;
    --dur-slow: 1ms;
  }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height, 96px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
  color: var(--c-navy-deep);
}

/* Display scale — used on heroes, section titles */
.display-xl { font-size: clamp(56px, 8vw, 128px); line-height: var(--lh-tight); letter-spacing: -0.025em; font-weight: 900; text-transform: uppercase; }
.display-lg { font-size: clamp(44px, 6vw, 88px);  line-height: var(--lh-tight); letter-spacing: -0.02em;  font-weight: 900; text-transform: uppercase; }
.display-md { font-size: clamp(32px, 4.2vw, 64px); line-height: var(--lh-snug); font-weight: 800; text-transform: uppercase; }
.display-sm { font-size: clamp(24px, 2.8vw, 48px); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-xwide);
  color: var(--accent);
}

.lede {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--c-ink-2);
  max-width: 60ch;
}

/* Focus — must be visible and on-brand */
:focus-visible {
  outline: 3px solid var(--c-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-navy-deep);
  color: var(--c-paper);
  padding: 12px 16px;
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  z-index: 1000;
}
.skip-link:focus-visible { left: 16px; top: 16px; }

/* Placeholder slot (shot list) — used anywhere real media will go */
.shot {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    repeating-linear-gradient(135deg,
      rgba(26,42,67,.04) 0 12px,
      rgba(26,42,67,.08) 12px 24px),
    linear-gradient(135deg, #ece8db, #d4cfbf);
  color: var(--c-navy-deep);
}
.shot--dark {
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,253,.04) 0 12px,
      rgba(255,255,253,.08) 12px 24px),
    linear-gradient(135deg, #17314a, #1a2a43);
  color: var(--c-paper);
}
.shot__tag {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  background: rgba(14,12,25,.82);
  color: var(--c-paper);
  text-transform: uppercase;
}
.shot__tag--top { inset: 0 0 auto 0; }

/* Containers */
.container        { max-width: var(--w-reg);    margin-inline: auto; padding-inline: var(--s-6); }
.container-narrow { max-width: var(--w-narrow); margin-inline: auto; padding-inline: var(--s-6); }
.container-wide   { max-width: var(--w-wide);   margin-inline: auto; padding-inline: var(--s-6); }

/* Sections */
.section   { padding-block: var(--sec-pad-y); }
.section-tight   { padding-block: calc(var(--sec-pad-y) * 0.6); }
.section-compact { padding-block: calc(var(--sec-pad-y) * 0.4); }

/* Backgrounds */
.bg-navy        { background: var(--c-navy-deep); color: var(--c-paper); }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--c-paper); }
.bg-paper       { background: var(--c-paper); }
.bg-cream       { background: var(--c-cream); }
.bg-cream-2     { background: var(--c-cream-2); }
.bg-gold        { background: var(--c-gold); color: var(--c-navy-deep); }
.bg-teal        { background: var(--c-teal); color: var(--c-navy-deep); }

/* Text color helpers */
.text-accent { color: var(--accent); }
.text-teal   { color: var(--c-teal); }
.text-navy   { color: var(--c-navy-deep); }
.text-muted  { color: var(--c-ink-2); }
.text-paper  { color: var(--c-paper); }

/* Dividers */
.rule        { height: 1px; background: var(--c-line); width: 100%; }
.rule-gold   { height: 2px; background: var(--c-gold); width: 64px; }
.rule-teal   { height: 2px; background: var(--c-teal); width: 64px; }
.rule-strong { height: 2px; background: var(--c-navy-deep); width: 100%; }

/* Type helpers */
.caps { text-transform: uppercase; letter-spacing: var(--ls-wide); }
.mono { font-family: var(--f-mono); letter-spacing: 0.02em; }

/* ============================================================
   Motion hook — components add `.reveal` (+ optional variant +
   delay class); IntersectionObserver flips them to `.is-in`.
   Slow, deliberate timing so reveals feel composed, not snappy.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s var(--ease-out),
              transform 1.2s var(--ease-out),
              filter 1.2s var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Variants — combine with .reveal */
.reveal--rise          { transform: translateY(56px); }
.reveal--left          { transform: translateX(-48px); }
.reveal--right         { transform: translateX(48px); }
.reveal--scale         { transform: scale(0.93); }
.reveal--fade          { transform: none; }
.reveal--blur          { filter: blur(10px); transform: translateY(18px); }
.reveal--clip          { clip-path: inset(0 0 100% 0); transform: none;
                         transition: clip-path 1.6s var(--ease-out), opacity 0.9s var(--ease-out); }
.reveal--clip.is-in    { clip-path: inset(0 0 0 0); }

/* Stagger delays — wider spacing so each item is felt distinctly */
.reveal-delay-1  { transition-delay: 140ms; }
.reveal-delay-2  { transition-delay: 280ms; }
.reveal-delay-3  { transition-delay: 420ms; }
.reveal-delay-4  { transition-delay: 560ms; }
.reveal-delay-5  { transition-delay: 700ms; }
.reveal-delay-6  { transition-delay: 840ms; }
.reveal-delay-7  { transition-delay: 980ms; }
.reveal-delay-8  { transition-delay: 1120ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--clip { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; }
}

/* Grids */
.grid        { display: grid; gap: var(--s-5); }
.grid-2      { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3      { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4      { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

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

/* ============================================================
   Divi 5 structural bridge.

   Interior pages are authored as Eleventy component markup, then
   ported to Divi 5 blocks. Divi wraps every section / row / column
   in its own .et_pb_section / .et_pb_row / .et_pb_column elements,
   each carrying Divi's default box model (vertical padding, row
   max-width, legacy column floats + percentage widths).

   The Eleventy component CSS (.hero-simple, .contact-main__grid,
   .cta-band__inner, ...) is applied to those SAME elements via each
   module's `module_class`. For that CSS to behave as designed,
   Divi's default chrome on the body modules must be neutralised so
   the component classes are free to own layout.

   SCOPE: page-body modules only. Divi Theme Builder header/footer
   use `et_flex_section` / `et_flex_row` / `et_flex_column`; the
   page body uses `et_block_section` / `et_block_row` /
   `et_block_column`. Every selector below is anchored on the
   `et_block_*` variant, so the nav/footer chrome is never touched.

   `!important` is used on the load-bearing layout properties
   because Divi emits its module CSS dynamically and can cascade
   after this bundle. This mirrors the homepage (page 643) override
   approach.
   ============================================================ */

/* --- Sections: drop Divi's default vertical padding ---------------
   Each component (.hero-simple, .section, .section-tight, .cta-band)
   sets its own padding-block; Divi's default would stack on top. */
.et_pb_section.et_block_section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --- Reset Divi's global p / heading padding leakage --------------
   Divi's base stylesheet sets:
     p   { padding-bottom: 1em; }      /* ~14px under every paragraph */
     h1..h6 { padding-bottom: 10px; line-height: 1em; }
   Both leak into the body sections and bloat the spacing the
   component CSS expects to own. Zero them inside `.et_pb_section`
   body modules; component margins (e.g. `.practice-detail__para
   { margin: 0 0 18px }`, `.eyebrow` no-margin pair-with-h2) take
   over from there. */
.et_pb_section.et_block_section p,
.et_pb_section.et_block_section h1,
.et_pb_section.et_block_section h2,
.et_pb_section.et_block_section h3,
.et_pb_section.et_block_section h4,
.et_pb_section.et_block_section h5,
.et_pb_section.et_block_section h6 {
  padding-bottom: 0;
}
/* Divi forces line-height: 1em on every heading; component CSS
   wants line-height: 1.1–1.55 depending on the heading. Restore. */
.et_pb_section.et_block_section h1,
.et_pb_section.et_block_section h2,
.et_pb_section.et_block_section h3,
.et_pb_section.et_block_section h4,
.et_pb_section.et_block_section h5,
.et_pb_section.et_block_section h6 {
  line-height: inherit;
}

/* --- Hero content row: width + padding --------------------------
   The bridge zeros all row padding for layout purposes; the hero
   content row needs its clamp padding back so the title isn't
   pinned to the section's 60px top edge. Width stays at the
   container-wide 1440px cap so the title has room to render at
   the homepage-matching clamp(56,8vw,128px) without wrapping. */
.et_pb_row.container-wide.hero-image__content {
  padding-top: clamp(64px, 8vh, 120px) !important;
  padding-bottom: clamp(72px, 10vh, 144px) !important;
}
/* Remove the 18ch cap on the hero title so it can render at full
   homepage size on every interior page. */
.et_pb_section.hero-image .hero-image__title,
.et_pb_section.hero-image .et_pb_text.hero-image__title {
  max-width: none !important;
}

/* --- Section utility classes: 60px top/bottom by default ----------
   Every interior section gets 60px vertical breathing. Heroes and
   pre-CTA sections get extra bottom padding so the eye breathes
   before the next visual block. */
.et_pb_section.et_block_section.section,
.et_pb_section.et_block_section.section-tight,
.et_pb_section.et_block_section.section-compact,
.et_pb_section.et_block_section.hero-image,
.et_pb_section.et_block_section.hero-simple {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
/* Hero sections — extra bottom breathing room below the CTAs */
.et_pb_section.et_block_section.hero-image,
.et_pb_section.et_block_section.hero-simple {
  padding-bottom: 100px !important;
}
/* Team grid (on /about/) — extra bottom space before the closing CTA band */
.et_pb_section.et_block_section.team {
  padding-bottom: 100px !important;
}

/* --- Rows: width 100%, drop Divi's vertical padding -------------
   Each row also carries a component container class (.container /
   .container-wide / .hero-simple__content / .cta-band__inner ...)
   which owns max-width, inline padding and centering via
   `margin-inline:auto`. Those classes set max-width but NOT width;
   Divi's `.et_pb_row` defaults to `width:80%`, which would shrink
   the row. So set `width:100%` (the container's max-width still
   caps it) but DO NOT touch max-width — overriding it would break
   the container classes that live on this same element. */
.et_pb_row.et_block_row {
  width: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Divi's `.et_pb_section .et_pb_row` (specificity 0,2,0) sets
   max-width:1080px and beats a bare container class (0,1,0) that
   sits on the same row. Re-assert each container/component wrapper's
   max-width + centering with matching specificity + !important so
   the port's container classes win. Values mirror utilities.css /
   the component stylesheets. */
.et_pb_row.container {
  max-width: var(--w-reg) !important;
  margin-inline: auto !important;
  padding-inline: var(--s-6) !important;
}
.et_pb_row.container-narrow {
  max-width: var(--w-narrow) !important;
  margin-inline: auto !important;
  padding-inline: var(--s-6) !important;
}
.et_pb_row.container-wide {
  max-width: var(--w-wide) !important;
  margin-inline: auto !important;
  padding-inline: var(--s-6) !important;
}
/* hero-simple centres its own narrower content wrapper. */
.et_pb_row.hero-simple__content {
  max-width: 880px !important;
  margin-inline: auto !important;
  padding-inline: var(--s-6) !important;
}

/* --- Columns: undo Divi's legacy float + percentage width -------
   Divi legacy columns float left at e.g. 66.6% / 33.3% with a
   5.5% gutter. When the parent row is a CSS grid (.contact-main__grid,
   .cta-band__inner) the grid must size the children, so the
   float/width/margin Divi sets is stripped here. */
.et_pb_row.et_block_row > .et_pb_column.et_block_column {
  float: none !important;
  width: auto !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
}

/* A lone full-width column still spans the row. */
.et_pb_row.et_block_row > .et_pb_column.et_block_column.et_pb_column_4_4 {
  width: 100% !important;
}

/* --- Text modules: strip Divi's module margin/padding -----------
   .et_pb_text adds bottom margin; the component CSS controls the
   spacing between headings, paragraphs and lists. */
.et_pb_text.et_block_module {
  margin-bottom: 0;
  padding: 0;
}

/* Divi wraps text-module content in an inner .et_pb_text_inner div.
   `display:contents` removes that div from the box tree, so the
   module_class on .et_pb_text becomes the DIRECT parent of the
   authored HTML. This is essential for component CSS that targets
   direct children — e.g. `.contact-info__list > div`,
   `.contact-info__hours ul`, `.cta-band__text > *` — which would
   otherwise match the wrapper div instead of the real markup. */
.et_pb_text.et_block_module > .et_pb_text_inner {
  display: contents;
}

/* Divi skins headings INSIDE a text module with its own font-size /
   line-height / color / margin (e.g. `.et_pb_text h1`), which would
   override the display utility classes (.display-lg, .display-md, ...)
   that the port places on the module_class wrapper. When a text
   module wraps a single heading, make that heading inherit the
   module's typography so the module_class wins.

   NOTE: this is scoped to headings only — text modules whose content
   is a paragraph/list with its own component classes (e.g.
   .contact-info__hours holding a .eyebrow <p> and a <ul>) are left
   alone so those component rules keep applying. */
.et_pb_text.et_block_module > .et_pb_text_inner > h1:only-child,
.et_pb_text.et_block_module > .et_pb_text_inner > h2:only-child,
.et_pb_text.et_block_module > .et_pb_text_inner > h3:only-child,
.et_pb_text.et_block_module > .et_pb_text_inner > h4:only-child {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  text-transform: inherit !important;
  margin: 0 !important;
}

/* --- Headline typography parity with the homepage ----------------
   The :only-child inherit rule above breaks down when the heading
   contains inline siblings (e.g. <h2>Title <span>accent</span></h2>)
   or sits inside a code module rather than a text module. In those
   cases Divi's `h1{font-size:30px}` / `h2{font-size:26px}` defaults
   leak through.

   Lock the display-class sizes explicitly on any heading inside an
   interior section so all inner-page headlines render at the same
   font, weight, and clamp-scaled size as the homepage hero. */
.et_pb_section .display-xl,
.et_pb_section .display-xl h1,
.et_pb_section .display-xl h2,
.et_pb_section .display-xl h3 {
  font-family: var(--f-display) !important;
  font-size: clamp(56px, 8vw, 128px) !important;
  font-weight: 900 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.025em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
}

.et_pb_section .display-lg,
.et_pb_section .display-lg h1,
.et_pb_section .display-lg h2,
.et_pb_section .display-lg h3 {
  font-family: var(--f-display) !important;
  font-size: clamp(44px, 6vw, 88px) !important;
  font-weight: 900 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
}

.et_pb_section .display-md,
.et_pb_section .display-md h1,
.et_pb_section .display-md h2,
.et_pb_section .display-md h3 {
  font-family: var(--f-display) !important;
  font-size: clamp(32px, 4.2vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* display-sm had NO bridge lock, so its headings fell through to the
   heading reset `line-height: inherit` above. On code-module headlines
   (e.g. .pillar-card__headline, which is .display-sm inside a Divi code
   module) `inherit` resolves to a fixed-px ancestor value (~26px) that
   is SMALLER than the 40px display font — so every wrapped line overlaps
   the one above it. Pin the size + a ratio line-height like the other
   display locks. Margin is left to the component (card headlines own
   their own top gap), unlike the section-title md/lg locks. */
.et_pb_section .display-sm,
.et_pb_section .display-sm h1,
.et_pb_section .display-sm h2,
.et_pb_section .display-sm h3 {
  font-family: var(--f-display) !important;
  font-size: clamp(24px, 2.8vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
}

/* --- Code module: transparent wrapper ---------------------------
   The contact form lives in a single Divi Code module. */
.et_pb_code.et_block_module {
  margin-bottom: 0;
  padding: 0;
}

/* --- Button module wrapper --------------------------------------
   Divi wraps each button in .et_pb_button_module_wrapper; the
   component .btn classes (applied via module_class) own the skin. */
.et_pb_button_module_wrapper.et_block_module {
  margin-bottom: 0;
  padding: 0;
}

/* --- Hero CTAs: lay out in a row on wider screens ---------------
   Divi emits each button in its own block-level
   .et_pb_button_module_wrapper div, which causes consecutive
   buttons to stack vertically by default. The Eleventy hero
   templates wrap CTAs in a `.hero-image__actions` flex container,
   but the interior-page pipeline doesn't emit that wrapper — so on
   live pages the two hero CTAs sit in a column.

   Force inline-block on the wrappers inside hero sections at 640px+
   so they sit side-by-side with a gap; under 640px they stack again
   for better tap targets.

   Why also `max-width: max-content` on the inner button? Divi's own
   rule `.et_pb_module.et_pb_button:not(.et_block_module) { max-width: max-content }`
   shrink-wraps buttons to their text — but the `:not(.et_block_module)`
   excludes our buttons (they all carry .et_block_module under the new
   block renderer), so they default to filling the wrapper width. Add
   the max-content rule back explicitly so each button is sized to its
   own label. */
@media (min-width: 640px) {
  .et_pb_section.hero-image .et_pb_button_module_wrapper,
  .et_pb_section.hero-simple .et_pb_button_module_wrapper {
    display: inline-block;
    width: auto;
    max-width: max-content;
    margin-right: 14px;
    vertical-align: top;
  }
  .et_pb_section.hero-image .et_pb_button_module_wrapper:last-child,
  .et_pb_section.hero-simple .et_pb_button_module_wrapper:last-child {
    margin-right: 0;
  }
  /* Force identical box on both buttons regardless of Divi's per-skin
     padding/line-height drift. Explicit height + flex centering means
     the gold and outline buttons are visually identical in size. */
  .et_pb_section.hero-image .et_pb_button.btn--lg,
  .et_pb_section.hero-simple .et_pb_button.btn--lg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    max-width: max-content;
  }
}

/* --- Misapplied wrapper classes on Divi columns -----------------
   The Eleventy structure for sections like timeline, team, nonprofit-grid
   and how-we-decide is:

     <section>
       <div class="container">
         <header class="*__head">           ← capped at 760px (typographic)
           <eyebrow><h2><rule>
         </header>
         <ol class="*__list">                ← spans the container
         </ol>
       </div>
     </section>

   Divi flattens this into one section > one row > one column. The agent
   placed the `*__head` class on the COLUMN so the head's typography
   would render — but the cap then constrains the whole column,
   squishing the list/grid that should span the full container width.

   Strip the cap on the column wrapper. The eyebrow/h2 inside might run
   a bit wider, but heading copy is short and a 1200px container vs a
   760px cap is not a readability regression in practice. The list/grid
   sibling regains its full container width, which is the load-bearing
   fix. */
.et_pb_column.timeline__head,
.et_pb_column.team__head,
.et_pb_column.pillars__head,
.et_pb_column.nonprofit-grid__head,
.et_pb_column.cares-events__head,
.et_pb_column.how-we-decide__head {
  max-width: none !important;
}

/* --- Pillars head: restore the gap above the card grid ------------
   `.pillars__head` (component CSS: margin-bottom: var(--s-8)) lands on
   a Divi CODE module on /why-colyer/. The bridge's
   `.et_pb_code.et_block_module { margin-bottom: 0 }` reset (0,2,0)
   zeroes that gap, so the headline — plus its descending gold brush
   stroke — collides with the top of the pillar cards. Re-assert the
   bottom margin at higher specificity. Covers the code- and text-module
   placements. */
.et_pb_section .et_pb_code.pillars__head,
.et_pb_section .et_pb_text.pillars__head {
  margin-bottom: var(--s-8) !important;
}

/* The cares-intro 2-column grid lives on the row class
   `.cares-intro__grid` and Divi places head + body into its tracks.
   `.cares-intro__body` legitimately caps its line-length at 60ch via the
   component CSS — but on a Divi column that cap also fights the grid
   track sizing (765px → 480px). Drop the column-level cap; the body
   text inside is short paragraphs that read fine at track width, and
   the eye is drawn left to the head copy regardless. */
.et_pb_column.cares-intro__body {
  max-width: none !important;
}

/* --- Double-wrapped grid containers -----------------------------
   When the source authoring applied a grid CSS class to BOTH the
   outer Divi text-module wrapper AND the inner <ul> (or <ol>), the
   outer becomes a redundant grid container with one item (the inner
   list). The inner list is then placed into a single cell of the outer
   grid, which constrains the cards to a fraction of their intended
   width (e.g. nonprofit cards rendered at 126px instead of 442px;
   practice-process steps rendered at ~120px each instead of full track).

   Neutralize the outer wrapper's display so only the inner element
   acts as the grid/flex container. */
.et_pb_text.nonprofit-grid__list,
.et_pb_code.practice-process,
.et_pb_code.fee-compare,
.et_pb_code.tactic-list,
.et_pb_code.cares-list,
.et_pb_text.cares-nominate__email-row {
  display: block !important;
}

/* --- Horizontal rules / break lines: generous space BENEATH -------
   Every break line on an interior page gets a generous gap UNDERNEATH
   the line. The rule "ends" the previous block; the breathing room
   belongs to the next.

   Targets BOTH wrapper patterns the build pipeline produces:
   (a) `.et_pb_text.rule-gold`     — text module with the class directly
   (b) `.et_pb_code.rule-gold`     — code module with the class directly
   (c) `.et_pb_code.rule-gold-wrap` — code module wrapping a `<div class="rule-gold">`

   Plus the inner `<div class="rule-gold">` itself for cases where the
   gap needs to be on the actual visible bar element (e.g. when the
   wrapper is inside a 2-col grid track and only the inner element
   pushes the next sibling). */
.et_pb_section.et_block_section .et_pb_text.rule-gold,
.et_pb_section.et_block_section .et_pb_code.rule-gold,
.et_pb_section.et_block_section .et_pb_code.rule-gold-wrap,
.et_pb_section.et_block_section .et_pb_text.rule-teal,
.et_pb_section.et_block_section .et_pb_code.rule-teal,
.et_pb_section.et_block_section .et_pb_code.rule-teal-wrap {
  margin-top: 24px !important;
  margin-bottom: 48px !important;
}
.et_pb_section.et_block_section .rule-gold,
.et_pb_section.et_block_section .rule-teal {
  margin-bottom: 48px !important;
}
.et_pb_section.et_block_section .et_pb_text.rule,
.et_pb_section.et_block_section .et_pb_code.rule,
.et_pb_section.et_block_section .et_pb_text.rule-strong,
.et_pb_section.et_block_section .et_pb_code.rule-strong {
  margin-top: 32px !important;
  margin-bottom: 56px !important;
}
.et_pb_section.et_block_section .rule,
.et_pb_section.et_block_section .rule-strong {
  margin-bottom: 56px !important;
}

/* --- Cares hero scrim: restore the dark gradient overlay ---------
   On the cares hero (and any hero authored as variant-b where the
   scrim is a separate text module sibling), the .hero-image__scrim
   class lands on a Divi text module wrapper. Force it to be an
   absolutely-positioned full-bleed gradient layer above the
   .shot--dark backdrop, matching the Eleventy reference. */
.et_pb_section.hero-image .et_pb_text.hero-image__scrim {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(160deg, rgba(14,12,25,.78) 0%, rgba(22,47,76,.52) 55%, rgba(14,12,25,.82) 100%) !important;
  pointer-events: none;
}

/* --- bio-long pull-quote: neutralize outer wrapper double-styling -
   The Eleventy markup is a single <figure class="bio-long__pullquote">.
   The WP pipeline placed that same class on the outer .et_pb_text
   AND kept the inner <figure>, so both elements drew the left rail
   and padding — a doubled visual. Strip the outer's pullquote skin;
   the inner figure retains the intended styles. */
.et_pb_text.bio-long__pullquote {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- wpautop neutralization inside card components ---------------
   WordPress's `wpautop` filter runs on Divi text-module HTML and
   inserts `<br/>` between sibling inline/block elements and wraps
   bare spans in `<p>` tags. This destroys the grid layout of cards
   that have multiple direct-child spans / headings / paragraphs.

   Affected: practice-card, how-we-decide__item, victory-card,
   review-card, case-card, contact-info__map. The fix is two parts:
   (a) hide the phantom <br/> tags, (b) make the auto-wrapping <p>
   transparent so its children become direct grid children again.

   IMPORTANT: only the PHANTOM wpautop wrappers must be flattened — those
   are classless `<p>`. The cards' real content paragraphs carry component
   classes (`.case-card__amount`, `.victory-card__summary`,
   `.review-card__body`, …) and MUST remain real grid items, or they
   collapse and overlap. So scope (b) to `> p:not([class])`. */
.practice-card__link br,
.how-we-decide__item br,
.victory-card br,
.review-card br,
.case-card br,
.contact-info__map br {
  display: none;
}
.practice-card__link > p:not([class]),
.how-we-decide__item > p:not([class]),
.victory-card > p:not([class]),
.review-card > p:not([class]),
.case-card > p:not([class]),
.contact-info__map > p:not([class]),
.et_pb_text.contact-info__map > .et_pb_text_inner > p:not([class]) {
  display: contents;
}

/* --- Hero-simple text alignment ----------------------------------
   .hero-simple { text-align: center } sits on the section. Divi emits
   per-instance `.et_pb_text_N { text-align: start }` for every text
   module which beats inheritance, so the eyebrow / title / lede all
   render left-aligned instead of centered. Force center on every text
   module inside .hero-simple so it matches the Eleventy reference. */
.et_pb_section.hero-simple .et_pb_text,
.et_pb_section.hero-simple .et_pb_text > .et_pb_text_inner,
.et_pb_section.hero-simple .et_pb_button_module_wrapper {
  text-align: center !important;
}

/* --- Contact-info column: restore the cream box's inner padding --
   The .contact-info partial maps to an entire Divi column (the right
   1/3 of the contact-main grid). The bridge's
   `.et_pb_row.et_block_row > .et_pb_column.et_block_column { padding: 0 !important }`
   zeros every column's padding to keep grid layouts clean — but the
   contact-info component needs its 48v/32h inner padding so the
   eyebrow / map / address / hours don't sit flush against the teal
   left rail. Override at matching specificity. */
.et_pb_row.et_block_row > .et_pb_column.et_block_column.contact-info {
  padding: var(--s-7) var(--s-6) !important;
}

/* --- .hero-simple__inner: alias to hero-simple__content ----------
   The faq, reviews, results generators emit
   ROW('container-wide hero-simple__inner', ...) but no CSS targets
   `.hero-simple__inner` — so the hero content row inherits the
   bridge's `.container-wide` 1440px cap and the title sprawls.
   Mirror the `.hero-simple__content` rules so the hero content
   sits in an 880px column like the Eleventy reference. */
.et_pb_row.hero-simple__inner {
  max-width: 880px !important;
  margin-inline: auto !important;
  padding-inline: var(--s-6) !important;
}

/* --- /practice-areas/ practice-band head: cap eyebrow + h2 -------
   Eleventy wraps the eyebrow + h2 + lede in a `<header class="practice-band__head">`
   that caps all three at 820px. The WP push placed the head class
   only on the lede module; the eyebrow + h2 modules sit bare and
   sprawl to the full container-wide (1440px). Cap them here so
   the heading group reads as a tight block. */
.et_pb_section.practice-band .et_pb_text.eyebrow,
.et_pb_section.practice-band .et_pb_text.display-lg {
  max-width: 820px;
}

/* --- shot__tag placeholder typography -----------------------------
   The placeholder note (e.g. "PLACEHOLDER: Tony with a youth team")
   gets wrapped in an <et_pb_text> with an inner <p><span>…</span></p>.
   Without overrides the <p> picks up Divi's default body sizing and
   the placeholder visually dominates the hero. Force the inner <p>
   and <span> to inherit the small mono shot__tag typography. */
.et_pb_text.shot__tag p,
.et_pb_text.shot__tag span {
  font: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Hero-image: universal dark backdrop ------------------------
   Eleventy:
     <section class="hero-image">
       <div class="hero-image__media shot shot--dark">     ← dark gradient backdrop
         <div class="hero-image__scrim"></div>             ← extra contrast scrim
       </div>
       <div class="container-wide hero-image__content">    ← title etc, z:2
       </div>
     </section>

   The three Phase-2 agents authored this hero THREE different ways:
   (a) About:          row > column > et_pb_code  carries `.shot--dark`
   (b) Cares:          row                          carries `.shot--dark`
   (c) Practice areas: row > column > et_pb_text  carries `.shot--dark`

   Earlier bridge rules only targeted variant (a) via the
   `.hero-image__media-row` row class. Variants (b) and (c) kept their
   default static positioning, the `.shot--dark` element collapsed to
   1px, and the section bg stayed Divi-default white — leaving the
   `.hero-image__title` (which is white-on-dark by design) INVISIBLE on
   about + cares.

   Universal fix: target `.shot--dark` directly. Wherever it sits in
   the hero structure, position it absolutely to fill the section as
   the backdrop, with the dark gradient bg still coming from the
   `.shot--dark` rules in base.css. */
.et_pb_section.hero-image {
  position: relative !important;
  min-height: min(60vh, 640px) !important;
  overflow: hidden !important;
}
.et_pb_section.hero-image .shot--dark {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* If the agent wrapped .shot--dark inside a row (variants a/c) the row
   itself needs to fill the section too, otherwise its column constraints
   keep the .shot--dark to the row's footprint. */
.et_pb_section.hero-image > .et_pb_row.hero-image__media-row,
.et_pb_section.hero-image > .et_pb_row.hero-image__media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.et_pb_section.hero-image > .et_pb_row.hero-image__media-row > .et_pb_column,
.et_pb_section.hero-image > .et_pb_row.hero-image__media > .et_pb_column {
  height: 100% !important;
}
/* Hero-image PHOTO variant (estate-planning-probate etc): the code module
   wraps a real <img> + .hero-image__scrim. The img + scrim are positioned
   absolute with inset:0 + width:100% + height:100%, so they need .hero-image__media
   itself to be their containing block. Divi inserts an `.et_pb_code_inner` between
   .et_pb_code (the module wrapper that carries the .hero-image__media class) and
   the actual children, and that inner defaults to `position: relative` + `height: 0`
   (no in-flow content — all its kids are absolute). The img then sizes to a 0px
   containing block and the hero collapses.

   Same fix as the meet-tony frame: force the inner static so the absolute children's
   containing block walks up to .et_pb_code.hero-image__media (which IS the right
   size — absolute, inset:0, filling the .hero-image__media-row that fills the
   section). */
.et_pb_section.hero-image .et_pb_code.hero-image__media > .et_pb_code_inner {
  position: static !important;
}

/* Content row above the backdrop */
.et_pb_section.hero-image > .et_pb_row.hero-image__content {
  position: relative !important;
  z-index: 2 !important;
}

/* --- Meet-tony figure: restore padding + frame anchoring --------
   Eleventy `<figure class="meet-tony__figure">` carries
   `padding: 20px 20px 0 0` so the gold `.meet-tony__frame` peeks out
   at bottom-left of the portrait. The Divi column doesn't inherit
   that padding, so the frame and portrait sit edge-to-edge with no
   peek.

   Also: Divi wraps the `<span class="meet-tony__frame">` inside an
   `et_pb_code` module which Divi makes `position: relative`. That
   makes the et_pb_code the nearest positioned ancestor of the
   absolute span — and the et_pb_code collapses to ~5px of content
   height. The frame's `inset: 0 0 20 20` then sizes to 5px instead of
   the figure's full height.

   Fix: restore the figure padding on the column AND force the
   et_pb_code wrapper to `position: static` so the frame's positioning
   anchor walks up to the column (which is already position:relative).

   Specificity note: the earlier column-strip rule
   `.et_pb_row.et_block_row > .et_pb_column.et_block_column { padding: 0 !important }`
   is (0,4,1), so this restore rule needs to match or beat that. We
   anchor on the row+column chain to land at (0,5,1). */
.et_pb_row.et_block_row > .et_pb_column.et_block_column.meet-tony__figure {
  padding: 20px 20px 0 0 !important;
  position: relative !important;
}
.et_pb_column.meet-tony__figure > .et_pb_code.meet-tony__frame-wrap,
.et_pb_column.meet-tony__figure > .et_pb_module.meet-tony__frame-wrap {
  position: static !important;
}
/* Divi also wraps code-module content in an inner `.et_pb_code_inner`
   div that's `position: relative` by default. When the inner has zero
   height (as here — the <span> is the only child and it's positioned
   absolute), it still becomes the absolute frame's containing block.
   Force that inner static too so the frame's positioning anchor walks
   all the way up to the `.meet-tony__figure` column. */
.et_pb_column.meet-tony__figure > .et_pb_code.meet-tony__frame-wrap > .et_pb_code_inner {
  position: static !important;
}

/* --- bio-long head h2 in a narrow sticky column -----------------
   `.bio-long__head` lives in the 5fr Divi column (~546px). Its h2 is
   `.display-lg` (clamp ~74–96px). At that font size each word wraps to
   its own line in 546px, producing an 8-line vertical-poem rendering.
   Scale the h2 down so the sticky head reads as a sentence, not a
   stanza. Tuned vs the Eleventy reference, which renders the h2 at
   roughly 56–64px in the same column width. */
.et_pb_column.bio-long__head h2,
.et_pb_column.bio-long__head .et_pb_text h2 {
  font-size: clamp(40px, 4.4vw, 60px) !important;
  line-height: 1.04 !important;
}

/* --- Button skins win over Divi's button defaults ---------------
   Divi's `.et_pb_button` base + per-instance `preset--module--divi-button--default`
   set bg + border + padding + font-size and out-cascade the component
   `.btn--primary` / `.btn--secondary` / `.btn--outline*` skins applied
   via `module_class`. Re-assert each skin with !important on the
   Divi button selector so the design-system colors and sizing win.

   These mirror the rules in src/styles/components/buttons.css; if you
   change colors there, update here too.

   SPECIFICITY NOTE (2026-05-27 fix): Divi emits a dynamic rule
   `body #page-container .et_pb_section .preset--module--divi-button--default { color: #FFF !important }`
   at (0,1,2,1) which BEAT the previous bridge selectors at (0,0,2,0)
   on specificity — so .btn--primary buttons rendered white-on-gold
   instead of navy-on-gold across all interior pages. Prefixing each
   selector with `body #page-container .et_pb_section` raises this
   bundle to (0,1,3,1) which beats Divi's ID rule, and !important ties
   are resolved in our favor too. */
body #page-container .et_pb_section .et_pb_button.btn,
body #page-container .et_pb_section .et_pb_button.btn:hover {
  border-style: solid !important;
  border-width: 2px !important;
  border-radius: 6px !important;
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease !important;
  line-height: 1.2 !important;
}
body #page-container .et_pb_section .et_pb_button.btn--sm  { padding: 8px 18px !important;  font-size: 14px !important; }
body #page-container .et_pb_section .et_pb_button.btn      { padding: 12px 26px !important; font-size: 15px !important; }
body #page-container .et_pb_section .et_pb_button.btn--lg  { padding: 16px 32px !important; font-size: 17px !important; }
body #page-container .et_pb_section .et_pb_button.btn--primary {
  background-color: var(--c-gold) !important;
  background-image: none !important;
  color: var(--c-navy-deep) !important;
  border-color: var(--c-gold) !important;
  box-shadow: var(--sh-gold) !important;
}
body #page-container .et_pb_section .et_pb_button.btn--primary:hover {
  color: var(--c-paper) !important;
  background-color: var(--c-gold-deep) !important;
  border-color: var(--c-gold-deep) !important;
}
body #page-container .et_pb_section .et_pb_button.btn--secondary {
  background-color: var(--c-navy-deep) !important;
  background-image: none !important;
  color: var(--c-paper) !important;
  border-color: var(--c-navy-deep) !important;
}
body #page-container .et_pb_section .et_pb_button.btn--secondary:hover {
  background-color: var(--c-teal-deep) !important;
  border-color: var(--c-teal-deep) !important;
}
body #page-container .et_pb_section .et_pb_button.btn--outline {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--c-paper) !important;
  border-color: var(--c-paper) !important;
}
body #page-container .et_pb_section .et_pb_button.btn--outline:hover {
  background-color: var(--c-paper) !important;
  color: var(--c-navy-deep) !important;
}
body #page-container .et_pb_section .et_pb_button.btn--outline-navy {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--c-navy-deep) !important;
  border-color: var(--c-navy-deep) !important;
}
body #page-container .et_pb_section .et_pb_button.btn--outline-navy:hover {
  background-color: var(--c-navy-deep) !important;
  color: var(--c-paper) !important;
}
body #page-container .et_pb_section .et_pb_button.btn--ghost {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--c-navy-deep) !important;
  border-color: transparent !important;
  padding-inline: 0 !important;
}
body #page-container .et_pb_section .et_pb_button.btn--ghost:hover {
  color: var(--c-teal-deep) !important;
}
/* --- CTA band on navy: buttons need light skins -----------------
   cta-band.css INTENDS `.cta-band--navy .btn--secondary` to render
   GOLD and `.btn--outline-navy` to render WHITE outline — but those
   component rules (0,2,0, no !important) lose to the generic bridge
   button skins above (body #page-container .et_pb_section .et_pb_button
   .btn--secondary, 0,1,3,1 + !important), which paint the button
   navy-on-navy = invisible on the navy band. Re-assert the light skins
   with one extra class (.cta-band--navy → 0,1,4,1) so they win. */
body #page-container .et_pb_section.cta-band--navy .et_pb_button.btn--secondary {
  background-color: var(--c-gold) !important;
  background-image: none !important;
  color: var(--c-navy-deep) !important;
  border-color: var(--c-gold) !important;
  box-shadow: var(--sh-gold) !important;
}
body #page-container .et_pb_section.cta-band--navy .et_pb_button.btn--secondary:hover {
  background-color: var(--c-gold-deep) !important;
  color: var(--c-paper) !important;
  border-color: var(--c-gold-deep) !important;
}
body #page-container .et_pb_section.cta-band--navy .et_pb_button.btn--outline-navy {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--c-paper) !important;
  border-color: var(--c-paper) !important;
}
body #page-container .et_pb_section.cta-band--navy .et_pb_button.btn--outline-navy:hover {
  background-color: var(--c-paper) !important;
  color: var(--c-navy-deep) !important;
  border-color: var(--c-paper) !important;
}

/* Divi inserts an ::after arrow pseudo on its buttons; suppress it so
   the component arrow span (or text arrow already in the label) is the
   only one rendered. */
body #page-container .et_pb_section .et_pb_button.btn::after { display: none !important; content: none !important; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;

  /* Sweep mechanic: bg-image is a single-color block painted from the
     left edge; bg-size animates 0% → 100% on hover so the color wipes
     left-to-right behind the text. */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-size 360ms var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover  { transform: translateY(-1px); background-size: 100% 100%; }
.btn:active { transform: translateY(0); }

.btn--primary {
  background-color: var(--c-gold);
  background-image: linear-gradient(var(--c-gold-deep), var(--c-gold-deep));
  color: var(--c-navy-deep);
  border-color: var(--c-gold);
  box-shadow: var(--sh-gold);
}
.btn--primary:hover { color: var(--c-paper); border-color: var(--c-gold-deep); }

.btn--secondary {
  background-color: var(--c-navy-deep);
  background-image: linear-gradient(var(--c-navy), var(--c-navy));
  color: var(--c-paper);
  border-color: var(--c-navy-deep);
}
.btn--secondary:hover { border-color: var(--c-navy); }

.btn--outline {
  background-color: transparent;
  background-image: linear-gradient(var(--c-paper), var(--c-paper));
  color: var(--c-paper);
  border-color: var(--c-paper);
}
.btn--outline:hover { color: var(--c-navy-deep); }

.btn--outline-navy {
  background-color: transparent;
  background-image: linear-gradient(var(--c-navy-deep), var(--c-navy-deep));
  color: var(--c-navy-deep);
  border-color: var(--c-navy-deep);
}
.btn--outline-navy:hover { color: var(--c-paper); }

/* Ghost is a link with a gold underline — sweep doesn't suit it; keep
   the existing underline-grow micro-interaction instead. */
.btn--ghost {
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--c-navy-deep);
  border-bottom: 2px solid var(--c-gold);
  border-radius: 0;
  overflow: visible;
}
.btn--ghost:hover { color: var(--c-gold-deep); transform: none; }

.btn--lg { padding: 18px 28px; font-size: 17px; }
.btn--sm { padding: 10px 16px; font-size: 13px; }

.btn__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: color var(--dur-fast), border-color var(--dur-fast); }
  .btn:hover { transform: none; background-size: 100% 100%; }
}

.cta-band { position: relative; overflow: hidden; }
.cta-band__inner {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr auto;
  align-items: center;
}
@media (max-width: 900px) {
  .cta-band__inner { grid-template-columns: 1fr; text-align: left; }
}

.cta-band__title { margin: 8px 0 0; }
.cta-band__sub   { margin: 14px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.6; }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Variants */
.cta-band--gold {
  background: var(--c-gold);
  color: var(--c-navy-deep);
}
.cta-band--gold .cta-band__title,
.cta-band--gold .eyebrow { color: var(--c-navy-deep); }
.cta-band--gold::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 22px,
      rgba(22,47,76,.04) 22px 23px);
}

.cta-band--navy {
  background: var(--c-navy-deep);
  color: var(--c-paper);
}
.cta-band--navy .cta-band__title { color: var(--c-paper); }
.cta-band--navy .eyebrow { color: var(--c-gold); }
.cta-band--navy .btn--secondary { background: var(--c-gold); color: var(--c-navy-deep); border-color: var(--c-gold); }
.cta-band--navy .btn--secondary:hover { background: var(--c-gold-deep); color: var(--c-paper); border-color: var(--c-gold-deep); }
.cta-band--navy .btn--outline-navy { color: var(--c-paper); border-color: var(--c-paper); }
.cta-band--navy .btn--outline-navy:hover { background: var(--c-paper); color: var(--c-navy-deep); }

.cta-band--teal {
  background: var(--c-teal);
  color: var(--c-navy-deep);
}
.cta-band--teal .cta-band__title { color: var(--c-navy-deep); }
.cta-band--teal .eyebrow { color: var(--c-navy-deep); }

/* ============================================================
   Hero video — full-screen, vertically-centered content,
   bottom reviews bar overlay, teal-leaning accents.
   ============================================================ */

.hero-video {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  color: var(--c-paper);
  overflow: hidden;
  margin-top: calc(-1 * var(--header-height, 96px));
  padding-top: var(--header-height, 96px);
}

.hero-video__media {
  position: absolute; inset: 0; z-index: 0;
}
.hero-video__poster,
.hero-video__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-video__video {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.hero-video.is-video-ready .hero-video__video { opacity: 1; }

.hero-video__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(160deg, rgba(14,12,25,.78) 0%, rgba(22,47,76,.52) 55%, rgba(14,12,25,.82) 100%),
    linear-gradient(180deg, rgba(14,12,25,.20), rgba(14,12,25,.72));
}

/* Content row — vertically centered in the available 1fr space */
.hero-video__content {
  grid-row: 1;
  align-self: center;
  position: relative; z-index: 2;
  padding-block: clamp(48px, 6vh, 96px);
  max-width: 1100px;
}

.hero-video__eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hero-video__eyebrow-bar {
  width: 56px; height: 2px;
  background: var(--c-teal);
  flex-shrink: 0;
}
.hero-video__eyebrow {
  color: var(--c-teal);
  margin: 0;
}
.hero-video__title {
  margin-top: 22px;
  color: var(--c-paper);
  max-width: 18ch;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.75), 0 1px 1px rgba(0, 0, 0, 0.65);
}
.hero-video__title-line { display: inline; }
.hero-video__title-accent {
  font-style: normal;
  color: var(--c-teal);
}

/* Hide typing-target text until JS clears it — only when JS is enabled,
   so NoScript users still see the static title. */
html.js .hero-video__title [data-type-line] { visibility: hidden; }
html.js .hero-video__title.is-typing-active [data-type-line],
html.js .hero-video__title.is-typed [data-type-line] { visibility: visible; }

/* Blinking caret while a line is being typed */
.hero-video__title-line.is-typing::after,
.hero-video__title-accent.is-typing::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.85em;
  margin-left: 6px;
  background: currentColor;
  vertical-align: -0.06em;
  animation: hero-cursor 0.85s step-end infinite;
}
@keyframes hero-cursor {
  50% { opacity: 0; }
}

.hero-video__lead {
  margin-top: 24px;
  max-width: 58ch;
  font-size: 19px;
  line-height: 1.55;
  color: rgba(255,255,253,.92);
}
.hero-video__lead-em {
  color: var(--c-teal);
  font-weight: 800;
}
.hero-video__actions {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ============================================================
   Hero entrance choreography
   - title types in (handled by typing.js, starts ~450ms)
   - eyebrow / lede / actions / reviews all wait for `.hero-typed`,
     then stagger in
   `.hero-typed` is added to the hero section by typing.js after the
   typing sequence (or immediately, in reduced-motion mode).
   ============================================================ */
.hero-video__eyebrow-row,
.hero-video__lead,
.hero-video__actions,
.hero-video__reviews {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 800ms var(--ease-out),
    transform 800ms var(--ease-out);
}
.hero-video.hero-typed .hero-video__eyebrow-row {
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
}
.hero-video.hero-typed .hero-video__lead {
  opacity: 1;
  transform: none;
  transition-delay: 180ms;
}
.hero-video.hero-typed .hero-video__actions {
  opacity: 1;
  transform: none;
  transition-delay: 360ms;
}
.hero-video.hero-typed .hero-video__reviews {
  opacity: 1;
  transform: none;
  transition-delay: 540ms;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video__eyebrow-row,
  .hero-video__lead,
  .hero-video__actions,
  .hero-video__reviews {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Reviews bar — overlaid at the bottom of the hero
   ============================================================ */
.hero-video__reviews {
  grid-row: 2;
  position: relative; z-index: 2;
  padding-block: 24px 28px;
}

.hero-reviews {
  background: rgba(14, 12, 25, .55);
  border: 1px solid rgba(71, 155, 190, .35);
  border-top: 2px solid var(--c-teal);
  backdrop-filter: blur(10px);
  padding: 20px 24px 22px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "head head more"
    "list list list";
  column-gap: 32px;
  row-gap: 16px;
}
@media (max-width: 900px) {
  .hero-reviews {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "list"
      "more";
  }
}

/* Header strip — stars + rating + count, top-left */
.hero-reviews__head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-reviews__head-stars {
  display: inline-flex; gap: 2px;
  color: var(--c-teal);
}
.hero-reviews__head-star {
  width: 16px; height: 16px;
}
.hero-reviews__head-rating {
  font-family: var(--f-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-paper);
}
.hero-reviews__head-rating strong {
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0;
  margin-right: 4px;
}
.hero-reviews__head-count {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,253,.65);
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,253,.20);
}

/* "Read all reviews →" link */
.hero-reviews__more {
  grid-area: more;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-teal);
  white-space: nowrap;
  transition: color .2s ease;
}
.hero-reviews__more:hover { color: var(--c-paper); }
.hero-reviews__more-arrow {
  transition: transform .25s var(--ease-out);
  font-weight: 700;
}
.hero-reviews__more:hover .hero-reviews__more-arrow { transform: translateX(6px); }

/* 3-up review cards */
.hero-reviews__list {
  grid-area: list;
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 900px) { .hero-reviews__list { grid-template-columns: 1fr; gap: 12px; } }

.hero-review {
  display: grid; gap: 8px;
  padding: 14px 16px;
  background: rgba(255,255,253,.04);
  border-left: 2px solid var(--c-teal);
}
.hero-review__stars {
  display: inline-flex; gap: 1px;
  color: var(--c-teal);
}
.hero-review__star { width: 12px; height: 12px; }
.hero-review__quote {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,253,.88);
  margin: 0;
  font-style: italic;
  /* clamp to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-review__byline {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255,255,253,.62);
  margin: 0;
}
.hero-review__byline strong {
  color: var(--c-teal);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ============================================================
   Light overlay variant
   ============================================================ */
.hero-video--light .hero-video__scrim {
  background:
    linear-gradient(160deg, rgba(255,253,255,.84) 0%, rgba(255,253,255,.58) 50%, rgba(255,253,255,.86) 100%),
    linear-gradient(180deg, rgba(255,253,255,.30), rgba(255,253,255,.78));
}
.hero-video--light .hero-video__eyebrow      { color: var(--c-teal-deep, #2c7395); }
.hero-video--light .hero-video__eyebrow-bar  { background: var(--c-teal-deep, #2c7395); }
.hero-video--light .hero-video__title {
  color: var(--c-navy-deep);
  text-shadow: 0 3px 6px rgba(14, 12, 25, 0.40), 0 1px 1px rgba(14, 12, 25, 0.35);
}
.hero-video--light .hero-video__title-accent { color: var(--c-teal-deep, #2c7395); }
.hero-video--light .hero-video__lead         { color: rgba(14, 12, 25, .80); }
.hero-video--light .hero-video__lead-em      { color: var(--c-teal-deep, #2c7395); }

.hero-video--light .btn--outline {
  color: var(--c-navy-deep);
  border-color: var(--c-navy-deep);
}
.hero-video--light .btn--outline:hover {
  background: var(--c-navy-deep);
  color: var(--c-paper);
}

.hero-video--light .hero-reviews {
  background: rgba(255,253,255,.65);
  border-color: rgba(71, 155, 190, .50);
  border-top-color: var(--c-teal-deep, #2c7395);
}
.hero-video--light .hero-reviews__head-rating { color: var(--c-navy-deep); }
.hero-video--light .hero-reviews__head-count {
  color: var(--c-slate);
  border-left-color: rgba(14, 12, 25, .18);
}
.hero-video--light .hero-reviews__head-stars,
.hero-video--light .hero-reviews__more,
.hero-video--light .hero-review__byline strong,
.hero-video--light .hero-review__stars { color: var(--c-teal-deep, #2c7395); }
.hero-video--light .hero-reviews__more:hover { color: var(--c-navy-deep); }
.hero-video--light .hero-review {
  background: rgba(255,253,255,.55);
  border-left-color: var(--c-teal-deep, #2c7395);
}
.hero-video--light .hero-review__quote { color: rgba(14, 12, 25, .85); }
.hero-video--light .hero-review__byline { color: var(--c-slate); }

.hero-video__content { padding-inline: var(--s-6); }

.hero-image {
  position: relative;
  min-height: min(60vh, 640px);
  display: grid;
  isolation: isolate;
  color: var(--c-paper);
  overflow: hidden;
}

.hero-image__media {
  position: absolute; inset: 0; z-index: 0;
}

.hero-image__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(160deg, rgba(14,12,25,.78) 0%, rgba(22,47,76,.52) 55%, rgba(14,12,25,.82) 100%);
}

.hero-image__content {
  position: relative; z-index: 2;
  padding-block: clamp(64px, 8vh, 120px) clamp(72px, 10vh, 144px);
  padding-inline: var(--s-6);
  max-width: 920px;
}

.hero-image__crumbs {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-teal-soft);
  margin-bottom: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-image__crumbs a {
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast);
  color: inherit;
}

.hero-image__crumbs a:hover {
  border-bottom-color: var(--c-teal);
  color: var(--c-paper);
}

.hero-image__crumbs span[aria-hidden="true"] {
  margin: 0 8px;
  opacity: 0.6;
}

.hero-image__eyebrow {
  color: var(--c-gold);
}

.hero-image__title {
  margin-top: 16px;
  max-width: 18ch;
  color: var(--c-paper);
}

.hero-image__lede {
  margin-top: 20px;
  max-width: 56ch;
  color: rgba(255,255,253,.92);
  font-size: 18px;
  line-height: 1.55;
}

.hero-image__actions {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-simple {
  background: linear-gradient(160deg, var(--c-navy-deep) 0%, var(--c-navy) 100%);
  color: var(--c-paper);
  padding-block: var(--s-9) var(--s-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-simple::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at top right, rgba(71,155,190,.18), transparent 60%);
}

.hero-simple__content {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.hero-simple__crumbs {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-teal-soft);
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-simple__crumbs a {
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast);
  color: inherit;
}

.hero-simple__crumbs a:hover {
  border-bottom-color: var(--c-teal);
  color: var(--c-paper);
}

.hero-simple__crumbs span[aria-hidden="true"] {
  margin: 0 8px;
  opacity: 0.6;
}

.hero-simple__eyebrow {
  color: var(--c-gold);
}

.hero-simple__title {
  margin-top: 12px;
  color: var(--c-paper);
}

.hero-simple__lede {
  margin: 20px auto 0;
  max-width: 56ch;
  color: rgba(255,255,253,.92);
  font-size: 18px;
  line-height: 1.55;
}

.practice-band { background: var(--c-paper); }

.practice-band__head {
  max-width: 820px;
  margin-bottom: var(--s-8);
}
.practice-band__head .lede { margin-top: 16px; }

.practice-band__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1020px) { .practice-band__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .practice-band__grid { grid-template-columns: 1fr; } }

.practice-card {
  position: relative;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-gold);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.practice-card:nth-child(even) { border-left-color: var(--c-teal); }
.practice-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }

.practice-card__link {
  display: grid; gap: 14px;
  padding: 32px 28px 28px;
  height: 100%;
}

.practice-card__icon {
  width: 48px; height: 48px;
  color: var(--c-navy-deep);
  display: inline-grid; place-items: center;
  transition: transform var(--dur-med) var(--ease-out);
}
.practice-card:hover .practice-card__icon { transform: rotate(-6deg); color: var(--c-gold-deep); }
.practice-card:nth-child(even):hover .practice-card__icon { color: var(--c-teal-deep); }

.practice-card__name  { color: var(--c-navy-deep); }
.practice-card__blurb { color: var(--c-ink-2); line-height: 1.55; font-size: 15px; }

.practice-card__tagline {
  font-family: var(--f-mono); font-size: 12px;
  color: var(--c-teal-deep);
  letter-spacing: 0.04em;
  font-style: italic;
  padding-left: 12px;
  border-left: 2px solid var(--c-teal);
}

.practice-card__cta {
  margin-top: auto;
  font-family: var(--f-display); font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--c-navy-deep);
}
.practice-card:hover .practice-card__cta { color: var(--c-gold-deep); }

/* ============================================================
   Practice Grid — editorial 3×3, real photography backgrounds,
   duotone overlay, big numbers, diagonal hover sweep.
   ============================================================ */

.practice-grid {
  position: relative;
  background: var(--c-paper);
  color: var(--c-paper);
  padding-block: 0 0;
  overflow: hidden;
}

/* Full-width intro band — navy bg with white type, sits above the white grid */
.practice-grid__intro {
  position: relative;
  background: var(--c-navy-deep);
  padding-block: var(--s-9) calc(var(--s-9) / 2);
  overflow: hidden;
  isolation: isolate;
}

/* Subtle uniform dot field, drifting diagonally */
.practice-grid__intro::before {
  content: "";
  position: absolute;
  inset: -120px;
  background-image: radial-gradient(circle, rgba(255, 255, 253, .07) 1.4px, transparent 1.6px);
  background-size: 28px 28px;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  animation: pgrid-dots 26s linear infinite;
}
@keyframes pgrid-dots {
  from { transform: translate(0, 0); }
  to   { transform: translate(28px, 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .practice-grid__intro::before { animation: none; }
}

.practice-grid__intro > * { position: relative; z-index: 1; }
.practice-grid__rule {
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-gold) 30%, var(--c-teal) 70%, transparent 100%);
  opacity: .55;
}

/* Default dark intro band */
.practice-grid__head {
  color: var(--c-paper);
  position: relative;
}

/* Light intro variant — only the intro band flips to paper; the section
   itself (and the area around the cards) stays navy. */
.practice-grid--light-head .practice-grid__intro {
  background: var(--c-paper);
}
.practice-grid--light-head .practice-grid__head { color: var(--c-ink); }
.practice-grid--light-head .practice-grid__title { color: var(--c-navy-deep); }
.practice-grid--light-head .practice-grid__title-em { color: rgba(14, 12, 25, .35); }
.practice-grid--light-head .practice-grid__lede {
  color: var(--c-ink-2, var(--c-slate));
  border-left-color: var(--c-gold);
}
.practice-grid--light-head .practice-grid__counter {
  border-top-color: rgba(14, 12, 25, .14);
}
.practice-grid--light-head .practice-grid__counter-label { color: var(--c-slate); }
.practice-grid--light-head .practice-grid__rule { opacity: .35; }

/* ---- Section header — magazine spread ---- */
.practice-grid__head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
  margin-bottom: var(--s-8);
}
@media (max-width: 980px) {
  .practice-grid__head { grid-template-columns: 1fr; gap: 28px; }
}

.practice-grid__eyebrow {
  color: var(--c-gold);
  display: inline-flex; align-items: center; gap: 12px;
}
.practice-grid__eyebrow::before {
  content: "";
  width: 32px; height: 1.5px;
  background: var(--c-gold);
}

.practice-grid__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--c-paper);
  margin-top: 18px;
  text-transform: uppercase;
}
.practice-grid__title-em {
  color: rgba(255,255,253,.40);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: -0.01em;
}

.practice-grid__head-right {
  display: flex; flex-direction: column; gap: 28px;
  padding-bottom: 6px;
}

/* Tony headshot above the lede — teal inset border */
.practice-grid__headshot {
  margin: 0;
  position: relative;
  aspect-ratio: 800 / 759;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  border: 1px solid rgba(14, 12, 25, .12);
  background: var(--c-cream);
  cursor: pointer;
  transition:
    transform .55s var(--ease-out),
    box-shadow .55s var(--ease-out);
}
.practice-grid__headshot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transform: scale(1);
  filter: saturate(.92) contrast(1);
  transition:
    transform 1.1s var(--ease-out),
    filter .55s ease;
}
/* Inset teal frame — pseudo-element so it sits above the image */
.practice-grid__headshot::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 4px solid var(--c-teal);
  pointer-events: none;
  z-index: 3;
  transition:
    inset .55s var(--ease-out),
    border-color .35s ease;
}
/* Diagonal teal sweep on hover */
.practice-grid__headshot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(71,155,190,.22) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .9s var(--ease-out);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}

.practice-grid__headshot:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px rgba(14, 12, 25, .35);
}
.practice-grid__headshot:hover::before {
  inset: 6px;
  border-color: var(--c-teal-deep, #2c7395);
}
.practice-grid__headshot:hover img {
  transform: scale(1.05);
  filter: saturate(1.05) contrast(1.03);
}
.practice-grid__headshot:hover::after {
  transform: translateX(110%);
}

@media (max-width: 980px) {
  .practice-grid__headshot { max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .practice-grid__headshot,
  .practice-grid__headshot img,
  .practice-grid__headshot::after {
    transition: none !important;
    transform: none !important;
  }
}
.practice-grid__lede {
  color: rgba(255,255,253,.78);
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.55;
}
.practice-grid__counter {
  display: flex; align-items: baseline; gap: 18px;
}

/* Stylized teal diamond bullets — full-width text */
.practice-grid__bullets {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: grid;
  gap: 14px;
}
.practice-grid__bullets li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: rgba(255, 255, 253, .88);
  font-size: 17px;
  line-height: 1.45;
}
.practice-grid__bullets li::before {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  background: var(--c-teal);
  transform: rotate(45deg) translateY(-3px);
}

/* CTA card on the right — replaces the old counter */
.practice-grid__cta {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.practice-grid__cta-kicker {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-teal);
  margin: 0;
}
.practice-grid__cta-statement {
  color: var(--c-paper);
  font-size: 18px;
  line-height: 1.45;
  margin: 0;
}
.practice-grid__counter-num {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(72px, 8vw, 108px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-gold);
}
.practice-grid__counter-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,253,.62);
}

/* ---- Grid ---- */
.practice-grid__list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,253,.10);
}
@media (max-width: 1020px) { .practice-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .practice-grid__list { grid-template-columns: 1fr; } }

/* ---- Card shell ---- */
.pgrid-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-navy-deep);
}
@media (max-width: 1020px) { .pgrid-card { aspect-ratio: 5 / 4; } }
@media (max-width: 640px)  { .pgrid-card { aspect-ratio: 16 / 11; } }

.pgrid-card__link {
  position: absolute; inset: 0;
  display: block;
  color: var(--c-paper);
  text-decoration: none;
  isolation: isolate;
}
.pgrid-card__link:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: -4px;
}

/* Background photo — slow zoom on hover */
.pgrid-card__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 1.5s var(--ease-out), filter .8s var(--ease-out);
  filter: saturate(.85) brightness(.78) contrast(1.05);
  z-index: 0;
}
.pgrid-card__link:hover .pgrid-card__bg,
.pgrid-card__link:focus-visible .pgrid-card__bg {
  transform: scale(1.12);
  filter: saturate(1) brightness(.85) contrast(1.05);
}

/* Duotone overlay — navy + gold/teal mix, alternates */
.pgrid-card__duotone {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(140deg, rgba(22,47,76,.55) 0%, rgba(14,12,25,.30) 50%, rgba(185,167,85,.18) 100%);
  mix-blend-mode: multiply;
}
.pgrid-card:nth-child(even) .pgrid-card__duotone {
  background: linear-gradient(140deg, rgba(22,47,76,.55) 0%, rgba(14,12,25,.30) 50%, rgba(71,155,190,.20) 100%);
}

/* Bottom scrim for text legibility */
.pgrid-card__scrim {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14,12,25,.10) 0%, rgba(14,12,25,.20) 40%, rgba(14,12,25,.85) 100%);
  transition: opacity .35s var(--ease-out);
}
.pgrid-card__link:hover .pgrid-card__scrim { opacity: .80; }

/* Diagonal sweep on hover — gold stripe */
.pgrid-card__sweep {
  position: absolute;
  top: -25%; left: -100%;
  width: 35%; height: 150%;
  background: linear-gradient(90deg, transparent 0%, rgba(185,167,85,.22) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left 1.0s var(--ease-out);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
}
.pgrid-card:nth-child(even) .pgrid-card__sweep {
  background: linear-gradient(90deg, transparent 0%, rgba(71,155,190,.22) 50%, transparent 100%);
}
.pgrid-card__link:hover .pgrid-card__sweep,
.pgrid-card__link:focus-visible .pgrid-card__sweep { left: 130%; }

/* Top edge bar — grows full width on hover (the "growing line") */
.pgrid-card__topbar {
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 2px;
  background: var(--c-gold);
  transition: width .9s var(--ease-out);
  z-index: 4;
}
.pgrid-card:nth-child(even) .pgrid-card__topbar { background: var(--c-teal); }
.pgrid-card__link:hover .pgrid-card__topbar,
.pgrid-card__link:focus-visible .pgrid-card__topbar { width: 100%; }

/* Vertical name on the LEFT spine — book-spine reading (bottom→top) */
.pgrid-card__name {
  position: absolute;
  left: 30px;
  bottom: 28px;
  margin: 0;
  z-index: 4;

  writing-mode: vertical-rl;
  transform: rotate(180deg);

  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-paper);
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(14,12,25,.45);
  max-height: calc(100% - 60px);
  overflow: hidden;
}

/* Big stroked number — top-right, dominant visual hook */
.pgrid-card__num {
  position: absolute;
  top: 26px;
  right: 28px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(56px, 6.4vw, 96px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-gold);
  z-index: 4;
  transition: -webkit-text-stroke-color .35s var(--ease-out), color .35s var(--ease-out);
}
.pgrid-card:nth-child(even) .pgrid-card__num { -webkit-text-stroke-color: var(--c-teal); }
.pgrid-card__link:hover .pgrid-card__num { color: rgba(185,167,85,.12); }
.pgrid-card:nth-child(even) .pgrid-card__link:hover .pgrid-card__num { color: rgba(71,155,190,.12); }

/* Bottom-right stack: divider + tagline + hover CTA */
.pgrid-card__bottomright {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 4;
  text-align: right;
  max-width: calc(100% - 100px);
}

.pgrid-card__divider {
  width: 32px; height: 1px;
  background: var(--c-gold);
  transition: width .4s var(--ease-out);
}
.pgrid-card:nth-child(even) .pgrid-card__divider { background: var(--c-teal); }
.pgrid-card__link:hover .pgrid-card__divider { width: 64px; }

.pgrid-card__tagline {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-style: italic;
  color: var(--c-gold);
  margin: 0;
  max-width: 26ch;
  line-height: 1.45;
  text-align: right;
}
.pgrid-card:nth-child(even) .pgrid-card__tagline { color: var(--c-teal); }

.pgrid-card__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid transparent;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-paper);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height .45s var(--ease-out),
    opacity .35s var(--ease-out) .08s,
    border-top-color .35s var(--ease-out) .12s,
    padding-top .35s var(--ease-out);
}
.pgrid-card__link:hover .pgrid-card__cta,
.pgrid-card__link:focus-visible .pgrid-card__cta {
  max-height: 60px;
  opacity: 1;
  border-top-color: rgba(255,255,253,.20);
}
.pgrid-card__arrow {
  display: inline-block;
  transition: transform .35s var(--ease-out);
}
.pgrid-card__link:hover .pgrid-card__arrow { transform: translateX(6px); }

/* Mobile: revert vertical name to horizontal — at 1-col widths it doesn't read */
@media (max-width: 640px) {
  .pgrid-card__name {
    writing-mode: horizontal-tb;
    transform: none;
    left: 28px;
    bottom: auto;
    top: auto;
    position: absolute;
    bottom: 28px;
    right: 28px;
    width: auto;
    max-width: 70%;
    font-size: 22px;
    letter-spacing: 0.04em;
    line-height: 1.05;
  }
  .pgrid-card__bottomright {
    top: 28px;
    bottom: auto;
    right: 28px;
    align-items: flex-end;
  }
  .pgrid-card__num { top: 28px; right: 28px; }
}

/* ============================================================
   Per-slug background images
   Each photo is sourced from Pexels (free license, no attribution
   required). Fallback gradient layer remains beneath in case the
   image 404s.
   ============================================================ */
.pgrid-card--automobile-accidents .pgrid-card__bg {
  background-image:
    url("/assets/images/practices/automobile-accidents.jpg"),
    radial-gradient(ellipse at 30% 70%, rgba(201,53,53,.42) 0%, transparent 60%),
    linear-gradient(160deg, #1c1f2e 0%, #0e0c19 100%);
}
.pgrid-card--tractor-trailer-accidents .pgrid-card__bg {
  background-image:
    url("/assets/images/practices/tractor-trailer-accidents.jpg"),
    radial-gradient(ellipse at 50% 90%, rgba(255,166,77,.45) 0%, transparent 55%),
    linear-gradient(180deg, #14121a 0%, #2a2014 100%);
}
.pgrid-card--motorcycle-accidents .pgrid-card__bg {
  background-image:
    url("/assets/images/practices/motorcycle-accidents.jpg"),
    linear-gradient(135deg, #0e0c19 0%, #2a1410 100%);
}
.pgrid-card--premises-liability .pgrid-card__bg {
  background-image:
    url("/assets/images/practices/premises-liability.jpg"),
    linear-gradient(180deg, #1f2933 0%, #14181f 100%);
}
.pgrid-card--medical-negligence .pgrid-card__bg {
  background-image:
    url("/assets/images/practices/medical-negligence.jpg"),
    linear-gradient(180deg, #14202c 0%, #0e0c19 100%);
}
.pgrid-card--workers-compensation .pgrid-card__bg {
  background-image:
    url("/assets/images/practices/workers-compensation.jpg"),
    linear-gradient(160deg, #1a1410 0%, #2a1f10 100%);
}
.pgrid-card--nursing-home-negligence .pgrid-card__bg {
  background-image:
    url("/assets/images/practices/nursing-home-negligence.jpg"),
    linear-gradient(180deg, #1f1a26 0%, #14121a 100%);
}
.pgrid-card--defective-products .pgrid-card__bg {
  background-image:
    url("/assets/images/practices/defective-products.jpg"),
    linear-gradient(160deg, #1a1014 0%, #2a1418 100%);
}
.pgrid-card--animal-attacks .pgrid-card__bg {
  background-image:
    url("/assets/images/practices/animal-attacks.jpg"),
    linear-gradient(180deg, #1a1f14 0%, #14120e 100%);
}

/* ============================================================
   Callout: We Fight — punchy confrontational statement section
   inspired by cagoldberglaw's "We fight a**holes" panel.
   ============================================================ */

.callout-fight {
  position: relative;
  background: var(--c-navy-deep);
  color: var(--c-paper);
  padding-block: clamp(80px, 12vh, 160px);
  overflow: hidden;
  isolation: isolate;
}

/* Massive faded "WE FIGHT" watermark spanning across the panel */
.callout-fight__watermark {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;

  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(180px, 26vw, 460px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: rgba(71, 155, 190, .075);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Top + bottom hairlines flag the panel as its own zone */
.callout-fight__rule {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-teal) 30%, var(--c-gold) 70%, transparent 100%);
  opacity: .55;
}

.callout-fight__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
}

.callout-fight__statement {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--c-paper);
  margin: 0;
  max-width: 22ch;
}
.callout-fight__statement em {
  font-style: italic;
  font-weight: 900;
  color: var(--c-teal);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
}

/* Hand-painted brush stroke beneath each named enemy — staggered cascade */
.callout-mark__text { position: relative; z-index: 2; }
.callout-mark__stroke {
  position: absolute;
  left: -6px; right: -6px;
  bottom: -0.18em;
  width: calc(100% + 12px);
  height: 0.5em;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  transform: rotate(-1deg);
}
.callout-mark__stroke path {
  fill: none;
  stroke: var(--c-gold);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.7s cubic-bezier(.55,.05,.35,1);
}
.callout-fight__statement.is-in em:nth-of-type(1) .callout-mark__stroke path { transition-delay: 0.40s; stroke-dashoffset: 0; }
.callout-fight__statement.is-in em:nth-of-type(2) .callout-mark__stroke path { transition-delay: 0.85s; stroke-dashoffset: 0; }
.callout-fight__statement.is-in em:nth-of-type(3) .callout-mark__stroke path { transition-delay: 1.30s; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .callout-mark__stroke path { transition: none; transition-delay: 0s; stroke-dashoffset: 0; }
}

.callout-fight__sub {
  margin: 32px 0 0;
  max-width: 60ch;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 253, .82);
}
.callout-fight__sub strong {
  color: var(--c-paper);
  font-weight: 700;
  background: linear-gradient(transparent 80%, rgba(185, 167, 85, .35) 80%, rgba(185, 167, 85, .35) 92%, transparent 92%);
}

.callout-fight__actions {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.callout-fight__call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 253, .82);
  transition: color .2s ease;
}
.callout-fight__call:hover { color: var(--c-paper); }
.callout-fight__call-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-teal);
  position: relative;
  flex-shrink: 0;
}
.callout-fight__call-dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--c-teal);
  animation: callout-pulse 2.4s var(--ease-out) infinite;
}
@keyframes callout-pulse {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .callout-fight__call-dot::after { animation: none; } }

.pillars { position: relative; overflow: hidden; isolation: isolate; }

/* Animated ambient gradient — drifts behind the cards */
.pillars::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(185,167,85,.22), transparent 42%),
    radial-gradient(circle at 75% 70%, rgba(71,155,190,.20), transparent 46%),
    radial-gradient(circle at 60% 15%, rgba(185,167,85,.10), transparent 38%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
  animation: pillars-drift 28s ease-in-out infinite alternate;
}
.pillars::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(14,12,25,.55) 100%);
  pointer-events: none;
  z-index: -1;
}
@keyframes pillars-drift {
  0%   { transform: translate3d(0,0,0)       scale(1);    }
  50%  { transform: translate3d(3%, -2%, 0)  scale(1.06); }
  100% { transform: translate3d(-2%, 3%, 0)  scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .pillars::before { animation: none; }
}

.pillars__head { max-width: 820px; margin-bottom: var(--s-8); position: relative; z-index: 1; }

.pillars__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 4px;
  grid-template-columns: repeat(3, 1fr);
  counter-reset: pillar;
  position: relative;
  z-index: 1;
}
@media (max-width: 960px) { .pillars__grid { grid-template-columns: 1fr; } }

.pillar-card {
  display: flex; flex-direction: column;
  background: rgba(255,255,253,.02);
  border: 1px solid rgba(255,255,253,.08);
  transition: background var(--dur-med), transform var(--dur-med), border-color var(--dur-med);
  position: relative;
  overflow: hidden;
}
.pillar-card:hover { background: rgba(255,255,253,.04); transform: translateY(-2px); }

.pillar-card--hero {
  background: rgba(185,167,85,.10);
  border-color: rgba(185,167,85,.32);
  box-shadow: inset 0 0 0 1px rgba(185,167,85,.18), 0 24px 60px rgba(14,12,25,.36);
}

/* Media: image at top of card, number anchored bottom-right */
.pillar-card__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-navy-deep);
}
.pillar-card__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease, filter var(--dur-med);
}
.pillar-card:hover .pillar-card__media img { transform: scale(1.05); }

/* Light overlay — readability for the number, subtle vignette overall */
.pillar-card__media-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(14,12,25,.05) 0%, rgba(14,12,25,.0) 50%, rgba(14,12,25,.55) 100%),
    linear-gradient(180deg, rgba(14,12,25,.0) 60%, rgba(14,12,25,.35) 100%);
  pointer-events: none;
}

.pillar-card__num {
  position: absolute;
  right: 18px; bottom: 6px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(64px, 8vw, 92px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--c-teal);
  text-shadow: 0 2px 18px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.7);
  pointer-events: none;
}
.pillar-card--hero .pillar-card__num { color: var(--c-gold); }

/* Body */
.pillar-card__body-wrap { padding: 32px 32px 40px; }
.pillar-card__eyebrow   { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; color: rgba(255,255,253,.64); text-transform: uppercase; margin-top: 0; }
.pillar-card__headline  { margin-top: 12px; margin-bottom: 22px; color: var(--c-paper); }
.pillar-card__body      { margin-top: 0; color: rgba(255,255,253,.78); line-height: 1.65; font-size: 15px; }
.pillar-card__link      { color: var(--c-teal); border-bottom-color: var(--c-teal); margin-top: 24px; }
.pillar-card__link:hover { color: var(--c-teal-soft); }
.pillar-card--hero .pillar-card__link       { color: var(--c-gold); border-bottom-color: var(--c-gold); }
.pillar-card--hero .pillar-card__link:hover { color: var(--c-gold-soft); }

/* Hand-painted brush stroke under "every time" in the section headline */
.pillars-mark { position: relative; display: inline-block; color: var(--c-teal); }
.pillars-mark__text { position: relative; z-index: 2; }
.pillars-mark__stroke {
  position: absolute;
  left: -6px; right: -6px;
  bottom: -0.18em;
  width: calc(100% + 12px);
  height: 0.5em;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  transform: rotate(-1deg);
}
.pillars-mark__stroke path {
  fill: none;
  stroke: var(--c-gold);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.75s cubic-bezier(.55,.05,.35,1);
  transition-delay: 0.4s;
}
.pillars__head.is-in .pillars-mark__stroke path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .pillars-mark__stroke path { transition: none; transition-delay: 0s; stroke-dashoffset: 0; }
}

.victories {
  position: relative;
  background-color: var(--c-paper);
  border-block: 1px solid var(--c-line);
  /* `overflow: clip` clips the animated pseudo-element to the section
     bounds WITHOUT establishing a scroll container — so position: sticky
     on .victories__stats still works against the viewport. */
  overflow: clip;
}

/* Diagonal stripe pattern, drawn on a pseudo-element that's larger than
   the section. Animated with `transform` (GPU-composited) instead of
   `background-position` to avoid Chrome's subpixel artifacts on -45°
   repeating-linear-gradients that were causing the broken-line effect. */
.victories::before {
  content: "";
  position: absolute;
  inset: -200px;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 56px,
    rgba(14, 12, 25, .035) 56px 112px
  );
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  animation: victories-stripes 14s linear infinite;
}

/* 112px stripe period × cos(45°) ≈ 79.2px = one period along the
   gradient's perpendicular axis = seamless loop */
@keyframes victories-stripes {
  from { transform: translate(0, 0); }
  to   { transform: translate(-79.2px, 79.2px); }
}
@media (prefers-reduced-motion: reduce) {
  .victories::before { animation: none; }
}

.victories__grid {
  position: relative;
  z-index: 1;
  display: grid; gap: 64px;
  grid-template-columns: 5fr 6fr;
  align-items: start;
}
@media (max-width: 1020px) { .victories__grid { grid-template-columns: 1fr; gap: 48px; } }

.victories__stats { position: sticky; top: 112px; }
@media (max-width: 1020px) { .victories__stats { position: static; } }

.victories__stat-grid {
  list-style: none; padding: 0; margin: 24px 0 32px;
  display: grid; gap: 24px;
  grid-template-columns: 1fr 1fr;
}

.stat { border-left: 3px solid var(--c-gold); padding-left: 18px; }
.stat:nth-child(2), .stat:nth-child(3) { border-left-color: var(--c-teal); }
.stat__num {
  display: block;
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
  color: var(--c-navy-deep);
  letter-spacing: -0.02em;
}
.stat:nth-child(2) .stat__num,
.stat:nth-child(3) .stat__num { color: var(--c-teal-deep); }
.stat__label {
  display: block; margin-top: 8px;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-teal-deep);
}

.victories__cases { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }

.victory-card {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  padding: 28px;
  display: grid; gap: 14px;
  position: relative;
  overflow: hidden;
}
.victory-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--c-teal);
}

.victory-card__amount {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(36px, 4vw, 56px);
  color: var(--c-gold-deep);
  line-height: 1; letter-spacing: -0.02em;
}
.victory-card__type {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--c-teal-deep);
}
.victory-card__summary { font-size: 15px; line-height: 1.55; color: var(--c-ink); max-width: 56ch; }

.victory-card__meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 4px 0 0; padding-top: 16px;
  border-top: 1px solid var(--c-line);
  font-size: 13px;
}
.victory-card__meta dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-2); }
.victory-card__meta dd { margin: 4px 0 0; color: var(--c-navy-deep); font-weight: 600; }

.victories__disclaimer { margin-top: var(--s-8); margin-inline: auto; font-size: 12px; color: var(--c-ink-2); max-width: 72ch; text-align: center; }

.meet-tony {
  background: var(--c-paper);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Louisville skyline watermark — centered behind the content,
   "draws in" left-to-right when the section enters the viewport. */
.meet-tony::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 1400px);
  aspect-ratio: 1408 / 768;
  background: url("/assets/images/louisville-skyline.svg") center / contain no-repeat;
  opacity: 0.10;
  z-index: 0;
  pointer-events: none;
  /* Initially clipped from the right edge — fully hidden */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 4.8s cubic-bezier(.2, .7, .2, 1);
}
.meet-tony.is-skyline-drawn::before {
  clip-path: inset(0 0 0 0);
}

/* Hold the figure + body fade-ins until the skyline is at least half drawn.
   Skyline duration is 4800ms, so 2500ms = ~52% drawn before content lands.
   These overrides beat the base .reveal / .reveal-delay-2 transition-delay
   thanks to higher selector specificity. */
.meet-tony .meet-tony__figure { transition-delay: 720ms; }
.meet-tony .meet-tony__body   { transition-delay: 920ms; }

@media (max-width: 1020px) {
  .meet-tony::before { width: 110%; opacity: 0.07; }
}
@media (prefers-reduced-motion: reduce) {
  .meet-tony::before {
    clip-path: none;
    transition: none;
  }
  .meet-tony .meet-tony__figure,
  .meet-tony .meet-tony__body { transition-delay: 0ms; }
}

.meet-tony__grid {
  position: relative;
  z-index: 1;
  display: grid; gap: 72px;
  grid-template-columns: 5fr 6fr;
  align-items: center;
}
@media (max-width: 1020px) { .meet-tony__grid { grid-template-columns: 1fr; gap: 40px; } }

.meet-tony__figure {
  position: relative;
  margin: 0;
  padding-top: 20px; padding-right: 20px;
}
.meet-tony__portrait {
  aspect-ratio: 4/5;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--c-navy-deep);
  transition: transform var(--dur-med) var(--ease-out);
}
.meet-tony__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.meet-tony__figure:hover .meet-tony__portrait { transform: translate(-6px, -6px); }

.meet-tony__frame {
  position: absolute; inset: 0 0 20px 20px;
  border: 3px solid var(--c-gold);
  z-index: 1;
  transition: transform var(--dur-med) var(--ease-out);
}
.meet-tony__figure:hover .meet-tony__frame { transform: rotate(2deg); }

.meet-tony__lede        { margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--c-ink); max-width: 52ch; }
.meet-tony__body-copy   { margin-top: 18px; font-size: 15px; line-height: 1.7; color: var(--c-ink-2); max-width: 56ch; }
.meet-tony__signature   { margin-top: 16px; font-family: "Georgia", serif; font-style: italic; font-size: 22px; color: var(--c-gold-deep); }

.cares-preview {
  position: relative;
  /* `overflow: clip` clips the animated pseudo-element to section bounds
     without establishing a scroll container — same trick as victories. */
  overflow: clip;
}

/* Diagonal stripe pattern — same effect as the scoreboard, but the cream
   section bg shows through the gaps so the lighter stripes read as beige. */
.cares-preview::before {
  content: "";
  position: absolute;
  inset: -200px;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 56px,
    rgba(14, 12, 25, .04) 56px 112px
  );
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  animation: cares-stripes 14s linear infinite;
}

@keyframes cares-stripes {
  from { transform: translate(0, 0); }
  to   { transform: translate(-79.2px, 79.2px); }
}
@media (prefers-reduced-motion: reduce) {
  .cares-preview::before { animation: none; }
}

.cares-preview__head {
  position: relative; z-index: 1;
  display: grid; gap: 24px;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: var(--s-7);
}
@media (max-width: 860px) { .cares-preview__head { grid-template-columns: 1fr; align-items: start; } }

.cares-preview__scroller {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0 var(--s-6);
  display: grid; gap: 20px;
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  max-width: 1440px; margin-inline: auto;
}
@media (max-width: 1200px) {
  .cares-preview__scroller {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 16px;
  }
  .cares-card { min-width: 300px; scroll-snap-align: start; }
}

.cares-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  padding: 0 0 24px;
  display: grid; gap: 14px;
}
.cares-card__media {
  position: relative;
  aspect-ratio: 4/3;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--c-cream-2);
}
.cares-card__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.cares-card:hover .cares-card__media img { transform: scale(1.04); }
.cares-card__kicker { font-family: var(--f-mono); font-size: 11px; color: var(--c-gold-deep); padding-inline: 20px; margin-top: 8px; }
.cares-card__title  { color: var(--c-navy-deep); padding-inline: 20px; }
.cares-card__body   { font-size: 14px; color: var(--c-ink-2); line-height: 1.55; padding-inline: 20px; }

.reviews-carousel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Subtle uniform dot field, drifting diagonally — same look as the
   practice-grid intro band. */
.reviews-carousel::before {
  content: "";
  position: absolute;
  inset: -120px;
  background-image: radial-gradient(circle, rgba(255, 255, 253, .07) 1.4px, transparent 1.6px);
  background-size: 28px 28px;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  animation: reviews-dots 26s linear infinite;
}
@keyframes reviews-dots {
  from { transform: translate(0, 0); }
  to   { transform: translate(28px, 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-carousel::before { animation: none; }
}

.reviews-carousel__head {
  position: relative; z-index: 1;
  display: grid; gap: 24px;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: var(--s-7);
}
@media (max-width: 820px) { .reviews-carousel__head { grid-template-columns: 1fr; align-items: start; } }

.reviews-carousel__controls { display: flex; gap: 16px; align-items: center; }
.reviews-carousel__arrows   { display: flex; gap: 4px; }
.reviews-carousel__arrows button {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: var(--c-paper);
  border: 1px solid rgba(255,255,253,.2);
  font-size: 18px; font-family: var(--f-display); font-weight: 700;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.reviews-carousel__arrows button:hover { background: var(--c-teal); color: var(--c-paper); border-color: var(--c-teal); }

.reviews-carousel__scroller {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0 0 16px;
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.reviews-carousel__scroller::-webkit-scrollbar { display: none; }

.review-card {
  flex: 0 0 min(420px, 82vw);
  background: rgba(255,255,253,.04);
  border: 1px solid rgba(255,255,253,.14);
  border-top: 3px solid var(--c-gold);
  padding: 32px 28px;
  scroll-snap-align: start;
  color: var(--c-paper);
  display: grid; gap: 16px;
  position: relative;
}
.review-card__quote { position: absolute; top: 8px; right: 16px; font-family: var(--f-display); font-weight: 900; font-size: 96px; line-height: 1; color: rgba(71,155,190,.45); }
.review-card__stars { color: var(--c-gold); font-size: 18px; letter-spacing: 2px; margin: 0; }
.review-card__body  { font-family: "Georgia", serif; font-style: italic; font-size: 17px; line-height: 1.55; color: rgba(255,255,253,.92); margin: 0; }
.review-card__who   { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,253,.14); font-size: 13px; }
.review-card__name  { font-family: var(--f-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.review-card__case  { font-family: var(--f-mono); color: rgba(255,255,253,.66); }

.faq-section__grid {
  display: grid; gap: 64px;
  grid-template-columns: 4fr 7fr;
  align-items: start;
}
@media (max-width: 1020px) { .faq-section__grid { grid-template-columns: 1fr; gap: 32px; } }

.faq-section__aside { position: sticky; top: 112px; }
@media (max-width: 1020px) { .faq-section__aside { position: static; } }
.faq-section__cta { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.faq { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q { margin: 0; }

.faq__trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 22px 0;
  font-family: var(--f-display); font-weight: 800;
  font-size: 20px;
  color: var(--c-navy-deep);
  text-align: left;
  transition: color var(--dur-fast);
}
.faq__trigger:hover { color: var(--c-gold-deep); }
.faq__trigger-icon {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1.5px solid var(--c-navy-deep);
  font-family: var(--f-mono); font-size: 18px; font-weight: 500;
  transition: transform var(--dur-med), background var(--dur-fast), color var(--dur-fast);
}
.faq__trigger[aria-expanded="true"] .faq__trigger-icon {
  transform: rotate(45deg);
  background: var(--c-teal);
  border-color: var(--c-teal);
  color: var(--c-paper);
}

.faq__panel { padding-bottom: 22px; max-width: 72ch; }
.faq__panel p { font-size: 15px; line-height: 1.7; color: var(--c-ink-2); margin: 0; }

.unions-strip__head { text-align: center; margin-bottom: var(--s-7); }

/* Hand-painted brush stroke under "Union-backed" */
.unions-mark { position: relative; display: inline-block; color: var(--c-teal); }
.unions-mark__text { position: relative; z-index: 2; }
.unions-mark__stroke {
  position: absolute;
  left: -6px; right: -6px;
  bottom: -0.18em;
  width: calc(100% + 12px);
  height: 0.5em;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  transform: rotate(-1deg);
}
.unions-mark__stroke path {
  fill: none;
  stroke: var(--c-gold);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.75s cubic-bezier(.55,.05,.35,1);
  transition-delay: 0.4s;
}
.unions-strip__head.is-in .unions-mark__stroke path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .unions-mark__stroke path { transition: none; transition-delay: 0s; stroke-dashoffset: 0; }
}

.unions-strip__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(5, 1fr);
}
/* Divi's `.et-l--body ul { list-style-type: disc }` (0,1,1) out-specifies
   the component `list-style:none` (0,1,0) and paints a bullet beside each
   chip. Re-assert above Divi. */
.et_pb_section .unions-strip__list,
.et_pb_section .unions-strip__list > li {
  list-style: none !important;
}
.et_pb_section .unions-strip__list {
  padding-left: 0 !important;
}
@media (max-width: 900px) { .unions-strip__list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .unions-strip__list { grid-template-columns: repeat(2, 1fr); } }

.union-chip {}
.union-chip__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  padding: 22px 18px 18px;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.union-chip__link:hover { transform: translateY(-2px); border-color: var(--c-gold); background: var(--c-cream); }

/* Uniform logo box — every mark renders inside the SAME 80px-tall, 100%-
   wide frame, with object-fit: contain. Wildly different proportions
   (UAW wordmark, circular seals, FOP star) all read at the same visual
   height. */
.union-chip__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
}
.union-chip__logo {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(.92);
  opacity: 0.78;
  transition: transform var(--dur-fast), filter var(--dur-med), opacity var(--dur-med);
}
.union-chip__link:hover .union-chip__logo,
.union-chip__link:focus-visible .union-chip__logo {
  transform: scale(1.04);
  filter: grayscale(0) contrast(1);
  opacity: 1;
}

/* FOP logo ships as a JPG with a white background — multiply it against
   the chip bg so the white square disappears in both default + hover. */
.union-chip__logo[src$="/fop.jpg"] { mix-blend-mode: multiply; }

/* Caption wordmark sits under the logo */
.union-chip__wordmark {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  text-align: center;
  line-height: 1.2;
}
.union-chip__link:hover .union-chip__wordmark { color: var(--c-gold-deep); }

.unions-strip__foot {
  margin-top: var(--s-6);
  text-align: center;
  color: var(--c-ink-2);
  font-size: 14px;
}
.unions-strip__foot .btn { margin-left: 12px; }

/* ============================================================
   bio-long — long-form 2-column narrative for /about/
   ============================================================ */

.bio-long__grid {
  display: grid;
  gap: 64px;
  grid-template-columns: 5fr 7fr;
  align-items: start;
}
@media (max-width: 1020px) {
  .bio-long__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Sticky head on desktop so the chapter title rides with the body */
.bio-long__head {
  position: sticky;
  top: 112px;
  align-self: start;
}
@media (max-width: 1020px) {
  .bio-long__head { position: static; }
}

.bio-long__body {
  max-width: 64ch;
}

/* NOTE: selector deliberately includes `.et_pb_text` so it beats the
   bridge's `.et_pb_text.et_block_module { padding: 0 }` reset, which
   would otherwise zero out the padding-top below. Also using
   !important on the spacing properties so any future Divi-emitted
   per-instance CSS can't undo it. */
.bio-long__heading,
.et_pb_text.bio-long__heading {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  font-size: clamp(20px, 2vw, 28px);
  color: var(--c-navy-deep);
  /* Tight above the rule, generous below it — the rule "ends" the
     previous chapter and the breathing room belongs to the new one. */
  margin-top: 24px !important;
  padding-top: 64px !important;
  border-top: 1px solid var(--c-line);
}
.bio-long__body > .bio-long__heading:first-child,
.bio-long__body > .et_pb_text.bio-long__heading:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0;
}

/* Body paragraphs that follow the heading get a clear gap below it. */
.bio-long__heading + p { margin-top: 24px; }

.bio-long__body p {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-ink);
  max-width: 60ch;
}

/* Pull quote — gold rail, navy body, big serif-ish display */
.bio-long__pullquote {
  margin: 72px 0;
  padding: 8px 0 8px 28px;
  border-left: 4px solid var(--c-gold);
  position: relative;
}
.bio-long__pullquote blockquote { margin: 0; }
.bio-long__pullquote blockquote p {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--c-navy-deep);
  text-transform: none;
  max-width: 28ch;
  margin: 0;
}
.bio-long__pullquote figcaption {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--c-gold-deep);
  text-transform: uppercase;
}

.bio-long__signature {
  margin-top: 28px;
  font-family: "Georgia", serif;
  font-style: italic;
  font-size: 22px;
  color: var(--c-gold-deep);
}

/* ============================================================
   timeline — chronological career chapters
   ============================================================ */

.timeline__head { max-width: 760px; margin-bottom: var(--s-8); }

/* The list owns a 56px left gutter that holds the vertical connector
   line and the marker dots. Cards sit to the right of the gutter and
   the connector is always visible between markers.
   NOTE: both `list-style: none` and `padding-left` need `!important`
   because Divi's `.et-l--body ol` rules (specificity 0,1,1,1) outrank
   plain class selectors and re-add list-numbers + zero padding. */
.timeline__list {
  list-style: none !important;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 56px !important;
  margin: 0;
  position: relative;
  max-width: 880px;
}
.timeline__list > .timeline__item {
  list-style: none !important;
}
.timeline__list > .timeline__item::marker { content: none; }

/* Vertical connector line — runs the full list height inside the gutter. */
.timeline__list::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(to bottom, var(--c-gold) 0%, var(--c-teal) 100%);
  opacity: 0.65;
  z-index: 0;
}

/* Card body — sits inside the right portion of the list. */
.timeline__item {
  position: relative;
  background: var(--c-paper);
  border-left: 3px solid var(--c-navy-deep);
  padding: 24px 28px 26px;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.timeline__item + .timeline__item { margin-top: 32px; }
.timeline__item:hover {
  transform: translateX(4px);
  box-shadow: var(--sh-md);
}

/* Marker dot — pulled LEFT into the gutter so its center sits ON
   the connector line (not 7px to the right of it).
   Math: item content edge is at (OL.paddingLeft 56 + item border-left 3) = 59px
   from the OL's left edge. Connector center is at OL.left + 12px
   (11px offset + 1px half-width). With box-sizing: border-box the
   marker's visible width is 24px, so its center sits at marker.left + 12.
   To put that center at OL.left + 12, marker.left = -59 relative to
   the item's padding edge. */
.timeline__marker {
  position: absolute;
  left: -59px;
  top: 26px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-paper);
  border: 4px solid var(--c-gold);
  box-shadow: 0 0 0 4px rgba(185, 167, 85, 0.18);
  z-index: 2;
}
.timeline__marker--teal {
  border-color: var(--c-teal);
  box-shadow: 0 0 0 4px rgba(71, 155, 190, 0.20);
}

.timeline__era {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--c-teal-deep);
  text-transform: uppercase;
  margin: 0;
}

.timeline__headline {
  margin-top: 8px;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--c-navy-deep);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.timeline__copy {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-ink-2);
  max-width: 60ch;
}

@media (max-width: 640px) {
  .timeline__list { padding-left: 40px !important; }
  .timeline__list::before { left: 7px; }
  .timeline__marker {
    width: 20px; height: 20px; border-width: 3px;
    /* OL padding 40 + item border 3 = 43 to item padding edge.
       Connector center at OL.left + 8. Marker width 20, half = 10.
       marker.left absolute = OL.left - 2. Relative = -2 - 43 = -45. */
    left: -45px;
    top: 24px;
  }
  .timeline__item { padding: 20px 16px 22px 16px; }
}

/* ============================================================
   team-grid — Tony, Summer, and the open seat
   ============================================================ */

.team__head { max-width: 760px; margin-bottom: var(--s-8); }

.team__grid {
  list-style: none !important;
  padding-left: 0 !important;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.team__grid > .team-card { list-style: none !important; }
.team__grid > .team-card::marker { content: none; }
@media (max-width: 1020px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .team__grid { grid-template-columns: 1fr; } }

.team-card {
  background: var(--c-paper);
  padding: 16px 16px 28px;
  border: 1px solid var(--c-line);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

.team-card__media {
  aspect-ratio: 4 / 5;
  width: 100%;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out);
}
.team-card:hover .team-card__media { transform: translateY(-2px); }

.team-card__role {
  margin: 20px 0 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--c-teal-deep);
  text-transform: uppercase;
}

.team-card__name {
  margin-top: 8px;
  font-size: clamp(24px, 2.4vw, 32px);
  text-transform: uppercase;
  color: var(--c-navy-deep);
  letter-spacing: -0.01em;
}

.team-card__bio {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-ink-2);
}

.team-card__cta {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-size: 13px;
  color: var(--c-teal-deep);
  border-bottom: 2px solid var(--c-teal);
  padding-bottom: 2px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.team-card__cta:hover {
  color: var(--c-navy-deep);
  border-bottom-color: var(--c-gold);
}

/* Open seat variant — dashed teal frame, recruitment vibe */
.team-card--open {
  background: transparent;
  border: 2px dashed var(--c-teal);
}
.team-card--open:hover { box-shadow: var(--sh-teal); }

.team-card__media--open {
  aspect-ratio: 4 / 5;
  width: 100%;
  position: relative;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg,
      rgba(71, 155, 190, 0.06) 0 12px,
      rgba(71, 155, 190, 0.12) 12px 24px),
    var(--c-cream);
  border: 1px dashed rgba(71, 155, 190, 0.5);
  color: var(--c-teal-deep);
}

.team-card__open-mark {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(72px, 8vw, 128px);
  line-height: 1;
  color: var(--c-teal);
}

.team-card__open-label {
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-teal-deep);
}

/* ============================================================
   why-deep — long-form deep-dive sections on /why-colyer/
   Three reusable blocks: fee-compare, fee-callout, tactic-list,
   plus a 2-column body grid.
   ============================================================ */

.why-deep__head {
  max-width: 820px;
  margin-bottom: var(--s-7);
}

.why-deep__foot {
  margin-top: var(--s-7);
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-ink-2);
}

/* ---------- 2-column body (used in cares-deep) ---------- */
.why-deep__body {
  display: grid;
  gap: 64px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
@media (max-width: 1020px) {
  .why-deep__body { grid-template-columns: 1fr; gap: 32px; }
}

.why-deep__col p {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-ink);
  max-width: 56ch;
}

.why-deep__h3 {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  font-size: clamp(20px, 2vw, 28px);
  color: var(--c-navy-deep);
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}
.why-deep__col > .why-deep__h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- Cares list (community involvement) ---------- */
.cares-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
}
.cares-list li {
  position: relative;
  padding: 14px 16px 14px 18px;
  border-left: 3px solid var(--c-teal);
  background: rgba(71, 155, 190, 0.06);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink);
}
.cares-list__tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-teal-deep);
  margin-right: 10px;
}

/* --- Divi bridge overrides (why-colyer cares-deep) ----------------
   Divi's `.et-l--body ul { list-style-type: disc; padding-left: ... }`
   (0,1,1) out-specifies the component `.cares-list { list-style:none }`
   (0,1,0), so the involvement list renders default disc markers + left
   indent. Re-assert above Divi. (The li keeps its own card padding —
   only the UL's marker indent is zeroed.) */
.et_pb_section .cares-list,
.et_pb_section .cares-list li {
  list-style: none !important;
}
.et_pb_section .cares-list {
  padding-left: 0 !important;
}

/* why-deep__h3 carries a top divider + padding-top to set the heading
   off the rule, but the bridge's `.et_pb_text { padding: 0 }` zeroes
   that gap so the heading crowds the line. Restore the space beneath
   the rule; keep the first heading in each column flush (no divider). */
.et_pb_section .et_pb_text.why-deep__h3 {
  padding-top: 40px !important;
}
.et_pb_section .why-deep__col > .et_pb_text.why-deep__h3:first-child {
  padding-top: 0 !important;
}

/* ============================================================
   Fee compare — 3-up cards comparing 25% / 33% / 40%
   ============================================================ */
.fee-compare {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) {
  .fee-compare { grid-template-columns: 1fr; }
}

.fee-card {
  position: relative;
  padding: 32px 28px 28px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

.fee-card__label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  margin: 0;
}

.fee-card__rate {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(64px, 9vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--c-navy-deep);
  margin: 16px 0 0;
}

.fee-card__fee {
  margin: 8px 0 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--c-navy-deep);
}

.fee-card__net {
  margin: 6px 0 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--c-ink-2);
}

.fee-card__note {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-ink-2);
  border-top: 1px solid var(--c-line);
  padding-top: 14px;
}

/* "Us" tier — gold rail, gold rate, badge */
.fee-card--us {
  background: var(--c-paper);
  border-color: var(--c-gold);
  border-left: 6px solid var(--c-gold);
  box-shadow: var(--sh-gold);
}
.fee-card--us .fee-card__rate { color: var(--c-gold-deep); }
.fee-card--us .fee-card__fee  { color: var(--c-gold-deep); }
.fee-card--us .fee-card__net  { color: var(--c-navy-deep); font-weight: 700; }

.fee-card__badge {
  position: absolute;
  top: -12px;
  left: 22px;
  background: var(--c-gold);
  color: var(--c-navy-deep);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--r-sm);
}

/* ============================================================
   Fee callout — pull-quote variant
   ============================================================ */
.fee-callout {
  margin: 56px 0 0;
  padding: 32px 36px;
  border-left: 4px solid var(--c-gold);
  background: linear-gradient(135deg, rgba(185,167,85,.08), transparent 70%);
}
.fee-callout blockquote {
  margin: 0;
}
.fee-callout blockquote p {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--c-navy-deep);
}
.fee-callout__sub {
  display: block;
  margin-top: 8px;
  font-size: clamp(16px, 1.4vw, 22px);
  letter-spacing: 0.02em;
  color: var(--c-gold-deep);
  text-transform: none;
  font-weight: 700;
}
.fee-callout figcaption {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--c-gold-deep);
  text-transform: uppercase;
}

/* ============================================================
   Tactic list — Tactic / Counter pairs
   Definition list with mono labels and teal left rail.
   ============================================================ */
.tactic-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
}

.tactic-list__item {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-teal);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 860px) {
  .tactic-list__item { grid-template-columns: 1fr; }
}

.tactic-list__tactic,
.tactic-list__counter {
  margin: 0;
  padding: 24px 28px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-ink);
}

.tactic-list__tactic {
  background: rgba(26, 42, 67, 0.04);
  border-right: 1px solid var(--c-line);
}
@media (max-width: 860px) {
  .tactic-list__tactic { border-right: 0; border-bottom: 1px solid var(--c-line); }
}

.tactic-list__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  margin-bottom: 8px;
}
.tactic-list__tactic .tactic-list__label { color: var(--c-navy-deep); }
.tactic-list__counter .tactic-list__label { color: var(--c-teal-deep); }

.tactic-list__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 28px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--c-navy-deep);
  line-height: 1.12;
}

/* ============================================================
   /why-colyer/ (page 713) — vertical rhythm + title line-height
   Scoped to .page-id-713 so no other page is affected.

   Two problems this addresses:
   1. divi-bridge.css pins every .display-lg title to
      line-height:0.92 !important. Each section title on this page
      wraps to two lines (via <br>), so the lines crowd together.
      Relax to 1.05 — still tight for an uppercase display face, but
      no longer colliding.
   2. The bridge zeroes Divi's module margins, so adjacent blocks
      butt flush: eyebrow→title, lede→cards/lists/table, and the
      cares-deep intro→2-col body. Restore deliberate gaps and give
      the content sections more generous top/bottom padding.
   ============================================================ */

/* 1 — Title line-height: relax the bridge's 0.92 on two-line titles.
   Must out-specify `.et_pb_section .display-lg` (0,2,0) + !important. */
.page-id-713 .et_pb_section .display-lg,
.page-id-713 .et_pb_section .display-lg h1,
.page-id-713 .et_pb_section .display-lg h2,
.page-id-713 .et_pb_section .display-lg h3 {
  line-height: 1.05 !important;
}

/* 2 — Roomier vertical padding on the content sections (bridge = 60px) */
.page-id-713 .et_pb_section.et_block_section.section {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}

/* 3 — Eyebrow → title gap (separate Divi modules butt together) */
.page-id-713 .et_pb_section.why-deep .et_pb_text.eyebrow,
.page-id-713 .et_pb_section.comparison-table .et_pb_text.eyebrow {
  margin-bottom: 18px !important;
}
/* pillars packs its eyebrow + title into one code module */
.page-id-713 .pillars__head .display-lg {
  margin-top: 18px !important;
}

/* 4 — Lede → content gap (cards/lists/table carry margin:0) */
.page-id-713 .et_pb_section.why-deep .et_pb_code.fee-compare,
.page-id-713 .et_pb_section.why-deep .et_pb_code.tactic-list,
.page-id-713 .et_pb_section.comparison-table .et_pb_code.comparison__wrap {
  margin-top: 44px !important;
}

/* 5 — cares-deep: 2-column body row sits flush under the intro lede */
.page-id-713 .et_pb_row.why-deep__body {
  margin-top: 56px !important;
}

/* ============================================================
   comparison — Colyer vs Industry Standard table
   Lives on a navy section (.bg-navy). Gold accents on our column.
   Mobile: stacks via data-label cells.
   ============================================================ */

.comparison-table { position: relative; overflow: hidden; }
.comparison-table::before {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  bottom: -200px;
  left: -180px;
  background: radial-gradient(circle, rgba(71,155,190,.14), transparent 60%);
  pointer-events: none;
}

.comparison-table__head {
  max-width: 820px;
  margin-bottom: var(--s-7);
  position: relative;
  z-index: 1;
}

.comparison__wrap {
  position: relative;
  z-index: 1;
  overflow-x: auto;
}

.comparison {
  width: 100%;
  border-collapse: collapse;
  color: var(--c-paper);
  font-size: 16px;
}

/* Header row — gold mono uppercase */
.comparison thead th {
  text-align: left;
  padding: 20px 24px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 600;
  border-bottom: 2px solid rgba(185, 167, 85, 0.36);
}
.comparison thead th.comparison__us {
  color: var(--c-gold);
  background: rgba(185, 167, 85, 0.10);
}

/* Body rows */
.comparison tbody tr {
  border-bottom: 1px solid rgba(255, 255, 253, 0.10);
}
.comparison tbody tr:last-child {
  border-bottom: 0;
}

.comparison tbody th[scope="row"] {
  text-align: left;
  padding: 22px 24px;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 253, 0.78);
  font-weight: 500;
  vertical-align: top;
  width: 30%;
}

.comparison tbody td {
  padding: 22px 24px;
  vertical-align: top;
  line-height: 1.6;
}

/* Colyer column — gold-tinted, paper text, slightly larger */
.comparison tbody td.comparison__us {
  background: rgba(185, 167, 85, 0.10);
  color: var(--c-paper);
  font-size: 17px;
  font-weight: 600;
  border-left: 1px solid rgba(185, 167, 85, 0.28);
  border-right: 1px solid rgba(185, 167, 85, 0.28);
}

/* Industry-standard column — muted */
.comparison tbody td:not(.comparison__us) {
  color: rgba(255, 255, 253, 0.66);
}

/* ---------- Mobile: stack rows as cards ---------- */
@media (max-width: 760px) {
  .comparison thead {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }

  .comparison,
  .comparison tbody,
  .comparison tbody tr {
    display: block;
    width: 100%;
  }

  .comparison tbody tr {
    margin-bottom: 16px;
    padding: 16px;
    background: rgba(255, 255, 253, 0.03);
    border: 1px solid rgba(255, 255, 253, 0.10);
    border-radius: var(--r-md);
  }

  .comparison tbody th[scope="row"],
  .comparison tbody td {
    display: block;
    width: 100%;
    padding: 10px 4px;
    border: 0;
    background: transparent !important;
  }

  .comparison tbody th[scope="row"] {
    color: var(--c-gold);
    font-size: 12px;
    padding-bottom: 4px;
  }

  .comparison tbody td.comparison__us {
    border-left: 3px solid var(--c-gold);
    padding-left: 12px;
    margin-top: 6px;
  }

  .comparison tbody td:not(.comparison__us)::before {
    content: attr(data-label) " — ";
    display: inline;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 253, 0.5);
    margin-right: 6px;
  }

  .comparison tbody td.comparison__us::before {
    content: "Colyer Law — ";
    display: block;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: 4px;
  }
}

/* ============================================================
   Nonprofit partners grid — used on /colyer-cares/
   ============================================================ */

.nonprofit-grid__head {
  max-width: 60ch;
  margin-bottom: var(--s-7);
}

.nonprofit-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1020px) {
  .nonprofit-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nonprofit-grid__list { grid-template-columns: 1fr; }
}

.nonprofit-card {
  position: relative;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  padding: var(--s-6) var(--s-6) var(--s-6) calc(var(--s-6) + 6px);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

/* Alternating left rail — gold on odd cards, teal on even cards */
.nonprofit-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--c-gold);
}
.nonprofit-card:nth-child(even)::before {
  background: var(--c-teal);
}

.nonprofit-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--c-stone);
}

/* Relationship label — gold-deep on odd, teal-deep on even */
.nonprofit-card__relationship {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-gold-deep);
  margin: 0;
}
.nonprofit-card:nth-child(even) .nonprofit-card__relationship {
  color: var(--c-teal-deep);
}

.nonprofit-card__name {
  color: var(--c-navy-deep);
  margin: 0;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.15;
}

.nonprofit-card__desc {
  color: var(--c-ink-2);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}

.nonprofit-card__since {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  align-self: flex-start;
  margin: var(--s-3) 0 0;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--c-navy-deep);
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nonprofit-card__since span {
  color: var(--c-ink-2);
  font-weight: 400;
}

/* ============================================================
   Community events list — used on /colyer-cares/
   ============================================================ */

.cares-events__head {
  max-width: 60ch;
  margin-bottom: var(--s-7);
}

.events-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.events-list__item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--s-6);
  align-items: start;
  /* Horizontal padding so the cream hover highlight has breathing room
     around the content; a matching negative margin bleeds the highlight
     outward so the date/title still align with the section heading. */
  padding: var(--s-6);
  margin-inline: calc(var(--s-6) * -1);
  border-top: 1px solid var(--c-line);
  transition: background var(--dur-fast) var(--ease-out);
}
/* Keep uniform padding on every row (incl. first/last) so the hover
   highlight is evenly padded top + bottom. Only drop the divider line
   above the first row. */
.events-list__item:first-child { border-top: 0; }

.events-list__item:hover {
  background: var(--c-cream);
}

.events-list__date {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-teal-deep);
  font-weight: 700;
  padding-top: 6px;
  display: block;
}

.events-list__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.events-list__title {
  font-family: var(--f-display);
  color: var(--c-navy-deep);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}

.events-list__where {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-ink-2);
  margin: 0;
}

.events-list__role {
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-ink);
  margin: 4px 0 0;
  max-width: 60ch;
}

.events-list__foot {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: 14px;
  color: var(--c-ink-2);
  font-style: italic;
}

/* Stacks at small widths */
@media (max-width: 640px) {
  .events-list__item {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding-block: var(--s-5);
  }
  .events-list__date {
    display: inline-block;
    padding: 4px 10px;
    background: var(--c-cream);
    border-radius: var(--r-pill);
    align-self: flex-start;
    padding-top: 4px;
  }
}

/* ============================================================
   Cares page — small one-off section styles for /colyer-cares/
   ============================================================ */

/* ----- Intro: 2-col layout (head left, body right) ----- */
.cares-intro__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-8);
  align-items: start;
}
@media (max-width: 960px) {
  .cares-intro__grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}

.cares-intro__head {
  position: sticky;
  top: 112px;
  align-self: start;
}
@media (max-width: 960px) {
  .cares-intro__head { position: static; }
}

.cares-intro__body {
  max-width: 60ch;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.cares-intro__body p {
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--c-ink);
  margin: 0;
}

/* ----- Nominate CTA: navy section, centered, big mailto ----- */
.cares-nominate {
  text-align: center;
}

.cares-nominate__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  padding-block: var(--s-7);
}

.cares-nominate__eyebrow {
  color: var(--c-gold);
  margin: 0;
}

.cares-nominate__title {
  color: var(--c-paper);
  margin: 0;
  max-width: 22ch;
}

.cares-nominate__lede {
  color: rgba(255, 255, 253, 0.78);
  font-size: var(--fs-lg);
  line-height: 1.55;
  /* auto inline margins so the max-width box is centered in the column — the
     original design relied on a flex parent (.cares-nominate__inner) that isn't
     the direct parent in the live Divi markup, so center it explicitly. */
  margin: 0 auto;
  max-width: 56ch;
}

.cares-nominate__email-row {
  margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}

.cares-nominate__email-label {
  font-size: 11px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-gold);
}

.cares-nominate__email {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: clamp(28px, 4vw, 56px);
  color: var(--c-paper);
  border-bottom: 3px solid var(--c-gold);
  padding-bottom: 6px;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  word-break: break-word;
}
.cares-nominate__email:hover,
.cares-nominate__email:focus-visible {
  color: var(--c-teal);
  border-color: var(--c-teal);
}
.cares-nominate__email .btn__arrow {
  font-size: 0.7em;
  transition: transform var(--dur-fast) var(--ease-out);
}
.cares-nominate__email:hover .btn__arrow {
  transform: translateX(4px);
}

.cares-nominate__note {
  margin-top: var(--s-3);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 253, 0.55);
  font-style: italic;
}
/* The note is a Divi text module, which Divi left-aligns
   (`.et_pb_text_N { text-align: start }`), breaking the centered CTA
   layout. Re-center it under the email block. */
.et_pb_section .et_pb_text.cares-nominate__note {
  text-align: center !important;
}

/* ============================================================
   Colyer Cares — showcase components
   .cares-marquee   scrolling rows of cause "chips"
   .cares-gallery   mosaic of real community photos
   .cares-scholarship  Safe Driving Essay Scholarship callout
   ============================================================ */

/* ---------- Scrolling causes marquee ---------- */
/* Gap between the section lede paragraph and the scrolling chips
   (the chips otherwise butt right up under the paragraph). The wrap is
   a Divi code module, so out-specify the bridge's `.et_pb_code { padding:0 }`. */
.et_pb_section .et_pb_code.cares-marquee__wrap {
  padding-top: var(--s-7) !important;
}

.cares-marquee {
  display: grid;
  gap: 18px;
  /* Clip the wide scrolling track so it can't push the page wider than the
     viewport (was causing ~12,700px of horizontal overflow on mobile). The
     mask only fades the edges; it does not clip layout. */
  overflow: hidden;
  /* fade the edges so chips scroll in/out softly */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cares-marquee__row {
  display: flex;
  width: max-content;
  gap: 14px;
  will-change: transform;
  animation: cares-marquee-left 70s linear infinite;
}
.cares-marquee__row--rev { animation-name: cares-marquee-right; }
.cares-marquee__row--slow { animation-duration: 95s; }
.cares-marquee:hover .cares-marquee__row { animation-play-state: paused; }
/* each row holds the chip list TWICE (two tracks); translate -50% loops seamlessly */
.cares-marquee__track {
  display: flex;
  gap: 14px;
  padding-right: 14px;
}
.cares-chip {
  white-space: nowrap;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-paper);
  color: var(--c-navy-deep);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cares-chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--c-gold);
  flex: none;
}
.cares-chip--teal::before { background: var(--c-teal); }
.cares-chip--navy::before { background: var(--c-navy-deep); }

@keyframes cares-marquee-left  { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes cares-marquee-right { from { transform: translateX(-50%); }  to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .cares-marquee { -webkit-mask-image: none; mask-image: none; }
  .cares-marquee__row { animation: none; width: auto; flex-wrap: wrap; }
  .cares-marquee__track:nth-child(2) { display: none; }
}

/* ---------- Community photo gallery (mosaic) ---------- */
.cares-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 14px;
}
.cares-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-ink-2);
  border: 6px solid var(--c-paper);
  box-shadow: var(--sh-md);
}
.cares-gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* Bias the crop toward the top so faces/heads aren't clipped when a
     landscape photo is covered into a shorter tile. */
  object-position: center 25%;
  transition: transform .8s ease;
}
.cares-gallery__item:hover img { transform: scale(1.05); }

/* Tiles are clickable → open the lightbox */
.cares-gallery__item { cursor: pointer; }
.cares-gallery__item:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 3px; }

/* ---------- Gallery lightbox ---------- */
html.cares-lightbox-lock { overflow: hidden; }

.cares-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  display: none;
  align-items: center; justify-content: center;
  padding: 5vmin;
  background: rgba(8, 12, 20, 0.93);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.cares-lightbox.is-open { display: flex; }

.cares-lightbox__stage {
  margin: 0;
  max-width: min(1100px, 92vw);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.cares-lightbox__img {
  max-width: 100%; max-height: 78vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  background: var(--c-ink-2);
}
.cares-lightbox__cap {
  color: #fff; font-size: 15px; font-weight: 600;
  text-align: center; max-width: 64ch; line-height: 1.5;
}
.cares-lightbox__counter {
  position: absolute; top: 22px; left: 26px;
  color: rgba(255,255,255,.72);
  font-family: var(--f-mono, monospace); font-size: 13px; letter-spacing: .08em;
}
.cares-lightbox__close,
.cares-lightbox__nav {
  position: absolute;
  color: #fff; line-height: 1;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s ease, transform .16s ease;
}
.cares-lightbox__close:hover,
.cares-lightbox__nav:hover { background: rgba(255,255,255,.22); }
.cares-lightbox__close:focus-visible,
.cares-lightbox__nav:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 2px; }
.cares-lightbox__close {
  top: 16px; right: 20px;
  width: 46px; height: 46px; font-size: 30px;
}
.cares-lightbox__nav {
  top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; font-size: 26px;
}
.cares-lightbox__nav--prev { left: 20px; }
.cares-lightbox__nav--next { right: 20px; }

@media (max-width: 640px) {
  .cares-lightbox__nav { top: auto; bottom: 18px; transform: none; width: 46px; height: 46px; }
  .cares-lightbox__nav--prev { left: calc(50% - 56px); }
  .cares-lightbox__nav--next { right: calc(50% - 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .cares-lightbox { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.cares-gallery__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 26px 16px 12px;
  font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(14,18,30,.82));
}
/* feature tiles */
.cares-gallery__item--wide { grid-column: span 2; }
.cares-gallery__item--tall { grid-row: span 2; }
.cares-gallery__item--big  { grid-column: span 2; grid-row: span 2; }

@media (max-width: 900px) {
  .cares-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .cares-gallery__item--big { grid-column: span 2; }
}
@media (max-width: 520px) {
  .cares-gallery { grid-template-columns: 1fr; }
  .cares-gallery__item--wide, .cares-gallery__item--big { grid-column: span 1; }
}

/* ---------- Safe Driving Essay Scholarship callout ---------- */
.cares-scholarship__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 56px;
  align-items: center;
}
.cares-scholarship__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(212,175,90,.16);
  color: var(--c-gold);
  font-family: var(--f-mono, monospace);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 20px;
}
.cares-scholarship__aside {
  border-left: 4px solid var(--c-gold);
  padding: 6px 0 6px 28px;
}
/* The "Ask about the scholarship" button sits directly under this aside;
   the bridge zeroes Divi module margins so they crowd together. Add a
   gap beneath the aside. (Code module → must out-specify the bridge's
   `.et_pb_code.et_block_module { margin-bottom: 0 }`.) */
.et_pb_section .et_pb_code.cares-scholarship__aside {
  margin-bottom: 32px !important;
}
.cares-scholarship__aside p { margin: 0 0 14px; }
.cares-scholarship__aside p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .cares-scholarship__grid { grid-template-columns: 1fr; gap: 32px; }
  .cares-scholarship__aside { padding-left: 22px; }
}

/* ============================================================
   Contact form — semantic, accessible, brand-tuned.
   ============================================================ */

.contact-form {
  --c-error: #b14a3a;
  max-width: 640px;
}

.contact-form__intro {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
  margin: 0 0 var(--s-6);
}

.contact-form__row {
  margin-bottom: var(--s-5);
}
.contact-form__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
@media (max-width: 640px) {
  .contact-form__row--split { grid-template-columns: 1fr; }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.contact-form__field label {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--c-navy-deep);
}
.contact-form__field label span[aria-hidden] {
  color: var(--c-gold);
  margin-left: 2px;
}

.contact-form__field input,
.contact-form__field textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px rgba(71, 155, 190, 0.18);
}

.contact-form__field input[aria-invalid="true"],
.contact-form__field textarea[aria-invalid="true"] {
  border-color: var(--c-error);
  box-shadow: 0 0 0 3px rgba(177, 74, 58, 0.16);
}

.contact-form__error {
  color: var(--c-error);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  line-height: 1.4;
  margin-top: 6px;
}

/* SMS consent block */
.contact-form__consent {
  padding-block: 14px;
  margin-bottom: var(--s-5);
}
.contact-form__consent label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-ink-2);
  cursor: pointer;
}
.contact-form__consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 2px;
  accent-color: var(--c-teal);
  cursor: pointer;
}

/* Submit + legal stack */
.contact-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.contact-form__actions .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.contact-form__legal {
  font-size: 12px;
  line-height: 1.55;
  color: var(--c-ink-2);
  margin: 0;
  max-width: 60ch;
}
.contact-form__legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact-form__legal a:hover { color: var(--c-teal-deep); }

/* Status / success message */
.contact-form__status {
  margin-top: var(--s-5);
  background: var(--c-paper);
  border-left: 4px solid var(--c-teal);
  padding: 16px;
  font-size: var(--fs-sm);
  color: var(--c-navy-deep);
  font-weight: 600;
  box-shadow: var(--sh-sm);
}

/* ============================================================
   Contact info aside — sticky office details panel.
   ============================================================ */

.contact-info {
  background: var(--c-cream);
  border-left: 3px solid var(--c-teal);
  padding: var(--s-7) var(--s-6);
}

@media (min-width: 1021px) {
  .contact-info {
    position: sticky;
    top: 112px;
  }
}

.contact-info .eyebrow {
  margin: 0 0 var(--s-3);
}

.contact-info > h2 {
  margin-bottom: var(--s-5);
}

/* ---- Map placeholder ---- */
.contact-info__map {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--s-5);
  border-radius: var(--r-md);
}

.contact-info__pin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  line-height: 1;
  color: var(--c-teal);
  text-shadow:
    0 0 0 4px var(--c-paper),
    0 0 0 10px rgba(71, 155, 190, 0.25),
    0 4px 14px rgba(26, 42, 67, 0.35);
  pointer-events: none;
}
/* Use box-shadow on a pseudo to get the actual ring effect */
.contact-info__pin::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-teal);
  box-shadow:
    0 0 0 6px var(--c-paper),
    0 0 0 12px rgba(71, 155, 190, 0.28),
    0 8px 18px rgba(26, 42, 67, 0.35);
}
.contact-info__pin {
  /* Hide the bullet text — we draw the dot with ::before */
  font-size: 0;
}

/* ---- Address ---- */
/* On the Eleventy site the class is on the <address> element directly.
   On WP the class lands on the et_pb_text wrapper and the inner
   <address> picks up its UA default `font-style: italic`. Target both
   the element itself and any nested <address> so the company name
   stays upright. */
.contact-info__addr,
.contact-info__addr address {
  font-style: normal;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-ink-2);
  margin-bottom: var(--s-5);
}
.contact-info__addr strong {
  color: var(--c-navy-deep);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  display: inline-block;
  margin-bottom: 4px;
}

/* ---- Definition list (Phone / Fax / Email) ----
   NOTE on padding-top: when this class lands on a Divi text-module
   wrapper the bridge's `.et_pb_text.et_block_module { padding: 0 }`
   wins over a plain class selector. Higher-specificity selector +
   !important so the gap below the border-top survives. */
.contact-info__list,
.et_pb_text.contact-info__list,
.et_pb_text.cl-richtext .contact-info__list {
  margin: 0 0 var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  border-top: 1px solid var(--c-stone);
  padding-top: var(--s-5) !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.contact-info__list > div {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: baseline;
  gap: var(--s-4);
}
.contact-info__list dt {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--c-teal-deep);
}
.contact-info__list dd {
  margin: 0;
  font-size: 15px;
  color: var(--c-ink);
}
.contact-info__list dd a {
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.contact-info__list dd a:hover {
  border-bottom-color: var(--c-gold);
  color: var(--c-navy-deep);
}

.contact-info__phone {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--c-navy-deep);
}

/* ---- Hours ----
   Same bridge-zero-padding override as the .contact-info__list block.
   The border-top is the HR; padding-top is the gap below it before
   "HOURS" text. */
.contact-info__hours,
.et_pb_text.contact-info__hours {
  border-top: 1px solid var(--c-stone);
  padding-top: var(--s-5) !important;
}
.contact-info__hours .eyebrow {
  margin: 0 0 var(--s-3);
}
.contact-info__hours ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.contact-info__hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: 14px;
  color: var(--c-ink);
}
.contact-info__hours li span:first-child {
  font-weight: 600;
  color: var(--c-navy-deep);
}

/* ============================================================
   Contact page — section-level grid layout.
   ============================================================ */

.contact-main__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: start;
}

.contact-main__form {
  padding-right: 16px;
}

@media (max-width: 1020px) {
  .contact-main__grid {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .contact-main__form {
    padding-right: 0;
  }
}

/* ============================================================
   practice-detail — shared styling for all 9 practice-area
   detail pages, plus the /practice-areas/ index "how we decide"
   block. Pages use the practice-detail.njk partial which already
   reuses .tactic-list (from why-deep.css) and .practice-band /
   .practice-card (from practice-band.css).

   This file adds only the new pieces:
     .draft-banner
     .practice-detail (section base + variants)
     .practice-detail__grid / __head / __body / __para
     .practice-process (numbered method)
     .subtype-grid / .subtype-card
     .case-card
     .practice-faq__*
     .how-we-decide (index page checklist)
   ============================================================ */

/* ---------- 0 · DRAFT banner (shell pages only) ---------- */

.draft-banner {
  background: linear-gradient(90deg, rgba(185,167,85,.18), rgba(185,167,85,.06) 60%, transparent);
  border-top: 1px solid rgba(185,167,85,.45);
  border-bottom: 1px solid rgba(185,167,85,.45);
  padding: 14px 0;
}
.draft-banner__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.draft-banner__tag {
  display: inline-flex;
  align-items: center;
  background: var(--c-gold);
  color: var(--c-navy-deep);
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  border-radius: var(--r-sm);
}
.draft-banner__text {
  margin: 0;
  font-size: 14px;
  color: var(--c-ink-2);
  line-height: 1.55;
  max-width: 64ch;
}

/* ---------- 1 · Section base + heads ---------- */

.practice-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 64px;
  /* Center the shorter column against the taller one (e.g. a short head
     against a long body, or head+figure against body). */
  align-items: center;
}
/* When the head column has a figure underneath, vertically centre
   the head+figure stack against the body text on the right. */
.practice-detail__grid:has(.practice-detail__figure),
.practice-detail__grid:has(figure.practice-detail__figure) {
  align-items: center;
}
@media (max-width: 1020px) {
  .practice-detail__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Intro/problem layout: content (title + body) on the LEFT, photo on the
   RIGHT. Content column is wider than the portrait image; both vertically
   centered. On mobile the content stacks above the image. */
.practice-detail__grid--intro {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
}
@media (max-width: 1020px) {
  .practice-detail__grid--intro { grid-template-columns: 1fr; }
}

.practice-detail__head {
  max-width: 720px;
}
.practice-detail__head--center {
  margin: 0 auto;
  text-align: center;
}
.practice-detail__head--ondark .eyebrow { color: var(--c-gold); }
.practice-detail__head--ondark .lede    { color: rgba(255,255,253,.78); }

.practice-detail__body {
  max-width: 60ch;
}
.practice-detail__para {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--c-ink);
}
.practice-detail__para:last-child { margin-bottom: 0; }

/* ---------- 1a · Side-figure inside head column ---------- */
/* Used on EP&P (and any page that wants a vertical photo paired with
   a section head). Lives under the eyebrow/h2/rule-gold inside the
   left .practice-detail__head column. The selector is scoped to the
   <figure> element so it doesn't double-apply when the same class
   also sits on the outer Divi code-module wrapper. */
figure.practice-detail__figure {
  margin: var(--s-7) 0 0;
  max-width: 100%;
}
figure.practice-detail__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 6px solid var(--c-paper);
  box-shadow: var(--sh-lg);
}

/* Shorter variant — crops a tall 4:5 source down to a 4:3 visible
   aspect so the figure doesn't tower over the head text. */
figure.practice-detail__figure--short img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 1020px) {
  figure.practice-detail__figure { margin-top: var(--s-6); max-width: 520px; }
}

/* ---------- 1b · FAQ section grid (accordion + figure) ---------- */
/* Two-column body row used in the FAQ section: accordion list left
   (3fr / 60%), figure right (2fr / 40%). Figure vertically centres
   against the accordion column. */
.practice-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 64px;
  align-items: center;
  margin-top: var(--s-6);
}
@media (max-width: 1020px) {
  .practice-faq__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* tighten the inherited tactic-list when used inside practice-detail */
.practice-detail__tactics {
  margin-top: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1020px) {
  .practice-detail__tactics {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- 2 · Numbered process ---------- */

.practice-process {
  list-style: none;
  padding: 0;
  margin: var(--s-7) 0 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1020px) { .practice-process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .practice-process { grid-template-columns: 1fr; } }

.practice-process__item {
  position: relative;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-top: 4px solid var(--c-gold);
  padding: 28px 26px 24px;
  display: grid;
  gap: 12px;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.practice-process__item:nth-child(even) { border-top-color: var(--c-teal); }
.practice-process__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

.practice-process__num {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--c-ink-2);
  text-transform: uppercase;
}
.practice-process__h3 {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1;
  color: var(--c-navy-deep);
  margin: 0;
}
.practice-process__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-ink-2);
}

/* ---------- 3 · Sub-type grid (on navy) ---------- */

.subtype-grid {
  list-style: none;
  padding: 0;
  margin: var(--s-7) 0 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1020px) { .subtype-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .subtype-grid { grid-template-columns: 1fr; } }

.subtype-card {
  position: relative;
  background: rgba(255,255,253,.04);
  border: 1px solid rgba(255,255,253,.10);
  border-left: 3px solid var(--c-teal);
  padding: 26px 24px 22px;
  display: grid;
  gap: 8px;
  transition: background var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.subtype-card:nth-child(even) { border-left-color: var(--c-gold); }
.subtype-card:hover {
  background: rgba(255,255,253,.07);
  transform: translateY(-2px);
}

.subtype-card__num {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-gold);
}
.subtype-card__name {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.1;
  color: var(--c-paper);
}
.subtype-card__blurb {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,253,.74);
}

/* ---------- 4 · Sample case card ---------- */

.case-card {
  position: relative;
  margin-top: var(--s-7);
  padding: 40px 36px 32px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-left: 6px solid var(--c-gold);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  display: grid;
  gap: 14px;
  max-width: 720px;
}

.case-card__amount {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--c-navy-deep);
}
.case-card__type {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-teal-deep);
}
.case-card__summary {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--c-ink);
  max-width: 56ch;
}
.case-card__meta {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
}
.case-card__meta div { margin: 0; }
.case-card__meta dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  margin: 0 0 4px;
}
.case-card__meta dd {
  margin: 0;
  font-size: 15px;
  color: var(--c-navy-deep);
  font-weight: 600;
  line-height: 1.5;
}
.case-card__disclaimer {
  margin: 16px 0 0;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--c-ink-2);
  text-transform: uppercase;
  border-top: 1px dashed var(--c-line);
  padding-top: 14px;
}

/* ---------- 5 · FAQ list (native details) ---------- */

.practice-faq__list {
  margin: var(--s-7) 0 0;
  display: grid;
  gap: 12px;
  max-width: 880px;
}

.practice-faq__item {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-teal);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.practice-faq__item[open] {
  background: var(--c-paper);
  border-left-color: var(--c-gold);
  box-shadow: var(--sh-sm);
}

.practice-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c-navy-deep);
  text-transform: none;
}
.practice-faq__q::-webkit-details-marker { display: none; }
.practice-faq__q-text { flex: 1 1 auto; }

.practice-faq__mark {
  flex: 0 0 auto;
  font-family: var(--f-mono);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  color: var(--c-teal-deep);
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--c-teal);
  border-radius: 50%;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.practice-faq__item[open] .practice-faq__mark {
  transform: rotate(45deg);
  background: var(--c-gold);
  color: var(--c-navy-deep);
  border-color: var(--c-gold);
}

.practice-faq__a {
  padding: 0 24px 22px 24px;
}
.practice-faq__a p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-ink);
  max-width: 64ch;
}

.practice-faq__more {
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--c-ink-2);
}
.practice-faq__more a {
  color: var(--c-teal-deep);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.practice-faq__more a:hover { color: var(--c-navy-deep); }

/* ---------- 6 · Index page "how we decide" checklist ---------- */

.how-we-decide__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 1020px) {
  .how-we-decide__grid { grid-template-columns: 1fr; gap: 32px; }
}

.how-we-decide__head {
  max-width: 480px;
}

.how-we-decide__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.how-we-decide__item {
  position: relative;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-gold);
  padding: 22px 24px 22px 84px;
  border-radius: var(--r-md);
}
.how-we-decide__item:nth-child(even) { border-left-color: var(--c-teal); }

.how-we-decide__num {
  position: absolute;
  top: 22px;
  left: 24px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--c-gold-deep);
}
.how-we-decide__item:nth-child(even) .how-we-decide__num { color: var(--c-teal-deep); }

.how-we-decide__h3 {
  margin: 0 0 8px;
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.15;
  color: var(--c-navy-deep);
}

.how-we-decide__item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-ink-2);
  max-width: 60ch;
}