/* =========================================================================
   Celerity Prime — design system
   Quiet Authority: hairline rules, editorial serif headlines, a numbered
   index system borrowed from transaction documents, and brand red used only
   where it carries meaning. See DESIGN_SYSTEM.md.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

:root {
  /* Colour — sourced from the firm's own logo artwork */
  --ink: #171c22;
  /* The dark section grounds. Same value as --ink by default; split out
     so a palette can recolour the panels without touching body text,
     which also reads from --ink. */
  --ground: #171c22;

  /* Corner-glow accents shared by the hero and footer gradients — named so a
     palette can retune both at once without restating either background. */
  --footer-glow-light: rgba(119, 152, 164, 0.22);
  --footer-glow-deep: rgba(58, 82, 92, 0.72);
  --glow: #12384b;
  --ink-soft: #222326;
  --ink-muted: #5a646e;
  --ivory: #f4f2ed;
  --ivory-deep: #ebe8e1;
  --white: #ffffff;
  --steel: #7798a4;
  --steel-deep: #4f6670;
  --red: #ed1c24;
  --red-ink: #c4121b;

  --rule: rgba(23, 28, 34, 0.14);
  --rule-soft: rgba(23, 28, 34, 0.08);
  --rule-strong: rgba(23, 28, 34, 0.3);
  --rule-invert: rgba(244, 242, 237, 0.16);
  --rule-invert-strong: rgba(244, 242, 237, 0.32);

  --surface: var(--ivory);
  --surface-raised: var(--white);

  /* Type */
  --font-display: "Season Mix", "Iowan Old Style", Georgia, serif;
  --font-body: "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Founders Grotesk Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Season Mix is a 300-weight cut with no heavier instance, so it reads
     lighter than the Newsreader it replaces. A hairline stroke in the text
     colour restores comparable stem weight; calibrated against Newsreader
     at display size. currentColor keeps it correct on every background. */
  --display-weight-boost: 0.02em;

  --step--2: clamp(0.6875rem, 0.67rem + 0.08vw, 0.75rem);
  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0: clamp(1rem, 0.975rem + 0.13vw, 1.0625rem);
  --step-1: clamp(1.0625rem, 1.02rem + 0.24vw, 1.1875rem);
  --step-2: clamp(1.1875rem, 1.09rem + 0.48vw, 1.5rem);
  --step-3: clamp(1.4375rem, 1.24rem + 0.98vw, 2.125rem);
  --step-4: clamp(1.9rem, 1.42rem + 2.4vw, 3.5rem);
  --step-5: clamp(2.25rem, 1.5rem + 3.7vw, 5rem);

  /* Space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 5.5rem;
  --section: clamp(3.75rem, 7.5vw, 7rem);
  --section-tight: clamp(2.75rem, 5vw, 4.5rem);

  /* Layout */
  --max: 1280px;
  --max-narrow: 46rem;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --header-h: 4.75rem;

  --radius: 2px;
  --radius-lg: 4px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 400ms;
}

@media (min-width: 62rem) {
  :root { --header-h: 5.5rem; }
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ---------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  /* Belongs on html, not body: Safari miscomputes position: fixed once
     body itself carries a non-visible overflow, so the floating header
     drifts with the page instead of staying pinned to the viewport. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.015em;
  /* Even out the rag on multi-line headings; ignored where unsupported. */
  text-wrap: balance;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, dl, dd { margin: 0; }
address { font-style: normal; }
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--ink); color: var(--ivory); }

:focus-visible {
  outline: 2px solid var(--red-ink);
  outline-offset: 3px;
  border-radius: 1px;
}

main:focus { outline: none; }

/* The header floats (position: fixed) so it can sit transparently over a
   hero. Every page compensates by default; the homepage's hero cancels the
   compensation and bleeds up under the header instead, since that overlap
   is the point of the floating state. */
#main { padding-top: var(--header-h); }
.s-hero { margin-top: calc(-1 * var(--header-h)); }

/* -------------------------------------------------------------------------
   3. Layout
   ---------------------------------------------------------------------- */

.l-container {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
}

.l-container--narrow { max-width: var(--max-narrow); }

section { position: relative; }

/* -------------------------------------------------------------------------
   4. Typography primitives
   ---------------------------------------------------------------------- */

.c-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.c-eyebrow__rule {
  width: 1.75rem;
  height: 1px;
  background: var(--red);
  flex: none;
}

.c-mini-heading {
  margin: 0 0 var(--space-s);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.c-prose { max-width: 40em; }

.c-prose p { margin-bottom: 1.1em; }
.c-prose p:last-child { margin-bottom: 0; }

.c-prose h2 {
  font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-2);
  line-height: 1.24;
  margin: 2.25em 0 0.6em;
}

.c-prose h2:first-child { margin-top: 0; }

.c-prose h3 {
  font-size: var(--step-1);
  font-weight: 600;
  margin: 1.9em 0 0.5em;
}

.c-prose ul {
  margin: 0 0 1.1em;
  padding-left: 1.15rem;
  list-style: none;
}

.c-prose li {
  position: relative;
  margin-bottom: 0.55em;
}

.c-prose li::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: 0.72em;
  width: 0.4rem;
  height: 1px;
  background: var(--red);
}

.c-prose a {
  color: var(--red-ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease);
}

.c-prose a:hover { color: var(--ink); }

.c-prose--legal { max-width: 100%; }
.c-prose--legal p, .c-prose--legal li { color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   5. Buttons and links
   ---------------------------------------------------------------------- */

.c-button {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.c-button__arrow { width: 1.25rem; transition: transform var(--dur) var(--ease); }
.c-button:hover .c-button__arrow { transform: translateX(0.25rem); }

.c-button--primary { background: var(--ink); color: var(--ivory); }
.c-button--primary:hover { background: var(--red-ink); }

.c-button--ghost { border-color: var(--rule-strong); color: var(--ink); }
.c-button--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--ivory); }

.c-button--invert { background: var(--ivory); color: var(--ink); }
.c-button--invert:hover { background: var(--red); color: var(--white); }

.c-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--rule-strong);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.c-link .c-arrow { width: 1.15rem; transition: transform var(--dur) var(--ease); }
.c-link:hover { color: var(--red-ink); border-color: var(--red); }
.c-link:hover .c-arrow { transform: translateX(0.25rem); }

.c-link--inline { border: 0; text-decoration: underline; text-underline-offset: 0.18em; }

.c-arrow { width: 1.1rem; height: auto; flex: none; }

/* -------------------------------------------------------------------------
   6. Brand marks
   ---------------------------------------------------------------------- */

.c-logo { width: auto; height: 1.5rem; }
.c-logo__blade { fill: var(--red); }
.c-logo__prime { opacity: 0.72; }
.c-logo--footer { height: 1.75rem; }

@media (min-width: 48rem) {
  .c-logo { height: 1.6875rem; }
}

.c-blade { width: 0.85rem; fill: var(--red); flex: none; }
.c-blade--inline { display: inline-block; margin-right: 0.5rem; vertical-align: 0.05em; }
.c-blade--bullet { margin-top: 0.55rem; }
.c-blade--footer { display: inline-block; margin-right: 0.55rem; vertical-align: 0.08em; }

/* -------------------------------------------------------------------------
   7. Skip link, header, navigation
   ---------------------------------------------------------------------- */

.c-skip {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.75rem 1.1rem;
  background: var(--ink);
  color: var(--ivory);
  font-size: var(--step--1);
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}

.c-skip:focus { transform: translateY(0); }

.c-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* Solid bar — scrolled past the hero, or a menu is open. Plain and
   full-bleed, exactly as the design already used before the floating pill
   below existed. */
.c-header.is-stuck,
.c-header.is-open {
  background: var(--surface);
  border-bottom-color: var(--rule);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .c-header.is-stuck,
  .c-header.is-open {
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

.c-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

/* The floating pill — a decorative layer behind the logo, nav and CTA
   rather than a background on .c-header__inner itself, so it can hold its
   own fixed height (matching what the nav-only pill already used) no
   matter how tall the header row is. Same blur/colour the nav pill always
   had; only the width changes, to span logo-to-CTA while still over the
   hero. Gone once the bar is solid — that state is the plain bar above. */
.c-header__inner::before {
  content: "";
  position: absolute;
  /* Uneven on purpose: the logo is flush with no padding of its own, so it
     needs the full clearance; the CTA already carries 1.3rem of its own
     padding before its edge, so a smaller overhang there lands at the same
     visual gap instead of doubling up. */
  left: -1.5rem;
  right: -0.5rem;
  top: 50%;
  height: 3.4rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, #253337 42%, transparent);
  z-index: -1;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .c-header__inner::before {
    background: color-mix(in srgb, #253337 30%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
  }
}

.c-header.is-stuck .c-header__inner::before,
.c-header.is-open .c-header__inner::before { opacity: 0; }

/* The header floats over whatever is directly beneath it, so the wordmark
   starts white for the dark hero and switches to ink once the bar goes
   solid. The little red blade in the mark is fixed to --red in its own
   rule below and is unaffected by this. */
.c-header__logo {
  display: flex;
  align-items: center;
  color: var(--ivory);
  transition: color var(--dur) var(--ease);
}

.c-header.is-stuck .c-header__logo,
.c-header.is-open .c-header__logo { color: var(--ink); }

.c-nav { display: none; }

@media (min-width: 62rem) {
  .c-nav { display: block; margin-inline: auto; }
}

/* The nav's own background lives on .c-header__inner::before now (the
   shared pill that also holds the logo and CTA) — this just keeps its
   internal padding, so nothing here paints a second pill on top of it. */
.c-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.9rem);
  padding: 0.55rem 1.6rem;
  transition: padding var(--dur) var(--ease);
}

.c-header.is-stuck .c-nav__list,
.c-header.is-open .c-nav__list {
  padding: 0.55rem 0;
}

.c-nav__item { position: relative; display: flex; align-items: center; gap: 0.3rem; }

.c-nav__link {
  position: relative;
  display: block;
  padding: 0.4rem 0;
  font-size: var(--step--1);
  font-weight: 450;
  color: var(--ivory-deep);
  transition: color var(--dur-fast) var(--ease);
}

.c-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1rem;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.c-nav__link:hover { color: var(--white); }
.c-nav__link:hover::after,
.c-nav__link.is-current::after { transform: scaleX(1); }
.c-nav__link.is-current { color: var(--white); }

.c-header.is-stuck .c-nav__link,
.c-header.is-open .c-nav__link { color: var(--ink-soft); }
.c-header.is-stuck .c-nav__link:hover,
.c-header.is-open .c-nav__link:hover,
.c-header.is-stuck .c-nav__link.is-current,
.c-header.is-open .c-nav__link.is-current { color: var(--ink); }

.c-nav__disclosure {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.15rem;
  color: var(--ivory-deep);
  transition: color var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}

.c-nav__disclosure svg { width: 0.6rem; }
.c-nav__disclosure[aria-expanded="true"] { transform: rotate(180deg); color: var(--white); }

.c-header.is-stuck .c-nav__disclosure,
.c-header.is-open .c-nav__disclosure { color: var(--ink-muted); }
.c-header.is-stuck .c-nav__disclosure[aria-expanded="true"],
.c-header.is-open .c-nav__disclosure[aria-expanded="true"] { color: var(--ink); }

.c-header__actions { display: flex; align-items: center; gap: var(--space-s); }

/* Floats as its own chip, separate from the nav pill — solid so it stays
   the clearest call to action over the hero image. Reverts to the outlined
   button this design already used once the bar is solid. */
.c-header__cta {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ivory);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 500;
  box-shadow: 0 10px 28px -10px rgba(23, 28, 34, 0.45);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    border-radius var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.c-header__cta .c-arrow { width: 1.05rem; transition: transform var(--dur) var(--ease); }
.c-header__cta:hover { background: var(--ink); color: var(--ivory); }
.c-header__cta:hover .c-arrow { transform: translateX(0.2rem); }

.c-header.is-stuck .c-header__cta,
.c-header.is-open .c-header__cta {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: none;
}

.c-header.is-stuck .c-header__cta:hover,
.c-header.is-open .c-header__cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

@media (min-width: 48rem) { .c-header__cta { display: inline-flex; } }

.c-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.375rem;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  align-items: center;
}

@media (min-width: 62rem) { .c-burger { display: none; } }

.c-burger__lines { display: block; width: 1.35rem; }
.c-burger__lines span {
  display: block;
  height: 1px;
  background: var(--ivory);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.c-burger__lines span:first-child { margin-bottom: 0.375rem; }
.c-burger[aria-expanded="true"] .c-burger__lines span:first-child { transform: translateY(0.1875rem) rotate(45deg); }
.c-burger[aria-expanded="true"] .c-burger__lines span:last-child { transform: translateY(-0.1875rem) rotate(-45deg); }

.c-header.is-stuck .c-burger__lines span,
.c-header.is-open .c-burger__lines span { background: var(--ink); }

/* Mobile/tablet: always a plain solid bar, never the floating blurred pill.
   That treatment is a desktop flourish for hovering over the hero; below the
   nav breakpoint there's no room for it to read as floating, and it's an
   extra backdrop-filter layer costing render time for no benefit. Applies
   regardless of .is-stuck/.is-open, so the bar is solid from the top of the
   page, not just once scrolled or opened. Placed after the base header/logo/
   burger/cta rules above so it wins the cascade at equal specificity. */
@media (max-width: 61.99rem) {
  .c-header,
  .c-header.is-stuck,
  .c-header.is-open {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .c-header__inner::before { display: none; }

  .c-header__logo,
  .c-header.is-stuck .c-header__logo,
  .c-header.is-open .c-header__logo { color: var(--ink); }

  .c-burger__lines span,
  .c-header.is-stuck .c-burger__lines span,
  .c-header.is-open .c-burger__lines span { background: var(--ink); }

  .c-header__cta,
  .c-header.is-stuck .c-header__cta,
  .c-header.is-open .c-header__cta {
    background: var(--ink);
    color: var(--ivory);
    border-color: transparent;
    box-shadow: none;
  }
}

/* Expertise disclosure panel */

.c-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 24px 48px -32px rgba(23, 28, 34, 0.28);
}

.c-panel[hidden] { display: none; }

.c-panel__inner {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: var(--space-xl);
}

.c-panel__label {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-s);
}

.c-panel__note {
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-bottom: var(--space-m);
  max-width: 22ch;
}

.c-panel__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}

.c-panel__item { background: var(--surface); }

.c-panel__item a {
  display: block;
  height: 100%;
  padding: 1.1rem 1.15rem 1.25rem;
  transition: background var(--dur) var(--ease);
}

.c-panel__item a:hover { background: var(--ivory-deep); }

.c-panel__number {
  display: block;
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  color: var(--red);
  margin-bottom: 0.6rem;
}

.c-panel__title {
  display: block;
  font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-1);
  line-height: 1.2;
  margin-bottom: 0.4rem;
}

.c-panel__strapline {
  display: block;
  font-size: var(--step--2);
  line-height: 1.45;
  color: var(--ink-muted);
}

/* Mobile menu */

.c-mobile {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 90;
  background: var(--surface);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.c-mobile[hidden] { display: none; }

/* Frosted drawer, to match the header. Declared after the base .c-mobile
   rule above so it is not undone by source order. The drawer is a full
   sheet rather than floating chrome, so it takes more opacity than the
   header and a heavier blur to keep the links legible over any page. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .c-mobile {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
  }
}

.c-mobile__inner {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
  padding-block: var(--space-l) var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  min-height: 100%;
}

.c-mobile__primary { border-top: 1px solid var(--rule); }

.c-mobile__primary a {
  display: block;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-3);
  line-height: 1.15;
}

.c-mobile__primary a[aria-current="page"] { color: var(--red-ink); }

.c-mobile__label {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: -0.5rem;
}

.c-mobile__secondary a {
  display: flex;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--step--1);
}

.c-mobile__secondary span { color: var(--red); font-variant-numeric: tabular-nums; }

.c-mobile__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

body.is-locked { overflow: hidden; }

/* -------------------------------------------------------------------------
   8. Section heads
   ---------------------------------------------------------------------- */

.c-section-head {
  display: grid;
  gap: var(--space-m);
  padding-bottom: var(--space-l);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  .c-section-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.c-section-head__title {
  font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-3);
  line-height: 1.14;
  max-width: 18ch;
}

.c-section-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

.c-section-head__intro {
  font-size: var(--step-0);
  color: var(--ink-muted);
  max-width: 46ch;
}

/* -------------------------------------------------------------------------
   9. Breadcrumbs
   ---------------------------------------------------------------------- */

.c-breadcrumbs { padding-top: var(--space-l); }

.c-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--step--2);
  color: var(--ink-muted);
}

.c-breadcrumbs__item + .c-breadcrumbs__item::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--rule-strong);
}

.c-breadcrumbs a { border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease); }
.c-breadcrumbs a:hover { border-bottom-color: var(--rule-strong); }
.c-breadcrumbs [aria-current="page"] { color: var(--ink); }

/* -------------------------------------------------------------------------
   10. Home — hero
   ---------------------------------------------------------------------- */

.s-hero {
  position: relative;
  /* A diagonal --glow accent across the text side of the hero, settling
     back to flat --ground toward the facade plate so the photograph isn't
     tinted. Kept dark enough that the ivory headline still reads at full
     contrast. */
  background:
    linear-gradient(to bottom right, var(--glow), var(--ground) 62%),
    var(--ground);
  color: var(--ivory);
  overflow: hidden;
  isolation: isolate;
}

/* The plate is scoped to the hero proper, not the practice index band below
   it — otherwise it is sized against a much taller box and crops far harder
   than the composition needs. */
.s-hero__top { position: relative; }

/* The facade plate is held to the right edge and runs the full height of the
   hero. On narrow screens it drops behind the type at low contrast. */
.s-hero__plate {
  position: absolute;
  inset: 0 0 0 auto;
  width: 100%;
  z-index: 0;
  opacity: 0.22;
  clip-path: inset(0 0 0 0);
}

/* <picture> is inline by default, so an image inside it has no definite
   height to resolve 100% against — the plate would fill only its intrinsic
   height and leave the column empty below. */
.s-hero__plate picture {
  display: block;
  width: 100%;
  height: 100%;
}

.s-hero__plate img,
.s-hero__plate .s-hero__video {
  width: 100%;
  height: 100%;
  /* The shared editorial rule sets a band aspect ratio; the hero plate is
     sized by its column instead, so that has to be released here. */
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 62% 50%;
}

/* The hero footage is desaturated so the red accent stays the only colour
   in the composition. Slight contrast lift compensates for the flattening
   that removing colour causes. */
.s-hero__video {
  display: block;
  filter: grayscale(0.01) contrast(1.08);
}

/* Users who ask for reduced motion get the poster frame instead of
   looping footage. */
@media (prefers-reduced-motion: reduce) {
  .s-hero__video { display: none; }
  .s-hero__plate {
    background-image: url(../images/editorial/building-poster-1500.jpg);
    background-size: cover;
    background-position: 62% 50%;
    filter: grayscale(1) contrast(1.6);
  }
}

/* A hairline seam where the plate meets the ink field */
.s-hero__plate::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: var(--rule-invert-strong);
  opacity: 0;
}

@media (min-width: 62rem) {
  .s-hero__plate { width: 42%; opacity: 1; }
  .s-hero__plate::after { opacity: 1; }
}

.s-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: clamp(34rem, 82vh, 50rem);
  padding-block: clamp(5rem, 12vw, 9rem) clamp(4rem, 9vw, 7rem);
}

.s-hero__lead { max-width: 34rem; }

@media (min-width: 62rem) {
  .s-hero__lead { max-width: none; padding-right: clamp(3rem, 6vw, 6rem); }
}

.c-eyebrow--hero { color: var(--steel); }

.s-hero__title {
  font-family: var(--font-display);
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-5);
  line-height: 1.0;
  letter-spacing: -0.01em;
  /* Sized to break into three confident lines rather than six narrow ones.
     Short connecting words are bound in the markup, so no line can end on
     "for" — the bound pair "for complex" moves as one unit. */
  max-width: 14ch;
  margin-bottom: var(--space-xl);
  color: var(--ivory);
}

.s-hero__standfirst {
  font-size: var(--step-2);
  line-height: 1.5;
  color: rgba(244, 242, 237, 0.88);
  max-width: 44ch;
  margin-bottom: var(--space-2xl);
}

.s-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.s-hero .c-button--primary { background: var(--ivory); color: var(--ink); }
.s-hero .c-button--primary:hover { background: var(--red); color: var(--white); }
.s-hero .c-button--ghost { border-color: var(--rule-invert-strong); color: var(--ivory); }
.s-hero .c-button--ghost:hover { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }

/* Practice index closing the hero, on ink */
.s-hero__band {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule-invert);
  background: var(--ink);
}

.s-hero__index { padding-top: var(--space-s); }

/* -------------------------------------------------------------------------
   11. Proof strip
   ---------------------------------------------------------------------- */

.s-proof { background: var(--ground); color: var(--ivory); padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--rule-invert); }

.c-proof {
  display: grid;
  gap: 1px;
  background: var(--rule-invert);
}

@media (min-width: 40rem) { .c-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .c-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.c-proof__item { background: var(--ground); padding: var(--space-m) clamp(1rem, 2vw, 1.75rem); }
.c-proof__item:first-child { padding-left: 0; }

@media (max-width: 39.99rem) { .c-proof__item { padding-inline: 0; } }

.c-proof__figure {
  font-family: var(--font-display);
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.c-proof__item--wide .c-proof__figure { font-size: var(--step-1); line-height: 1.25; padding-top: 0.3rem; }

.c-proof__label {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 0.5rem;
}

.c-proof__note { font-size: var(--step--1); line-height: 1.45; color: rgba(244, 242, 237, 0.72); max-width: 34ch; }

/* -------------------------------------------------------------------------
   12. Home — introduction
   ---------------------------------------------------------------------- */

.s-intro { padding-block: var(--section); }

.s-intro__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

@media (min-width: 48rem) {
  /* Matches .c-section-head's columns/gap exactly so the right-column text
     block lines up to the same left edge as it does further down the page. */
  .s-intro__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
}

.s-intro__title {
  font-family: var(--font-display);
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-4);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 16ch;
}

.s-intro__body p {
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--ink-soft);
  margin-bottom: 1.15em;
}

.s-intro__body .c-link { margin-top: var(--space-s); }

/* -------------------------------------------------------------------------
   13. Expertise — pillars and index
   ---------------------------------------------------------------------- */

.s-expertise { padding-block: var(--section-tight) var(--section); border-top: 1px solid var(--rule); }

.s-expertise .l-container {
  background: var(--ivory-deep);
  padding: clamp(1.75rem, 5vw, 5rem);
  border-radius: 1.5rem;
}

.s-expertise__list { border-top: 1px solid var(--ink); }

.c-pillar {
  position: relative;
  display: grid;
  gap: var(--space-s);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur) var(--ease);
}

@media (min-width: 48rem) {
  .c-pillar {
    /* Same column split/gap as .c-section-head and .s-intro__grid, so the
       aside lines up with the rest of the page's right-column content. The
       numeral is pulled out of the grid and overlaid on the body column
       instead of taking its own track, so it doesn't skew the split. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }

  /* top matches .c-pillar's own padding-block-start: absolute offsets are
     measured from the padding edge, i.e. before that padding is applied, so
     without this the numeral floats above where the title actually starts. */
  .c-pillar__number { position: absolute; left: 0; top: clamp(1.5rem, 3vw, 2.25rem); }

  .c-pillar__body { padding-left: calc(3.5rem + clamp(1.5rem, 3vw, 3rem)); }
}

.c-pillar__number {
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  color: var(--red);
  padding-top: 0.45rem;
}

.c-pillar__title {
  font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-2);
  line-height: 1.14;
  margin-bottom: 0.5rem;
}

.c-pillar__title a { transition: color var(--dur) var(--ease); }

/* Row-wide hit area without nesting interactive elements */
.c-pillar__hit { position: absolute; inset: 0; }

.c-pillar:hover { background: rgba(23, 28, 34, 0.022); }
.c-pillar:hover .c-pillar__title a { color: var(--red-ink); }

.c-pillar__strapline { color: var(--ink-muted); max-width: 44ch; margin-bottom: var(--space-s); }

.c-pillar__caps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.c-pillar__caps li { position: relative; padding-left: 0.85rem; }
.c-pillar__caps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.4rem;
  height: 1px;
  background: var(--rule-strong);
}

.c-pillar__aside {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.c-pillar__aside-label {
  font-size: var(--step--2);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.4rem;
}

.c-pillar__matter {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34ch;
}

.c-pillar__sub {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: var(--step--1);
}

.c-pillar__sub a {
  display: inline-block;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.c-pillar__sub a:hover { color: var(--ink); border-bottom-color: var(--red); }

/* Full expertise index */

.s-practice-index { padding-block: var(--section-tight) var(--section); }
.s-practice-index__list { border-top: 1px solid var(--ink); }

.c-practice-row { border-bottom: 1px solid var(--rule); }

.c-practice-row__link {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2rem;
  gap: var(--space-s);
  padding: clamp(1rem, 2vw, 1.35rem) 0;
  align-items: center;
  transition: background var(--dur) var(--ease);
}

@media (min-width: 55rem) {
  .c-practice-row__link { grid-template-columns: 4rem minmax(0, 1fr) 3rem; gap: var(--space-l); }
}

.c-practice-row__link:hover { background: rgba(23, 28, 34, 0.022); }

.c-practice-row__number {
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  color: var(--red);
}

.c-practice-row__title {
  display: block;
  font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-1);
  line-height: 1.2;
  margin-bottom: 0.2rem;
  transition: color var(--dur) var(--ease);
}

.c-practice-row__link:hover .c-practice-row__title { color: var(--red-ink); }

.c-practice-row__strapline { display: block; color: var(--ink-muted); max-width: 52ch; }

.c-practice-row__go { color: var(--ink-muted); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.c-practice-row__link:hover .c-practice-row__go { color: var(--red); transform: translateX(0.25rem); }

/* -------------------------------------------------------------------------
   14. Matters
   ---------------------------------------------------------------------- */

.s-experience {
  padding-block: var(--section);
  background: var(--ground);
  color: var(--ivory);
}

.s-experience .c-eyebrow { color: var(--steel); }
.s-experience .c-section-head { border-bottom-color: var(--rule-invert); }
.s-experience .c-section-head__intro { color: rgba(244, 242, 237, 0.66); }
.s-experience .c-link { color: var(--ivory); border-bottom-color: var(--rule-invert-strong); }
.s-experience .c-link:hover { color: var(--white); border-bottom-color: var(--red); }
.s-experience .c-matter__title { color: var(--ivory); }
.s-experience .c-matter__summary { color: rgba(244, 242, 237, 0.7); }
.s-experience .c-matter__meta { border-top-color: var(--rule-invert); }
.s-experience .c-matter__meta dt { color: var(--steel); }
.s-experience .c-matter__meta dd { color: rgba(244, 242, 237, 0.82); }

.s-practice-matters__list, .s-featured-matters__list {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}



@media (min-width: 48rem) {
  .s-practice-matters__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 68rem) {
  .s-featured-matters__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.s-practice-matters__item, .s-featured-matters__item {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
}

.s-practice-matters__item, .s-featured-matters__item { background: var(--surface); }

/* Summaries vary in length, so the metadata is pinned to the foot of each
   entry — the rules then line up across a row. */
.c-matter { display: flex; flex-direction: column; height: 100%; }

.c-matter__title {
  font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-2);
  line-height: 1.22;
  margin-bottom: var(--space-s);
  max-width: 26ch;
}

.c-matter__summary {
  font-size: var(--step--1);
  line-height: 1.62;
  color: var(--ink-soft);
  margin-bottom: var(--space-m);
}

.c-matter__meta {
  display: grid;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  font-size: var(--step--2);
}

.c-matter__meta-item { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem; }
.c-matter__meta dt { font-family: var(--font-mono); color: var(--ink-muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.6875rem; padding-top: 0.1rem; }
.c-matter__meta dd { color: var(--ink-soft); }

.s-matter-index__note {
  margin-top: var(--space-m);
  font-size: var(--step--2);
  color: var(--ink-muted);
  max-width: 60ch;
}

.s-experience__note {
  margin-top: var(--space-m);
  font-size: var(--step--2);
  color: rgba(244, 242, 237, 0.5);
  max-width: 60ch;
}

/* Featured + practice matter sections */

.s-featured-matters { padding-block: var(--section-tight) 0; }
.s-practice-matters { padding-block: var(--section); border-top: 1px solid var(--rule); }

/* Filterable index */

.s-matter-index { padding-block: var(--section); }

.s-matter-index__head { margin-bottom: var(--space-l); }

.s-matter-index__title {
  font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-3);
  line-height: 1.14;
}

.c-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-block: var(--space-m);
  border-top: 1px solid var(--rule);
}

.c-filter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--step--1);
  color: var(--ink-soft);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.c-filter:hover { border-color: var(--ink); color: var(--ink); }

.c-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.c-filter[aria-pressed="true"] .c-filter__count { color: var(--steel); }

.c-filter__count { font-size: var(--step--2); font-variant-numeric: tabular-nums; color: var(--ink-muted); }

.c-filters__status { font-size: var(--step--2); color: var(--ink-muted); margin-bottom: var(--space-m); }

.c-matter-list { border-top: 1px solid var(--ink); }

.c-matter-row { border-bottom: 1px solid var(--rule); }
.c-matter-row[hidden] { display: none; }

.c-matter-row__inner {
  display: grid;
  gap: var(--space-2xs);
  padding: clamp(1.15rem, 2.4vw, 1.75rem) 0;
}

@media (min-width: 55rem) {
  .c-matter-row__inner {
    grid-template-columns: 11rem minmax(0, 1fr) 13rem;
    gap: var(--space-l);
    align-items: start;
  }
}

.c-matter-row__tag {
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-ink);
  padding-top: 0.3rem;
}

.c-matter-row__title { font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-1); line-height: 1.28; margin-bottom: 0.4rem; }

.c-matter-row__summary { font-size: var(--step--1); line-height: 1.6; color: var(--ink-muted); max-width: 68ch; }

.c-matter-row__geo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: var(--step--2);
  color: var(--ink-soft);
  padding-top: 0.3rem;
}

.c-matter-row__type { color: var(--ink-muted); }

.c-matter-list__empty { padding: var(--space-xl) 0; font-size: var(--step-0); color: var(--ink-muted); }
.c-matter-list__empty[hidden] { display: none; }

/* -------------------------------------------------------------------------
   15. Why Celerity
   ---------------------------------------------------------------------- */

.s-why { padding-block: var(--section); }

.s-why__list { display: grid; gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); }

@media (min-width: 55rem) { .s-why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.c-differentiator {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem) clamp(1.75rem, 3vw, 2.5rem);
}

.c-differentiator__number {
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  color: var(--red);
  margin-bottom: var(--space-m);
}

.c-differentiator__title { font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-2); line-height: 1.2; margin-bottom: var(--space-s); }

.c-differentiator__body { font-size: var(--step--1); line-height: 1.65; color: var(--ink-soft); margin-bottom: var(--space-m); }

.c-differentiator__evidence {
  font-size: var(--step--2);
  line-height: 1.55;
  color: var(--ink-muted);
  margin-top: auto;
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
}

/* -------------------------------------------------------------------------
   16. People
   ---------------------------------------------------------------------- */

.s-people { padding-block: var(--section); border-top: 1px solid var(--rule); }
.s-people--index { border-top: 0; padding-top: var(--section-tight); }

.c-person-grid { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); }

@media (min-width: 34rem) { .c-person-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 55rem) { .c-person-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .c-person-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .c-person-grid--index { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 3vw, 3rem); } }

/* Cards stretch to the tallest in the row, and the CTA is pinned to the foot,
   so "View profile" sits on one line across the whole grid. */
.c-person__link { display: flex; flex-direction: column; height: 100%; }
.c-person__body { display: flex; flex-direction: column; flex: 1; }

.c-person__frame {
  display: block;
  overflow: hidden;
  background: var(--ivory-deep);
  margin-bottom: var(--space-s);
}

.c-person__frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
}

.c-person__link:hover .c-person__frame img { transform: scale(1.025); }

.c-person__body { display: block; }

.c-person__name {
  display: block;
  font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-1);
  line-height: 1.25;
  transition: color var(--dur) var(--ease);
}

.c-person__link:hover .c-person__name { color: var(--red-ink); }

/* Two lines are reserved so a long title such as "Founder and Managing
   Partner" does not shunt the rest of that card out of step with its row.
   The reservation is derived from the inherited 1.6 line-height plus the
   padding below, so it stays correct if the type scale changes. */
.c-person__role {
  display: block;
  min-height: calc((1.6em * 2) + 0.65rem);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.25rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--rule);
}

.c-person__specialisms {
  margin-top: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.c-person__more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: var(--space-s);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color var(--dur) var(--ease);
}

.c-person__more .c-arrow { width: 1rem; transition: transform var(--dur) var(--ease); }
.c-person__link:hover .c-person__more { color: var(--red-ink); }
.c-person__link:hover .c-person__more .c-arrow { transform: translateX(0.2rem); }

/* -------------------------------------------------------------------------
   17. Jurisdiction / corridors
   ---------------------------------------------------------------------- */

.s-jurisdiction { padding-block: var(--section); background: var(--ground); color: var(--ivory); }

.s-jurisdiction .c-eyebrow { color: var(--steel); }

.s-jurisdiction__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

@media (min-width: 62rem) {
  .s-jurisdiction__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(3rem, 6vw, 5rem); align-items: center; }
}

.s-jurisdiction__title {
  font-family: var(--font-display);
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-4);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 18ch;
  margin-bottom: var(--space-m);
}

.s-jurisdiction__body p {
  color: rgba(244, 242, 237, 0.76);
  margin-bottom: 1.1em;
  max-width: 54ch;
}

.c-corridor-list {
  margin-top: var(--space-l);
  border-top: 1px solid var(--rule-invert);
}

.c-corridor-list li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-s);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-invert);
  font-size: var(--step--1);
}

.c-corridor-list__name { color: var(--ivory); }
.c-corridor-list__note { color: rgba(244, 242, 237, 0.6); }

@media (max-width: 33.99rem) {
  .c-corridor-list li { grid-template-columns: 1fr; gap: 0.2rem; }
}

.c-corridors__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--rule-invert);
}

.c-corridors__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Stroke widths are in screen pixels: vector-effect keeps every rule hairline
   regardless of how the square scales. */
.c-corridors__grid line { stroke: rgba(244, 242, 237, 0.08); stroke-width: 1; vector-effect: non-scaling-stroke; }

.c-corridors__line {
  stroke: rgba(244, 242, 237, 0.42);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: draw 1200ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 140ms + 200ms);
}

.c-corridors__dot { fill: var(--steel); opacity: 0; animation: fade 400ms var(--ease) forwards; animation-delay: calc(var(--i) * 140ms + 900ms); }

.c-corridors__origin { fill: var(--red); }

.c-corridors__labels { position: absolute; inset: 0; }

.c-corridors__label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, calc(-100% - 0.75rem));
  width: max-content;
  max-width: 10rem;
  text-align: center;
  opacity: 0;
  animation: fade 500ms var(--ease) forwards;
  animation-delay: calc(var(--i) * 140ms + 900ms);
}

.c-corridors__label-name {
  display: block;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ivory);
}

.c-corridors__label-note {
  display: none;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: rgba(244, 242, 237, 0.5);
  margin-top: 0.15rem;
}

@media (min-width: 48rem) { .c-corridors__label-note { display: block; } }

.c-corridors__origin-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, 0.9rem);
  width: max-content;
  text-align: center;
}

.c-corridors__origin-label span { display: block; }
.c-corridors__origin-label span:first-child { font-size: var(--step--1); color: var(--ivory); }

.c-corridors__coords {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
  margin-top: 0.1rem;
}

.c-corridors__caption {
  margin-top: var(--space-s);
  font-size: var(--step--2);
  color: rgba(244, 242, 237, 0.5);
  max-width: 46ch;
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* -------------------------------------------------------------------------
   18. Insights
   ---------------------------------------------------------------------- */

.s-insights { padding-block: var(--section); border-top: 1px solid var(--rule); }
.s-insights--index { border-top: 0; padding-top: var(--section-tight); }

.s-insights-index__notice {
  padding: var(--space-s) var(--space-m);
  margin-bottom: var(--space-l);
  border-left: 2px solid var(--red);
  background: var(--ivory-deep);
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: 66ch;
}

.c-insight-grid { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }

@media (min-width: 48rem) { .c-insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.c-insight { background: var(--surface); }

.c-insight__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
  transition: background var(--dur) var(--ease);
}

.c-insight:hover .c-insight__inner { background: var(--ivory-deep); }

/* Category above date, so a long category never pushes the date onto a second
   line and knocks the titles in a row out of alignment. */
.c-insight__meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-m);
}

.c-insight__category { color: var(--red-ink); }
.c-insight__date { color: var(--ink-muted); }
.c-insight__date--draft { color: var(--ink-muted); font-style: italic; text-transform: none; letter-spacing: 0.02em; }

.c-insight__title { font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-2); line-height: 1.22; margin-bottom: var(--space-s); }
.c-insight__title a { transition: color var(--dur) var(--ease); }
.c-insight__hit { position: absolute; inset: 0; }
.c-insight:hover .c-insight__title a { color: var(--red-ink); }

.c-insight__summary { font-size: var(--step--1); line-height: 1.62; color: var(--ink-muted); margin-bottom: var(--space-m); }

.c-insight__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: auto;
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  font-size: var(--step--2);
  color: var(--ink-muted);
}

.c-insight__author { color: var(--ink-soft); }

/* Article */

.s-article { padding-bottom: var(--section); }

.c-article__head { padding-block: var(--space-xl) var(--space-l); border-bottom: 1px solid var(--rule); margin-bottom: var(--space-xl); }

.c-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-m);
}

.c-article__category { color: var(--red-ink); }

.c-article__title {
  font-family: var(--font-display);
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-4);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-m);
}

.c-article__summary { font-size: var(--step-1); line-height: 1.6; color: var(--ink-muted); max-width: 54ch; }

.c-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-m);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--rule);
  border-left: 2px solid var(--red);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--ivory-deep);
}

.c-review-badge span { color: var(--red); }

.c-article__author { display: flex; align-items: center; gap: 0.85rem; margin-top: var(--space-l); }

.c-article__author-portrait { width: 2.75rem; height: 2.75rem; object-fit: cover; border-radius: 50%; filter: grayscale(1); }

.c-article__author-name { font-size: var(--step--1); }
.c-article__author-name a { border-bottom: 1px solid var(--rule-strong); }
.c-article__author-name a:hover { color: var(--red-ink); border-color: var(--red); }
.c-article__author-role { font-size: var(--step--2); color: var(--ink-muted); }

.c-article__body { max-width: 100%; font-size: var(--step-0); }
.c-article__body p { line-height: 1.7; }

.c-article__lead { font-size: var(--step-1); line-height: 1.6; color: var(--ink-soft); }

.c-article__callout {
  margin: 2em 0;
  padding: var(--space-m) var(--space-l);
  background: var(--ivory-deep);
  border-left: 2px solid var(--red);
}

.c-article__callout p { font-size: var(--step--1); line-height: 1.6; color: var(--ink-soft); }

.c-article__foot { margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 1px solid var(--rule); }
.c-article__practice { font-size: var(--step--1); margin-bottom: var(--space-s); }
.c-article__practice a { color: var(--red-ink); border-bottom: 1px solid var(--rule); }
.c-article__disclaimer { font-size: var(--step--2); color: var(--ink-muted); max-width: 62ch; }

/* Empty state */

.s-empty { padding-block: var(--section); }
.s-empty__inner { max-width: 46ch; }
.s-empty__title { font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-3); line-height: 1.15; margin-bottom: var(--space-m); }
.s-empty__body { color: var(--ink-muted); margin-bottom: var(--space-l); }

/* -------------------------------------------------------------------------
   19. Page hero (interior pages)
   ---------------------------------------------------------------------- */

.s-page-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--rule); }

.s-page-hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); padding-top: clamp(2rem, 5vw, 3.5rem); }

@media (min-width: 55rem) {
  .s-page-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: end;
  }
}

.s-page-hero__title {
  font-family: var(--font-display);
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-4);
  line-height: 1.06;
  letter-spacing: -0.01em;
  max-width: 20ch;
}

.s-page-hero__standfirst { font-size: var(--step-1); line-height: 1.55; color: var(--ink-muted); max-width: 48ch; }

/* Legal pages carry a single title and nothing to balance it against, so
   the usual lead/aside split reads off-centre — centred instead. */
.s-page-hero--legal .s-page-hero__grid {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.s-page-hero--legal .s-page-hero__title { max-width: 20ch; }

/* -------------------------------------------------------------------------
   20. The Firm
   ---------------------------------------------------------------------- */

.s-firm-body { padding-block: var(--section); }

.s-firm-body__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

@media (min-width: 55rem) {
  .s-firm-body__grid { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5.5rem); }
}

.c-values { border-top: 1px solid var(--ink); margin-bottom: var(--space-xl); }
.c-values__item { padding: var(--space-s) 0; border-bottom: 1px solid var(--rule); }
.c-values dt { font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-1); margin-bottom: 0.2rem; }
.c-values dd { font-size: var(--step--1); color: var(--ink-muted); }

.c-timeline { border-top: 1px solid var(--rule); }
.c-timeline__item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-s); padding: var(--space-s) 0; border-bottom: 1px solid var(--rule); font-size: var(--step--1); }
.c-timeline__year { color: var(--red); font-variant-numeric: tabular-nums; }
.c-timeline__event { color: var(--ink-muted); }

.c-prose-section { padding-bottom: var(--space-xl); margin-bottom: var(--space-xl); border-bottom: 1px solid var(--rule); }
.c-prose-section:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

.c-prose-section__title { font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-3); line-height: 1.15; margin-bottom: var(--space-m); max-width: 20ch; }
.c-prose-section__body { max-width: 62ch; }
.c-prose-section__body p { font-size: var(--step-0); line-height: 1.68; color: var(--ink-soft); margin-bottom: 1.1em; }
.c-prose-section__body p:last-child { margin-bottom: 0; }

.s-firm-probono { padding-block: var(--section-tight); border-top: 1px solid var(--rule); background: var(--ivory-deep); }

.s-firm-probono__inner { display: grid; gap: var(--space-l); align-items: end; }

@media (min-width: 55rem) {
  .s-firm-probono__inner { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 4rem); }
}

.s-firm-probono__title { font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-3); line-height: 1.15; margin-bottom: var(--space-s); max-width: 20ch; }
.s-firm-probono__body { color: var(--ink-muted); max-width: 60ch; }

/* -------------------------------------------------------------------------
   21. Practice page
   ---------------------------------------------------------------------- */

.s-practice-lead { padding-block: var(--section); }

.s-practice-lead__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }

@media (min-width: 55rem) {
  .s-practice-lead__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5rem); }
}

.s-practice-lead__overview p { font-size: var(--step-1); line-height: 1.62; color: var(--ink-soft); margin-bottom: 1.1em; max-width: 56ch; }
.s-practice-lead__overview p:last-child { margin-bottom: 0; }

.c-tick-list { border-top: 1px solid var(--rule); }
.c-tick-list li { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); font-size: var(--step--1); color: var(--ink-soft); }

.s-capabilities { padding-block: var(--section); border-top: 1px solid var(--rule); background: var(--ivory-deep); }

.s-capabilities__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }

@media (min-width: 55rem) {
  .s-capabilities__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(3rem, 6vw, 5rem); }
}

.s-capabilities__title { font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-3); line-height: 1.14; }

.c-capability-list { display: grid; gap: 0; }

@media (min-width: 40rem) { .c-capability-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); } }

.c-capability-list li {
  display: flex;
  gap: 0.7rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-soft);
}

.s-reference { padding-block: var(--section); border-top: 1px solid var(--rule); }

.s-reference__head { margin-bottom: var(--space-xl); }
.s-reference__title { font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-3); line-height: 1.14; margin-bottom: var(--space-s); }
.s-reference__note { color: var(--ink-muted); max-width: 52ch; }

.c-reference { border-top: 1px solid var(--ink); }

.c-reference__item { display: grid; gap: var(--space-2xs); padding: var(--space-m) 0; border-bottom: 1px solid var(--rule); }

@media (min-width: 55rem) {
  .c-reference__item { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
}

.c-reference__term { font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-1); line-height: 1.3; }
.c-reference__definition { font-size: var(--step--1); line-height: 1.65; color: var(--ink-muted); max-width: 70ch; }

.s-related { padding-block: var(--section-tight); border-top: 1px solid var(--rule); }

.c-related { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }

@media (min-width: 48rem) { .c-related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.c-related a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--surface);
  padding: var(--space-m) var(--space-s);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.c-related a:hover { background: var(--ivory-deep); color: var(--red-ink); }
.c-related__number { font-size: var(--step--2); color: var(--red); font-variant-numeric: tabular-nums; }
.c-related__title { flex: 1; font-size: var(--step--1); }
.c-related .c-arrow { width: 1.1rem; color: var(--ink-muted); transition: transform var(--dur) var(--ease); }
.c-related a:hover .c-arrow { transform: translateX(0.25rem); color: var(--red); }

/* -------------------------------------------------------------------------
   22. Profile page
   ---------------------------------------------------------------------- */

.s-profile-hero { border-bottom: 1px solid var(--rule); padding-bottom: var(--section-tight); }

.s-profile-hero__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); padding-top: clamp(1.5rem, 4vw, 2.5rem); }

@media (min-width: 48rem) {
  .s-profile-hero__grid { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: end; }
}

.s-profile-hero__portrait { background: var(--ivory-deep); max-width: 20rem; }
.s-profile-hero__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); }

.s-profile-hero__name { font-family: var(--font-display);
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-4); line-height: 1.05; letter-spacing: -0.01em; margin-bottom: var(--space-m); }

.s-profile-hero__intro { font-size: var(--step-1); line-height: 1.58; color: var(--ink-soft); max-width: 52ch; margin-bottom: var(--space-l); }

.s-profile-body { padding-block: var(--section); }

.s-profile-body__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

@media (min-width: 55rem) {
  .s-profile-body__grid { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5.5rem); }
}

.c-profile-aside__block { padding-bottom: var(--space-m); margin-bottom: var(--space-m); border-bottom: 1px solid var(--rule); }
.c-profile-aside__block:last-child { border-bottom: 0; margin-bottom: 0; }

.c-plain-list { display: flex; flex-direction: column; gap: 0.45rem; font-size: var(--step--1); color: var(--ink-soft); }
.c-plain-list li { position: relative; padding-left: 0.85rem; line-height: 1.5; }
.c-plain-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.4rem; height: 1px; background: var(--red); }

.c-practice-links { display: flex; flex-direction: column; }
.c-practice-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--step--1);
  transition: color var(--dur) var(--ease);
}
.c-practice-links a:hover { color: var(--red-ink); }
.c-practice-links .c-arrow { width: 1rem; color: var(--ink-muted); transition: transform var(--dur) var(--ease); }
.c-practice-links a:hover .c-arrow { transform: translateX(0.2rem); color: var(--red); }

.s-profile-body__main .c-prose p { font-size: var(--step-0); line-height: 1.72; color: var(--ink-soft); }
.s-profile-body__main .c-prose { max-width: 62ch; }

/* -------------------------------------------------------------------------
   23. Pro bono
   ---------------------------------------------------------------------- */

.s-assignments { padding-block: var(--section); }

.c-assignments { border-top: 1px solid var(--ink); }

.c-assignments__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-s);
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-soft);
}

.c-assignments__number { color: var(--red); font-variant-numeric: tabular-nums; font-size: var(--step--2); padding-top: 0.4rem; }

.s-partner { padding-block: var(--section); border-top: 1px solid var(--rule); background: var(--ivory-deep); }

.s-partner__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }

@media (min-width: 55rem) { .s-partner__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(3rem, 6vw, 5rem); } }

.s-partner__title { font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-3); line-height: 1.14; margin-bottom: var(--space-s); }
.s-partner__link a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); color: var(--red-ink); border-bottom: 1px solid var(--rule-strong); padding-bottom: 0.15rem; }
.s-partner__link .c-arrow { width: 1.05rem; }
.s-partner__body p { color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   24. Contact
   ---------------------------------------------------------------------- */

.s-contact { padding-block: var(--section); }

.s-contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

@media (min-width: 55rem) {
  .s-contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(3rem, 6vw, 5.5rem); }
}

.c-contact-block { border-top: 1px solid var(--rule); margin-bottom: var(--space-m); }

.c-contact-block__item {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-s);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

.c-contact-block dt { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); padding-top: 0.15rem; }
.c-contact-block dd { font-size: var(--step--1); line-height: 1.55; }
.c-contact-block a { border-bottom: 1px solid var(--rule-strong); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.c-contact-block a:hover { color: var(--red-ink); border-color: var(--red); }

.c-contact-block--invert { border-top-color: var(--rule-invert); }
.c-contact-block--invert .c-contact-block__item { border-bottom-color: var(--rule-invert); }
.c-contact-block--invert dt { color: var(--steel); }
.c-contact-block--invert a { border-bottom-color: var(--rule-invert-strong); }
.c-contact-block--invert a:hover { color: var(--white); border-color: var(--red); }

.s-contact__map a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); color: var(--red-ink); border-bottom: 1px solid var(--rule-strong); padding-bottom: 0.15rem; }
.s-contact__map .c-arrow { width: 1.05rem; }

.s-contact__form-intro { color: var(--ink-muted); font-size: var(--step--1); margin-bottom: var(--space-l); }

/* Form */

.c-form { display: grid; gap: var(--space-m); }

.c-field { display: grid; gap: 0.4rem; }

.c-field__label { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.c-field__label span { color: var(--red); }

.c-field__input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-size: var(--step-0);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.c-field__input:hover { border-color: var(--ink-muted); }

.c-field__input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(23, 28, 34, 0.08);
}

.c-field__input[aria-invalid="true"] { border-color: var(--red-ink); }
.c-field__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.14); }

.c-field__textarea { resize: vertical; min-height: 8.5rem; line-height: 1.6; }

.c-field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235a646e' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.65rem;
  padding-right: 2.25rem;
}

.c-field__hint { font-size: var(--step--2); color: var(--ink-muted); }
.c-field__error { font-size: var(--step--2); color: var(--red-ink); }
.c-field__error[hidden] { display: none; }

.c-field--checkbox { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.65rem; }
.c-field__checkbox { width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; accent-color: var(--ink); }
.c-field__checkbox-label { font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft); }
.c-field__checkbox-label a { color: var(--red-ink); text-decoration: underline; text-underline-offset: 0.15em; }
.c-field__checkbox-label span { color: var(--red); }
.c-field--checkbox .c-field__error { grid-column: 1 / -1; }

.c-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.c-form__submit { justify-self: start; position: relative; }
.c-form__submit[disabled] { opacity: 0.65; cursor: progress; }

.c-form__spinner {
  width: 0.9rem;
  height: 0.9rem;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.c-form__spinner[hidden] { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

.c-form__status { font-size: var(--step--1); line-height: 1.55; }
.c-form__status:empty { display: none; }
.c-form__status.is-success { padding: var(--space-s) var(--space-m); background: var(--ink); color: var(--ivory); border-radius: var(--radius); }
.c-form__status.is-error { padding: var(--space-s) var(--space-m); border: 1px solid var(--red-ink); border-left-width: 2px; color: var(--red-ink); border-radius: var(--radius); }
.c-form__status.is-notice { padding: var(--space-s) var(--space-m); background: var(--ivory-deep); border-left: 2px solid var(--steel-deep); color: var(--ink-soft); }

/* FAQ */

.s-faq { padding-block: var(--section); border-top: 1px solid var(--rule); background: var(--ivory-deep); }

.c-faq { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }

@media (min-width: 48rem) { .c-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.c-faq__item { background: var(--ivory-deep); padding: clamp(1.35rem, 3vw, 2rem) clamp(1.15rem, 2.5vw, 1.75rem); }
.c-faq__question { font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-1); line-height: 1.28; margin-bottom: var(--space-2xs); }
.c-faq__answer { font-size: var(--step--1); line-height: 1.62; color: var(--ink-muted); }

/* -------------------------------------------------------------------------
   25. Legal pages
   ---------------------------------------------------------------------- */

.s-legal { padding-block: var(--section); }
.s-legal .c-prose h2 { font-size: var(--step-2); margin-top: 2em; }
.s-legal .c-prose h2:first-child { margin-top: 0; }
.s-legal .c-prose p, .s-legal .c-prose li { font-size: var(--step--1); line-height: 1.7; }

.c-legal-nav { margin-top: var(--space-2xl); padding-top: var(--space-m); border-top: 1px solid var(--rule); }
.c-legal-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--step--1); }
.c-legal-nav a { border-bottom: 1px solid var(--rule-strong); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.c-legal-nav a:hover { color: var(--red-ink); border-color: var(--red); }

/* -------------------------------------------------------------------------
   26. CTA band
   ---------------------------------------------------------------------- */

.s-cta { background: var(--ground); color: var(--ivory); padding-block: var(--section); }

.s-cta .c-eyebrow { color: var(--steel); }
.s-cta .c-eyebrow__rule { background: var(--red); }

.s-cta__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

@media (min-width: 55rem) {
  .s-cta__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5rem); align-items: start; }
}

.s-cta__title { font-family: var(--font-display);
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-4); line-height: 1.08; letter-spacing: -0.01em; max-width: 16ch; margin-bottom: var(--space-m); }
.s-cta__body { color: rgba(244, 242, 237, 0.72); max-width: 48ch; margin-bottom: var(--space-l); }

/* -------------------------------------------------------------------------
   27. 404
   ---------------------------------------------------------------------- */

.s-404 { padding-block: clamp(3rem, 8vw, 6rem) var(--section); }
.s-404__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

@media (min-width: 55rem) { .s-404__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5rem); } }

.s-404__title { font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor; font-size: var(--step-4); line-height: 1.08; margin-bottom: var(--space-m); }
.s-404__body { color: var(--ink-muted); max-width: 46ch; margin-bottom: var(--space-l); }

.s-404__nav ul { border-top: 1px solid var(--ink); }
.s-404__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  transition: color var(--dur) var(--ease);
}
.s-404__nav a:hover { color: var(--red-ink); }
.s-404__nav .c-arrow { width: 1.1rem; color: var(--ink-muted); transition: transform var(--dur) var(--ease); }
.s-404__nav a:hover .c-arrow { transform: translateX(0.25rem); color: var(--red); }

/* -------------------------------------------------------------------------
   28. Footer
   ---------------------------------------------------------------------- */

.c-footer {
  /* Base gradient radiates up from bottom-centre in the same --glow accent
     the hero uses; vertical radius is sized so the top edge never leaves
     the flat --ground band, keeping the seam with .s-cta above invisible
     across the full width (including the corners). */
  background:
    radial-gradient(90% 70% at 88% 100%, var(--footer-glow-light) 0%, transparent 62%),
    radial-gradient(130% 85% at 12% 100%, var(--footer-glow-deep) 0%, transparent 68%),
    radial-gradient(150% 100% at 50% 100%, var(--glow) 0%, var(--ground) 62%, var(--ground) 100%);
  color: var(--ivory);
  padding-block: var(--section-tight) var(--space-l);
}

.c-footer__top { display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding-bottom: var(--space-xl); }

@media (min-width: 55rem) {
  .c-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(3rem, 6vw, 5rem); }
}

.c-footer__logo { display: inline-block; color: var(--ivory); margin-bottom: var(--space-m); }

.c-footer__tagline { font-size: var(--step--1); color: rgba(244, 242, 237, 0.68); max-width: 32ch; margin-bottom: var(--space-m); }

.c-footer__address { font-size: var(--step--1); line-height: 1.6; color: rgba(244, 242, 237, 0.68); margin-bottom: var(--space-s); }

.c-footer__contact { display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--step--1); }
.c-footer__contact a { border-bottom: 1px solid var(--rule-invert-strong); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.c-footer__contact a:hover { color: var(--white); border-color: var(--red); }

.c-footer__nav { display: grid; gap: var(--space-l); }

@media (min-width: 34rem) { .c-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); } }

.c-footer__heading {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: var(--space-s);
}

.c-footer__heading--spaced { margin-top: var(--space-l); }

.c-footer__col ul { display: flex; flex-direction: column; gap: 0.45rem; font-size: var(--step--1); }
.c-footer__col a { color: rgba(244, 242, 237, 0.78); border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.c-footer__col a:hover { color: var(--ivory); border-bottom-color: var(--red); }

.c-footer__bottom {
  display: grid;
  gap: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule-invert);
}

@media (min-width: 48rem) {
  .c-footer__bottom { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: var(--space-l); }
}

.c-footer__copy { font-size: var(--step--2); color: rgba(244, 242, 237, 0.5); }

@media (min-width: 48rem) { .c-footer__copy { text-align: right; } }

/* -------------------------------------------------------------------------
   29. Utilities and motion
   ---------------------------------------------------------------------- */

.u-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;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

[data-reveal].is-visible { opacity: 1; transform: none; }

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

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1; transform: none; }
  .c-corridors__line { stroke-dashoffset: 0; }
  .c-corridors__dot, .c-corridors__label { opacity: 1; }
}

/* -------------------------------------------------------------------------
   30. Print
   ---------------------------------------------------------------------- */

@media print {
  .c-header, .c-mobile, .c-skip, .s-cta, .c-filters, .c-footer__nav { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { text-decoration: underline; }
  .l-container { width: 100%; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------------------------------
   31. Structure diagrams
   Law firms explain themselves in structure charts. These are drawn from the
   same hairlines as the rest of the site — see lib/diagrams.py.
   ---------------------------------------------------------------------- */

.c-diagram { display: block; width: 100%; }

.c-diagram__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.c-diagram__caption {
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 46ch;
}

/* Structural hairlines */
.d-grid line { stroke: var(--rule-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.d-scale line { stroke: var(--rule-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }

.d-line {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.d-line--dashed { stroke-dasharray: 2 2; }
.d-line--accent { stroke: var(--red); }
.d-line--return { stroke: var(--red); stroke-dasharray: 2 2; }
.d-line--arrow { marker-end: url(#d-arrow); color: var(--rule-strong); }

/* Nodes */
.d-node rect {
  fill: var(--surface);
  stroke: var(--rule-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.d-node__label {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 3.4px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-anchor: middle;
  dominant-baseline: middle;
}

.d-node__sub {
  fill: var(--ink-muted);
  font-family: var(--font-body);
  font-size: 2.8px;
  letter-spacing: 0.04em;
  text-anchor: middle;
}

.d-node--primary rect { stroke: var(--ink); }
.d-node--cell rect { fill: #e7e4dd; }
.d-node--accent rect { stroke: var(--red); }
.d-node--accent .d-node__label { fill: var(--red-ink); }
.d-node--ghost rect { stroke-dasharray: 2 2; }
.d-node--ghost .d-node__label,
.d-node--ghost .d-node__sub { fill: var(--ink-muted); }

.d-dot { stroke-width: 1; vector-effect: non-scaling-stroke; color: var(--rule-strong); }

.d-zone {
  fill: rgba(237, 28, 36, 0.03);
  stroke: var(--red);
  stroke-width: 1;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}

/* Diagram typography */
.d-label {
  font-family: var(--font-body);
  font-size: 2.7px;
  fill: var(--ink-muted);
}

.d-label--eyebrow {
  font-size: 2.6px;
  font-weight: 500;
  letter-spacing: 0.16em;
  fill: var(--ink-muted);
}

.d-label--note { font-size: 2.9px; fill: var(--ink-muted); }

/* Draw-in, once, only where motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .c-diagram .d-node,
  .c-diagram .d-line,
  .c-diagram .d-zone,
  .c-diagram .d-label--note {
    opacity: 0;
    animation: d-in 460ms var(--ease) forwards;
    animation-delay: var(--d, 0ms);
  }
}

@keyframes d-in { to { opacity: 1; } }

/* On ink surfaces */
.s-hero__figure .d-grid line { stroke: rgba(244, 242, 237, 0.08); }
.s-hero__figure .d-scale line { stroke: rgba(244, 242, 237, 0.28); }
.s-hero__figure .d-line { stroke: rgba(244, 242, 237, 0.34); }
.s-hero__figure .d-line--accent,
.s-hero__figure .d-line--return { stroke: var(--red); }
.s-hero__figure .d-node rect { fill: var(--ink); stroke: rgba(244, 242, 237, 0.34); }
.s-hero__figure .d-node--primary rect { stroke: var(--ivory); }
.s-hero__figure .d-node--cell rect { fill: #22272e; }
.s-hero__figure .d-node__label { fill: var(--ivory); }
.s-hero__figure .d-node__sub,
.s-hero__figure .d-label { fill: var(--steel); }
.s-hero__figure .c-diagram__caption { border-top-color: var(--rule-invert); color: rgba(244, 242, 237, 0.55); }

/* Practice-page figure sits under the overview copy */
.s-practice-lead__figure {
  margin-top: var(--space-xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
  max-width: 34rem;
}

/* -------------------------------------------------------------------------
   32. Graphic detailing
   ---------------------------------------------------------------------- */

.s-capabilities__count {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  max-width: 22ch;
}

/* Figures animate up to their value once, where motion is welcome */
.c-proof__figure { font-variant-numeric: tabular-nums; }

.c-proof__item {
  position: relative;
  overflow: hidden;
}

.c-proof__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease);
}

.s-proof.is-visible .c-proof__item::after { transform: scaleX(1); }
.s-proof.is-visible .c-proof__item:nth-child(2)::after { transition-delay: 120ms; }
.s-proof.is-visible .c-proof__item:nth-child(3)::after { transition-delay: 240ms; }
.s-proof.is-visible .c-proof__item:nth-child(4)::after { transition-delay: 360ms; }

/* A red rule sweeping the width of an index row on hover */
.c-practice-row, .c-pillar, .c-matter-row { position: relative; }

.c-practice-row::after, .c-pillar::after, .c-matter-row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
  pointer-events: none;
}

.c-practice-row:hover::after,
.c-practice-row:focus-within::after,
.c-pillar:hover::after,
.c-pillar:focus-within::after,
.c-matter-row:hover::after { transform: scaleX(1); }

/* Articles: an editorial opening */
.c-article__body > p:first-of-type::first-letter,
.c-article__lead::first-letter {
  float: left;
  font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: 3.1em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--ink);
}

.c-article__callout {
  position: relative;
  padding-left: var(--space-xl);
}

.c-article__callout::before {
  content: "";
  position: absolute;
  left: var(--space-m);
  top: var(--space-m);
  width: 0.85rem;
  height: 1px;
  background: var(--red);
}

/* -------------------------------------------------------------------------
   33. Editorial imagery
   Full-bleed bands that punctuate a page. Placed outside .l-container in the
   markup, so they run edge to edge without the 100vw trick that causes
   horizontal overflow when a scrollbar is present.
   ---------------------------------------------------------------------- */

.c-editorial {
  margin: 0;
  /* The reveal scales the image slightly before settling; without clipping
     here that overshoot widens the page. */
  overflow: hidden;
  border-block: 1px solid var(--rule);
  background: var(--ivory-deep);
}

.c-editorial__img {
  display: block;
  width: 100%;
  aspect-ratio: var(--band-ratio, 21 / 9);
  object-fit: cover;
}

/* The band runs footage rather than a still. It is encoded greyscale rather
   than filtered in CSS: the still it replaces was already black and white,
   and dropping the colour at encode time roughly halves the file instead of
   shipping colour data the page then throws away. */
/* A <video> with height/width content attributes otherwise wins the
   computed box over aspect-ratio (unlike <img>), so the band ignores
   --band-ratio changes until this is forced back to the CSS value. */
.c-editorial__video { background: var(--ivory-deep); height: auto; filter: grayscale(1); }

/* Reduced motion gets the poster frame — a looping aerial is exactly the
   kind of ambient movement that setting exists to stop. */
@media (prefers-reduced-motion: reduce) {
  .c-editorial__video { display: none; }
  .c-editorial:has(.c-editorial__video) {
    background-image: url(../images/editorial/pl1-poster-1500.jpg);
    background-size: cover;
    background-position: center;
    aspect-ratio: var(--band-ratio, 21 / 9);
    filter: grayscale(1);
  }
}

/* The caption sits below the image on the page surface, aligned to the grid,
   rather than overlaid — no scrim, no legibility risk. */
.c-editorial__caption {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
  padding-block: var(--space-s);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.c-editorial__caption::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--red);
  flex: none;
  transform: translateY(-0.25em);
}

.c-editorial--dark { border-top-color: var(--rule-invert); border-bottom: 0; background: var(--ink); }
.c-editorial--dark .c-editorial__caption { color: var(--steel); }

/* Shorter bands on narrow screens: a 21:9 strip becomes a sliver on a phone */
@media (max-width: 47.99rem) {
  .c-editorial__img { aspect-ratio: 16 / 10; }
}

/* A band opening a page sits flush under the hero */
.s-band { position: relative; }
.s-band--tight { margin-top: calc(-1 * var(--space-xs)); }

/* -------------------------------------------------------------------------
   34. Kinetic typography and entrance choreography
   ---------------------------------------------------------------------- */

/* Split headings: each rendered line is masked and rises into place. Until JS
   has measured the lines nothing is hidden, so text is never lost. */
.c-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;   /* room for descenders inside the mask */
  margin-bottom: -0.04em;
}

.js .c-line__inner {
  display: block;
  transform: translateY(105%);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.is-split.is-visible .c-line__inner,
.s-hero.is-entered .s-hero__title.is-split .c-line__inner { transform: translateY(0); }

/* Hero entrance: eyebrow, headline, standfirst, actions, rule — in that order */
.js .s-hero [data-reveal-step] {
  opacity: 0;
  transform: translateY(0.85rem);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.s-hero.is-entered [data-reveal-step] { opacity: 1; transform: none; }
.s-hero.is-entered [data-reveal-step="0"] { transition-delay: 60ms; }
.s-hero.is-entered [data-reveal-step="2"] { transition-delay: 460ms; }
.s-hero.is-entered [data-reveal-step="3"] { transition-delay: 580ms; }
.s-hero.is-entered [data-reveal-step="4"] { transition-delay: 700ms; }

/* The eyebrow rule draws itself */
.js .c-eyebrow--hero .c-eyebrow__rule {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease) 200ms;
}

.s-hero.is-entered .c-eyebrow--hero .c-eyebrow__rule { transform: scaleX(1); }

/* The facade plate wipes in from the right */
.js .s-hero__plate {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1100ms cubic-bezier(0.16, 1, 0.3, 1) 150ms;
}

.s-hero.is-entered .s-hero__plate { clip-path: inset(0 0 0 0); }

/* The practice index band rises last */
.js .s-hero__band {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 700ms var(--ease) 820ms, transform 700ms var(--ease) 820ms;
}

.s-hero.is-entered .s-hero__band { opacity: 1; transform: none; }

/* Editorial bands wipe up as they arrive */
.js .c-editorial .c-editorial__img {
  clip-path: inset(12% 0 0 0);
  transform: scale(1.04);
  transition: clip-path 1000ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.c-editorial.is-visible .c-editorial__img { clip-path: inset(0 0 0 0); transform: none; }

/* Expertise bands run stock photography sourced per practice area, in
   varied original colour — greyscale keeps them consistent with each
   other and with the site's restrained palette, at every width. */
.s-band--under-hero .c-editorial__img,
#band-firm .c-editorial__img { filter: grayscale(1); }

/* Expertise hero — the band behind it is pulled up by a third of its own
   rendered height (the image's aspect-ratio is fixed, so this stays
   proportional at any viewport width instead of a fixed px overlap), and
   the hero drops down over it like a blind unrolling from the top. Desktop
   only: on narrow screens the band is shallower, so overlapping it would
   swallow the image rather than trim it — they stay simply stacked there. */
@media (min-width: 48rem) {
  .s-band--under-hero { margin-top: calc(-1 * (100vw * 3 / 8) / 3); }

  .s-page-hero--reveal {
    position: relative;
    z-index: 1;
    background: var(--surface);
  }

  .js .s-page-hero--reveal { clip-path: inset(0 0 100% 0); }

  .s-page-hero--reveal.is-entered {
    clip-path: inset(0 0 0 0);
    transition: clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* Counting figures hold their width so the layout never jumps mid-count */
.c-proof__figure { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .c-line__inner { transform: none !important; }
  .s-hero [data-reveal-step] { opacity: 1 !important; transform: none !important; }
  .s-hero__plate { clip-path: none !important; }
  .s-hero__band { opacity: 1 !important; transform: none !important; }
  .c-eyebrow--hero .c-eyebrow__rule { transform: scaleX(1) !important; }
  .c-editorial .c-editorial__img { clip-path: none !important; transform: none !important; }
  .s-page-hero--reveal { clip-path: none !important; }
}

/* -------------------------------------------------------------------------
   35. Selected experience — institutional credentials
   A tombstone list, not cards: index in the margin, mandate in serif, a
   precise annotation row beneath. Typography carries it; nothing is boxed.
   ---------------------------------------------------------------------- */

.s-experience__list { border-top: 1px solid var(--rule-invert); }

.c-credential {
  display: grid;
  gap: var(--space-s) 0;
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--rule-invert);
}

@media (min-width: 55rem) {
  .c-credential {
    grid-template-columns: 4rem minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
}

.c-credential__index {
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  color: var(--red);
  padding-top: 0.55rem;
}

.c-credential__title {
  font-family: var(--font-display);
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-3);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin-bottom: var(--space-s);
  max-width: 22ch;
}

.c-credential__summary {
  font-size: var(--step--1);
  line-height: 1.65;
  color: rgba(244, 242, 237, 0.66);
  max-width: 56ch;
}

.c-credential__facts {
  display: grid;
  gap: 0;
  padding-top: 0.4rem;
}

.c-credential__fact {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-s);
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule-invert);
  font-size: var(--step--2);
}

.c-credential__fact:first-child { border-top: 0; padding-top: 0; }

.c-credential__facts dt {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel);
}

.c-credential__facts dd { color: rgba(244, 242, 237, 0.86); }

/* Scale is the one fact that carries weight — set it as a figure */
.c-credential__fact:last-child:not(:first-child) dd {
  font-family: var(--font-display); letter-spacing: -0.01em;
  -webkit-text-stroke: var(--display-weight-boost) currentColor;
  font-size: var(--step-0);
  color: var(--ivory);
}

/* -------------------------------------------------------------------------
   36. Touch targets
   Standalone links get a comfortable hit area on touch screens without
   changing how anything looks on a pointer device. Links running inside a
   sentence are left alone — padding those would break the line.
   ---------------------------------------------------------------------- */

@media (hover: none), (max-width: 47.99rem) {
  .c-footer__col ul a,
  .c-footer__contact a,
  .c-contact-block dd a,
  .c-pillar__sub a,
  .c-link,
  .s-contact__map a,
  .s-partner__link a,
  .c-legal-nav a,
  .c-practice-links a,
  .c-breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Vertical lists get their rhythm from the taller rows, so the original
     gap would double the spacing. */
  .c-footer__col ul,
  .c-footer__contact,
  .c-pillar__sub { gap: 0; }

  .c-breadcrumbs a { min-height: 34px; }

  /* The lockups are only as tall as the artwork; give them a real hit area. */
  .c-header__logo,
  .c-footer__logo { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Section index — the red carries the number, the label stays neutral */
.c-eyebrow__index {
  color: var(--red);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

.c-eyebrow__index::after {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 1px;
  margin: 0 0.5rem 0.25rem 0.5rem;
  background: currentColor;
  opacity: 0.55;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Press feedback

   Every interactive element here responded on hover only. Hover does not
   exist on touch, so tapping produced no acknowledgement at all until the
   next page painted. These give the press itself a response — the moment of
   input, not the release. Short and shallow: this is a law firm, not a toy.

   Scoped to devices that actually hover-and-point for the scale effects, so
   a stylus or touch user never sees a transform lag behind their finger;
   the colour shifts apply everywhere.
   ------------------------------------------------------------------------ */

.c-button,
.c-header__cta,
.c-burger,
.c-person__link,
.c-practice-row__link,
.c-pillar__hit,
.c-insight__hit {
  -webkit-tap-highlight-color: transparent;
}

.c-button:active,
.c-header__cta:active {
  transform: scale(0.985);
  transition-duration: 90ms;
}

.c-button--primary:active { background: var(--red-ink); }
.c-button--invert:active { background: var(--red); color: var(--white); }
.c-button--ghost:active { border-color: var(--ink); background: var(--ink); color: var(--ivory); }

/* Row targets settle rather than scale — a large surface that scales reads
   as the whole page flexing. */
.c-practice-row__link:active { background: rgba(23, 28, 34, 0.05); }

.c-person__link:active .c-person__frame { transform: scale(0.995); transition-duration: 90ms; }

/* The pillar and insight cards are activated through an overlay link, so the
   press has to be read from the card via :has(). Browsers without :has()
   simply get no press state rather than a broken one. */
.c-pillar:has(.c-pillar__hit:active) { background: rgba(23, 28, 34, 0.04); }

.c-insight:has(.c-insight__hit:active) .c-insight__inner {
  transform: scale(0.995);
  transition-duration: 90ms;
}

.c-burger:active .c-burger__lines { opacity: 0.6; }

/* Links in prose and the nav get a colour response, not a transform. */
.c-nav__link:active,
.c-footer a:active,
.c-prose a:active { color: var(--red-ink); }

/* ---------------------------------------------------------------------------
   Reduced transparency / increased contrast

   The floating pill (.c-header__inner::before) and the mobile drawer are
   translucent blurred surfaces. Both of these settings exist for exactly
   that: reduced-transparency asks for the frost to be dropped,
   increased-contrast asks for a defined edge. Fall back to the opaque
   colour each already carries as its non-blur base. The solid header bar
   (.is-stuck / .is-open) was never translucent enough to need it.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-transparency: reduce) {
  .c-header__inner::before,
  .c-mobile {
    background: var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .c-mobile { background: var(--surface); }
}

@media (prefers-contrast: more) {
  .c-header__inner::before {
    background: var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--rule-invert-strong);
  }
  .c-mobile {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  :focus-visible { outline-width: 3px; }
}