/* ==========================================================================
   Morrison & Barnes — mobile as its own designed experience
   Pass 1: type scale, breathing room, the results moment, motion, depth.

   Reference: Arnold & Itkin mobile (pacing/typography/spacing only — none of
   their branding, imagery or copy). Brand stays M&B navy + electric blue.
   ========================================================================== */

@media (max-width: 767px) {

  /* ---------- 4. TYPOGRAPHY ---------------------------------------------
     The theme's scale is clamp()-based, so at 390px every heading collapses
     to its clamp MINIMUM — section titles land at 2.1rem. That single fact is
     why mobile reads as stacked desktop. Redefining the steps here lifts every
     heading at once instead of patching them one selector at a time. */
  :root {
    --step--1: 0.68rem;   /* eyebrows: smaller, but far more letterspaced */
    --step-0:  1rem;
    --step-1:  1.1rem;
    --step-2:  1.45rem;
    --step-3:  2.55rem;   /* section titles  2.10 -> 2.55rem */
    --step-4:  3.10rem;
    --step-5:  3.60rem;
  }

  .eyebrow {
    letter-spacing: 0.32em;
    color: var(--blue-400);
    margin-bottom: 1.15rem;
  }

  /* Short measure is what makes a headline read as editorial rather than as
     a wrapped paragraph. */
  .section-title,
  .hero-title { max-width: 15ch; line-height: 0.98; letter-spacing: -0.02em; }
  /* .section-head--wide carries its own clamp whose 2rem MINIMUM wins at
     mobile and beats .section-title on specificity — three of the page's
     headings were stuck at 32px while the rest scaled. */
  .section-head--wide .section-title { font-size: var(--step-3); }
  .section-head--center .section-title { margin-inline: auto; }
  .section-head { margin-bottom: 2.25rem; max-width: none; }

  /* Supporting copy: restrained, shorter lines, never competing. */
  .section-lede,
  .intro-copy p,
  .contact-lede { max-width: 34ch; line-height: 1.68; }

  /* ---------- 2. BREATHING ROOM -----------------------------------------
     One idea per screen. The old rhythm packed heading + copy + image +
     stats + buttons into a single viewport. */
  .results,
  .intro,
  .practice,
  .reviews,
  /* Form CTA should hand off straight to the footer: the boxed office strip
     repeated what the footer and dock already say, so it goes entirely --
     no reserved height. 3.5rem = 56px of intentional space before the footer. */
  .contact { padding-block: clamp(4.5rem, 16vw, 7rem) 5rem; }
  .contact .contact-strip { display: none; }
  .nofee,
  .finalcta { padding-block: clamp(3.5rem, 12vw, 5.5rem); }
  .trustbar { padding-block: 2rem; }

  /* ---------- 3. THE RESULTS MOMENT --------------------------------------
     The aggregate lands first and owns the screen; the individual verdicts
     then swipe horizontally instead of stacking as conventional cards. */
  /* The aggregate $150M card would repeat the hero's own number two beats
     later — on mobile the hero carries the aggregate and Case Results leads
     with the largest VERIFIED individual result instead. Desktop unchanged.
     (The .legal-note disclaimer is outside this block and stays visible.) */
  .result-hero { display: none; }

  .results-panel { padding: 0; background: none; border: 0; }
  .results-panel__head { padding-inline: 0; margin-bottom: 1.25rem; }

  /* A grid/flex track defaults to min-width:auto, so the max-content list
     below blew the 1fr column out to 3488px at a 375px viewport and dragged
     the aggregate figure off screen with it. These three lines are what keep
     a horizontal scroller contained inside a vertical grid. */
  .results-grid,
  .results-grid > *,
  .results-feature,
  .results-panel { min-width: 0; max-width: 100%; }

  /* Horizontal, snapped, one verdict at a time — the number is the hero. */
  .results-scroller {
    min-width: 0;
    max-width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter, 1.25rem));
    padding-inline: var(--gutter, 1.25rem);
  }
  .results-scroller::-webkit-scrollbar { display: none; }
  .result-list {
    display: flex;
    gap: 0.9rem;
    width: max-content;
  }
  .result-item {
    scroll-snap-align: start;
    flex: 0 0 74vw;
    max-width: 300px;
    padding: 1.6rem 1.4rem;
    border-bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(31, 52, 118, 0.34), rgba(11, 26, 72, 0.22));
  }
  .result-item:hover { padding-left: 1.4rem; }      /* kill the desktop nudge */
  .result-item::before { display: none; }
  .result-item__figure { font-size: 2.5rem; letter-spacing: -0.02em; }
  .result-item__type { font-size: 0.7rem; letter-spacing: 0.18em; }

  /* One story beat at a time: the first (largest verified) result dominates,
     the rest wait behind a swipe at a clearly smaller scale. */
  .result-item:first-child { flex: 0 0 86vw; max-width: 340px; padding: 2rem 1.6rem; }
  .result-item:first-child .result-item__figure {
    font-size: 3.4rem;
    color: var(--blue-400);
    text-shadow: 0 6px 34px rgba(42, 39, 233, 0.4);
  }

  /* ---------- 7. BACKGROUND DEPTH ---------------------------------------
     An oversized cropped M&B letterform at ~3%, so the navy stops reading as
     a flat rectangle. Decorative only — never a layout box. */
  .results,
  .nofee,
  .finalcta { position: relative; isolation: isolate; overflow: hidden; }
  .results::before,
  .nofee::before,
  .finalcta::before {
    content: "MB";
    position: absolute;
    right: -0.18em;
    bottom: -0.34em;
    z-index: -1;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 46vw;
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.031);
    pointer-events: none;
    user-select: none;
  }
  .finalcta::before { left: -0.2em; right: auto; }

  /* ---------- 5. RESTRAINED MOTION --------------------------------------
     The theme already ships [data-reveal] + .is-in. This only deepens the
     travel a little and staggers grouped children, so a section resolves
     rather than snapping in all at once. No bounce, no parallax, no spin. */
  .js [data-reveal] { transform: translateY(22px); }
  .js .section-head [data-reveal],
  .js [data-reveal] .result-item { transition-delay: 60ms; }

  .js .results-panel .result-item:nth-child(2) { transition-delay: 80ms; }
  .js .results-panel .result-item:nth-child(3) { transition-delay: 160ms; }
  .js .results-panel .result-item:nth-child(4) { transition-delay: 240ms; }

  /* Statistics resolve a touch slower than body content — the number is the
     thing worth waiting a beat for. */
  .js .result-hero__figure,
  .js .result-item__figure { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none; }
  .js .results-panel .result-item { transition-delay: 0ms; }
}

/* ==========================================================================
   PASS 2 — hero composition, attorney editorial
   Nothing is hidden and nothing is injected: every element below is the
   theme's own server-rendered markup, re-weighted for a 390px screen.
   ========================================================================== */
@media (max-width: 767px) {

  /* ---------- 1. THE HERO LOCKUP ----------------------------------------
     Rebuilt as a single composed result statement rather than stacked rows.
     DOM order is unchanged (SEO + the h1 aria-label reading order intact);
     the composition is achieved with flex ordering and alignment:

         PROVEN RESULTS FOR INJURED CLIENTS   <- eyebrow, left
         Over                                  <- silver, left
         $150 Million                          <- dominant, full bleed
                            Won                <- offset right, tucked up
         IN JUDGMENTS AND SETTLEMENTS          <- small, tied to the number
         Win With the Firm...                  <- compact
         [ GET YOUR FREE CASE REVIEW -> ]      <- close beneath
     -------------------------------------------------------------------- */
  /* The theme pads the hero by header + 7rem AND centres it in a 100svh box,
     so the lockup was pushed down twice. Top-align it and cut the padding —
     this is the single biggest source of the dead space under the header. */
  /* Direction change (client, Pass 3): the hero should breathe, not fit one
     viewport. Generous top gap, larger internal rhythm, tall bottom margin —
     the credibility ribbon arrives on the first scroll. */
  /* Proportional reference: A&I first screen. Eyebrow starts close to the
     header; the ribbon begins right after the disclaimer. The whole hero —
     header, lockup, statement, CTA, dock — fits one iPhone viewport. */
  .hero {
    align-items: flex-start;
    min-height: 0;
    padding-top: calc(var(--header-h) + 1.4rem);
    padding-bottom: 1.75rem;
  }

  .hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;      /* was centre — this is what buried it */
    min-height: 0;                    /* was 78vh */
    padding-block: 1.25rem 1.75rem;   /* ~55% less dead space under the header */
  }

  .hero-title {
    /* 14.6vw ran the number to the screen edges; 13vw contains the whole
       lockup with clear margins, like the reference's $25 Billion. */
    --hero-size: clamp(2.4rem, 13vw, 3.5rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 1.15rem;
    text-align: left;
    line-height: 0.88;
  }
  .hero-word { letter-spacing: -0.035em; }

  /* line A holds [Over, eyebrow] — reverse puts the eyebrow above the word. */
  .hero-line--a {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.5rem;
    /* Compositional rule running from beside "Over" to the right edge —
       painted, not structural, so the split-word markup stays untouched. */
    background: linear-gradient(rgba(76, 74, 240, 0.65), rgba(76, 74, 240, 0.65))
                no-repeat right bottom 0.95rem;
    background-size: 52% 1px;
  }
  /* The number owns the screen — with clear air above it so the three
     words read as deliberate beats, not one overlapping graphic. */
  .hero-line--b { margin-top: 0.18em; }
  .hero-word--blue { font-size: 1.06em; }

  /* line C holds [meta, Won] — reverse puts Won first, then the supporting
     line. Won is pushed right and pulled up so it tucks into the number's
     shoulder instead of reading as another centred row. */
  .hero-line--c {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.35rem;
    margin-top: -0.16em;
  }
  .hero-line--c .hero-word {
    align-self: flex-end;
    /* Tucked into the number's lower-right corner: nudged left off the edge
       and pulled up so it attaches rather than floats. */
    margin-right: 0.12em;
    margin-top: 0.25em;
  }
  .hero-line--c .hero-meta { align-self: flex-start; width: 64%; }

  .hero-meta { flex: 0 0 auto; width: auto; max-width: 100%; }
  /* main.js measures each meta line and writes an inline letter-spacing to
     justify it to the column; on a 390px column that stretches the eyebrow
     into a full-width band. Fixed tracking instead. */
  .hero-meta__text {
    letter-spacing: 0.22em !important;
    font-size: 0.58rem;
    white-space: normal;
    color: var(--grey-400);
  }
  .hero-meta--under, .hero-meta--over { border-color: rgba(76, 74, 240, 0.85); }
  .hero-meta--under .hero-meta__text { padding-bottom: 0.5em; }
  .hero-meta--over  .hero-meta__text { padding-top: 0.5em; }

  /* Compact supporting statement, sitting close under the result. */
  .hero-tag {
    max-width: 24ch;
    margin: 0 auto 1.35rem;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--grey-400);
    text-align: center;
  }
  .hero-tag .hero-tag__b {
    display: block;
    color: var(--white);
    font-weight: 700;
  }

  /* One dominant CTA, close to the copy. */
  /* The theme gives .hero-actions margin-bottom:2.75rem for the proof row
     that no longer follows it on mobile — that was the 44px gap between the
     CTA and the disclaimer. */
  .hero-actions { display: block; margin-bottom: 0; }
  .hero-actions .btn--primary {
    display: flex;
    width: 100%;
    min-height: 58px;
    border-radius: 12px;
    font-size: 0.8rem;
    background: var(--white);
    border-color: var(--white);
    color: var(--blue-500);
    justify-content: space-between;
    padding-inline: 1.5rem;
  }
  .hero-actions .btn--primary::after { content: none; }   /* theme hover sweep */
  .hero-actions .btn--primary::before {
    content: "";
    order: 2;
    flex: none;
    width: 22px; height: 12px;
    background: no-repeat center/contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12' fill='none' stroke='%232a27e9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 6h24M19 1l5 5-5 5'/%3E%3C/svg%3E");
  }
  /* Call has its own column in the sticky bar. */
  .hero-actions .btn--ghost { display: none; }

  /* Credibility + disclaimer stay in the page but drop out of the lockup. */
  /* The proof row is a second visual section after the CTA — it moves into
     the next section's story (Pass 3). Hidden on mobile only; desktop keeps it. */
  /* .hero-proof / .hero-disclaimer are restored below (mobile UX brief 04). */
  /* Subtlety via colour alpha, NOT opacity — the reveal system forces
     opacity:1 on .is-in and would override it. Margin clamped because the
     reveal offset was opening a gap under the CTA. */
  /* Removed from the mobile hero per direction (desktop keeps it; the full
     disclaimer also remains in the Case Results section, so the results
     claim is still accompanied on-page). */

  .hero-scroll { display: none; }

  /* ---------- CASE RESULTS: headline clip + disclaimer ------------------
     Each split word is an overflow:hidden box with 0.06em side padding; the
     italic face's overhang on "l" exceeds that at this size and gets shaved.
     Extra right padding gives the overhang room; the negative margin hands
     most of it back so word spacing looks unchanged. Mobile only. */
  /* Disclaimer out of the mobile results section per direction — the same
     sentence remains in the site footer on every page, and desktop keeps
     this one. Collapsing it pulls SELECTED RESULTS up naturally. */
  .results .legal-note { display: none; }

  /* ---------- 9. COPY DENSITY -------------------------------------------
     The intro's second and third paragraphs (including every SEO practice-
     area link) live in <details class="mb-more" open> — server-rendered in
     full, collapsed here by mdock.js. Summary reads as a quiet text action. */
  .mb-more summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 1rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue-400);
    cursor: pointer;
  }
  .mb-more summary::-webkit-details-marker { display: none; }
  .mb-more summary::after {
    content: "";
    width: 6px; height: 6px;
    border-right: 1.6px solid var(--blue-400);
    border-bottom: 1.6px solid var(--blue-400);
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.25s var(--ease);
  }
  .mb-more[open] summary::after { transform: rotate(225deg); }
  .mb-more[open] summary { margin-bottom: 0.5rem; }

  /* ---------- REVIEWS: one voice at a time -------------------------------
     Five stacked review cards were 2.2 viewports of text. Same markup, now a
     snapped horizontal read — one review per beat. */
  .reviews-grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 0.9rem;
    margin-inline: calc(-1 * var(--gutter, 1.25rem));
    padding-inline: var(--gutter, 1.25rem);
    padding-bottom: 0.5rem;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .reviews-grid > * {
    flex: 0 0 84vw;
    max-width: 330px;
    scroll-snap-align: start;
  }

  /* ---------- PRACTICE AREAS: full-width story rows ----------------------
     Six 195x200 tiles read as a cramped grid. One area per row, image as
     backdrop, title carrying the row — the reference's category-list rhythm. */
  /* sub-pixel rounding pushed the rows 1px wide at 375 — clip the section */
  .practice { overflow-x: clip; }
  .practice-grid { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 100%; }
  .pa { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .pa-link {
    display: flex;
    align-items: center;
    /* the theme hard-sets height:200px at this width — rows, not tiles */
    height: auto;
    min-height: 108px;
    padding: 1.1rem 1.25rem;
  }
  .pa-text { display: none; }          /* full copy lives on the linked page */
  .pa-title {
    font-size: 1.35rem;
    line-height: 1.05;
  }
  .pa-body {
    /* the theme pins this as an absolute bottom overlay — as a row it must
       flow, or the title clips against the fixed-height link box */
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    width: 100%;
    padding: 0;
    text-align: left;
  }
  .pa-title { text-align: left; }
  /* one-line title; the em is butted against the first word in the markup
     (Car<em>Accident</em>), so inline needs its own word gap */
  .pa-title em { display: inline; }

  /* ---------- 6. ATTORNEYS AS EDITORIAL ---------------------------------
     Real markup is .intro-media > figure.attorney-card > img + figcaption
     (strong = name, span = role). Two small side-by-side cards become one
     attorney per screen: tall portrait, name carrying the section. */
  .intro-media {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.75rem, 10vw, 4rem);
    margin-top: clamp(2.5rem, 9vw, 3.5rem);
  }
  .attorney-card,
  .attorney-card--offset {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    /* the desktop offset + parallax nudge fight a single-column stack */
    transform: none !important;
  }
  .attorney-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
    border-radius: 18px;
  }
  .attorney-card figcaption {
    margin-top: 1.15rem;
    padding: 0;
    text-align: left;
  }
  .attorney-card figcaption strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.15rem;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--white);
  }
  .attorney-card figcaption span {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.64rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--blue-400);
  }

  /* Parallax on a stacked column reads as drift, not depth. */
  [data-parallax] { transform: none !important; }
}

/* Clears the whole floating cluster: 14 + 62 (dock) + 14 + 64 (call) + 18 +
   46 (top) = 218px. mobile.css is enqueued last, so this is what lands. */
@media (max-width: 767px) {
  /* Reserve = dock's real viewport footprint (bar + its bottom inset), so the
     footer's last line clears it at full scroll. Measured 112px at 390x844. */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}

/* ==========================================================================
   Trust band — the hero proof points, re-homed as a dedicated section
   (server-rendered in front-page.php). Three quiet columns at every width.
   ========================================================================== */
.trustband {
  padding-block: clamp(2.75rem, 7vw, 4.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.trustband-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  text-align: center;
}
.trustband-item svg {
  width: 34px;
  height: 34px;
  margin: 0 auto 0.8rem;
  display: block;
  fill: none;
  stroke: var(--blue-400);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trustband-item h3 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.45rem;
}
.trustband-item p {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--grey-500);
  max-width: 22ch;
  margin-inline: auto;
}
@media (max-width: 480px) {
  .trustband-item h3 { font-size: 0.66rem; letter-spacing: 0.08em; }
  .trustband-item p { font-size: 0.68rem; }
  .trustband-item svg { width: 28px; height: 28px; }
}

/* ==========================================================================
   Header logo — the theme clamps it to 150px on phones, which made the
   wordmark barely readable. Raised at every width. (All-width rule.)
   ========================================================================== */
.header-logo img { width: clamp(195px, 15vw, 250px); }

/* ==========================================================================
   Mobile menu overlay — true viewport coverage from any scroll position.
   The nav is portaled to <body> by mdock.js; these rules make the overlay
   itself own the full screen. Applies at the theme's 1150px drawer breakpoint.
   ========================================================================== */
@media (max-width: 1150px) {
  body > .header-nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;      /* Safari URL-bar-aware */
    z-index: 95;         /* above all content, below the 100 header bar */
    background: var(--navy-950);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* The header bar must stay on screen over the open menu — it holds the
     logo and the close X. Never let hide-on-scroll take it away mid-menu,
     and never let its transform re-capture anything. */
  body.is-locked .site-header,
  body.is-locked .site-header.is-hidden { transform: none !important; }
}

/* ==========================================================================
   Drawer-only containers are EXCLUDED from every layout by default and opted
   in only inside the portaled mobile drawer. The conversion block lives in
   #primaryNav, which is an inline header row on desktop — without this base
   rule it rendered as raw flow across the desktop hero.
   ========================================================================== */
.mb-nav-cta { display: none; }

/* ==========================================================================
   Mobile menu refinement — premium pass on the full-screen drawer.
   Navy + white with selective blue accents; three clear levels:
     L1 primary nav > L2 blue category labels > L3 individual pages.
   ========================================================================== */
@media (max-width: 1150px) {

  /* 1. logo presence while the menu is open (+23%) */
  body.is-locked .header-logo img { width: clamp(240px, 62vw, 265px); }

  /* 2. first item up ~44px: 2.5rem pad -> 0.5rem, plus tighter first row */
  body > .header-nav { padding-top: calc(var(--header-h) + 0.5rem); }
  .header-nav .nav-list > li:first-child > a { padding-top: 0.7rem; }

  /* 3. primary navigation is the dominant layer */
  .header-nav .nav-list > li > a,
  .header-nav .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.05rem 0;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--white);
  }

  /* 4. + / − accordion control on Practice Areas (whole row tappable) */
  .header-nav .nav-caret { display: none; }
  .header-nav .nav-toggle::after {
    content: "+";
    display: block !important;
    /* the theme uses this ::after as its absolute underline animation —
       static, or the glyph paints as a full-width sliver at the row edge */
    position: static;
    inset: auto;
    width: auto; height: auto;
    border: 0;
    background: none;
    transform: none;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1;
    color: var(--blue-400);
  }
  .header-nav .nav-toggle[aria-expanded="true"]::after { content: "\2212"; }

  /* Level 2 — categories: keep the blue uppercase language, add +/− */
  .header-nav .mega { gap: 0; }
  .header-nav .mega-col { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .header-nav .mega-col:last-of-type { border-bottom: 0; }
  .header-nav .mega-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 0;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .header-nav .mega-title::after {
    content: "+";
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1;
    color: var(--blue-400);
  }
  .header-nav .mega-col.is-open .mega-title::after { content: "\2212"; }

  /* Level 3 — pages, revealed quickly and quietly */
  .header-nav .mega-col ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s var(--ease);
  }
  .header-nav .mega-col.is-open ul { max-height: 430px; }
  .header-nav .mega-col ul a {
    display: block;
    padding: 0.55rem 0 0.55rem 0.1rem;
    font-size: 1rem;
    color: var(--grey-300);
  }
  .header-nav .submenu { padding-block: 0 0.75rem; }

  /* 5+6. conversion area — distinct from navigation, quietly primary.
     Scoped to body > .header-nav: it can only ever display inside the
     portaled drawer, never in the desktop header slot. */
  .header-nav li.mb-replaced { display: none; }
  body > .header-nav .mb-nav-cta { display: block; }
  .mb-nav-cta {
    margin-top: 1.9rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .mb-nav-cta__main {
    display: block;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--white);
  }
  .mb-nav-cta__sub {
    margin: 0.4rem 0 1.1rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--grey-500);
  }
  .mb-nav-cta__call {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue-400);
  }
  .mb-nav-quick {
    display: flex;
    gap: 1.6rem;
    margin-top: 1.5rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  .mb-nav-quick a,
  .mb-nav-quick button {
    background: none;
    border: 0;
    padding: 0.35rem 0;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-300);
    cursor: pointer;
  }
  .mb-nav-quick .is-call { color: var(--blue-400); font-weight: 700; }
  .mb-nav-quick [data-mb-chat="pending"] { cursor: default; }
}

/* ==========================================================================
   Attorney cards — whole card clickable (all widths).
   Stretched-link overlay keeps figure/figcaption valid; restrained hover on
   pointer devices only: slight image lift + name accent. No buttons.
   ========================================================================== */
.attorney-card { position: relative; overflow: hidden; }
.attorney-card__link { position: absolute; inset: 0; z-index: 2; }
.attorney-card img {
  transition: transform 0.55s var(--ease), filter 0.55s var(--ease);
}
.attorney-card figcaption strong { transition: color 0.3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .attorney-card:hover img { transform: scale(1.025); filter: brightness(1.07); }
  .attorney-card:hover figcaption strong { color: var(--blue-400); }
}
.attorney-card__link:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: 18px;
}

/* ==========================================================================
   MEET THE LAWYERS — full-page redesign (all widths)
   Attorney hero -> Spencer -> Terri (flipped) -> legacy -> video -> finale.
   Uses only theme tokens; the theme's reveal/facade systems style themselves.
   ========================================================================== */

/* ---------- Attorney hero ---------- */
.mtl-hero .eyebrow,
.mtl-legacy .eyebrow { color: var(--blue-400); }

.mtl-hero {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)) clamp(3.5rem, 7vw, 6.5rem);
  background:
    radial-gradient(60% 80% at 78% 30%, rgba(42, 39, 233, 0.14), transparent 70%),
    linear-gradient(180deg, var(--navy-900), var(--navy-950) 78%);
  overflow: clip;
}
.mtl-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.mtl-hero__copy .section-title { max-width: 14ch; text-wrap: balance; }
.mtl-hero__lede {
  max-width: 42ch;
  margin: 1.4rem 0 2.2rem;
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--grey-400);
}
/* The two portraits as a staggered duo, grounded on a shared light plinth. */
.mtl-hero__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(320px, 34vw, 480px);
}
.mtl-hero__media::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(76, 74, 240, 0.10), rgba(76, 74, 240, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.mtl-hero__media img {
  position: relative;
  width: auto;
  height: clamp(300px, 32vw, 460px);
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 24px 40px rgba(5, 12, 34, 0.55));
}
.mtl-hero__media img:first-child { margin-right: -7%; z-index: 2; }
.mtl-hero__media img:last-child  { height: clamp(270px, 29vw, 420px); }

/* ---------- Attorney features ---------- */
.mtl-attorney { padding-block: clamp(4.5rem, 9vw, 8rem); }
.mtl-attorney + .mtl-attorney { padding-top: 0; }
.mtl-attorney__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
/* Terri: photo right on desktop. Order moves the MEDIA, never the grid box. */
.mtl-attorney--flip .mtl-attorney__media { order: 2; }
.mtl-attorney__media {
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(200deg, var(--navy-800), var(--navy-900) 80%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem) 0;
  overflow: clip;
}
.mtl-attorney__media img {
  width: min(100%, 360px);
  height: auto;
  filter: drop-shadow(0 18px 32px rgba(5, 12, 34, 0.5));
}
.mtl-attorney__name {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
}
.mtl-attorney__role {
  margin: 0.7rem 0 0;
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--blue-400);
}
.mtl-attorney__intro {
  margin: 1.5rem 0 0;
  max-width: 52ch;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--grey-400);
}
.mtl-creds {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}
.mtl-creds li {
  border-left: 2px solid var(--blue-500);
  padding-left: 1rem;
}
.mtl-creds strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.05;
  font-weight: 600;
  color: var(--white);
}
.mtl-creds span {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--grey-500);
}
/* Full biography — server-rendered for SEO, closed by default for pacing. */
.mtl-bio {
  margin-top: 2.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mtl-bio summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0.1rem;
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--white);
}
.mtl-bio summary::-webkit-details-marker { display: none; }
.mtl-bio summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--blue-400);
  transition: transform 0.3s var(--ease);
}
.mtl-bio[open] summary::after { content: "\2212"; }
.mtl-bio summary:hover { color: var(--blue-400); }
.mtl-bio p {
  margin: 0 0 1.1rem;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--grey-400);
}
.mtl-bio p:last-of-type { padding-bottom: 1.4rem; margin-bottom: 0; }
.mtl-attorney__cta { margin-top: 2.2rem; }

/* ---------- Legacy — memorial register, deliberately quieter ---------- */
.mtl-legacy {
  padding-block: clamp(5rem, 10vw, 9rem);
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(76, 74, 240, 0.09), transparent 70%),
    var(--navy-950);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.mtl-legacy__inner { max-width: 46rem; margin-inline: auto; }
.mtl-legacy__name {
  font-family: var(--font-display);
  font-size: var(--step-3);
  text-wrap: balance;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
}
.mtl-legacy__years {
  margin: 0.9rem 0 0;
  font-size: var(--step--1);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.mtl-legacy__line {
  margin: 1.8rem auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--blue-400);
}
.mtl-legacy__story {
  margin: 1.1rem auto 0;
  max-width: 52ch;
  line-height: 1.75;
  color: var(--grey-400);
}
.mtl-legacy__card {
  display: inline-block;
  margin-top: 2.6rem;
  padding: 1.6rem 2.4rem;
  border: 1px solid rgba(76, 74, 240, 0.45);
  border-radius: var(--radius);
  background: rgba(76, 74, 240, 0.06);
}
.mtl-legacy__card strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1;
  color: var(--white);
}
.mtl-legacy__card span {
  display: block;
  margin-top: 0.6rem;
  max-width: 30ch;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--grey-500);
}

/* ---------- Video + finale ---------- */
.mtl-video { padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3.5rem, 7vw, 6rem); }
.mtl-video .section-head { margin-inline: auto; }
.mtl-final {
  padding-block: clamp(4rem, 8vw, 7rem) clamp(4.5rem, 9vw, 7.5rem);
  text-align: center;
}
.mtl-final .section-title { margin-inline: auto; }
.mtl-final__cta { margin-top: 2.4rem; }
.mtl-final__note {
  margin: 1.1rem 0 0;
  font-size: 0.9rem;
  color: var(--grey-500);
}
.mtl-final .legal-note { margin-top: 2.6rem; margin-inline: auto; }

/* ---------- Meet the Lawyers, mobile ---------- */
@media (max-width: 767px) {
  /* 1. Hero begins below the full header with real breathing room, and the
     initial composition is budgeted to end before the fixed action bar. */
  .mtl-hero {
    text-align: center;
    padding-top: calc(var(--header-h) + 2.25rem);
    padding-bottom: 1.25rem;
  }
  .mtl-hero__grid { grid-template-columns: 1fr; gap: 1.4rem; }

  /* 2. Headline ~12% down from the section scale; 12ch measure lands the
     Experience You / Can Trust. // People You Can / Talk To. break. */
  .mtl-hero__copy .section-title {
    font-size: clamp(1.95rem, 9.4vw, 2.25rem);
    max-width: 12ch;
    margin-inline: auto;
  }

  /* 7. Tighter supporting line, one comfortable row of measure. */
  .mtl-hero__lede {
    margin: 1.1rem auto 1.6rem;
    max-width: 28ch;
    font-size: 1.02rem;
  }

  /* 8. CTA at content width, 48px touch height. */
  .mtl-hero__copy .btn { padding: 0.92em 1.7em; min-height: 48px; }

  /* 5. Portrait pulled up under the CTA and enlarged so copy + portrait read
     as one composition; duo keeps its stagger. */
  .mtl-hero__media { min-height: 0; }
  .mtl-hero__media img { height: clamp(280px, 72vw, 350px); }
  .mtl-hero__media img:last-child { height: clamp(250px, 64vw, 312px); }

  /* Stack order: portrait -> name -> intro -> creds -> CTA */
  .mtl-attorney__grid { grid-template-columns: 1fr; gap: 2rem; }
  .mtl-attorney--flip .mtl-attorney__media { order: 0; }
  .mtl-attorney__media { padding-top: 1.4rem; }
  .mtl-attorney__media img { width: min(78%, 300px); }

  /* Creds read as rows on a narrow screen, not squeezed columns. */
  .mtl-creds { grid-template-columns: 1fr; gap: 1.1rem; }
  .mtl-creds li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0.8rem; }
  .mtl-creds span { margin-top: 0; }

  .mtl-attorney__cta,
  .mtl-final__cta { min-height: 44px; }
  .mtl-attorney__cta { display: block; text-align: center; }

  .mtl-legacy__name { font-size: 2.2rem; }
  .mtl-legacy__card { display: block; padding: 1.4rem 1.2rem; }
  .mtl-legacy__card span { margin-inline: auto; }
}

/* ==========================================================================
   PRACTICE AREAS HUB — categorized navigation (all widths)
   ========================================================================== */
.practice-hub { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem); }
.hub-cat + .hub-cat { margin-top: clamp(3rem, 6vw, 4.5rem); }
.hub-cat__label {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--blue-400);
}
.hub-cat__label::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.12); }
.hub-fit { margin-top: clamp(4rem, 8vw, 6rem); text-align: center; }
.hub-fit .section-title { margin-inline: auto; }
.hub-fit__copy { margin: 1.2rem auto 2rem; max-width: 40ch; color: var(--grey-400); }
.practice-hub .legal-note { margin-top: 3rem; margin-inline: auto; text-align: center; }

/* Hub cards: long single words (ELECTROCUTION) must fit the 5-up track */
.practice-grid--hub .pa-title { font-size: clamp(0.95rem, 0.72rem + 0.6vw, 1.15rem); }

/* ==========================================================================
   PRACTICE PAGE SECTIONS (pr-*) — six priority pages (all widths)
   Results strip -> Know -> Help -> Attorneys -> FAQ
   ========================================================================== */
.pr { padding-block: clamp(3.5rem, 7vw, 6rem); }
.pr-know, .pr-help, .pr-attys, .pr-faq { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.pr .section-title { margin-bottom: 1.8rem; }

.pr-results__list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.pr-results__list li { border-left: 2px solid var(--blue-500); padding-left: 1.1rem; min-width: 0; }
.pr-results__list strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
  line-height: 1;
  color: var(--white);
  white-space: nowrap;
}
.pr-results__list span {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: 1.5;
  color: var(--grey-500);
}
.pr-results__note { margin-top: 1.8rem; font-size: 0.85rem; color: var(--grey-500); max-width: 60ch; }
.pr-results__note a { color: var(--blue-400); }

.pr-know p { max-width: 62ch; line-height: 1.75; color: var(--grey-400); margin: 0 0 1.2rem; }

.pr-help__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.pr-help__list li { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 1.1rem; }
.pr-help__list strong { display: block; color: var(--white); font-size: 1.05rem; margin-bottom: 0.5rem; }
.pr-help__list span { display: block; font-size: 0.95rem; line-height: 1.65; color: var(--grey-500); }
.pr-cta { margin-top: 2.6rem; display: flex; gap: 1rem; flex-wrap: wrap; }

.pr-attys__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 760px;
}
.pr-atty {
  display: block;
  text-decoration: none;
  background: linear-gradient(200deg, var(--navy-800), var(--navy-900) 80%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  overflow: clip;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pr-atty img { width: 100%; height: clamp(200px, 30vw, 320px); object-fit: cover; object-position: top center; display: block; }
.pr-atty__body { display: block; padding: 1rem 1.2rem 1.2rem; }
.pr-atty__body strong { display: block; font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + 0.8vw, 1.4rem); color: var(--white); }
.pr-atty__body span { display: block; margin-top: 0.3rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--blue-400); }
@media (hover: hover) and (pointer: fine) {
  .pr-atty:hover { border-color: rgba(76, 74, 240, 0.55); box-shadow: 0 12px 32px rgba(5, 12, 34, 0.5); }
}

.pr-faq__item { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.pr-faq__item:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.pr-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0.1rem;
  color: var(--white);
  font-size: 1.02rem;
  font-weight: 600;
}
.pr-faq__item summary::-webkit-details-marker { display: none; }
.pr-faq__item summary::after { content: "+"; color: var(--blue-400); font-size: 1.2rem; flex-shrink: 0; }
.pr-faq__item[open] summary::after { content: "\2212"; }
.pr-faq__item summary:hover { color: var(--blue-400); }
.pr-faq__item p { margin: 0; padding: 0 0.1rem 1.3rem; max-width: 62ch; line-height: 1.7; color: var(--grey-400); }
.pr .legal-note { margin-top: 3rem; }

@media (max-width: 767px) {
  .pr-results__list { grid-template-columns: 1fr; gap: 1.4rem; }
  .pr-results__list strong { font-size: 2.2rem; }
  .pr-atty img { height: clamp(170px, 46vw, 220px); }
}

/* Case-results filters — instant, client-side */
.rc-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2rem 0 0.4rem; }
.rc-filter {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.5em 1.15em;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--grey-400);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.rc-filter:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
.rc-filter.is-active { background: var(--blue-500); border-color: var(--blue-500); color: var(--white); }
.rc-hidden { display: none !important; }

/* Verified Google-rating header + outbound reviews link */
.reviews-rating strong { color: var(--white); font-size: 1.15em; }
.reviews-google { text-align: center; margin-top: 2.4rem; }

/* Pre-reveal states (translate3d(46px)) can poke past the viewport at tablet+
   widths before the visitor scrolls, flashing a horizontal scrollbar. clip
   (not hidden) suppresses it without creating a scroll container, so sticky
   elements keep working. */
html { overflow-x: clip; }


/* ==========================================================================
   OVERSIZED SERIF HEADLINES — sitewide glyph-clearance fix (all widths)
   This lived here while the theme's css/ was not writable. It now lives in
   base.css beside the .word mask it corrects, measured against the font's
   real ink extents, and paired with the yPercent start offset in main.js that
   has to move with it. Kept as a marker so the two are not re-forked.
   ========================================================================== */

/* ==========================================================================
   MOBILE UX PASS — phone-only design system, section compaction and order.
   Everything below is inside (max-width: 767px) except a handful of
   :root token declarations, which are inert until a phone rule reads them.
   Desktop composition, order, spacing and dimensions are untouched.
   ========================================================================== */
@media (max-width: 767px) {

  /* ---------- 1. SPACING + TYPE TOKENS -------------------------------- */
  :root {
    --mux-gutter: 20px;
    --mux-8: 8px;   --mux-12: 12px; --mux-16: 16px; --mux-20: 20px;
    --mux-24: 24px; --mux-32: 32px; --mux-40: 40px; --mux-48: 48px;
    --mux-56: 56px; --mux-64: 64px;
    --gutter: var(--mux-gutter);
  }

  .shell { padding-inline: var(--mux-gutter); }

  /* Section rhythm by IMPORTANCE, not one blanket value.
     The hero keeps its own header offset — a blanket padding-block reset here
     put the headline underneath the fixed header. */
  .intro, .practice, .results, .reviews, .contact,
  .page-body, .pr, .practice-hub, .mtl-attorney, .mtl-video {
    padding-block: var(--mux-56);
  }
  .trustbar, .nofee, .finalcta { padding-block: var(--mux-40); }
  .mtl-legacy { padding-block: var(--mux-56); }

  .section-head { margin-bottom: var(--mux-24); }
  .section-head p, .section-title + p { margin-top: var(--mux-20); }
  p { line-height: 1.65; }
  .page-content p, .pr-know p, .intro p { margin-bottom: var(--mux-20); }

  /* Type floor: nothing below 16px in body copy, 12px in labels. */
  body { font-size: 16px; }
  .legal-note, .pr-results__note, .results .legal-note {
    font-size: 12.5px; line-height: 1.55;
  }
  .eyebrow { letter-spacing: 0.22em; font-size: 11.5px; }

  /* ---------- 2. OVERFLOW SAFETY -------------------------------------- */
  .shell > *, .page-grid > *, .contact-grid > *, .intro-grid > *,
  .pr-help__list > li, .pr-results__list > li, .practice-grid > li,
  .results-cards-grid > li, .reviews-grid > li, .footer-grid > * {
    min-width: 0;
    max-width: 100%;
  }

  /* ---------- 3. CONTROLS --------------------------------------------- */
  .btn { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; }
  .btn--lg, .btn--primary.btn--lg { min-height: 56px; }
  .field input, .field select { min-height: 52px; font-size: 16px; }
  .field textarea { min-height: 128px; font-size: 16px; }
  .contact-form button[type="submit"] { min-height: 56px; }

  /* ---------- 4. HOMEPAGE SECTION ORDER + COMPACTION -------------------
     Order: hero, trust, practice, results, intro(+attorneys), reviews,
     contact, footer. Applied with flex order on <main>; the DOM order still
     reads hero -> trust -> results -> intro -> practice -> reviews -> contact,
     so the only pairs that swap are results<->practice and reviews<->contact
     — adjacent peers whose reading order stays coherent either way. */
  /* The reorder itself is a real DOM move (mobileux.js) rather than CSS
     `order`, so the tab sequence and screen-reader sequence match what is on
     screen. CSS only hides the duplicate conversion blocks: the dock is
     always present and the form carries the same ask 400px later. */
  .home .nofee, .home .finalcta { display: none; }

  /* ---------- 5. TRUST / BADGE STRIP ---------------------------------- */
  .trustbar { padding-block: var(--mux-24); }
  .trustbar .shell { display: flex; gap: var(--mux-16); align-items: flex-start; }
  .trustbar > .shell > * { flex: 1 1 0; min-width: 0; }
  .trustbar svg { width: 22px; height: 22px; }

  /* ---------- 6. PRACTICE AREAS (home): 4 cards, two columns ---------- */
  .home .practice .practice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
  }
  .home .practice .practice-grid > li:nth-child(n + 5) { display: none; }
  .home .practice .pa-link {
    height: 160px;
    border-radius: 13px;
    overflow: hidden;
  }
  /* "WORKERS' COMPENSATION" is the longest single word in the set and was
     overflowing the 2-up card (its line needed 166px in a ~150px card, and the
     card clips). Tracking removed and size at the brief's lower bound; the
     wrap guards stop any future long practice name from clipping instead of
     breaking. */
  /* 16px keeps "COMPENSATION" — the longest word in the set — whole on one
     line inside a 2-up card. At 17px it broke mid-word ("COMPENSATI/ON").
     16px is the brief's stated floor for card titles. overflow-wrap stays as a
     last-resort guard so a future longer practice name breaks instead of
     clipping, but nothing in the current set reaches it. */
  .home .practice .pa-title {
    font-size: 16px;
    letter-spacing: normal;
    max-width: 100%;
  }
  .home .practice .pa-more { font-size: 11.5px; }
  .home .practice .mux-swipe { display: none; }

  /* ---------- 7. CASE RESULTS carousel -------------------------------- */
  .results-scroller {
    display: flex;
    gap: var(--mux-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: var(--mux-gutter);
    margin-inline: calc(-1 * var(--mux-gutter));
    scrollbar-width: none;
  }
  .results-scroller::-webkit-scrollbar { display: none; }
  .results-scroller > * {
    flex: 0 0 auto;
    width: min(78vw, 300px);
    scroll-snap-align: center;
  }
  .results-scroller > *:first-child { width: min(84vw, 340px); }

  /* ---------- 8. ATTORNEY CARDS: two columns, not two full-bleed ------ */
  .intro-media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mux-12);
    max-width: none;
  }
  .intro-media figure { margin: 0; min-width: 0; }
  .intro-media img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; width: 100%; }
  .intro-media figcaption { text-align: left; }
  .intro-media figcaption strong { font-size: 22px; }
  .intro-media figcaption span { font-size: 11.5px; letter-spacing: 0.2em; }

  /* ---------- 9. REVIEWS carousel ------------------------------------- */
  .reviews-grid > * { width: min(84vw, 330px); }
  .mux-clamped blockquote p:not(.review-title) {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mux-clamped.is-expanded blockquote p:not(.review-title) {
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .mux-readmore {
    appearance: none; background: none; border: 0;
    padding: 10px 0 0; min-height: 44px;
    font-family: inherit; font-size: 13px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--blue-400); cursor: pointer;
  }

  /* ---------- 10. CONTACT: form-first, no duplicate proof ------------- */
  .contact-photo { display: none; }
  .contact .contact-strip { display: none; }
  .contact-grid { gap: var(--mux-24); }
  .contact-form { padding: var(--mux-20) 0 0; border-radius: 0; }
  .field { margin-bottom: var(--mux-16); }
  .mux-reassure {
    margin: 0 0 var(--mux-16);
    font-size: 13.5px; line-height: 1.55;
    color: var(--grey-500);
  }

  /* ---------- 11. HUB accordions -------------------------------------- */
  .hub-cat + .hub-cat { margin-top: var(--mux-12); }
  .hub-cat { border-top: 1px solid rgba(255,255,255,0.12); }
  .hub-cat:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.12); }
  .hub-cat__toggle {
    appearance: none; background: none; border: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 66px; padding: 0 2px;
    font-family: inherit; color: var(--white); cursor: pointer; text-align: left;
  }
  .hub-cat__name {
    font-family: var(--font-body); font-size: 19px; font-weight: 600;
    letter-spacing: 0.02em;
  }
  .hub-cat__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
    background: rgba(76,74,240,0.16); color: var(--blue-400);
    font-size: 12px; font-weight: 600;
  }
  .hub-cat__toggle::after {
    content: "+"; margin-left: auto; padding-left: 12px;
    font-size: 20px; font-weight: 400; color: var(--blue-400); line-height: 1;
  }
  .hub-cat.is-open .hub-cat__toggle::after { content: "\2212"; }
  .hub-cat .practice-grid { display: none; }
  .hub-cat.is-open .practice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 var(--mux-16);
  }
  /* Rows, not image tiles: a background photo per service is noise here. */
  .hub-cat .pa { border-top: 1px solid rgba(255,255,255,0.08); }
  .hub-cat .pa-img { display: none; }
  .hub-cat .pa-link {
    height: auto; min-height: 58px;
    display: flex; align-items: center;
    padding: 0 2px;
  }
  /* The theme's .pa-body is a COLUMN stack (title over "read more"), which is
     why the row rendered as centred title + chevron beneath. A service row is
     a single line: label left, chevron right. */
  .hub-cat .pa-body {
    position: static;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    gap: var(--mux-12);
  }
  .hub-cat .pa-title { flex: 1 1 auto; text-align: left; min-width: 0; }
  .hub-cat .pa-title {
    font-family: var(--font-body); font-size: 16px; font-weight: 400;
    letter-spacing: 0; text-transform: none; color: var(--white);
  }
  /* content:none removes the generated rule reliably; display:none on a
     pseudo-element with a set width still reserves its box in some engines. */
  .hub-cat .pa-title::after { content: none; }
  /* font-size:0 on the parent collapses the inherited line-height, so the
     chevron rendered 1px tall. The pseudo-element sets both explicitly. */
  .hub-cat .pa-more {
    margin-left: auto;
    font-size: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }
  /* The theme paints .pa-more::after as a 1px underline bar (fixed height +
     background). Swapping only `content` put the chevron inside that 1px box,
     so the glyph was invisible — the box itself has to be reset too. */
  .hub-cat .pa-more::after {
    content: "\203A";
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    font-family: var(--font-body);
    font-size: 22px;
    line-height: 1;
    color: var(--blue-400);
  }
  .hub-cat .pa-more::before { content: none; }
  .practice-hub .hub-fit { margin-top: var(--mux-40); }

  /* ---------- 12. CASE RESULTS page ----------------------------------- */
  .rc-filters {
    display: flex; flex-wrap: nowrap; gap: var(--mux-8);
    overflow-x: auto; scrollbar-width: none;
    padding-inline: var(--mux-gutter);
    margin-inline: calc(-1 * var(--mux-gutter));
    scroll-padding-inline: var(--mux-gutter);
  }
  .rc-filters::-webkit-scrollbar { display: none; }
  .rc-filter { flex: 0 0 auto; min-height: 44px; }
  .results-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mux-12);
  }
  .results-cards-grid > .rc { min-height: 124px; padding: var(--mux-16); }
  .results-cards-grid .rc-amount { font-size: 24px; }
  .results-cards-grid .rc-type { font-size: 11.5px; }
  .rc.mux-past { display: none !important; }
  .mux-more-bar {
    display: flex; flex-direction: column; align-items: center; gap: var(--mux-12);
    margin-top: var(--mux-24);
  }
  .mux-count { margin: 0; font-size: 13px; color: var(--grey-500); }
  .mux-loadmore { min-height: 50px; }

  /* ---------- 13. DISCLOSURES (shared) -------------------------------- */
  .mux-more {
    border-top: 1px solid rgba(255,255,255,0.12);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    margin-block: var(--mux-16);
  }
  .mux-more + .mux-more { margin-top: calc(-1 * var(--mux-16) + 1px); border-top: 0; }
  .mux-more > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 54px;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--white);
  }
  .mux-more > summary::-webkit-details-marker { display: none; }
  .mux-more > summary::after {
    content: "+"; color: var(--blue-400); font-size: 20px; line-height: 1;
  }
  .mux-more[open] > summary::after { content: "\2212"; }
  .mux-more__body { padding-bottom: var(--mux-16); }
  .mux-more__body ul { list-style: none; margin: 0; padding: 0; }
  .mux-more__body li a {
    display: flex; align-items: center; min-height: 44px;
    font-size: 15.5px; color: var(--grey-300); text-decoration: none;
  }
  .mux-more--aside .aside-photo, .page-aside .aside-photo { display: none; }

  /* ---------- 14. CAROUSEL AFFORDANCE --------------------------------- */
  .mux-swipe {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: var(--mux-12);
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--grey-500);
  }
  .mux-swipe__pos { color: var(--grey-400); font-variant-numeric: tabular-nums; }

  /* ---------- 15. MOTION ---------------------------------------------- */
  .mux-native-scroll, .mux-native-scroll body {
    height: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  [data-parallax] { transform: none !important; }
}

/* Small phones: tighter gutter, never smaller type. */
@media (max-width: 374px) {
  :root { --mux-gutter: 17px; }
  /* Two columns at 320 leaves ~135px per card, which cannot hold
     "COMPENSATION" at any size at or above the 16px floor. The brief's stated
     alternative for this width is compact full-width rows. */
  .home .practice .practice-grid { grid-template-columns: 1fr; gap: 10px; }
  .home .practice .pa-link { height: 92px; }
  .home .practice .pa-title { font-size: 17px; }
  .results-cards-grid { grid-template-columns: 1fr; }
  .results-cards-grid > .rc { min-height: 90px; }
}

/* Landscape phones: the hero must not consume the whole viewport. */
@media (max-width: 932px) and (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 0; padding-bottom: var(--mux-32); }
  .mdock { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   MOBILE UX PASS — hero budget + render safety (phones only)
   ========================================================================== */
@media (max-width: 767px) {
  /* Height budget: header + hero lands ~555px, inside the 520-620 target, so
     the credibility ribbon clears the fold and the section after it is cut —
     which is what tells the visitor there is more. The top pad is measured
     from the real header height, never assumed. */
  .hero {
    padding-top: calc(var(--header-h) + 2rem);
    padding-bottom: var(--mux-40);
    min-height: 0;
  }
  .hero-inner { gap: var(--mux-16); }
  .hero-actions { margin-top: var(--mux-20); margin-bottom: 0; }
  .hero-actions .btn { width: auto; min-height: 56px; padding-inline: 1.8em; }

  /* ESSENTIAL COPY IS NEVER HIDDEN BEHIND JS.
     The reveal system starts every [data-reveal] at opacity 0 and the split
     headline at yPercent 150 — if the bundle is slow or fails, the hero is a
     blank navy box. Above the fold the entrance is a short, cheap fade that
     starts from VISIBLE, so a failed script costs an animation, not content. */
  .js .hero [data-reveal],
  .js .hero .hero-title,
  .js .hero .hero-tag,
  .js .hero .hero-actions {
    opacity: 1 !important;
    transform: none !important;
  }
  .js .hero [data-split-lines] .word > span { transform: none !important; }
  .hero [data-reveal] { transition-duration: 380ms; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .hero [data-reveal], .hero [data-split-lines] .word > span {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   MOBILE UX PASS 2 — header, footer service areas, target sizing
   ========================================================================== */
@media (max-width: 767px) {
  /* ---------- HEADER --------------------------------------------------
     The logo was rendering at 103x19 — an SVG with a width attribute the
     mobile sheet never overrode, so it read as a caption rather than the
     firm's mark, and it fell under the 44px target floor. */
  .site-header .header-utility { display: none; }        /* desktop utility bar */
  .site-header .header-cta { display: none; }            /* desktop phone + button */

  .header-bar {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mux-12);
    padding-inline: var(--mux-gutter);
  }
  .header-logo {
    display: flex;
    align-items: center;
    min-height: 44px;
    flex: 0 1 auto;
    min-width: 0;
  }
  .header-logo img {
    width: clamp(160px, 46vw, 182px) !important;
    height: auto;
    max-width: 100%;
  }
  /* The burger keeps its own 46px box and never shares space with the mark.
     justify-content:center alone stacks the three bars 2px apart — they merge
     into one thick line. The gap is what makes it read as a menu icon. */
  .burger, .nav-toggle {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .burger > span { display: block; width: 26px; height: 2px; margin: 0; }
  /* Opaque after scroll so headline ink never shows through the bar. */
  .site-header.is-stuck, .site-header.is-scrolled {
    background: rgba(5, 12, 34, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  /* ---------- FOOTER: service areas into the disclosure ---------------
     Twelve 26px-tall links in a wrapped bag were both the smallest targets
     on the site and a large part of the footer's height. */
  .footer-areas.mux-collapsed { display: block; }
  .footer-areas .mux-more { margin-block: 0; border-top: 0; }
  .footer-areas .mux-more__body {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--mux-16);
  }
  .footer-areas .mux-more__body a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 15.5px;
  }
  .footer-phone { min-height: 48px; display: inline-flex; align-items: center; }

  /* Footer identity block stays compact. */
  .footer-logo img, .footer-brand img { width: clamp(180px, 52vw, 200px); height: auto; }
}

@media (max-width: 374px) {
  .header-bar { padding-inline: var(--mux-gutter); gap: 8px; }
  .header-logo img { width: clamp(150px, 44vw, 168px) !important; }
}

/* Breadcrumb links carry a full-height tap box without changing the visual
   rhythm of the trail (the row keeps its own line-height). */
@media (max-width: 767px) {
  .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }
}

/* Item 08: the intro carried two CTAs on top of the dock and the form below.
   The free-case-review duplicate goes; the "get to know us" link stays as the
   one onward path out of this section. */
@media (max-width: 767px) {
  .intro-actions { display: flex; flex-wrap: wrap; gap: var(--mux-12); }
  .intro-actions > .btn--primary:first-child { display: none; }
  .mux-more--intro { margin-top: var(--mux-20); }
}

/* ==========================================================================
   BRIEF 04 — hero trust line + prior-results disclaimer (phones)
   Both elements are already server-rendered (.hero-proof, .hero-disclaimer);
   the earlier lockup round hid them. They come back COMPACT, inside the
   approved 520-620px hero budget. Measured at 390: hero 616px.
   ========================================================================== */
@media (max-width: 767px) {
  .hero { padding-bottom: 16px; }
  .hero-inner { gap: 12px; }
  .hero-actions { margin-top: 16px; margin-bottom: 0; }

  .hero-proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 7px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    /* 11px with no extra tracking is what lets the approved copy sit on ONE
       line at 375/390/430 (measured). The brief's own floor for small labels
       is 11px, and it warns against heavy letter-spacing at this size. 320px
       wraps to two lines, which is unavoidable at that width. */
    font-size: 11px;
    letter-spacing: normal;
    line-height: 1.45;
    color: var(--grey-400);
  }
  .hero-proof li { display: inline-flex; align-items: center; }
  /* The theme paints a diamond marker before EVERY item (with its own box and
     background), which reads as a leading bullet on the first entry. Clear it
     outright, then re-add a true separator between items only. */
  .hero-proof li::before { content: none; }
  .hero-proof li + li::before {
    content: "\2022";
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 7px 0 0;
    background: none;
    transform: none;
    color: var(--blue-400);
    font-size: 1em;
    line-height: 1;
  }
  .hero-disclaimer {
    display: block;
    margin: 8px auto 0;
    max-width: none;
    font-size: 11px;
    line-height: 1.4;
    color: var(--grey-500);
  }
}

/* The approved short copy (40+ Years / No Fee Unless We Win / Available 24/7)
   fits the hero budget at every width, so the small-phone type compromise that
   held the ceiling with the old longer copy has been removed — 320px keeps the
   same 11.5px trust line as every other width. */

/* ==========================================================================
   BRIEF 06 — homepage practice-areas section intro + "view all"
   INERT until build_wp.py emits the markup in HANDOFF item 2. Shipping the
   styling first means the generator change is content-only and lands looking
   finished rather than needing a second CSS pass.
   ========================================================================== */
@media (max-width: 767px) {
  /* Section budget: heading + 4 cards + view-all. The intro must not cost more
     than the cards it introduces, so the eyebrow loses its stacked margins,
     the H2 sits at the lower end of the brief's 32-40px band, and the lede is
     held to two lines. Measured section: ~660px. */
  .practice { padding-block: var(--mux-48); }
  .practice .section-head { margin-bottom: var(--mux-16); text-align: left; }
  .practice .section-head .eyebrow { margin-top: 0; margin-bottom: 10px; }
  .practice .section-head .section-title { font-size: 34px; max-width: 16ch; }
  .practice .section-lede {
    margin: var(--mux-12) 0 0;
    max-width: 42ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--grey-400);
  }
  .home .practice .pa-link { height: 150px; }
  .practice-all {
    margin: var(--mux-16) 0 0;
    text-align: center;
  }
  .practice-all .btn {
    display: flex;
    width: 100%;
    min-height: 50px;
  }
}

/* ==========================================================================
   Homepage practice cards — final fit pass.
   Placed last so it wins over the earlier blocks regardless of their order.
   ========================================================================== */
@media (max-width: 767px) {
  /* The card's 20px side padding left only 130px of text width in a 170px
     card, while "Compensation" needs 140px at the 16px floor. Reclaiming the
     padding gives 146px, so every practice name sets whole at 390 and up.
     Where a name still cannot fit (375, and any longer name added later) it
     HYPHENATES rather than breaking mid-word — `overflow-wrap: anywhere`
     produced "COMPENSATI / ON". */
  .home .practice .pa-link { padding-inline: 10px; }
  .home .practice .pa-title {
    font-size: 16px;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }
}

@media (max-width: 374px) {
  /* Even with the trimmed padding, two columns at 320 leave too little width.
     The brief's stated alternative for this width is compact full-width rows. */
  .home .practice .practice-grid { grid-template-columns: 1fr; gap: 10px; }
  .home .practice .pa-link { height: 92px; }
  .home .practice .pa-title { font-size: 17px; }
  .home .practice .pa-more { font-size: 11px; }
}

/* ==========================================================================
   Mobile menu v2 — recomposed for the phone, not shrunk.
   Targets: header row 72-80px, nav rows ~60px with a 44px minimum touch
   target, type down from oversized all-caps to 19px medium, dividers without
   the gaps around them, and the conversion block anchored at the bottom while
   the list scrolls independently. Overrides the block above; the desktop
   mega-menu is untouched (all of this is inside the drawer breakpoint).
   ========================================================================== */
@media (max-width: 1150px) {

  /* ---- the panel: list scrolls, CTA stays put ---- */
  body > .header-nav {
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--header-h) + 0.25rem);
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
  body > .header-nav .nav-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* the desktop rule centres the row; as a full-height column that pushed
       the whole list into the middle of the screen with a void above it */
    justify-content: flex-start;
  }

  /* ---- header row ---- */
  body.is-locked .header-logo img { width: clamp(190px, 50vw, 215px); }

  /* ---- primary rows ---- */
  .header-nav .nav-list > li { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
  .header-nav .nav-list > li:last-child { border-bottom: 0; }

  .header-nav .nav-list > li > a,
  .header-nav .nav-toggle {
    display: flex;
    flex-direction: row;           /* explicit: as a column the label centred
                                      and the glyph dropped to the next row */
    align-items: center;
    justify-content: flex-start;   /* the glyph is pushed right by margin, not
                                      by space-between: with an anonymous text
                                      node as the first flex item that centred
                                      the label and dropped the + a row down */
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;              /* touch target floor */
    padding: 0.62rem 0;
    font-size: 1.19rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-transform: none;
    text-align: left;
    color: var(--white);
  }
  .header-nav .nav-list > li:first-child > a { padding-top: 0.62rem; }
  .mb-nav-label { display: block; }

  /* ---- the +/- sits hard right on its own row ---- */
  .header-nav .nav-toggle::after {
    margin-left: auto;
    font-size: 1.45rem;
    line-height: 1;
  }

  /* ---- Practice Areas: one flat list, no second navigation layer ---- */
  .header-nav .submenu { padding-block: 0 0.5rem; }
  .header-nav .mega-col,
  .header-nav .mega-aside { display: none; }   /* categories are desktop-only */

  .mb-pa-flat { margin: 0; padding: 0 0 0.25rem; list-style: none; }
  .mb-pa-flat a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.1rem 0 0.1rem 0.9rem;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--grey-300);
  }
  .mb-pa-flat a:active { color: var(--white); }
  .mb-pa-flat__all a {
    font-weight: 600;
    color: var(--blue-400);
  }

  /* ---- conversion block: compact, at the bottom ---- */
  .mb-nav-cta {
    flex: 0 0 auto;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .mb-nav-cta__main {
    margin: 0 0 0.7rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--grey-400);
  }
  .mb-nav-cta__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  .mb-nav-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.6rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.15;
  }
  .mb-nav-cta__btn--call {
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--white);
  }
  .mb-nav-cta__btn--start {
    background: var(--blue-500, #3b46ff);
    color: #fff;
  }
  .mb-nav-cta__sub {
    margin: 0.7rem 0 0;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    color: var(--grey-500);
  }

  /* the hidden Contact Us row was still painting its divider as an empty
     ruled band between the list and the CTA */
  .header-nav li.mb-replaced { display: none !important; border-bottom: 0; }
}

/* The flat practice list is injected into the shared submenu markup, so it
   must be explicitly withdrawn above the drawer breakpoint or it renders
   inside the desktop mega-menu above the four category columns. */
@media (min-width: 1151px) {
  .mb-pa-flat { display: none !important; }
}