/* Ghaus Barristers & Solicitors.
   One world: ivory paper, ink, the logo's antique gold in rare doses, and a single black band.
   The hero opens dark (the footage) and arrives on paper, where the site lives.
   Type: Cormorant Garamond (display), Manrope (body), DM Mono (labels), Cinzel only inside the seal. */

:root {
  --paper: #F3EEE3;
  --paper-2: #EBE4D4;
  --paper-3: #E2D9C5;
  --paper-line: rgba(20, 23, 26, .12);
  --ink: #14171A;
  --ink-2: #474C50;
  --ink-3: #767B7D;
  --gold: #A98640;          /* the logo's measured gold, for rules, seal and large text */
  --gold-deep: #7F6226;     /* gold for small labels on paper (5.5:1) */
  --gold-hi: #C9A24C;       /* gold on dark, and hover */
  --gold-line: rgba(169, 134, 64, .45);
  --gold-muted: rgba(169, 134, 64, .12);
  --black: #0B0E0D;         /* the one anchoring band */
  --black-2: #141917;
  --ivory: #F1ECE1;
  --ivory-2: #B4B9B1;
  --stage: #0E1311;

  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --tshadow: 0 1px 2px rgba(5, 7, 6, .95), 0 3px 12px rgba(5, 7, 6, .78), 0 10px 44px rgba(5, 7, 6, .8);

  --hero-h: 500vh;   /* validated by the flick test: every band holds for 5 to 6 normal flicks */
  --nav-h: 76px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1180px;
  color-scheme: light;
}
/* keep content clear of the notch on phones held sideways */
@supports (padding: max(1px, env(safe-area-inset-left))) {
  :root { --gutter: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left), env(safe-area-inset-right)); }
}

/* ------------------------------------------------------------------ */
/* Reset and base                                                      */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; background: var(--paper); }   /* menu links land below the fixed header */
body {
  margin: 0; overflow-x: hidden; overflow-x: clip;
  background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  animation: pagein 1.1s var(--ease) both;
}
@keyframes pagein { from { opacity: 0 } to { opacity: 1 } }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 500; line-height: 1.05; letter-spacing: -.005em; }
p, ul, li { margin: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
::selection { background: rgba(169, 134, 64, .32); }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--ivory); border-radius: 6px; font-weight: 600; transition: top .25s var(--ease); }
.skip:focus { top: 16px; }

/* the one environment: paper grain and a slow warm drift behind everything */
.env { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.env::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 55% 45% at 18% 12%, rgba(169, 134, 64, .10), transparent 60%),
    radial-gradient(ellipse 50% 55% at 88% 75%, rgba(20, 23, 26, .06), transparent 60%);
  animation: envdrift 100s ease-in-out -35s infinite alternate;
}
.env::after {
  content: ""; position: absolute; inset: 0; opacity: .12; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes envdrift { from { transform: translate3d(-2%, -1%, 0) scale(1) } to { transform: translate3d(2%, 2%, 0) scale(1.05) } }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
main { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ */
/* Type scale and shared parts                                         */
/* ------------------------------------------------------------------ */
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; }
.kicker::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: 12px; }
.h-l { font-size: clamp(36px, 4.8vw, 62px); line-height: 1; }
.h-m { font-size: clamp(26px, 3vw, 38px); }
.lede { color: var(--ink-2); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; max-width: 60ch; }
.muted { color: var(--ink-2); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: .01em;
  border: 1px solid transparent; text-shadow: none; will-change: transform;
  transition: transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-gold { background: var(--gold-hi); color: var(--ink); box-shadow: 0 10px 30px rgba(169, 134, 64, .22); }
.btn-gold:hover { background: #DDB95F; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(169, 134, 64, .3); }
.btn-paper { background: var(--ink); color: var(--ivory); }
.btn-paper:hover { background: #000; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(20, 23, 26, .22); }
.btn-ghost { border-color: rgba(20, 23, 26, .35); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.on-dark .btn-ghost, .band:not(.light) .btn-ghost, .hero-static .btn-ghost { border-color: rgba(241, 236, 225, .45); color: var(--ivory); }
.on-dark .btn-ghost:hover, .band:not(.light) .btn-ghost:hover, .hero-static .btn-ghost:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
@media (pointer: coarse) { .btn { min-height: 48px; } }

/* ------------------------------------------------------------------ */
/* Navigation: ivory over the dark hero, ink once the page is paper    */
/* ------------------------------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; color: var(--ivory);
  transition: color .5s var(--ease);
}
/* The frosted bar is painted by a pseudo-element. A backdrop-filter on the nav itself makes the nav the positioning
   frame of the fixed mobile menu, which then collapsed to a sliver under the bar whenever the page was scrolled. */
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-bottom: 1px solid transparent; transition: background-color .5s var(--ease), border-color .5s var(--ease); }
.nav.scrolled::before { background: rgba(14, 19, 17, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(201, 162, 76, .18); }
.nav.light { color: var(--ink); }
.nav.light.scrolled::before { background: rgba(243, 238, 227, .82); border-color: var(--paper-line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand svg { width: 46px; height: 46px; }
.brand-name { display: block; font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: .12em; line-height: 1; }
.brand-sub { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em; color: var(--gold-hi); margin-top: 5px; }
.nav.light .brand-sub { color: var(--gold-deep); }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: 14px; font-weight: 500; opacity: .82; position: relative; padding: 6px 0; transition: opacity .3s var(--ease); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links .only-mobile { display: none; }
.nav-cta { padding: 11px 20px; font-size: 14px; border-color: rgba(241, 236, 225, .45); color: var(--ivory); }
.nav-cta:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.nav.light .nav-cta { border-color: rgba(20, 23, 26, .35); color: var(--ink); }
.nav.light .nav-cta:hover { border-color: var(--ink); color: var(--ink); }
.nav.light .nav-cta:hover { border-color: var(--ink); }
.menu-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 8px; }
.menu-btn span { display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: background-color .3s; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ivory); transition: transform .35s var(--ease), top .35s var(--ease); }
.nav.light .menu-btn span::before, .nav.light .menu-btn span::after { background: var(--ink); }
.menu-btn span::before { top: -7px; } .menu-btn span::after { top: 7px; }
.nav.open .menu-btn span { background: transparent; }
.nav.open .menu-btn span::before { top: 0; transform: rotate(45deg); }
.nav.open .menu-btn span::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; flex: none; margin-right: -8px; -webkit-tap-highlight-color: transparent; }
  .brand { min-width: 0; min-height: 44px; white-space: nowrap; }
  .nav-cta { display: none; }
  .nav-links .only-mobile { display: block; }
  /* the menu is a full sheet of paper under the bar, fixed to the screen; it scrolls within itself if it is taller */
  .nav-links {
    position: fixed; left: 0; right: 0; top: var(--nav-h);
    height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h));
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--gutter) calc(40px + env(safe-area-inset-bottom));
    background: var(--paper); color: var(--ink);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
  }
  .nav.open .nav-links { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear 0s; }
  .nav.open { color: var(--ink); }
  #nav.open::before { background: var(--paper); border-color: var(--paper-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav.open .brand-sub { color: var(--gold-deep); }
  .nav.open .menu-btn span::before, .nav.open .menu-btn span::after { background: var(--ink); }
  .nav-links li { width: 100%; border-bottom: 1px solid var(--paper-line); }
  .nav-links a { display: block; padding: 18px 0; font-family: var(--display); font-size: 30px; opacity: 1; }
  .nav-links a::after { display: none; }
}
/* the narrowest phones (320-359px): the lockup tightens so the menu button keeps its full 44px target */
@media (max-width: 359px) {
  .nav .wrap { gap: 10px; }
  .brand { gap: 10px; }
  .brand svg { width: 38px; height: 38px; }
  .brand-name { font-size: 20px; }
  .brand-sub { letter-spacing: .2em; }
}
/* while the menu is open the page underneath is frozen in place; site.js stores and restores the exact scroll position */
body.menu-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
html.menu-locked { overscroll-behavior: none; }

/* ------------------------------------------------------------------ */
/* Hero: pinned region, sticky stage, dark footage arriving on paper   */
/* ------------------------------------------------------------------ */
.hero { position: relative; height: var(--hero-h); padding: 0; z-index: 1; background: var(--stage); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--stage); isolation: isolate; --p: 0; }
.poster { position: absolute; inset: 0; background: var(--stage) center / cover no-repeat; }
.poster::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 30% 40%, rgba(201, 162, 76, .10), transparent 60%), radial-gradient(ellipse 60% 70% at 80% 80%, rgba(72, 110, 92, .12), transparent 60%); }
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); transform: translateZ(0); will-change: transform; pointer-events: none; }
.stage.video-ready video { opacity: 1; }
.stage.video-failed video { display: none; }
.stage.video-failed .seal-overlay { display: none; }   /* without the film the poster becomes the still that already carries the stamped seal */
html.hero-light .hero, html.hero-light .stage { background: var(--paper); }
html.hero-light .poster { background-color: var(--paper); }
/* the hand-over: paper rises through the last stretch of the journey */
.stage-light { position: absolute; inset: 0; pointer-events: none; background: var(--paper); opacity: clamp(0, (var(--p) - .72) / .12, 1); }
.stage-light::after { content: ""; position: absolute; inset: 0; opacity: .6; background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(169, 134, 64, .14), transparent 60%); }
.scrim { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(8, 11, 10, 0) 35%, rgba(8, 11, 10, .62) 100%); opacity: calc(1 - clamp(0, (var(--p) - .72) / .12, 1)); }
.stage-vector { position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - clamp(0, (var(--p) - .68) / .12, 1)); }
.ring { position: absolute; right: 28px; bottom: calc(28px + env(safe-area-inset-bottom)); width: 34px; height: 34px; color: var(--gold-hi); transform: rotate(-90deg); opacity: .9; transition: opacity .6s var(--ease); }
.ring circle { transition: stroke-dashoffset .2s linear; }
.ring.done { opacity: 0; }
/* the cue: a quiet pill at the foot of the stage. It tells the visitor to scroll, and pressing it plays the introduction. */
.cue { position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%); -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 14px; border-radius: 999px; border: 1px solid rgba(241, 236, 225, .35); background: rgba(14, 19, 17, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ivory); font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: opacity .5s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), transform .5s var(--ease); z-index: 3; }
.cue:hover { border-color: var(--gold-hi); }
.cue:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.cue-glyph { display: block; width: 14px; height: 22px; }
.cue-glyph svg { width: 100%; height: 100%; overflow: visible; }
.cue-glyph rect { fill: none; stroke: currentColor; stroke-width: 2; }
.cue-glyph .wheel { stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; animation: cuewheel 2.4s var(--ease-soft) -.6s infinite; }
.cue-sep { opacity: .5; }
.cue-play { color: var(--gold-hi); }
.cue.hide { opacity: 0; pointer-events: none; transform: translate(-50%, 6px); }
html.hero-light .cue { border-color: rgba(20, 23, 26, .28); background: rgba(243, 238, 227, .55); color: var(--ink); }
html.hero-light .cue:hover { border-color: var(--ink); }
html.hero-light .cue-play { color: var(--gold-deep); }
@keyframes cuewheel { 0% { transform: translateY(0); opacity: 1 } 55% { transform: translateY(8px); opacity: 0 } 56% { transform: translateY(0); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
@media (pointer: coarse) { .cue { min-height: 44px; } }

/* caption bands */
.bands { position: absolute; inset: 0; }
.band { position: absolute; inset: 0; display: grid; align-content: center; padding: calc(var(--nav-h) + 3vh) var(--gutter) 10vh; opacity: 0; pointer-events: none; color: var(--ivory); text-shadow: var(--tshadow); --k: 0; }
.band.on { pointer-events: auto; }
.band .btn { text-shadow: none; }
.band::before { content: ""; position: absolute; inset: -4%; pointer-events: none; opacity: calc(.25 + .75 * var(--k, 1)); background: radial-gradient(ellipse 74% 62% at 50% 50%, rgba(5, 7, 6, .66) 0%, rgba(5, 7, 6, .44) 46%, rgba(5, 7, 6, 0) 76%); }
.band.lane-l { justify-items: start; }
.band.lane-l::before { background: radial-gradient(ellipse 48% 68% at 26% 52%, rgba(5, 7, 6, .68) 0%, rgba(5, 7, 6, .42) 46%, rgba(5, 7, 6, 0) 76%); }
.band.lane-r { justify-items: end; text-align: right; }
.band.lane-r::before { background: radial-gradient(ellipse 48% 68% at 74% 52%, rgba(5, 7, 6, .68) 0%, rgba(5, 7, 6, .42) 46%, rgba(5, 7, 6, 0) 76%); }
.band.lane-c { justify-items: center; text-align: center; }
.band.deep::before { background: radial-gradient(ellipse 50% 70% at 74% 52%, rgba(5, 7, 6, .74) 0%, rgba(5, 7, 6, .5) 46%, rgba(5, 7, 6, 0) 76%); }
.band > * { position: relative; }
.band .kicker { color: var(--gold-hi); margin-bottom: 18px; opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 10px)); }
.band .kicker::before { background: var(--gold-hi); }
.band.lane-r .kicker::before { display: none; }
.band.lane-r .kicker::after { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--gold-hi); vertical-align: middle; margin-left: 12px; }
.band h1, .band h2 { font-size: clamp(40px, 6.4vw, 84px); line-height: .98; max-width: 14ch; font-weight: 500; }
.band .h-sub { font-size: clamp(30px, 4.4vw, 60px); max-width: 16ch; }
.band p { margin-top: 20px; max-width: 46ch; font-size: clamp(16px, 1.3vw, 19px); color: var(--ivory-2); }
.band .row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; justify-content: inherit; }
.band.lane-c .row { justify-content: center; }
.band.lane-c p { margin-inline: auto; }
.band.lane-c h1, .band.lane-c h2 { margin-inline: auto; }
/* the settle band sits on the light frame: ink type, a paper scrim, no dark shadow */
.band.light { color: var(--ink); text-shadow: none; }
.band.light::before { background: radial-gradient(ellipse 60% 56% at 50% 50%, rgba(243, 238, 227, .85) 0%, rgba(243, 238, 227, .55) 50%, rgba(243, 238, 227, 0) 78%); }
.band.light .kicker { color: var(--gold-deep); }
.band.light .kicker::before { background: var(--gold); }
.band.light p { color: var(--ink-2); }
.split .vis { display: inline; }
.split .w { display: inline-block; white-space: nowrap; }
.split .c { display: inline-block; }
.band .w.em .c { color: var(--gold-hi); font-style: italic; }
.band.light .w.em .c { color: var(--gold-deep); }

/* entrances: transform and opacity only, scrubbed off --k, reversible on scroll-up */
[data-entrance="scatter"] .c { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.6, 1); opacity: var(--kc); transform: translate(calc((1 - var(--kc)) * var(--jx, 0px)), calc((1 - var(--kc)) * var(--jy, 0px))) rotate(calc((1 - var(--kc)) * var(--jr, 0deg))); }
[data-entrance="grid"] .c { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.6, 1); opacity: var(--kc); transform: translateX(calc((1 - var(--kc)) * var(--jx, 0px))); }
[data-entrance="drift"] .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * -26px)); }
[data-entrance="settle"] .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * 22px)); }
[data-entrance="punch"] .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 3, 1); --ks: clamp(0, (var(--k, 0) - var(--th, 0) - var(--sd, .1)) * var(--ss, 3.2), 1); opacity: var(--kc); transform: scale(calc(0.6 + (0.4 + var(--ov, .12)) * var(--kc) - var(--ov, .12) * var(--ks))); }
[data-entrance="punch"] .w.em { --ov: .24; --sd: .16; --ss: 2.6; }
[data-entrance="approach"] .w { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.4, 1); opacity: var(--kc); transform: scale(calc(0.82 + 0.18 * var(--kc))); }
[data-entrance="weave"] .c { --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.6, 1); opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * var(--jy, 0px) * 1.4)); }
.band .stage-2 { --ks: clamp(0, (var(--k, 0) - .5) * 3, 1); opacity: var(--ks); transform: translateY(calc((1 - var(--ks)) * 16px)); }
.band .stage-3 { --kb: clamp(0, (var(--k, 0) - .7) * 4, 1); opacity: var(--kb); transform: translateY(calc((1 - var(--kb)) * 16px)); }

/* light-hero mode: the footage opens on lamp-lit paper, so every caption is ink on paper under one ivory-scrim system,
   the nav is ink from the first frame, and the paper hand-over becomes a gentle tint blend instead of a full wash */
html.hero-light .band { color: var(--ink); text-shadow: none; }
html.hero-light .band::before { background: radial-gradient(ellipse 54% 70% at 28% 52%, rgba(243, 238, 227, .88) 0%, rgba(243, 238, 227, .6) 46%, rgba(243, 238, 227, 0) 78%); }
html.hero-light .band.lane-r::before { background: radial-gradient(ellipse 54% 70% at 72% 52%, rgba(243, 238, 227, .88) 0%, rgba(243, 238, 227, .6) 46%, rgba(243, 238, 227, 0) 78%); }
html.hero-light .band .kicker { color: var(--gold-deep); }
html.hero-light .band .kicker::before, html.hero-light .band.lane-r .kicker::after { background: var(--gold); }
html.hero-light .band p { color: var(--ink-2); }
html.hero-light .band .w.em .c { color: var(--gold-deep); }
html.hero-light .band .btn-ghost { border-color: rgba(20, 23, 26, .35); color: var(--ink); }
html.hero-light .band .btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
html.hero-light .scrim { background: linear-gradient(rgba(243, 238, 227, .55) 0, rgba(243, 238, 227, .2) 70px, rgba(243, 238, 227, 0) 150px); opacity: 1; }
/* the settle wash blends the paper toward the page's ivory but leaves a soft hole around the wax, so the seal keeps its black */
html.hero-light .stage-light { opacity: calc(.3 * clamp(0, (var(--p) - .72) / .12, 1)); background: radial-gradient(circle at var(--sx, 70%) var(--sy, 50%), rgba(243, 238, 227, 0) calc(var(--sd, 200px) * .55), var(--paper) calc(var(--sd, 200px) * .88)); }
html.hero-light .stage-light::after { display: none; }
html.hero-light .band.lane-l::before { background: radial-gradient(ellipse 46% 72% at 24% 52%, rgba(243, 238, 227, .88) 0%, rgba(243, 238, 227, .6) 44%, rgba(243, 238, 227, 0) 74%); }
html.hero-light .stage-vector { display: none; }
html.hero-light .ring { color: var(--gold-deep); }
html.hero-light .nav { color: var(--ink); }
html.hero-light .nav .brand-sub { color: var(--gold-deep); }
html.hero-light .nav.scrolled::before { background: rgba(243, 238, 227, .82); border-color: var(--paper-line); }
/* Upright screens: the film fills the top of the screen, and its darker, smoky upper corner sits right under the
   name. The bar is frosted paper from the first frame (the same bar the page shows after the first scroll). */
@media (orientation: portrait) {
  html.hero-light .nav::before { background: rgba(243, 238, 227, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--paper-line); }
}
html.hero-light .nav .nav-cta { border-color: rgba(20, 23, 26, .35); color: var(--ink); }
html.hero-light .nav .nav-cta:hover { border-color: var(--ink); color: var(--ink); }
html.hero-light .menu-btn span::before, html.hero-light .menu-btn span::after { background: var(--ink); }
html.hero-light .hero-static { color: var(--ink); text-shadow: none; }
html.hero-light .hero-static::before { background: linear-gradient(180deg, rgba(243, 238, 227, 0) 0%, rgba(243, 238, 227, 0) 42%, rgba(243, 238, 227, .6) 62%, rgba(243, 238, 227, .92) 100%); }
html.hero-light .hero-static .kicker { color: var(--gold-deep); }
html.hero-light .hero-static .kicker::before { background: var(--gold); }
html.hero-light .hero-static p { color: var(--ink-2); }
html.hero-light .hero-static .btn-ghost { border-color: rgba(20, 23, 26, .35); color: var(--ink); }
html.hero-light .hero-static::after { display: none; }

/* the seal sets into the wax: positioned over the disc in the footage by site.js, driven by the settle band's --k.
   The two rings draw themselves first, then the mark is revealed from the centre outward, like an impression taking */
.seal-overlay { position: absolute; left: var(--sx, 50%); top: var(--sy, 50%); width: var(--sd, 120px); height: var(--sdy, var(--sd, 120px)); transform: translate(-50%, -50%) scale(calc(.965 + .035 * var(--sealk, 0))); pointer-events: none; --sk: var(--sealk, 0); }
.seal-overlay svg { width: 100%; height: 100%; overflow: visible; }
/* stage one, the impression forming under the wax skin: a soft shadow, a lit relief and a wax-toned copy of the mark.
   All three retire as the photograph of the stamped seal takes over */
.seal-overlay .impression { opacity: calc(clamp(0, (var(--sk) - .15) * 1.6, 1) * (1 - clamp(0, (var(--sk) - .45) * 2.5, 1))); }
.seal-overlay .relief { opacity: calc(clamp(0, var(--sk) * 1.8, 1) * (1 - clamp(0, (var(--sk) - .45) * 2.5, 1))); }
.seal-overlay .wax { opacity: calc(min(clamp(0, var(--sk) * 6, .85), clamp(0, .85 - (var(--sk) - .3) * 2, .85)) * (1 - clamp(0, (var(--sk) - .45) * 2.5, 1))); }
/* stage two, the stamped seal itself: a photograph of the emblem pressed into that wax, generated from the firm's mark,
   cut as a soft-edged patch and laid over the film's wax at the measured position */
.seal-overlay .photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: clamp(0, (var(--sk) - .4) * 1.7, 1); transform: scale(calc(.98 + .02 * clamp(0, (var(--sk) - .4) * 1.7, 1))); }

/* the hand-over: the foot of the stage turns into the page's ivory as the visitor arrives, so the film and the page meet without a seam */
.stage-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; pointer-events: none; background: linear-gradient(to bottom, rgba(243, 238, 227, 0) 0%, rgba(243, 238, 227, .55) 55%, var(--paper) 100%); opacity: clamp(0, (var(--p, 0) - .8) / .16, 1); }

/* the light arrives: a warm wash sweeps down the sheet with the scroll, blended so the wax stays dark and the paper brightens */
.dawn { position: absolute; left: 0; right: 0; top: -250%; height: 250%; pointer-events: none; mix-blend-mode: soft-light; background: linear-gradient(to bottom, rgba(255, 246, 226, .72) 0%, rgba(255, 246, 226, .72) 76%, rgba(255, 246, 226, .4) 88%, rgba(255, 246, 226, 0) 100%); transform: translateY(calc(var(--p, 0) * 60%)); will-change: transform; }
/* the footage carries its own push-in; the poster only needs a compositor layer */
.poster, .stage video { transform: translateZ(0); will-change: transform; }
html.hero-light .band h1, html.hero-light .band h2 { max-width: min(14ch, 56vw); }
html.hero-light .band .h-sub { max-width: min(16ch, 56vw); }
html.hero-light .band p { max-width: min(46ch, 52vw); }

/* ------------------------------------------------------------------ */
/* The film on phones and portrait tablets. The same footage, framed   */
/* for a tall screen: it sits in the upper part of the stage, cropped  */
/* around the seal, and fades into the paper where the captions sit.   */
/* site.js writes --vx, the horizontal crop that centres the seal.     */
/* ------------------------------------------------------------------ */
.video-fade { display: none; }
@media (orientation: portrait) {
  .stage { --vbox-h: min(128vw, 62vh); }
  @supports (height: 1svh) { .stage { --vbox-h: min(128vw, 62svh); } }
  .poster { inset: 0 0 auto 0; height: var(--vbox-h); background-position: var(--vx, 80%) 50%; }
  .stage video { inset: 0 0 auto 0; height: var(--vbox-h); object-position: var(--vx, 80%) 50%; }
  .video-fade { display: block; position: absolute; left: 0; right: 0; top: calc(var(--vbox-h) * .68); height: calc(var(--vbox-h) * .32 + 2px); pointer-events: none; background: linear-gradient(to bottom, rgba(243, 238, 227, 0) 0%, rgba(243, 238, 227, .72) 55%, var(--paper) 100%); }
  .ring { top: calc(var(--nav-h) + 14px); bottom: auto; right: 18px; width: 28px; height: 28px; }
  .band { align-content: end; justify-items: start; text-align: left; padding: calc(var(--nav-h) + 8px) var(--gutter) calc(26px + env(safe-area-inset-bottom)); }
  .band:first-child { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }   /* room for the scroll cue */
  .band h1, .band h2 { font-size: 30px; font-size: clamp(28px, min(10.2vw, 5.4svh), 56px); }
  .band .h-sub { font-size: 27px; font-size: clamp(25px, min(8.6vw, 4.6svh), 48px); }
  .band p { margin-top: 12px; font-size: 15px; font-size: clamp(14px, min(4.1vw, 2.3svh), 18px); }
  .band .kicker { margin-bottom: 12px; }
  .band .row { margin-top: 18px; }
  html.hero-light .band h1, html.hero-light .band h2 { max-width: 17ch; }
  html.hero-light .band .h-sub { max-width: 18ch; }
  html.hero-light .band p { max-width: 38ch; }
  html.hero-light .band::before, html.hero-light .band.lane-l::before, html.hero-light .band.lane-r::before {
    inset: auto 0 0 0; height: calc(100% - var(--vbox-h) * .7);
    background: linear-gradient(to bottom, rgba(243, 238, 227, 0) 0%, rgba(243, 238, 227, .84) 30%, rgba(243, 238, 227, .94) 100%);
  }
}
@media (orientation: portrait) and (max-width: 480px) { .band .row .btn-ghost { display: none; } }
/* portrait tablets have room for more of the film above the captions */
@media (orientation: portrait) and (min-width: 700px) {
  .stage { --vbox-h: min(128vw, 68vh); }
  @supports (height: 1svh) { .stage { --vbox-h: min(128vw, 68svh); } }
}

/* static stills: the landscape one by default, the portrait crop on portrait screens, raised so the seal sits above the copy */
:root { --static-bg: url("hero-static-wide.jpg"); --static-size: cover; --static-pos: center; }
@media (orientation: portrait) { :root { --static-bg: url("hero-static.jpg"); --static-size: auto 136%; --static-pos: 50% 100%; } }
@media (max-width: 480px) { .hero-static .btn-ghost { display: none; } .hero-static h1 { font-size: clamp(38px, 10vw, 46px); } }
@media (max-width: 480px) and (max-height: 700px) { .hero-static { padding-bottom: 7vh; } .hero-static h1 { font-size: 34px; } .hero-static p { font-size: 15px; margin-top: 10px; } .hero-static .row { margin-top: 18px; } .hero-static .kicker { margin-bottom: 10px; } }

/* The still hero: for visitors who ask for reduced motion or data saving, and for browsers that run no scripts.
   The class is set in <head> before first paint and kept live by site.js. :where() adds no specificity, so these
   rules cascade exactly as the old media-query version did (the hero-light overrides above still win). */
.hero-static { display: none; }
:where(html.static-hero, html.no-js) .hero { height: auto; }
:where(html.static-hero, html.no-js) .stage { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
:where(html.static-hero, html.no-js) .stage video, :where(html.static-hero, html.no-js) .ring, :where(html.static-hero, html.no-js) .cue,
:where(html.static-hero, html.no-js) .bands, :where(html.static-hero, html.no-js) .stage-light, :where(html.static-hero, html.no-js) .seal-overlay,
:where(html.static-hero, html.no-js) .video-fade { display: none; }
:where(html.static-hero, html.no-js) .scrim, :where(html.static-hero, html.no-js) .stage-vector { opacity: 1; }
:where(html.static-hero, html.no-js) .poster { inset: 0; height: auto; background-image: var(--static-bg, none); background-size: var(--static-size, cover); background-position: var(--static-pos, center); }
:where(html.static-hero, html.no-js) .poster::after { display: none; }
:where(html.static-hero, html.no-js) .hero-static { display: grid; position: relative; min-height: 100vh; min-height: 100svh; align-content: end; padding: calc(var(--nav-h) + 8vh) var(--gutter) 12vh; color: var(--ivory); text-shadow: var(--tshadow); }
:where(html.static-hero, html.no-js) .hero-static::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 11, 10, .05) 0%, rgba(8, 11, 10, .4) 45%, rgba(8, 11, 10, .86) 100%); }
:where(html.static-hero, html.no-js) .hero-static::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8vh; background: linear-gradient(transparent, var(--paper)); }
:where(html.static-hero, html.no-js) .hero-static > * { position: relative; }
:where(html.static-hero, html.no-js) .hero-static .kicker { color: var(--gold-hi); margin-bottom: 16px; }
:where(html.static-hero, html.no-js) .hero-static .kicker::before { background: var(--gold-hi); }
:where(html.static-hero, html.no-js) .hero-static h1 { font-size: clamp(40px, 10.5vw, 66px); line-height: .98; max-width: 12ch; }
:where(html.static-hero, html.no-js) .hero-static p { margin-top: 16px; color: var(--ivory-2); max-width: 44ch; }
:where(html.static-hero, html.no-js) .hero-static .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
:where(html.static-hero, html.no-js) .hero-static .btn { text-shadow: none; }

/* short landscape screens (phones held sideways, very short windows): the desktop layout, compacted */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --nav-h: 60px; }
  .brand svg { width: 38px; height: 38px; }
  .band { padding: calc(var(--nav-h) + 6px) var(--gutter) 56px; }
  .band h1, .band h2 { font-size: 28px; font-size: clamp(22px, 7.4svh, 34px); }
  .band .h-sub { font-size: 25px; font-size: clamp(20px, 6.4svh, 30px); }
  .band p { margin-top: 10px; font-size: 13px; line-height: 1.5; }
  .band .kicker { margin-bottom: 8px; font-size: 10px; }
  .band .row { margin-top: 12px; }
  .band .row .btn-ghost { display: none; }
  /* a wider measure keeps each caption to two or three short lines on a short screen, clear of the seal on the right */
  html.hero-light .band h1, html.hero-light .band h2, html.hero-light .band .h-sub { max-width: min(24ch, 46vw); }
  html.hero-light .band p { max-width: min(46ch, 46vw); }
  .cue { bottom: calc(10px + env(safe-area-inset-bottom)); padding: 6px 14px 6px 12px; }
  .ring { bottom: calc(12px + env(safe-area-inset-bottom)); right: 16px; width: 26px; height: 26px; }
  .hero-static h1 { font-size: 30px; font-size: clamp(26px, 8svh, 40px); }
}

/* ------------------------------------------------------------------ */
/* Sections                                                            */
/* ------------------------------------------------------------------ */
section { position: relative; padding: clamp(72px, 9vw, 130px) 0; }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }

/* entrances are choreography: parts arrive in sequence, then the delays retire */
.reveal .part { transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.reveal-ready .reveal .part { opacity: 0; transform: translateY(22px); }   /* armed in <head>; released if scripts fail */
html.reveal-ready .reveal.in .part { opacity: 1; transform: none; }
.reveal.in .part:nth-child(1) { transition-delay: 0s; }
.reveal.in .part:nth-child(2) { transition-delay: .09s; }
.reveal.in .part:nth-child(3) { transition-delay: .18s; }
.reveal.in .part:nth-child(4) { transition-delay: .27s; }
.reveal.in .part:nth-child(5) { transition-delay: .36s; }
.reveal.in .part:nth-child(6) { transition-delay: .45s; }
.reveal.in .part:nth-child(7) { transition-delay: .54s; }
.reveal.in .part:nth-child(8) { transition-delay: .63s; }
.reveal.in.settled .part:nth-child(n) { transition-delay: 0s !important; }

/* the firm */
.firm { padding-top: clamp(64px, 8vw, 110px); }
.firm-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.firm-text { display: grid; gap: 20px; }
.firm-text .lede { max-width: 58ch; }
.firm-facts { display: grid; gap: 0; border-top: 1px solid var(--gold-line); }
.fact { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--paper-line); font-size: 15.5px; color: var(--ink-2); }
.fact b { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; padding-top: 5px; }
@media (max-width: 900px) { .firm-grid { grid-template-columns: 1fr; } }

/* practice areas: a ledger of matters */
.practice { padding-top: clamp(40px, 5vw, 70px); }
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.matter { padding: 30px 0 34px; border-top: 1px solid var(--gold-line); display: grid; grid-template-columns: 44px 1fr; gap: 16px 20px; align-items: start; transition: border-color .4s var(--ease); }
.matter:hover { border-top-color: var(--gold); }
.matter .num { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--gold-deep); margin-bottom: 10px; }
.matter h3 { font-size: clamp(26px, 2.4vw, 32px); }
.matter p { color: var(--ink-2); margin-top: 10px; font-size: 16px; max-width: 46ch; }
.matter ul { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.matter li { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-2); padding: 6px 10px; border: 1px solid var(--paper-line); border-radius: 999px; }
.matter .icon { width: 44px; height: 44px; color: var(--gold); margin-top: 6px; }
.matter .icon svg { width: 100%; height: 100%; }
.matter-cta { background: var(--paper-2); margin-top: 0; padding: 30px 26px 34px; border-top-color: var(--gold); border-radius: 0 0 6px 6px; }
.matter-cta .num { color: var(--ink-3); letter-spacing: .08em; text-transform: none; }
.matter-cta .btn { margin-top: 20px; }

/* how we work: a numbered path with a self-drawing gold line */
.how { background: var(--paper-2); }
.how::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.how-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.how-head { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 18px; }
.path { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 0 20px; }
.path .draw { grid-column: 1; grid-row: 1 / span 6; width: 56px; height: 100%; color: var(--gold); }
.step { grid-column: 2; padding: 24px 0 36px; border-bottom: 1px solid var(--paper-line); display: grid; gap: 6px; position: relative; }
.step::before { content: ""; position: absolute; left: -49px; top: 34px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper-2); border: 1.5px solid var(--gold); }
.step:last-child { border-bottom: 0; }
.step .n { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--gold-deep); }
.step h3 { font-size: clamp(24px, 2.2vw, 30px); }
.step p { color: var(--ink-2); max-width: 56ch; }
@media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; } .how-head { position: static; } }

/* overseas clients */
.overseas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.overseas-grid > div { display: grid; gap: 18px; }
.checks { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--gold-line); }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--paper-line); color: var(--ink-2); font-size: 16px; align-items: start; }
.checks li svg { width: 22px; height: 22px; color: var(--gold); margin-top: 3px; }
.checks .checks-cta { display: block; border-bottom: 0; padding-top: 26px; }
@media (max-width: 900px) { .overseas-grid { grid-template-columns: 1fr; } }

/* leadership: the one black band */
.leadership { background: var(--black); color: var(--ivory); overflow: hidden; }
.leadership .kicker { color: var(--gold-hi); }
.leadership .kicker::before { background: var(--gold-hi); }
.leadership .lede { color: var(--ivory-2); }
.watermark { position: absolute; right: -8%; top: 50%; width: min(70vw, 760px); aspect-ratio: 1; transform: translateY(-50%); opacity: .06; pointer-events: none; }
.watermark svg { width: 100%; height: 100%; }
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 40px); max-width: 940px; }
.person { display: grid; grid-template-rows: auto 1fr; border: 1px solid rgba(201, 162, 76, .18); border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, var(--black-2), var(--black)); transition: border-color .4s var(--ease), transform .5s var(--ease); }
.person:hover { border-color: rgba(201, 162, 76, .5); transform: translateY(-4px); }
.portrait { aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 35%, #222A26, #10140F); }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 1.2s var(--ease); }
.person:hover .portrait:not(.develop) img { transform: scale(1.03); }
/* The partner's portrait develops as it rises into view (site.js writes --dev 0..1 and --py -1..1): a cool, dim monochrome
   print, slightly enlarged, turns to full colour and settles by the time it reaches the middle of the screen, then drifts
   gently. The 1.05 resting scale covers the 10px parallax travel. Without the script it simply shows in full colour. */
html.reveal-ready .portrait.develop { --dev: 0; --py: 0; }
.portrait.develop img {
  object-position: 40% top;
  transform: translate3d(0, calc(var(--py, 0) * -10px), 0) scale(calc(1.12 - .07 * var(--dev, 1)));
  filter: grayscale(calc(1 - var(--dev, 1))) brightness(calc(.72 + .28 * var(--dev, 1))) contrast(calc(1.1 - .1 * var(--dev, 1)));
  transition: none; will-change: transform, filter;
}
/* soft edge shading lets the light studio backdrop sit in the dark band, and the foot fades into the card */
.portrait.develop::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 58% at 50% 34%, rgba(11, 14, 13, 0) 40%, rgba(11, 14, 13, .38) 72%, rgba(11, 14, 13, .72) 100%),
    linear-gradient(90deg, rgba(11, 14, 13, .45) 0%, rgba(11, 14, 13, 0) 22%, rgba(11, 14, 13, 0) 78%, rgba(11, 14, 13, .45) 100%),
    linear-gradient(180deg, rgba(11, 14, 13, 0) 58%, rgba(11, 14, 13, .86) 100%); }
.portrait .placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold-hi); }
.portrait .placeholder svg { width: 34%; opacity: .45; }
.portrait .placeholder span { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-2); white-space: nowrap; opacity: .7; }
.person .bio { padding: 26px 26px 30px; display: grid; gap: 8px; align-content: start; }
.person h3 { font-size: 30px; }
.person .role { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); }
.person p { color: var(--ivory-2); font-size: 15.5px; margin-top: 6px; }
.person .cred { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: #7E847C; margin-top: 10px; }
/* One leader: the card runs across the section with the portrait beside the biography; phones stack it as before */
.people.solo { grid-template-columns: minmax(0, 1fr); }
.people.solo .person { grid-template-rows: none; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.people.solo .bio { padding: clamp(28px, 4vw, 52px); align-content: center; gap: 10px; }
.people.solo .person h3 { font-size: clamp(30px, 3vw, 38px); }
.people.solo .bio p { max-width: 42ch; }
.person .role { text-wrap: balance; }
/* The partner's personal note: a quotation in the display italic, set off by a thin gold rule */
.person .note { margin: 12px 0 0; padding: 2px 0 2px 18px; border-left: 1px solid rgba(201, 162, 76, .45); }
.person .note p { margin: 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 18.5px; line-height: 1.5; color: var(--ivory); }
.person h3 { text-wrap: balance; }
/* Qualifications: a short list under a hairline, each line marked with a small gold dot
   (a dot stays even on standard-resolution screens, where a 1px rule falls between pixel rows and greys out) */
.person .creds { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(201, 162, 76, .2); display: grid; gap: 7px; }
.person .creds li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.45; color: var(--ivory-2); }
.person .creds li::before { content: ""; position: absolute; left: 1px; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: var(--gold-hi); }
/* when the biography runs taller than a 4:5 portrait, the portrait grows with it instead of leaving a gap below */
.people.solo .portrait { align-self: stretch; width: 100%; }
/* phones and upright tablets stack the card: the photo on top, the biography below in a comfortable measure */
@media (max-width: 900px) {
  .people.solo .person { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .people.solo .bio { padding: 26px 26px 30px; gap: 8px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .people.solo .portrait { aspect-ratio: 4 / 3; }
  .portrait.develop img { object-position: 40% 12%; }
  .people.solo .bio { padding: 34px 38px 40px; }
  .people.solo .bio p { max-width: 56ch; }
}
/* Two partners: their cards sit side by side on wide screens; below 900px they stack in one comfortable column,
   with a square crop of each portrait on tablets (head and shoulders) so a photo never fills the whole screen */
@media (max-width: 900px) {
  .people:not(.solo) { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .people:not(.solo) .portrait { aspect-ratio: 1 / 1; }
  .people:not(.solo) .bio { padding: 32px 34px 36px; }
}

/* the seal moment */
.commitments { background: transparent; }   /* shares the page's paper environment with the overseas section above it, so no seam shows between them */
.commit-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.commit-text { display: grid; gap: 18px; }
.commit-seal { display: grid; place-items: center; }
.hold-section { --hp: 0; }   /* the drive loop writes --hp on the section; everything inside inherits it */
.seal-wrap { position: relative; width: min(320px, 70vw); aspect-ratio: 1; margin: 0 auto 64px; display: grid; place-items: center; }
.hold { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transform: scale(calc(1 - .05 * var(--hp))); transition: transform .12s linear; }
.hold .seal-art { width: 86%; height: 86%; filter: drop-shadow(0 18px 34px rgba(20, 23, 26, .22)); transition: filter .4s var(--ease); }
.hold .seal-art .ghost { color: var(--ink); opacity: calc(.22 + .1 * var(--hp)); }
.hold .seal-art .ink { opacity: var(--hp); }
.hold.done .seal-art { filter: drop-shadow(0 26px 44px rgba(20, 23, 26, .3)); }
.hold .progress { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hold .progress circle { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 100; stroke-dashoffset: calc(100 - 100 * var(--hp)); stroke-linecap: round; opacity: clamp(0, var(--hp) * 30, 1); }
.hold .label { position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%); white-space: nowrap; font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); transition: opacity .4s var(--ease), color .4s var(--ease); }
.hold.holding .label { color: var(--gold-deep); }
.hold.done .label { opacity: 0; }
.hold:focus-visible { outline-offset: 8px; }
.commit { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--gold-line); margin-top: 8px; }
.commit li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--paper-line); opacity: .3; transform: translateX(-8px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.commit li svg { width: 22px; height: 22px; color: var(--gold); margin-top: 3px; }
.commit li strong { font-family: var(--display); font-weight: 600; font-size: 23px; display: block; margin-bottom: 3px; }
.commit li span { color: var(--ink-2); font-size: 15.5px; }
.hold-section.done .commit li { opacity: 1; transform: none; }
.hold-section.done .commit li:nth-child(1) { transition-delay: .05s; }
.hold-section.done .commit li:nth-child(2) { transition-delay: .2s; }
.hold-section.done .commit li:nth-child(3) { transition-delay: .35s; }
.hold-section.done .commit li:nth-child(4) { transition-delay: .5s; }
.hold-section.done .commit li:nth-child(5) { transition-delay: .65s; }
.done-line { font-family: var(--display); font-style: italic; font-size: 24px; color: var(--gold-deep); opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease) .4s, transform .6s var(--ease) .4s; min-height: 1.4em; }
.hold-section.done .done-line { opacity: 1; transform: none; }
@media (max-width: 900px) { .commit-grid { grid-template-columns: 1fr; } .commit-seal { order: -1; } }

/* litigation support for U.S. firms */
.us { background: var(--paper-3); }
.us::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.us-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.us-grid > div { display: grid; gap: 18px; justify-items: start; }
.us-list { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--gold-line); }
.us-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--paper-line); align-items: start; }
.us-list li svg { width: 40px; height: 40px; color: var(--gold); }
.us-list strong { font-family: var(--display); font-weight: 600; font-size: 23px; display: block; margin-bottom: 3px; }
.us-list span { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 900px) { .us-grid { grid-template-columns: 1fr; } }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-head { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 18px; }
.faq { display: grid; border-top: 1px solid var(--gold-line); }
.faq details { border-bottom: 1px solid var(--paper-line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 20px; align-items: center; padding: 22px 0; font-family: var(--display); font-size: clamp(21px, 1.9vw, 26px); font-weight: 500; transition: color .3s var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-deep); }
.faq summary .plus { width: 28px; height: 28px; position: relative; border: 1px solid var(--gold-line); border-radius: 50%; transition: transform .45s var(--ease), border-color .3s; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--gold-deep); transform: translate(-50%, -50%); }
.faq summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary .plus { transform: rotate(45deg); border-color: var(--gold); }
.faq .answer { padding: 0 44px 26px 0; color: var(--ink-2); max-width: 66ch; font-size: 16.5px; animation: faqin .5s var(--ease); }
@keyframes faqin { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } .faq-head { position: static; } }

/* contact */
.contact { background: var(--paper-2); }
.contact::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.contact-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.contact-text { display: grid; gap: 18px; }
.contact-list { display: grid; gap: 20px; margin-top: 10px; padding: 0; list-style: none; }
.contact-list li { display: grid; grid-template-columns: 22px 1fr; gap: 16px; align-items: start; color: var(--ink-2); font-size: 16px; }
.contact-list svg { width: 22px; height: 22px; color: var(--gold); margin-top: 3px; }
.contact-list b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; margin-bottom: 4px; }
.contact-list a { border-bottom: 1px solid var(--gold-line); transition: border-color .3s, color .3s; }
.contact-list a:hover { color: var(--gold-deep); border-color: var(--gold); }
.confidential { font-size: 14px; color: var(--ink-3); padding: 14px 16px; border-left: 2px solid var(--gold); background: rgba(169, 134, 64, .06); max-width: 52ch; }
.paper { background: var(--paper); color: var(--ink); border-radius: 6px; position: relative; box-shadow: 0 30px 60px rgba(20, 23, 26, .14), 0 1px 0 rgba(255, 255, 255, .6) inset; border: 1px solid var(--paper-line); }
.paper::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(169, 134, 64, .28); border-radius: 3px; pointer-events: none; }
.form { padding: clamp(28px, 3.6vw, 46px); display: grid; gap: 18px; }
.form-fields { display: grid; gap: 18px; }
.form .field { display: grid; gap: 6px; }
.form label { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; }
.form input, .form select, .form textarea { font: inherit; font-size: 16px; color: var(--ink); background: rgba(255, 255, 255, .5); border: 1px solid rgba(20, 23, 26, .2); border-radius: 4px; padding: 13px 14px; width: 100%; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.form input::placeholder, .form textarea::placeholder { color: #9A9E9C; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(169, 134, 64, .18); }
.form textarea { min-height: 130px; resize: vertical; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form .two { grid-template-columns: 1fr; } }
.form .fine { font-size: 13px; color: var(--ink-3); }
.form .form-ok { display: none; padding: 18px; border: 1px solid var(--gold-line); border-radius: 4px; color: var(--ink-2); }
.form .form-ok a { border-bottom: 1px solid var(--gold-line); }
.form.sent .form-ok { display: block; }
.form.sent .form-fields { display: none; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* footer */
footer { position: relative; z-index: 1; background: var(--paper-3); border-top: 1px solid var(--gold-line); padding: 56px 0 32px; color: var(--ink-2); font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; align-items: start; }
.foot-brand { display: flex; gap: 18px; align-items: center; }
.foot-seal { width: 72px; height: 72px; flex: none; color: var(--ink); }
.foot-name { display: block; font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--ink); margin-bottom: 4px; }
footer h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; margin-bottom: 14px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
footer a:hover { color: var(--gold-deep); }
.foot-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--paper-line); display: grid; grid-template-columns: auto 1fr; gap: 12px 40px; font-size: 12.5px; color: var(--ink-3); }
.foot-bottom span:last-child { max-width: 72ch; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr; } .foot-bottom { grid-template-columns: 1fr; } }

/* living elements: one per section, whisper level, paused off-screen and on hidden tabs */
.living .pulse { animation: none; }
.living.live .pulse { animation: pulse 5.5s ease-in-out -2s infinite; }
@keyframes pulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
.living.live .watermark { animation: slowturn 120s linear -40s infinite; }
@keyframes slowturn { from { transform: translateY(-50%) rotate(0deg) } to { transform: translateY(-50%) rotate(360deg) } }
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }

/* gold motes in the hero, whisper level */
.motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.motes i { position: absolute; bottom: 10%; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-hi); opacity: 0; animation: mote 14s linear infinite; }
@keyframes mote { 0% { transform: translate3d(0, 0, 0); opacity: 0 } 12% { opacity: .5 } 85% { opacity: .3 } 100% { transform: translate3d(var(--mx, 20px), -60vh, 0); opacity: 0 } }

/* ------------------------------------------------------------------ */
/* Reduced motion: final states, no drives, nothing hidden             */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
  body { animation: none; opacity: 1; }
  html.reveal-ready .reveal .part, .reveal .part { opacity: 1; transform: none; }
  .draw path, .draw line, .draw polyline, .draw circle { stroke-dashoffset: 0 !important; }
  .commit li { opacity: 1; transform: none; }
  .done-line { opacity: 1; transform: none; }
  .hold .seal-art .ink { opacity: 1; }
  .band { opacity: 1; --k: 1; }
  .btn:hover { transform: none; }
  .cue-glyph .wheel { animation: none; }
  .watermark { transform: translateY(-50%); }
  .portrait.develop img { transform: scale(1.05); filter: none; }
}