/* =========================================================
   Layer 7 Capital — site styles
   Palette is fixed (carried over from the first mockup).
   ========================================================= */
:root {
  --navy: #0b2e4f;
  --navy-deep: #081f36;
  --accent: #2f7de1;
  --accent-soft: #e8f1fc;
  --accent-on-dark: #8fbaf0;
  --ink: #151515;
  --ink-2: #4a4f57;
  --line: #e3e6ea;
  --paper: #ffffff;
  --paper-2: #f5f7f9;
  --footer: #121417;
  --placeholder: #dfe4ea;
  --placeholder-ink: #8793a1;
  --placeholder-dark: #16426b;
  --placeholder-dark-ink: #9fb6cf;

  --sans: "Figtree", Arial, Helvetica, sans-serif;
  --serif: "Figtree", Arial, Helvetica, sans-serif; /* single typeface: the former serif accents now use Figtree */
  --wrap: 1320px;
  --gutter: 40px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}
@media (max-width: 760px) { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
/* Anything the script hides stays hidden, even elements (like .btn) that set their own display */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 300; line-height: 1.04; letter-spacing: -0.025em; }
.display { font-size: clamp(48px, 8.4vw, 132px); }
h2, .h2 { font-size: clamp(36px, 4.6vw, 68px); }
h3 { font-size: 26px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; }
/* No italics: emphasised words read exactly like the rest of the line */
em { font-style: normal; font-family: inherit; font-weight: inherit; letter-spacing: inherit; }
.serif { font-family: var(--serif); font-style: normal; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--ink-2); font-weight: 300; }
.label {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
}
.label .n { font-family: var(--serif); font-style: normal; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--accent); }
.dark .label { color: rgba(255,255,255,.62); }
.dark .label .n { color: var(--accent-on-dark); }
.dark { background: var(--navy); color: #fff; }
.dark .lede { color: rgba(255,255,255,.72); }

/* ---------- Placeholders ---------- */
.ph {
  position: relative; overflow: hidden;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.4) 14px 15px), var(--placeholder);
  color: var(--placeholder-ink); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.ph > span { background: rgba(255,255,255,.8); padding: 6px 10px; border-radius: 2px; }
.dark .ph { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.05) 14px 15px), var(--placeholder-dark); color: var(--placeholder-dark-ink); }
.dark .ph > span { background: rgba(8,31,54,.6); }

/* ---------- Buttons / links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px; padding: 16px 26px;
  border: 1px solid currentColor; border-radius: 100px; background: none;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  position: relative; overflow: hidden; isolation: isolate; transition: color .45s var(--ease), border-color .45s, background-color .15s;
}
.btn::before {
  content: ""; position: absolute; left: 50%; top: 100%; width: 140%; aspect-ratio: 1; z-index: -1;
  border-radius: 50%; background: var(--fill, var(--navy)); transform: translate(-50%, 0) scale(0);
  transition: transform .6s var(--ease-out);
}
.btn:hover::before { transform: translate(-50%, -60%) scale(1); }
/* Once the circular fill has swept across, paint the button's own background the same colour.
   The background runs under the border, which closes the antialiased hairline where the clipped circle meets the outline. */
.btn:hover { background-color: var(--fill, var(--navy)); transition: color .45s var(--ease), border-color .45s, background-color .2s .38s; }
.btn .arr { transition: transform .4s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
.btn-ink { color: var(--navy); --fill: var(--navy); }
.btn-ink:hover { color: #fff; }
.btn-white { color: #fff; --fill: #fff; }
.btn-white:hover { color: var(--navy); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; --fill: var(--navy-deep); }
.btn-accent:hover { border-color: var(--navy-deep); }

.text-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--accent); }
.text-link .arr { transition: transform .35s var(--ease-out); }
.text-link:hover .arr { transform: translateX(6px); }
.dark .text-link { color: var(--accent-on-dark); }
.u-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease-out); }
.u-link:hover { background-size: 100% 1px; }

/* ---------- Loader / page transition ---------- */
.curtain {
  position: fixed; inset: 0; z-index: 200; background: var(--navy); color: #fff;
  display: flex; align-items: flex-end; justify-content: space-between; padding: 40px var(--gutter);
  transform: translateY(0); pointer-events: all;
}
/* Slow, even lift (ease-in-out) so the page underneath isn't exposed all at once */
.curtain.is-gone { transform: translateY(-100%); transition: transform 1.6s cubic-bezier(.7,0,.25,1); pointer-events: none; }
/* Content below the hero rises in after the curtain, in step with the hero text */
main > :not([data-hero]), body > footer { transition: opacity 1.4s var(--ease), transform 1.6s var(--ease-out); }
body.pre-enter main > :not([data-hero]), body.pre-enter > footer { opacity: 0; transform: translateY(60px); }
.curtain.is-covering { transform: translateY(100%); transition: none; }
.curtain.is-covering.go { transform: translateY(0); transition: transform .8s cubic-bezier(.7,0,.25,1); }
.curtain .count { font-family: var(--serif); font-style: normal; font-weight: 300; letter-spacing: -.04em; font-size: clamp(80px, 14vw, 200px); line-height: .8; }
.curtain .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); }
.curtain .brand { margin-bottom: 20px; opacity: .9; }
.curtain:not(.is-loader) .count, .curtain:not(.is-loader) .bar, .curtain:not(.is-loader) .brand { display: none; }

/* ---------- Header ----------
   Logo inset from the top-left corner, "Explore" menu button inset from the top-right — both measured
   from the screen edges (not the content column). Always pinned to the top: transparent with white type
   over the navy hero, then it fades into a solid white bar the moment page content reaches it (and back
   again on the way up), so it never disappears and the menu button is always reachable. */
:root { --edge: clamp(20px, 3.4vw, 56px); }
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 80; color: #fff;
  background-color: rgba(255,255,255,0); box-shadow: 0 1px 0 rgba(0,0,0,0); backdrop-filter: blur(0px);
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), backdrop-filter .5s var(--ease);
}
.site-header.is-solid { background-color: rgba(255,255,255,.96); color: var(--ink); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.hdr { display: flex; align-items: center; justify-content: space-between; height: 104px; padding-inline: var(--edge); transition: height .5s var(--ease-out); }
.site-header.is-solid .hdr { height: 76px; }
/* Logo: white over the navy hero, crossfades to black & blue once the header turns solid */
.logo { position: relative; display: inline-block; line-height: 0; }
.logo img { height: 40px; width: auto; display: block; transition: opacity .5s var(--ease), height .5s var(--ease-out); }
.logo .logo-dark { position: absolute; left: 0; top: 0; opacity: 0; }
.site-header.is-solid .logo img { height: 34px; }
.site-header.is-solid .logo .logo-light { opacity: 0; }
.site-header.is-solid .logo .logo-dark { opacity: 1; }
@media (max-width: 520px) { .logo img { height: 32px; } .site-header.is-solid .logo img { height: 28px; } .hdr { height: 84px; } }
.curtain .brand img { height: 30px; width: auto; display: block; }

/* While the menu is open the header sits on the navy panel: transparent, white logo, white button */
body.menu-open .site-header, body.menu-open .site-header.is-solid { background-color: rgba(255,255,255,0); box-shadow: 0 1px 0 rgba(0,0,0,0); backdrop-filter: blur(0px); color: #fff; }
body.menu-open .site-header .logo .logo-light { opacity: 1; }
body.menu-open .site-header .logo .logo-dark { opacity: 0; }

/* "Explore" button: two lines that retract while an X draws in */
.menu-btn { display: inline-flex; align-items: center; gap: 16px; background: none; border: 0; color: inherit; padding: 8px 0; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.menu-btn .txt { min-width: 5.2em; text-align: right; }
.burger { width: 34px; height: 34px; overflow: visible; }
.burger path { fill: none; stroke: currentColor; stroke-width: 1.5; transition: stroke-dashoffset .5s var(--ease-out); }
.burger .b1, .burger .b2 { stroke-dasharray: 30; stroke-dashoffset: 0; transition-delay: .22s; }
.burger .b2 { transition-delay: .28s; }
.burger .x1, .burger .x2 { stroke-dasharray: 25.5; stroke-dashoffset: 25.5; transition-delay: 0s; }
body.menu-open .burger .b1 { stroke-dashoffset: 30; transition-delay: 0s; }
body.menu-open .burger .b2 { stroke-dashoffset: -30; transition-delay: .06s; }
body.menu-open .burger .x1 { stroke-dashoffset: 0; transition-delay: .25s; }
body.menu-open .burger .x2 { stroke-dashoffset: 0; transition-delay: .32s; }
body:not(.menu-open) .menu-btn:hover .b2 { stroke-dashoffset: 12; transition-delay: 0s; }

/* Full-screen menu: the navy panel slides down, then the sections rise in one after another */
.overlay-menu {
  position: fixed; inset: 0; z-index: 70; background: var(--navy-deep); color: #fff;
  transform: translateY(-100%); visibility: hidden;
  transition: transform .85s cubic-bezier(.76,0,.24,1), visibility 0s linear .85s;
  /* equal top/bottom padding (≥ header height) so the list sits dead-centre on screen */
  display: flex; flex-direction: column; justify-content: center; padding: 108px var(--edge);
  overflow-y: auto; /* safety net for very short screens (e.g. a phone held sideways) */
}
body.menu-open .overlay-menu { transform: none; visibility: visible; transition: transform .85s cubic-bezier(.76,0,.24,1); }
/* Every item gets the same box (fixed line-height + one gap value), so spacing is identical between all six.
   Right padding keeps the last letter's outline (e.g. the "s" in Transactions) from being clipped by overflow:hidden. */
/* Type scales with width AND height (9vh) so all six items always fit between the header and the bottom edge */
.overlay-menu nav { display: flex; flex-direction: column; align-items: flex-start; gap: .14em; font-size: clamp(34px, min(6.4vw, 9vh), 88px); }
/* Inter Tight is already tightly spaced, so only a touch of negative tracking here (more makes pairs like "rm" collide) */
.overlay-menu nav a { font-family: var(--display-face); font-size: 1em; font-weight: 400; letter-spacing: -.01em; line-height: 1.1; overflow: hidden; padding: 0 .14em .06em 0; transition: opacity .35s var(--ease); }
.overlay-menu nav a span { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform .7s var(--ease-out), opacity .5s var(--ease); }
body.menu-open .overlay-menu nav a span { transform: none; opacity: 1; }
body.menu-open .overlay-menu nav a:nth-child(1) span { transition-delay: .38s; }
body.menu-open .overlay-menu nav a:nth-child(2) span { transition-delay: .44s; }
body.menu-open .overlay-menu nav a:nth-child(3) span { transition-delay: .50s; }
body.menu-open .overlay-menu nav a:nth-child(4) span { transition-delay: .56s; }
body.menu-open .overlay-menu nav a:nth-child(5) span { transition-delay: .62s; }
body.menu-open .overlay-menu nav a:nth-child(6) span { transition-delay: .68s; }
.overlay-menu nav:hover a { opacity: .4; }
.overlay-menu nav a:hover, .overlay-menu nav a:focus-visible { opacity: 1; }
.overlay-menu nav a[aria-current="page"] span { color: var(--accent-on-dark); }
@media (max-width: 520px) { .overlay-menu { padding-top: 92px; padding-bottom: 92px; } }

/* ---------- Reveal system ---------- */
/* Side padding (cancelled by negative margin) keeps italic overhangs like the P in "people." from being clipped */
.lines .ln { display: block; overflow: hidden; padding: 0 .12em .08em; margin: 0 -.12em -.08em; }
.lines .ln > span { display: inline-block; transform: translateY(110%); transition: transform 1.3s var(--ease-out); }
.lines.in .ln > span { transform: none; }
.lines .ln:nth-child(2) > span { transition-delay: .1s; }
.lines .ln:nth-child(3) > span { transition-delay: .2s; }
.lines .ln:nth-child(4) > span { transition-delay: .3s; }
/* hero variant: lines glide in from alternating sides */
.lines.slide .ln > span { transform: translateX(-12%); opacity: 0; transition: transform 1.6s var(--ease-out), opacity 1.2s var(--ease); }
.lines.slide .ln:nth-child(even) > span { transform: translateX(12%); }
.lines.slide.in .ln > span { transform: none; opacity: 1; }

.rv { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1.2s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: .1s; } .rv[data-d="2"] { transition-delay: .2s; } .rv[data-d="3"] { transition-delay: .3s; } .rv[data-d="4"] { transition-delay: .4s; }
.rv-clip { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-out); }
.rv-clip.in { clip-path: inset(0); }
.rule { height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out); }
.rule.in { transform: none; }
.dark .rule { background: rgba(255,255,255,.16); }

section { position: relative; }
.sec { padding: 160px 0; }
@media (max-width: 760px) { .sec { padding: 96px 0; } }

/* ---------- Hero (home) ---------- */
.hero {
  min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end;
  padding: 160px 0 clamp(96px, 16vh, 180px); overflow: hidden;
}
.hero > .wrap { width: 100%; }
.hero .display { max-width: 12ch; }
/* Line-and-circle art: fills the hero, anchored top-right (the SVG uses xMaxYMin slice), so the circle stays in view
   whatever the screen shape. Without an explicit width/height the SVG only took its width-based height, so on
   phones it shrank to a small strip in the corner. */
.hero { position: relative; }
.hero-deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Phones: size the art from the screen width instead, so it keeps its desktop proportions (circle ≈ 65% of the
   width, upper right, lines crossing it) rather than growing to fill a tall, narrow screen */
@media (max-width: 760px) {
  .hero-deco { inset: 0 0 auto auto; width: 223vw; height: auto; aspect-ratio: 1440 / 900; }
}
.hero-deco line, .hero-deco circle { stroke: rgba(143,186,240,.18); fill: none; stroke-width: 1; }
.hero-deco .draw { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 3s 1.2s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.scroll-hint { position: absolute; right: var(--gutter); bottom: 56px; writing-mode: vertical-rl; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.5); display: flex; align-items: center; gap: 14px; }
.scroll-hint::after { content: ""; width: 1px; height: 64px; background: linear-gradient(rgba(255,255,255,.7), transparent); animation: hint 2.2s infinite var(--ease); transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 900px) { .scroll-hint { display: none; } }

/* ---------- By the numbers (quiet) ---------- */
.numbers { padding: 140px 0 150px; }
.numbers-head { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; margin-bottom: 64px; }
.numbers-head h2 { font-size: clamp(32px, 3.4vw, 48px); margin-top: 20px; }
.numbers-head p { color: var(--ink-2); margin: 0 0 18px; max-width: 460px; }
.num-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.num-item { padding: 44px 28px 36px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.num-item:nth-child(4n+1) { border-left: 0; padding-left: 0; }
.num-item .num { font-family: var(--serif); font-weight: 300; letter-spacing: -.03em; font-size: clamp(52px, 4.8vw, 80px); line-height: 1; color: var(--navy); white-space: nowrap; }
.num-item .num.is-placeholder { color: var(--placeholder-ink); }
.num-label { margin-top: 20px; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.num-note { color: var(--ink-2); font-size: 14px; }
.ph-tag { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--placeholder-ink); border: 1px dashed var(--placeholder-ink); padding: 1px 6px; border-radius: 2px; }
/* four stats: one row on wide screens, 2 × 2 on tablets and small laptops, stacked on phones */
@media (max-width: 1200px) and (min-width: 761px) {
  .num-grid { grid-template-columns: repeat(2, 1fr); }
  .num-item:nth-child(n) { border-left: 1px solid var(--line); padding-left: 28px; }
  .num-item:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .numbers { padding: 96px 0; }
  .numbers-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .num-grid { grid-template-columns: 1fr; }
  .num-item:nth-child(n) { border-left: 0; padding: 28px 0; }
}

/* ---------- Tombstones ---------- */
.tombs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tombs.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .tombs.cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .tombs, .tombs.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 520px) { .tombs, .tombs.cols-4 { grid-template-columns: 1fr; } }
.tomb {
  position: relative; background: var(--paper-2); border: 1px solid transparent; border-radius: 0;
  /* bottom padding leaves room for the sector / "Details +" bar that slides up on hover */
  padding: 26px 26px 76px; min-height: 340px; display: flex; flex-direction: column; text-align: center;
  cursor: pointer; overflow: hidden; outline: none;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-radius .6s var(--ease-out), background .4s, opacity .45s var(--ease), border-color .3s;
}
.tomb:hover, .tomb:focus-visible { transform: translateY(-6px); border-radius: 32px 0 0 0; box-shadow: 0 30px 50px -30px rgba(11,46,79,.45); background: var(--paper); border-color: var(--line); }
.tomb:focus-visible { border-color: var(--accent); }
.tomb.is-open { border-color: var(--accent); background: var(--paper); border-radius: 32px 0 0 0; }
.tomb-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 26px; }
.tomb-top .type { color: var(--accent); }
.tomb-top .yr { font-family: var(--serif); font-style: normal; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.wordmark {
  height: 64px; display: grid; place-items: center; padding: 0 12px; border: 1px dashed #c9d0d8;
  font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--navy); background: rgba(255,255,255,.6);
}
/* Logo slot: every logo is fitted into the same box so wide wordmarks and square marks read at a similar weight */
.mark { height: 76px; display: grid; place-items: center; padding: 0 8px; }
/* multiply: logos supplied on a solid white background blend into the card instead of showing a white box */
.mark img, .sp-logos img { mix-blend-mode: multiply; }
.mark img { max-width: 72%; max-height: 58px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .78; transition: filter .5s var(--ease), opacity .5s var(--ease), transform .6s var(--ease-out); }
.tomb:hover .mark img, .tomb:focus-visible .mark img, .tomb.is-open .mark img { filter: none; opacity: 1; }
/* White-only logos: render as a solid dark silhouette in every state */
.mark img.mono, .tomb:hover .mark img.mono, .tomb:focus-visible .mark img.mono, .tomb.is-open .mark img.mono { filter: brightness(0); }
.mark img.mono { opacity: .72; }
.tomb:hover .mark img.mono, .tomb.is-open .mark img.mono { opacity: .92; }
/* Text names (undisclosed parties, Vapor World): centred on every card, so a two-line name sits under itself neatly */
.mark .wm { font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--navy); text-wrap: balance; text-align: center; }
/* Logo not sourced yet: dashed slot so it's easy to spot */
.mark .wm-needed { font-size: 15px; font-weight: 500; color: var(--placeholder-ink); border: 1px dashed #c9d0d8; padding: 10px 14px; max-width: 85%; }
.tomb .verb { font-size: 14px; color: var(--ink-2); margin: 16px 0; }
.tomb-hover {
  position: absolute; inset: auto 0 0 0; padding: 14px 26px; background: var(--navy); color: #fff;
  display: flex; justify-content: space-between; align-items: center; font-size: 13px;
  transform: translateY(100%); transition: transform .5s var(--ease-out);
}
/* A deal in two sectors shows them on two lines; the card's 76px bottom padding leaves room for that */
.tomb-hover .sector { color: var(--accent-on-dark); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; line-height: 1.6; }
.tomb:hover .tomb-hover, .tomb:focus-visible .tomb-hover, .tomb.is-open .tomb-hover { transform: none; }
.tomb.sample .wordmark { color: var(--placeholder-ink); font-weight: 500; }
/* Filtering: leaving cards are pinned in place (see apply() in site.js) and ignore the pointer while they fade */
.tombs { position: relative; }
.tomb.is-leaving { pointer-events: none; z-index: 0; }
.tomb.is-hidden { display: none; }

/* In-grid detail panel */
.deal-detail { grid-column: 1 / -1; background: var(--navy); color: #fff; overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.deal-detail.open { grid-template-rows: 1fr; }
.deal-detail > div { min-height: 0; transition: opacity .18s var(--ease); }
.deal-detail.swapping > div { opacity: 0; } /* same-row switch: contents fade out, swap, fade back in */
.dd-inner { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 48px; padding: 44px 48px; align-items: start; }
.dd-inner h3 { font-size: 30px; font-weight: 300; margin-bottom: 14px; }
.dd-inner p { color: rgba(255,255,255,.72); margin: 0; }
.dd-meta { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; font-size: 14px; margin: 0; }
.dd-meta dt { color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; padding-top: 3px; }
.dd-meta dd { margin: 0; }
.dd-close { background: none; border: 1px solid rgba(255,255,255,.3); width: 44px; height: 44px; border-radius: 50%; color: #fff; transition: background .3s, transform .5s var(--ease-out); }
.dd-close:hover { background: rgba(255,255,255,.1); transform: rotate(90deg); }
.dd-actions { grid-column: 1 / -1; display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 800px) { .dd-inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px; } .dd-close { position: absolute; right: 16px; top: 16px; } .deal-detail { position: relative; } }

/* ---------- About (sticky split) ---------- */
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 96px; }
.about-grid .sticky { position: sticky; top: 130px; align-self: start; }
.about-grid .sticky h2 { margin-top: 28px; }
.about-body .lede { color: var(--ink); margin-bottom: 40px; }
.about-body p { color: var(--ink-2); }
.about-body .ph { aspect-ratio: 16 / 10; margin: 56px 0; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px; }
.pillar .k { font-family: var(--serif); font-style: normal; font-size: 22px; color: var(--accent); margin-bottom: 12px; }
.pillar h4 { font-size: 19px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 8px; line-height: 1.3; }
.pillar p { font-size: 15px; margin: 0; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } .about-grid .sticky { position: static; } .pillars { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Sectors (index list + cursor preview) ---------- */
.sectors { background: var(--paper-2); }
.sectors-head { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; margin-bottom: 72px; }
.sectors-head .lede { margin: 0; }
.sector-list { border-top: 1px solid var(--line); }
.sector { border-bottom: 1px solid var(--line); }
.sector-row {
  width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  padding: 34px 0; background: none; border: 0; text-align: left; position: relative;
}
.sector-row .name { font-size: clamp(28px, 3.4vw, 48px); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; transition: transform .6s var(--ease-out), color .3s; }
.sector-row .plus { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; position: relative; transition: background .35s, border-color .35s, transform .6s var(--ease-out); }
.sector-row .plus::before, .sector-row .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .5s var(--ease-out), background .3s; }
.sector-row .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.sector-row:hover .name { transform: translateX(14px); color: var(--navy); }
.sector-row:hover .plus { border-color: var(--navy); }
.sector.open .plus { background: var(--navy); border-color: var(--navy); transform: rotate(180deg); }
.sector.open .plus::before, .sector.open .plus::after { background: #fff; }
.sector.open .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.sector-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.sector.open .sector-body { grid-template-rows: 1fr; }
.sector-body > div { min-height: 0; overflow: hidden; }
.sector-body .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 0 0 40px; }
.sector-body p { color: var(--ink-2); margin: 0; max-width: 520px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.chip { font-size: 13px; padding: 7px 14px; border-radius: 100px; background: var(--paper); border: 1px solid var(--line); color: var(--navy); font-weight: 500; }
@media (max-width: 900px) {
  .sectors-head { grid-template-columns: 1fr; gap: 28px; }
  .sector-row { gap: 14px; padding: 26px 0; }
  .sector-body .inner { grid-template-columns: 1fr; gap: 18px; }
}
.cursor-preview {
  position: fixed; left: 0; top: 0; width: 300px; z-index: 30; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity .35s var(--ease), transform .5s var(--ease-out);
}
.cursor-preview.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Sector track-record card: count, up to three client logos, latest deal date */
.sp-card { background: var(--paper); border: 1px solid var(--line); border-radius: 24px 0 0 0; box-shadow: 0 28px 60px -28px rgba(11,46,79,.45); padding: 22px 24px 18px; }
.sp-top { display: flex; align-items: center; gap: 14px; }
.sp-n { font-family: var(--serif); font-weight: 300; letter-spacing: -.03em; font-size: 56px; line-height: .9; color: var(--navy); }
.sp-l { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.sp-l-solo { font-size: 16px; color: var(--navy); font-weight: 500; }
.sp-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.sp-logos img { max-width: 100%; max-height: 28px; width: auto; justify-self: center; object-fit: contain; filter: grayscale(1); opacity: .75; }
.sp-logos img.mono { filter: brightness(0); opacity: .7; }
.sp-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--placeholder-ink); }
.sp-foot span:first-child { color: var(--accent); }
@media (hover: none), (max-width: 900px) { .cursor-preview { display: none; } }

/* ---------- Capabilities ---------- */
.caps-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-bottom: 80px; }
.caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.cap { padding: 44px 40px 48px 0; border-top: 1px solid rgba(255,255,255,.16); position: relative; display: flex; flex-direction: column; }
.cap + .cap { padding-left: 40px; border-left: 1px solid rgba(255,255,255,.16); }
.cap::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out); }
.cap:hover::before { transform: scaleX(1); }
.cap .big { font-family: var(--serif); font-style: normal; font-size: 88px; line-height: .9; color: var(--accent-on-dark); opacity: .5; transition: opacity .5s, transform .8s var(--ease-out); }
.cap:hover .big { opacity: 1; transform: translateY(-6px); }
.cap h3 { font-size: 30px; font-weight: 300; margin: 0 0 16px; }
.cap p { color: rgba(255,255,255,.7); font-size: 16px; }
.cap ul { list-style: none; padding: 0; margin: 12px 0 28px; display: grid; gap: 8px; font-size: 14px; color: rgba(255,255,255,.8); }
.cap li::before { content: "—"; color: var(--accent-on-dark); margin-right: 10px; }
.cap ul { margin-bottom: 0; }
@media (max-width: 900px) { .caps-grid { grid-template-columns: 1fr; } .cap, .cap + .cap { padding: 36px 0; border-left: 0; } .cap h3 { margin-top: 24px; } .cap .big { font-size: 64px; } }

/* ---------- Team ---------- */
.team-head { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: end; margin-bottom: 72px; }
.team-head .lede { margin: 0 0 24px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 72px 40px; }
.person { cursor: pointer; background: none; border: 0; padding: 0; text-align: left; width: 100%; color: inherit; }
.person:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.person .frame { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0; transition: border-radius .6s var(--ease-out); }
.person .frame .ph { height: 100%; transition: transform 1s var(--ease-out); }
/* Black & white portraits, framed consistently */
.bw { filter: grayscale(1) contrast(1.06) brightness(1.02); }
.person .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; background: var(--paper-2); transition: transform 1s var(--ease-out); }
.person:hover .frame img { transform: scale(1.05); }
.person:hover .frame { border-radius: 40px 0 0 0; }
.person:hover .frame .ph { transform: scale(1.05); }
.person .who { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-top: 18px; }
.person .frame { display: block; }
.person .nm { display: block; font-size: 19px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.person small { display: block; color: var(--ink-2); font-size: 14px; }
.person .go { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 14px; transition: background .35s, color .35s, transform .6s var(--ease-out), border-color .35s; }
.person:hover .go { background: var(--navy); color: #fff; border-color: var(--navy); transform: rotate(-45deg); }
@media (max-width: 900px) { .team-head { grid-template-columns: 1fr; gap: 24px; } .team-grid { grid-template-columns: 1fr 1fr; gap: 44px 16px; } }

/* Bio drawer (team page) */
.scrim { position: fixed; inset: 0; z-index: 90; background: rgba(8,31,54,.55); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
.scrim.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(560px, 100%); background: var(--paper);
  transform: translateX(100%); transition: transform .7s var(--ease-out); overflow-y: auto; visibility: hidden;
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; visibility: visible; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; padding: 24px 40px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 1; }
.drawer-close { background: none; border: 1px solid var(--line); width: 44px; height: 44px; border-radius: 50%; transition: transform .5s var(--ease-out), border-color .3s; }
.drawer-close:hover { transform: rotate(90deg); border-color: var(--navy); }
.drawer-body { padding: 40px; }
.drawer-body [data-bio-photo] { width: 200px; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 32px; background: var(--paper-2); }
.drawer-body [data-bio-photo] img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: grayscale(1) contrast(1.06) brightness(1.02); }
.drawer-body [data-bio-photo] .ph { height: 100%; }
.drawer-body [data-bio-links] { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 24px; }
.drawer-body h3 { font-size: 36px; font-weight: 300; letter-spacing: -.02em; }
.drawer-body .title { color: var(--accent); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 10px 0 28px; }
.drawer-body p { color: var(--ink-2); }
.drawer-body .edu { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 24px; font-size: 14px; color: var(--ink-2); }
.drawer-body .edu b { display: block; color: var(--ink); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.drawer.open .drawer-body > * { animation: panel-up .7s var(--ease-out) both; }
.drawer.open .drawer-body > *:nth-child(2) { animation-delay: .08s; }
.drawer.open .drawer-body > *:nth-child(3) { animation-delay: .14s; }
.drawer.open .drawer-body > *:nth-child(n+4) { animation-delay: .2s; }
@keyframes panel-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .drawer-top, .drawer-body { padding-left: 20px; padding-right: 20px; } }


/* ---------- News carousel ---------- */
.news { background: var(--paper-2); overflow: hidden; }
.news-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.carousel { cursor: grab; touch-action: pan-y; }
.carousel.dragging { cursor: grabbing; }
.car-track { display: flex; gap: 24px; transition: transform .9s var(--ease-out); will-change: transform; }
.carousel.dragging .car-track { transition: none; }
.post { flex: 0 0 calc((100% - 48px) / 3.3); background: var(--paper); user-select: none; display: flex; flex-direction: column; transition: transform .6s var(--ease-out); }
.post .ph { aspect-ratio: 16 / 10; }
/* Logo band: the two parties to the deal, in place of a photo */
.post-logos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 140px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.post-logos .mark { height: auto; padding: 0; }
.post-logos .mark img { max-width: 100%; max-height: 42px; }
.post-logos .mark .wm { font-size: 15px; }
.post-logos .mark .wm-needed { font-size: 12px; padding: 8px 10px; max-width: 100%; }
.pl-sep { width: 1px; height: 44px; background: var(--line); }
.post:hover .mark img { filter: none; opacity: 1; }
.post:hover .mark img.mono { filter: brightness(0); opacity: .92; }
.post-body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.post .meta { display: flex; gap: 12px; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.post .meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--placeholder-ink); }
.post .meta span:last-child { color: var(--ink-2); }
.post h3 { font-size: 21px; font-weight: 400; line-height: 1.35; margin-bottom: 28px; }
.post .text-link { margin-top: auto; }
.post:hover { transform: translateY(-6px); }
.car-ctrl { display: flex; align-items: center; gap: 20px; }
.car-progress { width: 180px; height: 1px; background: var(--line); position: relative; }
.car-progress i { position: absolute; left: 0; top: -.5px; height: 2px; background: var(--navy); transition: width .7s var(--ease-out), left .7s var(--ease-out); }
.car-btns { display: flex; gap: 10px; }
.car-btns button { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--ink); background: none; display: grid; place-items: center; transition: background .3s, color .3s, opacity .3s; }
.car-btns button:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
.car-btns button:disabled { opacity: .25; cursor: default; }
@media (max-width: 1000px) { .post { flex-basis: calc((100% - 24px) / 2.2); } }
@media (max-width: 640px) { .post { flex-basis: 84%; } .car-progress { width: 90px; } }

/* ---------- CTA ---------- */
.cta { background: var(--navy-deep); color: #fff; overflow: hidden; }
.cta-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; }
.cta .display { font-size: clamp(56px, 10vw, 168px); line-height: .95; letter-spacing: -.012em; }
/* Figtree's light "r" arm nearly touches a following "t" at display sizes; open that one pair to match the rest */
.kern-rt { margin-right: .048em; }
.cta-side p { color: rgba(255,255,255,.7); }
/* Single contact action: the email itself is the button */
.mail-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 36px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2);
  font-size: clamp(20px, 2vw, 28px); font-weight: 300; letter-spacing: -.01em; position: relative;
}
.mail-cta::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--accent-on-dark); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.mail-cta:hover::after { transform: scaleX(1); }
.mail-cta .circle { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; font-size: 18px; transition: background .4s, color .4s, border-color .4s, transform .6s var(--ease-out); }
.mail-cta:hover .circle { background: #fff; color: var(--navy); border-color: #fff; transform: rotate(-45deg); }
.cta-alt { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,.55); }
.cta-alt a { color: #fff; }
@media (max-width: 900px) { .cta-inner { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Footer ---------- */
footer { background: var(--footer); color: rgba(255,255,255,.66); font-size: 15px; }
/* Footer: logo + page links across the top → copyright & regulatory text → legal links.
   Vertical spacing lives on the rows (not the .wrap) so the side gutters always survive. */
footer a:hover { color: #fff; }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 32px 48px; flex-wrap: wrap; padding: 80px 0 48px; border-bottom: 1px solid rgba(255,255,255,.12); }
.foot-top .logo img { height: 44px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 36px; font-size: 15px; }
.foot-links a { color: rgba(255,255,255,.85); }
/* © line, disclosure and legal links read as one block with the same 18px between each */
/* Full width, so the disclosure runs edge to edge under the divider line like the rest of the footer */
.foot-legal { padding: 32px 0 0; display: grid; gap: 18px; font-size: 13px; line-height: 1.75; color: rgba(255,255,255,.55); }
.foot-legal p { margin: 0; }
.foot-legal a { color: rgba(255,255,255,.9); text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; transition: text-decoration-color .3s, color .3s; }
.foot-legal a:hover { color: #fff; text-decoration-color: #fff; }
@media (max-width: 760px) { .foot-top { flex-direction: column; align-items: flex-start; padding-top: 64px; } .foot-links { gap: 12px 24px; } }
.social { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; color: #fff; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s, transform .5s var(--ease-out); }
a.social:hover, a:hover > .social { background: #fff; color: var(--footer); border-color: #fff; transform: translateY(-2px); }
.foot-base { padding: 18px 0 32px; font-size: 13px; color: rgba(255,255,255,.5); }
.foot-base nav { display: flex; gap: 12px 28px; flex-wrap: wrap; }

/* Newsletter sign-up (replaces the old contact CTA) */
.nl-form { display: flex; align-items: center; gap: 16px; margin-top: 36px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.25); position: relative; transition: border-color .3s; }
.nl-form::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--accent-on-dark); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.nl-form:focus-within::after { transform: scaleX(1); }
.nl-form input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font: inherit; font-size: clamp(18px, 1.8vw, 24px); font-weight: 300; padding: 10px 0; }
.nl-form input::placeholder { color: rgba(255,255,255,.45); }
.nl-submit { display: inline-flex; align-items: center; gap: 14px; background: none; border: 0; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 0; }
.nl-submit .circle { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; font-size: 18px; transition: background .4s, color .4s, border-color .4s, transform .6s var(--ease-out); }
.nl-submit:hover .circle, .nl-submit:focus-visible .circle { background: #fff; color: var(--navy); border-color: #fff; transform: rotate(-45deg); }
.nl-msg { margin: 14px 0 0; font-size: 13px; color: rgba(255,255,255,.5); min-height: 1.6em; }
.nl-form.is-error { border-bottom-color: #f2a3a3; }
.nl-msg.is-error { color: #f2a3a3; }
.nl-msg.is-done { color: var(--accent-on-dark); }
@media (max-width: 520px) { .nl-submit > span:first-child { display: none; } }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 64px; }
.contact-block .label { margin-bottom: 24px; }
.contact-block p { color: var(--ink-2); font-size: 15px; margin: 18px 0 0; }
.contact-mail { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: clamp(20px, 2vw, 28px); font-weight: 300; color: var(--navy); position: relative; }
.contact-mail::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.contact-mail:hover::after { transform: scaleX(1); }
.contact-mail .circle { width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .4s, color .4s, border-color .4s, transform .6s var(--ease-out); }
.contact-mail:hover .circle { background: var(--navy); color: #fff; border-color: var(--navy); transform: rotate(-45deg); }
/* Arrow inside the round buttons: a symmetric SVG (not a text glyph), so it sits dead centre and turns in place */
.circle svg { width: 18px; height: 18px; display: block; }
.contact-addr { font-style: normal; font-size: 22px; font-weight: 300; line-height: 1.45; color: var(--navy); margin-bottom: 18px; }
.contact-social { display: inline-flex; align-items: center; gap: 14px; font-size: 17px; color: var(--navy); }
.contact-social .social { border-color: var(--line); color: var(--navy); }
.contact-social:hover .social { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }

/* Legal page */
.legal { display: grid; grid-template-columns: 240px 1fr; gap: 80px; }
/* justify-items: start keeps each link only as wide as its text, so the hover underline matches the words */
.legal-toc { position: sticky; top: 110px; align-self: start; display: grid; justify-items: start; gap: 14px; font-size: 15px; color: var(--ink-2); }
.legal-sec { padding: 0 0 56px; margin-bottom: 56px; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.legal-sec:last-child { border-bottom: 0; margin-bottom: 0; }
.legal-sec h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 24px; }
.legal-ph { color: var(--placeholder-ink); border-left: 2px dashed #c9d0d8; padding-left: 20px; max-width: 70ch; }
@media (max-width: 900px) { .legal { grid-template-columns: 1fr; gap: 40px; } .legal-toc { position: static; display: flex; flex-wrap: wrap; gap: 20px; } }

/* ---------- Transactions page ---------- */
.page-hero { padding: 190px 0 96px; }
.page-hero .row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: end; margin-top: 47px; } /* 47px = the label line that used to sit above + its 28px gap, so headlines stay put */
.page-hero .display { font-size: clamp(56px, 9vw, 140px); }
.page-hero .count { font-family: var(--serif); font-style: normal; color: var(--accent-on-dark); }
.page-hero .lede { margin: 0; }

/* ---------- Announcement page (announcement.html) ---------- */
.ann-hero { padding: 190px 0 88px; }
.ann-hero .nmeta { color: rgba(255,255,255,.6); margin-bottom: 30px; }
.ann-hero .nmeta .cat { color: var(--accent-on-dark); }
.ann-hero .nmeta .dash { color: rgba(255,255,255,.35); }
/* Press-release headlines run long, so a steady size rather than the page-hero display scale */
.ann-hero h1 { font-family: var(--display-face); font-weight: 400; letter-spacing: -.015em; line-height: 1.1; font-size: clamp(32px, 4vw, 58px); max-width: 24ch; text-wrap: balance; }
.ann-hero .lede { margin: 30px 0 0; max-width: 62ch; color: rgba(255,255,255,.72); }
.ann-sec { padding: 96px 0 140px; }
.ann-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 96px; align-items: start; }
.ann-body { max-width: 70ch; font-size: 18px; line-height: 1.75; }
.ann-body p { margin: 0 0 1.3em; }
.ann-body h3 { font-size: 20px; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--navy); margin: 2.4em 0 .7em; }
.ann-body ul { margin: 0 0 1.3em; padding-left: 1.2em; }
.ann-body li { margin-bottom: .5em; }
.ann-body li::marker { color: var(--accent); }
.ann-side { position: sticky; top: 110px; display: grid; gap: 28px; }
.ann-tomb { background: var(--paper-2); padding: 34px 24px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ann-tomb .mark { width: 100%; }
.ann-tomb .mark img { filter: none; opacity: 1; }
.ann-tomb .mark img.mono { filter: brightness(0); opacity: .85; }
.ann-tomb .verb { font-size: 14px; color: var(--ink-2); margin: 10px 0; }
.ann-meta { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; margin: 0; font-size: 15px; }
.ann-meta dt { color: var(--ink-2); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 600; padding-top: 4px; }
.ann-meta dd { margin: 0; }
/* Previous (older) / next (newer) announcement links */
.ann-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 96px; padding-top: 40px; border-top: 1px solid var(--line); }
.ann-near { display: grid; gap: 10px; align-content: start; }
.ann-near:last-child { text-align: right; justify-items: end; }
.ann-near .lbl { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ann-near .hl { font-size: 20px; font-weight: 300; line-height: 1.35; color: var(--navy); max-width: 34ch; transition: color .3s; }
.ann-near:hover .hl { color: var(--accent); }
/* Deal detail panel (Transactions): flag for deals with no press release, in the site's placeholder style */
.ann-needed { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); border: 1px dashed rgba(255,255,255,.4); padding: 8px 14px; }
@media (max-width: 1000px) {
  .ann-wrap { grid-template-columns: 1fr; gap: 48px; }
  .ann-side { position: static; order: -1; }
}
@media (max-width: 760px) {
  .ann-hero { padding: 150px 0 64px; }
  .ann-sec { padding: 64px 0 96px; }
  .ann-body { font-size: 17px; }
  .ann-nav { grid-template-columns: 1fr; gap: 32px; }
  .ann-near:last-child { text-align: left; justify-items: start; }
}
@media (max-width: 900px) { .page-hero { padding: 150px 0 64px; } .page-hero .row { grid-template-columns: 1fr; gap: 28px; } }

.filters { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: top .5s var(--ease-out); }
body.hdr-shown .filters { top: 76px; }
.filters .wrap { display: flex; align-items: center; gap: 24px; justify-content: space-between; min-height: 84px; flex-wrap: wrap; padding-block: 14px; }
.type-tabs { display: flex; gap: 6px; flex-wrap: wrap; position: relative; }
.type-tabs button {
  background: none; border: 1px solid var(--line); border-radius: 100px; padding: 9px 16px; font-size: 14px; font-weight: 500; color: var(--ink-2);
  display: inline-flex; gap: 8px; align-items: center; transition: background .3s, color .3s, border-color .3s;
}
.type-tabs button b { font-weight: 600; font-size: 11px; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--paper-2); color: var(--ink-2); display: grid; place-items: center; transition: background .3s, color .3s; }
.type-tabs button:hover { border-color: var(--navy); color: var(--navy); }
.type-tabs button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.type-tabs button[aria-pressed="true"] b { background: rgba(255,255,255,.18); color: #fff; }
.filter-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.select { position: relative; }
.select select {
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink);
  border: 1px solid var(--line); background: var(--paper); border-radius: 100px; padding: 9px 38px 9px 16px; cursor: pointer;
}
.select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.search { position: relative; }
.search input { font: inherit; font-size: 14px; border: 1px solid var(--line); border-radius: 100px; padding: 9px 16px 9px 38px; width: 200px; transition: width .5s var(--ease-out), border-color .3s; }
.search input:focus { outline: none; border-color: var(--navy); width: 240px; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-2); }
.view-toggle { display: flex; border: 1px solid var(--line); border-radius: 100px; padding: 3px; }
.view-toggle button { border: 0; background: none; width: 36px; height: 30px; border-radius: 100px; display: grid; place-items: center; color: var(--ink-2); transition: background .3s, color .3s; }
.view-toggle button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.reset { background: none; border: 0; font-size: 14px; color: var(--accent); font-weight: 600; padding: 6px 4px; }
@media (max-width: 760px) { .filters { position: static; } .search input, .search input:focus { width: 100%; } .search { flex: 1 1 100%; } .filter-tools { width: 100%; } }

.results-bar { display: flex; justify-content: space-between; align-items: baseline; padding: 48px 0 28px; gap: 16px; flex-wrap: wrap; }
.results-bar .n { font-family: var(--serif); font-style: normal; font-size: 28px; }
.results-bar small { color: var(--ink-2); font-size: 14px; }
.empty { display: none; text-align: center; padding: 80px 0; color: var(--ink-2); }
.empty.show { display: block; }
.empty .serif { font-size: 36px; color: var(--ink); display: block; margin-bottom: 8px; }

/* List view */
.deal-table { width: 100%; border-collapse: collapse; display: none; }
.view-list .deal-table { display: table; }
.view-list .tombs { display: none; }
.deal-table th { text-align: left; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--ink); }
.deal-table td { padding: 22px 16px 22px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; }
.deal-table tr { transition: background .3s; }
.deal-table tbody tr:hover { background: var(--paper-2); }
.deal-table td.yr { font-family: var(--serif); font-style: normal; font-size: 19px; width: 90px; }
.deal-table td.co { font-weight: 600; color: var(--navy); }
.deal-table td.verb { color: var(--ink-2); font-style: normal; font-family: var(--serif); font-size: 17px; }
.deal-table .pill { font-size: 12px; font-weight: 600; letter-spacing: .06em; padding: 4px 10px; border-radius: 100px; background: var(--accent-soft); color: var(--navy); white-space: nowrap; }
.deal-table tr.is-hidden { display: none; }
@media (max-width: 760px) {
  .deal-table thead { display: none; }
  .deal-table tr { display: grid; grid-template-columns: 60px 1fr; gap: 2px 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .deal-table td { border: 0; padding: 0; }
  .deal-table td.yr { grid-row: span 4; }
  .deal-table tr.is-hidden { display: none; }
}

.sample-note { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-2); }
.sample-note::before { content: ""; width: 16px; height: 16px; border: 1px dashed #c9d0d8; }

/* ---------- News & Insights page ---------- */
/* Read more: label + circle; on hover the arrow exits right while a second slides in from the left */
.read { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.read .ra { position: relative; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; border: 1px solid currentColor; overflow: hidden; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s; }
.read .ra svg { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; transform: translate(-50%, -50%); transition: transform .5s var(--ease-out); }
.read .ra svg + svg { transform: translate(-260%, -50%); }
a:hover .read .ra, .read:hover .ra { background-color: var(--navy); border-color: var(--navy); color: #fff; }
a:hover .read .ra svg, .read:hover .ra svg { transform: translate(160%, -50%); }
a:hover .read .ra svg + svg, .read:hover .ra svg + svg { transform: translate(-50%, -50%); }

.nmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.nmeta .cat { color: var(--accent); }
.nmeta .dash { color: var(--placeholder-ink); font-weight: 400; }

/* Featured slider, overlapping the bottom of the hero */
.page-hero.overlap { padding-bottom: 230px; }
.feat-wrap { position: relative; z-index: 2; margin-top: -170px; }
.feat { background: var(--paper); border-radius: 28px 0 0 0; box-shadow: 0 40px 80px -50px rgba(8,31,54,.6); overflow: hidden; }
.feat-slides { display: grid; }
.feat-slide { grid-area: 1 / 1; display: grid; grid-template-columns: 1.35fr 1fr; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.feat-slide.on { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }
.feat-copy { padding: 56px 56px 48px; display: flex; flex-direction: column; min-height: 400px; }
.feat-copy > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .9s var(--ease-out); }
.feat-slide.on .feat-copy > * { opacity: 1; transform: none; }
.feat-slide.on .feat-copy > *:nth-child(2) { transition-delay: .08s; }
.feat-slide.on .feat-copy > *:nth-child(3) { transition-delay: .16s; }
.feat-slide.on .feat-copy > *:nth-child(4) { transition-delay: .24s; }
.feat-copy h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.1; margin: 24px 0 18px; max-width: 20ch; }
.feat-sum { color: var(--ink-2); max-width: 52ch; margin: 0 0 32px; }
.feat-link { margin-top: auto; align-self: flex-start; }
.feat-art { background: var(--paper-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 40px 32px; border-left: 1px solid var(--line); }
.feat-art .mark { height: 96px; width: 100%; }
.feat-art .mark img { max-height: 70px; max-width: 70%; filter: none; opacity: 1; }
.feat-art .mark img.mono { filter: brightness(0); opacity: .85; }
.feat-art .verb { font-family: var(--serif); font-style: normal; font-size: 18px; color: var(--ink-2); }
.feat-bar { display: flex; align-items: center; gap: 28px; padding: 18px 56px; border-top: 1px solid var(--line); }
.feat-count { font-family: var(--serif); font-size: 18px; color: var(--ink-2); white-space: nowrap; }
.feat-count b { font-weight: 400; color: var(--navy); }
.feat-dots { display: flex; gap: 10px; flex: 1; }
.feat-dot { flex: 1; max-width: 140px; height: 16px; background: none; border: 0; padding: 0; position: relative; cursor: pointer; }
.feat-dot::before, .feat-dot i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--line); }
.feat-dot i { background: var(--navy); transform: scaleX(0); transform-origin: left; }
.feat-dot.done i { transform: scaleX(1); }
.feat-dot.on i { animation: feat-fill 7s linear forwards; }
.feat.paused .feat-dot.on i { animation-play-state: paused; }
.feat.no-auto .feat-dot.on i { animation: none; transform: scaleX(1); }
@keyframes feat-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.feat-bar .car-btns button { width: 46px; height: 46px; }
@media (max-width: 900px) {
  .feat-slide { grid-template-columns: 1fr; }
  .feat-art { order: -1; flex-direction: row; gap: 18px; padding: 24px; border-left: 0; border-bottom: 1px solid var(--line); }
  .feat-art .mark { height: 60px; }
  .feat-art .mark img { max-height: 44px; max-width: 100%; }
  .feat-art .verb { display: none; }
  .feat-copy { padding: 32px 24px; min-height: 0; }
  .feat-bar { padding: 16px 24px; gap: 16px; }
}
@media (max-width: 560px) { .feat-count { display: none; } .feat-wrap .wrap { padding: 0; } .feat { border-radius: 20px 0 0 0; } }

/* Latest news grid */
.news-head { display: flex; justify-content: space-between; align-items: end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 44px; }
.news-head h2 { font-size: clamp(32px, 3.4vw, 48px); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ncard {
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); overflow: hidden; min-height: 420px;
  animation: ncard-in .7s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 55ms); /* backwards, not both: a held end state would block the hover lift */
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-radius .6s var(--ease-out);
}
@keyframes ncard-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.ncard:hover, .ncard:focus-visible { transform: translateY(-6px); border-radius: 32px 0 0 0; box-shadow: 0 30px 50px -30px rgba(11,46,79,.45); }.ncard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ncard .post-logos { height: 150px; background: var(--paper-2); }
.ncard:hover .mark img { filter: none; opacity: 1; }
.ncard:hover .mark img.mono { filter: brightness(0); opacity: .92; }
.n-art { height: 150px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); }
.n-art span { font-family: var(--serif); font-style: normal; font-size: 38px; opacity: .92; }
/* Firm news posts: the Layer 7 logo in the same light image area the deal cards use for buyer / seller logos */
.post-logos.n-firm { display: flex; justify-content: center; }
/* Same treatment as the deal logos (.mark img): greyed until the card is hovered */
.n-firm img { height: 40px; width: auto; display: block; filter: grayscale(1); opacity: .78; transition: filter .5s var(--ease), opacity .5s var(--ease); }
.ncard:hover .n-firm img { filter: none; opacity: 1; }
.ncard.sample .n-art { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.05) 14px 15px), var(--placeholder-dark); }
.ncard-body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; }
.ncard h3 { font-size: 20px; font-weight: 400; line-height: 1.35; letter-spacing: -.01em; margin: 14px 0 28px; }
.ncard .read { margin-top: auto; }
.news-more { display: flex; justify-content: center; margin-top: 56px; }
.news-more[hidden], [data-news-empty][hidden] { display: none; }
@media (max-width: 1000px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; gap: 18px; } .ncard { min-height: 0; } }

/* ---------- Mockup badge ---------- */
.mock-badge { position: fixed; left: 16px; bottom: 16px; z-index: 50; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 100px; padding: 7px 14px 7px 12px; font-size: 12px; font-weight: 600; box-shadow: 0 8px 24px -12px rgba(0,0,0,.3); display: flex; gap: 8px; align-items: center; }
.mock-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ---------- Display headings ----------
   The headings that used to carry italic words are set whole-line in Inter Tight, the display cut of Inter:
   denser and more engineered than Figtree, so it contrasts without feeling decorative.
   (Class name kept as .garamond so the markup didn't need to change.)
   Selectors are doubled up (.x.garamond) so they outrank the per-section heading rules above. */
:root { --display-face: "Inter Tight", "Inter", Arial, Helvetica, sans-serif; }
.display.garamond, .lines.garamond, h1.garamond, h2.garamond {
  font-family: var(--display-face); font-weight: 400; letter-spacing: -.035em; line-height: 1.02;
}
.garamond em { font-family: inherit; }
/* Loading counter in the same face */
.curtain .count { font-family: var(--display-face); font-weight: 300; letter-spacing: -.05em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}