/* ==========================================================================
   Welkin Ducted Dehumidifiers — merged variant
   Built from the Claude Design prototype "Welkin Dehumidifiers v2.dc.html",
   then merged with v1 at the client's request:

     type and colour  from v1  — the dark ground and v1's section rhythm
                                 (light / light / ink / light / accent, ink footer)
     geometry         from v2  — the radius ladder, gaps and shadows, pill
                                 buttons, round badges, the inset About card,
                                 cards instead of hairline grids

   The one thing the merge had to invent: v2 separates cards with a drop
   shadow, which is invisible on v1's ink sections. There, cards lift by value
   instead — --ink-card against --ink, plus a hairline of light.

   Figtree was v1's typeface but has no Cyrillic; localisation replaced it with
   Manrope, which covers both, plus Cairo for Arabic.
   ========================================================================== */

/* --- Manrope for Latin and Cyrillic, Cairo for Arabic ---------------------
   Both self-hosted, both variable, both split by unicode-range so a visitor
   only downloads the scripts their page actually renders: 38 KB on English,
   54 KB on Russian, 53 KB on Arabic.

   One family covers Latin AND Cyrillic on purpose. Russian pages are full of
   Latin inside the same line — SAV-35L, AED, m² — and Cyrillic shares letter
   shapes with Latin (А В Е К М О Р С Т Х), so two typefaces would show. Arabic
   is different: it looks nothing like Latin, so pairing Cairo with Manrope
   reads as normal typography rather than a mismatch, and keeps the wordmark
   and part numbers identical across all three locales.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* --- tokens -------------------------------------------------------------- */
:root {
  --ink: #0D0D0D;
  --paper: #fff;
  --mist: #F5F5F5;
  /* a deeper step of the same neutral, for cards that sit on white — against
     --paper the plain --mist is only a 4% shift and the card disappears */
  --mist-deep: #EAEAE4;
  --accent: #FEC300;
  --accent-hi: #ffd84d;

  /* v2's geometry separates cards with radii, gaps and a drop shadow. On the
     ink sections a black shadow is invisible, so cards there lift by value
     instead — a step up from the ground, plus a hairline of light. */
  --ink-card: #1A1A1A;
  --ink-hairline: rgba(255, 255, 255, 0.10);

  --gutter: clamp(16px, 4vw, 48px);
  /* The header island's padding is the SAME on all four sides, so the CTA pill
     nests in the rounded corner instead of sitting short of it. That fixes the
     padding but would pull the logo off the content line, so the island's
     clearance from the viewport absorbs the difference: inset + pad = gutter.
     The floor keeps it off the screen edge on phones, where the gutter is only
     4px wider than the padding. */
  --head-pad: 12px;
  --head-inset: max(8px, calc(var(--gutter) - var(--head-pad)));
  --shell: 1320px;
  --section-y: clamp(64px, 9vw, 140px);
  /* Static fallback for the island's bottom edge (top inset + its own height);
     app.js measures the real value from getBoundingClientRect().bottom. Set to
     the LARGEST the island ever gets (36px inset + 70px at desktop) — if the
     script is blocked, erring high costs a little whitespace, erring low tucks
     content under the header. */
  --header-h: 106px;

  /* the radius ladder the prototype uses — tile, card, panel, pill */
  --r-tile: 20px;
  --r-card: 24px;
  --r-media: 28px;
  --r-panel: 32px;
  --r-bleed: clamp(24px, 3vw, 44px);
  --r-pill: 999px;

  --font: Manrope, Cairo, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

img, video { max-width: 100%; }

::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the header floats over the page, so anchored sections need the clearance */
[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

.skip-link {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: -100px;
  z-index: 100;
  background: var(--accent);
  color: var(--ink);
  padding: 14px 22px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: top .2s;
}
.skip-link:focus { top: 12px; color: var(--ink); }

.shell { max-width: var(--shell); margin: 0 auto; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- motion -------------------------------------------------------------- */
@keyframes wk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes wk-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16, .84, .32, 1), transform .8s cubic-bezier(.16, .84, .32, 1);
  will-change: opacity, transform;
}
[data-reveal='in'] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__cta-icon { animation: none !important; }
  .lightbox, .nrhx2g { animation: none !important; }
  .case:hover, .model:hover, .btn--solid:hover { transform: none !important; }
  /* the header still docks, it just snaps rather than travels */
  .header, .mobile-nav { transition: none !important; }
}

/* --- shared section furniture -------------------------------------------- */
.section { padding: var(--section-y) var(--gutter); }
.section--mist { background: var(--mist); color: var(--ink); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--ink { background: var(--ink); color: var(--paper); }

/* the about band is an inset card, not a full-bleed stripe: it pulls in from
   both edges and rounds off, so the page ground shows around it */
.section--accent {
  background: var(--accent);
  color: var(--ink);
  border-radius: var(--r-bleed);
  margin: clamp(12px, 2vw, 28px) clamp(8px, 2vw, 24px);
}

.kicker {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* on the ink section the kicker would inherit plain white — v1 painted it accent */
.kicker--accent { color: var(--accent); }

/* v1 ran a full-width hairline under each kicker; v2 makes it a short pill */
.rule {
  height: 5px;
  width: 64px;
  background: var(--accent);
  border-radius: var(--r-pill);
  margin-bottom: clamp(24px, 3vw, 40px);
}

.section-title {
  margin: 0;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.02;
  font-weight: 800;
  text-transform: uppercase;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.split--lead {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}

/* --- header -------------------------------------------------------------- */
/* A detached, translucent island rather than a full-bleed bar: it pulls in from
   all three edges, rounds off, and the page scrolls underneath and around it.
   The blur is what makes it read as glass instead of a flat panel. */
.header {
  position: fixed;
  top: var(--head-inset);
  left: var(--head-inset);
  right: var(--head-inset);
  /* Capped to the content measure and centred, so the logo keeps sitting on the
     same line as section content past 1320px — otherwise the island runs the
     full viewport while the copy underneath stays boxed. The cap is the shell
     plus the island's own padding on each side, which is what puts its inner
     edge exactly on the content edge. */
  max-width: calc(var(--shell) + 2 * var(--head-pad));
  margin-inline: auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: var(--head-pad);
  /* 0.70 is the floor: the island passes over the hero, over --mist and over
     white, and its 13px nav links need AA at all three. At 0.55 it looks better
     over the hero but drops to 4.3:1 over the white cases section. */
  background: rgba(13, 13, 13, 0.70);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-panel);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
}
/* Once the page scrolls, the island docks: it travels to the top edge, squares
   off and runs full width. Transitions are enabled by app.js on the frame after
   it sets the initial state, so a reload halfway down the page starts docked
   instead of visibly morphing. */
.header.is-ready { transition: top .38s cubic-bezier(.4,0,.2,1), left .38s cubic-bezier(.4,0,.2,1), right .38s cubic-bezier(.4,0,.2,1), max-width .38s cubic-bezier(.4,0,.2,1), padding .38s cubic-bezier(.4,0,.2,1), border-radius .38s cubic-bezier(.4,0,.2,1), background-color .38s, border-color .38s, box-shadow .38s; }
.header[data-stuck] {
  top: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  border-radius: 0;
  /* full-bleed bar, boxed contents: the logo has to stay on the content line,
     and past 1320px that line is the centred shell, not the gutter */
  padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2));
  background: rgba(13, 13, 13, 0.80);
  border-color: transparent transparent rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32);
}
/* inner pages sit on the light --mist ground. A 55%-transparent dark island
   over near-white reads muddy, so those get a near-opaque one — still the
   island, just not see-through. */
.header--solid { background: rgba(13, 13, 13, 0.94); }
/* ...and it has to keep winning once docked: `.header[data-stuck]` outranks a
   lone `.header--solid`, so without this the bar would get MORE transparent
   over the light inner pages the moment it docks */
.header--solid[data-stuck] { background: rgba(13, 13, 13, 0.94); }
/* optical nudge off the island's rounded corner — the curve makes a logo sitting
   flush at the padding read tighter than the CTA does on the right */
/* never let the bar's controls squeeze the wordmark: it is a flex item beside
   them, and without this it loses width first and renders horizontally crushed */
.header__logo { display: flex; align-items: center; margin-inline-start: 0.5em; flex: none; }
.header__logo img { height: 34px; width: auto; display: block; }

/* Centred on the bar itself, not on what space-between leaves over: the logo
   and the actions are different widths, so the flex middle sits left of the
   geometric centre. Taken out of flow, the logo and actions keep their
   space-between placement and the links land on the true centre — in the
   docked state too, where the bar's padding changes. */
.nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
}
.nav a {
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color .2s;
}
.nav a:hover { color: var(--accent); }

.btn-cta {
  background: var(--accent);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 24px;
  white-space: nowrap;
  border-radius: var(--r-pill);
  box-shadow: 0 8px 22px rgba(254, 195, 0, 0.38);
  transition: background .2s, color .2s;
}
.btn-cta:hover { background: var(--paper); color: var(--ink); }

/* stretch, not center: on phones the burger is the taller control, and a
   centred CTA would sit with a bigger gap above and below it than beside it,
   which is exactly the unevenness the equal padding is meant to remove */
.header__actions { display: flex; align-items: stretch; gap: 12px; }
.header__actions .btn-cta { display: inline-flex; align-items: center; }

/* burger — the prototype simply dropped the links below 900px */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: var(--paper);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, background .2s, color .2s;
}
.burger:hover { border-color: var(--accent); background: var(--accent); color: var(--ink); }
.burger__bars { display: block; width: 20px; }
/* fill-box, not the default view-box: a bar has to pivot about its own middle.
   Rotating the top bar about the centre of the 20x20 viewBox — five units below
   it — swings it sideways instead, and the cross lands off-centre against the
   right edge, where `overflow: hidden` clips an arm off. Stating the box and the
   origin also stops the two engines disagreeing about the default. */
.burger__bars rect {
  fill: currentColor;
  transition: transform .25s, opacity .2s;
  transform-box: fill-box;
  transform-origin: center;
}
/* 5px is the gap between a bar and the middle one: it puts both arms on the
   centre line first, so they cross exactly where they are rotated */
.burger[aria-expanded='true'] .burger__bars rect:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__bars rect:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] .burger__bars rect:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* the drop panel is a second island, hung 8px under the first */
.mobile-nav {
  display: none;
  position: fixed;
  top: calc(var(--header-h) + 8px);
  left: var(--head-inset);
  right: var(--head-inset);
  max-width: calc(var(--shell) + 2 * var(--head-pad));
  margin-inline: auto;
  z-index: 59;
  background: rgba(13, 13, 13, 0.94);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-card);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  padding: 4px var(--head-pad) 20px;
}
/* when the bar has docked, the panel docks with it — flush under a full-width
   bar, rounded only along its bottom edge */
.header[data-stuck] + .mobile-nav {
  top: calc(var(--header-h) - var(--head-inset));
  left: 0;
  right: 0;
  max-width: 100%;
  border-radius: 0 0 var(--r-card) var(--r-card);
  padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2));
}
.mobile-nav[data-open] { display: block; }
.mobile-nav a {
  display: block;
  padding: 18px 0;
  color: var(--paper);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-nav a:hover { color: var(--accent); }
/* the panel carries the nav links and the locales only — the bar above it is
   still on screen behind the panel, and it is already holding the CTA */
.mobile-nav > a:last-of-type { border-bottom: 0; }

/* --- language switcher ---------------------------------------------------- */
/* A <details> disclosure sitting beside the CTA. Still real links underneath —
   collapsed by CSS is not the same as absent, so a crawler can walk between the
   locales, and the thing keeps working with JavaScript off. */
/* flex:none for the same reason as the wordmark — as a shrinkable flex item it
   gives up width before the CTA does, and a clipped "EN" is worse than none */
.lang { position: relative; display: flex; align-items: center; flex: none; }

.lang__btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  /* both are needed to lose the disclosure triangle: Safari uses the pseudo
     element, everyone else honours list-style on the summary itself */
  list-style: none;
  transition: border-color .2s, color .2s, background .2s;
}
.lang__btn::-webkit-details-marker { display: none; }
.lang__btn:hover,
.lang[open] .lang__btn { border-color: var(--accent); color: var(--paper); }
.lang__chev { flex: none; transition: transform .25s; }
.lang[open] .lang__chev { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 10px);
  /* logical, so the panel hangs off the same edge of the trigger in Arabic */
  inset-inline-end: 0;
  min-width: 100%;
  display: grid;
  gap: 2px;
  padding: 6px;
  background: rgba(13, 13, 13, 0.94);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-tile);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.lang__menu a {
  padding: 11px 16px;
  border-radius: calc(var(--r-tile) - 6px);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
.lang__menu a:hover { color: var(--ink); background: var(--accent); }
/* the locale you are already reading — flagged, but still a link, because it is
   also the way back to the top of that locale */
.lang__menu a[aria-current] { color: var(--paper); background: rgba(255, 255, 255, 0.12); }
.lang__menu a[aria-current]:hover { color: var(--ink); background: var(--accent); }

/* the flat row that takes over inside the landing page's drop panel */
.lang-row { display: flex; align-items: center; gap: 2px; margin-top: 20px; }
.lang-row a {
  padding: 8px 12px;
  border-radius: var(--r-pill);
  border-bottom: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  transition: color .2s, background .2s;
}
.lang-row a:hover { color: var(--ink); background: var(--accent); }
.lang-row a[aria-current] { color: var(--paper); background: rgba(255, 255, 255, 0.12); }

/* --- hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  color: var(--paper);
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #111;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 13, 13, 0.75) 0%, rgba(13, 13, 13, 0.25) 40%, rgba(13, 13, 13, 0.92) 100%);
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 9vh, 110px);
  text-align: center;
}
.hero h1 {
  margin: 0;
  font-size: clamp(40px, 8.2vw, 116px);
  line-height: 0.92;
  font-weight: 800;
  text-transform: uppercase;
}
/* auto side margins, or the 34ch cap would hold it against the left edge */
.hero__sub {
  margin: 24px auto 0;
  max-width: 34ch;
  font-size: clamp(16px, 1.7vw, 22px);
  line-height: 1.45;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(28px, 4vh, 44px);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn--solid {
  background: var(--accent);
  color: var(--ink);
  border: 0;
  box-shadow: 0 14px 34px rgba(254, 195, 0, 0.34);
}
.btn--solid:hover {
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.3);
}
.btn--outline { color: var(--paper); border: 2px solid rgba(255, 255, 255, 0.45); background: transparent; }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.hero__cta-icon { animation: wk-bob 1.8s ease-in-out infinite; }

/* --- how it works -------------------------------------------------------- */
.how__copy { margin: 0 0 28px; }
.how__body {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: rgba(13, 13, 13, 0.78);
}
/* auto-fit with a floor wide enough for the longest value ("Standalone" —
   129px at the 24px cap, against 139px of content box at 175px). A fixed
   3-column track looks tidier but breaks between 900 and ~1050px, where the
   split is still two columns and a third of it is narrower than the word. */
.traits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
  gap: 14px;
  margin-top: clamp(32px, 4vw, 48px);
}
/* the how section is --mist now, so the tiles go white to keep the step */
.trait {
  background: var(--paper);
  border-radius: var(--r-tile);
  box-shadow: 0 8px 24px rgba(13, 13, 13, 0.06);
  padding: 20px 18px 4px;
}
/* sized so the longest value ("Standalone") fits its column at every width —
   at the old 34px it ran past the card edge */
.trait__value {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 800;
}
.trait__label {
  margin: 6px 0 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.55);
}

.player {
  margin: 0;
  position: relative;
  background: var(--ink);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-media);
  box-shadow: 0 26px 60px rgba(13, 13, 13, 0.18);
}
.player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.player__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 13, 0.28);
  border: 0;
  cursor: pointer;
  transition: opacity .3s;
}
.player.is-playing .player__play { opacity: 0; pointer-events: none; }
.player__play span {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  transition: background .2s;
}
.player__play:hover span { background: var(--paper); }
.player__full {
  position: absolute;
  inset-inline-end: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 13, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--paper);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.player__full:hover { background: var(--accent); color: var(--ink); }

/* --- use cases ----------------------------------------------------------- */
.lead-copy {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: rgba(13, 13, 13, 0.7);
}
/* Fixed column counts rather than the prototype's auto-fit: there are exactly
   six cases, and auto-fit lands on four across at desktop widths, leaving two
   empty cells. On v1's hairline grid those painted as bare background; here
   they are simply holes in the row. 3 / 2 / 1 always fills. */
.cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* cases sit on --paper, so the cards take the deeper neutral: plain --mist on
   white is a 4% step and reads as no card at all */
.case {
  background: var(--mist-deep);
  border-radius: var(--r-card);
  box-shadow: 0 10px 30px rgba(13, 13, 13, 0.10);
  padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2vw, 28px);
  transition: background .25s, transform .25s, box-shadow .25s;
}
.case:hover {
  background: var(--accent);
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(13, 13, 13, 0.14);
}
.case h3 {
  margin: 22px 0 8px;
  font-size: 20px;
  font-weight: 800;
}
.case p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(13, 13, 13, 0.7);
}

.protects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  margin-top: clamp(36px, 5vw, 56px);
}
.protects__label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.55);
}
.protects__list { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- models -------------------------------------------------------------- */
/* this section is ink, so its lead copy reads light-on-dark */
.lead-copy--tight { max-width: 44ch; color: rgba(255, 255, 255, 0.65); }

/* Nine models — same reasoning as .cases; 3 across is the only clean fit. */
.models {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
/* on the ink ground a drop shadow does nothing, so the card lifts by value:
   a step up from #0D0D0D plus a hairline of light along its edge */
.model {
  background: var(--ink-card);
  border: 1px solid var(--ink-hairline);
  border-radius: var(--r-card);
  padding: clamp(26px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  /* Colour flips fast, the lift stays slow. The card travels from near-black to
     saturated yellow, and sRGB interpolation spends most of that journey in
     muddy dark tones — so at .25s the background *reads* as arriving late while
     the labels, which only have to reach black, look instant. Shortening the
     colour legs and front-loading them with ease-out collapses that window. */
  transition: background .14s ease-out, color .14s ease-out, border-color .14s ease-out,
              transform .25s, box-shadow .25s;
}
.model:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}
/* the cards are links to the spec sheets — inherit the section's colour, not
   the global link accent */
a.model { color: inherit; text-decoration: none; }
a.model:hover { color: var(--ink); }
/* label flush left, arrow on the card's right edge */
.model__more {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  /* kept in step with the card's own colour legs above */
  transition: color .14s ease-out;
}
.model__more svg { flex: 0 0 auto; transition: transform .25s; }
.model:hover .model__more { color: var(--ink); }
.model:hover .model__more svg { transform: translateX(5px); }
.model__area {
  margin: 0;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 800;
  line-height: 1;
}
.model__sku {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}
.model__price {
  margin: 14px 0 0;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
}

.models__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.models__vat { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.38); }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color .2s;
}
.link-arrow:hover { color: var(--accent-hi); }

/* --- reels --------------------------------------------------------------- */
.reels-section { padding: var(--section-y) 0; }
.reels-section .shell { padding: 0 var(--gutter); }
.reels__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.reels__nav { display: flex; gap: 10px; }
.reels__nav button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(13, 13, 13, 0.16);
  transition: background .2s, color .2s;
}
.reels__nav button:hover { background: var(--accent); color: var(--ink); }
.reels__nav button[disabled] { opacity: 0.3; cursor: default; box-shadow: none; }
.reels__nav button[disabled]:hover { background: var(--ink); color: var(--paper); }

.reels {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* the cards carry a 36px-blur shadow: without vertical room the overflow
     container clips it flat against the rail edges */
  padding: 14px var(--gutter) 26px;
  /* Start the rail on the content line, not the viewport edge. The bleed off
     the far side is the point — it is what says "this scrolls" — but the near
     side belongs under the heading. .shell is capped at --shell and centred, so
     past that width the plain gutter strands the first card hundreds of pixels
     left of its own title: at 1920 the heading starts at 348 and the card at 48.
     The percentage resolves against the section's width rather than 100vw,
     which would count the scrollbar and overshoot. */
  padding-inline-start: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
  scroll-padding-inline-start: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
}
.reels::-webkit-scrollbar { height: 4px; }
.reels::-webkit-scrollbar-thumb { background: var(--accent); border-radius: var(--r-pill); }
.reels::-webkit-scrollbar-track { background: #ECECEC; border-radius: var(--r-pill); }

.reel {
  flex: 0 0 clamp(230px, 26vw, 320px);
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 9 / 16;
  background: var(--ink);
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--r-media);
  box-shadow: 0 14px 36px rgba(13, 13, 13, 0.14);
}
.reel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.9;
  transition: opacity .25s, transform .4s;
}
.reel:hover img { opacity: 1; transform: scale(1.03); }
.reel__label {
  position: absolute;
  inset-inline-start: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--paper);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: start;
}
.reel__label span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* --- certification ------------------------------------------------------- */
/* Same 3 / 2 / 1 ladder as .cases — the responsive block drives both, so these
   only declare the widest step. */
.certs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(28px, 4vw, 44px);
}
/* These sit on --ink, where the case cards' shadow is invisible, so they take
   the accent outright rather than keeping it for hover. */
.cert {
  display: flex;
  flex-direction: column;
  background: var(--accent);
  color: var(--ink);
  border-radius: var(--r-card);
  padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2vw, 28px);
}
/* All three icons are cut to the same size, so the headings line up without the
   slot having to reserve a height. */
.cert__media { display: block; }
/* The preview sits against the card's outer edge beside the copy, and drops
   below it when the two stop fitting side by side. That is flex-wrap's call,
   not a breakpoint's: the card is a third of the shell at one width and the
   whole of it at another, so the point where the sheet stops fitting does not
   line up with any viewport number worth naming. The row gap only ever applies
   once it has wrapped. */
.cert--doc {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 18px;
}
/* The basis is what decides where the sheet drops below, and it is set by the
   longest thing that must not break: "ОТКРЫТЬ СЕРТИФИКАТ ↗" on one line. Give
   it less and the copy still fits, but the link wraps and leaves its arrow
   stranded. In practice this keeps the two side by side from about 1400 up. */
.cert__body {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
/* Top of the card, level with the icon across the way. Once it has wrapped
   underneath this has nothing left to align against and stops mattering. */
.cert__sheet {
  flex: 0 0 auto;
  align-self: flex-start;
  height: 150px;
  width: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(13, 13, 13, 0.28);
}
.cert h3 {
  margin: 14px 0 8px;
  font-size: 20px;
  font-weight: 800;
}
.cert p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(13, 13, 13, 0.7);
}
/* The whole card is the link; this is the affordance that says so. Pushed to
   the bottom so it holds the card's baseline no matter how the copy wraps. */
.cert__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cert--doc {
  text-decoration: none;
  transition: background .25s, transform .25s, box-shadow .25s;
}
.cert--doc:hover {
  background: var(--accent-hi);
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}
.cert--doc:hover .cert__more svg { transform: translate(2px, -2px); }
.cert__more svg { transition: transform .25s; }

/* --- clients ------------------------------------------------------------- */
.clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  /* Deliberately looser than the other bands' clamp(28px, 4vw, 44px): the logos
     are only 64px of light line art under a 56px heading, so the same gap that
     works under a row of cards reads as crowding here. */
  margin-top: clamp(40px, 5.5vw, 76px);
}
/* Supplied wordmarks come at every aspect ratio — one is 2.6:1, the next is
   square — so capping both dimensions is what keeps a wide one from towering
   over the rest. One shared cap is not enough on its own though. These arrive
   at every ratio — 2.6:1 wordmarks, a 5.85:1 one, a portrait lockup at 0.88:1 —
   and a single height gives the long one half the presence of the others while
   shrinking the tall one to nothing. So --logo-h is a per-file override, set
   from the template, and the sizes behind it are picked to put roughly equal
   AREA on the page rather than equal height. Tune by eye against the artwork;
   the arithmetic only gets you close. */
.clients img {
  max-height: var(--logo-h, 64px);
  max-width: 240px;
  width: auto;
  height: auto;
  display: block;
}

/* --- about --------------------------------------------------------------- */
.about__spacer { height: clamp(20px, 3vw, 36px); }
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(28px, 4vw, 48px);
}
/* v1's treatment, by request: each figure hangs off a 6px ink rule rather than
   floating on a white card. The band itself keeps v2's geometry — inset from
   the page edges and rounded — so only the contents are v1's. */
.stat { border-top: 6px solid var(--ink); padding-top: 22px; }
.stat__num {
  margin: 0;
  font-size: clamp(56px, 9vw, 124px);
  line-height: 0.88;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.about__close {
  margin: clamp(36px, 5vw, 56px) 0 0;
  max-width: 60ch;
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.45;
  font-weight: 600;
}

/* --- footer -------------------------------------------------------------- */
/* the one surface v2 keeps dark — it closes the page against the light ground */
.footer {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(64px, 9vw, 130px) var(--gutter) 40px;
  overflow: hidden;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
/* shown whole — no object-fit, no forced ratio, nothing cropped. Capped at the
   source's own 602px: once the grid collapses to one column the photo would
   otherwise stretch past 800px and upscale. */
.footer__photo {
  width: 100%;
  max-width: 602px;
  height: auto;
  display: block;
  align-self: start;
  border-radius: var(--r-tile);
}
/* the source PNG is an opaque yellow plate out to its own edges, so the radius
   clips the bitmap itself — no mask wrapper needed. 12px is a literal, not a
   --r-* token: those are sized for full tiles, and at the logo's 44px height
   any of them would read as a pill. */
.footer__logo {
  height: 44px;
  width: auto;
  display: block;
  margin-bottom: 26px;
  border-radius: 12px;
}
.footer h2 {
  margin: 0 0 clamp(28px, 4vw, 44px);
  font-size: clamp(34px, 5vw, 68px);
  line-height: 0.98;
  font-weight: 800;
  text-transform: uppercase;
}
.footer__phone {
  display: block;
  color: var(--paper);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  margin-bottom: 10px;
}
.footer__phone:hover { color: var(--accent); }
.footer__email {
  display: block;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  margin-bottom: 28px;
}
.socials { display: flex; gap: 12px; margin-bottom: 34px; }
.socials a {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background .2s;
}
.socials a:hover { background: var(--accent); color: var(--ink); }
.footer__address {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

/* Same arrangement as v1: the storefront photo sits in the contact row, and
   the yellow band runs full width beneath it — copy on the left, QR on the
   right. Only the surface treatment is v2's (radii, no hairlines). */
.showroom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  color: var(--ink);
  background: var(--accent);
  border-radius: var(--r-panel);
  padding: clamp(28px, 3.5vw, 56px);
  margin-top: clamp(36px, 5vw, 72px);
}
.showroom__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.showroom__label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.showroom__copy {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.2;
  font-weight: 800;
}
/* the QR ships black-on-transparent — the white tile gives it both contrast
   and the quiet zone scanners expect */
.showroom__qr {
  display: block;
  flex: 0 0 auto;
  background: var(--paper);
  border-radius: var(--r-tile);
  padding: 14px;
}
.showroom__qr img { display: block; width: clamp(120px, 13vw, 176px); height: auto; }
.showroom__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--accent);
  padding: 16px 26px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}
.showroom__link:hover { background: var(--paper); color: var(--ink); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  margin-top: clamp(48px, 6vw, 90px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.footer__bar p { margin: 0; }
.footer__bar a { color: rgba(255, 255, 255, 0.5); }
.footer__bar a:hover { color: var(--accent); }

/* --- reel lightbox ------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6, 6, 6, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  animation: wk-rise .25s ease-out;
}
.lightbox[hidden] { display: none; }
.lightbox video {
  max-width: min(100%, 440px);
  max-height: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #000;
  border-radius: var(--r-card);
}
.lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  inset-inline-end: clamp(12px, 3vw, 28px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--ink);
  border: 0;
  cursor: pointer;
  transition: background .2s;
}
.lightbox__close:hover { background: var(--paper); }

/* --- cookie notice ------------------------------------------------------- */
/* nrhx2g is the consent panel. The name is meaningless on purpose — see the
   note beside the markup in chrome.mjs. Comments are safe to keep descriptive:
   cosmetic filters match the DOM, not this file. */
.nrhx2g {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--paper);
  color: var(--ink);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-card) var(--r-card) 0 0;
  box-shadow: 0 -14px 44px rgba(13, 13, 13, 0.16);
  padding: 20px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  animation: wk-rise .35s ease-out;
}
.nrhx2g[hidden] { display: none; }
.nrhx2g p { margin: 0; max-width: 62ch; font-size: 14px; line-height: 1.5; }
/* scoped to the copy: an unscoped `.nrhx2g a` also caught the buttons in
   .nrhx2g-row and outranked their own rules — it underlined them, and on
   hover it pinned the label to ink while the background went ink too, leaving
   the label invisible */
.nrhx2g p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.nrhx2g p a:hover { color: var(--ink); }
.nrhx2g-row { display: flex; gap: 10px; }
.nrhx2g-btn {
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.nrhx2g-btn-a {
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
}
.nrhx2g-btn-a:hover { background: var(--ink); color: var(--paper); }
.nrhx2g-btn-b {
  background: var(--accent);
  border: 2px solid var(--accent);
  color: var(--ink);
}
.nrhx2g-btn-b:hover { background: var(--ink); border-color: var(--ink); color: var(--accent); }

/* --- prose pages (privacy, 404) ------------------------------------------ */
.page {
  padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) var(--gutter) clamp(64px, 9vw, 120px);
  background: var(--mist);
  color: var(--ink);
}
.prose { max-width: 74ch; }
.prose h1 {
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-size: clamp(34px, 5vw, 68px);
  line-height: 0.98;
  font-weight: 800;
  text-transform: uppercase;
}
.prose h2 {
  margin: clamp(36px, 4vw, 56px) 0 14px;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
}
.prose p, .prose li { font-size: 16px; line-height: 1.65; color: rgba(13, 13, 13, 0.78); }
.prose p { margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding-inline-start: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); background: var(--accent); }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(13, 13, 13, 0.08);
  padding: 2px 6px;
  border-radius: 6px;
}
.prose strong { color: var(--ink); }
.prose__meta {
  margin: 0 0 clamp(28px, 3vw, 40px);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.55);
}

/* --- product specification sheet ----------------------------------------- */
/* .btn--solid hovers to white, which all but vanishes on the light ground */
.page .btn--solid:hover { background: var(--ink); color: var(--accent); }
.btn--dark { background: var(--ink); color: var(--accent); border: 0; }
.btn--dark:hover { background: var(--accent); color: var(--ink); }

.spec__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.spec__top .rule { margin-bottom: clamp(18px, 2vw, 28px); }
.spec__title {
  margin: 0;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 0.98;
  font-weight: 800;
  text-transform: uppercase;
}
.spec__subtitle {
  margin: 12px 0 0;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600;
  color: rgba(13, 13, 13, 0.68);
}
.spec__download { flex: 0 0 auto; }

.spec__identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
/* v1 framed the figure and the tables in hairlines. v2 has no hairline frames
   anywhere — these become cards on the mist ground, same as .case. */
.spec__figure {
  margin: 0;
  background: var(--paper);
  border-radius: var(--r-media);
  box-shadow: 0 10px 30px rgba(13, 13, 13, 0.07);
  padding: clamp(16px, 2vw, 28px);
}
/* No height cap: there used to be one because the renders were softly
   compressed and carried a lot of baked-in margin, so at full column width the
   unit read as oversized and mushy. The current files are trimmed to the
   product and sharp, so width alone frames them. That does put a condition on
   the artwork — a render with its margin left in will sit small inside a card
   sized for the margin, not the machine. Trim before adding one. */
.spec__figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* separate + overflow so the radius actually clips the corner cells; with
   border-collapse: collapse the corners paint square over it */
.spec-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: 0 10px 30px rgba(13, 13, 13, 0.07);
  overflow: hidden;
  font-size: 15px;
}
/* the row rules are structure, not decoration — they stay, just lighter */
.spec-table tr + tr th,
.spec-table tr + tr td { border-top: 1px solid rgba(13, 13, 13, 0.08); }
.spec-table th,
.spec-table td {
  padding: 14px 18px;
  text-align: start;
  vertical-align: top;
  line-height: 1.4;
}
.spec-table th {
  width: 52%;
  font-weight: 500;
  color: rgba(13, 13, 13, 0.72);
  background: var(--mist);
}
.spec-table td { font-weight: 600; color: var(--ink); }
.spec-table--lead th,
.spec-table--lead td { padding: clamp(18px, 2vw, 26px) 18px; font-size: 16px; }

.spec__section { margin-top: clamp(40px, 5vw, 72px); }
.spec__heading {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
}
.spec__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.spec__cols .spec__heading { margin-top: 0; }

.features {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}
.feature {
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: 0 10px 30px rgba(13, 13, 13, 0.07);
  padding: clamp(20px, 2.4vw, 30px);
}
/* round, like every other accent badge on the site */
.feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  margin-bottom: 16px;
}
.feature h3 {
  margin: 0 0 8px;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.15;
}
.feature p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(13, 13, 13, 0.72); }

.spec__note {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(13, 13, 13, 0.72);
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: 0 10px 30px rgba(13, 13, 13, 0.07);
  border-inline-start: 4px solid var(--accent);
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 26px);
}
.spec__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.spec__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(40px, 5vw, 72px);
}

.error-page {
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  padding: calc(var(--header-h) + 48px) var(--gutter) 64px;
}
/* the shell is a flex item here — without this it shrinks to its content and
   the auto margins centre it, breaking the flush-left grammar */
.error-page > .shell { width: 100%; }
.error-page h1 {
  margin: 0 0 24px;
  font-size: clamp(64px, 16vw, 200px);
  line-height: 0.86;
  font-weight: 800;
}
.error-page p {
  margin: 0 0 clamp(28px, 4vw, 44px);
  max-width: 46ch;
  font-size: clamp(16px, 1.7vw, 22px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
/* the 404 borrows .hero__actions for its button row, but keeps the flush-left
   grammar — the hero's centring must not follow it here */
.error-page .hero__actions { justify-content: flex-start; }

/* --- RTL -------------------------------------------------------------------
   Everything positional is already logical (inset-inline-*, padding-inline-*,
   text-align: start), and grid and flex mirror themselves. What does not mirror
   is artwork: an arrow drawn pointing right still points right in an RTL page,
   where it now means "backwards".

   Mirrored: the arrows that mean "onward" — the Specifications chevron, the
   quote link, the outbound-maps arrow, and the reel rail's prev/next pair.
   Not mirrored: play triangles (media players keep them pointing right in every
   locale), the download arrow and the hero's scroll cue (both vertical), the
   burger, the close cross and the fullscreen corners (all symmetric).
   -------------------------------------------------------------------------- */
[dir="rtl"] .model__more svg,
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .showroom__link svg,
[dir="rtl"] .cert__more svg,
[dir="rtl"] .reels__nav svg { transform: scaleX(-1); }
/* the hover nudge has to travel in the flipped coordinate system, or it would
   slide the wrong way */
[dir="rtl"] .model:hover .model__more svg { transform: scaleX(-1) translateX(5px); }
[dir="rtl"] .cert--doc:hover .cert__more svg { transform: scaleX(-1) translate(2px, -2px); }

/* Latin-script runs that must not be re-ordered by the bidi algorithm. A price
   written "8 767 AED" has a space inside the number, and the range "20 – 50 m²"
   has spaces around a dash; in an RTL paragraph those spaces are neutral, so the
   groups get reversed and you get "AED 767 8" and "m² 50 – 20". `isolate` keeps
   each run as one indivisible LTR island wherever it is embedded. */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- responsive ---------------------------------------------------------- */
/* Below 900 the split collapses, so the traits row gets the full shell and
   auto-fit starts laying out a 4th track that nothing occupies. There are only
   ever three, so pin the count while the row is wide enough to hold them. */
@media (max-width: 900px) and (min-width: 620px) {
  .traits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  /* Landing page only: once the burger is out, the bar is carrying it, the CTA
     and the wordmark, and a fourth control crushes the wordmark — so the
     locales go into the drop panel with the nav links they belong to. Inner
     pages have no burger and no panel, so their switcher stays in the bar and
     is merely tightened below. */
  .header:not(.header--solid) .lang { display: none; }
  .split, .split--lead, .footer__grid { grid-template-columns: 1fr; }
  .cases, .models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Not .certs: cases and models have six items each, so two columns still
     fill. Three would leave a hole in the second row, and a lone card stretched
     over the full shell is mostly empty yellow — so this band holds three
     across until it stacks. The gap tightens to buy the columns the room. */
  .certs { gap: 12px; }
  .cert { padding: 22px 18px; }
  .cert h3 { font-size: 18px; }
  .cert__more { font-size: 11px; letter-spacing: 0.08em; }
  .cert__media svg { width: 60px; height: 60px; }
  .cert__sheet { height: 118px; }
  .spec__identity, .spec__cols { grid-template-columns: 1fr; }
}

/* Three narrow columns stop being readable well before they stop fitting —
   Russian runs longest and is down to five-line paragraphs by 600. So this
   band stacks here, above the 560 the other grids use. */
@media (max-width: 700px) {
  .certs { grid-template-columns: 1fr; gap: 16px; }
  .cert { padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2vw, 28px); }
  .cert h3 { font-size: 20px; }
  .cert__more { font-size: 13px; letter-spacing: 0.14em; }
  .cert__media svg { width: 68px; height: 68px; }
  .cert__sheet { height: 150px; }
}

@media (max-width: 640px) {
  .features { grid-template-columns: 1fr; }
  /* the label column has to give first — some rows carry long spec names */
  .spec-table th { width: 46%; }
  .spec-table th, .spec-table td { padding: 12px 14px; font-size: 14px; }
}

@media (max-width: 560px) {
  .header .btn-cta { padding: 12px 26px; font-size: 12px; }
  .stats, .cases, .models { grid-template-columns: 1fr; }
  /* scales the per-file overrides down with everything else instead of
     flattening them back to one height */
  .clients img { max-height: calc(var(--logo-h, 64px) * 0.75); max-width: 175px; }
}

@media (max-width: 400px) {
  .header { gap: 12px; }
  .header__logo img { height: 28px; }
  .header .btn-cta { padding: 10px 22px; font-size: 11px; letter-spacing: 0.08em; }
  .burger { width: 42px; height: 42px; }
  .lang__btn { padding: 0 11px; gap: 0; }
  .lang__chev { display: none; }
}

/* Below 351 the roomier pill above stops fitting, so it hands the extra padding
   back. Measured on the tightest bar there is — an inner page in Russian, where
   the switcher stays put and the CTA reads "Все модели" — the gap left beside
   the wordmark runs out at 341 and is only 8px at 350, which a fallback font
   would eat. From 351 up it is 10px and climbing, and 19px by 360. */
@media (max-width: 350px) {
  .header .btn-cta { padding-inline: 12px; }
}