/* MIJ Law - Eureka Media rebuild mockup
   Brand: navy #0e2236 + gold #c8a049, accent red #CC2027 (Eureka credit only)
   Type: Source Serif 4 (display) + Inter (body)
*/

/* Self-hosted variable fonts (latin subset). Same-origin woff2 + inline
   @font-face per Eureka Lighthouse recipe (no fonts.googleapis.com requests). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: normal;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #0e2236;
  --navy-2: #16314d;
  --navy-3: #1d3d62;
  --gold: #c8a049;
  --gold-2: #b08a35;
  --gold-soft: #f5edd9;
  --charcoal: #2d2d2d;
  --gray: #6b7280;
  --gray-2: #9ca3af;
  --line: #e5e7eb;
  --light: #f7f7f5;
  --paper: #f1efe8;
  --white: #ffffff;
  --em-red: #cc2027;

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--charcoal);
  line-height: 1.55;
  font-size: 16px;
  background: var(--white);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.serif { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }

/* ============ Top utility bar ============ */
.utility {
  background: var(--navy);
  color: rgba(255,255,255,0.92);
  font-size: 13px;
}
.utility .container {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px; padding-bottom: 8px;
}
.utility .meta { display: flex; gap: 22px; }
.utility .meta span::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  background: var(--gold); border-radius: 50%; margin-right: 8px; vertical-align: middle;
}
.utility .lang { display: flex; gap: 16px; }
.utility .lang a { opacity: 0.85; }
.utility .lang a.active { color: var(--gold); opacity: 1; font-weight: 600; }

/* ============ Header ============ */
.header {
  background: var(--white); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.header .container {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px; padding-bottom: 18px;
}
.brand-mark {
  display: flex; align-items: center; gap: 14px;
}
.brand-monogram {
  height: 46px; width: auto; display: block;
}
.brand-text .firm { font-family: var(--serif); font-size: 17px; color: var(--navy); font-weight: 600; }
.brand-text .sub { font-size: 11px; color: var(--gray); letter-spacing: 1.5px; text-transform: uppercase; }
.nav-main { display: flex; gap: 32px; align-items: center; }
.nav-main a { color: var(--charcoal); font-size: 14px; font-weight: 500; }
.nav-main a:hover { color: var(--navy); }
.nav-main .has-arrow::after {
  content: "▾"; font-size: 9px; color: var(--gray); margin-left: 4px;
}
.nav-actions { display: flex; align-items: stretch; gap: 10px; }

/* Two actions, mirroring the mobile call bar so the site asks for the same
   thing in the same order everywhere. Calling is the higher intent action for
   an injury matter, so it carries the gold. The number was previously not a
   link at all: the whole block pointed at the contact form, so anyone who
   clicked the number got a form instead of a call. */
.nav-call {
  background: var(--gold); color: var(--navy);
  padding: 9px 18px; border-radius: 3px; font-weight: 700;
  display: flex; flex-direction: column; justify-content: center;
  line-height: 1.2;
}
.nav-call:hover { background: var(--gold-2); }
.nav-call .cl {
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700;
}
.nav-call .ph {
  display: block; font-size: 15px; font-weight: 700; margin-top: 1px;
  text-align: justify; text-align-last: justify; white-space: nowrap;
}
.nav-cta {
  border: 1px solid var(--navy); color: var(--navy); background: transparent;
  padding: 9px 18px; border-radius: 3px; font-weight: 700;
  font-size: 14px; letter-spacing: 0.3px;
  display: flex; align-items: center;
}
.nav-cta:hover { background: var(--navy); color: var(--white); }

/* ============ Hero ============ */
.hero {
  background: var(--navy);
  color: var(--white);
  border-bottom: 4px solid var(--gold);
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  align-items: stretch;
  min-height: 560px;
  max-width: 1480px;
  margin: 0 auto;
}
.hero-text {
  padding: 90px 56px 96px 28px;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-photo {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--navy);
}
.hero-photo img {
  display: block;
  width: 100%; height: auto;
  max-height: 100%;
}
.hero-photo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(14,34,54,0.6) 4%, rgba(14,34,54,0) 16%);
  pointer-events: none; z-index: 2;
}
.hero-eyebrow {
  font-size: 12px; color: var(--gold); letter-spacing: 3px; text-transform: uppercase;
  margin-bottom: 18px; font-weight: 600;
}
.hero h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 540px;
}
.hero h1 em { color: var(--gold); font-style: normal; }
.hero p.lede {
  margin-top: 22px; font-size: 17px; opacity: 0.92; line-height: 1.6;
  max-width: 480px;
}
.hero-cta { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  padding: 14px 26px; border-radius: 3px; font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-ghost { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.35); }

/* Doubled class on purpose. A button inside article copy is still a link, so
   `.prose a:hover` (0,2,1) outranked `.btn-primary:hover` (0,2,0) and repainted
   the label the same gold as the button's own hover background: the text
   disappeared on the About page. `.btn.btn-primary:hover` is (0,3,0) and wins.
   Every hover state states its colour explicitly so no ambient link rule can
   take it again. */
.btn.btn-primary:hover { background: var(--gold-2); color: var(--navy); }
.btn.btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: transparent; }

/* ============ Stat strip ============ */
.stats {
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 38px 0;
}
.stats .container {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.stat-cell {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding-left: 14px; border-left: 3px solid var(--gold);
}
.stat-num {
  font-family: var(--serif); font-size: 34px; color: var(--navy); font-weight: 700; letter-spacing: -0.02em;
}
.stat-label {
  font-size: 12px; color: var(--gray); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;
}

/* ============ Generic section ============ */
.section { padding: 84px 0; }
.section-light { background: var(--paper); }

/* White cards need a ground to sit on. These two grids were white on white, so
   the cards read as a flat list rather than as cards. */
.cr-grid-section, .attorney-section { background: var(--paper); }
.section-navy { background: var(--navy); color: var(--white); }
.section-head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  margin-bottom: 44px; max-width: 720px;
}
.section-eyebrow {
  font-size: 11px; color: var(--gold-2); letter-spacing: 3px; text-transform: uppercase;
  font-weight: 700;
}
.section-navy .section-eyebrow { color: var(--gold); }
.section h2 {
  font-family: var(--serif); font-size: clamp(28px, 3.6vw, 42px);
  color: var(--navy); font-weight: 600; line-height: 1.15; letter-spacing: -0.015em;
}
.section-navy h2 { color: var(--white); }
.section h2 em { color: var(--gold-2); font-style: normal; }
.section-navy h2 em { color: var(--gold); }
.section .section-sub {
  font-size: 16px; color: var(--gray); line-height: 1.6; max-width: 620px;
}
.section-navy .section-sub { color: rgba(255,255,255,0.78); }

/* ============ Practice areas grid ============ */
.practice-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.practice-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  padding: 26px 22px; transition: all 0.18s ease; cursor: pointer;
  border-top: 3px solid var(--gold);
}
.practice-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,32,54,0.08); border-top-color: var(--em-red); }
.practice-card .icon {
  width: 40px; height: 40px; background: var(--gold-soft); border-radius: 4px;
  display: grid; place-items: center; color: var(--navy); font-size: 18px; margin-bottom: 16px;
}
.practice-card h3 {
  font-family: var(--serif); font-size: 18px; color: var(--navy); font-weight: 600; margin-bottom: 6px;
}
.practice-card p { font-size: 13px; color: var(--gray); line-height: 1.5; }
.practice-card .more {
  display: inline-block; margin-top: 12px; font-size: 12px; color: var(--gold-2);
  text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700;
}

/* ============ Verdicts strip (homepage teaser) ============ */
.verdicts-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.verdict-card {
  background: var(--white); padding: 32px 28px; border-radius: 6px;
  border: 1px solid var(--line); border-bottom: 3px solid var(--gold);
  position: relative;
}
.section-navy .verdict-card {
  background: var(--navy-2); border-color: var(--navy-3); color: var(--white);
}
.verdict-amount {
  font-family: var(--serif); font-size: 38px; color: var(--navy); font-weight: 700; letter-spacing: -0.02em;
}
.section-navy .verdict-amount { color: var(--gold); }
.verdict-tag {
  display: inline-block; font-size: 11px; color: var(--gold-2);
  text-transform: uppercase; letter-spacing: 1.8px; font-weight: 700; margin-top: 14px; margin-bottom: 6px;
}
.section-navy .verdict-tag { color: var(--gold); }
.verdict-desc { font-size: 14px; color: var(--gray); line-height: 1.55; }
.section-navy .verdict-desc { color: rgba(255,255,255,0.78); }
.verdict-year { position: absolute; top: 20px; right: 20px; font-size: 12px; color: var(--gray-2); }

/* ============ Attorneys grid ============ */
.attorney-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.attorney-card {
  background: var(--white); border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); transition: transform 0.18s ease;
}
.attorney-card:hover { transform: translateY(-3px); }
.attorney-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.attorney-card .body { padding: 16px 18px 22px; border-top: 3px solid var(--gold); }
.attorney-card .body h3 {
  font-family: var(--serif); font-size: 17px; color: var(--navy); font-weight: 600;
}
.attorney-card .body .role {
  font-size: 11px; color: var(--gray); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; margin-top: 4px;
}
.attorney-card .body .langs {
  margin-top: 10px; font-size: 12px; color: var(--gold-2); font-weight: 600;
}

/* ============ Why MIJ (split: photo + 3-stack) ============ */
.why-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.why-photo {
  position: relative; border-radius: 6px; overflow: hidden;
  border-bottom: 4px solid var(--gold);
  box-shadow: 0 24px 56px rgba(0,0,0,0.4);
}
.why-photo img { display: block; width: 100%; height: auto; }
.why-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(8,16,30,0.45) 100%);
}
.why-stack { display: flex; flex-direction: column; gap: 28px; }
.why-card { display: flex; flex-direction: column; gap: 8px; padding-left: 22px; border-left: 3px solid var(--gold); }
.why-num {
  font-family: var(--serif); font-size: 14px; color: var(--gold); font-weight: 700;
  text-transform: uppercase; letter-spacing: 3px;
}
.why-card h3 {
  font-family: var(--serif); font-size: 22px; color: var(--white); font-weight: 600;
}
.why-card p { color: rgba(255,255,255,0.78); font-size: 14px; line-height: 1.6; }

/* ============ The Firm (full team showcase) ============ */
.firm-section {
  background: var(--paper);
  padding: 96px 0 72px;
}
.firm-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
}
.firm-text .section-eyebrow { color: var(--gold-2); }
.firm-text h2 {
  font-family: var(--serif); font-size: clamp(28px, 3.6vw, 42px);
  color: var(--navy); font-weight: 600; line-height: 1.15;
  letter-spacing: -0.015em; margin: 14px 0 22px;
}
.firm-text h2 em { color: var(--gold-2); font-style: normal; }
.firm-text p { color: var(--gray); font-size: 16px; line-height: 1.65; max-width: 540px; }
.firm-text p + p { margin-top: 14px; }
.firm-stats {
  margin-top: 28px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.firm-stats .cell { display: flex; flex-direction: column; gap: 4px; }
.firm-stats .num { font-family: var(--serif); font-size: 28px; color: var(--navy); font-weight: 700; letter-spacing: -0.02em; }
.firm-stats .lbl { font-size: 11px; color: var(--gray); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
.firm-photo {
  position: relative; border-radius: 6px; overflow: hidden;
  border-bottom: 4px solid var(--gold);
  box-shadow: 0 24px 56px rgba(15,32,54,0.18);
}
.firm-photo img { display: block; width: 100%; height: auto; }

/* ============ Case results: team callout strip ============ */
.cr-team-strip {
  background: var(--navy);
  padding: 80px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cr-team-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center;
}
.cr-team-photo { border-radius: 6px; overflow: hidden; border-bottom: 4px solid var(--gold); box-shadow: 0 24px 56px rgba(0,0,0,0.4); }
.cr-team-photo img { display: block; width: 100%; height: auto; }
.cr-team-text .section-eyebrow { color: var(--gold); }
.cr-team-text h2 {
  font-family: var(--serif); font-size: clamp(28px, 3.4vw, 40px);
  color: #fff; font-weight: 600; line-height: 1.18;
  letter-spacing: -0.015em; margin: 14px 0 18px;
}
.cr-team-text h2 em { color: var(--gold); font-style: normal; }
.cr-team-text p { color: rgba(255,255,255,0.82); font-size: 16px; line-height: 1.65; max-width: 540px; }
.cr-team-text p + p { margin-top: 14px; }

/* ============ CTA band ============ */
.cta-band {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color: var(--navy);
  padding: 60px 0;
}
.cta-band .container {
  display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.cta-band h2 {
  font-family: var(--serif); font-size: 28px; line-height: 1.2; max-width: 620px; font-weight: 600; text-wrap: balance;
}
.cta-band .ctas { display: flex; gap: 12px; }
.cta-band .btn-primary { background: var(--navy); color: var(--gold); }
.cta-band .btn.btn-primary:hover { background: var(--charcoal); color: var(--gold); }
.cta-band .btn-ghost { background: transparent; color: var(--navy); border: 1px solid var(--navy); }
.cta-band .btn.btn-ghost:hover { background: var(--navy); color: var(--gold); }

/* ============ Footer ============ */
.footer {
  background: #08182a; color: rgba(255,255,255,0.75); padding: 60px 0 28px;
}
.footer .container {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px;
}
.footer-logo { width: 200px; max-width: 100%; height: auto; display: block; margin-bottom: 14px; }
.footer h4 {
  font-family: var(--serif); color: var(--white); font-size: 15px; font-weight: 600;
  margin-bottom: 14px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.footer a:hover { color: var(--gold); }
.footer .firm-blurb { font-size: 13px; line-height: 1.6; max-width: 320px; }
.footer-bottom {
  margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 11px; color: rgba(255,255,255,0.5);
  display: flex; justify-content: space-between;
}
.footer-bottom .em-credit { color: rgba(255,255,255,0.65); }
.footer-bottom .em-credit b { color: var(--em-red); }

/* ============ Case Results page ============ */
.cr-hero {
  background: var(--navy); color: var(--white); padding: 88px 0 72px; position: relative; overflow: hidden;
}
.cr-hero::before {
  content: ""; position: absolute; top: 0; right: -50px; bottom: 0; width: 50%;
  background: radial-gradient(circle at 70% 50%, rgba(200,160,73,0.18) 0%, transparent 60%);
}
.cr-hero .container { position: relative; }
.cr-hero .eyebrow {
  font-size: 12px; color: var(--gold); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 16px;
  font-weight: 700;
}
.cr-hero .featured {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: end; margin-top: 28px;
}
.cr-hero .featured-amount {
  font-family: var(--serif); font-size: clamp(72px, 10vw, 124px); color: var(--gold);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1;
}
.cr-hero .featured-context {
  font-family: var(--serif); font-size: 22px; color: rgba(255,255,255,0.92); line-height: 1.4;
  border-left: 3px solid var(--gold); padding-left: 18px;
}
.cr-hero h1 {
  font-family: var(--serif); font-size: clamp(34px, 4.5vw, 52px); font-weight: 600;
  letter-spacing: -0.015em; max-width: 720px;
}

.filter-bar {
  background: var(--paper); border-bottom: 1px solid var(--line); padding: 22px 0;
  /* Sticks directly under the sticky header. The offset was hardcoded at 96px
     while the header is 86.6px tall, so page content scrolled through a 9px
     slot between the two bars. --header-h is measured from the header itself,
     so this stays correct when the header changes height or the breakpoint
     does. The 96px fallback only applies before the script runs. */
  position: sticky; top: var(--header-h, 96px); z-index: 30;
}
.filter-bar .container { display: flex; gap: 8px; flex-wrap: wrap; }

/* Once the results have scrolled past, the bar has nothing left to filter, so
   it stops following the reader over the team strip, the disclaimer and the
   footer. Hidden rather than unstuck: switching position mid-scroll reflows the
   page under the reader's thumb. */
.filter-bar { transition: opacity 0.18s ease, transform 0.18s ease; }
.filter-bar.past { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.filter-pill {
  border: 1px solid var(--line); background: var(--white);
  padding: 8px 16px; border-radius: 100px; font-size: 13px; color: var(--gray);
  font-weight: 500; transition: all 0.15s ease;
}
.filter-pill:hover { border-color: var(--gold); color: var(--navy); }
.filter-pill.active { background: var(--navy); color: var(--gold); border-color: var(--navy); font-weight: 600; }

.cases-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.case-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  padding: 28px 26px 26px; transition: all 0.18s ease; position: relative;
  border-top: 3px solid var(--gold);
}
.case-card:hover { box-shadow: 0 12px 28px rgba(15,32,54,0.08); transform: translateY(-2px); }
.case-card .pill-row { display: flex; gap: 6px; margin-bottom: 14px; }
.case-card .pill {
  font-size: 10px; padding: 3px 8px; border-radius: 3px;
  background: var(--gold-soft); color: var(--gold-2); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
}
.case-card .pill.year { background: var(--light); color: var(--gray); }
.case-card .amount {
  font-family: var(--serif); font-size: 38px; color: var(--navy); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1; margin-bottom: 10px;
}
.case-card .descr { font-size: 14px; color: var(--charcoal); line-height: 1.5; }
.case-card .type {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--gray); text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600;
}

.disclaimer {
  background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 36px 0; font-size: 13px; color: var(--gray); line-height: 1.65;
}
.disclaimer .container { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.disclaimer .icon {
  width: 48px; height: 48px; background: var(--gold-soft); color: var(--navy); border-radius: 50%;
  display: grid; place-items: center; font-size: 18px;
}

/* ============ App teaser page ============ */
.teaser-hero {
  min-height: 88vh;
  background: linear-gradient(160deg, var(--navy) 0%, #050d18 100%);
  color: var(--white); position: relative; overflow: hidden;
  display: flex; align-items: center; padding: 80px 0;
}
.teaser-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 80%, rgba(200,160,73,0.18) 0%, transparent 40%),
                    radial-gradient(circle at 80% 20%, rgba(200,160,73,0.10) 0%, transparent 50%);
}
.teaser-hero .container { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.teaser-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700;
  color: var(--gold); padding: 6px 14px; border: 1px solid var(--gold); border-radius: 100px;
  margin-bottom: 26px;
}
.teaser-hero h1 {
  font-family: var(--serif); font-size: clamp(38px, 5.5vw, 68px); line-height: 1.05;
  font-weight: 600; letter-spacing: -0.02em;
}
.teaser-hero h1 em { color: var(--gold); font-style: normal; }
.teaser-hero p.lede {
  margin-top: 24px; font-size: 18px; max-width: 540px; opacity: 0.85; line-height: 1.6;
}
.teaser-mock {
  position: relative;
}
.phone-frame {
  width: 320px; aspect-ratio: 9/19;
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border-radius: 38px; padding: 12px; margin: 0 auto;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
  position: relative;
}
.phone-frame::before {
  content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 28px; background: #050505; border-radius: 14px;
}
.phone-screen {
  background: var(--navy); border-radius: 28px; height: 100%;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.phone-status { padding: 38px 22px 12px; color: var(--gold); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; text-align: center; }
.phone-brand-lockup {
  padding: 44px 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-bottom: 1px solid rgba(200,160,73,0.25); margin: 0 14px 8px;
}
.phone-brand-lockup .mono {
  width: 50px; height: 50px; border-radius: 4px;
  background: linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
  color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: 1px;
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.phone-brand-lockup .name {
  font-family: var(--serif); font-size: 12px; color: rgba(255,255,255,0.94);
  text-transform: uppercase; letter-spacing: 2px; font-weight: 600;
}
.phone-brand-lockup .sub {
  font-size: 8px; color: var(--gold); letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700;
}
.phone-emergency-btn {
  margin: 18px 22px;
  background: var(--em-red); color: var(--white);
  padding: 22px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: 0 0 0 8px rgba(204,32,39,0.18), 0 0 0 16px rgba(204,32,39,0.08);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(204,32,39,0.18), 0 0 0 16px rgba(204,32,39,0.08); }
  50% { box-shadow: 0 0 0 14px rgba(204,32,39,0.22), 0 0 0 28px rgba(204,32,39,0.0); }
}
.phone-emergency-btn .label-big { font-size: 18px; font-weight: 700; letter-spacing: 0.5px; }
.phone-emergency-btn .label-sm { font-size: 10px; opacity: 0.85; letter-spacing: 1.5px; text-transform: uppercase; }
.phone-row {
  margin: 6px 22px 6px; padding: 14px 16px;
  background: rgba(255,255,255,0.06); border-radius: 10px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: rgba(255,255,255,0.85);
}
.phone-row .ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--navy); font-size: 14px; font-weight: 700; }
.phone-footer {
  margin-top: auto; padding: 16px 22px 28px; text-align: center;
  font-size: 10px; color: rgba(255,255,255,0.4); letter-spacing: 2px; text-transform: uppercase;
}
.phone-footer b { color: var(--gold); }

.tease-points {
  padding: 88px 0;
  background: var(--paper);
}
.tease-points .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
.tp { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 3px solid var(--gold); }
.tp .num {
  font-family: var(--serif); font-size: 14px; color: var(--gold-2); font-weight: 700;
  text-transform: uppercase; letter-spacing: 3px;
}
.tp h3 { font-family: var(--serif); color: var(--navy); font-size: 22px; line-height: 1.25; font-weight: 600; }
.tp p { color: var(--gray); font-size: 14px; line-height: 1.6; }

.tease-final {
  padding: 96px 0; background: var(--navy); color: var(--white);
  text-align: center;
}
.tease-final h2 {
  font-family: var(--serif); font-size: clamp(28px, 4vw, 44px); font-weight: 600;
  letter-spacing: -0.015em; max-width: 720px; margin: 0 auto 18px;
}
.tease-final h2 em { color: var(--gold); font-style: normal; }
.tease-final p { color: rgba(255,255,255,0.72); max-width: 580px; margin: 0 auto 28px; font-size: 16px; }
.tease-final .patent-badge {
  display: inline-block; margin-top: 22px;
  font-size: 11px; padding: 8px 16px; border: 1px solid var(--gold);
  color: var(--gold); border-radius: 3px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
}

/* Util */
.eyebrow-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--gold-2); letter-spacing: 3px; text-transform: uppercase; font-weight: 700;
  margin-bottom: 8px;
}
.eyebrow-row::before {
  content: ""; width: 28px; height: 2px; background: var(--gold);
}

/* Responsive */
/* Between the mobile breakpoint and roughly 1280px the nav and the two header
   actions collide. Keep the call, which is the higher intent action, and drop
   the outlined form button: Contact in the nav still reaches the same page. */
@media (max-width: 1279px) {
  .nav-main { gap: 22px; }
  .nav-cta { display: none; }
  .nav-call { padding: 8px 14px; }
}
@media (max-width: 980px) {
  .practice-grid, .verdicts-strip, .why-grid, .cases-grid { grid-template-columns: repeat(2, 1fr); }
  .attorney-grid { grid-template-columns: repeat(3, 1fr); }
  .stats .container { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .footer .container { grid-template-columns: repeat(2, 1fr); }
  .hero::before { width: 40%; opacity: 0.35; }
  .nav-main { display: none; }
  .teaser-hero .container { grid-template-columns: 1fr; }
  .cr-hero .featured { grid-template-columns: 1fr; gap: 24px; }
  .filter-bar { position: static; }
}
@media (max-width: 600px) {
  .practice-grid, .verdicts-strip, .why-grid, .cases-grid, .attorney-grid { grid-template-columns: 1fr; }
  .footer .container { grid-template-columns: 1fr; }
  .stats .container { grid-template-columns: 1fr; }
}

/* ===================================================================
   Subpage component library (practice pages, bios, about, contact)
   =================================================================== */

/* ------ Header dropdown (Practice Areas) ------ */
.nav-item { position: relative; }
.nav-drop {
  position: absolute; top: calc(100% + 14px); left: -18px;
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  border-top: 3px solid var(--gold);
  box-shadow: 0 16px 40px rgba(15,32,54,0.14);
  padding: 10px; min-width: 540px;
  display: none; grid-template-columns: 1fr 1fr; gap: 2px 18px;
  z-index: 60;
}
/* The menu is offset 14px below the trigger, and that gap was dead space: the
   pointer left :hover on the way down and the menu closed before it could be
   reached. This bridges the gap with an invisible strip that belongs to the
   menu itself, so hover is never interrupted. */
.nav-drop::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { display: grid; }
.nav-item:hover > a.has-arrow::after { color: var(--gold-2); }
.nav-drop a {
  display: block; padding: 9px 12px; border-radius: 4px;
  font-size: 13.5px; color: var(--charcoal); font-weight: 500;
}
.nav-drop a:hover { background: var(--gold-soft); color: var(--navy); }
.nav-drop .drop-all {
  grid-column: 1 / -1; margin-top: 6px; padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--gold-2); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 1.5px;
}

/* ------ Mobile nav ------ */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px; padding: 10px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--navy); transition: all 0.2s ease; }
.mobile-nav {
  display: none; background: var(--white); border-bottom: 1px solid var(--line);
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block; padding: 14px 28px; font-size: 15px; font-weight: 500;
  color: var(--charcoal); border-top: 1px solid var(--line);
}
.mobile-nav a.sub { padding-left: 46px; font-size: 14px; color: var(--gray); }
.mobile-nav a:active, .mobile-nav a:hover { background: var(--paper); color: var(--navy); }
.mobile-nav .group-label {
  padding: 14px 28px 4px; font-size: 11px; color: var(--gold-2);
  text-transform: uppercase; letter-spacing: 2px; font-weight: 700;
  border-top: 1px solid var(--line);
}
@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .nav-cta .ph { display: none; }
}

/* ------ Sticky mobile call bar ------ */
.callbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--navy); border-top: 2px solid var(--gold);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  grid-template-columns: 1fr 1fr; gap: 10px;
}
.callbar a {
  text-align: center; padding: 12px 10px; border-radius: 4px;
  font-weight: 700; font-size: 14px;
}
.callbar .call { background: var(--gold); color: var(--navy); }
.callbar .form { border: 1px solid rgba(255,255,255,0.4); color: var(--white); }
@media (max-width: 768px) {
  .callbar { display: grid; }
  body { padding-bottom: 64px; }
}

/* ------ Breadcrumbs ------ */
.crumbs {
  background: var(--paper); border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--gray);
}
.crumbs .container { padding-top: 12px; padding-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--gray); }
.crumbs a:hover { color: var(--navy); }
.crumbs .sep { color: var(--gray-2); }
.crumbs .here { color: var(--navy); font-weight: 600; }

/* ------ Page hero (subpages) ------ */
.page-hero {
  background: var(--navy); color: var(--white);
  border-bottom: 4px solid var(--gold);
  padding: 64px 0 56px; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; top: 0; right: -60px; bottom: 0; width: 45%;
  background: radial-gradient(circle at 70% 40%, rgba(200,160,73,0.16) 0%, transparent 60%);
}
.page-hero .container { position: relative; }
.page-hero .hero-eyebrow { margin-bottom: 14px; }
.page-hero h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.1;
  letter-spacing: -0.015em; max-width: 760px;
}
.page-hero h1 em { color: var(--gold); font-style: normal; }
.page-hero .lede {
  margin-top: 18px; font-size: 17px; opacity: 0.9; line-height: 1.6; max-width: 640px;
}
.page-hero .hero-cta { margin-top: 28px; }

/* ------ Article layout: prose + sticky sidebar ------ */
.article-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px;
  padding: 64px 0 84px;
}
.prose { max-width: 720px; }
.prose h2 {
  font-family: var(--serif); font-size: 28px; color: var(--navy); font-weight: 600;
  line-height: 1.2; letter-spacing: -0.01em; margin: 40px 0 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--serif); font-size: 20px; color: var(--navy); font-weight: 600;
  margin: 28px 0 10px;
}
.prose p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; color: var(--charcoal); }
.prose ul, .prose ol { margin: 0 0 18px 22px; display: flex; flex-direction: column; gap: 8px; }
.prose li { font-size: 15.5px; line-height: 1.6; }
.prose li::marker { color: var(--gold-2); font-weight: 700; }
.prose a { color: var(--navy-3); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.prose a:hover { color: var(--gold-2); }
.prose .lead-in {
  font-size: 18px; line-height: 1.65; color: var(--navy-2);
  padding-left: 18px; border-left: 3px solid var(--gold); margin-bottom: 24px;
}
.prose blockquote {
  margin: 24px 0; padding: 20px 24px; background: var(--paper);
  border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0;
  font-family: var(--serif); font-size: 17px; color: var(--navy-2);
}
.prose .photo {
  margin: 28px 0; border-radius: 6px; overflow: hidden;
  border-bottom: 3px solid var(--gold);
}

/* ------ Sidebar ------ */
.sidebar { display: flex; flex-direction: column; gap: 22px; }
.sidebar-sticky { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 22px; }
.side-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  border-top: 3px solid var(--gold); padding: 26px 24px;
}
.side-card.navy { background: var(--navy); border-color: var(--navy); color: var(--white); }
.side-card h3 {
  font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--navy);
  margin-bottom: 8px; line-height: 1.25;
}
.side-card.navy h3 { color: var(--white); }
.side-card p { font-size: 13.5px; color: var(--gray); line-height: 1.55; margin-bottom: 14px; }
.side-card.navy p { color: rgba(255,255,255,0.8); }
.side-card .btn { width: 100%; justify-content: center; }
.side-card .side-phone {
  display: block; text-align: center; margin-top: 10px;
  font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--navy);
}
.side-card.navy .side-phone { color: var(--gold); }
.side-card ul { list-style: none; display: flex; flex-direction: column; gap: 0; }
.side-card ul a {
  display: block; padding: 10px 2px; font-size: 14px; color: var(--charcoal);
  border-top: 1px solid var(--line);
}
.side-card ul li:first-child a { border-top: 0; }
.side-card ul a:hover { color: var(--gold-2); }
.side-card ul a.here { color: var(--gold-2); font-weight: 700; }
.side-checklist { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.side-checklist li {
  font-size: 13.5px; line-height: 1.5; color: var(--charcoal);
  padding-left: 24px; position: relative;
}
.side-card.navy .side-checklist li { color: rgba(255,255,255,0.85); }
.side-checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--gold-2); font-weight: 700;
}

/* ------ FAQ accordion (native details) ------ */
.faq-section { background: var(--paper); border-top: 1px solid var(--line); padding: 72px 0; }
.faq-list { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.faq-list details {
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  overflow: hidden;
}
.faq-list details[open] { border-color: var(--gold); }
.faq-list summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; padding: 18px 22px;
  font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--navy);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--gold-2); font-size: 22px; font-weight: 400; flex-shrink: 0; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list .faq-body { padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: var(--gray); }

/* ------ Mid-article CTA ------ */
.inline-cta {
  margin: 36px 0; padding: 26px 28px; border-radius: 6px;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.inline-cta .txt { font-family: var(--serif); font-size: 19px; font-weight: 600; max-width: 420px; line-height: 1.35; }
.inline-cta .txt em { color: var(--gold); font-style: normal; }

/* ------ Attorney bio page ------ */
.bio-hero {
  background: var(--navy); color: var(--white);
  border-bottom: 4px solid var(--gold); padding: 64px 0;
}
.bio-hero .container { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
.bio-portrait {
  border-radius: 6px; overflow: hidden; border-bottom: 4px solid var(--gold);
  box-shadow: 0 24px 56px rgba(0,0,0,0.4);
}
.bio-portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.bio-hero .role-line {
  font-size: 12px; color: var(--gold); letter-spacing: 3px; text-transform: uppercase;
  font-weight: 700; margin-bottom: 12px;
}
.bio-hero h1 {
  font-family: var(--serif); font-size: clamp(32px, 4vw, 48px); font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.08;
}
.bio-hero .langs { margin-top: 14px; color: var(--gold); font-weight: 600; font-size: 14px; }
.bio-hero .lede { margin-top: 18px; font-size: 16.5px; opacity: 0.9; line-height: 1.65; max-width: 560px; }
.bio-facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.fact-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  border-top: 3px solid var(--gold); padding: 24px 22px;
}
.fact-card h3 {
  font-family: var(--serif); color: var(--navy); font-weight: 600;
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; font-size: 13px;
}
.fact-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.fact-card li { font-size: 14px; line-height: 1.5; color: var(--charcoal); padding-left: 18px; position: relative; }
.fact-card li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
}

/* ------ Contact / intake form ------ */
.contact-wrap {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px;
  /* keep the .container side gutter (28px); a "72px 0 84px" shorthand here zeroed
     left/right and slammed the form to the page edges */
  padding: 72px 28px 84px;
}
.intake-form { display: flex; flex-direction: column; gap: 16px; }
.intake-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.intake-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--navy);
  text-transform: uppercase; letter-spacing: 1.2px;
}
.intake-form input, .intake-form select, .intake-form textarea {
  font: inherit; font-size: 15px; color: var(--charcoal);
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--white); width: 100%;
}
.intake-form input:focus, .intake-form select:focus, .intake-form textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold);
}
.intake-form textarea { min-height: 130px; resize: vertical; }
.intake-form .consent { font-size: 12px; color: var(--gray); line-height: 1.55; text-transform: none; letter-spacing: 0; font-weight: 400; flex-direction: row; gap: 10px; align-items: flex-start; }
.intake-form .consent input { width: auto; margin-top: 2px; }
.intake-form button {
  background: var(--gold); color: var(--navy); font-weight: 700; font-size: 15px;
  padding: 15px 26px; border-radius: 4px; letter-spacing: 0.3px;
}
.intake-form button:hover { background: var(--gold-2); }
.intake-form .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-note { font-size: 12px; color: var(--gray); line-height: 1.6; }
.form-status { font-size: 14px; font-weight: 600; padding: 12px 14px; border-radius: 4px; display: none; }
.form-status.ok { display: block; background: #eef7ee; color: #1b6b2f; border: 1px solid #bfe3c6; }
.form-status.err { display: block; background: #fdf0f0; color: #a02020; border: 1px solid #efc7c7; }

/* ------ Office cards ------ */
.office-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  border-top: 3px solid var(--gold); padding: 28px 26px; margin-bottom: 20px;
}
.office-card h3 { font-family: var(--serif); font-size: 20px; color: var(--navy); font-weight: 600; margin-bottom: 6px; }
.office-card .tag {
  font-size: 11px; color: var(--gold-2); text-transform: uppercase; letter-spacing: 1.8px;
  font-weight: 700; margin-bottom: 12px;
}
.office-card p { font-size: 14.5px; color: var(--gray); line-height: 1.6; margin-bottom: 6px; }
.office-card .ph-line {
  display: block; margin-top: 12px;
  font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--navy);
}
.office-card .ph-line:hover { color: var(--gold-2); }

/* ------ Practice hub: link tiles ------ */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hub-tile {
  display: block; background: var(--white); border: 1px solid var(--line);
  border-radius: 6px; border-top: 3px solid var(--gold); padding: 24px 22px;
  transition: all 0.18s ease;
}
.hub-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,32,54,0.08); }
.hub-tile h3 { font-family: var(--serif); font-size: 18px; color: var(--navy); font-weight: 600; margin-bottom: 6px; }
.hub-tile p { font-size: 13.5px; color: var(--gray); line-height: 1.5; }
.hub-tile .more {
  display: inline-block; margin-top: 12px; font-size: 11.5px; color: var(--gold-2);
  text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700;
}

/* ------ Results teaser row (practice pages) ------ */
.results-teaser {
  background: var(--navy); border-radius: 6px; padding: 30px 28px; margin: 36px 0;
  color: var(--white);
}
.results-teaser .row { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 18px; }
.results-teaser .amt { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--gold); letter-spacing: -0.02em; }
.results-teaser .lbl { font-size: 11px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; margin-top: 4px; }
.results-teaser .rt-head { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.results-teaser .rt-note { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 14px; }

/* ------ Subpage responsive ------ */
@media (max-width: 980px) {
  .article-wrap { grid-template-columns: 1fr; gap: 40px; }
  .sidebar-sticky { position: static; }
  .contact-wrap { grid-template-columns: 1fr; gap: 44px; }
  .bio-hero .container { grid-template-columns: 1fr; gap: 32px; }
  .bio-portrait { max-width: 320px; }
  .bio-facts { grid-template-columns: 1fr; }
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hub-grid { grid-template-columns: 1fr; }
  .intake-form .row2 { grid-template-columns: 1fr; }
  .inline-cta { padding: 22px; }
  .page-hero { padding: 48px 0 44px; }
}

/* ------ Small-viewport header fit ------ */
@media (max-width: 600px) {
  .utility .meta span:nth-child(1), .utility .meta span:nth-child(2) { display: none; }
  .header .container { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .brand-mark { gap: 10px; }
  .brand-monogram { height: 36px; width: auto; }
  .brand-text .firm { font-size: 13px; }
  .brand-text .sub { display: none; }
  /* The fixed call bar already offers both actions on small screens, so the
     header does not repeat them. Keeping the call button here made the number
     wrap onto two lines and crowd the logo. */
  .nav-actions { display: none; }
  .nav-toggle { padding: 8px 4px; margin-left: auto; }
}

/* ------ Responsive gaps in the original mockup (hero + split grids) ------ */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-text { padding: 56px 28px 48px; }
  .hero-photo { max-height: 380px; }
  .hero-photo img { width: 100%; height: 100%; object-fit: cover; }
  .hero-photo::before { display: none; }
  .why-split, .firm-grid, .cr-team-grid { grid-template-columns: 1fr; gap: 36px; }
  .tease-points .grid { grid-template-columns: 1fr; }
}