/* ═══════════════════════════════════════════════════
   PLDR LAW · Design System
   Light, editorial, regional. Coral + warm cream.
   ═══════════════════════════════════════════════════ */

:root{
  /* Brand */
  --coral:#f47a4d;
  --coral-deep:#e26538;
  --coral-soft:rgba(244,122,77,.08);
  --coral-line:rgba(244,122,77,.22);
  /* Coral for text: WCAG AA on the cream surface (~5.5:1 vs --bg #fbf8f4).
     Use --coral for fills/borders/decorative shapes; use --coral-text wherever
     coral is applied to readable text (eyebrows, em, link hovers, numerals,
     mono labels, accordion icons). */
  --coral-text:#c54a1a;
  --gray:#a7a9ac;

  /* Surfaces */
  --bg:#fbf8f4;
  --bg-warm:#f4f0ea;
  --surface:#ffffff;
  --card:#ffffff;
  --card-soft:#f8f5f1;

  /* Text */
  --ink:#1a1612;
  --text:#3d342e;
  --text-soft:#5a4f48;
  --muted:#6a5e54;
  --hairline:rgba(0,0,0,.08);
  --hairline-soft:rgba(0,0,0,.04);

  /* Accents */
  --grad-coral:linear-gradient(135deg,#f47a4d,#e26538);
  --grad-warm:linear-gradient(180deg,#fbf8f4,#f4f0ea);

  /* Type */
  --font-display:'Switzer','Inter','Helvetica Neue',sans-serif;
  --font-body:'Instrument Sans','Inter','Helvetica Neue',sans-serif;
  --font-mono:'Montserrat','Instrument Sans',sans-serif;
  --font-serif:'Source Serif Pro','Georgia',serif;

  /* Geometry */
  --radius:6px;
  --radius-lg:14px;
  --radius-xl:22px;
  --shadow-soft:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.04);
  --shadow-lift:0 6px 24px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
  --shadow-deep:0 30px 60px rgba(0,0,0,.12),0 10px 24px rgba(0,0,0,.06);

  /* Layout */
  --container:1240px;
  --container-narrow:920px;
  --container-tight:680px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);-webkit-tap-highlight-color:transparent}
/* Lenis smooth scroll — REQUIRED. Do not re-add scroll-behavior:smooth; it fights Lenis. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:'kern','liga','calt';overflow-x:clip}
/* Defensive — no element should bleed past the viewport horizontally */
html{overflow-x:clip}

/* Accessibility utilities */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-40px;left:16px;z-index:1000;background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px;font-family:var(--font-display);font-weight:600;font-size:.92rem;text-decoration:none;box-shadow:var(--shadow-lift);transform:translateY(-8px);transition:transform .2s ease,top .2s ease}
.skip-link:focus,.skip-link:focus-visible{top:16px;outline:2px solid var(--coral);outline-offset:2px;color:#fff;transform:translateY(0)}
main:focus{outline:none}
main:focus-visible{outline:none}

/* Typography */
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:800;color:var(--ink);letter-spacing:-.025em;line-height:1.1;margin:0 0 .6em}
h1{font-size:clamp(2.4rem,5.5vw,4.4rem);letter-spacing:-.045em;line-height:.96}
h2{font-size:clamp(1.8rem,3.5vw,2.8rem);letter-spacing:-.035em;line-height:1.05}
h3{font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:-.02em}
h4{font-size:1.05rem;font-weight:700}

p{margin:0 0 1em;color:var(--text);font-size:1.02rem;line-height:1.65}
p.lead{font-family:var(--font-display);font-weight:500;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;color:var(--text-soft);letter-spacing:-.01em;max-width:680px}

a{color:var(--ink);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--coral-text)}
a:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px}
button:focus-visible,[role="button"]:focus-visible,summary:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:8px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--coral);outline-offset:2px}

em{font-style:normal;color:var(--coral-text)}
strong{font-weight:600;color:var(--ink)}

.eyebrow{font-family:var(--font-mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--coral-text);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--coral)}
.eyebrow.no-line::before{display:none}

.label{font-family:var(--font-mono);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:.92rem;letter-spacing:-.005em;cursor:pointer;border:1px solid transparent;transition:background .25s cubic-bezier(.23,1,.32,1),color .25s cubic-bezier(.23,1,.32,1),border-color .25s cubic-bezier(.23,1,.32,1),transform .25s cubic-bezier(.23,1,.32,1),box-shadow .25s cubic-bezier(.23,1,.32,1);white-space:nowrap;line-height:1}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 8px 20px rgba(244,122,77,.22)}
.btn-primary:hover{background:var(--coral-deep);box-shadow:0 12px 28px rgba(244,122,77,.32);transform:translateY(-1px);color:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000;color:#fff;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(0,0,0,.15)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-link{font-family:var(--font-display);font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;padding:0;border-radius:0}
.btn-link::after{content:"→";transition:transform .25s ease}
.btn-link:hover{color:var(--coral-text)}
.btn-link:hover::after{transform:translateX(4px)}

.btn .arrow{transition:transform .25s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* Layout primitives */
.container{max-width:var(--container);margin:0 auto;padding:0 32px}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 32px}
.container-tight{max-width:var(--container-tight);margin:0 auto;padding:0 32px}

section{padding:88px 0}
section.tight{padding:56px 0}
section.large{padding:120px 0}

.divider{height:1px;background:var(--hairline);margin:0}

/* Header / Nav */
/* ═════════════════════════════════════════════════════
   SITE HEADER · floating pill nav (Framer-style)
   ═════════════════════════════════════════════════════ */
.site-header{
  position:fixed;
  /* The compact bar is the only bar (Kyle, 2026-09-29): same size on landing as
     after scrolling, and it never slides away. */
  top:12px;left:50%;
  transform:translateX(-50%);
  z-index:100;
  width:calc(100% - 32px);
  max-width:1280px;
  pointer-events:none;
  transition:top .5s var(--ease-out-quint),transform .5s var(--ease-out-quint);
}
.site-header.scrolled{top:12px}
.site-header.hidden{transform:translateX(-50%) translateY(-110%)}
.site-header-inner{
  pointer-events:auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:4px 6px 4px 16px;
  background:rgba(251,248,244,.78);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border:1px solid rgba(0,0,0,.05);
  border-radius:100px;
  box-shadow:
    0 1px 1px rgba(255,255,255,.6) inset,
    0 -1px 1px rgba(0,0,0,.04) inset,
    0 1px 2px rgba(20,20,40,.04),
    0 14px 36px rgba(20,20,40,.08),
    0 4px 12px rgba(20,20,40,.04);
  transition:padding .35s var(--ease-spring),box-shadow .35s var(--ease-spring);
}
.site-header.scrolled .site-header-inner{
  box-shadow:
    0 1px 1px rgba(255,255,255,.6) inset,
    0 -1px 1px rgba(0,0,0,.04) inset,
    0 1px 2px rgba(20,20,40,.04),
    0 18px 44px rgba(20,20,40,.12);
}

.site-logo{
  display:flex;align-items:center;
  padding:4px 6px;
  border-radius:100px;
  transition:opacity .25s var(--ease-spring),transform .35s var(--ease-spring);
}
.site-logo:hover{opacity:.78}
.site-logo:active{transform:scale(.94)}
.site-logo img{height:26px;width:auto;display:block}

/* Nav · centered, pill links with magnetic hover */
.site-nav{
  display:flex;align-items:center;gap:2px;
  justify-self:center;
}
.site-nav a{
  position:relative;
  display:inline-flex;align-items:center;
  padding:9px 16px;
  border-radius:100px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:.86rem;
  color:var(--text-soft);
  letter-spacing:-.005em;
  white-space:nowrap;
  text-decoration:none;
  transition:
    color .35s var(--ease-spring),
    background-color .35s var(--ease-spring);
  z-index:1;
}
.site-nav a::before{
  content:"";
  position:absolute;inset:0;
  border-radius:100px;
  background:rgba(0,0,0,.04);
  transform:scale(.85);
  opacity:0;
  transition:transform .4s var(--ease-spring),opacity .25s var(--ease-spring);
  z-index:-1;
}
.site-nav a:hover{color:var(--ink)}
.site-nav a:hover::before{transform:scale(1);opacity:1}
.site-nav a.active{
  color:#fff;
  font-weight:600;
}
.site-nav a.active::before{
  background:var(--ink);
  transform:scale(1);
  opacity:1;
}

/* ═══════════════════════════════════════════════════
   FIRST-ARRIVAL SPLASH · GSAP trace logo reveal
   Plays once per session.  Pen-tip light points draw
   each glyph, color blooms in behind, sheen sweeps.
   ═══════════════════════════════════════════════════ */
.splash{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  visibility:hidden;
  pointer-events:none;
}
/* Dark backstop during the splash and its tear-down. Every section paints its
   own background, so a dark <body>/<html> here is invisible in normal use — but
   it masks the brief compositor gap when the splash layer is removed, which
   otherwise flashed the cream body background white. Removed ~600ms after the
   splash is gone (see cleanup()), by which point the hero fully covers. */
html.splash-pending,html.splash-pending body,
html.hero-backstop,html.hero-backstop body{background:#0a0807}
/* Background lives on .splash-bg so JS can fade it independently of the
   logo during the nav-morph exit.  Three-stop radial deepens the dark
   floor; ::before adds the orange glow behind the mark; ::after keeps
   the corner vignette. */
.splash-bg{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 60% at 50% 44%,#121113 0%,#0a090b 52%,#060507 100%);
  will-change:opacity;
}
.splash-bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(22% 26% at 50% 42%,rgba(244,122,77,.18),rgba(244,122,77,0) 70%);
  transform-origin:50% 42%;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .9s ease-out;
}
/* Dissolve · orange warmth blooms outward as the page emerges. */
.splash.is-dissolving .splash-bg::before{
  transform:scale(1.4);
  opacity:1.05;
}
.splash-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 75% at 50% 50%,transparent 52%,rgba(0,0,0,.55) 100%);
}

.splash-mark{
  position:relative;z-index:2;
  width:min(82vw,680px);
  display:flex;flex-direction:column;align-items:center;
  perspective:1200px;
  will-change:transform,opacity;
}
.splash-mark .lr-svg{
  width:100%;height:auto;display:block;overflow:visible;
  transform-box:fill-box;
  transform-origin:50% 50%;
}
.splash-mark .logo{filter:drop-shadow(0 0 3px rgba(244,122,77,.4))}
.splash-mark path,.splash-mark polygon{
  stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;
  fill-opacity:0;
}

/* Orange PLDR · fill + stroke on the same element */
.splash-mark .cls-1{fill:#f47a4d;stroke:#f47a4d}

/* Brushed-aluminum LAW plate · base + grain + highlight + shadow stack */
.splash-mark .plate{transform-box:fill-box;transform-origin:center}
.splash-mark .plate-base{fill:url(#aluGrad)}
.splash-mark .plate-grain{fill:#7d7f82;filter:url(#brushedFilter);mix-blend-mode:overlay;opacity:.18}
.splash-mark .plate-hi{fill:#fff;opacity:.22}
.splash-mark .plate-sh{fill:#000;opacity:.16}

/* Engraved letters · grooved gradient + bevel filter for the carved look */
.splash-mark .engrave{fill:url(#grooveGrad);filter:url(#etchFilter)}
.splash-mark polygon.platecol{fill:url(#aluGrad);fill-opacity:1}

/* Hot-tool cutlines · white-glowing outlines that draw, then strip out */
.splash-mark .cutline{
  fill:none;stroke:#fff;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.9)) drop-shadow(0 0 1px #cfe6ff);
}

/* Traveling light point at the pen tip */
.splash-mark .spark{
  fill:#fff;opacity:0;
  filter:drop-shadow(0 0 5px rgba(255,206,170,.95)) drop-shadow(0 0 2px #fff);
}
/* Comet trail · cloned from each drawn path with short dasharray, follows tip */
.splash-mark .trail{
  fill:none;stroke:#ffd6bf;stroke-width:2.4;stroke-linecap:round;opacity:0;
  filter:drop-shadow(0 0 5px rgba(255,180,140,.9)) drop-shadow(0 0 2px rgba(255,150,110,.6));
}

/* Tagline meta · rule + dotted line below the mark */
.splash-mark .lr-meta{
  margin-top:clamp(20px,3vw,36px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.5vw,18px);
}
.splash-mark .lr-rule{
  height:1px;width:min(56%,320px);
  transform:scaleX(0);transform-origin:center;
  background:linear-gradient(90deg,transparent,rgba(167,169,172,.22) 20%,#f47a4d 50%,rgba(167,169,172,.22) 80%,transparent);
}
.splash-mark .lr-tagline{
  font-family:'Hanken Grotesk','Inter','Helvetica Neue',ui-sans-serif,system-ui,sans-serif;
  font-weight:500;font-size:clamp(10px,1.2vw,13px);
  letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.52);text-align:center;line-height:1.7;
  padding-left:.34em;opacity:0;
}
.splash-mark .lr-tagline .dot{color:#f47a4d;font-weight:600;margin:0 .15em}

/* Pre-paint state · set by head-inline script on first arrival */
html.splash-pending .splash{visibility:visible;pointer-events:auto}
html.splash-pending body{overflow:hidden}

/* Hero staging · pause hero entrance animations until the splash dissolve
   removes this class.  Animations resume from their original delay timeline,
   so the staggered word/sub/CTA cascade plays *through* the fading splash. */
html.hero-staging .hero-tag,
html.hero-staging .hero h1 .word,
html.hero-staging .hero p,
html.hero-staging .hero-actions,
html.hero-staging .hero-scroll-hint,
html.hero-staging .hero-frame-meta{
  animation-play-state:paused;
}
/* Frame meta + marquee · fade in fresh from opacity 0 when staging lifts. */
html.hero-staging .hero-frame-meta{opacity:0;transition:opacity .9s cubic-bezier(.22,1,.36,1) .15s}
html:not(.hero-staging) .hero-frame-meta{opacity:1}

/* Splash exit · zooms slightly larger as it fades · "camera through the logo"
   feel.  Page underneath is rendered normally (no pre-stage), so the splash's
   dark background covers it; when the splash fades, the page is just there. */
.splash.is-leaving{
  opacity:0;
  transform:scale(1.06);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);
}
.splash.is-leaving .splash-mark{
  /* Logo lifts up slightly as it fades out · adds direction to the exit */
  transform:translateY(-8px);
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}

/* Mobile · constrain the orange bloom so it doesn't stretch vertically.
   The viewport-percentage radial on small phones reads as an elongated
   ellipse; here we lock the glow into a circle sized off the smaller
   viewport dimension (vmin) and trim the opacity slightly. */
@media (max-width:768px){
  .splash-bg{
    /* Floor gradient stays full-bleed but slightly tighter focal point. */
    background:radial-gradient(55% 40% at 50% 44%,#121113 0%,#0a090b 55%,#060507 100%);
  }
  .splash-bg::before{
    /* Replace the viewport-percentage ellipse with a fixed circular bloom.
       48vmin keeps it proportional to the shorter viewport edge so it
       never elongates, and stays meaningfully smaller than before.
       Opacity dialed back ~15% from the desktop reading. */
    background:radial-gradient(circle at center,rgba(244,122,77,.15),rgba(244,122,77,0) 70%);
    width:48vmin;height:48vmin;
    aspect-ratio:1;
    inset:auto;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    transform-origin:50% 50%;
  }
  .splash.is-dissolving .splash-bg::before{
    /* Keep the bloom centered on dissolve — translate stays put,
       only scale grows. */
    transform:translate(-50%,-50%) scale(1.35);
    opacity:.95;
  }
}

/* Reduced motion · skip the splash entirely (JS removes the element) */
@media (prefers-reduced-motion:reduce){
  .splash{display:none !important}
}

/* ═══════════════════════════════════════════════════
   SCROLL PROGRESS · thin coral hairline at very top
   Fills as the visitor scrolls the page. Updated by
   the Lenis scroll callback in scripts.njk.
   ═══════════════════════════════════════════════════ */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:9998;
  background:rgba(244,122,77,.06);
  pointer-events:none;
}
.scroll-progress .sp-bar{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--coral) 0%,#ffa580 100%);
  box-shadow:0 0 12px rgba(244,122,77,.5);
  transform-origin:left center;
  will-change:width;
  transition:width .12s linear;
}
@media (prefers-reduced-motion:reduce){
  .scroll-progress{display:none}
}

/* ═══════════════════════════════════════════════════
   MAGNETIC BUTTONS · cursor-attracted primary CTAs
   Wired by JS in scripts.njk; this just sets the
   transform-origin and snappy spring so the pull
   feels intentional rather than soft.
   ═══════════════════════════════════════════════════ */
.btn-primary,.ft-cta-primary,.nm-feature-cta,.hr-cta-btn{
  will-change:transform;
}
.btn-primary[data-magnetic],.ft-cta-primary[data-magnetic],
.nm-feature-cta[data-magnetic],.hr-cta-btn[data-magnetic]{
  transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s ease,box-shadow .35s ease;
}

/* ═══════════════════════════════════════════════════
   MEGA MENU · drops below the floating nav pill
   Coral hairline → glass card → editorial 5-col grid
   ═══════════════════════════════════════════════════ */
.nav-has-mega{position:static;display:inline-flex;align-items:center}
.nav-has-mega > a{display:inline-flex;align-items:center;gap:4px}
.nav-has-mega .nav-caret{
  font-family:var(--font-mono);font-size:.7em;color:var(--coral);
  /* The caret floats in the link's right padding (negative margin cancels its
     layout width) so dropdown items occupy the same width as plain items and
     all the nav words read as evenly spaced. */
  margin-right:-10px;
  transform:translateY(-1px) rotate(0);
  transition:transform .35s var(--ease-spring),color .25s ease;
  opacity:.7;
}
.nav-has-mega:hover .nav-caret,
.nav-has-mega.is-open .nav-caret,
.nav-has-mega:focus-within .nav-caret{transform:translateY(0) rotate(180deg);opacity:1;color:var(--coral)}

/* The drawer */
.nav-mega{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%) translateY(-12px) scale(.97);
  width:min(1240px,calc(100vw - 56px));
  z-index:200;
  opacity:0;pointer-events:none;
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:22px;
  box-shadow:
    0 1px 0 rgba(244,122,77,.6) inset,
    0 28px 80px rgba(26,22,18,.18),
    0 8px 24px rgba(26,22,18,.08);
  overflow:hidden;
  transition:opacity .35s var(--ease-spring),transform .45s var(--ease-spring);
  isolation:isolate;
}
.nav-mega::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--coral) 25%,#ffa580 50%,var(--coral) 75%,transparent 100%);
}
.nav-has-mega:hover .nav-mega,
.nav-has-mega.is-open .nav-mega,
.nav-has-mega:focus-within .nav-mega{
  opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}

/* Inner grid · 4 group columns + 1 feature panel */
.nav-mega-inner{
  display:grid;
  grid-template-columns:1.2fr .85fr .9fr 1.4fr;
  gap:0;
  min-height:340px;
}
.nav-mega-loc .nav-mega-inner{
  grid-template-columns:1.05fr 1fr;
  min-height:440px;
}
.nav-mega-team .nav-mega-inner{
  grid-template-columns:1fr;
  min-height:0;
  align-items:stretch;
}
/* The 18-person directory is taller than a short viewport — cap the panel and
   let it scroll inside itself (data-lenis-prevent on the markup keeps Lenis
   from swallowing the wheel), so the last staff rows are always reachable. */
.nav-mega-team{
  max-height:calc(100vh - 120px);
  max-height:calc(100svh - 120px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* Right editorial panel was removed from the team mega markup — the team
   directory now uses the full pill width on every screen. */

/* ─────────────────────────────────────────────────────────────
   TEAM MEGA · v2 · Full directory + editorial feature panel
   ───────────────────────────────────────────────────────────── */
.nm-team-main{padding:36px 32px;background:linear-gradient(180deg,#fff,var(--bg-warm) 220%)}
.nm-team-sec{margin-bottom:32px}
.nm-team-sec:last-child{margin-bottom:0}
.nm-team-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--hairline)}
.nm-team-count{font-family:var(--font-mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:600}
.nm-team-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.nm-tm{display:flex;align-items:center;gap:14px;padding:10px;border-radius:12px;text-decoration:none;color:var(--ink);transition:background .2s,transform .35s var(--ease-spring)}
.nm-tm:hover{background:var(--coral-soft);transform:translateY(-1px)}
.nm-tm-photo{flex-shrink:0;width:66px;height:66px;border-radius:50%;overflow:hidden;background:var(--bg-warm);border:1.5px solid var(--hairline);transition:border-color .25s,box-shadow .25s}
.nm-tm:hover .nm-tm-photo{border-color:var(--coral);box-shadow:0 0 0 3px rgba(244,122,77,.18)}
.nm-tm-photo img{width:100%;height:100%;object-fit:cover;object-position:center 44%;transform:scale(1.06);transform-origin:center 44%;display:block;transition:transform .8s cubic-bezier(.23,1,.32,1)}
.nm-tm:hover .nm-tm-photo img{transform:scale(1.12)}
.nm-tm-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.nm-tm-name{font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--ink);letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.nm-tm:hover .nm-tm-name{color:var(--coral-deep)}
.nm-tm-role{font-family:var(--font-mono);font-size:.54rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Right feature panel */
.nm-team-feature{position:relative;display:flex;flex-direction:column;border-left:1px solid var(--hairline);background:#0a0807;color:#fff;overflow:hidden;min-height:100%}
.nm-tf-photo{position:relative;flex:0 0 160px;overflow:hidden}
.nm-tf-photo img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.05);transition:transform 8s linear}
.nav-has-mega:hover .nm-tf-photo img,.nav-has-mega.is-open .nm-tf-photo img{transform:scale(1)}
.nm-tf-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,7,.1) 0%,rgba(10,8,7,.7) 100%)}
.nm-tf-content{flex:1;padding:24px 26px 24px;display:flex;flex-direction:column;gap:12px}
.nm-tf-eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.22em;color:#ff9870;font-weight:700}
.nm-tf-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px rgba(244,122,77,.28)}
.nm-tf-quote{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.05rem;line-height:1.4;letter-spacing:-.01em;color:#fff;margin:0;text-wrap:pretty;max-width:38ch}
.nm-tf-quote em{color:var(--coral);font-style:italic}
.nm-tf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.nm-tf-stats span{display:flex;flex-direction:column;gap:4px;font-family:var(--font-mono);font-size:.54rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.55);font-weight:600}
.nm-tf-stats strong{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.5rem;letter-spacing:-.02em;color:#fff;line-height:1}
.nm-tf-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.nm-tf-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;background:var(--coral);color:#fff;border-radius:999px;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:.86rem;letter-spacing:-.005em;white-space:nowrap;transition:background .25s,transform .25s,box-shadow .25s;box-shadow:0 12px 28px rgba(244,122,77,.32)}
.nm-tf-cta:hover{background:#ff8a5e;transform:translateY(-1px);box-shadow:0 16px 36px rgba(244,122,77,.42)}
.nm-tf-cta .arr{transition:transform .35s var(--ease-spring)}
.nm-tf-cta:hover .arr{transform:translateX(3px)}
.nm-tf-link{font-family:var(--font-mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.65);font-weight:700;text-decoration:none;text-align:center;padding:8px 0;white-space:nowrap;transition:color .2s}
.nm-tf-link:hover{color:#ff9870}

/* ─────────────────────────────────────────────────────────────
   LOCATIONS MEGA · v2 · Two office cards + service-area panel
   ───────────────────────────────────────────────────────────── */
.nm-loc-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-right:1px solid var(--hairline);transition:background .25s}
/* The office cards are <a> inside .site-nav, so the top-level nav-link pill
   style (.site-nav a { border-radius:100px; padding; ::before pill }) was
   bleeding in and rounding them into giant pills. Reset it for these cells. */
.nm-loc-card{border-radius:0 !important;padding:0 !important}
.site-nav .nm-loc-card::before{display:none}
.nm-loc-card:hover{background:var(--bg-warm)}
.nm-loc-photo{position:relative;height:180px;overflow:hidden;background:#0a0807}
.nm-loc-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.23,1,.32,1);filter:saturate(.92)}
.nm-loc-card:hover .nm-loc-photo img{transform:scale(1.06)}
.nm-loc-photo-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,7,0) 30%,rgba(10,8,7,.55) 100%)}
.nm-loc-tag{position:absolute;left:18px;bottom:14px;font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.22em;color:#fff;font-weight:700;z-index:2;background:rgba(10,8,7,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.nm-loc-body{padding:28px 28px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.nm-loc-body .nm-eyebrow{margin-bottom:10px}
.nm-loc-addr{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em;line-height:1.3}
.nm-loc-locality{font-family:var(--font-display);font-weight:400;font-size:.92rem;color:var(--text-soft);letter-spacing:-.005em}
.nm-loc-tel{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.25rem;color:var(--coral-text);margin-top:4px;letter-spacing:-.01em;line-height:1}
.nm-loc-meta{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline);font-family:var(--font-mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:600}
.nm-loc-counts{color:var(--coral)}
.nm-loc-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 0;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.22em;color:var(--coral);font-weight:700;border-top:1px dashed transparent;transition:border-color .25s}
.nm-loc-card:hover .nm-loc-cta{border-top-color:var(--coral-line)}
/* clear circular "go" button instead of a near-invisible text arrow */
.nm-loc-go{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--coral-line);color:var(--coral);flex-shrink:0;transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .35s var(--ease-spring)}
.nm-loc-go svg{width:14px;height:14px}
.nm-loc-card:hover .nm-loc-go{background:var(--coral);border-color:var(--coral);color:#fff;transform:translateX(3px)}

/* Service area panel */
.nm-loc-area{background:#0a0807;color:#fff;padding:36px 32px 32px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.nm-loc-area::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 70% 30%,rgba(244,122,77,.12),transparent 70%);pointer-events:none}
.nm-la-content{position:relative;display:flex;flex-direction:column;gap:14px;flex:1}
.nm-loc-area .nm-eyebrow{color:#ff9870}
.nm-loc-area .nm-num{background:var(--coral)}
.nm-la-title{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.85rem;letter-spacing:-.025em;line-height:1.05;color:#fff;margin:0;text-wrap:balance}
.nm-la-title em{color:var(--coral);font-style:italic}
.nm-la-sub{margin:0;font-family:var(--font-display);font-weight:400;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.7);letter-spacing:-.005em}
.nm-la-counties{list-style:none;margin:14px 0 6px;padding:14px 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.nm-la-counties li{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.7);font-weight:600;padding-left:14px;position:relative}
.nm-la-counties li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:1px;background:var(--coral)}
.nm-la-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:var(--coral);color:#fff;border-radius:999px;text-decoration:none;font-family:var(--font-display);font-weight:600;font-size:.92rem;letter-spacing:-.005em;transition:background .25s,transform .25s,box-shadow .25s;box-shadow:0 12px 28px rgba(244,122,77,.32)}
.nm-la-cta:hover{background:#ff8a5e;transform:translateY(-1px);box-shadow:0 16px 36px rgba(244,122,77,.42)}
.nm-la-cta .arr{transition:transform .35s var(--ease-spring)}
.nm-la-cta:hover .arr{transform:translateX(3px)}
.nm-staff-strip{
  margin-top:24px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 16px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--bg-warm) 0%,var(--coral-soft) 100%);
  border:1px solid var(--coral-line);
  text-decoration:none;color:var(--ink);
  transition:background .25s ease,transform .35s var(--ease-spring),border-color .25s ease;
}
.nm-staff-strip:hover{background:linear-gradient(135deg,var(--coral-soft) 0%,#ffd6c1 100%);border-color:var(--coral);transform:translateX(2px)}
.nm-staff-strip-lbl{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:600;font-size:.86rem;
  color:var(--ink);letter-spacing:-.005em;
}
.nm-staff-strip-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--coral);
}
.nm-staff-strip-cta .arr{transition:transform .35s var(--ease-spring)}
.nm-staff-strip:hover .nm-staff-strip-cta .arr{transform:translateX(3px)}

/* Team mega · attorney 3-col grid + staff list + featured */
.nav-mega-attorneys{padding:32px 28px 28px}
.nm-att-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
}
.nm-att-grid a{
  display:flex;align-items:center;gap:10px;
  padding:8px 8px 8px 6px;border-radius:10px;
  text-decoration:none;color:var(--ink);
  transition:background .2s ease,transform .35s var(--ease-spring);
}
.nm-att-grid a:hover{background:var(--coral-soft);transform:translateY(-1px)}
.nm-att-photo{
  flex-shrink:0;
  width:42px;height:42px;border-radius:50%;
  overflow:hidden;background:var(--bg-warm);
  border:1px solid var(--hairline);
  transition:border-color .25s ease;
}
.nm-att-grid a:hover .nm-att-photo{border-color:var(--coral)}
.nm-att-photo img{width:100%;height:100%;object-fit:cover;display:block}
.nm-att-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.nm-att-name{
  font-family:var(--font-display);font-weight:600;font-size:.78rem;
  color:var(--ink);letter-spacing:-.01em;line-height:1.18;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nm-att-role{
  font-family:var(--font-mono);font-size:.52rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nm-att-grid a:hover .nm-att-role{color:var(--coral)}

.nav-mega-staff{padding:32px 24px 28px}
.nm-staff-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.nm-staff-list a{
  display:flex;flex-direction:column;gap:1px;
  padding:7px 10px;border-radius:8px;
  text-decoration:none;color:var(--ink);
  transition:background .2s ease,transform .35s var(--ease-spring);
}
.nm-staff-list a:hover{background:var(--coral-soft);transform:translateX(2px)}
.nm-staff-name{
  font-family:var(--font-display);font-weight:600;font-size:.86rem;
  color:var(--ink);letter-spacing:-.005em;line-height:1.2;
}
.nm-staff-list a:hover .nm-staff-name{color:var(--coral-deep)}
.nm-staff-role{
  font-family:var(--font-mono);font-size:.54rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
}
.nav-mega-col{
  padding:32px 28px 28px;
  border-right:1px solid var(--hairline);
  background:linear-gradient(180deg,#fff 0%,var(--bg-warm) 200%);
}
.nav-mega-col:last-of-type{border-right:0}

/* Group eyebrow */
.nm-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;color:var(--ink);
  margin-bottom:18px;
}
.nm-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0 6px;border-radius:6px;
  background:var(--coral);color:#fff;
  font-size:.58rem;font-weight:800;letter-spacing:.06em;
}

/* Practice area list */
.nm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.nm-list a{
  display:flex;align-items:baseline;gap:12px;
  padding:8px 12px 8px 10px;border-radius:8px;
  text-decoration:none;color:var(--text);
  transition:background .2s ease,color .2s ease,transform .35s var(--ease-spring);
}
.nm-list a:hover{
  background:var(--coral-soft);
  color:var(--coral-text);
  transform:translateX(3px);
}
.nm-pa-num{
  flex-shrink:0;width:22px;
  font-family:var(--font-mono);font-size:.58rem;font-weight:700;
  color:var(--muted);letter-spacing:.08em;font-variant-numeric:tabular-nums;
  transition:color .2s ease;
}
.nm-list a:hover .nm-pa-num{color:var(--coral)}
.nm-pa-name{
  font-family:var(--font-display);font-weight:500;font-size:.94rem;
  color:var(--ink);letter-spacing:-.005em;line-height:1.25;
}
.nm-list a:hover .nm-pa-name{color:var(--coral-deep)}

/* Featured panel · coral wash */
.nav-mega-feature{
  position:relative;
  padding:32px 32px 28px;
  color:#fff;
  display:flex;align-items:stretch;justify-content:flex-start;
  overflow:hidden;
  isolation:isolate;
}
.nm-feature-bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 70% 50% at 100% 100%,rgba(244,122,77,.36) 0%,transparent 70%),
    radial-gradient(ellipse 60% 50% at 0% 0%,rgba(255,165,128,.22) 0%,transparent 60%),
    linear-gradient(135deg,#1a1612 0%,#0a0807 100%);
}
.nm-feature-inner{display:flex;flex-direction:column;gap:14px;width:100%;justify-content:center}
.nm-feature-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;color:#ff9870;
}
.nm-feature-dot{
  width:6px;height:6px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 0 3px rgba(244,122,77,.22);
  animation:livePulse 2.4s ease-in-out infinite;
}
.nm-feature-title{
  font-family:var(--font-serif,'Source Serif 4',Georgia,serif);
  font-style:normal;font-weight:400;
  font-size:1.7rem;letter-spacing:-.02em;line-height:1.05;color:#fff;
  margin:0;text-wrap:balance;
}
.nm-feature-title em{
  font-style:italic;
  display:inline-block;
  padding-inline-end:.08em;        /* italic swash room */
  background:linear-gradient(120deg,var(--coral) 0%,#ffa580 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.nm-feature-sub{
  font-family:var(--font-display);font-weight:400;font-size:.86rem;line-height:1.5;
  color:rgba(255,255,255,.72);margin:0 0 4px;max-width:32ch;
}
.nm-feature-actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.nm-feature-cta{
  display:inline-flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;
  background:var(--coral);color:#fff;text-decoration:none;
  border-radius:10px;
  font-family:var(--font-display);font-weight:600;font-size:.86rem;letter-spacing:-.005em;
  transition:background .25s ease,transform .35s var(--ease-spring),box-shadow .35s ease;
  box-shadow:0 8px 22px rgba(244,122,77,.32);
}
.nm-feature-cta:hover{background:var(--coral-deep);transform:translateY(-1px);box-shadow:0 14px 32px rgba(244,122,77,.4)}
.nm-feature-cta .arr{transition:transform .35s var(--ease-spring)}
.nm-feature-cta:hover .arr{transform:translateX(4px)}
.nm-feature-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.65);
  text-decoration:none;
  transition:color .2s ease,transform .25s ease;
}
.nm-feature-link:hover{color:#ff9870;transform:translateX(2px)}
.nm-feature-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--font-mono);font-size:.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.55);
}
.nm-feature-meta strong{color:#fff;font-weight:800}
.nm-feature-meta .sep{color:rgba(255,255,255,.25)}

/* Locations mega · office cards */
.nm-office-card{
  padding:32px 28px 28px;
  border-right:1px solid var(--hairline);
  background:linear-gradient(180deg,#fff 0%,var(--bg-warm) 200%);
  display:flex;flex-direction:column;gap:6px;
  text-decoration:none;color:var(--ink);
  position:relative;
  transition:background .25s ease;
}
.nm-office-card:hover{background:var(--coral-soft)}
.nm-office-card::after{
  content:"";position:absolute;top:32px;right:28px;
  width:32px;height:32px;border-radius:50%;
  background:var(--coral-soft);color:var(--coral);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s ease,transform .35s var(--ease-spring);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f47a4d' stroke-width='2' stroke-linecap='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:14px 14px;
}
.nm-office-card:hover::after{opacity:1;transform:translateX(0)}
.nm-office-addr{
  margin-top:6px;
  font-family:var(--font-display);font-weight:700;font-size:1.04rem;
  color:var(--ink);letter-spacing:-.01em;line-height:1.3;
}
.nm-office-locality{
  font-family:var(--font-display);font-weight:400;font-size:.86rem;
  color:var(--text-soft);line-height:1.5;
}
.nm-office-tel{
  margin-top:4px;
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;
  color:var(--ink);letter-spacing:-.005em;font-variant-numeric:tabular-nums;
}
.nm-office-meta{
  margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--muted);
}
.nm-office-counties{color:var(--muted)}

/* Status pill — green/coral/muted */
.nm-status{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 8px;border-radius:999px;
  font-size:.55rem;font-weight:700;letter-spacing:.14em;
  border:1px solid;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.nm-status[data-state="open"]{color:#1a6e3f;background:rgba(34,160,89,.08);border-color:rgba(34,160,89,.28)}
.nm-status[data-state="open"] .nm-status-dot{background:#22a059;box-shadow:0 0 0 3px rgba(34,160,89,.22);animation:livePulse 2s ease-in-out infinite}
.nm-status[data-state="lunch"]{color:#c54a1a;background:rgba(244,122,77,.1);border-color:rgba(244,122,77,.32)}
.nm-status[data-state="lunch"] .nm-status-dot{background:var(--coral);box-shadow:0 0 0 3px rgba(244,122,77,.22)}
.nm-status[data-state="closed"],.nm-status[data-state="appt"],.nm-status[data-state="loading"]{color:var(--muted);background:var(--bg-warm);border-color:var(--hairline)}
.nm-status[data-state="closed"] .nm-status-dot,.nm-status[data-state="appt"] .nm-status-dot,.nm-status[data-state="loading"] .nm-status-dot{background:var(--muted)}
.nm-status-dot{width:5px;height:5px;border-radius:50%;display:inline-block;flex-shrink:0}

/* Hide mega menu on mobile — drawer takes over */
@media (max-width:980px){
  .nav-has-mega .nav-mega,.nav-has-mega .nav-caret{display:none}
}

/* Right cluster · phone + CTA */
.site-cta{
  display:flex;align-items:center;gap:10px;
  justify-self:end;
}
.site-cta .phone{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);
  font-size:.94rem;
  color:var(--ink);
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  font-weight:600;
  text-decoration:none;
  padding:0 8px 0 0;
  transition:color .3s var(--ease-spring);
}
.site-cta .phone .phone-ico{width:14px;height:14px;color:var(--coral);flex-shrink:0;transition:transform .45s var(--ease-spring)}
.site-cta .phone:hover{color:var(--coral-text)}
.site-cta .phone:hover .phone-ico{transform:rotate(-12deg) scale(1.08)}

/* Tiny intake-status dot — visual signal only, no truncated text */
.nav-intake-dot{
  display:inline-block;
  width:7px;height:7px;border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 3px rgba(244,122,77,.16);
  flex-shrink:0;
  cursor:help;
}
/* GPU ring pulse (transform+opacity) instead of an animated box-shadow.
   This dot lives inside the backdrop-filtered header — animating its box-shadow
   forced Safari to recompute the header blur every frame (the choppy nav). A
   pseudo-ring composites on its own layer and never repaints the header. */
.nav-intake-dot{position:relative}
.nav-intake-dot.is-open{animation:none}
.nav-intake-dot.is-open::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--coral);opacity:0;animation:dotRing 2.4s ease-out infinite;pointer-events:none}
.nav-intake-dot.is-closed{background:#a78a5e;box-shadow:0 0 0 3px rgba(167,138,94,.16);animation:none}
@keyframes dotRing{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}

.site-cta .btn-ink{
  padding:11px 20px;
  font-size:.84rem;
  border-radius:100px;
  letter-spacing:-.005em;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 18px rgba(0,0,0,.16);
}
.site-cta .btn-ink:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 12px 26px rgba(0,0,0,.22);
}

/* Intake status — tiny dot + label, tucked above the phone */
.intake-status{
  margin:0;
  font-family:var(--font-mono);
  font-size:.52rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;line-height:1;
}
.intake-status .intake-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 3px rgba(244,122,77,.16);
  flex-shrink:0;position:relative;
}
.intake-status.is-open .intake-dot{animation:none}
.intake-status.is-open .intake-dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--coral);opacity:0;animation:dotRing 2.4s ease-out infinite;pointer-events:none}
.intake-status.is-closed .intake-dot{background:#a78a5e;box-shadow:0 0 0 3px rgba(167,138,94,.16)}
.intake-status .intake-text{
  /* Only show the leading label, hide callback chatter for visual calm */
  max-width:84px;overflow:hidden;text-overflow:ellipsis;
}
.intake-status .intake-sep{display:none}
@keyframes intakePulse{0%,100%{box-shadow:0 0 0 3px rgba(244,122,77,.16)}50%{box-shadow:0 0 0 6px rgba(244,122,77,.02)}}

/* Mobile hamburger — three weighted 2px lines that translate + rotate into
   an X using --ease-out-quint. 44×44 minimum touch target. */
.menu-toggle{
  display:none;
  width:44px;height:44px;
  border:none;background:rgba(0,0,0,.04);
  border-radius:50%;
  cursor:pointer;position:relative;
  transition:background .35s var(--ease-spring),transform .35s var(--ease-spring);
}
.menu-toggle:hover{background:rgba(0,0,0,.07)}
.menu-toggle:active{transform:scale(.94)}
.menu-toggle .mt-lines{
  position:relative;
  width:20px;height:14px;
  display:block;
  pointer-events:none;
}
.menu-toggle .mt-line{
  position:absolute;left:0;right:0;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transform-origin:50% 50%;
  transition:
    transform .55s var(--ease-out-quint),
    opacity .25s var(--ease-out-quint),
    width .55s var(--ease-out-quint),
    background-color .35s var(--ease-spring);
}
.menu-toggle .mt-line:nth-child(1){top:0}
.menu-toggle .mt-line:nth-child(2){top:6px}
.menu-toggle .mt-line:nth-child(3){top:12px;width:70%}
.menu-toggle:hover .mt-line:nth-child(3){width:100%}
/* Open · top + bottom translate to center then rotate; middle dissolves */
.menu-toggle.open .mt-line:nth-child(1){transform:translateY(6px) rotate(45deg);width:100%}
.menu-toggle.open .mt-line:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-toggle.open .mt-line:nth-child(3){transform:translateY(-6px) rotate(-45deg);width:100%}

/* Responsive ─── */
/* Header pill fit: logo 103 + nav 723 + cta 325 + gaps 48 + padding 32 = ~1231px
   of inner width needed, and the pill is min(100vw - 32px, 1280px). So the full
   row only fits above ~1263px. Below that shed the phone (it is still in the
   drawer, the hero and the footer), tighten the link pills, then hand off to the
   hamburger at 1080px — before anything can spill outside the rounded pill. */
@media (max-width:1263px){
  .site-cta .phone,.nav-intake-dot{display:none}
  .site-nav{gap:0}
  .site-nav a{padding:9px 13px}
}
@media (max-width:1180px){
  .site-cta{gap:8px}
}
@media (max-width:1080px){
  .site-nav{display:none}
  /* logo-left + hamburger-right, no dead center gap; drop the redundant black
     CTA (same "Talk with our team" already appears in the hero + the drawer). */
  .site-header-inner{grid-template-columns:auto auto;justify-content:space-between;padding:7px 10px 7px 18px}
  .site-cta{gap:8px}
  .site-cta .phone,.nav-intake-dot,.site-cta .btn-ink{display:none}
  .menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center}
}
@media (max-width:640px){
  .site-header{top:10px;width:calc(100% - 16px)}
  .site-header-inner{padding:3px 4px 3px 14px;gap:10px}
  .site-cta{gap:6px}
  /* Slim the CTA button — keep the label but tighten it visually */
  .site-cta .btn-ink{padding:8px 14px;font-size:.74rem;letter-spacing:-.005em}
  .site-cta .btn-ink .arrow{margin-left:6px}
  /* 20px read as an afterthought inside a 54px pill; 30px holds its own next to the menu button. */
  .site-logo img{height:28px}
  .site-header-inner{padding-left:16px}
  .menu-toggle{width:40px;height:40px}  /* >=44px tap target (accessibility minimum) */
}
@media (max-width:420px){
  /* On the smallest phones, drop the CTA label to just an icon-ish arrow
     so the header pill stays a single thin line. */
  .site-cta .btn-ink{padding:7px 12px;font-size:.7rem}
  .site-cta .btn-ink .arrow{margin-left:4px}
  .site-header-inner{padding:4px 5px 4px 12px;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .intake-status.is-open .intake-dot{animation:none}
  .site-header,.site-header-inner{transition:none}
}

/* The floating pill sits *over* content. Pages with a full-bleed .hero
   already absorb the nav with 100vh treatment. Pages without a hero
   handle their own top padding on the first section (team-hero,
   page-hero, etc. — each is 96px+ already). No global override here. */

/* Hero */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:#0a0807;display:flex;align-items:flex-end;color:#fff}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.45) 55%,rgba(10,8,7,.92) 100%)}
.hero-content{position:relative;z-index:1;padding:80px 0 100px;width:100%}
.hero-content .container{display:grid;grid-template-columns:1fr;gap:32px}
.hero-meta{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.7);font-weight:500;display:flex;align-items:center;gap:10px}
.hero-meta::before{content:"";width:30px;height:1px;background:var(--coral)}
.hero h1{color:#fff;font-size:clamp(2.6rem,7vw,5.6rem);max-width:1000px;letter-spacing:-.05em;line-height:.95;margin:0 0 28px}
.hero h1 em{background:linear-gradient(120deg,#f47a4d,#ff9870,#e26538);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-style:normal}

/* ═══════════════════════════════════════════════════
   HOMEPAGE HERO · massive heavy display sans
   Switzer Black (900) at clamp(4rem, 11vw, 9rem), with quieter
   connecting words at Switzer Regular (400) for mixed-weight effect.
   "what's next" carries the coral gradient as the flourish.
   PIF words verbatim.
   ═══════════════════════════════════════════════════ */
.hero h1.hero-h1-impact{
  font-family:var(--font-display);  /* Switzer */
  font-weight:900;
  font-style:normal;
  /* Sits in a ~640px column, so an oversized value stacks into ~10 lines and
     eats the whole hero. Keep it punchy but pack the headline into ~5 lines. */
  font-size:clamp(2rem, 3.8vw, 3.5rem);
  line-height:1.02;
  letter-spacing:-.04em;
  color:#fff;
  max-width:1240px;
  margin:0 0 28px;
  text-wrap:balance;
  overflow-wrap:break-word;   /* never let a long line run off-screen */
}
/* Quieter connecting words · regular weight, slightly transparent */
.hero h1.hero-h1-impact .w-light{
  font-weight:400;
  color:rgba(255,255,255,.82);
  letter-spacing:-.035em;
}
/* Em / "what's next" · same heavy weight, coral gradient */
.hero h1.hero-h1-impact .w-em{
  font-weight:900;
  background:linear-gradient(120deg,#f47a4d,#ff9870,#e26538);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
  /* the inherited text-shadow haloes through the transparent fill and muddies
     the coral — kill it; use a TIGHT drop-shadow for lift instead of a wide one. */
  text-shadow:none;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.4));
}
@media (max-width:768px){
  .hero h1.hero-h1-impact{
    font-size:clamp(1.9rem, 9vw, 3.2rem);
    line-height:1;
    letter-spacing:-.03em;
    margin:0 0 22px;
  }
  .hero h1.hero-h1-impact .w-light{ letter-spacing:-.022em; }
  /* Let the phrase wrap naturally on small screens — manual break would jam it. */
  .hero h1.hero-h1-impact br{ display:none; }
}
@media (max-width:430px){
  .hero h1.hero-h1-impact{ font-size:clamp(1.7rem, 8.4vw, 2.4rem); line-height:1.04; }
}
.hero h1.hero-h1-takeover .hero-takeover em{
  font-style:italic; /* the gradient class already strips font-style; force italic back */
  font-weight:400;
}
.hero p{color:rgba(255,255,255,.85);font-family:var(--font-display);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:540px;line-height:1.5;margin:0 0 36px;letter-spacing:-.005em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.92);color:var(--ink)}
.hero-scroll{position:absolute;bottom:28px;right:32px;font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:10px;writing-mode:vertical-rl;transform:rotate(180deg)}

/* Intent tiles */
.intents{padding:140px 0 132px;background:var(--bg)}
.intents-head{text-align:center;max-width:720px;margin:0 auto 80px}
.intents-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.intent-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:44px 36px 38px;transition:transform .35s cubic-bezier(.23,1,.32,1),box-shadow .35s cubic-bezier(.23,1,.32,1),border-color .35s cubic-bezier(.23,1,.32,1),background .35s cubic-bezier(.23,1,.32,1);cursor:pointer;display:flex;flex-direction:column;gap:20px;position:relative;overflow:hidden;text-decoration:none;color:inherit;min-height:280px}
.intent-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
/* Shadow-based lift — NOT translateY. The card is its own hover trigger, so
   moving it lifts its bottom edge off the pointer → Safari drops :hover → the
   card oscillates ("shaky"). A growing shadow reads as a lift with zero hit-area
   movement, so it's stable in every browser. */
.intent-card:hover{box-shadow:0 18px 40px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.06);border-color:var(--coral-line)}
.intent-card:hover::before{transform:scaleX(1)}
.intent-card .intent-num{font-family:var(--font-mono);font-size:.7rem;color:var(--coral-text);text-transform:uppercase;letter-spacing:.16em;font-weight:600}
.intent-card h3{font-size:1.45rem;letter-spacing:-.025em;margin:0;color:var(--ink)}
.intent-card .intent-sub{font-family:var(--font-display);font-weight:500;color:var(--text-soft);font-size:.95rem;line-height:1.5;margin:0;flex:1}
.intent-card .intent-link{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:8px;margin-top:auto}
.intent-card .intent-link::after{content:"→";transition:transform .25s ease}
.intent-card:hover .intent-link::after{transform:translateX(4px)}
.intent-card:hover .intent-link{color:var(--coral-text)}

/* Value prop blocks */
.values{padding:120px 0;background:var(--bg-warm)}
.values .container{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:start}
.values-intro h2{font-size:clamp(2rem,3.5vw,2.8rem)}
.values-list{display:flex;flex-direction:column;gap:0}
.value-row{display:grid;grid-template-columns:60px 1fr;gap:28px;padding:28px 0;border-top:1px solid var(--hairline)}
.value-row:last-child{border-bottom:1px solid var(--hairline)}
.value-row .v-num{font-family:var(--font-mono);font-size:.72rem;color:var(--coral-text);text-transform:uppercase;letter-spacing:.18em;font-weight:600;padding-top:6px}
.value-row h3{font-size:1.35rem;margin:0 0 8px;letter-spacing:-.02em;color:var(--ink)}
.value-row p{font-family:var(--font-display);font-weight:500;color:var(--text-soft);font-size:1rem;line-height:1.5;margin:0}

/* Process steps */
.process{padding:140px 0 136px;background:var(--surface);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.process-head{text-align:center;margin-bottom:84px}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.process-step{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--hairline);border-radius:20px;padding:30px 26px 28px;min-height:264px;overflow:hidden;transition:transform .5s var(--ease-spring),border-color .35s ease,box-shadow .5s ease}
.process-step:hover{transform:translateY(-6px);border-color:var(--coral-line);box-shadow:0 26px 54px -20px rgba(26,22,18,.18)}
/* big ghosted step number watermark */
.process-step::before{content:attr(data-n);position:absolute;top:8px;right:18px;font-family:var(--font-display);font-weight:800;font-size:4.8rem;line-height:1;color:var(--coral);opacity:.08;letter-spacing:-.05em;transition:opacity .4s ease;pointer-events:none}
.process-step:hover::before{opacity:.16}
/* connector between cards (desktop) */
.process-step:not(:last-child)::after{content:"";position:absolute;top:53px;right:-22px;width:22px;height:2px;background:linear-gradient(90deg,var(--coral-line),transparent);z-index:2}
.process-ico{width:52px;height:52px;border-radius:14px;background:var(--coral-soft);border:1px solid var(--coral-line);display:flex;align-items:center;justify-content:center;color:var(--coral);margin-bottom:22px;transition:transform .55s var(--ease-spring),background-color .35s ease}
.process-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.process-step:hover .process-ico{transform:rotate(-6deg) scale(1.07);background:rgba(244,122,77,.14)}
.process-step .step-num{font-family:var(--font-mono);font-size:.62rem;color:var(--coral-text);text-transform:uppercase;letter-spacing:.18em;font-weight:700;margin-bottom:9px;position:relative;z-index:1}
.process-step h4{font-family:var(--font-display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;margin:0 0 10px;color:var(--ink);position:relative;z-index:1}
.process-step p{font-size:.91rem;line-height:1.6;margin:0;color:var(--text-soft);position:relative;z-index:1}
.process-cta{text-align:center;margin-top:48px;display:flex;justify-content:center;gap:14px}

/* Callout band */
.band{padding:132px 0;background:var(--ink);color:#fff;position:relative;overflow:hidden}
.band-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.band-photo img{width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:saturate(.82) brightness(.92)}
.band-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,7,.84),rgba(10,8,7,.78) 48%,rgba(10,8,7,.93))}
.band::before{content:"";position:absolute;top:-26%;left:50%;transform:translateX(-50%);width:860px;max-width:130%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(244,122,77,.17),transparent 62%);pointer-events:none;z-index:1}
.band::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 79px,rgba(255,255,255,.02) 79px,rgba(255,255,255,.02) 80px);opacity:.55;pointer-events:none;z-index:1}
.band-frame{position:absolute;z-index:3;font-family:var(--font-mono);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.24em;color:rgba(255,255,255,.42);display:inline-flex;align-items:center;gap:9px}
.band-frame.tl{top:36px;left:40px}
.band-frame.br{bottom:36px;right:40px}
.band-frame .dot{width:6px;height:6px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px rgba(244,122,77,.22)}
.band .container{position:relative;z-index:2;max-width:920px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.band .eyebrow{color:#ff9870;justify-content:center}
.band .eyebrow::before{background:#ff9870}
.band h2{color:#fff;font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.04em;line-height:1.05;margin:22px 0 0;text-wrap:balance;max-width:20ch}
.band h2 em{font-family:var(--font-serif);font-style:italic;font-weight:400;background:linear-gradient(120deg,#f47a4d,#ffa580 55%,#e26538);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.band p{color:rgba(255,255,255,.74);font-family:var(--font-display);font-weight:400;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.62;max-width:60ch;margin:24px auto 0;letter-spacing:-.005em}
.band-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:42px}
.band .btn-primary{background:var(--coral);color:#fff}
.band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.band .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* Recent posts / community grid */
.recent{padding:120px 0;background:var(--bg)}
.recent-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;flex-wrap:wrap;gap:24px}
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.post-card:hover{box-shadow:0 18px 40px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.06);border-color:var(--coral-line)}
.post-card-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-warm)}
.post-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.post-card:hover .post-card-img img{transform:scale(1.04)}
.post-card-body{padding:24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card .post-meta{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--coral);font-weight:600}
.post-card h3{font-size:1.1rem;letter-spacing:-.018em;margin:0;color:var(--ink);line-height:1.3}
.post-card .post-excerpt{font-size:.9rem;color:var(--text-soft);line-height:1.5;margin:0}

/* Final CTA */
.final-cta{padding:140px 0;background:var(--bg-warm);text-align:center;position:relative;overflow:hidden}
.final-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 100%,rgba(244,122,77,.08) 0%,transparent 60%);pointer-events:none}
.final-cta .container{position:relative;z-index:1}
.final-cta h2{font-size:clamp(2.2rem,4.5vw,3.6rem);max-width:760px;margin:0 auto 18px;letter-spacing:-.035em;text-wrap:balance}
.final-cta p{max-width:540px;margin:0 auto 36px;color:var(--text-soft);font-family:var(--font-display);font-size:1.1rem;font-weight:500}

/* Footer */
/* ═══════════════════════════════════════════════════
   SITE FOOTER · editorial dark band
   1. CTA band (last word) · 2. Main directory grid
   3. Massive PLDR LAW wordmark · 4. Tiny print strip
   ═══════════════════════════════════════════════════ */
.site-footer{
  position:relative;
  background:#0a0807;
  color:rgba(255,255,255,.7);
  border-top:1px solid rgba(244,122,77,.18);
  isolation:isolate;
  overflow:hidden;
}
/* Soft coral atmospheric wash · no photo texture */
.site-footer::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70vw 50vh at 80% -10%,rgba(244,122,77,.10) 0%,rgba(244,122,77,.02) 35%,transparent 65%),
    radial-gradient(ellipse 60vw 50vh at -10% 110%,rgba(244,122,77,.08) 0%,transparent 55%);
}
.site-footer::after{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(244,122,77,.5) 50%,transparent 100%);
}
.site-footer > *{position:relative;z-index:2}

/* ─── 1. CTA band ─── */
.ft-cta{
  padding:88px 0 72px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ft-cta .container{
  display:grid;grid-template-columns:1.3fr 1fr;gap:72px;align-items:center;
}
.ft-cta-copy{min-width:0}
.ft-cta-eyebrow{
  display:inline-flex;align-items:center;gap:14px;margin-bottom:22px;
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.24em;color:#ff9870;
}
.ft-cta-eyebrow .dot{
  width:7px;height:7px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 0 4px rgba(244,122,77,.22);
  animation:liveDot 2.4s ease-in-out infinite;
}
/* Headline · generous line-height so italic descenders never crop */
.ft-cta-headline{
  font-family:var(--font-serif,'Source Serif 4',Georgia,serif);
  font-weight:400;font-style:normal;
  font-size:clamp(2.2rem,4.6vw,3.8rem);
  letter-spacing:-.035em;line-height:1.12;
  color:#fff;margin:0 0 18px;text-wrap:balance;max-width:18ch;
  padding-bottom:.05em; /* breathing room under descenders */
}
.ft-cta-headline em{
  font-style:italic;
  display:inline-block;
  padding-inline-end:.06em;       /* italic "t" terminal swash */
  background:linear-gradient(120deg,var(--coral) 0%,#ffa580 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
/* Question mark broken out of the gradient mask so its descender renders fully */
.ft-cta-headline .ft-cta-q{
  color:#fff;font-style:normal;margin-left:-.04em;
}
.ft-cta-sub{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.55;
  color:rgba(255,255,255,.65);max-width:46ch;margin:0;
}

/* Right column · primary action + small phone footnote */
.ft-cta-action{
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  min-width:0;
}
.ft-cta-primary{
  display:inline-flex;align-items:center;gap:18px;
  padding:20px 30px;
  background:var(--coral);color:#fff;text-decoration:none;
  border-radius:14px;
  font-family:var(--font-display);font-weight:700;font-size:1.04rem;
  letter-spacing:-.005em;white-space:nowrap;
  box-shadow:0 18px 44px rgba(244,122,77,.32),0 4px 14px rgba(244,122,77,.2);
  transition:background .25s ease,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;
  position:relative;overflow:hidden;
}
.ft-cta-primary::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.2) 0%,transparent 40%,transparent 60%,rgba(255,255,255,.2) 100%);
  transform:translateX(-100%);
  transition:transform .9s cubic-bezier(.23,1,.32,1);
  pointer-events:none;
}
.ft-cta-primary:hover{background:var(--coral-deep);transform:translateY(-2px);box-shadow:0 26px 60px rgba(244,122,77,.4),0 6px 18px rgba(244,122,77,.28)}
.ft-cta-primary:hover::before{transform:translateX(100%)}
.ft-cta-primary .arrow{font-size:1.25rem;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.ft-cta-primary:hover .arrow{transform:translateX(4px)}

.ft-cta-or{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.24em;color:rgba(255,255,255,.4);
  align-self:stretch;
}
.ft-cta-or::before,.ft-cta-or::after{
  content:"";flex:1;height:1px;background:rgba(255,255,255,.1);
}

.ft-cta-phones{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
/* No-attorney-client caveat · VA Rule 7.3 / ethics guidance */
.ft-cta-caveat{
  margin:18px 0 0;max-width:46ch;
  font-family:var(--font-display);font-size:.74rem;line-height:1.55;
  color:rgba(255,255,255,.4);font-style:italic;
}
/* LinkedIn icon in the footer bottom strip */
.ftb-social{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.55);text-decoration:none;
  transition:background .25s ease,color .25s ease,transform .35s var(--ease-spring);
}
.ftb-social:hover{background:var(--coral);color:#fff;transform:translateY(-1px)}
.ftb-ad-notice{color:rgba(255,255,255,.32)}
.ft-cta-phone-inline{
  display:inline-flex;flex-direction:column;gap:2px;
  text-decoration:none;color:#fff;
  transition:transform .35s cubic-bezier(.22,1,.36,1),color .25s ease;
}
.ft-cta-phone-inline:hover{transform:translateY(-1px)}
.ft-cta-phone-inline:hover .num{color:#ff9870}
.ft-cta-phone-inline .tag{
  font-family:var(--font-mono);font-size:.54rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.42);
}
.ft-cta-phone-inline .num{
  font-family:var(--font-mono);font-weight:700;font-size:1.02rem;
  letter-spacing:.01em;color:#fff;font-variant-numeric:tabular-nums;
  transition:color .25s ease;
}
.ft-cta-phone-sep{
  width:1px;height:28px;background:rgba(255,255,255,.1);
}

/* ─── 2. Main directory grid ─── */
.ft-grid{
  display:grid;
  grid-template-columns:1.3fr .9fr .9fr 1fr 1.2fr;
  gap:48px 36px;
  padding:80px 0 64px;
}
.ft-grid h3,
.ft-grid h4{
  color:var(--coral);
  font-family:var(--font-mono);font-size:.65rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;
  margin:0 0 22px;
  position:relative;padding-left:18px;
}
.ft-grid h3::before,
.ft-grid h4::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:9px;height:1px;background:var(--coral);
}
.ft-grid ul{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:9px;
}
.ft-grid ul a{
  display:inline-flex;align-items:center;gap:6px;
  color:rgba(255,255,255,.7);
  font-family:var(--font-display);font-weight:500;font-size:.94rem;
  letter-spacing:-.005em;text-decoration:none;
  transition:color .2s ease,transform .25s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.ft-grid ul a::after{
  content:"→";opacity:0;margin-left:-4px;
  font-family:var(--font-mono);font-size:.7em;color:var(--coral);
  transition:opacity .25s ease,margin-left .25s cubic-bezier(.22,1,.36,1);
}
.ft-grid ul a:hover{color:#fff;transform:translateX(3px)}
.ft-grid ul a:hover::after{opacity:1;margin-left:6px}

/* Brand column */
.ft-brand img{
  height:42px;width:auto;margin-bottom:24px;
  filter:brightness(0) invert(1);
}
.ft-brand p{
  font-family:var(--font-display);font-weight:400;
  font-size:.94rem;line-height:1.6;color:rgba(255,255,255,.6);
  max-width:32ch;margin:0 0 28px;
}
.ft-tagline{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.42);
}
.ft-tagline .line{display:inline-block;width:32px;height:1px;background:rgba(255,255,255,.32)}

/* ─── Offices · matches directory column rhythm, no cards/photos ─── */
.ft-col-offices h3,
.ft-col-offices h4{display:flex;align-items:center;gap:10px}
.ft-status-inline{font-size:.5rem;padding:3px 8px;margin-left:auto}
.ft-office-block{
  display:flex;flex-direction:column;gap:4px;
  margin-bottom:22px;
  font-family:var(--font-display);font-weight:400;font-size:.9rem;
  color:rgba(255,255,255,.55);line-height:1.5;
}
.ft-office-block:last-child{margin-bottom:0}
.ft-office-link{
  font-family:var(--font-serif,'Source Serif 4',Georgia,serif);
  font-weight:400;font-size:1.1rem;letter-spacing:-.015em;line-height:1.2;
  color:#fff;text-decoration:none;margin-bottom:2px;
  transition:color .25s var(--ease-spring);
}
.ft-office-link:hover{color:#ff9870}
.ft-office-tel{
  margin-top:4px;
  font-family:var(--font-mono);font-weight:700;font-size:.9rem;
  letter-spacing:.01em;color:#fff;font-variant-numeric:tabular-nums;
  text-decoration:none;
  transition:color .25s var(--ease-spring);
}
.ft-office-tel:hover{color:#ff9870}

/* Status pill — pulled from contact.njk style language */
.ft-status{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px;border-radius:999px;
  font-family:var(--font-mono);font-size:.54rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  border:1px solid;
  transition:background .35s ease,border-color .35s ease,color .35s ease;
}
.ft-status[data-state="open"]{color:#7be3a8;background:rgba(34,160,89,.14);border-color:rgba(34,160,89,.4)}
.ft-status[data-state="open"] .op-dot{background:#22c062;box-shadow:0 0 0 3px rgba(34,160,89,.32);animation:opDot 2s ease-in-out infinite}
.ft-status[data-state="lunch"]{color:#ffa580;background:rgba(244,122,77,.14);border-color:rgba(244,122,77,.4)}
.ft-status[data-state="lunch"] .op-dot{background:var(--coral);box-shadow:0 0 0 3px rgba(244,122,77,.32)}
.ft-status[data-state="closed"],
.ft-status[data-state="appt"],
.ft-status[data-state="loading"]{color:rgba(255,255,255,.45);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.ft-status[data-state="closed"] .op-dot,
.ft-status[data-state="appt"] .op-dot,
.ft-status[data-state="loading"] .op-dot{background:rgba(255,255,255,.45)}
.ft-status .op-dot{width:5px;height:5px;border-radius:50%;display:inline-block;flex-shrink:0}
@keyframes opDot{0%,100%{box-shadow:0 0 0 3px rgba(34,160,89,.32)}50%{box-shadow:0 0 0 6px rgba(34,160,89,.06)}}

/* ─── 3. Massive editorial wordmark · library photo backdrop ─── */
.ft-signature{
  padding:84px 0 76px;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.ft-signature::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(10,8,7,.88) 0%,rgba(10,8,7,.74) 50%,rgba(10,8,7,.92) 100%),
    url('/images/perf/lib-sig.webp');
  background-size:cover,cover;
  background-position:center,center;
  background-repeat:no-repeat;
  filter:saturate(.55);
}
.ft-signature::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 55vw 70vh at 50% 50%,rgba(244,122,77,.08) 0%,transparent 60%);
}
/* Footer wordmark · the actual PLDR Law SVG logo. When the signature band
   scrolls into view, each path strokes itself in (dashoffset → 0) and then
   its fill fades up — the same path-tracing language the splash uses, but
   without the dark plate, the coral bloom, or the trail lights. Just the
   logo drawing itself onto the bookshelf photograph. */
.ft-wordmark{
  position:relative;
  margin:0;
  display:flex;justify-content:center;align-items:center;
  max-width:100%;
  padding:.1em .35em;
  box-sizing:border-box;
}
.ftw-svg{
  width:100%;max-width:600px;height:auto;display:block;
  filter:drop-shadow(0 2px 10px rgba(10,8,7,.4));
}

/* The footer wordmark uses the SAME logo-reveal SVG include as the splash.
   The shared `.splash-mark` class on the footer container gives the SVG all
   of its styling (cls-1 fill+stroke, cutline, plate, engrave, sheen) for free.
   Override splash-mark's 82vw width so the footer can center the SVG cleanly. */
.ft-wordmark.splash-mark{
  width:100%;max-width:480px;
  margin:0 auto;
  perspective:none;
}
.ft-wordmark .lr-svg{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 2px 10px rgba(10,8,7,.4));
}
.ft-wordmark .lr-meta{display:none}

@media (prefers-reduced-motion:reduce){
  /* Splash-mark CSS keeps the paths primed with fill-opacity:0; reveal them
     for users who skip motion. */
  .ft-wordmark .cls-1,.ft-wordmark .cls-2,.ft-wordmark .engrave{fill-opacity:1 !important}
  .ft-wordmark .plate,.ft-wordmark .platecol{opacity:1 !important}
  .ft-wordmark .cutline{stroke-opacity:0 !important}
}
@media (max-width:760px){
  .ft-wordmark.splash-mark{max-width:340px}
}
.ft-sig-meta{
  margin:18px 0 0;
  display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.4);
}
.ft-sig-meta .dot-sep{color:rgba(255,255,255,.22)}

/* ─── 4. Tiny print strip ─── */
.site-footer-bottom{
  padding:24px 0 32px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.42);
}
.site-footer-bottom .dot-sep{color:rgba(255,255,255,.22)}
.ftb-left{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.ftb-links{display:inline-flex;align-items:center;gap:20px;flex-wrap:wrap}
.ftb-links a{
  color:rgba(255,255,255,.55);text-decoration:none;
  transition:color .2s ease;
}
.ftb-links a:hover{color:#ff9870}
.ftb-credit{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.4)}
.ftb-credit a{
  color:rgba(255,255,255,.7);text-decoration:none;
  border-bottom:1px solid rgba(244,122,77,.4);padding-bottom:1px;
  transition:color .2s ease,border-color .2s ease;
}
.ftb-credit a:hover{color:var(--coral);border-color:var(--coral)}

/* ─── Responsive ─── */
@media (max-width:1100px){
  .ft-cta .container{grid-template-columns:1fr;gap:40px;align-items:start}
  .ft-cta-action{align-items:flex-start}
  .ft-grid{grid-template-columns:1fr 1fr 1fr;gap:40px 32px}
  .ft-brand{grid-column:1 / -1}
  .ft-col-offices{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:8px 32px}
  .ft-col-offices h3,
  .ft-col-offices h4{grid-column:1 / -1}
}
@media (max-width:760px){
  .ft-cta{padding:64px 0 56px}
  .ft-cta-headline{font-size:clamp(2rem,8vw,2.8rem)}
  .ft-cta-action{align-self:stretch;width:100%}
  .ft-cta-primary{align-self:stretch;justify-content:space-between;padding:18px 22px;min-height:56px}
  .ft-cta-phones{align-self:stretch;justify-content:space-between;width:100%}
  .ft-grid{grid-template-columns:1fr 1fr;gap:36px 24px;padding:64px 0 48px}
  .ft-signature{padding:48px 0 40px}
  .ft-wordmark{font-size:clamp(2.6rem,15vw,5.4rem);letter-spacing:-.04em}
  .site-footer-bottom{flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:24px}
  .ftb-links{gap:14px;row-gap:8px}
}
@media (max-width:480px){
  .ft-grid{grid-template-columns:1fr;gap:30px;padding:56px 0 40px}
  .ft-cta .container{gap:32px}
}

/* Page hero variant (non-home pages) */
.page-hero{padding:120px 0 72px;border-bottom:1px solid var(--hairline);background:linear-gradient(180deg,var(--bg-warm) 0%,var(--bg) 100%)}
.page-hero .container{max-width:920px}
.page-hero .eyebrow{margin-bottom:18px}
.page-hero h1{font-size:clamp(2.6rem,5.5vw,4.4rem);margin:0 0 22px;letter-spacing:-.045em}
.page-hero p.lead{font-size:clamp(1.05rem,1.5vw,1.25rem)}

/* Reusable card variants */
.card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:32px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.card:hover{box-shadow:var(--shadow-soft);border-color:var(--coral-line)}

/* Chips */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;color:var(--coral);background:var(--coral-soft);border:1px solid var(--coral-line);border-radius:999px;font-weight:600}

/* Utility */
.center{text-align:center}
.muted{color:var(--text-soft)}
.mono{font-family:var(--font-mono)}
.serif{font-family:var(--font-serif)}

/* Responsive */
@media (max-width:1100px){
  .site-footer .container{grid-template-columns:1fr 1fr;gap:48px}
  .band{padding:96px 0}
  .band-frame{display:none}
  .values .container{grid-template-columns:1fr;gap:40px}
}

@media (max-width:880px){
  /* CLAUDE.md: minimum 80px section padding on mobile */
  section{padding:80px 0}
  section.large{padding:96px 0}
  .container,.container-narrow,.container-tight{padding:0 22px}
  /* ≤880: hamburger replaces the nav; keep the pill as slim as the desktop one. */
  .site-header-inner{padding:4px 6px 4px 16px;gap:12px}
  .site-nav,.site-cta .phone{display:none}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center}
  .hero-content{padding:40px 0 80px}
  .intents-grid,.posts-grid{grid-template-columns:1fr;gap:16px}
  .process-grid{grid-template-columns:1fr 1fr;gap:16px}
  .process-step{min-height:auto;padding:26px 22px 24px}
  .process-step:not(:last-child)::after{display:none}
  .site-footer .container{grid-template-columns:1fr;gap:36px;margin-bottom:40px}
  .hero-scroll{display:none}
}

@media (max-width:560px){
  .hero h1{font-size:clamp(2.2rem,9vw,3.2rem)}
  .process-grid{grid-template-columns:1fr}
  .process-step{min-height:auto}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
}

/* ═══════════════════════════════════════════════════
   MOBILE NAV · Editorial drawer
   Full-screen warm-paper backdrop · coral bottom-right glow ·
   large editorial type · staggered fade-up · accordion sub-menus.
   ═══════════════════════════════════════════════════ */
.mobile-nav{
  position:fixed;top:0;right:0;bottom:0;
  width:min(440px,100vw);
  z-index:200;
  /* Warm near-black backdrop with coral glow from bottom-right corner. */
  background:
    radial-gradient(ellipse 80% 60% at 100% 100%,rgba(244,122,77,.18) 0%,rgba(244,122,77,0) 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%,rgba(244,122,77,.22) 0%,rgba(244,122,77,0) 50%),
    rgba(26,22,18,.96);
  -webkit-backdrop-filter:blur(28px) saturate(1.05);
  backdrop-filter:blur(28px) saturate(1.05);
  transform:translateX(100%);
  transition:transform .72s var(--ease-out-quint);
  padding:96px 28px 28px;
  display:flex;flex-direction:column;gap:18px;
  border-left:1px solid rgba(255,255,255,.06);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  color:rgba(255,255,255,.92);
}
.mobile-nav.open{transform:translateX(0)}

/* Staggered fade-up reveal · each [data-mn-stagger] gets --mn-i from JS */
.mobile-nav [data-mn-stagger]{
  opacity:0;
  transform:translateY(40px);
  transition:
    opacity .55s var(--ease-out-quint),
    transform .72s var(--ease-out-quint);
  transition-delay:calc(60ms * var(--mn-i, 0));
}
.mobile-nav.open [data-mn-stagger]{
  opacity:1;
  transform:translateY(0);
  /* Cascade starts after the drawer slides in (180ms head start) */
  transition-delay:calc(180ms + 60ms * var(--mn-i, 0));
}
.mobile-nav:not(.open) [data-mn-stagger]{
  transition-delay:0s;
  transition-duration:.25s;
}

/* Close button — top right, thin strokes, coral on hover */
.mn-close{
  position:absolute;top:22px;right:22px;
  width:48px;height:48px;
  border:1px solid rgba(255,255,255,.14);
  background:transparent;
  border-radius:50%;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:5;
  transition:
    border-color .35s var(--ease-spring),
    background-color .35s var(--ease-spring),
    transform .35s var(--ease-spring);
}
.mn-close:hover{border-color:var(--coral);background:rgba(244,122,77,.08)}
.mn-close:active{transform:scale(.94)}
.mn-close-x{position:relative;width:18px;height:18px;display:block}
.mn-close-bar{
  position:absolute;left:0;right:0;top:50%;
  height:1.5px;background:rgba(255,255,255,.82);
  border-radius:2px;transform-origin:50% 50%;
  transition:background-color .35s var(--ease-spring),transform .35s var(--ease-spring);
}
.mn-close-bar-a{transform:translateY(-1px) rotate(45deg)}
.mn-close-bar-b{transform:translateY(-1px) rotate(-45deg)}
.mn-close:hover .mn-close-bar{background:var(--coral)}

/* Masthead: logo sits on the close button's row, same 48px line. */
.mn-brand{position:absolute;top:22px;left:28px;height:48px;display:flex;align-items:center;text-decoration:none}
.mn-brand img{height:28px;width:auto;display:block}
/* Reach us — the number set as type, a quiet link beneath. Deliberately no boxes. */
.mn-reach{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.mn-reach-tel{font-family:var(--font-display);font-weight:700;font-size:1.55rem;letter-spacing:-.02em;color:#fff;text-decoration:none;font-variant-numeric:tabular-nums;line-height:1}
.mn-reach-tel:active{color:var(--coral)}
.mn-reach-book{font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--coral);text-decoration:none;letter-spacing:-.005em}
.mn-reach-book span{display:inline-block;transition:transform .3s var(--ease-spring)}
.mn-reach-book:active span{transform:translateX(3px)}
/* Quick actions (legacy) */
.mn-quick{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mn-quick-tel{
  display:flex !important;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;justify-content:center;
  padding:14px 16px !important;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  text-decoration:none;color:#fff !important;
  min-height:60px;
  transition:
    background-color .35s var(--ease-spring),
    border-color .35s var(--ease-spring),
    transform .35s var(--ease-spring);
}
.mn-quick-tel:active{
  background:rgba(244,122,77,.16);
  border-color:var(--coral-line);
  transform:translateY(1px);
}
.mn-quick-tag{
  font-family:var(--font-mono);font-size:.56rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;color:var(--coral);
}
.mn-quick-num{
  font-family:var(--font-display);font-weight:700;font-size:1.06rem;
  letter-spacing:-.005em;color:#fff;font-variant-numeric:tabular-nums;
}
.mn-quick-book{background:rgba(244,122,77,.12);border-color:rgba(244,122,77,.35)}
.mn-quick-book .mn-quick-num span{color:var(--coral)}
.mn-quick-book:active{background:rgba(244,122,77,.22)}

/* Primary nav list */
.mn-list{display:flex;flex-direction:column;gap:6px}

/* Editorial flat link — clamp display size, weight 700, tight tracking */
.mobile-nav .mn-item{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,8vw,3.4rem);
  letter-spacing:-.04em;line-height:1.05;
  color:#fff;
  padding:18px 0;
  min-height:56px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-decoration:none;
  transition:transform .55s var(--ease-out-quint),color .35s var(--ease-spring);
}
.mobile-nav .mn-item em{color:var(--coral);font-style:italic;font-weight:700}
.mn-item-label{flex:1;min-width:0;position:relative;display:inline-block}
/* Coral underline that grows from left on tap */
.mn-item-label::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--coral);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease-out-quint);
}
.mn-item:hover,
.mn-item:active,
.mn-item:focus-visible{transform:translateX(8px);color:#fff}
.mn-item:hover .mn-item-label::after,
.mn-item:active .mn-item-label::after,
.mn-item:focus-visible .mn-item-label::after{transform:scaleX(1)}
.mn-item-arr{
  font-family:var(--font-display);font-size:1.1rem;font-weight:400;
  color:rgba(255,255,255,.38);
  transition:transform .55s var(--ease-out-quint),color .35s var(--ease-spring);
}
.mn-item:hover .mn-item-arr,
.mn-item:active .mn-item-arr,
.mn-item:focus-visible .mn-item-arr{transform:translateX(6px);color:var(--coral)}

/* Accordion group — native <details> */
.mn-group{
  border-bottom:1px solid rgba(255,255,255,.06);
  margin:0;padding:0;
}
.mn-summary{
  position:relative;
  display:flex;align-items:center;gap:18px;
  padding:18px 0;
  min-height:56px;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,8vw,3.4rem);
  letter-spacing:-.04em;line-height:1.05;color:#fff;
  cursor:pointer;list-style:none;
  transition:transform .55s var(--ease-out-quint),color .35s var(--ease-spring);
}
.mn-summary::-webkit-details-marker{display:none}
.mn-summary:hover,
.mn-summary:active,
.mn-summary:focus-visible{transform:translateX(8px)}
.mn-summary-label{flex:1;min-width:0;position:relative;display:inline-block}
.mn-summary-label em{color:var(--coral);font-style:italic;font-weight:700}
.mn-summary-label::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--coral);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .55s var(--ease-out-quint);
}
.mn-summary:hover .mn-summary-label::after,
.mn-summary:active .mn-summary-label::after,
.mn-group[open] > .mn-summary .mn-summary-label::after{transform:scaleX(1)}
.mn-summary-meta{
  font-family:var(--font-mono);font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;
  color:rgba(255,255,255,.45);
  white-space:nowrap;
}
/* + → × icon · two bars that rotate together */
.mn-summary-icon{
  position:relative;
  width:32px;height:32px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:transparent;
  transition:
    border-color .35s var(--ease-spring),
    background-color .35s var(--ease-spring),
    transform .55s var(--ease-out-quint);
}
.mn-icon-bar{
  position:absolute;left:50%;top:50%;
  width:12px;height:1.5px;
  background:#fff;
  border-radius:2px;
  transform-origin:50% 50%;
  transition:transform .55s var(--ease-out-quint),background-color .35s var(--ease-spring);
}
.mn-icon-bar-h{transform:translate(-50%,-50%) rotate(0deg)}
.mn-icon-bar-v{transform:translate(-50%,-50%) rotate(90deg)}
.mn-group[open] > .mn-summary .mn-summary-icon{
  border-color:var(--coral);
  background:rgba(244,122,77,.14);
  transform:rotate(135deg);
}
.mn-group[open] > .mn-summary .mn-icon-bar{background:var(--coral)}

/* Sub-panel · smooth fade-in on open */
.mn-sub{
  padding:6px 0 22px;
  display:flex;flex-direction:column;gap:6px;
  animation:mnSubIn .55s var(--ease-out-quint) both;
}
@keyframes mnSubIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
.mn-sub-eyebrow{
  display:block;margin:18px 0 6px;
  font-family:var(--font-mono);font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;color:var(--coral);
}
.mn-sub ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.mn-sub ul li{margin:0}
.mn-sub ul li a{
  position:relative;
  display:flex;align-items:center;
  padding:13px 14px;
  min-height:44px;
  border-radius:8px;
  font-family:var(--font-display);font-weight:500;font-size:1.02rem;
  color:rgba(255,255,255,.78) !important;letter-spacing:-.01em;
  text-decoration:none;line-height:1.3;
  transition:
    background-color .35s var(--ease-spring),
    color .35s var(--ease-spring),
    transform .55s var(--ease-out-quint);
}
.mn-sub ul li a:hover,
.mn-sub ul li a:active,
.mn-sub ul li a:focus-visible{
  background:rgba(244,122,77,.10);
  color:#fff !important;
  transform:translateX(6px);
}

/* "All _____" top-of-section pill */
.mn-sub-top{
  display:flex !important;align-items:center;justify-content:space-between;
  padding:14px 16px !important;
  margin-top:8px;
  min-height:48px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  font-family:var(--font-display) !important;font-weight:600 !important;font-size:.96rem !important;
  color:#fff !important;letter-spacing:-.005em;
  text-decoration:none;
  transition:
    background-color .35s var(--ease-spring),
    border-color .35s var(--ease-spring),
    transform .55s var(--ease-out-quint);
}
.mn-sub-top:hover,
.mn-sub-top:active,
.mn-sub-top:focus-visible{
  background:var(--coral);border-color:var(--coral);
  color:#fff !important;transform:translateX(4px);
}
.mn-sub-bot{margin-top:18px;background:var(--coral) !important;border-color:var(--coral) !important}

/* Attorney grid inside Team accordion — 2 columns with photos */
/* minmax(0,1fr), never a bare 1fr. A bare `1fr` means minmax(AUTO,1fr) — the
   auto floor refuses to shrink a column below its content's min-content width,
   so these two columns computed to 437px + 393px = 830px inside a 389px menu
   and every attorney card was clipped out of view on a phone. */
.mn-sub-att{
  display:flex !important;flex-direction:column;gap:0 !important;
}
.mn-sub-att li,.mn-sub-att li a{min-width:0}
.mn-sub-att li a{
  display:flex;padding:8px 4px !important;gap:14px;
  align-items:center;
  background:none;border-radius:8px;
}
.mn-sub-att li a:active{background:rgba(255,255,255,.05)}
.mn-sub-eyebrow-2{margin-top:16px}
.mn-att-photo{
  flex-shrink:0;
  width:44px;height:44px;border-radius:50%;
  overflow:hidden;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
}
.mn-att-photo img{width:100%;height:100%;object-fit:cover;display:block}
.mn-att-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.mn-att-name{
  font-family:var(--font-display);font-weight:600;font-size:1.06rem;
  color:#fff;letter-spacing:-.012em;line-height:1.2;
}
.mn-att-role{
  font-family:var(--font-mono);font-size:.5rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Final CTA at the bottom of the drawer */
.mn-cta{
  margin-top:8px;
  justify-content:center;
  min-height:56px;
  font-size:1rem;
}

/* Drawer footer · two office addresses + meta line */
.mn-foot{
  margin-top:20px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:18px;
}
.mn-foot-offices{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.mn-foot-office{display:flex;flex-direction:column;gap:3px}
.mn-foot-tag{
  font-family:var(--font-mono);font-size:.54rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;color:var(--coral);
  margin-bottom:3px;
}
.mn-foot-addr{
  font-family:var(--font-body);font-size:.78rem;
  color:rgba(255,255,255,.55);line-height:1.45;
  letter-spacing:-.005em;
}
.mn-foot-meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.56rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.35);
}
.mn-foot-sep{color:var(--coral);opacity:.6}

/* Backdrop overlay */
.mobile-nav-overlay{
  position:fixed;inset:0;
  background:rgba(10,8,7,.55);
  z-index:150;
  opacity:0;pointer-events:none;
  transition:opacity .55s var(--ease-out-quint);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.mobile-nav-overlay.open{opacity:1;pointer-events:auto}

/* Small phones · tighten type, single-column attorney grid */
@media (max-width:380px){
  .mobile-nav{padding:92px 22px 24px}
  .mobile-nav .mn-item,
  .mn-summary{font-size:clamp(1.8rem,9vw,2.6rem)}
  .mn-sub-att{grid-template-columns:1fr !important}
  .mn-foot-offices{grid-template-columns:1fr;gap:14px}
}

/* Reduced motion · just fade, no slide or stagger */
@media (prefers-reduced-motion:reduce){
  .mobile-nav{transition:opacity .25s linear;transform:none;opacity:0;pointer-events:none}
  .mobile-nav.open{opacity:1;pointer-events:auto}
  .mobile-nav [data-mn-stagger]{opacity:1;transform:none;transition:none}
  .mn-sub{animation:none}
}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.23,1,.32,1),transform .8s cubic-bezier(.23,1,.32,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.delay-1{transition-delay:.08s}
.reveal.delay-2{transition-delay:.16s}
.reveal.delay-3{transition-delay:.24s}
.reveal.delay-4{transition-delay:.32s}

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

/* ═══════════════════════════════════════════════════
   PROFILE PAGES — shared layout (attorney + staff)
   ═══════════════════════════════════════════════════ */

.profile-hero{padding:48px 0 0;background:linear-gradient(180deg,var(--bg-warm) 0%,var(--bg) 100%);border-bottom:1px solid var(--hairline)}
.profile-hero .container{max-width:1240px;display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:end;padding-bottom:56px}
.profile-portrait{position:relative;aspect-ratio:4/5;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lift)}
.profile-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.profile-portrait .portrait-tag{position:absolute;left:18px;top:18px;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:#fff;background:rgba(10,8,7,.55);padding:6px 12px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-weight:600}
.profile-info .breadcrumb{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:24px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profile-info .breadcrumb a{color:var(--muted)}
.profile-info .breadcrumb a:hover{color:var(--coral)}
.profile-info .breadcrumb .sep{color:rgba(0,0,0,.2)}
.profile-info .breadcrumb .here{color:var(--coral);font-weight:600}
.profile-info .practice-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:var(--coral);font-weight:600;margin-bottom:18px}
.profile-info .practice-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral)}
.profile-info h1{font-size:clamp(3rem,6vw,5.6rem);letter-spacing:-.05em;line-height:.92;margin:0 0 22px}
.profile-info h1 .last{display:block;color:var(--coral)}
.profile-info .descriptor{font-family:var(--font-display);font-weight:500;font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--text-soft);line-height:1.45;letter-spacing:-.01em;margin:0 0 30px;max-width:520px}
.profile-info .practice-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.profile-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.profile-meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;padding-top:30px;border-top:1px solid var(--hairline)}
.profile-meta-row .label{display:block;margin-bottom:6px;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:600}
.profile-meta-row .val{font-family:var(--font-display);font-weight:600;font-size:.96rem;color:var(--ink);letter-spacing:-.005em}

/* Staff variant — smaller hero, no bar admission */
.profile-hero.is-staff .container{grid-template-columns:.85fr 1.2fr;gap:56px;max-width:1180px}
.profile-hero.is-staff .profile-portrait{max-width:380px}
.profile-hero.is-staff .profile-info h1{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.04em;line-height:.98;margin:0 0 18px}

/* Practice focus section */
.profile-focus{padding:96px 0 64px}
.profile-focus .container{max-width:1240px;display:grid;grid-template-columns:200px 1fr;gap:64px;align-items:start}
.profile-focus .section-label{position:sticky;top:120px}
.profile-focus .section-label .num{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;color:var(--coral);font-weight:600;margin-bottom:8px;display:block}
.profile-focus .section-label .title{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.profile-focus .focus-body .lead{font-family:var(--font-display);font-weight:500;font-size:clamp(1.25rem,2vw,1.55rem);color:var(--ink);line-height:1.4;letter-spacing:-.02em;margin:0 0 32px;max-width:680px}
.profile-focus .focus-body .lead em{color:var(--coral);font-style:normal}
.focus-grid{display:grid;grid-template-columns:1fr;gap:0;max-width:680px;border-top:1px solid var(--hairline)}
.focus-row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--hairline);align-items:start}
.focus-row .k{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--coral);font-weight:600;padding-top:2px}
.focus-row .v{font-size:1rem;line-height:1.55;color:var(--text);font-family:var(--font-display);font-weight:500}

/* Profile pending callout */
.profile-pending{padding:0 0 96px}
.profile-pending .container{max-width:1240px;display:grid;grid-template-columns:200px 1fr;gap:64px;align-items:start}
.profile-pending .section-label{position:sticky;top:120px}
.profile-pending .section-label .num{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;color:var(--coral);font-weight:600;margin-bottom:8px;display:block}
.profile-pending .section-label .title{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.pending-card{max-width:680px;background:var(--bg-warm);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:36px 38px;position:relative;overflow:hidden}
.pending-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--coral)}
.pending-card .tag{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;color:var(--coral);font-weight:700;display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.pending-card .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px rgba(244,122,77,.18)}
.pending-card h3{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);line-height:1.2;margin:0 0 12px}
.pending-card p{font-size:1rem;line-height:1.6;color:var(--text-soft);margin:0 0 18px;max-width:560px}
.pending-card .pending-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* Profile related practice areas */
.profile-related{padding:80px 0;background:var(--bg-warm);border-top:1px solid var(--hairline)}
.profile-related .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.profile-related .related-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.profile-related .related-card:hover{box-shadow:0 14px 32px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.05);border-color:var(--coral-line)}
.profile-related .related-tag{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--coral);font-weight:600}
.profile-related .related-card h4{font-size:1.15rem;letter-spacing:-.02em;margin:0;color:var(--ink)}
.profile-related .related-card p{font-size:.92rem;color:var(--text-soft);margin:0;line-height:1.5}

@media (max-width:1100px){
  .profile-hero .container,.profile-hero.is-staff .container{grid-template-columns:1fr;gap:36px;padding-bottom:48px;align-items:start}
  .profile-portrait,.profile-hero.is-staff .profile-portrait{max-height:520px;aspect-ratio:5/4;max-width:none}
  .profile-focus .container,.profile-pending .container{grid-template-columns:1fr;gap:18px}
  .profile-focus .section-label,.profile-pending .section-label{position:static}
  .profile-related .related-grid{grid-template-columns:1fr;gap:14px}
}
@media (max-width:560px){
  .profile-meta{grid-template-columns:1fr}
  .profile-info .practice-chips{gap:6px}
  .focus-row{grid-template-columns:1fr;gap:4px}
  .pending-card{padding:28px 24px}
}

/* ═══════════════════════════════════════════════════
   PRACTICE AREA — FAQ section
   ═══════════════════════════════════════════════════ */

.pad-faq{padding:80px 0;background:var(--bg);border-top:1px solid var(--hairline)}
.pad-faq .container{max-width:1240px}
.pad-faq-head{display:grid;grid-template-columns:220px 1fr;gap:64px;align-items:start;margin-bottom:36px;padding-bottom:24px;border-bottom:1px solid var(--hairline)}
.pad-faq-head .head-label{position:sticky;top:120px}
.pad-faq-head .head-label .num{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;color:var(--coral);font-weight:600;margin-bottom:8px;display:block}
.pad-faq-head .head-label .title{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);line-height:1.2;display:block}
.pad-faq-head .head-body h2{margin:0 0 12px;font-size:clamp(1.5rem,2.5vw,2rem);letter-spacing:-.03em}
.pad-faq-head .head-body p{margin:0;color:var(--text-soft);font-family:var(--font-display);font-weight:500;font-size:.98rem;line-height:1.55;max-width:680px}
.pad-faq-list{display:grid;grid-template-columns:220px 1fr;gap:64px;align-items:start}
.pad-faq-list .list-spacer{}
.pad-faq-items{max-width:760px;display:flex;flex-direction:column;gap:8px}
.pad-faq-item{border-top:1px solid var(--hairline);transition:background .2s ease}
.pad-faq-item:last-child{border-bottom:1px solid var(--hairline)}
.pad-faq-item summary{list-style:none;padding:24px 56px 24px 0;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink);line-height:1.4;position:relative}
.pad-faq-item summary::-webkit-details-marker{display:none}
.pad-faq-item summary::after{content:"+";position:absolute;right:0;top:24px;font-family:var(--font-mono);font-size:1.4rem;font-weight:400;color:var(--coral);line-height:1;transition:transform .25s ease}
.pad-faq-item[open] summary::after{content:"−"}
.pad-faq-item summary:hover{color:var(--coral)}
.pad-faq-body{padding:0 56px 24px 0;color:var(--text-soft);font-size:.98rem;line-height:1.65;max-width:680px}
.pad-faq-body p{margin:0 0 12px}
.pad-faq-body p:last-child{margin-bottom:0}
.pad-faq-body strong{color:var(--ink);font-weight:600}
/* Bulleted answers — a few FAQs answer with a list rather than a paragraph. */
.pad-faq-body ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.pad-faq-body ul:last-child{margin-bottom:0}
.pad-faq-body li{position:relative;padding-left:20px}
.pad-faq-body li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--coral);opacity:.75}
.pad-faq-foot{margin-top:28px;padding:18px 22px;background:var(--bg-warm);border:1px solid var(--hairline);border-radius:12px;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:600;max-width:680px;line-height:1.5}
.pad-faq-foot strong{color:var(--coral)}

@media (max-width:900px){
  .pad-faq-head,.pad-faq-list{grid-template-columns:1fr;gap:18px}
  .pad-faq-head .head-label{position:static}
  .pad-faq-list .list-spacer{display:none}
  .pad-faq-item summary{font-size:1rem;padding-right:40px}
  .pad-faq-item summary::after{font-size:1.2rem}
  .pad-faq-body{padding-right:0}
}

/* ═══════════════════════════════════════════════════
   AGENCY DESIGN SYSTEM ADDITIONS (Wave 3)
   Editorial pullquote, motion vocabulary, team mosaic,
   card ornament, photo essay strip, timeline refinement.
   ═══════════════════════════════════════════════════ */
.editorial-pullquote{
  padding:96px 0;
  background:var(--bg);
  position:relative;
  overflow:hidden;
}
.editorial-pullquote.warm{background:var(--bg-warm)}
.editorial-pullquote.tight{padding:64px 0}
.editorial-pullquote .container{max-width:920px;text-align:center;position:relative}
.editorial-pullquote .ep-mark{
  display:block;
  width:48px;
  height:1px;
  background:var(--coral);
  margin:0 auto 28px;
}
.editorial-pullquote blockquote{
  margin:0;
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.4rem,2.6vw,2.05rem);
  line-height:1.35;
  color:var(--ink);
  letter-spacing:-.015em;
  text-wrap:balance;
}
.editorial-pullquote blockquote::before{
  content:"\201C";
  display:block;
  font-family:var(--font-serif);
  font-size:4.5rem;
  font-style:normal;
  font-weight:400;
  color:var(--coral);
  line-height:.4;
  margin-bottom:18px;
  opacity:.55;
}
.editorial-pullquote cite{
  display:block;
  margin-top:28px;
  font-family:var(--font-mono);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--muted);
  font-weight:600;
  font-style:normal;
}
.editorial-pullquote cite .role{color:var(--coral)}
.editorial-pullquote.aligned-left .container{text-align:left;max-width:760px;margin-left:max(32px,calc((100vw - 1240px)/2))}
.editorial-pullquote.aligned-left .ep-mark{margin-left:0}
@media (max-width:880px){
  .editorial-pullquote{padding:64px 0}
  .editorial-pullquote.aligned-left .container{margin-left:auto;margin-right:auto}
}

/* — Editorial h1: word-by-word reveal —
   Apply class="editorial" to non-hero h1s.
   The hero already has its own .word system on home.
   Reduced-motion fully respected. */
h1.editorial .word,
h1.editorial .w{
  display:inline-block;
  opacity:0;
  transform:translateY(28px);
}
h1.editorial.in .word,
h1.editorial.in .w{
  animation:editorialWord .9s cubic-bezier(.23,1,.32,1) forwards;
}
h1.editorial.in .w:nth-child(1){animation-delay:.05s}
h1.editorial.in .w:nth-child(2){animation-delay:.12s}
h1.editorial.in .w:nth-child(3){animation-delay:.19s}
h1.editorial.in .w:nth-child(4){animation-delay:.26s}
h1.editorial.in .w:nth-child(5){animation-delay:.33s}
h1.editorial.in .w:nth-child(6){animation-delay:.40s}
h1.editorial.in .w:nth-child(7){animation-delay:.47s}
h1.editorial.in .w:nth-child(8){animation-delay:.54s}
h1.editorial.in .w:nth-child(9){animation-delay:.61s}
h1.editorial.in .w:nth-child(10){animation-delay:.68s}
h1.editorial.in .w:nth-child(n+11){animation-delay:.75s}
@keyframes editorialWord{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  h1.editorial .word,h1.editorial .w{opacity:1 !important;transform:none !important;animation:none !important}
}

/* — Coral underline draw-in on H2 (SVG) —
   Use sparingly: wrap H2 inside <h2 class="h2-underline">…<svg class="u-line">…</svg></h2>
   or use the JS that injects it on opt-in H2s. */
.h2-underline{position:relative;display:inline-block;padding-bottom:14px}
.h2-underline .u-line{
  position:absolute;
  left:0;
  bottom:2px;
  width:100%;
  height:14px;
  overflow:visible;
  pointer-events:none;
}
.h2-underline .u-line path{
  fill:none;
  stroke:var(--coral);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  pathLength:1;
  transition:stroke-dashoffset 1.2s cubic-bezier(.65,.05,.36,1);
}
.h2-underline.in .u-line path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .h2-underline .u-line path{stroke-dashoffset:0;transition:none}
}

/* — Parallax media (gentle, in-view only) —
   Element gets transform:translate3d(0, var(--py, 0), 0) from JS.
   Wrap the moving inner with .parallax-inner. */
.parallax{position:relative;overflow:hidden}
.parallax-inner{
  will-change:transform;
  transform:translate3d(0,0,0);
  transition:transform .1s linear;
}
@media (prefers-reduced-motion:reduce){
  .parallax-inner{transform:none !important}
}

/* — Signature serif numeral ornament on cards —
   Apply: <span class="card-num">№ 01</span> inside a card.
   Outlined Source Serif in coral-soft, top-right.
   Becomes the connective tissue between the 7 card variants. */
.intent-card,
.post-card,
.attorney-card,
.related-card,
.community-card,
.pad-related-card,
.topic-card{
  position:relative;
}
.card-num{
  position:absolute;
  top:14px;
  right:18px;
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:2.4rem;
  line-height:1;
  letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(244,122,77,.35);
  text-stroke:1px rgba(244,122,77,.35);
  pointer-events:none;
  z-index:3;
  transition:color .35s ease,-webkit-text-stroke-color .35s ease;
  user-select:none;
}
.card-num .n{font-style:normal;font-family:var(--font-mono);font-size:.55em;letter-spacing:.04em;margin-right:.18em;vertical-align:.18em}
.intent-card:hover .card-num,
.post-card:hover .card-num,
.attorney-card:hover .card-num,
.related-card:hover .card-num,
.community-card:hover .card-num,
.pad-related-card:hover .card-num,
.topic-card:hover .card-num{
  -webkit-text-stroke-color:rgba(244,122,77,.7);
  text-stroke-color:rgba(244,122,77,.7);
}
/* On post-card the image starts at top — float numeral over image with dark stroke instead */
.post-card .card-num{
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.55);
  text-stroke:1px rgba(255,255,255,.55);
  mix-blend-mode:overlay;
}
/* On attorney-card the image dominates — keep coral but slightly stronger */
.attorney-card .card-num{
  -webkit-text-stroke:1px rgba(255,255,255,.5);
  text-stroke:1px rgba(255,255,255,.5);
  z-index:3;
}
@media (max-width:680px){
  .card-num{font-size:1.8rem;top:10px;right:14px}
}

/* — Team portrait mosaic (replaces stat sheet) —
   4×3 broken grid. Mix of headshots and environmental.
   On hover the photo lifts; siblings dim. */
.team-mosaic{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,minmax(120px,15vw));
  gap:8px;
  position:relative;
  max-width:560px;
}
.team-mosaic .tm-cell{
  position:relative;
  overflow:hidden;
  border-radius:6px;
  background:var(--bg-warm);
  transition:opacity .4s ease,transform .4s cubic-bezier(.23,1,.32,1),filter .4s ease;
}
.team-mosaic .tm-cell img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s cubic-bezier(.23,1,.32,1);
}
.team-mosaic .tm-cell::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(10,8,7,.45) 100%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.team-mosaic .tm-cap{
  position:absolute;
  left:10px;
  bottom:10px;
  right:10px;
  font-family:var(--font-mono);
  font-size:.55rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#fff;
  font-weight:600;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease,transform .35s ease;
  z-index:2;
}
.team-mosaic .tm-cell.span-2{grid-column:span 2}
.team-mosaic .tm-cell.span-row{grid-row:span 2}
.team-mosaic:hover .tm-cell{opacity:.55;filter:saturate(.8)}
.team-mosaic .tm-cell:hover{opacity:1;filter:none;transform:translateY(-2px);box-shadow:0 18px 36px rgba(0,0,0,.18);z-index:2}
.team-mosaic .tm-cell:hover img{transform:scale(1.06)}
.team-mosaic .tm-cell:hover::after{opacity:1}
.team-mosaic .tm-cell:hover .tm-cap{opacity:1;transform:translateY(0)}

/* Caption strip under mosaic — quiet stat reposition */
.team-stat-strip{
  display:flex;
  gap:32px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--hairline);
  flex-wrap:wrap;
  align-items:baseline;
}
.team-stat-strip .ts-item{display:flex;align-items:baseline;gap:8px}
.team-stat-strip .ts-num{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  color:var(--ink);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.team-stat-strip .ts-label{
  font-family:var(--font-mono);
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
  font-weight:600;
}
@media (max-width:880px){
  .team-mosaic{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,minmax(100px,28vw));max-width:none}
  .team-mosaic .tm-cell.span-2{grid-column:span 1}
  .team-mosaic .tm-cell.span-row{grid-row:span 1}
}
@media (prefers-reduced-motion:reduce){
  .team-mosaic .tm-cell,.team-mosaic .tm-cell img{transition:none}
  .team-mosaic:hover .tm-cell{opacity:1;filter:none}
}

/* — Virginia photo-essay strip (homepage community band replacement) —
   5 photos edge-to-edge. Mono captions float bottom-left. */
.essay-strip{
  position:relative;
  width:100%;
  background:var(--ink);
}
.essay-strip-track{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;
  gap:2px;
  height:clamp(280px,38vw,420px);
}
.essay-strip .es-frame{
  position:relative;
  overflow:hidden;
  background:#0a0807;
}
.essay-strip .es-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.6s cubic-bezier(.23,1,.32,1),filter .6s ease;
  filter:saturate(.92) contrast(1.02);
}
.essay-strip .es-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(10,8,7,.78) 100%);
  pointer-events:none;
}
.essay-strip .es-frame:hover img{transform:scale(1.04);filter:saturate(1) contrast(1.04)}
.essay-strip .es-cap{
  position:absolute;
  left:18px;
  bottom:16px;
  right:18px;
  z-index:2;
  color:#fff;
  font-family:var(--font-mono);
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:600;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.essay-strip .es-cap .es-tag{color:rgba(255,255,255,.55)}
.essay-strip .es-cap .es-place{color:#fff;letter-spacing:.16em}
.essay-strip .es-cap .es-place::before{content:"";display:inline-block;width:14px;height:1px;background:var(--coral);margin-right:8px;vertical-align:middle}

@media (max-width:1100px){
  .essay-strip-track{grid-template-columns:1fr 1fr 1fr;height:clamp(220px,42vw,360px)}
  .essay-strip .es-frame:nth-child(n+4){display:none}
}
@media (max-width:680px){
  .essay-strip-track{grid-template-columns:1fr 1fr;height:240px}
  .essay-strip .es-frame:nth-child(n+3){display:none}
  .essay-strip .es-cap{font-size:.55rem}
}

/* About timeline visual refinement — coral connector + ribbon tag */
.timeline-item .timeline-year{
  display:inline-block;
  padding:3px 9px;
  background:var(--coral-soft);
  border:1px solid var(--coral-line);
  border-radius:3px;
  margin-bottom:10px;
}
.timeline-item::before{
  background:var(--coral) !important;
  border-color:var(--coral) !important;
  box-shadow:0 0 0 4px var(--bg),0 0 0 5px var(--coral-line) !important;
}

/* ═════════════════════════════════════════════════════
   FRAMER-FLOW LAYER · added 2026-05-18
   Spring-like easing curves, hover physics, image
   parallax + Ken Burns. See CLAUDE.md for rules.
   ═════════════════════════════════════════════════════ */
:root{
  --ease-spring:cubic-bezier(.16,1,.3,1);
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --ease-snap:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.35s;
  --dur-base:.55s;
  --dur-slow:.85s;
}

/* Refined reveal — slower, softer, springier */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:
    opacity var(--dur-slow) var(--ease-out-quint),
    transform var(--dur-slow) var(--ease-out-quint);
  will-change:opacity,transform;
}
/* Once revealed, release the GPU layer (will-change:auto) and drop the resting
   transform entirely. A permanent will-change + translateY(0) keeps every
   full-width section on its own composited layer, and Safari paints a ~1px
   anti-aliased seam at layer edges — the glitchy white hairline at section tops.
   translateY(0) and none are visually identical, so this changes nothing visible. */
.reveal.visible{opacity:1;transform:none;will-change:auto}
.reveal.delay-1{transition-delay:.08s}
.reveal.delay-2{transition-delay:.16s}
.reveal.delay-3{transition-delay:.24s}
.reveal.delay-4{transition-delay:.32s}
.reveal.delay-5{transition-delay:.40s}

/* Side-reveal variants */
.reveal.from-left{transform:translateX(-40px) translateY(0)}
.reveal.from-right{transform:translateX(40px) translateY(0)}
.reveal.from-left.visible,.reveal.from-right.visible{transform:translateX(0) translateY(0)}

/* Buttons — magnetic-feel hover */
.btn{
  transition:
    background-color var(--dur-fast) var(--ease-spring),
    color var(--dur-fast) var(--ease-spring),
    border-color var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-spring),
    transform var(--dur-base) var(--ease-spring) !important;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.08s}

/* Cards — spring lift, not 'transition:all' */
.intent-card,.post-card,.card,.related-card{
  transition:
    background-color var(--dur-fast) var(--ease-spring),
    border-color var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-spring),
    transform var(--dur-base) var(--ease-spring) !important;
  will-change:transform;
}
/* Card links that are their own hover trigger lift via shadow only (see above),
   not translateY — moving the trigger drops :hover on Safari and oscillates.
   Only the generic .card (not a self-triggering link) keeps the translate lift. */
.card:hover{
  transform:translateY(-4px);
}

/* Image hover — slow Ken Burns inside cards */
.intent-card img,.post-card img,.related-card img,.post-card-img img{
  transition:transform 1.4s var(--ease-out-quint),filter .6s var(--ease-out-quint);
  will-change:transform;
}
.intent-card:hover img,.post-card:hover img,.related-card:hover img,.post-card:hover .post-card-img img{
  transform:scale(1.04);
}

/* Image reveal-mask for any <img class="reveal-img"> */
.reveal-img{
  opacity:0;
  transform:scale(1.08);
  filter:blur(8px);
  transition:
    opacity 1.2s var(--ease-out-quint),
    transform 1.6s var(--ease-out-quint),
    filter 1.0s var(--ease-out-quint);
}
.reveal-img.visible{opacity:1;transform:scale(1);filter:blur(0)}

/* Hero parallax target — JS adjusts --p (0→1 over scroll) */
[data-parallax]{
  will-change:transform;
  transform:translate3d(0,calc(var(--p,0) * var(--parallax-y,40px)),0);
}

/* Letter-perfect: prevent any element from animating 'all' implicitly */
*[class*="transition-all"]{
  /* discourage; if present, soften with project curve */
  transition-timing-function:var(--ease-spring) !important;
}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-img{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  [data-parallax]{transform:none!important}
}

/* ═════════════════════════════════════════════════════════════
   CUSTOM CURSOR · Framer-style lerping dot + ring
   Suppressed on `body.no-cursor` (book.html — heavy form page where
   mix-blend-mode + filter were causing Safari to compositor-lag).
   Elsewhere the native OS cursor is still visible behind it; this is
   additive, not a replacement. Coarse pointers always get the OS cursor.
   ═════════════════════════════════════════════════════════════ */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;
  pointer-events:none;z-index:99999;
  will-change:transform;
  opacity:0;
  transition:opacity .35s ease;
}
body.no-cursor .cursor-dot,
body.no-cursor .cursor-ring{display:none !important}
.cursor-dot.show,.cursor-ring.show{opacity:1}
.cursor-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--coral);
  margin:-3px 0 0 -3px;
  transition:opacity .25s ease,width .25s ease,height .25s ease,background .25s ease;
}
.cursor-ring{
  width:36px;height:36px;border-radius:50%;
  border:1.25px solid rgba(244,122,77,.55);
  background:transparent;
  margin:-18px 0 0 -18px;
  /* mix-blend-mode + filter:invert removed — too expensive on Safari, the
     reason this whole effect was disabled. Coral ring on its own is enough. */
  transition:opacity .25s ease,width .4s cubic-bezier(.34,1.56,.64,1),height .4s cubic-bezier(.34,1.56,.64,1),background .3s ease,border-color .3s ease,margin .4s cubic-bezier(.34,1.56,.64,1);
}
.cursor-ring.is-hover{
  width:54px;height:54px;
  margin:-27px 0 0 -27px;
  background:rgba(244,122,77,.12);
  border-color:rgba(244,122,77,.85);
}
.cursor-dot.is-hover{
  width:4px;height:4px;margin:-2px 0 0 -2px;
}
.cursor-ring.is-press{transform:scale(.85)}
.cursor-dot.is-press{transform:scale(.7)}
@media (hover:none),(pointer:coarse){
  .cursor-dot,.cursor-ring{display:none!important}
}
/* Restore native cursor over text inputs/textareas so users can still see caret */
input,textarea,select{cursor:text}
button,a,[role="button"]{cursor:pointer}

/* ═════════════════════════════════════════════════════════════
   SCROLL-DRIVEN IMAGE REVEAL · clip-path mask + subtle scale
   Add `.scroll-reveal` to any <img> (or its wrapper) — JS observes
   and adds `.in` when it enters viewport.
   ═════════════════════════════════════════════════════════════ */
.scroll-reveal{
  clip-path:inset(100% 0% 0% 0%);
  -webkit-clip-path:inset(100% 0% 0% 0%);
  transform:scale(1.06);
  transition:clip-path 1.4s cubic-bezier(.16,1,.3,1),-webkit-clip-path 1.4s cubic-bezier(.16,1,.3,1),transform 1.6s cubic-bezier(.16,1,.3,1);
  will-change:clip-path,transform;
}
.scroll-reveal.in{
  clip-path:inset(0% 0% 0% 0%);
  -webkit-clip-path:inset(0% 0% 0% 0%);
  transform:scale(1);
}

/* When applied to a wrapper, the inner <img> can keep its own hover transform */
.scroll-reveal-wrap{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .scroll-reveal{clip-path:none!important;-webkit-clip-path:none!important;transform:none!important;transition:none!important}
}



/* ═════════════════════════════════════════════════════════════
   SEO H2 — body-section keyword headings on practice & geo pages.
   Reads as an editorial subhead, not a marketing banner.
   ═════════════════════════════════════════════════════════════ */
.pad-seo-h2,
.seo-h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.15rem,1.6vw,1.35rem);
  letter-spacing:-.02em;
  color:var(--ink);
  line-height:1.3;
  margin:0 0 18px;
  max-width:680px;
}
.pad-seo-h2 em,
.seo-h2 em{color:var(--coral);font-style:normal}

/* ═══════════════════════════════════════════════════
   ACCESSIBILITY TOOLBAR · custom widget · no third-party
   Floating button (bottom-right) opens a slide-up panel.
   Preferences persisted in localStorage.
   ═══════════════════════════════════════════════════ */
/* Bottom-LEFT: the intake assistant launcher owns the bottom-right corner. */
/* Hover doesn't exist on a phone — don't print instructions for it. */
.hint-touch{display:none}
@media (pointer:coarse){
  .hint-fine{display:none}
  .hint-touch{display:inline}
}

/* ── Touch targets ───────────────────────────────────────────────────────
   A phone visitor tapping a phone number is the highest-intent action on a law
   firm's site, and every tel: link on this site was a 19-21px sliver. The mobile
   drawer already gets this right (47px); the footer and office cards never did.
   44px is the documented minimum for a fingertip. */
@media (pointer:coarse){
  a[href^="tel:"]{
    display:inline-flex;align-items:center;min-height:44px;
  }
  /* Footer link columns: ~30 links stacked at 24px with 10px gaps. */
  #site-footer .ft-col a,
  #site-footer .ftb-links a,
  .ft-legal a{
    min-height:44px;display:inline-flex;align-items:center;
  }
  /* The fixed furniture must not sit on the footer's legal row. */
  #site-footer .ftb-links,
  #site-footer .ft-legal{padding-bottom:76px}
}
/* The a11y button, chat launcher and nudge float above everything — with the
   nav drawer open they landed on top of it (the FAB covered an attorney card). */
body.nav-open .a11y-toggle,
body.nav-open .pca-launch,
body.nav-open .pca-nudge,
html.nav-open .a11y-toggle,
html.nav-open .pca-launch,
html.nav-open .pca-nudge{opacity:0;pointer-events:none}
/* the assistant sheet is full-width on phones — the a11y FAB would float on its footer */
@media (max-width:520px){html.pca-open .a11y-toggle{opacity:0;pointer-events:none}}

/* ── iOS zoom floor ──────────────────────────────────────────────────────
   Safari on iOS zooms the entire page when a focused field's font-size is
   under 16px, throwing the visitor out of whatever they were filling in. Every
   form on this site is a conversion path, so 16px is a floor, not a style
   choice. Applied at coarse-pointer widths only so desktop typography is
   untouched. */
@media (max-width:880px){
  input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
  input[type="search"],input[type="number"],input:not([type]),select,textarea{
    font-size:16px !important;
  }
}

.a11y-toggle{
  position:fixed;bottom:24px;left:24px;z-index:9998;
  width:52px;height:52px;border-radius:50%;
  background:var(--ink,#1a1612);color:#fff;
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 14px 32px -10px rgba(20,16,12,.4),0 4px 10px rgba(20,16,12,.2),0 0 0 4px rgba(244,122,77,.0);
  transition:box-shadow .45s var(--ease-spring),transform .35s var(--ease-spring),background .25s ease;
  /* One-time entry pulse · draws the eye briefly so visitors find the
     accessibility tools without having to scroll. Three soft coral rings
     emanate over ~5s, then settle. */
  animation:a11yEntry 5.4s cubic-bezier(.22,1,.36,1) 1.6s 1 both;
}
/* Coral badge whenever ANY accessibility setting is active — settings change
   the whole site's feel (motion, fonts, contrast), so their cause must be
   visible or "the site looks broken" with no clue why. */
.a11y-toggle.has-active::after{
  content:"";position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:var(--coral);border:2.5px solid var(--bg,#fbf8f4);
}
@keyframes a11yEntry{
  0%   {box-shadow:0 14px 32px -10px rgba(20,16,12,.4),0 4px 10px rgba(20,16,12,.2),0 0 0 0    rgba(244,122,77,.62)}
  18%  {box-shadow:0 14px 32px -10px rgba(20,16,12,.4),0 4px 10px rgba(20,16,12,.2),0 0 0 16px rgba(244,122,77,0)}
  36%  {box-shadow:0 14px 32px -10px rgba(20,16,12,.4),0 4px 10px rgba(20,16,12,.2),0 0 0 0    rgba(244,122,77,.5)}
  54%  {box-shadow:0 14px 32px -10px rgba(20,16,12,.4),0 4px 10px rgba(20,16,12,.2),0 0 0 16px rgba(244,122,77,0)}
  72%  {box-shadow:0 14px 32px -10px rgba(20,16,12,.4),0 4px 10px rgba(20,16,12,.2),0 0 0 0    rgba(244,122,77,.38)}
  90%  {box-shadow:0 14px 32px -10px rgba(20,16,12,.4),0 4px 10px rgba(20,16,12,.2),0 0 0 14px rgba(244,122,77,0)}
  100% {box-shadow:0 14px 32px -10px rgba(20,16,12,.4),0 4px 10px rgba(20,16,12,.2),0 0 0 4px  rgba(244,122,77,0)}
}
@media (prefers-reduced-motion:reduce){
  .a11y-toggle{animation:none}
}
.a11y-toggle:hover{transform:translateY(-2px);background:var(--coral);box-shadow:0 18px 40px -12px rgba(244,122,77,.5),0 4px 12px rgba(244,122,77,.3),0 0 0 4px rgba(244,122,77,.18)}
.a11y-toggle:focus-visible{outline:none;box-shadow:0 14px 32px -10px rgba(20,16,12,.4),0 0 0 4px rgba(244,122,77,.35)}
.a11y-toggle svg{width:24px;height:24px}
.a11y-toggle .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}

.a11y-panel{
  position:fixed;bottom:88px;left:24px;z-index:9998;
  width:min(380px,calc(100vw - 48px));
  max-height:calc(100vh - 120px);overflow:auto;
  background:#fff;color:var(--ink,#1a1612);
  border:1px solid var(--hairline,rgba(0,0,0,.08));
  border-radius:18px;
  box-shadow:0 32px 80px -20px rgba(20,16,12,.4),0 8px 20px -6px rgba(20,16,12,.18);
  transform-origin:bottom left;
  transform:scale(.92) translateY(8px);opacity:0;
  transition:transform .35s var(--ease-spring),opacity .25s ease;
  pointer-events:none;
}
.a11y-panel[hidden]{display:none}
.a11y-panel.is-open{transform:scale(1) translateY(0);opacity:1;pointer-events:auto}
.a11y-panel-head{
  position:sticky;top:0;z-index:1;
  padding:22px 24px 18px;
  background:#fff;
  border-bottom:1px solid var(--hairline,rgba(0,0,0,.06));
  display:flex;flex-direction:column;gap:6px;
}
.a11y-eyebrow{
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.24em;color:var(--coral-text,#c54a1a);
}
.a11y-panel-head h2{
  margin:0;
  font-family:var(--font-serif,'Source Serif 4',Georgia,serif);
  font-weight:400;font-style:normal;
  font-size:1.3rem;line-height:1.2;letter-spacing:-.02em;
}
.a11y-close{
  position:absolute;top:18px;right:16px;
  width:32px;height:32px;border-radius:50%;
  background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted,#7a716a);
  transition:background .25s ease,color .25s ease;
}
.a11y-close:hover{background:rgba(0,0,0,.06);color:var(--ink,#1a1612)}
.a11y-close svg{width:18px;height:18px}

.a11y-body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:24px}
.a11y-group{display:flex;flex-direction:column;gap:10px}
.a11y-group-label{
  font-family:var(--font-mono);font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;color:var(--muted,#7a716a);
  margin-bottom:4px;
}

.a11y-size-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  background:var(--bg-warm,#fbf8f4);border:1px solid var(--hairline,rgba(0,0,0,.06));
  border-radius:12px;padding:5px;
}
.a11y-size{
  background:transparent;border:none;cursor:pointer;
  padding:10px 0;border-radius:8px;
  font-family:var(--font-display);font-weight:600;
  color:var(--ink,#1a1612);
  display:inline-flex;align-items:baseline;justify-content:center;
  transition:background .25s ease,transform .35s var(--ease-spring);
}
.a11y-size span{font-size:.7em;margin-left:1px;color:var(--muted)}
.a11y-size[data-a11y-size="s"]{font-size:.85rem}
.a11y-size[data-a11y-size="m"]{font-size:1rem}
.a11y-size[data-a11y-size="l"]{font-size:1.15rem}
.a11y-size[data-a11y-size="xl"]{font-size:1.3rem}
.a11y-size:hover{background:rgba(244,122,77,.08)}
.a11y-size.is-active{background:var(--ink,#1a1612);color:#fff}
.a11y-size.is-active span{color:rgba(255,255,255,.7)}

.a11y-switch{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  padding:10px 12px;border-radius:10px;
  transition:background .25s ease;
}
.a11y-switch:hover{background:var(--bg-warm,#fbf8f4)}
.a11y-switch input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
}
.a11y-switch-knob{
  position:relative;flex-shrink:0;
  width:36px;height:20px;border-radius:999px;
  background:var(--hairline,rgba(0,0,0,.18));
  transition:background .25s ease;
}
.a11y-switch-knob::after{
  content:"";position:absolute;top:2px;left:2px;
  width:16px;height:16px;border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:transform .25s var(--ease-spring);
}
.a11y-switch input:checked + .a11y-switch-knob{background:var(--coral)}
.a11y-switch input:checked + .a11y-switch-knob::after{transform:translateX(16px)}
.a11y-switch input:focus-visible + .a11y-switch-knob{box-shadow:0 0 0 3px rgba(244,122,77,.25)}
.a11y-switch-text{
  font-family:var(--font-display);font-weight:500;font-size:.94rem;
  color:var(--ink,#1a1612);
}

.a11y-reset{
  width:100%;padding:12px 18px;
  background:transparent;border:1px solid var(--hairline,rgba(0,0,0,.18));
  border-radius:10px;cursor:pointer;
  font-family:var(--font-mono);font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;color:var(--ink,#1a1612);
  transition:background .25s ease,border-color .25s ease;
}
.a11y-reset:hover{background:var(--bg-warm,#fbf8f4);border-color:var(--ink,#1a1612)}

.a11y-footer{
  padding-top:18px;border-top:1px solid var(--hairline,rgba(0,0,0,.06));
  font-size:.82rem;line-height:1.55;color:var(--text-soft,#534b42);
}
.a11y-footer p{margin:0 0 10px}
.a11y-footer p:last-child{margin-bottom:0}
.a11y-footer a{color:var(--coral-text,#c54a1a);text-decoration:none;border-bottom:1px solid rgba(197,74,26,.32)}
.a11y-footer a:hover{border-color:var(--coral-text,#c54a1a)}

/* ═══ Body classes applied by JS based on persisted preferences ═══ */
/* Text size lives on the ROOT element — most of the site's type is sized in
   rem (clamp ranges, headings, body), and rem only responds to html, not body. */
html.a11y-text-s{font-size:92%}
html.a11y-text-l{font-size:112.5%}
html.a11y-text-xl{font-size:128%}

/* High contrast darkens the text tokens directly. A filter on body applies to
   the whole subtree and can't be cancelled on children, so the old approach
   washed out photography while barely moving text contrast. */
html.a11y-high-contrast{
  --ink:#000000;
  --text:#1f1a15;
  --text-soft:#2e2620;
  --muted:#3a312a;
  --coral-text:#a33a10;
  --hairline:rgba(0,0,0,.28);
  --hairline-soft:rgba(0,0,0,.14);
}
html.a11y-high-contrast body{filter:contrast(1.06)}

html.a11y-highlight-links a:not(.btn):not(.a11y-close):not(.a11y-size):not(.a11y-reset):not(.btn-primary):not(.btn-ghost):not(.btn-ink){
  outline:2px solid var(--coral);
  outline-offset:2px;
  border-radius:3px;
  background:rgba(244,122,77,.08);
}

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after{
  animation-duration:.001ms !important;
  animation-delay:0ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}

html.a11y-readable-font *:not(.lr-svg):not(.lr-svg *){
  font-family:Verdana,'Helvetica Neue',Arial,sans-serif !important;
  letter-spacing:.01em !important;
  word-spacing:.1em !important;
  line-height:1.7 !important;
}

@media (max-width:520px){
  .a11y-toggle{bottom:18px;left:18px;width:48px;height:48px}
  .a11y-panel{bottom:78px;right:18px;left:18px;width:auto;max-height:calc(100vh - 110px)}
}

/* ═══ SPOTLIGHT CARDS · pointer-tracked coral edge light ═══
   Port of the spotlight-border effect to vanilla CSS: JS writes the pointer's
   card-local position into --mx/--my; a masked 1px ring lights up where the
   cursor travels, plus an optional soft interior wash (.spotlight-wash).
   No background-attachment:fixed — that approach is broken in Safari. */
.spotlight{--mx:-400px;--my:-400px}
.spotlight::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:radial-gradient(280px 280px at var(--mx) var(--my),
    rgba(255,176,130,.95), rgba(244,122,77,.35) 45%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;z-index:7;
  opacity:0;transition:opacity .45s ease;
}
.spotlight:hover::after{opacity:1}
.spotlight-wash::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(360px 360px at var(--mx) var(--my),rgba(244,122,77,.09),transparent 72%);
  pointer-events:none;z-index:4;opacity:0;transition:opacity .45s ease;
}
.spotlight-wash:hover::before{opacity:1}
@media(pointer:coarse){
  .spotlight::after,.spotlight-wash::before{display:none}
}

/* ═══ Touch ergonomics + small-screen legibility floors ═══ */
/* Icon links get a 44px hit area on touch devices only — desktop keeps the
   24px visual circles. */
@media (pointer:coarse){
  /* !important: page-level <style> blocks re-declare the 32px size and load
     after this file. */
  .ftb-social,.ft-brand-social{width:44px !important;height:44px !important}
}
/* Nothing user-facing renders below ~10.5px on phones. These are the mono
   eyebrow/meta labels that were landing at 8–9.6px; !important because some
   are sized inside page-level <style> blocks that load after this file. */
@media (max-width:760px){
  .hero-tag,.tag,
  .mn-att-role,.mn-foot-tag,.mn-quick-tag,.mn-summary-meta,.mn-sub-eyebrow{
    font-size:.66rem !important;
  }
  /* Mono meta/status labels that land at 8.6–9.9px on phones. */
  .op-text,.live,.label,.h-stat-top,.hts-lbl,.hts-meta,
  .ft-service-eyebrow,.ft-office-hours strong,.ft-office-fax em,
  .bk-tile-num,#bkStepLabel,.ts-label,.pa-attorney-meta,
  .va-reach-stat .l,.va-reach-stat .n,.num .n,
  .hr-card-eyebrow,.hr-card-office,.office-eyebrow,
  .hint,.meta-hint,.thj-text{
    font-size:.625rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PRINT STYLES · readable on paper without the marketing chrome
   Designed for the two real use cases:
   · An attorney printing a profile sheet to share with a referral
   · A client printing a practice-area summary for their records
   Tested for letter-size at 72 dpi default Chrome/Safari print preview.
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  /* Page setup · half-inch margins around the content well */
  @page { size: auto; margin: 0.5in; }

  /* Base · black on white, classic serif, no opaque backgrounds */
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: economy !important;
    print-color-adjust: economy !important;
  }
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif !important;
    font-size: 10.5pt !important;
    line-height: 1.45 !important;
  }

  /* Chrome to hide · nav, footer, splash, widgets, marquees, scroll hints */
  .splash, .splash *, .site-header, .site-nav, .nav-mega, .mobile-nav,
  .mobile-nav-overlay, .menu-toggle, .site-footer,
  .a11y-toggle, .a11y-panel, .a11y-widget,
  .hero-marquee-wrap, .hero-scroll-hint, .hero-frame-meta,
  .hero-media video, .hero-media::before, .hero-media::after,
  .skip-link, .progress-bar, .reveal-img,
  .nav-mega-feature, .nav-meta-bar, .mn-cta,
  .pad-related, .pad-attorneys, .h-roster,
  .h-essay, .h-essay-wrap, .h-essay-track,
  .manifesto-interlude, .recognition,
  .ap2-essay, .ap2-pullshot, .ap2-frame-meta,
  .footer, .ft-grid, .ft-rule, .ft-meta,
  .btn, .btn-primary, .btn-ghost, .btn-link,
  .cinema-cta, .hr-cta-btn,
  .booking-cta, .ft-cta, .ft-cta-primary,
  iframe, video,
  [data-magnetic], [data-parallax],
  .no-print {
    display: none !important;
  }

  /* Headlines · keep impact, drop the gradient + heavy letter-spacing */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Source Serif 4', Georgia, serif !important;
    color: #000 !important;
    page-break-after: avoid;
    break-after: avoid;
    letter-spacing: -0.01em !important;
  }
  h1 { font-size: 22pt !important; margin: 0 0 12pt !important; line-height: 1.15 !important; }
  h2 { font-size: 16pt !important; margin: 18pt 0 8pt !important; line-height: 1.2 !important; }
  h3 { font-size: 12pt !important; margin: 14pt 0 6pt !important; line-height: 1.25 !important; }
  h1 em, h2 em, h3 em {
    color: #000 !important;
    background: none !important;
    -webkit-text-fill-color: #000 !important;
    font-style: italic !important;
  }

  /* Paragraphs · widow/orphan control */
  p, li {
    orphans: 3;
    widows: 3;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Section padding · collapse to keep ink density reasonable */
  section { padding: 12pt 0 !important; }
  .container { max-width: 100% !important; padding: 0 !important; margin: 0 auto !important; }

  /* Hero on a printed page · just the headline + sub.  No background image. */
  .hero, .pad-hero, .ap2-opening {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 14pt !important;
    background: none !important;
  }
  .hero-media, .ap2-opening-bg, .pad-hero-media { display: none !important; }
  .hero-content, .pad-hero .container { padding: 0 !important; }

  /* Cards + callouts · keep tidy borders */
  .pad-services li, .intent-card, .pad-when-need li,
  .ap2-detail-block, .pad-faq-item, .pad-attorney-card {
    border: 1px solid #999 !important;
    padding: 8pt 10pt !important;
    margin: 0 0 8pt !important;
    background: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Images that are kept · scale to fit the page */
  img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .ap2-portrait img, .pad-att-avatar img, .profile-portrait img {
    max-width: 2in !important;
    border: 1px solid #999 !important;
  }

  /* Links · underline + expose the URL inline for citation */
  a, a:visited { color: #000 !important; text-decoration: underline !important; }
  a[href^="http"]::after,
  a[href^="/"]::after {
    content: " (" attr(href) ") ";
    font-size: 8.5pt;
    color: #555 !important;
    font-style: italic;
  }
  /* Don't expand intra-page jumps or mailto/tel — they're already visible. */
  a[href^="#"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after,
  nav a::after,
  .pad-breadcrumb a::after { content: "" !important; }

  /* Reveal animations · skip them in print */
  .reveal, [class*="reveal"] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Footer · replace with a compact byline at the bottom of the last page */
  body::after {
    content: "PLDR Law · pldrlaw.com · Lynchburg 434.846.2768";
    display: block;
    margin-top: 24pt;
    padding-top: 8pt;
    border-top: 1px solid #999;
    font-family: 'Hanken Grotesk', 'Inter', sans-serif !important;
    font-size: 8pt;
    color: #555 !important;
    text-align: center;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE TRANSITIONS · Framer-style fade between full-page navigations.
   First arrival: splash handles it (skipped here via .splash-pending).
   Subsequent: body fades in on arrival; fades out + lifts on departure.
   Falls back to native browser behavior if View Transitions API exists
   and reduced motion is requested.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes pldrPageFadeIn {
  /* Opacity-only — no transform. A transform on <body> (even at rest via
     fill-mode) makes it the containing block for position:fixed, which made
     the fixed nav + a11y widget anchor to the document and scroll away. */
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  /* `backwards` (not `both`): the fade leaves NO retained transform once done,
     so <body> never becomes the containing block for position:fixed elements
     (which would make the a11y widget / fixed UI scroll away instead of staying
     pinned to the viewport). */
  animation: pldrPageFadeIn .42s cubic-bezier(.22,1,.36,1) backwards;
}
/* Suppress the body fade on the homepage — the splash dissolve covers the
   entrance, and re-running it at the splash handoff caused a whole-page flash.
   splash-done is added in cleanup() so it stays suppressed after the splash. */
html.splash-pending body,
html.splash-done body { animation: none !important; }

/* Outgoing transition · added by scripts.njk on internal-link click. */
html.is-page-leaving body {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .32s cubic-bezier(.4,0,.6,1), transform .32s cubic-bezier(.4,0,.6,1);
  pointer-events: none;
}

/* Reduced motion · skip the fade entirely */
@media (prefers-reduced-motion: reduce) {
  body, html.is-page-leaving body {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE POLISH LAYER · 2026-05-31
   Single source of truth for sub-880px breakpoints. Tunes the
   homepage hero, manifesto, intent grid, story, photo essay, roster,
   va-reach, recognition, stats, plus shared page chrome (footer,
   page-hero, practice areas) for a calmer, editorial mobile feel.
   Targets: 768 / 480 / 380 / 360. Desktop styles are untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 768px and down · tablet portrait + large phone landscape ─── */
@media (max-width:768px){
  /* Base section rhythm — generous but not breathy. CLAUDE.md min 80px. */
  section{padding:80px 0}
  section.large{padding:96px 0}
  .container,.container-narrow,.container-tight{padding:0 22px}

  /* Body type floor — never go below ~16px on mobile, easier reading */
  body{font-size:16px}
  p{font-size:1rem;line-height:1.6}

  /* Headline letter-spacing relaxes slightly so tight tracking
     doesn't crash words together on narrow screens */
  h1,h2,h3{letter-spacing:-.035em;text-wrap:balance}

  /* ─── HOMEPAGE HERO · the owner's #1 mobile pain ─── */
  .hero{min-height:560px}
  /* Hero is 100svh — make sure the content sits *up* enough that the
     marquee strip + CTAs don't crash together. */
  .hero-content{padding:96px 0 110px}
  .hero-content .container{grid-template-columns:1fr;gap:0;max-width:none}
  /* H1 — clamp the upper bound back so 5-line wrapping settles to 3 lines.
     Lower min so 320px screens don't overflow. */
  .hero h1{
    font-size:clamp(2rem,7.2vw,2.9rem);
    line-height:1.02;letter-spacing:-.04em;
    margin:0 0 18px;
    max-width:100%;
  }
  .hero h1 em{padding:0}
  .hero p{
    font-size:1rem;line-height:1.55;margin:0 0 24px;
    max-width:100%;color:rgba(255,255,255,.84);
  }
  .hero-tag{
    font-size:.6rem;letter-spacing:.18em;margin-bottom:22px;gap:10px;
  }
  .hero-tag::before{width:28px}
  .hero-frame-meta{
    top:84px;left:22px;right:22px;
    font-size:.5rem;letter-spacing:.16em;
  }
  /* Drop the secondary frame-meta on right side so the tag has full width */
  .hero-frame-meta span:last-child{display:none}
  /* Slow the marquee — at 60s on tiny screens it whips by; bump to 90s */
  .hero-marquee{animation-duration:90s;gap:42px;font-size:.6rem;letter-spacing:.18em}
  .hero-marquee-wrap{padding:11px 0}
  /* Trust strip — single line max, smaller */
  .hero-trust-slim{
    margin-top:18px;gap:10px;font-size:.55rem;letter-spacing:.18em;
  }
  /* Scroll hint already hidden < 880, keep it. */
  .hero-scroll-hint{display:none}
  /* Cut animation chatter on mobile — reveal everything together, faster */
  .hero h1 .word{animation-duration:.6s}
  .hero h1 .word:nth-child(1){animation-delay:.18s}
  .hero h1 .word:nth-child(2){animation-delay:.22s}
  .hero h1 .word:nth-child(3){animation-delay:.26s}
  .hero h1 .word:nth-child(4){animation-delay:.3s}
  .hero h1 .word:nth-child(5){animation-delay:.34s}
  .hero h1 .word:nth-child(6){animation-delay:.38s}
  .hero h1 .word:nth-child(8){animation-delay:.42s}
  .hero h1 .word:nth-child(9){animation-delay:.46s}
  .hero h1 .word:nth-child(10){animation-delay:.5s}
  .hero h1 .word:nth-child(11){animation-delay:.54s}
  .hero h1 .word:nth-child(12){animation-delay:.58s}
  .hero h1 .word:nth-child(13){animation-delay:.62s}
  .hero p,.hero-actions,.hero-trust-slim{animation-duration:.6s}
  .hero p{animation-delay:.7s}
  .hero-actions{animation-delay:.8s}
  .hero-trust-slim{animation-delay:.92s}

  /* ─── HOMEPAGE: MANIFESTO INTERLUDE ─── */
  .manifesto{min-height:auto;padding:64px 0}
  .manifesto-inner{padding:0 22px;max-width:none}
  .manifesto h2{
    font-size:clamp(2rem,8vw,2.8rem);
    letter-spacing:-.025em;line-height:1.05;
    margin:0 0 32px;
  }
  .manifesto h2 .underline{height:3px;margin-top:18px}
  .manifesto.in h2 .underline{width:140px}
  .manifesto-eyebrow{font-size:.62rem;letter-spacing:.22em;margin-bottom:28px;gap:12px}
  .manifesto-eyebrow::before{width:36px}
  .manifesto-foot{gap:14px;margin-top:8px}
  .manifesto-foot .signature{font-size:.95rem;line-height:1.55}
  .manifesto-meta-top{top:18px;font-size:.5rem}
  /* Bottom meta already hidden via 980px rule */

  /* ─── HOMEPAGE: INTENT TILES ─── */
  .intents{padding:80px 0 80px}
  .intents-head{margin:0 auto 48px;max-width:none}
  .intents-head h2{font-size:clamp(1.85rem,7vw,2.4rem);line-height:1.06;letter-spacing:-.03em}
  .intents-head .lead{font-size:1rem;line-height:1.55}
  .intent-card{
    padding:32px 26px 28px;min-height:auto;gap:14px;
  }
  .intent-card h3{font-size:1.25rem;line-height:1.2}
  .intent-card .intent-sub{font-size:.94rem;line-height:1.55}
  .intents-cta{margin-top:40px;gap:10px}
  .intents-cta .btn{width:100%;max-width:340px;justify-content:center}

  /* ─── HOMEPAGE: PHOTO ESSAY · drag rail ─── */
  .h-essay{padding:72px 0 60px}
  .h-essay-head{padding:0 22px;margin-bottom:32px}
  .h-essay-head h2{font-size:clamp(1.85rem,6.6vw,2.4rem);line-height:1.06;letter-spacing:-.03em}
  .h-essay-head .meta{font-size:.55rem;letter-spacing:.18em}
  /* Smaller frames so two land in view simultaneously, encouraging the swipe */
  .h-frame.portrait .img{width:240px}
  .h-frame.landscape .img{width:340px}
  .h-frame.tall .img{width:220px}
  .h-frame.wide .img{width:380px}
  .h-essay-track{gap:14px;padding:0 22px}
  .h-essay-foot{padding:0 22px;margin-top:24px}

  /* ─── HOMEPAGE: STORY SCROLL (sticky photo) ─── */
  .story{padding:72px 0 0}
  .story-intro{padding:0 22px 56px}
  .story-h2{font-size:clamp(1.95rem,7vw,2.6rem);line-height:1.04;letter-spacing:-.028em}
  .story-lead{font-size:1rem;margin-top:12px}
  .story-stage{padding:0 22px 64px}
  .story-photo{height:52vh;max-height:440px;padding-bottom:28px}
  .story-panel{padding:36px 0}
  .story-panel h3{font-size:clamp(1.55rem,5.8vw,2.1rem)}
  .story-panel p{font-size:1rem;line-height:1.55}
  .story-panel-num{margin-bottom:24px;font-size:.62rem;letter-spacing:.22em}

  /* ─── HOMEPAGE: GROW CALLOUT ─── */
  .h-grow-callout{padding:64px 0}
  .hgc-h3{font-size:clamp(1.7rem,6.6vw,2.2rem);line-height:1.08}
  .hgc-body{font-size:1rem;line-height:1.55}
  .hgc-inner .btn-primary{width:100%;max-width:340px;justify-content:center}

  /* ─── HOMEPAGE: PROCESS ─── */
  .process{padding:80px 0}
  .process-head{margin-bottom:48px}
  .process-head h2{font-size:clamp(1.85rem,7vw,2.4rem)}
  .process-step{padding:28px 22px;gap:10px;min-height:auto}
  .process-step h4{font-size:1.05rem}
  .process-step p{font-size:.92rem;line-height:1.5}
  .process-cta{flex-direction:column;align-items:stretch;margin-top:36px}
  .process-cta .btn{justify-content:center;width:100%;max-width:340px;margin:0 auto}

  /* ─── HOMEPAGE: STATS BAND ─── */
  .h-stats-inner{padding:64px 22px;gap:36px 12px}
  .h-stat{gap:12px}
  .h-stat-top{font-size:.54rem;letter-spacing:.2em}
  .h-stat-num{font-size:clamp(2.6rem,11vw,3.4rem);letter-spacing:-.035em}
  .h-stat-label{font-size:.85rem;line-height:1.4;max-width:none}

  /* ─── HOMEPAGE: ROSTER · horizontal rail ─── */
  .h-roster{padding:72px 0 64px}
  .h-roster-head{padding:0 22px 32px;gap:16px;grid-template-columns:1fr}
  .h-roster-h2{font-size:clamp(2rem,7.5vw,2.8rem);line-height:1.04}
  .h-roster-lead{font-size:.98rem;line-height:1.55;color:rgba(255,255,255,.74)}
  .h-roster-meta{gap:10px;margin-top:14px;padding-top:14px}
  .h-roster-meta-tag,.h-roster-meta-link{font-size:.58rem;letter-spacing:.18em}
  /* Smaller cards — two peeking at once is more inviting than one centered */
  .h-roster-rail{padding:0 22px 22px}
  .h-roster-card{width:clamp(220px,70vw,260px)}
  .hr-card-name{font-size:1.1rem}
  .hr-card-deck{font-size:.78rem;-webkit-line-clamp:2}
  .h-roster-foot{padding:8px 22px 0;gap:14px}
  .h-roster-arrow{width:40px;height:40px}

  /* ─── HOMEPAGE: VA REACH ─── */
  .va-reach{padding:80px 0}
  .va-reach-inner{padding:0 22px;gap:40px}
  .va-reach-h2{font-size:clamp(2rem,7.5vw,2.8rem);line-height:1.04;letter-spacing:-.028em}
  .va-reach-lead{font-size:1rem;line-height:1.55}
  .va-reach-stat{padding:14px 12px}
  .va-reach-stat .n{font-size:1.6rem}
  .va-reach-stat .l{font-size:.5rem;letter-spacing:.16em}
  .va-reach-cta{flex-direction:column;align-items:stretch;gap:10px}
  .va-reach-cta .btn{justify-content:center;width:100%}
  .office-card{padding:22px 20px}
  .office-name{font-size:1.2rem;line-height:1.2}
  .office-eyebrow{font-size:.55rem;letter-spacing:.18em}
  .office-addr{font-size:.88rem;line-height:1.55}
  .oc-chip{padding:7px 11px;font-size:.82rem}
  .va-reach-footnote{font-size:.55rem;letter-spacing:.16em;padding:12px 14px}

  /* ─── HOMEPAGE: RECOGNITION (magazine spread) ─── */
  .h-honors{padding:72px 0}
  .h-honors-wrap{gap:36px}
  .hh-plate{max-width:none;margin:0}
  .hh-feature-head{margin-bottom:24px;padding-bottom:14px;gap:6px}
  .hh-feature-h2{font-size:clamp(1.7rem,6.6vw,2.3rem);line-height:1.08;margin-bottom:24px}
  .hh-feature-lede{font-size:1rem;line-height:1.65}
  .hh-dropcap{font-size:3rem;line-height:.85}
  .hh-feature-rule{margin:28px 0 22px}
  .hh-also-list{gap:12px}
  .hh-also-name{font-size:.98rem}
  .hh-also-honor{font-size:.82rem;line-height:1.45}

  /* ─── HOMEPAGE: BAND + RECENT + FINAL CTA ─── */
  .band{padding:72px 0}
  .band .container{gap:24px}
  .band h2{font-size:clamp(1.85rem,6.8vw,2.3rem);line-height:1.08}
  .band p{font-size:1rem;line-height:1.55}
  .band-actions{flex-direction:column;align-items:stretch;width:100%;gap:10px}
  .band-actions .btn{justify-content:center;width:100%}
  .recent{padding:72px 0}
  .recent-head{margin-bottom:32px;gap:16px}
  .recent-head h2{font-size:clamp(1.85rem,6.8vw,2.4rem);line-height:1.06}
  .posts-grid{gap:14px}
  .post-card-body{padding:20px 22px;gap:8px}
  .post-card h3{font-size:1.02rem;line-height:1.32}
  .post-card .post-excerpt{font-size:.88rem}
  .final-cta{padding:88px 0}
  .final-cta h2{font-size:clamp(2rem,7.5vw,2.8rem);line-height:1.04;letter-spacing:-.035em}
  .final-cta p{font-size:1rem;line-height:1.55}

  /* ─── PAGE HERO (non-home pages) ─── */
  .page-hero{padding:96px 0 56px}
  .page-hero h1{font-size:clamp(2.2rem,8vw,3.1rem);line-height:1;margin:0 0 18px;letter-spacing:-.04em}
  .page-hero p.lead{font-size:1rem;line-height:1.55}

  /* ─── ABOUT PAGE ─── */
  .about-hero{padding:88px 0 64px}
  .about-hero h1{font-size:clamp(2.2rem,8vw,3.1rem);line-height:1;letter-spacing:-.04em}
  .about-hero .lead{font-size:1rem;line-height:1.55}
  .about-hero-art{max-width:none}
  .about-quote{padding:72px 0}
  .about-quote blockquote{font-size:clamp(1.35rem,5.4vw,1.85rem);line-height:1.32}
  .about-values{padding:80px 0}
  .about-values-head{margin-bottom:40px}
  .about-value{padding:28px 24px;gap:10px}
  .about-value h3{font-size:1.08rem}
  .about-value p{font-size:.9rem;line-height:1.5}
  .about-story{padding:80px 0}
  .about-story .container{gap:32px}
  .about-locations{padding:80px 0}
  .about-locations .container{gap:28px}
  .about-locations h2{font-size:clamp(1.7rem,6.4vw,2.2rem)}
  .about-loc-card{padding:20px}
  .about-build{padding:72px 0}
  .about-build h2{font-size:clamp(1.85rem,7vw,2.4rem);line-height:1.08}
  .about-community{padding:72px 0}
  .about-community-head{margin-bottom:32px}
  .about-cta{padding:88px 0}
  .about-cta h2{font-size:clamp(2rem,7.5vw,2.8rem);line-height:1.04;letter-spacing:-.035em}
  .about-cta p{font-size:1rem;line-height:1.55}
  .about-cta-actions{flex-direction:column;align-items:stretch}
  .about-cta-actions .btn{justify-content:center;width:100%;max-width:340px;margin:0 auto}

  /* ─── TEAM PAGE ─── */
  .team-hero{padding:88px 0 56px}
  .team-hero h1{font-size:clamp(2.2rem,8vw,3.2rem);line-height:1;letter-spacing:-.04em}
  .team-hero .lead{font-size:1rem;line-height:1.55}
  .team-hero-meta .row .v{font-size:1.15rem}
  .team-section{padding:56px 0}
  .section-eyebrow h2{font-size:clamp(1.5rem,6vw,1.9rem)}
  .attorneys-grid,.staff-grid{gap:14px}
  .attorney-card-body{padding:18px 20px 22px}
  .attorney-card-body h3{font-size:1.12rem}
  .attorney-card-body .descriptor{font-size:.85rem;line-height:1.45}
  .staff-section{padding:72px 0}
  .team-work-together{padding:72px 0}
  .team-work-together h2{font-size:clamp(1.85rem,7vw,2.4rem);line-height:1.08}
  .team-work-together p{font-size:1rem;line-height:1.55}
  .team-join{padding:80px 0}
  .team-join .container{gap:28px}
  .team-join h2{font-size:clamp(1.85rem,7vw,2.4rem);line-height:1.04}
  .team-join p{font-size:1rem;line-height:1.55}
  .team-join-actions{flex-direction:column;align-items:stretch}
  .team-join-actions .btn{justify-content:center;width:100%}

  /* ─── CONTACT PAGE ─── */
  .contact-section{padding:72px 0}
  .contact-form-wrap{padding:28px 22px;border-radius:var(--radius-lg)}
  .contact-form-wrap h2{font-size:clamp(1.5rem,5.6vw,1.9rem)}
  .contact-form-wrap .lead{margin-bottom:24px}
  .info-card{padding:24px 22px}
  .next-steps{padding:20px 22px}
  .disclaimer-band{padding:64px 0 72px}
  .disclaimer-band .disc-card{padding:24px 22px}
  .contact-maps-section{padding:72px 0}

  /* ─── PRACTICE AREA PAGES (.pad-*) ─── */
  .pad-hero{padding:88px 0 0}
  .pad-hero h1{font-size:clamp(2.1rem,8vw,3rem);line-height:1;letter-spacing:-.04em;margin:14px 0 18px}
  .pad-hero .lead{font-size:1rem;line-height:1.55}
  .pad-hero-media{margin-top:36px;aspect-ratio:16/10}
  .pad-meta-card{padding:22px 20px;gap:14px}
  .pad-section{padding:56px 0}
  .pad-body{max-width:none}
  .pad-body .pull{font-size:1.12rem;line-height:1.45}
  .pad-body p{font-size:1rem;line-height:1.65}
  .pad-services li{padding:14px 0;font-size:.95rem}
  .pad-if li{padding:14px 18px 14px 48px;font-size:.95rem}
  .pad-if li::before{left:14px;width:22px;height:22px}
  .pad-if li::after{left:19px;font-size:.78rem}
  .pad-related{padding:64px 0}
  .pad-related-card{padding:22px 20px;min-height:auto}
  .pad-attorneys{padding:64px 0}
  .pad-att-card{padding:20px}
  .pad-cta{padding:72px 0}
  .pad-cta h2{font-size:clamp(1.7rem,6.4vw,2.2rem);line-height:1.06}
  .pad-cta p{font-size:1rem;line-height:1.55}
  .pad-cta-actions{flex-direction:column;align-items:stretch;width:100%;max-width:340px;margin:0 auto}
  .pad-cta-actions .btn{justify-content:center;width:100%}

  /* ─── FOOTER mobile sweetening ─── */
  .ft-service-area{padding:36px 22px}
  .ft-service-copy{font-size:.95rem;line-height:1.6}
  .ft-legal-disclaimer{padding:28px 22px 14px}
  .ft-legal-disclaimer p{font-size:.74rem;line-height:1.6}
  .site-footer-bottom{padding:18px 22px 24px;font-size:.78rem}
  .ft-office-hours{font-size:.88rem}

  /* ─── Reveal motion · faster + smaller translate on mobile ─── */
  .reveal{transition-duration:.6s !important}
  .reveal{transform:translateY(20px)}
  .reveal.in,[class*="reveal"].in{transform:translateY(0)}
}

/* ─── 480px and down · standard phone (iPhone Plus and smaller) ─── */
@media (max-width:480px){
  /* Section rhythm — pull in further at phone widths so the page doesn't
     feel breathy. 80→64 px on standard sections, large sections 96→72. */
  section{padding:64px 0}
  section.large{padding:72px 0}
  .container,.container-narrow,.container-tight{padding:0 18px}

  /* Hero — pull H1 in slightly so 4-word lines settle */
  .hero h1{font-size:clamp(1.95rem,8vw,2.6rem);letter-spacing:-.035em;line-height:1.04}
  .hero p{font-size:.96rem}
  .hero-tag{font-size:.66rem;margin-bottom:18px}
  /* Deepen the photo scrim — at phone widths the body copy sits over the
     subject's face and needed more separation than the desktop gradient. */
  .hero-media::after{background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.6) 55%,rgba(10,8,7,.94) 100%)}
  .hero-frame-meta{top:78px;left:18px;right:18px}
  /* Stack hero CTAs (already done at 760px in index.njk) — make sure trust strip wraps cleanly */
  .hero-trust-slim{flex-direction:column;align-items:flex-start;gap:6px;margin-top:16px}
  .hero-trust-slim .hts-sep{display:none}

  /* Manifesto */
  .manifesto h2{font-size:clamp(1.85rem,8.6vw,2.4rem)}

  /* Intent tiles */
  .intents-head h2{font-size:clamp(1.7rem,7.4vw,2.15rem)}

  /* Story / process / stats */
  .story-h2{font-size:clamp(1.8rem,7.4vw,2.3rem)}
  .process-head h2{font-size:clamp(1.7rem,7.4vw,2.15rem)}
  .h-stats-inner{grid-template-columns:1fr 1fr;padding:56px 18px;gap:30px 12px}
  .h-stat-num{font-size:clamp(2.4rem,11vw,3rem)}

  /* Roster */
  .h-roster-h2{font-size:clamp(1.85rem,7.6vw,2.4rem)}
  .h-roster-card{width:clamp(220px,75vw,260px)}

  /* Final CTA / band */
  .final-cta h2{font-size:clamp(1.85rem,8vw,2.4rem)}
  .band h2{font-size:clamp(1.7rem,7vw,2.1rem)}

  /* About */
  .about-hero h1{font-size:clamp(2rem,8.4vw,2.8rem)}

  /* Team */
  .team-hero h1{font-size:clamp(2rem,8.4vw,2.8rem)}

  /* Practice area */
  .pad-hero h1{font-size:clamp(1.9rem,8vw,2.7rem)}

  /* Footer · tighter */
  .ft-service-area{padding:32px 18px}
  .ft-legal-disclaimer{padding:24px 18px 12px}

  /* Touch target floor — buttons + links must be ≥ 44px tap */
  .btn{padding:13px 22px;min-height:46px}
  .site-nav a,.mobile-nav a{min-height:44px}
}

/* ─── 380px and down · iPhone SE / mini · tightest mainstream ─── */
@media (max-width:380px){
  section{padding:52px 0}
  section.large{padding:60px 0}
  .container,.container-narrow,.container-tight{padding:0 16px}

  /* Hero · final clamp tier so 13-word H1 settles in 4 lines max */
  .hero h1{font-size:clamp(1.85rem,8.2vw,2.4rem);line-height:1.06;letter-spacing:-.03em}
  .hero p{font-size:.94rem;line-height:1.55}
  .hero-content{padding:88px 0 104px}
  .hero-frame-meta{top:72px;left:16px;right:16px;font-size:.46rem}

  /* H2 floor across the site */
  .intents-head h2,
  .story-h2,
  .manifesto h2,
  .h-essay-head h2,
  .hh-feature-h2,
  .va-reach-h2,
  .h-roster-h2,
  .final-cta h2,
  .band h2,
  .about-hero h1,
  .team-hero h1,
  .pad-hero h1{font-size:clamp(1.7rem,8.2vw,2.1rem) !important;letter-spacing:-.025em;line-height:1.08}

  /* Card padding · pull in so cards don't feel squeezed */
  .intent-card,.post-card-body,.office-card,.attorney-card-body,.staff-card-body{padding-left:18px;padding-right:18px}

  .h-roster-card{width:clamp(200px,78vw,240px)}
  .h-frame.portrait .img{width:210px}
  .h-frame.landscape .img{width:300px}
  .h-frame.tall .img{width:200px}
  .h-frame.wide .img{width:340px}
}

/* ─── 360px and down · last-resort safety net (Android XS) ─── */
@media (max-width:360px){
  .container,.container-narrow,.container-tight{padding:0 14px}
  .hero h1{font-size:1.85rem}
  .hero-marquee{gap:32px}
  .h-roster-card{width:clamp(190px,82vw,230px)}
}

/* ─── Coarse pointer · touch devices get full-width CTAs by default ───
   Catches landscape phones up to 1024px where the standard media-query
   width might not hit but the device is still touch-only. */
@media (hover:none) and (pointer:coarse) and (max-width:900px){
  /* Anywhere a button row sits on a phone, stretch primary CTAs. */
  .hero-actions{width:100%}
  .hero-actions .btn{width:100%;justify-content:center}
  /* Restore Ken Burns hover effects don't fire on touch — no-op */
}

/* ─── Practice-area "Who handles this" cards · large-format headshots ───
   The per-page inline rule makes .pad-att-avatar a tiny 52px circle; these
   higher-specificity globals upgrade every such card (practice areas + SEO
   landing pages) to a prominent portrait — the source images are 800×1200. */
.pad-att-card .pad-att-avatar{width:100%;height:auto;aspect-ratio:4/5;border-radius:14px;font-size:2.6rem}
.pad-att-card .pad-att-avatar.has-photo img{border-radius:14px;object-position:center 22%}
.pad-att-card{gap:18px}

/* ─── Page-transition curtain · covers during load, then reveals upward.
   Works in every browser (JS-driven) and hides the new page's render so the
   transition is smooth no matter how heavy the page is. ─── */
#pgCurtain{position:fixed;inset:0;z-index:2147483000;background:#14100d;transform:translateY(100%);pointer-events:none}
#pgCurtain::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--coral),transparent);opacity:.75}
html.pg-arriving{background:#14100d}
html.pg-leaving{background:#14100d}
html.pg-arriving #pgCurtain{transform:translateY(0)}
html.pg-arriving.pg-reveal #pgCurtain{transform:translateY(-100%);transition:transform .6s cubic-bezier(.22,1,.36,1)}
#pgCurtain.is-cover{transform:translateY(0);transition:transform .42s cubic-bezier(.7,0,.3,1)}
@media (prefers-reduced-motion:reduce){#pgCurtain{display:none!important}html.pg-arriving{overflow:auto}}


/* ── "By referral" concierge card · practice areas we route out (criminal-traffic, media-law) ── */
.pad-referral{display:flex;gap:26px;align-items:flex-start;max-width:600px;padding:30px 34px;background:linear-gradient(135deg,var(--coral-soft) 0%,rgba(244,122,77,.025) 100%);border:1px solid var(--coral-line);border-radius:20px}
.pad-referral-mark{flex-shrink:0;width:62px;height:62px;border-radius:16px;background:linear-gradient(140deg,var(--coral) 0%,#e26538 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -12px rgba(244,122,77,.55)}
.pad-referral-mark svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pad-referral-eyebrow{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.18em;color:var(--coral-text);font-weight:700}
.pad-referral-text h3{font-family:var(--font-display);font-size:1.42rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:9px 0 8px;line-height:1.15}
.pad-referral-text p{color:var(--text-soft);font-size:.98rem;line-height:1.6;margin:0;max-width:44ch}
@media(max-width:560px){.pad-referral{flex-direction:column;gap:18px;padding:26px}}
/* italic gradient ems (background-clip:text) crop glyph overhangs without this */
h1 em,h2 em{padding-right:.08em;margin-right:-.08em}

/* Phones: the splash's SVG filters (brushed plate, etch) and blend mode are the
   most GPU-expensive things on the site; on iOS they can take the tab down. */
@media (max-width:760px){
  .splash-mark .plate-grain,.splash-mark .engrave{filter:none !important}
  .splash-mark .plate-grain{mix-blend-mode:normal;opacity:.08}
  .splash-mark .logo{filter:none}
}