@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  --brand-primary:    #023A55;
  --brand-accent:     #F59E0B;
  --brand-neutral:    #14202B;
  --brand-bg:         #ffffff;
  --brand-on-primary: #ffffff;

  --brand-secondary:  #0284C2;
  --brand-surface:    #F8FAFC;

  --color-primary:       var(--brand-primary);
  --color-primary-hover: color-mix(in oklch, var(--brand-primary) 85%, black);
  --color-primary-soft:  color-mix(in oklch, var(--brand-primary) 8%, white);
  --color-accent:        var(--brand-accent);
  --color-accent-hover:  color-mix(in oklch, var(--brand-accent) 94%, black);   /* 4.77:1 with #023A55 */
  --color-secondary:     var(--brand-secondary);
  --color-secondary-text:#0278B1;   /* 4.86:1 on white, 4.64:1 on the alt surface */

  --color-on-accent:     var(--brand-primary);

  --color-accent-text: #9E6506;   /* 4.86:1 on white, 4.65:1 on the alt surface */
  --focus-ring:        var(--brand-primary);   /* 12.08:1 on white, 3:1+ on every surface used */

  --color-text:       var(--brand-neutral);
  --color-text-muted: #64748B;   /* 4.76:1 on white, 4.55:1 on the alt surface */
  --color-bg:         var(--brand-bg);
  --color-bg-alt:     var(--brand-surface);
  --color-border:     #CBD5E1;
  --color-border-soft:#E2E8F0;
  --color-border-input:#7E8FA3;   /* 3.31:1 on white, 3.16:1 on the alt surface - interactive boundaries only */

  --font-sans:    Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: Montserrat, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;  --sp-10: 2.5rem;
  --sp-12: 3rem;  --sp-16: 4rem;  --sp-20: 5rem;
  --content-max: 72rem;
  --reading-max: 42rem;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-photo: 14px;

  --shadow-sm: 0 1px 2px rgba(2, 58, 85, .06), 0 1px 3px rgba(2, 58, 85, .08);
  --shadow-md: 0 4px 12px rgba(2, 58, 85, .08), 0 2px 4px rgba(2, 58, 85, .05);
  --shadow-lg: 0 12px 32px rgba(2, 58, 85, .12), 0 4px 8px rgba(2, 58, 85, .06);

  --dur-fast: 150ms;
  --dur-base: 250ms;
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--color-primary);
  text-wrap: balance;
}
h1 { font-size: clamp(2.125rem, 3.6vw + 1rem, 3.25rem); }
h2 { font-size: clamp(1.75rem, 2.2vw + 1rem, 2.5rem); }
h3 { font-size: clamp(1.1875rem, .6vw + 1rem, 1.375rem); }
h4 { font-size: 1.0625rem; }

p { max-width: var(--reading-max); }
a { color: var(--color-secondary-text); text-decoration: none; }
a:hover { text-decoration: underline; }

.prose a, p a { text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; height: auto; }
.photo { border-radius: var(--radius-photo); display: block; width: 100%; object-fit: cover; }

.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-5); }
.container--narrow { max-width: 52rem; }

.eyebrow {
  font-family: var(--font-display);
  font-size: .78125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--sp-3);
}
.lead { font-size: 1.1875rem; line-height: 1.6; color: var(--color-text-muted); }

.section-title { margin-bottom: var(--sp-10); max-width: 46rem; }
.section-title p { color: var(--color-text-muted); font-size: 1.0625rem; }
/* base.css zeroes every margin, so the lead paragraph sat straight under the
   H2 descenders and read as one glued block. .prose h2 already had this. */
.section-title h2 + p { margin-top: var(--sp-3); }
.section-title--center { margin-inline: auto; text-align: center; }
.section-title--center p { margin-inline: auto; }

section { padding-block: clamp(var(--sp-12), 6vw, var(--sp-20)); }
.section--alt { background: var(--color-bg-alt); }
.section--tight { padding-block: var(--sp-10); }

.rule-accent { width: 3rem; height: 4px; border-radius: 2px; background: var(--color-accent); margin-bottom: var(--sp-5); }
.section-title--center .rule-accent { margin-inline: auto; }

.site-header {
  background: var(--color-primary);
  position: sticky;
  top: 0;
  z-index: 50;
  --focus-ring: #FBBF4B;
}
.site-header__inner {
  max-width: var(--content-max); margin-inline: auto;
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
}
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: #fff; font-weight: 700; }
.brand:hover { text-decoration: none; }
.brand__mark { display: block; height: 46px; width: auto; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.nav-desktop { display: flex; align-items: center; }
.nav-desktop > ul { display: flex; align-items: center; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.nav-desktop li { position: relative; }
.nav-desktop a {
  font-size: .9375rem;
  font-weight: 600;
  color: #fff;
  padding-block: var(--sp-2);
  display: inline-block;
}
.nav-desktop a:hover { color: #FBBF4B; text-decoration: none; }

.nav-desktop a[aria-current="page"] {
  color: #fff;
  box-shadow: inset 0 -3px 0 #FBBF4B;
}

.nav-desktop a.cta {
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
}
.nav-desktop a.cta:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.nav-desktop a.cta[aria-current="page"] { box-shadow: none; }

.has-dropdown > a::after {
  content: ""; display: inline-block; margin-left: .4em; vertical-align: .18em;
  width: .4em; height: .4em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transform-origin: 65% 65%;
}
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 15rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.nav-desktop > ul > li:nth-last-child(-n+3) .dropdown { left: auto; right: 0; }
.has-dropdown:not([data-suppress]):hover .dropdown,
.has-dropdown:not([data-suppress]):focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-weight: 500;
  color: var(--color-primary);
}
.dropdown a:hover { background: var(--color-primary-soft); color: var(--color-primary); text-decoration: none; }
/* Current page in a dropdown: the same soft tint the hover state uses, plus
   weight. The old accent bar down the left edge read as a stray rule. */
.nav-desktop .dropdown a[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
  box-shadow: none;   /* the top-level nav underline rule also matches in here */
}

.nav-toggle {
  display: none;
  background: none; border: 1px solid rgba(255,255,255,.45);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  color: #fff;
  cursor: pointer;
}

.nav-mobile {
  background: var(--color-bg);
  padding: var(--sp-6) var(--sp-5);
}
.nav-mobile ul { list-style: none; margin: 0; padding: 0; }
.nav-mobile a {
  display: block;
  padding: var(--sp-3) 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border-soft);
}
.nav-mobile a.nav-mobile__cta {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-sm);
  border-bottom: 0;
  text-align: center;
  margin-top: var(--sp-4);
  font-weight: 700;
}
.nav-mobile a.nav-mobile__cta:hover { background: var(--color-accent-hover); color: var(--color-on-accent); text-decoration: none; }

.nav-mobile details > summary {
  cursor: pointer; list-style: none;
  padding: var(--sp-3) 0;
  font-family: var(--font-display); font-weight: 600;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border-soft);
  position: relative;
}
.nav-mobile details > summary::-webkit-details-marker { display: none; }
.nav-mobile details > summary::after {
  content: ""; position: absolute; right: .35rem; top: 1.35rem;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--color-accent-text);
  border-bottom: 2px solid var(--color-accent-text);
  transform: rotate(45deg);
}
.nav-mobile details[open] > summary::after { transform: rotate(-135deg); top: 1.55rem; }
.nav-mobile details ul { padding-left: var(--sp-4); }
.nav-mobile details a { font-family: var(--font-sans); font-weight: 500; font-size: .9375rem; }
.nav-mobile__close {
  background: none; border: 0; cursor: pointer;
  color: var(--color-primary); font-size: 1.5rem; line-height: 1;
  padding: var(--sp-2);
}

.header-phone {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-width: 44px; min-height: 44px;
  font-family: var(--font-display); font-weight: 700;
  color: #fff; white-space: nowrap;
}
.header-phone:hover { text-decoration: none; color: #FBBF4B; }
.header-phone svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 1024px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-phone .header-phone__label { display: none; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-lg { font-size: 1rem; padding: var(--sp-4) var(--sp-8); }

.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #fff; }

.btn-accent { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.btn-accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-on-accent); }

.btn-ghost { background: transparent; color: var(--color-primary); border-color: var(--color-border-input); }
.btn-ghost:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); }

.btn-block { width: 100%; }

.hero {
  background:
    linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
  padding-block: clamp(var(--sp-10), 5vw, var(--sp-16));
  border-bottom: 1px solid var(--color-border-soft);
}

.hero__highlight {
  color: inherit;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 100% .22em;
  background-position: 0 88%;
}

/* The .hero__highlight underline sits at 88% of the line box, so with no
   margin under the H1 it landed a few pixels off the lead paragraph.
   .hero--photo already set this; the base and the interior hero did not. */
.hero h1 { margin-bottom: var(--sp-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); margin-bottom: var(--sp-6); }

/* Interior page hero - centred on the light band. The base .hero was built for
   the old two-column home layout, so on a page with no media it leaves half the
   row empty and breaks the H1 at an odd width. 404.php keeps the base. */
.hero--page { text-align: center; }
.hero--page > .container { max-width: 56rem; }
.hero--page .eyebrow,
.hero--page .lead { max-width: 44rem; margin-inline: auto; }
.hero--page .hero__actions { justify-content: center; margin-bottom: var(--sp-6); }

/* Photo hero - centred copy over a courtroom photograph under a navy scrim,
   carried over from the outgoing site. */
.hero--photo {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(30rem, 62vh, 40rem);
  padding-block: clamp(var(--sp-16), 8vw, var(--sp-20));
  background: var(--color-primary);
  border-bottom: 0;
  color: #fff;
  text-align: center;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__bg picture { display: block; height: 100%; }
.hero__bgimg { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* 85% navy, the same value the outgoing site uses. Against the brightest pixel
   in the photograph the composite is #285870: #fff 7.75, #FBBF4B 4.67,
   #C7D6E0 5.21, white-65% border 4.35. */
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: rgba(2, 58, 85, .85); }

.hero--photo .hero__inner { position: relative; }
.hero--photo h1 { color: #fff; margin-bottom: var(--sp-5); }
/* Centre the box, not just the text inside it - .eyebrow is a <p> and inherits
   the 42rem reading max, which parks it left of centre in a wide container. */
.hero--photo .eyebrow { color: #FBBF4B; max-width: none; margin-inline: auto; }
.hero--photo .lead {
  color: #C7D6E0;
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: var(--sp-8);
}
.hero--photo .hero__actions { justify-content: center; margin-top: 0; margin-bottom: var(--sp-8); }
.hero--photo .btn-ghost { color: #fff; border-color: rgba(255,255,255,.65); }
.hero--photo .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.hero--photo :focus-visible { outline-color: #FBBF4B; }

/* Block, not flex: on a phone the city list wraps to two lines and a flex pin
   would sit stranded mid-height on the left. Inline keeps it with the text. */
.hero__locations {
  max-width: none;
  margin: 0;
  text-align: center;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-muted);   /* 4.76:1 on the light hero */
}
.hero--photo .hero__locations { color: #C7D6E0; }   /* 5.21:1 over the scrim */
.hero__pin {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: -.2em;
  margin-right: var(--sp-2);
}

/* Phones: the copy alone fills the screen, so trim the padding rather than let
   the Call button fall below the fold. */
@media (max-width: 640px) {
  .hero--photo { padding-block: var(--sp-10); min-height: 0; }
  .hero--photo .lead { margin-bottom: var(--sp-6); }
  .hero--photo .hero__actions { margin-bottom: var(--sp-6); }
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--sp-6);
  text-align: center;
}
.stats > div { padding: var(--sp-4) var(--sp-2); }
.stats__num {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 2.4vw + 1rem, 2.75rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.stats__label {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-6);
}
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
/* Grid leaves a short last row hanging off the left edge under a centred
   heading. Flex with fixed bases keeps the columns and centres the remainder. */
.cards--center { display: flex; flex-wrap: wrap; justify-content: center; }
.cards--center > * { flex: 1 1 100%; }
@media (min-width: 40rem) { .cards--center > * { flex: 0 1 calc((100% - var(--sp-6)) / 2); } }
@media (min-width: 56rem) { .cards--center > * { flex: 0 1 calc((100% - 2 * var(--sp-6)) / 3); } }

.card--path h3 { font-size: 1.125rem; line-height: 1.3; }
.card--path .card__cta a { font-size: 1rem; }
/* Reserve the second line only once the cards actually sit side by side.
   In a single column there is nothing to line up with and the reserved line
   just opens a gap under every one-line heading. */
@media (min-width: 40rem) {
  .card--path h3 { min-height: 2.6em; }
  .card:not(:only-child) > .office__county { min-height: 3.3em; }
  /* Opt-in twin of the .card--path rule above, for plain .card rows whose copy
     happens to wrap unevenly: a heading that runs to two lines while its
     neighbours stay on one pushes its body copy a full line down (measured at
     25.3px on /adoption #services and /bankruptcy #related, 24.1px on
     /bankruptcy #chapters at tablet). Applied per grid, NOT to every .cards row
     — a blanket rule reserved a blank line under every one-line heading and
     read as a bug on /locations and /practice-areas. Add cards--level to a grid
     only when its own headings actually disagree. */
  .cards--level > .card:not(:only-child) h3 { min-height: 2.6em; }
}
/* Post titles run long enough to reach three lines, so two lines of slack is
   not enough to hold the teasers level. Measured 3/2/2 and 3/3/2 line counts
   across the two Family & divorce rows. */
@media (min-width: 56rem) {
  .cards--posts > .card:not(:only-child) h3 { min-height: 3.9em; }
}
/* A single post in the answers grid used to stretch the whole 72rem container. */
.cards > .card:only-child { max-width: 36rem; margin-inline: auto; }


/* A <p>, so the 42rem reading max applied and the centred text inside it
   landed well left of the page centre. Let it span its container. */
.offices__more { margin-top: var(--sp-8); font-weight: 600; max-width: none; }
.faq--center { margin-inline: auto; }


.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--color-text-muted); font-size: .9688rem; max-width: none; }
.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  margin-bottom: var(--sp-5);
}
.card__icon svg, .card__icon img { width: 26px; height: 26px; }

.card__list {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  font-size: .9063rem; color: var(--color-text-muted);
}
.card__list li { padding-left: 1.25rem; position: relative; margin-bottom: var(--sp-2); }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
}
.card__cta { margin-top: auto; padding-top: var(--sp-5); font-weight: 700; font-family: var(--font-display); font-size: .9375rem; }
.card__cta a { color: var(--color-secondary-text); }
.card__cta a::after { content: " \2192"; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--sp-8); counter-reset: step; }
/* auto-fit orphans the 4th card on a 3-up row at desktop width. */
.steps--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1100px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }
/* Narrow columns wrap one heading to two lines and the bodies stop lining up. */
/* only once the grid is actually 4-across; below that nothing wraps and the
   reserved second line is just a gap under every heading. */
@media (min-width: 1100px) { .steps--4 .step h3 { min-height: 2.6em; } }
@media (max-width: 599px) { .steps--4 { grid-template-columns: 1fr; } }
.step { counter-increment: step; }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1.125rem;
  margin-bottom: var(--sp-4);
}
.step__num::before { content: counter(step); }
.step h3 { margin-bottom: var(--sp-3); }
.step p { color: var(--color-text-muted); max-width: none; }

.panel-navy {
  background: var(--color-primary);
  color: #fff;
  --color-text: #fff;
  --color-text-muted: #C7D6E0;          /* 9.1:1 on #023A55 */
  --color-accent-text: #FBBF4B;         /* 8.4:1 on #023A55 */
  --color-secondary-text: #7DC8EE;
  --focus-ring: #FBBF4B;
  --color-border-soft: rgba(255,255,255,.16);
}
.panel-navy h1, .panel-navy h2, .panel-navy h3, .panel-navy h4 { color: #fff; }
.panel-navy p { color: var(--color-text-muted); }
.panel-navy .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.panel-navy .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.panel-navy .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow: none; }
.panel-navy .stats__num { color: #fff; }

.split { display: grid; gap: clamp(var(--sp-8), 4vw, var(--sp-12)); align-items: center; }
.split__media img { border-radius: var(--radius-photo); box-shadow: var(--shadow-md); }
.split__copy h2 { margin-bottom: var(--sp-4); }
.split__copy p { color: var(--color-text-muted); margin-bottom: var(--sp-4); }
.split__copy .btn { margin-top: var(--sp-2); }

.checklist { list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.checklist li { position: relative; padding-left: 1.9rem; margin-bottom: var(--sp-3); }
/* The tick was two rotated borders, which landed the mark about 1px left and 2px
   low inside the dot and sheared both stroke ends off on a diagonal. Drawn as one
   centred SVG instead: round caps, true 2:1 arms, and it cannot drift out of the
   dot. The dot itself stays token-driven; only the tick colour is baked in, and it
   is the same navy on the orange dot inside .panel-navy, so it needs no pair. */
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .2em;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2.5%206.4%204.9%208.8%209.5%203.4'%20fill='none'%20stroke='%23023A55'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: .75rem .75rem;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
}

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--sp-6); }
/* The accent used to be a 4px left border. Against the 1px border on the other
   three sides and a 12px radius, the corners mitre into a wedge, so the bar
   flared at both ends like a peeling sticker. The rating carries the accent now
   and nothing touches the card edge. */
.quote {
  display: flex; flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.quote__stars { display: flex; gap: 3px; margin-bottom: var(--sp-3); }
.quote__stars svg { width: 15px; height: 15px; fill: var(--color-accent); }
.quote blockquote { margin: 0 0 var(--sp-4); font-size: .9688rem; color: var(--color-text); }
.quote figcaption { font-family: var(--font-display); font-weight: 700; color: var(--color-primary); font-size: .9375rem; margin-top: auto; }

/* Five offices under a centred heading. A 3-up grid breaks 3 + 2 and leaves a
   hole on the right of the second row, so lay them out as a centred flex row
   and the trailing two cards sit under the middle of the block instead. */
.offices { display: flex; flex-wrap: wrap; gap: var(--sp-6); justify-content: center; }
/* Fixed bases, not flex-grow: with grow enabled the fifth card stretched the
   whole row on its own at tablet width. */
.offices > * { flex: 0 1 100%; min-width: 0; }
@media (min-width: 34rem) {
  .offices > * { flex: 0 1 calc((100% - var(--sp-6)) / 2); }
}
@media (min-width: 900px) {
  .offices > * { flex: 0 1 calc((100% - 2 * var(--sp-6)) / 3); }
}
/* A single office card should not stretch the full container width. */
.offices--one { max-width: 24rem; margin-inline: auto; }
.offices--one > * { flex: 1 1 100%; }
.office {
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.office h3 { font-size: 1.0625rem; margin-bottom: var(--sp-1); }
.office__county { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-text); margin-bottom: var(--sp-3); }
.office address { font-style: normal; color: var(--color-text-muted); font-size: .9375rem; margin-bottom: var(--sp-3); line-height: 1.5; }
/* Equal-height cards in a row: without this the phone floats up under a short
   address and misaligns with the taller card beside it. */
.office__phone { font-family: var(--font-display); font-weight: 700; margin-top: auto; }
.office__cta { padding-top: var(--sp-3); font-weight: 700; font-family: var(--font-display); font-size: .9375rem; }
.office__cta a { color: var(--color-secondary-text); }
.office__cta a::after { content: " \2192"; }

.faq { max-width: 48rem; }
.faq__item {
  border-bottom: 1px solid var(--color-border-soft);
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-5) 2.5rem var(--sp-5) 0;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-primary);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: .55rem; height: .55rem;
  border-right: 2px solid var(--color-accent-text);
  border-bottom: 2px solid var(--color-accent-text);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__item summary:hover { color: var(--color-secondary-text); }
.faq__answer { padding-bottom: var(--sp-5); color: var(--color-text-muted); }
.faq__answer p { max-width: none; }

.cta-band {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(var(--sp-8), 4vw, var(--sp-12));
  text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: var(--sp-4); }
.cta-band p { color: #C7D6E0; margin-inline: auto; margin-bottom: var(--sp-8); }

.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.cta-band :focus-visible { outline-color: #FBBF4B; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
.cta-band__hours { margin-top: var(--sp-6); font-size: .875rem; color: #C7D6E0; }

.breadcrumbs { font-size: .875rem; color: var(--color-text-muted); padding-block: var(--sp-4); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--color-border); }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-secondary-text); }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.form { display: grid; gap: var(--sp-5); }
.form-row { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9063rem;
  color: var(--color-primary);
  margin-bottom: var(--sp-2);
}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="url"],
.form input[type="number"],
.form input[type="date"],
.form select,
.form textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form textarea { min-height: 9rem; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 20%, transparent);
}
.form input::placeholder, .form textarea::placeholder { color: #63738A; }

.form-check { display: flex; align-items: flex-start; gap: var(--sp-3); align-self: start; }
.form-check input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .25rem; }
.form-check label { margin-bottom: 0; font-weight: 500; font-family: var(--font-sans); }

.form-help { font-size: .8438rem; color: var(--color-text-muted); }

.form-status { border-radius: var(--radius-sm); padding: var(--sp-4) var(--sp-5); font-weight: 600; }
.form-status:not([data-state]) { display: none; }
.form-status[data-state="ok"]    { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.form-status[data-state="error"] { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

.form-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: clamp(var(--sp-6), 3vw, var(--sp-8));
  box-shadow: var(--shadow-md);
}

.site-footer { background: var(--color-primary); color: #fff; padding-block: var(--sp-16) var(--sp-8); }
.site-footer a { color: #C7D6E0; }
.site-footer a:hover { color: #fff; }
.site-footer h3 { color: #fff; }

.site-footer > * { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-5); }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-8);
  margin-bottom: var(--sp-10);
}
/* Brand + four link groups = five columns. auto-fit only ever fitted four, so
   FIRM dropped onto a second row and left three empty cells beside it. */
@media (min-width: 60rem) {
  .site-footer__grid {
    grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}
.site-footer__brand .brand { display: block; }
.site-footer__brand .brand__mark { height: 52px; width: auto; }
.site-footer__tagline { color: #C7D6E0; font-size: .9375rem; margin-top: var(--sp-4); }
.site-footer__address { font-style: normal; color: #C7D6E0; font-size: .9375rem; line-height: 1.6; margin-top: var(--sp-4); }
.site-footer__address a { text-decoration: underline; text-underline-offset: 3px; }

.site-footer__grid h2 {
  font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #FBBF4B; margin-bottom: var(--sp-4); line-height: 1.4;
}
.site-footer__grid ul { list-style: none; margin: 0; padding: 0; }
.site-footer__grid li { margin-bottom: var(--sp-2); }
.site-footer__grid a { font-size: .9375rem; }

.site-footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.site-footer__social a { display: inline-flex; }
.site-footer__social svg { width: 20px; height: 20px; }

/* margin-inline must stay auto: .site-footer > * caps every footer block at
   --content-max, and max-width:none plus a 0 inline margin parked this line
   hard against the viewport edge while the rest of the footer stayed inside
   the container. */
/* Left margin mirrors what margin-inline:auto would give a full-width footer
   block, so the disclaimer still starts flush with the columns above it while
   wrapping at a readable width. A plain `auto` on both sides would centre it
   under left-aligned content, and `0` would park it against the viewport edge
   (see the note above). Measured before this: one 878px line, ~135 characters. */
.site-footer__disclaimer {
  max-width: calc(40rem + 2 * var(--sp-5));
  margin: 0 auto var(--sp-5) max(0px, calc((100% - var(--content-max)) / 2));
  font-size: .8125rem;
  color: #C7D6E0;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: var(--sp-6);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between; align-items: center;
  font-size: .8438rem; color: #C7D6E0;
}
.site-footer__credit { display: inline-flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.site-footer__credit a { text-decoration: underline; }
.spark-mark { display: inline-block; width: 1.5em; height: 1.5em; flex: none; vertical-align: -.15em; }

.site-footer :focus-visible { outline-color: #FBBF4B; }

.consent-banner {
  position: fixed; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4);
  z-index: 100;
  max-width: 60rem; margin-inline: auto;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5) var(--sp-6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5);
  justify-content: space-between;
}
.consent-banner[hidden] { display: none; }
.consent-banner {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.consent-banner.is-visible { opacity: 1; transform: none; }
.consent-banner__text { font-size: .9063rem; color: #DCE7EE; margin: 0; max-width: 42rem; }
.consent-banner__text a { color: #FBBF4B; text-decoration: underline; }
.consent-banner__actions { display: flex; gap: var(--sp-3); }
.consent-banner :focus-visible { outline-color: #FBBF4B; }
.consent-banner .btn-primary { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.consent-banner .btn-primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); border-color: var(--color-accent-hover); }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: var(--sp-4); }
.prose { max-width: var(--reading-max); }
/* base.css resets every margin to 0 and nothing put paragraph spacing back, so
   consecutive <p> in a prose block ran together. TEMPLATE gap, not fork-specific. */
.prose > p { margin-bottom: var(--sp-5); }
.prose > p:last-child { margin-bottom: 0; }
.prose > .rule-accent + h2 { margin-top: 0; }
/* A prose block that opens on a heading (terms) picked up the 2.5rem stack
   margin and sat 40px lower than every other section on the site. */
.prose > h2:first-child,
.prose > h3:first-child { margin-top: 0; }
.prose h2 { margin-top: var(--sp-10); margin-bottom: var(--sp-4); }
/* Long-form pages (article, terms, privacy) use H2 as a sub-head inside the
   reading column, not as a section title. At the full 2.5rem section scale it
   shouts over the body and wrapped half of them onto two lines. Practice-page
   .prose blocks DO carry a real section title, so this is opt-in. */
/* Centre the 42rem reading column inside the 52rem container instead of pinning
   it left. Pinned left, a #problem block measured 20px of slack on its left and
   140px on its right, putting its centre 60px left of the page centre while the
   full-width sections above and below it stayed centred — the block read as
   shoved sideways. Applies to every narrow-container prose block, articles
   included (which is where this rule started). */
.container--narrow > .prose { margin-inline: auto; }
.prose--article h2 { font-size: clamp(1.5rem, 1vw + 1.125rem, 1.875rem); }
.prose--article h3 { font-size: 1.1875rem; }
.prose h3 { margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.prose ul, .prose ol { margin-bottom: var(--sp-5); padding-left: 1.25rem; }
/* .checklist draws its own marker at left:0, so the list padding above pushed
   it 1.25rem right of the paragraphs it sits between. */
.prose .checklist { padding-left: 0; }
.prose li { margin-bottom: var(--sp-2); }

/* Pull quote for long-form articles: lifts one sentence already in the piece out
   of the column so a 2,000px+ run of paragraphs has somewhere for the eye to
   rest. Flat rule, no radius and no other border, so it cannot mitre the way the
   old .quote spine did. */
.pullquote {
  margin-block: var(--sp-8);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--color-primary);
  max-width: none;
}

/* Wide layout (2026-10-07, Chance picked 1408px). Every section and its content
   runs the full container width on big screens, including the sections that
   used to sit in a narrow centred column. Phones and tablets are unaffected:
   these are all max-widths, so smaller screens still fill edge to edge. */
:root { --content-max: 88rem; --reading-max: var(--content-max); }
.container--narrow,
.hero--page > .container { max-width: var(--content-max); }
.section-title,
.hero--page .lead,
.hero--photo .lead,
.faq { max-width: none; }
/* The wider container fit a 4th column into .cards--3 (six service cards went
   4 + 2) and a 3rd/4th into .cards--2. Cap the column count; the minimums
   still drop them to fewer columns on smaller screens. */
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(max(17rem, calc((100% - 2 * var(--sp-6)) / 3)), 1fr)); }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(max(20rem, calc((100% - var(--sp-6)) / 2)), 1fr)); }

/* Problem section (2026-10-20, Chance): back to a centred reading column. At
   the full 88rem the paragraphs ran ~150 characters a line. 48rem keeps them
   near 85. Every practice page shares this #problem block. */
#problem .container--narrow { max-width: 48rem; }