/* ==========================================================================
   Lifestyle Injury Lawyers — Global stylesheet
   Brand tokens taken from the supplied Canva brand kit.
   Typeface: Poppins (brand font), self-referenced via Google Fonts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette — exact values from the brand kit */
  --navy:        #002855;
  --ink:         #1a1b1f;
  --teal:        #81ccb8;
  --orange:      #fb8b24;
  --bone:        #f8f7ef;
  --white:       #ffffff;

  /* Derived tints. Kept few and deliberate so the palette stays disciplined. */
  --navy-900:    #001b3a;
  --navy-700:    #0a3a6e;
  --navy-060:    rgba(0, 40, 85, 0.06);
  --navy-012:    rgba(0, 40, 85, 0.12);
  --teal-soft:   #eff8f5;   /* lightened: a whisper, not a swatch */
  --teal-deep:   #2f7362;   /* clears 4.5:1 on white, bone and teal-soft */
  --teal-line:   #cfe7de;   /* hairline rules and icon strokes */
  --mist:        #f7faf9;   /* barely-there section ground, cooler than bone */
  --orange-deep: #b85f00;   /* icons & focus rings on light bg (3:1) */
  --orange-text: #a85700;   /* small text on light bg (4.5:1) */
  --grey-body:   #55606b;
  --rule:        rgba(0, 40, 85, 0.10);

  /* Type scale — fluid, clamped. Base 1rem = 16px. */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.70vw, 1.94rem);
  --step-3:  clamp(1.73rem, 1.50rem + 1.15vw, 2.58rem);
  --step-4:  clamp(1.85rem, 1.55rem + 1.45vw, 2.85rem);
  --step-5:  clamp(2.20rem, 1.75rem + 2.25vw, 3.70rem);

  /* Spacing */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Layout */
  --wrap:      1200px;
  --wrap-text: 72ch;
  --radius:    14px;
  --radius-lg: 24px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--step-0);
  line-height: 1.72;
  color: var(--grey-body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* Offsets the sticky mobile action bar so content is never hidden behind it. */
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); font-weight: 600; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p  { margin: 0 0 var(--space-s); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }

img { max-width: 100%; height: auto; display: block; }

strong { color: var(--navy); font-weight: 600; }

ul, ol { margin: 0 0 var(--space-s); padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

/* Visible, high-contrast focus ring everywhere. WCAG 2.2 AA (2.4.11/2.4.13).
   No single orange clears 3:1 against both white and navy, so the ring is
   context-aware: --focus-ring is redefined on dark sections below. */
:focus-visible {
  outline: 3px solid var(--focus-ring, var(--orange-deep));
  outline-offset: 3px;
  border-radius: 4px;
}
/* On dark grounds the bright brand orange is the one that reads. */
.hero, .section--navy, .site-footer, .topbar { --focus-ring: var(--orange); }
/* The teal strip is mid-tone: neither orange clears 3:1 against it, so the
   ring goes navy there (7.85:1). */
.trust { --focus-ring: var(--orange-deep); }

/* Skip link — first tab stop on every page. */
.skip-link {
  position: absolute; left: var(--space-s); top: -100px;
  z-index: 200; padding: 0.7rem 1.2rem;
  background: var(--navy); color: var(--white);
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; color: var(--white); }

.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;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-l); }
.section--bone { background: var(--mist); }
.section--navy { background: var(--navy); color: rgba(255,255,255,0.86); }
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: var(--white); }
.section--navy strong { color: var(--white); }
.section--navy a:not(.btn) { color: var(--teal); }

@media (min-width: 900px) {
  .section { padding-block: var(--space-2xl); }
  .section--tight { padding-block: var(--space-xl); }
}

.prose { max-width: var(--wrap-text); }

/* Section eyebrow. The short rule encodes hierarchy without adding ornament. */
.eyebrow {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal-deep); margin-bottom: var(--space-xs);
}
.eyebrow::before {
  content: ''; width: 28px; height: 2px;
  background: var(--teal); flex: none;
}
.section--navy .eyebrow { color: var(--teal); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  min-height: 52px;              /* comfortable touch target (WCAG 2.5.8) */
  padding: 0.85rem 1.75rem;
  font: inherit; font-weight: 600; font-size: var(--step-0);
  line-height: 1.2;
  border: 2px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
              box-shadow 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary = orange. It is the only orange on the page, so the eye goes
   straight to the single action we want people to take. */
.btn--primary,
a.btn--primary,
.section--navy a.btn--primary,
.hero a.btn--primary {
  background: var(--orange); color: var(--ink);
  box-shadow: 0 2px 8px rgba(251, 139, 36, 0.20);
}
.btn--primary:hover {
  background: #ffa03a; color: var(--ink);
  box-shadow: 0 6px 18px rgba(251, 139, 36, 0.28);
}

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

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

.btn--block { width: 100%; }

.btn__arrow { transition: transform 0.18s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn-row {
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
  margin-top: var(--space-m);
}

/* --------------------------------------------------------------------------
   5. Header & navigation
   -------------------------------------------------------------------------- */
/* Sponsorship banner. Centred, quiet, and the full width of the page —
   it's a credential, not navigation. */
.topbar {
  background: var(--navy); color: var(--white);
  font-size: 0.95rem;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem; min-height: 52px;
  padding-block: 0.5rem;
  text-align: center;
}
.topbar p { margin: 0; }
.topbar a { color: var(--white); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
/* Sponsor lockup: the mark sits on a white chip so the navy helmet reads
   against the navy banner, with a small partner label beside it. */
.topbar__partner {
  display: inline-flex; align-items: center; gap: 0.6rem;
  flex: none;
}
.topbar__titans {
  width: 44px; height: 44px; flex: none;
  background: var(--white);
  border-radius: 8px;
  padding: 3px;
  box-sizing: border-box;
}
.topbar__partner-label {
  font-size: 0.68rem; line-height: 1.15; text-align: left;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.82); font-weight: 600;
}
@media (max-width: 640px) {
  .topbar__inner { flex-direction: column; gap: 0.5rem; min-height: 0; padding-block: 0.6rem; }
  .topbar__partner-label { display: none; }
  .topbar__titans { width: 36px; height: 36px; }
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
}
/* Generous vertical padding — the header is the first impression and
   crowding it undercuts everything below. */
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-l); min-height: 96px;
  padding-block: var(--space-s);
  /* The header breathes wider than the 1200px body so the nav isn't
     squeezed against the logo and CTA when there's screen room to spare. */
  max-width: 1440px;
}
@media (min-width: 1240px) {
  .site-header__inner { min-height: 108px; padding-block: var(--space-s); }
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: 168px; height: auto; }
@media (min-width: 1240px) { .brand img { width: 190px; } }
@media (min-width: 1300px) { .brand img { width: 210px; } }
@media (min-width: 1440px) { .brand img { width: 230px; } }

.nav { display: none; }
@media (min-width: 1240px) {
  .nav { display: flex; align-items: center; gap: 0.6rem; }
}
@media (min-width: 1200px) { .nav { gap: 0.9rem; } }
@media (min-width: 1440px) { .nav { gap: 1.2rem; } }
@media (min-width: 1300px) { .nav a { font-size: 1rem; } }
.nav a {
  font-size: 0.92rem; font-weight: 500; color: var(--navy);
  letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; padding: 0.55rem 0.95rem; position: relative;
  white-space: nowrap; border-radius: 8px;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.nav a:hover { background: var(--mist); color: var(--teal-deep); }
/* Underline grows from the left — a small, cheap piece of feedback. */
.nav a::after {
  content: ''; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.15rem;
  height: 2px; background: var(--teal-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: var(--space-xs); }
/* The header CTA is the phone number: squared off, so it reads as a
   distinct call-to-action rather than another pill in a row of pills. */
.header-actions .btn--call {
  min-height: 52px; padding: 0.8rem 1.3rem;
  font-size: 0.95rem; font-weight: 700;
  border-radius: 6px;
  background: var(--orange); color: var(--ink);
  box-shadow: none;
  white-space: nowrap;
}
.header-actions .btn--call:hover { background: #ffa03a; box-shadow: 0 4px 14px rgba(251,139,36,0.28); }
@media (min-width: 1300px) {
  .header-actions .btn--call { min-height: 58px; padding: 0.9rem 1.75rem; font-size: 1.05rem; }
}
.header-actions .btn--call { display: none; }
@media (min-width: 860px) { .header-actions .btn--call { display: inline-flex; } }

/* Mobile menu toggle — a plain <button> driving a details-free disclosure. */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--navy-012);
  border-radius: 10px; cursor: pointer; color: var(--navy);
}
@media (min-width: 1240px) { .nav-toggle { display: none; } }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--white);
  padding: var(--space-s) 0 var(--space-m);
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav a {
  display: block; padding: 0.85rem 0;
  font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--navy-060);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy);
  color: rgba(255,255,255,0.88);
  padding-block: var(--space-xl) var(--space-l);
}

/* Photograph layer. Sits behind everything; the gradient above it keeps the
   left-hand text readable regardless of what's in the image. The subject in
   this shot sits on the right, so we anchor the focal point right and let the
   darkened left carry the copy. */
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  background: var(--navy);
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 30%;
  opacity: 0;                       /* fades in once decoded, avoids flash */
  transition: opacity 0.6s var(--ease);
}
.hero__media img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__media img { transition: none; }
}

/* Two-part overlay:
   1. a horizontal navy gradient, strong on the left where the text lives,
      clearing to reveal the subject on the right;
   2. a vertical wash so the eyebrow (top) and the fade into the cards
      (bottom) both stay legible. */
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  /* Warm teal-charcoal wash: strong enough on the left to hold white text,
     clearing to the right so the daylight, greenery and warmth of the photo
     come through. Warmer than navy on purpose — this is a recovery brand. */
  background:
    linear-gradient(95deg,
      rgba(20,40,50,0.82) 0%,
      rgba(25,55,60,0.55) 40%,
      rgba(30,70,72,0.18) 70%,
      rgba(40,90,88,0) 100%),
    linear-gradient(180deg,
      rgba(18,38,48,0.25) 0%,
      rgba(18,38,48,0) 30%,
      rgba(18,38,48,0) 70%,
      rgba(18,38,48,0.40) 100%);
}
/* On narrow screens the subject can't share the frame with the text, so we
   lean almost fully to the overlay and just let the photo add warmth. */
@media (max-width: 760px) {
  .hero__media img { object-position: 68% 28%; }
  .hero__media::after {
    background:
      linear-gradient(180deg,
        rgba(18,38,48,0.66) 0%,
        rgba(20,45,52,0.52) 45%,
        rgba(18,38,48,0.70) 100%);
  }
}

/* Lift the content above the media layer. */
.hero__inner { position: relative; z-index: 2; }
@media (min-width: 1000px) {
  .hero { padding-bottom: var(--space-2xl); }
}
/* Signature: the logo's smile arc, blown up and used as the hero's ground
   line. It's the one piece of brand ornament on the page and it carries a
   real idea — the outcome the firm is selling. */
.hero::after {
  content: '';
  z-index: 1;
  position: absolute; left: 50%; bottom: -72%;
  width: min(1700px, 190%); aspect-ratio: 2.1 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border-top: 2px solid var(--teal);
  opacity: 0.38;
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero h1 { color: var(--white); max-width: 16ch; }
.hero h1 em {
  font-style: normal; color: var(--teal);
}
.hero__lede {
  font-size: var(--step-1); max-width: 54ch;
  color: rgba(255,255,255,0.82); margin-top: var(--space-m);
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.95rem 0.4rem 0.5rem;
  background: rgba(129, 204, 184, 0.14);
  border: 1px solid rgba(129, 204, 184, 0.35);
  border-radius: 999px;
  font-size: var(--step--1); font-weight: 500;
  color: var(--teal); margin-bottom: var(--space-m);
}
.hero__eyebrow span[aria-hidden] {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); flex: none; margin-left: 0.35rem;
}

/* Hero facts — plain, extractable statements. Good for AI answer engines,
   and honestly better for humans than a decorative stat block. */
.hero__facts {
  display: grid; gap: var(--space-s);
  grid-template-columns: 1fr;
  margin-top: var(--space-l); padding-top: var(--space-m);
  border-top: 1px solid rgba(255,255,255,0.16);
  list-style: none; padding-left: 0;
}
@media (min-width: 640px) { .hero__facts { grid-template-columns: repeat(3, 1fr); } }
.hero__facts li {
  margin: 0;
  display: flex; align-items: flex-start; gap: 0.7rem;
}
.hero__fact-icon {
  flex: none; width: 30px; height: 30px; margin-top: 0.15rem;
  color: var(--teal);
}
.hero__fact-icon svg { width: 100%; height: 100%; }
/* The rating star reads instantly in gold — the one warm accent, and it maps
   to how people picture a review score. */
.hero__fact-icon--star { color: #ffc247; }
.hero__fact-text { min-width: 0; }
.hero__facts dt, .hero__facts b {
  display: block; font-weight: 700; font-size: var(--step-2);
  color: var(--white); letter-spacing: -0.02em; line-height: 1.1;
}
.hero__facts small {
  display: block; font-size: var(--step--1);
  color: rgba(255,255,255,0.66); margin-top: 0.2rem;
}

/* Page hero for interior pages — same family, less height. */
.page-hero { padding-block: var(--space-xl); }
.page-hero h1 {
  max-width: 18ch; font-size: var(--step-5);
  letter-spacing: -0.01em;
}
.page-hero .hero__lede { font-size: var(--step-1); }

.breadcrumb {
  font-size: var(--step--1); margin-bottom: var(--space-m);
  color: rgba(255,255,255,0.6);
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb li + li::before { content: '/'; color: rgba(255,255,255,0.35); }
.breadcrumb a { color: rgba(255,255,255,0.78); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--teal); }

/* --------------------------------------------------------------------------
   7. Trust strip
   -------------------------------------------------------------------------- */
.trust {
  background: var(--white); color: var(--navy);
  border-bottom: 1px solid var(--rule);
}
.trust ul {
  display: grid; grid-template-columns: 1fr; gap: var(--space-2xs);
  list-style: none; margin: 0; padding: var(--space-m) 0;
  text-align: center;
}
@media (min-width: 760px) {
  .trust ul { grid-template-columns: repeat(4, 1fr); }
  .trust li + li { border-left: 1px solid var(--rule); }
}
.trust li {
  margin: 0; padding: 0.35rem var(--space-s);
  font-weight: 500; font-size: 0.92rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   8. Claim-type cards (the primary triage device)
   -------------------------------------------------------------------------- */
.claims {
  display: grid; gap: var(--space-s);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .claims { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .claims { grid-template-columns: repeat(4, 1fr); } }

/* Pulled up over the hero so the four routes are visible without scrolling
   on desktop — the single most important decision a visitor makes. */
.claims--overlap { position: relative; z-index: 2; margin-top: 0; }
@media (min-width: 1000px) {
  .claims--overlap { margin-top: calc(var(--space-2xl) * -1); }
}
/* The section holding the overlapped cards needs no top padding of its own —
   the negative margin already positions them. */
.section--claims-overlap { padding-top: var(--space-l); padding-bottom: var(--space-l); }
@media (min-width: 1000px) {
  .section--claims-overlap { padding-top: 0; padding-bottom: var(--space-xl); }
}

.claim-card {
  display: flex; flex-direction: column;
  padding: var(--space-m);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 40, 85, 0.04);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.claim-card:hover {
  transform: translateY(-2px);
  border-color: var(--teal-line);
  box-shadow: 0 8px 24px rgba(0, 40, 85, 0.07);
}
/* Unboxed to match the icon system. */
.claim-card__icon {
  width: 34px; height: 34px; margin-bottom: var(--space-s);
  display: grid; place-items: center;
  color: var(--teal-deep); flex: none;
}
.claim-card__icon svg { width: 30px; height: 30px; stroke-width: 1.35; }
.claim-card h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.claim-card p { font-size: 0.95rem; color: var(--grey-body); flex: 1; }
.claim-card__link {
  margin-top: var(--space-s); font-weight: 600; font-size: 0.95rem;
  color: var(--teal-deep); display: inline-flex; align-items: center; gap: 0.4rem;
}
.claim-card:hover .claim-card__link .btn__arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   9. Split content blocks
   -------------------------------------------------------------------------- */
.split {
  display: grid; gap: var(--space-l);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
  .split--sticky { align-items: start; }
  .split--sticky > :first-child { position: sticky; top: 110px; }
  .split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
}

/* --------------------------------------------------------------------------
   10. Lead form
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-m);
  box-shadow: 0 18px 48px rgba(0, 27, 58, 0.28);
}
@media (min-width: 560px) { .form-card { padding: var(--space-l); } }
.form-card h3 { font-size: var(--step-2); margin-bottom: 0.35rem; }
.form-card__note { font-size: var(--step--1); color: var(--grey-body); margin-bottom: var(--space-m); }

.field { margin-bottom: var(--space-s); }
.field label {
  display: block; font-size: 0.9rem; font-weight: 600;
  color: var(--navy); margin-bottom: 0.35rem;
}
.field .req { color: var(--orange-deep); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8rem 0.9rem;
  font: inherit; font-size: 1rem;   /* 16px min — stops iOS zoom on focus */
  color: var(--ink); background: var(--bone);
  border: 1.5px solid var(--navy-012); border-radius: 10px;
  transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  background: var(--white); border-color: var(--teal-deep);
}
.field-hint { font-size: 0.8rem; color: var(--grey-body); margin-top: 0.3rem; }

.form-row { display: grid; gap: var(--space-s); grid-template-columns: 1fr; }
@media (min-width: 480px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form-privacy {
  font-size: 0.8rem; color: var(--grey-body);
  margin-top: var(--space-s); text-align: center;
}

/* Reassurance list beside the form. */
.form-reasons { list-style: none; padding: 0; margin: var(--space-m) 0 0; }
.form-reasons li {
  display: flex; gap: 0.7rem; align-items: flex-start;
  margin-bottom: 0.75rem; font-size: 1rem;
}
.form-reasons svg { flex: none; margin-top: 0.25rem; color: var(--teal); }

/* --------------------------------------------------------------------------
   11. Process rail
   -------------------------------------------------------------------------- */
/* Numbered because this genuinely is a sequence — the order is the message
   (treatment and legal work start together, not one after the other). */

@media (min-width: 700px)  {  }
@media (min-width: 1080px) {  }








/* --------------------------------------------------------------------------
   12. Feature list / checklist
   -------------------------------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
@media (min-width: 700px) { .checklist--2col { grid-template-columns: 1fr 1fr; column-gap: var(--space-m); } }
.checklist li {
  display: flex; gap: 0.7rem; align-items: flex-start; margin: 0;
}
.checklist svg { flex: none; margin-top: 0.3rem; color: var(--teal-deep); }
.section--navy .checklist svg { color: var(--teal); }

/* --------------------------------------------------------------------------
   13. Testimonials
   -------------------------------------------------------------------------- */
.quotes { display: grid; gap: var(--space-s); grid-template-columns: 1fr; }
@media (min-width: 800px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  padding: var(--space-m);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
}
.quote blockquote {
  margin: 0 0 var(--space-s); font-size: 1.02rem;
  color: var(--ink); flex: 1;
}
.quote figcaption { font-size: 0.9rem; color: var(--grey-body); }
.quote figcaption b { display: block; color: var(--navy); font-weight: 600; }
.stars { color: var(--orange); letter-spacing: 0.08em; margin-bottom: var(--space-xs); }

.rating-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1.1rem; border-radius: 999px;
  background: var(--teal-soft); color: var(--navy);
  font-weight: 600; font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   14. FAQ (details/summary — no JS, keyboard-native)
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-s); padding: var(--space-m) 0;
  font-size: var(--step-1); font-weight: 600; color: var(--navy);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 14px; height: 14px; margin-top: 0.45rem;
  border-right: 2.5px solid var(--teal-deep);
  border-bottom: 2.5px solid var(--teal-deep);
  transform: rotate(45deg);
  transition: transform 0.22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--teal-deep); }
.faq__answer { padding-bottom: var(--space-m); max-width: var(--wrap-text); }
/* First sentence of each answer is the answer. Emphasised for scanners and
   for extraction by answer engines. */
.faq__answer > p:first-child { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   15. Callout / note boxes
   -------------------------------------------------------------------------- */
.callout {
  padding: var(--space-m);
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  border-radius: var(--radius);
}
.callout--warn {
  background: #fffaf4; border-color: #f3ddc2;
}
.callout h3 { font-size: var(--step-1); }

/* Key-facts table — deliberately plain so the values are easy to read
   and easy for a machine to lift. */
.facts { width: 100%; border-collapse: collapse; margin-block: var(--space-m); }
.facts caption { text-align: left; font-weight: 600; color: var(--navy); padding-bottom: var(--space-xs); }
.facts th, .facts td { text-align: left; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.facts th { width: 40%; color: var(--navy); font-weight: 600; }

/* --------------------------------------------------------------------------
   16. Offices
   -------------------------------------------------------------------------- */
.offices { display: grid; gap: var(--space-s); grid-template-columns: 1fr; }
@media (min-width: 760px) { .offices { grid-template-columns: repeat(3, 1fr); } }
.office {
  padding: var(--space-m);
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--white);
}
.office h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.office address { font-style: normal; font-size: 0.95rem; }
.office__tag {
  display: inline-block; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-deep); margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-900); color: rgba(255,255,255,0.7);
  padding-block: var(--space-xl) var(--space-m);
  font-size: 0.95rem;
}
.site-footer a { color: rgba(255,255,255,0.82); text-decoration: none; }
.site-footer a:hover { color: var(--teal); text-decoration: underline; }
.site-footer h2, .site-footer h3 {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); margin-bottom: var(--space-s);
}
.footer-grid {
  display: grid; gap: var(--space-l); grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 0.55rem; }
.site-footer .brand img { width: 190px; margin-bottom: var(--space-s); }
.footer-bottom {
  margin-top: var(--space-xl); padding-top: var(--space-m);
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.82rem; color: rgba(255,255,255,0.55);
}
.footer-bottom p { margin-bottom: 0.5rem; }

/* --------------------------------------------------------------------------
   18. Sticky mobile action bar
   -------------------------------------------------------------------------- */
/* On mobile the phone call is the highest-intent action and it should never
   be more than a thumb away. Hidden on desktop where the header CTA is
   always visible. */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  padding: 0.6rem var(--space-s) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -4px 20px rgba(0, 40, 85, 0.08);
}
.action-bar .btn { min-height: 48px; padding: 0.6rem 1rem; font-size: 0.95rem; }
@media (min-width: 1240px) { .action-bar { display: none; } }
@media (max-width: 1239px) { body { padding-bottom: 84px; } }

/* --------------------------------------------------------------------------
   19. Scroll reveal + motion preferences
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* No-JS fallback: never hide content behind a reveal that can't fire. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .action-bar, .topbar, .btn { display: none !important; }
  body { color: #000; background: #fff; }
  .hero, .section--navy { background: #fff !important; color: #000 !important; }
  .hero h1, .section--navy h2, .section--navy h3 { color: #000 !important; }
}

/* ==========================================================================
   21. Icon system
   Added to break up the long prose sections on practice-area pages. Every
   icon here labels a real piece of content (a claim stage, a failure point,
   a benefit) rather than decorating a paragraph.
   ========================================================================== */

/* --- Icon primitive ------------------------------------------------------ */
/* Icons are line drawings, not badges. No filled tile: the stroke sits
   directly on the page ground, which is what keeps a page with 25 icons on
   it feeling calm rather than busy. */
.icon {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px;
  color: var(--teal-deep);
}
.icon svg { width: 30px; height: 30px; stroke-width: 1.35; }
.icon--lg { width: 42px; height: 42px; }
.icon--lg svg { width: 38px; height: 38px; }
.icon--warn { color: var(--orange-deep); }
.section--navy .icon { color: var(--teal); }
/* The one place a container earns its keep: a hairline ring, no fill. */
.icon--ring {
  width: 46px; height: 46px;
  border: 1px solid var(--teal-line);
  border-radius: 50%;
}
.icon--ring svg { width: 22px; height: 22px; }
.section--navy .icon--ring { border-color: rgba(129,204,184,0.32); }

/* --- Promise cards (the three-point block under each page hero) ---------- */
.promise { display: grid; gap: var(--space-s); grid-template-columns: 1fr; }
@media (min-width: 760px) { .promise { grid-template-columns: repeat(3, 1fr); } }
/* Open columns divided by a hairline, rather than three boxed cards. */
.promise { gap: var(--space-m); }
.promise article { padding: 0; }
@media (min-width: 760px) {
  .promise article { padding-left: var(--space-m); border-left: 1px solid var(--rule); }
  .promise article:first-child { padding-left: 0; border-left: 0; }
}
.promise .icon { margin-bottom: var(--space-s); }
.promise h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.promise p { font-size: 0.95rem; margin: 0; }

/* --- Failure chain ------------------------------------------------------- */
/* The source copy describes the broken traditional process as an arrow
   sequence. Rendering it as actual steps makes the argument legible at a
   glance instead of burying it in a paragraph. */
.chain {
  list-style: none; margin: var(--space-m) 0 0; padding: 0;
  display: grid; gap: 0.5rem;
  grid-template-columns: 1fr;
  counter-reset: link;
}
@media (min-width: 700px)  { .chain { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .chain { grid-template-columns: repeat(4, 1fr); } }
.chain li {
  position: relative; margin: 0;
  padding: var(--space-s) 0 0;
  border-top: 2px solid var(--teal-line);
  font-size: 0.92rem; line-height: 1.55;
  color: var(--grey-body);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.chain li .icon { width: 30px; height: 30px; color: var(--grey-body); opacity: 0.75; }
.chain li .icon svg { width: 26px; height: 26px; }
.chain b { color: var(--navy); font-weight: 600; display: block; margin-bottom: 0.1rem; }
/* The last stage is where it ends up — the only one that takes any colour. */
.chain li:last-child { border-top-color: var(--orange); }
.chain li:last-child .icon { color: var(--orange-deep); opacity: 1; }

/* --- Icon feature rows --------------------------------------------------- */
/* Used for the two-point "what early treatment does" blocks. */
.features { display: grid; gap: var(--space-m); grid-template-columns: 1fr; margin-block: var(--space-m); }
@media (min-width: 800px) { .features--2 { grid-template-columns: repeat(2, 1fr); } }
.feature {
  display: flex; gap: var(--space-s); align-items: flex-start;
  padding: var(--space-m) 0 0;
  border-top: 1px solid var(--rule);
}
.section--navy .feature { border-top-color: rgba(255,255,255,0.16); }
.feature h3 { font-size: var(--step-1); margin-bottom: 0.3rem; }
.feature p { font-size: 0.95rem; margin: 0; }
.feature > div { min-width: 0; }

/* --- Scenario grid ------------------------------------------------------- */
/* Replaces the long "common scenarios" checklists. Each scenario gets an
   icon so people can find their own situation by scanning, not reading. */
.scenarios { display: grid; gap: 0.6rem; grid-template-columns: 1fr; list-style: none; margin: var(--space-m) 0 0; padding: 0; }
@media (min-width: 600px)  { .scenarios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .scenarios--3 { grid-template-columns: repeat(3, 1fr); } }
.scenarios { gap: 0; }
.scenarios li {
  display: flex; gap: 0.85rem; align-items: center;
  margin: 0; padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem; line-height: 1.55;
  transition: color 0.18s var(--ease);
}
@media (min-width: 600px) { .scenarios { column-gap: var(--space-l); } }
.scenarios li:hover { color: var(--navy); }
.scenarios li .icon { width: 28px; height: 28px; opacity: 0.8; }
.scenarios li .icon svg { width: 24px; height: 24px; }

/* --- Injury groups ------------------------------------------------------- */
/* Physical vs psychological, each with a heading icon. */
.injury-group { padding: 0; }
.injury-group__head {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: var(--space-s);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--rule);
}
.injury-group__head h3 { margin: 0; font-size: var(--step-1); }
.injury-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.injury-group li { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0; font-size: 0.95rem; }
.injury-group li svg { flex: none; margin-top: 0.35rem; color: var(--teal-deep); }
.injury-grid { display: grid; gap: var(--space-s); grid-template-columns: 1fr; }
@media (min-width: 860px) { .injury-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

/* --- Process rail icons -------------------------------------------------- */
/* The rail already numbers its steps; the icon sits alongside the number. */




/* --- Pull statement ------------------------------------------------------ */
/* For the single-sentence claims that currently sit as lone bold paragraphs
   inside long prose runs. Gives the eye a landing point. */
.pull {
  display: flex; gap: var(--space-m); align-items: flex-start;
  margin-block: var(--space-l);
  padding-left: var(--space-m);
  border-left: 2px solid var(--teal);
}
.pull p {
  margin: 0; font-size: var(--step-1); line-height: 1.5;
  font-weight: 400; color: var(--navy);
}
.section--navy .pull { border-left-color: var(--teal); }
.section--navy .pull p { color: var(--white); }
.pull .icon { display: none; }  /* the rule is enough; the icon was noise */


/* ==========================================================================
   22. Feature blocks — graphics that break the reading measure
   Prose is capped at 72ch for legibility. Diagrams are not prose: cramming
   a 4-stage sequence into a 740px column gives each stage 179px, which is
   why they read as crowded. These escape the measure and take the room they
   need.
   ========================================================================== */

/* Escapes the .prose reading measure.
   .prose is capped at 72ch; a diagram inside it inherits that cap. Using
   100cqw against the wrap as container lets the graphic span the full grid
   column while the surrounding text stays at a readable measure. */
.prose { container-type: inline-size; }

.bleed {
  width: 100%;
  margin-block: var(--space-xl);
}
/* Only break out once there is room to gain: below this the prose column
   already fills the grid, so a breakout would do nothing but cause overflow. */
@media (min-width: 1000px) {
  .bleed {
    /* grid width minus the prose measure, split either side */
    --escape: calc((min(var(--wrap), 100vw - var(--space-m) * 2) - var(--wrap-text)) / 2);
    width: calc(100% + var(--escape) * 2);
    margin-left: calc(var(--escape) * -1);
    margin-right: calc(var(--escape) * -1);
  }
}

/* --------------------------------------------------------------------------
   Journey — the "how it usually goes" sequence, rebuilt.
   A real horizontal track with a connecting line, not four cramped boxes.
   -------------------------------------------------------------------------- */
.journey { position: relative; }
.journey__head { margin-bottom: var(--space-l); }
.journey__head h3 { margin-bottom: 0.4rem; }
.journey__head p { color: var(--grey-body); max-width: 60ch; margin: 0; }

.journey__track {
  position: relative;
  display: grid; gap: var(--space-m);
  grid-template-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
  counter-reset: stage;
}
@media (min-width: 700px)  { .journey__track { grid-template-columns: repeat(2, 1fr); gap: var(--space-l); } }
@media (min-width: 1080px) { .journey__track { grid-template-columns: repeat(4, 1fr); gap: var(--space-l); } }

/* The connecting line runs behind the markers, tying the stages together. */
@media (min-width: 1080px) {
  .journey__track::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 27px;
    height: 1px; background: var(--teal-line);
  }
}

.journey__stage { position: relative; margin: 0; padding: 0; counter-increment: stage; }

.journey__marker {
  position: relative; z-index: 1;
  width: 54px; height: 54px; margin-bottom: var(--space-m);
  display: grid; place-items: center;
  background: var(--white);
  border: 1px solid var(--teal-line);
  border-radius: 50%;
  color: var(--teal-deep);
}
.section--bone .journey__marker { background: var(--mist); }
.journey__marker svg { width: 24px; height: 24px; stroke-width: 1.4; }
/* Step number as a small badge on the marker, so the sequence is obvious and
   the number is tied to its icon rather than floating by the heading. */
.journey__marker::after {
  content: counter(stage);
  position: absolute; right: -4px; bottom: -4px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--teal); color: var(--navy);
  border: 2px solid var(--mist);
  border-radius: 50%;
  font-size: 0.72rem; font-weight: 700; line-height: 1;
}
.journey__stage--end .journey__marker::after {
  background: var(--orange); color: var(--ink);
}

.journey__stage h4 {
  font-size: var(--step-1); margin-bottom: 0.4rem;
}
.journey__stage p { font-size: 0.95rem; margin: 0; line-height: 1.6; }

/* The outcome stage carries the only colour in the sequence. */
.journey__stage--end .journey__marker { border-color: var(--orange); color: var(--orange-deep); }


/* --------------------------------------------------------------------------
   Scenario board — "common scenarios", rebuilt.
   Was 2 columns at 186px inside a tinted callout. Now a full-width board of
   generous cards people can genuinely scan.
   -------------------------------------------------------------------------- */
.board__head { margin-bottom: var(--space-l); }
.board__head h3 { margin-bottom: 0.4rem; }
.board__head p { color: var(--grey-body); max-width: 62ch; margin: 0; }

.board {
  display: grid; gap: 1px;
  grid-template-columns: 1fr;
  background: var(--rule);              /* becomes the hairline grid */
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 620px)  { .board { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .board { grid-template-columns: repeat(3, 1fr); } }

.board li {
  display: flex; gap: var(--space-s); align-items: flex-start;
  margin: 0; padding: var(--space-m);
  background: var(--white);
  font-size: 0.97rem; line-height: 1.55;
  color: var(--grey-body);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.board li:hover { background: var(--teal-soft); color: var(--navy); }
.board li svg {
  flex: none; width: 26px; height: 26px; stroke-width: 1.35;
  color: var(--teal-deep); margin-top: 0.1rem;
}

/* --------------------------------------------------------------------------
   Split panels — physical vs psychological injuries, side by side with room.
   -------------------------------------------------------------------------- */
.panels { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
@media (min-width: 860px) { .panels { grid-template-columns: 1fr 1fr; } }

.panel__head {
  display: flex; align-items: center; gap: 0.85rem;
  padding-bottom: var(--space-s); margin-bottom: var(--space-m);
  border-bottom: 2px solid var(--teal-line);
}
.panel__head h3 { margin: 0; font-size: var(--step-1); }
.panel__head svg { width: 30px; height: 30px; stroke-width: 1.35; color: var(--teal-deep); flex: none; }
.panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.panel li {
  display: flex; gap: 0.7rem; align-items: flex-start; margin: 0;
  font-size: 0.97rem; line-height: 1.55;
}
.panel li svg { flex: none; width: 17px; height: 17px; margin-top: 0.35rem; color: var(--teal); }

/* ==========================================================================
   23. Interactive: claim path finder
   A short, honest triage widget. It doesn't assess a claim — it tells
   someone which pathway applies, what the deadline is, and what to do next.
   That's genuinely useful, and it's the highest-intent moment on the page.
   ========================================================================== */
.finder {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}
.finder__head {
  padding: var(--space-m) var(--space-l);
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: var(--space-s);
  flex-wrap: wrap;
}
.finder__head h3 { margin: 0; font-size: var(--step-1); }
.finder__head p { margin: 0; font-size: 0.9rem; color: var(--grey-body); flex: 1 1 100%; }

.finder__progress {
  display: flex; gap: 0.35rem; margin-left: auto;
  flex: none;
}
.finder__dot {
  width: 26px; height: 4px; border-radius: 2px;
  background: var(--rule); transition: background-color 0.3s var(--ease);
}
.finder__dot[data-on="true"] { background: var(--teal); }

.finder__body { padding: var(--space-l); }
@media (min-width: 900px) { .finder__body { padding: var(--space-xl) var(--space-l); } }
.finder__q {
  font-size: var(--step-2); color: var(--navy);
  margin: 0 0 var(--space-m); font-weight: 600; line-height: 1.3;
}

.finder__options {
  display: grid; gap: 0.6rem; grid-template-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 620px) { .finder__options { grid-template-columns: repeat(2, 1fr); } }

.finder__opt {
  display: flex; align-items: center; gap: 0.85rem;
  width: 100%; min-height: 64px;
  padding: var(--space-s) var(--space-m);
  font: inherit; font-size: 1rem; text-align: left;
  color: var(--navy); background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease),
              transform 0.18s var(--ease);
}
.finder__opt:hover {
  border-color: var(--teal); background: var(--teal-soft);
  transform: translateY(-1px);
}
.finder__opt svg {
  width: 26px; height: 26px; stroke-width: 1.4;
  color: var(--teal-deep); flex: none;
}

/* --- Result --- */
.finder__result { display: grid; gap: var(--space-m); }
.finder__verdict {
  display: flex; gap: var(--space-m); align-items: flex-start;
  padding: var(--space-l);
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  border-radius: var(--radius);
}
.finder__verdict svg { width: 34px; height: 34px; stroke-width: 1.4; color: var(--teal-deep); flex: none; }
.finder__verdict h4 { margin: 0 0 0.45rem; font-size: var(--step-1); }
.finder__verdict p { margin: 0; font-size: 1rem; line-height: 1.6; }

/* Facts read as four separate answers, so they need real separation.
   Row gap is deliberately much larger than the label-to-value gap: that
   difference is what makes each pair read as one unit rather than eight
   loose lines. */
/* Facts as a tidy 2x2 of bordered cells. Wider columns than the old 4-across
   layout mean answers wrap to 1-2 lines instead of 4-5, and each cell's
   border contains any ragged edge so the block reads as clean and balanced. */
.finder__facts {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: 1fr;
  margin-block: var(--space-s);
}
@media (min-width: 640px) {
  .finder__facts { grid-template-columns: repeat(2, 1fr); }
}
.finder__fact {
  padding: var(--space-m);
  background: var(--mist);
  border: 1px solid var(--teal-line);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
}
.finder__fact dt {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--teal-deep);
  margin-bottom: 0.4rem;
}
.finder__fact dd {
  margin: 0; font-size: 1rem; line-height: 1.5;
  color: var(--navy); font-weight: 500;
  text-wrap: pretty;
}
/* The deadline is the one that matters most — give it an orange accent so it
   draws the eye first. */
.finder__fact--urgent {
  border-color: var(--orange);
  background: #fff6ee;
}
.finder__fact--urgent dt { color: var(--orange-text); }

.finder__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-s);
  align-items: center;
  margin-top: 0;
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}
/* "Start again" is a tertiary action — it shouldn't sit shoulder to shoulder
   with the two real CTAs. */
.finder__restart { margin-left: auto; }
@media (max-width: 640px) {
  .finder__actions .btn { width: 100%; }
  .finder__restart { margin-left: 0; margin-inline: auto; }
}
.finder__restart {
  background: none; border: 0; padding: 0.5rem 0;
  font: inherit; font-size: 0.92rem; color: var(--grey-body);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.finder__restart:hover { color: var(--navy); }

.finder__note {
  font-size: 0.85rem; color: var(--grey-body);
  padding: var(--space-s) var(--space-l) var(--space-m);
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* Steps animate in gently; respects reduced motion via the global rule. */
.finder__step[hidden] { display: none; }
.finder__step { animation: finderIn 0.35s var(--ease); }
@keyframes finderIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .finder__step { animation: none; } }

/* ==========================================================================
   24. Claim checker
   A guided multi-step assessment on each practice page. Structured so the
   person receives something real (eligibility signal + their deadline)
   before being asked for contact details — capture sits at the point of
   peak value, not at the door.
   ========================================================================== */
.checker {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 40, 85, 0.04);
}

/* --- Header + progress --- */
.checker__head {
  padding: var(--space-m) var(--space-l);
  border-bottom: 1px solid var(--rule);
}
.checker__title {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: var(--space-s);
}
.checker__title h3 { margin: 0; font-size: var(--step-1); }
.checker__title svg { width: 26px; height: 26px; stroke-width: 1.4; color: var(--teal-deep); flex: none; }
.checker__stepcount {
  margin-left: auto; font-size: 0.82rem; font-weight: 600;
  color: var(--grey-body); letter-spacing: 0.04em; white-space: nowrap;
}

.checker__bar {
  height: 4px; border-radius: 2px;
  background: var(--rule); overflow: hidden;
}
.checker__fill {
  display: block; height: 100%; width: 0;
  background: var(--teal);
  border-radius: 2px;
  transition: width 0.45s var(--ease);
}

/* --- Body --- */
.checker__body { padding: var(--space-l) var(--space-l) var(--space-m); }
@media (max-width: 560px) {
  .checker__body { padding: var(--space-m) var(--space-m) var(--space-s); }
  .checker__head { padding: var(--space-m); }
}

.checker__q {
  font-size: var(--step-2); font-weight: 600; color: var(--navy);
  line-height: 1.3; margin: 0 0 0.4rem;
}
.checker__hint {
  font-size: 0.92rem; color: var(--grey-body);
  margin: 0 0 var(--space-m); max-width: 56ch;
}

.checker__options {
  display: grid; gap: 0.6rem; grid-template-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 640px) { .checker__options--2 { grid-template-columns: repeat(2, 1fr); } }

.checker__opt {
  display: flex; align-items: center; gap: 0.85rem;
  width: 100%; min-height: 62px;
  padding: var(--space-s) var(--space-m);
  font: inherit; font-size: 1rem; text-align: left;
  color: var(--navy); background: var(--white);
  border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease),
              transform 0.16s var(--ease);
}
.checker__opt:hover {
  border-color: var(--teal); background: var(--teal-soft);
  transform: translateY(-1px);
}
.checker__opt[aria-pressed="true"] {
  border-color: var(--teal-deep); background: var(--teal-soft);
}
.checker__opt svg {
  width: 24px; height: 24px; stroke-width: 1.4;
  color: var(--teal-deep); flex: none;
}
.checker__opt span { flex: 1; }

/* --- Navigation --- */
.checker__nav {
  display: flex; align-items: center; gap: var(--space-s);
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
}
.checker__back {
  background: none; border: 0; padding: 0.6rem 0;
  font: inherit; font-size: 0.92rem; color: var(--grey-body);
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem;
}
.checker__back:hover { color: var(--navy); }
.checker__back svg { width: 15px; height: 15px; }

/* --- Interim result: shown BEFORE contact capture --- */
.checker__signal {
  display: flex; gap: var(--space-m); align-items: flex-start;
  padding: var(--space-l);
  border-radius: var(--radius);
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  margin-bottom: var(--space-l);
}
.checker__signal svg { width: 34px; height: 34px; stroke-width: 1.4; color: var(--teal-deep); flex: none; }
.checker__signal h4 { margin: 0 0 0.45rem; font-size: var(--step-1); }
.checker__signal p { margin: 0; font-size: 1rem; line-height: 1.6; }
.checker__signal--watch { background: #fffaf4; border-color: #f3ddc2; }
.checker__signal--watch svg { color: var(--orange-deep); }

/* The deadline is the single most useful fact we can give someone. */
.checker__deadline {
  display: flex; gap: var(--space-m); align-items: flex-start;
  padding: var(--space-l);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  margin-bottom: var(--space-l);
}
.checker__deadline svg { width: 30px; height: 30px; stroke-width: 1.4; color: var(--orange-deep); flex: none; }
.checker__deadline dt {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--orange-text); margin-bottom: 0.2rem;
}
.checker__deadline dd { margin: 0; font-size: 1.05rem; line-height: 1.45; color: var(--navy); font-weight: 600; }
.checker__deadline dd small { display: block; font-weight: 400; font-size: 0.92rem; line-height: 1.55; color: var(--grey-body); margin-top: 0.45rem; }

/* --- Locked panel: signals there is more to come --- */
.checker__locked {
  position: relative;
  border: 1px dashed var(--teal-line);
  border-radius: var(--radius);
  padding: var(--space-l);
  margin-bottom: var(--space-l);
  background: var(--mist);
}
.checker__locked h4 {
  font-size: 1rem; margin: 0 0 var(--space-s);
  display: flex; align-items: center; gap: 0.5rem;
}
.checker__locked h4 svg { width: 18px; height: 18px; color: var(--teal-deep); }
.checker__locked ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.checker__locked li {
  display: flex; gap: 0.7rem; align-items: flex-start;
  margin: 0; font-size: 0.96rem; line-height: 1.55; color: var(--grey-body);
}
.checker__locked li svg { width: 16px; height: 16px; margin-top: 0.28rem; color: var(--teal); flex: none; }

/* --- Contact capture --- */
.checker__capture {
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
}
.checker__capture h4 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.checker__capture > p { font-size: 0.94rem; color: var(--grey-body); margin-bottom: var(--space-m); }

.checker__consent {
  display: flex; gap: 0.7rem; align-items: flex-start;
  font-size: 0.87rem; color: var(--grey-body);
  margin-block: var(--space-s) var(--space-m);
  line-height: 1.5;
}
.checker__consent input {
  width: 20px; height: 20px; margin: 0.15rem 0 0; flex: none;
  accent-color: var(--teal-deep);
}

.checker__error {
  font-size: 0.85rem; color: #a4262c; margin-top: 0.3rem;
}
.field input[aria-invalid="true"] { border-color: #a4262c; background: #fff7f7; }

.checker__reassure {
  display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m);
  margin-top: var(--space-m); padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  font-size: 0.85rem; color: var(--grey-body);
}
.checker__reassure span { display: inline-flex; align-items: center; gap: 0.4rem; }
.checker__reassure svg { width: 15px; height: 15px; color: var(--teal-deep); flex: none; }

/* --- Final confirmation --- */
.checker__done { text-align: center; padding-block: var(--space-s); }
.checker__done > svg {
  width: 56px; height: 56px; stroke-width: 1.3;
  color: var(--teal-deep); margin: 0 auto var(--space-m);
}
.checker__done h4 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.checker__done > p { max-width: 52ch; margin-inline: auto; margin-bottom: var(--space-m); }

.checker__next {
  text-align: left;
  display: grid; gap: 0.75rem;
  max-width: 30rem; margin: 0 auto var(--space-l);
  list-style: none; padding: 0;
  counter-reset: nextstep;
}
.checker__next li {
  display: flex; gap: 0.85rem; align-items: flex-start; margin: 0;
  font-size: 0.95rem;
}
.checker__next li::before {
  counter-increment: nextstep; content: counter(nextstep);
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--teal-soft); color: var(--teal-deep);
  font-size: 0.75rem; font-weight: 700;
}

.checker__summary {
  margin-top: var(--space-m); padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
  font-size: 0.88rem; color: var(--grey-body);
}
.checker__summary dl { display: grid; gap: 0.4rem; margin: 0.6rem 0 0; }
.checker__summary div { display: flex; gap: 0.6rem; }
.checker__summary dt { color: var(--navy); font-weight: 600; min-width: 8rem; }
.checker__summary dd { margin: 0; }

.checker__foot {
  padding: var(--space-s) var(--space-l) var(--space-m);
  border-top: 1px solid var(--rule);
  font-size: 0.84rem; color: var(--grey-body); margin: 0;
}

/* Step transitions */
.checker__step { animation: checkerIn 0.32s var(--ease); }
@keyframes checkerIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .checker__step { animation: none; } }


/* ==========================================================================
   25. Claim strip
   Four routes sitting directly under the header, divided by hairlines.
   This is the first decision a visitor makes, so it sits above everything.
   ========================================================================== */
.claim-strip {
  background: var(--bone);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.claim-strip ul {
  display: grid; grid-template-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 640px)  { .claim-strip ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .claim-strip ul { grid-template-columns: repeat(4, 1fr); } }
.claim-strip li { margin: 0; }
@media (min-width: 640px) {
  .claim-strip li:nth-child(n+2) { border-left: 1px solid var(--rule); }
}
@media (min-width: 640px) and (max-width: 1079px) {
  .claim-strip li:nth-child(3) { border-left: 0; border-top: 1px solid var(--rule); }
  .claim-strip li:nth-child(4) { border-top: 1px solid var(--rule); }
}
@media (max-width: 639px) {
  .claim-strip li + li { border-top: 1px solid var(--rule); }
}
.claim-strip a {
  display: block;
  padding: var(--space-s) var(--space-m);
  font-size: 0.92rem; line-height: 1.35; color: var(--navy);
  text-decoration: none;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.claim-strip a:hover { background: var(--white); color: var(--teal-deep); }
@media (max-width: 639px) {
  .claim-strip a { padding: var(--space-s) var(--space-m); }
}


/* ==========================================================================
   26. Widget refinements
   ========================================================================== */

/* Headings receive focus after each step so screen readers announce the new
   content. Sighted users shouldn't see a focus box on a static heading —
   they didn't tab to it. Keyboard focus on actual controls is untouched. */
.finder__q:focus-visible,
.checker__q:focus-visible,
.finder__verdict h4:focus-visible,
.checker__signal h4:focus-visible,
.checker__done h4:focus-visible,
.finder__result h4:focus-visible {
  outline: none;
}

/* --- Header: the widget name is a label, not a heading that competes
   with the question. Demoted to an eyebrow. --- */
.finder__head,
.checker__head {
  display: flex; align-items: center; gap: var(--space-m);
  flex-wrap: wrap;
  padding: var(--space-m) var(--space-l);
}
.finder__head { border-bottom: 1px solid var(--rule); }

.widget-label {
  display: flex; align-items: center; gap: 0.55rem;
  margin: 0;
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--teal-deep);
}
.widget-label svg { width: 17px; height: 17px; stroke-width: 1.9; flex: none; }

/* Progress sits opposite the label, quietly. */
.finder__progress { margin-left: auto; }

/* --- Body: generous above, tighter below. The footnote strip closes the
   card, so a deep pad under the last option just reads as dead space. --- */
.finder__body { padding: var(--space-l) var(--space-l) var(--space-m); }
@media (min-width: 900px) {
  .finder__body { padding: var(--space-l) var(--space-l) var(--space-m); }
}

/* --- The question is the primary heading in the widget --- */
.finder__q, .checker__q {
  font-size: var(--step-2); font-weight: 600; color: var(--navy);
  line-height: 1.25; margin: 0 0 var(--space-m);
  max-width: 24ch;
}

/* --- Options: taller targets, clearer affordance --- */
.finder__options, .checker__options { gap: 0.75rem; }
.finder__opt, .checker__opt {
  min-height: 68px;
  padding: var(--space-s) var(--space-m);
  border-radius: 10px;
  gap: var(--space-s);
}
.finder__opt span, .checker__opt span { line-height: 1.4; }

/* A chevron on the right makes it read as a choice that advances, rather
   than a checkbox-style toggle. */
.finder__opt::after, .checker__opt::after {
  content: ''; flex: none; margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--teal-line);
  border-bottom: 2px solid var(--teal-line);
  transform: rotate(-45deg);
  transition: border-color 0.16s var(--ease), transform 0.16s var(--ease);
}
.finder__opt:hover::after, .checker__opt:hover::after {
  border-color: var(--teal-deep);
  transform: rotate(-45deg) translate(2px, 2px);
}

/* --- Footnote: only ever one --- */
.finder__note, .checker__foot {
  padding: var(--space-m) var(--space-l);
  border-top: 1px solid var(--rule);
  background: var(--mist);
  margin: 0;
  font-size: 0.85rem; color: var(--grey-body);
}


/* Checker header: label left, step count right, progress bar beneath. */
.checker__head { display: block; }
.checker__title {
  display: flex; align-items: center; gap: var(--space-m);
  margin-bottom: var(--space-s);
}
.checker__title .widget-label { margin: 0; }
.checker__stepcount { margin-left: auto; }

/* Result headings sit above their block without competing with the
   question that preceded them. */
.finder__verdict h4, .checker__signal h4 { line-height: 1.3; }


/* ==========================================================================
   27. Checker personalisation
   A real face on the claim check: it signals a person will call you back,
   not an automated form. Sits beside the label, small and quiet.
   ========================================================================== */
.checker__title { align-items: center; }

.checker__person {
  display: flex; align-items: center; gap: 0.7rem;
}
.checker__avatar {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--teal-line);
  flex: none;
}
.checker__person-text { display: flex; flex-direction: column; line-height: 1.2; }
.checker__person-text .widget-label { margin: 0; }
.checker__person-name {
  font-size: 0.9rem; font-weight: 600; color: var(--navy);
  margin-top: 0.1rem;
}
.checker__person-name span { font-weight: 400; color: var(--grey-body); }

@media (max-width: 560px) {
  .checker__avatar { width: 40px; height: 40px; }
}

/* ==========================================================================
   28. Practice cards
   The home page's most important section. Whole-card links, equal heights,
   an icon and three scannable facts each, with a hover state that makes the
   affordance obvious. Replaces four ragged paragraphs.
   ========================================================================== */
.practice-grid {
  display: grid; gap: var(--space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .practice-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .practice-grid { grid-template-columns: repeat(4, 1fr); } }

.practice-card {
  display: flex; flex-direction: column;
  padding: var(--space-l);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  position: relative; isolation: isolate;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease),
              box-shadow 0.2s var(--ease);
}
/* A teal wash slides up from the foot on hover — quiet, but it makes the
   whole card feel alive and clearly clickable. */
.practice-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 55%, var(--teal-soft) 100%);
  opacity: 0; transition: opacity 0.25s var(--ease);
}
.practice-card:hover, .practice-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: 0 16px 36px rgba(0, 40, 85, 0.10);
}
.practice-card:hover::before, .practice-card:focus-visible::before { opacity: 1; }

.practice-card__icon {
  width: 52px; height: 52px; margin-bottom: var(--space-m);
  display: grid; place-items: center;
  color: var(--teal-deep);
  border: 1px solid var(--teal-line);
  border-radius: 14px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.practice-card__icon svg { width: 28px; height: 28px; }
.practice-card:hover .practice-card__icon,
.practice-card:focus-visible .practice-card__icon {
  background: var(--teal); border-color: var(--teal); color: var(--navy);
}

.practice-card__title {
  font-size: var(--step-2); margin-bottom: 0.35rem; color: var(--navy);
}
.practice-card__summary {
  font-size: 0.97rem; line-height: 1.5; color: var(--grey-body);
  margin-bottom: var(--space-m);
}

/* The three facts do the work the long paragraph used to — but scannable,
   and equal length keeps every card the same height. */
.practice-card__facts {
  list-style: none; margin: 0 0 var(--space-l); padding: 0;
  display: grid; gap: 0.55rem;
  /* pushes the CTA to the foot so all four align */
  flex: 1;
}
.practice-card__facts li {
  display: flex; gap: 0.55rem; align-items: flex-start;
  margin: 0; font-size: 0.9rem; line-height: 1.4; color: var(--ink);
}
.practice-card__facts svg {
  width: 16px; height: 16px; flex: none; margin-top: 0.15rem;
  color: var(--teal-deep);
}

.practice-card__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.95rem; color: var(--teal-deep);
  margin-top: auto;
}
.practice-card__arrow {
  display: inline-flex; transition: transform 0.2s var(--ease);
}
.practice-card__arrow svg { width: 16px; height: 16px; }
.practice-card:hover .practice-card__arrow,
.practice-card:focus-visible .practice-card__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .practice-card, .practice-card__arrow, .practice-card__icon, .practice-card::before { transition: none; }
  .practice-card:hover, .practice-card:focus-visible { transform: none; }
}

/* ==========================================================================
   29. Team page
   Small-team layout: the integrated model leads, then generous member cards
   tagged by discipline so the lawyer + health-professional pairing is
   visible at a glance.
   ========================================================================== */

/* --- The two-discipline explainer --- */
.disciplines {
  display: grid; gap: var(--space-l); grid-template-columns: 1fr;
  margin-top: var(--space-l);
}
@media (min-width: 800px) { .disciplines { grid-template-columns: 1fr 1fr; } }
.discipline {
  padding: var(--space-l);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--white);
}
.discipline__head {
  display: flex; align-items: center; gap: 0.85rem;
  margin-bottom: var(--space-s);
}
.discipline__icon {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--teal-line); border-radius: 12px;
  color: var(--teal-deep);
}
.discipline__icon svg { width: 26px; height: 26px; stroke-width: 1.5; }
.discipline__head h3 { margin: 0; font-size: var(--step-2); }
.discipline p { margin: 0; color: var(--grey-body); }
/* The "+" that joins them, shown between the two panels on wide screens. */
.disciplines__plus {
  display: none;
}
@media (min-width: 800px) {
  .disciplines { position: relative; }
  .disciplines__plus {
    display: grid; place-items: center;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px; z-index: 2;
    background: var(--teal); color: var(--navy);
    border: 3px solid var(--white); border-radius: 50%;
    font-size: 1.4rem; font-weight: 700; line-height: 1;
  }
}

/* --- Team grid --- */
.team-grid {
  display: grid; gap: var(--space-l);
  grid-template-columns: 1fr;
  margin-top: var(--space-l);
}
@media (min-width: 640px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }
/* For 3, the grid naturally wraps; a max of 4 keeps rows tidy. */
@media (min-width: 1080px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-grid--four { }
@media (min-width: 1080px) { .team-grid--four { grid-template-columns: repeat(4, 1fr); } }

.member {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.member:hover {
  transform: translateY(-3px);
  border-color: var(--teal-line);
  box-shadow: 0 14px 32px rgba(0, 40, 85, 0.08);
}

.member__photo {
  position: relative;
  aspect-ratio: 4 / 5; background: var(--mist);
  overflow: hidden;
}
.member__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
/* Placeholder state when no photo is supplied yet. */
.member__photo--placeholder {
  display: grid; place-items: center;
  color: var(--teal-line);
}
.member__photo--placeholder svg { width: 64px; height: 64px; }
.member__photo--placeholder::after {
  content: 'Photo to come';
  position: absolute; bottom: var(--space-s); left: 0; right: 0;
  text-align: center; font-size: 0.8rem; color: var(--grey-body);
}

/* Discipline tag pinned to the photo. */
.member__tag {
  position: absolute; top: var(--space-s); left: var(--space-s);
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--white); color: var(--navy);
  box-shadow: 0 1px 3px rgba(0,40,85,0.12);
}
.member__tag svg { width: 14px; height: 14px; stroke-width: 2; }
.member__tag--legal  { color: var(--navy); }
.member__tag--legal svg  { color: var(--navy); }
.member__tag--health { color: var(--teal-deep); }
.member__tag--health svg { color: var(--teal-deep); }

.member__body { padding: var(--space-l); display: flex; flex-direction: column; flex: 1; }
.member__name { font-size: var(--step-2); margin-bottom: 0.15rem; }
.member__role {
  font-size: 0.92rem; font-weight: 600; color: var(--teal-deep);
  margin-bottom: var(--space-s);
}
.member__bio { font-size: 0.96rem; line-height: 1.6; color: var(--grey-body); margin: 0; }

/* --- One-team reassurance band --- */
.oneteam { text-align: center; }
.oneteam .wrap { max-width: 60ch; }
.oneteam h2 { color: var(--white); }
.oneteam p { color: rgba(255,255,255,0.82); font-size: var(--step-1); }

@media (prefers-reduced-motion: reduce) {
  .member { transition: none; }
  .member:hover { transform: none; }
}


/* ==========================================================================
   30. Process rail (rebuilt)
   A numbered, sequential journey. Each step pairs its number + icon in one
   badge, tied directly to the heading. Removes the old double-numbering
   (browser <ol> markers AND a CSS counter were both showing).
   ========================================================================== */
.rail {
  list-style: none;                /* kills the browser's 1. 2. 3. markers */
  margin: 0; padding: 0;
  display: grid; gap: var(--space-l) var(--space-xl);
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 620px)  { .rail { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rail { grid-template-columns: repeat(3, 1fr); } }

.rail li {
  position: relative; margin: 0;
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
  counter-increment: step;
}
.rail--on-navy li { border-top-color: rgba(255,255,255,0.16); }

/* Number + icon sit together in one row: the badge shows the step number,
   the icon sits beside it. This is the anchor that ties the step together. */
.rail__top {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: var(--space-s);
}
.rail__num {
  flex: none;
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--teal); color: var(--navy);
  font-size: 1.05rem; font-weight: 700; line-height: 1;
}
.rail__num::before { content: counter(step, decimal); }
.rail li .icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--teal); margin: 0;
}
.rail li .icon svg { width: 20px; height: 20px; }

.rail h3 {
  font-size: var(--step-1); margin: 0 0 0.35rem;
  color: var(--white);
}
.rail p {
  font-size: 0.96rem; line-height: 1.6; margin: 0;
  color: rgba(255,255,255,0.80);
}

/* On light-ground practice pages the rail flips colours. */
.rail:not(.rail--on-navy) h3 { color: var(--navy); }
.rail:not(.rail--on-navy) p { color: var(--grey-body); }
.rail:not(.rail--on-navy) li .icon { border-color: var(--teal-line); color: var(--teal-deep); }

/* ==========================================================================
   31. Benefits ("Why it matters")
   Three equal cards, each led by an icon in a soft tile. Consistent structure
   fixes the ragged alignment the plain-text columns had, and the icons give
   the section the same visual weight as the rest of the page.
   ========================================================================== */
.benefits {
  display: grid; gap: var(--space-l);
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 760px)  { .benefits { grid-template-columns: repeat(3, 1fr); } }

.benefit {
  display: flex; flex-direction: column;
  padding: var(--space-l);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--teal);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.benefit:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 40, 85, 0.08);
}
.benefit__icon {
  width: 52px; height: 52px; margin-bottom: var(--space-m);
  display: grid; place-items: center;
  background: var(--teal-soft);
  border-radius: 13px;
  color: var(--teal-deep);
}
.benefit__icon svg { width: 28px; height: 28px; }
.benefit__title {
  font-size: var(--step-1); margin: 0 0 0.5rem; color: var(--navy);
  /* reserve two lines so a heading that wraps doesn't shove its body copy
     out of line with the others */
  min-height: 2.6em;
  display: flex; align-items: flex-start;
}
.benefit__body {
  font-size: 0.97rem; line-height: 1.6; color: var(--grey-body); margin: 0;
}
@media (max-width: 759px) {
  .benefit__title { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .benefit { transition: none; }
  .benefit:hover { transform: none; }
}

/* ==========================================================================
   32. Claim path finder — hero CTA treatment
   This is the highest-value interaction on the page: zero-friction lead
   qualification. It gets a distinct branded band so it stands out from the
   plain sections around it, a centred inviting intro with trust chips, and
   an elevated widget card that reads as THE thing to do here.
   ========================================================================== */
.finder-section {
  position: relative;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(129,204,184,0.16), transparent 70%),
    var(--mist);
  border-top: 1px solid var(--teal-line);
  border-bottom: 1px solid var(--teal-line);
  overflow: hidden;
}
/* A faint oversized version of the logo smile-arc, echoing the brand, sits
   behind the widget as a quiet texture. */
.finder-section::before {
  content: '';
  position: absolute; left: 50%; top: -30%;
  width: min(1400px, 150%); aspect-ratio: 2.4 / 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid rgba(47,115,98,0.06);
  pointer-events: none;
}
.finder-section__inner { position: relative; z-index: 1; }

/* Centred, inviting intro */
.finder-section__intro {
  text-align: center;
  max-width: 640px; margin: 0 auto var(--space-l);
}
.finder-section__intro .eyebrow { justify-content: center; display: flex; }
.finder-section__lead {
  font-size: var(--step-1); line-height: 1.55; color: var(--grey-body);
  margin: 0.5rem 0 var(--space-m);
}
.finder-section__trust {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-s) var(--space-l);
}
.finder-section__trust li {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--navy);
}
.finder-section__trust svg { width: 18px; height: 18px; color: var(--teal-deep); }

/* Elevate the widget so it reads as the focal point, not a plain box. */
.finder-section .finder,
.finder-section .checker,
.finder-section [data-finder-fallback],
.finder-section [data-checker-fallback] {
  max-width: 860px; margin-inline: auto;
}
.finder-section .finder,
.finder-section .checker {
  border: 1px solid var(--teal-line);
  box-shadow: 0 24px 60px rgba(0, 40, 85, 0.14);
  border-radius: var(--radius-lg);
}
/* The widget header strip gets a soft teal ground to feel purposeful. */
.finder-section .finder__head,
.finder-section .checker__head {
  background: var(--teal-soft);
  border-bottom-color: var(--teal-line);
}

/* On no-JS, the fallback content gets the same centred max width. */
.finder-section [data-finder-fallback] .claims { margin-top: 0; }
.finder-section [data-checker-fallback] .callout { margin-top: 0; }


/* ==========================================================================
   33. Checker result — scored readout
   The result now reflects the person's actual answers: a strength tier, then
   a point-by-point readout with a "why this matters" note on anything that
   needs a closer look. Makes the tool feel like a real assessment.
   ========================================================================== */
.checker__signal--strong { background: var(--teal-soft); border-color: var(--teal); }
.checker__signal--strong svg { color: var(--teal-deep); }
.checker__signal--likely { background: var(--teal-soft); border-color: var(--teal-line); }
.checker__signal--watch  { background: #fff6ee; border-color: var(--orange); }
.checker__signal--watch svg { color: var(--orange-deep); }

.checker__readout {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--space-l); margin-bottom: var(--space-l);
}
.checker__readout > h4 {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grey-body);
  margin: 0 0 var(--space-m);
}
.checker__readout > h4 svg { width: 18px; height: 18px; color: var(--grey-body); }

.checker__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }
.checker__point {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--rule);
}
.checker__point:last-child { border-bottom: 0; padding-bottom: 0; }
.checker__point > svg { width: 20px; height: 20px; flex: none; margin-top: 0.1rem; color: var(--teal-deep); }
.checker__point--watch > svg { color: var(--orange-deep); }
.checker__point-a { margin: 0; font-size: 0.98rem; font-weight: 600; color: var(--navy); line-height: 1.4; }
.checker__point-note {
  margin: 0.3rem 0 0; font-size: 0.9rem; line-height: 1.5;
  color: var(--grey-body);
}
.checker__point--watch .checker__point-a { color: var(--orange-text); }

/* ==========================================================================
   34. Checker capture — book-with-Mitch invitation
   Replaces the vague "we'll email you" with a personal consultation CTA:
   Mitch's face + a direct invitation, so the ask is a real conversation.
   ========================================================================== */
.checker__invite {
  display: flex; gap: var(--space-m); align-items: flex-start;
  padding: var(--space-l);
  background: var(--teal-soft);
  border: 1px solid var(--teal-line);
  border-radius: var(--radius);
  margin-bottom: var(--space-l);
}
.checker__invite-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--teal-line);
  flex: none;
}
.checker__invite h4 {
  margin: 0 0 0.35rem; font-size: var(--step-1); color: var(--navy);
}
.checker__invite p {
  margin: 0; font-size: 0.96rem; line-height: 1.55; color: var(--grey-body);
}
@media (max-width: 480px) {
  .checker__invite { flex-direction: column; gap: var(--space-s); }
}

/* ==========================================================================
   35. Checker result — urgency + why-Lifestyle (readout removed)
   ========================================================================== */
/* Urgency banner: the deadline, made loud. Orange = act now. */
.checker__urgency {
  display: flex; gap: var(--space-m); align-items: flex-start;
  padding: var(--space-l);
  background: #fff6ee;
  border: 1px solid var(--orange);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  margin-bottom: var(--space-l);
}
.checker__urgency > svg { width: 30px; height: 30px; color: var(--orange-deep); flex: none; }
.checker__urgency-label {
  margin: 0 0 0.2rem; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--orange-text);
}
.checker__urgency-headline {
  margin: 0 0 0.3rem; font-size: var(--step-1); font-weight: 700;
  color: var(--navy); line-height: 1.3;
}
.checker__urgency-detail {
  margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--grey-body);
}

/* Why-Lifestyle: the differentiator, right before the ask. */
.checker__why {
  padding: var(--space-l);
  border: 1px solid var(--teal-line); border-radius: var(--radius);
  background: var(--teal-soft);
  margin-bottom: var(--space-l);
}
.checker__why h4 {
  margin: 0 0 var(--space-m); font-size: var(--step-1); color: var(--navy);
}
.checker__why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }
.checker__why li {
  display: flex; gap: 0.7rem; align-items: flex-start;
  margin: 0; font-size: 0.96rem; line-height: 1.55; color: var(--ink);
}
.checker__why li svg { width: 20px; height: 20px; flex: none; margin-top: 0.15rem; color: var(--teal-deep); }
.checker__why strong { color: var(--navy); }

/* ==========================================================================
   36. Resources hub + blog
   ========================================================================== */
/* Category filter pills */
.res-filter {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: var(--space-l) 0 var(--space-l);
}
.res-filter button {
  font: inherit; cursor: pointer;
  padding: 0.5rem 1rem; border-radius: 999px;
  border: 1px solid var(--teal-line); background: var(--white);
  color: var(--navy); font-size: 0.9rem; font-weight: 600;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.res-filter button:hover { border-color: var(--teal); }
.res-filter button[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* Featured article */
.res-featured {
  display: grid; grid-template-columns: 1fr; gap: var(--space-l);
  padding: var(--space-l); margin-bottom: var(--space-xl);
  border: 1px solid var(--teal-line); border-radius: var(--radius-lg);
  background: var(--teal-soft);
}
@media (min-width: 820px) { .res-featured { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.res-featured__tag {
  display: inline-block; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-deep);
  margin-bottom: 0.6rem;
}
.res-featured h3 { font-size: var(--step-3); margin: 0 0 0.6rem; color: var(--navy); }
.res-featured p { margin: 0 0 var(--space-m); color: var(--grey-body); }
.res-featured__meta { font-size: 0.85rem; color: var(--grey-body); }

/* Article grid */
.res-grid { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .res-grid { grid-template-columns: repeat(3, 1fr); } }

.res-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--white); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.res-card:hover { transform: translateY(-4px); border-color: var(--teal-line); box-shadow: 0 16px 36px rgba(0,40,85,0.10); }
.res-card__body { padding: var(--space-l); display: flex; flex-direction: column; flex: 1; }
.res-card__tag {
  align-self: flex-start;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--teal-deep); background: var(--teal-soft);
  padding: 0.25rem 0.6rem; border-radius: 999px; margin-bottom: var(--space-s);
}
.res-card__title { font-size: var(--step-1); margin: 0 0 0.5rem; color: var(--navy); line-height: 1.3; }
.res-card__excerpt { font-size: 0.95rem; line-height: 1.55; color: var(--grey-body); margin: 0 0 var(--space-m); }
.res-card__meta {
  margin-top: auto; display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; color: var(--teal-deep); font-weight: 600;
}
.res-card__meta svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.res-card:hover .res-card__meta svg { transform: translateX(4px); }
.res-card[hidden] { display: none; }

/* ---- Blog post layout ---- */
.post { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
@media (min-width: 1000px) { .post { grid-template-columns: minmax(0,1fr) 320px; align-items: start; } }

.post__body { min-width: 0; }
.post__body h2 { font-size: var(--step-2); margin: var(--space-xl) 0 var(--space-s); }
.post__body h3 { font-size: var(--step-1); margin: var(--space-l) 0 var(--space-s); }
.post__body p { margin: 0 0 var(--space-m); line-height: 1.75; color: var(--ink); }
.post__body ul, .post__body ol { margin: 0 0 var(--space-m) 1.2rem; line-height: 1.75; color: var(--ink); }
.post__body li { margin-bottom: 0.4rem; }
.post__body strong { color: var(--navy); }
.post__lead { font-size: var(--step-1); line-height: 1.6; color: var(--grey-body); }

/* TOC */
.post__toc {
  border: 1px solid var(--teal-line); border-radius: var(--radius);
  background: var(--mist); padding: var(--space-m) var(--space-l);
  margin-bottom: var(--space-l);
}
.post__toc p { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-deep); margin: 0 0 0.5rem; }
.post__toc ol { margin: 0 0 0 1.1rem; padding: 0; }
.post__toc a { color: var(--navy); text-decoration: none; }
.post__toc a:hover { color: var(--teal-deep); text-decoration: underline; }

/* Author block */
.post__author {
  display: flex; gap: var(--space-m); align-items: center;
  padding: var(--space-l); margin: var(--space-xl) 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.post__author img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: center top; flex: none; }
.post__author h3, .post__author h4 { margin: 0 0 0.15rem; font-size: 1.05rem; }
.post__author p { margin: 0; font-size: 0.9rem; color: var(--grey-body); }

/* Sticky sidebar */
.post__aside { position: relative; }
@media (min-width: 1000px) { .post__aside { position: sticky; top: 120px; } }
.post__cta {
  border: 1px solid var(--teal-line); border-radius: var(--radius-lg);
  background: var(--teal-soft); padding: var(--space-l); text-align: center;
}
.post__cta img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center top; margin: 0 auto var(--space-s); border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--teal-line); }
.post__cta h4 { margin: 0 0 0.4rem; font-size: var(--step-1); }
.post__cta p { margin: 0 0 var(--space-m); font-size: 0.92rem; color: var(--grey-body); }

.post__checker { margin-top: var(--space-2xl); }

/* ==========================================================================
   Practice pages: in-page jump nav + "Read more" narrative
   ========================================================================== */
html { scroll-padding-top: 170px; }
.jumpnav {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}
.jumpnav ul {
  display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0.75rem 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.jumpnav ul::-webkit-scrollbar { display: none; }
.jumpnav li { flex: none; }
.jumpnav a {
  display: inline-block; padding: 0.45rem 0.95rem; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--navy); font-size: 0.9rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.jumpnav a:hover { border-color: var(--navy); }
.jumpnav a.jumpnav__cta { background: var(--orange); border-color: var(--orange); color: var(--ink); }
@media (min-width: 1024px) {
  .jumpnav { position: sticky; top: 97px; z-index: 90; }
}

.readmore { margin-top: 1rem; }
.readmore > summary {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  font-weight: 600; color: var(--navy); list-style: none;
  border-bottom: 2px solid var(--orange); padding-bottom: 2px;
}
.readmore > summary::-webkit-details-marker { display: none; }
.readmore > summary::after { content: "+"; font-size: 1.1em; line-height: 1; }
.readmore[open] > summary { margin-bottom: 1rem; }
.readmore[open] > summary::after { content: "\2212"; }

/* Trust bar: keep each item on one line on wide screens; centre the jump nav. */
@media (min-width: 1100px) {
  .trust ul { grid-template-columns: repeat(4, auto); justify-content: space-evenly; }
  .trust li { white-space: nowrap; }
  .jumpnav ul { justify-content: center; }
}

/* Mobile menu: restore the .wrap side gutter (the padding shorthand above removes it). */
.mobile-nav.wrap { padding-inline: var(--space-m); }

/* Mobile menu grouping: practice areas first under a "Claims" label, then firm pages. */
.mobile-nav__label {
  padding: 1.1rem 0 0.25rem; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-text);
}
.mobile-nav__sep { height: 1.25rem; }
.mobile-nav a[href^="tel:"] { color: var(--orange-text); font-weight: 600; border-bottom: 0; }

/* Legal services hero: claim-type shortcuts */
.hero-claims__label {
  margin: var(--space-l) 0 var(--space-xs); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal);
}
.hero-claims {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.75rem; grid-template-columns: 1fr;
}
@media (min-width: 560px) { .hero-claims { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hero-claims { grid-template-columns: repeat(4, 1fr); max-width: 980px; } }
.hero-claim {
  display: flex; align-items: center; gap: 0.85rem; height: 100%;
  padding: 0.9rem 1rem; border-radius: 14px; text-decoration: none;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, transform .2s;
}
.hero-claim:hover { background: rgba(255,255,255,0.16); border-color: var(--orange); transform: translateY(-2px); }
.hero-claim__icon {
  flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
  background: var(--orange); color: var(--ink);
}
.hero-claim__icon svg { width: 22px; height: 22px; }
.hero-claim b { display: block; font-weight: 600; line-height: 1.25; }
.hero-claim small { display: block; font-size: 0.82rem; opacity: 0.8; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .hero-claim { transition: none; } .hero-claim:hover { transform: none; } }
.services-hero .hero__lede { max-width: 34rem; }
.services-hero .hero__media img { object-position: 85% center; }

/* ==========================================================================
   Migration additions (blog template, resources hub, categories)
   Uses existing tokens only; no changes to approved components above.
   ========================================================================== */
.post__figure { margin: 0 0 var(--space-l); border-radius: var(--radius-lg); overflow: hidden; background: var(--mist); }
.post__figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.post__content > :first-child { margin-top: 0; }
.post__body h4, .post__body h5, .post__body h6 { margin: var(--space-m) 0 var(--space-xs, 0.5rem); color: var(--navy); }
.post__body a { color: var(--teal-deep); text-underline-offset: 2px; }
.post__body blockquote { margin: 0 0 var(--space-m); padding: var(--space-s) var(--space-m); border-left: 4px solid var(--teal); background: var(--teal-soft); }
.post__body table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-m); font-size: 0.95rem; display: block; overflow-x: auto; }
.post__body th, .post__body td { border: 1px solid var(--rule); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; }
.post__body th { background: var(--navy-060); color: var(--navy); }
.post__embed { position: relative; aspect-ratio: 16 / 9; margin: 0 0 var(--space-m); }
.post__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-lg); }
.post__author-name { margin: 0 0 0.15rem; font-size: 1.05rem; }
.post__author img { object-fit: contain; background: var(--white); border: 1px solid var(--teal-line); padding: 8px; }
.post__disclaimer { margin-top: var(--space-l); font-size: 0.85rem; color: var(--grey-body); }
.post__cta-heading { margin: 0 0 0.4rem; font-size: var(--step-1); }
.post__cta-secondary { margin-top: 0.75rem !important; font-size: 0.85rem; }
.post__practice { margin-top: var(--space-m); font-size: 0.9rem; color: var(--grey-body); text-align: center; }
.section--mist { background: var(--mist); }
.final-cta { text-align: center; max-width: 60ch; }
.final-cta p { color: rgba(255,255,255,0.82); font-size: 1.05rem; }
.final-cta .btn-row { justify-content: center; margin-top: 1.5rem; }
.res-cats { margin: var(--space-xl) 0 var(--space-m); }
.res-cats p { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-deep); margin: 0 0 0.5rem; }
.res-cats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.res-cats a { display: inline-block; padding: 0.4rem 0.85rem; border: 1px solid var(--teal-line); border-radius: 999px; color: var(--navy); text-decoration: none; font-size: 0.9rem; background: var(--white); }
.res-cats a:hover, .res-cats a[aria-current="page"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.res-cats__count { opacity: 0.7; font-weight: 400; }
.profile__photo { margin: 0 0 var(--space-l); max-width: 320px; border-radius: var(--radius-lg); overflow: hidden; }
.profile__photo img { display: block; width: 100%; height: auto; }
.member__name a { color: inherit; text-decoration: none; }
.member__name a:hover { text-decoration: underline; }
.member__more { margin-top: 0.75rem; font-weight: 600; }
.member__more a { color: var(--teal-deep); }
.res-all-heading { margin: var(--space-l) 0 var(--space-m); font-size: var(--step-2); }