/* ============================================================================
   MR PARTS · site styles
   Layered on scrollcraft.css (tokens + devices). Everything here is this
   brand's own markup; the engine's device selectors are left alone.
   ========================================================================== */

:root {
  --sc-canvas: #0b0b0d;
  --sc-surface: #141518;
  --sc-ink: #f1efec;
  --sc-ink-soft: #a7a49f;
  --sc-accent: #b9252e;
  --sc-accent-ink: #ffffff;
  --sc-font-display: "Plus Jakarta Sans", "Noto Sans SC", system-ui, sans-serif;
  --sc-font-text: "Plus Jakarta Sans", "Noto Sans SC", system-ui, sans-serif;
  --sc-shadow-color: 240 10% 2%;

  --red: #b9252e;
  --red-hi: #ea565d;       /* red text / strokes on dark: >=5:1 on canvas and surface */
  --red-deep: #8c1a21;
  --graphite: #1b1c20;
  --steel: #2a2c31;
  --line: color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --line-2: color-mix(in oklab, var(--sc-ink) 22%, transparent);
  --ink-3: #8c8984;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-lock: cubic-bezier(0.2, 1.24, 0.32, 1);   /* lands, overshoots a hair, locks */
  --ease-mech: cubic-bezier(0.76, 0, 0.24, 1);
  --bar-h: 76px;
  --gut: clamp(1rem, 4.4vw, 4.5rem);
  --maxw: 84rem;
  --r: 4px;
}


body { font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); line-height: 1.65; letter-spacing: 0; }
html[data-lang="zh"] body { line-height: 1.75; letter-spacing: 0.02em; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.i { width: 1.15em; height: 1.15em; flex: none; }
.i-arrow { width: 1.35em; height: auto; }

/* ------------------------------------------------------------ typography -- */
.display {
  font-family: var(--sc-font-display); font-weight: 700; text-transform: none;
  letter-spacing: -0.022em; line-height: 1.12; text-wrap: balance; margin: 0;
}
.display--xl { font-size: clamp(2.1rem, 1.3rem + 3vw, 4rem); line-height: 1.06; }
.display--lg { font-size: clamp(1.7rem, 1.15rem + 2vw, 3rem); line-height: 1.08; }
.display--md { font-size: clamp(1.35rem, 1.05rem + 1vw, 2rem); line-height: 1.18; }
.display--sm { font-size: clamp(1.1rem, 0.98rem + 0.5vw, 1.4rem); line-height: 1.3; letter-spacing: -0.012em; }
html[data-lang="zh"] .display { font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; }
.label {
  font-family: var(--sc-font-text); font-weight: 600; font-size: 0.78rem; line-height: 1.3;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft);
}
html[data-lang="zh"] .label { letter-spacing: 0.12em; font-size: 0.8rem; }
p { text-wrap: pretty; }

.link {
  display: inline-flex; align-items: center; gap: 0.6em; font-weight: 600; text-decoration: none;
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.82rem; padding-block: 0.35em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 260ms var(--ease), color 160ms;
}
.link .i-arrow { transition: transform 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .link:hover { background-size: 100% 1px; }
  .link:hover .i-arrow { transform: translateX(4px); }
}

.skip { position: fixed; left: 1rem; top: -4rem; z-index: 200; background: var(--sc-ink); color: var(--sc-canvas); padding: 0.6rem 1rem; text-decoration: none; transition: top 160ms var(--ease); }
.skip:focus { top: 1rem; }

/* ------------------------------------------------------------------ logo -- */
.mrlogo { overflow: visible; }
.mrlogo__s { fill: var(--mr-stroke, var(--red)); transform-box: fill-box; transform-origin: center; }
.mrlogo__plate-bg { fill: var(--mr-plate, var(--sc-ink)); }
.mrlogo__letters { fill: var(--mr-letters, var(--sc-canvas)); }
.mrlogo__plate { transform-box: fill-box; transform-origin: center; }

/* ------------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 70; height: var(--bar-h);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); padding-inline: var(--gut);
  transition: transform 420ms var(--ease), background-color 300ms var(--ease);
}
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 86%, transparent), transparent);
  opacity: 1; transition: opacity 300ms;
}
.bar.is-solid::before { background: color-mix(in oklab, var(--sc-canvas) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bar.is-solid { box-shadow: 0 1px 0 var(--line); }
.bar.is-hidden { transform: translateY(-100%); }
.bar__mark { display: block; width: 74px; flex: none; }
.bar__mark .mrlogo { width: 100%; height: auto; }
.bar__nav { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); margin-left: auto; }
.bar__nav a {
  position: relative; text-decoration: none; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.5rem 0; color: color-mix(in oklab, var(--sc-ink) 82%, transparent); transition: color 160ms;
}
html[data-lang="zh"] .bar__nav a { letter-spacing: 0.08em; font-size: 0.9rem; }
.bar__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease);
  clip-path: polygon(0 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}
.bar__nav a:hover, .bar__nav a[aria-current] { color: var(--sc-ink); }
.bar__nav a:hover::after, .bar__nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.bar__end { display: flex; align-items: center; gap: 1.25rem; }
.langs { display: flex; gap: 0.15rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; }
.langs a { text-decoration: none; padding: 0.4rem 0.45rem; color: var(--ink-3); border-radius: var(--r); transition: color 160ms; }
.langs a:hover { color: var(--sc-ink); }
.langs a[aria-current] { color: var(--sc-ink); box-shadow: inset 0 -2px 0 var(--red); }
.bar__menu { display: none; }

/* nav mark: hover pulls the strokes apart along their own axes, then relocks */
.mrlogo--nav { --mr-plate: var(--sc-ink); }
.mrlogo--nav .mrlogo__s, .mrlogo--nav .mrlogo__plate { transition: transform 420ms var(--ease-lock); }
@media (hover: hover) and (pointer: fine) {
  .bar__mark:hover .mrlogo__s, .bar__mark:hover .mrlogo__plate { transition-duration: 220ms; transition-timing-function: var(--ease); }
  .bar__mark:hover .mrlogo__s--chev { transform: translate(0, -7px); }
  .bar__mark:hover .mrlogo__s--legl { transform: translate(-3px, 5px); }
  .bar__mark:hover .mrlogo__s--legr { transform: translate(3px, 5px); }
  .bar__mark:hover .mrlogo__s--rmain { transform: translate(5px, -5px); }
  .bar__mark:hover .mrlogo__s--rdiag { transform: translate(-6px, 6px); }
  .bar__mark:hover .mrlogo__plate { transform: translate(0, 7px); }
}

/* mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 65; background: var(--sc-canvas); padding: calc(var(--bar-h) + 2rem) var(--gut) 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  transition: clip-path 520ms var(--ease-mech);
}
.menu[hidden] { display: flex; visibility: hidden; }
.menu.is-open { visibility: visible; clip-path: polygon(0 0, 200% 0, 100% 100%, -100% 100%); }
.menu__nav { display: flex; flex-direction: column; gap: 0.25rem; }
.menu__nav a {
  font-family: var(--sc-font-display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.7rem, 8vw, 2.6rem); text-decoration: none;
  padding: 0.55rem 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(-16px);
  transition: opacity 360ms var(--ease), transform 360ms var(--ease); transition-delay: calc(var(--i) * 45ms + 160ms);
}
html[data-lang="zh"] .menu__nav a { font-weight: 700; }
.menu__nav a[aria-current] { color: var(--red-hi); }
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu__foot { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }

/* ------------------------------------------------------------ intro (loader) --
   The mark assembles in the dark: construction lines draw, the five strokes
   slide in along their own angles and lock, the plate slides home, a light
   sweeps the metal, then the dark splits along the R's 45deg cut.          */
.intro { display: none; }
.mr-intro .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 120; pointer-events: none;
}
.intro__half { position: absolute; inset: -10%; background: var(--sc-canvas); }
.intro__half--a { clip-path: polygon(0 0, 100% 0, 0 100%); }
.intro__half--b { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.intro__grid { position: absolute; inset: 0; }
.intro__grid i { position: absolute; background: color-mix(in oklab, var(--sc-ink) 10%, transparent); }
.intro__grid i:nth-child(1) { left: 0; right: 0; top: 50%; height: 1px; transform-origin: left; }
.intro__grid i:nth-child(2) { top: 0; bottom: 0; left: 50%; width: 1px; transform-origin: top; }
.intro__grid i:nth-child(3) { left: 50%; top: 50%; width: 150vmax; height: 1px; transform-origin: left; translate: -50% 0; rotate: 45deg; }
.intro__mark { position: relative; width: min(240px, 46vw); }
.intro__mark .mrlogo { width: 100%; height: auto; }
.mrlogo--intro { --mr-plate: var(--sc-ink); }
.intro__sweep {
  position: absolute; inset: -4% -10%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.75) 50%, transparent 58%) no-repeat;
  background-size: 240% 100%; background-position: 130% 0;
  -webkit-mask: url("../img/logo/mr-parts.svg?v=e5bce36209") center / contain no-repeat; mask: url("../img/logo/mr-parts.svg?v=e5bce36209") center / contain no-repeat;
  inset: 0; opacity: 0;
}

/* full sequence, ~3.1 s: draw 0-0.8, strokes lock 0.35-1.6, plate 1.25-1.9,
   sweep 1.75-2.65, split 2.75-3.55 (content readable from ~2.9 s) */
.mr-intro .intro__grid i:nth-child(1), .mr-intro .intro__grid i:nth-child(2) { animation: mr-draw-x 760ms var(--ease) both; }
.mr-intro .intro__grid i:nth-child(2) { animation-name: mr-draw-y; animation-delay: 120ms; }
.mr-intro .intro__grid i:nth-child(3) { animation: mr-draw-x 860ms var(--ease) 220ms both; }
.mr-intro .intro__grid { animation: mr-fade-out 500ms ease 1900ms both; }
.mr-intro .mrlogo--intro .mrlogo__s { animation: mr-lock 900ms var(--ease-lock) both; }
.mr-intro .mrlogo--intro .mrlogo__s--chev  { --fx: 0; --fy: -90px; animation-delay: 350ms; }
.mr-intro .mrlogo--intro .mrlogo__s--legl  { --fx: 0; --fy: 110px; animation-delay: 470ms; }
.mr-intro .mrlogo--intro .mrlogo__s--legr  { --fx: 0; --fy: 110px; animation-delay: 540ms; }
.mr-intro .mrlogo--intro .mrlogo__s--rmain { --fx: 80px; --fy: -80px; animation-delay: 620ms; }
.mr-intro .mrlogo--intro .mrlogo__s--rdiag { --fx: -90px; --fy: 90px; animation-delay: 720ms; }
.mr-intro .mrlogo--intro .mrlogo__plate { animation: mr-plate 650ms var(--ease) 1250ms both; }
.mr-intro .intro__sweep { animation: mr-sweep 900ms var(--ease-mech) 1750ms both; }
.mr-intro .intro__mark { animation: mr-mark-out 420ms var(--ease-mech) 2700ms both; }
.mr-intro .intro__half--a { animation: mr-split-a 800ms var(--ease-mech) 2750ms both; }
.mr-intro .intro__half--b { animation: mr-split-b 800ms var(--ease-mech) 2750ms both; }
.mr-intro .intro { animation: mr-gone 1ms linear 3580ms both; }

/* if anything stalls, never trap the page behind the loader */
.mr-failsafe .intro { display: none !important; }

@keyframes mr-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mr-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mr-fade-out { to { opacity: 0; } }
@keyframes mr-lock {
  0% { transform: translate(var(--fx), var(--fy)); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes mr-plate { from { transform: translateY(40px); opacity: 0; clip-path: inset(0 100% 0 0); } to { transform: none; opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes mr-sweep { 0% { opacity: 1; background-position: 130% 0; } 90% { opacity: 1; } 100% { opacity: 0; background-position: -30% 0; } }
@keyframes mr-mark-out { to { transform: scale(0.82); opacity: 0; } }
@keyframes mr-split-a { to { transform: translate(-60%, -60%); } }
@keyframes mr-split-b { to { transform: translate(60%, 60%); } }
@keyframes mr-gone { to { visibility: hidden; opacity: 0; } }

/* -------------------------------------------------------------- page wipe --
   Leaving: a red bar then a graphite bar sweep in along a 45deg edge (the R's
   stroke angle) with the monogram at the centre. Arriving: they sweep out the
   same way. ~300ms in, ~380ms out.                                        */
.wipe { position: fixed; inset: 0; z-index: 110; pointer-events: none; visibility: hidden; }
.wipe__bar {
  position: absolute; top: 0; bottom: 0; left: 0; width: calc(100vw + 100vh + 4px);
  transform: translateX(calc(-100% - 100vh)) skewX(-45deg); transform-origin: 0 100%;
}
.wipe__bar--red { background: var(--red); }
.wipe__bar--dark { background: var(--sc-canvas); }
.wipe__mark { position: absolute; left: 50%; top: 50%; width: 92px; translate: -50% -50%; opacity: 0; }
.wipe__mark .mrlogo { width: 100%; height: auto; }
.mrlogo--wipe .mrlogo__s { fill: var(--red); }

.is-leaving .wipe, .mr-arrive .wipe { visibility: visible; pointer-events: auto; }
.is-leaving .wipe__bar--red { transition: transform 300ms var(--ease-mech); transform: translateX(-100vh) skewX(-45deg); }
.is-leaving .wipe__bar--dark { transition: transform 320ms var(--ease-mech) 50ms; transform: translateX(-100vh) skewX(-45deg); }
.is-leaving .wipe__mark { transition: opacity 160ms 220ms; opacity: 1; }
.is-leaving .wipe__mark .mrlogo__s { animation: mr-lock 300ms var(--ease-lock) both; }
.is-leaving .wipe__mark .mrlogo__s--chev { --fx: 0; --fy: -24px; animation-delay: 180ms; }
.is-leaving .wipe__mark .mrlogo__s--legl, .is-leaving .wipe__mark .mrlogo__s--legr { --fx: 0; --fy: 24px; animation-delay: 210ms; }
.is-leaving .wipe__mark .mrlogo__s--rmain { --fx: 20px; --fy: -20px; animation-delay: 230ms; }
.is-leaving .wipe__mark .mrlogo__s--rdiag { --fx: -20px; --fy: 20px; animation-delay: 250ms; }

.mr-arrive .wipe__bar { transform: translateX(-100vh) skewX(-45deg); }
.mr-arrive .wipe__mark { opacity: 1; }
.mr-arrive.is-arrived .wipe__bar--dark { transition: transform 380ms var(--ease-mech); transform: translateX(110%) skewX(-45deg); }
.mr-arrive.is-arrived .wipe__bar--red { transition: transform 380ms var(--ease-mech) 60ms; transform: translateX(110%) skewX(-45deg); }
.mr-arrive.is-arrived .wipe__mark { transition: opacity 140ms; opacity: 0; }
.mr-arrive.is-done .wipe { visibility: hidden; }

/* ------------------------------------------------------------ cursor tag -- */
.cursor-tag {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: none;
  translate: var(--cx, -100px) var(--cy, -100px);
}
.cursor-tag span {
  display: block; translate: 14px 14px; padding: 0.4rem 0.7rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--sc-ink); color: var(--sc-canvas); clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transform: scale(0.85); opacity: 0; transition: transform 200ms var(--ease), opacity 160ms;
}
.cursor-tag.is-on span { transform: none; opacity: 1; }
@media (hover: hover) and (pointer: fine) { html:not(.mr-rm) .cursor-tag { display: block; } }

/* --------------------------------------------------------------- buttons --
   Fill comes in along the logo's 45deg stroke; the arrow leaves right and a
   twin enters from the left; press compresses by 3%.                     */
.btn {
  --h: 52px; position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  height: var(--h); padding: 0 1.5rem; border-radius: var(--r);
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer; user-select: none;
  transition: transform 140ms var(--ease), color 200ms var(--ease), box-shadow 200ms;
}
html[data-lang="zh"] .btn { letter-spacing: 0.08em; font-size: 0.9rem; }
.btn:active { transform: scale(0.97); }
.btn__fill {
  position: absolute; inset: 0 -30%; z-index: -1; transform: translateX(-102%) skewX(-45deg);
  transition: transform 420ms var(--ease-mech);
}
@media (hover: hover) and (pointer: fine) { .btn:hover .btn__fill { transform: translateX(0) skewX(-45deg); } }
.btn:focus-visible .btn__fill { transform: translateX(0) skewX(-45deg); }
.btn__arrow { position: relative; display: inline-flex; width: 1.35em; height: 0.75em; overflow: hidden; }
.btn__arrow .i { position: absolute; inset: 0; transition: transform 380ms var(--ease); }
.btn__arrow .i + .i { transform: translateX(-140%); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__arrow .i { transform: translateX(140%); }
  .btn:hover .btn__arrow .i + .i { transform: translateX(0); }
}
.btn--primary { background: var(--red); color: #fff; box-shadow: var(--sc-e1), inset 0 1px 0 rgba(255,255,255,0.14); }
.btn--primary .btn__fill { background: var(--red-deep); }
.btn--ghost { color: var(--sc-ink); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost .btn__fill { background: color-mix(in oklab, var(--sc-ink) 9%, transparent); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 45%, transparent); } }
.btn--light { background: var(--sc-ink); color: var(--sc-canvas); box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5); }
.btn--light .btn__fill { background: #ffffff; }
.btn--light .i-wa { color: #128c4a; }
.btn--sm { --h: 42px; padding: 0 1.05rem; font-size: 0.74rem; }
.btn--lg { --h: 60px; padding: 0 1.9rem; font-size: 0.88rem; }
.btn .i-wa { width: 1.25em; height: 1.25em; }

/* ======================================================================= HOME */

/* ---------------------------------------------------------------- 1 HERO -- */
.hero__stage { background: var(--sc-canvas); }
.hero__studio { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 60% at var(--hx, 68%) 52%, rgba(255,255,255,0.075), transparent 70%),
    radial-gradient(70% 50% at var(--hx, 68%) 100%, rgba(185,37,46,0.10), transparent 70%),
    var(--sc-canvas);
  transition: --hx 600ms;
}
.hero__floor { position: absolute; left: 0; right: 0; bottom: 14%; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent); }
.hero__beam { position: absolute; top: -10%; bottom: -10%; left: var(--hx, 68%); width: 22vw; translate: -50% 0; rotate: 18deg;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent); }
.hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; z-index: 1; transition: opacity 600ms var(--ease); }
.hero__poster--exploded { opacity: 0; object-position: 50% 50%; }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; transition: opacity 700ms var(--ease); }
.hero.is-gl .hero__gl { opacity: 1; }
.hero.is-gl .hero__poster { opacity: 0; }
.hero__leaders { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.hero__leaders path { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 50%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero__leaders circle { fill: var(--sc-canvas); stroke: var(--red-hi); stroke-width: 1.5; }
.hero__callouts { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero__callouts li {
  position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0;
  font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink);
  translate: var(--x, -999px) var(--y, -999px);
}
html[data-lang="zh"] .hero__callouts li { letter-spacing: 0.06em; font-size: 0.86rem; }
.hero__callouts li span { display: block; translate: 0 -50%; padding: 0.2rem 0; }
.hero__callouts li[data-side="left"] span { translate: -100% -50%; text-align: right; }
.hero__frame { position: absolute; inset: calc(var(--bar-h) + 1rem) var(--gut) 1.25rem; z-index: 3; pointer-events: none; }
.hero__frame i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--line-2); }
.hero__frame i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; }
.hero__frame i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.hero__frame i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.hero__frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.hero__fig { position: absolute; right: 1.5rem; bottom: 0.9rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

.hero__copy { inset-inline: auto; left: var(--gut); top: 50%; bottom: auto; translate: 0 -46%; max-width: min(46rem, 54vw); }
.hero__label { margin-bottom: 1.6rem; display: flex; align-items: center; gap: 0.8rem; }
.hero__label::before { content: ""; width: 26px; height: 2px; background: var(--red); clip-path: polygon(0 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }
.hero__title {
  font-family: var(--sc-font-display); font-weight: 750; text-transform: none; letter-spacing: -0.03em;
  font-size: clamp(2.4rem, 1.3rem + 3.3vw, 4.6rem); line-height: 1.04; margin: 0;
}
html[data-lang="zh"] .hero__title { font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4rem); }
.hero__title .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .ln > span { display: inline-block; }
.hero__title .ln:nth-child(n+2) > span { color: color-mix(in oklab, var(--sc-ink) 100%, transparent); }
.hero__title .ln:first-child > span { color: var(--sc-ink); }
.hero__lede { margin-top: 1.5rem; max-width: 38ch; color: var(--sc-ink-soft); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); }
.hero__ctas { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* headline assembles after the intro (lines rise from their masks) */
html.js .hero__title .ln > span, html.js .hero__label, html.js .hero__lede, html.js .hero__ctas { opacity: 0; }
html.js .hero__title .ln > span { transform: translateY(105%); opacity: 1; }
html.is-ready .hero__title .ln > span { transform: none; transition: transform 900ms var(--ease); }
html.is-ready .hero__title .ln:nth-child(2) > span { transition-delay: 80ms; }
html.is-ready .hero__title .ln:nth-child(3) > span { transition-delay: 160ms; }
html.is-ready .hero__label { opacity: 1; transition: opacity 600ms var(--ease); }
html.is-ready .hero__lede { opacity: 1; transition: opacity 700ms var(--ease) 320ms; }
html.is-ready .hero__ctas { opacity: 1; transition: opacity 700ms var(--ease) 440ms; }

.hero__job { position: absolute; z-index: 20; right: var(--gut); bottom: clamp(2.5rem, 8vh, 5rem); width: min(27rem, 34vw); }
.hero__job p { margin-top: 0.9rem; color: var(--sc-ink-soft); max-width: 36ch; }

/* ------------------------------------------------------------- 2 PROMISE -- */
.promise { padding-block: clamp(5rem, 12vh, 9rem) clamp(5rem, 14vh, 10rem); position: relative; }
.promise__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.promise__title { grid-column: 1 / span 8; max-width: 22ch; }
.promise__cols { grid-column: 5 / span 8; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2rem, 6vh, 4rem); }
.promise__col { border-top: 1px solid var(--line); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.promise__col h3 { color: var(--sc-ink); }
.promise__col p { color: var(--sc-ink-soft); }
.promise__since { grid-column: 1 / -1; margin-top: clamp(3rem, 9vh, 6rem); display: flex; align-items: center; gap: 1.5rem; }
.promise__since p { color: var(--sc-ink); }
.promise__stroke { width: clamp(80px, 16vw, 240px); height: 10px; background: var(--red); flex: none;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transform-origin: left; transform: scaleX(0); transition: transform 1000ms var(--ease-mech) 200ms; }
.promise__since.sc-in .promise__stroke { transform: scaleX(1); }

/* ------------------------------------------------------------- 3 SYSTEMS -- */
.systems__stage {
  display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 1.5fr) minmax(16rem, 1.15fr);
  grid-template-rows: auto 1fr; gap: 0 clamp(1rem, 3vw, 3rem);
  padding: calc(var(--bar-h) + 1.5rem) var(--gut) 2rem;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 48px 48px;
  background-color: transparent;
}
.systems__stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(64% 72% at 50% 52%, transparent 30%, var(--sc-canvas) 88%); }
.systems__stage > * { position: relative; z-index: 1; }
.systems__title { grid-column: 1 / -1; align-self: start; color: var(--sc-ink-soft); }
.systems__index { grid-column: 1; grid-row: 2; align-self: center; display: flex; flex-direction: column; gap: 0.25rem; }
.systems__index a {
  display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0; text-decoration: none; font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); transition: color 240ms var(--ease);
}
html[data-lang="zh"] .systems__index a { letter-spacing: 0.08em; font-size: 0.92rem; }
.systems__index a i { width: 18px; height: 2px; background: currentColor; transform-origin: left; transition: transform 300ms var(--ease), background 240ms; clip-path: polygon(0 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }
.systems__index a:hover { color: var(--sc-ink-soft); }
.systems__index a.is-on { color: var(--sc-ink); }
.systems__index a.is-on i { background: var(--red); transform: scaleX(2.2); }
.systems__figure { grid-column: 2; grid-row: 2; min-height: 0; display: grid; place-items: center; }
.systems__panels { grid-column: 3; grid-row: 2; position: relative; align-self: center; min-height: 22rem; }
.sys { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.sys h3 { color: var(--sc-ink); }
.sys > p:not(.label) { color: var(--sc-ink-soft); max-width: 34ch; }
.sys__stock { margin-top: 0.4rem; }
.sys__parts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sys__parts a {
  display: inline-block; text-decoration: none; padding: 0.45rem 0.8rem; font-size: 0.86rem; border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow 160ms, background 160ms;
}
.sys__parts a:hover { box-shadow: inset 0 0 0 1px var(--red-hi); background: color-mix(in oklab, var(--red) 12%, transparent); }

/* blueprint */
.bp { width: 100%; height: 100%; max-height: calc(100svh - var(--bar-h) - 7rem); overflow: visible; }
.bp path, .bp circle { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 34%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw, 1)); }
.bp .bp-faint { stroke: color-mix(in oklab, var(--sc-ink) 16%, transparent); }
.bp .bp-dash { stroke-dasharray: 0.012 0.008; stroke-dashoffset: 0; opacity: calc(var(--draw, 1)); stroke: color-mix(in oklab, var(--sc-ink) 18%, transparent); }
.bp .bp-axis { stroke: color-mix(in oklab, var(--sc-ink) 14%, transparent); stroke-dasharray: 0.03 0.008 0.004 0.008; stroke-dashoffset: 0; opacity: var(--draw, 1); }
.bp text { fill: var(--sc-ink); font: 600 13px/1 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; }
.bp .bp-axis-t { fill: var(--ink-3); font-size: 10px; letter-spacing: 0.24em; opacity: var(--draw, 1); }
.bp-sys path, .bp-sys circle { transition: stroke 360ms var(--ease), stroke-width 360ms var(--ease), fill 360ms var(--ease), opacity 360ms; }
.bp-sys.is-on path, .bp-sys.is-on circle { stroke: var(--red-hi); stroke-width: 2; }
.bp-sys.is-on .bp-shape { fill: color-mix(in oklab, var(--red) 14%, transparent); }
.bp-sys.is-on .bp-dash { fill: none; }
.bp-flow path { stroke-dasharray: 0.02 0.03 !important; stroke-dashoffset: 0; opacity: 0; fill: none !important; stroke: #fff !important; stroke-width: 2 !important; transition: opacity 300ms; }
.bp-sys.is-on .bp-flow path { opacity: 0.9; animation: bp-flow 1.6s linear infinite; }
@keyframes bp-flow { to { stroke-dashoffset: -0.5; } }
.bp-labels { opacity: 0; transition: opacity 300ms var(--ease); }
.bp-labels.is-on { opacity: 1; transition-delay: 160ms; }
.bp-labels .bp-leader { stroke: color-mix(in oklab, var(--sc-ink) 55%, transparent); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 600ms var(--ease) 120ms; fill: none; }
.bp-labels.is-on .bp-leader { stroke-dashoffset: 0; }
.bp-labels .bp-dot { fill: var(--red-hi); stroke: none; stroke-dasharray: none; }
html[data-lang="zh"] .bp text { letter-spacing: 0.04em; font-size: 15px; }

/* ---------------------------------------------------------------- 4 RANGE -- */
.range__stage { display: flex; align-items: center; }
.range__rail { gap: clamp(1rem, 2vw, 2rem); padding: calc(var(--bar-h) + 1rem) var(--gut) 2rem; align-items: stretch; }
.range__lead { flex: none; width: clamp(16rem, 26vw, 24rem); display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; padding-right: 2vw; }
.range__lead p { color: var(--sc-ink-soft); max-width: 30ch; }
.plate {
  flex: none; width: clamp(18rem, 30vw, 29rem); display: flex; flex-direction: column; gap: 0.6rem; text-decoration: none;
  padding-bottom: 0.5rem;
}
.plate__media {
  position: relative; display: block; aspect-ratio: 4 / 3.2; border-radius: var(--r); overflow: hidden;
  background: radial-gradient(80% 70% at 50% 45%, #24262b, #121316 75%); box-shadow: var(--sc-e2), var(--sc-edge);
}
.plate__media img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; transition: transform 700ms var(--ease); }
.plate__light { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.09) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 150% 0; transition: background-position 900ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .plate:hover .plate__light { background-position: -50% 0; }
  .plate:hover .plate__media img { transform: translateY(-6px) rotate(-1.5deg); }
}
.plate__sys { margin-top: 0.6rem; color: var(--red-hi); }
.plate__name { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: -0.015em; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); }
html[data-lang="zh"] .plate__name { font-weight: 700; }
.plate__line { color: var(--sc-ink-soft); font-size: 0.95rem; max-width: 34ch; }
.range__end {
  flex: none; width: clamp(14rem, 20vw, 18rem); display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; text-decoration: none;
  padding: 2rem; border-left: 1px solid var(--line);
}
.range__endmark { width: 64px; }
.mrlogo--mono .mrlogo__s { fill: var(--sc-ink); }
.range__end .i-arrow { width: 2.2rem; transition: transform 300ms var(--ease); }
.range__end:hover .i-arrow { transform: translateX(8px); }
.range__end:hover .mrlogo--mono .mrlogo__s { fill: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .range .plate { opacity: clamp(0.55, calc(0.55 + var(--sc-p, 0) * 7 - var(--i, 0) * 0.75), 1); }
}

/* --------------------------------------------------------------- 5 BRANDS -- */
.brandsrow { padding-block: clamp(5rem, 12vh, 9rem) clamp(4rem, 10vh, 7rem); overflow: clip; }
.brandsrow__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem 3rem; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.brandsrow__head h2 { grid-column: 1; }
.brandsrow__head p { grid-column: 1; color: var(--sc-ink-soft); max-width: 46ch; }
.brandsrow__head .link { grid-column: 2; grid-row: 1 / span 2; }
.marquee { display: flex; flex-direction: column; gap: 1rem; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__row { overflow: hidden; }
.marquee__track { display: flex; width: max-content; gap: 1rem; animation: mr-marquee 60s linear infinite; }
.marquee__row--rev .marquee__track { animation-direction: reverse; animation-duration: 70s; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes mr-marquee { to { transform: translateX(-50%); } }
.marquee__item {
  flex: none; display: grid; place-items: center; width: clamp(150px, 15vw, 210px); height: clamp(84px, 9vw, 110px); padding: 1rem 1.4rem;
  border-radius: var(--r); background: var(--sc-surface); box-shadow: inset 0 0 0 1px var(--line); transition: background 260ms, box-shadow 260ms;
}
.marquee__item img { max-height: 64px; width: auto; max-width: 100%; filter: grayscale(1) brightness(1.55) contrast(0.85); opacity: 0.7; transition: filter 300ms var(--ease), opacity 300ms, transform 300ms var(--ease); }
.marquee__item:hover, .marquee__item:focus-visible { background: #1b1c20; box-shadow: inset 0 0 0 1px var(--line-2); }
.marquee__item:hover img, .marquee__item:focus-visible img { filter: none; opacity: 1; transform: scale(1.04); }

/* ---------------------------------------------------------------- 6 CLOSE -- */
.close { --sc-accent: #ffffff; }
.close__stage { background: var(--red); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--bar-h) + 2rem) var(--gut) 1.5rem; }
.close__stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 1px), rgba(0,0,0,0.12) calc(33.333% - 1px) 33.333%); }
.close__inner { position: relative; z-index: 3; flex: 1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.close__mark { width: min(100%, 30rem); justify-self: center; }
.close__mark .mrlogo { width: 100%; height: auto; }
.mrlogo--close { --mr-stroke: #ffffff; --mr-plate: #ffffff; --mr-letters: var(--red); }
.close__copy { display: flex; flex-direction: column; gap: 1.3rem; align-items: flex-start; }
.close__copy h2 { color: #fff; max-width: 16ch; }
.close__copy p { color: rgba(255,255,255,0.86); max-width: 40ch; font-size: 1.08rem; }
.close__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.5rem; }
.close__alt { color: #fff; font-weight: 600; letter-spacing: 0.06em; text-underline-offset: 0.3em; }
.close :focus-visible { outline-color: #fff; }
/* the mark locks together as the act arrives: --k is 1 (apart) .. 0 (locked) */
.close { --k: clamp(0, calc(1 - var(--sc-p, 1) / 0.5), 1); }
.mrlogo--close .mrlogo__s--chev { transform: translate(0, calc(var(--k) * -70px)); }
.mrlogo--close .mrlogo__s--legl { transform: translate(0, calc(var(--k) * 80px)); }
.mrlogo--close .mrlogo__s--legr { transform: translate(0, calc(var(--k) * 80px)); }
.mrlogo--close .mrlogo__s--rmain { transform: translate(calc(var(--k) * 60px), calc(var(--k) * -60px)); }
.mrlogo--close .mrlogo__s--rdiag { transform: translate(calc(var(--k) * -70px), calc(var(--k) * 70px)); }
.mrlogo--close .mrlogo__plate { transform: translateY(calc(var(--k) * 50px)); opacity: calc(1 - var(--k) * 0.9); }
.close__mark.is-locked .mrlogo { animation: mr-flash 600ms var(--ease); }
@keyframes mr-flash { 0% { filter: brightness(1); } 25% { filter: brightness(1.6) drop-shadow(0 0 0 #fff); } 100% { filter: none; } }

/* ---------------------------------------------------------------- footer -- */
.foot { padding: 2.5rem var(--gut) 2rem; border-top: 1px solid var(--line); }
.foot--close { position: relative; z-index: 3; padding: 1.5rem 0 0; border-top: 1px solid rgba(255,255,255,0.25); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem; }
.foot__mark { width: 64px; }
.foot__mark .mrlogo { width: 100%; height: auto; }
.foot--close .mrlogo--foot { --mr-stroke: #fff; --mr-plate: #fff; --mr-letters: var(--red); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.foot__nav a, .foot__wa a { text-decoration: none; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.foot__nav a:hover, .foot__wa a:hover { opacity: 1; text-decoration: underline; }
.foot__wa { margin-left: auto; display: flex; gap: 1.5rem; }
.foot__wa a { display: inline-flex; align-items: center; gap: 0.5rem; letter-spacing: 0.06em; }
.foot__legal { margin-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; font-size: 0.8rem; color: var(--ink-3); }
.foot--close .foot__legal { color: rgba(255,255,255,0.72); }

/* ================================================================= INNER */
.inner { padding-top: var(--bar-h); }
.phead { padding-block: clamp(3.5rem, 10vh, 7rem) clamp(2rem, 6vh, 4rem); position: relative; }
.phead__inner { position: relative; }
.phead__inner::after { content: ""; position: absolute; left: var(--gut); right: var(--gut); bottom: calc(clamp(2rem, 6vh, 4rem) * -1); height: 1px; background: var(--line); }
.phead__inner { display: flex; flex-direction: column; gap: 1.4rem; }
.phead__title { max-width: 18ch; }
.phead__lede { max-width: 52ch; color: var(--sc-ink-soft); font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.18rem); }
.phead--split .phead__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 2rem 4rem; }
.phead--split .phead__inner > div { display: flex; flex-direction: column; gap: 1.4rem; }

/* filter (products + brands) */
.filter { position: sticky; top: calc(var(--bar-h) - 1px); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  padding: 1rem 0; margin-bottom: 1.5rem; background: color-mix(in oklab, var(--sc-canvas) 92%, transparent); }
.filter button {
  appearance: none; border: 0; background: transparent; cursor: pointer; padding: 0.55rem 0.95rem; border-radius: var(--r);
  font-weight: 600; font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink-soft);
  box-shadow: inset 0 0 0 1px var(--line); transition: color 160ms, box-shadow 160ms, background 160ms;
}
html[data-lang="zh"] .filter button { letter-spacing: 0.06em; font-size: 0.86rem; }
.filter button:hover { color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.filter button[aria-pressed="true"] { color: #fff; background: var(--red); box-shadow: none; }
.filter__count { margin-left: auto; font-size: 0.8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* catalogue */
.catalog { padding-block: 1rem 5rem; }
.catalog__grid, .wall__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.catalog__wipe { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; display: grid; place-items: center; visibility: hidden; }
.catalog__wipe::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: clamp(80px, 12vw, 200px); background: var(--red); opacity: 0.92; transform: translateX(-40vw) skewX(-45deg); }
.catalog__wipe .mrlogo { width: 84px; position: relative; opacity: 0; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5)); }
.catalog__wipe.is-run { visibility: visible; }
.catalog__wipe.is-run::before { animation: mr-gridwipe 620ms var(--ease-mech) both; }
.catalog__wipe.is-run .mrlogo { animation: mr-wipemark 620ms var(--ease) both; }
.catalog__wipe.is-run .mrlogo__s { animation: mr-lock 360ms var(--ease-lock) both; --fx: 0; --fy: 14px; }
.catalog__wipe.is-run .mrlogo__s--chev { --fy: -14px; }
.catalog__wipe.is-run .mrlogo__s--rmain { --fx: 12px; --fy: -12px; }
.catalog__wipe.is-run .mrlogo__s--rdiag { --fx: -12px; --fy: 12px; }
@keyframes mr-gridwipe { to { transform: translateX(150vw) skewX(-45deg); } }
@keyframes mr-wipemark { 0% { opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

[data-f-item] { transition: opacity 280ms var(--ease), transform 280ms var(--ease); }
[data-f-item].is-out { opacity: 0; transform: scale(0.96); }
[data-f-item][hidden] { display: none !important; }

.item { display: flex; flex-direction: column; border-radius: var(--r); background: var(--sc-surface); box-shadow: var(--sc-e1), var(--sc-edge); scroll-margin-top: calc(var(--bar-h) + 5rem); }
.item.is-target { box-shadow: 0 0 0 2px var(--red-hi), var(--sc-e2); }
.item__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r) var(--r) 0 0;
  background: radial-gradient(70% 70% at var(--mx, 50%) var(--my, 42%), #2a2c31, #141518 72%); }
.item__glow { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.08) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 160% 0; transition: background-position 900ms var(--ease); z-index: 2; }
.item__media img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; transform: translate(var(--px, 0), var(--py, 0)); transition: transform 500ms var(--ease), opacity 400ms; }
.item__sys { position: absolute; left: 1rem; top: 0.9rem; z-index: 3; color: var(--red-hi); }
.item__own { position: absolute; right: 0.8rem; top: 0.7rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink); padding: 0.3rem 0.55rem; border-radius: var(--r); background: rgba(11,11,13,0.6); }
.item__own .mrlogo { width: 20px; }
.item__details {
  position: absolute; inset: auto 0 0; z-index: 4; padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem;
  background: linear-gradient(to top, rgba(11,11,13,0.96) 70%, rgba(11,11,13,0.82)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transform: translateY(101%); transition: transform 420ms var(--ease);
}
.item__details ul { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.4rem; }
.item__details li { position: relative; padding-left: 1.1rem; font-size: 0.92rem; }
.item__details li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 2px; background: var(--red-hi); }
.item__brands { font-size: 0.92rem; color: var(--sc-ink); }
.item.is-open .item__details { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .item:hover .item__glow { background-position: -60% 0; }
}
.item.is-open .item__media img { opacity: 0.4; }
.item__body { padding: 1.2rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.item__name { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: -0.015em; font-size: 1.28rem; line-height: 1.25; }
html[data-lang="zh"] .item__name { font-weight: 700; font-size: 1.2rem; }
.item__line { color: var(--sc-ink-soft); font-size: 0.95rem; }
.item__actions { margin-top: auto; padding-top: 0.6rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.item__toggle { appearance: none; border: 0; background: none; cursor: pointer; padding: 0.4rem 0; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.74rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink-soft); }
.item__toggle i { position: relative; width: 10px; height: 10px; }
.item__toggle i::before, .item__toggle i::after { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 2px; background: currentColor; transition: transform 240ms var(--ease); }
.item__toggle i::after { transform: rotate(90deg); }
.item__toggle[aria-expanded="true"] i::after { transform: rotate(0deg); }
.item__toggle:hover { color: var(--sc-ink); }
.missing { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2rem clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.missing p { color: var(--sc-ink-soft); margin-top: 0.5rem; max-width: 48ch; }
.fineprint { margin-top: 1.5rem; font-size: 0.82rem; color: var(--ink-3); }

/* brands page */
.own { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center; padding-block: clamp(3rem, 8vh, 5rem); }
.own__mark { padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: var(--r); background: var(--red); box-shadow: var(--sc-e2); }
.mrlogo--own { width: 100%; height: auto; --mr-stroke: #fff; --mr-plate: #fff; --mr-letters: var(--red); }
.own__copy { display: flex; flex-direction: column; gap: 1rem; }
.own__copy p { color: var(--sc-ink-soft); max-width: 46ch; }
.own__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.own__list a { display: inline-block; text-decoration: none; padding: 0.45rem 0.8rem; font-size: 0.88rem; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow 160ms, background 160ms; }
.own__list a:hover { box-shadow: inset 0 0 0 1px var(--red-hi); background: color-mix(in oklab, var(--red) 12%, transparent); }
.wall { padding-block: 1rem 6rem; }
.wall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile__btn {
  appearance: none; border: 0; width: 100%; cursor: pointer; text-align: left; display: grid; grid-template-rows: 1fr auto auto; gap: 0.35rem;
  padding: 1.2rem 1.2rem 1rem; min-height: 200px; border-radius: var(--r); background: var(--sc-surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: background 260ms, box-shadow 260ms, transform 260ms var(--ease);
}
.tile__logo { display: grid; place-items: center; padding: 1rem 0.5rem 1.25rem; }
.tile__logo img { max-height: 76px; width: auto; max-width: 92%; filter: grayscale(1) brightness(1.55) contrast(0.85); opacity: 0.72; transition: filter 320ms var(--ease), opacity 320ms, transform 320ms var(--ease); }
.tile__name { font-weight: 600; font-size: 0.95rem; }
.tile__group { color: var(--ink-3); font-size: 0.68rem; }
@media (hover: hover) and (pointer: fine) {
  .tile__btn:hover { background: #1b1c20; box-shadow: inset 0 0 0 1px var(--line-2); }
  .tile__btn:hover img { filter: none; opacity: 1; transform: scale(1.05); }
}
.tile__btn:focus-visible img { filter: none; opacity: 1; }
.tile__btn:active { transform: scale(0.98); }

.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100%; max-height: none; width: min(30rem, 100vw); padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; }
.drawer::backdrop { background: rgba(5,5,7,0.6); backdrop-filter: blur(4px); opacity: 0; transition: opacity 300ms; }
.drawer[open]::backdrop { opacity: 1; }
.drawer__panel { height: 100%; overflow-y: auto; padding: clamp(1.5rem, 4vw, 3rem); background: var(--graphite); box-shadow: -1px 0 0 var(--line), var(--sc-e3); display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start;
  transform: translateX(100%); transition: transform 420ms var(--ease); }
.drawer.is-in .drawer__panel { transform: none; }
.drawer__close { appearance: none; border: 0; background: none; cursor: pointer; width: 44px; height: 44px; align-self: flex-end; position: relative; }
.drawer__close i { position: absolute; left: 11px; top: 21px; width: 22px; height: 2px; background: var(--sc-ink); rotate: 45deg; }
.drawer__close i + i { rotate: -45deg; }
.drawer__logo { width: 100%; display: grid; place-items: center; padding: 2rem 1rem; border-radius: var(--r); background: #121316; box-shadow: inset 0 0 0 1px var(--line); }
.drawer__logo img { max-height: 110px; width: auto; max-width: 80%; }
.drawer__note { color: var(--sc-ink-soft); }
.drawer__parts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.drawer__parts a { display: inline-block; text-decoration: none; padding: 0.45rem 0.8rem; font-size: 0.88rem; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line-2); }
.drawer__parts a:hover { box-shadow: inset 0 0 0 1px var(--red-hi); }

/* about */
.about__fig { position: relative; aspect-ratio: 4 / 5; height: min(70svh, 40rem); justify-self: center; }
.about__fig img { width: 100%; height: 100%; object-fit: contain; }
.about__frame i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--line-2); z-index: 1; }
.about__frame i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; }
.about__frame i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.about__frame i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.about__frame i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.story { padding-block: clamp(4rem, 10vh, 7rem); }
.story__text { max-width: 62ch; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.6; margin-left: auto; color: var(--sc-ink); }
.how, .values { padding-block: clamp(3rem, 8vh, 5rem); }
.how__steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 3rem); margin-top: 2.5rem; position: relative; }
.how__steps li { position: relative; padding-top: 2.75rem; display: flex; flex-direction: column; gap: 0.6rem; }
.how__steps li::before { content: ""; position: absolute; left: 0; right: -3rem; top: 1.05rem; height: 1px; background: var(--line); }
.how__steps li:last-child::before { right: 0; }
.how__n { position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; font-family: var(--sc-font-display); font-weight: 700; font-size: 0.95rem; color: #fff; background: var(--red); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); z-index: 1; }
.how__steps h3 { font-family: var(--sc-font-display); font-weight: 700; letter-spacing: -0.015em; font-size: 1.22rem; }
html[data-lang="zh"] .how__steps h3 { font-weight: 700; }
.how__steps p { color: var(--sc-ink-soft); }
.values__list { margin-top: 2rem; }
.values__list div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem 3rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.values__list div:last-child { border-bottom: 1px solid var(--line); }
.values__list dt { font-weight: 600; font-size: 1.05rem; }
.values__list dd { color: var(--sc-ink-soft); }
.band { margin-top: clamp(3rem, 8vh, 5rem); background: var(--red); color: #fff; padding-block: clamp(3.5rem, 9vh, 6rem); --sc-accent: #fff; }
.band__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; }
.band__inner h2 { flex: 1 1 22rem; max-width: 20ch; }
.band__mark { width: 84px; }
.mrlogo--band .mrlogo__s { fill: #fff; }

/* contact */
.contact { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 8vh, 5rem) 6rem; align-items: start; }
.contact__side { display: flex; flex-direction: column; gap: 3rem; }
.contact__block { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.numbers { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }
.numbers li { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.numbers__wa { display: inline-flex; align-items: center; gap: 0.9rem; text-decoration: none; font-family: var(--sc-font-display); font-weight: 700; letter-spacing: -0.01em; font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.2rem); padding: 0.3rem 0; }
.numbers__wa .i-wa { color: #25d366; width: 0.9em; height: 0.9em; }
.numbers__wa:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.numbers__call { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); padding: 0.45rem 0.7rem; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); margin-left: auto; }
.numbers__call:hover { color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.contact__line { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--sc-ink-soft); }
.contact__line .i { margin-top: 0.25em; color: var(--sc-ink); }
.map { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; margin-top: 0.5rem; box-shadow: inset 0 0 0 1px var(--line);
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 32px 32px, #101114; }
.map::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(28deg, transparent 47%, rgba(241,239,236,0.1) 47.5%, rgba(241,239,236,0.1) 49%, transparent 49.5%),
  linear-gradient(-62deg, transparent 58%, rgba(241,239,236,0.07) 58.4%, rgba(241,239,236,0.07) 59.6%, transparent 60%); }
.map__pin { position: absolute; left: 50%; top: 46%; width: 54px; translate: -50% -50%; padding: 10px; background: var(--red); border-radius: 50% 50% 50% 0; rotate: -45deg; box-shadow: var(--sc-e2); }
.map__pin .mrlogo { rotate: 45deg; }
.mrlogo--pin .mrlogo__s { fill: #fff; }
.map__note { position: absolute; left: 1rem; bottom: 0.9rem; }

.enquiry { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r); background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge); display: flex; flex-direction: column; gap: 1.2rem; }
.enquiry__note { color: var(--sc-ink-soft); font-size: 0.92rem; }
.enquiry__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; margin-top: 0.5rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field--wide { grid-column: 1 / -1; }
.field > span { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink-soft); }
html[data-lang="zh"] .field > span { letter-spacing: 0.06em; font-size: 0.85rem; }
.field b { color: var(--red-hi); font-weight: 600; }
.field input, .field textarea {
  width: 100%; padding: 0.85rem 0.95rem; border-radius: var(--r); border: 0; background: #0f1013; color: var(--sc-ink); font-size: 1rem;
  box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow 160ms; resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: #6c6a66; }
.field input:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 36%, transparent); }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--red-hi); }
.field.is-invalid input, .field.is-invalid textarea { box-shadow: inset 0 0 0 2px var(--red-hi); }
.check { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 0.7rem; cursor: pointer; font-size: 0.95rem; }
.check input { width: 18px; height: 18px; accent-color: var(--red); }
.enquiry__send { align-self: flex-start; margin-top: 0.5rem; }
.enquiry__mark { display: none; width: 34px; }
.enquiry__mark .mrlogo__s { fill: #fff; }
.enquiry__send.is-busy .enquiry__mark { display: block; }
.enquiry__send.is-busy .mrlogo__s { animation: mr-lock 420ms var(--ease-lock) both; }
.enquiry__send.is-busy .mrlogo__s--chev { --fx: 0; --fy: -18px; }
.enquiry__send.is-busy .mrlogo__s--legl, .enquiry__send.is-busy .mrlogo__s--legr { --fx: 0; --fy: 18px; animation-delay: 60ms; }
.enquiry__send.is-busy .mrlogo__s--rmain { --fx: 14px; --fy: -14px; animation-delay: 120ms; }
.enquiry__send.is-busy .mrlogo__s--rdiag { --fx: -14px; --fy: 14px; animation-delay: 170ms; }
.enquiry__err { color: var(--red-hi); font-size: 0.9rem; }

/* 404 */
.nf { min-height: calc(100svh - var(--bar-h) - 10rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.4rem; padding-block: 4rem; }
.nf__mark { width: 120px; }
.nf__mark .mrlogo__s--rdiag { transform: translate(18px, 22px) rotate(8deg); }
.nf p { color: var(--sc-ink-soft); max-width: 46ch; }
.nf__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ============================================================= RESPONSIVE */
@media (max-width: 1080px) {
  .bar__nav { display: none; }
  .bar__end { margin-left: auto; }
  .bar__menu { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; }
  .bar__menu i { display: block; width: 24px; height: 2px; background: var(--sc-ink); transition: transform 300ms var(--ease); }
  .bar__menu[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
  .bar__menu[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
  .catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .systems__stage { grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 1fr); grid-template-rows: auto auto 1fr; }
  .systems__index { grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-self: start; }
  .systems__index a { padding: 0.5rem 0; }
  .systems__figure { grid-column: 1; grid-row: 3; }
  .systems__panels { grid-column: 2; grid-row: 3; }
}
@media (max-width: 860px) {
  :root { --bar-h: 64px; }
  .bar__mark { width: 62px; }
  .bar__end .langs { display: none; }
  .hero__copy { top: auto; bottom: clamp(1.5rem, 5vh, 3rem); translate: none; max-width: none; right: var(--gut); }
  .hero__title { font-size: clamp(2.2rem, 1.3rem + 4.6vw, 3rem); }
  .hero__lede { font-size: 0.98rem; margin-top: 1rem; }
  .hero__ctas { margin-top: 1.3rem; }
  .hero__label { margin-bottom: 1rem; }
  .hero__poster { object-position: 76% 50%; }
  .hero__frame { display: none; }
  .hero__job { left: var(--gut); right: var(--gut); width: auto; bottom: 1.5rem; }
  .hero__job h2 { font-size: 1.15rem; }
  .hero__job p { font-size: 0.9rem; margin-top: 0.5rem; }
  .hero__callouts li { font-size: 0.64rem; letter-spacing: 0.1em; }
  .promise__title, .promise__cols { grid-column: 1 / -1; }
  .promise__cols { grid-template-columns: 1fr; }
  .systems__stage { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr) auto; padding-top: calc(var(--bar-h) + 0.75rem); gap: 0.5rem; }
  .systems__title { display: none; }
  .systems__index { grid-row: 1; gap: 0.1rem 1rem; }
  .systems__index a { font-size: 0.68rem; letter-spacing: 0.12em; gap: 0.5rem; }
  .systems__index a i { width: 10px; }
  .systems__figure { grid-column: 1; grid-row: 2 / span 2; }
  .bp { max-height: 50svh; }
  .bp .bp-labels text { font-size: 18px; }
  .systems__panels { grid-column: 1; grid-row: 4; min-height: 15.5rem; }
  .sys { gap: 0.6rem; }
  .sys h3 { font-size: 1.3rem; }
  .sys > p:not(.label) { font-size: 0.95rem; }
  .sys__stock { display: none; }
  .sys__parts a { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
  .range__lead { width: 78vw; }
  .plate { width: 74vw; }
  .range__end { width: 60vw; }
  .brandsrow__head { grid-template-columns: 1fr; }
  .brandsrow__head .link { grid-column: 1; grid-row: auto; justify-self: start; }
  .close__inner { grid-template-columns: 1fr; align-content: center; gap: 2rem; }
  .close__mark { width: min(62%, 15rem); justify-self: start; }
  .close__stage { padding-top: calc(var(--bar-h) + 1rem); }
  .foot__wa { margin-left: 0; }
  .foot__row { gap: 1rem 1.5rem; }
  .catalog__grid { grid-template-columns: 1fr; }
  .wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile__btn { min-height: 160px; }
  .own, .phead--split .phead__inner, .contact { grid-template-columns: 1fr; }
  .how__steps { grid-template-columns: 1fr; gap: 2rem; }
  .how__steps li::before { display: none; }
  .values__list div { grid-template-columns: 1fr; gap: 0.4rem; }
  .enquiry__grid { grid-template-columns: 1fr; }
  .filter { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
  .filter button { flex: none; }
  .filter__count { display: none; }
  .story__text { margin-left: 0; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .hero__lede { display: none; }
}

/* ========================================================= REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .mr-intro .intro * { animation: none !important; }
  .mr-intro .intro { animation: mr-fade-out 300ms ease 450ms both !important; }
  .intro__grid { display: none; }
  .is-leaving .wipe__bar, .mr-arrive .wipe__bar { transition: none !important; transform: none !important; }
  .is-leaving .wipe__bar--red { display: none; }
  .is-leaving .wipe { transition: opacity 150ms; }
  .mr-arrive.is-arrived .wipe { opacity: 0; transition: opacity 200ms; }
  .wipe__mark .mrlogo__s, .catalog__wipe, .enquiry__send.is-busy .mrlogo__s { animation: none !important; }
  .catalog__wipe { display: none; }
  .marquee__track { animation: none; }
  .marquee__row { overflow-x: auto; }
  .bp-sys.is-on .bp-flow path { animation: none; }
  .hero__title .ln > span { transform: none !important; }
  .mrlogo--close .mrlogo__s, .mrlogo--close .mrlogo__plate { transform: none !important; opacity: 1 !important; }
  .btn__fill, .btn__arrow .i, .menu, .menu__nav a, .drawer__panel { transition-duration: 1ms !important; }
}