/*
  Technology for Equity.

  The page is a film and a piece of print. It opens at night: deep navy, the headline in
  white, the group's gold where light would fall, and the footage as one wide band that
  grows to the edges of the window as the page is scrolled. Below it the page turns to paper:
  bone white, navy type, thin rules, long measures of space, and it returns to navy where the
  page asks for something. Corners are square. Every block of text keeps a clear gap from
  whatever surrounds it.

  Motion belongs to site.js and is switched on by a class on <html> (`js`), so with script
  off, or for a reader who has asked for less motion (`calm`), every rule below that hides or
  moves something simply does not apply and the page is whole and still.

  The typefaces are the group's (Playfair Display and Inter), served from this site. Nothing
  is loaded from anywhere else.
*/

@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/assets/fonts/playfair-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --night: #071523;
  --night-2: #0d2238;
  --night-3: #16314d;
  --paper: #fbfbf8;
  --white: #ffffff;
  --tint: #f1f4f2;
  --ink: #0f1e30;
  --ink-2: #3f4e64;
  --ink-3: #5b687b;
  --ink-faint: #c5ccd3;
  --rule: #dde3e0;
  --rule-2: #c3ccc8;
  --rule-night: rgba(255, 255, 255, 0.16);
  --mist: #aebccb;
  --gold: #c9a65c;
  --gold-ink: #8a6a2c;
  --green: #2b6a4d;
  --green-soft: #e3eee6;
  --bad: #9b3327;
  --bad-soft: #fbeeec;
  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 56px);
  /* The distance from the window's edge to the page's text: what the film is inset by. */
  --edge: max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter)));
  --pad: clamp(72px, 10vw, 150px);
  --mast: 76px;
  --ease: cubic-bezier(0.22, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mast) + 12px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: -0.012em; }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: 0.7em; max-width: 18ch; }
h3 { font-size: 1.4rem; line-height: 1.25; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }
strong { font-weight: 500; }

.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); color: var(--ink); padding: 10px 16px; z-index: 60; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* A place the page has travelled to holds the focus without being drawn round. */
[tabindex='-1']:focus { outline: none; }

/* ------------------------------------------------------------- masthead */

/* Fixed to the top of the window, always. Once the page has moved under it, it is translucent:
   the page shows through, softened. */
.mast { position: fixed; inset: 0 0 auto 0; z-index: 40; color: #fff; background: var(--night); transition: background-color 0.9s ease, box-shadow 0.9s ease; }
.home .mast { background: transparent; }
.mast.is-solid, .home .mast.is-solid { background: rgba(7, 21, 35, 0.8); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); box-shadow: 0 1px 0 var(--rule-night); }
.mast__in { display: flex; align-items: center; gap: 30px; height: var(--mast); }
.mast__brand { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.mast__mark { width: 34px; height: 34px; }
.mast__words { display: flex; flex-direction: column; line-height: 1.2; }
.mast__name { font-family: var(--serif); font-size: 1.2rem; }
.mast__strap { font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist); margin-top: 3px; }
.mast__nav { display: flex; gap: 30px; }
.mast__nav a { position: relative; font-size: 0.8438rem; letter-spacing: 0.02em; text-decoration: none; color: #dfe6ee; padding: 8px 0; white-space: nowrap; }
.mast__nav a { transition: color 0.6s ease; }
.mast__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease); }
.mast__nav a:hover { color: #fff; }
.mast__nav a:hover::after { transform: scaleX(1); }
/* Phone and tablet: the links go behind a menu button, at the right of the masthead. */
.mast__menu { display: none; }
.mast__menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.34); transition: border-color 0.6s ease; }
.mast__menu summary::-webkit-details-marker { display: none; }
.mast__menu summary span { position: relative; display: block; width: 18px; height: 7px; }
.mast__menu summary span::before, .mast__menu summary span::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: #fff; transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1), top 0.7s cubic-bezier(0.45, 0, 0.2, 1); }
.mast__menu summary span::before { top: 0; }
.mast__menu summary span::after { top: 6px; }
.mast__menu[open]:not(.is-closing) summary { border-color: var(--gold); }
.mast__menu[open]:not(.is-closing) summary span::before { top: 3px; transform: rotate(45deg); }
.mast__menu[open]:not(.is-closing) summary span::after { top: 3px; transform: rotate(-45deg); }
.mast__panel { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; padding: 6px var(--gutter) 26px; background: rgba(7, 21, 35, 0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--rule-night); box-shadow: 0 24px 40px rgba(2, 8, 15, 0.35); }
.mast__panel a { font-family: var(--serif); font-size: 1.4rem; line-height: 1.2; color: #fff; text-decoration: none; padding: 19px 0; border-bottom: 1px solid var(--rule-night); transition: color 0.6s ease; }
.mast__panel a:hover, .mast__panel a:active { color: var(--gold); }
.js:not(.calm) .mast__menu[open] .mast__panel { animation: menuin 0.8s cubic-bezier(0.25, 0.1, 0.2, 1) both; }
.js:not(.calm) .mast__menu.is-closing .mast__panel { animation: menuout 0.5s ease-in both; }
@keyframes menuin { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes menuout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 1080px) { .mast__nav { display: none; } .mast__menu { display: block; } .mast__in { gap: 14px; } }
/* The narrowest phones have no room for the button beside the menu, so it goes inside it. */
.mast__panel a.mast__panelcta { display: none; }
@media (max-width: 349px) {
  .mast__in > .btn { display: none; }
  .mast__panel a.mast__panelcta { display: inline-flex; align-self: flex-start; margin-top: 24px; font: 500 0.875rem/1 var(--sans); color: var(--night); padding: 17px 26px; border: 1px solid #fff; }
}
@media (max-width: 520px) { .mast__strap { display: none; } .mast__name { font-size: 1.05rem; } .mast__mark { width: 28px; height: 28px; } .mast__brand { gap: 10px; } .mast .btn--small { padding: 13px 14px; font-size: 0.75rem; } }

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-block; font: 500 0.875rem/1 var(--sans); letter-spacing: 0.04em; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--ink); border: 1px solid var(--ink); border-radius: 0; padding: 18px 30px;
  transition: background-color 0.6s ease, border-color 0.6s ease, color 0.6s ease;
}
.btn:hover { background: var(--night-3); border-color: var(--night-3); }
.btn--light { background: #fff; border-color: #fff; color: var(--night); }
.btn--light:hover { background: var(--gold); border-color: var(--gold); color: var(--night); }
.btn--line { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn--line:hover { background: #fff; border-color: #fff; color: var(--night); }
.btn--small { padding: 13px 20px; font-size: 0.7813rem; white-space: nowrap; }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn--quiet:hover { background: var(--white); border-color: var(--ink); color: var(--ink); }
.btn--bad { background: var(--bad); border-color: var(--bad); }
.btn--bad:hover { background: #7d281e; border-color: #7d281e; }
.link { font-size: 0.9375rem; font-weight: 500; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.link { transition: color 0.6s ease; }
.link:hover { color: var(--green); }
.link--light { color: #fff; text-decoration-color: var(--gold); }
.link--light:hover { color: var(--gold); }
.link--bad { color: var(--bad); }

/* ------------------------------------------------------------- arrival */

/* The curtain: the group's mark on navy, then it lifts. It runs on CSS alone once boot.js
   has marked the page, so it cannot be left down by a script that failed to load. */
.intro { display: none; }
/* The arrival, on the first page of a visit. Nothing is hurried and nothing slides:
     0.25s  the group's mark and name come up out of the navy
     2.2s   they go again
     2.5s   the curtain dissolves, and the page is there behind it
     3.0s   the headline rises, a line at a time; the words beside it follow; the film opens
   About five seconds in all. It runs on CSS alone, so a script that failed to load cannot
   leave the curtain down. It takes no clicks and does not stop the page being scrolled. */
.js:not(.calm):not(.seen) .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 50; background: var(--night); pointer-events: none; animation: lift 1.8s cubic-bezier(0.45, 0, 0.25, 1) 2.5s forwards; }
.intro__brand { display: flex; flex-direction: column; align-items: center; gap: 22px; color: #fff; font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2.1rem); opacity: 0; animation: brandin 1.5s cubic-bezier(0.3, 0, 0.2, 1) 0.25s forwards, brandout 0.9s ease-in 2.2s forwards; }
.intro__brand img { width: clamp(64px, 8vw, 96px); height: auto; }
@keyframes lift { to { opacity: 0; visibility: hidden; } }
@keyframes brandout { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
@keyframes brandin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- hero */

.eyebrow { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); margin-bottom: 26px; display: flex; align-items: center; gap: 14px; }
.eyebrow::before { content: ''; width: 36px; height: 1px; background: currentColor; flex: none; }
.eyebrow--light { color: var(--gold); }

.hero { --over: clamp(80px, 13vw, 210px); position: relative; color: #fff; padding-top: var(--mast); background: linear-gradient(to bottom, var(--night) calc(100% - var(--over)), var(--paper) calc(100% - var(--over))); }
.hero::before { content: ''; position: absolute; inset: 0 0 var(--over) 0; background: radial-gradient(120% 90% at 85% 0%, rgba(40, 84, 128, 0.42), transparent 60%); pointer-events: none; }
.hero__top { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 6vw, 96px); align-items: end; padding-block: clamp(28px, 3.05vw, 44px) clamp(30px, 3.6vw, 52px); }
.display { font-size: clamp(2.1rem, min(6vw, 11.5vh), 5.4rem); line-height: 0.98; letter-spacing: -0.025em; color: #f1f4f7; }
.display .ln { display: block; }
.hero__lead { font-size: clamp(1.0625rem, 1.35vw, 1.2rem); line-height: 1.6; color: #cfd9e3; max-width: 30em; margin: 0 0 30px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hero__actions .link { padding-block: 11px; }

/* The film. It is always the full width of the window; what changes is how much of it is
   shown. It starts inset to the page's margins and opens to the edges as the page is scrolled
   (site.js moves --g from 0 to 1). Clipping, not resizing, so nothing is laid out again. */
.hero__stage { --g: 0; position: relative; clip-path: inset(0 calc(var(--edge) * (1 - var(--g)))); }
.hero__art { position: relative; margin: 0; height: clamp(300px, 50vw, 84vh); overflow: hidden; background: var(--night-2); }
.hero__film, .hero__art picture, .hero__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__film, .hero__art img { transform: scale(calc(1.08 - 0.08 * var(--g))); }
.hero__scrim { position: absolute; inset: 0; background: var(--night); opacity: var(--s, 0); pointer-events: none; }
.hero__brand { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; opacity: var(--b, 0); pointer-events: none; padding: 20px; transform: translateY(var(--by, 0px)) scale(var(--bs, 1)); }
.hero__brand img { width: clamp(64px, 8vw, 120px); height: auto; }
/* Leaving the hero (site.js moves --t and --f from 0 to 1 as the page is scrolled): the words
   fade and lift a little; the film dissolves into the colour of the page that follows it. */
.hero__top { opacity: calc(1 - var(--t, 0)); transform: translateY(calc(var(--t, 0) * -28px)); }
.hero__art::after { content: ''; position: absolute; inset: 0; background: var(--paper); opacity: var(--f, 0); pointer-events: none; }
.hero__brandname { font-family: var(--serif); font-size: clamp(1.5rem, 3.6vw, 3.2rem); margin-top: 0.5em; }
.hero__brandname::after { content: ''; display: block; width: 64px; height: 1px; background: var(--gold); margin: 0.5em auto 0.42em; }
.hero__brandline { font-size: clamp(0.625rem, 1vw, 0.8125rem); font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: #cfd9e3; padding-left: 0.32em; }
/* A tablet on its side: the words beside the headline get a little more room, so the button
   and the link stay on one line. */
@media (max-width: 1100px) { .hero__top { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; } }
@media (max-width: 900px) {
  .hero__top { grid-template-columns: 1fr; gap: 26px; }
  .display { font-size: clamp(2.1rem, 10.4vw, 4.2rem); }
}
@media (max-width: 700px) {
  .hero__art { height: clamp(360px, 118vw, 78vh); }
}

/* The headline rises line by line as the page arrives, in its own colour. (A pass of gold
   light used to cross it; removed for this site at Philip's instruction, D-61.) */
.js:not(.calm) .display .ln { animation: rise 1.7s cubic-bezier(0.25, 0.1, 0.2, 1) both; }
.js:not(.calm) .display .ln:nth-of-type(2) { animation-delay: 3000ms; }
.js:not(.calm) .display .ln:nth-of-type(3) { animation-delay: 3250ms; }
.js:not(.calm) .display .ln:nth-of-type(4) { animation-delay: 3500ms; }
.js.seen:not(.calm) .display .ln:nth-of-type(2) { animation-delay: 350ms; }
.js.seen:not(.calm) .display .ln:nth-of-type(3) { animation-delay: 600ms; }
.js.seen:not(.calm) .display .ln:nth-of-type(4) { animation-delay: 850ms; }
/* What stands beside the headline arrives at the headline's pace, not the page's. */
.js:not(.calm) .hero [data-reveal] { transition-duration: 1.6s, 1.7s; }
/* The film is under navy until site.js opens it; if site.js never comes, `calm` shows it. */
.js:not(.calm) .hero__scrim { opacity: var(--s, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- motion */

/* What is waiting to arrive. Only under `js`, never under `calm`. */
.js:not(.calm) [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js:not(.calm) [data-reveal='rise'] { transform: translateY(56px); }
/* A picture is drawn open like a blind. The clip is on what is inside the figure, never on
   the figure itself: a thing clipped to nothing is never seen to arrive, so it never would. */
.js:not(.calm) [data-reveal='wipe'] { opacity: 1; transform: none; overflow: hidden; }
.js:not(.calm) [data-reveal='wipe'] > * { clip-path: inset(0 0 100% 0); transform: scale(1.12); transition: clip-path 1.3s var(--ease), transform 1.9s var(--ease); }
.js:not(.calm) [data-reveal].in { opacity: 1; transform: none; }
.js:not(.calm) [data-reveal='wipe'].in > * { clip-path: inset(0); transform: none; }

/* ------------------------------------------------------------- sections */

.sec { padding-block: var(--pad); }
/* A link to a section lands on its first line, a little below the masthead, not on the empty
   space above it. (With script, site.js aims at the same place.) */
.sec[id] { scroll-margin-top: calc(var(--mast) + 44px - var(--pad)); }
.sec--tint { background: var(--tint); }
.sec--night { background: var(--night); color: #fff; }
.sec--form { padding-block: calc(var(--mast) + clamp(40px, 6vw, 80px)) var(--pad); }
.sec__in--narrow { max-width: 860px; }
.sec__copy p { color: var(--ink-2); max-width: 36em; }
.h2--wide { max-width: none; }

.marker { display: flex; align-items: baseline; gap: 14px; margin-bottom: 30px; }
.marker__n { font-family: var(--serif); font-size: 1.125rem; color: var(--gold-ink); }
.marker__l { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.sec--night .marker__n { color: var(--gold); }
.sec--night .marker__l { color: var(--mist); }
.sub { font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin: 44px 0 16px; }

.art { margin: 0; }
.art picture { display: block; }
.art img { width: 100%; background: var(--night-2); }
.art--tall img { aspect-ratio: 4 / 5; object-fit: cover; }

/* The offer: a statement that takes on ink as it is read, then the figures. */
.lede { padding-top: clamp(64px, 8vw, 120px); }
.lede__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 7vw, 110px); align-items: start; }
.statement { font-size: clamp(2.3rem, 5.4vw, 4.6rem); line-height: 1.08; letter-spacing: -0.02em; max-width: none; margin: 0; }
.statement .w span { transition: color 0.5s ease; }
.js:not(.calm) .statement .w span { color: var(--ink-faint); }
.js:not(.calm) .statement .w.on span { color: var(--ink); }
.lede__body { padding-top: 0.6em; }
.lede__body p { color: var(--ink-2); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); margin-top: clamp(56px, 8vw, 110px); border-top: 1px solid var(--ink); }
.stat { padding-top: 26px; }
.stat dt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; margin-bottom: 14px; }
.stat__n { font-family: var(--serif); font-size: clamp(3rem, 6.4vw, 5.6rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
.stat__u { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.stat dd { font-size: 0.9375rem; color: var(--ink-2); max-width: 24em; }
@media (max-width: 900px) {
  .lede__grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }

/* What you receive: four panels cut from one panorama, so the row reads as a single view. */
.pillars h2 { color: #fff; }
.pillars__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: clamp(20px, 3vw, 40px); }
.pillar { position: relative; aspect-ratio: 1 / 1.9; overflow: hidden; background: var(--night-2) url('/assets/media/pano.jpg') no-repeat; background-size: 400% auto; outline-offset: -3px; }
.pillar--1 { background-position: 0% 50%; }
.pillar--2 { background-position: 33.333% 50%; }
.pillar--3 { background-position: 66.667% 50%; }
.pillar--4 { background-position: 100% 50%; }
.pillar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 21, 35, 0.96) 4%, rgba(7, 21, 35, 0.62) 44%, rgba(7, 21, 35, 0.18) 100%); transition: opacity 1.4s ease; }
.pillar::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
.pillar__in { position: absolute; inset: auto 0 0 0; padding: clamp(20px, 2.2vw, 32px); }
.pillar__n { display: block; font-family: var(--serif); color: var(--gold); margin-bottom: 14px; }
.pillar h3 { font-size: clamp(1.5rem, 2.1vw, 2rem); color: #fff; }
.pillar__more p { font-size: 0.9375rem; line-height: 1.55; color: #d5dee8; padding-top: 14px; margin: 0; }
/* Where there is a pointer, the line beneath each heading opens when the panel is pointed at
   and closes when it is left: slowly, both ways, by the same measure. The row grows from
   nothing to the height of its own text, so the pace does not depend on how much text there is. */
@media (hover: hover) and (min-width: 1001px) {
  .pillar__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 1.3s cubic-bezier(0.45, 0, 0.2, 1), opacity 1.3s ease; }
  .pillar__more p { overflow: hidden; min-height: 0; padding-top: 0; transition: padding-top 1.3s cubic-bezier(0.45, 0, 0.2, 1); }
  .pillar:hover .pillar__more, .pillar:focus .pillar__more, .pillar:focus-within .pillar__more { grid-template-rows: 1fr; opacity: 1; }
  .pillar:hover .pillar__more p, .pillar:focus .pillar__more p, .pillar:focus-within .pillar__more p { padding-top: 14px; }
  .pillar:hover::before, .pillar:focus::before { opacity: 0.88; }
  .pillar:hover::after, .pillar:focus::after { transform: scaleX(1); }
}
@media (max-width: 1000px) {
  .pillars__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar { aspect-ratio: 1 / 1.05; }
}
@media (max-width: 560px) {
  .pillars__row { grid-template-columns: 1fr; }
  .pillar { aspect-ratio: 16 / 12; }
}

/* How it works: the heading holds still while the four stages pass it. */
.process__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 7vw, 110px); align-items: start; }
.process__aside { position: sticky; top: calc(var(--mast) + 40px); }
.rail { margin-top: 8px; border-left: 1px solid var(--rule-2); }
.rail li { position: relative; padding: 10px 0 10px 22px; font-size: 0.9375rem; color: var(--ink-3); transition: color 0.4s ease; }
.rail li span { font-family: var(--serif); color: var(--gold-ink); margin-right: 12px; }
.rail li::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--ink); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--ease); }
.rail li.is-on { color: var(--ink); }
.rail li.is-on::before { transform: scaleY(1); }
.stages { border-top: 1px solid var(--rule-2); }
.stage { display: grid; grid-template-columns: clamp(64px, 9vw, 130px) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); padding-block: clamp(40px, 7vh, 84px); border-bottom: 1px solid var(--rule-2); transition: opacity 0.6s ease; }
.js:not(.calm) .stage { opacity: 0.32; }
.js:not(.calm) .stage.is-on { opacity: 1; }
.stage__n { font-family: var(--serif); font-size: clamp(3.4rem, 7vw, 6rem); line-height: 0.85; color: var(--ink); font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
.stage h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-bottom: 14px; }
.stage p { color: var(--ink-2); max-width: 38em; }
.decision { margin-top: 22px; padding: 18px 22px; background: var(--white); border-left: 2px solid var(--gold); color: var(--ink) !important; box-shadow: 0 1px 0 var(--rule), 0 -1px 0 var(--rule), 1px 0 0 var(--rule); }
@media (max-width: 900px) {
  .process__grid { grid-template-columns: 1fr; }
  .process__aside { position: static; }
  .rail { display: none; }
}

/* Evidence: one figure over the peaks. */
.proof { position: relative; overflow: hidden; color: #fff; background: var(--night); }
.proof__art { position: absolute; inset: -14% 0; }
.proof__art img, .proof__art picture { width: 100%; height: 100%; object-fit: cover; }
.proof__art img { transform: translateY(var(--py, 0)) scale(1.04); }
.proof::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7, 21, 35, 0.9) 0%, rgba(7, 21, 35, 0.62) 46%, rgba(7, 21, 35, 0.2) 100%); }
.proof__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 34px); padding-block: clamp(110px, 20vw, 300px) clamp(64px, 9vw, 130px); }
.proof__figure { font-family: var(--serif); font-size: clamp(4.4rem, 15vw, 13rem); line-height: 0.86; letter-spacing: -0.03em; margin: 0; white-space: nowrap; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
.proof__text { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.3; max-width: 26em; margin-bottom: 18px; }
.proof__note { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }

/* Who it is for */
.fit__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 7vw, 110px); align-items: center; }
.ticks { margin: 4px 0 0; }
.ticks li { position: relative; padding: 13px 0 13px 34px; border-bottom: 1px solid var(--rule-2); color: var(--ink-2); }
.ticks li::before { content: ''; position: absolute; left: 4px; top: 1.25em; width: 14px; height: 7px; border-left: 1.5px solid var(--gold-ink); border-bottom: 1.5px solid var(--gold-ink); transform: rotate(-45deg); }
.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
.pairs dt { font-weight: 500; margin-bottom: 4px; }
.pairs dd { font-size: 0.9375rem; color: var(--ink-2); }
/* Stacked, the words come first and the picture after: the section opens on its own label. */
@media (max-width: 900px) { .fit__grid { grid-template-columns: 1fr; } .fit__grid > .art { order: 2; } .art--tall img { aspect-ratio: 5 / 4; } }
@media (max-width: 520px) { .pairs { grid-template-columns: 1fr; } }

/* Terms: a ledger. */
.termlist { border-top: 1px solid var(--ink); margin-top: 12px; }
.termlist > div { display: grid; grid-template-columns: 64px minmax(0, 5fr) minmax(0, 7fr); gap: 10px 32px; align-items: baseline; padding-block: clamp(22px, 2.6vw, 34px); border-bottom: 1px solid var(--rule-2); transition: background-color 1.1s ease, padding-inline 1.1s cubic-bezier(0.45, 0, 0.2, 1); }
.termlist__n { font-family: var(--serif); color: var(--gold-ink); }
.termlist dt { transition: color 1.1s ease; }
.termlist dt { font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.2; }
.termlist dd { color: var(--ink-2); max-width: 40em; }
@media (hover: hover) { .termlist > div:hover { background: var(--white); padding-inline: 18px; } }
/* Each row also arrives on the page (data-reveal), and that rule names its own transition.
   Without this one it would replace the row's, and the highlight would snap on and off. */
.js:not(.calm) .termlist > div[data-reveal] { transition: opacity 1s var(--ease), transform 1.1s var(--ease), background-color 1.1s ease, padding-inline 1.1s cubic-bezier(0.45, 0, 0.2, 1); }
@media (max-width: 760px) { .termlist > div { grid-template-columns: 40px minmax(0, 1fr); } .termlist dd { grid-column: 2; } }

/* Questions */
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule-2); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 26px 52px 26px 0; font-family: var(--serif); font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.3; transition: color 0.7s ease; }
.faq summary:hover { color: var(--gold-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-weight: 300; font-size: 1.7rem; color: var(--gold-ink); transition: transform 1s cubic-bezier(0.45, 0, 0.2, 1); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
/* While an answer is closing the mark turns back with it, not after it. */
.faq details.is-closing summary::after { transform: translateY(-50%); }
/* The answer's padding is inside it, so that when site.js opens and closes it by height
   there is no step at either end. */
.faq__a { overflow: hidden; color: var(--ink-2); max-width: 44em; }
.faq__a > :first-child { margin-top: 0; }
.faq__a > :last-child { margin-bottom: 0; padding-bottom: 28px; }
.faq__a p { padding-right: 52px; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } }

/* The submission: the page returns to navy and asks. */
.submit h2 { color: #fff; max-width: 12ch; font-size: clamp(2.3rem, 4.8vw, 4rem); }
.submit__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 7vw, 110px); align-items: start; }
.submit__body p { color: #cfd9e3; max-width: 30em; }
.submit__card { background: var(--paper); color: var(--ink); padding: clamp(24px, 3.4vw, 46px); }
.submit__card .form { margin-top: 0; }
.submit__card .form__grid { grid-template-columns: 1fr; }
@media (max-width: 900px) { .submit__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- forms */

.h-page { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 24px; }
.form { margin-top: 36px; }
.form--tight { margin-top: 12px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
@media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; min-width: 0; }
.field--wide, .field--checks { grid-column: 1 / -1; }
/* The control sits at the foot of its cell, so two fields side by side line up
   even when only one of them carries a hint. */
.field > input, .field > select { margin-top: auto; }
.field label, .field--checks legend { font-size: 0.875rem; font-weight: 500; margin-bottom: 8px; padding: 0; }
.field__opt { font-weight: 400; color: var(--ink-3); font-size: 0.8125rem; margin-left: 6px; }
.field__hint { font-size: 0.8438rem; color: var(--ink-3); margin: -4px 0 8px; }
.field__err { font-size: 0.8438rem; color: var(--bad); margin-top: 8px; display: block; }
input[type='text'], input[type='email'], textarea, select {
  font: 400 1rem/1.5 var(--sans); color: var(--ink); background: var(--white);
  border: 1px solid var(--rule-2); border-radius: 0; padding: 14px 14px; width: 100%; min-width: 0;
  -webkit-appearance: none; appearance: none; transition: border-color 0.2s ease;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
textarea { resize: vertical; min-height: 110px; }
input:hover, textarea:hover, select:hover { border-color: var(--ink-3); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--ink); }
.field--bad input, .field--bad textarea, .field--bad select { border-color: var(--bad); background: var(--bad-soft); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.check { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 0.9688rem; color: var(--ink-2); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--ink); }
.check--bad { color: var(--bad); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { margin-top: 30px; }
.form__actions--two { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }
.form__small { font-size: 0.8438rem; color: var(--ink-3); margin-top: 18px; max-width: 46em; }

.part { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule-2); }
.part > legend { float: left; width: 100%; font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; margin-bottom: 24px; padding: 0; display: flex; align-items: baseline; gap: 16px; }
.part > legend + * { clear: both; }
.part__n { font-size: 1.1rem; color: var(--gold-ink); min-width: 1.2em; }
.part--confirm .check { color: var(--ink); }

.notice { margin: 28px 0 0; padding: 16px 20px; background: var(--green-soft); border-left: 3px solid var(--green); }
.notice--bad { background: var(--bad-soft); border-left-color: var(--bad); }
.submit__card .notice { margin: 0 0 22px; }
.keep { margin: 28px 0 0; padding: 22px 24px; background: var(--white); border: 1px solid var(--rule-2); border-left: 3px solid var(--gold); }
.keep p { margin-bottom: 10px; color: var(--ink-2); }
.keep__link { font: 400 0.875rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink) !important; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; margin: 0 !important; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); }
.keep--ref { margin-bottom: 32px; }
.keep__ref { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; color: var(--ink) !important; }
.sent { margin-top: 36px; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.sent summary { cursor: pointer; padding: 18px 0; font-weight: 500; }
.sent[open] { padding-bottom: 24px; }
.answers > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 6px 28px; padding-block: 12px; border-bottom: 1px solid var(--rule); }
.answers dt { font-size: 0.875rem; color: var(--ink-3); }
.answers dd { overflow-wrap: anywhere; }
@media (max-width: 640px) { .answers > div { grid-template-columns: 1fr; } }
.none, .dim { color: var(--ink-3); }

/* ---------------------------------------------------------------- legal */

.legal h2 { font-size: 1.5rem; margin: 44px 0 14px; max-width: none; }
.legal p { color: var(--ink-2); max-width: 44em; }
.legal__date { font-size: 0.8438rem; color: var(--ink-3) !important; }

/* --------------------------------------------------------------- review */

.review h2 { font-size: 1.5rem; margin: 40px 0 16px; max-width: none; }
.review__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.review__grid aside { background: var(--white); border: 1px solid var(--rule); padding: 8px 26px 28px; position: sticky; top: calc(var(--mast) + 20px); }
@media (max-width: 900px) { .review__grid { grid-template-columns: 1fr; } .review__grid aside { position: static; } }
.review__delete { margin-top: 32px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--white); }
.table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.table th, .table td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.table th { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.history li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; }

/* Back to the top. Always there with script off; with script it comes in once the page has
   been scrolled. */
.totop { position: fixed; right: clamp(16px, 2.4vw, 34px); bottom: clamp(16px, 2.4vw, 34px); z-index: 35; width: 52px; height: 52px; display: grid; place-items: center; background: rgba(7, 21, 35, 0.82); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 0.9s ease, transform 0.9s var(--ease), background-color 0.6s ease, border-color 0.6s ease; }
.totop span { width: 11px; height: 11px; border-left: 1.5px solid var(--gold); border-top: 1.5px solid var(--gold); transform: translateY(3px) rotate(45deg); transition: transform 0.6s var(--ease); }
.totop:hover { background: var(--night); border-color: var(--gold); }
.totop:hover span { transform: translateY(0) rotate(45deg); }
/* On a phone the text runs nearly to the edge, so the button is smaller and tucked into the corner. */
@media (max-width: 700px) { .totop { width: 42px; height: 42px; right: 10px; bottom: 10px; } }
.js:not(.calm) .totop { opacity: 0; transform: translateY(14px); pointer-events: none; }
.js:not(.calm) .totop.is-shown { opacity: 1; transform: none; pointer-events: auto; }

/* --------------------------------------------------------------- footer */

.foot { background: #040d17; color: #b9c5d2; font-size: 0.875rem; }
.foot__in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) auto; gap: 32px 48px; padding-block: clamp(56px, 7vw, 96px); }
.foot p { margin: 0 0 6px; }
.foot__mark { width: 56px; height: 56px; margin-bottom: 18px; }
.foot__name { font-family: var(--serif); font-size: 1.4rem; color: #fff; }
.foot__nav { display: flex; flex-direction: column; gap: 10px; }
.foot__nav a { color: #fff; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: var(--gold); }
@media (max-width: 820px) { .foot__in { grid-template-columns: 1fr; } }

@media print { .mast, .intro, .totop, .foot__nav, .btn { display: none; } body { background: #fff; } }