/* ============================================================
   DELGADO PURDY IMMIGRATION LAW — HOMEPAGE
   Pixel-perfect implementation of the approved homepage design
   (Hero Concepts.dc.html). Desktop values are verbatim from the
   reference; responsive layers below adapt for tablet/mobile.
   ============================================================ */

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

/* Scroll anchoring is deliberately off.
   The header is position: sticky, so it sits in normal flow and its height is
   part of the page's layout. When .is-scrolled shrinks the bar 88px -> 64px,
   every element below moves up 24px, and Chrome's scroll anchoring "helpfully"
   subtracts that same 24px from scrollY to hold the content still. That pulled
   the scroll position back across the shrink threshold, which removed the
   class, which grew the bar, which pushed scrollY back over the threshold: a
   self-sustaining loop that shook the header and starved the scroll thread.
   Safe to disable here because every image carries explicit width/height and
   nothing else injects content above the viewport. The JS threshold in main.js
   also has hysteresis, so either guard alone closes the loop. */
html { scroll-behavior: smooth; overflow-anchor: none; }

body {
  margin: 0;
  background: var(--surface-page);
  font-family: var(--font-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
img { max-width: 100%; }

a { color: var(--text-link); transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
::selection { background: var(--taupe-300); color: var(--navy-900); }

.container { max-width: 1440px; margin: 0 auto; padding-left: 64px; padding-right: 64px; }

/* ============ Keyframes (verbatim from reference) ============ */
/* Entrance keyframes start at .001, not 0: Chrome never records an LCP paint
   for an element at opacity 0, so the hero image's fade-in pushed measured LCP
   from ~1.8s to ~6.3s on mobile PageSpeed. .001 is invisible to the eye but
   counts as painted. Do not "clean up" back to 0. */
@keyframes dpUp    { from { opacity: .001; transform: translateY(26px) } to { opacity: 1; transform: translateY(0) } }
@keyframes dpFade  { from { opacity: .001 } to { opacity: 1 } }
@keyframes dpDraw  { to { stroke-dashoffset: 0 } }
@keyframes dpLeft  { from { opacity: .001; transform: translateX(-44px) } to { opacity: 1; transform: translateX(0) } }
@keyframes dpRight { from { opacity: .001; transform: translateX(44px) } to { opacity: 1; transform: translateX(0) } }
@keyframes dpSeal  { from { opacity: .001; transform: translate(-50%,-50%) scale(.55) } to { opacity: 1; transform: translate(-50%,-50%) scale(1) } }
@keyframes dpStamp { from { opacity: .001; transform: scale(1.5) } to { opacity: 1; transform: scale(1) } }
@keyframes dpPop   { from { opacity: .001; transform: scale(0) rotate(-40deg) } to { opacity: 1; transform: scale(1) rotate(0) } }
@keyframes dpFlapOuter { 0%,100% { transform: rotate(0deg) } 32% { transform: rotate(8deg) } 68% { transform: rotate(-6.5deg) } }
@keyframes dpFlapInner { 0%,100% { transform: rotate(0deg) } 32% { transform: rotate(5.5deg) } 68% { transform: rotate(-4.5deg) } }
@keyframes dpTailSway  { 0%,100% { transform: rotate(0deg) } 32% { transform: rotate(-2.5deg) } 68% { transform: rotate(2deg) } }
@keyframes dpBodyBob   { 0%,100% { transform: translateY(0) } 32% { transform: translateY(6px) } 68% { transform: translateY(-7px) } }
@keyframes dpBirdFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes dpSpin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }

/* ============ Animated bird ============ */
.dp-bird { overflow: visible; animation: dpBirdFloat 3.6s ease-in-out infinite; }
.dp-bird .wing-outer { transform-box: view-box; transform-origin: 505px 612px; animation: dpFlapOuter 1.25s ease-in-out infinite; }
.dp-bird .wing-inner { transform-box: view-box; transform-origin: 505px 612px; animation: dpFlapInner 1.25s ease-in-out 0.07s infinite; }
.dp-bird .tail       { transform-box: view-box; transform-origin: 430px 695px; animation: dpTailSway 1.25s ease-in-out infinite; }
.dp-bird .body       { transform-box: view-box; animation: dpBodyBob 1.25s ease-in-out infinite; }
.dp-noflap, .dp-noflap * { animation: none !important; }

/* ============ Buttons (design-system pills) ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: var(--fw-bold);
  border-radius: var(--radius-pill); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn-md { height: 42px; padding: 0 22px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 30px; font-size: 15.5px; }
.btn-lg-sm { height: 48px; padding: 0 28px; font-size: 15px; }
.btn-primary {
  background: var(--gradient-cta); color: var(--text-on-red);
  box-shadow: 0 6px 18px rgba(217, 35, 50, 0.25);
}
.btn-primary:hover { background: var(--cta-bg-hover); color: #fff; box-shadow: 0 8px 22px rgba(217, 35, 50, 0.3); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: transparent; color: var(--navy-800); border-color: var(--navy-700); }
.btn-secondary:hover { background: var(--navy-100); color: var(--navy-900); transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(1px); }
.btn-on-navy { background: transparent; color: var(--paper-100); border-color: rgba(251, 249, 246, 0.45); }
.btn-on-navy:hover { background: rgba(251, 249, 246, 0.08); color: var(--paper-100); transform: translateY(-1px); }
.btn-on-navy:active { transform: translateY(1px); }

/* ============ Shared bits ============ */
.eyebrow-row { display: flex; align-items: center; gap: 14px; }
.eyebrow-tick { width: 30px; height: 2px; background: var(--red-500); flex: none; }
.eyebrow-tick--taupe { background: var(--taupe-400); }
.eyebrow {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
}
[data-reveal] { opacity: .001; } /* .001 not 0: see the LCP note above the keyframes */
html.no-js [data-reveal] { opacity: 1; }

/* squiggle underline */
.squiggle { display: block; margin-top: 12px; }
.squiggle path { stroke-dasharray: 250; stroke-dashoffset: 250; }
.squiggle--300 path { stroke-dasharray: 300; stroke-dashoffset: 300; }
.squiggle.is-drawn path { animation: dpDraw 1s var(--ease-out) forwards; }

/* ============ Utility bar ============ */
.utility { background: var(--navy-900); }
.utility__in {
  max-width: 1440px; margin: 0 auto; height: 40px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px;
}
.utility__note, .utility__cities { font-size: 12.5px; color: var(--navy-300); letter-spacing: 0.02em; }
.utility__right { display: flex; align-items: center; gap: 18px; }
.utility__sep { width: 1px; height: 14px; background: rgba(251, 249, 246, 0.22); }
.utility__phone { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--paper-100); text-decoration: none; }
.utility__phone:hover { color: var(--taupe-300); }

/* ============ Sticky header ============ */
.header { position: sticky; top: 0; z-index: var(--z-header); transition: box-shadow 0.25s ease; }
.header.is-scrolled { box-shadow: var(--shadow-md); }
.header__bar {
  height: 88px; background: rgba(253, 252, 250, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-hairline);
  transition: height 0.25s ease;
}
.header.is-scrolled .header__bar { height: 64px; }
.header__in {
  max-width: 1440px; margin: 0 auto; height: 100%; padding: 0 40px;
  display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 24px; align-items: center;
}
.lockup { display: flex; align-items: center; gap: 12px; justify-self: start; text-decoration: none; }
.lockup__bird { width: 76px; height: 78px; transition: width 0.25s ease, height 0.25s ease; }
.header.is-scrolled .lockup__bird { width: 60px; height: 60px; }
.lockup__text { display: flex; flex-direction: column; }
.wordmark-name {
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 18px;
  line-height: 1; color: var(--navy-900); letter-spacing: 0.01em;
  text-transform: uppercase; white-space: nowrap;
}
.wordmark-name .cap { font-size: 1.16em; }
.wordmark-sub {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10.5px;
  letter-spacing: 0.3em; margin-right: -0.3em; color: var(--crimson);
  margin-top: 5px; white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: 22px; justify-self: center; white-space: nowrap; }
.nav__link {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 14.5px;
  color: var(--navy-800); text-decoration: none; white-space: nowrap;
}
.nav__link:hover { color: var(--crimson); }
.nav__pa { display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 10px 0; }
.nav__caret { color: var(--taupe-700); transition: transform 0.2s ease; }
.nav__pa.is-open .nav__caret { transform: rotate(180deg); }
.header__right { display: flex; align-items: center; gap: 18px; justify-self: end; }
.langs { display: inline-flex; align-items: center; border: 1px solid var(--taupe-300); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.langs__item {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11px; letter-spacing: 0.06em;
  color: var(--navy-600); border-radius: var(--radius-pill); padding: 5px 11px; text-decoration: none;
}
.langs__item:hover { background: var(--navy-100); color: var(--navy-600); }
.langs__item.is-active { background: var(--navy-700); color: var(--paper-50); }
.langs__item.is-active:hover { background: var(--navy-700); color: var(--paper-50); }

/* Mobile menu button (hidden on desktop) */
.menu-btn {
  display: none; background: none; border: 1px solid var(--taupe-300); border-radius: var(--radius-sm);
  width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center;
  color: var(--navy-800); flex: none;
}
.menu-btn svg { display: block; }

/* ============ Mega menu ============ */
.mega {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 55;
  background: var(--paper-0); border-bottom: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
}
.mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__in { max-width: 1440px; margin: 0 auto; padding: 40px 56px 28px; }
.mega__grid { display: grid; grid-template-columns: 300px 1fr; gap: 56px; }
.mega__intro { border-right: 1px solid var(--border-hairline); padding-right: 44px; }
.mega__eyebrow { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11px; letter-spacing: 0.18em; color: var(--crimson); }
.mega__title { font-family: var(--font-display); font-size: 24px; line-height: 1.25; color: var(--navy-900); margin-top: 12px; font-weight: var(--fw-regular); }
.mega__blurb { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--text-muted); margin-top: 12px; }
.mega__all { display: inline-block; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 13.5px; color: var(--crimson); text-decoration: none; margin-top: 18px; }
.mega__all:hover { text-decoration: underline; text-underline-offset: 4px; }
.mega__list { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 24px; row-gap: 6px; }
.mega__item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; }
.mega__item:hover { background: var(--paper-200); }
.mega__num { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10.5px; letter-spacing: 0.08em; color: var(--taupe-600); padding-top: 3px; }
.mega__item-text { display: flex; flex-direction: column; gap: 2px; }
.mega__item-name { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 14px; color: var(--navy-800); }
.mega__item-desc { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); }
.mega__foot { border-top: 1px solid var(--border-hairline); margin-top: 24px; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; }
.mega__foot-note { font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); }
.mega__foot-link { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 12.5px; color: var(--crimson); text-decoration: none; }
.mega__foot-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ============ Mobile nav panel ============
   Full-screen sheet, not a dropdown. The old panel put 916px of content in a
   707px window, so the language pills sat below the fold inside the menu.
   Three rows: a fixed bar (language + close), a scrolling middle, and a CTA
   foot that stays reachable without scrolling to the end of twelve links. */
.mobile-nav {
  position: fixed; inset: 0; z-index: 120;
  background: var(--paper-0);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.mobile-nav[hidden] { display: flex; }         /* hidden attr is for no-JS only */
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav__bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--border-hairline);
  background: var(--paper-100);
}
.mobile-nav__close {
  width: 44px; height: 44px; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; background: none; border: 1px solid var(--border-hairline);
  border-radius: 50%; color: var(--navy-800); cursor: pointer;
}
.mobile-nav__close:hover { background: var(--paper-200); }
.mobile-nav__in {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 20px 24px;
}
.mobile-nav__link {
  display: block; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 17px;
  color: var(--navy-800); text-decoration: none; padding: 15px 0; min-height: 48px;
  border-bottom: 1px solid var(--border-hairline);
}
.mobile-nav__group-label {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11px;
  letter-spacing: 0.18em; color: var(--crimson); text-transform: uppercase;
  margin: 22px 0 10px;
}
/* two columns so twelve practice areas cost six rows, not twelve */
.mobile-nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.mobile-nav__sub {
  display: flex; align-items: center; min-height: 44px; padding: 6px 0;
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.3;
  color: var(--navy-800); text-decoration: none;
}
.mobile-nav__all {
  display: inline-block; margin-top: 16px; min-height: 44px; padding: 12px 0;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 14px;
  color: var(--crimson); text-decoration: none;
}
.mobile-nav__foot {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-hairline); background: var(--paper-100);
}
.mobile-nav__langs { display: flex; gap: 8px; }
/* The pills inherit the desktop header's 23px height, which is under the 44px
   touch floor everywhere else in the mobile menu. Grow the tap target without
   changing the pill's visual weight. */
.mobile-nav__langs .langs__item { min-height: 44px; display: inline-flex; align-items: center; }
body.is-navopen { overflow: hidden; }

/* ============ Sticky mobile action bar ============
   Phones had no CTA above the fold on any template (first button was ~1.4
   screens down), so the primary conversion path is pinned instead. */
.mcta { display: none; }
@media (max-width: 820px) {
  .mcta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: stretch; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(251, 249, 246, .96);
    -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid var(--border-hairline);
    box-shadow: 0 -6px 22px rgba(15, 29, 39, .10);
    transform: translateY(110%); transition: transform .28s cubic-bezier(.16,1,.3,1);
  }
  .mcta.is-in { transform: none; }
  .mcta__call, .mcta__book {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; border-radius: var(--radius-pill);
    font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 15px;
    text-decoration: none; line-height: 1.2;
  }
  .mcta__call {
    flex: 0 0 auto; padding: 0 18px; color: var(--navy-800);
    background: var(--paper-0); border: 1.5px solid var(--navy-300);
  }
  .mcta__book { flex: 1 1 auto; padding: 0 18px; color: var(--paper-0); background: var(--crimson); }
  .mcta__book:hover, .mcta__book:focus-visible { background: var(--crimson-700, #8f1b2a); }
  .mcta__call:hover, .mcta__call:focus-visible { background: var(--paper-200); }
  body { padding-bottom: 74px; }
  body.is-navopen { padding-bottom: 0; }
  .mcta[hidden] { display: none; }
}

/* ============ Touch targets (mobile) ============
   Audit at 375px found the highest-intent links were the smallest: the utility
   phone number was 15px tall on all 91 pages, the CTA-box call link 18px on 66,
   footer links 22px, breadcrumbs 15px. All were under the 24px WCAG 2.2 minimum
   and well under the 44px comfortable target. Padding only, no layout change. */
@media (max-width: 820px) {
  .utility__phone,
  .pcta__call,
  .office__phone, .office__link,
  .footer__link, .footer__phone, .footer__email,
  .crumbs a, .breadcrumbs a,
  .att__more, .st__link, .attorney__link, .pa__panel-link, .rel__row,
  .faq-tail a, .mega__all, .mega__foot-link {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer__link { min-height: 44px; }
  .crumbs a, .breadcrumbs a { padding-right: 2px; }
  /* the category chip on blog post heroes was 27px */
  .phero__cat { display: inline-flex; align-items: center; min-height: 44px; }
}

/* iOS Safari zooms the viewport whenever a focused field is under 16px.
   Every input on the site was 14-15px, so tapping any field lurched the page. */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ============ Hero ============ */
.hero { position: relative; background: var(--gradient-navy); overflow: hidden; }
.hero__in {
  position: relative; max-width: 1440px; margin: 0 auto;
  padding: 80px 64px 64px; min-height: calc(100vh - 128px);
}
/* Centred to match every interior hero. The earlier "centre the bird" pass
   covered .phero__watermark only; the homepage uses this separate element and
   was still sitting 23px off-centre at 375px. */
.hero__watermark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 780px; opacity: 0.055; pointer-events: none; user-select: none;
}
.hero__watermark img { width: 100%; height: auto; display: block; }
/* Two columns on desktop: head + body stack in column 1, the photo spans both
   rows in column 2. Splitting head from body lets the photo slot between them
   when the grid collapses (see the 1120px block). Row 1 is max-content so the
   tall photo's leftover height lands in row 2 and never gaps the title/lede. */
.hero__grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.04fr 0.96fr; grid-template-rows: max-content 1fr;
  column-gap: 64px; row-gap: 0; align-items: start;
}
.hero__head { grid-column: 1; grid-row: 1; }
.hero__body { grid-column: 1; grid-row: 2; }
.hero__eyebrow-row { animation: dpUp 0.7s var(--ease-out) 0.1s backwards; }
.hero__eyebrow { color: var(--taupe-300); }
.hero__h1 {
  margin-top: 28px; font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 74px; line-height: 1.06; letter-spacing: -0.015em; color: var(--paper-100);
}
.hero__h1-line { display: block; }
.hero__h1-line:nth-child(1) { animation: dpUp 0.8s var(--ease-out) 0.18s backwards; }
.hero__h1-line:nth-child(2) { animation: dpUp 0.8s var(--ease-out) 0.28s backwards; }
.hero__h1-line:nth-child(3) { font-style: italic; color: var(--taupe-300); animation: dpUp 0.8s var(--ease-out) 0.38s backwards; }
.hero__rot { display: inline-block; transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease; }
.hero__lede {
  margin-top: 26px; max-width: 54ch; font-family: var(--font-body); font-size: 19.5px;
  line-height: 1.65; color: var(--navy-200); animation: dpUp 0.8s var(--ease-out) 0.48s backwards;
}
.hero__ctas { display: flex; align-items: center; gap: 16px; margin-top: 34px; animation: dpUp 0.8s var(--ease-out) 0.58s backwards; }
.hero__stats {
  display: flex; margin-top: 56px; border-top: 1px solid rgba(251, 249, 246, 0.14);
  padding-top: 26px; animation: dpUp 0.8s var(--ease-out) 0.72s backwards;
}
.hero__stat { flex: 1; padding: 0 24px; border-left: 1px solid rgba(251, 249, 246, 0.14); }
.hero__stat:first-child { padding-left: 0; border-left: none; padding-right: 24px; }
.hero__stat:last-child { padding-right: 0; }
.hero__stat-num { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 30px; color: var(--paper-100); }
.hero__stat-label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11px; letter-spacing: 0.14em; color: var(--taupe-300); margin-top: 4px; }
.hero__stat-detail { font-family: var(--font-body); font-size: 12.5px; color: var(--navy-300); margin-top: 5px; }
.hero__visual { position: relative; grid-column: 2; grid-row: 1 / span 2; height: 664px; animation: dpUp 0.9s var(--ease-out) 0.32s backwards; }
.hero__frame { position: absolute; inset: 26px -26px -26px 26px; border: 1px solid rgba(191, 169, 149, 0.5); border-radius: 30px; }
.hero__photo { position: absolute; inset: 0; z-index: 1; border-radius: 26px; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.hero__quote {
  position: absolute; left: -52px; bottom: 36px; width: 330px; z-index: 2;
  background: var(--paper-0); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 24px 26px; animation: dpUp 0.9s var(--ease-out) 0.9s backwards;
}
.hero__quote-tag { display: flex; align-items: center; gap: 8px; }
.hero__quote-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red-500); }
.hero__quote-label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10px; letter-spacing: 0.18em; color: var(--crimson); }
.hero__quote-text { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.45; color: var(--navy-800); margin-top: 10px; }

/* ============ Practice areas ============ */
.pa { position: relative; background: var(--gradient-dawn); border-top: 1px solid var(--border-hairline); }
.pa__in { max-width: 1440px; margin: 0 auto; padding: 104px 64px 112px; }
.pa__head { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: end; margin-bottom: 68px; }
.pa__eyebrow { color: var(--navy-600); }
.pa__h2 {
  margin-top: 22px; font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 50px; line-height: 1.12; letter-spacing: -0.015em; color: var(--navy-900);
}
.pa__h2-line { display: block; }
.pa__h2 em { display: inline-block; font-style: italic; color: var(--crimson); }
.pa__blurb { font-family: var(--font-body); font-size: 18.5px; line-height: 1.6; color: var(--text-muted); }
.pa__head-cta { margin-top: 20px; }
.pa__grid { display: grid; grid-template-columns: 480px 1fr; gap: 72px; align-items: start; }

/* Case-file panel */
.pa__panel-wrap { position: sticky; top: 96px; }
.pa__tab {
  display: inline-block; background: var(--taupe-100); border: 1px solid var(--border-hairline);
  border-bottom: none; border-radius: 12px 12px 0 0; padding: 10px 20px 9px;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--taupe-700);
}
.pa__panel-box {
  position: relative; height: 500px; background: var(--paper-0);
  border: 1px solid var(--border-hairline); border-radius: 0 20px 20px 20px;
  box-shadow: var(--shadow-md); overflow: hidden;
}
.pa__panel {
  position: absolute; inset: 0; padding: 44px 44px 40px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.4s var(--ease-out), visibility 0.35s;
}
.pa__panel.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
.pa__panel-num {
  position: absolute; top: 2px; right: 26px; font-family: var(--font-display);
  font-style: italic; font-size: 150px; line-height: 1; color: var(--paper-300);
  pointer-events: none; user-select: none;
}
.pa__panel-body { position: relative; padding-top: 96px; }
.pa__panel-title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 29px; line-height: 1.15; color: var(--navy-900); }
.pa__panel-desc { font-family: var(--font-body); font-size: 17.5px; line-height: 1.65; color: var(--text-body); margin-top: 16px; }
.pa__panel-link { display: inline-block; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 14px; color: var(--crimson); text-decoration: none; margin-top: 20px; }
.pa__panel-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Index with traveling bird */
.pa__index { position: relative; padding-left: 52px; }
.pa__line { position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--taupe-300); }
.pa__trail { position: absolute; left: 7.5px; top: 0; width: 2px; height: 36px; background: var(--navy-700); transition: height 0.55s var(--ease-out); }
.pa__bird {
  position: absolute; left: -24px; top: 20px; width: 64px; height: 66px; opacity: 0.95;
  transition: top 0.55s var(--ease-out); pointer-events: none;
}
.pa__list { border-top: 1px solid var(--border-hairline); }
.pa__row {
  display: flex; align-items: center; gap: 20px; padding: 23px 4px;
  border-bottom: 1px solid var(--border-hairline); cursor: pointer; text-decoration: none;
}
.pa__row-num { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11.5px; letter-spacing: 0.08em; color: var(--taupe-600); width: 26px; transition: color 0.2s ease; }
.pa__row-title { font-family: var(--font-display); font-size: 25px; letter-spacing: -0.01em; color: var(--navy-900); }
.pa__row.is-active .pa__row-num { color: var(--crimson); }
.pa__row.is-active .pa__row-title {
  font-style: italic; text-decoration-line: underline; text-decoration-color: var(--red-500);
  text-decoration-thickness: 2px; text-underline-offset: 7px;
}
.pa__row-spacer { flex: 1; }
.pa__row-tags { font-family: var(--font-body); font-size: 12px; color: var(--text-subtle); }
.pa__row-arrow {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid var(--taupe-300); border-radius: 50%; color: var(--navy-700); flex: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pa__row.is-active .pa__row-arrow { background: var(--navy-700); border-color: var(--navy-700); color: #FBF9F6; }

/* ============ Attorneys — The Duet ============ */
.att { position: relative; background: linear-gradient(165deg, #1b3143 0%, #142430 60%, #0f1d27 100%); overflow: hidden; }
.att__in { max-width: 1440px; margin: 0 auto; padding: 104px 64px 112px; }
.att__eyebrow { color: var(--taupe-300); }
.att__h2 {
  margin-top: 22px; font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 50px; line-height: 1.12; letter-spacing: -0.015em; color: var(--paper-100);
}
.att__h2 em { font-style: italic; color: var(--taupe-300); }
.att__duet { display: flex; align-items: stretch; margin-top: 64px; }
.att__card {
  flex: 1 1 0%; min-width: 0; background: var(--navy-700);
  border: 1px solid rgba(191, 169, 149, 0.32); border-radius: var(--radius-xl);
  overflow: hidden; cursor: pointer;
  transition: flex 0.6s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}
.att__card--a { margin-right: 14px; }
.att__card--b { margin-left: 14px; }
.att__card.is-on { flex: 1.26 1 0%; border-color: rgba(251, 249, 246, 0.3); box-shadow: var(--shadow-lg); }
.att__card.is-off { flex: 0.9 1 0%; border-color: rgba(251, 249, 246, 0.12); }
.att__photo { position: relative; height: 400px; background: var(--navy-800); }
.att__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.att__badge {
  position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--taupe-100);
  color: var(--navy-800); border-radius: var(--radius-pill); padding: 6px 13px;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10px;
  letter-spacing: 0.14em; pointer-events: none;
}
.att__body { padding: 30px 34px 34px; }
.att__name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 30px; line-height: 1.1; color: var(--paper-100); }
.att__creds { font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0.04em; color: var(--navy-300); margin-top: 9px; }
.att__langs { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.att__lang {
  border: 1px solid rgba(251, 249, 246, 0.28); border-radius: var(--radius-pill); padding: 4px 11px;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--navy-200);
}
.att__bio { overflow: hidden; max-height: 48px; opacity: 0.75; transition: max-height 0.55s var(--ease-out), opacity 0.3s ease; margin-top: 16px; }
.att__card.is-on .att__bio { max-height: 260px; opacity: 1; }
.att__bio p { font-family: var(--font-body); font-size: 16.5px; line-height: 1.6; color: var(--navy-200); }
.att__more {
  display: inline-block; margin-top: 16px; font-family: var(--font-body); font-weight: var(--fw-bold);
  font-size: 14px; color: var(--paper-100); text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 1.5px; text-decoration-color: rgba(251, 249, 246, 0.45); cursor: pointer;
}
.att__more:hover { color: var(--taupe-300); }
.att__amp-wrap { width: 0; position: relative; z-index: 5; align-self: stretch; }
.att__amp {
  position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; border-radius: 50%; background: var(--paper-100);
  border: 1px solid var(--taupe-300); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
}
.att__amp span { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 40px; color: var(--navy-900); line-height: 1; padding-bottom: 4px; }

/* ============ Our Story — The Merger (pinned) ============ */
.st { position: relative; height: 160vh; background: var(--gradient-warm); border-top: 1px solid var(--border-hairline); }
.st__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.st__in {
  max-width: 1440px; width: 100%; margin: 0 auto; padding: 0 64px;
  display: grid; grid-template-columns: 1fr 576px; gap: 80px; align-items: center;
}
.st__eyebrow { color: var(--navy-600); }
.st__h2 {
  margin-top: 22px; font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 46px; line-height: 1.14; letter-spacing: -0.015em; color: var(--navy-900);
}
.st__h2 em { font-style: italic; color: var(--crimson); }
.st__p { margin-top: 28px; max-width: 58ch; font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--text-body); }
.st__p + .st__p { margin-top: 18px; }
.st__pull { margin-top: 26px; font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.3; color: var(--navy-900); }
.st__pull em { font-style: italic; color: var(--crimson); }
.st__link { display: inline-block; margin-top: 26px; font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 17px; color: var(--crimson); text-decoration: none; }
.st__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.st__dio { position: relative; height: 520px; }
.st__firm {
  position: absolute; top: 50%; left: 50%; width: 264px; background: var(--paper-0);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 24px 26px; z-index: 2; will-change: transform, opacity;
}
.st__firm-head { display: flex; align-items: center; gap: 13px; }
.st__firm-head img { width: 40px; height: 40px; object-fit: contain; }
.st__firm--b .st__firm-head img { border-radius: 8px; }
.st__firm-founder { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 9px; letter-spacing: 0.16em; color: var(--taupe-700); }
.st__firm-name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 23px; line-height: 1.12; color: var(--navy-900); margin-top: 16px; }
.st__firm-desc { font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); margin-top: 8px; }
.st__merged {
  position: absolute; top: 50%; left: 50%; width: 468px;
  transform: translate(-50%, -50%) scale(0.82); opacity: 0;
  background: var(--gradient-navy); border-radius: 30px; box-shadow: var(--shadow-lg);
  padding: 52px 52px; text-align: center; z-index: 3; will-change: transform, opacity;
}
.st__logo {
  width: 132px; height: 132px; margin: 0 auto; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.4) rotate(-14deg); will-change: transform, opacity;
}
.st__logo img { width: 100%; height: 100%; object-fit: contain; }
/* 30px, not 34px: at 34 the wordmark measured 390px of ink inside a 364px
   content box. Because it is nowrap, the overflow could not wrap, and the
   browser clamps a centred overflowing line to the start edge, so it rendered
   left-aligned and spilled 26px off the right, sitting 13px right of the logo,
   the sub and the meta line. 30px fits with ~10px clearance each side. */
.st__merged-name {
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 30px; line-height: 1.08;
  color: var(--paper-100); margin-top: 24px; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap;
}
.st__merged-name .cap { font-size: 1.16em; }
.st__merged-sub {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 14px; letter-spacing: 0.3em;
  color: var(--taupe-300); margin-top: 8px; white-space: nowrap;
}
.st__merged-meta { border-top: 1px solid rgba(251, 249, 246, 0.16); margin-top: 24px; padding-top: 18px; }
.st__merged-meta p { font-family: var(--font-body); font-size: 13.5px; color: var(--navy-300); }
.st__cue {
  position: absolute; left: 50%; bottom: -52px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px; transition: opacity 0.3s ease;
}
.st__cue-label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 10px; letter-spacing: 0.18em; color: var(--taupe-700); }
.st__cue svg { animation: dpUp 1.4s ease-in-out infinite alternate; }

/* Static merger fallback (mobile / reduced motion) */
.st.st-static { height: auto; }
.st.st-static .st__pin { position: static; height: auto; overflow: visible; display: block; }
.st.st-static .st__in { padding-top: 96px; padding-bottom: 104px; }
.st.st-static .st__dio { height: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.st.st-static .st__firm { position: static; transform: none !important; opacity: 1 !important; width: 264px; }
.st.st-static .st__firms-row { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.st.st-static .st__merged { position: static; transform: none !important; opacity: 1 !important; max-width: 468px; width: 100%; }
.st.st-static .st__logo { opacity: 1 !important; transform: none !important; }
.st.st-static .st__cue { display: none; }

/* The SAME static rules as CSS defaults wherever main.js will choose static
   mode anyway (wantStatic = reducedMotion || innerWidth <= 1120). main.js is
   deferred, so on slow loads the .st-static class lands AFTER first paint;
   flipping the section from the 160vh pinned box to static flow at that point
   was a 1.0 CLS on PSI mobile (v=97 diagnosis: the shift survived the font
   fix and carried no font/image attribution). With these media mirrors the
   initial mobile render is already static and the class toggle changes
   nothing. KEEP THE TWO BLOCKS IN LOCKSTEP with the .st-static rules above,
   and keep the 1120px breakpoint in sync with isDesktop() in main.js. */
@media (max-width: 1120px) {
  .st { height: auto; }
  .st .st__pin { position: static; height: auto; overflow: visible; display: block; }
  .st .st__in { padding-top: 96px; padding-bottom: 104px; }
  .st .st__dio { height: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .st .st__firm { position: static; transform: none !important; opacity: 1 !important; width: 264px; }
  .st .st__firms-row { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
  .st .st__merged { position: static; transform: none !important; opacity: 1 !important; max-width: 468px; width: 100%; }
  .st .st__logo { opacity: 1 !important; transform: none !important; }
  .st .st__cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .st { height: auto; }
  .st .st__pin { position: static; height: auto; overflow: visible; display: block; }
  .st .st__in { padding-top: 96px; padding-bottom: 104px; }
  .st .st__dio { height: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .st .st__firm { position: static; transform: none !important; opacity: 1 !important; width: 264px; }
  .st .st__firms-row { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
  .st .st__merged { position: static; transform: none !important; opacity: 1 !important; max-width: 468px; width: 100%; }
  .st .st__logo { opacity: 1 !important; transform: none !important; }
  .st .st__cue { display: none; }
}

/* ============ Reviews ============ */
.rev { position: relative; background: var(--paper-100); border-top: 1px solid var(--border-hairline); overflow: hidden; }
.rev__in { max-width: 1440px; margin: 0 auto; padding: 104px 64px 112px; }
.rev__head { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; margin-bottom: 60px; }
.rev__eyebrow { color: var(--navy-600); }
.rev__h2 {
  margin-top: 22px; font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 50px; line-height: 1.12; letter-spacing: -0.015em; color: var(--navy-900);
}
.rev__h2 em { font-style: italic; color: var(--crimson); }
.rev__badge {
  display: inline-flex; align-items: center; gap: 20px; margin-top: 28px;
  background: var(--paper-0); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 16px 26px;
}
.rev__badge-body { border-left: 1px solid var(--border-hairline); padding-left: 22px; }
.rev__badge-top { display: flex; align-items: baseline; gap: 10px; }
.rev__score { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 32px; line-height: 1; color: var(--navy-900); }
.rev__badge-stars { display: flex; gap: 2px; }
.rev__badge-count { font-family: var(--font-body); font-size: 12.5px; color: var(--text-muted); margin-top: 5px; }
.rev__badge-count strong { color: var(--navy-800); }
.rev__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.rev__card {
  background: var(--paper-0); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 30px 30px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rev__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.rev__card-top { display: flex; align-items: center; justify-content: space-between; }
.rev__stars { display: flex; gap: 3px; }
.rev__text { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--text-body); margin-top: 16px; }
.rev__who { display: flex; align-items: center; gap: 13px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-hairline); }
.rev__avatar {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--navy-100); border: 1px solid var(--border-hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 15px; color: var(--navy-700);
}
.rev__who-name { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 14px; color: var(--navy-900); }
.rev__who-when { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); }
.rev__cta { display: flex; justify-content: center; margin-top: 52px; }

/* ============ Welcome — The Ink ============ */
.ink { position: relative; background: var(--paper-100); overflow: hidden; }
.ink__in {
  max-width: 1440px; margin: 0 auto; padding: 118px 64px 124px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.ink__eyebrow { color: var(--navy-600); }
.ink__h2 {
  margin-top: 24px; max-width: 26ch; font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 42px; line-height: 1.18; letter-spacing: -0.015em; color: var(--navy-900);
}
.ink__text {
  margin-top: 44px; max-width: 52ch; font-family: var(--font-display); font-size: 26px;
  line-height: 1.68; letter-spacing: -0.005em;
  background-image: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-300) 6%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============ Differentiators — Four Stamps ============ */
.diff { position: relative; background: linear-gradient(165deg, #4a1217 0%, #400F13 58%, #300b0e 100%); overflow: hidden; }
.diff__in { max-width: 1440px; margin: 0 auto; padding: 104px 64px 112px; }
.diff__eyebrow { color: var(--taupe-300); }
.diff__h2 {
  margin-top: 22px; font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 48px; line-height: 1.14; letter-spacing: -0.015em; color: var(--paper-100);
}
.diff__h2 em { font-style: italic; color: var(--taupe-300); }
.diff__grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; }
.dp-diff-col { padding-right: 40px; }
.dp-diff-col + .dp-diff-col { border-left: 1px solid rgba(251, 249, 246, 0.14); padding-left: 40px; }
.dp-diff-col:last-child { padding-right: 0; }
.dp-stamp-col { display: inline-block; transition: transform 0.35s var(--ease-out); }
.dp-stamp-col--r4n { transform: rotate(-4deg); }
.dp-stamp-col--r3p { transform: rotate(3deg); }
.dp-stamp-col--r3n { transform: rotate(-3deg); }
.dp-stamp-col--r4p { transform: rotate(4deg); }
.dp-stamp {
  width: 112px; height: 112px; border-radius: 50%; border: 1.5px solid rgba(251, 249, 246, 0.55);
  display: flex; align-items: center; justify-content: center; position: relative;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.dp-stamp-ring { position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(251, 249, 246, 0.35); }
.dp-stamp-inner { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dp-stamp-num { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-semibold); font-size: 30px; line-height: 1; color: var(--paper-100); }
.dp-stamp-label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 8.5px; letter-spacing: 0.22em; color: var(--taupe-300); }
.diff__title { margin-top: 26px; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 23px; line-height: 1.2; color: var(--paper-100); }
.diff__desc { margin-top: 12px; font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; color: rgba(251, 249, 246, 0.72); }
.dp-diff-col:hover .dp-stamp-col { transform: rotate(0deg) scale(1.08) translateY(-4px); }
.dp-diff-col:hover .dp-stamp-ring { animation: dpSpin 9s linear infinite; border-color: rgba(251, 249, 246, 0.6); }
.dp-diff-col:hover .dp-stamp { border-color: var(--paper-100); background: rgba(251, 249, 246, 0.07); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); }

/* ============ Footer — The Send-off ============ */
.footer { position: relative; background: var(--gradient-navy); overflow: hidden; }
.footer__giant {
  position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(32%);
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 120px;
  line-height: 1; letter-spacing: 0.02em; color: rgba(251, 249, 246, 0.05);
  white-space: nowrap; text-align: center; text-transform: uppercase;
  pointer-events: none; user-select: none;
}
/* top padding formerly supplied by .footer__cta (now a standalone CTA section
   above the footer on every page); keeps the link grid off the section seam */
.footer__in { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 76px 64px 56px; }
.footer__cta { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 104px 0 88px; }
.footer__eyebrow { color: var(--taupe-300); }
.footer__h2 {
  margin-top: 22px; max-width: 22ch; font-family: var(--font-display); font-weight: var(--fw-regular);
  font-size: 54px; line-height: 1.12; letter-spacing: -0.015em; color: var(--paper-100);
}
.footer__h2 em { font-style: italic; color: var(--taupe-300); }
.footer__cta-lede { margin-top: 18px; max-width: 48ch; font-family: var(--font-body); font-size: 18.5px; line-height: 1.65; color: var(--navy-200); }
.footer__cta-row { display: flex; align-items: center; gap: 18px; margin-top: 32px; }
.footer__call { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 16.5px; color: var(--paper-100); text-decoration: none; }
.footer__call:hover { color: var(--taupe-300); }
.footer__cta-rule { width: 1px; height: 56px; background: rgba(251, 249, 246, 0.2); margin-top: 56px; }
.footer__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 56px; padding-top: 8px; }
/* Brand block shrink-wraps to the wordmark, so the bird centres over the text
   rather than over the whole footer column. */
.footer__brand { display: inline-flex; flex-direction: column; align-items: center; }
.footer__bird { width: 118px; height: 121px; }
/* flex-start matters: stretched children report the column width, which made
   fitWordmarks() track "IMMIGRATION LAWYERS" to the column instead of the name */
.footer__lockup { display: flex; flex-direction: column; align-items: flex-start; margin-top: 20px; }
.footer__wm-name {
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 30px; line-height: 1;
  color: var(--paper-100); letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap;
}
.footer__wm-name .cap { font-size: 1.16em; }
.footer__wm-sub {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 12px; letter-spacing: 0.3em;
  color: var(--taupe-300); margin-top: 6px; white-space: nowrap;
}
/* 0.65 alpha measured 4.07:1 against the lightest footer gradient stop, which
   fails AA. 0.75 clears it at 4.82:1, matching the disclaimer and legal lines. */
.footer__tagline { margin-top: 18px; max-width: 34ch; font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; color: rgba(251, 249, 246, 0.75); }
.footer__owned {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 12px;
  /* taupe-200, not taupe-300: at 12px this is small text, and 300 measured
     4.37:1 against the lightest footer stop. 200 clears AA at 5.44:1. */
  letter-spacing: .1em; text-transform: uppercase; color: var(--taupe-200);
}
.footer__owned::before {
  content: ""; width: 18px; height: 1px; background: var(--taupe-400); flex: 0 0 auto;
}
.footer__langs { display: flex; gap: 8px; margin-top: 20px; }
.footer__lang {
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11px; letter-spacing: 0.08em;
  color: var(--taupe-300); border: 1px solid rgba(251, 249, 246, 0.25); border-radius: var(--radius-pill); padding: 5px 12px;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.footer__lang:hover { color: var(--paper-100); border-color: rgba(251, 249, 246, 0.6); }
.footer__lang.is-active { color: var(--paper-100); border-color: var(--paper-100); }
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__col-label { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 11px; letter-spacing: 0.2em; color: var(--taupe-300); }
.footer__link { font-family: var(--font-body); font-size: 16.5px; line-height: 1.5; color: rgba(251, 249, 246, 0.75); text-decoration: none; }
.footer__link:hover { color: var(--paper-100); text-decoration: underline; text-underline-offset: 4px; }
.footer__link--strong { font-weight: var(--fw-bold); font-size: 16px; color: var(--taupe-300); }
.footer__link--strong:hover { color: var(--paper-100); text-decoration: none; }
.footer__office { font-family: var(--font-body); font-size: 16.5px; line-height: 1.5; color: rgba(251, 249, 246, 0.75); }

/* Google rating, footer offices column. It sits with the phone number because
   that is the conversion cluster. Quiet treatment (hairline + paper type)
   rather than the homepage's white card, which on navy would read as a sticker
   pasted on. The Google G and the stars keep their own colours: they are a
   third-party brand mark and must not be recoloured. 0.75 alpha on the count
   line is the tested-safe value against this gradient, same as the disclaimer. */
.foot-rating {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 20px;
  padding: 10px 15px; text-decoration: none;
  border: 1px solid rgba(251, 249, 246, 0.18); border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.foot-rating:hover { background: rgba(251, 249, 246, 0.07); border-color: rgba(251, 249, 246, 0.34); }
.foot-rating__g { flex: 0 0 auto; }
/* block, or the inline span's line box pads ~18px of dead height into the card */
.foot-rating__body { display: block; }
.foot-rating__top { display: flex; align-items: baseline; gap: 8px; }
.foot-rating__score {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: 22px; line-height: 1; color: var(--paper-100);
}
.foot-rating__stars { display: inline-flex; gap: 1px; }
.foot-rating__count {
  display: block; margin-top: 4px;
  font-family: var(--font-body); font-size: 12px; line-height: 1.4;
  color: rgba(251, 249, 246, 0.75);
}
.foot-rating__count strong { color: var(--paper-100); font-weight: var(--fw-bold); }
.footer__phone { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: 16.5px; color: var(--paper-100); text-decoration: none; }
.footer__phone:hover { color: var(--taupe-300); }
.footer__appt { font-family: var(--font-body); font-size: 14.5px; color: rgba(251, 249, 246, 0.5); }
.footer__disclaimer {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 64px; padding-top: 26px; border-top: 1px solid rgba(251, 249, 246, 0.14);
}
/* Legal text has to pass WCAG AA. 0.75 alpha clears 4.5:1 even against the
   lightest stop of the footer gradient (51,88,122); 0.45 was only 2.77:1. */
.footer__disclaimer p {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.7;
  color: rgba(251, 249, 246, 0.75);
}
.footer__legal {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(251, 249, 246, 0.14);
}
/* same treatment: "Attorney advertising" is a required disclosure, not decor */
.footer__legal p { font-family: var(--font-body); font-size: 12.5px; color: rgba(251, 249, 246, 0.75); }
/* the privacy link sits in the legal row: same size and colour as its
   neighbours, underlined so it reads as the one thing here you can click */
.footer__legal a, .footer__legal-btn { color: rgba(251, 249, 246, 0.75); text-decoration: underline; text-underline-offset: 3px; }
.footer__legal a:hover, .footer__legal-btn:hover { color: var(--paper-100); }
/* "Cookie settings" has to be a button, not a link: it reopens the choice
   rather than going anywhere. It is styled to be indistinguishable from the
   privacy link beside it. */
.footer__legal-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.footer__legal-sep { padding: 0 8px; opacity: .5; }

/* ============================================================
   I18N NOTICE (locale pages whose body is not yet translated)
   One quiet band at the top of <main>: honest about the state,
   links back to the English master. Removed per page as each
   translation lands.
   ============================================================ */
.i18n-note {
  background: var(--navy-700); color: var(--paper-100);
  font-family: var(--font-body); font-size: 14px; line-height: 1.6;
  padding: 12px 22px; text-align: center;
}
.i18n-note a { color: var(--taupe-300); text-decoration: underline; text-underline-offset: 3px; }
.i18n-note a:hover { color: var(--paper-100); }

/* ============================================================
   CONSENT BAR (js/consent.js)
   Appears once, bottom of the viewport, above the mobile action
   bar. Decline sits left, Accept right in the primary-action
   position and filled so it reads as the preferred answer.

   The line that must not be crossed is EFFORT, not emphasis:
   same layer, same size, one click each. Never move Decline
   behind a second click or a "manage preferences" screen, and
   never reduce it to a text link. That is the fact pattern the
   CNIL fined Google and Meta for in January 2022, and it is what
   the CPRA calls a dark pattern (consent so obtained is void).

   Accept is paper, not crimson, so the one-red-CTA-per-view rule
   still holds on every page this bar can appear over.
   ============================================================ */
.cbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
  background: var(--navy-900); border-top: 1px solid rgba(251, 249, 246, 0.16);
  box-shadow: 0 -10px 34px rgba(15, 29, 39, 0.28);
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.cbar.is-in { transform: none; }
.cbar__in {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
}
.cbar__text {
  margin: 0; max-width: 82ch;
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.7;
  color: rgba(251, 249, 246, 0.82);
}
.cbar__link { color: var(--taupe-300); text-decoration: underline; text-underline-offset: 3px; }
.cbar__link:hover { color: var(--paper-100); }
.cbar__row { display: flex; gap: 12px; flex: 0 0 auto; }
.cbar__btn { min-width: 128px; }
/* Accept: filled paper on the navy bar. Same box as Decline, more weight. */
.cbar__btn--yes { background: var(--paper-0); color: var(--navy-900); border-color: var(--paper-0); }
.cbar__btn--yes:hover { background: var(--paper-200); color: var(--navy-900); border-color: var(--paper-200); }
@media (max-width: 820px) {
  .cbar { padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); }
  .cbar__in { flex-direction: column; align-items: stretch; gap: 15px; }
  .cbar__btn { flex: 1 1 0; min-width: 0; height: 46px; }
  /* the sticky Call/Schedule bar and the consent bar must never stack */
  body.dp-consent-open .mcta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cbar { transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
  .hero__h1 { font-size: 62px; }
  .pa__grid { grid-template-columns: 420px 1fr; gap: 48px; }
  .hero__quote { left: -20px; }
}

@media (max-width: 1180px) {
  /* Header: collapse nav to hamburger (breakpoint sits above the point
     where the full nav + CTA no longer fit without overflow) */
  .nav, .header__right .langs, .header__right .btn { display: none; }
  .menu-btn { display: inline-flex; }
  .mega { display: none; }
  .header__in { grid-template-columns: 1fr auto; padding: 0 24px; }
  .lockup__bird { width: 60px; height: 62px; }
  .utility__in { padding: 0 24px; }
}

@media (max-width: 1120px) {

  .container, .hero__in, .pa__in, .att__in, .st__in, .rev__in, .ink__in, .diff__in, .footer__in { padding-left: 40px; padding-right: 40px; }

  /* Hero stacks: photo sits directly under the title, ahead of lede/CTAs/stats.
     Spacing lives on the photo's own margins (bottom is larger to clear the
     quote card, which hangs 28px below the frame). */
  .hero__in { min-height: 0; padding-top: 64px; padding-bottom: 72px; }
  .hero__grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; }
  .hero__head, .hero__visual, .hero__body { grid-column: 1; grid-row: auto; }
  .hero__h1 { font-size: 56px; }
  .hero__visual { height: 560px; max-width: 560px; margin: 40px 0 52px; }
  .hero__quote { left: 18px; bottom: -28px; }
  .hero__watermark { width: 620px; }

  /* Practice areas: single column, panel hidden (rows link out) */
  .pa__head { grid-template-columns: 1fr; gap: 28px; align-items: start; margin-bottom: 48px; }
  .pa__grid { grid-template-columns: 1fr; }
  .pa__panel-wrap { display: none; }
  .pa__h2 { font-size: 42px; }
  .pa__row-title { font-size: 21px; }

  /* Attorneys stack */
  .att__duet { flex-direction: column; margin-top: 48px; }
  .att__card--a, .att__card--b { margin: 0; }
  .att__card.is-on, .att__card.is-off { flex: 1 1 auto; }
  .att__bio { max-height: none; opacity: 1; }
  .att__amp-wrap { width: auto; height: auto; align-self: center; display: flex; padding: 16px 0; }
  .att__amp { position: static; transform: none; margin: 0 auto; }
  .att__h2 { font-size: 42px; }

  /* Story static handled via .st-static (JS adds it) */
  .st__in { grid-template-columns: 1fr; gap: 56px; }
  .st__h2 { font-size: 40px; }

  .rev__grid { grid-template-columns: 1fr 1fr; }
  .rev__h2 { font-size: 42px; }
  .rev__head { grid-template-columns: 1fr; }

  .ink__h2 { font-size: 34px; }
  .ink__text { font-size: 22px; }

  .diff__grid { grid-template-columns: 1fr 1fr; gap: 48px 0; }
  .dp-diff-col { padding-right: 32px; }
  .dp-diff-col + .dp-diff-col { padding-left: 32px; }
  .dp-diff-col:nth-child(3) { border-left: none; padding-left: 0; }
  .diff__h2 { font-size: 40px; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__h2 { font-size: 44px; }
}

@media (max-width: 700px) {
  .container, .hero__in, .pa__in, .att__in, .st__in, .rev__in, .ink__in, .diff__in, .footer__in { padding-left: 22px; padding-right: 22px; }
  .pa__in, .att__in, .rev__in, .diff__in { padding-top: 72px; padding-bottom: 80px; }
  .ink__in { padding-top: 80px; padding-bottom: 88px; }

  .utility__note, .utility__cities { display: none; }
  .utility__in { justify-content: center; }

  .hero__h1 { font-size: 40px; }
  .hero__lede { font-size: 18px; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
  .hero__stats { flex-wrap: wrap; margin-top: 44px; }
  .hero__stat { flex: 1 1 42%; padding: 0 0 0 18px; margin-bottom: 20px; }
  .hero__stat:nth-child(odd) { padding-left: 0; border-left: none; }
  .hero__visual { height: 440px; margin: 32px 0 48px; }
  .hero__quote { width: min(300px, calc(100% - 24px)); left: 12px; }

  .pa__h2, .att__h2, .rev__h2, .diff__h2 { font-size: 32px; }
  .st__h2 { font-size: 32px; }
  .footer__h2 { font-size: 34px; }
  .ink__h2 { font-size: 27px; }
  .ink__text { font-size: 19px; }

  .pa__index { padding-left: 40px; }
  .pa__bird { width: 48px; height: 50px; left: -16px; }
  .pa__row { padding: 18px 2px; gap: 12px; }
  .pa__row-title { font-size: 17.5px; }
  .pa__row-tags { display: none; }
  .pa__row-arrow { width: 30px; height: 30px; }

  .att__body { padding: 24px 24px 28px; }
  .att__photo { height: 320px; }

  /* Classless twin of the .st-static rule below it: the static layout is the
     CSS default at this width (see the CLS media mirrors ~line 612), so the
     pre-JS render must match what the class later re-asserts. */
  .st .st__firms-row { flex-direction: column; align-items: center; }
  .st.st-static .st__firms-row { flex-direction: column; align-items: center; }
  .st__merged { padding: 40px 24px; }
  .st__merged-name { font-size: 24px; }
  .st__merged-sub { font-size: 11px; }

  .rev__grid { grid-template-columns: 1fr; }
  .rev__badge { gap: 14px; padding: 14px 18px; }

  .diff__grid { grid-template-columns: 1fr; gap: 0; }
  .dp-diff-col { padding: 28px 0 !important; border-left: none !important; border-top: 1px solid rgba(251, 249, 246, 0.14); }
  .dp-diff-col:first-child { border-top: none; padding-top: 0 !important; }

  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  /* the wordmark cannot wrap (nowrap keeps the justification working), so it
     scales down instead of overflowing a phone-width column */
  .footer__wm-name { font-size: 23px; }
  .footer__bird { width: 96px; height: 99px; }
  .footer__cta { padding: 80px 0 64px; }
  .footer__cta-row { flex-direction: column; gap: 16px; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 48px; }
  /* 12.5px of underlined text is not a thumb target (mobile pass rule) */
  .footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 480px) {
  /* Compact lockup: full wordmark + hamburger must clear a classic scrollbar */
  .header__in { padding: 0 16px; column-gap: 12px; }
  .lockup { gap: 9px; }
  .lockup__bird, .header.is-scrolled .lockup__bird { width: 48px; height: 50px; }
  .wordmark-name { font-size: 14.5px; }
  .wordmark-sub { font-size: 8.5px; margin-top: 4px; }
  .menu-btn { width: 40px; height: 40px; }
  .utility__in { padding: 0 16px; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dp-bird, .dp-bird * , .st__cue svg { animation: none !important; }
  .dp-diff-col:hover .dp-stamp-ring { animation: none; }
  [data-reveal], .hero__eyebrow-row, .hero__h1-line, .hero__lede, .hero__ctas, .hero__stats, .hero__visual, .hero__quote { animation: none !important; opacity: 1 !important; }
  .squiggle path, .squiggle.is-drawn path { stroke-dashoffset: 0; animation: none; }
  .hero__rot { transition: none; }
}

/* ============================================================ REVIEWS (real data)
   Generated by _build/build_reviews.py from _build/reviews.json.
   Ratings render PER OFFICE — there is deliberately no blended firm-wide
   average. Each badge and each card links to the Google profile the number
   came from, so every figure on screen is independently checkable. */

/* --- split office badges (homepage + testimonials) --- */
.rev__badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.rev__badge--split {
  margin-top: 0; text-decoration: none; gap: 16px; padding: 14px 22px;
  transition: box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.rev__badge--split:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px);
  border-color: var(--navy-200);
}
.rev__badge--split:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }

/* --- per-card source link: the verifiability hook --- */
.rev__src {
  display: inline-block; margin-top: 14px;
  font-family: var(--font-body); font-size: 12px; font-weight: var(--fw-bold);
  color: var(--text-muted); text-decoration: none;
  border-bottom: 1px solid var(--border-hairline);
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.rev__src:hover { color: var(--crimson); border-color: var(--crimson); }
/* "Verify on Google" is a 15px inline link, well under the 44px touch floor the
   header pills already meet. An invisible centred overlay grows the hit area
   without moving the link or detaching its underline, so nothing shifts. */
@media (max-width: 820px) {
  .rev__src { position: relative; }
  .rev__src::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%); height: 44px;
  }
}
.rev__src:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }

/* --- reviewer photo; falls back to initials avatar via inline onerror --- */
.rev__avatar--img { object-fit: cover; display: block; padding: 0; }

/* --- Fla. Bar R. 4-7.13(b)(8)(F): clear and conspicuous, NOT fine print.
       Sits directly under the reviews, deliberately not shrunk below 13px. --- */
/* "Translated from X." disclosure. Shown only when the card text is not in the
   review's original language, mirroring how Google labels a translated review.
   Quiet by design: it is a provenance note, not part of the client's voice. */
.rev__note {
  margin: 12px 0 0; font-family: var(--font-body); font-size: 12px;
  font-style: italic; color: var(--text-muted);
}
.rev__note + .rev__src { margin-top: 6px; }

/* Testimonials page: the badge pair replaces the old single-score ratecard, so
   it centres under the heading instead of sitting left-aligned in a wall. There
   the row is a sibling of .sect__head, which already supplies 52px beneath the
   heading, so the base 28px top margin is zeroed to avoid stacking two gaps. */
.rev__badges--center { justify-content: center; margin-top: 0; }
/* Homepage: the same fence renders the row INSIDE .rev__head, directly after
   the h2, where there is no .sect__head margin to inherit. Zeroing it there
   left the badges flush against the heading. Restore an explicit gap, wider
   than the 22px eyebrow-to-h2 gap so the row reads as its own element rather
   than a third line of the heading block. */
.rev__head .rev__badges { margin-top: 34px; }

.rev__disclaimer {
  margin: 30px auto 0; max-width: 760px; text-align: center;
  font-family: var(--font-body); font-size: 13px; line-height: 1.65;
  color: var(--text-muted);
}
.rev__disclaimer strong { color: var(--navy-800); font-weight: var(--fw-bold); }

/* --- footer strip: one item per office relevant to the page ---
   Two rows: score + stars on top, the office label underneath. Each item
   stacks in its own column so the label reads as a caption for its stars
   rather than a continuation of the same line. */
.foot-rating--split { flex-wrap: wrap; align-items: flex-start; }
.foot-rating--split .foot-rating__body { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.foot-rating__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  font-family: var(--font-body); font-size: 12.5px; text-decoration: none;
  color: rgba(251, 249, 246, 0.75);
  transition: color var(--dur-fast) var(--ease-standard);
}
.foot-rating--split .foot-rating__top {
  display: flex; align-items: baseline; gap: 7px; white-space: nowrap;
}
.foot-rating--split .foot-rating__stars { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.foot-rating__loc { white-space: nowrap; }
.foot-rating__item:hover { color: var(--paper-100); }
.foot-rating__item:focus-visible { outline: 2px solid var(--paper-100); outline-offset: 3px; }
.foot-rating__item strong { color: var(--paper-100); font-weight: var(--fw-bold); font-size: 15px; }
.foot-rating__n { opacity: .72; }

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

@media (max-width: 640px) {
  .rev__badges { gap: 10px; }
  .rev__badge--split { width: 100%; }
}

/* ============================================================ REVIEWS CAROUSEL
   Practice-area pages. The cards are the SAME markup as the review wall, so
   _build/build_reviews.py fills them with the same real Google data. Only the
   container changes: a three-up grid becomes a horizontal scroller.

   The scroller IS .rev__grid. There is deliberately no inner track element,
   because build_reviews.py replaces that exact div and appends the Florida Bar
   disclaimer directly after it, so anything wrapped around it would have taken
   the disclaimer sideways with the cards. .revcar is a flex column instead and
   orders its children visually, which keeps the disclaimer under the progress
   rail no matter where in the source the fence lands.

   Native overflow scrolling does the actual work, so touch, trackpad, keyboard
   and no-JS all behave. The buttons and rail are affordances layered on top. */
.revcar { display: flex; flex-direction: column; }
.revcar .sect__head { order: -2; margin-bottom: 30px; }
.revcar__bar {
  order: -1; display: flex; align-items: center; flex-wrap: wrap;
  gap: 18px 28px; margin-bottom: 30px;
}
/* the badge pair arrives centred (its homepage/testimonials layout); in the
   control bar it is the left-hand element of a row, so it aligns left and
   drops the stacked top margin */
.revcar__bar .rev__badges { margin-top: 0; }
.revcar__bar .rev__badges--center { justify-content: flex-start; }
.revcar__nav { display: flex; gap: 10px; margin-left: auto; }
.revcar__btn {
  width: 46px; height: 46px; flex: none; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-0); color: var(--navy-700);
  border: 1px solid var(--border-hairline);
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.revcar__btn--prev svg { transform: rotate(180deg); }
/* a real colour change on hover, not a shadow shift */
.revcar__btn:hover:not(:disabled) {
  background: var(--crimson); border-color: var(--crimson); color: var(--paper-0);
}
.revcar__btn:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }
.revcar__btn:disabled { opacity: .32; cursor: default; }
/* both controls are inert without JS */
html.no-js .revcar__nav, html.no-js .revcar__prog { display: none; }

.revcar .rev__grid {
  order: 1; display: flex; align-items: stretch; gap: 24px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-left: 6px;
  /* room for the card's 4px hover lift and its shadow, so neither is clipped
     and neither can trigger a vertical scrollbar on the track */
  padding: 12px 6px 30px; margin: -12px -6px -16px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.revcar .rev__grid::-webkit-scrollbar { display: none; }
.revcar .rev__grid:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.revcar .rev__card {
  flex: 0 0 clamp(288px, 32%, 380px); scroll-snap-align: start;
  display: flex; flex-direction: column;
  /* REQUIRED, not cosmetic. Each card carries .u-sr-only spans, which are
     position:absolute. Without a positioned ancestor their containing block is
     the page itself, so overflow on the track does not clip them: the ninth
     card's span sat at x=2976 and gave the whole DOCUMENT a horizontal
     scrollbar, on a track that was scrolling correctly. Anchoring them to the
     card keeps them inside the scroller. Any absolutely positioned thing added
     inside a card later depends on this too. */
  position: relative;
}
/* Cards stretch to a common height, so the slack goes under the quote and the
   attribution block stays pinned to the bottom edge of every card.

   The clamp is what makes that common height reasonable. These reviews run from
   3 to 11 lines: unclamped, one 11-line review sets a 538px card and the short
   ones open a 240px hole. At 8 lines only the single longest is trimmed, and it
   still carries its own "Verify on Google" link to the full text on the profile
   it came from, which is where the untruncated review lives. */
.revcar .rev__text {
  margin-bottom: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8;
  overflow: hidden;
}

.revcar__prog {
  order: 2; height: 3px; margin-top: 4px; border-radius: var(--radius-pill);
  background: var(--border-hairline); overflow: hidden;
}
.revcar__prog-bar {
  display: block; height: 100%; width: 34%; margin-left: 0;
  border-radius: inherit; background: var(--navy-700);
}
/* The wall centres its disclaimer because that whole section is centred. This
   one is left-ragged from the eyebrow down, so the disclaimer follows the same
   edge. Still the same size and weight: it is not being demoted to fine print
   (Fla. Bar R. 4-7.13(b)(8)(F)). */
.revcar > .rev__disclaimer { order: 3; margin-left: 0; text-align: left; }

@media (max-width: 820px) {
  .revcar .rev__card { flex-basis: clamp(288px, 62%, 380px); }
}
@media (max-width: 560px) {
  .revcar .rev__card { flex-basis: 82%; }
  .revcar__bar { gap: 16px; }
  .revcar__nav { margin-left: 0; }
}

/* ============ Merger welcome dialog (old-domain arrivals only) ============ */
/* Shown by main.js when the URL carries ?from=purdylaw|delgadolaw. z-index sits
   above the mobile nav (120) and consent banner (110). Entrance opacities start
   at .001, never 0: see the LCP note above the keyframes. */
.merger { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 24px; }
.merger[hidden] { display: none; }
.merger__overlay {
  position: absolute; inset: 0; background: rgba(20, 36, 48, 0.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: dpFade .35s var(--ease-out) backwards;
}
.merger__card {
  position: relative; width: min(560px, 100%); max-height: calc(100dvh - 48px);
  overflow-y: auto; background: var(--surface-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); animation: dpUp .55s var(--ease-out) .08s backwards;
}
.merger__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: grid; place-items: center; width: 38px; height: 38px;
  background: var(--paper-100); color: var(--navy-800);
  border: 1px solid var(--taupe-300); border-radius: 50%; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.merger__close:hover { background: var(--navy-900); color: var(--paper-100); }
.merger__media { aspect-ratio: 560 / 300; overflow: hidden; }
.merger__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.merger__body { padding: 30px 36px 36px; }
.merger__eyebrow-row { margin-bottom: 14px; }
.merger__h { font-family: var(--font-display); font-weight: 600; font-size: 27px; line-height: 1.22; color: var(--text-strong); margin: 0 0 14px; }
.merger__h em { font-style: italic; color: var(--crimson); }
.merger__p { font-size: 16.5px; line-height: 1.65; color: var(--navy-600); margin: 0 0 24px; }
.merger__cta { display: flex; }
html.merger-open, html.merger-open body { overflow: hidden; }
@media (max-width: 560px) {
  .merger { padding: 14px; }
  .merger__media { aspect-ratio: 560 / 260; }
  .merger__body { padding: 24px 22px 28px; }
  .merger__h { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .merger__overlay, .merger__card { animation: none !important; }
}