/* ТЕМИР ГИДРО — mobile-first.
   The page speaks the language of a technical drawing: the configurator draws
   a scissor lift from the same parameters the lead form asks for (L × B, H, Q).
   Colours follow the product: RAL 3020 paint, RAL 7016 anthracite, RAL 7035 grey. */

@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-cyrillic.fe2bd26ae82a.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.3db826ed1c5d.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+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sofia Sans Condensed";
  src: url("../fonts/sofia-sans-condensed-cyrillic.c21ea4af827c.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Sofia Sans Condensed";
  src: url("../fonts/sofia-sans-condensed-latin.5ec7e03436cf.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ГОСТ 2.304 drawing lettering for schemes and title blocks. OFL 1.1, see OpenGOST-OFL.txt. */
@font-face {
  font-family: "OpenGOST B";
  src: url("../fonts/opengost-type-b.642e8bc08979.woff2") format("woff2");
  font-display: swap;
}

:root {
  --red: #c4161c;          /* RAL 3020 — the lifts' paint; actions only */
  --red-dark: #9c0f14;
  --anthracite: #373f43;   /* RAL 7016 — dark sections */
  --navy: #334455;         /* the request block, as on the old site */
  --ink: #22282b;          /* text, headings, drawing lines */
  --grey: #e3e6e4;         /* RAL 7035 tint — hero, panels */
  --grey-soft: #f2f4f3;
  --line: #c6ccc9;
  --muted: #586165;
  --white: #fff;
  --error: #b3261e;

  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-cond: "Sofia Sans Condensed", "Onest", system-ui, sans-serif;
  --font-draw: "OpenGOST B", "Sofia Sans Condensed", system-ui, sans-serif;
  --container: 78rem;
  --gutter: 1rem;
  --radius: 4px;
  /* Photos lift off the page a little; square corners, like the drawings. */
  --shadow-photo: 0 1px 3px rgb(34 40 43 / .1), 0 18px 40px -20px rgb(34 40 43 / .45);
  --shadow-card: 0 1px 3px rgb(34 40 43 / .08), 0 12px 32px -16px rgb(34 40 43 / .3);
  --section-y: clamp(3.5rem, 8vw, 6rem);
}
@media (min-width: 48rem) { :root { --gutter: 2rem; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
h1, h2, h3 { color: var(--ink); margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--font-cond); font-weight: 700; line-height: 1.02; letter-spacing: -.005em; }
h1 { font-size: clamp(2.75rem, 6vw, 4.75rem); }
h2 { font-size: clamp(2.125rem, 4.2vw, 3.25rem); }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1em; }

.visually-hidden, .field--hp {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--gutter); top: .5rem; z-index: 100; background: var(--white); padding: .5rem 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: .8rem 1.5rem;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--radius); cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-dark); }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--white); }
.btn--sm { min-height: 2.75rem; padding: .55rem 1.1rem; font-size: .9375rem; }

/* Header CTA: on hover a glint runs across once, like light on a polished rod;
   the button lifts a little and presses in on click. */
.btn--shine { position: relative; overflow: hidden; isolation: isolate; transition: background-color .2s, transform .15s, box-shadow .2s; }
.btn--shine::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: -60%; width: 35%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .5), transparent);
  transform: skewX(-20deg);
}
.btn--shine:hover, .btn--shine:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 18px rgb(196 22 28 / .35); }
.btn--shine:hover::after, .btn--shine:focus-visible::after { animation: btn-shine .75s ease-out; }
.btn--shine:active { transform: translateY(0) scale(.98); box-shadow: 0 2px 6px rgb(196 22 28 / .3); }
@keyframes btn-shine { to { left: 130%; } }

/* ---------- Top bar & header ---------- */
.topbar { display: none; background: var(--anthracite); color: #c9d0d3; font-size: .8125rem; }
.topbar__inner { display: flex; gap: 1.75rem; align-items: center; min-height: 2.25rem; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--white); }
.topbar__addr { margin-right: auto; }
@media (min-width: 60rem) { .topbar { display: block; } }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; }
.site-header__logo { flex: none; margin-right: auto; }
.site-header__logo img { width: auto; max-width: none; height: 1.35rem; }
@media (min-width: 30rem) { .site-header__logo img { height: 1.5rem; } }
.site-header__cta { display: none; align-items: center; gap: 1.25rem; }
.site-header__phone { color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }

.nav-toggle {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line); border-radius: var(--radius); order: 3;
}
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
  display: block; width: 1.25rem; height: 2px; background: var(--ink); position: relative; transition: transform .2s, background-color .2s;
}
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }
.is-open .nav-toggle__bar { background: transparent; }
.is-open .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.is-open .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav { display: none; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--red); }

/* mobile: dropdown panel */
.site-header.is-open .site-nav {
  display: block; position: absolute; inset: 100% 0 auto; max-height: calc(100vh - 4.25rem); overflow-y: auto;
  background: var(--white); border-bottom: 1px solid var(--line); padding: .5rem var(--gutter) 1.5rem;
}
.site-header.is-open .site-nav__list > li { border-bottom: 1px solid var(--line); }
.site-header.is-open .site-nav__list > li > a { display: block; padding: .9rem 0; font-size: 1.0625rem; }
.site-header.is-open .mega__inner { padding: 0; }
.site-header.is-open .mega__cats { padding: 0 0 .75rem 1rem; }
.site-header.is-open .mega__cat-link { display: block; padding: .45rem 0; color: var(--muted); }
.mega__panel { display: none; }

/* The logo is never squeezed, so the full menu only fits from 75rem. */
@media (min-width: 75rem) {
  .nav-toggle { display: none; }
  .site-nav { display: block; margin-right: auto; }
  .site-nav__list { display: flex; gap: 1.25rem; white-space: nowrap; }
  .site-nav__item > a { display: block; padding-block: 1.4rem; font-size: .9375rem; }
  .site-nav__item--has-sub > a::after { content: " ▾"; font-size: .7em; color: var(--muted); }

  /* Mega-menu: a full-width panel under the header; over a photo the header fills
     in together with it (see --menu-solid). The hovered (or focused, or first)
     category shows its models. */
  .mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 18px 32px rgb(34 40 43 / .12);
    opacity: 0; visibility: hidden; transform: translateY(-.5rem);
    transition: opacity .4s ease .1s, transform .4s ease .1s, visibility 0s linear .5s;
  }
  .site-nav__item--has-sub:hover .mega,
  .site-nav__item--has-sub:focus-within .mega {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .4s ease .05s, transform .4s ease .05s, visibility 0s;
  }
  .mega__inner { position: relative; min-height: 21rem; padding-block: 1.5rem; white-space: normal; }
  .mega__cats { width: 19rem; }
  .mega__cat-link { display: block; padding: .6rem .9rem; border-radius: var(--radius); }
  .mega__panel {
    position: absolute; top: 1.5rem; bottom: 1.5rem; left: calc(var(--gutter) + 19rem); right: var(--gutter);
    padding-left: 2rem; border-left: 1px solid var(--line);
  }
  /* Exactly one active category: the hovered one; else the focused one (keyboard);
     else the first. A focus left behind by a click never competes with the mouse. */
  .mega__cat:hover .mega__panel,
  .mega__cats:not(:hover) .mega__cat:focus-within .mega__panel,
  .mega__cats:not(:hover):not(:focus-within) .mega__cat:first-child .mega__panel { display: block; }
  .mega__cat:hover .mega__cat-link,
  .mega__cats:not(:hover) .mega__cat:focus-within .mega__cat-link,
  .mega__cats:not(:hover):not(:focus-within) .mega__cat:first-child .mega__cat-link { background: var(--grey-soft); color: var(--red); }
  .mega__models { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
  .mega__model { display: grid; gap: .1rem; }
  .mega__img { display: grid; place-items: center; height: 9rem; margin-bottom: .5rem; padding: .75rem; background: var(--grey-soft); }
  .mega__img img { max-height: 7.5rem; width: auto; }
  .mega__img .scissor-icon { width: auto; height: 6.5rem; }
  .mega__name { font-size: 1rem; font-weight: 600; color: var(--ink); }
  .mega__label { font-size: .875rem; font-weight: 400; color: var(--muted); }
  .mega__model:hover .mega__name { color: var(--red); }
  .mega__model--stub .mega__img { filter: grayscale(1); opacity: .5; }
  .mega .more-link { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
  .site-header__logo { margin-right: 1.5rem; }
  .site-header__logo img { height: 1.1rem; }
  /* No room for the phone beside the full menu: it stays in the top bar. */
  .site-header__phone { display: none; }
  .site-header__cta { display: flex; }
  .site-header__cta .btn { white-space: nowrap; }
}
@media (min-width: 82rem) { .site-header__logo img { height: 1.25rem; } }

/* ---------- Transparent header over the first section (body.overlay) ----------
   One number, --solid (0…1), drives the background, border, text colour and the
   logo cross-fade, so the header changes gradually instead of switching.
   --scroll-solid comes from site.js and follows the scroll position; --menu-solid
   is set by an open menu and animates. Without JS nojs.css lets it scroll away. */
@property --menu-solid { syntax: "<number>"; inherits: true; initial-value: 0; }
:root { --chrome: 4.25rem; }
@media (min-width: 60rem) { :root { --chrome: 6.5rem; } }
.site-header__logo { display: grid; }
.site-header__logo img { grid-area: 1 / 1; }
.site-header__logo-light { display: none; }
.site-nav__item > a, .site-header__phone { color: var(--nav-ink, var(--ink)); }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { background-color: var(--nav-ink, var(--ink)); }
.is-open .nav-toggle__bar { background-color: transparent; }

.overlay main { margin-top: calc(-1 * var(--chrome)); }
.overlay .topbar { position: relative; z-index: 51; background: transparent; color: var(--muted); }
.overlay .site-header {
  --solid: max(var(--scroll-solid, 0), var(--menu-solid));
  background: rgb(255 255 255 / var(--solid));
  border-bottom-color: rgb(198 204 201 / var(--solid));
  /* Frosted glass while half-filled, so the photo behind never looks muddy. */
  backdrop-filter: blur(calc(var(--solid) * 14px));
  transition: --menu-solid .4s ease .1s;
}
/* An open menu fills the header in step with the mega-menu fading in (same .4s). */
.overlay .site-header.is-open,
.overlay .site-header:has(.site-nav__item--has-sub:hover, .site-nav__item--has-sub:focus-within) {
  --menu-solid: 1; transition-delay: .05s;
}
/* Over a photo: light text and the white logo, blending to dark as --solid grows. */
.overlay--dark .topbar { color: rgb(255 255 255 / .85); }
.overlay--dark .topbar a:hover { color: var(--white); }
.overlay--dark .site-header { --nav-ink: color-mix(in srgb, var(--ink) calc(var(--solid) * 100%), var(--white)); }
.overlay--dark .site-header__logo-light { display: block; opacity: calc(1 - var(--solid)); }
.overlay--dark .site-header__logo-dark { opacity: var(--solid); }
.overlay--dark .nav-toggle { border-color: color-mix(in srgb, var(--line) calc(var(--solid) * 100%), rgb(255 255 255 / .45)); }
.overlay--dark .site-nav__item--has-sub > a::after { color: color-mix(in srgb, var(--muted) calc(var(--solid) * 100%), rgb(255 255 255 / .7)); }
/* Request button: white while the header is transparent, red once it fills in. */
.overlay .site-header__cta .btn--primary {
  background: color-mix(in srgb, var(--red) calc(var(--solid) * 100%), var(--white));
  color: color-mix(in srgb, var(--white) calc(var(--solid) * 100%), var(--red));
}
.overlay .site-header__cta .btn--primary:hover { background: var(--red-dark); color: var(--white); }
.overlay .eq-hero { padding-top: var(--chrome); }
/* Crumbs open every page at the top of its first section, right under the header. */
.overlay .eq-hero:not(:has(.breadcrumbs)) { padding-top: calc(var(--chrome) + clamp(1.5rem, 4vw, 3rem)); }
.eq-hero > .breadcrumbs, .contacts > .breadcrumbs { position: relative; margin-bottom: clamp(1rem, 3vw, 2rem); }
section.contacts { padding-top: 0; }

/* ---------- Lead page: full-screen photo, white form ---------- */
.lead-page {
  position: relative; isolation: isolate; display: grid; align-items: center; min-height: 100svh;
  padding-block: 3rem; background: var(--anthracite); color: #dfe4e6;
}
.overlay .lead-page { padding-top: calc(var(--chrome) + 2rem); }
.lead-page__photo { position: absolute; inset: 0; z-index: -1; }
.lead-page__photo picture, .lead-page__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.lead-page__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(20 24 26 / .88), rgb(20 24 26 / .62) 55%, rgb(20 24 26 / .4));
}
/* Phones: heading, form, then the hints — the form is what the visitor came for. */
.lead-page__grid { display: grid; gap: 2rem; grid-template-areas: "head" "card" "details"; }
.lead-page__head { grid-area: head; }
.lead-page__details { grid-area: details; }
.lead-page__grid > .lead-page__card { grid-area: card; }
@media (min-width: 60rem) {
  .lead-page__grid {
    grid-template-columns: 1fr minmax(0, 32rem); grid-template-rows: auto auto; gap: 0 4rem;
    grid-template-areas: "head card" "details card"; align-items: end;
  }
  .lead-page__details { align-self: start; }
  .lead-page__grid > .lead-page__card { align-self: center; }
}
.lead-page__details > p { margin: 1.5rem 0 1rem; }
.lead-page h1 { color: var(--white); }
.lead-page__lead { margin-top: 1rem; max-width: 34rem; }
.lead-page .lead__phone { margin-top: 1.5rem; }
.lead-page__card {
  background: var(--white); color: var(--ink); border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 24px 60px rgb(0 0 0 / .35);
}
.lead-page__card h1 { color: var(--ink); }
.lead-page__card--done { display: grid; gap: 1rem; justify-items: start; max-width: 34rem; }
.lead-page__phone { color: var(--ink); font-family: var(--font-cond); font-size: 2rem; font-weight: 700; text-decoration: none; }
.lead-page__phone:hover { color: var(--red); }

/* ---------- Hero: workshop photo on the whole first screen, the headline straight on it ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid;
  min-height: max(34rem, 100svh); background: var(--anthracite); color: #e6eaec;
}
.hero__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__photo picture, .hero__photo img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__photo img { object-position: 60% 50%; }
/* Darker at the top (header), the left and the bottom (text): the photo stays visible on the right. */
.hero__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgb(20 24 26 / .7), rgb(20 24 26 / 0) 12rem),
    linear-gradient(0deg, rgb(20 24 26 / .85), rgb(20 24 26 / .15) 70%),
    linear-gradient(90deg, rgb(20 24 26 / .55), rgb(20 24 26 / 0) 70%);
}
.hero__video { opacity: 0; transition: opacity .8s; }
.hero__video.is-playing { opacity: 1; }
.hero__inner { align-self: end; padding-block: calc(var(--chrome) + 3rem) clamp(2.5rem, 7vh, 5rem); }
.hero__title { max-width: 22ch; color: var(--white); font-size: clamp(2.75rem, 7.5vw, 6.25rem); line-height: .95; text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
.hero__lead { margin-top: 1.5rem; max-width: 38rem; font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.hero__phone { color: var(--ink); font-family: var(--font-cond); font-size: 1.625rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.hero__phone:hover { color: var(--red); }
.hero .hero__phone { color: var(--white); }
.hero .hero__phone:hover { color: #ff8a80; }

/* Company facts: big numbers, each under a short red rule. */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; margin: 0; }
.stats > div { display: flex; flex-direction: column-reverse; gap: .35rem; }
.stats dt { color: var(--muted); font-size: .9375rem; line-height: 1.35; }
.stats dd {
  margin: 0; font-family: var(--font-cond); font-size: clamp(2.5rem, 4.5vw, 3.75rem); font-weight: 700;
  line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
@media (min-width: 48rem) { .stats--row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats--row { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Intro, ~2.5 s on every visit: a red line sweeps a dark veil off the photo while the photo settles
   from a close-up, then the headline comes into focus and the rest rises after it.
   The photo and the headline are LCP candidates, so they are painted from the first frame (never
   opacity: 0): the photo only moves and brightens under the veil, the headline only sharpens.
   The veil is a separate layer, it does not delay their paint. */
.hero__sweep { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero__photo img { animation: hero-settle 2.6s cubic-bezier(.2, .6, .2, 1) both; }
  .hero__sweep {
    display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: var(--anthracite);
    animation: hero-unveil 1.15s cubic-bezier(.65, 0, .25, 1) .15s both;
  }
  /* The line rides the veil's edge, with a glow like a cutting beam (outside the veil's clip,
     so the glow also falls on the photo). */
  .hero__photo::before {
    content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 2px; background: var(--red);
    box-shadow: 0 0 12px 2px rgb(196 22 28 / .85), 0 0 48px 12px rgb(196 22 28 / .35);
    animation: hero-beam 1.15s cubic-bezier(.65, 0, .25, 1) .15s both;
  }
  .hero__title { animation: hero-focus .9s cubic-bezier(.2, .7, .3, 1) .85s both; }
  .hero__lead { animation: hero-rise .7s cubic-bezier(.2, .7, .3, 1) 1.2s both; }
  .hero__actions { animation: hero-rise .7s cubic-bezier(.2, .7, .3, 1) 1.4s both; }
}
@keyframes hero-settle { from { transform: scale(1.18); filter: brightness(.55) saturate(.6); } }
@keyframes hero-unveil { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes hero-beam { from { left: 0; } 92% { opacity: 1; } to { left: 100%; opacity: 0; } }
/* Faint, not invisible: the headline still counts as painted for LCP. */
@keyframes hero-focus { from { transform: translateY(.35em); filter: blur(12px); letter-spacing: .04em; color: rgb(255 255 255 / .06); text-shadow: none; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(1.5rem); } }

/* ---------- Configurator: sliders + live scheme ---------- */
.config { background: var(--grey); }
/* A faint drawing of scissor lifts; its middle is empty, so the sliders stay readable. */
.config-bg { position: absolute; inset: 0; z-index: -1; }
.config-bg picture, .config-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Burgundy, as the model pages' red stage: white lettering, white sliders and button. The scissor
   line page (page-white) shows the configurator without its background and keeps the light look. */
body:not(.page-white) .config { background: #4a070c; color: rgb(255 255 255 / .9); }
body:not(.page-white) .config h2, body:not(.page-white) .config .range label, body:not(.page-white) .config .range output { color: var(--white); }
body:not(.page-white) .config .config__lead { color: rgb(255 255 255 / .75); }
body:not(.page-white) .config .range label b { color: rgb(255 255 255 / .55); }
body:not(.page-white) .config .range input::-webkit-slider-runnable-track { background: linear-gradient(var(--white), var(--white)) 0 0 / var(--fill) 100% no-repeat, rgb(255 255 255 / .25); }
body:not(.page-white) .config .range input::-moz-range-track { background: linear-gradient(var(--white), var(--white)) 0 0 / var(--fill) 100% no-repeat, rgb(255 255 255 / .25); }
body:not(.page-white) .config .range input::-webkit-slider-thumb { border-color: var(--white); background: #4a070c; }
body:not(.page-white) .config .range input::-moz-range-thumb { border-color: var(--white); background: #4a070c; }
body:not(.page-white) .config .btn--primary { background: var(--white); color: var(--red); }
body:not(.page-white) .config .btn--primary:hover { background: #f1dcdc; color: var(--red-dark); }
/* The drawing sheet and the note stay white paper with dark lettering. */
body:not(.page-white) .config .sheet { color: var(--ink); }
/* Phones: heading, scheme, sliders — so the scheme stays in view while dragging. */
.config__grid { display: grid; gap: 2rem; grid-template-areas: "head" "sheet" "form"; }
.config__head { grid-area: head; }
.config__form { grid-area: form; }
.config .sheet { grid-area: sheet; }
@media (min-width: 60rem) {
  .config__grid {
    grid-template-columns: 1fr 1.05fr; grid-template-rows: auto 1fr; gap: 0 4rem;
    grid-template-areas: "head sheet" "form sheet"; align-items: start;
  }
  .config .sheet { align-self: center; }
}
.config__lead { margin-top: 1rem; max-width: 34rem; color: var(--muted); }
.config__controls { display: grid; gap: 1.25rem; margin-block: 2rem; }
@media (max-width: 59.99rem) { .config__controls { margin-top: 0; } }
/* On phones the values sit next to the sliders; the title block would only repeat them. */

.range { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .25rem 1rem; }
.range label { font-weight: 600; }
.range label b { margin-left: .2rem; font-family: var(--font-cond); color: var(--muted); }
.range output { font-family: var(--font-cond); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.range input {
  grid-column: 1 / -1; width: 100%; height: 1.75rem; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
  --fill: 20%;
}
.range input::-webkit-slider-runnable-track {
  height: 4px; background: linear-gradient(var(--red), var(--red)) 0 0 / var(--fill) 100% no-repeat, #b5bcb8;
}
.range input::-moz-range-track {
  height: 4px; background: linear-gradient(var(--red), var(--red)) 0 0 / var(--fill) 100% no-repeat, #b5bcb8;
}
.range input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.125rem; height: 1.75rem; margin-top: calc(2px - .875rem);
  background: var(--white); border: 2px solid var(--ink); border-radius: 3px;
}
.range input::-moz-range-thumb {
  box-sizing: border-box; width: 1.125rem; height: 1.75rem;
  background: var(--white); border: 2px solid var(--ink); border-radius: 3px;
}
.range input:focus-visible { outline: none; }
.range input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--red); outline-offset: 2px; }
.range input:focus-visible::-moz-range-thumb { outline: 3px solid var(--red); outline-offset: 2px; }

/* Drawing sheet: a frame and a title block, like the corner of a drawing. */
.sheet { margin: 0; background: var(--white); border: 1px solid var(--line); padding: .6rem; }
.config .sheet, .eq-hero .sheet { box-shadow: var(--shadow-card); }
.sheet__drawing { border: 1px solid var(--ink); border-bottom: 0; padding: .75rem; }
.config__fallback { display: grid; place-items: center; padding: 2rem; }
.config__fallback img { max-height: 24rem; width: auto; }
.scheme { display: block; width: 100%; height: auto; font-family: var(--font-draw); }
.scheme .s-floor { stroke: var(--ink); stroke-width: 1.5; }
.scheme .s-hatch { stroke: var(--ink); stroke-width: 1; }
.scheme .s-frame { fill: var(--anthracite); }
.scheme .s-mast { fill: var(--red); }
.scheme .s-arm { stroke: var(--red); stroke-width: 9; stroke-linecap: round; }
.scheme .s-pin { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; }
.scheme .s-cyl { stroke: var(--ink); stroke-width: 8; stroke-linecap: round; }
.scheme .s-rod { stroke: #aeb6b9; stroke-width: 4; stroke-linecap: round; }
.scheme .s-load { fill: var(--grey); stroke: var(--ink); stroke-width: 1.5; }
.scheme .s-ghost { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 6 4; }
.scheme .s-dim { stroke: var(--ink); stroke-width: 1; fill: none; }
.scheme .s-arrow { fill: var(--ink); }
.scheme text { fill: var(--ink); font-size: 26px; paint-order: stroke; stroke: var(--white); stroke-width: 6px; stroke-linejoin: round; }

.stamp { border: 1px solid var(--ink); }
.stamp__name { display: block; padding: .5rem .75rem; border-bottom: 1px solid var(--ink); font-family: var(--font-draw); font-size: 1.125rem; }
/* Nameplate marking «ТЕМИР ГИДРО 2X 2000.1200.2000.1500», all in one plain line. */
.stamp__name--code { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stamp__facts { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; }
.stamp__facts > div { display: flex; flex-direction: column-reverse; padding: .5rem .75rem; }
.stamp__facts > div:nth-child(odd) { border-right: 1px solid var(--ink); }
.stamp__facts > div:nth-child(n+3) { border-top: 1px solid var(--ink); }
.stamp__facts dt { font-family: var(--font-draw); font-size: .9375rem; color: var(--muted); line-height: 1.3; }
.stamp__facts dd { margin: 0; font-family: var(--font-draw); font-size: 1.5rem; font-weight: 400; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 30rem) {
  .stamp__facts { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .stamp__facts > div + div { border-left: 1px solid var(--ink); }
  .stamp__facts > div:nth-child(odd) { border-right: 0; }
  .stamp__facts > div:nth-child(n+3) { border-top: 0; }
  /* Two rows of four: the configurator's results. */
  .stamp__facts--wide > div:nth-child(4n+1) { border-left: 0; }
  .stamp__facts--wide > div:nth-child(n+5) { border-top: 1px solid var(--ink); }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.section--grey { background: var(--grey-soft); }
/* Tinted bands sit a step below the page: a soft shade along the top edge marks where the
   next block begins. One side only, so two tinted blocks in a row meet at one soft line. */
.section--grey, .section--drawing { position: relative; }
.section--grey::before, .section--drawing::before {
  content: ""; position: absolute; left: 0; right: 0; height: 1.75rem; pointer-events: none;
}
.section--grey::before, .section--drawing::before, .section--shade::before { top: 0; background: linear-gradient(rgb(34 40 43 / .1), rgb(34 40 43 / 0)); }
.section--shade { position: relative; }
.section--shade::before { content: ""; position: absolute; left: 0; right: 0; height: 1.75rem; pointer-events: none; }
/* The shade falls back into this block instead of the next one. */
.section--shade-bottom::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.75rem; pointer-events: none;
  background: linear-gradient(to top, rgb(34 40 43 / .1), rgb(34 40 43 / 0));
}
.section--shade-bottom + .section::before { content: none; }
/* A tinted block that continues the one above it: no shade along its top edge. */
.section--flat::before { content: none; }
.section--rule { padding-top: 0; }
.section--rule > .container { border-top: 1px solid var(--line); padding-top: var(--section-y); }
.section--dark { background: var(--navy); color: #d6dde4; }
.section--dark h2 { color: var(--white); }
.section--dark .section-head__lead { color: #b5c1cc; }
/* Request block: a faint drawing behind the navy; the drawing sits on the right, the text stays calm. */
.section--drawing { position: relative; isolation: isolate; overflow: hidden; }
/* Request blocks: dark red under the red drawing (the navy stays for the cylinders' dark block). */
.section--dark.section--drawing { background: #5e0b0f; color: rgb(255 255 255 / .85); }
.lead-bg { position: absolute; inset: 0; z-index: -1; }
.lead-bg picture, .lead-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.section-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head__lead { margin-top: 1rem; color: var(--muted); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; }
.more-link { font-weight: 600; text-underline-offset: .2em; }

.facts { display: flex; flex-wrap: wrap; gap: .4rem; }
.facts li {
  padding: .15rem .5rem; border: 1px solid var(--ink); border-radius: 2px;
  font-family: var(--font-cond); font-size: 1rem; font-weight: 600; white-space: nowrap;
}

/* ---------- Catalog index (rows with a thumbnail) ---------- */
.catalog__list { border-top: 1px solid var(--ink); }
.catalog__list > li { border-bottom: 1px solid var(--line); }
.catalog__row {
  display: grid; grid-template-columns: 5rem 1fr; gap: .25rem 1.25rem; align-items: center;
  padding-block: 1rem; color: inherit; text-decoration: none;
}
.catalog__thumb { grid-row: span 2; display: grid; place-items: center; aspect-ratio: 1; background: var(--grey-soft); padding: .5rem; }
.catalog__thumb img { max-height: 4rem; width: auto; object-fit: contain; }
.catalog__row p { color: var(--muted); font-size: .9375rem; }
.catalog__row .facts { grid-column: 2; }
@media (min-width: 40rem) {
  .catalog__row { grid-template-columns: 7rem 1fr auto; }
  .catalog__thumb { grid-row: auto; }
  .catalog__thumb img { max-height: 5.5rem; }
  .catalog__row .facts { grid-column: 3; }
}
.catalog__thumb img { transition: transform .35s cubic-bezier(.2, .7, .3, 1); }
.catalog__row h3 { transition: color .15s; }
.catalog__row:hover h3 { color: var(--red); }
.catalog__row:hover .catalog__thumb img { transform: translateY(-5px); }
/* ---------- Icons (static/img/icons.svg, Lucide) ---------- */
.icon {
  display: inline-block; flex: none; width: 1.5rem; height: 1.5rem;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Features: icon cards ---------- */
.features { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .features { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.feature {
  display: grid; grid-template-columns: auto 1fr; column-gap: 1.1rem; align-content: start;
  padding: 1.5rem; border-radius: var(--radius); background: var(--white); box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow .25s, transform .25s;
}
.section--grey .feature { box-shadow: none; }
.feature:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(34 40 43 / .1); }
.feature__icon {
  grid-row: span 2; display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border-radius: 50%; background: rgb(196 22 28 / .08); color: var(--red);
}
.feature__icon .icon { width: 1.6rem; height: 1.6rem; }
.feature h3 { align-self: end; font-family: var(--font-cond); font-size: 1.375rem; font-weight: 700; line-height: 1.15; }
.feature p { margin-top: .3rem; color: var(--muted); font-size: .9375rem; }

/* ---------- Reasons ---------- */
.reasons { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .reasons { grid-template-columns: 1fr 2fr; gap: 4rem; } }
.reasons__list { display: grid; gap: 1.5rem 2rem; }
@media (min-width: 40rem) { .reasons__list { grid-template-columns: 1fr 1fr; } }
.reasons__list li { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.reasons__icon {
  grid-row: span 2; display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 50%; background: rgb(196 22 28 / .08); color: var(--red);
}
.reasons__icon .icon { width: 1.5rem; height: 1.5rem; }
.reasons__list h3 { align-self: end; margin-bottom: .2rem; }
.reasons__list p { color: var(--muted); font-size: .9375rem; }

/* ---------- Steps: five stages on one line, icons on a rail ---------- */
.steps { display: grid; gap: 1.75rem; counter-reset: step; }
.steps__item { position: relative; display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 1rem; align-content: start; }
.steps__icon {
  grid-row: span 3; display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
  border-radius: 50%; background: var(--white); color: var(--red); box-shadow: 0 0 0 1px var(--line);
}
.steps__icon .icon { width: 1.6rem; height: 1.6rem; }
.steps__item h3 { font-family: var(--font-cond); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.steps__item p { margin-top: .35rem; color: var(--muted); font-size: .9375rem; }
/* Mobile: a vertical rail between the icons. */
.steps__item:not(:last-child)::before {
  content: ""; position: absolute; left: 1.75rem; top: 3.5rem; bottom: -1.75rem; width: 1px; background: var(--line);
}
@media (min-width: 64rem) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
  .steps__item { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .steps__icon { grid-row: auto; margin-bottom: 1rem; width: 4.5rem; height: 4.5rem; }
  .steps__icon .icon { width: 2rem; height: 2rem; }
  /* From the right edge of this icon to the left edge of the next one (gap 1.5rem, icon 4.5rem, .5rem air). */
  .steps__item:not(:last-child)::before { left: calc(50% + 2.75rem); right: calc(-50% + 1.25rem); top: 2.25rem; bottom: auto; width: auto; height: 1px; }
}

/* A decorative photo behind a whole section (spec tables); faded on the text side. */
.section-bg { position: absolute; inset: 0; z-index: -1; }
.section-bg picture, .section-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.section-bg::after { content: ""; position: absolute; inset: 0; background: rgb(242 244 243 / .7); }
@media (min-width: 48rem) {
  .section-bg::after { background: linear-gradient(90deg, rgb(242 244 243 / .9) 0%, rgb(242 244 243 / .75) 50%, rgb(242 244 243 / .1) 80%); }
}

/* ---------- Reveal on scroll (site.js): blocks rise and fade in, photos also open from the bottom ---------- */
/* `main` lifts these over the blocks' own transform/transition rules, declared later. */
main .reveal {
  opacity: 0; transform: translateY(1.5rem);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), clip-path .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0s);
}
/* Negative sides keep the photo's shadow visible while it opens. */
main .reveal--photo { transform: translateY(2rem); clip-path: inset(12% -3rem -3rem -3rem); }
main .reveal.is-visible { opacity: 1; transform: none; clip-path: inset(0); }
main .reveal--photo.is-visible { clip-path: inset(-3rem); }

/* ---------- Timeline (home): a photo per step, revealed on scroll ---------- */
.timeline { position: relative; max-width: var(--container); margin-inline: auto; --progress: 1; }
.timeline__list { display: grid; gap: 2.5rem; }
.timeline__rail { position: absolute; top: 0; bottom: 0; left: 1.5rem; width: 2px; background: var(--line); }
.timeline__fill { position: absolute; inset: 0; background: var(--red); transform-origin: top; transform: scaleY(var(--progress)); }
.timeline__item { position: relative; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1.25rem; row-gap: 1rem; }
.timeline__dot {
  position: relative; z-index: 1; grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 50%; background: var(--white); color: var(--red); box-shadow: 0 0 0 1px var(--line);
  transition: background-color .4s, color .4s, box-shadow .4s;
}
.timeline__dot .icon { width: 1.4rem; height: 1.4rem; }
.timeline__photo { grid-column: 2; grid-row: 2; margin: 0; overflow: hidden; background: var(--grey); aspect-ratio: 3 / 2; box-shadow: var(--shadow-photo); }
.timeline__photo img { width: 100%; height: 100%; object-fit: cover; }
/* A step with several photos: the frame takes the photo's look, thumbnails sit under it. */
.timeline__photo--gallery { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; }
.timeline__frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--grey); box-shadow: var(--shadow-photo); }
/* Hidden photos stay focusable: the viewer focuses the one it was closed on. */
.timeline__shot { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.timeline__shot.is-active { opacity: 1; pointer-events: auto; }
.timeline__shot picture, .timeline__thumb picture { display: contents; }
.timeline__shot img, .timeline__thumb img { width: 100%; height: 100%; object-fit: cover; }
.timeline__shot.is-top img, .timeline__thumb.is-top img { object-position: 50% 35%; }
.timeline__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .5rem; }
.timeline__thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--grey); opacity: .6; transition: opacity .2s; }
.timeline__thumb:hover, .timeline__thumb[aria-current="true"] { opacity: 1; }
.timeline__thumb[aria-current="true"]::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--red); }
.timeline__text { grid-column: 2; grid-row: 1; align-self: center; }
.timeline__text h3 { font-family: var(--font-cond); font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.05; }
.timeline__text p { margin-top: .5rem; max-width: 26rem; color: var(--muted); }
@media (min-width: 60rem) {
  .timeline__list { gap: 4rem; }
  .timeline__rail { left: calc(50% - 1px); }
  /* Photo, dot on the rail, text; every other step mirrored. */
  .timeline__item { grid-template-columns: 1fr 4.5rem 1fr; column-gap: 2.5rem; align-items: center; }
  .timeline__photo { grid-column: 1; grid-row: 1; }
  .timeline__dot { grid-column: 2; width: 4.5rem; height: 4.5rem; }
  .timeline__dot .icon { width: 2rem; height: 2rem; }
  .timeline__text { grid-column: 3; }
  .timeline__item:nth-child(odd) .timeline__photo { grid-column: 3; }
  .timeline__item:nth-child(odd) .timeline__text { grid-column: 1; text-align: right; justify-self: end; }
  .timeline__item:nth-child(odd) .timeline__text p { margin-left: auto; }
}
/* JS present: steps wait below and come up as they scroll in; the reached dot turns red. */
.reveal-on .timeline [data-reveal] .timeline__photo,
.reveal-on .timeline [data-reveal] .timeline__text { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), clip-path .9s cubic-bezier(.2, .7, .2, 1); }
.reveal-on .timeline [data-reveal] .timeline__photo { clip-path: inset(12% -3rem -3rem -3rem); transform: translateY(2rem); }
.reveal-on .timeline [data-reveal] .timeline__text { transform: translateY(1.5rem); transition-delay: .12s; }
.reveal-on .timeline [data-reveal].is-visible .timeline__photo,
.reveal-on .timeline [data-reveal].is-visible .timeline__text { opacity: 1; transform: none; clip-path: inset(-3rem); }
/* Without JS (or with reduced motion) the dots stay white: nothing tracks the scroll. */
.timeline__dot.is-reached { background: var(--red); color: var(--white); box-shadow: 0 0 0 6px rgb(196 22 28 / .14); }

/* ---------- Split (cylinders) ---------- */
.split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 60rem) { .split { grid-template-columns: 1fr 1.1fr; gap: 4rem; } }
.split__text { display: grid; gap: 1.25rem; justify-items: start; }
.split__text > p { color: var(--muted); max-width: 34rem; }
.specs { width: 100%; margin: 0; border-top: 1px solid var(--ink); }
.specs > div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-family: var(--font-cond); font-size: 1.1875rem; font-weight: 700; }
.split__main { background: var(--grey-soft); padding: clamp(1.5rem, 4vw, 3rem); }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .5rem; }
.thumbs a { display: block; }
.thumbs img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: opacity .2s; }
.thumbs a:hover img { opacity: .85; }

/* ---------- Projects ---------- */
.projects { display: grid; gap: 2rem 1.5rem; }
@media (min-width: 48rem) { .projects { grid-template-columns: repeat(3, 1fr); } }
.project { display: grid; gap: .4rem; color: inherit; text-decoration: none; }
.project picture { margin-bottom: .6rem; background: var(--grey-soft); }
.project img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }  /* photos from sites are portrait */
.project:hover h3 { color: var(--red); }
.project p { color: var(--muted); font-size: .9375rem; }

/* ---------- Industries ---------- */
.industries { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .industries { grid-template-columns: 1fr 2fr; gap: 4rem; } }
.industries__list { display: grid; gap: 0 2rem; }
@media (min-width: 40rem) { .industries__list { grid-template-columns: 1fr 1fr; } }
.industries__list a {
  display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start;
  padding-block: 1rem; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.industries__icon { grid-row: span 2; width: 1.75rem; height: 1.75rem; margin-top: .1rem; color: var(--red); }
.industries__list a:hover h3 { color: var(--red); }
.industries__list p { color: var(--muted); font-size: .9375rem; }

/* ---------- Lead ---------- */
.lead { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) { .lead { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.lead__text { display: grid; gap: 1.25rem; }
.params { margin: 0; border-top: 1px solid rgb(255 255 255 / .25); }
.params > div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: baseline; padding: .75rem 0; border-bottom: 1px solid rgb(255 255 255 / .25); }
.params dt { font-family: var(--font-cond); font-size: 1.625rem; font-weight: 700; color: var(--white); }
.params dd { margin: 0; }
.params--wide > div { grid-template-columns: 5.5rem 1fr; }  /* «D × S» needs a little more room than «L × B» */
.lead__phone a { color: var(--white); font-family: var(--font-cond); font-weight: 700; font-size: 1.75rem; text-decoration: none; white-space: nowrap; }
.lead__phone a:hover { text-decoration: underline; }
.lead__phone + .lead__phone { margin-top: .5rem; }
.lead__form { background: var(--white); color: var(--ink); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); }

/* ---------- Lead form ---------- */
.lead-form { display: grid; gap: 1rem; }
.field { display: grid; gap: .3rem; }
.field label { font-weight: 600; font-size: .9375rem; }
.field__optional { color: var(--muted); font-weight: 400; font-size: .875em; }
.field input:not([type="checkbox"]), .field textarea {
  font: inherit; padding: .75rem .9rem; min-height: 3rem; width: 100%;
  border: 1px solid #aab2b5; border-radius: var(--radius); background: var(--white); color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.field textarea { min-height: 6rem; resize: vertical; }
.field--checkbox { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; }
.field--checkbox label { font-weight: 400; font-size: .875rem; color: var(--muted); }
.field--checkbox input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--red); }
.field--checkbox .errorlist { grid-column: 1 / -1; }
.errorlist { list-style: none; margin: 0; padding: 0; color: var(--error); font-size: .875rem; }
.lead-form button {
  font: inherit; font-weight: 600; min-height: 3.25rem; padding: .8rem 1.5rem; cursor: pointer;
  background: var(--red); color: var(--white); border: 0; border-radius: var(--radius); justify-self: stretch;
}
.lead-form button:not(:disabled):hover { background: var(--red-dark); }
.lead-form button[type="submit"]:disabled {
  background: #e4e8e9; color: #59656b; opacity: 1; cursor: not-allowed; box-shadow: none;
}
.lead-form[aria-busy="true"] button[type="submit"] { cursor: progress; }
.lead-form__hint { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.lead-form__success { color: #1b7a3a; font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 1.5rem; }
@media (min-width: 60rem) { .faq { grid-template-columns: 1fr 2fr; gap: 4rem; } }
.faq__list { border-top: 1px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0; cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: none; font-family: var(--font-cond); font-size: 1.5rem; line-height: 1; color: var(--muted);
  transition: transform .2s;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .3s, content-visibility .3s allow-discrete; }
  .faq__item[open]::details-content { block-size: auto; }
}
.faq__item summary:hover h3 { color: var(--red); }
.faq__item p { padding: 0 3rem 1.25rem 0; color: var(--muted); max-width: 44rem; }

/* ---------- Articles ---------- */
.articles { display: grid; gap: 2rem 1.5rem; }
@media (min-width: 48rem) { .articles { grid-template-columns: repeat(3, 1fr); } }
.article { display: grid; gap: .5rem; align-content: start; color: inherit; text-decoration: none; }
.article__media { margin-bottom: .5rem; overflow: hidden; background: var(--grey); box-shadow: var(--shadow-card); }
.article__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s cubic-bezier(.4, .7, .04, .88); }
.article:hover .article__media img { transform: scale(1.04); }
.article:hover h3 { color: var(--red); }
.article p { color: var(--muted); font-size: .9375rem; }

/* ---------- Equipment page ---------- */
.eq-hero { background: var(--grey); padding-block: clamp(2rem, 5vw, 4rem); }
.eq-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 60rem) { .eq-hero__grid { grid-template-columns: 1fr 1.1fr; gap: 4rem; } }
.eq-hero__lead { margin-top: 1.25rem; max-width: 34rem; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); }
.eq-hero__link { display: inline-block; margin-top: 1.5rem; font-weight: 600; text-underline-offset: .2em; }
.eq-hero__drawing { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem); }
.eq-hero__drawing img { max-height: 18rem; width: auto; }

/* Series: pictograms grow with the number of scissor pairs, standing on one floor line. */
.series { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
@media (min-width: 48rem) { .series { grid-template-columns: repeat(4, 1fr); } }
.series__item { display: grid; grid-template-rows: 11.5rem auto auto; align-content: start; }
.scissor-icon line { stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; }
.scissor-icon__frame { fill: var(--anthracite); }
.series__item .scissor-icon { align-self: end; width: 6rem; height: auto; }
.series__photo { align-self: end; display: grid; place-items: end center; height: 100%; }
.series__photo img { max-height: 11rem; width: auto; }
.series__item--stub .series__photo { filter: grayscale(1); opacity: .45; }
.series__item h3 {
  margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--ink);
  font-family: var(--font-draw); font-size: 1.5rem; font-weight: 400;
}
.series__item p { color: var(--muted); }
.series__item .specs { margin-top: .75rem; font-size: .9375rem; }
.series__item h3 a { color: inherit; text-decoration: none; }
.series__item h3 a:hover { color: var(--red); }
.series__more { margin-top: .75rem; font-weight: 600; font-size: .9375rem; text-underline-offset: .2em; }
.series__note { margin-top: 2.5rem; max-width: 44rem; color: var(--muted); }

.reasons__list h3 a { color: inherit; text-underline-offset: .2em; }
.reasons__list h3 a:hover { color: var(--red); }

/* ---------- Line page with a model showcase (scissor lifts 1X–4X) ----------
   Each model is a sheet of graph paper with its render; next to it, the specs.
   The sheets alternate sides, so the eye walks down the series as it grows taller. */
.lineup { padding-block: clamp(3rem, 7vw, 5rem); }
.lineup__grid { display: grid; gap: 2rem; align-items: center; }
.lineup__sheet { padding: 0; box-shadow: var(--shadow-card); }
.lineup__drawing { display: grid; place-items: center; min-height: 20rem; padding: clamp(1.5rem, 4vw, 2.5rem); }
/* Graph paper: 5 mm cells with a stronger line every fifth, as on drawing paper.
   Also the backdrop of the 3D model on the model pages. */
.lineup__drawing, .model-3d__stage, .cyl-type__drawing {
  background:
    linear-gradient(rgb(34 40 43 / .09) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(90deg, rgb(34 40 43 / .09) 1px, transparent 1px) 0 0 / 3rem 3rem,
    linear-gradient(rgb(34 40 43 / .04) 1px, transparent 1px) 0 0 / .6rem .6rem,
    linear-gradient(90deg, rgb(34 40 43 / .04) 1px, transparent 1px) 0 0 / .6rem .6rem,
    var(--white);
}
.lineup__drawing img { width: auto; max-height: 24rem; filter: drop-shadow(0 18px 16px rgb(34 40 43 / .12)); }
.lineup__copy { max-width: 36rem; }
.lineup__text { margin-top: 1rem; color: var(--muted); font-size: 1.0625rem; }
/* Specs as a title block: thin ink cells, label above, value in the drawing face. */
.lineup__specs { display: grid; grid-template-columns: 1fr; margin: 1.75rem 0 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); background: var(--white); }
.lineup__specs > div { padding: .7rem .9rem .8rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.lineup__specs dt { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .9375rem; line-height: 1.3; }
.lineup__specs dt .icon { flex: none; width: 1.125rem; height: 1.125rem; color: var(--red); }
.lineup__specs dd { margin: .3rem 0 0 1.625rem; font-family: var(--font-cond); font-size: 1.5rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lineup__specs dd span { font-family: var(--font); font-size: .9375rem; font-weight: 400; color: var(--muted); }
.lineup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }
.lineup__link { font-weight: 600; color: var(--ink); text-underline-offset: .25em; }
.lineup__link:hover { color: var(--red); }
@media (min-width: 30rem) {
  .lineup__specs { grid-template-columns: repeat(2, 1fr); }
  .lineup__specs > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .lineup__grid { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 5rem); }
  .lineup__drawing { min-height: 30rem; }
  .lineup__drawing img { max-height: 26rem; }
  .lineup--alt .lineup__sheet { order: 2; }
}

/* Comparison of the models: a plain table, scrolls sideways on a phone. */
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 46rem; border-collapse: collapse; border-top: 1px solid var(--ink); font-variant-numeric: tabular-nums; }
.compare th, .compare td { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.compare thead th { color: var(--muted); font-size: .875rem; font-weight: 500; line-height: 1.3; border-bottom-color: var(--ink); }
.compare tbody th { font-family: var(--font-cond); font-size: 1.5rem; font-weight: 700; }
.compare tbody th a { color: var(--ink); text-underline-offset: .2em; }
.compare tbody th a:hover { color: var(--red); }
.compare td { font-family: var(--font-cond); font-size: 1.1875rem; font-weight: 600; white-space: nowrap; }
.compare tbody tr:hover { background: var(--grey-soft); }
.compare__note { margin-top: 1.25rem; max-width: 44rem; color: var(--muted); font-size: .9375rem; }

/* What to send for a calculation: the request on the left, the list on the right. */
.brief { display: grid; gap: 2.5rem; }
.brief__head p { margin-top: 1rem; max-width: 34rem; color: var(--muted); }
.brief__list { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.brief__list li { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.brief__list .reasons__icon { grid-row: span 2; }
.brief__list h3 { align-self: end; }
.brief__list p { color: var(--muted); font-size: .9375rem; }
@media (min-width: 60rem) { .brief { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 5rem); align-items: start; } }

/* Scissor line page: under the red hero the blocks alternate plain white and a barely-there #fafafa
   (the hero is the first child, so the even children are white); no grey bands, no shades between
   them, the configurator without its photo. A hairline marks where the next block starts. */
.page-white main > :is(.section, .lineup):not(.section--dark) { background: var(--white); }
.page-white main > :is(.section, .lineup):not(.section--dark):nth-child(odd) { background: #fafafa; }
.page-white .section--grey::before, .page-white .config::before { content: none; }
.page-white .config-bg { display: none; }
/* From the red hero to the first model: a soft shade under the hero's edge, as between other blocks. */
.line-hero + .lineup { position: relative; }
.line-hero + .lineup::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.75rem; pointer-events: none;
  background: linear-gradient(rgb(34 40 43 / .1), rgb(34 40 43 / 0));
}
.page-white main > :is(.section, .lineup):not(.section--dark) + :is(.section, .lineup):not(.section--dark) {
  border-top: 1px solid var(--line);
}
.catalog__row:hover h3 { color: var(--red); }

.gallery { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .gallery { grid-template-columns: 2fr 1fr; } .gallery__item--photo { grid-row: span 2; } }
.gallery__item { display: grid; place-items: center; min-height: 14rem; padding: 1.5rem; background: var(--white); }
.gallery__item img { max-height: 22rem; width: auto; }
.gallery__item--photo { position: relative; min-height: 18rem; padding: 0; overflow: hidden; }
.gallery__item--fill { position: relative; min-height: 14rem; padding: 0; overflow: hidden; }
.gallery__item--fill picture, .gallery__item--fill img,
.gallery__item--photo picture, .gallery__item--photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; }

/* ---------- Catalog section ---------- */
/* Series photo tiles (catalog): render on white, a dark fade at the bottom, the name on it. */
.tiles-title { margin-bottom: clamp(2rem, 4vw, 3rem); text-align: center; }
.tiles-title a { color: inherit; text-decoration: none; }
.tiles-title a:hover { color: var(--red); }
.lift-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 60rem) { .lift-tiles { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
/* Any number of cards in one row on wide screens (e.g. "other lifts": five lines). */
@media (min-width: 60rem) { .lift-tiles--fit { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.tiles-cta {
  display: grid; gap: 1rem; justify-items: start; margin-top: 2rem; padding: 1.5rem;
  border-radius: var(--radius); background: var(--white);
}
@media (min-width: 40rem) { .tiles-cta { grid-template-columns: 1fr auto; align-items: center; } }
.lift-tile {
  position: relative; display: block; height: clamp(15rem, 26vw, 18.75rem); overflow: hidden;
  background: var(--white); text-decoration: none;
  box-shadow: var(--shadow-card); transition: box-shadow .3s;
}
.lift-tile:hover { box-shadow: 0 12px 28px rgb(34 40 43 / .18); }
.lift-tile__media { position: absolute; inset: 1.25rem 1.25rem 4.75rem; transition: transform .5s cubic-bezier(.4, .7, .04, .88); }
.lift-tile__media picture { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lift-tile__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.lift-tile__media .scissor-icon { position: absolute; inset: 0; margin: auto; width: auto; height: 75%; }
.lift-tile:hover .lift-tile__media { transform: scale(1.06); }
.lift-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgb(20 24 26 / 0) 62%, rgb(20 24 26 / .3) 80%, rgb(20 24 26 / .6));
  opacity: .9; transition: opacity .5s;
}
.lift-tile:hover::after { opacity: 1; }
.lift-tile__desc { position: absolute; inset: auto 0 0; z-index: 1; padding: 1rem; text-align: center; color: rgb(255 255 255 / .85); font-size: .875rem; }
.lift-tile h3 { text-shadow: 0 1px 6px rgb(0 0 0 / .45); color: var(--white); font-family: var(--font-cond); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.1; font-weight: 700; transition: color .15s; }
.lift-tile:hover h3 { color: #ff8a80; }
/* Two narrow columns on phones: a smaller caption, the render kept above it. */
@media (max-width: 39.99rem) {
  .lift-tile__media { inset: .75rem .75rem 6rem; }
  .lift-tile__desc { padding: .75rem .5rem; font-size: .8125rem; line-height: 1.3; }
  .lift-tile h3 { font-size: 1rem; }
}

/* Home catalog: six cards; a series is a stack that opens its models in a panel under the row. */
.eq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
/* Rows of three; an incomplete last row stretches its cards to the full width
   (panels are list items too, hence "of .eq-item"). */
@media (min-width: 60rem) {
  .eq-grid { grid-template-columns: repeat(6, 1fr); gap: 2rem 1.5rem; }
  .eq-item { grid-column: span 2; }
  .eq-item:nth-child(3n+1 of .eq-item):nth-last-child(2 of .eq-item),
  .eq-item:nth-child(3n+2 of .eq-item):nth-last-child(1 of .eq-item) { grid-column: span 3; }
  .eq-item:nth-child(3n+1 of .eq-item):nth-last-child(1 of .eq-item) { grid-column: 1 / -1; }
}
@media (max-width: 59.99rem) {
  .eq-item:nth-child(odd of .eq-item):nth-last-child(1 of .eq-item) { grid-column: 1 / -1; }
}
/* Cylinders and power units under the lifts: two wide cards, the same gap as between the rows. */
.eq-grid--hydraulics { margin-top: 1.5rem; }
@media (min-width: 60rem) { .eq-grid--hydraulics { margin-top: 2rem; } }
/* Every card keeps room for the sheet edges, so a row lines up and the panel finds its row. */
.eq-item { position: relative; isolation: isolate; min-width: 0; margin: .75rem .75rem 0 0; }
.eq-item--group::before, .eq-item--group::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--radius);
  background: #f7f8f7; box-shadow: 0 0 0 1px var(--line), var(--shadow-card); transition: transform .35s cubic-bezier(.3, .7, .2, 1);
}
.eq-item--group::before { transform: translate(6px, -6px); }
.eq-item--group::after { z-index: -2; background: #eceeed; transform: translate(12px, -12px); }
.eq-item--group:hover::before { transform: translate(8px, -8px); }
.eq-item--group:hover::after { transform: translate(16px, -16px); }
/* The picture on top, the caption under it: nothing lies over the photo. One media height for
   every card, so a row of three and a row of two wide cards line up. */
.eq-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none; transition: box-shadow .3s;
}
.eq-card:hover { box-shadow: 0 12px 28px rgb(34 40 43 / .18); }
.eq-card__media {
  position: relative; display: block; height: clamp(11rem, 19vw, 15rem); overflow: hidden;
  background: radial-gradient(ellipse at 50% 70%, var(--white), var(--grey-soft) 75%);
}
.eq-card__media picture { position: absolute; inset: 1rem; display: flex; align-items: center; justify-content: center; transition: transform .5s cubic-bezier(.4, .7, .04, .88); }
.eq-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.eq-card:hover .eq-card__media picture { transform: scale(1.05); }
/* A photo with its own background fills the frame instead of standing in it like a cut-out render. */
.eq-card--photo .eq-card__media picture { inset: 0; }
.eq-card--photo .eq-card__media img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.eq-card__cap { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem 1rem; border-top: 3px solid var(--red); }
.eq-card h3 { font-family: var(--font-cond); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.1; font-weight: 700; transition: color .15s; }
.eq-card:hover h3 { color: var(--red); }
.eq-card__meta { display: inline-flex; flex: none; align-items: center; gap: .25rem; color: var(--muted); font-size: .875rem; white-space: nowrap; }
.eq-card__meta .icon { width: 1em; height: 1em; transition: transform .3s cubic-bezier(.4, .7, .04, .88); }
.eq-card:hover .eq-card__meta .icon { transform: translateX(4px); }
.eq-card[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--ink), var(--shadow-card); }

.eq-panel { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; margin-block: -.5rem; transition: grid-template-rows .4s cubic-bezier(.3, .7, .2, 1); }
.eq-panel.is-open { grid-template-rows: 1fr; }
.eq-panel.is-instant { transition: none; }
.eq-panel__clip { min-height: 0; overflow: hidden; }
/* The notch points at the card that opened the panel (--notch is set by site.js). */
.eq-panel__body { position: relative; margin-top: 14px; padding: clamp(1.25rem, 3vw, 2rem); border-top: 3px solid var(--ink); background: var(--white); box-shadow: var(--shadow-card); }
.eq-panel__body::before { content: ""; position: absolute; top: -14px; left: var(--notch, 50%); translate: -50% 0; border: 11px solid transparent; border-top: 0; border-bottom-color: var(--ink); }
.eq-panel__title { margin-bottom: 1.25rem; font-family: var(--font-cond); font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.05; font-weight: 700; }
.eq-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; }
.eq-model {
  display: grid; grid-template-rows: 1fr auto; gap: .5rem; height: clamp(12rem, 20vw, 15rem); padding: 1rem;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none;
  transition: border-color .2s, transform .25s cubic-bezier(.3, .7, .2, 1);
}
.eq-model:hover { border-color: var(--ink); transform: translateY(-3px); }
.eq-model__media { position: relative; min-height: 0; }
.eq-model__media picture { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.eq-model__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.eq-model__cap { font-family: var(--font-draw); font-size: 1.25rem; line-height: 1; color: var(--red); }
.eq-panel.is-open .eq-model { animation: eq-rise .45s cubic-bezier(.3, .7, .2, 1) .12s both; }
/* One after another (no inline styles: the CSP forbids them). */
.eq-panel.is-open li:nth-child(2) .eq-model { animation-delay: .18s; }
.eq-panel.is-open li:nth-child(3) .eq-model { animation-delay: .24s; }
.eq-panel.is-open li:nth-child(4) .eq-model { animation-delay: .3s; }
@keyframes eq-rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .eq-panel, .eq-item--group::before, .eq-item--group::after { transition: none; }
  .eq-panel.is-open .eq-model { animation: none; }
}
@media (max-width: 39.99rem) {
  .eq-card__media { height: 9rem; }
  .eq-card__cap { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .15rem; padding: .6rem .75rem .75rem; }
  .eq-card h3 { font-size: 1.05rem; }
  .eq-models { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .eq-model { height: 11rem; padding: .75rem; }
  .eq-model__cap { font-size: 1rem; overflow-wrap: anywhere; }
}

.cat-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.cat-hero h1 { margin-top: .5rem; }
.cat-cards { display: grid; gap: 2.5rem 1.5rem; }
@media (min-width: 40rem) { .cat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .cat-cards { grid-template-columns: repeat(3, 1fr); } }
.cat-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: .5rem; align-content: start; height: 100%; color: inherit; text-decoration: none; }
.cat-cards > li { min-width: 0; }
/* The render sits inside the box and is never scaled above its own size (small files stay sharp). */
.cat-card__media { position: relative; aspect-ratio: 4 / 3; margin-bottom: .5rem; background: var(--grey-soft); }
.cat-card__media picture { position: absolute; inset: 1.5rem; display: flex; align-items: center; justify-content: center; }
.cat-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; transition: transform .35s cubic-bezier(.2, .7, .3, 1); }
.cat-card:hover .cat-card__media img { transform: translateY(-6px); }
.cat-card h3 { font-family: var(--font-cond); font-size: 1.625rem; font-weight: 700; line-height: 1.1; transition: color .15s; }
.cat-card:hover h3 { color: var(--red); }
.cat-card p { color: var(--muted); font-size: .9375rem; }
/* A full-row card (e.g. hydraulic cylinders after six lift lines): picture left, text right. */
.cat-cards__wide { grid-column: 1 / -1; }
.cat-card__specs { margin-top: .5rem; }
@media (min-width: 60rem) {
  .cat-card--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 3rem; }
  .cat-card--wide .cat-card__media { grid-row: 1 / 4; margin-bottom: 0; aspect-ratio: 16 / 9; }
  .cat-card--wide h3 { align-self: end; }
}

/* ---------- About ---------- */
.about-hero__legal { margin-top: 1rem; max-width: 34rem; color: var(--muted); }
.about-req { margin-top: 1.5rem; }
/* Who we are: the company text on the left, the director's words on the right. */
.about-intro { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) { .about-intro { grid-template-columns: 1.15fr 1fr; gap: 5rem; } }
.about-intro__text { display: grid; gap: 1.25rem; max-width: 40rem; }
.about-intro__text > p { color: var(--muted); }
.about-intro__address { margin-top: -.5rem; font-weight: 600; color: var(--ink) !important; }
.about-intro__text h3 { margin-top: .75rem; font-family: var(--font-cond); font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 700; }
.about-intro__list { display: grid; gap: .6rem; }
.about-intro__list li { position: relative; padding-left: 1.5rem; }
.about-intro__list li::before { content: ""; position: absolute; left: 0; top: .7em; width: .75rem; height: 2px; background: var(--red); }
.about-quote { position: relative; margin: 0; padding: 2.5rem 2rem 2rem; background: var(--grey-soft); border-top: 3px solid var(--red); }
@media (min-width: 60rem) { .about-intro__aside { position: sticky; top: 7rem; margin-top: 4rem; } }
.about-intro__stats { margin-top: 2.5rem; }
.about-quote::before {
  content: "«"; position: absolute; top: -.15em; right: 1.5rem; color: var(--red); opacity: .15;
  font-family: var(--font-cond); font-size: 9rem; font-weight: 700; line-height: 1;
}
.about-quote blockquote { margin: 0; }
.about-quote blockquote p { font-family: var(--font-cond); font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.25; }
.about-quote figcaption { display: grid; gap: .15rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; }
.about-quote figcaption b { color: var(--ink); font-size: 1.0625rem; }
/* Requisites on the left, the generated cylinder drawing visible on the right. */
.about-req-section { position: relative; isolation: isolate; overflow: hidden; background: var(--grey); }
.about-req-section__bg { position: absolute; inset: 0; z-index: -1; }
.about-req-section__bg picture, .about-req-section__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; }
.about-req-section__bg::after { content: ""; position: absolute; inset: 0; background: rgb(227 230 228 / .75); }
.about-req-section__inner { max-width: var(--container); }
.about-req-section__inner > * { max-width: 36rem; }
@media (min-width: 60rem) {
  .about-req-section__bg::after { background: linear-gradient(90deg, rgb(227 230 228 / .95) 0%, rgb(227 230 228 / .85) 38%, transparent 60%); }
}

/* ---------- Contacts ---------- */
.contacts { position: relative; isolation: isolate; background: var(--grey); padding-block: clamp(2rem, 5vw, 4rem); }
/* A real project photo behind a light veil: text stays readable on the left. */
.contacts__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.contacts__photo picture, .contacts__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.contacts__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(242 244 243 / .97) 0%, rgb(242 244 243 / .92) 42%, rgb(242 244 243 / .35) 100%);
}
@media (max-width: 59.99rem) { .contacts__photo::after { background: rgb(242 244 243 / .93); } }
/* A light drawing needs only a soft veil where the text sits. */
.contacts__photo--soft img { object-position: 70% 50%; }
.contacts__photo--soft::after { background: linear-gradient(90deg, rgb(227 230 228 / .85), rgb(227 230 228 / .2) 55%, transparent); }
@media (max-width: 59.99rem) { .contacts__photo--soft::after { background: rgb(227 230 228 / .7); } }
.contacts__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) { .contacts__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.contacts__phone {
  display: inline-block; margin-top: 1.5rem; color: var(--ink); text-decoration: none; white-space: nowrap;
  font-family: var(--font-cond); font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 700; line-height: 1;
}
.contacts__phone:hover { color: var(--red); }
.contacts__note { margin-top: .5rem; color: var(--muted); }
.contacts__list { margin: 2rem 0 0; border-top: 1px solid var(--ink); }
.contacts__list > div {
  display: grid; gap: .15rem 1.5rem; padding-block: .9rem; border-bottom: 1px solid var(--line);
}
@media (min-width: 40rem) { .contacts__list > div { grid-template-columns: 10rem 1fr; } }
.contacts__list dt { color: var(--muted); }
.contacts__list dd { margin: 0; }
.contacts__list dd > a { color: var(--ink); font-weight: 600; text-decoration: none; }
.contacts__list dd > a:hover { color: var(--red); }
.contacts__maps { display: flex; gap: 1.25rem; margin-top: .35rem; font-weight: 600; }
.contacts__maps a { text-underline-offset: .2em; }
.contacts__form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); }
.contacts__form-lead { margin: .75rem 0 1.5rem; color: var(--muted); }

/* Map block: address and route links beside the map in a drawing-sheet frame. */
.map-block__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 60rem) { .map-block__grid { grid-template-columns: 1fr 2fr; gap: 4rem; } }
.map-block__address { margin-top: 1.25rem; font-family: var(--font-draw); font-size: 1.5rem; line-height: 1.3; }
.map-block__hours { margin-top: .5rem; color: var(--muted); }
.map-block__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.map-block__iframe { display: block; width: 100%; height: clamp(20rem, 50vh, 30rem); border: 0; background: var(--grey-soft); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: .875rem; color: var(--muted); padding-block: 1rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; }
.breadcrumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--line); }
.breadcrumbs a { color: var(--muted); }

.lang-switcher ul { display: flex; gap: .75rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #a9b2b6; font-size: .9375rem; }
.site-footer a { color: #dde2e4; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer__grid { display: grid; gap: 2.5rem; padding-block: 3.5rem; }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.2fr 2fr 1.2fr; gap: 3rem; } }
.site-footer__brand img { height: 1.6rem; width: auto; margin-bottom: 1.25rem; }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.site-footer__nav ul { display: grid; gap: .5rem; }
.site-footer__title { margin-bottom: 1rem; color: var(--white); font-weight: 600; }
.site-footer__title a { color: var(--white); }
.site-footer__contacts { font-style: normal; display: grid; gap: .45rem; align-content: start; }
.site-footer__phone { font-family: var(--font-cond); font-size: 1.5rem; font-weight: 700; }

/* ---------- Photo viewer: photos in descriptions open full screen ---------- */
.zoom { display: block; cursor: zoom-in; }
.zoom img { transition: opacity .2s; }
.zoom:hover img { opacity: .92; }
/* Opaque dark stage over the whole window; the page under it does not scroll (lightbox.js). */
html.lightbox-open { overflow: hidden; }
html.lightbox-open body { padding-right: var(--scrollbar, 0); }
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--white); overflow: hidden;
}
.lightbox::backdrop { background: rgb(10 13 15 / .97); backdrop-filter: blur(8px); }
.lightbox[open] {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  opacity: var(--fade, 1);
}
.lightbox[open]::backdrop { animation: lightbox-fade .25s ease; }
.lightbox:not(.is-open)::backdrop { opacity: 0; transition: opacity .2s; }
.lightbox:not(.is-open) .lightbox__top, .lightbox:not(.is-open) .lightbox__caption,
.lightbox:not(.is-open) .lightbox__thumbs, .lightbox:not(.is-open) .lightbox__arrow { opacity: 0; transition: opacity .15s; }
@keyframes lightbox-fade { from { opacity: 0; } }

.lightbox__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; }
.lightbox__count { font-family: var(--font-cond); font-size: 1.125rem; font-weight: 600; letter-spacing: .04em; color: #c9d0d3; font-variant-numeric: tabular-nums; }
/* One cell the size of the stage: the picture's max-height: 100% needs a definite height to resolve
   against, or a tall (portrait) photo runs off the bottom of the screen. */
.lightbox__stage {
  position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  min-height: 0; overflow: hidden; padding: 0 1rem; touch-action: none; user-select: none;
}
@media (min-width: 48rem) { .lightbox__stage { padding-inline: 5.5rem; } }
.lightbox__img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  box-shadow: 0 30px 80px rgb(0 0 0 / .5); transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.lightbox__spinner {
  position: absolute; top: 50%; left: 50%; width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem;
  border: 3px solid rgb(255 255 255 / .25); border-top-color: var(--white); border-radius: 50%;
  animation: lightbox-spin .8s linear infinite; pointer-events: none;
}
@keyframes lightbox-spin { to { transform: rotate(1turn); } }
.lightbox__caption { margin: 0 auto; max-width: 48rem; padding: .9rem 1rem .5rem; text-align: center; font-size: .9375rem; line-height: 1.5; color: #c9d0d3; }
.lightbox__caption:empty { display: none; }

/* Thumbnails of the group: the current one framed in red. */
.lightbox__thumbs {
  display: flex; justify-content: safe center; gap: .5rem; padding: .5rem 1rem 1rem;
  overflow-x: auto; scrollbar-width: none;
}
.lightbox__thumb {
  flex: none; width: 4.5rem; height: 3.25rem; padding: 0; border: 2px solid transparent; background: rgb(255 255 255 / .06);
  opacity: .55; cursor: pointer; transition: opacity .15s, border-color .15s;
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumb:hover { opacity: .9; }
.lightbox__thumb.is-active { opacity: 1; border-color: var(--red); }
@media (max-width: 47.99rem) { .lightbox__thumbs { display: none; } }

.lightbox__btn {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid rgb(255 255 255 / .2); border-radius: 50%; background: rgb(255 255 255 / .06);
  color: var(--white); cursor: pointer; transition: background-color .15s, border-color .15s;
}
.lightbox__btn:hover { background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .5); }
.lightbox__btn:focus-visible, .lightbox__thumb:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.lightbox__close { margin-left: auto; }
.lightbox__arrow { position: absolute; top: 50%; width: 3.25rem; height: 3.25rem; transform: translateY(-50%); }
.lightbox__arrow .icon { width: 1.5rem; height: 1.5rem; }
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }
/* Phones: swipe instead of arrows over the photo. */
@media (max-width: 47.99rem) { .lightbox__arrow { display: none; } }
.lightbox [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .lightbox[open]::backdrop, .lightbox__spinner { animation: none; }
  .lightbox__img { transition: none; }
}

/* ---------- Social profiles: header, footer and contacts — in the networks' own colours ---------- */
.social { display: flex; flex-wrap: wrap; gap: .5rem; }
.social__link {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border-radius: 10px; color: var(--white); text-decoration: none;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.social__link .icon { stroke-width: 2; }
.social__link:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 .5rem 1rem rgb(0 0 0 / .18); }
.social__link--vk { background: #0077ff; }
.social__link--youtube { background: #ff0033; }
.social__link--instagram { background: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%); }
.site-footer .social__link, .site-footer .social__link:hover { color: var(--white); text-decoration: none; }
.social--footer { margin-top: .75rem; }
/* Top bar: small round badges in the line of contacts. */
.social--topbar { gap: .4rem; }
.social--topbar .social__link { width: 1.6rem; height: 1.6rem; border-radius: 50%; }
.social--topbar .icon { width: 1rem; height: 1rem; }
.topbar .social--topbar .social__link, .topbar .social--topbar .social__link:hover { color: var(--white); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-block: 1.5rem; border-top: 1px solid rgb(255 255 255 / .12); font-size: .8125rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- Model page: gallery + key specs, description, specs, kit, delivery ---------- */
.model-hero__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) { .model-hero__grid { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.model-gallery__main { position: relative; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; }
/* Each slide fills the frame, so tall renders (3X, 4X) shrink to fit instead of being cut. */
.model-gallery__slide { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2rem); }
.model-gallery__slide picture { position: absolute; inset: clamp(1rem, 3vw, 2rem); }
.model-gallery__slide img { width: 100%; height: 100%; object-fit: contain; }
.model-gallery__slide .scissor-icon { width: auto; height: 70%; }
.model-gallery__slide--photo picture { inset: 0; }
.model-gallery__slide--photo img { object-fit: cover; }
.model-hero__info h1 { margin-top: 0; }
/* The tabs follow right after: a short tail under the picture, not a full section gap. */
.model-hero { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 60rem) { .model-gallery__main { aspect-ratio: 16 / 11; } }

/* Product page tabs (tabs.js) under the first section; the bar sticks under the header while reading.
   Without JS the same bar is a list of anchors to sections that follow one another. */
.page-nav { position: sticky; top: 4.25rem; z-index: 40; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 14px 24px -14px rgb(34 40 43 / .21); }
.page-nav__inner { display: flex; align-items: center; gap: 1.5rem; }
/* Tabs in the middle; auto margins rather than justify-content, so a list wider than a phone
   still scrolls from its first tab. */
.page-nav__list { display: flex; flex: 1; gap: clamp(1.25rem, 3vw, 2.5rem); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.page-nav__list > li:first-child { margin-left: auto; }
.page-nav__list > li:last-child { margin-right: auto; }

/* Product bar: the product line sits on top of the tabs, one header-height tall. Out of the way
   (pulled up over the hero's edge, transparent, not clickable) until the bar sticks to the top;
   then it covers the header: picture, name, phone, request button. The tabs stay where they were. */
.page-nav--product {
  top: 0; margin-top: -4.25rem; pointer-events: none;
  background: linear-gradient(transparent 4.25rem, var(--white) 4.25rem);
}
.page-nav--product .page-nav__inner { pointer-events: auto; }
.page-nav--product.is-stuck { z-index: 51; }
.page-nav__product {
  height: 4.25rem; border-bottom: 1px solid var(--line); background: var(--white);
  opacity: 0; visibility: hidden; transform: translateY(-.5rem);
  transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.page-nav--product.is-stuck .page-nav__product {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .2s, transform .2s;
}
.page-nav__product-inner { display: flex; align-items: center; gap: 1rem; height: 100%; }
.page-nav__thumb { flex: none; display: grid; place-items: center; width: 3.5rem; height: 3rem; }
.page-nav__thumb img { max-width: 100%; max-height: 3rem; width: auto; object-fit: contain; }
.page-nav__name { flex: 1; min-width: 0; font-family: var(--font-cond); font-size: 1.1875rem; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-nav__name span { display: block; font-family: var(--font); font-size: .8125rem; font-weight: 400; color: var(--muted); }
.page-nav__phone { display: none; color: var(--ink); font-family: var(--font-cond); font-size: 1.25rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.page-nav__phone:hover { color: var(--red); }
@media (min-width: 48rem) { .page-nav__phone { display: block; } }
/* On a phone the button says just "Расчёт", so the model name keeps its room; readers still hear the full label. */
.page-nav__cta-short { display: none; }
@media (max-width: 29.99rem) {
  .page-nav__cta-short { display: inline; }
  /* The whole name on two lines rather than cut before the model's letters. */
  .page-nav__name { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 1.0625rem; }
  .page-nav__name span { display: none; }
  .page-nav__cta-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.page-nav__tab {
  position: relative; display: block; padding-block: 1.05rem; color: var(--muted); font-weight: 600; font-size: 1rem; text-decoration: none;
  transition: color .15s;
}
.page-nav__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.page-nav__tab:hover { color: var(--ink); }
.page-nav__tab.is-active { color: var(--ink); }
.page-nav__tab.is-active::after { transform: none; }
.page-nav__tab:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
/* A tab opens right under the bar: less air above it than between ordinary blocks. */
.tabs__panels > .section { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
/* Under the bar's own shadow the block's top shade is lighter, so the two don't add up to a dark band. */
.tabs__panels > .section::before { background: linear-gradient(rgb(34 40 43 / .07), rgb(34 40 43 / 0)); }
.tabs__panels > [role="tabpanel"] { animation: tab-in .35s ease; }
@keyframes tab-in { from { opacity: 0; transform: translateY(.5rem); } }
@media (prefers-reduced-motion: reduce) { .tabs__panels > [role="tabpanel"] { animation: none; } }

.model-about { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) { .model-about { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 4rem; } }
.model-about h2 { margin-bottom: 1.5rem; }
/* The model's other views (renders on white), under its description. */
.model-views { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.model-views h3 { margin-bottom: 1rem; font-family: var(--font-cond); font-size: 1.5rem; font-weight: 700; }
.model-views__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.25rem; }
.model-views__item { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 1.25rem; background: var(--white); box-shadow: var(--shadow-card); transition: box-shadow .3s; }
.model-views__item:hover { box-shadow: var(--shadow-photo); }
.model-views__item picture { display: contents; }
.model-views__item img { width: 100%; height: 100%; object-fit: contain; }
/* Photos from the client's sites: a mosaic placed by lift_models.mosaic() — the first photo large,
   explicit cells per breakpoint (ms-* phones, 2 columns; mo-* from 48rem, 4 columns). */
.model-objects { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.model-objects h3 { margin-bottom: 1rem; font-family: var(--font-cond); font-size: 1.5rem; font-weight: 700; }
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 14rem; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ms-c1 { grid-column-start: 1; } .ms-c2 { grid-column-start: 2; } .ms-w1 { grid-column-end: span 1; }
.ms-w2 { grid-column-end: span 2; } .ms-r1 { grid-row-start: 1; } .ms-r2 { grid-row-start: 2; }
.ms-r3 { grid-row-start: 3; } .ms-r4 { grid-row-start: 4; } .ms-r5 { grid-row-start: 5; }
.ms-r6 { grid-row-start: 6; } .ms-r7 { grid-row-start: 7; } .ms-r8 { grid-row-start: 8; }
.ms-r9 { grid-row-start: 9; } .ms-r10 { grid-row-start: 10; } .ms-r11 { grid-row-start: 11; }
.ms-r12 { grid-row-start: 12; } .ms-h1 { grid-row-end: span 1; } .ms-h2 { grid-row-end: span 2; }
.ms-none { display: none; }
@media (min-width: 48rem) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 21rem; gap: .75rem; }
  .ms-none:not(.mo-none) { display: block; }
  .mo-c1 { grid-column-start: 1; } .mo-c2 { grid-column-start: 2; } .mo-c3 { grid-column-start: 3; }
  .mo-c4 { grid-column-start: 4; } .mo-w1 { grid-column-end: span 1; } .mo-w2 { grid-column-end: span 2; }
  .mo-w3 { grid-column-end: span 3; } .mo-w4 { grid-column-end: span 4; } .mo-r1 { grid-row-start: 1; }
  .mo-r2 { grid-row-start: 2; } .mo-r3 { grid-row-start: 3; } .mo-r4 { grid-row-start: 4; }
  .mo-r5 { grid-row-start: 5; } .mo-r6 { grid-row-start: 6; } .mo-r7 { grid-row-start: 7; }
  .mo-r8 { grid-row-start: 8; } .mo-h1 { grid-row-end: span 1; } .mo-h2 { grid-row-end: span 2; }
  .mo-none { display: none; }
}
.model-objects__item { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--radius); background: var(--grey); color: var(--white); box-shadow: var(--shadow-card); transition: box-shadow .3s; }
.model-objects__item:hover { box-shadow: var(--shadow-photo); }
.model-objects__item picture { display: contents; }
.model-objects__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.model-objects__item:hover img { transform: scale(1.05); }
/* The caption shows on hover; on the large photo it stays (touch screens: only there). */
.mosaic__caption { position: absolute; inset: auto 0 0; padding: 2.5rem .875rem .75rem; font-size: .875rem; line-height: 1.35;
  background: linear-gradient(transparent, rgb(20 24 26 / .85)); opacity: 0; translate: 0 .5rem; transition: opacity .3s, translate .3s; }
.model-objects__item:hover .mosaic__caption, .model-objects__item:focus-visible .mosaic__caption,
.mosaic > li:first-child .mosaic__caption { opacity: 1; translate: 0; }
.mosaic > li:first-child .mosaic__caption { padding: 4rem 1.25rem 1.125rem; font-size: 1rem; }
.mosaic__tile { display: grid; align-content: end; gap: .5rem; height: 100%; padding: 1rem; border-radius: var(--radius); color: var(--white); text-decoration: none; transition: background-color .3s;
  background: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px) 0 0 / 2rem 2rem, linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px) 0 0 / 2rem 2rem, var(--anthracite); }
.mosaic__tile:hover { background-color: var(--ink); }
.mosaic__tile b { font-family: var(--font-cond); font-size: 1.375rem; line-height: 1.05; }
.mosaic__tile span { display: none; color: rgb(255 255 255 / .75); font-size: .9375rem; }
@media (min-width: 48rem) { .mosaic__tile { padding: 1.25rem; } .mosaic__tile b { font-size: clamp(1.5rem, 2.4vw, 2rem); } .mosaic__tile span { display: block; } }
.mosaic__tile em { font-style: normal; font-weight: 600; color: #ff7b7f; }

/* Console lifts' chains: the photo edge to edge. Once it scrolls in it opens from the middle while
   the photo comes from close up and settles (.is-pending until then, model.js); after that it drifts a
   little against the scroll (--drift). Without JS or with reduced motion it simply stays open. */
/* It opens the kit tab: the photo starts right under the tabs bar (beats the panels' own top padding). */
.tabs__panels > .section--chains { padding-top: 0; }
.chains { position: relative; }
.chains__photo { position: relative; height: min(100svh, 75vw); overflow: hidden; background: var(--ink); }
.chains__photo picture { display: contents; }
.chains__photo img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 50% 30%; }
@media (prefers-reduced-motion: no-preference) {
  /* An explicit open inset: from inset() to none the browser would jump instead of animating. */
  .chains__photo { clip-path: inset(0 0 -3rem 0); transition: clip-path 1.4s cubic-bezier(.77, 0, .18, 1); }
  .chains__photo img { translate: 0 var(--drift, 0); transition: scale 2.6s cubic-bezier(.3, .7, .2, 1) .15s, filter 1.8s ease-out .15s; }
  .chains.is-pending .chains__photo { clip-path: inset(48% 6% 48% 6%); }
  .chains.is-pending .chains__photo img { scale: 1.35; filter: brightness(.55) saturate(.6); }
  .chains__text { transition: opacity .8s ease .9s, translate .9s cubic-bezier(.2, .8, .2, 1) .9s; }
  .chains.is-pending .chains__text { opacity: 0; translate: 0 1.5rem; }
}
/* Heading and lead on the photo, along its bottom: white text with a shadow straight on the photo,
   no blur, tint or box. On phones they go under the photo. */
.chains__title { font-size: clamp(2rem, 4vw, 3rem); max-width: 48rem; }
.chains__lead { margin-top: .875rem; max-width: 44rem; color: var(--muted); font-size: 1.125rem; }
.chains__text { padding-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 48rem) {
  .chains__text { position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 4vw, 3rem); z-index: 1; padding-top: 0; isolation: isolate;
    color: var(--white); text-shadow: 0 1px 2px rgb(0 0 0 / .6), 0 2px 16px rgb(0 0 0 / .55); }
  .chains__title { color: var(--white); }
  .chains__lead { color: rgb(255 255 255 / .92); }
}

/* A light shadow where the photo meets the grey: the photo's lower edge darkens a touch and casts a soft shadow. */
.chains__photo::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; pointer-events: none;
  background: linear-gradient(rgb(20 24 26 / 0), rgb(20 24 26 / .28)); }
.chains__photo { position: relative; z-index: 1; box-shadow: 0 2px 4px rgb(20 24 26 / .12), 0 18px 32px -10px rgb(20 24 26 / .45); }

/* Under the photo, on white: the headline rising word by word, the lead and the advantages. */
.chains-strike { padding-block: clamp(3rem, 7vw, 5rem); background: var(--white); color: var(--ink); }
.chains-strike--last { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.chains-strike__new { display: block; font-family: var(--font-cond); font-weight: 800; font-size: clamp(2.5rem, 6.4vw, 5rem); line-height: 1; }
.chains-strike__w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.chains-strike__w i { display: inline-block; font-style: normal; }
.chains-strike__lead { margin-top: 1.25rem; max-width: 40rem; font-size: 1.125rem; color: var(--muted); }
/* The advantages: four columns, each under a red rule, an icon on a soft red circle on top. */
.chains__points { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.chains__points li { padding-top: 1.25rem; border-top: 3px solid var(--red); }
.chains__points .chains__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin: 0 0 .875rem; border-radius: 50%; background: rgb(196 22 28 / .08); color: var(--red); }
.chains__points .chains__icon .icon { width: 1.6rem; height: 1.6rem; }
.chains__points b { display: block; font-family: var(--font-cond); font-size: 1.375rem; line-height: 1.15; }
.chains__points span { display: block; margin-top: .375rem; color: var(--muted); font-size: .9375rem; }
@media (prefers-reduced-motion: no-preference) {
  .chains-strike__w i { transition: translate .7s cubic-bezier(.2, .8, .2, 1); }
  .chains-strike__lead { transition: opacity .8s .8s, translate .8s .8s; }
  .chains-strike .chains__points { transition: opacity .8s 1.1s, translate .8s 1.1s; }
  .chains-strike.is-pending .chains-strike__w i { translate: 0 110%; }
  .chains-strike.is-pending .chains-strike__lead { opacity: 0; translate: 0 1rem; }
  .chains-strike.is-pending .chains__points { opacity: 0; translate: 0 1rem; }
}

/* Then a drawing sheet: graph paper, the drive with its sprockets in the lifts' red, moving (model.js). */
.chains-sheet { margin-bottom: clamp(3rem, 6vw, 4.5rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); background-color: #f7f8f7;
  background-image: linear-gradient(rgb(34 40 43 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(34 40 43 / .06) 1px, transparent 1px),
    linear-gradient(rgb(34 40 43 / .03) 1px, transparent 1px), linear-gradient(90deg, rgb(34 40 43 / .03) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; }
.chains-sheet__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 60rem) { .chains-sheet__grid { grid-template-columns: 1.15fr 1fr; gap: 3rem; } }
.chains-sheet__svg { width: 100%; max-width: 34rem; height: auto; justify-self: center; overflow: hidden; }
/* The second row behind the first: the same drawing, darker. */
.chains-sheet__back { filter: brightness(.55); }
.chains-sheet__svg .draw { font-family: var(--font-draw); font-size: 15px; fill: var(--ink); }
.chains-sheet__svg .draw--red { fill: var(--red); }
/* Position numbers on the drawing; their names are in the stamp. */
.chains-sheet__bubble line { stroke: var(--ink); stroke-width: 1; }
.chains-sheet__bubble circle { fill: #fff; stroke: var(--ink); stroke-width: 1.3; }
.chains-sheet__bubble .chains-sheet__dot { fill: var(--ink); stroke: none; }
.chains-sheet__bubble text { font-family: var(--font-draw); font-size: 14px; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.chains-stamp { border: 2px solid var(--ink); background: rgb(255 255 255 / .7); }
.chains-stamp__name { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .625rem .875rem; border-bottom: 2px solid var(--ink); font-family: var(--font-draw); font-size: 1.125rem; }
.chains-stamp__name span { color: var(--muted); }
.chains-stamp__parts { margin: 0; padding: 0; list-style: none; border-bottom: 2px solid var(--ink); }
.chains-stamp__parts li { display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.chains-stamp__parts li:last-child { border-bottom: 0; }
.chains-stamp__parts b { align-self: stretch; display: grid; place-items: center; border-right: 1px solid var(--ink); font-family: var(--font-draw); font-weight: 400; }
.chains-stamp__parts span { padding: .5rem .75rem; }
.chains-stamp__parts em { padding: .5rem .75rem; font-style: normal; font-family: var(--font-draw); color: var(--muted); }
.chains-stamp__facts { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; }
.chains-stamp__facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .25rem; padding: .875rem; }
.chains-stamp__facts > div:nth-child(odd) { border-right: 1px solid var(--ink); }
.chains-stamp__facts dt { font-family: var(--font-draw); font-size: .9375rem; color: var(--muted); line-height: 1.3; }
.chains-stamp__facts dd { margin: 0; font-family: var(--font-cond); font-size: clamp(2.5rem, 4.5vw, 3.5rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.chains-stamp__facts dd.is-red { color: var(--red); }
.chains-stamp__facts dd small { margin-left: .15em; font-size: .5em; font-weight: 600; }

/* ---------- 3D model (static/js/model3d.js) ----------
   The render stays until the visitor asks for 3D; then <model-viewer> takes its place
   in the same box, on graph paper. */
.model-3d { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.model-3d h3 { margin-bottom: .25rem; font-family: var(--font-cond); font-size: 1.5rem; font-weight: 700; }
.model-3d__hint { margin: 0 0 1rem; color: var(--muted); }
/* Scene switch (the lift / the lift in its shaft): a segmented control above the stage. */
.model-3d__scenes { display: inline-flex; margin-bottom: 1rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-card); }
.model-3d__scene {
  min-height: 2.75rem; padding: .55rem 1.25rem; border: 0; border-radius: var(--radius); background: transparent;
  color: var(--ink); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
  transition: color .15s, background-color .15s;
}
.model-3d__scene:hover { color: var(--red); }
.model-3d__scene[aria-pressed="true"] { background: var(--red); color: var(--white); }
.model-3d__stage { position: relative; aspect-ratio: 4 / 3; box-shadow: var(--shadow-card); }
/* The picture keeps clear of the button in the corner. */
.model-3d__stage picture { position: absolute; inset: 5.25rem clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem); }
.model-3d__stage img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 16px rgb(34 40 43 / .12)); }
@media (min-width: 60rem) { .model-3d__stage { aspect-ratio: 2 / 1; } }
.model3d-viewer { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; --poster-color: transparent; }
[data-model3d]:not(.is-3d) .model3d-viewer { opacity: 0; pointer-events: none; }
[data-model3d].is-3d picture { visibility: hidden; }
/* «3D»: big solid gold letters floating in the corner — a gold face with a passing shine on a thick
   bronze body (slices stacked in depth by model3d.js) and a warm shadow under them; they turn to
   follow the pointer and make one turn on click. Gold stands out on the white sheet next to the red
   lift. Once the model is on, «Показать фото» is a quiet white chip. */
.model3d-toggle {
  position: absolute; top: 1rem; right: 1.25rem; z-index: 3;
  display: grid; place-items: center; min-width: 3rem; min-height: 3rem; padding: .25rem .5rem;
  border: 0; border-radius: var(--radius); background: none; color: #c98f0e;
  font: inherit; cursor: pointer; perspective: 420px; -webkit-tap-highlight-color: transparent;
}
.model3d-toggle::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -.5rem; height: .75rem; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(201 143 14 / .45), transparent 70%); filter: blur(3px); pointer-events: none;
}
.model3d-toggle:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.model3d-toggle__tilt { display: grid; place-items: center; transform-style: preserve-3d; will-change: transform; }
.model3d-toggle__word {
  display: grid; transform-style: preserve-3d;
  font-family: var(--font-cond); font-size: 3.75rem; font-weight: 900; line-height: 1; letter-spacing: .02em;
}
.model3d-toggle__word > span { grid-area: 1 / 1; display: block; user-select: none; }
.model3d-toggle__face {
  background:
    linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .85) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat,
    linear-gradient(180deg, #fff2b8 0%, #f7cf4f 38%, #d39b12 62%, #f3c74a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: model3d-shine 3.8s ease-in-out infinite;
}
@keyframes model3d-shine { 0%, 55% { background-position: -150% 0, 0 0; } 85%, 100% { background-position: 250% 0, 0 0; } }
.model3d-toggle:hover .model3d-toggle__word { filter: brightness(1.1); }
/* The words stay for screen readers only while the letters show. */
[data-model3d]:not(.is-3d) .model3d-toggle__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.model3d-toggle.is-turning .model3d-toggle__word,
.model3d-toggle[aria-busy="true"] .model3d-toggle__word { animation: model3d-turn .7s cubic-bezier(.3, .7, .3, 1); }
.model3d-toggle[aria-busy="true"] .model3d-toggle__word { animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; }
.model3d-toggle[aria-busy="true"] { cursor: progress; }
@keyframes model3d-turn { from { rotate: y 0deg; } to { rotate: y 360deg; } }
[data-model3d].is-3d .model3d-toggle {
  display: inline-flex; min-height: 2.75rem; padding: .55rem 1rem; border-radius: var(--radius); perspective: none;
  background: rgb(255 255 255 / .94); color: var(--ink); font-size: .9375rem; font-weight: 600;
  box-shadow: 0 4px 14px rgb(0 0 0 / .18);
}
[data-model3d].is-3d .model3d-toggle::after, [data-model3d].is-3d .model3d-toggle__tilt { display: none; }
[data-model3d].is-3d .model3d-toggle:hover { color: var(--red); }
@media (prefers-reduced-motion: reduce) {
  .model3d-toggle.is-turning .model3d-toggle__word, .model3d-toggle[aria-busy="true"] .model3d-toggle__word, .model3d-toggle__face { animation: none; }
}
.model-about__uses { padding: 1.75rem; border-radius: var(--radius); background: var(--white); }
.model-about__uses h3 { margin-bottom: 1rem; font-family: var(--font-cond); font-size: 1.5rem; font-weight: 700; }
.checklist { display: grid; gap: .65rem; }
.checklist li { position: relative; padding-left: 1.75rem; }
.checklist li::before {
  content: ""; position: absolute; left: .15rem; top: .45em; width: .9rem; height: .5rem;
  border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg);
}

.spec-table { width: 100%; max-width: 52rem; border-collapse: collapse; border-top: 1px solid var(--ink); }
.spec-table th, .spec-table td { padding: .8rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.spec-table th { width: 55%; padding-right: 1.5rem; color: var(--muted); font-weight: 400; }
.spec-table td { font-family: var(--font-cond); font-size: 1.1875rem; font-weight: 700; }

/* Kit: the picture with numbered callouts (an SVG overlay in the picture's pixels), the list beside it. */
.kit { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60rem) { .kit { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3.5rem; } }
.kit--list { grid-template-columns: 1fr; }
.kit__figure { margin: 0; display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--white); box-shadow: var(--shadow-card); }
@media (min-width: 60rem) { .kit__figure { position: sticky; top: 9rem; } }
.kit__canvas { position: relative; }
.kit__canvas img { max-height: 30rem; width: auto; }
.kit__overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kit__marker circle { fill: var(--anthracite); stroke: var(--white); stroke-width: 3; transition: fill .15s; }
.kit__marker use { fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kit__marker.is-lit circle { fill: var(--red); }
.kit__list { border-top: 1px solid var(--ink); }
.kit--list .kit__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); column-gap: 2rem; }
.kit__item { display: grid; grid-template-columns: 2.75rem 1fr; grid-template-rows: auto 1fr; column-gap: 1rem; padding: .9rem .5rem .9rem 0; border-bottom: 1px solid var(--line); transition: background-color .15s; }
.kit__item.is-lit { background: var(--white); }
/* A part icon on a soft tile; lights up with its marker on the picture. */
.kit__icon {
  grid-row: span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--white); color: var(--red);
  transition: background-color .15s, border-color .15s, color .15s;
}
.kit__icon .icon { width: 1.75rem; height: 1.75rem; stroke-width: 1.5; }
.kit__item.is-lit .kit__icon, .kit__item:hover .kit__icon { border-color: var(--red); background: var(--red); color: var(--white); }
.kit__item h3 { font-size: 1.0625rem; }
.kit__item p { color: var(--muted); font-size: .9375rem; }
.kit__options { margin-top: 2.5rem; }
.kit__options h3 { margin-bottom: .75rem; }
.kit__options .facts li { font-family: var(--font); font-size: .9375rem; font-weight: 500; white-space: normal; border-color: var(--line); }

/* Delivery: the lift's route as a dashed road with stops, then the papers beside a title block. */
.route { display: grid; gap: 1.5rem; }
.route__stop { position: relative; display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 1rem; align-content: start; }
.route__icon {
  grid-row: span 2; display: grid; place-items: center; width: 3.5rem; height: 3.5rem;
  border-radius: 50%; background: var(--white); color: var(--red); box-shadow: 0 0 0 1px var(--line);
}
.route__icon .icon { width: 1.6rem; height: 1.6rem; }
.route__stop h3 { align-self: end; font-family: var(--font-cond); font-size: 1.375rem; font-weight: 700; line-height: 1.1; }
.route__stop p { margin-top: .3rem; color: var(--muted); font-size: .9375rem; }
.route__stop:not(:last-child)::before {
  content: ""; position: absolute; left: 1.75rem; top: 3.75rem; bottom: -1.25rem; border-left: 2px dashed #9aa3a0;
}
@media (min-width: 64rem) {
  .route { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
  .route__stop { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .route__icon { grid-row: auto; margin-bottom: 1rem; }
  .route__stop h3 { align-self: start; }
  /* The dashed road runs from this stop's icon to the next one's (columns are 1.25rem apart). */
  .route__stop:not(:last-child)::before { left: calc(50% + 2.25rem); right: calc(-50% + 1rem); top: 1.75rem; bottom: auto; border-left: 0; border-top: 2px dashed #9aa3a0; }
}
.waybill { display: grid; gap: 1.5rem; margin-top: 3rem; padding: 1.5rem; background: var(--white); border: 1px solid var(--line); }
@media (min-width: 60rem) { .waybill { grid-template-columns: 1fr 1.4fr; align-items: center; gap: 3rem; padding: 2rem; } }
.waybill__docs h3 { margin-bottom: 1rem; font-family: var(--font-cond); font-size: 1.5rem; font-weight: 700; }
.waybill__stamp { border: 1px solid var(--ink); }
.waybill__stamp dd { white-space: normal; }

/* Request sliders on the dark block. */
.model-params { display: grid; gap: 1.25rem; margin-block: .5rem 1rem; }
.section--dark .range label { color: var(--white); }
.section--dark .range label b { color: #9fb0c0; }
.section--dark .range output { color: var(--white); }
.section--dark .range input::-webkit-slider-runnable-track { background: linear-gradient(var(--red), var(--red)) 0 0 / var(--fill) 100% no-repeat, rgb(255 255 255 / .3); }
.section--dark .range input::-moz-range-track { background: linear-gradient(var(--red), var(--red)) 0 0 / var(--fill) 100% no-repeat, rgb(255 255 255 / .3); }
.section--dark .range input::-webkit-slider-thumb { border-color: var(--white); background: var(--navy); }
.section--dark .range input::-moz-range-thumb { border-color: var(--white); background: var(--navy); }
html:has(.page-nav) { scroll-padding-top: 7.5rem; }

/* Model page first section: deep red stage, text on the left, the render on the right with a soft light
   behind it (as on the old site's cylinder page). Line pages keep the light hero. */
.model-hero {
  color: var(--white);
  background:
    linear-gradient(180deg, rgb(14 1 3 / .75) 0%, rgb(14 1 3 / .4) 20%, transparent 42%),
    radial-gradient(ellipse 55% 70% at 75% 55%, rgb(255 255 255 / .08), transparent 70%),
    radial-gradient(ellipse 90% 110% at 65% 45%, #850e14 0%, #6a090e 40%, #420509 78%, #210204 100%);
}
/* White on the red stage: the heading solid, the lead and crumbs a touch softer. */
.model-hero h1 { color: var(--white); }
.model-hero .eq-hero__lead { color: rgb(255 255 255 / .9); }
.model-hero .breadcrumbs, .model-hero .breadcrumbs a { color: rgb(255 255 255 / .85); }
.model-hero .breadcrumbs li + li::before { color: rgb(255 255 255 / .4); }
/* The render stands on the floor of the stage and casts a soft shadow under itself. */
.model-hero .model-gallery__slide picture { z-index: 1; }
.model-hero .model-gallery__slide img { object-position: 50% 100%; filter: drop-shadow(0 .6rem .9rem rgb(0 0 0 / .25)); }
.model-hero .model-gallery__main::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: calc(clamp(1rem, 3vw, 2rem) - 1.1rem); height: 2.2rem;
  border-radius: 50%; background: radial-gradient(ellipse at center, rgb(0 0 0 / .4) 0%, rgb(0 0 0 / .18) 45%, transparent 72%);
  filter: blur(4px); pointer-events: none;
}
.model-hero .model-gallery__slide--photo img { object-position: 50% 50%; }
.model-hero .model-gallery__slide--photo { padding: 0; }
.model-hero .model-gallery__slide--photo picture { overflow: hidden; background: var(--white); }
.model-hero .model-gallery__slide--photo img { filter: none; }
/* A photo is not a render standing on the floor: no floor shadow under it. */
.model-hero .model-gallery__main:has(.model-gallery__slide--photo)::after { display: none; }
/* Phones: the model first, so it is on the first screen; wider: text left, model right. */
@media (max-width: 59.99rem) { .model-hero .model-gallery { order: -1; } }
@media (min-width: 60rem) {
  .model-hero__grid { grid-template-columns: 1fr 1.45fr; align-items: center; }
  .model-hero .model-gallery__main { aspect-ratio: 4 / 3; }
  /* The model a size smaller, pushed to the right edge: more air between it and the text. */
  .model-hero .model-gallery { width: 82%; justify-self: end; }
  /* The text sits a little above the model's middle, closer to the eye line. */
  .model-hero__info { padding-bottom: 4rem; }
  /* A tall render (2X–4X, 800 px wide and up to 1700 px high) is fitted by height and came out small.
     Its box reaches up into the empty band under the crumbs and down towards the section's edge, so it
     grows without making the section taller; a wide render (1X) is fitted by width and keeps its size. */
  /* The spare band depends on the window height (the section is at least 80svh, its content centred):
     about 100 px above the stage at 1000 px, none at 730 px. So the render grows by up to a quarter up
     and an eighth down on a tall screen and stays inside the stage on a short laptop one. */
  .model-hero .model-gallery__main:not(:has(.model-gallery__slide--photo)) {
    overflow: visible;
    --rise: clamp(-25%, calc(300px - 40svh), 0px);
    --drop: clamp(-12%, calc(270px - 40svh), 0px);
  }
  /* Shifted right by a tenth of the stage: more air between the render and the text. */
  .model-hero .model-gallery__slide:not(.model-gallery__slide--photo) picture {
    top: var(--rise); bottom: var(--drop);
    left: calc(clamp(1rem, 3vw, 2rem) + 10%); right: calc(clamp(1rem, 3vw, 2rem) - 10%);
    max-width: none;  /* the box comes from the four offsets and may be wider than the stage */
  }
  .model-hero .model-gallery__main::after { bottom: calc(var(--drop, 0px) - 1.1rem); left: 28%; right: 8%; }
  /* A wide render (1X, the painting platforms) is fitted by width, so growing up does nothing for it:
     its box reaches left into the gap before the text instead, to stand as large as the tall ones. */
  /* …and moves right by up to a tenth of the stage, where the window has room past the container:
     the full tenth at 1920 px, nothing at 1280 px (there the box would run off the screen). */
  .model-hero .model-gallery__main:has(.model-gallery__slide--wide) { --shift: clamp(0px, calc((100vw - 1280px) * .085), 10%); }
  .model-hero .model-gallery__slide.model-gallery__slide--wide picture {
    left: calc(clamp(1rem, 3vw, 2rem) - 25% + var(--shift)); right: calc(clamp(1rem, 3vw, 2rem) - 10% - var(--shift));
  }
  .model-hero .model-gallery__main:has(.model-gallery__slide--wide)::after {
    left: calc(-5% + var(--shift)); right: calc(8% - var(--shift));
  }
  /* A line page's wide render (the four-post lift with a car) stands alone on the stage: a fifth larger
     and a little further right than a model's. */
  .model-hero .model-gallery__slide.model-gallery__slide--wide-lg picture {
    left: calc(clamp(1rem, 3vw, 2rem) - 30% + var(--shift)); right: calc(clamp(1rem, 3vw, 2rem) - 25% - var(--shift));
  }
  .model-hero { overflow-x: clip; }  /* a render reaching past the container never adds a sideways scroll */
}
/* Other views of the product beside the render (the console lift): a narrow column of small
   cut-outs on the red stage, no frames; the one on the stage is lit, a click swaps it in. */
.model-gallery--views { display: grid; grid-template-columns: minmax(0, 1fr) 5.25rem; gap: .75rem; align-items: center; }
.model-gallery__slide[hidden] { display: none; }
.hero-views { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.hero-views__item {
  display: grid; justify-items: center; width: 100%; padding: .25rem; border: 0; background: none; cursor: pointer;
  opacity: .55; transition: opacity .2s;
}
.hero-views__item:hover, .hero-views__item.is-active { opacity: 1; }
.hero-views__item picture { display: flex; justify-content: center; width: 100%; height: 6rem; }
.hero-views__item img { flex: none; width: auto; height: 100%; filter: drop-shadow(0 .3rem .4rem rgb(0 0 0 / .3)); }
/* Every view stands on one line through its mast, small or on the stage: the console lift's general
   view has its mast at a quarter of the picture, so it moves right by the other quarter. */
.model-gallery--views .model-gallery__slide picture { display: flex; justify-content: center; }
.model-gallery--views .model-gallery__slide img { flex: none; width: auto; height: 100%; }
.model-gallery--views .mast-left img { transform: translateX(26%); }
/* Views of different shapes (the painting lift 3D: wide renders on rails): each fits the stage whole
   and stands in its middle, not on its floor; the small ones fit their cell too. */
.model-hero .model-gallery--fit .model-gallery__slide img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.model-gallery--fit .hero-views__item img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 60rem) {
  /* The column of views takes the room the render would leave free on the right, so the render keeps its size. */
  .model-hero .model-gallery--views { width: 100%; grid-template-columns: minmax(0, 1fr) 6rem; gap: 1.5rem; }
  .hero-views__item picture { height: 8rem; }
  /* Beside a column of views the render keeps to its own box: no shift to the right into them. */
  .model-hero .model-gallery--views .model-gallery__slide:not(.model-gallery__slide--photo) picture {
    left: 30%; right: 0;
  }
  /* The whole stage across; a tall render (console 1L, 2L) also reaches up into the band under the
     crumbs and a little down, at least by a fifth even on a short window, so it is not fitted small. */
  .model-hero .model-gallery--views.model-gallery--fit .model-gallery__slide:not(.model-gallery__slide--photo) picture {
    top: 0; bottom: 0; left: 0; right: 0;
  }
  .model-hero .model-gallery--views.model-gallery--fit .model-gallery__slide--tall:not(.model-gallery__slide--photo) picture {
    top: min(-18%, var(--rise)); bottom: min(-4%, var(--drop));
  }
}

/* Line page hero (scissor lifts): the same red stage, no render, the title centred. */
.line-hero {
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  background:
    linear-gradient(180deg, rgb(14 1 3 / .75) 0%, rgb(14 1 3 / .4) 20%, transparent 42%),
    radial-gradient(ellipse 70% 90% at 50% 60%, #850e14 0%, #6a090e 40%, #420509 78%, #210204 100%);
}
.line-hero__text { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(1.5rem, 5vw, 4rem); }
/* With a backdrop (scissor line): on a wide screen the text on the left and the models in a row large on
   the right, standing on the stage's floor with a soft light behind them; on a phone the models
   under the text. */
.line-hero--backdrop { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
.line-hero--backdrop .line-hero__backdrop { order: 2; }
.line-hero--backdrop .line-hero__text { position: relative; z-index: 1; }
.line-hero__backdrop { position: relative; z-index: 0; display: flex; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); pointer-events: none; }
.line-hero__backdrop img { width: min(100%, 40rem); height: auto; filter: drop-shadow(0 1.25rem 1.5rem rgb(0 0 0 / .45)); }
.line-hero__backdrop::before {
  content: ""; position: absolute; inset: 10% 5% 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgb(255 255 255 / .16), transparent 68%);
}
@media (min-width: 60rem) {
  .eq-hero.line-hero--backdrop { min-height: 80svh; }
  .eq-hero.line-hero--backdrop > .line-hero__text { margin-block: auto; padding-block: 0 3rem; align-items: flex-start; text-align: left; }
  .line-hero--backdrop .line-hero__text > * { max-width: min(38rem, 44%); }
  .line-hero--backdrop h1.hero__title { text-wrap: balance; }
  .line-hero.line-hero--backdrop .hero__lead { margin-inline: 0; }
  .line-hero.line-hero--backdrop .hero__actions { justify-content: flex-start; }
  .line-hero__backdrop {
    position: absolute; top: calc(var(--chrome) + 1rem); bottom: 1.5rem; margin: 0;
    right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); width: 48%;
    align-items: flex-end; justify-content: flex-end;
  }
  .line-hero__backdrop picture { display: flex; align-items: flex-end; justify-content: flex-end; width: 100%; height: 100%; }
  .line-hero__backdrop img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
}
/* Text as on the home hero: white title with a soft shadow, light lead, red button, white phone. */
.line-hero { color: #e6eaec; }
.line-hero h1.hero__title { color: var(--white); }
.line-hero .hero__lead { margin-inline: auto; }
.line-hero .hero__actions { justify-content: center; }
.line-hero .hero__phone, .cyl-hero .hero__phone { color: var(--white); }
.line-hero .hero__phone:hover, .cyl-hero .hero__phone:hover { color: #ff8a80; }
.line-hero .eq-hero__link { color: rgb(236 220 217 / .85); }
.line-hero .eq-hero__link:hover { color: var(--white); }

/* Equipment line without serial models: the story and a photo of it at work. */
.eq-about { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 60rem) { .eq-about { grid-template-columns: 1fr 1.3fr; gap: 4rem; } }
.eq-about h2 { margin-bottom: 1.5rem; }
.eq-about .btn { margin-top: 2rem; }
.eq-about__photo { margin: 0; overflow: hidden; background: var(--grey-soft); box-shadow: var(--shadow-photo); }
.eq-about__photo img { width: 100%; height: auto; }
.eq-about__photo--plain { box-shadow: none; background: none; }

/* Model at work: photo + story rows, alternating sides on wide screens. */
.scenes { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.model-scenes { margin-top: clamp(3rem, 7vw, 5rem); }
.scene { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 60rem) {
  .scene { grid-template-columns: 1.45fr 1fr; gap: 4rem; }
  .scene--flip .scene__photo { order: 2; }
  /* The wide column follows the photo, so a flipped row's photo is as large as the others. */
  .scene--flip { grid-template-columns: 1fr 1.45fr; }
}
.scene__photo { position: relative; margin: 0; overflow: hidden; background: var(--grey); box-shadow: var(--shadow-photo); }
.scene__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .6s cubic-bezier(.4, .7, .04, .88); }
.scene:hover .scene__photo img { transform: scale(1.03); }
.scene__text h3 { font-family: var(--font-cond); font-size: clamp(1.625rem, 2.6vw, 2.125rem); font-weight: 700; line-height: 1.1; }
.scene__text p { margin-top: 1rem; max-width: 34rem; color: var(--muted); }
/* A render on white instead of a photo: shown whole, never cropped. */
.scene__photo--render { aspect-ratio: 16 / 9; background: var(--white); }
.scene__photo--render picture { position: absolute; inset: clamp(1rem, 3vw, 2rem); }
.scene__photo--render img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
/* Pictures of different shapes in one section (a portrait cutaway, a landscape scheme): one 4:3 frame
   for all, each fitted whole, so they read as the same size. */
.scene__photo--render.scene__photo--boxed { aspect-ratio: 4 / 3; }
.scene__text .more-link { display: inline-block; margin-top: 1.25rem; }
/* A scheme with its legend: the whole row, centred and uncropped (its labels sit at the edges),
   the title and text centred under it. */
@media (min-width: 60rem) { .scene.scene--wide { grid-template-columns: 1fr; gap: 2rem; } }
.scene--wide .scene__photo { width: 100%; max-width: 72rem; justify-self: center; background: var(--white); }
.scene--wide .scene__photo img { aspect-ratio: auto; object-fit: contain; }
.scene--wide:hover .scene__photo img { transform: none; }
.scene--wide .scene__text { justify-self: center; max-width: 46rem; text-align: center; }
.scene--wide .scene__text p { max-width: none; }

/* ---------- Articles: list and article page ---------- */
.articles--list { row-gap: 3rem; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; color: var(--muted); font-size: .875rem; }
.article__tag { color: var(--red); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .8125rem; }
.article__title { font-family: var(--font); font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; transition: color .15s; }
.article:hover .article__title { color: var(--red); }

.article-hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.article-hero, .page-hero--bg { position: relative; isolation: isolate; overflow: hidden; }
/* A soft photo behind a page header (about, articles); objects on the right, the text side kept clear. */
.page-hero-bg { position: absolute; inset: 0; z-index: -1; }
.page-hero-bg picture, .page-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.page-hero-bg::after { content: ""; position: absolute; inset: 0; background: rgb(227 230 228 / .75); }
@media (min-width: 48rem) {
  .page-hero-bg::after { background: linear-gradient(90deg, rgb(227 230 228 / .92) 0%, rgb(227 230 228 / .85) 45%, rgb(227 230 228 / .35) 68%, rgb(227 230 228 / 0) 85%); }
}
/* About: the welding bay photo under a dark veil, heaviest behind the text; white lettering. */
.about-hero { background: var(--anthracite); }
.about-hero .page-hero-bg img { object-position: 60% 50%; }
.about-hero .page-hero-bg::after { background: rgb(18 21 23 / .72); }
/* Wide screens: the photo starts a third in and melts into the dark on the left, so the helmet
   and the plate sit to the right of the text. */
@media (min-width: 60rem) {
  .about-hero .page-hero-bg picture {
    left: 30%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  }
  .about-hero .page-hero-bg img { object-position: 70% 50%; }
  .about-hero .page-hero-bg::after { background: linear-gradient(90deg, rgb(18 21 23 / .5) 0%, rgb(18 21 23 / .3) 50%, rgb(18 21 23 / .1) 100%); }
}
.about-hero h1, .about-hero .stats dd { color: var(--white); }
.about-hero .eq-hero__lead { color: rgb(255 255 255 / .9); }
.about-hero .about-hero__legal, .about-hero .stats dt { color: rgb(255 255 255 / .7); }
.about-hero .breadcrumbs, .about-hero .breadcrumbs a { color: rgb(255 255 255 / .85); }
.about-hero .breadcrumbs li + li::before { color: rgb(255 255 255 / .4); }
/* Article page: phone — the photo under the text; wider — on the right half, fading into the grey. */
.article-hero__photo { margin: 0; }
.article-hero--photo { display: flex; flex-direction: column; }
.article-hero--photo .article-hero__photo { order: 3; margin: 2rem 1rem 0; overflow: hidden; }
.article-hero__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 60rem) {
  .article-hero--photo { display: block; min-height: 34rem; }
  .article-hero--photo .article-hero__photo {
    position: absolute; top: var(--chrome); right: 0; bottom: 0; z-index: -1; width: 58%; margin: 0; border-radius: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  }
  .article-hero--photo .article-hero__photo picture, .article-hero--photo .article-hero__photo img { width: 100%; height: 100%; aspect-ratio: auto; }
  .article-hero--photo .article-hero__inner > * { max-width: 34rem; }
  .article-hero--photo h1 { text-wrap: balance; }
}
/* Inner pages open with a block 80% of the screen tall, as the about page: crumbs at the top, the
   content centred in the rest. The home page and the request page have their own first screens. */
@media (min-width: 60rem) {
  .eq-hero { display: flex; flex-direction: column; min-height: 80svh; }
  .eq-hero > .container { margin-block: auto; }
}
/* Left-aligned with the crumbs: the text column is narrower than the container, not centred. */
.article-hero__inner > * { max-width: 46rem; }
.article-hero h1 { margin-top: 1rem; font-size: clamp(2.25rem, 4.6vw, 3.75rem); }
.article-body { padding-top: clamp(2rem, 5vw, 3.5rem); }
.article-layout { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 60rem) { .article-layout { grid-template-columns: minmax(0, 46rem) minmax(0, 18rem); justify-content: space-between; } }
.article-cover { margin: 0 0 2.5rem; overflow: hidden; background: var(--grey); box-shadow: var(--shadow-photo); }
.article-cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Long-form text. */
.article-content .prose { max-width: none; font-size: 1.125rem; line-height: 1.7; }
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.prose h3 { margin-top: 1.75rem; font-size: 1.25rem; }
.prose h2 + *, .prose h3 + * { margin-top: .75rem; }
.prose ul { padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.5rem; }
.prose ul li + li { margin-top: .4rem; }
.prose ul li::before { content: ""; position: absolute; left: .2rem; top: .75em; width: .5rem; height: 2px; background: var(--red); }
.prose a { text-underline-offset: .2em; }
.prose strong { font-weight: 600; }
.article-figure { margin: 2rem 0; }
/* An engineer's words inside an article. */
.article-quote { margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--red); border-radius: 0 12px 12px 0; background: var(--grey-soft); }
.article-quote p { margin: 0; font-size: 1.125rem; line-height: 1.55; }
.article-quote cite { display: block; margin-top: .75rem; color: var(--muted); font-size: .875rem; font-style: normal; font-weight: 600; }
.article-quote cite::before { content: "— "; }
.table-scroll { margin: 1.5rem 0; overflow-x: auto; }
.article-figure img { width: 100%; box-shadow: var(--shadow-photo); }
.article-figure figcaption { margin-top: .6rem; color: var(--muted); font-size: .875rem; }
@media (min-width: 48rem) {
  .article-figure--side { float: right; width: 17rem; margin: .5rem 0 1.5rem 2rem; }
}
.prose h2 { clear: both; }

.article-aside { display: grid; gap: 1rem; }
@media (min-width: 60rem) { .article-aside { position: sticky; top: 7rem; } }
.article-cta { display: grid; gap: .9rem; justify-items: start; padding: 1.75rem; border-radius: var(--radius); background: var(--navy); color: #d6dde4; }
.article-cta__title { color: var(--white); font-family: var(--font-cond); font-size: 1.625rem; font-weight: 700; line-height: 1.1; }
.article-cta p:not(.article-cta__title) { font-size: .9375rem; }
.article-cta__phone { color: var(--white); font-family: var(--font-cond); font-size: 1.375rem; font-weight: 700; text-decoration: none; }
.article-related { display: grid; gap: .25rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-weight: 600; text-decoration: none; }
.article-related span { color: var(--muted); font-size: .8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.article-related:hover { border-color: var(--red); color: var(--red); }

/* Cylinders page. */
/* The render as a cut-out on the red stage, with a soft shadow under it as on the model pages. */
.cyl-hero__media img { width: 100%; height: auto; filter: drop-shadow(0 1.25rem 1.5rem rgb(0 0 0 / .35)); }
/* The ranges we make in, a row of figures under the first screen. */
.cyl-facts { display: grid; grid-template-columns: repeat(2, 1fr); margin: clamp(2rem, 4vw, 3rem) 0 0; border-top: 1px solid rgb(255 255 255 / .25); }
.cyl-facts > div { display: flex; flex-direction: column-reverse; gap: .2rem; padding: 1rem 1rem 0 0; }
.cyl-facts dt { color: rgb(255 255 255 / .75); font-size: .9375rem; }
.cyl-facts dd { margin: 0; color: var(--white); font-family: var(--font-cond); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.05; white-space: nowrap; }
.cyl-facts dd span { font-family: var(--font); font-size: 1rem; font-weight: 400; color: rgb(255 255 255 / .75); }
@media (min-width: 48rem) {
  .cyl-facts { grid-template-columns: repeat(4, 1fr); }
  .cyl-facts > div + div { padding-left: 1.5rem; border-left: 1px solid rgb(255 255 255 / .25); }
}
@media (max-width: 47.99rem) { .cyl-facts > div:nth-child(even) { padding-left: 1rem; border-left: 1px solid rgb(255 255 255 / .25); } }

/* Types: each on a sheet of graph paper with its side view, the text under it. */
.cyl-types { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .cyl-types { grid-template-columns: repeat(3, 1fr); } }
.cyl-type { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-card); }
.cyl-type__drawing { display: grid; place-items: center; padding: 1.5rem 1rem; border-bottom: 1px solid var(--line); }
.cyl-type__svg { display: block; width: 100%; max-width: 20rem; height: auto; }
.cyl-type__copy { display: flex; flex: 1; flex-direction: column; padding: 1.25rem 1.5rem 1.5rem; }
.cyl-type h3 { font-family: var(--font-cond); font-size: 1.625rem; font-weight: 700; line-height: 1.1; }
.cyl-type p { margin-top: .5rem; color: var(--muted); font-size: .9375rem; }
.cyl-type__use { margin-top: auto !important; padding-top: 1rem; color: var(--ink) !important; font-weight: 600; }
.cyl-type__use::before { content: ""; display: block; width: 2rem; height: 2px; margin-bottom: .75rem; background: var(--red); }

/* Lines of a cylinder drawing, shared by the type views and the dimensioned scheme. */
:is(.cyl-type__svg, .cyl-scheme) .c-body { fill: rgb(196 22 28 / .14); stroke: var(--ink); stroke-width: 1.5; }
:is(.cyl-type__svg, .cyl-scheme) .c-cap { fill: rgb(196 22 28 / .32); stroke: var(--ink); stroke-width: 1.5; }
:is(.cyl-type__svg, .cyl-scheme) .c-rod { fill: #e3e7e8; stroke: var(--ink); stroke-width: 1.5; }
:is(.cyl-type__svg, .cyl-scheme) .c-eye { fill: rgb(196 22 28 / .32); stroke: var(--ink); stroke-width: 1.5; }
:is(.cyl-type__svg, .cyl-scheme) .c-hole { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; }
:is(.cyl-type__svg, .cyl-scheme) .c-port { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; }
:is(.cyl-type__svg, .cyl-scheme) .c-nut { fill: var(--anthracite); }
:is(.cyl-type__svg, .cyl-scheme) .c-thin { stroke: var(--ink); stroke-width: 2.5; }
:is(.cyl-type__svg, .cyl-scheme) .c-axis { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 18 4 3 4; opacity: .5; }

/* Specs: the dimensioned sheet beside the table; the table's letters match the drawing. */
/* Specs: the table beside the catalog of standard designs. */
.cyl-specs { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 60rem) { .cyl-specs { grid-template-columns: 1.4fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); } }
.cyl-specs__table { max-width: none; }
.cyl-specs__table th { width: 52%; }
/* The letter sits in a box left of the label; rows without a letter keep the same indent. */
.cyl-specs__table th { position: relative; padding-left: 2.75rem; }
.cyl-specs__key {
  position: absolute; left: 0; top: .7rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--ink); background: var(--white); color: var(--ink); font-family: var(--font-draw); font-size: 1rem; line-height: 1;
}
/* Our cylinders: a strip of photos scrolled sideways (a swipe, the trackpad or the arrows). */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(70%, 18rem); gap: .75rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none; padding-bottom: .25rem;
}
.carousel__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .carousel__track { scroll-behavior: auto; } }
@media (min-width: 60rem) { .carousel__track { grid-auto-columns: calc((100% - 3 * .75rem) / 4); } }
.carousel__item { scroll-snap-align: start; }
.carousel__item a { display: block; }
.carousel__item img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--grey-soft); }
.carousel__btn {
  position: absolute; top: 50%; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: var(--shadow-card);
  cursor: pointer; transform: translateY(-50%); transition: opacity .2s, color .15s;
}
.carousel__btn:hover { color: var(--red); }
.carousel__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.carousel__btn:disabled { opacity: 0; pointer-events: none; }
.carousel__btn .icon { width: 1.25rem; height: 1.25rem; }
.carousel__btn--prev { left: -1.375rem; }
.carousel__btn--next { right: -1.375rem; }
@media (max-width: 59.99rem) { .carousel__btn--prev { left: .5rem; } .carousel__btn--next { right: .5rem; } }
.order-lead { font-size: 1.125rem; }
.order-list { margin-block: 1.25rem; }
.order-more { color: var(--muted); max-width: 40rem; }

/* The catalog as a card: its cover, what is inside, the download. */
.cyl-catalog {
  display: grid; grid-template-columns: 7rem 1fr; gap: 1.25rem; align-items: center; padding: 1.25rem;
  border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.cyl-catalog:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(34 40 43 / .12); }
.cyl-catalog__cover img { display: block; width: 100%; height: auto; box-shadow: 0 4px 12px rgb(34 40 43 / .2); }
.cyl-catalog__text { display: grid; gap: .4rem; }
.cyl-catalog__text b { font-family: var(--font-cond); font-size: 1.375rem; line-height: 1.15; }
.cyl-catalog__text > span { color: var(--muted); font-size: .9375rem; }
.cyl-catalog .cyl-catalog__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .25rem; color: var(--red); font-weight: 600; }
.cyl-catalog__link .icon { width: 1.125rem; height: 1.125rem; }

/* Cylinder configurator: the lift configurator's sheet and sliders, plus choices as chips. */
.choice { display: grid; gap: .6rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.choice legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: 0; font-weight: 600; }
.choice legend b { font-family: var(--font-cond); color: var(--muted); }
.choice legend output { font-weight: 400; color: var(--muted); font-size: .9375rem; }
.choice__options { display: flex; flex-wrap: wrap; gap: .4rem; }
.choice__option { position: relative; cursor: pointer; }
.choice__option input { position: absolute; opacity: 0; pointer-events: none; }
.choice__option span {
  display: block; min-width: 3.5rem; padding: .45rem .75rem; border: 1px solid var(--ink); border-radius: var(--radius);
  font-family: var(--font-cond); font-size: 1.125rem; font-weight: 700; text-align: center; transition: background .15s, color .15s;
}
.choice__option:hover span { background: rgb(34 40 43 / .06); }
.choice__option input:checked + span { background: var(--ink); color: var(--white); }
.choice__option input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
/* On the burgundy stage: white outlines, the chosen one white with red lettering. */
body:not(.page-white) .config .choice legend { color: var(--white); }
body:not(.page-white) .config .choice legend b, body:not(.page-white) .config .choice legend output { color: rgb(255 255 255 / .6); }
body:not(.page-white) .config .choice__option span { border-color: rgb(255 255 255 / .45); color: var(--white); }
body:not(.page-white) .config .choice__option:hover span { background: rgb(255 255 255 / .1); }
body:not(.page-white) .config .choice__option input:checked + span { background: var(--white); border-color: var(--white); color: var(--red); }
body:not(.page-white) .config .choice__option input:focus-visible + span { outline-color: var(--white); }
.cyl-config__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.cyl-config__pdf { display: inline-flex; align-items: center; gap: .6rem; color: var(--white); font-weight: 600; text-decoration: none; }
.cyl-config__pdf:hover span { text-decoration: underline; text-underline-offset: .2em; }
.cyl-config__pdf .icon { flex: none; width: 1.5rem; height: 1.5rem; }
.cyl-config__pdf small { display: block; color: rgb(255 255 255 / .6); font-weight: 400; font-size: .8125rem; }
.cyl-config__drawing { padding: .5rem; }

/* ---------- Power units page (/gidrostancii/) ---------- */
@media (min-width: 48rem) { .cyl-facts--five { grid-template-columns: repeat(5, 1fr); } }
/* Purposes as chips over the types: the chosen one dark. */
.pu-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.pu-chip {
  padding: .55rem 1rem; border: 1px solid var(--ink); border-radius: 999px; background: none; color: var(--ink);
  font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.pu-chip:hover { background: var(--grey-soft); }
.pu-chip.is-active { background: var(--ink); color: var(--white); }
/* Types: a product picture on white, the text, two figures as a title block. */
.pu-types { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .pu-types { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .pu-types { grid-template-columns: repeat(3, 1fr); } }
.pu-type { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-card); }
.pu-type[hidden] { display: none; }
.pu-type__media { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--white); }
.pu-type__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.4, .7, .04, .88); }
.pu-type:hover .pu-type__media img { transform: scale(1.05); }
.pu-type__copy { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1.25rem 1.5rem 1.5rem; }
.pu-type h3 { font-family: var(--font-cond); font-size: 1.625rem; font-weight: 700; line-height: 1.1; }
.pu-type p { color: var(--muted); font-size: .9375rem; }
.pu-type__specs { display: grid; grid-template-columns: 1fr 1fr; margin: auto 0 0; padding-top: .75rem; }
.pu-type__specs > div { padding: .45rem .7rem; border: 1px solid var(--ink); }
.pu-type__specs > div + div { border-left: 0; }
.pu-type__specs dt { color: var(--muted); font-size: .8125rem; }
.pu-type__specs dd { margin: 0; font-family: var(--font-cond); font-size: 1.1875rem; font-weight: 700; }

/* Calculator circuit (the client's, ISO 1219): symbols in ink; the mode buttons light the oil's path in
   red and move the rods. Hovering an element puts its name and job in the line under the circuit. */
.pu-config__drawing { padding: .5rem; }
.pu-modes { display: flex; gap: .4rem; margin: .25rem .25rem .5rem; }
.pu-modes button { padding: .35rem .8rem; border: 1px solid var(--ink); border-radius: 4px; background: var(--white); color: var(--ink); font: 600 .875rem var(--font); cursor: pointer; }
.pu-modes button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.pu-scheme .pu-line, .pu-scheme .pu-path { fill: none; stroke: var(--ink); stroke-width: 2; }
.pu-scheme .pu-thin { fill: none; stroke: var(--ink); stroke-width: 1.25; }
.pu-scheme .pu-sym { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.pu-scheme .pu-fill, .pu-scheme .pu-node { fill: var(--ink); }
.pu-scheme .pu-frame { fill: none; stroke: #b9c0c2; stroke-width: 1.25; stroke-dasharray: 6 4; }
.pu-scheme .pu-box { fill: none; stroke: #b9c0c2; stroke-width: 1.25; }
.pu-scheme .pu-cyl { fill: rgb(196 22 28 / .14); }
.pu-scheme .pu-rod { fill: #e3e7e8; stroke: var(--ink); stroke-width: 1.5; }
.pu-scheme .pu-lab { font-size: 21px; }
.pu-scheme .pu-piston { transition: transform 2.4s cubic-bezier(.4, 0, .2, 1); }
.pu-scheme.is-out .pu-piston { transform: translateX(30px); }
.pu-scheme.one-cyl [data-cyl2] { display: none; }
/* The path of the oil in this mode; lowering runs the shared lines the other way. */
.pu-scheme[data-mode="up"] .f-up, .pu-scheme[data-mode="down"] .f-down { stroke: var(--red); stroke-width: 3; stroke-dasharray: 10 6; }
.pu-scheme[data-mode="up"] .pu-motor circle, .pu-scheme[data-mode="up"] .pu-pump circle { stroke: var(--red); }
.pu-scheme[data-mode="down"] .pu-coil { fill: var(--red); }
.pu-scheme[data-mode="stop"] .pu-hold .pu-sym, .pu-scheme[data-mode="stop"] .pu-hold circle { stroke: var(--red); }
.pu-scheme .pu-el { cursor: help; outline: none; }
.pu-scheme .pu-el.is-on .pu-sym, .pu-scheme .pu-el.is-on .pu-line, .pu-scheme .pu-el.is-on .pu-thin { stroke-width: 3; }
.pu-scheme .pu-el.is-on text { fill: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .pu-scheme[data-mode="up"] .f-up, .pu-scheme[data-mode="down"] .f-down { animation: pu-flow 1s linear infinite; }
  .pu-scheme[data-mode="down"] .f-down.rev { animation-direction: reverse; }
  @keyframes pu-flow { to { stroke-dashoffset: -16; } }
}
@media (prefers-reduced-motion: reduce) { .pu-scheme .pu-piston { transition: none; } }
/* Three lines' room, whatever the element: the sheet keeps its height while the pointer moves. */
.pu-legend { min-height: 4.5em; margin: .25rem .5rem .5rem; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.pu-legend b { color: var(--ink); }
/* Always shown (a hint, or what is out of the series), with room for the longest note: the section's
   height, and so its background, stay put while the sliders move. */
.pu-config__warn { min-height: 6.4em; margin: -.5rem 0 1.5rem; padding: .75rem 1rem; border-left: 3px solid rgb(255 255 255 / .35); background: rgb(0 0 0 / .2); color: rgb(255 255 255 / .8); font-size: .9375rem; }
.pu-config__warn.is-warn { border-left-color: #ffd27a; color: var(--white); }

/* Questionnaire: the list on the left, the PDF as a card with a small sheet for a cover. */
.pu-quest { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 60rem) { .pu-quest { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.pu-quest__lead { margin-block: 1rem 1.25rem; color: var(--muted); font-size: 1.0625rem; max-width: 34rem; }
.pu-quest__sheet {
  display: grid; align-content: start; gap: .55rem; aspect-ratio: 1 / 1.41; padding: .8rem .7rem;
  border: 1px solid var(--line); background: var(--white); box-shadow: 0 4px 12px rgb(34 40 43 / .2);
}
.pu-quest__sheet b { font-family: var(--font-cond); font-size: .8125rem; color: var(--red); }
.pu-quest__sheet i { display: block; height: .4rem; border-bottom: 1px solid var(--line); }

/* Our units: 4:3 photos, wider than the cylinders' square ones. */
.carousel__track--wide { grid-auto-columns: min(80%, 24rem); }
.carousel__track--wide .carousel__item img { aspect-ratio: 4 / 3; }
.carousel__track--tall { grid-auto-columns: min(70%, 18rem); }
.carousel__track--tall .carousel__item img { aspect-ratio: 3 / 4; }
/* The calculator's title block keeps four equal columns, whatever the figures; a figure past the
   series' limits turns red with the note under the sliders. */
@media (min-width: 30rem) { .pu-config .stamp__facts { grid-template-columns: repeat(4, 1fr); } }
.pu-config.is-over .stamp__facts dd { color: var(--red); }

/* 404: the red stage with a large outlined code, the site's sections below. */
.notfound { min-height: 0 !important; padding-block: clamp(7rem, 12vw, 9rem) clamp(3rem, 6vw, 4.5rem); }
.notfound__code {
  font-family: var(--font-cond); font-size: clamp(6rem, 16vw, 11rem); font-weight: 900; line-height: .85;
  color: transparent; -webkit-text-stroke: 2px rgb(255 255 255 / .35); margin-bottom: 1rem;
}
.notfound h1 { font-family: var(--font-cond); font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.05; }
.notfound .eq-hero__lead { max-width: 38rem; }
.notfound .btn--primary { background: var(--white); color: var(--red); }
.notfound .btn--primary:hover { background: #f1dcdc; color: var(--red-dark); }
.notfound__home, .notfound .hero__phone { color: var(--white); font-weight: 600; text-underline-offset: .2em; }
.notfound__more { margin-top: 1.75rem; color: var(--muted); }
.notfound__more a { color: var(--ink); font-weight: 600; text-underline-offset: .2em; }
.notfound__more a:hover { color: var(--red); }