@charset "UTF-8";
/*!
 * کامان دیزل پارس — site.css
 * Built from assets/css/src/ by scripts/build-css.mjs — do not edit directly.
 * Parts: 01-base.css, 02-glass.css, 03-components.css, 04-layout.css, 05-pages.css, 06-motion.css, 07-responsive.css
 */
/* ==========================================================================
   01 — Reset, document, typography, bidi
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Never let a stray wide child create a horizontal scrollbar. The real
     fixes live on the offending components; this is the final guard rail
     and uses `clip` (not `hidden`) so position:sticky keeps working. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: clip;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: var(--letter-spacing);
  font-feature-settings: "ss01", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur-3) var(--ease-out),
              color var(--dur-3) var(--ease-out);
}

/* Logical properties throughout so a single stylesheet serves RTL and LTR. */
[dir="ltr"] body { font-family: var(--font-latin); }
[lang="zh"] body,
[lang="zh"] .u-latin { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", var(--font-latin); }

img, svg, video, canvas, picture {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* No blanket background on <img>.
   The tint was there to stop a blank flash while a photograph loads, but it
   paints straight through the transparent parts of anything that has them —
   which put a grey rectangle around the winged-lion lockup, inside the very
   plate that exists to let the logo breathe. A loading placeholder belongs on
   the container that reserves the space, where it cannot show through the
   picture it is standing in for. */
.card-media,
.collage__primary,
.collage__secondary,
.hero-plate__media {
  background-color: color-mix(in oklab, var(--muted) 60%, transparent);
}

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

button { background: none; border: 0; }

p, h1, h2, h3, h4, h5, h6, li, dd, dt, figcaption {
  overflow-wrap: break-word;
}

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

/* ------------------------------------------------------------- headings --- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--foreground);
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }
h6 { font-size: var(--step-0); font-weight: 700; }

.display {
  font-size: var(--step-6);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.032em;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.8;
  color: var(--muted-foreground);
  text-wrap: pretty;
  max-inline-size: 52ch;
}

/* ---------------------------------------------------------------- icons --- */
/* Every icon KD\Icons emits carries this class. One rule sizes all of them to
   the text they sit beside, so a new icon in a new place is correct by
   default instead of stretching to fill its container. Component rules
   (.btn svg, .icon-btn svg …) are more specific and still win. */
.ico {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
  vertical-align: -0.18em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.eyebrow::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 2px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}

/* --------------------------------------------------------------- links --- */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:not([class]) { color: var(--foreground); text-decoration-color: var(--accent); }
a:not([class]):hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------- focus --- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.dark :focus-visible { outline-color: var(--accent); }

/* --------------------------------------------------------------- bidi ----
   Model codes, dimensions, URLs and e-mail must never be reordered by the
   RTL paragraph direction. `.ltr` isolates them properly — using
   unicode-bidi:isolate rather than the deprecated embed/override. */
.ltr, .u-ltr, code, kbd, samp, .spec-value, .model-code, .metric-value {
  direction: ltr;
  unicode-bidi: isolate;
}

.num {
  font-family: var(--font-latin);
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.model-code {
  font-family: var(--font-mono);
  font-size: 0.94em;
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------- utilities --- */
.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: var(--foreground);
  color: var(--background);
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: inset-block-start var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { inset-block-start: var(--space-4); }

.container {
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.container-wide { inline-size: min(100% - (var(--gutter) * 2), var(--container-wide)); margin-inline: auto; }
.container-text { inline-size: min(100% - (var(--gutter) * 2), var(--container-text)); margin-inline: auto; }

.section { padding-block: clamp(3.5rem, 2.2rem + 5vw, 7rem); }
.section-sm { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.section-lg { padding-block: clamp(4.5rem, 2.5rem + 7vw, 9rem); }

.stack > * + * { margin-block-start: var(--flow, var(--space-4)); }
.text-muted { color: var(--muted-foreground); }
.text-accent { color: var(--accent-text); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.no-wrap { white-space: nowrap; }

hr, .rule {
  block-size: 1px;
  border: 0;
  background: linear-gradient(
    to inline-end, transparent, var(--border) 18%, var(--border) 82%, transparent);
}

::selection { background: var(--accent); color: #0e0e0e; }

/* Scrollbars — quiet, matched to the surface. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--muted-foreground) 35%, transparent);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
  background-clip: content-box;
}

@media print {
  .site-header, .site-footer, .no-print, .cta-dock { display: none !important; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   02 — The glass system + controlled 3D depth
   One primitive (.glass) with modifiers, so every frosted surface on the
   site is provably the same material. Depth comes from layering and light,
   never from neon glow.
   ========================================================================== */

.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* The specular edge: a hairline of light along the top, the single detail
   that reads as "real glass" rather than "translucent div". */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    160deg,
    var(--glass-highlight) 0%,
    transparent 32%,
    transparent 68%,
    color-mix(in oklab, var(--glass-highlight) 45%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.glass-strong { background: var(--glass-bg-strong); }
.glass-faint  { background: var(--glass-bg-faint); }
.glass-flat::before { display: none; }
.glass-lg { box-shadow: var(--glass-shadow-lg); }

/* A glass surface that sits on the page background rather than on imagery
   still needs something to refract, so we give it a faint internal wash. */
.glass-solo {
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--card) 88%, transparent),
      color-mix(in oklab, var(--card) 62%, transparent)),
    var(--glass-bg);
}

/* --------------------------------------------------------- glass chips --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 0.4rem;
  padding-inline: 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.chip-accent {
  background: color-mix(in oklab, var(--accent) 22%, var(--glass-bg-strong));
  border-color: color-mix(in oklab, var(--accent) 52%, transparent);
  color: var(--accent-foreground);
}
.dark .chip-accent { color: var(--accent); }

/* A glass surface floating on a photograph has no page behind it to borrow
   legibility from — only whatever the picture happens to be, which changes
   from one model to the next. `.on-media` keeps the frosted edge, the blur and
   the highlight, but stands the label on an opaque base so its text clears AA
   over a white sky, a black tyre or anything between. */
.on-media {
  background: var(--card);
  border-color: var(--border-strong);
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.on-media.chip-accent {
  background: color-mix(in oklab, var(--accent) 20%, var(--card));
  border-color: color-mix(in oklab, var(--accent) 55%, var(--card));
}

.chip-dot::before {
  content: "";
  inline-size: 0.5rem; block-size: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* -------------------------------------------------------- depth / 3D ---
   `.tilt` is progressive: it works as a plain hover-lift everywhere, and
   the JS pointer tracker upgrades it to a real perspective tilt. All the
   transform maths runs off two custom properties so the compositor can
   handle it without layout work. */
.tilt-scene { perspective: 1200px; }

.tilt {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-lift: 0px;
  --tilt-scale: 1;
  transform:
    perspective(1200px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translate3d(0, var(--tilt-lift), 0)
    scale(var(--tilt-scale));
  transform-style: preserve-3d;
  transition:
    transform var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out);
}

.tilt:hover { --tilt-lift: -4px; }

/* will-change only while the pointer is actually on the card. Declaring it
   up front promotes every card to its own compositor layer for the whole life
   of the page — twenty-one layers on a listing page, all held in GPU memory
   to animate the one the pointer is over. The JS adds .is-tracking on
   pointerenter and drops it on leave, which is exactly the window where the
   hint is worth giving. */
.tilt.is-tracking {
  transition: box-shadow var(--dur-2) var(--ease-out);
  will-change: transform;
}

/* Content that should float above the card face during a tilt. */
.tilt-layer { transform: translateZ(var(--tilt-z, 28px)); transform-style: preserve-3d; }

/* The moving specular sheen that follows the pointer across a glass card. */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    22rem 22rem at var(--mx, 50%) var(--my, 0%),
    color-mix(in oklab, var(--glass-highlight) 85%, transparent),
    transparent 62%);
  opacity: 0;
  /* Hidden, not merely transparent. A blend mode makes the compositor treat
     the layer as non-isolated and re-composite it with everything underneath
     on every frame — and it does that whether or not the layer is visible.
     visibility:hidden takes it out of painting entirely, so twenty-one
     invisible sheens stop costing anything while the page scrolls. */
  visibility: hidden;
  transition:
    opacity var(--dur-3) var(--ease-out),
    visibility 0s linear var(--dur-3);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: soft-light;
}
.sheen:hover::after, .sheen:focus-within::after {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-3) var(--ease-out), visibility 0s;
}
.dark .sheen::after { mix-blend-mode: overlay; }

/* ------------------------------------------------- ambient backdrops ---
   Large, very low-contrast washes that give the glass something to refract.
   Deliberately no saturated colour: this is light, not neon. */
.ambient {
  position: relative;
  isolation: isolate;
}

.ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46rem 26rem at 82% -8%,
      color-mix(in oklab, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(38rem 30rem at 8% 4%,
      color-mix(in oklab, var(--foreground) 7%, transparent), transparent 60%);
}

.dark .ambient::before {
  background:
    radial-gradient(46rem 26rem at 82% -8%,
      color-mix(in oklab, var(--accent) 12%, transparent), transparent 62%),
    radial-gradient(38rem 30rem at 8% 4%,
      color-mix(in oklab, #ffffff 6%, transparent), transparent 60%);
}

/* A fine engineering grid — reads as industrial precision, costs nothing. */
.grid-wash { position: relative; isolation: isolate; }
.grid-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--glass-edge) 1px, transparent 1px),
    linear-gradient(to bottom, var(--glass-edge) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
  opacity: 0.6;
}

/* ------------------------------------------- graceful degradation -------
   Safari < 18 and any engine without backdrop-filter gets an opaque card
   rather than unreadable text over an image. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .chip, .site-header__bar, .liquid-btn__body {
    background: color-mix(in oklab, var(--card) 94%, transparent);
  }
  .dark .glass, .dark .chip, .dark .site-header__bar, .dark .liquid-btn__body {
    background: color-mix(in oklab, var(--card) 96%, transparent);
  }
}

/* Motion and 3D are decorations. When the visitor asks for less, they go. */
@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; transition: none; }
  .sheen::after { display: none; }
}


/* ==========================================================================
   03 — Controls, cards, forms, data
   ========================================================================== */

/* ------------------------------------------------------------- buttons --- */
.btn {
  --btn-h: 2.75rem;
  --btn-px: 1.35rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  block-size: var(--btn-h);
  padding-inline: var(--btn-px);
  border-radius: var(--radius-pill);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    transform var(--dur-1) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    filter var(--dur-2) var(--ease-out);
}

.btn:active { transform: translateY(1px) scale(0.985); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }

/* Direction-aware arrow nudge — the arrow always travels "forward". */
.btn .i-arrow { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .i-arrow { transform: translateX(var(--fwd, -0.2rem)); }
[dir="ltr"] .btn { --fwd: 0.2rem; }

.btn-sm { --btn-h: 2.25rem; --btn-px: 1rem; font-size: var(--step--1); }
.btn-lg { --btn-h: 3.25rem; --btn-px: 2rem; font-size: var(--step-1); }
.btn-block { inline-size: 100%; }
.btn-icon { --btn-px: 0; inline-size: var(--btn-h); }

/* Primary — the brand gold. Used for one action per view. */
.btn-primary {
  background: var(--accent);
  color: #0e0e0e;
  border: 1px solid color-mix(in oklab, #0e0e0e 22%, var(--accent));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 -1px 0 rgba(0, 0, 0, 0.10) inset,
    0 6px 18px -8px color-mix(in oklab, var(--accent) 70%, transparent);
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -1px 0 rgba(0,0,0,.1) inset, 0 12px 26px -10px color-mix(in oklab, var(--accent) 80%, transparent); }

/* Solid — near-black on light, near-white on dark. */
.btn-solid {
  background: var(--foreground);
  color: var(--background);
  border: 1px solid var(--foreground);
}
.btn-solid:hover { filter: brightness(1.18); }
.dark .btn-solid:hover { filter: brightness(0.9); }

/* Outline sits on glass, so it is glass — but see the note on .card-glass:
   the tint is what you see, the blur only costs. */
.btn-outline {
  background: var(--glass-bg);
  color: var(--foreground);
  border: 1px solid var(--border-strong);
}
.btn-outline:hover { background: var(--glass-bg-strong); border-color: var(--foreground); }

.btn-ghost { background: transparent; color: var(--foreground); border: 1px solid transparent; }
.btn-ghost:hover { background: color-mix(in oklab, var(--foreground) 7%, transparent); }

.btn-link {
  --btn-h: auto; --btn-px: 0;
  background: none; color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.32em;
  border-radius: 0.25rem;
}
.btn-link:hover { color: var(--accent-text); }
.dark .btn-link:hover { color: var(--accent); }

.btn-danger { background: var(--destructive); color: var(--destructive-foreground); border: 1px solid transparent; }

/* ---------------------------------------------------- the liquid button ---
   A faithful port of the supplied React `LiquidButton`: an unpainted body
   whose entire presence comes from a stack of inset shadows over a blurred
   backdrop, plus a displacement layer that makes the edge ripple. */
.liquid-btn {
  --btn-h: 3.5rem;
  --btn-px: 2.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  block-size: var(--btn-h);
  padding-inline: var(--btn-px);
  border-radius: var(--radius-pill);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1;
  color: var(--foreground);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--dur-3) var(--ease-out), color var(--dur-2) var(--ease-out);
}

.liquid-btn:hover { transform: scale(1.045); }
.liquid-btn:active { transform: scale(0.985); }

/* the shadow shell — exactly the supplied stack */
.liquid-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: box-shadow var(--dur-3) var(--ease-out);
  box-shadow:
    0 0 6px rgba(0, 0, 0, 0.03),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 3px 3px 0.5px -3px rgba(0, 0, 0, 0.9),
    inset -3px -3px 0.5px -3px rgba(0, 0, 0, 0.85),
    inset 1px 1px 1px -0.5px rgba(0, 0, 0, 0.6),
    inset -1px -1px 1px -0.5px rgba(0, 0, 0, 0.6),
    inset 0 0 6px 6px rgba(0, 0, 0, 0.12),
    inset 0 0 2px 2px rgba(0, 0, 0, 0.06),
    0 0 12px rgba(255, 255, 255, 0.15);
}

.dark .liquid-btn::before {
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.03),
    0 2px 6px rgba(0, 0, 0, 0.08),
    inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.09),
    inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.85),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.6),
    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.6),
    inset 0 0 6px 6px rgba(255, 255, 255, 0.12),
    inset 0 0 2px 2px rgba(255, 255, 255, 0.06),
    0 0 12px rgba(0, 0, 0, 0.15);
}

/* the refracting layer */
.liquid-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  -webkit-backdrop-filter: blur(4px) saturate(160%) brightness(1.04);
  backdrop-filter: blur(4px) saturate(160%) brightness(1.04);
}

/* Chromium ignores SVG filters inside backdrop-filter, so the ripple is
   applied to a decorative overlay where every engine honours it. */
.liquid-btn__warp {
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.55;
  filter: url("#kd-glass-warp");
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.42),
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0) 66%,
    rgba(255, 255, 255, 0.28));
  mix-blend-mode: soft-light;
}
.dark .liquid-btn__warp { opacity: 0.4; mix-blend-mode: overlay; }

.liquid-btn > span { position: relative; z-index: 2; pointer-events: none; }

.liquid-btn-accent { color: #0e0e0e; }
.liquid-btn-accent::after {
  background: color-mix(in oklab, var(--accent) 82%, transparent);
}
.dark .liquid-btn-accent { color: #0e0e0e; }

@media (prefers-reduced-motion: reduce) {
  .liquid-btn:hover { transform: none; }
  .liquid-btn__warp { filter: none; }
}

/* ------------------------------------------------------- metal button ---
   Kept for the technical-download affordance: it reads as machined metal,
   which suits a spec sheet far better than another glass pill. */
.metal-btn {
  position: relative;
  display: inline-flex;
  padding: 1.25px;
  border-radius: var(--radius-md);
  background: linear-gradient(to bottom, #000, #a0a0a0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  transition: all 250ms cubic-bezier(0.1, 0.4, 0.2, 1);
}
.metal-btn:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.metal-btn:active { transform: translateY(2.5px) scale(0.99); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.metal-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-md) - 1px);
  background: linear-gradient(to bottom, #fafafa, #3e3e3e 52%, #e5e5e5);
}
/* `.metal-btn > *` was not enough. A universal selector adds nothing to
   specificity, so the whole rule scored 0,1,0 — and the base stylesheet's
   `a:not([class])`, which scores 0,1,1 because the :not() argument counts,
   quietly won the colour and painted near-white text on a gold face in dark
   mode. The face now carries its own class, which is both more specific and
   more honest about what it is. */
.metal-btn > *,
.metal-btn__face {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1px;
  block-size: 2.75rem;
  padding-inline: 1.5rem;
  border-radius: calc(var(--radius-md) - 2px);
  background: linear-gradient(to bottom, #b9b9b9, #969696);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  text-shadow: 0 -1px 0 rgb(80 80 80);
  text-decoration: none;
  cursor: pointer;
}
.metal-btn-gold { background: linear-gradient(to bottom, #917100, #ead98f); }
.metal-btn-gold::before { background: linear-gradient(to bottom, #fffddd, #856807 52%, #fff1b3); }
.metal-btn-gold > *,
.metal-btn-gold .metal-btn__face {
  background: linear-gradient(to bottom, #ffeba1, #9b873f);
  color: #2a2200;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------- cards --- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.card-glass {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  /* No backdrop-filter: this surface sits on the page ground, not over other
     content, so blurring a flat colour changes nothing visible while still
     costing a full compositing pass every frame. Thirty-one of these on one
     page is what took scrolling down to ten frames a second. Blur is kept
     only for surfaces that genuinely float over something — the header, the
     mega panel, the drawer, the dialogs and the sticky bars. */
}
.card-glass:hover { box-shadow: var(--glass-shadow-lg); }

.card-body { padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.card-title { font-size: var(--step-2); font-weight: 800; line-height: 1.3; }
.card-text { color: var(--muted-foreground); font-size: var(--step-0); text-wrap: pretty; }
.card-foot { margin-block-start: auto; padding-block-start: var(--space-3); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.card-media {
  position: relative;
  overflow: hidden;
  background: color-mix(in oklab, var(--muted) 70%, transparent);
}
.card-media > img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
.card:hover .card-media > img { transform: scale(1.045); }
.card-media-4x3 { aspect-ratio: 4 / 3; }
.card-media-16x9 { aspect-ratio: 16 / 9; }
.card-media-3x2 { aspect-ratio: 3 / 2; }

/* A whole card can be a link without nesting interactive elements. The title
   carries no rule at rest — a card is already visibly a target, and an
   underline under every heading in a grid reads as a page of raw links. */
.card-link { text-decoration: none; color: inherit; }
.card:hover .card-link,
.card-link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--accent);
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

/* --------------------------------------------------------------- forms --- */
.field { display: flex; flex-direction: column; gap: 0.45rem; }

.label {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--foreground);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.label .req { color: var(--destructive); }
.label .opt { color: var(--muted-foreground); font-weight: 500; }

.input, .textarea, .select {
  inline-size: 100%;
  min-block-size: 2.9rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--foreground);
  font-size: var(--step-0);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.textarea { min-block-size: 8rem; resize: vertical; line-height: 1.7; }

/* A real chevron rather than two rotated gradients: the gradient trick
   renders as stray glyphs at some zoom levels and reverses badly in RTL. */
.select {
  appearance: none;
  padding-inline-end: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545454' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.9rem center;
  background-size: 1.05rem 1.05rem;
}
[dir="ltr"] .select { background-position: right 0.9rem center; }
.dark .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b8b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.input:hover, .textarea:hover, .select:hover { border-color: var(--border-strong); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: none;
  border-color: var(--foreground);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 45%, transparent);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 22%, transparent);
}
.input::placeholder, .textarea::placeholder { color: color-mix(in oklab, var(--muted-foreground) 78%, transparent); }

.field-error { font-size: var(--step--1); color: var(--destructive); font-weight: 600; }
.field-hint { font-size: var(--step--1); color: var(--muted-foreground); }

.checkbox-row { display: flex; align-items: flex-start; gap: 0.65rem; font-size: var(--step--1); line-height: 1.7; }
.checkbox-row input[type="checkbox"] {
  inline-size: 1.15rem; block-size: 1.15rem;
  margin-block-start: 0.32rem;
  accent-color: var(--accent);
  flex: none;
  cursor: pointer;
}

.form-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.form-grid .span-2 { grid-column: 1 / -1; }

.honeypot { position: absolute; inset-inline-start: -9999px; opacity: 0; pointer-events: none; }

.form-note {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--muted);
  font-size: var(--step--1);
  color: var(--muted-foreground);
}

.alert { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid; font-size: var(--step--1); font-weight: 600; }
.alert-success { border-color: color-mix(in oklab, var(--success) 42%, transparent); background: color-mix(in oklab, var(--success) 12%, transparent); color: var(--success); }
.alert-error { border-color: color-mix(in oklab, var(--destructive) 42%, transparent); background: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); }
.alert-warn { border-color: color-mix(in oklab, var(--warning) 42%, transparent); background: color-mix(in oklab, var(--warning) 10%, transparent); color: var(--warning); }

/* ------------------------------------------------------------- badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem; font-weight: 700; line-height: 1.6;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
}
.badge-accent { background: color-mix(in oklab, var(--accent) 24%, transparent); border-color: color-mix(in oklab, var(--accent) 46%, transparent); color: var(--accent-foreground); }
.dark .badge-accent { color: var(--accent); }
.badge-electric { background: color-mix(in oklab, var(--success) 14%, transparent); border-color: color-mix(in oklab, var(--success) 40%, transparent); color: var(--success); }
.badge-outline { background: transparent; }

/* Badges pinned to the corner of a card sit on the product photograph, so —
   like .on-media chips — they need an opaque base rather than a tint that
   inherits whatever is underneath. */
.product-card__top .badge,
.gallery__badge {
  background: var(--card);
  border-color: var(--border-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
.product-card__top .badge-electric {
  background: color-mix(in oklab, var(--success) 12%, var(--card));
  border-color: color-mix(in oklab, var(--success) 45%, var(--card));
}

/* --------------------------------------------------------- spec tables --- */
.table-scroll {
  /* The table scrolls inside its own box. The page never does. */
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}

.spec-table { inline-size: 100%; border-collapse: collapse; font-size: var(--step--1); min-inline-size: 34rem; }
.spec-table caption { padding: var(--space-4); text-align: start; font-weight: 700; font-size: var(--step-0); border-block-end: 1px solid var(--border); }
.spec-table th, .spec-table td { padding: 0.8rem 1rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--border); }
.spec-table thead th { background: var(--muted); font-weight: 700; color: var(--foreground); position: sticky; inset-block-start: 0; z-index: 1; }
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-block-end: 0; }
.spec-table tbody tr:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.spec-table .spec-group th {
  background: color-mix(in oklab, var(--foreground) 5%, transparent);
  font-size: var(--step--1); font-weight: 800; letter-spacing: 0.02em;
}
.spec-table td.spec-value { font-family: var(--font-latin); font-variant-numeric: tabular-nums; white-space: nowrap; }
.spec-table th[scope="row"] { font-weight: 600; color: var(--muted-foreground); inline-size: 45%; }

/* Definition affordance for Payload vs GVW — the single most confused pair. */
.term {
  border-block-end: 1px dashed var(--muted-foreground);
  cursor: help;
}

/* ------------------------------------------------------------- metrics --- */
.metrics { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }

.metric {
  padding: clamp(0.9rem, 0.7rem + 0.7vw, 1.35rem);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  display: flex; flex-direction: column; gap: 0.2rem;
}
.metric-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); }
.metric-value {
  font-family: var(--font-latin);
  font-size: var(--step-3); font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr; unicode-bidi: isolate;
}
.metric-unit { font-size: 0.5em; font-weight: 600; color: var(--muted-foreground); margin-inline-start: 0.15em; }
.metric-note { font-size: 0.75rem; color: var(--muted-foreground); }

/* ---------------------------------------------------------- breadcrumb --- */
.breadcrumb { font-size: var(--step--1); color: var(--muted-foreground); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.breadcrumb li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb li + li::before { content: "/"; color: var(--border-strong); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 0.25em; }
.breadcrumb [aria-current="page"] { color: var(--foreground); font-weight: 600; }

/* ---------------------------------------------------------- pagination --- */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }
.pager a, .pager span {
  min-inline-size: 2.5rem; block-size: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  text-decoration: none; font-weight: 600; font-size: var(--step--1);
}
.pager a:hover { border-color: var(--foreground); }
.pager [aria-current="page"] { background: var(--foreground); color: var(--background); border-color: var(--foreground); }


/* ==========================================================================
   04 — Header, navigation, drawer, footer, docks
   ========================================================================== */

.page { display: flex; flex-direction: column; min-block-size: 100svh; }
.page > main { flex: 1; }

/* -------------------------------------------------------------- header --- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  padding-block: 0.65rem;
  padding-inline: var(--gutter);
  transition: padding var(--dur-3) var(--ease-out);
}

.site-header__bar {
  position: relative;          /* containing block for the mega panel */
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.4rem + 1.4vw, 1.75rem);
  inline-size: min(100%, var(--container-wide));
  margin-inline: auto;
  padding: 0.55rem 0.75rem 0.55rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  transition: box-shadow var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out);
}
[dir="ltr"] .site-header__bar { padding: 0.55rem 0.55rem 0.55rem 0.75rem; }

.site-header.is-stuck .site-header__bar { box-shadow: var(--glass-shadow-lg); }

/* ---------------------------------------------------------------- logo --- */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; }
.brand__plate {
  display: grid;
  place-items: center;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-pill);
  /* Rule 7 of the brand book: never recolour the logo. On dark surfaces it
     sits on its own light plate with breathing room instead. */
  background: transparent;
  transition: background-color var(--dur-3) var(--ease-out);
}
.dark .brand__plate { background: #f7f7f4; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.brand__img { block-size: clamp(1.55rem, 1.2rem + 1vw, 2.05rem); inline-size: auto; }
.brand__name { display: none; }

/* -------------------------------------------------------------- nav ------ */
.nav { display: none; align-items: center; gap: 0.15rem; margin-inline-end: auto; }
[dir="ltr"] .nav { margin-inline: 0 auto; }

.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.nav__link:hover { background: color-mix(in oklab, var(--foreground) 7%, transparent); }
.nav__link[aria-current="page"], .nav__link.is-active { color: var(--foreground); }
.nav__link[aria-current="page"]::after, .nav__link.is-active::after {
  content: "";
  position: absolute;
  inset-block-end: 0.2rem;
  inset-inline: 0.85rem;
  block-size: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.nav__caret { inline-size: 0.85em; block-size: 0.85em; transition: transform var(--dur-2) var(--ease-out); opacity: 0.6; }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

/* ---------------------------------------------------------- mega menu --- */
/* The panel is anchored to the header bar, not to the menu item that opens it.
   Centring a 58rem panel on a 6rem menu item cannot work: near either end of
   the bar half of it lands outside the viewport, and in RTL the physical
   translate needed to centre it runs the opposite way to the logical offset it
   is correcting — which is how it came to hang 514px off the start edge. From
   the bar, one rule centres it correctly in both directions and it can never
   be wider than the header it belongs to. */
.nav__item { position: static; }

.mega {
  position: absolute;
  inset-block-start: calc(100% + 0.55rem);
  inset-inline: 0;
  margin-inline: auto;
  inline-size: min(58rem, 100%);
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem) scale(0.985);
  transform-origin: top center;
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    visibility 0s linear var(--dur-2);
}

.nav__item.is-open > .mega {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.mega__grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.mega__card {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0.85rem;
  align-items: center;
  padding: 0.7rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.mega__card:hover { background: color-mix(in oklab, var(--foreground) 6%, transparent); border-color: var(--glass-border); }
.mega__thumb {
  inline-size: 3.25rem; block-size: 3.25rem;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--muted);
}
.mega__title { font-size: var(--step--1); font-weight: 700; line-height: 1.4; }
.mega__desc { font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.55; }
.mega__foot {
  margin-block-start: 0.9rem; padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--glass-edge);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
}

/* ------------------------------------------------------ header actions --- */
.header-actions { display: flex; align-items: center; gap: 0.35rem; flex: none; }

.icon-btn {
  display: inline-grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: var(--radius-pill);
  color: var(--foreground);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.icon-btn:hover { background: color-mix(in oklab, var(--foreground) 8%, transparent); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn svg { inline-size: 1.2rem; block-size: 1.2rem; }

/* theme toggle — the icon crossfades, it does not spin */
.theme-toggle__sun, .theme-toggle__moon { grid-area: 1 / 1; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-spring); }
.theme-toggle__moon { opacity: 0; transform: rotate(-45deg) scale(0.6); }
.dark .theme-toggle__sun { opacity: 0; transform: rotate(45deg) scale(0.6); }
.dark .theme-toggle__moon { opacity: 1; transform: none; }

/* language switcher */
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 0.35rem; padding-inline: 0.75rem; inline-size: auto; font-size: var(--step--1); font-weight: 700; }
.lang__code { text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-latin); }

.lang__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.6rem);
  inset-inline-end: 0;
  min-inline-size: 11.5rem;
  padding: 0.4rem;
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  opacity: 0; visibility: hidden;
  transform: translateY(-0.4rem);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  z-index: var(--z-drawer);
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.lang__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  inline-size: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1); font-weight: 600;
  text-decoration: none; cursor: pointer; text-align: start;
}
.lang__opt:hover { background: color-mix(in oklab, var(--foreground) 8%, transparent); }
.lang__opt[aria-current="true"] { background: color-mix(in oklab, var(--accent) 24%, transparent); }
.lang__native { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 500; }

/* --------------------------------------------------------- mobile nav --- */
.nav-toggle { display: inline-grid; }

.nav-toggle__box { inline-size: 1.2rem; block-size: 0.85rem; position: relative; }
.nav-toggle__box span {
  position: absolute; inset-inline: 0; block-size: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.nav-toggle__box span:nth-child(1) { inset-block-start: 0; }
.nav-toggle__box span:nth-child(2) { inset-block-start: calc(50% - 1px); }
.nav-toggle__box span:nth-child(3) { inset-block-end: 0; }
[aria-expanded="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(0.395rem) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle__box span:nth-child(3) { transform: translateY(-0.395rem) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  grid-template-rows: 1fr;
  pointer-events: none;
}
.drawer[hidden] { display: none; }

.drawer__scrim {
  position: absolute; inset: 0;
  background: color-mix(in oklab, #000 45%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}

.drawer__panel {
  position: relative;
  inline-size: min(23rem, 88vw);
  margin-inline-start: auto;
  block-size: 100%;
  padding: var(--space-5) var(--space-5) var(--space-7);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--glass-bg-strong);
  border-inline-start: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  transform: translateX(100%);
  transition: transform var(--dur-4) var(--ease-out);
}
[dir="ltr"] .drawer__panel { margin-inline: auto 0; border-inline: 1px solid var(--glass-border) 0; transform: translateX(-100%); }

.drawer.is-open { pointer-events: auto; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-5); }

.drawer__nav { display: flex; flex-direction: column; gap: 0.15rem; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-md);
  font-size: var(--step-1); font-weight: 700;
  text-decoration: none;
  min-block-size: 3rem;
}
.drawer__link:hover { background: color-mix(in oklab, var(--foreground) 7%, transparent); }
.drawer__link[aria-current="page"] { background: color-mix(in oklab, var(--accent) 22%, transparent); }

.drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
.drawer__group.is-open .drawer__sub { grid-template-rows: 1fr; }
.drawer__sub > div { overflow: hidden; }
.drawer__sublink {
  display: block;
  padding: 0.6rem 1.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1); font-weight: 600;
  color: var(--muted-foreground);
  text-decoration: none;
  min-block-size: 2.6rem;
}
.drawer__sublink:hover { color: var(--foreground); background: color-mix(in oklab, var(--foreground) 5%, transparent); }

.drawer__foot { margin-block-start: var(--space-6); padding-block-start: var(--space-5); border-block-start: 1px solid var(--glass-edge); display: flex; flex-direction: column; gap: var(--space-3); }

.drawer__controls { margin-block-start: var(--space-3); display: flex; flex-direction: column; gap: var(--space-4); }
.drawer__control { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.drawer__langs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.drawer__langs .pill { text-decoration: none; min-block-size: 2.5rem; display: inline-flex; align-items: center; }
.drawer__langs .pill[aria-current="true"] { background: var(--foreground); color: var(--background); border-color: var(--foreground); }

body.is-locked { overflow: hidden; }

/* ------------------------------------------------------------- search --- */
.search-dialog { border: 0; padding: 0; background: transparent; max-inline-size: none; max-block-size: none; inline-size: 100%; block-size: 100%; }
.search-dialog::backdrop { background: color-mix(in oklab, #000 52%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.search-dialog__panel {
  inline-size: min(42rem, calc(100vw - 2rem));
  margin: clamp(3rem, 10vh, 8rem) auto 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}
.search-results { margin-block-start: var(--space-3); max-block-size: min(26rem, 50vh); overflow-y: auto; display: flex; flex-direction: column; gap: 0.2rem; }
.search-result {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.65rem 0.75rem; border-radius: var(--radius-sm);
  text-decoration: none;
}
.search-result:hover, .search-result.is-active { background: color-mix(in oklab, var(--accent) 20%, transparent); }
.search-result__title { font-weight: 700; font-size: var(--step--1); }
.search-result__meta { font-size: 0.75rem; color: var(--muted-foreground); }
.search-empty { padding: var(--space-5); text-align: center; color: var(--muted-foreground); font-size: var(--step--1); }

/* ---------------------------------------------------------- sticky CTA --- */
.cta-dock {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-sticky);
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--glass-bg-strong);
  border-block-start: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  transform: translateY(110%);
  transition: transform var(--dur-4) var(--ease-out);
}
.cta-dock.is-visible { transform: none; }
.cta-dock__inner { display: flex; align-items: center; gap: var(--space-3); inline-size: min(100%, var(--container)); margin-inline: auto; }
.cta-dock__label { flex: 1; min-inline-size: 0; }
.cta-dock__name { font-weight: 700; font-size: var(--step--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cta-dock__meta { font-size: 0.75rem; color: var(--muted-foreground); }

/* -------------------------------------------------------------- footer --- */
.site-footer {
  margin-block-start: var(--space-8);
  padding-block: var(--space-8) var(--space-5);
  border-block-start: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 55%, var(--background));
}

.footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.footer__brand { display: flex; flex-direction: column; gap: var(--space-4); max-inline-size: 24rem; }
.footer__tag { color: var(--muted-foreground); font-size: var(--step--1); line-height: 1.85; }

.footer__col h2 { font-size: var(--step--1); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-foreground); margin-block-end: var(--space-3); }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.footer__col a { display: inline-block; padding-block: 0.3rem; font-size: var(--step--1); text-decoration: none; color: var(--foreground); }
.footer__col a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.25em; }
.dark .footer__col a:hover { color: var(--accent); }

.footer__contact { display: flex; flex-direction: column; gap: 0.6rem; font-size: var(--step--1); }
.footer__contact a { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; min-block-size: 1.75rem; }
.footer__contact svg { inline-size: 1rem; block-size: 1rem; color: var(--accent-strong); flex: none; }
.dark .footer__contact svg { color: var(--accent); }

.footer__social { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.footer__social a {
  display: inline-grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.footer__social a:hover { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, transparent); transform: translateY(-2px); }
.footer__social svg { inline-size: 1.1rem; block-size: 1.1rem; }

.footer__trust { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.footer__trust .trust-badge {
  display: inline-grid; place-items: center;
  padding: 0.5rem;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--border);
}
.footer__trust .trust-badge img { block-size: 4.5rem; inline-size: auto; }

.footer__bottom {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  align-items: center; justify-content: space-between;
  font-size: 0.8125rem; color: var(--muted-foreground);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer__legal a { display: inline-flex; align-items: center; min-block-size: 1.75rem; text-decoration: none; }
.footer__legal a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* -------------------------------------------------------- breakpoints --- */
@media (min-width: 64rem) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .brand__name { display: block; font-weight: 800; font-size: var(--step--1); letter-spacing: -0.01em; }
  .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-7); }

  /* Set by ui.js when the bar measures itself as too narrow for the language
     it is currently in — see watchHeaderFit(). The drawer takes over, exactly
     as it does on tablet. */
  .site-header.is-condensed .nav { display: none; }
  .site-header.is-condensed .nav-toggle { display: inline-grid; }
}

/* Laptops between 1024 and 1440 get a tighter bar so the full menu survives
   in the long languages too. Two economies, both of them design decisions
   rather than squeezes: the contact link steps aside for the proposal button
   that sits three inches to its right and goes to the same place, and the
   links themselves sit closer together. */
@media (min-width: 64rem) and (max-width: 89.999rem) {
  .nav { gap: 0; }
  .nav__link { padding-inline: 0.55rem; }
  .nav__link[aria-current="page"]::after, .nav__link.is-active::after { inset-inline: 0.55rem; }
  .header-actions { gap: 0.2rem; }
  .site-header__bar { gap: clamp(0.5rem, 0.2rem + 0.8vw, 1rem); }
}
@media (min-width: 64rem) {
  .site-header .nav__link[data-nav-key="nav.contact"] { display: none; }
}

/* Without JavaScript the bar cannot measure itself, so the narrow end of the
   laptop range keeps the drawer: a menu that is reachable is worth more than
   one that is complete. */
@media (min-width: 64rem) and (max-width: 74.999rem) {
  html:not(.js) .nav { display: none; }
  html:not(.js) .nav-toggle { display: inline-grid; }
}

@media (min-width: 48rem) and (max-width: 63.999rem) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   05 — Page compositions: the two hero systems, product pages, editorial
   ========================================================================== */

/* ======================================================== HERO — home ====
   The `hero-04` composition: copy on one side, an overlapping art collage
   on the other, over a heavily blurred and radially-masked wash of the
   same imagery. Used once, on the home page.
   ======================================================================== */
.hero-home {
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  overflow: hidden;
}

/* A very soft wash of the hero photography, heavily blurred and desaturated
   so the glass above it has something to refract without the copy ever
   sitting on a muddy patch of colour. */
.hero-home__wash {
  position: absolute;
  inset-block-start: -12%;
  inset-inline: -10%;
  block-size: 92%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.28;
  filter: blur(64px) saturate(0.7);

  -webkit-mask-image: radial-gradient(65% 85% at 50% 0%, #000 20%, transparent 72%);
  mask-image: radial-gradient(65% 85% at 50% 0%, #000 20%, transparent 72%);
}
.hero-home__wash img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
.dark .hero-home__wash { opacity: 0.14; filter: blur(72px) saturate(0.6); }




.hero-home__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-7);
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  /* Less at the bottom than the top: the section below brings its own
     padding, and two full rhythms stacked read as a hole in the page. */
  padding-block: clamp(3rem, 1.8rem + 5vw, 6rem) clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

.hero-home__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.hero-home__title { font-size: var(--step-5); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; }

/* The brief limits gold to CTAs and accent rules, and gold type on a light
   ground fails contrast anyway. So the second line keeps the foreground
   colour and earns its emphasis from a gold rule underneath it. */
.hero-home__title .accent-line {
  position: relative;
  display: inline-block;
  color: var(--foreground);
}
.hero-home__title .accent-line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0.08em;
  block-size: 0.14em;
  border-radius: 999px;
  background: var(--accent);
  z-index: -1;
  opacity: 0.85;
}
.dark .hero-home__title .accent-line::after { opacity: 0.55; }
.hero-home__desc { font-size: var(--step-1); color: var(--muted-foreground); max-inline-size: 34rem; line-height: 1.8; text-wrap: pretty; }
.hero-home__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-start: var(--space-2); }
.hero-home__stats { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-4); }

/* ---- the art collage ---- */
.collage { position: relative; inline-size: 100%; }

.collage__primary {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  outline: 1px solid var(--glass-edge);
  outline-offset: -1px;
  aspect-ratio: 4 / 3;
}
.collage__primary img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* The secondary plate breaks out of the OUTER edge of the collage — the
   side away from the copy — so it adds depth without crowding the headline.
   Logical properties keep that true in both directions. */
.collage__secondary {
  position: absolute;
  inset-block-end: clamp(-1.5rem, -3vw, -2.5rem);
  inset-inline-end: clamp(-1rem, -2.5vw, -2.5rem);
  inline-size: clamp(8.5rem, 34%, 14rem);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 4px solid var(--background);
  transition: transform var(--dur-4) var(--ease-out);
}
.collage__secondary img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.collage:hover .collage__secondary { transform: translateY(-6px) rotate(-1.2deg); }

.collage__tag {
  position: absolute;
  inset-block-start: clamp(0.75rem, 2vw, 1.25rem);
  inset-inline-end: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 2;
}

@media (min-width: 64rem) {
  .hero-home__inner { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

/* ==================================================== HERO — product ====
   The `hero-07` composition: a full-bleed landscape plate that fades into
   the page, then a 12-column band with the tagline set against the title.
   Used at the top of every category and product page.
   ======================================================================== */
.hero-plate { position: relative; isolation: isolate; inline-size: 100%; overflow: hidden; }

.hero-plate__media { position: relative; inline-size: 100%; overflow: hidden; border-end-start-radius: 0; border-end-end-radius: 0; }
.hero-plate__media::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: color-mix(in oklab, var(--background) 15%, transparent);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.dark .hero-plate__media::after { background: color-mix(in oklab, var(--background) 30%, transparent); }

.hero-plate__media img {
  inline-size: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}
.dark .hero-plate__media img { outline-color: rgba(255, 255, 255, 0.1); filter: brightness(0.97) saturate(0.92); }

/* the plate dissolves into the page instead of ending on a hard edge */
.hero-plate__media {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 96%);
}

@media (min-width: 40rem) { .hero-plate__media img { aspect-ratio: 9 / 4; } }

.hero-plate__band {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  inline-size: min(100% - (var(--gutter) * 2), var(--container-wide));
  margin-inline: auto;
  padding-block: clamp(2rem, 1.4rem + 2.5vw, 3rem) clamp(3.5rem, 2.2rem + 5vw, 6rem);
}

.hero-plate__tagline { font-size: var(--step-0); color: var(--muted-foreground); line-height: 1.75; letter-spacing: -0.01em; max-inline-size: 22rem; }
.hero-plate__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.hero-plate__title { font-size: var(--step-4); font-weight: 800; line-height: 1.14; letter-spacing: -0.028em; }
.hero-plate__desc { font-size: var(--step-0); color: var(--muted-foreground); line-height: 1.85; max-inline-size: 40rem; text-wrap: pretty; }
.hero-plate__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* The hero card floats up over the plate edge — the depth cue that makes
   the whole page read as layered glass rather than stacked blocks. */
.hero-plate__float {
  position: relative;
  z-index: 3;
  margin-block-start: clamp(-4rem, -6vw, -6rem);
  padding: clamp(1.1rem, 0.85rem + 1.1vw, 1.75rem);
}

@media (min-width: 64rem) {
  .hero-plate__band { grid-template-columns: repeat(12, 1fr); gap: var(--space-5); }
  .hero-plate__tagline { grid-column: 1 / span 4; align-self: start; }
  .hero-plate__copy { grid-column: 7 / span 6; }
}

/* ==================================================== section headings === */
.section-head {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-block-end: var(--space-6);
  max-inline-size: 46rem;
}
.section-head--center { margin-inline: auto; text-align: center; align-items: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head__title { font-size: var(--step-4); }
.section-head__lede { font-size: var(--step-1); color: var(--muted-foreground); line-height: 1.8; text-wrap: pretty; }

.section-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
  margin-block-end: var(--space-6);
}

/* ============================================================== grids ==== */
.grid-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.grid-2 { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid-4 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }

/* ------------------------------------------------------- family cards --- */
.family-card { position: relative; }
.family-card .card-media { aspect-ratio: 5 / 4; }
.family-card__count { font-size: 0.75rem; font-weight: 700; color: var(--muted-foreground); }
.family-card__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ------------------------------------------------------ product cards --- */
.product-card .card-media { aspect-ratio: 4 / 3; background: linear-gradient(160deg, var(--muted), color-mix(in oklab, var(--muted) 55%, var(--card))); }
.product-card .card-media img { object-fit: contain; padding: 0.5rem; }
.product-card__specs { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.8125rem; color: var(--muted-foreground); }
.product-card__spec { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.product-card__spec b { color: var(--foreground); font-family: var(--font-latin); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.product-card__top { position: absolute; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; z-index: 2; display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* ---------------------------------------------------------- compare ----- */
.compare-toggle {
  position: absolute; inset-block-start: 0.75rem; inset-inline-end: 0.75rem; z-index: 4;
  inline-size: 2.25rem; block-size: 2.25rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  /* Opaque, like the badges on the same photograph: this button floats on a
     product image whose colour we do not control, so its legibility cannot
     depend on what is behind it — and 26 blurred buttons per grid was the
     second half of the scroll cost. */
  background: var(--card);
  border: 1px solid var(--border-strong);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-spring);
}
.compare-toggle:hover { transform: scale(1.08); }
.compare-toggle[aria-pressed="true"] { background: var(--accent); color: #0e0e0e; border-color: var(--accent); }
.compare-toggle svg { inline-size: 1rem; block-size: 1rem; }

.compare-table th[scope="row"] { inline-size: 14rem; }
.compare-table .is-diff { background: color-mix(in oklab, var(--accent) 16%, transparent); font-weight: 700; }

/* ----------------------------------------------------------- gallery ---- */
.gallery { display: grid; gap: var(--space-3); }
.gallery__main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--muted), color-mix(in oklab, var(--muted) 50%, var(--card)));
  border: 1px solid var(--border);
  aspect-ratio: 4 / 3;
}
.gallery__main img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: clamp(0.5rem, 2vw, 1.5rem); }
.gallery__thumbs { display: flex; gap: 0.5rem; overflow-x: auto; padding-block-end: 0.35rem; scroll-snap-type: x mandatory; }
.gallery__thumb {
  flex: none;
  inline-size: 4.75rem; block-size: 4rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--muted);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.gallery__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.gallery__thumb:hover { transform: translateY(-2px); }
.gallery__thumb[aria-current="true"] { border-color: var(--accent); }
.gallery__kind { position: absolute; inset-block-end: 0.75rem; inset-inline-start: 0.75rem; z-index: 2; }

/* ------------------------------------------------------ product layout -- */
.product-layout { display: grid; gap: var(--space-6); }
@media (min-width: 64rem) {
  .product-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .product-layout__aside { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); }
}

.spec-groups { display: flex; flex-direction: column; gap: var(--space-5); }
.spec-group__title { font-size: var(--step-1); font-weight: 800; margin-block-end: var(--space-3); display: flex; align-items: center; gap: 0.6rem; }
.spec-group__title::before { content: ""; inline-size: 0.3rem; block-size: 1.1em; border-radius: 2px; background: var(--accent); flex: none; }

.data-note {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong);
  background: color-mix(in oklab, var(--muted) 60%, transparent);
  font-size: var(--step--1);
  color: var(--muted-foreground);
  line-height: 1.8;
}
.data-note svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; margin-block-start: 0.25rem; color: var(--accent-strong); }
.dark .data-note svg { color: var(--accent); }

/* ------------------------------------------------------------ filters --- */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  margin-block-end: var(--space-5);
}
.filter-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.filter-group__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }

.pill {
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  font-size: var(--step--1); font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-2) var(--ease-out);
}
.pill:hover { border-color: var(--foreground); }
.pill[aria-pressed="true"] { background: var(--foreground); color: var(--background); border-color: var(--foreground); }

/* --------------------------------------------------------- editorial --- */
.prose { max-inline-size: var(--container-text); font-size: var(--step-0); line-height: 1.95; }
.prose > * + * { margin-block-start: 1.15em; }
.prose h2 { font-size: var(--step-3); margin-block-start: 2em; }
.prose h3 { font-size: var(--step-2); margin-block-start: 1.6em; }
.prose ul, .prose ol { padding-inline-start: 1.4em; display: flex; flex-direction: column; gap: 0.5em; }
.prose li::marker { color: var(--accent-strong); }
.dark .prose li::marker { color: var(--accent); }
.prose blockquote {
  padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--accent);
  color: var(--muted-foreground);
  font-size: var(--step-1);
}
.prose img { border-radius: var(--radius-md); margin-block: 1.6em; }
.prose figcaption { font-size: var(--step--1); color: var(--muted-foreground); text-align: center; margin-block-start: 0.6em; }
.prose table { inline-size: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td { padding: 0.65rem 0.85rem; border: 1px solid var(--border); text-align: start; }
.prose thead th { background: var(--muted); font-weight: 700; }

.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--step--1); color: var(--muted-foreground); }
.article-meta__dot::before { content: "•"; margin-inline-end: var(--space-4); }

/* ------------------------------------------------------------- steps ---- */
.steps { counter-reset: step; display: grid; gap: var(--space-4); }
.step {
  position: relative;
  padding-inline-start: 3.5rem;
  min-block-size: 2.5rem;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal);
  position: absolute;
  inset-inline-start: 0; inset-block-start: 0;
  inline-size: 2.5rem; block-size: 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  font-family: var(--font-latin);
  font-weight: 800; font-size: var(--step-0);
}
.step__title { font-weight: 700; font-size: var(--step-1); margin-block-end: 0.25rem; }
.step__text { color: var(--muted-foreground); font-size: var(--step--1); line-height: 1.85; }

/* -------------------------------------------------------------- FAQ ----- */
.faq { display: flex; flex-direction: column; gap: 0.75rem; }
.faq__item {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.faq__item[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-weight: 700; font-size: var(--step-0);
  cursor: pointer; list-style: none;
  min-block-size: 3.25rem;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; color: var(--muted-foreground); transition: transform var(--dur-3) var(--ease-out); }
.faq__item[open] .faq__q svg { transform: rotate(45deg); }
.faq__a { padding: 0 var(--space-5) var(--space-5); color: var(--muted-foreground); line-height: 1.9; }

/* -------------------------------------------------------------- CTA ----- */
.cta-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 1.4rem + 3vw, 4rem);
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.cta-panel__title { font-size: var(--step-4); max-inline-size: 22ch; }
.cta-panel__text { color: var(--muted-foreground); max-inline-size: 52ch; font-size: var(--step-0); line-height: 1.85; }
.cta-panel__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-block-start: var(--space-2); }

/* -------------------------------------------------------- empty / 404 --- */
.state {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  text-align: center;
}
.state__code { font-family: var(--font-latin); font-size: clamp(4rem, 2rem + 14vw, 9rem); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--accent); }
.state__title { font-size: var(--step-3); }
.state__text { color: var(--muted-foreground); max-inline-size: 44ch; }

/* -------------------------------------------------------- logo strip ---- */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.logo-strip img {
  block-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  inline-size: auto;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--dur-3) var(--ease-out), filter var(--dur-3) var(--ease-out);
}
.logo-strip img:hover { opacity: 1; filter: none; }
.dark .logo-strip img { filter: grayscale(1) invert(1) brightness(1.6); opacity: 0.45; }
.dark .logo-strip img:hover { opacity: 0.9; }

/* --------------------------------------------------------- downloads ---- */
.download-row {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
}
.download-row__icon { inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--muted); flex: none; }
.download-row__meta { flex: 1; min-inline-size: 12rem; }
.download-row__name { font-weight: 700; font-size: var(--step-0); }
.download-row__info { font-size: 0.75rem; color: var(--muted-foreground); font-family: var(--font-latin); direction: ltr; unicode-bidi: isolate; }


/* ==========================================================================
   06 — Motion & micro-interactions
   Every entrance is short, blurred-in and one-way. Nothing loops, nothing
   hijacks the scroll, and everything below collapses under
   prefers-reduced-motion.
   ========================================================================== */

/* ------------------------------------------------------- scroll reveal ---
   Elements start hidden ONLY when JS is running, so a no-JS visitor and a
   crawler always see fully-rendered content. */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  filter: blur(6px);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out),
    filter var(--dur-4) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js [data-reveal="media"] { transform: translate3d(0, 24px, 0); filter: blur(8px); }
.js [data-reveal="plate"] { transform: translate3d(0, -20px, 0); filter: blur(8px); }
.js [data-reveal="side"]  { transform: translate3d(var(--reveal-x, 18px), 0, 0); }

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* A staggered group: children inherit an incrementing delay from the DOM
   order, which is set once in JS rather than with dozens of CSS rules. */
[data-reveal-group] > * { --reveal-delay: calc(var(--i, 0) * 70ms); }

/* ----------------------------------------------------------- counters --- */
.counter { font-variant-numeric: tabular-nums lining-nums; direction: ltr; unicode-bidi: isolate; }

/* -------------------------------------------------- underline sweep ----- */
.link-sweep { position: relative; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; }
.link-sweep::after {
  content: "";
  position: absolute;
  inset-block-end: -0.15rem;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform var(--dur-3) var(--ease-out);
}
.link-sweep:hover::after, .link-sweep:focus-visible::after { transform: scaleX(1); transform-origin: inline-start; }

/* ---------------------------------------------------- image ken-burns ---
   A 1.5% drift over 14s on hero photography only — enough to feel alive,
   far too slow to distract. */
.drift { animation: kd-drift 16s var(--ease-in-out) infinite alternate; }
@keyframes kd-drift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.045) translate3d(0, -0.8%, 0); }
}

/* ------------------------------------------------------ marquee strip ---
   Duplicated content + a translate keeps it seamless without JS. */
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: clamp(1.5rem, 3vw, 3.5rem); padding-inline-end: clamp(1.5rem, 3vw, 3.5rem); animation: kd-marquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes kd-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
[dir="rtl"] .marquee__track { animation-name: kd-marquee-rtl; }
@keyframes kd-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* ------------------------------------------------------------ skeleton -- */
.skeleton {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--muted) 90%, transparent) 25%,
    color-mix(in oklab, var(--muted) 55%, transparent) 37%,
    color-mix(in oklab, var(--muted) 90%, transparent) 63%);
  background-size: 400% 100%;
  animation: kd-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes kd-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* -------------------------------------------------------------- toast --- */
.toast-stack {
  position: fixed;
  inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 1rem;
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 0.6rem;
  pointer-events: none;
  max-inline-size: min(24rem, calc(100vw - 2rem));
}
.toast {
  pointer-events: auto;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  font-size: var(--step--1); font-weight: 600;
  display: flex; align-items: center; gap: 0.6rem;
  animation: kd-toast-in var(--dur-3) var(--ease-spring) both;
}
.toast.is-out { animation: kd-toast-out var(--dur-2) var(--ease-out) both; }
.toast svg { inline-size: 1.05rem; block-size: 1.05rem; flex: none; }
.toast-success svg { color: var(--success); }
.toast-error svg { color: var(--destructive); }
@keyframes kd-toast-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes kd-toast-out { to { opacity: 0; transform: translateY(0.4rem) scale(0.98); } }

/* --------------------------------------------------- progress / spinner -- */
.spinner {
  inline-size: 1.1em; block-size: 1.1em;
  border: 2px solid color-mix(in oklab, currentColor 25%, transparent);
  border-block-start-color: currentColor;
  border-radius: 50%;
  animation: kd-spin 0.7s linear infinite;
  flex: none;
}
@keyframes kd-spin { to { transform: rotate(360deg); } }

.scroll-progress {
  position: fixed;
  inset-block-start: 0; inset-inline: 0;
  block-size: 2px;
  z-index: var(--z-toast);
  background: var(--accent);
  transform-origin: inline-start;
  transform: scaleX(var(--progress, 0));
  transition: transform 90ms linear;
  pointer-events: none;
}

/* --------------------------------------------------- language morphing --
   When the visitor switches language the text is swapped in place. A 160ms
   blur-out / blur-in keeps that from feeling like a glitch. */
.lang-morphing [data-i18n],
.lang-morphing [data-i18n-html],
.lang-morphing [data-i18n-attr] {
  opacity: 0.25;
  filter: blur(3px);
  transition: opacity 160ms var(--ease-out), filter 160ms var(--ease-out);
}

/* --------------------------------------------------------- view trans --- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: kd-fade-out 140ms var(--ease-out) both; }
  ::view-transition-new(root) { animation: kd-fade-in 220ms var(--ease-out) both; }
}
@keyframes kd-fade-out { to { opacity: 0; } }
@keyframes kd-fade-in { from { opacity: 0; transform: translateY(6px); } }

/* ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .drift, .marquee__track, .skeleton { animation: none; }
  .lang-morphing [data-i18n] { opacity: 1; filter: none; }
}


/* ==========================================================================
   07 — Device tiers
   Three deliberately different layouts rather than one design that merely
   squeezes: phone (≤767), tablet (768–1023), laptop and up (≥1024).
   Verified at 320 / 360 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920.
   ========================================================================== */

/* ============================================================== PHONE ====
   Single column, thumb-reachable actions, a persistent bottom CTA dock and
   cheaper glass so mid-range Androids still hit 60fps.
   ======================================================================== */
@media (max-width: 47.999rem) {
  :root {
    --gutter: 1.125rem;
    --radius: 1.1rem;
    --radius-xl: 1.4rem;
    --header-h: 4rem;
    /* Heavy blur is the single most expensive thing on a phone GPU. */
    --glass-blur: 14px;
    --glass-saturate: 150%;
  }

  body { line-height: 1.8; }

  /* A phone header carries the brand, search and the menu — nothing else.
     The proposal CTA lives in the drawer and in the sticky dock, and the
     language and theme controls move into the drawer, which is the only way
     five controls fit beside a logo at 320px. */
  .site-header [data-header-cta],
  .site-header .lang,
  .site-header .theme-toggle { display: none; }

  .header-actions { margin-inline-start: auto; }

  /* Every tap target clears 44px. */
  .btn { --btn-h: 3rem; --btn-px: 1.25rem; }
  .btn-sm { --btn-h: 2.6rem; }
  .liquid-btn { --btn-h: 3.25rem; --btn-px: 1.75rem; inline-size: 100%; }
  .icon-btn { inline-size: 2.75rem; block-size: 2.75rem; }
  .nav__link, .drawer__link, .footer__col a { min-block-size: 2.75rem; }

  /* Hero: copy first, imagery below, no overlap that can clip. */
  .hero-home__inner { padding-block: 2.5rem 3rem; gap: var(--space-6); }
  .hero-home__title { font-size: clamp(1.9rem, 1.3rem + 3.4vw, 2.6rem); }
  .hero-home__ctas { inline-size: 100%; flex-direction: column; align-items: stretch; }
  .hero-home__ctas > * { inline-size: 100%; }
  .collage__secondary { inline-size: 7.5rem; inset-block-end: -1rem; inset-inline-start: -0.5rem; border-width: 3px; }
  .collage__primary { aspect-ratio: 3 / 2; }

  .hero-plate__float { margin-block-start: -2rem; }
  .hero-plate__band { padding-block: 1.5rem 2.5rem; }

  /* One card per row reads better than two cramped ones. */
  .grid-cards { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .section { padding-block: 2.75rem; }
  .section-lg { padding-block: 3.25rem; }

  /* The spec table becomes a stacked definition list — horizontal scrolling
     through 20 rows of numbers on a 360px screen is not a design. */
  .spec-table { min-inline-size: 0; }
  .spec-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .spec-table tbody tr { display: grid; grid-template-columns: 1fr; gap: 0.15rem; padding: 0.85rem 1rem; border-block-end: 1px solid var(--border); }
  .spec-table tbody tr.spec-group { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
  .spec-table th, .spec-table td { border: 0; padding: 0; }
  .spec-table th[scope="row"] { inline-size: auto; font-size: 0.8125rem; }
  .spec-table td.spec-value { font-size: var(--step-0); font-weight: 700; white-space: normal; }

  /* Compare keeps its horizontal scroll — that one is genuinely tabular. */
  .compare-table { min-inline-size: 42rem; }
  .compare-table thead { position: static; inline-size: auto; block-size: auto; clip-path: none; }
  .compare-table tbody tr { display: table-row; padding: 0; }
  .compare-table th, .compare-table td { display: table-cell; padding: 0.7rem 0.85rem; border-block-end: 1px solid var(--border); }
  .compare-table th[scope="row"] { inline-size: 10rem; }

  .product-layout__aside { position: static; }
  .cta-panel { padding: 1.75rem 1.25rem; border-radius: var(--radius-lg); }
  .cta-panel__actions { inline-size: 100%; flex-direction: column; }
  .cta-panel__actions > * { inline-size: 100%; }

  .footer__grid { gap: var(--space-5); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  /* Leave room for the dock so it never covers the last row. */
  body.has-dock .site-footer { padding-block-end: 5.5rem; }

  .mega { display: none; }
  .gallery__main { aspect-ratio: 1 / 1; }
  .toast-stack { inset-inline: 1rem; max-inline-size: none; }
}

/* Very small handsets — 320px. Nothing may overflow here. */
@media (max-width: 22.5rem) {
  :root { --gutter: 0.875rem; }
  .grid-3, .grid-4, .metrics { grid-template-columns: 1fr; }
  .chip { padding-inline: 0.65rem; font-size: 0.75rem; }
  .hero-home__stats { gap: 0.4rem; }
  .brand__img { block-size: 1.4rem; }
  .header-actions { gap: 0.1rem; }
}

/* Phone in landscape — short viewport, so vertical rhythm tightens. */
@media (max-height: 30rem) and (orientation: landscape) and (max-width: 63.999rem) {
  .hero-home__inner, .hero-plate__band { padding-block: 1.5rem 2rem; }
  .drawer__panel { padding-block: var(--space-4); }
  .cta-dock { display: none; }
}

/* ============================================================= TABLET ====
   Two-column grids, a roomier drawer, and the hero pairs up at 8/10 — but
   the desktop mega menu stays off because hover is not reliable here.
   ======================================================================== */
@media (min-width: 48rem) and (max-width: 63.999rem) {
  :root { --gutter: 2rem; --header-h: 4.25rem; }

  .hero-home__inner { grid-template-columns: 1fr; gap: var(--space-7); padding-block: 3.5rem 4.5rem; }
  .hero-home__copy { max-inline-size: 42rem; }
  .collage { max-inline-size: 34rem; margin-inline: auto; }

  .hero-plate__band { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .hero-plate__tagline { grid-column: 1 / -1; max-inline-size: 30rem; }
  .hero-plate__copy { grid-column: 1 / -1; }

  .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* auto-fit, not a fixed three: a product with four key figures would
     otherwise leave one stranded alone on a second row. */
  .metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }

  .btn { --btn-h: 2.9rem; }
  .drawer__panel { inline-size: min(26rem, 70vw); }

  .product-layout { grid-template-columns: 1fr; }
  .product-layout__aside { position: static; }
  .gallery { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .spec-table { min-inline-size: 0; }
  .spec-table th[scope="row"] { inline-size: 38%; }
}

/* ====================================================== LAPTOP AND UP ====
   Full navigation with the mega menu, side-by-side hero, sticky product
   aside, and the pointer-driven tilt/sheen become available.
   ======================================================================== */
@media (min-width: 64rem) {
  .hero-plate__float { padding: var(--space-6); }
  .grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr)); }
  .metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
  .section-head__title { font-size: var(--step-4); }
}

/* Large desktops and 1440/1920 — more air, never more clutter. */
@media (min-width: 90rem) {
  :root { --container: 84rem; --gutter: 3rem; }
  .hero-home__inner { padding-block: 6rem 7rem; }
  .grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
}

@media (min-width: 120rem) {
  :root { --container: 92rem; --container-wide: 104rem; }
}

/* ================================================= input & display caps == */

/* Touch: no hover-dependent affordance, bigger hit areas, no tilt. */
@media (hover: none), (pointer: coarse) {
  .tilt { transform: none !important; }
  .sheen::after { display: none; }
  .card:hover .card-media > img { transform: none; }
  .collage:hover .collage__secondary { transform: none; }
  .nav__item:hover > .mega { opacity: 0; visibility: hidden; }
  .nav__item.is-open > .mega { opacity: 1; visibility: visible; }
  .logo-strip img { opacity: 0.75; filter: grayscale(1); }
}

/* Fine pointer: hover opens the mega menu, JS still owns focus/keyboard. */
@media (hover: hover) and (pointer: fine) and (min-width: 64rem) {
  .nav__item:hover > .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}

/* Hairlines stay hairlines on retina. */
@media (min-resolution: 2dppx) {
  .glass::before { padding: 0.5px; }
}

/* Forced colours / Windows high contrast. */
@media (forced-colors: active) {
  .glass, .card, .chip, .site-header__bar, .btn { border: 1px solid CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass::before, .sheen::after, .ambient::before, .grid-wash::before { display: none; }
  .btn-primary, .pill[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* Data-saver / slow link: drop the decorative washes entirely. */
@media (prefers-reduced-data: reduce) {
  .ambient::before, .grid-wash::before, .hero-home__wash { display: none; }
  .drift { animation: none; }
}