/* ==========================================================================
   The Probate Guide — core stylesheet
   Tokens follow the design system in probateguide_redesign_spec.md §3.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
  --navy:        #0B1F3A;
  --navy-mid:    #1A3558;
  --navy-deep:   #071529;
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --cream:       #FAF7F2;
  --white:       #FFFFFF;

  --text-dark:   #1A1A2E;
  --text-mid:    #4A5568;
  --text-light:  #718096;

  --success:     #2D6A4F;
  --warning:     #B7791F;
  --danger:      #9B2335;
  --border:      #E2E8F0;
  --card-bg:     #FFFFFF;
  --section-alt: #F0EDE8;
  --notice-bg:   #FEF3C7;

  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow-card:       0 4px 20px rgb(0 0 0 / 0.08);
  --shadow-card-hover: 0 12px 40px rgb(0 0 0 / 0.15);
  --shadow-nav:        0 2px 20px rgb(11 31 58 / 0.15);

  --radius-card:  8px;
  --radius-input: 4px;

  --max-width:     1280px;
  --reading-width: 760px;

  --nav-height: 76px;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ----------------------------------------------------------------- 2. Base */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky navbar. */
  scroll-padding-top: calc(var(--nav-height) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 700; }
h1, h2, h3 { font-family: var(--font-heading); color: var(--navy); }
p { margin: 0 0 1.25em; }
a { color: var(--navy-mid); text-decoration-color: rgb(201 168 76 / 0.5); text-underline-offset: 3px; }
a:hover { color: var(--gold); }

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

/* Visible only when focused — first stop for keyboard users. */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 0 0 var(--radius-input) var(--radius-input);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6;
        stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* --------------------------------------------------------------- 3. Layout */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.section { padding-block: clamp(56px, 8vw, 104px); }
.section--alt   { background: var(--section-alt); }
.section--white { background: var(--white); }
.section--navy  { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%); color: rgb(255 255 255 / 0.85); }
.section--navy h2, .section--navy h3 { color: var(--white); }

.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head.centered { margin-inline: auto; text-align: center; }

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  color: var(--navy);
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 60px; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
}
.centered .section-title::after { left: 50%; transform: translateX(-50%); }
.section--navy .section-title { color: var(--white); }

.section-lede { font-size: 1.0625rem; color: var(--text-mid); margin: 0; }
.section--navy .section-lede { color: rgb(255 255 255 / 0.8); }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.grid { display: grid; gap: clamp(20px, 2.5vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* -------------------------------------------------------------- 4. Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-input);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn .icon { width: 1.15em; height: 1.15em; }

.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy);
  padding: 14px 32px;
  box-shadow: 0 4px 15px rgb(201 168 76 / 0.4);
}
.btn-primary:hover {
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgb(201 168 76 / 0.6);
}

.btn-secondary {
  background: transparent;
  border-color: var(--gold);
  color: #8A6D1F;
  padding: 12px 30px;
}
.btn-secondary:hover { background: var(--gold); color: var(--navy); }

.btn-ghost {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.5);
  color: var(--white);
  padding: 12px 30px;
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: var(--white); color: var(--navy); border-color: var(--white); }

.btn-sm { padding: 9px 18px; font-size: 0.75rem; }

/* Text link with a gold arrow that nudges on hover. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.9375rem;
  color: var(--navy-mid); text-decoration: none;
}
.link-arrow .icon { transition: transform 0.25s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------------------------------------------------------------- 5. Cards */

.card {
  position: relative;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--gold);
}

/* Sheen that sweeps across on hover. Decorative only. */
.card::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: -75%;
  width: 50%;
  background: linear-gradient(120deg, transparent, rgb(255 255 255 / 0.35), transparent);
  transform: skewX(-25deg);
  transition: left 0.6s var(--ease);
  pointer-events: none;
}
.card:hover::before { left: 125%; }

.card > * { position: relative; }

.card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.card-title { font-family: var(--font-heading); font-size: 1.25rem; color: var(--navy); margin-bottom: 10px; }
.card-text  { color: var(--text-mid); font-size: 0.9375rem; margin-bottom: 18px; flex: 1; }

.card-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 18px;
  border-radius: var(--radius-input);
  background: linear-gradient(135deg, rgb(201 168 76 / 0.16), rgb(232 201 122 / 0.28));
  color: #8A6D1F;
}
.card-icon .icon { width: 26px; height: 26px; }

/* ---------------------------------------------------------- 6. Header / nav */

.topbar {
  background: var(--navy);
  color: rgb(255 255 255 / 0.85);
  font-size: 0.8125rem;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 42px; }
.topbar__contact { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: var(--gold-light); }

.main-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s var(--ease);
}
.main-nav.scrolled { box-shadow: var(--shadow-nav); }
.main-nav__inner { display: flex; align-items: center; gap: 28px; min-height: var(--nav-height); }

.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.logo img { width: auto; height: 46px; }

/*
  The brand wordmark is red and blue, which is legible on the white navbar but
  disappears against the navy footer and mobile drawer. There is no white
  version in the source assets, so it is knocked out to a single colour there.
*/
.logo__img--knockout { filter: brightness(0) invert(1); opacity: 0.92; height: 42px; width: auto; }

.mobile-menu__head .logo__img--knockout { height: 34px; }

.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex: 1; }
.nav-item { position: relative; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 12px; right: 12px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-link:hover::after,
.nav-link[aria-expanded="true"]::after,
.nav-link.is-current::after { transform: scaleX(1); }
.nav-link .chev { width: 13px; height: 13px; transition: transform 0.25s var(--ease); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Mega menu */
.mega {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translate(-50%, -8px);
  width: min(92vw, 860px);
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  padding: 26px 28px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav-item.open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 28px; }
.mega__link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  font-size: 0.875rem;
  color: var(--text-dark);
  text-decoration: none;
  border-radius: var(--radius-input);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.mega__link .icon { width: 17px; height: 17px; color: var(--gold); }
.mega__link:hover { background: var(--section-alt); color: var(--navy); }

.mega__footer {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end;
}

.nav-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }

.icon-btn {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  color: var(--navy);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.icon-btn:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.icon-btn .icon { width: 19px; height: 19px; }

.nav-toggle { display: none; }

/* ---------------------------------------------------------- 7. Mobile menu */

.mobile-menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(92vw, 400px);
  z-index: 150;
  background: var(--navy);
  color: var(--white);
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.open { transform: none; }

.mobile-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
}
.mobile-menu__head .icon-btn { border-color: rgb(255 255 255 / 0.3); color: var(--white); }
.mobile-menu__head .icon-btn:hover { background: var(--white); color: var(--navy); }

.mobile-menu__body { padding: 12px 0 26px; flex: 1; }
.mobile-menu__foot { padding: 20px 22px 30px; }
.mobile-menu__foot .btn { width: 100%; justify-content: center; }

.m-item { border-bottom: 1px solid rgb(255 255 255 / 0.09); }
.m-link, .m-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 15px 22px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.m-toggle .chev { transition: transform 0.25s var(--ease); width: 15px; height: 15px; color: var(--gold); }
.m-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.m-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
  background: rgb(0 0 0 / 0.22);
}
.m-item.open .m-sub { grid-template-rows: 1fr; }
.m-sub > div { overflow: hidden; }
.m-sub a {
  display: block;
  padding: 11px 22px 11px 36px;
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.78);
  text-decoration: none;
}
.m-sub a:hover { color: var(--gold-light); background: rgb(255 255 255 / 0.05); }

.backdrop {
  position: fixed; inset: 0; z-index: 140;
  background: rgb(7 21 41 / 0.6);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.backdrop.open { opacity: 1; visibility: visible; }

/* -------------------------------------------------------------- 8. Search */

.search-panel {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 160;
  background: var(--white);
  box-shadow: var(--shadow-card-hover);
  padding: clamp(28px, 6vw, 64px) 0;
  transform: translateY(-100%);
  transition: transform 0.35s var(--ease);
}
.search-panel.open { transform: none; }
.search-panel__inner { max-width: 720px; margin-inline: auto; }
.search-form { display: flex; gap: 10px; }
.search-form input {
  flex: 1;
  font-family: inherit;
  font-size: 1.0625rem;
  padding: 15px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--cream);
}
.search-form input:focus { border-color: var(--gold); outline: none; background: var(--white); }
.search-hint { margin: 14px 0 0; font-size: 0.875rem; color: var(--text-light); }

/* ---------------------------------------------------------------- 9. Hero */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, #24487A 100%);
  color: var(--white);
  padding-block: clamp(80px, 13vw, 150px);
  text-align: center;
}
/*
  Scrim over the hero footage.

  A flat overlay strong enough to protect centred text flattens the whole frame,
  which is what made the background barely readable. This concentrates the
  darkness where the words actually are — an ellipse behind the centre column —
  and lets the edges of the frame come through, so the footage reads while the
  headline keeps its contrast.
*/
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image:
    radial-gradient(ellipse 62% 58% at 50% 48%,
                    rgb(11 31 58 / 0.80) 0%,
                    rgb(11 31 58 / 0.62) 55%,
                    rgb(11 31 58 / 0.34) 100%),
    linear-gradient(180deg,
                    rgb(11 31 58 / 0.62) 0%,
                    rgb(11 31 58 / 0.30) 30%,
                    rgb(11 31 58 / 0.34) 70%,
                    rgb(11 31 58 / 0.70) 100%),
    radial-gradient(circle at 20% 25%, rgb(201 168 76 / 0.10), transparent 45%);
}
.hero__inner { max-width: 880px; margin-inline: auto; }
.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 1.3rem + 4.2vw, 3.75rem);
  color: var(--white);
  margin-bottom: 22px;
  letter-spacing: -0.015em;
}
.hero h1 em { font-style: normal; color: var(--gold-light); }
.hero__subtitle {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.1875rem);
  color: rgb(255 255 255 / 0.82);
  max-width: 620px;
  margin: 0 auto 34px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 46px; }

.hero__badges {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px;
  list-style: none; margin: 0; padding: 0;
}
.hero__badges li {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  font-size: 0.875rem;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.hero__badges .icon { width: 17px; height: 17px; color: var(--gold-light); }

.hero__rule {
  width: 0; height: 2px; margin: 46px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: ruleGrow 1.2s 0.9s var(--ease) forwards;
}
@keyframes ruleGrow { to { width: min(340px, 60%); } }

/* Compact hero used on interior pages. */
.page-hero {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: var(--white);
  padding-block: clamp(40px, 6vw, 68px);
}
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
  color: var(--white);
  margin: 6px 0 0;
  max-width: 900px;
}
.page-hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  margin-top: 18px;
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.72);
}
.page-hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.page-hero__meta .icon { width: 15px; height: 15px; color: var(--gold-light); }

/* Photographic hero, used where a page has a banner image of its own. */
.page-hero--image { position: relative; isolation: isolate; overflow: hidden; }
.page-hero--image .page-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.page-hero--image::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgb(11 31 58 / 0.95) 0%, rgb(11 31 58 / 0.86) 45%, rgb(26 53 88 / 0.7) 100%);
}

/* Homepage hero photograph, held well back so the type stays dominant. */
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
}

/*
  Hero background video. It sits above the still and below the scrim, and
  fades in only once it can play, so the still carries the first paint and
  there is never a black rectangle over it. Held at a lower opacity than the
  still: moving footage draws far more attention than a photograph, and the
  headline has to stay the thing you read first.
*/
.hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.hero__video.is-ready { opacity: 1; }

/*
  Blurred and scaled slightly past the frame edges. The source footage is
  presenter video with baked-in wordmarks; blurring turns it into ambient
  texture so nothing competes with the headline, and the overscale hides the
  soft edges the blur would otherwise reveal.
*/
/*
  Held under the navy scrim so it reads as depth rather than as a video playing.
  No blur is needed: unlike the site's own library, this clip carries no
  baked-in title card. See assets/videos/CREDITS.md for source and licence.
*/
.hero__video { transform: scale(1.02); }

/* ------------------------------------------------------------- 9b. Video */

.video-summary {
  margin: 0 0 36px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
.video-summary video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--navy);
  object-fit: cover;
}
.video-summary figcaption {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.75);
  background: var(--navy-deep);
}
.video-summary figcaption .icon { width: 16px; height: 16px; color: var(--gold); }

/* Homepage overview video, sitting directly beneath the hero. */
.video-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.video-intro__copy .section-title { margin-bottom: 18px; }
.video-intro__copy .section-lede { margin-bottom: 22px; }
.video-intro__player .video-summary { margin-bottom: 0; }

.video-intro__points {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.video-intro__points li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.9375rem;
  color: var(--text-mid);
}
.video-intro__points .icon { width: 19px; height: 19px; color: var(--success); }

@media (max-width: 900px) {
  .video-intro__grid { grid-template-columns: 1fr; }
  /* Lead with the player on small screens — it is the point of the section. */
  .video-intro__player { order: -1; }
}

/* Card thumbnail */
.card-media {
  display: block;
  margin: -28px -28px 20px;
  aspect-ratio: 1000 / 571;
  width: calc(100% + 56px);
  /* Overrides the base `img { max-width: 100% }`, which would otherwise clamp
     the negative-margin bleed back to the card's content width. */
  max-width: none;
  object-fit: cover;
  background: var(--section-alt);
}

/* Media band used on the directory and contact pages. */
.media-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  min-height: 260px;
  display: grid;
  align-items: end;
  isolation: isolate;
}
.media-band img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.media-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(11 31 58 / 0.92), rgb(11 31 58 / 0.25) 70%);
}
.media-band__caption { padding: 24px 26px; color: #fff; }
.media-band__caption h2 { color: #fff; font-size: 1.375rem; margin-bottom: 4px; }
.media-band__caption p { margin: 0; color: rgb(255 255 255 / 0.8); font-size: 0.9375rem; }

/* Attorney portrait, falling back to the initials monogram. */
.attorney-card__avatar img,
.profile-head__avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.attorney-card__avatar:has(img), .profile-head__avatar:has(img) { background: var(--section-alt); }

/* ---------------------------------------------------------- 10. Breadcrumb */

.breadcrumb { font-size: 0.8125rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; color: rgb(255 255 255 / 0.55); }
.breadcrumb a { color: rgb(255 255 255 / 0.8); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb .sep { color: rgb(255 255 255 / 0.35); }
.breadcrumb [aria-current] { color: var(--gold-light); }

/* ------------------------------------------------------- 11. Article layout */

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  padding-block: clamp(44px, 6vw, 76px);
}
.content-sidebar { position: sticky; top: calc(var(--nav-height) + 24px); display: grid; gap: 20px; }

.sidebar-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
}
.sidebar-card h3 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 14px;
}
.sidebar-card--gold {
  background: linear-gradient(150deg, var(--navy), var(--navy-mid));
  border-color: var(--navy);
  color: rgb(255 255 255 / 0.85);
}
.sidebar-card--gold h3 { color: var(--gold-light); }
.sidebar-card--gold p { font-size: 0.9375rem; margin-bottom: 18px; }
.sidebar-card--gold .btn { width: 100%; justify-content: center; }

.toc { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.toc li + li { margin-top: 2px; }
.toc a {
  display: block;
  padding: 6px 12px;
  color: var(--text-mid);
  text-decoration: none;
  border-left: 2px solid var(--border);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.toc a:hover, .toc a.is-active { color: var(--navy); border-left-color: var(--gold); background: var(--section-alt); }
.toc .lvl-3 a { padding-left: 26px; font-size: 0.8125rem; }

.sidebar-links { list-style: none; margin: 0; padding: 0; }
.sidebar-links li + li { margin-top: 4px; }
.sidebar-links a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-size: 0.9375rem;
  color: var(--text-mid);
  text-decoration: none;
}
.sidebar-links a:hover { color: var(--navy); }
.sidebar-links .icon { width: 16px; height: 16px; color: var(--gold); }

/* --------------------------------------------------------------- 12. Prose */

.prose { max-width: var(--reading-width); font-size: 1.0625rem; color: #2C3446; }
.prose > :first-child { margin-top: 0; }

.prose h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  margin-top: 2em;
  padding-left: 16px;
  border-left: 4px solid var(--gold);
}
.prose h3 { font-size: 1.3125rem; margin-top: 1.8em; color: var(--navy-mid); }
.prose h4, .prose h5, .prose h6 {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  margin-top: 1.6em;
  color: var(--navy);
}
/* The source used H5 for standfirst paragraphs. */
.prose h5 {
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-mid);
  border-left: 3px solid var(--gold-light);
  padding-left: 18px;
  margin-block: 0 1.6em;
}

.prose ul, .prose ol { padding-left: 0; margin: 0 0 1.5em; }
.prose ul { list-style: none; }
.prose ul li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 6px; top: 0.62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.prose ol { counter-reset: step; list-style: none; }
.prose ol li { position: relative; padding-left: 44px; margin-bottom: 14px; counter-increment: step; }
.prose ol li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0.1em;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 0.8125rem;
  font-weight: 700;
}

.prose a { color: var(--navy-mid); font-weight: 500; }
.prose strong { color: var(--navy); }

.table-scroll { overflow-x: auto; margin: 0 0 1.75em; border-radius: var(--radius-card); border: 1px solid var(--border); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; background: var(--white); }
.prose thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 18px;
  white-space: nowrap;
}
.prose tbody th, .prose tbody td {
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}
.prose tbody th { font-weight: 600; color: var(--navy); }
.prose tbody tr:nth-child(even) { background: #FBFAF8; }

/* ----------------------------------------------------- 13. Disclaimer box */

.disclaimer-box {
  display: flex;
  gap: 14px;
  background: var(--notice-bg);
  border-left: 4px solid var(--warning);
  border-radius: var(--radius-input);
  padding: 16px 20px;
  margin: 36px 0;
  font-size: 0.9375rem;
  color: #6B4E12;
}
.disclaimer-box .icon { width: 22px; height: 22px; color: var(--warning); margin-top: 2px; }
.disclaimer-box strong { color: #5A400C; }
.disclaimer-box p { margin: 0; }

/* ------------------------------------------------------------ 14. Accordion */

.accordion { display: grid; gap: 12px; }

.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.faq-item.open { border-color: var(--gold); box-shadow: var(--shadow-card); }

.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%;
  padding: 18px 22px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.faq-question:hover { color: #8A6D1F; }

.faq-icon {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgb(201 168 76 / 0.16);
  transition: transform 0.3s var(--ease), background-color 0.25s var(--ease);
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  inset: 50% 5px auto 5px;
  height: 2px;
  background: #8A6D1F;
  transform: translateY(-50%);
}
.faq-icon::after { transform: translateY(-50%) rotate(90deg); transition: opacity 0.25s var(--ease); }
.faq-item.open .faq-icon { transform: rotate(135deg); background: var(--gold); }

/* Grid-rows transition animates to the real content height, unlike max-height. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > div { overflow: hidden; }
.faq-answer__inner { padding: 0 22px 20px; color: var(--text-mid); font-size: 0.9375rem; }
.faq-answer__inner > :last-child { margin-bottom: 0; }
.faq-answer__inner ul { margin: 0 0 1em; padding-left: 22px; }
.faq-answer__inner li { margin-bottom: 7px; }

/* Categories whose questions could not be recovered render as prose. */
.answer-list { display: grid; gap: 16px; max-width: var(--reading-width); }
.answer-list__item {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-input);
  padding: 18px 22px;
  font-size: 0.9375rem;
  color: var(--text-mid);
}
.answer-list__item > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- 15. Stats */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; text-align: center; }
.stat__value {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
}
.stat__label {
  margin-top: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.7);
}

/* --------------------------------------------------------- 16. Process list */

.process { list-style: none; margin: 0; padding: 0; counter-reset: proc; }
.process li {
  position: relative;
  counter-increment: proc;
  padding: 0 0 26px 62px;
}
.process li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 20px; top: 44px; bottom: 4px;
  width: 2px;
  background: linear-gradient(var(--gold), rgb(201 168 76 / 0.15));
}
.process li::before {
  content: counter(proc);
  position: absolute;
  left: 0; top: 0;
  display: grid; place-items: center;
  width: 41px; height: 41px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
  color: #8A6D1F;
  font-weight: 700;
  font-size: 0.9375rem;
}
.process h3 { font-family: var(--font-body); font-size: 1.0625rem; color: var(--navy); margin-bottom: 5px; }
.process p { margin: 0; color: var(--text-mid); font-size: 0.9375rem; }

/* ------------------------------------------------------- 17. County / attorney */

.county-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 14px; }

.county-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--navy);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.county-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-card); color: var(--navy); }
.county-card__name { font-weight: 600; font-size: 0.9375rem; }
.county-card__count { font-size: 0.75rem; color: var(--text-light); display: block; margin-top: 2px; }
.county-card .icon { color: var(--gold); width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
.county-card:hover .icon { transform: translateX(3px); }

.county-card--soon {
  background: transparent;
  border-style: dashed;
  color: var(--text-light);
  cursor: default;
  pointer-events: none;
}

.attorney-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }

.attorney-card { display: flex; gap: 18px; align-items: flex-start; padding: 22px; }
.attorney-card__avatar {
  display: grid; place-items: center;
  flex: none;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--navy), var(--navy-mid));
  color: var(--gold-light);
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.attorney-card__body { min-width: 0; flex: 1; }
.attorney-card__name {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  color: var(--navy);
  margin: 0 0 3px;
}
.attorney-card__name a { color: inherit; text-decoration: none; }
.attorney-card__name a:hover { color: #8A6D1F; }
.attorney-card__firm { font-size: 0.875rem; color: var(--text-mid); margin: 0 0 8px; }
.attorney-card__meta { display: grid; gap: 5px; font-size: 0.8125rem; color: var(--text-light); margin-bottom: 14px; }
.attorney-card__meta span { display: flex; align-items: center; gap: 8px; }
.attorney-card__meta .icon { width: 14px; height: 14px; color: var(--gold); }
.attorney-card__meta a { color: inherit; text-decoration: none; }
.attorney-card__meta a:hover { color: var(--navy); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.tag {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--section-alt);
  color: var(--text-mid);
  white-space: nowrap;
}
.tag--gold { background: rgb(201 168 76 / 0.16); color: #8A6D1F; }

/* Attorney profile header */
.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.profile-head__avatar {
  display: grid; place-items: center;
  width: 96px; height: 96px;
  flex: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  border: 2px solid rgb(201 168 76 / 0.5);
  color: var(--gold-light);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
}
.profile-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.detail-list { display: grid; gap: 0; margin: 0; }
.detail-list > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}
.detail-list dt { color: var(--text-light); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.detail-list dd { margin: 0; color: var(--text-dark); }
.detail-list a { color: var(--navy-mid); }

/* Callout for information the source data does not contain. */
.data-note {
  display: flex; gap: 12px;
  padding: 14px 18px;
  background: var(--section-alt);
  border-radius: var(--radius-input);
  font-size: 0.875rem;
  color: var(--text-mid);
}
.data-note .icon { width: 18px; height: 18px; color: var(--text-light); margin-top: 2px; flex: none; }

/* --------------------------------------------------------------- 18. Forms */

.form-grid { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mid); }
.field .req { color: var(--danger); }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--white);
  color: var(--text-dark);
  width: 100%;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(201 168 76 / 0.18);
}

.alert { padding: 15px 18px; border-radius: var(--radius-input); margin-bottom: 22px; font-size: 0.9375rem; }
.alert--error   { background: #FDECEE; border-left: 4px solid var(--danger);  color: #7A1B29; }
.alert--success { background: #E8F5EE; border-left: 4px solid var(--success); color: #1D4A37; }
.alert ul { margin: 8px 0 0; padding-left: 20px; }

/* -------------------------------------------------------------- 19. Footer */

.site-footer { background: var(--navy); color: rgb(255 255 255 / 0.72); font-size: 0.9375rem; }
.site-footer__top { padding-block: clamp(44px, 6vw, 68px); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: 9px; }
.site-footer a { color: rgb(255 255 255 / 0.7); text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); }

.footer-brand .logo__text b { color: var(--white); }
.footer-tagline { margin: 16px 0 14px; color: rgb(255 255 255 / 0.6); font-size: 0.9375rem; }
.footer-disclaimer { font-size: 0.8125rem; line-height: 1.65; color: rgb(255 255 255 / 0.45); margin: 0; }

.site-footer__bottom {
  background: var(--navy-deep);
  border-top: 1px solid rgb(255 255 255 / 0.07);
  padding-block: 20px;
  font-size: 0.8125rem;
}
.site-footer__bottom .container { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------------------------------------------------------- 20. Responsive */

@media (max-width: 1080px) {
  .content-layout { grid-template-columns: 1fr; }
  .content-sidebar { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); display: grid; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-list, .nav-actions .desktop-only { display: none; }
  .nav-toggle { display: grid; }
  .main-nav__inner { justify-content: space-between; }
  .mega__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .topbar__contact .hide-sm { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .detail-list > div { grid-template-columns: 1fr; gap: 4px; }
  .attorney-card { flex-direction: column; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .site-footer__bottom .container { justify-content: flex-start; }
}

@media print {
  .topbar, .main-nav, .site-footer, .content-sidebar, .search-panel, .mobile-menu, .backdrop { display: none !important; }
  body { background: #fff; }
  .faq-answer { grid-template-rows: 1fr !important; }
}