/* =============================================================================
   TIMPAEMI · Flagship design system · 26 September 2026
   One stylesheet for every route. The homepage adds flagship-home-20260926.css.

   Colour  Night #0B0B0C (ground) · Graphite #2E2C2A (rules on night) · Bone #F4F1EC (reading)
           White · Mist #BDB8B3 (10:1 on night) · Stone #55514D (7:1 on bone) · Line #DAD5CE
           Pink #FF4F8B — the square only: logo, primary action marker, focus.
   Type    Geist (logo, headlines, reading, interface) + Instrument Serif Italic for the human
           half of a headline. Eleven roles, fluid between 390 and 1440 px. Round 2 (26 Sep 2026):
           reading text, labels, links and buttons are sentence case and never smaller than 14 px;
           capitals stay for the display headline voice only.
   Space   4 8 12 16 24 32 48 72 96 120 · 12 columns · 72 px margins · 24 px gutters.
   ============================================================================= */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-var-latin.19f9c92546aa.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* the three Thai glyphs of the footer language link (ไทย), so it matches on every page; the Thai page loads the full face */
@font-face {
  font-family: "TP Thai Sans";
  src: url("/assets/fonts/thai/tp-thai-label.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0E17, U+0E22, U+0E44;
}

@font-face {
  font-family: "TP Serif Italic";
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --night: #0b0b0c;
  --graphite: #2e2c2a;
  --bone: #f4f1ec;
  --white: #ffffff;
  --mist: #bdb8b3;
  --stone: #55514d;
  --line: #dad5ce;
  --pink: #ff4f8b;

  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px;
  --s-32: 32px; --s-48: 48px; --s-72: 72px; --s-96: 96px; --s-120: 120px;

  --margin: clamp(24px, 5vw, 72px);
  --section: clamp(72px, 8.334vw, 120px);
  --gutter: 24px;
  --header: 88px;

  --display-xl: clamp(2.75rem, 6.667vw, 6rem);
  --display-l: clamp(2.75rem, 5vw, 4.5rem);
  --display-m: clamp(2.25rem, 3.889vw, 3.5rem);
  --accent-xl: clamp(3rem, 7.223vw, 6.5rem);
  --accent-l: clamp(3rem, 5.556vw, 5rem);
  --accent-m: clamp(2.5rem, 4.167vw, 3.75rem);
  --title: clamp(1.5rem, 1.806vw, 1.625rem);
  --lead: clamp(1.0625rem, 1.32vw, 1.1875rem);

  --sans: "Geist", "TP Thai Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "TP Serif Italic", "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* section tone: every component reads these, so one class flips a band */
  --fg: var(--white);
  --sub: var(--mist);
  --rule: var(--graphite);
  --bg: var(--night);
}

/* =============================================================== base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s-24); }
body {
  margin: 0; min-height: 100vh;
  background: var(--night); color: var(--white);
  font-family: var(--sans); font-size: 16px; line-height: 26px; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }
strong, b { font-weight: 600; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; padding: 0 var(--s-4); background: rgba(255, 255, 255, 0.08); }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }
::selection { background: var(--white); color: var(--night); }
[hidden] { display: none !important; }
[lang="th"], :lang(th) { line-break: strict; word-break: normal; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--margin); top: -80px; z-index: 60;
  padding: var(--s-12) var(--s-16); background: var(--white); color: var(--night);
  font-size: 15px; line-height: 20px; font-weight: 600;
}
.skip-link:focus { top: var(--s-16); }

/* =============================================================== layout */
.shell, .page-shell { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48); }

/* a band is a full-width section with the vertical rhythm; its tone sets every child colour */
.band { position: relative; padding-block: var(--section); background: var(--bg); color: var(--fg); }
.band--bone { --fg: var(--night); --sub: var(--stone); --rule: var(--line); --bg: var(--bone); }
.band--tight-top { padding-top: 0; }
.band--tight-bottom { padding-bottom: 0; }
.band--ruled { box-shadow: inset 0 1px 0 var(--graphite); }
.band--bone.band--ruled { box-shadow: none; }

/* =============================================================== type roles */
.label, .eyebrow, .internal-label, .campaign-label {
  display: block;
  font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums; color: var(--sub);
}
.label--fg { color: var(--fg); }
.lead { font-size: var(--lead); line-height: 1.58; }
.lead--mist { color: var(--sub); }
.body-copy { font-size: 16px; line-height: 26px; }
.ui { font-size: 15px; line-height: 24px; font-weight: 500; }
.title { font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em; }

h1, h2, .display-xl, .display-l, .display-m {
  font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance;
}
h1, .display-xl { font-size: var(--display-xl); line-height: 0.958; }
h2, .display-l { font-size: var(--display-l); line-height: 1; }
.display-m { font-size: var(--display-m); line-height: 1; }
h3 { font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em; }
h4 { font-size: 15px; line-height: 24px; font-weight: 600; letter-spacing: 0.02em; }

/* a statement is two voices: caps for authority, a serif line for the person behind it */
.line-caps { display: block; }
.line-human {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: var(--accent-l); line-height: 0.9; letter-spacing: -0.01em; text-transform: none; text-wrap: balance;
}
h1 .line-human { font-size: var(--accent-xl); line-height: 0.885; }
.display-m .line-human, h2.display-m .line-human { font-size: var(--accent-m); }
.line-human.from-caps { text-transform: lowercase; }
/* a serif line that continues the caps sentence stays lower case; a second statement keeps its capital (.from-caps) */
.line-human.lower { text-transform: lowercase; }
/* optical margin: bold caps carry ~0.06em of side bearing, so the caps line is pulled back to put the ink on the grid line;
   the serif line keeps its own origin (its capitals already overhang slightly) */
main h1, main h2 { margin-left: -0.05em; }
main h1 .line-human, main h2 .line-human { margin-left: 0.05em; }
.line-human.from-caps::first-letter { text-transform: uppercase; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; }
.editorial-accent, h1 em, h2 em, .page-title .accent {
  font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em;
}

/* =============================================================== links and buttons */
.text-link, .internal-link, .campaign-text-link {
  display: inline-block; width: fit-content;
  font-size: 16px; line-height: 24px; font-weight: 600;
  padding-bottom: var(--s-4); color: var(--fg);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.4s var(--ease);
}
.text-link:hover, .internal-link:hover, .campaign-text-link:hover { background-size: 40% 1px; }

.btn, .button, .internal-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-12);
  width: fit-content; min-height: 52px; padding: 0 var(--s-24);
  border: 0; border-radius: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--sans); font-size: 16px; line-height: 20px; font-weight: 600;
  background: var(--white); color: var(--night);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn::after, .button-primary::after, .internal-button::after { content: ""; width: 8px; height: 8px; background: var(--pink); flex-shrink: 0; }
.btn:hover, .button:hover, .internal-button:hover { background: var(--bone); }
.btn--ghost, .button-secondary { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px currentColor; }
.btn--ghost::after, .button-secondary::after { display: none; }
.btn--ghost:hover, .button-secondary:hover { background: var(--fg); color: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); }
.band--bone .btn:not(.btn--ghost), .band--bone .button-primary, .band--bone .internal-button { background: var(--night); color: var(--white); }
.band--bone .btn:not(.btn--ghost):hover, .band--bone .button-primary:hover, .band--bone .internal-button:hover { background: var(--graphite); }
.actions, .button-row, .internal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-16) var(--s-24); }

/* =============================================================== header */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 30; color: var(--white); }
.header-inner {
  max-width: 1440px; margin: 0 auto; height: var(--header); padding-inline: var(--margin);
  display: flex; align-items: center; gap: var(--s-48);
}
.brand-link { flex-shrink: 0; display: block; }
.brand-link img { width: 132px; height: auto; aspect-ratio: 802.68 / 100; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: var(--s-32); }
.site-nav a:not(.nav-cta) {
  display: inline-block; font-size: 16px; line-height: 24px; font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.35s var(--ease);
}
.site-nav a:not(.nav-cta):hover, .site-nav a[aria-current="page"]:not(.nav-cta), .site-nav a.is-section { background-size: 100% 1px; }
.site-nav li:last-child { margin-left: var(--s-16); }
.nav-cta {
  display: inline-flex; align-items: center; gap: var(--s-12); height: 44px; padding: 0 var(--s-24);
  background: var(--white); color: var(--night);
  font-size: 16px; line-height: 20px; font-weight: 600;
  transition: background-color 0.25s var(--ease);
}
.nav-cta::after { content: ""; width: 8px; height: 8px; background: var(--pink); }
.nav-cta:hover { background: var(--bone); }
:is(a, span, p)[lang="th"] { letter-spacing: 0 !important; }
.language-label { margin-left: var(--s-4); font-size: 14px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.7; vertical-align: 0; }
.nav-cta .language-label { opacity: 0.55; }
.nav-toggle { display: none; }
/* after the first screen the header returns whenever the reader scrolls up (flagship-202608.js sets the classes) */
.site-header.is-fixed {
  position: fixed; background: rgba(11, 11, 12, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 -1px 0 var(--graphite); transform: translateY(-100%); transition: transform 0.35s var(--ease);
}
.site-header.is-fixed.is-shown, .site-header.is-fixed:focus-within { transform: translateY(0); }
.site-header.is-fixed .header-inner { height: 64px; }

/* =============================================================== breadcrumbs and jump navigation */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--s-8); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--s-8); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 32px; }
.breadcrumbs li + li::before { content: "/"; opacity: 0.6; }
.breadcrumbs a { color: var(--fg); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.3s var(--ease); }
.breadcrumbs a:hover { background-size: 100% 1px; }

/* numbered route index: services, work, FAQ topics, policies */
.jump {
  display: grid; grid-template-columns: repeat(var(--jump-cols, 4), minmax(0, 1fr)); column-gap: var(--gutter);
  box-shadow: inset 0 -1px 0 var(--rule);
}
.jump a {
  display: flex; flex-direction: column; gap: var(--s-8); min-height: 44px; touch-action: manipulation;
  padding: var(--s-16) 0 var(--s-24); box-shadow: inset 0 1px 0 var(--rule);
  font-size: 15px; line-height: 24px; font-weight: 600; color: var(--fg);
  transition: box-shadow 0.3s var(--ease);
}
.jump a:hover { box-shadow: inset 0 2px 0 var(--fg); }
/* five routes: five of six slots, so every item sits on the 12-column grid */
.jump--five { --jump-cols: 6; }
.jump-label { padding: var(--s-16) 0 var(--s-24); box-shadow: inset 0 1px 0 var(--rule); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
.jump a > span:first-child, .jump-num { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--sub); font-variant-numeric: tabular-nums; }
.jump a > .jump-note { font-size: 15px; line-height: 22px; font-weight: 400; color: var(--sub); }

/* =============================================================== heroes */
/* Split hero: words on the grid's left half, the photograph from column 7 to the screen edge. */
.hero-split { position: relative; background: var(--night); color: var(--white); min-height: clamp(720px, 100svh, 1000px); display: flex; }
.hero-split__media { position: absolute; top: 0; bottom: 0; left: calc(50% + 12px); right: 0; overflow: hidden; }
.hero-split__media picture, .hero-full__media picture { width: 100%; height: 100%; }
.hero-split__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.hero-split__media::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 180px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(11, 11, 12, 0.66), rgba(11, 11, 12, 0)); }
.hero-split__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 200px; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(11, 11, 12, 0.72), rgba(11, 11, 12, 0)); }
.hero-split__body {
  position: relative; width: 100%; max-width: 1440px; margin: 0 auto;
  padding: calc(var(--header) + var(--s-72)) var(--margin) var(--s-72);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-content: end;
}
.hero-split__copy { grid-column: 1 / span 6; display: flex; flex-direction: column; }
.hero-split__copy > .breadcrumbs { margin-bottom: auto; }
.hero-split__copy .label { margin-top: var(--s-72); }
.hero-split__copy h1 { margin-top: var(--s-24); }
.hero-split__copy .lead { margin-top: var(--s-32); max-width: 34rem; }
.hero-split__copy .actions { margin-top: var(--s-48); }
.hero-caption { position: absolute; right: var(--margin); bottom: var(--s-24); z-index: 1; color: var(--white); text-align: right; }

.hero-split h1 { font-size: var(--display-l); line-height: 1; }
.hero-split h1 .line-human { font-size: var(--accent-l); line-height: 0.9; margin-top: var(--s-4); }
.hero-split__media .hero-caption { position: absolute; right: var(--s-24); bottom: var(--s-24); z-index: 2; color: var(--white); }
.hero-split--principals { --focus: 50% 66%; }
.hero-split--directors { --focus: 50% 58%; }
.hero-split--table { --focus: 50% 62%; }
.hero-split--together { --focus: 50% 42%; }
.hero-split--paemi { --focus: 50% 45%; }
.hero-split--rooftop { --focus: 50% 50%; }

/* Text hero: the page opens on type. */
.hero-text { position: relative; background: var(--night); color: var(--white); }
.hero-text__inner { padding: calc(var(--header) + var(--s-72)) var(--margin) var(--section); max-width: 1440px; margin: 0 auto; }
.hero-text__grid { margin-top: var(--s-72); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48); align-items: end; }
.hero-text__grid > .hero-text__title { grid-column: 1 / span 7; }
.hero-text__grid > .hero-text__title .label { margin-bottom: var(--s-24); }
.hero-text__grid > .hero-text__aside { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--s-24); }
.hero-text__aside p { font-size: var(--lead); line-height: 1.58; }
.hero-text__aside p + p { margin-top: calc(-1 * var(--s-8)); }
.hero-text .jump { margin-top: var(--s-96); }

/* Full hero: one photograph across the screen, words at the foot. */
.hero-full { position: relative; overflow: hidden; background: var(--night); color: var(--white); min-height: clamp(680px, 100svh, 1040px); display: flex; }
.hero-full__media { position: absolute; inset: 0; }
.hero-full__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 40%); }
.hero-full::before, .hero-full::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-full::before { background: linear-gradient(180deg, rgba(11, 11, 12, 0.62) 0%, rgba(11, 11, 12, 0) 20%); }
.hero-full::after { background: linear-gradient(180deg, rgba(11, 11, 12, 0) 40%, rgba(11, 11, 12, 0.92) 88%); }

/* =============================================================== section patterns */
/* ruled section head: label left, index right */
.band-head { display: flex; justify-content: space-between; gap: var(--s-24); padding-top: var(--s-16); box-shadow: inset 0 1px 0 var(--fg); }
.band-head > * { color: var(--fg); }
@media (max-width: 40rem) { .band-head { flex-wrap: wrap; row-gap: var(--s-8); } .band-head > * { white-space: nowrap; } .band-head > :last-child:not(:first-child) { color: var(--sub); } }

/* heading left, reading right */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48); align-items: start; }
.split--end { align-items: end; }
.split__head { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--s-24); }
.split__body { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--s-24); }
.band-head + .split, .band-head + .statement-block, .band-head + * { margin-top: var(--s-48); }

.name-list { margin-top: var(--s-72); }
.statement-block { display: flex; flex-direction: column; gap: var(--s-32); }
.statement-block .lead { max-width: 40rem; }

/* reading measure for long copy */
.reading { display: flex; flex-direction: column; gap: var(--s-16); max-width: 40rem; }
.reading > p, .reading > ul, .reading > ol { font-size: 17px; line-height: 28px; }
.reading > h2, .reading > h3 { margin-top: var(--s-32); font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em; text-transform: none; }
.reading a:not(.btn):not(.button):not(.internal-link):not(.text-link), .prose a:not(.btn):not(.button):not(.internal-link), .rich a {
  color: var(--fg); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size 0.3s var(--ease);
}
.reading a:not(.btn):not(.button):not(.internal-link):not(.text-link):hover, .prose a:not(.btn):not(.button):not(.internal-link):hover, .rich a:hover { background-size: 40% 1px; }
.clean-list { display: flex; flex-direction: column; box-shadow: inset 0 -1px 0 var(--rule); }
.clean-list li { padding: var(--s-12) 0 var(--s-12) var(--s-24); position: relative; box-shadow: inset 0 1px 0 var(--rule); font-size: 16px; line-height: 26px; }
.clean-list li::before { content: ""; position: absolute; left: 0; top: 22px; width: 8px; height: 1px; background: var(--fg); }

/* numbered ruled list */
.ruled { display: flex; flex-direction: column; box-shadow: inset 0 -1px 0 var(--rule); counter-reset: ruled; }
.ruled > li { counter-increment: ruled; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; padding: var(--s-16) 0; box-shadow: inset 0 1px 0 var(--rule); }
.ruled > li::before { content: counter(ruled, decimal-leading-zero); grid-row: 1 / span 3; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--sub); font-variant-numeric: tabular-nums; }
.ruled strong, .ruled h3, .ruled h4 { font-size: 16px; line-height: 24px; font-weight: 600; }
.ruled p, .ruled small { grid-column: 2; display: block; font-size: 15px; line-height: 24px; font-weight: 500; color: var(--sub); }

/* three steps across the grid */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48); }
.steps > li { display: flex; flex-direction: column; gap: var(--s-24); padding-top: var(--s-24); box-shadow: inset 0 1px 0 var(--rule); }
.steps .step-num, .steps > li > span[aria-hidden="true"] { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--sub); font-variant-numeric: tabular-nums; }
.steps h3, .steps strong { font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em; text-transform: none; }
.steps p { margin-top: calc(-1 * var(--s-12)); font-size: 16px; line-height: 26px; color: var(--fg); }

/* facts: definition rows */
.fact-table { width: 100%; box-shadow: inset 0 -1px 0 var(--rule); }
.fact-table tr { box-shadow: inset 0 1px 0 var(--rule); }
.fact-table th, .fact-table td { padding: var(--s-16) 0; text-align: left; vertical-align: baseline; }
.fact-table th { width: 38%; padding-right: var(--s-24); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
.fact-table td { font-size: 17px; line-height: 26px; font-weight: 500; color: var(--fg); }
.fact-table thead th { color: var(--fg); }
.fact-table td a { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }

/* notices: an outlined aside with a label voice */
.notice { padding: var(--s-24); box-shadow: inset 0 0 0 1px var(--rule); font-size: 15px; line-height: 24px; color: var(--fg); }
.notice strong { display: block; margin-bottom: var(--s-8); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }

/* photographs */
.figure { display: flex; flex-direction: column; gap: var(--s-12); }
.figure img { width: 100%; object-fit: cover; }
.figure figcaption, .figure .label { color: var(--sub); }
.ratio-4-5 img { aspect-ratio: 4 / 5; }
.ratio-2-3 img { aspect-ratio: 2 / 3; }
.ratio-16-9 img { aspect-ratio: 16 / 9; }
.ratio-21-9 img { aspect-ratio: 21 / 9; }
.photo-band { position: relative; }
.photo-band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: var(--focus, 50% 50%); }
.photo-band--rooftop { --focus: 50% 28%; }
.photo-band--bar { --focus: 50% 38%; }
.photo-band figcaption { display: flex; justify-content: space-between; gap: var(--s-24); margin-top: var(--s-12); }

/* closing call to action on every route */
.cta-band { background: var(--night); color: var(--white); box-shadow: inset 0 1px 0 var(--graphite); }
.cta-mail { width: fit-content; font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em; padding-bottom: var(--s-4); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; }
.cta-band p:not(.label) { font-size: var(--lead); line-height: 1.58; color: var(--fg); }
.cta-band p a:not(.btn):not(.button) { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }

/* tone wrappers for reviewed section markup */
.tone-band, .division-band, .work-band, .duo-band { background: var(--bg); color: var(--fg); }
.tone-band > section, .tone-band > .editorial-section { box-shadow: none; }
.editorial-heading > .internal-label, .editorial-heading > .label { padding-top: var(--s-16); box-shadow: inset 0 1px 0 var(--fg); color: var(--fg); }
.editorial-reading { padding-top: calc(var(--s-16) + 16px + var(--s-24)); }

/* two photographs side by side */
.duo-band { padding-block: 0 var(--section); }
.duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-24); }
.duo > .figure { grid-column: span 6; }
.duo > .figure img { aspect-ratio: 4 / 5; }
.division-band + .duo-band { padding-top: 0; }

/* service index at the foot of the hero */
.service-index-wrap { margin-top: var(--s-96); }
.service-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.service-index > div { display: flex; flex-direction: column; padding-top: var(--s-16); box-shadow: inset 0 1px 0 var(--graphite); }
.service-index p { margin-bottom: var(--s-12); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--mist); }
.service-index a { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; min-height: 44px; padding: var(--s-12) 0; box-shadow: inset 0 -1px 0 var(--graphite); font-size: 15px; line-height: 22px; font-weight: 600; transition: color 0.2s; }
.service-index a > span:first-child { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--mist); font-variant-numeric: tabular-nums; }
.service-index-text { display: flex; flex-direction: column; gap: var(--s-4); }
.service-index-text small { font-size: 15px; line-height: 22px; font-weight: 400; color: var(--mist); }
.service-index a:hover { color: var(--mist); }
.service-division .division-label { padding-top: var(--s-16); box-shadow: inset 0 1px 0 var(--fg); color: var(--fg); }
.division-band .service-division { box-shadow: none; }

/* press photograph */
.press-photograph { padding-block: var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48); }
.photo-heading { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-24); align-items: end; }
.photo-heading .internal-label { grid-column: 1 / span 6; padding-top: var(--s-16); box-shadow: inset 0 1px 0 var(--fg); color: var(--fg); }
.photo-heading h2 { grid-column: 1 / span 6; font-size: var(--display-m); }
.photo-heading p:not(.internal-label) { grid-column: 8 / span 5; font-size: var(--lead); line-height: 1.58; }
.press-photo-layout { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48); align-items: end; }
.press-portrait { grid-column: 1 / span 6; }
.press-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 55%; }
.press-photo-layout .editorial-reading { grid-column: 8 / span 5; padding-top: 0; }
.press-photo-layout .reading h2 { margin-top: var(--s-24); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
.press-photo-layout .reading h2:first-child { margin-top: 0; }
.press-assets { padding-block: var(--section); }
.index-heading > div:first-child > .internal-label { padding-top: var(--s-16); box-shadow: inset 0 1px 0 var(--fg); color: var(--fg); }

/* =============================================================== FAQ */
.faq-stack { display: flex; flex-direction: column; box-shadow: inset 0 -1px 0 var(--rule); }
.faq-stack details { box-shadow: inset 0 1px 0 var(--rule); }
.faq-stack summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: var(--s-24);
  padding: var(--s-24) 0; cursor: pointer; list-style: none;
  font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em;
}
.faq-stack summary::-webkit-details-marker { display: none; }
.faq-stack summary::after {
  content: ""; width: 16px; height: 16px; justify-self: end;
  background: linear-gradient(currentColor, currentColor) 50% 50% / 16px 2px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 2px 16px no-repeat;
  transition: transform 0.35s var(--ease);
}
.faq-stack details[open] summary::after { transform: rotate(45deg); }
.faq-stack summary:hover { opacity: 0.8; }
.faq-stack details > p { max-width: 40rem; padding: 0 0 var(--s-32); font-size: 17px; line-height: 28px; color: var(--fg); }
.faq-stack details > p a { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }

/* =============================================================== editorial sections (FAQ, publishing, press) */
.editorial-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-32); padding-block: var(--section); box-shadow: inset 0 1px 0 var(--rule); }
.editorial-heading { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--s-24); align-self: start; }
.editorial-heading h2 { font-size: var(--display-m); line-height: 1; }
.editorial-reading { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--s-24); }
.editorial-reading > p, .editorial-reading .reading > p { font-size: 17px; line-height: 28px; }
.editorial-reading .internal-actions { margin-top: var(--s-8); }

/* =============================================================== services */
.service-division { padding-block: var(--section); box-shadow: inset 0 1px 0 var(--rule); }
.division-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
h2.division-label { margin-left: 0; letter-spacing: normal; text-transform: none; text-wrap: wrap; }
.division-intro { max-width: 44rem; margin-top: var(--s-16); font-size: var(--lead); line-height: 1.58; color: var(--fg); }
.internal-service { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-32); padding-top: var(--s-48); }
.internal-service + .internal-service { margin-top: var(--s-72); padding-top: var(--s-72); box-shadow: inset 0 1px 0 var(--rule); }
.service-heading { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-16); align-items: baseline; }
.service-number { grid-column: 1 / span 1; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--sub); font-variant-numeric: tabular-nums; }
.service-heading h3 { grid-column: 2 / span 7; margin-left: -0.05em; font-size: var(--display-m); line-height: 1; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; }
.service-outcome { grid-column: 2 / span 8; font-family: var(--serif); font-style: italic; font-size: var(--accent-m); line-height: 0.95; letter-spacing: -0.01em; color: var(--fg); text-wrap: balance; }
.service-explanation { grid-column: 2 / span 5; display: flex; flex-direction: column; gap: var(--s-16); padding-top: var(--s-16); }
.service-explanation p { font-size: 16px; line-height: 26px; }
.service-explanation .service-lede { font-size: var(--lead); line-height: 1.58; font-weight: 500; }
.service-explanation a:not(.internal-link), .lead a { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.service-next { margin-top: var(--s-16); }
.service-scope { grid-column: 8 / span 5; padding-top: var(--s-16); }
.service-scope h4 { margin-bottom: var(--s-16); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--sub); }
.service-scope ul { display: flex; flex-direction: column; box-shadow: inset 0 -1px 0 var(--rule); counter-reset: scope; }
.service-scope li { counter-increment: scope; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; padding: var(--s-16) 0; box-shadow: inset 0 1px 0 var(--rule); }
.service-scope li::before { content: counter(scope, decimal-leading-zero); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--sub); font-variant-numeric: tabular-nums; }
.service-scope strong { font-size: 15px; line-height: 24px; font-weight: 600; }
.service-media { grid-column: 1 / -1; margin-top: var(--s-72); }

/* =============================================================== work (rendered from the pinned catalog) */
.work-selected { padding-block: var(--section); }
.selection-heading { display: flex; flex-direction: column; gap: var(--s-24); padding-top: var(--s-16); box-shadow: inset 0 1px 0 var(--fg); }
.selection-heading h2 { font-size: var(--display-l); }
.work-feature { margin-top: var(--s-72); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48); }
.feature-copy { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--s-16); }
.feature-copy .feature-label, .feature-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
.feature-copy h3 { font-size: var(--display-m); line-height: 1; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.feature-copy p { font-size: 16px; line-height: 26px; }
.feature-copy .feature-scope { color: var(--sub); font-size: 15px; line-height: 24px; }
.feature-copy .internal-link { margin-top: var(--s-8); }
.work-evidence img { filter: grayscale(1); transition: filter 0.6s var(--ease); }
.work-evidence:hover img { filter: none; }
.work-evidence { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: var(--s-12); }
.work-evidence img { width: 100%; box-shadow: 0 0 0 1px var(--rule); }
.work-evidence figcaption { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
.project-detail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-24); padding-top: var(--s-24); box-shadow: inset 0 1px 0 var(--rule); }
.project-detail h4 { grid-column: 1 / span 4; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
.project-detail > div { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: var(--s-16); }
.project-detail p { font-size: 16px; line-height: 26px; }
.project-qualification { color: var(--sub); }
.interface-inspection { box-shadow: inset 0 1px 0 var(--rule), inset 0 -1px 0 var(--rule); }
.interface-inspection summary { cursor: pointer; padding: var(--s-16) 0; font-size: 16px; line-height: 20px; font-weight: 600; list-style: none; }
.interface-inspection summary::-webkit-details-marker { display: none; }
.interface-inspection summary::before { content: "+"; display: inline-block; width: var(--s-24); }
.interface-inspection[open] summary::before { content: "–"; }
.interface-inspection > p { color: var(--sub); font-size: 15px; line-height: 24px; }
.interface-scroll { margin-block: var(--s-16); max-height: 70vh; overflow: auto; box-shadow: 0 0 0 1px var(--rule); }
.interface-scroll img { max-width: none; width: 1265px; }

.work-index { padding-block: var(--section); }
.index-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48); padding-top: var(--s-16); box-shadow: inset 0 1px 0 var(--fg); }
.index-intro > div:first-child { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--s-24); }
.index-intro > div:last-child { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--s-24); }
.index-intro h2 { font-size: var(--display-l); }
.index-intro p:not(.internal-label) { font-size: var(--lead); line-height: 1.58; }
.work-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.work-summary > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-8); }
.work-summary dt { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
.work-summary dd { margin: 0; font-size: var(--display-m); line-height: 1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.index-division { margin-top: var(--s-96); display: flex; flex-direction: column; gap: var(--s-24); }
.index-division h3 { font-size: var(--display-m); line-height: 1; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.index-division p:not(.internal-label) { max-width: 36rem; font-size: var(--lead); line-height: 1.58; color: var(--sub); }
.portfolio-group { margin-top: var(--s-72); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-24); }
.portfolio-group-head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--s-12); padding-top: var(--s-16); box-shadow: inset 0 1px 0 var(--fg); align-self: start; }
.portfolio-group-head h3 { font-size: var(--title); }
.portfolio-group-head p { font-size: 15px; line-height: 24px; color: var(--sub); }
.portfolio-rows { grid-column: 5 / span 8; display: flex; flex-direction: column; box-shadow: inset 0 -1px 0 var(--rule); }
.portfolio-item { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; padding: 17px 0 18px; min-height: 0; box-shadow: inset 0 1px 0 var(--rule); }
.portfolio-kind { grid-column: 1 / span 2; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
.portfolio-item h4 { grid-column: 3 / span 3; font-size: 17px; line-height: 26px; font-weight: 700; letter-spacing: -0.005em; }
.portfolio-item > p { grid-column: 6 / span 3; font-size: 16px; line-height: 1.6; color: var(--fg); }
.directory-detail { grid-column: 3 / span 6; margin-top: var(--s-16); display: flex; flex-direction: column; gap: var(--s-12); padding: var(--s-16) 0 var(--s-8); box-shadow: inset 0 1px 0 var(--rule); }
.directory-detail p { font-size: 15px; line-height: 24px; color: var(--sub); }
.directory-detail p:first-child { color: var(--fg); }
.client-boundary { grid-column: 5 / span 8; font-size: 15px; line-height: 24px; color: var(--sub); }
.portfolio-enquiry { grid-column: 5 / span 8; }

/* =============================================================== publishing index */
.publication-index { padding-block: var(--section); box-shadow: inset 0 1px 0 var(--rule); }
.index-heading { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-32); align-items: end; }
.index-heading > div { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--s-24); }
.index-heading h2 { font-size: var(--display-l); }
.index-heading > p, .index-heading > div + div { grid-column: 8 / span 5; }
.index-heading > p, .index-heading > div + div p { font-size: var(--lead); line-height: 1.58; }
.publication-ledger { margin-top: var(--s-72); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.work-case { display: flex; flex-direction: column; gap: var(--s-8); padding: var(--s-16) 0 var(--s-32); box-shadow: inset 0 1px 0 var(--rule); }
.work-case-meta { display: flex; justify-content: space-between; gap: var(--s-16); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); font-variant-numeric: tabular-nums; }
.work-case h3 { margin-top: var(--s-16); font-size: var(--title); }
.work-case p { font-size: 15px; line-height: 24px; color: var(--sub); }

/* =============================================================== private events funnel */
.hero-split--events { --focus: 50% 38%; }
.events-campaign-signals { margin-top: var(--s-72); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--mist); }
.events-access-title { margin-top: var(--s-24); font-size: var(--display-xl); line-height: 0.92; }
.events-access-title span, .events-access-title em { display: block; font-family: var(--sans); font-style: normal; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.events-access-title em::after { content: "."; }
.events-access-deck { margin-top: var(--s-12); font-family: var(--serif); font-style: italic; font-size: var(--accent-l); line-height: 0.9; letter-spacing: -0.01em; text-wrap: balance; }
/* The first screen is for planning your own event; one quiet line under it asks about the events we host, by email
   (29 September 2026: the event list closed). */
.events-list-jump { margin-top: var(--s-24); font-size: 15px; line-height: 24px; }
.events-list-jump a { font-weight: 600; }
.signal-list { margin-top: var(--s-72); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.signal-list li { padding-top: var(--s-24); box-shadow: inset 0 1px 0 var(--rule); font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em; }
.signal-list li span { display: block; margin-top: var(--s-8); font-size: 16px; line-height: 1.55; font-weight: 400; letter-spacing: 0; color: var(--sub); }
.signal-list--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-48); }
/* Round 4 (28 September 2026): the private event types on Events, each with its illustration from the TimPaemi system. */
.signal-list--illustrated { row-gap: var(--s-72); }
.signal-list--illustrated li { padding-top: 0; box-shadow: none; }
.signal-list--illustrated picture { display: block; aspect-ratio: 5 / 4; margin-bottom: var(--s-24); overflow: hidden; overflow: clip; background: #121014; }
.signal-list--illustrated img { display: block; width: 100%; height: 100%; object-fit: cover; }
.signal-list--illustrated h3 { padding-top: var(--s-24); box-shadow: inset 0 1px 0 var(--rule); }
.standard-label { margin-top: var(--s-72); }
.signal-list--standard { margin-top: var(--s-24); row-gap: var(--s-48); }
.event-types-note { max-width: 40rem; margin-top: var(--s-48); font-size: 16px; line-height: 1.55; color: var(--sub); }
.steps-wrap { margin-top: var(--s-72); }
.stage-ledger > li { display: flex; flex-direction: column; gap: var(--s-24); }
.stage-ledger > li > div { display: flex; flex-direction: column; gap: var(--s-12); }
.stage-ledger h3 { font-size: var(--title); line-height: 1.23; }
.discretion-facts { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.discretion-facts span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-16); box-shadow: inset 0 0 0 1px var(--rule); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg); }
.duo-band--events { padding-top: var(--section); }

/* =============================================================== profiles and identity */
.meta-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); box-shadow: inset 0 -1px 0 var(--rule); }
.meta-list li { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-16) 0; box-shadow: inset 0 1px 0 var(--rule); font-size: 15px; line-height: 24px; font-weight: 500; }
.meta-list strong { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
.name-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-24); padding-block: var(--s-32); box-shadow: inset 0 1px 0 var(--rule); align-items: baseline; }
.name-row:last-child { box-shadow: inset 0 1px 0 var(--rule), inset 0 -1px 0 var(--rule); }
.name-row h2, .name-row h3 { grid-column: 1 / span 4; font-size: var(--display-l); line-height: 1; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.name-row .name-role { grid-column: 5 / span 3; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
.name-row .name-copy { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--s-16); }
.name-row .name-copy p { font-size: 16px; line-height: 26px; }
.arrow-link { display: inline-flex; align-items: center; gap: var(--s-12); width: fit-content; font-size: 16px; line-height: 20px; font-weight: 600; }
.arrow-link::after { content: "→"; font-size: 20px; line-height: 1; font-weight: 400; letter-spacing: 0; transition: transform 0.35s var(--ease); }
.arrow-link:hover::after { transform: translateX(6px); }

/* the brand square as a full stop: same construction as the wordmark (one stem, 0.08em gap) */
.square-stop { display: inline-block; width: 0.174em; height: 0.174em; margin-left: 0.1em; background: var(--pink); color: transparent; overflow: hidden; text-indent: 1em; white-space: nowrap; vertical-align: baseline; }
.display-name, .hero-split__copy .display-name { font-size: clamp(5rem, 11.667vw, 10.5rem); line-height: 0.86; letter-spacing: -0.035em; }
.hero-split__copy .display-name { margin-top: var(--s-24); }
.hero-split__copy .meta-list { margin-top: var(--s-48); max-width: 34rem; }
.hero-split__copy .meta-list + .actions { margin-top: var(--s-32); }
.hero-split__copy .profile-other { margin-top: var(--s-32); }
.founder-columns { margin-top: var(--s-72); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-72); }
.founder-column { grid-column: span 6; display: flex; flex-direction: column; gap: var(--s-24); padding-top: var(--s-24); box-shadow: inset 0 1px 0 var(--rule); }
.founder-column h2 { font-size: clamp(4.5rem, 10vw, 9rem); line-height: 0.86; letter-spacing: -0.035em; }
.founder-column .lead { max-width: 30rem; }

/* =============================================================== direct channels: email and LINE */
.channel-list { display: flex; flex-direction: column; gap: var(--s-16); }
.channel-list li { display: flex; flex-direction: column; gap: var(--s-4); }
.channel-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
.channel-link { width: fit-content; font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em; padding-bottom: var(--s-4); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; }
.hero-split__copy .channel-list { margin-top: var(--s-32); }
.cta-band .channel-list { margin-top: var(--s-8); }

/* =============================================================== contact */
.enquiry-options { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.enquiry-options a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-16);
  box-shadow: inset 0 0 0 1px var(--mist); color: var(--white);
  font-size: 16px; line-height: 20px; font-weight: 600;
  transition: box-shadow 0.25s var(--ease), color 0.25s var(--ease);
}
.enquiry-options a:hover { color: var(--white); box-shadow: inset 0 0 0 1px var(--white); }
.enquiry-label { margin-top: var(--s-32); color: var(--sub); }
.enquiry-label--first { margin-top: var(--s-24); }
.hero-split__copy .enquiry-options + .actions { margin-top: var(--s-32); }
/* the default topic is not shown as chosen; a chosen event or digital topic is */
.enquiry-options a[data-contact-option="general"][aria-current="true"] { color: var(--white); background: none; box-shadow: inset 0 0 0 1px var(--mist); }
.enquiry-options a[data-contact-option="general"][aria-current="true"]::after { content: none; }
.contact-quote-note { margin-top: var(--s-32); max-width: 44rem; font-size: var(--lead); line-height: 1.58; color: var(--fg); }
.hero-split__copy .enquiry-label + .enquiry-options { margin-top: var(--s-12); }
.enquiry-options a[aria-current="true"] { gap: var(--s-12); color: var(--white); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 2px var(--white); }
.enquiry-options a[aria-current="true"]::after { content: ""; width: 8px; height: 8px; background: var(--pink); flex-shrink: 0; }
.contact-mail { width: fit-content; font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em; padding-bottom: var(--s-4); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; }
.copy-status { min-height: 24px; font-size: 15px; line-height: 24px; color: var(--mist); }
.brief-steps { display: flex; flex-direction: column; box-shadow: inset 0 -1px 0 var(--rule); }
.brief-steps li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; padding: var(--s-24) 0; box-shadow: inset 0 1px 0 var(--rule); }
.brief-steps li > span { grid-column: 1 / span 1; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--sub); font-variant-numeric: tabular-nums; }
.brief-steps li > div { grid-column: 2 / span 11; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
.brief-steps strong { grid-column: 1 / span 4; font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em; }
.brief-steps small { grid-column: 7 / span 5; font-size: var(--lead); line-height: 1.58; color: var(--fg); }
.contact-next-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48); counter-reset: next; }
.contact-next-steps li { counter-increment: next; display: flex; flex-direction: column; gap: var(--s-16); padding-top: var(--s-24); box-shadow: inset 0 1px 0 var(--rule); }
.contact-next-steps li::before { content: counter(next, decimal-leading-zero); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--sub); }
.contact-next-steps strong { font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em; }
.contact-next-steps p { font-size: 16px; line-height: 26px; }

.hero-split__copy .enquiry-options { margin-top: var(--s-32); }
.hero-split__copy .contact-mail { margin-top: var(--s-32); display: inline-block; }
.hero-split__copy address { margin-top: var(--s-32); }
.hero-split__copy address .contact-mail { margin-top: 0; }
.hero-split__copy .actions + .copy-status { margin-top: var(--s-12); }
.contact-hero h1 { max-width: 12ch; }
.contact-steps-wrap { margin-top: var(--s-72); }
.contact-foot { margin-top: var(--s-72); }
.contact-company { font-size: 15px; line-height: 24px; color: var(--sub); }
.company-partners { font-size: 17px; line-height: 27px; color: var(--fg); }
.company-partners a { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.contact-company strong { color: var(--fg); letter-spacing: 0.04em; }
.contact-company a { color: var(--fg); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.privacy-note { font-size: 15px; line-height: 24px; color: var(--sub); }
.brief-steps-wrap { margin-top: var(--s-72); display: flex; flex-direction: column; gap: var(--s-24); }
.brief-panel-note { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--sub); }
.contact-concierge .split__head h2 { max-width: 14ch; }

/* =============================================================== policies */
.policy-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48); align-items: start; }
.policy-index { grid-column: 1 / span 4; position: sticky; top: var(--s-24); display: flex; flex-direction: column; box-shadow: inset 0 -1px 0 var(--rule); }
.policy-index a { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; padding: var(--s-12) 0; box-shadow: inset 0 1px 0 var(--rule); font-size: 15px; line-height: 22px; font-weight: 500; color: var(--sub); transition: color 0.2s; }
.policy-index a:hover { color: var(--fg); }
.policy-index a span { font-size: 14px; line-height: 20px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.policy-content { grid-column: 6 / span 7; display: flex; flex-direction: column; }
.privacy-section { padding-block: var(--s-48); box-shadow: inset 0 1px 0 var(--rule); display: flex; flex-direction: column; gap: var(--s-24); }
.privacy-section:first-child { padding-top: 0; box-shadow: none; }
.privacy-section h2 { font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em; text-transform: none; }
.governance-reading { display: flex; flex-direction: column; gap: var(--s-16); max-width: 42rem; }
.governance-reading p, .governance-reading li { font-size: 16px; line-height: 27px; }
.governance-reading h3 { margin-top: var(--s-24); font-size: 17px; line-height: 26px; font-weight: 700; letter-spacing: -0.005em; }
.governance-reading ul:not(.clean-list) { display: flex; flex-direction: column; gap: var(--s-8); }
.governance-reading ul:not(.clean-list) li { position: relative; padding-left: var(--s-24); }
.governance-reading ul:not(.clean-list) li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 1px; background: var(--fg); }
.governance-reading ol { display: flex; flex-direction: column; gap: var(--s-8); counter-reset: gov; }
.governance-reading ol li { counter-increment: gov; display: grid; grid-template-columns: 40px minmax(0, 1fr); }
.governance-reading ol li::before { content: counter(gov, decimal-leading-zero); font-size: 14px; line-height: 27px; letter-spacing: 0.02em; color: var(--sub); font-variant-numeric: tabular-nums; }
.governance-reading a:not(.button) { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }

/* policy sections (How we work) keep their reviewed markup */
.content-section { padding-block: var(--section); box-shadow: inset 0 1px 0 var(--rule); background: var(--bg); color: var(--fg); }
.content-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-32); align-items: start; }
.content-kicker { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--s-16); position: sticky; top: var(--s-24); }
.content-kicker h2 { font-size: var(--display-m); line-height: 1; }
.content-grid > .reading, .content-grid > div:not(.content-kicker) { grid-column: 6 / span 7; }
@media (max-width: 64rem) { .content-kicker { grid-column: 1 / span 5; } }
.route-strip { background: var(--night); }
.route-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); padding-bottom: var(--section); counter-reset: route; }
.route-link { display: flex; flex-direction: column; gap: var(--s-8); min-height: 44px; padding: var(--s-16) 0 var(--s-24); box-shadow: inset 0 1px 0 var(--graphite), inset 0 -1px 0 var(--graphite); color: var(--white); transition: box-shadow 0.3s var(--ease); counter-increment: route; }
.route-link::before { content: counter(route, decimal-leading-zero); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--mist); font-variant-numeric: tabular-nums; }
.route-link:hover { box-shadow: inset 0 2px 0 var(--white), inset 0 -1px 0 var(--graphite); }
.route-link span:not(.route-label):not(.route-arrow) { font-size: 15px; line-height: 24px; color: var(--mist); }
.route-label { font-size: 15px; line-height: 24px; font-weight: 600; }
.route-arrow { display: none; }

/* =============================================================== press */
.asset-list { margin-top: var(--s-72); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48); }
.asset-row { display: flex; flex-direction: column; gap: var(--s-16); }
.asset-preview { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: var(--s-48); }
.asset-preview--dark { background: var(--night); box-shadow: inset 0 0 0 1px var(--graphite); }
.asset-preview--light { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.asset-preview--mark { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.asset-preview img { width: 70%; height: auto; }
.asset-preview--mark img { width: 34%; aspect-ratio: 1; }
.asset-row h3 { font-size: 17px; line-height: 26px; }
.asset-row p { font-size: 15px; line-height: 24px; color: var(--sub); }

/* =============================================================== language overviews */
.language-switcher { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.language-switcher a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-16); box-shadow: inset 0 0 0 1px var(--graphite); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--mist); transition: color 0.2s, box-shadow 0.2s; }
.language-switcher a:hover { color: var(--white); box-shadow: inset 0 0 0 1px var(--mist); }
.language-switcher a[aria-current="page"] { background: var(--white); color: var(--night); box-shadow: none; }
.language-note { font-size: 15px; line-height: 24px; color: var(--sub); }
.language-service-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48); }
.language-service-index article { display: flex; flex-direction: column; gap: var(--s-16); padding-top: var(--s-24); box-shadow: inset 0 1px 0 var(--rule); }
.language-number { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--sub); font-variant-numeric: tabular-nums; }
.language-service-index h3 { font-size: var(--title); }
.language-service-index p { font-size: 16px; line-height: 26px; }

.hero-split__copy > .language-switcher { margin-bottom: auto; }
.hero-split__copy > .language-switcher + .label { margin-top: var(--s-72); }
.hero-split__copy .language-note { margin-top: var(--s-24); }
.language-index-wrap { margin-top: var(--s-72); }
.language-actions { margin-top: var(--s-48); }
.language-reading { display: flex; flex-direction: column; gap: var(--s-16); }
.language-reading > p:not(.language-note) { font-size: 17px; line-height: 28px; }
.language-reading .internal-actions, .language-reading .actions { margin-top: var(--s-16); }
.language-reading .language-note { margin-top: var(--s-8); }
.btn .language-label, .text-link .language-label { margin-left: var(--s-8); opacity: 0.7; }

/* =============================================================== utility pages */
.utility-routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); box-shadow: inset 0 -1px 0 var(--rule); }
.utility-routes a { display: flex; flex-direction: column; gap: var(--s-12); padding: var(--s-16) 0 var(--s-32); box-shadow: inset 0 1px 0 var(--rule); transition: box-shadow 0.3s var(--ease); }
.utility-routes a:hover { box-shadow: inset 0 2px 0 var(--fg); }
.utility-number { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; color: var(--sub); }
.utility-routes strong { display: block; font-size: var(--title); line-height: 1.23; font-weight: 700; letter-spacing: -0.01em; }
.utility-routes a > span:last-child > span { display: block; margin-top: var(--s-8); font-size: 15px; line-height: 24px; color: var(--sub); }

.utility-hero .hero-text__inner { min-height: clamp(640px, 88svh, 900px); display: flex; flex-direction: column; justify-content: flex-end; }
.utility-hero .hero-text__aside p { font-size: var(--lead); line-height: 1.58; }
.utility-routes-wrap { margin-top: var(--s-96); }

/* =============================================================== footer: the brand signs off every route */
.site-footer { background: var(--night); color: var(--white); box-shadow: inset 0 1px 0 var(--graphite); }
.site-footer .page-shell { padding-block: var(--s-96) var(--s-48); }
.footer-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-16); align-items: start; }
.footer-brand { display: contents; }
.footer-brand > a:first-child { grid-column: 1 / -1; grid-row: 1; display: block; margin-bottom: var(--s-72); }
.footer-brand > a:first-child img { width: 100%; height: auto; aspect-ratio: 802.68 / 100; }
.footer-brand > p { grid-column: 1 / span 4; grid-row: 2; font-size: 15px; line-height: 24px; color: var(--mist); }
.footer-brand > .footer-contact { grid-column: 1 / span 4; grid-row: 3; align-self: start; }
.footer-contact { width: fit-content; font-size: 16px; line-height: 24px; font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.footer-channels { display: flex; flex-direction: column; gap: var(--s-12); width: fit-content; }
.footer-brand > .footer-channels { grid-column: 1 / span 4; grid-row: 3; align-self: start; }
.footer-col { grid-row: 2 / span 3; grid-column: span 2; display: flex; flex-direction: column; gap: var(--s-12); }
.footer-col:nth-of-type(1) { grid-column: 7 / span 2; }
.footer-col:nth-of-type(2) { grid-column: 9 / span 2; }
.footer-col:nth-of-type(3) { grid-column: 11 / span 2; }
.footer-col h2 { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mist); }
.footer-col ul { display: flex; flex-direction: column; gap: 0; }
.footer-col a { display: inline-block; padding-block: 11px; font-size: 16px; line-height: 22px; font-weight: 500; transition: opacity 0.2s; }
.footer-col a:hover { opacity: 0.7; }
.footer-bottom { margin-top: var(--s-96); padding-top: var(--s-24); box-shadow: inset 0 1px 0 var(--graphite); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-24); flex-wrap: wrap; }
.footer-bottom p { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--mist); }
.footer-bottom a { color: var(--white); }
.footer-bottom a:hover { opacity: 0.7; }
/* the compact utility footer has no brand block */
.footer-bottom:only-child { margin-top: 0; padding-top: 0; box-shadow: none; }
.site-footer .page-shell:has(> .footer-bottom:only-child) { padding-block: var(--s-32) var(--s-48); }

/* below 1200px the three link columns take the full width under the brand line */
@media (max-width: 75rem) {
  .footer-brand > p, .footer-brand > .footer-contact { grid-column: 1 / -1; }
  .footer-brand > .footer-contact { margin-bottom: var(--s-32); }
  .footer-col { grid-row: auto; }
  .footer-col:nth-of-type(1) { grid-column: 1 / span 4; }
  .footer-col:nth-of-type(2) { grid-column: 5 / span 4; }
  .footer-col:nth-of-type(3) { grid-column: 9 / span 4; }
}

/* =============================================================== motion */
@keyframes settle { from { transform: scale(1.04); } to { transform: scale(1); } }
.hero-split__media img, .hero-full__media img { animation: settle 2.4s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header.is-fixed { transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =============================================================== compact navigation (JS-enhanced below 66rem) */
@media (max-width: 66rem) {
  .header-inner { gap: var(--s-24); }
  .nav-enhanced .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--s-12); margin-left: auto;
    height: 48px; padding: 0; border: 0; background: transparent; color: var(--white); cursor: pointer;
    font: 600 16px/20px var(--sans);
  }
  .nav-enhanced .nav-toggle > span:not(.nav-menu-label):not(.language-menu-open):not(.language-menu-close) { display: none; }
  .nav-enhanced .nav-toggle .language-menu-close { display: none; }
  .nav-enhanced .nav-toggle[aria-expanded="true"] .language-menu-open { display: none; }
  .nav-enhanced .nav-toggle[aria-expanded="true"] .language-menu-close { display: inline; }
  .nav-enhanced .nav-toggle::after {
    content: ""; width: 24px; height: 10px;
    background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  }
  .nav-enhanced .nav-toggle[aria-expanded="true"]::after {
    width: 16px; height: 16px; margin-inline: 4px;
    background:
      linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
  }
  .nav-enhanced .site-nav[hidden] { display: none; }
  .nav-enhanced .site-nav:not([hidden]) {
    position: fixed; inset: 0; z-index: -1; margin: 0; overflow-y: auto;
    background: var(--night);
    padding: calc(var(--header) + var(--s-24)) max(var(--margin), env(safe-area-inset-right)) max(var(--s-48), env(safe-area-inset-bottom)) max(var(--margin), env(safe-area-inset-left));
    display: flex; flex-direction: column;
  }
  .nav-enhanced .site-nav ul { flex-direction: column; align-items: flex-start; gap: var(--s-8); }
  .nav-enhanced .site-nav li:last-child { margin: var(--s-32) 0 0; }
  .nav-enhanced .site-nav a:not(.nav-cta) { font-size: var(--display-l); line-height: 1.02; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; background: none; }
  .nav-enhanced .site-nav a:not(.nav-cta) .language-label { font-size: 14px; letter-spacing: 0.02em; vertical-align: super; }
  .nav-enhanced .site-nav a[aria-current="page"]:not(.nav-cta), .nav-enhanced .site-nav a.is-section { color: var(--mist); }
  body.nav-open .site-header { position: fixed; }
  body.nav-open { overflow: hidden; }
  /* without JavaScript the navigation stays in normal flow and wraps */
  html:not(.nav-enhanced) .header-inner { height: auto; flex-wrap: wrap; padding-block: var(--s-16); row-gap: var(--s-16); }
  html:not(.nav-enhanced) body .site-nav { margin-left: 0; width: 100%; }
  html:not(.nav-enhanced) .site-nav li:last-child { margin-left: 0; }
  html:not(.nav-enhanced) .site-header { position: relative; background: var(--night); }
  .site-nav ul { flex-wrap: wrap; row-gap: var(--s-12); }
}

/* =============================================================== small laptops and landscape tablets (up to 1024px) */
@media (max-width: 64rem) {
  .split__head { grid-column: 1 / span 6; }
  .split__body { grid-column: 7 / span 6; }
  .hero-text__grid > .hero-text__title { grid-column: 1 / span 7; }
  .hero-text__grid > .hero-text__aside { grid-column: 8 / span 5; }
  .jump { --jump-cols: 2; }
  .jump--five { --jump-cols: 3; }
  .feature-copy { grid-column: 1 / span 5; }
  .work-evidence { grid-column: 6 / span 7; }
  .portfolio-group-head { grid-column: 1 / -1; }
  .portfolio-rows, .client-boundary, .portfolio-enquiry { grid-column: 1 / -1; }
  .language-service-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================== portrait tablets (up to 896px): one column, measure kept */
@media (max-width: 56rem) {
  .hero-split { flex-direction: column; min-height: 0; }
  .hero-split__media { position: relative; left: auto; top: auto; bottom: auto; right: auto; width: 100%; aspect-ratio: 4 / 5; max-height: 72svh; }
  .hero-split__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(180deg, rgba(11, 11, 12, 0), var(--night)); pointer-events: none; }
  .hero-split__body { padding-top: 0; margin-top: calc(-1 * var(--s-72)); z-index: 1; }
  .hero-split__copy { grid-column: 1 / -1; max-width: 40rem; }
  .hero-split__copy > .breadcrumbs { margin-bottom: 0; }
  .hero-split__copy .label { margin-top: var(--s-32); }
  .contact-hero.hero-split--table { --focus: 50% 10%; }
  .contact-hero .hero-split__media { aspect-ratio: 16 / 10; max-height: 46svh; }
  .hero-split--principals { --focus: 50% 24%; }
  .hero-split--principals .hero-split__media { aspect-ratio: 4 / 3; max-height: 50svh; }
  .hero-caption { display: none; }
  .hero-text__grid > .hero-text__title, .hero-text__grid > .hero-text__aside { grid-column: 1 / -1; }
  .hero-text__aside { max-width: 40rem; }
  .split__head, .split__body, .split--wide .split__head, .split--wide .split__body,
  .split--narrow-head .split__head, .split--narrow-head .split__body { grid-column: 1 / -1; }
  .split__body { max-width: 40rem; }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-32); }
  .editorial-heading, .editorial-reading { grid-column: 1 / -1; }
  .editorial-reading { max-width: 40rem; }
  .service-heading h3, .service-outcome, .service-explanation, .service-scope { grid-column: 1 / -1; }
  .service-number { grid-column: 1 / -1; }
  .service-explanation { max-width: 40rem; }
  .feature-copy, .work-evidence, .project-detail h4, .project-detail > div { grid-column: 1 / -1; }
  .index-intro > div:first-child, .index-intro > div:last-child { grid-column: 1 / -1; }
  .index-heading > div, .index-heading > p, .index-heading > div + div { grid-column: 1 / -1; }
  .publication-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-item { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .portfolio-kind { grid-column: 1 / -1; }
  .portfolio-item h4 { grid-column: 1 / span 4; }
  .portfolio-item > p { grid-column: 5 / span 4; }
  .directory-detail { grid-column: 1 / -1; }
  .name-row h2, .name-row h3, .name-row .name-role, .name-row .name-copy { grid-column: 1 / -1; }
  .contact-next-steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-32); }
  .signal-list { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-16); }
  .signal-list--illustrated { row-gap: var(--s-48); }
  .founder-column { grid-column: 1 / -1; }
  .brief-steps strong { grid-column: 1 / -1; }
  .brief-steps small { grid-column: 1 / -1; margin-top: var(--s-8); }
  .policy-index { position: static; grid-column: 1 / -1; }
  .policy-content { grid-column: 1 / -1; }
  .content-kicker { position: static; grid-column: 1 / -1; }
  .content-grid > .reading, .content-grid > div:not(.content-kicker) { grid-column: 1 / -1; }
  .route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-grid { row-gap: 0; }
  .service-index { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-32); }
  .photo-heading h2, .photo-heading p:not(.internal-label), .press-portrait, .press-photo-layout .editorial-reading { grid-column: 1 / -1; }
  .photo-heading .internal-label { grid-column: 1 / -1; }
  .editorial-reading { padding-top: 0; }
  .asset-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .utility-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================== tablets and phones (up to 768px) */
@media (max-width: 48rem) {
  .ruled > li, .service-scope li { grid-template-columns: 40px minmax(0, 1fr); }
  .jump, .jump--five { --jump-cols: 2; }
  .meta-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fact-table th { width: 40%; }
}

/* =============================================================== phones (up to 640px) */
@media (max-width: 40rem) {
  /* the 390px sizes are the reference; narrower screens scale in proportion so long words stay inside the margins */
  :root {
    --header: 64px;
    --section: 56px;
    --display-xl: min(2.75rem, calc((100vw - 48px) * 0.1287));
    --display-l: min(2.75rem, calc((100vw - 48px) * 0.1287));
    --display-m: min(2.25rem, calc((100vw - 48px) * 0.1053));
    --accent-xl: min(3rem, calc((100vw - 48px) * 0.1404));
    --accent-l: min(3rem, calc((100vw - 48px) * 0.1404));
    --accent-m: min(2.5rem, calc((100vw - 48px) * 0.117));
  }
  .btn, .button, .internal-button { white-space: normal; text-align: center; }
  .enquiry-options { display: grid; grid-template-columns: minmax(0, 1fr); }
  .nav-enhanced .site-nav a:not(.nav-cta) { white-space: nowrap; }
  .nav-enhanced .page-lang-de .site-nav a:not(.nav-cta) { font-size: min(2.25rem, calc((100vw - 48px) * 0.105)); }
  .enquiry-options a { justify-content: flex-start; }
  .brand-link img { width: 112px; }
  .hero-split__media { aspect-ratio: 3 / 4; }
  .hero-split--events .hero-split__media { aspect-ratio: 1 / 1; }
  /* Contact is a task page: a short photograph keeps both channels on the first screen */
  .contact-hero .hero-split__media { aspect-ratio: 16 / 10; }
  /* both faces sit below the header on phones */
  .contact-hero.hero-split--table { --focus: 50% 0%; }
  .events-campaign-signals { margin-top: var(--s-24); }
  .actions .btn, .actions .button, .button-row .button, .internal-actions .btn { width: 100%; }
  .jump-label { display: none; }
  .actions, .button-row, .internal-actions { gap: var(--s-16); }
  .hero-text__grid { margin-top: var(--s-48); }
  .hero-text .jump { margin-top: var(--s-72); }
  .jump, .jump--five { --jump-cols: 1; }
  /* one short row per topic, so the first answers reach the first screens */
  .jump a { flex-direction: row; align-items: baseline; gap: var(--s-16); padding: var(--s-12) 0; font-size: 16px; }
  .jump a > span:first-child { min-width: 1.75rem; }
  .photo-band img { aspect-ratio: 4 / 5; }
  .photo-band figcaption .label + .label { display: none; }
  .publication-ledger { grid-template-columns: minmax(0, 1fr); }
  .portfolio-item h4, .portfolio-item > p { grid-column: 1 / -1; }
  .fact-table th, .fact-table td { display: block; width: 100%; padding: 0; }
  .fact-table th { padding-top: var(--s-16); }
  .fact-table td { padding: var(--s-4) 0 var(--s-16); }
  .asset-list, .utility-routes, .route-grid { grid-template-columns: minmax(0, 1fr); }
  .route-link { flex-direction: row; align-items: baseline; gap: var(--s-16); padding: var(--s-12) 0; }
  .route-label { font-size: 16px; }
  .duo > .figure { grid-column: 1 / -1; }
  .language-service-index { grid-template-columns: minmax(0, 1fr); }
  .faq-stack summary { font-size: 20px; line-height: 26px; }
  .footer-col:nth-of-type(1) { grid-column: 1 / span 6; }
  .footer-col:nth-of-type(2) { grid-column: 7 / span 6; }
  .footer-col:nth-of-type(3) { grid-column: 1 / -1; margin-top: var(--s-32); }
  .footer-bottom { flex-direction: column; margin-top: var(--s-72); }
  .brief-steps li > span { grid-column: 1 / span 2; }
  .brief-steps li > div { grid-column: 3 / span 10; }
}

/* Round 2, after the first stranger test: on large screens labels, captions and index text step up to 15px. */
@media (min-width: 64rem) {
  .label, .eyebrow, .internal-label, .campaign-label { font-size: 15px; line-height: 22px; }
  .work-evidence figcaption { font-size: 15px; }
}

/* Round 2c (26 September 2026). Owner, 12:58 PDT: "I can promise 24 hour reply time." The promise sits under each set of
   contact channels and in every footer. */
.reply-promise { display: flex; align-items: center; gap: var(--s-12); width: fit-content; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--fg); }
.reply-promise::before { content: ""; width: 8px; height: 8px; background: var(--pink); flex-shrink: 0; }
.hero-split__copy address + .reply-promise { margin-top: var(--s-24); }
.language-reading .internal-actions + .reply-promise { margin-top: var(--s-8); }
.footer-reply { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--mist); text-wrap: balance; }
/* Email first (owner, 28 September 2026, 08:51 ICT: "EMAIL should be the focus not line."). Email is the one contact route
   with buttons; LINE stays one quiet line of text beside it and in the footer. */
.channel-alt { font-size: 16px; line-height: 25px; color: var(--sub); }
.channel-alt a { color: var(--fg); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; }
.hero-split__copy .copy-status + .channel-alt { margin-top: var(--s-16); }

/* Round 2e (26 September 2026). Owner, 16:30: "it's all individual based on the customer". Private Events offers planning first. */
.events-plan-first { margin-top: var(--s-24); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-16); max-width: 32rem; }
.events-plan-first p { font-size: 17px; line-height: 26px; color: var(--white); }
@media (max-width: 40rem) {
  .events-plan-first .btn { width: 100%; }
}

/* =============================================================== illustrations in sections (29 September 2026)
   Owner, 29 Sep, 04:20 ICT: "Lets go more elaborate on the illustrations, put them in whereever it fits ... MAKE IT MORE ON
   POINT RELATED TO THE TOPIC." Each picture is drawn for its section in the one TimPaemi hand: 5:4, lazy, explicit size.
   Its alternative text starts with "Illustration:"; no label sits on the picture (owner, 29 Sep 2026, 12:38 ICT: "You
   shouldnt call every image illustrations its iunprofessional"). */
.scene-figure { position: relative; margin: 0; }
.scene-figure picture { display: block; aspect-ratio: 5 / 4; overflow: hidden; overflow: clip; background: #121014; }
.scene-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.signal-list--illustrated li { position: relative; }
.split__head .scene-figure { margin-top: var(--s-24); }
.split--figure { align-items: start; }
.statement-block--figure { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-48); align-items: end; }
.statement-block--figure h2 { grid-column: 1 / span 6; }
.statement-block--figure .scene-figure { grid-column: 8 / span 5; }
.division-figure { max-width: 44rem; margin-top: var(--s-32); }
@media (max-width: 56rem) {
  .statement-block--figure h2, .statement-block--figure .scene-figure { grid-column: 1 / -1; }
  .statement-block--figure .scene-figure { max-width: 40rem; }
}
/* What we publish (29 Sep 2026, after the live stranger test of the second illustration round): the picture stands beside the
   heading and its paragraph, instead of leaving the paragraph alone at the foot of an empty column. */
.index-heading--figure { align-items: start; }
.index-heading--figure > div { grid-row: 1; }
.index-heading--figure > p { grid-column: 1 / span 6; grid-row: 2; }
.index-heading--figure > .scene-figure { grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: end; }
@media (max-width: 56rem) {
  .index-heading--figure > div, .index-heading--figure > p, .index-heading--figure > .scene-figure { grid-column: 1 / -1; grid-row: auto; }
}
/* 29 September 2026: what a night can include (food, drinks, music, transfers), four illustrations under the facts of
   every event on Events: four across on a wide screen, two on a phone. */
.signal-list--details { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-24); row-gap: var(--s-32); }
.signal-list--details picture { margin-bottom: var(--s-16); }
.signal-list--details h3 { padding-top: var(--s-16); }
@media (max-width: 56rem) {
  .signal-list--details { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-32); }
}