/* ==========================================================================
   Vailient site stylesheet, v2.
   Token-based. Light first; night is for bands that show product UI.
   Rules: no gradient surfaces, no glow, no gradient text. Corners 2px (product frames 10px).
   Separation is by hairline rules and tonal bands, not cards. Depth belongs to product frames only.
   The detail, frame and motion layer is at the end of this file.
   ========================================================================== */

/* ---- Fonts (self-hosted, see public/fonts) ----------------------------- */
@font-face { font-family: 'Manrope'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/manrope-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/manrope-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/public-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/public-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/public-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Kanit'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/kanit-thai-400-normal.woff2') format('woff2'); unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC; }
@font-face { font-family: 'Kanit'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/kanit-thai-500-normal.woff2') format('woff2'); unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC; }
@font-face { font-family: 'Kanit'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/kanit-thai-600-normal.woff2') format('woff2'); unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC; }
@font-face { font-family: 'Noto Sans JP'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/noto-sans-jp-japanese-400-normal.woff2') format('woff2'); unicode-range: U+3000-9FFF, U+FF00-FFEF; }
@font-face { font-family: 'Noto Sans JP'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/noto-sans-jp-japanese-500-normal.woff2') format('woff2'); unicode-range: U+3000-9FFF, U+FF00-FFEF; }

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --paper: #F7F6F9;
  --white: #FFFFFF;
  --ink: #17141F;
  --night: #15131C;
  --plum: #5B4689;
  --plum-hover: #483770;
  --tint: #E9E4F3;
  --hairline: #DDD9E4;

  /* Derived, all checked at WCAG AA against the surfaces they sit on. */
  --muted: #5A5566;            /* 6.7:1 on paper, 7.2:1 on white */
  --line-strong: #857F94;      /* form control borders, 3.8:1 on white */
  --plum-on-night: #B8A5E8;    /* 8.4:1 on night; plum itself fails on night */
  --night-raised: #1E1B28;
  --night-hairline: #34303F;
  --night-muted: #B9B4C7;      /* 9.1:1 on night */

  /* Noto Sans JP is only in the Japanese stacks (html:lang(ja) below). In these default stacks
     the "日本語" language link alone would pull a 1.1 MB font onto every English page; the
     system Japanese font draws those three characters instead. */
  --font-head: 'Manrope', 'Kanit', system-ui, sans-serif;
  --font-body: 'Public Sans', 'Kanit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radius: 2px;
  --wrap: 1200px;
  --gutter: 24px;
  --measure: 68ch;
  --header-h: 68px;
}
html:lang(th) { --font-head: 'Kanit', 'Manrope', system-ui, sans-serif; --font-body: 'Kanit', 'Public Sans', system-ui, sans-serif; }
html:lang(ja) { --font-head: 'Noto Sans JP', 'Manrope', system-ui, sans-serif; --font-body: 'Noto Sans JP', 'Public Sans', system-ui, sans-serif; }

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; color: inherit; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.025em; }
h2, .h2 { font-size: clamp(1.75rem, 3.2vw, 2.625rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; font-family: var(--font-head); }
h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.005em; font-weight: 600; }
.h-sm { font-size: 1.375rem; letter-spacing: -0.01em; }
p { margin: 0; max-width: var(--measure); }
a { color: var(--plum); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--plum-hover); }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: var(--radius); }
.band--night :focus-visible, .site-footer :focus-visible { outline-color: var(--plum-on-night); }
::selection { background: var(--tint); color: var(--ink); }
.mono { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; }
.small { font-size: 0.8125rem; }
.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--muted); }
.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 100; }
.skip-link:focus { left: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; font-weight: 500; }

/* ---- Bands ------------------------------------------------------------- */
.band { padding-block: 88px; }
.band--tight { padding-block: 48px; }
.band--roomy { padding-block: 128px; }
.band--paper { background: var(--paper); }
.band--white { background: var(--white); border-block: 1px solid var(--hairline); }
.band--tint { background: var(--tint); }
.band--night { background: var(--night); color: var(--paper); }
.band--night .lede, .band--night .eyebrow, .band--night figcaption { color: var(--night-muted); }
.band--night a { color: var(--plum-on-night); }
.band--white + .band--white, .band--paper + .band--paper { border-top: 0; }
/* A faint logo mark behind a band's content. The brand file is used as it is, only at low opacity. */
.band--mark { position: relative; overflow: hidden; isolation: isolate; }
.band--mark::after { content: ''; position: absolute; z-index: -1; pointer-events: none; top: 50%; right: max(-60px, calc((100vw - var(--wrap)) / 2 - 80px)); width: clamp(260px, 34vw, 460px); aspect-ratio: 1; transform: translateY(-50%); background: var(--band-mark) no-repeat center / contain; opacity: .04; }
.band--night.band--mark::after { opacity: .06; }
/* In a hero the mark sits inside the content column: its right edge on the column edge, its top level with the eyebrow. */
.hero.band--mark::after { top: 96px; right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); width: clamp(220px, 24vw, 340px); aspect-ratio: 900 / 761; transform: none; background-position: right top; }
.band--mark-vailient { --band-mark: url('/brand/marks/vailient-black.png'); }
.band--mark-canvas { --band-mark: url('/brand/marks/canvas-black.png'); }
.band--mark-corvus { --band-mark: url('/brand/marks/corvus-black.png'); }
.band--mark-plates { --band-mark: url('/brand/marks/plates-black.png'); }
.band--mark-faces { --band-mark: url('/brand/marks/faces-black.png'); }
.band--night.band--mark-vailient { --band-mark: url('/brand/marks/vailient-white.png'); }
.band--night.band--mark-canvas { --band-mark: url('/brand/marks/canvas-white.png'); }
.band--night.band--mark-corvus { --band-mark: url('/brand/marks/corvus-white.png'); }
.band--night.band--mark-plates { --band-mark: url('/brand/marks/plates-white.png'); }
.band--night.band--mark-faces { --band-mark: url('/brand/marks/faces-white.png'); }
@media (max-width: 700px) { .band--mark::after { right: -70px; width: 240px; } }
.band--white + .band--paper { margin-top: 0; }
.intro { margin-bottom: 48px; max-width: 760px; }
.intro h2 + .lede { margin-top: 16px; }
.intro--center { margin-inline: auto; text-align: center; }
.intro--center .lede { margin-inline: auto; }
.prose p + p, .prose p + ul, .prose p + ol, .prose ul + p, .prose ol + p, .prose ul + ul { margin-top: 1.1em; }
.prose li p { margin: 0; }
.prose h2, .prose h3 { margin-top: 1.8em; margin-bottom: .5em; }
.prose ul, .prose ol { padding-left: 1.25em; max-width: var(--measure); }
.prose li + li { margin-top: 0.4em; }

/* ---- Buttons and links ------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border-radius: var(--radius); border: 1px solid transparent; font: 500 0.9375rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: #2A2536; color: var(--paper); }
.btn--accent { background: var(--plum); color: #fff; }
.btn--accent:hover { background: var(--plum-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.band--night .btn--solid { background: var(--paper); color: var(--ink); }
.band--night .btn--solid:hover { background: #fff; color: var(--ink); }
.band--night .btn--accent { background: var(--plum-on-night); color: var(--ink); }
.band--night .btn--ghost { color: var(--paper); border-color: #6B6579; }
.band--night .btn--ghost:hover { border-color: var(--paper); color: var(--paper); }
.btn[disabled] { opacity: .6; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.textlink { display: inline-block; margin-top: 20px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* ---- Media and placeholders ------------------------------------------- */
.media { margin: 0; position: relative; }
.media:not(.media--framed) img { width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--white); }
.media figcaption { margin-top: 10px; font-size: 0.8125rem; color: var(--muted); }
.media__tag { position: absolute; top: 12px; left: 12px; background: var(--ink); color: var(--paper); padding: 3px 8px; border-radius: var(--radius); }
.placeholder { aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--white); color: var(--muted); }
.placeholder__tag { color: var(--plum); text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.placeholder__label { font-size: .9375rem; max-width: 46ch; }
.band--night .placeholder { background: var(--night-raised); border-color: #6B6579; color: var(--night-muted); }
.band--night .placeholder__tag { color: var(--plum-on-night); }
.band--night .media:not(.media--framed) img { border-color: var(--night-hairline); }
.points { list-style: none; padding: 0; margin: 24px 0 0; max-width: var(--measure); }
.points li { padding: 12px 0 12px 22px; border-top: 1px solid var(--hairline); position: relative; }
.points li:last-child { border-bottom: 1px solid var(--hairline); }
.points li::before { content: ''; position: absolute; left: 0; top: 1.3em; width: 8px; height: 1px; background: var(--ink); }
.band--night .points li { border-color: var(--night-hairline); }
.band--night .points li::before { background: var(--night-muted); }

/* ---- Header ------------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--hairline); }
.site-header__bar { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
/* Logo: the colour wordmark at the top of the page, crossfading into the colour mark over the
   first 160px of scroll (--logo 0 to 1, set by Motion). Both sit in one grid cell, left-aligned,
   so the navigation never shifts. Without the motion layer the swap is a plain step. */
.site-header__logo { display: grid; flex: none; align-items: center; }
.site-header__logo img { grid-area: 1 / 1; width: auto; }
.site-header__type { height: 22px; opacity: calc(1 - var(--logo, 0)); transform: scale(calc(1 - var(--logo, 0) * .08)); transform-origin: 0 50%; }
.site-header__mark { height: 28px; opacity: var(--logo, 0); transform: scale(calc(.85 + var(--logo, 0) * .15)); transform-origin: 0 50%; }
html:not(.motion) .site-header__type { opacity: 1; transform: none; }
html:not(.motion) .site-header__mark { opacity: 0; transform: none; }
html:not(.motion) .site-header.is-scrolled .site-header__type { opacity: 0; }
html:not(.motion) .site-header.is-scrolled .site-header__mark { opacity: 1; }
.nav { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; flex: 1; }
.nav__btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; background: none; border: 0; color: var(--ink); font: 500 0.9375rem/1 var(--font-body); cursor: pointer; border-radius: var(--radius); }
.nav__btn:hover, .nav__btn[aria-expanded='true'] { background: var(--tint); }
.nav__btn svg { width: 10px; height: 10px; transition: transform .15s ease; }
.nav__btn[aria-expanded='true'] svg { transform: rotate(180deg); }
.site-header__tools { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.lang { display: flex; gap: 2px; font-family: var(--font-mono); font-size: 0.75rem; }
.lang a { padding: 6px 7px; color: var(--muted); text-decoration: none; border-radius: var(--radius); }
.lang a[aria-current='true'] { background: var(--tint); color: var(--ink); }
.lang a:hover { color: var(--ink); }
.site-header__cta { min-height: 40px; padding: 8px 18px; }
.menu-toggle { display: none; background: none; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 10px 14px; font: 500 0.9375rem/1 var(--font-body); color: var(--ink); cursor: pointer; }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--hairline); border-top: 1px solid var(--hairline); }
.mega[hidden] { display: none; }
.mega__inner { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 48px; padding-block: 36px 44px; }
.mega__group h3 { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.mega__group ul { list-style: none; margin: 0; padding: 0; }
.mega__group a { display: block; padding: 8px 0; text-decoration: none; color: var(--ink); }
.mega__group a:hover .mega__label { color: var(--plum); }
.mega__label { display: block; font-weight: 500; font-size: 0.9375rem; line-height: 1.3; }
.mega__desc { display: block; color: var(--muted); font-size: 0.8125rem; line-height: 1.4; margin-top: 2px; max-width: 34ch; }

@media (max-width: 1040px) {
  .site-header__bar { gap: 12px; }
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .site-header__tools { display: none; }
  .nav { display: none; }
  .site-header[data-open='true'] .nav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--hairline); max-height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 8px var(--gutter) 24px; }
  .nav__btn { width: 100%; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--hairline); border-radius: 0; font-size: 1rem; }
  .nav li { border: 0; }
  .mega { position: static; border: 0; }
  .mega__inner { grid-template-columns: 1fr; gap: 20px; padding: 16px 0 8px; }
  .mobile-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; }
}
@media (min-width: 1041px) { .mobile-tools { display: none; } }

/* ---- Footer ------------------------------------------------------------ */
.site-footer { background: var(--night); color: var(--night-muted); padding-block: 72px 40px; font-size: 0.9375rem; }
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { color: var(--plum-on-night); text-decoration: underline; }
.footer__top { display: grid; grid-template-columns: 1.2fr 3fr; gap: 64px; }
.footer__brand img { height: 22px; width: auto; }
.footer__brand p { margin-top: 20px; color: var(--night-muted); max-width: 32ch; font-size: 0.875rem; }
.footer__cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 28px; }
.footer__cols h3 { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--night-muted); font-weight: 500; margin-bottom: 16px; }
.footer__cols ul { list-style: none; margin: 0; padding: 0; }
.footer__cols li + li { margin-top: 9px; }
.footer__cols h4 { font-size: .75rem; font-family: var(--font-mono); color: #8F8A9E; font-weight: 500; margin: 22px 0 10px; letter-spacing: .06em; text-transform: uppercase; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--night-hairline); font-size: 0.8125rem; }
@media (max-width: 1040px) { .footer__top { grid-template-columns: 1fr; gap: 40px; } .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Hero -------------------------------------------------------------- */
.hero { padding-block: 96px 88px; }
.hero > .wrap { display: grid; gap: 56px; align-items: center; }
.hero--split > .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.hero--stacked > .wrap { grid-template-columns: 1fr; }
.hero--stacked .hero__copy { max-width: 880px; }
.hero--text > .wrap { grid-template-columns: 1fr; }
.hero--text .hero__copy { max-width: 880px; }
.hero__copy h1 { max-width: 17em; }
.hero__copy .lede { margin-top: 24px; max-width: 54ch; }
.hero.band--night .lede { color: var(--night-muted); }
@media (max-width: 900px) { .hero { padding-block: 56px; } .hero--split > .wrap { grid-template-columns: 1fr; gap: 40px; } }

/* ---- Proof / figures --------------------------------------------------- */
.proof__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin: 0; }
.proof__item { padding: 4px 28px 4px 0; border-left: 0; }
.proof__item + .proof__item { padding-left: 28px; border-left: 1px solid var(--hairline); }
.proof__item dt { margin: 0; }
.figure { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.figure--placeholder { font-family: var(--font-mono); font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--muted); border: 1px dashed var(--line-strong); display: inline-block; padding: 6px 10px; border-radius: var(--radius); }
.proof__item dd { margin: 8px 0 0; color: var(--muted); font-size: 0.9375rem; max-width: 28ch; }
.proof .eyebrow { margin-bottom: 28px; }
@media (max-width: 700px) { .proof__item + .proof__item { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); padding-top: 20px; margin-top: 20px; } }

.names__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 40px; font-family: var(--font-head); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.01em; }
.names__list a { color: var(--ink); text-decoration: none; }
.names__list a:hover { color: var(--plum); }

/* ---- Split / feature --------------------------------------------------- */
.split > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.split--left .split__media { order: -1; }
.split__copy h2 + p { margin-top: 20px; }
@media (max-width: 900px) { .split > .wrap { grid-template-columns: 1fr; gap: 36px; } .split--left .split__media { order: 0; } }
.story-feature > .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.story-feature__copy h2 { margin-bottom: 18px; }
.story-feature__copy .small { margin-top: 18px; color: var(--muted); }
@media (max-width: 900px) { .story-feature > .wrap { grid-template-columns: 1fr; gap: 32px; } }

/* ---- Lists: capabilities, index, stories, resources -------------------- */
.caps { list-style: none; margin: 0; padding: 0; }
.caps li { padding: 26px 0; border-top: 1px solid var(--hairline); }
.caps li:last-child { border-bottom: 1px solid var(--hairline); }
.caps--rows li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; }
.caps--rows li p { color: var(--muted); }
.caps--columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
.caps--columns li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--hairline); }
.caps h3 a { color: var(--ink); text-decoration: none; }
.caps h3 a:hover { color: var(--plum); }
.caps li p { margin-top: 8px; }
.caps--rows li p { margin-top: 0; }
@media (max-width: 800px) { .caps--rows li { grid-template-columns: 1fr; gap: 8px; } .caps--columns { grid-template-columns: 1fr; } }

.index { list-style: none; margin: 0; padding: 0; }
.index a, .index__static { display: grid; align-items: baseline; gap: 6px 40px; padding: 32px 0; border-top: 1px solid var(--hairline); text-decoration: none; color: var(--ink); position: relative; }
.index li:last-child a { border-bottom: 1px solid var(--hairline); }
.index__kicker { color: var(--muted); grid-column: 1; }
.index__title { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.375rem, 2.4vw, 1.875rem); letter-spacing: -0.015em; line-height: 1.2; grid-column: 1; }
.index__desc { color: var(--muted); grid-column: 2; grid-row: 1 / span 2; max-width: 52ch; }
.index__arrow { position: absolute; right: 0; top: 34px; color: var(--muted); }
.index--rows a, .index--rows .index__static { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); padding-right: 40px; }
.index--list a, .index--list .index__static { grid-template-columns: 1fr; padding: 16px 40px 16px 0; }
.index--list .index__title { font-size: 1.125rem; }
.index--list .index__desc { grid-column: 1; grid-row: auto; }
.index--list .index__arrow { top: 18px; }
.index--columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.index--columns a, .index--columns .index__static { grid-template-columns: 1fr; padding-right: 28px; }
.index--columns .index__desc { grid-column: 1; grid-row: auto; }
.index--columns li:last-child a { border-bottom: 0; }
.index a:hover .index__title { color: var(--plum); }
.index a:hover .index__arrow { color: var(--plum); }
@media (max-width: 900px) { .index--rows a { grid-template-columns: 1fr; } .index__desc { grid-column: 1; grid-row: auto; } .index--columns { grid-template-columns: 1fr; } }

.stories { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.story { padding: 28px 0; border-top: 1px solid var(--hairline); }
.story h3 { font-size: 1.375rem; margin-bottom: 12px; }
.story h3 a { color: var(--ink); text-decoration: none; }
.story h3 a:hover { color: var(--plum); }
.story .small { margin-top: 14px; color: var(--muted); }
@media (max-width: 800px) { .stories { grid-template-columns: 1fr; } }

.resources { list-style: none; margin: 0; padding: 0; }
.resources li { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; padding: 24px 0; border-top: 1px solid var(--hairline); }
.resources li:last-child { border-bottom: 1px solid var(--hairline); }
.resources h3 { margin: 4px 0 6px; }
.resources h3 a { color: var(--ink); text-decoration-color: var(--hairline); }
.resources .small { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tag { display: inline-block; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 3px 8px; font-size: .75rem; color: var(--muted); white-space: nowrap; }
.tag--placeholder { border-style: dashed; color: var(--plum); border-color: var(--plum); }

.posts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 48px; }
.posts li { padding: 22px 0; border-top: 1px solid var(--hairline); }
.posts h3 a { color: var(--ink); text-decoration: none; }
.posts h3 a:hover { color: var(--plum); }
.posts .small { color: var(--muted); margin-bottom: 8px; }
.empty { color: var(--muted); padding: 24px 0; border-top: 1px solid var(--hairline); }

/* ---- Story body -------------------------------------------------------- */
.story-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 72px; }
.facts { margin: 0; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
.facts div { padding: 14px 0; border-top: 1px solid var(--hairline); }
.facts div:last-child { border-bottom: 1px solid var(--hairline); }
.facts dt { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.facts dd { margin: 4px 0 0; font-weight: 500; }
.story-body__text section + section { margin-top: 56px; }
.story-body__text h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 18px; }
@media (max-width: 900px) { .story-body { grid-template-columns: 1fr; gap: 32px; } .facts { position: static; } }

.quote { margin: 0; max-width: 900px; }
.quote blockquote { margin: 0; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.quote figcaption { margin-top: 24px; font-size: .9375rem; color: var(--muted); }

/* ---- Platform explorer ------------------------------------------------- */
.explorer-band h2 { max-width: 20ch; margin-bottom: 48px; }
.explorer__tabs { display: flex; gap: 0; border-bottom: 1px solid var(--night-hairline); overflow-x: auto; }
.explorer__tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 14px 22px; color: var(--night-muted); font: 500 1rem/1 var(--font-body); cursor: pointer; white-space: nowrap; }
.explorer__tab:hover { color: var(--paper); }
.explorer__tab[aria-selected='true'] { color: var(--paper); border-bottom-color: var(--plum-on-night); }
.band--paper .explorer__tabs, .band--white .explorer__tabs { border-color: var(--hairline); }
.band--paper .explorer__tab, .band--white .explorer__tab { color: var(--muted); }
.band--paper .explorer__tab[aria-selected='true'], .band--white .explorer__tab[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--plum); }
.explorer__panel { padding-top: 48px; }
.explorer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 64px; align-items: start; }
.explorer__copy h3 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); margin-bottom: 16px; }
.explorer__copy p { color: var(--night-muted); }
.band--paper .explorer__copy p, .band--white .explorer__copy p { color: var(--muted); }
@media (max-width: 900px) { .explorer__grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---- Diagrams (SVG classes) ------------------------------------------- */
.diagram-scroll { overflow-x: auto; margin-top: 8px; }
.diagram-scroll .diagram { min-width: 820px; width: 100%; }
.diagram { font-family: var(--font-body); }
.dg-head { font: 500 12px var(--font-mono); letter-spacing: .08em; fill: var(--muted); }
.dg-box { fill: var(--paper); stroke: var(--hairline); stroke-width: 1; }
.band--white .dg-box { fill: var(--white); stroke: #C9C4D4; }
.dg-kicker { font: 500 11px var(--font-mono); letter-spacing: .08em; fill: var(--muted); }
.dg-text { font: 400 12.5px var(--font-body); fill: var(--ink); }
.dg-title { font: 600 30px var(--font-head); fill: var(--ink); letter-spacing: -.02em; }
.dg-title-sm { font: 600 18px var(--font-head); fill: var(--ink); }
.dg-note { font: 500 11px var(--font-mono); fill: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.dg-line { stroke: var(--ink); stroke-width: 1.25; fill: none; }
.dg-dashed { stroke-dasharray: 5 5; }
.dg-canvas { fill: var(--ink); }
.dg-accent { fill: var(--plum-on-night); }
.dg-canvas-title { font: 600 26px var(--font-head); fill: var(--paper); letter-spacing: -.02em; }
.dg-canvas-kicker { font: 500 11px var(--font-mono); letter-spacing: .08em; fill: var(--night-muted); }
.dg-canvas-sub { font: 400 13px var(--font-body); fill: var(--night-muted); }
.dg-inner { fill: #241F30; stroke: #3E384D; stroke-width: 1; }
.dg-inner-title { font: 600 14px var(--font-head); fill: var(--paper); }
.dg-inner-sub { font: 400 12px var(--font-body); fill: var(--night-muted); }
.dg-perimeter { fill: none; stroke: var(--line-strong); stroke-width: 1.25; stroke-dasharray: 6 5; }
.caption { margin-top: 16px; color: var(--muted); }

/* ---- Screenshot band --------------------------------------------------- */
.shot > .wrap { display: grid; gap: 48px; }
.shot__copy { max-width: 720px; }
.shot__copy h2 + .lede { margin-top: 16px; }

/* ---- Integration directory -------------------------------------------- */
.directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 40px; }
.directory__group h3 { font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.directory ul { list-style: none; margin: 0; padding: 0; }
.directory li { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.directory__name { font-weight: 500; }
.directory__note { color: var(--muted); font-size: .875rem; }
.directory .tag { margin-left: auto; }
@media (max-width: 800px) { .directory { grid-template-columns: 1fr; } }

/* ---- Comparison -------------------------------------------------------- */
.table-scroll { overflow-x: auto; overflow-y: hidden; } /* rows rising in must not flash a vertical scrollbar */
/* Fixed layout: the row-label column is 22%, every data column gets an equal share,
   and every cell has the same inset so a highlighted column reads as a centred panel. */
.compare { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .9375rem; table-layout: fixed; }
.compare th, .compare td { text-align: left; padding: 16px 20px; border-top: 1px solid var(--hairline); vertical-align: top; }
.compare tr > :first-child { padding-left: 0; }
.compare thead th, .compare thead td { border-top: 0; border-bottom: 1px solid var(--ink); }
.compare thead th { font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; }
.compare thead td { width: 22%; }
.compare tbody th { font-weight: 500; color: var(--ink); }
.compare td { color: var(--muted); }
.compare .is-highlight { background: var(--tint); color: var(--ink); }
.compare thead th.is-highlight { border-bottom-color: var(--plum); }

/* ---- Steps (a path, not a numbered list) ------------------------------- */
.path { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 32px; position: relative; counter-reset: none; }
.path li { position: relative; padding-top: 28px; border-top: 1px solid var(--ink); }
.path li::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--plum); border-radius: 50%; }
.path h3 { margin-bottom: 10px; }
.path li p { color: var(--muted); font-size: .9375rem; }
@media (max-width: 900px) { .path { grid-template-columns: 1fr; gap: 0; border-left: 1px solid var(--ink); } .path li { border-top: 0; padding: 0 0 32px 28px; } .path li::before { top: 6px; left: -5px; } }

/* ---- FAQ --------------------------------------------------------------- */
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary { cursor: pointer; padding: 22px 36px 22px 0; font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 20px; font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 0 24px; color: var(--muted); }

/* ---- Closing band ------------------------------------------------------ */
.closing__inner { max-width: 760px; }
.closing .lede { margin-top: 18px; }

/* ---- People ------------------------------------------------------------ */
.people { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
.people h3 { margin-top: 16px; }
.people .small { color: var(--muted); margin-top: 4px; }
.people li > p:last-child:not(.small) { margin-top: 12px; color: var(--muted); font-size: .9375rem; }
.people__photo .placeholder { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .people { grid-template-columns: 1fr; } }

/* ---- Forms ------------------------------------------------------------- */
.enquiry > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.enquiry__intro .lede { margin-top: 18px; }
@media (max-width: 900px) { .enquiry > .wrap { grid-template-columns: 1fr; gap: 36px; } }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field--wide { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 500; font-size: .875rem; padding: 0; }
.field__req { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 11px 12px; min-height: 44px; width: 100%; }
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--plum); outline-offset: 1px; border-color: var(--plum); }
.field__error { display: none; color: #8A1F2B; font-size: .8125rem; max-width: none; }
.form--touched .field input:invalid, .form--touched .field select:invalid, .form--touched .field textarea:invalid { border-color: #8A1F2B; }
.form--touched .field:has(:invalid) .field__error { display: block; }
.checks__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 36px; font-weight: 400; font-size: .9375rem; }
.check input { width: 18px; min-height: 18px; height: 18px; accent-color: var(--plum); }
.hp { position: absolute; left: -9999px; }
.form__actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.form__status { font-size: .9375rem; max-width: 48ch; }
.form__status--success { color: #1F5F46; }
.form__status--error { color: #8A1F2B; }
@media (max-width: 600px) { .form__grid { grid-template-columns: 1fr; } .checks__grid { grid-template-columns: 1fr; } }

/* ---- Legacy fallback, blog, prose pages ------------------------------- */
.legacy .narrow > * + * { margin-top: 20px; }
.legacy .caps { margin-top: 32px; }

/* ---- Motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .site-header, .site-footer { display: none; } }
.narrow > h2 + .prose { margin-top: 20px; }

/* ---- Photograph band ---------------------------------------------------- */
.photo--inset .media { max-width: 880px; margin-inline: auto; }
.photo__media img { aspect-ratio: 21 / 9; object-fit: cover; width: 100%; }
.photo__media .placeholder { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .photo__media img, .photo__media .placeholder { aspect-ratio: 4 / 3; } }

/* ==========================================================================
   v2.1 layer: detail, product frames and motion. See DESIGN.md sections 5, 6 and 10.
   Everything here is an enhancement: with no script, or with reduced motion, the page
   is complete and still. Motion only runs under `html.motion` (set in the layout).
   ========================================================================== */
:root {
  --shot: #0F1824;                 /* the Canvas interface's own background, so a frame and its screen are one object */
  --shot-bar: #141F2E;
  --aubergine: #2A2043;            /* the closing band: the one place the brand colour becomes a surface */
  --rule: rgb(23 20 31 / .07);
  --rule-night: rgb(255 255 255 / .08);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Type: a wider scale ------------------------------------------------ */
h1 { font-size: clamp(2.5rem, 5.4vw, 4.375rem); line-height: 1.02; letter-spacing: -0.035em; }
.hero--split h1 { font-size: clamp(2.375rem, 4.1vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; }
h2, .h2 { font-size: clamp(1.875rem, 3.5vw, 2.875rem); letter-spacing: -0.025em; }
html:lang(th) h1, html:lang(th) h2, html:lang(th) .h2 { line-height: 1.3; letter-spacing: 0; }
html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) .h2 { line-height: 1.25; letter-spacing: 0; }
.hero__copy h1 { max-width: 15em; }
.hero .lede { font-size: 1.25rem; }

/* ---- Section marker ----------------------------------------------------- */
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ''; flex: none; width: 6px; height: 6px; background: var(--plum); }
.band--night .eyebrow::before { background: var(--plum-on-night); }
.intro--center .eyebrow { justify-content: center; }

/* ---- Page grid: two guide lines at the edges of the measure, a tick where bands meet ---- */
.band { --band-pad: 88px; --rule-c: var(--rule); --tick-c: rgb(23 20 31 / .3); position: relative; isolation: isolate; padding-block: var(--band-pad); }
.band--tight { --band-pad: 48px; }
.band--roomy { --band-pad: 128px; }
.hero { --band-pad: 96px; padding-block: 96px 88px; }
.band--night, .site-footer { --rule-c: var(--rule-night); --tick-c: rgb(255 255 255 / .34); }
.site-footer { position: relative; isolation: isolate; overflow: hidden; }
.band > .wrap { position: relative; }
@media (min-width: 1360px) {
  .band::before, .site-footer::before { content: ''; position: absolute; z-index: -1; pointer-events: none; inset-block: 0; left: 50%; translate: -50% 0; width: calc(var(--wrap) + var(--gutter) * 2 + 48px);
    background: linear-gradient(var(--rule-c), var(--rule-c)) left / 1px 100% no-repeat, linear-gradient(var(--rule-c), var(--rule-c)) right / 1px 100% no-repeat; }
  .band > .wrap::before, .band > .wrap::after { content: ''; position: absolute; pointer-events: none; top: calc(var(--band-pad) * -1 - 5px); width: 9px; height: 9px;
    background: linear-gradient(var(--tick-c), var(--tick-c)) center / 1px 100% no-repeat, linear-gradient(var(--tick-c), var(--tick-c)) center / 100% 1px no-repeat; }
  .band > .wrap::before { left: -28px; }
  .band > .wrap::after { right: -28px; }
}

/* ---- Night bands: a fine dot field, and the aubergine closing band ------- */
.band--night { background-image: radial-gradient(circle, rgb(255 255 255 / .075) 1px, transparent 1.4px); background-size: 28px 28px; }
.closing.band--night { background-color: var(--aubergine); }
.closing__inner { max-width: 920px; }
.closing h2 { font-size: clamp(2.125rem, 4.8vw, 3.75rem); line-height: 1.04; letter-spacing: -0.032em; max-width: 15em; }
.closing .lede { margin-top: 24px; font-size: 1.25rem; color: #CFC8E2; }
.closing.band--mark::after { opacity: .11; width: clamp(320px, 42vw, 620px); }

/* ---- Buttons and links --------------------------------------------------- */
.btn { gap: 10px; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.btn:active { transform: scale(.98); }
.btn--accent::after, .btn--solid::after { content: '\2192'; display: inline-block; transition: translate .3s var(--ease); }
.btn--accent:hover::after, .btn--solid:hover::after { translate: 4px 0; }
.btn--ghost:hover { background: rgb(23 20 31 / .04); }
.band--night .btn--ghost:hover { background: rgb(255 255 255 / .06); }
.textlink { border-bottom-color: color-mix(in srgb, currentColor 35%, transparent); transition: border-color .2s var(--ease); }
.textlink:hover { border-bottom-color: currentColor; }
.textlink span { display: inline-block; transition: translate .3s var(--ease); }
.textlink:hover span { translate: 4px 0; }

/* ---- Product frame: a screenshot is a window, not a pasted rectangle ------ */
.media:not(.media--framed) img { width: 100%; }
.media--framed img { border: 0; border-radius: 0; background: var(--shot); }
.frame { --ring: rgb(23 20 31 / .16); border-radius: 10px; overflow: hidden; background: var(--shot);
  box-shadow: 0 0 0 1px var(--ring), 0 2px 4px rgb(23 20 31 / .06), 0 18px 36px -14px rgb(23 20 31 / .24), 0 52px 100px -36px rgb(64 44 120 / .38); }
.band--night .frame { --ring: rgb(255 255 255 / .12); box-shadow: 0 0 0 1px var(--ring), 0 44px 90px -30px rgb(0 0 0 / .75); }
.frame__bar { display: flex; align-items: center; gap: 18px; height: 36px; padding: 0 14px; background: var(--shot-bar); border-bottom: 1px solid rgb(255 255 255 / .07); }
.frame__dots { display: flex; gap: 6px; }
.frame__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .17); }
.frame__tag { display: flex; align-items: center; gap: 8px; color: rgb(226 232 240 / .78); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.frame__tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--plum-on-night); }
.frame__screen img { display: block; width: 100%; height: auto; max-height: min(74vh, 660px); object-fit: cover; object-position: left top; }
.split__media .frame__screen img, .explorer .frame__screen img { max-height: 470px; }
.hero--split .frame__screen img { max-height: 540px; }
.media--framed figcaption { margin-top: 16px; }
.media__clip { overflow: hidden; border-radius: 4px; }
.media__clip img { border: 0 !important; border-radius: 0 !important; display: block; }
.placeholder { background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgb(23 20 31 / .028) 11px 12px); }
.band--night .placeholder { background-image: repeating-linear-gradient(135deg, transparent 0 11px, rgb(255 255 255 / .03) 11px 12px); }

/* The hero screen is larger than its column and runs off the page edge. */
@media (min-width: 1100px) {
  .hero--split { overflow-x: clip; }
  .hero--split > .wrap { grid-template-columns: minmax(0, .92fr) minmax(0, 1.22fr); gap: 64px; }
  .hero--split .hero__media { margin-right: -150px; }
  html.motion .hero--split .frame { transform: perspective(1700px) rotateY(-4deg) rotateX(1.2deg); transform-origin: 0 50%; transition: transform .9s var(--ease-expo); }
  html.motion .hero--split .frame:hover { transform: perspective(1700px) rotateY(0deg) rotateX(0deg); }
}

/* ---- Header: translucent, with reading progress -------------------------- */
.site-header { background: color-mix(in srgb, var(--paper) 84%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
.site-header::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--plum); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); pointer-events: none; }
.nav__btn { transition: background-color .2s var(--ease); }
.mega__group a { transition: translate .25s var(--ease); }
.mega__group a:hover { translate: 4px 0; }

/* ---- Lists: rows answer the pointer -------------------------------------- */
.index a::before { content: ''; position: absolute; z-index: -1; inset: 0 -16px; background: var(--tint); opacity: 0; transition: opacity .25s var(--ease); }
.index a:hover::before { opacity: .55; }
.index__title, .index__arrow, .story h3 a, .caps h3 a, .posts h3 a { display: inline-block; transition: translate .3s var(--ease), color .2s var(--ease); }
.index a:hover .index__title { translate: 8px 0; }
.index a:hover .index__arrow { translate: 6px 0; }
.story h3 a:hover, .caps h3 a:hover, .posts h3 a:hover { translate: 4px 0; }
.faq summary { transition: color .2s var(--ease); }
.faq summary:hover { color: var(--plum); }
.faq summary::after { transition: rotate .3s var(--ease), color .2s var(--ease); }
.faq details[open] summary::after { rotate: 180deg; }
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---- Figures -------------------------------------------------------------- */
.figure { font-weight: 500; font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1; letter-spacing: -0.035em; }
.proof__item dd { margin-top: 14px; }
.figure.is-counting { position: relative; color: transparent; }
.figure [data-count] { position: absolute; left: 0; top: 0; white-space: nowrap; }

/* ---- Footer: brand row above the link columns; links never wrap ---------- */
.footer__top { grid-template-columns: 1fr; gap: 48px; }
.footer__cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 48px; }
.footer__cols a { white-space: nowrap; }

/* ---- Diagram flow ---------------------------------------------------------- */
.dg-flow { fill: none; stroke: var(--plum); stroke-width: 2.25; stroke-linecap: round; stroke-dasharray: 16 100; stroke-dashoffset: 16; opacity: 0; }

/* ==========================================================================
   Motion. Only under html.motion.
   ========================================================================== */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes rise-clip { from { opacity: 0; transform: translateY(30px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(-12% -4% -12% -4%); } }
@keyframes frame-in { from { opacity: 0; transform: perspective(1700px) translate3d(70px, 26px, 0) rotateY(-15deg) rotateX(4deg); } }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes flow { from { stroke-dashoffset: 16; } to { stroke-dashoffset: -100; } }
@keyframes mark-drift { from { translate: 0 48px; } to { translate: 0 -48px; } }
@keyframes photo-pan { from { scale: 1.16; translate: 0 -3.5%; } to { scale: 1.03; translate: 0 3.5%; } }

/* Hero entrance: one rehearsed sequence. */
html.motion .hero .eyebrow { animation: rise .7s var(--ease) both; }
html.motion .hero h1 { animation: rise-clip 1s var(--ease-expo) .06s both; }
html.motion .hero .lede { animation: rise .85s var(--ease) .24s both; }
html.motion .hero .actions { animation: rise .85s var(--ease) .36s both; }
html.motion .hero .hero__media { animation: rise 1.1s var(--ease-expo) .42s both; }
@media (min-width: 1100px) {
  html.motion .hero--split .hero__media { animation: none; }
  html.motion .hero--split .frame { animation: frame-in 1.25s var(--ease-expo) .3s backwards; }
}
html.motion .enquiry .enquiry__intro > * { animation: rise .8s var(--ease) both; }
html.motion .enquiry .enquiry__intro > :nth-child(2) { animation-delay: .08s; }
html.motion .enquiry .enquiry__intro > :nth-child(3) { animation-delay: .2s; }

/* Scroll reveals. data-reveal is set by the motion script, and only on content that starts below the fold. */
html.motion [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease), transform .95s var(--ease-expo); transition-delay: calc(var(--i, 0) * 70ms); }
html.motion [data-reveal='media'] { transform: translateY(40px) scale(.975); transition-duration: .9s, 1.15s; }
html.motion [data-reveal].is-in { opacity: 1; transform: none; }
html.motion .diagram-scroll[data-reveal] { opacity: 1; transform: none; }
html.motion .diagram-scroll[data-reveal] .dg-node, html.motion .diagram-scroll[data-reveal] .dg-arrow { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .8s var(--ease-expo); transition-delay: calc(var(--i, 0) * 55ms); }
html.motion .diagram-scroll[data-reveal].is-in .dg-node, html.motion .diagram-scroll[data-reveal].is-in .dg-arrow { opacity: 1; transform: none; }
html.motion .diagram-scroll.is-live .dg-flow { opacity: 1; animation: flow 2.8s linear infinite; animation-delay: calc(var(--i, 0) * 240ms + 600ms); }

/* Steps: the path draws itself, one stage after another. */
@media (min-width: 901px) {
  .path li:nth-child(2) { --p: 1; } .path li:nth-child(3) { --p: 2; } .path li:nth-child(4) { --p: 3; } .path li:nth-child(5) { --p: 4; } .path li:nth-child(6) { --p: 5; }
  html.motion .path li { border-top-color: var(--hairline); }
  html.motion .path li::after { content: ''; position: absolute; top: -1px; left: 0; right: -32px; height: 1px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s var(--ease) calc(var(--p, 0) * 220ms + 120ms); }
  html.motion .path li:last-child::after { right: 0; }
  html.motion .path li::before { z-index: 1; scale: 0; transition: scale .6s var(--ease-expo) calc(var(--p, 0) * 220ms); }
  html.motion .path.is-live li::after { transform: scaleX(1); }
  html.motion .path.is-live li::before { scale: 1; }
}

/* Menus and tabs. */
html.motion .mega:not([hidden]) { animation: mega-in .3s var(--ease) both; }
html.motion .mega:not([hidden]) .mega__group { animation: rise .45s var(--ease) both; }
html.motion .mega:not([hidden]) .mega__group:nth-child(2) { animation-delay: .04s; }
html.motion .mega:not([hidden]) .mega__group:nth-child(3) { animation-delay: .08s; }
html.motion .mega:not([hidden]) .mega__group:nth-child(4) { animation-delay: .12s; }
html.motion .explorer__panel:not([hidden]) .explorer__copy { animation: rise .55s var(--ease) both; }
html.motion .explorer__panel:not([hidden]) .media { animation: rise .8s var(--ease-expo) .06s both; }

/* Scroll-linked drift, where the browser can do it without script. */
@supports (animation-timeline: view()) {
  html.motion .band--mark::after { animation: mark-drift linear both; animation-timeline: view(); }
  html.motion .hero.band--mark::after { animation: none; }
  html.motion .photo__media .media__clip img { animation: photo-pan linear both; animation-timeline: view(); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }