/* cyrillic-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./fonts/onest-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./fonts/onest-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./fonts/onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display: clamp(2.5rem, 3.6vw + 1rem, 4.5rem);
  --text-section: clamp(1.875rem, 1.8vw + 1rem, 2.75rem); --text-title: clamp(1.125rem, 0.5vw + 0.95rem, 1.375rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.3125rem);
  --text-place: clamp(2.75rem, 5vw + 1rem, 5.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --container: 1280px; --gutter: 56px; --gap-columns: 32px; --section-gap-s: 96px; --section-gap: 128px; --section-gap-l: 160px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --font-display: "Onest", ui-sans-serif, system-ui, sans-serif; --font-body: "Onest", ui-sans-serif, system-ui, sans-serif; --font-outlier: var(--font-body);
  --radius-card: 10px; --radius-control: 2px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: none;
  --tracking-display: -0.025em;
  --brand-yellow: oklch(93.6% 0.18 104);

  /* «День»: светлый холодный цех; жёлтый на кнопках и тёмных плашках */
  --color-paper: oklch(97.6% 0.004 245); --color-paper-2: oklch(94.4% 0.006 245); --color-paper-3: oklch(90.5% 0.008 245);
  --color-ink: oklch(23% 0.025 258); --color-ink-2: oklch(38% 0.022 258); --color-muted: oklch(50% 0.018 258);
  --color-rule: oklch(86% 0.01 250);
  --color-accent: var(--brand-yellow); --color-accent-ink: oklch(23% 0.025 258); --color-accent-edge: oklch(23% 0.025 258);
  --color-focus: oklch(45% 0.16 258);
  --color-plate: oklch(23% 0.025 258); --color-plate-ink: oklch(97% 0.005 245);
  --color-error: oklch(50% 0.19 27); --color-success: oklch(48% 0.12 150);
  --color-surface: oklch(100% 0 0);
  --color-plate-2: oklch(29% 0.028 258); --color-plate-muted: oklch(78% 0.015 250); --color-plate-rule: oklch(38% 0.025 258);
  --k3000: oklch(84% 0.1 65); --k4000: oklch(91% 0.06 75); --k5700: oklch(97% 0.012 240);
  --glass: color-mix(in oklab, var(--color-paper) 64%, transparent);
  --glass-edge: color-mix(in oklab, var(--color-surface) 75%, transparent);
  --glass-shade: color-mix(in oklab, var(--color-ink) 10%, transparent);
  --glass-tint: color-mix(in oklab, var(--color-paper) 26%, transparent);
  --glass-tint-2: color-mix(in oklab, var(--color-surface) 7%, transparent);
  --glass-hi: color-mix(in oklab, var(--color-surface) 40%, transparent);
  --glass-lo: color-mix(in oklab, var(--color-surface) 14%, transparent);
  --glass-drop: color-mix(in oklab, var(--color-ink) 70%, transparent);
  --nav-h: 80px;
  --beam-fill: color-mix(in oklab, var(--brand-yellow) 55%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-synthesis: none; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* Hallmark · shape: сквозной лист: блоки со смещением заходят друг на друга, лента объектов уходит за край, форма наезжает на подвал · genre: modern-minimal · theme: custom · job: hire · idea: "свет Diolight на настоящих объектах, каталог устроен по тому, что вы освещаете" · vibe: "светлый цех, инженерный паспорт, жёлтый свет"
 * paper: oklch(97.6% 0.004 245) · accent: oklch(93.6% 0.18 104) жёлтый из логотипа · display: Onest · body: Onest · hero: фото объекта во всю ширину, плашка с заголовком наползает на него, справа три факта · nav: логотип, четыре раздела, телефон и кнопка · footer: тёмная плита, реквизиты и разделы · imagery: photographs (объекты клиента) and the product (рендеры и чертежи серий) · signature: каталог по объектам с рендерами 58 серий, оптика от 7°, видео с производства
 * axes: light/grotesk-sans/chromatic-yellow · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · waive 67 · DL-LUM, DL-ARMSTRONG, CRI, TLCI, IP67 · названия моделей и обозначения стандартов пишутся заглавными у производителя и в ГОСТ, это не подписи капслоком */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: E, нет фото цеха; производство показано видео и громкими фактами со старого сайта */

/* Резиновый отскок macOS показывает за краем фон корня страницы. Корень светлый у верха и тёмный у подвала
   (класс ставит скрипт), у body фона нет, чтобы браузер не взял его цвет; светлую подложку несут шапка и main. */
html { scroll-padding-top: 88px; background-color: var(--color-paper); }
/* плавная прокрутка только после загрузки, иначе переход по ссылке с якорем едет с самого верха */
html.is-ready { scroll-behavior: smooth; }
html.is-end { background-color: var(--color-plate); }
@media (prefers-reduced-motion: reduce) { html.is-ready { scroll-behavior: auto; } }
/* Переходы между страницами: шапка стоит на месте, остальное мягко сменяется (Chrome, Safari 18.2+) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-short); animation-timing-function: var(--ease-out); }
}
.nav { view-transition-name: site-header; }
body { background: transparent; font-size: var(--text-md); }
main { background: var(--color-paper); }
h1, h2, h3 { font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.08; color: var(--color-ink); }
.lead { font-size: var(--text-lead); color: var(--color-ink-2); }
.muted { color: var(--color-muted); }

/* Кнопки и ссылки: одна главная кнопка на весь сайт */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent-edge); border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; font-size: var(--text-md); text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: color-mix(in oklab, var(--color-accent) 86%, var(--color-accent-ink)); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.link { color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-muted); text-decoration-thickness: 2px; text-underline-offset: 0.25em; white-space: nowrap; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-ink); }
.link:active { color: var(--color-ink-2); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.on-plate .link { color: var(--color-plate-ink); text-decoration-color: var(--color-plate-muted); }
.on-plate .link:hover { text-decoration-color: var(--brand-yellow); }
.on-plate .link:focus-visible, .on-plate .btn:focus-visible { outline-color: var(--brand-yellow); }

/* Шапка */
/* Шапка: плавающая капсула над страницей. Сам слой шапки прозрачный и не ловит клики, капсула — ловит */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); height: var(--nav-h); margin-bottom: calc(-1 * var(--nav-h)); padding-top: var(--space-sm); pointer-events: none; }
main { padding-top: var(--nav-h); }
.nav__row { pointer-events: auto; position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--space-xl); width: min(calc(100% - var(--space-lg)), calc(var(--container) - 2 * var(--gutter) + var(--space-2xl))); max-width: none; min-height: 60px; margin: 0 auto; padding: 0 var(--space-xs) 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper); box-shadow: 0 0 0 1px var(--color-rule), 0 10px 30px -18px var(--glass-drop); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__row { background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); }
}
.nav__logo { display: block; flex: none; border-radius: var(--radius-control); }
.nav__logo svg { display: block; height: 34px; width: auto; color: var(--color-ink); }
.nav__logo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav__links a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); padding: var(--space-xs) 0; transition: color var(--dur-micro) var(--ease-out); }
.nav__links a:hover { color: var(--color-ink); }
.nav__links a[aria-current] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-ink); }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.nav__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-lg); }
.nav__phone { white-space: nowrap; color: var(--color-ink); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.nav__phone:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.nav__phone:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.nav .btn { min-height: 44px; border-radius: var(--radius-pill); padding: 0 var(--space-lg); }

/* Лист, сдвинутый от левого края контейнера и уходящий за правый край экрана */
.sheet { margin-left: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter) - var(--space-xl)); padding: var(--space-2xl) 0 var(--space-2xl) var(--space-xl); background: var(--color-paper-2); }
.sheet__in { max-width: calc(var(--container) - 2 * var(--gutter)); padding-right: var(--gutter); }

/* Первый экран: плашка наползает на фото */
.hero { padding-bottom: var(--space-2xl); }
.hero__photo { position: relative; margin: 0; height: clamp(320px, calc(100svh - 285px), 780px); background: var(--color-plate); color: var(--color-plate-ink); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo figcaption { position: absolute; right: var(--gutter); bottom: var(--space-md); padding: var(--space-2xs) var(--space-xs); background: var(--color-plate); color: var(--color-plate-ink); font-size: var(--text-xs); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.hero__panel { grid-column: 1 / span 9; margin: -152px 0 0 calc(-1 * var(--space-xl)); position: relative; z-index: var(--z-raised); background: var(--color-paper); padding: var(--space-xl) var(--space-xl) 0; border-radius: var(--space-lg) var(--space-lg) 0 0; display: grid; gap: var(--space-lg); }
.hero__panel h1, .hero__panel .lead { display: grid; }
.hero__panel .swap { grid-area: 1 / 1; transition: opacity 280ms var(--ease-in), filter 280ms var(--ease-in); }
.hero__panel .swap.is-on { transition: opacity 420ms var(--ease-out) 260ms, filter 420ms var(--ease-out) 260ms; }
.hero__panel .swap:not(.is-on) { opacity: 0; filter: blur(4px); }
.hero h1 { font-size: var(--text-display); }
.hero .lead { max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.facts { grid-column: 10 / -1; display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.facts li { display: grid; grid-template-columns: 4.5ch minmax(0, 1fr); gap: var(--space-md); align-items: baseline; padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
.facts b { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.facts span { color: var(--color-ink-2); font-size: var(--text-sm); }

/* Каталог-переключатель */
.catalog__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-xl); margin-bottom: var(--space-xl); }
.catalog__top h2 { font-size: var(--text-section); }
.catalog__top p { color: var(--color-ink-2); max-width: 46ch; }
.catalog { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.tabs { grid-column: 1 / span 3; display: grid; gap: var(--space-3xs); margin: 0; padding: 0; list-style: none; position: sticky; top: 96px; }
.tabs a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); min-height: 44px; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-control); color: var(--color-ink); text-decoration: none; font-weight: 500; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.tabs a span { color: var(--color-muted); font-variant-numeric: tabular-nums; font-size: var(--text-sm); font-weight: 400; }
.tabs a:hover { background: var(--color-paper-3); }
.tabs a:active { background: var(--color-rule); }
.tabs a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.tabs a[aria-selected="true"] { background: var(--color-plate); color: var(--color-plate-ink); }
.tabs a[aria-selected="true"] span { color: var(--brand-yellow); }
.panels { grid-column: 4 / -1; display: grid; gap: var(--space-3xl); }
.panel { display: grid; gap: var(--space-lg); scroll-margin-top: 96px; }
.panel:not([hidden]) { animation: panel-in var(--dur-short) var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.panel:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 8px; }
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-lg); }
.panel__head h3 { font-size: var(--text-xl); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.tile { display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--color-surface); border-radius: var(--radius-card); color: inherit; text-decoration: none; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.tile img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; padding: var(--space-md) var(--space-md) 0; }
.tile__text { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-sm) var(--space-md) var(--space-md); }
.tile b { font-size: var(--text-md); font-weight: 600; }
.tile span { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.4; }
a.tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -14px color-mix(in oklab, var(--color-ink) 45%, transparent); }
a.tile:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a.tile:active { transform: translateY(0); }
a.tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Оптика: громкий факт с конусами и фото, которое наезжает на тёмную плиту ниже */
.optics { padding-top: var(--section-gap-s); position: relative; z-index: var(--z-raised); }
.optics__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.optics__text { grid-column: 1 / span 7; display: grid; gap: var(--space-lg); align-content: start; }
.optics__text h2 { font-size: var(--text-display); max-width: 14ch; }
.optics__text .lead { max-width: 44ch; }
.optics__photo { grid-column: 9 / -1; align-self: end; margin: 0 0 calc(-1 * var(--space-4xl)); }
.optics__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); }
.optics__photo figcaption { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-plate-muted); }
.beams { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-xs); margin: var(--space-md) 0 0; padding: 0; list-style: none; max-width: 640px; }
.beams li { display: grid; justify-items: center; gap: var(--space-2xs); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.beams svg { width: 100%; max-width: 96px; height: auto; overflow: visible; }
.beams .cone { fill: var(--beam-fill); stroke: var(--color-ink); stroke-width: 1; }
.beams .lamp { fill: var(--color-ink); }
.beams b { font-size: var(--text-lg); font-weight: 600; }

/* Тёмная плита производства: от левого края экрана, не до правого; видео выходит за её край */
.slab { margin-top: var(--space-2xl); margin-right: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter) + var(--space-3xl)); background: var(--color-plate); color: var(--color-plate-ink); }
.slab__in { max-width: var(--container); margin-left: auto; padding: calc(var(--space-4xl) + var(--space-lg)) 0 var(--space-3xl) var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.slab__text { grid-column: 1 / span 6; display: grid; gap: var(--space-lg); }
.slab__text h2 { font-size: var(--text-section); color: var(--color-plate-ink); }
.slab__text > p { color: var(--color-plate-muted); max-width: 46ch; }
.slab__video { grid-column: 8 / span 6; margin-right: calc(-1 * (var(--space-3xl) + var(--gutter))); align-self: end; }
.loud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-md) 0; padding: 0; list-style: none; }
.loud li { display: grid; gap: var(--space-xs); align-content: start; }
.loud b { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--brand-yellow); white-space: nowrap; }
.loud span { color: var(--color-plate-muted); font-size: var(--text-sm); }

/* Видео: обложка, грузим плеер по нажатию */
.video { margin: 0; display: grid; gap: var(--space-xs); }
.video__play { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius-card); background: var(--color-plate); cursor: pointer; overflow: hidden; }
.video__play img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video__btn { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--brand-yellow); }
.video__btn svg { width: 24px; height: 24px; fill: var(--color-accent-ink); margin-left: var(--space-3xs); transition: transform var(--dur-short) var(--ease-out); }
.video__play:hover .video__btn svg { transform: scale(1.18); }
.video__play:active .video__btn svg { transform: scale(0.94); }
.video__play:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-card); background: var(--color-plate); }
.video figcaption { font-size: var(--text-sm); color: var(--color-ink-2); }
.on-plate .video figcaption { color: var(--color-plate-muted); }
.on-plate .video__play:focus-visible { outline-color: var(--brand-yellow); }

/* Объекты: лента уходит за правый край экрана */
.work { padding-block: var(--section-gap-s) var(--space-2xl); }
.work__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-bottom: var(--space-xl); }
.work__top h2 { font-size: var(--text-section); }
.work__top p { color: var(--color-ink-2); }
.strip-nav { display: flex; gap: var(--space-xs); }
.strip-nav button { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.strip-nav button:hover { background: var(--color-paper-3); }
.strip-nav button:active { background: var(--color-rule); }
.strip-nav button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.strip-nav button:disabled { opacity: 0.35; cursor: default; }
.strip-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 30vw); gap: var(--gap-columns); margin: 0; padding: 0 var(--gutter) var(--space-md) calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter)); list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: calc(max(0px, (100vw - var(--container)) / 2) + var(--gutter)); scrollbar-width: thin; }
.strip > li { scroll-snap-align: start; }
.strip > li.is-wide { grid-column: span 2; }
.strip figure { margin: 0; display: grid; gap: var(--space-xs); }
.strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
.strip .is-wide img { aspect-ratio: auto; height: 100%; }
.strip .is-wide .video__play { height: calc(100% - 2em); }
.strip figcaption { font-size: var(--text-sm); color: var(--color-ink-2); }
.strip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* Заявка: форма наезжает на подвал */
.ask { padding-top: var(--section-gap-s); position: relative; z-index: var(--z-raised); }
.ask__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: start; }
.ask__intro { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); align-content: start; padding-bottom: var(--space-2xl); }
.ask__intro h2 { font-size: var(--text-section); }
.form { grid-column: 7 / -1; margin-bottom: calc(-1 * var(--space-4xl)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg) var(--space-md); padding: var(--space-xl); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: 0 24px 48px -32px color-mix(in oklab, var(--color-ink) 60%, transparent); }
.field { display: grid; gap: var(--space-xs); }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--text-sm); color: var(--color-ink-2); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -1px; transition: border-color var(--dur-micro) var(--ease-out); }
.field textarea { min-height: 112px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid] { border-color: var(--color-error); }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.form__end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.form__help { font-size: var(--text-sm); color: var(--color-ink-2); }
.form__help[data-state="error"] { color: var(--color-error); }

/* Хлебные крошки */
.crumbs { padding-top: var(--space-lg); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-rule); }
.crumbs a { color: var(--color-ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.crumbs a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Страница серии */
.series-top { padding-block: var(--space-xl) var(--space-2xl); }
.series-top__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: center; }
.series-top__pic { grid-column: 1 / span 7; margin: 0; background: var(--color-surface); border-radius: var(--radius-card); display: grid; place-items: center; padding: var(--space-xl); min-height: 360px; }
.series-top__pic img { width: 100%; max-height: 480px; object-fit: contain; }
.series-top__body { grid-column: 8 / -1; display: grid; gap: var(--space-lg); align-content: center; }
.series-top__body h1 { font-size: var(--text-display); overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.chips li { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-3); font-size: var(--text-sm); color: var(--color-ink-2); }
.series-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }
.block { padding-block: var(--space-2xl); }
.block h2 { font-size: var(--text-section); margin-bottom: var(--space-lg); }
.block__lead { color: var(--color-ink-2); max-width: 60ch; margin: calc(-1 * var(--space-sm)) 0 var(--space-lg); }
.models-wrap { overflow-x: auto; border-radius: var(--radius-card); background: var(--color-surface); }
.models { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 640px; }
.models th, .models td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid var(--color-rule); vertical-align: baseline; font-size: var(--text-sm); }
.models thead th { font-weight: 400; color: var(--color-muted); background: var(--color-paper-2); }
.models tbody th { font-weight: 600; font-size: var(--text-md); white-space: nowrap; }
.models tbody tr { transition: background-color var(--dur-micro) var(--ease-out); }
.models tbody tr:hover { background: var(--color-paper); }
.models a { color: var(--color-ink); font-weight: 500; }
.models a:hover { text-decoration-thickness: 2px; }
.models a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.drawings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.drawings figure { margin: 0; display: grid; gap: var(--space-xs); }
.drawings img { width: 100%; background: var(--color-surface); border-radius: var(--radius-card); padding: var(--space-md); mix-blend-mode: multiply; }
.drawings figcaption { font-size: var(--text-xs); color: var(--color-muted); }
.common { columns: 2 320px; column-gap: var(--space-2xl); }
.common section { break-inside: avoid; margin-bottom: var(--space-xl); }
.common h3 { font-size: var(--text-title); letter-spacing: -0.01em; margin-bottom: var(--space-xs); }
.spec { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.spec th, .spec td { padding: var(--space-xs) 0; border-top: 1px solid var(--color-rule); text-align: left; vertical-align: baseline; font-size: var(--text-sm); }
.spec th { font-weight: 400; color: var(--color-ink-2); padding-right: var(--space-lg); width: 55%; }
.spec td { font-weight: 600; }
.twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.twocol h2 { font-size: var(--text-xl); margin-bottom: var(--space-md); }
.ticks { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.ticks li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--space-sm); align-items: baseline; }
.ticks li::before { content: ""; width: 12px; height: 4px; background: var(--color-ink); transform: translateY(-3px); }
.about-series p + p { margin-top: var(--space-sm); }
.cta { margin-top: var(--space-2xl); padding: var(--space-2xl) 0; background: var(--color-paper-2); }
.cta__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.cta h2 { font-size: var(--text-xl); max-width: 30ch; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); }

/* О компании */
.co-hero { padding-block: var(--space-2xl) var(--space-3xl); }
.co-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.co-hero__text { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); }
.co-hero__text h1 { font-size: var(--text-display); }
.co-hero__video { grid-column: 6 / -1; }
.made { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.made > li { grid-column: span 4; display: grid; grid-template-rows: auto 1fr; background: var(--color-surface); border-radius: var(--radius-card); overflow: hidden; }
.made > li:nth-child(1) { grid-column: span 7; }
.made > li:nth-child(2) { grid-column: span 5; }
.made img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--color-plate); }
.made__text { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-lg); }
.made b { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.made > li:nth-child(1) b { font-size: var(--text-3xl); }
.made h3 { font-size: var(--text-title); letter-spacing: -0.01em; }
.made p { color: var(--color-ink-2); font-size: var(--text-sm); max-width: 52ch; }
.cycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.cycle li { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-md); border-top: 4px solid var(--brand-yellow); }
.cycle b { font-size: var(--text-title); color: var(--color-plate-ink); }
.cycle span { color: var(--color-plate-muted); font-size: var(--text-sm); }
.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.docs { width: 100%; border-collapse: collapse; }
.docs th, .docs td { padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--color-rule); text-align: left; vertical-align: baseline; font-size: var(--text-sm); }
.docs th { font-weight: 600; color: var(--color-ink); }
.docs td { color: var(--color-ink-2); }
.band-plate { background: var(--color-plate); color: var(--color-plate-ink); padding-block: var(--space-3xl); }
.band-plate h2 { color: var(--color-plate-ink); font-size: var(--text-section); margin-bottom: var(--space-xl); }

/* Подвал */
.footer { padding-block: var(--space-2xl) var(--space-xl); background: var(--color-plate); color: var(--color-plate-ink); }
.footer--lift { padding-top: calc(var(--space-4xl) + var(--space-2xl)); }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.footer__brand { grid-column: 1 / span 4; display: grid; gap: var(--space-md); align-content: start; }
.footer__logo svg { display: block; height: 40px; width: auto; color: var(--color-plate-ink); }
.footer__brand p { color: var(--color-plate-muted); font-size: var(--text-sm); }
.footer__col { grid-column: span 4; }
.footer__col h2 { font-size: var(--text-sm); font-weight: 600; color: var(--color-plate-ink); letter-spacing: 0; margin-bottom: var(--space-sm); }
.footer__col ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: var(--gap-columns); }
.footer__col--plain ul { columns: 1; }
.footer__col li { padding: var(--space-2xs) 0; break-inside: avoid; }
.footer a { color: var(--color-plate-muted); text-decoration: none; font-size: var(--text-sm); }
.footer a:hover { color: var(--color-plate-ink); text-decoration: underline; text-underline-offset: 0.25em; }
.footer a:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 3px; }
.footer__note { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 1px solid var(--color-plate-rule); font-size: var(--text-xs); color: var(--color-plate-muted); }

/* Ноутбук, планшет, телефон */
@media (max-width: 75rem) {
  .nav__phone { display: none; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loud { grid-template-columns: minmax(0, 1fr); }
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 60rem) {
  .nav__links { display: none; }
  .nav__phone { display: none; }
  .hero__panel, .facts, .tabs, .panels, .optics__text, .optics__photo, .slab__text, .slab__video, .ask__intro, .form, .footer__brand, .series-top__pic, .series-top__body, .co-hero__text, .co-hero__video { grid-column: 1 / -1; grid-row: auto; }
  .made > li:nth-child(n) { grid-column: span 6; }
  .made > li:nth-child(1) { grid-column: 1 / -1; }
  .hero__panel { margin: calc(-1 * var(--space-3xl)) 0 0 calc(-1 * var(--space-md)); padding: var(--space-lg) var(--space-lg) 0 var(--space-md); }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .sheet { margin-left: 0; padding: var(--space-2xl) 0 var(--space-2xl) var(--gutter); }
  .tabs { position: static; display: flex; overflow-x: auto; gap: var(--space-xs); padding-bottom: var(--space-xs); }
  .tabs a { flex: none; white-space: nowrap; background: var(--color-surface); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .optics__photo { margin-bottom: calc(-1 * var(--space-3xl)); max-width: 420px; }
  .slab { margin-right: 0; }
  .slab__in { padding: calc(var(--space-3xl) + var(--space-lg)) var(--gutter) var(--space-2xl); }
  .slab__video { margin-right: 0; }
  .strip { grid-auto-columns: minmax(260px, 72vw); }
  .strip > li.is-wide { grid-column: span 1; }
  .form { margin-bottom: calc(-1 * var(--space-3xl)); }
  .footer--lift { padding-top: calc(var(--space-3xl) + var(--space-2xl)); }
  .twocol { grid-template-columns: minmax(0, 1fr); }
  .cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .footer__col { grid-column: span 6; }
}
@media (max-width: 40rem) {
  .nav__row { gap: var(--space-md); min-height: 64px; }
  .nav__logo svg { height: 28px; }
  .nav .btn { display: none; }
  .hero__panel { margin: calc(-1 * var(--space-2xl)) 0 0 calc(-1 * var(--space-xs)); padding: var(--space-lg) var(--space-md) 0 var(--space-xs); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts li { grid-template-columns: 4.5ch minmax(0, 1fr); gap: var(--space-md); }
  .beams { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-md); }
  .form { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg); }
  .series-top__pic { min-height: 240px; padding: var(--space-md); }
  .cycle, .videos { grid-template-columns: minmax(0, 1fr); }
  .made > li:nth-child(n) { grid-column: 1 / -1; }
  .footer__col { grid-column: 1 / -1; }
}
.twocol > .about-series { grid-column: 1 / -1; columns: 2 320px; column-gap: var(--space-2xl); }
.twocol > .about-series h2 { column-span: all; }
.models tbody th, .models thead th:first-child { position: sticky; left: 0; background: var(--color-surface); box-shadow: 1px 0 0 var(--color-rule); }
.models thead th:first-child { background: var(--color-paper-2); }

/* Заголовок внутренних страниц */
.page-top { padding-block: var(--space-xl) var(--space-2xl); }
.page-top__in { display: grid; gap: var(--space-md); }
.page-top h1 { font-size: var(--text-display); }
.page-top .lead { max-width: 56ch; }

/* Объекты: сетка разного размера */
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.projects > li:first-child { grid-column: span 2; grid-row: span 2; }
.projects figure { margin: 0; display: grid; gap: var(--space-xs); height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
.projects img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
.projects > li:first-child .video__play, .projects > li:first-child .video__play img { height: 100%; aspect-ratio: auto; }
.projects figcaption { display: grid; gap: var(--space-3xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.projects figcaption b { color: var(--color-ink); font-size: var(--text-md); font-weight: 600; }

/* Контакты */
.ask__contacts { display: grid; gap: var(--space-xs); margin: var(--space-md) 0 0; }
.ask__contacts dt { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-md); }
.ask__contacts dd { margin: 0; }
.ask__contacts a:not(.link) { color: var(--color-ink); font-weight: 600; font-size: var(--text-lg); text-decoration: none; font-variant-numeric: tabular-nums; }
.ask__contacts a:not(.link):hover { text-decoration: underline; text-underline-offset: 0.25em; }
.ask__contacts a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.contacts .ask__intro h1 { font-size: var(--text-display); }
.ask__side { grid-column: 7 / -1; display: grid; gap: var(--space-md); scroll-margin-top: 96px; }
.ask__side h2 { font-size: var(--text-section); }
.ask__side .form { grid-column: auto; margin-bottom: 0; }
@media (max-width: 60rem) {
  .ask__side { grid-column: 1 / -1; }
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .projects { grid-template-columns: minmax(0, 1fr); }
  .projects > li:first-child { grid-column: auto; grid-row: auto; }
}

/* Жидкое стекло (assets/glass.js): линза с искажённой копией фона, сверху тон, блик и кромка */
.is-glass { isolation: isolate; }
.glass-lens { position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none; }
.glass-clip { position: absolute; inset: 0; display: block; border-radius: inherit; overflow: hidden; }
.glass-page { position: absolute; top: 0; left: 0; will-change: transform; }
.glass-page .tabs { position: static; }
.glass-copy { position: absolute; max-width: none; object-fit: cover; }
.is-glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, var(--glass-tint-2), transparent 60%); box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), inset 1px 0 0 var(--glass-lo), inset -1px 0 0 var(--glass-lo); }
.nav__row { transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.nav__row .glass-lens { opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.nav__row.is-lensed .glass-lens { opacity: 1; }
.nav__row.is-lensed { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 10px 30px -14px var(--glass-drop); }
.has-glass .nav__row::before { background: linear-gradient(180deg, var(--glass-tint), var(--glass-tint)), linear-gradient(180deg, var(--glass-tint-2), transparent 60%); }
.has-glass .video__btn { background: transparent; box-shadow: 0 8px 24px -10px var(--glass-drop); }
.has-glass .video__btn svg { fill: var(--brand-yellow); filter: drop-shadow(0 1px 2px var(--glass-drop)); }
.has-glass .hero__photo figcaption { background: transparent; color: var(--color-ink); border-radius: var(--radius-pill); padding: var(--space-2xs) var(--space-sm); }
.has-glass .hero__photo figcaption::before, .has-glass .hero__pause::before { background: linear-gradient(180deg, var(--glass-tint), var(--glass-tint)), linear-gradient(180deg, var(--glass-tint-2), transparent 60%); }
.hero { margin-top: calc(-1 * var(--nav-h)); }

/* Меню на телефоне */
.nav__menu { display: none; min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-weight: 600; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.nav__menu:hover { background: var(--glass-tint-2); }
.nav__menu:active { background: var(--glass-tint); }
.nav__menu:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 60rem) {
  .nav__menu { display: inline-flex; align-items: center; }
  .nav__phone { display: none; }
  .nav.is-open .nav__links { display: grid; position: absolute; top: calc(100% + var(--space-xs)); right: var(--space-xs); min-width: 220px; gap: var(--space-3xs); padding: var(--space-xs); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-rule), 0 16px 40px -16px var(--glass-drop); }
  .nav.is-open .nav__links a { display: block; padding: var(--space-sm) var(--space-md); font-size: var(--text-md); color: var(--color-ink); }
  .nav.is-open .nav__links a[aria-current] { box-shadow: inset 3px 0 0 var(--color-ink); }
}

/* Первый экран: фото объектов сменяются; сверху «резина» Safari берёт цвет верхнего края текущего фото */
html { transition: background-color var(--dur-long) var(--ease-out); }
html.has-top { background-color: var(--top-color); }
html.has-top.is-end { background-color: var(--color-plate); }
.hero__photo > img { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-in-out); }
.hero__photo > img.is-on { opacity: 1; }
.hero__ctl { position: absolute; right: var(--gutter); bottom: var(--space-md); z-index: var(--z-raised); display: flex; align-items: center; gap: var(--space-xs); }
.hero__ctl figcaption, .hero__photo .hero__ctl figcaption { position: relative; right: auto; bottom: auto; }
.hero__pause { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--radius-pill); background: var(--color-plate); color: var(--color-plate-ink); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.hero__pause:hover { transform: scale(1.06); }
.hero__pause:active { transform: scale(0.96); }
.hero__pause:focus-visible { outline: 2px solid var(--brand-yellow); outline-offset: 2px; }
.hero__pause svg { width: 14px; height: 14px; fill: currentColor; }
.hero__pause .i-play { display: none; }
.hero__pause[aria-pressed="true"] .i-play { display: block; }
.hero__pause[aria-pressed="true"] .i-pause { display: none; }
.has-glass .hero__pause { background: transparent; color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) { .hero__photo > img { transition: none; } }

/* Шапка над фото: слои под стеклом плавно сменяются, текст и логотип светлеют над тёмным снимком */
.glass-layer { position: absolute; inset: 0; transition: opacity 900ms var(--ease-in-out); }
.glass-copy { transition: opacity 900ms var(--ease-in-out); }
.nav__row .nav__logo svg, .nav__row .nav__links a, .nav__row .nav__phone, .nav__row .nav__menu { transition: color 1.2s var(--ease-in-out), border-color 1.2s var(--ease-in-out); }
.nav__row.is-dark .nav__logo svg, .nav__row.is-dark .nav__phone, .nav__row.is-dark .nav__menu { color: var(--color-plate-ink); border-color: var(--color-plate-ink); }
.nav__row.is-dark .nav__links a { color: color-mix(in oklab, var(--color-plate-ink) 86%, transparent); }
.nav__row.is-dark .nav__links a:hover, .nav__row.is-dark .nav__links a[aria-current] { color: var(--color-plate-ink); }
.nav__row.is-dark .nav__links a[aria-current] { box-shadow: inset 0 -2px 0 var(--color-plate-ink); }
.nav__row.is-dark.is-lensed::before { background: linear-gradient(180deg, color-mix(in oklab, var(--color-plate) 26%, transparent), color-mix(in oklab, var(--color-plate) 26%, transparent)), linear-gradient(180deg, var(--glass-tint-2), transparent 60%); }
/* на десктопе все заголовки и подзаголовки слайдов ровно в две строки: плашка не прыгает при смене */
@media (min-width: 60.01rem) {
  .hero h1 { min-height: calc(2 * 1.08em); }
  .hero .lead { min-height: calc(2 * 1.55em); }
}

.nav__row.is-glass::before { transition: background 1.2s var(--ease-in-out); }

/* Альбомы объектов */
.albums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.album__open { display: grid; gap: var(--space-sm); width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.album__cover { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-2xs); aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-3); }
.album__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.album__cover img:first-child { grid-row: span 2; }
.album__open:hover .album__cover img { transform: scale(1.03); }
.album__open:active .album__cover { opacity: 0.9; }
.album__open:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-card); }
.album__text { display: grid; gap: var(--space-3xs); }
.album__text b { font-size: var(--text-title); font-weight: 600; }
.album__text span { color: var(--color-muted); font-size: var(--text-sm); }
.album__dialog { width: min(1200px, calc(100vw - 2 * var(--gutter))); max-height: calc(100vh - 64px); padding: 0; border: 0; border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); }
.album__dialog::backdrop { background: color-mix(in oklab, var(--color-plate) 80%, transparent); }
.album__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-paper); box-shadow: 0 1px 0 var(--color-rule); }
.album__close { margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font-size: 24px; line-height: 1; cursor: pointer; }
.album__close:hover { background: var(--color-rule); }
.album__close:focus-visible, .album__grid a:focus-visible, .album__viewer button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.album__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-xs); margin: 0; padding: var(--space-lg); list-style: none; }
.album__grid a { display: block; border-radius: var(--radius-card); overflow: hidden; }
.album__grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.album__viewer { position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; background: var(--color-plate); }
.album__viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.album__viewer button { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-paper) 85%, transparent); color: var(--color-ink); font-size: 28px; cursor: pointer; }
.album__prev { left: var(--space-md); } .album__next { right: var(--space-md); }
@media (max-width: 60rem) { .albums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .albums { grid-template-columns: minmax(0, 1fr); } }