@charset "UTF-8";
/* ==========================================================================
   C.R. & F. ROJAS ABOGADOS — style.css
   Est. 1900 · 125 years
   --------------------------------------------------------------------------
   1.  TOKENS
   2.  RESET
   3.  BASE TYPE
   4.  LAYOUT
   5.  COMPONENTS
   6.  SECTIONS
   7.  PAGE-SPECIFIC
   8.  ANIMATION UTILITIES
   9.  RESPONSIVE
   10. REDUCED MOTION
   --------------------------------------------------------------------------
   Rules honoured throughout:
   · Radii are 0 everywhere except buttons/inputs at 2px.
   · No shadows. Depth comes from value contrast and hairline rules.
   · Only transform and opacity are animated.
   · Gold is accent only — never a background fill, never body text.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Palette ---------------------------------------------------------- */
  --navy-950: #0A1220;
  --navy-900: #101B2D;
  --navy-800: #16263F;
  --steel-700: #1E4A6B;
  --steel-500: #2C7BA0;
  --gold-500: #C9A227;
  --gold-300: #E3C558;
  --bone-050: #F5F2EC;
  --bone-100: #E9E4DA;
  --bone-200: #DAD4C8;
  --bone-300: #C5BEB2;

  /* Derived — kept as tokens so contrast is auditable in one place.
     Verified against WCAG AA (see §10 note in ASSETS.md):
       bone-050 on navy-950 ....... 15.9:1  AAA
       bone-200 on navy-950 ....... 12.1:1  AAA
       gold-500 on navy-950 ........ 6.6:1  AA  (large + small text)
       gold-300 on navy-950 ....... 10.0:1  AAA
       navy-950 on bone-050 ....... 15.9:1  AAA
       navy-900 on bone-050 ....... 14.4:1  AAA
       steel-700 on bone-050 ....... 6.4:1  AA
     gold-500 is NEVER used for body copy — labels, numerals, rules only. */
  --gold-rule: rgba(201, 162, 39, 0.28);
  --gold-rule-soft: rgba(201, 162, 39, 0.14);
  --gold-rule-strong: rgba(201, 162, 39, 0.55);
  --bone-rule: rgba(218, 212, 200, 0.16);
  --navy-rule: rgba(16, 27, 45, 0.14);
  --navy-rule-strong: rgba(16, 27, 45, 0.28);

  /* --- Signature gradient ----------------------------------------------- */
  --grad-angle: 105deg;
  --gradient-signature: linear-gradient(
    var(--grad-angle),
    var(--navy-950) 0%,
    var(--navy-900) 38%,
    var(--steel-700) 78%,
    var(--steel-500) 100%
  );

  /* --- Semantic surfaces ------------------------------------------------ */
  --surface-base: var(--navy-950);
  --surface-raised: var(--navy-900);
  --surface-elevated: var(--navy-800);
  --surface-light: var(--bone-050);
  --text-on-dark: var(--bone-050);
  --text-on-dark-muted: var(--bone-200);
  --text-on-light: var(--navy-950);
  --text-on-light-muted: #4A5768;
  --accent: var(--gold-500);
  --accent-hi: var(--gold-300);

  /* --- SURFACE-RELATIVE TOKENS -----------------------------------------
     Components read these, never the raw palette, so a surface can invert by
     re-declaring the tokens once instead of every component needing its own
     `.section--light .foo` override. That override pattern is why light
     sections previously felt bolted on — each new component silently
     inherited dark-only colour until someone remembered to add a rule.
     Dark is the default; .surface-light re-declares the same names. */
  --surface: var(--navy-950);
  --surface-2: var(--navy-900);        /* raised panel on this surface */
  --surface-3: var(--navy-800);        /* inset / media bed */
  --text: var(--bone-050);
  --heading: var(--bone-050);
  --text-muted: var(--bone-200);
  --text-quiet: rgba(218, 212, 200, 0.62);
  --rule: rgba(201, 162, 39, 0.28);
  --rule-soft: rgba(201, 162, 39, 0.14);
  --rule-strong: rgba(201, 162, 39, 0.55);
  --rule-neutral: rgba(218, 212, 200, 0.16);
  --link-on-surface: var(--gold-300);  /* meets AA on navy */
  /* Gold used as TEXT. On navy, gold-500 is 6.6:1. On bone it collapses to
     2.17:1, so the light surface substitutes a deepened gold (5.16:1) that
     still reads as the brand accent rather than switching to a cool colour.
     Gold-500 itself stays in use on light for RULES and BORDERS, which are
     decorative and not bound by text contrast. */
  --accent-on-surface: var(--gold-500);
  --field-line: rgba(201, 162, 39, 0.28);
  --placeholder: rgba(218, 212, 200, 0.5);
  --media-bed: var(--navy-800);

  /* --- Typography ------------------------------------------------------- */
  /* Two grotesques from different skeletons, so display and text read as
     distinct voices rather than one font at two sizes. Archivo carries the
     uppercase display weight; Instrument Sans is the text face — deliberately
     not Inter, which reads as a default. */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Display weights. Sans uppercase at 400 reads thin and accidental at these
     sizes; 600 is where it gains authority. */
  --wt-display: 600;
  --wt-display-light: 500;

  /* 7.1vw drove the 50-character hero headline to six lines at desktop, which
     made the tallest block on the site mostly leading. 5.6vw with a wider
     measure lands it at four. */
  --fs-hero: clamp(2.15rem, 5vw, 5.25rem);
  --lh-hero: 0.92;
  --fs-h1: clamp(2rem, 4.6vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 3.65vw, 3.25rem);
  --lh-h2: 1.02;
  --fs-h3: clamp(1.35rem, 2.3vw, 2.1rem);
  --fs-h4: clamp(1.15rem, 1.7vw, 1.5rem);
  --fs-stat: clamp(2.6rem, 5.8vw, 5.4rem);
  --fs-lead: clamp(1.4rem, 2.35vw, 2.2rem);
  --fs-body: 1.0625rem;
  --lh-body: 1.7;
  --fs-body-lg: 1.125rem;
  --lh-body-lg: 1.75;
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.6875rem;
  --ls-eyebrow: 0.28em;
  /* A grotesque needs tighter optical tracking than the serif it replaced,
     and large display sizes need more of it than mid-size headings. */
  --ls-display: -0.032em;
  --ls-display-tight: -0.042em;

  /* Tuned to RENDERED characters, not `ch`. The "0" glyph is ~35% wider than
     the average character in Instrument Sans, so 68ch measured 85 chars/line.
     52ch ≈ 70 rendered characters. */
  --measure: 52ch;
  --measure-tight: 40ch;

  /* --- Spacing scale ---------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-48: 192px;

  /* Clamped, not pure vh. 12vh grew unbounded with viewport height, so the
     gap between sections got worse the larger the display — 216px at 900px
     tall, 346px at 1440px. The vh term still lets short viewports breathe,
     but the ceiling holds the rhythm steady on big screens. */
  --section-pad: clamp(48px, 6.2vh, 92px);
  --section-pad-sm: clamp(30px, 4vh, 56px);

  /* --- Grid ------------------------------------------------------------- */
  --max-w: 1440px;
  --gutter: clamp(1.25rem, 4vw, 5rem);
  --grid-cols: 12;
  --grid-gap: clamp(1rem, 2vw, 2rem);

  /* --- Motion ----------------------------------------------------------- */
  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-power3-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-power2-out: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-enter: 1.2s;
  --dur-hover: 0.42s;
  --dur-transition: 0.9s;

  /* --- Layers ----------------------------------------------------------- */
  --z-scene: 0;
  --z-content: 10;
  --z-nav: 900;
  --z-megamenu: 950;
  --z-mobilenav: 960;
  --z-progress: 970;
  --z-curtain: 9000;
  --z-grain: 9998;
  --z-cursor: 9999;

  /* --- Misc ------------------------------------------------------------- */
  --radius-control: 2px;
  --border-offset: 12px;
  --nav-h: 84px;
  --nav-h-condensed: 68px;
}

/* Locale-driven quote marks so blockquotes are typographically correct in ES. */
:root:lang(es),
[lang="es"] {
  quotes: "«" "»" "\201C" "\201D";
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis owns scrolling; native smooth would fight it. */
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
  padding: 0;
}

ul[class],
ol[class] {
  list-style: none;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  border-style: none;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  border-radius: 0;
}

button {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

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

/* Focus: visible 2px gold outline at 3px offset on every interactive element. */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
}

/* Only suppress the ring for pointer users who have a :focus-visible-capable UA. */
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: var(--gold-500);
  color: var(--navy-950);
}

/* ==========================================================================
   3. BASE TYPE
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 300;
  font-synthesis-weight: none;
  color: var(--text);
  background-color: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* Cross-faded by ScrollTrigger at every dark<->light boundary. */
  transition: background-color 0.6s var(--ease-power2-out);
}

/* Set when JS confirms it booted; lets us gate progressive enhancements. */
body:not(.js-ready) .js-only {
  display: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  letter-spacing: var(--ls-display);
  color: var(--heading);
  text-wrap: balance;
  /* Long single words at display sizes otherwise overflow the measure — the
     element box stays in bounds while its text does not, so this is invisible
     to a rect-based overflow check. Spanish runs longer than English here
     ("constantemente", "internacionales"), so it bites in the ES tree first.
     hyphens:auto needs the lang attribute, which every page carries. */
  overflow-wrap: break-word;
  hyphens: auto;
}

.t-hero,
.t-h1,
.t-h2,
.t-h3,
.t-h4 {
  color: var(--heading);
}

.t-hero {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  text-transform: uppercase;
  font-weight: var(--wt-display);
  letter-spacing: var(--ls-display-tight);
}

.t-h1 {
  font-size: var(--fs-h1);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: var(--ls-display-tight);
}

.t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  text-transform: uppercase;
}

.t-h3 {
  font-size: var(--fs-h3);
  line-height: 1.14;
}

.t-h4 {
  font-size: var(--fs-h4);
  line-height: 1.24;
}

.t-lead {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.34;
  font-weight: 400;
  letter-spacing: -0.028em;
}

/* Eyebrow / label. Gold, uppercase, wide tracking. Never on lowercase body. */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-on-surface);
}

.eyebrow--muted {
  color: var(--bone-200);
}

.smallcaps {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

.prose > * + * {
  margin-top: var(--sp-6);
}

.prose p {
  color: var(--text-muted);
}

.prose a:not(.btn) {
  color: inherit;
  border-bottom: 1px solid var(--gold-rule-strong);
  padding-bottom: 1px;
}

/* Emphasis is gold or small caps — never italic. */
em,
i {
  font-style: normal;
  color: var(--link-on-surface);
}

strong,
b {
  font-weight: 600;
}

.measure {
  max-width: var(--measure);
}

.measure-tight {
  max-width: var(--measure-tight);
}

.text-muted {
  color: var(--text-muted);
}

.text-gold {
  color: var(--gold-500);
}

/* Accessible-hidden but focusable. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 10000;
  padding: var(--sp-3) var(--sp-6);
  background: var(--gold-500);
  color: var(--navy-950);
  font-size: var(--fs-small);
  font-weight: 600;
  border-radius: var(--radius-control);
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease-expo-out);
}

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

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Full-bleed band that still respects the shell for its inner content. */
.bleed {
  width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* Column counts live in CSS, never as an inline --grid-cols on the element:
   an inline custom property outranks every media query, so an inline count
   can never collapse on mobile. */
.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section {
  position: relative;
  padding-block: var(--section-pad);
}

/* Two sections that butt directly against each other pay the padding twice, so
   the visual gap is double what either one asked for. A content change already
   reads as a boundary; it does not need 2x the rhythm. Where a .seam sits
   between two sections this selector correctly does not match — the seam is
   the separation there. */
.section + .section {
  padding-block-start: calc(var(--section-pad) * 0.4);
}

.section + .section.section--tight {
  padding-block-start: calc(var(--section-pad-sm) * 0.5);
}

/* A section immediately after a seam has already been given breathing room by
   the gradient band, so it starts tighter. */
.seam + .section {
  padding-block-start: calc(var(--section-pad) * 0.62);
}

.section--tight {
  padding-block: var(--section-pad-sm);
}

.section--flush-top {
  padding-block-start: 0;
}

/* ---------------------------------------------------------------------------
   LIGHT SURFACE
   The same token names, re-declared. Every component that reads the
   surface-relative tokens inverts automatically — no per-component overrides.

   Where light is used, and why: light carries the surfaces a reader DWELLS on
   or WORKS on — long-form bulletins, the roster of people, practice overviews,
   the contact form. Dark carries the institution and the atmosphere — heroes,
   the pillars, global reach, clients, recognition, every closing CTA. That rule
   is what keeps this from reading as random alternation; a light section always
   means "stay here and read", never "here is a different colour".
   --------------------------------------------------------------------------- */

.surface-light,
.section--light,
.article {
  --surface: var(--bone-050);
  --surface-2: #EDE8DE;
  --surface-3: #E2DBCD;
  --text: var(--navy-950);
  /* A slightly lifted navy reads visibly blue rather than near-black while
     retaining the authority and contrast expected of the firm's headings. */
  --heading: var(--navy-800);
  --text-muted: #4A5768;
  --text-quiet: #6B7789;
  /* Gold needs more presence on bone than on navy to read as the same rule. */
  --rule: rgba(201, 162, 39, 0.5);
  --rule-soft: rgba(16, 27, 45, 0.12);
  --rule-strong: rgba(201, 162, 39, 0.8);
  --rule-neutral: rgba(16, 27, 45, 0.12);
  /* gold-500 on bone is only 2.1:1 — nowhere near AA. Links on light use
     steel-700 (6.4:1) and keep gold for rules and numerals only. */
  --link-on-surface: var(--steel-700);
  --accent-on-surface: #7E6212;
  --field-line: rgba(16, 27, 45, 0.28);
  --placeholder: rgba(16, 27, 45, 0.45);
  /* Portrait beds stay navy on light: a framed navy plate with the offset gold
     rule reads as a deliberate device, and the portraits are pre-composited
     over navy-800 so a light bed would show a hard edge. */
  --media-bed: var(--navy-800);

  background: var(--surface);
  color: var(--text);
}

/* Dark island inside a light surface. Re-declares the dark defaults so nested
   dark blocks — the article head on the signature gradient, chiefly — get the
   right token values instead of inheriting the light parent's. */
.surface-dark,
.article__head {
  --surface: var(--navy-950);
  --surface-2: var(--navy-900);
  --surface-3: var(--navy-800);
  --text: var(--bone-050);
  --heading: var(--bone-050);
  --text-muted: var(--bone-200);
  --text-quiet: rgba(218, 212, 200, 0.62);
  --rule: rgba(201, 162, 39, 0.28);
  --rule-soft: rgba(201, 162, 39, 0.14);
  --rule-strong: rgba(201, 162, 39, 0.55);
  --rule-neutral: rgba(218, 212, 200, 0.16);
  --link-on-surface: var(--gold-300);
  --accent-on-surface: var(--gold-500);
  --field-line: rgba(201, 162, 39, 0.28);
  --placeholder: rgba(218, 212, 200, 0.5);
  --media-bed: var(--navy-800);
  color: var(--text);
}

/* ---------------------------------------------------------------------------
   SEAM
   The audit's warning about light/dark jumps is really a warning about hard
   edges. A seam is a short full-bleed band that interpolates one surface into
   the next, so the transition is a gradient the eye reads as depth rather than
   a butt-joint that reads as two pasted templates. The global grain overlay
   continues across it, which does most of the work.
   --------------------------------------------------------------------------- */

.seam {
  position: relative;
  width: 100%;
  height: clamp(56px, 9vh, 132px);
  pointer-events: none;
  flex: none;
  /* Clips the bloom layer, whose -10% inline bleed (for soft gradient edges)
     would otherwise widen the document at narrow viewports. */
  overflow: hidden;
}

/* Multi-stop and deliberately uneven. A three-stop navy→neutral→bone ramp goes
   muddy in the middle, because it drags a cool hue through grey into a warm one
   and the midpoint lands on mud. Holding the navy family for the first ~55% and
   then opening quickly reads as light arriving rather than as a grey wash. */
.seam--to-light {
  background: linear-gradient(
    to bottom,
    var(--navy-950) 0%,
    var(--navy-900) 30%,
    #1d2a3d 52%,
    #4a5261 70%,
    #9a9589 85%,
    #d8d2c6 94%,
    var(--bone-050) 100%
  );
}

/* Mirrored, and faster at the top: leaving a light surface should feel like the
   page closing down rather than fading out. */
.seam--to-dark {
  background: linear-gradient(
    to bottom,
    var(--bone-050) 0%,
    #d8d2c6 8%,
    #9a9589 18%,
    #4a5261 33%,
    #1d2a3d 52%,
    var(--navy-900) 74%,
    var(--navy-950) 100%
  );
}

/* From the raised navy rather than the base, when that is the outgoing tone. */
.seam--from-raised.seam--to-light {
  background: linear-gradient(
    to bottom,
    var(--navy-800) 0%,
    var(--navy-900) 26%,
    #1f2d41 50%,
    #4a5261 70%,
    #9a9589 85%,
    #d8d2c6 94%,
    var(--bone-050) 100%
  );
}

/* --- Seam motion ------------------------------------------------------
   The passage between the dark and light worlds is the site's authored
   scroll moment: as a seam crosses the viewport, a soft bloom rises at the
   horizon line and a gold hairline draws across, both scrubbed by scroll.
   Dark->light draws left-to-right (light arriving); light->dark draws
   right-to-left (the page closing down).

   Both layers are driven by custom properties:
     --seam-line   scaleX of the gold hairline   (default 1 — drawn)
     --seam-glow   opacity of the horizon bloom  (default 0 — decorative)
   No JS, no GSAP, and reduced-motion all resolve to a static, correct seam. */

.seam::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  height: 1px;
  background: rgba(201, 162, 39, 0.34);
  transform: scaleX(var(--seam-line, 1));
  transform-origin: left center;
}

.seam--to-dark::after {
  transform-origin: right center;
}

/* Horizon bloom. A wide soft ellipse of warm light sitting exactly on the
   boundary line — dawn on the way into a light surface, dusk on the way out.
   Pure gradient + opacity: no blur, no filters, cheap to composite. */
.seam::before {
  content: "";
  position: absolute;
  inset-inline: -10%;
  inset-block-start: 50%;
  height: 140%;
  translate: 0 -50%;
  pointer-events: none;
  background: radial-gradient(
    58% 46% at 50% 50%,
    rgba(227, 197, 88, 0.16) 0%,
    rgba(245, 242, 236, 0.09) 38%,
    transparent 72%
  );
  opacity: var(--seam-glow, 0);
}

.seam--to-dark::before {
  /* Cooler and dimmer on the way down. */
  background: radial-gradient(
    58% 46% at 50% 50%,
    rgba(44, 123, 160, 0.14) 0%,
    rgba(227, 197, 88, 0.06) 40%,
    transparent 72%
  );
}

@media (prefers-reduced-motion: reduce) {
  .seam::after {
    transform: none;
  }

  .seam::before {
    opacity: 0;
  }
}

.section--raised {
  /* Nace y muere en el navy base para que la union con las secciones vecinas
     sea un fundido y no un corte entre dos planos. */
  background: linear-gradient(
    to bottom,
    var(--navy-950) 0%,
    var(--navy-900) 14%,
    var(--navy-900) 86%,
    var(--navy-950) 100%
  );
}

.section--elevated {
  background: var(--surface-elevated);
}

/* Structural hairline. */
.rule {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--rule);
  transform-origin: left center;
}

.rule--bone {
  background: var(--bone-rule);
}

.rule--dark {
  background: var(--navy-rule);
}

/* Section header: eyebrow + title, deliberately not centred. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: 22ch;
}

.section-head--wide {
  max-width: 40ch;
}

.section-head__title {
  margin: 0;
}

/* Asymmetric split used by mission, global reach, timeline. */
.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}

.split--40-60 {
  grid-template-columns: 4fr 6fr;
}

.split__sticky {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-12));
}

/* Fixed 2px gold scroll-progress hairline. */
.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  z-index: var(--z-progress);
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* Full-page film grain. Fixed, never scrolls, never intercepts pointer. */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: var(--grain-uri);
  background-size: 220px 220px;
  will-change: auto;
}

/* Page-transition curtain. */
.curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  background: var(--navy-950);
  transform: scaleY(0);
  transform-origin: bottom center;
  pointer-events: none;
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- 5.1 Buttons ------------------------------------------------------- */

.btn {
  --btn-pad-y: 1.05rem;
  --btn-pad-x: 2rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color var(--dur-hover) var(--ease-power2-out),
    color var(--dur-hover) var(--ease-power2-out),
    border-color var(--dur-hover) var(--ease-power2-out);
  will-change: transform;
}

.btn--primary {
  background: var(--gold-500);
  color: var(--navy-950);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--gold-300);
}

.btn--ghost {
  border: 1px solid var(--gold-500);
  color: var(--link-on-surface);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(201, 162, 39, 0.1);
  border-color: var(--gold-300);
  color: var(--gold-300);
}

.section--light .btn--ghost {
  border-color: var(--navy-900);
  color: var(--navy-900);
}

.section--light .btn--ghost:hover,
.section--light .btn--ghost:focus-visible {
  background: var(--navy-900);
  color: var(--bone-050);
}

.btn--lg {
  --btn-pad-y: 1.3rem;
  --btn-pad-x: 2.6rem;
  font-size: 0.875rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* --- 5.2 Text link with wiping gold underline --------------------------- */

.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--link-on-surface);
  padding-block-end: 0.45em;
}

.link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-hover) var(--ease-power2-out);
}

.link:hover::after,
.link:focus-visible::after {
  transform: scaleX(1);
}

/* Wipe out to the right on leave. */
.link:not(:hover)::after {
  transform-origin: right center;
}

.link__arrow {
  transition: transform var(--dur-hover) var(--ease-power2-out);
}

.link:hover .link__arrow {
  transform: translateX(4px);
}

/* --- 5.3 Custom cursor (desktop only; enabled by JS) ------------------- */

.cursor-dot,
.cursor-ring {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  will-change: transform;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--gold-500);
  transition: opacity 0.3s linear, background-color 0.3s var(--ease-power2-out);
}

.cursor-ring {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 1px solid var(--gold-rule-strong);
  transition: opacity 0.3s linear, border-color 0.3s var(--ease-power2-out);
}

body.cursor-active .cursor-dot,
body.cursor-active .cursor-ring {
  opacity: 1;
}

body.cursor-inverted .cursor-dot {
  background: var(--bone-050);
}

body.cursor-inverted .cursor-ring {
  border-color: rgba(245, 242, 236, 0.5);
}

/* Sobre una superficie clara, oro a 2.17:1 es invisible: el cursor pasa a
   navy. script.js alterna la clase desde los mismos [data-bg] que gobiernan
   el cross-fade del fondo, asi que cursor y fondo cambian juntos. */
body.cursor-on-light .cursor-dot {
  background: var(--navy-900);
}

body.cursor-on-light .cursor-ring {
  border-color: rgba(16, 27, 45, 0.45);
}

/* Hide the native cursor only once ours is confirmed running. */
body.cursor-active,
body.cursor-active a,
body.cursor-active button {
  cursor: none;
}

/* --- 5.4 Navigation ---------------------------------------------------- */

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: height 0.5s var(--ease-power2-out),
    background-color 0.5s var(--ease-power2-out);
  will-change: transform;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nav.is-condensed {
  height: var(--nav-h-condensed);
  background: rgba(16, 27, 45, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nav.is-condensed::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--gold-rule);
}

/* Wordmark — the real brand lockup. The reverse variant (navy letterforms
   remapped to bone, gold 125 preserved) is used on every dark surface; the
   original navy version is used on the light article/firm surfaces. */
.wordmark {
  display: inline-block;
  flex: 0 0 auto;
  transform-origin: left center;
  transition: transform 0.5s var(--ease-power2-out);
}

.wordmark__img {
  display: block;
  width: clamp(150px, 13vw, 190px);
  height: auto;
}

.nav.is-condensed .wordmark {
  transform: scale(0.85);
}

/* The nav and footer are always on a dark surface, so only the reverse
   lockup ships in the chrome. assets/brand/logo-lockup.png (navy) is kept
   for print, email signatures, and any future light-surface use. */
.footer__wordmark .wordmark__img {
  width: clamp(168px, 15vw, 208px);
}

/* ---------------------------------------------------------------------------
   NAV OVER A LIGHT SURFACE
   The nav is fixed and transparent until it condenses. An attorney profile
   opens straight into a bone surface, so a white lockup and white links would
   be invisible there. script.js samples which [data-bg] section sits under the
   nav and toggles .nav--on-light. Once condensed the nav has its own navy
   backdrop, so the inversion is explicitly withdrawn.
   --------------------------------------------------------------------------- */

.wordmark__img--dark {
  display: none;
}

.nav--on-light:not(.is-condensed) .wordmark__img--reverse {
  display: none;
}

.nav--on-light:not(.is-condensed) .wordmark__img--dark {
  display: block;
  /* The navy lockup includes "Est. 1900" beneath, so it is taller at the same
     width — hold the optical size steady across the swap. */
  width: clamp(135px, 11.3vw, 166px);
}

.nav--on-light:not(.is-condensed) .nav__link,
.nav--on-light:not(.is-condensed) .lang,
.nav--on-light:not(.is-condensed) .nav__toggle {
  color: var(--navy-900);
}

.nav--on-light:not(.is-condensed) .lang__current {
  color: var(--steel-700);
}

.nav--on-light:not(.is-condensed) .nav__link[aria-current="page"] {
  color: var(--steel-700);
}

/* Nav list */
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
}

.nav__link {
  position: relative;
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--bone-050);
  padding-block: var(--sp-2);
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-hover) var(--ease-power2-out);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__item.is-open > .nav__link::after {
  transform: scaleX(1);
}

.nav__link[aria-current="page"] {
  color: var(--gold-300);
}

.nav__item {
  position: relative;
}

.nav__item--has-panel > .nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
}

.nav__caret {
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--dur-hover) var(--ease-power2-out);
}

.nav__item.is-open .nav__caret {
  transform: rotate(225deg) translateY(-2px);
}

.nav__utils {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

/* Language toggle */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4ch;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--bone-200);
}

.lang__current {
  color: var(--gold-500);
}

.lang__sep {
  opacity: 0.4;
}

/* --- 5.5 Mega-menu ---------------------------------------------------- */

.panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  z-index: var(--z-megamenu);
  width: min(1180px, calc(100vw - var(--gutter) * 2));
  transform: translateX(-50%);
  background: rgba(10, 18, 32, 0.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--gold-rule);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 -8px;
  transition: opacity 0.34s var(--ease-power2-out),
    translate 0.34s var(--ease-power2-out), visibility 0.34s;
}

.nav__item.is-open .panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: 0 0;
}

.panel--narrow {
  width: min(720px, calc(100vw - var(--gutter) * 2));
}

.panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 0.9fr;
  gap: 0;
}

.panel__col {
  padding: var(--sp-8) var(--sp-6);
  border-inline-end: 1px solid var(--gold-rule-soft);
}

.panel__col:first-child {
  padding-inline-start: var(--sp-8);
}

.panel__head {
  margin-block-end: var(--sp-6);
}

.panel__link {
  display: block;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--bone-200);
  padding-block: 0.42em;
  transition: color var(--dur-hover) var(--ease-power2-out),
    transform var(--dur-hover) var(--ease-power2-out);
}

.panel__link:hover,
.panel__link:focus-visible {
  color: var(--gold-300);
  transform: translateX(4px);
}

/* Right-hand promo showing the most recent bulletin. */
.panel__promo {
  padding: var(--sp-8);
  background: var(--navy-900);
  border-inline-end: 0;
}

.panel__promo-date {
  margin-block-end: var(--sp-3);
}

.panel__promo-title {
  font-weight: 500;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.24;
  color: var(--bone-050);
  margin-block-end: var(--sp-4);
}

.panel__networks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: var(--sp-6);
}

.panel__network {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  padding: var(--sp-4);
  transition: background-color var(--dur-hover) var(--ease-power2-out);
}

.panel__network:hover,
.panel__network:focus-visible {
  background: rgba(201, 162, 39, 0.07);
}

.panel__network-name {
  font-weight: 500;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--bone-050);
}

.panel__network-note {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-500);
}

/* --- 5.6 Mobile navigation overlay ------------------------------------ */

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-end: calc(var(--sp-3) * -1);
  color: var(--bone-050);
}

.nav__toggle-bars {
  position: relative;
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
}

.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease-power3-inout);
}

.nav__toggle-bars::before {
  inset-block-start: -7px;
}

.nav__toggle-bars::after {
  inset-block-start: 7px;
}

body.mobilenav-open .nav__toggle-bars {
  background: transparent;
}

body.mobilenav-open .nav__toggle-bars::before {
  transform: translateY(7px) rotate(45deg);
}

body.mobilenav-open .nav__toggle-bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

.mobilenav {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobilenav);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + var(--sp-8)) var(--gutter) var(--sp-8);
  background: var(--navy-950);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-power3-inout), visibility 0.45s;
}

body.mobilenav-open .mobilenav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobilenav__list {
  display: flex;
  flex-direction: column;
  border-block-start: 1px solid var(--gold-rule-soft);
}

.mobilenav__item {
  border-block-end: 1px solid var(--gold-rule-soft);
}

.mobilenav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  min-height: 56px;
  padding-block: var(--sp-4);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6.5vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--bone-050);
  text-align: start;
}

.mobilenav__link[aria-expanded="true"] {
  color: var(--gold-300);
}

.mobilenav__plus {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--gold-500);
}

.mobilenav__plus::before,
.mobilenav__plus::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease-power3-inout);
}

.mobilenav__plus::after {
  transform: rotate(90deg);
}

.mobilenav__link[aria-expanded="true"] .mobilenav__plus::after {
  transform: rotate(0deg);
}

/* Accordion body — height animated by JS via max-height for reliability. */
.mobilenav__sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s var(--ease-power3-inout);
}

.mobilenav__sub-inner {
  padding-block: var(--sp-2) var(--sp-6);
  display: grid;
  gap: 0.15em;
}

.mobilenav__sub-link {
  display: block;
  min-height: 44px;
  padding-block: 0.6em;
  font-size: 0.9375rem;
  color: var(--bone-200);
}

.mobilenav__foot {
  margin-block-start: auto;
  padding-block-start: var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* --- 5.7 Portrait frame ----------------------------------------------- */

/* The architectural framing device: 1px gold border offset 12px down-right.
   Used for attorney portraits and the scene-image frames alike. */
.framed {
  position: relative;
  display: block;
  background: var(--media-bed);
  /* Reserve room for the offset border below. Without this the ::after
     translates past the layout box and pushes the document sideways —
     visible as horizontal overflow at 320px. */
  margin-inline-end: var(--border-offset);
  margin-block-end: var(--border-offset);
}

.framed::after {
  content: "";
  position: absolute;
  inset: 0;
  translate: var(--border-offset) var(--border-offset);
  border: 1px solid var(--gold-500);
  pointer-events: none;
  z-index: 1;
}

.framed--thick::after {
  border-width: 2px;
}

.framed > img,
.framed > picture > img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Portrait: navy duotone by default, full colour on reveal.
   The grade is applied in CSS (never baked into the file) so it can be
   toggled, and so six separate photo shoots read as one firm. */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--media-bed);
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  /* The portraits are cut-outs composited onto navy-800 (the frame colour), so
     unlike a white-background photo they start out dark. A brightness lift and
     extra contrast keep the subject legible instead of collapsing into
     navy-on-navy. */
  /* Colour by default. Only a light normalisation remains: the cut-outs are
     composited onto navy-800 and start slightly dark, and twenty separate
     photographs still need to read as one firm. */
  filter: contrast(1.04) brightness(1.12) saturate(1.02);
  transform: translate3d(var(--portrait-shift-x, 0), var(--portrait-shift-y, 0), 0)
    scale(var(--portrait-scale, 1));
  transition: transform 0.9s var(--ease-expo-out);
}

/* Navy colour overlay = the duotone. 4% gold in the midtones via a second
   low-opacity layer so highlights stay warm rather than going flat blue. */
.portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--navy-900);
  mix-blend-mode: color;
  /* At full strength this flattened the whole card to one navy value once the
     backgrounds were composited to navy. 0.55 still unifies twenty separate
     photographs into one firm while leaving a readable value range. */
  /* Apagado: los retratos van a color; un solo valor lo reactivaria. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--ease-expo-out);
}

.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--gold-500);
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--ease-expo-out);
}

/* Hover: el marco se cierra. El borde dorado desplazado 12px — el dispositivo
   arquitectonico de todo el sitio — se desliza hasta casi alinearse con el
   retrato, y la foto responde con un zoom minimo y lento. El color ya esta;
   la recompensa del hover es el encuadre completandose. */
.lawyer-card:hover .portrait img,
.lawyer-card:focus-within .portrait img {
  transform: translate3d(var(--portrait-shift-x, 0), var(--portrait-shift-y, 0), 0)
    scale(var(--portrait-hover-scale, 1.035));
}

.lawyer-card .framed::after {
  transition: translate 0.6s var(--ease-expo-out);
}

.lawyer-card:hover .framed::after,
.lawyer-card:focus-within .framed::after {
  translate: 3px 3px;
}

/* Typographic fallback when no photograph exists. */
.portrait--fallback {
  display: grid;
  place-items: center;
  background: var(--media-bed);
}

.portrait--fallback::before,
.portrait--fallback::after {
  content: none;
}

.portrait__initials {
  font-weight: 600;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--gold-500);
}

/* --- 5.8 Lawyer card -------------------------------------------------- */

.lawyer-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* .framed already reserves the offset-border space in both axes. */

.lawyer-card__name {
  font-weight: 500;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  line-height: 1.16;
  color: var(--heading);
}

.lawyer-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5ch;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.lawyer-card__sep {
  color: var(--accent-on-surface);
}

.lawyer-card__lede {
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 34ch;
}

/* Filter chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.chip {
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: border-color var(--dur-hover) var(--ease-power2-out),
    color var(--dur-hover) var(--ease-power2-out),
    background-color var(--dur-hover) var(--ease-power2-out);
}

.chip:hover,
.chip:focus-visible {
  border-color: var(--gold-500);
  color: var(--link-on-surface);
}

.chip[aria-pressed="true"] {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-950);
}

/* --- 5.9 Practice type grid ------------------------------------------- */

/* Dense alphabetised editorial list — deliberately not cards. */
.practice-list {
  border-block-start: 1px solid var(--rule);
}

.practice-row {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: clamp(0.85rem, 1.5vw, 1.35rem);
  border-block-end: 1px solid var(--rule-soft);
  transition: opacity 0.3s var(--ease-power2-out);
}

.practice-row__num {
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--accent-on-surface);
  font-variant-numeric: tabular-nums;
}

.practice-row__name {
  font-weight: 600;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.75vw, 2.1rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--heading);
  /* Long single words — "INTERNACIONAL", "FARMACÉUTICA" — otherwise push the
     document sideways at 320px, and Spanish runs longer than English here. */
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  transition: transform var(--dur-hover) var(--ease-power2-out),
    color var(--dur-hover) var(--ease-power2-out);
}

.practice-row__meta {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-power2-out);
}

/* Gold hairline wipes in beneath the row. */
.practice-row::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-hover) var(--ease-power2-out);
}

.practice-row:hover::after,
.practice-row:focus-visible::after {
  transform: scaleX(1);
}

.practice-row:hover .practice-row__name,
.practice-row:focus-visible .practice-row__name {
  transform: translateX(8px);
  color: var(--link-on-surface);
}

.practice-row:hover .practice-row__meta,
.practice-row:focus-visible .practice-row__meta {
  opacity: 1;
}

/* Focus effect: siblings drop to 40%. */
.practice-list.is-focusing .practice-row:not(:hover):not(:focus-visible) {
  opacity: 0.4;
}

.practice-row.is-hidden {
  display: none;
}

/* Live filter input */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-end: var(--sp-8);
}

.filter-input-wrap {
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
}

.filter-input {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0 0.7rem 0;
  border-block-end: 1px solid var(--rule);
  border-radius: 0;
  font-size: 1rem;
  color: var(--text);
  transition: border-color var(--dur-hover) var(--ease-power2-out);
}

.filter-input::placeholder {
  color: rgba(218, 212, 200, 0.5);
}

.filter-input:focus {
  outline: none;
  border-block-end-color: var(--gold-500);
}

.filter-input-wrap::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-hover) var(--ease-power2-out);
}

.filter-input:focus ~ .filter-underline,
.filter-input-wrap:focus-within::after {
  transform: scaleX(1);
}

.filter-count {
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--accent-on-surface);
  font-variant-numeric: tabular-nums;
}

/* --- 5.10 Insight card ----------------------------------------------- */

.insight-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--grid-gap) var(--grid-gap);
}

.insight-card {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--rule-soft);
  transition: transform 0.5s var(--ease-power2-out);
  will-change: transform;
}

/* First item double-width. */
.insight-card--feature {
  grid-column: span 4;
}

.insight-card::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: 0;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-hover) var(--ease-power2-out);
}

.insight-card:hover,
.insight-card:focus-within {
  transform: translateY(-6px);
}

.insight-card:hover::before,
.insight-card:focus-within::before {
  transform: scaleX(1);
}

/* Newsletter artwork is consistently framed across the full archive. The lead
   story keeps a wider crop; supporting cards use a quieter editorial 3:2. */
.insight-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-block-end: var(--sp-2);
  background-color: var(--navy-800);
  background-size: cover;
  background-position: center;
}

.insight-card--feature .insight-card__media {
  aspect-ratio: 16 / 9;
}

.insight-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.7s var(--ease-expo-out);
}

.insight-card:hover .insight-card__media img,
.insight-card:focus-within .insight-card__media img {
  transform: scale(1.045);
}

/* Same grade language as the portraits and scenes, lighter — an index image is
   support, not the subject. Eases back on hover. */
.insight-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--navy-900);
  mix-blend-mode: color;
  opacity: 0.46;
  transition: opacity 0.7s var(--ease-expo-out);
}

.insight-card:hover .insight-card__media::after,
.insight-card:focus-within .insight-card__media::after {
  opacity: 0.18;
}

.section--light .insight-card__media::after {
  opacity: 0.3;
}

/* --- Article hero image --------------------------------------------- */

.article__media {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 240px;
  overflow: hidden;
  background-color: var(--navy-900);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.article__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article__media-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--navy-900);
  mix-blend-mode: color;
  opacity: 0.5;
}

.article__media-caption {
  padding: var(--sp-3) 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .article__media {
    aspect-ratio: 3 / 2;
  }
}

/* --- Newsletter band with imagery ----------------------------------- */

/* The newsletter is one of the two primary conversions, so on the insights
   index it gets a real band rather than a bare form on flat navy. */
.newsletter-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--navy-800);
  border-block: 1px solid var(--gold-rule);
}

.newsletter-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}

.newsletter-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.newsletter-band__grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--navy-900);
  mix-blend-mode: color;
  opacity: 0.62;
}

.newsletter-band__wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(10, 18, 32, 0.94) 0%,
    rgba(10, 18, 32, 0.72) 52%,
    rgba(10, 18, 32, 0.34) 100%
  );
}

.newsletter-band__inner {
  position: relative;
  z-index: 3;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

@media (max-width: 900px) {
  .newsletter-band__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

.insight-card__date {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-on-surface);
  font-variant-numeric: tabular-nums;
}

.insight-card__title {
  font-weight: 500;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height: 1.18;
  color: var(--heading);
}

.insight-card--feature .insight-card__title {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.08;
}

.insight-card__excerpt {
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 52ch;
}

.insight-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5ch var(--sp-3);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.insight-card__foot {
  margin-block-start: auto;
  padding-block-start: var(--sp-4);
}

.insight-card.is-hidden {
  display: none;
}

/* Homepage intelligence is a disciplined three-column editorial row: equal
   image ratios, equal card widths and aligned calls to action. */
.insight-grid--home {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.75rem);
  align-items: stretch;
}

.insight-grid--home .insight-card,
.insight-grid--home .insight-card--feature {
  grid-column: auto;
  height: 100%;
}

.insight-grid--home .insight-card__media,
.insight-grid--home .insight-card--feature .insight-card__media {
  aspect-ratio: 3 / 2;
}

.insight-grid--home .insight-card__title,
.insight-grid--home .insight-card--feature .insight-card__title {
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  line-height: 1.18;
}

/* --- 5.11 Newsletter capture ----------------------------------------- */

.newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-4);
}

.newsletter__field {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}

.newsletter__input {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0;
  border-block-end: 1px solid var(--rule);
  font-size: 1rem;
  color: var(--text);
}

.newsletter__input::placeholder {
  color: rgba(218, 212, 200, 0.5);
}

.newsletter__input:focus {
  outline: none;
}

.newsletter__field::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-hover) var(--ease-power2-out);
}

.newsletter__field:focus-within::after {
  transform: scaleX(1);
}

.newsletter__msg {
  font-size: var(--fs-small);
  color: var(--link-on-surface);
  min-height: 1.5em;
}

.newsletter__msg[data-state="error"] {
  color: #E9A0A0;
}

.newsletter.is-done .newsletter__form {
  display: none;
}

.newsletter__success {
  font-weight: 500;
  display: none;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--link-on-surface);
}

.newsletter.is-done .newsletter__success {
  display: block;
}

/* --- 5.12 Contact form ----------------------------------------------- */

.form {
  display: grid;
  gap: var(--sp-8);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
}

.field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-on-surface);
}

.field__control {
  position: relative;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 44px;
  padding: 0.75rem 0;
  border-block-end: 1px solid var(--rule);
  border-radius: var(--radius-control);
  font-size: 1rem;
  color: var(--text);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-inline-end: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-500) 50%),
    linear-gradient(135deg, var(--gold-500) 50%, transparent 50%);
  background-position: calc(100% - 12px) 1.35rem, calc(100% - 7px) 1.35rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field select option {
  background: var(--navy-900);
  color: var(--bone-050);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
}

.field__control::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-hover) var(--ease-power2-out);
}

.field__control:focus-within::after {
  transform: scaleX(1);
}

.field__error {
  font-size: 0.8125rem;
  color: #E9A0A0;
  min-height: 1.4em;
}

.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select {
  border-block-end-color: #E9A0A0;
}

.form__note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  max-width: 60ch;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--rule-soft);
}

.form__status {
  font-weight: 500;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--link-on-surface);
}

.form.is-sent .form__fields,
.form.is-sent .form__actions {
  display: none;
}

.section--light .field select option {
  background: var(--bone-050);
  color: var(--navy-950);
}

/* --- 5.13 Marquee ---------------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--rule);
  padding-block: var(--sp-7);
  /* Feather the edges so items don't hard-clip at the viewport. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  width: max-content;
  will-change: transform;
}

.marquee__item {
  display: grid;
  place-items: center;
  width: clamp(10rem, 16vw, 14rem);
  height: 6rem;
}

.marquee__logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 4.8rem;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 220ms ease;
}

.marquee__item:hover .marquee__logo {
  opacity: 1;
}

.marquee__item--legal500 .marquee__logo {
  max-height: 5.8rem;
}

.marquee__item--iflr1000 .marquee__logo {
  max-width: 10.5rem;
}

.marquee__item--latin-lawyer-250 .marquee__logo {
  max-width: 11.5rem;
}

/* --- 5.14 Network lockup --------------------------------------------- */

.network {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--sp-6);
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  border-block-end: 1px solid var(--gold-rule-soft);
}

.network__name {
  font-weight: 600;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.8vw, 3rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--heading);
  transition: color var(--dur-hover) var(--ease-power2-out);
}

.network:hover .network__name {
  color: var(--link-on-surface);
}

.network__badge {
  display: block;
  margin-block: var(--sp-3);
}

.network__desc {
  font-size: var(--fs-small);
  color: var(--text-muted);
  max-width: 58ch;
}

.network__logo {
  height: clamp(26px, 3vw, 40px);
  width: auto;
  max-width: 210px;
  object-fit: contain;
  object-position: right center;
  /* The logos are pre-normalised to white-on-transparent by
     tools/make-network-logos.py, so no brightness lift is needed — that would
     blow out Multilaw's gradient mark. grayscale() is kept so seven different
     brand palettes still read as one row. */
  filter: grayscale(1);
  opacity: 0.72;
  transition: opacity var(--dur-hover) var(--ease-power2-out);
}

.network:hover .network__logo,
.network:focus-visible .network__logo {
  opacity: 1;
}

/* Homepage network index: a calibrated logo rail with the evidence aligned
   alongside it. The full Global Reach page retains its detailed treatment. */
.network.network--home {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.network--home .network__mark {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: clamp(68px, 7vw, 92px);
}

.network--home .network__logo--home {
  width: min(100%, 240px);
  height: auto;
  max-width: none;
  max-height: 78px;
  object-position: left center;
  filter: none;
  opacity: 0.9;
}

.network--world-services-group .network__logo--home,
.network--club-abogados-ibero .network__logo--home {
  width: min(100%, 260px);
  max-height: 88px;
}

.network--home .network__desc {
  max-width: 46ch;
  margin: 0;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .network.network--home {
    grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .network.network--home {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
  }
}

.network__sub {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-6);
  border-inline-start: 1px solid var(--gold-rule);
}

.network__sub-name {
  font-weight: 500;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--bone-050);
}

.network__sub-desc {
  font-size: 0.8125rem;
  color: var(--bone-200);
}

/* --- 5.15 Numbered services grid ------------------------------------- */

.services {
  border-block-start: 1px solid var(--rule);
}

.service-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: clamp(0.9rem, 1.6vw, 1.4rem);
  border-block-end: 1px solid var(--rule-soft);
}

.service-row__num {
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--accent-on-surface);
  font-variant-numeric: tabular-nums;
}

.service-row__text {
  font-size: var(--fs-body-lg);
  line-height: 1.45;
  color: var(--text);
  max-width: 62ch;
}

/* --- 5.16 Footer ----------------------------------------------------- */

.footer {
  position: relative;
  background: var(--navy-950);
  padding-block: clamp(3.5rem, 7vw, 6.5rem) var(--sp-8);
  border-block-start: 1px solid var(--gold-rule);
}

.footer--compact {
  padding-block-start: clamp(2rem, 3vw, 3.25rem);
}

.footer__mast {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.footer__mast--quiet {
  grid-template-columns: minmax(0, 1fr);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer__intro {
  max-width: 34ch;
  font-size: clamp(1.125rem, 1.55vw, 1.35rem);
  line-height: 1.5;
  color: var(--bone-100);
}

.footer__newsletter {
  max-width: 620px;
}

.footer__newsletter .newsletter {
  gap: var(--sp-3);
}

.footer__linkedin {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  width: min(100%, 390px);
  margin-block-start: var(--sp-8);
  padding: var(--sp-4);
  border: 1px solid var(--gold-rule);
  transition: border-color var(--dur-hover) var(--ease-power2-out),
    background-color var(--dur-hover) var(--ease-power2-out);
}

.footer__linkedin:hover,
.footer__linkedin:focus-visible {
  border-color: var(--gold-500);
  background: rgba(201, 162, 39, 0.06);
}

.footer__linkedin-mark {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity var(--dur-hover) var(--ease-power2-out);
}

.footer__linkedin:hover .footer__linkedin-mark,
.footer__linkedin:focus-visible .footer__linkedin-mark {
  opacity: 1;
}

.footer__linkedin-copy {
  display: grid;
  gap: 0.1rem;
  color: var(--bone-050);
  font-size: 0.875rem;
  line-height: 1.3;
}

.footer__linkedin-copy strong {
  font-weight: 500;
}

.footer__linkedin-copy small {
  color: var(--bone-200);
  font-size: 0.75rem;
}

.footer__linkedin-arrow {
  color: var(--gold-300);
  font-size: 1.125rem;
}

.footer__directory {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
  gap: clamp(3rem, 8vw, 8rem);
  padding-block-start: clamp(2.5rem, 5vw, 4.5rem);
}

.footer__col-head {
  margin-block-end: var(--sp-8);
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem var(--sp-6);
}

.footer__link {
  display: inline-block;
  font-size: 0.9375rem;
  color: var(--bone-200);
  padding-block: 0.45em;
  transition: color var(--dur-hover) var(--ease-power2-out);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--gold-300);
}

.footer__office-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.footer__office-card {
  padding-inline-start: var(--sp-6);
  border-inline-start: 1px solid var(--gold-rule-soft);
}

.footer__office {
  font-size: var(--fs-small);
  color: var(--bone-200);
  font-style: normal;
}

.footer__office__name {
  margin-block-end: var(--sp-4);
  color: var(--gold-300);
}

.footer__office__body {
  display: grid;
  gap: var(--sp-2);
  line-height: 1.65;
}

.footer__office a {
  display: inline-block;
  padding-block: 0.2em;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-hover) var(--ease-power2-out),
    color var(--dur-hover) var(--ease-power2-out);
}

.footer__office a:hover,
.footer__office a:focus-visible {
  color: var(--gold-300);
  border-bottom-color: var(--gold-rule-strong);
}

.footer__map {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-block-start: var(--sp-4);
  font-size: 0.8125rem;
  color: var(--gold-300);
}

.footer__wordmark {
  margin-block-end: var(--sp-6);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-block-start: var(--sp-16);
  padding-block-start: var(--sp-6);
}

.footer__rule {
  height: 1px;
  margin-block-start: clamp(3rem, 6vw, 5.5rem);
  background: var(--gold-rule);
  transform: scaleX(0);
  transform-origin: left center;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
  font-size: 0.8125rem;
  color: var(--bone-200);
}

@media (max-width: 900px) {
  .footer__mast,
  .footer__directory {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-16);
  }

  .footer__newsletter {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .footer__links,
  .footer__office-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__office-card {
    padding-inline-start: var(--sp-4);
  }

  .footer__bottom {
    align-items: flex-start;
  }
}

/* ==========================================================================
   6. SECTIONS
   ========================================================================== */

/* --- 6.1 Scene images ------------------------------------------------- */

/* Wrapper clips the fixed layer — never background-attachment: fixed,
   which is broken on iOS. */
.scene {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.scene__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-scene);
  overflow: hidden;
}

.scene__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Overscan so parallax translation never exposes an edge. */
  transform: scale(1.06);
  will-change: transform;
}

/* LQIP sits behind the real image so nothing renders as a blank rectangle. */
.scene__media {
  background-color: var(--navy-900);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The grade — applied in CSS so three images from three sources unify.
   navy colour overlay + signature gradient + grain (grain is global). */
.scene__grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--navy-900);
  mix-blend-mode: color;
  opacity: var(--grade-strength, 0.62);
}

.scene__wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--gradient-signature);
  /* NOTE: normal blend — this opacity occludes the image 1:1, it does not
     grade it. Keep it low; the vignette and scrim carry text contrast. */
  opacity: var(--wash-strength, 0.3);
}

.scene__vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(10, 18, 32, 0.55) 0%,
    rgba(10, 18, 32, 0) 32%,
    rgba(10, 18, 32, 0) 55%,
    #0A1220 100%
  );
}

.scene__content {
  position: relative;
  z-index: var(--z-content);
}

/* Fixed-background variant for the pillars section. */
.scene--fixed .scene__media {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100vw;
  height: 100lvh;
  height: 100dvh;
}

/* --- 6.2 Hero -------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + var(--sp-16)) var(--sp-24);
  /* The Santa Cruz skyline enters as an architectural field on the right.
     A soft mask lets it dissolve into the firm's navy rather than reading as
     a rectangular photograph placed behind the headline. */
  --grade-strength: 0.34;
  --wash-strength: 0.14;
  background: var(--navy-950);
}

.hero .scene__media {
  inset-inline-start: 0;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 18%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 18%, #000 38%);
}

.hero .scene__media picture {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 10%;
  display: block;
  width: 110%;
  height: 100%;
}

.hero .scene__media img {
  object-position: 35% center;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 18, 32, 0.94) 0%, rgba(10, 18, 32, 0.76) 34%, rgba(10, 18, 32, 0.08) 72%),
    linear-gradient(0deg, #0A1220 0%, rgba(10, 18, 32, 0.72) 18%, transparent 52%);
}

@media (max-width: 800px) {
  .hero .scene__media {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero .scene__media picture {
    inset-inline-start: 0;
    width: 100%;
  }

  .hero .scene__media img {
    object-position: 35% center;
  }

  .hero::after {
    background:
      linear-gradient(90deg, rgba(10, 18, 32, 0.72), rgba(10, 18, 32, 0.2)),
      linear-gradient(0deg, #0A1220 0%, rgba(10, 18, 32, 0.88) 34%, rgba(10, 18, 32, 0.18) 72%);
  }
}

.hero__content {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.hero__identity {
  display: grid;
  justify-items: start;
  gap: var(--sp-4);
  max-width: 100%;
}

.hero__brand {
  width: clamp(220px, 25vw, 380px);
  max-width: 72vw;
  height: auto;
}

.hero__eyebrow {
  margin: 0;
}

.hero__headline {
  max-width: 26ch;
}

.hero__subline {
  max-width: var(--measure-tight);
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  line-height: 1.6;
  color: var(--bone-200);
}

/* Bottom-left vertical rule that loops a scaleY draw-down,
   then permanently fades after the first scroll. */
.hero__scrollcue {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: var(--gutter);
  z-index: var(--z-content);
  width: 1px;
  height: clamp(48px, 9vh, 96px);
  background: var(--gold-500);
  transform-origin: top center;
  transition: opacity 0.6s var(--ease-power2-out);
}

.hero__scrollcue.is-gone {
  opacity: 0;
}

/* --- 6.3 Stats strip ------------------------------------------------- */

.stats {
  background: linear-gradient(
    to bottom,
    var(--navy-900) 0%,
    var(--navy-800) 22%,
    var(--navy-800) 78%,
    var(--navy-900) 100%
  );
  border-block: 1px solid var(--gold-rule);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 2.5vw, 2.5rem);
  /* clipPath wipe from the bottom up, staggered by JS. */
  clip-path: inset(100% 0 0 0);
}

.stat + .stat {
  border-inline-start: 1px solid var(--gold-rule);
}

.stat__value {
  font-weight: 600;
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--gold-500);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--sp-4);
}

.stat__label {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--bone-200);
  max-width: 22ch;
}

/* --- 6.4 Mission ----------------------------------------------------- */

.mission__label {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-12));
}

.mission__statement {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.34;
  font-weight: 400;
  letter-spacing: -0.028em;
  color: var(--bone-050);
  max-width: 34ch;
}

.mission__body {
  margin-block-start: var(--sp-8);
  max-width: var(--measure);
  color: var(--bone-200);
}

/* --- 6.5 Pillars ----------------------------------------------------- */

.pillars {
  --grade-strength: 0.5;
  --wash-strength: 0.26;
}

.pillars .scene__media img {
  opacity: 0.3;
}

.pillars__viewport {
  position: relative;
  z-index: var(--z-content);
}

.pillars__track {
  display: flex;
  gap: 0;
}

.pillar {
  position: relative;
  flex: 0 0 100vw;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-inline: var(--gutter);
}

.pillar__inner {
  position: relative;
  width: 100%;
  max-width: 52ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Oversized gold numeral behind the title. */
.pillar__num {
  font-weight: 600;
  position: absolute;
  inset-block-start: -0.32em;
  inset-inline-start: -0.08em;
  z-index: -1;
  font-family: var(--font-display);
  font-size: clamp(9rem, 26vw, 22rem);
  line-height: 0.8;
  color: var(--gold-500);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

.pillar__title {
  font-weight: 600;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.1vw, 3.4rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--bone-050);
}

.pillar__body {
  font-size: var(--fs-body-lg);
  line-height: 1.62;
  color: var(--bone-200);
  max-width: 46ch;
}

/* --- 6.6 Clients ----------------------------------------------------- */

.clients__names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em clamp(1.5rem, 4vw, 3.5rem);
  margin-block: var(--sp-8);
}

.clients__name {
  font-weight: 600;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 4vw, 3.2rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--bone-050);
}

.clients__logo {
  height: clamp(30px, 3.6vw, 52px);
  width: auto;
  filter: grayscale(1) brightness(1.9);
  opacity: 0.85;
}

.clients__suffix {
  font-size: var(--fs-body-lg);
  color: var(--bone-200);
  max-width: 40ch;
}

.clients__footnote {
  margin-block-start: var(--sp-12);
  font-size: 0.75rem;
  color: var(--bone-200);
  opacity: 0.7;
}

/* --- Landing-page type direction --------------------------------------
   A restrained editorial scale: strong display moments, quieter lists and
   consistently readable supporting copy. Scoped so interior pages retain
   their existing document-oriented hierarchy. */
.page-home .hero__headline {
  max-width: 21ch;
  font-size: clamp(2.8rem, 4.55vw, 4.8rem);
  line-height: 0.93;
  letter-spacing: -0.048em;
}

.page-home .hero__eyebrow {
  font-size: 0.75rem;
}

.page-home .hero__subline {
  max-width: 48ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
}

.page-home .mission__statement {
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  line-height: 1.3;
}

.page-home .mission__body {
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.72;
}

.page-home .section-head__title {
  font-size: clamp(1.85rem, 3.35vw, 3rem);
  line-height: 1;
}

.page-home .section-head--wide {
  display: grid;
  grid-template-columns: minmax(120px, 2fr) minmax(0, 10fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  max-width: none;
}

.page-home .section-head--wide > .eyebrow {
  padding-block-start: 0.55em;
}

.page-home .section-head--wide .section-head__title {
  max-width: 23ch;
}

.page-home .counsel-intro {
  display: grid;
  grid-template-columns: minmax(120px, 2fr) minmax(0, 10fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  margin-block: calc(var(--sp-12) * -0.35) var(--sp-16);
}

.page-home .counsel-intro__body {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 76rem;
}

.page-home .counsel-intro__body p {
  color: var(--bone-200);
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.7;
}

.page-home .pillar__title {
  font-size: clamp(2rem, 3.8vw, 3.25rem);
}

.page-home .pillar__body {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
}

.page-home .practice-row__name {
  font-size: clamp(1.3rem, 2.55vw, 2.1rem);
}

/* The homepage is an overview, so its capability index uses two compact
   editorial columns. The dedicated practice page remains one filterable list. */
.page-home .practice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-home .practice-row {
  grid-template-columns: 3.25rem minmax(0, 1fr);
  padding-inline-end: clamp(1.25rem, 3vw, 3rem);
}

.page-home .practice-row:nth-child(even) {
  padding-inline: clamp(1.25rem, 3vw, 3rem) 0;
  border-inline-start: 1px solid var(--rule-soft);
}

.page-home .lawyer-card__name {
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  line-height: 1.12;
}

.page-home .home-lawyers-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: clamp(0.75rem, 1.4vw, 1.25rem);
  row-gap: clamp(2.5rem, 4vw, 4rem);
}

.page-home .home-lawyers-grid .lawyer-card {
  min-width: 0;
  gap: var(--sp-3);
}

.page-home .lawyer-card__meta {
  font-size: 0.75rem;
  line-height: 1.4;
}

.page-home .lawyer-card__lede {
  font-size: clamp(0.775rem, 0.8vw, 0.875rem);
  line-height: 1.5;
}

.page-home .network--home .network__desc,
.page-home .insight-grid--home .insight-card__excerpt {
  font-size: clamp(0.9375rem, 1vw, 1rem);
  line-height: 1.65;
}

.page-home .insight-grid--home .insight-card__title {
  font-size: clamp(1.25rem, 1.55vw, 1.5rem);
  line-height: 1.2;
}

.page-home .insight-grid--home .insight-card__tags {
  font-size: 0.71875rem;
}

.page-home .clients__name {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
}

.page-home .clients__suffix {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
}

.page-home .final-cta__headline {
  max-width: 15ch;
  font-size: var(--signature-headline-size);
}

/* Subgrid keeps each repeated editorial component on shared horizontal
   baselines without truncating names, article titles or legal summaries. */
@supports (grid-template-rows: subgrid) {
  .page-home .grid--4[data-stagger] {
    grid-auto-rows: auto;
    align-items: stretch;
  }

  .page-home .grid--4[data-stagger] .lawyer-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: var(--sp-4);
  }

  .page-home .insight-grid--home {
    grid-auto-rows: auto;
    align-items: stretch;
  }

  .page-home .insight-grid--home .insight-card {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: var(--sp-4);
  }

  .page-home .insight-grid--home .insight-card__foot {
    margin-block-start: 0;
  }
}

@media (max-width: 900px) {
  .page-home .home-lawyers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 600px) {
  .page-home .hero__headline {
    max-width: 14ch;
    font-size: clamp(2.2rem, 9.5vw, 2.9rem);
    line-height: 0.95;
  }

  .page-home .hero__brand {
    width: clamp(210px, 66vw, 290px);
    max-width: 82vw;
  }

  .page-home .hero__subline {
    font-size: 1rem;
    line-height: 1.55;
  }

  .page-home .section-head__title {
    font-size: clamp(1.7rem, 7.2vw, 2.3rem);
  }

  .page-home .section-head--wide {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-4);
  }

  .page-home .section-head--wide > .eyebrow {
    padding-block-start: 0;
  }

  .page-home .counsel-intro {
    grid-template-columns: minmax(0, 1fr);
    margin-block: calc(var(--sp-8) * -0.25) var(--sp-12);
  }

  .page-home .counsel-intro__body {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }

  .page-home .practice-row__name {
    font-size: clamp(1.12rem, 5.4vw, 1.45rem);
  }

  .page-home .home-lawyers-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-home .practice-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-home .practice-row,
  .page-home .practice-row:nth-child(even) {
    padding-inline: 0;
    border-inline-start: 0;
  }

  .page-home .pillar__title {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .page-home .final-cta__headline {
    font-size: var(--signature-headline-size);
  }
}

/* --- 6.7 Final CTA -------------------------------------------------- */

.final-cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 78svh;
  padding-block: var(--sp-16);
  --grade-strength: 0.5;
  --wash-strength: 0.34;
}

.final-cta .scene__media img {
  opacity: 0.45;
}

/* The signature gradient animates its angle 105 -> 125 -> 103 over 20s.
   Animating a custom property keeps this off the main-thread paint path
   where supported, and it degrades to a static gradient where not. */
@property --grad-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 105deg;
}

.final-cta .scene__wash {
  animation: grad-drift 20s linear infinite;
}

@keyframes grad-drift {
  0% {
    --grad-angle: 105deg;
  }
  50% {
    --grad-angle: 125deg;
  }
  100% {
    --grad-angle: 105deg;
  }
}

.final-cta::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 22%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 18, 32, 0) 0%, #0A1220 100%);
}

.final-cta::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 18%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 18, 32, 0) 0%, #0A1220 100%);
}

.final-cta__inner {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.final-cta__headline {
  max-width: 19ch;
  font-size: var(--signature-headline-size);
  line-height: 0.98;
  text-wrap: balance;
}

.signature-headline {
  --signature-headline-size: clamp(2.2rem, 3.7vw, 3.9rem);
  font-size: var(--signature-headline-size);
  line-height: 0.98;
  letter-spacing: var(--ls-display-tight);
  text-wrap: balance;
}

.final-cta__details {
  display: grid;
  gap: var(--sp-2);
}

.final-cta__subline {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--bone-200);
}

.final-cta__response {
  max-width: 42ch;
  font-size: var(--fs-small);
  color: var(--bone-300);
}

/* Homepage: every conversion path lives in one composed closing section.
   Rules, rather than cards, keep the three channels feeling editorial. */
.home-connect {
  min-height: auto;
  padding-block: clamp(4.5rem, 7.5vw, 7rem);
}

.home-connect__inner {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  gap: clamp(2.75rem, 5vw, 4.5rem);
}

.home-connect__intro {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(180px, 3fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.page-home .home-connect .final-cta__headline {
  max-width: 17ch;
  font-size: var(--signature-headline-size);
  line-height: 0.96;
  text-wrap: balance;
}

.home-connect__intro .final-cta__details {
  justify-self: end;
  padding-block-end: 0.5rem;
  text-align: end;
}

.home-connect__intro .final-cta__subline {
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.home-connect__channels {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(330px, 1.35fr) minmax(190px, 1fr);
  border-block: 1px solid var(--gold-rule);
}

.home-connect__channel {
  min-width: 0;
  min-height: 15.5rem;
  padding: clamp(1.75rem, 2.75vw, 2.75rem);
}

.home-connect__channel:first-child {
  padding-inline-start: 0;
}

.home-connect__channel:last-child {
  padding-inline-end: 0;
}

.home-connect__channel + .home-connect__channel {
  border-inline-start: 1px solid var(--gold-rule);
}

.home-connect__contact,
.home-connect__linkedin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-8);
}

.home-connect__channel .eyebrow,
.home-connect__channel .t-h4 {
  margin-block-end: var(--sp-4);
}

.home-connect__channel .t-h4 {
  font-size: clamp(1.25rem, 1.55vw, 1.55rem);
  line-height: 1.18;
}

.home-connect__channel .text-muted {
  max-width: 44ch;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.home-connect__updates .newsletter {
  height: 100%;
  justify-content: flex-start;
}

.home-connect__updates .newsletter__form {
  margin-block-start: auto;
}

.home-connect__updates .newsletter__msg:empty {
  display: none;
}

.home-connect__linkedin {
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--bone-050);
  transition: background-color var(--dur-hover) var(--ease-power2-out);
}

.home-connect__linkedin:hover,
.home-connect__linkedin:focus-visible {
  background: rgba(201, 162, 39, 0.06);
}

.home-connect__linkedin-mark {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  margin: var(--sp-8) auto var(--sp-6);
  object-fit: contain;
}

.home-connect__arrow {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: clamp(1.75rem, 2.75vw, 2.75rem);
  color: var(--gold-300);
  font-size: 1.5rem;
}

@media (max-width: 900px) {
  .home-connect__intro,
  .home-connect__channels {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-connect__intro .final-cta__details {
    justify-self: start;
    padding-block-end: 0;
    text-align: start;
  }

  .page-home .home-connect .final-cta__headline {
    max-width: 15ch;
    font-size: var(--signature-headline-size);
  }

  .home-connect__channel {
    min-height: auto;
  }

  .home-connect__channel:first-child,
  .home-connect__channel:last-child {
    padding-inline: 0;
  }

  .home-connect__linkedin {
    padding-inline: var(--sp-4);
  }

  .home-connect__arrow {
    inset-inline-end: var(--sp-4);
  }

  .home-connect__channel + .home-connect__channel {
    border-inline-start: 0;
    border-block-start: 1px solid var(--gold-rule);
  }
}

.final-cta__offices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-12);
  max-width: 780px;
  padding-block-start: var(--sp-8);
  border-block-start: 1px solid var(--gold-rule);
}

.office-block {
  font-style: normal;
}

.office-block__name {
  margin-block-end: var(--sp-3);
}

.office-block__body {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--bone-200);
}

.office-block__body a {
  display: inline-block;
  min-height: 24px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-hover) var(--ease-power2-out),
    color var(--dur-hover) var(--ease-power2-out);
}

.office-block__body a:hover,
.office-block__body a:focus-visible {
  color: var(--gold-300);
  border-bottom-color: var(--gold-rule-strong);
}

/* ==========================================================================
   7. PAGE-SPECIFIC
   ========================================================================== */

/* --- 7.1 Compact page hero (all interior pages) ---------------------- */

.page-hero {
  position: relative;
  /* El degradado firma termina en azul acero arriba a la derecha; contra la
     seccion plana siguiente se veia un corte duro. Este fundido lo funde en
     navy-950 exactamente donde empieza la seccion. */
  isolation: isolate;
  padding-block: calc(var(--nav-h) + var(--sp-12)) var(--sp-16);
  background: var(--gradient-signature);
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 38%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 18, 32, 0) 0%, rgba(10, 18, 32, 0.55) 55%, #0A1220 100%);
}

.page-hero__inner {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Interior page titles are full sentences, not the homepage's four-word
   statement. At the shared H1 size a sentence fills the whole viewport, so this
   steps down and widens the measure. */
.page-hero__title {
  max-width: 30ch;
  font-size: clamp(1.75rem, 3.1vw, 2.8rem);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
}

.page-hero__title.signature-headline {
  max-width: 19ch;
  font-size: var(--signature-headline-size);
  line-height: 0.98;
  letter-spacing: var(--ls-display-tight);
}

.page-hero__intro {
  max-width: 54ch;
  font-size: var(--fs-body-lg);
  color: var(--bone-200);
}

.page-hero__intro--rich {
  display: grid;
  gap: var(--sp-4);
  max-width: 68ch;
}

.page-hero__intro--rich p {
  margin: 0;
}

/* --- Legal documents --------------------------------------------------- */

.legal-page .page-hero__intro {
  max-width: 68ch;
}

.legal-page__updated {
  margin-top: var(--sp-2);
  color: var(--bone-300);
  font-size: var(--fs-small);
}

.legal-page__updated span {
  color: var(--gold-300);
  font-weight: 600;
  margin-right: 0.45rem;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(11rem, 3fr) minmax(0, 9fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-8));
}

.legal-toc__title {
  margin-bottom: var(--sp-5);
  color: var(--navy-800);
}

.legal-toc__links {
  display: grid;
}

.legal-toc__link {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--text-on-light-muted);
  font-size: var(--fs-small);
  line-height: 1.35;
  transition: color 180ms ease, padding-left 180ms ease;
}

.legal-toc__link:hover,
.legal-toc__link:focus-visible {
  color: var(--steel-700);
  padding-left: 0.3rem;
}

.legal-document {
  max-width: 52rem;
}

.legal-section {
  scroll-margin-top: calc(var(--nav-h) + var(--sp-8));
  padding-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

.legal-section + .legal-section {
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
  border-top: 1px solid var(--rule-soft);
}

.legal-section .t-h3 {
  max-width: 24ch;
  margin-bottom: var(--sp-6);
  color: var(--navy-800);
  font-size: clamp(1.45rem, 2.1vw, 2rem);
}

.legal-section .prose {
  max-width: 72ch;
}

.legal-section ul {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-left: 1.25rem;
  list-style: disc;
}

.legal-section li {
  padding-left: 0.25rem;
  color: var(--text-on-light-muted);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
  }

  .legal-toc {
    position: static;
  }

  .legal-toc__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-8);
  }
}

@media (max-width: 600px) {
  .legal-toc__links {
    grid-template-columns: 1fr;
  }
}

/* --- 7.1b Page-hero backdrop image ---------------------------------- */

/* Optional photograph behind an interior page hero. Practice pages use the
   panoramic centre crop so the subject remains visible within this restrained
   banner height. The colour treatment keeps all 24 images in one system. */
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--navy-900);
  background-size: cover;
  background-position: center center;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.015);
}

.page-hero__grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--navy-900);
  mix-blend-mode: color;
  opacity: 0.66;
}

.page-hero__wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--gradient-signature);
  /* The .page-hero__scrim below is what protects the headline; this only needs
     to tint. At 0.82 it was erasing the photograph. */
  opacity: 0.4;
}

/* Keeps the eyebrow/title legible where the image is lightest. */
.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(10, 18, 32, 0.86) 0%,
    rgba(10, 18, 32, 0.5) 46%,
    rgba(10, 18, 32, 0.12) 100%
  );
}

.page-hero--has-media {
  background: var(--navy-950);
}

/* --- 7.1c Full-bleed editorial band --------------------------------- */

/* One wide image mid-page, breaking the measure. Deliberately NOT a card and
   not one of three columns — it is a change of pace between the services list
   and the attorney cards. */
.band {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 260px;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--navy-900);
  background-size: cover;
  background-position: center;
}

.band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  will-change: transform;
}

.band__grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--navy-900);
  mix-blend-mode: color;
  opacity: 0.58;
}

.band__wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    #0A1220 0%,
    rgba(10, 18, 32, 0.28) 34%,
    rgba(10, 18, 32, 0.12) 78%,
    rgba(10, 18, 32, 0.8) 100%
  );
}

.band__caption {
  position: absolute;
  z-index: 3;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 100%;
  padding: var(--sp-8) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.band__quote {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.85rem);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--bone-050);
  max-width: 34ch;
}

.band__rule {
  width: 44px;
  height: 2px;
  background: var(--gold-500);
}

@media (max-width: 600px) {
  .band {
    aspect-ratio: 4 / 3;
  }
}

/* --- 7.1d Practice overview aside image ----------------------------- */

/* Fills the left column beside the overview prose, which was otherwise dead
   space at desktop widths. Portrait crop of the family image, in the same
   offset-gold frame as the attorney portraits. */
.practice-aside__frame {
  max-width: 340px;
}

.practice-aside__media {
  position: relative;
  /* 4:5 rather than 3:4. A 3:4 crop overran the adjacent prose by ~240px on the
     shorter overviews, which read as a hole in the right column rather than as
     deliberate asymmetry. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--navy-800);
  background-size: cover;
  background-position: center;
}

.practice-aside__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.practice-aside__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--navy-900);
  mix-blend-mode: color;
  opacity: 0.5;
}

/* Contact lawyers on practice pages are supporting content, not the primary
   roster. Keep their portraits deliberately smaller while preserving the full
   card typography and the established offset-gold frame. */
.practice-team .lawyer-card__media {
  width: min(78%, 220px);
}

@media (max-width: 900px) {
  /* Below the split breakpoint the column collapses; keep the image but stop it
     dominating the top of the section. */
  .practice-aside__frame {
    max-width: 260px;
  }
}

/* --- 7.2 The Firm: editorial chapters, film and heritage ------------- */

.firm-intro__lead {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.45vw, 2rem);
  line-height: 1.42;
  letter-spacing: -0.022em;
  color: var(--heading);
}

.firm-intro-section {
  padding-block-end: clamp(2rem, 3.5vw, 3.25rem);
}

.firm-chapters-section {
  padding-block-start: 0;
  padding-block-end: clamp(2.5rem, 4vw, 4rem);
}

.firm-chapter {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(2.35rem, 4.2vw, 4rem);
  border-block-start: 1px solid var(--rule-soft);
  align-items: start;
}

.firm-chapter:first-child {
  padding-block-start: clamp(1.5rem, 2.5vw, 2.25rem);
}

.firm-chapter:last-child {
  border-block-end: 1px solid var(--rule-soft);
}

.firm-chapter__marker {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-8));
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: baseline;
}

.firm-chapter__number {
  font-family: var(--font-display);
  font-size: 0.82rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--accent-on-surface);
}

.firm-chapter__title {
  max-width: 19ch;
  margin-block-end: var(--sp-8);
  color: var(--heading);
  font-size: clamp(1.65rem, 2.75vw, 2.6rem);
  line-height: 1.06;
  text-wrap: balance;
}

.firm-chapter__body {
  max-width: 62ch;
}

.firm-chapter__cta {
  margin-block-start: var(--sp-8);
}

.firm-film {
  background: var(--navy-800);
  color: var(--bone-100);
}

.firm-film__grid {
  display: grid;
  grid-template-columns: minmax(15rem, 4fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.firm-film__content {
  max-width: 31rem;
}

.firm-film__content > .eyebrow {
  margin-block-end: var(--sp-8);
}

.firm-film__title {
  max-width: 15ch;
  color: var(--bone-100);
  text-wrap: balance;
}

.firm-film__copy {
  max-width: 58ch;
  margin-block-start: var(--sp-6);
  color: var(--bone-300);
  font-size: var(--fs-body-lg);
  line-height: 1.65;
}

.firm-film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 760px;
  justify-self: end;
  overflow: hidden;
  background: #05070b;
  border: 1px solid rgba(201, 162, 39, 0.48);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.3);
}

.firm-film__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.firm-film__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-expo-out);
}

.firm-film__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 7, 11, 0.04), rgba(5, 7, 11, 0.5)),
    linear-gradient(90deg, rgba(10, 18, 32, 0.35), transparent 62%);
}

.firm-film__play {
  position: absolute;
  inset-inline-start: clamp(1.5rem, 4vw, 3.75rem);
  inset-block-end: clamp(1.5rem, 4vw, 3.75rem);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  border: 0;
  padding: 0;
  color: var(--bone-100);
  background: transparent;
  font: 600 0.82rem/1.25 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.firm-film__play-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(3.5rem, 6vw, 5rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(10, 18, 32, 0.48);
  backdrop-filter: blur(8px);
  transition: background-color 250ms ease, border-color 250ms ease, transform 250ms ease;
}

.firm-film__play-icon::before {
  content: "";
  width: 0;
  height: 0;
  margin-inline-start: 0.2rem;
  border-block: 0.42rem solid transparent;
  border-inline-start: 0.7rem solid currentColor;
}

.firm-film__play:hover .firm-film__play-icon,
.firm-film__play:focus-visible .firm-film__play-icon {
  background: var(--gold-500);
  border-color: var(--gold-500);
  transform: scale(1.06);
}

.firm-film__play:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 0.5rem;
}

.firm-film__frame:hover .firm-film__poster {
  transform: scale(1.018);
}

.firm-film__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--bone-100);
}

.heritage {
  --frame-w: 40%;
}

/* The heritage statement is intentionally more restrained than a standard
   section headline. Its wider measure keeps the phrase together on larger
   screens while balanced wrapping preserves it cleanly on small screens. */
.firm-heritage-head {
  max-width: none;
  gap: var(--sp-4);
}

.firm-heritage-head .section-head__title {
  max-width: none;
  color: var(--heading);
  font-size: clamp(1.65rem, 2.85vw, 2.75rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.heritage__grid {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

/* Tall portrait-crop frame. The frame stays fixed while the image travels
   inside it — object-position scrubs 20% -> 80%.

   The offset gold border lives on a WRAPPER, not on .heritage__frame itself:
   the frame needs overflow:hidden to clip the travelling image, and that also
   clips its own ::after, so an offset border drawn there is invisible AND
   still contributes to document width. The wrapper is unclipped and reserves
   the offset in both axes. */
.heritage__framewrap {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-8));
  margin-inline-end: var(--border-offset);
  margin-block-end: var(--border-offset);
}

.heritage__framewrap::after {
  content: "";
  position: absolute;
  inset: 0;
  translate: var(--border-offset) var(--border-offset);
  border: 2px solid var(--gold-500);
  pointer-events: none;
  z-index: 4;
}

.heritage__frame {
  position: relative;
  aspect-ratio: 3 / 4.6;
  overflow: hidden;
  background: var(--surface-elevated);
}

.heritage__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  z-index: var(--heritage-index, 0);
  will-change: object-position, opacity;
}

/* The image rail moves from one generation to the next as the reader advances
   through the timeline. Only the first layer is visible before enhancement. */
.heritage__layer:not(:first-child) {
  opacity: 0;
}

.heritage__layer--contain {
  object-fit: contain;
  background: #DED8CC;
}

.heritage__grade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(10, 18, 32, 0.17), rgba(201, 162, 39, 0.08));
  mix-blend-mode: multiply;
  opacity: 0.72;
}

.heritage__caption {
  display: grid;
  gap: var(--sp-2);
  margin-block-start: var(--border-offset);
  padding-block-start: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.heritage-still {
  margin-block-start: clamp(3rem, 7vw, 6rem);
  margin-inline-end: var(--border-offset);
}

.heritage-still__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-elevated);
}

.heritage-still__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  translate: var(--border-offset) var(--border-offset);
  border: 2px solid var(--gold-500);
  pointer-events: none;
  z-index: 3;
}

.heritage-still__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.heritage-still__grade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(10, 18, 32, 0.15), rgba(201, 162, 39, 0.08));
  mix-blend-mode: multiply;
}

/* Archival founder portrait, same duotone as the attorney photographs. */
.founder {
  margin-block-end: var(--sp-12);
  max-width: 320px;
}

.founder__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-elevated);
}

.founder__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}

.founder__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--navy-900);
  mix-blend-mode: color;
  pointer-events: none;
}

.founder__caption {
  margin-block-start: var(--sp-4);
}

.timeline {
  border-block-start: 1px solid rgba(201, 162, 39, 0.4);
}

.timeline__entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) 1fr;
  gap: var(--sp-6);
  padding: clamp(1.75rem, 3.5vw, 3rem) 0 clamp(1.75rem, 3.5vw, 3rem) var(--sp-6);
  border-block-end: 1px solid rgba(201, 162, 39, 0.28);
}

/* Left-edge gold rule draws down on reveal. */
.timeline__entry::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 1px;
  background: var(--gold-500);
  transform: scaleY(0);
  transform-origin: top center;
}

.timeline__year {
  font-weight: 600;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-on-surface);
  font-variant-numeric: tabular-nums;
}

.timeline__body {
  font-size: var(--fs-body-lg);
  line-height: 1.62;
  color: var(--text-muted);
  max-width: 54ch;
}

.closing-block {
  margin-block-start: var(--sp-16);
  padding-block-start: var(--sp-8);
  border-block-start: 1px solid rgba(201, 162, 39, 0.4);
  max-width: 46ch;
}

.closing-block__title {
  margin-block-end: var(--sp-6);
}

.closing-block__headline {
  max-width: 18ch;
  margin-block-end: var(--sp-6);
  text-wrap: balance;
}

.closing-block__body {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--text);
}

.closing-block__body p + p {
  margin-block-start: var(--sp-5);
}

/* --- 7.3 Attorney profile ------------------------------------------- */

.profile__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.profile__media {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-8));
}

.profile__portrait {
  aspect-ratio: 1 / 1;
}

.profile__portrait img {
  object-position: center 18%;
}

.profile__contact {
  /* .framed supplies the offset-border gap; only the section rhythm here. */
  margin-block-start: var(--sp-8);
  display: grid;
  gap: var(--sp-6);
}

.profile__contact-row {
  display: grid;
  gap: var(--sp-2);
  padding-block-end: var(--sp-4);
  border-block-end: 1px solid var(--rule-soft);
}

.profile__contact-value {
  font-size: var(--fs-small);
  color: var(--text);
}

.profile__contact-value a:hover {
  color: var(--link-on-surface);
}

.profile__name {
  margin-block-end: var(--sp-4);
  color: var(--heading);
}

.profile__title {
  font-size: var(--fs-body-lg);
  color: var(--link-on-surface);
  margin-block-end: var(--sp-12);
}

.profile__block {
  margin-block-start: var(--sp-12);
}

.profile__block-head {
  margin-block-end: var(--sp-6);
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--rule);
}

.profile__list {
  display: grid;
  gap: var(--sp-4);
}

.profile__list li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  color: var(--text-muted);
  max-width: 60ch;
}

.profile__list li::before {
  content: "";
  display: block;
  width: 8px;
  height: 1px;
  margin-block-start: 0.85em;
  background: var(--gold-500);
}

/* Pablo's single publication reads as one precise bibliographic line on
   full-width profile layouts. It returns to natural wrapping where the
   available measure would otherwise become uncomfortable. */
.profile__block--publications .profile__list li {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(0.9rem, 1.05vw, var(--fs-body));
}

@media (max-width: 1100px) {
  .profile__block--publications .profile__list li {
    white-space: normal;
  }
}

.profile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.tag {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: border-color var(--dur-hover) var(--ease-power2-out),
    color var(--dur-hover) var(--ease-power2-out);
}

a.tag:hover,
a.tag:focus-visible {
  border-color: var(--gold-500);
  color: var(--link-on-surface);
}

/* --- 7.4 Insight article -------------------------------------------- */

.article {
  background: var(--surface-light);
  color: var(--text-on-light);
}

/* Sticky gold reading-progress bar. */
.reading-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  z-index: var(--z-progress);
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.article__head {
  padding-block: calc(var(--nav-h) + var(--sp-16)) var(--sp-16);
  background: var(--gradient-signature);
  color: var(--text-on-dark);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
  margin-block-end: var(--sp-8);
}

.article__title {
  max-width: 30ch;
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  line-height: 1.04;
}

.article__lead {
  margin-block-start: var(--sp-8);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  line-height: 1.42;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--bone-200);
  max-width: 46ch;
}

.article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding-block: var(--sp-16);
}

.article__body {
  max-width: var(--measure);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}

.article__body > * + * {
  margin-block-start: var(--sp-6);
}

.article__body p {
  color: var(--text-muted);
  max-width: var(--measure);
}

.article__body h2 {
  margin-block-start: var(--sp-12);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  text-transform: none;
  color: var(--heading);
}

.article__body h3 {
  margin-block-start: var(--sp-12);
  font-size: var(--fs-h4);
  color: var(--heading);
}

.article__body ul {
  display: grid;
  gap: var(--sp-3);
  padding-inline-start: 0;
  list-style: none;
}

.article__body li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--sp-3);
  color: var(--text-muted);
}

.article__body li::before {
  content: "";
  width: 8px;
  height: 1px;
  margin-block-start: 0.9em;
  background: var(--gold-500);
}

/* Pull quote: display serif, gold left rule. */
.pullquote {
  margin-block: var(--sp-12);
  padding-inline-start: clamp(1.25rem, 3vw, 2.5rem);
  border-inline-start: 2px solid var(--gold-500);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  line-height: 1.34;
  font-weight: 400;
  letter-spacing: -0.024em;
  color: var(--heading);
  max-width: 34ch;
}

/* Sticky right rail. */
.rail {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-8));
  display: grid;
  gap: var(--sp-12);
}

.rail__block-head {
  margin-block-end: var(--sp-4);
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid rgba(201, 162, 39, 0.4);
}

.rail .newsletter__input {
  color: var(--navy-950);
  border-block-end-color: rgba(201, 162, 39, 0.4);
}

.rail .newsletter__input::placeholder {
  color: rgba(16, 27, 45, 0.45);
}

.share {
  display: flex
;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-control);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  transition: border-color var(--dur-hover) var(--ease-power2-out),
    background-color var(--dur-hover) var(--ease-power2-out);
}

.share__link:hover,
.share__link:focus-visible {
  border-color: var(--gold-500);
  background: rgba(201, 162, 39, 0.08);
}

/* Practice-lead card at the article foot. */
.lead-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--sp-6);
  align-items: start;
  padding: var(--sp-8);
  border: 1px solid var(--navy-rule-strong);
}

.lead-card__portrait {
  aspect-ratio: 4 / 5;
}

.lead-card__name {
  font-weight: 500;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--heading);
}

.lead-card__meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* --- 7.5 Contact page ----------------------------------------------- */

.contact-hero {
  padding-block-end: var(--sp-12);
  background: var(--navy-950);
}

.contact-hero__grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5.5rem);
}

.contact-hero .page-hero__inner {
  z-index: 2;
}

.contact-hero__visual {
  position: relative;
  min-height: clamp(23rem, 40vw, 34rem);
  margin: 0;
  overflow: hidden;
  background: var(--navy-900);
  border-block-start: 1px solid var(--gold-rule);
  border-block-end: 1px solid var(--gold-rule-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%);
}

.contact-hero__visual picture {
  position: absolute;
  inset: 0;
}

.contact-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 45%;
  transform: scale(1.015);
}

.contact-hero__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 14, 26, 0.74) 0%, rgba(7, 14, 26, 0.12) 30%, transparent 58%),
    linear-gradient(180deg, rgba(7, 14, 26, 0.08) 45%, rgba(7, 14, 26, 0.55) 100%);
}

.offices-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.office-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.office-card .office-block__district {
  margin-block-start: 0.2rem;
  color: var(--gold-300);
}

.office-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block-end: var(--sp-4);
  border-block-end: 1px solid var(--gold-rule);
  margin-block-end: var(--sp-6);
}

.office-card__name {
  font-weight: 600;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  color: var(--bone-050);
}

/* Dark-styled map. A bright Google tile would break the palette, so the
   iframe sits under a navy filter + colour overlay. */
.map {
  position: relative;
  aspect-ratio: 16 / 10;
  margin-block-start: var(--sp-8);
  overflow: hidden;
  background: var(--surface-elevated);
  border: 1px solid var(--gold-rule);
}

.map__frame,
.map__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: invert(1) hue-rotate(180deg) saturate(0.45) brightness(0.85)
    contrast(1.1);
}

.map__tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--navy-900);
  mix-blend-mode: color;
  opacity: 0.55;
}

.map__wash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--gradient-signature);
  opacity: 0.28;
}

/* Keep the map link reachable above the decorative overlays. */
.map__link {
  position: absolute;
  z-index: 4;
  inset-block-end: var(--sp-4);
  inset-inline-start: var(--sp-4);
  padding: 0.55rem 1rem;
  background: rgba(10, 18, 32, 0.86);
  border: 1px solid var(--gold-rule);
  border-radius: var(--radius-control);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.map__link:hover,
.map__link:focus-visible {
  background: var(--navy-950);
  border-color: var(--gold-500);
}

/* --- 7.6 404 -------------------------------------------------------- */

.notfound {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + var(--sp-24));
  background: var(--gradient-signature);
}

.notfound__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  max-width: 60ch;
}

.notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
  padding-block-start: var(--sp-8);
  border-block-start: 1px solid var(--gold-rule);
}

/* ==========================================================================
   8. ANIMATION UTILITIES
   ========================================================================== */

/* Masked line reveal. The inner span is translated from y:110% to 0
   behind an overflow-hidden mask, so lines rise out of nothing. */
.split-line {
  display: block;
  overflow: hidden;
}

.split-line__inner {
  display: block;
  transform: translateY(110%);
  will-change: transform;
}

.split-word {
  display: inline-block;
  white-space: pre;
}

.split-char {
  display: inline-block;
  white-space: pre;
}

/* Word-by-word scrub target for the mission statement. */
.scrub-word {
  display: inline-block;
  white-space: pre;
  opacity: 0.18;
  will-change: opacity, transform;
}

/* clipPath wipe for blocks. */
.reveal-block {
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}

/* scaleY draw for rules. */
.reveal-rule {
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}

.reveal-rule--x {
  transform: scaleX(0);
  transform-origin: left center;
}

/* Supporting fade, deliberately quiet: 10px and short, so the authored
   moments (mission scrub, stats, timeline, seams) own the stage instead of
   every section performing the same 24px entrance. */
.reveal-fade {
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}

/* Set by JS after a tween completes so will-change is not left resident. */
.anim-done {
  will-change: auto;
}

/* CTA wrapper keeps the two-button layout stable. */
.magnetic {
  display: inline-block;
}

/* No-JS / no-GSAP safety: if script.js never boots, or the GSAP CDN is blocked
   or offline, nothing may stay hidden. Without this, masked headlines stay
   translated out of their overflow:hidden mask and the page reads as empty.
   script.js sets .no-gsap when window.gsap is absent. */
html.no-js .split-line__inner,
html.no-js .scrub-word,
html.no-js .reveal-fade,
html.no-gsap .split-line__inner,
html.no-gsap .scrub-word,
html.no-gsap .reveal-fade {
  transform: none;
  opacity: 1;
}

html.no-js .reveal-block,
html.no-gsap .reveal-block {
  clip-path: none;
}

html.no-js .reveal-rule,
html.no-js .reveal-rule--x,
html.no-js .footer__rule,
html.no-js .stat,
html.no-gsap .reveal-rule,
html.no-gsap .reveal-rule--x,
html.no-gsap .footer__rule,
html.no-gsap .stat {
  transform: none;
  clip-path: none;
}

html.no-js .curtain,
html.no-js .cursor-dot,
html.no-js .cursor-ring,
html.no-gsap .curtain,
html.no-gsap .cursor-dot,
html.no-gsap .cursor-ring {
  display: none;
}

/* Timeline entries fade in via GSAP; without it they must simply be present. */
html.no-gsap .timeline__entry,
html.no-js .timeline__entry {
  opacity: 1;
}

/* ==========================================================================
   9. RESPONSIVE
   Breakpoints: <=600 · 601–900 · 901–1280 · 1281+
   ========================================================================== */

/* --- 1281+ is the base authored above. ------------------------------- */

@media (max-width: 1280px) {
  :root {
    --nav-h: 76px;
  }

  .panel__grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  /* Promo drops below the four columns rather than squeezing them. */
  .panel__promo {
    grid-column: 1 / -1;
    border-block-start: 1px solid var(--gold-rule-soft);
  }

  .insight-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .insight-card--feature {
    grid-column: span 4;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--sp-16);
  }
}

@media (max-width: 900px) {
  :root {
    --section-pad: var(--section-pad-sm);
    --nav-h: 68px;
    --nav-h-condensed: 60px;
    --border-offset: 8px;
  }

  /* Desktop nav out, overlay nav in. */
  .nav__list,
  .nav__utils .lang,
  .nav__utils .btn {
    display: none;
  }

  .nav__toggle {
    display: inline-flex;
  }

  .split,
  .split--40-60,
  .heritage__grid,
  .profile__grid,
  .article__layout,
  .offices-grid,
  .form__row,
  .final-cta__offices {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-10);
  }

  .contact-hero__visual {
    min-height: 0;
    aspect-ratio: 16 / 10;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 100%);
  }

  .contact-hero__image {
    object-position: 60% 43%;
  }

  .split__sticky,
  .mission__label,
  .profile__media,
  .rail {
    position: static;
    top: auto;
  }

  /* Drop the sticky behaviour but stay POSITIONED. position:static would
     remove the containing block for the absolutely-positioned ::after that
     draws the offset border, so its inset:0 would resolve against the
     viewport — a full-width box that translate() then pushes off-screen,
     causing horizontal overflow. */
  .heritage__framewrap {
    position: relative;
    top: auto;
  }

  .heritage__framewrap {
    max-width: 520px;
  }

  .heritage__frame {
    aspect-ratio: 4 / 5;
  }

  .grid--4,
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 2x2: restore the vertical rule only between columns, add horizontals. */
  .stat:nth-child(odd) {
    border-inline-start: 0;
  }

  .stat:nth-child(n + 3) {
    border-block-start: 1px solid var(--gold-rule);
  }

  /* NO PINNING below 900px. The horizontal track becomes a vertical stack. */
  .pillars__track {
    flex-direction: column;
  }

  .pillar {
    flex: 0 0 auto;
    min-height: auto;
    padding-block: var(--sp-24);
  }

  .pillar + .pillar {
    border-block-start: 1px solid var(--gold-rule-soft);
  }

  /* Scene images are static on mobile — no parallax, no Ken Burns. */
  .scene--fixed .scene__media {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .scene__media img {
    transform: none;
  }

  .insight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .insight-grid--home {
    grid-template-columns: minmax(0, 1fr);
  }

  .insight-card,
  .insight-card--feature {
    grid-column: span 2;
  }

  .insight-grid--home .insight-card,
  .insight-grid--home .insight-card--feature {
    grid-column: span 1;
  }

  .article__title {
    max-width: none;
  }

  .lead-card {
    grid-template-columns: 72px 1fr;
    padding: var(--sp-6);
  }

  .practice-row {
    grid-template-columns: 3rem 1fr;
  }

  .practice-row__meta {
    display: none;
  }

  .network {
    grid-template-columns: minmax(0, 1fr);
  }

  .firm-chapter,
  .firm-film__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .firm-chapter__marker {
    position: static;
    top: auto;
  }

  .firm-film__title {
    max-width: 18ch;
  }

  .firm-film__content {
    max-width: 42rem;
  }

  .firm-film__frame {
    max-width: 720px;
    justify-self: start;
  }

  .heritage__frame {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    grid-template-rows: repeat(2, minmax(6.5rem, 1fr));
    aspect-ratio: 4 / 3;
    gap: 1px;
  }

  .heritage__layer {
    position: relative;
    inset: auto;
    display: block;
    opacity: 1 !important;
    height: 100%;
    object-position: center center;
    will-change: auto;
  }

  .heritage__layer:first-child {
    grid-row: 1 / -1;
  }

  .heritage__layer--contain {
    object-fit: cover;
  }

  .heritage__grade {
    display: none;
  }

  .heritage-still {
    margin-block-start: var(--sp-12);
  }

  .timeline__entry {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: 1.25rem;
    --grid-gap: 1rem;
  }

  .signature-headline {
    --signature-headline-size: clamp(2rem, 8.6vw, 3rem);
  }

  .t-hero,
  .hero__headline {
    font-size: clamp(2rem, 8.6vw, 3rem);
  }

  .hero {
    padding-block-end: var(--sp-16);
  }

  .hero__headline {
    max-width: none;
  }

  .btn {
    width: 100%;
  }

  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .grid--4,
  .grid--3,
  .grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Ease the display size so long uppercase words stop straining the measure. */
  .practice-row__name {
    font-size: clamp(1.15rem, 6vw, 1.6rem);
  }

  .practice-row {
    grid-template-columns: 2.25rem 1fr;
    gap: var(--sp-3);
  }

  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat {
    padding: var(--sp-12) var(--sp-4);
  }

  .insight-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .insight-card,
  .insight-card--feature {
    grid-column: span 1;
  }

  .clients__names {
    gap: 0.3em var(--sp-8);
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__bottom {
    margin-block-start: var(--sp-16);
  }

  .lead-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-card__portrait {
    max-width: 120px;
  }

  .pullquote {
    margin-block: var(--sp-12);
  }

  /* Never let a long unbroken token push the page sideways at 320px. */
  .article__body,
  .prose,
  .profile__list li {
    overflow-wrap: break-word;
  }
}

/* Touch targets. Measured at 390px, 125 interactive elements fell under 44x44 —
   including the office phone/email links at 112x25, which are a primary mobile
   conversion. Height was the failing dimension in almost every case, so these
   set a floor and centre the label within it rather than changing type size. */
/* Keyed on WIDTH as well as pointer type. `hover: none` alone describes the
   input device, not the viewport — a narrow desktop window still reports
   `hover: hover`, so a pointer-only query silently failed to apply on every
   small screen that is not a touchscreen. */
@media (max-width: 900px), (hover: none) {
  .footer__link,
  .footer__map,
  .footer__linkedin,
  .link,
  .map__link,
  .mobilenav__sub-link,
  .insight-card__foot .link,
  .lang {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .footer__link,
  .mobilenav__sub-link {
    /* Full-width rows: keep the label left-aligned while the row grows. */
    display: flex;
    justify-content: flex-start;
  }

  /* Address blocks: tel: and mailto: anchors. inline-flex keeps them on the
     same line where two numbers are separated by a middot. */
  .office-block__body a,
  .footer__office a,
  .profile__contact-value a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .wordmark {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* Practice-area chips are discrete controls, not inline prose links, so the
     44px floor applies to them. (Multi-line card title links are exempt under
     WCAG 2.5.8 as inline text.) */
  .tag,
  .share__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Touch: no custom cursor or hover-only affordances. */
@media (hover: none) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }

  body.cursor-active,
  body.cursor-active a,
  body.cursor-active button {
    cursor: auto;
  }

  /* Portraits are colour by default; nothing hover-stranded to undo. */

  .practice-list.is-focusing .practice-row:not(:hover) {
    opacity: 1;
  }
}

/* Respect data-saver: drop the decorative wash and grain work. */
@media (prefers-reduced-data: reduce) {
  .grain {
    display: none;
  }
}

@media print {
  .nav,
  .mobilenav,
  .grain,
  .curtain,
  .cursor-dot,
  .cursor-ring,
  .scroll-progress,
  .reading-progress,
  .scene__media,
  .scene__grade,
  .scene__wash,
  .scene__vignette,
  .marquee,
  .map {
    display: none !important;
  }

  body {
    --heading: #000;
    background: #fff;
    color: #000;
  }

  .article__body p,
  .prose p {
    color: #000;
  }
}

/* ==========================================================================
   10. REDUCED MOTION
   Kills Lenis (via JS), all scrub, all parallax, and the page-transition
   curtain; pins every scene image to a fixed transform; replaces every
   entrance with a 0.3s opacity fade. The site must be fully readable and
   navigable with all motion off.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
    scroll-behavior: auto !important;
  }

  /* Every entrance resolves to its final state. */
  .split-line__inner,
  .scrub-word,
  .reveal-fade,
  .magnetic {
    transform: none !important;
    opacity: 1 !important;
  }

  .reveal-block,
  .stat {
    clip-path: none !important;
  }

  .reveal-rule,
  .reveal-rule--x,
  .footer__rule,
  .scroll-progress,
  .reading-progress {
    transform: none !important;
  }

  .hero__scrollcue {
    display: none;
  }

  /* Scene images pinned — no parallax, no scale, no travel. */
  .scene__media img,
  .heritage__layer {
    transform: none !important;
    object-position: center center !important;
  }

  .scene--fixed .scene__media {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  /* The gradient angle stops drifting. */
  .final-cta .scene__wash {
    animation: none;
  }

  /* Marquees stop; the full list must still be reachable, so allow scroll. */
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: auto;
  }

  .marquee__track {
    transform: none !important;
    animation: none !important;
  }

  /* No curtain, no custom cursor. */
  .curtain,
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }

  body.cursor-active,
  body.cursor-active a,
  body.cursor-active button {
    cursor: auto;
  }

  /* Grain is static anyway, but drop the blend cost. */
  .grain {
    display: none;
  }
}