/* AccidentLogic — LawLogic Design System
   Palette + typography mirror the LawLogic system used on 911cancerlawsuit.com
   so every legal vertical (AccidentLogic, WTC, and future sites) share the
   same visual identity. Site-specific bits stay AL-specific (content, service
   pages, flipping cards, /int/ hero photo). */

:root {
  /* Brand palette */
  --c-bg:           #ffffff;
  --c-alt:          #F2F0EE;     /* warm dust grey */
  --c-text:         #1D242D;
  --c-muted:        #6B6B6B;     /* dust grey */
  --c-brand:        #AC2428;     /* LawLogic red */
  --c-brand-mid:    #8A1D20;     /* darker red for gradients */
  --c-brand-light:  #C13539;     /* brighter red accent / hover */
  --c-brand-dark:   #8E1A1D;     /* deepest red / CTA hover */
  --c-gold:         #C13539;     /* legacy alias -> brand-light (was amber) */
  --c-gold-dark:    #8E1A1D;     /* legacy alias -> brand-dark */
  --c-dark:         #1D242D;     /* hero / footer charcoal */
  --c-accent:       #1D242D;     /* legacy alias -> --c-dark */
  --c-dark-2:       #000000;     /* deepest shade */
  --c-blue:         #215387;     /* deep blue accent (kept for AL service-hero gradient) */
  --c-line:         #E4E1DE;     /* dust-tinted border grey */
  --c-line-dark:    rgba(255,255,255,0.12);
  --c-accent-dark:  #E8757A;     /* red text/icons on dark bg — WCAG AA on --c-dark */
  --c-success:      #1a7340;
  --c-cta:          #ffd166;     /* legacy — some hero eyebrow refs still exist */

  /* Elevation */
  --shadow-xs: 0 1px 3px rgba(29,36,45,.07);
  --shadow-sm: 0 2px 8px rgba(29,36,45,.09);
  --shadow-md: 0 8px 30px rgba(29,36,45,.12);
  --shadow-lg: 0 20px 60px rgba(29,36,45,.18);
  --shadow-xl: 0 32px 80px rgba(29,36,45,.22);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Layout */
  --max:        1200px;
  --max-narrow: 840px;
  --nav-h:      56px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset + baseline (LawLogic) ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  /* 18px baseline (was 16px). All sizing is rem-based so this scales the
     whole site consistently and still respects the user's browser font-size
     preference. Many legal-vertical visitors are older adults — legibility. */
  font-size: 112.5%;
}
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-brand-light); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25rem; }
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 .75em;
  color: var(--c-brand);              /* LawLogic — brand red headings */
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; font-weight: 700; }

/* ── Skip-link (a11y) ── */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-dark); color: #fff;
  padding: .75rem 1rem; z-index: 1000; font-weight: 700;
  border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; text-decoration: none; }

/* ── Focus-visible (a11y) ── */
.button:focus-visible,
.navbar_cta:focus-visible,
.navbar_brand:focus-visible,
.footer a:focus-visible,
a:focus-visible {
  outline: 3px solid var(--c-brand-light);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Touch targets (WCAG 2.5.5 / Apple HIG 44px). min-height grows the hit box
   only — type size and colour are untouched. Phone links get it site-wide
   because every one of them is a call-now conversion point. */
a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

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

.container { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
.container.narrow { max-width: var(--max-narrow); }
.main-wrapper { min-height: 60vh; }

/* ── Scroll reveal (js/app.js sets .is-visible via IntersectionObserver) ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger consecutive siblings so grids and lists cascade in */
.reveal:nth-child(2) { transition-delay: .1s; }
.reveal:nth-child(3) { transition-delay: .2s; }
.reveal:nth-child(4) { transition-delay: .3s; }

/* ──────── Navbar ──────── */
/* Default (interior pages): solid charcoal bar matching the brand dark color.
   White logo + red CTA pill on the right. No site-nav links. */
.navbar {
  background: var(--c-dark);
  position: sticky; top: 0; z-index: 50;
}
.navbar_inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.25rem; gap: 1rem;
}
.navbar_brand { display: inline-flex; align-items: center; }
.navbar_brand:hover { text-decoration: none; }
.navbar_brand img { display: block; height: 70px; width: auto; }
.navbar_cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--c-brand); color: #fff !important;
  height: var(--nav-h); padding: 0 1.1rem;
  border-radius: var(--r-md); font-weight: 700;
  white-space: nowrap;
  transition: background .15s ease;
}
.navbar_cta:hover { background: var(--c-brand-dark); text-decoration: none; }
.navbar_cta_icon {
  width: 16px; height: 16px; fill: currentColor; flex-shrink: 0;
}

/* Homepage: header overlays the hero — fully transparent, absolutely
   positioned above the video bg. The hero contains its own dark gradient
   overlay so the white logo stays readable. */
.is-home .navbar {
  background: transparent;
  position: absolute;
  top: 0; left: 0; right: 0;
}
.is-home .main-wrapper { padding-top: 0; }

@media (max-width: 720px) {
  :root { --nav-h: 44px; }   /* 44px min touch target (WCAG 2.5.5) */
  .navbar_cta { padding: 0 .9rem; font-size: .9rem; }
  /* The 70px logo is 227px wide, which together with the CTA exceeds a
     narrow viewport. .navbar_inner wraps, and because the home navbar is
     absolutely positioned the wrapped CTA lands on top of the H1 instead
     of pushing it down. Shrink the mark so the bar stays one row. */
  .navbar_brand img { height: 48px; }
}

/* ──────── Hero (matches /int/ on production) ──────── */
.hero { position: relative; color: #fff; overflow: hidden; min-height: 540px; }
.hero_bg { position: absolute; inset: 0; z-index: 0; }
.hero_image { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* Soft left-to-right gradient that darkens the left half (where the H1 + form sit
   on top) but leaves the right side of the lawyer photo visible.
   Top of the image is also lightly faded so the transparent header's white logo stays readable. */
.hero_overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(29,36,45,.55) 0, rgba(29,36,45,0) 25%),
    linear-gradient(90deg, rgba(29,36,45,.78) 0%, rgba(29,36,45,.55) 45%, rgba(29,36,45,0) 100%);
}
.hero_inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem;
  padding: 8rem 1.5rem 4.5rem;   /* clears the absolute-positioned header */
  align-items: center;
}
.hero_eyebrow { font-size: .95rem; font-weight: 600; opacity: .95; margin-bottom: .5rem; }
.hero_eyebrow a { color: var(--c-cta); font-weight: 800; }
.hero_title {
  color: #fff;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 900;
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.hero_title_accent {
  background: linear-gradient(135deg, #C13539 0%, #F27C80 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero_subtitle {
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(255,255,255,.92);
  max-width: 40ch;
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* Trust checklist under the hero subtitle */
.hero_trust {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  color: rgba(255,255,255,.95);
}
.hero_trust li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 500;
}
.hero_trust svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  fill: #7dd899;      /* light green — reads on dark hero without WCAG-fail on white bg */
}
.hero_cta {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
@media (min-width: 901px) {
  .hero_cta { display: none !important; }
}

/* ── Hero eligibility card (right column) ── */
.hero_media { position: relative; }
.elig-card {
  background: #fff;
  color: var(--c-text);
  border-radius: var(--r-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.1);
  min-height: 240px;
}
.elig-card-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--c-brand);
  margin: 0 0 .75rem;
  letter-spacing: -0.01em;
  text-align: center;
}
/* Segmented progress bar — WTC geometry (911cancerlawsuit.com): separate
   flex-equal segments with a .5rem gap, no container track. */
.elig-step-indicator {
  display: flex;
  gap: .5rem;
  margin: 0 0 1.75rem;
  width: 100%;
}
.elig-step-dot {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--c-line);
  transition: background .3s var(--ease);
  cursor: default;
}
.elig-step-dot.active {
  background: var(--c-brand);
}
.elig-step-dot.done {
  background: var(--c-success);
}

/* Trust badges / phone fallback — WTC layout: a rule-topped block that
   follows the form in normal flow. */
.elig-trust-badges {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line);
  font-size: .78rem; font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.elig-trust-badges span::before {
  content: "✓ "; color: var(--c-success); font-weight: 700;
}
.elig-fallback {
  margin-top: 1rem; text-align: center;
  font-size: .9rem; color: var(--c-muted);
}
.elig-fallback a { color: var(--c-brand); font-weight: 700; }

.hero_form { background: #fff; color: var(--c-text); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--shadow-md); min-height: 200px; }

@media (max-width: 900px) {
  .hero_inner { grid-template-columns: 1fr; padding: 6rem 1.5rem 3rem; }
  .hero_subtitle { max-width: 100%; }
}
@media (max-width: 600px) {
  .hero_inner { gap: 2rem; padding: 5.5rem 1.25rem 2.5rem; }
  .elig-card { padding: 1.25rem; }
}

/* ──────── Sections ──────── */
.section { padding: 3rem 0; }
.section--padded { padding: clamp(3rem, 6vw, 5rem) 0; }
.section--alt { background: var(--c-alt); }
.section_heading--center { text-align: center; }
.section_lead { text-align: center; color: var(--c-muted); max-width: 760px; margin: 0 auto 2.5rem; }

/* ──────── Steps ──────── */
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.step {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  padding: 1.75rem; box-shadow: var(--shadow-sm); text-align: center;
}
.step_number {
  width: 44px; height: 44px; margin: 0 auto 1rem;
  background: var(--c-brand); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.step_title { color: var(--c-accent); }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }

/* ──────── Reasons list ──────── */
.lead { font-size: 1.1rem; color: var(--c-muted); }
.reasons { list-style: disc; padding-left: 1.25rem; }
.reasons li { margin-bottom: .85rem; }
.reasons strong { color: var(--c-accent); }

/* ──────── Find Attorney section — parallax bg + pinned intro + scale-reveal cards ──────── */
.section-find-attorney {
  position: relative;
  background: var(--c-bg);
  overflow: clip;                  /* contains the bg but permits sticky children */
}

/* Parallax lawyer photo bg with warm white wash. background-attachment: fixed
   works on desktop; iOS Safari doesn't paint it correctly so we downgrade to
   a scrolling bg on smaller viewports. */
.find-attorney_bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.50), rgba(255,255,255,.50)),
    url('/images/home/find-attorney.jpg');
  background-size: cover, cover;
  background-position: center;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat;
  pointer-events: none;
}
.section-find-attorney > .container { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .find-attorney_bg {
    background-attachment: scroll, scroll;
  }
}

/* 2-col layout: pinned intro on left, scrolling cards on right */
.find-attorney_layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.7fr;
  gap: 3.5rem;
  align-items: start;
}

/* Sticky pin — the intro stays parked below the sticky navbar while
   the cards column scrolls past. Falls back to normal flow if the
   layout collapses to a single column. */
.find-attorney_intro {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  align-self: start;
  padding-right: 1rem;
}

.find-attorney_h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 .6rem;
  color: var(--c-text);
  /* Soft white halo so the dark charcoal reads against darker parts of
     the parallax lawyer photo now that the overlay is only 50% alpha. */
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 2px 12px rgba(255,255,255,.65);
}
.find-attorney_h2-line { display: block; }
.find-attorney_h2-accent {
  /* Reverted from red gradient — both H2 lines now share the same
     charcoal color inherited from .find-attorney_h2. */
  color: inherit;
}

/* SVG underline that draws in when the intro reveals */
.find-attorney_underline {
  display: block;
  width: 180px; height: 10px;
  margin: .2rem 0 1rem;
  color: var(--c-brand-light);
}
.find-attorney_underline path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.2s var(--ease) .35s;
}
.find-attorney_intro.is-visible .find-attorney_underline path {
  stroke-dashoffset: 0;
}

.find-attorney_intro .section_lead {
  color: var(--c-text);              /* was --c-muted; contrast for 50% bg */
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  text-align: left;
  max-width: 34ch;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}

.find-attorney_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

/* Cards get a punchier scale-in on top of the base reveal */
.attorney-card.reveal {
  transform: translateY(32px) scale(.94);
}
.attorney-card.reveal.is-visible {
  transform: translateY(0) scale(1);
}
.attorney-card {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);       /* bumped from xs — lifts card off busier 50% bg */
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  display: flex; flex-direction: column;
}
.attorney-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-brand);
}
.attorney-card_icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-light) 100%);
  color: #fff;
  border-radius: var(--r-md);
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.attorney-card_icon svg { width: 24px; height: 24px; }
.attorney-card_title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-brand);
  margin: 0 0 .5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.attorney-card p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--c-text);
}

.find-attorney_outro {
  max-width: var(--max-narrow);
  margin: 2.5rem auto 0;
  text-align: center;
  color: var(--c-text);              /* was --c-muted; contrast for 50% bg */
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.6;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}
.find-attorney_outro p { margin: 0; }

/* Stagger reveal for the 6 cards (extends the base .reveal:nth-child rules
   which stop at the 4th sibling) */
.find-attorney_grid > .reveal:nth-child(5) { transition-delay: .4s; }
.find-attorney_grid > .reveal:nth-child(6) { transition-delay: .5s; }

@media (max-width: 900px) {
  /* Below 900px the pinned layout collapses to a single column and the
     sticky intro reverts to static flow (falls back naturally when the
     grid is 1-col — but explicitly killing sticky avoids awkward pinning
     on tall mobile screens). */
  .find-attorney_layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .find-attorney_intro {
    position: static;
    padding-right: 0;
    text-align: center;
  }
  .find-attorney_intro .section_lead { max-width: none; text-align: center; margin: 0 auto; }
  .find-attorney_underline { margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) {
  .find-attorney_grid { grid-template-columns: 1fr; }
}

/* ──────── Service cards — slide-over reveal + front micro-motion ──────── */
/* Mouse: hover to slide the back over the front.
   Keyboard: Tab-focus + Enter/Space toggles .is-flipped via app.js.
   Touch: tap once opens, tap again closes.
   Reduced-motion: cross-fade instead of slide. */
.flipping-card-wrapper {
  /* auto-fit rather than fixed column counts: a column only forms if a card can
     be at least 320px wide. Fixed breakpoints kept producing a band where two
     columns squeezed cards to ~245px, and since height follows the copy that
     made 560px-tall cards barely 245px across. This caps at 3 columns inside
     the 1200px container and degrades to 2 then 1 on its own. */
  display: grid;
  /* min(320px, 100%) not a bare 320px: on a 320px phone the container is only
     ~266px after padding, and a hard 320px minimum track overflows it. min()
     clamps the floor to the container when it is narrower. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1.25rem;
}
/* auto-fit would reach 4 columns on a wide desktop; the design is 3. */
@media (min-width: 1100px) {
  .flipping-card-wrapper { grid-template-columns: repeat(3, 1fr); }
}
.flipping-card {
  /* grid so .flipping-card_inner stretches to the full row height; a plain
     block plus min-height gives percentage heights nothing definite to resolve
     against, which left short cards with their back panel ending early and the
     card background showing through underneath. */
  display: grid;
  position: relative;
  /* Height follows the back copy rather than being fixed. The needed height
     swings from ~226px to ~533px depending on how narrow the card gets, so any
     fixed value clips the longer practice areas at some breakpoint. Front and
     back share one grid cell (below), so the cell resolves to the taller of the
     two and nothing is cut off. min-height keeps the short cards from looking
     stunted; grid stretch keeps every card in a row the same height. */
  min-height: 280px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  outline: none;               /* focus-visible below draws its own ring */
  isolation: isolate;          /* keep the ::after gradient stacked to this card only */
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.flipping-card:hover,
.flipping-card:focus-visible,
.flipping-card.is-flipped {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.flipping-card:focus-visible {
  outline: 3px solid var(--c-brand-light);
  outline-offset: 3px;
}
.flipping-card_inner {
  position: relative;
  grid-area: 1 / 1;            /* stretches to the card box */
  width: 100%;
  display: grid;               /* front + back stack in a single cell */
}

/* ── Front ── */
.flipping-card_front {
  grid-area: 1 / 1;
  position: relative;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 1.25rem;
  background: var(--c-dark);
  color: #fff;
  overflow: hidden;
}
.flipping-card_icon {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .6s var(--ease);
  will-change: transform;
}
.flipping-card_front::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(29,36,45,0) 40%, rgba(29,36,45,.85) 100%);
  transition: opacity .3s var(--ease);
}
.flipping-card_title {
  position: relative; z-index: 1;
  color: #fff; font-size: 1.25rem; line-height: 1.2;
  margin: 0; padding: 0 1rem;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  text-align: center;
  transition: transform .3s var(--ease);
}
/* Micro-motion: photo pans + zooms, title lifts, affordance chip animates in */
.flipping-card:hover .flipping-card_icon,
.flipping-card.is-flipped .flipping-card_icon {
  transform: scale(1.06);
}
.flipping-card:hover .flipping-card_title,
.flipping-card:focus-visible .flipping-card_title {
  transform: translateY(-4px);
}

/* Affordance chip — top-right corner of the front, hints the card opens */
.flipping-card_affordance {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .6rem .3rem .7rem;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--r-full);
  border: 1px solid rgba(255,255,255,.25);
  transition: transform .25s var(--ease), background .25s var(--ease);
  pointer-events: none;
}
.flipping-card_affordance svg {
  width: 12px; height: 12px;
  transition: transform .25s var(--ease);
}
.flipping-card:hover .flipping-card_affordance,
.flipping-card:focus-visible .flipping-card_affordance {
  background: rgba(255,255,255,.24);
  transform: translateX(-2px);
}
.flipping-card:hover .flipping-card_affordance svg,
.flipping-card:focus-visible .flipping-card_affordance svg {
  transform: translateX(3px);
}

/* ── Back — slides up over the front ── */
.flipping-card_back {
  grid-area: 1 / 1; z-index: 3;
  position: relative;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center; padding: 1.75rem 1.25rem;
  background: linear-gradient(160deg, var(--c-brand) 0%, var(--c-brand-mid) 100%);
  color: #fff;
  transform: translateY(100%);
  transition: transform .45s var(--ease);
  will-change: transform;
}
/* .is-flipped is the authoritative open state, set by the click/Enter/Space
   toggle in app.js. Hover is only an extra affordance and is gated behind
   hover:hover so it cannot fire on touch: mobile browsers leave a sticky :hover
   after a tap, which would hold the panel open and make the second tap look
   dead. :focus-visible deliberately does NOT open the panel either, because it
   persists after Enter and would make the card impossible to close from the
   keyboard; focus still gets its own outline below. */
.flipping-card.is-flipped .flipping-card_back {
  transform: translateY(0);
}
@media (hover: hover) and (pointer: fine) {
  .flipping-card:hover .flipping-card_back {
    transform: translateY(0);
  }
}
.flipping-card_tagline {
  color: #fff; font-size: .95rem; font-weight: 700;
  line-height: 1.3; margin: 0;
}
.flipping-card_divider {
  border: 0; border-top: 1px solid rgba(255, 255, 255, .55);
  width: 36px; margin: .85rem auto;
}
.flipping-card_body {
  color: rgba(255, 255, 255, .95); font-size: .88rem; line-height: 1.5;
  margin: 0;
}


@media (max-width: 720px) {
  .flipping-card { min-height: 240px; }
}

/* Touch devices (no hover) — nothing extra needed; JS handles the tap
   toggle via .is-flipped which uses the same rules as :hover above. */

/* Reduced motion: cross-fade instead of slide, no scale, no shadow lift. */
@media (prefers-reduced-motion: reduce) {
  .flipping-card,
  .flipping-card_icon,
  .flipping-card_title,
  .flipping-card_affordance,
  .flipping-card_affordance svg {
    transition: opacity .2s !important;
    transform: none !important;
  }
  .flipping-card_back {
    transform: none !important;
    opacity: 0;
    transition: opacity .2s !important;
  }
  .flipping-card.is-flipped .flipping-card_back {
    opacity: 1;
  }
}

/* ──────── Final CTA ──────── */
.section--cta {
  background: var(--c-dark); color: #fff; text-align: center;
}
.section--cta h2 { color: #fff; }
.section--cta a { color: var(--c-accent-dark); }

/* ──────── Buttons (LawLogic) ──────── */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  background: var(--c-brand); color: #fff !important;
  padding: .8rem 1.75rem;
  border-radius: var(--r-lg);
  font-weight: 700;
  transition: background .15s var(--ease), transform .15s var(--ease);
  border: 2px solid transparent;
}
.button:hover { background: var(--c-brand-dark); text-decoration: none; }
.button--lg { padding: 1rem 2.25rem; font-size: 1.05rem; }
.button--gold {
  background: var(--c-gold); color: #fff !important;
}
.button--gold:hover { background: var(--c-gold-dark); }
.button--outline {
  background: transparent; color: #fff !important;
  border-color: rgba(255,255,255,0.4);
}
.button--outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}

/* ── LawLogic form (#ll-form) — ported from 911cancerlawsuit.com (WTC) ──
   The embedded widget renders Bootstrap markup: each choice is an
   <input type="radio" class="btn-check"> paired with a
   <label class="btn btn-light btn-outline-filter">, and Submit is a
   <button class="btn btn-primary">. Overrides must therefore target
   .btn / label.btn / .btn-primary — plain `button` and `input[type=submit]`
   selectors match nothing in this widget.

   The structural rules below are WTC's verbatim, with two deliberate
   differences: the choice grid is single-column (WTC uses two), and
   .incident_type-wrapper is added alongside .btn-group because AL's form
   build wraps its options in that class. Colors stay AL's light card
   rather than WTC's dark glassmorphism skin. */

/* Global resets */
#ll-form,
#ll-form * {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  box-sizing: border-box;
}
#ll-form form { margin: 0; }

/* Button layout — single column, applies everywhere.
   The widget names each step's option container after its field
   (incident_type-wrapper, accident_date-wrapper, ...), so keying the
   layout off the wrapper class only ever styles the step you happen to
   have looked at. The buttons are width:100% flex boxes, which already
   stack one per row inside any block container — so spacing rides on the
   buttons themselves (margin-bottom, below) and works on every step
   regardless of what the wrapper is called. These rules only neutralise
   Bootstrap's horizontal .btn-group, which would otherwise fight it. */
#ll-form .btn-group,
#ll-form .btn-group-toggle,
#ll-form [role="group"] {
  display: block !important;
  width: 100%;
  border: none !important;
}

/* Button shape — applies everywhere */
#ll-form .btn,
#ll-form label.btn,
#ll-form button.btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem 1.25rem !important;
  border-radius: var(--r-lg) !important;
  font-size: .975rem !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: all .2s var(--ease) !important;
  text-align: center;
  width: 100%;
  line-height: 1.4;
  box-shadow: none !important;
  margin: 0 0 .75rem !important;     /* replaces Bootstrap's me-2 / mb-3 */
}

/* Focus ring — applies everywhere */
#ll-form .btn:focus,
#ll-form .btn:focus-visible {
  outline: 2px solid var(--c-gold) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Field rows fill the card. The widget lays the contact step out on a
   Bootstrap 12-column grid but only ever spends 9 of them — col-sm-4 +
   col-sm-5 for the name/phone/email pairs and col-sm-9 for the consent
   block — leaving a dead 25% strip down the right-hand side. Letting the
   columns flex-grow spends the full row: pairs land at 50/50 and the
   consent block goes full width, whatever column classes the vendor emits. */
#ll-form .ll_sec_flds > [class*="col-"] {
  flex: 1 1 0 !important;
  max-width: 100% !important;
}

/* Input shape — applies everywhere */
#ll-form input[type="text"],
#ll-form input[type="email"],
#ll-form input[type="tel"],
#ll-form input[type="date"],
#ll-form select,
#ll-form textarea,
#ll-form .form-control {
  border-radius: var(--r-md) !important;
  font-size: .975rem !important;
  padding: .75rem 1rem !important;
  width: 100%;
  transition: border-color .2s var(--ease);
}
#ll-form .form-control:focus,
#ll-form input:focus,
#ll-form select:focus {
  border-color: var(--c-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(193,53,57,0.2) !important;
}

/* Hide the "No Accidents" option on the fault question. The widget emits
   input/label pairs, so the option is label:nth-child(6) positionally — but
   keying off the input's value survives the vendor reordering or inserting
   options, where a positional selector would silently hide the wrong one.
   The form is novalidate, so removing a member of a required radio group
   raises no constraint-validation issue. */
#ll-form .accident_fault-wrapper > input[value="No Accidents"],
#ll-form .accident_fault-wrapper > input[value="No Accidents"] + label {
  display: none !important;
}

/* Searchable state dropdown (step 3). The widget builds a custom Bootstrap
   dropdown whose wrapper carries .dropdown-center, so Popper centres the menu
   on the toggle: with a content-sized menu (211px) under a full-width button
   (473px) that meant a 131px indent and a menu far narrower than the field.
   Matching the menu to the wrapper makes the centring offset resolve to zero
   on its own — Popper measures the element after CSS, so no positioning
   override is needed. */
#ll-form .js-bs-select-dropdown .dropdown-menu {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* Strip Bootstrap card/panel chrome — applies everywhere */
#ll-form .card,
#ll-form .panel,
#ll-form .well {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#ll-form .card-body,
#ll-form .panel-body { padding: 0 !important; }

/* Hide the widget's own progress bar — the card renders the segmented
   .elig-step-indicator above the form instead. */
#ll-form .progress { display: none !important; }

/* ── Light skin — eligibility card on the home page ─────────────────── */
.elig-card #ll-form .btn,
.elig-card #ll-form label.btn,
.elig-card #ll-form button.btn {
  border: 1px solid var(--c-line) !important;
  background: #fff !important;
  color: var(--c-text) !important;
}
.elig-card #ll-form .btn:hover,
.elig-card #ll-form label.btn:hover {
  border-color: var(--c-gold) !important;
  background: var(--c-alt) !important;
  color: var(--c-text) !important;
}
.elig-card #ll-form .btn.active,
.elig-card #ll-form .btn:active,
.elig-card #ll-form .btn-check:checked + .btn,
.elig-card #ll-form .btn-check:checked + label.btn {
  border-color: var(--c-brand) !important;
  background: var(--c-brand) !important;
  color: #fff !important;
}

/* Submit — brand red, matching the navbar CTA.
   Scoped with .elig-card as well as bare, so it outranks the light-skin
   `.elig-card #ll-form .btn` rule above (equal specificity, declared later). */
#ll-form .btn-primary,
#ll-form button.btn-primary,
.elig-card #ll-form .btn-primary,
.elig-card #ll-form button.btn-primary {
  border: none !important;
  background: var(--c-brand) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: .75rem 2.5rem !important;
  width: auto !important;
  margin: 1rem auto 0 !important;
}
#ll-form .btn-primary:hover,
.elig-card #ll-form .btn-primary:hover,
.elig-card #ll-form button.btn-primary:hover {
  background: var(--c-brand-dark) !important;
  color: #fff !important;
}

/* ──────── Service page hero ──────── */
.service-hero {
  background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-blue) 100%);
  color: #fff; padding: 3rem 0;
}
.service-hero_inner {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center;
}
.service-hero h1 { color: #fff; }
.service-hero .hero_eyebrow { color: rgba(255,255,255,.85); }
.service-hero .hero_eyebrow a { color: var(--c-cta); }
.service-hero_form {
  background: #fff; color: var(--c-text); border-radius: var(--r-lg);
  padding: 1.5rem; box-shadow: var(--shadow-md); min-height: 200px;
}
@media (max-width: 860px) { .service-hero_inner { grid-template-columns: 1fr; } }

/* ──────── Article + Legal content typography ──────── */
.article-content, .legal-content {
  /* Legal copy contains full regulator URLs (the EU authorities index is 76
     characters with no break opportunity). Without this they refuse to wrap and
     push the page 121px wider than a phone viewport, giving the whole document
     a horizontal scroll. */
  overflow-wrap: break-word;
  font-size: 1rem; line-height: 1.7;
}
.article-content h1, .legal-content h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
}
.article-content h2, .legal-content h2 {
  font-size: 1.5rem; margin-top: 2.25rem; margin-bottom: .75rem;
  padding-top: 1rem; border-top: 1px solid var(--c-line);
}
.article-content h3, .legal-content h3 {
  font-size: 1.15rem; color: var(--c-accent); margin-top: 1.5rem; margin-bottom: .5rem;
}
.article-content h5, .legal-content h5 {
  font-size: 1.05rem; font-weight: 700; color: var(--c-muted);
  margin: 0 0 1rem;
}
.article-content p, .legal-content p { margin: 0 0 1rem; color: #2a3242; }
.article-content ul, .legal-content ul,
.article-content ol, .legal-content ol { margin: 0 0 1.25rem 1.5rem; }
.article-content li, .legal-content li { margin-bottom: .4rem; }
.article-content a, .legal-content a { color: var(--c-brand); text-decoration: underline; }
.article-content img { border-radius: var(--r-md); margin: 1.25rem 0; }

/* Wide tables scroll inside their own box instead of widening the page. The
   privacy policy's category table has a 354px min-content width, which is
   wider than a 320px phone and was forcing the whole document sideways. The
   wrapper does the scrolling so the <table> keeps its native semantics. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.25rem;
}
.article-content table,
.legal-content table {
  border-collapse: collapse;
  min-width: 100%;
}
.article-content th, .legal-content th,
.article-content td, .legal-content td {
  border: 1px solid var(--c-line);
  padding: .5rem .65rem;
  text-align: left;
  vertical-align: top;
}
.legal-content { color: #2a3242; }
.legal-content em { color: var(--c-muted); }
.legal-effective {
  color: var(--c-muted); font-style: italic; margin-bottom: 2rem;
}

/* ──────── FAQs ──────── */
.faqs { display: flex; flex-direction: column; gap: .5rem; }
.faq {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 0;
}
.faq[open] { box-shadow: var(--shadow-sm); }
.faq_q {
  padding: 1rem 1.25rem; font-weight: 700; cursor: pointer; color: var(--c-accent);
  list-style: none; position: relative;
}
.faq_q::-webkit-details-marker { display: none; }
.faq_q::after {
  content: '+'; position: absolute; right: 1.25rem; font-size: 1.25rem;
  font-weight: 400; color: var(--c-brand); transition: transform .15s ease;
}
.faq[open] .faq_q::after { content: '−'; }
.faq_a { padding: 0 1.25rem 1rem; margin: 0; color: #2a3242; line-height: 1.65; }

/* ──────── CCPA form ──────── */
.ccpa-form {
  background: var(--c-alt); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: 1.5rem; margin: 2rem 0;
}
.ccpa-form fieldset { border: 0; padding: 0; margin: 0; }
.ccpa-form legend { font-weight: 700; color: var(--c-accent); margin-bottom: .75rem; font-size: 1.1rem; }
.ccpa-form_group { margin: 1rem 0; padding: .75rem; background: #fff; border-radius: var(--r-md); }
.ccpa-form_group legend { font-size: .95rem; }
.ccpa-form label {
  display: block; margin-bottom: .9rem; font-weight: 600; font-size: .95rem;
}
.ccpa-form_group label { display: block; font-weight: 400; margin-bottom: .35rem; }
.ccpa-form input[type=text], .ccpa-form input[type=email],
.ccpa-form input[type=tel], .ccpa-form textarea {
  display: block; width: 100%; margin-top: .35rem;
  padding: .55rem .75rem; border: 1px solid var(--c-line);
  border-radius: var(--r-md); font: inherit;
}
.ccpa-form_consent { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
.ccpa-form_consent input { margin-top: .25rem; }
.ccpa-form_alt { color: var(--c-muted); font-size: .9rem; }

/* ──────── Footer ──────── */
.footer {
  margin-top: 0;
  background: var(--c-accent);
  color: rgba(255, 255, 255, 0.85);
  font-size: .9rem;
}
.footer_inner { padding: 2.5rem 1.25rem 1.75rem; }

.footer_top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.25rem;
}
.footer_brand img { display: block; height: var(--nav-h); width: auto; }

.footer_contact { display: flex; align-items: center; gap: .75rem; }
.footer_contact_label {
  font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap;
}
.footer_contact_link {
  display: inline-flex; align-items: center; gap: .5rem;
  color: rgba(255,255,255,0.85);
  min-height: 44px;
}
.footer_contact_link:hover { color: var(--c-cta); text-decoration: none; }
.footer_contact_icon {
  width: 18px; height: 18px; fill: currentColor;
  display: inline-block; vertical-align: middle;
}

.footer_divider {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  margin: 1.75rem 0 1.25rem;
}

.footer_disclaimer {
  font-size: .8rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
  max-width: 900px;
}
.footer_disclaimer p { margin: 0; }

.footer_bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem;
  font-size: .85rem;
}
.footer_copyright { margin: 0; color: rgba(255,255,255,0.7); }

.footer_links {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin: 0; padding: 0; list-style: none;
}
.footer_links a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  /* Hit box only — min-height grows the tappable area to the 44px guideline
     (WCAG 2.5.5 / Apple HIG) while the label keeps its .85rem size. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer_links a:hover { color: var(--c-cta); text-decoration: underline; }

@media (max-width: 720px) {
  .footer_top, .footer_bottom { justify-content: center; text-align: center; }
  .footer_links { justify-content: center; }
}