/* Golders Capital: site.css
   Direction A, "The dark room": one navy-black field from top to bottom, and in it, lit things.
   Tokens first; everything below uses them, so another direction is a change of tokens and section CSS.
   Breakpoints: phone < 600px, tablet 600–1099px, desktop >= 1100px (home navigation stacks at >= 1280px).
   Two rules hold on every page: the type rule (section 1, beside the type tokens) and the motion vocabulary
   (section 6). docs/page-template.html shows both in markup. */

/* ---------- 1. tokens ---------- */
:root {
  /* palette: the room, its light ink, one brass accent */
  --bg: #0A1230;            /* navy-black ground */
  --surface: #101B3D;       /* one tone step up: unlit panels, chips, fields, the closing door */
  --surface-2: #16234A;     /* second step: hover on surfaces, the slider track */
  --ink: #E7E5E0;           /* warm bone, 14.6:1 on --bg */
  --muted: #B3AC9E;         /* secondary ink, 8.2:1 on --bg */
  --sky: #B8C4E4;           /* the light blue of "for GPs" in the home hero (9.6:1 on --bg) */
  --logo-blue: #7389AD;     /* the light blue of the logo (rgb 115 137 173), 5.1:1 on --bg: the run-in names of How we think and the names of What we finance */
  --accent: #C3A066;        /* brass: the primary action, the lit marker, the focus ring, the door's line */
  --accent-hover: #AE8B52;  /* brass one step darker (label 5.8:1) */
  --accent-ink: #0A1230;    /* label on brass, 7.5:1 */
  --paper: #E7E5E0;         /* the inverse field (contact, the paper block) */
  --paper-ink: #0A1230;
  --paper-muted: #3F4560;   /* 7.5:1 on --paper */
  --field-navy: #1B2E57;    /* the door's paint: the colour tile; also the email's hover on paper (10.6:1) */
  --map-land: #2D4374;      /* Europe, one step lighter than the tile; the lines of a table */

  /* type: two faces, five steps (plus the wordmark).

     THE TYPE RULE, on every page.
     Bodoni Moda (--font-display) is set only for
       (a) the name: the header and menu wordmark, the home hero's "Golders / Capital", the footer wordmark;
       (b) display headings at --step-head or larger: h1, h2, the phone menu's links;
       (c) display figures: the live amount (.shape__value) and the contact email set as display type.
     Everything read as a sentence, a label, a list or a paragraph is Jost: 400 to read; 500 for run-ins (<strong>),
     short names (the band's names, the finance names, a partner's name, a legal heading), buttons and labels. That
     includes every statement, lead, big list, the live reading, captions, quotes and the paper block. No Bodoni under
     40px except the wordmark. All Bodoni is set in section "type roles" below; a page's own CSS never sets it.
     Optical size is set for each use, never left automatic. Bodoni's hairline is 2.0% of the size at opsz 11, 0.9% at
     24, 0.2% at 96 (measured from the font: brand/.build/hairlines2.json, and 0.46% at 39, 0.36% at 54, 0.26% at 76),
     and it stays at 0.5 CSS px or more at the rendered size at every width from 320 to 1920. Weight 400 where that
     holds; 500 for Bodoni set under 56px. The steps (by screen width):
       --step-display  61–200px  opsz 25 (<420px) · 31 (<505) · 34 (<923) · 39 (<1154) · 54 (<1385) · 66 (<1538) · 76; 400
       --step-head     40–64px   opsz 18 (<1143px, 500) · 21 (<1334, 500) · 24 (<1524, 400) · 27 (400)
       --step-mark     26px      the wordmark under 240px wide: the brand's small cut, opsz 11, 400, no added tracking
                                 (its hairline 0.51px, which is why the header's wordmark is 26px and not smaller)
       footer wordmark 78–263px  the brand's wordmark, opsz 24, 400 (wider than 240px at every width)
       contact email   33–147px  fitted to the paper: opsz 18 (500) to 39 by its size (4.10); under 384px wide it
                                 would fall under 40px, so there it is Jost 500
       monogram        40–64px   a partner's initials in the square, as the brand's monogram: opsz 11, 500
     Jost: --step-lead (20–26px, 400, line-height 1.4) for statements, leads, big lists, the live reading; 500 at the
     same step for short names. --step-body (17–19px) for running text, held to 45–75 characters a line, the footer's
     legal note included (a paragraph read as one; on a short page such as Contact it is most of the running text);
     --step-small (14–15px) for navigation, labels and captions of facts. Hierarchy: heading > lead > body at every width.
     Contrast (WCAG 2): ink on ground 14.6:1, on surface 13.4, on surface-2 12.2 · muted on ground 8.2, on surface 7.5,
     on surface-2 6.8 · brass on ground 7.5 · label on brass 7.5, on brass hover 5.8 · paper ink on paper 14.6, paper
     muted 7.5, field navy (hover) 10.6 · ink on the tile 10.6, on the map 7.7 · ink on the 88% navy strip over lit
     stone 10.6 or more, muted 5.9 or more · ink at 45% (a line arriving, the statement before it is read) 3.8:1, which
     is only ever large text: the statement fills only from 1100px up, where it is 24px or more. */
  --font-display: "Baskerville Old Face", "Libre Baskerville", Baskerville, Georgia, "Times New Roman", serif;
  --font-text: "Jost", Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  --step-display: clamp(96px, 13vw, 200px);          /* the hero name; on a subpage, only the title of a page without a picture */
  --step-head: clamp(40px, 4.2vw, 64px);             /* h1 and h2, the phone menu's links, the live amount (Bodoni) */
  --step-lead: clamp(1.25rem, 0.9rem + 0.9vw, 1.625rem);   /* 20–26px (Jost): statements, leads, the live reading, short names */
  --step-body: clamp(1.0625rem, 0.95rem + 0.2vw, 1.1875rem);   /* 17–19px: running text, buttons, chips */
  --step-small: clamp(0.875rem, 0.8125rem + 0.1vw, 0.9375rem); /* 14–15px: navigation, labels, captions of facts */
  --step-mark: 26px;                                 /* the wordmark in the header and the menu */
  --opsz-display: 25;                                /* optical size and weight of the Bodoni steps at this width (below) */
  --opsz-head: 18;
  --wght-head: 500;

  /* space */
  --margin: clamp(20px, 2.2vw, 32px);
  --gutter: clamp(16px, 1.7vw, 24px);
  --section: clamp(120px, 14vw, 220px);
  --radius: 0;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  /* motion (section 6) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* arrivals, the door's line */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);       /* a line rising */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);    /* a door opening */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);      /* light spreading, a picture settling */
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* the old page going dark */
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-line: 800ms;          /* one line of a heading */
  --t-light: 1200ms;        /* a picture coming out of the dark */
  --t-door: 900ms;          /* a door opening, from 200ms into its 450ms line */
  --stagger-line: 90ms;     /* between the lines of a heading */
  --stagger-step: 90ms;     /* between panels in a row, and between the steps of a door's contents */
}
@media (max-width: 599px) {
  :root { --section: 96px; --step-display: 19vw; }
}
@media (min-width: 420px) { :root { --opsz-display: 31; } }
@media (min-width: 505px) { :root { --opsz-display: 34; } }
@media (min-width: 923px) { :root { --opsz-display: 39; } }
@media (min-width: 1143px) { :root { --opsz-head: 21; } }
@media (min-width: 1154px) { :root { --opsz-display: 54; } }
@media (min-width: 1334px) { :root { --opsz-head: 24; --wght-head: 400; } }
@media (min-width: 1385px) { :root { --opsz-display: 66; } }
@media (min-width: 1524px) { :root { --opsz-head: 27; } }
@media (min-width: 1538px) { :root { --opsz-display: 76; } }

/* ---------- 2. reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg);
  /* the parts the browser draws (scrollbar, native video controls, caret) belong to the dark room too */
  color-scheme: dark; scrollbar-color: var(--map-land) var(--bg); accent-color: var(--accent); caret-color: var(--accent);
}
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-text); font-size: var(--step-body); line-height: 1.6; font-weight: 400;
  font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
ul[role="list"], ol[role="list"] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
a { color: inherit; text-decoration-thickness: 0.07em; text-underline-offset: 0.2em; }
p, figcaption, dd, li, .finance__summary { text-wrap: pretty; }
.nowrap { white-space: nowrap; }
strong { font-weight: 500; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nums { font-variant-numeric: tabular-nums lining-nums; }
[hidden] { display: none !important; }
html:has(.menu[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* layout helpers */
.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.grid > * { grid-column: 1 / -1; min-width: 0; }
.section { padding-top: var(--section); }
.frame { position: relative; overflow: hidden; background: var(--surface); }
.frame picture, .frame img { width: 100%; height: 100%; }
.frame picture { display: block; }
.frame img { object-fit: cover; }
.frame--4x5 { aspect-ratio: 4 / 5; }
.frame--3x4 { aspect-ratio: 3 / 4; }
.frame--1x1 { aspect-ratio: 1; }
.frame--16x10 { aspect-ratio: 16 / 10; }

/* type roles: every use of Bodoni on the site is set here, by the type rule (section 1); the sections place them */
/* (a) the name, and the title of a subpage without a picture, at the display step */
.hero__title, .page-hero--plain .page-hero__title {
  font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" var(--opsz-display);
}
/* (b) display headings: h1 and h2 at --step-head, and the phone menu's links */
.think__title, .managers__title, .finance__title, .film__title, .work__title, .cities__title, .alliance__title,
.shape-section__title, .contact__title, .heading, .closing__title, .page-hero__title, .menu__nav a {
  font-family: var(--font-display); font-size: var(--step-head); font-weight: var(--wght-head); line-height: 1.04;
  letter-spacing: -0.02em; font-variation-settings: "opsz" var(--opsz-head);
}
@media (max-width: 339px) {
  /* the narrowest phones hold 280px: at 40px "Entrepreneurial", "An independent" and "An underserved" need 281-288px,
     so the heading step is set a touch tighter there and each keeps its own line (an h1 keeps two lines at most) */
  .think__title, .managers__title, .finance__title, .film__title, .work__title, .cities__title, .alliance__title,
  .shape-section__title, .contact__title, .heading, .closing__title, .page-hero__title, .menu__nav a { letter-spacing: -0.04em; }
}
/* (c) display figures: the live amount (the contact email is fitted to its paper in 4.10) */
.shape__value {
  font-family: var(--font-display); font-size: calc(var(--step-head) * 0.7); font-weight: var(--wght-head); line-height: 1;
  letter-spacing: -0.01em; font-variation-settings: "opsz" var(--opsz-head);
}
/* the wordmark: the small cut under 240px wide, the brand's wordmark above */
.site-header__brand, .menu__brand {
  font-family: var(--font-display); font-size: var(--step-mark); font-weight: 400; line-height: 1.15; letter-spacing: 0;
  font-variation-settings: "opsz" 11;
}
.wordmark text { font-family: var(--font-display); font-size: 100px; font-weight: 400; letter-spacing: 0; font-variation-settings: "opsz" 24; }
.monogram { font-family: var(--font-display); font-size: var(--step-head); font-weight: 500; line-height: 1; font-variation-settings: "opsz" 11; }
/* Jost at the lead step: what is read (400), and short names (500) */
.think__statement, .statement, .cities__lead, .alliance__para, .shape__reading, .contact__sentence, .biglist > li, .sequence > li {
  font-family: var(--font-text); font-size: var(--step-lead); font-weight: 400; line-height: 1.4; letter-spacing: -0.005em;
}
.band__name, .heading--lead, .longtext__title, .partner__name {
  font-family: var(--font-text); font-size: var(--step-lead); font-weight: 500; line-height: 1.25; letter-spacing: -0.005em;
}

/* ---------- 3. components ---------- */

/* skip link */
/* hidden until it takes the focus: off the page entirely, not merely moved above it */
.skip {
  position: absolute; z-index: 100; left: var(--margin); top: var(--s2);
  padding: 12px 20px; background: var(--ink); color: var(--bg); font-weight: 500; text-decoration: none;
}
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
.skip:focus-visible { outline-color: var(--accent); }

/* primary button: one per screen */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  background: var(--accent); color: var(--accent-ink); border-radius: var(--radius);
  font: 500 var(--step-body)/1.1 var(--font-text); text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
  touch-action: manipulation;
}
.button:hover { background: var(--accent-hover); }
.button:active { transform: scale(0.98); }
.button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* text links: underlined in running text; standalone links show it on hover */
.link { font-weight: 500; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) var(--ease-out); }
.link:hover, .link:focus-visible { text-decoration-color: currentColor; }
.more { margin-top: var(--s4); }
.more .link { display: inline-block; padding-block: 10px; }

/* facts: label above value */
.facts { display: grid; gap: var(--s3) var(--gutter); }
.facts dt { font-size: var(--step-small); color: var(--muted); line-height: 1.4; }
.facts dd { margin-top: 4px; line-height: 1.4; }

/* header */
.site-header {
  position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--margin);
}
.site-header__brand { text-decoration: none; }
.site-nav ul { display: flex; flex-wrap: wrap; column-gap: var(--s3); }
.site-nav a { display: inline-block; padding-block: 10px; font-size: var(--step-small); line-height: 1.2; text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.5em; }
.menu-button { min-height: 44px; min-width: 44px; padding: 0 12px; margin-right: -12px; font: 500 var(--step-small)/1 var(--font-text); }
.menu-button:hover { text-decoration: underline; text-underline-offset: 0.3em; }
html:not(.has-menu) .menu-button { display: none; }
@media (max-width: 899px) { .has-menu .site-nav { display: none; } }
@media (min-width: 900px) { .menu-button { display: none; } }

/* the home page: the header sits over the hero, top-right; the hero's name is the wordmark below 1280px */
.home .site-header { position: absolute; top: 0; right: 0; padding: var(--s4) var(--margin); }
.home .site-header__brand { display: none; }
@media (max-width: 1279px) {
  .has-menu .home .site-nav { display: none; }
  .home .menu-button { display: inline-flex; align-items: center; }
  /* without the menu (no JavaScript), the five links sit on one flat plate of the room's navy, readable over the lit stone */
  html:not(.has-menu) .home .site-nav ul { background: var(--bg); padding-inline: var(--s2); }
}
/* on a phone without the menu, the links take their own row above the photograph instead of covering the name */
@media (max-width: 599px) {
  html:not(.has-menu) .home .site-header { position: relative; padding-block: var(--s2); }
  html:not(.has-menu) .home .site-nav ul { padding-inline: 0; column-gap: var(--s3); }
}
@media (min-width: 1280px) {
  .home .site-header { flex-direction: column; align-items: flex-end; gap: var(--s3); padding-top: 40px; text-align: right; }
  .home .site-header__brand { display: block; }
  .home .site-header__brand span { display: block; }
  .home .site-nav ul { flex-direction: column; align-items: flex-end; row-gap: 2px; }
  .home .site-nav a { padding-block: 6px; }
}

/* the menu: a real modal dialog */
.menu {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0;
  padding: var(--s3) var(--margin) var(--s5); border: 0; background: var(--bg); color: var(--ink);
}
.menu[open] { display: grid; grid-template-rows: auto 1fr auto; }
.menu::backdrop { background: var(--bg); }
.menu__bar { display: flex; align-items: center; justify-content: space-between; }
.menu__brand { text-decoration: none; }
.menu__close { min-height: 44px; min-width: 44px; padding: 0 12px; margin-right: -12px; font: 500 var(--step-small)/1 var(--font-text); }
.menu__close:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.menu__nav { align-self: center; }
.menu__nav a { display: inline-block; padding-block: 6px; line-height: 1.1; text-decoration: none; }
.menu__nav a:hover { text-decoration: underline; text-decoration-thickness: 0.04em; text-underline-offset: 0.15em; }
.menu__foot { font-size: var(--step-small); }
.menu__foot a { display: inline-block; padding-block: 10px; }

/* ---------- 4. sections ---------- */

/* 4.1 hero: the name from the top edge to the bottom edge, over the founder's door */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  height: 100svh; min-height: 700px; padding-inline: var(--margin);
}
/* --light: where the lamp is, for the light spreading from it at load (section 6) */
.hero__pic { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); --light: 87% 15%; }
.hero__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 70% 20%; }
.hero__title {
  grid-row: 1 / 4; grid-column: 1; display: grid; grid-template-rows: subgrid;
  font-size: var(--step-display); line-height: 0.85; letter-spacing: -0.01em;
}
/* each line is its own mask; the padding holds the ascenders and the descender of the p */
.hero__line { display: block; overflow: hidden; padding: 0.06em 0.04em 0.22em; margin: -0.06em -0.04em -0.22em; }
.hero__line--1 { grid-row: 1; margin-top: calc(72px - 0.0825em); }           /* cap line 72px from the top */
.hero__line--2 { grid-row: 3; align-self: end; margin-bottom: calc(20px - 0.0255em); } /* descender 20px above the edge */
.hero__word { display: inline-block; }
.hero__line--2 .hero__word { margin-left: calc(28vw - var(--margin)); }
.hero__middle {
  grid-row: 2; grid-column: 1; align-self: center; justify-self: start;
  margin-left: calc(28vw - var(--margin)); width: clamp(250px, calc(21.6vw - 24px), 44ch); padding-block: var(--s4);
}
.hero__sentence { font-size: max(18px, var(--step-body)); line-height: 1.6; }
.hero__lede { display: block; }
.hero__middle .button { margin-top: var(--s4); }
@media (min-width: 1100px) and (max-width: 1279px) {
  .hero__line--2 .hero__word, .hero__middle { margin-left: calc(24vw - var(--margin)); }
  .hero__middle { width: calc(25.6vw - 24px); }
}
@media (max-width: 1099px) {
  .hero { min-height: 560px; }
  .hero__line--1 { margin-top: calc(96px - 0.0825em); }
  .hero__line--2 { justify-self: end; }
  .hero__line--2 .hero__word { margin-left: 0; }
  .hero__middle { margin-left: 0; width: min(100%, 44ch); align-self: end; margin-bottom: var(--s6); }
}
@media (min-width: 600px) and (max-width: 1099px) {
  /* the door and the lamp; the steps are cropped away so the name sits on the door's paint */
  .hero__pic { --light: 80% 10%; }
  .hero__pic img { height: 118%; object-position: 100% 0; }
  .hero__line--2 { justify-self: start; }
  .hero__line--2 .hero__word { margin-left: 12vw; }
}
@media (max-width: 599px) {
  .hero__pic { --light: 76% 10%; }
  .hero__line--1 { margin-top: calc(88px - 0.0825em); }
  .hero__line--2 { margin-bottom: calc(16px - 0.0255em); justify-self: start; position: relative; z-index: 1; }
  .hero__middle { margin-bottom: var(--s5); position: relative; width: min(100%, 76vw); }
  /* the sentence and "Capital" stand on a plate of the room's navy at 88% (the band's strip): the door, its lit edge
     and the lamp stay clear above it, and no word crosses the lit stone or the steps */
  .hero__middle::before {
    content: ""; position: absolute; z-index: -1; top: calc(-1 * var(--s4)); bottom: -100vh;
    left: calc(-1 * var(--margin)); width: calc(100% + var(--margin) + 20px);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
  }
}

/* 4.2 how we think: the sentence holds still on the left; three pictures pass on the right, one per screen */
.think__run { position: relative; margin-top: var(--s4); }
.think__statement span { display: block; }
.think__fig figcaption { margin-top: var(--s3); max-width: 44ch; }
@media (min-width: 1100px) {
  /* the pin holds for the whole run (about 1.75 screens): the title at its top, the sentence at mid-height on
     columns 1–4; the exhibits pass on columns 6–12, each about 44vw (never taller than 62% of the screen),
     30svh apart, so every screen holds the sentence and one lit picture and nothing crosses the words */
  .think__run { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; margin-top: 0; padding-inline: var(--margin); }
  .think__pin { grid-column: 1 / 5; grid-row: 1; position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr; padding-block: var(--s6); }
  .think__statement { align-self: center; padding-bottom: var(--s6); }
  .think__pictures { grid-column: 6 / 13; grid-row: 1; display: grid; row-gap: 30svh; padding-block: var(--s6); }
  .think__fig--1 { width: min(44vw, 49.6svh); }
  .think__fig--2 { width: calc(min(44vw, 99svh) * 0.75); justify-self: end; }   /* a quarter smaller */
  .think__fig--3 { width: min(44vw, 62svh); }
}
@media (max-width: 1099px) {
  .think__pin { padding-inline: var(--margin); }
  .think__statement { margin-top: var(--s4); }
  .think__pictures { display: grid; gap: var(--s6); margin-top: var(--s6); padding-inline: var(--margin); }
  .think__fig--1 { width: 64%; }
  .think__fig--2 { width: calc(78% * 0.75); justify-self: end; }   /* a quarter smaller */
  .think__fig--3 { width: 52%; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .think__fig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; width: 100% !important; }
  .think__fig figcaption { margin-top: 0; }
  .think__fig--2 .frame { order: 2; }
  .think__fig--2 figcaption { order: 1; }
}

/* 4.3 the managers, not the funds: four unequal panels, the two Golders finances are lit. Each panel is a door
   (data-reveal="door", its seam): the four arrive dark, then the two lit pictures come out of the dark */
.managers__title { grid-column: 3 / -1; }
.band { display: flex; flex-wrap: wrap; margin-top: var(--s6); }
.band__panel { position: relative; display: flex; align-items: flex-end; overflow: hidden; background: var(--surface); --door-fill: var(--surface); }
.band__panel--fund { background: var(--surface-2); --door-fill: var(--surface-2); }
.band__pic { position: absolute; inset: 0; }
.band__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.band__panel--partners .band__pic img { object-position: 0 50%; }   /* the stone's dark return keeps the two lit panels apart */
.band__text { position: relative; padding: var(--s4) var(--s3); }
/* names sit on one shared last line, so the four lines below them start level */
@media (min-width: 1200px) {
  .band__name { display: flex; align-items: flex-end; min-height: 2.5em; }
  .band__line { min-height: 4.5em; }
}
.band__line { margin-top: var(--s2); line-height: 1.5; color: var(--muted); }
.is-lit .band__line { color: var(--ink); }
.managers__caption { margin-top: var(--s4); max-width: 60ch; }
@media (min-width: 1200px) {
  .band { flex-wrap: nowrap; height: 68svh; min-height: 460px; max-height: 760px; }
  .band__panel--lps, .band__panel--fund { flex: 0 0 calc(100% / 6); }
  .band__panel--mc { flex: 5 1 0; }
  .band__panel--partners { flex: 3 1 0; }
  /* the company's words stay on the dark of the door: their 242px column ends before the lit edge at every
     desktop width; the partners' words cross the lit flutes, so they sit on the flat strip of the room's navy */
  .is-lit .band__text { width: 290px; max-width: 100%; }
  .band__panel--partners .band__text { width: 100%; background: color-mix(in srgb, var(--bg) 88%, transparent); }
  .managers__caption { margin-left: calc((100% + 2 * var(--margin)) / 3 + var(--s3) - var(--margin)); }
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .band__panel.is-lit:hover { flex-grow: 6; }   /* under reduced motion the width simply changes */
}
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .band__panel.is-lit { transition: flex-grow 500ms var(--ease-in-out); }
  .is-lit .band__pic img { transition: transform 900ms var(--ease-soft); }
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .band__panel.is-lit:hover .band__pic img { transform: scale(1.03); }
}
/* narrower panels cannot keep the words off the lit edge, so there they sit on a flat strip of the room's navy */
@media (max-width: 1199px) {
  .is-lit .band__text { width: 100%; background: color-mix(in srgb, var(--bg) 88%, transparent); }
  .band__panel--partners .band__pic img { object-position: 50% 80%; }
}
@media (min-width: 600px) and (max-width: 1199px) {
  .band__panel { min-height: max(42svh, 320px); }
  /* the unlit row is as tall as its words; only the lit row keeps the band's height */
  .band__panel--lps, .band__panel--fund { min-height: 0; }
  .band__panel--lps .band__text, .band__panel--fund .band__text { padding-top: var(--s5); }
  .band__panel--lps { flex: 0 0 64%; }
  .band__panel--fund { flex: 0 0 36%; }
  .band__panel--mc { flex: 0 0 36%; }
  .band__panel--partners { flex: 0 0 64%; }
  /* the narrow company panel keeps the lamp in frame; its words sit on the navy strip */
  .band__panel--mc .band__pic img { object-position: 100% 0; }
  .managers__caption { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .managers__title { grid-column: 1 / -1; }
  .band { flex-direction: column; }
  .band__panel { flex: none; }
  .band__panel--lps, .band__panel--fund { min-height: max(15svh, 130px); }
  .band__panel--mc { min-height: max(36svh, 280px); }
  .band__panel--partners { min-height: max(24svh, 200px); }
  .band__text { padding: var(--s3) var(--margin); }
}

/* 4.4 what we finance: names at one size; a description appears in a fixed spot */
.finance-section { padding-top: max(var(--section), 20vh); }
.finance.grid { position: relative; margin-top: var(--s6); padding-block: 0; row-gap: var(--s5); --slot-x: calc((100% - 11 * var(--gutter)) / 12 * 9 + 9 * var(--gutter)); --slot-w: calc((100% - 11 * var(--gutter)) / 12 * 3 + 2 * var(--gutter)); }
.finance__name { font-size: var(--step-body); font-weight: 500; line-height: 1.25; color: var(--ink); margin-bottom: 1.25em; font-family: var(--font-text); }
.finance__items li { line-height: 1.25; }
.finance__item {
  display: block; width: 100%; min-height: 24px; text-align: left; color: var(--muted); line-height: 1.25;
  transition: color var(--t-hover) var(--ease-out);
}
button.finance__item:hover, .finance__item:focus-visible, .finance__item[aria-expanded="true"] { color: var(--ink); }
.finance__slot { color: var(--ink); line-height: 1.5; }
.finance__default { display: block; transition: opacity var(--t-ui) var(--ease-out); }
.finance__desc { display: none; }
/* below the desktop slot, a tap or a key opens the description under its name */
.finance__item[aria-expanded="true"] + .finance__desc { display: block; max-width: 36ch; margin: 6px 0 14px; color: var(--ink); line-height: 1.5; }
.finance__summary { margin-top: var(--s3); color: var(--muted); line-height: 1.5; max-width: 34ch; }
@media (min-width: 1100px) {
  .finance__group--growth { grid-column: 1 / 4; grid-row: 1; }
  .finance__group--liquidity { grid-column: 4 / 7; grid-row: 1; }
  .finance__group--advice { grid-column: 7 / 10; grid-row: 1; }
  .finance__slot { grid-column: 10 / 13; grid-row: 1; }
  .finance__desc, .finance__item[aria-expanded="true"] + .finance__desc {
    display: block; position: absolute; top: 0; left: var(--slot-x); width: var(--slot-w); max-width: none; margin: 0;
    color: var(--ink); line-height: 1.5; visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui);
  }
  .finance__items li:hover > .finance__desc, .finance__item:focus-visible + .finance__desc,
  .finance__item[aria-expanded="true"] + .finance__desc { visibility: visible; opacity: 1; transition-delay: 0s; }
  /* the name under the pointer wins over one opened by a tap or a key */
  .finance:has(.finance__items li:hover) .finance__items li:not(:hover) > .finance__desc { visibility: hidden; opacity: 0; }
  .finance:has(.finance__items li:not(.finance__li--group):hover, .finance__item:not(.finance__item--group):focus-visible, .finance__item:not(.finance__item--group)[aria-expanded="true"]) .finance__default { opacity: 0; }   /* the names that share the column's sentence leave the default text alone until that sentence is open */
}
/* without script the names stay plain text; their descriptions are then hidden from sight only, not from screen readers
   (below 1100px clipped to nothing, from 1100px transparent until the pointer is over the name) */
@media (max-width: 1099px) {
  html:not(.js) .finance__desc { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1100px) {
  html:not(.js) .finance__desc { visibility: visible; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .finance__slot { grid-column: 1 / -1; max-width: 60ch; }
  .finance__group { grid-column: span 4; }
}
@media (max-width: 599px) {
  .finance-section { padding-top: var(--section); }
  .finance.grid { margin-top: var(--s5); row-gap: 40px; }
  .finance__item, .finance__items li, .finance__name { font-size: 18px; line-height: 1.4; }
}

/* 4.5 the film: an exhibit lit by its own brightness */
.film__title, .film__figure { grid-column: 2 / 12; }
.film__figure { margin-top: var(--s6); }
.film__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.film__video { width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
.film__under { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s2); }
.film__caption { max-width: 60ch; }
.film__controls { display: flex; gap: var(--s4); }
.film__button {
  min-height: 44px; min-width: 44px; text-align: left; font-weight: 500; text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 0.3em; transition: text-decoration-color var(--t-hover) var(--ease-out);
}
.film__button:hover { text-decoration-color: currentColor; }
.film__button:active { transform: scale(0.98); }
.film__text { margin-top: var(--s1); }
.film__text summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--muted); list-style: none; }
.film__text summary::-webkit-details-marker { display: none; }
.film__text summary:hover { color: var(--ink); text-decoration: underline; }
.film__text[open] summary { color: var(--ink); }
.film__text:not([open]) > .film__lines { display: none; }
.film__lines { margin-top: var(--s2); color: var(--muted); max-width: 60ch; }
.film__lines li + li { margin-top: 4px; }
@media (max-width: 1099px) { .film__title, .film__figure { grid-column: 1 / -1; } }

/* 4.6 how we work: three pictures down a falling diagonal */
.work__text { max-width: 36ch; }
.work__text p + p { margin-top: 0; }
@media (min-width: 1100px) {
  .work.grid { align-items: start; }
  .work__title { grid-column: 9 / 13; grid-row: 1; }
  .work__pic--1 { grid-column: 1 / 5; grid-row: 1 / 4; }
  .work__text--1 { grid-column: 9 / 13; grid-row: 2; margin-top: var(--s4); }
  .work__pic--2 { grid-column: 6 / 9; grid-row: 3; margin-top: var(--s7); }
  .work__text--2 { grid-column: 9 / 13; grid-row: 3; margin-top: var(--s7); }
  .work__text--3 { grid-column: 1 / 5; grid-row: 4; margin-top: 160px; }
}
@media (max-width: 1099px) {
  .work.grid { row-gap: 0; }
  .work__title { margin-bottom: var(--s5); }
  .work__pic--1 { width: 100%; }
  .work__pic--2 { width: 62%; justify-self: end; margin-top: 56px; }
  .work__text { margin-top: var(--s3); }
  .work__text--2 { justify-self: end; width: 62%; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .work__pic--1 { width: 64%; }
  .work__pic--2 { width: 48%; }
  .work__text--2 { width: 48%; }
}

/* 4.7 paris and london: a wide picture, a colour tile, the facts. The paper block and the tile are doors (a sheet:
   they open from their top edge) */
.cities__lead { margin-top: var(--s4); max-width: 30em; text-wrap: balance; }   /* about 60 characters a line */
.cities__figure { position: relative; margin-top: var(--s7); }
.cities__paper { margin-top: calc(-1 * var(--s5)); margin-left: var(--s3); position: relative; width: min(320px, 86%); padding: var(--s3); background: var(--paper); color: var(--paper-ink); line-height: 1.5; --door-fill: var(--paper); }
.cities__paper > span { display: block; }
.cities__tile { position: relative; margin-top: var(--s5); aspect-ratio: 22 / 17; background: var(--field-navy); overflow: hidden; --door-fill: var(--field-navy); }
.cities__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.cities__map path { fill: var(--map-land); }
.cities__dot { fill: var(--ink); }
.cities__label { position: absolute; font-size: var(--step-small); line-height: 1; color: var(--ink); transform: translate(12px, -50%); }
.cities__label--paris { left: 39.13%; top: 50.24%; }
.cities__label--london { left: 35.22%; top: 39.69%; }
.cities__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s4); }
@media (min-width: 1100px) {
  .cities.grid { align-items: start; }
  .cities__title { grid-column: 1 / 9; grid-row: 1; }
  .cities__lead { grid-column: 1 / 9; grid-row: 2; }
  .cities__figure { grid-column: 1 / 9; grid-row: 3 / 6; }
  .cities__paper { position: absolute; top: calc(-1 * var(--s5)); right: var(--s4); margin: 0; width: 320px; }
  .cities__tile { grid-column: 9 / 13; grid-row: 3; margin-top: var(--s7); }
  .cities__facts { grid-column: 9 / 13; grid-row: 4; }
  .cities__more { grid-column: 9 / 13; grid-row: 5; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .cities__tile { grid-column: 1 / 7; }
  .cities__facts { grid-column: 7 / 13; align-self: end; }
}
/* the tile placed by another page (firm): the home's placement above is dropped, so that page's grid places it */
.cities__tile.cities__tile--free { grid-column: 1 / -1; grid-row: auto; margin-top: var(--s5); }

/* 4.8 the golders anchor alliance: side facts, a wide paragraph, two lists */
.alliance__facts { margin-top: var(--s6); }
.alliance__para { margin-top: var(--s6); max-width: 30em; text-wrap: balance; }
.alliance__list { margin-top: var(--s6); }
.alliance__head { font-family: var(--font-text); font-size: var(--step-body); font-weight: 500; line-height: 1.4; }
.alliance__list ul { margin-top: var(--s2); }
.alliance__list li { color: var(--muted); line-height: 1.5; }
.alliance__list li + li { margin-top: var(--s1); }
@media (min-width: 1100px) {
  /* the paragraph runs from column 3, held to 30em (about 60 characters a line, four lines); the side facts keep
     the first two columns and the lists start on its line */
  .alliance__facts { grid-column: 1 / 3; grid-row: 2; }
  .alliance__para { grid-column: 3 / 13; grid-row: 2; }
  .alliance__list { margin-top: 120px; }
  .alliance__list--investors { grid-column: 3 / 7; grid-row: 3; }
  .alliance__list--gps { grid-column: 7 / 11; grid-row: 3; }
  .alliance__more { grid-column: 3 / 13; grid-row: 4; }
}
@media (max-width: 599px) {
  /* on a phone it is a paragraph at the running size, not a seven-line statement */
  .alliance__para { font-size: 18px; line-height: 1.55; letter-spacing: 0; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .alliance__list--investors { grid-column: 1 / 7; }
  .alliance__list--gps { grid-column: 7 / 13; }
}

/* 4.9 shape the conversation: the live thing. Its four slabs are doors in a row (their seams), as the band's */
.shape-section__sup { margin-top: var(--s3); max-width: 52ch; }
.shape { margin-top: var(--s6); }
.shape__purpose { margin: 0; padding: 0; border: 0; min-width: 0; }
.shape__legend { display: block; padding: 0; font-weight: 500; line-height: 1.4; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; background: var(--surface); color: var(--ink);
  line-height: 1.2; transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.chip input:hover + span { background: var(--surface-2); }
.chip input:active + span { transform: scale(0.98); }
.chip input:checked + span { background: var(--ink); color: var(--bg); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.shape__amount { margin-top: var(--s5); }
.shape__amount-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.range { position: relative; margin-top: var(--s2); height: 48px; }
.range__track { position: absolute; left: 0; right: 0; top: 21px; height: 6px; background: var(--surface-2); }
.range__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(14px + (100% - 28px) * var(--p, 0.2)); background: var(--ink); }
.range__input { position: relative; display: block; width: 100%; height: 48px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: manipulation; }
.range__input::-webkit-slider-runnable-track { height: 48px; background: transparent; border: 0; }
.range__input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: 10px; background: var(--accent); border: 0; border-radius: 0; transition: transform var(--t-press) var(--ease-out); }
.range__input:active::-webkit-slider-thumb { transform: scale(1.12); }
.range__input::-moz-range-track { height: 48px; background: transparent; border: 0; }
.range__input::-moz-range-thumb { width: 28px; height: 28px; background: var(--accent); border: 0; border-radius: 0; }
.range__input:focus-visible { outline: none; }
.range__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 3px; }
.range__input:focus-visible::-moz-range-thumb { outline: 2px solid var(--ink); outline-offset: 3px; }
.range__input:disabled { cursor: default; }
.range__ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--step-small); color: var(--muted); }
.shape__reading { max-width: 34em; min-height: 1.4em; }   /* empty until a need is ticked; keeps its line so nothing jumps */
.shape__within { margin-top: var(--s2); color: var(--muted); }
/* the four names as a small copy of the band (same proportions); the financed slab carries its band picture */
.shape__line { display: flex; width: 100%; height: clamp(140px, 13vw, 200px); margin-top: var(--s5); font-size: var(--step-small); line-height: 1.25; }
.shape__line li { position: relative; display: flex; align-items: flex-end; min-width: 0; overflow: hidden; background: var(--surface); color: var(--muted); --door-fill: var(--surface); }
.shape__line [data-entity="lps"], .shape__line [data-entity="fund"] { flex: 2 1 0; }
.shape__line [data-entity="fund"] { background: var(--surface-2); --door-fill: var(--surface-2); }
.shape__line [data-entity="mc"] { flex: 5 1 0; }
.shape__line [data-entity="p"] { flex: 3 1 0; }
.shape__pic { position: absolute; inset: 0; opacity: 0; }
.shape__pic img { width: 100%; height: 100%; object-fit: cover; }
.shape__line [data-entity="mc"] .shape__pic img { object-position: 100% 0; }
.shape__line [data-entity="p"] .shape__pic img { object-position: 0 50%; }
.shape__name { position: relative; display: block; width: 100%; padding: 10px 12px 12px; }
.shape__line li.is-lit { color: var(--ink); }
.shape__line li.is-lit .shape__pic { opacity: 1; }
.shape__line li.is-lit .shape__name { background: color-mix(in srgb, var(--bg) 88%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .shape__line li { transition: color 300ms var(--ease-out); }
  .shape__pic { transition: opacity 300ms var(--ease-out); }
}
.shape__button { margin-top: var(--s5); }
@media (min-width: 1100px) {
  /* the reading stands level with the heading, so the result is in view while the choice is made */
  .shape-section .grid { grid-template-rows: auto auto 1fr; }
  .shape-section__title, .shape-section__sup { grid-column: 1 / 8; }
  .shape-section__title { grid-row: 1; }
  .shape-section__sup { grid-row: 2; }
  .shape { grid-column: 1 / -1; grid-row: 1 / 4; margin-top: 0; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; align-items: start; pointer-events: none; }
  .shape > * { pointer-events: auto; }
  .shape__inputs { grid-column: 1 / 7; grid-row: 3; margin-top: var(--s6); }
  /* the reading stands level with the heading; the button closes the column level with the amount */
  .shape__result { grid-column: 8 / 13; grid-row: 1 / 4; align-self: start; display: flex; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1099px) {
  .shape__result { margin-top: var(--s6); }
}
@media (max-width: 599px) {
  /* the answer sits right under the choice: chips, then the reading; the amount under it with the range it keeps
     to (never a label over the figure), then the lit slab and the button */
  .shape { display: flex; flex-direction: column; }
  .shape__inputs, .shape__result { display: contents; }
  .shape__purpose { order: 1; }
  .shape__reading { order: 2; margin-top: var(--s4); }
  .shape__amount { order: 3; margin-top: var(--s4); }
  .shape__within { order: 4; }
  .shape__line { order: 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; margin-top: var(--s4); }
  .shape__line li { min-height: 96px; }   /* the lit slab shows its picture above the name */
  .shape__button { order: 7; margin-top: var(--s4); }
  .chip span { padding: 0 16px; }
  .range__input::-webkit-slider-thumb { width: 36px; height: 36px; margin-top: 6px; }
  .range__input::-moz-range-thumb { width: 36px; height: 36px; }
  .range__fill { width: calc(18px + (100% - 36px) * var(--p, 0.2)); }
  .shape__button { width: 100%; }
}

@media (forced-colors: active) {
  .chip span { border: 1px solid ButtonText; }   /* taste-skill-ignore: forced colours drop the fill, so the chip needs a boundary */
  .chip input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .range__track { forced-color-adjust: none; background: GrayText; }
  .range__fill { forced-color-adjust: none; background: Highlight; }
  .range__input { forced-color-adjust: none; }
  .range__input::-webkit-slider-thumb { background: ButtonText; }
  .range__input::-moz-range-thumb { background: ButtonText; }
  .shape__line li.is-lit .shape__name { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* 4.10 contact: the email as display type, in the inverse colours. The paper and the email are simply there (the
   hero's button lands here, and the email is what a visitor reads and copies, so it never waits); only the title
   rises, as every display heading does */
.contact {
  min-height: min(90svh, 64vw, 800px); display: grid; grid-template-rows: auto 1fr auto; margin-top: var(--section);   /* the paper between the invitation and the email stays under 40% of the screen at every size */
  padding: var(--s6) var(--margin) var(--s4); background: var(--paper); color: var(--paper-ink);
  container-type: inline-size;
}
.contact :focus-visible { outline-color: var(--paper-ink); }
.contact__sentence { margin-top: var(--s2); }
/* the email is fitted to the paper's width, so its size follows the screen: its optical size and weight follow its
   size (the type rule). One line from 600px; two lines on a phone, the longer one "golderscapital.com". Below 384px
   wide (paper under 344px) it would be set under 40px, so there it is Jost 500. Each divisor is the line's measured
   width in ems at that optical size, plus 1% */
.contact__email {
  align-self: end; margin-bottom: 7vh;
  font-family: var(--font-display); font-size: calc(100cqi / 12.9); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em;
  font-variation-settings: "opsz" 19; overflow-wrap: anywhere;   /* it breaks after the @ (or anywhere) only when the text is spaced wider */
}
@container (min-width: 709px) { .contact__email { font-size: calc(100cqi / 12.66); font-weight: 400; font-variation-settings: "opsz" 24; } }
@container (min-width: 1000px) { .contact__email { font-size: calc(100cqi / 12.64); font-variation-settings: "opsz" 31; } }
@container (min-width: 1210px) { .contact__email { font-size: calc(100cqi / 12.62); font-variation-settings: "opsz" 34; } }
@container (min-width: 1515px) { .contact__email { font-size: calc(100cqi / 12.62); font-variation-settings: "opsz" 39; } }
.contact__email a { display: inline-block;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.035em; text-underline-offset: 0.14em;
  transition: color var(--t-hover) var(--ease-out), text-decoration-color var(--t-hover) var(--ease-out);
}
.contact__email a:hover, .contact__email a:focus-visible { color: var(--field-navy); text-decoration-color: currentColor; }
.contact__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s4); font-size: var(--step-small); }
.contact__social .link { display: inline-block; padding-block: 12px; min-width: 44px; font-weight: 500; }
.contact__places { display: flex; flex-wrap: wrap; column-gap: 0.6em; }
.contact__places li + li::before { content: "·" / ""; margin-right: 0.6em; }
@media (max-width: 599px) {
  .contact { min-height: 86svh; padding-top: var(--s5); }
  .contact__sentence { font-size: 18px; line-height: 1.5; }
  .contact__email { font-family: var(--font-text); font-size: calc(100cqi / 8.42); font-weight: 500; line-height: 1.05; letter-spacing: 0; margin-bottom: 10vh; font-variation-settings: normal; }
  .contact__email span { display: block; }
  .contact__foot { flex-direction: column; gap: 12px; }
  .contact__places { flex-direction: column; gap: 12px; }
  .contact__places li + li::before { content: none; }
}
@media (max-width: 599px) {
  @container (min-width: 344px) { .contact__email { font-family: var(--font-display); font-size: calc(100cqi / 8.6); font-weight: 500; letter-spacing: -0.02em; font-variation-settings: "opsz" 18; } }
  @container (min-width: 480px) { .contact__email { font-size: calc(100cqi / 8.41); font-weight: 400; font-variation-settings: "opsz" 24; } }
}

/* 4.11 footer: columns above, the wordmark below */
.site-footer { padding: var(--s7) var(--margin) var(--s4); background: var(--bg); }
.site-footer__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s4); }
.site-footer__col { grid-column: span 3; font-size: var(--step-small); line-height: 1.7; color: var(--muted); }
.site-footer__head { font-family: var(--font-text); font-size: var(--step-small); font-weight: 500; line-height: 1.7; color: var(--ink); }
.site-footer__col a { text-decoration: none; }
.site-footer__col a:hover { color: var(--ink); text-decoration: underline; }
.site-footer__col li a { display: inline-block; padding-block: 2px; }
.site-footer__col p + p { margin-top: var(--s2); }
@media (min-width: 600px) {
  .site-footer__col p a { display: inline-block; padding-block: 12px; margin-block: -12px; }   /* the email: a 44px target that moves nothing */
}
.site-footer__mark { margin-top: 18vh; }
/* the brand's wordmark (opsz 24), as live text fitted to its own measured width at that optical size: the line
   713.4 units wide, the stacked words 359.9 and 328.5, at a size of 100 */
.wordmark { width: 100%; height: auto; overflow: visible; }
.wordmark text { fill: var(--ink); }
.wordmark--stack { display: none; }
.site-footer__legal { margin-top: 20px; max-width: 60ch; font-size: var(--step-body); line-height: 1.6; color: var(--muted); }   /* a paragraph, so the body step */
@media (max-width: 599px) {
  .site-footer__col { grid-column: span 6; }
  .site-footer__col li a, .site-footer__col p a { display: inline-block; padding-block: 10px; }   /* 44px targets */
  .site-footer__mark { margin-top: 20svh; }
  .wordmark--line { display: none; }
  .wordmark--stack { display: block; }
  .wordmark--stack + .wordmark--stack { margin-top: 4px; }
}

/* ---------- 5. subpages ----------
   What the seven subpages share (approach, solutions, alliance, firm, contact, legal-notice, privacy): the same
   header, menu, footer, components and rhythm as the home, plus the parts below. Tokens and the five type steps
   only (all Bodoni is in "type roles", section 2). Markup for every class is in docs/page-template.html. A page's
   own layouts live in assets/css/pages/<page>.css, scoped under its body class (.page-approach, .page-contact...).
   Rhythm, as on the home: a section starts var(--section) below the last (.section); a title is followed by its
   statement or text at var(--s4), by a component (table, list, sequence, picture) at var(--s6), var(--s5) on a
   phone. Motion: the vocabulary of section 6 only (data-reveal="lines" | "light" | "door" | "fill"). */

/* 5.1 type roles (set in section 2): .heading is the home's section title (Bodoni, --step-head); .heading--lead a
   smaller title (Jost 500 at --step-lead); .statement a short paragraph set large (Jost 400 at --step-lead, about
   30 words, three lines at most on a desktop); .prose the running text */
.statement { max-width: 34em; }
/* running text: held to 60 characters, paragraphs one line apart */
.prose { max-width: 60ch; }
.prose > * + * { margin-top: 1em; }
.prose ul:not([role]) { padding-left: 1.1em; }
.prose li + li { margin-top: var(--s1); }
.prose li::marker { color: var(--muted); }
@media (max-width: 599px) {
  /* on a phone a statement is a paragraph, as the home's Alliance paragraph is: never a six-line statement */
  .statement { font-size: 18px; line-height: 1.55; letter-spacing: 0; }
}

/* 5.2 subpage hero: one lit thing centred in the room with its title and one sentence beneath (direction §2).
   Picture variant (approach, solutions, alliance, firm): the frame is 58% of the screen's height at 16:10 (a third
   of a desktop screen, so the picture leads; the title stays at the heading step), centred; the picture's own
   edges are graded down to the ground, so it has no visible frame. At load the picture comes out of the dark from
   its own light (data-reveal="light", data-light for the wide cut, data-light-tall for the phone's) and the title
   rises line by line (data-reveal="lines"). Plain variant (.page-hero--plain: contact, legal notice, privacy): no
   picture, so the title takes the display step and leads by itself, on the margin. */
.page-hero { padding: var(--s5) var(--margin) 0; text-align: center; }
.page-hero__frame { position: relative; width: min(100%, calc(58svh * 1.6)); aspect-ratio: 16 / 10; margin-inline: auto; overflow: hidden; background: var(--bg); }
.page-hero__frame picture, .page-hero__frame img { display: block; width: 100%; height: 100%; }
.page-hero__frame img { object-fit: cover; }
.page-hero__title { margin-top: var(--s4); --delay: 120ms; }
.page-hero__sentence { max-width: 44ch; margin: var(--s3) auto 0; font-size: max(18px, var(--step-body)); line-height: 1.6; }
.page-hero--plain { padding-top: clamp(var(--s6), 8vw, var(--s8)); text-align: left; }
.page-hero--plain .page-hero__title { margin-top: 0; font-size: var(--step-display); line-height: 0.92; letter-spacing: -0.01em; --delay: 60ms; }
.page-hero--plain .page-hero__sentence { margin: var(--s5) 0 0; }
@media (max-width: 599px) {
  /* a portrait cut (its own <source>), as wide as the text column and never taller than 56% of the screen */
  .page-hero { padding-top: var(--s2); text-align: left; }
  .page-hero__frame { width: min(100%, calc(56svh * 0.8)); aspect-ratio: 4 / 5; margin-inline: 0; }
  .page-hero__sentence { margin-left: 0; }
  .page-hero--plain { padding-top: var(--s6); }
  .page-hero--plain .page-hero__sentence { margin-top: var(--s4); }
}

/* 5.3 closing band (approach, solutions, alliance, firm): the door at the end of the page. A panel one tone up from
   the room (--surface), within the margins, holding the title, the page's one primary button and the email, centred;
   it opens from its centre like a double door (data-reveal="door" data-door="centre" on .closing__panel). With
   data-mailto-subject on the section, its mailto links carry that subject (site.js §8). Its bottom space plus the
   footer's top make one section gap. */
.closing { padding-bottom: calc(var(--section) - var(--s7)); }
.closing__panel { padding: clamp(72px, 9vw, 144px) var(--margin); background: var(--surface); --door-fill: var(--surface); text-align: center; }
.closing__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s2) var(--s5); margin-top: var(--s5); }
.closing__email { display: inline-block; padding-block: 12px; }
@media (max-width: 599px) {
  .closing__panel { padding: var(--s7) var(--s3); }
  .closing__actions { flex-direction: column; align-items: stretch; margin-top: var(--s4); }
  .closing__actions .button { width: 100%; }
}

/* 5.4 long text (legal notice, privacy): one part per heading. On a desktop the headings stand in columns 1-4,
   level with the first line of their text, which runs from column 5 held to 65 characters; stacked below that.
   Bracketed placeholders ([Company name]) stay in the text and show in brass until counsel completes them.
   Nothing here moves: long reading text is never behind a reveal. */
.longtext { padding-bottom: calc(var(--section) - var(--s7)); }   /* the last part ends one section gap above the footer's columns, as a closing band does */
.longtext__part + .longtext__part { margin-top: var(--s6); }
.longtext__body { margin-top: var(--s2); max-width: 65ch; }
.longtext__body > * + * { margin-top: 1em; }
/* a link in the text (an email): underlined in brass, as links inside a sentence are, so it reads as a link without
   colour alone; the line turns to ink on hover and focus. An address may break anywhere rather than overflow */
.longtext__body a { text-decoration-color: var(--accent); overflow-wrap: anywhere; transition: text-decoration-color var(--t-hover) var(--ease-out); }
.longtext__body a:hover, .longtext__body a:focus-visible { text-decoration-color: currentColor; }
.placeholder { color: var(--accent); }
@media (min-width: 1100px) {
  .longtext__part { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
  .longtext__title { grid-column: 1 / 5; }
  .longtext__body { grid-column: 5 / 13; margin-top: 0; }
}
@media (max-width: 599px) {
  .longtext__part + .longtext__part { margin-top: var(--s5); }
}

/* 5.5 terms table ("The terms, in short"): a real table, label and value per row; tables may draw lines. Wrapped
   in a door that opens from its top edge (a sheet): its rows arrive in up to four steps */
.terms { width: 100%; border-collapse: collapse; line-height: 1.5; }
.terms th, .terms td { padding: var(--s3) 0; border-top: 1px solid var(--map-land); text-align: left; vertical-align: baseline; }
.terms tr:last-child > * { border-bottom: 1px solid var(--map-land); }
.terms th { width: 36%; padding-right: var(--gutter); font-weight: 400; color: var(--muted); }
@media (max-width: 599px) {
  .terms th, .terms td { padding-block: var(--s2); }
  .terms th { width: 42%; }
}

/* 5.6 sequence (approach, "From first call to closing"): a real <ol> whose order is shown by place alone, each item
   further along a falling diagonal; no step labels, no numerals. Set for five items: (items - 1) x --step + --w
   must make 100%, so a page with another count sets both on its list. */
.sequence { --step: 14%; --w: 44%; display: grid; row-gap: var(--s4); }
.sequence > li { width: var(--w); }
.sequence > li:nth-child(2) { margin-left: var(--step); }
.sequence > li:nth-child(3) { margin-left: calc(2 * var(--step)); }
.sequence > li:nth-child(4) { margin-left: calc(3 * var(--step)); }
.sequence > li:nth-child(5) { margin-left: calc(4 * var(--step)); }
.sequence > li:nth-child(6) { margin-left: calc(5 * var(--step)); }
@media (max-width: 1099px) { .sequence { --step: 8%; --w: 68%; } }
@media (max-width: 599px) { .sequence { --step: 4%; --w: 84%; row-gap: var(--s3); } }

/* 5.7 a list set large ("What we look for"): one item to a line at the lead step (Jost), no markers, space between */
.biglist > li { max-width: 34em; }
.biglist > li + li { margin-top: var(--s3); }

/* 5.8 partners (firm): explicit placeholders, each with a drawn monogram square ("PN") where a portrait would be;
   the square is a small door (its seam) */
.partners { display: grid; gap: var(--s6) var(--gutter); }
.partner { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s3); align-items: start; }
.monogram {
  position: relative; display: grid; place-items: center; width: calc(var(--step-head) * 2.4); aspect-ratio: 1; background: var(--surface);
  color: var(--muted); letter-spacing: 0.02em; --door-fill: var(--surface);
}
.partner__role { margin-top: 4px; color: var(--muted); }
.partner__bio { margin-top: var(--s2); max-width: 36ch; }
@media (min-width: 900px) { .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 5.9 the live thing's optional fields (contact): site.js writes Name, Firm and Message into the email's body.
   Visible labels and no placeholders; a field is its fill plus one line under it (form fields may draw lines). */
.shape__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--gutter); margin-top: var(--s5); }
.field { display: grid; align-content: start; gap: var(--s1); min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-weight: 500; line-height: 1.4; }
.field__input {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--muted);   /* taste-skill-ignore: a form field's line, where the visitor types */
  border-radius: 0; background: var(--surface); color: var(--ink); line-height: 1.4;
  transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.field__input:hover { background: var(--surface-2); }
.field__input:focus { border-bottom-color: var(--ink); }
.field__input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: inset 0 0 0 60px var(--surface); }   /* taste-skill-ignore: not a shadow; an inset fill that keeps an autofilled field in the room's colours */
textarea.field__input { min-height: 168px; resize: vertical; line-height: 1.5; }
@media (max-width: 599px) {
  .shape__fields { order: 5; grid-template-columns: minmax(0, 1fr); margin-top: var(--s4); }
}
@media (min-width: 1100px) and (min-height: 700px) {
  /* with the fields the inputs run most of a screen longer than the answer: the answer and its button travel down
     beside them, so the button is in reach once the message is written (and that half of the screen is never bare) */
  .shape:has(.shape__fields) .shape__result { position: sticky; top: var(--s6); }
}

/* 5.10 the current page in the menu and the footer, told apart as in the header: full ink and a brass underline */
.menu__nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.site-footer__col a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }

/* 5.11 a subpage header without the menu (no JavaScript) on a phone: the five links take their own row under the
   wordmark instead of squeezing beside it */
@media (max-width: 599px) {
  html:not(.has-menu) body:not(.home) .site-header { flex-wrap: wrap; row-gap: 0; }
  html:not(.has-menu) body:not(.home) .site-nav { flex-basis: 100%; }
}

@media (forced-colors: active) {
  .monogram { border: 1px solid CanvasText; }   /* taste-skill-ignore: forced colours drop the fill, so the square needs a boundary */
  .field__input { border: 1px solid CanvasText; }   /* taste-skill-ignore: forced colours drop the fill, so the field needs a boundary */
  .closing__panel { border: 1px solid CanvasText; }   /* taste-skill-ignore: forced colours drop the fill, so the panel needs a boundary */
}

/* ---------- 6. motion: things light up ----------
   One vocabulary for every page, set in the markup by four values of data-reveal. site.js §2 prepares each one and
   fires it once, when its top passes 88% of the screen's height; whatever is on screen at load starts at once.
     data-reveal="lines"  a heading (h1, h2), or a display line (the contact email), lit line by line: each rendered line rises from behind its baseline while
                          its ink warms from 45% to full, 90ms apart, 800ms each, --ease-expo. site.js splits it by its
                          real lines (again when its width changes); its text, accessible name and selection stay as
                          they are.
     data-reveal="light"  a picture comes out of the dark: a feathered pool of light opens from the picture's own
                          source (data-light="x% y%", data-light-tall="x% y%" for a phone cut; the centre by default)
                          until the whole picture is lit, while it settles from 1.04 to 1; 1200ms, --ease-soft. Its
                          edges keep falling to the ground. On the frame that holds the <img> or <video>.
     data-reveal="door"   a panel opens like a door: a 1px brass line draws along one edge (450ms, --ease-out), the
                          panel opens from that edge (900ms, --ease-in-out, from 200ms; nothing inside shows beyond
                          the part already open), its contents arrive in up to four steps from 400ms, and the line
                          goes. data-door: "seam" (the default: the edge it shares with the panel before it; panels
                          in a row follow each other 90ms apart), "seam-end" (from its end edge: the left leaf of a
                          pair, opening from the seam it shares with the leaf after it), "top" (a sheet), or "centre"
                          (a double door). The panel's fill is its --door-fill, and it keeps that fill while it opens. A picture or a heading inside a door keeps its own reveal
                          and starts with the door (light 600ms after it, lines 300ms).
     data-reveal="fill"   the page's one statement, lit by the reading: each line goes from 45% ink to full as it is
                          scrolled through. Only from 1100px up, where the lead step is 24px or more (45% ink is
                          3.8:1, enough for large text only); below that it is simply there. At most one per page.
   The home's signature, at load and without waiting for site.js: the lamp's light spreads over the door (a third of
   the picture lit on the first frame, all of it by 1.2s) while "Golders" and "Capital" rise. Between pages, the old
   page goes dark (200ms) and the new one is lit (380ms), never more than 480ms.
   Never animated: running text, captions, facts, lists, links, buttons and controls (only their press, hover and
   focus feedback), the header, the menu's contents and the footer. Nothing loops, nothing waits for the scroll above
   the fold, nothing in view stays hidden more than 900ms, nothing moves the layout. Reduced motion, no script and
   print all show the finished page. */
/* a line is its own mask, drawn a little outside its box (ascenders, accents and descenders at the tightest
   line-height, 0.92) by a clip rather than padding, so splitting never moves the layout by a pixel */
.line { display: block; clip-path: inset(-0.25em -0.06em -0.3em); }
.line__inner { display: block; }
.is-done .line, [data-reveal="fill"] .line { clip-path: none; }   /* at rest the mask goes, so a focus ring is never cut; a
                                                                    statement's lines are lit, never masked */
@property --lit { syntax: "<number>"; inherits: true; initial-value: 140; }

@media (prefers-reduced-motion: no-preference) {
  /* the home's signature: the hero needs no script to begin */
  .js .hero__pic:not(.is-done) img {
    -webkit-mask-image: radial-gradient(circle at var(--light), #000 calc((var(--lit) - 34) * 1%), transparent calc(var(--lit) * 1%));   /* taste-skill-ignore: a mask (the light opening), not a fill */
    mask-image: radial-gradient(circle at var(--light), #000 calc((var(--lit) - 34) * 1%), transparent calc(var(--lit) * 1%));   /* taste-skill-ignore: a mask (the light opening), not a fill */
    animation: hero-light 1200ms var(--ease-soft) both;
  }
  .js .hero__word { animation: hero-rise var(--t-line) var(--ease-expo) 100ms both; }
  .js .hero__line--2 .hero__word { animation-delay: calc(100ms + var(--stagger-line)); }
  /* one moving picture: the door (or a subpage's lit object) comes a little closer as the page is scrolled */
  .hero__pic img, .page-hero__frame img { transform: scale(calc(1 + 0.06 * var(--hero-p, 0))); will-change: transform; }

  /* lines */
  .js [data-reveal="lines"]:not(.is-split) { opacity: 0; }   /* the instant before site.js finds its lines */
  .js [data-reveal="lines"]:not(.is-in) .line__inner { transform: translateY(calc(100% + 0.6em)); opacity: 0; }   /* below its mask; it rises from 45% ink */
  .js [data-reveal="lines"].is-in:not(.is-done) .line__inner {
    animation: line-rise var(--t-line) var(--ease-expo) calc(var(--delay, 0ms) + var(--n, 0) * var(--stagger-line)) both;
  }

  /* light */
  .js [data-reveal="light"] { background-color: var(--bg); --light: var(--light-wide, 50% 50%); }
  @media (max-width: 599px) { .js [data-reveal="light"] { --light: var(--light-tall, var(--light-wide, 50% 50%)); } }
  .js [data-reveal="light"]:not(.is-done) :is(img, video) {
    --lit: var(--lit-from, 30);
    -webkit-mask-image: radial-gradient(circle at var(--light), #000 calc((var(--lit) - 34) * 1%), transparent calc(var(--lit) * 1%));   /* taste-skill-ignore: a mask (the light opening), not a fill */
    mask-image: radial-gradient(circle at var(--light), #000 calc((var(--lit) - 34) * 1%), transparent calc(var(--lit) * 1%));   /* taste-skill-ignore: a mask (the light opening), not a fill */
  }
  .js [data-reveal="light"].is-in:not(.is-done) :is(img, video) { animation: light-up var(--t-light) var(--ease-soft) var(--delay, 0ms) both; }
  .js [data-reveal="door"] [data-reveal="light"] { --lit-from: 8; }   /* inside a door the picture waits in the dark */

  /* door */
  :where(.js [data-reveal="door"]) { position: relative; isolation: isolate; }
  .js [data-reveal="door"] {
    --door-shut: 0 100% 0 0; --door-edge: 0 calc(100% - 1px) 0 0;
    --door-line-inset: 0 auto 0 0; --door-line-w: 1px; --door-line-h: auto; --door-line-from: 1 0; --door-line-origin: 50% 0;
  }
  .js [data-reveal="door"][data-door="seam-end"] {   /* from its end edge: the left leaf of a pair, opening from the seam on its right */
    --door-shut: 0 0 0 100%; --door-edge: 0 0 0 calc(100% - 1px); --door-line-inset: 0 0 0 auto;
  }
  .js [data-reveal="door"][data-door="top"] {
    --door-shut: 0 0 100% 0; --door-edge: 0 0 calc(100% - 1px) 0;
    --door-line-inset: 0 0 auto 0; --door-line-w: auto; --door-line-h: 1px; --door-line-from: 0 1; --door-line-origin: 0 50%;
  }
  .js [data-reveal="door"][data-door="centre"] {
    --door-shut: 0 50% 0 50%; --door-edge: 0 calc(50% - 0.5px) 0 calc(50% - 0.5px);
    --door-line-inset: 0 auto 0 calc(50% - 0.5px); --door-line-w: 1px; --door-line-h: auto; --door-line-from: 1 0; --door-line-origin: 50% 0;
    --door-line-hold: 450ms;   /* a double door's seam is gone as its leaves part: it runs down the middle of the words */
  }
  .js [data-reveal="door"]::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--door-fill, transparent); clip-path: inset(var(--door-shut));
  }
  .js [data-reveal="door"]::after {   /* the line: over the surface, under the contents */
    content: ""; position: absolute; z-index: -1; inset: var(--door-line-inset); width: var(--door-line-w); height: var(--door-line-h);
    background: var(--accent); scale: var(--door-line-from); transform-origin: var(--door-line-origin); opacity: 0; pointer-events: none;
  }
  /* the whole panel is held to its edge until it opens, so nothing inside (a word, a picture's first light) shows
     beyond the part already open; the 1px edge left is where the line draws */
  .js [data-reveal="door"]:not(.is-done) { clip-path: inset(var(--door-edge)); }
  .js [data-reveal="door"]:not(.is-in) { background-color: transparent; }   /* shut: nothing but the 1px edge where the line draws */
  /* opening: the panel keeps its own fill, clipped to the part already open (door-clip, in step with ::before), so
     the open part is the panel itself at every frame, never bare ground behind it */
  .js [data-reveal="door"].is-in:not(.is-done) { background-color: var(--door-fill, transparent); }
  .js [data-reveal="door"]:not(.is-in) .door__item { opacity: 0; }
  .js [data-reveal="door"].is-in:not(.is-done) { animation: door-clip var(--t-door) var(--ease-in-out) calc(var(--delay, 0ms) + 200ms) both; }
  .js [data-reveal="door"].is-in:not(.is-done)::before { animation: door-open var(--t-door) var(--ease-in-out) calc(var(--delay, 0ms) + 200ms) both; }
  .js [data-reveal="door"].is-in:not(.is-done)::after {
    animation: door-line 450ms var(--ease-out) var(--delay, 0ms) both,
      door-line-out 500ms linear calc(var(--delay, 0ms) + var(--door-line-hold, 750ms)) both;
  }
  .js [data-reveal="door"].is-in:not(.is-done) .door__item {
    animation: door-item 700ms var(--ease-out) calc(var(--delay, 0ms) + 400ms + var(--k, 0) * var(--stagger-step)) both;
  }
  .js [data-reveal="door"].is-done::before { clip-path: none; }
  /* a panel taken by the keyboard before it has opened is open */
  .js [data-reveal="door"]:focus-within, .js [data-reveal="door"]:focus-within::before { clip-path: none; animation: none; }
  .js [data-reveal]:focus-within .door__item { opacity: 1; translate: none; animation: none; }
  .js [data-reveal]:focus-within .line__inner { opacity: 1; transform: none; animation: none; }

  /* fill: from 1100px up, where scroll-driven timelines exist; each line lights as it crosses the lower half */
  @supports (animation-timeline: view()) {
    @media (min-width: 1100px) {
      .js [data-reveal="fill"] .fill__unit { animation: ink-fill linear both; animation-timeline: view(); animation-range: cover 18% cover 42%; }
    }
  }

  .menu[open] { animation: menu-in var(--t-ui) var(--ease-out); }

  /* between pages (same origin, http or https; file:// has no transitions): the old page goes dark, the new is lit */
  @view-transition { navigation: auto; }
  ::view-transition { background-color: #0A1230; }
  ::view-transition-old(root) { animation: page-out 200ms var(--ease-exit) both; }
  ::view-transition-new(root) { animation: page-in 380ms var(--ease-soft) 100ms both; }
}
/* the home's statement is pinned while its three pictures pass: each line lights as its own picture comes to the
   middle of the screen (the pinned lines cannot measure their own scroll) */
@supports (animation-timeline: view()) and (timeline-scope: --a) {
  @media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
    .think__run { timeline-scope: --think-1, --think-2, --think-3; }
    .think__fig--1 { view-timeline-name: --think-1; }
    .think__fig--2 { view-timeline-name: --think-2; }
    .think__fig--3 { view-timeline-name: --think-3; }
    .js .think__statement .fill__unit { animation-range: entry 40% cover 50%; }
    .js .think__statement .fill__unit:nth-child(1) { animation-timeline: --think-1; }
    .js .think__statement .fill__unit:nth-child(2) { animation-timeline: --think-2; }
    .js .think__statement .fill__unit:nth-child(3) { animation-timeline: --think-3; }
  }
}
@supports not (timeline-scope: --a) {
  .js .think__statement .fill__unit { animation: none; }
}
@keyframes hero-light { from { --lit: 64; scale: 1.04; } to { --lit: 140; scale: 1; } }
@keyframes hero-rise { from { transform: translateY(130%); opacity: 0.45; } to { transform: none; opacity: 1; } }
@keyframes line-rise { from { transform: translateY(calc(100% + 0.6em)); opacity: 0.45; } to { transform: none; opacity: 1; } }
@keyframes light-up { from { --lit: var(--lit-from, 30); scale: 1.04; } to { --lit: 140; scale: 1; } }
@keyframes door-open { from { clip-path: inset(var(--door-shut)); } to { clip-path: inset(0 0 0 0); } }
@keyframes door-clip { from { clip-path: inset(var(--door-edge)); } to { clip-path: inset(0 0 0 0); } }
@keyframes door-line { from { opacity: 1; scale: var(--door-line-from); } to { opacity: 1; scale: 1 1; } }
@keyframes door-line-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes door-item { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }   /* translate, so a part's own transform (a map label's) stays */
@keyframes ink-fill { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }

/* printed, everything is there and finished */
@media print {
  .js [data-reveal], .js .line__inner, .js .door__item, .js .fill__unit, .js .hero__word { opacity: 1 !important; animation: none !important; }
  .js .line__inner, .js .hero__word, .js .hero__pic img, .js .page-hero__frame img { transform: none !important; }
  .js .door__item { translate: none !important; }
  .js .line { clip-path: none !important; }
  .js [data-reveal="light"] :is(img, video), .js .hero__pic img {
    -webkit-mask-image: none !important; mask-image: none !important; scale: none !important; animation: none !important;
  }
  .js [data-reveal="door"], .js [data-reveal="door"]::before { clip-path: none !important; animation: none !important; }
  .js [data-reveal="door"]::after { display: none !important; }
}

/* several needs can be ticked: the hint beside the legend */
.shape__hint { font-weight: 400; color: var(--muted); margin-left: 0.4em; }

/* the founder's logos: white on navy (header, menu, footer), blue on paper (the contact field) */
.brand-logo { display: block; height: 64px; width: auto; max-width: none; }
.brand-logo--menu { height: 48px; }
.home .site-header__brand span { display: inline; }
.footer-logo { display: block; width: 100%; max-width: 1100px; height: auto; }
.contact__logo { display: block; width: 100%; max-width: 360px; height: auto; flex-basis: 100%; margin-bottom: var(--s2); }
@media (max-width: 599px) { .brand-logo { height: 44px; } .contact__logo { max-width: 260px; } }

/* the needs, in rows: a label on the left (Growth capital, Liquidity, Advice), its choices beside it */
.chip-rows { display: grid; gap: var(--s1); margin-top: var(--s2); }
.chip-row { display: flex; align-items: flex-start; gap: var(--s1); }
.chip-row__label { flex: 0 0 156px; white-space: nowrap; display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border: 1px solid var(--map-land, #2D4374); color: var(--muted); font-weight: 500; line-height: 1.2; }
.chip-row .chips { margin-top: 0; flex: 1; }
@media (max-width: 599px) {
  .chip-row { flex-direction: column; gap: 8px; }
  .chip-row__label { flex: none; min-height: 0; padding: 0; border: 0; }
}
@media (min-width: 1100px) {
  /* the needs run the full width, one row per group; the answer stands beside the heading above them */
  .shape-section .grid { grid-template-rows: auto auto 1fr auto; }
  .shape { grid-row: 1 / 5; }
  .shape__inputs { grid-column: 1 / -1; grid-row: 4; }
  .shape__purpose, .shape__amount { max-width: 1100px; }
  .shape__result { grid-column: 8 / 13; grid-row: 1 / 4; }
  .chip-row .chips { flex-wrap: nowrap; }
}

/* "More than €30m": a chip under the slider; when ticked, the slider dims */
.shape__above { margin-top: var(--s2); }
.range.is-off { opacity: 0.35; }

/* the founder's new door photograph, shown whole from 600px: the hero takes the picture's own proportions; a navy
   shade from the left keeps the name and the sentence readable on the lit stone */
.hero__pic { --light: 93% 15%; }
.hero__pic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 18, 48, 0.88) 0%, rgba(10, 18, 48, 0.62) 42%, rgba(10, 18, 48, 0.15) 62%, rgba(10, 18, 48, 0) 72%);
}
@media (min-width: 600px) {
  .hero { height: auto; min-height: 0; aspect-ratio: 1672 / 941; }
  .hero__pic img, .hero__pic img[height] { height: 100%; object-fit: cover; object-position: 50% 50%; }
}
@media (max-width: 599px) {
  .hero__pic img { object-position: 60% 0; }
  .hero__pic::after { background: linear-gradient(180deg, rgba(10, 18, 48, 0.55) 0%, rgba(10, 18, 48, 0.1) 40%, rgba(10, 18, 48, 0) 60%); }
}

/* the home's giant name is gone: the title is kept for screen readers only, and the logo shows in the header at every width */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.home .site-header__brand { display: block; }
@media (max-width: 1279px) {
  .home .site-header { left: 0; display: flex; justify-content: space-between; align-items: center; }
}

/* the sentence moves left, onto the page margin, now that the giant name no longer frames it */
@media (min-width: 1100px) {
  .hero__middle { margin-left: 0; width: clamp(300px, 30vw, 46ch); }
}

/* the giant email is gone: the paper field is only as tall as its words; the film follows it at the foot of the page */
.contact, .contact { min-height: 0; grid-template-rows: auto auto; row-gap: var(--s5); }
@media (max-width: 599px) { .contact { min-height: 0; } }

/* the firm's values, set large */
.values__list > li { font-family: var(--font-display); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.1; font-variation-settings: "opsz" 27; }

/* ---------- v14 edits to the home page ---------- */

/* what we finance: a tag line under each description, in brass */
.finance__tag { display: block; margin-top: var(--s1); color: var(--accent); font-style: italic; line-height: 1.4; }

/* how we work, desktop: the title and the three paragraphs stand in one column to the right of the picture; the spaces
   between them are small and equal, and the picture is exactly as tall as the column (title level with its top, the
   last paragraph ending at its foot) */
.work__words { display: contents; }
@media (max-width: 1099px) {
  .work__title { order: 1; } .work__pic--1 { order: 2; } .work__text { order: 3; }
  .work__words > * { grid-column: 1 / -1; min-width: 0; }   /* the wrapper is display: contents, so the grid's own rule no longer reaches them */
}
@media (min-width: 1100px) {
  .work.grid { align-items: stretch; }
  .work__words { display: flex; flex-direction: column; gap: var(--s4); grid-column: 4 / 9; grid-row: 1; margin-left: var(--s5); }
  .work__title { white-space: nowrap; }
  .work__words > * { margin: 0; grid-column: auto; grid-row: auto; }
  .work__pic--1 { grid-column: 1 / 4; grid-row: 1; aspect-ratio: auto; }
  .work__pic--1 picture { position: absolute; inset: 0; }
}

/* paris and london: our values, a navy tile just under the picture */
.cities__values { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s5); padding: var(--s3) var(--s4); background: var(--field-navy); color: var(--ink); }
.cities__values-title { font-family: var(--font-text); font-size: var(--step-small); font-weight: 500; line-height: 1.4; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; }
.cities__values-list { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); font-size: var(--step-body); line-height: 1.3; }

/* the anchor alliance: a picture to the left of the text */
.alliance__pic { margin-top: var(--s6); }
@media (min-width: 600px) and (max-width: 1099px) { .alliance__pic { grid-column: 1 / 8; } }
@media (min-width: 1100px) {
  .alliance__pic { grid-column: 1 / 5; grid-row: 2 / 4; align-self: start; }
  .alliance__para { grid-column: 5 / 13; grid-row: 2; }
  .alliance__list--investors { grid-column: 5 / 9; grid-row: 3; }
  .alliance__list--gps { grid-column: 9 / 13; grid-row: 3; }
}

/* footer: with the wordmark gone, the legal line takes its space */
.site-footer__cols + .site-footer__legal { margin-top: var(--s7); }

/* home hero: the first line of the sentence set as a display line, white over light blue */
.hero__lede {
  display: block; margin-bottom: var(--s3);
  font-family: var(--font-display); font-size: var(--step-head); font-weight: var(--wght-head); line-height: 1.04;
  letter-spacing: -0.02em; font-variation-settings: "opsz" var(--opsz-head); color: var(--ink);
}
.hero__lede-1, .hero__lede-2 { display: block; }
.hero__lede-2 { color: var(--sky); }
@media (min-width: 1100px) { .hero__lede { white-space: nowrap; } }   /* two lines, as set, wider than the narrow column */

.cities__mapwrap { position: relative; margin-top: var(--s5); }
.cities__mapwrap .cities__tile { margin-top: 0; }
@media (min-width: 600px) and (max-width: 1099px) { .cities__mapwrap { grid-column: 1 / 7; } }
@media (min-width: 1100px) { .cities__mapwrap { grid-column: 9 / 13; grid-row: 3; margin-top: var(--s7); } }

/* the anchor alliance: the two lists as one block, its foot on the foot of the picture, the headings on one line */
.alliance__lists { display: grid; gap: var(--s5) var(--gutter); margin-top: var(--s6); align-items: start; }
.alliance__lists .alliance__list { grid-column: auto; grid-row: auto; margin-top: 0; }
@media (min-width: 600px) { .alliance__lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .alliance__lists { grid-column: 5 / 13; grid-row: 3; align-self: end; margin-top: 0; } }

/* paris and london: the picture and the values tile end where the text on the right ends */
/* paris and london: the facade picture keeps its own 16:10 proportions, a little smaller than the full eight columns */
@media (min-width: 1100px) {
  .cities__figure { grid-column: 1 / 8; grid-row: 3 / 6; }
}
}

}

/* investment criteria: the title and the stack of documents form one block (the picture is as wide as the title);
   the list stands to its right, its first line level with the top of the picture */
.criteria__head { width: fit-content; max-width: 100%; }
.criteria__pic { margin-top: var(--s4); }
.criteria__facts { margin-top: var(--s5); gap: var(--s5) var(--gutter); }
@media (min-width: 600px) { .criteria__title { white-space: nowrap; } }
@media (min-width: 1100px) {
  .criteria.grid { align-items: start; }
  .criteria__head { grid-column: 1 / 8; grid-row: 1; }
  .criteria__facts { grid-column: 8 / 13; grid-row: 1; margin-top: calc(var(--step-head) * 1.04 + var(--s4)); }
}

/* investment criteria, desktop: the picture runs from the top of "Tickets" down to the foot of the last line ("Terms"),
   so its height follows the list; its width is still the title's */
@media (min-width: 1100px) {
  .criteria__head { align-self: stretch; position: relative; }
  /* a quarter smaller than the title-wide, list-high picture: three quarters of its width and of its height, from the same top-left corner */
  .criteria__head .criteria__pic { position: absolute; left: 0; right: 25%; width: auto; top: calc(var(--step-head) * 1.04 + var(--s4)); bottom: 0; margin: 0; aspect-ratio: auto; }   /* three quarters of the title's width; from the top of Tickets to the foot of Terms */
}

/* paris and london: the values, each with its meaning at the right, in a smaller size */
.cities__values { display: grid; grid-template-columns: 1fr; gap: var(--s2); align-items: start; padding: var(--s3) var(--s4); }
.cities__values-list { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.cities__values-list li { display: grid; grid-template-columns: 1fr; gap: 2px; }
.cities__value-name { font-size: var(--step-body); line-height: 1.3; color: var(--ink); }
.cities__value-text { font-size: var(--step-small); line-height: 1.4; color: var(--muted); }
@media (min-width: 600px) {
  .cities__values { grid-template-columns: max-content 1fr; gap: var(--s4); }
  .cities__values-list { gap: var(--s1); }
  .cities__values-list li { grid-template-columns: 6.5rem 1fr; gap: var(--s3); align-items: baseline; }
}

/* tablet and phone: a quarter smaller than the title's width */
@media (max-width: 1099px) { .criteria__pic { width: 75%; } }


/* the anchor alliance: the words stand 72px from the picture, as the paragraphs of How we work do from theirs (one gutter and 48px) */
@media (min-width: 1100px) {
  .alliance__para, .alliance__lists { margin-left: var(--s5); }
}

/* paris and london: less space between the lead sentence and the pictures under it (the map tile stays level with the facade) */
.cities__figure { margin-top: var(--s5); }
@media (min-width: 1100px) { .cities__mapwrap { margin-top: var(--s5); } }

/* paris and london: the values tile, more compact (less padding, smaller type, tighter rows) */
.cities__values { padding: var(--s2) var(--s3); gap: var(--s1); }
.cities__values-title { font-size: 0.8125rem; }
.cities__values-list { gap: 2px; }
.cities__value-name { font-size: var(--step-small); line-height: 1.3; }
.cities__value-text { font-size: 0.8125rem; line-height: 1.35; }
@media (min-width: 600px) {
  .cities__values { gap: var(--s3); }
  .cities__values-list li { grid-template-columns: 5.75rem 1fr; gap: var(--s2); }
}
@media (max-width: 599px) { .cities__values-list { gap: var(--s1); } }

/* footer: the address on the left, the email in the middle of the page, the two legal links on the right */
@media (min-width: 600px) {
  .site-footer__col:nth-child(1) { grid-column: 1 / 5; text-align: left; }
  .site-footer__col:nth-child(2) { grid-column: 5 / 9; text-align: center; }
  .site-footer__col:nth-child(3) { grid-column: 9 / 13; text-align: right; }
}

/* investment criteria: the labels (Tickets, Asset classes...) at the running size, like the other small titles of the page */
.criteria__facts dt { font-size: var(--step-body); line-height: 1.4; }


/* "Let's talk" band: the logo on the left, the two cities in the middle of the page (level with the email in the footer below), LinkedIn on the right */
@media (min-width: 600px) {
  .contact__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; }
  .contact__logo { flex-basis: auto; justify-self: start; margin-bottom: 0; }
  .contact__places { justify-self: center; }
  .contact__social { justify-self: end; }
}

/* footer: the copyright line at the same size as the address and links above it */
.site-footer__legal { font-size: var(--step-small); line-height: 1.7; }

/* how we think, desktop: the pictures pass closer together (the space between one caption and the next picture, 30svh before) */
@media (min-width: 1100px) { .think__pictures { row-gap: 12svh; } }

/* how we think, desktop: less space between the hero picture and the title (the title sits 64px inside the pinned column, so this adds to that) */
@media (min-width: 1100px) { .think.section { padding-top: var(--s5); } }

/* what we finance, desktop: less space between the last picture of How we think and this title */
@media (min-width: 1100px) { .finance-section { padding-top: var(--s5); } }

/* investment criteria, desktop: less space between the end of What we finance and this title (112px, as above the other titles) */
@media (min-width: 1100px) { .criteria-section { padding-top: calc(var(--s7) + var(--s2)); } }

/* investment criteria, desktop: the list in two columns (Tickets | Asset classes, Geography | Financing, Terms), so that it is as high as the picture */
@media (min-width: 1100px) {
  .criteria__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
}

/* paris and london: the picture and the values tile across the full eight columns, so each value and its meaning fit on one line */
@media (min-width: 1100px) { .cities__figure { grid-column: 1 / 9; } }

/* investment criteria, desktop: the first column only as wide as its words, the second takes the rest, so that Asset classes and Financing fit on two lines */
@media (min-width: 1100px) {
  .criteria__facts { grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s5); }
}

/* what are you financing? desktop: the chip rows are as wide as the widest one (Liquidity, ending on "Recap"); the chips of the
   Growth capital row share the extra width, so that both rows end on the same line */
@media (min-width: 1100px) {
  .chip-rows { width: fit-content; max-width: 100%; }
  .chip-row .chip { flex: 1 1 auto; }
  .chip-row .chip span { width: 100%; justify-content: center; text-align: center; }
}

/* paris and london: the lead sentence a little smaller (90% of the running lead size) */
.cities__lead { font-size: calc(var(--step-lead) * 0.9); }

/* the anchor alliance: the lead sentence at the same size as the one in Paris and London (90% of the running lead size) */
.alliance__para { font-size: calc(var(--step-lead) * 0.9); }

/* phone and tablet: the three paragraphs of How we work all start at the left edge, as the first one does */
@media (max-width: 1099px) {
  .work__words > .work__text--2 { width: auto; justify-self: start; }
}
/* phone: the blue logo in "Let's talk" keeps its own proportions (in a column, flex-basis 100% had stretched its height) */
@media (max-width: 599px) {
  .contact__logo { flex: 0 0 auto; width: 100%; max-width: 260px; height: auto; align-self: flex-start; }
}

/* legal notice and privacy: the page title at half the display size (it was as large as the home hero) */
.page-hero--plain .page-hero__title { font-size: max(44px, calc(var(--step-display) * 0.5)); }

/* language switch: the two flags at the right of the header; the current language is full colour and ringed in brass */
.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-switch a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
.lang-switch svg { display: block; width: 28px; height: 19px; border-radius: 2px; opacity: 0.6; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); transition: opacity var(--t-hover) var(--ease-out); }
.lang-switch a:hover svg, .lang-switch a:focus-visible svg { opacity: 1; }
.lang-switch a[aria-current="true"] svg { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
@media (min-width: 1280px) { .home .lang-switch { position: absolute; top: 4px; right: calc(var(--margin) - 10px); } }   /* on the wide home the logo sits at the top right: the flags go above it without moving it */

/* French: the values' meanings are longer; between 1280 and 1339px they wrap instead of running past the tile */

/* French: the longer second line of the hero heading crosses the pale stone, so it gets a soft navy halo for contrast */
html[lang="fr"] .hero__lede-2 { text-shadow: 0 0 18px rgba(10, 18, 48, 0.65), 0 0 4px rgba(10, 18, 48, 0.35); }

/* French hero: "pour les sociétés de gestion de marchés privés" is long; it wraps inside a measure instead of running across the whole picture */
@media (min-width: 1100px) {
  html[lang="fr"] .hero__lede { white-space: normal; width: max-content; max-width: min(56vw, 900px); }
}

/* French criteria: the first column is capped (the "Conditions" line is long and would otherwise stretch it), so that
   Classes d'actifs and Financement keep room for two lines */
@media (min-width: 1100px) {
  html[lang="fr"] .criteria__facts { grid-template-columns: minmax(0, 14em) minmax(0, 1fr); column-gap: var(--s4); }
}

/* the advice column: one sentence for the four names Seed capital transactions to Buy-side M&A, opened by a click (or a key), never by the pointer; the slot's own text stays */
.finance__group--advice.is-open > .finance__desc--group { display: block; max-width: 36ch; margin: 14px 0 0; color: var(--ink); line-height: 1.5; }
@media (min-width: 1100px) {
  .finance__group--advice.is-open > .finance__desc--group {
    position: absolute; top: calc(var(--finance-default-h, 0px) + var(--s3)); left: var(--slot-x); width: var(--slot-w); max-width: none; margin: 0;
    visibility: visible; opacity: 1; transition-delay: 0s;
  }
  /* a name that has its own description wins while the pointer is on it */
  .finance:has(.finance__items li:not(.finance__li--group):hover) .finance__desc--group { visibility: hidden; opacity: 0; }
}

/* What are you financing? on a wide screen: the form stands in columns 1-7 and the answer in columns 8-12, one gutter apart.
   The reading is level with the needs (the chips), the strip of slabs level with the slider, so the brass plate sits in the
   line of the slider; the button closes the form under it. From 1100px; below, the layout above is unchanged. */
@media (max-width: 1099px) { .shape__answer { display: contents; } }
@media (min-width: 1100px) {
  .shape-section .grid { grid-template-rows: auto auto 1fr auto auto auto; }
  .shape { grid-row: 1 / 7; }
  .shape__inputs, .shape__result { display: contents; }
  .shape__purpose { grid-column: 1 / 8; grid-row: 4; margin-top: var(--s6); max-width: none; }
  .shape__amount { grid-column: 1 / 8; grid-row: 5; margin-top: var(--s5); max-width: none; }
  /* the answer takes no height of its own (its text may run 2 to 5 lines): the form and the strip never move when it changes */
  .shape__answer { grid-column: 8 / 13; grid-row: 4; align-self: start; height: 0; overflow: visible; margin-top: calc(var(--s6) + var(--step-body) * 1.4 + var(--s2)); }
  .shape__answer .shape__reading { font-size: var(--step-body); line-height: 1.4; min-height: 0; }
  .shape__answer .shape__within { margin-top: var(--s1); line-height: 1.4; }
  .shape__line { grid-column: 8 / 13; grid-row: 5; align-self: stretch; height: auto; min-height: 140px; margin-top: var(--s5); }
  .shape__line [data-entity="mc"] .shape__pic img { object-position: 50% 50%; }
  .shape__button { grid-column: 8 / 13; grid-row: 6; justify-self: start; margin-top: var(--s4); margin-left: calc(100% * 13 / 24); translate: -50% 0; }   /* just under the brass plate, centred on it: the plate's centre is 13/24 of the strip in */
}

/* "Shape the conversation", desktop: less space between the end of Paris and London and this title (112px, as between the other sections) */
@media (min-width: 1100px) { .shape-section { padding-top: calc(var(--s7) + var(--s2)); } }

/* the anchor alliance, wide screens: the whole block (title, picture, paragraph, lists) steps to the right, onto the axis of the
   words of How we work (the fourth column and 48px), so the two sections stagger; Paris and London returns to the left margin */
@media (min-width: 1440px) {
  .alliance.grid { padding-left: calc(var(--margin) + (100% - 2 * var(--margin) - 11 * var(--gutter)) / 12 * 3 + 3 * var(--gutter) + var(--s5)); }
}
@media (min-width: 1100px) { .alliance__lists { margin-top: var(--s5); } }   /* a clear space between the paragraph and the lists */

/* home hero: a little more air under the blue line, and the white sentence on three lines on a desktop (a narrower measure in English;
   the French sentence is longer and keeps its width, which already gives three lines) */
.hero__lede { margin-bottom: calc(var(--s4) + var(--s1)); }
@media (min-width: 1100px) { html:not([lang="fr"]) .hero__middle { width: clamp(300px, 30vw, 38ch); } }

/* the space before and after "The Golders Anchor Alliance", desktop: 112px, as between the other sections (it was 154 to 220px) */
@media (min-width: 1100px) { .alliance-section, .cities-section { padding-top: calc(var(--s7) + var(--s2)); } }

/* How we think: the caption is exactly as wide as its picture and its lines run from the picture's left edge to its right edge
   (justified, with hyphenation, the last line short); below 1100px the caption stands beside the picture and is left as it was */
@media (min-width: 1100px) {
  .think__fig figcaption { max-width: none; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
}

/* How we work, desktop: the three paragraphs run from the left edge of the column to its right edge (justified, with hyphenation,
   the last line of each short), as the captions of How we think do under their pictures */
@media (min-width: 1100px) {
  .work__text { max-width: 44ch; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }   /* a little wider (44 characters instead of 36) so that justified lines stay evenly spaced; only long words are split */
}

/* below 1440px (the strip stands above the form): the button is also centred under the brass plate */
@media (min-width: 1100px) and (max-width: 1439px) { .shape__button { margin-left: calc(100% * 13 / 24); translate: -50% 0; } }

/* How we work, French, desktop: the three paragraphs are exactly as wide as the title, so their right edge falls on the end of
   the word "travailler" (the title cannot wrap, so the column takes its width) */
@media (min-width: 1100px) {
  html[lang="fr"] .work__words { width: min-content; }
  html[lang="fr"] .work__text { max-width: none; }
}

/* The anchor alliance, desktop (French and English): the white paragraph spans the whole block, as wide as the two columns under it, so that
   its right edge falls on the right edge of the right-hand column; all three texts are justified (long words only are split);
   the left-hand text keeps a clear space on its right, which brings it to four lines like the text beside it */
@media (min-width: 1100px) {
  .alliance__para { max-width: none; text-wrap: pretty; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
  .alliance__list li { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
  .alliance__list--investors { padding-right: var(--alliance-pad, 18%); }
  html:not([lang="fr"]) { --alliance-pad: 18%; }
  html[lang="fr"] { --alliance-pad: 6%; }   /* the French text on the left is longer: a lighter space keeps its lines evenly spaced */
  /* English: the paragraph and the lists share one narrower measure, counted in letters (36 body sizes) rather than in screen width, so that the
     justified lines keep close word spacing at every screen size */
  html:not([lang="fr"]) .alliance__para, html:not([lang="fr"]) .alliance__lists { max-width: calc(var(--step-body) * 36); }
}

/* French: the label of the second row of needs, "Liquidité et transmission", is longer: it may take two lines in the same box */
@media (min-width: 1100px) { html[lang="fr"] .chip-row__label { white-space: normal; line-height: 1.2; } }

/* the lists can run taller than the picture (narrow columns, longer texts): from 1100px the picture stretches down to their foot (never flatter than 16:10) */
@media (min-width: 1100px) {
  .alliance__pic { align-self: stretch; aspect-ratio: auto; }
  .alliance__pic::before { content: ""; display: block; padding-top: 62.5%; }
  .alliance__pic picture { position: absolute; inset: 0; }
}

/* home hero, alive. The door drifts very slowly (a zoom of 7% and a shift of about 1% over 36 seconds, back and forth) and the brass lamp
   breathes a little warm light. Both start when the entrance has finished and pause when the hero is out of sight; under reduced
   motion nothing moves. The drift uses the single properties scale and translate, so the scroll zoom (transform) and the entrance
   (scale) of the picture are untouched. */
.hero__drift { position: absolute; inset: 0; transform-origin: 70% 20%; }
.hero__glow {
  --glow-size: clamp(180px, 22vw, 420px);
  position: absolute; left: var(--glow-x, -999px); top: var(--glow-y, -999px);
  width: var(--glow-size); height: var(--glow-size); margin: calc(var(--glow-size) / -2) 0 0 calc(var(--glow-size) / -2);
  border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 205, 140, 0.5) 0%, rgba(255, 175, 95, 0.2) 32%, rgba(255, 160, 80, 0) 68%);
}
@media (prefers-reduced-motion: no-preference) {
  /* the first picture is already the pull-back video's first frame: 12% closer and shifted as the video's is, so the video comes in over it
     without a jump; the photograph's own framing comes only with the video's end ("ambient") */
  .js .hero__pic:not(.ambient) .hero__drift { scale: 1.12; translate: -1.5% 1%; }
  .js .hero__pic.ambient .hero__drift { animation: hero-drift 36s ease-in-out infinite alternate; will-change: transform; }
  .js .hero__pic.ambient .hero__glow { animation: lamp-in 2400ms ease-out both, lamp-breathe 7s ease-in-out 2400ms infinite alternate; }
  /* without the video, the same pull-back is done on the photograph, then the drift goes on from where it stops */
  .js .hero__pic.pullback-css .hero__drift { animation: pullback 10s cubic-bezier(0.25, 0.5, 0.45, 1) both, hero-drift 36s ease-in-out 10s infinite alternate; }
  /* the same speed profile as the video's: constant for most of the move, slowing at the end, never speeding up */
  .js .hero__pic.pullback-css .hero__drift { animation-timing-function: linear(0, 0.0211 4.17%, 0.0729 8.33%, 0.125 12.5%, 0.1771 16.67%, 0.2292 20.83%, 0.2813 25%, 0.3333 29.17%, 0.3854 33.33%, 0.4375 37.5%, 0.4896 41.67%, 0.5417 45.83%, 0.5938 50%, 0.6458 54.17%, 0.6979 58.33%, 0.75 62.5%, 0.802 66.67%, 0.8525 70.83%, 0.8982 75%, 0.9363 79.17%, 0.9653 83.33%, 0.9846 87.5%, 0.9953 91.67%, 0.9994 95.83%, 1), ease-in-out; }
  .js .hero__pic.is-away .hero__drift, .js .hero__pic.is-away .hero__glow { animation-play-state: paused; }
}
@keyframes pullback { from { scale: 1.12; translate: -1.5% 1%; } to { scale: 1; translate: 0 0; } }
@keyframes hero-drift { from { scale: 1; translate: 0 0; } to { scale: 1.07; translate: -1.2% 0.8%; } }
@keyframes lamp-in { from { opacity: 0; } to { opacity: 0.55; } }
@keyframes lamp-breathe { from { opacity: 0.55; scale: 0.96; } to { opacity: 0.85; scale: 1.06; } }

/* home hero, the pull-back video. It lies over the still picture, cropped exactly as the picture is, and under the navy shade (::after);
   it shows once it plays (and the entrance is over) and fades out again when it has ended, onto the still picture, whose drift and glow
   were paused beneath it and restart then. Nothing of this runs under reduced motion. */
.hero__video {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; transform-origin: 70% 20%;
  opacity: 0; transition: opacity 1200ms ease; pointer-events: none;
}
@media (max-width: 599px) { .hero__video { object-position: 60% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__video { transform: scale(calc(1 + 0.06 * var(--hero-p, 0))); will-change: transform; }   /* the same zoom as the picture's, when scrolling */
  .hero__pic.is-done.video-on .hero__video { opacity: 1; }
  .hero__pic.is-done.video-on.video-ended .hero__video { opacity: 0; }
  .js .hero__pic.video-ended .hero__glow { animation: lamp-breathe 7s ease-in-out infinite alternate; }   /* it carries on from where the video's glow stopped */
}
@media print { .hero__video { display: none; } }

/* the blue part of the hero's name, a quarter smaller (75%): the first line stays at full size */
.hero__lede-2 { font-size: calc(0.75em * var(--lede2-fit, 1)); }

/* the labels of the rows of needs (Growth capital, Liquidity, ...): their text sits in the middle of the box, on one line or two */
@media (min-width: 600px) { .chip-row__label { justify-content: center; text-align: center; } }

/* How we work, the arcade photograph: nearly square, shown in a tall frame; the crop keeps the lantern, the vaults and the dark door at the end of the corridor */
.work__pic--1 img { object-position: 85% 50%; }

/* the bold lead-ins (the lines of How we think and of How we work) take the secondary ink, the colour of the labels of the investment
   criteria (#B3AC9E), and keep their weight */
.think__fig figcaption strong, .work__text strong { color: var(--muted); }

/* French home: the sentence under the name is justified, so its first two lines end on the same edge (the name above stays left) */
html[lang="fr"] .hero__sentence { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
html[lang="fr"] .hero__lede { text-align: left; hyphens: manual; }

/* the hero's sentence, fitted by the script: its three lines are justified to the same length, the last one included */
.hero__sentence.is-fitted { text-align: justify; text-align-last: justify; hyphens: manual; }
.hero__sentence.is-fitted .hero__lede { text-align: left; text-align-last: auto; }

/* English Alliance, the type follows the width: the block is 36 body sizes wide wherever the grid allows it; where the grid gives it less
   (about 1440 to 1580px) the script sets --alliance-s below 1 and the paragraph and the lists are set smaller by that share, so that their
   lines always break in the same places and the justified word spacing stays close */
@media (min-width: 1100px) {
  html:not([lang="fr"]) .alliance__para { font-size: calc(var(--step-lead) * 0.9 * var(--alliance-s, 1)); }
  html:not([lang="fr"]) .alliance__lists { font-size: calc(var(--step-body) * var(--alliance-s, 1)); }
}

/* the ambient music button, at the bottom right of the home's hero (shown by the script; the music is off until it is pressed) */
.sound-toggle {
  position: absolute; right: var(--margin); z-index: 3;
  /* at the foot of the first screen: the picture is taller than most screens, so the button stands at the lower of the picture's foot and the window's foot */
  top: min(calc(100% - 76px), calc(100vh - 76px)); top: min(calc(100% - 76px), calc(100svh - 76px));
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  color: var(--ink); background: rgba(10, 18, 48, 0.5); border: 1px solid rgba(231, 229, 224, 0.4); border-radius: 50%;
  cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.sound-toggle:hover { border-color: var(--accent); background: rgba(10, 18, 48, 0.7); }
.sound-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sound-toggle[aria-pressed="false"] .sound-toggle__on, .sound-toggle[aria-pressed="true"] .sound-toggle__off { display: none; }
.sound-toggle[aria-pressed="true"] { border-color: var(--accent); }
.sound-toggle[aria-busy="true"] { opacity: 0.6; cursor: progress; }
@media print { .sound-toggle { display: none; } }
@media (max-width: 359px) { .hero__middle { padding-right: 52px; } }   /* the smallest phones: the sentence leaves room for the music button */

/* the Alliance's two columns: the title in the secondary ink of the investment criteria, the paragraph under it in the main ink (bone white) */
.alliance__head { color: var(--muted); }   /* the title: the secondary ink (#B3AC9E), the colour of "Tickets" */
.alliance__list li { color: var(--ink); }

/* the music button, on a wide screen: at the top right, just under the logo's "Capital solutions for GPs" and to the right of the lamp (36px
   where the room beside the lamp is narrow, 44px from 1600px); below 1280px it stays at the foot of the first screen, where the top right is
   taken by the flags and the lamp */
@media (min-width: 1280px) {
  .sound-toggle { top: 97px; right: var(--margin); width: 36px; height: 36px; }
  .sound-toggle svg { width: 18px; height: 18px; }
}
@media (min-width: 1600px) {
  .sound-toggle { width: 44px; height: 44px; }
  .sound-toggle svg { width: 20px; height: 20px; }
}

/* the home's header is a box laid over the picture: only its logo and its flags catch the pointer, so that the music button under the logo can be clicked */
.home .site-header { pointer-events: none; }
.home .site-header a { pointer-events: auto; }

/* "Let's talk." and its sentence now stand in the navy, under the form; the pale band keeps only the logo, the two cities and LinkedIn, and is thin */
.contact-lead { padding: calc(var(--s7) + var(--s2)) var(--margin) 0; }
.contact { display: block; min-height: 0; margin-top: calc(var(--s7) + var(--s2)); padding: var(--s3) var(--margin); }

/* the pale band: the logo, the two cities and LinkedIn stand on one line, centred on the band's middle; the logo's "G" (its file has 1.3% of
   transparent margin, 4.7px at this size) stands on the page margin like the titles above, and LinkedIn ends on the right margin */
@media (min-width: 1100px) {
  .contact__foot { align-items: center; }
  .contact__logo { margin-left: -4.7px; }
}

/* the home: less navy between the pale band and the first line of the footer (96px before, 48px now) */
.home .site-footer { padding-top: var(--s5); }

/* the foot of the home's picture melts into the navy of the page instead of ending on a line: a long, eased fade (about a third of the picture,
   at most 320px), added under the shade that keeps the text readable */
.hero__pic { --fade: min(34%, 320px); }
.hero__pic::after {
  background:
    linear-gradient(to top, var(--bg) 0, rgba(10, 18, 48, 0.86) calc(var(--fade) * 0.14), rgba(10, 18, 48, 0.58) calc(var(--fade) * 0.38), rgba(10, 18, 48, 0.28) calc(var(--fade) * 0.64), rgba(10, 18, 48, 0.08) calc(var(--fade) * 0.84), rgba(10, 18, 48, 0) var(--fade)),
    linear-gradient(90deg, rgba(10, 18, 48, 0.88) 0%, rgba(10, 18, 48, 0.62) 42%, rgba(10, 18, 48, 0.15) 62%, rgba(10, 18, 48, 0) 72%);
}
@media (max-width: 599px) {
  .hero__pic::after {
    background:
      linear-gradient(to top, var(--bg) 0, rgba(10, 18, 48, 0.86) calc(var(--fade) * 0.14), rgba(10, 18, 48, 0.58) calc(var(--fade) * 0.38), rgba(10, 18, 48, 0.28) calc(var(--fade) * 0.64), rgba(10, 18, 48, 0.08) calc(var(--fade) * 0.84), rgba(10, 18, 48, 0) var(--fade)),
      linear-gradient(180deg, rgba(10, 18, 48, 0.55) 0%, rgba(10, 18, 48, 0.1) 40%, rgba(10, 18, 48, 0) 60%);
  }
}

/* What we finance, the colours alternated as in the investment criteria: the column titles in the secondary ink (#B3AC9E, the colour of
   "Tickets"), the names under them in white; the name under the pointer, in focus or opened keeps its white (see the underline below) */
.finance__name { color: var(--muted); }
.finance__item { color: var(--ink); text-decoration: none; }
button.finance__item:hover, .finance__item:focus-visible, .finance__item[aria-expanded="true"] { color: var(--ink); }
/* the names that have their own description (the eight of the first two columns and Advisory) get a fine line in the secondary ink under them when
   the pointer is on them, when they are in focus or opened; the four names that share the column's sentence (Seed capital ... Buy-side M&A) never do */
.finance__item:not(.finance__item--group) { text-decoration: underline transparent; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
button.finance__item:not(.finance__item--group):hover, .finance__item:not(.finance__item--group):focus-visible, .finance__item:not(.finance__item--group)[aria-expanded="true"] { text-decoration-color: var(--muted); }
.finance__item--group, .finance__item--group:hover, .finance__item--group:focus-visible, .finance__item--group[aria-expanded="true"] { text-decoration: none; }

/* the LinkedIn icon in the pale band (it replaces the word): drawn in the band's own ink, in a 44px target; its right edge stands on the page margin
   (the icon's square is inset by 1 of 24 units, the stroke adds 1px: the box is pushed out by 12px), on the left margin on a phone */
.linkedin-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -12px; color: inherit; transition: opacity var(--t-hover) var(--ease-out); }
.linkedin-link:hover, .linkedin-link:focus-visible { opacity: 0.6; }
.linkedin-link svg { display: block; }
@media (max-width: 599px) { .linkedin-link { margin-right: 0; margin-left: -12px; } }

/* the LinkedIn icon of the ivory band: Golders Capital's navy, exactly #0B1230 */
.contact .linkedin-link { color: #0B1230; }

/* "Let's talk.": a little less space above the title and between its sentence and the ivory band (72px instead of 112px) */
.contact-lead { padding-top: calc(var(--s6) + var(--s1)); }
.contact { margin-top: calc(var(--s6) + var(--s1)); }

/* the Alliance's white paragraph is set on two lines: the script lowers its size (--lead-fit, down to the size of the lists) only as far as needed */
@media (min-width: 1100px) {
  .alliance__para { font-size: calc(var(--step-lead) * 0.9 * var(--lead-fit, 1)); }
  html:not([lang="fr"]) .alliance__para { font-size: calc(var(--step-lead) * 0.9 * var(--alliance-s, 1) * var(--lead-fit, 1)); }
}

/* the strip's slab names (Liquidité et transmission...) stay inside their slab: a little smaller and a little tighter, and they may be hyphenated */
@media (min-width: 1100px) {
  .shape__name { padding: 8px 8px 10px; font-size: clamp(11.5px, 0.98vw, var(--step-small)); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
}

/* the labels of the investment criteria weigh like the other titles (medium) */
.criteria__facts dt { font-weight: 500; }


/* the aligned form from 1100px: the amount block has the height of the strip (140px at least), its three parts spread over it, so that the strip
   still stands level with it from top to foot now that the figure is smaller */
@media (min-width: 1100px) {
  .shape__amount { min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; }
}

/* the needs (chips) between 1100 and 1599px: a little smaller so that they keep to two or three lines in their narrower columns */
@media (min-width: 1100px) and (max-width: 1599px) {
  .chip span, .chip-row__label { font-size: clamp(14.5px, 1.12vw, var(--step-body)); }
}

/* the footer's regulatory line on one line from 1100px (it stays clear of the email at every width) */
@media (min-width: 1100px) { .site-footer__cif { white-space: nowrap; } }

/* a need whose label is broken on purpose (Transition à la / Next. Gen; Succession planning / Talent retention) keeps at least the width of its longest line */
.chip span:has(br) { min-width: max-content; }

/* "Nos valeurs": each value on one line. The script measures the room the descriptions have beside their names; if the longest fits at 85% of
   its size or more, all four are set on one line (nowrap), smaller by the share that is missing; if not (a narrow window), they wrap as before */
.cities__value-text { font-size: calc(0.8125rem * var(--values-fit, 1)); }
.cities__values.is-oneline .cities__value-text { white-space: nowrap; }

/* the form from 1100px, the right part raised: the strip of slabs with the brass plate stands level with the needs (the chips): same top, same foot;
   "Prendre contact" / "Start a conversation" follows under the plate, level with the start of the slider; the reading of the choice stands just above
   the strip (it grows upwards, and takes no height of its own) */
@media (min-width: 1100px) {
  .shape-section .grid { grid-template-rows: auto auto 1fr auto auto; }
  .shape { grid-row: 1 / 6; }
  .shape__amount { min-height: 0; display: block; }
  .shape__line { grid-column: 8 / 13; grid-row: 4; align-self: stretch; height: auto; min-height: 0; margin-top: calc(var(--s6) + var(--step-body) * 1.4 + var(--s2)); }
  .shape__answer { grid-column: 8 / 13; grid-row: 4; align-self: start; height: 0; overflow: visible; display: flex; flex-direction: column; justify-content: flex-end; margin-top: calc(var(--s6) + var(--step-body) * 1.4); padding-bottom: var(--s2); }
  .shape__button { grid-column: 8 / 13; grid-row: 5; align-self: start; justify-self: start; margin-top: var(--s4); margin-left: calc(100% * 13 / 24); translate: -50% 0; }
}
@media (min-width: 1100px) { .shape__answer > * { flex: none; } }   /* the reading and its second line keep their own height and pile up above the strip */