/* ==========================================================================
   Yiertek v5 · site
   ==========================================================================
   A product website designed from the buyer's journey (docs/v5-contract.md):
   light canvas, rounded cards, one accent, one focal point per screen. The
   craft reference is america.gov — serif only for emotional lines, Inter 500
   headings, blur-in entrances, spring pills, square living tiles.
   Every colour comes from tokens.css. Breakpoints: 600 · 900 · 1200 (+360).
   Only transform, opacity and filter animate; reduced motion = none.
   ========================================================================== */

/* -- base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + var(--s-5)); background: var(--canvas); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink-2);
  font: 400 var(--t-body)/var(--t-body-lh) var(--f-sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, dl, dd, blockquote, fieldset { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--copper); color: var(--on-copper); }
:focus-visible { outline: 2px solid var(--copper-line); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:is(.tile, .hl, .qcard, .trust__panel, .trust__map, .qform, .pp__hero-in, .hero__card, .deck__grid, .cta__in, .band--panel, .person) :focus-visible { outline-color: var(--copper); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1, h2, h3, .hero__title, .pp__h1name { color: var(--ink); text-wrap: balance; overflow-wrap: break-word; }
h1, h2 { font: 500 var(--t-h2)/var(--t-h2-lh) var(--f-sans); letter-spacing: var(--t-h2-tr); }
h3 { font: 500 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); letter-spacing: -0.01em; }
p { text-wrap: pretty; }
main :where(p, li, dd, figcaption) a:not([class]) { color: var(--copper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--rule); }
main :where(p, li, dd, figcaption) a:not([class]):hover { color: var(--copper-deep); text-decoration-color: currentColor; }

/* -- type roles ------------------------------------------------------------- */
.hero__title, .serif { font: 400 var(--t-serif)/var(--t-serif-lh) var(--f-serif); letter-spacing: var(--t-serif-tr); color: var(--ink); }
.hero__title { font-size: var(--t-hero); line-height: var(--t-hero-lh); letter-spacing: var(--t-hero-tr); }
.intro, .lead { font: 400 var(--t-intro)/var(--t-intro-lh) var(--f-sans); letter-spacing: -0.01em; color: var(--ink-2); max-width: var(--measure); }
.lead { font-size: var(--t-body-lg); line-height: var(--t-body-lg-lh); letter-spacing: 0; }
.meta { font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); color: var(--ink-3); }
.label, .versal, .eyebrow { font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); color: var(--ink-3); }
.eyebrow { color: var(--copper); }
.micro { font: 500 var(--t-micro)/var(--t-micro-lh) var(--f-sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.code { font: 600 var(--t-code)/var(--t-code-lh) var(--f-sans); letter-spacing: 0.01em; color: var(--copper); white-space: nowrap; }
.stat { font: 500 var(--t-h2)/var(--t-h2-lh) var(--f-sans); letter-spacing: var(--t-h2-tr); color: var(--ink); font-variant-numeric: tabular-nums; }
.nbh { white-space: nowrap; }

/* -- layout ------------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.band, .rows, .new, .quote, .related, .pp__highlights, .pp__specs { padding-block: var(--section-y); }
.band--panel { background: var(--card); }
.band--flush { padding-block: 0; }
:is(.band, .rows, .new, .deck, .pp__highlights, .pp__specs):not(.band--panel) + :is(.band, .new, .deck, .quote, .pp__specs, .related):not(.band--panel) { padding-top: 0; }
/* A section is a heading, at most one line under it, then its content. */
:is(.band, .new, .related, .pp__specs) > .wrap > h2 { max-width: 24ch; }
:is(.band, .related) > .wrap > h2 + p { margin-top: var(--s-4); max-width: 52ch; color: var(--ink-2); font: 400 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); }
:is(.band, .related) > .wrap > :is(h2, h2 + p) + :not(p) { margin-top: clamp(var(--s-6), 4vw, var(--s-8)); }
.band__head, .new__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-bottom: clamp(var(--s-6), 4vw, var(--s-8)); }
.band__head > :is(h1, h2) { max-width: 22ch; }
.band__head > :is(p, .lead) { flex-basis: 100%; max-width: 52ch; }

/* page header: one serif line, one lead */
.phead { padding-block: clamp(var(--s-8), 8vw, var(--s-10)) clamp(var(--s-7), 6vw, var(--s-9)); }
.phead__title, .lhead__title { max-width: 16ch; font: 400 var(--t-serif)/var(--t-serif-lh) var(--f-serif); letter-spacing: var(--t-serif-tr); }
.phead__lead, .lhead__blurb { margin-top: var(--s-5); max-width: 40ch; color: var(--ink-2); font: 400 var(--t-intro)/var(--t-intro-lh) var(--f-sans); letter-spacing: -0.01em; }
.phead__facts { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-6); color: var(--ink-2); }
.phead__facts .stat { margin-right: var(--s-2); }
.phead__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.phead + .band, .lhead + .band { padding-top: 0; }

/* -- controls ------------------------------------------------------------------- */
.skip { position: absolute; top: var(--s-3); left: var(--s-4); z-index: 100; padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); background: var(--ink); color: var(--canvas); font: 500 var(--t-body)/1 var(--f-sans); transform: translateY(-300%); }
.skip:focus { transform: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: none;
  font: 500 var(--t-body)/1.2 var(--f-sans);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: transform var(--d-spring) var(--e-spring);
}
/* Press squashes to .96 fast; release springs back through ~1.02 (the spring curve's overshoot). */
.btn:active { transform: scale(0.96); transition-duration: 100ms; transition-timing-function: var(--e-out); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--copper); color: var(--on-copper); }
.btn--primary:hover { background: var(--copper-deep); }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--canvas); }
.btn--quiet { min-height: 44px; padding: 0; border: 0; color: var(--copper); }
.btn__arrow { width: 1em; height: 1em; flex: none; transition: transform var(--d-ui) var(--e-out); }
.btn:hover .btn__arrow, .link:hover .btn__arrow { transform: translateX(4px); }
@media (max-width: 599.98px) { .btn { max-width: 100%; white-space: normal; text-align: center; } }
@media (max-width: 359.98px) { .btn { padding-inline: var(--s-4); } }

/* The verb-link: one per block. */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--copper);
  font: 500 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
}
.link:hover { color: var(--copper-deep); text-decoration-color: currentColor; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: 0 var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--canvas);
  color: var(--ink-2);
  font: 500 var(--t-label)/1 var(--f-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--d-spring) var(--e-spring);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip:active { transform: scale(0.94); transition-duration: 100ms; }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--canvas); }
.chip__n { font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__n { color: var(--card-2); }
.chip--ghost { border-style: dashed; border-color: var(--field-line); background: none; color: var(--copper); }
.chip[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
@media (hover: none), (pointer: coarse) { .chip { min-height: 44px; } }

.tag-new { display: inline-block; padding: 0.3em 0.6em 0.25em; border-radius: var(--r-pill); background: var(--copper); color: var(--on-copper); font: 600 0.6875rem/1 var(--f-sans); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }

.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.swatch { width: 14px; height: 14px; border-radius: var(--r-pill); background: var(--swatch); box-shadow: inset 0 0 0 1px var(--swatch-ring); }
.swatches--sm { gap: 6px; }
.swatches--sm .swatch { width: 10px; height: 10px; }
button.swatch { display: grid; place-items: center; width: 44px; height: 44px; margin: -12px; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; }
button.swatch::before { content: ""; width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--swatch); box-shadow: inset 0 0 0 1px var(--swatch-ring); }
button.swatch[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1px var(--swatch-ring), 0 0 0 2px var(--canvas), 0 0 0 4px var(--copper-line); }

.link-pdf { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font: 500 var(--t-label)/1.3 var(--f-sans); color: var(--copper); }
.link-pdf:not(:has(svg))::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--i-download) center / contain no-repeat; mask: var(--i-download) center / contain no-repeat; }
.link-pdf .icon { width: 16px; height: 16px; }
.link-pdf:hover { color: var(--copper-deep); text-decoration: underline; text-underline-offset: 0.25em; }
.icon { width: 18px; height: 18px; flex: none; stroke-width: 1.75; }

:is(.hdr__btn, .tray__close, .tray__remove, .drawer__close, .rail__btn, .pcard__add, .viewer__btn, .viewer__close) {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: transform var(--d-press) var(--e-out);
}
:is(.hdr__btn, .tray__close, .tray__remove, .drawer__close, .rail__btn, .pcard__add, .viewer__btn, .viewer__close) svg { width: 18px; height: 18px; }
:is(.hdr__btn, .tray__close, .tray__remove, .drawer__close, .rail__btn, .viewer__btn, .viewer__close):active { transform: scale(0.94); }
:is(.hdr__btn, .tray__close, .tray__remove, .drawer__close):hover { background: var(--veil); color: var(--ink); }

/* -- trust strip + header -------------------------------------------------------- */
.hdr { position: sticky; top: 0; z-index: var(--z-hdr); height: var(--hdr-h); transition: transform var(--d-ui-slow) var(--e-out); }
.hdr::before { content: ""; position: absolute; inset: 0; border-bottom: 1px solid var(--rule); background: var(--glass); -webkit-backdrop-filter: saturate(1.5) blur(20px); backdrop-filter: saturate(1.5) blur(20px); opacity: 0; pointer-events: none; transition: opacity var(--d-ui-slow) var(--e-out); }
.hdr[data-scrolled="true"]::before { opacity: 1; }
.hdr[data-hidden="true"] { transform: translateY(-100%); }
.hdr:has([data-open="true"]), .hdr:focus-within { transform: none; }
.hdr__bar { position: relative; display: flex; align-items: center; gap: var(--s-5); height: 100%; }
.hdr__logo { display: flex; align-items: center; gap: var(--s-4); flex: none; color: var(--ink); }
.hdr__logo svg { width: auto; height: 36px; }
/* The descriptor beside the mark, after a hairline (the old site had it; the owner asked it back). */
.hdr__tag { display: none; padding-left: var(--s-4); border-left: 1px solid var(--rule); color: var(--ink-3); font: 500 13px/1.2 var(--f-sans); letter-spacing: 0.01em; white-space: nowrap; }
.hdr__tag { display: block; }
@media (max-width: 1319.98px) {
  .hdr__logo { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hdr__tag { padding-left: 1px; border-left: 0; font-size: 11px; line-height: 1.15; letter-spacing: 0.015em; }
}
@media (min-width: 600px) and (max-width: 899.98px) { .hdr__logo svg { height: 32px; } }   /* 36 px pushed the burger 3 px past 600 */   /* below this the header row has no room for it */
.hdr__actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.hdr__lang { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--s-2); border-radius: var(--r-pill); color: var(--ink-2); font: 500 var(--t-label)/1 var(--f-sans); }
.hdr__lang:hover { background: var(--veil); color: var(--ink); }
.hdr__quote, .hdr__tray {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 44px;
  padding: 0 var(--s-2) 0 var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink);
  font: 500 var(--t-label)/1 var(--f-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--d-press) var(--e-out);
}
.hdr__quote:hover, .hdr__tray:hover, :is(.hdr__quote, .hdr__tray)[aria-expanded="true"] { border-color: var(--ink); }
.hdr__quote:active, .hdr__tray:active { transform: scale(0.97); }
.hdr__count, :is(.hdr__quote, .hdr__tray, .bar__btn) [data-tray-count] {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font: 600 var(--t-micro)/1 var(--f-sans);
  font-variant-numeric: tabular-nums;
}
:is(.hdr__quote, .hdr__tray, .bar__btn):not([data-empty="true"]) .hdr__count { background: var(--copper); color: var(--on-copper); }
[data-tray-count].is-bump, [data-tray-count][data-bump] { animation: spring-pill var(--d-spring) var(--e-spring); }
.hdr__cta { min-height: 44px; padding-inline: var(--s-5); }
.hdr__quote-word, .hdr__tray-word { white-space: nowrap; }
.hdr__quote[data-empty="true"] .hdr__count { background: var(--card); color: var(--ink-3); }
.hdr__quote[data-empty="true"] { display: none; }   /* appears (with the count's spring) once a model is added */

.hdr__burger { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.hdr__burger > * { display: none; }
.hdr__burger::before, .hdr__burger::after { content: ""; position: absolute; top: 50%; left: 13px; right: 13px; height: 1.5px; margin-top: -0.75px; border-radius: 1px; background: currentColor; transition: transform var(--d-ui-slow) var(--e-out); }
.hdr__burger::before { transform: translateY(-4px); }
.hdr__burger::after { transform: translateY(4px); }
.hdr__burger[aria-expanded="true"]::before { transform: rotate(45deg); }
.hdr__burger[aria-expanded="true"]::after { transform: rotate(-45deg); }
@media (max-width: 1199.98px) {
  .hdr__nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: calc(100dvh - var(--hdr-h));
    display: flex;
    flex-direction: column;
    padding: var(--s-5) var(--gutter) var(--s-9);
    overflow-y: auto;
    background: var(--canvas);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--d-ui-slow) var(--e-out), transform var(--d-ui-slow) var(--e-out), visibility 0s linear var(--d-ui-slow);
  }
  .hdr__nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .hdr__link { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); color: var(--ink); font: 500 var(--t-h2)/var(--t-h2-lh) var(--f-sans); letter-spacing: var(--t-h2-tr); }
  .hdr__link[aria-current="page"] { color: var(--copper); }
  .no-js .hdr__burger { display: none; }
}
@media (min-width: 1200px) {
  .hdr__nav { display: flex; gap: var(--s-6); margin-inline: auto; }
  .hdr__link { position: relative; padding-block: var(--s-2); color: var(--ink-2); font: 500 0.9375rem/1 var(--f-sans); }
  .hdr__link::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1.5px; border-radius: 1px; background: var(--copper-line); transform: scaleX(0); transform-origin: left; transition: transform var(--d-ui) var(--e-out); }
  .hdr__link:hover, .hdr__link[aria-current="page"] { color: var(--ink); }
  .hdr__link:is(:hover, [aria-current="page"])::after { transform: scaleX(1); }
  .hdr__burger { display: none; }
}
@media (max-width: 599.98px) {
  .hdr__bar { gap: var(--s-3); }
  .hdr__logo svg { height: 30px; }
  .hdr__actions { gap: 0; }
}
@media (max-width: 359.98px) {
  .hdr__logo svg { height: 26px; }
  :is(.hdr__quote, .hdr__tray) { gap: 0; padding: 0 var(--s-2); font-size: 0; }
  :is(.hdr__quote-word, .hdr__tray-word) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  :is(.hdr__quote, .hdr__tray) [data-tray-count] { font-size: var(--t-micro); }
}
.hdr__search { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); color: var(--ink-2); transition: transform var(--d-press) var(--e-out); }
.hdr__search:hover { background: var(--veil); color: var(--ink); }
.hdr__search svg { width: 20px; height: 20px; }
/* Scrolled: the bar shrinks 72 → 60 visually (transform only; the layout box keeps its height),
   and a 2 px copper progress line waits under it for motion.js (--progress 0…1). */
.hdr::before { transform-origin: top; transition: opacity var(--d-ui-slow) var(--e-out), transform var(--d-ui-slow) var(--e-out); }
.hdr__bar { transition: transform var(--d-ui-slow) var(--e-out); }
.hdr__logo svg { transform-origin: left center; transition: transform var(--d-ui-slow) var(--e-out); }
.hdr[data-scrolled="true"]::before { transform: scaleY(0.8334); }
.hdr[data-scrolled="true"] .hdr__bar { transform: translateY(-6px); }
.hdr[data-scrolled="true"] .hdr__logo svg { transform: scale(0.88); }
.hdr::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--hdr-h) * 0.8334 - 2px); height: 2px; background: var(--copper); transform: scaleX(var(--progress, 0)); transform-origin: left; pointer-events: none; }
@media (max-width: 599.98px) { .hdr[data-scrolled="true"]::before, .hdr[data-scrolled="true"] .hdr__bar, .hdr[data-scrolled="true"] .hdr__logo svg { transform: none; } .hdr::after { top: calc(var(--hdr-h) - 2px); } }

/* -- phone bottom bar (not on the product page, which has .pbar) ----------------------------- */
.bar { display: none; }
@media (max-width: 599.98px) {
  body:has(.bar) { padding-bottom: calc(var(--bbar-h) + env(safe-area-inset-bottom)); }
  .hdr__cta, body:has(.bar) .hdr__quote { display: none; }
  .bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-bbar);
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: var(--s-2);
    padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule);
    background: var(--glass);
    -webkit-backdrop-filter: saturate(1.5) blur(20px);
    backdrop-filter: saturate(1.5) blur(20px);
  }
  .bar__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-width: 48px; min-height: 48px; padding: 0 var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-pill); background: var(--canvas); color: var(--ink); font: 500 var(--t-label)/1 var(--f-sans); white-space: nowrap; cursor: pointer; }
  .bar__btn--primary { border-color: var(--copper); background: var(--copper); color: var(--on-copper); }
  .bar__btn[data-empty="true"] .hdr__count { background: var(--card); color: var(--ink-3); }
  body:has(.pbar) .bar { display: none; }
}
/* narrow phones: WhatsApp becomes its icon, then the quote list its count; the words stay for screen readers */
@media (max-width: 439.98px) { .bar__btn:first-child { padding-inline: var(--s-3); } .bar__btn:first-child > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (max-width: 379.98px) { .bar { gap: var(--s-1); } .bar__btn { padding-inline: var(--s-3); } .bar__btn-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* -- hero v6: the factory first — the title, the line's own photograph, the marks, the scale -- */
.hero { overflow-x: clip; padding: clamp(var(--s-4), 2vw, var(--s-5)) var(--gutter) 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: center; max-width: var(--max); margin-inline: auto; }
.hero__copy { container-type: inline-size; }
.hero__title { max-width: 11ch; }
.hero__sub { margin-top: var(--s-5); max-width: 32ch; color: var(--ink-2); font: 400 var(--t-sub)/var(--t-sub-lh) var(--f-sans); letter-spacing: -0.01em; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-6); }
@media (max-width: 599.98px) {
  .hero__sub { font-size: var(--t-body-lg); line-height: var(--t-body-lg-lh); }
  .hero__ctas .btn { flex: 1 1 100%; justify-content: center; }
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(var(--s-7), 5vw, var(--s-9)); }
  /* Three lines — "The factory / behind your / audio brand." — the longest ~5.7em as set. */
  .hero__title { max-width: none; font-size: min(var(--t-hero), 16.5cqw); line-height: 1; }
}

/* the show (v6.2): one photograph at a time, nothing on it; the caption and the dots sit under it */
.hero__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); --bar-w: 210px; }
.hero__frame { grid-area: 1 / 1; display: grid; }
.show__slide { grid-area: 1 / 1; display: grid; grid-template-rows: auto auto; margin: 0; opacity: 0; transition: opacity 900ms var(--e-out); }
.show__slide.is-current, .hero__frame:not(:has(.is-current)) .show__slide:first-child { opacity: 1; }
.show__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-card); background: var(--card-2); }
.show__img { width: 100%; height: 100%; object-fit: cover; }
.show__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 44px; padding: var(--s-3) calc(var(--bar-w) + var(--s-4)) 0 var(--s-1); color: var(--ink-2); font: 400 var(--t-label)/1.35 var(--f-sans); }
.show__name { color: var(--ink); font-weight: 500; }
.show__bar { grid-area: 1 / 1; align-self: end; justify-self: end; display: flex; align-items: center; gap: var(--s-2); padding-top: var(--s-3); }
.show__tabs { display: flex; align-items: center; }
/* progress dots: the current one stretches and fills over the slide's 7 s (it drives the show) */
.show__tab { display: grid; place-items: center; min-width: 24px; height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; }
.show__tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.show__tab-track { position: relative; display: block; width: 8px; height: 8px; overflow: hidden; border-radius: var(--r-pill); background: var(--rule); transition: width var(--d-ui-slow) var(--e-out), background-color var(--d-ui) var(--e-out); }
.show__tab:hover .show__tab-track { background: var(--ink-3); }
.show__tab.is-current .show__tab-track { width: 36px; background: var(--rule); }
.show__tab-fill { position: absolute; inset: 0; display: block; border-radius: inherit; background: var(--copper); transform: scaleX(0); transform-origin: left center; }
.show__tab.is-current .show__tab-fill { animation: show-fill var(--show-dur, 7000ms) linear forwards; animation-play-state: paused; }
[data-show][data-running] .show__tab.is-current .show__tab-fill { animation-play-state: running; }
@keyframes show-fill { to { transform: scaleX(1); } }
.show__pause, .models__pause, .deck__pause { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); cursor: pointer; transition: transform var(--d-spring) var(--e-spring); }
.show__bar .show__pause { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.show__bar .show__pause:hover { background: var(--veil); }
.no-js .show__bar { display: none; }
.no-js .show__cap { padding-right: var(--s-1); }
@media (max-width: 599.98px) {
  .show__media { border-radius: 28px; }
  .show__cap { padding-right: var(--s-1); }
  .show__bar { grid-area: 2 / 1; justify-self: start; align-self: start; padding-top: 0; margin-left: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .show__tab.is-current .show__tab-fill { animation: none; transform: scaleX(1); }
}
:is(.show__pause, .models__pause, .deck__pause) svg { width: 18px; height: 18px; }
:is(.show__pause, .models__pause, .deck__pause):active { transform: scale(0.9); transition-duration: 100ms; }
/* site.js swaps the pause/play icons with [hidden]. */
.no-js :is(.show__pause, .models__pause, .deck__pause) { display: none; }

/* the finder (/products/, 404, the palette) */
.finder { margin-top: var(--s-5); }
.finder--full, .notfound .finder { max-width: 48rem; margin-top: 0; margin-bottom: clamp(var(--s-7), 5vw, var(--s-8)); }
.finder__label { margin-bottom: var(--s-2); color: var(--ink); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.finder__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }
.finder__search { position: relative; }
.finder__input {
  width: 100%;
  min-height: 64px;
  padding: var(--s-4) 72px var(--s-4) var(--s-5);
  border: 1px solid var(--field-line);
  border-radius: var(--r-pill);
  background: var(--canvas);
  color: var(--ink);
  font: 400 var(--t-input)/var(--t-input-lh) var(--f-sans);
  letter-spacing: var(--t-input-tr, -0.03em);
  -webkit-appearance: none;
  appearance: none;
}
.finder__input::placeholder { color: var(--ink-3); opacity: 1; }
.finder__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.finder__input:focus { border-color: var(--copper); }
.finder__go { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--copper); color: var(--on-copper); cursor: pointer; transition: transform var(--d-spring) var(--e-spring); }
.finder__go svg { width: 20px; height: 20px; }
.finder__go:hover { background: var(--copper-deep); }
.finder__go:active { transform: scale(0.92); transition-duration: 100ms; }
.finder__results { margin-top: var(--s-4); }
.finder__results:empty { display: none; }
.finder__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
@media (min-width: 600px) { .finder__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.finder__all { margin-top: var(--s-2); }
.finder__empty { color: var(--ink-2); font: 400 var(--t-body)/var(--t-body-lh) var(--f-sans); }
.fcard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-sm); background: var(--canvas); animation: spring-pill var(--d-spring) var(--e-spring) both; }
.fcard:nth-child(2) { animation-delay: 40ms; } .fcard:nth-child(3) { animation-delay: 80ms; } .fcard:nth-child(4) { animation-delay: 120ms; }
.fcard__link { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s-3); align-items: center; min-width: 0; border-radius: 8px; }
.fcard__img { grid-row: span 2; width: 56px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--card-2); }
.fcard .code { align-self: end; }
.fcard__name { overflow: hidden; align-self: start; color: var(--ink); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); white-space: nowrap; text-overflow: ellipsis; }
.fcard__add { min-height: 44px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: none; color: var(--copper); font: 500 var(--t-label)/1 var(--f-sans); white-space: nowrap; cursor: pointer; }
.fcard__add:hover { background: var(--veil); }
.fcard__add[data-in-tray="true"] { color: var(--ok); }
@media (max-width: 379.98px) { .fcard { grid-template-columns: minmax(0, 1fr); } .fcard__add { justify-self: start; } }
.marks-mini { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.marks-mini__img { width: auto; height: var(--mark-h); opacity: 0.85; }
.marks-mini__img[src*="/ce.svg"] { height: calc(var(--mark-h) * 1.2); }
.marks-mini__img:is([src*="/rohs.svg"], [src*="/reach.svg"], [src*="/iso9001.svg"]) { height: calc(var(--mark-h) * 0.72); }
.marks-mini__img[src*="/bsci.svg"] { height: calc(var(--mark-h) * 1.3); }

/* partner logos at equal optical area: h = sqrt(area / aspect), so a wide wordmark gets shorter
   and a compact mark taller and none reads louder. --ar is each file's width / height. */
[data-brand="wal"] { --ar: 8.391; } [data-brand="sharp"] { --ar: 7.021; } [data-brand="amazon"] { --ar: 3.276; }
[data-brand="victrola"] { --ar: 4.912; } [data-brand="loewe"] { --ar: 4.457; } [data-brand="blaupunkt"] { --ar: 9; }
[data-brand="lenco"] { --ar: 4.368; } [data-brand="hisense"] { --ar: 6.229; } [data-brand="bed"] { --ar: 3.533; } [data-brand="kohls"] { --ar: 7.56; }
.logos__img { width: auto; height: calc(sqrt(1300 / var(--ar, 6)) * 1px); filter: brightness(0); opacity: 0.55; }

/* -- models: three rows of the 42, full-bleed ------------------------------------------------- */
.models { padding-block: var(--section-y); }
.models__head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; column-gap: var(--s-5); margin-bottom: clamp(var(--s-5), 3vw, var(--s-6)); }
.models__head > :is(h2, p) { grid-column: 1; }
.models__head > p { margin-top: var(--s-3); max-width: 46ch; color: var(--ink-2); font: 400 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); }
.models__head > .link { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.models__head > .models__pause { grid-column: 3; grid-row: 1 / span 2; align-self: end; border: 1px solid var(--rule); background: var(--canvas); }
/* Each row is its own scroller in A (by hand); motion.js drifts it in B. The block clips, never scrolls the page. */
.models__rows { display: grid; gap: var(--s-3); overflow-x: clip; }
/* Each row sits in a still lane; on the side the products enter from, a veil of the page
   colour with a light blur, so they surface softly instead of being cut by the edge. */
.models__lane { position: relative; min-width: 0; overflow-x: clip; }   /* a grid item: min-width 0, or the lane grows to the whole row (4,210 px) */
.models__lane::before, .models__lane::after { content: ""; position: absolute; inset-block: 0; z-index: 1; pointer-events: none; }
.models__lane::before { width: clamp(72px, 16vw, 260px); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.models__lane::after { width: clamp(40px, 6vw, 96px); }
.models__lane[data-side="left"]::before { left: 0; background: linear-gradient(to right, var(--canvas) 12%, rgb(var(--canvas-rgb) / 0)); -webkit-mask-image: linear-gradient(to right, var(--ink) 35%, transparent); mask-image: linear-gradient(to right, var(--ink) 35%, transparent); }
.models__lane[data-side="left"]::after { right: 0; background: linear-gradient(to left, var(--canvas), rgb(var(--canvas-rgb) / 0)); }
.models__lane[data-side="right"]::before { right: 0; background: linear-gradient(to left, var(--canvas) 12%, rgb(var(--canvas-rgb) / 0)); -webkit-mask-image: linear-gradient(to left, var(--ink) 35%, transparent); mask-image: linear-gradient(to left, var(--ink) 35%, transparent); }
.models__lane[data-side="right"]::after { left: 0; background: linear-gradient(to right, var(--canvas), rgb(var(--canvas-rgb) / 0)); }
.models__row { display: flex; gap: var(--s-3); padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.models__row::-webkit-scrollbar { display: none; }
.models__item { flex: none; width: clamp(112px, 9.4vw, 136px); }
.models__link { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-sm); background: var(--card); }
.models__link img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-ui-slow) var(--e-out); }
.models__link:is(:hover, :focus-visible) img { transform: scale(1.04); }
.models__label { position: absolute; right: var(--s-2); bottom: var(--s-2); left: var(--s-2); overflow: hidden; padding: var(--s-2) var(--s-3); border-radius: 10px; background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); font: 500 var(--t-micro)/var(--t-micro-lh) var(--f-sans); white-space: nowrap; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity var(--d-ui) var(--e-out), transform var(--d-ui) var(--e-out); }
.models__label .code { display: block; font-size: var(--t-micro); line-height: var(--t-micro-lh); }
.models__link:is(:hover, :focus-visible) .models__label { opacity: 1; transform: none; }
/* Touch: no hover, so the full label would sit on the product for good. Only the code shows,
   a small pill in the top-left corner; the name is in the link's accessible text either way. */
@media (hover: none), (pointer: coarse) {
  .models__label { right: auto; bottom: auto; top: var(--s-1); left: var(--s-1); padding: 2px var(--s-2); border-radius: var(--r-pill); font-size: 11px; opacity: 1; transform: none; }
  .models__label .models__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .models__label .code { font-size: 11px; }
}
@media (max-width: 599.98px) { .models__head { grid-template-columns: minmax(0, 1fr) auto; } .models__head > .link { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--s-2); } .models__head > .models__pause { grid-column: 2; grid-row: 3; } }

/* -- proof rows: living tile + one H2 + one line + one verb-link ------------------------------ */
.rows .wrap { display: grid; gap: clamp(40px, 3.4vw, 48px); }
.row { display: grid; gap: var(--s-6); align-items: center; }
.tile { width: 100%; max-width: 380px; border-radius: var(--r-tile); }
@media (max-width: 899.98px) { .row > .tile { justify-self: center; } }
.row__copy { max-width: 30rem; }
.row__copy > p { margin-top: var(--s-4); color: var(--ink-2); font: 400 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); }
.row__copy > .link { margin-top: var(--s-4); }
@media (min-width: 900px) {
  .row { grid-template-columns: minmax(0, 380px) minmax(0, 30rem); justify-content: center; column-gap: clamp(var(--s-8), 8vw, var(--s-10)); }
  .row--flip { grid-template-columns: minmax(0, 30rem) minmax(0, 380px); }
  .row--flip > .tile { order: 2; }
}
.brand-field__label { display: block; margin-top: var(--s-5); margin-bottom: var(--s-2); color: var(--ink); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.brand-field__input { width: 100%; max-width: 20rem; min-height: 52px; padding: 0 var(--s-5); border: 1px solid var(--field-line); border-radius: var(--r-pill); background: var(--canvas); color: var(--ink); font: 500 var(--t-body-lg)/1 var(--f-sans); letter-spacing: 0.02em; text-transform: uppercase; }
.brand-field__input::placeholder { color: var(--ink-3); opacity: 1; text-transform: none; letter-spacing: 0; }
.brand-field__input:focus { border-color: var(--copper); }
.markets { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.market { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-pill); background: var(--canvas); color: var(--ink-2); font: 500 var(--t-label)/1 var(--f-sans); cursor: pointer; transition: transform var(--d-spring) var(--e-spring); }
.market:hover { border-color: var(--ink-3); color: var(--ink); }
.market:active { transform: scale(0.95); }
.market:has(:checked) { border-color: var(--ink); background: var(--ink); color: var(--canvas); }
.market:has(:focus-visible) { outline: 2px solid var(--copper-line); outline-offset: 2px; }
.market__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.markets__note { margin-top: var(--s-3); color: var(--ink-3); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.markets-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.markets-list li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-5); border-radius: var(--r-pill); background: var(--canvas); color: var(--ink); font: 500 var(--t-body)/1 var(--f-sans); }

/* -- trust: brands, markets, standards ------------------------------------------------------- */
.trust { padding-block: var(--section-y); }
.trust__head { margin-bottom: clamp(var(--s-5), 3vw, var(--s-6)); }
.trust__head > h2 { max-width: 22ch; }
.trust__head > p { margin-top: var(--s-3); max-width: 50ch; color: var(--ink-2); font: 400 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); }
.trust__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.trust__map { position: relative; min-width: 0; overflow: hidden; border-radius: var(--r-tile); background: var(--card); }
.trust__panel { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: clamp(var(--s-5), 3vw, var(--s-6)); border-radius: var(--r-tile); background: var(--card); }
.trust__region { color: var(--ink); font: 500 var(--t-h2)/var(--t-h2-lh) var(--f-sans); letter-spacing: var(--t-h2-tr); }
.trust__marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--s-2); }
.trust__marks .stamp, .trust__note { display: grid; grid-template-rows: 48px auto; justify-items: center; align-items: center; gap: var(--s-2); min-height: 128px; padding: var(--s-4) var(--s-3); border-radius: var(--r-sm); background: var(--canvas); color: var(--ink-3); text-align: center; font: 500 var(--t-micro)/var(--t-micro-lh) var(--f-sans); animation: spring-pill var(--d-spring) var(--e-spring) both; }
/* ILUSTRA's tile styles .stamp in cqw; in the panel the stamp is a plain card. */
.trust__marks .stamp { position: static; flex-direction: column; }
.trust__marks .stamp::after { content: none; }
.trust__marks .stamp__img { width: auto; max-width: 100%; height: 32px; }
.trust__marks .stamp[data-mark="ce"] .stamp__img { height: 38px; }
.trust__marks .stamp:is([data-mark="rohs"], [data-mark="reach"]) .stamp__img { height: 23px; }
.trust__marks .stamp__cap { color: var(--ink-3); font: 500 var(--t-micro)/var(--t-micro-lh) var(--f-sans); white-space: normal; }
.trust__marks .stamp:nth-child(2) { animation-delay: 60ms; } .trust__marks .stamp:nth-child(3) { animation-delay: 120ms; }
.trust__note { display: flex; grid-template-rows: none; color: var(--ink-2); font: 500 var(--t-body)/var(--t-body-lh) var(--f-sans); }
.trust__fcc a { color: var(--copper); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.trust__fcc a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.trust__audits { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-5); color: var(--ink-2); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.trust__audit { display: inline-flex; align-items: center; gap: var(--s-2); }
.trust__audit-img { width: auto; height: 18px; margin-right: var(--s-1); }
.trust__audit-img[src*="/bsci.svg"] { height: 28px; }
.trust__audit-name { color: var(--ink); font-weight: 500; }
@media (max-width: 599.98px) { .trust__audits { display: grid; gap: var(--s-3); } .trust__audit { flex-wrap: wrap; } }
.trust__brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: clamp(var(--s-5), 3vw, var(--s-6)); }
.trust__brand { display: grid; place-items: center; min-height: 96px; padding: var(--s-4); border-radius: var(--r-sm); background: var(--card); }
.trust__logo { width: auto; max-width: 100%; height: calc(sqrt(2800 / var(--ar, 6)) * 1px); filter: brightness(0); opacity: 0.72; transition: opacity var(--d-ui) var(--e-out); }
.trust__brand:hover .trust__logo { opacity: 1; }
@media (min-width: 900px) {
  .trust__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .trust__brands { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); }
  .trust__brand { min-height: 76px; }
  .trust__logo { height: calc(sqrt(5184 / var(--ar, 6)) * 1px); }
}

/* -- timeline: day 0 to day 90–100, four evenly spaced stages; the numbers --------------------- */
.timeline { padding-block: var(--section-y); }
.timeline h2 { max-width: 30ch; }
.tl { margin-top: clamp(var(--s-5), 3vw, var(--s-7)); }
.tl__axis { display: flex; justify-content: space-between; margin-bottom: var(--s-3); color: var(--ink-3); font: 500 var(--t-label)/1 var(--f-sans); font-variant-numeric: tabular-nums; }
.tl__bar { position: relative; height: 4px; overflow: hidden; border-radius: var(--r-pill); background: var(--rule); }
.tl__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--copper-line); transform: scaleX(var(--p, 1)); transform-origin: left; }
.tl__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin-top: -10px; }
.tl__step { position: relative; display: grid; align-content: start; gap: var(--s-2); padding-top: var(--s-6); }
.tl__step::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border: 3px solid var(--canvas); border-radius: var(--r-pill); background: var(--copper); box-shadow: 0 0 0 1px var(--copper-line); transition: transform var(--d-spring) var(--e-spring); }
.tl__step.is-lit::before { transform: scale(1.15); }
.tl__n { color: var(--copper); font: 600 var(--t-code)/1 var(--f-sans); }
.tl__t { color: var(--ink); font: 500 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); letter-spacing: -0.01em; }
.tl__d { color: var(--ink-2); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); max-width: 30ch; }
@media (max-width: 899.98px) {
  .tl__bar, .tl__axis > :last-child { display: none; }
  .tl__steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin: var(--s-2) 0 0 7px; padding-left: var(--s-6); border-left: 2px solid var(--copper-line); }
  .tl__step { padding-top: 0; }
  .tl__step::before { top: 2px; left: calc(-1 * var(--s-6) - 9px); }
  .tl__axis { margin-bottom: var(--s-2); }
}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--s-3); margin-top: clamp(var(--s-6), 3.5vw, var(--s-7)); }
.stats > .stat, .stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-radius: var(--r-tile); background: var(--card); font: inherit; letter-spacing: 0; }
.stat__label, .stats dt { color: var(--ink-3); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.stat__value, .stats dd { color: var(--ink-2); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.stat__num { display: block; margin-bottom: var(--s-2); color: var(--ink); font: 500 var(--t-h2)/1.05 var(--f-sans); letter-spacing: var(--t-h2-tr); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat__note { display: block; color: var(--ink-3); }
@media (max-width: 599.98px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Five stats, every row full: 3 + 2 on a 6-track grid between 600 and 1200, five across above. */
@media (min-width: 600px) {
  .stats:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .stats:has(> :nth-child(5):last-child) > :nth-child(n + 4) { grid-column: span 3; }
}
@media (min-width: 1200px) {
  .stats:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats:has(> :nth-child(5):last-child) > *, .stats:has(> :nth-child(5):last-child) > :nth-child(n + 4) { grid-column: auto; }
}

/* -- rails end to end: the first card sits under the section title, the row runs to the right
   edge of the viewport, trailing space = the gutter; controls in the section head --------------- */
:is(section, .band):has(.rail) { container-type: inline-size; }
.rail { --rail-pad: max(var(--gutter), (100cqw - var(--max)) / 2); }
.wrap .rail { margin-inline: calc(var(--rail-pad) * -1); }
.rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--s-5); padding-inline: var(--rail-pad) var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-pad); scrollbar-width: none; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__item { scroll-snap-align: start; }
@media (hover: hover) and (pointer: fine) { .rail__track { cursor: grab; } .rail__track[data-dragging] { cursor: grabbing; user-select: none; } .rail__track[data-dragging] a { pointer-events: none; } }
.rail__ctrl { display: flex; justify-content: flex-end; gap: var(--s-2); }
.new__head, .related__head { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3) var(--s-6); margin-bottom: clamp(var(--s-6), 3.5vw, var(--s-7)); }
:is(.new__head, .related__head) > h2 { margin-right: auto; }
:is(.new__head, .related__head, .band__head) > .rail__ctrl { order: 3; }
.rail > .rail__ctrl { margin: var(--s-5) var(--rail-pad) 0 0; }
.rail__btn { border: 1px solid var(--rule); color: var(--ink); }
.rail__btn:hover { border-color: var(--ink); }
.rail__btn:disabled { opacity: 0.35; cursor: default; transform: none; }
:is(.rail[data-overflow="false"], :has(> .rail[data-overflow="false"])) .rail__ctrl { display: none; }
@media (hover: none) and (pointer: coarse) { .rail__ctrl { display: none; } }
@media (min-width: 600px) { .rail__track { grid-auto-columns: calc((min(100cqw - 2 * var(--gutter), var(--max)) - var(--s-5)) / 2.2); } }
@media (min-width: 900px) { .rail__track { grid-auto-columns: calc((min(100cqw - 2 * var(--gutter), var(--max)) - 2 * var(--s-5)) / 3); } }
@media (min-width: 1200px) { .rail__track { grid-auto-columns: calc((min(100cqw - 2 * var(--gutter), var(--max)) - 4 * var(--s-5)) / 5); } }

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-8) var(--s-5); }
@media (max-width: 599.98px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-3); }
  .pgrid .pcard__tagline { display: none; }
}
.pcard { position: relative; }
.pcard__link { display: block; border-radius: var(--r-tile); }
.pcard__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-tile); background: var(--card); }
.pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-ui-slow) var(--e-out); }
.pcard__link:is(:hover, :focus-visible) .pcard__img { transform: scale(1.04); }
.pcard__body { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--s-1) 0; }
.pcard__code { display: flex; align-items: center; gap: var(--s-2); }
.pcard__name { color: var(--ink); font: 500 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); letter-spacing: -0.01em; text-wrap: balance; }
.pcard__tagline { display: block; color: var(--ink-3); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.pcard .swatches { margin-top: var(--s-2); }
.pcard__add { position: absolute; top: var(--s-3); right: var(--s-3); width: auto; min-width: 44px; background: var(--canvas); color: var(--ink); transition: opacity var(--d-ui) var(--e-out), transform var(--d-ui) var(--e-out); }
.pcard__add:hover { background: var(--copper); color: var(--on-copper); }
.pcard .pcard__add:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .pcard__add { opacity: 0; transform: scale(0.9); }
  .pcard:is(:hover, :focus-within) .pcard__add { opacity: 1; transform: none; }
  .pcard .pcard__add:active { transform: scale(0.92); }
}
.pcard__add[data-in-tray="true"] { background: var(--copper); color: var(--on-copper); opacity: 1; transform: none; }
.btn--primary[data-in-tray="true"] { background: var(--copper-deep); }
.no-js :is(.pcard__add, .fcard__add, .rail__ctrl, .hdr__quote, .hdr__tray) { display: none; }
@media (max-width: 599.98px) { .pgrid .pcard__add { top: var(--s-2); right: var(--s-2); } .pgrid .pcard__name { font-size: var(--t-body); line-height: var(--t-body-lh); } }

/* -- deck: the 2026 catalogue, the record half out of its sleeve ------------------------------- */
.deck { padding: var(--section-y) var(--gutter); }
/* Home CTA (11/10/2026): the record + the quote form in one card. The record reuses
   .sleeve / .record from the old catalogue block; --qp (site.js) pulls it out. */
.qdeck { padding: var(--section-y) var(--gutter); overflow-x: clip; }
.qdeck__card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); max-width: calc(var(--max) + 2 * var(--s-8)); margin-inline: auto; padding: clamp(var(--s-5), 5vw, var(--s-9)); border-radius: var(--r-card); background: var(--card); }
@media (min-width: 960px) { .qdeck__card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; column-gap: var(--s-9); } }
.qdeck__art { position: relative; width: 100%; max-width: 520px; aspect-ratio: 100 / 62; margin-inline: auto; }
@media (max-width: 959px) { .qdeck__art { max-width: 420px; } }
.qdeck .sleeve--brand { display: flex; flex-direction: column; justify-content: space-between; padding: 9%; background: var(--copper); color: var(--canvas); }
.qdeck .sleeve--brand .sleeve__logo { width: 46%; height: auto; color: var(--canvas); }
.sleeve__title { font: 400 clamp(1.5rem, 3.4vw, 2.6rem)/1.02 var(--f-serif); letter-spacing: var(--t-serif-tr); }
.sleeve__meta { font: 500 var(--t-micro)/1.2 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; opacity: .82; }
.qdeck .record__slide { width: 100%; height: 100%; transform: translateX(calc(var(--qp, 0) * var(--qtravel, 30%))); }
@media (max-width: 599px) { .qdeck { --qtravel: 16%; } }
html[data-motion="on"] .qdeck .record__slide { transition: transform 700ms cubic-bezier(.34, 1.3, .64, 1); }
@media (prefers-reduced-motion: reduce) { html[data-motion="on"] .qdeck .record__slide { transition: none; } }
.qdeck__head h2 { font: 400 var(--t-serif)/var(--t-serif-lh) var(--f-serif); letter-spacing: var(--t-serif-tr); }
.qdeck__head > p { margin-top: var(--s-3); color: var(--ink-2); font: 400 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); }
.qdeck__ticks { display: grid; gap: var(--s-2); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.qdeck__ticks li { position: relative; padding-left: 30px; color: var(--ink); font: 500 var(--t-body)/1.45 var(--f-sans); }
.qdeck__ticks li::before { content: ""; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%; background: var(--copper); }
.qdeck__ticks li::after { content: ""; position: absolute; left: 7px; top: calc(.15em + 5px); width: 5px; height: 9px; border: solid var(--canvas); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.qdeck .qcard { margin-top: var(--s-6); padding: 0; background: none; }
.qdeck .quote__alt { margin-top: var(--s-4); }

.deck__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: center; max-width: calc(var(--max) + 2 * var(--s-8)); margin-inline: auto; padding: clamp(var(--s-6), 3.5vw, var(--s-7)); border-radius: var(--r-card); background: var(--card); }
.deck__art { position: relative; width: 100%; max-width: 560px; aspect-ratio: 100 / 62; }
.sleeve { position: absolute; top: 0; left: 0; z-index: 1; width: 62%; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--card-2); box-shadow: var(--shadow-float); }
.sleeve__img { width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; }
/* 95% of the sleeve, centred on its right edge; placed without transform (motion.js owns it). */
.record { position: absolute; inset-block: 0; left: 32.5%; width: 59%; margin-block: auto; aspect-ratio: 1; }
.record svg { width: 100%; height: 100%; }
.deck__pause { position: absolute; right: 0; bottom: 0; z-index: 2; }
.deck__copy { max-width: 30rem; }
.deck__title { font: 400 var(--t-serif)/var(--t-serif-lh) var(--f-serif); letter-spacing: var(--t-serif-tr); }
.deck__copy > p, .deck__meta { margin-top: var(--s-4); color: var(--ink-2); font: 400 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); }
.deck__copy > :is(.btn, .link) { margin-top: var(--s-6); margin-right: var(--s-5); }
.deck__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-6); }
@media (min-width: 900px) { .deck__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(var(--s-7), 6vw, var(--s-10)); } }

/* -- quote: the end of the journey --------------------------------------------------------- */
.quote__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
.quote__head > .lead { margin-top: var(--s-4); }
.quote--page .quote__head h1 { font: 400 var(--t-serif)/var(--t-serif-lh) var(--f-serif); letter-spacing: var(--t-serif-tr); }
.quote--page { padding-top: clamp(var(--s-8), 8vw, var(--s-10)); }
@media (min-width: 900px) { .quote__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(var(--s-7), 6vw, var(--s-10)); align-items: start; } .quote__head { position: sticky; top: calc(var(--hdr-h) + var(--s-6)); } }
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
.person { padding: var(--s-5); border-radius: var(--r-sm); background: var(--card); }
.person__name { color: var(--ink); font: 500 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); }
.person__line { margin-top: var(--s-1); color: var(--ink-2); }
.person__line a { color: var(--copper); }
.person__wechat { color: var(--ink-3); font-size: var(--t-label); }
.office { display: grid; gap: var(--s-3); margin-top: var(--s-6); color: var(--ink-2); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.office li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-3); }
.office__label { color: var(--ink-3); font-weight: 500; }
.office a { color: var(--copper); }
.quote__head .marks-mini { margin-top: var(--s-6); }
.qform { display: grid; gap: var(--s-5); padding: clamp(var(--s-5), 4vw, var(--s-7)); border-radius: var(--r-card); background: var(--card); }
.qform__step { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); min-width: 0; padding: 0; border: 0; }
.qform__legend { margin-bottom: var(--s-2); padding: 0; color: var(--ink-3); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.qform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
@media (min-width: 600px) { .qform:not(.qform--compact) .qform__step[data-step-2] { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); } .qform__step[data-step-2] > :is(.field--wide, .qform__actions, legend) { grid-column: 1 / -1; } }

/* fields */
.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.field__label { color: var(--ink); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.field__opt { margin-left: var(--s-1); color: var(--ink-3); font-weight: 400; }
.field__input { width: 100%; min-height: 52px; padding: var(--s-3) var(--s-4); border: 1px solid var(--field-line); border-radius: var(--r-sm); background: var(--canvas); color: var(--ink); font: 400 var(--t-body)/1.4 var(--f-sans); -webkit-appearance: none; appearance: none; }
.field__input::placeholder { color: var(--ink-3); opacity: 1; }
.field__input:hover { border-color: var(--ink-2); }
.field__input:focus { border-color: var(--copper); }
.field__input[aria-invalid="true"] { border-color: var(--danger); }
textarea.field__input { min-height: 140px; resize: vertical; }
select.field__input { padding-right: var(--s-8); background: var(--canvas) var(--chevron) no-repeat right var(--s-4) center; }
.field__error { color: var(--danger); font: 500 var(--t-label)/1.4 var(--f-sans); }
.field__hint { align-self: flex-start; color: var(--copper); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.field__hint:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.models { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.models:empty { display: none; }
.models__chip { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 40px; padding: 0 var(--s-1) 0 var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-pill); background: var(--canvas); animation: spring-pill var(--d-spring) var(--e-spring) both; }
.models__chip button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-3); font: 400 1.125rem/1 var(--f-sans); cursor: pointer; }
.models__chip button:hover { background: var(--veil); color: var(--ink); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.form__status { color: var(--ink-2); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.form__status:empty { display: none; }
.form { display: grid; gap: var(--s-4); }
@media (min-width: 600px) { .form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form > :is(.field--wide, .field--models, .form__status, .btn) { grid-column: 1 / -1; } .form > .btn { justify-self: start; } }
/* -- quote: one card --------------------------------------------------------------------------- */
.quote__alt { margin-top: var(--s-4); color: var(--ink-2); font: 400 var(--t-body)/var(--t-body-lh) var(--f-sans); }
.quote__alt a { color: var(--copper); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.qcard { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding: clamp(var(--s-5), 4vw, var(--s-7)); border-radius: var(--r-card); background: var(--card); }
.field__input--lg, .qcard .field--email .field__input { min-height: 60px; padding-inline: var(--s-5); border-radius: var(--r-pill); font: 400 var(--t-input)/var(--t-input-lh) var(--f-sans); letter-spacing: var(--t-input-tr, -0.03em); }
.picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.picker legend, .picker__legend { margin-bottom: var(--s-2); padding: 0; color: var(--ink); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.picker__input { width: 100%; min-height: 52px; padding: var(--s-3) var(--s-5); border: 1px solid var(--field-line); border-radius: var(--r-pill); background: var(--canvas); color: var(--ink); font: 400 var(--t-body)/1.4 var(--f-sans); -webkit-appearance: none; appearance: none; }
.picker__input::placeholder { color: var(--ink-3); opacity: 1; }
.picker__input:focus { border-color: var(--copper); }
.picker__results { display: grid; gap: 2px; max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-2); border-radius: var(--r-sm); background: var(--canvas); box-shadow: var(--shadow-float); }
.picker__results:empty { display: none; }
.picker__opt, .picker__results > li { display: grid; grid-template-columns: 44px auto minmax(0, 1fr); align-items: center; gap: 0 var(--s-3); min-height: 52px; padding: var(--s-1) var(--s-3); border-radius: 10px; cursor: pointer; animation: spring-pill var(--d-spring) var(--e-spring) both; }
.picker__opt:is(:hover, [aria-selected="true"], .is-active) { background: var(--card); box-shadow: inset 3px 0 0 var(--copper); }
.picker__opt[data-in-tray="true"] .code::after { content: " ✓"; color: var(--ok); }
.picker__img, .picker__results img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--card-2); }
.picker__results :is(.picker__name, span:last-child) { overflow: hidden; color: var(--ink-2); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); white-space: nowrap; text-overflow: ellipsis; }
.picker__chosen { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.picker__chosen:empty { display: none; }
.picker__chosen .models__chip, .picker__chosen > li { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 52px; max-width: 100%; padding: var(--s-1); border: 1px solid var(--rule); border-radius: 12px; background: var(--canvas); animation: spring-pill var(--d-spring) var(--e-spring) both; }
.picker__chosen img { width: 40px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--card-2); }
.picker__chosen .models__name { overflow: hidden; min-width: 0; max-width: 12rem; color: var(--ink-2); font: 400 var(--t-micro)/var(--t-micro-lh) var(--f-sans); white-space: nowrap; text-overflow: ellipsis; }
.picker__chosen button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-3); font: 400 1.125rem/1 var(--f-sans); cursor: pointer; }
.picker__chosen button:hover { background: var(--veil); color: var(--ink); }
/* qcard clássico (09/10/2026): todos os campos à vista; duas colunas a partir de 600px, uma na gaveta */
.qcard__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 600px) { .qcard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); } .qcard__grid > .field--wide { grid-column: 1 / -1; } }
.qcard__grid .picker__input { border-radius: var(--r-sm); padding-inline: var(--s-4); }
.qcard__send { justify-self: stretch; }
.qcard__status { color: var(--ink-2); font: 500 var(--t-body)/var(--t-body-lh) var(--f-sans); }
.qcard__status:empty { display: none; }
.qcard__status[data-tone="ok"], .qcard__status[data-tone="success"] { padding: var(--s-5); border-radius: var(--r-sm); background: var(--canvas); color: var(--ok); box-shadow: inset 3px 0 0 var(--ok); }
.qcard__status[data-tone="error"] { color: var(--danger); }
/* Done: site.js sets form[data-state="done"], hides the other children and shows the panel.
   ::before is the copper check slot (motion.js may draw it in B via WAAPI pseudoElement). */
.qcard__done, [data-form-success] { display: grid; justify-items: start; gap: var(--s-3); padding: clamp(var(--s-5), 3vw, var(--s-7)); border-radius: var(--r-sm); background: var(--canvas); color: var(--ink-2); animation: spring-pill var(--d-spring) var(--e-spring) both; }
.qcard__done:focus { outline: none; }
.qcard__done:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.qcard__done::before, [data-form-success]::before { content: ""; width: 48px; height: 48px; margin-bottom: var(--s-2); border-radius: var(--r-pill); background: var(--copper) var(--i-check) center / 24px no-repeat; }
.qcard__done-title, [data-form-success] :is(h2, h3) { color: var(--ink); font: 500 var(--t-h2)/var(--t-h2-lh) var(--f-sans); letter-spacing: var(--t-h2-tr); }
.qcard__done-text { max-width: 44ch; color: var(--ink-2); font: 400 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); }
.qcard[data-state="done"] { gap: 0; }
.qcard[data-state="done"] > :not(.qcard__done, [data-form-success]) { display: none; }
.picker .field__error { margin-top: calc(var(--s-1) * -1); }
.drawer .qcard, .qcard--compact { gap: var(--s-4); padding: var(--s-5) var(--s-6) var(--s-7); border-radius: 0; background: none; }
.qcard--compact .qcard__grid { grid-template-columns: minmax(0, 1fr); }
.btn--lg { min-height: 56px; padding-inline: var(--s-6); font-size: var(--t-body-lg); }
.link--lg { font-size: var(--t-body-lg); }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* -- overlays: drawer, quote list (tray), scrim, toast, palette, viewer ----------------------------
   site.js removes [hidden], sets [data-open] on the next frame and restores [hidden] only after the
   transition, so the closed state is the resting one. */
.drawer, .tray {
  position: fixed;
  top: var(--s-2);
  right: var(--s-2);
  bottom: var(--s-2);
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(480px, calc(100% - 2 * var(--s-2)));
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--canvas);
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translateX(32px) scale(0.98);
  transition: transform var(--d-ui-slow) var(--e-out), opacity var(--d-ui-slow) var(--e-out);
}
:is(.drawer, .tray)[data-open="true"] { opacity: 1; transform: none; }
:is(.drawer__head, .tray__head) { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-6); border-bottom: 1px solid var(--rule); }
:is(.drawer__title, .tray__title) { font: 500 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); letter-spacing: -0.01em; }
.drawer { overflow-y: auto; overscroll-behavior: contain; }
.drawer__head { position: sticky; top: 0; z-index: 1; background: var(--canvas); }
.drawer__lead { padding: var(--s-5) var(--s-6) 0; color: var(--ink-2); font: 400 var(--t-body)/var(--t-body-lh) var(--f-sans); }
.drawer .qform { padding: var(--s-5) var(--s-6) var(--s-7); border-radius: 0; background: none; }
.tray__list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-2) var(--s-6); }
.tray__list:empty { display: none; }
.tray__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
.tray__img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--card-2); }
.tray__meta { display: grid; gap: 2px; min-width: 0; }
.tray__name { overflow: hidden; color: var(--ink-2); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); white-space: nowrap; text-overflow: ellipsis; }
.tray__empty { flex: 1; padding: var(--s-6); color: var(--ink-3); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.tray__foot { padding: var(--s-5) var(--s-6); border-top: 1px solid var(--rule); }
.tray__foot .btn { width: 100%; }
@media (max-width: 599.98px) {
  .drawer, .tray { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-height: calc(100dvh - var(--s-7)); border-radius: var(--r-card) var(--r-card) 0 0; transform: translateY(32px); }
}
.scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--scrim); opacity: 0; transition: opacity var(--d-ui-slow) var(--e-out); }
.scrim[data-open="true"] { opacity: 1; }

.toast {
  position: fixed;
  right: 0;
  bottom: var(--s-6);
  left: 0;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--canvas);
  font: 500 var(--t-label)/1.3 var(--f-sans);
  opacity: 0;
  filter: blur(8px);
  transform: translateY(8px) scale(0.86);
  transition: transform var(--d-spring) var(--e-spring), opacity var(--d-ui) var(--e-out), filter var(--d-spring) var(--e-out);
}
.toast[data-open="true"] { opacity: 1; filter: none; transform: none; }
@media (max-width: 599.98px) { body:has(.bar, .pbar) .toast { bottom: calc(var(--bbar-h) + var(--s-4)); } }
body:has(:is(.tray, .drawer)[data-open="true"]) .toast { bottom: calc(var(--s-6) + 88px); }
.toast__text { min-width: 0; }
.toast__undo { flex: none; min-height: 36px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: var(--wash-on-ink); color: var(--canvas); font: 500 var(--t-label)/1 var(--f-sans); cursor: pointer; }

.palette { width: min(640px, calc(100% - 2 * var(--s-4))); max-width: none; max-height: min(560px, calc(100dvh - 2 * var(--s-8))); margin: 12vh auto auto; padding: 0; overflow: hidden; border: 0; border-radius: var(--r-card); background: var(--canvas); color: var(--ink-2); box-shadow: var(--shadow-float); opacity: 0; transform: translateY(-8px) scale(0.98); transition: opacity var(--d-ui-slow) var(--e-out), transform var(--d-ui-slow) var(--e-out), overlay var(--d-ui-slow) allow-discrete, display var(--d-ui-slow) allow-discrete; }
.palette[open] { display: flex; flex-direction: column; opacity: 1; transform: none; }
@starting-style { .palette[open] { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.palette::backdrop { background: var(--scrim); }
.palette__form { flex: none; border-bottom: 1px solid var(--rule); }
.palette__input { width: 100%; height: 64px; padding: 0 var(--s-6); border: 0; background: none; color: var(--ink); font: 400 var(--t-input)/1 var(--f-sans); -webkit-appearance: none; appearance: none; }
.palette__input:focus { outline: none; }
.palette__form:focus-within { border-bottom-color: var(--copper); }
.palette__list { overflow-y: auto; padding: var(--s-2); }
.palette__list:empty { display: none; }
.palette__link { display: grid; grid-template-columns: 44px auto minmax(0, 1fr); align-items: center; gap: 0 var(--s-4); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); }
.palette__link:hover, .palette__item[aria-selected="true"] .palette__link { background: var(--card); }
.palette__item[aria-selected="true"] .palette__link { box-shadow: inset 3px 0 0 var(--copper); }
.palette__img { grid-row: span 2; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--card-2); }
.palette__name { overflow: hidden; color: var(--ink-2); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); white-space: nowrap; text-overflow: ellipsis; }
.palette__meta { grid-column: 2 / -1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.palette__status { padding: var(--s-3) var(--s-6); border-top: 1px solid var(--rule); }
.palette__status:empty { display: none; }

.viewer { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: var(--s-9) var(--s-4) var(--s-6); overflow: hidden; border: 0; background: var(--ink); color: var(--canvas); opacity: 0; transition: opacity var(--d-ui-slow) var(--e-out), overlay var(--d-ui-slow) allow-discrete, display var(--d-ui-slow) allow-discrete; }
.viewer[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: var(--s-4); opacity: 1; }
@starting-style { .viewer[open] { opacity: 0; } }
.viewer::backdrop { background: var(--ink); }
.viewer__img { width: auto; max-width: 100%; height: auto; max-height: 100%; border-radius: var(--r-sm); object-fit: contain; transition: opacity var(--d-ui) var(--e-out); }
.viewer[data-loading] .viewer__img { opacity: 0.35; }
.viewer__btn, .viewer__close { position: absolute; width: 48px; height: 48px; background: var(--wash-on-ink); color: var(--canvas); }
.viewer__prev { top: 50%; left: var(--s-4); margin-top: -24px; }
.viewer__next { top: 50%; right: var(--s-4); margin-top: -24px; }
.viewer__close { top: var(--s-4); right: var(--s-4); }
.viewer .meta { color: var(--card-2); }
@media (max-width: 899.98px) { .viewer { padding-bottom: var(--s-10); } .viewer__prev, .viewer__next { top: auto; bottom: var(--s-5); margin-top: 0; } }

/* -- footer (light, endorsement) -------------------------------------------------------------- */
.ftr { padding-block: var(--s-7) var(--s-6); border-top: 1px solid var(--rule); background: var(--canvas); color: var(--ink-2); }
.ftr__brand { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-5) var(--s-7); padding-bottom: var(--s-6); }
.ftr__logo { display: block; color: var(--copper-line); }
.ftr__logo svg { width: auto; height: clamp(44px, 6vw, 76px); }
.ftr__motto { max-width: 20ch; color: var(--ink); font: 400 var(--t-serif)/var(--t-serif-lh) var(--f-serif); letter-spacing: var(--t-serif-tr); text-align: right; }
.ftr__cols { display: grid; gap: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--rule); }
.ftr__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.ftr__head { margin-bottom: var(--s-2); color: var(--ink-3); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.ftr__col > a { color: var(--ink-2); }
.ftr__col a:hover { color: var(--copper); }
.ftr__person, .ftr__office { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: var(--s-3); }
.ftr__name { color: var(--ink); font-weight: 500; }
.ftr__person a, .ftr__office a { color: var(--ink-2); font-size: var(--t-label); line-height: var(--t-label-lh); }
.ftr__wechat, .ftr__hours { color: var(--ink-3); font-size: var(--t-label); line-height: var(--t-label-lh); }
.ftr__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); color: var(--ink-3); font: 400 var(--t-micro)/var(--t-micro-lh) var(--f-sans); }
.ftr__address { flex-basis: 100%; font-style: normal; }
.ftr__legal a { color: var(--ink-2); }
.ftr__legal a:hover { color: var(--copper); }
.ftr__lang a[aria-current="true"] { color: var(--ink); font-weight: 500; }
.ftr__copy { margin-left: auto; }
@media (min-width: 600px) { .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftr__cols > :last-child { grid-column: 1 / -1; } }
@media (min-width: 900px) { .ftr__cols > :last-child { grid-column: auto; } }
@media (min-width: 900px) { .ftr__cols { grid-template-columns: 1fr 1fr 1.6fr; } .ftr__contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); align-items: start; } .ftr__contact > .ftr__head, .ftr__contact > .ftr__hours { grid-column: 1 / -1; } }
@media (max-width: 599.98px) { .ftr__motto { text-align: left; } .ftr__copy { margin-left: 0; } }

/* -- products page, line header, filters -------------------------------------------------- */
.lhead { padding-block: clamp(var(--s-7), 7vw, var(--s-9)) clamp(var(--s-6), 5vw, var(--s-8)); }
.lhead .crumbs { margin-bottom: var(--s-5); }
.lhead__count { margin-top: var(--s-4); color: var(--ink-3); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.products { padding-top: 0; }
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-7); }
.filters__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip[data-filter="new"] + .chip[data-filter^="sec-"], .chip[data-filter^="sec-"] + .chip[data-filter^="f-"], .chip[data-filter="all"] + .chip[data-filter^="f-"], .chip[data-filter="new"] + .chip[data-filter^="f-"] { margin-left: var(--s-4); }
.filters__count { color: var(--ink-3); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.filters__query { margin-bottom: var(--s-5); }
.filters__empty { padding-block: var(--s-9); text-align: center; color: var(--ink-2); font: 400 var(--t-intro)/var(--t-intro-lh) var(--f-sans); }
.pgroups { display: grid; gap: var(--s-9); }
.pgroup__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-6); font: 500 var(--t-intro)/var(--t-intro-lh) var(--f-sans); letter-spacing: -0.02em; }
.pgroup__title .meta { margin-left: auto; }
.pgroup__num { color: var(--copper); font: 600 var(--t-code)/1 var(--f-sans); }
.psearch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3); max-width: 560px; margin-bottom: var(--s-7); }
.psearch .field__label { grid-column: 1 / -1; }
html:not(.no-js) .psearch { display: none; }
.psearch__results:empty { display: none; }
@media (max-width: 599.98px) {
  .filters__chips { flex-wrap: nowrap; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .filters__chips::-webkit-scrollbar { display: none; }
}
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); color: var(--ink-3); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.crumbs a:hover { color: var(--copper); }
.nf__lines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
.nf__line { display: flex; flex-direction: column; gap: var(--s-6); min-height: 140px; padding: var(--s-5); border-radius: var(--r-tile); background: var(--card); transition: transform var(--d-ui) var(--e-out); }
.nf__line:hover { transform: translateY(-2px); }
.nf__name { color: var(--ink); font: 500 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); }
.nf__count { margin-top: auto; color: var(--ink-3); font: 500 var(--t-label)/1 var(--f-sans); }

/* -- product page, Apple-style ------------------------------------------------------------- */
.pp__hero { padding: var(--s-4) var(--gutter) 0; }
.pp__hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); width: auto; max-width: calc(var(--max) + 2 * var(--s-8)); padding: clamp(var(--s-5), 5vw, var(--s-8)); border-radius: var(--r-card); background: var(--card); }
.pp__copy .crumbs { margin-bottom: var(--s-6); }
.pp__code { display: flex; align-items: center; gap: var(--s-3); min-height: 20px; }
.pp__name { margin-top: var(--s-3); }
.pp__h1code { display: block; margin-bottom: var(--s-3); font: 600 var(--t-code)/var(--t-code-lh) var(--f-sans); letter-spacing: 0.01em; }
.pp__h1name { display: block; max-width: 20ch; font: 400 var(--t-serif)/var(--t-serif-lh) var(--f-serif); letter-spacing: var(--t-serif-tr); color: var(--ink); }
@media (max-width: 359.98px) { .pp__h1name { font-size: 2rem; line-height: 1.15; } }
/* The name scales with its own column, not the viewport: at 900–1440 the copy column is narrow
   enough that a 64 px serif split even a joined last pair ("Bookshelf Speakers") mid-way. */
.pp__copy { container-type: inline-size; }
.pp__h1name { font-size: min(var(--t-serif), 12cqi); }
.pp__tagline { margin-top: var(--s-4); max-width: 30ch; color: var(--ink-2); font: 400 var(--t-intro)/var(--t-intro-lh) var(--f-sans); letter-spacing: -0.01em; }
.pp__finishes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.pp__label { color: var(--ink-3); font: 500 var(--t-label)/1 var(--f-sans); }
.pp__photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-tile); background: var(--card-2); }
.pp__photo img { width: 100%; height: auto; }
@media (min-width: 900px) {
  .pp__hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: clamp(var(--s-7), 5vw, var(--s-9)); }
  .pp__photo { aspect-ratio: 1; }
  .pp__photo img { height: 100%; object-fit: cover; }
}

/* the action bar: Apple's product bar, sticky at the top; a bottom bar on phones */
.pbar { position: sticky; top: 0; z-index: calc(var(--z-hdr) - 1); margin-top: var(--s-5); border-block: 1px solid var(--rule); background: var(--glass); -webkit-backdrop-filter: saturate(1.5) blur(20px); backdrop-filter: saturate(1.5) blur(20px); }
.pbar__in { display: flex; align-items: center; gap: var(--s-3); min-height: 64px; }
.pbar__id { display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; margin-right: auto; }
.pbar__name { overflow: hidden; color: var(--ink); font: 500 var(--t-body)/1.2 var(--f-sans); white-space: nowrap; text-overflow: ellipsis; }
.pbar .btn { min-height: 44px; padding-inline: var(--s-5); }
.pbar__add svg { width: 16px; height: 16px; }
@media (max-width: 899.98px) { .pbar__name { display: none; } .pbar__pdf { display: none; } }
@media (max-width: 599.98px) {
  body:has(.pbar) { padding-bottom: calc(var(--bbar-h) + env(safe-area-inset-bottom)); }
  .pbar { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: var(--z-bbar); margin: 0; border-width: 1px 0 0; }
  .pbar__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); min-height: 0; padding-block: var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom)); }
  .pbar__id { display: none; }
  .pbar .btn { min-height: 48px; padding-inline: var(--s-3); }
}

.highlights { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
/* Three or four highlights, never a half row: 4 → 2 × 2 → 4 across; 3 → one column → 3 across. */
@media (min-width: 600px) { .highlights:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .highlights:not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .highlights:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hl { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-7); min-height: clamp(200px, 20vw, 260px); padding: clamp(var(--s-5), 3vw, var(--s-6)); border-radius: var(--r-tile); background: var(--card); }
.hl__icon { width: 44px; height: 44px; color: var(--copper-line); stroke-width: 1.25; }
.hl__text { color: var(--ink); font: 500 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); letter-spacing: -0.01em; text-wrap: balance; }

.pp__specs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
.pp__specs h2 { margin-bottom: var(--s-6); }
.specs { columns: 2 17rem; column-gap: var(--s-8); }
.specs__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); break-inside: avoid; padding-block: var(--s-3); border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.specs__icon { width: 20px; height: 20px; margin-top: 0.15em; color: var(--copper-line); stroke-width: 1.5; }
.packing { width: 100%; }
.packing :is(th, td) { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: baseline; }
.packing th { color: var(--ink-3); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); white-space: nowrap; }
.packing td { color: var(--ink); font-variant-numeric: tabular-nums; }
.pp__note { margin-top: var(--s-5); color: var(--ink-3); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
@media (min-width: 900px) { .pp__specs-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(var(--s-7), 6vw, var(--s-10)); align-items: start; } }

.scenes { padding-bottom: var(--section-y); }
.scenes > .wrap { display: grid; gap: var(--s-4); }
.scene { margin: 0; }
.scene__img, .scene img { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r-card); object-fit: cover; background: var(--card-2); }
.scene__cap { margin-top: var(--s-3); padding-inline: var(--s-2); color: var(--ink-3); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
@media (min-width: 900px) { .scenes > .wrap { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); } .scene:only-child .scene__img { aspect-ratio: 16 / 9; } }

/* -- capabilities: the factory story ---------------------------------------------------------- */
.story { display: grid; gap: clamp(var(--s-8), 8vw, var(--s-10)); padding-bottom: var(--section-y); }
.story__step { display: grid; gap: var(--s-6); }
.story__media { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) + 2 * var(--s-8)); margin: 0 auto; overflow: hidden; border-radius: var(--r-card); background: var(--card-2); }
.story__img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.story__copy { display: grid; gap: var(--s-4) var(--s-8); align-items: end; }
.story__num { color: var(--copper); font: 600 var(--t-code)/1 var(--f-sans); }
.story__copy > p:not(.story__num) { max-width: 36ch; color: var(--ink-2); font: 400 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); }
.story__facts { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-8); }
.story__fact { display: grid; gap: var(--s-1); }
.story__n { color: var(--ink); font: 500 var(--t-serif)/1 var(--f-sans); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.story__l { color: var(--ink-3); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); }
@media (max-width: 899.98px) { .story__img { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) { .story__copy { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num facts" "h facts" "p facts"; } .story__num { grid-area: num; } .story__copy > h2 { grid-area: h; } .story__copy > p:not(.story__num) { grid-area: p; } .story__facts { grid-area: facts; justify-content: flex-end; } }
.modes__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.modes__col { padding: clamp(var(--s-5), 4vw, var(--s-7)); border-radius: var(--r-card); background: var(--card); }
.modes__col h3 { font: 500 var(--t-h2)/var(--t-h2-lh) var(--f-sans); letter-spacing: var(--t-h2-tr); }
.modes__label { margin-top: var(--s-6); color: var(--ink-3); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.modes__list { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.modes__list li { padding-left: var(--s-5); color: var(--ink-2); background: linear-gradient(var(--copper-line), var(--copper-line)) 0 0.7em / 10px 2px no-repeat; }
@media (min-width: 900px) { .modes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stages-band__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.stages-band__grid > .tile { justify-self: center; }
@media (min-width: 900px) { .stages-band__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(var(--s-7), 6vw, var(--s-10)); } }
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
.stage { padding: var(--s-5); border-radius: var(--r-tile); background: var(--card); }
.stage__num { display: block; margin-bottom: var(--s-5); color: var(--copper); font: 600 var(--t-code)/1 var(--f-sans); }
.stage h3 { font: 500 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); }
.stage p { margin-top: var(--s-2); color: var(--ink-2); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.cta { padding-inline: var(--gutter); }
.cta__in { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-6); max-width: calc(var(--max) + 2 * var(--s-8)); padding: clamp(var(--s-7), 6vw, var(--s-9)); border-radius: var(--r-card); background: var(--card); }
.cta__in h2 { max-width: 20ch; }
.cta__actions, .ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }

/* -- quality, about, catalogue ----------------------------------------------------------------- */
.certs__lead, .brands__lead, .recognition__lead { margin-top: var(--s-4); max-width: 52ch; color: var(--ink-2); font: 400 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); }
.marks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--s-3); margin-top: clamp(var(--s-6), 4vw, var(--s-8)); }
.mark { display: grid; grid-template-rows: 64px auto; justify-items: center; align-items: center; gap: var(--s-3); padding: var(--s-6) var(--s-4) var(--s-5); border-radius: var(--r-tile); background: var(--canvas); text-align: center; }
.mark__img { width: auto; max-width: 100%; height: calc(40px * var(--k, 1)); }
.mark--ce { --k: 1.2; } .mark--fcc { --k: 1.1; } .mark--rohs, .mark--reach, .mark--iso9001 { --k: 0.72; } .mark--bsci { --k: 1.3; }
.mark__cap { color: var(--ink-3); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.marks__sep { display: none; }
.marks__label { grid-column: 1 / -1; margin-top: var(--s-4); color: var(--ink-3); font: 500 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.certs__stat { display: flex; align-items: baseline; gap: var(--s-3); margin-top: var(--s-7); color: var(--ink-2); font: 400 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); }
.certs__fcc { margin-top: var(--s-3); }
.plaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--s-3); }
.plaque { padding: var(--s-6); border-radius: var(--r-tile); background: var(--card); }
.plaque__title { color: var(--ink); font: 500 var(--t-body-lg)/var(--t-body-lg-lh) var(--f-sans); }
.plaque__issuer, .plaque__year { margin-top: var(--s-3); color: var(--ink-3); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.plaques__note { margin-top: var(--s-5); color: var(--ink-3); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.brands__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.brands__item { display: grid; place-items: center; min-height: 128px; padding: var(--s-5); border-radius: var(--r-tile); background: var(--card); }
.brands__logo { max-width: 100%; height: auto; zoom: 0.75; filter: brightness(0); opacity: 0.7; transition: opacity var(--d-ui) var(--e-out); }
.brands__item:hover .brands__logo { opacity: 1; }
@media (min-width: 900px) { .brands__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .brands__logo { zoom: 0.8; } }
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; }
.mosaic__img { width: 100%; height: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-tile); object-fit: cover; background: var(--card-2); }
.mosaic__caption { grid-column: 1 / -1; margin-top: var(--s-2); color: var(--ink-3); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
@media (min-width: 900px) { .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spreads { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s-7) var(--s-5); }
.spread__link { display: block; border-radius: var(--r-sm); }
.spread__img { width: 100%; aspect-ratio: 1600 / 566; border-radius: var(--r-sm); object-fit: contain; background: var(--card); transition: transform var(--d-ui-slow) var(--e-out); }
.spread__link:is(:hover, :focus-visible) .spread__img { transform: scale(1.02); }
.spread__label { display: block; margin-top: var(--s-3); color: var(--ink-3); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }
.viewer__label { color: var(--card-2); font: 400 var(--t-label)/var(--t-label-lh) var(--f-sans); }

/* -- motion base: entrance "focus", spring pill ------------------------------------------------ */
@keyframes spring-pill { from { opacity: 0; transform: scale(0.86); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
[data-enter] > :nth-child(2) { --i: 1; } [data-enter] > :nth-child(3) { --i: 2; } [data-enter] > :nth-child(4) { --i: 3; }
[data-enter] > :nth-child(5) { --i: 4; } [data-enter] > :nth-child(6) { --i: 5; } [data-enter] > :nth-child(n + 7) { --i: 6; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) :is([data-enter], [data-reveal]) > * {
    transition: opacity var(--d-enter) var(--e-out), filter var(--d-enter) var(--e-out), transform var(--d-enter) var(--e-out);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }
  html:not(.no-js) [data-enter]:not(.is-in) > *,
  html:not(.no-js) [data-reveal]:not(.is-in) > * { opacity: 0; filter: blur(12px); transform: translateY(24px) scale(0.97); }
}

/* -- reduced motion: nothing moves, everything is visible --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-property: opacity, visibility, display, overlay !important;
    transition-duration: 150ms !important;
    transition-delay: 0s !important;
  }
  .toast { filter: none; transform: none; }
  :is(.btn, .chip, .market, .hdr__quote, .hdr__tray, .finder__go, .show__pause, .models__pause, .deck__pause, .rail__btn, .viewer__btn):active,
  :is(.btn, .link):hover .btn__arrow,
  :is(.pcard__link, .spread__link, .models__link):is(:hover, :focus-visible) img { transform: none; }
  .models__label { transition: none; }
  .pcard .pcard__add, .pcard:hover .pcard__add { transform: none; }
}

/* -- print ---------------------------------------------------------------------------------------- */
@media print {
  .skip, .strip, .hdr, .ftr, .bar, .pbar, .drawer, .tray, .scrim, .toast, .palette, .viewer, .rail__ctrl, .show__pause, .models__pause, .deck__pause, .pcard__add, .fcard__add, .finder, .filters { display: none !important; }
  body, .hero__card, .pp__hero-in, .deck__grid, .band--panel { background: var(--print-paper); color: var(--print-ink); }
  html:not(.no-js) [data-enter] > * { opacity: 1 !important; filter: none !important; transform: none !important; }
}