/* ═══════════════════════════════════════════════════════════
   Meridian Capital — BELOW-THE-FOLD CSS.
   Loaded non-blocking (see the media="print" swap in the page head).
   Above-the-fold rules — tokens, reset, header, nav, mega menu, type,
   CTA system, scroll bar, hero, page hero, inner-page base — are in
   critical.css and inlined at build time. Edit them there.
   ═══════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------------
   A note on --vh, which every vertical measurement on this site is written
   against: `min-height: calc(var(--vh) * 100)`, never `100vh`.

   `vh` is not a constant on a phone. A mobile browser hides its toolbar when
   you scroll down and shows it again when you scroll up, so it changes size
   on every change of scroll direction — Safari moves innerHeight, Chrome for
   iOS moves the layout viewport, which takes `vh` and every fixed element
   with it. With raw vh that flick re-computes the hero, the showcase pin
   track and a couple of dozen section paddings at once: the page grows or
   shrinks by several hundred pixels and the paragraph you were reading slides
   out from under your thumb.

   --vh is a frozen snapshot instead. critical.css seeds it with 1vh so the
   first paint and the no-JS case are exactly what they always were; main.js
   then pins it to a pixel value and re-writes it only for a viewport change
   the reader actually made — a rotation, a desktop window drag. Browser
   chrome no longer reaches the layout.
   --------------------------------------------------------------------- */


/* ============ TEXT BLOCK ============ */
.textblock {
  padding: var(--section-y) var(--pad-x);
  display: grid;
  gap: 40px;
}
/* vertical accent rail marking the chapter-divider statement */
.textblock .statement {
  margin-top: 8px;
  position: relative;
  padding-left: clamp(20px, 2.4vw, 34px);
}
.textblock .statement::before {
  content: "";
  position: absolute;
  left: 0; top: 0.10em; bottom: 0.14em;
  width: 6px;
  background: var(--accent);
}
.textblock-body {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 80px;
  align-items: start;
  justify-content: space-between;
}

/* ============ STATS ============
   Three columns read as columns: vertical hairlines divide them, and each
   figure arrives on its own with a stagger rather than the whole strip
   appearing at once. */
.stats { padding: var(--section-y) var(--pad-x); }
.stats-grid {
  display: grid;
  /* minmax(0, 1fr), not 1fr. A bare `1fr` is `minmax(auto, 1fr)`, and `auto`
     floors each track at its min-content width — so a figure that cannot wrap
     ("€4–75m") plus the 30px right padding pushed one track to 192px inside a
     335px grid, and the row spilled 7px past the viewport on a 375px phone. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: clamp(30px, calc(var(--vh) * 5), 56px);
}
.stat {
  position: relative;
  padding: 32px 30px 4px 0;
  border-top: 1px solid var(--hair);
}
/* vertical rules between the three columns */
.stat:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--hair);
  padding-left: clamp(20px, 2.6vw, 40px);
}
/* accent tick riding the hairline above each figure, drawn on arrival */
.stat::after {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: 54px; height: 4px;
  background: var(--accent);
}
.stat:not(:nth-child(3n + 1))::after { left: clamp(20px, 2.6vw, 40px); }
/* only the animated path starts it at zero, so no JS still means a tick */
.stats-anim .stat::after {
  width: 0;
  transition: width .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
}
.stats-anim .stat.in::after { width: 54px; }

/* the staggered arrival is gated on .stats-anim, which main.js adds — so if
   the script never runs the figures are simply there rather than invisible */
.stats-anim .stat {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease var(--d, 0ms),
              transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
}
.stats-anim .stat.in { opacity: 1; transform: none; }
.stat:nth-child(1) { --d: 0ms; }
.stat:nth-child(2) { --d: 110ms; }
.stat:nth-child(3) { --d: 220ms; }
.stat:nth-child(4) { --d: 60ms; }
.stat:nth-child(5) { --d: 170ms; }
.stat:nth-child(6) { --d: 280ms; }

.stat-num {
  display: block;
  font-size: clamp(40px, 5.4vw, 80px);
  font-weight: 500;
  line-height: 0.98;
  white-space: nowrap;   /* a figure must never break across lines */
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.stat-cap {
  display: block;
  margin-top: 14px;
  font-size: 16px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .stats-anim .stat { opacity: 1; transform: none; }
  .stats-anim .stat::after { transition: none; width: 54px; }
}

/* =======================================================
   SHOWCASE — four strategy cards dealt up from below and stacked
   in front of the reader. Background stays empty; the scroll
   position is written to each card as a transform by main.js.
   ======================================================= */
/* Native scroll pin (was a GSAP ScrollTrigger). The track is one viewport for
   the sticky pane plus --pin-run, the scroll budget the cards need; main.js
   writes --pin-run from the same slot() maths that used to feed ScrollTrigger.
   The fallback matters: if the script never runs, --pin-run is 0, the track
   collapses to a single viewport and the section still shows its first card
   rather than a tall empty gap. */
.showcase {
  position: relative;
  height: calc(calc(var(--vh) * 100) + var(--pin-run, 0px));
}
.showcase-pin {
  height: calc(var(--vh) * 100);
  position: sticky;
  top: 0;
  overflow: hidden;
}
.stack {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: clamp(48px, calc(var(--vh) * 7), 80px);
  /* room above for the buried cards' tabs to peek out */
  top: clamp(150px, calc(var(--vh) * 22), 210px);
}
.scard {
  position: absolute;
  inset: 0;
  border: 1px solid var(--hair);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  /* start below the fold; main.js overwrites this every scroll tick */
  transform: translateY(118%);
  transform-origin: top center;
  will-change: transform;
  backface-visibility: hidden;
}
/* receding veil — deepens as later cards land in front */
.scard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--dim, 0);
  pointer-events: none;
  z-index: 6;
  transition: opacity .2s linear;
}

/* ---- the tab: number + label, the only part visible once buried ---- */
.scard-tab {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px clamp(20px, 3vw, 40px);
  border-bottom: 1px solid var(--hair);
}
.scard-num {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.scard-num i { font-style: normal; margin: 0 3px; color: var(--accent); }
.scard-label {
  font-size: 13.7px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
/* accent rule that fills the tab as its card comes forward */
.scard-tab::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: calc(var(--fill, 0) * 100%);
  height: 2px;
  background: var(--accent);
}

.scard-body {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: 0;
}
.scard-main {
  align-self: center;
  display: grid;
  gap: clamp(16px, calc(var(--vh) * 2), 26px);
  align-content: center;
  padding: clamp(24px, 3.4vw, 52px);
  max-width: 46ch;
}
.scard-title {
  font-size: clamp(34px, 4.4vw, 66px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.035em;
}
.scard-copy { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5; color: var(--muted); max-width: 40ch; }
.scard-media {
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.04);
  min-height: 0;
}
.scard-bleed {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(1.05);
  opacity: .30;
}
.scard-cta { justify-self: start; }
/* the lit accent on the dark cards; the deep red disappears against them */
.scard--dl .scard-cta::before,
.scard--ff .scard-cta::before { background: var(--accent-hot); }
/* the deep red is 1.9:1 on these grounds — the separator is text, so it needs the lit one */
.scard--dl .scard-num i,
.scard--ff .scard-num i { color: var(--accent-hot); }

/* ---- 01 · Private Equity — light, portrait media on the right ---- */
.scard--pe { background: #ECEBE6; }
.scard--pe .scard-body { grid-template-columns: 1fr .82fr 36%; align-items: stretch; }
.scard--pe .scard-data {
  align-self: center;
  padding: clamp(20px, 2.6vw, 40px) clamp(24px, 3vw, 46px) clamp(20px, 2.6vw, 40px) 0;
}
.scard--pe .scard-media { border-left: 1px solid var(--hair); }

/* ---- 02 · Direct Lending — dark, portrait media on the left ---- */
.scard--dl { background: #17181B; color: #F2F1EE; border-color: rgba(255,255,255,.14); }
.scard--dl .scard-tab { border-bottom-color: rgba(255,255,255,.14); }
.scard--dl .scard-label { color: rgba(255,255,255,.55); }
.scard--dl .scard-copy { color: rgba(255,255,255,.62); }
.scard--dl .scard-body { grid-template-columns: 32% 1fr 30%; }
.scard--dl .scard-media { border-right: 1px solid rgba(255,255,255,.14); }
.scard--dl .scard-figures {
  align-self: center;
  display: grid;
  gap: clamp(14px, calc(var(--vh) * 2.4), 30px);
  padding: clamp(20px, 2.6vw, 40px) clamp(24px, 3vw, 44px) clamp(20px, 2.6vw, 40px) 0;
}
.fig-num {
  display: block;
  font-size: clamp(19px, 1.9vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.fig-cap {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.scard--dl .fig { border-top: 1px solid rgba(255,255,255,.14); padding-top: 12px; }

/* ---- 03 · Fund of Funds — warm paper, figure strip + media band below ---- */
.scard--fof { background: #F4F3EC; }
.scard--fof .scard-body { grid-template-rows: auto auto 1fr; }
.scard--fof .scard-main { max-width: 62ch; padding-bottom: clamp(14px, calc(var(--vh) * 1.8), 24px); }
.scard--fof .scard-title { max-width: 18ch; }
.scard--fof .scard-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
  padding: 0 clamp(24px, 3.4vw, 52px) clamp(20px, calc(var(--vh) * 2.6), 34px);
}
.scard--fof .fig { border-top: 1px solid var(--hair); padding-top: 12px; }
.scard--fof .fig-cap { color: var(--muted); }
.scard--fof .scard-media { border-top: 1px solid var(--hair); min-height: 0; }

/* ---- 04 · Fund Financing — near-black, media bled behind the type ---- */
.scard--ff { background: #0B0C0E; color: #F2F1EE; border-color: rgba(255,255,255,.16); }
.scard--ff .scard-tab { border-bottom-color: rgba(255,255,255,.16); }
.scard--ff .scard-label { color: rgba(255,255,255,.55); }
.scard--ff .scard-copy { color: rgba(255,255,255,.66); }
.scard--ff .scard-body { grid-template-columns: 1.15fr 380px; align-items: center; }
.scard--ff .scard-data { padding: clamp(20px, 2.6vw, 40px) clamp(24px, 3.4vw, 52px); }
.scard--ff .data-row { border-top-color: rgba(255,255,255,.18); }
.scard--ff .data-row span:first-child { color: rgba(255,255,255,.55); }

/* figures table — shared by the strategy cards and the inner pages */
.panel-data { width: 100%; }
.data-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--hair);
  font-size: 15px;
}
.data-row span:first-child { color: var(--muted); letter-spacing: 0.02em; }
.data-row span:last-child { font-weight: 500; }

/* the shared data table, tightened for use inside a card */
.scard-data .data-row:first-child { border-top: 0; }
.scard-data .data-row { padding: 14px 0; }

/* Fallback when the scroll pin is unavailable (no GSAP, or reduced motion):
   the stack unrolls into a plain list so all four cards stay readable. */
.showcase.stack-static { height: auto; }
.showcase.stack-static .showcase-pin { height: auto; overflow: visible; position: static; }
.showcase.stack-static .stack {
  position: static;
  display: grid;
  gap: clamp(20px, calc(var(--vh) * 3), 34px);
  padding: 0 var(--pad-x) var(--section-y);
}
.showcase.stack-static .scard {
  position: relative;
  inset: auto;
  height: min(calc(var(--vh) * 78), 640px);
  transform: none !important;
}
.showcase.stack-static .scard::after { display: none; }
.showcase.stack-static .scard-tab::after { width: 100%; }

/* =======================================================
   GLOBE — offices section. The globe plate sits behind the copy and is
   clipped at the hairline so only its upper dome shows.
   ======================================================= */
.globe-section {
  position: relative;
  padding: var(--section-y) var(--pad-x);
  display: grid;
  gap: clamp(30px, calc(var(--vh) * 5), 60px);
  overflow: hidden;
  /* the plate carries its own off-white ground; matching it here means the
     image edges disappear into the page */
  background: #F4F3EC;
}
.globe-section > * { position: relative; z-index: 1; }

/* full-bleed band: the globe sits behind, the hairline is the horizon it meets */
.globe-band {
  position: relative;
  margin: 0 calc(var(--pad-x) * -1);
  padding: 0 var(--pad-x);
  min-height: clamp(360px, calc(var(--vh) * 56), 640px);
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: flex-start;
}
.globe-head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 22px;
  max-width: clamp(300px, 40vw, 560px);
  padding-top: clamp(10px, calc(var(--vh) * 3), 40px);
}

/* the stage clips the plate at the hairline, so only the upper dome shows */
.globe-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Sized and offset in vw so the sphere's centre lands exactly on the hairline
   whatever the viewport: the plate is 736x920 with the globe centred at 49.5%
   of its height, so bottom = -(imgH - 0.495*imgH). */
.globe-img {
  position: absolute;
  right: -2vw;
  bottom: -21.5vw;          /* = -(1 - 0.495) x height, so the centre hits the line */
  width: 34vw;
  height: auto;
  display: block;
  user-select: none;
  /* the plate is a rectangle on its own soft ground — fade its edges out so only
     the sphere reads, with no visible image boundary */
  -webkit-mask-image: radial-gradient(circle at 50% 49.5%, #000 45%, rgba(0, 0, 0, 0) 61%);
  mask-image: radial-gradient(circle at 50% 49.5%, #000 45%, rgba(0, 0, 0, 0) 61%);
}

/* the fixed header is dark ink — flip it while a dark section sits behind it */
.header.on-dark .wordmark,
.header.on-dark .nav-link { color: #EDEFF2; }
.header.on-dark .nav-lang { color: #6E7681; }
.header.on-dark .nav-lang .active { color: #EDEFF2; }
.header .wordmark, .header .nav-link { transition: color .35s ease; }

.offices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 30px;
  border-top: 1px solid var(--hair);
  padding-top: 34px;
}
/* inside the globe section the band's own hairline is the rule */
.globe-section .offices { border-top: none; padding-top: 0; }
/* the inner pages list three offices, not eight */
body.inner .offices { grid-template-columns: repeat(3, 1fr); max-width: 900px; }
.office-city {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
}
.office-addr { display: block; margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.5; }


/* ============ TEAM CAROUSEL ============ */
.team {
  padding: var(--section-y) 0;
  display: grid;
  gap: 46px;
}
.team .eyebrow, .team .statement { padding: 0 var(--pad-x); }
.carousel {
  overflow: hidden;
  cursor: grab;
  padding-left: var(--pad-x);
}
.carousel.dragging { cursor: grabbing; }
.carousel-track {
  display: flex;
  gap: 20px;
  will-change: transform;
  padding-right: var(--pad-x);
}
.team-card {
  flex: 0 0 auto;
  width: clamp(220px, 22vw, 300px);
  user-select: none;
}
.team-card .card-img {
  width: 100%;
  aspect-ratio: 7 / 9;
  filter: grayscale(1) contrast(1.03);
  pointer-events: none;
}
.team-card .card-role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13.7px;
  color: var(--muted);
}
.team-card .card-name { display: block; margin-top: 4px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
/* accent drag-progress track under the carousel */
.carousel-progress {
  margin: 26px var(--pad-x) 0;
  height: 3px;
  background: var(--hair);
  position: relative;
}
.carousel-progress i {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 25%;
  background: var(--accent);
  will-change: left, width;
}
.carousel-hint {
  padding: 0 var(--pad-x);
  font-size: 13.7px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============ FOOTER ============ */
.footer {
  background: var(--surface);
  border-top: 6px solid var(--accent);
  padding: clamp(120px, calc(var(--vh) * 20), 240px) var(--pad-x) 46px;
  display: grid;
  gap: 46px;
}
/* filled accent CTA — the one loud button on the page */
.footer .text-cta.big { justify-self: start; }
.footer .text-cta.big:hover .dot { width: 34px; }
.footer-statement {
  font-size: clamp(40px, 7vw, 110px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  max-width: 16ch;
}
.footer-legal {
  border-top: 1px solid var(--hair);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  justify-content: space-between;
  align-items: center;
}
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.footer-legal a { font-size: 13.7px; color: var(--muted); transition: color .3s; }
.footer-legal a:hover { color: var(--ink); }
.compliance { font-size: 13.7px; color: var(--muted); }

/* =======================================================
   ACCENT BAND — one large full-bleed accent area per page
   ======================================================= */
.accent-band {
  position: relative;
  overflow: hidden;
  color: var(--on-accent);
  padding: clamp(96px, calc(var(--vh) * 17), 200px) var(--pad-x);
  /* Generated fluted-glass plate over a warm accent gradient. The gradient
     layers underneath are the fallback: if the image never arrives the section
     still reads as a finished dark-red-to-orange band.
     Swap plates by setting --band-plate, e.g. the ribbed-glass slab:
       .accent-band { --band-plate: url("assets/band-glass.jpg"); }
     The first layer is a scrim holding the left side down — the fluted field
     runs to near-white and the headline sits on it. */
  background-image:
    linear-gradient(90deg, rgba(30,3,7,.72) 0%, rgba(30,3,7,.58) 24%, rgba(30,3,7,.34) 42%, rgba(30,3,7,.10) 58%, rgba(30,3,7,0) 70%),
    var(--band-plate, url("assets/band-glass-alt.jpg")),
    radial-gradient(58% 120% at 80% 124%, #FFF2DC 0%, rgba(255,242,220,0) 46%),
    radial-gradient(66% 125% at 78% 118%, rgba(255,217,160,.95) 0%, rgba(240,132,47,.75) 26%, rgba(240,132,47,0) 62%),
    radial-gradient(72% 95% at 12% -18%, #2E0409 0%, rgba(46,4,9,0) 64%),
    linear-gradient(150deg, #43060C 0%, #7C1017 42%, #A81C1B 72%, #C4351F 100%);
  background-size: auto, cover, auto, auto, auto, auto;
  background-position: center, center, center, center, center, center;
  background-repeat: no-repeat;
  background-color: var(--accent);
}
/* The plate in AVIF: 405 KB of JPEG becomes 35 KB. Swapping the custom property
   rather than restating the six-layer stack keeps the two in sync, and browsers
   without image-set() simply never match this rule and keep the JPEG above. */
@supports (background-image: image-set(url("a.avif") type("image/avif"))) {
  .accent-band {
    --band-plate: image-set(url("assets/band-glass-alt.avif") type("image/avif"),
                            url("assets/band-glass-alt.jpg")  type("image/jpeg"));
  }
}

.band-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(18px, calc(var(--vh) * 3), 30px);
  justify-items: start;
}
.band-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 20px; letter-spacing: -0.01em;
  opacity: .75;
}
.accent-band .dot { background: var(--on-accent); }
.band-title {
  font-size: clamp(36px, 5.2vw, 76px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.04em;
  /* Keeps the headline inside the plate's calm left side. On one line at the old
     size it ran onto the near-white glass, where white type has no contrast at
     all and no scrim can fix it without killing the plate.
     In em, not ch: a ch here measures ~1.15em, so the old 18ch resolved wider
     than the band and never constrained anything. */
  max-width: min(7.4em, 48%);
}
/* on the glass plate the sweep has to be light, not accent-on-accent */
.band-cta { color: var(--on-accent); }
.band-cta::before { background: var(--on-accent); }
.band-cta::after { opacity: .38; }

/* the band already closes the page — drop the footer's accent edge */
.accent-band + .footer { border-top: none; }

/* ============ REVEALS ============ */


/* ---- generic inner section ---- */
.sec { padding: clamp(56px,calc(var(--vh) * 9),130px) var(--pad-x); }
.sec-head { display: grid; gap: 20px; margin-bottom: clamp(28px,calc(var(--vh) * 5),56px); }
.sec-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,4vw,70px); align-items: start; }
@media (max-width: 820px){ .sec-split { grid-template-columns: 1fr; } }

/* ---- card grid (strategies / portfolio) ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px,1fr)); gap: 26px; }
.card { display: block; }
.card .c-img {
  display: block;
  width: 100%; aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  filter: grayscale(1) contrast(1.03);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.card:hover .c-img { transform: scale(1.03); }
.card .c-title {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding-bottom: 7px;
  font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: #fff;
}
.card .c-title::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--accent);
  transition: right .45s cubic-bezier(.19,1,.22,1);
}
.card:hover .c-title::after { right: 0; }
.card .c-desc { display: block; margin-top: 8px; font-size: 15px; color: var(--light-on-dark); max-width: 42ch; }

/* ---- data / document rows ---- */
.rows { width: 100%; }
.row-item {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr auto; gap: 20px; align-items: center;
  padding: 22px 0; border-top: 1px solid rgba(255,255,255,.16); font-size: 15px;
  position: relative;
}
.row-item .r-name { font-weight: 500; color: #fff; display: inline-flex; align-items: center; gap: 10px; }
.row-item .r-meta { color: rgba(255,255,255,.55); }
.row-item .r-link { color: #fff; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
@media (max-width: 760px){ .row-item { grid-template-columns: 1fr 1fr; } }

/* ---- people grid ---- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px,1fr)); gap: 26px; }
.person .p-img {
  width: 100%; aspect-ratio: 7/9;
  filter: grayscale(1) contrast(1.03);
}
.person .p-img img, .team-card .card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.person .p-role { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.55); }
.person .p-name { display: block; margin-top: 4px; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: #fff; }

/* ---- timeline ---- */
.timeline { display: grid; }
.tl-item {
  display: grid; grid-template-columns: 150px 1fr; gap: 26px;
  padding: 26px 0; border-top: 1px solid rgba(255,255,255,.16); position: relative;
}
.tl-item::after { content: ""; position: absolute; top: -2px; left: 0; width: 54px; height: 4px; background: var(--accent); }
.tl-year { font-size: clamp(26px,3vw,40px); font-weight: 500; letter-spacing: -0.03em; color: #fff; }
.tl-text { font-size: 15px; color: var(--light-on-dark); max-width: 54ch; align-self: center; }
@media (max-width: 640px){ .tl-item { grid-template-columns: 1fr; gap: 10px; } }

/* ---- related links strip ---- */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px,1fr)); gap: 22px; }
.rel { border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px; position: relative; }
.rel::before { content: ""; position: absolute; top: -2px; left: 0; width: 42px; height: 3px; background: var(--accent); }
.rel a { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 500; color: #fff; letter-spacing: -0.02em; }

/* ---- feature image ---- */
.feature-img {
  width: 100%; aspect-ratio: 16/7;
  background-size: cover; background-position: center; filter: grayscale(1) contrast(1.03);
}

/* ---- contact form (mockup — does not submit) ---- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 780px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; color: rgba(255,255,255,.55); }
.field input, .field textarea {
  background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.24);
  color: #fff; font: inherit; font-size: 16px; padding: 12px 0;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.btn-accent { justify-self: start; color: var(--on-accent); }
.btn-accent .dot { background: var(--accent-hot); }
.btn-accent::before { background: var(--accent-hot); }
@media (max-width: 700px){ .form { grid-template-columns: 1fr; } .offices { grid-template-columns: 1fr; } }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .nav { display: none; }
  .hero-title { font-size: 22vw; margin-top: calc(var(--vh) * 26); }
  .hero-foot { grid-template-columns: 1fr; gap: 18px; }
  .scroll-hint { justify-self: start; }
  /* three columns is too narrow here — go full width, drop to two, lose the side rules */
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .stat:not(:nth-child(3n + 1)) { border-left: 0; padding-left: 0; }
  .stat:not(:nth-child(3n + 1))::after { left: 0; }
  .stat:not(:nth-child(2n + 1)) {
    border-left: 1px solid var(--hair);
    padding-left: 20px;
  }
  .stat:not(:nth-child(2n + 1))::after { left: 20px; }
  .offices { grid-template-columns: 1fr 1fr; gap: 26px 20px; }

  /* strategy stack: one column, media becomes a band, figures pair up */
  .stack { top: clamp(120px, calc(var(--vh) * 17), 170px); bottom: clamp(28px, calc(var(--vh) * 4), 48px); }
  .scard-tab { gap: 12px; padding: 15px 20px; }
  .scard-main { padding: 22px 20px; gap: 14px; max-width: none; }
  .scard-title { font-size: clamp(28px, 8vw, 40px); }
  .scard-copy { font-size: 14.5px; max-width: none; }
  .scard--pe .scard-body,
  .scard--dl .scard-body,
  .scard--ff .scard-body { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .scard--dl .scard-body { grid-template-areas: "main" "figs" "media"; }
  .scard--dl .scard-main { grid-area: main; }
  .scard--dl .scard-figures { grid-area: figs; grid-template-columns: 1fr 1fr; padding: 0 20px 18px; }
  .scard--dl .scard-media { grid-area: media; border-right: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .scard--pe .scard-data { padding: 0 20px 18px; }
  .scard--pe .scard-media { border-left: 0; border-top: 1px solid var(--hair); }
  .scard--fof .scard-strip { grid-template-columns: 1fr 1fr; padding: 0 20px 18px; }
  .scard--ff .scard-data { padding: 0 20px 20px; }
  .fig-num { font-size: 18px; }
}