/* ==========================================================================
   Jite Olatunbode & Co. — Design System
   Color palette, type scale, and spacing rhythm shared across every page.
   ========================================================================== */

:root {
  /* Color system — replaces the old white-on-orange combo that measured
     ~2.9:1 contrast (fails WCAG AA). All text/background pairs below are
     checked against 4.5:1 (body) / 3:1 (large text) minimums. Maroon/
     oxblood is the firm's actual brand color (confirmed) — a later pass
     briefly swapped it to forest green to match a generic editorial-
     system palette example, then reverted; don't re-swap it without
     checking with the client first. */
  --color-navy: #0b1f3a;
  --color-navy-light: #142c52;
  --color-maroon: #7a1f2b;
  --color-maroon-dark: #611822;
  --color-brass: #b8974e;
  --color-charcoal: #1f2328;
  --color-ivory: #f7f5f1;
  --color-white: #ffffff;
  --color-border: #e4e0d8;
  /* Promoted from repeated raw hex literals (13x and 5x respectively) found
     during a CSS review — same failure mode as the contrast bugs this file
     already fixed once: a color copied into a new context with nothing
     central to check it against. */
  --color-muted: #4a4f57;         /* body copy on light backgrounds */
  --color-muted-dark-bg: #cfd6e3; /* body copy on navy backgrounds */
  /* Elite-redesign additions (2026-09-28 spec) — role reassignment, no new
     brand hues except --color-ink, --color-brass-on-dark, and
     --color-brass-text. Contrast (WCAG relative luminance): brass-on-dark
     vs navy 7.98:1; brass-text vs ivory 5.52:1 — base --color-brass itself
     fails both of those (small-text) uses at ~2.5:1, so it stays reserved
     for non-text/decorative use (hairlines, borders) only. */
  --color-ink: #14171a;
  --color-brass-on-dark: #d4af6a;
  --color-brass-text: #7a5f26; /* brass darkened for text on light backgrounds — see .kicker */

  /* Type — moved from Fraunces/Source Serif 4/Inter to a two-family system
     (EB Garamond + Lato) as part of the 2026 redesign, matching the
     "Trust & Authority" typography pairing for legal services. --font-display
     is now an alias of --font-serif rather than a third family: EB Garamond's
     own weight range carries hero headings without needing a separate display
     cut. Palette (navy/maroon/brass) is unchanged — see the color comment
     above; only typography changed in this pass. */
  --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-serif);

  /* Type scale — small sizes across the site had drifted into five
     near-identical values (0.875/0.9/0.9375/0.95rem, a ~1px spread) from
     organic, page-by-page authoring. Consolidated to two deliberate steps
     so meta/label text and body-small text are pixel-consistent everywhere
     rather than accidentally-almost-consistent. */
  --text-xs: 0.8125rem;   /* 13px — eyebrows, pills, meta, footer legal */
  --text-sm: 0.9375rem;   /* 15px — nav, labels, card copy, form fields */
  --text-md: 1.05rem;     /* 17px — dense card headings (practice-card) */
  --text-lg: 1.15rem;     /* 18px — feature card headings (diff/approach) */

  /* Hero heading: fluidly scaling down on smaller viewports so it never
     overflows or forces horizontal scroll on mobile. Widened 72px->80px
     (page-hero 44px->48px) as part of the 2026-09-28 elite-redesign spec's
     wider type-scale extremes; same 375px-width responsive floor as before. */
  --hero-size: clamp(2.5rem, 6vw + 1.25rem, 5rem); /* 5rem = 80px, was 72px */
  --page-hero-size: clamp(2rem, 4.5vw, 3rem); /* 3rem = 48px, was 44px */

  /* Spacing rhythm — consistent vertical whitespace between all sections */
  --space-section: clamp(4rem, 8vw, 7rem);
  --space-lg: 2.5rem;
  --space-md: 1.5rem;
  --space-sm: 0.75rem;

  /* 3px, not 0 — enough edge to avoid looking unfinished on photos, sharp
     enough to read as institutional rather than the rounded SaaS-card
     softness (10px) this replaced, and within the 0–4px ceiling the
     editorial system calls for. Avatars (50%) are a separate, deliberate
     shape and aren't tied to this token. */
  --radius: 3px;
  --container-width: 1200px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-charcoal);
  background: var(--color-ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

/* Focus states — one consistent, on-brand ring for every interactive
   element, shown only for keyboard/non-pointer focus (:focus-visible)
   rather than the mismatched default blue outline on click. Form fields
   keep their own richer treatment below (border + soft shadow), which
   wins on specificity, so this is the fallback for links, buttons, and
   anything else that doesn't define a custom focus style. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-maroon);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-navy);
  margin: 0 0 0.5em;
  line-height: 1.2;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

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

/* Visually hidden but still announced by screen readers — used to keep
   heading levels sequential (h1 → h2 → h3) without changing the visual
   design where a section doesn't need a visible heading. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Scroll-reveal — cards and content blocks fade + rise into view once, the
   first time they're scrolled to. JS opts elements into this by adding
   .reveal at runtime (see script.js), so nothing is ever hidden if that
   script fails to load — pure progressive enhancement. The site's only
   animation, deliberately: everything else (hover, press, focus) is a
   flat color/border change, no motion.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Native CSS scroll-driven reveal (2026 baseline: ~84% global support) —
   runs entirely on the compositor thread, zero JS at runtime. script.js
   feature-detects support and tags elements .reveal-native instead of
   .reveal when available, skipping the IntersectionObserver fallback
   entirely so there's no double-animation or JS scroll-listener cost on
   modern browsers. Older browsers silently keep the .reveal/JS path. */
@supports (animation-timeline: view()) {
  /* Opacity-only, deliberately — CSS @keyframes animations take priority
     over regular (non-!important) declarations for the same property,
     including on :hover/:active. Restricting the reveal to opacity keeps
     it from ever fighting a later transform-based state change, now or
     if one's added later. */
  .reveal-native {
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry;
  }
  @keyframes reveal-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-native { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   Cross-document View Transitions — native, CSS-only page-navigation
   crossfade (Chrome/Edge 126+). @view-transition opts every same-origin
   navigation on the site into the browser's built-in transition; nothing
   else is required for it to work. Unsupported browsers just navigate
   normally, so this is pure progressive enhancement with no JS involved.
   Old/new page snapshots crossfade together instead of the default
   swap-and-slide, matching the site's understated, premium motion language.
   ========================================================================== */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Letterhead-style marginal label — a short brass rule beside an italic
   serif phrase, set in sentence case. Extends the same italic-serif voice
   already used in .story-quote's blockquote, rather than the tracked-out
   ALL-CAPS sans convention (a generic template tell we're deliberately
   avoiding sitewide). */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-maroon);
  margin: 0 0 0.75rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: var(--color-brass);
  flex-shrink: 0;
}
.page-hero .eyebrow,
.hero-copy .eyebrow,
.feature-band .eyebrow {
  color: var(--color-brass);
}
.page-hero .eyebrow::before,
.hero-copy .eyebrow::before,
.feature-band .eyebrow::before {
  background: rgba(255, 255, 255, 0.55);
}

/* Kicker — tracked-out small-caps section label, replacing .eyebrow in
   structural (non-hero) contexts per the 2026-09-28 elite-redesign spec.
   .eyebrow itself is unchanged and still used for hero/page-hero eyebrows. */
.kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* Found during the Task 11 verification pass: base --color-brass on
     ivory measures ~2.55:1 for this 13px bold text, failing the 4.5:1
     minimum (13px bold doesn't qualify as "large text"). Darkened
     specifically for text use; computed contrast against ivory: 5.52:1.
     !important: several containers this label sits directly inside
     (.firm-story-copy p, .practice-detail-copy p, .leader-copy p, etc.)
     already carry a higher-specificity "container p { color: ... }" rule
     that would otherwise silently override this color — the same
     pre-existing pattern would have affected .eyebrow too, had any
     eyebrow sat inside one of those containers. Scoped to this one
     property on a purpose-built label class rather than patching every
     container rule individually. */
  color: var(--color-brass-text) !important;
  margin: 0 0 0.75rem;
}
.kicker.on-dark { color: var(--color-brass-on-dark) !important; }

.section-heading { margin-bottom: var(--space-lg); }
.section-heading h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }

/* ==========================================================================
   Buttons — including the CTA micro-interaction
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn-sm { padding: 0.55rem 1.1rem; font-size: var(--text-sm); }
.btn-lg { padding: 0.9rem 1.75rem; font-size: 1rem; }

.btn-primary {
  background: var(--color-maroon);
  color: var(--color-white);
}
.btn-primary:hover { background: var(--color-maroon-dark); }

.btn-ghost {
  background: transparent;
  border-color: var(--color-navy);
  color: var(--color-navy);
}
.btn-ghost:hover { background: var(--color-navy); color: var(--color-white); }

/* .btn-cta always pairs with .btn-primary in markup, so its hover state
   (a flat one-shade darkening) already comes from .btn-primary:hover above
   — no separate lift/shadow/icon-slide layered on top. The arrow icon
   (.btn-arrow) stays static, a fixed part of the button rather than an
   animated flourish. */

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  transition: border-color 0.25s ease;
  /* Identical markup on every page, so naming it opts the header out of
     the whole-page crossfade in @view-transition below and lets it persist
     smoothly across navigation instead — it reads as one continuous bar
     rather than fading out and back in with the rest of the page. Inert
     in browsers that don't support cross-document view-transition-name. */
  view-transition-name: site-header;
}

/* Toggled by script.js once the page scrolls — a crisp, solid-line
   division instead of a soft drop shadow, in keeping with a flat,
   editorial surface treatment. */
.site-header.is-scrolled {
  border-bottom-color: var(--color-navy);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.9rem;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-navy);
  font-size: var(--text-md);
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
  background: var(--color-maroon);
  color: var(--color-white);
  font-family: var(--font-serif);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-navy);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
/* Hamburger → close morph, driven by the aria-expanded state script.js
   already sets — no separate JS-managed class needed to keep the icon in
   sync with the drawer. 7px = half the bar-stack height (2px bar + 5px
   gap), so each outer bar's rotation pivots through the toggle's center. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-toggle span { transition: none; }
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.primary-nav ul {
  display: flex;
  gap: 1.75rem;
}

/* Scoped to direct li > a children (the 4 real top-level text links: The
   Firm, People, Careers, Contact) via the child combinator, NOT the looser
   ".primary-nav a:not(.btn)" this replaced — that broader selector also
   matched .mega-item/.mega-view-all links nested inside the dropdown panel
   (a pre-existing latent scope issue that became visibly wrong once
   text-transform/letter-spacing were added here: mega-panel item titles
   and descriptions were rendering in uppercase). The "Practice Areas"
   trigger itself is a <summary>, not an <a>, styled separately below under
   .mega-details summary — unaffected either way. */
.primary-nav > ul > li > a:not(.btn) {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-charcoal);
  padding-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.primary-nav > ul > li > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--color-brass);
  transition: right 0.25s ease;
}
.primary-nav > ul > li > a:not(.btn):hover { color: var(--color-maroon); }
.primary-nav > ul > li > a:not(.btn):hover::after,
.primary-nav > ul > li > a.active::after {
  right: 0;
}
.primary-nav > ul > li > a.active { color: var(--color-maroon); }

.nav-cta-group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Hidden in the desktop nav row — with it, the header never fits within
   the site's 1200px container at any viewport width (measured natural
   width 1218px vs. 1152px usable). Re-shown in the mobile drawer below,
   where it stacks vertically and has plenty of room. The phone number
   stays reachable via the footer and Contact page either way. */
.nav-phone {
  display: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: var(--color-navy);
  background-image:
    linear-gradient(160deg, rgba(11, 31, 58, 0.92) 0%, rgba(20, 44, 82, 0.85) 100%),
    url('../assets/images/hero-home.jpg');
  /* AVIF/WebP progressive enhancement — browsers without image-set() support
     simply ignore this declaration and keep the JPG fallback above. */
  background-image:
    linear-gradient(160deg, rgba(11, 31, 58, 0.92) 0%, rgba(20, 44, 82, 0.85) 100%),
    image-set(
      url('../assets/images/hero-home.avif') type('image/avif'),
      url('../assets/images/hero-home.webp') type('image/webp'),
      url('../assets/images/hero-home.jpg') type('image/jpeg')
    );
  background-size: cover;
  background-position: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  overflow-x: clip;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

/* No load-time entrance animation on the hero, by design: the site's
   motion budget is scroll-triggered reveals only (see the Scroll-reveal
   system above) — hero content, above the fold on first paint, is simply
   present rather than animated in. */

.hero-copy .eyebrow { color: var(--color-brass); }

.hero-heading {
  font-family: var(--font-display);
  font-size: var(--hero-size);
  color: var(--color-white);
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 16ch;
}

.hero-subhead {
  color: var(--color-muted-dark-bg);
  font-size: 1.0625rem;
  max-width: 46ch;
  margin-bottom: var(--space-lg);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-actions .btn-ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-white);
}
.hero-actions .btn-ghost:hover {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: var(--color-white);
}

.hero-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-brass-on-dark);
  border-radius: var(--radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .hero-panel { margin-right: -2.5rem; }
}
@media (min-width: 1200px) {
  .hero-panel { margin-right: -5rem; }
}

.hero-panel-stat {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 1.25rem;
}
.hero-panel-stat:last-child { border-bottom: none; padding-bottom: 0; }

.stat-number {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  color: var(--color-brass);
  font-weight: 600;
}
.stat-label {
  color: var(--color-muted-dark-bg);
  font-size: var(--text-sm);
}

/* ==========================================================================
   Page Hero — smaller interior-page variant of the homepage hero, used on
   About, Practice Areas, People, etc. Deliberately less prominent than the
   homepage hero to keep the homepage the strongest visual entry point.
   ========================================================================== */

.page-hero {
  background: var(--color-navy);
  background-image: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  background-size: cover;
  background-position: center;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

/* Per-page hero photography — same navy overlay treatment as the homepage
   hero, swapped image per page so every page gets real photography while
   staying visually consistent. */
.page-hero-about {
  background-image:
    linear-gradient(160deg, rgba(11, 31, 58, 0.91) 0%, rgba(20, 44, 82, 0.84) 100%),
    url('../assets/images/hero-about.jpg');
  background-image:
    linear-gradient(160deg, rgba(11, 31, 58, 0.91) 0%, rgba(20, 44, 82, 0.84) 100%),
    image-set(
      url('../assets/images/hero-about.avif') type('image/avif'),
      url('../assets/images/hero-about.webp') type('image/webp'),
      url('../assets/images/hero-about.jpg') type('image/jpeg')
    );
}
.page-hero-practice {
  background-image:
    linear-gradient(160deg, rgba(11, 31, 58, 0.91) 0%, rgba(20, 44, 82, 0.84) 100%),
    url('../assets/images/hero-practice.jpg');
  background-image:
    linear-gradient(160deg, rgba(11, 31, 58, 0.91) 0%, rgba(20, 44, 82, 0.84) 100%),
    image-set(
      url('../assets/images/hero-practice.avif') type('image/avif'),
      url('../assets/images/hero-practice.webp') type('image/webp'),
      url('../assets/images/hero-practice.jpg') type('image/jpeg')
    );
}
.page-hero-people {
  background-image:
    linear-gradient(160deg, rgba(11, 31, 58, 0.91) 0%, rgba(20, 44, 82, 0.84) 100%),
    url('../assets/images/hero-people.jpg');
  background-image:
    linear-gradient(160deg, rgba(11, 31, 58, 0.91) 0%, rgba(20, 44, 82, 0.84) 100%),
    image-set(
      url('../assets/images/hero-people.avif') type('image/avif'),
      url('../assets/images/hero-people.webp') type('image/webp'),
      url('../assets/images/hero-people.jpg') type('image/jpeg')
    );
}
.page-hero-careers {
  background-image:
    linear-gradient(160deg, rgba(11, 31, 58, 0.91) 0%, rgba(20, 44, 82, 0.84) 100%),
    url('../assets/images/hero-careers.jpg');
  background-image:
    linear-gradient(160deg, rgba(11, 31, 58, 0.91) 0%, rgba(20, 44, 82, 0.84) 100%),
    image-set(
      url('../assets/images/hero-careers.avif') type('image/avif'),
      url('../assets/images/hero-careers.webp') type('image/webp'),
      url('../assets/images/hero-careers.jpg') type('image/jpeg')
    );
}
.page-hero-contact {
  background-image:
    linear-gradient(160deg, rgba(11, 31, 58, 0.91) 0%, rgba(20, 44, 82, 0.84) 100%),
    url('../assets/images/hero-contact.jpg');
  background-image:
    linear-gradient(160deg, rgba(11, 31, 58, 0.91) 0%, rgba(20, 44, 82, 0.84) 100%),
    image-set(
      url('../assets/images/hero-contact.avif') type('image/avif'),
      url('../assets/images/hero-contact.webp') type('image/webp'),
      url('../assets/images/hero-contact.jpg') type('image/jpeg')
    );
}

.page-hero .eyebrow { color: var(--color-brass); }

.page-hero h1 {
  font-family: var(--font-display);
  color: var(--color-white);
  font-weight: 600;
  font-size: var(--page-hero-size);
  letter-spacing: -0.01em;
  max-width: 20ch;
}

.page-hero-subhead {
  color: var(--color-muted-dark-bg);
  font-size: 1.0625rem;
  max-width: 60ch;
  margin: 0;
}

/* ==========================================================================
   Quick nav — jump links to each practice area anchor
   ========================================================================== */

.quick-nav {
  position: sticky;
  top: 74px; /* sits directly under the sticky site header */
  z-index: 90;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding-block: 0.85rem;
}

.quick-nav-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.quick-nav-list::-webkit-scrollbar { display: none; }

.quick-nav-list a {
  flex-shrink: 0;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  background: var(--color-ivory);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-navy);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.quick-nav-list a:hover {
  background: var(--color-maroon);
  border-color: var(--color-maroon);
  color: var(--color-white);
}

/* Scroll-spy state — set by script.js as each practice-area section
   crosses the viewport, so the pill for the section currently on screen
   stays visibly current without requiring a click. */
.quick-nav-list a.is-active {
  background: var(--color-maroon);
  border-color: var(--color-maroon);
  color: var(--color-white);
}

/* ==========================================================================
   Practice area detail sections
   ========================================================================== */

.practice-detail { padding-block: var(--space-section); scroll-margin-top: 145px; overflow-x: clip; }
.practice-detail.alt {
  background: var(--color-white);
  border-block: 1px solid var(--color-border);
}

.practice-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* Letterhead-seal monogram — replaces a decorative "01 / 02 / 03" numbering
   scheme that implied a sequence the five practice areas don't actually
   have. A bordered two-letter mark is closer to how a firm's own
   letterhead or chambers directory would distinguish practice groups. */
.practice-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--color-brass);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-maroon);
  margin-bottom: 1.1rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.practice-detail:hover .practice-monogram {
  background: var(--color-maroon);
  color: var(--color-white);
}

.practice-detail-copy p { color: var(--color-muted); max-width: 55ch; }

.practice-detail-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
/* The photo is always the grid's left/first column in every section here,
   .alt included (.alt only recolors the background) — no left/right image
   swap actually exists in the markup, unlike the plan's assumption. Bleed
   every row's photo leftward toward the section's outer edge uniformly;
   bleeding .alt rightward would push the image into the center gap instead
   of the outer edge. */
@media (min-width: 1200px) {
  .practice-detail-photo { margin-left: -3rem; }
}

/* About page's "Relationships Over Transactions" section only — scoped to
   this one instance via .relationships-section, not the bare
   .practice-detail-photo, since that class is shared with the 5 practice-
   area photos on practice-areas.html (a careers.html-style regression bit
   this site once already; not repeating it here). Image reduced to 70% of
   its grid-column width per request. */
.relationships-section .practice-detail-photo {
  max-width: 70%;
}

.practice-detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Required attribution for the one CC BY-SA-licensed photo on the site
   (pix4free.org / Nick Youngson) — unlike the Unsplash photos elsewhere,
   this license requires visible credit, not just alt text. */
.photo-credit {
  max-width: 320px;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: var(--color-muted);
  text-align: center;
}
.photo-credit a { color: inherit; text-decoration: underline; }

.practice-cta {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-maroon);
  transition: color 0.15s ease;
}
.practice-cta:hover { color: var(--color-maroon-dark); }
/* A second .practice-cta right after another (e.g. "View full profile" +
   a mailto link on People/profile pages) stacks instead of running together
   on one line. */
.practice-cta + .practice-cta { display: block; }

.matters-card {
  background: var(--color-ivory);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-maroon);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-top: var(--space-md);
}

.matters-card h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.matters-list { display: flex; flex-direction: column; gap: 0.65rem; }
.matters-list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.matters-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-maroon);
}

/* Practice contact + cross-links — who to talk to about this specific
   area, and a way back to the other four without scrolling up to the
   quick-nav bar. Plain page furniture, not another card, so it sits
   below .matters-card rather than inside it. */
.practice-meta {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.practice-meta-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  margin: 0 0 0.5rem;
}
.practice-contact-name {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-charcoal);
}
.practice-contact-name + .practice-contact-name { margin-top: 0.35rem; }
.practice-contact-name a {
  margin-left: 0.5rem;
  color: var(--color-maroon);
  font-weight: 600;
}
.practice-meta-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.practice-meta-links a {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-maroon);
  transition: color 0.15s ease;
}
.practice-meta-links a:hover { color: var(--color-maroon-dark); }

.leader-title {
  font-weight: 600;
  color: var(--color-maroon);
  margin: -0.25rem 0 1rem;
}

.leader-copy p { color: var(--color-muted); max-width: 60ch; }
.leader-copy p.leader-title { color: var(--color-maroon); }

.focus-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0 1.25rem;
}
/* A practice-focus tag that links to its matching practice-areas.html
   anchor (profile pages only — not every tag maps cleanly to one of the
   five named areas, so most stay plain spans). */
.focus-tags a.serve-pill:hover { border-color: var(--color-maroon); }

/* ==========================================================================
   Attorney profile pages (people/<slug>.html) — the People page is a
   directory into these; reuses .leader-title/.leader-copy/.focus-tags/
   .credential-badges/.practice-cta rather than duplicating those styles.
   ========================================================================== */

.breadcrumb-nav {
  padding-block: 0.85rem;
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.breadcrumb-nav a { color: var(--color-maroon); font-weight: 600; }
.breadcrumb-nav a:hover { color: var(--color-maroon-dark); }

/* Was missing padding entirely — on attorneys with a taller copy column
   (credentials-band pushes it past the photo's height, e.g. Seni/Ijeoma),
   the bio content sat flush against whatever section follows. */
.profile-hero { padding-block: var(--space-section); }

.profile-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .profile-hero-grid { grid-template-columns: 5fr 7fr; }
}
.profile-hero-grid .practice-detail-photo { max-width: 340px; }

.credentials-band {
  margin: 1.5rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.credentials-band-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  margin: 0 0 0.75rem;
}
.credentials-band .credential-badges { margin: 0; }

/* ==========================================================================
   Team directory (People page) — each card is a teaser for that attorney's
   own profile page under people/; real bio copy lives there, not here.
   ========================================================================== */

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 600px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  /* Zig-zag stagger — alternate cards sit lower, so the row reads as a
     deliberate arrangement rather than a flat directory listing. */
  .team-card:nth-child(2n) { margin-top: 3rem; }
}
@media (min-width: 900px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Full-bleed portrait photo + a solid navy block for name/title — same
   editorial-card shape the firm's brand already uses elsewhere (navy as the
   dominant surface, brass-on-dark for the accent line), not a borrowed
   palette. Credential/tag/link content sits below in its own padded area,
   outside the photo+name block, so the card stays scannable at a glance. */
.team-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.team-card:hover,
.team-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(11, 31, 58, 0.08);
}

.team-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0;
  background: var(--color-ivory);
  overflow: hidden;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.team-card-header {
  background: var(--color-navy);
  padding: var(--space-md);
}
.team-card-header h3 {
  color: var(--color-white);
  font-size: var(--text-md);
  margin-bottom: 0.2rem;
}

.person-title {
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--color-maroon);
  margin: 0 0 0.75rem;
}
.team-card-header .person-title {
  color: var(--color-brass-on-dark);
  margin: 0;
}

/* "View full profile" is a maroon-filled button rather than a text link —
   it carries its own background, so it reads clearly regardless of sitting
   on the navy header block. */
.team-card-header .btn { margin-top: 0.75rem; }

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

.contact-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Consultation picker — replaces a plain <select> with clickable cards, so
   choosing who you'd be consulting feels like a deliberate step rather
   than a form field. Native radio inputs underneath (visually hidden, not
   display:none) keep it keyboard- and screen-reader-operable. The dot's
   fill uses the ~ sibling combinator directly off :checked (reliable
   everywhere); script.js toggles .is-checked on the card itself to style
   its border/background, since a label can't otherwise be selected from
   its own descendant's state without :has() — which this environment's
   browser matches correctly via .matches()/querySelector but doesn't
   consistently repaint on a dynamic checked-state change, so it's
   deliberately not relied on here. */
.consult-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.6rem;
}
.consult-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-ivory);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-charcoal);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.consult-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.consult-option-dot {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  transition: border-color 0.2s ease;
}
.consult-option-dot::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 2.5px;
  border-radius: 50%;
  background: var(--color-maroon);
  transform: scale(0);
  transition: transform 0.15s ease;
}
.consult-option:hover { border-color: var(--color-maroon); }
.consult-option input:checked ~ .consult-option-dot { border-color: var(--color-maroon); }
.consult-option input:checked ~ .consult-option-dot::after { transform: scale(1); }

/* Set by script.js alongside the input's native checked state. */
.consult-option.is-checked {
  border-color: var(--color-maroon);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-maroon);
}
.consult-option:focus-within {
  outline: 2px solid var(--color-maroon);
  outline-offset: 2px;
}

.form-row { display: flex; flex-direction: column; gap: 0.4rem; }

.form-row-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.form-row label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  background: var(--color-ivory);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0.7rem 0.9rem;
  width: 100%;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-maroon);
  box-shadow: 0 0 0 3px rgba(122, 31, 43, 0.12);
}

.contact-form textarea { resize: vertical; min-height: 120px; }

.contact-form button { align-self: flex-start; }

/* Success/error banners — hidden until JS reveals the matching one based
   on ?status= from contact-handler.php's redirect. */
.form-banner {
  display: none;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.9rem 1.1rem;
  border-radius: 3px;
  font-size: var(--text-sm);
}
.form-banner.is-visible { display: flex; }
.form-banner svg { flex-shrink: 0; margin-top: 0.1rem; }

.form-banner-success {
  background: #f2f6f2;
  color: #2f5233;
  border: 1px solid #cfe0d0;
}
.form-banner-error {
  background: #faf1ef;
  color: var(--color-maroon-dark);
  border: 1px solid #ecd3ce;
}

.info-card {
  background: var(--color-white);
  /* Was rgba(11, 31, 58, 0.18) — the Task 8 verification that "confirmed"
     this passed contrast had the alpha-compositing formula backwards
     (weighted the background's share by the foreground's alpha and vice
     versa), so it actually measured ~1.45:1 against white — found and
     corrected during the final review pass. Solid, correctly computed:
     4.82:1 against white, clears the 3:1 UI-component minimum. */
  border: 1px solid #64738a;
  border-radius: var(--radius);
  padding: var(--space-md);
}
.info-card + .info-card { margin-top: 1.25rem; }
.info-card h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.info-list { display: flex; flex-direction: column; gap: 1.1rem; }
.info-list li { display: flex; flex-direction: column; gap: 0.2rem; }
.info-list a,
.info-list span:not(.info-label) { font-size: var(--text-sm); color: var(--color-charcoal); }
.info-list a:hover { color: var(--color-maroon); }

.info-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-maroon);
}
.info-label svg { width: 14px; height: 14px; flex-shrink: 0; }

.response-note p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.cv-note { color: var(--color-muted); font-size: var(--text-sm); margin: 0 0 1.1rem; }

.map-section {
  line-height: 0;
  background: var(--color-ivory);
  border-top: 1px solid var(--color-border);
}
.map-section iframe {
  width: 100%;
  height: 380px;
  border: 0;
  display: block;
}

/* ==========================================================================
   Firm Story
   ========================================================================== */

.firm-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

.firm-story-copy p { color: var(--color-muted); margin: 0 0 1.1rem; }
.firm-story-copy p:last-child { margin-bottom: 0; }

.story-quote {
  background: var(--color-navy);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.story-quote blockquote {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-white);
  line-height: 1.5;
}

.story-quote-attr {
  margin: 0;
  color: var(--color-brass);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ==========================================================================
   Bento stats — grid of real firm metrics (About page), replacing the
   earlier flat stats-band. Tile sizes vary deliberately (a bento/masonry
   rhythm, one larger "hero" tile plus four smaller ones) rather than an
   even grid — requested to match a reference design, whose own indigo/
   teal palette (and full-bleed dark section) we didn't carry over: the
   section itself sits on the page's normal ivory background, and each
   tile carries its own solid navy fill (brass-on-dark numerals, same
   tokens used everywhere else brass sits on a dark background).
   ========================================================================== */

.bento-stats {
  padding-block: var(--space-section);
}

.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.bento-tile {
  /* Section itself now sits on the page's ivory background (the surrounding
     "Our Story"/"Our Approach" sections) rather than a full-bleed navy
     wash — each tile carries its own solid navy fill instead. */
  background: var(--color-navy);
  border-radius: var(--radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  min-height: 140px;
}

.bento-tile .stat-num {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-brass-on-dark);
}

.bento-tile .stat-lbl {
  font-size: var(--text-sm);
  color: var(--color-muted-dark-bg);
}

.bento-tile--hero .stat-num { font-size: 4rem; }

@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, minmax(160px, auto));
  }
  /* Selected by class, not position, so DOM order can stay the natural
     reading order (1998 -> 27+ -> 5 -> 5 -> 3) while this tile still gets
     the large, left-spanning "hero" placement regardless of where it
     falls in the markup. */
  .bento-tile--hero {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
  }
  .bento-grid .bento-tile:nth-child(1) {
    grid-column: 6 / span 4;
    grid-row: 1;
  }
  .bento-grid .bento-tile:nth-child(3) {
    grid-column: 10 / span 3;
    grid-row: 1;
  }
  .bento-grid .bento-tile:nth-child(4) {
    grid-column: 6 / span 3;
    grid-row: 2;
  }
  .bento-grid .bento-tile:nth-child(5) {
    grid-column: 9 / span 4;
    grid-row: 2;
  }
}

/* ==========================================================================
   Approach
   ========================================================================== */

.approach-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
}

.approach-step { position: relative; }

.approach-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.25rem;
  /* Was var(--color-border) (#e4e0d8 on #f7f5f1 ivory) — measured ~1.2:1,
     effectively invisible rather than a deliberate soft watermark. This
     value clears 3:1 for large text while staying recessive next to the
     navy heading and maroon accents. */
  color: #8f8577;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.approach-step h3 { font-size: var(--text-lg); margin-bottom: 0.5rem; }
.approach-step p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }

/* ==========================================================================
   Dual CTA (About page: two buttons inside .cta-band)
   ========================================================================== */

.cta-dual {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.cta-band .cta-dual .btn-ghost {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-white);
}
.cta-band .cta-dual .btn-ghost:hover {
  background: var(--color-white);
  color: var(--color-maroon);
  border-color: var(--color-white);
}

/* ==========================================================================
   Differentiators
   ========================================================================== */

.differentiators-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 768px) {
  /* .differentiators-grid/.diff-card are shared with careers.html's plain
     "Why Join Us" 3-card row, which has no .diff-card--feature card and no
     .differentiators wrapper — found in production: without this scoping,
     careers.html's first card had no grid-column assigned at all and
     auto-placed into a single ~59px track, leaving most of the row empty.
     The 12-column asymmetric treatment below is scoped to the homepage's
     .differentiators section only; every other page keeps the plain even
     grid from the base rule above (now matching the pre-redesign default). */
  .differentiators-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .differentiators .differentiators-grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .diff-card--feature {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
  }
  .diff-card--feature .diff-card-photo {
    flex: 1;
    height: auto;
    min-height: 280px;
  }
  .differentiators .differentiators-grid .diff-card:nth-child(2) {
    grid-column: 8 / span 5;
    grid-row: 1;
  }
  .differentiators .differentiators-grid .diff-card:nth-child(3) {
    grid-column: 8 / span 5;
    grid-row: 2;
  }
}

.diff-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s ease;
}
/* The feature card's border picks up brass on hover, reinforcing which
   card is "featured" without adding motion. */
.diff-card--feature:hover { border-color: var(--color-brass); }

/* Subtle image hover scale — transform-only (never width/height), so it
   never triggers layout reflow. */
.diff-card-photo img,
.practice-detail-photo img,
.team-photo img {
  transition: transform 0.4s ease;
}
.diff-card:hover .diff-card-photo img,
.practice-detail:hover .practice-detail-photo img,
.team-card:hover .team-photo img {
  transform: scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
  .diff-card-photo img,
  .practice-detail-photo img,
  .team-photo img {
    transition: none;
  }
}
.diff-card-photo {
  display: block;
  width: 100%;
  height: 140px;
}
.diff-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.diff-card-body { padding: var(--space-lg); }
.diff-card h3 { font-size: var(--text-lg); margin-bottom: 0.5rem; }
.diff-card p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }

/* Careers page "Why Join Us" row — same shares .diff-card/.differentiators-grid
   as the homepage's featured bento row (see the scoping note above this
   block), but these three are plain text cards with no photo, so they get
   their own navy-header treatment instead, scoped to .why-join-us only. */
.why-join-us .diff-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.why-join-us .diff-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(11, 31, 58, 0.08);
}
.why-join-us .diff-card-header {
  background: var(--color-navy);
  padding: var(--space-md);
}
.why-join-us .diff-card-header h3 {
  color: var(--color-white);
  margin-bottom: 0;
}
.why-join-us .diff-card-body { padding: var(--space-md); }

/* ==========================================================================
   Feature band — full-bleed photo section with a navy overlay, matching
   the hero treatment, used as a visual break on the homepage.
   ========================================================================== */

.feature-band {
  background-image:
    linear-gradient(160deg, rgba(11, 31, 58, 0.88) 0%, rgba(20, 44, 82, 0.80) 100%),
    url('../assets/images/feature-band.jpg');
  background-image:
    linear-gradient(160deg, rgba(11, 31, 58, 0.88) 0%, rgba(20, 44, 82, 0.80) 100%),
    image-set(
      url('../assets/images/feature-band.avif') type('image/avif'),
      url('../assets/images/feature-band.webp') type('image/webp'),
      url('../assets/images/feature-band.jpg') type('image/jpeg')
    );
  background-size: cover;
  background-position: center;
  padding-block: var(--space-section);
  text-align: center;
}
.feature-band-inner { max-width: 640px; margin-inline: auto; }
/* The homepage's single highest-gravitas moment earns a slower reveal than
   the sitewide .reveal default (600ms) — everything else on the page is a
   grid of cards; this is the one full-bleed editorial beat. */
.feature-band-inner.reveal { transition-duration: 0.9s; }
.feature-band .eyebrow { color: var(--color-brass); }
.feature-band h2 { color: var(--color-white); }
.feature-band p { color: var(--color-muted-dark-bg); margin: 0; }

/* ==========================================================================
   Practice Areas
   ========================================================================== */

.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.practice-card {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-maroon);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: border-color 0.2s ease;
}
.practice-card:hover { border-color: var(--color-maroon); }
.practice-card h3 { font-size: var(--text-md); margin-bottom: 0.4rem; }
.practice-card p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }

/* ==========================================================================
   Who We Serve — restyled as a proper trust band (hairline top/bottom
   border, matching .stats-band) rather than a plain white section, so the
   sector list reads as a confidence signal rather than incidental copy.
   ========================================================================== */

.who-we-serve {
  background: var(--color-white);
  border-block: 1px solid var(--color-border);
}

.serve-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Sharp-cornered chip, not a rounded pill — the class name predates that
   call and isn't worth renaming across every page that uses it. */
.serve-pill {
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  background: var(--color-ivory);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy);
  transition: border-color 0.2s ease;
}
.who-we-serve .serve-pill:hover { border-color: var(--color-maroon); }

/* ==========================================================================
   Credential badges (People page) — real firm/individual memberships
   (Nigerian Bar Association, Chartered Institute of Arbitrators (UK), etc.),
   shown as small trust chips next to the lawyer they apply to. Deliberately
   plainer than .serve-pill (no fill) so it reads as a credential mark, not
   another interactive tag.
   ========================================================================== */

.credential-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.9rem 0 1.1rem;
}

.credential-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-navy);
}
.credential-badge svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--color-maroon); }

/* Footer accreditations — the same real credentials condensed to a single
   firm-level row, sitting between the link columns and the copyright line. */
.footer-accreditations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--color-brass-on-dark);
}
.footer-accreditations span {
  font-size: var(--text-xs);
  color: #a9b2c3;
}

/* ==========================================================================
   Practice Areas mega-menu — native <details>/<summary> disclosure, so
   open/close and keyboard operability come from the platform for free.
   Renders as an absolutely-positioned dropdown at desktop widths (matching
   the nav's own >=1200px breakpoint) and a plain in-place accordion inside
   the mobile drawer, from one shared markup block.
   ========================================================================== */

.nav-mega { position: relative; }

.mega-details summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-charcoal);
  padding-bottom: 3px;
  cursor: pointer;
  list-style: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mega-details summary::-webkit-details-marker { display: none; }
.mega-details summary::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--color-brass);
  transition: right 0.25s ease;
}
.mega-details summary:hover,
.mega-details[open] summary,
.mega-details summary.active {
  color: var(--color-maroon);
}
.mega-details summary:hover::after,
.mega-details[open] summary::after,
.mega-details summary.active::after {
  right: 0;
}
.mega-caret { transition: transform 0.2s ease; }
.mega-details[open] .mega-caret { transform: rotate(180deg); }

.mega-panel {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
}

.mega-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  transition: background-color 0.15s ease;
}
.mega-item:hover { background: var(--color-ivory); }
.mega-item-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-navy);
}
.mega-item-desc {
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.mega-view-all {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.6rem 0.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-maroon);
}

@media (min-width: 1200px) {
  .mega-panel {
    position: absolute;
    top: calc(100% + 0.9rem);
    left: -0.75rem;
    width: 560px;
    margin-top: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px -12px rgba(11, 31, 58, 0.22);
    padding: 0.75rem;
    z-index: 110;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 0;
  }
  /* .mega-item becomes a non-rendered wrapper so its title/desc children
     land directly in the panel's 5fr/7fr grid columns (DOM order preserved).
     Its own :hover background no longer has a box to paint, so the hover
     affordance moves to the children directly — see plan Task 2 ruling. */
  .mega-item {
    display: contents;
  }
  .mega-item-title,
  .mega-item-desc {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
  }
  .mega-item:hover .mega-item-title,
  .mega-item:hover .mega-item-desc {
    background: var(--color-ivory);
  }
  .mega-view-all { grid-column: 1 / -1; }
}

/* ==========================================================================
   Final CTA band
   ========================================================================== */

.cta-band {
  background: var(--color-maroon);
  /* Deliberately smaller than --space-section — a full-bleed color block
     this size only needs to feel like a closing note, not another
     full section competing with the rest of the page. */
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

.cta-band-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.cta-band h2 { color: var(--color-white); margin: 0; }
.cta-band p { color: #f3d9dc; margin: 0 0 0.5rem; max-width: 48ch; }
.cta-band .btn-primary {
  background: var(--color-white);
  color: var(--color-maroon);
}
.cta-band .btn-primary:hover { background: var(--color-ivory); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-navy);
  color: var(--color-muted-dark-bg);
  padding-top: var(--space-section);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: var(--space-lg);
}

.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-brand p { margin: 0; font-size: var(--text-sm); color: #a9b2c3; }

.footer-col h4 {
  font-family: var(--font-sans);
  color: var(--color-white);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a { font-size: var(--text-sm); color: var(--color-muted-dark-bg); }
.footer-col a:hover { color: var(--color-brass); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.5rem;
  font-size: var(--text-xs);
  color: #8b93a3;
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

/* Tablet and up: hero becomes two columns, nav shows inline */
@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 7fr 5fr; }
  .firm-story-grid { grid-template-columns: 1.5fr 1fr; }
  .practice-detail-grid { grid-template-columns: 5fr 7fr; gap: 3.5rem; }
  .leader-grid { grid-template-columns: auto 1fr; gap: 3rem; }
  .form-row-split { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 7fr 5fr; }
}

/* Desktop: footer expands to 4 columns (already default above 1024 via grid) */
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 2fr repeat(3, 1fr); }
}

/* Mobile: collapse nav into a toggleable drawer */
/* Raised from the original 899px — the full desktop nav (links + phone +
   button) needs ~1219px to lay out on one line, more than fits even at the
   site's 1200px container cap. Below 1200px, the mobile drawer takes over
   instead of letting text wrap. */
@media (max-width: 1199px) {
  .nav-toggle { display: flex; }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.5rem;
    /* Animated open/close: max-height + opacity carry the motion; visibility
       is delayed on the way in and immediate on the way out, so the drawer's
       links are keyboard/screen-reader-reachable only while actually open,
       never mid-collapse or fully closed. */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0s linear 0.35s;
  }
  .primary-nav.is-open {
    /* Comfortably covers nav links + CTA group + the Practice Areas
       mega-menu fully expanded, so the disclosure never clips against this
       cap the way the previous 32rem did once the mega-menu was added. */
    max-height: 90rem;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.35s ease, opacity 0.25s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .primary-nav { transition: none; }
    .primary-nav.is-open { transition: none; }
  }

  .primary-nav ul {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-cta-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .nav-phone { display: block; }

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

@media (max-width: 479px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .cta-dual { flex-direction: column; align-items: stretch; }
  .cta-dual .btn { justify-content: center; }
}