/* Self-hosted variable fonts (Google Fonts, OFL). Cyrillic + Latin.
   Inlined here (was css/fonts.css) on 2026-07-02 to kill the @import chain:
   the browser now discovers the font files one round-trip earlier. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../assets/fonts/sourceserif4-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../assets/fonts/sourceserif4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../assets/fonts/sourceserif4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks.
   Measured in-browser against the exact fonts each src below resolves to, which matters:
   measuring Inter against the generic stack gave 109.3% and overshot, because the face
   actually resolves to Helvetica Neue, not to whatever the generic stack picks. Against
   Helvetica Neue it is 105.4%, and Source Serif 4 is 91.6% of Georgia. font-display:swap means
   the first paint uses the fallback and then swaps, so that width difference changes
   where lines wrap - which is what moved the hero stats and was the only meaningful
   layout shift on the page. Scaling the fallback to the same width removes the reflow
   without delaying text.

   Only size-adjust is set. The vertical metrics already agree - both families produce
   the same 165px line box as their fallback at 100px - so ascent/descent overrides are
   not needed here, and setting them by eye made the English homepage's shift five times
   worse before they were removed. Re-measure both numbers if either family is ever
   replaced; a stale value is worse than none. */
@font-face {
  font-family: 'Inter fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Roboto'), local('Segoe UI');
  size-adjust: 105.4%;
}
@font-face {
  font-family: 'Source Serif 4 fallback';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 91.6%;
}

/* =========================================================================
   Gardiner Resources — design system
   Restrained capital-markets editorial. Light palette, navy primary,
   serif display (Source Serif 4) + grotesque body (Inter).
   Content is visible by default; motion is progressive enhancement only.
   ========================================================================= */

:root {
  /* palette */
  --white:       #ffffff;
  --paper:       #f8fafb;   /* alt section background */
  --tint:        #eef3f7;   /* whisper blue */
  --ink:         #14223d;   /* deep navy — brand dark / display */
  --ink-700:     #1e3354;
  /* BRAND (from the official GR logo): sky-blue #0E8FD3 + grey #859091, on white.
     --sky is the brand blue itself: use for rules, marks and anything large or
     decorative. --blue is that same hue darkened to clear 4.5:1 on white, so all
     small text and links use it instead. --brand-grey is logo-only (3.3:1). */
  --sky:         #0E8FD3;   /* brand sky-blue — decorative / large only */
  --sky-soft:    #7DC4EC;   /* lifted, for navy / on-dark backgrounds */
  --blue:        #0A6DA4;   /* AA-safe text accent — links, roles, eyebrows (5.6:1) */
  --blue-600:    #085A88;
  --brand-grey:  #859091;   /* logo wordmark grey — not for body copy */
  --text:        #1c2430;   /* near-black headings/body strong */
  --body:        #49545f;   /* body copy */
  --muted:       #5d666e;   /* captions, meta (AA on paper/tint) */
  --line:        #e4e8ec;   /* decorative hairlines */
  --line-2:      #cfd6dc;   /* decorative stronger hairlines */
  --control:     #6b747d;   /* interactive control borders (>=3:1 on white) */
  --on-dark:     #e9eef5;   /* text on navy */
  --on-dark-mut: #97a6bc;

  /* type */
  --serif: 'Source Serif 4', 'Source Serif 4 fallback', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', 'Inter fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* radius (one small scale) */
  --r-sm: 3px;   /* buttons, inputs, chips */
  --r-md: 6px;   /* cards, tiles */
  --r-lg: 10px;  /* large panels */

  /* layout */
  --maxw: 1200px;
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --sec-y: clamp(4rem, 8vw, 7rem);

  /* shadow (tinted, never pure black) */
  --shadow-sm: 0 1px 2px rgba(20,34,61,.06), 0 1px 1px rgba(20,34,61,.04);
  --shadow-md: 0 6px 24px rgba(20,34,61,.08);
  --shadow-lg: 0 18px 50px rgba(20,34,61,.12);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Mobile browsers paint a translucent blue-grey box over whatever you tap. On the
   logo, which is a link wrapping a wide image, that box covers the whole lockup and
   reads as a stray blue panel flashing in the header. Suppressed here and replaced
   with feedback we control, so a tap still acknowledges itself. */
a, button, [role="button"], summary, label { -webkit-tap-highlight-color: transparent; }
.nav__logo { display: inline-flex; transition: opacity .15s ease; }
.nav__logo:active { opacity: .6; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
/* --blue only reaches 2.82:1 on navy, so dark surfaces get the lifted brand blue */
.hero :focus-visible,
.section--ink :focus-visible,
.image-band :focus-visible,
.site-footer :focus-visible { outline-color: var(--sky-soft); }

/* ---------- typography ---------- */
h1, h2, h3 { font-family: var(--serif); color: var(--text); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.35rem, 5vw, 3.85rem); line-height: 1.06; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.65rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.2; }
.h-sans { font-family: var(--sans); letter-spacing: -0.015em; }

p { max-width: 68ch; }
strong { color: var(--text); font-weight: 600; }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--body); }
.eyebrow {
  font-family: var(--sans); font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .15em; color: var(--blue);
  margin-bottom: 1.1rem;
}
.muted { color: var(--muted); }

/* ---------- layout primitives ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec-y); }
.section--paper { background: var(--paper); }
.section--tint { background: var(--tint); }
.section--ink { background: var(--ink); color: var(--on-dark); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.section--ink p { color: var(--on-dark-mut); }

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head p { margin-top: .9rem; color: var(--body); }
/* .section-head p outranks .eyebrow, which was silently repainting every eyebrow
   body-grey and adding a stray top margin above the first line of a section. */
.section-head p.eyebrow { color: var(--blue); margin-top: 0; }

/* Split header: title left, lede right. A page title alone leaves the whole
   right half of the band empty, which reads as unfinished on wide screens. */
.section-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 4.5rem);
  align-items: end;
}
.section-head--split > :first-child { max-width: 22ch; }
.section-head--split > p { margin-top: 0; padding-bottom: .35rem; max-width: 40ch; }
@media (max-width: 860px) {
  .section-head--split { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
  .section-head--split > :first-child { max-width: none; }
  .section-head--split > p { padding-bottom: 0; }
}

.divider { height: 1px; background: var(--line); border: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sans); font-weight: 600; font-size: .975rem;
  padding: .8rem 1.4rem; border-radius: var(--r-sm); border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, transform .12s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--ink-700); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--on-dark { background: #fff; color: var(--ink); }
.btn--on-dark:hover { background: var(--tint); }
.btn--lg { padding: .95rem 1.7rem; font-size: 1.0625rem; }

.textlink {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--blue);
  border-bottom: 1px solid transparent; transition: border-color .2s, gap .2s;
}
.textlink:hover { border-color: currentColor; gap: .6rem; }
.textlink .arrow { transition: transform .2s; }
.textlink:hover .arrow { transform: translateX(2px); }

/* =========================================================================
   Header / navigation
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* A blurred backdrop on a sticky element forces the compositor to re-blur the
     region behind it on every scroll frame, which was the main source of scroll
     jank. A near-opaque background looks all but identical and costs nothing. */
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
  will-change: transform;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 70px;
}
/* Two-line wordmark, so it needs a little more height than a single-line lockup */
.nav__logo img, .nav__logo svg { height: 34px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav__links a {
  position: relative;
  font-size: .95rem; font-weight: 500; color: var(--text); letter-spacing: -.01em;
  padding-block: .4rem; transition: color .2s ease;
}
/* underline draws from the left instead of snapping on */
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .24s cubic-bezier(.16,1,.3,1);
}
.nav__links a:hover { color: var(--blue); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; gap: 1rem; }

/* Language switch. Deliberately quiet: it is wayfinding, not a call to action, so it
   reads as a pair of small labels rather than another button competing with the CTA.
   It stays visible at every width - the CTA button is hidden under 860px but someone
   who cannot read the page needs the switch most on a phone, not least. */
.lang { display: flex; align-items: center; gap: .18rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; }
.lang__on, .lang__off { display: inline-block; padding: .5rem .25rem; line-height: 1; }
.lang__on  { color: var(--ink); }
.lang__sep { color: var(--line-2); font-weight: 400; }
.lang__off { color: var(--muted); transition: color .2s ease; }
.lang__off:hover { color: var(--blue); }
@media (max-width: 860px) {
  /* the CTA drops out here, so the switch needs a real tap target of its own */
  .lang { margin-right: .25rem; }
  .lang__on, .lang__off { padding: .7rem .4rem; }
}
.nav__toggle { display: none; background: none; border: 0; padding: .4rem; }
.nav__toggle svg { width: 26px; height: 26px; stroke: var(--ink); }

@media (max-width: 860px) {
  .nav__cta .btn { display: none; }
  .nav__toggle { display: inline-flex; }
  /* The panel is sized by its content and ends on the last row, so there is no dead
     strip under the final item. Separators sit between rows only, never after the last
     one, which is what made the old panel look like it had lost something. */
  .nav__links {
    position: fixed; inset: 70px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: #fff; border-bottom: 1px solid var(--line-2);
    padding: .25rem var(--gut) .25rem;
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, transform .2s, visibility 0s linear .2s;
  }
  .nav__links.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s, transform .2s, visibility 0s; }
  .nav__links li { width: 100%; border-bottom: 1px solid var(--line); }
  .nav__links li:last-child { border-bottom: 0; }
  /* A generous row: the whole width is the tap target, and the active page carries a
     brand rule on the leading edge instead of relying on colour alone. */
  .nav__links a {
    display: flex; align-items: center; width: 100%;
    min-height: 56px; padding: .35rem 0 .35rem .9rem;
    font-size: 1.05rem; font-weight: 500;
    border-left: 2px solid transparent; border-bottom: 0;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  }
  .nav__links a:active { background: var(--paper); }
  .nav__links a[aria-current="page"] { border-left-color: var(--sky); background: var(--paper); }
  /* the desktop underline-draw would run the full row width in the dropdown */
  .nav__links a::after { display: none; }
  .nav__links a[aria-current="page"] { color: var(--blue); }
  /* Freeze the page behind the open dropdown so the background can't scroll. */
  body.nav-open { overflow: hidden; }
}

/* =========================================================================
   Hero — asymmetric split (copy + proof column)
   ========================================================================= */
/* Full-bleed Moscow-City image hero with navy scrim */
.hero { position: relative; isolation: isolate; background: var(--ink); color: #fff; overflow: hidden; }
/* `cover` on a tall narrow box crops hard: a 390px phone only ever sees the middle
   third of the 1800px original, so two thirds of a 176 KB download is decoded and
   thrown away. Narrow viewports get a centre crop instead - same pixels on screen,
   same sharpness, 50 KB less over the wire. The 600px switch is where the full frame
   starts winning on detail again. Keep this breakpoint and the preload `media` in
   index.html in step; if they disagree the browser fetches both. */
.hero__bg { position: absolute; inset: 0; z-index: -2; background: url('/assets/hero-moscow-city-narrow.webp') center 28%/cover no-repeat; }
@media (min-width: 601px) {
  .hero__bg { background-image: url('/assets/hero-moscow-city.webp'); }
}
.hero__scrim { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(13,22,38,.95) 0%, rgba(13,22,38,.80) 40%, rgba(13,22,38,.36) 100%),
    linear-gradient(0deg, rgba(13,22,38,.82) 0%, rgba(13,22,38,0) 44%); }
/* padding-block only: the `padding: X 0` shorthand used to cancel .container's
   inline gutter, which left every line of hero copy flush against the edge. */
.hero__inner { display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(540px, 80vh, 800px); padding-block: clamp(3rem, 7vh, 5.5rem); }
.hero__loc { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.74); margin-bottom: 1.3rem; }
.hero h1 { color: #fff; margin-bottom: 1.5rem; max-width: 18ch; }
.hero__sub { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; color: rgba(255,255,255,.88); max-width: 46ch; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero .textlink { color: #fff; }
.hero .textlink:hover { border-color: rgba(255,255,255,.8); }
.hero__stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.22); }
.stat__n { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 600; color: #fff; line-height: 1; letter-spacing: -.02em; }
/* Two lines are reserved because the hero is a centred flex column: if a label rewraps
   from one line to two when the webfont swaps in, the stats row grows and every line of
   hero copy above it slides up. Measured across 320-1920px in both languages, no label
   ever needs more than two, and reserving them also bottom-aligns the three stats.
   3.3em is exactly two lines at the inherited 1.65 line-height, in em so it follows the
   smaller font-size used under 600px. */
.stat__l { font-size: .85rem; color: rgba(255,255,255,.68); margin-top: .45rem; max-width: 22ch; min-height: 3.3em; }
@media (max-width: 600px) { .hero__stats { gap: 1.25rem 2rem; } .stat__l { font-size: .8rem; } }

/* =========================================================================
   Business lines — 2-col split
   ========================================================================= */
.lines { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
.line h3 { margin-bottom: .85rem; }
.line p { color: var(--body); }
.line__tag { display: inline-block; margin-top: 1.1rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) { .lines { grid-template-columns: 1fr; gap: 2.5rem; } }

/* =========================================================================
   Principles — 3 columns, hairline separated (no card boxes)
   ========================================================================= */
/* auto-fit so the row stays balanced whatever the principle count (now two) */
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0; }
.principle { padding: 0 clamp(1.25rem, 2.5vw, 2.25rem); border-left: 1px solid var(--line); }
.principle:first-child { padding-left: 0; border-left: 0; }
.principle__rule { width: 30px; height: 2px; background: var(--sky); margin-bottom: 1.35rem; }
.principle h3 { font-family: var(--sans); font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; color: var(--text); margin-bottom: .7rem; }
.principle p { font-size: .975rem; color: var(--body); }
@media (max-width: 760px) {
  .principles { grid-template-columns: 1fr; gap: 2rem; }
  .principle { padding: 0 0 2rem; border-left: 0; border-bottom: 1px solid var(--line); }
  .principle:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* =========================================================================
   Team grid
   ========================================================================= */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); }
.member { }
/* matches the portraits' own backdrop, so the box never flashes a different
   colour while the image is still decoding */
.member__photo { aspect-ratio: 5 / 6; background: #778898; border-radius: var(--r-md); overflow: hidden; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member__name { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--text); margin-top: 1rem; }
.member__role { font-size: .9rem; color: var(--blue); margin-top: .25rem; font-weight: 500; }
.member__bio { font-size: .95rem; color: var(--body); margin-top: .75rem; }
.member__bio p + p { margin-top: .6rem; }
@media (max-width: 820px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-grid { grid-template-columns: 1fr; } }


/* Homepage team preview — text-first roster; full portraits live on /team.html */
.team-roster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem 1.25rem; }
.team-roster .member {
  padding-top: 1rem; border-top: 1px solid var(--line-2);
  transition: border-color .22s ease, transform .22s ease;
}
.team-roster .member .member__name { transition: color .22s ease; }
.team-roster .member:hover { border-top-color: var(--sky); transform: translateY(-2px); }
.team-roster .member:hover .member__name { color: var(--blue); }
.team-roster .member:focus-visible { border-top-color: var(--sky); }
.team-roster .member__name { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; color: var(--text); margin-top: 0; }
.team-roster .member__role { font-size: .85rem; color: var(--blue); margin-top: .2rem; font-weight: 500; }
@media (max-width: 640px) { .team-roster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .team-roster { grid-template-columns: 1fr; } }

/* =========================================================================
   Tombstone wall
   ========================================================================= */
.deal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.6vw, 1.4rem); }
.deal {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.4rem 1.4rem 1.25rem; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.deal:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* min-height matches the logo box, so the year row is the same height whether or
   not a card has a counterparty mark and every value line in a row shares a baseline */
.deal__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 42px; margin-bottom: 1.1rem; }
.deal__meta { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Counterparty marks: one fixed box for every card so logos read at a single
   size regardless of their native aspect, and always in full colour. */
.deal__logo { height: 42px; width: 132px; flex: none; display: flex; align-items: center; justify-content: flex-end; }
.deal__logo img { max-height: 42px; max-width: 132px; width: auto; object-fit: contain; object-position: right center; }
/* Where no counterparty mark exists (or the party is not disclosed), the slot
   carries a quiet typographic label instead, so no card has an empty corner. */
.deal__party {
  flex: none; width: 132px; text-align: right;
  font-size: .72rem; font-weight: 500; line-height: 1.3;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
/* One fixed value row, so the role/description lines below start on the same
   baseline across a row whether the figure is disclosed or not. */
.deal__value {
  font-family: var(--serif); font-size: 1.55rem; font-weight: 600; color: var(--ink);
  line-height: 1.1; letter-spacing: -.01em;
  min-height: 1.7rem; display: flex; align-items: baseline;
}
.deal__value.is-undisclosed { font-size: 1.02rem; color: var(--muted); font-family: var(--sans); font-weight: 500; align-items: center; }
.deal__role { font-size: .82rem; color: var(--blue); font-weight: 600; margin-top: .5rem; }
.deal__desc { font-size: .92rem; color: var(--body); margin-top: .85rem; line-height: 1.5; }
.deal__foot { margin-top: auto; padding-top: 1rem; }
.deal__sector { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }


@media (max-width: 880px) { .deal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .deal-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   Contact band + form
   ========================================================================= */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band p { margin: 1rem auto 2rem; color: var(--on-dark-mut); }

.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-info dl { display: grid; gap: 1.5rem; }
.contact-info dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .35rem; }
.contact-info dd { font-size: 1.05rem; color: var(--text); }
.contact-info a:hover { color: var(--blue); }
/* Contact details are much shorter than the form beside them, which left the
   bottom of the left column blank; the office photo now anchors that column. */
.contact-photo {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--tint);
}
.contact-photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.contact-photo figcaption {
  font-size: .8rem; color: var(--muted);
  padding: .75rem .1rem 0;
}
@media (max-width: 760px) { .contact-photo { margin-top: 1.75rem; } }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .85rem; font-weight: 600; color: var(--text); }
.field input, .field textarea {
  font: inherit; font-size: 1rem; color: var(--text); background: #fff;
  border: 1px solid var(--control); border-radius: var(--r-sm); padding: .8rem .9rem; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color: #677079; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(44,95,138,.13); }
/* That `outline: none` beat the global :focus-visible rule, so a keyboard user
   landing on a field saw only a border tint and a 13%-alpha ring. Pointer focus
   keeps the soft ring on its own; keyboard focus gets a real indicator back. */
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.field textarea { min-height: 130px; resize: vertical; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form__note { font-size: .85rem; color: var(--muted); }
.form__status { font-size: .95rem; padding: .8rem 1rem; border-radius: var(--r-sm); display: none; }
.form__status.is-ok { display: block; background: #eaf3ec; color: #1f6b39; border: 1px solid #bcdcc4; }
.form__status.is-err { display: block; background: #fbecec; color: #9a2c2c; border: 1px solid #e6c3c3; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; } }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--ink); color: var(--on-dark-mut); padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.site-footer .foot-logo img, .site-footer .foot-logo svg { height: 44px; width: auto; }
/* These were <h4> under an <h1>, which skipped two levels on every page. They are
   <h2> now; line-height is restated because the h1,h2,h3 base rule would otherwise
   tighten them to 1.12 and change how they sit against the columns. */
.site-footer h2 { font-family: var(--sans); font-size: .78rem; line-height: 1.65; text-transform: uppercase; letter-spacing: .12em; color: var(--on-dark-mut); margin-bottom: 1rem; font-weight: 600; }
.site-footer address { font-style: normal; color: var(--on-dark); line-height: 1.7; }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: #fff; }
.footer-nav { display: grid; gap: .6rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; color: var(--on-dark-mut); }
.footer-credit { font-size: .74rem; color: rgba(255,255,255,.6); margin-top: 1rem; }
.footer-credit a { color: rgba(255,255,255,.55); text-decoration: underline; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* =========================================================================
   About — fact grid + process steps
   ========================================================================= */
/* auto-fit keeps the row balanced whatever the fact count; the max-width stops a
   short row (two facts) from being stretched apart across the full container. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 52rem;
}
.fact__n { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--ink); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.fact__l { font-size: .9rem; color: var(--muted); margin-top: .5rem; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }

.process { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); padding: 0; }
.step { padding-top: 1.25rem; border-top: 1px solid var(--line-2); }
.step__n { font-family: var(--serif); font-size: 1rem; color: var(--blue); margin-bottom: .9rem; }
.step h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--text); margin-bottom: .55rem; }
.step p { font-size: .95rem; color: var(--body); }
@media (max-width: 820px) { .process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .process { grid-template-columns: 1fr; } }

/* Full-width image band */
.image-band { position: relative; isolation: isolate; min-height: clamp(260px, 36vh, 420px); display: flex; align-items: flex-end; background: var(--ink); overflow: hidden; }
.image-band__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
/* the old .15 mid-stop sat directly under the copy; this keeps the scrim dense
   enough behind the text to clear 4.5:1 over the brightest part of the photo */
.image-band__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13,22,38,.92) 0%, rgba(13,22,38,.72) 55%, rgba(13,22,38,.45) 100%); }
.image-band .container { position: relative; z-index: 1; padding-block: clamp(2rem, 5vh, 3rem); }
.image-band__eyebrow { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: .6rem; }
.image-band p { color: #fff; font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.95rem); max-width: 26ch; line-height: 1.22; }
/* the eyebrow IS a <p>, so .image-band p was overriding it into 31px serif */
.image-band p.image-band__eyebrow {
  font-family: var(--sans); font-size: .75rem; line-height: 1.65;
  max-width: none; color: rgba(255,255,255,.88);
}

/* =========================================================================
   Reveal-on-scroll — PROGRESSIVE ENHANCEMENT ONLY
   Content is fully visible by default. Hidden state applies only when JS is
   active (html.js) AND the user has no reduced-motion preference.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0; transform: translateY(14px);
    transition: opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.16,1,.3,1);
  }
  html.js [data-reveal].is-visible { opacity: 1; transform: none; }
  /* The failsafe in main.js sets this once, at load. It drops the hidden state outright
     rather than transitioning every block into view at the same moment, which is both
     instant and free of the layer churn that produced the longest task on the page.
     transition:none matters: without it this would still animate. */
  html.js.reveals-settled [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.js [data-reveal][data-reveal-delay="1"] { transition-delay: .07s; }
  html.js [data-reveal][data-reveal-delay="2"] { transition-delay: .14s; }
  html.js [data-reveal][data-reveal-delay="3"] { transition-delay: .21s; }
}

/* Reduced motion: strip every decorative transform/transition site-wide, not just
   the scroll reveals, so hover lifts and the header shadow settle instantly too. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .deal:hover, .team-roster .member:hover, .btn:active { transform: none; }
}
/* Failsafe: content must NEVER be trapped hidden in print or full-page capture */
@media print { [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sr-only:focus { position: fixed; top: .6rem; left: .6rem; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal; padding: .7rem 1.1rem; background: var(--ink); color: #fff; border-radius: var(--r-sm); z-index: 100; box-shadow: var(--shadow-md); }
.stack-sm > * + * { margin-top: .75rem; }
.text-center { text-align: center; }