/* =========================================================
   LSH Partners - site styles
   Palette: brand colour pallete (Color Pallete/)
   Motion follows emilkowalski/skills (.claude/skills): strong custom
   curves, sub-300ms UI feedback, hover gated to fine pointers,
   transform/opacity/clip-path/filter only.
   ========================================================= */

:root {
  /* Brand palette */
  --navy: #335A8F;      /* main firm colour (headings, logo bar, primary blocks) */
  --blue: #335A8F;
  --gold: #C09032;
  --steel: #6683AB;
  --mist: #99ACC7;
  --haze: #CCD6E3;
  --frost: #EBEEF3;
  --ink: #262626;
  --graphite: #595959;
  --silver: #D9D9D9;
  --paper: #F5F6F8;
  --green: #3A7D44;
  --red: #A63A3A;

  /* Derived tints */
  --navy-deep: #20395C; /* palette deep navy, used only for shading under the main colour */
  --gold-tint: #FAF6EC;
  --gold-line: #E2CF9F;
  --hair: #D3DAE5;

  /* Gradients (built only from palette tones) */
  --grad-paper:
    radial-gradient(1100px 620px at 100% 0%, rgba(204, 214, 227, .55), transparent 62%),
    radial-gradient(900px 560px at 0% 100%, rgba(192, 144, 50, .07), transparent 60%),
    linear-gradient(180deg, #F8F9FB 0%, #F0F2F6 100%);
  --grad-frost:
    radial-gradient(1000px 560px at 0% 0%, rgba(255, 255, 255, .9), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(153, 172, 199, .34), transparent 62%),
    linear-gradient(160deg, #EEF1F6 0%, #E3E8F0 100%);
  --grad-navy: linear-gradient(135deg, #20395C 0%, #2B4D7C 30%, #335A8F 65%, #3B659E 100%);
  --grad-gold: linear-gradient(90deg, #A97C26 0%, #C09032 45%, #DDB766 100%);
  --grad-card: linear-gradient(165deg, #FFFFFF 0%, #FAFBFD 55%, #EEF2F8 100%);
  --grad-card-gold: linear-gradient(165deg, #FDFBF5 0%, #F8F1E0 60%, #F1E4C3 100%);
  --grad-hair: linear-gradient(90deg, var(--haze), rgba(204, 214, 227, .12));
  /* Light-catching edges: bright top-left, cooler bottom-right */
  --edge-cool: linear-gradient(160deg, #FFFFFF 0%, #DCE3EC 40%, #B9C6D8 100%);
  --edge-gold: linear-gradient(160deg, #FFFFFF 0%, #EADBB4 40%, #D3B26A 100%);
  --edge-silver: linear-gradient(160deg, #FFFFFF 0%, #E6E6E6 40%, #C4C4C4 100%);
  /* Neutral light grey (palette #D9D9D9 / 217,217,217) */
  --grad-silver:
    radial-gradient(1000px 560px at 0% 0%, rgba(255, 255, 255, .85), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(217, 217, 217, .95), transparent 62%),
    linear-gradient(170deg, #F4F4F4 0%, #E7E7E7 55%, #D9D9D9 100%);

  /* Elevation */
  --shadow-card:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(23, 43, 71, .05),
    0 4px 10px -2px rgba(23, 43, 71, .06),
    0 22px 40px -22px rgba(23, 43, 71, .22);
  --shadow-photo:
    0 2px 4px rgba(23, 43, 71, .08),
    0 14px 28px -8px rgba(23, 43, 71, .18),
    0 44px 80px -36px rgba(23, 43, 71, .45);
  --lift: drop-shadow(0 26px 26px rgba(23, 43, 71, .16));

  /* Motion tokens (emil-design-eng) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --font: "EB Garamond", Garamond, "Times New Roman", serif;
  --gutter: clamp(20px, 4.5vw, 96px);
  /* Layout grid: one content width and one spacing scale for every section */
  --content: 80%;                              /* content column, centred */
  --section-y: clamp(110px, 12vw, 190px);      /* top/bottom padding of every section */
  --space-block: clamp(56px, 6vw, 96px);       /* heading -> content, block -> block */
  --gap-split: clamp(48px, 6vw, 112px);        /* two-column layouts */
  --gap-cards: clamp(20px, 2.2vw, 36px);       /* minimum gap between cards */
  --nav-h: 84px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Mobile baseline (mobile-native skill): no grey tap flash, no font inflation in landscape */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* Controls fire on tap without the double-tap delay and don't select their label on long-press.
   Content links (email, phone, address) stay selectable. */
a, button, input, textarea, label { touch-action: manipulation; }
button, .btn, .nav__toggle, .person__card, .drawer__step, .drawer__close, .to-top, .brand {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
::selection { background: var(--gold); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
[id] { scroll-margin-top: 68px; }

/* Every section's content sits in the same centred column (80% of the page);
   backgrounds and photography still run full-bleed behind it. */
.container { width: var(--content); max-width: none; margin: 0 auto; padding: 0; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 10px 16px; background: var(--gold); color: #fff;
  transform: translateY(-160%); transition: transform 200ms var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ---------- Type ---------- */
/* Gold section labels: polished-gold lettering with a soft glow. The label is sized to its text so
   the metallic gradient spans the words, and light sweeps across it once as it reveals. */
.eyebrow {
  --eb-grad: linear-gradient(100deg, #96701F 0%, #C09032 22%, #D6AF5E 36%, #C3963A 50%, #A97C26 64%, #E3C67F 78%, #C09032 100%);
  --eb-line: #C09032;
  --eb-glow: drop-shadow(0 3px 10px rgba(192, 144, 50, .32));
  display: flex; align-items: center; gap: 20px; width: fit-content; max-width: 100%;
  font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); line-height: 1.4; margin-bottom: 28px;
  filter: var(--eb-glow);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .eyebrow {
    background: var(--eb-grad) 0 0 / 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}
html.js .eyebrow[data-reveal].is-in { animation: eyebrow-shine 1.8s var(--ease-out) .25s both; }
@keyframes eyebrow-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.eyebrow::before {
  content: ""; width: 52px; height: 1.5px; flex: none; background: linear-gradient(90deg, transparent, var(--eb-line));
  transform-origin: left; transform: scaleX(1);
  transition: transform 900ms var(--ease-out) 100ms;
}
.eyebrow--center { justify-content: center; margin-inline: auto; text-align: center; }
/* --both: a rule on each side of a left-aligned label (The Firm) */
.eyebrow--center::after, .eyebrow--both::after {
  content: ""; width: 52px; height: 1.5px; flex: none; background: linear-gradient(90deg, var(--eb-line), transparent);
  transform-origin: right; transition: transform 900ms var(--ease-out) 100ms;
}
/* On navy and photo backgrounds: a lighter gold so the lettering keeps its contrast */
.services .eyebrow, .contact .eyebrow, .hero .eyebrow, .legal-hero .eyebrow, .error-hero .eyebrow {
  --eb-grad: linear-gradient(100deg, #C9A04A 0%, #E2C27A 22%, #F7E9C2 36%, #DDB766 50%, #C9A04A 64%, #F3DFA6 78%, #DDB766 100%);
  --eb-line: #DDB766;
  --eb-glow: drop-shadow(0 2px 12px rgba(10, 20, 36, .45));
}

.h2 {
  font-size: clamp(42px, 5.2vw, 88px);
  font-weight: 400; line-height: 1.05; letter-spacing: -.014em;
  color: var(--navy);
  text-wrap: balance;
}
.lede { font-size: clamp(21px, 1.8vw, 27px); line-height: 1.6; color: var(--graphite); max-width: 880px; }

.section { position: relative; padding: var(--section-y) 0; }
.section--paper { background: var(--grad-paper); }
.section--frost { background: var(--grad-frost); }

.section-head { max-width: 1040px; margin-bottom: var(--space-block); }
.section-head .h2 + .lede { margin-top: 26px; }
.section-head--center { margin-inline: auto; text-align: center; }
/* Gold label centred on the page; title and intro stay left-aligned at the column edge.
   The header runs the full width so the label centres on the page, not on the title. */
.section-head--label { max-width: none; }
.section-head--label .h2 { max-width: 1040px; }
.section-head--center .lede { margin-inline: auto; text-wrap: balance; }
.lede, .point p, .investing__copy p { text-wrap: pretty; }
/* Balance gives up past six lines; on phones a long centred lede needs pretty to avoid a stranded last word */
@media (max-width: 640px) { .section-head--center .lede { text-wrap: pretty; } }

/* Word-split headline reveal: rise out of a mask and sharpen from a light blur */
/* Clip only the bottom edge (where words rise from). overflow:hidden also cut off
   italic overhangs such as the apostrophe in "clients’". */
.w { display: inline-block; clip-path: inset(-.6em -.6em 0 -.6em); vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.w > span {
  display: inline-block;
  transition: transform 900ms var(--ease-out), filter 700ms var(--ease-out), opacity 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 35ms);
}
html.js [data-split]:not(.is-in) .w > span { transform: translateY(105%); filter: blur(6px); opacity: 0; }

/* Generic reveal (marketing surface: allowed to run longer than UI feedback) */
html.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--d, 0s);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }
html.js .eyebrow[data-reveal]:not(.is-in)::before,
html.js .eyebrow[data-reveal]:not(.is-in)::after { transform: scaleX(0); }

/* ---------- Shine layer (injected by JS on cards and photos) ---------- */
.shine { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; border-radius: inherit; }
.shine__spot {
  position: absolute; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
  mix-blend-mode: soft-light; opacity: 0;
  transition: opacity 300ms ease;
  will-change: transform;
}
.shine--light .shine__spot {
  width: 460px; height: 460px; margin: -230px 0 0 -230px; mix-blend-mode: normal;
  background: radial-gradient(closest-side, rgba(192, 144, 50, .14), rgba(153, 172, 199, .08) 50%, rgba(255, 255, 255, 0));
}
.shine__sweep {
  position: absolute; top: -50%; bottom: -50%; left: 0; width: 36%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-190%) skewX(-20deg); opacity: 0;
  /* leave: fade out, then reset position once invisible */
  transition: opacity 250ms ease, transform 0s linear 300ms;
}
.shine--light .shine__sweep { background: linear-gradient(90deg, rgba(255, 250, 238, 0), rgba(226, 207, 159, .32) 50%, rgba(255, 250, 238, 0)); }
.is-shining > .shine .shine__spot, .is-shining .shine__spot { opacity: 1; }
.is-gleaming > .shine .shine__sweep, .is-gleaming .shine__sweep {
  transform: translateX(420%) skewX(-20deg); opacity: 1;
  transition: transform 1100ms var(--ease-out), opacity 200ms ease;
}

/* ---------- Icon badges ---------- */
.icon-badge {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 72px; height: 72px; border-radius: 50%;
  color: var(--navy);
  background:
    radial-gradient(circle at 30% 22%, #FFFFFF 0%, #FBF6EA 52%, #F1E4C3 100%) padding-box,
    var(--edge-gold) border-box;
  border: 1px solid transparent;
  box-shadow: 0 16px 30px -18px rgba(169, 124, 38, .8), inset 0 1px 0 rgba(255, 255, 255, .95);
  transition: color 200ms ease, transform 250ms var(--ease-out);
  isolation: isolate;
}
.icon-badge::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; z-index: -1;
  background: var(--grad-navy); opacity: 0; transition: opacity 250ms ease;
}
.icon-badge::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px dashed rgba(192, 144, 50, .38);
  transition: transform 600ms var(--ease-out), border-color 250ms ease;
}
.icon {
  width: 38px; height: 38px; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
}
/* No vector-effect here: Chrome mis-measures pathLength dashes on non-scaling strokes. */
.icon * {
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1200ms var(--ease-in-out) calc(300ms + var(--d, 0s));
}
html.js [data-reveal]:not(.is-in) .icon * { stroke-dashoffset: 1; }

.icon-badge--dark {
  /* Opaque navy base keeps the gold border-box gradient from showing through the glass */
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 70%) padding-box,
    linear-gradient(160deg, #2E5283, #20395C) padding-box,
    linear-gradient(160deg, rgba(221, 183, 102, .9), rgba(192, 144, 50, .25)) border-box;
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .18); color: var(--gold);
}
.icon-badge--dark::before { background: var(--grad-gold); }
.icon-badge--dark::after { border-color: rgba(192, 144, 50, .3); }

@media (hover: hover) and (pointer: fine) {
  .has-icon:hover .icon-badge { color: #fff; transform: translateY(-3px); }
  .has-icon:hover .icon-badge::before { opacity: 1; }
  .has-icon:hover .icon-badge::after { transform: rotate(90deg); border-color: rgba(192, 144, 50, .7); }
  .has-icon:hover .icon-badge--dark { color: var(--navy-deep); }
}

/* ---------- Buttons & links ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 24px; border: 1px solid currentColor; overflow: hidden; isolation: isolate;
  font-size: 16.5px; letter-spacing: .06em;
  transition: color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-gold);
  transform: scaleX(0); transform-origin: right; transition: transform 250ms var(--ease-out);
}
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-120%) skewX(-20deg); opacity: 0;
  transition: opacity 200ms ease, transform 0s linear 250ms;
}
.btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn:focus-visible { border-color: var(--gold); color: #fff; }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: scaleX(1); transform-origin: left; }
  .btn:hover { border-color: var(--gold); color: #fff; }
  .btn:hover::after { transform: translateX(330%) skewX(-20deg); opacity: 1; transition: transform 800ms var(--ease-out) 120ms, opacity 200ms ease 120ms; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--navy);
  min-height: 44px; padding-top: 8px; padding-bottom: 8px;
  background: var(--grad-gold) left bottom / 0% 1px no-repeat,
              linear-gradient(var(--navy), var(--navy)) left bottom / 100% 1px no-repeat;
  transition: background-size 300ms var(--ease-out), color 200ms ease;
}
.link-arrow::after { content: "\2192"; font-size: 18px; letter-spacing: 0; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { background-size: 100% 1px, 100% 1px; color: var(--navy-deep); }
  .link-arrow:hover::after { transform: translateX(5px); }
}

.u-line {
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  padding-bottom: 2px; transition: background-size 300ms var(--ease-out), color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .u-line:hover { color: var(--gold); background-size: 0% 1px; }
}

/* Diamond bullet lists */
.ticks li { position: relative; padding-left: 24px; margin: 11px 0; line-height: 1.45; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: .58em; width: 7px; height: 7px;
  border: 1px solid var(--gold); transform: rotate(45deg);
  background: linear-gradient(135deg, rgba(192, 144, 50, .35), transparent 70%);
}
.ticks ul { margin: 4px 0 4px 2px; }
.ticks ul li { font-size: .93em; color: var(--graphite); }

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; color: #fff;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  transition: box-shadow 300ms ease;
}
.nav::before, .nav::after { content: ""; position: absolute; inset: 0; z-index: -1; transition: opacity 300ms ease; }
.nav::before { background: linear-gradient(to bottom, rgba(16, 30, 52, .6), rgba(16, 30, 52, 0)); }
.nav::after {
  /* Logo bar: deep navy behind the wordmark easing into the main firm colour #335A8F, with a glassy
     light along the top edge, a warm glint behind the wordmark and a fine gold rule underneath */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, 0) 50%, rgba(10, 20, 36, .12) 100%),
    radial-gradient(520px 120px at 16% 0%, rgba(221, 183, 102, .13), transparent 70%),
    linear-gradient(90deg, rgba(18, 34, 58, .97) 0%, rgba(27, 50, 83, .96) 34%, rgba(38, 69, 110, .95) 68%, rgba(51, 90, 143, .94) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(221, 183, 102, .32);
  opacity: 0;
}
.nav.is-scrolled { box-shadow: 0 20px 44px -24px rgba(6, 14, 28, .7); }
.nav.is-scrolled::before { opacity: 0; }
.nav.is-scrolled::after { opacity: 1; }
/* A soft band of light crosses the bar every few seconds (transform only) */
.nav__sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 300ms ease; }
.nav.is-scrolled .nav__sheen { opacity: 1; }
.nav__sheen::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 26%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .07) 40%, rgba(255, 240, 210, .13) 50%, rgba(255, 255, 255, .07) 60%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  animation: nav-sheen 10s var(--ease-in-out) 2.5s infinite;
}
@keyframes nav-sheen { 0%, 68% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(520%) skewX(-18deg); } }
.nav__inner { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav.is-scrolled .brand, .nav.is-scrolled .nav__links a:not(.btn) { text-shadow: 0 1px 10px rgba(6, 14, 28, .45); }

.nav__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; }
.nav__progress span {
  display: block; height: 100%; background: var(--grad-gold);
  transform-origin: left; transform: scaleX(var(--p, 0));
}

/* Brand shrinks with a transform, not font-size, so nothing re-lays out */
.brand {
  display: inline-block; padding-block: 9px; min-height: 52px; font-size: 34px; /* 52 x .86 scroll scale = 44.7px tap height */ font-variant: small-caps; letter-spacing: .02em; line-height: 1; white-space: nowrap;
  transform-origin: left center; transition: transform 300ms var(--ease-out), opacity 200ms ease;
}
.nav.is-scrolled .brand { transform: scale(.86); }

.nav__links { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 36px); }
.nav__links a:not(.btn) {
  position: relative; font-size: 18px; font-weight: 500; letter-spacing: .02em; padding: 6px 0; opacity: .92; white-space: nowrap;
  transition: opacity 200ms ease, color 200ms ease;
}
.nav__links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--grad-gold);
  transform: scaleX(0); transform-origin: right; transition: transform 250ms var(--ease-out);
}
.nav__links a.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav__links a.is-current { color: #fff; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
  .nav__links a:not(.btn):hover { opacity: 1; }
}
/* Invisible hit areas so touch laptops and large tablets get 44px targets without changing the look */
.nav__links a:not(.btn)::before { content: ""; position: absolute; inset: -2px -8px; }
.nav__home::before { inset: -12px -12px; }
.nav__home svg { width: 21px; height: 21px; display: block; }
.nav__home::after { display: none; }
/* Contact: a glassy button with a gold edge; it fills with gold on hover (from .btn) */
.nav__cta {
  padding: 12px 26px; margin-left: 6px; font-size: 18px; white-space: nowrap;
  border-color: rgba(221, 183, 102, .78);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 20px -12px rgba(6, 14, 28, .7);
}
/* Small laptops (1181–1365px): the full link row is wider than the 80% column, so tighten it */
@media (min-width: 1181px) and (max-width: 1365px) {
  .nav__links { gap: 14px; }
  .nav__links a:not(.btn) { font-size: 16.5px; }
  .nav__links a:not(.btn)::before { inset: -2px -6px; }
  .nav__cta { padding: 11px 20px; font-size: 16.5px; margin-left: 2px; }
}

.nav__toggle { display: none; width: 46px; height: 46px; position: relative; z-index: 60; transition: transform 160ms var(--ease-out); }
.nav__toggle:active { transform: scale(.94); }
.nav__toggle span {
  position: absolute; left: 10px; right: 10px; height: 1px; background: currentColor;
  transition: transform 300ms var(--ease-out), top 300ms var(--ease-out);
}
.nav__toggle span:first-child { top: 19px; }
.nav__toggle span:last-child { top: 27px; }
.nav__toggle[aria-expanded="true"] span:first-child { top: 23px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { top: 23px; transform: rotate(-45deg); }

/* Mobile menu: opens deliberately, closes fast. Scrolls on short screens (landscape
   phones, iPhone SE) instead of cutting off its first links. */
.menu {
  position: fixed; inset: 0; z-index: 45; color: #fff;
  background:
    radial-gradient(700px 500px at 100% 100%, rgba(192, 144, 50, .16), transparent 60%),
    var(--grad-navy);
  display: flex; flex-direction: column; gap: 40px;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding:
    calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 20px)
    max(var(--gutter), env(safe-area-inset-right, 0px))
    calc(40px + env(safe-area-inset-bottom, 0px))
    max(var(--gutter), env(safe-area-inset-left, 0px));
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 300ms var(--ease-out), visibility 0s linear 300ms;
}
.menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path 500ms var(--ease-in-out); }
/* auto margins centre the content when it fits and fall back to top-aligned when it doesn't */
.menu__links { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.menu__meta { margin-bottom: auto; }
.menu__links a {
  font-size: clamp(38px, 9vw, 54px); line-height: 1.22;
  opacity: 0; transform: translateY(16px); transition: opacity 200ms ease, transform 200ms var(--ease-out), color 200ms ease;
}
.menu.is-open .menu__links a { opacity: 1; transform: none; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out), color 200ms ease; transition-delay: calc(200ms + var(--i, 0) * 40ms); }
.menu__links a:active { color: var(--gold); }
/* Landscape phones: two columns of smaller links so the whole menu fits */
@media (max-height: 520px) {
  .menu { gap: 24px; }
  .menu__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .menu__links a { font-size: 30px; line-height: 1.5; }
  .menu__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 17px; padding-top: 18px; }
}
.menu__meta { display: grid; gap: 16px; color: var(--mist); font-size: 19px; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 28px; }
.menu__meta a { display: inline-block; padding-block: 11px; margin-block: -11px; } /* 44px+ tap height, same line rhythm */

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 660px;
  color: #fff; overflow: hidden; background: var(--grad-navy);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__media { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: -2%; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.12);
  transition: opacity 2s var(--ease-in-out);
  will-change: transform, opacity;
}
/* Slide photography: 2400px on large screens, 1280px copies on phones and small tablets */
.hero__slide--1 { background-image: url("../assets/img/hero-lower-manhattan.jpg"); }
.hero__slide--2 { background-image: url("../assets/img/hero-brooklyn-bridge.jpg"); }
.hero__slide--3 { background-image: url("../assets/img/central-park.jpg"); }
@media (max-width: 900px) {
  .hero__slide--1 { background-image: url("../assets/img/hero-lower-manhattan-1280.jpg"); }
  .hero__slide--2 { background-image: url("../assets/img/hero-brooklyn-bridge-1280.jpg"); }
  .hero__slide--3 { background-image: url("../assets/img/central-park-1280.jpg"); }
}
.hero__slide.is-active { opacity: 1; z-index: 2; animation: kenburns 9s var(--ease-out) forwards; }
.hero__slide.is-leaving { opacity: 1; z-index: 1; animation: kenburns-out 2s linear forwards; }
@keyframes kenburns { from { transform: scale(1.14) translate3d(0, 0, 0); } to { transform: scale(1.03) translate3d(-1%, -1%, 0); } }
@keyframes kenburns-out { from { transform: scale(1.03) translate3d(-1%, -1%, 0); } to { transform: scale(1.0) translate3d(-1.3%, -1.3%, 0); } }

.hero__veil {
  position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(90deg, rgba(32, 57, 92, .9) 0%, rgba(51, 90, 143, .66) 42%, rgba(51, 90, 143, .28) 100%),
    linear-gradient(0deg, rgba(28, 50, 82, .8) 0%, rgba(28, 50, 82, 0) 40%),
    radial-gradient(900px 500px at 85% 15%, rgba(192, 144, 50, .14), transparent 60%);
}
.hero__sheen {
  position: absolute; inset: 0; z-index: 4; mix-blend-mode: soft-light; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 236, 200, .35) 50%, transparent 65%) 0 0 / 260% 100%;
  animation: sheen 14s ease-in-out infinite;
}
@keyframes sheen { 0%, 15% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }

.hero__content { position: relative; z-index: 5; padding-top: var(--nav-h); will-change: transform, opacity; }
/* Hero label: larger than the section labels, with a rule on both sides */
.hero__eyebrow { margin-bottom: clamp(40px, 3.6vw, 60px); font-size: clamp(19px, 1.6vw, 25px); gap: 22px; }
.hero__eyebrow::before { width: 64px; }
.hero__eyebrow::after {
  content: ""; width: 64px; height: 1.5px; flex: none; background: linear-gradient(90deg, var(--eb-line), transparent);
  transform-origin: left; transition: transform 1s var(--ease-out) 450ms;
}
html.js .hero__eyebrow::after { transform: scaleX(0); }
html.js .hero.is-ready .hero__eyebrow::after { transform: scaleX(1); }
/* The firm name in the firm blue, set on a band in the same warm light grey as the Transactions
   section (--grad-silver), running edge to edge across the photo (the h1 is centred in the
   container, so (100% - 100vw) / 2 reaches the screen edge) */
.hero__title {
  position: relative; color: var(--navy);
  font-size: clamp(72px, 11vw, 188px); font-weight: 400; line-height: .97; letter-spacing: -.022em;
  margin-left: -.04em;
}
.hero__title::before {
  content: ""; position: absolute; z-index: -1;
  top: -.15em; bottom: -.2em; left: calc((100% - 100vw) / 2 - 2px); right: calc((100% - 100vw) / 2 - 2px);
  background: var(--grad-silver);
  box-shadow: inset 0 1px 0 rgba(192, 144, 50, .6), inset 0 -1px 0 rgba(192, 144, 50, .6), 0 30px 60px -34px rgba(6, 14, 28, .75);
  transform-origin: left center;
}
html.js .hero__title::before { transform: scaleX(0); transition: transform 1.1s var(--ease-out) 100ms; }
html.js .hero.is-ready .hero__title::before { transform: none; }
/* Polished firm-blue lettering: a vertical metal gradient, a letterpress edge and a soft shadow, plus
   a band of light that crosses the whole name every 9 seconds. Each word carries its own copy of the
   gradient; --dx (each word's offset, set in main.js) staggers the sweep so it reads as one pass.
   After the words have risen, their mask is released so the shadow isn't cut off. */
.hero__title .w > span {
  background:
    linear-gradient(105deg, transparent 0 36%, rgba(214, 228, 245, .55) 44%, rgba(255, 255, 255, .95) 50%, rgba(214, 228, 245, .55) 56%, transparent 64% 100%) -600px 0 / 600px 100% no-repeat,
    linear-gradient(180deg, #5C84BA 0%, #3A63A0 30%, #335A8F 50%, #23426C 58%, #2E548A 80%, #4670AA 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
/* Shadow on the word wrapper, so it doesn't fight the reveal's blur-to-sharp filter on the inner span */
.hero__title .w { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .75)) drop-shadow(0 7px 12px rgba(20, 37, 62, .28)); }
html.js .hero.is-ready .hero__title .w > span { animation: title-shine 9s linear calc(2.2s + var(--dx, 0) * .63ms) infinite; }
@keyframes title-shine { 0% { background-position: -600px 0, 0 0; } 14%, 100% { background-position: 1400px 0, 0 0; } }
.hero__title.is-in .w { clip-path: inset(-.6em); transition: clip-path 0s linear 1.9s; }
.hero__lede {
  max-width: 860px; margin-top: clamp(44px, 4.2vw, 68px);
  font-size: clamp(21px, 1.95vw, 30px); line-height: 1.55; color: rgba(255, 255, 255, .9);
}
html.js .hero__eyebrow, html.js .hero__lede { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
html.js .hero__eyebrow::before { transform: scaleX(0); transition: transform 1s var(--ease-out) 300ms; }
html.js .hero.is-ready .hero__eyebrow { opacity: 1; transform: none; transition-delay: 100ms; }
html.js .hero.is-ready .hero__eyebrow::before { transform: scaleX(1); }
html.js .hero.is-ready .hero__lede { opacity: 1; transform: none; transition-delay: 650ms; }
.hero__title .w > span { transition-duration: 1.2s, 900ms, 900ms; transition-delay: calc(250ms + var(--i, 0) * 90ms); }

.hero__footer { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 5; display: flex; align-items: flex-end; }
.hero__scroll { width: 1px; height: 68px; background: rgba(255, 255, 255, .25); position: relative; overflow: hidden; }
.hero__scroll span {
  position: absolute; left: 0; top: 0; width: 1px; height: 24px; background: var(--gold);
  animation: scrollcue 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollcue { 0% { transform: translateY(-26px); } 100% { transform: translateY(70px); } }

/* =========================================================
   THE FIRM
   ========================================================= */
.firm__label { margin-bottom: clamp(32px, 3vw, 48px); } /* above both columns, at the left edge */
.firm__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-split); align-items: start; }
/* The Firm headline is a full sentence, so it sets smaller than other section titles
   to stay around four lines in its column rather than ten or more */
.firm__intro .h2 { font-size: clamp(34px, 3.1vw, 54px); line-height: 1.1; max-width: none; }

/* Framed photos (Firm, New York, London, Principal Investing): a frame plus a hairline and a deep
   soft shadow lift them off the page. Once revealed, the wipe's clip extends past the edges so the
   shadow isn't cut off.
   FRAME STYLE: current = thin metallic gold rule.
   To switch back to the previous white mat, set:  --frame: 7px solid #fff;  --frame-image: none; */
.framed {
  --frame: 2px solid #C09032;
  --frame-image: linear-gradient(135deg, #A97C26 0%, #E9CF8E 42%, #C09032 68%, #A97C26 100%) 1;
  border: var(--frame); border-image: var(--frame-image); background: #fff;
  box-shadow: 0 0 0 1px rgba(23, 43, 71, .07), 0 34px 64px -30px rgba(23, 43, 71, .55), 0 10px 24px -12px rgba(23, 43, 71, .22);
}
html.js [data-wipe].framed.is-in, html.js .is-in [data-wipe].framed { clip-path: inset(-90px); }

/* Photo under the headline: as wide as the headline's longest line (--head-w, measured in
   js/main.js), so their right edges align */
.firm__photo {
  position: relative; width: var(--head-w, 100%); max-width: 100%; margin-top: var(--photo-drop, clamp(44px, 4vw, 64px));
  aspect-ratio: 4 / 3; overflow: hidden;
}
.firm__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(32, 57, 92, 0) 40%, rgba(32, 57, 92, .22) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.firm__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 36% 50%; } /* keeps the subject and desk in frame */

.point { position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: start; padding: 48px 0 52px; }
.point::before, .point:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--grad-hair);
  transform-origin: left; transition: transform 1s var(--ease-out);
}
.point:last-child::after { top: auto; bottom: 0; }
html.js .point[data-reveal]:not(.is-in)::before,
html.js .point[data-reveal]:not(.is-in)::after { transform: scaleX(0); }
.point .icon-badge { margin-top: 2px; }
.point p { font-size: clamp(20px, 1.8vw, 27px); line-height: 1.6; color: #2b3038; padding-top: 4px; max-width: 60ch; }

/* =========================================================
   CROSS-BORDER
   ========================================================= */
/* Living background: a warm glow toward London and a cool one toward New York, soft light pools
   that drift slowly, and a broad sheen that sweeps across every few seconds. Transform-only motion. */
.xb {
  overflow: hidden; isolation: isolate;
  background:
    radial-gradient(900px 560px at 92% 4%, rgba(192, 144, 50, .12), transparent 62%),
    radial-gradient(1000px 680px at 4% 98%, rgba(102, 131, 171, .24), transparent 64%),
    var(--grad-frost);
}
.xb::before, .xb::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.xb::before {
  inset: -20%;
  background:
    radial-gradient(38% 30% at 28% 26%, rgba(255, 255, 255, .8), transparent 70%),
    radial-gradient(34% 28% at 74% 60%, rgba(214, 223, 235, .75), transparent 70%),
    radial-gradient(28% 24% at 62% 18%, rgba(232, 207, 150, .24), transparent 70%);
  animation: xb-drift 24s ease-in-out infinite alternate;
}
.xb::after {
  top: 0; bottom: 0; left: 0; width: 55%;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .5) 48%, rgba(255, 250, 238, .55) 52%, transparent 80%);
  transform: translateX(-110%) skewX(-12deg);
  animation: xb-sheen 13s var(--ease-in-out) 1.5s infinite;
}
@keyframes xb-drift { from { transform: translate3d(-4%, -3%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.08); } }
@keyframes xb-sheen { 0%, 18% { transform: translateX(-110%) skewX(-12deg); } 62%, 100% { transform: translateX(290%) skewX(-12deg); } }

.xb__stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .82fr) minmax(0, 1fr); gap: var(--gap-cards);
  align-items: start;
}
.city { text-align: center; }
.city__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 42px; } /* framing: .framed */
.city__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(32, 57, 92, 0) 40%, rgba(32, 57, 92, .3) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.city__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 600ms var(--ease-out); }
html.js [data-wipe] { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease-in-out); }
html.js [data-wipe].is-in, html.js .is-in [data-wipe] { clip-path: inset(0); }
html.js [data-wipe] img { transform: scale(1.16); transition: transform 1.4s var(--ease-out); }
html.js [data-wipe].is-in img, html.js .is-in [data-wipe] img { transform: scale(1.02); }
@media (hover: hover) and (pointer: fine) {
  html.js .city .city__photo.is-shining img { transform: scale(1.06); transition-duration: 600ms; }
}

.skyline { display: block; width: 74%; max-width: 320px; margin: 0 auto; overflow: visible; }
.skyline__b * {
  fill: none; stroke: var(--steel); stroke-width: 1.15; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.8s var(--ease-in-out) 400ms;
}
.skyline__ground { stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease-out) 200ms; }
html.js .city:not(.is-in) .skyline__b *, html.js .city:not(.is-in) .skyline__ground { stroke-dashoffset: 1; }

.city__coords { margin-top: 28px; font-size: 15px; letter-spacing: .16em; color: var(--steel); }
.city__time { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; color: var(--navy); font-variant-numeric: tabular-nums; }
.city__time:empty { display: none; }
.city__time::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(192, 144, 50, .5); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(192, 144, 50, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(192, 144, 50, 0); } }
.city__name { margin-top: 12px; font-size: clamp(48px, 5.2vw, 86px); font-weight: 400; line-height: 1.06; color: var(--navy); }
.city__firm { margin-top: 8px; font-size: clamp(21px, 1.6vw, 25px); color: var(--gold); }
.city .link-arrow { margin-top: 28px; font-size: 14.5px; }

/* The arc reaches across the column gaps toward each skyline */
.xb__bridge { align-self: start; margin-top: var(--bridge-top, 0px); margin-inline: calc(-1 * var(--gap-cards)); text-align: center; }
.arc { width: 100%; height: auto; overflow: visible; }
.arc__reveal { fill: none; stroke: #fff; stroke-width: 22; stroke-dasharray: 1; stroke-dashoffset: var(--arc, 1); } /* wide enough to include the glow */
/* A polished-gold line: soft glow underneath, solid metallic stroke, and a glint that travels the arc */
.arc__glow { fill: none; stroke-width: 7; opacity: .5; }
.arc__path { fill: none; stroke-width: 3; stroke-linecap: round; }
.arc__glint {
  fill: none; stroke: #FFF8E6; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: .07 1.2; stroke-dashoffset: .08; opacity: 0;
}
.arc.is-drawn .arc__glint { animation: arc-glint 5.5s var(--ease-in-out) 600ms infinite; }
@keyframes arc-glint {
  0% { stroke-dashoffset: .08; opacity: 0; }
  6% { opacity: 1; }
  40% { opacity: 1; }
  46%, 100% { stroke-dashoffset: -1.15; opacity: 0; }
}
.arc__end--ny { fill: url(#arcEndGold); filter: drop-shadow(0 0 5px rgba(221, 183, 102, .55)); }
.arc__end--ldn { fill: url(#arcEndSteel); filter: drop-shadow(0 0 5px rgba(153, 172, 199, .55)); }
.arc__traveler { fill: #fff; stroke: var(--gold); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(192, 144, 50, .8)); opacity: var(--trav, 0); }
.xb__label { margin-top: 20px; font-size: 16px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--graphite); }

.pillars {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards);
  margin-top: var(--space-block); padding-top: var(--space-block);
}
.pillars::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--haze) 18%, var(--gold-line) 50%, var(--haze) 82%, transparent);
}
/* Each label is set as two lines with a <br>, sized so neither half wraps again in its column */
.pillars li { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; font-size: clamp(26px, 2.6vw, 40px); color: var(--navy); line-height: 1.25; }

/* =========================================================
   CARDS: shared depth (gradient edge, layered shadow, lift)
   ========================================================= */
.sector, .deal, .logo-grid li {
  border: 1px solid transparent;
  box-shadow: var(--shadow-card);
  transition: transform 250ms var(--ease-out), filter 250ms ease;
}
.sector.is-hovered, .logo-grid li.is-hovered { transform: translateY(-6px); filter: var(--lift); }
.deal.is-hovered { filter: var(--lift); }
.sector:active, .deal:active, .logo-grid li:active { transform: translateY(-2px) scale(.99); }

/* =========================================================
   SECTORS
   ========================================================= */
.sectors { background:
  radial-gradient(1000px 600px at 0% 0%, rgba(204, 214, 227, .55), transparent 62%),
  radial-gradient(900px 560px at 100% 100%, rgba(192, 144, 50, .08), transparent 60%),
  linear-gradient(180deg, #F8F9FB 0%, #F0F2F6 100%); }
/* Sector cards are sized so no title or list line ever wraps:
   1 column on phones, 2 x 2 up to 1399px, and 4 across from 1400px, where the row
   may run slightly wider than the content column (an exception, like Transactions). */
.sector-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-cards); }
@media (min-width: 721px) { .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) {
  .sector-grid {
    --sw: max(100%, min(92vw, 1320px));
    width: var(--sw); margin-inline: calc((100% - var(--sw)) / 2);
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  }
}
.sector {
  position: relative; padding: clamp(36px, 3vw, 54px) clamp(20px, 1.7vw, 34px) clamp(42px, 3.4vw, 58px);
  background: var(--grad-card) padding-box, var(--edge-cool) border-box;
}
.sector::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--grad-gold); z-index: 4;
  transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out);
}
.sector.is-hovered::before { transform: scaleX(1); }
.sector--core { background: var(--grad-card-gold) padding-box, var(--edge-gold) border-box; }
.sector__title { margin: 26px 0 24px; font-size: clamp(26px, 2.2vw, 36px); font-weight: 400; line-height: 1.14; color: var(--navy); text-wrap: balance; }
.sector .ticks { font-size: clamp(18px, 1.32vw, 21.5px); color: #2f3540; }
.sector .ticks li { margin: 9px 0; }
@media (min-width: 1400px) {
  .sector { padding-inline: 20px; }
  .sector__title { font-size: 28px; }
  .sector .ticks { font-size: 18px; }
}
@media (max-width: 360px) { .sector { padding-inline: 16px; } .sector .ticks { font-size: 16.5px; } }

/* =========================================================
   SERVICES (dark band)
   ========================================================= */
.services { position: relative; overflow: hidden; background: var(--grad-navy); color: #fff; padding: var(--section-y) 0; isolation: isolate; }
.services::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(221, 183, 102, .6) 30%, rgba(221, 183, 102, .6) 70%, transparent);
}
.services__bg, .band__bg, .contact__bg { position: absolute; inset: -18% 0; z-index: -2; }
.services__bg img, .band__bg img, .contact__bg img { width: 100%; height: 100%; object-fit: cover; }
.services__bg img { opacity: .5; }
.services::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(800px 480px at 0% 100%, rgba(192, 144, 50, .14), transparent 60%),
    linear-gradient(100deg, rgba(36, 64, 102, .95) 0%, rgba(51, 90, 143, .88) 48%, rgba(51, 90, 143, .6) 100%);
}
/* Columns hug their content and the pair is centred on the page; text stays left-aligned */
.services__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: center; column-gap: clamp(80px, 10vw, 240px); row-gap: var(--space-block);
}
/* Same eyebrow + title format as Sector Focus. The header spans both service columns and lines up
   with the first one; width 0 / min-width 100% keeps it from widening the max-content columns. */
.services__head { grid-column: 1 / -1; width: 0; min-width: 100%; margin-bottom: 0; }
.services__head .h2 { color: #fff; text-shadow: 0 16px 50px rgba(10, 20, 36, .4); }
.service { min-width: min(100%, 380px); }
.service .icon-badge { margin-bottom: 30px; }
.service__title { font-size: clamp(32px, 3.3vw, 52px); font-weight: 400; line-height: 1.1; margin-bottom: 30px; }
/* Side by side, each title stays on one line. Together the two titles measure about 27em, and they share
   80vw with a 10vw gap, so a font of about 2.55vw keeps both on one line at every desktop width. */
@media (min-width: 961px) {
  .service__title { font-size: clamp(28px, 2.55vw, 50px); white-space: nowrap; }
}
.ticks--light { font-size: clamp(20.5px, 1.6vw, 24px); color: var(--haze); }
.ticks--light li { margin: 0; padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, rgba(204, 214, 227, .24), rgba(204, 214, 227, .04)) 1; }
.ticks--light li::before { top: 1.22em; }

/* =========================================================
   TRANSACTIONS
   ========================================================= */
/* Neutral light-grey ground. Tombstones keep a moderate width and spread
   across the content column, so wider screens get more air, not bigger cards. */
.deals { background: var(--grad-silver); --deal-w: clamp(260px, 19vw, 320px); --deal-gap: clamp(24px, 2.4vw, 40px); }
/* Exception to the layout grid: tombstones sit as a tight, centred cluster */
.deal-grid {
  display: grid; perspective: 1200px;
  grid-template-columns: repeat(3, minmax(0, var(--deal-w)));
  justify-content: center; gap: var(--deal-gap);
}
.deal {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  min-height: 400px; padding: 58px 24px 60px; text-align: center;
  background: var(--grad-card) padding-box, var(--edge-silver) border-box;
  will-change: transform;
}
.deal::before, .deal::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; z-index: 4; background: linear-gradient(90deg, var(--navy), var(--steel)); }
.deal::after { background: var(--grad-gold); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.deal.is-hovered::after { transform: scaleX(1); }
.deal__sector { position: absolute; top: 46px; left: 0; right: 0; font-size: 14.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--steel); }
.deal__logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 88px; width: 100%; }
/* multiply drops the white boxes baked into some logo files against the card gradient */
.deal__logo img { height: var(--h, 44px); width: auto; max-width: 80%; object-fit: contain; mix-blend-mode: multiply; }
.deal__logo--stack { gap: 18px; }
.deal__sector + .deal__logo { margin-top: 40px; }
.deal__verb { font-size: 24px; color: var(--ink); }
/* Static figure, sized to sit with the logos on the other tombstones */
.deal__figure span { font-size: 40px; line-height: 1; letter-spacing: .01em; font-variant-numeric: lining-nums; color: var(--navy); }
/* Footnote markers as small tags: "*" prior-firm deal, "SH" Spencer House deal */
.deal__mark {
  position: absolute; left: 16px; bottom: 16px; z-index: 4;
  display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 6px 9px 0;
  border-radius: 999px; border: 1px solid var(--gold-line); background: var(--gold-tint);
  font-size: 19px; line-height: 1; color: var(--gold);
}
.deal__mark--sh { padding: 1px 9px 0; font-size: 12.5px; letter-spacing: .12em; color: var(--steel); border-color: var(--haze); background: var(--frost); }

.deals__foot { display: grid; justify-items: center; gap: 40px; margin: var(--space-block) auto 0; max-width: calc(var(--deal-w) * 3 + var(--deal-gap) * 2); }
.footnotes { justify-self: center; text-align: center; font-size: 16.5px; color: var(--graphite); line-height: 1.8; }
.deals { padding-bottom: clamp(72px, 7vw, 110px); } /* the footnotes close the section, so less space after them */
.footnotes .sh { display: inline-block; padding: 0 8px; margin-right: 6px; border: 1px solid var(--haze); border-radius: 999px; background: var(--frost); font-size: 12.5px; letter-spacing: .12em; line-height: 20px; color: var(--steel); }
/* Same gold pill as the * mark on prior-firm tombstones; the asterisk sits high, so it is nudged down */
.footnotes .star {
  display: inline-block; min-width: 30px; height: 22px; padding: 5px 9px 0; margin-right: 6px; box-sizing: border-box;
  border: 1px solid var(--gold-line); border-radius: 999px; background: var(--gold-tint);
  font-size: 19px; line-height: 1; text-align: center; color: var(--gold); vertical-align: -4px;
}

/* =========================================================
   PRINCIPAL INVESTING
   ========================================================= */
.investing { background:
  radial-gradient(1000px 640px at 100% 30%, rgba(204, 214, 227, .5), transparent 62%),
  radial-gradient(800px 500px at 0% 0%, rgba(192, 144, 50, .07), transparent 60%),
  linear-gradient(180deg, #F0F2F6 0%, #F8F9FB 45%, #F0F2F6 100%); }
/* Side by side, the photo takes the height of the text: tops and bottoms line up */
.investing__split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-split); align-items: stretch; margin-bottom: var(--space-block); }
.investing__copy p { color: var(--graphite); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.68; margin-top: 24px; max-width: 68ch; }
.investing__copy p:first-child { margin-top: 0; }
.investing__image { position: relative; min-height: 420px; overflow: hidden; } /* framing: .framed */
.investing__image::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(255, 255, 255, .08) 0%, rgba(51, 90, 143, 0) 40%, rgba(23, 43, 71, .45) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.investing__image img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; }
html.js .investing__image[data-wipe] img { transform: none; }

/* Exception to the layout grid: principal-investment tiles fill the column, logos set large */
.logo-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, clamp(190px, 16vw, 250px)));
  justify-content: space-between; gap: clamp(18px, 1.8vw, 30px);
}
.logo-grid li {
  position: relative; aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 3%;
  background: linear-gradient(165deg, #FFFFFF 0%, #FFFFFF 60%, #F4F6FA 100%) padding-box, var(--edge-cool) border-box;
}
.logo-grid li::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px; background: var(--grad-gold); z-index: 4;
  transform: scaleX(0); transition: transform 300ms var(--ease-out);
}
.logo-grid li.is-hovered::after { transform: scaleX(1); }
.logo-grid img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: filter 250ms ease, opacity 250ms ease, transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .logo-grid img { filter: grayscale(1); opacity: .78; }
  .logo-grid li.is-hovered img { filter: none; opacity: 1; transform: scale(1.04); }
}
.investing__label { margin-top: var(--space-block); }
.investing__split + .investing__label { margin-top: 0; } /* the split above already leaves a block of space */
.disclaimer { margin-top: calc(var(--space-block) * .6); font-size: 16.5px; line-height: 1.7; color: var(--graphite); }

/* =========================================================
   STATEMENT BAND
   ========================================================= */
.band { position: relative; overflow: hidden; isolation: isolate; color: #fff; min-height: min(80vh, 760px); display: grid; align-items: center; padding: var(--section-y) 0; background: var(--grad-navy); }
/* Gold hairline where the band meets the Services section above it */
.band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(221, 183, 102, .6) 30%, rgba(221, 183, 102, .6) 70%, transparent);
}
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at center, rgba(41, 72, 114, .48) 0%, rgba(32, 57, 92, .86) 70%),
    radial-gradient(900px 420px at 50% 50%, rgba(217, 217, 217, .12), transparent 70%),
    linear-gradient(180deg, rgba(23, 43, 71, .35) 0%, rgba(32, 57, 92, .1) 50%, rgba(23, 43, 71, .45) 100%);
}
.band__inner { text-align: center; }
/* Statement set in the palette's light grey (217,217,217) rather than pure white. Two sentences,
   so it sets smaller than the old one-line quote to stay at about three lines on desktop. */
.band__quote {
  max-width: 1280px; margin: 0 auto; font-size: clamp(27px, 3.7vw, 62px); font-style: italic; line-height: 1.22; letter-spacing: -.008em;
  color: var(--silver);
  text-wrap: balance;
}

/* =========================================================
   PEOPLE
   ========================================================= */
.team + .team { margin-top: var(--space-block); }
.team__label { display: flex; align-items: center; gap: 18px; margin-bottom: 46px; font-size: clamp(25px, 2.3vw, 33px); font-weight: 400; color: var(--navy); }
.team__label::before { content: ""; width: 18px; height: 1px; background: var(--gold); flex: none; }
.team__label::after { content: ""; flex: 1; height: 1px; background: var(--grad-hair); transform-origin: left; transition: transform 1s var(--ease-out) 200ms; }
html.js .team__label[data-reveal]:not(.is-in)::after { transform: scaleX(0); }

/* Headshots keep a portrait size and spread across the content column */
.team__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, clamp(160px, 13.5vw, 240px)));
  justify-content: space-between; column-gap: var(--gap-cards); row-gap: clamp(44px, 4.5vw, 72px);
}
.person__card { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; transition: transform 160ms var(--ease-out); }
.person__card:active { transform: scale(.98); }
.person__photo {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; margin-bottom: 24px;
  background: linear-gradient(160deg, var(--frost), var(--haze));
  box-shadow: var(--shadow-photo);
  transition: transform 300ms var(--ease-out), filter 300ms ease;
}
.person__photo::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .45);
  background: linear-gradient(170deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 35%);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: transform 600ms var(--ease-out); }
.person__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(32, 57, 92, .55), rgba(51, 90, 143, .08) 55%, rgba(192, 144, 50, .08));
  opacity: 0; transition: opacity 300ms ease;
}
.person__name { position: relative; font-size: clamp(22px, 1.75vw, 27px); line-height: 1.18; color: var(--ink); padding-bottom: 4px; }
.person__name::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--grad-gold);
  transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out);
}
.person__role { margin-top: 8px; font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
@media (min-width: 1181px) { .person__role { white-space: nowrap; } }
.person__more { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 17.5px; color: var(--gold); border-bottom: 1px solid currentColor; }
.person__more::after { content: "\2192"; transition: transform 200ms var(--ease-out); }
.person__card.is-hovered .person__photo, .person__card:focus-visible .person__photo { transform: translateY(-4px); filter: var(--lift); }
.person__card.is-hovered .person__photo img, .person__card:focus-visible .person__photo img { transform: scale(1.05); }
.person__card.is-hovered .person__photo::after, .person__card:focus-visible .person__photo::after { opacity: 1; }
.person__card.is-hovered .person__name::after, .person__card:focus-visible .person__name::after { transform: scaleX(1); }
.person__card.is-hovered .person__more::after { transform: translateX(4px); }

/* =========================================================
   PRIOR EXPERIENCE
   ========================================================= */
.experience { background: var(--grad-silver); }
.experience .lede { color: var(--blue); font-size: clamp(22px, 2.1vw, 31px); max-width: 1000px; }
.marquee {
  width: var(--content); margin-inline: auto;
  overflow: hidden; padding: 14px 0;
  -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; width: max-content; animation: marquee 48s linear infinite; }
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
.marquee__set { display: flex; align-items: center; flex: none; }
.marquee__set li { flex: none; padding: 0 clamp(28px, 3.5vw, 64px); }
.marquee__set img { height: clamp(60px, 5.2vw, 84px); width: auto; filter: grayscale(1); opacity: .6; mix-blend-mode: multiply; transition: filter 250ms ease, opacity 250ms ease, transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .marquee__set li:hover img { filter: none; opacity: 1; transform: scale(1.06); }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { position: relative; overflow: hidden; isolation: isolate; background: var(--grad-navy); color: #fff; padding-top: var(--section-y); }
.contact__bg img { opacity: .4; }
.contact::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 560px at 0% 100%, rgba(192, 144, 50, .16), transparent 60%),
    radial-gradient(900px 560px at 100% 0%, rgba(51, 90, 143, .55), transparent 62%),
    linear-gradient(170deg, rgba(51, 90, 143, .92) 0%, rgba(51, 90, 143, .88) 45%, rgba(32, 57, 92, .97) 100%);
}
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-split); align-items: start; }
.contact .h2 { color: #fff; }
.contact .lede { color: #fff; max-width: 580px; }/* Office blocks stack in the desktop side column and on phones. On tablets, where the
   contact column runs full width, they sit side by side on shared rows so the addresses
   line up even when one label wraps. */
.details { margin-top: 54px; display: grid; gap: 40px; }
.office__line { margin-top: 14px; }
@media (min-width: 641px) and (max-width: 960px) {
  .details { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 0 clamp(32px, 4vw, 64px); }
  .office { display: contents; }
  .details dt { align-self: end; } /* a one-line label sits just above its address */
}
.details dt { font-size: 14.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.details dd { font-size: clamp(21px, 1.7vw, 25px); line-height: 1.5; color: #fff; }
.details dd a { display: inline-block; padding-block: 8px; margin-block: -8px; } /* 44px tap height, same visual rhythm */
/* Underlined phone and email lines: keep the rule tight under the text, not at the bottom of the tap padding */
.details dd a.u-line { line-height: 1.25; padding-block: 9px; margin-block: -9px; background-origin: content-box; }
.details dd a:not(.u-line) { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .details dd a:not(.u-line):hover { color: var(--gold); }
}

/* Glass panel: translucent material with a light-catching top edge */
.form {
  position: relative; display: grid; gap: 30px; padding: clamp(28px, 3.5vw, 52px);
  background: linear-gradient(160deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .025) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* Gradient hairline drawn on a masked layer, so it edges the glass without tinting it */
.form::before {
  content: ""; position: absolute; inset: 0; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .08) 35%, rgba(192, 144, 50, .55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.field { position: relative; display: grid; }
.field label { font-size: 14.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--mist); margin-bottom: 4px; transition: color 200ms ease; }
.field input, .field textarea {
  width: 100%; padding: 10px 0 12px; border: 0; border-bottom: 1px solid rgba(204, 214, 227, .3); border-radius: 0;
  background: transparent; color: #fff; font: inherit; font-size: 22px; outline: none; resize: vertical;
  transition: border-color 200ms ease;
}
.field textarea { min-height: 128px; }
.field__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--grad-gold); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.field:has(.field__error) .field__line { bottom: 24px; }
.field__error { min-height: 24px; font-size: 15.5px; color: #E9A9A9; padding-top: 4px; }
.field:focus-within label { color: var(--gold); }
.field:focus-within .field__line { transform: scaleX(1); }
.field.is-invalid input { border-bottom-color: var(--red); }
.field.is-invalid .field__line { background: var(--red); transform: scaleX(1); }
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.btn--light { width: 100%; padding: 18px 24px; margin-top: 4px; color: #fff; border-color: rgba(255, 255, 255, .55); font-size: 15.5px; letter-spacing: .28em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .btn--light:hover { color: var(--navy-deep); }
}
.form__status { min-height: 26px; font-size: 18px; color: #A9D8B1; }
.form__status:empty { display: none; }
.form__status.is-error { color: #E9A9A9; }

.footer { position: relative; margin-top: var(--section-y); padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.notice { position: relative; padding-top: 44px; font-size: 18px; line-height: 1.75; color: var(--haze); }
.notice::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(192, 144, 50, .6), rgba(204, 214, 227, .18) 40%, rgba(204, 214, 227, 0)); }
.notice strong { font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-right: 8px; font-size: 14.5px; }
.footer__bar { margin-top: 48px; display: flex; align-items: center; justify-content: space-between; gap: 28px; font-size: 17px; color: var(--mist); }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(18px, 2vw, 34px); font-size: 17px; }
.footer__nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--haze); transition: color 200ms ease; }
.footer__bar > .brand, .footer__bar > .to-top { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .footer__nav a:hover { color: var(--gold); }
}
/* Regulatory block: copyright left, FINRA/SIPC statement right, legal links beneath */
.footer__legal {
  position: relative; margin-top: 40px; padding-top: 36px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px clamp(32px, 5vw, 96px);
  font-size: 15.5px; line-height: 1.7; color: var(--mist);
}
.footer__legal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(204, 214, 227, .22), rgba(204, 214, 227, .08)); }
.footer__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 2.4vw, 36px); margin-top: 10px; }
.footer__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15.5px; letter-spacing: .03em; color: var(--haze);
  background: linear-gradient(var(--gold), var(--gold)) left calc(100% - 10px) / 0% 1px no-repeat;
  transition: color 200ms ease, background-size 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .footer__links a:hover { color: var(--gold); background-size: 100% 1px; }
}
@media (max-width: 760px) { .footer__legal { grid-template-columns: minmax(0, 1fr); } }
.brand--small { font-size: 27px; color: #fff; }
.to-top { position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; transition: border-color 200ms ease, transform 200ms var(--ease-out); }
.to-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-gold); opacity: 0; transition: opacity 200ms ease; }
.to-top svg { width: 19px; height: 19px; }
.to-top:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .to-top:hover { border-color: var(--gold); transform: translateY(-3px); }
  .to-top:hover::before { opacity: 1; }
}

/* =========================================================
   BIO DRAWER (enter 500ms drawer curve, exit faster)
   ========================================================= */
.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; transition: visibility 0s linear 300ms; }
.drawer.is-open { visibility: visible; transition: none; }
.drawer__scrim {
  position: absolute; inset: 0; background: linear-gradient(120deg, rgba(16, 28, 48, .35), rgba(16, 28, 48, .7));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 300ms var(--ease-out);
}
.drawer.is-open .drawer__scrim { opacity: 1; transition-duration: 500ms; }
.drawer__panel {
  --drawer-pad: clamp(28px, 4vw, 60px);
  position: absolute; top: 0; right: 0; bottom: 0; width: min(600px, 100%); overflow-y: auto;
  overscroll-behavior: contain; /* scrolling past the end of a bio doesn't drag the page behind */
  background: var(--grad-paper); outline: none;
  padding: calc(76px + env(safe-area-inset-top, 0px)) calc(var(--drawer-pad) + env(safe-area-inset-right, 0px)) 0 var(--drawer-pad);
  transform: translateX(100%); transition: transform 300ms var(--ease-out);
  box-shadow: -40px 0 90px -40px rgba(0, 0, 0, .55);
}
.drawer.is-open .drawer__panel { transform: none; transition: transform 500ms var(--ease-drawer); }
.drawer__panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--navy), var(--steel) 60%, var(--gold)); }
.drawer__close { position: absolute; top: 22px; right: 22px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hair); color: var(--navy); background: rgba(255, 255, 255, .6); box-shadow: 0 6px 14px -8px rgba(23, 43, 71, .3); transition: transform 200ms var(--ease-out), border-color 200ms ease; }
.drawer__close svg { width: 20px; height: 20px; }
.drawer__close:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .drawer__close:hover { transform: rotate(90deg); border-color: var(--gold); }
}
.drawer__photo { position: relative; width: 190px; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(160deg, var(--frost), var(--haze)); margin-bottom: 32px; box-shadow: var(--shadow-photo); }
.drawer__photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .45); background: linear-gradient(170deg, rgba(255, 255, 255, .1), transparent 35%); }
.drawer__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.drawer__org { font-size: 13.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--steel); }
.drawer__name { margin-top: 8px; font-size: clamp(38px, 3.4vw, 50px); font-weight: 400; line-height: 1.08; color: var(--navy); }
.drawer__role { margin-top: 10px; font-size: 14.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
.drawer__bio { position: relative; margin-top: 32px; padding-top: 32px; color: #2f3540; font-size: 19px; line-height: 1.72; text-wrap: pretty; }
.drawer__bio::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--grad-hair); }
.drawer__bio p + p { margin-top: 16px; }
/* Bulleted bios (Spencer House Partners): gold diamond ticks, roomier than the card lists */
.drawer__bio .ticks li { margin: 0 0 16px; line-height: 1.62; }
.drawer__bio .ticks li:last-child { margin-bottom: 0; }
.drawer__bio .ticks li::before { top: .66em; }
/* FINRA BrokerCheck link closing each LSH bio (opens in a new tab) */
.drawer__bio .bio-link { margin-top: 28px; }
.drawer__bio .bio-link a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 14.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
  background: var(--grad-gold) left calc(100% - 8px) / 100% 1px no-repeat;
  transition: color 200ms ease;
}
.drawer__bio .bio-link a::after { content: "\2197"; font-size: 16px; letter-spacing: 0; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .drawer__bio .bio-link a:hover { color: var(--gold); }
  .drawer__bio .bio-link a:hover::after { transform: translate(2px, -2px); }
}
.placeholder { padding: 18px 20px; border: 1px dashed var(--gold); background: var(--grad-card-gold); font-style: italic; color: var(--graphite); }
/* Previous / Next stay reachable at the bottom of long bios */
.drawer__nav {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between;
  margin: 44px calc(-1 * var(--drawer-pad)) 0; padding: 20px var(--drawer-pad) calc(26px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, #F0F2F6 72%, rgba(240, 242, 246, 0));
}
.drawer__nav::before { content: ""; position: absolute; left: var(--drawer-pad); right: var(--drawer-pad); top: 10px; height: 1px; background: var(--hair); }
.drawer__step { min-height: 44px; font-size: 14.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); transition: color 200ms ease, transform 160ms var(--ease-out); }
.drawer__step:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .drawer__step:hover { color: var(--gold); }
}
.drawer__step[data-step="-1"]::before { content: "\2190\00a0"; }
.drawer__step[data-step="1"]::after { content: "\00a0\2192"; }
/* Swap between people: blur masks the crossfade so it reads as one change */
.drawer__panel > *:not(.drawer__close):not(.drawer__nav) { transition: opacity 200ms ease, filter 200ms ease, transform 200ms var(--ease-out); }
.drawer.is-swapping .drawer__panel > *:not(.drawer__close):not(.drawer__nav) { opacity: 0; filter: blur(2px); transform: translateY(6px); }
body.is-locked { overflow: hidden; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
  /* Smaller screens: the content column becomes the page minus side gutters */
  :root { --content: calc(100% - 2 * var(--gutter)); }
  /* Gutters grow to clear the notch / rounded corners on landscape phones (viewport-fit=cover) */
  .container {
    width: 100%;
    padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
  }
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .deal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deals__foot { max-width: none; }
  .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  :root { --nav-h: 76px; }
  .firm__grid, .investing__split, .contact__grid, .services__grid { grid-template-columns: minmax(0, 1fr); }
  .firm__photo { max-width: 760px; margin-top: 40px; } /* about the photo's own width; don't stretch it across wide tablets */
  .xb__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xb__bridge { grid-column: 1 / -1; grid-row: 2; padding: 8px 0 0; max-width: 420px; margin: 0 auto; width: 100%; --bridge-top: 0px; }
  .deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .investing__image { aspect-ratio: 16 / 11; min-height: 0; } /* stacked: the photo keeps its own shape */
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}
@media (max-width: 640px) {
  body { font-size: 18.5px; }
  .brand { font-size: 28px; }
  .eyebrow { font-size: 15px; letter-spacing: .2em; gap: 12px; }
  .eyebrow::before, .eyebrow--center::after, .eyebrow--both::after { width: 20px; }
  .investing__label::before, .investing__label::after { display: none; } /* long labels: give the words the full width */
  /* Phones: the hero fits the visible screen (iPhone SE with toolbars is ~553px tall)
     and keeps the scroll cue clear of the lede */
  .hero { min-height: 540px; }
  .hero__content { padding-bottom: 48px; }
  .hero__footer { justify-content: center; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .hero__scroll { height: 48px; }
  .hero__eyebrow { font-size: 14px; letter-spacing: .12em; gap: 10px; }
  .hero__title { font-size: clamp(52px, 17.5vw, 76px); }
  .hero__eyebrow::before, .hero__eyebrow::after { width: 18px; }
  .hero__veil {
    background:
      linear-gradient(0deg, rgba(28, 50, 82, .88) 0%, rgba(41, 72, 114, .62) 55%, rgba(51, 90, 143, .55) 100%),
      radial-gradient(600px 400px at 100% 0%, rgba(192, 144, 50, .12), transparent 60%);
  }
  .xb__stage { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .xb__bridge { grid-row: auto; order: 2; }
  .city--ldn { order: 3; }
  .deal-grid { grid-template-columns: minmax(0, 1fr); }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 18px; }
  .person__name { font-size: 22px; }
  .person__role { font-size: 13px; letter-spacing: .08em; }
  .person__more { font-size: 17px; }
  .deal { min-height: 380px; }
  .point { grid-template-columns: 74px minmax(0, 1fr); padding: 32px 0 36px; }
  .icon-badge { width: 58px; height: 58px; }
  .icon { width: 30px; height: 30px; }
  .icon-badge::after { inset: -6px; }
  .form { padding: 24px 20px; }
  .footer__bar { flex-wrap: wrap; justify-content: center; text-align: center; }
  .marquee__set img { height: 50px; }
}
@media (max-width: 380px) {
  .eyebrow--center::before, .eyebrow--center::after { display: none; } /* small phones: keep centred labels on one line */
  .hero__eyebrow { font-size: 13.5px; letter-spacing: .12em; gap: 8px; }
  .hero__eyebrow::before, .hero__eyebrow::after { width: 12px; }
}
/* Very short phone screens (old iPhone SE with toolbars): the hero text fills the screen, so drop the scroll cue */
@media (max-width: 640px) and (max-height: 580px) { .hero__footer { display: none; } }
@media (max-width: 340px) {
  .hero__eyebrow { font-size: 13px; }
  .hero__eyebrow::before, .hero__eyebrow::after { display: none; } /* oldest 320px phones: room for the words only */
}

/* =========================================================
   REDUCED MOTION: fewer and gentler, not zero.
   Movement is removed; short opacity fades remain.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  html.js [data-reveal] { transform: none !important; transition: opacity 300ms ease !important; }
  html.js [data-split]:not(.is-in) .w > span { transform: none; filter: none; }
  .w > span { transition: opacity 300ms ease !important; }
  html.js [data-wipe] { clip-path: none !important; }
  html.js [data-wipe] img, .icon *, .skyline__b *, .skyline__ground { transition: none !important; }
  .hero__sheen, .shine, .arc__glint, .nav__sheen { display: none; }
  html.js .hero__title::before { transform: none; transition: none; }
  .sector, .deal, .logo-grid li, .person__photo, .person__photo img, .icon-badge, .btn, .to-top { transform: none !important; }
  .drawer__panel, .drawer.is-open .drawer__panel { transform: none; opacity: 0; transition: opacity 200ms ease; }
  .drawer.is-open .drawer__panel { opacity: 1; }
  .menu, .menu.is-open { clip-path: none; opacity: 0; transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .menu.is-open { opacity: 1; transition: opacity 200ms ease; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none; width: auto; justify-content: center; }
  .marquee__set { flex-wrap: wrap; justify-content: center; row-gap: 32px; }
  .marquee__set[aria-hidden="true"] { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav::after { background: var(--navy); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .form { background: var(--navy-deep); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .drawer__scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(16, 28, 48, .7); }
}

/* =========================================================
   PRINT / PDF
   Prints the page as it looks once everything has revealed: backgrounds kept, motion off,
   scroll-only chrome hidden. Exported PDFs use index.html?pdf (see js/main.js).
   ========================================================= */
/* PDF mode measures the page on screen to size the PDF, so screen-height-based sections
   get the same fixed heights they print with */
html.is-pdf .hero { height: 900px; min-height: 0; }
html.is-pdf .band { min-height: 720px; }
/* Snapshot: every element at rest, no sweeps or drifts caught mid-motion */
html.is-pdf *, html.is-pdf *::before, html.is-pdf *::after { animation: none !important; transition: none !important; }
html.is-pdf .hero__sheen, html.is-pdf .hero__footer { display: none; }
@media print {
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #20395C; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .nav { position: absolute; }
  .hero { height: 900px; min-height: 0; }
  .band { min-height: 720px; }
  .hero__sheen, .hero__footer, .nav__progress, .nav__sheen, .menu, .drawer, .skip-link,
  .shine, .arc__traveler, .arc__glint, .marquee__set[aria-hidden="true"] { display: none !important; }
  /* PDF readers disagree on blur, blend modes and filter shadows, so print without them */
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; mix-blend-mode: normal !important; }
  .eyebrow, .arc__end--ny, .arc__end--ldn { filter: none !important; }
  /* Anything the reader hasn't scrolled to yet prints in its finished state */
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  html.js [data-split] .w > span { transform: none !important; filter: none !important; opacity: 1 !important; }
  html.js [data-wipe] { clip-path: none !important; }
  html.js .eyebrow::before, html.js .eyebrow::after, html.js .point::before, html.js .point::after,
  html.js .team__label::after { transform: none !important; }
  html.js .icon *, html.js .skyline__b *, html.js .skyline__ground { stroke-dashoffset: 0 !important; }
  html.js .hero__eyebrow, html.js .hero__lede { opacity: 1 !important; transform: none !important; }
  .arc__reveal { stroke-dashoffset: 0 !important; }
  /* When printed onto ordinary paper pages, keep cards and blocks whole */
  .sector, .deal, .person, .logo-grid li, .point, .service, .city, .form, .office { break-inside: avoid; }
}

/* =========================================================
   LEGAL PAGES (privacy.html, legal.html)
   Dark navy reading pages: deeper title band, slightly lighter body.
   ========================================================= */
.legal-page { background: var(--navy-deep); color: #fff; }
.legal-back {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 17px; font-weight: 500; letter-spacing: .02em; color: #fff; opacity: .92;
  transition: opacity 200ms ease, color 200ms ease;
}
.legal-back::before { content: "\2190"; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .legal-back:hover { opacity: 1; color: var(--gold); }
  .legal-back:hover::before { transform: translateX(-4px); }
}
.legal-hero {
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(56px, 7vw, 112px)) 0 clamp(48px, 6vw, 88px);
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(192, 144, 50, .1), transparent 60%),
    linear-gradient(160deg, #172B47 0%, #1B3253 60%, #1E365A 100%);
  border-bottom: 1px solid rgba(204, 214, 227, .08);
}
.legal-title { font-size: clamp(40px, 5vw, 76px); font-weight: 400; line-height: 1.05; letter-spacing: -.012em; color: #fff; }
.legal-body {
  padding: clamp(64px, 7vw, 112px) 0 var(--section-y);
  background: linear-gradient(180deg, #20395C 0%, #24426A 100%);
  color: #E3E9F1;
}
.legal-prose { max-width: 920px; font-size: clamp(18px, 1.35vw, 20px); line-height: 1.75; text-wrap: pretty; }
.legal-prose h2 { margin: 56px 0 18px; font-size: clamp(24px, 2vw, 30px); font-weight: 400; line-height: 1.2; color: #fff; }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p + p { margin-top: 18px; }
.legal-prose .ticks { margin: 18px 0; }
.legal-prose .ticks li { margin: 12px 0; }
.legal-footer { position: relative; overflow: hidden; isolation: isolate; background: var(--grad-navy); color: #fff; }
.legal-footer .footer { margin-top: 0; padding-top: clamp(56px, 6vw, 88px); }

/* =========================================================
   404 PAGE (404.html)
   Full-screen photo band like the home hero, with a slow settle and a staggered rise.
   ========================================================= */
.error-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 48px) 0 clamp(64px, 8vw, 120px);
  background: var(--grad-navy); color: #fff;
}
.error-hero__media { position: absolute; inset: 0; z-index: -2; }
.error-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: error-settle 12s var(--ease-out) forwards; }
.error-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(23, 43, 71, .94) 0%, rgba(32, 57, 92, .78) 45%, rgba(51, 90, 143, .42) 100%),
    linear-gradient(0deg, rgba(23, 43, 71, .7) 0%, rgba(23, 43, 71, 0) 45%),
    radial-gradient(900px 500px at 85% 15%, rgba(192, 144, 50, .14), transparent 60%);
}
@keyframes error-settle { to { transform: scale(1); } }

.error-hero__content > * { animation: error-rise 900ms var(--ease-out) both; }
.error-hero__content > :nth-child(2) { animation-delay: 90ms; }
.error-hero__content > :nth-child(3) { animation-delay: 180ms; }
.error-hero__content > :nth-child(4) { animation-delay: 270ms; }
.error-hero__content > :nth-child(5) { animation-delay: 360ms; }
@keyframes error-rise { from { opacity: 0; transform: translateY(16px); } }

.error-title {
  font-size: clamp(56px, 8.5vw, 140px); font-weight: 400; line-height: .98; letter-spacing: -.02em;
  margin-left: -.04em; text-shadow: 0 20px 60px rgba(10, 20, 36, .35);
}
.error-lede { max-width: 680px; margin-top: 30px; font-size: clamp(20px, 1.75vw, 26px); line-height: 1.55; color: rgba(255, 255, 255, .9); text-wrap: pretty; }
.error-actions { margin-top: 44px; }
.error-actions .btn {
  min-height: 54px; padding: 15px 34px; color: #fff; border-color: rgba(255, 255, 255, .7);
  font-size: 15.5px; letter-spacing: .26em; text-transform: uppercase;
}
.error-links {
  display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 2.4vw, 36px);
  max-width: 760px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18);
}
.error-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; letter-spacing: .02em; color: var(--haze); transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .error-links a:hover { color: var(--gold); }
}
@media (max-width: 640px) {
  .error-hero::before {
    background:
      linear-gradient(0deg, rgba(23, 43, 71, .92) 0%, rgba(32, 57, 92, .76) 55%, rgba(51, 90, 143, .62) 100%),
      radial-gradient(600px 400px at 100% 0%, rgba(192, 144, 50, .12), transparent 60%);
  }
  .error-actions .btn { width: 100%; }
  .error-links { gap: 0 22px; }
}