/* ============================================================
   Krumbein Consumer Legal Services
   Styled to match the Hamilton & Merchant design language:
   Hamilton green + mint surfaces, Ubuntu + Cormorant Garamond.
   ============================================================ */

:root {
  --green: #245B47;
  --green-accent: #3A7A62;
  --white: #FFFFFF;
  --black: #1A1A1A;
  --mint: #F4F8F6;
  --ink: var(--black);
  --muted: rgba(26, 26, 26, 0.72);
  --line: rgba(36, 91, 71, 0.18);
  --line-soft: rgba(36, 91, 71, 0.12);

  --radius: 10px;
  --radius-lg: 18px;
  --max-width: 1380px;
  --edge: clamp(20px, 3.4vw, 56px);

  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 48px;
  --space-xl: 96px;
  --space-xxl: 144px;

  --shadow-sm: 0 4px 14px -8px rgba(36, 91, 71, 0.30);
  --shadow-md: 0 12px 32px -14px rgba(36, 91, 71, 0.32);
  --shadow-lg: 0 24px 48px -16px rgba(36, 91, 71, 0.34);
  --nav-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

  --sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--green); }
/* The HTML hidden attribute must always win, even over display:flex/grid set on
   a class — otherwise "hidden" panels (e.g. tool empty-states) keep rendering. */
[hidden] { display: none !important; }

/* ---------- Typography ---------- */
/* Display serif for the big statements, workhorse sans for everything inside. */
h1, h2 { font-family: var(--serif); color: var(--black); margin: 0 0 var(--space-m); line-height: 1.08; letter-spacing: -0.01em; }
h3, h4 { font-family: var(--sans); color: var(--black); margin: 0 0 var(--space-m); line-height: 1.2; }
h1 { font-size: clamp(42px, 5.6vw, 72px); font-weight: 600; }
h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 600; }
h3 { font-size: clamp(21px, 2.5vw, 27px); font-weight: 500; }
h4 { font-size: 20px; font-weight: 500; }
p { margin: 0 0 var(--space-m); }
.accent { color: var(--green); }

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 var(--space-s);
}
.eyebrow.on-dark { color: var(--white); opacity: 0.92; }

.lede { font-size: 20px; color: var(--muted); max-width: 62ch; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--edge); }
.section { padding: var(--space-xl) 0; }
.bg-paper2 { background: var(--mint); }
.bg-ink { background: var(--green); color: var(--white); }
.bg-ink h2, .bg-ink h3, .bg-ink p { color: var(--white); }
.section-head { max-width: 64ch; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lede { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .12s;
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--green); color: var(--white); }
.btn-primary:hover { background: var(--green-accent); color: var(--white); }
.btn-ghost { background: var(--white); color: var(--green); border-color: var(--green); }
.btn-ghost:hover { background: var(--mint); color: var(--green); }
.btn-ghost.on-dark { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.7); }
.btn-ghost.on-dark:hover { background: var(--white); color: var(--green); border-color: var(--white); }
.btn-row { display: flex; gap: var(--space-s); flex-wrap: wrap; align-items: center; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--green); color: var(--white); padding: 10px 16px; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Header ---------- */
.site-header {
  background: var(--green);
  color: var(--white);
  box-shadow: var(--nav-shadow);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow .2s ease;
}
.site-header.condensed { box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
/* Header content bleeds end to end — logo hugs the left edge, menu the right. */
.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-s) var(--edge);
  transition: padding .2s ease;
}
.site-header.condensed .header-inner { padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--white); text-decoration: none; flex-shrink: 0; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; flex: none;
  font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1;
  color: var(--white); background: rgba(255,255,255,0.07);
  border: 2px solid rgba(255,255,255,0.85); border-radius: 10px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.06);
  transition: width .28s var(--ease), height .28s var(--ease), font-size .28s var(--ease), border-radius .28s var(--ease);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--sans); font-weight: 700; font-size: 24px; letter-spacing: 0.02em; color: var(--white);
  transition: font-size .28s var(--ease);
}
.brand-sub {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 15px; color: rgba(255,255,255,0.85); margin-top: 3px;
  transition: font-size .28s var(--ease);
}

/* Home page: a much larger logo that condenses gracefully on scroll. */
body.home .site-header:not(.condensed) .brand-mark {
  width: 72px; height: 72px; font-size: 46px; border-radius: 14px;
}
body.home .site-header:not(.condensed) .brand-name { font-size: 34px; }
body.home .site-header:not(.condensed) .brand-sub { font-size: 18px; }
@media (max-width: 760px) {
  .brand-mark { width: 44px; height: 44px; font-size: 28px; }
  .brand-name { font-size: 21px; }
  .brand-sub { font-size: 13px; }
  body.home .site-header:not(.condensed) .brand-mark { width: 60px; height: 60px; font-size: 38px; }
  body.home .site-header:not(.condensed) .brand-name { font-size: 28px; }
  body.home .site-header:not(.condensed) .brand-sub { font-size: 15px; }
}

/* Scroll-progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--green-accent), #5da588);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
  pointer-events: none;
}

.main-nav { display: flex; align-items: center; }
.nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 4px; align-items: center; }
.nav-list > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--white); font-weight: 500; font-size: 15px; line-height: 1;
  padding: 10px 14px; border-radius: 4px; text-decoration: none;
  transition: background-color .15s ease;
}
.nav-list > li > a:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.nav-list > li > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--white); }
.nav-cta-li { margin-left: 6px; }
.btn-phone {
  background: var(--white); color: var(--green) !important;
  padding: 10px 20px; font-size: 14px; border-radius: 999px; border: 0;
}
.btn-phone:hover { background: var(--mint); color: var(--green) !important; }

/* Desktop-balanced header: logo left, primary nav centered, call button right.
   The in-list phone (.nav-cta-li) is used for the mobile drawer; on wide screens
   it hides and the standalone .header-phone takes the right column instead. */
.header-phone { display: none; }
@media (min-width: 1280px) {
  .header-inner { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-m); }
  .brand { justify-self: start; }
  .main-nav { display: contents; }
  .nav-list { justify-self: center; gap: 6px; }
  .nav-list > li > a,
  .nav-trigger { font-size: 16px; padding: 11px 15px; letter-spacing: 0.01em; }
  .nav-cta-li { display: none; }
  .header-phone { display: flex; justify-self: end; align-items: center; }
}

.nav-toggle {
  display: none; background: transparent; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;
}
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px;
  transition: transform .25s ease, opacity .2s;
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -7px; }
.nav-toggle .bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mega-menu ---------- */
.nav-has-mega { position: relative; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--white); font-weight: 500; font-size: 15px; line-height: 1;
  padding: 10px 14px; border-radius: 4px; text-decoration: none;
  cursor: pointer; background: transparent; border: 0; font-family: inherit;
  transition: background-color .15s ease;
}
.nav-trigger:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.nav-trigger[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--white); }
.nav-caret { display: inline-flex; transition: transform .25s var(--ease); }

.nav-mega {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: max-content; max-width: min(760px, calc(100vw - 32px));
  background: var(--white); color: var(--ink);
  border: 1px solid rgba(0,0,0,0.06); border-radius: 14px;
  box-shadow: 0 26px 64px rgba(20,50,40,0.28);
  padding: 22px; z-index: 60;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--ease), visibility .2s;
}
/* invisible bridge so the cursor can cross the gap without closing the panel */
.nav-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-has-mega:hover > .nav-mega,
.nav-has-mega:focus-within > .nav-mega,
.nav-trigger[aria-expanded="true"] + .nav-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-has-mega:hover > .nav-trigger .nav-caret,
.nav-has-mega:focus-within > .nav-trigger .nav-caret,
.nav-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

/* Narrow single-column dropdown (Insights) — right-aligned to its trigger */
.nav-mega--single { left: auto; right: 0; transform: translateX(0) translateY(8px); width: 360px; }
.nav-has-mega--narrow:hover > .nav-mega,
.nav-has-mega--narrow:focus-within > .nav-mega,
.nav-has-mega--narrow .nav-trigger[aria-expanded="true"] + .nav-mega {
  transform: translateX(0) translateY(0);
}

.nav-mega__grid { display: flex; flex-wrap: wrap; gap: 26px; }
.nav-mega__col { min-width: 220px; }
.nav-mega__eyebrow {
  margin: 0 0 8px; font-family: var(--sans); font-weight: 700;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-accent);
}
.nav-mega__list { list-style: none; margin: 0; padding: 0; }
.nav-mega__item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 10px; border-radius: 9px; text-decoration: none; color: var(--ink);
  transition: background-color .15s ease;
}
.nav-mega__item:hover { background: var(--mint); color: var(--ink); }
.nav-mega__icon {
  flex: none; width: 36px; height: 36px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: var(--white);
}
.nav-mega__icon svg { width: 19px; height: 19px; }
.nav-mega__body { display: flex; flex-direction: column; gap: 2px; }
.nav-mega__title { font-weight: 600; font-size: 14.5px; color: var(--green); line-height: 1.25; }
.nav-mega__desc { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
/* Icon-less items (Areas Served) — tighter rows in a dense list */
.nav-mega__item--plain { padding: 6px 10px; }
.nav-mega__item--plain .nav-mega__title { font-weight: 500; font-size: 14px; }
.nav-mega__item--plain:hover .nav-mega__title { color: var(--ink); }
.nav-mega__all {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.08);
  font-weight: 600; font-size: 14px; color: var(--green-accent); text-decoration: none;
  transition: gap .2s var(--ease);
}
.nav-mega__all:hover { gap: 12px; color: var(--green); }

/* ---------- Full-bleed hero ---------- */
.hero-full {
  position: relative; width: 100%; min-height: clamp(640px, 88vh, 940px);
  display: flex; align-items: center; overflow: hidden;
  color: var(--white); background: var(--green); isolation: isolate;
}
.hero-full__media {
  position: absolute; left: 0; right: 0; top: -18%;
  width: 100%; height: 136%; z-index: 0; will-change: transform; overflow: hidden;
}
.hero-full__image {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
  transform-origin: 60% 40%;
  animation: heroKen 2.6s var(--ease) both;
}
@keyframes heroKen {
  from { transform: scale(1.18); }
  to   { transform: scale(1); }
}
.hero-full__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(270deg, rgba(26,26,26,0.82) 0%, rgba(36,91,71,0.60) 45%, rgba(36,91,71,0.12) 75%, rgba(36,91,71,0) 100%);
}
.hero-full__content { position: relative; z-index: 2; width: 100%; padding: var(--space-xxl) 0; }
/* The text column sits in the open green space beside Hamilton. It's pulled in
   off the right edge (toward his face) and widened so the copy can breathe,
   while still clearing the portrait at every desktop width. */
.hero-full__inner { max-width: clamp(560px, 50vw, 720px); margin-left: auto; margin-right: clamp(0px, 11vw, 200px); }
.hero-full__title { color: var(--white); margin-bottom: var(--space-l); line-height: 1.14; text-shadow: 0 2px 12px rgba(0,0,0,0.25); }
.hero-full__tagline { font-family: var(--serif); font-style: italic; font-size: 27px; line-height: 1.4; color: var(--white); opacity: 0.96; margin-bottom: var(--space-m); }
.hero-full__lead { font-size: 20px; line-height: 1.65; color: var(--white); opacity: 0.95; max-width: 56ch; margin-bottom: var(--space-l); }
.hero-full__note { margin-top: var(--space-l); font-size: 15px; line-height: 1.6; color: var(--white); opacity: 0.92; }
.hero-full__note strong { color: var(--white); }
@media (max-width: 1024px) {
  .hero-full__overlay { background: linear-gradient(180deg, rgba(26,26,26,0.50) 0%, rgba(30,72,56,0.62) 100%); }
  .hero-full__inner { max-width: 100%; margin-right: 0; }
}
@media (max-width: 768px) {
  .hero-full { min-height: 560px; }
  .hero-full__content { padding: var(--space-xl) 0; }
  .hero-full__tagline { font-size: 22px; }
  .hero-full__lead { font-size: 18px; }
}

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--mint); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: var(--space-m) 0; }
.trust-strip .wrap { display: flex; justify-content: space-around; flex-wrap: wrap; gap: var(--space-m); text-align: center; }
.trust-strip span {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 14px; color: var(--green);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.trust-strip svg { width: 18px; height: 18px; flex: none; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-m); }
.card {
  background: var(--mint); border-radius: var(--radius-lg);
  padding: 40px 34px 34px; text-decoration: none; color: var(--black); display: block;
  transition: transform .3s var(--ease), box-shadow .3s ease, background-color .3s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: var(--white); color: var(--black); }
.card-icon {
  width: 52px; height: 52px; border-radius: 10px; background: var(--white);
  color: var(--green); display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-s); transition: background-color .2s, color .2s;
}
.card-icon svg { width: 26px; height: 26px; }
.card:hover .card-icon { background: var(--green); color: var(--white); }
.card h3 { margin: 0 0 6px; color: var(--green); }
.card-law { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-accent); margin-bottom: 12px; }
.card p { color: var(--muted); margin-bottom: var(--space-s); }
.card-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green); }
.card-link svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.card:hover .card-link svg { transform: translateX(4px); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-m); }
.step { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-l) 34px var(--space-m); position: relative; transition: transform .3s var(--ease), box-shadow .3s ease; }
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: var(--white);
  font-family: var(--sans); font-weight: 700; font-size: 20px; margin-bottom: var(--space-s);
}
.step h3 { color: var(--green); margin-bottom: 8px; }
.step p { color: var(--muted); margin: 0; font-size: 16px; }

/* ---------- Attorney spotlight ---------- */
.attorney { background: var(--green); color: var(--white); }
.attorney h2, .attorney .lede { color: var(--white); }
.attorney .lede { opacity: 0.95; }
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-xl); align-items: center; }
.split-media.figure-ink {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-lg); aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; text-align: center;
}
.figure-ink .initials {
  font-family: var(--serif); font-weight: 500; font-size: 96px; color: var(--white);
  line-height: 1; letter-spacing: 0.04em;
}
.figure-ink .figure-cap { margin-top: var(--space-s); font-size: 15px; color: rgba(255,255,255,0.9); }
.split-media.attorney-photo { text-align: center; }
.attorney-photo picture { display: block; }
.attorney-photo img {
  width: 100%; max-width: 280px; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center;
  border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06); margin: 0 auto; display: block;
}
.attorney-photo .figure-cap { margin-top: var(--space-s); font-size: 15px; color: rgba(255,255,255,0.9); }
.bio-portrait { float: right; width: 200px; margin: 0 0 var(--space-m) var(--space-l); text-align: center; }
.bio-portrait img {
  width: 200px; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center;
  border-radius: var(--radius-lg); border: 1px solid var(--line); display: block;
}
.bio-portrait figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) { .bio-portrait { float: none; width: 200px; margin: 0 auto var(--space-m); } }
.loc-figure { margin: 0 0 var(--space-l); }
.loc-figure img {
  width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line);
  display: block; aspect-ratio: 16 / 9; object-fit: cover;
}
.loc-figure figcaption { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.loc-figure figcaption a { color: var(--muted); text-decoration: underline; }
.loc-about { margin-bottom: var(--space-l); }
.loc-about h2 { font-size: 1.45rem; }
.loc-source a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.loc-source svg { width: 16px; height: 16px; }

/* Local court cards (areas-served pages) */
.court-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-m); margin: 1.4rem 0 var(--space-m);
}
.court-card {
  background: var(--mint); border-left: 4px solid var(--green);
  border-radius: var(--radius); padding: var(--space-m); box-shadow: var(--shadow-sm);
}
.court-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--green-accent); margin-bottom: 8px;
}
.court-card h3 { margin: 0 0 8px; color: var(--green); font-size: 1.18rem; }
.court-addr { margin: 0 0 8px; color: var(--ink); font-style: normal; line-height: 1.5; }
.court-meta { margin: 0 0 10px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.court-meta a { font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.court-meta svg { width: 14px; height: 14px; }
.court-dot { color: var(--muted); }
.court-note { margin: 0; font-size: 13.5px; color: var(--muted); }
.court-src { font-size: 13px; color: var(--muted); margin-top: 0; }
.court-src a { color: var(--muted); text-decoration: underline; }

/* Internal-link lists (further reading, nearby areas) */
.loc-links { list-style: none; padding: 0; margin: 1rem 0 var(--space-l); }
.loc-links li { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.loc-links a { font-weight: 600; }
.loc-links-cols { columns: 2; column-gap: var(--space-l); }
@media (max-width: 560px) { .loc-links-cols { columns: 1; } }

/* "Find your court" internal-link block on practice-area pages */
.court-finder {
  margin: var(--space-l) 0; padding: var(--space-l);
  background: var(--mint); border-radius: var(--radius-lg);
}
.court-finder h2 { margin-top: 0; }
.court-finder .loc-links { margin-bottom: var(--space-s); }
.court-finder .loc-links li { border-bottom-color: var(--line); }
.court-finder-all a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.court-finder-all svg { width: 16px; height: 16px; }
.cred-list { list-style: none; padding: 0; margin: var(--space-m) 0 0; }
.cred-list li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; color: rgba(255,255,255,0.95); font-size: 16px; }
.cred-list svg { width: 20px; height: 20px; color: var(--white); flex: none; margin-top: 3px; }
.attorney .btn-primary { background: var(--white); color: var(--green); }
.attorney .btn-primary:hover { background: var(--mint); color: var(--green); }

/* ---------- Reviews ---------- */
.reviews { background: var(--mint); }
.reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-m); flex-wrap: wrap; margin-bottom: var(--space-l); }
.grating { display: flex; align-items: center; gap: 14px; }
.grating .num { font-family: var(--sans); font-weight: 700; font-size: 48px; color: var(--green); line-height: 1; }
.gmeta { font-size: 14px; color: var(--muted); }
.stars { color: var(--green-accent); letter-spacing: 2px; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-m); }
.review { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-l) 30px; margin: 0; display: flex; flex-direction: column; }
.review .quote { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--black); margin: 12px 0 var(--space-m); }
.by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--sans); flex: none; }
.by-name { font-weight: 700; color: var(--black); }
.by-src { font-size: 13px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 880px; margin-inline: auto; }
.faq-item { background: var(--mint); border-radius: var(--radius); overflow: hidden; transition: box-shadow .3s ease, background-color .3s ease; }
.faq-item.open { background: var(--white); box-shadow: var(--shadow-md); }
.faq-q {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: 17px; color: var(--green);
  padding: 18px 50px 18px 22px; position: relative;
}
.faq-q::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--green); transition: transform .25s ease; }
.faq-item.open .faq-q::after { content: "\2212"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-item.open .faq-a { max-height: 400px; }
.faq-a-inner { padding: 0 22px 20px; color: var(--muted); font-size: 16px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--green); color: var(--white); text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; top: -30%; right: -10%; width: 420px; height: 420px; background: radial-gradient(circle at center, rgba(58,122,98,0.55), rgba(36,91,71,0) 70%); pointer-events: none; }
.cta-band .wrap { position: relative; }
.cta-band h2 { color: var(--white); }
.cta-band .lede { color: var(--white); opacity: 0.95; margin-inline: auto; }
.cta-band .btn-primary { background: var(--white); color: var(--green); }
.cta-band .btn-primary:hover { background: var(--mint); color: var(--green); }
.cta-phone { display: inline-block; margin-top: var(--space-m); font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3vw, 34px); color: var(--white); text-decoration: none; }
.cta-phone:hover { color: var(--white); opacity: 0.85; }

/* ---------- Page hero (interior) ---------- */
.page-hero { position: relative; background: linear-gradient(160deg, #1d4a3a 0%, var(--green) 55%, #2c6b53 100%); color: var(--white); padding: clamp(72px, 9vw, 128px) 0; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; top: -20%; right: -10%; width: 420px; height: 420px; background: radial-gradient(circle at center, rgba(58,122,98,0.55), rgba(36,91,71,0) 70%); pointer-events: none; z-index: 0; }
.page-hero::after { content: ""; position: absolute; bottom: -30%; left: -10%; width: 360px; height: 360px; background: radial-gradient(circle at center, rgba(58,122,98,0.35), rgba(36,91,71,0) 70%); pointer-events: none; z-index: 0; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); max-width: 22ch; }
.page-hero .lede { color: var(--white); opacity: 0.94; }
/* Hero text rises in on load — same cinematic entrance as the homepage */
@keyframes heroRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.page-hero .crumbs { animation: heroRise .7s var(--ease) .05s both; }
.page-hero .eyebrow { animation: heroRise .7s var(--ease) .16s both; }
.page-hero h1 { animation: heroRise .85s var(--ease) .28s both; }
.page-hero .lede { animation: heroRise .85s var(--ease) .42s both; }

/* Image variant — AI photograph settling under the brand-green wash */
.page-hero--image {
  min-height: clamp(400px, 48vh, 580px);
  display: flex; align-items: center; isolation: isolate;
}
.page-hero--image::before, .page-hero--image::after { display: none; }
.page-hero__media {
  position: absolute; left: 0; right: 0; top: -16%; height: 132%;
  z-index: 0; will-change: transform; overflow: hidden;
}
.page-hero__media img, .page-hero__media picture {
  display: block; width: 100%; height: 100%;
}
.page-hero__media img {
  object-fit: cover; object-position: center;
  transform-origin: 42% 50%; animation: heroKen 3s var(--ease) both;
}
.page-hero__overlay {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(18,44,34,0.90) 0%, rgba(29,74,58,0.74) 40%, rgba(36,91,71,0.40) 72%, rgba(36,91,71,0.24) 100%);
}
.page-hero--image h1 { text-shadow: 0 2px 14px rgba(0,0,0,0.32); }
@media (max-width: 760px) {
  .page-hero--image { min-height: 340px; }
  .page-hero__overlay { background: linear-gradient(180deg, rgba(18,44,34,0.76) 0%, rgba(24,58,45,0.52) 100%); }
}
.crumbs { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-s); opacity: 0.85; }
.crumbs a { color: var(--white); }
.crumbs a:hover { color: var(--white); opacity: 0.8; }

/* ---------- Prose / articles ---------- */
.prose { max-width: 760px; }
.prose h2 { margin-top: var(--space-xl); }
.prose h3 { margin-top: var(--space-l); color: var(--green); }
.prose p, .prose li { color: #2a3343; }
.prose ul, .prose ol { padding-left: var(--space-m); margin: 0 0 var(--space-m); }
.prose li { margin-bottom: var(--space-xs); }
.prose strong { color: var(--black); }
.prose .callout { background: var(--mint); border-left: 4px solid var(--green); border-radius: var(--radius); padding: var(--space-m) var(--space-l); margin: var(--space-l) 0; }
.prose .callout p:last-child { margin-bottom: 0; }
.prose .callout.callout-warn { background: #fbf1e8; border-left-color: #b4541f; }
.prose .callout.callout-warn strong { color: #8d3f15; }
.form-note { font-size: 13px; color: var(--muted); margin-top: var(--space-xs); }

/* ---------- Article editorial toolkit (insights) ---------- */
/* Full-width hero image beneath the page hero, above the article body. */
.post-hero-figure { margin: 0; }
.post-hero-figure img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-md);
  display: block;
}
.post-hero-figure figcaption,
.prose figure.post-figure figcaption {
  margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5;
}
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: var(--space-m) 0 0; font-size: 14px; color: var(--muted); }
.post-meta .byline { font-weight: 600; color: var(--green); }
.post-meta .dot { color: var(--line); }

/* In-body figures. .full breaks slightly wider; .right floats on desktop. */
.prose figure.post-figure { margin: var(--space-l) 0; }
.prose figure.post-figure img {
  width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); display: block;
}
@media (min-width: 880px) {
  .prose figure.post-figure.right { float: right; width: 46%; margin: 6px 0 var(--space-m) var(--space-l); }
}

/* Horizontal bar chart — static, crawlable; bar width set inline per row. */
.chart-fig { margin: var(--space-l) 0; background: var(--mint); border-radius: var(--radius-lg); padding: var(--space-m) var(--space-l) var(--space-l); }
.chart-fig .chart-title { font-weight: 700; color: var(--green); font-size: 18px; margin: 0 0 4px; font-family: var(--sans); }
.chart-fig .chart-sub { font-size: 14px; color: var(--muted); margin: 0 0 var(--space-m); }
.chart { display: grid; gap: 14px; }
.chart-row { display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 14px; align-items: center; }
.chart-label { font-size: 15px; color: #2a3343; font-weight: 500; }
.chart-track { background: rgba(36,91,71,0.10); border-radius: 999px; height: 26px; position: relative; overflow: hidden; }
.chart-bar { height: 100%; background: linear-gradient(90deg, var(--green), var(--green-accent)); border-radius: 999px; display: flex; align-items: center; justify-content: flex-end; min-width: 38px; transition: width 1s var(--ease); }
.chart-bar.alt { background: linear-gradient(90deg, #b4541f, #d4794a); }
.chart-bar.muted { background: linear-gradient(90deg, #7d8a83, #9aa7a0); }
.chart-val { color: var(--white); font-weight: 700; font-size: 13px; padding-right: 10px; white-space: nowrap; }
.chart-note { font-size: 12.5px; color: var(--muted); margin-top: var(--space-m); }
.chart-note a { color: var(--muted); text-decoration: underline; }

/* Stat grid — oversized figures for the punchy numbers in an article. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-s); margin: var(--space-l) 0; }
.stat-card { background: var(--green); color: var(--white); border-radius: var(--radius-lg); padding: var(--space-m); }
.stat-card.ghost { background: var(--mint); color: var(--black); border: 1px solid var(--line); }
.stat-card .stat-num { font-family: var(--sans); font-weight: 700; font-size: clamp(30px, 4.5vw, 42px); line-height: 1; color: var(--white); }
.stat-card.ghost .stat-num { color: var(--green); }
.stat-card .stat-lbl { font-size: 14px; margin-top: 8px; line-height: 1.45; color: rgba(255,255,255,0.92); }
.stat-card.ghost .stat-lbl { color: var(--muted); }

/* Comparison / data table. */
.data-table-wrap { margin: var(--space-l) 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
table.data-table caption { caption-side: top; text-align: left; font-weight: 700; color: var(--green); padding: var(--space-m) var(--space-m) 0; font-size: 17px; }
table.data-table th, table.data-table td { padding: 13px var(--space-m); text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data-table thead th { background: var(--green); color: var(--white); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 0; }
table.data-table tbody tr:nth-child(even) { background: var(--mint); }
table.data-table tbody tr:last-child td { border-bottom: 0; }
table.data-table td:first-child { font-weight: 600; color: var(--black); }

/* Vertical process timeline. */
.timeline { list-style: none; margin: var(--space-l) 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline > li { position: relative; padding: 0 0 var(--space-m) 52px; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline .tl-num { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; z-index: 1; }
.timeline .tl-head { font-weight: 700; color: var(--green); font-size: 18px; margin: 4px 0 4px; }
.timeline .tl-body { color: #2a3343; margin: 0; font-size: 16px; }

/* Key-takeaways summary band. */
.takeaways { background: var(--green); color: var(--white); border-radius: var(--radius-lg); padding: var(--space-l) var(--space-m); margin: var(--space-l) 0; }
.takeaways h3 { color: var(--white); font-size: 20px; margin: 0 0 var(--space-s); }
.takeaways ul { list-style: none; padding: 0; margin: 0; }
.takeaways li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; color: rgba(255,255,255,0.95); font-size: 16px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.takeaways li:last-child { border-bottom: 0; }
.takeaways li::before { content: "\2713"; color: var(--white); font-weight: 700; flex: none; }

/* Pull quote. */
.pull-quote { border-left: 4px solid var(--green-accent); margin: var(--space-l) 0; padding: 4px 0 4px var(--space-m); font-family: var(--serif); font-style: italic; font-size: clamp(22px, 3vw, 28px); line-height: 1.4; color: var(--green); }

/* Related-reading list at the article foot. */
.related-reading { margin: var(--space-xl) 0 0; padding-top: var(--space-l); border-top: 1px solid var(--line); }
.related-reading h3 { color: var(--green); font-size: 19px; }
.related-reading ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.related-reading a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--green); text-decoration: none; }
.related-reading a:hover { text-decoration: underline; }
.related-reading svg { width: 16px; height: 16px; flex: none; }

/* ---------- Layout with sticky aside ---------- */
.layout-aside { display: grid; grid-template-columns: 1fr 320px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
/* Grid items default to min-width:auto, which lets a wide child (e.g. a
   min-width data table) force the column past the viewport on mobile. Allow
   the tracks to shrink so the .data-table-wrap scrolls internally instead. */
.layout-aside > * { min-width: 0; }
.aside-card { background: var(--mint); border-radius: var(--radius-lg); padding: var(--space-l) var(--space-m); box-shadow: var(--shadow-md); position: sticky; top: 100px; }
.aside-card h3 { color: var(--green); font-size: 20px; margin-bottom: 10px; }
.aside-card p { font-size: 15px; color: var(--muted); }
.aside-card .btn { width: 100%; justify-content: center; }

/* ---------- Contact ---------- */
.contact-cols { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); }
/* Let grid tracks shrink below their content's intrinsic width so a field
   (or its placeholder) can't push the column past a narrow viewport. */
.contact-cols > *, .form-grid > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 500; font-size: 15px; color: var(--black); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 16px; padding: 12px 14px;
  border: 1px solid rgba(36,91,71,0.4); border-radius: var(--radius); background: var(--white); color: var(--black);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.field textarea { resize: vertical; min-height: 140px; }
.contact-info { background: var(--green); color: var(--white); border-radius: var(--radius-lg); padding: var(--space-l) var(--space-m); }
.contact-info h3 { color: var(--white); font-size: 21px; }
.contact-info a { color: var(--white); }
.contact-info .ci-row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.contact-info .ci-row:last-child { border-bottom: 0; }
.contact-info svg { width: 20px; height: 20px; color: var(--white); flex: none; margin-top: 3px; }
.map-embed { border: 0; width: 100%; height: 340px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* ---------- Dispute address cards ---------- */
.addr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-s); margin: var(--space-m) 0 var(--space-l); }
.addr-card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-m); box-shadow: var(--shadow-md); }
.addr-card h3 { margin: 0 0 10px; font-size: 18px; color: var(--green); }
.addr-card address { font-style: normal; color: #2a3343; line-height: 1.55; font-size: 15px; }
.addr-card .addr-or { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 8px 0; }
.addr-meta { list-style: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid var(--line); }
.addr-meta li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.addr-meta li:last-child { margin-bottom: 0; }
.addr-meta svg { width: 16px; height: 16px; color: var(--green-accent); flex: none; }
.addr-meta a { color: var(--green); }

/* ---------- Insights post cards ---------- */
.post-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-m); }
.post-card { background: var(--mint); border-radius: var(--radius-lg); padding: var(--space-l) var(--space-m); text-decoration: none; color: var(--black); display: block; transition: transform .3s var(--ease), box-shadow .3s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--black); }
.post-card { overflow: hidden; }
.post-thumb { margin: calc(-1 * var(--space-l)) calc(-1 * var(--space-m)) var(--space-m); aspect-ratio: 16 / 9; overflow: hidden; background: var(--green); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .post-thumb img { transform: scale(1.04); }
.post-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-accent); margin-bottom: 10px; }
.post-card h2 { margin: 0 0 10px; font-size: 27px; line-height: 1.15; color: var(--green); }
.post-card p { color: var(--muted); margin-bottom: var(--space-s); }
.post-card .card-link { color: var(--green); }

/* ---------- Areas served hub ---------- */
.area-region { padding: var(--space-l) 0; border-bottom: 1px solid var(--line-soft); }
.area-region:first-child { padding-top: 0; }
.area-region:last-of-type { border-bottom: 0; }
.area-region h2 { color: var(--green); margin-bottom: 6px; }
.area-blurb { color: var(--muted); max-width: 70ch; margin-bottom: var(--space-m); }
.area-sub { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-accent); margin: var(--space-m) 0 10px; }
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 var(--space-s); }
.chip-list a {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  background: var(--mint); border: 1px solid var(--line); color: var(--green);
  font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s;
}
.chip-list a:hover { background: var(--green); border-color: var(--green); color: var(--white); }

/* ---------- Footer ---------- */
.site-footer { background: var(--green); color: var(--white); padding: var(--space-xl) 0 var(--space-m); }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr; gap: var(--space-l); margin-bottom: var(--space-l); }
.site-footer h3 { color: var(--white); text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; margin-bottom: var(--space-s); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; font-size: 15px; }
.footer-name { display: block; font-family: var(--sans); font-weight: 700; font-size: 19px; margin-bottom: 10px; color: var(--white); }
.footer-blurb { font-size: 15px; color: rgba(255,255,255,0.85); max-width: 38ch; }
.footer-fee { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--white); }
.footer-contact address { font-style: normal; line-height: 1.7; font-size: 15px; color: rgba(255,255,255,0.9); }
.footer-phone { font-weight: 700; }
.footer-hours { color: rgba(255,255,255,0.75); }
.footer-social { display: flex; gap: 12px; margin-top: var(--space-m); padding: 0; list-style: none; }
.footer-social li { margin: 0; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.12); transition: background .25s var(--ease), transform .25s var(--ease); }
.footer-social a:hover { background: rgba(255,255,255,0.28); transform: translateY(-2px); text-decoration: none; }
.footer-social svg { width: 18px; height: 18px; }
/* Credentials / bar-admissions strip — adds the heft of an established firm. */
.footer-creds { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-l); padding: var(--space-m) 0; margin-bottom: var(--space-s); border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); }
.footer-cred { font-size: 13.5px; color: rgba(255,255,255,0.8); line-height: 1.55; }
.footer-cred-label { display: block; font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin-bottom: 5px; }

.footer-legal { padding-top: var(--space-m); font-size: 13px; color: rgba(255,255,255,0.75); }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0 0 var(--space-s); padding: 0; }
.footer-legal-links li { margin: 0; font-size: 13.5px; }
.footer-legal-links a { color: rgba(255,255,255,0.9); }
.footer-legal .disclaimer { max-width: none; margin-top: 8px; }

/* ---------- Legal pages (Privacy, Terms, Disclaimer, Accessibility) ---------- */
.legal-page { max-width: 760px; }
.legal-page .legal-updated { font-size: 13.5px; color: var(--muted); letter-spacing: 0.02em; margin-bottom: var(--space-m); padding-bottom: var(--space-m); border-bottom: 1px solid var(--line); }
.legal-page h2 { font-size: clamp(20px, 2.4vw, 25px); margin-top: var(--space-l); }
.legal-page address.legal-contact { font-style: normal; line-height: 1.7; background: var(--mint); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-m); margin: var(--space-m) 0; }

/* ---------- HTML site map ---------- */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); align-items: start; }
.sitemap-col h2 { font-size: 19px; color: var(--green); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--space-s); padding-bottom: 8px; border-bottom: 2px solid var(--green); }
.sitemap-col h2:not(:first-child) { margin-top: var(--space-l); }
.sitemap-col h3 { font-size: 15px; color: var(--black); margin: var(--space-m) 0 6px; }
.sitemap-col ul { list-style: none; margin: 0 0 var(--space-s); padding: 0; }
.sitemap-col li { margin-bottom: 7px; font-size: 15px; }
.sitemap-col a { color: #2a3343; text-decoration: none; }
.sitemap-col a:hover { color: var(--green); text-decoration: underline; }
.sitemap-areas-list { columns: 2; column-gap: var(--space-l); }
.sitemap-areas-list li { break-inside: avoid; }

/* ---------- Scroll reveal ---------- */
/* Hiding is gated behind html.js (set by main.js): if the script ever fails
   to load or run, every section stays fully visible instead of blank. */
.js .reveal, .js [data-reveal] {
  opacity: 0; transform: translate3d(0, 56px, 0) scale(0.965);
  transition: opacity .9s var(--ease), transform 1.05s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.in, .js [data-reveal].is-visible { opacity: 1; transform: none; }
@media print { .reveal, [data-reveal] { opacity: 1 !important; transform: none !important; } }
[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }
[data-reveal-delay="4"] { transition-delay: 360ms; }
[data-reveal-delay="5"] { transition-delay: 450ms; }
/* Staggered children inside a revealed grid feel more alive than one block. */
.cards .card.reveal:nth-child(2) { transition-delay: 90ms; }
.cards .card.reveal:nth-child(3) { transition-delay: 180ms; }
.cards .card.reveal:nth-child(4) { transition-delay: 270ms; }
.steps .step.reveal:nth-child(2) { transition-delay: 110ms; }
.steps .step.reveal:nth-child(3) { transition-delay: 220ms; }
.review-grid .review.reveal:nth-child(2) { transition-delay: 90ms; }
.review-grid .review.reveal:nth-child(3) { transition-delay: 180ms; }
.review-grid .review.reveal:nth-child(4) { transition-delay: 270ms; }
/* NOTE: the cinematic hero zoom, scroll parallax, and reveals intentionally
   play for all visitors (including prefers-reduced-motion), by request. The
   motion is deliberately gentle — a slow one-time zoom and a shallow parallax. */

/* ---------- Free tools (calculators & checkers) ---------- */
.tool-hero .lede { color: rgba(255,255,255,0.88); }
.tool-section { padding-top: var(--space-l); }
.tool-shell {
  display: grid; grid-template-columns: minmax(320px, 420px) 1fr;
  background: var(--white);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.tool-form {
  background: var(--mint); padding: var(--space-l) var(--space-m) var(--space-m);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: var(--space-s);
}
.tool-form-title { font-size: 22px; margin-bottom: 4px; }
.tool-form .field input, .tool-form .field select { background: var(--white); }
.field-hint { font-size: 13px; color: var(--muted); margin: 2px 0 0; line-height: 1.45; }
.money-input { position: relative; }
.money-input > span {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 500; pointer-events: none;
}
.money-input input { width: 100%; padding-left: 30px; }
.tool-basis { font-size: 12.5px; color: var(--muted); margin: auto 0 0; line-height: 1.5; }

.tool-result {
  padding: var(--space-l) var(--space-l) var(--space-m);
  display: flex; flex-direction: column;
  position: sticky; top: 92px; align-self: start;
}
.tool-result-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; color: var(--muted); gap: var(--space-s);
  padding: var(--space-l) var(--space-m); min-height: 300px;
}
.tool-result-empty svg { width: 44px; height: 44px; color: var(--green-accent); opacity: .5; animation: emptyPulse 2.6s ease-in-out infinite; }
.tool-result-empty p { max-width: 38ch; margin: 0; }
@keyframes emptyPulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .65; transform: scale(1.06); } }

/* Submit button at the foot of every tool form */
.tool-submit { margin-top: var(--space-s); }
.tool-submit .btn { width: 100%; justify-content: center; font-size: 16px; padding: 16px 24px; }
.tool-error {
  margin: 10px 0 0; font-size: 14px; font-weight: 500; color: #9C362E;
  background: rgba(156,54,46,.08); border-left: 3px solid #9C362E;
  border-radius: var(--radius); padding: 10px 14px;
}

/* "Analyzing" state shown while a tool thinks */
.tool-thinking {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 18px; min-height: 300px; padding: var(--space-l) var(--space-m);
}
.think-ring {
  width: 58px; height: 58px; border-radius: 50%;
  border: 3px solid var(--line-soft); border-top-color: var(--green);
  animation: thinkSpin .85s linear infinite;
}
@keyframes thinkSpin { to { transform: rotate(360deg); } }
.think-msg {
  font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--green);
  margin: 0; min-height: 2.6em; max-width: 34ch; line-height: 1.3;
  transition: opacity .3s ease;
}
.think-msg.swap { opacity: 0; }
.think-bar {
  width: min(320px, 80%); height: 6px; border-radius: 999px;
  background: var(--line-soft); overflow: hidden;
}
.think-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--green-accent));
}
.think-note { font-size: 13px; color: var(--muted); margin: 0; }

/* Result entrance */
.tool-result-body { animation: resultIn .65s var(--ease) both; }
@keyframes resultIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.tool-result-body .verdict-badge { animation: badgePop .55s var(--ease) .15s both; }
@keyframes badgePop {
  0% { opacity: 0; transform: scale(.85); }
  70% { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
.tool-result-label {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-accent); margin-bottom: 6px;
}
.tool-result-big {
  font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 6vw, 64px);
  line-height: 1; color: var(--risk, #9C362E); margin-bottom: var(--space-m);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.tool-result-big .tool-result-per {
  font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--muted);
}
.calc-bar {
  display: flex; height: 30px; border-radius: 999px; overflow: hidden;
  background: #E7EEEA; box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
.calc-bar-seg { transition: width .45s var(--ease); min-width: 0; }
.seg-deduct { background: #C9D6CF; }
.seg-safe { background: var(--green-accent); }
.seg-risk { background: #9C362E; }
.calc-legend { list-style: none; margin: 12px 0 var(--space-m); padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.calc-legend li { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.calc-legend strong { color: var(--black); font-weight: 700; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.dot-deduct { background: #C9D6CF; }
.dot-safe { background: var(--green-accent); }
.dot-risk { background: #9C362E; }

.calc-detail { margin: 0 0 var(--space-m); border-top: 1px solid var(--line-soft); }
.calc-detail > div {
  display: flex; justify-content: space-between; gap: var(--space-m); align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px;
}
.calc-detail dt { color: var(--muted); margin: 0; }
.calc-detail dd { margin: 0; font-weight: 700; text-align: right; }
.calc-detail-key { background: var(--mint); margin: 0 calc(-1 * var(--space-s)); padding-inline: var(--space-s) !important; border-radius: var(--radius); }
.calc-detail-key dt { color: var(--black); }
.calc-detail-key dd { color: var(--green); }

.tool-flag {
  display: flex; gap: 10px; align-items: flex-start; background: var(--mint);
  border-left: 3px solid var(--green); border-radius: var(--radius);
  padding: 14px 16px; font-size: 15px; margin-bottom: var(--space-m);
}
.tool-flag svg { width: 22px; height: 22px; flex: none; color: var(--green); margin-top: 2px; }

.tool-actions { display: flex; gap: var(--space-s); flex-wrap: wrap; margin-top: var(--space-s); }
.tool-actions .btn { flex: none; }
.tool-actions .btn:disabled { opacity: .55; cursor: wait; }

.tool-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px);
  background: var(--green); color: var(--white); font-weight: 500; font-size: 15px;
  padding: 12px 22px; border-radius: 999px; box-shadow: var(--shadow-lg);
  opacity: 0; transition: opacity .25s ease, transform .25s var(--ease); z-index: 90;
}
.tool-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Court directory hub */
.court-region-head {
  font-size: clamp(22px, 2.5vw, 28px);
  margin: var(--space-l) 0 var(--space-s);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
}

/* Verdict styles (statute-of-limitations checker) */
.tool-result-big.is-safe { color: var(--green); }
.verdict-badge {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase; border-radius: 999px;
  padding: 8px 18px; margin-bottom: var(--space-s);
}
.verdict-badge svg { width: 18px; height: 18px; }
.verdict-expired { background: rgba(58,122,98,.12); color: var(--green); }
.verdict-open { background: rgba(156,54,46,.1); color: #9C362E; }
.verdict-gray { background: rgba(26,26,26,.07); color: var(--ink); }

/* Conduct checklist (FDCPA checker) */
.tool-checks { display: flex; flex-direction: column; gap: 8px; }
.tool-checks-title {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); margin: var(--space-s) 0 2px;
  display: flex; align-items: baseline; gap: 8px;
}
.tool-checks-title span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); font-size: 12.5px; }
.tool-checks .check {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 10px 12px; font-size: 14px; line-height: 1.45; transition: border-color .15s ease, background .15s ease;
}
.tool-checks .check:hover { border-color: var(--green-accent); }
.tool-checks .check input {
  flex: none; width: 17px; height: 17px; margin-top: 2px;
  accent-color: var(--green);
}
.tool-checks .check:has(input:checked) { background: rgba(58,122,98,.08); border-color: var(--green-accent); }

@media (max-width: 980px) {
  .tool-shell { grid-template-columns: 1fr; }
  .tool-form { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .tool-result { min-height: 0; padding: var(--space-m); position: static; }
  .tool-result-empty, .tool-thinking { min-height: 200px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: var(--space-l); }
  .layout-aside { grid-template-columns: 1fr; }
  .aside-card { position: static; }
  .contact-cols { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-l); }
  .footer-creds { grid-template-columns: 1fr; gap: var(--space-m); }
  .sitemap-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .chart-row { grid-template-columns: 1fr; gap: 4px; }
  .prose figure.post-figure.right { float: none; width: 100%; margin: var(--space-l) 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .sitemap-grid { grid-template-columns: 1fr; }
  .reviews-head { align-items: flex-start; }
  .form-grid { grid-template-columns: 1fr; }
}

/* The hamburger drawer engages all the way up to the 1280px centered-nav
   threshold. Between ~761–1279px the full 7-item horizontal nav + phone button
   needs >1000px and overflowed the viewport, so the drawer takes over instead.
   These nav rules are intentionally split out from the 760px block above (which
   keeps the footer/sitemap/form/etc. layout collapses small-screen-only). */
@media (max-width: 1279px) {
  .nav-toggle { display: inline-flex; }
  /* Dimmed page scrim behind the open drawer */
  .main-nav::after {
    content: ""; position: fixed; inset: 0; z-index: 65;
    background: rgba(14, 32, 25, 0.5); opacity: 0; visibility: hidden;
    transition: opacity .35s ease, visibility .35s; pointer-events: none;
  }
  .main-nav.drawer-open::after { opacity: 1; visibility: visible; pointer-events: auto; }
  .main-nav .nav-list {
    display: flex; position: fixed; inset: 0 0 0 auto; width: min(84vw, 360px); z-index: 70;
    flex-direction: column; align-items: stretch; gap: 2px; background: var(--green);
    padding: 78px 18px 28px; box-shadow: var(--shadow-lg); overflow-y: auto;
    transform: translateX(105%); visibility: hidden;
    transition: transform .4s var(--ease), visibility .4s;
  }
  .main-nav .nav-list.open { transform: none; visibility: visible; }
  .nav-list > li > a,
  .nav-list > li > .nav-trigger { display: block; padding: 14px 12px; font-size: 17px; }

  /* Mega panels collapse to inline accordions inside the mobile drawer */
  .nav-has-mega { position: static; }
  .nav-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    border-radius: 4px;
  }
  .nav-mega {
    position: static; width: auto; max-width: none;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    background: transparent; color: var(--white); border: 0; box-shadow: none;
    border-radius: 0; padding: 2px 0 10px 10px; display: none;
  }
  .nav-mega--single { width: auto; }
  /* The desktop open-state selectors outrank `.nav-mega` and re-apply the
     translateX(-50%) slide-in, shoving the accordion half out of the drawer.
     Re-state them here so expanded panels stay put inside the drawer. */
  .nav-has-mega:hover > .nav-mega,
  .nav-has-mega:focus-within > .nav-mega,
  .nav-trigger[aria-expanded="true"] + .nav-mega,
  .nav-has-mega--narrow:hover > .nav-mega,
  .nav-has-mega--narrow:focus-within > .nav-mega,
  .nav-has-mega--narrow .nav-trigger[aria-expanded="true"] + .nav-mega { transform: none; }
  .nav-has-mega.open > .nav-mega { display: block; }
  .nav-mega::before { display: none; }
  .nav-mega__grid { flex-direction: column; gap: 14px; }
  .nav-mega__col { min-width: 0; }
  .nav-mega__eyebrow { color: rgba(255,255,255,0.6); }
  .nav-mega__item { color: var(--white); padding: 11px 8px; }
  .nav-mega__item:hover { background: rgba(255,255,255,0.1); color: var(--white); }
  .nav-mega__icon { width: 32px; height: 32px; background: rgba(255,255,255,0.12); }
  .nav-mega__title { color: var(--white); }
  .nav-mega__desc { color: rgba(255,255,255,0.7); }
  .nav-mega__all { color: var(--white); border-top-color: rgba(255,255,255,0.18); margin-left: 8px; }
  .nav-mega__all:hover { color: var(--white); }
  .nav-has-mega.open > .nav-trigger .nav-caret { transform: rotate(180deg); }

  .nav-cta-li { margin: 8px 0 0; }
  .btn-phone { width: 100%; justify-content: center; }
}

/* ============================================================
   Motion pack + new components (2026-06-11)
   ============================================================ */

/* Section headings draw a short rule under themselves as they reveal. */
.section-head h2 { position: relative; padding-bottom: 16px; }
.section-head h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px;
  background: linear-gradient(90deg, var(--green), var(--green-accent));
  border-radius: 2px; transform: scaleX(0); transform-origin: left center;
  transition: transform .9s var(--ease) .35s;
}
.section-head.center h2::after { left: 50%; margin-left: -32px; transform-origin: center; }
.js .section-head.reveal.in h2::after,
.js .reveal.in .section-head h2::after { transform: scaleX(1); }
html:not(.js) .section-head h2::after { transform: scaleX(1); }

/* Interior page heroes: the radial orbs drift slowly. */
.page-hero::before { animation: orbDrift 16s ease-in-out infinite alternate; }
.page-hero::after { animation: orbDrift 19s ease-in-out infinite alternate-reverse; }
@keyframes orbDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-60px, 40px, 0) scale(1.18); }
}
.cta-band::before { animation: orbDrift 18s ease-in-out infinite alternate; }

/* Primary buttons: light sheen sweeps across on hover. */
.btn { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg); transition: left .55s var(--ease); pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }
.btn-primary, .btn-ghost { transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease), box-shadow .25s ease; }
.btn-primary:hover, .btn-ghost:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* Cards: slightly deeper lift. */
.card:hover { transform: translateY(-6px); }
.post-card:hover { transform: translateY(-6px); }

/* Directional reveal variants. */
.js .reveal-left { opacity: 0; transform: translate3d(-44px, 0, 0); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js .reveal-right { opacity: 0; transform: translate3d(44px, 0, 0); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js .reveal-left.in, .js .reveal-right.in { opacity: 1; transform: none; }

/* ---------- KPI band (homepage) ---------- */
.kpi-band { background: var(--green); color: var(--white); position: relative; overflow: hidden; }
.kpi-band::before {
  content: ""; position: absolute; top: -40%; left: -8%; width: 480px; height: 480px;
  background: radial-gradient(circle at center, rgba(58,122,98,0.6), rgba(36,91,71,0) 70%);
  pointer-events: none; animation: orbDrift 17s ease-in-out infinite alternate;
}
.kpi-band .wrap { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-l); text-align: center; }
.kpi { padding: 6px 0; }
.kpi-num {
  font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 5.4vw, 72px);
  line-height: 1; color: var(--white); display: block; font-variant-numeric: tabular-nums;
}
.kpi-lbl { display: block; margin-top: 10px; font-size: 14.5px; letter-spacing: .04em; color: rgba(255,255,255,0.85); }
@media (max-width: 900px) { .kpi-band .wrap { grid-template-columns: 1fr 1fr; gap: var(--space-m); } }

/* ---------- Free-tools strip ---------- */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-m); }
.tool-card {
  position: relative; display: block; text-decoration: none; color: var(--white);
  background: var(--green); border-radius: var(--radius-lg); padding: 34px 30px 30px;
  overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.tool-card::before {
  content: ""; position: absolute; top: -55%; right: -25%; width: 300px; height: 300px; z-index: -1;
  background: radial-gradient(circle at center, rgba(58,122,98,0.85), rgba(36,91,71,0) 70%);
  transition: transform .5s var(--ease);
}
.tool-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); color: var(--white); }
.tool-card:hover::before { transform: scale(1.4); }
.tool-card-icon {
  width: 54px; height: 54px; border-radius: 12px; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-s);
  transition: background-color .3s ease, transform .35s var(--ease);
}
.tool-card:hover .tool-card-icon { background: rgba(255,255,255,0.22); transform: rotate(-6deg) scale(1.06); }
.tool-card-icon svg { width: 26px; height: 26px; }
.tool-card h3 { color: var(--white); margin: 0 0 8px; font-size: 22px; }
.tool-card p { color: rgba(255,255,255,0.88); font-size: 15.5px; margin-bottom: var(--space-s); }
.tool-card .card-link { color: var(--white); }
.tool-card .card-link svg { transition: transform .25s var(--ease); }
.tool-card:hover .card-link svg { transform: translateX(4px); }
.tool-card--ghost { background: var(--mint); color: var(--black); border: 1px solid var(--line); }
.tool-card--ghost::before { background: radial-gradient(circle at center, rgba(58,122,98,0.18), rgba(36,91,71,0) 70%); }
.tool-card--ghost:hover { color: var(--black); }
.tool-card--ghost .tool-card-icon { background: var(--green); border-color: var(--green); }
.tool-card--ghost h3 { color: var(--green); }
.tool-card--ghost p { color: var(--muted); }
.tool-card--ghost .card-link { color: var(--green); }

/* ---------- Insights search ---------- */
.insights-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center;
  margin-bottom: var(--space-l);
}
.insights-search { position: relative; flex: 1 1 320px; max-width: 480px; }
.insights-search svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--green-accent); pointer-events: none;
}
.insights-search input {
  width: 100%; font-family: var(--sans); font-size: 16px;
  padding: 14px 18px 14px 46px; border: 1.5px solid var(--line);
  border-radius: 999px; background: var(--white); color: var(--black);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.insights-search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(36,91,71,0.10); }
.insights-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.insights-tags button {
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--white); color: var(--green);
  transition: background-color .15s, color .15s, border-color .15s, transform .15s var(--ease);
}
.insights-tags button:hover { border-color: var(--green); transform: translateY(-1px); }
.insights-tags button.active { background: var(--green); border-color: var(--green); color: var(--white); }
.insights-count { font-size: 14px; color: var(--muted); flex-basis: 100%; margin: 0; }
.post-card.filtered-out { display: none; }
.insights-none {
  text-align: center; padding: var(--space-xl) var(--space-m); color: var(--muted);
  background: var(--mint); border: 1px dashed var(--line); border-radius: var(--radius-lg);
}
.insights-none strong { color: var(--green); }

/* Request-an-article band */
.request-article {
  margin-top: var(--space-xl); background: var(--green); color: var(--white);
  border-radius: var(--radius-lg); padding: var(--space-l) var(--space-l);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-l); align-items: center;
  position: relative; overflow: hidden;
}
.request-article::before {
  content: ""; position: absolute; top: -50%; right: -10%; width: 380px; height: 380px;
  background: radial-gradient(circle at center, rgba(58,122,98,0.6), rgba(36,91,71,0) 70%);
  pointer-events: none; animation: orbDrift 15s ease-in-out infinite alternate;
}
.request-article > * { position: relative; }
.request-article h2 { color: var(--white); font-size: clamp(24px, 3vw, 32px); margin-bottom: 8px; }
.request-article p { color: rgba(255,255,255,0.88); margin: 0; font-size: 16px; }
.request-form { display: flex; gap: 10px; }
.request-form input {
  flex: 1; font-family: var(--sans); font-size: 16px; padding: 14px 18px;
  border: 1.5px solid rgba(255,255,255,0.35); border-radius: var(--radius);
  background: rgba(255,255,255,0.10); color: var(--white);
}
.request-form input::placeholder { color: rgba(255,255,255,0.65); }
.request-form input:focus { outline: 2px solid var(--white); outline-offset: 1px; }
.request-form .btn { background: var(--white); color: var(--green); flex: none; }
.request-form .btn:hover { background: var(--mint); color: var(--green); }
@media (max-width: 860px) {
  .request-article { grid-template-columns: 1fr; }
  .request-form { flex-direction: column; }
}

/* ---------- Footer: areas served band ---------- */
.footer-areas { padding: var(--space-m) 0 var(--space-s); border-top: 1px solid rgba(255,255,255,0.2); margin-bottom: var(--space-s); }
.footer-areas h3 { color: var(--white); text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; margin-bottom: 12px; }
.footer-areas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; }
.footer-areas li { margin: 0; font-size: 14px; color: rgba(255,255,255,0.45); display: inline-flex; align-items: center; }
.footer-areas li:not(:last-child)::after { content: "\00b7"; margin: 0 10px; }
.footer-areas a { color: rgba(255,255,255,0.85); }
.footer-areas a:hover { color: var(--white); }
.footer-areas .footer-areas-all { font-weight: 700; color: var(--white); }

/* =====================================================================
   2026-06-17 punch-list: sticky call, mid/end CTAs, search, mobile menu
   ===================================================================== */

/* ---------- Sticky mobile click-to-call bar ---------- */
.sticky-call { display: none; }
@media (max-width: 760px) {
  .sticky-call {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    background: var(--green); color: var(--white); text-decoration: none;
    padding: 13px 16px; font-weight: 700; font-size: 16px; line-height: 1.1;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.18);
  }
  .sticky-call:hover, .sticky-call:focus { color: var(--white); background: var(--green-accent); }
  .sticky-call svg { flex: none; }
  .sticky-call .sticky-call__num { font-weight: 800; }
  body { padding-bottom: 56px; }      /* keep footer clear of the fixed bar */
}
@media (max-width: 380px) { .sticky-call .sticky-call__num { display: none; } }

/* ---------- Mid-content inline CTA ---------- */
.inline-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-m); background: var(--mint);
  border: 1px solid var(--line); border-left: 4px solid var(--green);
  border-radius: var(--radius); padding: var(--space-m) var(--space-l);
  margin: var(--space-l) 0;
}
.inline-cta__title { font-family: var(--serif); font-size: 22px; color: var(--green); margin: 0 0 4px; line-height: 1.15; }
.inline-cta__text { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 48ch; }
.inline-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.prose .inline-cta p { margin: 0; }
.prose .inline-cta .inline-cta__title { margin: 0 0 4px; }
@media (max-width: 620px) {
  .inline-cta { padding: var(--space-m); }
  .inline-cta__actions { width: 100%; }
  .inline-cta__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- End CTA band extras ---------- */
.cta-band .cta-actions { justify-content: center; margin-top: var(--space-m); }
.cta-sub { margin: var(--space-m) 0 0; font-size: 14.5px; color: rgba(255,255,255,0.85); }
.cta-sub a { color: var(--white); text-underline-offset: 3px; }
.cta-sub a:hover { color: var(--mint); }

/* ---------- Aside CTA extra link ---------- */
.aside-links { margin: 12px 0 0; font-size: 14px; }
.aside-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 600; text-decoration: none; }
.aside-links a:hover { color: var(--green-accent); }
.aside-links svg { width: 14px; height: 14px; }

/* ---------- Search boxes (Useful Terms + Resources) ---------- */
.term-search { position: relative; margin: 0 0 1.4rem; }
.term-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.term-search input { width: 100%; padding: .8rem 1rem .8rem 2.6rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; font-size: 1rem; background: var(--white); }
.term-search input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(36,91,71,.12); }
.glossary-term { scroll-margin-top: 6rem; }
.term-none { padding: 1.2rem 1rem; color: var(--muted); }

/* ---------- Drawer menu: flatten the dropdowns to direct links ----------
   Matches the 1279px drawer breakpoint above so the flattening holds across
   the whole 761–1279px range, not just true mobile widths. */
@media (max-width: 1279px) {
  .main-nav .nav-mega { display: none !important; }
  .nav-caret { display: none; }
  .nav-list > li > a,
  .nav-list > li > .nav-trigger { border-bottom: 1px solid rgba(255,255,255,0.12); }
  .nav-cta-li .btn-phone { margin: 16px 12px 6px; width: calc(100% - 24px); justify-content: center; }
}