/* ============================================
   proservices-static template
   Professional-services vertical (lawyers + accountants). A trust-forward,
   authoritative LIGHT-NAVY theme: cool near-white body + a real brand navy
   + a DARKENED brand-strong for AA text/CTAs + a confident brand accent
   (brass/gold for accountants OR a bright confident blue for litigators, per
   prospect). Re-hued per prospect via deriveProPalette (template.json
   paletteMode="pro").

   BOLD RESULTS-FORWARD direction (malmanlaw-inspired): the confident,
   results-first energy of a top personal-injury / litigation firm applied to the
   whole vertical. SHARP 0-radius corners, HIGH contrast, bold uppercase CTAs
   ("CALL NOW" energy), oversized serif result numbers, and deep brand-navy
   section bands carry authority. Keeps the three-tier type system (Playfair
   Display display / Plus Jakarta Sans UI / Inter body — NEVER Fraunces/Lora),
   disciplined photo slots with graceful gradient fallbacks, and considered
   motion. The bold-but-tokenized treatment reads confident, not generic: every
   result number, stat and CTA is content-driven and real-data-gated.
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Brand (real, verbatim) + derived AA-safe strong + refined accent */
  --color-brand:        #1E5A8C;        /* real brand navy: eyebrows, icons, headings, accents */
  --color-brand-strong: #165080;  /* darkened navy (AA on light): button fills, links, small text */
  --color-accent:       #B0894F;       /* brass/gold, DECORATIVE: rules, stars, hero CTA, underlines */
  --color-brand-fg:     #FFFFFF;       /* text on brand/brand-strong fills (white) */
  --color-accent-soft:  rgba(30, 90, 140, 0.07);    /* faint brand tint for icon chips + hovers */

  /* Cool neutral surfaces (a restrained brand cast, corporate not warm) */
  --color-bg:        #F8F8F9;        /* page base, cool near-white */
  --color-surface:   #F3F4F5;   /* alt bands, cards */
  --color-surface-2: #EEEFF1;  /* monogram bg, nested cards */
  --color-muted:     #E7EAEC;     /* subtle fills */
  --color-border:    #DEE1E4;    /* hairline borders */

  /* Text */
  --color-ink:     #151E26;     /* deep navy-ink */
  --color-ink-dim: #586D83;  /* secondary / captions (AA on the light base) */

  /* Deep brand-navy for hero panels, the consult CTA band + footer */
  --color-hero-ink:   #122E45;
  --color-hero-ink-2: #081927;
  --color-hero-overlay: rgba(18, 46, 69, 0.82); /* navy wash over a hero photo */
  --color-hero-scrim:   rgba(8, 16, 22, 0.62);   /* bottom-up scrim for legibility */
  --color-footer:       #091C2B;      /* deep brand-navy footer */

  /* Shadows: soft, diffuse, premium (one shadow OR a hairline — never both at rest) */
  --shadow-sm: 0 1px 2px rgba(12,20,38,0.05);
  --shadow-md: 0 20px 48px -30px rgba(12,20,38,0.34);
  --shadow-lg: 0 40px 90px -44px rgba(12,20,38,0.42);
  --shadow-hover: 0 28px 60px -34px rgba(12,20,38,0.36);

  /* Typography — three tiers. Playfair Display (elegant high-contrast serif) for
     display; Plus Jakarta Sans for the crisp UI layer (eyebrows/nav/buttons/
     labels); Inter for body. No Fraunces/Lora, ever. */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing — a consistent scale with a generous editorial top end */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;

  /* Layout — SHARP, malmanlaw-style. Corners drive to 0 for a bold,
     results-forward, high-authority read. A hair of radius (2px) survives only
     where a pure-square edge would look like a rendering bug on the smallest
     interactive chips; everything structural is a crisp rectangle. */
  --max-width: 1200px;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-chip: 2px;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-brand-strong); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-brand); }
button { cursor: pointer; font-family: var(--font-sans); }

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 3px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* --- Typography --- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.12; color: var(--color-ink); letter-spacing: -0.015em; }
h1 { font-size: clamp(2.6rem, 5.2vw, 4.25rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: clamp(2.05rem, 3.8vw, 3.15rem); font-weight: 800; line-height: 1.06; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 700; line-height: 1.22; }

.section-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-brand-strong);
  margin-bottom: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.section-label::before {
  content: '';
  width: 28px; height: 1.5px;
  background: var(--color-accent);
}

.section-title {
  color: var(--color-ink);
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

.section-desc {
  color: var(--color-ink-dim);
  font-size: 1.08rem;
  max-width: 640px;
  line-height: 1.75;
}

.section-head-center {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-xl);
}
.section-head-center .section-label { justify-content: center; }
.section-head-center .section-desc { margin-left: auto; margin-right: auto; }

/* --- Buttons — bold, uppercase, confident (malmanlaw "CALL NOW" energy) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.05rem 2rem;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-brand-strong);
  color: var(--color-brand-fg);
}
.btn-primary:hover {
  filter: brightness(1.1);
  color: var(--color-brand-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Gold accent CTA — the marquee action (hero + consult band + close bands) */
.btn-accent {
  background: var(--color-accent);
  color: var(--color-hero-ink-2);
  border-color: var(--color-accent);
  font-weight: 700;
}
.btn-accent:hover {
  filter: brightness(1.06);
  color: var(--color-hero-ink-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  color: var(--color-brand-strong);
  border-color: var(--color-border);
}
.btn-outline:hover {
  background: var(--color-surface);
  border-color: var(--color-brand);
  color: var(--color-brand-strong);
  transform: translateY(-2px);
}

/* Hero/band outline: white on the deep navy */
.btn-hero-outline {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.btn-hero-outline:hover {
  background: rgba(255,255,255,0.16);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}

/* --- Navigation --- */
/* Solid light bar at ALL scroll positions. A dark-ink logo we don't recolour reads
   cleanly on light (matching how premium firms ship an "on-light" logo), so there is
   no transparent-over-hero state and no logo pill to clash with the bar. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.05rem 0;
  /* OPAQUE white — matches the logo's baked-in white plate exactly, so the mark
     blends into the bar with no visible box. (A translucent bar let the dark hero
     bleed through and read darker than the opaque-white plate.) */
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}
.nav.scrolled {
  padding: 0.6rem 0;
  background: #ffffff;
  box-shadow: 0 1px 0 var(--color-border), var(--shadow-sm);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* Real logo lockup, or a clean wordmark when no logo asset exists. The bar is
   always light, so the real (un-recoloured) mark reads directly on it — no pill. */
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo-img { height: 44px; width: auto; display: block; max-width: 250px; object-fit: contain; }
.nav.scrolled .nav-logo-img { height: 38px; }
/* Always show the primary (dark-ink) logo on the light bar; a light knockout would
   vanish on light, so it is never used here. */
.nav-logo-dark { display: none; }
.nav-logo-light { display: block; }
.nav-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  line-height: 1;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
}
.nav-links a {
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  padding: 0.25rem 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1.5px;
  background: var(--color-accent);
  transition: width 0.3s;
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 1.1rem; }
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav-phone svg {
  width: 16px; height: 16px;
  color: var(--color-brand-strong);
  flex-shrink: 0;
}
.nav-phone:hover { color: var(--color-brand); }

.nav-cta {
  padding: 0.7rem 1.5rem;
  background: var(--color-accent);
  color: var(--color-hero-ink-2) !important;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
}
.nav-cta:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--shadow-sm); color: var(--color-hero-ink-2) !important; }
.nav-cta::after { display: none !important; }

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  border-radius: 1px;
  background: var(--color-ink);
  transition: all 0.3s;
}
.nav-toggle.open span { background: var(--color-ink); }
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Deep brand-navy gradient fallback when no hero photo is staged */
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
}
/* A faint architectural grid over the gradient hero fallback — quiet texture so
   the no-photo hero never reads flat/empty. */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 120% at 15% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
  .hero-video-poster { display: block; }
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: var(--color-hero-overlay);
  background:
    linear-gradient(0deg, var(--color-hero-scrim) 0%, transparent 58%),
    linear-gradient(97deg,
      color-mix(in srgb, var(--color-hero-ink) 92%, transparent) 0%,
      color-mix(in srgb, var(--color-hero-ink) 80%, transparent) 34%,
      color-mix(in srgb, var(--color-hero-ink) 54%, transparent) 66%,
      color-mix(in srgb, var(--color-hero-ink) 40%, transparent) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-content { max-width: 700px; padding: 4rem 0 4rem; }

/* Bold "RECORD-SETTING RESULTS" pill — a confident accent-bordered chip that
   sets the results-forward tone the moment the page loads. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius: var(--radius-chip);
  margin-bottom: var(--space-md);
}
.hero-badge::before { content: ''; width: 8px; height: 8px; background: var(--color-accent); }

/* Oversized hero result number — the malmanlaw signature. Content-gated
   (hero.resultStat), so a firm without a headline number drops it cleanly. */
.hero-result {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  padding-left: 1.15rem;
  border-left: 4px solid var(--color-accent);
}
.hero-result-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
}
.hero-result-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  max-width: 15ch;
  line-height: 1.35;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.8rem, 5.6vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.012em;
  text-wrap: balance;
  text-shadow: 0 1px 30px rgba(0, 0, 0, 0.3);
  margin-bottom: var(--space-md);
}
/* The accent is the ONE phrase that carries the eye — set in Playfair ITALIC,
   in brass. A coloured italic key phrase reads editorial + premium and never
   collides with descenders. Keep it short at authoring time (2-4 words). */
.hero h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--color-accent);
}

.hero-sub {
  font-size: 1.18rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--space-lg);
  max-width: 590px;
  line-height: 1.72;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}
/* In the hero, the primary action reads as the gold marquee CTA */
.hero .btn-primary {
  background: var(--color-accent);
  color: var(--color-hero-ink-2);
  border-color: var(--color-accent);
  font-weight: 700;
}
.hero .btn-primary:hover { filter: brightness(1.06); color: var(--color-hero-ink-2); }

.hero-trust {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-size: 0.95rem;
}
.hero-rating strong { font-family: var(--font-display); font-size: 1.2rem; }
.hero-stars { color: var(--color-accent); letter-spacing: 0.06em; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
}
.hero-chip svg { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; }

/* Scroll cue on the gradient (no-media) hero — a quiet considered detail */
.hero-scrollcue {
  position: absolute; z-index: 2;
  left: 50%; bottom: 1.75rem;
  transform: translateX(-50%);
  width: 24px; height: 38px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 14px;
  display: flex; justify-content: center;
}
.hero-scrollcue span {
  width: 3px; height: 8px; margin-top: 7px;
  border-radius: 2px;
  background: var(--color-accent);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue { 0%,100% { opacity: 0.4; transform: translateY(0); } 50% { opacity: 1; transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .hero-scrollcue span { animation: none; } }

/* --- Hero archetypes: split + bandoverlay (fullbleed = the base above) --- */
.hero-split { min-height: auto; }
.hero-split .hero-inner {
  max-width: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  min-height: 90vh;
}
.hero-split .hero-content {
  max-width: none;
  padding: clamp(7.5rem, 9vw, 9rem) clamp(1.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 4.5rem);
  background: linear-gradient(160deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-figure {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-accent) 175%);
}
.hero-figure::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 3px; background: var(--color-accent); opacity: 0.85;
}
.hero-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bandoverlay: full-bleed photo + a solid brand CTA band low on the hero. */
.hero-bandoverlay .hero-inner {
  display: flex;
  align-items: flex-end;
  min-height: 92vh;
  padding: 7rem 0 clamp(2rem, 5vw, 3.5rem);
}
.hero-bandoverlay .hero-overlay { background: linear-gradient(0deg, var(--color-hero-scrim) 0%, transparent 68%); }
.hero-bandoverlay .hero-content {
  max-width: 920px;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.25rem);
  background: linear-gradient(140deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* --- Hero lead-capture form (solid card on the dark hero) --- */
.hero-inner:has(.hero-lead) {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.hero-inner:has(.hero-lead) .hero-content { max-width: none; }
/* Align the consult form's top with the H1 (drop it past the eyebrow: content
   padding + eyebrow height). Scales down cleanly toward the stacked layout. */
.hero-inner:has(.hero-lead) .hero-lead { margin-top: clamp(0rem, 10vw, 8rem); }
.hero-split .hero-inner:has(.hero-lead) { grid-template-columns: 1.05fr 1fr; }
.hero-split .hero-inner:has(.hero-lead) .hero-figure { grid-column: 2; grid-row: 1; }
.hero-split .hero-inner:has(.hero-lead) .hero-lead {
  grid-column: 2; grid-row: 1;
  align-self: center; justify-self: center;
  max-width: 420px;
  margin: clamp(1.5rem, 3vw, 2.5rem);
}
.hero-bandoverlay .hero-inner:has(.hero-lead) {
  align-items: end;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.86fr);
}

.consult-form.hero-lead {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  background: linear-gradient(158deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hero-lead-head { margin-bottom: var(--space-sm); }
.hero-lead h2 { color: #fff; font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.15; margin: 0; }
.hero-lead-sub { color: rgba(255,255,255,0.82); font-size: 0.9rem; margin-top: 0.4rem; line-height: 1.5; }
.hero-lead .form-group { margin-bottom: 0.7rem; }
.hero-lead .form-row { gap: 0.7rem; }
.consult-form.hero-lead label { color: rgba(255,255,255,0.88); }
.consult-form.hero-lead input,
.consult-form.hero-lead select {
  background: #fff;
  border-color: rgba(255,255,255,0.42);
  color: var(--color-ink);
}
.consult-form.hero-lead input::placeholder { color: color-mix(in srgb, var(--color-ink-dim) 72%, transparent); }
.consult-form.hero-lead input:focus,
.consult-form.hero-lead select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.hero-lead-submit { width: 100%; margin-top: 0.35rem; }
.hero-lead-privacy { color: rgba(255,255,255,0.72); font-size: 0.72rem; margin-top: 0.7rem; text-align: center; }

/* --- Trust strip --- */
.trust-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.trust-bar-inner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  padding: 1.2rem clamp(1.25rem, 4vw, 2.5rem);
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
}
.trust-item svg { width: 20px; height: 20px; color: var(--color-brand); flex-shrink: 0; }
/* Structured rating chip — rendered ONCE, here in the trust bar; the stats band
   never repeats the rating. Gold stars + value; the count shows only when strong
   (>=500) via the showReviewCount gate, else it reads "on Google". */
.trust-item-rating .trust-stars {
  color: #e8a33d;
  letter-spacing: 1.5px;
  font-size: 0.95rem;
  line-height: 1;
}
.trust-item-rating strong { font-weight: 700; }

/* --- Trust-stats band (REAL DATA ONLY; collapses gracefully to 2-5, centered) --- */
.stats-band {
  position: relative;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  color: #fff;
  padding: clamp(1.6rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--color-border);
}
.stats-band::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(180px, 46%); height: 4px;
  background: var(--color-accent);
}
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(1.75rem, 4.5vw, 4rem);
}
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 140px;
  padding: 0 clamp(0.75rem, 2vw, 1.5rem);
}
.stat + .stat::before {
  content: '';
  position: absolute;
  left: calc(clamp(1.5rem, 4vw, 3.5rem) / -2);
  top: 10%; bottom: 10%;
  width: 1px;
  background: rgba(255,255,255,0.18);
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 6.8vw, 5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
}
.stat-label {
  margin-top: 0.85rem;
  font-family: var(--font-sans);
  font-size: clamp(0.68rem, 1.5vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-accent);
}
.stat-sub {
  margin-top: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255,255,255,0.7);
  max-width: 190px;
}

/* --- Sections --- */
section {
  padding: clamp(2.125rem, 4vw, 3.75rem) 0;
  position: relative;
  scroll-margin-top: 72px;
}
.about-section { background: var(--color-bg); }
.practice-section { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.approach-section { background: var(--color-bg); }
.team-section { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.credentials-section { background: var(--color-bg); }
.results-section { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.faq-section { background: var(--color-bg); }
.contact-section { background: var(--color-bg); border-top: 1px solid var(--color-border); }

/* --- About --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.about-grid.no-media { grid-template-columns: 1.15fr 1fr; }
/* Editorial framed photo: the image sits on a soft shadow with a thin brass
   frame offset behind it toward the lower-right (a considered magazine detail). */
.about-media { position: relative; }
.about-media::before {
  content: '';
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius: var(--radius-lg);
  z-index: 0;
}
.about-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* Real-data credential badge overlapping the image corner (optional). */
.about-badge {
  position: absolute;
  z-index: 2;
  left: -14px; bottom: 26px;
  padding: 0.9rem 1.25rem;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.about-badge-value { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: #fff; }
.about-badge-label { font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-top: 0.2rem; max-width: 150px; }
.about-text p { color: var(--color-ink-dim); margin-bottom: var(--space-sm); line-height: 1.8; }

.proof-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: var(--space-md);
}
.proof-point {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.2s, transform 0.2s;
}
.proof-point:hover { border-color: color-mix(in srgb, var(--color-brand) 40%, var(--color-border)); transform: translateY(-2px); }
.about-section .proof-point { background: var(--color-surface); }
.proof-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  background: var(--color-accent-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.proof-icon svg { width: 20px; height: 20px; color: var(--color-brand); }
.proof-point strong { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: 0.95rem; margin-bottom: 0.15rem; }
.proof-point span { color: var(--color-ink-dim); font-size: 0.84rem; line-height: 1.5; }

.about-signature {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-md);
  padding-left: 1rem;
  border-left: 2px solid var(--color-accent);
}
.about-signature-name { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.15rem; color: var(--color-ink); }
.about-signature-role { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-dim); margin-top: 0.2rem; }

/* --- Practice areas / services (NO prices — quoted per matter) --- */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
/* Refined card: a hairline border at rest (no resting shadow), a soft shadow +
   lift + an accent hairline that slides across the top on hover. */
.practice-card {
  position: relative;
  padding: 2rem 1.85rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.practice-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.practice-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
}
.practice-card:hover::before { transform: scaleX(1); }
.practice-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.15rem;
}
.practice-icon svg { width: 24px; height: 24px; color: var(--color-accent); }
.practice-card h3 { margin-bottom: 0.55rem; }
.practice-card p { color: var(--color-ink-dim); font-size: 0.96rem; line-height: 1.65; }
/* Soft background-image variant: a per-item `practice.items[].image` or the shared
   `practice.image` fallback turns a card photographic — the photo sits behind a
   brand scrim so the heading + copy stay legible. Icon-only cards are unaffected. */
.practice-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.practice-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--color-brand) 60%, transparent) 0%,
    color-mix(in srgb, var(--color-brand) 88%, transparent) 100%
  );
}
.practice-card:has(.practice-card-bg) { border-color: transparent; }
.practice-card:has(.practice-card-bg) > :not(.practice-card-bg):not(.practice-card-scrim) {
  position: relative;
  z-index: 2;
}
.practice-card::before { z-index: 3; }
.practice-card:has(.practice-card-bg) .practice-icon { background: rgba(255, 255, 255, 0.18); }
.practice-card:has(.practice-card-bg) .practice-icon svg { color: #fff; }
.practice-card:has(.practice-card-bg) h3 { color: #fff; }
.practice-card:has(.practice-card-bg) p { color: rgba(255, 255, 255, 0.9); }
.practice-meta {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-brand-strong);
}
.practice-cta {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}

/* --- Approach / how we work (steps) --- */
.steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
/* Quiet connector line linking the numbered medallions (desktop only). */
@media (min-width: 901px) {
  .steps-grid::before {
    content: '';
    position: absolute;
    top: calc(2.85rem + 44px);
    left: 18%; right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border) 15%, var(--color-border) 85%, transparent);
    z-index: 0;
  }
}
.step-card {
  padding: 2.85rem 1.9rem 2.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.3rem;
  letter-spacing: 0.01em;
  margin-bottom: 1.4rem;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 16px 34px -16px rgba(12,20,38,0.6);
}
.step-num::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  opacity: 0.6;
}
.step-card h3 { margin-bottom: 0.5rem; }
.step-card p { color: var(--color-ink-dim); font-size: 0.96rem; line-height: 1.6; max-width: 34ch; }

/* --- Credibility / office statement band (deep-navy editorial moment) --- */
.credibility {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  color: #fff;
}
.credibility-media { position: absolute; inset: 0; z-index: 0; }
.credibility-media img { width: 100%; height: 100%; object-fit: cover; }
.credibility-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  opacity: 0.85;
}
.credibility::after {
  content: '';
  position: absolute; top: 0; left: 0; width: min(160px, 34%); height: 3px;
  background: var(--color-accent); z-index: 2;
}
.credibility .container { position: relative; z-index: 2; }
.credibility-inner { max-width: 940px; }
.credibility .section-label { color: var(--color-accent); }
.credibility-statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.85rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}
.credibility-statement em, .credibility-statement i { font-style: italic; color: var(--color-accent); }
.credibility-text {
  margin-top: var(--space-md);
  max-width: 640px;
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  line-height: 1.75;
}
.credibility-markers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2.25rem;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.16);
}
.credibility-markers li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
}
.credibility-marker-icon { display: inline-flex; }
.credibility-marker-icon svg { width: 20px; height: 20px; color: var(--color-accent); }
.credibility .btn-accent { margin-top: var(--space-lg); }

/* --- Areas we serve (service-area / locations — malmanlaw "Other Areas We
   Serve"). Fully content-gated on the serviceAreas key; a firm without a
   service-area footprint drops the whole band. Bold, sharp location cards with
   a left accent edge and an address/note line. No image slots (never an empty
   image). --- */
.areas-section { background: var(--color-bg); border-top: 1px solid var(--color-border); }
.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-md);
  max-width: 1040px;
  margin: 0 auto;
}
.area-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.6rem 1.7rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.area-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
}
.area-card svg { width: 24px; height: 24px; color: var(--color-accent); flex-shrink: 0; margin-top: 0.15rem; }
.area-card-body { display: flex; flex-direction: column; }
.area-name { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: var(--color-ink); letter-spacing: -0.01em; }
.area-note { color: var(--color-ink-dim); font-size: 0.88rem; line-height: 1.5; margin-top: 0.15rem; }
.areas-note { text-align: center; color: var(--color-ink-dim); font-size: 0.9rem; margin-top: var(--space-lg); }

/* --- Team --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 1040px;
  margin: 0 auto;
}
/* Editorial portrait cards: a tall photo (or navy monogram panel) above the body. */
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
}
.team-photo { margin: 0; }
.team-photo img {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  display: block;
}
.team-monogram {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  color: var(--color-brand-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.2rem;
  letter-spacing: 0.02em;
  position: relative;
}
.team-monogram::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--color-accent);
}
.team-body { padding: 1.5rem 1.6rem 1.75rem; text-align: left; }
.team-body h3 { margin-bottom: 0.15rem; }
.team-credentials {
  color: var(--color-brand-strong);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}
.team-role {
  color: var(--color-ink-dim);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 0.8rem;
}
.team-body p { color: var(--color-ink-dim); font-size: 0.92rem; line-height: 1.65; }

/* Stock-team placeholder: an honest, always-visible "this can be your team" demo
   card, shown ONLY when the firm has no real headshots. The stock photo is never
   passed off as real staff (no name, no title) — a permanent ribbon + body label
   read it unmistakably as a placeholder. */
.team-card--placeholder .team-photo { position: relative; }
.team-card--placeholder .team-photo img { filter: saturate(0.9) contrast(0.98); }
.team-ph-ribbon {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  display: inline-flex;
  align-items: center;
  background: var(--color-accent);
  color: var(--color-brand-fg);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.34rem 0.66rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
.team-card--placeholder .team-ph-title { color: var(--color-brand-strong); margin-bottom: 0.3rem; }
.team-card--placeholder .team-ph-note { color: var(--color-ink-dim); font-size: 0.9rem; line-height: 1.65; }

/* --- Credentials / associations --- */
.credentials-wrap { max-width: 980px; margin: 0 auto; }
.credentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-md);
}
.credential-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.5rem 1.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.2s, transform 0.2s;
}
.credential-card:hover { border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); transform: translateY(-2px); }
.credential-card svg { width: 26px; height: 26px; color: var(--color-accent); flex-shrink: 0; margin-top: 0.1rem; }
.credential-card strong { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: 1rem; margin-bottom: 0.2rem; }
.credential-card span { color: var(--color-ink-dim); font-size: 0.88rem; line-height: 1.55; }
.credentials-note { text-align: center; color: var(--color-ink-dim); font-size: 0.92rem; margin-top: var(--space-lg); }

/* --- Results / testimonials --- */
.results-section .section-head-center { margin-bottom: var(--space-lg); }
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: var(--space-md);
  padding: 0.75rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--color-ink-dim);
  box-shadow: var(--shadow-sm);
}
.rating-score { font-family: var(--font-display); font-weight: 800; color: var(--color-ink); font-size: 1.8rem; line-height: 1; }
.rating-stars { color: var(--color-accent); letter-spacing: 0.08em; font-size: 1.15rem; }
.rating-meta { font-weight: 600; }

/* Confident lead pull-quote with an oversized brass quote mark */
.review-lead {
  position: relative;
  max-width: 860px;
  margin: 0 auto var(--space-xl);
  padding: 2.75rem 3rem 2.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.review-lead-mark {
  position: absolute;
  top: -0.3rem; left: 1.5rem;
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: color-mix(in srgb, var(--color-accent) 32%, transparent);
  pointer-events: none;
}
.review-lead .review-stars { justify-content: center; }
.review-lead p {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.3vw, 1.65rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0.5rem 0 1.1rem;
  text-wrap: balance;
}
.review-lead footer { font-size: 0.92rem; }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.review-card {
  padding: 1.9rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); }
.review-stars { color: var(--color-accent); font-size: 0.9rem; letter-spacing: 0.1em; margin-bottom: 0.85rem; display: flex; }
.review-card blockquote { color: var(--color-ink); font-size: 0.98rem; line-height: 1.7; margin-bottom: var(--space-sm); }
.review-author { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); font-size: 0.95rem; }
.review-source { color: var(--color-ink-dim); font-family: var(--font-sans); font-size: 0.8rem; }

/* Representative matters / engagements (real-shaped, illustrative) */
.matters {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}
.matters-head { text-align: center; max-width: 660px; margin: 0 auto var(--space-lg); }
.matters-head .section-label { justify-content: center; }
.matters-head .section-desc { margin: 0 auto; }
.matters-title { margin-bottom: var(--space-sm); }
.matters-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.matter-card {
  padding: 1.75rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
}
.matter-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand-strong);
  margin-bottom: 0.6rem;
}
.matter-card p { color: var(--color-ink-dim); font-size: 0.95rem; line-height: 1.65; }
.matters-note { text-align: center; color: var(--color-ink-dim); font-size: 0.85rem; font-style: italic; margin-top: var(--space-lg); }

/* --- FAQ (native <details> accordion) --- */
.faq-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.faq-intro { position: sticky; top: 100px; }
.faq-intro .section-desc { margin-bottom: var(--space-md); }
.faq-aside {
  margin-top: var(--space-md);
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.faq-aside p { color: var(--color-ink-dim); font-size: 0.95rem; margin-bottom: 1rem; }
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.4rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  color: var(--color-ink);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-brand-strong); }
/* +/- indicator built from two accent bars */
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 20px; height: 20px;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-accent);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-answer {
  padding: 0 0.25rem 1.5rem;
  max-width: 60ch;
}
.faq-answer p { color: var(--color-ink-dim); font-size: 1rem; line-height: 1.75; }

/* --- Consult / CTA band --- */
.consult-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  color: #fff;
}
.consult-media { position: absolute; inset: 0; z-index: 0; }
.consult-media img { width: 100%; height: 100%; object-fit: cover; }
.consult-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  opacity: 0.86;
}
.consult-section .container { position: relative; z-index: 2; }
.consult-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.consult-intro .section-label { color: var(--color-accent); }
.consult-intro .section-title { color: #fff; }
.consult-intro .section-desc { color: rgba(255,255,255,0.9); }
.consult-call {
  margin-top: var(--space-md);
  padding: 1.5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-lg);
}
.consult-call p { color: rgba(255,255,255,0.9); margin-bottom: 1rem; font-size: 0.95rem; }

.consult-form {
  padding: 2.1rem;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.consult-form .btn-primary { background: var(--color-accent); color: var(--color-hero-ink-2); border-color: var(--color-accent); font-weight: 700; }
.consult-form .btn-primary:hover { filter: brightness(1.06); color: var(--color-hero-ink-2); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.form-group { margin-bottom: var(--space-sm); }
.form-group label {
  display: block;
  font-size: 0.7rem;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink-dim);
  margin-bottom: 0.4rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
  outline: none;
}
.form-group textarea { resize: vertical; min-height: 104px; }
.form-group select { cursor: pointer; }
.consult-submit { width: 100%; margin-top: 0.25rem; }
.consult-privacy { color: var(--color-ink-dim); font-size: 0.78rem; margin-top: 0.8rem; text-align: center; }

/* --- Contact / Map --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: stretch;
}
.contact-details { display: flex; flex-direction: column; gap: 0.75rem; }
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.contact-detail svg { width: 22px; height: 22px; color: var(--color-brand); flex-shrink: 0; margin-top: 0.1rem; }
.contact-detail strong { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: 0.98rem; margin-bottom: 0.15rem; }
.contact-detail span { color: var(--color-ink-dim); font-size: 0.9rem; line-height: 1.55; }
.contact-detail a { color: var(--color-brand-strong); font-weight: 600; }
.contact-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: var(--space-md); }
.contact-note { color: var(--color-ink-dim); font-size: 0.88rem; margin-top: var(--space-sm); }
.map-container {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  min-height: 400px;
}
.map-container iframe { width: 100%; height: 100%; min-height: 400px; border: 0; display: block; }

/* --- Page hero (practice-areas.html) --- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: calc(5rem + var(--space-lg)) 0 var(--space-xl);
  text-align: center;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
}
.page-hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  opacity: 0.86;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .section-label { color: var(--color-accent); justify-content: center; }
.page-hero .section-title,
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.5vw, 3.5rem); }
.page-hero .section-desc { color: rgba(255,255,255,0.9); margin: 0 auto; max-width: 640px; }
.page-hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: var(--space-lg); }

/* --- Practice overview intro (practice-areas.html) --- */
.practice-overview { background: var(--color-bg); padding: clamp(1.75rem, 3vw, 2.75rem) 0; border-bottom: 1px solid var(--color-border); }
.practice-overview-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.practice-overview-inner .section-label { justify-content: center; }
.practice-overview-lead {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.42;
  color: var(--color-ink);
  text-wrap: balance;
}

/* --- Full practice-areas page --- */
.full-practice-section { padding: clamp(2.125rem, 4vw, 3.75rem) 0; background: var(--color-bg); }
.full-practice-category { margin-bottom: var(--space-2xl); }
.category-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.category-index {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}
.category-header h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); white-space: nowrap; }
.category-header .line { flex: 1; height: 1px; background: var(--color-border); }
.category-desc { color: var(--color-ink-dim); font-size: 1.02rem; max-width: 720px; margin-bottom: var(--space-lg); line-height: 1.7; }
.full-practice-section .practice-card { background: var(--color-surface); }

/* Closing CTA band on the practice-areas page */
.practice-close {
  margin-top: var(--space-xl);
  padding: clamp(2.75rem, 5vw, 4.5rem) clamp(1.75rem, 4vw, 3.5rem);
  background: linear-gradient(150deg, var(--color-hero-ink) 0%, var(--color-hero-ink-2) 100%);
  border-radius: var(--radius-xl);
  border-top: 3px solid var(--color-accent);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.practice-close-inner { max-width: 680px; margin: 0 auto; }
.practice-close h2 { color: #fff; margin-bottom: var(--space-sm); }
.practice-close .section-desc { color: rgba(255,255,255,0.85); margin: 0 auto 0.5rem; }
.practice-cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: var(--space-md); }

/* --- Footer --- */
.footer {
  background: var(--color-footer);
  padding: var(--space-xl) 0 var(--space-md);
  color: rgba(255,255,255,0.75);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr 1.4fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.footer-logo { height: 40px; width: auto; max-width: 240px; object-fit: contain; margin-bottom: var(--space-sm); display: block; }
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: #fff;
  display: inline-block;
  margin-bottom: var(--space-sm);
}
.footer-brand p { color: rgba(255,255,255,0.72); font-size: 0.88rem; max-width: 320px; line-height: 1.65; }
.footer-tag { margin-top: 0.75rem; color: var(--color-accent) !important; font-weight: 600; font-size: 0.85rem !important; }
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-sm);
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.5rem; font-size: 0.88rem; color: rgba(255,255,255,0.72); }
.footer-col a { color: rgba(255,255,255,0.72); font-size: 0.88rem; }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; align-items: flex-start; gap: 0.5rem; }
.footer-contact li svg { width: 15px; height: 15px; flex: none; margin-top: 0.2rem; color: rgba(255,255,255,0.85); }
.footer-hours { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-hours-row { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: 0.85rem; color: rgba(255,255,255,0.72); }
.footer-hours-row span:first-child { color: #fff; font-weight: 600; }
.footer-hours-row span:last-child { text-align: right; white-space: nowrap; }
.footer-bottom {
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
}

/* --- Modal --- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10,18,34,0.55);
  z-index: 250;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: all 0.3s;
  padding: var(--space-md);
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: scale(0.95);
  transition: transform 0.3s;
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-sm);
}
.modal-icon svg { width: 28px; height: 28px; color: var(--color-brand); }
.modal h3 { margin-bottom: var(--space-xs); }
.modal p { color: var(--color-ink-dim); margin-bottom: var(--space-md); font-size: 0.92rem; line-height: 1.6; }

/* --- Back to top --- */
.back-to-top {
  position: fixed;
  bottom: 2rem; right: 2rem;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--color-brand-strong);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  z-index: 90;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { filter: brightness(1.1); transform: translateY(-2px); }
.back-to-top svg { width: 20px; height: 20px; }

/* --- Animations --- */
html.js-anim .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.js-anim .fade-up.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .btn:hover, .back-to-top:hover, .practice-card:hover, .team-card:hover, .review-card:hover, .credential-card:hover, .proof-point:hover { transform: none; }
}

/* --- Preview disclosure badge (required on every preview) --- */
.preview-badge {
  position: fixed;
  left: 12px; bottom: 12px;
  z-index: 2000;
  display: inline-flex;
  align-items: stretch;
  background: rgba(10, 18, 34, 0.86);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0.92;
}
.preview-badge:hover, .preview-badge:focus-within { opacity: 1; }
.preview-badge a { display: inline-flex; align-items: center; padding: 7px 10px; text-decoration: none; white-space: nowrap; }
.preview-badge a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.preview-badge-info, .preview-badge-info:hover { color: #fff; }
.preview-badge-cta { background: var(--color-accent); color: var(--color-hero-ink-2); font-weight: 700; }
.preview-badge-cta:hover { background: var(--color-accent); filter: brightness(1.06); color: var(--color-hero-ink-2); }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 0; right: -100%;
    width: 280px; height: 100vh;
    background: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem var(--space-lg) var(--space-lg);
    gap: 1.5rem;
    transition: right 0.3s ease;
    box-shadow: var(--shadow-lg);
  }
  .nav-links.open { right: 0; }
  .nav:not(.scrolled) .nav-links a { color: var(--color-ink); text-shadow: none; }
  .nav-phone { display: none; }
  .faq-intro { position: static; }
}

@media (max-width: 900px) {
  .about-grid, .about-grid.no-media { grid-template-columns: 1fr; }
  .about-media { max-width: 560px; }
  .about-media img { height: auto; min-height: 0; aspect-ratio: 4 / 3.4; }
  .about-media::before { inset: 14px -14px -14px 14px; }
  .practice-grid,
  .reviews-grid,
  .matters-grid,
  .steps-grid,
  .team-grid { grid-template-columns: 1fr 1fr; }
  .consult-grid,
  .contact-grid,
  .faq-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  /* Split + bandoverlay collapse to a single column on smaller screens. */
  .hero-split .hero-inner { grid-template-columns: 1fr; min-height: auto; }
  .hero-split .hero-content { padding: 7rem clamp(1.5rem, 6vw, 2.5rem) 3rem; }
  .hero-split .hero-figure { order: 2; min-height: 44vh; }
  .hero-split .hero-figure::after { display: none; }
  .hero-bandoverlay .hero-content { max-width: none; }
  /* Hero lead-capture form stacks under the copy on smaller screens. */
  .hero-inner:has(.hero-lead),
  .hero-split .hero-inner:has(.hero-lead),
  .hero-bandoverlay .hero-inner:has(.hero-lead) { grid-template-columns: 1fr; }
  .hero-split .hero-inner:has(.hero-lead) .hero-figure,
  .hero-split .hero-inner:has(.hero-lead) .hero-lead { grid-column: 1; grid-row: auto; }
  .hero-split .hero-inner:has(.hero-lead) .hero-lead { justify-self: stretch; max-width: none; margin: 0; }
  .hero-inner:has(.hero-lead) .hero-content { padding-bottom: 1.5rem; }
}

@media (max-width: 620px) {
  /* On phones the mobile nav is logo + hamburger only; the drawer links + the
     prominent hero CTA carry the action, so the long nav CTA can drop and give
     a long wordmark room to breathe. */
  .nav-cta { display: none; }
  .hero { min-height: 100svh; }
  .hero-content { padding-top: 6.5rem; }
  .hero-split .hero-content { padding-top: 6.5rem; }
  .hero-bandoverlay .hero-inner { min-height: 100svh; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .practice-grid,
  .reviews-grid,
  .matters-grid,
  .steps-grid,
  .team-grid,
  .proof-points { grid-template-columns: 1fr; }
  .team-grid { max-width: 380px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .contact-detail span br { display: none; }
  .about-badge { left: 0; }
  .review-lead { padding: 2.25rem 1.75rem; }
}


/* sw-trust widget skin (frameworks/_base/widgets/trust-bar.css, pack-tinted).
   Shared STRUCTURE across packs; this pack's palette supplies the look. */
.sw-trust { background: var(--color-brand-strong, var(--color-brand)); border-bottom: 1px solid rgba(255,255,255,0.08); }
.sw-trust-inner { max-width: 1120px; margin: 0 auto; padding: 14px 24px; display: flex; flex-wrap: wrap; gap: 10px 40px; justify-content: center; }
.sw-trust-item { display: flex; align-items: baseline; gap: 8px; }
.sw-trust-value { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #fff; }
.sw-trust-label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
@media (max-width: 640px) { .sw-trust-inner { gap: 8px 22px; padding: 12px 16px; } .sw-trust-value { font-size: 1rem; } }

/* sw-booking action row (widget contract). */
.sw-booking-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sw-btn-ghost { color: var(--color-brand-strong, var(--color-brand)); text-decoration: underline; text-underline-offset: 3px; font-size: 0.95rem; }
.sw-btn-ghost:hover { opacity: 0.8; }