/* ===================================================================
   Ahmad & Associates — "Quiet Authority"
   Static marketing site. No frameworks. Mobile-first.
   =================================================================== */

:root {
  /* ------------------------------------------------------------------
     Color system — "Lighter Evergreen" direction (July 2026)
     Aligned to the Ahmad & Associates brand guide. The palette moves the
     site off a predominantly dark-green surface toward mostly linen/white
     with evergreen used as a STRUCTURED accent (headings, buttons, footer).
     Brand-guide reference:
       Signature Evergreen #134215 · Emerald Pine #2C6B3F · Soft Sage #C8D8C6
       Mist Green #EEF5EF · Linen #F8F7F3 · Stone #DCD9D2 · Slate #6B6F6A
       Graphite #2B2F2C · Champagne Gold #C8A45A · Steel Blue #5E7F99
     ------------------------------------------------------------------ */
  /* Brand-guide named tokens */
  --evergreen:   #134215;   /* Signature Evergreen — primary brand green */
  --emerald-pine:#2C6B3F;   /* Emerald Pine — supporting green */
  --soft-sage:   #C8D8C6;   /* Soft Sage — supporting light green */
  --mist-green:  #EEF5EF;   /* Mist Green — tinted surface */
  --linen:       #F8F7F3;   /* Linen — primary warm background */
  --stone:       #DCD9D2;   /* Stone — neutral borders/dividers */
  --slate-brand: #6B6F6A;   /* Slate — muted text */
  --graphite:    #2B2F2C;   /* Graphite — deep neutral / footer */
  --champagne:   #C8A45A;   /* Champagne Gold — accent */
  --steel-blue:  #5E7F99;   /* Steel Blue — secondary accent */

  /* Semantic roles (mapped onto the lighter direction) */
  --teal:        #134215;   /* primary / structural — Signature Evergreen */
  --teal-deep:   #0E3210;   /* darker evergreen for hover/press */
  --gold:        #C8A45A;   /* accent — Champagne Gold */
  --ivory:       #F8F7F3;   /* Linen — primary warm background */
  --near-white:  #FFFFFF;   /* clean white surface */
  --mist:        #EEF5EF;   /* Mist Green tinted surface */
  --ink:         #232725;   /* body text (near-graphite) */
  --slate:       #5F6560;   /* muted text */
  --footer-bg:   #10240F;   /* deep evergreen footer */
  --line-teal:   rgba(19, 66, 21, 0.16);
  --line-light:  rgba(19, 66, 21, 0.09);
  --on-teal:     #F8F7F3;
  --on-teal-mut: rgba(248, 247, 243, 0.78);

  /* Type — Cormorant Garamond headings + Inter body (brand typography) */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing */
  --maxw: 1180px;
  --maxw-narrow: 760px;
  --pad-x: clamp(20px, 5vw, 56px);
  --sec-y: clamp(56px, 8vw, 116px);

  --radius: 3px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
html { overflow-x: hidden; }
/* Long words, URLs, large numerals, and headings never force a horizontal scroll */
h1, h2, h3, h4, p, a, li, blockquote, figcaption { overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------- Focus ---------- */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--teal); color: var(--ivory);
  padding: 10px 18px; z-index: 200; border-radius: var(--radius);
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--sec-y); }
.section--ivory     { background: var(--ivory); }
.section--white     { background: var(--near-white); }
.section--teal      { background: var(--teal); color: var(--on-teal); }
.section--teal *    { border-color: rgba(246,243,236,.16); }

/* Editorial label: small left-margin marker before a heading */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--slate);
  display: inline-block;
  margin-bottom: 18px;
}
.section--teal .eyebrow { color: rgba(246,243,236,.62); }
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px; height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 10px;
  position: relative; top: -2px;
}

/* ---------- Typography ---------- */
/* Cormorant Garamond reads light at display sizes — use 600 for headings so
   they hold weight against the lighter surfaces. */
h1, h2, h3, h4 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 600; line-height: 1.12; letter-spacing: -0.005em; }
h2 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 22px; }
h3 { font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 12px; }
h4 { font-size: 20px; margin-bottom: 8px; }
p { max-width: 68ch; }
.lead { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.55; color: var(--ink); }
.muted { color: var(--slate); }
.section--teal .muted { color: var(--on-teal-mut); }
strong { font-weight: 600; }
.prose p + p { margin-top: 18px; }
.prose h3 { margin-top: 40px; }
.prose ul.bullets { margin-top: 16px; display: grid; gap: 10px; }
.prose ul.bullets li { position: relative; padding-left: 22px; max-width: 66ch; }
.prose ul.bullets li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 7px; height: 7px; background: var(--gold); border-radius: 50%;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  padding: 14px 26px; min-height: 48px;
  border-radius: var(--radius);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  border: 1.5px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--teal); color: var(--ivory); }
.btn--primary:hover { background: var(--teal-deep); }
.btn--ghost { background: transparent; color: var(--teal); border-color: var(--line-teal); }
.btn--ghost:hover { border-color: var(--teal); }
/* Make a Payment is a secondary/utility action — quiet outline, never competes with the primary CTA */
.btn--payment { background: transparent; color: var(--teal); border-color: var(--line-teal); font-weight: 600; box-shadow: none; }
.btn--payment:hover { background: rgba(22,54,42,.05); border-color: var(--teal); color: var(--teal); }
/* On dark green backgrounds (e.g. footer/hero/CTA), keep the payment link legible but subdued */
.hero .btn--payment, .section--teal .btn--payment, .cta-block .btn--payment, .site-footer .btn--payment {
  background: transparent; color: var(--ivory); border-color: rgba(246,243,236,.40);
}
.hero .btn--payment:hover, .section--teal .btn--payment:hover, .cta-block .btn--payment:hover, .site-footer .btn--payment:hover {
  background: rgba(246,243,236,.08); border-color: var(--ivory); color: var(--ivory);
}
/* On teal backgrounds (teal sections and the closing CTA block) the primary
   button inverts to ivory-on-green. The homepage hero is now LIGHT, so it is
   intentionally excluded here and uses standard evergreen buttons. */
.section--teal .btn--primary, .cta-block .btn--primary { background: var(--ivory); color: var(--teal); border-color: var(--ivory); }
.section--teal .btn--primary:hover, .cta-block .btn--primary:hover { background: #fff; }
.section--teal .btn--ghost, .cta-block .btn--ghost { color: var(--ivory); border-color: rgba(246,243,236,.45); }
.section--teal .btn--ghost:hover, .cta-block .btn--ghost:hover { border-color: var(--ivory); }
.page-hero .btn--primary { background: var(--gold); color: #fff; border-color: var(--gold); }
.page-hero .btn--primary:hover { background: #a5741f; border-color: #a5741f; color: #fff; }
.aside-box .btn--primary,
.mega-feature .btn--primary { color: #fff; }
/* Primary CTA on the light hero — solid evergreen (matches approved draft:
   dark-green "Schedule Intake" button on a light surface). */
.btn--gold { background: var(--evergreen); color: #fff; border-color: var(--evergreen); box-shadow: 0 10px 26px rgba(19,66,21,.20); }
.btn--gold:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
/* Outline phone button on the light hero — evergreen text + hairline border */
.btn--ghost-phone { background: #fff; color: var(--evergreen); border-color: var(--line-teal); }
.btn--ghost-phone:hover { border-color: var(--evergreen); background: var(--mist); }
.btn--ghost-phone svg { flex-shrink: 0; }
/* Schedule CTA label swap: full label on desktop, compact label on mobile */
.btn--gold .btn-label-short { display: none; }
.btn--gold .btn-label-full { display: inline; }

/* ===================================================================
   HEADER
   =================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 243, 236, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid var(--line-teal);
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(26,34,36,.07); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand svg { width: 34px; height: 34px; }
.brand-name {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: .01em;
  color: var(--teal);
  line-height: 1.02;
}
.brand-name span,
.brand-name small {
  display: block;
  font-family: var(--sans);
  text-transform: uppercase;
  font-weight: 600;
}
.brand-name span {
  font-size: 9.6px;
  letter-spacing: .15em;
  color: var(--ink);
  margin-top: 2px;
}
.brand-name small {
  font-size: 8.6px;
  letter-spacing: .18em;
  color: var(--slate);
  margin-top: 3px;
}

.nav-desktop { display: none; }
.nav-desktop ul { display: flex; align-items: center; gap: clamp(16px, 1.65vw, 26px); }
.nav-desktop a { font-size: 15px; font-weight: 500; color: var(--ink); position: relative; padding: 4px 0; white-space: nowrap; }
.nav-desktop a:hover { color: var(--teal); }
.nav-desktop a.is-active { color: var(--teal); }
.nav-desktop a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gold);
}
.header-cta { display: none; align-items: center; gap: 10px; flex-shrink: 0; }
.header-phone { font-weight: 600; font-size: 15px; color: var(--teal); white-space: nowrap; }
.header-cta .btn { padding: 10px 12px; min-height: 42px; font-size: 13px; }

/* Mobile-only inline phone in header (matches screenshot) */
.header-phone-mobile {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 14px; color: var(--teal);
  white-space: nowrap; margin-left: auto;
}
.header-phone-mobile svg { color: var(--gold); }
@media (min-width: 1000px) { .header-phone-mobile { display: none; } }
@media (max-width: 380px) { .header-phone-mobile span { display: none; } }

.nav-toggle {
  display: inline-grid;
  grid-template-columns: auto 22px;
  grid-template-rows: repeat(3, 2px);
  align-items: center;
  column-gap: 8px;
  row-gap: 5px;
  padding: 9px 11px;
  margin-right: 0;
  min-height: 38px;
  border: 1px solid var(--line-teal);
  border-radius: 999px;
  background: rgba(248, 247, 243, .78);
  color: var(--teal);
  box-shadow: 0 8px 22px rgba(26, 61, 71, .06);
}
.nav-toggle::before {
  content: "Menu";
  grid-column: 1;
  grid-row: 1 / 4;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}
html[lang="es"] .nav-toggle::before { content: "Menú"; }
.nav-toggle span {
  grid-column: 2;
  width: 22px; height: 2px; background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hamburger sits above the open drawer so it can act as a close affordance */
.nav-open .nav-toggle { position: relative; z-index: 130; }
.nav-open .nav-toggle {
  color: var(--ivory);
  border-color: rgba(248, 247, 243, .28);
  background: rgba(248, 247, 243, .08);
}

/* Scrim behind the mobile drawer */
.nav-scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(17, 21, 24, 0.55);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.nav-open .nav-scrim { opacity: 1; visibility: visible; }

/* Mobile drawer overlay — solid panel, fully above header + CTA bar */
.nav-overlay {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(92vw, 410px); z-index: 120;
  background: var(--teal);
  border-left: 3px solid var(--gold);
  box-shadow: -18px 0 48px rgba(17,21,24,.34);
  display: flex; flex-direction: column;
  padding: calc(68px + env(safe-area-inset-top, 0px)) var(--pad-x)
           calc(28px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(100%); transition: transform .32s cubic-bezier(.16,1,.3,1);
  visibility: hidden;
}
.nav-open .nav-overlay { transform: translateX(0); visibility: visible; }
.nav-close {
  position: absolute; top: 14px; right: 16px;
  width: 44px; height: 44px; display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--ivory); border-radius: 50%;
}
.nav-close:hover { color: var(--gold); }
.nav-overlay ul { display: flex; flex-direction: column; gap: 0; }
.nav-overlay a {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: .01em;
  color: rgba(246,243,236,.92);
  display: block;
  padding: 13px 0;
  min-height: 44px;
  border-bottom: 1px solid rgba(246,243,236,.12);
}
.nav-overlay a:hover, .nav-overlay a.is-active { color: var(--gold); }
.nav-overlay .overlay-foot { margin-top: 18px; }
.overlay-card {
  background:
    linear-gradient(180deg, rgba(246,243,236,.10), rgba(246,243,236,.06));
  border: 1px solid rgba(246,243,236,.20);
  border-left: 2px solid var(--gold);
  border-radius: 18px;
  padding: 18px;
  min-width: 0;
  box-shadow: 0 18px 42px rgba(17,21,24,.14);
}
.overlay-kicker {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.nav-overlay .overlay-phone {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  color: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(246,243,236,.20);
  border-radius: 999px;
  background: rgba(246,243,236,.08);
}
.nav-overlay .overlay-phone::before {
  content: "Call";
  margin-right: 10px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
}
.overlay-note {
  margin: 9px 0 14px;
  color: var(--on-teal-mut);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}
.overlay-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}
.nav-overlay .overlay-action {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(246,243,236,.24);
  border-radius: 999px;
  min-height: 46px;
  padding: 12px 14px;
  min-width: 0;
}
.nav-overlay .overlay-action--primary {
  background: var(--ivory);
  color: var(--teal);
  border-color: var(--ivory);
}
.nav-overlay .overlay-action--pay {
  background: var(--gold);
  color: var(--teal);
  border-color: var(--gold);
}

@media (max-width: 430px) {
  .nav-overlay {
    width: min(88vw, 340px);
    padding-left: clamp(16px, 5vw, 22px);
    padding-right: clamp(14px, 4vw, 20px);
  }
  .overlay-card { padding: 16px 14px; }
  .nav-overlay .overlay-phone { font-size: clamp(17px, 5vw, 19px); }
  .overlay-actions { grid-template-columns: 1fr; gap: 9px; }
  .nav-overlay .overlay-action {
    width: 100%;
    min-height: 44px;
    padding: 11px 12px;
  }
}

/* AUG 2026 (final feedback): the primary desktop row is now five high-intent
   items — About Us, Practice Areas, Team, Areas We Serve, Contact Us — plus the
   Schedule Intake and Make a Payment buttons. Resources (Videos + Blog) is a
   .nav-secondary item: it stays in the mobile drawer, the footer Resources row
   and the homepage body, so the desktop row never runs out of horizontal space.
   Because the row is lighter, real desktop navigation now starts at 1000px
   instead of 1200px — dropdowns work at 1024/1100/1280 laptop widths. */
@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .nav-overlay, .nav-scrim { display: none; }
  .nav-desktop { display: block; }
  .header-cta { display: flex; }
  .nav-desktop .nav-secondary { display: none; }
}

/* ===================================================================
   HERO
   =================================================================== */
/* LIGHTER DIRECTION (July 2026): the homepage hero is now a light linen
   surface with an evergreen serif headline and a bright city/bridge image,
   matching the approved design draft. Evergreen is used as structured accent
   (headline color, primary CTA) rather than a full dark background. */
.hero {
  background: var(--linen); color: var(--ink);
  position: relative; overflow: hidden;
  padding-block: clamp(64px, 11vw, 132px);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(19,66,21,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero .eyebrow { color: var(--emerald-pine); }
.hero h1 {
  font-size: clamp(48px, 7vw, 96px); font-weight: 600; line-height: 1.04;
  letter-spacing: -0.02em; max-width: 16ch; color: var(--evergreen);
  margin-bottom: 26px;
}
.hero .lead { color: var(--slate); max-width: 56ch; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-trust {
  margin-top: 48px; padding-top: 26px; border-top: 1px solid rgba(246,243,236,.15);
  display: flex; flex-wrap: wrap; gap: 14px 38px;
}
.hero-trust div { font-size: 14.5px; color: var(--on-teal-mut); }
.hero-trust strong { color: var(--ivory); font-weight: 600; display: block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }

/* Interior page hero (smaller) */
.page-hero { background: var(--teal); color: var(--ivory); position: relative; overflow: hidden; padding-block: clamp(52px, 8vw, 88px); }
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(246,243,236,.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.page-hero .wrap { position: relative; }
.page-hero h1 { font-size: clamp(34px, 5vw, 58px); color: var(--ivory); max-width: 18ch; margin-bottom: 18px; }
.page-hero .lead { color: var(--on-teal-mut); max-width: 60ch; }
.page-hero .eyebrow { color: rgba(246,243,236,.66); }
.contact-availability {
  margin-top: 22px;
  max-width: 62ch;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  padding: 16px 20px;
  color: var(--ivory);
  font-size: 16px;
  line-height: 1.55;
}
.contact-availability strong { color: #fff; }
.contact-availability a { color: var(--gold); text-decoration: underline; }

/* Breadcrumb */
.breadcrumb { padding-block: 16px; border-bottom: 1px solid var(--line-light); font-size: 13.5px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--slate); margin-left: 8px; }
.breadcrumb a { color: var(--slate); }
.breadcrumb a:hover { color: var(--teal); }
.breadcrumb li[aria-current] { color: var(--ink); }

/* ===================================================================
   AUDIENCE PATHS — editorial list
   =================================================================== */
.paths { display: grid; gap: 0; margin-top: 12px; }
@media (min-width: 900px) { .paths { max-width: 980px; } }
.path-row {
  display: grid; grid-template-columns: auto 1fr; gap: 20px 26px;
  padding: 30px 0; border-top: 1px solid var(--line-teal);
  border-left: 3px solid transparent; padding-left: 18px;
  transition: border-color .25s ease, background .25s ease;
}
.path-row:last-child { border-bottom: 1px solid var(--line-teal); }
.path-row:hover { border-left-color: var(--gold); background: rgba(184,131,42,.03); }
.path-num { font-family: var(--serif); font-size: clamp(40px, 6vw, 64px); line-height: 1; color: var(--line-teal); font-weight: 400; }
.path-body h3 { margin-bottom: 8px; }
.path-body p { color: var(--slate); margin-bottom: 12px; }
.path-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.path-links a { font-size: 14.5px; font-weight: 600; color: var(--teal); border-bottom: 1px solid transparent; }
.path-links a:hover { border-bottom-color: var(--gold); }

/* ===================================================================
   TRUST STATS — editorial figures
   =================================================================== */
.stats { display: grid; gap: 36px; grid-template-columns: 1fr; margin-top: 10px; }
.stat { padding-top: 20px; border-top: 1px solid var(--line-teal); }
.stat .figure { font-family: var(--serif); font-size: clamp(44px, 6vw, 68px); line-height: 1; color: var(--teal); font-weight: 400; }
.stat .label { margin-top: 12px; font-size: 15px; color: var(--slate); max-width: 30ch; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 44px; } }

/* ===================================================================
   ATTORNEY PROFILE
   =================================================================== */
.attorney { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: start; }
.attorney-rule { border-left: 4px solid var(--gold); padding-left: 26px; }
.attorney-portrait {
  background: var(--teal); color: var(--ivory); border-radius: var(--radius);
  aspect-ratio: 4/5; display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px; position: relative; overflow: hidden;
}
.attorney-portrait::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(246,243,236,.05) 1px, transparent 1px);
  background-size: 20px 20px;
}
.attorney-monogram { position: relative; font-family: var(--serif); font-size: clamp(72px, 12vw, 128px); line-height: .9; color: rgba(246,243,236,.92); }
.attorney-monogram .amp { color: var(--gold); }
.attorney-photo { position: relative; width: 100%; height: 335px; object-fit: cover; object-position: center top; filter: saturate(.9) contrast(1.04); border: 1px solid rgba(246,243,236,.22); }
.attorney-portrait .pcap { position: relative; }
.attorney-portrait .pcap .nm { font-family: var(--serif); font-size: 24px; }
.attorney-portrait .pcap .rl { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-teal-mut); margin-top: 4px; }
.attorney-cred { margin-top: 22px; display: grid; gap: 8px; }
.attorney-cred li { position: relative; padding-left: 20px; font-size: 15.5px; color: var(--ink); }
.attorney-cred li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
@media (min-width: 860px) { .attorney { grid-template-columns: 360px 1fr; gap: 56px; } .attorney-portrait { position: sticky; top: 96px; } }

/* ===================================================================
   PROCESS — numbered teal rows
   =================================================================== */
.process { display: grid; gap: 0; margin-top: 14px; }
@media (min-width: 900px) { .process { max-width: 980px; } }
.process-row {
  display: grid; grid-template-columns: auto 1fr; gap: 22px;
  padding: 26px 0; border-top: 1px solid rgba(246,243,236,.16); align-items: baseline;
}
.process-row:last-child { border-bottom: 1px solid rgba(246,243,236,.16); }
.process-num { font-family: var(--serif); font-size: 22px; color: var(--gold); min-width: 44px; }
.process-row h3 { color: var(--ivory); margin-bottom: 6px; }
.process-row p { color: var(--on-teal-mut); max-width: 60ch; }

/* ===================================================================
   PRACTICE OVERVIEW — editorial grid (not cards)
   =================================================================== */
.practice-list { display: grid; gap: 0; grid-template-columns: 1fr; margin-top: 14px; }
.practice-item {
  padding: 26px 4px; border-top: 1px solid var(--line-teal);
  display: grid; gap: 6px;
  transition: padding-left .2s ease;
}
.practice-item:hover { padding-left: 12px; }
.practice-item h3 { font-size: 23px; }
.practice-item h3 a { display: inline-flex; align-items: center; gap: 10px; }
.practice-item h3 a::after { content: "\2192"; font-family: var(--sans); color: var(--gold); font-size: 19px; opacity: 0; transform: translateX(-6px); transition: .2s ease; }
.practice-item:hover h3 a::after { opacity: 1; transform: translateX(0); }
.practice-item p { color: var(--slate); max-width: 70ch; }
@media (min-width: 760px) { .practice-list { grid-template-columns: 1fr 1fr; column-gap: 48px; } }

/* ===================================================================
   TESTIMONIALS — blockquotes, no stars
   =================================================================== */
.quotes { display: grid; gap: 38px; grid-template-columns: 1fr; margin-top: 16px; }
.quote { border-top: 1px solid var(--line-teal); padding-top: 24px; }
.quote blockquote { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; color: var(--ink); }
.quote .cite { margin-top: 16px; font-size: 14px; color: var(--slate); font-style: normal; letter-spacing: .02em; }
@media (min-width: 820px) { .quotes { grid-template-columns: 1fr 1fr; gap: 48px; } }

/* ===================================================================
   FAQ — accordion
   =================================================================== */
.faq { margin-top: 16px; border-top: 1px solid var(--line-teal); }
.faq-item { border-bottom: 1px solid var(--line-teal); }
.faq-q {
  width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-family: var(--serif); font-size: clamp(18px, 2.1vw, 22px); color: var(--ink);
}
.faq-q .ic { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.faq-q .ic::before, .faq-q .ic::after { content: ""; position: absolute; background: var(--gold); transition: transform .25s ease; }
.faq-q .ic::before { left: 0; right: 0; top: 10px; height: 2px; }
.faq-q .ic::after { top: 0; bottom: 0; left: 10px; width: 2px; }
.faq-item.is-open .faq-q .ic::after { transform: scaleY(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a p { padding-bottom: 24px; color: var(--slate); max-width: 72ch; }

/* ===================================================================
   GENERIC CONTENT BLOCKS
   =================================================================== */
.two-col { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.4fr 1fr; gap: 64px; } }
.aside-box { border-top: 2px solid var(--gold); padding-top: 20px; }
.aside-box h3 { font-size: 19px; }
.aside-box ul { display: grid; gap: 10px; margin-top: 14px; }
.aside-box li a { font-size: 15.5px; color: var(--teal); font-weight: 500; border-bottom: 1px solid var(--line-light); display: inline-block; padding: 2px 0; }
.aside-box li a:hover { border-bottom-color: var(--gold); }

.feature-rows { display: grid; gap: 0; margin-top: 12px; }
.feature-rows .fr { padding: 26px 0; border-top: 1px solid var(--line-teal); display: grid; gap: 8px; }
.feature-rows .fr:last-child { border-bottom: 1px solid var(--line-teal); }
.feature-rows .fr h3 { font-size: 22px; }
.feature-rows .fr p { color: var(--slate); }

/* Contact CTA (global) */
.cta-block { background: var(--teal); color: var(--ivory); position: relative; overflow: hidden; }
.cta-block::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(246,243,236,.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.cta-block .wrap { position: relative; }
.cta-block h2 { color: var(--ivory); }
.cta-block .lead { color: var(--on-teal-mut); margin-bottom: 30px; max-width: 60ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cta-sub { margin-top: 22px; font-size: 14px; color: var(--on-teal-mut); }

/* ===================================================================
   FORMS
   =================================================================== */
.form-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid .span-2 { grid-column: 1 / -1; } .form-grid { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 7px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field label .req { color: var(--gold); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--line-teal);
  border-radius: var(--radius); background: var(--near-white); color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(26,61,71,.12); }
.field textarea { resize: vertical; min-height: 130px; }
.field .hint { font-size: 13px; color: var(--slate); }
.clickwrap { display: flex; gap: 12px; align-items: flex-start; padding: 18px; background: var(--ivory); border: 1px solid var(--line-teal); border-radius: var(--radius); }
.clickwrap input { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; accent-color: var(--teal); }
.clickwrap label { font-size: 14px; line-height: 1.55; color: var(--slate); }
.form-actions { margin-top: 8px; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer { background: var(--footer-bg); color: rgba(246,243,236,.72); padding-block: clamp(48px, 7vw, 80px) 36px; font-size: 15px; }
.footer-top { display: grid; gap: 36px; grid-template-columns: 1fr; }
.footer-brand .brand-name { color: var(--ivory); }
.footer-brand p { color: rgba(246,243,236,.6); font-size: 14.5px; margin-top: 16px; max-width: 34ch; }
.footer-col h4 { font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(246,243,236,.5); margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 9px; }
.footer-col a { color: rgba(246,243,236,.75); font-size: 14.5px; }
.footer-col a:hover { color: var(--gold); }
.footer-contact div { margin-bottom: 12px; }
.footer-contact a { color: var(--ivory); }
.footer-disclaimer { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(246,243,236,.12); font-size: 12.5px; line-height: 1.6; color: rgba(246,243,236,.5); max-width: 100%; }
.footer-disclaimer p { max-width: 100%; }
.footer-legal { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; }
.footer-legal a { color: rgba(246,243,236,.6); }
.footer-legal a:hover { color: var(--gold); }
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; } }

/* Languages chips */
.lang-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lang-list span { border: 1px solid var(--line-teal); padding: 8px 16px; border-radius: var(--radius); font-size: 15px; font-weight: 500; }
.section--teal .lang-list span { border-color: rgba(246,243,236,.3); }

/* Inline note / disclaimer callout */
.note {
  border-left: 4px solid var(--gold); background: var(--near-white);
  padding: 18px 22px; border-radius: var(--radius); font-size: 15px; color: var(--slate);
}
.note strong { color: var(--ink); }

/* Resource link grid */
.res-list { display: grid; gap: 0; margin-top: 12px; }
.res-list .res { padding: 22px 0; border-top: 1px solid var(--line-teal); display: grid; gap: 4px; }
.res-list .res:last-child { border-bottom: 1px solid var(--line-teal); }
.res-list .res a { font-size: 19px; font-family: var(--serif); color: var(--teal); }
.res-list .res a:hover { border-bottom: 1px solid var(--gold); }
.res-list .res p { color: var(--slate); font-size: 14.5px; }

/* Utility */
.mt-s { margin-top: 16px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 44px; }
.center { text-align: center; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; font-size: 14px; color: var(--slate); }

/* Legal / informational long-form pages */
.legal-prose .prose-section { margin-top: 40px; }
.legal-prose .prose-section:first-child { margin-top: 0; }
.legal-prose .prose-section h2 {
  font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 14px;
  padding-top: 28px; border-top: 1px solid var(--line-teal);
}
.legal-prose .prose-section:first-child h2 { border-top: 0; padding-top: 0; }
.legal-prose p { margin-top: 14px; }
.legal-prose ul.bullets { margin-top: 14px; display: grid; gap: 10px; }
.legal-prose ul.bullets li { position: relative; padding-left: 22px; max-width: 70ch; }
.legal-prose ul.bullets li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 7px; height: 7px; background: var(--gold); border-radius: 50%;
}
.figure {
  font-size: 16px; line-height: 1.7; color: var(--ink);
  border-left: 2px solid var(--line-teal); padding-left: 18px; margin-top: 16px;
}
.figure strong { color: var(--ink); }
.sitemap-list { columns: 2; column-gap: 48px; }
.sitemap-list li { break-inside: avoid; }
@media (max-width: 640px) { .sitemap-list { columns: 1; } }

/* ===================================================================
   REDESIGN MODULES (2026 strategic pass)
   =================================================================== */

/* ---- Language toggle (header) ---- */
.lang-toggle {
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--teal); border: 1px solid var(--line-teal);
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lang-toggle:hover { background: var(--teal); color: var(--ivory); border-color: var(--teal); }

/* ---- Desktop mega-menu ---- */
.nav-desktop .has-menu { position: relative; }
.nav-desktop .has-menu > a::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 22px;
}
.mega {
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translate(-50%, 8px);
  background: var(--ivory); border: 1px solid var(--line-teal);
  border-top: 3px solid var(--gold);
  box-shadow: 0 22px 60px rgba(26,34,36,.16);
  border-radius: 4px; padding: 0; min-width: 640px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; z-index: 120;
}
.mega--narrow {
  min-width: 360px;
  max-width: min(440px, calc(100vw - 32px));
}
.nav-desktop .has-menu:hover .mega,
.nav-desktop .has-menu:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.mega-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; }
.mega--narrow .mega-inner { grid-template-columns: 1fr; }
.mega-col { padding: 24px 26px; }
.mega-col + .mega-col { border-left: 1px solid var(--line-teal); }
.mega-feature { background: rgba(26,61,71,.04); display: flex; flex-direction: column; }
.mega-h { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 14px; }
.mega-col ul { display: grid; gap: 9px; }
.mega--narrow .mega-col { padding: 22px 26px 24px; }
.mega--narrow .mega-col ul {
  grid-template-columns: 1fr;
  gap: 2px;
}
.mega-col li a {
  font-size: 14.5px; color: var(--ink); font-weight: 400; padding: 2px 0;
  line-height: 1.45; white-space: normal; overflow-wrap: normal; word-break: normal;
}
.mega--narrow .mega-col li a {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 38px; padding: 8px 10px; margin-inline: -10px; border-radius: 6px;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.mega--narrow .mega-col li a::after {
  content: "›"; flex: 0 0 auto; color: var(--gold); opacity: .72; font-size: 18px;
  line-height: 1; transform: translateX(-2px); transition: transform .18s ease, opacity .18s ease;
}
.mega-col li a:hover { color: var(--teal); }
.mega--narrow .mega-col li a:hover { background: rgba(26,61,71,.055); transform: translateX(2px); }
.mega--narrow .mega-col li a:hover::after { opacity: 1; transform: translateX(1px); }
.mega-feature p { font-size: 14px; color: var(--slate); margin: 0 0 18px; line-height: 1.5; }
.mega-feature .btn { margin-top: auto; }

/* ---- Consultation hero (two-column, image right) ---- */
.hero--consult { padding-block: clamp(28px, 6vw, 76px); }
.hero--consult .hero-grid { position: relative; z-index: 2; display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; grid-template-columns: 1fr; }
.hero--consult .hero-copy { max-width: 36ch; }
.hero--consult .eyebrow { color: var(--emerald-pine); margin-bottom: 16px; }
.hero--consult h1 {
  font-size: clamp(40px, 7vw, 64px); font-weight: 600; line-height: 1.0;
  letter-spacing: -0.02em; max-width: 11ch; color: var(--evergreen); margin-bottom: 18px;
  text-wrap: balance;
}
.hero--consult .lead { color: var(--slate); max-width: 46ch; margin-bottom: 28px; font-size: clamp(17px, 2vw, 20px); }
.hero--consult .hero-figure {
  position: relative; border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(19,66,21,.18); border: 1px solid var(--line-teal);
}
.hero--consult .hero-figure img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; }

/* Desktop: polished, balanced side-by-side hero (not a stacked poster).
   The grid is centered within the same horizontal rhythm as the header/content
   (.wrap, max-width 1180px) so the copy never hugs the viewport edge. Columns
   sit near 45/55 with the copy vertically centered against a proportional,
   not-dominant image, and tight vertical padding so the trust band follows
   naturally rather than across a large empty block. */
@media (min-width: 900px) {
  .hero--consult { padding-block: clamp(40px, 4.5vw, 60px) clamp(28px, 3vw, 40px); }
  .hero--consult .hero-grid {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    gap: clamp(40px, 4vw, 60px);
    align-items: center;
    min-height: 0;
  }
  /* Left column: vertically centered against the image, tighter rhythm */
  .hero--consult .hero-copy {
    align-self: center; max-width: 32rem;
    display: flex; flex-direction: column;
  }
  /* Larger headline so the copy holds its own beside the image */
  .hero--consult h1 {
    font-size: clamp(52px, 4.8vw, 72px); line-height: 1.02;
    max-width: 12ch; margin-bottom: 22px;
  }
  .hero--consult .lead { max-width: 44ch; margin-bottom: 30px; font-size: clamp(18px, 1.55vw, 21px); }
  /* CTAs stack: a compact gold button, with the outlined phone pill beneath it.
     Both constrained so the Schedule button is never stretched too wide. */
  .hero--consult .hero-actions--home {
    flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 12px;
  }
  .hero--consult .hero-actions--home .btn {
    width: auto; flex: 0 0 auto; min-height: 50px; padding-inline: 26px; font-size: 15px;
  }
  /* Pill CTAs on desktop too — the gold Schedule button and the phone pill
     share the same fully-rounded shape for a cohesive, less boxy hero. */
  .hero--consult .hero-actions--home .btn--gold,
  .hero--consult .hero-actions--home .btn--ghost-phone {
    border-radius: 999px; padding-inline: 26px;
  }
  /* Image: large and premium, but its box is defined by a fixed aspect ratio
     so the photo covers it completely (no empty rounded gap), and capped in
     height so the copy beside it never looks stranded. */
  .hero--consult .hero-figure {
    align-self: center; height: auto; min-height: 0;
    aspect-ratio: 7 / 5;
    max-height: clamp(420px, 42vw, 500px);
  }
  .hero--consult .hero-figure img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
}
@media (min-width: 1100px) {
  .hero--consult .hero-grid { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: clamp(56px, 4.5vw, 72px); }
}

/* ---- Mobile / small tablet: clean stacked LIGHT hero ----
   Copy sits above a full-width city/bridge image on the light linen surface.
   Simpler and brighter than the old dark-green veiled panel. */
@media (max-width: 899px) {
  .hero--consult { padding-block: clamp(24px, 5vw, 40px) clamp(20px, 4vw, 32px); }
  .hero--consult .hero-grid {
    display: grid; position: relative;
    gap: 24px; min-height: 0;
    grid-template-columns: 1fr;
  }
  .hero--consult .hero-figure {
    position: relative; width: 100%; max-width: none;
    margin: 0; border: 1px solid var(--line-teal); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(19,66,21,.14);
  }
  .hero--consult .hero-figure img {
    width: 100%; height: 100%; aspect-ratio: 16/10; object-fit: cover;
    object-position: center;
  }
  .hero--consult .hero-copy {
    position: relative; z-index: 2;
    max-width: 100%; width: 100%; min-width: 0;
  }
  .hero--consult .eyebrow { margin-bottom: 10px; font-size: 12px; }
  .hero--consult .eyebrow--service {
    white-space: normal; width: auto; max-width: none;
    font-size: 11px; letter-spacing: 0.06em;
  }
  .hero--consult h1 {
    font-size: clamp(34px, 9vw, 52px); line-height: 1.04; font-weight: 600;
    max-width: 14ch; margin-bottom: 16px; letter-spacing: -0.015em;
  }
  /* Keep the supporting paragraph on mobile — the light hero has room for it */
  .hero--consult .hero-lead { display: block; margin-bottom: 22px; }
}

/* Phone viewports (<=599px): full-width stacked, evergreen pill CTAs */
@media (max-width: 599px) {
  .hero--consult .hero-figure { width: 100%; max-width: none; }
  .hero--consult .hero-copy { width: 100%; }
  .hero--consult .hero-actions--home {
    display: flex; flex-direction: column; align-items: stretch; gap: 12px;
    width: 100%; max-width: 340px;
  }
  .hero--consult .hero-actions--home .btn--gold {
    width: 100%; max-width: none;
    min-height: 50px; padding: 12px 18px; font-size: 15px; font-weight: 700;
    border-radius: 999px;
    gap: 8px; line-height: 1.1; text-align: center; justify-content: center;
  }
  .hero--consult .hero-actions--home .btn--gold .btn-label-full { display: inline; }
  .hero--consult .hero-actions--home .btn--gold .btn-label-short { display: none; }
  .hero--consult .hero-actions--home .btn--gold svg { width: 17px; height: 17px; flex-shrink: 0; }
  .hero--consult .hero-actions--home .btn--ghost-phone {
    width: 100%; max-width: none; min-height: 50px; border-radius: 999px;
    border: 1.5px solid var(--line-teal); padding: 12px 18px;
    font-size: 15px; font-weight: 700; color: var(--evergreen); gap: 8px;
    justify-content: center; line-height: 1.1;
  }
  .hero--consult .hero-actions--home .btn--ghost-phone svg { color: var(--evergreen); }
}

/* ---- Trust band: review strip + stat cards + credential row ----
   LIGHTER DIRECTION: the trust band is now a light Mist-Green surface that
   flows from the linen hero. Review strip is white with dark text; stat cards
   are white with an evergreen hairline; the credential logos sit on white. */
.hero-trust-band { background: var(--mist); position: relative; z-index: 2; padding-top: clamp(20px, 3vw, 32px); padding-bottom: clamp(40px, 6vw, 72px); }
@media (max-width: 599px) {
  .hero-trust-band { padding-top: 20px; padding-bottom: 36px; }
}
@media (min-width: 900px) {
  /* Subtle divider separates the main hero from the supporting trust band. */
  .hero-trust-band { padding-top: clamp(26px, 3vw, 40px); padding-bottom: clamp(36px, 4vw, 56px); }
  .hero-trust-band::after {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: min(1120px, calc(100% - 48px)); height: 1px;
    background: var(--line-teal);
  }
  /* Review strip + stat cards centered and contained within the hero rhythm */
  .hero-trust-band .review-strip { justify-content: center; max-width: 720px; margin-inline: auto; }
  .hero-trust-band .stat-cards { margin-top: 16px; gap: 16px; max-width: 1120px; margin-inline: auto; }
}
.hero-trust-band .wrap { position: relative; }

.review-strip {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 10px;
  background: #fff; border: 1px solid var(--line-teal);
  border-radius: 12px; padding: 12px 16px; box-shadow: 0 6px 18px rgba(19,66,21,.06);
}
.review-google { background: #fff; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.review-stars { color: var(--champagne); font-size: 15px; letter-spacing: .5px; white-space: nowrap; }
.review-score { color: var(--ink); font-size: 14px; white-space: nowrap; }
.review-score strong { font-weight: 700; }
.review-count { color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.review-es { color: var(--emerald-pine); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.review-sep { width: 1px; height: 16px; background: var(--stone); display: inline-block; flex-shrink: 0; }

.stat-cards {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr);
}
/* White stat cards with an evergreen hairline on the light Mist-Green band */
.stat-card {
  background: #fff; border: 1px solid var(--line-teal);
  border-radius: 12px; padding: 24px 16px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative; box-shadow: 0 8px 22px rgba(19,66,21,.05);
}
.stat-card::after {
  content: ""; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: 34px; height: 2px; background: var(--champagne); border-radius: 2px;
}
.stat-icon { color: var(--emerald-pine); margin-bottom: 6px; }
.stat-figure { font-family: var(--serif); font-size: clamp(34px, 5vw, 48px); line-height: 1; color: var(--evergreen); font-weight: 600; }
.stat-figure--text { font-size: clamp(16px, 2.4vw, 20px); letter-spacing: .02em; color: var(--evergreen); font-weight: 600; }
.stat-label { font-size: 13.5px; color: var(--slate); line-height: 1.35; }
.stat-label--lg { font-family: var(--serif); font-size: clamp(16px, 2.2vw, 20px); color: var(--evergreen); line-height: 1.25; font-weight: 600; }

/* Credential / logo strip — official institutional logos (AILA, ABA, PA Bar,
   U.S. Courts, EOIR/DOJ) presented as a compact, integrated trust strip near
   the bottom of the hero. The logos are NOT placed on opaque white plates;
   instead each sits on a very subtle translucent ivory wash with a hairline
   border so it reads as part of the dark-green hero rather than a sticker.
   The wash is the minimum light backing needed to keep the real (often dark
   or fine-line) brand artwork legible against the green band. This reads as a
   quiet logo strip, NOT stacked cards or seals. */
/* Credential / logo strip — official institutional logos (AILA, ABA, PA Bar,
   U.S. Courts, EOIR/DOJ) on the LIGHT trust band: each sits on a clean white
   plate with a hairline evergreen border so the artwork stays legible. */
.cred-block { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-teal); }
.cred-heading {
  text-transform: uppercase; letter-spacing: .16em; font-size: 11.5px; font-weight: 700;
  color: var(--emerald-pine); margin: 0 auto 16px; text-align: center;
}
.logo-strip {
  list-style: none; margin: 0 auto; padding: 0;
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
  gap: 14px;
}
.logo-chip {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  flex: 0 1 auto;
}
.logo-chip img {
  display: block; height: 56px; width: auto; max-width: 150px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line-teal);
  border-radius: 10px;
  padding: 9px 14px;
  box-shadow: 0 4px 12px rgba(19,66,21,.05);
}
.logo-chip--aila img { padding: 7px; }
.logo-chip--eoir img { padding: 7px; }
.logo-tag {
  color: var(--slate); font-size: 11px; font-weight: 600;
  letter-spacing: .02em; line-height: 1.2; text-align: center; white-space: nowrap;
}

@media (max-width: 560px) {
  .stat-cards { gap: 8px; }
  .stat-card { padding: 16px 8px 16px; }
  .stat-card::after { bottom: 9px; }
  /* Compact the review strip so Google · stars · score · reviews · Español
     all sit on one line at 390px wide. */
  /* Wrap-tolerant so longer localized strings (es) never spill off-screen. */
  .review-strip { justify-content: center; flex-wrap: wrap; gap: 5px 7px; padding: 11px 11px; }
  .review-google { width: 26px; height: 26px; }
  .review-google svg { width: 17px; height: 17px; }
  .review-stars { font-size: 12px; letter-spacing: 0; }
  .review-score { font-size: 11.5px; }
  .review-count { font-size: 11.5px; }
  .review-es { font-size: 11.5px; }
  .review-sep { height: 13px; }
  /* Mobile logo strip: compact 3 + 2 arrangement that fits above the fold.
     Smaller plates, tighter gaps, no tall cards. */
  .cred-block { margin-top: 16px; padding-top: 14px; }
  .cred-heading { margin-bottom: 11px; font-size: 10.5px; letter-spacing: .14em; }
  .logo-strip { gap: 8px 9px; max-width: 340px; }
  .logo-chip { gap: 4px; flex: 0 0 calc((100% - 18px) / 3); }
  .logo-chip img { height: 34px; max-width: 100%; width: 100%; padding: 6px 8px; border-radius: 7px; }
  .logo-chip--aila img { background: #fff; border-color: var(--line-teal); padding: 6px 8px; }
  .logo-chip--eoir img { padding: 4px 8px; }
  .logo-tag { font-size: 9px; letter-spacing: 0; white-space: normal; }
}
@media (min-width: 561px) and (max-width: 899px) {
  .logo-chip img { height: 42px; }
}

/* ---- Credential strip ---- */
.section--cred { background: var(--teal); padding-block: 20px; border-bottom: 1px solid rgba(246,243,236,.1); }
.cred-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px; margin: 0; padding: 0; list-style: none;
}
.cred-strip li {
  font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
  padding: 7px 14px; border-radius: 999px;
}
.cred-strip--teal li {
  color: var(--ivory); border: 1px solid rgba(184,131,42,.55); background: rgba(246,243,236,.04);
}
.cred-strip:not(.cred-strip--teal) li {
  color: var(--teal); border: 1px solid var(--line-teal); background: #fff;
}
.footer-credentials { border-top: 1px solid rgba(246,243,236,.12); padding-top: 22px; margin-top: 22px; }

/* ---- Locator grid ---- */
.locator-grid { display: grid; gap: 14px; margin-top: 30px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .locator-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .locator-grid { grid-template-columns: repeat(3, 1fr); } }
.loc-card {
  display: flex; flex-direction: column; gap: 6px; position: relative;
  background: #fff; border: 1px solid var(--line-teal); border-radius: 6px;
  padding: 22px 24px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.loc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(26,34,36,.1); border-color: var(--gold); }
.loc-name { font-family: var(--serif); font-size: 21px; color: var(--teal); line-height: 1.15; }
.loc-desc { font-size: 14.5px; color: var(--slate); line-height: 1.5; }
.loc-arrow { color: var(--gold); font-size: 20px; margin-top: 4px; transition: transform .2s ease; }
.loc-card:hover .loc-arrow { transform: translateX(4px); }
.loc-card--cta {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--ivory);
}
.loc-card--cta:hover {
  border-color: var(--gold);
  box-shadow: 0 18px 42px rgba(26,61,71,.18);
}
.loc-card--cta .loc-name,
.loc-card--cta .loc-desc {
  color: var(--ivory);
}
.loc-card--cta .loc-arrow { color: var(--gold); }

/* Bilingual entry point: a quiet gold-accented card so Spanish-speaking
   visitors can spot it instantly without it competing with the teal CTA. */
.loc-card--es {
  border-color: rgba(184,131,42,.45);
  border-left: 3px solid var(--gold);
  background: rgba(184,131,42,.045);
}
.loc-card--es:hover { border-color: var(--gold); }
.loc-card--es .loc-name::after {
  content: "ES"; margin-left: 10px; vertical-align: middle;
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--gold); border: 1px solid rgba(184,131,42,.5);
  border-radius: 999px; padding: 2px 8px;
}
.loc-card--es .loc-arrow { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--gold); }

/* ---- Editorial cards (blog) ---- */
.ed-grid { display: grid; gap: 22px; margin-top: 30px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .ed-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ed-grid { grid-template-columns: repeat(3, 1fr); } }
.ed-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line-teal); border-radius: 6px; padding: 26px 26px 24px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ed-card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(26,34,36,.1); border-color: var(--gold); }
.ed-tag {
  display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px;
}
.ed-card h3 { font-family: var(--serif); font-size: 22px; line-height: 1.2; color: var(--ink); margin: 0 0 10px; font-weight: 400; }
.ed-card p { font-size: 14.5px; color: var(--slate); line-height: 1.55; margin: 0 0 18px; flex: 1; }
.ed-more { font-size: 14px; font-weight: 600; color: var(--teal); }
.ed-card:hover .ed-more { color: var(--gold); }

/* ---- Case grid (representative matters) ---- */
.case-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .case-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .case-grid { grid-template-columns: repeat(3, 1fr); } }
.case-card { background: var(--ivory); border: 1px solid var(--line-teal); border-left: 3px solid var(--gold); border-radius: 4px; padding: 24px 26px; }
.case-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--teal); margin: 8px 0 10px; line-height: 1.2; }
.case-card p { font-size: 14.5px; color: var(--slate); line-height: 1.55; margin: 0; }

/* ---- Region panel (map) ---- */
.region-panel { display: grid; grid-template-columns: 1fr; }
@media (min-width: 880px) { .region-panel { grid-template-columns: 1fr 1fr; } }
.region-media { min-height: 280px; }
.region-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.region-body { background: var(--teal); color: var(--ivory); padding: clamp(40px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.region-body .eyebrow { color: rgba(246,243,236,.66); }
.region-body h2 { color: var(--ivory); }
.region-body p { color: var(--on-teal-mut); max-width: 44ch; }
.region-links { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.region-links a { color: var(--ivory); font-weight: 500; font-size: 16px; border-bottom: 1px solid rgba(246,243,236,.16); padding-bottom: 10px; display: block; }
.region-links a:hover { color: var(--gold); }

/* ---- Spanish callout band ---- */
.es-band { background: var(--teal); background-image: linear-gradient(rgba(20,46,53,.86), rgba(20,46,53,.86)), url("../assets/band-texture.jpg"); background-size: cover; background-position: center; color: var(--ivory); padding-block: clamp(44px, 6vw, 72px); }
.es-band-inner { display: grid; gap: 24px; align-items: center; }
@media (min-width: 820px) { .es-band-inner { grid-template-columns: 1.4fr 1fr; gap: 48px; } }
.es-band .eyebrow { color: var(--gold); }
.es-band h2 { color: var(--ivory); margin-bottom: 10px; }
.es-band p { color: var(--on-teal-mut); margin: 0; max-width: 52ch; }
.es-band-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.es-band .btn--primary { background: var(--gold); color: #fff; border-color: var(--gold); }
.es-band .btn--primary:hover { background: #a5741f; border-color: #a5741f; }
.es-band .btn--ghost { color: var(--ivory); border-color: rgba(246,243,236,.45); }
.es-band .btn--ghost:hover { border-color: var(--ivory); }

/* ---- Blog post layout ---- */
.post-head { background: var(--teal); color: var(--ivory); padding-block: clamp(48px, 7vw, 84px); }
.post-head .eyebrow { color: var(--gold); }
.post-head h1 { color: var(--ivory); font-weight: 400; }
.post-head .lead { color: var(--on-teal-mut); }
.post-body { padding-block: clamp(40px, 6vw, 72px); }
.post-section { margin-bottom: 30px; }
.post-section h2 { font-size: clamp(22px, 3vw, 28px); margin-bottom: 12px; }

/* ---- Overlay language link ---- */
.nav-overlay .overlay-lang { font-family: var(--sans); font-size: 14px; color: var(--gold); border: none; padding: 12px 0 0; min-height: auto; display: inline-block; }
.nav-overlay .overlay-lang:hover { color: var(--ivory); }

/* No persistent mobile bottom CTA bar: primary actions live in the hero and drawer. */
.mobile-cta-bar { display: none; }
body { padding-bottom: 0; }

/* ===================================================================
   OVERFLOW ROBUSTNESS (root-cause guards, not band-aids)
   Grid/flex children with min-content larger than their track can force
   horizontal scroll. min-width:0 lets them shrink so text wraps instead.
   =================================================================== */
.path-row, .process-row { min-width: 0; }
.path-body, .process-row > *, .process-row h3, .process-row p,
.region-body, .two-col > *, .attorney > *, .footer-top > *,
.es-band-inner > *, .mega-inner > * { min-width: 0; }
/* Link groups wrap and never run a single link off the edge */
.path-links, .footer-legal, .hero-trust, .cta-actions, .hero-actions,
.es-band-actions, .tag-row, .lang-list, .cred-strip, .breadcrumb ol { min-width: 0; }
.path-links a, .region-links a, .footer-col a, .aside-box li a,
.mega-col li a, .nav-overlay a { overflow-wrap: anywhere; }
/* Containers never exceed the viewport (but .wrap keeps its centered max-width) */
.wrap { max-width: min(var(--maxw), 100%); }
.section, .footer-top, .region-panel, .es-band-inner { max-width: 100%; }
/* Large serif numerals/figures can be tall but must not push width */
.path-num, .stat .figure, .attorney-monogram { overflow-wrap: normal; word-break: keep-all; }
/* Phone numbers / emails wrap gracefully rather than overflow */
.overlay-phone, .header-phone, .footer-contact a { overflow-wrap: anywhere; }

/* ---- Mobile: stack CTA groups full-width with consistent button sizing ---- */
@media (max-width: 599px) {
  .hero-actions:not(.hero-actions--home), .cta-actions, .es-band-actions {
    flex-direction: column; align-items: stretch; gap: 12px;
  }
  .hero-actions:not(.hero-actions--home) .btn,
  .cta-actions .btn,
  .es-band-actions .btn {
    width: 100%; min-height: 50px;
  }
  /* .hero-actions--home sizing is handled by the dedicated hero rules above
     (compact gold button + outlined pill phone). */
}

/* ---- Language chips (languages page full list) ---- */
.lang-chips {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.lang-chip {
  display: inline-flex; align-items: center;
  padding: 9px 16px; border-radius: 999px;
  background: var(--mist); color: var(--ink);
  border: 1px solid var(--line-teal);
  font-size: 15px; font-weight: 500; letter-spacing: .01em;
}
.lang-chip--lead {
  background: var(--teal); color: #fff; border-color: var(--teal);
  font-weight: 600;
}

/* ============================================================
   Team page — clean, expandable card system (July 2026 redesign)
   ============================================================ */
.team-intro { padding-block: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 30px); }

/* ---- Chip / pill system (color-coded by category) ---- */
.chip-legend {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  line-height: 1.25;
  border-radius: 999px; padding: 4px 11px 4px 9px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: currentColor; opacity: .85; }
/* Languages — evergreen */
.chip--lang  { color: #0f3a12; background: #E7F0E7; border-color: rgba(19,66,21,.18); }
/* Education — champagne gold */
.chip--edu   { color: #6E5316; background: #F6EFDD; border-color: rgba(200,164,90,.42); }
/* Licenses & affiliations — steel blue */
.chip--lic   { color: #33475A; background: #E7EEF3; border-color: rgba(94,127,153,.34); }
/* Focus & experience — slate/stone neutral */
.chip--focus { color: #45483F; background: #F0EFE9; border-color: rgba(107,111,106,.28); }

/* ---- Sticky section anchor nav ---- */
.team-filter {
  position: sticky; top: var(--header-h, 76px); z-index: 20;
  background: rgba(248,247,243,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-light);
}
.team-filter-list {
  list-style: none; margin: 0; padding: 10px 0;
  display: flex; flex-wrap: nowrap; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.team-filter-list::-webkit-scrollbar { display: none; }
.team-filter-list a {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--slate);
  min-height: 38px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--line-light);
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.team-filter-list a:hover,
.team-filter-list a:focus-visible { color: var(--teal); background: var(--mist); border-color: var(--line-teal); }
.team-filter-list a.is-current { color: #fff; background: var(--teal); border-color: var(--teal); }

/* ---- Group sections ---- */
.team-group { padding-block: clamp(34px, 5vw, 56px); scroll-margin-top: 130px; }
.team-group:nth-of-type(even) { background: var(--near-white); }
.team-group-head {
  max-width: 760px; margin-bottom: clamp(22px, 3vw, 30px);
  position: relative; padding-left: 16px;
  border-left: 3px solid var(--gold);
}
.team-group-head h2 { margin: 0 0 6px; font-size: clamp(26px, 3.4vw, 34px); }
.team-group-intro { color: var(--slate); font-size: 16px; margin: 0; }
.team-group-count {
  display: inline-block; font-family: var(--sans);
  font-size: 11.5px; font-weight: 700; color: var(--emerald-pine);
  background: var(--mist); border: 1px solid var(--line-teal);
  border-radius: 999px; padding: 3px 11px; margin-bottom: 10px;
  letter-spacing: .04em; text-transform: uppercase;
}


/* ---- Grid & cards ---- */
.team-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: start;
}
.team-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line-teal);
  border-radius: 16px; padding: 22px;
  box-shadow: 0 4px 14px rgba(19,66,21,.05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.team-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(19,66,21,.10);
  border-color: rgba(19,66,21,.24);
}
.team-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.team-avatar {
  flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--emerald-pine), var(--teal));
  color: #fff;
  font-family: var(--serif); font-weight: 600; font-size: 21px;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.team-head-text { min-width: 0; }
.team-name { margin: 0 0 3px; font-size: 22px; line-height: 1.12; }
.team-role {
  margin: 0; color: var(--emerald-pine);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.team-summary { margin: 0 0 14px; color: var(--ink); font-size: 15px; line-height: 1.6; }
.team-chips { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.team-chips .chip { font-size: 11.5px; padding: 3px 10px 3px 8px; }

/* ---- Expand / collapse ---- */
.team-expand { margin-top: auto; border-top: 1px solid var(--line-light); padding-top: 12px; }
.team-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: .02em; color: var(--teal);
  background: none; border: 0; padding: 11px 6px; cursor: pointer;
  min-height: 44px; border-radius: 6px; -webkit-tap-highlight-color: transparent;
}
.team-toggle:hover .team-toggle-label { text-decoration: underline; text-underline-offset: 3px; }
.team-toggle-icon { transition: transform .28s ease; color: var(--gold); }
.team-toggle[aria-expanded="true"] .team-toggle-icon { transform: rotate(180deg); }

.team-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
.team-panel > .team-panel-inner { overflow: hidden; min-height: 0; }
.team-toggle[aria-expanded="true"] + .team-panel { grid-template-rows: 1fr; }
.team-panel-inner { padding-top: 4px; }
.team-bio { margin: 8px 0 14px; color: var(--ink); font-size: 14.5px; line-height: 1.65; }
.team-details { margin: 0; display: grid; gap: 10px; }
.detail-row dt {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--emerald-pine); margin-bottom: 2px;
}
.detail-row dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }

/* Focus states */
.team-toggle:focus-visible,
.team-filter-list a:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* No-JS fallback: panels are open via <details>-like static reveal is not used;
   with JS disabled, reveal all panels so content stays reachable & crawlable. */
.no-js .team-panel { grid-template-rows: 1fr; }
.no-js .team-toggle { display: none; }

@media (prefers-reduced-motion: reduce) {
  .team-card, .team-panel, .team-toggle-icon { transition: none; }
}

@media (max-width: 560px) {
  .team-card { padding: 18px; }
  .team-avatar { width: 46px; height: 46px; font-size: 19px; }
  .team-name { font-size: 20px; }
  .team-grid { grid-template-columns: 1fr; gap: 14px; }
  .team-group-head { padding-left: 13px; }
}

/* ===================================================================
   BRAND MARKS (August 2026) — official Ahmad & Associates artwork
   The supplied JPGs are used unmodified; all cropping of the artwork's
   surrounding whitespace is done with CSS (overflow window + offsets).
   =================================================================== */
.brand { min-width: 0; }
.brand-logo {
  display: block; flex: 0 0 auto;
  width: clamp(112px, 11vw, 146px);
  aspect-ratio: 1366 / 527;      /* ink bounding box of the wordmark file */
  overflow: hidden;
}
.brand-logo img {
  display: block; width: 134.99%; max-width: none; height: auto;
  margin-left: -17.5%; margin-top: -20.86%;
  /* the artwork ships on a white ground; multiply drops it into the linen header */
  mix-blend-mode: multiply;
}
.brand-name.brand-tag {
  border-left: 1px solid var(--line-teal);
  padding-left: 12px; line-height: 1.1;
}
.brand-name.brand-tag span { margin-top: 0; }

/* Header must never push the phone/menu controls off-canvas */
.header-inner { gap: 10px; flex-wrap: nowrap; }
.header-phone-mobile { min-width: 0; }
/* The wordmark carries the firm name, so the strap line is dropped from the
   header entirely - it keeps the nav + CTA cluster on one line at every width. */
.brand-name.brand-tag { display: none; }
@media (max-width: 1060px) { .brand-logo { width: clamp(108px, 30vw, 138px); } }
@media (max-width: 400px) {
  .brand-logo { width: 108px; }
}

/* Footer monogram tile (evergreen square, white monogram) */
.footer-brand { display: block; }
.footer-logo {
  display: block; width: 54px; height: 54px; overflow: hidden;
  border-radius: 6px; margin-bottom: 14px;
  border: 1px solid rgba(248, 247, 243, 0.16);
}
/* The source square already centers the monogram, so show it whole. */
.footer-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ===================================================================
   TEAM FEATURE (homepage / about / es) — firm-wide, not attorney-specific
   =================================================================== */
.team-feature { display: grid; gap: 30px; align-items: start; }
@media (min-width: 900px) {
  .team-feature { grid-template-columns: 1.02fr .98fr; gap: 56px; }
}
.team-feature-media { display: grid; gap: 14px; margin: 0; min-width: 0; }
.team-photo {
  display: block; width: 100%; overflow: hidden; position: relative;
  border: 1px solid var(--line-teal); border-radius: 4px; background: var(--mist);
}
.team-photo--group { aspect-ratio: 1622 / 1080; }
.team-photo--group img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
/* Portrait crop of the two-attorney file: window onto the photographed area,
   the JPG itself is untouched. */
.team-photo--pair { aspect-ratio: 719 / 1080; }
.team-photo--pair img { display: block; width: 225.6%; max-width: none; height: auto; margin-left: -62.7%; }
.team-photo-cap {
  display: block; font-size: 13px; line-height: 1.5; color: var(--slate);
  letter-spacing: .01em;
}
.team-feature-body .prose p + p { margin-top: 14px; }
.team-roles {
  margin-top: 22px; display: grid; gap: 10px; padding: 0; list-style: none;
}
.team-roles li {
  position: relative; padding-left: 20px; font-size: 15.5px; color: var(--ink);
}
.team-roles li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
}
.team-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.team-actions .btn { max-width: 100%; }

/* Team page hero band imagery */
.team-hero-media { margin-top: 26px; }
.team-hero-media .team-photo { border-color: rgba(248, 247, 243, 0.22); }
@media (min-width: 900px) {
  .team-intro-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
}

/* Team page: attorneys group head with photo */
.team-intro-split { margin-bottom: 26px; }
/* On phones the heading should lead, with the photo underneath it. */
@media (max-width: 899px) {
  .team-intro-split { display: grid; gap: 20px; }
  .team-intro-split > div { order: -1; }
}
.team-intro-split + .chip-legend { margin-top: 22px; }
.team-group-head--media { display: grid; gap: 24px; align-items: center; }
@media (min-width: 860px) {
  .team-group-head--media { grid-template-columns: 1.35fr .65fr; gap: 40px; }
}
.team-group-figure { margin: 0; display: grid; gap: 10px; max-width: 300px; }
@media (max-width: 859px) { .team-group-figure { max-width: 240px; } }


/* Desktop header: keep the nav + CTA cluster inside the container at 1000-1500px */
@media (min-width: 1000px) and (max-width: 1499px) {
  .nav-desktop ul { gap: clamp(12px, 1.1vw, 18px); }
  .header-cta { gap: 9px; }
  .header-cta .btn { padding: 10px 12px; }
  .header-phone { font-size: 14.5px; }
}

/* Compact desktop tier (1000-1199px): the narrowest widths that still show the
   full nav. Type and buttons tighten, and the plain-text phone number steps
   aside for the buttons — the number is still one tap away in the hero, the
   sticky mobile bar, the contact page and the footer. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .header-inner { gap: 12px; min-height: 68px; }
  .nav-desktop ul { gap: 12px; }
  .nav-desktop a { font-size: 13.4px; }
  .header-cta { gap: 7px; }
  .header-cta .btn { padding: 8px 10px; min-height: 38px; font-size: 11.8px; }
  .header-cta .lang-toggle { font-size: 11px; padding-inline: 7px; }
  .header-phone { display: none; }
  .brand-logo { width: clamp(96px, 9.4vw, 112px); }
}

/* Español stays a visible utility link on desktop (small, outside the primary
   nav rhythm) so bilingual visitors can always find it. */
@media (min-width: 1000px) {
  .header-cta .lang-toggle { order: -1; font-size: 12px; padding-inline: 9px; }
}

/* Blog now lives inside Resources, freeing a reliable desktop slot for the
   secondary Clio payment utility without pushing the nav outside the content
   rhythm. Mobile keeps payment in the drawer. */
@media (max-width: 1279px) { .brand-logo { width: clamp(108px, 12vw, 132px); } }

/* Spanish labels are materially longer than the English ones, so the es header
   keeps the mobile menu until there is genuinely room for the full nav. */
@media (max-width: 1099px) {
  html[lang="es"] .nav-desktop,
  html[lang="es"] .header-cta { display: none; }
  html[lang="es"] .nav-toggle { display: inline-grid; }
  html[lang="es"] .nav-overlay { display: flex; }
  html[lang="es"] .nav-scrim { display: block; }
  html[lang="es"] .header-phone-mobile { display: inline-flex; }
}

/* =========================================================================
   AUGUST 2026 PRODUCTION EDITS
   1. Homepage hero: photo card -> full-bleed blended backdrop (CSS only;
      the source image file is untouched).
   2. Google review strip: clickable + small-screen fixes.
   3. Social links (footer row + homepage band).
   4. Resources -> Videos cards.
   5. Team headshot cards (uniform, equal-height).
   ========================================================================= */

/* ---- 1. Hero backdrop (AUG 2026 rev. B) ------------------------------
   The hero photo is no longer edge-to-edge across the viewport: the backdrop
   is centered and constrained to the same max-width as .wrap, so the header,
   hero and every section below share one content rhythm with balanced
   left/right whitespace.

   PHOTO NOTE: the hero uses the client's Washington Monument + cherry blossom
   homepage asset (`assets/hero-dc-cherry-blossoms.jpg`). The image is a plain
   <img> inside .hero-backdrop, so future swaps only need the src + alt changed.
   Best crop: visual interest on the RIGHT third; the left third sits under the
   headline veil. Fine-tune with `object-position` below if needed.
   ---------------------------------------------------------------------- */
.hero--backdrop { position: relative; isolation: isolate; overflow: hidden; }
.hero--backdrop .hero-backdrop {
  position: absolute; top: 0; bottom: 0; left: 50%; right: auto;
  transform: translateX(-50%);
  width: min(calc(var(--maxw) + 40px), calc(100% - 28px));
  z-index: 0;
  border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
  pointer-events: none;
}
.hero--backdrop .hero-backdrop img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 78% 44%;
  aspect-ratio: auto; transform: scale(1.045);
  opacity: 1;
  /* Bolder, clearer photo (was washed out): a touch more contrast, saturation
     and warmth so the skyline reads crisply on the right side. */
  filter: saturate(1.14) contrast(1.1) brightness(1.02);
  /* Fade ONLY toward the left-side copy; the right two-thirds stay at full
     strength. Vertical mask keeps the top/bottom edges from reading as a
     hard rectangle. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.08) 14%, rgba(0,0,0,.42) 31%, #000 51%, #000 82%, rgba(0,0,0,.58) 93%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,.36) 0%, #000 12%, #000 78%, rgba(0,0,0,.42) 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.08) 14%, rgba(0,0,0,.42) 31%, #000 51%, #000 82%, rgba(0,0,0,.58) 93%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,.36) 0%, #000 12%, #000 78%, rgba(0,0,0,.42) 90%, transparent 100%);
  mask-composite: intersect;
}
/* Readability veil — lives INSIDE the constrained backdrop so it can never
   wash the whole viewport. Heavy behind the headline, gone by mid-frame. */
.hero--backdrop .hero-backdrop::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(94deg,
      rgba(248,247,243,.99) 0%,
      rgba(248,247,243,.97) 26%,
      rgba(248,247,243,.88) 38%,
      rgba(248,247,243,.58) 48%,
      rgba(248,247,243,.24) 58%,
      rgba(248,247,243,.05) 70%,
      rgba(248,247,243,0) 82%,
      rgba(248,247,243,.10) 94%,
      rgba(248,247,243,.42) 100%),
    linear-gradient(to bottom,
      rgba(248,247,243,.22) 0%,
      rgba(248,247,243,0) 16%,
      rgba(248,247,243,0) 62%,
      rgba(248,247,243,.34) 84%,
      rgba(248,247,243,.78) 100%);
}
.hero--backdrop .hero-grid { position: relative; z-index: 2; }
@media (min-width: 900px) {
  .hero--backdrop { padding-block: clamp(76px, 8vw, 118px) clamp(60px, 6.5vw, 96px); }
  .hero--backdrop .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: clamp(400px, 41vw, 520px);
    align-items: center;
  }
  .hero--backdrop .hero-copy { max-width: 33rem; }
}
@media (max-width: 899px) {
  /* Mobile: the backdrop becomes a tall soft wash behind the copy. Readability
     first — the veil is stronger and the focal point shifts to the skyline. */
  .hero--backdrop { padding-block: clamp(36px, 8vw, 56px) clamp(28px, 6vw, 44px); }
  .hero--backdrop .hero-grid { grid-template-columns: 1fr; min-height: clamp(360px, 76vw, 460px); }
  .hero--backdrop .hero-backdrop { width: 100%; }
  .hero--backdrop .hero-backdrop img {
    object-position: 82% 34%; opacity: .95; transform: scale(1.04);
    filter: saturate(1.1) contrast(1.06);
    -webkit-mask-image:
      linear-gradient(to right, rgba(0,0,0,.24) 0%, #000 42%, #000 82%, rgba(0,0,0,.25) 100%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 20%, #000 52%, #000 80%, rgba(0,0,0,.12) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, rgba(0,0,0,.24) 0%, #000 42%, #000 82%, rgba(0,0,0,.25) 100%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 20%, #000 52%, #000 80%, rgba(0,0,0,.12) 100%);
    mask-composite: intersect;
  }
  .hero--backdrop .hero-backdrop::after {
    background:
      linear-gradient(92deg,
        rgba(248,247,243,.97) 0%,
        rgba(248,247,243,.86) 42%,
        rgba(248,247,243,.50) 64%,
        rgba(248,247,243,.18) 82%,
        rgba(248,247,243,.42) 100%),
      linear-gradient(to bottom,
        rgba(248,247,243,.88) 0%,
        rgba(248,247,243,.74) 34%,
        rgba(248,247,243,.42) 58%,
        rgba(248,247,243,.26) 78%,
        rgba(248,247,243,.88) 100%);
  }
  .hero--backdrop .hero-copy { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--backdrop .hero-backdrop img { transform: none; }
}

/* ---- 2. Clickable Google review strip -------------------------------- */
a.review-strip--link {
  text-decoration: none; color: inherit; min-width: 0;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
a.review-strip--link:hover,
a.review-strip--link:focus-visible {
  border-color: var(--emerald-pine);
  box-shadow: 0 10px 26px rgba(19,66,21,.14);
  transform: translateY(-1px);
}
a.review-strip--link:focus-visible { outline: 2px solid var(--emerald-pine); outline-offset: 3px; }
.review-cta {
  margin-left: auto; color: var(--emerald-pine);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.review-strip > * { min-width: 0; }
@media (max-width: 1023px) { .review-cta { display: none; } }
/* Small screens: guarantee "Se Habla Español" is fully visible, never clipped.
   Single line where it fits; otherwise a clean centered second line. */
@media (max-width: 560px) {
  .review-strip { flex-wrap: wrap; row-gap: 6px; padding-inline: 10px; max-width: 100%; }
  .review-es { white-space: nowrap; font-size: 12px; }
}
@media (max-width: 430px) {
  .review-strip { gap: 4px 6px; padding: 10px 9px; }
  .review-stars { font-size: 11.5px; }
  .review-score, .review-count { font-size: 11px; }
  /* Push Español to its own full-width centered line and drop the divider
     that would otherwise dangle at the end of the first line. */
  .review-es { flex: 0 0 100%; text-align: center; font-size: 12px; }
  .review-strip .review-sep:has(+ .review-es) { display: none; }
}
@media (max-width: 340px) {
  .review-strip .review-sep { display: none; }
  .review-score, .review-count { font-size: 10.5px; }
}

/* ---- 3. Social links ------------------------------------------------- */
.footer-social { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(248,247,243,.14); }
.footer-social h4 {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(248,247,243,.68); margin: 0 0 12px; font-weight: 600;
}
.social-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.social-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px; border-radius: 999px;
  border: 1px solid rgba(248,247,243,.22); color: var(--ivory);
  text-decoration: none; font-size: 13px; font-weight: 500; line-height: 1;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.social-link svg { width: 17px; height: 17px; flex-shrink: 0; }
.social-link:hover, .social-link:focus-visible {
  background: rgba(248,247,243,.10); border-color: rgba(248,247,243,.5); transform: translateY(-1px);
}
.social-link:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
.social-name { white-space: nowrap; }

/* Homepage "Follow the firm" band — light surface variant */
.social-band { background: var(--linen); border-top: 1px solid var(--line-teal); }
.social-band .social-band-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 28px;
}
.social-band h2 { font-size: clamp(21px, 2.4vw, 27px); margin: 6px 0 6px; }
.social-band p { color: var(--slate); margin: 0; max-width: 46ch; font-size: 15.5px; }
.social-band .social-row { gap: 10px; }
.social-band .social-link {
  border-color: var(--line-teal); color: var(--evergreen); background: #fff;
  box-shadow: 0 4px 14px rgba(19,66,21,.05);
}
.social-band .social-link:hover, .social-band .social-link:focus-visible {
  background: #fff; border-color: var(--emerald-pine); box-shadow: 0 8px 20px rgba(19,66,21,.10);
}
@media (max-width: 599px) {
  .social-band .social-band-inner { flex-direction: column; align-items: flex-start; }
  .social-link { padding: 8px 12px 8px 10px; font-size: 12.5px; }
}

/* ---- 4. Videos & resources cards ------------------------------------- */
.video-grid {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 16px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.video-card {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  background: #fff; border: 1px solid var(--line-teal); border-radius: 14px;
  padding: 20px 18px 18px; text-decoration: none; color: inherit;
  box-shadow: 0 6px 18px rgba(19,66,21,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.video-card:hover, .video-card:focus-visible {
  transform: translateY(-2px); border-color: var(--emerald-pine);
  box-shadow: 0 14px 30px rgba(19,66,21,.12);
}
.video-card:focus-visible { outline: 2px solid var(--emerald-pine); outline-offset: 3px; }
.video-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mist-green); color: var(--evergreen); flex-shrink: 0;
}
.video-icon svg { width: 22px; height: 22px; }
.video-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.video-kicker, .video-title, .video-desc, .video-more { display: block; }
.video-kicker {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--emerald-pine); font-weight: 600;
}
.video-title { font-family: var(--serif); font-size: 18px; line-height: 1.3; color: var(--evergreen); margin: 0; }
.video-desc { font-size: 14.5px; line-height: 1.55; color: var(--slate); margin: 0; }
.video-more { margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--emerald-pine); }

/* ---- Mobile nav: indented sub-item (Videos under Resources) ---------- */
.nav-overlay li.nav-sub > a {
  padding-left: 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(246,243,236,.76);
  opacity: 1;
}

/* ---- 5. Team headshot cards ------------------------------------------ */
.team-grid { align-items: stretch; }
.team-card { height: 100%; overflow: hidden; }
/* Photo bleeds to the card edge: cancel the 22px card padding on three sides. */
.team-photo-wrap {
  position: relative; margin: -22px -22px 18px; background: var(--mist-green);
  border-radius: 15px 15px 0 0; overflow: hidden;
}
/* Equal-height cards: the disclosure control aligns along the bottom edge. */
.team-card--photo .team-chips { margin-bottom: 16px; }
.team-card--photo .team-expand { margin-top: auto; }
.team-photo-wrap img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
}
.team-card--photo .team-card-head { margin-bottom: 12px; }
.team-card--photo .team-avatar { display: none; }
@media (max-width: 599px) {
  .team-card { padding: 18px; }
  .team-photo-wrap { margin: -18px -18px 14px; }
  .team-photo-wrap img { aspect-ratio: 4 / 5; object-position: center top; }
}


/* =========================================================================
   AUGUST 2026 — HEADER CONTAINMENT
   The header already uses .wrap, but the logo / nav / CTA cluster read as
   spread wider than the content below at 1440-1536px. Tighten the desktop
   cluster (smaller gaps, slightly smaller nav type, compact CTA buttons) so
   the row visually sits inside the same centered column as every section.
   Nav ORDER is unchanged for the visible primary items: About Us, Practice
   Areas, Team, Areas We Serve, Contact Us. Resources remains in the drawer,
   footer, and homepage/resource sections.
   ========================================================================= */
@media (min-width: 1200px) {
  .header-inner { gap: clamp(14px, 1.2vw, 22px); min-height: 74px; }
  .nav-desktop ul { gap: clamp(11px, 0.95vw, 16px); }
  .nav-desktop a { font-size: 14px; }
  .header-cta { gap: 9px; }
  .header-cta .btn { padding: 9px 12px; min-height: 40px; font-size: 12.6px; }
  .header-phone { font-size: 14px; }
  .brand-logo { width: clamp(112px, 8.6vw, 134px); }
}

/* Spanish desktop tier: labels run longer, so the cluster tightens further. */
@media (min-width: 1100px) and (max-width: 1339px) {
  html[lang="es"] .nav-desktop a { font-size: 13px; }
  html[lang="es"] .nav-desktop ul { gap: 11px; }
  html[lang="es"] .header-cta { gap: 7px; }
  html[lang="es"] .header-cta .btn { padding: 8px 10px; font-size: 11.6px; }
  html[lang="es"] .header-phone { display: none; }
}
/* No wide-screen upsizing: the content column is capped at 1180px, so the header
   cluster keeps the same compact metrics at 1440, 1536, and 1920 - it stays inside
   the centered grid with balanced left/right whitespace at every desktop width. */

/* =========================================================================
   AUGUST 2026 — FINAL CLIENT FEEDBACK PASS
   1. Desktop dropdown alignment/containment (all menus match Practice Areas).
   2. Mobile drawer: brand serif type, calmer rows, compact CTA cluster.
   3. Footer Resources row (Resources moved out of the crowded top nav).
   4. Hero: bolder photo, focal point further right, fade only toward the copy.
   ========================================================================= */

/* ---- 1. Dropdowns: one shared geometry -------------------------------
   Every .mega (Practice Areas, Areas We Serve, Resources) is anchored to the
   left edge of its nav item and nudged horizontally by --mega-shift, which
   app.js sets so the panel always stays inside the centered header container
   at 1024 / 1100 / 1200 / 1280 / 1366 / 1440. No panel is centered under its
   trigger any more, so none of them can hang off-screen. */
.mega {
  left: 0; right: auto;
  transform: translate(var(--mega-shift, 0px), 8px);
  min-width: min(640px, calc(100vw - 40px));
  max-width: calc(100vw - 40px);
}
.mega--narrow {
  min-width: 340px;
  max-width: min(400px, calc(100vw - 40px));
}
.nav-desktop .has-menu:hover .mega,
.nav-desktop .has-menu:focus-within .mega {
  transform: translate(var(--mega-shift, 0px), 0);
}
/* Identical internal rhythm for the narrow menus and the big one */
.mega--narrow .mega-col { padding: 20px 22px 22px; }
.mega--narrow .mega-col li a { min-height: 36px; font-size: 14.2px; }

/* ---- 2. Mobile drawer: classier, tighter ----------------------------- */
.nav-overlay {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(212,175,102,.14), transparent 62%),
    var(--teal);
}
.nav-overlay ul { margin-top: 2px; }
.nav-overlay a {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1.2;
  color: rgba(246,243,236,.95);
  padding: 14px 2px;
  border-bottom: 1px solid rgba(246,243,236,.14);
  transition: color .18s ease, padding-left .18s ease;
}
.nav-overlay a:hover, .nav-overlay a:focus-visible, .nav-overlay a.is-active {
  color: var(--gold);
  padding-left: 6px;
}
.nav-overlay .nav-sub a {
  font-family: var(--sans);
  font-size: 13.2px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: rgba(246,243,236,.72);
  padding: 11px 2px 11px 18px;
  min-height: 42px;
  position: relative;
}
.nav-overlay .nav-sub a::before {
  content: ""; position: absolute; left: 2px; top: 50%;
  width: 9px; height: 1px; background: var(--gold); opacity: .75;
}
.nav-overlay .nav-sub a:hover { padding-left: 22px; }
.nav-overlay .overlay-foot { margin-top: 20px; }
.overlay-card { padding: 16px 15px 15px; border-radius: 16px; }
.overlay-kicker { font-size: 10.4px; letter-spacing: .18em; margin-bottom: 9px; }
.nav-overlay .overlay-phone {
  font-size: 18px; min-height: 46px; letter-spacing: .01em;
}
.overlay-note { margin: 8px 0 11px; font-size: 12.4px; }
/* Schedule + Pay sit side by side so the whole cluster stays compact and
   every target is still a comfortable tap size. */
.overlay-actions { grid-template-columns: 1.35fr .65fr; gap: 8px; }
.nav-overlay .overlay-action {
  font-size: 13.2px; min-height: 46px; padding: 11px 10px;
  letter-spacing: .01em;
}
.nav-overlay .overlay-lang {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 9px 12px;
  font-family: var(--sans); font-size: 12.4px; font-weight: 650;
  letter-spacing: .04em; color: var(--gold);
  border: 1px solid rgba(212,175,102,.45); border-radius: 999px;
  background: rgba(212,175,102,.08);
}
.nav-overlay .overlay-lang:hover { background: rgba(212,175,102,.18); color: var(--ivory); }
@media (max-width: 360px) {
  .overlay-actions { grid-template-columns: 1fr; }
  .nav-overlay a { font-size: 19.5px; padding: 12px 2px; }
}

/* ---- 3. Footer Resources row ----------------------------------------- */
.footer-resources { margin-top: 26px; }
.footer-resources h4 {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 12px;
}
.footer-res-row {
  display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0; margin: 0; list-style: none;
}
.footer-res-row a {
  display: inline-flex; align-items: center; min-height: 38px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(246,243,236,.20);
  background: rgba(246,243,236,.05);
  font-size: 13.2px; font-weight: 550; color: rgba(246,243,236,.86);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.footer-res-row a:hover { background: rgba(246,243,236,.12); border-color: var(--gold); color: var(--ivory); }

/* ---- 4. Hero: bolder photo, focal point further right ----------------
   Desktop: the monument now sits around the right third of the frame, the
   photo keeps full contrast from mid-frame outward, and the fade is applied
   toward the headline column plus a soft feather at the outer edges so the
   image never reads as a pasted rectangle. */
.hero--backdrop .hero-backdrop img {
  object-position: 34% 46%;
  filter: saturate(1.2) contrast(1.14) brightness(1.01);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.06) 11%, rgba(0,0,0,.34) 27%, rgba(0,0,0,.74) 43%, #000 55%, #000 80%, rgba(0,0,0,.78) 90%, rgba(0,0,0,.34) 96%, rgba(0,0,0,.08) 99%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,.42) 0%, #000 11%, #000 82%, rgba(0,0,0,.5) 93%, rgba(0,0,0,.14) 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.06) 11%, rgba(0,0,0,.34) 27%, rgba(0,0,0,.74) 43%, #000 55%, #000 80%, rgba(0,0,0,.78) 90%, rgba(0,0,0,.34) 96%, rgba(0,0,0,.08) 99%, transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,.42) 0%, #000 11%, #000 82%, rgba(0,0,0,.5) 93%, rgba(0,0,0,.14) 100%);
  mask-composite: intersect;
}
.hero--backdrop .hero-backdrop::after {
  background:
    linear-gradient(94deg,
      rgba(248,247,243,.99) 0%,
      rgba(248,247,243,.96) 24%,
      rgba(248,247,243,.84) 36%,
      rgba(248,247,243,.46) 47%,
      rgba(248,247,243,.14) 57%,
      rgba(248,247,243,0) 68%,
      rgba(248,247,243,0) 92%,
      rgba(248,247,243,.16) 100%),
    linear-gradient(to bottom,
      rgba(248,247,243,.20) 0%,
      rgba(248,247,243,0) 15%,
      rgba(248,247,243,0) 66%,
      rgba(248,247,243,.30) 86%,
      rgba(248,247,243,.72) 100%);
}
@media (max-width: 899px) {
  /* Mobile: same idea — the monument moves toward the right of the frame and
     the wash concentrates behind the headline instead of flattening the photo. */
  .hero--backdrop .hero-backdrop img {
    object-position: 50% 40%; opacity: 1;
    filter: saturate(1.16) contrast(1.1);
    -webkit-mask-image:
      linear-gradient(to right, rgba(0,0,0,.34) 0%, #000 36%, #000 90%, rgba(0,0,0,.5) 97%, rgba(0,0,0,.16) 100%),
      linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,.6) 18%, #000 46%, #000 84%, rgba(0,0,0,.2) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, rgba(0,0,0,.34) 0%, #000 36%, #000 90%, rgba(0,0,0,.5) 97%, rgba(0,0,0,.16) 100%),
      linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,.6) 18%, #000 46%, #000 84%, rgba(0,0,0,.2) 100%);
    mask-composite: intersect;
  }
  .hero--backdrop .hero-backdrop::after {
    background:
      linear-gradient(92deg,
        rgba(248,247,243,.95) 0%,
        rgba(248,247,243,.78) 38%,
        rgba(248,247,243,.34) 60%,
        rgba(248,247,243,.06) 82%,
        rgba(248,247,243,.24) 100%),
      linear-gradient(to bottom,
        rgba(248,247,243,.86) 0%,
        rgba(248,247,243,.64) 32%,
        rgba(248,247,243,.26) 58%,
        rgba(248,247,243,.12) 78%,
        rgba(248,247,243,.8) 100%);
  }
}

/* Homepage resource links row (Resources lives in the body + footer now) */
.resource-links { display: flex; flex-wrap: wrap; gap: 10px; }