:root {
  --paper: #fbfcfd;
  /* Same value as --paper, as an rgb triplet for the translucent surfaces. */
  --paper-rgb: 251, 252, 253;
  --paper-band: #f1f3f7;
  /* Opaque sheet for sections that need the starfield held back. */
  --sheet: #ffffff;
  --ink: #0a0a0a;
  --ink-body: #474b52;
  --ink-mid: #23262b;
  --ink-faint: #838a94;
  --ink-nav: #636a74;
  /* Deep space blue. Both carry small text or sit under it, so both clear WCAG
     AAA on the paper: 12.5:1 and 7.6:1. */
  --brand: #122a63;
  --brand-link: #1f4b99;
  --rule: #e4e7ec;
  --rule-strong: #d6dae1;
  --numeral: #a8aeb8;
  --numeral-mono: #bcc2cb;

  /* Neutrals that used to sit hard-coded further down the file. */
  --hover-tint: #eaedf2;
  --ring: #c5cbd4;
  --border-soft: #ccd2da;
  --footer-text: #c8ccd3;
  --footer-faint: #767d88;

  --font-sans: 'Space Grotesk', 'Noto Sans Thai', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Tracking for uppercase labels. Latin gets wide tracking; both are switched
     to `normal` at runtime for Thai, where letter-spacing breaks its clusters. */
  --ls: 0.2em;
  --ls-nav: 0.1em;
}

html, body { margin: 0; padding: 0; background: var(--paper); }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--brand-link); }
::selection { background: var(--brand); color: var(--paper); }

*, *::before, *::after { box-sizing: border-box; }

@keyframes om-comet {
  0%   { transform: translate(-120%, -120%) rotate(35deg); opacity: 0; }
  12%  { opacity: 1; }
  45%  { opacity: 1; }
  60%  { transform: translate(240%, 240%) rotate(35deg); opacity: 0; }
  100% { transform: translate(240%, 240%) rotate(35deg); opacity: 0; }
}

.app {
  position: relative;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

/* Starfield behind the whole document. */
.field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(var(--paper-rgb), 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 32px;
  min-height: 74px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 32px;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 59px; width: auto; display: block; }

.header-group { display: flex; align-items: center; }

.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* Hamburger. Two hairlines that cross into an X — desktop hides it. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle-bars { position: relative; display: block; width: 22px; height: 12px; }
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: top 0.22s ease, transform 0.22s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 10.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { top: 5px; transform: rotate(-45deg); }

.nav-link {
  position: relative;
  padding: 9px 14px 12px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-nav);
  border-radius: 999px;
  color: var(--ink-nav);
}
.nav-link:hover { background: var(--hover-tint); color: var(--ink); }

/* Colour alone was near-invisible against the inactive grey, so the current
   section also carries a rule. In ink rather than the accent: the rule is the
   signal, and the accent was making it read as a link. Weight stays uniform
   across items — bolding the active one reflows its neighbours on every
   navigation. */
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

.lang {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 14px;
  padding: 4px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 15px;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-mid);
  background: transparent;
  opacity: 0.45;
}
.lang-btn:hover { opacity: 1; }
.lang-btn.is-active { opacity: 1; box-shadow: 0 0 0 1px var(--ring); }

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

.btn {
  display: inline-block;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 999px;
}

.btn--dark {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.btn--dark:hover { background: var(--brand); color: var(--paper); }

/* The comet streak that crosses each dark button. */
.btn--dark::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 70px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(120,180,255,0), rgba(150,200,255,0.95), rgba(120,180,255,0));
  box-shadow: 0 0 8px rgba(120, 180, 255, 0.85);
  animation: om-comet 4.5s ease-in-out infinite;
  pointer-events: none;
}

.btn--ghost { border: 1px solid var(--border-soft); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.header-cta {
  margin-left: 12px;
  padding: 11px 20px;
}
.header-cta::before { width: 60px; animation-delay: 1.2s; }

/* ----------------------------------------------------------------- reveal */

/* Scoped under .reveal-on, a class only JS adds. Nothing here can hide content
   on its own, so a failed or blocked script leaves the page readable rather
   than blank. prefers-reduced-motion skips the class entirely. */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(16px);
}
.reveal-on .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--r, 0) * 70ms);
}

/* ------------------------------------------------------------------- shell */

.main { position: relative; z-index: 1; }

.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 110px 32px;
}

.band {
  border-top: 1px solid var(--rule);
  background: var(--paper-band);
}
.band-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 32px;
}

.rule-top { border-top: 1px solid var(--rule); }

.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 28px;
}

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

.hero { padding: 120px 32px 96px; }
.hero .kicker { letter-spacing: 0.23em; }

.hero h1 {
  margin: 0 0 30px;
  font-size: clamp(38px, 6vw, 76px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.14;
  max-width: 20ch;
  text-wrap: balance;
}

.hero-body {
  margin: 0 0 40px;
  font-size: 19px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-body);
  max-width: 62ch;
  text-wrap: pretty;
}

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------- stats */

.stats-band {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(var(--paper-rgb), 0.7);
}
.stats {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 44px 0 44px 28px;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stat-value {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------- idea + pillars */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: 80px;
  align-items: start;
}

.split h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.35;
  text-wrap: balance;
}

.stack { display: flex; flex-direction: column; }

.pillar {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 34px 0;
  border-top: 1px solid var(--rule);
}
.pillar-num {
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--numeral);
}
.pillar-text { display: flex; flex-direction: column; gap: 12px; }
.pillar-text h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.pillar-text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-body);
  max-width: 56ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------- platforms */

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 48px;
}
.section-head h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 300;
  letter-spacing: -0.025em;
}
.all-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--brand-link);
  white-space: nowrap;
}

.plat-list { display: flex; flex-direction: column; }
.plat-list--home { border-top: 1px solid var(--rule-strong); }

.plat-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 32px;
  align-items: baseline;
  padding: 30px 8px;
  border-bottom: 1px solid var(--rule-strong);
}

.plat-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.6fr) 150px;
  gap: 32px;
  align-items: start;
  padding: 40px 0;
  border-top: 1px solid var(--rule);
}

/* The starfield is fixed behind the whole document and reads through every
   transparent surface. Over a dense list of line drawings it crosses the
   artwork and the text, so this section gets an opaque sheet of its own. */
.sheet-band {
  position: relative;
  z-index: 1;
  background: var(--sheet);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
/* The band's own rule is the top edge; a second one right under it would read
   as a doubled border. */
.sheet-band .plat-item:first-child { border-top: 0; }

/* Two bordered sections meeting would otherwise stack two hairlines. */
.stats-band + .sheet-band { border-top: 0; }
.sheet-band + .band { border-top: 0; }

/* --------------------------------------------------------------- plat art */

.plat-art-cell { align-self: center; }

.plat-art { display: block; width: 100%; height: auto; color: var(--ink); }
.plat-art line,
.plat-art path,
.plat-art circle,
.plat-art rect { stroke: currentColor; fill: none; stroke-width: 1.25; }

/* Structure that should sit behind everything else. */
.art-faint { opacity: 0.2; }

/* A container shape covers far more area than a dot or a hairline, so it needs
   a lower opacity to carry the same visual weight as the rest of the set. */
.plat-art rect { opacity: 0.55; }

/* A person or a record. */
.plat-art .art-dot { fill: currentColor; stroke: none; opacity: 0.3; }
.art-dot.art-pulse {
  animation: art-pulse 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.28s);
}
@keyframes art-pulse {
  0%, 100% { opacity: 0.26; }
  50% { opacity: 0.68; }
}

/* Draws on, holds, then travels off — something being made and carried
   forward, rather than a shape that merely blinks. */
.art-draw {
  opacity: 0.4;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: art-draw 4.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.45s);
}
@keyframes art-draw {
  0% { stroke-dashoffset: 130; }
  35%, 60% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -130; }
}

/* A short dash running the length of a path: something in transit. Relies on
   pathLength="100" on the element, so one cycle is one full traverse. */
.art-travel {
  opacity: 0.7;
  stroke-dasharray: 6 94;
  stroke-dashoffset: 100;
  animation: art-travel 3.4s linear infinite;
  animation-delay: calc(var(--i, 0) * 0.55s);
}
@keyframes art-travel { to { stroke-dashoffset: 0; } }

/* Grows from its start point, holds, retreats. Also needs pathLength="100". */
.art-reveal {
  opacity: 0.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: art-reveal 4.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.24s);
}
@keyframes art-reveal {
  0%, 100% { stroke-dashoffset: 100; }
  40%, 80% { stroke-dashoffset: 0; }
}

/* Rings fading outward in sequence — reach spreading. */
.art-wave {
  opacity: 0;
  animation: art-wave 3.2s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.42s);
}
@keyframes art-wave {
  0% { opacity: 0; }
  30% { opacity: 0.45; }
  100% { opacity: 0; }
}

/* A boundary whose dashes crawl. Done with dashoffset rather than a rotation
   so it needs no transform-box, which SVG support is patchier on. */
.art-ring {
  opacity: 0.3;
  stroke-dasharray: 3 7;
  animation: art-ring 9s linear infinite;
}
@keyframes art-ring { to { stroke-dashoffset: -100; } }

/* Scoped to out-specify `.plat-art path`, which sets stroke to currentColor. */
.plat-art .art-brand { stroke: var(--brand-link); }
.plat-art .art-dot.art-brand { fill: var(--brand-link); stroke: none; opacity: 0.9; }
.plat-art .art-draw.art-brand { opacity: 0.8; }
.plat-art .art-travel.art-brand { opacity: 0.95; }

/* Every animation here is decorative; with motion off each one is pinned to a
   frame where the drawing still reads in full. */
@media (prefers-reduced-motion: reduce) {
  .plat-art * { animation: none !important; }
  .art-draw,
  .art-reveal { stroke-dashoffset: 0; }
  .art-travel { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.5; }
  .art-wave { opacity: 0.3; }
  .plat-art .art-dot { opacity: 0.45; }
}

.plat-n {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--numeral-mono);
}
.plat-id { display: flex; flex-direction: column; gap: 8px; }
.plat-item .plat-id { gap: 10px; }
.plat-name { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; }
.plat-item .plat-name { font-size: 25px; }
/* Muted, not the accent. This is a label, not a link — it was the only
   non-interactive text on the site wearing the link colour, which both made it
   shout over the group name above it and implied it could be clicked. Now it
   matches every other uppercase mono label in the design. */
.plat-sector {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.plat-row p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--ink-body);
  text-wrap: pretty;
}
.plat-item p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.9;
  font-weight: 300;
  color: var(--ink-body);
  text-wrap: pretty;
}

/* -------------------------------------------------------------- principles */

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.principle {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 2px solid var(--ink);
  padding-top: 22px;
}
.principle .icon { margin-bottom: -2px; }
.principle h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.principle p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-body);
  text-wrap: pretty;
}

/* -------------------------------------------------------- inner page heads */

.page-head { padding: 110px 32px 80px; }
.page-head h1 {
  margin: 0 0 30px;
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.2;
  max-width: 20ch;
  text-wrap: balance;
}
.page-head p {
  margin: 0;
  font-size: 18px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-body);
  max-width: 62ch;
  text-wrap: pretty;
}
.page-head--about h1 { margin-bottom: 32px; }
.page-head--about p { font-size: 19px; max-width: 66ch; }
.page-head--team h1 { max-width: 22ch; }
.page-head--team p { max-width: 64ch; }

/* --------------------------------------------------------------- two-up */

.two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
}
.two-col--wide { gap: 72px; }
.two-col > div { display: flex; flex-direction: column; gap: 14px; }
.two-col--wide > div { gap: 16px; }
.two-col h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.two-col p {
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  font-weight: 300;
  color: var(--ink-body);
  text-wrap: pretty;
}

/* ------------------------------------------------------------- about extra */

.split--questions {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 72px;
}
.split--questions h2,
.split--narrow h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.4;
}
.split--narrow { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 64px; }
.split--narrow p {
  margin: 0;
  font-size: 17px;
  line-height: 1.9;
  font-weight: 300;
  color: var(--ink-body);
  text-wrap: pretty;
}

.question {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.question-num {
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--numeral);
}
.question-text {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-mid);
  max-width: 56ch;
  text-wrap: pretty;
}

.closing {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 32px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: flex-start;
}
.closing h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.35;
  max-width: 24ch;
  text-wrap: balance;
}
.closing p {
  margin: 0;
  font-size: 18px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-body);
  max-width: 58ch;
  text-wrap: pretty;
}
.closing--join { gap: 24px; }
.closing--join h2 { max-width: 26ch; }
.closing--join p { max-width: 60ch; }

/* --------------------------------------------------------------- expertise */

.grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
/* Lucide, redrawn at 1.5 rather than its default 2 — the shipped weight reads
   heavy beside the hairline rules this design uses everywhere else.

   All of them sit in the muted grey rather than the accent: the icons label
   their card, they are not the point of it, and in the accent they pulled
   ahead of the headings they sit above. Clears 3:1 against every surface they
   land on, which is the bar for non-text content. */
.icon {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-faint);
}

.card {
  background: var(--paper);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 190px;
}
.card .icon { margin-bottom: 2px; }
.card:hover { background: #ffffff; }
.card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-body);
  text-wrap: pretty;
}

.section-title {
  margin: 0 0 44px;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 300;
  letter-spacing: -0.025em;
}

/* --------------------------------------------------------------- back link */

.back-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 32px 0;
}

.back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--brand-link);
  /* An 11px label is a 15px tap target. Padded out to a usable size, with the
     margin cancelling it so the text sits where it looks like it should. */
  padding: 14px 4px;
  margin: -14px -4px;
}
.back-link:hover { color: var(--ink); }

/* The page below already carries a large top padding; without this the two
   stack into an unreasonable gap before the heading. */
.back-bar:not([hidden]) ~ #page > .section:first-child { padding-top: 48px; }

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

.legal h1 { margin-bottom: 22px; }
.legal-intro {
  margin: 0;
  font-size: 18px;
  line-height: 1.85;
  font-weight: 300;
  color: var(--ink-body);
  max-width: 66ch;
  text-wrap: pretty;
}

.legal-section {
  margin-top: 46px;
  max-width: 68ch;
  border-top: 1px solid var(--rule);
  padding-top: 26px;
}
.legal-section h2 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.legal-section p,
.legal-section li {
  font-size: 16px;
  line-height: 1.9;
  font-weight: 300;
  color: var(--ink-body);
  text-wrap: pretty;
}
.legal-section p { margin: 0 0 14px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { margin: 0; padding-left: 18px; }
.legal-section li { margin-bottom: 8px; }
.legal-section li::marker { color: var(--numeral); }
.legal-section a { text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------- contact */

.contact-head h1 { margin-bottom: 60px; max-width: 18ch; }

.contacts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
.contact-card {
  background: var(--paper);
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 180px;
}
.contact-card .icon { margin-bottom: 2px; }
.contact-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-value { font-size: 19px; font-weight: 400; letter-spacing: -0.02em; }
.contact-note {
  font-size: 15px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--ink-body);
}

.company-block {
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.company-name {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-mid);
}

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

.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule);
  background: var(--ink);
  color: var(--footer-text);
  overflow: hidden;
}
.footer-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.footer-grid {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 32px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
}
.footer-brand { display: flex; flex-direction: column; gap: 18px; }
.footer-wordmark {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.footer-blurb {
  font-size: 15px;
  line-height: 1.85;
  font-weight: 300;
  max-width: 34ch;
}
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--footer-faint);
}
.footer-col a { font-size: 15px; font-weight: 300; color: var(--footer-text); }
.footer-col a:hover { color: #ffffff; }

.footer-bar a { color: inherit; }
.footer-bar a:hover { color: #ffffff; }

.footer-bar {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 40px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--footer-faint);
}

/* -------------------------------------------------------------- responsive */
/* The source design targets a 1440px artboard only; everything below is the
   fallback behaviour it does not define. */

@media (max-width: 1040px) {
  .split,
  .split--questions,
  .split--narrow { grid-template-columns: 1fr; gap: 40px; }
  .principles { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* The inline header needs ~1004px to stay on one row once the nav is
   uppercase, so it switches to the hamburger here rather than at the content
   breakpoint below. */
@media (max-width: 1060px) {
  /* Five nav items wrapped the sticky header to 196px tall. Below this width
     the same controls move into a full-height panel behind the hamburger. */
  /* backdrop-filter makes the header a containing block for fixed descendants,
     which would anchor the panel to the header instead of the viewport. */
  .site-header {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .header-inner { padding: 8px 20px; min-height: 0; flex-wrap: nowrap; }
  .brand img { height: 40px; }
  .nav-toggle { display: flex; margin-right: -10px; }
  /* The panel is a sibling inside the header, so it would paint over both. */
  .brand, .nav-toggle { position: relative; z-index: 16; }

  .header-group {
    position: fixed;
    inset: 0;
    z-index: 15;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 88px 20px 40px;
    background: var(--paper);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .header-group.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
  }

  .header-group .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .header-group .nav-link {
    padding: 18px 2px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: var(--ls-nav);
    border-radius: 0;
    border-bottom: 1px solid var(--rule);
  }
  .header-group .nav-link:hover { background: transparent; }
  /* The panel rows already carry a bottom rule; a second one under the active
     label just reads as a doubled border, so weight of colour carries it here.
     Ink against the inactive grey, matching the desktop rule. */
  .header-group .nav-link.is-active { color: var(--ink); }
  .header-group .nav-link.is-active::after { display: none; }

  .header-group .lang { margin: 28px 0 0; align-self: flex-start; }
  .header-group .header-cta {
    margin: 16px 0 0;
    padding: 15px 26px;
    font-size: 16px;
    text-align: center;
  }
}

@media (max-width: 860px) {
  .section, .band-inner, .closing { padding-top: 72px; padding-bottom: 72px; }
  .hero { padding: 72px 32px 56px; }
  .page-head { padding: 72px 32px 48px; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 32px 0 32px 20px; }

  .plat-row,
  .plat-item {
    grid-template-columns: 56px 1fr;
    gap: 12px 20px;
    align-items: start;
  }
  .plat-row p,
  .plat-item p { grid-column: 2; }
  .plat-art-cell { grid-column: 2; max-width: 150px; }
  .plat-n { font-size: 34px; }

  .two-col, .two-col--wide { grid-template-columns: 1fr; gap: 40px; }
  .contacts { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .section, .band-inner, .closing,
  .hero, .page-head { padding-left: 20px; padding-right: 20px; }
  .stats { padding: 0 20px; }
  .principles { grid-template-columns: 1fr; gap: 32px; }
  .grid-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; padding: 56px 20px 32px; }
  .footer-bar { padding: 0 20px 32px; flex-direction: column; gap: 10px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pillar { grid-template-columns: 48px 1fr; gap: 16px; }
  .question { grid-template-columns: 44px 1fr; gap: 16px; }
  .cta-row .btn { width: 100%; text-align: center; }
}