/* ─────────────────────────────────────────────────────────────────────────
   DPS Law — site layer.
   Every value here comes from the Modernist tokens in assets/ds/styles.css.
   This file only assembles those tokens into page-level layout; it never
   introduces a new colour, family or radius.
   ───────────────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
p { margin: 0; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }
button { font-family: inherit; border-radius: 0; }
input, select, textarea { font-family: inherit; border-radius: 0; }
::selection { background: var(--color-accent-200); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── layout primitives ─────────────────────────────────────────────────── */
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }

.pad-xl { padding: clamp(64px, 8vw, 120px) 0; }
.pad-lg { padding: clamp(56px, 7vw, 104px) 0; }
.pad-md { padding: clamp(48px, 6vw, 88px) 0; }
.pad-sm { padding: clamp(40px, 5vw, 72px) 0; }
.pt-md  { padding-top: clamp(48px, 6vw, 88px); }
.pt-sm  { padding-top: clamp(40px, 5vw, 72px); }
.pb-lg  { padding-bottom: clamp(56px, 7vw, 96px); }

.rule-top    { border-top: 2px solid var(--color-text); }
.rule-bottom { border-bottom: 2px solid var(--color-text); }

/* Premium layer tokens — depth, grain and the two dark grounds. Everything
   below still resolves through the Modernist ramps. */
:root {
  --ink-deep: #150a22;   /* near-black plum — the dark ground */
  --ink-raise: #1e0f33;  /* the lit edge of that ground */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* A dark section is never flat: a violet light source in one corner, a grain
   plate over the whole thing, content lifted above both. */
.ink, .poster { position: relative; isolation: isolate; }
.ink::before, .poster::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--grain); opacity: 0.05; pointer-events: none;
}
.ink > *, .poster > * { position: relative; z-index: 1; }

.ink {
  color: var(--color-neutral-100);
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(126, 63, 187, 0.30) 0%, rgba(126, 63, 187, 0) 58%),
    linear-gradient(180deg, var(--ink-raise) 0%, var(--ink-deep) 100%);
}
.surface {
  background: linear-gradient(180deg,
    var(--color-surface) 0%,
    color-mix(in srgb, var(--color-surface) 55%, var(--color-bg)) 100%);
}
.poster {
  color: var(--color-neutral-100);
  background:
    radial-gradient(80% 120% at 88% 10%, rgba(154, 90, 214, 0.42) 0%, rgba(154, 90, 214, 0) 60%),
    linear-gradient(118deg, #4e1080 0%, #320b57 44%, #1e0b36 100%);
}
/* The one place gold appears: a struck rule over the closing statement. */
.gold-rule {
  height: 2px; width: clamp(96px, 12vw, 168px);
  background: linear-gradient(90deg, var(--color-accent-2-500), rgba(250, 171, 0, 0));
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

/* Two-column split. Ratios are set per instance with --c1 / --c2 so the
   grid stays declarative instead of spawning a class per proportion. */
.split {
  display: grid;
  grid-template-columns: minmax(0, var(--c1, 1fr)) minmax(0, var(--c2, 1fr));
  gap: var(--gap, clamp(32px, 5vw, 72px));
  align-items: start;
}
.split.end    { align-items: end; }
.split.center { align-items: center; }

/* An auto-fitting cell grid. The rules live on the cells themselves rather
   than on a coloured container showing through a gap, so a partly filled last
   row ends cleanly instead of leaving grey filler blocks behind. */
.cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--min, 240px), 1fr));
  border-top: 1px solid var(--color-divider);
  border-left: 1px solid var(--color-divider);
}
.cells.fill { grid-template-columns: repeat(auto-fill, minmax(var(--min, 240px), 1fr)); }
.cells > * {
  background: var(--color-bg);
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.cells.on-surface > * { background: var(--color-surface); }

/* The stat band: equal cells separated by hairlines, flush to the gutters. */
.band { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min, 190px), 1fr)); }
.band > * { padding: var(--space-8) var(--space-6); border-right: 1px solid var(--color-neutral-400); }
.band > *:first-child { padding-left: 0; }
.band > *:last-child { padding-right: 0; border-right: 0; }

/* ── type ──────────────────────────────────────────────────────────────── */
.eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--color-neutral-700);
}
.eyebrow.on-ink { color: var(--color-accent-400); }
.eyebrow-dot { display: flex; align-items: center; gap: var(--space-3); }
.eyebrow-dot::before { content: ""; width: 10px; height: 10px; background: var(--color-accent); display: block; flex: none; }

.h-hero    { font-size: clamp(40px, 5.6vw, 80px); font-weight: 900; letter-spacing: -0.035em; line-height: 0.96; }
.h-page    { font-size: clamp(36px, 5vw, 72px);   font-weight: 900; letter-spacing: -0.035em; line-height: 0.98; }
.h-page-sm { font-size: clamp(34px, 4.6vw, 66px); font-weight: 900; letter-spacing: -0.035em; line-height: 0.99; }
.h-sec     { font-size: clamp(28px, 3.4vw, 48px); font-weight: 900; letter-spacing: -0.03em;  line-height: 1.04; }
.h-sec-md  { font-size: clamp(26px, 3vw, 42px);   font-weight: 900; letter-spacing: -0.03em;  line-height: 1.05; }
.h-sec-sm  { font-size: clamp(24px, 2.6vw, 36px); font-weight: 900; letter-spacing: -0.03em; }
.h-sub     { font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; letter-spacing: -0.025em; }
.h-poster  { font-size: clamp(34px, 5.2vw, 76px); font-weight: 900; letter-spacing: -0.04em;  line-height: 0.98; }

.lede     { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--color-neutral-800); }
.lede-sm  { font-size: 17px; line-height: 1.6; color: var(--color-neutral-800); }
.body     { font-size: 17px; line-height: 1.62; color: var(--color-neutral-800); }
.body-sm  { font-size: 15px; line-height: 1.55; color: var(--color-neutral-800); }
.on-ink .body, .on-ink .body-sm, .ink .body, .ink .body-sm { color: var(--color-neutral-400); }

.num {
  font-family: var(--font-heading); font-size: clamp(34px, 3.6vw, 50px);
  font-weight: 900; letter-spacing: -0.04em; line-height: 1;
}
.num.accent { color: var(--color-accent); }
.num-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-neutral-700); margin-top: var(--space-2);
}

.pull {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-6);
  font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.4;
}

/* A caps label sitting on a 2px rule — the system's section header. */
.rule-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-neutral-700);
  padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-text);
}

.sec-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--space-4);
}

/* ── buttons ───────────────────────────────────────────────────────────── */
.b {
  display: inline-flex; align-items: center; gap: var(--space-4);
  border: 0; cursor: pointer; text-align: left; text-decoration: none;
  font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
  transition: background 120ms linear, color 120ms linear, border-color 120ms linear;
}
@media (prefers-reduced-motion: reduce) { .b, .b::after { transition: none !important; } }
.b::after { content: "\2192"; font-size: 17px; line-height: 1; transition: transform 220ms var(--ease); }
.b:hover::after { transform: translateX(5px); }
.b.no-arrow::after { content: none; }

.b-red   { background: var(--color-accent); color: var(--color-on-accent, var(--color-neutral-100)); padding: 18px 26px; box-shadow: 0 10px 26px rgba(110, 20, 178, 0.26); }
.b-red:hover { background: var(--color-accent-600); color: var(--color-on-accent, var(--color-neutral-100)); }
.b-ink   { background: none; color: var(--color-text); border: 2px solid var(--color-text); padding: 16px 24px; }
.b-ink:hover { background: var(--color-text); color: var(--color-bg); }
.b-light { background: var(--color-neutral-100); color: var(--color-text); padding: 18px 26px; font-weight: 800; }
.b-light:hover { background: var(--color-text); color: var(--color-neutral-100); }
.b-onink { background: none; color: var(--color-bg); border: 2px solid var(--color-bg); padding: 16px 24px; }
.b-onink:hover { background: var(--color-bg); color: var(--color-text); }
.b-onink-quiet { background: none; color: var(--color-bg); border: 2px solid var(--color-neutral-700); padding: 14px 22px; font-size: 14px; }
.b-onink-quiet:hover { border-color: var(--color-bg); color: var(--color-bg); }
.b-sm { padding: 14px 22px; }

.link-caps {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700);
}
.link-caps:hover { color: var(--color-accent); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: none; border: 2px solid var(--color-divider); padding: 12px 16px;
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--color-text); text-align: left;
}
.chip:hover { border-color: var(--color-text); }
.chip[aria-pressed="true"] { border-color: var(--color-text); }
.chip[aria-pressed="true"]::before { content: ""; width: 9px; height: 9px; background: var(--color-accent); display: block; flex: none; }
.chip.sm { padding: 9px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.chip.sm[aria-pressed="true"]::before { width: 8px; height: 8px; }

.stamp {
  font-size: 12px; font-weight: 700;
  border: 2px solid var(--color-text); padding: 8px 13px;
  display: inline-flex; align-items: center;
}
.stamp.quiet { border-color: var(--color-divider); color: var(--color-neutral-700); }
.stamp.on-ink { border-color: var(--color-neutral-700); color: var(--color-bg); }
.stamp.red { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-neutral-100); cursor: pointer; }
.stamp.red:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-neutral-100); }

.pill {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  border: 1px solid var(--color-divider); background: var(--color-surface); padding: 7px 11px;
}
.meta-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--color-divider); padding: 4px 8px; color: var(--color-neutral-800);
}

/* ── header ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-text);
  transition: box-shadow 260ms var(--ease), background 260ms var(--ease);
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(27, 20, 32, 0.10);
}
.header-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px);
  display: flex; align-items: stretch; justify-content: space-between;
  gap: var(--space-6); min-height: 76px;
}
.brand {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 3px; padding: var(--space-3) 0 var(--space-3) 15px;
  text-decoration: none;
}
.brand::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 32px; background: var(--color-accent);
}
.brand-mark {
  font-family: var(--font-heading); font-weight: 900; font-size: 23px;
  letter-spacing: -0.02em; line-height: 1; color: var(--color-text);
}
.brand-sub {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-neutral-700); line-height: 1;
}
.brand:hover .brand-mark { color: var(--color-accent); }

.site-nav { display: flex; align-items: stretch; gap: clamp(4px, 1.6vw, 22px); }
/* Direct children only. The mega panel is a child of the nav, so an
   unscoped `.site-nav a` would restyle every link inside it — which is
   exactly what collapsed the panel's CTA to a 13px, 2px-padded strip. */
.site-nav > a {
  position: relative; display: flex; align-items: center; padding: 0 2px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--color-text);
}
.site-nav > a:hover { color: var(--color-accent); }
.site-nav > a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--color-accent);
}
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.header-cta {
  display: inline-flex; align-items: center; background: var(--color-accent);
  color: var(--color-neutral-100); padding: 13px 20px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
}
.header-cta:hover { background: var(--color-accent-600); color: var(--color-neutral-100); }
.menu-toggle {
  background: none; border: 2px solid var(--color-text); padding: 10px 14px; cursor: pointer;
  font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text);
}
.mobile-menu {
  border-top: 2px solid var(--color-divider);
  padding: var(--space-4) clamp(20px, 5vw, 72px) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  border-bottom: 1px solid var(--color-neutral-300); padding: 14px 0;
  font-size: 18px; font-weight: 700; color: var(--color-text);
}
.mobile-menu a.cta {
  margin-top: var(--space-4); border-bottom: 0;
  background: var(--color-accent); color: var(--color-neutral-100); padding: 16px 20px; font-size: 15px;
}

/* ── figures ───────────────────────────────────────────────────────────────
   Photography is graded rather than left raw: pulled off full saturation and
   sat under a plum-to-ink wash so every image belongs to the same brand.
   ─────────────────────────────────────────────────────────────────────── */
.fig {
  position: relative; overflow: hidden; display: block; width: 100%;
  background: var(--color-surface);
}
.fig picture { position: absolute; inset: 0; display: block; }
.fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.84) contrast(1.06); }
.fig::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(50, 11, 87, 0.12) 0%, rgba(21, 10, 34, 0.30) 100%);
  mix-blend-mode: multiply;
}
.fig.square   { aspect-ratio: 1 / 1; }
.fig.photo    { aspect-ratio: 4 / 3; }
.fig.portrait { aspect-ratio: 4 / 5; }
/* 3:4 matches the client photograph exactly, so `cover` has nothing to
   crop. Anything narrower took the top of a head off. */
.fig.tall     { aspect-ratio: 3 / 4; }
.fig.wide     { aspect-ratio: 16 / 9; }
.fig.wide-10  { aspect-ratio: 16 / 10; }
.fig.cinema   { aspect-ratio: 21 / 9; }
.fig.framed   { border: 2px solid var(--color-text); }
.fig.fill     { height: 100%; min-height: 260px; }
/* Focal point. `cover` crops from the centre by default, which takes the top
   off a head whenever the source is taller than the frame. */
.fig--face img { object-position: 50% 18%; }
.fig--top img  { object-position: 50% 10%; }
/* Only images inside a link animate — a static photograph should not move. */
a:hover > .fig img, a:hover .fig img { transform: scale(1.045); }
.fig img { transition: transform 800ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .fig img { transition: none; } }

/* Monogram plates stand in for headshots until real ones exist. */
.plate {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background:
    radial-gradient(80% 90% at 30% 12%, rgba(126, 63, 187, 0.42) 0%, rgba(126, 63, 187, 0) 62%),
    linear-gradient(160deg, #2a1046 0%, var(--ink-deep) 100%);
}
.plate::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); background-size: 180px 180px; opacity: 0.07;
}
.person:nth-child(3n+2) .plate {
  background:
    radial-gradient(75% 88% at 72% 16%, rgba(154, 90, 214, 0.40) 0%, rgba(154, 90, 214, 0) 62%),
    linear-gradient(202deg, #2f1550 0%, var(--ink-deep) 100%);
}
.person:nth-child(3n) .plate {
  background:
    radial-gradient(88% 96% at 18% 86%, rgba(78, 16, 128, 0.58) 0%, rgba(78, 16, 128, 0) 60%),
    linear-gradient(142deg, #1f0d38 0%, #2a1046 100%);
}
/* ── hero ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink-deep); color: var(--color-neutral-100);
  border-bottom: 2px solid var(--color-text);
  padding: clamp(56px, 6.5vw, 96px) 0 clamp(48px, 6vw, 88px);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%;
  filter: saturate(0.9) contrast(1.05);
}
/* A scrim heavy on the type side, clearing to the skyline on the right. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(97deg,
      rgba(21, 10, 34, 0.97) 0%, rgba(21, 10, 34, 0.93) 34%,
      rgba(30, 15, 51, 0.72) 58%, rgba(50, 11, 87, 0.42) 100%),
    linear-gradient(180deg, rgba(21, 10, 34, 0.55) 0%, rgba(21, 10, 34, 0) 30%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--grain); opacity: 0.05; pointer-events: none;
}
.hero .h-hero { font-size: clamp(38px, 4.9vw, 72px); }
.hero .lede { color: color-mix(in srgb, var(--color-neutral-200) 88%, transparent); }
.hero .scope-list {
  border-left: 0; padding: clamp(18px, 2.2vw, 28px);
  background: color-mix(in srgb, var(--ink-deep) 58%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(250, 248, 252, 0.16);
}
.hero .rule-label { color: var(--color-accent-300); border-bottom-color: rgba(250, 248, 252, 0.4); }
.hero .scope-row { color: var(--color-neutral-100); border-bottom-color: rgba(250, 248, 252, 0.14); }
.hero .scope-row i { color: var(--color-accent-400); }
.hero .scope-row:hover { background: rgba(126, 63, 187, 0.24); color: #fff; }

/* ── interior page banner ──────────────────────────────────────────────────
   Every page opens on the dark ground so the firm reads as one property
   rather than a homepage with a set of white documents behind it.
   ─────────────────────────────────────────────────────────────────────── */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--color-neutral-100);
  border-bottom: 2px solid var(--color-text);
  padding: clamp(44px, 5.5vw, 80px) 0 clamp(22px, 2.6vw, 34px);
  background:
    radial-gradient(72% 150% at 86% 0%, rgba(126, 63, 187, 0.34) 0%, rgba(126, 63, 187, 0) 60%),
    radial-gradient(64% 130% at 6% 104%, rgba(78, 16, 128, 0.52) 0%, rgba(78, 16, 128, 0) 62%),
    linear-gradient(158deg, #241340 0%, var(--ink-deep) 64%);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--grain); opacity: 0.05; pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--color-accent-300); }
.page-hero .lede, .page-hero .lede-sm, .page-hero .body, .page-hero .body-sm { color: var(--color-neutral-300); }
.page-hero .dl > div { border-bottom-color: rgba(250, 248, 252, 0.18); }
.page-hero .dl.ruled-top > div { border-top-color: rgba(250, 248, 252, 0.18); }
.page-hero .dl.ruled-top > div:last-child { border-bottom-color: rgba(250, 248, 252, 0.18); }
.page-hero .dl dt, .page-hero .dl .k { color: var(--color-accent-300); }
.page-hero .dl dd, .page-hero .dl .v { color: var(--color-neutral-100); }
.page-hero .crumb { color: var(--color-neutral-400); }
.page-hero .crumb:hover { color: var(--color-accent-300); }
.page-hero .crumb-here { color: var(--color-accent-300); }
.page-hero .crumb-sep { color: var(--color-neutral-600); font-size: 11px; }

/* ── home ──────────────────────────────────────────────────────────────── */
.scope-list { border-left: 2px solid var(--color-text); padding-left: clamp(20px, 2.5vw, 36px); }
.scope-row { transition: background 180ms var(--ease), padding-left 180ms var(--ease); }
.scope-row:hover { padding-left: var(--space-3); }
.scope-row {
  width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: var(--space-3);
  align-items: baseline; text-align: left;
  border-bottom: 1px solid var(--color-neutral-400); padding: 15px 0; color: var(--color-text);
}
.scope-list > .scope-row:last-child { border-bottom: 0; }
.scope-row:hover { background: var(--color-accent-100); color: var(--color-text); }
.scope-row i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--color-accent-700); letter-spacing: 0.08em; }
.scope-row b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

.service-row {
  position: relative; width: 100%; display: grid;
  grid-template-columns: 96px minmax(0, 1.1fr) minmax(0, 1.6fr) 44px;
  gap: var(--space-6); align-items: start; text-align: left;
  border-top: 2px solid var(--color-divider); padding: var(--space-6) 0; color: var(--color-text);
  transition: background 200ms var(--ease);
}
/* The 2px rule above each row fills with the accent as you arrive on it —
   the grid itself does the highlighting, nothing floats. */
.service-row::before {
  content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 0;
  background: var(--color-accent); transition: width 420ms var(--ease);
}
.service-row:hover::before { width: 100%; }
.service-row:hover { background: var(--color-accent-100); color: var(--color-text); }
.service-row .a { transition: transform 220ms var(--ease); }
.service-row:hover .a { transform: translateX(5px); }
.service-row .n { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--color-accent-700); padding-top: 6px; }
.service-row .t { font-size: clamp(19px, 1.7vw, 25px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; font-family: var(--font-heading); }
.service-row .d { font-size: 15px; line-height: 1.55; color: var(--color-neutral-800); }
.service-row .a { font-size: 19px; text-align: right; color: var(--color-accent); padding-top: 2px; }

.image-band { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2px; background: var(--color-text); }
.image-band > * { min-height: 100%; }


.case-card { display: flex; flex-direction: column; }
.case-card .body-area {
  flex: 1; padding: var(--space-6); text-align: left; color: var(--color-text);
  display: flex; flex-direction: column; gap: var(--space-4); min-height: 260px;
}
a.case-card .body-area:hover { background: var(--color-surface); }
.case-card .metric { font-family: var(--font-heading); font-size: clamp(32px, 3vw, 44px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--color-accent); }
.case-card .metric-label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); margin-top: -8px; }
.case-card .title { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; margin-top: auto; }
.case-card .blurb { font-size: 14px; line-height: 1.5; color: var(--color-neutral-800); }

.reels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min, 175px), 1fr));
  border-top: 2px solid var(--color-text); border-left: 2px solid var(--color-text);
}
.reel {
  background: var(--color-surface); display: flex; flex-direction: column;
  border-right: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text);
}
.reel .cover { position: relative; }
.reel .badges { position: absolute; top: 0; right: 0; pointer-events: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 8px; z-index: 2; }
.reel .badges span { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; padding: 4px 7px; }
.reel .len { background: var(--color-text); color: var(--color-neutral-100); }
.reel .views { background: var(--color-accent); color: var(--color-neutral-100); }
.reel .meta { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.reel .plat { font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-700); }
.reel .cap { font-size: 13.5px; line-height: 1.4; font-weight: 600; }
.reels.on-ink { border-color: rgba(250, 248, 252, 0.18); }
.reels.on-ink .reel { background: rgba(21, 10, 34, 0.5); border-color: rgba(250, 248, 252, 0.18); }
.reels.on-ink .reel .len { background: var(--color-bg); color: var(--color-text); }
.reels.on-ink .reel .plat { color: var(--color-accent-400); }
.reels.on-ink .reel .cap { color: var(--color-bg); }

.sector-cell { padding: var(--space-6); }
.sector-cell b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.sector-cell span { display: block; font-size: 13px; color: var(--color-neutral-700); margin-top: var(--space-1); }

.discipline-cell {
  background: rgba(21, 10, 34, 0.42); padding: var(--space-6);
  border-right: 1px solid rgba(250, 248, 252, 0.18);
  border-bottom: 1px solid rgba(250, 248, 252, 0.18);
}
.discipline-cell b { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; }
.discipline-cell span { display: block; font-size: 13px; color: var(--color-neutral-500); margin-top: var(--space-1); }
.discipline-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid rgba(250, 248, 252, 0.18);
  border-left: 1px solid rgba(250, 248, 252, 0.18);
}

/* ── data rows ─────────────────────────────────────────────────────────── */
.dl { display: flex; flex-direction: column; }
.dl > div {
  display: grid; grid-template-columns: var(--k, 120px) 1fr; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-neutral-300);
}
.dl > div:last-child { border-bottom: 0; }
.dl.ruled-top > div { border-bottom: 0; border-top: 1px solid var(--color-neutral-300); }
.dl.ruled-top > div:last-child { border-bottom: 1px solid var(--color-neutral-300); }
.dl dt, .dl .k {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-neutral-700); margin: 0;
}
.dl dd, .dl .v { font-size: 14px; margin: 0; }

.numbered { display: flex; flex-direction: column; }
.numbered > div {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--space-4); align-items: baseline;
  padding: var(--space-4) 0; border-bottom: 1px solid var(--color-neutral-300);
}
.numbered i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--color-accent-700); }
.numbered span { font-size: 17px; font-weight: 500; line-height: 1.45; }

.step-cell { padding: var(--space-6); }
.step-cell i { font-style: normal; display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--color-accent-700); margin-bottom: var(--space-3); }
.step-cell b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }

.stage { padding: var(--space-8) var(--space-6); }
.stage i { font-style: normal; display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--color-accent-700); margin-bottom: var(--space-4); }
.stage h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--space-3); }

.box { border: 2px solid var(--color-text); padding: clamp(20px, 2.5vw, 32px); }
.box.quiet { border-color: var(--color-divider); }
.box.pad-lg-in { padding: clamp(24px, 3vw, 40px); }
.sticky-rail { display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 32px); position: sticky; top: 100px; }

.chapter {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-text);
}
.chapter i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--color-accent-700); }

/* ── services tabs ─────────────────────────────────────────────────────── */

/* ── network ───────────────────────────────────────────────────────────── */
.person { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.person:hover { background: var(--color-surface); }
.person .name { font-size: 16px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; font-family: var(--font-heading); }
.person .role { font-size: 13px; line-height: 1.4; color: var(--color-neutral-800); margin-top: var(--space-1); }
.person .foot {
  margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-neutral-300);
  display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between;
}
.person .disc { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); }
.person .loc  { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-600); }
.person[hidden] { display: none; }

/* ── intake ────────────────────────────────────────────────────────────── */
.steps { display: flex; gap: 1px; background: var(--color-divider); border: 1px solid var(--color-divider); }
.steps > div { flex: 1; background: var(--color-bg); padding: var(--space-4); }
.steps .top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.steps .top i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-700); }
.steps .dot { width: 8px; height: 8px; background: var(--color-accent); display: block; visibility: hidden; }
.steps > div.on .dot { visibility: visible; }
.steps b { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }

.q { display: flex; align-items: baseline; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-text); margin-bottom: var(--space-6); }
.q i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--color-accent-700); }
.q h2, .q h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.opts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.form-input, .form-area {
  width: 100%; background: var(--color-neutral-100); border: 2px solid var(--color-divider);
  padding: 14px var(--space-4); font-size: 16px; color: var(--color-text); font-family: var(--font-body);
}
.form-area { padding: var(--space-4); line-height: 1.5; resize: vertical; }
.form-input:focus-visible, .form-area:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.form-label { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label span { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-700); }
/* The rule needs the same air above it that separates the questions, or it
   lands on the last row of chips - which is what happens as soon as Q5
   wraps to a second line. Same clamp the q-sets use. */
.form-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  margin-top: clamp(28px, 3.5vw, 44px);
  border-top: 2px solid var(--color-divider); padding-top: var(--space-6);
}
.summary-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: 9px 0; border-bottom: 1px solid var(--color-neutral-300); }
.summary-row .k { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); white-space: nowrap; }
.summary-row .v { font-size: 13px; font-weight: 600; text-align: right; }
.summary-row:last-child { border-bottom: 0; }
.next-steps { display: flex; flex-direction: column; gap: var(--space-4); }
.next-steps > div { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); }
.next-steps i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--color-accent-700); padding-top: 3px; }
.next-steps span { font-size: 14px; line-height: 1.5; }
.panel[hidden] { display: none; }

/* ── insights ──────────────────────────────────────────────────────────── */
.article {
  padding: var(--space-8) var(--space-6); display: flex; flex-direction: column;
  gap: var(--space-3); min-height: 240px; color: var(--color-text);
}
a.article:hover { background: var(--color-surface); color: var(--color-text); }
.article .kind { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-700); }
.article h3 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.article p { font-size: 14px; line-height: 1.55; color: var(--color-neutral-800); }
.article .foot { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-neutral-300); font-size: 12px; color: var(--color-neutral-600); }
.post { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); min-height: 190px; }
.post .kind { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-600); }
.post p { font-size: 15px; line-height: 1.5; font-weight: 500; }
.post .when { margin-top: auto; font-size: 12px; color: var(--color-neutral-600); }
.flag { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-100); background: var(--color-accent); padding: 5px 9px; }
.flag.ink { background: var(--color-text); }

.quote-block { padding: clamp(24px, 3vw, 36px); }
.quote-block p { font-size: clamp(19px, 1.7vw, 23px); font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; }
.quote-block .who { border-top: 1px solid var(--color-neutral-700); padding-top: var(--space-4); margin-top: var(--space-6); }
.quote-block .who b { font-size: 14px; font-weight: 700; }
.quote-block .who span { display: block; font-size: 13px; color: var(--color-neutral-500); margin-top: 2px; }

.bench-row { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-neutral-300); }
.bench-row:last-child { border-bottom: 0; padding-bottom: 0; }
.bench-row b { font-size: 14px; font-weight: 600; }
/* neutral-600 at 12px is 3.97:1 on the quiet box, under the 4.5:1 WCAG AA
   floor for small text. neutral-700 is 6.3:1. */
.bench-row span { font-size: 12px; color: var(--color-neutral-700); }

/* ── footer ────────────────────────────────────────────────────────────── */
.site-footer { border-top: 2px solid var(--color-text); background: var(--color-bg); padding: clamp(48px, 6vw, 80px) 0 var(--space-8); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
.footer-col { display: flex; flex-direction: column; gap: var(--space-3); }
/* "Business & Advisory" wraps to two lines and "Legal Services" does not, so
   the rules under them — and every first link below — sat at different
   heights across the columns. Two lines of room in every column lines them
   up, at any width and in any language. */
.footer-col .head {
  font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-neutral-700); padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-divider);
  display: flex; align-items: flex-start;
  /* Pinned so the two-line reservation below is exact rather than inherited. */
  line-height: 1.6;
  min-height: calc(3.4em + var(--space-2));
}
.footer-col > a, .footer-col > span { font-size: 14px; font-weight: 600; color: var(--color-text); }
.footer-col .head a { font: inherit; color: inherit; letter-spacing: inherit; }
.footer-col > a:hover, .footer-col .head a:hover { color: var(--color-accent); }
.footer-col .muted, .footer-col > span { color: var(--color-neutral-700); }
.footer-bottom {
  border-top: 2px solid var(--color-divider); margin-top: clamp(32px, 4vw, 56px); padding-top: var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between;
}
.footer-bottom span { font-size: 12px; color: var(--color-neutral-700); line-height: 1.5; }
.footer-bottom span:first-child { max-width: 720px; }

/* Every .footer-grid media query in this file used to be overridden by a
   later unconditional rule down in the IA v2 section, so the footer kept its
   four columns at every width: on a handset each was about 90px, labels broke
   after a word or two, and the phone number split across "222-" and "4752".
   All the breakpoints live here now so that cannot happen again — and
   tools/check-css.mjs asserts the 390px column count. */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
  }
  .footer-nap { max-width: none; margin-top: var(--space-4); }
  .footer-nap a { white-space: nowrap; }
  /* 10px at 0.2em tracking wraps mid-phrase in a column this narrow. */
  .footer-col .head { font-size: 12px; letter-spacing: 0.12em; }
}

@media (max-width: 560px) {
  .footer-bottom { flex-direction: column; gap: var(--space-4); }
  .footer-bottom span:first-child { max-width: none; }
}

/* The chat launcher is fixed to the bottom-right, so at the very end of the
   page it covered the copyright and the Privacy/Terms/Disclaimer row. Reserve
   its height only when the widget is actually mounted. */
body:has(.chat-launcher) .site-footer { padding-bottom: 96px; }
@supports not selector(:has(*)) {
  .site-footer { padding-bottom: 96px; }
}

/* ── depth, accents and motion ─────────────────────────────────────────── */

/* Stat bands read as engraved figures, not headings. */
.band .num { color: var(--color-accent-900); }
.band .num.accent { color: var(--color-accent); }
.band .num-label { position: relative; padding-top: var(--space-3); margin-top: var(--space-3); }
.band .num-label::before {
  content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 2px;
  background: var(--color-accent);
}
.band > *:first-child .num-label::before { left: 0; }

/* Cells lift off the grid on hover instead of merely tinting. */
a.case-card, a.article {
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
a.case-card:hover, a.article:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(27, 20, 32, 0.16);
  position: relative; z-index: 2;
}
.person { transition: background 220ms var(--ease); }
.reel { transition: transform 300ms var(--ease); }
.reel:hover { transform: translateY(-3px); }
.box { transition: border-color 220ms var(--ease); }
.chip, .stamp, .tab, .link-caps { transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease); }

.pull { border-left-width: 4px; }
.flag { box-shadow: 0 6px 16px rgba(110, 20, 178, 0.24); }
.discipline-cell { transition: background 220ms var(--ease); }
.discipline-cell:hover { background: rgba(126, 63, 187, 0.16) !important; }

/* Sections arrive rather than appear. The hidden state is added by script, so
   a page with JS disabled simply shows everything. */
.pre-reveal { opacity: 0; transform: translateY(20px); }
/* Children of a repeating group arrive just after their section, a little
   apart. Deliberately smaller than the section's own 20px: this should read
   as the row settling, not as fourteen separate animations. */
.pre-stagger > * { opacity: 0; transform: translateY(9px); }
.pre-stagger.is-in > * {
  opacity: 1; transform: none;
  transition: opacity 460ms var(--ease), transform 460ms var(--ease);
}
.pre-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 760ms var(--ease), transform 760ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .pre-reveal, .pre-reveal.is-in { opacity: 1; transform: none; transition: none; }
  .pre-stagger > *, .pre-stagger.is-in > * {
    opacity: 1; transform: none; transition: none; transition-delay: 0s !important;
  }
  a.case-card:hover, a.article:hover, .reel:hover { transform: none; }
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .service-row { grid-template-columns: 60px minmax(0, 1fr) 32px; }
  .service-row .d { grid-column: 2 / 3; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }
  .hide-sm { display: none !important; }
  .no-rule-sm { padding-left: 0 !important; border-left: 0 !important; }
  .image-band { grid-template-columns: 1fr; }
  .band > * { padding: var(--space-6) var(--space-4) var(--space-6) 0; border-right: 0; border-bottom: 1px solid var(--color-neutral-400); }
  .band > *:last-child { border-bottom: 0; }
  .sticky-rail { position: static; }
  .steps { flex-direction: column; }
  .dl > div { grid-template-columns: 1fr; gap: var(--space-1); }
}
@media (min-width: 901px) {
  .show-sm { display: none !important; }
}
@media (max-width: 560px) {
  /* The lock-up loses its descriptor before it is allowed to wrap. */
  .brand-sub { display: none; }
  .brand::before { height: 24px; }
  .brand { padding-top: var(--space-4); padding-bottom: var(--space-4); }
}
@media (max-width: 620px) {
  .service-row { grid-template-columns: 44px minmax(0, 1fr); }
  .service-row .a { display: none; }
  .quote-block p { font-size: 19px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   IA v2 — two-practice architecture
   Added for the August 2026 restructure: the site now presents a business
   and advisory practice alongside a full-service legal practice, and the
   visitor self-identifies before scrolling.
   ═══════════════════════════════════════════════════════════════════════ */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-text); color: var(--color-neutral-100);
  padding: 12px 18px; font-size: 14px; font-weight: 700;
}
.skip-link:focus { left: 0; color: var(--color-neutral-100); }

.header-phone {
  font-size: 14px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--color-text); white-space: nowrap;
}
.header-phone:hover { color: var(--color-accent); }

.hero-inner { max-width: 900px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ── the two doors ─────────────────────────────────────────────────────── */
.path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(16px, 2vw, 28px); }
.path-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  border: 2px solid var(--color-text); padding: clamp(24px, 3vw, 40px);
  color: var(--color-text); background: var(--color-bg);
  transition: background 220ms var(--ease), transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.path-card:hover {
  color: var(--color-text); background: var(--color-accent-100);
  transform: translateY(-3px); box-shadow: 0 20px 44px rgba(27, 20, 32, 0.14);
}
.path-head { display: flex; align-items: center; gap: var(--space-3); }
.path-num {
  font-family: var(--font-heading); font-size: 12px; font-weight: 900; letter-spacing: 0.08em;
  color: var(--color-neutral-100); background: var(--color-accent); padding: 4px 8px;
}
.path-title {
  font-family: var(--font-heading); font-size: clamp(21px, 2.1vw, 28px); font-weight: 900;
  letter-spacing: -0.025em; line-height: 1.15;
}
.path-card.lg .path-title { font-size: clamp(23px, 2.4vw, 32px); }
.path-body { font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); }
.path-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; border-top: 1px solid var(--color-neutral-300); }
.path-list li {
  font-size: 14px; line-height: 1.45; padding: 11px 0 11px 20px; position: relative;
  border-bottom: 1px solid var(--color-neutral-300);
}
.path-list li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 7px; height: 7px; background: var(--color-accent-400);
}
.path-go {
  margin-top: auto; padding-top: var(--space-4);
  font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.path-card:hover .path-go { color: var(--color-accent); }

.num-sep { color: var(--color-accent); margin: 0 0.16em; font-weight: 700; }
.num-sup { font-size: 0.45em; font-weight: 800; letter-spacing: 0; margin-left: 2px; vertical-align: super; }
.band-caption {
  padding-top: var(--space-3); padding-bottom: var(--space-3);
  display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between; align-items: center;
}

/* ── practice-area cells ───────────────────────────────────────────────── */
.pa-cell { display: block; padding: var(--space-6); color: var(--color-text); }
.pa-cell b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.pa-cell span { display: block; font-size: 13px; line-height: 1.45; color: var(--color-neutral-700); margin-top: var(--space-1); }
.pa-cell:hover { background: var(--color-accent-100); color: var(--color-text); }
.cells.on-surface .pa-cell:hover { background: var(--color-accent-100); }


.fee-row {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: 9px 0; border-bottom: 1px solid var(--color-neutral-300);
}
.fee-row b { font-size: 14px; font-weight: 600; }
.fee-row span { font-size: 13px; color: var(--color-neutral-700); }
.fee-note { font-size: 12px; line-height: 1.5; color: var(--color-neutral-700); margin-top: var(--space-4); }

.rail-title { font-family: var(--font-heading); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: var(--space-3); }
.rail-body { font-size: 14px; line-height: 1.55; color: var(--color-neutral-400); margin-bottom: var(--space-6); }

/* ── about ─────────────────────────────────────────────────────────────── */
.person-id { border-bottom: 2px solid var(--color-divider); padding: var(--space-4) 0; }
.person-id-name { font-family: var(--font-heading); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.person-id-role { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-700); margin-top: var(--space-1); }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-8); }
.how-grid h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: var(--space-2); }

/* ── team ──────────────────────────────────────────────────────────────── */
.lead-person { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.lead-role { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); }
.lead-facts { display: flex; flex-direction: column; border-top: 2px solid var(--color-text); }
.lead-facts > div {
  display: grid; grid-template-columns: 190px 1fr; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-neutral-300);
}
.lead-facts b { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-700); }
.lead-facts span { font-size: 15px; }
@media (max-width: 900px) {
  .lead-person { grid-template-columns: 1fr; }
  .lead-portrait { max-width: 340px; }
  .lead-facts > div { grid-template-columns: 1fr; gap: var(--space-1); }
}

.person-desc { font-size: 13px; line-height: 1.5; color: var(--color-neutral-700); }
.person-pending { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-700); }
.person-li {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; font-size: 10px; font-weight: 900; font-style: normal;
  /* 10px bold at neutral-500 is 2.59:1 on the surface — under AA even for a
     decorative mark, and it is real text on screen. */
  border: 1px solid var(--color-neutral-400); color: var(--color-neutral-700);
}
.disclosure {
  margin-top: clamp(28px, 3.5vw, 44px); padding-top: var(--space-6);
  border-top: 1px solid var(--color-neutral-300);
  font-size: 12.5px; line-height: 1.6; color: var(--color-neutral-700); max-width: 900px;
}

.bench-note { border: 1px solid rgba(250, 248, 252, 0.22); padding: clamp(22px, 2.6vw, 34px); }
.bench-note-lead { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent-300); margin-bottom: var(--space-6); }
.bench-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bench-steps li {
  display: grid; grid-template-columns: 34px 1fr; gap: var(--space-3);
  font-size: 15px; line-height: 1.5; padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(250, 248, 252, 0.14);
}
.bench-steps li span { font-size: 11px; font-weight: 800; color: var(--color-accent-400); padding-top: 4px; }
.bench-disclosure { font-size: 12px; line-height: 1.55; color: var(--color-neutral-500); margin-top: var(--space-6); }

/* ── insights ──────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  align-items: center; justify-content: space-between; margin-bottom: var(--space-8);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.feed { display: flex; flex-direction: column; border-top: 2px solid var(--color-text); }
.feed-item {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(20px, 3vw, 48px);
  padding: clamp(28px, 3.2vw, 44px) 0; border-bottom: 1px solid var(--color-neutral-300);
}
.feed-item[hidden] { display: none; }
.feed-topic { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-700); }
.feed-main h2 { font-size: clamp(21px, 2.1vw, 28px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: var(--space-4); }
.feed-main p { font-size: 16px; line-height: 1.62; color: var(--color-neutral-800); margin-bottom: var(--space-4); }
@media (max-width: 800px) { .feed-item { grid-template-columns: 1fr; gap: var(--space-3); } }

.feed-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8) var(--space-6); min-height: 230px; color: var(--color-text); }
.feed-card h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.22; }
.feed-card p { font-size: 14px; line-height: 1.55; color: var(--color-neutral-800); }
.feed-meta { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-neutral-300); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-700); }
a.feed-card:hover { background: var(--color-surface); color: var(--color-text); }

.curated { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); min-height: 170px; }
.curated-src { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-700); }
.curated b { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; }
.curated-note { font-size: 13px; line-height: 1.5; color: var(--color-neutral-700); }

/* ── contact routing ───────────────────────────────────────────────────── */
.route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.route-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  text-align: left; cursor: pointer; padding: var(--space-6);
  background: var(--color-bg); border: 2px solid var(--color-divider); color: var(--color-text);
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.route-card:hover { border-color: var(--color-text); }
.route-card b { font-family: var(--font-heading); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.route-card > span:last-child { font-size: 13px; line-height: 1.45; color: var(--color-neutral-700); }
.route-num { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--color-neutral-700); }
.route-card[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-100); }
.route-card[aria-pressed="true"] .route-num { color: var(--color-accent-700); }

.q-stack { display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 44px); }
.q-set { border: 0; padding: 0; margin: 0; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.field-note { font-size: 12.5px; line-height: 1.55; color: var(--color-neutral-700); margin-top: var(--space-3); }
.opt { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-neutral-700); }
.form-fineprint { font-size: 13px; color: var(--color-neutral-700); }
.sent-mark { width: 14px; height: 14px; background: var(--color-accent); margin-bottom: var(--space-6); }
.sent-title { font-size: clamp(26px, 3vw, 40px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: var(--space-4); }
.contact-phone { display: block; font-family: var(--font-heading); font-size: clamp(26px, 2.6vw, 34px); font-weight: 900; letter-spacing: -0.03em; color: var(--color-accent-700); }
.contact-phone:hover { color: var(--color-accent); }
.summary-row[hidden] { display: none; }

/* ── footer ────────────────────────────────────────────────────────────── */
.footer-mark { font-family: var(--font-heading); font-weight: 900; font-size: 26px; letter-spacing: -0.03em; line-height: 1; }
.footer-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-neutral-700); margin-top: var(--space-2); }
.footer-nap { font-size: 14px; line-height: 1.7; color: var(--color-neutral-800); max-width: 340px; margin-top: var(--space-6); }
.footer-nap a { color: var(--color-neutral-800); }
.footer-nap a:hover { color: var(--color-accent); }

@media (max-width: 560px) {
  .header-phone { display: none; }
  .path-card { padding: var(--space-6) var(--space-4); }
}

/* ── associations ──────────────────────────────────────────────────────────
   Real membership badges carried over from the live site. Rendered small,
   desaturated and evenly spaced so they read as a credential strip rather
   than a logo salad.
   ─────────────────────────────────────────────────────────────────────── */
.assoc-band { padding: clamp(32px, 4vw, 52px) 0; background: var(--color-surface); }
.assoc-row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(20px, 4vw, 56px);
}
.assoc-row li { display: flex; align-items: center; }
.assoc-row picture { display: flex; }
.assoc-row img {
  height: clamp(46px, 5.2vw, 68px); width: auto; max-width: 160px; object-fit: contain;
}

/* ══════════════════════════════════════════════════════════════════════════
   Mobile refinement
   Measured at 360 / 390 / 414 / 768. Every interactive control is brought to
   a 44px minimum touch target, and the small caps labels get a little more
   size where thumbs and glare make 10px hard work.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .menu-toggle { min-height: 44px; padding: 12px 16px; }

  /* Chips are the primary input on the insights filter and both intake
     routes, so they take the full 44px rather than the visual minimum. */
  .chip { min-height: 44px; }
  .chip.sm { min-height: 44px; padding: 12px 15px; }

  /* Inline-block links get their tap area from padding, not from font size. */
  .link-caps { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .rail-phone { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .mega-phone { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .svc-card-go, .mega-head { min-height: 44px; align-items: center; }
  .footer-col > a, .footer-col > span {
    display: flex; align-items: center; min-height: 44px; padding-block: 6px;
  }
  .footer-col { gap: var(--space-1); }
  .contact-phone { display: inline-flex; align-items: center; min-height: 48px; }

  /* Small caps labels: nothing carrying words drops below 12px on a handset. */
  .eyebrow, .rule-label, .bench-note-lead { font-size: 12px; letter-spacing: 0.18em; }
  .footer-tag, .brand-sub { font-size: 12px; letter-spacing: 0.16em; }
  .num-label, .feed-topic, .curated-src, .person-pending,
  .steps .top i, .meta-tag, .fee-note, .field-note, .form-fineprint,
  .disclosure, .bench-disclosure, .footer-bottom span { font-size: 12px; }

  .b { min-height: 48px; }
  .path-go { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 480px) {
  /* Stacked CTAs go full width so neither is a narrow target. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .b { width: 100%; justify-content: space-between; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .b { width: 100%; justify-content: space-between; }
  .form-fineprint { text-align: left; }
  .route-grid { grid-template-columns: 1fr; }
  .band > * { padding-right: 0; }
  .feed-item { padding: var(--space-8) 0; }
  .assoc-row { gap: 22px 28px; }
  .assoc-row img { height: 40px; }
}

/* Printing must never inherit an un-run scroll animation. */
@media print {
  .pre-reveal { opacity: 1 !important; transform: none !important; }
  .pre-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Restored sections — outcomes, client reviews, social, FAQ
   ════════════════════════════════════════════════════════════════════════ */

/* ── case study ────────────────────────────────────────────────────────── */
.case-head { max-width: 1000px; }
.case-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.case-facts { margin-top: clamp(24px, 3vw, 36px); }
.case-body { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
.case-chapter .chapter { margin-bottom: var(--space-6); }
.case-chapter .body + .body { margin-top: var(--space-4); }
.case-weeks { margin-top: var(--space-6); }
.case-weeks .v { font-size: 16px; line-height: 1.45; }
.case-metrics { display: flex; flex-direction: column; gap: var(--space-4); }
.case-metrics > div { display: flex; align-items: baseline; gap: var(--space-4); }
.case-metrics b {
  font-family: var(--font-heading); font-size: 30px; font-weight: 900;
  letter-spacing: -0.03em; color: var(--color-accent); min-width: 76px;
}
.case-metrics span { font-size: 13px; line-height: 1.4; color: var(--color-neutral-800); }

/* ── client reviews ────────────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(16px, 2vw, 24px); align-items: start; }
.quote {
  margin: 0; padding: clamp(22px, 2.6vw, 32px);
  background: var(--color-bg); border-left: 3px solid var(--color-accent);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.quote p { font-size: 16px; line-height: 1.55; font-weight: 500; }
.quote cite {
  font-style: normal; margin-top: auto;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-neutral-700);
}

/* ── social platforms ──────────────────────────────────────────────────── */
.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: rgba(250, 248, 252, 0.18); border: 1px solid rgba(250, 248, 252, 0.18); }
.platform { background: rgba(21, 10, 34, 0.5); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.platform-name { font-family: var(--font-heading); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-neutral-100); }
.platform-note { font-size: 13px; line-height: 1.5; color: var(--color-neutral-400); }
.platform-handle {
  margin-top: auto; padding-top: var(--space-3); border-top: 1px solid rgba(250, 248, 252, 0.14);
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-300);
}
/* Placeholder banner on the dark ground. */

/* ── footer social ─────────────────────────────────────────────────────── */
.footer-tagline { font-size: 14px; font-style: italic; color: var(--color-neutral-700); margin-top: var(--space-3); }
.footer-social {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6);
  margin-top: clamp(28px, 3.5vw, 44px); padding-top: var(--space-6);
  border-top: 1px solid var(--color-neutral-300);
}
.footer-social-label { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-neutral-700); }
.social-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.social-link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px;
  border: 2px solid var(--color-divider); font-size: 13px; font-weight: 700;
  color: var(--color-text); letter-spacing: 0.02em;
}
a.social-link:hover { border-color: var(--color-accent); color: var(--color-accent); }
.social-link.is-pending { color: var(--color-neutral-700); border-style: dashed; cursor: default; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq { border-top: 2px solid var(--color-text); }
.faq-item { border-bottom: 1px solid var(--color-neutral-300); }
.faq-item summary {
  position: relative; cursor: pointer; list-style: none;
  padding: var(--space-6) 44px var(--space-6) 0;
  font-family: var(--font-heading); font-size: clamp(17px, 1.6vw, 20px); font-weight: 800;
  letter-spacing: -0.015em; line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 24px; font-weight: 400; line-height: 1; color: var(--color-accent);
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item summary:hover { color: var(--color-accent-700); }
.faq-body { padding: 0 44px var(--space-6) 0; display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.faq-body p { font-size: 16px; line-height: 1.62; color: var(--color-neutral-800); }

@media (max-width: 900px) {
  .social-link { min-height: 44px; }
  .case-metrics b { font-size: 26px; min-width: 64px; }
}

/* ── outcomes index ────────────────────────────────────────────────────── */
.feature-case {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0; border: 2px solid var(--color-text); color: var(--color-text);
  transition: box-shadow 300ms var(--ease), transform 300ms var(--ease);
}
.feature-case:hover { color: var(--color-text); transform: translateY(-3px); box-shadow: 0 22px 48px rgba(27, 20, 32, 0.16); }
.feature-case-media { position: relative; overflow: hidden; }
.feature-case-media .fig { height: 100%; aspect-ratio: auto; }
.feature-case-body { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: var(--space-4); }
.feature-case-title { font-family: var(--font-heading); font-size: clamp(22px, 2.3vw, 31px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.15; }
.feature-case-blurb { font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); }
.feature-case-metrics { display: flex; flex-wrap: wrap; gap: var(--space-6); padding: var(--space-4) 0; border-top: 1px solid var(--color-neutral-300); border-bottom: 1px solid var(--color-neutral-300); }
.feature-case-metrics > div { display: flex; flex-direction: column; gap: 2px; }
.feature-case-metrics b { font-family: var(--font-heading); font-size: 28px; font-weight: 900; letter-spacing: -0.03em; color: var(--color-accent); line-height: 1; }
.feature-case-metrics span { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-700); }
@media (max-width: 860px) {
  .feature-case { grid-template-columns: 1fr; }
  .feature-case-media .fig { aspect-ratio: 16 / 10; }
}

.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-6); }

/* ── social strip ──────────────────────────────────────────────────────── */
.social-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ink .social-link, .social-strip .social-link { border-color: rgba(250, 248, 252, 0.34); color: var(--color-neutral-100); }
.ink a.social-link:hover, .social-strip a.social-link:hover { border-color: var(--color-accent-300); color: var(--color-accent-300); }

/* ── anchor offset ─────────────────────────────────────────────────────────
   The header is sticky, so a jump to #id would otherwise land with the
   heading tucked underneath it.
   ─────────────────────────────────────────────────────────────────────── */
:target, [id] { scroll-margin-top: 96px; }
@media (max-width: 900px) { :target, [id] { scroll-margin-top: 84px; } }

/* ── short-form carousel ───────────────────────────────────────────────────
   A native scroll-snap track: it works with no JavaScript, with a trackpad,
   with a touch swipe, and with the arrow keys when focused. The buttons are
   an enhancement layered on top, not the mechanism.
   ─────────────────────────────────────────────────────────────────────── */
.fig.vertical { aspect-ratio: 9 / 16; }

.reel-head {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.reel-head-text { max-width: 680px; }
.reel-intro { margin-top: var(--space-4); }
.reel-social { margin-top: var(--space-6); }

.reel-nav { display: flex; gap: var(--space-2); }
.reel-btn {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 2px solid rgba(250, 248, 252, 0.34); color: var(--color-neutral-100);
  font-size: 19px; cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), opacity 180ms var(--ease);
}
.reel-btn:hover:not(:disabled) { background: rgba(126, 63, 187, 0.34); border-color: var(--color-accent-300); }
.reel-btn:disabled { opacity: 0.3; cursor: default; }

.reel-track {
  list-style: none; margin: 0; padding: 0 0 var(--space-4);
  display: grid; grid-auto-flow: column;
  /* A fixed track width, not a fraction of the container: the point of a
     carousel is that the row is wider than its frame, so a partial card at
     the edge signals there is more. Fractional columns just collapse to fit. */
  grid-auto-columns: clamp(170px, 21vw, 262px);
  gap: var(--space-4);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: rgba(250, 248, 252, 0.3) transparent;
}
@media (prefers-reduced-motion: reduce) { .reel-track { scroll-behavior: auto; } }
.reel-track::-webkit-scrollbar { height: 6px; }
.reel-track::-webkit-scrollbar-thumb { background: rgba(250, 248, 252, 0.3); }
.reel-track:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 4px; }

.reel-card { scroll-snap-align: start; }
.reel-link {
  display: flex; flex-direction: column; gap: var(--space-3);
  color: var(--color-neutral-100); height: 100%;
}
.reel-cover {
  display: block; border: 1px solid rgba(250, 248, 252, 0.18);
  transition: border-color 240ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .reel-link:hover { color: var(--color-neutral-100); }
  .reel-link:hover .reel-cover { border-color: var(--color-accent-300); }
}
.reel-topic {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-300);
}
.reel-caption { font-size: 14.5px; line-height: 1.4; font-weight: 600; }

@media (max-width: 560px) {
  .reel-track { grid-auto-columns: 64%; }
  .reel-nav { display: none; }   /* swipe is the interaction on a handset */
}

/* Mandatory snapping fights a finger: it drags the track back to a snap point
   mid-gesture, so a flick that should carry two cards lands on one. Proximity
   still snaps when the finger stops near a card and otherwise gets out of the
   way. Pointer-based rather than width-based, because it is the input that
   matters, not the screen. */
@media (pointer: coarse) {
  .reel-track { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
}

/* ── video cards ──────────────────────────────────────────────────────────
   The four real reels. Everything is preload="none" until someone actually
   interacts, so the section costs nothing to a visitor who scrolls past. */
.reel-play {
  position: relative; padding: 0; border: 1px solid rgba(250, 248, 252, 0.18);
  background: #000; cursor: pointer; width: 100%; overflow: hidden;
  transition: border-color 240ms var(--ease);
}
.reel-play video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  background: #000;
}
/* The poster is an image on top of the video, not the video's poster
   attribute. A browser shows @poster only until the first frame decodes and
   never again - so once a card had been hovered, it sat on frame 0 for the
   rest of the session, which on these reels is the fade up from black. An
   overlay comes back every time playback stops. */
.reel-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
  transition: opacity 260ms var(--ease);
}
.reel-video.is-playing .reel-poster { opacity: 0; }

/* Says what clicking does. A muted preview that silently becomes audible on
   click is not something anyone guesses. */
.reel-badge {
  position: absolute; inset: auto auto 12px 12px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 10px; border-radius: 999px;
  background: rgba(12, 8, 18, 0.72); color: var(--color-neutral-100);
  backdrop-filter: blur(8px);
  transition: background 220ms var(--ease);
}
.reel-badge-t {
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap;
}
.reel-badge .ico-mute, .reel-badge .ico-loud { display: none; }
/* previewing muted: spell out that sound is one click away */
.reel-video.is-preview .reel-badge .ico-play { display: none; }
.reel-video.is-preview .reel-badge .ico-mute { display: block; }
/* playing with sound */
.reel-video.is-loud .reel-badge { background: rgba(126, 63, 187, 0.86); }
.reel-video.is-loud .reel-badge .ico-play { display: none; }
.reel-video.is-loud .reel-badge .ico-loud { display: block; }
.reel-play:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 3px; }
.reel-desc {
  margin: 0; font-size: 12.5px; line-height: 1.5;
  color: rgba(250, 248, 252, 0.66);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .reel-play:hover { border-color: var(--color-accent-300); }
}
@media (prefers-reduced-motion: reduce) {
  .reel-badge { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Intake assistant
   Mounted by assets/js/chat.js only when /api/chat responds, so a static
   deploy renders none of this.
   ════════════════════════════════════════════════════════════════════════ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.chat-launcher {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 70;
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 52px; padding: 14px 20px;
  background: var(--color-accent); color: var(--color-neutral-100);
  border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 12px 32px rgba(110, 20, 178, 0.34);
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}
.chat-launcher:hover { background: var(--color-accent-600); transform: translateY(-2px); }
.chat-launcher.is-open { background: var(--color-text); }
.chat-launcher-dot { width: 8px; height: 8px; background: var(--color-accent-300); flex: none; }
.chat-launcher.is-open .chat-launcher-dot { background: var(--color-accent); }

.chat-panel {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: calc(clamp(16px, 3vw, 28px) + 64px);
  z-index: 71; width: min(388px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 140px));
  display: flex; flex-direction: column;
  background: var(--color-bg); border: 2px solid var(--color-text);
  box-shadow: 0 28px 64px rgba(21, 10, 34, 0.32);
}
.chat-panel[hidden] { display: none; }

.chat-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-6); border-bottom: 2px solid var(--color-text);
  background: var(--ink-deep); color: var(--color-neutral-100);
}
.chat-title { font-family: var(--font-heading); font-size: 17px; font-weight: 800; letter-spacing: -0.015em; }
.chat-sub { font-size: 12.5px; line-height: 1.4; color: var(--color-neutral-400); margin-top: 3px; }
.chat-head-actions { display: flex; align-items: center; gap: 4px; }

.chat-clear {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-bg);
  opacity: 0.72;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 8px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}
.chat-clear:hover { opacity: 1; text-decoration: underline; }
.chat-clear:focus-visible { outline: 2px solid var(--color-bg); outline-offset: 2px; }

.chat-close {
  background: none; border: 0; color: var(--color-neutral-400); cursor: pointer;
  font-size: 26px; line-height: 1; padding: 0 2px; min-width: 32px; min-height: 32px;
}
.chat-close:hover { color: var(--color-neutral-100); }

.chat-log {
  flex: 1; overflow-y: auto; padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  scrollbar-width: thin;
}
.chat-msg { display: flex; }
.chat-msg--user { justify-content: flex-end; }
.chat-bubble {
  max-width: 86%; padding: 11px 14px; font-size: 14.5px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-msg--bot .chat-bubble { background: var(--color-surface); color: var(--color-text); }
.chat-msg--user .chat-bubble { background: var(--color-accent); color: var(--color-neutral-100); }

/* Reserves the room a reply is about to stream into, so the question can sit
   at the top of the view without the bubble itself being stretched. */
.chat-spacer { flex: none; }

/* Inline links in running prose need more than colour to be findable — the
   accent is only 1.19:1 against body text, which fails WCAG 1.4.1. */
.body a, .lede a, .lede-sm a { text-decoration: underline; text-underline-offset: 2px; }
.body a:hover, .lede a:hover, .lede-sm a:hover { color: var(--color-accent); }

/* ── hover language ────────────────────────────────────────────────────
   The first build's premium feel came from one idea used consistently: a
   2px accent rule that fills left-to-right as you arrive on a row, with the
   row shifting a few pixels toward you. It survived only on .service-row
   after the restructure, which is why the rest of the site went flat. These
   rules put the same behaviour back on the components that read as rows or
   cells, using the same 420ms fill and the same easing so it is one motion
   vocabulary rather than several.
   ─────────────────────────────────────────────────────────────────────── */

/* Practice-area cells: the rule fills along the top edge. */
.pa-cell {
  position: relative;
  transition: background 200ms var(--ease), transform 220ms var(--ease);
}
.pa-cell::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--color-accent); transition: width 420ms var(--ease);
}
.pa-cell:hover::before { width: 100%; }
.pa-cell b { transition: transform 220ms var(--ease); }
.pa-cell:hover b { transform: translateX(4px); }

/* Answer-tree index rows — the long tail, and the place a reader spends
   most time. Indent plus a rule growing down the left edge. */
.answer-index li { position: relative; }
.answer-index li::before {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: var(--color-accent); transform: scaleY(0); transform-origin: top;
  transition: transform 320ms var(--ease);
}
.answer-index li:hover::before { transform: scaleY(1); }
.answer-index a { transition: padding-left 220ms var(--ease), background 200ms var(--ease); }
.answer-index li:hover a { padding-left: var(--space-3); background: var(--color-accent-100); }

/* Service-page detail rows. */
.detail-item { position: relative; transition: background 200ms var(--ease); }
.detail-item::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--color-accent); transition: width 420ms var(--ease);
}
.detail-item:hover::before { width: 100%; }
.detail-item:hover h3 { color: var(--color-accent); }
.detail-item h3 { transition: color 200ms var(--ease); }

/* Short-form covers had no hover at all. */
.reel-link { transition: transform 260ms var(--ease); }
.reel-cover img { transition: transform 620ms var(--ease); }
.reel-caption { transition: color 200ms var(--ease); }
/* Hover effects only where hovering is a thing. A touch device latches :hover
   on tap, so the card was lifting and the image zooming 6% and then staying
   that way - which reads as the carousel grabbing the finger instead of
   scrolling. This is the fix for the sticky swipe. */
@media (hover: hover) and (pointer: fine) {
  .reel-link:hover { transform: translateY(-4px); }
  .reel-link:hover .reel-cover img { transform: scale(1.06); }
  .reel-link:hover .reel-caption { color: var(--color-accent-300); }
  /* A video card is about to start moving on its own. Lifting and scaling it
     at the same moment reads as the thumbnail zooming, so the video cards get
     the border change and nothing else. */
  .reel-video:hover { transform: none; }
  .reel-video:hover .reel-poster { transform: none; }
}

/* Nothing above moves for a reader who has asked it not to. */
@media (prefers-reduced-motion: reduce) {
  .pa-cell, .pa-cell b, .pa-cell::before,
  .answer-index a, .answer-index li::before,
  .detail-item::before, .detail-item h3,
  .reel-link, .reel-cover img, .reel-caption { transition: none; }
  .pa-cell:hover b, .reel-link:hover, .reel-link:hover .reel-cover img { transform: none; }
  .answer-index li:hover a { padding-left: 0; }
}

.fig-cap {
  font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-700);
  margin-top: var(--space-3);
}

/* ── brand playground ──────────────────────────────────────────────────
   Internal preview only. The controls drive custom properties that the real
   hero and section below already read, so what the client sees is the actual
   page re-rendered rather than a mock-up of it. */
.pg-bar {
  position: sticky; top: 0; z-index: 60;
  background: #1b1420; color: #faf8fc;
  border-bottom: 2px solid #6e14b2;
  padding: var(--space-4) 0 var(--space-3);
}
.pg-bar-inner { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 36px); align-items: flex-end; }
.pg-group { display: flex; flex-direction: column; gap: 6px; }
.pg-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: #d8bcf4;
}
.pg-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.pg-opt {
  font: inherit; font-size: 12.5px; font-weight: 700; min-height: 40px; padding: 8px 12px;
  background: transparent; color: var(--color-neutral-200);
  border: 1px solid rgba(250, 248, 252, 0.28); cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
/* The control chrome is deliberately hard-coded rather than tokenised. It
   was reading the same accent it is previewing, so choosing the ink palette
   painted the selected state black on a black bar and the selection vanished.
   The controls have to stay legible whatever is being previewed. */
.pg-opt:hover { border-color: #d8bcf4; color: #fff; }
.pg-opt.is-on { background: #6e14b2; border-color: #6e14b2; color: #fff; }
.pg-opt:focus-visible { outline: 2px solid #d8bcf4; outline-offset: 2px; }
.pg-reset {
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent; color: #d8bcf4; border: 0; cursor: pointer;
  min-height: 40px; padding: 8px 4px; margin-left: auto; text-decoration: underline;
}
.pg-note { font-size: 12.5px; line-height: 1.5; color: var(--color-neutral-400); margin-top: var(--space-3); }

/* What the controls actually move. */
body[data-pg] .h-hero,
body[data-pg] .h-sec-sm,
body[data-pg] .path-title {
  font-weight: var(--pg-weight, 900);
  letter-spacing: var(--pg-track, -0.035em);
  line-height: var(--pg-lh, 0.96);
}
body[data-pg] .hero .h-hero { font-size: calc(clamp(38px, 4.9vw, 72px) * var(--pg-scale, 1)); }
body[data-pg] .h-sec-sm     { font-size: calc(clamp(24px, 2.6vw, 36px) * var(--pg-scale, 1)); line-height: 1.05; }
body[data-pg] .path-title   { font-size: calc(clamp(19px, 1.6vw, 23px) * var(--pg-scale, 1)); line-height: 1.15; }

@media (max-width: 700px) {
  .pg-bar-inner { gap: var(--space-4); }
  .pg-reset { margin-left: 0; }
}

/* Under-construction notices. Restrained rather than apologetic — the point
   is to set expectation, not to draw the eye away from the rest of the page. */
.notice {
  border-left: 4px solid var(--color-accent);
  padding: var(--space-4) 0 var(--space-4) clamp(16px, 2vw, 24px);
  font-size: 15px; line-height: 1.7; color: var(--color-neutral-800);
  background: var(--color-accent-100);
}

/* ── answer pages ──────────────────────────────────────────────────────
   The migrated question tree. The lead paragraph is the answer an engine
   can lift whole, so it is set larger than the body and sits directly
   under the H1 with nothing between them. */
.answer-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(32px, 4vw, 64px); align-items: start;
}
.answer-main { max-width: 74ch; }
.answer-lead {
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; font-weight: 500;
  color: var(--color-text); border-left: 4px solid var(--color-accent);
  padding-left: clamp(16px, 2vw, 24px); margin: 0 0 var(--space-6);
}
.answer-main .body { margin-bottom: var(--space-4); }
.answer-sub { margin-top: var(--space-8); margin-bottom: var(--space-4); }
.answer-list { margin: 0 0 var(--space-6); padding-left: 1.15em; list-style: disc; }
.answer-list li { margin-bottom: var(--space-3); line-height: 1.6; }
.answer-meta {
  font-size: 13px; line-height: 1.6; color: var(--color-neutral-700);
  border-top: 2px solid var(--color-divider); padding-top: var(--space-4);
  margin-top: var(--space-8);
}
.answer-meta a { color: var(--color-neutral-800); text-decoration: underline; text-underline-offset: 2px; }

.answer-index { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--color-text); }
.answer-index li { border-bottom: 1px solid var(--color-neutral-300); }
.answer-index a { display: block; padding: var(--space-4) 0; }
.answer-index a:hover .answer-index-q { color: var(--color-accent); }
.answer-index-q { display: block; font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--color-text); }
.answer-index-a { display: block; font-size: 13.5px; line-height: 1.55; color: var(--color-neutral-700); margin-top: 4px; }
.answer-index.-tight a { padding: var(--space-3) 0; }
.answer-index--cols {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  column-gap: clamp(24px, 3vw, 48px);
  border-top: 0;
}
.answer-index--cols li { border-top: 2px solid var(--color-text); border-bottom: 0; }

/* FAQ block — a question in a heading with its answer directly beneath is the
   single most liftable shape on the page, and it carries the questions too
   narrow to deserve a page of their own. */
.faq-list { border-top: 2px solid var(--color-text); margin-bottom: var(--space-6); }
.faq-item { border-bottom: 1px solid var(--color-neutral-300); padding: var(--space-6) 0; }
.faq-q {
  font-family: var(--font-heading); font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em; line-height: 1.35; margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.faq-a { font-size: 15px; line-height: 1.7; color: var(--color-neutral-800); margin: 0; }

.answer-cta {
  border: 2px solid var(--color-text); padding: clamp(20px, 2.5vw, 28px);
  position: sticky; top: 96px;
}
.answer-cta-lead {
  font-family: var(--font-heading); font-size: 19px; font-weight: 800;
  letter-spacing: -0.015em; margin: 0 0 var(--space-3);
}
.answer-cta-row { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.answer-cta .answer-meta { margin-top: var(--space-6); }

@media (max-width: 900px) {
  .answer-wrap { grid-template-columns: minmax(0, 1fr); }
  .answer-cta { position: static; }
}

/* ── intake form ───────────────────────────────────────────────────────── */
.chat-intake {
  border: 2px solid var(--color-text);
  background: var(--color-bg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-intake-lead {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-neutral-700); margin: 0 0 2px;
}
.chat-intake label {
  font-size: 12px; font-weight: 700; color: var(--color-neutral-800); margin-top: 4px;
}
.chat-intake input {
  font: inherit; font-size: 14px; padding: 10px 12px; min-height: 44px;
  border: 2px solid var(--color-neutral-400); background: var(--color-neutral-100);
  color: var(--color-text); border-radius: 0; width: 100%;
}
.chat-intake input:focus-visible { border-color: var(--color-accent); outline: none; }
.chat-intake-legend {
  font-size: 12px; font-weight: 700; color: var(--color-neutral-800); margin-top: 8px;
}
.chat-mediums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.chat-medium {
  font: inherit; font-size: 12px; font-weight: 700; min-height: 44px; padding: 6px 4px;
  border: 2px solid var(--color-neutral-400); background: var(--color-neutral-100);
  color: var(--color-neutral-800); cursor: pointer;
}
.chat-medium:hover { border-color: var(--color-accent); color: var(--color-accent); }
.chat-medium.is-on {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-neutral-100);
}
.chat-medium:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.chat-intake-error { font-size: 12.5px; font-weight: 700; color: var(--color-danger, #B00020); margin: 4px 0 0; }
.chat-intake-go {
  font: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  min-height: 48px; margin-top: 10px; cursor: pointer;
  background: var(--color-accent); color: var(--color-neutral-100); border: 2px solid var(--color-accent);
}
.chat-intake-go:hover:not(:disabled) { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.chat-intake-go:disabled { opacity: 0.65; cursor: default; }
.chat-intake-note { font-size: 11.5px; line-height: 1.45; color: var(--color-neutral-700); margin: 8px 0 0; }

.chat-panel.is-gated .chat-input { cursor: not-allowed; }

.chat-dots { display: inline-flex; gap: 4px; padding: 3px 0; }
.chat-dots i { width: 6px; height: 6px; background: var(--color-neutral-500); animation: chat-blink 1.2s infinite; }
.chat-dots i:nth-child(2) { animation-delay: 0.18s; }
.chat-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat-blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .chat-dots i { animation: none; opacity: 0.6; }
  .chat-launcher { transition: none; }
}

.chat-form {
  display: flex; align-items: flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-neutral-300);
}
.chat-input {
  flex: 1; resize: none; min-height: 44px; max-height: 120px;
  padding: 11px 12px; font-family: var(--font-body); font-size: 14.5px; line-height: 1.45;
  color: var(--color-text); background: var(--color-neutral-100);
  border: 2px solid var(--color-divider);
}
.chat-input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.chat-input:disabled { opacity: 0.6; }
.chat-send {
  width: 44px; height: 44px; flex: none; cursor: pointer;
  background: var(--color-accent); color: var(--color-neutral-100); border: 0; font-size: 17px;
}
.chat-send:hover:not(:disabled) { background: var(--color-accent-600); }
.chat-send:disabled { opacity: 0.45; cursor: default; }

.chat-disclaimer {
  padding: 0 var(--space-6) var(--space-4);
  font-size: 11.5px; line-height: 1.45; color: var(--color-neutral-700);
}
.chat-disclaimer a { color: var(--color-accent-700); font-weight: 700; }

@media (max-width: 560px) {
  .chat-panel {
    right: 8px; left: 8px; bottom: 8px; width: auto;
    max-height: min(78vh, calc(100vh - 90px));
  }
  .chat-launcher { right: 8px; bottom: 8px; padding: 14px 18px; }
  .chat-launcher-label { font-size: 13.5px; }
  .chat-disclaimer { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Services mega-menu
   A disclosure panel attached to the header, full-bleed so the columns line
   up with the page grid rather than floating under one nav item.
   ════════════════════════════════════════════════════════════════════════ */
.nav-trigger {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--color-text);
}
.nav-trigger:hover { color: var(--color-accent); }
.nav-trigger .chev {
  width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 200ms var(--ease);
}
.nav-trigger[aria-expanded="true"] .chev { transform: rotate(-135deg); margin-top: 2px; }
/* The trigger stretches to the full header height like the sibling links, so
   the marker sits at bottom: 0 exactly as theirs does. It stops short of the
   chevron rather than running under it. */
.nav-trigger[aria-current="page"]::after,
.nav-trigger[aria-expanded="true"]::after {
  content: ""; position: absolute; left: 0; right: 15px; bottom: 0;
  height: 3px; background: var(--color-accent);
}

.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 45;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-text);
  box-shadow: 0 24px 48px rgba(27, 20, 32, 0.16);
}
.mega[hidden] { display: none; }
.mega-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(24px, 3vw, 56px);
  padding-top: clamp(28px, 3vw, 40px); padding-bottom: clamp(28px, 3vw, 40px);
}
.mega-col { min-width: 0; }
.mega-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-text);
  font-family: var(--font-heading); font-size: 17px; font-weight: 900;
  letter-spacing: -0.015em; color: var(--color-text);
}
.mega-head:hover { color: var(--color-accent); }
.mega-head-go { font-size: 15px; color: var(--color-accent); }
.mega-note { font-size: 13px; line-height: 1.5; color: var(--color-neutral-700); margin-top: var(--space-3); }
.mega-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.mega-list a {
  display: block; position: relative; padding: 9px 0 9px 16px;
  font-size: 14.5px; font-weight: 600; color: var(--color-text);
  border-bottom: 1px solid var(--color-neutral-300);
}
.mega-list li:last-child a { border-bottom: 0; }
.mega-list a::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; background: var(--color-accent-300);
  transition: background 160ms var(--ease);
}
.mega-list a:hover { color: var(--color-accent-700); }
.mega-list a:hover::before { background: var(--color-accent); }
.mega-list a[aria-current="page"] { color: var(--color-accent-700); }
.mega-list a[aria-current="page"]::before { background: var(--color-accent); }

.mega-aside {
  background: var(--color-surface); padding: clamp(20px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.mega-aside-title { font-family: var(--font-heading); font-size: 17px; font-weight: 800; letter-spacing: -0.015em; }
.mega-aside-body { font-size: 13.5px; line-height: 1.5; color: var(--color-neutral-800); }
.mega-aside .b { margin-top: auto; }
.mega-phone {
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--color-accent-700); text-align: center; padding: 6px 0;
}

/* Mobile: the dropdown becomes nested groups inside the existing menu. */
.mobile-group { border-bottom: 1px solid var(--color-neutral-300); }
.mobile-group > summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 14px 30px 14px 0; font-size: 18px; font-weight: 700; color: var(--color-text);
}
.mobile-group > summary::-webkit-details-marker { display: none; }
.mobile-group > summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--color-accent);
}
.mobile-group[open] > summary::after { content: "\2013"; }
.mobile-menu .sub {
  display: block; padding: 11px 0 11px 16px; font-size: 15.5px; font-weight: 600;
  border-bottom: 1px solid var(--color-neutral-200); color: var(--color-neutral-800);
}
.mobile-menu .sub-all { color: var(--color-accent-700); font-weight: 800; border-bottom: 0; }

@media (max-width: 1180px) {
  .mega-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mega-aside { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .mega-aside-body { flex: 1 1 320px; }
  .mega-aside .b { margin-top: 0; }
}

/* ── service pages ─────────────────────────────────────────────────────── */
.svc-body { display: flex; flex-direction: column; gap: clamp(36px, 4.5vw, 60px); }
.svc-block-title { padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-text); margin-bottom: var(--space-6); }
.svc-block .body + .body { margin-top: var(--space-4); }

.detail-list { display: flex; flex-direction: column; }
.detail-item {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(16px, 2.4vw, 36px);
  padding: var(--space-6) 0; border-bottom: 1px solid var(--color-neutral-300);
}
.detail-item:first-child { border-top: 1px solid var(--color-neutral-300); }
.detail-item h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; }
.detail-item p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); }
@media (max-width: 760px) { .detail-item { grid-template-columns: 1fr; gap: var(--space-2); } }

.seq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.seq-step {
  display: grid; grid-template-columns: 52px 1fr; gap: var(--space-4);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--color-neutral-300);
}
.seq-num { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--color-accent-700); padding-top: 4px; }
.seq-step b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.seq-step span { display: block; font-size: 14.5px; line-height: 1.55; color: var(--color-neutral-800); margin-top: 3px; }

.rail-phone { display: block; text-align: center; margin-top: var(--space-3); font-size: 13px; font-weight: 700; color: var(--color-accent-300); }
.rail-phone:hover { color: var(--color-neutral-100); }

.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.svc-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: clamp(22px, 2.4vw, 30px); border: 2px solid var(--color-divider);
  color: var(--color-text); background: var(--color-bg);
  transition: border-color 220ms var(--ease), transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.svc-card:hover {
  color: var(--color-text); border-color: var(--color-text);
  transform: translateY(-3px); box-shadow: 0 18px 40px rgba(27, 20, 32, 0.12);
}
.svc-card-num { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--color-accent-700); }
.svc-card h3 { font-size: clamp(19px, 1.8vw, 23px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; }
.svc-card p { font-size: 14.5px; line-height: 1.55; color: var(--color-neutral-800); }
.svc-card-go {
  margin-top: auto; padding-top: var(--space-3);
  font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent-700);
}

.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.rel-card {
  display: flex; flex-direction: column; gap: var(--space-3); justify-content: space-between;
  padding: var(--space-6); border: 2px solid var(--color-divider); color: var(--color-text);
  transition: border-color 200ms var(--ease);
}
.rel-card:hover { border-color: var(--color-text); color: var(--color-text); }
.rel-card b { font-family: var(--font-heading); font-size: 18px; font-weight: 800; letter-spacing: -0.015em; }
.rel-card span { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }

.footer-col .head a { font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; }
.footer-col .head a:hover { color: var(--color-accent); }

/* ── assistant action buttons ──────────────────────────────────────────── */
.chat-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 2px; }
.chat-action {
  display: inline-flex; align-items: center; min-height: 40px; padding: 9px 14px;
  background: var(--color-bg); border: 2px solid var(--color-accent-300);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--color-accent-700); cursor: pointer; text-align: left;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.chat-action:hover {
  background: var(--color-accent); border-color: var(--color-accent);
  color: var(--color-neutral-100);
}
.chat-action--call { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-neutral-100); }
.chat-action--call:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-neutral-100); }
.chat-bubble strong { font-weight: 800; }
.chat-bubble a { color: var(--color-accent-700); font-weight: 700; }
.chat-msg--user .chat-bubble a { color: var(--color-neutral-100); }
@media (max-width: 560px) { .chat-action { min-height: 44px; } }

/* ── consent bar ────────────────────────────────────────────────────────
   Drawn by assets/js/consent.js, so these classes appear in no static HTML.
   Sits above the chat launcher and stops short of it on a phone. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) clamp(16px, 4vw, 40px);
  background: var(--ink-deep); color: var(--color-neutral-100);
  border-top: 2px solid var(--color-accent);
}
.consent-text {
  margin: 0; font-size: 13.5px; line-height: 1.55; max-width: 78ch;
  color: var(--color-neutral-300);
}
.consent-text a { color: var(--color-accent-300); text-decoration: underline; }
.consent-text a:hover { color: var(--color-neutral-100); }
.consent-row { display: flex; gap: var(--space-3); flex: none; }
.consent-btn {
  font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  padding: 11px 20px; border-radius: 0; cursor: pointer; border: 2px solid transparent;
}
.consent-btn-go { background: var(--color-accent); color: var(--color-neutral-100); border-color: var(--color-accent); }
.consent-btn-go:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.consent-btn-quiet { background: transparent; color: var(--color-neutral-100); border-color: var(--color-neutral-600); }
.consent-btn-quiet:hover { border-color: var(--color-neutral-100); }
.consent-btn:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 2px; }
/* The chat launcher is fixed to the same corner and sits above this bar, so
   while the bar is up it covers the Decline button. consent.js measures the
   bar and sets --consent-h; the launcher moves clear of it and moves back
   when the bar goes. */
.consent-open .chat-launcher { bottom: calc(var(--consent-h, 0px) + clamp(16px, 3vw, 28px)); }
@media (max-width: 620px) {
  .consent-row { width: 100%; }
  .consent-btn { flex: 1; }
}