/* ============================================================
   Shuhail Ahamed — Attorney at Law
   Visual system matched to catalystbehavioral.com (measured values):
   flat #f7f7f7 canvas, neutral grotesque, black ink, restrained type
   scale (hero 76 / heading 44 / lead 24 / body 15-16), pill nav that
   expands inline, 20px cards, 30px panels, 26px white rows.
   ============================================================ */

:root {
  /* Flat canvas — separation comes from shadow + white pills, not color
     (matches Catalyst: canvas, panels and nav are all #f7f7f7). */
  --canvas: #f7f7f7;
  --panel:  #f7f7f7;
  --white:  #ffffff;
  --ink:    #000000;
  --ink-2:  #2b2b2b;
  --muted:  #8c8c8c;
  --muted-2:#b3b3b3;
  --line:   rgba(0, 0, 0, 0.10);

  /* Radii (measured on Catalyst) */
  --r-card: 20px;
  --r-panel: 30px;
  --r-row: 26px;
  --r-nav: 10px;
  --r-pill: 999px;

  /* Type scale (measured on Catalyst desktop) */
  --fs-hero:  clamp(2.6rem, 1.4rem + 4.4vw, 4.75rem); /* → 76px */
  --fs-h2:    clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); /* → 44px */
  --fs-lead:  clamp(1.3rem, 1.15rem + 0.55vw, 1.5rem);  /* → 24px */
  --fs-label: 0.9375rem;                                 /* 15px */
  --ls-tight: -0.02em;   /* big text */
  --ls-small: -0.01em;   /* small text */

  --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.05), 0 6px 18px -12px rgba(15, 15, 15, 0.14);
  --shadow-md: 0 2px 4px rgba(15, 15, 15, 0.05), 0 16px 36px -18px rgba(15, 15, 15, 0.24);

  --maxw: 1320px;
  --gutter: clamp(1.15rem, 4vw, 3.25rem);

  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(0.15, 0.9, 0.34, 0.95); /* Catalyst's signature UI easing */
}

* { box-sizing: border-box; }

/* Smooth page in/out transitions between documents (progressive enhancement —
   browsers without support just navigate normally). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .32s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .42s var(--ease) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }

/* No CSS scroll-behavior: smooth — Lenis owns smoothing (see app.js). */
html { -webkit-text-size-adjust: 100%; }

/* Lenis (vendored: /vendor/lenis.min.js) required styles */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--canvas);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: var(--ls-small);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: var(--ls-tight); line-height: 1.04; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: 8px;
}
.skip:focus { left: 1rem; top: 1rem; }

/* small pill label above each section (Catalyst: 15px, subtle pill) */
.chip {
  display: inline-block; background: var(--white); color: var(--ink);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-small);
  padding: .42rem .85rem; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
}

/* ---------------- NAV (pill that expands inline) ---------------- */
.nav {
  position: fixed; top: clamp(.9rem, 2vw, 1.25rem); left: clamp(.9rem, 2vw, 1.25rem);
  z-index: 90;
}
.nav-inner {
  display: flex; align-items: stretch; background: var(--panel);
  border-radius: var(--r-nav); box-shadow: var(--shadow-md);
}
.nav-brand, .nav-menu { display: flex; align-items: center; gap: .55rem; padding: 0 1.35rem; height: 56px; }
.nav-brand { font-size: 1rem; font-weight: 500; color: var(--ink); }
.nav-brand .mark { width: 21px; height: 21px; flex: none; }
.nav-divider { width: 1px; background: var(--line); flex: none; }

/* inline links — collapsed by default; revealed purely by the pill's width
   expansion. The reference site does NOT animate the links themselves (no
   stagger, no fade) — only the container width, clipped by overflow. */
.nav-links {
  display: flex; align-items: stretch; overflow: hidden;
  max-width: 0; opacity: 0; will-change: max-width;
  transition: max-width .6s cubic-bezier(0.16, 1, 0.3, 1), opacity .45s var(--ease);
}
.nav.open .nav-links { max-width: 760px; opacity: 1; }
.nav-links a {
  display: flex; align-items: center; padding: 0 1rem; height: 56px; white-space: nowrap;
  font-size: var(--fs-label); font-weight: 500; color: var(--ink); position: relative;
  transition: color .3s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 17px; height: 1.5px;
  background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-divider-links { display: none; }
.nav.open .nav-divider-links { display: block; }

.nav-menu {
  background: none; border: 0; color: var(--ink); font-size: var(--fs-label); font-weight: 500;
  border-radius: 0 var(--r-nav) var(--r-nav) 0; transition: background .3s var(--ease), color .3s var(--ease);
}
.nav-menu:hover { background: rgba(0,0,0,.04); }
/* When open, the "Close Menu" state is muted grey (matches the reference) */
.nav.open .nav-menu { color: #c6c6c6; }
.nav.open .nav-menu:hover { color: var(--ink); }
/* icon crossfade: dots ↔ X overlaid, opacity 0.3s (matches the reference toggle).
   Rotating hover: the whole icon spins a quarter-turn on hover (Menu and Close). */
.nav-menu .menu-ico { position: relative; width: 16px; height: 15px; display: inline-grid; place-items: center; transition: transform .45s var(--ease); }
.nav-menu:hover .menu-ico { transform: rotate(90deg); }
.nav-menu .dots { position: absolute; display: grid; grid-template-columns: repeat(3, 2.5px); gap: 2.5px; transition: opacity .3s var(--ease); }
.nav-menu .dots i { width: 2.5px; height: 2.5px; background: var(--ink); display: block; } /* square grid, matches the reference icon */
.nav-menu .menu-x { position: absolute; opacity: 0; transition: opacity .3s var(--ease); }
.nav.open .nav-menu .dots { opacity: 0; }
.nav.open .nav-menu .menu-x { opacity: 1; }
.nav-menu .label-close { display: none; }
.nav.open .nav-menu .label-open { display: none; }
.nav.open .nav-menu .label-close { display: inline; }

/* ---------------- HERO ---------------- */
.hero { min-height: 90svh; display: flex; align-items: flex-end; padding-block: 8rem clamp(3rem, 7vw, 6rem); }
.hero .wrap { width: 100%; }

/* Background video hero. Text sits bottom-left; the scrim keeps the bottom
   canvas-light so black text stays readable, while the top reveals the video.
   Falls back cleanly to the flat canvas if the video is absent. */
.hero.has-video { position: relative; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: var(--canvas); }
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--canvas) 6%, rgba(247,247,247,0.74) 38%, rgba(247,247,247,0.30) 70%, rgba(247,247,247,0.08) 100%); }
.hero.has-video .wrap { position: relative; z-index: 2; }
.hero h1 {
  font-size: var(--fs-hero); letter-spacing: var(--ls-tight); line-height: 1.0;
  text-wrap: balance; max-width: 15ch;
}
.hero h1 .l { display: block; overflow: clip; }
.hero h1 .l > span { display: block; }

/* ---------------- SECTION SHELL ---------------- */
section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.sec-label { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

/* ---------------- INTRO (asymmetric big text — Catalyst: 24px) ---------------- */
.intro .wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.5rem, 4vw, 3rem); }
.intro-lead {
  grid-column: 2; font-size: var(--fs-lead); line-height: 1.28;
  letter-spacing: var(--ls-tight); color: var(--ink); text-wrap: pretty;
}
.intro-lead .soft { color: var(--muted); }
/* Home #about portrait — fills the first grid column, matches the CTA treatment */
.intro .wrap { align-items: start; }
.intro-portrait { overflow: hidden; background: #e8e8e9; box-shadow: 0 4px 8px rgba(15, 15, 15, .05), 0 26px 52px -24px rgba(15, 15, 15, .30); }
.intro-portrait img { display: block; width: 100%; height: auto; transition: transform .85s var(--ease); will-change: transform; }
.intro-portrait:hover img { transform: scale(1.035); }

/* About page — portrait band (centered, image only) */
.about-portrait { padding-block: clamp(1rem, 3vw, 2.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.about-portrait .wrap { display: flex; justify-content: center; }
.portrait { overflow: hidden; width: 100%; max-width: clamp(400px, 48vw, 640px); background: #e8e8e9; box-shadow: 0 4px 8px rgba(15, 15, 15, .05), 0 40px 78px -26px rgba(15, 15, 15, .36); }
.portrait img { display: block; width: 100%; height: auto; transition: transform .9s var(--ease); will-change: transform; }
.portrait:hover img { transform: scale(1.035); }
/* About page hero — text left, portrait right; columns share top & bottom edge */
.detail-hero.about-hero .wrap { grid-template-columns: 1.12fr 0.78fr; align-items: stretch; gap: clamp(2rem, 5vw, 4.5rem); }
.about-text { display: grid; gap: clamp(1.15rem, 2.4vw, 1.7rem); align-content: start; }
.about-text .chip { justify-self: start; }
.about-text h1 { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); line-height: 1.08; max-width: 16ch; }
.about-text .detail-lead { display: grid; gap: 1.15rem; margin-top: .25rem; }
.detail-hero.about-hero .portrait { align-self: start; position: relative; width: 100%; max-width: none; margin: 0; border-radius: 4px; overflow: hidden; }
.detail-hero.about-hero .portrait img { position: static; inset: auto; width: 100%; height: auto; object-fit: initial; }
@media (max-width: 940px) {
  .detail-hero.about-hero .wrap { grid-template-columns: 1fr; align-items: start; }
  .detail-hero.about-hero .portrait { position: static; max-width: 460px; margin-top: .4rem; }
  .detail-hero.about-hero .portrait img { position: static; height: auto; }
}
.about-hero .head .portrait { max-width: 100%; margin-top: clamp(1.5rem, 3vw, 2.5rem); }


/* ---------------- PRACTICE AREAS (card grid) ---------------- */
.areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.area {
  position: relative; background: var(--panel); border-radius: var(--r-card);
  padding: 1.5rem 1.5rem 1.4rem; min-height: 210px; display: flex; flex-direction: column;
  justify-content: space-between; box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s var(--ease);
}
.area:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); background: var(--white); }
.area .num { font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; }
.area h3 { font-size: clamp(1.2rem, 1rem + .55vw, 1.4rem); letter-spacing: var(--ls-tight); }
.area p { margin-top: .5rem; font-size: .9375rem; color: var(--muted); line-height: 1.42; }
.area .arrow {
  position: absolute; top: 1.4rem; right: 1.4rem; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); color: var(--ink);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
/* slide-through: the visible ↗ exits top-right, a duplicate enters from bottom-left */
.area .arrow svg { transition: transform .45s var(--ease); }
.area .arrow::after {
  content: ""; position: absolute; inset: 0; background: center / 14px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 11L11 3M11 3H4M11 3v7' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: translate(-24px, 24px); transition: transform .45s var(--ease);
}
.area:hover .arrow { background: var(--ink); color: var(--white); border-color: var(--ink); }
.area:hover .arrow svg { transform: translate(24px, -24px); }
.area:hover .arrow::after { transform: translate(0, 0); }

/* ---------------- SERVICES PANEL ---------------- */
.services-panel {
  background: var(--panel); border-radius: var(--r-panel); padding: clamp(1.8rem, 4vw, 3.25rem);
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4rem); box-shadow: var(--shadow-sm);
}
.services-panel h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); line-height: 1.2; max-width: 14ch; }
.services-panel .rlabel { color: var(--muted); font-size: 1.25rem; margin-bottom: 1.1rem; letter-spacing: var(--ls-tight); }
.rows { display: grid; gap: .5rem; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px;
  background: var(--white); border-radius: var(--r-row); padding: .5rem .5rem .5rem 1.25rem;
  box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.row:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.row span { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-small); }
.row .ico {
  width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), transform .45s var(--ease);
}
.row:hover .ico { background: var(--ink); color: var(--white); transform: translateX(3px); }
/* Home practice + matter cards are now links */
a.area, a.row { text-decoration: none; color: inherit; }

/* Services page — full index directory (editorial, magic-circle standard) */
.services-index { padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.services-index .index-lead { max-width: 62ch; color: var(--muted); font-size: 1.06rem; line-height: 1.6; margin-top: 1rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem); }
.index-head { display: flex; align-items: baseline; gap: .65rem; text-decoration: none; color: var(--ink); padding-bottom: .8rem; margin-bottom: .8rem; border-bottom: 1.5px solid var(--ink); }
.index-head .ig-num { font-size: var(--fs-label); color: var(--muted); font-variant-numeric: tabular-nums; }
.index-head h3 { font-size: clamp(1.08rem, .95rem + .4vw, 1.28rem); letter-spacing: var(--ls-tight); flex: 1; line-height: 1.15; }
.index-head .ig-arrow { color: var(--muted); transition: transform .4s var(--ease), color .4s var(--ease); }
.index-head:hover .ig-arrow { color: var(--ink); transform: translate(3px, -3px); }
.index-list { list-style: none; display: grid; gap: 0; }
.index-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; color: #3a3a3a; font-size: .95rem; line-height: 1.3; padding: .55rem 0; border-bottom: 1px solid var(--line); transition: color .3s var(--ease), padding .3s var(--ease); }
.index-list li:last-child a { border-bottom: 0; }
.index-list a::after { content: "\2192"; color: var(--muted); opacity: 0; transform: translateX(-5px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.index-list a:hover { color: var(--ink); padding-left: .35rem; }
.index-list a:hover::after { opacity: 1; transform: translateX(0); }
@media (max-width: 1024px) { .index-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .index-grid { grid-template-columns: 1fr; } }

/* ---------------- MANUFACTURING FEATURE (big dark panel) ---------------- */
.mfg-feature { padding-block: clamp(1rem, 3vw, 3rem); }
.mfg-panel {
  background: var(--panel); color: var(--ink); border-radius: var(--r-panel);
  padding: clamp(2.4rem, 5vw, 5rem); box-shadow: var(--shadow-sm);
}
.mfg-panel .kicker {
  display: inline-block; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-small);
  color: var(--muted); margin-bottom: 1.4rem;
}
.mfg-panel h2 {
  font-size: clamp(2rem, 1.1rem + 3.6vw, 4rem); letter-spacing: -0.03em; line-height: 1.04;
  color: var(--ink); max-width: 18ch;
}
.mfg-panel .lead {
  margin-top: 1.4rem; font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); line-height: 1.5;
  color: #525252; max-width: 62ch;
}
.mfg-tags { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 10px; }
.mfg-tags span {
  background: var(--white); border-radius: var(--r-pill); padding: .55rem 1.05rem; box-shadow: var(--shadow-sm);
  font-size: .9rem; font-weight: 500; color: var(--ink); letter-spacing: var(--ls-small);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.mfg-tags span:hover { background: var(--ink); color: var(--white); }

/* ---------------- CTA ---------------- */
.cta .wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1rem, 2.5vw, 1.5rem); align-items: stretch; }
.cta-portrait {
  border-radius: 4px; overflow: hidden; background: linear-gradient(155deg, #14202b, #223140 45%, #2c3a46);
  aspect-ratio: 4 / 5; align-self: start; position: relative; box-shadow: var(--shadow-md); display: grid; place-items: center;
  transition: box-shadow .55s var(--ease);
}
.cta-portrait::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 50% 0, transparent, rgba(0,0,0,.35)); }
.cta-portrait .mono { font-size: clamp(3rem, 6vw, 5rem); color: rgba(255,255,255,.9); font-weight: 500; letter-spacing: -0.04em; z-index: 1; }
/* Slow editorial zoom-in on hover — contained by the frame, site easing. */
.cta-portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform .85s var(--ease); will-change: transform; }
.cta-portrait:hover img { transform: scale(1.045); }
.cta-portrait:hover { box-shadow: 0 4px 8px rgba(15, 15, 15, .06), 0 34px 64px -22px rgba(15, 15, 15, .42); }
.cta-card {
  background: var(--panel); border-radius: 4px; padding: clamp(1.8rem, 4vw, 3rem);
  display: flex; flex-direction: column; justify-content: center; gap: 2.5rem; box-shadow: var(--shadow-sm);
}
.cta-card p { font-size: var(--fs-lead); line-height: 1.28; letter-spacing: var(--ls-tight); color: var(--ink); text-wrap: pretty; }

/* buttons — Catalyst uses a small, compact pill */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; width: max-content;
  background: var(--ink); color: var(--white); border: 0; border-radius: var(--r-pill);
  padding: .6rem 1.15rem; font-size: .875rem; font-weight: 500;
  transition: background-color .3s var(--ease); /* reference site: bg-color only, no lift */
}
.btn:hover { background-color: #262626; }
.btn svg { transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn.ghost { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn.ghost:hover { background-color: var(--panel); }

/* ---------------- CONTACT ---------------- */
.contact .wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); line-height: 1.1; max-width: 12ch; }
.contact-details { margin-top: 2rem; display: grid; gap: 1.1rem; }
.contact-details a, .contact-details div { display: flex; gap: .8rem; align-items: baseline; color: var(--ink); font-size: 1rem; }
.contact-details .k { color: var(--muted); font-size: .8125rem; min-width: 4.5rem; }
.contact-details a:hover { color: var(--muted); }

.form { background: var(--panel); border-radius: var(--r-panel); padding: clamp(1.6rem, 3.5vw, 2.6rem); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 1.05rem; }
.field label { display: block; font-size: .8125rem; color: var(--muted); margin-bottom: .5rem; }
.field input, .field textarea {
  width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: .95rem 1.05rem; font: inherit; color: var(--ink); letter-spacing: var(--ls-small);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.field textarea { resize: vertical; min-height: 130px; }
.field.invalid input, .field.invalid textarea { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.1); }
.field .err { display: none; color: #c0392b; font-size: .8rem; margin-top: .45rem; }
.field.invalid .err { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { width: 100%; justify-content: center; padding-block: .95rem; font-size: .9375rem; margin-top: .3rem; }
.form .btn[disabled] { opacity: .6; pointer-events: none; }
.form-note { margin-top: 1rem; font-size: .85rem; color: var(--muted); text-align: center; }
.form-status { margin-top: 1rem; font-size: .95rem; border-radius: 12px; padding: .9rem 1.1rem; display: none; }
.form-status.show { display: block; }
.form-status.ok { background: #edf6ee; color: #1f6b34; }
.form-status.bad { background: #fbeceb; color: #a5352a; }

/* ---------------- FOOTER (Catalyst: flat 15px) ---------------- */
.footer { padding-block: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 3vw, 2.5rem); }
.footer .wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.footer h4 { font-size: var(--fs-label); font-weight: 500; margin-bottom: 1.1rem; }
.footer .desc { color: var(--muted); max-width: 34ch; line-height: 1.5; margin-top: .85rem; font-size: .9375rem; }
.footer .fbrand { display: flex; align-items: center; gap: .55rem; font-size: 1rem; font-weight: 500; }
.footer .fbrand .mark { width: 22px; height: 22px; }
.footer .col p, .footer .col a { color: var(--muted); line-height: 1.85; font-size: .9375rem; }
.footer .col a:hover { color: var(--ink); }
.foot-bottom { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; color: var(--muted-2); font-size: .8125rem; }

/* ---------------- SERVICES DETAIL PAGE ---------------- */
.detail-hero { padding-block: clamp(7rem, 12vw, 10.5rem) clamp(2.5rem, 5vw, 4.5rem); }
.detail-hero .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.detail-hero .head h1 { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); line-height: 1.08; max-width: 14ch; margin-top: 1.4rem; }
.detail-lead { display: grid; gap: 1.4rem; }
.detail-lead p { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.6rem); line-height: 1.32; letter-spacing: var(--ls-tight); color: var(--ink); }
.detail-lead p + p { color: var(--muted); }

.topic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.topic-card {
  position: relative; background: var(--panel); border-radius: var(--r-panel);
  padding: clamp(1.6rem, 3vw, 2.5rem); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; min-height: 340px;
  transition: box-shadow .4s var(--ease);
}
.topic-card:hover { box-shadow: var(--shadow-md); }
.topic-card.wide { grid-column: span 2; }
.topic-card h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); letter-spacing: var(--ls-tight); line-height: 1.1; max-width: 18ch; padding-right: 3.5rem; }
.topic-card .desc { margin-top: 1.1rem; color: #525252; font-size: 1rem; line-height: 1.5; max-width: 52ch; }
.topic-card .tags { margin-top: auto; padding-top: 1.7rem; display: flex; flex-wrap: wrap; gap: 6px; }
.topic-card .tag {
  display: inline-flex; align-items: center; height: 30px; padding: 0 15px;
  background: var(--white); border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
  font-size: .75rem; font-weight: 500; letter-spacing: var(--ls-small); color: var(--ink);
  transition: transform .25s var(--ease);
}
.topic-card .tag:hover { transform: translateY(-2px); }
a.tag { text-decoration: none; cursor: pointer; }
a.tag:hover { background: var(--ink); color: var(--white); }
.topic-card h3 a { color: inherit; text-decoration: none; }
.topic-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topic-card .card-arrow, .insight-card .card-arrow {
  position: absolute; top: clamp(1.6rem, 3vw, 2.5rem); right: clamp(1.6rem, 3vw, 2.5rem);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  overflow: hidden; border: 1px solid var(--line); color: var(--ink);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.topic-card .card-arrow svg, .insight-card .card-arrow svg { transition: transform .45s var(--ease); }
.topic-card .card-arrow::after, .insight-card .card-arrow::after {
  content: ""; position: absolute; inset: 0; background: center / 15px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 11L11 3M11 3H4M11 3v7' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: translate(-27px, 27px); transition: transform .45s var(--ease);
}
.topic-card:hover .card-arrow, .insight-card:hover .card-arrow { background: var(--ink); color: var(--white); border-color: var(--ink); }
.topic-card:hover .card-arrow svg, .insight-card:hover .card-arrow svg { transform: translate(27px, -27px); }
.topic-card:hover .card-arrow::after, .insight-card:hover .card-arrow::after { transform: translate(0, 0); }

/* Practice-map constellation (mirrors the reference detail-page diagram) */
.practice-map { padding-block: clamp(1rem, 3vw, 3rem) clamp(2rem, 5vw, 4rem); overflow: hidden; }
.map-stage {
  position: relative; width: 100%; max-width: 1080px; margin: 0 auto;
  aspect-ratio: 1200 / 700;
}
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-svg circle { fill: rgba(0, 0, 0, 0.02); stroke: rgba(0, 0, 0, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map-svg circle.c-big { stroke: rgba(0, 0, 0, 0.2); }
/* Structural interlinks between practice groups (drawn behind the circles). */
.map-links line {
  stroke: rgba(0, 0, 0, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 2 6; stroke-linecap: round;
  transition: stroke .4s var(--ease), stroke-width .4s var(--ease);
  animation: linkdrift 3.5s linear infinite;
}
@keyframes linkdrift { to { stroke-dashoffset: -16; } }
.map-item { position: absolute; transform: translate(-50%, -50%); }
.map-label {
  text-align: center; font-size: clamp(.9rem, .75rem + .45vw, 1.1rem); line-height: 1.12;
  color: var(--ink); letter-spacing: var(--ls-tight); width: max-content; max-width: 12ch;
}
.map-pill {
  display: inline-flex; align-items: center; height: 30px; padding: 0 15px; white-space: nowrap;
  background: var(--white); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); cursor: default;
  font-size: .72rem; font-weight: 500; letter-spacing: var(--ls-small); color: var(--ink);
  transition: box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.map-pill:hover { background: var(--ink); color: var(--white); box-shadow: var(--shadow-md); }
a.map-pill { cursor: pointer; }

/* Interactive practice labels (links) + circle highlight on hover */
a.map-label {
  display: inline-block; padding: .35rem .75rem; border-radius: 12px; text-decoration: none; color: var(--ink);
  transition: background .35s var(--ease), box-shadow .35s var(--ease); cursor: pointer;
}
a.map-label:hover, a.map-label:focus-visible { background: var(--white); box-shadow: var(--shadow-sm); outline: none; }
.map-svg circle { transition: fill .45s var(--ease), stroke .45s var(--ease); }
.map-stage:has(.map-label.arb:hover) #c-arb,
.map-stage:has(.map-label.lit:hover) #c-lit,
.map-stage:has(.map-label.re:hover) #c-re,
.map-stage:has(.map-label.corp:hover) #c-corp,
.map-stage:has(.map-label.reg:hover) #c-reg,
.map-stage:has(.map-label.tech:hover) #c-tech {
  fill: rgba(0, 0, 0, 0.045); stroke: rgba(0, 0, 0, 0.5); stroke-width: 1.5;
}
/* Hovering a practice lights up the groups it interlinks with. */
.map-stage:has(.map-label.arb:hover)  .map-links .l-arb,
.map-stage:has(.map-label.lit:hover)  .map-links .l-lit,
.map-stage:has(.map-label.re:hover)   .map-links .l-re,
.map-stage:has(.map-label.corp:hover) .map-links .l-corp,
.map-stage:has(.map-label.reg:hover)  .map-links .l-reg,
.map-stage:has(.map-label.tech:hover) .map-links .l-tech {
  stroke: rgba(0, 0, 0, 0.34); stroke-width: 1.5; stroke-dasharray: none;
}
/* Circles drift so the constellation feels alive (staggered, clearly visible). */
.map-svg circle { transform-box: fill-box; transform-origin: center; will-change: transform; }
@keyframes cfloatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(24px,-30px); } }
@keyframes cfloatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-28px,22px); } }
@keyframes cfloatC { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px,28px); } }
#c-arb  { animation: cfloatA 9s ease-in-out infinite; }
#c-lit  { animation: cfloatB 11s ease-in-out infinite; }
#c-re   { animation: cfloatC 10s ease-in-out infinite; }
#c-corp { animation: cfloatB 12s ease-in-out infinite .8s; }
#c-reg  { animation: cfloatA 10.5s ease-in-out infinite .5s; }
#c-tech { animation: cfloatC 11.5s ease-in-out infinite 1.4s; }
.map-card {
  width: clamp(220px, 24vw, 290px); background: var(--white); border-radius: 18px;
  box-shadow: var(--shadow-md); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .55rem;
}
.map-card .ln { height: 7px; border-radius: 4px; background: rgba(0, 0, 0, 0.09); }
.map-card .w30 { width: 30%; } .map-card .w40 { width: 40%; } .map-card .w55 { width: 55%; }
.map-card .w60 { width: 60%; } .map-card .w70 { width: 70%; } .map-card .w80 { width: 80%; } .map-card .w95 { width: 95%; }
/* legal-document motif: title bar, clause lines, signature + seal */
.map-card .doc-head { height: 11px; width: 48%; border-radius: 4px; background: var(--ink); margin-bottom: .35rem; }
.map-card .doc-foot { margin-top: .9rem; display: flex; align-items: flex-end; justify-content: space-between; }
.map-card .sign { color: var(--ink); flex: none; }
.map-card .seal {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ink);
  display: grid; place-items: center; flex: none;
}
.map-card .seal::after { content: ""; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink); }

/* ---------------- INTERACTIVE PRACTICE MAP (weighted circles) ---------------- */
.pmap { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; aspect-ratio: 1200 / 760; }
.pnode {
  position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; text-align: center;
  color: var(--ink); text-decoration: none;
  transition: transform .55s var(--ease), opacity .45s var(--ease), filter .45s var(--ease);
  will-change: transform;
}
.pnode .ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.014); border: 1px solid rgba(0, 0, 0, 0.12);
  transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.pnode .body { position: relative; z-index: 1; padding: 0 14%; display: grid; gap: .5rem; }
.pnode .t { font-size: clamp(.92rem, .78rem + .5vw, 1.3rem); letter-spacing: var(--ls-tight); line-height: 1.08; text-wrap: balance; }
.pnode .s { font-size: clamp(.66rem, .6rem + .2vw, .78rem); color: var(--muted); line-height: 1.5; letter-spacing: var(--ls-small); }
.pnode .go {
  justify-self: center; margin-top: .1rem; font-size: .7rem; font-weight: 500; color: var(--ink);
  display: inline-flex; align-items: center; gap: .3rem; opacity: 0; transform: translateY(4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.pnode:hover { transform: translate(-50%, -50%) scale(1.06); z-index: 5; }
.pnode:hover .ring { background: var(--white); border-color: var(--ink); box-shadow: var(--shadow-md); }
.pnode:hover .s { color: var(--ink-2); }
.pnode:hover .go { opacity: 1; transform: none; }
.pnode:focus-visible .ring { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, .12); }
/* When any node is hovered, quiet the others (modern :has; degrades gracefully). */
.pmap:has(.pnode:hover) .pnode:not(:hover) { opacity: .34; filter: grayscale(0.25); }

@media (max-width: 860px) {
  .pmap { aspect-ratio: auto; display: grid; gap: 10px; max-width: 540px; }
  .pnode { position: static; width: auto; height: auto; transform: none; border-radius: var(--r-card);
    background: var(--panel); box-shadow: var(--shadow-sm); padding: 1.1rem 1.3rem; place-items: start; text-align: left; }
  .pnode .ring { display: none; }
  .pnode .body { padding: 0; gap: .3rem; }
  .pnode:hover { transform: none; }
  .pmap:has(.pnode:hover) .pnode:not(:hover) { opacity: 1; filter: none; }
  .pnode .go { opacity: 1; transform: none; }
}

/* ---------------- INSIGHTS PAGE ---------------- */
.insight-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.insight-card {
  position: relative; background: var(--panel); border-radius: var(--r-panel);
  padding: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-direction: column; min-height: 270px;
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s var(--ease);
}
.insight-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); background: var(--white); }
.insight-card.wide { grid-column: span 2; }
.insight-card .cat { font-size: .8125rem; font-weight: 500; color: var(--muted); letter-spacing: var(--ls-small); }
.insight-card h3 { margin-top: .85rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: var(--ls-tight); line-height: 1.12; max-width: 22ch; }
.insight-card .dek { margin-top: .95rem; color: #525252; font-size: 1rem; line-height: 1.5; max-width: 54ch; }
.insight-card .meta { margin-top: auto; padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.insight-card .date { color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }

/* ---------------- INSIGHT ARTICLE (individual page) ---------------- */
.article-hero { padding-block: clamp(7rem, 12vw, 10rem) clamp(1.6rem, 3vw, 2.6rem); border-bottom: 1px solid var(--line); }
.article-hero .wrap { max-width: 880px; }
.article-back {
  display: flex; width: max-content; align-items: center; gap: .45rem; color: var(--muted); font-size: .875rem;
  margin-bottom: clamp(1.4rem, 3vw, 2rem); transition: color .2s var(--ease);
}
.article-back:hover { color: var(--ink); }
.article-back svg { transition: transform .3s var(--ease); }
.article-back:hover svg { transform: translateX(-3px); }
.article-hero .chip { margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem); }
.article-hero h1 { font-size: clamp(1.9rem, 1.25rem + 2.7vw, 3.15rem); letter-spacing: var(--ls-tight); line-height: 1.12; max-width: 24ch; }
.article-meta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; color: var(--muted); font-size: .9rem; }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); }

.article { padding-block: clamp(2.4rem, 5vw, 3.75rem) clamp(2.5rem, 5vw, 4rem); }
.article .wrap { max-width: 720px; }
.article .standfirst { font-size: clamp(1.22rem, 1.05rem + .7vw, 1.5rem); line-height: 1.42; letter-spacing: var(--ls-tight); color: var(--ink); text-wrap: pretty; }
.article p { font-size: 1.09rem; line-height: 1.7; color: #333; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
.article p + p { margin-top: 1.15rem; }
.article h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); letter-spacing: var(--ls-tight); line-height: 1.22; margin-top: clamp(2.2rem, 4vw, 3rem); margin-bottom: .85rem; }
.article h3 { font-size: 1.15rem; font-weight: 500; margin-top: 1.8rem; margin-bottom: .5rem; }
.article ul { margin: 1.1rem 0; display: grid; gap: .6rem; }
.article li { position: relative; padding-left: 1.5rem; font-size: 1.09rem; line-height: 1.6; color: #333; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
.article li::before { content: ""; position: absolute; left: .15rem; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.article .pull { margin: clamp(1.8rem, 3.5vw, 2.6rem) 0; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); line-height: 1.32; letter-spacing: var(--ls-tight); color: var(--ink); text-wrap: balance; }
.article .foot-note { margin-top: clamp(2.4rem, 4vw, 3rem); padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); line-height: 1.6; }
/* Display quote and fine print stay ragged — justification is for reading columns only. */
.article .pull, .article .foot-note { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
.article strong { font-weight: 600; color: var(--ink); }

/* "more insights" strip at the foot of an article */
.more-insights { border-top: 1px solid var(--line); }
.more-insights .sec-label { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* Article feature image / cover (16:9, square corners to match the portrait) */
.article-feature { padding-block: 0 clamp(1.4rem, 3vw, 2.4rem); }
.article-feature .wrap { max-width: 1080px; }
.article-figure { margin: 0; }
.article-figure img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  background: var(--panel); filter: grayscale(1) contrast(1.03); box-shadow: var(--shadow-sm);
}
.article-figure figcaption { margin-top: .75rem; font-size: .82rem; color: var(--muted); }
/* Minimal monochrome cover (used until a photograph is dropped in) */
.article-cover {
  aspect-ratio: 16 / 9; width: 100%; background: var(--panel); box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden; display: grid; place-items: center;
}
.article-cover .motif { width: min(46%, 340px); height: auto; color: var(--ink); }
.article-cover .cover-tag {
  position: absolute; left: clamp(1.2rem, 2.5vw, 2rem); bottom: clamp(1rem, 2vw, 1.4rem);
  font-size: .8rem; color: var(--muted); letter-spacing: var(--ls-small);
}
.article-cover .cover-tag b { color: var(--ink); font-weight: 500; }

/* Closing CTA band on the detail page */
.detail-cta { text-align: center; }
.detail-cta .wrap { max-width: 760px; }
.detail-cta h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-tight); line-height: 1.1; }
.detail-cta p { margin: 1.1rem auto 2rem; color: var(--muted); font-size: 1.1rem; max-width: 48ch; }
.detail-cta .btn { margin: 0 auto; }

/* ---------------- ABOUT / ATTORNEY BIO PAGE ---------------- */
.about-block { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4.25rem); }
.about-block .wrap { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.about-block h2 { font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.1rem); letter-spacing: var(--ls-tight); line-height: 1.12; }
.about-block .body { display: grid; gap: 1.05rem; }
.about-block .body p { font-size: 1.06rem; line-height: 1.55; color: #333; max-width: 64ch; }
.about-block .body p.muted { color: var(--muted); }
.about-block .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .3rem; }
.about-block .tag {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
  background: var(--white); border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
  font-size: .82rem; font-weight: 500; letter-spacing: var(--ls-small);
  transition: transform .25s var(--ease);
}
.about-block .tag:hover { transform: translateY(-2px); }
.about-block a.cv {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .3rem; width: max-content;
  font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.about-block a.cv:hover { color: var(--muted); border-color: var(--muted); }

/* stats strip */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 3vw, 2rem); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem); }
.stat-big .num { font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem); letter-spacing: -0.03em; line-height: 1; }
.stat-big .lbl { margin-top: .55rem; color: var(--muted); font-size: .95rem; max-width: 18ch; line-height: 1.35; }

/* representative-matters list */
.matter-list li { padding: 1.15rem 0; border-top: 1px solid var(--line); font-size: 1.05rem; color: var(--ink); display: flex; gap: 1.2rem; line-height: 1.4; }
.matter-list li:last-child { border-bottom: 1px solid var(--line); }
.matter-list .idx { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2rem; }

/* industries/clients grid (mirrors the reference "Clients" grid, truthfully) */
.serve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.serve-card {
  background: var(--panel); border-radius: var(--r-card); padding: 1.4rem 1.5rem; min-height: 130px;
  display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.serve-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); background: var(--white); }
.serve-card h3 { font-size: 1.2rem; letter-spacing: var(--ls-tight); }
.serve-card p { margin-top: .45rem; font-size: .9rem; color: var(--muted); line-height: 1.4; }

/* ---------------- REVEAL (Catalyst technique: scroll-linked) ----------------
   Visible by default; app.js maps scroll progress → transform/opacity per frame. */
.reveal { will-change: transform, opacity; }

/* Hero: line-by-line mask flip-up on load */
.hero h1 .l > span {
  transform: translateY(115%) rotate(3deg); transform-origin: left top;
  transition: transform 1.1s var(--ease);
}
.hero.in h1 .l > span { transform: none; }
.hero h1 .l:nth-child(2) > span { transition-delay: .09s; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 940px) {
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
  .services-panel { grid-template-columns: 1fr; }
  .cta .wrap { grid-template-columns: 1fr; }
  .cta-portrait { aspect-ratio: 16 / 11; max-height: 420px; }
  .contact .wrap { grid-template-columns: 1fr; }
  .intro .wrap { grid-template-columns: 1fr; }
  .intro-lead { grid-column: 1; }
  .footer .wrap { grid-template-columns: 1fr 1fr; }
  .detail-hero .wrap { grid-template-columns: 1fr; }
  .topic-grid { grid-template-columns: 1fr; }
  .topic-card.wide { grid-column: span 1; }
  .topic-card { min-height: 0; }
  .about-block .wrap { grid-template-columns: 1fr; gap: 1.25rem; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .serve-grid { grid-template-columns: repeat(2, 1fr); }
  .insight-grid { grid-template-columns: 1fr; }
  .insight-card.wide { grid-column: span 1; }
}
@media (max-width: 620px) {
  /* Nav links stack below the pill when there isn't room to expand sideways */
  .nav-inner { flex-wrap: wrap; max-width: calc(100vw - 1.8rem); }
  .nav-links { flex-basis: 100%; order: 3; flex-direction: column; max-width: none; }
  .nav.open .nav-links { max-width: none; }
  .nav-links a { height: 46px; width: 100%; border-top: 1px solid var(--line); }
  .nav-links a::after { display: none; }
  .nav-divider-links { display: none !important; }
}
@media (max-width: 560px) {
  .areas-grid { grid-template-columns: 1fr; }
  .serve-grid { grid-template-columns: 1fr; }
  .footer .wrap { grid-template-columns: 1fr; }
  .hero { min-height: 86svh; padding-top: 7rem; }
  .nav-brand span.name { display: none; }
}
/* The overlapping venn map is desktop-only; the topic cards cover mobile. */
@media (max-width: 760px) { .practice-map { display: none; } }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero h1 .l > span { transform: none !important; transition: none; }
  .hero-video { display: none; } /* don't autoplay motion for reduced-motion users */
  /* arrows: degrade the slide-through to a simple fill (no sliding motion) */
  .area .arrow svg, .topic-card .card-arrow svg, .insight-card .card-arrow svg { transition: none !important; }
  .area:hover .arrow svg, .topic-card:hover .card-arrow svg, .insight-card:hover .card-arrow svg { transform: none !important; }
  .area .arrow::after, .topic-card .card-arrow::after, .insight-card .card-arrow::after { display: none !important; }
  .index-list a::after, .index-head .ig-arrow { transition: none !important; }
  .index-list a:hover, .index-list a:hover::after, .index-head:hover .ig-arrow { transform: none !important; }
  .cta-portrait img, .intro-portrait img, .portrait img { transition: none !important; }
  .cta-portrait:hover img, .intro-portrait:hover img, .portrait:hover img { transform: none !important; }
  .map-svg circle, .map-links line { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}