/* Google Sans Flex, self-hosted (SIL Open Font License). One variable file per
   script subset, each covering weight 100-700 and optical size 6-144. The
   browser downloads a subset only when the page uses a character in it, so in
   practice that is the Latin file plus a small one for the arrows. */
@font-face {
  font-family: "Google Sans Flex"; font-style: normal; font-weight: 100 700; font-stretch: 100%; font-display: swap;
  src: url(/fonts/google-sans-flex-latin.5dd2c8c5.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Google Sans Flex"; font-style: normal; font-weight: 100 700; font-stretch: 100%; font-display: swap;
  src: url(/fonts/google-sans-flex-latin-ext.399a097c.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Google Sans Flex"; font-style: normal; font-weight: 100 700; font-stretch: 100%; font-display: swap;
  src: url(/fonts/google-sans-flex-symbols.fd963908.woff2) format("woff2");
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}

/* ==========================================================================
   LOKESH MOHAN — editorial design system
   Monochrome. Two typefaces. One grid. 1px rules.
   ========================================================================== */

/* ---------- 0. Tokens ---------------------------------------------------- */
:root {
  /* colour */
  --black: #000000;
  --white: #ffffff;
  --off: #f5f5f2;
  --dark: #111111;
  --grey: #777777;
  --light: #d9d9d9;

  --bg: var(--white);
  --fg: var(--black);
  --muted: #414a58;      /* small text: 5:1 on #90CAF9, the deepest tint under body text, and more on the lighter tints above it */
  --rule: var(--light);
  --plate: var(--off);

  /* type */
  /* One family for everything: Google Sans Flex, a variable font. Weight
     (300-700), optical size and slant are all axes of the one file. Optical
     size follows the rendered size automatically (font-optical-sizing), so
     small text gets sturdier letterforms and large text gets finer ones.
     There are no italics anywhere: emphasis is a change of weight. Two
     weights carry the whole site: Light for headlines and display type,
     Regular for text and for the words that matter in a headline. Nothing
     is set thinner than Light, and nothing heavier than Regular. */
  --font-display: "Google Sans Flex", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-sans: "Google Sans Flex", "Helvetica Neue", Arial, system-ui, sans-serif;
  --w-light: 300;
  --w-regular: 400;
  /* Regular runs about 1.2% wider than Light. Hovering a title from Light to Regular
     tightens its letter spacing by this much per character, so the text keeps its width
     and nothing around it reflows. Measured across the site's titles: 0.004 to 0.010em. */
  --regular-comp: 0.0057em;
  /* The same idea from Extra Light (200) to Regular: about 0.0118em per character. */
  --regular-comp-xl: 0.0118em;

  /* Floor is 60, not 72: the longest display word on the site is
     "MEANINGFUL." on the contact page, which overflowed its column by 22px
     at 72px and was being silently clipped by the body's overflow rule. */
  --t-display: clamp(2.75rem, 2.2rem + 7.2vw, 11.25rem);
  --t-h1: clamp(2.25rem, 0.9rem + 6vw, 8.5rem);
  --t-h2: clamp(2.5rem, 1.6rem + 3.9vw, 6rem);
  --t-h3: clamp(1.875rem, 1.35rem + 2.1vw, 3.5rem);
  --t-h4: clamp(1.375rem, 1.15rem + 0.9vw, 2rem);
  --t-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.625rem);
  --t-body: clamp(1rem, 0.94rem + 0.2vw, 1.125rem);
  --t-small: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
  --t-label: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem);

  --track-label: 0.16em;
  --lh-display: 1;
  --lh-tight: 1.02;
  --lh-body: 1.6;

  /* space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 44px; --s8: 56px; --s9: 72px; --s10: 96px;
  --section: clamp(48px, 5.2vw, 84px);   /* was 88-184px: the page had more air between sections than it needed */
  --block: clamp(32px, 3.4vw, 52px);

  /* grid */
  --gutter: clamp(20px, 4vw, 72px);
  --gap: clamp(12px, 1.6vw, 24px);
  --cols: 12;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 700ms;
  --dur-slow: 800ms;
  --dur-fast: 300ms;

  --header-h: 72px;
}

@media (max-width: 1024px) { :root { --cols: 6; } }
@media (max-width: 640px)  { :root { --cols: 4; --header-h: 64px; } }

html.is-open { overflow: hidden; }

/* dark section variant */
.is-dark {
  --bg: var(--black);
  --fg: var(--white);
  --muted: #8f8f8f;
  --rule: #2a2a2a;
  --plate: var(--dark);
  background: var(--bg);
  color: var(--fg);
}

/* ---------- 1. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 200; padding: 12px 16px; background: var(--white); color: var(--black); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- 2. Typography ------------------------------------------------ */
.display, .h1, .h2, .h3, .h4, .serif {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.display { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: -0.035em; }
.h1 { font-size: var(--t-h1); line-height: 1.02; }
.h2 { font-size: var(--t-h2); line-height: 1.05; }
.h3 { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -0.025em; }
.h4 { font-size: var(--t-h4); line-height: 1.15; letter-spacing: -0.02em; }
.serif { font-size: 1em; }
em, .it { font-style: normal; font-weight: var(--w-regular); }

/* Headlines are set in Extra Light, and the words that matter (the <em> inside a
   headline) step up to Light, so the emphasis reads as a change of weight and
   never as an italic. Word spacing is opened a touch so tight tracking does not
   run words together. */
.display, .h1, .h2, .h3 { font-style: normal; font-weight: var(--w-light); word-spacing: 0.04em; }
.display em, .h1 em, .h2 em,
.display.it, .h1.it, .h2.it, .h3.it { font-style: normal; font-weight: var(--w-regular); }

.label {
  font-family: var(--font-sans);
  font-size: var(--t-label);
  font-weight: var(--w-regular);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.4;
}
.label--muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.lead { font-size: var(--t-lead); line-height: 1.4; letter-spacing: -0.012em; text-wrap: pretty; }
.body { font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg); text-wrap: pretty; max-width: 68ch; }
.body--muted { color: var(--muted); }
.body p + p { margin-top: 1.2em; }
.measure { max-width: 34em; }
.measure-l { max-width: 44em; }
.small { font-size: var(--t-small); line-height: 1.5; }

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap { padding-inline: var(--gutter); }
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 0;
}
.bleed { margin-inline: calc(-1 * var(--gutter)); }
.bleed-r { margin-right: calc(-1 * var(--gutter)); }
.bleed-l { margin-left: calc(-1 * var(--gutter)); }
.rule { border-top: 1px solid var(--rule); }
.rule-b { border-bottom: 1px solid var(--rule); }
.section { padding-block: var(--section); }
.section--tight { padding-block: var(--block); }
.section--flush { padding-top: 0; }

.meta-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s5);
  padding-block: var(--s4);
}

/* Section header: rule, edition label left, heading right */
.sec-head { border-top: 1px solid var(--rule); padding-top: var(--s5); margin-bottom: var(--block); }
.sec-head__top { display: flex; justify-content: space-between; gap: var(--s5); }
.sec-head__title { margin-top: var(--s6); }
@media (min-width: 1025px) {
  .sec-head { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); }
  .sec-head__top { grid-column: 1 / 5; flex-direction: column; justify-content: flex-start; gap: var(--s2); }
  .sec-head__title { grid-column: 5 / 13; margin-top: 0; }
  .sec-head__title--wide { grid-column: 4 / 13; }
  /* No eyebrow above the heading any more, so the heading starts at the
     left edge and takes the full measure instead of being indented by an
     empty first column. */
  .sec-head--plain .sec-head__title { grid-column: 1 / 10; }
}
.sec-head--plain .sec-head__title { margin-top: 0; }
.edition { display: inline-flex; gap: var(--s3); align-items: baseline; }
.edition__num { color: var(--muted); }

/* ---------- 4. Header, navigation bar and menu ---------------------------- */
/* Wide screens (1025px and up) get a plain navigation bar. Phones and tablets, up to
   1024px, get a menu button that opens a full-screen overlay. */
/* The header floats over the hero, whose background we control. Past the
   hero it becomes a solid bar. Difference blending against a mid-tone
   photograph resolves to that photograph's own luminance (1.0:1), so the
   wordmark vanished over five of the nine project covers. */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding-inline: var(--gutter);
  color: var(--fg);
  background: transparent;
  pointer-events: none;
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.is-scrolled .header { background: var(--bg); box-shadow: 0 1px 0 var(--rule); }
/* While the overlay is open the header sits on the overlay's own black. */
.is-open .header { color: var(--white); background: transparent; box-shadow: none; }
.header > * { pointer-events: auto; }
.header__name { font-size: var(--t-label); font-weight: var(--w-regular); letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; min-height: 44px; display: inline-flex; align-items: center; }
.header__toggle {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--t-label); font-weight: var(--w-regular); letter-spacing: 0.2em; text-transform: uppercase;
  min-height: 44px; padding-inline: 8px; margin-right: -8px;
}
.header__toggle .ico { width: 20px; height: 8px; position: relative; display: inline-block; }
.header__toggle .ico::before, .header__toggle .ico::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
  transition: transform var(--dur-fast) var(--ease);
}
.header__toggle .ico::before { top: 0; }
.header__toggle .ico::after { top: 0; transform: translateY(8px); }
.is-open .header__toggle .ico::before { transform: translateY(4px) rotate(45deg); }
.is-open .header__toggle .ico::after { transform: translateY(4px) rotate(-45deg); }
.header__toggle .w-close { display: none; }
.is-open .header__toggle .w-menu { display: none; }
.is-open .header__toggle .w-close { display: inline; }

/* ---------- 5. Menu overlay ---------------------------------------------- */
.menu {
  position: fixed; inset: 0; z-index: 110;
  background: var(--black); color: var(--white);
  --fg: var(--white); --bg: var(--black); --muted: #8f8f8f; --rule: #2a2a2a;
  display: grid; grid-template-rows: var(--header-h) 1fr auto;
  padding-inline: var(--gutter);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path var(--dur) var(--ease), visibility 0s linear var(--dur);
  overflow: auto;
}
.is-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.menu__list { align-self: center; padding-block: var(--s6); }
.menu__item { border-top: 1px solid var(--rule); }
.menu__item:last-child { border-bottom: 1px solid var(--rule); }
.menu__link {
  display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: baseline; gap: var(--s4);
  padding-block: clamp(12px, 1.6vh, 20px);
  font-family: var(--font-display); font-size: clamp(36px, 6.4vh, 88px);
  line-height: 1.1; letter-spacing: -0.03em; font-style: normal; font-weight: var(--w-light);
  transform: translateY(24px); opacity: 0;
  transition: transform var(--dur) var(--ease) calc(var(--i) * 60ms + 120ms), opacity var(--dur) var(--ease) calc(var(--i) * 60ms + 120ms), translate var(--dur-fast) var(--ease), font-weight var(--dur-fast) var(--ease), letter-spacing var(--dur-fast) var(--ease);
}
.is-open .menu__link { transform: none; opacity: 1; }
.menu__link:hover, .menu__link:focus-visible { translate: 12px 0; font-weight: var(--w-regular); letter-spacing: calc(-0.03em - var(--regular-comp)); }
.menu__link[aria-current="page"] .menu__num { color: var(--white); }
.menu__num { font-family: var(--font-sans); font-size: var(--t-label); letter-spacing: var(--track-label); color: var(--muted); }
.menu__arrow { font-family: var(--font-sans); font-size: 0.28em; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.menu__link:hover .menu__arrow { opacity: 1; }
.menu__foot { display: grid; gap: var(--s5); padding-block: var(--s6); border-top: 1px solid var(--rule); }
.menu__foot .label { color: var(--muted); }
.menu__foot a.label { color: var(--white); min-height: 44px; display: inline-flex; align-items: center; }
.menu__foot a.label:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .menu__foot { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .menu__foot > :nth-child(1) { grid-column: 1 / 5; }
  .menu__foot > :nth-child(2) { grid-column: 5 / 9; }
  .menu__foot > :nth-child(3) { grid-column: 9 / 13; text-align: right; }
}

/* ---- Navigation bar (wide screens) ---- */
.nav__list { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 44px); }
.nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-label); font-weight: var(--w-regular); letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
}
/* An underline that draws in on hover and stays for the current page. Only transform animates. */
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease);
}
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Phones and tablets: the bar gives way to the menu button. */
@media (max-width: 1024px) { .nav { display: none; } }
@media (min-width: 1025px) { .header__toggle, .menu { display: none; } }

/* ---------- 6. Hero ------------------------------------------------------ */
.hero {
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--s6));
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  grid-template-rows: auto auto 1fr;
  column-gap: var(--gap);
  padding-inline: var(--gutter);
}
.hero__top { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; gap: var(--s5); padding-bottom: var(--s6); color: var(--fg); }
/* The headline is a sentence, not a name, so it is sized to its measure:
   three lines in seven columns. It stops one column short of the portrait
   (which starts at column 8), so the two never touch. */
.hero__name { position: relative; z-index: 1; grid-column: 1 / 8; grid-row: 2; align-self: end; margin-top: 4vh; --t-display: clamp(52px, 6.5vw, 136px); line-height: 1.05; }
.hero__name .line { display: block; }
/* Each word is its own mask, so it can rise on load and roll to its other
   style on hover without moving anything around it. The box is as wide as
   the wider of the two styles (both sit in one grid cell), and the padding
   and equal negative margins leave room for ascenders and descenders while
   changing nothing about the layout. overflow: clip (not hidden) keeps the
   text baseline aligned with the surrounding line. */
.hero__name .w { display: inline-grid; overflow: clip; padding: 0.12em 0.06em 0.22em; margin: -0.12em -0.06em -0.22em; }
.hero__name .w > span { grid-area: 1 / 1; display: block; transition: transform 700ms var(--ease); }
/* The hover copy is Regular. Each word's box is as wide as the wider of its two copies, so a
   Regular copy set at normal spacing would widen every word and the whole headline (it wrapped
   the first line below 1200px). Its spacing is tightened by the measured difference in width,
   so both copies are the same width: 0.0118em per character from Extra Light, 0.0053 from Light. */
.hero__name .w__b { font-weight: var(--w-regular); letter-spacing: calc(-0.035em - var(--regular-comp-xl)); transform: translateY(1.5em); user-select: none; }
.hero__name em .w__b { letter-spacing: calc(-0.035em - var(--regular-comp)); }
.hero__roles { grid-column: 1 / 6; grid-row: 3; align-self: start; padding-top: var(--s6); display: grid; gap: var(--s2); }
/* Two equal columns sized to the wider label, so both buttons are always the
   same size whatever the text. At 360px and below they stack at full width instead,
   because two side by side would no longer fit on one line each. */
.hero__roles .label { text-wrap: balance; }
.btns.hero__cta { margin-top: var(--s5); display: grid; grid-template-columns: repeat(2, 1fr); width: max-content; max-width: 100%; }
.hero__cta .btn { white-space: nowrap; }
@media (max-width: 360px) { .btns.hero__cta { grid-template-columns: 1fr; width: 100%; } }
/* Tablet: the hero's left column is only 190-275px wide here, less than two
   buttons side by side, so they stack (still equal width) instead of running
   under the portrait. */
@media (min-width: 641px) and (max-width: 1024px) { .btns.hero__cta { grid-template-columns: 1fr; } }
/* Anchors land below the fixed header instead of underneath it. */
section[id] { scroll-margin-top: var(--header-h); }
.hero__portrait {
  /* The whole photograph, uncropped. The file is 1136 x 1146, nearly square,
     so the frame takes that ratio; a 4:5 frame with object-fit: cover was
     trimming about a fifth off the left and right (the shoulders). */
  grid-column: 7 / -1; grid-row: 2 / 4; align-self: end;
  margin-right: calc(-1 * var(--gutter));
  aspect-ratio: 1136 / 1146;
  /* 79 = the top label row, so the hero (photograph included) fits exactly one
     screen and the photograph ends where the black banner begins */
  max-height: calc(100svh - var(--header-h) - 79px);
  width: 100%;
  background: transparent;
  position: relative;
  overflow: hidden;
}
/* The photograph moves through three variables: --s (entrance zoom), --px and
   --py (pointer follow, set by the script). It is anchored at its bottom edge
   and only ever moves sideways or downwards, so its base never lifts off the
   black banner it stands on. */
.hero__portrait img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--s, 1)); transform-origin: 50% 100%; }
.hero__scroll { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.hero__scroll .arrow { display: inline-block; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

@media (max-width: 1024px) {
  /* Full width here, so the size follows the viewport: the longest line,
     "I build design teams,", must fit on one line down to 320px. */
  .hero__name { grid-column: 1 / -1; --t-display: clamp(30px, 10.4vw, 100px); }
  .hero__portrait { grid-column: 5 / -1; grid-row: 3 / 4; margin-top: var(--s6); max-height: none; align-self: end; }
  .hero__roles { grid-column: 1 / 5; }
}
@media (max-width: 640px) {
  .hero { grid-template-rows: auto auto auto auto; min-height: 0; }
  .hero__name { grid-row: 2; margin-top: 2vh; }
  .hero__roles { grid-column: 1 / -1; grid-row: 3; padding-top: var(--s5); }
  .hero__portrait {
    grid-column: 1 / -1; grid-row: 4; margin-top: var(--s6); margin-inline: calc(-1 * var(--gutter));
    width: auto; aspect-ratio: 1136 / 1146;
  }
}

/* hero entrance (JS present only) */
.js:not(.is-ready) .hero__name .w__a { transform: translateY(1.5em); }
.js.is-ready .hero__name .w__a { animation: word-rise 700ms var(--ease) backwards; animation-delay: calc(var(--n) * 80ms + 120ms); }
@keyframes word-rise { from { transform: translateY(1.5em); } }
@media (hover: hover) and (pointer: fine) {
  .hero__name .w:hover .w__a { transform: translateY(-1.6em); }
  .hero__name .w:hover .w__b { transform: none; }
}
.js .hero__top, .js .hero__roles { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.js .hero__roles { transition-delay: 350ms; }
.js .hero__top { transition-delay: 500ms; }
.js .hero__portrait { clip-path: inset(100% 0 0 0); opacity: 0; transform: translateY(24px); transition: clip-path var(--dur-slow) var(--ease) 200ms, opacity var(--dur) var(--ease) 200ms, transform var(--dur-slow) var(--ease) 200ms; }
/* Entrance: the frame opens upward while the picture pulls into focus, from a soft
   blur and a slight zoom to sharp and still. */
.js .hero__portrait img { --s: 1.06; filter: blur(14px); transition: transform 1200ms var(--ease) 200ms, filter 1100ms var(--ease) 200ms; }
.js.is-ready .hero__top, .js.is-ready .hero__roles { opacity: 1; transform: none; }
.js.is-ready .hero__portrait { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }
.js.is-ready .hero__portrait img { --s: 1; filter: blur(0); }
/* After the entrance the picture follows the pointer, smoothed. */
.js .hero__portrait.is-live img { transition: transform 700ms var(--ease); }
/* A single pass of light across the jacket: once when the entrance finishes,
   and again each time the pointer comes onto the photograph. White at 22% is
   invisible on the white ground and shows as a glint on the dark cloth. */
.hero__portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.22) 50%, transparent 62%); transform: translateX(-130%);
  /* the glint is confined to the figure: masked by the same cut-out the <img> shows */
  -webkit-mask: url("/portrait-headshot.webp") 50% 100% / contain no-repeat; mask: url("/portrait-headshot.webp") 50% 100% / contain no-repeat; }
@keyframes sheen-a { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes sheen-b { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.js.is-ready .hero__portrait::after { animation: sheen-a 1500ms var(--ease) 2100ms 1 both; }
@media (hover: hover) and (pointer: fine) { .hero__portrait.is-live:hover::after { animation: sheen-b 1400ms var(--ease) both; } }

/* ---------- 7. Reveal system --------------------------------------------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .plate[data-reveal] { transform: none; opacity: 1; }
.js .plate[data-reveal] img { clip-path: inset(0 0 100% 0); transform: scale(1.06); transition: clip-path var(--dur-slow) var(--ease), transform 800ms var(--ease); }
.js .plate[data-reveal].is-in img { clip-path: inset(0 0 0 0); transform: none; }

/* ---------- 8. Plates (images) ------------------------------------------- */
.plate { position: relative; background: var(--plate); overflow: hidden; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate--contain img { object-fit: contain; }
.fig { margin: 0; }
.fig__cap { display: flex; gap: var(--s3); align-items: baseline; margin-top: var(--s3); color: var(--muted); font-size: var(--t-small); line-height: 1.5; }
.fig__cap .num { color: var(--fg); }
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); row-gap: var(--block); align-items: start; }
.mosaic > * { grid-column: span 12; }
@media (min-width: 641px) {
  .mosaic--2 > * { grid-column: span 6; }
  .mosaic--3 > * { grid-column: span 4; }
  .mosaic--4 > * { grid-column: span 6; }
  .mosaic--3 > :nth-child(3n) { grid-column: span 4; }
  .mosaic--stagger > :nth-child(2n) { margin-top: var(--section); }
}
@media (min-width: 1025px) {
  .mosaic--4 > * { grid-column: span 3; }
  .mosaic--2-wide > :nth-child(odd) { grid-column: 1 / 8; }
  .mosaic--2-wide > :nth-child(even) { grid-column: 8 / 13; }
  .mosaic--offset > :nth-child(odd) { grid-column: 1 / 7; }
  .mosaic--offset > :nth-child(even) { grid-column: 7 / 13; }
  .mosaic--tall > * { grid-column: span 4; }
}
.plate--full { margin-inline: calc(-1 * var(--gutter)); }
.plate--wide { grid-column: 2 / 12; }
.plate--wide-l { grid-column: 1 / 10; }
.plate--wide-r { grid-column: 4 / 13; }

/* ---------- 9. Selected work — feature ----------------------------------- */
.feature { padding-block: var(--block); border-top: 1px solid var(--rule); }
.feature__link { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); row-gap: var(--s6); }
.feature__media { position: relative; overflow: hidden; background: var(--plate); }
.feature__media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-slow) var(--ease); }
.feature__link:hover .feature__media img, .feature__link:focus-visible .feature__media img { transform: scale(1.03); }
.feature__head { display: grid; gap: var(--s3); align-content: end; }
.feature__index { color: var(--muted); }
.feature__title { font-weight: var(--w-light); transition: transform var(--dur-fast) var(--ease), font-weight var(--dur-fast) var(--ease), letter-spacing var(--dur-fast) var(--ease); }
.feature__link:hover .feature__title, .feature__link:focus-visible .feature__title { transform: translateX(8px); font-weight: var(--w-regular); letter-spacing: calc(-0.03em - var(--regular-comp)); }
.feature__meta { color: var(--muted); max-width: 28em; transition: color var(--dur-fast) var(--ease); }
.feature__link:hover .feature__meta { color: var(--fg); }
.feature__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: var(--s3); opacity: 0.55; transform: translateX(-8px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.feature__link:hover .feature__cta, .feature__link:focus-visible .feature__cta { opacity: 1; transform: none; }
.feature__foot { display: flex; justify-content: space-between; gap: var(--s5); align-items: baseline; }

/* Variants. No variant sets aspect-ratio: each media box inherits the
   cover image's own proportions inline, so the work is never cropped.
   Spans are 6 to 8 columns rather than full bleed, which keeps a feature
   around half the viewport height instead of filling it. */
.feature--a .feature__media { grid-column: 1 / 9; }
.feature--a .feature__head { grid-column: 9 / 13; align-content: start; }
.feature--a .feature__foot { grid-column: 9 / 13; align-self: end; }
.feature--b .feature__media { grid-column: 6 / -1; margin-right: calc(-1 * var(--gutter)); }
.feature--b .feature__head { grid-column: 1 / 5; grid-row: 1; }
.feature--c .feature__media { grid-column: 1 / 8; margin-left: calc(-1 * var(--gutter)); }
.feature--c .feature__head { grid-column: 9 / 13; grid-row: 1; align-content: start; }
.feature--d .feature__media { grid-column: 4 / 11; }
.feature--d .feature__head { grid-column: 4 / 11; }
.feature--e .feature__media { grid-column: 6 / 13; }
.feature--e .feature__head { grid-column: 1 / 6; grid-row: 1; }
@media (max-width: 1024px) {
  .feature__link { row-gap: var(--s5); }
  .feature--a .feature__head, .feature--b .feature__head, .feature--c .feature__head, .feature--d .feature__head, .feature--e .feature__head { grid-column: 1 / -1; grid-row: auto; }
  .feature--a .feature__foot { grid-column: 1 / -1; }
  .feature--a .feature__media { grid-column: 1 / 11; }
  .feature--b .feature__media { grid-column: 3 / -1; }
  .feature--c .feature__media { grid-column: 1 / 11; }
  .feature--d .feature__media { grid-column: 2 / 12; }
  .feature--e .feature__media { grid-column: 3 / -1; }
}
@media (max-width: 640px) {
  .feature__link > .feature__media { grid-column: 1 / -1; margin-inline: 0; }
  .feature--b .feature__media { margin-left: var(--s7); }
  .feature--c .feature__media { margin-right: var(--s7); }
  .feature--e .feature__media { margin-left: var(--s7); }
  .feature--d .feature__media { margin-inline: 0; }
}

/* ---------- 10. Work index rows ----------------------------------------- */
.index { border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: 3em 1fr auto; column-gap: var(--s4); align-items: baseline;
  padding-block: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--rule);
}
/* The number and title slide right on hover with the translate property (a
   compositor-only change) instead of growing the row's left padding, which
   re-laid out the grid on every frame. The rules between rows stay put. */
.row > :nth-child(-n+2), .row__meta { transition: translate var(--dur-fast) var(--ease); }
.row:hover > :nth-child(-n+2), .row:focus-visible > :nth-child(-n+2) { translate: 12px 0; }
@media (max-width: 1024px) { .row:hover .row__meta, .row:focus-visible .row__meta { translate: 12px 0; } }
.row__title { font-weight: var(--w-light); transition: font-weight var(--dur-fast) var(--ease), letter-spacing var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease); }
.row:hover .row__title, .row:focus-visible .row__title { font-weight: var(--w-regular); letter-spacing: calc(-0.025em - var(--regular-comp)); }
.row__meta { grid-column: 2; color: var(--muted); margin-top: var(--s2); }
.row__right { display: grid; justify-items: end; gap: var(--s2); text-align: right; color: var(--muted); }
.row__arrow { font-size: 20px; line-height: 1; opacity: 0; transform: translate(-4px, 4px); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease); }
.row:hover .row__arrow, .row:focus-visible .row__arrow { opacity: 1; transform: none; }
.row__thumb { display: none; }
@media (min-width: 1025px) {
  .row { grid-template-columns: 4em minmax(0, 1fr) minmax(0, 28%) minmax(0, 18%) 2em; align-items: baseline; }
  .row__meta { grid-column: 3; margin-top: 0; }
  .row__right { display: contents; }
  .row__year { grid-column: 4; text-align: right; }
  .row__arrow { grid-column: 5; justify-self: end; }
}
@media (max-width: 1024px) {
  .row { grid-template-columns: 3em 1fr auto; }
  .row__thumb { display: block; grid-column: 1 / -1; margin-top: var(--s5); }
}
.preview {
  position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
  width: clamp(240px, 26vw, 460px); opacity: 0; transition: opacity var(--dur-fast) var(--ease);
  will-change: transform;
}
.preview.is-on { opacity: 1; }
.preview .plate { aspect-ratio: 4 / 3; }
.preview img { transition: none; }

/* ---------- 11. Statements / lists / timelines --------------------------- */
.statement { max-width: 12em; }
.statement--wide { max-width: 16em; }
.pillars { border-top: 1px solid var(--rule); }
.pillar { display: grid; gap: var(--s4); padding-block: var(--s6); border-bottom: 1px solid var(--rule); }
@media (min-width: 1025px) {
  .pillar { grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); }
  .pillar > :nth-child(1) { grid-column: 1 / 2; }
  .pillar > :nth-child(2) { grid-column: 2 / 7; }
  .pillar > :nth-child(3) { grid-column: 7 / 12; }
}

.cap-list { border-top: 1px solid var(--rule); }
.cap { border-bottom: 1px solid var(--rule); }
.cap__btn, .cap__row {
  width: 100%; display: grid; grid-template-columns: 3em 1fr auto; column-gap: var(--s4); align-items: baseline;
  text-align: left; padding-block: clamp(12px, 1.5vw, 22px);
}
.cap__btn > :nth-child(-n+2) { transition: translate var(--dur-fast) var(--ease), font-weight var(--dur-fast) var(--ease), letter-spacing var(--dur-fast) var(--ease); }
.cap__btn .h3 { font-weight: var(--w-light); }
.cap__btn:hover .h3, .cap__btn:focus-visible .h3 { font-weight: var(--w-regular); letter-spacing: calc(-0.025em - var(--regular-comp)); }
.cap__btn:hover > :nth-child(-n+2) { translate: 12px 0; }
.cap__num { color: var(--muted); }
.cap__plus { font-size: var(--t-h4); line-height: 1; transition: transform var(--dur-fast) var(--ease); }
.cap__btn[aria-expanded="true"] .cap__plus { transform: rotate(45deg); }
.cap__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-fast) var(--ease); }
.cap__panel > div { overflow: hidden; }
.cap__panel.is-open { grid-template-rows: 1fr; }
.cap__inner { padding: 0 0 var(--s6) 3em; display: grid; gap: var(--s4); }
.cap__inner .body { max-width: 34em; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.chips li { color: var(--muted); }
.chips li::before { content: "— "; }
/* Inside an expanded capability the points stack as ruled rows, one per line.
   A row that has a term and a description shows them as two columns once
   there is room, and stacks them on a phone. */
.cap__inner .chips { display: grid; gap: 0; }
.cap__inner .chips li { display: grid; gap: var(--s1) var(--s5); padding-block: var(--s3); border-top: 1px solid var(--rule); }
.cap__inner .chips li::before { content: none; }
.chip__k { color: var(--fg); }
.chip__v { color: var(--muted); }
@media (min-width: 640px) { .cap__inner .chips li:has(.chip__k) { grid-template-columns: minmax(7em, 0.45fr) 1fr; } }
@media (min-width: 1025px) {
  .cap__btn, .cap__row { grid-template-columns: 4em 1fr auto; }
  .cap__inner { padding-left: 4em; grid-template-columns: 1fr 1fr; }
}

.timeline { border-top: 1px solid var(--rule); }
.tl {
  display: grid; grid-template-columns: 1fr; gap: var(--s2);
  padding-block: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--rule);
}
.tl__period { color: var(--muted); }
.tl__role { color: var(--muted); }
.tl--current .tl__period { color: var(--fg); }
@media (min-width: 641px) {
  .tl { grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); align-items: baseline; }
  .tl__period { grid-column: 1 / 3; }
  .tl__org { grid-column: 3 / 8; }
  .tl__role { grid-column: 8 / 13; }
}

.brands { display: flex; flex-wrap: wrap; gap: 0.1em 0.5em; align-items: baseline; }
.brands li { font-family: var(--font-display); font-weight: var(--w-regular); font-size: clamp(30px, 4.6vw, 80px); line-height: 1.05; letter-spacing: -0.03em; white-space: nowrap; }
.brands li:nth-child(even) { font-weight: var(--w-light); }   /* Regular and Light alternate, so each name reads on its own: brands and agencies alike */
.brands li::after { content: ","; color: var(--light); }
.brands li:last-child::after { content: "."; }
/* the agencies list is set exactly like the brands list above it: the same black, the same alternating Regular and Light */
.brands--muted li { color: var(--fg); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--gap); }
/* Each figure sits on a light liquid-glass card, the same material as the
   "Get in touch" button: slanted gradient body, bevel from stacked inner
   shadows, a rim highlight that rotates on hover, a sheen that sweeps
   across, and a floating shadow. --rim is registered with @property in the
   button block, so the conic gradient can animate. The card itself does not
   scale on hover, because data-reveal already owns its transform. */
.stat {
  --ease-glass: cubic-bezier(0.25, 1, 0.5, 1);
  position: relative; isolation: isolate;
  padding: var(--s6) var(--s5); border-radius: 28px;
  background: linear-gradient(-75deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.10));
  -webkit-backdrop-filter: blur(6px) saturate(180%); backdrop-filter: blur(6px) saturate(180%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.28),
    inset 0 4px 6px rgba(0, 0, 0, 0.05),
    inset 0 -4px 6px rgba(255, 255, 255, 0.95),
    inset 0 0 4px 10px rgba(255, 255, 255, 0.4),
    0 14px 8px -8px rgba(0, 0, 0, 0.2);
  transition: box-shadow 300ms var(--ease-glass);
}
.stat::before, .stat::after { content: ""; position: absolute; border-radius: inherit; pointer-events: none; z-index: -1; }
.stat::before {
  inset: -1px; padding: 1.5px;
  background: conic-gradient(from var(--rim), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 2.5%, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 53%, rgba(0, 0, 0, 0) 97.5%, rgba(0, 0, 0, 0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: --rim 600ms var(--ease-glass);
}
.stat::after {
  inset: 1px;
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 55%);
  background-size: 200% 200%; background-position: 0% 50%; opacity: 0;
  transition: background-position 700ms var(--ease-glass), opacity 300ms var(--ease-glass);
}
@media (hover: hover) and (pointer: fine) {
  .stat:hover {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.28),
      inset 0 4px 6px rgba(0, 0, 0, 0.05),
      inset 0 -4px 6px rgba(255, 255, 255, 0.95),
      inset 0 0 4px 10px rgba(255, 255, 255, 0.4),
      0 8px 4px -6px rgba(0, 0, 0, 0.26);
  }
  .stat:hover::before { --rim: -125deg; }
  .stat:hover::after { background-position: 100% 50%; opacity: 1; }
}
.js .stat[data-reveal] {
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow 300ms var(--ease-glass);
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s;
}
@media (prefers-reduced-transparency: reduce) { .stat { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .stat::after { display: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .stat { background: #fff; } }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
/* One icon per figure, in the top corner: the same size and stroke weight on every card, in the
   text colour. It is decoration, so the card's label and number carry the meaning. */
.stat__icon { position: absolute; top: var(--s6); right: var(--s5); width: 28px; height: 28px; color: var(--fg); transition: transform var(--dur-fast) var(--ease); }
.stat__icon .icon { display: block; width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) { .stat:hover .stat__icon { transform: translateY(-3px); } }
@media (max-width: 640px) { .stat__icon { width: 24px; height: 24px; top: var(--s5); right: var(--s4); } }
@media (max-width: 360px) { .stat__icon { position: static; margin-bottom: var(--s3); } }
.stat__v { display: inline-block; font-family: var(--font-display); font-weight: var(--w-regular); font-size: clamp(40px, 4.4vw, 72px); line-height: 1; letter-spacing: -0.03em; transition: transform var(--dur-fast) var(--ease); }
.stat__l { color: var(--muted); margin-top: var(--s2); max-width: 14em; transition: color var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .stat:hover .stat__v { transform: translateX(8px); }
  .stat:hover .stat__l { color: var(--fg); }
}

/* ---------- 12. Buttons & links ----------------------------------------- */
/* Buttons are liquid glass in a pill, built from five layers (the technique is
   a common one; this is our own version):
     1. a slanted gradient across the body,
     2. a bevel made from stacked inner shadows: dark on the top edge, light
        on the bottom edge, plus a soft glow just inside the rim,
     3. a rim highlight (::before) drawn as a conic gradient cut to a thin
        ring by a mask; it rotates round the edge on hover,
     4. a sheen band (::after) that sweeps across on hover,
     5. the label's reflection: a faint shadow floating under the text at
        rest that settles up onto it on hover.
   Hover also presses the button in slightly. On the white page the light
   glass is mostly edge and shadow; the dark one shows the sheen fully. The
   hairline ring keeps the shape clear where the glass is nearly invisible. */
@property --rim { syntax: "<angle>"; inherits: false; initial-value: -75deg; }
.btn {
  --ease-glass: cubic-bezier(0.25, 1, 0.5, 1);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 28px; border: 0; border-radius: 999px;
  color: var(--fg);
  background: linear-gradient(-75deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.10));
  -webkit-backdrop-filter: blur(6px) saturate(180%); backdrop-filter: blur(6px) saturate(180%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.32),
    inset 0 3px 4px rgba(0, 0, 0, 0.06),
    inset 0 -3px 4px rgba(255, 255, 255, 0.95),
    inset 0 0 3px 6px rgba(255, 255, 255, 0.45),
    0 9px 5px -5px rgba(0, 0, 0, 0.22);
  text-shadow: 0 4px 1px rgba(0, 0, 0, 0.12);
  font-size: var(--t-label); font-weight: var(--w-regular); letter-spacing: var(--track-label); text-transform: uppercase;
  transition: transform 300ms var(--ease-glass), box-shadow 300ms var(--ease-glass), text-shadow 300ms var(--ease-glass);
}
.btn::before, .btn::after { content: ""; position: absolute; border-radius: inherit; pointer-events: none; z-index: -1; }
.btn::before {
  inset: -1px; padding: 1.5px;
  background: conic-gradient(from var(--rim), rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: --rim 600ms var(--ease-glass);
}
.btn::after {
  inset: 1px;
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 55%);
  background-size: 200% 200%; background-position: 0% 50%;
  transition: background-position 700ms var(--ease-glass);
}
.btn:hover, .btn:focus-visible {
  transform: scale(0.975);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.32),
    inset 0 3px 4px rgba(0, 0, 0, 0.06),
    inset 0 -3px 4px rgba(255, 255, 255, 0.95),
    inset 0 0 3px 6px rgba(255, 255, 255, 0.45),
    0 5px 2px -3px rgba(0, 0, 0, 0.28);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
}
.btn:hover::before, .btn:focus-visible::before { --rim: -125deg; }
.btn:hover::after, .btn:focus-visible::after { background-position: 100% 50%; }
.btn:active { transform: scale(0.96); }

/* Dark (smoked) glass for the primary button. */
.btn--solid {
  color: #fff;
  background: linear-gradient(-75deg, #000, #0d0d0d 50%, #000);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 3px 4px rgba(255, 255, 255, 0.12),
    inset 0 -3px 4px rgba(0, 0, 0, 0.55),
    inset 0 0 3px 6px rgba(255, 255, 255, 0.05),
    0 11px 6px -6px rgba(0, 0, 0, 0.4);
  text-shadow: none;
}
.btn--solid::before { background: conic-gradient(from var(--rim), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 0.7)); }
.btn--solid::after { background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.14) 40%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0) 55%); }
.btn--solid:hover, .btn--solid:focus-visible {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 3px 4px rgba(255, 255, 255, 0.12),
    inset 0 -3px 4px rgba(0, 0, 0, 0.55),
    inset 0 0 3px 6px rgba(255, 255, 255, 0.05),
    0 6px 3px -4px rgba(0, 0, 0, 0.45);
  text-shadow: none;
}
@media (prefers-reduced-transparency: reduce) {
  .btn { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .btn--solid { background: #000; }
}
@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } .btn:hover, .btn:focus-visible { transform: none; } }
.btns { display: flex; flex-wrap: wrap; gap: var(--s3); }
.arrow-link { display: inline-flex; align-items: baseline; gap: 12px; min-height: 44px; align-items: center; }
.arrow-link .arr { display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.arrow-link:hover .arr { transform: translate(4px, -4px); }
.arrow-link .h2 { font-weight: var(--w-light); transition: font-weight var(--dur-fast) var(--ease), letter-spacing var(--dur-fast) var(--ease); }
.arrow-link:hover .h2, .arrow-link:focus-visible .h2 { font-weight: var(--w-regular); letter-spacing: calc(-0.025em - var(--regular-comp)); }
/* In a composite title the emphasised words sit one step above the Light base (Regular), the
   same relationship as the site's Extra Light and Light headlines, and keep their own spacing on hover. */
.arrow-link .h2 em, .next__link .h1 em { font-weight: var(--w-regular); }
.arrow-link:hover .h2 em, .arrow-link:focus-visible .h2 em { letter-spacing: -0.025em; }
.next__link:hover .h1 em, .next__link:focus-visible .h1 em { letter-spacing: -0.03em; }
.u { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; text-decoration-color: var(--light); transition: text-decoration-color var(--dur-fast) var(--ease); }
a.u { min-height: 44px; display: inline-flex; align-items: center; }
.u:hover { text-decoration-color: currentColor; }
.big-link { display: inline-block; font-family: var(--font-display); font-weight: var(--w-light); letter-spacing: -0.03em; line-height: 1.05; overflow-wrap: anywhere; position: relative; }
.big-link { transition: font-weight var(--dur-fast) var(--ease), letter-spacing var(--dur-fast) var(--ease); }
.big-link:hover, .big-link:focus-visible { font-weight: var(--w-regular); letter-spacing: calc(-0.03em - var(--regular-comp)); }
.big-link::after { content: ""; position: absolute; left: 0; bottom: 0.02em; width: 100%; height: 1px; background: currentColor; transform: scaleX(0.18); transform-origin: left; transition: transform var(--dur) var(--ease); }
.big-link:hover::after, .big-link:focus-visible::after { transform: scaleX(1); }

/* ---------- 13. Page heads (inner pages) --------------------------------- */
.page-head { padding-top: calc(var(--header-h) + var(--s8)); padding-bottom: var(--block); }
.page-head__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5); color: var(--muted); margin-bottom: var(--s7); }
.page-head__intro { margin-top: var(--s7); }
@media (min-width: 1025px) {
  .page-head__intro { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); }
  .page-head__intro > * { grid-column: 5 / 12; }
  .page-head__intro > .left { grid-column: 1 / 4; }
}

/* meta grid (case study) */
.meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--gap); border-top: 1px solid var(--rule); padding-top: var(--s5); }
@media (min-width: 900px) { .meta { grid-template-columns: repeat(4, 1fr); } .meta--3 { grid-template-columns: repeat(3, 1fr); } }
.meta dt { color: var(--muted); margin-bottom: var(--s2); }
.meta dd { margin: 0; }

/* case-study numbered section */
.cs-sec { border-top: 1px solid var(--rule); padding-block: var(--block); }
.cs-sec__head { display: flex; gap: var(--s4); align-items: baseline; margin-bottom: var(--s7); }
.cs-sec__num { color: var(--muted); }
.cs-body { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); }
/* Grid children default to min-width: auto, so a long unbroken line in a list or
   definition grid stretched the whole column past a 320px screen. */
.cs-body > * { min-width: 0; }
@media (min-width: 1025px) {
  .cs-sec { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); }
  .cs-sec__head { grid-column: 1 / 4; margin: 0; align-self: start; position: sticky; top: calc(var(--header-h) + 16px); }
  .cs-body { grid-column: 4 / 13; }
  .cs-body--full { grid-column: 1 / 13; }
}
.cs-gallery { margin-top: var(--section); }
.cs-gallery > * + * { margin-top: var(--block); }
.plate-stack > * + * { margin-top: var(--block); }
.lists { display: grid; gap: var(--s6); }
@media (min-width: 700px) { .lists { grid-template-columns: 1fr 1fr; column-gap: var(--gap); } }
.list-t { border-top: 1px solid var(--rule); }
.list-t li { padding-block: var(--s3); border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 2.5em 1fr; gap: var(--s3); }
.list-t li .num { color: var(--muted); }
.quote { font-family: var(--font-display); font-weight: var(--w-light); font-size: var(--t-h3); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.quote--big { font-size: var(--t-h2); line-height: 1.02; }
.quote__src { display: block; margin-top: var(--s5); font-style: normal; }
.manifesto { display: grid; gap: var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s7); }
.manifesto .line { font-family: var(--font-display); font-weight: var(--w-light); font-size: var(--t-h3); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.manifesto .line--hl { font-weight: var(--w-light); font-size: var(--t-h2); line-height: 1; }
.colorways { display: grid; gap: var(--block) var(--gap); }
@media (min-width: 700px) { .colorways { grid-template-columns: repeat(3, 1fr); } }
.colorway__name { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s4); }
.colorway__name i { width: 12px; height: 12px; display: inline-block; border: 1px solid var(--fg); }
.principles-3 { display: grid; gap: var(--s7) var(--gap); }
@media (min-width: 900px) { .principles-3 { grid-template-columns: repeat(3, 1fr); } }
.principle > * + * { margin-top: var(--s4); }
.principle .quote { font-size: var(--t-h4); }

/* next project */
.next { border-top: 1px solid var(--rule); }
.next__link { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); row-gap: var(--s6); padding-block: var(--block); align-items: end; }
.next__text { grid-column: 1 / 8; display: grid; gap: var(--s4); }
.next__media { grid-column: 8 / 13; margin-right: calc(-1 * var(--gutter)); }
.next__media img { transition: transform var(--dur-slow) var(--ease); }
.next__link:hover .next__media img { transform: scale(1.03); }
.next__link .h1 { font-weight: var(--w-light); transition: font-weight var(--dur-fast) var(--ease), letter-spacing var(--dur-fast) var(--ease); }
.next__link:hover .h1, .next__link:focus-visible .h1 { font-weight: var(--w-regular); letter-spacing: calc(-0.03em - var(--regular-comp)); }
@media (max-width: 1024px) { .next__text { grid-column: 1 / -1; } .next__media { grid-column: 3 / -1; } }
@media (max-width: 640px) { .next__media { grid-column: 1 / -1; margin-inline: calc(-1 * var(--gutter)); } }

/* about photograph spread: a landscape tile with rounded corners, the same
   28px radius as the work thumbnails, with the heading stacked beneath it.
   Beside it, a landscape photograph would leave the heading too narrow. */
.spread { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); row-gap: var(--s7); align-items: end; }
.spread__media { grid-column: 1 / 10; aspect-ratio: 1552 / 1013; border-radius: 28px; }
.spread__text { grid-column: 1 / -1; display: grid; gap: var(--s7); align-self: end; }
@media (max-width: 1024px) { .spread__media { grid-column: 1 / -1; } }
@media (max-width: 640px) { .spread__media { border-radius: 20px; } }

/* home about teaser */
.teaser { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); row-gap: var(--s7); }
.teaser__media { grid-column: 7 / 13; aspect-ratio: 1552 / 1013; grid-row: 1; align-self: end; border-radius: 28px; }
.teaser__text { grid-column: 1 / 7; grid-row: 1; display: grid; gap: var(--s6); align-content: center; }   /* centred beside the photograph: the heading and the text no longer sit a photograph's height apart */
@media (max-width: 1024px) { .teaser__media { grid-column: 1 / -1; grid-row: auto; } .teaser__text { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 640px) { .teaser__media { border-radius: 20px; } }

/* prose block: label left, text right */
.prose { display: grid; gap: var(--s5); padding-block: var(--block); border-top: 1px solid var(--rule); }
@media (min-width: 1025px) {
  .prose { grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); }
  .prose > .prose__label { grid-column: 1 / 4; }
  .prose > .prose__body { grid-column: 4 / 11; }
  .prose > .prose__body--wide { grid-column: 4 / 13; }
}

/* ---------- 14. Contact & footer ---------------------------------------- */
.contact { padding-top: var(--section); padding-bottom: var(--s8); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gap); row-gap: var(--s8); }
.contact__title { grid-column: 1 / 13; }
.contact__links { grid-column: 1 / 13; display: grid; gap: var(--s6); }
.contact__meta { grid-column: 1 / 13; display: grid; gap: var(--s4); align-content: end; color: var(--muted); }
@media (min-width: 1025px) {
  .contact__title { grid-column: 1 / 10; }
  .contact__links { grid-column: 1 / 9; }
  .contact__meta { grid-column: 9 / 13; }
}
.contact__email { font-size: clamp(19px, 4.4vw, 84px); min-height: 44px; }   /* 19px floor: the address must fit on one line inside the glass panel at 320-375px */
.contact__row { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7); border-top: 1px solid var(--rule); padding-top: var(--s5); }

.footer { border-top: 1px solid var(--rule); padding-block: var(--s7) var(--s5); }
.footer__grid { display: grid; gap: var(--s6); }
.footer__name { font-size: var(--t-label); font-weight: var(--w-regular); letter-spacing: 0.2em; text-transform: uppercase; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.footer__links a { min-height: 44px; display: inline-flex; align-items: center; }
.footer__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5); margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--rule); color: var(--muted); }
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .footer__grid > :nth-child(1) { grid-column: 1 / 5; }
  .footer__grid > :nth-child(2) { grid-column: 5 / 9; }
  .footer__grid > :nth-child(3) { grid-column: 9 / 13; }
}
.footer .label--muted { color: var(--muted); }

/* ---------- 15. Marquee-free rhythm helpers ------------------------------ */
.stack > * + * { margin-top: var(--s5); }
.stack-l > * + * { margin-top: var(--s7); }
.mt-1 { margin-top: var(--s2); } .mt-2 { margin-top: var(--s4); } .mt-3 { margin-top: var(--s5); } .mt-4 { margin-top: var(--s6); }
.mt-5 { margin-top: var(--s7); } .mt-6 { margin-top: var(--s8); } .mt-7 { margin-top: var(--s9); } .mt-8 { margin-top: var(--block); } .mt-9 { margin-top: var(--section); }
.right { text-align: right; }
.flex-between { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s5); flex-wrap: wrap; }
.col-r { margin-left: auto; }

/* ---------- 16. Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__name .w__b { display: none; }
  .hero__portrait::after { display: none; }
  .js .hero__portrait img { filter: none !important; }
  .js .hero__name .w__a { animation: none !important; transform: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-delay: 0ms !important; }
  .js [data-reveal], .js .hero__name .line > span, .js .hero__top, .js .hero__roles, .js .hero__portrait, .js .hero__portrait img, .js .plate[data-reveal], .js .plate[data-reveal] img {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .hero__scroll .arrow { animation: none; }
}

/* ---------- 17. Print ----------------------------------------------------- */
@media print {
  .header, .preview, .skip { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 18. Utilities ------------------------------------------------- */
@media (max-width: 640px) { .hide-m { display: none !important; } }

/* ---------- 19. Running banner ---------------------------------------------
   One per page. A black band with white type, between the hero and the
   numbers, stating the breadth of the practice. It reuses the .is-dark
   tokens the other black sections use, so the colours cannot drift. The
   track holds two identical groups and slides by exactly one group's
   width, so the loop has no seam. Linear easing is deliberate: any easing
   on a continuous loop reads as a stutter at every repeat. */
/* Frosted glass. The band slides up over the foot of the portrait so there is a photograph behind it to blur. It is light, so that it
   belongs to the white page and is not a dark block on it; the type is the page's own black. */
.marquee { --overlap: 34px; overflow: hidden; padding-block: 12px; position: relative; z-index: 2; margin-top: calc(-1 * var(--overlap)); }
.marquee {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 -12px 40px rgba(20, 30, 90, 0.06);
}
@media (prefers-reduced-transparency: reduce) { .marquee { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.marquee__track { display: flex; width: max-content; animation: marquee 64s linear infinite; }
.marquee__group { display: flex; flex-shrink: 0; align-items: center; }
.marquee__item {
  display: flex; align-items: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--w-regular);
  /* Sentence case, as written, in Regular throughout. */
  font-size: clamp(28px, 3.6vw, 60px); line-height: 1.15; letter-spacing: -0.02em; word-spacing: 0.06em;
}
/* Sized from the type, so the asterisk scales with every breakpoint. The
   small downward nudge centres it on the lowercase x-height, not the line box. */
.marquee__star { flex-shrink: 0; width: 0.5em; height: 0.5em; margin-inline: 0.9em; transform: translateY(0.04em); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .marquee__track { animation-duration: 44s; } .marquee { --overlap: 26px; padding-block: 10px; } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; width: auto; flex-wrap: wrap; transform: none; }
  .marquee__group[aria-hidden="true"] { display: none; }
  .marquee__group { flex-wrap: wrap; padding-inline: var(--gutter); row-gap: var(--s3); }
}

/* ---------- 20. Worked-with band ---------------------------------------------
   Brands, then agencies and organizations: white type on black, mixing Light and Thin, each
   name in its own capitalisation, separated by space alone (no bullets).
   Static. Hovering a list dims every name but the one under the pointer. */
.worked { padding-block: var(--section); }
.worked__list { display: flex; flex-wrap: wrap; align-items: baseline; margin-top: var(--s6); column-gap: 1.1em; row-gap: var(--s3); font-size: clamp(30px, 4.2vw, 68px); }
.worked__gap { margin-top: var(--s8); }
.worked__item:nth-child(even) { font-weight: var(--w-light); }   /* Regular and Light alternate, as in the About page lists */
.worked__item {
  white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--w-regular); font-size: 1em;
  line-height: 1.15; letter-spacing: -0.02em; word-spacing: 0.06em;
  transition: opacity var(--dur-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .worked__list:hover .worked__item { opacity: 0.4; }
  .worked__list:hover .worked__item:hover { opacity: 1; }
}

/* ---------- 21. The page canvas -----------------------------------------------
   The background is one continuous atmosphere down the whole page, not a set of coloured sections. Reading from the top:
   pure white; then, so faint it is felt more than seen, a pastel haze of icy blue that gathers slowly down
   the page (main::before); then, above the Contact section, the long descent: soft pastel, icy blue, a cooler and richer
   blue, and finally the deep Aurora blue in which the Contact section and the footer sit (--dusk, drawn by #contact::before
   or, on pages with no Contact section, by the footer). The blues are the palette #E3F2FD, #90CAF9, #2196F3, #0D47A1 (colorhunt.co/palette/e3f2fd90caf92196f30d47a1),
   carried on into darker tints of the same hue for the bottom edge. Section boundaries never change colour: only the last few hundred
   pixels of the page do, and they change gradually. The darkest blue is at the very bottom edge.
   The descent is text-free where it passes through the mid-tones: the Contact section reserves the room for it, so the text
   above stays on near-white and the text below sits on deep blue. --dz is the length of the descent; --dz-up is how far it
   reaches back into the whitespace above the section. */
:root {
  --dz: 440px; --dz-up: 120px; --tail: 0px;   /* how far the descent sits above the bottom of <main>: the Contact section and the room above it */
  --dusk: linear-gradient(180deg,
      rgba(144, 202, 249, 0.0) 0,
      rgba(143, 201, 249, 0.032) calc(var(--dz) * 0.0385),
      rgba(140, 200, 249, 0.117) calc(var(--dz) * 0.0769),
      rgba(136, 197, 249, 0.242) calc(var(--dz) * 0.1154),
      rgba(129, 194, 248, 0.392) calc(var(--dz) * 0.1538),
      rgba(122, 190, 248, 0.551) calc(var(--dz) * 0.1923),
      rgba(112, 185, 248, 0.706) calc(var(--dz) * 0.2308),
      rgba(102, 179, 247, 0.841) calc(var(--dz) * 0.2692),
      rgba(90, 173, 246, 0.943) calc(var(--dz) * 0.3077),
      rgba(76, 167, 245, 0.996) calc(var(--dz) * 0.3462),
      #3ca0f4 calc(var(--dz) * 0.3846),
      #2898f3 calc(var(--dz) * 0.4231),
      #1f90ed calc(var(--dz) * 0.4615),
      #1d89e5 calc(var(--dz) * 0.5),
      #1a81dd calc(var(--dz) * 0.5385),
      #1879d5 calc(var(--dz) * 0.5769),
      #1672ce calc(var(--dz) * 0.6154),
      #146bc6 calc(var(--dz) * 0.6538),
      #1264bf calc(var(--dz) * 0.6923),
      #115eb9 calc(var(--dz) * 0.7308),
      #1058b3 calc(var(--dz) * 0.7692),
      #0f53ae calc(var(--dz) * 0.8077),
      #0e4fa9 calc(var(--dz) * 0.8462),
      #0e4ca6 calc(var(--dz) * 0.8846),
      #0d49a3 calc(var(--dz) * 0.9231),
      #0d48a2 calc(var(--dz) * 0.9615),
      #0d47a1 calc(var(--dz) * 1.0),
      #0b3d8f calc(var(--dz) * 1.1),
      #082f70 calc(var(--dz) * 1.24),
      #062559 calc(var(--dz) * 1.5),
      #051d47 100%);
  --canvas: linear-gradient(180deg,
      #ffffff 0,
      #fcfeff calc((100% - var(--tail) - 500px) * 0.0455),
      #f9fcff calc((100% - var(--tail) - 500px) * 0.0909),
      #f6fbfe calc((100% - var(--tail) - 500px) * 0.1364),
      #f1f9fe calc((100% - var(--tail) - 500px) * 0.1818),
      #ecf6fe calc((100% - var(--tail) - 500px) * 0.2273),
      #e7f4fd calc((100% - var(--tail) - 500px) * 0.2727),
      #e1f1fd calc((100% - var(--tail) - 500px) * 0.3182),
      #dbeefd calc((100% - var(--tail) - 500px) * 0.3636),
      #d5ebfd calc((100% - var(--tail) - 500px) * 0.4091),
      #cfe8fc calc((100% - var(--tail) - 500px) * 0.4545),
      #c8e5fc calc((100% - var(--tail) - 500px) * 0.5),
      #c2e2fc calc((100% - var(--tail) - 500px) * 0.5455),
      #bbdffc calc((100% - var(--tail) - 500px) * 0.5909),
      #b5dcfb calc((100% - var(--tail) - 500px) * 0.6364),
      #afd9fb calc((100% - var(--tail) - 500px) * 0.6818),
      #a9d6fb calc((100% - var(--tail) - 500px) * 0.7273),
      #a3d3fa calc((100% - var(--tail) - 500px) * 0.7727),
      #9ed1fa calc((100% - var(--tail) - 500px) * 0.8182),
      #9acffa calc((100% - var(--tail) - 500px) * 0.8636),
      #96cdf9 calc((100% - var(--tail) - 500px) * 0.9091),
      #93cbf9 calc((100% - var(--tail) - 500px) * 0.9545),
      #90caf9 calc((100% - var(--tail) - 500px) * 1.0),
      #90caf9 100%);
}
/* Browsers that can mix gradients in OKLab get the cleaner version (no muddy mid-tones); the rest keep the same stops mixed in sRGB. */
@supports (background: linear-gradient(in oklab, #000, #fff)) {
  :root {
  --dusk: linear-gradient(in oklab 180deg,
      rgba(144, 202, 249, 0.0) 0,
      rgba(143, 201, 249, 0.032) calc(var(--dz) * 0.0385),
      rgba(140, 200, 249, 0.117) calc(var(--dz) * 0.0769),
      rgba(136, 197, 249, 0.242) calc(var(--dz) * 0.1154),
      rgba(129, 194, 248, 0.392) calc(var(--dz) * 0.1538),
      rgba(122, 190, 248, 0.551) calc(var(--dz) * 0.1923),
      rgba(112, 185, 248, 0.706) calc(var(--dz) * 0.2308),
      rgba(102, 179, 247, 0.841) calc(var(--dz) * 0.2692),
      rgba(90, 173, 246, 0.943) calc(var(--dz) * 0.3077),
      rgba(76, 167, 245, 0.996) calc(var(--dz) * 0.3462),
      #3ca0f4 calc(var(--dz) * 0.3846),
      #2898f3 calc(var(--dz) * 0.4231),
      #1f90ed calc(var(--dz) * 0.4615),
      #1d89e5 calc(var(--dz) * 0.5),
      #1a81dd calc(var(--dz) * 0.5385),
      #1879d5 calc(var(--dz) * 0.5769),
      #1672ce calc(var(--dz) * 0.6154),
      #146bc6 calc(var(--dz) * 0.6538),
      #1264bf calc(var(--dz) * 0.6923),
      #115eb9 calc(var(--dz) * 0.7308),
      #1058b3 calc(var(--dz) * 0.7692),
      #0f53ae calc(var(--dz) * 0.8077),
      #0e4fa9 calc(var(--dz) * 0.8462),
      #0e4ca6 calc(var(--dz) * 0.8846),
      #0d49a3 calc(var(--dz) * 0.9231),
      #0d48a2 calc(var(--dz) * 0.9615),
      #0d47a1 calc(var(--dz) * 1.0),
      #0b3d8f calc(var(--dz) * 1.1),
      #082f70 calc(var(--dz) * 1.24),
      #062559 calc(var(--dz) * 1.5),
      #051d47 100%);
  --canvas: linear-gradient(in oklab 180deg,
      #ffffff 0,
      #fcfeff calc((100% - var(--tail) - 500px) * 0.0455),
      #f9fcff calc((100% - var(--tail) - 500px) * 0.0909),
      #f6fbfe calc((100% - var(--tail) - 500px) * 0.1364),
      #f1f9fe calc((100% - var(--tail) - 500px) * 0.1818),
      #ecf6fe calc((100% - var(--tail) - 500px) * 0.2273),
      #e7f4fd calc((100% - var(--tail) - 500px) * 0.2727),
      #e1f1fd calc((100% - var(--tail) - 500px) * 0.3182),
      #dbeefd calc((100% - var(--tail) - 500px) * 0.3636),
      #d5ebfd calc((100% - var(--tail) - 500px) * 0.4091),
      #cfe8fc calc((100% - var(--tail) - 500px) * 0.4545),
      #c8e5fc calc((100% - var(--tail) - 500px) * 0.5),
      #c2e2fc calc((100% - var(--tail) - 500px) * 0.5455),
      #bbdffc calc((100% - var(--tail) - 500px) * 0.5909),
      #b5dcfb calc((100% - var(--tail) - 500px) * 0.6364),
      #afd9fb calc((100% - var(--tail) - 500px) * 0.6818),
      #a9d6fb calc((100% - var(--tail) - 500px) * 0.7273),
      #a3d3fa calc((100% - var(--tail) - 500px) * 0.7727),
      #9ed1fa calc((100% - var(--tail) - 500px) * 0.8182),
      #9acffa calc((100% - var(--tail) - 500px) * 0.8636),
      #96cdf9 calc((100% - var(--tail) - 500px) * 0.9091),
      #93cbf9 calc((100% - var(--tail) - 500px) * 0.9545),
      #90caf9 calc((100% - var(--tail) - 500px) * 1.0),
      #90caf9 100%);
  }
}
main { position: relative; isolation: isolate; }
main:has(#contact) { --tail: 1350px; }
main::before {
  /* The canvas. One gradient down the whole page, from pure white at the very top through #E3F2FD to #90CAF9, so the palette is in
     view all the way as you scroll; it ends flat where the descent (#contact::before) takes over from the same #90CAF9. Over it,
     a repeating haze of very faint icy-blue lights, and a grain to dither it. */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 320px at 6% 42%, rgba(144, 202, 249, 0.16) 0%, rgba(144, 202, 249, 0.1376) 14%, rgba(144, 202, 249, 0.0928) 30%, rgba(144, 202, 249, 0.0512) 46%, rgba(144, 202, 249, 0.0224) 62%, rgba(144, 202, 249, 0.0064) 78%, rgba(144, 202, 249, 0.0) 100%),
    radial-gradient(56vw 300px at 94% 62%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.301) 14%, rgba(255, 255, 255, 0.203) 30%, rgba(255, 255, 255, 0.112) 46%, rgba(255, 255, 255, 0.049) 62%, rgba(255, 255, 255, 0.014) 78%, rgba(255, 255, 255, 0.0) 100%),
    radial-gradient(64vw 320px at 30% 86%, rgba(33, 150, 243, 0.05) 0%, rgba(33, 150, 243, 0.043) 14%, rgba(33, 150, 243, 0.029) 30%, rgba(33, 150, 243, 0.016) 46%, rgba(33, 150, 243, 0.007) 62%, rgba(33, 150, 243, 0.002) 78%, rgba(33, 150, 243, 0.0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    var(--canvas);
  background-size: 100% 1400px, 100% 1400px, 100% 1400px, 160px 160px, 100% 100%;
  background-repeat: repeat-y, repeat-y, repeat-y, repeat, no-repeat;
}

/* The Contact section is where the page finishes: white text on the deep blue, glass panels, the Aurora light. */
.is-dark { --muted: #d9ebf9; --rule: rgba(255, 255, 255, 0.2); background: none; }
#contact {
  position: relative;   /* no isolation: the descent's layers sit behind the page's own content, including the section above */
  padding-top: calc(var(--dz) * 0.8 - var(--dz-up) - var(--section));   /* the room the descent passes through: the large heading starts where the blue is already deep enough for white large type */
}
#contact::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--dz-up)); bottom: 0; z-index: -1; pointer-events: none;
  background: var(--dusk);
}
/* the Aurora: three broad, soft lights (blue, indigo, cyan-blue) that arrive only after the descent has reached the deep blue, and
   let go again toward the bottom edge, so the darkest blue is the last thing on the page */
#contact::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1000px 640px at 4% 44%, rgba(33, 150, 243, 0.22) 0%, rgba(33, 150, 243, 0.1892) 14%, rgba(33, 150, 243, 0.1276) 30%, rgba(33, 150, 243, 0.0704) 46%, rgba(33, 150, 243, 0.0308) 62%, rgba(33, 150, 243, 0.0088) 78%, rgba(33, 150, 243, 0.0) 100%),
    radial-gradient(860px 600px at 98% 62%, rgba(144, 202, 249, 0.13) 0%, rgba(144, 202, 249, 0.1118) 14%, rgba(144, 202, 249, 0.0754) 30%, rgba(144, 202, 249, 0.0416) 46%, rgba(144, 202, 249, 0.0182) 62%, rgba(144, 202, 249, 0.0052) 78%, rgba(144, 202, 249, 0.0) 100%),
    radial-gradient(1000px 560px at 54% 84%, rgba(13, 71, 161, 0.34) 0%, rgba(13, 71, 161, 0.2924) 14%, rgba(13, 71, 161, 0.1972) 30%, rgba(13, 71, 161, 0.1088) 46%, rgba(13, 71, 161, 0.0476) 62%, rgba(13, 71, 161, 0.0136) 78%, rgba(13, 71, 161, 0.0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 28%, #000 46%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, transparent 28%, #000 46%, #000 70%, transparent 100%);
}
.contact__links, .contact__meta {
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-radius: 28px;
  position: relative; isolation: isolate;
  -webkit-backdrop-filter: blur(20px) saturate(110%); backdrop-filter: blur(20px) saturate(110%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 24px 60px rgba(0, 0, 0, 0.28);
}
.contact__links { padding: var(--s7); }
.contact__meta { padding: var(--s6); }
@media (max-width: 640px) { .contact__links, .contact__meta { padding: var(--s5); border-radius: 22px; } }
@media (prefers-reduced-transparency: reduce) {
  .contact__links, .contact__meta { background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Edge of the glass: a 1px ring lit at the top left and dim at the bottom right, cut out of a gradient with a mask. */
.contact__links::before, .contact__meta::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .contact__links, .contact__meta { background: rgba(8, 47, 112, 0.92); }
  .marquee { background: rgba(255, 255, 255, 0.94); }
  .btn { background: #fff; } .btn--solid { background: #000; }
}

/* The foot of the page, in the same deep blue. Under a Contact section it continues the blue and deepens to the darkest at the
   bottom edge. On a page with no Contact section (--lead) the footer carries the whole descent itself. */
.footer-band {
  --fg: #fff; --muted: #d9ebf9; --rule: rgba(255, 255, 255, 0.18);
  color: #fff; position: relative;
  background: linear-gradient(180deg, #051d47 0, #03122e 100%);
}
.footer-band--lead { background: linear-gradient(180deg, #0d47a1 0, #0a3a86 12%, #082f70 30%, #062559 55%, #03122e 100%); }   /* picks up exactly where the lead zone ends: #0D47A1 */
/* On a page with no Contact section the descent is drawn by this empty block at the end of <main> (Document adds it), inside the same
   stacking context as the canvas, so it lies over the canvas and dissolves out of it. The footer carries on from its last colour. */
.footer-band--lead .footer { border-top: 0; }   /* no rule at the seam: the blue simply carries on */
.lead-zone { position: relative; height: calc(var(--dz) - var(--dz-up)); }
.lead-zone::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--dz-up)); bottom: 0; z-index: -1; pointer-events: none;
  background: var(--dusk);
}

/* The "Worked with" lists, the "What I do" list and the Leadership accordions are Apple Liquid Glass, in its light form: clear inside, so the canvas shows straight through, with the same
   rim as the buttons: bright crescents along the top-right and bottom-left edges, fainter inner ones, a fine dark line, a hairline,
   and two soft specular flares in the opposite corners (behind the type, held to the corners so they never sit under a word). The type
   stays the page's black, on the canvas tint. */
.worked__list, .cap-list, .acc {
  --tr: 30px;
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--s7); border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.14));
  -webkit-backdrop-filter: blur(4px) saturate(102%); backdrop-filter: blur(4px) saturate(102%);   /* no saturation lift: the inside is the canvas colour, not a bluer blue */
  box-shadow:
    inset 2px -2px 1px -1px rgba(255, 255, 255, 0.95),
    inset -2px 2px 1px -1px rgba(255, 255, 255, 0.95),
    inset 6px -6px 1px -6px rgba(255, 255, 255, 0.6),
    inset -6px 6px 1px -6px rgba(255, 255, 255, 0.6),
    inset 0 0 2px rgba(20, 50, 120, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 18px 44px -14px rgba(20, 60, 140, 0.28);
}
.worked__list::after, .cap-list::after, .acc::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 0; border-radius: inherit; filter: blur(7px);
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.8) 0%, transparent var(--tr), transparent calc(100% - var(--tr)), rgba(255, 255, 255, 0.8) 100%);
}
@media (max-width: 640px) { .worked__list, .cap-list, .acc { --tr: 22px; padding: var(--s5); border-radius: 22px; } }
@media (prefers-reduced-transparency: reduce) { .worked__list, .cap-list, .acc { background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .worked__list, .cap-list, .acc { background: rgba(255, 255, 255, 0.72); } }
@media print { .worked__list, .cap-list, .acc { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; } .worked__list::after, .cap-list::after, .acc::after { display: none; } }
@media (prefers-contrast: more) { .worked__list, .cap-list, .acc { background: #fff; box-shadow: inset 0 0 0 1px #000; -webkit-backdrop-filter: none; backdrop-filter: none; } .worked__list::after, .cap-list::after, .acc::after { display: none; } }

/* the capability list keeps its rows and hairlines: the glass frames them, so the outer rules go and the padding is sideways only */
.cap-list { border-top: 0; padding: var(--s3) var(--s6); }
.cap-list > .cap:last-child { border-bottom: 0; }
@media (max-width: 640px) { .cap-list { padding: var(--s2) var(--s5); } }
@media print { .cap-list { padding: 0; } }

/* the accordions on the Leadership page: the glass frames the rows, so the outer hairlines go and the padding is sideways only */
.acc { border-top: 0; padding: var(--s3) var(--s6); }
.acc > .acc__item:last-child { border-bottom: 0; }
@media (max-width: 640px) { .acc { padding: var(--s2) var(--s5); } }
@media print { .acc { padding: 0; } }

/* Increased contrast: no gradient canvas. The page is plain white, and the Contact section and footer are one flat deep blue. */
@media (prefers-contrast: more) {
  main::before, #contact::after { display: none; }
  #contact::before, .lead-zone::before { background: #08265f; }
  .footer-band, .footer-band--lead { background: #03122e; }
  .is-dark, .footer-band { --muted: #ffffff; }
  .contact__links, .contact__meta { background: #03122e; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Print: ink on paper, no canvas. */
@media print {
  main::before, #contact::before, #contact::after, .lead-zone, .contact__links::before, .contact__meta::before { display: none !important; }
  .is-dark, .footer-band { color: #000; --fg: #000; --muted: #444; --rule: #ccc; background: none; }
  #contact { padding-top: 0; }
  .footer-band, .footer-band--lead { padding-top: 0; background: none; }
  .contact__links, .contact__meta { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Accordion: the "What I do" language, for the Leadership page --------------------------------------------------------------
   Number, title, a plus that becomes a minus, a hairline between rows; no card, no fill. On a pointer that can hover, a row opens as the
   pointer rests on it (see the script); on touch, a tap opens it; from the keyboard, Enter. One row is open at a time. The panel opens
   in height, opacity and the space around its text together. Without JavaScript every row simply stays open. */
.acc__item { border-bottom: 1px solid var(--rule); }
.acc__btn {
  width: 100%; display: grid; grid-template-columns: 3em 1fr auto; column-gap: var(--s4); align-items: baseline; text-align: left;
  padding-block: clamp(12px, 1.5vw, 22px); cursor: pointer;
}
.acc__btn > :nth-child(-n+2) { transition: translate var(--dur-fast) var(--ease), font-weight var(--dur-fast) var(--ease), letter-spacing var(--dur-fast) var(--ease); }
.acc__title { font-weight: var(--w-light); }
.acc__num { color: var(--muted); }
.acc__btn:hover .acc__title, .acc__btn:focus-visible .acc__title, .acc__item.is-open .acc__title { font-weight: var(--w-regular); letter-spacing: calc(-0.025em - var(--regular-comp)); }
@media (hover: hover) { .acc__btn:hover > :nth-child(-n+2) { translate: 12px 0; } }
.acc__plus { position: relative; width: 16px; height: 16px; align-self: center; }
.acc__plus::before, .acc__plus::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; margin-top: -0.5px; background: currentColor;
  transition: transform 420ms var(--ease), opacity 300ms var(--ease);
}
.acc__plus::after { transform: rotate(90deg); }
.acc__item.is-open .acc__plus::after { transform: rotate(0deg); opacity: 0; }      /* the vertical stroke lies down and fades: + becomes - */
.acc__panel { display: grid; grid-template-rows: 1fr; }
.acc__clip { overflow: hidden; min-height: 0; }
.acc__inner { padding: var(--s2) 0 var(--s6) calc(3em + var(--s4)); display: grid; gap: var(--s3); }   /* aligned with the title, not the number */
.acc__inner .body { max-width: 34em; }
.acc__lead { color: var(--fg); font-weight: var(--w-light); }
.js .acc__panel { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 420ms var(--ease), opacity 300ms var(--ease); }
.js .acc__item.is-open .acc__panel { grid-template-rows: 1fr; opacity: 1; }
.js .acc__inner { padding-top: 0; padding-bottom: 0; transform: translateY(-8px); transition: padding 420ms var(--ease), transform 420ms var(--ease); }
.js .acc__item.is-open .acc__inner { padding-top: var(--s2); padding-bottom: var(--s6); transform: none; }
html:not(.js) .acc__plus { display: none; }
@media (min-width: 1025px) {
  .acc__btn { grid-template-columns: 4em 1fr auto; }
  .acc__inner { padding-left: calc(4em + var(--s4)); grid-template-columns: 1fr 1fr; column-gap: var(--gap); align-items: start; }
}
/* a row with only a supporting line (no lead) gives that line the whole width */
.acc__inner > :only-child { grid-column: 1 / -1; }
/* Narrow screens: the accordion titles may wrap, and the row gives up some of its gutter, so the longest title ("Creating psychological
   safety", "Developing emerging leaders") fits a 320px screen inside the glass without pushing the page wider. */
.acc__title { overflow-wrap: anywhere; min-width: 0; }
.prose > * { min-width: 0; }
@media (max-width: 400px) {
  .acc { padding-inline: var(--s4); }
  .acc__btn { grid-template-columns: 2em 1fr auto; column-gap: var(--s3); }
  .acc__title { font-size: clamp(22px, 7vw, 28px); }
  .acc__inner { padding-left: calc(2em + var(--s3)); }
}
@media (prefers-reduced-motion: reduce) {
  .js .acc__panel, .js .acc__inner, .acc__plus::before, .acc__plus::after, .acc__btn > :nth-child(-n+2) { transition: none; }
}
@media print { .acc__panel { grid-template-rows: 1fr !important; opacity: 1 !important; } .acc__inner { padding-block: 0 var(--s4) !important; transform: none !important; } .acc__plus { display: none; } }

/* ---------- 22. Selected work thumbnails ------------------------------------
   Rounded corners only. The alternating layouts no longer bleed off the page
   edge: a rounded tile cut by the viewport reads as a mistake. */
.feature__media { border-radius: 28px; }
.feature--b .feature__media { margin-right: 0; }
.feature--c .feature__media { margin-left: 0; }
@media (max-width: 640px) { .feature__media { border-radius: 20px; } }

/* ---------- 23. Selected work on the home page ------------------------------
   This section is set in Regular, with its emphasised word in Light, where the
   rest of the site's headlines are Extra Light with Light emphasis. On hover a
   title steps down to Light, which is narrower, so it can never reflow. */
#work .sec-head__title { font-weight: var(--w-regular); }
#work .sec-head__title em { font-weight: var(--w-light); }