/* ==========================================================================
   NOVA RIDE — main.css
   Tokens → reset → type → primitives → chrome → pages → responsive
   ========================================================================== */

/* ------------------------------------------------------------------ 1. tokens */
/* ==========================================================================
   DESIGN TOKENS — the single source of truth for every colour, space,
   radius, shadow, type step, duration and easing used on this site.
   Never hardcode a value in a component rule; always var(--token).
   Themes: :root = LIGHT (default), [data-theme="dark"] = DARK.
   ========================================================================== */

:root {
  /* --- surface + ink (LIGHT) ---------------------------------------------
     Cool off-white paper, crisp white cards, graphite ink with a cool cast.
     The ramp carries the hierarchy: paper recedes, cards lift, and wells
     (product media, thumbs, inset steps) sit one step BELOW the card. */
  --paper: #f4f5f7;          /* page background, cool off-white */
  --paper-2: #e8eaee;        /* recessed panels */
  --surface: #ffffff;        /* cards, fields */
  --surface-2: #ffffff;      /* lifted highlight (focus) */
  --surface-3: #eef0f3;      /* media wells, thumbs, inset steps */
  --ink: #23262b;            /* primary text + dark fills (graphite) */
  --ink-inv: #f2f4f7;        /* text on dark fills */

  /* --- semantic text steps (opacity of ink over paper) --- */
  --text-strong: #12151a;
  --text-80: rgba(35, 38, 43, 0.82);   /* body copy */
  --text-60: rgba(35, 38, 43, 0.70);   /* secondary */
  --text-50: rgba(35, 38, 43, 0.64);   /* meta/mono */
  --text-inv-80: rgba(242, 244, 247, 0.88);
  --text-inv-60: rgba(242, 244, 247, 0.74);
  --text-inv-50: rgba(242, 244, 247, 0.62);

  /* --- lines --- */
  --line: rgba(35, 38, 43, 0.15);
  --line-soft: rgba(35, 38, 43, 0.08);
  --line-inv: rgba(242, 244, 247, 0.20);
  --line-inv-soft: rgba(242, 244, 247, 0.12);

  /* --- accent (copper) + support --- */
  --accent: #b07a4f;         /* signal fills — the brand mark */
  --accent-hi: #c28c5e;      /* accent hover */
  --accent-deep: #8a5a34;    /* accent TEXT/ICONS on light — 5.4:1 */
  --accent-ink: #1a1207;     /* text on accent fills */
  --sand: #d9d3c6;
  --concrete: #767b76;

  /* --- slate: editorial dark surfaces (CONSTANT across themes) ---
     The hero, footer, mobile nav, CTA band and inverted cards are always
     ink-dark regardless of theme, so they get their own tokens that never
     flip. Slate is a deep COOL GRAPHITE with a faint blue cast: it is what
     makes the copper accent read as a warm signal against the cold depth,
     and gives every dark band one shared, understated temperature. */
  --slate: #232a31;
  --slate-2: #2d3640;
  --slate-text: #f2f4f7;
  --slate-text-80: rgba(242, 244, 247, 0.88);
  --slate-text-60: rgba(242, 244, 247, 0.74);
  --slate-text-50: rgba(242, 244, 247, 0.62);
  --slate-line: rgba(242, 244, 247, 0.20);
  --slate-line-soft: rgba(242, 244, 247, 0.12);

  /* --- secondary: STEEL ------------------------------------------------
     The cool complement to copper. A deep desaturated blue-grey that shares
     the slate's temperature but is lighter, so it works as a second editorial
     fill and as the accent-adjacent surface on light backgrounds. */
  --petrol: #2f3a45;
  --petrol-2: #3d4a57;
  --petrol-soft: #e7eaef;    /* tinted wash behind info blocks */
  --petrol-line: rgba(47, 58, 69, 0.20);

  /* --- status --- */
  --danger: #b23f28;         /* 5.4:1 on white */
  --danger-ring: rgba(178, 63, 40, 0.16);
  --warn-dot: #9a6a10;
  --danger-dot: #cf5a41;
  --focus-ring: rgba(176, 122, 79, 0.55);

  /* --- type families --- */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;

  /* --- type scale (1.200 modular, rem) --- */
  --fs-2xs: 0.75rem;    /* 12px — micro badges (min size anywhere) */
  --fs-xs: 0.8125rem;   /* 13px — mono meta labels */
  --fs-sm: 0.875rem;    /* 14px — small UI text */
  --fs-md: 0.9375rem;   /* 15px — card body */
  --fs-base: 1rem;      /* 16px — body */
  --fs-lg: 1.0625rem;   /* 17px — lead */
  --fs-xl: 1.25rem;     /* 20px — h3 / price */
  --fs-2xl: 1.5rem;     /* 24px — h2 small */
  --fs-3xl: clamp(1.75rem, 2.2vw, 3.125rem); /* h2 */
  --fs-4xl: clamp(2.625rem, 6vw, 4.625rem);  /* h1 */
  --fs-display: clamp(2.7rem, 7.6vw, 6rem);  /* hero */

  /* line heights */
  --lh-display: 1.03;
  --lh-heading: 1.2;
  --lh-body: 1.62;
  --lh-tight: 1.28;

  /* --- spacing scale ---
     Every value is named for its exact pixel size (--sp-16px = 16px), so a
     token can never be misread. The set below forms a 4px/8px rhythm
     (4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 64, 80, 96) plus the odd
     component values kept from the original layout, so no element moves. */
  --sp-2px: 2px;
  --sp-3px: 3px;
  --sp-4px: 4px;
  --sp-5px: 5px;
  --sp-6px: 6px;
  --sp-7px: 7px;
  --sp-8px: 8px;
  --sp-9px: 9px;
  --sp-10px: 10px;
  --sp-11px: 11px;
  --sp-12px: 12px;
  --sp-13px: 13px;
  --sp-14px: 14px;
  --sp-15px: 15px;
  --sp-16px: 16px;
  --sp-17px: 17px;
  --sp-18px: 18px;
  --sp-20px: 20px;
  --sp-22px: 22px;
  --sp-24px: 24px;
  --sp-26px: 26px;
  --sp-28px: 28px;
  --sp-30px: 30px;
  --sp-32px: 32px;
  --sp-34px: 34px;
  --sp-36px: 36px;
  --sp-40px: 40px;
  --sp-44px: 44px;
  --sp-48px: 48px;
  --sp-50px: 50px;
  --sp-60px: 60px;
  --sp-64px: 64px;
  --sp-76px: 76px;
  --sp-80px: 80px;
  --sp-96px: 96px;

  /* --- hairlines + touch target --- */
  --bd: 1px;          /* the single hairline weight everywhere */
  --bd-2: 2px;        /* emphasised rules only */
  --tap: 44px;        /* minimum touch target */
  /* --- layout --- */
  --wrap: 1360px;
  --wrap-narrow: 900px;
  --wrap-read: 860px;
  --gut: clamp(20px, 4vw, 56px);
  --sec-y: clamp(72px, 9vw, 132px);
  --sec-y-tight: clamp(48px, 6vw, 80px);
  --hdr-h: 68px;

  /* --- radius: a 5-step scale + pill + circle ---
     --r-xs for chips/badges, --r-sm for fields and small controls, --r-md for
     cards and panels, --r-lg for large media wells, --r-xl for hero pieces.
     Two layers per step (a tight contact shadow + a wide ambient one) read as
     real depth; one-layer shadows always look like a blur filter. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-s: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;
  --r-round: 50%;

  /* --- elevation (3 ambient steps + focus) ---
     Every shadow is tinted with the slate petrol rather than neutral black,
     so the shade matches the light in the art direction. */
  --sh-1: 0 1px 1px rgba(35, 42, 49, 0.04), 0 2px 6px rgba(35, 42, 49, 0.05),
          0 8px 20px -8px rgba(35, 42, 49, 0.10);
  --sh-2: 0 1px 2px rgba(35, 42, 49, 0.05), 0 6px 14px -4px rgba(35, 42, 49, 0.08),
          0 22px 44px -16px rgba(35, 42, 49, 0.16);
  --sh-3: 0 2px 4px rgba(35, 42, 49, 0.06), 0 14px 28px -10px rgba(35, 42, 49, 0.12),
          0 40px 72px -24px rgba(35, 42, 49, 0.22);
  /* the one coloured shadow on the site — reserved for the primary CTA, so a
     volt button always looks like it is lit from behind */
  --sh-volt: 0 2px 10px -2px rgba(176, 122, 79, 0.42), 0 10px 26px -8px rgba(176, 122, 79, 0.30);
  --sh-stuck: 0 1px 0 var(--line), 0 14px 30px -22px rgba(35, 42, 49, 0.45);
  --ring: 2px solid var(--ink);
  --ring-offset: 3px;
  /* the same shadow vocabulary as tokens — no recipe is written twice */
  --sh-swatch: 0 0 0 var(--bd) var(--line);        /* unselected colour dot */
  --sh-swatch-on: 0 0 0 var(--bd-2) var(--ink);    /* selected colour dot */
  --sh-ul: inset 0 -3px 0 var(--accent);           /* volt underline, small */
  --sh-ul-lg: inset 0 -4px 0 var(--accent);        /* volt underline, large */
  --sh-inset-surface: inset 0 0 0 3px var(--surface);
  --sh-focus: 0 0 0 3px var(--focus-ring);
  --sh-error: 0 0 0 3px var(--danger-ring);

  /* --- scrims + decorative tints (themed) --- */
  --scrim: rgba(20, 26, 32, 0.52);           /* overlay behind drawer/modal */
  --scrim-heavy: rgba(20, 26, 32, 0.90);    /* map caption plate */
  --plate: rgba(20, 26, 32, 0.62);          /* hero spec bar plate */
  --inv-hover: rgba(242, 244, 247, 0.12);   /* hover on slate controls */
  --hero-scrim: linear-gradient(180deg, rgba(20, 26, 32, 0.62) 0%, rgba(20, 26, 32, 0.10) 38%, rgba(20, 26, 32, 0.88) 100%);
  --media-tint: linear-gradient(0deg, rgba(35, 38, 43, 0.030), rgba(35, 38, 43, 0.030));
  --media-hatch: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(35, 38, 43, 0.028) 9px 10px);
  --gal-glow: radial-gradient(120% 90% at 50% 12%, #ffffff 0%, var(--surface-3) 62%, transparent 100%);

  /* --- gradient vocabulary (4 uses, each one earning its place) ---
     1 --grad-slate  vertical depth for every dark editorial band
     2 --grad-sheen  the single light sweep on the primary CTA (hover only)
     3 --grad-hair   a top-edge highlight that fakes a lit bevel on cards
     4 --grad-veil   a soft petrol wash for tinted info panels */
  --grad-slate: linear-gradient(168deg, var(--slate-2) 0%, var(--slate) 46%, #1a2128 100%);
  --grad-sheen: linear-gradient(100deg, transparent 24%, rgba(255, 255, 255, 0.42) 48%, transparent 72%);
  --grad-hair: linear-gradient(90deg, transparent, var(--line-soft) 12%, var(--line-soft) 88%, transparent);
  --grad-veil: linear-gradient(160deg, var(--petrol-soft), #eef1f4);

  /* --- film grain: one tiny tiling noise tile, reused by every dark band ---
     Deliberately low-contrast. It kills gradient banding and gives the large
     dark fields a printed-paper quality instead of flat plastic. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  /* --- motion: 3 durations, 2 easings --- */
  --dur-0: 0ms;      /* off / reduced-motion */
  --dur-1: 120ms;   /* hover/focus colour */
  --dur-2: 240ms;   /* press, small moves */
  --dur-3: 480ms;   /* panels, reveals */
  --dur-ticker: 34s;
  --st-1: 50ms;    /* entrance stagger steps */
  --st-2: 140ms;
  --st-3: 260ms;
  --st-4: 380ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- icons --- */
  --ico-sm: 16px;
  --ico-md: 20px;
  --ico-lg: 24px;
  --ico-xl: 32px;
  --ico-stroke: 1.75;

  /* --- z-index scale --- */
  --z-hdr: 90;
  --z-scrim: 99;
  --z-drawer: 110;
  --z-search: 115;
  --z-filters: 118;
  --z-mnav: 120;
  --z-toast: 130;
  --r-round: 50%;            /* circles: dots, avatars, round icon buttons */
  --z-under-hdr: 80;         /* sits under the sticky header */
  --z-l0: 0;  /* baseline layer inside one component (e.g. a sheen) */
  --z-l1: 1; --z-l2: 2; --z-l3: 3;  /* local stacking inside one component */
  --z-top: 999;              /* skip link / anything above everything */
  --blur-sm: 2px; --blur-md: 8px; --blur-hdr: 14px;
  --hdr-alpha: 88%;
  --ls-display: -0.035em;
  --ls-heading: -0.03em;
  --ls-tight: -0.015em;
  --ls-snug: 0.01em;
  --ls-caps: 0.045em;
  --ls-label: 0.06em;
  --ls-wide: 0.09em;
  --ls-eyebrow: 0.1em;
  --ls-wider: 0.12em;
  --ls-widest: 0.16em; --hdr-sat: 150%;
}

/* --------------------------------------------------------------- DARK THEME */
/* Re-tuned for dark, never inverted. The page becomes a deep petrol charcoal
   so it belongs to the same family as the slate editorial bands; cards lift
   off it with a cool green-grey, text warms slightly, accent stays volt. */
[data-theme="dark"] {
  --paper: #12161a;
  --paper-2: #1a2027;
  --surface: #1c222a;
  --surface-2: #232b34;
  --surface-3: #161c23;
  --ink: #e7ebf0;            /* primary text on dark */
  --ink-inv: #12161a;        /* dark text on light fills (accent buttons) */

  --text-strong: #eef1f5;
  --text-80: rgba(231, 235, 240, 0.84);
  --text-60: rgba(231, 235, 240, 0.72);
  --text-50: rgba(231, 235, 240, 0.64);
  --text-inv-80: rgba(18, 22, 26, 0.88);
  --text-inv-60: rgba(18, 22, 26, 0.74);
  --text-inv-50: rgba(18, 22, 26, 0.62);

  --line: rgba(231, 235, 240, 0.16);
  --line-soft: rgba(231, 235, 240, 0.09);
  --line-inv: rgba(18, 22, 26, 0.22);
  --line-inv-soft: rgba(18, 22, 26, 0.14);

  --accent: #c28c5e;
  --accent-hi: #d19a6b;
  --accent-deep: #c28c5e;    /* accent text/icons on dark — 12.6:1 */
  --accent-ink: #14100b;
  --sand: #4a463c;
  --concrete: #99a0a6;

  --petrol: #10161c;
  --petrol-2: #27333f;
  --petrol-soft: #141a21;
  --petrol-line: rgba(194, 140, 94, 0.24);

  --danger: #f0896f;
  --danger-ring: rgba(240, 137, 111, 0.22);
  --warn-dot: #dcab44;
  --danger-dot: #f0896f;
  --focus-ring: rgba(194, 140, 94, 0.48);

  /* slate bands keep their petrol depth but must not disappear into the page:
     they stay a touch deeper than --paper and gain a lighter top edge. */
  --slate: #141a21;
  --slate-2: #1d2530;
  --slate-text: #eef1f5;
  --slate-text-80: rgba(238, 241, 245, 0.88);
  --slate-text-60: rgba(238, 241, 245, 0.74);
  --slate-text-50: rgba(238, 241, 245, 0.62);
  --slate-line: rgba(238, 241, 245, 0.18);
  --slate-line-soft: rgba(238, 241, 245, 0.11);
  --grad-slate: linear-gradient(168deg, #1d2530 0%, #141a21 48%, #0c1116 100%);
  --gal-glow: radial-gradient(120% 90% at 50% 12%, #27303a 0%, var(--surface-3) 62%, transparent 100%);
  --grad-veil: linear-gradient(160deg, var(--petrol-soft), #131920);
  --media-tint: linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16));
  --media-hatch: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(255, 255, 255, 0.022) 9px 10px);

  --sh-1: 0 1px 1px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.34),
          0 8px 20px -8px rgba(0, 0, 0, 0.50);
  --sh-2: 0 1px 2px rgba(0, 0, 0, 0.34), 0 6px 14px -4px rgba(0, 0, 0, 0.40),
          0 22px 44px -16px rgba(0, 0, 0, 0.62);
  --sh-3: 0 2px 4px rgba(0, 0, 0, 0.38), 0 14px 28px -10px rgba(0, 0, 0, 0.46),
          0 40px 72px -24px rgba(0, 0, 0, 0.72);
  --sh-volt: 0 2px 10px -2px rgba(194, 140, 94, 0.30), 0 10px 26px -8px rgba(194, 140, 94, 0.20);
  --sh-stuck: 0 1px 0 var(--line), 0 14px 30px -22px rgba(0, 0, 0, 0.85);
  --ring: 2px solid var(--ink);
}

/* Arabic: swap to the Arabic superfamily for every role. */
html[lang="ar"] {
  --f-display: "IBM Plex Sans Arabic", "Archivo", sans-serif;
  --f-body: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
}

/* Mobile type floor: on small screens nothing renders below 14px, so the two
   smallest steps (mono micro-labels, badges) are lifted to 14px. Desktop
   keeps the tighter 12/13px labels that the spec-sheet look depends on. */
@media (max-width: 720px) {
  :root {
    --fs-2xs: 0.875rem;
    --fs-xs: 0.875rem;
    --fs-sm: 0.9375rem;
  }
}
/* mobile buy bar breakpoint: show the sticky bar below 600px */
@media (max-width: 600px) {
  .sbuy { display: flex; }
}
@media (min-width: 601px) {
  .sbuy { display: none; }
}

/* no-flash theme bootstrap is inlined in <head> (see layout.js) */

/* ------------------------------------------------------------------ 2. reset */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.62;
  color: var(--ink);
  /* The page is never flat: a very soft petrol-to-paper falloff gives the
     whole document one light direction, so white cards read as lifted. */
  background: var(--paper);
  background-image: linear-gradient(180deg, #fbfaf6 0%, var(--paper) 22%, var(--paper) 100%);
  background-repeat: no-repeat;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
}
[data-theme="dark"] body {
  background-image: linear-gradient(180deg, #131a18 0%, var(--paper) 24%, var(--paper) 100%);
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* numbers in prices, quantities and spec values must not shift as they change */
bdi, .price, .qty__i, .kspec__v, .stats__i b, .coitem__p, .ditem__p, .cmp__price {
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* One focus treatment for the entire site: a 2px ink ring with a volt halo.
   The halo keeps the ring visible on both white cards and dark editorial
   bands without a second rule per surface. */
:focus-visible {
  outline: var(--bd-2) solid var(--focus-visible, var(--ink));
  outline-offset: var(--ring-offset);
  box-shadow: 0 0 0 calc(var(--ring-offset) + 1px) var(--focus-ring);
}
.hero :where(a, button, input, [tabindex]):focus-visible,
.ftr :where(a, button, input, [tabindex]):focus-visible,
.mnav :where(a, button, input, [tabindex]):focus-visible,
.cta :where(a, button, input, [tabindex]):focus-visible,
.toast :where(a, button, input, [tabindex]):focus-visible,
.ticker :where(a, button, input, [tabindex]):focus-visible,
.cart__sum :where(a, button, input, [tabindex]):focus-visible,
.faqcard :where(a, button, input, [tabindex]):focus-visible,
[data-slate] :where(a, button, input, [tabindex]):focus-visible {
  --focus-visible: var(--accent);
}

.skip {
  position: fixed;
  inset-block-start: -60px;
  inset-inline-start: var(--sp-16px);
  z-index: var(--z-top);
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--sp-10px) var(--sp-18px);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  box-shadow: var(--sh-2);
  transition: inset-block-start var(--dur-2) var(--ease);
}
.skip:focus { inset-block-start: var(--sp-12px); }

/* ------------------------------------------------------------------- 3. type */
/* Hierarchy comes from three signals working together: family (display vs
   body vs mono), optical size (tracking tightens as size grows), and weight.
   Nothing relies on colour alone. */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
  font-optical-sizing: auto;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: var(--ls-heading); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); letter-spacing: var(--ls-heading); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); }

p { text-wrap: pretty; }

b, strong { font-weight: 600; }

/* small mono meta copy reads better a hair looser and lighter than body text */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-10px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--text-60);
}
.eyebrow__dot {
  width: 7px;
  height: 7px;
  background: var(--accent);
  color: var(--accent-ink);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-round);
  flex: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  padding: var(--sp-5px) var(--sp-11px);
  border: var(--bd) solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  white-space: nowrap;
}
.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-round);
  background: var(--concrete);
}
.tag--in::before { background: var(--accent-deep); }
.tag--order::before { background: var(--warn-dot); }
.tag--out::before { background: var(--danger-dot); }

.price {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}
.price--lg { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.price__old {
  font-size: 0.62em;
  font-weight: 500;
  color: var(--text-50);
  margin-inline-start: var(--sp-8px);
}

.tlink {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  padding-bottom: var(--sp-3px);
  border-bottom: var(--bd) solid var(--ink);
  transition: gap var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.tlink:hover { gap: var(--sp-14px); }
.tlink .ico { width: 16px; height: 16px; }
.tlink--sm { font-size: var(--fs-2xs); }

.ico { width: 20px; height: 20px; flex: none; }

/* --------------------------------------------------------------- 4. primitives */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: 900px; }
.wrap--read { max-width: 860px; }

.sec { padding-block: var(--sec-y); }
.sec--tight { padding-block: clamp(48px, 6vw, 80px); }

.shead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  margin-block-end: clamp(34px, 4vw, 58px);
}
.shead__l { max-width: 760px; }
.shead__t { margin-block-start: var(--sp-16px); }
.shead__s {
  max-width: 44ch;
  color: var(--text-60);
  font-size: 1.02rem;
}
.shead__a { margin-block-end: var(--sp-6px); }

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  --btn-bd: var(--ink);
  --btn-lift: -2px;
  --btn-shadow: var(--sh-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10px);
  padding: var(--sp-15px) var(--sp-26px);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--bd) solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-snug);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2) var(--ease);
}
/* the label and icon always sit above the sheen layer */
.btn > * { position: relative; z-index: var(--z-l1); }
.btn .ico { width: 17px; height: 17px; transition: transform var(--dur-2) var(--ease); }
/* one light sweep, only on the volt CTA, only on hover — it reads as the
   button catching the light rather than as a decorative animation */
.btn--volt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-l0);
  border-radius: inherit;
  background: var(--grad-sheen);
  background-size: 220% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  opacity: 0;
  transition: background-position var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
  pointer-events: none;
}
.btn:hover { transform: translateY(var(--btn-lift)); box-shadow: var(--btn-shadow); }
.btn--volt:hover { --btn-shadow: var(--sh-volt); }
.btn--volt:hover::after { opacity: 1; background-position: -130% 0; }
.btn:hover .ico { transform: translateX(4px); }
[dir="rtl"] .btn:hover .ico { transform: translateX(-4px); }
.btn:active { transform: translateY(0); box-shadow: var(--sh-1); }

.btn--volt { --btn-bg: var(--accent);
  color: var(--accent-ink); }
.btn--volt:hover { --btn-bg: var(--accent-hi); }
.btn--ink { --btn-bg: var(--slate); --btn-fg: var(--slate-text); }
.btn--ink:hover { --btn-bg: var(--slate-2); --btn-fg: var(--slate-text); }
.btn--line { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); --btn-shadow: none; }
.btn--line:hover { --btn-bd: var(--ink); --btn-bg: var(--surface-3); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--slate-text); --btn-bd: var(--slate-line); --btn-shadow: none; }
.btn--ghost:hover { --btn-bg: var(--slate-line-soft); --btn-bd: var(--slate-text); }
.btn--sm { padding: var(--sp-10px) var(--sp-16px); font-size: var(--fs-xs); gap: var(--sp-7px); }
.btn--sm .ico { width: 14px; height: 14px; }
.btn--lg { padding: 18px 32px; font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }
.btn--grow { flex: 1; }

.ibtn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--bd) solid transparent;
  border-radius: var(--r-round);
  position: relative;
  color: var(--ink);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.ibtn:hover { background: var(--surface); border-color: var(--line); box-shadow: var(--sh-1); }
.ibtn:active { transform: scale(0.94); }
.ibtn__n {
  color: var(--accent-ink);
  position: absolute;
  inset-block-start: var(--sp-2px);
  inset-inline-end: 0;
  min-width: 17px;
  height: 17px;
  padding-inline: var(--sp-4px);
  display: grid;
  place-items: center;
  background: var(--accent);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  /* a count badge that just changed should register without being loud */
  animation: pop var(--dur-3) var(--ease);
}
@keyframes pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-50);
}
.crumb a:hover { color: var(--ink); }
.crumb em { font-style: normal; color: var(--ink); }
.crumb--top { margin-block-end: var(--sp-22px); }

.sumrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-16px);
  padding-block: var(--sp-11px);
  border-block-end: var(--bd) solid var(--line-soft);
  font-size: var(--fs-sm);
}
.sumrow b { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-base); white-space: nowrap; }
.sumrow--muted { color: var(--text-60); }
.sumrow--tot {
  border-block-end: 0;
  padding-block-start: var(--sp-16px);
  font-weight: 600;
}
.sumrow--tot b { font-size: 1.5rem; }

.qty {
  display: inline-flex;
  align-items: center;
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface);
}
.qty button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 100%;
  min-height: 50px;
  transition: background var(--dur-1) var(--ease);
}
.qty button:hover { background: var(--paper-2); }
.qty .ico { width: 15px; height: 15px; }
.qty__i {
  width: 44px;
  border: 0;
  background: none;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-base);
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty__i::-webkit-outer-spin-button,
.qty__i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm button { width: 34px; min-height: 38px; }
.qty--sm .qty__i { width: 34px; font-size: var(--fs-sm); }

/* --- target size: nothing tappable smaller than 44x44, at any
   viewport and on any pointer. This is the 44px floor the responsive
   contract asks for at every breakpoint (360 → 1920), and it is also
   the WCAG 2.1 SC 2.5.5 / 2.2 SC 2.5.8 size. Only layout-shaping
   rules (breakpoint ladders, wordmark hiding, grid collapses) stay
   width-gated; the size floor itself is unconditional.
   NOTE: an <a> is display:inline by default and inline boxes ignore
   min-height — the inline anchors are promoted to inline-flex first,
   otherwise the 44px rule is silently discarded on every text link. --- */
.ibtn,
.tgl,
.wish,
.gal__nav { min-width: var(--tap); min-height: var(--tap); }
.qty--sm button { min-width: var(--tap); min-height: var(--tap); }
.lang__opt,
.mnav__l,
.mnav__go,
.acc__btn,
.sbar__f,
.filters__clear,
.co__back,
.co__edit,
.faqcard__wa,
select { min-block-size: var(--tap); }
/* these keep a floor on the inline axis too: the language pills
   measure 39px and the quantity steppers 40px wide */
.lang__opt,
.qty button,
.qty__i { min-inline-size: var(--tap); }
.btn--sm { min-block-size: var(--tap); }
.fcol__l a,
.crumb a,
.pcard__name a,
.jrow__t a,
.jcard__a,
.jcard__title a,
.nav__l,
.tlink,
.ftr__bot a,
.cmp__h a,
.citem a,
.legal__l a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  min-inline-size: var(--tap);
}
/* these three are still block-level or already inline-flex, min-height
   applies directly */
.skip,
.brand,
.mnav__tel { min-block-size: var(--tap); }
.brand { min-inline-size: var(--tap); }
/* the contact links carry an underline drawn with border-bottom — align to
   the bottom of the 44px box so the rule stays glued to the text */
.cinfo__i a {
  display: inline-flex;
  align-items: flex-end;
  min-block-size: var(--tap);
}
/* colour swatches stay 30px visually; an inset pseudo-element doubles as a
   44x44 hit area, and the gap is raised to the target size so two hit areas
   never overlap. Specificity is deliberately .colors .colors__set — the
   base .colors__set rule sits later in the sheet and would otherwise win. */
.colors .colors__set { gap: var(--sp-14px); }
.swatch { position: relative; }
.swatch::after { content: ""; position: absolute; inset: -7px; }
/* the 44px rows now carry their own breathing room */
.fcol__l { gap: 0; }
.btn--sm { padding: var(--sp-13px) var(--sp-18px); }

/* ------------------------------------------------------------ 5. chrome: header */
.hdr {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-hdr);
  background: color-mix(in srgb, var(--paper) var(--hdr-alpha), transparent);
  backdrop-filter: saturate(var(--hdr-sat)) var(--blur-hdr);
  -webkit-backdrop-filter: saturate(var(--hdr-sat)) var(--blur-hdr);
  transition: box-shadow var(--dur-3) var(--ease), background var(--dur-3) var(--ease);
}
.hdr.is-stuck {
  box-shadow: var(--sh-stuck);
}
.hdr__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  gap: 28px;
}
.hdr__rule {
  position: relative;
  height: 1px;
  background: var(--line);
}
.hdr__rule span {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  height: 3px;
  width: 0;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 10px rgba(176, 122, 79, 0.55);
  transition: width var(--dur-1) var(--ease-in-out);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-11px);
  flex: none;
  border-radius: var(--r-sm);
  transition: opacity var(--dur-2) var(--ease);
}
.brand:hover { opacity: 0.82; }
.brand__mark {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-3) var(--ease);
}
.brand:hover .brand__mark { transform: translateY(-1px); }
/* logo mark: constant slate plate + volt bolt, so it reads identically in
   both themes and never needs a hardcoded hex again */
.brand__plate { fill: var(--slate); stroke: var(--slate-line); stroke-width: 1; }
.brand__bolt,
.brand__stem {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.2;
  stroke-linecap: round;
}
.brand__bolt { stroke-linejoin: round; }
.brand__wm {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-tight);
}
.brand--inv { color: var(--slate-text); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-14px), 2vw, var(--sp-30px));
  margin-inline: auto;
}
.nav__l {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  padding-block: var(--sp-6px);
  position: relative;
}
.nav__l::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--dur-2) var(--ease);
}
.nav__l:hover::after,
.nav__l[aria-current="page"]::after { transform: scaleX(1); }
.nav__l:hover { color: var(--ink); }

.hdr__tools {
  display: flex;
  align-items: center;
  gap: var(--sp-6px);
  flex: none;
}
.hdr__tools .lang { margin-inline-end: var(--sp-6px); }

.lang {
  display: inline-flex;
  align-items: center;
  border: var(--bd) solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface);
}
.lang__opt {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  padding: var(--sp-7px) var(--sp-10px);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.lang__opt:hover { background: var(--line-soft); }
.lang__opt.is-on { background: var(--slate); color: var(--slate-text); }
.lang--inv { border-color: var(--slate-line); }
.lang--inv .lang__opt:hover { background: var(--slate-line-soft); }
.lang--inv .lang__opt.is-on { background: var(--accent); color: var(--accent-ink); }
.lang--mnav .lang__opt { padding: var(--sp-11px) var(--sp-18px); font-size: var(--fs-2xs); }

.ibtn--burger { display: none; }

/* ------------------------------------------------------- mobile nav overlay */
.mnav {
  position: fixed;
  inset: 0;
  z-index: var(--z-mnav);
  background: var(--slate);
  background-image: var(--grad-slate), var(--grain);
  color: var(--slate-text);
  display: flex;
  flex-direction: column;
  padding: var(--sp-18px) var(--gut) var(--sp-30px);
  transform: translateY(-102%);
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease), visibility var(--dur-3);
  overflow-y: auto;
}
.mnav.is-open { transform: translateY(0); visibility: visible; }
.mnav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: var(--sp-20px);
  border-block-end: var(--bd) solid var(--slate-line-soft);
}
.ibtn--inv { color: var(--slate-text); }
.ibtn--inv:hover { background: var(--inv-hover); border-color: var(--slate-line); }

.mnav__list { margin-block-start: var(--sp-14px); }
.mnav__l {
  display: flex;
  align-items: baseline;
  gap: var(--sp-16px);
  padding-block: var(--sp-16px);
  padding-inline: var(--sp-6px);
  margin-inline: calc(var(--sp-6px) * -1);
  border-block-end: var(--bd) solid var(--slate-line-soft);
  border-radius: var(--r-sm);
  transition: background var(--dur-2) var(--ease), padding-inline-start var(--dur-2) var(--ease);
}
.mnav__l:hover { background: var(--inv-hover); padding-inline-start: var(--sp-14px); }
[dir="rtl"] .mnav__l:hover { padding-inline-start: var(--sp-6px); padding-inline-end: var(--sp-14px); }
.mnav__n {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: var(--accent);
}
.mnav__t {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 7vw, 2rem);
  letter-spacing: var(--ls-tight);
}
.mnav__go { margin-inline-start: auto; opacity: 0.5; }
.mnav__foot { margin-block-start: auto; padding-block-start: var(--sp-26px); }
.mnav__tel {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin-block: var(--sp-18px) var(--sp-6px);
}
.mnav__addr { color: var(--slate-text-50); font-size: var(--fs-xs); }

/* ------------------------------------------------------------- search panel */
.search {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-search);
  background: var(--paper);
  border-block-end: var(--bd) solid var(--ink);
  padding: var(--sp-26px) var(--gut) var(--sp-34px);
  transform: translateY(-104%);
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease), visibility var(--dur-3);
  box-shadow: var(--sh-3);
}
.search.is-open { transform: translateY(0); visibility: visible; }
.search__in { max-width: 900px; margin-inline: auto; }
.search__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-14px);
  border-block-end: var(--bd-2) solid var(--ink);
  padding-block-end: var(--sp-12px);
}
.search__i {
  flex: 1;
  border: 0;
  background: none;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
}
.search__i::-webkit-search-cancel-button,
.search__i::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.search__res { margin-block-start: var(--sp-18px); display: grid; gap: var(--sp-6px); }
.sres {
  display: flex;
  align-items: center;
  gap: var(--sp-14px);
  padding: var(--sp-9px) var(--sp-12px);
  border: var(--bd) solid transparent;
  border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease);
}
.sres:hover { background: var(--surface); border-color: var(--line); transform: translateX(3px); }
[dir="rtl"] .sres:hover { transform: translateX(-3px); }
.sres img { width: 54px; height: 38px; object-fit: contain; background: var(--surface-3); border: var(--bd) solid var(--line-soft); border-radius: var(--r-xs); }
.sres__n { font-weight: 600; font-size: var(--fs-md); }
.sres__k { font-family: var(--f-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-50); }
.sres__p { margin-inline-start: auto; font-family: var(--f-display); font-weight: 700; }
.sres--none { color: var(--text-60); font-size: var(--fs-sm); padding: var(--sp-10px) var(--sp-12px); }

/* --------------------------------------------------------- cart drawer + scrim */
.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--scrim);
  backdrop-filter: var(--blur-sm);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
}
.scrim.is-on { opacity: 1; }

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-drawer);
  width: min(430px, 100vw);
  background: var(--paper);
  border-inline-start: var(--bd) solid var(--ink);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform var(--dur-3) var(--ease);
  box-shadow: var(--sh-3);
}
[dir="rtl"] .drawer { transform: translateX(-105%); }
.drawer.is-open { transform: translateX(0); }
.drawer__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16px);
  padding: var(--sp-20px) var(--sp-24px);
  border-block-end: var(--bd) solid var(--line);
}
.drawer__t {
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: var(--sp-10px);
}
.drawer__c {
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding-inline: var(--sp-7px);
  background: var(--accent);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
}
.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-8px) var(--sp-24px); }
.drawer__empty {
  padding: var(--tap) 0;
  text-align: center;
  color: var(--text-60);
  font-size: var(--fs-sm);
}
.drawer__ft {
  padding: var(--sp-18px) var(--sp-24px) var(--sp-24px);
  border-block-start: var(--bd) solid var(--ink);
  background: var(--surface-3);
}
.drawer__all {
  display: block;
  text-align: center;
  margin-block-start: var(--sp-14px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-60);
  transition: color var(--dur-2) var(--ease);
}
.drawer__all:hover { color: var(--ink); }

/* drawer line item */
.ditem {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: var(--sp-14px);
  padding-block: var(--sp-16px);
  border-block-end: var(--bd) solid var(--line-soft);
}
.ditem__media {
  background: var(--surface-3);
  border: var(--bd) solid var(--line-soft);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  padding: var(--sp-6px);
}
.ditem__media img { width: 100%; height: 58px; object-fit: contain; }
.ditem__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-10px); }
.ditem__n { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-md); }
.ditem__x {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: var(--bd) solid var(--line);
  border-radius: var(--r-round);
  color: var(--text-60);
  flex: none;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.ditem__x:hover { background: var(--slate); color: var(--slate-text); border-color: var(--slate); transform: rotate(90deg); }
.ditem__x .ico { width: 12px; height: 12px; }
.ditem__d { font-size: var(--fs-xs); color: var(--text-60); margin-block: var(--sp-3px) var(--sp-10px); }
.ditem__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10px); }
.ditem__p { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-md); }

/* ------------------------------------------------------------------ footer */
.ftr {
  background: var(--slate);
  background-image: var(--grad-slate), var(--grain);
  color: var(--slate-text);
  margin-block-start: clamp(40px, 6vw, 80px);
  position: relative;
}
/* a hairline of volt along the very top edge separates the footer from the
   page without a heavy rule */
.ftr::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 18%, var(--accent) 82%, transparent);
  opacity: 0.55;
}
.ftr__top {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(54px, 7vw, 92px) var(--gut) clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
  gap: 44px 36px;
  position: relative;
  z-index: var(--z-l1);
}
.ftr__tag {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.35rem;
  margin-block: var(--sp-22px) var(--sp-14px);
  color: var(--accent);
}
.ftr__addr { color: var(--slate-text-50); font-size: var(--fs-sm); }
.ftr__langs { margin-block-start: var(--sp-22px); }
.fcol__t {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--slate-text-50);
  margin-block-end: var(--sp-18px);
}
.fcol__l { display: grid; gap: var(--sp-11px); }
.fcol__l a {
  font-size: var(--fs-sm);
  color: var(--slate-text-80);
  transition: color var(--dur-2) var(--ease), padding var(--dur-2) var(--ease);
}
.fcol__l a:hover { color: var(--accent); padding-inline-start: var(--sp-5px); }
[dir="rtl"] .fcol__l a:hover { padding: 0 var(--sp-5px) 0 0; }

.news__l {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--slate-text-50);
  margin-block-end: var(--sp-10px);
}
.news__row { display: flex; border: var(--bd) solid var(--slate-line); border-radius: var(--r-pill); overflow: hidden; }
.news__i {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: var(--sp-12px) var(--sp-16px);
  font-size: var(--fs-sm);
  color: var(--slate-text);
}
.news__i::placeholder { color: var(--slate-text-50); }
.news__b {
  color: var(--accent-ink);
  padding-inline: var(--sp-18px);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.news__b:hover { background: var(--accent-hi);
  color: var(--accent-ink); }
.news__ok { margin-block-start: var(--sp-10px); font-size: var(--fs-xs); color: var(--accent); }

.ftr__bot {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--sp-22px) var(--gut) var(--sp-30px);
  border-block-start: var(--bd) solid var(--slate-line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-14px) var(--sp-26px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps);
  color: var(--slate-text-50);
}
.ftr__made { color: var(--accent); }
.ftr__legal { display: flex; flex-wrap: wrap; gap: var(--sp-20px); }
.ftr__legal a:hover { color: var(--slate-text); }

/* ----------------------------------------------------------------- 6. page hd */
.phd {
  padding-block: clamp(52px, 7vw, 96px) clamp(34px, 4vw, 56px);
  border-block-end: var(--bd) solid var(--line);
  position: relative;
}
/* a whisper of petrol wash behind every page header, so interior pages get the
   same sense of light as the hero without competing with it */
.phd::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 12% 0%, var(--petrol-soft) 0%, transparent 58%);
  opacity: 0.55;
  pointer-events: none;
}
.phd > * { position: relative; }
.phd--tight { padding-block: clamp(34px, 4.5vw, 56px) clamp(22px, 3vw, 34px); }
.phd__in { max-width: 980px; }
.phd__t { margin-block: var(--sp-18px) 0; }
.phd__t--x { font-size: clamp(2.7rem, 7vw, 5.4rem); letter-spacing: var(--ls-display); }
.phd__s {
  margin-block-start: var(--sp-18px);
  max-width: 60ch;
  color: var(--text-60);
  font-size: 1.05rem;
}
.phd__lead {
  margin-block-start: var(--sp-22px);
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--text-80);
}
.phd__rule { height: 6px; background: var(--accent);
  color: var(--accent-ink); margin-block-start: clamp(var(--sp-34px), 5vw, var(--sp-60px)); }

/* ------------------------------------------------------------------- 7. hero */
.hero {
  position: relative;
  background: var(--slate);
  background-image: var(--grad-slate), var(--grain);
  color: var(--slate-text);
  overflow: hidden;
}
/* a soft volt glow rising from the bottom-left is the single piece of
   atmosphere in the hero: it lifts the CTA off the image and warms the
   petrol without adding a second colour */
.hero::before {
  content: "";
  position: absolute;
  inset-block-end: -30%;
  inset-inline-start: -10%;
  width: 60%;
  height: 90%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(176, 122, 79, 0.16), transparent 70%);
  pointer-events: none;
  z-index: var(--z-l1);
}
.hero__media { position: relative; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
}
.hero__media img { width: 100%; min-height: clamp(420px, 68vh, 720px); object-fit: cover; }
.hero__in {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-l2);
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gut) clamp(88px, 12vh, 128px);
}
.hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-14px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--slate-text-60);
  margin-block-end: var(--sp-18px);
}
.hero__kn {
  color: var(--accent-ink);
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--sp-4px) var(--sp-10px);
  border-radius: var(--r-xs);
  font-weight: 500;
}
.hero__t {
  font-size: clamp(2.7rem, 7.6vw, 6rem);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  max-width: 15ch;
  /* a very tight shadow is what keeps 96px type legible over a photo */
  text-shadow: 0 2px 24px rgba(6, 24, 23, 0.45);
}
.hero__s {
  margin-block-start: var(--sp-18px);
  max-width: 48ch;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--slate-text-80);
  text-shadow: 0 1px 12px rgba(6, 24, 23, 0.40);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-14px); margin-block-start: var(--sp-30px); }
.hero__specs {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-l3);
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-block-start: var(--bd) solid var(--slate-line);
  background: var(--plate);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
}
.hero__specs li {
  flex: 1;
  min-width: 150px;
  padding: var(--sp-14px) clamp(var(--sp-16px), 3vw, var(--sp-34px));
  border-inline-end: var(--bd) solid var(--slate-line);
  transition: background var(--dur-2) var(--ease);
}
.hero__specs li:last-child { border-inline-end: 0; }
.hero__specs li:hover { background: var(--inv-hover); }
.hero__sk {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--slate-text-60);
}
.hero__specsNote { color: var(--accent) !important; }

/* hero entrance — degrades to final state when animations are reduced */
@keyframes heroMedia { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero__media { animation: heroMedia var(--dur-3) var(--ease) both; }
.hero__kicker { animation: heroUp var(--dur-3) var(--ease) both var(--st-1); }
.hero__t { animation: heroUp var(--dur-3) var(--ease) both var(--st-2); }
.hero__s { animation: heroUp var(--dur-3) var(--ease) both var(--st-3); }
.hero__cta { animation: heroUp var(--dur-3) var(--ease) both var(--st-4); }
.hero__specs li { animation: heroUp var(--dur-3) var(--ease) both; }
.hero__specs li:nth-child(1) { animation-delay: var(--dur-3); }
.hero__specs li:nth-child(2) { animation-delay: var(--dur-3); }
.hero__specs li:nth-child(3) { animation-delay: var(--dur-3); }
.hero__specs li:nth-child(4) { animation-delay: var(--dur-3); }

/* ----------------------------------------------------------------- ticker */
.ticker {
  position: relative;
  /* a faint diagonal sheen stops the big volt field from reading as flat
     vector green; it also gives the marquee something to travel across */
  background: var(--accent);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0.22) 0%, transparent 34%, transparent 66%, rgba(255, 255, 255, 0.16) 100%);
  color: var(--accent-ink);
  border-block: var(--bd) solid var(--ink);
  overflow: hidden;
  padding-block: var(--sp-13px);
}
/* the band fades at both edges so entries and exits never clip hard */
.ticker::before,
.ticker::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: clamp(24px, 8vw, 110px);
  z-index: var(--z-l1);
  pointer-events: none;
}
.ticker::before { inset-inline-start: 0; background: linear-gradient(90deg, var(--accent), transparent); }
.ticker::after { inset-inline-end: 0; background: linear-gradient(270deg, var(--accent), transparent); }
[dir="rtl"] .ticker::before { background: linear-gradient(270deg, var(--accent), transparent); }
[dir="rtl"] .ticker::after { background: linear-gradient(90deg, var(--accent), transparent); }
.ticker__track {
  display: flex;
  width: max-content;
  animation: tick var(--dur-ticker) linear infinite;
}
.ticker__set {
  display: flex;
  align-items: center;
  gap: var(--sp-26px);
  padding-inline-end: var(--sp-26px);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  white-space: nowrap;
}
.ticker__set i,
.ticker__sep {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  color: var(--accent-ink);
  opacity: 0.5;
}
.ticker__sep .ico { width: var(--ico-sm); height: var(--ico-sm); }
[dir="rtl"] .ticker__track { animation-name: tick-rtl; }
@keyframes tick { to { transform: translateX(-50%); } }
@keyframes tick-rtl { to { transform: translateX(50%); } }
.ticker__note {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding-inline: var(--sp-18px);
  background: var(--slate);
  color: var(--slate-text);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}

/* ------------------------------------------------------- 8. product cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: clamp(var(--sp-18px), 2.4vw, var(--sp-30px));
}
.grid--rel { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--bd) solid var(--line);
  border-radius: var(--r-md);
  /* the lit-bevel hairline + the resting shadow are what make a white card
     read as a physical object on the sand page */
  box-shadow: var(--sh-1);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease), border-color var(--dur-2) var(--ease);
}
.pcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-2);
  border-color: var(--ink);
}
.pcard__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--media-tint), var(--media-hatch), var(--surface-3);
  border-block-end: var(--bd) solid var(--line-soft);
  overflow: hidden;
}
.pcard__media img {
  width: 86%;
  transition: transform var(--dur-3) var(--ease);
}
.pcard:hover .pcard__media img { transform: scale(1.06); }
.pcard__flag {
  color: var(--accent-ink);
  position: absolute;
  inset-block-start: var(--sp-12px);
  inset-inline-start: var(--sp-12px);
  background: var(--accent);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-xs);
  padding: var(--sp-4px) var(--sp-10px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  box-shadow: 0 2px 8px -2px rgba(35, 42, 49, 0.28);
}
.pcard__idx {
  position: absolute;
  inset-block-start: var(--sp-10px);
  inset-inline-end: var(--sp-12px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: var(--text-50);
}
.pcard__body { padding: var(--sp-18px) var(--sp-20px) var(--sp-20px); display: flex; flex-direction: column; flex: 1; }
.pcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-12px); }
.pcard__name { font-size: 1.15rem; letter-spacing: var(--ls-tight); }
.pcard__name a {
  border-radius: var(--r-xs);
  transition: color var(--dur-2) var(--ease);
}
.pcard__name a:hover { color: var(--petrol); text-decoration: underline; text-underline-offset: 4px; }
.pcard__desc {
  margin-block-start: var(--sp-8px);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-60);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wish {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: var(--bd) solid var(--line);
  border-radius: var(--r-round);
  color: var(--text-60);
  background: var(--surface);
  flex: none;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.wish .ico { width: 15px; height: 15px; transition: transform var(--dur-2) var(--ease); }
.wish:hover { border-color: var(--ink); color: var(--ink); transform: scale(1.08); }
.wish.is-on { background: var(--slate); color: var(--accent); border-color: var(--slate); }
.wish.is-on .ico { fill: currentColor; animation: pop var(--dur-3) var(--ease); }

.pcard__specs { margin-block: var(--sp-14px); display: grid; gap: var(--sp-6px); }
.specline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-10px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  padding-block: var(--sp-4px);
  border-block-start: var(--bd) dashed var(--line);
}
.specline dt { color: var(--text-50); text-transform: uppercase; letter-spacing: var(--ls-label); }
.specline dd { font-weight: 500; }

.pcard__foot {
  display: flex;
  /* wrap, not nowrap: price + CTA have a combined min-content wider than a
     single column on a phone, and a non-wrapping flex row inflates the
     auto-minimum of the grid track above it (measured: 367px track in a
     309px column at 360px wide). Wrapping keeps the card the width of its
     container; when they fit nothing wraps and the row is unchanged. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12px);
  margin-block-start: auto;
  padding-block-start: var(--sp-16px);
  border-block-start: var(--bd) solid var(--line-soft);
}
.pcard__more {
  display: none;
  align-items: center;
  gap: var(--sp-7px);
  margin-block-start: var(--sp-13px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--petrol);
}
.pcard:hover .pcard__more { display: inline-flex; }
.pcard__more .ico { width: 14px; height: 14px; }

/* featured asymmetric grid (home) */
.feat {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(var(--sp-16px), 2vw, var(--sp-26px));
}
.feat .pcard--a { grid-column: span 7; }
.feat .pcard--b { grid-column: span 5; }
.feat .pcard--c { grid-column: span 5; }
.feat .pcard--d { grid-column: span 7; }
.feat .pcard--a .pcard__media,
.feat .pcard--d .pcard__media { aspect-ratio: 16 / 10; }
.feat .pcard--a .pcard__name,
.feat .pcard--d .pcard__name { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.feat .pcard--a .pcard__desc,
.feat .pcard--d .pcard__desc { -webkit-line-clamp: 3; font-size: var(--fs-md); }

/* ------------------------------------------------------------- 9. home bits */
.why {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block-start: var(--bd) solid var(--ink);
}
.why__i {
  padding: clamp(26px, 3vw, 40px) clamp(18px, 2vw, 30px) clamp(26px, 3vw, 40px) 0;
  border-block-end: var(--bd) solid var(--line);
  border-inline-end: var(--bd) solid var(--line);
  position: relative;
  transition: background var(--dur-2) var(--ease);
}
.why__i:last-child { border-inline-end: 0; }
.why__i:hover { background: var(--surface); }
.why__n {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: var(--text-50);
  display: block;
  margin-block-end: var(--sp-26px);
}
.why__t { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin-block-end: var(--sp-12px); }
.why__d { font-size: var(--fs-sm); color: var(--text-60); line-height: 1.6; }
.why__i::after {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 46px;
  height: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  /* the volt tick grows a little on hover — a small "you are here" cue */
  transition: width var(--dur-3) var(--ease);
}
.why__i:hover::after { width: 100%; }

.city { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
.city__media {
  position: relative;
  overflow: hidden;
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.city__media img { width: 100%; transition: transform var(--dur-3) var(--ease); }
.city__media:hover img { transform: scale(1.04); }
.city__cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  background: var(--scrim-heavy);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  color: var(--slate-text);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  padding: var(--sp-9px) var(--sp-14px);
}
.city__t { margin-block: var(--sp-16px) var(--sp-16px); }
.city__d { color: var(--text-60); max-width: 46ch; }
.city__list { margin-block: var(--sp-26px) var(--sp-30px); display: grid; gap: 0; border-block-start: var(--bd) solid var(--line); }
.city__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-16px);
  padding-block: var(--sp-12px);
  border-block-end: var(--bd) solid var(--line);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  transition: padding-inline-start var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.city__list li:hover { padding-inline-start: var(--sp-8px); border-block-end-color: var(--ink); }
[dir="rtl"] .city__list li:hover { padding-inline-start: 0; padding-inline-end: var(--sp-8px); }
.city__cn { font-family: var(--f-mono); font-size: var(--fs-2xs); font-weight: 500; color: var(--text-50); }

/* ----------------------------------------------------------- journal rows */
.jrows { border-block-start: var(--bd) solid var(--ink); }
.jrow { border-block-end: var(--bd) solid var(--line); }
.jrow__link {
  display: grid;
  grid-template-columns: 56px 140px 1fr auto auto;
  align-items: center;
  gap: var(--sp-24px);
  padding-block: var(--sp-22px);
  border-radius: var(--r-sm);
  transition: background var(--dur-2) var(--ease), padding var(--dur-2) var(--ease);
}
.jrow__link:hover { background: var(--surface); padding-inline: var(--sp-14px); }
.jrow__idx { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--text-50); }
.jrow__cat {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-60);
  border: var(--bd) solid var(--line);
  border-radius: var(--r-pill);
  padding: var(--sp-5px) var(--sp-11px);
  justify-self: start;
  white-space: nowrap;
}
.jrow__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: var(--ls-tight);
  line-height: 1.18;
}
.jrow__meta { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--text-50); white-space: nowrap; }
.jrow__thumb {
  width: 148px;
  overflow: hidden;
  border: var(--bd) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-3);
}
.jrow__thumb img { width: 100%; height: 92px; object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.jrow__link:hover .jrow__thumb img { transform: scale(1.07); }
.jrow__go { display: grid; place-items: center; width: 42px; height: 42px; border: var(--bd) solid var(--line); border-radius: var(--r-round); transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.jrow__link:hover .jrow__go { background: var(--accent);
  color: var(--accent-ink); border-color: var(--accent-ink); transform: rotate(-45deg); }
[dir="rtl"] .jrow__link:hover .jrow__go { transform: rotate(45deg); }

/* ------------------------------------------------------------------ cta band */
.sec--cta { padding-block: 0 0; }
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-30px) var(--sp-50px);
  background: var(--slate);
  background-image: var(--grad-slate), var(--grain);
  color: var(--slate-text);
  padding: clamp(38px, 5vw, 64px) clamp(28px, 4vw, 64px);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
}
/* two overlapping soft volt lights — the only decoration on the band, and it
   exists to push the eye toward the CTA on the right */
.cta::before {
  content: "";
  position: absolute;
  inset-block-start: -45%;
  inset-inline-end: -6%;
  width: 380px;
  height: 380px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(176, 122, 79, 0.20), transparent 70%);
  border-radius: var(--r-round);
  pointer-events: none;
}
.cta::after {
  content: "";
  position: absolute;
  inset-block-end: -60%;
  inset-inline-start: 20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(176, 122, 79, 0.10), transparent 70%);
  border-radius: var(--r-round);
  pointer-events: none;
}
.cta__l { position: relative; z-index: var(--z-l1); }
.cta__t {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  letter-spacing: var(--ls-heading);
  line-height: 1.05;
  max-width: 18ch;
}
.cta__s { margin-block-start: var(--sp-14px); color: var(--slate-text-60); max-width: 52ch; font-size: var(--fs-md); }
.cta__r { display: grid; gap: var(--sp-14px); justify-items: start; position: relative; z-index: var(--z-l2); }
.cta__note { font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); color: var(--slate-text-50); }

/* ------------------------------------------------------------- 10. shop page */
.shop {
  display: grid;
  grid-template-columns: 262px 1fr;
  gap: clamp(24px, 3vw, 52px);
  padding-block: clamp(34px, 4vw, 56px) var(--sec-y);
  align-items: start;
}

.filters {
  position: sticky;
  inset-block-start: calc(var(--hdr-h) + var(--sp-18px));
  background: var(--surface);
  border: var(--bd) solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.filters__hd {
  display: flex;
  align-items: center;
  gap: var(--sp-10px);
  padding: var(--sp-15px) var(--sp-17px);
  border-block-end: var(--bd) solid var(--ink);
  background: var(--surface-3);
}
.filters__t {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}
.filters__clear {
  margin-inline-start: auto;
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-60);
  border-bottom: var(--bd) solid transparent;
  padding-block-end: var(--sp-2px);
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.filters__clear:hover { color: var(--ink); border-color: var(--ink); }
.filters__x { display: none; }
.filters__body { padding: var(--sp-6px) var(--sp-17px) var(--sp-18px); }
.filters__note {
  margin-block-start: var(--sp-16px);
  padding-block-start: var(--sp-14px);
  border-block-start: var(--bd) dashed var(--line);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-60);
}
.fgrp { border: 0; padding: 0; margin-block: var(--sp-18px); }
.fgrp__l {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--text-50);
  padding: 0;
  margin-block-end: var(--sp-9px);
}
.fchk {
  display: flex;
  align-items: center;
  gap: var(--sp-11px);
  padding-block: var(--sp-7px);
  padding-inline: var(--sp-6px);
  margin-inline: calc(var(--sp-6px) * -1);
  cursor: pointer;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
  transition: background var(--dur-2) var(--ease);
}
.fchk:hover { background: var(--surface-3); }
.fchk input { position: absolute; opacity: 0; pointer-events: none; }
.fchk__box {
  width: 17px;
  height: 17px;
  border: var(--bd) solid var(--text-50);
  border-radius: var(--r-round);
  position: relative;
  flex: none;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.fchk__box::after {
  content: "";
  position: absolute;
  inset: var(--sp-3px);
  background: var(--accent);
  color: var(--accent-ink);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-round);
  transform: scale(0);
  transition: transform var(--dur-2) var(--ease);
}
.fchk:hover .fchk__box { border-color: var(--ink); }
.fchk input:checked ~ .fchk__box { border-color: var(--ink); }
.fchk input:checked ~ .fchk__box::after { transform: scale(1); }
.fchk input:checked ~ .fchk__t { font-weight: 600; color: var(--ink); }
.fchk input:focus-visible ~ .fchk__box { outline: var(--bd-2) solid var(--ink); outline-offset: 2px; }
.fchk__t { color: var(--text-80); transition: color var(--dur-2) var(--ease); }
[data-group] { position: relative; }

.sbar {
  display: flex;
  align-items: center;
  gap: var(--sp-18px);
  padding-block: var(--sp-12px);
  margin-block-end: var(--sp-22px);
  border-block: var(--bd) solid var(--line);
}
.sbar__f {
  display: none;
  align-items: center;
  gap: var(--sp-8px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  padding: var(--sp-9px) var(--sp-15px);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--surface);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.sbar__f:hover { background: var(--ink); color: var(--ink-inv); }
.sbar__f .ico { width: 15px; height: 15px; }
.sbar__c { font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); color: var(--text-60); }
.sbar__c b { color: var(--ink); }
.sbar__s { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-10px); }
.sbar__sl {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-50);
}
.sbar__s select {
  border: var(--bd) solid var(--line);
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: var(--sp-9px) var(--sp-14px);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.sbar__s select:hover { border-color: var(--ink); }

.grid__empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-16px);
  padding: clamp(50px, 8vw, 90px) 20px;
  text-align: center;
  border: var(--bd) dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.grid__empty span { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; }
.pcard.is-hidden { display: none; }

/* comparison table */
.cmp {
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow-x: auto;
  box-shadow: var(--sh-1);
}
.cmp__row {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  min-width: 680px;
  border-block-end: var(--bd) solid var(--line);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.cmp__row:last-child { border-block-end: 0; }
.cmp__row--h {
  background: var(--slate);
  background-image: var(--grad-slate);
  color: var(--slate-text);
}
a.cmp__row:hover { background: var(--accent); color: var(--accent-ink); }
.cmp__c {
  padding: var(--sp-15px) var(--sp-18px);
  font-size: var(--fs-sm);
  border-inline-end: var(--bd) solid var(--line-soft);
  display: flex;
  align-items: center;
}
.cmp__c:last-child { border-inline-end: 0; }
.cmp__row--h .cmp__c {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  border-color: var(--slate-line);
}
.cmp__name { font-weight: 600; font-family: var(--f-display); }
.cmp__price { font-family: var(--f-display); font-weight: 700; }

/* --------------------------------------------------------------- 11. pdp */
.pdp {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(30px, 4vw, 64px);
  padding-block: clamp(26px, 3vw, 44px) clamp(40px, 5vw, 70px);
  align-items: start;
}
.pdp__info { position: sticky; inset-block-start: calc(var(--hdr-h) + var(--sp-20px)); }

.gal__stage {
  position: relative;
  background:
    var(--gal-glow), var(--surface-3);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 10 / 7;
  display: grid;
  place-items: center;
  box-shadow: var(--sh-1);
}
.gal__img { width: 92%; height: auto; transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.gal__tag {
  color: var(--accent-ink);
  position: absolute;
  inset-block-start: var(--sp-12px);
  inset-inline-start: var(--sp-12px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  background: var(--accent);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-xs);
  padding: var(--sp-4px) var(--sp-9px);
}
.gal__nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-round);
  box-shadow: var(--sh-1);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}
.gal__nav:hover { background: var(--accent); color: var(--accent-ink); }
.gal__nav--p:hover { transform: translateY(-50%) translateX(-2px); }
.gal__nav--n:hover { transform: translateY(-50%) translateX(2px); }
[dir="rtl"] .gal__nav--p:hover { transform: translateY(-50%) translateX(2px); }
[dir="rtl"] .gal__nav--n:hover { transform: translateY(-50%) translateX(-2px); }
.gal__nav .ico { width: 17px; height: 17px; }
.gal__nav--p { inset-inline-start: var(--sp-14px); }
.gal__nav--p .ico { transform: rotate(180deg); }
.gal__nav--n { inset-inline-end: var(--sp-14px); }
.gal__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-12px); margin-block-start: var(--sp-12px); }
.gal__th {
  background: var(--surface-3);
  border: var(--bd) solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-8px);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.gal__th img { width: 100%; height: 74px; object-fit: contain; }
.gal__th:hover { transform: translateY(-3px); box-shadow: var(--sh-1); border-color: var(--ink); }
.gal__th.is-on { border-color: var(--ink); box-shadow: var(--sh-ul); }

.pdp__cat {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--text-50);
}
.pdp__t { font-size: clamp(2.1rem, 4vw, 3.2rem); margin-block: var(--sp-10px) 0; letter-spacing: var(--ls-heading); }
.pdp__blurb { color: var(--text-60); font-size: 1.02rem; max-width: 52ch; }

.colors { display: flex; align-items: center; gap: var(--sp-16px); margin-block: var(--sp-24px); flex-wrap: wrap; }
.colors__l {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--text-50);
}
.colors__set { display: flex; gap: var(--sp-9px); }
.swatch {
  width: 30px;
  height: 30px;
  border-radius: var(--r-round);
  background: var(--sw);
  border: var(--bd-2) solid var(--paper);
  box-shadow: var(--sh-swatch);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.swatch:hover { transform: scale(1.12); }
.swatch.is-on { box-shadow: var(--sh-swatch-on); transform: scale(1.1); }
.colors__n { font-size: var(--fs-xs); color: var(--text-60); }

.kspec {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: var(--bd) solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-block-end: var(--sp-26px);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.kspec__i {
  padding: var(--sp-15px) var(--sp-18px);
  border-inline-end: var(--bd) solid var(--line-soft);
  border-block-end: var(--bd) solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5px);
  transition: background var(--dur-2) var(--ease);
}
.kspec__i:hover { background: var(--surface-3); }
.kspec__i:nth-child(2n) { border-inline-end: 0; }
.kspec__i:nth-last-child(-n + 2) { border-block-end: 0; }
.kspec__k {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--text-50);
}
.kspec__v { font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; }

.buy__price { display: flex; align-items: baseline; gap: var(--sp-14px); margin-block-end: var(--sp-18px); }
.buy__row { display: flex; gap: var(--sp-14px); align-items: stretch; margin-block-end: var(--sp-14px); }
.buy .btn--block { margin-block-end: var(--sp-14px); }
.buy__svc { display: grid; gap: var(--sp-9px); margin-block: var(--sp-20px) 0; }
.buy__svc li {
  display: flex;
  align-items: center;
  gap: var(--sp-11px);
  font-size: var(--fs-sm);
  color: var(--text-80);
}
.buy__svc .ico { width: 16px; height: 16px; color: var(--accent-deep); flex: none; }
.buy__trial {
  font-size: var(--fs-xs);
  color: var(--text-60);
  background: var(--petrol-soft);
  border-inline-start: var(--sp-3px) solid var(--accent);
  border-radius: var(--r-xs);
  padding: var(--sp-12px) var(--sp-15px);
}

/* features list */
.sec--featd { background: var(--surface-3); border-block: var(--bd) solid var(--line); }
.fd { border-block-start: var(--bd) solid var(--ink); }
.fd__i {
  display: grid;
  grid-template-columns: 64px 76px 1fr auto;
  gap: clamp(16px, 3vw, 42px);
  align-items: start;
  padding-block: clamp(24px, 3vw, 38px);
  border-block-end: var(--bd) solid var(--line);
  position: relative;
}
.fd__i--r .fd__b { margin-inline-start: clamp(0px, 6vw, 90px); }
.fd__n { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--text-50); padding-block-start: var(--sp-6px); }
.fd__ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 3px 0 -1px rgba(35, 42, 49, 0.18);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.fd__i:hover .fd__ico { transform: rotate(-6deg) scale(1.04); box-shadow: 0 6px 14px -4px rgba(176, 122, 79, 0.50); }
.fd__t { font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin-block-end: var(--sp-10px); }
.fd__d { color: var(--text-60); max-width: 62ch; font-size: var(--fs-md); }
.fd__v {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  color: var(--ink);
  background: linear-gradient(transparent 62%, var(--accent) 62%);
  padding-inline: var(--sp-4px);
  white-space: nowrap;
  align-self: center;
}

/* tech + box */
.sec--tech { background: var(--paper); }
.tech { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: start; }
.tech__t { margin-block: var(--sp-14px) var(--sp-26px); }
.tech__box {
  margin-block-start: var(--sp-20px);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.boxl { padding: var(--sp-8px) var(--sp-20px); }
.boxl li {
  display: flex;
  align-items: center;
  gap: var(--sp-12px);
  padding-block: var(--sp-12px);
  border-block-end: var(--bd) solid var(--line-soft);
  font-size: var(--fs-sm);
}
.boxl li:last-child { border-block-end: 0; }
.boxl .ico { width: 15px; height: 15px; color: var(--accent-deep); flex: none; }
.tech__note {
  margin-block-start: var(--sp-20px);
  padding: var(--sp-16px) var(--sp-18px);
  background: var(--paper-2);
  border-radius: var(--r-s);
  font-size: var(--fs-xs);
  color: var(--text-60);
  display: grid;
  gap: var(--sp-8px);
}

.table { border-block-start: var(--bd) solid var(--ink); }
.table__row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-18px);
  padding-block: var(--sp-14px);
  border-block-end: var(--bd) solid var(--line);
  align-items: baseline;
}
.table__k {
  display: flex;
  align-items: baseline;
  gap: var(--sp-14px);
  font-size: var(--fs-sm);
  color: var(--text-60);
}
.table__n { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--text-50); }
.table__v { font-weight: 600; font-size: var(--fs-md); }

/* sticky buy bar (mobile) */
.sbuy {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-under-hdr);
  display: none;
  align-items: center;
  gap: var(--sp-14px);
  padding: var(--sp-12px) var(--gut) calc(var(--sp-12px) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-block-start: var(--bd) solid var(--ink);
  transform: translateY(110%);
  transition: transform var(--dur-3) var(--ease);
}
.sbuy.is-on { transform: translateY(0); }
.sbuy__l { display: grid; line-height: 1.25; }
.sbuy__l b { font-family: var(--f-display); font-size: var(--fs-md); }
.sbuy__l span { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--text-60); }
.sbuy .btn { margin-inline-start: auto; }

/* -------------------------------------------------------- accordion (faq) */
   Grid-row collapse: 0fr -> 1fr with a smooth transition; the chevron rotates
   135deg when open. Hover lifts the button; keyboard focus gets a visible ring. */

.acc { border-block-start: var(--bd) solid var(--ink); }
.acc__item { border-block-end: var(--bd) solid var(--line); }
.acc__item:last-child { border-block-end: 0; }
.acc__h { margin: 0; }
.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24px);
  width: 100%;
  padding: var(--sp-22px) var(--sp-6px);
  margin-inline: calc(var(--sp-6px) * -1);
  border-radius: var(--r-s);
  text-align: start;
  transition: background var(--dur-2) var(--ease);
}
.acc__btn:hover { background: var(--surface-3); }
.acc__q {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  letter-spacing: var(--ls-tight);
  transition: color var(--dur-2) var(--ease);
}
.acc__btn:hover .acc__q { color: var(--accent-deep); }
.acc__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-round);
  background: var(--surface);
  transition: background var(--dur-2) var(--ease), transform var(--dur-3) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.acc__ico .ico { width: 16px; height: 16px; }
.acc__btn:hover .acc__ico { box-shadow: var(--sh-1); }
.acc__btn[aria-expanded="true"] .acc__ico { background: var(--accent); color: var(--accent-ink); transform: rotate(135deg); box-shadow: none; }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-3) var(--ease);
}
.acc__panel.is-open { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner p {
  padding-block-end: var(--sp-24px);
  padding-inline: var(--sp-6px);
  max-width: 74ch;
  color: var(--text-60);
  font-size: var(--fs-md);
  line-height: 1.68;
}

/* --------------------------------------------------------- 12. about/city */
   About: story / stats / atelier + values & triples.
   City: uses / riders / cities. Legal pages. */

.sec--story { padding-block-end: clamp(40px, 5vw, 70px); }
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  margin-block-end: clamp(40px, 5vw, 64px);
}
.story__col { min-width: 0; }
.story__p { margin-block-end: var(--sp-20px); color: var(--text-80); font-size: var(--fs-base); }
.story__p--lead { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--ink); font-weight: 500; }
.pull {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: var(--ls-tight);
  padding-inline-start: var(--sp-22px);
  border-inline-start: var(--sp-5px) solid var(--accent);
  margin-block-end: var(--sp-26px);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.stats__i {
  padding: clamp(20px, 2.6vw, 32px);
  border-inline-end: var(--bd) solid var(--line);
  display: grid;
  gap: var(--sp-8px);
  transition: background var(--dur-2) var(--ease);
}
.stats__i:last-child { border-inline-end: 0; }
.stats__i:hover { background: var(--surface-3); }
.stats__i b {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  letter-spacing: var(--ls-heading);
}
.stats__i span {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-60);
}
.atelier { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.atelier__media {
  position: relative;
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.atelier__media img { width: 100%; }
.atelier__media figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  background: var(--scrim-heavy);
  backdrop-filter: saturate(1.2) blur(var(--blur-sm));
  -webkit-backdrop-filter: saturate(1.2) blur(var(--blur-sm));
  color: var(--slate-text);
  padding: var(--sp-13px) var(--sp-16px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5px) var(--sp-14px);
  align-items: baseline;
}
.atelier__media figcaption b { font-family: var(--f-display); font-size: var(--fs-md); }
.atelier__media figcaption span { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--slate-text-50); }
.atelier__body { min-width: 0; }
.atelier__t {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-family: var(--f-display);
  font-weight: 800;
  margin-block: var(--sp-16px) var(--sp-16px);
}
.atelier__d { color: var(--text-60); }
.atelier__links { display: flex; flex-wrap: wrap; gap: var(--sp-14px); margin-block-start: 28px; }

.vals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-block-start: var(--bd) solid var(--ink);
  border-block-end: var(--bd) solid var(--line);
}
.vals__i {
  padding: clamp(26px, 3vw, 42px) clamp(24px, 3vw, 44px) clamp(30px, 3vw, 44px) 0;
  border-inline-end: var(--bd) solid var(--line);
  transition: background var(--dur-2) var(--ease);
}
.vals__i:last-child { border-inline-end: 0; padding-inline-end: 0; }
.vals__i:nth-child(2n) { padding-inline-start: clamp(0px, 2vw, 44px); }
.vals__i:hover { background: var(--surface-3); }
.vals__n {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: var(--text-50);
  letter-spacing: var(--ls-wider);
}
.vals__t {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin-block: var(--sp-14px) var(--sp-12px);
  font-family: var(--f-display);
  font-weight: 700;
}
.vals__d { color: var(--text-60); font-size: var(--fs-md); max-width: 50ch; }

.triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--sp-16px), 2vw, var(--sp-26px)); }
.tri {
  background: var(--surface);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 38px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.tri:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.tri--inv { background: var(--slate); color: var(--slate-text); }
.tri--inv .tri__n { color: var(--accent); }
.tri--inv .tri__d { color: var(--slate-text-60); }
.tri__n {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  color: var(--text-50);
}
.tri__t {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  margin-block: var(--sp-20px) var(--sp-12px);
  font-family: var(--f-display);
  font-weight: 700;
}
.tri__d { font-size: var(--fs-md); color: var(--text-60); }
.tri::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 5px;
  background: var(--accent);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.uses { border-block-start: var(--bd) solid var(--ink); }
.uses__i {
  display: grid;
  grid-template-columns: 70px 1fr 1.4fr;
  gap: clamp(var(--sp-16px), 3vw, var(--tap));
  align-items: baseline;
  padding-block: clamp(var(--sp-22px), 2.6vw, var(--sp-34px));
  border-block-end: var(--bd) solid var(--line);
  transition: background var(--dur-2) var(--ease);
}
.uses__i:last-child { border-block-end: 0; }
.uses__i:hover { background: var(--surface-3); }
.uses__n {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: var(--text-50);
}
.uses__t { font-size: clamp(1.2rem, 2vw, 1.6rem); font-family: var(--f-display); font-weight: 700; }
.uses__d { color: var(--text-60); font-size: var(--fs-md); }

.riders { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--sp-16px), 2vw, var(--sp-26px)); }
.rider {
  padding: clamp(26px, 3vw, 40px);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.rider:hover { transform: translateY(-4px); box-shadow: var(--sh-2); cursor: pointer; }
.rider--1 { background: var(--accent); color: var(--accent-ink); }
.rider--2 { background: var(--sand); }
.rider--3 { background: var(--slate); color: var(--slate-text); }
.rider__n {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  opacity: 0.6;
  letter-spacing: var(--ls-wider);
}
.rider__t {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  margin-block: auto var(--sp-14px);
  padding-block-start: 40px;
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.15;
}
.rider__d { font-size: var(--fs-md); line-height: 1.6; opacity: 0.85; }

.cities {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.cities__i {
  padding: clamp(var(--sp-20px), 2.4vw, var(--sp-30px));
  border-inline-end: var(--bd) solid var(--line);
  display: grid;
  gap: var(--sp-9px);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.cities__i:last-child { border-inline-end: 0; }
.cities__i:hover { background: var(--accent); color: var(--accent-ink); }
.cities__n {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: var(--text-50);
  letter-spacing: var(--ls-wider);
}
.cities__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}
.cities__c {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: var(--text-60);
  letter-spacing: var(--ls-caps);
}

.legal { display: grid; gap: clamp(30px, 4vw, 54px); }
.legal__s h2 {
  display: flex;
  align-items: baseline;
  gap: var(--sp-16px);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  margin-block-end: var(--sp-16px);
  padding-block-end: var(--sp-14px);
  border-block-end: var(--bd) solid var(--line);
  font-family: var(--f-display);
  font-weight: 700;
}
.legal__s h2 .legal__n {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: var(--text-50);
}
.legal__s p { color: var(--text-60); margin-block-end: var(--sp-12px); font-size: var(--fs-md); }
.legal__s p:last-child { margin-block-end: 0; }

/* --------------------------------------------------------- 13. journal/home */

.sec--lead { padding-block: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 36px); }
.lead {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  border: var(--bd) solid var(--ink);
  background: var(--surface);
  padding: clamp(var(--sp-18px), 2vw, var(--sp-26px));
  transition: box-shadow var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.lead:hover { transform: translateY(-4px); box-shadow: var(--sh-1); }
.lead__media { overflow: hidden; display: block; border: var(--bd) solid var(--line); }
.lead__media img { width: 100%; transition: transform var(--dur-3) var(--ease); }
.lead:hover .lead__media img { transform: scale(1.04); }
.lead__body { display: block; padding-inline: clamp(var(--sp-4px), 2vw, var(--sp-22px)) clamp(var(--sp-6px), 2vw, var(--sp-18px)); }
.lead__k {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-60);
}
.lead__t {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  letter-spacing: var(--ls-heading);
  line-height: 1.08;
  margin-block: var(--sp-16px);
}
.lead__d { display: block; color: var(--text-60); font-size: var(--fs-md); }
.lead__go {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-9px);
  margin-block-start: var(--sp-22px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  border-bottom: var(--bd) solid var(--ink);
  padding-block-end: var(--sp-3px);
}
.lead__go .ico { width: 15px; height: 15px; }

.jcards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--sp-20px), 3vw, var(--sp-34px)); }
.jcard {
  border: var(--bd) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.jcard:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.jcard__media { display: block; overflow: hidden; border-block-end: var(--bd) solid var(--line); }
.jcard__media img { width: 100%; transition: transform var(--dur-3) var(--ease); }
.jcard:hover .jcard__media img { transform: scale(1.05); }
.jcard__body { padding: clamp(18px, 2.4vw, 28px); }
.jcard__meta {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-50);
  margin-block: var(--sp-10px) var(--sp-6px);
}
.jcard__title { font-size: clamp(1.25rem, 2.2vw, 1.7rem); margin-block: var(--sp-13px) var(--sp-11px); line-height: 1.1; }
.jcard__title a { color: var(--ink); text-decoration: none; }
.jcard__title a:hover { text-decoration: underline; text-underline-offset: 5px; }
.jcard__dek { color: var(--text-60); font-size: var(--fs-md); }
.jcard__foot {
  margin-block-start: var(--sp-18px);
  padding-block-start: var(--sp-14px);
  border-block-start: var(--bd) solid var(--line-soft);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: var(--text-50);
  display: flex;
  gap: var(--sp-8px);
  align-items: center;
}
.jcard__foot::before { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* article sections */
.art__hd { padding-block: clamp(40px, 5vw, 70px) clamp(26px, 3vw, 40px); }
.art__k {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-60);
  margin-block: var(--sp-20px) var(--sp-16px);
}
.art__t { font-size: clamp(2.1rem, 5vw, 3.9rem); }
.art__dek {
  margin-block-start: var(--sp-20px);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  color: var(--text-80);
}
.art__by { margin-block-start: var(--sp-22px); font-size: var(--fs-sm); color: var(--text-60); }
.art__cover { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.art__cover img { width: 100%; border: var(--bd) solid var(--ink); }
.art__grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  gap: clamp(28px, 5vw, 80px);
  justify-content: center;
  padding-block: clamp(40px, 5vw, 72px);
}
.art__meta { position: relative; }
.art__metaIn {
  position: sticky;
  inset-block-start: calc(var(--hdr-h) + var(--sp-24px));
  border-block-start: var(--bd-2) solid var(--ink);
  padding-block-start: var(--sp-16px);
  display: grid;
  gap: var(--sp-4px);
}
.art__metaK {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--text-50);
  margin-block-start: var(--sp-14px);
}
.art__metaK:first-child { margin-block-start: 0; }
.art__metaV { font-size: var(--fs-sm); font-weight: 600; }
.art__copy { font-size: var(--fs-xs); color: var(--accent-deep); font-weight: 600; }
.art__body p { font-size: clamp(1.05rem, 1.5vw, 1.15rem); line-height: 1.75; margin-block-end: var(--sp-24px); color: var(--text-80); }
.art__body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-block: var(--tap) var(--sp-20px);
  display: flex;
  align-items: baseline;
  gap: var(--sp-16px);
  scroll-margin-block-start: calc(var(--hdr-h) + var(--sp-20px));
}
.art__body .an { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--text-50); }

.aq {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
  margin-block: 36px;
  padding-block: var(--sp-6px);
  border-block: 5px solid var(--accent);
}
.ao, .au { margin-block: 0 var(--sp-26px); display: grid; gap: var(--sp-11px); }
.ao li, .au li {
  position: relative;
  padding-inline-start: 40px;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-80);
}
.ao { counter-reset: ao; }
.ao li::before {
  counter-increment: ao;
  content: counter(ao, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--sp-2px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  color: var(--accent-ink);
  background: var(--accent);
  border: var(--bd) solid var(--ink);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-round);
}
.au li::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--sp-4px);
  inset-block-start: var(--sp-11px);
  width: 12px;
  height: 2px;
  background: var(--ink);
}
.anote {
  display: flex;
  gap: var(--sp-14px);
  background: var(--surface);
  border: var(--bd) solid var(--ink);
  border-inline-start: var(--sp-5px) solid var(--accent);
  padding: var(--sp-18px) var(--sp-20px);
  margin-block: 32px;
}
.anote .ico { width: 18px; height: 18px; color: var(--accent-deep); flex: none; margin-block-start: var(--sp-3px); }
.anote p { margin: 0; font-size: var(--fs-md) !important; color: var(--text-80) !important; }

/* ---------------------------------------------------------- 14. contact */
.contact { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(34px, 5vw, 80px); align-items: start; }
.contact__h { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-block-end: var(--sp-26px); }
.contact__side { display: grid; gap: clamp(var(--sp-20px), 3vw, var(--sp-30px)); }

.form { display: grid; gap: var(--sp-18px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-18px); }
.form__row--3 { grid-template-columns: repeat(3, 1fr); }
.field { display: grid; gap: var(--sp-7px); position: relative; }
.field__l {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-60);
}
.field__i {
  width: 100%;
  background: var(--surface);
  border: var(--bd) solid var(--line);
  border-radius: var(--r-s);
  padding: var(--sp-14px) var(--sp-16px);
  font-size: var(--fs-md);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.field__i--ta { resize: vertical; min-height: 120px; font-family: inherit; line-height: 1.55; }
.field.is-bad .field__i { border-color: var(--danger); box-shadow: var(--sh-error); }
.field__e {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--danger);
  min-height: 0;
}
.field__e:empty { display: none; }
.field__sel { position: relative; display: block; }
.field__sel .field__i { appearance: none; cursor: pointer; padding-inline-end: var(--tap); }
.field__sel .ico {
  position: absolute;
  inset-inline-end: var(--sp-14px);
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  pointer-events: none;
}
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-18px); margin-block-start: var(--sp-6px); }
.form__demo {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-50);
}
.form__ok {
  background: var(--accent);
  color: var(--accent-ink);
  border: var(--bd) solid var(--ink);
  padding: var(--sp-15px) var(--sp-18px);
  font-weight: 600;
}

.cinfo { display: grid; gap: 0; border-block-start: var(--bd) solid var(--ink); }
.cinfo__i {
  display: flex;
  gap: var(--sp-16px);
  padding-block: var(--sp-20px);
  border-block-end: var(--bd) solid var(--line);
}
.cinfo__ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border: var(--bd) solid var(--ink);
  background: var(--surface);
}
.cinfo__ico .ico { width: 21px; height: 21px; }
.cinfo__i b { font-family: var(--f-display); font-size: var(--fs-md); }
.cinfo__i p { font-size: var(--fs-sm); color: var(--text-60); margin-block: var(--sp-3px); }
.cinfo__i a {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  border-bottom: var(--bd) solid var(--accent-deep);
}
.cinfo__i a:hover { background: var(--accent); color: var(--accent-ink); }

.map { position: relative; border: var(--bd) solid var(--ink); overflow: hidden; }
.map img { width: 100%; }
.map figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  background: var(--scrim-heavy);
  color: var(--slate-text);
  padding: var(--sp-13px) var(--sp-16px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5px) var(--sp-14px);
  align-items: baseline;
}
.map figcaption b { font-family: var(--f-display); font-size: var(--fs-md); }
.map figcaption span { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--slate-text-50); }

.visit { background: var(--surface); border: var(--bd) solid var(--line); padding: clamp(20px, 2.6vw, 28px); }
.visit h3 { font-size: 1.2rem; margin-block-end: var(--sp-12px); }
.visit p { font-size: var(--fs-sm); color: var(--text-60); margin-block-end: var(--sp-10px); }
.visit__addr { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--ink) !important; }
.visit__demo {
  font-size: var(--fs-xs) !important;
  color: var(--text-50) !important;
  border-block-start: var(--bd) dashed var(--line);
  padding-block-start: var(--sp-12px);
  margin-block-start: var(--sp-14px) !important;
}

/* ----------------------------------------------------------------- 15. faq */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(30px, 5vw, 72px); align-items: start; }
.faq__side { position: sticky; inset-block-start: calc(var(--hdr-h) + var(--sp-24px)); display: grid; gap: var(--sp-20px); }
.faqcard {
  background: var(--slate);
  color: var(--slate-text);
  padding: clamp(var(--sp-22px), 3vw, var(--sp-30px));
  display: grid;
  gap: var(--sp-14px);
  justify-items: start;
}
.faqcard__t {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: var(--ls-tight);
}
.faqcard__d { font-size: var(--fs-sm); color: var(--slate-text-60); }
.faqcard__wa {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-9px);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
}
.faqcard__wa .ico { width: 17px; height: 17px; }
.faqnav { display: grid; border-block-start: var(--bd) solid var(--line); }
.faqnav a {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  padding-block: var(--sp-13px);
  border-block-end: var(--bd) solid var(--line);
  color: var(--text-60);
  transition: color var(--dur-2) var(--ease), padding var(--dur-2) var(--ease);
}
.faqnav a:hover { color: var(--ink); padding-inline-start: var(--sp-6px); }

/* ---------------------------------------------------------------- 16. cart */
.cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  padding-block-end: var(--sec-y);
}
.cart__list { display: grid; gap: 0; border-block-start: var(--bd) solid var(--ink); }
.cart__empty {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8px);
  align-items: flex-start;
  padding: clamp(40px, 6vw, 72px) 0;
  color: var(--text-60);
}
.cart__empty::before {
  content: "";
  width: 54px;
  height: 54px;
  border: var(--bd) solid var(--ink);
  background: var(--accent);
  color: var(--accent-ink);
  order: -1;
}
.cart__empty span { font-size: var(--fs-md); color: var(--text-50); }
.cart__cta { grid-column: 1 / -1; justify-self: start; }

.citem {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: clamp(16px, 2.4vw, 28px);
  padding-block: clamp(var(--sp-18px), 2.4vw, var(--sp-26px));
  border-block-end: var(--bd) solid var(--line);
}
.citem__media {
  background: var(--surface);
  border: var(--bd) solid var(--line);
  display: grid;
  place-items: center;
  padding: var(--sp-12px);
}
.citem__media img { width: 100%; height: 96px; object-fit: contain; }
.citem__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-16px); }
.citem__n { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
.citem__n a:hover { text-decoration: underline; text-underline-offset: 4px; }
.citem__d { font-size: var(--fs-sm); color: var(--text-60); margin-block: var(--sp-6px) var(--sp-14px); max-width: 54ch; }
.citem__row { display: flex; align-items: center; gap: var(--sp-16px); flex-wrap: wrap; }
.citem__p { margin-inline-start: auto; font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; }
.citem__x {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: var(--bd) solid var(--line);
  border-radius: var(--r-round);
  color: var(--text-60);
  flex: none;
}
.citem__x:hover { background: var(--slate); color: var(--slate-text); border-color: var(--slate); }
.citem__x .ico { width: 14px; height: 14px; }

.cart__sum {
  position: sticky;
  inset-block-start: calc(var(--hdr-h) + var(--sp-24px));
  background: var(--surface);
  border: var(--bd) solid var(--ink);
  padding: clamp(20px, 2.6vw, 28px);
}
.cart__sumT { font-size: 1.3rem; margin-block-end: var(--sp-14px); }
.cart__note { font-size: var(--fs-xs); color: var(--text-50); padding-block: var(--sp-6px) var(--sp-12px); }
.cart__back, .co__edit {
  display: block;
  text-align: center;
  margin-block-start: var(--sp-14px);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-60);
}
.cart__back:hover, .co__edit:hover { color: var(--ink); }
.cart__secure {
  display: flex;
  align-items: center;
  gap: var(--sp-9px);
  margin-block-start: var(--sp-16px);
  font-size: var(--fs-xs);
  color: var(--text-60);
}
.cart__secure .ico { width: 15px; height: 15px; color: var(--accent-deep); }
.cart__gift {
  margin-block-start: var(--sp-12px);
  font-size: var(--fs-xs);
  color: var(--text-50);
  background: var(--paper-2);
  padding: var(--sp-11px) var(--sp-13px);
}

/* ------------------------------------------------------------- 17. checkout */
.co {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
  padding-block-end: var(--sec-y);
}
.co__form { display: grid; gap: clamp(26px, 3vw, 40px); }
.costep {
  background: var(--surface);
  border: var(--bd) solid var(--line);
  padding: clamp(var(--sp-22px), 3vw, var(--sp-34px));
  display: grid;
  gap: var(--sp-18px);
}
.costep__t {
  display: flex;
  align-items: center;
  gap: var(--sp-14px);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  padding-block-end: var(--sp-14px);
  border-block-end: var(--bd) solid var(--line);
}
.costep__n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--accent);
  color: var(--accent-ink);
  border: var(--bd) solid var(--ink);
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
}
.pays { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-14px); }
.pay { cursor: pointer; }
.pay input { position: absolute; opacity: 0; pointer-events: none; }
.pay__box {
  display: grid;
  gap: var(--sp-5px);
  padding: var(--sp-16px) var(--sp-18px);
  border: var(--bd) solid var(--line);
  background: var(--paper);
  position: relative;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2);
  min-height: 92px;
}
.pay__box b { font-family: var(--f-display); font-size: var(--fs-md); }
.pay__box span { font-size: var(--fs-xs); color: var(--text-60); }
.pay__mark {
  position: absolute;
  inset-block-start: var(--sp-14px);
  inset-inline-end: var(--sp-14px);
  width: 17px;
  height: 17px;
  border: var(--bd) solid var(--text-50);
  border-radius: var(--r-round);
}
.pay input:checked ~ .pay__box { border-color: var(--ink); background: var(--surface); box-shadow: var(--sh-ul-lg); }
.pay input:checked ~ .pay__box .pay__mark { border-color: var(--accent-ink); background: var(--accent);
  color: var(--accent-ink); box-shadow: var(--sh-inset-surface); }
.pay input:focus-visible ~ .pay__box { outline: var(--bd-2) solid var(--ink); outline-offset: 2px; }
.card { display: grid; gap: var(--sp-14px); }
.card[hidden] { display: none !important; }
.co__demo {
  display: flex;
  align-items: center;
  gap: var(--sp-10px);
  font-size: var(--fs-xs);
  color: var(--text-60);
  background: var(--paper-2);
  padding: var(--sp-12px) var(--sp-15px);
  border-inline-start: var(--sp-3px) solid var(--accent);
}
.co__demo .ico { width: 15px; height: 15px; color: var(--accent-deep); }
.co__back { text-align: center; font-family: var(--f-mono); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-60); }

.co__sum {
  position: sticky;
  inset-block-start: calc(var(--hdr-h) + var(--sp-24px));
  background: var(--surface);
  border: var(--bd) solid var(--ink);
  padding: clamp(20px, 2.6vw, 28px);
}
.co__sumT { font-size: 1.3rem; margin-block-end: var(--sp-16px); }
.co__items { display: grid; gap: 0; margin-block-end: var(--sp-8px); }
.coitem {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--sp-12px);
  align-items: center;
  padding-block: var(--sp-12px);
  border-block-end: var(--bd) solid var(--line-soft);
}
.coitem__media { background: var(--paper); border: var(--bd) solid var(--line-soft); padding: var(--sp-5px); }
.coitem__media img { width: 100%; height: 40px; object-fit: contain; }
.coitem__n { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.coitem__q { font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--text-50); }
.coitem__p { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }

.co__done {
  grid-column: 1 / -1;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  background: var(--surface);
  border: var(--bd) solid var(--ink);
  padding: clamp(34px, 5vw, 64px);
  display: grid;
  gap: var(--sp-16px);
  justify-items: center;
}
.co__doneIco {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  background: var(--accent);
  color: var(--accent-ink);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-round);
}
.co__doneIco .ico { width: 34px; height: 34px; }
.co__done h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.co__done p { color: var(--text-60); max-width: 48ch; }
.co__ref {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  background: var(--paper-2);
  padding: var(--sp-12px) var(--sp-18px);
  border: var(--bd) dashed var(--line);
}
.co.is-done .co__form,
.co.is-done .co__sum { display: none; }

/* ---------------------------------------------------------------- 18. misc */
.nf {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(70px, 12vw, 150px) var(--gut);
  display: grid;
  gap: var(--sp-20px);
  justify-items: start;
}
.nf__t { font-size: clamp(2.2rem, 6vw, 4rem); }

.toast {
  position: fixed;
  inset-block-end: var(--sp-24px);
  inset-inline-start: 50%;
  transform: translate(-50%, 140%);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--sp-12px);
  background: var(--slate);
  color: var(--slate-text);
  padding: var(--sp-14px) var(--sp-20px);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  font-size: var(--fs-sm);
  transition: transform var(--dur-3) var(--ease);
  max-width: calc(100vw - 32px);
}
[dir="rtl"] .toast { transform: translate(50%, 140%); }
.toast.is-on { transform: translate(-50%, 0); }
[dir="rtl"] .toast.is-on { transform: translate(50%, 0); }
.toast b { color: var(--accent); font-weight: 600; }
.toast a {
  font-family: var(--f-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--accent);
  border-bottom: var(--bd) solid var(--accent);
  white-space: nowrap;
}

body.is-locked { overflow: hidden; }

/* reveal on scroll */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; transition-delay: var(--rd, var(--dur-0)); }
.why__i:nth-child(2) { --rd: var(--st-1); }
.why__i:nth-child(3) { --rd: var(--st-2); }
.why__i:nth-child(4) { --rd: var(--st-3); }

/* =============================================== 18b. states, focus, icons
   One system for every interactive element:
   hover + focus-visible + active + disabled + loading + error + empty.
   Focus is NEVER removed: every interactive element gets a visible ring
   (the header search and footer newsletter inputs previously killed focus
   styling outright — both are fixed below). */
/* on dark editorial surfaces the ink outline would vanish — use the accent */
.hero :where(a, button, input, [tabindex]):focus-visible,
.ftr :where(a, button, input, [tabindex]):focus-visible,
.mnav :where(a, button, input, [tabindex]):focus-visible,
.cta :where(a, button, input, [tabindex]):focus-visible,
.toast :where(a, button, input, [tabindex]):focus-visible,
.ticker :where(a, button, input, [tabindex]):focus-visible,
.cart__sum :where(a, button, input, [tabindex]):focus-visible,
.faqcard :where(a, button, input, [tabindex]):focus-visible,
[data-slate] :where(a, button, input, [tabindex]):focus-visible {
  --focus-visible: var(--accent);
}
.skip:focus {
  outline: var(--bd-2) solid var(--accent);
  outline-offset: 3px;
}

/* buttons: disabled + loading */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  --btn-bg: var(--paper-2);
  --btn-fg: var(--text-50);
  --btn-bd: var(--line);
}
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
.btn[aria-busy="true"] {
  cursor: progress;
  position: relative;
  color: transparent !important;
}
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: var(--bd-2) solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--r-round);
  color: var(--btn-fg);
  animation: spin var(--dur-2) linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.ibtn:disabled { opacity: 0.4; cursor: not-allowed; }
.ibtn:disabled:hover { background: none; border-color: transparent; }

/* fields: hover / focus / error / disabled / filled */
.field__i:hover { border-color: var(--text-50); }
.field__i:focus { border-color: var(--ink); background: var(--surface-2); }
.field__i:disabled {
  background: var(--paper-2);
  color: var(--text-50);
  cursor: not-allowed;
}
.form--err .field__i,
.field__i[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: var(--sh-error);
}
.form__ok {
  display: flex;
  align-items: center;
  gap: var(--sp-8px);
  margin-block-start: var(--sp-12px);
  padding: var(--sp-12px) var(--sp-16px);
  background: var(--accent);
  color: var(--accent-ink);
  border: var(--bd) solid var(--ink);
  border-radius: var(--r-s);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.form__ok .ico { width: var(--ico-md); height: var(--ico-md); flex: none; }
.form__demo { color: var(--text-50); }
input::placeholder,
textarea::placeholder { color: var(--text-50); opacity: 1; }

/* search field (header) — previously had NO focus indicator at all */
.search__i:focus-visible {
  outline: var(--bd-2) solid var(--accent);
  outline-offset: 8px;
  border-radius: var(--r-pill);
}
/* newsletter field (footer, on slate) — same fix */
.news__i:focus-visible {
  outline: var(--bd-2) solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--r-s);
}

/* Empty states — the four contextual variants that already ship with the site
   (.grid__empty, .cart__empty, .drawer__empty, .sres--none) ARE the empty-state
   system; they were re-tokenized rather than replaced with a fifth component,
   so no designed layout or line of copy changed. All four share the same
   skeleton: --text-60 body, --fs-sm size, centered or left-aligned per context. */

/* ------------------------------------------------------------- icons (one set)
   Lucide-style outline: 24x24 viewBox, currentColor, stroke-width 1.75,
   round caps/joins, sized only by the --ico-* tokens. */
.ico {
  display: inline-block;
  width: var(--ico-md);
  height: var(--ico-md);
  flex: none;
  stroke-width: var(--ico-stroke);
  vertical-align: -0.125em;
}
.ico--sm { width: var(--ico-sm); height: var(--ico-sm); }
.ico--lg { width: var(--ico-lg); height: var(--ico-lg); }
.ico--xl { width: var(--ico-xl); height: var(--ico-xl); }
.ico--spin { animation: spin var(--dur-2) linear infinite; }

/* direction-sensitive icons mirror in RTL.
   Only arrows/chevrons/external-links flip; clock, phone, play, sun, moon,
   cart, heart etc. are direction-neutral and must NOT flip. */
/* Direction-sensitive icons mirror in RTL.
   ONLY the horizontal arrow carries .ico--flip (all 18 of its call sites are
   trailing "next / see all / go" arrows, which read right-to-left in Arabic).
   Everything else is direction-neutral; .ico--neutral is an explicit guard so
   a neutral glyph can never be mirrored even if ico--flip is added later. */
[dir="rtl"] .ico--flip { transform: scaleX(-1); }
[dir="rtl"] .ico--neutral { transform: none; }
[dir="rtl"] .ico--clock,
[dir="rtl"] .ico--phone,
[dir="rtl"] .ico--play,
[dir="rtl"] .ico--chevron { transform: none; }
/* the gallery arrows rotate 180deg for "previous" (see .gal__nav--p above) —
   compose with the mirror rather than letting one rule override the other */
[dir="rtl"] .gal__nav--p .ico { transform: scaleX(-1) rotate(180deg); }

/* ---------------------------------------------------- theme toggle (sun/moon) */
.tgl {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--bd) solid var(--line);
  border-radius: var(--r-round);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2), transform var(--dur-2) var(--ease);
}
.tgl:hover { background: var(--accent); border-color: var(--accent-ink); color: var(--accent-ink); }
.tgl:active { transform: scale(0.94); }
.tgl .ico { width: var(--ico-md); height: var(--ico-md); transition: transform var(--dur-3) var(--ease); }
.tgl:hover .ico { transform: rotate(20deg); }
.tgl__sun { display: none; }
[data-theme="dark"] .tgl__sun { display: block; }
[data-theme="dark"] .tgl__moon { display: none; }

/* ============================================================ 19. responsive */
@media (max-width: 1180px) {
  .nav { gap: var(--sp-16px); }
  .jrow__link { grid-template-columns: 44px 120px 1fr auto auto; gap: var(--sp-18px); }
  .jrow__thumb { width: 120px; }
}

@media (max-width: 1080px) {
  .nav { display: none; }
  .ibtn--burger { display: inline-grid; }
  .hdr__in { justify-content: space-between; }
  /* minmax(0,…) not 1fr: the auto minimum of a 1fr track is the largest
     min-content of its items, and the sort <select> has a wide intrinsic
     minimum — without this the track (and the page) overflows horizontally */
  .shop { grid-template-columns: minmax(0, 1fr); }
  .shop__main, .sbar, .sbar__s { min-width: 0; }
  .filters {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    z-index: var(--z-filters);
    width: min(340px, 88vw);
    overflow-y: auto;
    transform: translateX(-104%);
    transition: transform var(--dur-3) var(--ease);
    border: 0;
    border-inline-end: var(--bd) solid var(--ink);
    visibility: hidden;
  }
  [dir="rtl"] .filters { transform: translateX(104%); }
  .filters.is-open { transform: translateX(0); visibility: visible; }
  .filters__x { display: inline-grid; margin-inline-start: auto; }
  .filters__clear { margin-inline-start: 0; }
  .sbar__f { display: inline-flex; }
  .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__info { position: static; }
  .tech { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .faq__side { position: static; }
  .cart { grid-template-columns: 1fr; }
  .cart__sum { position: static; }
  .co { grid-template-columns: 1fr; }
  .co__sum { position: static; order: -1; }
  .art__grid { grid-template-columns: minmax(0, 720px); }
  .art__metaIn { position: static; display: flex; flex-wrap: wrap; gap: var(--sp-8px) var(--sp-24px); align-items: baseline; }
  .art__metaK { margin-block-start: 0; }
  .atelier { grid-template-columns: 1fr; }
  .why { grid-template-columns: repeat(2, 1fr); }
  .why__i:nth-child(2n) { border-inline-end: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__i:nth-child(2n) { border-inline-end: 0; }
  .stats__i:nth-child(-n + 2) { border-block-end: var(--bd) solid var(--line); }
  .cities { grid-template-columns: repeat(2, 1fr); }
  .cities__i { border-block-end: var(--bd) solid var(--line); }
  .cities__i:nth-child(2n) { border-inline-end: 0; }
  .triple, .riders { grid-template-columns: 1fr; }
  .rider { min-height: 0; }
  .lead { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .feat .pcard--a,
  .feat .pcard--b,
  .feat .pcard--c,
  .feat .pcard--d { grid-column: span 6; }
  .feat .pcard--a .pcard__media,
  .feat .pcard--d .pcard__media { aspect-ratio: 4 / 3; }
  .city { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; }
  .jrow__link { grid-template-columns: 40px 1fr auto; grid-template-areas: "idx cat go" "idx title go" "idx meta go"; gap: var(--sp-6px) var(--sp-16px); padding-block: var(--sp-18px); }
  .jrow__idx { grid-area: idx; align-self: start; padding-block-start: var(--sp-4px); }
  .jrow__cat { grid-area: cat; justify-self: start; }
  .jrow__title { grid-area: title; }
  .jrow__meta { grid-area: meta; white-space: normal; }
  .jrow__thumb { display: none; }
  .jrow__go { grid-area: go; align-self: center; }
  .uses__i { grid-template-columns: 50px 1fr; }
  .uses__d { grid-column: 2; }
  .vals { grid-template-columns: 1fr; }
  .vals__i { border-inline-end: 0; padding-inline-start: 0 !important; }
  .jcards { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { font-size: var(--fs-base); }
  .hdr__tools .lang { display: none; }
  /* the hero copy block is bottom-anchored over the photo: on phones the
     stacked kicker + title + sub + buttons is taller than the desktop image
     height, and .hero clips overflow — so grow the photo with the viewport
     and give the copy room to clear the 2-row spec bar below it */
  .hero__media img { min-height: clamp(520px, 78vh, 660px); }
  .hero__in { padding-block-end: clamp(128px, 22vh, 170px); }
  .hero__t { line-height: 1.06; }
  .hero__specs li { min-width: 50%; padding: var(--sp-11px) var(--sp-14px); }
  .hero__specs li:nth-child(2n) { border-inline-end: 0; }
  /* the wrapped second row of the 2×2 bar needs its own rule */
  .hero__specs li:nth-child(n + 3) { border-block-start: var(--bd) solid var(--slate-line); }
  /* six stacked sections make a long thumb-scroll — tighten the rhythm
     (explicit list: .sec--cta stays flush, it also appears on other pages) */
  .p-home .sec--feat,
  .p-home .sec--why,
  .p-home .sec--city,
  .p-home .sec--jr { padding-block: clamp(56px, 11vw, 88px); }
  .feat .pcard--a,
  .feat .pcard--b,
  .feat .pcard--c,
  .feat .pcard--d { grid-column: span 12; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  /* minmax(0,…) not 1fr: a bare 1fr track has an automatic minimum
     equal to its largest item's min-content, so one long unbreakable
     value inflates the track past the column and the page overflows */
  .fd__i { grid-template-columns: 48px minmax(0, 1fr); gap: var(--sp-14px) var(--sp-18px); }
  .fd__ico { width: 54px; height: 54px; grid-column: 2; }
  .fd__b { grid-column: 2; min-width: 0; }
  .fd__v { grid-column: 2; justify-self: start; white-space: normal; }
  .fd__i--r .fd__b { margin-inline-start: 0; }
  .form__row, .form__row--3 { grid-template-columns: 1fr; }
  .pays { grid-template-columns: 1fr; }
  .citem { grid-template-columns: 104px 1fr; }
  .citem__media img { height: 70px; }
  .gal__th img { height: 56px; }
  .kspec { grid-template-columns: 1fr; }
  .kspec__i { border-inline-end: 0; }
  .kspec__i:nth-last-child(-n + 2) { border-block-end: var(--bd) solid var(--line-soft); }
  .kspec__i:last-child { border-block-end: 0; }
  .why { grid-template-columns: 1fr; }
  .why__i { border-inline-end: 0; padding-inline-end: 0; }
  .stats { grid-template-columns: 1fr; }
  .stats__i { border-inline-end: 0; border-block-end: var(--bd) solid var(--line); }
  .stats__i:last-child { border-block-end: 0; }
  .cities { grid-template-columns: 1fr; }
  .cities__i { border-inline-end: 0; }
  .ftr__top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-34px); }
  /* let the columns shrink: the Arabic footer's longest column has a
     371px min-content, which a bare 1fr track adopts wholesale */
  .ftr__top > * { min-width: 0; }
  .ftr__bot { flex-direction: column; align-items: flex-start; }
  .cta { flex-direction: column; align-items: flex-start; }
  .buy__row { flex-wrap: wrap; }
  .buy__row .qty { flex: none; }
  .tech__t { font-size: 1.5rem; }
  .cmp__row { grid-template-columns: 1.4fr repeat(4, 1fr); min-width: 600px; }
}

@media (max-width: 560px) {
  :root { --gut: 18px; --hdr-h: 60px; }
  .brand__wm { font-size: var(--fs-md); }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid--rel { grid-template-columns: minmax(0, 1fr); }
  .sbar { flex-wrap: wrap; gap: var(--sp-10px); }
  .sbar__s { margin-inline-start: 0; width: 100%; }
  /* a <select> reports an intrinsic min-content width; as a flex item its
     automatic minimum is that width, so it can never shrink. min-width:0
     releases it and lets the sort bar fit a 360px phone. */
  .sbar__s select { flex: 1; min-width: 0; }
  .search { padding-block: var(--sp-18px) var(--sp-24px); }
  .jrow__link:hover { padding-inline: 0; }
  .lead { padding: var(--sp-14px); }
  .cart__empty::before { width: 44px; height: 44px; }
  .sbuy { display: flex; }
  .p-pdp .ftr { padding-block-end: var(--sp-76px); }
  .art__cover { padding-inline: var(--gut); }
  .fd { border-block-start: var(--bd) solid var(--ink); }
  .ticker__note { padding-inline: var(--sp-12px); font-size: var(--fs-2xs); letter-spacing: var(--ls-label); }
}

/* --- phones ≤430px: the header row is brand + 4 × 44px controls.
   At 360px that does not fit with the wordmark, so the mark carries the
   brand (the <a> keeps its aria-label) and the tools row gets room.
   Verified by the iframe probe: .hdr__tools right edge 365 → 262 at 360px. */
@media (max-width: 430px) {
  .brand__wm { display: none; }
  .hdr__in { gap: var(--sp-16px); }
  /* the two hero CTAs never share a phone row comfortably — stack them
     full-width so both stay comfortable tap targets */
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: var(--sp-10px); }
}

@media (max-width: 400px) {
  .hero__t { font-size: clamp(2.1rem, 11vw, 2.6rem); }
  .phd__t--x { font-size: clamp(2.1rem, 10vw, 2.6rem); }
  .btn { padding: var(--sp-14px) var(--sp-20px); font-size: var(--fs-sm); }
  .qty button { width: 40px; }
  .mnav__t { font-size: 1.4rem; }
  /* --fs-2xs is lifted to 14px on mobile, which lets the note swallow most
     of a 360px marquee — shrink it back so the ticker stays visible */
  .ticker__note { font-size: 10px; padding-inline: 10px; }
  /* chip + wide-tracked label can exceed 320px content width */
  .hero__kicker { flex-wrap: wrap; row-gap: var(--sp-6px); }
}

/* landscape phones / short windows: 68vh of photo is shorter than the hero
   copy block there, so give the photo a floor that ignores viewport height */
@media (max-height: 560px) {
  .hero__media img { min-height: clamp(540px, 150vh, 640px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: var(--dur-0) !important;
    animation-delay: var(--dur-0) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-0) !important;
    transition-delay: var(--dur-0) !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}