/* ==========================================================================
   Welkin — welkingulf.ae
   One stylesheet for the whole site: front page, equipment, dehumidifiers,
   solutions, team, the spec sheets and the prose pages. It began as the
   dehumidifier landing's sheet — the "merged variant" below — and the other
   pages were built on the same tokens; what each of them adds on its own sits
   in a labelled section further down.

   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); }
/* the page you are on: marked, still a link — it is also the way back to the
   top of that page */
.nav a[aria-current], .mobile-nav a[aria-current] { 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;
  /* The floor is set by the longest single word a title carries on a 375px
     phone: "КОНДИЦИОНЕРНОЕ" and "AIR CONDITIONING" run past the gutters at
     40px and just fit at 31, which is what 8.2vw gives there. */
  font-size: clamp(30px, 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; }

/* ==========================================================================
   solutions — the advantages band and the stage path exist nowhere else
   ========================================================================== */
/* --- hero without footage ------------------------------------------------ */
/* The hero is built around a video. Until one is supplied it falls back to flat
   ink, which reads as a deliberate title card rather than a hole — the scrim
   alone over nothing would just be a slightly-off black. */
.hero--flat { background: var(--ink); }
.hero--flat .hero__scrim { background: none; }

/* --- advantages ---------------------------------------------------------- */
/* Five items, so an auto-fit grid lands on three across and leaves two on the
   second row. That reads fine here and would not in a row of cards: these are
   text blocks on the section's own ground, and a short last row looks like
   prose ending, not like a missing tile. */
/* The track floor is set by the longest headline, not by the body copy: these
   are single words at 48px that cannot break, and Russian runs longer than
   English — "СОГЛАСОВАННО" needs about 340px and overflowed a 280px track. */
.adv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 4vw, 56px) clamp(28px, 3vw, 48px);
  margin-top: clamp(40px, 5vw, 72px);
}
/* v1's treatment, borrowed from .stat: each block hangs off a heavy rule rather
   than floating. It is what ties this band to the counters further down. */
.adv__item { border-top: 6px solid var(--ink); padding-top: 20px; }
.adv__big {
  margin: 0 0 12px;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  /* A longer word in some future locale must shrink or break rather than run
     out of the column — a headline that overflows is silent, it just looks like
     a design that never considered it. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.adv__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(13, 13, 13, 0.7);
  max-width: 42ch;
}

/* --- stages -------------------------------------------------------------- */
.stages {
  list-style: none;
  margin: clamp(40px, 5vw, 72px) 0 0;
  padding: 0;
}
/* Three columns: copy, the rail carrying the route, copy. The route runs down
   the middle of the band and the stages alternate sides around it, so the full
   shell is used instead of one narrow column hard against the left edge with
   half the page empty beside it. Both bodies are placed into row 1 by grid, so
   the markup can stay in reading order — number, then text — whichever side the
   text ends up on. */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail) minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 40px);
  padding-bottom: var(--gap);
  --rail: 120px;
  --dot: 56px;
  /* The connector's length is derived from this, so the two cannot drift */
  --gap: clamp(30px, 4vw, 52px);
}
.stage:last-child { padding-bottom: 0; }

.stage__rail { position: relative; grid-column: 2; grid-row: 1; }
.stage__num {
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 20px rgba(13, 13, 13, 0.14);
}

/* Spans the gap the copy leaves behind it, from the bottom of this circle to
   the top of the next. The bow bulges toward whichever side the next stage's
   text sits on, which is what makes the route read as winding rather than as a
   dropped vertical line. */
/* Height is computed, not stretched with top+bottom. An <svg> is a REPLACED
   element: given both offsets it ignores the second and takes its height from
   the viewBox ratio instead — 120px wide over a 64:100 box came out 187.5px
   tall, so the route sailed straight past the next circle and kept going. An
   explicit height has no such escape hatch.
   The rail ends where the copy does, but the next circle is a --gap below that,
   so the connector has to overrun its own box by exactly that much. */
.stage__link {
  position: absolute;
  top: var(--dot);
  height: calc(100% - var(--dot) + var(--gap));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: var(--rail);
  color: rgba(13, 13, 13, 0.28);
  overflow: visible;
}
.stage[data-side="b"] .stage__link { transform: translateX(-50%) scaleX(-1); }

.stage__body { grid-row: 1; padding-top: 10px; }
.stage[data-side="a"] .stage__body { grid-column: 1; text-align: end; }
.stage[data-side="b"] .stage__body { grid-column: 3; }
.stage__body h3 {
  margin: 0 0 6px;
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 800;
}
.stage__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(13, 13, 13, 0.66);
  max-width: 46ch;
}
/* Right-aligned copy has to hug the rail, not the shell's outer edge — without
   this the measure caps the width and leaves the paragraph stranded away from
   the circle it belongs to. */
.stage[data-side="a"] .stage__body p { margin-inline-start: auto; }

/* --- use cases ----------------------------------------------------------- */
.uses {
  list-style: none;
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* Deliberately the same card as dehumid's .case — icon, label, lift and turn
   accent on hover — so the two sites read as one system. The band sits on
   --mist here rather than --paper, so the card takes plain white and the
   shadow does the separating. */
.use {
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: 0 10px 30px rgba(13, 13, 13, 0.07);
  padding: clamp(22px, 2.4vw, 32px) clamp(18px, 2vw, 26px);
  color: var(--ink);
  transition: background .25s, transform .25s, box-shadow .25s;
}
.use:hover {
  background: var(--accent);
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(13, 13, 13, 0.14);
}
/* Not a heading: these are labels with nothing underneath them, and putting
   nine h3s in the outline would claim a structure the section does not have. */
.use__label {
  margin: 18px 0 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}


/* ==========================================================================
   shared page furniture the multi-page site added
   ========================================================================== */

/* the rule under a kicker is accent; on the accent band itself it vanishes */
.rule--ink { background: var(--ink); }
/* lead copy on the accent band: ink, not the grey the light grounds use */
.lead-copy--ink { color: rgba(13, 13, 13, 0.72); }

/* copy | picture, or picture | copy. The markup stays copy-first so the
   heading comes before its illustration in reading order; grid moves it. */
.split--flip > :first-child { grid-column: 2; grid-row: 1; }
.split--flip > :last-child { grid-column: 1; grid-row: 1; }

/* A picture in a rounded tile. The product shots came with a rounded panel
   of their own baked in — a soft-edged frame that sat inside this crisp one
   and read as two frames — so they are shaved past it (18px a side at
   source) and the tile alone draws the edge: this radius, a hairline, and a
   shadow. The hairline is what separates a near-white panel from the mist
   ground; on ink it vanishes into the shadow. Vertically centred against
   copy of any length; the picture never stretches. */
.media {
  margin: 0;
  align-self: center;
  border-radius: var(--r-media);
  border: 1px solid rgba(13, 13, 13, 0.08);
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(13, 13, 13, 0.14);
  background: var(--mist-deep);
}
.media img { display: block; width: 100%; height: auto; }
.media--ink { box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5); background: var(--ink-card); }
/* a portrait keeps to a sensible width rather than filling half the shell */
.media--portrait { max-width: 440px; justify-self: center; }

/* ==========================================================================
   front page
   ========================================================================== */

/* four traits, not three: the row is the full shell here, not half a split */
.traits--four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* Direction cards. Three today, a fourth expected: auto-fit at this floor
   gives three across on the shell and re-flows to two-and-two at 4, which is
   the right shape for either count — a row of four at 1320 would be 300px
   cards, too narrow for the picture to say anything. */
.dirs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 20px;
  margin-top: clamp(28px, 4vw, 44px);
}
/* the same card as .case, with a picture on top; the whole card is the link */
.dir {
  display: flex;
  flex-direction: column;
  background: var(--mist-deep);
  color: var(--ink);
  border-radius: var(--r-card);
  box-shadow: 0 10px 30px rgba(13, 13, 13, 0.10);
  overflow: hidden;
  transition: background .25s, transform .25s, box-shadow .25s;
}
.dir:hover {
  background: var(--accent);
  color: var(--ink);
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(13, 13, 13, 0.14);
}
.dir__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink); }
.dir__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.dir:hover .dir__media img { transform: scale(1.04); }
.dir__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2vw, 28px);
}
.dir h3 { margin: 0 0 8px; font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; line-height: 1.15; }
.dir p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(13, 13, 13, 0.7); }
.dir__more {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dir__more svg { flex: 0 0 auto; transition: transform .25s; }
.dir:hover .dir__more svg { transform: translateX(5px); }

/* The team band: title and paragraph on the left, the faces on the right,
   the two centred on each other. The faces are round portraits overlapping
   like a stack of coins, wrapping into a second row when the column is too
   narrow for eleven, with the link text underneath. One link for the lot —
   the faces carry no names here, that is the team page's job. */
.team-band {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.team-band__body { margin-top: clamp(20px, 2.5vw, 32px); max-width: 52ch; }
.faces {
  --face: clamp(56px, 6.4vw, 92px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  color: var(--ink);
}
/* two rows, both flush left, the second tucked slightly under the first */
.faces__row { display: flex; padding-inline-end: 18px; }
.faces__row + .faces__row { margin-top: -10px; }
.faces__more { margin-top: 26px; }
.faces img {
  width: var(--face);
  height: var(--face);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid var(--accent);
  background: var(--ink);
  margin-inline-end: -18px;
  transition: transform .25s;
}
.faces:hover img { transform: translateY(-4px); }
.faces__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.faces__more svg { transition: transform .25s; }
.faces:hover .faces__more svg { transform: translateX(5px); }

/* ==========================================================================
   equipment
   ========================================================================== */

/* the category jump links under the intro: pills, one per band */
.types {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(8px, 1vw, 12px);
}
/* accent by the client's call: these five are the way into the catalogue and
   should read as the page's one call to action. The shadow is the accent's
   own colour, as on .btn--solid, so it warms rather than greys the ground. */
.type {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--ink);
  padding: 14px 22px;
  border-radius: var(--r-pill);
  box-shadow: 0 10px 26px rgba(254, 195, 0, 0.30);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background .2s, color .2s, transform .2s;
}
/* hover inverts to ink, the way .btn--dark does — going lighter from accent
   reads as disabled, and staying accent leaves the pill with no feedback */
.type:hover { background: var(--ink); color: var(--accent); transform: translateY(-2px); }
.type svg { transition: transform .25s; }
.type:hover svg { transform: translateX(4px); }

.category__copy { max-width: 60ch; }
.category__body {
  margin: 0 0 16px;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: rgba(13, 13, 13, 0.75);
}
.section--ink .category__body { color: rgba(255, 255, 255, 0.72); }
.category__copy .section-title { margin-bottom: clamp(20px, 2.5vw, 30px); font-size: clamp(26px, 3vw, 44px); }
.category__copy .link-arrow { margin-top: 8px; }
/* on the light grounds the accent link is too pale against white: ink it */
.section--paper .link-arrow, .section--mist .link-arrow { color: var(--ink); }
.section--paper .link-arrow:hover, .section--mist .link-arrow:hover { color: var(--ink); opacity: 0.7; }

.catalog { margin-top: clamp(40px, 5vw, 72px); }
.catalog .kicker { margin-bottom: clamp(20px, 2.5vw, 32px); }
.group + .group { margin-top: clamp(28px, 3.5vw, 44px); }
.group__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.group__title { margin: 0; font-size: clamp(18px, 1.7vw, 22px); font-weight: 800; }
/* the group's own picture, small — a wall unit and a cassette look alike at
   thumbnail size until they are next to each other */
.group__thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--mist-deep);
}
.section--ink .group__thumb { background: var(--ink-card); }
.group__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The model cards. .model on the dehumidifier page is a link to a spec sheet;
   these are not links yet — the per-model pages come later — so they take
   the card's look without its hover lift. Four across on the shell; a priced
   card is a shade taller, so the priced grids are one column narrower. */
.units {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.units--dense { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.unit {
  background: var(--paper);
  border-radius: var(--r-tile);
  box-shadow: 0 8px 24px rgba(13, 13, 13, 0.06);
  padding: clamp(18px, 2vw, 24px) clamp(16px, 1.8vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.section--ink .unit { background: var(--ink-card); border: 1px solid var(--ink-hairline); box-shadow: none; }
.unit__cap { margin: 0; font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; line-height: 1; }
.unit__cap-unit { font-size: 0.5em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.unit__sku {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  overflow-wrap: anywhere;
}
.unit__price { margin: 12px 0 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; }
/* a card with a spec sheet behind it is a link, and takes .model's hover —
   the lift and the turn to accent — so the two kinds of card tell apart */
.unit--link { color: inherit; cursor: pointer; transition: background .14s ease-out, color .14s ease-out, transform .25s, box-shadow .25s; }
.unit--link:hover { background: var(--accent); color: var(--ink); transform: translateY(-6px); box-shadow: 0 20px 44px rgba(13, 13, 13, 0.14); }
.section--ink .unit--link:hover { border-color: var(--accent); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45); }
.unit__more {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.6;
}
.section--ink .unit__more { color: var(--accent); opacity: 1; }
.unit--link:hover .unit__more { color: var(--ink); opacity: 1; }
.unit__more svg { flex: 0 0 auto; transition: transform .25s; }
.unit--link:hover .unit__more svg { transform: translateX(4px); }
.section--paper .models__vat, .section--mist .models__vat { color: rgba(13, 13, 13, 0.45); }

/* ==========================================================================
   team
   ========================================================================== */

/* the opening band sits under the floating header, so it clears it itself */
.team-hero { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); }
.team-hero__title { font-size: clamp(48px, 8vw, 116px); line-height: 0.92; }
.team-hero__intro {
  margin: clamp(24px, 3vw, 40px) 0 0;
  max-width: 64ch;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
/* mission and values: two cards on the ink ground, lifted by value */
.creed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 18px;
  margin-top: clamp(36px, 5vw, 64px);
}
.creed__item {
  background: var(--ink-card);
  border: 1px solid var(--ink-hairline);
  border-radius: var(--r-card);
  padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2vw, 28px);
}
.creed__label {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.creed__text {
  margin: 0;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.3;
  font-weight: 700;
}

.founder__body {
  margin: 0 0 16px;
  max-width: 58ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: rgba(13, 13, 13, 0.75);
}
.founder .section-title { margin-bottom: clamp(20px, 2.5vw, 30px); }

/* Ten people. Five across fills two rows exactly; below that the ladder is
   4 / 3 / 2, and ten divides by two, so it never ends on a lone portrait
   except at three across. */
.people {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.person__photo {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-tile);
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 30px rgba(13, 13, 13, 0.12);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.person:hover .person__photo img { transform: scale(1.04); }
.person__name { margin: 16px 0 4px; font-size: 18px; font-weight: 800; line-height: 1.2; }
.person__role { margin: 0; font-size: 14px; line-height: 1.4; color: rgba(13, 13, 13, 0.7); }
.person__langs { margin: 8px 0 0; font-size: 12px; letter-spacing: 0.04em; color: rgba(13, 13, 13, 0.5); }

/* eight values, the same card as .use: white on mist, accent on hover */
.values {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.value {
  background: var(--paper);
  border-radius: var(--r-card);
  box-shadow: 0 10px 30px rgba(13, 13, 13, 0.07);
  padding: clamp(22px, 2.4vw, 32px) clamp(18px, 2vw, 26px);
  transition: background .25s, transform .25s, box-shadow .25s;
}
.value:hover { background: var(--accent); transform: translateY(-6px); box-shadow: 0 20px 44px rgba(13, 13, 13, 0.14); }
.value h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; line-height: 1.25; }
.value p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(13, 13, 13, 0.7); }

/* --- blog ---------------------------------------------------------------- */
/* the list opens like the team page — ink hero, the client's intro — but its
   title is a sentence, not a word, so it stays at the section-title size */
.blog-hero__title { max-width: 22ch; }

/* the same card as .dir, with a banner on top: the covers came from Tilda at
   4:1, and the card crops that to 2:1 rather than showing a strip of image */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 20px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--mist-deep);
  color: var(--ink);
  border-radius: var(--r-card);
  box-shadow: 0 10px 30px rgba(13, 13, 13, 0.10);
  overflow: hidden;
  transition: background .25s, transform .25s, box-shadow .25s;
}
.post-card:hover {
  background: var(--accent);
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(13, 13, 13, 0.14);
}
.post-card__media { display: block; aspect-ratio: 2 / 1; overflow: hidden; background: var(--ink); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2vw, 28px);
}
.post-card__date { display: block; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(13, 13, 13, 0.5); }
.post-card h2 { margin: 0 0 10px; font-size: clamp(19px, 1.7vw, 23px); font-weight: 800; line-height: 1.2; }
.post-card p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(13, 13, 13, 0.7); }
.post-card__more {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.post-card__more svg { flex: 0 0 auto; transition: transform .25s; }
.post-card:hover .post-card__more svg { transform: translateX(5px); }

/* one post: a prose page with the banner between the title and the text */
.post { max-width: 860px; }
.post__crumb {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.post__crumb a, .post__crumb time, .post__crumb span { color: rgba(13, 13, 13, 0.55); text-decoration: none; }
.post__crumb a:hover { color: var(--ink); }
.post__title {
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.04;
  font-weight: 800;
}
.post__cover {
  margin: 0 0 clamp(28px, 3.5vw, 44px);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink);
}
.post__cover img { display: block; width: 100%; height: auto; }
.post__body { max-width: 74ch; }
/* the posts' sub-headings sit closer than the policy's — they head a
   paragraph or two, not a clause */
.post__body h2 { margin-top: clamp(28px, 3vw, 40px); }
.prose ol { margin: 0 0 16px; padding-inline-start: 22px; }
.prose h2:first-child { margin-top: 0; }
.post__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 24px;
  border-top: 1px solid rgba(13, 13, 13, 0.12);
}
.post__byline { margin: 0; font-size: 15px; color: rgba(13, 13, 13, 0.6); }
.post__byline a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.post__byline a:hover { background: var(--accent); }
.page .post__back { color: var(--ink); }
.page .post__back:hover { color: var(--ink); opacity: 0.7; }

/* --- responsive: the pages above ------------------------------------------ */
@media (max-width: 1100px) {
  .people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .team-band { grid-template-columns: 1fr; }
  /* the flipped split stacks like the plain one: copy first, picture under */
  .split--flip > :first-child, .split--flip > :last-child { grid-column: 1; grid-row: auto; }
  .media--portrait { justify-self: start; }
  .units { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .people, .values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people, .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group__head { align-items: flex-start; }
}
@media (max-width: 400px) {
  /* two narrow cards beat one long column — VRF alone lists 29 models — so
     the part code gives up tracking rather than the grid giving up a column */
  .units, .units--dense { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .unit { padding: 16px 14px; }
  .unit__sku { font-size: 11px; letter-spacing: 0.04em; }
  .values { grid-template-columns: 1fr; }
}

/* --- 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)); }
}

/* Three section links plus the wordmark, the switcher and the CTA need more
   than 900px: in Russian the links alone run to 340px and start under the
   wordmark at about 940. So the nav folds earlier than the grids below do. */
@media (max-width: 980px) {
  .nav { display: none; }
  .burger { display: flex; }
  /* 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. Every page has the panel
     now, the inner ones included. */
  .header .lang { display: none; }
}
@media (max-width: 900px) {
  .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; }
}

/* --- responsive: solutions ---------------------------------------------- */
@media (max-width: 900px) {
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below this the side columns are too narrow to hold a heading and a sentence,
   so the route moves to the left edge and every stage reads down one side —
   the same layout the band had before, kept for where it is the right one. */
@media (max-width: 860px) {
  .stage { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .stage__rail { grid-column: 1; }
  .stage[data-side="a"] .stage__body,
  .stage[data-side="b"] .stage__body { grid-column: 2; text-align: start; }
  .stage[data-side="a"] .stage__body p { margin-inline-start: 0; }
  .stage__body p { max-width: 52ch; }
}

@media (max-width: 700px) {
  .stage { --rail: 84px; --dot: 46px; }
  .stage__num { font-size: 18px; }
}

@media (max-width: 560px) {
  .uses { grid-template-columns: 1fr; }
  .adv__item { border-top-width: 5px; }
}