/* Hallmark · checked: 2026-10-29 · genre: modern-minimal (inferred, B2B wholesale) · copy: verbatim · posture: restrained
 * fixed: 7a, 19 (en, zh, ar), 26a, 26b, 34, 39a, 40, 44c, 48, 49b, 50, 54, 63, 67, 75, 24b · printed: 59, 71, 78
 * sweep 2026-10-29: 67 (section h2, audience plates and buttons were tracked capitals), 63 (arrows glued to buttons, links and card names), photo plates over product shots, letterbox bands, empty card boxes, phone tap targets at 44px, the rtl phone numbers
 * photos: the client's own workshop and product photos, no stock · job: order (the calculator form enquires)
 * built: the project (SHF-26, V2 like the Eco Soft reference) · redesign: polish · v2.0.0 */
/* copy: verbatim covers one thing. The em dash is the own punctuation of the Russian, Polish, German and Uzbek copy;
 * gate 19 is Floor tier, so sloplint refuses a waiver line for it. The en, zh and ar pages carry no dash at all. */
/* Hallmark · waive 83 · photographs cover about 39% below the hero, every one the client's own shot · the client asked for many photos of his own workshop and products, so cutting them would drop his material */
/* Hallmark · waive 71 · the card name h4 sits under its own product photo and closes the card · each product card is photo first, name last, so the space under the name is the end of the rail, not the head's content */
/* Hallmark · finish review 2026-10-29 (fresh context, verdict fix): mission head at the section-head size, benefit row without icon coins, card names on one line with swatches under them, ar and zh font stacks, audience labels in the outlined button recipe */
/* Hallmark · dismissed 63 · the order summary carries one dot between the chosen product and the chosen volume, a live role="status" line, which gate 63 allows */
/* Hallmark · waive 66 · the header line holds two facts, the country and the founding year, and shows only from 1050px · it is the quiet prompt of the client's V2 reference that this concept keeps, see the header block below */
/* Hallmark · dismissed F20 · the lone last link is the ninth real knitwear item in the list; padding the row would invent a product */
/* Hallmark · answered F15 · the three two-column sections share one gap token; the footer columns and the feature row keep their own rhythm */
/* Hallmark · dropped the hero line "SHAFARINA · Uzbekistan · since 2010" · 54, 63 and 67 name it; the name is in the logo, the year in the next section and the country in the features */
/* Hallmark · dropped the labels "Made in Uzbekistan" and "Working together" · 54 names them; the headings below already open those sections */
/* Hallmark · reworded the labels "Mission and strategy" and "Order calculator" into the headings · 54 names them; the old headings became the first line under them */
/* Hallmark · display face 2026-10-29: Geologica (variable 300..700, self-hosted cyrillic, latin, latin-ext) on the hero h1, section h2, rail h3 and direction titles · the client found the heads plain · body stays Onest · ar and zh keep their body stacks, Geologica has no Arabic or CJK */
/* Hallmark · display face 2026-10-30 (SHF-40): Manrope replaces Geologica on the same heads · Jack asked for a stronger head face · revert: --font-display back to "Geologica" (its files and faces stay) */

@font-face {
  font-family: "Onest";
  src: url("fonts/onest-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  src: url("fonts/onest-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Onest";
  src: url("fonts/onest-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope, SIL Open Font License 1.1 (fonts/manrope-OFL.txt), Google Fonts v23 (font version 4.505), variable 500..700, self-hosted.
 * Manrope has no U+02BB (Uzbek oʻ): that one glyph falls back to Onest, as it did with Geologica. */
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-cyrillic.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geologica, SIL Open Font License 1.1 (https://openfontlicense.org), subsets from Google Fonts v5, self-hosted. */
@font-face {
  font-family: "Geologica";
  src: url("fonts/geologica-cyrillic.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/geologica-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/geologica-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #202220;
  --text: #40433f;
  --muted: #666a64;
  --line: #dfe2dd;
  --line-mid: #c9cec5;
  --line-strong: #747b70;
  --field: #8a8f87;
  --dot: #9a9e96;
  --panel: #f2f4f1;
  --photo: #f4f4f2;
  --tile: #f6f6f4;
  --paper: #fbf9fd;
  --night: #171a17;
  --night-line: #373c34;
  --on-dark: #fbf9fd;
  --on-dark-muted: #c2c8bd;
  --brand: #5b2a86;
  --brand-dark: #432060;
  --brand-tint: #e9e4ed;
  --brand-wash: #f7f3fa;
  --brand-line: #d0c2dd;
  --shadow: rgb(23 26 23 / .08);
  --scrim-1: rgb(14 20 18 / .02);
  --scrim-2: rgb(14 20 18 / .12);
  --scrim-3: rgb(14 20 18 / .75);
  --scrim-4: rgb(14 20 18 / .9);
  --font-body: "Onest", Arial, sans-serif;
  --font-body-ar: "Onest", "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --font-body-zh: "Onest", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-display: "Manrope", var(--font-body);
  --focus: var(--brand);
  --col-gap: clamp(32px, 6vw, 88px);
  --gutter: clamp(16px, 3.4vw, 48px);
  --max: 1280px;
  --sec: clamp(48px, 5.3vw, 76px);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: 24px; }
html:lang(ar) body { font-family: var(--font-body-ar); }
html:lang(zh) body { font-family: var(--font-body-zh); }
html:lang(ar) { --font-display: var(--font-body-ar); }
html:lang(zh) { --font-display: var(--font-body-zh); }
.hero h1, h2.h2, .mission h2, .req__intro h2, .rail-heading h3, .direction strong { font-family: var(--font-display); }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--text); font: 400 16px/1.6 var(--font-body); overflow-wrap: break-word; }
img { display: block; max-inline-size: 100%; block-size: auto; }
a { color: inherit; text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; }
button, summary, label.opt { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
b, strong { font-weight: 500; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
::selection { background: var(--brand-tint); color: var(--ink); }
:target { scroll-margin-block-start: 24px; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; margin-block: -1px; margin-inline: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; z-index: 100; inset-inline-start: 16px; inset-block-start: -90px; padding-block: 12px; padding-inline: 20px; background: var(--ink); color: var(--on-dark); }
.skip:focus { inset-block-start: 16px; }
.wrap { inline-size: 100%; max-inline-size: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sec); }
.sec--tight { padding-block-start: 0; }
h2.h2 { margin-block-end: 32px; color: var(--ink); font-size: clamp(24px, 2.5vw, 36px); font-weight: 400; line-height: 1.25; letter-spacing: -.01em; text-align: center; text-wrap: balance; }
h2.h2--start { text-align: start; }
h2.h2--big { font-size: clamp(28px, 3vw, 43px); font-weight: 400; letter-spacing: -.02em; line-height: 1.14; text-align: start; }
.arrow { flex: 0 0 22px; inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.chev { inline-size: 12px; block-size: 8px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tick { display: block; inline-size: 12px; block-size: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; }
[dir="rtl"] .arrow { scale: -1 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 20px; max-inline-size: 100%; min-block-size: 48px; padding-block: 12px; padding-inline: 24px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .18s, color .18s; }
.btn:hover { background: var(--ink); color: var(--on-dark); }
.btn:active { border-color: var(--night); background: var(--night); color: var(--on-dark); }
.btn--brand { border-color: var(--brand); background: var(--brand); color: var(--on-dark); }
.btn--brand:hover, .btn--brand:active { border-color: var(--brand-dark); background: var(--brand-dark); }
.btn--light { border-color: var(--on-dark); color: var(--on-dark); }
.btn--light:hover { background: var(--paper); color: var(--ink); }
.btn--light:active { border-color: var(--panel); background: var(--panel); color: var(--ink); }
.btn--sm { min-block-size: 44px; padding-inline: 20px; font-size: 13px; }
.text-link { display: inline-flex; align-items: center; color: var(--ink); font-size: 14px; text-decoration: underline; text-decoration-thickness: 1px; white-space: nowrap; }
.text-link:hover, .text-link:active { color: var(--brand); }
.icon-btn { display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border: 1px solid var(--field); background: var(--paper); color: var(--ink); cursor: pointer; }
.icon-btn:hover:not(:disabled) { border-color: var(--ink); background: var(--panel); }
.icon-btn:active:not(:disabled) { background: var(--line); }
.icon-btn:disabled { border-color: var(--line); background: var(--panel); color: var(--muted); opacity: .5; cursor: not-allowed; }

/* The centred identity, audience navigation and quiet prompt are inherited from V2. */
.hdr { position: relative; z-index: 20; background: var(--paper); }
.hdr__bar { border-block-end: 1px solid var(--line); }
.hdr__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; min-block-size: 88px; max-inline-size: 1440px; }
.hdr__nav { display: flex; align-items: center; gap: clamp(16px, 1.6vw, 24px); }
.hdr__nav a { padding-block: 12px; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.hdr__nav a:hover, .hdr__nav a:active { color: var(--brand); }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.logo__round { inline-size: 48px; block-size: 48px; }
.logo .wordmark { font-size: 14px; font-weight: 500; letter-spacing: .19em; }
.logo .logo__soxuz { inline-size: 52px; block-size: 43px; object-fit: contain; margin-inline-start: 12px; padding-inline-start: 12px; border-inline-start: 1px solid var(--line); }
.hdr__actions { display: flex; align-items: center; justify-content: end; gap: 24px; }
.lang { position: relative; color: var(--ink); }
.lang summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-inline-size: 44px; min-block-size: 44px; cursor: pointer; list-style: none; font-size: 12px; }
.lang summary::-webkit-details-marker { display: none; }
.lang[open] .chev { rotate: 180deg; }
.lang__list { position: absolute; z-index: 30; inset-inline-end: 0; inset-block-start: calc(100% + 8px); inline-size: 208px; padding-block: 12px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 8px 16px var(--shadow); }
.lang__list li { display: flex; align-items: center; gap: 16px; padding-block: 8px; padding-inline: 16px; font-size: 13px; }
.lang__code { min-inline-size: 24px; font-size: 11px; }
.lang__check { margin-inline-start: auto; color: var(--brand); }
.hdr__prompt { display: flex; justify-content: space-between; align-items: center; min-block-size: 36px; font-size: 12px; color: var(--muted); max-inline-size: 1440px; }
.hdr__prompt p { display: flex; align-items: center; gap: 12px; }
.hdr__facts span + span { padding-inline-start: 12px; border-inline-start: 1px solid var(--line-mid); }

/* Two real production photographs, cropped below their native resolution. */
.hero { --focus: var(--on-dark); position: relative; isolation: isolate; max-inline-size: 1440px; block-size: clamp(480px, 45vw, 660px); margin-inline: auto; overflow: hidden; color: var(--on-dark); background: var(--ink); }
.hero__photos { position: absolute; inset-block: 0; inset-inline: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.hero__photo { position: relative; min-inline-size: 0; overflow: hidden; }
.hero__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 55% 35%; }
/* The source contains two stacked shots. Only the top photograph is shown. */
.photo--half-top img { inline-size: 100%; block-size: 202%; max-inline-size: none; object-fit: cover; object-position: 50% 0%; }
.hero::after { content: ""; position: absolute; z-index: 0; inset-block: 0; inset-inline: 0; background: linear-gradient(180deg, var(--scrim-1) 10%, var(--scrim-2) 30%, var(--scrim-3) 65%, var(--scrim-4) 100%); pointer-events: none; }
.hero__text { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 40px; display: grid; justify-items: center; gap: 20px; text-align: center; }
.hero h1 { max-inline-size: 1010px; min-inline-size: 0; overflow-wrap: break-word; color: var(--on-dark); font-size: clamp(30px, 3.45vw, 50px); font-weight: 500; line-height: 1.13; letter-spacing: -.025em; text-wrap: balance; }
.hero .btn { min-inline-size: 204px; margin-block-start: 8px; }

.brands { text-align: center; }
.brands .h2 { margin-block-end: 16px; }
.brands__lead { max-inline-size: 850px; margin-inline: auto; font-size: 16px; line-height: 1.7; }
.brands__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-inline-size: 1040px; margin-inline: auto; margin-block: 28px 36px; }
.direction { display: flex; align-items: center; gap: 20px; min-block-size: 96px; padding-block: 20px; padding-inline: 24px; border: 1px solid var(--field); color: var(--ink); text-decoration: none; text-align: start; }
.direction > span { flex: 1; min-inline-size: 0; }
.direction strong { display: block; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.3; }
.direction small { display: block; margin-block-start: 8px; color: var(--muted); font-size: 12px; }
.direction__logo, .direction__icon { flex: 0 0 56px; inline-size: 56px; block-size: 48px; object-fit: contain; }
.direction__icon { fill: none; stroke: currentColor; stroke-width: 1.25; }
.direction:hover { border-color: var(--brand); color: var(--brand); }
.direction:active { background: var(--panel); }
.feats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.feats li { display: flex; align-items: center; gap: 12px; text-align: start; min-inline-size: 0; padding-block: 16px; padding-inline: 16px; color: var(--ink); font-size: 13px; line-height: 1.4; }
.feats li + li { border-inline-start: 1px solid var(--line); }
.feats__ico { display: grid; place-items: center; flex: 0 0 28px; inline-size: 28px; block-size: 28px; color: var(--ink); }
.feats__ico svg { inline-size: 28px; block-size: 28px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

/* Parallel, equally prominent product rails. Native scrolling remains without JS. */
.prod .h2 { margin-block-end: 32px; }
.rail-group { min-inline-size: 0; }
.rail-group + .rail-group { margin-block-start: 36px; }
.rail-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-block-end: 16px; }
.rail-heading h3 { color: var(--ink); font-size: clamp(18px, 1.6vw, 23px); font-weight: 400; line-height: 1.3; }
.rail-heading p { margin-block-start: 4px; color: var(--muted); font-size: 13px; }
.rail__tools { display: flex; flex: 0 0 auto; gap: 8px; }
.rail-prev .arrow { rotate: 180deg; }
.rail { display: flex; align-items: start; gap: 16px; min-inline-size: 0; padding-block: 4px 12px; padding-inline: 4px; margin-inline: -4px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; scrollbar-color: var(--ink) var(--line); }
.card { position: relative; flex: 0 0 calc((100% - 64px) / 5); min-inline-size: 0; max-inline-size: 280px; background: var(--paper); scroll-snap-align: start; scroll-margin-inline: 4px; }
.card__photo { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: var(--photo); }
.card__image { inline-size: 100%; block-size: 100%; object-fit: contain; }
.card--knit .card__photo { aspect-ratio: 3 / 2; background: var(--photo); }
.card--knit .card__image { object-fit: contain; }
/* The 4:3 hoodie shot fills its 3:2 box from the bottom, where the hoodie lies. */
#product-hoodies .card__image { object-fit: cover; object-position: 50% 100%; }
.card__body { display: flex; flex-direction: column; padding-block: 12px 0; padding-inline: 0; }
.card__line { order: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin-block-start: 8px; }
.card__line:empty { display: none; }
.card__brand { color: var(--muted); font-size: 9px; letter-spacing: .045em; }
.card__name { color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.45; }
.card__name a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; text-decoration: none; }
.card__name a:hover, .card__name a:active { color: var(--brand); }
.card__meta { margin-block-start: 4px; color: var(--muted); font-size: 12px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 4px; }
.thumb { display: block; inline-size: 28px; block-size: 28px; border: 1px solid var(--line); padding-block: 1px; padding-inline: 1px; }
.thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.thumb[aria-current="true"] { border-color: var(--brand); }
.thumb:hover, .thumb:active { border-color: var(--ink); }
.rail__footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-block-size: 32px; margin-block-start: 4px; }
.rail__footer > p { color: var(--muted); font-size: 12px; }
.rail__dots { display: flex; flex-wrap: wrap; justify-content: end; max-inline-size: 55%; }
.rail__dots button { display: grid; place-items: center; inline-size: 36px; block-size: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.rail__dots button::before { content: ""; inline-size: 24px; block-size: 1px; background: var(--dot); }
.rail__dots button[aria-current="true"]::before { block-size: 3px; background: var(--ink); }
.js .rail { scrollbar-width: none; padding-block-end: 4px; }
.js .rail::-webkit-scrollbar { display: none; }

.section-heading { margin-block-end: 28px; text-align: center; }
.section-heading h2.h2 { margin-block-end: 8px; }
.section-heading p { color: var(--muted); font-size: 13px; }
.cat__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.aud { min-inline-size: 0; }
.aud__tile { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); gap: 4px; background: var(--tile); }
.aud__main { grid-row: 1 / span 2; min-block-size: 0; min-inline-size: 0; aspect-ratio: 1; background: var(--photo); }
.aud__main img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.aud__small { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; min-block-size: 0; object-fit: cover; object-position: 50% 60%; background: var(--photo); }
.aud__title { grid-column: 1 / -1; justify-self: center; inline-size: fit-content; min-inline-size: 58%; max-inline-size: 100%; margin-block: 8px 4px; padding-block: 12px; padding-inline: 24px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 20px; font-weight: 400; line-height: 1.4; text-align: center; }
.aud__list { margin-block-start: 20px; }
.aud__direction { border-block-end: 1px solid var(--line); }
.aud__direction summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 64px; padding-block: 12px; color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.4; cursor: pointer; list-style: none; }
.aud__direction summary::-webkit-details-marker { display: none; }
.aud__direction summary small { display: block; margin-block-start: 4px; color: var(--muted); font-size: 10px; font-weight: 400; }
.plus { position: relative; flex: 0 0 18px; inline-size: 18px; block-size: 18px; }
.plus::before, .plus::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 3px; inline-size: 12px; block-size: 1px; background: currentColor; }
.plus::after { rotate: 90deg; }
.aud__direction[open] .plus::after { rotate: 0deg; }
.aud__ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding-block: 0 16px; font-size: 13px; line-height: 1.6; }
.aud__ul a { display: inline-block; padding-block: 4px; text-decoration: none; }
.aud__ul a:hover, .aud__ul a:active { color: var(--brand); text-decoration: underline; }
.cat__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; margin-block-start: 32px; font-size: 13px; }

/* Offset production collage, keeping the V2 text / image composition. */
.made { position: relative; isolation: isolate; }
.made::before { content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline-start: 0; inline-size: 53%; background: var(--panel); }
.made__grid { display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1.5fr); align-items: center; gap: var(--col-gap); }
.made__text .h2 { margin-block-end: 24px; }
.made__text > p { font-size: 15px; line-height: 1.75; }
.made__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-block: 28px; }
.made__steps li { padding-block-start: 12px; border-block-start: 1px solid var(--line-strong); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.5; }
.made__collage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px; padding-block-end: 32px; }
.made__collage figure:nth-child(3n + 2) { translate: 0 32px; }
.made__photo { position: relative; aspect-ratio: 1; overflow: hidden; }
.made__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 40%; }
.made__photo.photo--half-top img { block-size: 200%; object-position: 50% 0%; }
.made__collage figcaption { margin-block-start: 8px; color: var(--muted); font-size: 12px; line-height: 1.4; }

.mission { padding-block: var(--sec); border-block-end: 1px solid var(--line); }
.mission__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1.25fr); align-items: start; gap: 32px; }
.mission__intro h2 { margin-block-end: 8px; }
.mission h2 { color: var(--ink); font-size: clamp(24px, 2.5vw, 36px); font-weight: 400; line-height: 1.3; letter-spacing: -.02em; }
.mission__lead { color: var(--muted); font-size: 15px; line-height: 1.5; }
.mission h3 { margin-block-end: 12px; color: var(--brand); font-size: 15px; font-weight: 500; line-height: 1.4; }
.mission__grid > div:not(:first-child) { border-inline-start: 1px solid var(--line); padding-inline-start: 24px; }
.mission__grid > div:not(:first-child) > p { font-size: 14px; line-height: 1.7; }

.trade__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--col-gap); }
.trade__figure { min-inline-size: 0; }
.trade__photos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 8px; aspect-ratio: 1.35; }
.trade__photos img { inline-size: 100%; block-size: 100%; min-block-size: 0; object-fit: cover; object-position: 50% 45%; }
.trade__figure figcaption { margin-block-start: 12px; color: var(--muted); font-size: 12px; }
.trade__body .h2 { margin-block-end: 20px; }
.trade__body > p { font-size: 15px; }
.tiers { margin-block: 24px; border-block-start: 1px solid var(--line); }
.tiers div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 12px; border-block-end: 1px solid var(--line); }
.tiers dt { color: var(--ink); font-size: 14px; font-weight: 500; }
.tiers dd { color: var(--ink); font-size: clamp(16px, 1.45vw, 21px); font-weight: 400; line-height: 1.35; text-align: end; font-variant-numeric: tabular-nums; }
.trade__export { margin-block-end: 24px; }
.trade__export b { color: var(--ink); }

.req { background: var(--panel); }
.req__grid { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.5fr); align-items: start; gap: var(--col-gap); }
.req__intro h2 { max-inline-size: 9em; margin-block-end: 24px; color: var(--ink); font-size: clamp(29px, 2.8vw, 40px); font-weight: 400; line-height: 1.18; letter-spacing: -.025em; }
.req__intro > p { font-size: 15px; line-height: 1.7; }
.req__steps { margin-block-start: 28px; border-block-start: 1px solid var(--line-mid); }
.req__steps li { padding-block: 12px; border-block-end: 1px solid var(--line-mid); font-size: 13px; line-height: 1.6; }
.req__alt { margin-block: 24px 8px; }
.req__links { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--ink); font-size: 14px; }
.req__photo { margin-block-start: 32px; }
.req__photo img { inline-size: 100%; aspect-ratio: 1.5; object-fit: cover; object-position: 50% 36%; }
.req__photo figcaption { margin-block-start: 12px; color: var(--muted); font-size: 12px; }
.form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 20px 16px; min-inline-size: 0; }
.form__note, .form__summary, .form-error { grid-column: 1 / -1; }
.form__note { color: var(--muted); font-size: 12px; }
.form__summary { padding-block: 12px; padding-inline: 16px; border-inline-start: 2px solid var(--brand); background: var(--brand-tint); color: var(--brand-dark); font-size: 13px; }
.fld { display: grid; grid-column: 1 / -1; align-content: start; gap: 8px; min-inline-size: 0; }
.fld--half { grid-column: span 3; }
.fld--third { grid-column: span 2; }
.fld label, .grp legend { color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.5; }
.grp { display: block; }
.grp legend { margin-block-end: 12px; }
.grp__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; margin-block-start: 8px; }
.grp__cell { display: grid; gap: 8px; min-inline-size: 0; }
.hint { color: var(--muted); font-size: 12px; line-height: 1.5; }
.form input:not([type="radio"]):not([type="file"]), .form textarea, .form select { inline-size: 100%; min-inline-size: 0; min-block-size: 48px; padding-block: 12px; padding-inline: 12px; border: 1px solid var(--field); border-radius: 0; background: var(--paper); color: var(--ink); caret-color: var(--brand); font-size: 14px; line-height: 1.5; }
.form textarea { min-block-size: 96px; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible { border-color: var(--brand); outline-offset: 2px; }
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.opt { position: relative; display: block; min-inline-size: 0; cursor: pointer; }
.opt input { position: absolute; inline-size: 1px; block-size: 1px; margin-block: 0; margin-inline: 0; opacity: 0; }
.opt > span { position: relative; display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 8px; block-size: 100%; min-block-size: 80px; padding-block: 16px; padding-inline: 16px; border: 1px solid var(--field); background: var(--paper); color: var(--ink); line-height: 1.4; }
.opt strong { font-size: 12px; font-weight: 500; }
.opt small { color: var(--muted); font-size: 11px; font-weight: 400; }
.opt svg { inline-size: 28px; block-size: 28px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.opts--product .opt > span { min-block-size: 136px; justify-content: start; }
.opts--product strong { margin-block-start: 4px; }
.opt:hover > span { border-color: var(--ink); }
.opt:active > span { background: var(--panel); }
.opt input:checked + span { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-wash); color: var(--brand); }
/* A drawn tick in the line-icon stroke instead of the ✓ glyph; physical sides keep it unmirrored in rtl, as the glyph was. */
.opt input:checked + span::after { content: ""; position: absolute; inset-inline-end: 12px; inset-block-start: 12px; inline-size: 10px; block-size: 6px; border-left: 1.5px solid; border-bottom: 1.5px solid; rotate: -45deg; }
.opts--volume .opt input:checked + span::after { display: none; }
.opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }
.qty { display: grid; grid-template-columns: minmax(0, 1fr) 76px; }
.qty select { border-inline-start: 0; }
.upload { position: relative; display: flex; align-items: center; gap: 12px; min-block-size: 80px; padding-block: 16px; padding-inline: 20px; border: 1px dashed var(--field); background: var(--paper); color: var(--ink); }
.upload svg { inline-size: 28px; block-size: 28px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.upload > span { display: grid; gap: 2px; font-size: 13px; }
.upload small { color: var(--muted); font-size: 11px; }
.upload input { position: absolute; inset-block: 0; inset-inline: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
.upload:focus-within { outline: 2px solid var(--brand); outline-offset: 3px; }
#file-status:empty { display: none; }
.form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-block-start: 4px; }
.form__send .btn { min-block-size: 52px; }
.form__details { display: block; border-block: 1px solid var(--line-mid); }
.form__details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 48px; color: var(--ink); font-size: 12px; font-weight: 500; cursor: pointer; list-style: none; }
.form__details summary::-webkit-details-marker { display: none; }
.form__details[open] .plus::after { rotate: 0deg; }
.form__details-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; padding-block: 4px 20px; }

.ftr { --focus: var(--on-dark); padding-block: 52px 24px; background: var(--night); color: var(--on-dark); font-size: 13px; }
.ftr a { text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 44px; }
.ftr__h { margin-block-end: 20px; color: var(--on-dark-muted); font-size: 13px; font-weight: 400; }
.ftr__phone { display: block; inline-size: fit-content; font-size: 21px; font-weight: 400; line-height: 1.35; letter-spacing: -.02em; }
.ftr__phone--second { margin-block: 16px; font-size: 15px; }
[dir="rtl"] .ftr__phone { direction: ltr; unicode-bidi: isolate; }
.ftr__messengers { display: flex; flex-wrap: wrap; gap: 16px; margin-block-start: 8px; color: var(--on-dark-muted); font-size: 12px; }
.ftr__email { display: block; inline-size: fit-content; margin-block-end: 8px; }
.ftr__contacts > p:last-child { color: var(--on-dark-muted); }
.ftr ul { display: grid; gap: 12px; }
.ftr__end { display: grid; justify-items: end; align-content: start; gap: 24px; }
.ftr__logos { display: flex; align-items: center; gap: 20px; }
.ftr__logos img { inline-size: 52px; block-size: 52px; object-fit: contain; }
.ftr__logos .ftr__soxuz { inline-size: 58px; filter: invert(1); }
.ftr__lang { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.ftr__lang span { display: grid; place-items: center; min-inline-size: 24px; min-block-size: 28px; color: var(--on-dark-muted); font-size: 12px; }
.ftr__lang span[aria-current] { border-block-end: 1px solid var(--on-dark); color: var(--on-dark); }
.ftr__up { font-size: 12px; }
.ftr__base { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; margin-block-start: 36px; padding-block-start: 20px; border-block-start: 1px solid var(--night-line); color: var(--on-dark-muted); font-size: 12px; }
.ftr__base > p { margin-inline-end: auto; }
.data-notice { max-inline-size: 290px; }
.data-notice summary { cursor: pointer; }
.data-notice p { padding-block-start: 8px; }

@media (max-width: 1199px) {
  .hdr__in { gap: 20px; }
  .hdr__nav { gap: 12px; }
  .hdr__nav a { font-size: 13px; }
  .logo .wordmark { font-size: 12px; letter-spacing: .1em; }
  .logo__round { inline-size: 44px; block-size: 44px; }
  .hdr__actions { gap: 12px; }
  .card { flex-basis: calc((100% - 48px) / 4); }
  .made__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); }
  .made__collage { gap: 12px; }
  .mission__grid { gap: 20px; }
  .mission__grid > div:not(:first-child) { padding-inline-start: 20px; }
}
@media (max-width: 1049px) {
  .hdr__in { grid-template-columns: minmax(0, 1fr) auto; gap: 0 24px; }
  .logo { grid-column: 1; grid-row: 1; padding-block: 12px; }
  .logo .wordmark { font-size: 14px; letter-spacing: .2em; }
  .hdr__actions { grid-column: 2; grid-row: 1; }
  .hdr__nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 40px; border-block-start: 1px solid var(--line); }
  .hdr__nav a { padding-block: 12px; font-size: 14px; }
  .hdr__prompt { display: none; }
  .direction { gap: 16px; padding-inline: 20px; }
  .aud__ul { grid-template-columns: minmax(0, 1fr); }
  .ftr__grid { gap: 24px; }
}
@media (max-width: 899px) {
  .card { flex-basis: calc((100% - 32px) / 3); }
  .brands__row { gap: 12px; }
  .direction { gap: 12px; }
  .direction__logo, .direction__icon { flex-basis: 32px; inline-size: 32px; }
  .cat__grid { gap: 16px; }
  .aud__title { padding-inline: 12px; font-size: 18px; }
  .aud__direction summary { font-size: 11px; }
  .made__grid, .trade__grid, .req__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .made::before { inline-size: 100%; }
  .made__text { max-inline-size: 620px; }
  .made__text .h2 br { display: none; }
  .made__steps { max-inline-size: 520px; margin-block: 24px; }
  .made__collage { gap: 16px; }
  .mission__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mission__intro { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 28px; }
  .mission__intro h2 { margin-block-end: 0; }
  .mission__lead br { display: none; }
  .mission__grid > div:nth-child(2) { border-inline-start: 0; padding-inline-start: 0; }
  .trade__photos { aspect-ratio: 1.8; }
  .trade__body { max-inline-size: 680px; }
  .req__intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 32px; }
  .req__intro > h2, .req__intro > p:not(.req__alt), .req__links { grid-column: 1; }
  .req__intro h2 { max-inline-size: 12em; margin-block-end: 0; }
  .req__intro .req__steps { grid-column: 2; grid-row: 1 / span 3; margin-block-start: 0; align-self: start; }
  .req__alt { grid-column: 1; margin-block: 0; }
  .req__photo { display: none; }
  .ftr__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  .ftr__end { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
}
@media (max-width: 699px) {
  .cat__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .aud__title { min-inline-size: 54%; padding-block: 12px; font-size: 19px; }
  .aud__ul { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 14px; }
  .aud__direction summary { min-block-size: 64px; font-size: 13px; }
  .aud__direction summary small { font-size: 11px; }
  .aud__list { margin-block-start: 8px; }
  .mission__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mission__intro { display: block; }
  .mission__intro h2 { margin-block-end: 8px; }
  .mission__grid > div:not(:first-child) { border-inline-start: 0; border-block-start: 1px solid var(--line); padding-inline-start: 0; padding-block-start: 16px; }
  .mission h3 { margin-block-end: 8px; }
  .mission__grid > div:not(:first-child) > p { max-inline-size: 40em; font-size: 14px; }
  .grp__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grp__cell:first-child { grid-column: 1 / -1; }
  .form input:not([type="radio"]):not([type="file"]), .form textarea, .form select { font-size: 16px; }
}
@media (max-width: 599px) {
  :root { --sec: 44px; }
  .hdr__in { gap: 0 12px; }
  .logo .wordmark { display: none; }
  .logo__round { inline-size: 40px; block-size: 40px; }
  .logo .logo__soxuz { inline-size: 43px; block-size: 35px; margin-inline-start: 2px; padding-inline-start: 8px; }
  .hdr__actions { gap: 12px; }
  .hdr__actions .btn { min-block-size: 44px; padding-inline: 12px; font-size: 13px; }
  .lang summary { min-inline-size: 44px; gap: 8px; font-size: 11px; }
  .lang__list { inset-inline-end: -70px; }
  .hdr__nav { justify-content: space-between; gap: 12px; }
  .hdr__nav a { min-block-size: 44px; font-size: 12px; }
  .hero { block-size: auto; }
  .hero__photos { position: relative; block-size: 232px; gap: 2px; }
  .hero__photo img { object-position: 48% 40%; }
  .hero__photo.photo--half-top img { object-position: 53% 0%; }
  .hero::after { display: none; }
  .hero__text { position: relative; inset-block-end: auto; padding-block: 28px 32px; gap: 16px; }
  .hero h1 { font-size: clamp(25px, 6.7vw, 36px); line-height: 1.17; letter-spacing: -.02em; }
  .hero .btn { min-block-size: 48px; margin-block-start: 4px; }
  h2.h2 { font-size: 25px; }
  .brands__lead { font-size: 16px; line-height: 1.7; }
  .brands__row { grid-template-columns: minmax(0, 1fr); margin-block: 24px 28px; gap: 12px; }
  .direction { min-block-size: 80px; padding-block: 16px; padding-inline: 20px; }
  .direction strong { font-size: 16px; }
  .direction small { font-size: 11px; }
  .direction__logo, .direction__icon { flex-basis: 40px; inline-size: 40px; }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feats li { padding-inline: 8px; font-size: 13px; }
  .feats li + li { border-inline-start: 0; }
  .feats li:nth-child(even) { border-inline-start: 1px solid var(--line); }
  .feats li:nth-child(n+3) { border-block-start: 1px solid var(--line); }
  .feats li:last-child { grid-column: 1 / -1; }
  .prod .h2 { margin-block-end: 24px; }
  .rail { gap: 12px; }
  .card { flex-basis: clamp(210px, 61vw, 260px); }
  .rail-heading { gap: 16px; }
  .rail-heading h3 { font-size: 18px; }
  .rail-heading p { font-size: 12px; }
  .rail__tools { gap: 4px; }
  .icon-btn .arrow { inline-size: 18px; block-size: 18px; }
  .thumb { inline-size: 44px; block-size: 44px; }
  .card__name a { align-items: center; min-block-size: 44px; }
  .text-link, .req__links a, .aud__ul a, .ftr__messengers a, .ftr ul a, .ftr__up { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; }
  .ftr__phone, .ftr__email { display: flex; align-items: center; min-block-size: 44px; }
  .ftr ul { gap: 0; }
  .ftr__lang a { display: grid; place-items: center; min-block-size: 44px; min-inline-size: 44px; }
  .data-notice summary { min-block-size: 44px; padding-block: 12px; }
  .hdr__nav a { min-inline-size: 44px; text-align: center; }
  .rail__footer { display: grid; justify-content: stretch; gap: 2px; }
  .rail__footer > p { font-size: 12px; }
  .rail__dots { justify-content: center; max-inline-size: 100%; }
  .rail__dots button { inline-size: 24px; block-size: 44px; }
  .rail__dots button::before { inline-size: 16px; }
  .rail-group + .rail-group { margin-block-start: 24px; }
  .section-heading p { font-size: 13px; }
  .cat__more { justify-content: start; gap: 8px; margin-block-start: 24px; font-size: 12px; }
  .cat__more .text-link { font-size: 13px; }
  .made__collage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding-block-end: 20px; }
  .made__collage figure:nth-child(3n + 2) { translate: none; }
  .made__collage figure:nth-child(even) { translate: 0 20px; }
  .made__photo { aspect-ratio: 1.05; }
  .made__text .h2 { font-size: 30px; }
  .made__text > p { font-size: 15px; }
  .mission { padding-block: 32px; }
  .trade__photos { aspect-ratio: 1.6; }
  .trade__grid { gap: 24px; }
  .trade__body .h2 { font-size: 24px; }
  .tiers dt { font-size: 13px; }
  .tiers dd { font-size: 17px; }
  .req__intro { display: block; }
  .req__intro h2 { max-inline-size: 10em; margin-block-end: 16px; font-size: 32px; }
  .req__intro .req__steps { display: none; }
  .req__alt { margin-block: 16px 8px; }
  .form { gap: 16px 12px; }
  .fld label, .grp legend { font-size: 13px; }
  .opt > span { padding-inline: 12px; }
  .opts { gap: 8px; }
  .opts--product .opt > span { min-block-size: 152px; }
  .opt strong { font-size: 11px; }
  .opt small { font-size: 11px; }
  .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .ftr__contacts { grid-column: 1 / -1; }
  .ftr__phone { font-size: 25px; }
  .ftr__phone--second { font-size: 16px; }
  .ftr__end { display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-items: start; gap: 20px; }
  .ftr__lang { grid-column: 1 / -1; justify-content: start; gap: 0; }
  .ftr__logos { gap: 12px; min-block-size: 44px; }
  .ftr__logos img { inline-size: 42px; block-size: 42px; }
  .ftr__logos .ftr__soxuz { inline-size: 45px; }
  .ftr__up { grid-column: 1 / -1; }
  .ftr__base { gap: 12px 24px; }
  .ftr__base > p { flex-basis: 100%; }
}
@media (max-width: 479px) {
  .opts { grid-template-columns: minmax(0, 1fr); }
  .opts--product .opt > span { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: center; align-items: center; gap: 2px 16px; min-block-size: 76px; padding-block: 12px; padding-inline: 16px; }
  .opts--product .opt svg { grid-column: 1; grid-row: 1 / span 2; }
  .opts--product .opt strong { grid-column: 2; margin-block-start: 0; padding-inline-end: 12px; font-size: 13px; }
  .opts--product .opt small { grid-column: 2; }
  .opts--volume { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opts--volume .opt > span { align-items: center; gap: 8px; min-block-size: 84px; padding-inline: 8px; text-align: center; }
  .opts--volume .opt strong { font-size: 11px; }
  .opts--volume .opt small { font-size: 11px; }
  .fld--third { grid-column: span 3; }
  .fld--country { grid-column: 1 / -1; }
  .form__send .btn { inline-size: 100%; }
  .aud__ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 399px) {
  .ftr__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 359px) {
  .fld--item, .fld--quantity { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* SHF-40 site parts on the V2 tokens: honeypot, server error, privacy line, the contacts card that replaces a
 * switched-off form, the ok page and the privacy page. */
.hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.form-error { grid-column: 1 / -1; padding-block: 16px; padding-inline: 16px; border: 1px solid var(--brand); border-inline-start-width: 4px; background: var(--brand-wash); color: var(--brand-dark); font-size: 14px; line-height: 1.5; }
.form-error:focus-visible { outline-offset: 2px; }
.form__privacy { flex-basis: 100%; }
.form__privacy a, .data-notice a, .legal a { color: inherit; text-decoration: underline; }
.form__privacy a, .data-notice a { white-space: nowrap; }
.form__privacy a:hover, .legal a:hover { color: var(--brand); }
.form-off { display: grid; gap: 24px; padding-block: 32px; padding-inline: 32px; border: 1px solid var(--line-mid); background: var(--paper); }
.form-off > p { color: var(--ink); font-size: 15px; line-height: 1.6; }
.contacts h2 { margin-block-end: 8px; color: var(--ink); font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); font-weight: 400; line-height: 1.3; }
.contacts > p { color: var(--muted); font-size: 14px; }
.contact-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 24px; margin-block-start: 20px; border-block-start: 1px solid var(--line-mid); }
.contact-list li { display: grid; gap: 2px; padding-block: 12px; border-block-end: 1px solid var(--line-mid); }
.c-label { color: var(--muted); font-size: 12px; }
.contact-list a { inline-size: fit-content; min-block-size: 28px; color: var(--ink); font-size: 16px; text-decoration: none; }
.contact-list a:hover { color: var(--brand); text-decoration: underline; }
[dir="rtl"] .contact-list a { unicode-bidi: isolate; }
.page__in { display: grid; justify-items: start; gap: 20px; max-inline-size: calc(760px + 2 * var(--gutter)); }
.page h1, .legal h1 { color: var(--ink); font-family: var(--font-display); font-size: clamp(28px, 3vw, 43px); font-weight: 400; line-height: 1.14; letter-spacing: -.02em; overflow-wrap: break-word; min-inline-size: 0; text-wrap: balance; }
.page__in > p { font-size: 15px; line-height: 1.7; }
.page__id b { color: var(--ink); }
.page__contacts { margin-block-start: 24px; inline-size: 100%; }
.legal__in { max-inline-size: calc(760px + 2 * var(--gutter)); }
.legal h1 { margin-block-end: 12px; }
.legal .updated { margin-block-end: 32px; color: var(--muted); font-size: 13px; }
.legal h2 { margin-block: 32px 8px; color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.4; }
/* 54ch: the ch unit is Onest's wide zero, so this keeps Latin, Cyrillic and Arabic prose near 65 to 75 letters a line. */
.legal p { max-inline-size: 54ch; font-size: 15px; line-height: 1.7; }
.legal p + p { margin-block-start: 12px; }
.legal__back { margin-block-start: 40px; }
@media (max-width: 599px) {
  .form-off { padding-block: 24px; padding-inline: 20px; }
}