/* =========================
   Design Tokens / Variables
   Core palette: forest, warm gray, off-white, saddle brown, steel
   ========================= */
:root {
  /* Core (approved names in comments) */
  --color-charcoal: #2f4f46; /* Deep Forest Green */
  --color-warm-slate: #6b6b6b; /* Warm Gray */
  --color-soft-cream: #f7f5f2; /* Off White */
  --color-muted-brass: #8a6240; /* Saddle Brown */
  --color-dusty-olive: #5d6d7e; /* Steel Accent */

  /* Semantic (mapped from core) */
  --color-text: var(--color-charcoal);
  --color-text-muted: var(--color-warm-slate);
  --color-bg: #faf9f7;
  --color-bg-alt: var(--color-soft-cream);
  --color-surface: #ffffff;
  --color-surface-alt: #eeece8;
  --color-border: rgba(47, 79, 70, 0.13);
  --color-accent: var(--color-muted-brass);
  --color-accent-strong: #6f4a32;
  --color-accent-dark: #6f4a32;
  --color-secondary-accent: var(--color-dusty-olive);
  --color-focus: #4d5c6c;

  /* Primary CTA: saddle field; white label for contrast */
  --color-btn-text: #ffffff;
  --color-btn-secondary-bg: var(--color-soft-cream);
  --color-btn-secondary-text: var(--color-charcoal);
  --color-btn-secondary-border: rgba(93, 109, 126, 0.35);
  --color-btn-secondary-hover-bg: #e6e4e0;
  --color-btn-secondary-hover-border: rgba(138, 98, 64, 0.48);

  /* In-prose links: forest body; saddle / steel in hover & underline */
  --color-link: var(--color-charcoal);
  --color-link-hover: var(--color-accent-strong);
  --color-link-underline: rgba(138, 98, 64, 0.38);

  /* Subtle section rhythm : steel-tinted, restrained */
  --color-identity-rule: rgba(93, 109, 126, 0.26);

  --shadow-soft: 0 1px 3px rgba(47, 79, 70, 0.06);
  --shadow-card: 0 2px 8px rgba(47, 79, 70, 0.055);
  --shadow-emphasis: 0 2px 10px rgba(47, 79, 70, 0.065);

  /* Footer (deep forest field) */
  --color-footer-bg: var(--color-charcoal);
  --color-footer-text: var(--color-soft-cream);
  --color-footer-strong: #fbfaf8;
  --color-footer-link: #e8e6e2;
  --color-footer-link-hover: #b8c4cf;
  --color-footer-muted: #a8b0ae;
  --color-footer-note: #8d9694;

  /* Image placeholder fill : solid warm neutral (no gradient) */
  --color-placeholder-bg: #e9e7e3;

  --font-base: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 17px;
  --line-base: 1.65;
  --line-tight: 1.28;

  --max-width: 1100px;
  --max-prose: 42rem;
  --radius-sm: 5px;
  --radius-card: 6px;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.35rem;
  --space-5: 1.65rem;
  --space-6: 2.15rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
}

/* ===========
   Base / Reset
   =========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  scroll-padding-top: var(--space-4);
}

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

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--line-base);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

/* ==========
   Typography
   ========== */
h1,
h2,
h3 {
  margin: 0 0 var(--space-3);
  line-height: var(--line-tight);
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.015em;
}

h1 {
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.55rem);
  margin-bottom: var(--space-4);
  font-weight: 600;
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  max-width: min(72ch, var(--max-prose));
  margin: 0 0 var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

.section-head {
  margin-bottom: var(--space-5);
}

/* Slight breathing room after hero into first content section (production polish) */
.hero + .section .wrap > h2:first-child {
  scroll-margin-top: var(--space-4);
}

.section-head h2,
.section-head .section-title {
  margin-bottom: var(--space-2);
}

.section-head > p {
  margin-bottom: 0;
}

.section-head > p + p {
  margin-top: var(--space-4);
}

.section-head + #routing-cards,
.section-head + #practice-cards,
.section-head + #family-service-cards,
.section-head + #other-service-cards {
  margin-top: var(--space-2);
}

/* Homepage: Litigation Reality two-column layout */
.section-litigation-reality {
  background: var(--color-bg);
}

.litigation-reality-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.75fr);
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: center;
}

.litigation-reality-copy.section-head {
  margin-bottom: 0;
}

.litigation-reality-copy h2 {
  max-width: 38rem;
}

.litigation-reality-copy p {
  max-width: min(40rem, 100%);
}

.litigation-reality-callout {
  width: 100%;
  max-width: 23rem;
  justify-self: end;
  margin: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid rgba(93, 109, 126, 0.28);
  border-top: 3px solid rgba(138, 98, 64, 0.62);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.litigation-reality-callout h3 {
  margin: 0 0 var(--space-4);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: var(--line-tight);
  color: var(--color-text);
}

.litigation-reality-callout-items {
  display: grid;
  gap: var(--space-3);
}

.litigation-reality-callout-item {
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.litigation-reality-callout-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.litigation-reality-callout-label {
  margin: 0 0 var(--space-1);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  line-height: 1.3;
}

.litigation-reality-callout-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.56;
  color: var(--color-text-muted);
  max-width: none;
}

.litigation-reality-callout-footer {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  line-height: 1.45;
  max-width: none;
}

@media (max-width: 800px) {
  .litigation-reality-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
  }

  .litigation-reality-callout {
    max-width: none;
    justify-self: stretch;
    padding: var(--space-4);
  }
}

/* Homepage: Court Guide feature section */
.home-court-guide {
  background: var(--color-bg);
}

.home-court-guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: center;
}

.home-court-guide-copy.section-head {
  margin-bottom: 0;
}

.home-court-guide-copy h2 {
  max-width: 40rem;
}

.home-court-guide-copy p {
  max-width: min(42rem, 100%);
}

.home-court-guide-card {
  width: 100%;
  max-width: 25rem;
  justify-self: end;
  margin: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid rgba(93, 109, 126, 0.28);
  border-top: 3px solid rgba(138, 98, 64, 0.62);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.home-court-guide-card h3 {
  margin: 0 0 var(--space-4);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: var(--line-tight);
  color: var(--color-text);
}

.home-court-guide-list {
  display: grid;
  gap: var(--space-3);
}

.home-court-guide-item {
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.home-court-guide-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.home-court-guide-label {
  margin: 0 0 var(--space-1);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  line-height: 1.3;
  max-width: none;
}

.home-court-guide-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.56;
  color: var(--color-text-muted);
  max-width: none;
}

.home-court-guide-footer {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  line-height: 1.45;
  max-width: none;
}

@media (max-width: 800px) {
  .home-court-guide-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
  }

  .home-court-guide-card {
    max-width: none;
    justify-self: stretch;
    padding: var(--space-4);
  }
}

.section-title {
  font-size: clamp(1.35rem, 2.5vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
  line-height: var(--line-tight);
  color: var(--color-text);
}

/* Eyebrow label (homepage / section intro) : brass family, dark enough for small caps on cream */
.eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}

/* In-content links: charcoal + brass underline (full brass fails WCAG on cream for body size) */
main a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

main a:hover {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-link-hover);
}

main .btn {
  text-decoration: none;
}

main .btn:hover {
  text-decoration: none;
}

/* =================
   Layout Utilities
   ================= */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.section {
  padding: var(--space-7) 0;
}

.section.alt {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section--tight-top {
  padding-top: var(--space-6);
}

.split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

/* FAQ readability in split layouts */
.split article > h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: 1.0625rem;
}

.split article > h2 + h3 {
  margin-top: var(--space-3);
}

/* Long-form / utility blocks */
.note-box {
  max-width: min(72ch, var(--max-prose));
  margin: var(--space-5) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-alt);
  border-left: 3px solid var(--color-secondary-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.95rem;
  color: var(--color-text);
}

.note-box p:last-child {
  margin-bottom: 0;
}

.related-block {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

section.related-block {
  margin-top: 0;
  padding-top: var(--space-7);
}

.related-block h2,
.related-block .section-title {
  font-size: 1.2rem;
  margin-bottom: var(--space-3);
}

/* =================
   Header / Nav
   ================= */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) 0 var(--space-3);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  font-size: 1.05rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  padding: var(--space-1) 0;
}

.brand-name {
  display: block;
}

.brand-local {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.2;
}

/* Wordmark lockup: Logo.png bundles text + locality in artwork */
.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.brand .brand-logo {
  display: block;
  height: auto;
  width: auto;
  max-width: min(16rem, 100%);
  max-height: 4.25rem;
}

.brand-mark {
  display: block;
  height: auto;
  max-height: 2.75rem;
  width: auto;
}

.footer-logo {
  display: block;
  width: auto;
  max-width: min(12.5rem, 100%);
  height: auto;
  margin: 0 0 var(--space-2);
  box-sizing: border-box;
  background: var(--color-soft-cream);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(47, 79, 70, 0.12);
}

.inline-firm-logo {
  display: block;
  width: auto;
  max-width: min(16rem, 100%);
  height: auto;
  margin: 0 0 var(--space-2);
}

.top-nav {
  flex: 1;
  min-width: 0;
}

.top-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-1) var(--space-2);
  max-width: 52rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-nav-item {
  margin: 0;
  padding: 0;
}

.top-nav-item > a,
.nav-services-link {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  line-height: 1.3;
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .top-nav-item > a,
  .nav-services-link {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
}

.top-nav-item > a:hover,
.nav-services-link:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.top-nav-item > a.active,
.nav-services-link.active {
  background: rgba(247, 245, 242, 0.78);
  border-color: rgba(47, 79, 70, 0.1);
  color: var(--color-text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--color-dusty-olive);
}

/* Services dropdown */
.nav-services {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.25rem;
}

.nav-services-toggle {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.35rem 0.45rem;
  margin: 0;
  border-radius: var(--radius-sm);
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
}

.nav-services-toggle-icon {
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--color-dusty-olive);
  opacity: 0.85;
  transition: transform 0.15s ease;
}

.nav-services.is-open .nav-services-toggle-icon {
  transform: rotate(180deg);
}

.nav-services-toggle:hover,
.nav-services-toggle:focus-visible {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.nav-submenu-panel {
  width: 100%;
  flex-basis: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-left: 2px solid rgba(93, 109, 126, 0.35);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.nav-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-submenu-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 var(--space-1);
  padding: 0 0.6rem;
}

.nav-submenu-label:first-child {
  margin-top: 0;
}

.nav-submenu-item {
  margin: 0;
  padding: 0;
}

.nav-submenu-item a {
  display: block;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.nav-submenu-item a:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.nav-submenu-item a.active {
  border-color: rgba(47, 79, 70, 0.1);
  background: var(--color-surface);
  box-shadow: inset 2px 0 0 0 var(--color-dusty-olive);
}

@media (min-width: 901px) {
  .nav-submenu-panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    width: min(17.5rem, calc(100vw - 2rem));
    flex-basis: auto;
    margin-top: 0.35rem;
    padding: var(--space-2) 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    z-index: 80;
    display: none;
    border-left: 1px solid var(--color-border);
  }

  .nav-services:hover .nav-submenu-panel,
  .nav-services:focus-within .nav-submenu-panel {
    display: block;
  }

  .nav-services.is-open .nav-submenu-panel {
    display: block;
  }
}

@media (min-width: 901px) and (hover: none) {
  .nav-services:hover .nav-submenu-panel {
    display: none;
  }

  .nav-services:focus-within .nav-submenu-panel {
    display: block;
  }

  .nav-services.is-open .nav-submenu-panel {
    display: block;
  }

  .nav-services-toggle {
    display: inline-flex;
  }
}

@media (min-width: 901px) and (hover: hover) {
  .nav-services-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .nav-services.is-open .nav-submenu-panel {
    display: none;
  }

  .nav-services:hover .nav-submenu-panel,
  .nav-services:focus-within .nav-submenu-panel {
    display: block;
  }
}

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

/* =====
   Hero
   ===== */
.hero {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-8) 0 var(--space-7);
}

.hero-layout {
  display: grid;
  gap: var(--space-6);
  align-items: stretch;
}

@media (min-width: 880px) {
  .hero-layout {
    /* Let the copy column use leftover width; cap the media column so it does not eat ~38% on wide layouts */
    grid-template-columns: minmax(0, 1fr) minmax(16rem, min(36%, 26rem));
    gap: var(--space-6);
    align-items: start;
  }
}

.hero-copy {
  border-left: 3px solid var(--color-secondary-accent);
  padding-left: var(--space-5);
  min-width: 0;
}

.hero-media {
  min-width: 0;
}

/* Services page: larger portrait hero for visual balance with copy column */
@media (min-width: 880px) {
  .hero--services .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 44%);
    gap: var(--space-7);
    align-items: stretch;
  }

  .hero--services .hero-media {
    display: flex;
    align-self: stretch;
  }

  .hero--services .hero-photo-slot--portrait {
    flex: 1;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    aspect-ratio: auto;
    min-height: 100%;
  }

  .hero--services .hero-photo-slot__img {
    object-position: center 18%;
  }
}

@media (max-width: 879px) {
  .hero--services .hero-photo-slot--portrait {
    max-width: none;
    max-height: 20rem;
    width: 100%;
    margin: 0;
  }
}

/* About Rob: landscape office hero */
@media (min-width: 880px) {
  .hero--about .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 48%);
    gap: var(--space-7);
    align-items: stretch;
  }

  .hero--about .hero-media {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  .hero--about .hero-photo-slot {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    aspect-ratio: auto;
    overflow: visible;
  }

  .hero--about .hero-photo-slot__img {
    flex: 1;
    min-height: 14rem;
    width: 100%;
    object-fit: cover;
    object-position: center 42%;
  }

  .hero--about .hero-photo-caption {
    margin-top: var(--space-2);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
    text-align: center;
    flex-shrink: 0;
  }
}

@media (max-width: 879px) {
  .hero--about .hero-photo-slot {
    aspect-ratio: auto;
    max-height: none;
    max-width: none;
    margin: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }

  .hero--about .hero-photo-slot__img {
    aspect-ratio: 16 / 9;
    max-height: 18rem;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .hero--about .hero-photo-caption {
    margin-top: var(--space-2);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
    text-align: center;
  }
}

/* Homepage banner hero: wide office headshot with copy in left negative space */
.hero--banner {
  padding: 0;
  background: var(--color-bg-alt);
}

.hero-banner {
  display: grid;
  position: relative;
}

.hero-banner__media,
.hero-banner__overlay {
  grid-area: 1 / 1;
}

.hero-banner__media {
  margin: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.hero-banner__img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-banner__overlay {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: var(--space-5) var(--space-4);
  pointer-events: none;
}

.hero-copy--banner {
  pointer-events: auto;
  max-width: min(30rem, 40%);
  margin: 0;
  padding: var(--space-4) var(--space-4);
  background: rgba(247, 245, 242, 0.93);
  border-left: 3px solid var(--color-secondary-accent);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.hero-copy--banner h1 {
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem);
  margin-bottom: var(--space-2);
}

.hero-copy--banner .eyebrow {
  margin-bottom: var(--space-2);
}

.hero-copy--banner .button-row {
  margin: var(--space-4) 0 0;
}

.hero-banner .hero-copy--banner .lead {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  line-height: 1.55;
  color: var(--color-text);
  max-width: none;
  font-weight: 500;
  margin-bottom: 0;
}

.hero-banner .hero-copy--banner .proof {
  border-top-color: rgba(47, 79, 70, 0.12);
}

@media (max-width: 879px) {
  .hero-banner {
    display: block;
  }

  .hero-banner__media {
    aspect-ratio: 16 / 9;
    max-height: 14rem;
  }

  .hero-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 82% 22%;
  }

  .hero-banner__overlay {
    padding-top: var(--space-6);
    padding-bottom: 0;
    pointer-events: auto;
  }

  .hero-copy--banner {
    max-width: none;
    background: transparent;
    padding: 0 0 0 var(--space-4);
    border-radius: 0;
    box-shadow: none;
    border-left-width: 2px;
  }

  .hero-copy--banner h1 {
    font-size: clamp(1.65rem, 4vw, 2.35rem);
  }

  .hero-banner .hero-copy--banner .lead {
    font-size: clamp(1.125rem, 1rem + 0.45vw, 1.35rem);
  }
}

/* Court guide banner: image is taller than homepage headshot — crop to same footprint */
@media (min-width: 880px) {
  .hero--court-guide .hero-banner__media {
    aspect-ratio: 1916 / 821;
  }

  .hero--court-guide .hero-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
  }
}

@media (max-width: 879px) {
  .hero--court-guide .hero-banner__img {
    object-position: 78% 35%;
  }
}

/* Contact page: landscape office photo in right column */
@media (min-width: 880px) {
  .hero--contact .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 44%);
    gap: var(--space-7);
    align-items: stretch;
  }

  .hero--contact .hero-media {
    display: flex;
    align-self: stretch;
  }

  .hero--contact .hero-photo-slot {
    flex: 1;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    aspect-ratio: auto;
  }

  .hero--contact .hero-photo-slot__img {
    flex: 1;
    min-height: 14rem;
    width: 100%;
    object-fit: cover;
    object-position: center 38%;
  }
}

@media (max-width: 879px) {
  .hero--contact .hero-photo-slot__img {
    object-position: center 32%;
  }
}

/* Homepage hero: real editorial photo (same footprint as .media-placeholder) */
.hero-photo-slot {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 3;
  width: 100%;
  max-height: 20rem;
  box-shadow: var(--shadow-soft);
}

.hero-photo-slot__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Attorney profile hero: portrait column (matches legacy .media-placeholder--portrait footprint) */
.hero-photo-slot--portrait {
  aspect-ratio: 3 / 4;
  max-height: 22rem;
  max-width: 16rem;
  margin-left: auto;
  margin-right: auto;
}

/* Neutral image slot : documentary photo lives here later (see docs/presentation-layer-notes.md) */
.media-placeholder {
  border: 1px dashed rgba(107, 107, 107, 0.32);
  background: var(--color-placeholder-bg);
  border-radius: var(--radius-card);
  aspect-ratio: 4 / 3;
  width: 100%;
  max-height: 20rem;
  box-shadow: var(--shadow-soft);
}

.media-placeholder--portrait {
  aspect-ratio: 3 / 4;
  max-height: 22rem;
  max-width: 16rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 879px) {
  .media-placeholder {
    max-height: 14rem;
    aspect-ratio: 16 / 9;
  }

  .hero-photo-slot {
    max-height: 14rem;
    aspect-ratio: 16 / 9;
  }

  .hero-photo-slot.hero-photo-slot--portrait {
    aspect-ratio: 3 / 4;
    max-width: 12rem;
    max-height: 16rem;
  }

  .media-placeholder--portrait {
    max-width: 12rem;
    max-height: 16rem;
  }
}

/* Photography frame styles for editorial image slots */
.media-placeholder.documentary-media {
  position: relative;
  overflow: hidden;
}

.media-placeholder.documentary-media::before,
.hero-photo-slot.documentary-media::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-dusty-olive);
  opacity: 0.55;
  z-index: 1;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.editorial-frame.media-placeholder,
.editorial-frame.hero-photo-slot {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--shadow-soft);
}

/* `.local-context-image` : optional hook for downtown / office imagery in CSS */

/* Intake orientation (contact page checklist) */
.intake-checklist {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  max-width: min(72ch, var(--max-prose));
}

.intake-checklist li {
  position: relative;
  margin: 0 0 var(--space-3);
  padding-left: 1.35rem;
}

.intake-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 3px;
  height: 0.65em;
  background: var(--color-secondary-accent);
  opacity: 0.55;
  border-radius: 1px;
}

.intake-checklist li:last-child {
  margin-bottom: 0;
}

/* Subtle section rhythm : optional variant on dense pages */
.section-identity-rule {
  border-top: 1px solid var(--color-identity-rule);
}

.lead {
  max-width: min(40rem, 100%);
  color: var(--color-text-muted);
  font-size: 1.125rem;
  line-height: 1.58;
}

/* Two-column heroes: lead uses full copy column width (no extra “page margins” inside the column) */
.hero-layout .hero-copy .lead {
  font-size: clamp(1.25rem, 1.1rem + 1vw, 1.45rem);
  line-height: 1.65;
  color: var(--color-text);
  max-width: none;
  font-weight: 500;
}

.hero--about .hero-copy .lead {
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.25rem);
  line-height: 1.6;
  max-width: 38rem;
  font-weight: 500;
}

.proof {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  max-width: min(72ch, var(--max-prose));
  line-height: 1.55;
}

.routing-all-services {
  margin-top: var(--space-4);
}

.routing-all-services .btn {
  margin: 0;
}

/* Homepage: route cards get a single restrained emphasis */
.section-routing #routing-cards .card:first-child {
  border-color: var(--color-secondary-accent);
  box-shadow: var(--shadow-emphasis);
}

/* Services page: family litigation cards */
.services-primary-grid .card:first-child {
  border-color: var(--color-secondary-accent);
  box-shadow: var(--shadow-emphasis);
}

.services-forms-cta {
  margin-top: var(--space-2);
}

.services-forms-cta .btn {
  margin: 0;
}

/* In-page “On this page” anchor nav (long-form) */
.page-toc {
  max-width: min(72ch, var(--max-prose));
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-left: 3px solid rgba(93, 109, 126, 0.38);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.page-toc-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.page-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.page-toc a {
  white-space: nowrap;
}

.key-point {
  max-width: min(72ch, var(--max-prose));
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-secondary-accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  font-size: 0.98rem;
}

/* Court guide: local orientation, scan-friendly blocks */
.guide-lead {
  max-width: min(72ch, var(--max-prose));
  margin: 0 0 var(--space-4);
}

.guide-summary {
  max-width: min(52rem, 100%);
  margin: 0;
  padding: var(--space-4) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.guide-disclaimer {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: none;
}

.guide-summary-label {
  margin: 0 0 var(--space-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.guide-checklist {
  margin: 0;
  padding-left: 1.25rem;
  max-width: none;
}

.guide-checklist li {
  margin-bottom: var(--space-2);
  padding-left: var(--space-1);
}

.guide-checklist li:last-child {
  margin-bottom: 0;
}

.guide-checklist--tight li {
  margin-bottom: var(--space-1);
}

.guide-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  max-width: min(52rem, 100%);
}

.guide-compare-heading {
  margin: 0 0 var(--space-3);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
}

.guide-compare-col p {
  max-width: none;
}

.guide-callout {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-muted-brass);
  border-radius: var(--radius-sm);
  max-width: min(52rem, 100%);
}

.guide-callout--accent {
  border-left-color: var(--color-secondary-accent);
  background: var(--color-surface);
}

.guide-callout-title,
.guide-expect-title {
  margin: 0 0 var(--space-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.guide-callout-body,
.guide-expect-body {
  margin: 0;
  max-width: none;
  font-size: 0.98rem;
  line-height: 1.6;
}

.guide-expect {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid rgba(93, 109, 126, 0.28);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  max-width: min(52rem, 100%);
}

.guide-expect-title {
  color: var(--color-accent-strong);
}

.guide-bring-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
  max-width: min(52rem, 100%);
}

.guide-bring-title {
  margin: 0 0 var(--space-3);
  font-size: 1.0625rem;
  font-weight: 600;
}

.guide-bring-col {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.guide-bring-col--muted {
  background: var(--color-surface-alt);
}

.guide-section-cta {
  margin-top: var(--space-4);
}

.guide-mid-cta {
  margin-top: var(--space-6);
  max-width: min(52rem, 100%);
}

.guide-mid-cta-title {
  margin: 0 0 var(--space-2);
  font-size: 1.125rem;
  font-weight: 600;
}

.guide-intro-split {
  margin-top: var(--space-4);
  align-items: start;
}

.cards--local-courts {
  max-width: min(56rem, 100%);
}

/* Court guide: county columns (circuit + district stacked) */
.court-county-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-7);
  max-width: min(60rem, 100%);
  margin-top: var(--space-5);
  align-items: start;
}

.court-county-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.court-county-column--frederick {
  border-top: 4px solid rgba(93, 109, 126, 0.55);
}

.court-county-column--montgomery {
  border-top: 4px solid rgba(138, 98, 64, 0.62);
}

.court-county-column .court-county-label {
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.court-county-column > .eyebrow {
  margin-bottom: 0;
}

.court-building-photo {
  margin: 0 0 var(--space-3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  background: var(--color-placeholder-bg);
}

.court-building-photo img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

.court-building-photo figcaption {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  max-width: none;
}

.court-building-photo figcaption a {
  font-weight: 600;
}

.court-docket-links {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.court-docket-links > p:first-child {
  margin: 0 0 var(--space-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.court-docket-links ul {
  margin: 0;
}

@media (max-width: 800px) {
  .court-county-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.cards--dense .card p:last-of-type {
  margin-bottom: 0;
}

/* Court guide: mediation section rhythm */
.guide-mediation-intro p {
  max-width: min(72ch, var(--max-prose));
}

.guide-mediation-subhead {
  margin: var(--space-6) 0 var(--space-3);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.guide-mediation-day {
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-4) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.guide-mediation-day .eyebrow {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.guide-mediation-day > p {
  max-width: min(72ch, var(--max-prose));
}

.guide-mediation-day .guide-checklist {
  margin-top: var(--space-3);
}

.mediation-card-bundle {
  margin-top: var(--space-5);
}

.mediation-card-bundle + .mediation-card-bundle {
  margin-top: var(--space-6);
}

.mediation-card-bundle > .eyebrow {
  margin-bottom: var(--space-3);
}

.cards--mediation {
  margin-top: var(--space-2);
}

.guide-myths {
  margin: var(--space-6) 0 var(--space-5);
  padding: var(--space-4) var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.guide-myths-title {
  margin: 0 0 var(--space-4);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
}

.guide-myth {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.guide-myth:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.guide-myth-myth {
  margin: 0 0 var(--space-2);
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.98rem;
}

.guide-myth-reality {
  margin: 0;
  padding: 0;
  color: var(--color-text-muted);
  font-size: 0.96875rem;
  line-height: 1.58;
  max-width: min(72ch, var(--max-prose));
}

.guide-mediation-before {
  margin: var(--space-5) 0 0;
}

.home-counties-callout {
  max-width: min(52rem, 100%);
  margin: 0 auto;
}

.home-counties-callout .home-counties-phone {
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-weight: 700;
  color: var(--color-text);
  max-width: none;
}

.home-counties-callout .home-counties-phone a {
  font-weight: inherit;
}

@media (max-width: 720px) {
  .guide-compare-grid,
  .guide-bring-grid {
    grid-template-columns: 1fr;
  }
}

/* About Rob: litigation philosophy (editorial centerpiece, scoped) */
.philosophy-section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.philosophy-layout {
  max-width: min(38rem, 100%);
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-7) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  box-sizing: border-box;
}

.philosophy-header {
  margin-bottom: var(--space-6);
  padding-top: var(--space-2);
  border-top: 2px solid var(--color-identity-rule);
}

.philosophy-header .eyebrow {
  margin-bottom: var(--space-2);
}

.philosophy-section .philosophy-header h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.55rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-charcoal);
}

.philosophy-body {
  border-left: 2px solid rgba(93, 109, 126, 0.38);
  padding-left: var(--space-5);
}

.philosophy-lead {
  margin: 0 0 var(--space-6);
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--color-text);
}

.philosophy-subhead {
  margin: var(--space-6) 0 var(--space-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.philosophy-body > .philosophy-subhead:first-of-type {
  margin-top: var(--space-2);
}

.philosophy-body > p {
  margin: 0 0 var(--space-4);
  line-height: 1.7;
  color: var(--color-text);
}

.philosophy-body > p:last-child {
  margin-bottom: 0;
}

.philosophy-callout {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-secondary-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: var(--shadow-soft);
  box-sizing: border-box;
  max-width: 100%;
}

.philosophy-callout__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  font-weight: 500;
  color: var(--color-charcoal);
}

.philosophy-principle {
  margin-top: var(--space-6);
  margin-bottom: 0;
  font-size: 0.98rem;
  line-height: 1.68;
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .philosophy-layout {
    padding: var(--space-5) var(--space-4);
  }

  .philosophy-body {
    padding-left: var(--space-4);
    border-left-width: 2px;
  }

  .philosophy-lead {
    font-size: 1.02rem;
  }

  .philosophy-callout {
    padding: var(--space-3);
  }
}

.related-block h2,
section.related-block > .wrap > h2 {
  font-size: 1.2rem;
}

.intake-note,
.testimonial-disclosure {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: min(65ch, var(--max-prose));
  margin-top: var(--space-3);
  margin-bottom: 0;
}

.cta-box .intake-note {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.section-final-cta .intake-note {
  margin-top: var(--space-4);
  border-top: 0;
  padding-top: 0;
}

/* =======
   Buttons
   ======= */
.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
}

.button-row--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.button-row--stacked .btn {
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-btn-text);
  text-decoration: none;
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  min-height: 44px;
  min-width: 44px;
  border: 1px solid transparent;
  box-shadow: var(--shadow-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .btn,
  .btn.secondary {
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  }
}

.btn:hover {
  background: var(--color-accent-strong);
  color: var(--color-btn-text);
}

.btn:active {
  box-shadow: inset 0 1px 2px rgba(47, 79, 70, 0.12);
}

.btn.secondary {
  background: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary-text);
  border-color: var(--color-btn-secondary-border);
  box-shadow: none;
}

.btn.secondary:hover {
  background: var(--color-btn-secondary-hover-bg);
  color: var(--color-charcoal);
  border-color: var(--color-btn-secondary-hover-border);
}

.btn.secondary:active {
  box-shadow: inset 0 1px 2px rgba(47, 79, 70, 0.08);
}

/* Final CTA band on homepage */
.section-final-cta {
  padding: var(--space-8) 0;
}

.section-final-cta .cta-box {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-5);
  box-shadow: var(--shadow-card);
}

.section-final-cta .cta-box h2 {
  margin-bottom: var(--space-3);
}

.section-final-cta .cta-box .button-row {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

/* =====
   Cards
   ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.cards--routing {
  margin-top: var(--space-5);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Homepage / card grid: restrained Lucide-style outline icons (decorative only) */
.card-icon {
  display: block;
  margin: 0 0 var(--space-2);
  line-height: 0;
  color: var(--color-secondary-accent);
  opacity: 0.9;
}

.card-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 1.85;
  fill: none;
  vertical-align: top;
}

.card:hover .card-icon {
  opacity: 1;
}

@supports (color: color-mix(in srgb, red, blue)) {
  .card:hover .card-icon {
    color: color-mix(in srgb, var(--color-secondary-accent) 90%, var(--color-muted-brass) 10%);
  }
}

@media (max-width: 520px) {
  .card-icon svg {
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
}

.card:hover {
  border-color: rgba(93, 109, 126, 0.42);
  box-shadow: 0 2px 12px rgba(47, 79, 70, 0.065);
}

@media (prefers-reduced-motion: reduce) {
  .card:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow-card);
  }
}

.card h3,
.card h4,
.card .card-title {
  margin: 0 0 var(--space-2);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: var(--line-tight);
  color: var(--color-text);
}

.card p {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.96875rem;
  line-height: 1.58;
  max-width: none;
}

.card .card-cta {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.card .card-cta .button-row {
  margin-top: 0;
  margin-bottom: 0;
}

.card .card-cta a {
  font-weight: 600;
  font-size: 0.92rem;
}

/* Client forms download grid (consultation page) */
.documents-download-intro {
  max-width: min(72ch, var(--max-prose));
  margin: 0 0 var(--space-5);
}

.documents-download-grid.cards {
  margin-top: var(--space-2);
}

.document-card .document-meta {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.documents-download-note {
  max-width: min(72ch, var(--max-prose));
  margin-top: var(--space-5);
  margin-bottom: 0;
}

/* Credibility list (homepage) */
.cred-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  max-width: min(72ch, var(--max-prose));
}

.cred-list li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  line-height: 1.55;
  color: var(--color-text);
}

.cred-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-secondary-accent);
  opacity: 1;
}

/* =============
   Process Steps
   ============= */
.steps {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.step {
  border-left: 3px solid var(--color-secondary-accent);
  background: var(--color-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-4);
  box-shadow: var(--shadow-soft);
}

.step-title {
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  font-size: 1.02rem;
  line-height: var(--line-tight);
}

.step-body {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.58;
  max-width: 65ch;
  font-size: 0.97rem;
}

/* ====
   FAQ
   ==== */
.faq-list {
  padding-left: 1.15rem;
  margin: var(--space-2) 0 0;
}

.faq-list li {
  margin-bottom: var(--space-2);
  line-height: 1.55;
}

/* FAQ article columns (split layout on inner pages) */
.split article h2 {
  margin-bottom: var(--space-4);
}

.split article > h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: 1.0625rem;
  color: var(--color-text);
}

.split article > h3:first-of-type {
  margin-top: var(--space-2);
}

.split article p {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
}

.wrap > ul:not(.faq-list) {
  max-width: min(72ch, var(--max-prose));
  margin: var(--space-3) 0 var(--space-4);
  padding-left: 1.2rem;
}

.wrap > ul:not(.faq-list) > li {
  margin-bottom: var(--space-3);
  line-height: 1.58;
}

.wrap > ul:not(.faq-list) > li strong {
  color: var(--color-text);
}

/* =============
   Testimonials
   ============= */
.quote-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

blockquote,
blockquote.testimonial {
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-soft);
}

blockquote p {
  margin: 0 0 var(--space-2);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: none;
}

blockquote small,
blockquote .testimonial-author {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-style: normal;
  font-size: 0.875rem;
}

blockquote .testimonial-author::before {
  content: "- ";
}

/* ==========
   CTA Blocks
   ========== */
.cta-box {
  background: var(--color-surface);
  border: 1px solid rgba(93, 109, 126, 0.28);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-4);
  box-shadow: var(--shadow-soft);
}

.cta-box h3 {
  margin-bottom: var(--space-3);
}

/* ======
   Footer
   ====== */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: var(--space-6) 0 var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.site-footer .wrap {
  max-width: var(--max-width);
}

.site-footer strong {
  font-weight: 600;
  color: var(--color-footer-strong);
  font-size: 1rem;
}

.site-footer a {
  color: var(--color-footer-link);
  font-weight: 600;
}

.site-footer a:hover {
  color: var(--color-footer-link-hover);
}

.footer-contact {
  margin: var(--space-3) 0 0;
  font-size: 0.95rem;
}

.footer-contact a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-tagline {
  margin: var(--space-2) 0 var(--space-2);
  color: var(--color-footer-muted);
  font-size: 0.875rem;
}

.footer-intake {
  margin: 0;
  max-width: 40rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-footer-note);
}

/* ======================
   Accessibility / Focus
   ====================== */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.top-nav-item > a:focus-visible,
.nav-services-link:focus-visible,
.nav-submenu-item a:focus-visible,
.nav-services-toggle:focus-visible,
.brand:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.site-footer a:focus-visible {
  outline-color: var(--color-footer-link);
}

/* =======================
   Responsive / Mobile
   ======================= */
@media (min-width: 901px) {
  .header-inner {
    align-items: center;
  }
}

@media (max-width: 900px) {
  .section {
    padding: var(--space-6) 0;
  }

  .hero {
    padding: var(--space-7) 0 var(--space-6);
  }

  .hero--banner {
    padding: 0;
  }

  .cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .header-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .top-nav {
    justify-content: flex-start;
  }

  .top-nav-item > a,
  .nav-services-link {
    padding: 0.55rem 0.65rem;
    font-size: 0.875rem;
  }

  .nav-submenu-item a {
    font-size: 0.875rem;
  }

  .hero-copy {
    padding-left: var(--space-4);
    border-left-width: 2px;
  }

  .hero-layout {
    gap: var(--space-5);
  }

  .section-final-cta .cta-box {
    padding: var(--space-4);
  }

  /* Long-form “On this page”: readable tap targets, no cramped nowrap row */
  .page-toc ul {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .page-toc a {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding: 0 var(--space-3);
  }

  .section .wrap > p {
    line-height: 1.68;
  }

  .split .cta-box {
    margin-top: var(--space-2);
  }

  .button-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .button-row .btn {
    width: 100%;
    text-align: center;
  }
}