/* ==========================================================================
   dé Fabrics — "Modern Brand" components                  v1.0 · 2026-10-14
   --------------------------------------------------------------------------
   Requires tokens.css (and fonts/fonts.css). Mobile-first; the main layout
   switch is 820px, full desktop navigation from 1200px.

   CSP: the site sends  style-src 'self' 'unsafe-inline'  and
   script-src 'self' 'nonce-…'  +  script-src-attr 'none'.  Inline style
   attributes would therefore work today, but NOTHING here depends on them:
   every visual is a class (object-position, swatch images as <img>, etc.) so
   'unsafe-inline' can be dropped later. Never use onclick=… attributes —
   they are blocked; behaviour lives in ds.js / site.js (data-* hooks).

   Naming: block / block__element / block--modifier. State is expressed with
   ARIA (aria-pressed, aria-checked, aria-current, aria-expanded,
   aria-invalid) or data-state, never with colour alone.

   Contents
     00 Base & accessibility        13 Forms
     01 Layout                      14 Alerts, toasts, flash
     02 Typography                  15 Navigation aids (breadcrumbs, pagination,
     03 Icons                          filter chips, tabs, jump nav, filters)
     04 Buttons & links             16 Accordion / FAQ
     05 Chips, status, badges       17 Timeline, steps, history
     06 Circle motif                18 Media: video, gallery, fallback, lightbox
     07 Header                      19 CTA band
     08 Footer                      20 Empty & status pages, auth
     09 Section header              21 Selection drawer
     10 Heroes                      22 Cookie banner
     11 Cards                       23 Prose (articles, legal, glossary)
     12 Product detail              24 Utilities · 25 Motion, forced colours, print
   ========================================================================== */

/* ── 00 Base & accessibility ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--sp-16));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* CJK: system faces first in the right order, no negative tracking, airier
   leading, no forced uppercase. */
:lang(zh) {
  font-family: var(--font-sans-zh);
}
:lang(ko) {
  font-family: var(--font-sans-ko);
  word-break: keep-all;
}
:lang(zh) :is(h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4),
:lang(ko) :is(h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4) {
  letter-spacing: 0;
  line-height: 1.18;
}
:lang(zh) .eyebrow,
:lang(ko) .eyebrow {
  letter-spacing: 0.04em;
  text-transform: none;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}
img,
video {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: var(--ctx-link, var(--text-brand));
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--ctx-link-hover, var(--action-hover));
}

::selection {
  background: var(--brand-ice-light);
  color: var(--brand-ink);
}

/* One focus style everywhere: 3px ring, offset, never removed. */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}
:focus:not(:focus-visible) {
  outline: none;
}
/* Context colours. Dark surfaces re-point a handful of contextual custom
   properties; light "islands" inside them (cards, forms, popovers) reset
   them, so nesting always resolves to the nearest surface. Components read
   var(--ctx-*, <light default>). */
:is(.on-dark, .band, .panel--brand, .panel--ink, .surface-brand, .surface-ink,
  .cta-band, .fair-feature, .service-tile--brand, .service-tile__glass,
  .hero-photo__caption, .cta-inline--brand, .account-bar, .toast,
  .cookie-banner, .site-footer, .utility-bar, .next-fair-link, .lightbox,
  .app-bar) {
  --ctx-eyebrow: var(--text-on-dark-muted);
  --ctx-muted: var(--text-on-dark-muted);
  --ctx-accent: var(--text-on-dark-accent);
  --ctx-link: #ffffff;
  --ctx-link-hover: var(--brand-ice-light);
  --focus-ring: var(--focus-ring-on-dark);
}
:is(.card, .tile-card, .form-card, .product-panel, .glass-card, .popover,
  .drawer, .auth-card, .notice, .empty-state, .form-success, .alert,
  .service-tile__glass--light, .collection-card__bar, .tile-card__bar,
  .panel:not(.panel--brand, .panel--ink),
  .service-tile:not(.service-tile--brand, .service-tile--photo)) {
  --ctx-eyebrow: initial;
  --ctx-muted: initial;
  --ctx-accent: initial;
  --ctx-link: initial;
  --ctx-link-hover: initial;
  --focus-ring: var(--brand-slate);
}

main:focus {
  outline: none;
}

.skip-link {
  position: fixed;
  top: var(--sp-12);
  left: var(--sp-12);
  z-index: var(--z-skip);
  padding: var(--sp-12) var(--sp-20);
  border-radius: var(--r-pill);
  background: var(--brand-ink);
  color: #fff;
  font-weight: var(--fw-heavy);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  color: #fff;
  outline-color: var(--brand-ice-light);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.no-js .js-only {
  display: none !important;
}
.js .no-js-only {
  display: none !important;
}

[hidden] {
  display: none !important;
}

/* ── 01 Layout ───────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow {
  max-width: 52rem; /* 832 — articles, legal, forms */
}
.container--text {
  max-width: 44rem; /* reading measure ≈ 70ch */
}

.section {
  padding-top: var(--section-space);
}
.section--last,
.section--pad {
  padding-bottom: var(--section-space);
}
.section--tight {
  padding-top: var(--sp-48);
}
.section--flush {
  padding-top: var(--sp-24);
}

/* Responsive grids — mobile 1 column, opt-in 2-up on phones. */
.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr);
}
.grid--phone-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 820px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--7-5 {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .grid--5-7 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .grid--6-6,
  .grid--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--4-8 {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  }
  .grid--8-4 {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }
  .grid--sidebar {
    grid-template-columns: 17.5rem minmax(0, 1fr);
    gap: var(--sp-32);
    align-items: start;
  }
}
@media (min-width: 1100px) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.grid--wide-gap {
  gap: var(--sp-40);
}
.grid--align-end {
  align-items: end;
}
.grid--align-center {
  align-items: center;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--sp-16));
}
.stack--sm {
  --stack-gap: var(--sp-8);
}
.stack--lg {
  --stack-gap: var(--sp-24);
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--sp-10));
}
.cluster--sm {
  --cluster-gap: var(--sp-8);
}
.cluster--between {
  justify-content: space-between;
}

/* Panels: the rounded surfaces that structure every page. */
.panel {
  position: relative;
  border-radius: var(--r-3xl);
  padding: var(--panel-pad);
  background: var(--surface);
  border: 1px solid var(--line);
}
.panel--sm {
  padding: var(--panel-pad-sm);
  border-radius: var(--r-2xl);
}
.panel--band {
  border-radius: var(--r-4xl);
}
.panel--tint {
  background: var(--surface-tint);
}
.panel--ice {
  background: var(--surface-ice);
  border-color: transparent;
}
.panel--brand {
  background: var(--surface-brand);
  border-color: transparent;
  color: var(--text-on-dark);
}
.panel--ink {
  background: var(--surface-ink);
  border-color: transparent;
  color: var(--text-on-dark);
}
.panel--dashed {
  background: var(--surface-tint);
  border: 1.5px dashed var(--brand-slate);
}
.panel--flush {
  padding: 0;
  overflow: hidden;
}

/* Single-column default for every component grid: minmax(0,1fr) stops wide
   children (thumb strips, long codes, tables) from stretching the track past
   the viewport on phones. :where() keeps specificity at 0, so any
   component or media-query rule that sets columns wins. */
:where(.hero-home__grid, .hero-split__grid, .hero-page__panel, .band__head,
  .product-hero, .status-page__grid, .article-layout, .faq-layout,
  .cta-band__grid, .news-feature, .collection-media, .service-grid,
  .test-grid, .feature-list, .timeline, .steps, .accordion, .form,
  .glossary__entry, .kv > div, .contact-list, .selection-items) {
  grid-template-columns: minmax(0, 1fr);
}

/* Full-width coloured sections (contact band, footer) */
.surface-brand {
  background: var(--surface-brand);
  color: var(--text-on-dark);
}
.surface-ink {
  background: var(--surface-ink);
  color: var(--text-on-dark-muted);
}
.surface-white {
  background: var(--surface);
}

/* ── 02 Typography ───────────────────────────────────────────────────────── */
.display,
.h1,
.h2,
.h3,
.h4 {
  font-weight: var(--fw-heavy);
  color: inherit;
  text-wrap: balance;
}
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.h1 {
  font-size: var(--fs-h1);
  line-height: 0.92;
  letter-spacing: var(--ls-h1);
}
.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.02;
  letter-spacing: var(--ls-h3);
}
.h4 {
  font-size: var(--fs-h4);
  line-height: 1.12;
  letter-spacing: var(--ls-title);
}
.title {
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-title);
}
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  font-weight: var(--fw-medium);
  color: var(--ctx-muted, var(--text-muted));
  max-width: 34em;
  text-wrap: pretty;
}
.body-sm {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
}
.small {
  font-size: var(--fs-small);
  line-height: 1.5;
}
.meta {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--ctx-muted, var(--text-muted));
}
.note {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  color: var(--ctx-muted, var(--text-muted));
}
.accent {
  color: var(--ctx-accent, var(--text-accent));
} /* large text only */
.nowrap {
  white-space: nowrap;
}
.text-muted {
  color: var(--ctx-muted, var(--text-muted));
}
.text-brand {
  color: var(--text-brand);
}

/* Article codes, dates, methods, Incoterms: always IBM Plex Mono. */
.mono,
.code {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-code);
  font-variant-numeric: tabular-nums;
}
.code {
  font-size: 1.0625rem;
}
.code--lg {
  font-size: var(--fs-h4);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ctx-eyebrow, var(--text-brand));
  line-height: 1.2;
}
.eyebrow--accent {
  color: var(--text-on-dark-accent);
}


/* ── 03 Icons ────────────────────────────────────────────────────────────── */
/* Inline stroke SVGs: viewBox 0 0 24 24, fill none, stroke currentColor,
   stroke-width 1.8 (2 inside buttons), round caps/joins, aria-hidden. */
.icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm {
  width: 0.9375rem;
  height: 0.9375rem;
}
.icon--lg {
  width: 1.375rem;
  height: 1.375rem;
}
.icon--xl {
  width: 2rem;
  height: 2rem;
}

/* ── 04 Buttons & links ──────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-border: var(--border-button);
  --btn-bg-hover: var(--surface);
  --btn-fg-hover: var(--text-brand);
  --btn-border-hover: var(--brand-slate-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  min-height: 3.25rem; /* 52 */
  padding: 0 var(--sp-24);
  border: 1.5px solid var(--btn-border);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease, color var(--dur-fast) ease,
    transform var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  color: var(--btn-fg-hover);
}
.btn:active {
  transform: translateY(1px);
}
.btn .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn[aria-busy="true"] {
  cursor: progress;
}
.btn[aria-busy="true"] .icon {
  animation: ds-spin 0.9s linear infinite;
}

/* Primary: slate-deep → ink on hover (7.41 / 14.76) */
.btn--primary {
  --btn-bg: var(--action);
  --btn-fg: var(--action-contrast);
  --btn-border: var(--action);
  --btn-bg-hover: var(--action-hover);
  --btn-fg-hover: #fff;
  --btn-border-hover: var(--action-hover);
}
/* Secondary (default look): white, hairline, slate on hover */
.btn--secondary {
  /* defaults */
}
/* Ghost: text button with tint hover — tertiary actions */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-brand);
  --btn-border: transparent;
  --btn-bg-hover: var(--surface-mist);
  --btn-border-hover: transparent;
  --btn-fg-hover: var(--text);
  padding-inline: var(--sp-16);
}
/* On dark surfaces */
.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--text);
  --btn-border: #fff;
  --btn-bg-hover: var(--brand-ice-light);
  --btn-fg-hover: var(--text);
  --btn-border-hover: var(--brand-ice-light);
}
.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-border: var(--line-on-dark-strong);
  --btn-bg-hover: rgba(255, 255, 255, 0.12);
  --btn-fg-hover: #fff;
  --btn-border-hover: #fff;
}
/* Ink: on ice panels (dealer programme tile) */
.btn--ink {
  --btn-bg: var(--brand-ink);
  --btn-fg: #fff;
  --btn-border: var(--brand-ink);
  --btn-bg-hover: var(--action);
  --btn-fg-hover: #fff;
  --btn-border-hover: var(--action);
}
.btn--danger {
  --btn-bg: var(--surface);
  --btn-fg: var(--error);
  --btn-border: var(--error);
  --btn-bg-hover: var(--error);
  --btn-fg-hover: #fff;
  --btn-border-hover: var(--error);
}
.btn--sm {
  min-height: var(--tap);
  padding: 0 var(--sp-16);
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  gap: var(--sp-8);
}
.btn--md {
  min-height: 2.875rem; /* 46 */
}
.btn--lg {
  min-height: 3.5rem; /* 56 */
  padding: 0 var(--sp-28);
  font-size: 0.96875rem;
  font-weight: var(--fw-heavy);
}
.btn--block {
  display: flex;
  width: 100%;
}
/* Wrap long translated labels instead of overflowing (DE/PL/UK) */
.btn--wrap {
  white-space: normal;
  padding-block: var(--sp-10);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10);
}
.btn-group--stretch > .btn {
  flex: 1 1 12rem;
}
@media (max-width: 559.98px) {
  .btn-group--stack-phone > .btn {
    flex: 1 1 100%;
  }
}

/* Round icon button — 44px, the circle motif as a control */
.btn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border-radius: var(--r-circle);
  border: 1.5px solid var(--border-button);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease, color var(--dur-fast) ease,
    transform var(--dur-base) var(--ease-out);
}
.btn-round:hover {
  border-color: var(--brand-slate-deep);
  color: var(--text-brand);
}
.btn-round .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2;
}
.btn-round--primary {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
}
.btn-round--primary:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  color: #fff;
}
.btn-round--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}
.btn-round--ghost:hover {
  background: var(--surface-mist);
  border-color: transparent;
  color: var(--text);
}
.btn-round--glass {
  border-color: transparent;
  background: var(--surface-glass-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-round--lg {
  width: 3rem;
  height: 3rem;
}
.btn-round--xl {
  width: 4.5rem;
  height: 4.5rem;
}
.btn-round--xl .icon {
  width: 1.75rem;
  height: 1.75rem;
}
/* Toggle state: "Add to Selection" → added (check icon swapped by JS) */
.btn-round[aria-pressed="true"] {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
}
.btn-round .icon-when-on {
  display: none;
}
.btn-round[aria-pressed="true"] .icon-when-on {
  display: block;
}
.btn-round[aria-pressed="true"] .icon-when-off {
  display: none;
}

/* Links */
.link {
  color: var(--ctx-link, var(--text-brand));
  font-weight: var(--fw-heavy);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-slow) var(--ease-out);
}
.link:hover {
  background-size: 100% 1.5px;
  color: var(--ctx-link, var(--text-brand));
}
.link--arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: var(--tap);
  font-size: var(--fs-small);
  background-position: 0 calc(100% - 0.6rem);
}
.link--arrow .icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 2;
  transition: transform var(--dur-base) var(--ease-out);
}
.link--arrow:hover .icon {
  transform: translateX(3px);
}
.link--muted {
  color: var(--ctx-muted, var(--text-muted));
  font-weight: var(--fw-bold);
}
.link--on-dark {
  --ctx-link: #ffffff;
}
/* Whole-card links: put .stretched-link on the title link; other controls in
   the card get position:relative + z-index:2 automatically. */
.stretched-link {
  color: inherit;
  text-decoration: none;
}
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.stretched-link:focus-visible {
  outline: none;
}
.stretched-link:focus-visible::after {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── 05 Chips, status, badges ────────────────────────────────────────────── */
.chip {
  --chip-bg: var(--surface-tint);
  --chip-fg: var(--text-brand);
  --chip-border: var(--line-ice);
  --dot: var(--brand-slate);
  display: inline-flex;
  width: fit-content; /* never stretch inside column flex/grid */
  max-width: 100%;
  align-items: center;
  gap: 0.4375rem;
  min-height: 1.75rem;
  padding: 0.1875rem 0.6875rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: 0.005em;
  white-space: nowrap;
  text-decoration: none;
}
.chip::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot);
}
.chip--plain::before {
  display: none;
}
.chip--solid {
  --chip-bg: var(--brand-slate-deep);
  --chip-fg: #fff;
  --chip-border: var(--brand-slate-deep);
  --dot: var(--brand-ice-light);
}
.chip--ice {
  --chip-bg: var(--brand-ice-light);
  --chip-fg: var(--brand-ink);
  --chip-border: var(--brand-ice-light);
  --dot: var(--brand-slate-deep);
}
.chip--outline {
  --chip-bg: var(--surface);
  --chip-fg: var(--text-brand);
  --chip-border: rgba(62, 88, 112, 0.35);
}
/* Hollow dot + dashed edge = "not yet" (shape, not only colour) */
.chip--dashed {
  --chip-bg: var(--surface-tint);
  --chip-fg: var(--text-brand);
  --chip-border: var(--brand-slate);
  border-style: dashed;
}
.chip--dashed::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--brand-slate);
}
.chip--glass {
  --chip-bg: var(--surface-glass);
  --chip-border: rgba(62, 88, 112, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.chip--on-dark {
  --chip-bg: transparent;
  --chip-fg: var(--text-on-dark-muted);
  --chip-border: rgba(228, 237, 248, 0.7);
  border-style: dashed;
}
.chip--on-dark::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--text-on-dark-muted);
}
.chip--on-dark-solid {
  --chip-bg: rgba(255, 255, 255, 0.12);
  --chip-fg: #fff;
  --chip-border: var(--line-on-dark);
  --dot: var(--brand-ice-light);
}
.chip--lg {
  min-height: 2rem;
  padding-inline: 0.875rem;
  font-size: var(--fs-xs);
}
a.chip:hover {
  --chip-border: var(--brand-slate-deep);
}

/* Honest data statuses — the four public states + fair states.
   Each pairs a label with a distinct dot shape, so meaning never depends on
   colour alone.                                   text contrast           */
.status--published {    /* filled ice dot, solid slate     7.41 */
  --chip-bg: var(--brand-slate-deep);
  --chip-fg: #fff;
  --chip-border: var(--brand-slate-deep);
  --dot: var(--brand-ice-light);
}
.status--awaiting {     /* filled slate dot on ice         9.13 */
  --chip-bg: var(--brand-ice-light);
  --chip-fg: var(--brand-ink);
  --chip-border: var(--brand-ice-light);
  --dot: var(--brand-slate-deep);
}
.status--on-request {   /* filled slate dot, white chip    7.41 */
  --chip-bg: var(--surface);
  --chip-fg: var(--text-brand);
  --chip-border: rgba(62, 88, 112, 0.35);
  --dot: var(--brand-slate);
}
.status--coming-soon {  /* hollow dot, dashed edge         6.99 */
  --chip-bg: var(--surface-tint);
  --chip-fg: var(--text-brand);
  --chip-border: var(--brand-slate);
  border-style: dashed;
}
.status--coming-soon::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--brand-slate);
}
.status--exhibited {
  --chip-bg: var(--brand-slate-deep);
  --chip-fg: #fff;
  --chip-border: var(--brand-slate-deep);
  --dot: var(--brand-ice-light);
}
.status--upcoming {     /* pulsing ice dot on ink panels */
  --chip-bg: var(--brand-ice-light);
  --chip-fg: var(--brand-ink);
  --chip-border: var(--brand-ice-light);
  --dot: var(--brand-slate-deep);
}
.status--new {
  --chip-bg: var(--brand-slate-deep);
  --chip-fg: #fff;
  --chip-border: var(--brand-slate-deep);
  --dot: var(--brand-ice-light);
}

/* Count badge (Selection, filter counts) */
.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.375rem;
  border-radius: var(--r-pill);
  background: var(--brand-slate-deep);
  color: #fff;
  font-size: 0.75rem;
  font-weight: var(--fw-heavy);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.count--soft {
  background: var(--surface-tint);
  color: var(--text);
}
.count--on-dark {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.count:empty,
.count[data-count="0"] {
  display: none;
}

/* Announcement pill: "NEW 2026 · Series DE8D01–DE8D26 ›" */
.announce {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-10);
  min-height: 2.5rem;
  padding: 0.375rem 0.625rem 0.375rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.84375rem;
  font-weight: var(--fw-bold);
  text-decoration: none;
  line-height: 1.25;
  max-width: 100%;
}
.announce:hover {
  border-color: var(--brand-slate);
  color: var(--text);
}
.announce__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 1.625rem;
  padding: 0 0.625rem;
  border-radius: var(--r-pill);
  background: var(--brand-slate-deep);
  color: #fff;
  font-size: 0.75rem;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.announce .icon {
  color: var(--brand-slate);
  width: 1rem;
  height: 1rem;
  stroke-width: 2;
}

/* Split pill: Hall | Booth */
.booth {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line-ice);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  white-space: nowrap;
  color: var(--text);
}
.booth > span {
  padding: 0.5rem 0.6875rem;
  background: var(--surface-tint);
}
.booth > span + span {
  background: var(--brand-ice-light);
}
.booth--on-dark {
  border-color: var(--line-on-dark);
  color: #fff;
}
.booth--on-dark > span {
  background: rgba(255, 255, 255, 0.08);
}
.booth--on-dark > span + span {
  background: var(--brand-slate-deep);
}

/* Code tiles: Incoterms, article codes in grids */
.code-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-8);
}
.code-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: var(--sp-8);
  border-radius: var(--r-sm);
  background: var(--surface-tint);
  border: 1px solid var(--line-ice);
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--text-brand);
  text-align: center;
}
a.code-tile {
  text-decoration: none;
}
a.code-tile:hover {
  border-color: var(--brand-slate-deep);
}

/* ── 06 Circle motif ─────────────────────────────────────────────────────── */
/* Numbered circles — section numbers, steps, pagination echoes. */
.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.125rem; /* 34 */
  height: 2.125rem;
  border-radius: var(--r-circle);
  background: var(--brand-slate);
  color: #fff; /* 4.82 */
  font-family: var(--font-mono);
  font-size: 0.78125rem;
  font-weight: var(--fw-medium);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.num--ice {
  background: var(--brand-ice-light);
  color: var(--brand-ink);
}
.num--deep {
  background: var(--brand-slate-deep);
}
.num--outline {
  background: var(--surface);
  color: var(--text-brand);
  box-shadow: inset 0 0 0 2px var(--brand-ice-light);
}
.num--md {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.875rem;
}
.num--lg {
  width: 3.5rem; /* 56 */
  height: 3.5rem;
  font-size: 1.0625rem;
}
.num--xl {
  width: 5rem;
  height: 5rem;
  font-size: 1.375rem;
}

/* Round swatch — a radio button holding the colourway photo as <img>. */
.swatch {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--r-circle);
  background: var(--slate-150);
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(31, 41, 51, 0.12);
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-fast) ease;
}
.swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}
.swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(31, 41, 51, 0.12);
}
.swatch:hover {
  transform: scale(1.08);
}
.swatch[aria-checked="true"],
.swatch[aria-pressed="true"],
.swatch[aria-current="true"] {
  box-shadow: var(--ring-selected);
  transform: none;
}
.on-tint .swatch[aria-checked="true"] {
  box-shadow: var(--ring-selected-tint);
}
.swatch:focus-visible {
  outline-offset: 5px;
}
.swatch--sm {
  width: 2.125rem;
  height: 2.125rem;
}

/* Overlapping swatch stack: "+16" */
.swatch-stack {
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
}
.swatch-stack > * {
  width: 2.125rem;
  height: 2.125rem;
  margin-left: -0.5rem;
  border-radius: var(--r-circle);
  border: 2px solid #fff;
  object-fit: cover;
  flex: none;
  background: var(--slate-150);
}
.swatch-stack__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-ice-light) !important;
  color: var(--brand-ink);
  font-size: 0.6875rem;
  font-weight: var(--fw-heavy);
}

/* Logo tile — the real badge (SVG/PNG), never redrawn; LARGE by design. */
.logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--r-3xl);
  padding: 1.125rem 1.25rem;
  box-shadow: var(--shadow-float);
}
.logo-badge img,
.logo-badge svg {
  width: 7.375rem; /* 118 */
  height: auto;
}
.logo-badge--md {
  border-radius: var(--r-xl);
  padding: 0.75rem 0.875rem;
  box-shadow: none;
}
.logo-badge--md img,
.logo-badge--md svg {
  width: 4.5rem;
}
.logo-badge--sm {
  border-radius: var(--r-lg);
  padding: 0.625rem 0.75rem;
  box-shadow: none;
}
.logo-badge--sm img,
.logo-badge--sm svg {
  width: 3.5rem;
}

/* Live dot (next fair in utility bar) */
.live-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-ice-light);
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot {
    animation: ds-pulse 2.4s infinite;
  }
}

/* Icon circle used inside tiles (service, contact) */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-circle);
  background: var(--surface-tint);
  color: var(--text-brand);
  border: 1px solid var(--line);
}
.icon-circle--white {
  background: #fff;
  border-color: transparent;
}
.icon-circle--deep {
  background: var(--brand-slate-deep);
  color: #fff;
  border-color: transparent;
}
.icon-circle--lg {
  width: 3.5rem;
  height: 3.5rem;
}
.icon-circle--lg .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Decorative concentric circles (status pages, empty hero corners) */
.circles-deco {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  border: 1.5px solid var(--brand-ice-light);
  aspect-ratio: 1;
}
.circles-deco::before,
.circles-deco::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--brand-ice-light);
}
.circles-deco::before {
  inset: 14%;
}
.circles-deco::after {
  inset: 30%;
  background: var(--brand-ice-light);
  border: 0;
  opacity: 0.45;
}

/* ── 07 Header ───────────────────────────────────────────────────────────── */
/* 07a Utility bar (ink, 40px): trade line · next fair (live) · phone/WeChat */
.utility-bar {
  background: var(--surface-ink);
  color: var(--text-on-dark-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-24);
  min-height: 2.125rem;
}
.utility-bar__item {
  display: none;
  align-items: center;
  gap: var(--sp-10);
  margin: 0;
  white-space: nowrap;
}
.utility-bar__item .icon {
  width: 0.9375rem;
  height: 0.9375rem;
}
.utility-bar a {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.125rem;
  color: var(--text-on-dark-muted);
  text-decoration: none;
}
.utility-bar a:hover {
  color: #fff;
  text-decoration: underline;
}
.utility-bar__live {
  display: inline-flex;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff !important;
  font-weight: var(--fw-bold);
}
.utility-bar__live > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* F (2026-10-14): one line, ellipsis on narrow desktops */
}
.utility-bar__end {
  gap: var(--sp-16);
}
/* F (2026-10-14): the trade line and Dealer login show only from 1100 px,
   where they fit next to the fair link and the contact links. */
.utility-bar .utility-bar__more {
  display: none;
}
@media (min-width: 1100px) {
  .utility-bar .utility-bar__more {
    display: inline-flex;
  }
}
@media (min-width: 820px) {
  .utility-bar__inner {
    justify-content: space-between;
    min-height: var(--utility-h);
  }
  .utility-bar__item {
    display: inline-flex;
  }
}

/* 07b Main header — sticky white glass, logo LARGE */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface-header);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--divider);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-20);
  min-height: var(--header-h-mobile);
}
.site-header__logo {
  display: inline-flex;
  flex: none;
  border-radius: var(--r-md);
}
.site-header__logo img,
.site-header__logo svg {
  width: 3.5rem; /* 56 mobile */
  height: auto;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.site-header__cta {
  display: none;
}
@media (min-width: 820px) {
  .site-header__inner {
    min-height: var(--header-h);
  }
  .site-header__logo img,
  .site-header__logo svg {
    width: 4.5rem; /* 72 */
  }
  .site-header__cta {
    display: inline-flex;
  }
}

/* Primary nav — pill links; hidden below 1200px (menu takes over) */
.main-nav {
  display: none;
}
.main-nav ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 0.75rem;
  border-radius: var(--r-pill);
  color: var(--text);
  font-size: 0.90625rem; /* 14.5 */
  font-weight: var(--fw-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.main-nav a:hover {
  background: var(--surface-tint);
  color: var(--text-brand);
}
.main-nav a[aria-current="page"],
.main-nav a[aria-current="true"] {
  background: var(--surface-tint);
  color: var(--text-brand);
  box-shadow: inset 0 0 0 1.5px var(--brand-ice-light);
}
@media (min-width: 1200px) {
  .main-nav {
    display: block;
  }
}
@media (min-width: 1280px) {
  .main-nav a {
    padding: 0 0.875rem;
  }
}

/* Pill-shaped header control (language, Selection) */
.pill-btn,
.selection-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: var(--tap);
  padding: 0 0.8125rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--divider);
  background: var(--surface);
  color: var(--text);
  font-size: 0.84375rem;
  font-weight: var(--fw-heavy);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.pill-btn:hover,
.selection-pill:hover {
  border-color: var(--brand-slate-deep);
  color: var(--text-brand);
}
.selection-pill {
  padding: 0 0.5rem 0 0.75rem;
}
.selection-pill .icon,
.pill-btn .icon {
  width: 1.0625rem;
  height: 1.0625rem;
}
.selection-pill__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
@media (min-width: 820px) {
  .selection-pill__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}
/* F (2026-10-14): between 1200 and 1319 px the full nav and all header
   actions do not fit; the Selection label is visually hidden there (it stays
   in the accessible name). */
@media (min-width: 1200px) and (max-width: 1319.98px) {
  .selection-pill__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}
.selection-pill.is-bumped .count {
  animation: ds-bump var(--dur-slow) var(--ease-out);
}

/* Header round controls (search) reuse .btn-round with a thinner border */
.site-header .btn-round {
  border-width: 1px;
  border-color: var(--divider);
}
.site-header .btn-round:hover {
  border-color: var(--brand-slate-deep);
}

/* <details> popovers: language + search — work without JS */
.lang-menu,
.header-search {
  position: relative;
}
.lang-menu > summary,
.header-search > summary {
  list-style: none;
}
.lang-menu > summary::-webkit-details-marker,
.header-search > summary::-webkit-details-marker {
  display: none;
}
.lang-menu .lang-chevron {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform var(--dur-base) var(--ease-out);
}
.lang-menu[open] .lang-chevron {
  transform: rotate(180deg);
}
.lang-menu__code-mobile {
  display: inline;
}
.popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 14rem;
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-popover);
}
.lang-menu__list {
  margin: 0;
  list-style: none;
}
.lang-menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  min-height: var(--tap);
  padding: 0 var(--sp-12) 0 var(--sp-14);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.lang-menu__list a:hover {
  background: var(--surface-tint);
  color: var(--text-brand);
}
.lang-menu__list a .mono {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
}
.lang-menu__list a[aria-current="true"] {
  background: var(--surface-tint);
  color: var(--text-brand);
  box-shadow: inset 0 0 0 1.5px var(--brand-ice-light);
}
.lang-menu__list a[aria-current="true"] .mono::after {
  content: " ✓";
}
.search-pop {
  display: flex;
  gap: var(--sp-8);
  width: min(26rem, calc(100vw - 2rem));
  padding: var(--sp-10);
}
.search-pop .input {
  min-height: 2.75rem;
}
@media (max-width: 819.98px) {
  /* Popover spans the header width: .header-search goes static so the
     absolute popover resolves against the sticky .site-header. */
  .header-search {
    position: static;
  }
  .header-search .popover {
    top: calc(100% + 0.5rem);
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
  }
  .lang-menu .popover {
    right: -3rem;
  }
}

/* Menu toggle (keeps .mobile-nav-toggle for site.js) */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-circle);
  border: 0;
  background: var(--action);
  color: #fff;
  cursor: pointer;
}
.menu-toggle:hover {
  background: var(--action-hover);
}
.menu-toggle .icon {
  width: 1.25rem;
  height: 1.25rem;
}
.menu-toggle .icon-close {
  display: none;
}
.menu-toggle[aria-expanded="true"] .icon-open {
  display: none;
}
.menu-toggle[aria-expanded="true"] .icon-close {
  display: block;
}
@media (min-width: 1200px) {
  .menu-toggle {
    display: none;
  }
}
.hide-below-md {
  display: none !important;
}
@media (min-width: 820px) {
  .hide-below-md {
    display: inline-flex !important;
  }
  .hide-from-md {
    display: none !important;
  }
}

/* 07c Mobile menu panel (id="primary-navigation", data-visible).
   Place it right AFTER </header>, never inside: the header's backdrop-filter
   makes it the containing block of position:fixed descendants. */
.mobile-menu {
  position: fixed;
  inset: var(--menu-top, 6.375rem) 0 0 0;
  z-index: var(--z-drawer);
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border-top: 1px solid var(--divider);
  padding: var(--sp-16) var(--gutter) calc(var(--sp-96) + env(safe-area-inset-bottom));
}
.mobile-menu[data-visible="true"] {
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu[data-visible="true"] {
    animation: ds-drop var(--dur-slow) var(--ease-out);
  }
}
@media (min-width: 820px) {
  .mobile-menu {
    --menu-top: 7.75rem;
  }
}
.mobile-menu__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mobile-menu__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  min-height: 3.5rem;
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--divider);
  color: var(--text);
  font-size: 1.625rem;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.035em;
  text-decoration: none;
}
.mobile-menu__nav a .icon {
  color: var(--brand-slate);
  width: 1.25rem;
  height: 1.25rem;
}
.mobile-menu__nav a[aria-current="page"] {
  color: var(--text-brand);
}
.mobile-menu__nav a[aria-current="page"]::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-slate-deep);
  margin-right: auto;
  order: 2;
  display: none;
}
.mobile-menu__sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
  margin: var(--sp-20) 0 0;
  padding: 0;
  list-style: none;
}
.mobile-menu__sub a {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: var(--sp-8) var(--sp-14);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-decoration: none;
  line-height: 1.25;
}
.mobile-menu__langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: var(--sp-24) 0 0;
  padding: 0;
  list-style: none;
}
.mobile-menu__langs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-16);
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.mobile-menu__langs a[aria-current="true"] {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: #fff;
}
.mobile-menu__cta {
  margin-top: var(--sp-24);
}

/* 07d Mobile app bar — 5 shortcuts, ink glass pill (phones only) */
.app-bar {
  position: fixed;
  left: var(--sp-12);
  right: var(--sp-12);
  bottom: calc(var(--sp-12) + env(safe-area-inset-bottom));
  z-index: var(--z-appbar);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  min-height: 4.25rem;
  padding: 0 0.375rem;
  border-radius: var(--r-pill);
  background: rgba(31, 41, 51, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-bar);
}
.app-bar a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 3.5rem;
  border-radius: var(--r-pill);
  color: var(--text-on-dark-muted);
  font-size: 0.6875rem;
  font-weight: var(--fw-heavy);
  text-decoration: none;
  line-height: 1.1;
}
.app-bar a .icon {
  width: 1.25rem;
  height: 1.25rem;
}
.app-bar a[aria-current="page"] {
  background: var(--brand-ice-light);
  color: var(--brand-ink);
}
.app-bar .count {
  position: absolute;
  top: 0.25rem;
  right: calc(50% - 1.5rem);
  min-width: 1.125rem;
  height: 1.125rem;
  font-size: 0.625rem;
  background: var(--brand-ice-light);
  color: var(--brand-ink);
}
.app-bar :focus-visible {
  outline-color: #fff;
  outline-offset: -2px;
}
body.has-app-bar {
  padding-bottom: calc(6rem + env(safe-area-inset-bottom));
}
@media (min-width: 820px) {
  .app-bar {
    display: none;
  }
  body.has-app-bar {
    padding-bottom: 0;
  }
}

/* ── 08 Footer ───────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--surface-ink);
  color: var(--text-on-dark-muted);
  font-size: var(--fs-body-sm);
}
.site-footer__grid {
  display: grid;
  gap: var(--sp-32) var(--sp-24);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--sp-56) 0 var(--sp-28);
}
.site-footer__brand {
  grid-column: 1 / -1;
}
@media (min-width: 1100px) {
  .site-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr;
    gap: var(--sp-40);
  }
  .site-footer__brand {
    grid-column: auto;
  }
}
.site-footer__id {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}
.site-footer__logo {
  flex: none;
  width: 4.5rem; /* 72 */
  height: auto;
  border-radius: 50%; /* the logo is an ellipse; the ring follows it */
  box-shadow: 0 0 0 2px var(--surface-ink), 0 0 0 4px rgba(255, 255, 255, 0.85);
}
.site-footer__name {
  color: #fff;
  font-weight: var(--fw-bold);
  line-height: 1.5;
}
.site-footer__name span {
  display: block;
  color: var(--text-on-dark-muted);
  font-weight: var(--fw-medium);
}
.site-footer__about {
  margin-top: var(--sp-20);
  max-width: 21rem;
  line-height: 1.65;
}
.site-footer__contact {
  margin: var(--sp-20) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
.footer-col--wide {
  grid-column: 1 / -1;
}
@media (min-width: 1100px) {
  .footer-col--wide {
    grid-column: auto;
  }
}
.footer-col__title {
  margin: 0.375rem 0 0.875rem;
  color: var(--text-on-dark-accent);
  font-size: 0.78125rem;
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: var(--fw-semibold);
}
.footer-links--2col {
  columns: 2;
  column-gap: var(--sp-16);
}
.site-footer a,
.site-footer .link-button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 2.25rem;
  color: var(--text-on-dark-muted);
  text-decoration: none;
}
.site-footer a:hover,
.site-footer .link-button:hover {
  color: #fff;
  text-decoration: underline;
}
.site-footer :focus-visible {
  outline-color: #fff;
}
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-12) var(--sp-24);
  padding: var(--sp-20) 0 var(--sp-28);
  border-top: 1px solid var(--line-on-dark);
  font-size: 0.84375rem;
  font-weight: var(--fw-semibold);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-20);
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* ── 09 Section header ───────────────────────────────────────────────────── */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  margin-bottom: var(--sp-28);
}
.section-head__main .eyebrow {
  margin-bottom: var(--sp-20);
}
.section-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-14);
  max-width: 28rem;
}
.section-head__aside p {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--ctx-muted, var(--text-muted));
}
@media (min-width: 820px) {
  .section-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sp-24);
  }
  .section-head__aside--end {
    align-items: flex-end;
    text-align: right;
  }
  /* split: title left, paragraph right (How we work) */
  .section-head--split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-40);
  }
  .section-head--split .section-head__aside {
    max-width: 30rem;
  }
}
.section-head--compact .h2 {
  font-size: clamp(1.625rem, 1.38rem + 1vw, 2.125rem); /* 26 → 34 */
  letter-spacing: var(--ls-h3);
}
.section-head--compact {
  margin-bottom: var(--sp-24);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* ── 10 Heroes ───────────────────────────────────────────────────────────── */
/* 10a Home hero: text column + 640px photo with logo badge + floating card */
.hero-home {
  padding-top: var(--sp-24);
}
.hero-home__grid {
  display: grid;
  gap: var(--sp-24);
}
.hero-home__text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-32);
}
.hero-home__title {
  margin-top: var(--sp-28);
}
.hero-home .lead {
  margin-top: var(--sp-24);
  max-width: 29.5rem;
}
.hero-home .btn-group {
  margin-top: var(--sp-32);
}
.hero-media {
  position: relative;
  min-height: 25rem; /* 400 */
  border-radius: var(--r-3xl);
  overflow: hidden;
  background: var(--brand-ice-light);
}
.hero-media > img,
.hero-media > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media__chip {
  position: absolute;
  top: var(--sp-16);
  left: var(--sp-16);
  z-index: 1;
}
.hero-media > .hero-media__card {
  display: none;
}
@media (min-width: 820px) {
  .hero-home {
    padding-top: var(--sp-36);
  }
  .hero-home__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-40);
    align-items: stretch;
  }
  .hero-home__text {
    padding: var(--sp-20) 0 var(--sp-8);
  }
  .hero-media {
    min-height: 40rem; /* 640 */
  }
  .hero-media__chip {
    top: var(--sp-24);
    left: var(--sp-24);
  }
  .hero-media > .hero-media__card {
    display: block;
    position: absolute;
    right: var(--sp-24);
    bottom: var(--sp-24);
    z-index: 1;
    width: min(19.375rem, 52%);
  }
}

/* Floating glass product card (used on hero photos) */
.glass-card {
  position: relative;
  display: block;
  padding: var(--sp-16);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}
.glass-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-card-hover);
  color: var(--text);
}
.glass-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-12);
}
.glass-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--action);
  color: #fff;
}
.glass-card__text {
  margin: var(--sp-4) 0 var(--sp-12);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}

/* Stat row — only true, sourced numbers (21 articles, 26 new, 7 languages) */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--divider);
}
.stat-row > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: var(--sp-20) var(--sp-12) 0 var(--sp-16);
}
.stat-row > div:first-child {
  padding-left: 0;
}
.stat-row > div + div {
  border-left: 1px solid var(--divider);
}
.stat-row dt {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  color: var(--text-muted);
}
.stat-row dd {
  margin: 0 0 var(--sp-4);
  font-size: clamp(1.875rem, 1.56rem + 1.3vw, 2.5rem);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--text-brand);
}

/* 10b Page hero — white panel, h1 + lead + jump nav, optional aside */
.hero-page {
  padding-top: var(--sp-24);
}
.hero-page__panel {
  display: grid;
  gap: var(--sp-32);
  align-items: end;
}
.hero-page__kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-14);
  margin-bottom: var(--sp-24);
}
.hero-page__kicker img {
  width: 2.875rem;
  height: auto;
}
.hero-page .lead {
  margin-top: var(--sp-20);
}
.hero-page .jump-nav {
  margin-top: var(--sp-28);
}
@media (min-width: 820px) {
  .hero-page {
    padding-top: var(--sp-32);
  }
  .hero-page__panel {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-40);
  }
}

/* 10c Split hero — page title beside a tall photo (about, services) */
.hero-split {
  padding-top: var(--sp-24);
}
.hero-split__grid {
  display: grid;
  gap: var(--sp-24);
}
.hero-split__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-20);
}
.hero-split__text .btn-group {
  margin-top: var(--sp-12);
}
.hero-split .hero-media {
  min-height: 22rem;
}
@media (min-width: 820px) {
  .hero-split__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: var(--sp-40);
  }
  .hero-split .hero-media {
    min-height: 32.5rem;
  }
}

/* 10d Band hero — slate panel (New series 2026, collection pages) */
.band {
  border-radius: var(--r-4xl);
  padding: var(--panel-pad);
  background: var(--surface-brand);
  color: var(--text-on-dark);
  overflow: hidden;
}
.band__head {
  display: grid;
  gap: var(--sp-24);
  margin-bottom: var(--sp-32);
}
.band__head .eyebrow {
  margin-bottom: var(--sp-20);
}
.band__head p:not(.eyebrow) {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  max-width: 31rem;
}
.band__head .btn-group {
  margin-top: var(--sp-24);
}
.band__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin-top: var(--sp-24);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-on-dark-muted);
}
@media (min-width: 820px) {
  .band__head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-40);
    align-items: end;
    margin-bottom: var(--sp-40);
  }
  .band__foot {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.band .h2 .accent,
.band .accent {
  color: var(--text-on-dark-accent);
}
/* Bento mosaic inside the band: 1 big + 4 small */
.mosaic {
  display: grid;
  gap: var(--sp-12);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mosaic > :first-child {
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}
.mosaic > * {
  aspect-ratio: 1;
}
@media (min-width: 820px) {
  .mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 13.125rem);
  }
  .mosaic > * {
    aspect-ratio: auto;
  }
  .mosaic > :first-child {
    grid-row: span 2;
    aspect-ratio: auto;
  }
}

/* 10e Compact hero — utility, legal, FAQ, glossary, auth */
.hero-compact {
  position: relative;
  padding-block: var(--sp-24) var(--sp-8);
  overflow: hidden;
}
.hero-compact .h1 {
  margin-top: var(--sp-20);
  max-width: 16ch;
}
.hero-compact .lead {
  margin-top: var(--sp-20);
}
.hero-compact .circles-deco {
  right: -6rem;
  top: -3rem;
  width: 22rem;
  display: none;
}
@media (min-width: 820px) {
  .hero-compact {
    padding-top: var(--sp-32);
  }
  .hero-compact .circles-deco {
    display: block;
  }
}

/* 10f Photo hero — full-width photo band with dark glass caption (collection) */
.hero-photo {
  position: relative;
  min-height: 26rem;
  border-radius: var(--r-4xl);
  overflow: hidden;
  background: var(--surface-ink);
  display: flex;
  align-items: flex-end;
  padding: var(--sp-12);
}
.hero-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo__caption {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  padding: var(--panel-pad-sm);
  border-radius: var(--r-2xl);
  background: var(--surface-glass-ink);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
}
.hero-photo__caption p {
  color: var(--text-on-dark-muted);
}
@media (min-width: 820px) {
  .hero-photo {
    min-height: 36rem;
    padding: var(--sp-24);
  }
}

/* ── 11 Cards ────────────────────────────────────────────────────────────── */
/* 11a Base card: white, 26px radius, 8px inset media (radius 18). */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  transition: transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}
.card:has(.stretched-link):hover,
a.card:hover,
.card--hover:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-card-hover);
}
a.card {
  text-decoration: none;
}
.card__media {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--r-xl) - var(--sp-8));
  aspect-ratio: 3 / 2;
  background: var(--slate-150);
}
.card__media > img,
.card__media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-media) var(--ease-out);
}
.card:hover .card__media > img,
.card:hover .card__media > picture > img {
  transform: scale(var(--zoom));
}
.card__media .chip {
  position: absolute;
  top: var(--sp-12);
  left: var(--sp-12);
  z-index: 1;
}
.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-10) var(--sp-10) var(--sp-12);
}
.card__body > :last-child {
  margin-top: auto;
}
.card :is(button, .btn, .btn-round, .link):not(.stretched-link) {
  position: relative;
  z-index: 2;
}

/* 11b Product card */
.product-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-8);
}
.product-card__code {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-code);
  line-height: 1.2;
}
.product-card__name {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.product-card__meta {
  font-size: 0.84375rem;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  line-height: 1.4;
}
.product-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-8);
  margin-top: var(--sp-10) !important;
  padding-top: var(--sp-10);
  border-top: 1px solid var(--divider);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-brand);
}
.product-card--tall .card__media {
  aspect-ratio: 4 / 5;
}
/* Row variant for phones / search results */
.product-card--row {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr) auto;
  gap: var(--sp-14);
  align-items: center;
  border-radius: var(--r-lg);
}
.product-card--row .card__media {
  aspect-ratio: 1;
  border-radius: calc(var(--r-lg) - var(--sp-8));
}
.product-card--row .card__body {
  padding: var(--sp-4) 0;
  gap: 2px;
}
.product-card--row .card__body > :last-child {
  margin-top: 0;
}
.product-card--row > .btn-round {
  margin-right: var(--sp-6);
}

/* 11c Tile card — photo fills, glass bar with code + status (New series) */
.tile-card {
  position: relative;
  display: block;
  min-height: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}
.tile-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-card-hover);
  color: var(--text);
}
.tile-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-media) var(--ease-out);
}
.tile-card:hover > img {
  transform: scale(var(--zoom));
}
.tile-card__bar {
  position: absolute;
  left: var(--sp-12);
  right: var(--sp-12);
  bottom: var(--sp-12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-8);
  min-height: 2.5rem;
  padding: var(--sp-6) var(--sp-8) var(--sp-6) var(--sp-14);
  border-radius: var(--r-pill);
  background: var(--surface-glass-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.tile-card__bar .mono {
  font-size: var(--fs-small);
}
.tile-card__bar small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  color: var(--text-brand);
  white-space: nowrap;
}
.tile-card__tags {
  position: absolute;
  top: var(--sp-16);
  left: var(--sp-16);
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.tile-card__tags--end {
  top: auto;
  left: auto;
  right: var(--sp-16);
  bottom: var(--sp-16);
}

/* 11d Collection card — portrait photo, name bar, circle arrow */
.collection-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--slate-150);
  color: var(--text);
  text-decoration: none;
  isolation: isolate;
}
.collection-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-media) var(--ease-out);
}
.collection-card:hover > img {
  transform: scale(var(--zoom));
}
.collection-card__bar {
  position: absolute;
  left: var(--sp-10);
  right: var(--sp-10);
  bottom: var(--sp-10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-16);
  border-radius: var(--r-xl);
  background: var(--surface-glass-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.collection-card__name {
  font-size: var(--fs-title);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-title);
  line-height: 1.15;
}
.collection-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-8);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.collection-card__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  background: var(--action);
  color: #fff;
  transition: transform var(--dur-base) var(--ease-out);
}
.collection-card:hover .collection-card__go {
  transform: rotate(-45deg);
}
.collection-card__badge {
  position: absolute;
  top: var(--sp-12);
  left: var(--sp-12);
  z-index: 1;
}
@media (max-width: 559.98px) {
  .collection-card__go {
    width: 2.25rem;
    height: 2.25rem;
  }
  .collection-card__bar {
    padding: var(--sp-10) var(--sp-10) var(--sp-10) var(--sp-12);
  }
}
.collection-card--wide {
  aspect-ratio: 16 / 10;
}
.collection-card:focus-visible {
  outline-offset: 4px;
}

/* 11e News card + featured article + row */
.news-card .card__media {
  aspect-ratio: 16 / 10;
  border-radius: calc(var(--r-2xl) - var(--sp-8));
}
.news-card {
  border-radius: var(--r-2xl);
}
.news-card .card__body {
  gap: var(--sp-10);
  padding: 1.125rem var(--sp-14) var(--sp-14);
}
.news-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.news-card__date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.news-card__title {
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-title);
}
.news-card__excerpt {
  font-size: 0.90625rem;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  line-height: 1.5;
}
.news-feature {
  display: grid;
  overflow: hidden;
  border-radius: var(--r-3xl);
  background: var(--surface);
  border: 1px solid var(--line);
}
.news-feature__media {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-6);
  height: 18rem;
  padding: var(--sp-8);
}
.news-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-2xl);
}
.news-feature__media > div {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--sp-6);
}
.news-feature__media > div img {
  border-radius: var(--r-lg);
}
.news-feature__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  padding: var(--panel-pad-sm);
}
.news-feature__body .btn-group {
  margin-top: auto;
  padding-top: var(--sp-8);
}
@media (min-width: 820px) {
  .news-feature {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .news-feature__media {
    height: 27.5rem;
    padding-right: 0;
  }
  .news-feature__body {
    padding: var(--sp-40);
  }
}
.news-row {
  display: grid;
  color: inherit;
  text-decoration: none;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: var(--sp-14);
  align-items: center;
  padding: var(--sp-8);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
}
.news-row__media {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--slate-150);
}
.news-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-row .news-card__title {
  font-size: var(--fs-body-sm);
  line-height: 1.3;
}

/* 11f Trade fairs: feature (next fair), card (past), row (compact list) */
.fair-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-28);
  padding: var(--panel-pad-sm);
  border-radius: var(--r-2xl);
  background: var(--surface-ink);
  color: #fff;
  overflow: hidden;
}
.fair-feature__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
}
.fair-feature__title {
  font-size: clamp(2.5rem, 1.98rem + 2.15vw, 3.75rem); /* 40 → 60 */
  line-height: 0.95;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.fair-feature__place {
  margin-top: var(--sp-14);
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  color: var(--text-on-dark-muted);
}
.fair-feature__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-10);
}
.fact {
  padding: var(--sp-16);
  border-radius: var(--r-lg);
  background: var(--surface-on-dark);
  border: 1px solid var(--line-on-dark);
}
.fact__label {
  display: block;
  font-size: 0.78125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--text-on-dark-accent);
}
.fact__value {
  display: block;
  margin-top: var(--sp-4);
  font-size: clamp(1.125rem, 1.01rem + 0.45vw, 1.375rem);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.fact--highlight {
  background: var(--brand-slate-deep);
  border-color: var(--brand-slate-deep);
}
/* The fair feature carries a large decorative circle — the motif */
.fair-feature::after {
  content: "";
  position: absolute;
  right: -5rem;
  top: -5rem;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  border: 1.5px solid rgba(187, 205, 231, 0.18);
  box-shadow: 0 0 0 2.5rem rgba(187, 205, 231, 0.05);
  pointer-events: none;
}
.fair-feature > * {
  position: relative;
  z-index: 1;
}

/* Date block (JAN · 12–15 · 2027) */
.date-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 6rem;
  height: 6rem;
  border-radius: var(--r-lg);
  background: var(--brand-slate-deep);
  color: #fff;
  text-align: center;
  line-height: 1;
}
.date-block__month {
  font-size: 0.75rem;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.1em;
  color: var(--text-on-dark-muted);
  text-transform: uppercase;
}
.date-block__days {
  margin: 0.25rem 0;
  font-size: 1.75rem;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.04em;
}
.date-block__year {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-on-dark-muted);
}
/* Next-fair link card (hub hero aside) */
.next-fair-link {
  display: flex;
  gap: var(--sp-16);
  align-items: center;
  padding: var(--sp-14);
  border-radius: var(--r-xl);
  background: var(--surface-ink);
  color: #fff;
  text-decoration: none;
  transition: transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}
.next-fair-link:hover {
  color: #fff;
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-card-hover);
}
.next-fair-link__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-6);
  min-width: 0;
}
.next-fair-link__name {
  font-size: clamp(1.125rem, 1.01rem + 0.45vw, 1.375rem);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-title);
  line-height: 1.2;
}

.fair-card {
  border-radius: var(--r-2xl);
}
.fair-card .card__media {
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--r-2xl) - var(--sp-8));
}
.fair-card .card__body {
  gap: var(--sp-8);
  padding: var(--sp-16) var(--sp-12) var(--sp-12);
}
.fair-card__year {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--text-brand);
}
.fair-card__name {
  font-size: var(--fs-title);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-title);
  line-height: 1.15;
}

.fair-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: center;
  padding: var(--sp-8);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
}
.fair-row__media {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--slate-150);
}
.fair-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fair-row__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.fair-row__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-10);
  flex-wrap: wrap;
}
.fair-row__title .mono {
  font-size: var(--fs-xs);
  color: var(--text-brand);
}
.fair-row__title h3,
.fair-row__title h4 {
  font-size: 1rem;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.02em;
}
.fair-row__aside {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  align-items: center;
}
@media (min-width: 820px) {
  .fair-row {
    grid-template-columns: 8.25rem minmax(0, 1fr) auto;
    gap: var(--sp-20);
    padding: var(--sp-14);
    border-radius: var(--r-xl);
  }
  .fair-row__media {
    aspect-ratio: auto;
    height: 6rem;
    border-radius: var(--r-md);
  }
  .fair-row__title .mono {
    font-size: var(--fs-body-sm);
  }
  .fair-row__title h3,
  .fair-row__title h4 {
    font-size: 1.25rem;
    letter-spacing: var(--ls-title);
  }
  .fair-row__aside {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-end;
  }
}

/* 11g Service tiles (bento) */
.service-grid {
  display: grid;
  gap: var(--grid-gap);
}
@media (min-width: 820px) {
  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(14.5rem, auto);
  }
  .service-grid > .span-rows-2 {
    grid-row: span 2;
  }
  .service-grid > .span-cols-2 {
    grid-column: span 2;
  }
}
.service-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.125rem;
  padding: var(--sp-28);
  border-radius: var(--r-2xl);
  background: var(--surface);
  border: 1px solid var(--line);
}
.service-tile__head {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}
.service-tile__title {
  font-size: clamp(1.25rem, 1.19rem + 0.25vw, 1.375rem);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-title);
  line-height: 1.2;
}
.service-tile p {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--text-muted);
}
.service-tile--ice {
  background: var(--surface-ice);
  border-color: transparent;
}
.service-tile--ice p {
  color: var(--text);
}
.service-tile--brand {
  background: var(--surface-brand);
  border-color: transparent;
  color: #fff;
}
.service-tile--brand p {
  color: var(--text-on-dark-muted);
}
.service-tile--photo {
  min-height: 22rem;
  padding: var(--sp-12);
  justify-content: flex-end;
  overflow: hidden;
  background: var(--surface-ink);
  border: 0;
}
.service-tile--photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-tile__glass {
  position: relative;
  z-index: 1;
  padding: var(--sp-20) 1.375rem;
  border-radius: var(--r-xl);
  background: var(--surface-glass-ink);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
}
.service-tile__glass p {
  margin: var(--sp-6) 0 var(--sp-16);
  color: var(--text-on-dark-muted);
}
.service-tile__glass--light {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-16) 1.125rem;
  background: var(--surface-glass-strong);
  color: var(--text);
}
.service-tile__glass--light p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* 11h Contact tiles & quick tiles */
.contact-list {
  display: grid;
  gap: var(--sp-10);
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-14);
  padding: var(--sp-14) var(--sp-16);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
a.contact-tile:hover {
  border-color: var(--brand-slate-deep);
  color: var(--text);
}
.contact-tile__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.contact-tile__label {
  font-size: 0.78125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.contact-tile__value {
  font-size: 1rem;
  font-weight: var(--fw-heavy);
  overflow-wrap: break-word;
}
.contact-tile--on-dark {
  background: var(--surface-on-dark);
  border-color: var(--line-on-dark);
  color: #fff;
}
a.contact-tile--on-dark:hover {
  border-color: #fff;
  color: #fff;
}
.contact-tile--on-dark .contact-tile__label {
  color: var(--text-on-dark-muted);
}

.quick-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.quick-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  min-height: 7rem;
  padding: var(--sp-14);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
.quick-tile:hover {
  border-color: var(--brand-slate-deep);
  color: var(--text);
}
.quick-tile strong {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-heavy);
}
.quick-tile span:last-child {
  margin-top: -6px;
  font-size: 0.78125rem;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

/* 11i Feature list card (value props on service pages — no invented claims) */
.feature-list {
  display: grid;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .feature-list--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-24);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
}
.feature h3 {
  font-size: 1.1875rem;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.feature p {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── 12 Product detail ───────────────────────────────────────────────────── */
.product-hero {
  display: grid;
  gap: var(--sp-20);
  align-items: start;
  padding-top: var(--sp-20);
}
@media (min-width: 900px) {
  .product-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* 12a Gallery */
.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.gallery__main {
  position: relative;
  height: 26.25rem; /* 420 */
  border-radius: var(--r-3xl);
  overflow: hidden;
  background: var(--brand-ice-light);
}
.gallery__main > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__counter {
  position: absolute;
  top: var(--sp-20);
  left: var(--sp-20);
  z-index: 1;
}
.gallery__zoom {
  position: absolute;
  top: var(--sp-16);
  right: var(--sp-16);
  z-index: 1;
}
.gallery__logo {
  position: absolute;
  left: var(--sp-16);
  bottom: var(--sp-16);
  z-index: 1;
}
.gallery__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(5rem, 1fr);
  gap: var(--sp-10);
  margin: 0;
  padding: 0 0 var(--sp-4);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.gallery__thumb {
  display: block;
  width: 100%;
  height: 5.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  scroll-snap-align: start;
}
.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__thumb[aria-current="true"],
.gallery__thumb[aria-pressed="true"] {
  box-shadow: var(--ring-selected-tint);
}
.gallery__thumb:focus-visible {
  outline-offset: 5px;
}
.gallery__thumb--video {
  position: relative;
}
.gallery__thumb--video::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.25rem;
  height: 2.25rem;
  margin: -1.125rem 0 0 -1.125rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%233e5870'/%3E%3C/svg%3E")
    center / 1.125rem no-repeat;
}
@media (min-width: 820px) {
  .gallery__main {
    height: 40rem; /* 640 */
  }
  .gallery__counter {
    top: var(--sp-20);
    left: var(--sp-20);
  }
  .gallery__zoom {
    top: var(--sp-20);
    right: var(--sp-20);
  }
  .gallery__logo {
    left: var(--sp-20);
    bottom: var(--sp-20);
  }
  .gallery__thumbs {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
  }
  .gallery__thumb {
    height: 6.875rem; /* 110 */
  }
}

/* 12b Product info panel (sticky on desktop) */
.product-panel {
  padding: var(--panel-pad-sm);
  border-radius: var(--r-3xl);
  background: var(--surface);
  border: 1px solid var(--line);
}
@media (min-width: 900px) {
  .product-panel {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-20));
  }
}
.product-panel__code {
  margin-top: var(--sp-20);
  font-size: var(--fs-h1);
  line-height: 0.9;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.055em;
}
.product-panel__desc {
  margin-top: var(--sp-14);
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.product-panel__section {
  margin-top: var(--sp-24);
}
.product-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: var(--sp-24);
}
.product-actions__row {
  display: grid;
  /* two across when they fit, stacked on narrow phones */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: var(--sp-8);
}
.product-actions__row .btn {
  padding-inline: var(--sp-12);
}
.help-link {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-top: 1.125rem;
  padding: var(--sp-12) var(--sp-14);
  border-radius: var(--r-md);
  background: var(--surface-tint);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  text-decoration: none;
}
.help-link:hover {
  border-color: var(--brand-slate-deep);
  color: var(--text);
}

/* 12c Spec tiles (quick facts) */
.spec-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
  margin: var(--sp-24) 0 0;
}
.spec-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-16);
  border-radius: var(--r-md);
  background: var(--surface-tint);
  border: 1px solid var(--line);
}
.spec-tile dt {
  font-size: 0.78125rem;
  font-weight: var(--fw-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-brand);
}
.spec-tile dd {
  margin: 0;
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-title);
  line-height: 1.2;
}
.spec-tile__note {
  display: block; /* lives inside <dd> to keep the <dl> valid */
  margin-top: var(--sp-6);
  font-size: 0.78125rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--text-muted);
}

/* 12d Swatch picker (radiogroup) */
.swatch-picker__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-12);
  margin-bottom: var(--sp-12);
}
.swatch-picker__label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-heavy);
}
.swatch-picker__selected {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--text-brand);
}
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5625rem;
}
@media (min-width: 560px) {
  .swatch-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .swatch-grid--wide {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-10);
  }
}
/* Swatches must stay ≥ 24px (WCAG 2.5.8); 6 columns on 320px ≈ 38px. */

/* 12e Colour grid — every colourway as its own tile */
.colour-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-10);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .colour-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .colour-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sp-12);
  }
}
@media (min-width: 1100px) {
  .colour-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
.colour-tile {
  position: relative;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}
.colour-tile:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-card-hover);
}
.colour-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--r-lg) - var(--sp-6));
}
.colour-tile__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-6) var(--sp-2) var(--sp-2) var(--sp-8);
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
}
.colour-tile__foot .btn-round {
  margin: -0.375rem -0.125rem -0.375rem 0;
}
/* Phones: the add button floats on the photo so "Colour 14" never wraps */
@media (max-width: 559.98px) {
  .colour-tile__foot .btn-round {
    position: absolute;
    top: var(--sp-10);
    right: var(--sp-10);
    margin: 0;
    background: var(--surface-glass-strong);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .colour-tile__foot .btn-round[aria-pressed="true"] {
    background: var(--action);
  }
  .colour-tile__foot {
    padding-block: var(--sp-8) var(--sp-4);
  }
}
.colour-tile:has([aria-pressed="true"]),
.colour-tile.is-selected {
  border-color: var(--brand-slate-deep);
  box-shadow: 0 0 0 1.5px var(--brand-slate-deep);
}

/* 12f Spec table with status column */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: var(--sp-20) 0 var(--sp-16);
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.spec-table caption {
  text-align: left;
}
.spec-table tr {
  border-top: 1px solid var(--divider);
}
.spec-table th,
.spec-table td {
  padding: var(--sp-14) 0;
  vertical-align: middle;
  text-align: left;
}
.spec-table th {
  width: 34%;
  padding-right: var(--sp-12);
  font-size: 0.90625rem;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.spec-table td {
  font-size: 1rem;
  font-weight: var(--fw-heavy);
}
.spec-table td.spec-table__status {
  text-align: right;
  padding-left: var(--sp-12);
}
.spec-table .mono {
  font-size: var(--fs-body-sm);
}
.spec-table__muted {
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
@media (max-width: 559.98px) {
  .spec-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px var(--sp-12);
    padding: var(--sp-12) 0;
  }
  .spec-table th,
  .spec-table td {
    padding: 0;
    width: auto;
  }
  .spec-table th {
    grid-column: 1;
    grid-row: 1;
  }
  .spec-table td.spec-table__status {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
  }
  .spec-table td:not(.spec-table__status) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* 12g Performance tests (method + status, never a number until verified) */
.test-grid {
  display: grid;
  gap: var(--sp-10);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .test-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.test {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-8);
  padding: var(--sp-20);
  border-radius: var(--r-lg);
  background: var(--surface-tint);
  border: 1px solid var(--line);
}
.test__name {
  font-size: 1.0625rem;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.test__method {
  font-family: var(--font-mono);
  font-size: 0.84375rem;
  color: var(--text-brand);
}
.test .chip {
  margin-top: var(--sp-6);
}

/* 12h Commercial terms list — MOQ / Price / Stock / Lead time: On request */
.terms-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  gap: var(--sp-10) var(--sp-16);
  margin: var(--sp-20) 0 0;
  padding: var(--sp-16) 0 0;
  border-top: 1px solid var(--divider);
  list-style: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.terms-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

/* 12i Notice — "Technical details coming soon" (New series 2026) */
.notice {
  display: flex;
  gap: var(--sp-16);
  align-items: flex-start;
  padding: var(--sp-20);
  border-radius: var(--r-xl);
  background: var(--surface-tint);
  border: 1.5px dashed var(--brand-slate);
}
.notice__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.notice__title {
  font-size: 1.0625rem;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.015em;
}
.notice p:not(.notice__title) {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}
.notice .btn-group {
  margin-top: var(--sp-8);
}

/* ── 13 Forms ────────────────────────────────────────────────────────────── */
.form {
  display: grid;
  gap: var(--sp-16);
}
.form-grid {
  display: grid;
  gap: var(--sp-14) var(--sp-16);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .field--full,
  .form-grid > fieldset {
    grid-column: 1 / -1;
  }
}
.form-card {
  padding: var(--panel-pad-sm);
  border-radius: var(--r-2xl);
  background: var(--surface);
  color: var(--text);
}
.form-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
  margin-bottom: 1.375rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  min-width: 0;
}
.label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
  line-height: 1.3;
  color: var(--text);
}
.label__optional {
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.label__required {
  color: var(--error);
  font-weight: var(--fw-heavy);
}
.hint {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  color: var(--text-muted);
}
.input,
.select,
.textarea {
  width: 100%;
  min-height: 3.125rem; /* 50 */
  padding: 0 var(--sp-14);
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border-control);
  background: var(--surface-tint);
  color: var(--text);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.panel--tint .input,
.panel--tint .select,
.panel--tint .textarea,
.surface-tint .input {
  background-color: var(--surface);
}
.input::placeholder,
.textarea::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
  font-weight: var(--fw-medium);
}
.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--brand-slate-deep);
}
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--brand-slate-deep);
  background-color: var(--surface); /* -color only: keeps icons/chevrons */
  outline-offset: 2px;
}
.textarea {
  min-height: 7.5rem;
  padding: var(--sp-12) var(--sp-14);
  resize: vertical;
}
.select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e5870' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.125rem;
  cursor: pointer;
}
.input--search {
  padding-left: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23465668' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.875rem center;
  background-size: 1.125rem;
}
.input--sm,
.select--sm {
  min-height: var(--tap);
  font-size: var(--fs-small);
}
/* Invalid: red border + message; never colour alone (icon + text). */
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--error);
  background-color: var(--surface);
  box-shadow: 0 0 0 1px var(--error);
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--error);
}
.field__error::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.field--hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.fieldset > legend {
  margin-bottom: 0.5625rem;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-heavy);
}

/* Checkbox & radio (native inputs, custom paint, 22px box in 44px row) */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-10);
  min-height: var(--tap);
  padding: 0.6875rem 0;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  cursor: pointer;
}
.check input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: -1px 0 0;
  border: 1.5px solid var(--border-control);
  border-radius: 0.375rem;
  background: var(--surface) center / 0.875rem no-repeat;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.check input[type="radio"] {
  border-radius: 50%;
}
.check input:hover {
  border-color: var(--brand-slate-deep);
}
.check input:checked {
  background-color: var(--brand-slate-deep);
  border-color: var(--brand-slate-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.check input[type="radio"]:checked {
  background-image: none;
  box-shadow: inset 0 0 0 4px #fff;
}
.check input[aria-invalid="true"] {
  border-color: var(--error);
}
.check__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.check--sm {
  min-height: 2.5rem;
  padding: 0.5625rem 0;
  font-size: var(--fs-small);
}

/* Choice pills — radio group shown as pills ("I am a …") */
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}
.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: var(--tap);
  padding: 0 var(--sp-16);
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border-button);
  background: var(--surface);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}
.choice:hover {
  border-color: var(--brand-slate-deep);
}
.choice input {
  margin: 0;
  accent-color: var(--brand-slate-deep);
}
.choice:has(input:checked) {
  background: var(--brand-slate-deep);
  border-color: var(--brand-slate-deep);
  color: #fff;
}
.choice:has(input:checked) input {
  accent-color: var(--brand-ice-light);
}
.choice:has(input:focus-visible) {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
}

/* File input — native control, styled button */
.file-input {
  width: 100%;
  padding: var(--sp-10);
  border-radius: var(--r-md);
  border: 1.5px dashed var(--border-control);
  background: var(--surface-tint);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  cursor: pointer;
}
.file-input::file-selector-button {
  margin-right: var(--sp-12);
  min-height: 2.5rem;
  padding: 0 var(--sp-16);
  border-radius: var(--r-pill);
  border: 1.5px solid var(--brand-slate-deep);
  background: var(--surface);
  color: var(--text-brand);
  font: inherit;
  font-weight: var(--fw-heavy);
  cursor: pointer;
}
.file-input:hover::file-selector-button {
  background: var(--brand-slate-deep);
  color: #fff;
}

.form-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-16);
  margin-top: var(--sp-20);
}
@media (min-width: 560px) {
  .form-actions {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.form-actions .note {
  max-width: 21rem;
}

/* Selection summary inside forms / drawer */
.selection-items {
  display: grid;
  gap: var(--sp-10);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) {
  .selection-items--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.selection-item {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-10);
  border-radius: var(--r-md);
  background: var(--surface-tint);
  border: 1px solid var(--line);
}
.selection-item > img {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}
.selection-item__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.selection-item__text .mono {
  font-size: var(--fs-small);
}
.selection-item__text span:last-child {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Success state (replaces the form after submit) */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-14);
  padding: var(--panel-pad-sm);
  border-radius: var(--r-2xl);
  background: var(--surface);
  border: 1px solid var(--line);
}
.form-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
}
.form-success__icon .icon {
  width: 1.625rem;
  height: 1.625rem;
  stroke-width: 2.2;
}
.form-success p {
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
}

/* ── 14 Alerts, toasts, flash ────────────────────────────────────────────── */
.alert {
  --alert-fg: var(--info);
  --alert-bg: var(--info-bg);
  display: flex;
  gap: var(--sp-14);
  align-items: flex-start;
  padding: var(--sp-16) 1.125rem;
  border-radius: var(--r-md);
  background: var(--alert-bg);
  border: 1.5px solid color-mix(in srgb, var(--alert-fg) 35%, transparent);
  color: var(--text);
}
.alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--alert-fg);
}
.alert__icon .icon {
  stroke-width: 2;
}
.alert__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 0.375rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
}
.alert__title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-heavy);
  color: var(--alert-fg);
}
.alert--success {
  --alert-fg: var(--success);
  --alert-bg: var(--success-bg);
}
.alert--warning {
  --alert-fg: var(--warning);
  --alert-bg: var(--warning-bg);
}
.alert--error {
  --alert-fg: var(--error);
  --alert-bg: var(--error-bg);
}
.alert .btn-round {
  margin: -0.25rem -0.25rem -0.25rem auto;
}

.toast-region {
  position: fixed;
  right: var(--sp-16);
  left: var(--sp-16);
  bottom: calc(var(--sp-16) + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  pointer-events: none;
}
body.has-app-bar .toast-region {
  bottom: calc(6.25rem + env(safe-area-inset-bottom));
}
@media (min-width: 820px) {
  .toast-region {
    left: auto;
    right: var(--sp-24);
    bottom: var(--sp-24);
    align-items: flex-end;
  }
  body.has-app-bar .toast-region {
    bottom: var(--sp-24);
  }
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  width: 100%;
  max-width: 26rem;
  padding: var(--sp-10) var(--sp-10) var(--sp-10) var(--sp-12);
  border-radius: var(--r-xl);
  background: var(--surface-ink);
  color: #fff;
  box-shadow: var(--shadow-bar);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .toast {
    animation: ds-toast-in var(--dur-slow) var(--ease-out);
  }
}
.toast > img {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}
.toast__text {
  flex: 1;
  min-width: 0;
}
.toast__text a {
  color: var(--text-on-dark-accent);
  font-weight: var(--fw-heavy);
}
.toast .btn-round {
  border-color: transparent;
  background: transparent;
  color: var(--text-on-dark-muted);
}
.toast .btn-round:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.toast :focus-visible {
  outline-color: #fff;
}
.toast--success > .alert__icon {
  background: var(--success-bg);
  color: var(--success);
}

/* ── 15 Navigation aids ──────────────────────────────────────────────────── */
/* 15a Breadcrumbs */
.breadcrumbs {
  padding-top: var(--sp-20);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
}
.breadcrumbs li + li::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-top: 1.75px solid var(--brand-slate);
  border-right: 1.75px solid var(--brand-slate);
  transform: rotate(45deg);
  margin-right: 0.125rem;
}
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--text-muted);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--text-brand);
  text-decoration: underline;
}
.breadcrumbs [aria-current="page"] {
  color: var(--text);
}
@media (min-width: 820px) {
  .breadcrumbs {
    padding-top: var(--sp-24);
  }
}

/* 15b Pagination — circles */
.pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination__page,
.pagination__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-width: var(--tap);
  height: var(--tap);
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  text-decoration: none;
}
.pagination__step {
  padding: 0 var(--sp-16);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
}
.pagination__page:hover,
.pagination__step:hover {
  border-color: var(--brand-slate-deep);
  color: var(--text-brand);
}
.pagination__page[aria-current="page"] {
  background: var(--brand-slate-deep);
  border-color: var(--brand-slate-deep);
  color: #fff;
}
.pagination__gap {
  min-width: 1.5rem;
  text-align: center;
  color: var(--text-muted);
}
.pagination__step[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}
@media (max-width: 559.98px) {
  .pagination__step span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .pagination__step {
    padding: 0;
    width: var(--tap);
  }
}
.load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  margin-top: var(--sp-32);
}

/* 15c Filter chips (toggle buttons) */
.filter-chips {
  display: flex;
  gap: var(--sp-8);
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: var(--gutter);
}
.filter-chips::-webkit-scrollbar {
  display: none;
}
@media (min-width: 820px) {
  .filter-chips {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-10);
  flex: none;
  min-height: var(--tap);
  padding: 0 1.125rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}
.filter-chip:has(.count) {
  padding-right: var(--sp-8);
}
.filter-chip:hover {
  border-color: var(--brand-slate-deep);
  color: var(--text);
}
.filter-chip[aria-pressed="true"],
.filter-chip[aria-current="true"],
.filter-chip[aria-current="page"] {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: #fff;
}
.filter-chip .count {
  min-width: 1.75rem;
  height: 1.75rem;
  background: var(--surface-tint);
  color: var(--text);
}
.filter-chip[aria-pressed="true"] .count,
.filter-chip[aria-current] .count {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.filter-chips--on-dark .filter-chip {
  background: transparent;
  border-color: var(--line-on-dark-strong);
  color: #fff;
}
.filter-chips--on-dark .filter-chip[aria-pressed="true"] {
  background: #fff;
  color: var(--text);
}

/* Removable active-filter chip */
.chip--removable {
  min-height: 2.25rem;
  padding-right: 0.25rem;
  gap: var(--sp-6);
  font-size: var(--fs-xs);
}
.chip--removable::before {
  display: none;
}
.chip--removable .chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--surface);
}
.chip--removable:hover .chip__x {
  background: var(--brand-slate-deep);
  color: #fff;
}

/* 15d Tabs (segmented) */
.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
}
.tab {
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
}
.tab:hover {
  background: var(--surface-tint);
  color: var(--text-brand);
}
.tab[aria-selected="true"],
.tab[aria-current="page"] {
  background: var(--brand-slate-deep);
  color: #fff;
}
.tab-panel:focus-visible {
  outline-offset: 6px;
  border-radius: var(--r-md);
}

/* 15e Jump nav (on-page anchors with counts) */
.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}
.jump-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: 3rem;
  padding: 0 var(--sp-8) 0 var(--sp-20);
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border-button);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-heavy);
  text-decoration: none;
}
.jump-link:not(:has(.count)) {
  padding-right: var(--sp-20);
}
.jump-link .count {
  min-width: 2rem;
  height: 2rem;
  background: var(--surface-tint);
  color: var(--text);
}
.jump-link:hover {
  border-color: var(--brand-slate-deep);
  color: var(--text-brand);
}
.jump-link--primary {
  background: var(--brand-slate-deep);
  border-color: var(--brand-slate-deep);
  color: #fff;
}
.jump-link--primary:hover {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: #fff;
}
.jump-link--primary .count {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* 15f Catalogue filters + results bar */
.filters {
  border-radius: var(--r-2xl);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--sp-8) var(--sp-20) var(--sp-20);
}
@media (min-width: 820px) {
  .filters {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-20));
    max-height: calc(100vh - var(--header-h) - var(--sp-40));
    overflow-y: auto;
  }
}
.filters__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  min-height: 3.25rem;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-heavy);
  list-style: none;
  cursor: pointer;
}
.filters__toggle::-webkit-details-marker {
  display: none;
}
.filter-group {
  border-top: 1px solid var(--divider);
}
.filter-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  min-height: 3.25rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  list-style: none;
  cursor: pointer;
}
.filter-group > summary::-webkit-details-marker {
  display: none;
}
.filter-group > summary::after,
.filters__toggle::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.25rem;
  border-right: 1.75px solid var(--brand-slate-deep);
  border-bottom: 1.75px solid var(--brand-slate-deep);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-base) var(--ease-out);
}
.filter-group[open] > summary::after,
details[open] > .filters__toggle::after {
  transform: rotate(-135deg) translateY(-2px);
}
.filter-group__body {
  padding-bottom: var(--sp-12);
}
.filters__actions {
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-16);
}
.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  margin-bottom: var(--sp-20);
}
.results-bar__count {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-heavy);
}
.results-bar__count span {
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
}
.results-bar__active {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}
.results-bar__sort {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.results-bar__sort .select {
  width: auto;
  min-width: 11rem;
}

/* ── 16 Accordion / FAQ ──────────────────────────────────────────────────── */
.accordion {
  display: grid;
  gap: var(--sp-10);
}
.accordion__item {
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--dur-fast) ease;
}
.accordion__item[open] {
  border-color: var(--brand-ice-light);
  box-shadow: 0 0 0 1px var(--brand-ice-light);
}
.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  min-height: 4rem;
  padding: var(--sp-14) var(--sp-14) var(--sp-14) 1.375rem;
  font-size: 1.0625rem;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.015em;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  border-radius: inherit;
}
.accordion__summary::-webkit-details-marker {
  display: none;
}
.accordion__summary::after {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--surface-tint)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e5870' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")
    center / 1.125rem no-repeat;
  border: 1px solid var(--line);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) ease;
}
.accordion__item[open] > .accordion__summary::after {
  transform: rotate(45deg);
  background-color: var(--brand-ice-light);
}
.accordion__summary:hover::after {
  border-color: var(--brand-slate-deep);
}
.accordion__body {
  padding: 0 1.375rem 1.375rem;
  font-size: var(--fs-body-sm);
  line-height: 1.65;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  max-width: 46rem;
}
.accordion__body > * + * {
  margin-top: var(--sp-10);
}
.accordion__num {
  margin-right: var(--sp-6);
}
.faq-layout {
  display: grid;
  gap: var(--sp-32);
}
@media (min-width: 900px) {
  .faq-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--sp-48);
    align-items: start;
  }
}

/* ── 17 Timeline, steps, history ─────────────────────────────────────────── */
/* 17a Timeline (trade fairs) — vertical on phones, horizontal ≥ 820px */
.timeline {
  position: relative;
  display: grid;
  gap: var(--sp-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0.8125rem;
  top: 0.875rem;
  bottom: 0.875rem;
  width: 2px;
  background: var(--brand-ice-light);
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: var(--sp-14);
  align-items: start;
}
.timeline__node {
  position: relative;
  z-index: 1;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--brand-slate-deep);
  border: 2px solid var(--brand-slate-deep);
  box-shadow: 0 0 0 4px var(--bg);
}
.timeline__item--upcoming .timeline__node {
  background: var(--brand-ice-light);
  border-color: var(--brand-slate-deep);
}
.timeline__item--planned .timeline__node {
  background: var(--bg);
  border: 2px dashed var(--brand-slate);
}
.timeline__label {
  display: block;
  margin-bottom: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-brand);
}
@media (min-width: 820px) {
  .timeline {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--grid-gap);
  }
  .timeline::before {
    left: 0;
    right: 0;
    top: 0.8125rem;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .timeline__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-16);
  }
  .timeline__node {
    margin-left: calc(50% - 0.875rem);
  }
}

/* 17b Steps — How we work (5 published steps) */
.steps {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps::before {
  content: "";
  position: absolute;
  left: 1.3125rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  background: var(--brand-ice-light);
}
.step {
  position: relative;
  display: grid;
  align-content: start;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--sp-14);
  padding: var(--sp-8) 0;
}
.step .num {
  position: relative;
  z-index: 1;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.875rem;
}
.step__title {
  margin-top: 0.5625rem;
  font-size: 1.0625rem;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.step__text {
  margin-top: 2px;
  font-size: 0.90625rem;
  line-height: 1.55;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-20);
  }
  .steps::before {
    left: 1.75rem;
    right: calc((100% - 5rem) / 5 - 1.75rem); /* ends at the last circle */
    top: 1.6875rem;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-12);
    padding: 0;
  }
  .step .num {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.0625rem;
  }
  .step__title {
    margin-top: var(--sp-8);
    font-size: 1.1875rem;
  }
}
.step[aria-current="step"] .num,
.step--current .num {
  background: var(--brand-slate-deep);
  color: #fff;
  box-shadow: none;
}

/* 17c Step pills — compact five-step strip (product page, ice panel) */
.step-pills {
  display: grid;
  /* auto-fit: 5 across in a full-width panel, 2 in a half column */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: var(--sp-10);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 0.90625rem;
  font-weight: var(--fw-heavy);
  line-height: 1.2;
}
.step-pill .num {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--surface-tint);
  color: var(--text-brand);
  font-size: 0.875rem;
}
.step-pill--current {
  background: var(--brand-slate-deep);
  color: #fff;
}
.step-pill--current .num {
  background: #fff;
}

/* 17d History list (Roots · 2020 · 2021 · 2026) */
.history {
  margin: 0;
  padding: 0;
  list-style: none;
}
.history li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--sp-16);
  align-items: baseline;
  padding: var(--sp-16) 0;
  border-top: 1px solid var(--divider);
}
.history .mono {
  font-size: var(--fs-body-sm);
  color: var(--text-brand);
}
.history li > span:last-child {
  font-size: 1.03125rem;
  font-weight: var(--fw-semibold);
  line-height: 1.45;
}
@media (min-width: 820px) {
  .history li {
    grid-template-columns: 6rem minmax(0, 1fr);
  }
}

/* ── 18 Media ────────────────────────────────────────────────────────────── */
/* 18a Video block — muted, no autoplay, native controls, poster always set */
.video {
  position: relative;
}
.video__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: var(--surface-ink);
  aspect-ratio: 16 / 9;
}
.video--portrait .video__frame {
  aspect-ratio: 9 / 16;
  max-height: min(80vh, 46rem);
  margin-inline: auto;
}
.video--square .video__frame {
  aspect-ratio: 1;
}
.video__frame video,
.video__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.video__play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-float);
  transition: transform var(--dur-base) var(--ease-out);
}
.video__play-btn .icon {
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 3px;
  fill: var(--brand-slate-deep);
  stroke: none;
}
.video__play:hover .video__play-btn {
  transform: scale(1.06);
}
.video__play:focus-visible {
  outline: none;
}
.video__play:focus-visible .video__play-btn {
  outline: var(--focus-width) solid #fff;
  outline-offset: 4px;
}
.video.is-playing .video__play,
.no-js .video__play {
  display: none;
}
.video__badges {
  position: absolute;
  top: var(--sp-14);
  left: var(--sp-14);
  z-index: 2;
  display: flex;
  gap: var(--sp-6);
  pointer-events: none;
}
.video__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-12);
  margin-top: var(--sp-12);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.video__caption strong {
  color: var(--text);
  font-weight: var(--fw-heavy);
}

/* 18b Media fallback — when no photo exists (never "photo to be uploaded") */
.media-fallback {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 6rem;
  overflow: hidden;
  background: var(--brand-ice-light);
}
.media-fallback::before,
.media-fallback::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(62, 88, 112, 0.25);
  aspect-ratio: 1;
}
.media-fallback::before {
  width: 140%;
  right: -70%;
  bottom: -90%;
}
.media-fallback::after {
  width: 90%;
  right: -45%;
  bottom: -55%;
  background: rgba(240, 250, 255, 0.35);
}
.media-fallback img {
  position: relative;
  z-index: 1;
  width: clamp(2.5rem, 22%, 4.5rem);
  height: auto;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 20px rgba(31, 41, 51, 0.15));
}
.media-fallback--ink {
  background: var(--brand-slate-deep);
}

/* 18c Photo grid (collection gallery) */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 11rem;
  grid-auto-flow: dense;
  gap: var(--sp-10);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 820px) {
  .photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 15rem;
    gap: var(--grid-gap);
  }
}
.photo-grid > li {
  min-height: 0;
}
.photo-grid__item--tall {
  grid-row: span 2;
}
.photo-grid__item--wide {
  grid-column: span 2;
}
.photo-grid__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--slate-150);
  cursor: zoom-in;
}
.photo-grid__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-media) var(--ease-out);
}
.photo-grid__btn:hover img {
  transform: scale(var(--zoom));
}

/* 18c-bis Collection media: portrait film beside a 2-row photo grid */
.collection-media {
  display: grid;
  gap: var(--grid-gap);
}
@media (min-width: 820px) {
  .collection-media {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    align-items: start;
  }
  .collection-media .photo-grid {
    grid-auto-rows: 16.5rem; /* 2 rows ≈ the 9:16 film height */
  }
}

/* 18c-ter Loading skeletons (site.js adds .loaded to .img-skeleton) */
.skeleton,
.img-skeleton {
  background: linear-gradient(90deg, var(--slate-150) 25%, var(--surface-tint) 50%, var(--slate-150) 75%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .skeleton,
  .img-skeleton:not(.loaded) {
    animation: ds-shimmer 1.4s ease-in-out infinite;
  }
}
.skeleton {
  border-radius: var(--r-xs);
  color: transparent !important;
  user-select: none;
}
.skeleton--text {
  height: 1em;
  margin: 0.35em 0;
}
.skeleton--title {
  height: 1.6em;
  width: 60%;
}
.img-skeleton.loaded,
.no-js .img-skeleton {
  background: none;
}
.js .img-skeleton:not(.loaded) img {
  opacity: 0;
}

/* 18d Figure */
.figure img {
  width: 100%;
  border-radius: var(--r-2xl);
}
.figure figcaption {
  margin-top: var(--sp-10);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

/* 18e Lightbox (<dialog class="lightbox">) */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: var(--sp-16);
  border: 0;
  background: rgba(31, 41, 51, 0.96);
  color: #fff;
}
.lightbox::backdrop {
  background: rgba(31, 41, 51, 0.6);
}
.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--sp-12);
}
.lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-12);
}
.lightbox__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lightbox__nav {
  display: flex;
  justify-content: center;
  gap: var(--sp-12);
}
.lightbox .btn-round {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--line-on-dark-strong);
  color: #fff;
}
.lightbox :focus-visible {
  outline-color: #fff;
}

/* ── 19 CTA band ─────────────────────────────────────────────────────────── */
.cta-band {
  background: var(--surface-brand);
  color: var(--text-on-dark);
}
.cta-band__grid {
  display: grid;
  gap: var(--sp-32);
  padding-block: var(--section-space);
}
.cta-band__intro .eyebrow {
  margin-bottom: var(--sp-20);
}
.cta-band__intro p:not(.eyebrow) {
  margin: var(--sp-20) 0 var(--sp-28);
  max-width: 27.5rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-on-dark-muted);
}
.cta-band__intro .contact-list {
  max-width: 27.5rem;
}
@media (min-width: 900px) {
  .cta-band__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-56);
    padding-block: var(--sp-72);
  }
}
.cta-band :focus-visible {
  outline-color: #fff;
}
.cta-band .form-card :focus-visible {
  outline-color: var(--focus-ring);
}
/* Inline CTA (mid-page) */
/* flex-wrap: text and actions sit side by side when there is room (full
   width), and stack in narrow asides — no breakpoint needed. */
.cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-20) var(--sp-40);
  padding: var(--panel-pad-sm);
  border-radius: var(--r-3xl);
  background: var(--surface-ice);
}
.cta-inline > :first-child {
  flex: 1 1 16rem;
}
.cta-inline p {
  margin-top: var(--sp-8);
  font-weight: var(--fw-semibold);
}
.cta-inline--brand {
  background: var(--surface-brand);
  color: #fff;
}
.cta-inline--brand p {
  color: var(--text-on-dark-muted);
}

/* ── 20 Empty states, status pages, auth ─────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-48) var(--sp-24);
  border-radius: var(--r-2xl);
  border: 1.5px dashed var(--brand-slate);
  background: var(--surface-tint);
  text-align: center;
}
.empty-state .icon-circle {
  width: 4rem;
  height: 4rem;
  background: var(--surface);
  margin-bottom: var(--sp-4);
}
.empty-state .icon-circle .icon {
  width: 1.625rem;
  height: 1.625rem;
}
.empty-state__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-title);
  line-height: 1.15;
}
.empty-state p:not(.empty-state__title) {
  max-width: 30rem;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.empty-state .btn-group {
  justify-content: center;
  margin-top: var(--sp-8);
}
.empty-state--plain {
  border-style: solid;
  border-color: var(--line);
  background: var(--surface);
}

.status-page {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 70vh;
  padding-block: var(--sp-48) var(--section-space);
  overflow: hidden;
}
.status-page__grid {
  display: grid;
  gap: var(--sp-40);
  align-items: center;
}
@media (min-width: 820px) {
  .status-page__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}
.status-page__code {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(22rem, 62vw);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1.5rem var(--surface-mist), 0 0 0 3rem rgba(187, 205, 231, 0.45);
  font-family: var(--font-mono);
  font-size: clamp(3.5rem, 2.4rem + 4.5vw, 6rem);
  font-weight: var(--fw-medium);
  color: var(--text-brand);
  letter-spacing: -0.02em;
}
.status-page__code img {
  width: 45%;
  height: auto;
}
.status-page .lead {
  margin-top: var(--sp-20);
}
.status-page .btn-group {
  margin-top: var(--sp-28);
}
@media (max-width: 819.98px) {
  .status-page__code {
    order: -1;
    box-shadow: 0 0 0 0.75rem var(--surface-mist), 0 0 0 1.5rem rgba(187, 205, 231, 0.45);
    margin-block: var(--sp-24);
  }
}
.status-page__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: var(--sp-28) 0 0;
  padding: 0;
  list-style: none;
}

.auth {
  display: grid;
  place-items: center;
  padding-block: var(--sp-48) var(--section-space);
}
.auth-card {
  width: 100%;
  max-width: 28rem;
  padding: var(--panel-pad-sm);
  border-radius: var(--r-3xl);
  background: var(--surface);
  border: 1px solid var(--line);
}
.auth-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-14);
  margin-bottom: var(--sp-24);
}
.auth-card__head img {
  width: 3.5rem;
  height: auto;
}
.auth-card__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-8) var(--sp-16);
  margin-top: var(--sp-20);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--divider);
  font-size: var(--fs-small);
}

/* Dealer area account bar */
.account-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-20);
  border-radius: var(--r-pill);
  background: var(--surface-ink);
  color: #fff;
}
.account-bar__who {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  font-weight: var(--fw-bold);
}
.account-bar__who .num {
  background: var(--brand-ice-light);
  color: var(--brand-ink);
  font-family: var(--font-sans);
  font-weight: var(--fw-heavy);
}
.account-bar :focus-visible {
  outline-color: #fff;
}

/* ── 21 Selection drawer (<dialog class="drawer">) ───────────────────────── */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(28rem, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-popover);
}
@media (min-width: 560px) {
  .drawer {
    border-radius: var(--r-3xl) 0 0 var(--r-3xl);
  }
}
.drawer::backdrop {
  background: rgba(31, 41, 51, 0.55);
}
.drawer[open] {
  display: flex;
  flex-direction: column;
}
@media (prefers-reduced-motion: no-preference) {
  .drawer[open] {
    animation: ds-slide-in var(--dur-slow) var(--ease-out);
  }
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding: var(--sp-20) var(--sp-20) var(--sp-16) var(--sp-24);
  border-bottom: 1px solid var(--divider);
}
.drawer__title {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  font-size: var(--fs-h4);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-title);
}
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-20) var(--sp-24);
}
.drawer__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-16) var(--sp-24) calc(var(--sp-24) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--divider);
  background: var(--surface-tint);
}

/* ── 22 Cookie banner (#consent-banner, data-consent-choice) ─────────────── */
.cookie-banner {
  position: fixed;
  left: var(--sp-12);
  right: var(--sp-12);
  bottom: calc(var(--sp-12) + env(safe-area-inset-bottom));
  z-index: var(--z-cookie);
  display: grid;
  gap: var(--sp-14);
  max-width: 40rem;
  padding: var(--sp-20) 1.375rem;
  border-radius: var(--r-2xl);
  background: var(--surface-ink);
  color: var(--text-on-dark-muted);
  box-shadow: var(--shadow-bar);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}
body.has-app-bar .cookie-banner {
  bottom: calc(6rem + env(safe-area-inset-bottom));
}
@media (min-width: 820px) {
  .cookie-banner {
    left: var(--sp-24);
    right: auto;
    bottom: var(--sp-24);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-20);
  }
  body.has-app-bar .cookie-banner {
    bottom: var(--sp-24);
  }
}
.cookie-banner__title {
  margin-bottom: var(--sp-4);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: var(--fw-heavy);
}
.cookie-banner a {
  color: #fff;
  font-weight: var(--fw-bold);
}
.cookie-banner__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
}
/* Reject and Accept carry equal visual weight (no dark pattern). */
.cookie-banner__actions .btn {
  min-height: var(--tap);
  padding-inline: 1.125rem;
}
.cookie-banner :focus-visible {
  outline-color: #fff;
}
.no-js .cookie-banner {
  display: none;
}

/* ── 23 Prose (articles, legal, care guide, glossary) ────────────────────── */
.prose {
  max-width: 44rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: var(--fw-medium);
  color: var(--text);
}
.prose > * + * {
  margin-top: 1.1em;
}
.prose h2 {
  margin-top: 2.2em;
  font-size: clamp(1.5rem, 1.32rem + 0.75vw, 1.875rem);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.035em;
  line-height: 1.15;
  scroll-margin-top: calc(var(--header-h) + var(--sp-24));
}
.prose h3 {
  margin-top: 1.8em;
  font-size: 1.25rem;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.prose h2 + *,
.prose h3 + * {
  margin-top: 0.6em;
}
.prose p,
.prose li {
  text-wrap: pretty;
}
.prose a {
  color: var(--text-brand);
  font-weight: var(--fw-bold);
  text-decoration: underline;
}
.prose ul,
.prose ol {
  padding-left: 1.3em;
}
.prose li + li {
  margin-top: 0.4em;
}
.prose ul li::marker {
  color: var(--brand-slate);
}
.prose ol li::marker {
  font-family: var(--font-mono);
  color: var(--text-brand);
  font-size: 0.9em;
}
.prose strong {
  font-weight: var(--fw-heavy);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--surface-mist);
}
.prose blockquote {
  position: relative;
  padding: var(--sp-24) var(--sp-28) var(--sp-24) var(--sp-72);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 1.1875rem;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.prose blockquote::before {
  content: "“";
  position: absolute;
  left: var(--sp-20);
  top: var(--sp-20);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--brand-ice-light);
  color: var(--text-brand);
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  font-weight: var(--fw-heavy);
}
.prose figure img,
.prose > img {
  border-radius: var(--r-2xl);
}
.prose figcaption {
  margin-top: var(--sp-8);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: 2.4em 0;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}
.prose th,
.prose td {
  padding: var(--sp-10) var(--sp-12) var(--sp-10) 0;
  border-top: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
}
.prose th {
  font-weight: var(--fw-heavy);
}
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.prose--article > p:first-of-type {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
}

/* Article layout: content + sticky aside (TOC / related) */
.article-layout {
  display: grid;
  gap: var(--sp-40);
}
@media (min-width: 1000px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: var(--sp-56);
    align-items: start;
  }
  .article-layout__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-24));
  }
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8) var(--sp-14);
  margin-top: var(--sp-20);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

/* Table of contents — numbered circles */
.toc {
  padding: var(--sp-20);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
}
.toc__title {
  margin-bottom: var(--sp-10);
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.toc li {
  counter-increment: toc;
}
.toc a {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  min-height: var(--tap);
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  text-decoration: none;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--surface-tint);
  box-shadow: inset 0 0 0 1.5px var(--brand-ice-light);
  color: var(--text-brand);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
}
.toc a:hover,
.toc a[aria-current="true"] {
  color: var(--text-brand);
}
.toc a[aria-current="true"]::before {
  background: var(--brand-slate-deep);
  box-shadow: none;
  color: #fff;
}

/* Glossary — A–Z circles + definition list */
.az-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.az-nav a,
.az-nav span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  text-decoration: none;
}
.az-nav a:hover {
  border-color: var(--brand-slate-deep);
  color: var(--text-brand);
}
.az-nav span {
  color: var(--text-muted);
  background: transparent;
  border-style: dashed;
  opacity: 0.7;
}
.glossary {
  margin: 0;
}
.glossary__letter {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin: var(--sp-40) 0 var(--sp-8);
  scroll-margin-top: calc(var(--header-h) + var(--sp-24));
}
.glossary__entry {
  display: grid;
  gap: var(--sp-6) var(--sp-24);
  padding: 1.125rem 0;
  border-top: 1px solid var(--divider);
}
@media (min-width: 820px) {
  .glossary__entry {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
}
.glossary__entry dt {
  font-size: 1.0625rem;
  font-weight: var(--fw-heavy);
  letter-spacing: -0.015em;
}
.glossary__entry dt .mono {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-brand);
  letter-spacing: 0;
}
.glossary__entry dd {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: 1.65;
  color: var(--text-muted);
}

/* Key–value list (company facts, legal notice details) */
.kv {
  margin: 0;
}
.kv > div {
  display: grid;
  gap: 2px var(--sp-16);
  padding: var(--sp-14) 0;
  border-top: 1px solid var(--divider);
}
@media (min-width: 560px) {
  .kv > div {
    grid-template-columns: minmax(7rem, 2fr) minmax(0, 3fr);
  }
}
.kv dt {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.kv dd {
  margin: 0;
  font-weight: var(--fw-bold);
  overflow-wrap: anywhere;
}

/* ── 24 Utilities ────────────────────────────────────────────────────────── */
/* object-position helpers (replace inline styles) */
.obj-center { object-position: 50% 50%; }
.obj-top    { object-position: 50% 15%; }
.obj-25     { object-position: 50% 25%; }
.obj-35     { object-position: 50% 35%; }
.obj-40     { object-position: 50% 40%; }
.obj-60     { object-position: 50% 60%; }
.obj-bottom { object-position: 50% 85%; }
.obj-left   { object-position: 20% 50%; }
.obj-right  { object-position: 80% 50%; }
.obj-contain { object-fit: contain !important; }

.aspect-1    { aspect-ratio: 1; }
.aspect-4-5  { aspect-ratio: 4 / 5; }
.aspect-3-2  { aspect-ratio: 3 / 2; }
.aspect-16-9 { aspect-ratio: 16 / 9; }

.mt-0  { margin-top: 0 !important; }
.mt-8  { margin-top: var(--sp-8) !important; }
.mt-16 { margin-top: var(--sp-16) !important; }
.mt-24 { margin-top: var(--sp-24) !important; }
.mt-32 { margin-top: var(--sp-32) !important; }
.mt-48 { margin-top: var(--sp-48) !important; }
.mb-0  { margin-bottom: 0 !important; }
.mb-16 { margin-bottom: var(--sp-16) !important; }
.mb-24 { margin-bottom: var(--sp-24) !important; }
.mx-auto { margin-inline: auto; }
.text-center { text-align: center; }
.w-full { width: 100%; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.rounded-3xl { border-radius: var(--r-3xl); }

@media (max-width: 819.98px) {
  .hide-phone { display: none !important; }
}
@media (min-width: 820px) {
  .hide-desktop { display: none !important; }
}

.print-only {
  display: none;
}

/* ── 25 Motion, forced colours, print ────────────────────────────────────── */
@keyframes ds-pulse {
  0% { box-shadow: 0 0 0 0 rgba(187, 205, 231, 0.7); }
  70% { box-shadow: 0 0 0 9px rgba(187, 205, 231, 0); }
  100% { box-shadow: 0 0 0 0 rgba(187, 205, 231, 0); }
}
@keyframes ds-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes ds-spin {
  to { transform: rotate(360deg); }
}
@keyframes ds-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes ds-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes ds-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes ds-slide-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .swatch:hover,
  .collection-card:hover .collection-card__go,
  .video__play:hover .video__play-btn,
  .link--arrow:hover .icon {
    transform: none;
  }
}

@media (forced-colors: active) {
  .chip,
  .card,
  .panel,
  .btn,
  .btn-round,
  .filter-chip,
  .tile-card__bar,
  .collection-card__bar,
  .accordion__item {
    border: 1px solid CanvasText;
  }
  .chip::before {
    background: CanvasText;
    forced-color-adjust: none;
  }
  .status--coming-soon::before,
  .chip--dashed::before,
  .chip--on-dark::before {
    background: Canvas;
    box-shadow: inset 0 0 0 1.5px CanvasText;
  }
  .swatch[aria-checked="true"],
  .gallery__thumb[aria-current="true"],
  .filter-chip[aria-pressed="true"],
  .pagination__page[aria-current="page"],
  .tab[aria-selected="true"] {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
  .num,
  .count {
    border: 1px solid CanvasText;
  }
}

@media print {
  @page {
    margin: 16mm 14mm;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  .utility-bar,
  .site-header,
  .mobile-menu,
  .app-bar,
  .cookie-banner,
  .toast-region,
  .drawer,
  .filters,
  .filter-chips,
  .pagination,
  .jump-nav,
  .cta-band form,
  .video__play,
  .gallery__thumbs,
  .gallery__zoom,
  .btn,
  .btn-round,
  .skip-link,
  .site-footer nav,
  .no-print {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
  .panel,
  .card,
  .band,
  .product-panel,
  .fair-feature,
  .service-tile,
  .cta-band,
  .surface-brand,
  .surface-ink,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    border: 1px solid #999 !important;
  }
  .panel *,
  .band *,
  .fair-feature *,
  .cta-band * {
    color: #000 !important;
  }
  .chip {
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
  }
  .card,
  .spec-table tr,
  .test,
  .accordion__item,
  .fair-row,
  figure {
    break-inside: avoid;
  }
  .accordion__item:not([open]) > .accordion__body {
    display: block;
  }
  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    font-weight: 400;
  }
  .product-panel,
  .filters {
    position: static !important;
  }
  .gallery__main {
    height: auto;
    max-height: 90mm;
  }
  img {
    max-width: 100% !important;
  }
}

/* ── Integration (I, 2026-10-14): rules promoted from page stylesheets ──── */
/* <picture> from the shared picture partial fills its media frame on every
   page that includes the news/fair partials (home, about, news). */
.card__media > picture,
.news-feature__media picture,
.fair-row__media picture {
  display: block;
  height: 100%;
}
.card__media > .media-fallback {
  height: 100%;
}
/* Chinese collection names stay in one piece ("Beijing 北京", never "北 / 京"). */
.collection-card__name [lang] {
  white-space: nowrap;
}
/* The CTA band's light card holds only a note and buttons: keep it compact
   instead of stretching to the height of the contact column. */
.cta-band__card {
  align-self: start;
}
/* Very small phones (320 px): the header actions and long button labels
   fit without widening the page. */
@media (max-width: 359px) {
  .site-header__inner {
    gap: var(--sp-8);
  }
  .header-actions {
    gap: var(--sp-4);
  }
  .btn {
    white-space: normal;
  }
}