/* ==========================================================================
   MOTIVATE STUDIOS — brand.css
   The brand guidelines page only. Everything here is built from the tokens
   in system.css, so the page follows the light / dark switch and the Thai
   type rules like every other page. Loaded after system.css + controls.css.
   ========================================================================== */

/* ---- section heads ------------------------------------------------------ */
.bb-head { display: grid; gap: .9rem; margin-bottom: clamp(34px, 5vh, 64px); max-width: 980px; }
.bb-head .t-lead { max-width: 62ch; }
.bb-num {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(3.4rem, 9vw, 7.5rem);
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgb(var(--azure-500-rgb) / .55);
  margin: 0 0 .1em;
  font-variant-numeric: tabular-nums;
}
.bb-sub { display: grid; gap: .6rem; margin: clamp(40px, 6vh, 72px) 0 clamp(18px, 3vh, 28px); max-width: 860px; }
.bb-sub .t-h2 { margin: 0; }
.bb-note { font-family: var(--font-body); font-size: .9rem; line-height: 1.6; color: var(--ink-400); max-width: 70ch; }
.bb-code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--ink-700);
  background: rgb(var(--ink-300-rgb) / .12);
  border-radius: var(--r-sm);
  padding: .9em 1.1em;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.bb-kbd {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .82em;
  padding: .12em .45em;
  border-radius: 6px;
  background: rgb(var(--ink-300-rgb) / .16);
  color: var(--ink-700);
  white-space: nowrap;
}

/* ---- grids --------------------------------------------------------------- */
.bb-grid { display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .bb-grid--2, .bb-grid--3, .bb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-span-2 { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .bb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bb-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.bb-card { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.bb-card > .t-h3 { margin: 0; }
.bb-card .t-body { margin: 0; }

/* ---- hero ---------------------------------------------------------------- */
.bb-hero__grid { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (min-width: 1024px) { .bb-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } }
.bb-hero .t-display { margin: .2em 0 .35em; }
.bb-resolve { display: grid; gap: 14px; padding: clamp(18px, 2.4vw, 28px); }
.bb-resolve__canvas { width: 100%; aspect-ratio: 16 / 10; display: block; border-radius: var(--r-md); background: rgb(var(--bg-lift-rgb) / .55); }
.bb-resolve__bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bb-resolve__bar label { flex: none; }
.bb-resolve__bar input[type="range"] { flex: 1 1 160px; accent-color: var(--azure-500); min-width: 0; }
.bb-resolve__bar output {
  flex: none; min-width: 6.5ch; text-align: right;
  font-family: var(--font-display); font-weight: 500; color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.bb-resolve__bar .btn { padding-inline: 16px; }

.bb-toc { margin-top: clamp(36px, 6vh, 64px); }
.bb-toc .filters { margin: 0; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.bb-toc a.filter { text-decoration: none; white-space: nowrap; padding-inline: .82rem; }
.bb-toc a.filter b { font-weight: 600; color: var(--azure-600); margin-right: .45em; font-variant-numeric: tabular-nums; }

/* ---- concept: the rounded pixel diagram ----------------------------------- */
.bb-atom { display: grid; gap: clamp(20px, 3vw, 40px); align-items: center; }
@media (min-width: 900px) { .bb-atom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bb-atom__fig { padding: clamp(18px, 2.6vw, 34px); }
.bb-atom__fig svg { width: 100%; height: auto; display: block; }
.bb-atom__fig .ink { fill: var(--ink-900); }
.bb-atom__fig .acc { fill: var(--azure-500); }
.bb-atom__fig .guide { stroke: var(--azure-500); stroke-width: 1.5; fill: none; stroke-dasharray: 4 4; }
.bb-atom__fig .dim { fill: var(--ink-500); font: 500 13px var(--font-body); letter-spacing: .04em; }
.bb-rules { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; counter-reset: r; }
.bb-rules li { position: relative; padding-left: 2.6rem; color: var(--ink-500); line-height: 1.6; }
.bb-rules li::before {
  counter-increment: r; content: counter(r, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  font: 600 .78rem/1.6 var(--font-display); color: var(--azure-600); letter-spacing: .04em;
}
.bb-rules b { color: var(--ink-900); font-weight: 600; }

/* ---- logo ---------------------------------------------------------------- */
.bb-plate {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  padding: 12%;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(var(--ink-300-rgb) / .22);
}
.bb-plate img, .bb-plate svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.bb-plate--light { background: #EEF3FA; }
.bb-plate--white { background: #FFFFFF; }
.bb-plate--ink { background: #08142B; }
.bb-plate--azure { background: #1B72FF; }
.bb-plate--deep { background: #12264A; }
.bb-plate__tag {
  position: absolute; left: 14px; bottom: 12px;
  font: 500 .72rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: rgb(8 20 43 / .55);
}
.bb-plate--ink .bb-plate__tag, .bb-plate--azure .bb-plate__tag, .bb-plate--deep .bb-plate__tag { color: rgb(255 255 255 / .62); }
.bb-plate--tall { aspect-ratio: 4 / 3; }
.bb-plate--wide { aspect-ratio: 21 / 9; }
.bb-fig { display: grid; gap: .7rem; margin: 0; align-content: start; }
.bb-fig figcaption { display: grid; gap: .25rem; }
.bb-fig figcaption b { font: 500 1rem/1.3 var(--font-display); color: var(--ink-900); }
.bb-fig figcaption span { font-size: .9rem; color: var(--ink-400); line-height: 1.5; }
.bb-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .2rem; }
.bb-links a {
  font: 500 .74rem/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase;
  color: var(--azure-600); text-decoration: none;
  padding: .55em .8em; border-radius: var(--r-pill);
  background: rgb(var(--azure-100-rgb) / .55);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.bb-links a:hover { background: var(--azure-500); color: #fff; }
.bb-links a:focus-visible { outline: 2px solid var(--azure-500); outline-offset: 2px; }
.bb-construct svg { width: 100%; height: auto; display: block; }

/* ---- colour -------------------------------------------------------------- */
.bb-swatches { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
@media (max-width: 520px) { .bb-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.bb-swatch {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border-radius: var(--r-md); background: var(--bg-lift);
  box-shadow: inset 0 0 0 1px rgb(var(--ink-300-rgb) / .22);
  text-align: left; font: inherit; color: inherit; border: 0; padding: 0; cursor: copy;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.bb-swatch:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow); }
.bb-swatch:focus-visible { outline: 2px solid var(--azure-500); outline-offset: 3px; }
.bb-swatch__chip { height: 112px; position: relative; box-shadow: inset 0 0 0 1px rgb(var(--ink-300-rgb) / .2); }
.bb-swatch__chip i {
  position: absolute; right: 10px; top: 10px;
  font: 600 .66rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; font-style: normal;
  padding: .45em .6em; border-radius: var(--r-pill);
  background: rgb(255 255 255 / .82); color: #08142B; opacity: 0; transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.bb-swatch.is-copied .bb-swatch__chip i { opacity: 1; transform: none; }
.bb-swatch__meta { padding: 12px 14px 14px; display: grid; gap: 3px; }
.bb-swatch__meta b { font: 500 .98rem/1.3 var(--font-display); color: var(--ink-900); }
.bb-swatch__meta span { font: 400 .78rem/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--ink-500); }
.bb-swatch__meta em { font-style: normal; font-size: .82rem; color: var(--ink-400); line-height: 1.45; margin-top: 4px; }
.bb-ratio { position: relative; display: flex; height: 64px; border-radius: var(--r-md); overflow: hidden; }
.bb-ratio::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(var(--ink-300-rgb) / .3); }
.bb-ratio span { display: flex; align-items: flex-end; padding: 8px 10px; font: 600 .72rem/1 var(--font-body); letter-spacing: .05em; color: rgb(255 255 255 / .9); min-width: 0; overflow: hidden; white-space: nowrap; }
.bb-ratio span.is-light { color: rgb(8 20 43 / .6); }
.bb-pairs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.bb-pair { border-radius: var(--r-md); padding: 18px 20px; display: grid; gap: 4px; min-height: 120px; align-content: end; box-shadow: inset 0 0 0 1px rgb(var(--ink-300-rgb) / .22); }
.bb-pair b { font: 500 1.35rem/1.15 var(--font-display); letter-spacing: -.01em; color: inherit; }
.bb-pair span { font: 500 .74rem/1.4 var(--font-body); letter-spacing: .05em; text-transform: uppercase; opacity: .78; }

/* ---- typography ------------------------------------------------------------ */
.bb-face { display: grid; gap: 14px; padding: clamp(20px, 2.6vw, 32px); }
.bb-face__big { font-size: clamp(3.2rem, 7vw, 5.6rem); line-height: 1; color: var(--ink-900); letter-spacing: -.02em; margin: 0; }
.bb-face__name { font: 500 1.05rem/1.3 var(--font-display); color: var(--ink-900); margin: 0; }
.bb-face__role { font-size: .9rem; color: var(--ink-500); margin: 0; line-height: 1.55; }
.bb-face__set { font-size: 1.02rem; line-height: 1.6; color: var(--ink-700); margin: 0; word-break: break-word; }
.bb-face__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.bb-face__meta span { font: 500 .7rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); padding: .5em .7em; border-radius: var(--r-pill); background: rgb(var(--ink-300-rgb) / .14); }
.f-sora { font-family: 'Sora', sans-serif; }
.f-inter { font-family: 'Inter Tight', sans-serif; }
.f-chakra { font-family: 'Chakra Petch', sans-serif; }
.f-plex { font-family: 'IBM Plex Sans Thai', sans-serif; }
.f-kanit { font-family: 'Kanit', 'Chakra Petch', sans-serif; font-weight: 800; }
.bb-scale { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.bb-scale li { display: grid; gap: 4px 20px; grid-template-columns: 1fr; padding: 18px 0; border-top: var(--rule) solid rgb(var(--ink-300-rgb) / .3); align-items: baseline; }
@media (min-width: 900px) { .bb-scale li { grid-template-columns: 180px minmax(0, 1fr); } }
.bb-scale li > span:first-child { font: 500 .74rem/1.5 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-400); }
.bb-scale li > span:first-child em { display: block; font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-500); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; }
.bb-scale .t-display, .bb-scale .t-h1, .bb-scale .t-h2, .bb-scale .t-h3, .bb-scale .t-lead, .bb-scale .t-body, .bb-scale .t-cap { margin: 0; }

/* ---- KV gallery -------------------------------------------------------------- */
.bb-kvbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; margin-bottom: clamp(18px, 3vh, 28px); }
.bb-kvbar .filters { margin: 0; max-width: 100%; }
.bb-kvgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); }
.bb-kv {
  position: relative; display: grid; grid-template-rows: auto auto; gap: 8px;
  border-radius: var(--r-md); padding: 10px; background: var(--bg-lift);
  box-shadow: inset 0 0 0 1px rgb(var(--ink-300-rgb) / .2);
  content-visibility: auto; contain-intrinsic-size: 168px 210px;
}
.bb-kv[hidden] { display: none; }
.bb-kvmore { display: none; margin: 18px auto 0; }
@media (max-width: 640px) {
  .bb-kvgrid.is-folded .bb-kv:nth-child(n+13) { display: none; }
  .bb-kvgrid.is-folded + .bb-kvmore { display: flex; }
}
.bb-kv__art { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; background: #EEF3FA; overflow: hidden; }
.bb-kv__art i {
  display: block; width: 78%; height: 78%;
  background-color: #08142B;
  /* the image itself is set inline on each tile: a url() inside a custom
     property would resolve against this stylesheet, not the page */
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: background-color var(--t-mid) var(--ease-out);
}
.bb-kvgrid[data-tone="azure"] .bb-kv__art { background: #EEF3FA; }
.bb-kvgrid[data-tone="azure"] .bb-kv__art i { background-color: #1B72FF; }
.bb-kvgrid[data-tone="white"] .bb-kv__art { background: #08142B; }
.bb-kvgrid[data-tone="white"] .bb-kv__art i { background-color: #FFFFFF; }
.bb-kv__name { font: 500 .74rem/1.3 var(--font-body); color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-kv__dl { display: flex; gap: 4px; }
.bb-kv__dl a {
  flex: 1; text-align: center; font: 600 .66rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  padding: .7em 0; border-radius: 9px; text-decoration: none; color: var(--azure-600);
  background: rgb(var(--azure-100-rgb) / .5);
}
.bb-kv__dl a:hover { background: var(--azure-500); color: #fff; }
.bb-kv__dl a:focus-visible { outline: 2px solid var(--azure-500); outline-offset: 2px; }
.bb-tone { display: inline-flex; gap: 6px; padding: 6px; border-radius: var(--r-pill); background: rgb(var(--ink-300-rgb) / .12); }
.bb-tone button {
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgb(var(--ink-300-rgb) / .4);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.bb-tone button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--azure-500); }
.bb-tone button:hover { transform: scale(1.08); }
.bb-tone button:focus-visible { outline: 2px solid var(--azure-500); outline-offset: 3px; }
.bb-examples img { width: 100%; height: auto; display: block; border-radius: var(--r-md); }

/* ---- motion ---------------------------------------------------------------- */
.bb-tokens { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .bb-tokens { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bb-token { padding: 18px; display: grid; gap: 6px; }
.bb-token b { font: 300 2rem/1 var(--font-display); color: var(--ink-900); letter-spacing: -.02em; }
.bb-token span { font: 500 .74rem/1.4 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-500); }
.bb-token em { font-style: normal; font-size: .86rem; color: var(--ink-400); line-height: 1.5; }
.bb-curve svg { width: 100%; height: auto; display: block; }
.bb-curve .axis { stroke: rgb(var(--ink-300-rgb) / .5); stroke-width: 1; fill: none; }
.bb-curve .line { stroke: var(--azure-500); stroke-width: 3; fill: none; stroke-linecap: round; }
.bb-curve .dot { fill: var(--azure-500); }
.bb-curve .lbl { fill: var(--ink-500); font: 500 12px var(--font-body); letter-spacing: .04em; }

.bb-reel { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.bb-clip { display: grid; gap: 10px; margin: 0; min-width: 0; }
.bb-clip__media {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden;
  background: #0A1630 center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgb(var(--ink-300-rgb) / .22);
}
.bb-clip__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-clip__media[role="button"] { cursor: pointer; }
.bb-clip__media:focus-visible { outline: 2px solid var(--azure-500); outline-offset: 3px; }
.bb-clip__badge {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  font: 600 .64rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  padding: .5em .65em; border-radius: var(--r-pill); background: rgb(8 20 43 / .62); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.bb-clip figcaption { display: grid; gap: 4px; }
.bb-clip figcaption b { font: 500 .98rem/1.3 var(--font-display); color: var(--ink-900); }
.bb-clip figcaption span { font-size: .86rem; color: var(--ink-400); line-height: 1.5; }
.bb-clip .bb-links { margin-top: 4px; }

/* ---- website motion specimens --------------------------------------------- */
.bb-spec { display: grid; gap: 14px; padding: clamp(18px, 2.4vw, 26px); min-width: 0; }
.bb-spec__stage {
  position: relative; min-height: 220px; border-radius: var(--r-md);
  background: var(--bg); overflow: hidden; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgb(var(--ink-300-rgb) / .2);
  isolation: isolate;
}
.bb-spec__stage > .orb { position: absolute; }
.bb-spec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bb-spec__head b { font: 500 1.05rem/1.3 var(--font-display); color: var(--ink-900); }
.bb-spec__head span { font: 400 .76rem/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--ink-400); }
.bb-spec p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink-500); }
.bb-spec .bb-links { margin: 0; }
.bb-replay {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 .68rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  padding: .7em .9em; border-radius: var(--r-pill); border: 0; cursor: pointer;
  background: var(--azure-500); color: #fff;
  box-shadow: 0 8px 20px -10px rgb(var(--azure-500-rgb) / .8);
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.bb-replay:hover { transform: translateY(-1px); background: var(--azure-600); }
.bb-replay:active { transform: scale(.96); }
.bb-replay:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.bb-replay svg { width: 12px; height: 12px; }
.bb-spec__stage .liquid { position: absolute; inset: 0; width: 100%; height: 100%; }
.bb-mini-reveal { padding: 18px 22px; width: 100%; }
.bb-mini-reveal .t-h2 { margin: 0 0 .35em; }
.bb-mini-reveal .t-body { margin: 0; }
.bb-mini-stat { width: min(100%, 300px); }
.bb-mini-stat .stat-card__list { gap: 10px; }
.bb-mini-glass { width: 72%; height: 64%; }
.bb-spec__stage .pipe__icons { width: 94%; margin: 0; }
.bb-spec__stage .tile { width: min(100%, 320px); }
.bb-spec__stage .marquee { width: 100%; }
.bb-word { font: 300 clamp(1.4rem, 2.6vw, 2rem)/1 var(--font-display); color: var(--ink-900); white-space: nowrap; letter-spacing: -.01em; }
.bb-word b { color: var(--azure-500); font-weight: 400; }
/* the page transition, contained in its stage */
.bb-wipe {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; transform: translate3d(-101%, 0, 0);
  background-image: linear-gradient(100deg,
    rgb(var(--bg-rgb) / .86),
    rgb(var(--azure-100-rgb) / .92) 45%,
    rgb(var(--bg-rgb) / .86));
  -webkit-backdrop-filter: blur(26px) saturate(180%);
          backdrop-filter: blur(26px) saturate(180%);
  will-change: transform, opacity;
}
/* [data-reveal], replayable: the same 28 px, 5 px blur and 900 ms */
html.js .bb-spec [data-reveal-demo] {
  opacity: 0; translate: 0 28px; filter: blur(5px);
  transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out), filter var(--t-slow) var(--ease-out);
}
html.js .bb-spec [data-reveal-demo] + [data-reveal-demo] { transition-delay: 80ms; }
html.js .bb-spec [data-reveal-demo].is-in { opacity: 1; translate: none; filter: none; }
html.js .bb-spec.is-resetting [data-reveal-demo] { transition: none !important; }
.bb-mini-stat .stat__value { font-variant-numeric: tabular-nums; }

/* ---- 3D + mockups ---------------------------------------------------------- */
.bb-3d { display: grid; gap: 14px; padding: clamp(14px, 2vw, 22px); }
.bb-3d__view {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 35%, var(--bg-lift), var(--bg-deep));
}
@media (max-width: 640px) { .bb-3d__view { aspect-ratio: 4 / 5; } }
.bb-3d__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; transition: opacity var(--t-mid) var(--ease-out); }
.bb-3d__view.is-live .bb-3d__poster { opacity: 0; pointer-events: none; }
.bb-3d__canvas { position: absolute; inset: 0; }
.bb-3d__load {
  /* centred without a transform: the site's buttons animate translate themselves */
  position: absolute; left: 0; right: 0; bottom: 18px; margin-inline: auto; width: max-content; max-width: calc(100% - 28px); z-index: 2;
}
.bb-3d__view.is-live .bb-3d__load { display: none; }
.bb-3d__hint {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; pointer-events: none;
  font: 500 .7rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500);
  opacity: 0; transition: opacity var(--t-mid) var(--ease-out);
}
.bb-3d__view.is-live .bb-3d__hint { opacity: .8; }
.bb-3d__spin {
  position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgb(var(--azure-500-rgb) / .25); border-top-color: var(--azure-500);
  animation: bb-spin .9s linear infinite; opacity: 0; pointer-events: none;
}
.bb-3d__view.is-loading .bb-3d__spin { opacity: 1; }
@keyframes bb-spin { to { transform: rotate(360deg); } }
.bb-3d[data-failed] .bb-3d__load { display: none; }
.bb-3d__load[disabled] { opacity: .6; cursor: progress; }
.bb-3d__bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.bb-3d__bar .filters { margin: 0; }
.bb-photos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.bb-photos figure { margin: 0; display: grid; gap: 8px; }
.bb-photos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); display: block; background: var(--bg-deep); }
.bb-photos figcaption { font-size: .86rem; color: var(--ink-400); line-height: 1.45; }
.bb-specs { margin: 0; display: grid; gap: 0; }
.bb-specs div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; padding: 12px 0; border-top: var(--rule) solid rgb(var(--ink-300-rgb) / .3); }
.bb-specs dt { font: 500 .78rem/1.5 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); }
.bb-specs dd { margin: 0; color: var(--ink-900); font-size: .95rem; line-height: 1.5; }

/* ---- do / don't -------------------------------------------------------------- */
.bb-dd { display: grid; gap: 10px; margin: 0; align-content: start; }
.bb-dd__art { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; background: #EEF3FA; box-shadow: inset 0 0 0 1px rgb(var(--ink-300-rgb) / .22); }
.bb-dd__art svg { width: 100%; height: 100%; display: block; }
.bb-dd__mark {
  position: absolute; left: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.bb-dd--do .bb-dd__mark { background: #1B72FF; }
.bb-dd--dont .bb-dd__mark { background: #08142B; }
.bb-dd--dont .bb-dd__art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1.5px), rgb(8 20 43 / .5) calc(50% - 1px), rgb(8 20 43 / .5) calc(50% + 1px), transparent calc(50% + 1.5px));
}
.bb-dd__mark svg { width: 14px; height: 14px; }
.bb-dd figcaption { display: grid; gap: 3px; }
.bb-dd figcaption b { font: 500 .95rem/1.3 var(--font-display); color: var(--ink-900); }
.bb-dd figcaption span { font-size: .86rem; color: var(--ink-400); line-height: 1.5; }
.bb-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.bb-list li { position: relative; padding-left: 1.5rem; color: var(--ink-500); line-height: 1.6; font-size: .95rem; }
.bb-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 2.5px; background: var(--azure-500); }
.bb-list--no li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-400); }

/* ---- downloads ------------------------------------------------------------- */
.bb-dls { display: grid; gap: 12px; }
.bb-dl {
  display: grid; gap: 10px 20px; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
}
@media (min-width: 820px) { .bb-dl { grid-template-columns: 56px minmax(0, 1fr) auto; } }
.bb-dl__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgb(var(--azure-100-rgb) / .6); color: var(--azure-600); }
.bb-dl__ico svg { width: 26px; height: 26px; }
.bb-dl__body { display: grid; gap: 3px; min-width: 0; }
.bb-dl__body b { font: 500 1.08rem/1.3 var(--font-display); color: var(--ink-900); }
.bb-dl__body span { font-size: .9rem; color: var(--ink-500); line-height: 1.5; }
.bb-dl__body small { font: 500 .72rem/1.4 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-400); }
.bb-dl__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-dl__acts .btn { white-space: nowrap; }
.bb-dl[data-empty] { min-height: 0; }          /* not the work grid's empty state */
.bb-dl[data-empty] .bb-dl__acts .btn--solid { display: none; }
.bb-dl__soon { display: none; font: 500 .78rem/1.4 var(--font-body); color: var(--ink-400); }
.bb-dl[data-empty] .bb-dl__soon { display: inline; }

/* ---- small screens ---------------------------------------------------------- */
@media (max-width: 640px) {
  .bb-num { font-size: 3rem; }
  .bb-swatch__chip { height: 88px; }
  .bb-spec__stage { min-height: 190px; }
}

/* ---- screen-reader only ------------------------------------------------------ */
.bb-sr {
  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;
}

/* ---- reduced motion: every specimen stands still ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bb-replay { display: none; }
  .bb-swatch, .bb-swatch:hover { transform: none; }
  .bb-wipe { display: none; }
  html.js .bb-spec [data-reveal-demo] { opacity: 1; translate: none; filter: none; transition: none; }
}