/*
Theme Name: Wade & Nysather
Description: Custom Corporate Trust theme for Wade & Nysather AZ Accident Attorneys. Built by Sonic.
Author: Sonic
Version: 1.0.0
Text Domain: wade-nysather
*/

/* ============================================
   DESIGN TOKENS — locked from design-dna.json + STYLE-GUIDE.md
   ============================================ */
:root {
  --color-bg: #ffffff;
  --color-bg-alt: #F7F8FA;
  --color-ink: #0C1B36;
  --color-primary: #162542;
  --color-accent: #495978;
  --color-cta: #B68C5A;
  --color-cta-hover: #a67c4a;
  --color-body: #3A4150;
  --color-muted: #8A93A6;
  --color-success: #2F855A;
  --color-danger: #B3261E;
  --color-border: #E4E7EC;

  --font-display: 'Frank Ruhl Libre', serif;
  --font-body: 'Karla', sans-serif;

  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(12, 27, 54, 0.06);
  --shadow-md: 0 4px 16px rgba(12, 27, 54, 0.08);
  --shadow-lg: 0 12px 32px rgba(12, 27, 54, 0.12);

  --container-max: 1200px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* ============================================
   RESET + BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--color-body);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
}
img, video, iframe, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
h1 { font-weight: 900; }
h1 { font-size: clamp(2.1rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

/* ============================================
   RESPONSIVE FOUNDATION — built once, reused everywhere
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 5vw, 48px);
}

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 28px; }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: 24px; }

@media (min-width: 640px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.section { padding-block: clamp(48px, 8vw, 96px); }
/* A thin divider between any two stacked .section elements — without this,
   consecutive sections sharing the same background (gray-to-gray, or even
   white-to-white) have zero visible boundary, so the page reads as one
   undifferentiated block instead of distinct sections. Skipped after the hero
   (not a .section) and skipped before cta-band, which already reads as its
   own distinct block via its own background treatment. */
.section + .section:not(.cta-band) { border-top: 1px solid var(--color-border); }
.section-alt { background: var(--color-bg-alt); }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary {
  background: var(--color-cta);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-cta-hover); }
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--color-bg);
  color: var(--color-bg);
}
.btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-primary);
}
.btn-ghost:hover { background: #fff; border-color: var(--color-primary); }
.btn-block { width: 100%; }

/* sonic-motion CTA hover class — subtle scale, applied via JS-added class for consistency with reduced-motion handling */
.sonic-cta-hover:hover { transform: translateY(-2px); }

/* ============================================
   HEADER
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-ink);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  /* The base .container caps at max-width:1200px and centers — great for readable content
     sections, but on a wide monitor that leaves ~300-400px of true empty margin outside the
     box on EACH side, pushing the logo/nav far from the actual screen edge. A header bar
     should use most of the viewport width instead. */
  max-width: 1800px;
  padding-inline: clamp(16px, 2.5vw, 40px);
  gap: 24px;
}
.site-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.site-logo span { color: var(--color-cta); }
.site-logo-img {
  max-height: 52px;
  max-width: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Desktop header: three equal columns — logo | nav (2-line, centered) | phone
   + CTA + search, stacked and right-aligned. Each column claims roughly a
   third of the header width so the whole bar reads as one balanced unit. */
.main-nav, .header-utility { display: none; }
@media (min-width: 1024px) {
  .site-header-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding-block: 12px;
    gap: 32px;
  }
  .site-logo { justify-self: start; }
  /* Right column (phone/CTA row + search row) is the tallest thing in the
     header — the "See If You / Have A Case" button wrapping to 2 lines
     grew that row further, banking more headroom for the logo without
     making the header bar itself any taller. */
  .site-logo-img { max-height: 114px; max-width: 420px; }
  /* Left-anchored to match the logo and utility columns — centering the nav
     within its own column made the gaps between the 3 sections look uneven
     since each column was aligning its content differently. */
  .main-nav { display: block; justify-self: start; min-width: 0; }
  /* Grid (not flex) so the search row's width is forced to exactly match
     the phone/CTA/Español row's natural width — a single max-content
     column sizes to its widest child and stretches every row to match,
     instead of guessing a fixed px value for the search box. */
  .header-utility {
    display: grid;
    grid-template-columns: max-content;
    justify-content: end;
    gap: 10px;
    justify-self: end;
    width: 100%;
  }
  .mobile-search-form { display: none; }
}

.header-stack-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.header-lang-callout {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
  cursor: default;
}
.header-lang-callout svg { color: var(--color-cta); flex-shrink: 0; }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.header-search-form {
  position: relative;
  width: 100%;
  max-width: none;
}
.header-search-form .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.55);
  pointer-events: none;
}
.header-search-form input[type="search"] {
  width: 100%;
  padding: 13px 18px 13px 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.92rem;
  -webkit-appearance: none;
  appearance: none;
}
.header-search-form input[type="search"]::-webkit-search-decoration,
.header-search-form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.header-search-form input[type="search"]::placeholder { color: rgba(255,255,255,0.5); }
.header-search-form input[type="search"]:focus { outline: none; border-color: var(--color-cta); }
.header-search-form button {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
}
.mobile-search-form { max-width: none; margin-bottom: 14px; }

.search-live-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 80;
}
.search-live-result {
  display: block;
  padding: 12px 16px;
  color: var(--color-ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  border-bottom: 1px solid var(--color-border);
}
.search-live-result:last-child { border-bottom: none; }
.search-live-result:hover { background: var(--color-bg-alt); color: var(--color-cta); }
.search-live-status {
  padding: 12px 16px;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.header-search-form--light .search-icon { color: var(--color-muted); }
.header-search-form--light input[type="search"] {
  border-color: var(--color-border);
  background: var(--color-bg);
  color: var(--color-ink);
}
.header-search-form--light input[type="search"]::placeholder { color: var(--color-muted); }

/* Nav items spread over 2 lines, centered in the middle column. Flexbox (not
   a fixed-column grid) so the gap between labels is always the same value —
   a grid's column width matches its widest cell, which stretched the visual
   space around short labels like "FAQ" next to long ones in another row. */
.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 10px;
  column-gap: 22px;
  max-width: 560px;
  white-space: nowrap;
}
.main-nav a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.85);
}
.main-nav a:hover { color: var(--color-cta); }

/* Desktop dropdown — "Our Team" nests under "About Us", opens on hover/focus */
.main-nav li { position: relative; }
.main-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  max-width: none;
  background: var(--color-primary);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 8px;
  gap: 0;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  box-shadow: var(--shadow-md);
  z-index: 60;
}
.main-nav li.menu-item-has-children:hover .sub-menu,
.main-nav li.menu-item-has-children:focus-within .sub-menu {
  display: flex;
}
.main-nav .sub-menu a { display: block; padding: 8px 10px; letter-spacing: 0.6px; }
.main-nav .sub-menu a:hover { color: var(--color-cta); }
.main-nav li.menu-item-has-children > a::after {
  content: "▾";
  display: inline-block;
  margin-left: 6px;
  font-size: 1.1em;
}

/* ============================================
   MOBILE NAV — hamburger toggle + slide-down panel
   ============================================ */
.mobile-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  color: #fff;
  flex-shrink: 0;
}
.mobile-nav-toggle svg { width: 24px; height: 24px; }
.mobile-nav-toggle .icon-close { display: none; }
.mobile-nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.mobile-nav-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (min-width: 1024px) { .mobile-nav-toggle { display: none; } }

.mobile-nav-panel {
  max-height: 0;
  overflow: hidden;
  background: var(--color-ink);
  border-top: 1px solid rgba(255,255,255,0.1);
  transition: max-height 0.25s ease;
}
.mobile-nav-panel.is-open { max-height: 70vh; overflow-y: auto; }
.mobile-nav-panel nav { padding: 8px clamp(12px, 4vw, 28px) 20px; }
.mobile-nav-panel ul { display: flex; flex-direction: column; }
.mobile-nav-panel a {
  display: block;
  padding: 14px 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-nav-panel a:hover { color: var(--color-cta); }
.mobile-nav-panel .sub-menu { padding-left: 18px; }
.mobile-nav-panel .sub-menu a { font-size: 0.9rem; font-weight: 600; opacity: 0.85; }
@media (min-width: 1024px) { .mobile-nav-panel { display: none; } }

.header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 800;
  color: #fff;
  font-size: 1rem;
  white-space: nowrap;
}
.header-phone-icon { width: 20px; height: 20px; max-width: 20px; max-height: 20px; flex-shrink: 0; }
.header-phone small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.header-stack-top .btn { padding: 10px 18px; font-size: 0.8rem; }

/* ============================================
   HERO — full-bleed banner photo, text panel over the clear (non-face) area
   ============================================ */
.hero {
  background: var(--color-ink);
  color: #fff;
  position: relative;
}

/* Mobile-first: photo as a short top band, content below on solid navy — simplest, safest at narrow widths.
   aspect-ratio (not min-height) keeps the crop fraction CONSTANT across all viewport widths — a fixed
   min-height let the visible fraction drift with viewport, which is what made the photo read "too tall"
   / show too much of the body. At 2.7:1 against this 1.579:1 photo, ~58% of image height is visible —
   head-to-chest, cropped well before the belt/waist line, no legs, matching the old site's shorter crop. */
.hero-photo-band {
  position: relative;
  width: 100%;
  aspect-ratio: 2.7 / 1;
  overflow: hidden;
}
.hero-photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Higher vertical % shifts the crop window DOWN — showing less of the empty sky at
     the top of the source photo, centering more on faces/heads instead. Kept moderate
     (not higher) so it trims sky without cropping into hair/foreheads. */
  object-position: center 22%;
}
.hero .container {
  position: relative;
  z-index: 2;
  padding-block: clamp(28px, 6vw, 48px);
}
.hero-content { max-width: 46ch; }

@media (min-width: 1024px) {
  /* Desktop: same short aspect-ratio band, but full-bleed behind the hero and the content
     panel sits over the clear skyline area on the right with a gradient scrim. */
  .hero { aspect-ratio: 2.4 / 1; max-height: 660px; min-height: 560px; display: flex; align-items: center; }
  /* .hero--flex: for hero content taller than the standard 660px allows (e.g. a longer
     headline plus a stacked trustline). The outer box drops its height cap so content
     never clips or overlaps what follows — but the PHOTO itself stays pinned to the same
     660px cap as every other hero (see .hero--flex .hero-photo-band / ::after below), so
     the image reads the same height everywhere. Any extra content just extends onto the
     flat var(--color-ink) background past the photo's bottom edge, which is the same
     color the gradient scrim already fades to, so the seam is invisible. Top-anchored
     instead of centered so that overflow happens only below, not split above and below. */
  .hero--flex { aspect-ratio: auto; max-height: none; min-height: 560px; align-items: flex-start; }
  .hero--flex .hero-photo-band {
    inset: 0 0 auto 0;
    height: auto;
    aspect-ratio: 2.4 / 1;
    max-height: 660px;
    min-height: 560px;
  }
  .hero.hero--flex::after {
    inset: 0 0 auto 0;
    height: auto;
    aspect-ratio: 2.4 / 1;
    max-height: 660px;
    min-height: 560px;
  }
  .hero-photo-band {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    z-index: 0;
  }
  /* The three men occupy roughly the left two-thirds of the frame. Both the scrim and
     the text column are sized in vw (not px, not container-relative) so the clear zone
     they claim stays a CONSTANT percentage of viewport width at every screen size —
     a fixed-px column drifts out of alignment with the photo's proportions as viewport
     changes, which is what caused text to land on his shoulder/face in earlier passes. */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, transparent 0%, transparent 56%, rgba(12,27,54,0.93) 74%, rgba(12,27,54,0.98) 86%, var(--color-ink) 100%);
    pointer-events: none;
  }
  .hero .container {
    display: flex;
    justify-content: flex-end;
    max-width: none;
    padding-block: 0;
  }
  .hero-content {
    width: clamp(260px, 25vw, 420px);
    max-width: 420px;
    /* Explicit top padding rather than relying only on flex-centering math —
       guarantees real breathing room above the headline instead of it hugging the top. */
    padding-top: clamp(24px, 5vw, 56px);
  }
  /* h1's global clamp() is sized for full-width headlines; this column is only 260-420px,
     so it needs a gentler scale or it wraps into a cramped tower of short lines. */
  .hero-content h1 {
    font-size: clamp(2.4rem, 3.4vw, 3.9rem);
    margin-bottom: 28px;
    overflow-wrap: break-word;
    /* Now one flowing sentence (no forced <br> splitting it into two independently-wrapped
       halves) so the balance algorithm has the whole headline to distribute evenly across
       lines, instead of being boxed into two pre-cut segments. */
    text-wrap: balance;
  }
  .hero-content p.lede { font-size: clamp(0.85rem, 1vw, 0.95rem); margin-bottom: 30px; }
  .hero-content p.lede.lede-tight { margin-bottom: 8px; }
  .hero-content p.lede-sub { font-size: clamp(0.85rem, 1vw, 0.95rem); margin-bottom: 40px; }
  .hero-content .hero-actions { margin-bottom: 30px; }
  .hero-content h1, .hero-content p.lede, .hero-content p.lede-sub, .hero-kicker, .hero-trustline {
    text-shadow: 0 2px 16px rgba(0,0,0,0.45);
  }
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-cta);
  margin-bottom: 16px;
}
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 em {
  font-style: normal;
  color: var(--color-cta);
}
.hero p.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: rgba(255,255,255,0.85);
  margin-bottom: 24px;
}
/* Reviews page splits its intro across two sentences — tight gap between
   them so they read as one thought, normal lede gap before what follows. */
.hero p.lede.lede-tight { margin-bottom: 10px; }
.hero p.lede-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: rgba(255,255,255,0.85);
  margin-bottom: 36px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.hero-trustline {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 28px;
}
.hero-trustline strong { color: #fff; }
.hero-trustline--stacked { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 14px; }
.hero-trustline--stacked span { display: flex; flex-direction: column; gap: 3px; }
.hero-trustline--stacked strong { font-size: 0.95rem; }
.hero-trustline--stacked small { font-weight: 400; font-size: 0.78rem; color: rgba(255,255,255,0.65); }
.hero-trustline--bulleted span { flex-direction: row; align-items: flex-start; gap: 10px; }
.hero-trustline--bulleted .bullet-dot { color: var(--color-cta); font-size: 1.1rem; line-height: 1.3; flex-shrink: 0; }
.hero-trustline--bulleted .hero-trustline-copy { display: flex; flex-direction: column; gap: 3px; }

/* ============================================
   PAGE HERO — location/service landing pages reuse the homepage .hero
   photo treatment exactly (same photo-band + gradient scrim mechanics);
   .page-hero only adds the breadcrumb and a slightly shorter headline column.
   ============================================ */
.page-hero .hero-content h1 { max-width: 20ch; }

/* .hero-tagline: for pages where the real, keyword-targeted <h1> lives elsewhere
   (see .hero-photo-heading below) — an <h2> styled identically to the homepage's
   big "$0 Upfront" h1 so it reads with the exact same visual weight the client
   is used to, even though it's no longer the page's technical h1. */
.hero-content h2.hero-tagline { color: #fff; margin-bottom: 20px; }
.hero-content h2.hero-tagline em { font-style: normal; color: var(--color-cta); }
@media (min-width: 1024px) {
  .hero-content h2.hero-tagline {
    font-size: clamp(2.4rem, 3.4vw, 3.9rem);
    margin-bottom: 28px;
    overflow-wrap: break-word;
    text-wrap: balance;
    text-shadow: 0 2px 16px rgba(0,0,0,0.45);
  }
  .page-hero .hero-content h2.hero-tagline { max-width: 20ch; }
}

/* .hero-photo-heading: the page's real h1 — client-requested placement is a
   horizontal band across the attorneys' chests, roughly 80% down the photo, per
   their reference mockup. Positioned relative to .hero-photo-band itself (not the
   outer hero box, which can grow taller than the photo) so it lands in the same
   spot on the photo regardless of how much hero content there is. Kept visually
   secondary (smaller, no accent color) to the big "$0 Upfront" tagline — it's here
   for search engines and accessibility, not to compete as the visual focal point. */
.hero-photo-heading {
  position: absolute;
  top: auto;
  bottom: 8%;
  left: 5%;
  right: 5%;
  z-index: 2;
  margin: 0;
  margin-inline: auto;
  display: block;
  width: fit-content;
  max-width: 90%;
  text-align: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 3.6vw, 1.3rem);
  line-height: 1.3;
  /* A dedicated dark backing, not just text-shadow — this crosses directly over the
     photo with no gradient scrim there, so it needs to stay legible no matter how
     busy that specific photo's content is at that spot. */
  background: rgba(8,19,40,0.72);
  padding: 14px 28px;
  border-radius: 10px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
@media (min-width: 1024px) {
  .hero-photo-heading {
    bottom: 5%;
    left: 4%;
    right: 34%;
    max-width: none;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    padding: 16px 32px;
  }
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 16px;
}
.breadcrumb a { color: rgba(255,255,255,0.75); }
.breadcrumb a:hover { color: var(--color-cta); }
.breadcrumb span:last-child { color: rgba(255,255,255,0.9); font-weight: 600; }
@media (min-width: 1024px) {
  .breadcrumb { text-shadow: 0 2px 16px rgba(0,0,0,0.45); }
}

/* ============================================
   LOCAL INTEL — real neighborhood/intersection data, chip style (scannable, not prose)
   ============================================ */
.local-intel-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.5);
  padding: clamp(24px, 3vw, 32px);
}
.local-intel-card h3 { margin-bottom: 18px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}
.chip svg { color: var(--color-cta); flex-shrink: 0; }

/* ============================================
   FAQ ACCORDION — native <details>, zero JS, keeps long-tail answers out of the way
   ============================================ */
.faq-accordion { max-width: 800px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 6px clamp(18px, 3vw, 26px);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-cta);
  transition: transform 0.15s ease;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--color-body); font-size: 0.95rem; padding-bottom: 18px; }

/* ============================================
   INTAKE BAR — compact lead form, own section below the hero
   ============================================ */
.intake-bar {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding-block: 28px;
}
.intake-bar-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.intake-bar-copy h3 { font-size: 1.15rem; margin-bottom: 4px; }
.intake-bar-copy p { color: var(--color-muted); font-size: 0.9rem; }
.intake-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.intake-form input, .intake-form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.intake-form .btn { white-space: nowrap; }

@media (min-width: 768px) {
  .intake-bar-inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .intake-bar-copy { flex-shrink: 0; max-width: 260px; }
  .intake-form { flex-direction: row; flex-wrap: nowrap; flex: 1; justify-content: flex-end; }
  .intake-form input, .intake-form select { width: auto; }
  .intake-form input[name="name"] { flex: 1; max-width: 160px; }
  .intake-form input[name="phone"] { flex: 1; max-width: 150px; }
  .intake-form select { max-width: 160px; }
}

/* ============================================
   DIFFERENCE SECTION — hard-hitting positioning statement, right after the hero
   ============================================ */
.difference-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.difference-card .icon-wrap {
  width: 52px;
  max-width: 52px;
  height: 52px;
  max-height: 52px;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.difference-card .icon-wrap svg { width: 26px; height: 26px; color: var(--color-cta); }
.difference-card h3 { margin-bottom: 4px; font-size: 1.15rem; }
.difference-card p { color: var(--color-body); font-size: 0.95rem; }

/* ============================================
   PROBLEM SECTION — pain-point awareness before proof/solution
   ============================================ */
.pain-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.pain-card .icon-wrap {
  width: 52px;
  max-width: 52px;
  height: 52px;
  max-height: 52px;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pain-card .icon-wrap svg { width: 26px; height: 26px; color: var(--color-primary); }
.pain-card p { color: var(--color-body); font-size: 0.95rem; }
.problem-contrast {
  text-align: center;
  margin-top: 40px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-primary);
}
/* This closing line is the last thing in the section — it doesn't need the
   full sitewide section padding below it before the trust-bar starts. Same
   for the top: the reviews carousel right above it already has its own
   bottom padding, so stacking the full section padding on both sides left a
   large blank gap. */
.problem-section { padding-top: 32px; padding-bottom: 32px; }
/* Same fix, same reason, at three more section boundaries on the homepage:
   each of these sits directly against another section whose own padding
   already provides the breathing room, so stacking both sides' full padding
   left a large blank gap between them. */
.difference-section { padding-bottom: 32px; }
.practice-areas-section { padding-top: 32px; padding-bottom: 32px; }
.evidence-section { padding-top: 32px; }

/* ============================================
   TRUST STAT BAR — Corporate Trust archetype signature element
   ============================================ */
.trust-bar {
  /* White on purpose: it sits between two gray sections (problem-section
     above, badge-row-section below), so without a contrasting background
     all three read as one undifferentiated gray block instead of distinct
     subjects (pain points / trust stats / credentials). */
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.trust-bar .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding-block: 32px;
  text-align: center;
}
@media (min-width: 768px) { .trust-bar .container { grid-template-columns: repeat(4, 1fr); } }
.trust-stat .num {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  color: var(--color-primary);
}
.trust-stat .num span.suffix { color: var(--color-cta); }
.trust-stat .label {
  font-size: 0.82rem;
  color: var(--color-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 4px;
}

/* ============================================
   BADGE ROW — credentials, evenly spaced, quality over quantity
   ============================================ */
/* Nine badges is a lot to fit on one line — less side padding and a tighter gap than a
   normal content section, so the row has real room instead of wrapping the last item alone. */
.badge-row-section {
  /* This section's own content (badge logos + a one-line press row) is compact and
     doesn't need the full sitewide section padding budget — shrinking it removes the
     large empty gap that reads as dead space wherever this section appears. */
  padding-block: 32px;
}
.badge-row-section .container {
  max-width: 1600px;
  padding-inline: clamp(12px, 2vw, 28px);
}
.badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  padding-block: 8px;
}
.badge-row .badge {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  opacity: 0.85;
}
.badge-row .badge svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--color-accent); }
.badge-row .badge img {
  max-height: 88px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(15%);
  opacity: 0.92;
}
.badge-row .badge #flRatingsBadge { min-width: 80px; min-height: 60px; }

.press-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.press-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}
.press-logo {
  max-height: 68px;
  max-width: 68px;
  width: 68px;
  height: 68px;
  object-fit: contain;
  border-radius: 50%;
  filter: grayscale(60%);
  opacity: 0.9;
}

/* ============================================
   TEAM / REAL PEOPLE TRUST SECTION
   ============================================ */
.team-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 1024px) { .team-strip { grid-template-columns: 0.9fr 1.1fr; } }
.team-strip .team-photo {
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.team-strip .team-photo img { width: 100%; height: auto; object-fit: cover; }
.team-strip .team-copy p { margin-bottom: 14px; }
.team-strip .team-copy .pillars { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.team-strip .team-copy .pillar { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; }
.team-strip .team-copy .pillar svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-success); margin-top: 2px; }

/* Barbara's source photo is lower-resolution than header-3.jpg (the homepage's
   team-strip image) — displaying it at the same large column width made it
   look soft. Rendering it smaller (source pixels downscale further) reads
   sharp again, while staying in the same side-by-side row as the text. */
.team-strip--compact-photo .team-photo { max-width: 320px; margin-inline: auto; }
@media (min-width: 1024px) {
  .team-strip--compact-photo { grid-template-columns: 0.6fr 1.4fr; }
  .team-strip--compact-photo .team-photo { max-width: none; margin-inline: 0; }
}

/* ============================================
   COMPARISON — "most firms" vs. "us" cards, for differentiator pages
   ============================================ */
.comparison-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .comparison-grid { grid-template-columns: 1fr 1fr; } }
.comparison-vs { display: none; }
@media (min-width: 768px) {
  .comparison-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    border: 3px solid var(--color-cta);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    z-index: 2;
  }
}
.comparison-card {
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.comparison-photo { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; flex-shrink: 0; }
.comparison-photo img { width: 100%; height: 100%; object-fit: cover; }
.comparison-body { padding: clamp(28px, 4vw, 36px); flex: 1; }
.comparison-card h3 { margin-bottom: 20px; }
.comparison-card ul { display: flex; flex-direction: column; gap: 14px; }
.comparison-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; }
.comparison-card li svg { flex-shrink: 0; margin-top: 3px; }
.comparison-card--them {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}
.comparison-card--them h3 { color: var(--color-muted); }
.comparison-card--them li { color: var(--color-muted); }
.comparison-card--them li svg { color: var(--color-danger); }
.comparison-card--us {
  background: var(--color-primary);
  border: 2px solid var(--color-cta);
  box-shadow: var(--shadow-lg);
}
.comparison-card--us h3 { color: #fff; }
.comparison-card--us li { color: rgba(255,255,255,0.9); }
.comparison-card--us li svg { color: var(--color-cta); }

/* ============================================
   OFFICE + MAP — real local office proof, location pages only
   ============================================ */
.office-media-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .office-media-grid { grid-template-columns: 1fr 1fr; } }
.office-map, .office-photo {
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.office-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.office-photo img { width: 100%; height: 100%; object-fit: cover; }
.office-photo-hook {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
  text-align: center;
  margin-bottom: 24px;
}

/* Full-width contact bar below the map/photo row — same dark treatment as the
   hero/CTA band, so it reads as a distinct, attention-grabbing block rather
   than blending into the page like the lighter map/photo row above it. */
.office-info-bar {
  background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-primary) 100%);
  border-radius: calc(var(--radius) * 1.5);
  padding: clamp(28px, 4vw, 40px);
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.office-info-details { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; margin-bottom: 28px; }
.office-detail { display: flex; gap: 12px; align-items: flex-start; }
.office-detail svg { flex-shrink: 0; color: var(--color-cta); margin-top: 3px; }
.office-detail div { font-size: 0.95rem; color: rgba(255,255,255,0.85); }
.office-detail strong { display: block; color: #fff; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px; }
.office-info-bar .btn-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ============================================
   PROPERTY DAMAGE RESULTS — real itemized settlement breakdowns
   ============================================ */
.pd-result-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.5);
  padding: clamp(28px, 4vw, 36px);
  display: flex;
  flex-direction: column;
}
.pd-result-card .case-tag { margin-bottom: 12px; }
.pd-result-card p { color: var(--color-body); font-size: 0.95rem; margin-bottom: 22px; }
.pd-result-breakdown { border-top: 1px solid var(--color-border); padding-top: 16px; margin-bottom: 4px; }
.pd-result-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--color-body);
  padding-block: 6px;
}
.pd-result-line span:last-child { color: var(--color-ink); font-weight: 600; white-space: nowrap; }
.pd-result-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid var(--color-border);
  margin-top: 10px;
  padding-top: 14px;
}
.pd-result-total span:first-child { font-weight: 700; color: var(--color-ink); font-size: 0.9rem; }
.pd-result-total span:last-child { font-family: var(--font-body); font-weight: 800; font-size: 1.4rem; color: var(--color-cta); }

/* ============================================
   URGENCY NOTE — deadline callout, used near Statute of Limitations content
   ============================================ */
.urgency-note {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(179, 38, 30, 0.06);
  border: 1px solid rgba(179, 38, 30, 0.25);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 28px;
  max-width: 800px;
  margin-inline: auto;
}
.urgency-note svg { color: var(--color-danger); flex-shrink: 0; margin-top: 2px; }
.urgency-note strong { display: block; color: var(--color-ink); font-size: 0.95rem; margin-bottom: 4px; }
.urgency-note p { color: var(--color-body); font-size: 0.9rem; margin: 0; }

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-cta);
  margin-bottom: 10px;
}
.section-head p { color: var(--color-muted); margin-top: 12px; font-size: 1.02rem; }
.section-head.center { margin-inline: auto; text-align: center; }

/* Contact Us page's single, tight CTA — a big, unmissable clickable phone
   number instead of a card/button, per client request to keep this page to
   one action only. */
.contact-phone-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1.1;
  margin-top: 8px;
}
.contact-phone-cta:hover { color: var(--color-cta); }

/* ============================================
   CASE TYPE / SERVICE CARDS
   ============================================ */
.case-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.5);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.case-card .card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  margin: -32px -28px 20px;
}
.case-card .card-photo img { width: 100%; height: 100%; object-fit: cover; }
.case-card .icon-wrap {
  width: 56px;
  max-width: 56px;
  height: 56px;
  max-height: 56px;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.case-card .icon-wrap svg { width: 28px; height: 28px; color: var(--color-primary); }
.case-card h3 { margin-bottom: 10px; }
.case-card p { color: var(--color-body); font-size: 0.95rem; margin-bottom: 16px; }
.case-card a.card-link {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--color-cta);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================
   PRACTICE AREA TILES — photo + label only, no icon/copy/link-text
   ============================================ */
.practice-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.practice-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.practice-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.practice-tile:hover img { transform: scale(1.05); }
.practice-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(12,27,54,0.85) 0%, rgba(12,27,54,0.15) 55%, transparent 75%);
}
.practice-tile-label {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
}

/* ============================================
   NAMED PROCESS — "The Wade & Nysather Way"
   ============================================ */
.process-step { position: relative; padding-top: 8px; }
.process-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.25rem;
  color: var(--color-cta);
  line-height: 1;
  margin-bottom: 8px;
}
.process-step h3 { margin-bottom: 8px; }
.process-step p { color: var(--color-body); font-size: 0.92rem; }

/* ============================================
   PROOF / RESULTS
   ============================================ */
.results-card {
  background: var(--color-primary);
  color: #fff;
  border-radius: calc(var(--radius) * 1.5);
  padding: 32px;
  text-align: center;
}
.results-card .num {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--color-cta);
}
.results-card .label { font-size: 0.85rem; color: rgba(255,255,255,0.75); margin-top: 6px; }
.results-card .case-type { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-top: 2px; }

.featured-case {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  /* evidence-section is white again — card needs to be gray (bg-alt) to still read as a card, not blend in */
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.5);
  padding: clamp(28px, 4vw, 44px);
  margin-bottom: 28px;
}
@media (min-width: 768px) {
  .featured-case { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
}
.featured-case-result { text-align: center; }
.featured-case-result .num {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--color-primary);
}
.featured-case-result .label {
  font-size: 0.9rem;
  color: var(--color-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.case-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-cta);
  margin-bottom: 12px;
}
.featured-case-story p { color: var(--color-body); font-size: 0.95rem; margin-bottom: 10px; }
.featured-case-story p strong { color: var(--color-ink); }
.supporting-cases { margin-top: 0; }

/* "Real Case Result" trust badge — reinforces that these numbers are genuine,
   not marketing placeholders, right where the visitor is evaluating proof. */
.case-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(47, 133, 90, 0.1);
  color: var(--color-success);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.case-verified-badge svg { flex-shrink: 0; }

.evidence-disclaimer {
  text-align: center;
  margin-top: 24px;
  font-size: 0.82rem;
  color: var(--color-muted);
}
.evidence-cta { text-align: center; margin-top: 28px; }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonial-card {
  background: var(--color-bg-alt);
  border-radius: calc(var(--radius) * 1.5);
  padding: 32px;
  border-left: 4px solid var(--color-cta);
}
.testimonial-card .stars { color: var(--color-cta); font-size: 0.95rem; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-card .avatar {
  width: 44px;
  max-width: 44px;
  height: 44px;
  max-height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.testimonial-card p.quote {
  font-size: 1.05rem;
  color: var(--color-ink);
  margin-bottom: 18px;
  font-style: italic;
}
.testimonial-card .attribution { font-weight: 700; font-size: 0.9rem; color: var(--color-primary); }
.testimonial-card .attribution span { color: var(--color-muted); font-weight: 500; }

/* ============================================
   CTA BAND — repeated CTA per archetype layout
   ============================================ */
.cta-band {
  background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-primary) 100%);
  color: #fff;
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { color: rgba(255,255,255,0.78); max-width: 52ch; margin-inline: auto; margin-bottom: 28px; }
.cta-band .btn-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.trust-closer {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  font-size: 0.85rem !important;
  color: rgba(255,255,255,0.6) !important;
}
.operating-info {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 20px;
}
.operating-info strong { color: #fff; }
.operating-info .sep { color: rgba(255,255,255,0.3); }

/* ============================================
   RELATABLE STORY — a modest, everyday case (not the headline-grabbing one), final proof before footer
   ============================================ */
.relatable-story-card {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.5);
  padding: clamp(32px, 5vw, 56px);
}
.relatable-story-card .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-cta);
  margin-bottom: 10px;
}
.relatable-story-card h2 { margin-bottom: 24px; }
.relatable-story-body { text-align: left; margin-bottom: 28px; }
.relatable-story-body p { color: var(--color-body); font-size: 0.98rem; margin-bottom: 14px; }
.relatable-story-body p strong { color: var(--color-ink); }
.relatable-story-body p:last-child { margin-bottom: 0; }

/* ============================================
   VIDEO TESTIMONIALS — click-to-play, not auto-loaded iframes (perf + no autoplay-carousel anti-pattern)
   ============================================ */
.video-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
  background: var(--color-ink);
  cursor: pointer;
}
.video-card img { width: 100%; height: 100%; object-fit: cover; }
.video-card iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-card .video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  max-width: 56px;
  height: 56px;
  max-height: 56px;
  border-radius: 50%;
  background: var(--color-cta);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease;
}
.video-card .video-play-btn svg { width: 22px; height: 22px; max-width: 22px; max-height: 22px; }
.video-card:hover .video-play-btn { transform: translate(-50%, -50%) scale(1.08); }
.video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(12,27,54,0.35) 0%, transparent 40%);
  pointer-events: none;
}
.video-card.is-playing::after,
.video-card.is-playing .video-play-btn { display: none; }

/* Single firm-intro video, right below "The Wade & Nysather Way" — same .video-card
   styling as the testimonial grid, just one centered card instead of a row of three. */
.firm-intro-video { padding-block: 32px; }
.firm-intro-video .video-card { max-width: 800px; margin-inline: auto; }
/* Wherever this section follows the firm-intro video (or another
   tightly-padded section), its own full default top padding was stacking on
   top of that section's already-reduced bottom padding, leaving a large gap. */
.video-testimonials { padding-top: 32px; }

/* Property damage page's video is a YouTube Short (vertical 9:16), not the
   standard 16:9 landscape used elsewhere — the standard .video-card aspect-ratio
   would badly letterbox it, so this variant overrides to portrait and keeps it
   narrow rather than stretching a vertical clip full-width. */
.pd-intro-video { padding-block: 32px; }
.pd-intro-video .video-card.video-card--vertical {
  aspect-ratio: 9 / 16;
  max-width: 320px;
  margin-inline: auto;
}

/* Google Reviews widget loads async on scroll-into-view — reserve height so the
   section doesn't collapse to nothing and cause a layout jump once it loads. */
#elfsight-container { min-height: 240px; }

/* Location-page reviews sit between two tight sections (practice areas above,
   process below) — trims the standard .section padding without touching the
   homepage's reviews section, which keeps the full padding. */
/* Tightening only the top of the following section wasn't enough — this
   section's own bottom padding was still stacking with it, sitewide
   (homepage, location pages, practice-area pages, property damage). */
.google-reviews-section { padding-bottom: 32px; }
.google-reviews-section--tight {
  padding-block: clamp(24px, 4vw, 40px);
}
.google-reviews-section--tight .section-head { margin-bottom: 24px; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--color-ink);
  color: rgba(255,255,255,0.65);
  padding-block: 56px 32px;
  font-size: 0.88rem;
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 36px; margin-bottom: 40px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-grid h4 { color: #fff; font-size: 0.95rem; margin-bottom: 16px; }
.footer-grid ul li { margin-bottom: 8px; }
.footer-grid a:hover { color: var(--color-cta); }
.footer-brand .site-logo { display: inline-block; margin-bottom: 12px; }
.footer-logo-img { max-height: 52px; max-width: 240px; width: auto; height: auto; object-fit: contain; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.footer-social a:hover { background: var(--color-cta); border-color: var(--color-cta); color: var(--color-ink); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
}

/* ============================================
   STICKY MOBILE CTA — always-visible, mobile only (most local-search traffic is mobile)
   ============================================ */
.sticky-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 70;
  display: flex;
  gap: 10px;
  padding: 10px clamp(12px, 4vw, 20px);
  background: var(--color-ink);
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -4px 16px rgba(12,27,54,0.15);
}
.sticky-mobile-cta .btn { flex: 1; font-size: 0.82rem; padding: 12px 14px; }
.sticky-mobile-cta .btn-outline { color: #fff; border-color: rgba(255,255,255,0.3); }
/* Body needs bottom breathing room so this bar never covers footer content on mobile */
body { padding-bottom: 68px; }
@media (min-width: 1024px) {
  .sticky-mobile-cta { display: none; }
  body { padding-bottom: 0; }
}

/* ============================================
   MOTION — subtle mood, reveal on scroll, respects prefers-reduced-motion
   ============================================ */
.sonic-fade-on-scroll { opacity: 0; }
.sonic-fade-on-scroll.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .sonic-fade-on-scroll { opacity: 1 !important; transform: none !important; }
}

/* ============================================
   OUR TEAM — hub grid + individual bio pages
   ============================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.team-card {
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.team-card:hover {
  box-shadow: 0 12px 28px rgba(12,27,54,0.12);
  transform: translateY(-3px);
}
.team-card-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.team-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.team-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
}
.team-avatar-fallback span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--color-cta);
}
.team-card-body { padding: 18px 20px 22px; }
.team-card-body h3 { font-size: 1.1rem; margin-bottom: 4px; color: var(--color-ink); }
.team-card-title { display: block; color: var(--color-cta); font-weight: 600; font-size: 0.85rem; }
.team-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.85rem; font-weight: 600; color: var(--color-primary); }
.team-card-link svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.team-card:hover .team-card-link svg { transform: translateX(3px); }

@media (min-width: 640px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .team-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Individual bio page */
.team-bio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}
.team-bio-photo {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 360px;
  background: var(--color-bg-alt);
}
.team-bio-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.team-bio-copy h1 { margin-bottom: 4px; }
.team-bio-title { color: var(--color-cta); font-weight: 700; font-size: 1.05rem; display: block; margin-bottom: 18px; }
.team-bio-copy p { color: var(--color-body); margin-bottom: 16px; }
.team-bio-personal {
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-cta);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  font-size: 0.95rem;
  color: var(--color-body);
  margin-top: 8px;
}
.team-bio-credentials {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.team-bio-credentials li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--color-primary);
}
.team-bio-credentials svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--color-cta); }

@media (min-width: 800px) {
  .team-bio-grid { grid-template-columns: 340px 1fr; }
}

/* ============================================
   LOCATIONS MAP — branded schematic Valley layout, not a literal street map
   ============================================ */
.locations-map-section { padding: 0; }
.locations-map-banner {
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px clamp(20px, 5vw, 60px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
  max-width: 480px;
}
.locations-map-banner svg { color: var(--color-cta); flex-shrink: 0; }

.locations-map-canvas {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FBF7EF 0%, #F0E7D5 100%);
  border: 1px solid var(--color-border);
  border-top: none;
  min-height: 520px;
  display: none;
}
@media (min-width: 900px) {
  .locations-map-canvas { display: block; }
}

.map-mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 130px;
}
.map-mountains path { fill: var(--color-primary); opacity: 0.06; }

.map-roads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-roads line {
  stroke: var(--color-cta);
  stroke-width: 0.35;
  stroke-dasharray: 1.4 1.6;
  opacity: 0.55;
}

.map-place-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-muted);
  white-space: nowrap;
}

.map-freeway-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-primary);
  border: 2px solid var(--color-cta);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
  z-index: 3;
}

.map-pin-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}
.map-pin-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-cta);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(12,27,54,0.3);
}
.map-pin-city {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary);
  margin-top: 6px;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.map-pin-card {
  position: absolute;
  top: 4px;
  width: 210px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-cta);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 6;
}
.map-pin-card strong {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.map-pin-card span { font-size: 0.8rem; color: var(--color-body); line-height: 1.35; }
.map-pin-card--right { left: calc(100% + 18px); }
.map-pin-card--left { right: calc(100% + 18px); }

/* ============================================
   COMMUNITY IMPACT — tabbed, photo-driven category browser
   ============================================ */
.impact-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.impact-tab-btn {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.impact-tab-btn:hover { border-color: var(--color-cta); }
.impact-tab-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.impact-panel { display: none; }
.impact-panel.is-active { display: block; animation: wn-fade-in 0.25s ease; }
@keyframes wn-fade-in { from { opacity: 0; } to { opacity: 1; } }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
@media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }
.photo-grid-item {
  display: block;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  background: var(--color-bg-alt);
}
.photo-grid-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.photo-grid-item:hover img { transform: scale(1.06); }

/* Named-person caption — for photos featuring a prominent, identifiable
   person (a Governor, org president, etc.) where the name is worth calling
   out directly on the photo, not just in the lightbox on click. */
.photo-grid-item--named { position: relative; }
.photo-name-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 12px 10px;
  background: linear-gradient(0deg, rgba(12,27,54,0.92) 0%, rgba(12,27,54,0.55) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
.photo-name-caption strong {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.2;
}
.photo-name-caption small {
  color: var(--color-cta);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.impact-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-muted);
  text-align: center;
  margin-bottom: 28px;
}
.impact-coming-soon svg { color: var(--color-muted); }

.impact-chip-list { justify-content: center; }

.impact-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12,27,54,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.impact-lightbox[hidden] { display: none; }
.impact-lightbox figure { max-width: 900px; max-height: 85vh; margin: 0; text-align: center; }
.impact-lightbox img { max-width: 100%; max-height: 75vh; border-radius: var(--radius); }
.impact-lightbox figcaption { color: #fff; margin-top: 14px; font-size: 0.9rem; }
.org-placeholder-photo {
  position: relative;
  max-width: 500px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 8px;
}
.org-placeholder-photo img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.org-placeholder-photo span {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(12,27,54,0.85);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}
.impact-lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

/* ============================================
   LOCATIONS HUB — office card per city
   ============================================ */
.location-card {
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.location-card:hover { box-shadow: 0 12px 28px rgba(12,27,54,0.12); transform: translateY(-3px); }
.location-card-body h3 { color: var(--color-ink); }
.location-card-photo {
  height: 220px;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.location-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.location-card-body { padding: 20px 22px 22px; }
.location-card-body h3 { font-size: 1.2rem; margin-bottom: 10px; }

/* Inline Heyflow embed — kept phone-narrow and centered instead of
   stretching full-bleed, per client request ("tight, like a phone screen"). */
.heyflow-embed-section { padding-block: 0; margin-block: -64px; }
.heyflow-embed-narrow { max-width: 390px; margin-inline: auto; }
.heyflow-embed-narrow heyflow-wrapper { display: block; width: 100%; }