/* ============================================================
   MVP Draft D — "Brand system"
   A's typographic backbone + B's willingness to commit to a field
   + the graphic language from 02 §10 that A/B/C all skipped.

   Three things none of the first three drafts used, all required by
   02-website-design-brief.md §7 and §10:
     1. Geometry derived from the mark (quarter-round + counterform dot)
     2. The bright secondary palette, assigned per program
     3. Strong colour blocking instead of hairline rules

   Tokens come from the local tokens.css snapshot. No token VALUE is
   redefined here — only new local properties and composition.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

:root {
  /* Program identity. 02 §9 sanctions the secondary palette for exactly
     this: distinguishing programs. Assigned 10 August 2026. */
  --debate: var(--green);
  --debate-soft: var(--green-soft);
  --debate-ink: var(--green-strong);
  --mun: var(--blue);
  --mun-soft: var(--blue-soft);
  --mun-ink: var(--blue-strong);
  --psk: var(--pink);
  --psk-soft: var(--pink-soft);
  --psk-ink: var(--pink-strong);

  /* Geometric arcs, bounded.
     docs/graphics.md: "Use geometric arcs and cropped circles only as quiet
     structural devices. They must never compete with the message or imitate
     the protected logo." A 100% corner sweeps a giant ellipse across a wide
     block — loud, and on a portrait it eats the subject. These are arcs with
     a ceiling instead. */
  --arc: clamp(48px, 9vw, 132px);
  --arc-sm: clamp(28px, 16%, 72px);
  /* The tile from the brand book's "Three Uniques" grid: a rectangle with one
     diagonal pair of corners cut to a large quarter, alternating direction
     across the row. This is the brand's own card shape. */
  --tile: clamp(40px, 6vw, 84px);
  --marketing-radius: 28px;

}

body {
  margin: 0;
  background: var(--paper);          /* cream is the default reading surface, 02 §7 */
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  overflow-x: hidden;
}

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
  background: var(--ink); color: var(--paper); border-radius: var(--button-radius);
}
.skip:focus {
  width: auto; height: auto; padding: var(--space-2) var(--space-3); margin: 0;
  overflow: visible; clip: auto; clip-path: none; white-space: normal;
  left: var(--space-3); top: var(--space-3); z-index: var(--z-modal);
}

.wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--page-gutter); }

/* ---- Header ------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  transition: background-color var(--motion-surface) var(--ease-standard), box-shadow var(--motion-surface) var(--ease-standard);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 72px; }
.brand { display: inline-flex; align-items: center; color: var(--ink); }
.brand svg { display: block; height: 24px; width: auto; transition: transform var(--motion-surface) var(--ease-standard); }
.brand svg path { fill: currentColor; }
.brand:hover svg { transform: translateY(-2px); }

.nav-desktop { display: none; align-items: center; gap: var(--space-4); }
@media (min-width: 851px) { .nav-desktop { display: flex; } }
.nav-desktop a { color: var(--ink); text-decoration: none; font-size: 15px; position: relative; }
.nav-desktop a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.icon-btn {
  height: var(--control-height); min-width: var(--control-height);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: inherit;
  border: var(--border-width) solid currentColor;
  border-radius: var(--button-radius);
  cursor: pointer; font: inherit; font-size: 14px; padding-inline: var(--space-3);
  transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.icon-btn:hover { background: var(--ink); color: var(--paper); }
.icon-btn:active { transform: translateY(1px); }
.menu-btn { display: inline-flex; }
@media (min-width: 851px) { .menu-btn { display: none; } }

.menu-panel {
  background: var(--paper); overflow: hidden; transform-origin: top;
  animation: menu-enter var(--motion-surface) var(--ease-enter) both;
}
.menu-panel[hidden] { display: none; }
.menu-panel ul { list-style: none; margin: 0; padding: 0 0 var(--space-4); }
.menu-panel li + li { border-top: var(--border-width) solid var(--line); }
.menu-panel li { opacity: 0; animation: menu-item-enter 360ms var(--ease-enter) forwards; }
.menu-panel li:nth-child(1) { animation-delay: 70ms; }
.menu-panel li:nth-child(2) { animation-delay: 120ms; }
.menu-panel li:nth-child(3) { animation-delay: 170ms; }
.menu-panel li:nth-child(4) { animation-delay: 220ms; }
.menu-panel a, .menu-panel button {
  display: flex; align-items: center; min-height: var(--touch-target);
  width: 100%; color: var(--ink); text-decoration: none; font-size: 18px;
  background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit;
}
.menu-panel a { transition: padding-left var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.menu-panel a:hover { padding-left: var(--space-2); }
@keyframes menu-enter {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-6px); }
  to { opacity: 1; clip-path: inset(0); transform: none; }
}
@keyframes menu-item-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ---- Buttons ----------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-height-lg); padding: 0 var(--space-4);
  border-radius: var(--button-radius);
  font-size: 15px; font-weight: 500; text-decoration: none;
  border: var(--border-width) solid transparent;
  transition: transform var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
/* "Purple is the signature colour and should lead actions, selected states,
   and key programme signals" — internal.nuancelab.co/design-guide/.
   The primary action was ink; that left purple doing nothing. */
/* --paper flips with the theme, so it stays the readable pair against
   --purple in both: cream on deep purple in light, ink on lavender in dark.
   An explicit dark override here dropped it to 1.79:1. */
.btn-primary { background: var(--purple); color: var(--paper); }
.btn-primary:hover { background: var(--purple-700); color: var(--paper); }
.btn-outline { border-color: currentColor; color: inherit; }
.btn-outline:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---- Typography -------------------------------------------- */

h1, h2, h3 { margin: 0; font-weight: 600; }
.display { font-size: var(--font-size-display); line-height: var(--line-height-display); font-weight: 700; letter-spacing: normal; }
.display em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: normal; }
.h2 { font-size: var(--font-size-heading); line-height: var(--line-height-heading); letter-spacing: normal; }
.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.52; }
.measure { max-width: 62ch; }
.text-column { max-width: 68ch; }
.muted { color: var(--muted); }
.eyebrow {
  /* DM Mono, per the guide's own stack. The brand book sets its corner
     labels in Instrument Serif italic and has no monospace at all; the guide
     is followed here by decision of 10 August 2026 — see
     14-brand-source-conflicts.md, divergence 5. */
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 var(--space-3);
}

section { padding-block: clamp(56px, 8vw, 104px); }

/* ---- Colour blocking --------------------------------------- */
/* Blocks, not hairlines. Each block is a field with one quarter-round
   corner — the mark's own geometry at architectural scale. */

/* Cards and blocks use the system's own --card-radius. An earlier version
   gave every block a single ~115px arc corner: at card scale that reads as a
   quirky tab, not as the "quiet structural device" docs/graphics.md asks for,
   and the system already ships a card radius. The arc language is kept for
   the two places it is genuinely a graphic — the hero composition and the
   portrait masks. No overflow:hidden: it would crop the focus ring on any
   control inside. */
.block {
  border-radius: var(--card-radius);
  padding: clamp(32px, 5vw, 72px);
}
.block-ink { background: var(--ink); color: var(--paper); }
.block-ink .muted { color: color-mix(in srgb, var(--paper) 66%, transparent); }
.block-ink a { color: var(--paper); }
.block-surface { background: var(--surface-2); }


/* ---- Hero -------------------------------------------------- */

.hero { position: relative; padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 104px); }
.hero-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: end; }
.hero-grid > * { min-width: 0; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); } }

/* Arc composition.
   NOT the logo. docs/graphics.md: arcs and cropped circles are "quiet
   structural devices" that "must never compete with the message or imitate
   the protected logo", and 02 §11 forbids recolouring the mark. An earlier
   version of this draft did both — it placed the real artwork, oversized and
   tinted green and blue, beside the headline. Replaced with abstract arcs in
   one accent family, sized to sit beside the message rather than shout over
   it. Purple is the signature colour, so the brand moment uses purple. */
.arc-composition {
  position: relative; aspect-ratio: 1.05 / 1; width: 100%;
  max-width: 380px; margin-left: auto;
  display: none;
}
@media (min-width: 1000px) { .arc-composition { display: block; } }
.arc-composition .arc-a {
  position: absolute; inset: 0 22% 26% 0;
  background: var(--purple-100);
  border-radius: 100% 0 0 0;
  animation: arc-drift 8s var(--ease-standard) infinite alternate;
}
.arc-composition .arc-b {
  position: absolute; inset: 34% 0 0 38%;
  background: var(--surface-2);
  border-radius: 0 0 100% 0;
  animation: arc-drift 10s var(--ease-standard) -2s infinite alternate-reverse;
}
.arc-composition .dot {
  position: absolute; width: 26%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--purple); left: 8%; bottom: 6%;
  animation: dot-float 6s var(--ease-standard) -1s infinite alternate;
}
@keyframes arc-drift { to { transform: translate3d(8px, -6px, 0); } }
@keyframes dot-float { to { transform: translate3d(5px, -12px, 0); } }

/* ---- Program cards ----------------------------------------- */

.programs { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 960px) { .programs { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.prog {
  position: relative; min-width: 0;
  background: var(--prog-soft);
  border-radius: var(--tile) 0 var(--tile) 0;
  padding: var(--space-5) var(--space-4) var(--space-4);
  overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: transform var(--motion-surface) var(--ease-standard), box-shadow var(--motion-surface) var(--ease-standard);
}
/* Cropped circle, mostly out of frame. At the previous size and opacity it
   sat under the last line of copy and muddied it. */
.prog::after {
  content: ""; position: absolute; right: -44px; bottom: -44px;
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--prog); opacity: .32;
}
.prog h3 { font-size: 22px; letter-spacing: normal; position: relative; }
.prog p { margin: 0; position: relative; }
.prog .tag {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--prog-ink); margin-bottom: var(--space-1);
}
.prog-debate { --prog: var(--debate); --prog-soft: var(--debate-soft); --prog-ink: var(--debate-ink); }
.prog-mun    { --prog: var(--mun);    --prog-soft: var(--mun-soft);    --prog-ink: var(--mun-ink); }
.prog-psk    { --prog: var(--psk);    --prog-soft: var(--psk-soft);    --prog-ink: var(--psk-ink); }

/* ---- Lists ------------------------------------------------- */

.numbered { display: grid; gap: var(--space-3); }
@media (min-width: 760px) {
  .numbered { grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--space-4); }
  .numbered .item { grid-column: span 2; }
  .numbered .item:nth-child(4) { grid-column: 2 / span 2; }
}
.numbered .item { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-2); align-items: start; }
.numbered .n {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--button-radius) 0 var(--button-radius) 0;
  background: var(--purple-100); color: var(--purple-700);
  font-family: var(--font-mono); font-size: 12px;
}
.numbered p { margin: 0; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.facts li { padding-left: var(--space-4); position: relative; }
.facts li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 10px; height: 10px; border-radius: 50% 0 50% 0;
  background: currentColor; opacity: .45;
}

/* ---- Portraits ---------------------------------------------- */

/* Photography follows the brand source's rounded marketing-card treatment.
   The design system does not yet export that ~28px radius as a token.
   Logo-derived arcs remain structural graphics; they are not photo masks. */
.portrait {
  width: 100%; aspect-ratio: 1;
  background: var(--surface-2);
  border-radius: var(--marketing-radius);
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.portrait img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  object-position: var(--portrait-position, 50% 35%);
  transition: transform 600ms var(--ease-standard);
}


/* ---- Coaches ----------------------------------------------- */

.coach {
  display: grid; gap: var(--space-3);
  grid-template-columns: calc(128px * 247.33 / 264.82) minmax(0,1fr);
  padding-block: var(--space-4);
  scroll-margin-top: 90px;
}
.coach > * { min-width: 0; }
.coach-copy { display: contents; }
.coach-identity {
  grid-column: 2; min-height: 128px;
  display: flex; flex-direction: column; align-self: stretch;
}
.coach p.blurb, .coach .teaches, .coach .back-top { grid-column: 1 / -1; }
.coach-portrait { position: relative; min-height: 0; }
.coach-portrait .portrait {
  position: absolute; inset: 0; height: 100%; min-height: 0; aspect-ratio: auto;
  border-radius: 0;
  -webkit-mask: url("coach-mask.svg") center / 100% 100% no-repeat;
  mask: url("coach-mask.svg") center / 100% 100% no-repeat;
}
@media (min-width: 851px) {
  .coach {
    grid-template-columns: 240px minmax(0,1fr); gap: var(--space-6);
    padding-block: clamp(36px, 5vw, 60px);
  }
  .coach-copy { display: block; }
  .coach-identity, .coach p.blurb, .coach .teaches, .coach .back-top { grid-column: auto; }
  .coach-identity { min-height: 0; display: block; }
  .coach-portrait .portrait {
    position: relative; inset: auto; height: auto; min-height: 0;
    aspect-ratio: 247.33 / 264.82;
  }
}
.coach + .coach { border-top: var(--border-width) solid var(--line); }

.coach-name { font-size: 30px; line-height: 1.04; letter-spacing: normal; }
.coach-name .given {
  display: block; font-family: var(--font-serif); font-style: italic;
  font-weight: 400; font-size: .72em; line-height: 1.12; color: var(--muted);
  letter-spacing: 0; margin-top: 5px; overflow-wrap: anywhere;
}
@media (min-width: 851px) {
  .coach-name { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.08; }
  .coach-name .given { font-size: .55em; line-height: inherit; margin-top: 4px; overflow-wrap: normal; }
  .mobile-name-break { display: none; }
}
.coach-role {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: normal;
  line-height: 1.3; text-transform: uppercase; color: var(--muted); margin: auto 0 0;
  white-space: normal;
}
.coach p.blurb { margin: 0 0 var(--space-3); max-width: 62ch; }
@media (min-width: 851px) {
  .coach-role { margin: var(--space-3) 0 var(--space-3); white-space: normal; }
  .coach p.blurb { margin-bottom: var(--space-4); }
  .coach-copy { max-width: 62ch; }
}

/* Teaches — a small filled panel, one row per program.
   Two earlier versions failed for the same reason: they treated this as a
   contrast problem. It was a comprehension problem. Chips reading
   "Debate — Foundation, Beginner, Intermediate" are a compound string a
   parent has to decode; one row per program, with the levels in their own
   column, needs no decoding. A filled panel also matches the rest of the
   page, which separates with blocks rather than rules. */
.teaches {
  width: 100%; max-width: 62ch;
  background: var(--surface-2);
  border-radius: var(--card-radius);
  padding: var(--space-2) var(--space-3) var(--space-3);
}
.teaches .spec-label { margin-bottom: var(--space-2); }
.tlist { display: grid; }
.trow {
  display: grid; align-items: center;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 2px var(--space-2);
  padding-block: var(--space-1);
}
.trow + .trow { border-top: var(--border-width) solid color-mix(in srgb, var(--ink) 10%, transparent); }
@media (min-width: 620px) {
  .trow { grid-template-columns: 14px 190px minmax(0, 1fr); gap: var(--space-3); }
}
.tdot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--dot);
}
.tdot-debate { --dot: var(--debate); }
.tdot-mun    { --dot: var(--mun); }
.tdot-psk    { --dot: var(--psk); }
.tdot-other  { --dot: var(--muted); }
.tname { font-weight: 600; font-size: 16px; }
.tlev  { color: var(--muted); font-size: 15px; grid-column: 2 / -1; }
@media (min-width: 620px) { .tlev { grid-column: auto; } }

.spec-label {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  font-weight: 400; margin: 0;
}


.toc-nav { margin-top: var(--space-5); overflow-x: auto; scrollbar-width: thin; }
.toc {
  list-style: none; display: flex; flex-wrap: nowrap; width: max-content;
  gap: var(--space-2); margin: 0; padding: 0 0 var(--space-1);
}
@media (min-width: 561px) {
  .toc-nav { overflow-x: visible; }
  .toc { flex-wrap: wrap; width: auto; padding-bottom: 0; }
}
.toc a {
  display: inline-flex; align-items: center; min-height: var(--touch-target);
  padding: 0 var(--space-3); border-radius: var(--button-radius);
  background: var(--surface-2); color: var(--ink);
  text-decoration: none; font-size: 14px;
}
.toc a:hover { background: var(--purple-100); color: var(--purple-700); }
.back-top {
  display: inline-flex; align-items: center; justify-self: start;
  min-height: var(--touch-target); color: var(--ink); font-size: 14px;
  text-underline-offset: 4px;
}
@media (min-width: 851px) { .back-top { display: none; } }

/* ---- Founders ---------------------------------------------- */

.home-coaches { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .home-coaches { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.home-coach {
  min-width: 0; padding: var(--space-4); display: grid;
  grid-template-columns: 96px minmax(0,1fr); gap: var(--space-3); align-items: start;
  border-radius: var(--card-radius); background: var(--surface-2);
  transition: transform var(--motion-surface) var(--ease-standard), box-shadow var(--motion-surface) var(--ease-standard);
}
.home-coach .portrait { width: 96px; aspect-ratio: 1; }
.home-coach-copy { display: contents; }
.home-coach-identity { grid-column: 2; align-self: center; }
.home-coach-proof { grid-column: 1 / -1; }
.home-coach h3 { margin-top: var(--space-2); font-size: 22px; overflow-wrap: anywhere; }
.home-coach p:last-child { margin-bottom: 0; }
@media (min-width: 760px) {
  .home-coach-copy { display: block; }
  .home-coach-identity, .home-coach-proof { grid-column: auto; }
}

.founders { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .founders { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.founder { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-3); align-items: start; min-width: 0; }
.founder .portrait { width: 96px; aspect-ratio: 1; }
.founder h3 { font-size: 19px; letter-spacing: normal; }
.founder p { margin: var(--space-2) 0 0; font-size: 15px; line-height: 24px; }

/* ---- Address ----------------------------------------------- */
.address { font-style: normal; }
.address .th { font-family: var(--font-thai); color: var(--muted); margin-top: var(--space-3); }
.where-grid { display: grid; gap: var(--space-5); align-items: center; }
.where-grid > * { min-width: 0; }
@media (min-width: 851px) { .where-grid { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); } }
.campus-map { display: block; border-radius: var(--marketing-radius); overflow: hidden; }
.campus-map img { display: block; width: 100%; height: auto; transition: transform 700ms var(--ease-standard); }
.campus-map:hover img { transform: scale(1.025); }

/* ---- Location page ------------------------------------------ */
/* /map/ is shared on its own, usually in LINE, so it repeats the shape of the
   rest of the site rather than inventing one: filled panels instead of rules,
   the numbered device from "what students learn" for the arrival sequence. */

.split { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .split { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.split > * { min-width: 0; }

/* One panel per approach. A parent arriving by car is reading exactly one of
   these while driving, so each has to stand alone — the shared facts are
   repeated in both rather than factored out above them. */
.route { background: var(--surface-2); border-radius: var(--card-radius); padding: var(--space-4); }
.route h3 { font-size: 20px; letter-spacing: normal; margin-bottom: var(--space-3); }
.route p { margin: 0 0 var(--space-2); }
.route p:last-child { margin-bottom: 0; }
.route .spec-label { margin-bottom: var(--space-1); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: step; max-width: 68ch; }
.steps li { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: var(--space-3); align-items: start; }
.steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--button-radius) 0 var(--button-radius) 0;
  background: var(--purple-100); color: var(--purple-700);
  font-family: var(--font-mono); font-size: 12px;
}
.steps p { margin: 0; }
.steps p + p { margin-top: var(--space-2); }

/* Orange is the system's warning accent. The wheel-locking note is the one
   thing on this page that costs money if it is missed. */
.notice { border-radius: var(--card-radius); padding: var(--space-3) var(--space-4); background: var(--orange-soft); }
.notice p { margin: 0; }

/* Thai is used where it is operationally necessary — an address a driver can
   be shown, and the two lines a driver needs to hear. */
.th-block { font-family: var(--font-thai); }
.th-block p { margin: 0 0 var(--space-2); }
.th-block p:last-child { margin-bottom: 0; }

/* ---- Motion ------------------------------------------------ */
.js .hero .eyebrow, .js .hero .display, .js .hero .lede, .js .hero .actions, .js .hero .arc-composition {
  opacity: 0; animation: hero-enter 700ms var(--ease-enter) forwards;
}
.js .hero .display { animation-delay: 80ms; }
.js .hero .lede { animation-delay: 160ms; }
.js .hero .actions { animation-delay: 240ms; }
.js .hero .arc-composition { animation-delay: 180ms; }
@keyframes hero-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-enter), transform 600ms var(--ease-enter); transition-delay: calc(var(--reveal-order, 0) * 70ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---- Footer ------------------------------------------------ */
.site-footer { padding-block: var(--space-6); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; }
.site-footer a { color: var(--ink); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal, .js .hero .eyebrow, .js .hero .display, .js .hero .lede, .js .hero .actions, .js .hero .arc-composition { opacity: 1; transform: none; }
}