/* Dimopoulos Law — site bundled styles
   Built from Claude Design export 2026-05-25.
   Used by: index.html, FAQ.html, Attorney-*.html, Testimonials.html
*/

/* ===== colors_and_type.css ===== */
/* ============================================================
   Dimopoulos Law Design System — Colors, Type, and Tokens
   ============================================================
   Source of truth: https://www.dimolaw.com/
   Owner-verified: ❌ (palette + fonts inferred — see README Caveats)
   ============================================================ */

/* ---- Fonts ----------------------------------------------- */
/* Loaded via Google Fonts CDN. Substitutions flagged in README. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Color: Brand ------------------------------------- */
  --ink:        #0F2748;   /* primary navy — logo block, hero overlay, footer */
  --ink-soft:   #1A3559;   /* secondary navy — hover */
  --ink-deep:   #081A33;   /* press / extra-dark accent */

  /* Confirmed from live homepage screenshot: brand uses navy on white;
     a desaturated mid-blue accent ("steel") is the secondary, with white
     and warm-neutral paper as supporting tones. There is NO brass/gold
     in the live brand — the earlier brass tokens are kept as alias-only
     for backward compat but are not used by site components. */
  --steel:      #3F6FA8;   /* secondary blue used in hero translucent block */
  --steel-deep: #2A537F;
  --steel-soft: #B8CADC;

  --brass:      var(--steel);       /* legacy alias — do not use in new work */
  --brass-deep: var(--steel-deep);
  --brass-soft: var(--steel-soft);

  /* ---- Color: Neutrals (warm-leaning) ------------------- */
  --bone:       #FBFAF6;   /* page background */
  --paper:      #F6F1E8;   /* editorial section background */
  --paper-deep: #ECE5D4;   /* card divider on paper */

  --slate-900:  #1A2030;   /* darkest body text alt */
  --slate-700:  #3D4658;   /* body copy on light */
  --slate-500:  #6E7689;   /* secondary text, captions */
  --slate-300:  #C9CDD6;   /* hairline borders */
  --slate-200:  #E2E5EB;   /* dividers */
  --slate-100:  #F1F3F6;   /* subtle fill */

  --white:      #FFFFFF;
  --black:      #000000;

  /* ---- Color: Semantic ---------------------------------- */
  --success:        #2F7A4F;
  --success-soft:   #E5F2EB;
  --warn:           #B57A1A;
  --warn-soft:      #FBF1DE;
  --danger:         #B0392E;
  --danger-soft:    #F8E5E2;
  --info:           #2C5E8C;
  --info-soft:      #E3EDF6;

  /* ---- Color: Surfaces (semantic) ----------------------- */
  --bg-page:        var(--bone);
  --bg-surface:     var(--white);
  --bg-editorial:   var(--paper);
  --bg-inverse:     var(--ink);

  --fg-primary:     var(--ink);
  --fg-secondary:   var(--slate-700);
  --fg-muted:       var(--slate-500);
  --fg-inverse:     var(--bone);
  --fg-accent:      var(--brass-deep);

  --border-default: var(--slate-300);
  --border-subtle:  var(--slate-200);
  --border-strong:  var(--slate-700);

  /* ---- Type: Families ----------------------------------- */
  /* Confirmed from screenshot: logo wordmark is a wide classical serif
     (Trajan-like). Hero title and body are a humanist sans. Top nav is
     all-caps tracked sans. Updated mappings accordingly. */
  --serif-display: 'Cormorant Garamond', 'Playfair Display', 'Trajan Pro', Georgia, serif; /* logo, headlines */
  --sans-body:     'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* hero, body, nav */
  --sans-caps:     'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:          ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Type: Scale -------------------------------------- */
  --fs-display:  64px;
  --fs-h1:       44px;
  --fs-h2:       32px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-body-lg:  19px;
  --fs-body:     17px;
  --fs-small:    15px;
  --fs-xs:       13px;
  --fs-eyebrow:  12px;

  --lh-tight:    1.05;
  --lh-snug:     1.15;
  --lh-base:     1.55;
  --lh-loose:    1.7;

  --tr-tight:    -0.02em;
  --tr-snug:     -0.01em;
  --tr-normal:   0;
  --tr-eyebrow:  0.12em;
  --tr-caps:     0.08em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

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

  /* ---- Radii -------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ---- Shadows / elevation ------------------------------ */
  --shadow-1: 0 1px 2px rgba(14,30,51,0.06), 0 2px 8px rgba(14,30,51,0.05);
  --shadow-2: 0 4px 12px rgba(14,30,51,0.08), 0 12px 32px rgba(14,30,51,0.08);
  --shadow-3: 0 12px 40px rgba(14,30,51,0.14);
  --shadow-focus: 0 0 0 3px rgba(168,139,74,0.35);

  /* ---- Layout ------------------------------------------- */
  --max-w:           1240px;
  --max-w-editorial: 680px;
  --nav-h:           80px;
  --nav-h-compact:   64px;

  /* ---- Motion ------------------------------------------- */
  --easing-out:    cubic-bezier(0.2, 0.0, 0.2, 1.0);
  --easing-inout:  cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --dur-fast:      120ms;
  --dur-base:      220ms;
  --dur-slow:      400ms;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html {
  font-family: var(--sans-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

h1, .h1 {
  font-family: var(--serif-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-primary);
  margin: 0 0 var(--space-5);
}

.display {
  font-family: var(--serif-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-primary);
}

h2, .h2 {
  font-family: var(--serif-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-primary);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--serif-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--sans-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: 1.3;
  margin: 0 0 var(--space-3);
  color: var(--fg-primary);
}

p {
  font-family: var(--sans-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-secondary);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

a {
  color: var(--fg-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--dur-fast) var(--easing-out),
              color var(--dur-fast) var(--easing-out);
}
a:hover { text-decoration-thickness: 2px; color: var(--brass-deep); }

small, .small {
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--sans-caps);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
}

/* The signature mixed-weight headline pattern: "Meet Our **Attorneys**" */
.headline-mix {
  font-family: var(--serif-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}
.headline-mix strong {
  font-weight: var(--fw-bold);
  font-style: italic;
}

/* The 80px brass rule used as a section-opener flourish */
.rule-brass {
  display: block;
  width: 80px;
  height: 2px;
  background: var(--brass);
  border: 0;
  margin: 0 0 var(--space-5);
}

code, pre, .mono {
  font-family: var(--mono);
  font-size: 0.93em;
}

::selection {
  background: var(--brass-soft);
  color: var(--ink);
}

:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ===== styles.css (shared + Variation B + nav dropdowns) ===== */
/* ============================================================
   Dimopoulos Homepage v2 — shared styles
   ============================================================ */

* { box-sizing: border-box; }
img { max-width: 100%; display: block; }

:root {
  --hp-ink:        #0F2748;
  --hp-ink-deep:   #081A33;
  --hp-ink-soft:   #1A3559;
  --hp-paper:      #F6F1E9;
  --hp-paper-warm: #EFE7D8;
  --hp-bone:       #FBFAF6;
  --hp-white:      #FFFFFF;
  --hp-rule:       rgba(15,39,72,0.14);
  --hp-rule-soft:  rgba(15,39,72,0.08);
  --hp-mute:       #6B7280;
  --hp-mute-deep:  #3B4658;

  /* Accent — terracotta, used sparingly */
  --hp-accent:      #B85940;
  --hp-accent-deep: #8E3F2C;
  --hp-accent-soft: #E5C9BD;

  --hp-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --hp-sans:  'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Each homepage variation lives inside its own .hp-root so styles are scoped */
.hp-root {
  font-family: var(--hp-sans);
  color: var(--hp-ink);
  background: var(--hp-bone);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.hp-root a { color: inherit; text-decoration: none; }
.hp-shell { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.hp-shell-narrow { max-width: 920px; margin: 0 auto; padding: 0 48px; }

.hp-eyebrow {
  font-family: var(--hp-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--hp-accent-deep);
}
.hp-eyebrow.on-dark { color: var(--hp-accent-soft); }

.hp-rule { width: 36px; height: 1px; background: var(--hp-accent); border: 0; margin: 0; }
.hp-rule.long { width: 80px; }

.hp-cta-primary {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--hp-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 18px 28px; border-radius: 0;
  background: var(--hp-ink); color: var(--hp-bone);
  border: 0; cursor: pointer;
  transition: background 240ms ease, transform 80ms ease, color 240ms ease;
}
.hp-cta-primary:hover { background: var(--hp-accent); color: var(--hp-white); }
.hp-cta-primary .arr { width: 18px; height: 1px; background: currentColor; position: relative; transition: width 240ms ease; }
.hp-cta-primary .arr::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.hp-cta-primary:hover .arr { width: 28px; }

.hp-cta-ghost {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--hp-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hp-ink); cursor: pointer; background: none; border: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--hp-ink);
}
.hp-cta-ghost.on-dark { color: var(--hp-bone); border-bottom-color: var(--hp-bone); }

/* Scroll-reveal */
.hp-reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms ease; }
.hp-reveal.is-visible { opacity: 1; transform: none; }
.hp-reveal-stagger > * { opacity: 0; transform: translateY(12px); transition: opacity 600ms ease, transform 600ms ease; }
.hp-reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.hp-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.hp-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.hp-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.hp-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.hp-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.hp-reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }

/* Reserve space at the top of every page for the portaled nav rail.
   The rail is fixed in viewport space at the same scale as the stage,
   so a design-space spacer of ~76px keeps content below the nav. */
.hp-root,
.bio-root,
.faq-root,
.test-root { padding-top: 76px; }

/* Shared site chrome — top nav (compact, modern: white bar with centered word logo + tabs) */
.hp-nav {
  background: rgba(251,250,246,0.92);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hp-rule-soft);
}
.hp-nav-row {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px 48px;
  gap: 24px;
}
.hp-nav-tabs { display: flex; gap: 28px; align-items: center; }
.hp-nav-tabs a {
  font-size: 12px; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 500;
  color: var(--hp-mute-deep);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: color 200ms ease;
}
.hp-nav-tabs a:hover, .hp-nav-tabs a.is-active { color: var(--hp-ink); }
.hp-nav-tabs a.is-active { position: relative; color: var(--hp-ink); }

/* Dropdown — Attorneys */
.hp-nav-item.has-dropdown { position: relative; display: inline-flex; align-items: center; }
.hp-nav-item .hp-nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.hp-nav-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 8px; height: 5px;
  opacity: 0.4;
  transition: transform 200ms ease, opacity 200ms ease;
  color: currentColor;
}
.hp-nav-item.has-dropdown:hover .hp-nav-caret { transform: rotate(180deg); opacity: 0.85; }

.hp-nav-menu {
  position: absolute; top: calc(100% + 14px); left: 0;
  transform: translateY(-6px);
  min-width: 280px;
  background: var(--hp-bone);
  border: 1px solid var(--hp-rule-soft);
  box-shadow: 0 24px 60px rgba(15, 39, 72, 0.18);
  padding: 8px 0;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 40;
}
.hp-nav-menu::before {
  content: '';
  position: absolute; top: -7px; left: 28px; transform: rotate(45deg);
  width: 12px; height: 12px;
  background: var(--hp-bone);
  border-top: 1px solid var(--hp-rule-soft);
  border-left: 1px solid var(--hp-rule-soft);
}
.hp-nav-item.has-dropdown:hover .hp-nav-menu,
.hp-nav-item.has-dropdown:focus-within .hp-nav-menu {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}
/* Invisible bridge so cursor can travel from tab to menu without closing */
.hp-nav-menu::after {
  content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}

.hp-nav-menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px 22px;
  text-decoration: none;
  text-transform: none; letter-spacing: 0;
  font-size: 16px;
  transition: background 160ms ease;
  min-height: 56px;
}
/* Attorney variant — italic name + small uppercase role */
.hp-nav-menu-item.is-attorney .name {
  font-family: var(--hp-serif); font-weight: 400; font-style: italic;
  font-size: 22px; line-height: 1.1;
  color: var(--hp-ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-align: left;
}
.hp-nav-menu-item.is-attorney .role {
  font-family: var(--hp-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  color: var(--hp-mute);
}
/* Content variant — label (+ optional description below) */
.hp-nav-menu-item:not(.is-attorney) {
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: start;
}
.hp-nav-menu-item .lbl {
  font-family: var(--hp-serif); font-weight: 400;
  font-size: 20px; line-height: 1.15;
  color: var(--hp-ink);
  letter-spacing: -0.005em;
}
.hp-nav-menu-item.has-desc .lbl { font-style: italic; }
.hp-nav-menu-item .desc {
  font-family: var(--hp-sans);
  font-size: 12px; line-height: 1.4;
  color: var(--hp-mute);
}
.hp-nav-menu-item:hover { background: rgba(15, 39, 72, 0.04); }
.hp-nav-menu-item:hover .name,
.hp-nav-menu-item:hover .lbl { color: var(--hp-accent); }

.hp-nav-menu-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px;
  margin-top: 4px;
  border-top: 1px solid var(--hp-rule-soft);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
  color: var(--hp-mute-deep);
  text-decoration: none;
}
.hp-nav-menu-foot .arr { font-size: 14px; }
.hp-nav-menu-foot:hover { color: var(--hp-ink); }

.hp-nav-logo {
  display: flex; align-items: center; cursor: pointer; line-height: 1;
}
.hp-nav-logo img { height: 38px; width: auto; display: block; }
.hp-nav-logo .word {
  font-family: var(--hp-serif); font-weight: 500; font-size: 22px;
  letter-spacing: 0.20em; color: var(--hp-ink);
}
.hp-nav-logo .sub {
  font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--hp-mute); margin-top: 4px; font-weight: 500;
}

.hp-nav-end { display: flex; justify-content: flex-end; gap: 24px; align-items: center; }
.hp-nav-phone {
  font-family: var(--hp-serif); font-style: italic; font-size: 17px; color: var(--hp-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}
.hp-nav-phone:hover { color: var(--hp-accent); border-bottom-color: currentColor; }
.hp-nav-cta {
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 600;
  padding: 10px 16px; border: 1px solid var(--hp-ink); color: var(--hp-ink);
  background: transparent; cursor: pointer;
  transition: all 200ms ease;
}
.hp-nav-cta:hover { background: var(--hp-ink); color: var(--hp-bone); }

/* ============================================================
   Variation A — Refined Editorial
   Portrait-led hero, magazine grid, generous white space.
   ============================================================ */
.hpA-hero {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 64px; align-items: center;
  padding: 80px 48px 100px;
  max-width: 1280px; margin: 0 auto;
}
.hpA-hero-text { display: flex; flex-direction: column; gap: 28px; }
.hpA-hero-eye { display: flex; align-items: center; gap: 14px; }
.hpA-hero-eye .hp-rule { background: var(--hp-accent); }
.hpA-hero h1 {
  font-family: var(--hp-serif);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 86px);
  line-height: 1.02; letter-spacing: -0.02em;
  margin: 0; color: var(--hp-ink);
  text-wrap: balance;
}
.hpA-hero h1 em { font-style: italic; font-weight: 400; }
.hpA-hero h1 .accent { color: var(--hp-accent); font-style: italic; }
.hpA-hero p {
  font-family: var(--hp-serif); font-style: italic;
  font-size: 21px; line-height: 1.55; color: var(--hp-mute-deep);
  max-width: 46ch; margin: 0;
}
.hpA-hero-cta { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding-top: 8px; }
.hpA-hero-meta {
  display: flex; gap: 32px; padding-top: 18px;
  border-top: 1px solid var(--hp-rule); margin-top: 18px;
}
.hpA-hero-meta dt { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hp-mute); margin: 0 0 6px; }
.hpA-hero-meta dd { margin: 0; font-family: var(--hp-serif); font-size: 19px; color: var(--hp-ink); }

.hpA-hero-img {
  position: relative; aspect-ratio: 4/5;
  background: var(--hp-paper);
  overflow: hidden;
}
.hpA-hero-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.02);
}
.hpA-hero-badge {
  position: absolute; top: 28px; left: 28px;
  background: var(--hp-bone); padding: 14px 18px;
  display: flex; flex-direction: column; gap: 4px;
  border-left: 2px solid var(--hp-accent);
}
.hpA-hero-badge .name { font-family: var(--hp-serif); font-size: 18px; line-height: 1; }
.hpA-hero-badge .role { font-size: 10px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--hp-mute); }

.hpA-hero-marquee {
  position: absolute; bottom: 28px; right: -8px;
  background: var(--hp-ink); color: var(--hp-bone);
  padding: 14px 22px;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 500;
}
.hpA-hero-marquee em { font-style: normal; color: var(--hp-accent-soft); }

/* About / philosophy band */
.hpA-about {
  background: var(--hp-paper);
  padding: 100px 48px;
}
.hpA-about-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start;
}
.hpA-about h2 {
  font-family: var(--hp-serif); font-weight: 400;
  font-size: clamp(36px, 4vw, 56px); line-height: 1.1; letter-spacing: -0.015em;
  margin: 16px 0 0; color: var(--hp-ink);
}
.hpA-about h2 em { font-style: italic; color: var(--hp-accent); }
.hpA-about-body p {
  font-size: 18px; line-height: 1.7; color: var(--hp-mute-deep);
  max-width: 56ch; margin: 0 0 22px;
}
.hpA-about-body p strong { color: var(--hp-ink); font-weight: 600; }
.hpA-about-body p:first-child::first-letter {
  font-family: var(--hp-serif); font-size: 76px; float: left; line-height: 0.85;
  padding: 8px 12px 0 0; color: var(--hp-accent); font-weight: 500;
}

/* Practice areas — magazine grid */
.hpA-practice { padding: 100px 48px; max-width: 1280px; margin: 0 auto; }
.hpA-practice-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; margin-bottom: 56px; }
.hpA-practice h2 {
  font-family: var(--hp-serif); font-weight: 400;
  font-size: clamp(36px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.015em;
  margin: 18px 0 0; color: var(--hp-ink); max-width: 18ch;
}
.hpA-practice h2 em { font-style: italic; }
.hpA-practice-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hp-rule);
  border: 1px solid var(--hp-rule);
}
.hpA-pa {
  background: var(--hp-bone); padding: 36px 32px 32px;
  display: flex; flex-direction: column; gap: 16px; min-height: 240px;
  cursor: pointer; position: relative;
  transition: background 240ms ease;
}
.hpA-pa:hover { background: var(--hp-paper); }
.hpA-pa .num { font-size: 11px; letter-spacing: 0.22em; color: var(--hp-mute); font-weight: 600; }
.hpA-pa h3 {
  font-family: var(--hp-serif); font-weight: 500; font-size: 28px;
  line-height: 1.1; margin: 0; color: var(--hp-ink);
}
.hpA-pa p { font-size: 14px; line-height: 1.55; color: var(--hp-mute-deep); margin: 0; }
.hpA-pa .more {
  margin-top: auto; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600; color: var(--hp-accent-deep); display: inline-flex; gap: 10px; align-items: center;
}
.hpA-pa .more::after { content: '→'; transition: transform 200ms ease; }
.hpA-pa:hover .more::after { transform: translateX(4px); }

/* Attorneys */
.hpA-attorneys { background: var(--hp-ink); color: var(--hp-bone); padding: 100px 48px; }
.hpA-attorneys-inner { max-width: 1280px; margin: 0 auto; }
.hpA-attorneys h2 {
  font-family: var(--hp-serif); font-weight: 400;
  font-size: clamp(36px, 4vw, 56px); line-height: 1.05;
  margin: 18px 0 56px; max-width: 18ch;
}
.hpA-attorneys h2 em { font-style: italic; color: var(--hp-accent-soft); }
.hpA-attorney-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hpA-att-card { display: flex; flex-direction: column; gap: 16px; cursor: pointer; }
.hpA-att-photo { aspect-ratio: 4/5; background: var(--hp-ink-soft); overflow: hidden; }
.hpA-att-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.hpA-att-card:hover .hpA-att-photo img { transform: scale(1.03); }
.hpA-att-meta { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.hpA-att-meta .name { font-family: var(--hp-serif); font-size: 28px; font-weight: 500; line-height: 1.1; }
.hpA-att-meta .role { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hp-accent-soft); }

/* Stats */
.hpA-stats {
  padding: 80px 48px; background: var(--hp-paper);
}
.hpA-stats-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  border-top: 1px solid var(--hp-rule); border-bottom: 1px solid var(--hp-rule);
  padding: 56px 0;
}
.hpA-stat { display: flex; flex-direction: column; gap: 8px; }
.hpA-stat .v {
  font-family: var(--hp-serif); font-weight: 400;
  font-size: clamp(48px, 5vw, 72px); line-height: 1; color: var(--hp-ink);
  letter-spacing: -0.02em;
}
.hpA-stat .v em { font-style: italic; color: var(--hp-accent); }
.hpA-stat .l { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hp-mute-deep); font-weight: 500; }

/* Testimonials */
.hpA-testimonials { padding: 100px 48px; max-width: 1280px; margin: 0 auto; }
.hpA-test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hpA-test {
  border-top: 1px solid var(--hp-accent);
  padding-top: 28px;
  display: flex; flex-direction: column; gap: 22px;
}
.hpA-test blockquote {
  font-family: var(--hp-serif); font-style: italic; font-weight: 400;
  font-size: 22px; line-height: 1.45; color: var(--hp-ink); margin: 0;
}
.hpA-test .att { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.hpA-test .att .who { font-family: var(--hp-serif); font-size: 18px; }
.hpA-test .att .what { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hp-mute); }

/* Newsroom + Awards + Contact band — shared composition */
.hpA-news { padding: 100px 48px; background: var(--hp-paper); }
.hpA-news-inner { max-width: 1280px; margin: 0 auto; }
.hpA-news h2 { font-family: var(--hp-serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); margin: 16px 0 48px; }
.hpA-news-list { display: flex; flex-direction: column; }
.hpA-news-item {
  display: grid; grid-template-columns: 120px 1fr 2fr 120px;
  gap: 32px; align-items: center; padding: 24px 0;
  border-top: 1px solid var(--hp-rule); cursor: pointer;
  transition: background 200ms ease;
}
.hpA-news-item:last-child { border-bottom: 1px solid var(--hp-rule); }
.hpA-news-item:hover { background: rgba(255,255,255,0.5); }
.hpA-news-item .kind { font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 600; color: var(--hp-accent-deep); }
.hpA-news-item .when { font-family: var(--hp-serif); font-style: italic; font-size: 16px; color: var(--hp-mute-deep); }
.hpA-news-item .title { font-family: var(--hp-serif); font-size: 22px; line-height: 1.3; color: var(--hp-ink); }
.hpA-news-item .read { font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--hp-mute); text-align: right; }

.hpA-awards { padding: 80px 48px; max-width: 1280px; margin: 0 auto; }
.hpA-awards-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; align-items: center;
  border-top: 1px solid var(--hp-rule); border-bottom: 1px solid var(--hp-rule);
  padding: 40px 0;
}
.hpA-award { display: flex; align-items: center; justify-content: center; height: 86px; }
.hpA-award img { max-height: 100%; max-width: 100%; object-fit: contain; filter: grayscale(1) opacity(0.7); transition: filter 240ms ease; }
.hpA-award:hover img { filter: grayscale(0) opacity(1); }

.hpA-faq { padding: 100px 48px; max-width: 1080px; margin: 0 auto; }
.hpA-faq h2 { font-family: var(--hp-serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 48px); margin: 16px 0 48px; }
.hpA-faq-item { border-top: 1px solid var(--hp-rule); padding: 24px 0; }
.hpA-faq-item:last-child { border-bottom: 1px solid var(--hp-rule); }
.hpA-faq-item summary {
  font-family: var(--hp-serif); font-size: 24px; font-weight: 500;
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
  color: var(--hp-ink);
}
.hpA-faq-item summary::-webkit-details-marker { display: none; }
.hpA-faq-item summary::after { content: '+'; font-family: var(--hp-sans); font-weight: 300; font-size: 26px; color: var(--hp-accent); transition: transform 200ms ease; }
.hpA-faq-item[open] summary::after { content: '–'; }
.hpA-faq-item .a { padding-top: 14px; font-size: 16px; line-height: 1.7; color: var(--hp-mute-deep); max-width: 64ch; }

/* Contact band */
.hpA-contact {
  background: var(--hp-ink); color: var(--hp-bone);
  padding: 96px 48px;
}
.hpA-contact-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: end;
}
.hpA-contact h2 {
  font-family: var(--hp-serif); font-weight: 400;
  font-size: clamp(40px, 5vw, 72px); line-height: 1.05; margin: 16px 0 24px;
  letter-spacing: -0.015em; max-width: 14ch;
}
.hpA-contact h2 em { font-style: italic; color: var(--hp-accent-soft); }
.hpA-contact .lead { font-family: var(--hp-serif); font-style: italic; font-size: 21px; color: rgba(251,250,246,0.78); max-width: 50ch; margin: 0 0 32px; }
.hpA-contact-info { display: flex; flex-direction: column; gap: 18px; }
.hpA-contact-info dt { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hp-accent-soft); margin: 0 0 4px; }
.hpA-contact-info dd { font-family: var(--hp-serif); font-size: 22px; margin: 0; color: var(--hp-bone); }

/* Footer */
.hpA-footer { background: var(--hp-ink-deep); color: rgba(251,250,246,0.72); padding: 36px 48px; }
.hpA-footer-row { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 12px; }

/* ============================================================
   Variation B — Bold Contemporary
   Asymmetric grid, big sans label + huge serif, alternating bands.
   ============================================================ */
.hpB-hero {
  position: relative;
  width: 100%;
  height: 88vh;
  min-height: 720px;
  max-height: 1080px;
  background: var(--hp-ink);
  overflow: hidden;
}
/* When "More about Gus" is expanded, release the fixed/max height + the
   overflow:hidden clip so the extra paragraph can flow instead of being
   cropped at the panel edge. Image side stretches to match. */
.hpB-hero:has(details.hpB-hero-more[open]) {
  height: auto;
  min-height: 720px;
  max-height: none;
  overflow: visible;
}
.hpB-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%; height: 100%;
}
.hpB-hero-img-side {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--hp-ink);
}
.hpB-hero-img-side .hpB-hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* `center top` pins the top edge of the photo to the top of the panel
     so Gus's head is never cropped at any viewport width. The bottom of
     the image gets cropped instead, which is the safer trade. */
  object-position: center top;
  filter: contrast(1.05) saturate(1.05);
}
.hpB-hero-tag {
  position: absolute; top: 32px; left: 32px; z-index: 2;
  background: var(--hp-accent); color: var(--hp-bone);
  padding: 14px 18px; font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 600; text-align: center;
}
.hpB-hero-tag .num { display: block; font-family: var(--hp-serif); font-size: 38px; letter-spacing: 0; line-height: 1; margin-top: 4px; font-style: italic; }
.hpB-hero-text-side {
  display: flex; align-items: center;
  background: var(--hp-ink); color: var(--hp-bone);
  padding: 48px 64px;
}
.hpB-hero-text {
  display: flex; flex-direction: column; gap: 20px;
  color: var(--hp-bone);
  max-width: 100%;
}
.hpB-label {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600; color: var(--hp-mute-deep);
}
.hpB-label::before { content: ''; width: 32px; height: 1px; background: var(--hp-accent); }
.hpB-hero h1 {
  font-family: var(--hp-serif); font-weight: 400;
  font-size: clamp(48px, 4.4vw, 86px);
  line-height: 0.98; letter-spacing: -0.02em;
  margin: 4px 0; color: var(--hp-bone);
  max-width: 14ch;
}
.hpB-hero h1 em { font-style: italic; font-weight: 400; }
.hpB-hero h1 .accent { color: var(--hp-accent-soft, #E5C9BD); font-style: italic; display: inline-block; }
.hpB-label {
  color: rgba(232,228,220,0.85);
}
.hpB-label::before { background: var(--hp-accent-soft, #E5C9BD); }
.hpB-hero-sub {
  font-family: var(--hp-sans); font-weight: 400;
  font-size: 19px; line-height: 1.6; color: rgba(232,228,220,0.86);
  max-width: 52ch; margin: 0;
}

/* Expandable "more about Gus" disclosure under hero sub */
.hpB-hero-more {
  margin-top: 18px;
  max-width: 60ch;
}
.hpB-hero-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 8px 0;
  font-family: var(--hp-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hp-accent-soft, #E5C9BD);
  border-bottom: 1px solid rgba(229, 201, 189, 0.35);
  width: max-content;
  transition: color 200ms ease, border-color 200ms ease;
}
.hpB-hero-more > summary::-webkit-details-marker { display: none; }
.hpB-hero-more > summary:hover {
  color: #fff;
  border-bottom-color: rgba(229, 201, 189, 0.7);
}
.hpB-hero-more > summary .chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: transform 320ms cubic-bezier(0.22, 0.94, 0.32, 1), background 200ms ease, color 200ms ease;
}
.hpB-hero-more[open] > summary .chev { transform: rotate(180deg); }
.hpB-hero-more > summary:hover .chev {
  background: var(--hp-accent-soft, #E5C9BD);
  color: var(--hp-deep, #0F2748);
}
.hpB-hero-more > summary .lbl { line-height: 1; }
.hpB-hero-more[open] > summary .lbl::after { content: ' — less'; opacity: 0.6; }
.hpB-hero-more > p {
  font-family: var(--hp-sans);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(232, 228, 220, 0.78);
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(229, 201, 189, 0.12);
  max-width: 60ch;
  animation: hpB-hero-more-fade 360ms cubic-bezier(0.22, 0.94, 0.32, 1);
}
/* "Read Gus's full profile →" link under the expanded blurb. Sits on the
   dark hero so we override the inherited paragraph color. */
.hpB-hero-more-link {
  margin-top: 14px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  font-size: 13px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.hpB-hero-more-link a {
  color: var(--hp-accent-soft, #E5C9BD);
  text-decoration: none;
  border-bottom: 1px solid rgba(229, 201, 189, 0.4);
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}
.hpB-hero-more-link a:hover {
  color: #fff;
  border-bottom-color: #fff;
}
.hpB-hero-more-link .arr {
  display: inline-block;
  margin-left: 4px;
  transition: transform 200ms ease;
}
.hpB-hero-more-link a:hover .arr { transform: translateX(3px); }
@keyframes hpB-hero-more-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hpB-hero-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding-top: 16px; }
.hpB-hero-actions .hp-cta-primary { background: var(--hp-bone); color: var(--hp-ink); }
.hpB-hero-actions .hp-cta-primary:hover { background: var(--hp-accent); color: var(--hp-bone); }
.hpB-hero-actions .hp-cta-ghost.on-dark { color: var(--hp-bone); }

/* ============================================================
   Awards Ticker (replaces the locations marquee)
   3 variants on the same navy band: names · badges · stacked
   ============================================================ */
.hpB-marquee {
  background: var(--hp-accent); color: var(--hp-bone);
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid rgba(0,0,0,0.16);
  border-bottom: 1px solid rgba(0,0,0,0.16);
  position: relative;
}
/* Soft edge fade so items enter/exit gracefully */
.hpB-marquee::before,
.hpB-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 96px;
  pointer-events: none; z-index: 2;
}
.hpB-marquee::before { left: 0; background: linear-gradient(to right, var(--hp-accent), transparent); }
.hpB-marquee::after  { right: 0; background: linear-gradient(to left,  var(--hp-accent), transparent); }

.hpB-marquee-track {
  display: inline-flex; align-items: center;
  animation: hpB-marq 56s linear infinite;
  will-change: transform;
}
@keyframes hpB-marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes hpB-marq-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.hpB-tick-row { display: inline-flex; align-items: center; }

/* ---------- V1: Names ---------- */
.hpB-ticker--names { padding: 26px 0; }
.hpB-tick-names .hpB-tick-row {
  gap: 56px; padding-right: 56px;
  font-family: var(--hp-serif); font-style: italic; font-weight: 400;
  font-size: 32px; letter-spacing: -0.005em;
  color: var(--hp-bone);
}
.hpB-tick-names .hpB-tick-orn {
  font-style: normal; font-size: 12px; letter-spacing: 0;
  color: rgba(255, 248, 232, 0.55);
  transform: translateY(-2px);
}

/* ---------- V2: Badges ---------- */
.hpB-ticker--badges { padding: 18px 0; background: #2F5A8A; }
.hpB-ticker--badges::before { background: linear-gradient(to right, #2F5A8A, transparent); }
.hpB-ticker--badges::after  { background: linear-gradient(to left,  #2F5A8A, transparent); }
.hpB-tick-badges-track .hpB-tick-row { gap: 40px; padding-right: 40px; }
.hpB-tick-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 88px; width: 132px;
  padding: 10px 14px;
  background: rgba(255, 248, 232, 0.96);
  border: 1px solid rgba(255, 248, 232, 0.4);
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0, 20, 50, 0.18);
}
.hpB-tick-badge img {
  max-height: 100%; max-width: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- V3: Stacked (awards over locations, opposite directions) ---------- */
.hpB-ticker--stacked { padding: 12px 0; }
.hpB-ticker-stack { display: flex; flex-direction: column; gap: 6px; }
.hpB-ticker--stacked .hpB-tick-names {
  animation: hpB-marq 64s linear infinite;
}
.hpB-ticker--stacked .hpB-tick-names .hpB-tick-row {
  gap: 44px; padding-right: 44px;
  font-family: var(--hp-serif); font-style: italic;
  font-size: 24px; color: var(--hp-bone);
}
.hpB-ticker--stacked .hpB-tick-names .hpB-tick-orn {
  font-style: normal; font-size: 10px; color: rgba(255, 248, 232, 0.45);
  transform: translateY(-1px);
}
.hpB-ticker--stacked .hpB-tick-locs {
  animation: hpB-marq-rev 72s linear infinite;
}
.hpB-ticker--stacked .hpB-tick-locs .hpB-tick-row {
  gap: 38px; padding-right: 38px;
  font-family: var(--hp-sans); font-weight: 500;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255, 248, 232, 0.78);
}
.hpB-tick-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255, 248, 232, 0.5);
  display: inline-block;
}

/* About / philosophy — asymmetric */
.hpB-about { padding: 120px 48px; background: var(--hp-bone); }
.hpB-about-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 380px 1fr; gap: 80px; align-items: start; }
.hpB-about-side { position: sticky; top: 110px; }
.hpB-about-side h2 { font-family: var(--hp-serif); font-weight: 400; font-size: clamp(40px, 4.5vw, 64px); line-height: 1.02; letter-spacing: -0.02em; margin: 16px 0 24px; }
.hpB-about-side h2 em { font-style: italic; color: var(--hp-accent); }
.hpB-about-side p { font-family: var(--hp-serif); font-style: italic; font-size: 18px; color: var(--hp-mute-deep); }
.hpB-about-prose { display: flex; flex-direction: column; gap: 20px; max-width: 62ch; padding-top: 8px; }
.hpB-about-prose p { font-size: 18px; line-height: 1.65; color: var(--hp-ink); margin: 0; }
.hpB-about-prose p.lead { font-family: var(--hp-serif); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.45; color: var(--hp-ink); letter-spacing: -0.005em; }
.hpB-about-prose p em { font-style: italic; color: var(--hp-accent); }
.hpB-about-points { display: flex; flex-direction: column; gap: 28px; }
.hpB-point { display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: start; padding: 24px 0; border-top: 1px solid var(--hp-rule); }
.hpB-point .n { font-family: var(--hp-serif); font-style: italic; font-size: 36px; color: var(--hp-accent); line-height: 1; }
.hpB-point h3 { font-family: var(--hp-serif); font-size: 28px; font-weight: 500; margin: 0 0 8px; }
.hpB-point p { font-size: 16px; line-height: 1.6; color: var(--hp-mute-deep); margin: 0; max-width: 50ch; }

/* Practice areas — overlapping image-text */
.hpB-practice { background: var(--hp-paper); padding: 120px 48px; }
.hpB-practice-head { max-width: 1280px; margin: 0 auto 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.hpB-practice-head h2 { font-family: var(--hp-serif); font-weight: 400; font-size: clamp(48px, 5.5vw, 88px); line-height: 0.98; letter-spacing: -0.025em; margin: 0; }
.hpB-practice-head h2 em { font-style: italic; color: var(--hp-accent); }
.hpB-practice-head p { font-family: var(--hp-serif); font-style: italic; font-size: 19px; line-height: 1.55; color: var(--hp-mute-deep); margin: 0; max-width: 56ch; }
.hpB-pa-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.hpB-pa {
  background: var(--hp-bone);
  padding: 40px 32px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 280px; cursor: pointer; position: relative;
  transition: background 240ms ease, color 240ms ease;
}
.hpB-pa:hover { background: var(--hp-ink); color: var(--hp-bone); }
.hpB-pa .n { font-size: 11px; letter-spacing: 0.22em; color: var(--hp-mute); font-weight: 600; }
.hpB-pa:hover .n { color: var(--hp-accent-soft); }
.hpB-pa h3 { font-family: var(--hp-serif); font-size: 32px; font-weight: 500; line-height: 1.05; margin: 0; }
.hpB-pa p { font-size: 14px; line-height: 1.55; color: var(--hp-mute-deep); margin: 0; }
.hpB-pa:hover p { color: rgba(251,250,246,0.78); }
.hpB-pa .arr { margin-top: auto; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--hp-accent-deep); }
.hpB-pa:hover .arr { color: var(--hp-accent-soft); }
.hpB-pa.feature { grid-row: span 2; min-height: auto; padding: 0; overflow: hidden; }
.hpB-pa.feature .img { aspect-ratio: 1/1; overflow: hidden; }
.hpB-pa.feature .img img { width: 100%; height: 100%; object-fit: cover; }
.hpB-pa.feature .body { padding: 32px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.hpB-pa.feature.feature--image { display: flex; }
.hpB-pa.feature.feature--image:hover { background: transparent; }
.hpB-pa.feature.feature--image .img { aspect-ratio: auto; width: 100%; height: 100%; flex: 1; }
.hpB-pa.feature.feature--image .img img { object-position: center 18%; }

/* Stats — big horizontal */
.hpB-stats { background: var(--hp-ink); color: var(--hp-bone); padding: 80px 48px; }
.hpB-stats-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px;
  align-items: end;
}
.hpB-stat { border-top: 1px solid var(--hp-accent); padding-top: 22px; }
.hpB-stat .v { font-family: var(--hp-serif); font-size: clamp(56px, 6vw, 88px); font-weight: 400; line-height: 1; letter-spacing: -0.025em; }
.hpB-stat .v em { font-style: italic; color: var(--hp-accent-soft); }
.hpB-stat .l { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 12px; color: rgba(251,250,246,0.72); }

/* Attorneys — horizontal scroll-feel cards */
.hpB-attorneys { padding: 120px 48px; background: var(--hp-bone); }
.hpB-attorneys-inner { max-width: 1280px; margin: 0 auto; }
.hpB-attorneys-head { display: grid; grid-template-columns: 1fr 1.45fr; gap: 64px; align-items: start; margin-bottom: 56px; }
.hpB-attorneys-head h2 { font-family: var(--hp-serif); font-weight: 400; font-size: clamp(48px, 5.5vw, 88px); line-height: 0.98; letter-spacing: -0.025em; margin: 16px 0 0; }
.hpB-attorneys-head h2 em { font-style: italic; color: var(--hp-accent); }
.hpB-att-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hpB-att {
  display: flex; flex-direction: column; gap: 16px; cursor: pointer;
  transition: transform 400ms ease;
}
.hpB-att:hover { transform: translateY(-6px); }
.hpB-att .photo { aspect-ratio: 4/5; overflow: hidden; background: var(--hp-paper); }
.hpB-att .photo img { width: 100%; height: 100%; object-fit: cover; }
.hpB-att .meta { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.hpB-att .name { font-family: var(--hp-serif); font-size: 30px; font-weight: 500; line-height: 1.05; color: var(--hp-ink); }
.hpB-att .role { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--hp-accent-deep); }

/* Testimonials — single big quote rotating */
.hpB-testimonials {
  padding: 72px 48px 64px;
  background: var(--hp-ink); color: var(--hp-bone);
  position: relative;
}
.hpB-testimonials-inner { max-width: 1280px; margin: 0 auto; text-align: center; }
.hpB-test-mark { font-family: var(--hp-serif); font-size: 72px; font-style: italic; color: var(--hp-accent); line-height: 0.6; margin: 0; }
.hpB-test-quote {
  font-family: var(--hp-serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.35;
  margin: 12px 0 20px; text-wrap: balance; max-width: 60ch; margin-left: auto; margin-right: auto;
}
.hpB-test-author { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hp-accent-soft); }
.hpB-test-dots { display: flex; justify-content: center; gap: 8px; }
.hpB-test-dots button { width: 8px; height: 8px; padding: 0; border: 0; background: rgba(251,250,246,0.3); border-radius: 50%; cursor: pointer; transition: all 200ms ease; }
.hpB-test-dots button.is-active { background: var(--hp-accent); width: 28px; border-radius: 4px; }
/* Nav row — prev arrow | next arrow — sits centered below the quote.
   Inline-flex centers under the parent's text-align: center context. */
.hpB-test-nav {
  display: inline-flex; align-items: center; gap: 56px;
  margin-top: 28px;
}
.hpB-test-arrow {
  appearance: none;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(251, 250, 246, 0.28);
  border-radius: 50%;
  color: rgba(251, 250, 246, 0.85);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.hpB-test-arrow:hover {
  background: rgba(251, 250, 246, 0.12);
  border-color: rgba(251, 250, 246, 0.6);
  color: #fff;
}
.hpB-test-arrow:active { transform: scale(0.94); }
.hpB-test-arrow:focus-visible {
  outline: 2px solid var(--hp-accent-soft, #E5C9BD);
  outline-offset: 3px;
}
.hpB-test-lede {
  max-width: 64ch;
  margin: 0 auto 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(229, 201, 189, 0.18);
}
.hpB-test-lede p {
  font-family: var(--hp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(251, 250, 246, 0.78);
  margin: 0;
  letter-spacing: -0.005em;
}
.hpB-test-cta { margin-top: 28px; }
.hpB-test-cta .hp-cta-primary { display: inline-flex; }

/* Newsroom — big cards */
.hpB-news { padding: 120px 48px; background: var(--hp-paper); }
.hpB-news-inner { max-width: 1280px; margin: 0 auto; }
.hpB-news-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 56px; gap: 32px; flex-wrap: wrap; }
.hpB-news-head h2 { font-family: var(--hp-serif); font-weight: 400; font-size: clamp(40px, 4.5vw, 64px); line-height: 1; margin: 16px 0 0; }
.hpB-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hpB-news-card {
  background: var(--hp-bone); padding: 32px 28px 28px;
  display: flex; flex-direction: column; gap: 16px; min-height: 240px;
  cursor: pointer; transition: background 240ms ease;
  border-top: 1px solid var(--hp-accent);
}
.hpB-news-card:hover { background: var(--hp-white); }
.hpB-news-card .row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hp-mute); font-weight: 600; }
.hpB-news-card .row .kind { color: var(--hp-accent-deep); }
.hpB-news-card h3 { font-family: var(--hp-serif); font-size: 24px; font-weight: 500; line-height: 1.25; margin: auto 0 0; color: var(--hp-ink); }

/* Awards — light band with full-color badges, matching the live site */
.hpB-awards { background: var(--hp-paper); color: var(--hp-ink); padding: 96px 48px; }
.hpB-awards-inner { max-width: 1280px; margin: 0 auto; }
.hpB-awards-label {
  display: block;
  text-align: center;
  font-family: var(--hp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--hp-deep);
  margin-bottom: 56px;
  text-wrap: balance;
}
.hpB-awards-label em { font-style: italic; color: var(--hp-accent); }
.hpB-awards-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px 24px;
  align-items: center;
  justify-items: center;
}
.hpB-award {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  width: 100%;
  padding: 4px;
}
.hpB-award img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform 240ms ease;
}
.hpB-award:hover img { transform: scale(1.04); }

/* FAQ — two-col */
.hpB-faq { padding: 120px 48px; background: var(--hp-bone); }
.hpB-faq-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 380px 1fr; gap: 80px; align-items: start; }
.hpB-faq-side h2 { font-family: var(--hp-serif); font-weight: 400; font-size: clamp(40px, 4.5vw, 64px); line-height: 1.02; letter-spacing: -0.02em; margin: 16px 0 16px; }
.hpB-faq-side h2 em { font-style: italic; color: var(--hp-accent); }
.hpB-faq-side p { font-family: var(--hp-serif); font-style: italic; font-size: 18px; color: var(--hp-mute-deep); }
.hpB-faq-phone {
  font-style: normal;
  font-family: var(--hp-sans);
  font-weight: 600;
  font-size: 17px;
  color: var(--hp-deep);
  text-decoration: none;
  border-bottom: 1.5px solid var(--hp-accent);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: color 180ms ease, border-color 180ms ease;
}
.hpB-faq-phone:hover { color: var(--hp-accent); border-bottom-color: var(--hp-deep); }

/* Callout linking to the full FAQ page */
.hpB-faq-callout {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 32px;
  padding: 24px 24px 22px;
  background: var(--hp-bone);
  border: 1px solid var(--hp-rule);
  border-left: 2px solid var(--hp-accent);
  text-decoration: none;
  color: var(--hp-ink);
  transition: background 240ms ease, border-color 240ms ease, transform 240ms ease;
  max-width: 320px;
}
.hpB-faq-callout:hover {
  background: #fff;
  border-color: var(--hp-accent);
  transform: translateY(-1px);
}
.hpB-faq-callout .meta {
  display: flex; align-items: center; gap: 12px;
}
.hpB-faq-callout .eye {
  font-family: var(--hp-sans);
  font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--hp-accent);
}
.hpB-faq-callout .cnt {
  font-family: var(--hp-serif); font-style: italic;
  font-size: 13px; color: var(--hp-mute);
  position: relative; padding-left: 14px;
}
.hpB-faq-callout .cnt::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 6px; height: 1px; background: var(--hp-mute);
}
.hpB-faq-callout .lbl {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--hp-serif); font-weight: 400; font-style: italic;
  font-size: 26px; line-height: 1.1;
  color: var(--hp-ink);
  letter-spacing: -0.01em;
}
.hpB-faq-callout:hover .lbl { color: var(--hp-accent); }
.hpB-faq-callout .arr {
  width: 20px; height: 1px; background: currentColor;
  position: relative;
  transition: width 240ms ease;
}
.hpB-faq-callout .arr::after {
  content: ''; position: absolute; right: 0; top: -4px;
  width: 8px; height: 8px;
  border-right: 1px solid currentColor; border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.hpB-faq-callout:hover .arr { width: 28px; }
.hpB-faq-list details { border-top: 1px solid var(--hp-rule); padding: 28px 0; }
.hpB-faq-list details:last-child { border-bottom: 1px solid var(--hp-rule); }
.hpB-faq-list summary {
  list-style: none; cursor: pointer;
  font-family: var(--hp-serif); font-size: 26px; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
}
.hpB-faq-list summary::-webkit-details-marker { display: none; }
.hpB-faq-list summary::after { content: '+'; font-family: var(--hp-sans); font-weight: 300; font-size: 28px; color: var(--hp-accent); }
.hpB-faq-list details[open] summary::after { content: '–'; }
.hpB-faq-list .a { padding-top: 16px; font-size: 16px; line-height: 1.7; color: var(--hp-mute-deep); max-width: 64ch; }

/* Contact band — Variation B */
.hpB-contact { background: var(--hp-accent); color: var(--hp-bone); padding: 96px 48px; }
.hpB-contact-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: end; }
.hpB-contact h2 { font-family: var(--hp-serif); font-weight: 400; font-size: clamp(48px, 5.5vw, 96px); line-height: 0.98; letter-spacing: -0.03em; margin: 16px 0 24px; }
.hpB-contact h2 em { font-style: italic; }
.hpB-contact .lead { font-family: var(--hp-serif); font-style: italic; font-size: 22px; max-width: 44ch; margin: 0 0 36px; color: #fff; opacity: 1; }
.hpB-contact-info { display: flex; flex-direction: column; gap: 18px; padding: 32px 36px; background: rgba(0,0,0,0.28); }
.hpB-contact-info dt { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.95); font-weight: 600; opacity: 1; margin: 0 0 4px; }
.hpB-contact-info dd { font-family: var(--hp-serif); font-size: 22px; margin: 0; color: #fff; }
.hpB-contact .hp-cta-primary { background: var(--hp-bone); color: var(--hp-ink); }
.hpB-contact .hp-cta-primary:hover { background: var(--hp-ink); color: var(--hp-bone); }

/* Social row on the contact band */
/* Right-aligned social strip that sits between the awards ticker
   and the About section. Same icons as the dark contact-social block
   below, restyled for the light bone background. */
.hpB-social-strip {
  background: var(--hp-bone);
  padding: 22px 48px 0;
}
.hpB-social-strip-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px;
}
.hpB-social-strip .lbl {
  font-family: var(--hp-sans);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600;
  color: var(--hp-mute);
}
.hpB-social-strip .rule {
  width: 28px; height: 1px;
  background: rgba(15, 39, 72, 0.22);
}
.hpB-social-strip a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(15, 39, 72, 0.2);
  border-radius: 50%;
  color: var(--hp-deep);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease, color 220ms ease;
}
.hpB-social-strip a:hover {
  background: var(--hp-deep);
  border-color: var(--hp-deep);
  color: var(--hp-bone);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .hpB-social-strip { padding: 16px 20px 0; }
  .hpB-social-strip a { width: 36px; height: 36px; }
}

.hpB-contact-social {
  display: flex; align-items: center; gap: 16px;
  margin-top: 36px;
}
.hpB-contact-social .lbl {
  font-family: var(--hp-sans);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600;
  color: rgba(251, 250, 246, 0.72);
}
.hpB-contact-social .rule {
  width: 28px; height: 1px;
  background: rgba(251, 250, 246, 0.4);
}
.hpB-contact-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(251, 250, 246, 0.32);
  border-radius: 50%;
  color: var(--hp-bone);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease, color 220ms ease;
}
.hpB-contact-social a:hover {
  background: var(--hp-bone);
  border-color: var(--hp-bone);
  color: var(--hp-accent);
  transform: translateY(-2px);
}

/* ============================================================
   Variation C — "The Verdict"
   Bold direction, on the shared paper palette (no pure black).
   Stacked headline with one word filled, one outlined, plus a
   centered cut-out portrait. Terracotta accent (shared system).
   ============================================================ */
.hpC3-root {
  --c3-bg:    #EFE7D8;          /* paper-warm — matches portrait studio bg */
  --c3-bg-2:  #E6DCC9;
  --c3-bg-3:  #D9CDB6;
  --c3-ink:   #1F1A14;
  --c3-mute:  rgba(31,26,20,0.55);
  --c3-mute-deep: rgba(31,26,20,0.75);
  --c3-accent: var(--hp-accent, #B85940);
  --c3-accent-deep: var(--hp-accent-deep, #8E3F2C);
  --c3-line:      rgba(31,26,20,0.16);
  --c3-line-soft: rgba(31,26,20,0.08);
  --c3-sans: 'Inter Tight', 'Inter', -apple-system, system-ui, sans-serif;
  --c3-display: 'Inter Tight', 'Inter', -apple-system, system-ui, sans-serif;
  background: var(--c3-bg);
  color: var(--c3-ink);
  font-family: var(--c3-sans);
}
.hpC3-root * { box-sizing: border-box; }
.hpC3-sr { position: absolute; left: -9999px; }

.hpC3-eye {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--c3-accent-deep); font-weight: 600;
  margin-bottom: 18px;
}

/* Top nav */
.hpC3-nav {
  position: relative; z-index: 30;
  border-bottom: 1px solid var(--c3-line-soft);
  background: var(--c3-bg);
}
.hpC3-nav-inner {
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 48px; align-items: center;
  padding: 22px 40px;
}
.hpC3-logo img { height: 38px; width: auto; display: block; }
.hpC3-nav-links {
  display: flex; gap: 36px; justify-content: center;
  font-size: 12px; letter-spacing: 0.18em; font-weight: 600;
  color: var(--c3-mute-deep);
}
.hpC3-nav-links a { cursor: pointer; transition: color 200ms ease; }
.hpC3-nav-links a:hover, .hpC3-nav-links a.is-active { color: var(--c3-accent); }
.hpC3-nav-call { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hpC3-nav-call .lab { font-size: 10px; letter-spacing: 0.22em; color: var(--c3-mute); font-weight: 600; }
.hpC3-nav-call .num { font-size: 18px; color: var(--c3-accent-deep); font-weight: 700; letter-spacing: 0.04em; }

/* Hero */
.hpC3-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 28%, #F4ECDD 0%, var(--c3-bg) 60%);
  padding: 56px 40px 0;
  min-height: 920px;
  display: flex; flex-direction: column;
}
.hpC3-hero-glow {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  width: 760px; height: 760px;
  background: radial-gradient(circle, rgba(184,89,64,0.10) 0%, rgba(184,89,64,0) 60%);
  filter: blur(20px);
  pointer-events: none;
}
.hpC3-hero-mark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 720px; height: 720px;
  pointer-events: none;
  opacity: 0.5;
}
.hpC3-hero-mark text { stroke: rgba(31,26,20,0.07) !important; }
.hpC3-hero-mark circle { stroke: rgba(31,26,20,0.06) !important; }

.hpC3-hero-stack {
  position: relative; z-index: 5;
  max-width: 1480px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  flex: 1;
  padding-top: 24px;
}

.hpC3-word {
  font-family: var(--hp-serif);
  font-weight: 400;
  font-size: clamp(48px, 7.2vw, 116px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  width: 100%;
  text-transform: none;
}
.hpC3-word em { font-style: italic; }
.hpC3-word--filled {
  color: var(--c3-ink);
  background: none;
  -webkit-text-fill-color: var(--c3-ink);
  position: relative; z-index: 8;
  margin-bottom: -0.12em;
}

.hpC3-hero-mid {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%;
  margin-top: 0;
}
.hpC3-portrait {
  position: relative;
  z-index: 4;
  width: clamp(320px, 36vw, 540px);
  aspect-ratio: 3 / 4;
  margin: -0.06em auto -0.18em;
  pointer-events: none;
  filter: drop-shadow(0 24px 50px rgba(31,26,20,0.28));
}
.hpC3-portrait img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
}
.hpC3-portrait-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; }
.hpC3-portrait.no-img .hpC3-portrait-fallback { opacity: 1; }
.hpC3-portrait.no-img img { display: none; }
.hpC3-portrait-fallback svg { width: 80%; height: 90%; }

.hpC3-word--outline {
  position: relative;
  width: 100%;
  z-index: 8;
  color: var(--c3-accent);
  font-style: italic;
  pointer-events: none;
  margin-top: 0.18em;
}
.hpC3-word--outline em { font-style: italic; color: var(--c3-ink); font-weight: 500; }

.hpC3-cta-wrap { margin: 28px 0 16px; position: relative; z-index: 10; }
.hpC3-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 36px; border-radius: 999px;
  background: var(--c3-ink) !important; color: #F4ECDD !important;
  font-size: 12px; letter-spacing: 0.22em; font-weight: 700; text-transform: uppercase;
  border: 1px solid var(--c3-ink); cursor: pointer;
  transition: background 200ms ease, transform 80ms ease, color 200ms ease, border-color 200ms ease;
  position: relative;
  text-decoration: none;
}
.hpC3-cta::after {
  content: '\2192'; font-size: 14px; font-weight: 600;
  transition: transform 200ms ease;
}
.hpC3-cta:hover { background: var(--c3-accent); border-color: var(--c3-accent); color: #fff; transform: translateY(-1px); }
.hpC3-cta:hover::after { transform: translateX(4px); }

.hpC3-sub {
  position: relative; z-index: 10; text-align: center;
  font-size: clamp(15px, 1.2vw, 17px); font-weight: 500;
  color: var(--c3-mute-deep); margin: 0 0 64px;
  max-width: 48ch; letter-spacing: 0.005em; line-height: 1.55;
  display: flex; align-items: center; gap: 14px;
}
.hpC3-sub::before, .hpC3-sub::after {
  content: ''; flex: 0 0 28px; height: 1px; background: var(--c3-line);
}

/* Hero foot meta */
.hpC3-hero-foot {
  position: relative; z-index: 5;
  background: var(--hp-accent-blue, #2A5C8A);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: none; margin: 0 -40px; width: calc(100% + 80px);
}
.hpC3-hero-foot .cell {
  padding: 24px 28px;
  display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid rgba(255,255,255,0.14);
}
.hpC3-hero-foot .cell:last-child { border-right: 0; }
.hpC3-hero-foot .lab {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); font-weight: 600;
}
.hpC3-hero-foot .val { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: 0.02em; }

/* Section heads */
.hpC3-section-head { max-width: 1280px; margin: 0 auto; padding: 0 40px 56px; }
.hpC3-section-head.center { text-align: center; }
.hpC3-section-head h2 {
  font-family: var(--c3-display);
  font-size: clamp(40px, 4.5vw, 68px);
  line-height: 1.0; letter-spacing: -0.03em;
  font-weight: 700; margin: 0; color: var(--c3-ink);
}
.hpC3-section-head p { margin: 18px 0 0; max-width: 60ch; color: var(--c3-mute-deep); font-size: 17px; line-height: 1.6; }

/* Stats */
.hpC3-stats { background: var(--c3-bg-2); padding: 56px 40px; border-top: 1px solid var(--c3-line); border-bottom: 1px solid var(--c3-line); }
.hpC3-stats-inner { max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.hpC3-stat { display: flex; flex-direction: column; gap: 8px; }
.hpC3-stat .v { font-size: clamp(48px, 4.8vw, 72px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--c3-accent); }
.hpC3-stat .l { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c3-mute-deep); font-weight: 600; }

/* Practice areas */
.hpC3-pa { padding: 120px 0 80px; }
.hpC3-pa-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--c3-line); border-left: 1px solid var(--c3-line);
}
.hpC3-pa-card {
  padding: 36px 32px;
  border-right: 1px solid var(--c3-line); border-bottom: 1px solid var(--c3-line);
  display: flex; flex-direction: column; gap: 14px; min-height: 260px;
  background: transparent;
  transition: background 240ms ease, color 240ms ease;
  cursor: pointer;
}
.hpC3-pa-card:hover { background: var(--c3-ink); color: var(--c3-bg); }
.hpC3-pa-card:hover h3, .hpC3-pa-card:hover p { color: var(--c3-bg); }
.hpC3-pa-card .n { font-size: 11px; letter-spacing: 0.22em; color: var(--c3-accent); font-weight: 700; }
.hpC3-pa-card h3 { font-size: 24px; font-weight: 700; line-height: 1.15; margin: 0; color: var(--c3-ink); }
.hpC3-pa-card p { font-size: 14px; line-height: 1.6; color: var(--c3-mute-deep); margin: 0; }
.hpC3-pa-card .arr { margin-top: auto; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--c3-accent); }
.hpC3-pa-card:hover .arr { color: var(--c3-bg); }

/* Counsel */
.hpC3-counsel { padding: 80px 0; background: var(--c3-bg-2); }
.hpC3-counsel-grid { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hpC3-att { display: flex; flex-direction: column; gap: 18px; }
.hpC3-att-photo { aspect-ratio: 4/5; overflow: hidden; background: var(--c3-bg-3); }
.hpC3-att-photo img { width: 100%; height: 100%; object-fit: cover; }
.hpC3-att-body .role { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c3-accent-deep); font-weight: 600; }
.hpC3-att-body h3 { font-size: 24px; font-weight: 700; margin: 6px 0 0; color: var(--c3-ink); }

/* Testimonials */
.hpC3-test { padding: 120px 0 80px; }
.hpC3-test-grid { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hpC3-test-card {
  background: var(--c3-bg-2);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
  border-top: 2px solid var(--c3-accent);
  margin: 0;
}
.hpC3-quote { font-family: serif; font-size: 64px; line-height: 0.6; color: var(--c3-accent); font-weight: 700; }
.hpC3-test-card p { font-size: 16px; line-height: 1.65; color: var(--c3-ink); margin: 0; }
.hpC3-test-card footer { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--c3-line-soft); }
.hpC3-att-name { font-size: 14px; font-weight: 700; color: var(--c3-ink); }
.hpC3-att-ctx { font-size: 12px; color: var(--c3-mute-deep); }

/* Awards */
.hpC3-awards { padding: 80px 0; background: var(--c3-bg-2); border-top: 1px solid var(--c3-line); border-bottom: 1px solid var(--c3-line); }
.hpC3-awards-row { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: flex; gap: 48px; align-items: center; justify-content: center; flex-wrap: wrap; }
.hpC3-award img { height: 86px; width: auto; }

/* Newsroom */
.hpC3-news { padding: 120px 0 80px; }
.hpC3-news-list { max-width: 1280px; margin: 0 auto; padding: 0 40px; border-top: 1px solid var(--c3-line); }
.hpC3-news-row {
  display: grid; grid-template-columns: 110px 110px 1fr 110px 24px;
  gap: 24px; align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--c3-line-soft);
  cursor: pointer; transition: background 200ms ease;
}
.hpC3-news-row:hover { background: var(--c3-bg-2); padding-left: 12px; padding-right: 12px; }
.hpC3-pn-kind { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c3-accent-deep); font-weight: 700; }
.hpC3-pn-date { font-size: 13px; color: var(--c3-mute-deep); }
.hpC3-pn-title { font-size: 18px; color: var(--c3-ink); font-weight: 600; }
.hpC3-pn-read { font-size: 12px; color: var(--c3-mute); text-align: right; }
.hpC3-pn-arr { color: var(--c3-accent); }

/* FAQ */
.hpC3-faq { padding: 80px 0; background: var(--c3-bg-2); }
.hpC3-faq-list { max-width: 920px; margin: 0 auto; padding: 0 40px; }
.hpC3-faq-row { border-top: 1px solid var(--c3-line); padding: 22px 0; }
.hpC3-faq-row:last-child { border-bottom: 1px solid var(--c3-line); }
.hpC3-faq-row summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hpC3-faq-row summary::-webkit-details-marker { display: none; }
.hpC3-faq-row .q { font-size: 18px; font-weight: 600; color: var(--c3-ink); }
.hpC3-faq-row .caret { color: var(--c3-accent); font-size: 24px; font-weight: 300; transition: transform 200ms ease; }
.hpC3-faq-row[open] .caret { transform: rotate(45deg); }
.hpC3-faq-a { padding-top: 14px; font-size: 15px; line-height: 1.7; color: var(--c3-mute-deep); max-width: 64ch; }

/* Contact */
.hpC3-contact { padding: 120px 40px 80px; }
.hpC3-contact-inner { max-width: 1280px; margin: 0 auto; }
.hpC3-contact h2 {
  font-family: var(--c3-display);
  font-size: clamp(48px, 5vw, 84px);
  font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  margin: 0; color: var(--c3-ink); max-width: 18ch;
}
.hpC3-contact-lede { font-size: 19px; color: var(--c3-mute-deep); max-width: 56ch; margin: 24px 0 56px; line-height: 1.55; }
.hpC3-contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; border-top: 1px solid var(--c3-line); padding-top: 40px; }
.hpC3-contact-grid .col { display: flex; flex-direction: column; gap: 6px; }
.hpC3-contact-grid .lab { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c3-accent-deep); font-weight: 700; }
.hpC3-contact-grid .val { font-size: 18px; color: var(--c3-ink); font-weight: 600; }
.hpC3-contact-grid .val.big { font-size: 28px; color: var(--c3-accent); }
.hpC3-contact-grid .sub { font-size: 13px; color: var(--c3-mute); margin-top: 8px; }
.hpC3-contact-grid .cta-col { justify-content: center; }

/* Footer */
.hpC3-footer { padding: 32px 40px; border-top: 1px solid var(--c3-line); background: var(--c3-bg); }
.hpC3-footer-inner { max-width: 1480px; margin: 0 auto; display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; font-size: 12px; color: var(--c3-mute); }

@media (max-width: 1080px) {
  .hpC3-nav-links { display: none; }
  .hpC3-stats-inner, .hpC3-counsel-grid, .hpC3-test-grid, .hpC3-pa-grid, .hpC3-contact-grid { grid-template-columns: 1fr 1fr; }
  .hpC3-hero-foot { grid-template-columns: 1fr 1fr; }
}

/* ===== podcast-blocks.css ===== */
/* ============================================================
   Podcast block — three exploration options
   Shared tokens piggyback on colors_and_type.css + styles.css
   ============================================================ */

:root {
  --pc-ink: #1f1d1a;
  --pc-paper: #f6f4ef;
  --pc-bone: #ece6da;
  --pc-deep: #0F2748;     /* Dimopoulos navy */
  --pc-mid: #2A4163;
  --pc-blue: #7BA9C8;     /* SPLIT blue */
  --pc-mute: #6b6358;
  --pc-rule: rgba(31,29,26,0.14);
  --pc-serif: 'Cormorant Garamond', Georgia, serif;
  --pc-sans: 'Source Sans 3', system-ui, sans-serif;
}

/* Shared platform chips */
.pc-platforms {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pc-platforms-label {
  font-family: var(--pc-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-right: 4px;
}
.pc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  border: 1px solid;
  font-family: var(--pc-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}
.pc-chip:hover { transform: translateY(-1px); }

/* ============================================================
   OPTION A — On Air Editorial
   ============================================================ */
.pcA {
  background: var(--pc-paper);
  padding: 96px 64px;
  font-family: var(--pc-sans);
  color: var(--pc-ink);
}
.pcA-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 540px;
  gap: 72px;
  align-items: center;
}
.pcA-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pc-deep);
}
.pcA-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #d93b3b;
  box-shadow: 0 0 0 4px rgba(217, 59, 59, 0.18);
  animation: pcA-pulse 1.6s ease-in-out infinite;
}
@keyframes pcA-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(217, 59, 59, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(217, 59, 59, 0.05); }
}
.pcA-title {
  font-family: var(--pc-serif);
  font-weight: 400;
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 18px 0 28px;
  color: var(--pc-deep);
}
.pcA-title em {
  display: block;
  font-style: italic;
  font-size: 1.2em;
  line-height: 0.9;
  margin-bottom: 6px;
}
.pcA-title .accent { color: var(--pc-blue); font-style: italic; }
.pcA-lead {
  font-family: var(--pc-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--pc-ink);
  max-width: 46ch;
  margin: 0 0 18px;
}
.pcA-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--pc-mute);
  max-width: 50ch;
  margin: 0 0 32px;
}

.pcA-art {
  position: relative;
  aspect-ratio: 4 / 5;
}
.pcA-portrait {
  position: absolute;
  inset: 0 60px 60px 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(15, 39, 72, 0.22);
}
.pcA-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: saturate(0.96) contrast(1.02);
}
.pcA-portrait-cap {
  position: absolute;
  left: 0; bottom: 0;
  background: rgba(15, 39, 72, 0.94);
  color: #fff;
  font-family: var(--pc-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 18px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.pcA-portrait-cap em {
  font-family: var(--pc-serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pc-blue);
}

.pcA-cover {
  position: absolute;
  right: 0; bottom: 0;
  width: 280px;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  transform: rotate(2deg);
}
.pcA-cover svg { display: block; width: 100%; height: auto; }
.pcA-cover-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  font-family: var(--pc-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pcA-cover-foot .lbl { color: var(--pc-deep); font-weight: 700; }
.pcA-cover-foot .ep { color: var(--pc-mute); }


/* ============================================================
   OPTION B — Studio Dark
   ============================================================ */
.pcB {
  background: #0a0a0a;
  padding: 120px 64px;
  font-family: var(--pc-sans);
  color: #f6f4ef;
  position: relative;
  overflow: hidden;
}
.pcB-bg-mark {
  position: absolute;
  left: -30px;
  bottom: -120px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 900;
  font-size: 520px;
  letter-spacing: -0.04em;
  line-height: 0.8;
  color: rgba(123, 169, 200, 0.06);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.pcB-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
}
.pcB-cover-wrap {
  position: relative;
  width: 480px;
}
.pcB-cover-shadow {
  position: absolute;
  inset: 12px -32px -16px 16px;
  background: radial-gradient(closest-side, rgba(123,169,200,0.35), transparent 70%);
  filter: blur(40px);
  z-index: 0;
}
.pcB-cover {
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}
.pcB-play {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px 14px 22px;
  background: var(--pc-blue);
  color: #0a0a0a;
  border: 0;
  border-radius: 999px;
  font-family: var(--pc-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 16px 32px rgba(123, 169, 200, 0.35);
  transition: transform 180ms ease;
}
.pcB-play:hover { transform: translateX(-50%) translateY(-2px); }

.pcB-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pc-blue);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(123, 169, 200, 0.3);
}
.pcB-title {
  font-family: var(--pc-serif);
  font-weight: 400;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 22px 0 24px;
  color: #fff;
}
.pcB-title em {
  font-style: italic;
  color: var(--pc-blue);
}
.pcB-body {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(246, 244, 239, 0.78);
  max-width: 52ch;
  margin: 0 0 36px;
}

.pcB-host {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px 18px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 60px;
  margin-bottom: 32px;
  width: fit-content;
}
.pcB-host-img {
  width: 54px; height: 54px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(123, 169, 200, 0.4);
}
.pcB-host-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.pcB-host-meta { display: flex; flex-direction: column; line-height: 1.2; }
.pcB-host-meta .lbl { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246,244,239,0.5); }
.pcB-host-meta .name { font-family: var(--pc-serif); font-style: italic; font-size: 22px; color: #fff; margin-top: 2px; }
.pcB-host-meta .sub { font-size: 12px; color: rgba(246,244,239,0.55); margin-top: 2px; }


/* ============================================================
   OPTION C — Studio Portrait (refined: brighter image, deep navy
   panel matching the brand, brand-blue accent rail between halves)
   ============================================================ */
.pcC {
  background: #0a0a0a;            /* true black, with subtle texture below */
  background-image:
    /* fine film grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    /* warm vignette glow from upper-left, fading to black */
    radial-gradient(circle at 18% 28%, rgba(123, 169, 200, 0.10) 0%, rgba(10,10,10,0) 55%),
    /* soft brand-blue rim from far right */
    radial-gradient(circle at 100% 50%, rgba(123, 169, 200, 0.06) 0%, rgba(10,10,10,0) 40%);
  background-blend-mode: screen, normal, normal;
  font-family: var(--pc-sans);
  color: #f6f4ef;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  min-height: 640px;              /* tighter than before */
  position: relative;
  overflow: hidden;
}
.pcC-image {
  position: relative;
  overflow: hidden;
  background: transparent;
}
.pcC-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias slightly below center (60%) so the SPLIT neon AND its tagline
     ("A PODCAST ON MODERN DIVORCE") both stay in frame on narrow widths.
     Pure center clipped the tagline at the bottom of the visible window. */
  object-position: center 60%;
  display: block;
  /* Compound: SVG filter (lift + unsharp-mask) then CSS for final polish. */
  filter: url(#pcC-sharpen) contrast(1.08) saturate(1.1);
}
.pcC-image::after {
  /* very subtle vignette — keeps focus on Gus + the SPLIT neon */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(to right, transparent 70%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
.pcC-image-cap {
  position: absolute;
  top: 28px;
  left: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(229, 201, 189, 0.18);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f6f4ef;
  z-index: 2;
}
.pcC-image-cap .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #d93b3b;
  box-shadow: 0 0 0 3px rgba(217, 59, 59, 0.25);
  animation: pcA-pulse 1.6s ease-in-out infinite;
}

.pcC-panel {
  display: flex;
  align-items: center;
  padding: 88px 88px 88px 76px;
  background: transparent;
  position: relative;
}
/* Brand-blue accent rail dividing image from panel */
.pcC-rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    rgba(123, 169, 200, 0) 0%,
    rgba(123, 169, 200, 0.55) 18%,
    rgba(123, 169, 200, 0.55) 82%,
    rgba(123, 169, 200, 0) 100%);
}
.pcC-panel-inner {
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.pcC-eyebrow {
  font-family: var(--pc-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pc-blue);
}
.pcC-title {
  font-family: var(--pc-serif);
  font-weight: 400;
  font-size: clamp(46px, 4.6vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}
.pcC-title em {
  display: block;
  font-style: italic;
  font-size: 1.4em;
  color: var(--pc-blue);
  line-height: 0.88;
  margin-bottom: 2px;
}
.pcC-title .accent { color: var(--pc-blue); font-style: italic; }
.pcC-body {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(246, 244, 239, 0.78);
  margin: 0;
  max-width: 50ch;
}
.pcC-body strong { color: #fff; font-weight: 600; }
.pcC-meta {
  display: flex;
  gap: 40px;
  padding: 16px 0;
  border-top: 1px solid rgba(246, 244, 239, 0.12);
  border-bottom: 1px solid rgba(246, 244, 239, 0.12);
}
.pcC-meta > div { display: flex; flex-direction: column; gap: 4px; }
.pcC-meta .lbl {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 244, 239, 0.5);
}
.pcC-meta .val {
  font-family: var(--pc-serif);
  font-style: italic;
  font-size: 22px;
  color: #fff;
}

/* ===== episodes.css ===== */
/* Episodes carousel — Law Disrupted style, Dimopoulos palette */

.epx {
  --epx-card: 380px;
  --epx-gap: 28px;
  --epx-blue: #7BA9C8;
  --epx-deep: #0F2748;
  padding: 80px 64px 64px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
}

/* Light tone: matches Option A hero / light sections */
.epx--light {
  background: #eef3f7;  /* very pale Dimopoulos blue */
  color: #1f1d1a;
}
/* Dark tone: matches Options B / C hero */
.epx--dark {
  background: #131211;
  color: #f6f4ef;
}

/* Header */
.epx-head { text-align: center; margin-bottom: 48px; }
.epx-eyebrow {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--epx-deep);
}
.epx--dark .epx-eyebrow { color: var(--epx-blue); }

/* Carousel layout — nav buttons OUTSIDE the viewport so they don't overlap cards */
.epx-stage {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  gap: 16px;
  align-items: center;
}
.epx-viewport {
  overflow: hidden;
}
.epx-track {
  display: flex;
  gap: var(--epx-gap);
  transition: transform 480ms cubic-bezier(0.22, 0.94, 0.32, 1);
}
.epx-card {
  flex: 0 0 var(--epx-card);
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(15, 39, 72, 0.08), 0 2px 6px rgba(15, 39, 72, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.epx-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(15, 39, 72, 0.16), 0 4px 10px rgba(15, 39, 72, 0.08);
}
.epx--dark .epx-card {
  background: #1f1d1a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

/* Nav buttons */
.epx-nav {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 180ms ease;
  margin: 0 auto;
}
.epx--light .epx-nav { color: var(--epx-deep); border-color: rgba(15,39,72,0.25); }
.epx--light .epx-nav:hover:not(:disabled) { background: var(--epx-deep); color: #fff; border-color: var(--epx-deep); }
.epx--dark .epx-nav  { color: var(--epx-blue); border-color: rgba(123,169,200,0.4); }
.epx--dark .epx-nav:hover:not(:disabled) { background: var(--epx-blue); color: #131211; border-color: var(--epx-blue); }
.epx-nav:disabled { opacity: 0.3; cursor: not-allowed; }

/* Thumbnail with accent strokes */
.epx-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #1c1a18;
  overflow: hidden;
}
.epx-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); display: block; }

/* Two angled brand-blue stripes mimicking the brush-stroke pattern of the
   Law Disrupted card; subtle, sit on top of the image. */
.epx-stroke {
  position: absolute;
  width: 140%;
  height: 14px;
  background: var(--epx-blue);
  opacity: 0.85;
  pointer-events: none;
  mix-blend-mode: normal;
}
.epx-stroke--tl {
  top: 22%; left: -20%;
  transform: rotate(-9deg);
  clip-path: polygon(2% 30%, 12% 0%, 96% 10%, 100% 70%, 88% 100%, 8% 90%);
}
.epx-stroke--br {
  bottom: 18%; left: -20%;
  transform: rotate(-9deg);
  height: 8px;
  opacity: 0.7;
  clip-path: polygon(4% 50%, 16% 0%, 92% 20%, 100% 80%, 80% 100%, 6% 80%);
}

.epx-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  background: none;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55));
  transition: transform 180ms ease, filter 180ms ease;
}
.epx-play svg { margin-left: 3px; }
.epx-card:hover .epx-play {
  transform: translate(-50%, -50%) scale(1.08);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.7));
}

/* Body */
.epx-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.epx-num {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--epx-blue);
  font-weight: 700;
}
.epx-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--epx-deep);
  text-wrap: balance;
}
.epx--dark .epx-title { color: #f6f4ef; }
.epx-guest {
  font-size: 14px;
  color: #6b6358;
  margin: 0;
  line-height: 1.45;
}
.epx--dark .epx-guest { color: rgba(246,244,239,0.6); }
.epx-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(15,39,72,0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #8a8278;
  text-transform: uppercase;
}
.epx--dark .epx-foot { border-top-color: rgba(246,244,239,0.1); color: rgba(246,244,239,0.45); }
.epx-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }

/* CTA */
.epx-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}
.epx-cta {
  display: inline-block;
  padding: 16px 36px;
  border: 1.5px solid;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 180ms ease;
}
.epx--light .epx-cta {
  color: var(--epx-deep);
  border-color: var(--epx-deep);
  background: transparent;
}
.epx--light .epx-cta:hover { background: var(--epx-deep); color: #fff; }
.epx--dark .epx-cta {
  color: var(--epx-blue);
  border-color: var(--epx-blue);
}
.epx--dark .epx-cta:hover { background: var(--epx-blue); color: #131211; }

/* ===== newsroom-variants.css ===== */
/* ============================================================
   Newsroom variants — N1 Editorial Index, N2 Featured+Stack,
   N3 Dark Newsroom. Shared brand tokens piggyback colors_and_type.
   ============================================================ */
:root {
  --nr-paper:   #f4eee2;
  --nr-bone:    #faf6ed;
  --nr-ink:     #1f1d1a;
  --nr-deep:    #0F2748;
  --nr-blue:    #7BA9C8;
  --nr-blue-dp: #3F6FA8;
  --nr-accent:  #B85940;
  --nr-mute:    #6b6358;
  --nr-rule:    rgba(31,29,26,0.18);
  --nr-serif:   'Cormorant Garamond', Georgia, serif;
  --nr-sans:    'Source Sans 3', system-ui, sans-serif;
}

/* ============================================================
   N1 — Editorial Index
   ============================================================ */
.nrN1 {
  background: var(--nr-paper);
  color: var(--nr-ink);
  font-family: var(--nr-sans);
  padding: 104px 64px;
}
.nrN1-inner { max-width: 1240px; margin: 0 auto; }

.nrN1-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  padding-bottom: 24px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--nr-deep);
}
.nrN1-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--nr-accent);
  grid-column: 1; grid-row: 1;
  margin-bottom: 14px;
}
.nrN1-title {
  font-family: var(--nr-serif);
  font-weight: 400;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--nr-deep);
  margin: 0;
  grid-column: 1; grid-row: 2;
}
.nrN1-title em { font-style: italic; color: var(--nr-accent); }
.nrN1-all {
  grid-column: 2; grid-row: 2;
  align-self: end;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--nr-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  cursor: pointer;
  transition: color 180ms ease;
}
.nrN1-all:hover { color: var(--nr-accent); }

.nrN1-list { list-style: none; margin: 0; padding: 0; }
.nrN1-row {
  display: grid;
  grid-template-columns: 80px 200px 1fr 120px;
  align-items: center;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--nr-rule);
  cursor: pointer;
  transition: background 220ms ease;
}
.nrN1-row:hover { background: rgba(184, 89, 64, 0.04); }
.nrN1-num {
  font-family: var(--nr-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  color: var(--nr-accent);
}
.nrN1-meta { display: flex; flex-direction: column; gap: 6px; }
.nrN1-kind {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--nr-deep);
}
.nrN1-date {
  font-size: 13px;
  color: var(--nr-mute);
}
.nrN1-headline {
  font-family: var(--nr-serif);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--nr-deep);
  margin: 0;
  text-wrap: balance;
}
.nrN1-cta {
  display: inline-flex; align-items: center; gap: 8px;
  justify-self: end;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--nr-deep);
  opacity: 0.6;
  transition: opacity 180ms ease, transform 180ms ease;
}
.nrN1-row:hover .nrN1-cta { opacity: 1; transform: translateX(4px); color: var(--nr-accent); }


/* ============================================================
   N2 — Featured + Stack
   ============================================================ */
.nrN2 {
  background: var(--nr-paper);
  color: var(--nr-ink);
  font-family: var(--nr-sans);
  padding: 104px 64px;
}
.nrN2-inner { max-width: 1240px; margin: 0 auto; }
.nrN2-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.nrN2-eyebrow {
  display: block;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--nr-accent);
  margin-bottom: 12px;
}
.nrN2-title {
  font-family: var(--nr-serif);
  font-weight: 400;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--nr-deep);
  margin: 0;
}
.nrN2-title em { font-style: italic; color: var(--nr-accent); }
.nrN2-all {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--nr-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  cursor: pointer;
}
.nrN2-all:hover { color: var(--nr-accent); }

.nrN2-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 40px;
  align-items: stretch;
}
.nrN2-hero {
  position: relative;
  background: var(--nr-bone);
  padding: 48px 44px 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 240ms ease;
}
.nrN2-hero:hover { transform: translateY(-3px); }
.nrN2-stripe {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--nr-accent);
}
.nrN2-hero-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--nr-deep);
}
.nrN2-hero-meta .kind { color: var(--nr-accent); }
.nrN2-hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--nr-mute); }
.nrN2-hero-title {
  font-family: var(--nr-serif);
  font-weight: 500;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--nr-deep);
  margin: 0;
  text-wrap: balance;
}
.nrN2-hero-blurb {
  font-family: var(--nr-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: var(--nr-mute);
  margin: 0;
  max-width: 48ch;
}
.nrN2-hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--nr-deep);
  transition: gap 180ms ease, color 180ms ease;
}
.nrN2-hero:hover .nrN2-hero-cta { gap: 16px; color: var(--nr-accent); }

.nrN2-stack { display: flex; flex-direction: column; gap: 16px; }
.nrN2-card {
  background: var(--nr-bone);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.nrN2-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 39, 72, 0.08);
}
.nrN2-card-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.nrN2-card-meta .kind { color: var(--nr-accent); }
.nrN2-card-meta > span:last-child { color: var(--nr-mute); font-weight: 400; }
.nrN2-card-title {
  font-family: var(--nr-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--nr-deep);
  margin: 0;
  text-wrap: balance;
  flex: 1;
}
.nrN2-card-foot {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--nr-mute);
}


/* ============================================================
   N3 — Dark Newsroom
   ============================================================ */
.nrN3 {
  background: #0F2748;          /* brand navy */
  color: #f6f4ef;
  font-family: var(--nr-sans);
  padding: 104px 64px;
  position: relative;
  /* Same subtle texture treatment as the podcast block, tuned for navy */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    radial-gradient(circle at 18% 0%, rgba(229, 201, 189, 0.10) 0%, rgba(15, 39, 72, 0) 55%),
    radial-gradient(circle at 100% 100%, rgba(123, 169, 200, 0.12) 0%, rgba(15, 39, 72, 0) 50%);
}
.nrN3-inner { max-width: 1240px; margin: 0 auto; position: relative; }

.nrN3-head {
  text-align: center;
  margin-bottom: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.nrN3-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--nr-blue);
}
.nrN3-title {
  font-family: var(--nr-serif);
  font-weight: 400;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}
.nrN3-title em { font-style: italic; color: var(--nr-blue); }
.nrN3-sub {
  font-family: var(--nr-serif);
  font-style: italic;
  font-size: 19px;
  color: rgba(246, 244, 239, 0.6);
  margin: 0;
}

.nrN3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.nrN3-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(229, 201, 189, 0.12);
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 320px;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.nrN3-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(229, 201, 189, 0.4);
  transform: translateY(-3px);
}
.nrN3-top {
  display: flex; justify-content: space-between; align-items: baseline;
}
.nrN3-num {
  font-family: var(--nr-serif);
  font-style: italic;
  font-size: 32px;
  color: var(--nr-blue);
  line-height: 1;
}
.nrN3-kind {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--nr-blue);
}
.nrN3-headline {
  font-family: var(--nr-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
  flex: 1;
}
.nrN3-foot {
  display: flex; align-items: center; gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(246, 244, 239, 0.1);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(246, 244, 239, 0.55);
}
.nrN3-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(246, 244, 239, 0.4);
}
.nrN3-cta {
  margin-left: auto;
  display: inline-flex; align-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(123, 169, 200, 0.4);
  color: var(--nr-blue);
  justify-content: center;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.nrN3-card:hover .nrN3-cta {
  background: var(--nr-blue);
  color: #0F2748;
  transform: translateX(2px);
}
.nrN3-cta-row {
  display: flex; justify-content: center;
  margin-top: 56px;
}
.nrN3-all {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 36px;
  border: 1.5px solid var(--nr-blue);
  color: var(--nr-blue);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.nrN3-all:hover { background: var(--nr-blue); color: #0F2748; }

/* ===== attorney-bio.css ===== */
/* ============================================================
   Attorney Bio — Gus Dimopoulos
   Three LAYOUT approaches sharing the homepage v2 aesthetic:
   bone background, navy ink, steel-blue italic accent,
   Cormorant Garamond + Source Sans 3.
   ============================================================ */

.bio-root {
  /* Aligned with homepage v2 (steel-blue accent direction) */
  --b-ink:        #0F2748;
  --b-ink-deep:   #081A33;
  --b-ink-soft:   #1A3559;
  --b-bone:       #FBFAF6;
  --b-paper:      #F6F1E9;
  --b-paper-warm: #EFE7D8;
  --b-white:      #FFFFFF;

  --b-rule:       rgba(15,39,72,0.14);
  --b-rule-soft:  rgba(15,39,72,0.08);
  --b-mute:       #6B7280;
  --b-mute-deep:  #3B4658;

  /* Primary accent: steel blue, used for italic emphasis + hairlines */
  --b-accent:      #3F6FA8;
  --b-accent-deep: #2A537F;
  --b-accent-soft: #B8CADC;
  /* Secondary eyebrow color (very small uses only) */
  --b-eye-deep:    #8E3F2C;

  --b-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --b-sans:  'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--b-sans);
  color: var(--b-ink);
  background: var(--b-bone);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.bio-root *, .bio-root *::before, .bio-root *::after { box-sizing: border-box; }
.bio-root img { max-width: 100%; display: block; }
.bio-root a { color: inherit; text-decoration: none; }

/* ─────────────────────────────────────────────────────────
   Shared chrome — matches homepage v2 hp-nav exactly
   ───────────────────────────────────────────────────────── */
.bio-nav {
  background: rgba(251,250,246,0.96);
  border-bottom: 1px solid var(--b-rule-soft);
  pointer-events: auto;
}
.bio-nav-row {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px 48px; gap: 24px;
}
.bio-nav-tabs { display: flex; gap: 28px; align-items: center; }
.bio-nav-tabs a {
  font-size: 12px; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 500;
  color: var(--b-mute-deep);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.bio-nav-tabs a.is-active { color: var(--b-ink); position: relative; }

/* Attorneys dropdown */
.bio-nav-item.has-dropdown { position: relative; display: inline-flex; align-items: center; }
.bio-nav-item .bio-nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 500;
  color: var(--b-mute-deep);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.bio-nav-item .bio-nav-trigger.is-active { color: var(--b-ink); position: relative; }
.bio-nav-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 8px; height: 5px;
  opacity: 0.4;
  transition: transform 200ms ease, opacity 200ms ease;
}
.bio-nav-item.has-dropdown:hover .bio-nav-caret { transform: rotate(180deg); opacity: 0.85; }

.bio-nav-menu {
  position: absolute; top: calc(100% + 14px); left: 0;
  transform: translateY(-6px);
  min-width: 280px;
  background: var(--b-bone);
  border: 1px solid var(--b-rule-soft);
  box-shadow: 0 24px 60px rgba(15, 39, 72, 0.18);
  padding: 8px 0;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 40;
}
.bio-nav-menu::before {
  content: '';
  position: absolute; top: -7px; left: 28px; transform: rotate(45deg);
  width: 12px; height: 12px;
  background: var(--b-bone);
  border-top: 1px solid var(--b-rule-soft);
  border-left: 1px solid var(--b-rule-soft);
}
.bio-nav-menu::after {
  content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
}
.bio-nav-item.has-dropdown:hover .bio-nav-menu,
.bio-nav-item.has-dropdown:focus-within .bio-nav-menu {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}

.bio-nav-menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 14px 22px;
  text-decoration: none;
  text-transform: none; letter-spacing: 0;
  transition: background 160ms ease;
  min-height: 56px;
}
/* Attorney variant — italic name + small uppercase role on the right */
.bio-nav-menu-item.is-attorney .name {
  font-family: var(--b-serif); font-weight: 400; font-style: italic;
  font-size: 22px; line-height: 1.1;
  color: var(--b-ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-align: left;
}
.bio-nav-menu-item.is-attorney .role {
  font-family: var(--b-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  color: var(--b-mute);
}
/* Content variant — single column, label (+ optional desc below) */
.bio-nav-menu-item:not(.is-attorney) {
  grid-template-columns: 1fr;
  gap: 4px;
  align-items: start;
}
.bio-nav-menu-item .lbl {
  font-family: var(--b-serif); font-weight: 400;
  font-size: 20px; line-height: 1.15;
  color: var(--b-ink);
  letter-spacing: -0.005em;
}
.bio-nav-menu-item.has-desc .lbl { font-style: italic; }
.bio-nav-menu-item .desc {
  font-family: var(--b-sans);
  font-size: 12px; line-height: 1.4;
  color: var(--b-mute);
}
.bio-nav-menu-item:hover { background: rgba(15, 39, 72, 0.04); }
.bio-nav-menu-item:hover .name,
.bio-nav-menu-item:hover .lbl { color: var(--b-accent); }

.bio-nav-menu-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px;
  margin-top: 4px;
  border-top: 1px solid var(--b-rule-soft);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
  color: var(--b-mute-deep);
  text-decoration: none;
}
.bio-nav-menu-foot .arr { font-size: 14px; }
.bio-nav-menu-foot:hover { color: var(--b-ink); }
.bio-nav-logo img { height: 38px; width: auto; display: block; }
.bio-nav-end { display: flex; justify-content: flex-end; gap: 24px; align-items: center; }
.bio-nav-phone {
  font-family: var(--b-serif); font-style: italic; font-size: 17px; color: var(--b-ink);
}
.bio-nav-cta {
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 600;
  padding: 10px 16px; border: 1px solid var(--b-ink); color: var(--b-ink);
  background: transparent; cursor: pointer;
}

/* CTA primary (matches homepage) */
.bio-cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--b-sans);
  font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 18px 28px; background: var(--b-ink); color: var(--b-bone);
  border: 0; cursor: pointer; transition: background 240ms ease;
}
.bio-cta:hover { background: var(--b-accent); }
.bio-cta .arr { width: 18px; height: 1px; background: currentColor; position: relative; }
.bio-cta .arr::after {
  content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.bio-cta.on-dark { background: var(--b-bone); color: var(--b-ink); }
.bio-cta.on-dark:hover { background: var(--b-accent); color: var(--b-bone); }

/* Eyebrow + rule */
.bio-eye {
  font-family: var(--b-sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-eye-deep);
}
.bio-eye.on-dark { color: var(--b-accent-soft); }
.bio-rule { width: 36px; height: 1px; background: var(--b-accent); border: 0; margin: 0; }

/* Mixed-weight headline pattern — roman + italic-blue, matches homepage */
.bio-h1, .bio-h2 {
  font-family: var(--b-serif); font-weight: 400;
  color: var(--b-ink); margin: 0;
  text-wrap: balance; letter-spacing: -0.02em;
}
.bio-h1 em, .bio-h2 em {
  font-style: italic; color: var(--b-accent); font-weight: 400;
}

/* Back-to-attorneys breadcrumb */
.bio-back {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  color: var(--b-mute);
}
.bio-back .arr {
  width: 18px; height: 1px; background: currentColor; position: relative;
}
.bio-back .arr::before {
  content: ''; position: absolute; left: 0; top: -3px; width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-left: 1px solid currentColor;
  transform: rotate(-45deg);
}

/* Shared footer (matches homepage) */
.bio-footer {
  background: var(--b-ink-deep); color: rgba(251,250,246,0.72); padding: 36px 48px;
}
.bio-footer-row {
  max-width: 1280px; margin: 0 auto;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 12px;
}

/* Shared contact band — light bone (closer above is navy, so we flip) */
.bio-contact {
  background: var(--b-bone); color: var(--b-ink);
  padding: 88px 48px;
  border-top: 1px solid var(--b-rule-soft);
}
.bio-contact-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: end;
}
.bio-contact h2 {
  font-family: var(--b-serif); font-weight: 400;
  font-size: 64px; line-height: 1; letter-spacing: -0.02em;
  margin: 12px 0 24px; color: var(--b-ink);
}
.bio-contact h2 em { font-style: italic; color: var(--b-accent); }
.bio-contact .lede {
  font-family: var(--b-serif); font-style: italic; font-size: 21px;
  color: var(--b-mute-deep); max-width: 50ch; margin: 0 0 32px;
}
.bio-contact .bio-eye.on-dark { color: var(--b-eye-deep); }
.bio-contact .bio-cta.on-dark { background: var(--b-ink); color: var(--b-bone); }
.bio-contact .bio-cta.on-dark:hover { background: var(--b-accent); color: var(--b-bone); }
.bio-contact-info { display: flex; flex-direction: column; gap: 16px; }
.bio-contact-info dt {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-mute); margin: 0 0 4px;
}
.bio-contact-info dd {
  font-family: var(--b-serif); font-size: 22px; margin: 0; color: var(--b-ink);
}

/* ============================================================
   VARIANT A — Editorial Profile
   Portrait-led hero, sticky-rail TOC, magazine prose.
   ============================================================ */
.bioA-crumb {
  max-width: 1280px; margin: 0 auto;
  padding: 28px 48px 0;
}
.bioA-hero {
  max-width: 1280px; margin: 0 auto;
  padding: 48px 48px 96px;
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 72px; align-items: end;
}
.bioA-hero-left { display: flex; flex-direction: column; gap: 28px; }
.bioA-hero-eye {
  display: flex; align-items: center; gap: 14px;
}
.bioA-hero-eye .bio-rule { background: var(--b-accent); }
.bioA-hero h1 {
  font-family: var(--b-serif); font-weight: 400;
  font-size: 96px; line-height: 0.94; letter-spacing: -0.025em;
  margin: 0; color: var(--b-ink); text-wrap: balance;
}
.bioA-hero h1 em { font-style: italic; font-weight: 400; color: var(--b-accent); }
.bioA-hero .lede {
  font-family: var(--b-serif); font-style: italic;
  font-size: 22px; line-height: 1.5; color: var(--b-mute-deep);
  max-width: 36ch; margin: 0;
}
.bioA-meta {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 56px;
  padding-top: 24px; border-top: 1px solid var(--b-rule);
  margin: 0;
}
.bioA-meta dt {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-mute); margin: 0 0 4px;
}
.bioA-meta dd {
  font-family: var(--b-serif); font-size: 18px; color: var(--b-ink); margin: 0;
}
.bioA-meta dd a { border-bottom: 1px solid var(--b-rule); padding-bottom: 1px; }
.bioA-hero-actions {
  display: flex; gap: 24px; align-items: center; padding-top: 4px;
}
.bioA-hero-portrait {
  position: relative; aspect-ratio: 4/5; background: var(--b-paper); overflow: hidden;
}
.bioA-hero-portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 24%;
}
.bioA-hero-badge {
  position: absolute; bottom: 28px; left: -20px;
  background: var(--b-bone); padding: 14px 18px;
  display: flex; flex-direction: column; gap: 2px;
  border-left: 2px solid var(--b-accent);
  box-shadow: 0 12px 32px rgba(14,30,51,0.10);
}
.bioA-hero-badge .role {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-mute); font-weight: 600;
}
.bioA-hero-badge .name {
  font-family: var(--b-serif); font-size: 18px; color: var(--b-ink); line-height: 1.2;
}

/* Body — sticky TOC + magazine prose */
.bioA-body {
  max-width: 1280px; margin: 0 auto;
  padding: 72px 48px 88px;
  display: grid; grid-template-columns: 220px 1fr; gap: 80px; align-items: start;
  border-top: 1px solid var(--b-rule);
}
.bioA-toc { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 2px; }
.bioA-toc .lab {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-mute); margin-bottom: 16px; font-weight: 600;
}
.bioA-toc a {
  display: block; padding: 12px 0;
  font-size: 14px;
  color: var(--b-mute-deep);
  border-bottom: 1px solid var(--b-rule-soft);
}
.bioA-toc a.is-active {
  color: var(--b-ink); font-weight: 600;
  border-bottom-color: var(--b-accent);
}
.bioA-prose { max-width: 64ch; }
.bioA-prose section + section { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--b-rule); }
.bioA-prose h2 {
  font-family: var(--b-serif); font-weight: 400; font-size: 44px;
  line-height: 1.0; letter-spacing: -0.02em;
  margin: 0 0 28px; color: var(--b-ink); text-wrap: balance;
}
.bioA-prose h2 em { font-style: italic; color: var(--b-accent); }
.bioA-prose p {
  font-size: 17px; line-height: 1.75; color: var(--b-mute-deep);
  margin: 0 0 20px;
}
.bioA-prose p strong { color: var(--b-ink); font-weight: 600; }
.bioA-prose p em { font-style: italic; }
.bioA-prose p.lead {
  font-family: var(--b-serif); font-style: italic;
  font-size: 24px; line-height: 1.45; color: var(--b-ink);
  margin: 0 0 28px; max-width: 38ch;
}

.bioA-stripe {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
.bioA-stripe .cell { border-top: 1px solid var(--b-accent); padding-top: 18px; }
.bioA-stripe .cell h3 {
  font-family: var(--b-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-mute); margin: 0 0 12px;
}
.bioA-stripe .cell ul { padding: 0; margin: 0; list-style: none; }
.bioA-stripe .cell li {
  font-family: var(--b-serif); font-size: 19px; color: var(--b-ink);
  padding: 10px 0; border-bottom: 1px solid var(--b-rule-soft);
}
.bioA-stripe .cell li:last-child { border-bottom: 0; }
.bioA-stripe .cell li .where {
  display: block; font-family: var(--b-sans); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--b-mute); margin-top: 4px; font-weight: 600;
}

/* Awards grid (muted, hover reveals color) */
.bioA-awards-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
  border-top: 1px solid var(--b-rule); border-bottom: 1px solid var(--b-rule);
  padding: 32px 0;
}
.bioA-awards-grid .award { display: flex; align-items: center; justify-content: center; height: 90px; }
.bioA-awards-grid .award img {
  max-height: 100%; max-width: 100%; object-fit: contain;
  filter: grayscale(1) opacity(0.7); transition: filter 240ms ease;
}
.bioA-awards-grid .award:hover img { filter: grayscale(0) opacity(1); }

/* Press list rows */
.bioA-press { display: flex; flex-direction: column; }
.bioA-press-item {
  display: grid; grid-template-columns: 110px 1fr 120px 24px;
  gap: 28px; align-items: baseline; padding: 22px 0;
  border-top: 1px solid var(--b-rule);
}
.bioA-press-item:last-child { border-bottom: 1px solid var(--b-rule); }
.bioA-press-item .kind {
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
  font-weight: 600; color: var(--b-accent-deep);
}
.bioA-press-item .title {
  font-family: var(--b-serif); font-size: 20px; line-height: 1.3; color: var(--b-ink);
}
.bioA-press-item .meta {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--b-mute); text-align: right;
}
.bioA-press-item .arr { color: var(--b-accent); font-size: 16px; }

/* ============================================================
   VARIANT B — Dossier (two-column reference layout)
   Left: sticky portrait + credentials. Right: bio prose.
   ============================================================ */
.bioB-crumb {
  max-width: 1280px; margin: 0 auto;
  padding: 28px 48px 0;
}
.bioB-namehead {
  max-width: 1280px; margin: 0 auto;
  padding: 32px 48px 56px;
  border-bottom: 1px solid var(--b-rule);
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
}
.bioB-namehead h1 {
  font-family: var(--b-serif); font-weight: 400;
  font-size: 96px; line-height: 0.94; letter-spacing: -0.025em;
  margin: 0; color: var(--b-ink);
}
.bioB-namehead h1 em { font-style: italic; color: var(--b-accent); font-weight: 400; }
.bioB-namehead .role-line {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--b-serif); font-size: 20px; color: var(--b-mute-deep);
  text-align: right;
}
.bioB-namehead .role-line .eye {
  font-family: var(--b-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--b-eye-deep);
}
.bioB-namehead .role-line .role {
  font-family: var(--b-serif); font-style: italic; font-size: 24px; color: var(--b-ink);
}

.bioB-body {
  max-width: 1280px; margin: 0 auto;
  padding: 64px 48px 88px;
  display: grid; grid-template-columns: 340px 1fr; gap: 80px; align-items: start;
}
.bioB-rail { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 32px; }
.bioB-rail-portrait {
  width: 100%; aspect-ratio: 4/5;
  background: var(--b-paper); overflow: hidden;
}
.bioB-rail-portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 24%;
}
.bioB-rail-contact {
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 8px; border-top: 1px solid var(--b-accent);
}
.bioB-rail-contact .row { display: flex; flex-direction: column; gap: 4px; }
.bioB-rail-contact dt {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-mute); margin: 0; font-weight: 600;
}
.bioB-rail-contact dd {
  font-family: var(--b-serif); font-size: 18px; color: var(--b-ink); margin: 0;
}
.bioB-rail-block { padding-top: 18px; border-top: 1px solid var(--b-rule-soft); }
.bioB-rail-block h3 {
  font-family: var(--b-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-mute); margin: 0 0 12px;
}
.bioB-rail-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.bioB-rail-block li { display: flex; flex-direction: column; gap: 3px; }
.bioB-rail-block .school {
  font-family: var(--b-serif); font-size: 17px; color: var(--b-ink); line-height: 1.25;
}
.bioB-rail-block .meta {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--b-mute); font-weight: 600;
}
.bioB-rail-actions { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }

/* Right column — long-form prose */
.bioB-prose { display: flex; flex-direction: column; gap: 0; max-width: 64ch; }
.bioB-prose .lede {
  font-family: var(--b-serif); font-style: italic; font-weight: 400;
  font-size: 28px; line-height: 1.35; color: var(--b-ink);
  margin: 0 0 40px; max-width: 26ch;
}
.bioB-prose h2 {
  font-family: var(--b-serif); font-weight: 400; font-size: 36px;
  line-height: 1.05; letter-spacing: -0.015em;
  margin: 0 0 20px; color: var(--b-ink); text-wrap: balance;
}
.bioB-prose h2 em { font-style: italic; color: var(--b-accent); }
.bioB-prose p {
  font-size: 17px; line-height: 1.75; color: var(--b-mute-deep);
  margin: 0 0 20px;
}
.bioB-prose p strong { color: var(--b-ink); font-weight: 600; }
.bioB-prose p em { font-style: italic; }
.bioB-prose section + section { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--b-rule); }

.bioB-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
}
.bioB-tag {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  padding: 8px 12px; border: 1px solid var(--b-rule); color: var(--b-ink); background: transparent;
}

/* Awards strip inside the right column */
.bioB-awards-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  padding: 28px 0; border-top: 1px solid var(--b-rule); border-bottom: 1px solid var(--b-rule);
}
.bioB-awards-row .award { display: flex; align-items: center; justify-content: center; height: 84px; }
.bioB-awards-row .award img {
  max-height: 100%; max-width: 100%; object-fit: contain;
  filter: grayscale(1) opacity(0.72); transition: filter 240ms ease;
}
.bioB-awards-row .award:hover img { filter: grayscale(0) opacity(1); }

/* Articles strip — full-width band below the dossier */
.bioB-articles-band {
  background: var(--b-paper); padding: 88px 48px;
}
.bioB-articles-inner { max-width: 1280px; margin: 0 auto; }
.bioB-articles-head {
  display: flex; justify-content: space-between; align-items: end; gap: 24px;
  margin-bottom: 48px;
}
.bioB-articles-head h2 {
  font-family: var(--b-serif); font-weight: 400; font-size: 56px;
  line-height: 1; letter-spacing: -0.02em; margin: 12px 0 0;
}
.bioB-articles-head h2 em { font-style: italic; color: var(--b-accent); }
.bioB-articles-list { display: flex; flex-direction: column; }
.bioB-articles-list .row {
  display: grid; grid-template-columns: 130px 130px 1fr 24px;
  gap: 32px; align-items: baseline; padding: 22px 0;
  border-top: 1px solid var(--b-rule);
}
.bioB-articles-list .row:last-child { border-bottom: 1px solid var(--b-rule); }
.bioB-articles-list .kind {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
  color: var(--b-accent-deep);
}
.bioB-articles-list .date {
  font-family: var(--b-serif); font-style: italic; font-size: 17px; color: var(--b-mute-deep);
}
.bioB-articles-list .title {
  font-family: var(--b-serif); font-size: 22px; line-height: 1.3; color: var(--b-ink);
}
.bioB-articles-list .arr { font-size: 16px; color: var(--b-accent); text-align: right; }

/* ============================================================
   VARIANT C — The Profile
   Editorial magazine treatment built around the johnbquinn.com/about
   IA. Centered title page → full-bleed lead image → wide article
   with a generous reading column on the left and a quiet float
   column on the right that holds peer quotes, a portrait, an
   accomplishments list, and a follow block. Closing pull-quote
   on full-bleed navy. Designed to read like a New Yorker profile
   of an attorney, not a corporate web page.
   ============================================================ */
.bioC3-root { background: var(--b-bone); }

/* ─── Crumb ─── */
.bioC3-crumb {
  /* moved into the hero overlay — kept for back-compat, hidden if used */
  display: none;
}

/* ─── Section 1: full-bleed hero with name overlaid ─── */
.bioC3-hero {
  position: relative;
  width: 100%;
  height: 880px;
  overflow: hidden;
  background: var(--b-ink);
}
.bioC3-hero-img { position: absolute; inset: 0; }
.bioC3-hero-img img {
  width: 100%; height: 100%;
  /* "Zoom out" — show the entire portrait instead of cropping. Tucked to
     the right so the name on the left sits on the panel background, not
     the photo. The dark navy hero bg fills the empty area on the left. */
  object-fit: contain;
  object-position: right top;
  filter: contrast(1.04);
}
/* At tablet / small-laptop widths the image was wide enough to bleed into
   the name's column on the left. Constrain the image area to the right
   half so the name always sits on clear panel background. */
@media (max-width: 1280px) {
  .bioC3-hero-img { left: 50%; }
}
/* Gradient scrim — slight top, heavier bottom for legibility */
.bioC3-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,39,72,0.55) 0%, rgba(15,39,72,0.0) 22%, rgba(15,39,72,0.0) 45%, rgba(15,39,72,0.78) 100%);
  pointer-events: none;
}
.bioC3-hero-inner {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto;
  height: 100%;
  padding: 48px 64px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--b-bone);
}
.bioC3-hero-top {
  display: flex; align-items: center; justify-content: space-between;
}
.bioC3-hero-top .bio-back { color: rgba(251,250,246,0.78); }
.bioC3-hero-top .bio-back .arr::before { border-color: rgba(251,250,246,0.78); }
.bioC3-hero-eye {
  font-family: var(--b-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--b-accent-soft);
}
.bioC3-hero-bottom {
  display: flex; flex-direction: column; gap: 36px;
  max-width: 1180px;
}
.bioC3-hero-name {
  font-family: var(--b-serif); font-weight: 400;
  font-size: clamp(96px, 13vw, 200px);
  line-height: 0.9; letter-spacing: -0.035em;
  margin: 0; color: var(--b-bone);
}
.bioC3-hero-name .first { display: block; }
.bioC3-hero-name .last {
  display: block;
  font-style: italic;
  /* Outline-only italic last name, sits "on" the image without flattening it */
  color: transparent;
  -webkit-text-stroke: 1.6px var(--b-accent-soft);
  text-stroke: 1.6px var(--b-accent-soft);
  margin-left: -0.04em;
}
.bioC3-hero-meta {
  display: flex; gap: 48px; align-items: center; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(251,250,246,0.22);
}
.bioC3-hero-meta .role {
  font-family: var(--b-serif); font-style: italic;
  font-size: 26px; line-height: 1.2;
  color: var(--b-accent-soft);
  margin: 0;
}
.bioC3-hero-meta .practice {
  font-family: var(--b-sans);
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
  color: rgba(251,250,246,0.85);
}
.bioC3-hero-meta .spacer { flex: 1; min-width: 24px; }
.bioC3-hero-meta .cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--b-sans);
  font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 14px 22px; background: var(--b-bone); color: var(--b-ink);
  border: 0; cursor: pointer; transition: background 200ms ease, color 200ms ease;
}
.bioC3-hero-meta .cta:hover { background: var(--b-accent); color: var(--b-bone); }
.bioC3-hero-meta .cta .arr {
  width: 16px; height: 1px; background: currentColor; position: relative;
}
.bioC3-hero-meta .cta .arr::after {
  content: ''; position: absolute; right: 0; top: -3px; width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ============================================================
   FAQ PAGE — long-form editorial
   Hero (navy) → sticky-rail TOC + section stacks → close band
   ============================================================ */
.faq-root { background: var(--b-bone); }

/* HERO */
.faq-hero {
  background: var(--b-ink-deep);
  color: var(--b-bone);
  padding: 120px 64px 96px;
  position: relative;
  overflow: hidden;
}
.faq-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(63,111,168,0.18), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(184,202,220,0.06), transparent 50%);
  pointer-events: none;
}
.faq-hero-inner { position: relative; max-width: 1280px; margin: 0 auto; }
.faq-hero-meta {
  display: flex; align-items: center; gap: 24px;
  margin-bottom: 56px;
}
.faq-hero-eye {
  font-family: var(--b-sans);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600;
  color: var(--b-accent-soft);
  position: relative; padding-left: 48px;
}
.faq-hero-eye::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 36px; height: 1px; background: var(--b-accent);
}
.faq-hero-count {
  font-family: var(--b-serif); font-style: italic;
  font-size: 16px;
  color: rgba(251,250,246,0.55);
}

.faq-hero-title {
  font-family: var(--b-serif); font-weight: 400;
  font-size: clamp(96px, 11.5vw, 168px);
  line-height: 0.94; letter-spacing: -0.03em;
  color: var(--b-bone);
  margin: 0 0 32px;
  text-wrap: balance;
}
.faq-hero-title em {
  font-style: italic; color: var(--b-accent-soft); font-weight: 400;
}

.faq-hero-lede {
  font-family: var(--b-serif); font-style: italic; font-weight: 400;
  font-size: 26px; line-height: 1.45;
  color: rgba(251,250,246,0.78);
  max-width: 58ch;
  margin: 0 0 72px;
}

/* Hero quick-link tabs — a horizontal index that mirrors the rail */
.faq-hero-tabs {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(251,250,246,0.16);
}
.faq-hero-tabs li {
  border-right: 1px solid rgba(251,250,246,0.12);
  border-bottom: 1px solid rgba(251,250,246,0.12);
}
.faq-hero-tabs li:nth-child(4n) { border-right: 0; }
.faq-hero-tabs li:nth-last-child(-n+3):nth-child(4n+1),
.faq-hero-tabs li:nth-last-child(-n+2):nth-child(4n+2),
.faq-hero-tabs li:nth-last-child(-n+1):nth-child(4n+3) { /* keep bottom rule on uneven last row */ }
.faq-hero-tabs a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 22px 24px;
  color: rgba(251,250,246,0.7);
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease;
}
.faq-hero-tabs a:hover {
  background: rgba(63,111,168,0.18);
  color: var(--b-bone);
}
.faq-hero-tabs .n {
  font-family: var(--b-serif); font-style: italic; font-weight: 400;
  font-size: 22px; line-height: 1;
  color: var(--b-accent-soft);
  letter-spacing: -0.01em;
  min-width: 32px;
}
.faq-hero-tabs .lbl {
  font-family: var(--b-sans); font-weight: 500;
  font-size: 13px; line-height: 1.3;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* BODY — two-column rail + content */
.faq-body {
  background: var(--b-bone);
  padding: 96px 64px 120px;
}
.faq-body-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 96px;
  align-items: start;
}

/* RAIL — sticky TOC */
.faq-rail { position: sticky; top: 96px; }
.faq-rail-inner { display: flex; flex-direction: column; gap: 28px; }
.faq-rail-eye {
  font-family: var(--b-sans);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600;
  color: var(--b-eye-deep);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--b-rule-soft);
}
.faq-rail-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  counter-reset: rail;
}
.faq-rail-list a {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  padding: 10px 0 10px 0;
  color: var(--b-mute);
  text-decoration: none;
  align-items: baseline;
  border-left: 1px solid transparent;
  padding-left: 14px;
  margin-left: -14px;
  transition: color 180ms ease, border-color 180ms ease;
}
.faq-rail-list .num {
  font-family: var(--b-serif); font-style: italic;
  font-size: 17px; letter-spacing: -0.01em;
  color: var(--b-mute);
}
.faq-rail-list .lbl {
  font-family: var(--b-serif); font-weight: 400;
  font-size: 17px; line-height: 1.25;
  color: var(--b-ink);
  text-wrap: balance;
}
.faq-rail-list .cnt {
  font-family: var(--b-sans);
  font-size: 10px; letter-spacing: 0.18em; font-weight: 600;
  color: var(--b-mute);
  padding-left: 8px;
}
.faq-rail-list a:hover .lbl { color: var(--b-accent); }
.faq-rail-list li.is-active a {
  border-left-color: var(--b-accent);
}
.faq-rail-list li.is-active .num,
.faq-rail-list li.is-active .lbl { color: var(--b-accent); }
.faq-rail-list li.is-active .lbl { font-style: italic; }

.faq-rail-foot {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--b-rule-soft);
  display: flex; flex-direction: column; gap: 14px;
}
.faq-rail-foot .lbl {
  font-family: var(--b-serif); font-style: italic;
  font-size: 17px; color: var(--b-mute-deep);
}
.faq-rail-foot .phone {
  font-family: var(--b-serif);
  font-size: 22px; color: var(--b-ink);
  text-decoration: none;
  letter-spacing: -0.005em;
}
.faq-rail-foot .cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--b-sans);
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 600;
  padding: 14px 18px;
  background: var(--b-ink); color: var(--b-bone);
  text-decoration: none;
  transition: background 220ms ease;
}
.faq-rail-foot .cta:hover { background: var(--b-accent); }
.faq-rail-foot .cta .arr {
  width: 16px; height: 1px; background: currentColor; position: relative;
}
.faq-rail-foot .cta .arr::after {
  content: ''; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

/* MAIN — section stacks */
.faq-main { display: flex; flex-direction: column; gap: 96px; min-width: 0; }

.faq-sec { scroll-margin-top: 80px; }
.faq-sec-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: end;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--b-rule);
  margin-bottom: 8px;
}
.faq-sec-n {
  font-family: var(--b-serif); font-style: italic; font-weight: 400;
  font-size: 88px; line-height: 0.85;
  color: var(--b-accent);
  letter-spacing: -0.03em;
}
.faq-sec-meta { display: flex; flex-direction: column; gap: 6px; }
.faq-sec-title {
  font-family: var(--b-serif); font-weight: 400;
  font-size: 44px; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--b-ink);
  margin: 0;
  text-wrap: balance;
}
.faq-sec-count {
  font-family: var(--b-sans);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
  color: var(--b-mute);
}

.faq-q-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.faq-q {
  border-bottom: 1px solid var(--b-rule-soft);
}
.faq-q details {
  padding: 0;
}
.faq-q summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 64px 1fr 32px;
  gap: 20px;
  align-items: baseline;
  padding: 28px 0;
  position: relative;
  transition: background 200ms ease;
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary:hover .ask { color: var(--b-accent); }
.faq-q summary:hover { background: rgba(15,39,72,0.015); }

.faq-q .num {
  font-family: var(--b-serif); font-style: italic; font-weight: 400;
  font-size: 28px; line-height: 1;
  color: var(--b-mute);
  letter-spacing: -0.01em;
}
.faq-q .ask {
  font-family: var(--b-serif); font-weight: 400;
  font-size: 24px; line-height: 1.35; letter-spacing: -0.01em;
  color: var(--b-ink);
  transition: color 200ms ease;
  text-wrap: balance;
}
.faq-q[open] .num { color: var(--b-accent); font-style: italic; }
.faq-q[open] .ask { color: var(--b-accent); font-style: italic; }

/* Plus / minus glyph */
.faq-q .plus {
  position: relative;
  width: 18px; height: 18px;
  justify-self: end; margin-top: 6px;
  flex-shrink: 0;
}
.faq-q .plus::before,
.faq-q .plus::after {
  content: ''; position: absolute;
  background: var(--b-ink);
  transition: transform 240ms ease, background 200ms ease;
}
.faq-q .plus::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; }
.faq-q .plus::after  { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; }
.faq-q[open] .plus::before { background: var(--b-accent); }
.faq-q[open] .plus::after  { transform: rotate(90deg); background: var(--b-accent); opacity: 0; }
.faq-q summary:hover .plus::before,
.faq-q summary:hover .plus::after { background: var(--b-accent); }

.faq-q .answer {
  padding: 0 0 32px 84px; /* aligns under .ask */
  display: flex; flex-direction: column; gap: 16px;
  animation: faqAnswerFade 320ms ease;
}
@keyframes faqAnswerFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-q .answer p {
  font-family: var(--b-serif); font-weight: 400;
  font-size: 18px; line-height: 1.7;
  color: var(--b-ink);
  margin: 0;
  max-width: 70ch;
}
.faq-q .answer p em { font-style: italic; color: var(--b-accent); }

/* CLOSE BAND — bone, mirrors bio contact */
.faq-close {
  background: var(--b-paper);
  padding: 120px 64px;
  border-top: 1px solid var(--b-rule-soft);
}
.faq-close-inner {
  max-width: 920px; margin: 0 auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.faq-close .eye {
  font-family: var(--b-sans);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600;
  color: var(--b-eye-deep);
  position: relative; padding-top: 28px;
}
.faq-close .eye::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 36px; height: 1px; background: var(--b-accent);
  transform: translateX(-50%);
}
.faq-close h2 {
  font-family: var(--b-serif); font-weight: 400;
  font-size: clamp(48px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--b-ink); margin: 0;
  text-wrap: balance;
}
.faq-close h2 em { font-style: italic; color: var(--b-accent); }
.faq-close .lede {
  font-family: var(--b-serif); font-style: italic;
  font-size: 22px; line-height: 1.55;
  color: var(--b-mute-deep);
  max-width: 60ch; margin: 0;
}
.faq-close .cta-row {
  display: flex; gap: 24px; align-items: center;
  margin-top: 16px;
}
.faq-close .cta-primary {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--b-sans);
  font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 18px 28px;
  background: var(--b-ink); color: var(--b-bone);
  text-decoration: none;
  transition: background 240ms ease;
}
.faq-close .cta-primary:hover { background: var(--b-accent); }
.faq-close .cta-primary .arr {
  width: 18px; height: 1px; background: currentColor; position: relative;
}
.faq-close .cta-primary .arr::after {
  content: ''; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.faq-close .cta-ghost {
  font-family: var(--b-serif); font-style: italic;
  font-size: 21px; color: var(--b-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--b-rule);
  padding-bottom: 2px;
}

/* ============================================================
   ASSOCIATE LAYOUT (BioAssociate.jsx)
   Lighter sibling of Variant C — same hero language,
   bone bio band with prose + structured side rail.
   ============================================================ */
.bioAss-root { background: var(--b-bone); }

/* Associate hero — right-align the portrait so the name has its own
   breathing room on the left. Photo lives on the right ~half of the
   hero; the dark studio backdrop fills the rest so the name reads
   clean on flat color rather than fighting the image. */
.bioAss-hero .bioC3-hero-img {
  background-color: #1A2538;
  background-image: var(--bioAss-portrait);
  background-repeat: no-repeat;
  background-position: right 6% center;
  background-size: auto 95%;
}
.bioAss-hero .bioC3-hero-img img {
  opacity: 0;
  width: 100%; height: 100%;
}
/* Drop the gradient scrim — name now sits on flat backdrop, not photo */
.bioAss-hero .bioC3-hero-scrim {
  background:
    linear-gradient(90deg, rgba(26,37,56,0.6) 0%, rgba(26,37,56,0.2) 38%, transparent 50%);
}
/* Constrain the inner content column to the left half of the hero */
.bioAss-hero .bioC3-hero-inner {
  max-width: 1280px;
}
.bioAss-hero .bioC3-hero-bottom {
  max-width: 620px;
}
.bioAss-hero .bioC3-hero-name {
  font-size: clamp(80px, 9.5vw, 132px);
  line-height: 0.95;
}
.bioAss-hero .bioC3-hero-meta {
  max-width: 560px;
}

/* Hero — placeholder portrait if no image yet */
.bioAss-portrait-placeholder {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.05), transparent 50%),
    linear-gradient(135deg, #2A3A52 0%, #1A2538 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px;
}
.bioAss-portrait-placeholder .initials {
  font-family: var(--b-serif); font-weight: 400; font-style: italic;
  font-size: 220px; line-height: 1;
  color: rgba(255, 255, 255, 0.12);
  letter-spacing: -0.04em;
}
.bioAss-portrait-placeholder .placeholder-note {
  font-family: var(--b-sans);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* Nickname styling — "Kassie" sits between first and last */
.bioAss-hero-name .nick {
  font-family: var(--b-serif); font-style: italic; font-weight: 400;
  font-size: 0.5em; line-height: 1;
  color: var(--b-accent-soft);
  display: block;
  margin: 8px 0 8px;
  letter-spacing: -0.01em;
}

/* Opening line — bone band, simple */
.bioAss-opener {
  background: var(--b-bone);
  padding: 72px 64px 56px;
  text-align: center;
  max-width: 1080px; margin: 0 auto;
}
.bioAss-opener .eye {
  display: block;
  font-family: var(--b-sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--b-eye-deep);
  margin-bottom: 20px;
  position: relative;
  padding-top: 28px;
}
.bioAss-opener .eye::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 36px; height: 1px; background: var(--b-accent);
  transform: translateX(-50%);
}
.bioAss-opener .line {
  font-family: var(--b-serif); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35;
  color: var(--b-ink);
  margin: 0 auto; max-width: 38ch;
}

/* Article — 2 col prose + side rail. Tighter than partner page. */
.bioAss-article {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 96px;
  padding: 24px 64px 96px;
  max-width: 1280px; margin: 0 auto;
}
.bioAss-prose { max-width: 62ch; }
.bioAss-prose p {
  font-family: var(--b-serif); font-weight: 400;
  font-size: 19px; line-height: 1.7;
  color: var(--b-ink);
  margin: 0 0 24px;
}
.bioAss-prose p em { font-style: italic; color: var(--b-accent); }
.bioAss-prose p strong { font-weight: 600; color: var(--b-ink); }
/* Drop-cap on first paragraph for editorial polish */
.bioAss-prose p:first-child::first-letter {
  font-family: var(--b-serif); font-style: italic;
  font-size: 5.4em; line-height: 0.9;
  float: left; margin: 8px 12px 0 0;
  color: var(--b-accent);
}

/* Side rail */
.bioAss-side { display: flex; flex-direction: column; gap: 48px; padding-top: 8px; }
.bioAss-block { display: flex; flex-direction: column; gap: 14px; }
.bioAss-block h3 {
  font-family: var(--b-sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--b-eye-deep);
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--b-rule-soft);
}

/* Education entry */
.bioAss-edu { display: flex; flex-direction: column; gap: 4px; }
.bioAss-edu .degree {
  font-family: var(--b-serif); font-weight: 400; font-style: italic;
  font-size: 19px; color: var(--b-accent); letter-spacing: -0.005em;
}
.bioAss-edu .school {
  font-family: var(--b-serif); font-size: 19px; line-height: 1.3;
  color: var(--b-ink);
}
.bioAss-edu .year {
  font-family: var(--b-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-mute); margin-top: 6px;
}
.bioAss-edu .note {
  font-family: var(--b-serif); font-style: italic;
  font-size: 14px; line-height: 1.5;
  color: var(--b-mute-deep); margin-top: 6px;
}

/* Experience list */
.bioAss-exp { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.bioAss-exp li { display: flex; flex-direction: column; gap: 4px; }
.bioAss-exp .role {
  font-family: var(--b-sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-mute);
}
.bioAss-exp .where {
  font-family: var(--b-serif); font-weight: 400; font-style: italic;
  font-size: 19px; color: var(--b-ink); letter-spacing: -0.005em;
}
.bioAss-exp .org {
  font-family: var(--b-serif); font-size: 15px; line-height: 1.4;
  color: var(--b-mute-deep);
}

/* Honors */
.bioAss-honors { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.bioAss-honors li {
  font-family: var(--b-serif); font-size: 16px; line-height: 1.45;
  color: var(--b-ink);
  padding-left: 16px; position: relative;
}
.bioAss-honors li::before {
  content: ''; position: absolute; left: 0; top: 0.7em;
  width: 6px; height: 1px; background: var(--b-accent);
}
.bioAss-honors li em { font-style: italic; color: var(--b-accent); }

/* Admissions */
.bioAss-admissions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bioAss-admissions li { display: flex; justify-content: space-between; gap: 16px; }
.bioAss-admissions .j {
  font-family: var(--b-serif); font-size: 16px; color: var(--b-ink);
}
.bioAss-admissions .y {
  font-family: var(--b-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-mute);
}
.bioC3-opener-band {
  max-width: 1080px; margin: 0 auto;
  padding: 60px 64px 48px;
  text-align: center;
}
.bioC3-opener-band .eye {
  display: block;
  font-family: var(--b-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--b-eye-deep);
  margin-bottom: 28px;
}
.bioC3-opener-band .quote {
  font-family: var(--b-serif); font-style: italic; font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px); line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--b-ink); text-wrap: balance;
  position: relative; padding-top: 40px;
  margin: 0 auto; max-width: 32ch;
}
.bioC3-opener-band .quote::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 56px; height: 1px; background: var(--b-accent);
  transform: translateX(-50%);
}
.bioC3-opener-band .cite {
  display: block; margin-top: 28px;
  font-family: var(--b-sans);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--b-eye-deep); font-weight: 600;
}

/* ─── Section 3: the article ─── */
.bioC3-article {
  max-width: 1280px; margin: 0 auto;
  padding: 60px 64px 48px;
  display: grid;
  grid-template-columns: minmax(0, 680px) 1fr;
  gap: 96px;
  align-items: start;
}

/* The prose column itself */
.bioC3-prose { min-width: 0; }
.bioC3-prose > p,
.bioC3-prose > div > p {
  font-family: var(--b-sans);
  font-size: 18px; line-height: 1.78;
  color: var(--b-mute-deep);
  margin: 0 0 24px;
}
.bioC3-prose p strong { color: var(--b-ink); font-weight: 600; }
.bioC3-prose p em { font-style: italic; }

/* Dropcap on the opening paragraph */
.bioC3-prose > p:first-child::first-letter {
  font-family: var(--b-serif); font-weight: 500;
  font-size: 92px; line-height: 0.85;
  float: left; padding: 10px 14px 0 0;
  color: var(--b-accent);
}

/* Pull quote inside prose — breaks visually with thin top rule */
.bioC3-prose .inset-quote {
  margin: 56px 0 56px;
  padding: 36px 0 0;
  border-top: 1px solid var(--b-accent);
}
.bioC3-prose .inset-quote blockquote {
  font-family: var(--b-serif); font-style: italic; font-weight: 400;
  font-size: 34px; line-height: 1.25; letter-spacing: -0.005em;
  color: var(--b-ink); margin: 0 0 18px;
  text-wrap: balance;
  text-indent: -0.36em;
}
.bioC3-prose .inset-quote .cite {
  font-family: var(--b-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-eye-deep); font-weight: 600;
}

/* Section block within prose */
.bioC3-prose .block {
  margin: 88px 0 0;
}
.bioC3-prose .block-eye {
  display: block;
  font-family: var(--b-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--b-eye-deep);
  margin-bottom: 16px;
}
.bioC3-prose .block h2 {
  font-family: var(--b-serif); font-weight: 400;
  font-size: clamp(40px, 4vw, 52px);
  line-height: 1.02; letter-spacing: -0.02em;
  margin: 0 0 36px; color: var(--b-ink);
  text-wrap: balance;
}
.bioC3-prose .block h2 em {
  font-style: italic; color: var(--b-accent);
}
.bioC3-prose .block > .intro {
  font-family: var(--b-serif); font-style: italic;
  font-size: 22px; line-height: 1.5;
  color: var(--b-ink);
  margin: 0 0 40px; max-width: 44ch;
}

/* Numbered matters list — the page&rsquo;s "trophy case" moment */
.bioC3-matters {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.bioC3-matters li {
  display: grid; grid-template-columns: 88px 1fr; gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--b-rule);
  align-items: start;
}
.bioC3-matters li:last-child {
  border-bottom: 1px solid var(--b-rule);
}
.bioC3-matters .n {
  font-family: var(--b-serif); font-style: italic; font-weight: 400;
  font-size: 56px; line-height: 0.9; letter-spacing: -0.02em;
  color: var(--b-accent);
}
.bioC3-matters .body {
  font-family: var(--b-sans);
  font-size: 17px; line-height: 1.7;
  color: var(--b-mute-deep);
}
.bioC3-matters .body strong { color: var(--b-ink); font-weight: 600; }

/* Plain bullet list — speaking, other victories */
.bioC3-list { list-style: none; padding: 0; margin: 0; }
.bioC3-list li {
  position: relative;
  padding: 18px 0 18px 40px;
  border-top: 1px solid var(--b-rule-soft);
  font-family: var(--b-sans);
  font-size: 16px; line-height: 1.65;
  color: var(--b-mute-deep);
}
.bioC3-list li:last-child { border-bottom: 1px solid var(--b-rule-soft); }
.bioC3-list li::before {
  content: ''; position: absolute; left: 0; top: 28px;
  width: 24px; height: 1px; background: var(--b-accent);
}
.bioC3-list li strong { color: var(--b-ink); font-weight: 600; }
.bioC3-list li em { font-style: italic; }

/* Speaking & writing — embedded portrait image (matches source aspect) */
.bioC3-speaking-figure {
  margin: 32px 0 36px;
  display: flex; flex-direction: column; gap: 12px;
}
.bioC3-speaking-figure .img {
  width: 100%; aspect-ratio: 1086 / 1448; overflow: hidden;
  background: var(--b-paper);
}
.bioC3-speaking-figure .img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
}
.bioC3-speaking-figure figcaption {
  font-family: var(--b-serif); font-style: italic;
  font-size: 16px; line-height: 1.45; color: var(--b-mute-deep);
  margin: 0;
}

/* "Beyond the courtroom" — pure typographic treatment, no image */
.bioC3-offduty p {
  font-family: var(--b-serif); font-weight: 400;
  font-size: 22px; line-height: 1.55; color: var(--b-ink);
  margin: 0; max-width: 50ch;
}

/* Education + admissions inside the prose column */
.bioC3-credentials {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  margin-top: 24px;
}
.bioC3-credentials .col h3 {
  font-family: var(--b-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-mute);
  margin: 0 0 16px;
}
.bioC3-credentials .col ul { list-style: none; padding: 0; margin: 0; }
.bioC3-credentials .col li {
  padding: 14px 0; border-top: 1px solid var(--b-rule-soft);
  font-family: var(--b-serif); font-size: 19px; color: var(--b-ink);
}
.bioC3-credentials .col li:first-child { border-top: 1px solid var(--b-accent); }
.bioC3-credentials .col li:last-child { border-bottom: 1px solid var(--b-rule-soft); }
.bioC3-credentials .col li .where {
  display: block; font-family: var(--b-sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--b-mute); margin-top: 6px; font-weight: 600;
}

/* ─── Side float column — quiet, generous spacing ─── */
.bioC3-side {
  display: flex; flex-direction: column; gap: 64px;
  padding-top: 0;
}
.bioC3-side-quote {
  padding: 28px 0 0;
  border-top: 1px solid var(--b-accent);
}
.bioC3-side-quote blockquote {
  font-family: var(--b-serif); font-style: italic; font-weight: 400;
  font-size: 24px; line-height: 1.35; letter-spacing: -0.005em;
  color: var(--b-ink); margin: 0 0 16px;
  text-wrap: balance;
}
.bioC3-side-quote .src {
  font-family: var(--b-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-mute); font-weight: 600;
}

.bioC3-side-photo {
  display: flex; flex-direction: column; gap: 12px;
}
.bioC3-side-photo .img {
  width: 100%; aspect-ratio: 4/5; overflow: hidden;
  background: var(--b-paper);
}
.bioC3-side-photo .img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
}
.bioC3-side-photo .caption {
  font-family: var(--b-serif); font-style: italic;
  font-size: 16px; line-height: 1.5; color: var(--b-mute-deep);
  margin: 0;
}

.bioC3-side-accomp {
  padding: 28px 0 0;
  border-top: 1px solid var(--b-accent);
}
.bioC3-side-accomp h3 {
  font-family: var(--b-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-eye-deep);
  margin: 0 0 18px;
}
.bioC3-side-accomp ul { list-style: none; padding: 0; margin: 0; }
.bioC3-side-accomp li {
  position: relative;
  padding: 14px 0 14px 26px;
  border-top: 1px solid var(--b-rule-soft);
  font-family: var(--b-sans);
  font-size: 14px; line-height: 1.55;
  color: var(--b-ink);
}
.bioC3-side-accomp li:first-child { border-top: 0; padding-top: 4px; }
.bioC3-side-accomp li:first-child::before { top: 12px; }
.bioC3-side-accomp li::before {
  content: ''; position: absolute; left: 0; top: 22px;
  width: 16px; height: 1px; background: var(--b-accent);
}
.bioC3-side-accomp li em { font-style: italic; }
.bioC3-side-accomp li strong { font-weight: 600; }

.bioC3-side-follow {
  padding: 28px 0 0;
  border-top: 1px solid var(--b-rule);
}
.bioC3-side-follow h3 {
  font-family: var(--b-sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--b-mute);
  margin: 0 0 14px;
}
.bioC3-side-follow ul { list-style: none; padding: 0; margin: 0; }
.bioC3-side-follow li {
  padding: 10px 0;
  font-family: var(--b-serif); font-size: 18px; color: var(--b-ink);
  border-bottom: 1px solid var(--b-rule-soft);
}
.bioC3-side-follow li:last-child { border-bottom: 0; }
.bioC3-side-follow li a {
  display: flex; justify-content: space-between; align-items: center;
  transition: color 200ms ease;
}
.bioC3-side-follow li a::after {
  content: '\2197'; color: var(--b-accent); font-size: 16px;
  transition: transform 200ms ease;
}
.bioC3-side-follow li a:hover { color: var(--b-accent); }
.bioC3-side-follow li a:hover::after { transform: translate(2px, -2px); }

/* ─── Section 4: closing pull-quote — full-bleed navy ─── */
.bioC3-closer {
  background: var(--b-ink);
  color: var(--b-bone);
  padding: 140px 48px;
  text-align: center;
}
.bioC3-closer-inner {
  max-width: 1080px; margin: 0 auto;
}
.bioC3-closer .mark {
  font-family: var(--b-serif); font-style: italic;
  font-size: 120px; line-height: 0.3;
  color: var(--b-accent-soft);
  margin: 0;
}
.bioC3-closer blockquote {
  font-family: var(--b-serif); font-style: italic; font-weight: 400;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.22; letter-spacing: -0.005em;
  color: var(--b-bone);
  margin: 56px 0 32px;
  text-wrap: balance;
}
.bioC3-closer blockquote em { color: var(--b-accent-soft); }
.bioC3-closer .cite {
  font-family: var(--b-sans);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--b-accent-soft); font-weight: 600;
}

/* ===== testimonials.css ===== */
/* ============================================================
   Testimonials page — three approaches, one design system
   Navy ink on bone · Cormorant Garamond + Source Sans 3 ·
   Steel-blue italic accent · Hairline rules · No emoji
   ============================================================ */

.test-root {
  --t-ink:        #0F2748;
  --t-ink-deep:   #081A33;
  --t-ink-soft:   #1A3559;
  --t-bone:       #FBFAF6;
  --t-paper:      #F6F1E9;
  --t-paper-warm: #EFE7D8;
  --t-white:      #FFFFFF;
  --t-rule:       rgba(15,39,72,0.14);
  --t-rule-soft:  rgba(15,39,72,0.08);
  --t-mute:       #6B7280;
  --t-mute-deep:  #3B4658;
  --t-accent:      #3F6FA8;
  --t-accent-deep: #2A537F;
  --t-accent-soft: #B8CADC;
  --t-eye-deep:    #8E3F2C;

  --t-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --t-sans:  'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--t-sans);
  color: var(--t-ink);
  background: var(--t-bone);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.test-root *, .test-root *::before, .test-root *::after { box-sizing: border-box; }
.test-root img { max-width: 100%; display: block; }
.test-root a { color: inherit; text-decoration: none; }

/* ─── Shared chrome: nav (matches homepage) ─── */
.test-nav {
  background: rgba(251,250,246,0.96);
  border-bottom: 1px solid var(--t-rule-soft);
}
.test-nav-row {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px 48px; gap: 24px;
}
.test-nav-tabs { display: flex; gap: 32px; }
.test-nav-tabs a {
  font-size: 12px; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 500;
  color: var(--t-mute-deep);
}
.test-nav-tabs a.is-active { color: var(--t-ink); position: relative; }
.test-nav-tabs a.is-active::before {
  content: ''; position: absolute; left: 50%; top: -8px; width: 18px; height: 1px;
  background: var(--t-accent); transform: translateX(-50%);
}
.test-nav-logo img { height: 38px; width: auto; display: block; }
.test-nav-end { display: flex; justify-content: flex-end; gap: 16px; align-items: center; }
.test-nav-phone {
  font-family: var(--t-serif); font-style: italic; font-size: 17px; color: var(--t-ink);
}
.test-nav-cta {
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; font-weight: 600;
  padding: 10px 16px; border: 1px solid var(--t-ink); color: var(--t-ink);
  background: transparent; cursor: pointer;
}

/* CTA + eyebrow + footer + Avvo block — shared */
.test-cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--t-sans);
  font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 18px 28px; background: var(--t-ink); color: var(--t-bone);
  border: 0; cursor: pointer; transition: background 240ms ease;
}
.test-cta:hover { background: var(--t-accent); }
.test-cta .arr { width: 18px; height: 1px; background: currentColor; position: relative; }
.test-cta .arr::after {
  content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.test-eye {
  font-family: var(--t-sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--t-eye-deep);
}
.test-eye.on-dark { color: var(--t-accent-soft); }
.test-rule { width: 56px; height: 1px; background: var(--t-accent); border: 0; }

.test-footer {
  background: var(--t-ink-deep); color: rgba(251,250,246,0.72); padding: 36px 48px;
}
.test-footer-row {
  max-width: 1280px; margin: 0 auto;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 12px;
}

/* Avvo CTA block — sits at the bottom of every variant, theme-aware */
.test-avvo {
  text-align: center;
  padding: 88px 48px 96px;
  background: var(--t-paper);
  border-top: 1px solid var(--t-rule);
}
.test-avvo h3 {
  font-family: var(--t-serif); font-weight: 400; font-style: italic;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--t-ink); margin: 0 0 28px; text-wrap: balance;
}
.test-avvo h3 em { font-style: italic; color: var(--t-accent); }
.test-avvo a.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--t-sans);
  font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  padding: 16px 28px;
  border: 1px solid var(--t-ink); color: var(--t-ink);
  background: var(--t-bone);
  transition: background 220ms ease, color 220ms ease;
}
.test-avvo a.btn:hover { background: var(--t-ink); color: var(--t-bone); }
.test-avvo a.btn .arr { color: var(--t-accent); font-size: 14px; }
.test-avvo a.btn:hover .arr { color: var(--t-accent-soft); }

/* ============================================================
   VARIANT A — The Index
   Editorial 3-col masonry, like a literary anthology of voices.
   Refined typography, hairline-blue rules between quotes, "by line"
   client names and matter-type chips up top.
   ============================================================ */
.testA-head {
  max-width: 1280px; margin: 0 auto;
  padding: 96px 48px 64px;
  text-align: center;
}
.testA-head .test-eye { display: inline-block; margin-bottom: 28px; }
.testA-head h1 {
  font-family: var(--t-serif); font-weight: 400;
  font-size: clamp(72px, 8.5vw, 128px);
  line-height: 0.96; letter-spacing: -0.028em;
  margin: 0; color: var(--t-ink); text-wrap: balance;
}
.testA-head h1 em { font-style: italic; color: var(--t-accent); font-weight: 400; }
.testA-head .lede {
  font-family: var(--t-serif); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4;
  color: var(--t-mute-deep);
  margin: 32px auto 0; max-width: 44ch; text-wrap: balance;
}

/* Filter row */
.testA-filter {
  max-width: 1280px; margin: 0 auto;
  padding: 24px 48px 56px;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  align-items: center;
}
.testA-filter-label {
  font-family: var(--t-sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--t-mute); margin-right: 8px;
}
.testA-chip {
  font-family: var(--t-sans);
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--t-rule);
  background: transparent;
  color: var(--t-mute-deep);
  cursor: pointer;
  transition: all 200ms ease;
}
.testA-chip:hover { color: var(--t-ink); border-color: var(--t-ink); }
.testA-chip.is-active {
  background: var(--t-ink); color: var(--t-bone); border-color: var(--t-ink);
}

/* Masonry — CSS columns so quotes flow naturally without ragged bottoms */
.testA-grid {
  max-width: 1280px; margin: 0 auto;
  padding: 0 48px 96px;
  column-count: 3;
  column-gap: 64px;
}
@media (max-width: 1080px) {
  .testA-grid { column-count: 2; }
}
@media (max-width: 720px) {
  .testA-grid { column-count: 1; }
}

.testA-quote {
  display: block;
  break-inside: avoid;
  margin: 0 0 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--t-accent);
}
.testA-quote .head {
  font-family: var(--t-serif); font-weight: 400;
  font-size: 26px; line-height: 1.2; letter-spacing: -0.005em;
  color: var(--t-ink); margin: 0 0 18px;
  text-wrap: balance;
}
.testA-quote .head em { font-style: italic; color: var(--t-accent); }
.testA-quote .body {
  font-family: var(--t-sans);
  font-size: 15px; line-height: 1.7;
  color: var(--t-mute-deep);
  margin: 0 0 24px;
}
.testA-quote .byline {
  display: flex; flex-direction: column; gap: 4px;
}
.testA-quote .byline .name {
  font-family: var(--t-serif);
  font-size: 20px; color: var(--t-ink); line-height: 1.2;
}
.testA-quote .byline .meta {
  font-family: var(--t-sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--t-mute); font-weight: 600;
}

/* ============================================================
   VARIANT B — Featured + Filterable Grid
   One hero quote on a paper band with a stat strip, then a tighter
   card grid below filterable by matter type. Cards are flat,
   hairline-edged, with a 1px steel-blue top rule.
   ============================================================ */
.testB-hero {
  background: var(--t-paper);
  padding: 80px 48px 88px;
  border-bottom: 1px solid var(--t-rule);
}
.testB-hero-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 0;
  text-align: center;
}
.testB-hero .test-eye { display: inline-block; margin-bottom: 28px; }
.testB-hero h1 {
  font-family: var(--t-serif); font-weight: 400;
  font-size: clamp(56px, 6vw, 84px);
  line-height: 0.98; letter-spacing: -0.022em;
  margin: 0 0 16px; color: var(--t-ink);
}
.testB-hero h1 em { font-style: italic; color: var(--t-accent); }
.testB-hero .sub {
  font-family: var(--t-serif); font-style: italic;
  font-size: 22px; line-height: 1.5; color: var(--t-mute-deep);
  margin: 0 auto 56px; max-width: 42ch;
}

.testB-feature {
  max-width: 920px; margin: 0 auto;
  padding-top: 56px;
  border-top: 1px solid var(--t-accent);
  position: relative;
}
.testB-feature .mark {
  display: block;
  font-family: var(--t-serif); font-style: italic;
  font-size: 96px; line-height: 0;
  color: var(--t-accent);
  margin: 0 0 32px;
}
.testB-feature blockquote {
  font-family: var(--t-serif); font-style: italic; font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--t-ink); margin: 0 0 28px; text-wrap: balance;
}
.testB-feature .cite {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.testB-feature .cite .name {
  font-family: var(--t-serif); font-size: 22px; color: var(--t-ink);
}
.testB-feature .cite .matter {
  font-family: var(--t-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--t-mute); font-weight: 600;
}

/* Stat strip */
.testB-stats {
  max-width: 1280px; margin: 0 auto;
  padding: 56px 48px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px;
  border-bottom: 1px solid var(--t-rule);
}
.testB-stat {
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--t-accent); padding-top: 18px;
}
.testB-stat .v {
  font-family: var(--t-serif); font-style: italic; font-weight: 400;
  font-size: clamp(48px, 5vw, 72px); line-height: 1;
  letter-spacing: -0.02em; color: var(--t-accent);
}
.testB-stat .l {
  font-family: var(--t-sans);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--t-mute-deep); font-weight: 600;
}

/* Filter row */
.testB-filter-band {
  background: var(--t-bone);
  padding: 56px 48px 32px;
  position: sticky; top: 0; z-index: 5;
  border-bottom: 1px solid var(--t-rule-soft);
}
.testB-filter-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: end;
}
.testB-filter-inner .label-col h2 {
  font-family: var(--t-serif); font-weight: 400;
  font-size: 32px; line-height: 1; letter-spacing: -0.015em;
  margin: 8px 0 0; color: var(--t-ink);
}
.testB-filter-inner .label-col h2 em { font-style: italic; color: var(--t-accent); }
.testB-filter {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
.testB-chip {
  font-family: var(--t-sans);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--t-rule);
  background: transparent;
  color: var(--t-mute-deep);
  cursor: pointer;
  transition: all 200ms ease;
}
.testB-chip:hover { color: var(--t-ink); border-color: var(--t-ink); }
.testB-chip.is-active {
  background: var(--t-ink); color: var(--t-bone); border-color: var(--t-ink);
}

/* Grid */
.testB-grid {
  max-width: 1280px; margin: 0 auto;
  padding: 48px 48px 96px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
@media (max-width: 1080px) { .testB-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .testB-grid { grid-template-columns: 1fr; } }

.testB-card {
  background: var(--t-white);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
  border-top: 2px solid var(--t-accent);
  box-shadow: 0 1px 3px rgba(15,39,72,0.04);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.testB-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15,39,72,0.08);
}
.testB-card .matter {
  font-family: var(--t-sans);
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--t-accent-deep); font-weight: 700;
}
.testB-card .head {
  font-family: var(--t-serif); font-weight: 400;
  font-size: 24px; line-height: 1.2; letter-spacing: -0.005em;
  color: var(--t-ink); margin: 0;
  text-wrap: balance;
}
.testB-card .head em { font-style: italic; color: var(--t-accent); }
.testB-card .body {
  font-family: var(--t-sans);
  font-size: 14px; line-height: 1.65;
  color: var(--t-mute-deep);
  flex: 1;
}
.testB-card .byline {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--t-rule-soft);
  display: flex; justify-content: space-between; align-items: baseline;
}
.testB-card .byline .name {
  font-family: var(--t-serif); font-size: 18px; color: var(--t-ink);
}
.testB-card .byline .where {
  font-family: var(--t-sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--t-mute); font-weight: 600;
}

/* ============================================================
   VARIANT C — The Hearing
   Cinematic single-quote-per-band scroll experience. Big italic
   serif. Alternating bone / paper / navy bands. Counter chrome
   in the corners with an item number out of total. Stats and Avvo
   close it out.
   ============================================================ */
.testC-hero {
  background: var(--t-ink); color: var(--t-bone);
  padding: 120px 48px 96px;
  text-align: center;
}
.testC-hero .eye {
  display: inline-block;
  font-family: var(--t-sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--t-accent-soft);
  margin-bottom: 32px;
}
.testC-hero h1 {
  font-family: var(--t-serif); font-weight: 400;
  font-size: clamp(80px, 9vw, 144px);
  line-height: 0.94; letter-spacing: -0.025em;
  margin: 0; color: var(--t-bone); text-wrap: balance;
}
.testC-hero h1 em { font-style: italic; color: var(--t-accent-soft); font-weight: 400; }
.testC-hero .lede {
  max-width: 38ch; margin: 40px auto 0;
  font-family: var(--t-serif); font-style: italic;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35;
  color: rgba(251,250,246,0.82);
  position: relative; padding-top: 32px;
}
.testC-hero .lede::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 56px; height: 1px; background: var(--t-accent-soft);
  transform: translateX(-50%);
}

/* Cinematic band — one quote per screen, alternating backgrounds */
.testC-band {
  padding: 120px 48px;
  border-bottom: 1px solid var(--t-rule);
}
.testC-band.bg-bone { background: var(--t-bone); }
.testC-band.bg-paper { background: var(--t-paper); }
.testC-band.bg-paper-warm { background: var(--t-paper-warm); }

.testC-band-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid;
  grid-template-columns: 80px 1fr 200px;
  gap: 48px;
  align-items: start;
}
.testC-counter {
  font-family: var(--t-serif); font-style: italic; font-weight: 400;
  font-size: 56px; line-height: 1; letter-spacing: -0.02em;
  color: var(--t-accent);
}
.testC-counter .total {
  display: block; margin-top: 8px;
  font-family: var(--t-sans); font-style: normal;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--t-mute); font-weight: 600;
}
.testC-content {}
.testC-content .matter {
  display: inline-block;
  font-family: var(--t-sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--t-eye-deep);
  margin-bottom: 24px;
}
.testC-content .head {
  font-family: var(--t-serif); font-weight: 400;
  font-size: clamp(36px, 4.4vw, 56px); line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--t-ink); margin: 0 0 32px;
  text-wrap: balance;
}
.testC-content .head em { font-style: italic; color: var(--t-accent); }
.testC-content .quote {
  font-family: var(--t-sans);
  font-size: 18px; line-height: 1.78;
  color: var(--t-mute-deep);
  margin: 0 0 32px; max-width: 60ch;
}
.testC-content .quote::first-letter {
  font-family: var(--t-serif); font-style: italic;
  font-size: 56px; line-height: 0.85;
  float: left; padding: 8px 12px 0 0;
  color: var(--t-accent);
  font-weight: 500;
}
.testC-content .byline {
  display: flex; gap: 24px; align-items: baseline;
  padding-top: 18px;
  border-top: 1px solid var(--t-accent);
  max-width: 60ch;
}
.testC-content .byline .name {
  font-family: var(--t-serif); font-style: italic; font-size: 22px; color: var(--t-ink);
}
.testC-content .byline .where {
  font-family: var(--t-sans);
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--t-mute); font-weight: 600;
}
.testC-aside {
  font-family: var(--t-serif); font-style: italic;
  font-size: 17px; line-height: 1.5;
  color: var(--t-mute-deep);
  padding-top: 18px;
  border-top: 1px solid var(--t-rule-soft);
}
.testC-aside .lab {
  display: block;
  font-family: var(--t-sans); font-style: normal;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--t-mute); font-weight: 700;
  margin-bottom: 8px;
}

/* Dark variant of testC-band — flips text colors for accent moments */
.testC-band.bg-ink {
  background: var(--t-ink);
  border-bottom: 1px solid rgba(251,250,246,0.18);
}
.testC-band.bg-ink .testC-counter { color: var(--t-accent-soft); }
.testC-band.bg-ink .testC-counter .total { color: rgba(251,250,246,0.6); }
.testC-band.bg-ink .testC-content .matter { color: var(--t-accent-soft); }
.testC-band.bg-ink .testC-content .head { color: var(--t-bone); }
.testC-band.bg-ink .testC-content .head em { color: var(--t-accent-soft); }
.testC-band.bg-ink .testC-content .quote { color: rgba(251,250,246,0.78); }
.testC-band.bg-ink .testC-content .quote::first-letter { color: var(--t-accent-soft); }
.testC-band.bg-ink .testC-content .byline { border-color: var(--t-accent-soft); }
.testC-band.bg-ink .testC-content .byline .name { color: var(--t-bone); }
.testC-band.bg-ink .testC-content .byline .where { color: var(--t-accent-soft); }
.testC-band.bg-ink .testC-aside { color: rgba(251,250,246,0.75); border-color: rgba(251,250,246,0.18); }
.testC-band.bg-ink .testC-aside .lab { color: var(--t-accent-soft); }

/* Stats strip for variant C — sits between hearing bands and Avvo */
.testC-stats {
  background: var(--t-bone);
  padding: 80px 48px;
  border-top: 1px solid var(--t-rule);
  border-bottom: 1px solid var(--t-rule);
}
.testC-stats-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px;
  align-items: end;
}
.testC-stat { border-top: 1px solid var(--t-accent); padding-top: 18px; }
.testC-stat .v {
  font-family: var(--t-serif); font-style: italic; font-weight: 400;
  font-size: clamp(56px, 6vw, 88px); line-height: 1;
  letter-spacing: -0.025em; color: var(--t-accent);
}
.testC-stat .l {
  font-family: var(--t-sans);
  font-size: 12px; letter-spacing: 0.20em; text-transform: uppercase;
  color: var(--t-mute-deep); font-weight: 600; margin-top: 12px;
}

/* ===== production overrides =====
   The source CSS expects .hp-nav / .bio-nav to be portaled into a body-level
   fixed #nav-rail (the 1280px artboard-scaling hack from shared.jsx). Since
   the static build uses inline navs instead, the nav has no positioning of
   its own and the hero's stacking context paints over the dropdown menus.
   Make the nav properly sticky and put it on top. */
.hp-nav,
.bio-nav {
  position: sticky;
  top: 0;
  z-index: 50;
}


/* ---- Mega-menu in the global nav (ported from practice-areas/styles.css) -- */
.hp-nav-menu.is-mega {
  min-width: 880px;
  max-width: min(960px, calc(100vw - 64px));
  padding: 18px 32px 12px;
}
.hp-nav-menu.is-mega .mega-link {
  text-transform: none;
  letter-spacing: -0.005em;
}
.hp-nav-menu.is-mega .mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px 24px;
}
.hp-nav-menu.is-mega .mega-col {
  display: flex; flex-direction: column;
  padding: 8px 6px 0;
}
.hp-nav-menu.is-mega .mega-col-label {
  font-family: var(--hp-sans);
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600; color: var(--hp-ink-deep);
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hp-rule-soft);
}
.hp-nav-menu.is-mega .mega-link {
  display: block;
  padding: 8px 6px;
  font-family: var(--hp-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: var(--hp-ink);
  text-decoration: none;
  transition: color 160ms ease, background 160ms ease;
}
.hp-nav-menu.is-mega .mega-link:hover {
  color: var(--steel-deep);
  background: rgba(63, 111, 168, 0.05);
}
.hp-nav-menu.is-mega .mega-link.is-active {
  color: var(--steel-deep);
  font-style: italic;
}
.hp-nav-menu.is-mega .mega-foot {
  margin-top: 10px;
  padding: 14px 0 4px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--hp-rule-soft);
  font-family: var(--hp-sans);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600;
  color: var(--hp-mute-deep);
  text-decoration: none;
}
.hp-nav-menu.is-mega .mega-foot:hover { color: var(--hp-ink); }
.hp-nav-menu.is-mega .mega-foot .arr { font-size: 14px; letter-spacing: 0; }


/* ---- AI Disclosure link in pa-footer (v3) -------------------- */
.pa-footer-row .pa-footer-link {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: rgba(251,250,246,0.55);
  text-decoration: none;
  transition: color 180ms ease;
}
.pa-footer-row .pa-footer-link:hover { color: rgba(251,250,246,0.9); }


/* ---- AI Disclosure link in bio/hpA footers --------------------- */
.bio-footer-row .footer-link,
.hpA-footer-row .footer-link {
  font-size: 12px;
  color: var(--hp-mute-deep, #5B6E89);
  text-decoration: none;
  transition: color 180ms ease;
}
.bio-footer-row .footer-link:hover,
.hpA-footer-row .footer-link:hover { color: var(--hp-ink, #0F2748); }

/* ---- Be-a-Guest CTA (homepage Option C, v3) ----------------------------- */
.pcC-guest-cta {
  display: inline-flex; align-items: center; gap: 14px;
  align-self: flex-start;
  width: max-content;
  margin-top: 28px;
  padding: 16px 26px;
  border: 1px solid rgba(123, 169, 200, 0.5);
  background: rgba(123, 169, 200, 0.06);
  color: #f6f4ef;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.pcC-guest-cta:hover {
  background: #7BA9C8;
  color: #0F2748;
  border-color: #7BA9C8;
}
.pcC-guest-cta .arr {
  width: 22px; height: 1px;
  background: currentColor;
  transition: width 200ms ease;
}
.pcC-guest-cta:hover .arr { width: 32px; }

/* =========================================================================
   MOBILE RESPONSIVE — STEP 1: KILL HORIZONTAL OVERFLOW
   ========================================================================= */

/* Safety net: prevent any element from pushing the document wider than the
   viewport on mobile. Vertical scroll behaves normally. */
html, body { overflow-x: hidden; }

/* The .epx podcast section places .epx-stroke decorations at width:140% with
   absolute positioning; without clipping they bleed past the viewport. */
.epx { overflow: hidden; }

/* =========================================================================
   MOBILE RESPONSIVE — STEP 2: NAV (≤768px hamburger drawer)
   ========================================================================= */

/* Hamburger button — hidden by default (desktop), shown ≤768px. */
.hp-nav-mobile-toggle {
  display: none;
  appearance: none; background: none; border: 0;
  width: 44px; height: 44px;       /* iOS minimum tap target */
  padding: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; color: var(--hp-ink);
  z-index: 110;                     /* above the drawer panel */
}
.hp-nav-mobile-toggle span {
  display: block; width: 22px; height: 2px;
  background: currentColor; border-radius: 1px;
  transform-origin: center;
  transition: transform 220ms ease, opacity 180ms ease;
}
.hp-nav.is-open .hp-nav-mobile-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hp-nav.is-open .hp-nav-mobile-toggle span:nth-child(2) { opacity: 0; }
.hp-nav.is-open .hp-nav-mobile-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Lock body scroll when drawer is open (avoid double-scroll). */
body.is-nav-open { overflow: hidden; }

/* Switch to hamburger drawer up to 1080px — below that the three desktop
   nav tabs + logo + phone+CTA cluster crowd the row and the logo gets
   horizontally squeezed. 1080 is the smallest width that keeps the
   desktop nav readable; tablets and small laptops use the drawer. */
@media (max-width: 1080px) {
  /* The header's backdrop-filter creates a containing block for fixed
     descendants — that traps the drawer inside the 60px header. Drop the
     blur on mobile so the drawer can position against the viewport. */
  .hp-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--hp-bone);
  }

  /* Compact 2-column header: logo left, hamburger right. */
  .hp-nav-row {
    grid-template-columns: auto 1fr;
    padding: 14px 20px;
    gap: 12px;
  }
  .hp-nav-logo { justify-self: start; }
  .hp-nav-logo img { height: 32px; }
  .hp-nav-mobile-toggle { display: flex; justify-self: end; grid-column: 2; }

  /* Hide desktop nav contents from the header bar. */
  .hp-nav-tabs, .hp-nav-end { display: none; }

  /* When drawer is open: full-width panel below the header,
     stacking tabs vertically and showing dropdown contents inline. */
  .hp-nav.is-open .hp-nav-tabs {
    display: flex; flex-direction: column;
    position: fixed;
    top: 60px; left: 0; right: 0;
    max-height: calc(100vh - 60px);
    background: var(--hp-bone);
    border-bottom: 1px solid var(--hp-rule-soft);
    padding: 8px 20px 24px;
    gap: 0;
    z-index: 100;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .hp-nav.is-open .hp-nav-end {
    display: flex; flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--hp-bone);
    border-top: 1px solid var(--hp-rule-soft);
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    gap: 12px;
    z-index: 101;
    align-items: stretch;
    box-shadow: 0 -8px 24px rgba(15, 39, 72, 0.06);
  }
  /* Reserve room for the bottom action bar so tabs panel can scroll past it */
  .hp-nav.is-open .hp-nav-tabs {
    bottom: 0;
    max-height: none;
    padding-bottom: 160px;
  }

  /* Inline the dropdown panels inside the drawer (no hover, no float). */
  .hp-nav.is-open .hp-nav-item.has-dropdown {
    display: block; width: 100%;
  }
  .hp-nav.is-open .hp-nav-trigger {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    padding: 14px 0;
    font-size: 14px; letter-spacing: 0.18em;
    color: var(--hp-ink);
    border-bottom: 1px solid var(--hp-rule-soft);
  }
  .hp-nav.is-open .hp-nav-caret { transform: rotate(180deg); opacity: 0.55; }
  .hp-nav.is-open .hp-nav-menu {
    position: static !important;
    opacity: 1 !important; pointer-events: auto !important;
    transform: none !important;
    background: transparent; border: 0; box-shadow: none;
    padding: 6px 0 14px 12px;
    min-width: 0;
  }
  .hp-nav.is-open .hp-nav-menu::before,
  .hp-nav.is-open .hp-nav-menu::after { display: none; }
  .hp-nav.is-open .hp-nav-menu-item {
    grid-template-columns: 1fr;
    padding: 10px 4px;
  }
  /* Mega panel stacks its columns vertically inside the drawer. */
  .hp-nav.is-open .hp-nav-menu.is-mega { display: block; }
  .hp-nav.is-open .mega-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hp-nav.is-open .mega-col { padding: 0; }
  .hp-nav.is-open .mega-foot { padding: 12px 0 0; }

  /* CTA + phone styled as full-width buttons in drawer footer. */
  .hp-nav.is-open .hp-nav-phone,
  .hp-nav.is-open .hp-nav-cta {
    width: 100%; text-align: center;
    padding: 14px 16px;
  }
}

/* Belt-and-braces: above 768px, keep mega-menu hidden the same way step 1 did
   (covered by the standard hover-show rules below 1080px). The hover-trigger
   rule in the desktop CSS continues to handle desktop behavior unchanged. */

/* =========================================================================
   MOBILE RESPONSIVE — STEP 3: HERO (≤768px stacked layout)
   ========================================================================= */
@media (max-width: 768px) {
  /* Hero is 88vh / min 720px on desktop — that forces text below the fold
     on a phone. Let it size to content. */
  .hpB-hero {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .hpB-hero-grid {
    grid-template-columns: 1fr;
  }
  /* Photo cap on a phone so the heading is visible without scrolling. */
  .hpB-hero-img-side {
    height: 46vh;
    min-height: 280px;
    max-height: 420px;
  }
  .hpB-hero-text-side {
    padding: 36px 24px 48px;
  }
  .hpB-hero h1 {
    font-size: clamp(38px, 10vw, 56px);
    max-width: none;
  }
  .hpB-hero-sub {
    font-size: 17px;
    line-height: 1.55;
  }
  /* The "Matrimonial · Custody · High Conflict" tag chip sits over the photo. */
  .hpB-hero-tag {
    top: 16px; left: 16px;
    padding: 10px 14px;
    font-size: 10px;
  }
  .hpB-hero-tag .num { font-size: 28px; }
}

/* =========================================================================
   MOBILE RESPONSIVE — STEP 4: ABOUT (≤768px single column)
   ========================================================================= */
@media (max-width: 768px) {
  .hpB-about { padding: 64px 20px; }
  .hpB-about-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* Sticky sidebar pinned at top:110 would overlap content on mobile. */
  .hpB-about-side { position: static; top: auto; }
  .hpB-about-side h2 { font-size: clamp(34px, 9vw, 48px); }
  .hpB-about-prose p { font-size: 17px; }
  .hpB-about-prose p.lead { font-size: 21px; }
  /* Numbered points: tighter number column, smaller heading. */
  .hpB-point {
    grid-template-columns: 44px 1fr;
    gap: 16px;
  }
  .hpB-point h3 { font-size: 22px; }
  .hpB-point .n { font-size: 28px; }
}

/* =========================================================================
   MOBILE RESPONSIVE — STEP 5: TESTIMONIALS (≤768px padding trim)
   The carousel is already centered-text; only horizontal padding needs trimming
   so the quote doesn't sit in a narrow column.
   ========================================================================= */
@media (max-width: 768px) {
  .hpB-testimonials { padding: 56px 20px 48px; }
  .hpB-test-mark { font-size: 56px; }
  .hpB-test-quote { font-size: 21px; }
}

/* =========================================================================
   MOBILE RESPONSIVE — STEP 6: PODCAST FEATURED (.pcC, ≤768px stacked)
   ========================================================================= */
@media (max-width: 768px) {
  .pcC {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  /* Cap photo height so it doesn't dominate the screen. */
  .pcC-image {
    height: 260px;
    min-height: 0;
  }
  .pcC-panel {
    padding: 36px 20px 48px;
  }
  /* The vertical brand rail divided image from panel side-by-side;
     stacked, it would collide with the eyebrow. */
  .pcC-rail { display: none; }
  .pcC-panel-inner { max-width: none; gap: 18px; }
  .pcC-title { font-size: clamp(34px, 9vw, 48px); }
  /* Meta block (HOSTED BY / EPISODES / EVERY OTHER WEEK or similar)
     wraps onto two rows on narrow widths. */
  .pcC-meta { flex-wrap: wrap; gap: 20px 32px; }
  .pcC-meta .val { font-size: 18px; }
}

/* =========================================================================
   MOBILE RESPONSIVE — STEP 7: PODCAST EPISODES (.epx, ≤768px)
   Cards swipe horizontally; shrink card width so the next one peeks in.
   ========================================================================= */
@media (max-width: 768px) {
  .epx {
    --epx-card: 84vw;
    --epx-gap: 14px;
    padding: 56px 0 48px;
  }
  /* Nav arrows are awkward on touch; hide and rely on native swipe. */
  .epx-stage {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .epx-nav { display: none; }
  /* Enable touch swipe by making the viewport itself scrollable. */
  .epx-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px 16px;       /* room for first/last card to sit inside */
  }
  .epx-card {
    scroll-snap-align: start;
  }
  .epx-head { margin-bottom: 28px; padding: 0 20px; }
  .epx-eyebrow { font-size: 13px; }
}

/* =========================================================================
   MOBILE RESPONSIVE — STEP 8: ATTORNEYS (3-col → tablet 2-col → phone 1-col)
   ========================================================================= */
@media (max-width: 1080px) {
  .hpB-att-row { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 768px) {
  .hpB-attorneys { padding: 64px 20px; }
  .hpB-attorneys-head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }
  .hpB-att-row { grid-template-columns: 1fr; gap: 28px; }
  .hpB-att .name { font-size: 26px; }
}

/* =========================================================================
   MOBILE RESPONSIVE — STEP 9: NEWSROOM (.nrN3, 3-col grid)
   Rules live in newsroom-variants.css but mobile overrides centralized here.
   ========================================================================= */
@media (max-width: 1080px) {
  .nrN3-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 768px) {
  .nrN3 { padding: 64px 20px !important; }
  .nrN3-grid { grid-template-columns: 1fr; gap: 16px; }
  .nrN3-card {
    min-height: 0;
    padding: 24px 22px;
    gap: 16px;
  }
  .nrN3-title { font-size: clamp(34px, 9vw, 48px); }
  .nrN3-headline { font-size: 18px; }
}

/* =========================================================================
   MOBILE RESPONSIVE — STEP 10: PRACTICE AREAS (.hpB-practice)
   3-col grid → tablet 2-col → phone 1-col. Stack the head section.
   ========================================================================= */
@media (max-width: 1080px) {
  .hpB-pa-grid { grid-template-columns: repeat(2, 1fr); }
  /* The feature card spans 2 rows on desktop; on tablet make it normal. */
  .hpB-pa.feature { grid-row: auto; }
}
@media (max-width: 768px) {
  .hpB-practice { padding: 64px 20px; }
  .hpB-practice-head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }
  .hpB-pa-grid { grid-template-columns: 1fr; gap: 8px; }
  .hpB-pa {
    padding: 28px 22px;
    min-height: 0;
  }
  .hpB-pa h3 { font-size: 24px; }
}

/* =========================================================================
   MOBILE RESPONSIVE — STEP 11: FAQ (.hpB-faq)
   Same 380px-sidebar + prose pattern as About. Tap targets are already
   ~88px tall (28px padding top/bottom + 26px font) — well over the 44px min.
   ========================================================================= */
@media (max-width: 768px) {
  .hpB-faq { padding: 64px 20px; }
  .hpB-faq-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hpB-faq-side h2 { font-size: clamp(34px, 9vw, 48px); }
  .hpB-faq-list summary { font-size: 20px; gap: 16px; }
  .hpB-faq-list details { padding: 20px 0; }
}

/* =========================================================================
   MOBILE RESPONSIVE — STEP 12: CONTACT CTA (.hpB-contact)
   Two-col (1.3fr / 1fr) → stacked on phone.
   ========================================================================= */
@media (max-width: 768px) {
  .hpB-contact { padding: 64px 20px; }
  .hpB-contact-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hpB-contact h2 { font-size: clamp(40px, 10vw, 60px); }
  .hpB-contact .lead { font-size: 19px; }
  .hpB-contact-info { padding: 24px 22px; }
  .hpB-contact-info dd { font-size: 19px; }
}

/* =========================================================================
   MOBILE RESPONSIVE — SECONDARY PAGES
   Attorney bios (.bioC3-*), bio-contact, etc.
   ========================================================================= */

/* --- Attorney bio (Variant C) --- */
@media (max-width: 1080px) {
  /* Article: drop the side rail at tablet width too — prose alone reads better. */
  .bioC3-article {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 56px 32px;
  }
}
@media (max-width: 768px) {
  .bioC3-hero {
    height: auto;
    min-height: 78vh;
  }
  .bioC3-hero-inner { padding: 24px 20px 36px; }
  .bioC3-hero-bottom { gap: 24px; }
  .bioC3-hero-name { font-size: clamp(56px, 16vw, 96px); }

  .bioC3-opener-band { padding: 48px 20px; }
  .bioC3-opener-band .quote { font-size: clamp(24px, 7vw, 32px); }

  .bioC3-article {
    padding: 48px 20px;
    gap: 40px;
  }
  .bioC3-credentials {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .bioC3-side { gap: 40px; }

  .bioC3-closer { padding: 80px 20px; }
  .bioC3-closer blockquote {
    font-size: clamp(26px, 7vw, 36px);
    margin: 36px 0 24px;
  }
  .bioC3-closer .mark { font-size: 80px; }
}

/* --- Shared bio-contact block (used on every attorney page) --- */
@media (max-width: 768px) {
  .bio-contact { padding: 56px 20px; }
  .bio-contact-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }
  .bio-contact h2 { font-size: clamp(38px, 10vw, 56px); }
  .bio-contact .lede { font-size: 18px; }
  .bio-contact-info dd { font-size: 19px; }
}

/* --- Associate bio variant (Hannah, Kathleen) — bioAss-* --- */
@media (max-width: 1080px) {
  .bioAss-article {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 24px 32px 80px;
  }
}
@media (max-width: 768px) {
  .bioAss-article { padding: 24px 20px 56px; gap: 40px; }
  .bioAss-side { gap: 32px; }
}

/* --- FAQ.html (.faq-*) --- */
@media (max-width: 1080px) {
  .faq-body-inner { grid-template-columns: 1fr; gap: 48px; }
  /* The sticky rail TOC would float over the content with a single column.
     The hero tabs already serve the same navigation purpose. */
  .faq-rail { display: none; }
  .faq-hero-tabs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .faq-hero { padding: 56px 20px 40px; }
  .faq-hero-title { font-size: clamp(48px, 13vw, 84px); }
  .faq-hero-lede { font-size: 19px; margin-bottom: 40px; }
  .faq-hero-meta { gap: 14px; margin-bottom: 32px; flex-wrap: wrap; }
  .faq-hero-tabs { grid-template-columns: 1fr; }
  .faq-hero-tabs a { padding: 16px 18px; }
  /* Reset border-right rules that assume 4-col */
  .faq-hero-tabs li { border-right: 0; }

  .faq-body { padding: 48px 20px 64px; }
  .faq-main { gap: 56px; }
  .faq-sec-head {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-bottom: 20px;
  }
  .faq-sec-n { font-size: 56px; }
  .faq-sec-title { font-size: 30px; }
  .faq-q summary { gap: 16px; padding: 18px 0; }

  .faq-close { padding: 64px 20px; }
  .faq-close h2 { font-size: clamp(34px, 9vw, 48px); }
  .faq-close .lede { font-size: 18px; }
  .faq-close .cta-row { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* --- Testimonials.html (.testC-*) --- */
@media (max-width: 1080px) {
  .testC-band-inner {
    grid-template-columns: 56px 1fr;
    gap: 32px;
  }
  /* The 200px aside (matter / outcome labels) moves below the content. */
  .testC-aside { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .testC-hero { padding: 64px 20px 56px; }
  .testC-hero h1 { font-size: clamp(48px, 13vw, 80px); }
  .testC-hero .lede { font-size: 18px; padding-top: 24px; margin-top: 28px; }

  .testC-band { padding: 56px 20px; }
  .testC-band-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .testC-counter { font-size: 36px; }
  .testC-content .head { font-size: clamp(24px, 7vw, 32px); }
  .testC-content .quote { font-size: 17px; }

  .testC-stats { padding: 56px 20px; }
  .testC-stats-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
  }
}

/* =========================================================================
   LEGAL DISCLAIMER — "Prior results do not guarantee a similar outcome."
   Required by NY attorney advertising rules. Appears below every contact
   module and inside every footer row.
   ========================================================================= */

/* Contact-module disclaimer — sits directly under the "Schedule a
   consultation" button (inside the left column of each contact grid).
   Color flips based on the section's background. */
.contact-disclaimer {
  margin: 14px 0 0;
  max-width: 44ch;
  font-family: var(--hp-serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  opacity: 0.78;
}
.hpB-contact .contact-disclaimer { color: rgba(251, 250, 246, 0.78); }
.bio-contact  .contact-disclaimer { color: var(--b-mute-deep, #3B4658); }
.pa-contact   .contact-disclaimer { color: rgba(251, 250, 246, 0.72); }

@media (max-width: 768px) {
  .contact-disclaimer {
    margin-top: 12px;
    font-size: 12.5px;
  }
}

/* Footer-row disclaimer — inline span between AI Disclosure link and the
   areas list. Inherits footer-row's 12px font size + muted color. */
.footer-disclaimer {
  font-style: italic;
  opacity: 0.85;
}