/* ==========================================================================
   SHENGCHUAN LONGDI — industrial export design system
   Tokens → primitives → shell → sections → templates → responsive → RTL
   ========================================================================== */

/* ---------------- tokens ---------------- */
:root {
  --ink: #121517;
  --ink-2: #1b2023;
  --graphite: #242a2e;
  --paper: #fbfaf7;
  --white: #ffffff;
  --ash: #ecedE8;
  --ash-2: #e1e3dc;
  --line: #d5d7d0;
  --line-strong: #b9bcb4;
  --muted: #6c716c;
  --muted-2: #8b908a;
  --brand: #6b2c3b;
  --brand-2: #853a4a;
  --signal: #d9541e;
  --ok: #3f6b4e;
  --on-dark: #eef0ec;
  --on-dark-muted: #a7ada8;

  --display: "Archivo", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --arabic: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;

  --r: 2px;
  --maxw: 1320px;
  --pad: clamp(20px, 4vw, 48px);
  --section: clamp(64px, 8vw, 116px);
  --header-h: 78px;
  --ease: cubic-bezier(.2, .6, .2, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

html[lang="ar"] body { font-family: var(--arabic); }

img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, dt, figure { margin: 0; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

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

.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  transform: translateY(-200%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.mono {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--muted); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink-2); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow--light { color: #d9b6bf; }

h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  line-height: 1.03;
  letter-spacing: -.025em;
  font-weight: 600;
  max-width: 22ch;
}

.display-md {
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  font-weight: 600;
}

.section { padding-block: var(--section); }
.section--ash { background: var(--ash); border-block: 1px solid var(--line); }
.section--tight { padding-block: clamp(32px, 4vw, 56px); }

.section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head__lead {
  max-width: 380px;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.6;
}
.section-head--split {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 32px;
  align-items: end;
}
.section-head--split .section-head__lead { justify-self: end; }

/* ---------------- buttons + links ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn svg { flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-2); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--graphite); }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--white); }

.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: #fff; }

.btn--full { width: 100%; }

.btn[disabled],
.btn.is-loading { opacity: .62; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  width: 14px; height: 14px;
  margin-inline-start: 4px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  min-height: 32px;
}
.link-arrow svg { transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
[dir="rtl"] .link-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }

.dot {
  width: 5px; height: 5px;
  background: var(--signal);
  display: inline-block;
  flex: none;
  border-radius: 50%;
}

/* ---------------- topbar + header ---------------- */
.topbar {
  background: var(--ink);
  color: var(--on-dark-muted);
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.topbar__in {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.topbar__tag { display: flex; align-items: center; gap: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__dot { width: 5px; height: 5px; background: var(--signal); border-radius: 50%; flex: none; }
.topbar__meta { display: flex; align-items: center; gap: 22px; }
.topbar__link { display: inline-flex; align-items: center; gap: 7px; color: var(--on-dark); }
.topbar__link:hover { color: #fff; }
.topbar__proof {
  color: var(--on-dark-muted);
  border-inline-end: 1px solid rgba(255, 255, 255, .16);
  padding-inline-end: 22px;
}

.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: rgba(251, 250, 247, .98);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s var(--ease);
}
.header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 12px 28px rgba(18, 21, 23, .07); }
.header__in {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 32px;
}
.header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-inline-start: auto;
}

.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand__mark {
  position: relative;
  width: 40px; height: 40px;
  border: 1px solid var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .02em;
}
.brand__mark i {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-end: -1px;
  width: 9px; height: 9px;
  background: var(--brand);
}
.brand__text { display: flex; flex-direction: column; gap: 2px; }
.brand__text strong {
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .16em;
  white-space: nowrap;
}
.brand__text small {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.brand--footer .brand__mark { border-color: rgba(255, 255, 255, .5); color: #fff; }
.brand--footer .brand__text small { color: var(--on-dark-muted); letter-spacing: .04em; text-transform: none; }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 26px); }
.nav__link {
  position: relative;
  padding: 8px 0;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .2s var(--ease);
}
.nav__link:hover { color: var(--brand); }
.nav__link[aria-current="page"] { color: var(--brand); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__cta { min-height: 44px; padding-inline: 20px; }

.menu-btn {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  place-items: center;
  border-radius: var(--r);
}

/* language */
.lang { position: relative; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding-inline: 10px;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
}
.lang__btn:hover { border-color: var(--line); }
.lang__menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 80;
  width: 190px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(18, 21, 23, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; }
.lang__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  font-size: .85rem;
  text-align: start;
  border-bottom: 1px solid var(--ash);
}
.lang__option:last-child { border-bottom: 0; }
.lang__option:hover { background: var(--ash); }
.lang__option[aria-current="true"] { color: var(--brand); }
.lang__code { color: var(--muted-2); }

/* mobile menu */
.mmenu {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 120;
  width: min(420px, 92vw);
  background: var(--ink);
  color: var(--on-dark);
  padding: 20px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  transform: translateX(0);
  animation: menuIn .24s var(--ease);
}
[dir="rtl"] .mmenu { transform-origin: left; }
@keyframes menuIn { from { opacity: 0; transform: translateX(24px); } }
.mmenu[hidden] { display: none; }
.mmenu__head { display: flex; align-items: center; justify-content: space-between; color: var(--on-dark-muted); }
.mmenu__close { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.mmenu__nav { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, .14); }
.mmenu__link {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: -.01em;
  color: var(--on-dark);
}
.mmenu__link:hover, .mmenu__link[aria-current="page"] { color: #e0aab5; }
.mmenu__langrow { display: flex; gap: 8px; flex-wrap: wrap; }
.mmenu__label { margin-bottom: 10px; font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-muted); }
.chip {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  color: var(--on-dark);
}
.chip.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.mmenu__foot { margin-top: auto; display: flex; flex-direction: column; gap: 18px; }
.mmenu__contact { display: flex; flex-direction: column; gap: 12px; }
.mmenu__link,
.mmenu__contact .mmenu__link { display: flex; align-items: center; gap: 9px; font-size: .8rem; border: 0; padding: 0; color: var(--on-dark-muted); }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(12, 14, 15, .55);
  animation: fadeIn .2s var(--ease);
}
.scrim[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------------- hero ---------------- */
.hero {
  position: relative;
  min-height: clamp(600px, 84vh, 840px);
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 12, 13, .95) 0%, rgba(10, 12, 13, .82) 34%, rgba(10, 12, 13, .35) 66%, rgba(10, 12, 13, .15) 100%),
    linear-gradient(0deg, rgba(10, 12, 13, .85) 0%, rgba(10, 12, 13, 0) 42%);
}
[dir="rtl"] .hero__media::after { transform: scaleX(-1); }

.hero__in { position: relative; z-index: 2; padding-block: 140px 0; }
.hero__content { max-width: 860px; }
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #d5b9bf;
}
.hero__eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--signal); }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5.2vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 600;
  max-width: 15ch;
}
.hero__sub {
  margin-top: 26px;
  max-width: 590px;
  font-size: clamp(.98rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  color: #d3d7d2;
}
.hero__note {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a8aea9;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__actions .btn--light { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
.hero__actions .btn--light:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }

.hero__tag {
  position: absolute;
  inset-inline-end: var(--pad);
  inset-block-end: 132px;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #cfd4cf;
}
.hero__tag::before { content: ""; width: 44px; height: 1px; background: rgba(255, 255, 255, .45); }

.hero__metrics { position: relative; z-index: 2; margin-top: 64px; border-top: 1px solid rgba(255, 255, 255, .22); }
.hero__metrics .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.metric { padding: 22px 0 30px; padding-inline-end: 24px; }
.metric + .metric { border-inline-start: 1px solid rgba(255, 255, 255, .18); padding-inline-start: 24px; }
.metric__value {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -.01em;
  color: #fff;
}
.metric__label {
  display: block;
  margin-top: 6px;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #a9afaa;
  max-width: 20ch;
}

/* ---------------- assurance strip ---------------- */
.assure { border-bottom: 1px solid var(--line); background: var(--paper); }
.assure__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.assure__item { padding: 30px 26px 32px; }
.assure__item + .assure__item { border-inline-start: 1px solid var(--line); }
.assure__num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .16em;
  color: var(--brand);
}
.assure__item h2 { font-family: var(--display); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; max-width: none; }
.assure__item p { margin-top: 8px; font-size: .82rem; line-height: 1.55; color: var(--muted); }

/* ---------------- model families ---------------- */
.families__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 34px); }
.family { border-top: 2px solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; }
.family__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ash); }
.family__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.family:hover .family__media img { transform: scale(1.03); }
.family__media span {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 10px;
  background: rgba(15, 18, 20, .82);
  color: #fff;
  padding: 5px 8px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.family__body { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; flex: 1; }
.family__meta { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.family h3 { font-family: var(--display); font-size: 1.35rem; line-height: 1.15; letter-spacing: -.015em; font-weight: 600; }
.family p { font-size: .87rem; line-height: 1.6; color: var(--muted); }
.family .link-arrow { margin-top: auto; padding-top: 10px; }

/* ---------------- selection guide ---------------- */
.select__grid { display: grid; grid-template-columns: .9fr 1.25fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.select__lead { margin-top: 22px; max-width: 470px; }
.select__points { margin-top: 34px; border-top: 1px solid var(--line); }
.select__point { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.select__point span { font-family: var(--mono); font-size: .62rem; color: var(--brand); padding-top: 4px; }
.select__point h3 { font-family: var(--display); font-size: .98rem; font-weight: 600; }
.select__point p { margin-top: 4px; font-size: .82rem; color: var(--muted); line-height: 1.55; }

.table-scroll { overflow-x: auto; }
.compare { min-width: 620px; }
.compare caption { text-align: start; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; }
.compare th {
  padding: 0 12px 12px;
  text-align: start;
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1.5px solid var(--ink);
  white-space: nowrap;
}
.compare td {
  padding: 15px 12px;
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
  vertical-align: top;
}
.compare tbody tr { transition: background-color .18s var(--ease); }
.compare tbody tr:hover { background: rgba(107, 44, 59, .045); }
.compare td:first-child { font-family: var(--mono); font-size: .74rem; color: var(--ink); }
.compare th:first-child, .compare td:first-child { padding-inline-start: 0; }
.compare .compare__best { color: var(--muted); }

/* ---------------- applications ---------------- */
.apps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-inline-start: 1px solid var(--line);
}
.app-cell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.6vw, 34px);
  min-height: 218px;
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color .2s var(--ease);
}
.app-cell:hover { background: var(--ash); }
.app-cell__num { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; color: var(--brand); }
.app-cell h3 { font-family: var(--display); font-size: 1.2rem; line-height: 1.15; letter-spacing: -.01em; font-weight: 600; }
.app-cell p { font-size: .84rem; line-height: 1.55; color: var(--muted); }
.app-cell__link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.app-cell__link svg { width: 14px; height: 14px; }
[dir="rtl"] .app-cell__link svg { transform: scaleX(-1); }

/* ---------------- deployment profiles ---------------- */
.profiles {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
}
.profiles::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/steel-texture.jpg") center / cover no-repeat;
  opacity: .5;
}
.profiles::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 18, 20, .92), rgba(15, 18, 20, .96));
}
.profiles .wrap { position: relative; z-index: 2; }
.profiles .eyebrow { color: #d6aab4; }
.profiles h2 { color: #fff; max-width: 18ch; }
.profiles__note { margin-top: 14px; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.profiles__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid rgba(255, 255, 255, .18); }
.profile { padding: 28px 28px 34px 0; }
.profile + .profile { border-inline-start: 1px solid rgba(255, 255, 255, .18); padding-inline-start: 28px; }
.profile__num { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; color: #c98a97; }
.profile h3 { margin-top: 22px; font-family: var(--display); font-size: 1.35rem; line-height: 1.15; font-weight: 600; color: #fff; }
.profile__meta { margin-top: 10px; font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; color: #c9cec9; }
.profile p { margin-top: 16px; font-size: .87rem; line-height: 1.6; color: #b6bcb6; }

/* ---------------- workflow ---------------- */
.flow__grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.flow__step { padding: 24px 24px 8px 0; }
.flow__step + .flow__step { border-inline-start: 1px solid var(--line); padding-inline-start: 24px; }
.flow__step span { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; color: var(--brand); }
.flow__step h3 { margin-top: 32px; font-family: var(--display); font-size: 1.05rem; font-weight: 600; }
.flow__step p { margin-top: 8px; font-size: .82rem; line-height: 1.55; color: var(--muted); }

/* ---------------- faq ---------------- */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.faq__aside { position: sticky; top: calc(var(--header-h) + 24px); }
.faq__aside .lead { margin-top: 20px; max-width: 340px; }
.faq__aside .link-arrow { margin-top: 22px; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { position: relative; width: 14px; height: 14px; flex: none; }
.faq-item summary i::before,
.faq-item summary i::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0; width: 14px; height: 1px; background: var(--brand); }
.faq-item summary i::after { transform: rotate(90deg); transition: transform .2s var(--ease); }
.faq-item[open] summary i::after { transform: rotate(0deg); }
.faq-item__body { padding: 0 0 22px; max-width: 62ch; }
.faq-item__body p { font-size: .88rem; line-height: 1.65; color: var(--muted); }

.faq-group { margin-bottom: 54px; }
.faq-group__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.faq-group__head span { font-family: var(--mono); font-size: .62rem; color: var(--brand); }
.faq-group__head h2 { font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; font-family: var(--mono); font-weight: 500; }

/* ---------------- CTA band ---------------- */
.cta-band {
  position: relative;
  background: var(--brand);
  color: #fff;
  padding-block: clamp(54px, 6vw, 82px);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 16px);
  pointer-events: none;
}
.cta-band__in { position: relative; display: grid; grid-template-columns: 1.35fr .65fr; gap: 40px; align-items: end; }
.cta-band .eyebrow { color: #e5c4cb; }
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band__body { margin-top: 18px; max-width: 560px; color: #edd9dd; font-size: .95rem; }
.cta-band__action { justify-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cta-band__note { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: #e5c4cb; }

/* ---------------- footer ---------------- */
.footer { background: #0e1113; color: #c4cac4; padding-top: clamp(48px, 6vw, 76px); }
.footer__top {
  display: grid;
  grid-template-columns: 2.1fr 1fr 1fr 1.35fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.footer__about { margin-top: 22px; max-width: 340px; font-size: .84rem; line-height: 1.65; color: #9fa59f; }
.footer__promise { margin-top: 20px; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #d6aab4; }
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__col h2 {
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7f857f;
  margin-bottom: 8px;
  max-width: none;
}
.footer__col a { font-size: .84rem; color: #c4cac4; transition: color .18s var(--ease); }
.footer__col a:hover { color: #fff; }
.footer__address { display: flex; gap: 8px; margin-top: 6px; font-size: .8rem; color: #9fa59f; }
.footer__address svg { flex: none; margin-top: 3px; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .7rem;
  color: #7f857f;
}

/* ---------------- page hero ---------------- */
.page-hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding-block: clamp(48px, 6vw, 76px) clamp(44px, 5vw, 64px);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../img/factory-building.jpg") center 40% / cover no-repeat;
  opacity: .32;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(12, 15, 17, .96) 0%, rgba(12, 15, 17, .86) 46%, rgba(12, 15, 17, .55) 100%);
}
[dir="rtl"] .page-hero::after { transform: scaleX(-1); }
.page-hero h1 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.4vw, 3.9rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 600;
  max-width: 22ch;
}
.page-hero__sub { margin-top: 20px; max-width: 620px; font-size: 1rem; line-height: 1.65; color: #cdd2cd; }
.page-hero .eyebrow { color: #d6aab4; }
.page-hero__meta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #a7ada8; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 20px;
  font-size: .72rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs span[aria-current] { color: var(--ink); }

/* ---------------- catalogue ---------------- */
.catalog { padding-block: clamp(32px, 4vw, 52px) var(--section); }
.catalog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
  flex-wrap: wrap;
}
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.filter:hover { border-color: var(--ink); }
.filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.catalog__search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: min(320px, 100%);
  border-bottom: 1px solid var(--line-strong);
}
.catalog__search svg { color: var(--muted); flex: none; }
.catalog__search input {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .85rem;
  color: var(--ink);
}
.catalog__search input:focus { outline: none; }
.catalog__search:focus-within { border-color: var(--ink); }
.catalog__count { padding: 16px 0; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.catalog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); row-gap: clamp(36px, 4vw, 56px); }

.model-card { border-top: 1px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; }
.model-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ash); }
.model-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.model-card:hover .model-card__media img { transform: scale(1.03); }
.model-card__code {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 10px;
  background: rgba(15, 18, 20, .84);
  color: #fff;
  padding: 5px 8px;
  font-size: .58rem;
  letter-spacing: .1em;
}
.model-card__body { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; flex: 1; }
.model-card__cat { display: flex; align-items: center; gap: 7px; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.model-card__title { font-family: var(--display); font-size: 1.28rem; line-height: 1.15; letter-spacing: -.015em; font-weight: 600; }
.model-card__title a:hover { color: var(--brand); }
.model-card__summary { font-size: .83rem; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.model-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 4px; }
.model-card__facts dt { font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.model-card__facts dd { margin: 4px 0 0; font-family: var(--mono); font-size: .66rem; color: var(--ink-2); }
.model-card .link-arrow { margin-top: auto; padding-top: 8px; }

.empty {
  border: 1px solid var(--line);
  background: var(--white);
  padding: clamp(32px, 5vw, 64px);
  text-align: center;
}
.empty h2 { font-size: 1.5rem; margin-inline: auto; max-width: none; }
.empty p { margin: 10px auto 22px; color: var(--muted); max-width: 44ch; font-size: .9rem; }

.catalog-note {
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  background: var(--white);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
}
.catalog-note h2 { font-size: clamp(1.3rem, 2vw, 1.8rem); max-width: 28ch; }
.catalog-note p { margin-top: 12px; max-width: 62ch; color: var(--muted); font-size: .87rem; }
.catalog-note .eyebrow { margin-bottom: 12px; }

/* ---------------- product detail ---------------- */
.purchase { padding-block: clamp(26px, 3vw, 44px) clamp(40px, 5vw, 64px); }
.purchase__grid { display: grid; grid-template-columns: 1.3fr .85fr; gap: clamp(32px, 4.5vw, 64px); align-items: start; }
.gallery__main { position: relative; background: var(--ash); aspect-ratio: 4 / 3; overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__nav {
  position: absolute;
  inset-block-end: 12px;
  inset-inline: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gbtn {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  background: rgba(18, 21, 23, .82);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  transition: background-color .18s var(--ease);
}
.gbtn:hover { background: var(--brand); }
.gbtn svg { width: 16px; height: 16px; }
[data-gallery-prev] svg { transform: rotate(180deg); }
[dir="rtl"] [data-gallery-prev] svg { transform: none; }
[dir="rtl"] [data-gallery-next] svg { transform: rotate(180deg); }
.gallery__count {
  padding: 6px 10px;
  background: rgba(18, 21, 23, .82);
  color: #fff;
  font-size: .6rem;
  letter-spacing: .12em;
}
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.gthumb { padding: 0; border: 1px solid transparent; background: var(--ash); aspect-ratio: 4 / 3; overflow: hidden; opacity: .7; transition: opacity .18s var(--ease), border-color .18s var(--ease); }
.gthumb img { width: 100%; height: 100%; object-fit: cover; }
.gthumb:hover { opacity: 1; }
.gthumb.is-active { border-color: var(--brand); opacity: 1; }

.purchase__panel { position: sticky; top: calc(var(--header-h) + 20px); }
.purchase__code { display: flex; align-items: center; gap: 8px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.purchase__title {
  margin-top: 14px;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.03;
  letter-spacing: -.03em;
  font-weight: 600;
}
.purchase__summary { margin-top: 16px; font-size: .93rem; line-height: 1.6; color: var(--muted); }
.purchase__highlights { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.purchase__highlights li { display: flex; gap: 9px; align-items: flex-start; font-size: .82rem; color: var(--ink-2); }
.purchase__highlights svg { color: var(--brand); flex: none; margin-top: 3px; }
.purchase__facts { margin-top: 24px; border-top: 1px solid var(--line); }
.purchase__facts > div { display: grid; grid-template-columns: 132px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.purchase__facts dt { font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); padding-top: 2px; }
.purchase__facts dd { margin: 0; font-size: .76rem; line-height: 1.5; color: var(--ink-2); }
.purchase__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.purchase__note { margin-top: 16px; font-size: .68rem; line-height: 1.5; color: var(--muted-2); }
.trustline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.trustline li {
  padding: 4px 8px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .53rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.subnav {
  position: sticky;
  inset-block-start: var(--header-h);
  z-index: 40;
  background: var(--paper);
  border-block: 1px solid var(--line);
}
.subnav__in { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav__in::-webkit-scrollbar { display: none; }
.subnav a {
  padding: 15px 18px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--ink); }
.subnav a:first-child { padding-inline-start: 0; }
.subnav__cta { margin-inline-start: auto; color: var(--brand) !important; border-bottom-color: var(--brand) !important; display: inline-flex; align-items: center; gap: 6px; }
.subnav__cta svg { width: 14px; height: 14px; }
[dir="rtl"] .subnav__cta svg { transform: scaleX(-1); }

#specs, #overview, #applications, #documents { scroll-margin-top: calc(var(--header-h) + 56px); }

.spec-table th {
  width: 33%;
  padding: 15px 18px;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec-table td { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: .89rem; color: var(--ink-2); vertical-align: top; }
.spec-table tr:hover td, .spec-table tr:hover th { background: rgba(107, 44, 59, .03); }
.specs { max-width: 1040px; }
.specs__note { margin-top: 14px; font-size: .72rem; color: var(--muted-2); }

.split { display: grid; gap: clamp(36px, 5vw, 72px); }
.split--editorial { grid-template-columns: 1.1fr .9fr; align-items: start; }
.split--docs { grid-template-columns: .8fr 1.2fr; align-items: start; }
.split h2 { max-width: 14ch; }
.split .lead { margin-top: 20px; }

.highlights { border-top: 1px solid var(--ink); padding-top: 18px; }
.highlights__label { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.highlights ol { margin-top: 6px; }
.highlights li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.highlights li span { color: var(--brand); font-size: .6rem; padding-top: 3px; }
.highlights li p { font-family: var(--display); font-size: .98rem; line-height: 1.4; }
.highlights__color { margin-top: 18px; display: flex; flex-direction: column; gap: 4px; }
.highlights__color span { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.highlights__color strong { font-size: .82rem; font-weight: 500; }

.fit-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.fit { padding: 22px 24px 22px 0; }
.fit + .fit { border-inline-start: 1px solid var(--line); padding-inline-start: 24px; }
.fit__num { font-family: var(--mono); font-size: .6rem; color: var(--brand); }
.fit h3 { margin-top: 16px; font-family: var(--display); font-size: 1.05rem; font-weight: 600; line-height: 1.3; min-height: 2.7em; }
.fit .link-arrow { margin-top: 10px; font-size: .62rem; }

.docs__hint { margin-top: 22px; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.docs { border-top: 1px solid var(--ink); }
.doc { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.doc > svg { flex: none; color: var(--brand); }
.doc__body { display: flex; flex-direction: column; gap: 3px; margin-inline-end: auto; }
.doc__body strong { font-size: .88rem; font-weight: 500; }
.doc__body span { font-size: .7rem; color: var(--muted); }
.doc__btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); min-height: 40px; }
.doc__btn svg { width: 13px; height: 13px; }
[dir="rtl"] .doc__btn svg { transform: scaleX(-1); }

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 36px); }
.related { border-top: 1px solid var(--ink); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.related__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ash); }
.related__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.related:hover .related__media img { transform: scale(1.03); }
.related__cat { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.related strong { font-family: var(--display); font-size: 1.05rem; font-weight: 600; line-height: 1.25; }
.related .link-arrow { font-size: .6rem; }

.pager { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-top: 22px; }

/* ---------------- applications page ---------------- */
.ap-index { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.ap-index a {
  padding: 8px 12px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ap-index a:hover { border-color: var(--ink); color: var(--ink); }
.ap-list { padding-block: var(--section); }
.ap-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 4vw, 60px); align-items: center; padding-block: clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.ap-row:first-child { padding-top: 0; }
.ap-row__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ash); }
.ap-row__media img { width: 100%; height: 100%; object-fit: cover; }
.ap-row:nth-child(even) .ap-row__media { order: 2; }
.ap-row__num { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; color: var(--brand); }
.ap-row h2 { margin-top: 12px; font-size: clamp(1.5rem, 2.4vw, 2.1rem); max-width: 18ch; }
.ap-row__desc { margin-top: 14px; max-width: 54ch; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.ap-row__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.ap-row__cols h3 { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.cond { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.cond li { display: flex; gap: 8px; font-size: .8rem; color: var(--ink-2); }
.cond svg { flex: none; color: var(--brand); margin-top: 3px; }
.ap-row__reco { margin-top: 12px; font-size: .72rem; color: var(--brand); }
.ap-row__reco-desc { margin-top: 6px; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.ap-row__cols .btn { margin-top: 16px; min-height: 42px; font-size: .62rem; }

/* ---------------- FAQ page ---------------- */
.faq-page { padding-block: var(--section); }
.faq-page .faq-group:last-child { margin-bottom: 0; }

/* ---------------- factory / about ---------------- */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 26px 22px; }
.stat + .stat { border-inline-start: 1px solid var(--line); }
.stat__value { font-family: var(--mono); font-size: clamp(1.3rem, 2.2vw, 1.85rem); font-weight: 500; letter-spacing: -.02em; }
.stat__label { margin-top: 6px; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.split-media { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.split-media h2 { max-width: 16ch; }
.split-media .lead { margin-top: 20px; }
.split-media p + p { margin-top: 14px; }

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.process { padding: 22px 24px 10px 0; }
.process + .process { border-inline-start: 1px solid var(--line); padding-inline-start: 24px; }
.process__num { font-family: var(--mono); font-size: .6rem; color: var(--brand); letter-spacing: .14em; }
.process h3 { margin-top: 28px; font-family: var(--display); font-size: 1.25rem; font-weight: 600; }
.process p { margin-top: 8px; font-size: .83rem; color: var(--muted); line-height: 1.55; }

.qc-list { border-top: 1px solid var(--ink); }
.qc { display: grid; grid-template-columns: 44px 1fr 1.3fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: start; }
.qc span { font-family: var(--mono); font-size: .62rem; color: var(--brand); padding-top: 3px; }
.qc h3 { font-family: var(--display); font-size: .98rem; font-weight: 600; }
.qc p { font-size: .82rem; color: var(--muted); line-height: 1.55; }

.cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--ink); border-inline-start: 1px solid var(--line); }
.cert { padding: 26px; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cert span { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; color: var(--brand); }
.cert h3 { margin-top: 14px; font-family: var(--display); font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
.cert p { margin-top: 8px; font-size: .82rem; color: var(--muted); line-height: 1.55; }

.export-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.export { border-top: 2px solid var(--ink); padding-top: 16px; }
.export span { font-family: var(--mono); font-size: .6rem; color: var(--brand); }
.export h3 { margin-top: 12px; font-family: var(--display); font-size: .98rem; font-weight: 600; }
.export p { margin-top: 6px; font-size: .8rem; color: var(--muted); line-height: 1.55; }

.timeline { border-top: 1px solid var(--ink); }
.tl { display: grid; grid-template-columns: 150px 1fr 1.4fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.tl span { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: var(--brand); }
.tl h3 { font-family: var(--display); font-size: 1rem; font-weight: 600; }
.tl p { font-size: .84rem; color: var(--muted); line-height: 1.55; }

.motto { background: var(--ink); color: #fff; padding-block: clamp(56px, 7vw, 96px); position: relative; overflow: hidden; }
.motto::before { content: ""; position: absolute; inset: 0; background: url("../img/factory-exterior.jpg") center / cover no-repeat; opacity: .16; }
.motto .wrap { position: relative; z-index: 1; }
.motto .eyebrow { color: #d6aab4; }
.motto h2 { font-size: clamp(2rem, 4vw, 3.6rem); max-width: 18ch; color: #fff; }
.motto p { margin-top: 22px; max-width: 640px; color: #c3c9c3; font-size: .95rem; line-height: 1.7; }

.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.value { padding: 22px 24px 22px 0; }
.value + .value { border-inline-start: 1px solid var(--line); padding-inline-start: 24px; }
.value span { font-family: var(--mono); font-size: .6rem; color: var(--brand); }
.value h3 { margin-top: 12px; font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.value p { margin-top: 6px; font-size: .82rem; color: var(--muted); }

/* ---------------- inquiry ---------------- */
.inquiry { padding-block: clamp(32px, 4vw, 52px) var(--section); }
.inq-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(32px, 4.5vw, 64px); align-items: start; }
.inq-form { border: 1px solid var(--line); background: var(--white); padding: clamp(22px, 3vw, 38px); }
.inq-form__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--ink); }
.inq-form__head h2 { font-family: var(--display); font-size: 1.15rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
.inq-form__head span { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field label .req { color: var(--brand); }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--paper);
  font: inherit;
  font-size: .88rem;
  color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-inline-end: 34px; }
[dir="rtl"] .field select { background-position: 18px 21px, 13px 21px; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--brand); }
.field__error { font-size: .68rem; line-height: 1.4; color: var(--brand); }
.field__hint { font-size: .68rem; color: var(--muted-2); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; font-size: .78rem; line-height: 1.5; color: var(--muted); }
.consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--brand); }
.form-error { margin-top: 16px; padding: 10px 12px; border-inline-start: 2px solid var(--brand); background: #f7ecee; color: var(--brand); font-size: .78rem; }
.form-note { margin-top: 14px; font-size: .68rem; color: var(--muted-2); }
.form-actions { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-actions .btn { min-width: 200px; }

.inq-aside { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 26px; }
.aside-block { border-top: 1px solid var(--ink); padding-top: 14px; }
.aside-block h2 { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--muted); max-width: none; }
.aside-block p { margin-top: 10px; font-size: .82rem; line-height: 1.6; color: var(--ink-2); }
.steps { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .8rem; line-height: 1.5; color: var(--ink-2); counter-increment: step; }
.steps li::before { content: "0" counter(step); font-family: var(--mono); font-size: .6rem; color: var(--brand); padding-top: 2px; }
.contact-card { background: var(--ink); color: var(--on-dark); padding: 22px; }
.contact-card h2 { color: #fff; }
.contact-card a { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: .8rem; color: #d6dbd6; }
.contact-card a:hover { color: #fff; }
.contact-card a svg { color: #d6aab4; flex: none; }
.contact-card .aside-note { margin-top: 12px; font-size: .68rem; color: #8f958f; }
.brief { border: 1px solid var(--line); background: var(--paper); padding: 18px; }
.brief h2 { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.brief__body { margin-top: 12px; }
.summary__empty { font-size: .78rem; color: var(--muted-2); line-height: 1.5; }
.brief dl { display: flex; flex-direction: column; gap: 8px; }
.brief dl > div { display: grid; grid-template-columns: 1fr; gap: 1px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.brief dt { font-family: var(--mono); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.brief dd { margin: 0; font-size: .78rem; color: var(--ink-2); word-break: break-word; }
.brief__note { margin-top: 12px; font-size: .64rem; color: var(--muted-2); line-height: 1.5; }

.fallback { border: 1px solid var(--line); border-inline-start: 3px solid var(--brand); background: #fff; padding: 22px; margin-bottom: 22px; }
.fallback h2 { font-family: var(--display); font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; max-width: none; }
.fallback p { margin-top: 8px; font-size: .86rem; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.fallback__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.success { border: 1px solid var(--line); background: #fff; padding: clamp(26px, 4vw, 44px); }
.success__mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--ok); color: var(--ok); border-radius: 50%; }
.success h2 { margin-top: 18px; font-size: clamp(1.6rem, 2.4vw, 2rem); max-width: 20ch; }
.success p { margin-top: 12px; color: var(--muted); font-size: .9rem; max-width: 52ch; }
.success .btn { margin-top: 22px; }

/* ---------------- toast ---------------- */
.toast-region { position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 200; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  max-width: min(380px, calc(100vw - 44px));
  padding: 13px 16px;
  background: var(--ink);
  color: #fff;
  border-inline-start: 3px solid var(--signal);
  font-size: .8rem;
  line-height: 1.5;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.toast.is-open { opacity: 1; transform: none; }

/* ---------------- reveal ---------------- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------------- responsive ---------------- */
@media (min-width: 1180px) {
  .hero__tag { display: flex; }
}

@media (max-width: 1120px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .header__in { gap: 20px; }
  .header__cta { display: none; }
  .topbar__proof { display: none; }
  .catalog__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer__col--contact { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 24px; display: grid; grid-template-columns: repeat(3, auto); gap: 12px 28px; align-items: start; }
  .footer__col--contact h2 { grid-column: 1 / -1; }
  .footer__col--contact .footer__address { margin: 0; }
}

@media (max-width: 980px) {
  :root { --section: clamp(52px, 7vw, 84px); }
  .hero { min-height: 640px; }
  .hero__in { padding-block-start: 90px; }
  .hero__metrics .wrap { grid-template-columns: repeat(2, 1fr); }
  .metric { padding-block: 18px 20px; }
  .metric:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .metric:nth-child(3), .metric:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .18); }
  .assure__grid { grid-template-columns: repeat(2, 1fr); }
  .assure__item:nth-child(3) { border-inline-start: 0; }
  .assure__item:nth-child(3), .assure__item:nth-child(4) { border-top: 1px solid var(--line); }
  .families__grid { grid-template-columns: repeat(2, 1fr); }
  .family:last-child { grid-column: 1 / -1; max-width: calc(50% - 17px); }
  .select__grid { grid-template-columns: 1fr; }
  .section-head--split { grid-template-columns: 1fr; gap: 18px; }
  .section-head--split .section-head__lead { justify-self: start; }
  .apps__grid { grid-template-columns: repeat(2, 1fr); }
  .profiles__grid { grid-template-columns: 1fr; }
  .profile { padding-inline: 0; }
  .profile + .profile { border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, .18); padding-inline-start: 0; }
  .flow__grid { grid-template-columns: repeat(2, 1fr); }
  .flow__step:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .flow__step:nth-child(3), .flow__step:nth-child(4) { border-top: 1px solid var(--line); }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__aside { position: static; }
  .purchase__grid { grid-template-columns: 1fr; }
  .purchase__panel { position: static; }
  .split--editorial, .split--docs { grid-template-columns: 1fr; }
  .fit-grid { grid-template-columns: 1fr 1fr 1fr; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid .related:last-child { display: none; }
  .ap-row { grid-template-columns: 1fr; }
  .ap-row:nth-child(even) .ap-row__media { order: 0; }
  .split-media { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .process:nth-child(3), .process:nth-child(4) { border-top: 1px solid var(--line); }
  .statband { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-inline-start: 0; }
  .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--line); }
  .export-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid { grid-template-columns: 1fr; }
  .value { padding-inline: 0; }
  .value + .value { border-inline-start: 0; border-top: 1px solid var(--line); padding-inline-start: 0; }
  .inq-grid { grid-template-columns: 1fr; }
  .inq-aside { position: static; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .contact-card, .brief { grid-column: 1 / -1; }
  .cta-band__in { grid-template-columns: 1fr; }
  .cta-band__action { justify-self: start; }
  .tl { grid-template-columns: 100px 1fr; }
  .tl p { grid-column: 2; }
}

@media (max-width: 760px) {
  .topbar { display: none; }
  .header__in { min-height: 66px; }
  :root { --header-h: 66px; }
  .brand__text small { display: none; }
  .brand__text strong { font-size: .72rem; letter-spacing: .1em; }
  .brand__mark { width: 34px; height: 34px; }
  .hero { min-height: 560px; }
  .hero__in { padding-block-start: 64px; }
  .hero h1 { max-width: 100%; }
  .hero__sub { font-size: .94rem; }
  .hero__actions .btn { flex: 1 1 180px; }
  .hero__metrics { margin-top: 42px; }
  .families__grid { grid-template-columns: 1fr; }
  .family:last-child { max-width: none; }
  .apps__grid { grid-template-columns: 1fr; }
  .flow__grid { grid-template-columns: 1fr; }
  .flow__step + .flow__step { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--line); }
  .fit-grid { grid-template-columns: 1fr; }
  .fit { padding-inline-end: 0; }
  .fit + .fit { border-inline-start: 0; border-top: 1px solid var(--line); padding-inline-start: 0; }
  .fit h3 { min-height: 0; }
  .related-grid { grid-template-columns: 1fr; }
  .related-grid .related:last-child { display: flex; }
  .ap-row__cols { grid-template-columns: 1fr; gap: 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .doc { flex-wrap: wrap; }
  .doc__btn { margin-inline-start: 32px; }
  .catalog__bar { align-items: stretch; }
  .catalog__search { min-width: 100%; }
  .catalog-note { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__col--contact { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 8px; }
  .inq-aside { grid-template-columns: 1fr; }
  .inq-form__head { flex-direction: column; gap: 4px; }
  .statband { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .process + .process { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--line); }
  .cert-grid { grid-template-columns: 1fr; }
  .export-grid { grid-template-columns: 1fr 1fr; }
  .qc { grid-template-columns: 32px 1fr; }
  .qc p { grid-column: 2; }
  .tl { grid-template-columns: 1fr; gap: 4px; }
  .tl p { grid-column: 1; }
  .subnav a { padding: 14px 12px; }
}

@media (max-width: 560px) {
  .lang__btn { height: 40px; padding-inline: 6px; }
  .lang__btn svg:first-child { display: none; }
  .header__actions { gap: 8px; }
  .hero { min-height: 540px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .metric__label { font-size: .6rem; }
  .assure__grid { grid-template-columns: 1fr; }
  .assure__item + .assure__item { border-inline-start: 0; border-top: 1px solid var(--line); }
  .catalog__grid { grid-template-columns: 1fr; }
  .gallery__thumbs { grid-template-columns: repeat(3, 1fr); }
  .purchase__facts > div { grid-template-columns: 1fr; gap: 2px; }
  .spec-table th { width: 42%; padding-inline: 10px; }
  .spec-table td { font-size: .82rem; }
  .doc__btn { margin-inline-start: 0; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__col--contact { padding-top: 18px; }
  .cta-band__action .btn { width: 100%; }
  .form-actions .btn { width: 100%; }
  .export-grid { grid-template-columns: 1fr; }
  .statband { grid-template-columns: 1fr; }
  .stat + .stat { border-inline-start: 0; border-top: 1px solid var(--line); }
  .stat { padding-inline: 0; }
  .inq-form { padding: 20px 16px; }
  .toast-region { inset-inline: 12px; inset-block-end: 12px; }
  .toast { max-width: none; }
  .pager { flex-direction: column; gap: 10px; }
}

/* ---------------- RTL refinements ---------------- */
[dir="rtl"] .nav__link::after { transform-origin: right; }
[dir="rtl"] .brand__mark i { inset-inline-end: auto; inset-inline-start: -1px; }
[dir="rtl"] .footer__address svg,
[dir="rtl"] .doc > svg { margin-top: 3px; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .hero h1 { letter-spacing: 0; }
[dir="rtl"] .hero h1 { line-height: 1.15; }
[dir="rtl"] .hero__sub, [dir="rtl"] .hero__note, [dir="rtl"] .lead { letter-spacing: 0; }
[dir="rtl"] .mono, [dir="rtl"] .spec-table td.mono, [dir="rtl"] .model-card__code, [dir="rtl"] .purchase__code, [dir="rtl"] .related__cat { unicode-bidi: isolate; }
[dir="rtl"] .field select { background-position: 18px 21px, 13px 21px; }

/* Arabic type scale corrections */
html[lang="ar"] .hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.9rem); line-height: 1.25; max-width: 20ch; }
html[lang="ar"] h2 { line-height: 1.3; max-width: 26ch; }
html[lang="ar"] .purchase__title { line-height: 1.25; }
html[lang="ar"] .meta, html[lang="ar"] .topbar { letter-spacing: 0; }
html[lang="ar"] .btn { letter-spacing: 0; text-transform: none; font-size: .8rem; }
html[lang="ar"] .eyebrow,
html[lang="ar"] .hero__eyebrow { letter-spacing: .02em; text-transform: none; }
html[lang="ar"] .nav__link { letter-spacing: 0; text-transform: none; font-size: .78rem; }
html[lang="ar"] .mmenu__link { font-size: 1.2rem; }
html[lang="ar"] .compare td:first-child { font-size: .7rem; }

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

/* ---------------- print ---------------- */
@media print {
  .topbar, .header, .subnav, .cta-band, .footer, .toast-region, .mmenu, .scrim { display: none !important; }
  body { background: #fff; }
  .hero { min-height: auto; color: #000; }
  .hero__media, .hero__metrics { display: none; }
}

/* ---------------- shell slot + credential row ---------------- */
#site-header { min-height: 116px; }
@media (max-width: 760px) { #site-header { min-height: 66px; } }

.cred { background: var(--paper); padding-block: 22px; border-bottom: 1px solid var(--line); }
.cred__in { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 38px); flex-wrap: wrap; }
.cred span { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cred i { width: 4px; height: 4px; background: var(--line-strong); border-radius: 50%; }
.cred strong { font-family: var(--mono); font-size: .6rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }

.noscript { border: 1px solid var(--line); background: #fff; padding: 20px; margin: 24px auto; max-width: 700px; font-size: .9rem; }
.noscript a { color: var(--brand); text-decoration: underline; }

/* topbar fit corrections */
.topbar__tag, .topbar__proof, .topbar__link span { white-space: nowrap; }
.topbar__meta { flex-wrap: nowrap; }
@media (max-width: 1360px) { .topbar__proof { display: none; } }
@media (max-width: 900px) { .topbar__meta { gap: 14px; } .topbar__link span { font-size: .62rem; } }

/* hero fills the first viewport with proof metrics anchored at the bottom */
.hero { min-height: calc(100svh - 116px); }
.hero__in { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; }
.hero__metrics { margin-top: 0; }
.hero__tag { inset-block-end: 128px; }
@media (max-width: 980px) { .hero { min-height: calc(100svh - 116px); } }
@media (max-width: 760px) { .hero { min-height: calc(100svh - 66px); } .hero__tag { display: none; } }
@media (max-width: 560px) { .hero { min-height: calc(100svh - 66px); } }

/* product overview media */
.overview__media { margin-top: 26px; background: var(--ash); overflow: hidden; }
.overview__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* catalogue configuration tiles */
.model-card--cta {
  background: var(--ink);
  color: #fff;
  border-top: 2px solid var(--brand);
  padding: 22px;
  min-height: 340px;
  justify-content: space-between;
  transition: background-color .22s var(--ease);
}
.model-card--cta:hover { background: var(--graphite); }
.model-card__cta-index { font-size: .68rem; letter-spacing: .14em; color: #c98a97; }
.model-card__cta-body { display: flex; flex-direction: column; gap: 10px; }
.model-card__cta-body strong { font-family: var(--display); font-size: 1.32rem; line-height: 1.15; letter-spacing: -.01em; font-weight: 600; }
.model-card__cta-body p { font-size: .82rem; line-height: 1.6; color: #aeb4ae; }
.model-card--cta .link-arrow { color: #e5c4cb; }

/* keep hero content and proof metrics inside the first viewport */
.hero__in { padding-block: 72px 0; }
.hero__tag { inset-block-end: 156px; }
@media (max-width: 980px) { .hero__in { padding-block: 56px 0; } }
@media (max-width: 760px) { .hero__in { padding-block: 44px 0; } }

/* mobile hero: image band + solid reading surface */
@media (max-width: 760px) {
  .hero { display: block; min-height: 0; }
  .hero__media { position: relative; height: clamp(230px, 52vw, 320px); }
  .hero__media::after {
    background: linear-gradient(0deg, rgba(10, 12, 13, .96) 0%, rgba(10, 12, 13, .55) 30%, rgba(10, 12, 13, .08) 72%);
  }
  .hero__in { padding-block: 26px 0; }
  .hero__content { max-width: none; }
  .hero h1 { font-size: clamp(2.05rem, 8.4vw, 2.7rem); line-height: 1.02; }
  .hero__sub { margin-top: 18px; }
  .hero__note { margin-top: 12px; }
  .hero__actions { margin-top: 24px; }
  .hero__actions .btn { flex: 0 0 auto; }
  .hero__metrics { margin-top: 34px; }
}

/* tablet topbar + model family rhythm */
@media (max-width: 900px) {
  .topbar__tag { display: none; }
  .topbar__in { justify-content: flex-end; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .families__grid { grid-template-columns: 1fr 1fr; }
  .family:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 24px;
    max-width: none;
    align-items: start;
  }
  .family:last-child .family__media { aspect-ratio: 16 / 10; }
  .family:last-child .family__body { padding-top: 0; }
}

/* mobile application index scrolls horizontally inside its own strip */
@media (max-width: 760px) {
  .ap-index { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 18px; }
  .ap-index::-webkit-scrollbar { display: none; }
  .ap-index a { white-space: nowrap; flex: none; }
}

.stat__value, .stat__label { display: block; }
@media (max-width: 560px) {
  .stat { padding: 18px 0; }
  .stat__value { font-size: 1.4rem; }
}

/* ---------------- Simplified Chinese typography ---------------- */
html[lang="zh"] body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "Segoe UI", sans-serif;
}
html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3,
html[lang="zh"] .display-md,
html[lang="zh"] .hero h1,
html[lang="zh"] .purchase__title {
  letter-spacing: 0;
  line-height: 1.2;
}
html[lang="zh"] .hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: 1.16;
  max-width: 20ch;
}
html[lang="zh"] h2 { max-width: 24ch; line-height: 1.24; }
html[lang="zh"] .eyebrow,
html[lang="zh"] .hero__eyebrow {
  letter-spacing: .14em;
  text-transform: none;
}
html[lang="zh"] .nav__link {
  letter-spacing: .03em;
  text-transform: none;
  font-size: .78rem;
}
html[lang="zh"] .btn,
html[lang="zh"] .filter,
html[lang="zh"] .chip {
  letter-spacing: .08em;
  text-transform: none;
  font-size: .8rem;
}
html[lang="zh"] .btn { font-size: .82rem; }
html[lang="zh"] .mmenu__link { font-size: 1.15rem; }
html[lang="zh"] .footer__col h2,
html[lang="zh"] .aside-block h2,
html[lang="zh"] .brief h2,
html[lang="zh"] .inq-form__head span,
html[lang="zh"] .highlights__label,
html[lang="zh"] .ap-row__cols h3 {
  letter-spacing: .12em;
}
html[lang="zh"] .hero__sub { max-width: 34em; }
html[lang="zh"] .model-card__title,
html[lang="zh"] .family h3,
html[lang="zh"] .app-cell h3,
html[lang="zh"] .profile h3 {
  line-height: 1.35;
}
html[lang="zh"] .faq-item summary { font-size: 1.02rem; line-height: 1.55; }
html[lang="zh"] .field label { letter-spacing: .08em; font-size: .64rem; }
html[lang="zh"] .compare td { font-size: .84rem; }

@media (max-width: 760px) {
  html[lang="zh"] .hero h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
}

/* aside contact card heading uses the utility label scale, not the section H2 */
.contact-card h2 {
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  max-width: none;
}
html[lang="zh"] .contact-card h2 { letter-spacing: .12em; }

/* gallery thumbs: fill the row for 3- or 4-image models */
.gallery__thumbs { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }

/* Chinese secondary-page headlines keep a natural line length */
html[lang="zh"] .page-hero h1 {
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.28;
  max-width: 18ch;
}
html[lang="zh"] .page-hero__sub { max-width: 32em; }