/* ==========================================================================
   Haugh & Lemm, PLLC — main.css
   Design system: dark editorial / architectural. Public Sans + Instrument Serif.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto Mono';
  src: url('../fonts/roboto-mono-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
  /* surface */
  --ink:        #070908;
  --ink-1:      #0B0E0D;
  --ink-2:      #101413;
  --ink-3:      #161B19;
  --ink-4:      #1D2422;

  /* brand green */
  --g-900:      #0D1C18;
  --g-800:      #12261F;
  --g-700:      #17362C;
  --g-600:      #1F4A3B;
  --g-500:      #33735C;
  --g-400:      #4A9077;
  --g-300:      #7FBBA2;

  /* accent — reserved almost entirely for the call-to-action */
  --brass:      #C8A45C;
  --brass-lt:   #E3C88F;
  --brass-dk:   #7E6224;

  /* paper */
  --paper:      #F0EEE7;
  --paper-2:    #E4E1D7;
  --bone:       #CFCCC2;

  /* type */
  --fg:         #E9EDEA;
  --fg-2:       #B9C2BD;
  --fg-dim:     #8B948F;
  --fg-mute:    #828B86;
  --on-paper:   #14100C;
  --on-paper-2: #4A4640;
  --on-paper-3: #6B655C;

  --line:       rgba(233,237,234,.10);
  --line-2:     rgba(233,237,234,.06);
  --line-3:     rgba(233,237,234,.18);

  /* type scale — fluid */
  --fs-mono:    clamp(.625rem, .58rem + .18vw, .72rem);
  --fs-sm:      clamp(.8125rem, .78rem + .16vw, .875rem);
  --fs-base:    clamp(.9375rem, .9rem + .22vw, 1.0625rem);
  --fs-lg:      clamp(1.0625rem, 1rem + .38vw, 1.25rem);
  --fs-xl:      clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --fs-h4:      clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  --fs-h3:      clamp(1.625rem, 1.3rem + 1.5vw, 2.625rem);
  --fs-h2:      clamp(2.125rem, 1.5rem + 2.9vw, 4.25rem);
  --fs-h1:      clamp(2.5rem, 1.45rem + 4.6vw, 6.25rem);
  --fs-mega:    clamp(3.5rem, .5rem + 13vw, 14rem);

  /* rhythm */
  --pad:        clamp(1.25rem, 4.2vw, 3.5rem);
  --gutter:     clamp(1.5rem, 3vw, 2.75rem);
  --sec:        clamp(4.5rem, 10vw, 10rem);
  --maxw:       88rem;

  --r:          2px;                 /* the design is squared-off on purpose */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);

  --hdr-h:      74px;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-base);
  font-weight: 380;
  line-height: 1.62;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-synthesis-weight: none;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,dl,dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--g-500); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--r);
}

.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 {
  position: fixed; top: -100px; left: 12px; z-index: 200;
  background: var(--brass); color: #14100C; padding: .75rem 1.25rem;
  font-weight: 600; font-size: var(--fs-sm); transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { position: relative; padding-block: var(--sec); }
.grain::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E"); background-size: 300px;
  opacity: .34; mix-blend-mode: overlay;
}

/* ---------------------------------------------------------------- type utils */
.mono {
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
}
.serif { font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-weight: 400; }

.eyebrow {
  display: flex; align-items: flex-start; gap: .7rem;
  color: var(--g-300);
}
.eyebrow::before {
  content: '///'; color: var(--brass); letter-spacing: .04em; opacity: .9; flex: none;
}
.eyebrow--dark { color: #1B3D31; }
.eyebrow--dark::before { color: var(--brass-dk); }

.h1, .h2, .h3 { overflow-wrap: break-word; }
.h1 {
  font-size: var(--fs-h1); font-weight: 300; line-height: .95;
  letter-spacing: -.042em; text-wrap: balance;
}
.h2 {
  font-size: var(--fs-h2); font-weight: 300; line-height: 1.0;
  letter-spacing: -.038em; text-wrap: balance;
}
.h3 {
  font-size: var(--fs-h3); font-weight: 350; line-height: 1.08;
  letter-spacing: -.032em; text-wrap: balance;
}
.h4 {
  font-size: var(--fs-h4); font-weight: 400; line-height: 1.18;
  letter-spacing: -.025em;
}
.lede { font-size: var(--fs-lg); color: var(--fg-2); font-weight: 350; line-height: 1.55; text-wrap: pretty; }
.muted { color: var(--fg-dim); }
.tight { max-width: 46ch; }
.tight-lg { max-width: 62ch; }
.em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.14em; }

/* section heading block */
.shead { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem,2vw,1.6rem); margin-bottom: clamp(2.5rem,5vw,4.5rem); }
.shead__top {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: baseline; justify-content: space-between;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
.shead__idx { color: var(--fg-mute); }

/* ---------------------------------------------------------------- buttons */
.btn {
  --bg: var(--brass); --fg-btn: #120E08; --bd: var(--brass);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .65rem; padding: 1.02rem 1.7rem; min-height: 54px;
  background: var(--bg); color: var(--fg-btn);
  border: 1px solid var(--bd); border-radius: var(--r);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), transform .18s var(--ease);
  text-align: center;
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--brass-lt);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .38s var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleY(1); }
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

.btn--ghost {
  --bg: transparent; --fg-btn: var(--fg); --bd: var(--line-3);
}
.btn--ghost::after { background: var(--fg); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink); border-color: var(--fg); }

.btn--dark { --bg: var(--ink-1); --fg-btn: var(--fg); --bd: transparent; }
.btn--dark::after { background: var(--g-600); }
.btn--dark:hover, .btn--dark:focus-visible { color: #fff; }

.btn--onpaper { --bg: var(--on-paper); --fg-btn: var(--paper); --bd: var(--on-paper); }
.btn--onpaper::after { background: var(--g-700); }
.btn--onpaper:hover, .btn--onpaper:focus-visible { color: #fff; border-color: var(--g-700); }

.btn--wide { width: 100%; }
.btn--sm { min-height: 44px; padding: .7rem 1.15rem; }

/* text link with animated rule */
.link {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--fs-sm); font-weight: 550; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg); padding: .55rem 0 .5rem; position: relative; min-height: 44px;
}
.link::after {
  content: ''; position: absolute; left: 0; bottom: .5rem; height: 1px; width: 100%;
  background: currentColor; opacity: .3;
  transform-origin: right; transform: scaleX(1);
  transition: transform .4s var(--ease-out), opacity .3s;
}
.link:hover::after, .link:focus-visible::after { opacity: 1; }
.link .arw { transition: transform .35s var(--ease-out); }
.link:hover .arw { transform: translateX(5px); }

/* ---------------------------------------------------------------- topbar */
.topbar {
  position: relative; z-index: 60;
  background: var(--g-800); color: var(--fg-2);
  border-bottom: 1px solid rgba(233,237,234,.07);
  font-size: var(--fs-mono);
}
.topbar__in {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  min-height: 40px; padding-block: .5rem; text-align: center; flex-wrap: wrap;
}
.topbar strong { color: var(--fg); font-weight: 600; }
.topbar a {
  color: var(--brass-lt); text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: 40px; padding-inline: .3rem;
}
.topbar a:hover { color: #fff; }
.pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brass); flex: none;
  box-shadow: 0 0 0 0 rgba(200,164,92,.6); animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200,164,92,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(200,164,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(200,164,92,0); }
}

/* ---------------------------------------------------------------- header */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(7,9,8,.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.hdr.is-stuck { background: rgba(7,9,8,.94); border-bottom-color: var(--line); }
.hdr__in {
  display: flex; align-items: center; gap: var(--gutter);
  min-height: var(--hdr-h);
}
.hdr__spacer { flex: 1; }

/* logo */
.logo { display: inline-flex; align-items: center; gap: .7rem; flex: none; padding-block: .2rem; min-height: 44px; }
.logo__mark {
  width: 38px; height: 38px; flex: none; border: 1px solid var(--line-3);
  display: grid; place-items: center; position: relative; overflow: hidden;
  transition: border-color .35s var(--ease);
}
.logo__mark svg { width: 22px; height: 22px; }
.logo:hover .logo__mark { border-color: var(--brass); }
.logo__txt { display: grid; line-height: 1; }
.logo__name {
  font-family: 'Instrument Serif', Georgia, serif; font-size: 1.32rem;
  letter-spacing: .002em; color: var(--fg); white-space: nowrap;
}
.logo__sub {
  font-family: 'Roboto Mono', monospace; font-size: .5625rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--fg-dim); margin-top: .32rem;
}

/* nav */
.nav { display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.4rem); }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: .55rem .1rem; font-size: var(--fs-sm); font-weight: 420;
  color: var(--fg-2); letter-spacing: -.005em; white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"], .nav__link.is-active { color: var(--fg); }
.nav__link.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .1rem;
  height: 1px; background: var(--brass);
}
.nav__chev { transition: transform .3s var(--ease); opacity: .6; }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + .55rem); left: 50%; translate: -50% 0;
  width: min(560px, 78vw); padding: 1.5rem;
  background: var(--ink-2); border: 1px solid var(--line);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.85);
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.5rem;
  opacity: 0; visibility: hidden; translate: -50% 8px;
  transition: opacity .28s var(--ease), translate .28s var(--ease), visibility .28s;
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; translate: -50% 0; }
.mega__h { grid-column: 1 / -1; color: var(--fg-mute); padding-bottom: .7rem; margin-bottom: .3rem; border-bottom: 1px solid var(--line-2); }
.mega__link { display: grid; gap: .15rem; padding: .7rem .8rem; margin-inline: -.8rem; transition: background .22s; }
.mega__link:hover { background: var(--ink-3); }
.mega__link b { font-weight: 500; font-size: var(--fs-sm); color: var(--fg); }
.mega__link span { font-size: .78rem; color: var(--fg-mute); line-height: 1.4; }

.hdr__cta { display: flex; align-items: center; gap: .75rem; flex: none; }
.hdr__tel {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Roboto Mono', monospace; font-size: .92rem; font-weight: 500;
  letter-spacing: -.01em; color: var(--fg); white-space: nowrap;
  padding: .5rem .2rem; transition: color .25s;
}
.hdr__tel:hover { color: var(--brass-lt); }
.hdr__tel svg { opacity: .75; }

.burger {
  display: none; width: 46px; height: 46px; flex: none;
  background: none; border: 1px solid var(--line-3); cursor: pointer;
  padding: 0; place-items: center; border-radius: var(--r);
}
.burger span { display: block; width: 19px; height: 1.5px; background: var(--fg); transition: transform .3s var(--ease), opacity .2s; }
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 95;
  background: var(--ink); padding: calc(var(--hdr-h) + 1.5rem) var(--pad) 2rem;
  overflow-y: auto; display: grid; align-content: start; gap: .25rem;
  opacity: 0; visibility: hidden; translate: 0 -12px;
  transition: opacity .3s var(--ease), translate .3s var(--ease), visibility .3s;
}
.drawer.is-open { opacity: 1; visibility: visible; translate: 0 0; }
.drawer[hidden] { display: none; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0; border-bottom: 1px solid var(--line-2);
  font-size: 1.32rem; font-weight: 330; letter-spacing: -.03em;
}
.drawer__link small { font-family: 'Roboto Mono', monospace; font-size: .62rem; letter-spacing: .2em; color: var(--fg-mute); }
.drawer__sub { padding: .1rem 0 .9rem 1rem; display: grid; gap: .1rem; border-bottom: 1px solid var(--line-2); }
.drawer__sub a { padding: .5rem 0; font-size: .95rem; color: var(--fg-dim); }
.drawer__sub a:hover { color: var(--fg); }
.drawer__foot { margin-top: 1.75rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(94svh, 980px);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  padding-block: clamp(3.5rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .95; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, var(--ink) 6%, rgba(7,9,8,.86) 38%, rgba(7,9,8,.30) 72%, rgba(7,9,8,.62) 100%),
    linear-gradient(to top, var(--ink) 1%, transparent 34%);
}
.hero__arch {
  position: absolute; z-index: -2; color: var(--fg);
  right: -4%; bottom: 4%; width: min(52vw, 720px);
  opacity: .17; pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 2%, #000 30%, #000 72%, transparent 97%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 30%, #000 72%, transparent 97%);
}
.hero__grid {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size: clamp(60px, 8vw, 116px) clamp(60px, 8vw, 116px);
  mask-image: radial-gradient(120% 80% at 20% 40%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 80% at 20% 40%, #000 10%, transparent 72%);
  opacity: .8;
}

.hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 3.4vw, 2.6rem); }
.hero h1 { max-width: 17ch; }
.hero h1 .ln { display: block; }
.hero h1 .accent {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-weight: 400; letter-spacing: -.02em; color: var(--brass-lt);
}
.hero__lede { max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.hero__note { font-size: var(--fs-sm); color: var(--fg-mute); display: flex; align-items: center; gap: .5rem; }

.trust {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem clamp(1.2rem, 3vw, 2.4rem); max-width: 66rem;
  padding-top: clamp(1.4rem, 3vw, 2.2rem); border-top: 1px solid var(--line);
}
.trust__i { display: flex; align-items: flex-start; gap: .6rem; max-width: 21ch; }
.trust__i svg { flex: none; color: var(--brass); margin-top: 3px; }
.trust__i span { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.4; }

.scroller {
  position: absolute; left: var(--pad); bottom: 1.7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .7rem; color: var(--fg-mute);
}
.scroller__ln { width: 46px; height: 1px; background: var(--line-3); position: relative; overflow: hidden; }
.scroller__ln::after {
  content: ''; position: absolute; inset: 0; background: var(--brass);
  animation: sweep 2.6s var(--ease) infinite;
}
@keyframes sweep { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }

/* ---------------------------------------------------------------- marquee */
.ticker {
  border-block: 1px solid var(--line); background: var(--ink-1);
  overflow: hidden; padding-block: .95rem;
}
.ticker__track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.ticker__set { display: flex; align-items: center; }
.ticker__i {
  display: inline-flex; align-items: center; gap: 1.5rem;
  padding-inline: 1.5rem; color: var(--fg-dim); white-space: nowrap;
}
.ticker__i::after { content: ''; width: 4px; height: 4px; background: var(--brass); opacity: .55; }

/* ---------------------------------------------------------------- stats */
.stats { border-bottom: 1px solid var(--line); background: var(--ink-1); }
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: clamp(2.2rem, 4.5vw, 3.6rem) clamp(1rem, 2.4vw, 2rem);
  border-left: 1px solid var(--line); display: grid; gap: .55rem; align-content: start;
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__n {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem); font-weight: 250; line-height: .9;
  letter-spacing: -.055em; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.stat__n .u { color: var(--brass); font-size: .5em; vertical-align: super; letter-spacing: 0; }
.stat__n.is-text { font-size: clamp(1.7rem, 3.2vw, 2.7rem); letter-spacing: -.04em; }
.stat__l { font-size: var(--fs-sm); color: var(--fg-dim); line-height: 1.4; max-width: 24ch; }

/* ---------------------------------------------------------------- paths */
.paths { background: var(--ink); }
.paths__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.path {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(21rem, 44vw, 32rem);
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: 1.1rem;
  padding: clamp(4.5rem, 8vw, 5.5rem) clamp(1.75rem, 3.4vw, 3rem) clamp(1.75rem, 3.4vw, 3rem);
  border: 1px solid var(--line); color: var(--fg);
  transition: border-color .4s var(--ease), transform .5s var(--ease-out);
}
.path::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transition: transform .9s var(--ease-out), filter .6s;
}
.path--c::before { background-image: url('../img/panel-criminal.jpg');
  background-image: image-set(url('../img/panel-criminal.webp') type('image/webp'), url('../img/panel-criminal.jpg') type('image/jpeg')); }
.path--f::before { background-image: url('../img/panel-family.jpg');
  background-image: image-set(url('../img/panel-family.webp') type('image/webp'), url('../img/panel-family.jpg') type('image/jpeg')); }
.path::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(7,9,8,.95) 6%, rgba(7,9,8,.55) 48%, rgba(7,9,8,.30) 100%);
  transition: background .5s;
}
.path:hover { border-color: var(--g-500); }
.path:hover::before { transform: scale(1.05); }
.path:hover::after { background: linear-gradient(to top, rgba(13,28,24,.95) 6%, rgba(11,20,18,.55) 48%, rgba(7,9,8,.28) 100%); }
.path__idx {
  position: absolute; top: clamp(1.5rem,3vw,2.4rem); left: clamp(1.75rem,3.4vw,3rem);
  color: var(--fg-mute);
}
.path__ico { position: absolute; top: clamp(1.4rem,3vw,2.2rem); right: clamp(1.75rem,3.4vw,3rem); color: var(--brass); opacity: .85; }
.path h3 { font-size: var(--fs-h3); font-weight: 320; letter-spacing: -.035em; line-height: 1.08; }
.path p { color: var(--fg-2); max-width: 40ch; font-size: var(--fs-base); }
.path__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .2rem; }
.tag {
  font-family: 'Roboto Mono', monospace; font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; padding: .38rem .6rem;
  border: 1px solid var(--line-3); color: var(--fg-2);
}

/* ---------------------------------------------------------------- problems */
.problems { background: var(--ink-1); border-block: 1px solid var(--line); }
.problems__layout { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(2rem,5vw,5rem); align-items: start; }
.problems__aside { position: sticky; top: calc(var(--hdr-h) + 2rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.problems__aside .h2 { max-width: 12ch; }

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(.9rem,2vw,1.6rem); padding: clamp(1.15rem,2.3vw,1.7rem) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  transition: color .3s;
}
.acc__btn:hover { color: var(--g-300); }
.acc__n { color: var(--fg-mute); transition: color .3s; }
.acc__btn[aria-expanded="true"] .acc__n { color: var(--brass); }
.acc__t { font-size: var(--fs-lg); font-weight: 380; letter-spacing: -.022em; line-height: 1.3; }
.acc__ico { position: relative; width: 15px; height: 15px; flex: none; }
.acc__ico::before, .acc__ico::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px; background: currentColor;
  transition: transform .38s var(--ease-out), opacity .3s;
}
.acc__ico::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__ico::after { transform: rotate(0); opacity: 0; }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.acc__panel.is-open { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__body {
  padding: 0 0 clamp(1.3rem,2.5vw,1.9rem) clamp(2.2rem,4.5vw,3.6rem);
  color: var(--fg-2); max-width: 60ch;
}
.acc__body p + p { margin-top: .8rem; }
.acc__body a { color: var(--brass-lt); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- practice cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card {
  position: relative; background: var(--ink); padding: clamp(1.6rem,3vw,2.4rem);
  display: flex; flex-direction: column; gap: 1rem;
  transition: background .4s var(--ease);
  isolation: isolate; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.card:hover { background: var(--ink-2); }
.card:hover::before { transform: scaleX(1); }
.card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.card__ico { color: var(--g-400); transition: color .35s; }
.card:hover .card__ico { color: var(--brass); }
.card h3 { font-size: var(--fs-xl); font-weight: 400; letter-spacing: -.028em; line-height: 1.15; }
.card p { color: var(--fg-dim); font-size: var(--fs-sm); }
.card__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-top: .2rem; }
.card__list li {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem;
  font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.45;
}
.card__list li::before { content: ''; width: 4px; height: 1px; background: var(--brass); margin-top: .68em; }
.card__foot { margin-top: auto; padding-top: .6rem; }

/* ---------------------------------------------------------------- why (paper) */
.paper {
  position: relative; background: var(--paper); color: var(--on-paper);
  background-image: url('../img/paper.jpg');
  background-image: image-set(url('../img/paper.webp') type('image/webp'), url('../img/paper.jpg') type('image/jpeg'));
  background-size: 620px;
  padding-block: calc(var(--sec) + 1.5rem);
}
.paper .h2, .paper .h3, .paper .h4 { color: var(--on-paper); }
.paper .lede { color: var(--on-paper-2); }
.paper .muted { color: var(--on-paper-3); }
.deckle { position: absolute; left: 0; right: 0; width: 100%; height: 26px; color: var(--paper); z-index: 2; }
.deckle--t { top: -25px; }
.deckle--b { bottom: -25px; }
.deckle svg { width: 100%; height: 100%; display: block; }

.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(20,16,12,.14); border: 1px solid rgba(20,16,12,.14); }
.why__i {
  background: var(--paper); padding: clamp(1.5rem,2.8vw,2.2rem);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; align-content: start;
  background-image: url('../img/paper.jpg');
  background-image: image-set(url('../img/paper.webp') type('image/webp'), url('../img/paper.jpg') type('image/jpeg'));
  background-size: 620px;
  transition: background-color .35s;
}
.why__i:hover { background-color: var(--paper-2); }
.why__n { font-family: 'Roboto Mono', monospace; font-size: .68rem; letter-spacing: .2em; color: var(--brass-dk); }
.why__i h3 { font-size: var(--fs-lg); font-weight: 550; letter-spacing: -.02em; line-height: 1.25; }
.why__i p { color: var(--on-paper-2); font-size: var(--fs-sm); }

/* pull quote on paper */
.pull { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: 44rem; margin-inline: auto; text-align: center; }
.pull q {
  font-family: 'Instrument Serif', Georgia, serif; font-size: var(--fs-h3);
  line-height: 1.22; letter-spacing: -.02em; quotes: '“' '”';
}
.pull cite { font-style: normal; }

/* ---------------------------------------------------------------- attorneys */
.atty { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: clamp(1.5rem,4vw,3.5rem); align-items: start; }
.atty + .atty { margin-top: clamp(3rem,7vw,6rem); padding-top: clamp(3rem,7vw,6rem); border-top: 1px solid var(--line); }
.atty--rev { direction: rtl; }
.atty--rev > * { direction: ltr; }

.atty__fig { position: relative; }
.atty__img {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  border: 1px solid var(--line); background: var(--ink-2);
}
.atty__img img { width: 100%; height: 100%; object-fit: cover; }
.atty__mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(4rem, 11vw, 8rem); color: rgba(233,237,234,.16);
  letter-spacing: .02em; pointer-events: none;
}
/* registration marks — a photographer's frame, deliberately empty until a headshot lands */
.atty__img::before, .atty__img::after {
  content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none;
  border: 1px solid rgba(200,164,92,.5);
}
.atty__img::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.atty__img::after  { bottom: 58px; right: 14px; border-left: 0; border-top: 0; }
.atty__fig::before, .atty__fig::after {
  content: ''; position: absolute; width: 26px; height: 26px; pointer-events: none; z-index: 2;
  border: 1px solid rgba(200,164,92,.5);
}
.atty__fig::before { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.atty__fig::after  { bottom: 58px; left: 14px; border-right: 0; border-top: 0; }
.atty__badge {
  position: absolute; bottom: -1px; left: -1px; right: -1px;
  padding: 1rem 1.2rem; background: linear-gradient(to top, rgba(7,9,8,.96), transparent);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.atty__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.1rem,2.2vw,1.6rem); }
.atty__name { display: grid; gap: .4rem; }
.atty__role { color: var(--brass); }
.atty__facts { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.atty__fact { background: var(--ink-1); padding: 1rem 1.15rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; }
.atty__fact dt { font-family: 'Roboto Mono', monospace; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute); }
.atty__fact dd { font-size: var(--fs-sm); color: var(--fg); line-height: 1.4; }
.atty__cv { display: grid; gap: 0; border-top: 1px solid var(--line); }
.atty__cv li {
  display: grid; grid-template-columns: 5.2rem 1fr; gap: 1rem;
  padding: .78rem 0; border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.45;
}
.atty__cv b { font-family: 'Roboto Mono', monospace; font-size: .68rem; letter-spacing: .1em; color: var(--brass); font-weight: 500; padding-top: .18em; }

/* ---------------------------------------------------------------- process */
.process { background: var(--ink-1); border-block: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); counter-reset: s; }
.step {
  background: var(--ink-1); padding: clamp(1.6rem,3vw,2.4rem);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; align-content: start; position: relative;
  transition: background .4s;
}
.step:hover { background: var(--g-900); }
.step__n {
  font-size: clamp(2.2rem,4vw,3.2rem); font-weight: 200; line-height: 1;
  letter-spacing: -.05em; color: var(--fg-mute); transition: color .4s;
}
.step:hover .step__n { color: var(--brass); }
.step h3 { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -.02em; }
.step p { font-size: var(--fs-sm); color: var(--fg-dim); }

/* ---------------------------------------------------------------- testimonials */
.quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.5rem); }
.quote {
  border: 1px solid var(--line); padding: clamp(1.5rem,2.8vw,2.2rem);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-content: start; background: var(--ink-1);
  transition: border-color .4s, background .4s;
}
.quote:hover { border-color: var(--g-500); background: var(--g-900); }
.quote__mark { font-family: 'Instrument Serif', Georgia, serif; font-size: 3rem; line-height: .6; color: var(--brass); opacity: .5; height: 1.2rem; }
.quote blockquote { font-size: var(--fs-base); color: var(--fg); line-height: 1.55; }
.quote figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-2); }
.quote cite { font-style: normal; font-size: var(--fs-sm); color: var(--fg-2); }
.stars { display: flex; gap: 2px; color: var(--brass); }

/* ---------------------------------------------------------------- area */
.area__layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.area__list { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 clamp(1rem,3vw,2.5rem); }
.area__list li { padding: .78rem 0; border-bottom: 1px solid var(--line-2); font-size: var(--fs-base); color: var(--fg-2); display: flex; align-items: center; gap: .7rem; }
.area__list svg { color: var(--g-400); flex: none; }
.area__fig { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.area__ring { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 50%; }
.area__ring:nth-child(2) { inset: 12%; border-color: var(--line-2); }
.area__ring:nth-child(3) { inset: 24%; border-color: var(--line-2); }
.area__ring:nth-child(4) { inset: 36%; border-style: dashed; border-color: rgba(200,164,92,.28); }
.area__pin { position: relative; display: grid; gap: .5rem; place-items: center; text-align: center; z-index: 1; }
.area__pin svg { color: var(--brass); }
.area__spin { position: absolute; inset: 4%; animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.area__tick { position: absolute; top: 0; left: 50%; width: 1px; height: 11px; background: var(--line-3); transform-origin: center; }

/* ---------------------------------------------------------------- CTA band */
.band { position: relative; isolation: isolate; overflow: hidden; border-block: 1px solid var(--line); }
.band__bg { position: absolute; inset: 0; z-index: -2; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(7,9,8,.95) 20%, rgba(13,28,24,.72) 100%); }
.band__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem,3vw,2.2rem); justify-items: start; padding-block: clamp(4rem,8vw,7rem); }
.band__in .h2 { max-width: 20ch; }
.band__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* ---------------------------------------------------------------- contact */
.contact { background: var(--ink-1); }
.contact__layout { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(2rem,4.5vw,4rem); align-items: start; }

.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; }
.field > label { font-family: 'Roboto Mono', monospace; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); }
.field .req { color: var(--brass); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.input, .select, .textarea {
  width: 100%; padding: .95rem 1rem; min-height: 52px;
  background: var(--ink-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r);
  font-size: var(--fs-base); transition: border-color .25s, background .25s;
  appearance: none;
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: var(--fg-mute); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--g-400); background: var(--ink-3); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: #C8624C; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238B948F' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem;
}
.err { font-size: .76rem; color: #E08A74; min-height: 0; }
.field.has-err .err { min-height: 1.1rem; }
.radios { display: flex; gap: .6rem; flex-wrap: wrap; }
.radio { position: relative; }
.radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio span {
  display: flex; align-items: center; min-height: 46px; padding: .68rem 1.25rem; border: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--fg-dim); cursor: pointer; transition: .25s;
}
.radio input:checked + span { border-color: var(--brass); color: var(--fg); background: rgba(200,164,92,.08); }
.radio input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.check { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; cursor: pointer; }
.check { padding: .35rem 0; min-height: 44px; }
.check input { width: 24px; height: 24px; margin-top: 1px; accent-color: var(--g-500); flex: none; }
.check span { font-size: .8rem; color: var(--fg-dim); line-height: 1.5; }
.hp { position: absolute !important; left: -9999px; }
.form__note { font-size: .76rem; color: var(--fg-mute); line-height: 1.6; }
.form__status { padding: 1rem 1.15rem; border: 1px solid var(--g-500); background: var(--g-900); font-size: var(--fs-sm); display: none; }
.form__status.is-on { display: block; }
.form__status.is-err { border-color: #C8624C; background: rgba(200,98,76,.09); }

.office { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.office__i { background: var(--ink-2); padding: clamp(1.25rem,2.4vw,1.7rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.office__i dt { font-family: 'Roboto Mono', monospace; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute); }
.office__i dd { font-size: var(--fs-base); color: var(--fg); line-height: 1.5; }
.office__i a:hover { color: var(--brass-lt); }
.office__big { display: inline-flex; align-items: center; min-height: 44px; font-family: 'Roboto Mono', monospace; font-size: clamp(1.4rem,2.6vw,1.85rem); font-weight: 500; letter-spacing: -.02em; color: var(--brass-lt); }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--ink); border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.foot__top { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap: clamp(1.75rem,3.5vw,3rem); padding-block: clamp(3rem,6vw,5rem); }
.foot__brand { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-content: start; max-width: 34ch; }
.foot__col { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; align-content: start; }
.foot__col h3 { color: var(--fg-dim); margin-bottom: .5rem; font-weight: 500; }
.foot__col a, .foot__col p { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.55; }
.foot__col a { display: flex; align-items: center; min-height: 40px; transition: color .22s; }
.foot__col a:hover { color: var(--brass-lt); }

.foot__mega {
  font-size: var(--fs-mega); font-weight: 200; letter-spacing: -.05em; line-height: .78;
  color: transparent; -webkit-text-stroke: 1px rgba(233,237,234,.12);
  text-align: center; padding-block: clamp(.5rem,2vw,1.5rem); user-select: none;
  white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: .12em;
  max-width: 100%; overflow: hidden;
}
.foot__mega .amp { -webkit-text-stroke: 1px rgba(200,164,92,.4); font-family: 'Instrument Serif', Georgia, serif; font-style: italic; }

.foot__legal { border-top: 1px solid var(--line); padding-block: 2rem 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.foot__legal p { font-size: .74rem; color: var(--fg-mute); line-height: 1.7; max-width: 100ch; }
.foot__bot { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; justify-content: space-between; padding-top: .5rem; border-top: 1px solid var(--line-2); }

/* ---------------------------------------------------------------- mobile call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-3);
  border-top: 1px solid var(--line-3);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(105%); transition: transform .4s var(--ease-out);
  box-shadow: 0 -14px 40px rgba(0,0,0,.6);
}
.callbar.is-on { transform: translateY(0); }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 58px; font-size: .82rem; font-weight: 650;
  letter-spacing: .07em; text-transform: uppercase;
}
.callbar__call { background: var(--brass); color: #120E08; }
.callbar__form { background: var(--ink-2); color: var(--fg); }

/* ---------------------------------------------------------------- reveal */
[data-rv] { opacity: 0; transform: translateY(24px); }
[data-rv].rv-in { opacity: 1; transform: none; transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); }
[data-rv][data-rv="clip"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
[data-rv][data-rv="clip"].rv-in { clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  [data-rv], [data-rv].rv-in { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .ticker__track, .pulse, .area__spin, .scroller__ln::after { animation: none !important; }
  .callbar { transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .cards, .why__grid, .steps, .quotes { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(-n+2) { padding-bottom: clamp(1.6rem,3vw,2.2rem); }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .problems__layout { grid-template-columns: 1fr; }
  .problems__aside { position: static; }
  .atty, .area__layout, .contact__layout { grid-template-columns: 1fr; }
  .atty__fig { max-width: 26rem; }
  .foot__top { grid-template-columns: repeat(2, 1fr); }
  .foot__brand { grid-column: 1 / -1; max-width: none; }
}

/* between these two the nav fits but the phone number does not */
@media (max-width: 1300px) and (min-width: 1081px) {
  .hdr__tel { display: none; }
}

@media (max-width: 1080px) {
  .nav, .hdr__tel { display: none; }
  .burger { display: grid; }
  .hdr__cta .btn { display: none; }
  .paths__grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero__arch { width: min(90vw, 620px); right: -18%; bottom: -8%; opacity: .12; }
}

@media (max-width: 720px) {
  :root { --hdr-h: 64px; }
  .cards, .why__grid, .steps, .quotes, .atty__facts, .area__list, .row { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: 0; }
  .callbar { display: grid; }
  body { padding-bottom: 58px; }
  .foot__top { grid-template-columns: 1fr; }
  .quote:nth-child(n+4) { display: none; }
  .topbar__in { font-size: .58rem; }
  .atty__cv li { grid-template-columns: 4.4rem 1fr; gap: .75rem; }
  .scroller { display: none; }
  .path { min-height: 20rem; }
}

@media (min-width: 1081px) {
  .drawer { display: none; }
}

/* very narrow handsets (iPhone SE 1st gen and similar) */
@media (max-width: 380px) {
  :root { --pad: 1.05rem; }
  .hdr__in { gap: .75rem; }
  .logo__sub { display: none; }
  .logo__name { font-size: 1.15rem; }
  .logo__mark { width: 34px; height: 34px; }
  .foot__mega { font-size: 3rem; }
}

/* print — a real firm gets printed contact pages */
@media print {
  .topbar, .hdr, .callbar, .hero__bg, .band__bg, .ticker, .drawer, .scroller { display: none !important; }
  body { background: #fff; color: #000; }
  * { color: #000 !important; background: transparent !important; border-color: #999 !important; }
  a::after { content: ' (' attr(href) ')'; font-size: .8em; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Real photography
   The studio two-shot is lit on black, so it can bleed straight into the
   page — no card, no border, just masks where it meets the type.
   ══════════════════════════════════════════════════════════════════════════ */
.hero { --fig-w: 46%; }
.hero__figure {
  position: absolute; z-index: -1; right: 0; bottom: 0;
  width: var(--fig-w); height: 100%;
  margin: 0; pointer-events: none;
}
.hero__figure img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 34%, #000 100%),
    linear-gradient(to bottom, #000 62%, transparent 97%);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 34%, #000 100%),
    linear-gradient(to bottom, #000 62%, transparent 97%);
  mask-composite: intersect; -webkit-mask-composite: source-in;
}

.hero h1 { max-width: 15ch; }
.hero__lede { max-width: 46ch; }
.trust { max-width: 52rem; }

/* the wash sits further back now that a photograph leads */
.hero__bg img { opacity: .7; }

/* courthouse elevation, rehoused */
.process { overflow: hidden; }
.process__arch {
  position: absolute; z-index: 0; color: var(--fg);
  left: 50%; translate: -50% 0; bottom: -6%;
  width: min(120%, 1500px); opacity: .07; pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 78%, transparent);
}
.process .wrap { position: relative; z-index: 1; }

/* logo mark — 214x132 native, so the box has to carry that aspect explicitly;
   the original placeholder box was square and clipped it */
.logo__mark {
  width: 58px; height: 36px; border: 0; padding: 0; overflow: visible;
  display: block; flex: none; position: relative;
}
.logo__mark img {
  width: 100%; height: 100%; object-fit: contain;
  opacity: .95; transition: opacity .3s var(--ease);
}
.logo:hover .logo__mark img { opacity: 1; }
.logo { gap: .85rem; }
@media (max-width: 380px) { .logo__mark { width: 50px; height: 31px; } }

/* portraits: retire the placeholder furniture */
.atty__fig.has-photo::before, .atty__fig.has-photo::after,
.atty__fig.has-photo .atty__img::before, .atty__fig.has-photo .atty__img::after { content: none; }
.atty__fig.has-photo .atty__img { background: var(--g-900); }
.atty__fig.has-photo .atty__img img {
  filter: saturate(.95) contrast(1.03);
  transition: filter .6s var(--ease), transform 1s var(--ease-out);
}
.atty__fig.has-photo:hover .atty__img img { filter: saturate(1.04) contrast(1.05); transform: scale(1.02); }

@media (max-width: 1240px) { .hero { --fig-w: 50%; } .hero__in { max-width: 52rem; } }

@media (max-width: 980px) {
  /* photo steps back behind the type rather than competing with it */
  .hero { --fig-w: 74%; }
  .hero__figure { opacity: .42; }
  .hero__figure img { object-position: 60% 8%; }
  .hero__in, .hero h1, .hero__lede, .trust { max-width: none; }
  .hero h1 { max-width: 14ch; }
}

@media (max-width: 720px) {
  .hero { --fig-w: 100%; }
  .hero__figure { opacity: .26; }
  .hero__figure img {
    object-position: 58% 6%;
    mask-image: linear-gradient(to bottom, #000 40%, transparent 92%);
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 92%);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DISPLAY TYPE — matched to the reference
   Heavy Public Sans, uppercase, tight tracking and sub-1 leading, split
   across lines in two tones (bone / deep green). The weight contrast against
   the light body copy is the whole point of the system.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --fs-hd:    clamp(2rem, 1.05rem + 4.1vw, 4.75rem);
  --fs-hd-lg: clamp(2.05rem, 1.05rem + 4.05vw, 4.6rem);
  --fs-hd-sm: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
}

.hd, .hd-lg, .hd-sm {
  font-family: 'Public Sans', system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.028em;
  line-height: .87;
  text-wrap: balance;
  margin: 0;
}
.hd    { font-size: var(--fs-hd); }
.hd-lg { font-size: var(--fs-hd-lg); letter-spacing: -.034em; }
.hd-sm { font-size: var(--fs-hd-sm); letter-spacing: -.022em; line-height: .95; }

.hd .l, .hd-lg .l, .hd-sm .l { display: block; }
.hd .g, .hd-lg .g, .hd-sm .g { display: block; color: var(--g-500); }
.hd .b, .hd-lg .b, .hd-sm .b { display: block; color: var(--fg); }
.hd .in, .hd-lg .in { display: block; padding-left: clamp(1.5rem, 6vw, 7rem); }

/* on paper the palette inverts */
.paper .hd, .paper .hd-lg, .paper .hd-sm,
.paper .hd .b, .paper .hd-lg .b { color: var(--on-paper); }
.paper .hd .g, .paper .hd-lg .g, .paper .hd-sm .g { color: var(--g-700); }

/* right-aligned counterpart heading, as in TARGET AUDIENCE / ANALYSIS */
.hd--r { text-align: right; }

/* ── bracketed chip labels ─────────────────────────────────────────────── */
.chip {
  display: inline-block;
  font-family: 'Roboto Mono', monospace; font-size: .6rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .34rem .6rem; background: var(--ink); color: var(--fg);
}
.paper .chip { background: var(--on-paper); color: var(--paper); }
.chip--line { background: none; border: 1px solid currentColor; color: inherit; padding: .3rem .55rem; }

/* slash-prefixed lists, used throughout the reference */
.slash { display: grid; gap: .42rem; }
.slash li {
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .3rem;
  font-size: .8rem; line-height: 1.45;
}
.slash li::before { content: '///'; color: var(--brass); font-family: 'Roboto Mono', monospace; font-size: .6rem; padding-top: .28em; }
.paper .slash li::before { color: var(--brass-dk); }
.paper .slash li { color: var(--on-paper-2); }

/* ── section head, reference layout: heavy left, meta right ────────────── */
.shead--split {
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.shead--split .meta { display: grid; gap: .9rem; justify-items: end; text-align: right; }
.shead--split .meta p { font-size: var(--fs-sm); color: var(--fg-dim); max-width: 40ch; }
.paper .shead--split .meta p { color: var(--on-paper-2); }

/* ── standards cards, alternating fields (paper section) ───────────────── */
.std {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 1.2vw, 1rem);
}
.std__c {
  position: relative; display: flex; flex-direction: column;
  min-height: clamp(15rem, 24vw, 19rem);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  transition: transform .5s var(--ease-out);
}
.std__c:hover { transform: translateY(-6px); }
.std__c h3 {
  font-size: clamp(1rem, .85rem + .6vw, 1.35rem); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.14; max-width: 12ch;
}
.std__c .plus { position: absolute; top: clamp(1.1rem,2vw,1.6rem); right: clamp(1.1rem,2vw,1.6rem); opacity: .55; }
.std__c .std__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.std__c .std__foot p { font-size: .74rem; line-height: 1.4; max-width: 22ch; }
.std__c .std__foot span { font-family: 'Roboto Mono', monospace; font-size: .64rem; white-space: nowrap; }
.std__c--ink   { background: var(--ink);   color: var(--fg); }
.std__c--green { background: var(--g-700); color: var(--fg); }
.std__c--grey  { background: #D6D5D0;      color: var(--on-paper); }
.std__c--ink p, .std__c--green p { color: var(--fg-2); }
.std__c--grey p  { color: var(--on-paper-2); }

/* ── persona columns (TARGET AUDIENCE) ─────────────────────────────────── */
.persona { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); }
.persona__c { display: grid; gap: .7rem; align-content: start; }
.persona__c > h3 { font-size: clamp(1.4rem, 1rem + 1.5vw, 2.15rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--on-paper); }
.persona__seg { font-family: 'Roboto Mono', monospace; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-paper-3); }
.persona__meta { font-family: 'Roboto Mono', monospace; font-size: .66rem; color: var(--on-paper-2); letter-spacing: .04em; }
.persona__meta::before { content: '/// '; color: var(--brass-dk); }
.persona__block { display: grid; gap: .4rem; margin-top: .35rem; }

/* ── stats: numerals carry the green, as in the reference ──────────────── */
.stat__n { color: var(--g-400); font-weight: 500; letter-spacing: -.05em; }
.stat__n .u { color: var(--brass); }
.stat__n.is-text { color: var(--g-400); font-weight: 600; }

/* ── torn paper: deeper bite, and the texture reads brighter ───────────── */
.deckle { height: 54px; }
.deckle--t { top: -53px; }
.deckle--b { bottom: -53px; }
.paper { background-color: #F4F3EF; }


@media (max-width: 1100px) {
  .std { grid-template-columns: repeat(2, 1fr); }
  .persona { grid-template-columns: 1fr; gap: 2.25rem; }
  .shead--split { grid-template-columns: 1fr; }
  .shead--split .meta { justify-items: start; text-align: left; }
  .hd--r { text-align: left; }
}
@media (max-width: 640px) {
  .std { grid-template-columns: 1fr; }
  .std__c { min-height: 12rem; }
  .hd .in, .hd-lg .in { padding-left: 0; }
  .deckle { height: 32px; }
  .deckle--t { top: -31px; }
  .deckle--b { bottom: -31px; }
}


/* ── accordion on paper ────────────────────────────────────────────────── */
.paper .acc { border-top-color: rgba(20,16,12,.18); }
.paper .acc__item { border-bottom-color: rgba(20,16,12,.18); }
.paper .acc__btn { color: var(--on-paper); }
.paper .acc__btn:hover { color: var(--g-700); }
.paper .acc__n { color: var(--on-paper-3); }
.paper .acc__btn[aria-expanded="true"] .acc__n { color: var(--brass-dk); }
.paper .acc__t { font-weight: 500; }
.paper .acc__body { color: var(--on-paper-2); }
.paper .acc__body a { color: var(--g-700); }
.paper .acc__body b { color: var(--on-paper); }
.paper .problems__aside .lede { color: var(--on-paper-2); }
.paper .eyebrow { color: #1B3D31; }
.paper .eyebrow::before { color: var(--brass-dk); }
.paper .shead__idx { color: var(--on-paper-3); }
.paper .shead__top { border-bottom-color: rgba(20,16,12,.16); }

/* the persona chips read as small filled tags, per the reference */
.persona__c .chip { justify-self: start; }
.persona__block .chip--line { font-size: .58rem; letter-spacing: .14em; }

/* keep the grain overlay off the paper — it muddies the white */
.paper.grain::after { content: none; }


/* the standards cards must keep their fields — the grey one especially */
.paper .std__c--ink   { background-color: var(--ink)  !important; }
.paper .std__c--green { background-color: var(--g-700) !important; }
.paper .std__c--grey  { background-color: #D7D6D1     !important; }
.std__c--ink h3, .std__c--green h3 { color: var(--fg); }
.std__c--grey h3 { color: var(--on-paper); }
.std__c--grey .plus, .std__c--grey .std__foot span { color: var(--on-paper-2); }
.std__c--ink .std__foot span, .std__c--green .std__foot span { color: var(--fg-dim); }
.std__c .std__foot { gap: 1.2rem; }
.std__c .std__foot p { margin: 0; }

/* the cover headline must clear the fold with its buttons */
.hero__in { gap: clamp(1.25rem, 2.4vw, 1.9rem); }
.hero .hd-lg { line-height: .9; }
@media (min-width: 981px) { .hero { min-height: min(92svh, 940px); } }

/* pull the cover tight enough that the call button clears the fold */
.hero { padding-block: clamp(2.25rem, 4.6vw, 4rem) clamp(2.5rem, 5vw, 4.5rem); }
.hero__lede { max-width: 44ch; }


/* chips: filled dark tag with light text, as in the reference —
   .paper .chip out-specifies .chip--line, so state the outlined case properly */
.paper .chip.chip--line {
  background: none; border: 1px solid rgba(20,16,12,.34);
  color: var(--on-paper-2) !important;
}
.std__c--green .std__foot span, .std__c--green .std__foot p { color: var(--fg-2); }
.std__c--green .std__foot span { color: #C6D3CC; }


/* ══════════════════════════════════════════════════════════════════════════
   ALIGNMENT — every section shares one left rail
   .wrap centres a 88rem container; any child that narrows itself must cap its
   *content*, never its own box, or auto margins re-centre it and it drifts.
   ══════════════════════════════════════════════════════════════════════════ */
/* keep .wrap's 88rem container + auto margins; only cap the children */
.hero__in > *, .band__in > * { max-width: 60rem; }
.hero h1        { max-width: 15ch; }
.hero__lede     { max-width: 44ch; }
.hero .trust    { max-width: 52rem; }
.band__in .h2, .band__in .hd { max-width: 20ch; }

/* section rhythm: one vertical scale, paper gets the extra the torn edge eats */
.section { padding-block: var(--sec); }
.section.paper { padding-block: calc(var(--sec) + 1.75rem); }


/* ══════════════════════════════════════════════════════════════════════════
   TORN PAPER — the tear is a MASK on the section, not a shape beside it
   Painting a separate deckle left a transparent band between the jagged line
   and the section edge, which is what read as the paper "cutting off".
   Masking the section means the tear cuts the real texture: no seam possible.
   ══════════════════════════════════════════════════════════════════════════ */
.paper {
  --tear: clamp(26px, 3.4vw, 52px);
  background-color: #FBFAF7;
  background-image: url('../img/paper.jpg');
  background-image: image-set(url('../img/paper.webp') type('image/webp'),
                              url('../img/paper.jpg')  type('image/jpeg'));
  background-size: clamp(420px, 58vw, 1000px);
  background-repeat: repeat;
  padding-block: calc(var(--sec) + var(--tear));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: top center, center, bottom center;
          mask-position: top center, center, bottom center;
  -webkit-mask-size: 100% var(--tear), 100% calc(100% - (var(--tear) * 2) + 2px), 100% var(--tear);
          mask-size: 100% var(--tear), 100% calc(100% - (var(--tear) * 2) + 2px), 100% var(--tear);
}
.paper--1 {
  -webkit-mask-image: url('../img/mask-t1.svg'), linear-gradient(#000,#000), url('../img/mask-b1.svg');
          mask-image: url('../img/mask-t1.svg'), linear-gradient(#000,#000), url('../img/mask-b1.svg');
}
.paper--2 {
  -webkit-mask-image: url('../img/mask-t2.svg'), linear-gradient(#000,#000), url('../img/mask-b2.svg');
          mask-image: url('../img/mask-t2.svg'), linear-gradient(#000,#000), url('../img/mask-b2.svg');
}
.paper--3 {
  -webkit-mask-image: url('../img/mask-t3.svg'), linear-gradient(#000,#000), url('../img/mask-b3.svg');
          mask-image: url('../img/mask-t3.svg'), linear-gradient(#000,#000), url('../img/mask-b3.svg');
}
/* the grey standards card sat on its own field; give it the paper stock instead */
.paper .std__c--grey { background-color: #E4E2DC !important; }
.deckle { display: none; }


/* ══════════════════════════════════════════════════════════════════════════
   BALANCE
   ══════════════════════════════════════════════════════════════════════════ */

/* Attorney rows ran 604px of photograph against 999px of bio, which left a
   long dead column. Widen the figure a little and pin it while the bio scrolls. */
.atty { grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(1.75rem,4vw,4rem); }
.atty__fig { align-self: start; position: sticky; top: calc(var(--hdr-h) + 2.5rem); }

/* the courthouse elevation was 1125px inside a 677px section — clipped, and
   heavy enough to unbalance the steps. Scale it to the section it decorates. */
.process__arch {
  width: min(88%, 1080px); bottom: auto; top: 50%; translate: -50% -50%;
  opacity: .055;
}

/* stats: the rule between figures needs matching optical padding on both sides */
.stats__grid { column-gap: 0; }
.stat { padding-inline: clamp(1.25rem, 2.6vw, 2.25rem); }
.stat:first-child { padding-left: 0; }
.stat:last-child  { padding-right: 0; }

/* service area: centre the compass against the copy instead of top-aligning */
.area__layout { align-items: center; }
.area__fig { max-width: 30rem; justify-self: center; width: 100%; }

/* testimonial rows sit flush when every card fills its track */
.quotes > * { height: 100%; }

/* the problems/FAQ aside should sit against the top of the accordion */
.problems__aside { align-self: start; }


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  /* one column: the portrait leads the bio at full width, and must not stick */
  .atty { grid-template-columns: minmax(0,1fr); }
  .atty__fig { position: static; max-width: none; width: 100%; }
  .atty__img { aspect-ratio: 3/2; }
  .atty__img img { object-position: 50% 22%; }
  .shead--split { gap: clamp(1.75rem, 4vw, 2.5rem); }
}

@media (max-width: 720px) {
  /* standards cards should hug their content, not hold a tall empty middle */
  .std { gap: .75rem; }
  .std__c { min-height: 0; padding: 1.15rem 1.15rem 1.1rem; }
  .std__c h3 { max-width: none; font-size: 1.1rem; }
  .std__c .std__foot { margin-top: 1.75rem; align-items: flex-end; }
  .std__c .std__foot p { max-width: 26ch; }

  .atty__img { aspect-ratio: 4/3; }
  .atty__badge { padding: .8rem .9rem; }

  /* micro-labels need a touch more size and less tracking to stay legible */
  .mono { font-size: .6875rem; letter-spacing: .17em; }
  .logo__sub { font-size: .5rem; letter-spacing: .22em; }
  .persona__c > h3 { font-size: 1.7rem; }
  .persona { gap: 2.75rem; }

  /* the cover photograph should frame both partners, not crop to one */
  .hero__figure img { object-position: 42% 4%; }
  .hero { --fig-w: 118%; }
  .hero__figure { right: -9%; }

  /* forms get a little more room on a phone */
  .field > label { font-size: .625rem; letter-spacing: .14em; }
  .input, .select, .textarea { min-height: 54px; }
  .section { padding-block: clamp(3.75rem, 12vw, 5.5rem); }
  .section.paper { padding-block: calc(clamp(3.75rem, 12vw, 5.5rem) + var(--tear)); }
}

@media (max-width: 420px) {
  .std__c .std__foot { flex-direction: column; align-items: flex-start; gap: .55rem; }
  .quotes { gap: .85rem; }
  .atty__cv li { grid-template-columns: 1fr; gap: .2rem; }
  .atty__cv b { font-size: .62rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   HERO — the drawn elevation leads again; the photography moved down the page
   ══════════════════════════════════════════════════════════════════════════ */
.hero__bg img { opacity: .95; }
.hero__arch {
  position: absolute; z-index: -2; color: var(--fg);
  right: -4%; bottom: 4%; width: min(52vw, 720px);
  opacity: .17; pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 2%, #000 30%, #000 72%, transparent 97%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 30%, #000 72%, transparent 97%);
}
.hero__in > * { max-width: 62rem; }

/* ══════════════════════════════════════════════════════════════════════════
   THE FIRM — the partners photograph, leading the attorneys section
   ══════════════════════════════════════════════════════════════════════════ */
.firm {
  display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  gap: clamp(1.75rem, 4vw, 4rem); align-items: center;
  margin-bottom: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 7vw, 6rem); border-bottom: 1px solid var(--line);
}
.firm__fig { margin: 0; position: relative; }
.firm__fig picture { display: block; }
.firm__fig img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line);
  filter: saturate(.97) contrast(1.02);
}
.firm__fig::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(7,9,8,.34), transparent 34%);
}
.firm__body { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.15rem; justify-items: start; }
.firm__lead {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.14;
  letter-spacing: -.02em; color: var(--fg); max-width: 20ch;
}
.firm__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  width: 100%; margin-top: .3rem;
}
.firm__facts > div { background: var(--ink-1); padding: .95rem 1.1rem; display: grid; gap: .3rem; }
.firm__facts dt {
  font-family: 'Roboto Mono', monospace; font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-mute);
}
.firm__facts dd { font-size: var(--fs-sm); color: var(--fg); }

@media (max-width: 1100px) {
  .firm { grid-template-columns: minmax(0,1fr); gap: 2rem; }
  .firm__fig { max-width: 26rem; }
}
@media (max-width: 720px) {
  .firm__fig { max-width: none; }
  .firm__facts { grid-template-columns: minmax(0,1fr); }
  .firm { margin-bottom: 2.75rem; padding-bottom: 2.75rem; }
}
@media (max-width: 980px) {
  .hero__arch { width: min(90vw, 620px); right: -18%; bottom: -6%; opacity: .12; }
}


/* ══════════════════════════════════════════════════════════════════════════
   HERO — back to the drawn courthouse
   ══════════════════════════════════════════════════════════════════════════ */
.hero__figure { display: none; }
.hero__bg img { opacity: .95; }
.hero__arch {
  position: absolute; z-index: -2; color: var(--fg);
  right: -4%; bottom: 4%; width: min(52vw, 720px);
  opacity: .17; pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 2%, #000 30%, #000 72%, transparent 97%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 30%, #000 72%, transparent 97%);
}
.hero__in > * { max-width: 62rem; }
.hero h1 { max-width: 17ch; }
.hero__lede { max-width: 52ch; }
.hero .trust { max-width: 66rem; }

/* ══════════════════════════════════════════════════════════════════════════
   THE FIRM — the partners photograph leads the attorneys section
   ══════════════════════════════════════════════════════════════════════════ */
.firm {
  display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr);
  gap: clamp(1.75rem, 4vw, 3.75rem); align-items: center;
  margin-bottom: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid var(--line);
}
.firm__fig { margin: 0; position: relative; }
.firm__fig::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line);
}
.firm__fig img {
  width: 100%; height: 100%; aspect-ratio: 5/7;
  object-fit: cover; object-position: 50% 18%;
  display: block;
}
.firm__body { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(1rem,2vw,1.5rem); align-content: center; justify-items: start; }
.firm__lead {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.18;
  letter-spacing: -.02em; color: var(--fg); max-width: 20ch;
}
.firm__body .lede { max-width: 52ch; }
.firm__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); width: 100%;
}
.firm__facts > div { background: var(--ink); padding: .9rem 1.1rem; display: grid; gap: .25rem; }
.firm__facts dt { font-family: 'Roboto Mono', monospace; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute); }
.firm__facts dd { font-size: var(--fs-sm); color: var(--fg); }

@media (max-width: 1100px) {
  .firm { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
  .firm__fig { max-width: 30rem; }
  .firm__fig img { aspect-ratio: 4/5; }
}
@media (max-width: 720px) {
  .firm__fig { max-width: none; }
  .firm__fig img { aspect-ratio: 4/5; object-position: 50% 14%; }
  .firm__facts { grid-template-columns: minmax(0,1fr); }
  .hero__arch { width: min(92vw, 620px); right: -14%; bottom: 2%; opacity: .13; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Hero courthouse — anchored to the rule above the trust row
   As an absolutely-positioned child of .trust, `bottom:100%` puts the drawing's
   base exactly on that element's top border at every width, with no JS and no
   magic numbers. The viewBox is cropped to the bottom step so the base of the
   building — not the dimension furniture below it — is what meets the line.
   ══════════════════════════════════════════════════════════════════════════ */
.trust { position: relative; }
li.hero__arch {
  position: absolute; bottom: 100%; right: 0;
  width: min(50vw, 680px); height: auto;
  margin: 0; padding: 0; display: block;
  color: var(--fg); opacity: .17; pointer-events: none; z-index: -1;
  mask-image: linear-gradient(to bottom, transparent 2%, #000 34%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 34%, #000 100%);
}
li.hero__arch::before { content: none; }
li.hero__arch svg { width: 100%; height: auto; display: block; }

@media (max-width: 980px) { li.hero__arch { width: min(78vw, 560px); right: -6%; opacity: .14; } }
@media (max-width: 720px) { li.hero__arch { width: min(96vw, 460px); right: -12%; opacity: .12; } }

/* ══════════════════════════════════════════════════════════════════════════
   Footer wordmark — Instrument Serif, matching the logo lockup, and sized so
   it can never overrun its column (it was clipping the H and the final M)
   ══════════════════════════════════════════════════════════════════════════ */
.foot__mega {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400; text-transform: none;
  font-size: clamp(2.75rem, 17.4vw, 15.5rem);
  letter-spacing: -.015em; line-height: 1.02;
  gap: .06em;
  overflow: visible;
  -webkit-text-stroke: 1px rgba(233,237,234,.17);
  padding-block: clamp(.75rem, 2.4vw, 2rem);
}
.foot__mega .amp {
  -webkit-text-stroke: 1px rgba(200,164,92,.5);
  font-style: italic; padding-inline: .04em;
}
@media (max-width: 720px) { .foot__mega { font-size: clamp(2.5rem, 16.6vw, 6.5rem); -webkit-text-stroke-width: .75px; } }


/* ══════════════════════════════════════════════════════════════════════════
   Hero trust row spans the full container, so its rule — and the courthouse
   anchored to it — line up with the right edge of the Free Case Review button
   ══════════════════════════════════════════════════════════════════════════ */
.hero .trust { max-width: none; }
li.hero__arch { right: 0; }
@media (max-width: 980px) { li.hero__arch { right: -4%; } }
@media (max-width: 720px) { li.hero__arch { right: -10%; } }


/* ══════════════════════════════════════════════════════════════════════════
   LAWTHIS — the green voice
   A high-contrast display serif against Public Sans 800 gives the two-tone
   headings a real typographic pairing rather than one weight in two colours.
   It carries the green *display* text only: its hairlines disappear below
   about 16px, so mono micro-labels and body-level green stay as they were.
   ══════════════════════════════════════════════════════════════════════════ */

.hd .g, .hd-lg .g, .hd-sm .g {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 1.16em;          /* serif caps read smaller beside the 800 sans */
  letter-spacing: -.004em;    /* and it does not want the sans's tight tracking */
  line-height: .92;
}

/* big green numerals pick it up too — they are display text, not labels */
.stat__n { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -.01em; }
.stat__n.is-text { font-weight: 400; }

/* ══════════════════════════════════════════════════════════════════════════
   Masthead lockup — wordmark only, at a size that holds the bar
   ══════════════════════════════════════════════════════════════════════════ */
.hdr .logo__sub { display: none; }
.hdr .logo__name { font-size: clamp(1.5rem, 1.15rem + .95vw, 2.05rem); line-height: 1; }
.hdr .logo__mark { width: 74px; height: 46px; }
.hdr .logo { gap: .8rem; min-height: 52px; }
.hdr .logo__txt { align-content: center; }
@media (max-width: 380px) {
  .hdr .logo__name { font-size: 1.32rem; }
  .hdr .logo__mark { width: 58px; height: 36px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Hero headline — break exactly where the markup says, nowhere else
   A 17ch cap was forcing "& protect your family" onto two lines; the spans
   now hold their own lines and the size is set so the longest one fits.
   ══════════════════════════════════════════════════════════════════════════ */
.hero h1 { max-width: none; }
.hero .hd-lg .b, .hero .hd-lg .g { white-space: nowrap; }
.hero .hd-lg { font-size: clamp(1.85rem, .95rem + 3.7vw, 4.25rem); }
@media (max-width: 560px) {
  .hero .hd-lg .b, .hero .hd-lg .g { white-space: normal; }
  .hero .hd-lg { font-size: clamp(1.9rem, 8.6vw, 2.9rem); }
}


/* ── eyebrows: green, so they take the serif too ─────────────────────────
   The mono's 12px/.22em setting was built for a monospace label; the serif
   needs a little more size and far less tracking to read at that scale
   while staying clearly subordinate to the heading beneath it. */
.mono.eyebrow {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(.875rem, .8rem + .3vw, .975rem);
  font-weight: 400;
  letter-spacing: .10em;
  gap: .55rem;
}
.mono.eyebrow::before { font-family: inherit; letter-spacing: .02em; }


/* ── photographs run at full brightness: no grade, no filter, no scrim ─── */
.atty__fig.has-photo .atty__img img,
.atty__fig.has-photo:hover .atty__img img,
.firm__fig img { filter: none; }
.atty__img { background: var(--ink-2); }


/* ══════════════════════════════════════════════════════════════════════════
   GREEN VOICE — Instrument Serif, the masthead's face, set in mixed case
   All-caps serif beside all-caps sans was two shapes of the same gesture.
   Mixed case gives the second line a different rhythm as well as a different
   colour, so the contrast is structural rather than only chromatic.
   ══════════════════════════════════════════════════════════════════════════ */
.hd .g, .hd-lg .g, .hd-sm .g {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  text-transform: none;
  font-size: 1.22em;          /* serif x-height sits well below the 800 sans */
  letter-spacing: -.012em;
  line-height: .94;
}
.stat__n {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400; letter-spacing: -.012em;
}
.mono.eyebrow {
  font-family: 'Instrument Serif', Georgia, serif;
  text-transform: none;
  font-size: clamp(.9375rem, .86rem + .32vw, 1.0625rem);
  letter-spacing: .01em;
  gap: .5rem;
}
.mono.eyebrow::before { letter-spacing: .02em; }


/* ── heading blocks: one vertical rhythm everywhere ───────────────────── */
.shead, .shead--split { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.problems__aside .shead { margin-bottom: 0; }
.area__layout .shead { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.area__layout .hd { margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }
.shead > .lede { margin-top: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   SERIF — Instrument Serif italic, the real drawn face
   The page was asking for italic while only the upright face was loaded, so
   browsers were mechanically slanting it. Loading the true italic gives the
   proper letterforms (single-storey a, calligraphic f) and better fitting.
   ══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* every serif run on the page now shares that one voice */
.hd .g, .hd-lg .g, .hd-sm .g,
.mono.eyebrow,
.stat__n,
.pull q,
.quote blockquote.serif,
.quote__mark,
.firm__lead,
.em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* italic needs a touch more room to the right and a hair less negative track */
.hd .g, .hd-lg .g, .hd-sm .g { letter-spacing: -.004em; padding-right: .06em; }
.stat__n { letter-spacing: -.002em; }
.mono.eyebrow { letter-spacing: .015em; }

/* the two wordmarks stay upright — a company name set in italic reads as
   emphasis, not identity. Say the word and they flip. */
.logo__name, .foot__mega { font-style: normal; }
.foot__mega .amp { font-style: italic; }


/* ══════════════════════════════════════════════════════════════════════════
   READABILITY CORRECTIONS
   Italic serif is a display voice. It stops working at label sizes, and it
   costs the hero the immediacy that headline needs, so both go back to the
   sans. The serif keeps the section headings, numerals and quotes.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 — eyebrows return to the mono label they were */
.mono.eyebrow {
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  gap: .7rem;
}
.mono.eyebrow::before { letter-spacing: .04em; }

/* 2 — the hero headline is all Public Sans: green is colour only, no serif */
.hero .hd-lg .g {
  font-family: 'Public Sans', system-ui, sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: -.034em;
  line-height: inherit;
  padding-right: 0;
}

/* 3 — the firm block reads info-first, portrait right */
.firm { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }
.firm__body { grid-column: 1; grid-row: 1; }
.firm__fig  { grid-column: 2; grid-row: 1; }

@media (max-width: 1100px) {
  /* stacked: the portrait leads again */
  .firm { grid-template-columns: minmax(0,1fr); }
  .firm__fig  { grid-column: 1; grid-row: 1; }
  .firm__body { grid-column: 1; grid-row: 2; }
}


/* ══════════════════════════════════════════════════════════════════════════
   STATS — one size, one weight, one baseline
   Instrument Serif ships a single weight, so `font-weight:700` would only get
   a browser-smeared 400. Growing the outline instead thickens the strokes
   evenly and keeps the letterforms intact.
   ══════════════════════════════════════════════════════════════════════════ */
.stat__n,
.stat__n.is-text {
  font-size: clamp(2.7rem, 5.9vw, 5rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.014em;
  -webkit-text-stroke: 1.5px currentColor;
  paint-order: stroke fill;
}
.stat__n .u {
  -webkit-text-stroke: 1px currentColor;
  font-size: .46em;
}

/* every figure starts on the same line, whatever its length */
.stats__grid { align-items: start; }
.stat { align-content: start; }
.stat__n { display: block; min-height: 1em; }

@media (max-width: 720px) {
  .stat__n, .stat__n.is-text { font-size: clamp(2.6rem, 12vw, 3.6rem); -webkit-text-stroke-width: 1.15px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   LINE BREAKS — each of these headings has one intended shape
   ══════════════════════════════════════════════════════════════════════════ */

/* the firm's opening line reads as a couplet, not a stack of three */
.firm__lead { max-width: 30ch; }

/* single-line serif headings: size them to their column so they cannot wrap */
#who-h .g,
#area-h .g,
#faq-h .g { white-space: nowrap; }

/* the service-area column is the tightest of the three */
#area-h { font-size: clamp(1.65rem, .9rem + 3.15vw, 3.65rem); }
#who-h  { font-size: clamp(1.85rem, 1rem + 3.5vw, 4.25rem); }

@media (max-width: 560px) {
  #who-h .g, #area-h .g, #faq-h .g { white-space: normal; }
}

/* the outlined footer wordmark is gone; close the gap it left */
.foot__legal { border-top: 1px solid var(--line); }
.foot__top { padding-bottom: clamp(2.5rem, 5vw, 4rem); }


/* ══════════════════════════════════════════════════════════════════════════
   WHERE WE APPEAR — address, directions, and an embedded map
   The map is a third-party frame, so it is treated as progressive
   enhancement: a styled fallback sits underneath, the directions button is a
   plain link, and the frame is lazy so it costs nothing until scrolled to.
   ══════════════════════════════════════════════════════════════════════════ */
.area__layout {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr);
  gap: clamp(2rem, 4.5vw, 4rem); align-items: start;
}
.area__info { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(1.25rem,2.6vw,1.9rem); }

/* the office card carries the detail someone actually needs to arrive */
.office-card {
  border: 1px solid var(--line); background: var(--ink);
  padding: clamp(1.25rem,2.4vw,1.75rem);
  display: grid; gap: .8rem; align-content: start;
}
.office-card__label { color: var(--fg-mute); }
.office-card__addr {
  font-style: normal; font-size: var(--fs-lg); line-height: 1.45;
  color: var(--fg); letter-spacing: -.01em;
}
.office-card__note {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); color: var(--fg-dim);
}
.office-card__note svg { color: var(--g-400); flex: none; }
.office-card__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .3rem; }

/* map panel */
.map {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid var(--line); background: var(--ink);
  aspect-ratio: 4/3; min-height: 22rem; isolation: isolate;
}
.map__fallback {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-content: center; justify-items: center; gap: .5rem;
  text-align: center; color: var(--fg-mute); padding: 1.5rem;
}
.map__fallback svg { color: var(--brass); opacity: .65; margin-bottom: .3rem; }
.map__frame {
  position: relative; z-index: 1;
  width: 100%; height: 100%; border: 0; display: block;
  /* Google serves only a light map here; this brings it into the page's
     palette. Delete the filter for the stock look. */
  filter: invert(92%) hue-rotate(180deg) saturate(.55) contrast(.92) brightness(.95);
}
.map__cap {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem;
  background: linear-gradient(to top, rgba(7,9,8,.94), rgba(7,9,8,.72) 60%, transparent);
  color: var(--fg-2);
}
.map__cap a { color: var(--brass-lt); text-decoration: underline; text-underline-offset: 3px; }
.map__cap a:hover { color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .map__frame { transition: filter .4s var(--ease); }
}

@media (max-width: 1100px) {
  .area__layout { grid-template-columns: minmax(0,1fr); }
  .map { aspect-ratio: 16/10; min-height: 20rem; }
}
@media (max-width: 720px) {
  .map { aspect-ratio: 4/3; min-height: 16rem; }
  .office-card__actions .btn { width: 100%; }
}


/* both lines of the service-area heading hold one line each in their column */
#area-h .b, #area-h .g { white-space: nowrap; }
#area-h { font-size: clamp(1.5rem, .8rem + 2.9vw, 3.35rem); }
@media (max-width: 560px) { #area-h .b, #area-h .g { white-space: normal; } }


/* ── the map must never set a floor on the layout width ──────────────────
   An <iframe> carries a 300px intrinsic width and the caption/fallback text
   was adding to it, so at 320px the whole layout viewport was being pushed
   out to 358. Everything in here is now free to shrink. */
.map, .map__frame, .map__fallback, .map__cap { min-width: 0; }
.map__frame { width: 100%; max-width: 100%; }
.map__cap { flex-wrap: wrap; row-gap: .3rem; }
.map__fallback p { overflow-wrap: anywhere; max-width: 100%; }

@media (max-width: 420px) {
  .map__fallback { padding: 1rem; }
  .map__fallback p { font-size: .625rem; letter-spacing: .1em; }
  .map__cap { font-size: .625rem; letter-spacing: .1em; padding: .7rem .8rem; }
}

/* the sticky call bar was inheriting the same expanded viewport */
.callbar a { min-width: 0; padding-inline: .5rem; text-align: center; }
@media (max-width: 380px) { .callbar a { font-size: .72rem; letter-spacing: .04em; } }


/* aspect-ratio + min-height implies a MINIMUM WIDTH (256px x 4/3 = 341px),
   which was the real floor under the layout at 320. Let the ratio drive it. */
@media (max-width: 480px) {
  .map { min-height: 0; aspect-ratio: 4/3; }
}


/* ── right column: the office card sits above the map ───────────────────── */
.area__side { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(1rem,2vw,1.4rem); align-content: start; }
.area__side .office-card { margin: 0; }
.area__layout { align-items: start; }
/* the left column no longer holds the card, so let its list breathe */
.area__info .area__list { margin-top: .4rem; }


/* ── the service-area list absorbs the height the map column sets ────────
   A fixed row padding only balances at one viewport. Letting the column
   stretch and distributing the rows makes the two columns finish together
   at any width, and the list gets the breathing room it wanted anyway. */
@media (min-width: 1101px) {
  .area__layout { align-items: stretch; }
  .area__info { display: flex; flex-direction: column; gap: clamp(1.25rem,2.6vw,1.9rem); }
  /* equal row heights rather than space-between: the divider then sits at the
     foot of every row instead of floating in the middle of the added gap */
  .area__info .area__list {
    flex: 1 1 auto;
    grid-auto-rows: 1fr;
    align-content: stretch;
    row-gap: 0;
    margin-top: .2rem;
  }
  .area__info .area__list li {
    padding-block: 0;
    display: flex; align-items: center;
    min-height: 3.25rem;
  }
}

/* stacked, there is no gap to fill — keep it compact */
@media (max-width: 1100px) {
  .area__list li { padding-block: .8rem; }
}


/* "Open in Maps" is a real CTA, not prose — give it a proper tap target */
.map__cap a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: .3rem; }
.map__cap { padding-block: .5rem .6rem; }