/* ==========================================================================
   tianyuxu.com · site-v4 · Bento board system (24 Oct 2026, fix round 1 on 25 Oct)
   One stylesheet for every page. It declares every font itself (Archivo, Inter,
   JetBrains Mono, self-hosted), so pages no longer need site-v3/fonts.css.
   Mobile first: base = phone (< 700), then tablet (700 to 1099), then laptop (1100+).
   Read site-v4/README.md before using any component.
   ========================================================================== */

/* Self-hosted variable fonts (latin subsets), the same three faces as site-v3/fonts.css */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/archivo-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-var.woff2") format("woff2");
}
/* Condensed Archivo for big numbers: one static instance (width 70%, weight 800) of
   archivo-wdth-var.woff2, which is all .num ever uses (14 KB instead of 90 KB).
   Motion Foundations keeps the full variable file for its own type. */
@font-face {
  font-family: "Archivo Cond";
  src: url("../assets/fonts/archivo-cond-800.woff2") format("woff2");
  font-weight: 800;
  font-stretch: 70%;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --canvas: #EFEEEA;
  --white: #FFFFFF;
  --ink: #0E0F12;
  --ink-2: #16181B;
  --night: #0F1113;
  --yellow: #FFCD00;
  --yellow-hover: #FFD83D;
  --text: #111215;
  --muted: #5B5A55;            /* 6.9:1 on white, 5.9:1 on canvas */
  --line: #8E8D86;             /* 3.3:1 on white: field and chip borders */
  --placeholder: #6B6A64;      /* 5.4:1 on white */
  --on-ink: #FFFFFF;
  --on-ink-muted: rgba(255, 255, 255, .74);
  --on-yellow-muted: #3A3104;
  --error: #B42318;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --cond: "Archivo Cond", "Archivo", "Arial Narrow", Arial, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --maxw: 1320px;
  --pad: 16px;                 /* side gutter */
  --gap: 12px;                 /* gap between tiles */
  --r: 24px;                   /* tile radius (film tiles reuse --r for their ratio, so radii read --tile-r) */
  --tile-r: 24px;
  --band: 22px;                /* vertical padding of a band (half the gap between bands) */
  --nav-h: 60px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --sbw: 0px;                  /* scrollbar width while a sheet locks the page (set by bento.js) */
}
@media (min-width: 700px) {
  :root { --pad: 24px; --gap: 14px; --r: 26px; --tile-r: 26px; --band: 26px; --nav-h: 64px; }
}
@media (min-width: 900px) {
  :root { --pad: 32px; }
}
@media (min-width: 1100px) {
  :root { --pad: 40px; --gap: 16px; --r: 28px; --tile-r: 28px; --band: 30px; }
}
@media (min-width: 1280px) {
  :root { --pad: 60px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 28px);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--text);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main { display: block; overflow-x: clip; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-dark :focus-visible,
[data-night] :focus-visible,
.tile--ink :focus-visible,
.band--night :focus-visible,
.film :focus-visible,
.film-overlay :focus-visible { outline-color: var(--yellow); }
/* Light tiles inside dark surfaces (a yellow or white tile in a night band) take the ink ring again,
   so the ring never disappears into its own surface. Later and at least as specific as the rules above. */
.tile--yellow :focus-visible,
.band--night .tile:not(.tile--ink):not(.tile--photo):not(.film) :focus-visible,
[data-night] .tile:not(.tile--ink):not(.tile--photo):not(.film) :focus-visible { outline-color: var(--ink); }

.wrap { width: min(var(--maxw), 100% - 2 * var(--pad)); margin-inline: auto; }
.sr-only {
  position: absolute !important; 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;
}
.nw { white-space: nowrap; }
.skip-link {
  position: fixed; left: 12px; top: 10px; z-index: 200;
  padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #fff;
  font: 600 15px/1 var(--sans); transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
/* Yellow ring on an ink halo: visible over the light nav and the dark one */
.skip-link:focus { transform: none; outline: 2px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--ink); }
/* Anchor jumps: html's scroll-padding-top is the only offset (16 px under the nav on laptops, 28 px on phones).
   No [id] scroll-margin on top of it: the two used to add up. */

/* ---------- Type ---------- */
.h1 {
  font: 800 clamp(46px, 13.4vw, 60px)/.93 var(--display);
  letter-spacing: -.035em;
}
.band-title {
  font: 800 clamp(31px, 8.6vw, 38px)/1.02 var(--display);
  letter-spacing: -.03em;
}
.tile__title {
  font: 700 21px/1.15 var(--display);
  letter-spacing: -.015em;
}
.lead { font: 400 16px/1.5 var(--sans); color: var(--muted); }
.label { font: 600 14px/1.3 var(--sans); color: var(--muted); letter-spacing: .005em; }
.desc { font: 400 15px/1.55 var(--sans); color: var(--muted); }
.num {
  font-family: var(--cond);
  font-weight: 800;
  font-stretch: 70%;
  font-size: 40px;
  line-height: .95;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
}
.num--words { font-size: 30px; line-height: 1; }
@media (min-width: 700px) {
  .h1 { font-size: clamp(54px, 7.2vw, 72px); }
  .band-title { font-size: clamp(38px, 5vw, 48px); }
  .tile__title { font-size: 23px; }
  .lead { font-size: 17px; }
  .label { font-size: 13.5px; }
  .num { font-size: 44px; }
  .num--words { font-size: 32px; }
}
@media (min-width: 1100px) {
  .h1 { font-size: clamp(64px, 5.85vw, 84px); }
  .band-title { font-size: clamp(44px, 3.9vw, 56px); }
  .tile__title { font-size: clamp(22px, 1.8vw, 26px); }
  .label { font-size: 13px; }
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px;
  font: 600 15px/1.1 var(--sans); letter-spacing: -.005em; white-space: nowrap;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--yellow, .btn--accent { background: var(--yellow); color: var(--ink); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--white { background: #fff; color: var(--ink); }
.btn--glass { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn--lg { min-height: 58px; padding: 0 30px; font-size: 17px; }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn--yellow:hover, .btn--accent:hover { background: var(--yellow-hover); }
  .btn--ink:hover { background: #24262B; }
  .btn--glass:hover { background: rgba(255, 255, 255, .2); }
  .btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
}
.btn:active { transform: scale(.98); }

.link {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 15px/1.2 var(--sans);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: currentColor;
}
.link--soft { text-decoration-color: rgba(255, 255, 255, .5); }
@media (hover: hover) { .link:hover { text-decoration-color: var(--yellow); } }

/* Icon controls (pause, previous, next): 44 px hit area */
.ctrl {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(14, 15, 18, .06); color: var(--ink);
  transition: background-color .2s var(--ease), opacity .2s var(--ease);
}
.ctrl svg { width: 16px; height: 16px; fill: currentColor; }
.ctrl[disabled] { opacity: .35; cursor: default; }
.tile--ink .ctrl, .band--night .ctrl, .film .ctrl { background: rgba(255, 255, 255, .12); color: #fff; }
.tile--yellow .ctrl { background: rgba(14, 15, 18, .1); }
@media (hover: hover) {
  .ctrl:not([disabled]):hover { background: rgba(14, 15, 18, .12); }
  .tile--ink .ctrl:not([disabled]):hover, .band--night .ctrl:not([disabled]):hover, .film .ctrl:hover { background: rgba(255, 255, 255, .22); }
}

/* Switch (Pause motion) */
.switch {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px 0 10px;
  border: 0; border-radius: 999px; background: rgba(14, 15, 18, .06); color: var(--ink);
  font: 600 14px/1 var(--sans);
}
.switch__track {
  position: relative; flex: none; width: 36px; height: 22px; border-radius: 999px;
  background: rgba(14, 15, 18, .22); transition: background-color .2s var(--ease);
}
.switch__track::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s var(--ease);
}
.switch[aria-checked="true"] .switch__track { background: var(--ink); }
.switch[aria-checked="true"] .switch__track::after { transform: translateX(14px); }
.band--night .switch, .on-dark .switch { background: rgba(255, 255, 255, .1); color: #fff; }
.band--night .switch__track, .on-dark .switch__track { background: rgba(255, 255, 255, .28); }
.band--night .switch[aria-checked="true"] .switch__track, .on-dark .switch[aria-checked="true"] .switch__track { background: var(--yellow); }
.band--night .switch[aria-checked="true"] .switch__track::after { background: var(--ink); }

/* ---------- Nav (glass, turns dark over night bands) ---------- */
.nav { position: sticky; top: 0; z-index: 60; }
.nav__bar {
  display: flex; align-items: center; gap: 8px;
  height: var(--nav-h); padding: 0 8px 0 var(--pad);
  background: rgba(239, 238, 234, .84);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 1px 0 rgba(14, 15, 18, .07);
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav__brand { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 44px; margin-right: auto; line-height: 1; }
.nav__name { font: 800 18px/1 var(--display); letter-spacing: -.01em; }
.nav__role { font: 600 11px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: #4A4945; } /* AA on the glass bar over dark tiles too */
.nav__links { display: none; }
.nav__cta { min-height: 44px; padding: 0 15px; font-size: 14px; }
.nav__menu {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 14px; background: rgba(14, 15, 18, .07); color: var(--ink);
}
.nav__menu span, .nav__menu span::before, .nav__menu span::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
}
.nav__menu span { position: relative; }
.nav__menu span::before, .nav__menu span::after { content: ""; position: absolute; left: 0; }
.nav__menu span::before { top: -6px; }
.nav__menu span::after { top: 6px; }
.nav.is-dark .nav__bar { background: rgba(22, 24, 27, .78); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.nav.is-dark .nav__role { color: rgba(255, 255, 255, .7); }
.nav.is-dark .nav__menu { background: rgba(255, 255, 255, .12); color: #fff; }
.nav.is-dark :focus-visible { outline-color: var(--yellow); }

@media (min-width: 700px) {
  .nav { padding-top: 12px; }
  .nav::before {
    content: ""; position: absolute; inset: 0 0 -14px; z-index: -1; pointer-events: none;
    background: linear-gradient(var(--canvas) 0 50%, rgba(239, 238, 234, 0));
    transition: opacity .3s var(--ease);
  }
  .nav.is-dark::before { background: linear-gradient(var(--night) 0 50%, rgba(15, 17, 19, 0)); }
  .nav__bar {
    width: min(var(--maxw), 100% - 2 * var(--pad)); margin-inline: auto;
    padding: 0 10px 0 22px; border-radius: 20px; gap: 10px;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 1px 0 rgba(14, 15, 18, .04), 0 10px 30px -12px rgba(14, 15, 18, .16);
  }
  .nav__cta { padding: 0 18px; }
}
@media (min-width: 1100px) {
  .nav__bar { gap: 24px; }
  .nav__brand { margin-right: 0; }
  .nav__links { display: flex; gap: 22px; margin-left: auto; }
  .nav__links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font: 500 15px/1 var(--sans); }
  .nav__links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; border-radius: 2px;
    background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
  }
  .nav__links a.is-active::after, .nav__links a[aria-current="page"]::after { transform: none; }
  .nav__cta { margin-left: 4px; }
  .nav__menu { display: none; }
}
@media (min-width: 1100px) and (hover: hover) {
  .nav__links a:hover::after { transform: none; }
}

/* ---------- Bands and the board grid ---------- */
.band { padding-block: var(--band); }
.band--first { padding-top: 12px; }
.band--night { background: var(--night); color: #fff; padding-block: 56px 60px; margin-block: var(--band); }
.band__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px 40px; margin: 0 2px 18px;
}
.band__head .lead { max-width: 470px; }
.band--night .band__head .lead { color: rgba(255, 255, 255, .72); }
@media (min-width: 700px) {
  .band--night { padding-block: 72px 76px; }
  .band__head { margin: 0 4px 22px; }
}
@media (min-width: 1100px) {
  .band--night { padding-block: 84px 88px; }
  .band__head { margin: 0 6px 26px; }
}

/* 12-column grid. Span classes: p-* (phone), t-* (700+), d-* (1100+). Default: full width. */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); grid-auto-flow: row dense; }
.grid > * { grid-column: span 12; min-width: 0; }
.grid > .p-6 { grid-column: span 6; }
@media (min-width: 700px) {
  .grid > .t-3 { grid-column: span 3; } .grid > .t-4 { grid-column: span 4; }
  .grid > .t-5 { grid-column: span 5; } .grid > .t-6 { grid-column: span 6; }
  .grid > .t-7 { grid-column: span 7; } .grid > .t-8 { grid-column: span 8; }
  .grid > .t-12 { grid-column: span 12; }
  .grid > .t-row-2 { grid-row: span 2; }
}
@media (min-width: 900px) {
  .grid > .tw-4 { grid-column: span 4; } .grid > .tw-5 { grid-column: span 5; }
  .grid > .tw-6 { grid-column: span 6; } .grid > .tw-7 { grid-column: span 7; }
  .grid > .tw-8 { grid-column: span 8; } .grid > .tw-12 { grid-column: span 12; }
}
@media (min-width: 1100px) {
  .grid > .d-2 { grid-column: span 2; } .grid > .d-3 { grid-column: span 3; }
  .grid > .d-4 { grid-column: span 4; } .grid > .d-5 { grid-column: span 5; }
  .grid > .d-6 { grid-column: span 6; } .grid > .d-7 { grid-column: span 7; }
  .grid > .d-8 { grid-column: span 8; } .grid > .d-9 { grid-column: span 9; }
  .grid > .d-12 { grid-column: span 12; }
  .grid > .d-row-1 { grid-row: auto; }
  .grid > .d-row-2 { grid-row: span 2; }
}

/* ---------- Tiles (five surfaces: white, ink, yellow, photo, film) ---------- */
.tile {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--tile-r); overflow: hidden; isolation: isolate;
  background: var(--white); color: var(--text);
}
.tile--ink { background: var(--ink); color: var(--on-ink); }
.tile--yellow { background: var(--yellow); color: var(--ink); }
.tile--photo { background: #1A1B1E; color: #fff; }
.tile--canvas { background: transparent; }
.tile--ink .label, .tile--ink .desc, .tile--ink .lead { color: var(--on-ink-muted); }
.tile--yellow .label, .tile--yellow .desc, .tile--yellow .lead { color: var(--on-yellow-muted); }
.tile__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; padding: 22px 20px 22px; }
.tile__img { width: 100%; height: auto; flex: none; object-fit: cover; }
.tile__img--whole { object-fit: contain; }
.tile__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; }
.tile__cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font: 600 15px/1.2 var(--sans); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (min-width: 700px) { .tile__body { padding: 26px 26px 26px; } }
@media (min-width: 1100px) { .tile__body { padding: 28px 30px 30px; } }

/* Photo tile: the image covers the tile; set the focal point with --focus (x y). Never put text on it. */
.tile--photo > img, .photo-fill {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focus, 50% 30%);
}

/* Whole-tile link: either the tile is an <a class="tile tile--link">, or a link inside it
   carries .stretch so its click area covers the tile. Other controls in the tile sit above it. */
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tile .above { position: relative; z-index: 2; }
.tile--link { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tile--link:focus-visible, .tile--link:has(.stretch:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
/* The ring sits outside the tile, so on a night band it is yellow whatever the tile's own surface */
.band--night .tile--link:focus-visible, .band--night .tile--link:has(.stretch:focus-visible),
[data-night] .tile--link:focus-visible, [data-night] .tile--link:has(.stretch:focus-visible) { outline-color: var(--yellow); }
.stretch:focus-visible { outline: none; }
.tile--link .zoom { transition: transform .7s var(--ease); }
@media (hover: hover) {
  .tile--link:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -24px rgba(14, 15, 18, .45); }
  .tile--link:hover .zoom { transform: scale(1.025); }
  .tile--link:hover .tile__cta { text-decoration-color: var(--yellow); }
}

/* ---------- Hero board pieces (Home first view; reusable as a page board) ---------- */
.hero-copy { justify-content: space-between; gap: 22px; padding: 26px 20px 22px; }
.hero-copy .h1 { color: #fff; }
.hero-copy__lead { margin-top: 14px; max-width: 34em; font: 400 16px/1.5 var(--sans); color: var(--on-ink-muted); }
.hero-copy__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 10px; }
.hero-copy__ctas .link { margin-left: 4px; }
@media (max-width: 699.98px) {
  .hero-copy__ctas { gap: 8px; }
  .hero-copy__ctas .btn { padding: 0 16px; font-size: 14.5px; }
}
.photo-tile { min-height: 0; aspect-ratio: 4 / 3; }
@media (min-width: 700px) {
  .hero-copy { padding: 32px 32px 30px; }
  .hero-copy__lead { font-size: 17px; margin-top: 18px; }
  .photo-tile { aspect-ratio: auto; min-height: 420px; }
}
@media (min-width: 1100px) {
  .hero-copy { padding: 38px 40px 36px; }
}
/* A background film puts its 44 px pause button 14 px from the tile's bottom-right corner. Keep the
   last call to action 8 px clear of it: 14 + 44 + 8 = 66 px from the tile edge, minus the tile padding.
   The space is reserved from the first paint, so nothing moves when the button appears. */
.film--bg .hero-copy__ctas > :last-child { margin-right: 46px; }
@media (min-width: 700px) { .film--bg .hero-copy__ctas > :last-child { margin-right: 34px; } }
@media (min-width: 1100px) { .film--bg .hero-copy__ctas > :last-child { margin-right: 26px; } }

/* Credentials tile */
.creds { justify-content: center; padding: 18px 22px; }
.creds__list { display: grid; }
.creds__list li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid rgba(14, 15, 18, .16); }
.creds__list li:first-child { border-top: 0; padding-top: 4px; }
.creds__list li:last-child { padding-bottom: 4px; }
.creds__list strong { font: 700 19px/1.15 var(--display); letter-spacing: -.012em; }
.creds__list span { font: 500 14px/1.35 var(--sans); color: var(--on-yellow-muted); }
.tile--ink .creds__list li { border-color: rgba(255, 255, 255, .16); }
.tile--ink .creds__list span { color: var(--on-ink-muted); }
@media (min-width: 380px) and (max-width: 699.98px) {
  .creds { padding: 16px 14px; }
  .creds__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
  .creds__list li, .creds__list li:first-child, .creds__list li:last-child { padding: 2px 0 2px 12px; border-top: 0; border-left: 1px solid rgba(14, 15, 18, .16); align-content: start; }
  .creds__list li:first-child { padding-left: 0; border-left: 0; }
  .creds__list strong { font-size: 16px; line-height: 1.18; }
  .creds__list span { font-size: 14px; }
}
@media (min-width: 1100px) {
  .creds { padding: 22px 26px; }
  .creds__list strong { font-size: 20px; }
}

/* ---------- Logos ---------- */
/* Each logo carries --h (its optical height at the standard size, see README). */
.logo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 14px; align-items: center; }
.logo-grid li { display: flex; align-items: center; justify-content: center; min-height: 40px; }
.logo-grid img, .logo {
  width: auto; height: calc(var(--h, 20px) * var(--logo-scale, .82)); max-width: 100%;
  object-fit: contain; filter: brightness(0); opacity: .84;
}
.logo-grid .logo-more { font: 600 14px/1.2 var(--sans); color: var(--muted); text-align: center; }
.tile--ink .logo-grid img, .tile--ink .logo, .band--night .logo-grid img, .on-dark .logo { filter: brightness(0) invert(1); opacity: .9; }
.tile--yellow .logo-grid img, .tile--yellow .logo { opacity: .9; }
@media (min-width: 700px) {
  .logo-grid { gap: 18px 22px; }
  .logo-grid li { min-height: 44px; }
  .logo-grid img, .logo { --logo-scale: .92; }
}
@media (min-width: 1100px) {
  .logo-grid img, .logo { --logo-scale: 1; }
}
.logos-tile { gap: 14px; padding: 20px 20px 18px; justify-content: space-between; }
.logos-tile .logo-grid { flex: 1; align-content: center; }
@media (min-width: 1100px) { .logos-tile .logo-grid { gap: 22px 26px; } .logos-tile .logo-grid img { --logo-scale: 1.18; } }
@media (min-width: 700px) { .logos-tile { padding: 24px 26px 22px; } }

/* ---------- Logo marquee: every client logo, rolling slowly in three rows ----------
   Drag, swipe or scroll sideways to browse; the cursor nudges the rows; pause button for WCAG 2.2.2.
   <div class="tile logo-marquee" data-marquee> .logo-marquee__head + .logo-marquee__rows > .logo-marquee__row > ul.logo-marquee__track </div> */
.logo-marquee { gap: 14px; padding: 20px 0 18px; }
.logo-marquee__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding-inline: 20px; } /* room for the pause button before bento.js shows it: no shift */
.logo-marquee__head .label { margin: 0; }
.logo-marquee__rows {
  flex: 1; display: grid; align-content: center; gap: 16px; overflow: hidden; border-radius: 14px;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
/* Keyboard focus: an ink ring inside the white tile (yellow on an ink tile). The edge fade sits on each
   row, not on this box, so the ring is never faded out with the logos. */
.logo-marquee__rows:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.tile--ink .logo-marquee__rows:focus-visible { outline-color: var(--yellow); }
.logo-marquee__rows.is-dragging { cursor: grabbing; }
.logo-marquee__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logo-marquee__track { display: flex; align-items: center; gap: 34px; width: max-content; padding-inline: 17px; will-change: transform; }
.logo-marquee__track li { flex: none; display: flex; align-items: center; min-height: 40px; }
.logo-marquee__track img {
  width: auto; height: calc(var(--h, 20px) * var(--logo-scale, .9)); max-width: none;
  filter: brightness(0); opacity: .84; pointer-events: none; -webkit-user-drag: none;
}
.tile--ink .logo-marquee__track img { filter: brightness(0) invert(1); opacity: .9; }
html:not(.js) .logo-marquee__row { overflow-x: auto; scrollbar-width: none; }
@media (min-width: 700px) { .logo-marquee { padding: 24px 0 22px; } .logo-marquee__head { padding-inline: 26px; } .logo-marquee__rows { gap: 20px; } }
@media (min-width: 1100px) { .logo-marquee__track { gap: 40px; } .logo-marquee__track img { --logo-scale: 1.04; } }

/* Logo cycle tile (all 24 logos, 8 at a time) */
.logo-cycle-tile { padding: 22px 20px 20px; gap: 16px; }
.logo-cycle-tile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.logo-cycle-tile__head .tile__title { max-width: 26ch; }
.logo-cycle-tile__head .label { margin-top: 6px; }
.logo-cycle-tile__ctrls { display: flex; align-items: center; gap: 8px; flex: none; }
/* A Pause motion switch in these controls is for laptops (where the menu, and its switch, is folded away).
   On phones it would squeeze the tile title, and the menu already carries the switch. */
@media (max-width: 699.98px) { .logo-cycle-tile__ctrls .switch { display: none; } }
.logo-cycle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.logo-cycle > li:nth-child(n + 9):not(.logo-more) { display: none; }
.logo-cycle > li { transition: opacity .45s var(--ease); }
.logo-cycle > li.is-swapping { opacity: 0; }
.logo-cycle .logo-more { display: flex; align-items: center; justify-content: center; }
.logo-more-btn { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(14, 15, 18, .07); font: 600 14px/1 var(--sans); }
@media (min-width: 700px) {
  .logo-cycle-tile { padding: 26px 28px 24px; }
  .logo-cycle { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .logo-cycle-tile { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: center; gap: 28px; padding: 26px 30px; }
  .logo-cycle-tile__head { flex-direction: column; gap: 14px; }
  .logo-cycle { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 14px 18px; }
}

/* ---------- Stats with count-up ---------- */
.stats-tile { padding: 24px 20px; justify-content: center; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
@media (min-width: 700px) and (max-width: 899.98px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat dd { margin-top: 8px; font: 500 14px/1.35 var(--sans); color: var(--on-yellow-muted); }
.stars { display: inline-block; height: .42em; width: auto; margin-left: .22em; vertical-align: .16em; fill: currentColor; } /* review stars beside a rating number */
.stat__note { display: block; margin-top: 4px; font-size: 14px; opacity: .9; }
.tile--ink .stat dd { color: var(--on-ink-muted); }
.count { display: inline-block; text-align: left; }
@media (min-width: 700px) { .stats-tile { padding: 30px 30px; } .stats { gap: 28px 26px; } .stat dd { font-size: 14.5px; } }
@media (min-width: 1100px) { .stats-tile { padding: 32px 34px; } }

/* ---------- Offer tiles (Work with Tianyu: train, build, create) ---------- */
.offer__media { display: flex; flex-direction: column; }
.offer__media img { width: 100%; height: auto; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; padding: 20px 20px 4px; }
.facts dt { color: var(--yellow); }
.facts dd { margin-top: 6px; font: 500 14px/1.35 var(--sans); color: var(--on-ink-muted); }
.facts .num { font-size: 34px; }
.offer__notes { display: grid; gap: 6px; margin-top: 4px; }
.offer__notes p { font: 500 15px/1.45 var(--sans); color: #fff; }
.offer__notes p + p { color: var(--on-ink-muted); font-weight: 500; font-size: 14px; }
/* Side offers (Build, Create): the image sits on top, whole at 16:9 at every width (the storyboard grid is never sliced). */
.offer--side .offer__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 700px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 24px 26px 6px; }
  .facts .num { font-size: 36px; }
}
@media (min-width: 900px) {
  .offer--train { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .offer--train .offer__media { padding: 0 0 24px; }
  .offer--train .facts { padding: 24px 26px 0; gap: 16px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer--train .tile__body { padding: 30px 30px 28px; }
}
@media (min-width: 1100px) {
  .offer--train .offer__media { padding: 0 0 26px; }
  .offer--train .facts { padding: 26px 30px 0; gap: 16px 18px; }
}
@media (min-width: 1280px) {
  .offer--train .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .offer--train .tile__body { padding: 34px 36px 32px; }
  .facts .num { font-size: 38px; }
}

/* ---------- Film tiles ---------- */
/* <figure class="film" data-film data-vimeo="ID" style="--r: 1.7778"> ... see README */
.film {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--tile-r); overflow: hidden; isolation: isolate;
  background: var(--ink-2); color: #fff;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.film__media { position: relative; flex: none; aspect-ratio: var(--r, 1.7778); overflow: hidden; background: #0B0C0E; }
.film__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__frame {
  position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;
  transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
  transition: opacity .7s var(--ease);
}
.film__frame iframe, .film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film__frame video { object-fit: cover; }
.film.is-live .film__frame { opacity: 1; }
.film__cap { display: flex; align-items: center; gap: 8px; flex: 1; min-height: 66px; padding: 10px 10px 10px 18px; }
.film__link { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; color: inherit; }
.film__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.film__link:focus-visible { outline: none; }
.film__link:focus-visible::after { outline: 3px solid var(--yellow); outline-offset: -3px; }
.film__title { font: 650 15px/1.28 var(--sans); letter-spacing: -.005em; }
.film__tag { font: 500 14px/1.3 var(--sans); color: rgba(255, 255, 255, .7); }
.film__ctrl { z-index: 4; }
/* The pause button keeps its place in the caption strip from the start and is only invisible until
   the film plays, so captions never re-wrap when it appears (no layout shift). */
.film__ctrl.is-idle { visibility: hidden; }
.film__ctrl .i-play { display: none; }
.film.is-user-paused .film__ctrl .i-play { display: block; }
.film.is-user-paused .film__ctrl .i-pause { display: none; }
.film__glyph {
  display: none; place-items: center; flex: none; width: 36px; height: 36px; margin-right: 4px;
  border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink);
}
.film__glyph svg { width: 13px; height: 13px; margin-left: 2px; fill: currentColor; }
html:not(.js) .film__glyph, html.motion-off .film__glyph, .film.is-failed .film__glyph { display: grid; }
/* .film--overlay-cap: the film fills the whole tile and the caption sits over it, shown on hover, focus or pause and before the film plays. */
.film--overlay-cap { display: grid; align-content: center; background: #0B0C0E; } /* a taller neighbour leaves a dark band above and below, never a crop */
.film--overlay-cap > .film__media, .film--overlay-cap > .film__cap { grid-area: 1 / 1; }
.film--overlay-cap > .film__cap {
  align-self: end; z-index: 2; min-height: 0; padding: 56px 12px 12px 20px;
  background: linear-gradient(to top, rgba(11, 12, 14, .9), rgba(11, 12, 14, .55) 55%, rgba(11, 12, 14, 0));
  opacity: 0; transition: opacity .3s var(--ease);
}
.film--overlay-cap:hover > .film__cap, .film--overlay-cap:focus-within > .film__cap,
.film--overlay-cap.is-user-paused > .film__cap, .film--overlay-cap:not(.is-live) > .film__cap { opacity: 1; }
html:not(.js) .film__ctrl, html.motion-off .film__ctrl { display: none !important; }
.film.is-failed .film__ctrl.is-idle { display: none; } /* a film that could not start: the play glyph takes the button's place */
@media (min-width: 1100px) {
  .film__cap { min-height: 70px; padding: 12px 12px 12px 20px; }
  .film__tag { font-size: 13px; }
}
@media (hover: hover) {
  .film:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .7); }
}

/* Films board: wide films on a 12-column grid (first two large), the rest as a justified row */
.films { display: grid; gap: var(--gap); }
.films__wide { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.films__wide > .film { grid-column: span 4; }
.films__wide > .film:nth-child(-n + 2) { grid-column: span 6; }
.films__wide:has(> .film:nth-child(6)) > .film:nth-child(n + 3) { grid-column: span 3; } /* six films: two large, then four */
.films__row { display: flex; gap: var(--gap); }
.films__row > .film { flex: var(--r) 1 0; min-width: 0; }

/* Rails (phone films, tablet mixed films): horizontal snap rows, no CSS smooth scroll */
.rail-ctrls { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 10px; }
/* No carousel counters (Tianyu's minimalism rule): Previous and Next only. Old markup with a counter stays hidden. */
.rail-ctrls__count, .quote-tile__count { display: none; }
@media (max-width: 1099.98px) {
  .films__row {
    --rail-h: min(300px, 76vw);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
  }
  .films__row::-webkit-scrollbar { display: none; }
  .films__row > .film { flex: none; width: calc(var(--rail-h) * var(--r)); scroll-snap-align: start; }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  .films__row { --rail-h: 340px; }
}
@media (max-width: 699.98px) {
  .films__wide {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
  }
  .films__wide::-webkit-scrollbar { display: none; }
  .films__wide > .film { flex: none; width: min(calc(100vw - 2 * var(--pad) - 44px), 420px); scroll-snap-align: start; }
}
@media (min-width: 1100px) {
  .rail-ctrls[data-rail-for] { display: none; }
}

/* ---------- Film overlay (full screen with sound) ---------- */
.film-overlay {
  position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column;
  background: rgba(8, 9, 11, .97); color: #fff;
  opacity: 0; transition: opacity .3s var(--ease);
}
.film-overlay.is-open { opacity: 1; }
.ov-guard { position: fixed; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; outline: none; }
.film-overlay__stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px 12px 4px; }
.film-overlay__frame {
  position: relative; width: min(100%, calc((100dvh - 150px) * var(--r, 1.7778)));
  aspect-ratio: var(--r, 1.7778); max-height: 100%; background: #000; border-radius: 14px; overflow: hidden;
}
.film-overlay__frame iframe, .film-overlay__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.film-overlay__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
  padding: 10px max(14px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
}
.film-overlay__meta { min-width: 0; flex: 1 1 260px; }
.film-overlay__title { font: 700 18px/1.25 var(--display); letter-spacing: -.01em; }
.film-overlay__tag { margin-top: 2px; font: 500 14px/1.3 var(--sans); color: rgba(255, 255, 255, .7); }
.film-overlay__ctrls { display: flex; align-items: center; gap: 8px; }
.ov-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: 600 14px/1 var(--sans);
}
.ov-btn--close { background: #fff; color: var(--ink); }
@media (hover: hover) { .ov-btn:hover { background: rgba(255, 255, 255, .22); } .ov-btn--close:hover { background: var(--yellow); } }
@media (min-width: 700px) {
  .film-overlay__stage { padding: 28px 28px 6px; }
  .film-overlay__bar { padding: 12px 28px 22px; }
  .film-overlay__title { font-size: 20px; }
}

/* ---------- Sheets (glass; menu and brief) ---------- */
.sheet { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.sheet::before {
  content: ""; position: absolute; inset: 0; background: rgba(14, 15, 18, .42);
  opacity: 0; transition: opacity .3s var(--ease);
}
.sheet.is-open::before { opacity: 1; }
.sheet__panel {
  position: relative; width: 100%; max-height: calc(100dvh - 10px); overflow: auto; overscroll-behavior: contain;
  padding: 10px 16px calc(22px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: rgba(250, 250, 247, .9);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 -12px 50px rgba(14, 15, 18, .22);
  transform: translateY(28px); opacity: 0;
  transition: transform .4s var(--ease-out), opacity .3s var(--ease);
}
.sheet.is-open .sheet__panel { transform: none; opacity: 1; }
.sheet__head {
  position: sticky; top: -10px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -10px -16px 6px; padding: 12px 16px 10px;
  background: linear-gradient(rgba(250, 250, 247, .96) 70%, rgba(250, 250, 247, 0));
}
.sheet__title { font: 700 17px/1.2 var(--display); letter-spacing: -.01em; }
.sheet__done { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 15px/1 var(--sans); }
@media (min-width: 700px) {
  .sheet { align-items: center; padding: 24px; }
  .sheet__panel { width: min(640px, 100%); max-height: calc(100dvh - 48px); border-radius: 28px; padding: 14px 28px 28px; transform: translateY(16px) scale(.985); }
  .sheet__head { margin: -14px -28px 8px; padding: 16px 28px 12px; top: -14px; }
}
html.is-locked, html.is-locked body { overflow: hidden; }
html.is-locked body { padding-right: var(--sbw); }

/* Menu sheet */
.menu { display: grid; padding: 4px 0 8px; }
.menu a {
  display: flex; align-items: center; min-height: 52px; padding: 0 4px;
  font: 700 22px/1.1 var(--display); letter-spacing: -.012em; border-bottom: 1px solid rgba(14, 15, 18, .08);
}
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; text-decoration-color: var(--yellow); }
.menu--small { display: flex; flex-wrap: wrap; gap: 0 18px; padding: 10px 0 14px; }
.menu--small a { min-height: 44px; padding: 0 2px; border: 0; font: 500 15px/1 var(--sans); color: var(--muted); }
.menu-sheet__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }

/* ---------- Brief (two-step inquiry form) ---------- */
.brief-tile { padding: 22px 18px 22px; }
.brief { container-type: inline-size; display: flex; flex-direction: column; gap: 16px; }
.brief__head { display: flex; align-items: center; gap: 12px; }
.brief__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 56% 16%; background: #222; }
.brief__title { font: 700 23px/1.1 var(--display); letter-spacing: -.015em; }
.brief__title:focus, .thanks__title:focus { outline: none; }
.brief__note { margin-top: 3px; font: 500 14px/1.35 var(--sans); color: var(--muted); }
.brief__form { display: flex; flex-direction: column; gap: 14px; }
.brief__step { display: flex; flex-direction: column; gap: 14px; }
.inquire__form { position: relative; }
.brief__legend, .field__label { display: block; margin: 0 0 8px; font: 600 14px/1.25 var(--sans); color: var(--text); }
.brief__legend { padding-right: 96px; }
.brief__stepnum { position: absolute; right: 0; top: 0; z-index: 1; font: 600 14px/1.25 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
html:not(.js) .brief__legend { padding-right: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; } /* chips size to their label and fill each row, so no label ever wraps */
.chips > .chip { flex: 1 1 auto; }
.chips > .chip > span { white-space: nowrap; }
.chip { position: relative; display: flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: flex; align-items: center; width: 100%; min-height: 46px; padding: 7px 12px;
  border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line);
  font: 500 14px/1.25 var(--sans); color: var(--text);
  transition: background-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.chip input:checked + span { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .chip input:not(:checked):hover + span { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.brief__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.input {
  display: block; width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 14px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--line);
  font: 400 16px/1.4 var(--sans); color: var(--text); -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: var(--placeholder); opacity: 1; }
.input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--error); }
textarea.input { min-height: 116px; resize: vertical; }
.brief__actions { display: flex; gap: 10px; }
.brief__actions .btn--yellow { flex: 1; }
.brief__msg { font: 500 14px/1.4 var(--sans); color: var(--error); }
/* Empty, the message stays rendered (but takes no space), so screen readers announce it when it fills */
.brief__msg:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-status { font: 500 14px/1.4 var(--sans); color: var(--error); }
.brief .btn--yellow { box-shadow: inset 0 0 0 1.5px rgba(14, 15, 18, .08); }
.brief-placeholder { flex: 1; }
.brief.is-flash { animation: brief-flash 1.1s var(--ease); }
@keyframes brief-flash { 0% { box-shadow: 0 0 0 0 rgba(255, 205, 0, .9); } 100% { box-shadow: 0 0 0 18px rgba(255, 205, 0, 0); } }
@container (min-width: 720px) {
  .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 300px) {
  .brief__row { grid-template-columns: 1fr; }
}
html.js .brief__form[data-step="1"] .brief__step--2,
html.js .brief__form[data-step="2"] .brief__step--1 { display: none; }
html:not(.js) .brief__next, html:not(.js) .brief__back, html:not(.js) .brief__stepnum { display: none; }
.sheet .brief { gap: 18px; }
@media (min-width: 700px) {
  .brief-tile { padding: 26px 26px 26px; }
}
@media (min-width: 1100px) {
  .brief-tile { padding: 24px 24px 24px; }
  .brief__field-label, .field__label, .brief__legend { font-size: 13.5px; }
}

/* Thank-you card (text is the live site's, set by bento.js) */
.thanks { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 6px 0 4px; }
.thanks__label { font: 600 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.thanks__title { font: 700 26px/1.1 var(--display); letter-spacing: -.015em; }
.thanks p { color: var(--muted); }
.thanks .btn { margin-top: 6px; }

/* ---------- Floating pill (phone only): ink, bottom right ---------- */
.pill {
  position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 70;
  display: inline-flex; align-items: center; justify-content: center; min-width: 170px; min-height: 52px; padding: 0 22px;
  border-radius: 999px; background: var(--ink); color: #fff; font: 600 15px/1 var(--sans);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 34px -10px rgba(14, 15, 18, .5);
  transform: translateY(0); opacity: 1;
  transition: transform .35s var(--ease), opacity .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.pill.is-on-dark { background: var(--yellow); color: var(--ink); }
.pill.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
html:not(.js) .pill { display: none; }
@media (min-width: 700px) { .pill { display: none; } }

/* ---------- Quote tile (testimonials) ---------- */
.quote-tile { padding: 22px 0 18px; gap: 14px; }
.quote-tile__head { padding: 0 20px; }
.quote-tile__head .label { margin-top: 6px; }
.quotes {
  display: flex; flex: 1; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.quotes::-webkit-scrollbar { display: none; }
.quotes:focus-visible { outline-offset: -3px; }
.quote { flex: 0 0 100%; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 4px 20px 2px; scroll-snap-align: start; }
.quote blockquote p { font: 700 21px/1.24 var(--display); letter-spacing: -.015em; }
.quote blockquote p::before { content: "\201C"; display: block; height: .5em; margin-bottom: 6px; font: 800 1.9em/1 var(--display); color: var(--yellow); }
.quote figcaption { display: flex; align-items: center; gap: 14px; }
.quote__logo { flex: none; display: grid; place-items: center; width: 64px; height: 44px; }
.quote__logo img { --logo-scale: .9; }
.quote__who { display: grid; gap: 2px; font: 500 14px/1.35 var(--sans); color: var(--on-ink-muted); }
.quote__who strong { font: 600 15px/1.3 var(--sans); color: #fff; }
.quote-tile__ctrls { display: flex; align-items: center; gap: 6px; padding: 0 16px 0 20px; }
.progress { position: relative; flex: 1; height: 3px; margin-left: 10px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.progress__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 10%; border-radius: 3px; background: var(--yellow); transition: transform .3s var(--ease), width .3s var(--ease); }
@media (min-width: 700px) {
  .quote-tile { padding: 28px 0 22px; }
  .quote-tile__head, .quote { padding-inline: 30px; }
  .quote-tile__ctrls { padding-inline: 26px 30px; }
  .quote blockquote p { font-size: clamp(24px, 2.3vw, 31px); }
}

/* ---------- Learn tiles ---------- */
/* .grid--rail-phone: a grid of tiles that becomes a swipe rail below 700 px (add data-rail + an id, and rail controls) */
@media (max-width: 699.98px) {
  .grid--rail-phone {
    display: flex; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
  }
  .grid--rail-phone::-webkit-scrollbar { display: none; }
  .grid--rail-phone > * { flex: none; width: min(calc(100vw - 2 * var(--pad) - 44px), 380px); scroll-snap-align: start; }
}
.rail-ctrls--light .ctrl { background: rgba(14, 15, 18, .07); color: var(--ink); }
.covers { display: flex; align-items: flex-end; gap: 10px; padding: 22px 20px 0; }
.covers img { flex: var(--r) 1 0; min-width: 0; width: 100%; height: auto; aspect-ratio: var(--r); border-radius: 6px; box-shadow: 0 10px 24px -10px rgba(14, 15, 18, .45); }
@media (min-width: 700px) { .covers { padding: 26px 26px 0; gap: 12px; } }

@media (min-width: 700px) and (max-width: 1099.98px) {
  .learn-tile--wide { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  /* The masterclass thumbnail is always whole: it keeps 16:9 and centres when the text column is taller. */
  .learn-tile--wide .tile__img { height: auto; aspect-ratio: 1200 / 675; align-self: center; object-fit: cover; }
}

/* ---------- About and closing tiles ---------- */
.about-tile .about-tile__img { width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; object-position: 54% 14%; }
.about-tile .tile__body { gap: 8px; }
.about-tile .tile__body .btn { margin-top: auto; }
.about-tile .about-tile__role { color: var(--on-ink-muted); }
@media (min-width: 700px) {
  .about-tile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
@media (min-width: 1100px) {
  .about-tile { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
}
/* 1100 to 1279: half a row is too narrow for the portrait column (the long bio makes the tile tall,
   so the photo turns into a sliver and cuts his ears and cheeks). A half-width about tile and the
   closing tile after it take the full row here, as on tablets, so his face is always whole. */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .grid > .about-tile.d-6, .grid > .about-tile.d-6 + .close-tile.d-6 { grid-column: span 12; }
}
@media (min-width: 700px) {
  /* The bio sets the tile's height and the portrait fills its column. It is never shorter than 4:3 of
     its width, so the crop always keeps his whole head (hair to beard, ear to ear). */
  .about-tile .about-tile__img { height: auto; aspect-ratio: 4 / 3; min-height: 100%; }
}
.close-tile { padding: 26px 20px 24px; gap: 22px; }
.close-tile__main { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.close-tile .band-title { font-size: clamp(31px, 8.6vw, 38px); }
@media (min-width: 700px) {
  .close-tile { justify-content: center; padding: 34px 34px 32px; }
  .close-tile .band-title { font-size: clamp(34px, 3.2vw, 46px); }
}

/* ---------- Closing brief card (Work with Tianyu and every page that ends with the form) ----------
   Portrait beside the two-step form; on phones the portrait hides and the avatar sits by the title. */
.brief-wide .brief__head { align-items: flex-start; }
.brief-portrait { display: none; }
@media (min-width: 700px) {
  .brief-portrait { display: flex; min-height: 440px; }
  .brief-wide .brief { gap: 22px; }
  .brief-wide .brief__avatar { display: none; }
  .brief-wide .brief__title { font: 800 clamp(32px, 4.2vw, 46px)/1.02 var(--display); letter-spacing: -.03em; }
  .brief-wide .brief__note { margin-top: 12px; max-width: 34em; font-size: 16px; line-height: 1.5; }
}
@media (min-width: 1100px) {
  .brief-wide { padding: 34px 34px 32px; }
  .brief-wide .brief { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 36px; }
  .brief-wide .brief__title { font-size: clamp(30px, calc(3.95vw - 11.5px), 44px); } /* "what you need" stays on line two */
}

/* ---------- Footer (compact) ---------- */
.foot { padding: 6px 0 calc(28px + env(safe-area-inset-bottom)); }
.foot__tile { display: grid; gap: 18px 20px; padding: 24px 20px 18px; border-radius: var(--tile-r); background: var(--white); }
.foot__name { font: 800 18px/1 var(--display); letter-spacing: -.01em; }
.foot__blurb { margin-top: 8px; max-width: 34em; font: 400 14.5px/1.5 var(--sans); color: var(--muted); }
.foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.foot__col h2 { margin-bottom: 2px; font: 600 14px/1.3 var(--sans); letter-spacing: .01em; color: var(--muted); }
.foot__col a { display: flex; align-items: center; min-height: 44px; font: 500 15px/1.2 var(--sans); }
.foot__col--connect { grid-column: 1 / -1; }
.foot__col--connect .foot__links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 18px; padding-top: 12px; border-top: 1px solid rgba(14, 15, 18, .1); font: 500 14px/1.4 var(--sans); color: var(--muted); }
.foot__base a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
@media (hover: hover) { .foot a:hover { text-decoration: underline; text-underline-offset: 4px; } }
@media (min-width: 700px) {
  .foot__tile { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px 40px; padding: 30px 32px 20px; }
  .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__col--connect { grid-column: auto; }
  .foot__col--connect .foot__links { display: block; }
  .foot__col a { min-height: 36px; font-size: 14.5px; }
  .foot__base { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .foot__tile { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); }
}

/* ---------- Reveal (only with JS, only below the first view, never under reduced motion) ---------- */
html.js.motion-ok [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
html.js.motion-ok [data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease-out); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .tile--link:hover, .film:hover, .btn:hover { transform: none !important; }
}
html.motion-off [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ---------- Background film (a film that only loops, e.g. behind a page title) ----------
   <div class="film film--bg" data-film data-vimeo="ID" style="--r:1.7778"> media + your content </div>
   No .film__link = no full-screen overlay. bento.js adds the pause button in a corner. */
.film--bg { display: block; }
.film--bg .film__media { position: absolute; inset: 0; aspect-ratio: auto; }
.film.film--bg .film__media { aspect-ratio: auto; } /* beats page rules such as .home-first .film__media */
.film--bg > :not(.film__media):not(.film__ctrl) { position: relative; z-index: 2; }
.film__ctrl--corner { position: absolute; right: 14px; bottom: 14px; z-index: 5; background: rgba(14, 15, 18, .55); color: #fff; }
@media (hover: hover) { .film--bg:hover { transform: none; box-shadow: none; } }
/* Dimmed background film: the film plays faintly behind dark content (Home: "Learn AI by doing").
   <div class="tile tile--ink film film--bg film--dim" data-film data-vimeo="ID" style="--r:1.7778; --film-dim:.24">
     <div class="film__media" aria-hidden="true"><img class="film__poster" ...></div> ...content... </div> */
.film--dim { background: var(--ink); }
.film--dim .film__media { opacity: var(--film-dim, .24); background: transparent; transform: scale(var(--film-zoom, 1)); } /* --film-zoom crops burned-in labels off the edges */
.film--dim::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 15, 18, .15) 0%, rgba(14, 15, 18, .55) 100%);
}
.tile.film--bg { display: flex; }

/* ---------- Reading text inside a tile (Privacy, long guides, full bio) ---------- */
.prose { max-width: 68ch; font: 400 16.5px/1.65 var(--sans); color: var(--text); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.8em; font: 700 24px/1.2 var(--display); letter-spacing: -.012em; }
.prose h3 { margin-top: 1.5em; font: 650 18px/1.3 var(--sans); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose strong { font-weight: 650; }
.tile--ink .prose { color: rgba(255, 255, 255, .88); }

/* ---------- Tags (non-interactive chips: people, built-for lists) ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: rgba(14, 15, 18, .06); font: 500 14px/1.25 var(--sans); }
.tile--ink .tag { background: rgba(255, 255, 255, .1); }
.tile--yellow .tag { background: rgba(14, 15, 18, .1); }

/* ---------- Spec list (label / value rows: format, delivery, audience) ---------- */
.spec { display: grid; }
.spec > div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 4px 18px; padding: 12px 0; border-top: 1px solid rgba(14, 15, 18, .12); }
.spec > div:first-child { border-top: 0; padding-top: 0; }
.spec dt { font: 600 14px/1.4 var(--sans); color: var(--muted); }
.spec dd { font: 500 15px/1.5 var(--sans); }
.tile--ink .spec > div { border-color: rgba(255, 255, 255, .14); }
.tile--ink .spec dt { color: var(--on-ink-muted); }
@media (max-width: 459.98px) { .spec > div { grid-template-columns: 1fr; } }

/* ---------- Section index (sticky on laptops, e.g. Privacy) ---------- */
.toc { display: grid; gap: 2px; }
.toc a { display: flex; align-items: center; min-height: 40px; padding: 4px 10px; border-radius: 10px; font: 500 14px/1.3 var(--sans); color: var(--muted); }
.toc a[aria-current="true"], .toc a:hover { background: rgba(14, 15, 18, .06); color: var(--text); }
@media (min-width: 1100px) { .toc-tile { position: sticky; top: calc(var(--nav-h) + 28px); align-self: start; } }

/* ---------- Picture tile at the image's own ratio, caption strip underneath ---------- */
.media-tile .tile__img { aspect-ratio: var(--r, auto); object-fit: cover; }
.media-tile figcaption { padding: 14px 18px 16px; font: 500 14px/1.4 var(--sans); color: var(--muted); }
.tile--ink.media-tile figcaption { color: var(--on-ink-muted); }

/* ---------- Print ---------- */
@media print {
  .nav, .pill, .sheet, .film-overlay, .film__ctrl, .rail-ctrls, .skip-link { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   Home page layout (index.html). Page-specific placement only.
   ========================================================================== */
.home-first .film__media { aspect-ratio: 16 / 9; }
@media (min-width: 700px) and (max-width: 1099.98px) {
  /* tablet board: copy + photo, brief + credentials, logos + film */
  .home-first .creds { order: 4; }
  .home-first .logos-tile { order: 5; }
  .home-first .film--hero { order: 6; }
  .home-first .creds .creds__list strong { font-size: 22px; }
}
@media (min-width: 1100px) {
  .home-first .photo-tile { min-height: 460px; }
}
.offer--side .tile__body .desc { color: var(--muted); }