/* ==========================================================================
   Globalize Winner — premium industrial minimalism
   White / warm white · deep navy & graphite · restrained metallic gold
   ========================================================================== */

:root {
  --ink: #0a1a30;
  --ink-2: #12263f;
  --graphite: #1d242e;
  --warm: #faf8f4;
  --warm-2: #f2eee7;
  --paper: #ffffff;
  --gold: #b8934c;
  --gold-2: #d9bd7e;
  --gold-soft: #f0e6cf;
  --amber: #b0611c;
  --amber-soft: #f6e7d5;
  --muted: #5d6875;
  --muted-2: #8b95a1;
  --line: #e5e0d6;
  --line-dark: rgba(255, 255, 255, .16);

  /* Inter stands right behind Manrope, which has no Қ Ә Ө Ұ (Kazakh) and no
     Ə (Azerbaijani): without it those single letters dropped to the reader's
     own system face and stood out inside the word. Inter is already loaded
     for body copy and sits far closer to Manrope than any system font. */
  --display: 'Manrope', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --radius: 2px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow-sm: 0 2px 10px rgba(10, 26, 48, .06);
  --shadow-md: 0 18px 44px -24px rgba(10, 26, 48, .38);
  --shadow-lg: 0 40px 80px -40px rgba(10, 26, 48, .5);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }
svg { width: 1em; height: 1em; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.1em; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 800;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Use wide monitors instead of capping the site in a narrow centre column.
   Desktop gutters stay around 1–2 cm; phones keep comfortable compact edges. */
.shell { width: 100%; margin: 0 auto; padding-inline: clamp(20px, 3.5vw, 76px); }

/* ---------- shared bits ------------------------------------------------- */

.eyebrow {
  font-family: var(--display);
  font-size: .74rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px;
  max-width: 100%; overflow-wrap: anywhere;
}
.eyebrow::before {
  content: ''; width: 34px; height: 1px; background: currentColor; opacity: .7;
  flex: 0 0 34px;
}
.eyebrow--plain::before { display: none; }
.eyebrow--light { color: var(--gold-2); }

.section { padding: clamp(56px, 8vw, 110px) 0; }
.section--warm { background: var(--warm); }
.section--tint { background: linear-gradient(180deg, var(--warm) 0%, var(--paper) 100%); }
.section--dark { background: var(--ink); color: #d7dde5; }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--tight { padding: clamp(40px, 5vw, 68px) 0; }
/* ⛔ His word 24.09: equal gaps between all sections. Where the colour changes,
   the edge of the colour splits the air in two and each half reads as one gap.
   Two sections of the SAME colour have no edge between them, so the bottom
   padding of the first and the top padding of the second added up into one
   hole twice the size (226px at 1536, between the chain of work and the
   industries). The second one gives up its top padding, so a same-colour seam
   is one gap, like every other. */
.section:not(.section--warm):not(.section--tint):not(.section--dark):not(.rfq)
  + .section:not(.section--warm):not(.section--tint):not(.section--dark):not(.rfq),
.section--warm + .section--warm,
:is(.section--dark, .rfq) + :is(.section--dark, .rfq) { padding-top: 0; }

.section-head { max-width: 780px; margin-bottom: clamp(34px, 4vw, 56px); }
.section-head--wide { max-width: 940px; }
.section-head p { color: var(--muted); font-size: 1.06rem; }
.section--dark .section-head p { color: #aeb9c6; }

.lead { font-size: 1.16rem; color: var(--muted); }
.section--dark .lead { color: #b5c0cd; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- buttons ----------------------------------------------------- */

.btn {
  /* The arrow stands on the LAST line of the label, never between the lines and
     never alone on a line of its own (his correction 21.09). A flex row aligned
     to the end does both: the arrow is still its own item, so it cannot be
     pushed onto a new line by a wrap, and `flex-end` puts it level with the
     bottom line of the text rather than the middle of the button. */
  position: relative; display: inline-flex; align-items: flex-end; justify-content: center;
  text-align: center; gap: 12px;
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  letter-spacing: .13em; text-transform: uppercase;
  /* Pill, like the language switch: his word 23.09 — square buttons out.
     999px rounds any height, so it holds for the small button, the tall
     one in a page hero and the full-width one on a phone alike. */
  padding: 7px 28px; border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .35s var(--ease), background .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease),
              box-shadow .35s var(--ease);
}
.btn svg {
  flex: 0 0 18px; width: 18px; height: 18px; margin-bottom: .16em;
  transition: transform .35s var(--ease);
}
.btn:hover svg { transform: translateX(6px); }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 5px 20px; font-size: .74rem; }
.btn--block { display: flex; width: 100%; }

/* sheen sweep */
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn:hover::after { transform: translateX(120%); }

/* Semi-transparent gold (his word 23.09: the solid colour was too loud).
   On a photograph the picture shows through the button, on white the gold
   goes softer; the hover fills it in solid so the click still answers. */
.btn--gold {
  background: rgba(184, 147, 76, .72); color: #fff;
  backdrop-filter: blur(2px);
  box-shadow: 0 14px 30px -20px rgba(184, 147, 76, .8);
}
.btn--gold:hover { background: var(--gold); box-shadow: 0 18px 34px -16px rgba(184, 147, 76, .95); }

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

.btn--ghost { border-color: rgba(10, 26, 48, .25); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn--ghost-light { border-color: rgba(255, 255, 255, .34); color: #fff; background: transparent; }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  padding-bottom: 3px; background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1.5px;
  transition: background-size .4s var(--ease), color .3s var(--ease);
}
.link-arrow svg { width: 17px; height: 17px; transition: transform .35s var(--ease); }
.link-arrow:hover { background-size: 100% 1.5px; color: var(--gold); }
.link-arrow:hover svg { transform: translateX(5px); }
.link-arrow--light { color: #fff; }
.link-arrow--light:hover { color: var(--gold-2); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- header ------------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header--over {
  position: fixed; left: 0; right: 0; background: transparent;
  border-color: transparent; color: #fff;
}
.site-header--over .nav-link { color: #fff; }
/* 27.09, his word «вставь это же и на главную»: the gold 3D name keeps its colours over the photo
   too (it was whitened while it was the flat blue picture) */
.site-header--over .burger span { background: #fff; }
.site-header.is-stuck {
  background: rgba(255, 255, 255, .96);
  border-color: var(--line); box-shadow: var(--shadow-sm); color: inherit;
}
.site-header.is-stuck .brand-logo { filter: none; }
.site-header.is-stuck .nav-link { color: var(--ink); }
.site-header.is-stuck .burger span { background: var(--ink); }

.header-row { display: flex; align-items: center; gap: 12px; min-height: 78px; flex-wrap: nowrap; }

.brand { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.brand-logo { display: block; height: 40px; width: auto; transition: filter .3s var(--ease); }
.brand-name { display: block; flex: 0 1 auto; min-width: 0; }
/* 27.09, his word «делаем большой, 52 px, на всю шапку»: the 3D emblem is taller than the name
   beside it (the name keeps its 30 px); it is not whitened over the photo, only the name is */
.brand-emblem { display: block; flex: 0 0 auto; }
.brand-emblem img { display: block; height: 52px; width: auto; }
.nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px;
  min-width: 0; flex: 1 1 auto; padding-block: 8px; }
/* The submenu belongs to ITS item, so the item is the frame it is measured
   from. While this was `static`, the panel was positioned against the header
   and centred on the window: it opened to the side of the word that had been
   hovered instead of under it. */
.nav-item { position: relative; flex: 0 0 auto; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-family: var(--display); font-size: .8rem; font-weight: 600;
  letter-spacing: .06em; color: var(--ink); padding: 10px 13px; border-radius: var(--radius);
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav-link .chev { width: 14px; height: 14px; opacity: .6; transition: transform .3s var(--ease); }
.nav-link:hover { color: var(--gold); }
.nav-item:hover .chev, .nav-item:focus-within .chev { transform: rotate(180deg); }

.mega {
  position: absolute; top: 100%; inset-inline-start: 0; transform: translateY(10px);
  width: min(760px, 88vw); max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); padding: 22px; opacity: 0; visibility: hidden;
  max-height: calc(100dvh - var(--header-height, 140px) - 12px); overflow-y: auto;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.mega--narrow { width: min(360px, 88vw); }
/* The six-card panel is a shelf, not a bubble: it drops straight down across
   the whole header, with its cards on the same margins as the page below. A
   760px bubble hung from one word ran off the right edge at 1024. */
.nav-item--wide { position: static; }
.nav-item--wide .mega {
  inset-inline: 0; width: auto; max-width: none;
  padding-inline: clamp(20px, 3.5vw, 76px);
}
/* The last item stands at the end of the row, so its panel hangs from its own
   end — opened from the start it would run off the edge of the window. */
.nav-item:last-child .mega { inset-inline-start: auto; inset-inline-end: 0; }
.nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
/* Keep the pointer path to a header-wide submenu open below its trigger. */
.nav-item::after { content: ''; position: absolute; inset: 100% 0 auto; height: 12px; display: none; }
.nav-item:hover::after, .nav-item:focus-within::after { display: block; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mega-card {
  display: block; padding: 16px; border: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.mega-card:hover { border-color: var(--line); background: var(--warm); transform: translateY(-2px); }
.mega-ico { display: block; color: var(--gold); margin-bottom: 10px; }
.mega-ico svg { width: 26px; height: 26px; }
.mega-name {
  display: block; font-family: var(--display); font-weight: 700; font-size: .95rem;
  color: var(--ink); margin-bottom: 4px;
}
.core-dot {
  font-style: normal; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber); border: 1px solid var(--amber-soft); background: var(--amber-soft);
  padding: 2px 6px; vertical-align: middle; margin-left: 4px;
}
.mega-note { display: block; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.mega-foot {
  display: flex; gap: 26px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.mega-list { display: grid; }
.mega-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; font-family: var(--display); font-weight: 600; font-size: .9rem;
  color: var(--ink); border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease), padding-left .25s var(--ease);
}
.mega-list a:last-child { border-bottom: 0; }
.mega-list a svg { width: 16px; height: 16px; color: var(--gold); opacity: 0; transition: opacity .25s var(--ease), transform .25s var(--ease); transform: translateX(-6px); }
.mega-list a:hover { background: var(--warm); padding-left: 20px; }
.mega-list a:hover svg { opacity: 1; transform: translateX(0); }

.header-cta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-inline-start: auto; }
.header-cta .btn { white-space: nowrap; }

/* Use the existing short quote label on narrower desktop screens so navigation
   retains the available space. No navigation item is hidden to make it fit. */
@media (min-width: 901px) and (max-width: 1399px) {
  .header-cta .label-long { display: none; }
  .header-cta .label-short { display: inline; }
}

/* language switch: the current language is set, the other one is the link */
/* Language picker: the button shows the language of the page, the menu lists
   every language the site serves. Opens on hover and on keyboard focus, so it
   works with JavaScript switched off. */
.lang { position: relative; }
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: none; cursor: pointer;
  font-family: var(--display); font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.lang-switch b { color: var(--ink); font-weight: 700; }
.lang-switch .chev { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.lang-switch:hover { border-color: var(--gold); color: var(--gold); }
.lang-switch:hover b { color: var(--gold); }
.lang:hover .lang-switch .chev, .lang:focus-within .lang-switch .chev { transform: rotate(180deg); }
.site-header--over .lang-switch { border-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .7); }
.site-header--over .lang-switch b { color: #fff; }
.site-header--over .lang-switch:hover { border-color: var(--gold-2); color: var(--gold-2); }
.site-header--over .lang-switch:hover b { color: var(--gold-2); }
.site-header.is-stuck .lang-switch { border-color: var(--line); color: var(--muted-2); }
.site-header.is-stuck .lang-switch b { color: var(--ink); }

.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  min-width: 190px; background: #fff; border: 1px solid var(--line);
  max-height: calc(100dvh - var(--header-height, 140px) - 16px); overflow-y: auto;
  box-shadow: var(--shadow-lg); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.lang:hover .lang-menu, .lang:focus-within .lang-menu, .lang.is-open .lang-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.lang-opt {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 12px;
  color: var(--ink); border-left: 2px solid transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease), padding-left .25s var(--ease);
}
.lang-opt b {
  font-family: var(--display); font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-2); min-width: 22px;
}
.lang-opt span { font-size: .9rem; }
/* The switcher writes every language in its own script — Русский, Ελληνικά,
   ქართული, 中文 — and those few words are the only non-Latin text on an English
   page. Left in Inter and Manrope they drag four extra font files (cyrillic,
   cyrillic-ext, greek, latin-ext, about 160 KB) onto every Latin page, so the
   list is written in the reader's own system font, which already has all of
   those alphabets. */
.lang-opt, .lang-opt b, .lang-opt span, .drawer-lang {
  font-family: system-ui, 'Segoe UI', 'Noto Sans', sans-serif;
}
.lang-opt:hover { background: var(--warm); border-left-color: var(--gold); padding-left: 16px; }
.lang-opt:hover b { color: var(--gold); }
.lang-opt.is-current { background: var(--warm); border-left-color: var(--amber); }
.lang-opt.is-current b { color: var(--amber); }

.drawer-langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
/* These chips live inside .drawer-inner, and `.drawer-inner a` is the more specific
   selector, so it was handing them `padding: 13px 0` — no room at the sides at all,
   and the words sat right on the curve. Matching that specificity is what fixes it;
   a fully round chip also starts curving half its own height in from each end, so
   the side padding has to clear that much before the first letter. */
.drawer-inner .drawer-lang {
  padding: 10px 22px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font-size: .9rem; line-height: 1.25;
}
.drawer-inner .drawer-lang.is-current { border-color: var(--amber); color: var(--amber); }
@media (max-width: 900px) {
  /* On a phone the header carries the language, not the price request. Someone who
     has just arrived is still reading, while the language has to be one tap away:
     an Arabic or a Georgian reader could not otherwise find it without opening the
     menu and scrolling to the bottom. Asking for a price belongs to the pages that
     sell, where the whole page is about it. */
  .lang { display: block; }
  /* a finger, not a cursor: the chip needs the height of a tap target */
  .lang-switch { padding: 11px 14px; font-size: .78rem; }
  .header-cta > .btn { display: none; }
}
/* ⛔ The row of menu items needs 679px in Russian and there are only 488 to be
   had at 980px — the width a phone reports in "desktop site" mode. It answered
   by wrapping its items between the logo and the buttons.
   ⛔ His word 24.09: the menu row is part of the computer version and must not
   vanish into the burger there — "desktop site" on a phone shows the computer
   version, menu included. So between 901 and 1239px the row keeps every item
   and simply takes a line of its own under the logo, centred, instead of being
   squeezed beside it (beside the logo Russian still broke in two up to 1206px).
   The type is untouched (his standing rule). The burger is the phone's alone,
   from 900px down. It depends on the width of the window only, so a phone in
   "desktop site" mode shows exactly what a computer window as wide shows. */
@media (min-width: 901px) and (max-width: 1239px) {
  .header-row { flex-wrap: wrap; row-gap: 0; }
  .header-row .nav { order: 3; flex: 1 0 100%; padding-block: 0 8px; }
}
/* 27.09: from 1240px the menu sits beside the logo only while ALL of it fits there. When it
   does not (Russian up to 1440px once the name got its gold width), gw.js sets this class and
   the whole row takes its own line, exactly as above — never one item alone on a second line. */
@media (min-width: 901px) {
  .header-row--stacked { flex-wrap: wrap; row-gap: 0; }
  .header-row--stacked .nav { order: 3; flex: 1 0 100%; padding-block: 0 8px; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .header-cta .burger { display: flex; }
}
.label-short { display: none; }
@media (max-width: 620px) {
  .label-long { display: none; }
  .label-short { display: inline; }
}

.burger {
  display: none; width: 44px; height: 40px; background: none; border: 0;
  flex-direction: column; justify-content: center; gap: 6px; cursor: pointer; padding: 0;
}
.burger span { display: block; height: 2px; width: 26px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--header-height, 78px) 0 0; z-index: 88; background: #fff;
  overflow-y: auto; animation: drawerIn .3s var(--ease);
}
@keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.drawer-inner { padding: 24px; display: flex; flex-direction: column; }
.drawer-inner a {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--ink);
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.drawer-inner .btn { margin-top: 22px; }
.drawer-label {
  font-family: var(--display); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: 22px 0 6px;
}
.drawer-label:first-child { margin-top: 0; }
/* His word 24.09: the five headings of the phone menu are gold buttons, gold
   the way "Request a quote" is — half-clear at rest, filled in solid when
   touched — and the items under each are indented so they read as its own.
   `.drawer-inner a` is the more specific rule and would hand the buttons its
   flat padding, ink colour and rule underneath, so both are named through it. */
.drawer-inner .btn {
  padding: 13px 24px; border-bottom: 0; color: #fff; font-size: .82rem;
}
.drawer-inner .drawer-main { margin-top: 14px; }
.drawer-inner .drawer-main:first-child { margin-top: 0; }
.drawer-inner .drawer-main:active, .drawer-inner .drawer-main:focus-visible,
.drawer-inner .drawer-main.is-current {
  background: var(--gold); box-shadow: 0 18px 34px -16px rgba(184, 147, 76, .95);
}
.drawer-inner .drawer-sub { padding-inline-start: 22px; border-inline-start: 3px solid transparent; }
/* The page the reader is on, inside the lit heading (marked by gw.js). */
.drawer-inner .drawer-sub.is-current {
  color: var(--gold); background: var(--warm); border-inline-start-color: var(--gold);
}

/* ---------- hero -------------------------------------------------------- */

.hero {
  position: relative; color: #fff; background: var(--ink); overflow: hidden;
}
/* The picture is drawn 4% larger than its frame (it keeps the edges of the
   photograph off the edges of the screen). On a phone the frame stops at the
   height of the screen while the enlargement did not, so 17px of the brightest
   part of the photograph hung BELOW the frame as a pale band. The frame now
   clips what it holds. */
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
/* The backdrop is a 2.3:1 photograph in a window that is nearer 1.6:1, so the
   crop has to choose. It is held slightly below centre: the foreground of that
   picture — the closures, the blisters, the preforms — is the half that says
   "complete packaging", and centred it fell outside the frame. */
/* ⛔ Shown at 100%, never enlarged (his word 22.09). The 4% it used to carry
   was a plain margin of safety with nothing attached to it — no movement, no
   animation — and on a phone those 4% hung below the frame as a pale band. */
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
/* On a phone the hero is far taller than the screen — the opening screen, the
   tags, the paragraph, the buttons and the strip all stand in it — so a
   photograph stretched over the whole of it is cropped to a sliver and shows
   one bottle. It is held to the first screen instead, where it is a picture,
   and the rest of the hero keeps the plain ink behind the words. */
@media (max-width: 760px) {
  .hero-bg { inset: 0 0 auto; height: 100svh; }
  /* Everything he asked for on the opening screen of a phone — name, title,
     promise, paragraph, both buttons — has to FIT in it, so the air above and
     below the block is the first thing to give way, never the type. */
  /* ⛔ Equal gaps here too (his standing rule): the room left over is split
     between the top, the middle and the bottom instead of being dumped above
     the words, which pinned everything to the foot of the screen. */
  .hero-intro > *:not(.hero-scroll) { margin-top: auto; }
  .hero-intro > .hero-lead { margin-bottom: auto; }
  .hero-title-block h1 { margin-bottom: 10px; }
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 18% 20%, rgba(176, 97, 28, .3) 0%, transparent 55%),
    /* ⛔ His rule 22.09, now on the homepage too: the veil belongs to the half
       the words are read in. Densest at the leading edge, gone by the middle,
       and from there to the far edge the photograph is shown as it is. */
    linear-gradient(90deg, rgba(6, 17, 33, .94) 0%, rgba(6, 17, 33, .88) 18%,
                    rgba(6, 17, 33, .62) 34%, rgba(6, 17, 33, .24) 45%,
                    rgba(6, 17, 33, 0) 52%, rgba(6, 17, 33, 0) 100%),
    linear-gradient(0deg, rgba(6, 17, 33, .92) 0%, transparent 45%);
}
/* ⛔ FIFTH TIME a rule further down this file quietly won over the one above:
   the phone override of this shading was written before it and never applied.
   Where the photograph ends it has to end in the colour of the page — the
   shading stopped at 92%, so the bright bench at the foot of the picture showed
   through as a pale band across the seam. */
@media (max-width: 760px) {
  /* ⛔ His layout 22.09 for the phone: the picture is centred and cropped only
     by the height of the screen, and the veil runs the WHOLE width — dense at
     the leading edge, nothing at all at the far one. Only the last few pixels
     at the foot stay closed, so the picture does not end in a hard line where
     the screen does. */
  .hero-bg::after {
    background:
      linear-gradient(90deg, rgba(6, 17, 33, .92) 0%, rgba(6, 17, 33, .72) 35%,
                      rgba(6, 17, 33, .42) 65%, rgba(6, 17, 33, .12) 88%, rgba(6, 17, 33, 0) 100%),
      linear-gradient(0deg, rgba(6, 17, 33, 1) 0%, rgba(6, 17, 33, .85) 5%, transparent 14%);
  }
}
.hero-intro {
  position: relative; z-index: 2; width: 100%;
  /* `svh`, not `dvh`: on a phone the dynamic viewport grows and shrinks as the
     address bar hides and comes back, so with `dvh` the first screen resized under
     the reader's finger and everything below it jumped while they scrolled. The
     small viewport height is the one that never changes. */
  min-height: 100vh; min-height: 100svh;
  /* Two children now — the title block and the paragraph with the buttons —
     so the direction has to be said out loud: a row would put them side by
     side, which is exactly what a 320px screen did. */
  display: flex; flex-direction: column; align-items: stretch;
  padding-top: calc(var(--header-height, 79px) + clamp(16px, 3vh, 40px));
  padding-bottom: clamp(28px, 7vh, 88px);
}
.hero-details { position: relative; z-index: 2; padding-block: clamp(28px, 4vw, 56px) clamp(34px, 5vw, 60px); }
/* The title is broken into lines by `{% headline %}` — three on a phone, two on
   a computer (his decision 21.09) — so every language fills the first screen the
   same way, however long the words of that particular translation happen to be.
   Both shapes are cut from the same words and only the `<br>` between them
   changes: the phone hides the wide breaks, the computer hides the narrow ones.
   The width below is only a backstop for a line longer than any we have, and
   `100%` keeps the box itself inside a narrow phone. */
.hero h1 { color: #fff; text-transform: uppercase; max-width: min(18ch, 100%); letter-spacing: -.025em; overflow-wrap: anywhere; }
.hero h1 span:not(.hl-mark) { display: block; }
.hero h1 .hl-b2 { display: none; }
.hero-sub {
  font-family: var(--display); font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-weight: 600;
  color: var(--gold-2); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 22px;
}
.hero-intro .material-range { margin-bottom: 0; }
/* Short windows and landscape phones still show the complete title block. */
@media (max-height: 600px) {
  .hero-intro { padding-top: calc(var(--header-height, 79px) + 12px); padding-bottom: 24px; }
  .hero-title-block .eyebrow { font-size: .64rem; line-height: 1.4; margin-bottom: 12px; }
  .hero-title-block h1 { font-size: clamp(1.8rem, 6vh, 3rem); line-height: 1.1; margin-bottom: 12px; }
  .hero-title-block .hero-sub { font-size: 1.05rem; line-height: 1.4; margin-bottom: 12px; }
  .hero-title-block .material-range { font-size: 1.1rem; line-height: 1.4; margin-top: 0; }
}
/* Short line, so it may be read larger (his word 23.09): from 1.02rem up to
   1.28rem with the width of the window. */
.hero-support { max-width: 60ch; color: #c5cedb; font-size: clamp(1.1rem, .55vw + .95rem, 1.28rem); }
.hero-caps {
  display: flex; flex-wrap: wrap; gap: 10px 8px; margin: 0 0 30px; padding: 0; list-style: none;
}
.hero-caps li {
  font-family: var(--display); font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #dfe6ee;
  border: 1px solid var(--line-dark); backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, .05);
  transition: background .18s ease, border-color .18s ease;
}
/* The whole tag is the target, not the words inside it, so the padding lives on
   the link — a tag half the size of its box is a button that misses the finger. */
.hero-caps a { display: block; padding: 7px 13px; color: inherit; text-decoration: none; }
.hero-caps li:hover, .hero-caps li:focus-within {
  background: rgba(255, 255, 255, .12); border-color: var(--gold-2);
}
.hero-strip {
  position: relative; z-index: 2; border-top: 1px solid var(--line-dark);
  background: rgba(4, 12, 24, .5); backdrop-filter: blur(6px);
}
.hero-strip .shell { display: grid; grid-template-columns: repeat(4, 1fr); }
/* Padding on both sides, not just the trailing one: with none on the leading
   side the text of every cell but the first started hard against the divider it
   follows. The outer edges keep none, so the strip lines up with the rest of
   the page. Logical sides, so the Arabic page mirrors with the text. */
.hero-stat {
  padding: 22px 26px; border-inline-end: 1px solid var(--line-dark);
}
.hero-stat:first-child { padding-inline-start: 0; }
.hero-stat:last-child { border-inline-end: 0; padding-inline-end: 0; }
.hero-stat b {
  display: block; font-family: var(--display); font-size: 1.05rem; color: #fff; font-weight: 700;
  letter-spacing: .01em; margin-bottom: 2px;
}
.hero-stat span { font-size: .84rem; color: #97a4b4; }
.hero-scroll {
  position: absolute; right: 22px; bottom: 24px; z-index: 4; writing-mode: vertical-rl;
  font-family: var(--display); font-size: .66rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.hero-scroll::after {
  content: ''; display: block; width: 1px; height: 54px; margin: 12px auto 0;
  background: linear-gradient(var(--gold), transparent);
}

/* On a computer the whole opening block is read without scrolling (his decision
   21.09): the name of the company, the title on two lines, the promise, the
   materials, the capabilities and both buttons. So the first screen starts
   right under the header instead of being pinned to the bottom of the window,
   and the gaps between those blocks are set in `vh` — they give way first when
   the window is short, before anything is pushed below the fold. The phone
   keeps the tall opening screen it has: there the title stands on three lines
   near the bottom and the buttons come with the scroll. */
@media (min-width: 901px) {
  /* The opening block is read without scrolling and the strip of four figures
     stands on the bottom edge of the window — the whole hero IS the first screen.
     ⛔ Nothing here is made smaller (his word 21.09: "do not squeeze it, just
     lift it"): every size stays what it was drawn as, and it is only the GAPS
     between the blocks that give way, by a millimetre here and a millimetre
     there, as the window gets shorter.

     `--fit` is how much room there is to spend on those gaps: zero on a 700px
     window, its full 38px from 1080 up. Each gap takes its own share of it, so
     a tall screen looks exactly as before and a laptop simply closes ranks. */
  .hero {
    min-height: 100svh; display: flex; flex-direction: column;
    --fit: clamp(0px, calc(10vh - 70px), 38px);
    padding-top: var(--header-height, 79px);
  }
  /* SIX BLOCKS, FIVE EQUAL GAPS (his layout, night of 21.09): the header, the
     title block, the row of tags, the paragraph, the two buttons and the strip
     of four figures. Every block carries `margin-top: auto`, and a column flex
     box splits whatever room is left EQUALLY between all the auto margins —
     so the spacing is equal by construction, not by five hand-tuned numbers.
     The strip stays on the bottom edge because it is last and the room above
     it has already been shared out.

     `display: contents` dissolves the two wrappers around the tags, the
     paragraph and the buttons: without it they would be one block of three
     instead of three blocks, and the gaps inside that block could never match
     the gaps outside it. Their side margins and stacking are restored below,
     since a dissolved box passes neither on. */
  /* Every wrapper is dissolved so the five blocks are five children of the hero
     and the room is shared between them equally. The paragraph and the buttons
     now sit in the opening screen for the phone's sake, so on a computer their
     place in his order — title, tags, paragraph, buttons, figures — is set by
     hand rather than by where they stand in the markup. */
  .hero-intro, .hero-details, .hero-details > .shell, .hero-lead { display: contents; }
  .hero-title-block, .hero-caps, .hero-support, .hero .cta-row, .hero-strip { margin-top: auto; }
  .hero-title-block { order: 1; }
  .hero-caps { order: 2; }
  .hero-support { order: 3; }
  .hero .cta-row { order: 4; }
  .hero-strip { order: 5; }
  /* ⛔ A dissolved wrapper passes on neither its layer nor its side margins, and
     the title block was left behind the photograph because of it — the words
     were there, drawn under an absolutely positioned picture. Every block that
     used to live inside a wrapper gets both back, by name. */
  .hero-title-block { position: relative; z-index: 2; }
  .hero-caps, .hero-support, .hero .cta-row {
    position: relative; z-index: 2; margin-inline: clamp(20px, 3.5vw, 76px); margin-bottom: 0;
  }
  .hero-intro {
    min-height: 0; align-items: flex-start; padding-top: 0; padding-bottom: 0;
  }
  .hero h1 { max-width: min(26ch, 100%); margin-bottom: calc(7px + var(--fit) * .68); }
  .hero h1 .hl-b2 { display: inline; }
  .hero h1 .hl-b3 { display: none; }
  .hero-title-block .eyebrow { margin-bottom: calc(5px + var(--fit) * .34); }
  .hero-sub { margin-bottom: 0; }
  /* A wider measure on a computer, because the number of LINES of this
     paragraph decides how much room is left below it. */
  /* A narrower measure (his word 23.09): the line used to run into the bright
     half of the photograph, where white text stops reading. */
  .hero-support { max-width: 46ch; }
  .hero-stat { padding-block: calc(10px + var(--fit) * .32); }
  .hero-scroll { display: none; }
}



/* ---------- page hero (inner pages) ------------------------------------- */

/* ⛔ His rule 22.09: on every inner page the opening screen is built the way
   the homepage is — the picture STANDS STILL and only the words move.

   The height used to come from the text, so a longer translation made the
   block taller and the photograph behind it slid up or down: between languages
   the same page moved by up to 268px. The height now comes from the WIDTH of
   the window alone (the proportion of the photographs themselves), so it is
   the same in all seventeen languages, and the words are shared out inside it
   by equal gaps — above the first line, between every pair, below the last —
   exactly like the six blocks of the homepage. A translation that runs long
   simply closes those gaps instead of pushing the picture. */
.page-hero {
  position: relative; background: var(--ink); color: #fff; overflow: hidden;
  /* ⛔ The same rule as on a computer, his words 22.09: the room is shared out
     EQUALLY — above the first line, between every pair, below the last. The
     150px of dead space that used to sit on top is gone; on a phone that alone
     pushed the button 48px past the bottom of the screen. */
  padding: 0;
  min-height: max(58svh, 420px);
  display: flex; flex-direction: column;
}
.page-hero .shell { display: flex; flex-direction: column; flex: 1 1 auto; }
.page-hero .shell > * { margin-top: auto; margin-bottom: 0; }
.page-hero .shell > *:last-child { margin-bottom: auto; }
@media (max-width: 760px) {
  /* A floor under the shared-out room: when the text of a page fills the screen
     by itself the equal gaps come out as nothing at all, and the lines close up
     against each other. 14px is the least they may be; whatever is left over is
     still split evenly on top of it. */
  .page-hero .shell { gap: 14px; padding-block: 14px 36px; }
}
/* ⛔ EVERYTHING BELOW IS THE COMPUTER LAYOUT ONLY (his rule 22.09). The phone
   keeps the opening screen it always had — the rules that hold the picture
   still and share the room out evenly start at 761px and no lower, because a
   phone has neither the width for them nor the need. */
@media (min-width: 761px) {
  .page-hero { min-height: clamp(520px, 43vw, 680px); }
}
/* ⛔ His rule 22.09: the quote button stands at ONE height on every opening
   screen. Sharing the leftover room below it as well put it 36px from the
   bottom on one page and 64px on another — it jumped as you walked the site.
   The last block now keeps a FIXED distance from the bottom edge (the spacing
   of the Food & Beverage page, the one he pointed at), and only the gaps ABOVE
   it take up what a longer or shorter translation leaves. */
@media (min-width: 761px) { .page-hero .shell > *:last-child { margin-bottom: 70px; } }
/* ⛔ And the button itself is ONE height in every language (his rule 22.09):
   its width may follow the words — Georgian is longer, Chinese is shorter —
   but its height may not, or the button changes shape as you switch language.
   The label is kept on one line on a computer, so a long translation widens
   the button instead of making it two lines tall; a phone still wraps. */
@media (min-width: 901px) {
  .page-hero .cta-row .btn { height: 38px; white-space: nowrap; }
}
/* Georgian letters are taller and its words longer: on the About page the
   intro alone overran the block by 8px, which made that one page a little
   taller than the rest. The TYPE keeps its size (his standing rule); only the
   leading of this one paragraph closes up, as it already does in the menu. */
html[lang^="ka"] .page-hero p { line-height: 1.45; }
/* `ch` is the width of a Latin zero; a Georgian letter is much wider, so 20ch
   held the About headline to two or three words a line — six lines where every
   other language needs four. The measure widens, the type keeps its size. */
html[lang^="ka"] .page-hero h1 { max-width: 30ch; }
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 85% 10%, rgba(184, 147, 76, .22) 0%, transparent 60%);
}
/* The picture keeps its own height, the same one the block is built to, and is
   pinned to the top. If a long translation needs more room than that — Georgian
   on the About page does — the block grows downwards over the plain ink and the
   photograph does not move by a pixel, which is the whole point of his rule. */
.page-hero--photo .page-hero-bg { position: absolute; inset: 0; }
@media (min-width: 761px) {
  .page-hero--photo .page-hero-bg { inset: 0 0 auto; height: clamp(520px, 43vw, 680px); }
}
/* A narrow window — a laptop, or a phone asking for the desktop site — gets a
   FIXED opening screen of its own instead of one calculated from the width: at
   980px the formula gave 421px, the gaps closed to 7px and the button's 56px
   below it read as a hole. The button stays exactly 56px from the bottom edge
   everywhere (his rule); it is the room above it that is made honest. */
@media (min-width: 761px) and (max-width: 1279px) {
  .page-hero { min-height: 620px; }
  .page-hero--photo .page-hero-bg { height: 620px; }
}



.page-hero--photo .page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* The industry pages carry the owner's own wide photographs, shot dark with the
   left side left empty for the words. They are shown, not dimmed to a hint —
   section 19: fewer dark overlays, let the products show. The veil that keeps
   the headline readable runs along the reading direction, so Arabic mirrors. */
/* ⛔ His rule 22.09: the veil covers the READING HALF and stops at the middle.
   At the leading edge it is at its densest, it is gone by 50% of the width, and
   the far half is the photograph itself — no tint, no dimming, nothing laid
   over it. The picture is therefore shown at full strength (it used to be held
   at 78%), and the gradient runs along the reading direction, so the Arabic
   page mirrors it without a rule of its own. */
.page-hero--photo .page-hero-bg { opacity: 1; }
.page-hero--photo .page-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to var(--hero-fade, right),
    rgba(9, 22, 40, .9) 0%, rgba(9, 22, 40, .84) 18%, rgba(9, 22, 40, .6) 32%,
    rgba(9, 22, 40, .22) 44%, rgba(9, 22, 40, 0) 50%, rgba(9, 22, 40, 0) 100%);
}
[dir="rtl"] .page-hero--photo { --hero-fade: left; }
/* The veil stops at the middle on a wide screen, where the words take the
   reading half and the far half is all photograph. On a narrower one — a
   laptop, or a phone asking for the desktop site — the same words run most of
   the way across, so the veil follows them and lets go only near the far edge.
   Nothing is moved or resized; it is the shading that adapts, not the text. */
@media (min-width: 761px) and (max-width: 1200px) {
  .page-hero--photo .page-hero-bg::after {
    background: linear-gradient(to var(--hero-fade, right),
      rgba(9, 22, 40, .9) 0%, rgba(9, 22, 40, .84) 30%, rgba(9, 22, 40, .6) 58%,
      rgba(9, 22, 40, .2) 84%, rgba(9, 22, 40, 0) 100%);
  }
}
@media (max-width: 760px) {
  /* ⛔ HIS RULE 23.09: ON A PHONE AN INNER PAGE SHADES EXACTLY LIKE THE HOME
     PAGE — «мы же определились с градиентом». The veil runs the WHOLE width,
     dense at the leading edge and nothing at all at the far one; only the last
     few pixels at the foot stay closed so the picture does not end in a hard
     line where the screen does. The top-to-bottom veil that used to be here
     was the old shading and is gone. */
  .page-hero--photo .page-hero-bg::after {
    background:
      linear-gradient(to var(--hero-fade, right),
        rgba(9, 22, 40, .92) 0%, rgba(9, 22, 40, .72) 35%,
        rgba(9, 22, 40, .42) 65%, rgba(9, 22, 40, .12) 88%, rgba(9, 22, 40, 0) 100%),
      linear-gradient(0deg, rgba(9, 22, 40, 1) 0%, rgba(9, 22, 40, .85) 5%, transparent 14%);
  }
}
.page-hero .shell { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero p { color: #b8c3d1; max-width: 62ch; font-size: 1.06rem; }
/* The gaps inside the opening screen are the auto margins above, so nothing
   here brings its own — otherwise one gap is always bigger than the others.
   On a phone the ordinary margins stay: there is no such sharing there. */
@media (min-width: 761px) {
  .page-hero .crumbs, .page-hero .eyebrow, .page-hero h1, .page-hero p { margin-bottom: 0; }
}
/* the inline `margin-top` these rows used to carry is gone from the templates:
   inside the opening screen the spacing is the auto margins, nothing else. */
.crumbs {
  display: flex; flex-wrap: wrap; gap: 8px; font-size: .78rem; color: #8c99a9;
  margin-bottom: 22px; font-family: var(--display); letter-spacing: .08em; text-transform: uppercase;
}
.crumbs a { color: #b9c5d3; }
.crumbs a:hover { color: var(--gold-2); }
.crumbs span { color: #63707f; }

/* ---------- equation (one group, many capabilities) --------------------- */

/* minmax(0, 1fr) and a word that may break: seventeen languages, and an
   Uzbek or German compound is longer than the cell it lives in. A plain
   1fr track grows to fit that word and takes the whole page sideways. */
.eq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
      border: 1px solid var(--line); background: #fff; }
.eq-cell {
  position: relative; padding: 30px 26px; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); transition: background .35s var(--ease);
}
.eq-cell:hover { background: var(--warm); }
.eq-cell:nth-child(4n) { border-right: 0; }
.eq-cell--sum {
  background: var(--ink); color: #fff; border-color: var(--ink);
  display: flex; flex-direction: column; justify-content: center;
}
.eq-cell--sum:hover { background: var(--ink); }
.eq-ico { color: var(--gold); margin-bottom: 14px; }
.eq-ico svg { width: 30px; height: 30px; }
.eq-kicker {
  font-family: var(--display); font-size: .64rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px;
}
.eq-cell--sum .eq-kicker { color: var(--gold-2); }
.eq-cell h3 { font-size: 1.08rem; margin-bottom: 6px; }
.eq-cell--sum h3 { color: #fff; font-size: 1.3rem; text-transform: uppercase; letter-spacing: -.01em; }
.eq-cell p { font-size: .88rem; color: var(--muted); margin: 0; }
.eq-cell:nth-child(4n) .eq-plus { display: none; }
.eq-plus {
  position: absolute; right: -13px; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 26px; height: 26px; background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--gold);
}
.eq-plus svg { width: 14px; height: 14px; }

/* The same grid read as a chain of work (his decision 23.09: the cells carry
   the process from enquiry to shipment, not the product types again). A step
   number takes the place of the icon, an arrow the place of the plus sign,
   and the cells are no longer links, so the hover tint is dropped. */
/* The step number is drawn the way the OEM page draws its steps — his word
   23.09, «вот она прикольная, такую же сделай»: a big pale numeral in the
   corner of the cell, counted by CSS instead of typed into the markup. The
   summing cell is not a step and gets none. */
.eq--flow { counter-reset: eq-step; }
.eq--flow .eq-cell:not(.eq-cell--sum)::before {
  counter-increment: eq-step; content: counter(eq-step, decimal-leading-zero);
  font-family: var(--display); font-weight: 800; font-size: 2.4rem; color: var(--warm-2);
  position: absolute; right: 20px; top: 12px; line-height: 1;
}
.eq--flow .eq-cell h3 { position: relative; z-index: 2; }
.eq--flow .eq-cell:hover { background: #fff; }
.eq--flow .eq-cell--sum:hover { background: var(--ink); }

/* ---------- core (glass) block ----------------------------------------- */

.core { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.core-media { position: relative; }
.core-media img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; }
.core-media::after {
  content: ''; position: absolute; inset: 14px 14px -14px -14px; border: 1px solid var(--gold);
  z-index: -1;
}
.core-badge {
  position: absolute; left: 0; bottom: 0; background: var(--ink); color: #fff;
  padding: 16px 22px; max-width: 260px;
}
.core-badge b { display: block; font-family: var(--display); font-size: .95rem; }
.core-badge span { font-size: .8rem; color: #9fadbc; }
.check-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.check-list svg { width: 17px; height: 17px; color: var(--gold); flex: 0 0 auto; margin-top: 4px; }
.check-list--single { grid-template-columns: 1fr; }

/* ---------- capability tiles ------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tile {
  position: relative; background: #fff; padding: 32px 28px 28px; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}
.tile::before {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--gold);
  transition: width .45s var(--ease);
}
.tile:hover { background: var(--warm); box-shadow: var(--shadow-md); z-index: 2; }
.tile:hover::before { width: 100%; }
.tile-ico { color: var(--gold); margin-bottom: 16px; }
.tile-ico svg { width: 32px; height: 32px; }
/* The card title is an h2 so the outline of the page has no hole in it
   (a reader moving by headings must not fall from h1 to h3); its size
   stays the size of a card title. */
.tile h2, .tile h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700;
                     margin-bottom: 8px; }
.tile p { color: var(--muted); font-size: .93rem; margin-bottom: 16px; }
.tile-note {
  display: inline-block; font-family: var(--display); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted-2); border: 1px solid var(--line); padding: 4px 8px;
  margin-bottom: 12px;
}
.tile-note--core { color: var(--amber); border-color: var(--amber-soft); background: var(--amber-soft); }

/* ---------- product cards ---------------------------------------------- */

.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.prod-card {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.prod-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #d6cfc0; }
.prod-media { position: relative; aspect-ratio: 1; background: var(--warm); overflow: hidden; }
.prod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.prod-card:hover .prod-media img { transform: scale(1.06); }
.prod-code {
  position: absolute; left: 12px; top: 12px; font-family: var(--display); font-size: .6rem;
  letter-spacing: .16em; background: rgba(255, 255, 255, .9); color: var(--muted);
  padding: 4px 8px; border: 1px solid var(--line);
}
.prod-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.prod-cat {
  font-family: var(--display); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.prod-name { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--ink); line-height: 1.3; margin-bottom: 6px; }
.prod-sub { font-size: .85rem; color: var(--muted); margin-bottom: 14px; }
.prod-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prod-foot .link-arrow { font-size: .68rem; }

/* ---------- industry cards ---------------------------------------------- */

.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* ⛔ His word 24.09: every card starts its words at the SAME height, from the
   top. Pinned to the bottom, a card with a short summary had its title low and
   one with a long summary had it high, so no two titles in a row lined up. The
   link at the end is pushed to the bottom edge, so those line up too. */
.ind-card {
  position: relative; overflow: hidden; min-height: 290px; display: flex; flex-direction: column;
  justify-content: flex-start; padding: 28px; color: #fff; background: var(--ink-2);
}
.ind-card > .link-arrow { margin-top: auto; }
.ind-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ind-card img { filter: saturate(.92) contrast(1.04); }
/* the catalogue photos are shot on white — the veil has to be strong enough to
   read on, and it is densest at the top now, where the title and summary stand */
.ind-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 17, 33, .97) 22%, rgba(6, 17, 33, .78) 58%, rgba(6, 17, 33, .86) 100%);
  transition: background .5s var(--ease);
}
/* His word 25.09: on hover the photograph opens up the way the opening screens
   of the inner pages do — dense ink at the reading edge, nothing at all at the
   far one — instead of the gold wash, which hid the pictures. Gradients do not
   animate, so the hover shading is its own layer that fades in while the resting
   veil fades out; `to right` follows the reading direction (Arabic mirrors). */
.ind-card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0;
  background: linear-gradient(to var(--card-fade, right),
    rgba(6, 17, 33, .96) 0%, rgba(6, 17, 33, .9) 30%, rgba(6, 17, 33, .55) 52%,
    rgba(6, 17, 33, .12) 72%, rgba(6, 17, 33, 0) 86%);
  transition: opacity .5s var(--ease);
}
.ind-card::after { z-index: 1; transition: opacity .5s var(--ease); }
[dir="rtl"] .ind-card { --card-fade: left; }
.ind-card:hover img { transform: scale(1.07); }
.ind-card:hover::before { opacity: 1; }
.ind-card:hover::after { opacity: 0; }
.ind-card > *:not(img) { position: relative; z-index: 2; }
.ind-card img { z-index: 0; }
.ind-card h2, .ind-card h3 { color: #fff; font-size: clamp(1.2rem, 2vw, 1.5rem);
                             font-weight: 700; margin-bottom: 6px; }
.ind-card p { color: #c2ccd8; font-size: .89rem; margin-bottom: 14px; }

/* ---------- numbered reasons -------------------------------------------- */

.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-dark); }
.reason { background: var(--ink); padding: 32px 28px; position: relative; transition: background .4s var(--ease); }
.reason:hover { background: #0d2340; }
.reason-no {
  font-family: var(--display); font-size: .74rem; font-weight: 700; letter-spacing: .2em;
  color: var(--gold); margin-bottom: 16px; display: block;
}
.reason h3 { color: #fff; font-size: 1.12rem; margin-bottom: 8px; }
.reason p { color: #a9b6c5; font-size: .92rem; margin: 0; }

/* ---------- ecosystem entities ------------------------------------------ */

.entities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.entity {
  border: 1px solid var(--line); background: #fff; padding: 28px;
  display: flex; gap: 22px; transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.entity:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.entity--lead { background: var(--ink); border-color: var(--ink); color: #d6dde6; }
.entity--lead h3 { color: #fff; }
.entity--lead:hover { border-color: var(--gold); }
.entity-no {
  font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--warm-2);
  line-height: 1; flex: 0 0 auto;
}
.entity--lead .entity-no { color: rgba(255, 255, 255, .18); }
.entity h3 { font-size: 1.1rem; margin-bottom: 4px; }
.entity-role {
  font-family: var(--display); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.entity p { font-size: .92rem; color: var(--muted); margin: 0 0 8px; }
.entity--lead p { color: #a9b6c5; }
.entity-loc { font-size: .8rem; color: var(--muted-2); display: flex; align-items: center; gap: 7px; }
.entity-loc svg { width: 15px; height: 15px; color: var(--gold); }

/* ---------- global supply ----------------------------------------------- */

.regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.region {
  background: #fff; padding: 22px 24px; display: flex; align-items: center; gap: 14px;
  font-family: var(--display); font-weight: 600; color: var(--ink); font-size: .98rem;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.region svg { width: 18px; height: 18px; color: var(--gold); }
.region:hover { background: var(--ink); color: #fff; }
.region:hover svg { color: var(--gold-2); }

/* ---------- process steps ----------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.step { position: relative; padding: 28px 26px; border: 1px solid var(--line); background: #fff; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-weight: 800; font-size: 2.4rem; color: var(--warm-2);
  position: absolute; right: 20px; top: 12px; line-height: 1;
}
.step h3 { font-size: 1.05rem; position: relative; z-index: 2; }
.step p { font-size: .92rem; color: var(--muted); margin: 0; }
.step-time {
  display: inline-block; margin-top: 14px; font-family: var(--display); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  border-top: 1px solid var(--gold-soft); padding-top: 8px;
}

/* ---------- gallery ------------------------------------------------------ */

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery-item { position: relative; overflow: hidden; aspect-ratio: 4 / 3; cursor: zoom-in; background: var(--warm); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after {
  content: ''; position: absolute; inset: 0; background: rgba(10, 26, 48, 0); transition: background .4s var(--ease);
}
.gallery-item:hover::after { background: rgba(10, 26, 48, .18); }
.gallery--wide .gallery-item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

.lightbox {
  position: fixed; inset: 0; z-index: 120; background: rgba(4, 12, 24, .93);
  display: grid; place-items: center; padding: 40px;
}
.lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 24px; right: 26px; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.lightbox-close svg { width: 20px; height: 20px; }

/* ---------- product detail ---------------------------------------------- */

/* The product page opens right under the header — no empty band above the
   breadcrumb — and the photograph is shown WHOLE: it is fitted inside its
   frame instead of being cropped to fill it, and the frame is never taller
   than the window, so a buyer sees the whole product without scrolling. */
/* The header is part of the flow on an inner page, so this padding is the gap
   BELOW it — adding the header height here is what left a hundred pixels of
   empty band above the breadcrumb. */
section.pd-section { padding-top: clamp(18px, 2.4vh, 34px); }
/* Headings on a product page belong to a card, not to a landing page: the
   page-size h2 (up to 46px) shouted over the product itself. */
.pd-block h2 { font-size: clamp(1.25rem, 1.7vw, 1.65rem); }
.pd-block .section-head { margin-bottom: clamp(18px, 2vw, 28px); }
/* minmax(0, 1fr), not 1fr: a plain 1fr track never shrinks below the widest
   thing inside it, and the thumbnail strip of a product with many photographs
   is wider than a phone. The strip scrolls sideways; the page must not. */
.pd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(28px, 4vw, 56px); align-items: start; }
.pd-gallery { min-width: 0; }
.pd-gallery { position: sticky; top: calc(var(--header-height, 79px) + 16px); }
.pd-main {
  border: 1px solid var(--line); background: #fff; overflow: hidden;
  display: grid; place-items: center; padding: 10px;
  /* Tall enough to show the product, never taller than the window. The frame
     takes the shape of the photograph instead of forcing a square on it, so a
     landscape shot does not sit between two empty white bands. */
  min-height: min(38vh, 320px); max-height: min(62vh, 540px);
}
.pd-main img { width: 100%; height: auto; max-height: min(60vh, 520px); object-fit: contain; }
/* A strip, not a grid: however many photographs a product has, they sit in one
   row that scrolls sideways — the same behaviour as the gallery on his shop. */
.pd-thumbs {
  display: flex; gap: 8px; margin-top: 10px; padding-bottom: 6px; min-width: 0;
  overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
}
.pd-thumbs::-webkit-scrollbar { display: none; }
.pd-thumb {
  flex: 0 0 74px; width: 74px; height: 74px;
  border: 2px solid transparent; outline: 1px solid var(--line); background: #fff;
  overflow: hidden; cursor: pointer; padding: 0;
  transition: border-color .2s var(--ease);
}
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pd-thumb.is-active { border-color: var(--ink); }
/* The magnifier: a lens over the photograph and a panel beside it that shows
   that square at twice the size. Hover only, so a phone never sees either. */
.pd-main { position: relative; }
.pd-lens {
  position: absolute; pointer-events: none; opacity: 0; border-radius: 10px;
  border: 2px solid rgba(10, 26, 48, .45); background: rgba(255, 255, 255, .18);
  transition: opacity .15s var(--ease);
}
.pd-lens.is-on { opacity: 1; }
.pd-zoom-panel {
  position: fixed; z-index: 60; opacity: 0; visibility: hidden;
  border: 1px solid var(--line); background: #fff; overflow: hidden;
  box-shadow: var(--shadow-lg); pointer-events: none;
  transition: opacity .15s var(--ease);
}
.pd-zoom-panel.is-on { opacity: 1; visibility: visible; }
.pd-zoom-panel > div { width: 100%; height: 100%; background-repeat: no-repeat; }

/* The short product film on the home page. */
.film { position: relative; margin: 0; border: 1px solid var(--line); background: #000; overflow: hidden; }
.film-player { display: block; width: 100%; height: auto; }
.film-toggle {
  position: absolute; inset-block-end: 14px; inset-inline-end: 14px;
  width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.film-toggle svg { width: 18px; height: 18px; color: var(--ink); }
.film-toggle:hover { background: #fff; transform: scale(1.06); }
.film-toggle.is-playing svg { opacity: .45; }
/* A product name is not a page headline: it keeps the weight of the display
   face but comes down to a readable size. */
.pd-title { font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.15; margin-bottom: 6px; }
.pd-sub { font-family: var(--display); font-size: 1.1rem; color: var(--amber); font-weight: 600; margin-bottom: 20px; }

.spec-table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: .95rem; }
.spec-table th, .spec-table td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th {
  width: 40%; font-family: var(--display); font-weight: 600; color: var(--muted);
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.spec-table td { color: var(--ink); font-weight: 500; }

.pd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.pd-note {
  border-left: 2px solid var(--gold); padding: 4px 0 4px 18px; color: var(--muted);
  font-size: .93rem; margin-bottom: 26px;
}

/* ---------- filters ------------------------------------------------------ */

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 28px; }
.chip {
  font-family: var(--display); font-size: .74rem; font-weight: 600; letter-spacing: .08em;
  padding: 9px 16px; border: 1px solid var(--line); color: var(--muted); background: #fff;
  transition: all .3s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.search-box { display: flex; margin-left: auto; border: 1px solid var(--line); background: #fff; }
/* On the section page the search stands alone in its row, and pushed to the
   far right by `margin-left: auto` it read as a stray box. Alone, it starts
   where the text starts; beside a row of chips it keeps its old place. */
.filters--search .search-box { margin-inline: 0 auto; }
.search-box input { border: 0; padding: 11px 16px; font-family: var(--body); font-size: .92rem; min-width: 210px; outline: none; }
.search-box button {
  border: 0; background: var(--ink); color: #fff; padding: 0 18px; cursor: pointer;
  font-family: var(--display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
}
.result-line { font-size: .88rem; color: var(--muted); margin-bottom: 18px; }

.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }

/* ---------- RFQ form ----------------------------------------------------- */

.rfq { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.rfq::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 100% at 12% 0%, rgba(176, 97, 28, .26) 0%, transparent 60%);
}
.rfq .shell { position: relative; z-index: 2; }
.rfq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.rfq-aside h2 { color: #fff; }
.rfq-aside p { color: #b3bfcd; }
.pipeline { list-style: none; padding: 0; margin: 26px 0 0; }
.pipeline li {
  position: relative; padding: 0 0 18px 26px; color: #9fadbc; font-size: .9rem;
  border-left: 1px solid var(--line-dark);
}
.pipeline li::before {
  content: ''; position: absolute; left: -5px; top: 8px; width: 9px; height: 9px;
  background: var(--gold); border: 1px solid var(--gold); transform: rotate(45deg);
}
.pipeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pipeline b { color: #fff; font-family: var(--display); }

.form-card { background: #fff; padding: clamp(24px, 3vw, 38px); color: var(--graphite); box-shadow: var(--shadow-lg); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--display); font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.form-field .req { color: var(--amber); }
.form-input, .form-select, .form-field textarea {
  width: 100%; font-family: var(--body); font-size: .95rem; color: var(--ink);
  border: 1px solid var(--line); background: var(--warm); padding: 13px 15px; outline: none;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.form-input:focus, .form-select:focus, .form-field textarea:focus {
  border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px rgba(184, 147, 76, .14);
}
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6875' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 17px; padding-right: 38px; }
.form-note { font-size: .82rem; color: var(--muted-2); margin: 16px 0 0; }
/* The drawing or specification a buyer attaches to the request (master prompt,
   section 24), and section 13 of the second prompt: the browser writes the
   button of a file input and its "no file chosen" in the language of the
   READER'S SYSTEM, not of the page, so a Russian Windows put «Выберите файл»
   on the English form. The input is still there — it carries the file and
   answers to the label — but it is taken out of sight and the button next to
   it is ours, in the language of the page. */
.file-field {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 1px dashed var(--line); background: var(--warm); padding: 11px 14px;
}
.file-field:focus-within { border-color: var(--gold); background: #fff; }
.form-file {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.file-button {
  font-family: var(--display); font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); background: #fff;
  border: 1px solid var(--line); padding: 9px 15px; cursor: pointer; flex: 0 0 auto;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.file-button:hover, .form-file:focus + .file-button { border-color: var(--gold); color: var(--gold); }
.file-name {
  font-family: var(--body); font-size: .9rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.file-name.is-set { color: var(--ink); }
.form-hint { font-size: .8rem; color: var(--muted-2); }

/* The evolution of the group, section 26 of the master prompt: seven steps in
   one horizontal run on a computer, one column on a phone. Deliberately without
   years — none have been supplied and the prompt forbids inventing them. */
.timeline {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
}
.timeline li {
  position: relative; padding: 26px 18px 0 0;
  border-top: 1px solid var(--line);
}
.timeline li::before {
  content: ''; position: absolute; inset-block-start: -5px; inset-inline-start: 0;
  width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg);
}
.timeline b {
  display: block; font-family: var(--display); font-size: .95rem; color: var(--ink);
  margin-bottom: 6px;
}
.timeline span { font-size: .85rem; color: var(--muted); }
@media (max-width: 1100px) { .timeline { grid-template-columns: repeat(3, 1fr); row-gap: 22px; } }
@media (max-width: 700px) { .timeline { grid-template-columns: 1fr; row-gap: 18px; } }
.form-errors {
  background: #fdf1ec; border-left: 3px solid var(--amber); padding: 12px 16px; margin-bottom: 18px;
  font-size: .88rem; color: #8a3d12;
}
.errorlist { list-style: none; margin: 4px 0 0; padding: 0; color: var(--amber); font-size: .8rem; }

/* ---------- FAQ ---------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink);
}
.faq-q svg { width: 20px; height: 20px; color: var(--gold); flex: 0 0 auto; transition: transform .35s var(--ease); }
.faq-item.is-open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq-a p { padding-bottom: 22px; margin: 0; color: var(--muted); }

/* ---------- misc blocks -------------------------------------------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split--narrow { grid-template-columns: .9fr 1.1fr; }
.media-frame { position: relative; }
.media-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-frame::after { content: ''; position: absolute; inset: -14px -14px 14px 14px; border: 1px solid var(--gold); z-index: -1; }

.quote-block {
  border-left: 2px solid var(--gold); padding-left: 26px; font-family: var(--display);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: 600; color: var(--ink); line-height: 1.35;
}
.section--dark .quote-block { color: #fff; }

.exec {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  border: 1px solid var(--line-dark); padding: 30px; background: rgba(255, 255, 255, .04);
}
.exec-initials {
  width: 78px; height: 78px; display: grid; place-items: center; border: 1px solid var(--gold);
  font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--gold-2);
}
.exec-name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: #fff; margin: 0; }
.exec-role { font-size: .84rem; color: var(--gold-2); letter-spacing: .06em; margin: 2px 0 10px; }
.exec p { color: #b3bfcd; font-size: .95rem; margin: 0; }

.cta-band { background: var(--warm); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-band .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; padding-block: clamp(34px, 4vw, 56px); }
.cta-band h2 { margin: 0; max-width: 20ch; }
.cta-band p { margin: 6px 0 0; color: var(--muted); }

.mini-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.mini-nav a {
  font-family: var(--display); font-size: .74rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: 10px 16px; border: 1px solid var(--line); color: var(--ink);
  transition: all .3s var(--ease);
}
.mini-nav a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.thanks { padding: 180px 0 120px; text-align: center; }
.thanks-mark {
  width: 86px; height: 86px; border: 1px solid var(--gold); border-radius: 50%; display: grid;
  place-items: center; margin: 0 auto 26px; color: var(--gold);
}
.thanks-mark svg { width: 34px; height: 34px; }

/* ---------- footer ------------------------------------------------------- */

.site-footer { background: var(--ink); color: #9fadbc; padding: clamp(48px, 6vw, 84px) 0 30px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 34px; }
/* The logo card as it was drawn, filling the column it sits in: at a legible size
   it carries its own light background, so it reads on the dark footer without any
   cutting out. On a phone the footer is one column, so it spans the screen. */
.footer-logo { display: block; width: 100%; height: auto; margin-bottom: 22px; }
.footer-claim { font-family: var(--display); color: #fff; font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; }
.footer-promise { font-size: .86rem; color: #8794a4; max-width: 34ch; }
.footer-label {
  font-family: var(--display); font-size: .66rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 14px;
}
.footer-col a { display: block; font-size: .9rem; color: #a9b6c5; padding: 5px 0; transition: color .25s var(--ease), transform .25s var(--ease); }
.footer-col a:hover { color: #fff; transform: translateX(3px); }
.footer-person { font-family: var(--display); font-weight: 700; color: #fff; margin: 0 0 2px; }
.footer-role { font-size: .82rem; color: #8794a4; margin: 0 0 14px; }
.footer-strong { color: #fff !important; font-weight: 500; }
/* A button inside a footer column is still a button: the column rule above
   turns every link into a block row, which knocked the arrow off the line
   of its label. */
.footer-col--contact .btn { margin-top: 16px; }
.footer-col .btn {
  display: inline-flex; align-items: flex-end; justify-content: center;
  padding: 7px 22px;
}
.footer-col .btn:hover { transform: none; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  border-top: 1px solid var(--line-dark); margin-top: 44px; padding-top: 22px;
  font-size: .8rem; color: #74818f;
}
.footer-bottom p { margin: 0; }

/* ---------- reveal animation --------------------------------------------- */

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
[data-reveal][data-delay="4"] { transition-delay: .32s; }

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

/* ---------- translated pages: longer words, same layout -------------------- */

/* Compact spacing within both the single and additional navigation rows.
   The label itself is bigger than it was (his word 21.09: "these buttons are
   very small") and grows with the window: about 15 px on a 1280 screen and
   16.5 px from 1700 up. The side padding gives way as the window narrows, so a
   long translation still keeps the menu on one line. */
.nav-link {
  padding: 10px clamp(4px, .5vw, 12px); letter-spacing: .02em; flex: 0 0 auto;
  font-size: clamp(.9rem, .62rem + .36vw, 1.04rem);
}
/* Georgian is the widest script the menu carries: at the shared size its eight
   labels do not fit any window we support, so it keeps a slightly smaller one
   rather than dropping onto a second row on every screen. */
html[lang^="ka"] .nav-link { font-size: clamp(.86rem, .6rem + .28vw, .96rem); }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1100px) {
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .eq, .tiles, .reasons, .ind-grid, .steps, .regions {
    grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eq-cell:nth-child(4n) { border-right: 1px solid var(--line); }
  .eq-cell:nth-child(2n) { border-right: 0; }
  .eq-plus { display: none; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  .hero-strip .shell { grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
  .hero-stat { border-inline-end: 0; border-bottom: 1px solid var(--line-dark); padding: 16px 0; }
  .hero-scroll { display: none; }
  .core, .split, .split--narrow, .rfq-grid { grid-template-columns: 1fr; }
  .pd { grid-template-columns: minmax(0, 1fr); }
  .pd-gallery { position: static; }
  .core-media::after, .media-frame::after { display: none; }
  .entities { grid-template-columns: 1fr; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .check-list { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .search-box { margin-left: 0; width: 100%; }
  .search-box input { flex: 1; min-width: 0; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery--wide .gallery-item:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .header-row { min-height: 68px; gap: 14px; }
  .brand-logo { height: 34px; }
  .brand-emblem img { height: 46px; }
  .header-cta .btn { padding: 11px 16px; font-size: .68rem; }
}

@media (max-width: 560px) {
  /* On a 320px phone a single long word — a German compound, a Georgian or an
     Azerbaijani noun — set the minimum width of its card, and the card pushed the
     page wider than the screen, so the text at the edge was cut off. Letting the
     word break is what keeps every block inside the screen in every language;
     above this width the words fit and nothing breaks. */
  h1, h2, h3, h4, p, li, dt, dd, figcaption { overflow-wrap: anywhere; }
  .eq, .tiles, .reasons, .ind-grid, .steps, .regions, .prod-grid { grid-template-columns: 1fr; }
  .eq-cell:nth-child(2n) { border-right: 1px solid var(--line); }
  .footer-top { grid-template-columns: 1fr; }
  .btn { display: flex; width: 100%; }
  .header-cta .btn { width: auto; }
  .cta-band .shell { flex-direction: column; align-items: flex-start; }
  /* on a phone the header CTA keeps its place but shortens its label */
  .header-cta .btn { padding: 10px 14px; }
  .header-row { gap: 10px; padding-inline: 16px; }
  .header-row .brand { flex: 0 1 176px; min-width: 0; gap: 6px; }
  .header-row .brand-emblem img { height: 40px; }
  .header-row .brand-name { flex: 1 1 0; min-width: 0; }
  .header-row .brand-logo { width: 100%; height: auto; }
  .header-cta { gap: 8px; }
  .burger { width: 32px; }
}

@media (max-width: 359px) {
  /* The narrowest phones we check. At the size above, the three lines of the
     title no longer fit the screen and the longest of them ran onto a fourth
     line. One step down holds the three lines in every language — the size is
     the same for all of them here, as it is everywhere else. */
  .hero h1 { font-size: 2rem; }
}

/* ---------------------------------------------------------------------------
   Georgian pages: Mkhedruli is in neither Manrope nor Inter, so without this
   the script fell back to whatever face the reader's system offers — lighter
   and visibly smaller than every other language on the site. Noto Sans Georgian
   is already fetched for /ka/ (the webfont column in main/languages.py), but a
   font that no stack ever names is downloaded and never used, which is exactly
   what happened. It carries Latin as well as Georgian — like the Arabic face
   below — so the brand name and the product codes stay in one voice, and
   naming Manrope here would be naming a font this page never loads.
--------------------------------------------------------------------------- */
html[lang^="ka"] {
  --display: 'Noto Sans Georgian', 'Segoe UI', system-ui, sans-serif;
  --body: 'Noto Sans Georgian', 'Segoe UI', system-ui, sans-serif;
}

/* ---------------------------------------------------------------------------
   Chinese pages: Google Fonts is not served inside mainland China, so /zh/ is
   built on the CJK faces that ship with the reader's own system. Manrope and
   Inter stay first in the stack for the Latin words (brand, product codes) in
   case the visitor's browser has them.
--------------------------------------------------------------------------- */
html[lang^="zh"] {
  --display: 'Manrope', 'PingFang SC', 'HarmonyOS Sans SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    'Noto Sans CJK SC', 'Source Han Sans SC', 'WenQuanYi Micro Hei', system-ui, sans-serif;
  --body: 'Inter', 'PingFang SC', 'HarmonyOS Sans SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    'Noto Sans CJK SC', 'Source Han Sans SC', 'WenQuanYi Micro Hei', system-ui, sans-serif;
}
/* Chinese headlines carry more weight per character: the wide Latin tracking
   pulls the glyphs apart, and the lines need more air to stay readable. */
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3 { letter-spacing: .01em; line-height: 1.34; }
html[lang^="zh"] .eyebrow, html[lang^="zh"] .drawer-label { letter-spacing: .08em; }
html[lang^="zh"] p, html[lang^="zh"] li { line-height: 1.85; }

/* ---------------------------------------------------------------------------
   Arabic pages: the script runs right to left, so the whole layout mirrors.

   Everything that is already written in flow terms — flex rows, grid columns,
   `padding-inline`, the `inset: 0` overlays — turns itself around the moment
   `dir="rtl"` is on <html>. What follows is the rest: the rules pinned to a
   physical side (left / right / border-left / margin-left), which the browser
   keeps where they were written, and the arrows, which must point the way the
   reader is going.

   Keyed on [dir="rtl"], not on the language: a second right-to-left language
   (Hebrew, Persian, Urdu) gets all of this for free by setting rtl=True in
   main/languages.py.
--------------------------------------------------------------------------- */

/* --- the sides that were pinned by hand ---------------------------------- */
[dir="rtl"] .skip-link { left: auto; right: -9999px; }
[dir="rtl"] .skip-link:focus { left: auto; right: 12px; }

[dir="rtl"] .core-dot { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .mega-list a {
  transition: background .25s var(--ease), padding-right .25s var(--ease);
}
[dir="rtl"] .mega-list a:hover { padding-left: 14px; padding-right: 20px; }

[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .lang-opt {
  border-left: 0; border-right: 2px solid transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease), padding-right .25s var(--ease);
}
[dir="rtl"] .lang-opt:hover {
  border-left-color: transparent; border-right-color: var(--gold);
  padding-left: 12px; padding-right: 16px;
}
[dir="rtl"] .lang-opt.is-current { border-left-color: transparent; border-right-color: var(--amber); }

/* The strip of four is set on logical sides now, so it mirrors by itself and
   needs no rule here. */
[dir="rtl"] .hero-scroll { right: auto; left: 22px; }
[dir="rtl"] .page-hero::before {
  background: radial-gradient(90% 120% at 15% 10%, rgba(184, 147, 76, .22) 0%, transparent 60%);
}

[dir="rtl"] .eq-cell { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .eq-cell:nth-child(4n) { border-left: 0; }
[dir="rtl"] .eq-plus { right: auto; left: -13px; }

[dir="rtl"] .core-media::after { inset: 14px -14px -14px 14px; }
[dir="rtl"] .core-badge { left: auto; right: 0; }
[dir="rtl"] .tile::before { left: auto; right: 0; }
[dir="rtl"] .prod-code { left: auto; right: 12px; }
[dir="rtl"] .step::before { right: auto; left: 20px; }
[dir="rtl"] .eq--flow .eq-cell::before { right: auto; left: 20px; }
[dir="rtl"] .lightbox-close { right: auto; left: 26px; }
[dir="rtl"] .media-frame::after { inset: -14px 14px 14px -14px; }

[dir="rtl"] .spec-table th, [dir="rtl"] .spec-table td { text-align: right; }
[dir="rtl"] .pd-note {
  border-left: 0; border-right: 2px solid var(--gold); padding: 4px 18px 4px 0;
}
[dir="rtl"] .search-box { margin-left: 0; margin-right: auto; }

[dir="rtl"] .rfq::before {
  background: radial-gradient(80% 100% at 88% 0%, rgba(176, 97, 28, .26) 0%, transparent 60%);
}
[dir="rtl"] .pipeline li {
  padding: 0 26px 18px 0;
  border-left: 0; border-right: 1px solid var(--line-dark);
}
[dir="rtl"] .pipeline li::before { left: auto; right: -5px; }
[dir="rtl"] .pipeline li:last-child { border-right-color: transparent; }

[dir="rtl"] .form-select {
  background-position: left 12px center; padding-right: 15px; padding-left: 38px;
}
[dir="rtl"] .form-errors { border-left: 0; border-right: 3px solid var(--amber); }
[dir="rtl"] .faq-q { text-align: right; }
[dir="rtl"] .quote-block {
  border-left: 0; border-right: 2px solid var(--gold);
  padding-left: 0; padding-right: 26px;
}

/* A phone number is Latin digits behind a plus sign. Left to itself, the
   bidi algorithm moves the plus to the other end and «+86 185 0106 8030»
   is shown as «8030 0106 185 86+», so every tel: link is isolated. */
[dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; }

/* --- the arrows point the way the reader is going ------------------------ */
[dir="rtl"] .btn svg, [dir="rtl"] .link-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .btn:hover svg { transform: scaleX(-1) translateX(6px); }
[dir="rtl"] .link-arrow { background-position: 100% 100%; }
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(5px); }
[dir="rtl"] .mega-list a svg { transform: scaleX(-1) translateX(-6px); }
[dir="rtl"] .mega-list a:hover svg { transform: scaleX(-1); }
[dir="rtl"] .btn::after { transform: translateX(120%); }
[dir="rtl"] .btn:hover::after { transform: translateX(-120%); }
[dir="rtl"] .footer-col a:hover { transform: translateX(-3px); }

/* --- the same mirrors inside the breakpoints that move these borders ----- */
@media (max-width: 1100px) {
  [dir="rtl"] .eq-cell:nth-child(4n) { border-left: 1px solid var(--line); }
  [dir="rtl"] .eq-cell:nth-child(2n) { border-left: 0; }
}
@media (max-width: 860px) {
  [dir="rtl"] .search-box { margin-right: 0; }
}
@media (max-width: 560px) {
  [dir="rtl"] .eq-cell:nth-child(2n) { border-left: 1px solid var(--line); }
}

/* Arabic faces: Manrope and Inter have no Arabic glyphs at all, so the pages
   are set in IBM Plex Sans Arabic, which carries both scripts — the Latin
   product codes and the company name keep their shape inside Arabic lines.
   Arabic needs no uppercasing (it has no case) and no wide tracking: the
   letters join, and spacing them out breaks the joins apart. */
html[lang^="ar"] {
  --display: 'IBM Plex Sans Arabic', 'Segoe UI', 'Tahoma', system-ui, sans-serif;
  --body: 'IBM Plex Sans Arabic', 'Segoe UI', 'Tahoma', system-ui, sans-serif;
}
html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3, html[lang^="ar"] h4 {
  letter-spacing: 0; line-height: 1.35; font-weight: 700;
}
html[lang^="ar"] p, html[lang^="ar"] li { line-height: 1.95; }
html[lang^="ar"] .eyebrow, html[lang^="ar"] .drawer-label, html[lang^="ar"] .btn,
html[lang^="ar"] .nav-link, html[lang^="ar"] .link-arrow, html[lang^="ar"] .chip,
html[lang^="ar"] .mini-nav a, html[lang^="ar"] .footer-label, html[lang^="ar"] .crumbs,
html[lang^="ar"] .eq-kicker, html[lang^="ar"] .tile-note, html[lang^="ar"] .prod-cat,
html[lang^="ar"] .step-time, html[lang^="ar"] .form-field label,
html[lang^="ar"] .spec-table th, html[lang^="ar"] .search-box button,
html[lang^="ar"] .eq-cell--sum h3, html[lang^="ar"] .prod-code {
  letter-spacing: 0; text-transform: none;
}
/* The product code is Latin through and through (GW-AMB-100), so it is read
   left to right even on an Arabic page — but it still sits at the right edge
   of the card, where the reader starts. */
html[lang^="ar"] .prod-code { direction: ltr; text-align: right; }

/* The executive block: portrait, name, role. With no portrait on file the slot
   is not rendered at all, so there is no empty square to look at. */
.exec { margin-block: 26px 18px; align-items: flex-start; }
.exec--nophoto { grid-template-columns: 1fr; }
.exec-photo {
  flex: 0 0 80px; width: 80px; height: 80px; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(184, 147, 76, .55);
}
.exec-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* On About and Contact the portrait is the size a business card gives it. */
.exec--large { align-items: center; gap: 30px; }
.exec--large .exec-photo { flex-basis: 132px; width: 132px; height: 132px; }
.exec--large .exec-name { font-size: 1.32rem; letter-spacing: .01em; }
.exec--large .exec-role { font-size: .9rem; }
@media (max-width: 620px) {
  /* Beside the text, the portrait leaves a column two words wide. Above it,
     the whole card reads properly on a phone. */
  .exec--large { grid-template-columns: 1fr; gap: 18px; }
  .exec--large .exec-photo { flex-basis: 104px; width: 104px; height: 104px; }
}
.contact-note { color: #8f9cad; font-size: .8rem; letter-spacing: .04em; }
/* What the international contact actually handles — five lines, no biography. */
.exec-scope { list-style: none; padding: 0; margin: 18px 0 4px; display: grid; gap: 8px; }
.exec-scope li {
  position: relative; padding-left: 20px; color: #c5cedb; font-size: .95rem;
}
.exec-scope li::before {
  content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 1px;
  background: var(--gold);
}
[dir="rtl"] .exec-scope li { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .exec-scope li::before { left: auto; right: 0; }
.exec-copy { min-width: 0; }
.exec .exec-name { color: #fff; font-size: 1.05rem; font-weight: 700; }
.exec .exec-role { color: var(--gold-2); margin-block: 5px 10px; font-size: .84rem; }
.exec--compact { gap: 12px; margin-block: 0 14px; padding: 0; border: 0; background: none; }
.exec--compact .exec-photo { flex-basis: 64px; width: 64px; height: 64px; }
.exec--compact .exec-name { font-size: .9rem; }
.exec--compact .exec-role { font-size: .78rem; }
/* Channel on the left, number on the right, in ONE shared column grid: the
   label column is as wide as the longest label there happens to be — WHATSAPP
   in English, ТЕЛЕФОН in Russian — so every number starts on the same vertical
   line, in the wide block on Contact and in the narrow footer column alike.
   A fixed width could not do that: in the footer the longer labels outgrew it
   and ran into the numbers. */
.contact-links {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 12px; margin-block: 16px 24px; min-width: 0; align-items: baseline;
}
.contact-links > a, .contact-links > p { grid-column: 1 / -1; }
.contact-links a, .contact-links p { color: #b3bfcd; margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.contact-links a:hover { color: #fff; }
.contact-links .contact-primary { color: #fff; }
/* A channel and the number that answers on it, on one line: the label keeps a
   fixed column so Phone, WeChat and WhatsApp line up under each other. */
.contact-links > .contact-row { display: contents; }
.contact-row .contact-label { grid-column: 1; }
.contact-row bdi { grid-column: 2; }
.contact-label {
  font-family: var(--display); font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2);
  white-space: nowrap;
}
.footer-top > * { min-width: 0; }
.footer-col .contact-links a { padding: 0; }
a[href^="mailto:"], bdi[dir="ltr"] { unicode-bidi: isolate; direction: ltr; }
[dir="rtl"] .form-input[type="email"], [dir="rtl"] .form-input[type="tel"] { direction: ltr; text-align: right; }

.material-range { color: var(--gold-2); font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 600; margin-block: 12px 22px; }

/* Privacy and legal information: a reading column, not a layout. The contact
   at the foot of it keeps the dark panel its type was coloured for. */
.legal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
              gap: clamp(28px, 4vw, 64px); align-items: start; }
.legal-copy { max-width: 74ch; }
.legal-copy h2 { font-size: clamp(1.12rem, 1.5vw, 1.38rem); margin: 32px 0 10px; }
.legal-copy h2:first-child { margin-top: 0; }
.legal-copy p { margin-bottom: 14px; }
.legal-copy .check-list { margin: 0 0 8px; }
.legal-contact { background: var(--ink); padding: clamp(22px, 3vw, 34px);
                 position: sticky; top: calc(var(--header-height, 79px) + 16px); }
@media (max-width: 860px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-contact { position: static; }
}
.legal-contact .exec { margin-block: 0 16px; }

/* The consent bar. It exists only on a site that has been given a measurement
   id, and it disappears for good on either answer. */
.cookie-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 80;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px clamp(16px, 3vw, 34px);
  padding: 14px clamp(16px, 4vw, 40px);
  background: var(--ink); color: #c3ccd8; border-top: 1px solid var(--line-dark);
  box-shadow: var(--shadow-lg);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; max-width: 78ch; font-size: .88rem; }
.cookie-bar a { color: var(--gold-2); text-decoration: underline; }
.cookie-bar-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* A window shorter than 760px — a 1366×768 laptop full screen, or a 1280×720
   one — has no room left to share: `--fit` is already zero below 700px and
   the strip of four figures still ended up 40px under the fold at 1100px wide,
   where the labels of the cells take two lines.
   ⛔ Nothing is made smaller here either: what gives way is the last millimetre
   of every gap — the air inside the cells, the air around the button text, the
   air between the paragraphs. Above 680px nothing below changes at all. */
@media (min-width: 901px) and (max-height: 760px) {
  /* ⛔ No padding of its own on `.hero-intro` any more: the room under the
     header is held by `.hero` itself, and the five gaps are shared out by the
     auto margins. A second helping here would make the first gap bigger than
     the other four — which is exactly what it did (fourth time a rule at the
     END of this file quietly won over the one above it). */
  .hero-title-block .eyebrow { margin-bottom: 2px; }
  .hero h1 { margin-bottom: 4px; }
  .hero-stat { padding-block: 4px; }
  .hero .btn { padding-block: 7px; }
  .hero-caps { gap: 6px; }
  /* The menu keeps its type — it is the air above and below it that goes,
     which also saves the second row of the header in the longer languages. */
  .nav-link { padding-block: 6px; }
  /* Georgian sets four lines where the other languages set two — the script
     is taller and its words are longer. The type keeps its size; only the
     leading of those four figures closes up, and only on a short window. */
  html[lang^="ka"] .hero-stat,
  html[lang^="ka"] .hero-stat b,
  html[lang^="ka"] .hero-stat span { line-height: 1.3; }
}

/* ⛔ SIXTH TIME: a rule further down this file wins over the one above it. The
   opening screen of a phone carries no padding of its own — the header stands
   in the flow above it and the only spacing is the room shared out equally
   between the blocks. Written last, so nothing can quietly take it back. */
@media (max-width: 760px) {
  /* Room for the header and nothing else: on the homepage it floats OVER this
     block, so the words need that much or they hide behind it — but not a
     pixel more, or the gap at the top is bigger than the rest. */
  .hero-intro { padding-top: var(--header-height, 68px); padding-bottom: 0; }
  /* ⛔ FIVE lines, not two blocks (his correction 22.09): the name, the title,
     the promise, the paragraph and the button each get an equal share of the
     room. The two wrappers are dissolved for that, so their side margins and
     their layer are given back here by name. */
  .hero-intro > .shell { display: contents; }
  .hero-intro .eyebrow, .hero-intro h1, .hero-intro .hero-sub,
  .hero-intro .hero-support, .hero-intro .cta-row {
    position: relative; z-index: 2;
    margin-top: auto; margin-bottom: 0;
    margin-inline: clamp(20px, 3.5vw, 76px);
  }
  /* ⛔ The button is pinned, like it is on every inner page (his word 22.09):
     the same 18px from the bottom edge in every language. Only the gaps ABOVE
     it take up what a longer or shorter translation leaves over. */
  .hero-intro .cta-row { margin-bottom: 36px; }
}

/* ⛔ "Desktop site" on a phone (his word 24.09): the browser hands the page a
   computer-width window that is TALLER than it is wide (about 980×2000), so a
   first screen of `100svh` ran to the foot of the phone — the phone layout, not
   the computer one. A computer window is never taller than wide, so here the
   first screen takes the height a 3:2 window of this width would give it (a
   16:9 one left the words no air at 980px: the button sat on the strip) and
   the page goes on below, exactly as it does on a computer. The words still
   make it taller if they need the room. Written last so nothing takes it back. */
@media (min-width: 901px) and (orientation: portrait) {
  .hero { min-height: 66.67vw; }
}
/* ---------- the chain of work: the arrow between the steps ---------------
   On a phone the eight cells stand in one column, so the arrow turns
   downwards (his word 23.09): the same badge, moved from the side of the
   cell to the middle of its bottom edge. Written at the very end of the
   file because both the responsive block and the RTL block above also
   position `.eq-plus`, and the arrow has to land in the same place in every
   language — a rule moved after its winner for the seventh time here.
   In a right-to-left language the chain itself reads right to left, so the
   arrow is mirrored with it. */
[dir="rtl"] .eq--flow .eq-plus svg { transform: scaleX(-1); }

@media (max-width: 760px) {
  .eq--flow .eq-cell .eq-plus,
  [dir="rtl"] .eq--flow .eq-cell .eq-plus {
    display: grid;
    inset: auto auto -13px 50%;
    transform: translateX(-50%) rotate(90deg);
  }
  [dir="rtl"] .eq--flow .eq-plus svg { transform: none; }
}