/* Mapresta v8 — "laser drawing". A construction drawing in light: hairline rules instead of boxes, mono indices,
   a wide grotesk in sentence case with one serif-italic accent per heading, the logo red only as the laser.
   Tokens and roles: DESIGN.md. Motion is always on (user decision 2026-10-01): no animation switch,
   prefers-reduced-motion does not turn effects off, loops settle by themselves. */

@font-face {
  font-family: "Mapresta Display";
  src: url("assets/fonts/mapresta-display.woff?v=37") format("woff");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Mapresta Display";
  src: url("assets/fonts/mapresta-display-400.woff?v=37") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Readex Pro";
  src: url("assets/fonts/readex-pro.woff?v=37") format("woff");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono.woff?v=37") format("woff");
  font-weight: 400 600;
  font-display: swap;
}

@property --gl { syntax: "<number>"; inherits: true; initial-value: 0.07; }

:root {
  --paper: #f4f3ef;
  --paper-2: #e9e7e1;
  --white: #ffffff;
  --ink: #121212;
  --ink-2: #57544f;
  --line: rgb(18 18 18 / 0.14);
  --line-strong: rgb(18 18 18 / 0.34);
  --red: #d3121b;
  --red-deep: #a90d14;
  --laser: #ff1f2a;
  --graphite: #141414;
  --graphite-2: #222222;
  --on-dark: #f1efe9;
  --on-dark-2: #a9a59e;
  --line-dark: rgb(255 255 255 / 0.16);
  --red-on-dark: #ff5a4f;
  --finale: #c8101a;
  --focus: #121212;

  --sans: "Readex Pro", "Helvetica Neue", Arial, sans-serif;
  --display: "Mapresta Display", "Readex Pro", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 3.6vw, 48px);
  --max: 1360px;
  --header-h: 76px;
  --r: 6px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.22, 0.7, 0.16, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
html.smooth { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); background: var(--paper); font-synthesis: none; overflow-x: clip; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; font-weight: 600; }
p, figure { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
em { font-style: normal; }
.nw { white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .finale :focus-visible { --focus: #ffffff; }
.finale .composer-card :focus-visible { --focus: #121212; }
main:focus { outline: none; }
.skip { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
.skip:focus-visible { top: 12px; }

/* Mono labels: indices, captions, meta lines */
.sec-label, .facts-head, .fact dt, .stage-no, .house-cap, .dir-no, .wg-no, .wg-count, .nav-i, .tab-n, .doc-meta, .footer-company, .steel-trade h3 {
  font-family: var(--mono); font-weight: 450; letter-spacing: 0.04em;
}

/* Accent word in a heading: the same grotesk, thin and at full width, in the logo red (user rule: never a serif face) */
.lz-t em, .finale-title em { font-weight: 300; font-stretch: 125%; letter-spacing: -0.045em; color: var(--red); }
.finale-title em { color: inherit; }

/* ---------- Headings laid like masonry («Mūras») ---------- */
/* Every word is a block (build.py masonry()): it comes down into its course from above, lands with a slight
   compression and the joint closes; the blocks follow in reading order. The padding of each course (negative
   margins keep the layout) leaves room for Lithuanian marks above (Č, Š, Ū) and below (ą, ę, į, ų).
   Below the fold the words wait for .motion + .is-in (app.js); the first-screen headline is hidden from the first
   paint by .js (set in <head>) so it never flashes before it is laid. Without JS every word simply stands. */
.lz .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.26em 0.05em 0.34em; margin: -0.26em -0.05em -0.34em; }
.lz .w > span { display: inline-block; }
.lz .wj { white-space: nowrap; }
.motion .lz:not(.is-in) .w > span, .js .hero-title:not(.is-in) .w > span { transform: translateY(-118%); }
.motion .lz.is-in .w > span, .js .hero-title.is-in .w > span { animation: lay 0.74s cubic-bezier(0.2, 0.75, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 95ms); }
@keyframes lay { 0% { transform: translateY(-118%); } 78% { transform: translateY(2%) scaleY(0.97); } 100% { transform: none; } }
.js [data-intro]:not(.is-built) .hero-title:not(.is-in) .w > span { animation: failsafe 0.01s 2.6s forwards; }
.motion [data-intro] .rv:not(.is-in), .motion [data-intro] .rv.is-in { opacity: 1; transform: none; animation: none; }

/* Text rises (one rule for every paragraph block) */
.motion .rv:not(.is-in) { opacity: 0; transform: translateY(18px); }
.motion .rv.is-in { animation: rise 0.9s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* Photos are revealed by the laser: a clean wipe from the bottom while the image settles from 1.12 to 1
   (app.js). Hidden by opacity, not by clip-path: Chrome would not lazy-load an image that is clipped away. */
.build-armed .ph[data-build]:not(.is-built):not([data-building]) img { opacity: 0; }

/* Section hairlines draw themselves from the left when the heading arrives */
.facts::before, .work-group::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-strong);
  transform-origin: 0 50%; transition: transform 1.2s var(--ease);
}

/* ---------- Buttons: pills that press ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 26px; border: 0; border-radius: var(--r-pill);
  font-family: var(--sans); font-weight: 560; font-size: 1rem; line-height: 1.2; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease, transform 160ms ease;
}
.btn .icon { width: 1.15em; height: 1.15em; transition: transform var(--t-med) var(--ease); }
/* Only an arrow moves, and only on links that lead somewhere */
a.btn:hover .icon:has(use[href="#i-arrow-right"]) { transform: translateX(4px); }
.btn:active { transform: translateY(2px) scale(0.985); }
/* a press shows itself in place (no system tap flash, user rule 5 October 2026) */
.nav-toggle:active { transform: scale(0.95); }
.header-phone:active { color: var(--red); }
.tab:active, .doc-link:active strong { color: #fff; }
.crow:active .crow-go { transform: scale(0.94); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 0.95rem; gap: 8px; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-deep); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--red); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--ink); background: var(--white); }
.btn-quiet { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-quiet:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.btn-onred { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6); }
.btn-onred:hover { background: #fff; color: var(--finale); }
.btn-onred .icon:first-child { transform: none; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--red-deep); font-weight: 560; text-underline-offset: 3px; }
.text-link .icon { width: 1em; height: 1em; }

/* ---------- Header ---------- */
/* Solid white: the logo is a PNG on white and must not sit in a visible box. */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); }
/* All text in the header stands on one baseline: the logo's own wordmark (row 66 of the 170 px PNG), the menu, the
   phone number and the button labels. The row is a wrapping flex line, so align-content centres it vertically.
   The logo is never small: the wordmark's capitals are 40/170 of the image height (≥ 14 px on desktop, ≥ 10 px on
   a phone). */
:root { --logo-h: 44px; --logo-base: 0.5512; } /* v29: the owner's logo «pair» (tools/logo2.py final pair-clean): the name's baseline is 0.551 of its height */
.header-row { display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; gap: clamp(12px, 1.6vw, 24px); min-height: var(--header-h); }
/* the brand's baseline is the wordmark's: an empty strut 66/170 of the logo tall sits on the baseline and the image
   hangs from the top of the line, so the whole logo stays inside the header row */
.brand { display: block; flex: none; border-radius: 2px; line-height: 0; font-size: 0; text-decoration: none; } /* no underlined space before the logo */
.brand::before { content: ""; display: inline-block; height: calc(var(--logo-h) * var(--logo-base)); }
.brand img { display: inline-block; height: var(--logo-h); width: auto; vertical-align: top; }
.brand picture { display: contents; }
.nav { flex: 1; display: flex; justify-content: center; }
.nav-list { display: flex; gap: 4px; }
.nav-list a { position: relative; display: flex; align-items: baseline; gap: 5px; padding: 10px 12px; font-size: 0.98rem; font-weight: 520; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; transition: color var(--t-fast) ease; }
.nav-i { align-self: flex-start; font-size: 0.62rem; line-height: 1; padding-top: 2px; color: var(--ink-2); transition: color var(--t-fast) ease; }
.nav-list a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: var(--laser); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease); }
.nav-list a:hover::after { transform: scaleX(1); }
.nav-list a[aria-current]::after { transform: scaleX(1); }
.nav-list a[aria-current] .nav-i, .nav-list a:hover .nav-i { color: var(--red); }
.nav-toggle { display: none; }
.header-actions { display: flex; align-items: baseline; gap: 16px; flex: none; }
/* the main phone stands out in the header: display face, a little larger; the request is the one red button,
   the menu is a quiet text button behind a hairline, so the actions never merge into one dark block */
.header-phone { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 0 4px; font-family: var(--display); font-weight: 400; font-size: 1.12rem; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; }
.header-phone .icon { align-self: center; color: var(--red); width: 18px; height: 18px; }
/* menu button: the two lines come together into a cross while the menu is open and part again when it closes;
   the label changes with them */
.ic-menu path { transform-box: fill-box; transform-origin: center; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); }
.nav-toggle[aria-expanded="true"] .mb-a { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .mb-b { transform: translateY(-4px) rotate(-45deg); }
.mb-l { display: inline-grid; }
.mb-l > span { grid-area: 1 / 1; transition: opacity 0.3s ease, transform 0.45s var(--ease); }
.mb-close { opacity: 0; transform: translateY(0.5em); }
.nav-toggle[aria-expanded="true"] .mb-open { opacity: 0; transform: translateY(-0.5em); }
.nav-toggle[aria-expanded="true"] .mb-close { opacity: 1; transform: none; }
.header-phone:hover { color: var(--red-deep); }
.header-phone-text { line-height: 44px; }

/* v29 (owner 19.10: «пунктир ещё хуже. Простую линию оставь»): the header's lower edge is one plain red line that
   grows with the reading position — no spot, no trail, no dashes. */
.beam { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; background: var(--line); }
.beam-course { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--red); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

@media (max-width: 1239px) {
  .header-phone-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-phone { align-self: center; width: 44px; justify-content: center; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); }
}
/* The full navigation needs about 1440 px (the 60 px logo, five indexed sections, phone, button); below that it folds. */
@media (max-width: 1439px) {
  :root { --header-h: 72px; --logo-h: 44px; }
  .nav { order: 3; flex: none; justify-content: flex-end; }
  .header-actions { margin-left: auto; gap: 8px; }
  .nav-toggle { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 0 16px; background: var(--ink); color: #fff; border: 0; border-radius: var(--r-pill); font-weight: 560; cursor: pointer; }
  .nav-toggle .icon { align-self: center; width: 18px; height: 18px; }
  .nav-toggle .mb-l { line-height: 44px; }
  .js .nav-list {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0;
    padding: 6px var(--gutter) 26px; background: var(--white); box-shadow: 0 24px 40px -24px rgb(18 18 18 / 0.4);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity var(--t-fast) ease, transform var(--t-fast) ease, visibility 0s linear var(--t-fast);
  }
  .js .nav-list.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .nav-list li + li { border-top: 1px solid var(--line); }
  .js .nav-list a { padding: 14px 0; font-size: 1.7rem; font-weight: 560; font-stretch: 110%; letter-spacing: -0.04em; gap: 12px; }
  .js .nav-list .nav-i { font-size: 0.72rem; padding-top: 8px; }
  .js .nav-list a::after { left: 0; right: auto; width: 48px; bottom: 10px; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .header-row { flex-wrap: wrap; }
  html:not(.js) .nav { order: 3; width: 100%; justify-content: flex-start; }
  html:not(.js) .nav-list { flex-wrap: wrap; }
}
@media (max-width: 1023px) {
  :root { --header-h: 64px; --logo-h: 40px; }
}
@media (min-width: 760px) and (max-width: 1439px) {
  .nav-toggle { background: transparent; color: var(--ink); padding: 0 6px 0 20px; border-radius: 0; box-shadow: inset 1px 0 0 var(--line-strong); transition: color var(--t-fast) ease; }
  .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { color: var(--red); }
}
/* below 760 px the menu button is the icon alone (its name stays for screen readers): the larger logo and the
   request button keep the header in one row */
@media (max-width: 759px) {
  .nav-toggle .mb-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-toggle { width: 44px; padding: 0; justify-content: center; }
  .nav { align-self: center; }
}
@media (max-width: 559px) {
  /* 43–45 px (capitals ≥ 10 px) from 360 px up; narrower phones scale it so the header stays one row */
  /* phones: the compact lockup (roofs + name, no trade line) stands on its bottom edge; name capitals ≈ 15 px at 360 */
  /* phones: the full lockup too — the small trade line stays under the name (owner 18.10) */
  :root { --logo-h: clamp(38px, (100vw - 96px) / 5.94, 48px); }
  .brand { align-self: center; } /* the phone row is icons only: the logo is centred like them */
  .header-row, .header-actions { gap: 6px; }
  .header-cta { display: none; }
  .header-actions { align-self: center; }
}

/* ---------- Hero: one level line of type, then the work itself ---------- */
.hero { padding: clamp(16px, 2.4vw, 32px) 0 0; background: var(--white); overflow-x: clip; }
.hero-grid { display: grid; gap: clamp(22px, 3vw, 36px); margin-top: clamp(28px, 4.4vw, 64px); }
.hero-title { container-type: inline-size; font-weight: 600; font-stretch: 122%; letter-spacing: -0.06em; line-height: 0.95; }
.hero-title .lz-t { font-size: min(12rem, 14.6cqi); }
/* /en/: «From foundations» is longer than «Nuo pamatų», so the same lines are set a size smaller to stay in the column */
.hero-title:lang(en) .lz-t { font-size: min(12rem, 12.4cqi); }
/* Lines are as wide as their words: when they part on scroll, no box sticks out of the page. */
.hero-title .l1, .hero-title .l2 { display: block; width: max-content; white-space: nowrap; }
.hero-title em { color: var(--red); }
.hero-copy { display: grid; gap: 22px; }
.hero-lead { max-width: 34em; font-size: clamp(1.06rem, 0.98rem + 0.32vw, 1.25rem); color: var(--ink-2); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 1000px) {
  .hero-copy { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: 0 clamp(32px, 4vw, 72px); }
  .hero-actions { grid-row: 1; grid-column: 1; }
  .hero-lead { grid-row: 1; grid-column: 2; justify-self: end; }
}

/* Triptych: three real photos in the order of the work. On a mouse, the panel under the pointer opens wider and
   its photo settles; the others give way. Photos are laid one after another by the laser wipe (app.js). */
.triptych { display: flex; gap: 3px; height: clamp(360px, 60vh, 680px); margin-top: clamp(30px, 4vw, 56px); background: var(--white); }
.tp { position: relative; flex: 1 1 0; min-width: 0; transition: flex-grow 0.8s var(--ease); }
/* The name of each stage stands above its photo, never on it. */
.tp-link { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; width: 100%; padding: 0; border: 0; font: inherit; text-align: left; color: var(--ink); text-decoration: none; background: var(--white); cursor: zoom-in; }
/* v27: a tap opens the photo in place — it widens, the other two step aside; a second tap (or another photo) closes it */
.triptych.has-open .tp.is-open { flex-grow: 3.4; }
.triptych.has-open .tp:not(.is-open) { flex-grow: 0.5; }
.tp.is-open .tp-link { cursor: zoom-out; }
.tp.is-open .tp-ph img { --ts: 1; }
.tp .tp-ph { position: relative; min-height: 0; grid-row: 2; }
.tp-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.tp:nth-child(1) .tp-ph img { object-position: 40% 60%; }
.tp:nth-child(2) .tp-ph img { object-position: 50% 78%; }
.tp:nth-child(3) .tp-ph img { object-position: 30% 50%; }
.tp-cap { grid-row: 1; display: flex; align-items: flex-end; padding: 0 14px 12px; }
.tp:first-child .tp-cap { padding-left: max(var(--gutter), (100vw - var(--max)) / 2); }
.tp-link:hover .tp-title { color: var(--red); }
.tp-title { font-size: clamp(1rem, 0.86rem + 0.55vw, 1.4rem); font-weight: 560; letter-spacing: -0.02em; line-height: 1.15; transition: color var(--t-fast) ease; }
@media (hover: hover) and (pointer: fine) {
  .triptych:hover .tp { flex-grow: 0.78; }
  .triptych .tp:hover { flex-grow: 1.9; }
}
@media (max-width: 699px) {
  .triptych { height: clamp(300px, 54vh, 460px); }
  .tp-cap { min-height: calc(2.3em + 10px); padding-bottom: 10px; }
  .tp-title { font-size: 0.86rem; }
}

/* The headline lines part as the first screen scrolls away (--hp 0 → 1, app.js); the panel photos drift (--tpy). */
.hero-title .l1 { transform: translateX(calc(var(--hp, 0) * -3vw)); }
.hero-title .l2 { transform: translateX(calc(var(--hp, 0) * 5vw)); }
.tp .tp-ph img { transform: translate3d(0, calc(var(--tpy, 0) * 1px), 0) scale(var(--ts, 1.1)); }
@media (hover: hover) and (pointer: fine) { .tp:hover .tp-ph img { --ts: 1.16; } }

/* Ticker: the six stage words, moved only by scrolling (no loop of its own); serif italic on every other word */
.ticker { overflow: hidden; margin-top: clamp(48px, 6vw, 88px); padding-block: clamp(14px, 1.6vw, 22px); border-block: 1px solid var(--line); }
.ticker-track { display: flex; align-items: center; width: max-content; transform: translate3d(var(--tk, 0px), 0, 0); will-change: transform; }
.tk { padding-inline: clamp(18px, 2vw, 32px); font-size: clamp(2.8rem, 1.4rem + 5.6vw, 8rem); font-weight: 600; font-stretch: 122%; letter-spacing: -0.055em; line-height: 1; white-space: nowrap; }
.tk-em { font-weight: 300; font-stretch: 125%; color: var(--red); }
.tk-dot { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--laser); box-shadow: 0 0 12px 2px rgb(255 31 42 / 0.45); }

/* Site-board facts as a hairline row */
.facts { position: relative; display: grid; gap: 14px 0; margin-top: clamp(28px, 3.6vw, 48px); padding-top: 16px; }
.facts-head { font-size: 0.74rem; text-transform: uppercase; color: var(--red-deep); }
.facts-list { display: grid; gap: 18px 0; }
.fact { display: grid; gap: 6px; align-content: start; }
.fact dt { font-size: 0.72rem; text-transform: uppercase; color: var(--ink-2); }
.fact dd { font-size: 1.02rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; }
@media (min-width: 640px) { .facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; } }
@media (min-width: 1100px) {
  .facts { grid-template-columns: minmax(0, 2.2fr) minmax(0, 9.8fr); }
  .facts-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .fact { padding: 0 22px; border-left: 1px solid var(--line); }
}

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(88px, 11vw, 168px) 0; }
.sec-head { position: relative; display: grid; gap: clamp(18px, 2.4vw, 28px); padding-top: 0; margin-bottom: clamp(44px, 6vw, 88px); }
.sec-label { display: flex; gap: 14px; font-size: 0.76rem; text-transform: uppercase; color: var(--ink-2); }
.on-dark .sec-label { color: var(--on-dark-2); }
.section-title { container-type: inline-size; font-weight: 580; font-stretch: 118%; letter-spacing: -0.055em; line-height: 0.94; }
/* Size follows the heading's own column (cqi), so a long word never outgrows it. */
.section-title .lz-t { font-size: min(6.2rem, max(2.2rem, 9.4cqi)); }
.sec-note { max-width: 34em; color: var(--ink-2); font-size: clamp(1.02rem, 0.96rem + 0.2vw, 1.15rem); line-height: 1.55; }
.on-dark .sec-note { color: var(--on-dark-2); }
@media (min-width: 1000px) {
  .sec-head { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 22px clamp(24px, 3vw, 48px); }
  .sec-label { grid-row: 1 / span 2; padding-top: 0.5em; }
  .sec-head > .lz, .sec-note { grid-column: 2; }
}

/* ---------- Services ---------- */
.services { background: var(--paper); }
.directions { border-bottom: 1px solid var(--line); }
.dir { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 6px 16px; padding: clamp(20px, 2.4vw, 30px) 0; border-top: 1px solid var(--line); }
.dir-no { grid-row: 1 / span 2; font-size: 0.8rem; color: var(--red); padding-top: 0.55em; }
.dir strong { font-size: clamp(1.35rem, 0.95rem + 1.6vw, 2.3rem); font-weight: 540; font-stretch: 106%; letter-spacing: -0.04em; line-height: 1.05; }
.dir-text { color: var(--ink-2); line-height: 1.5; max-width: 36em; }
.dir::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--laser); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); }
.dir:hover::after { transform: scaleX(1); }
@media (min-width: 900px) {
  .dir { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); align-items: baseline; gap: 0 clamp(24px, 3vw, 48px); }
  .dir-no { grid-row: auto; padding-top: 0; }
  .dir-text { font-size: 1.04rem; }
}

.stages { position: relative; display: grid; margin-top: clamp(56px, 7vw, 104px); }
/* The model stands in a light studio: the frames carry alpha (the model and its soft shadow), the panel is a warm
   light backdrop with a brighter centre, like a cyclorama lit from the front.
   Under it: the stage counter and a six-part bar that fills stage by stage. */
.stages-visual { position: sticky; top: var(--header-h); z-index: 2; color: var(--ink); background: radial-gradient(130% 95% at 50% 40%, #fffdf9 0%, #f2eee7 52%, #e3ddd3 100%); }
.house-fig { position: relative; display: grid; width: 100%; }
/* The film: baked frames of the house being built, scrubbed by the scroll (app.js). Without JS the poster (the
   finished house) is shown; the canvas appears once the first frame is drawn. */
.film { position: relative; width: 100%; margin-inline: auto; aspect-ratio: var(--ar, 5 / 4); overflow: hidden; }
.film-poster, .film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.film-canvas { opacity: 0; transition: opacity 0.4s ease; }
.film.is-live .film-canvas { opacity: 1; }
.film-poster { transition: opacity 0.4s ease; }
.film.is-live .film-poster { opacity: 0; }
.house-cap { display: flex; align-items: center; gap: 18px; padding: 12px 18px 16px; font-size: 0.72rem; text-transform: uppercase; color: var(--ink-2); }
.house-count { flex: none; color: var(--ink); }
.house-bar { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.house-bar i { height: 2px; background: rgb(18 18 18 / 0.14); transition: background-color 0.5s ease, box-shadow 0.5s ease; }
.house-bar i.is-on { background: var(--laser); box-shadow: 0 0 8px rgb(255 31 42 / 0.6); }
.stage { position: relative; padding: clamp(28px, 3.4vw, 44px) 0 clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); }
.stage:first-child { border-top: 0; padding-top: 0; }
.stage-no { font-size: 0.78rem; color: var(--red); }
.stage-title { container-type: inline-size; font-weight: 580; font-stretch: 120%; letter-spacing: -0.055em; line-height: 1.02; margin: 10px 0 22px; }
.stage-title .lz-t { font-size: min(5.4rem, max(2.2rem, 13cqi)); }
.stage-title .ln { display: block; white-space: nowrap; }
.stage .ticks { max-width: 36em; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 14px; height: 1px; background: var(--red); }
@media (max-width: 999px) {
  .stages-visual { margin-inline: calc(-1 * var(--gutter)); }
  /* The texts fade out before they reach the panel: a clear gap between the model and the stage title. */
  .stages-visual::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px; background: linear-gradient(var(--paper), rgb(244 243 239 / 0)); pointer-events: none; }
  .film { width: min(100%, 64vh); }
}
/* phones: a 16:10 film cropped around the model (build.py film_crops) and a slim caption — the panel takes less of
   the screen, the stage text below gets more */
@media (max-width: 699px) {
  .film { width: 100%; aspect-ratio: 16 / 10; }
  .house-cap { padding: 6px 16px 10px; }
}
@media (max-width: 999px) {
  .stage { scroll-margin-top: calc(var(--header-h) + 46vh); }
  .stage:first-child { padding-top: clamp(24px, 4vw, 40px); }
  .stage:last-child { padding-bottom: 8px; }
  .services { padding-bottom: 56px; }
}
@media (min-width: 1000px) {
  .stages { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
  /* The panel fills the screen height and runs to the left edge of the screen: a dark mass beside the stage
     texts, the model centred in it. */
  .stages-visual { top: calc(var(--header-h) + 24px); min-height: calc(100vh - var(--header-h) - 48px); min-height: calc(100svh - var(--header-h) - 48px); display: grid;
    margin-left: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2)); }
  .house-fig { grid-template-rows: 1fr auto; }
  .film { align-self: center; width: min(100%, calc((100vh - var(--header-h) - 110px) * 1.25)); }
  .house-cap { padding-left: max(var(--gutter), (100vw - var(--max)) / 2); }
  .stage { min-height: 58vh; }
  .js .stage { opacity: 0.3; transition: opacity 0.6s ease; }
  .js .stage.is-active { opacity: 1; }
}
@media (min-width: 1600px) {
  .stage .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; max-width: none; }
}

/* ---------- Steel and trade (dark). The heading is lit like a polished stainless sheet: the highlight travels
   with the heading through the screen, leans with scroll speed and follows the pointer (app.js sets --hx). ---------- */
.on-dark { background: var(--graphite); color: var(--on-dark); }
.steel .section-title .w > span {
  color: #e4e8eb;
  /* Brushed grain: long horizontal streaks (stretched noise) mixed into the travelling highlight. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='256'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0025 0.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E") 0 0 / 640px 100% repeat-x,
    linear-gradient(100deg, #8f989f 0%, #c3c9ce 34%, #ffffff 46%, #f2f4f5 50%, #aab2b8 60%, #8f989f 100%) var(--hx, 50%) 0 / 260% 100% no-repeat;
  background-blend-mode: soft-light, normal;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  /* The fill only paints inside the box: the marks of Č, Ū would fall outside it and vanish without this margin. */
  padding: 0.24em 0 0.28em; margin: -0.24em 0 -0.28em;
}
@media (forced-colors: active) { .steel .section-title .w > span { background: none; -webkit-text-fill-color: currentColor; } }
.steel-grid { display: grid; gap: clamp(36px, 5vw, 64px); }
.steel-text { display: grid; gap: 0; align-content: start; }
.steel-lead { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.7rem); font-weight: 450; line-height: 1.35; letter-spacing: -0.02em; padding-bottom: 26px; }
.steel-access { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line-dark); font-weight: 520; line-height: 1.4; }
.steel-access .icon { width: 26px; height: 26px; color: var(--red-on-dark); }
.steel-trade { padding: 18px 0 0; border-top: 1px solid var(--line-dark); scroll-margin-top: calc(var(--header-h) + 16px); }
.steel-trade h3 { font-size: 0.76rem; text-transform: uppercase; color: var(--red-on-dark); margin-bottom: 8px; }
.steel-trade p { color: var(--on-dark-2); font-size: 0.98rem; line-height: 1.6; }
.steel-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.steel-item.is-big { grid-column: span 2; }
.steel-item .ph { aspect-ratio: 4 / 3; }
@media (min-width: 1000px) {
  /* The text column sets the height; the gallery stretches to it (user rule: neighbouring blocks end together). */
  .steel-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: stretch; }
  .steel-gallery { grid-template-rows: repeat(2, minmax(0, 1fr)); min-height: 100%; }
  .steel-item, .steel-item .ph-link { height: 100%; }
  .steel-item .ph { height: 100%; aspect-ratio: auto; min-height: 150px; }
  .steel-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steel-item.is-big { grid-column: span 2; grid-row: span 2; }
  .steel-item.is-big .ph-link, .steel-item.is-big .ph { height: 100%; }
  .steel-item.is-big .ph { aspect-ratio: auto; }
}

/* Shared photo frames and the two physical hovers */
.ph-link { position: relative; display: block; text-decoration: none; color: inherit; }
.ph { position: relative; display: block; overflow: hidden; background: var(--paper-2); }
.on-dark .ph { background: var(--graphite-2); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
/* Under every photo lies its own 24 px preview, blurred (build.py inlines it as --lq): the first paint and the
   part the laser has not opened yet show the photo out of focus, never an empty grey box. (picture is
   display: contents, so its ::before is laid out against .ph.) */
.ph > picture::before { content: ""; position: absolute; inset: -6%; background: var(--lq) center / cover no-repeat; filter: blur(16px) saturate(1.1); }
.ph.is-built > picture::before { content: none; }
@media (hover: hover) and (pointer: fine) {
  .ph-link:hover .ph img { transform: scale(1.035); }
  /* Stainless sheen: a band of light crosses the whole photo with the pointer */
  .sheen .ph::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
    background: linear-gradient(105deg, transparent calc(var(--mx, 50%) - 22%), rgb(255 255 255 / 0.32) var(--mx, 50%), transparent calc(var(--mx, 50%) + 22%));
    mix-blend-mode: soft-light;
  }
  .sheen:hover .ph::after { opacity: 1; }
  /* Laser-level cross follows the pointer over work photos */
  .aim .ph::before, .aim .ph::after {
    content: ""; position: absolute; pointer-events: none; z-index: 2; background: var(--laser); opacity: 0;
    box-shadow: 0 0 0 2px rgb(255 31 42 / 0.16); transition: opacity 0.25s ease;
  }
  .aim .ph::before { left: 0; right: 0; height: 1px; top: var(--my, 50%); }
  .aim .ph::after { top: 0; bottom: 0; width: 1px; left: var(--mx, 50%); }
  .aim:hover .ph::before, .aim:hover .ph::after { opacity: 0.85; }
}

/* ---------- Works: one gliding strip per group ---------- */
.works { background: var(--paper); padding-bottom: clamp(72px, 9vw, 140px); }
.works .sec-head { margin-bottom: clamp(36px, 5vw, 64px); }
.work-group { position: relative; margin-inline: auto; }
.work-group::before { left: max(var(--gutter), calc((100% - var(--max)) / 2)); right: max(var(--gutter), calc((100% - var(--max)) / 2)); background: var(--line); }
.work-group + .work-group { margin-top: clamp(40px, 5vw, 64px); }
.wg-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; padding-top: 16px; padding-bottom: 18px; }
.wg-no { font-size: 0.76rem; color: var(--red); }
.wg-title { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); font-weight: 540; font-stretch: 106%; letter-spacing: -0.04em; line-height: 1.08; }
.wg-count { font-size: 0.72rem; text-transform: uppercase; color: var(--ink-2); }
.wg-arrows { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
  .wg-head { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .wg-arrows:not([hidden]) { display: flex; gap: 6px; align-self: center; }
}
.wg-arrow { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.wg-arrow:hover { background: var(--ink); color: #fff; }
.wg-arrow .icon { width: 18px; height: 18px; }
/* The strip aligns its first photo with the content column and bleeds off the right edge. */
/* Strips drift endlessly (user rule): slowly by themselves, faster as the pointer nears the right edge, backwards
   near the left; neighbouring groups drift in opposite directions; the photos lean with the speed and vary in
   height. A transform moves the track; copies close the loop (app.js). Without JS the strip scrolls natively. */
.strip { --sh: clamp(240px, 30vw, 440px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip.is-marquee { overflow: hidden; cursor: grab; touch-action: pan-y; }
.strip.is-dragging { cursor: grabbing; }
.strip:focus-visible { outline-offset: -3px; }
.strip-track { display: flex; align-items: center; gap: 12px; width: max-content; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
.strip.is-marquee .strip-track { padding-inline: 0; will-change: transform; }
.shot { flex: none; width: calc(var(--sh) * var(--k, 1) * var(--ar)); max-width: 86vw; transform: skewX(var(--sk, 0deg)); transition: transform 0.4s var(--ease); }
.shot .ph { height: calc(var(--sh) * var(--k, 1)); }
.work-row + .work-row { margin-top: clamp(28px, 3.4vw, 48px); }
.strip-bar { display: flex; justify-content: flex-end; min-height: 8px; margin-bottom: 12px; }
.strip.is-marquee .strip-track { align-items: flex-end; }
.shot-tag { display: flex; gap: 10px; align-items: baseline; min-height: 2.9em; margin-top: 12px; font-family: var(--mono); font-size: 0.72rem; line-height: 1.45; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 699px) {
  .strip { --sh: 58vw; }
  .strip:not(.is-marquee) { scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); }
  .strip:not(.is-marquee) .shot { scroll-snap-align: start; }
}

/* ---------- About + documents ---------- */
.about { background: var(--white); }
.about-text { display: grid; gap: 1.1em; }
.about-text p { color: var(--ink-2); line-height: 1.6; }
.about-fig { margin: 0 0 8px; }
/* phones and tablets: the tall sample stays small, centred over the text */
.about-fig img { display: block; width: auto; max-width: 100%; height: clamp(220px, 34vh, 300px); margin-inline: auto; object-fit: contain; }
.about-text p:first-of-type { color: var(--ink); font-size: clamp(1.35rem, 1rem + 1.3vw, 2.2rem); font-weight: 450; line-height: 1.28; letter-spacing: -0.025em; max-width: 30em; margin-bottom: 0.4em; }
@media (min-width: 1000px) {
  .about-grid .sec-head { margin-bottom: 36px; }
  /* the first column is exactly the section head's label column (3/12 of the width minus one gap), so the lead
     paragraph starts on the heading's left edge, not half a gap to its left */
  .about-text { --g: clamp(24px, 3vw, 48px); grid-template-columns: calc((100% - var(--g)) / 4) repeat(3, minmax(0, 1fr)); gap: 28px var(--g); }
  .about-text p { grid-column: auto; }
  .about-text p:first-of-type { grid-column: 2 / -1; }
  .about-text p:nth-of-type(2) { grid-column: 2; }
  /* the wall-section sample stands in the left column for the whole text block and ends with it */
  .about-fig { grid-column: 1; grid-row: 1 / span 2; margin: 0; position: relative; min-height: 320px; }
  .about-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
}
.about { padding-bottom: 0; }
.docs-band { margin-top: clamp(72px, 9vw, 140px); padding: clamp(72px, 9vw, 128px) 0; }
.docs-head { container-type: inline-size; }
.docs-title { font-size: min(4.4rem, max(2.2rem, 15cqi)); font-weight: 580; font-stretch: 118%; letter-spacing: -0.05em; margin-bottom: 22px; color: #fff; }
.tablist { display: flex; gap: 4px 22px; margin-bottom: 30px; overflow-x: auto; padding: 4px; margin-inline: -4px; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: none; display: inline-flex; align-items: flex-start; gap: 6px; min-height: 44px; padding: 6px 0; border: 0; background: transparent; color: var(--on-dark-2); font-family: var(--sans); font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.6rem); font-weight: 520; font-stretch: 115%; letter-spacing: -0.04em; cursor: pointer; transition: color var(--t-fast) ease; }
.tab-n { font-size: 0.72rem; letter-spacing: 0.04em; padding-top: 0.35em; color: var(--red-on-dark); }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--laser); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease); }
.tab:hover { color: #fff; }
.tab[aria-selected="true"] { color: #fff; }
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab-panel + .tab-panel { margin-top: 56px; }
.tabs-ready .tab-panel + .tab-panel { margin-top: 0; }
.tabs-ready .panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.panel-title { font-size: 1.5rem; font-weight: 560; letter-spacing: -0.03em; margin-bottom: 14px; color: #fff; }
.panel-intro { margin: -4px 0 26px; max-width: 46em; color: var(--on-dark-2); font-size: 0.98rem; }
@media (min-width: 1024px) {
  .docs.tabs-ready { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 0 clamp(24px, 3vw, 48px); align-items: start; }
  .docs.tabs-ready .docs-head { position: sticky; top: calc(var(--header-h) + 32px); }
  .docs.tabs-ready .tablist { flex-direction: column; align-items: flex-start; overflow: visible; margin: 0; padding: 0; }
}
/* Documents (v13): one sheet stands straight on a lit stand, the list of documents runs beside it. The row under the
   pointer or in focus brings its sheet up from below; a click opens the viewer. Stand and list end on one line. */
/* v16: the scroll holds on the documents — the stand is pinned (on phones under the header, on wide screens on the
   left) and the rows pass under/beside it, each about half a screen tall; the sheet of the row crossing the reading
   line comes to the front (app.js). Plain page scroll, nothing is hijacked. */
/* v23: the documents are pinned — the view stays on screen while the scroll runs through its pin (about 30 vh per
   document) and the progress brings each sheet to the front (app.js); the rows stay compact, no empty tall rows */
.doc-pin { position: relative; height: calc(var(--pin-view) + (var(--n, 1) - 1) * 30vh); --pin-view: calc(100svh - var(--header-h) - 32px); }
.doc-view { position: sticky; top: calc(var(--header-h) + 16px); height: var(--pin-view); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 18px; }
.doc-stage { position: relative; z-index: 3; display: block; height: clamp(200px, 40svh, 340px); background: radial-gradient(70% 60% at 50% 42%, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0) 70%) var(--graphite); }
/* v15: all sheets of the tab lie in a straight fan (no tilt): the front one full size, the others step back to
   the right, smaller and darker. A row under the pointer brings its sheet to the front; when a tab opens the
   sheets are dealt onto the stand one after another (app.js .deal). */
.doc-sheet { --step: calc(30% / max(var(--n, 1) - 1, 1)); position: absolute; top: 24px; bottom: 34px; left: 18px; width: 66%; display: flex; align-items: center; justify-content: flex-start; z-index: calc(20 - var(--r, 0)); transform: translateX(calc(var(--r, 0) * var(--step) * 1.85)) scale(calc(1 - var(--r, 0) * 0.07)); transform-origin: 0% 50%; filter: brightness(calc(1 - var(--r, 0) * 0.16)); transition: transform 0.75s var(--ease), filter 0.75s var(--ease), opacity 0.5s ease; transition-delay: calc(var(--r, 0) * 70ms); pointer-events: none; }
.doc-stage.deal .doc-sheet { opacity: 0; transform: translateX(120%) scale(0.92); transition: none; }
.doc-sheet img { flex: none; max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 2px 3px rgb(0 0 0 / 0.4), 0 34px 54px -20px rgb(0 0 0 / 0.9); }
.doc-list { display: grid; align-content: start; }
.doc-link { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 0 18px; padding: 14px 0; border-top: 1px solid var(--line-dark); text-decoration: none; color: inherit; transition: background-color var(--t-fast) ease; }
.doc-list li:last-child .doc-link { border-bottom: 1px solid var(--line-dark); }
.doc-no { font-family: var(--mono); font-size: 0.74rem; color: var(--on-dark-2); padding-top: 0.3em; transition: color var(--t-fast) ease; }
.doc-text { display: grid; gap: 4px; }
.doc-text strong { font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 1rem + 0.9vw, 2rem); line-height: 1.2; color: var(--on-dark-2); transition: color var(--t-fast) ease; }
.doc-desc { font-size: 0.92rem; line-height: 1.45; color: var(--on-dark-2); }
.doc-meta { font-size: 0.7rem; line-height: 1.5; color: var(--on-dark-2); text-transform: uppercase; }
.doc-link.is-on strong, .doc-link:hover strong { color: #fff; }
.doc-link.is-on .doc-no, .doc-link:hover .doc-no { color: var(--red-on-dark); }
@media (max-width: 759px) {
  .doc-stage { margin-inline: calc(-1 * var(--gutter)); }
  /* phones: only the document in front shows its description, so the whole list fits under the stand */
  .doc-link:not(.is-on) .doc-desc, .doc-link:not(.is-on) .doc-meta { display: none; }
  .doc-link { padding: 11px 0; }
  .doc-text strong { font-size: 1.15rem; }
}
@media (min-width: 760px) {
  .doc-pin { --pin-view: min(calc(100svh - var(--header-h) - 32px), 700px); }
  .doc-view { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: clamp(22px, 3vw, 44px); }
  .doc-stage { height: 100%; max-height: 640px; background-color: transparent; }
  .doc-list { align-self: center; }
}

/* ---------- Finale ---------- */
/* Under the rising red field: graphite, continuing the documents band above. */
.finale { position: relative; overflow-x: clip; color: #fff; background: var(--graphite); padding: clamp(88px, 10vw, 150px) 0 clamp(72px, 8vw, 120px); isolation: isolate; }
/* The field is a wall marked out with a laser: a fine square grid of light lines that rises like a level line as
   the section scrolls in. When it is complete the lines brighten once with a short flicker (the whole layer, no
   spot). On a mouse a laser cross spans the whole field at the pointer. Nothing loops. */
.finale-bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; background-color: var(--finale);
  background-image:
    linear-gradient(rgb(255 255 255 / var(--gl)) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / var(--gl)) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  /* Under the grid the field has the fine grain of a rendered (tinkuota) wall. */
  background-size: 96px 96px, 96px 96px, 320px 320px; background-position: calc(var(--gutter) - 1px) -1px;
  background-blend-mode: normal, normal, soft-light;
}
.finale.lit .finale-bg { animation: lights-on 1.3s ease-out both; }
@keyframes lights-on { 0% { --gl: 0.07; } 14% { --gl: 0.22; } 22% { --gl: 0.08; } 36% { --gl: 0.24; } 46% { --gl: 0.12; } 100% { --gl: 0.13; } }
.cross-x, .cross-y { position: absolute; background: rgb(255 255 255 / 0.55); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.cross-x { left: 0; right: 0; height: 1px; top: var(--cy, 50%); }
.cross-y { top: 0; bottom: 0; width: 1px; left: var(--cx, 50%); }
.finale.aiming .cross-x, .finale.aiming .cross-y { opacity: 1; }
.finale-grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: start; }
/* Three surfaces on the field instead of white type everywhere: the two-tone headline, the white call plate
   (the one phone), outlined links, and the requisites on a graphite plate. The left column is a size container. */
.finale-info { position: relative; container-type: inline-size; }
.finale .sec-label { padding-top: 0; color: rgb(255 255 255 / 0.85); margin-bottom: clamp(18px, 2.4vw, 28px); }
.finale-title { font-weight: 560; font-stretch: 110%; letter-spacing: -0.05em; line-height: 0.94; }
.finale-title .lz-t { font-size: min(5.6rem, max(2.2rem, 13.4cqi)); }
.finale-title .ft1, .finale-title .ft2 { display: block; white-space: nowrap; }
/* The second line is dark on the red field; until the field has risen behind it, it stays light on graphite. */
.finale-title .ft2 { color: color-mix(in srgb, #170708 calc(clamp(0, (var(--fp, 1) - 0.8) * 5, 1) * 100%), #ffffff); }
/* Contacts as rows on hairlines: the one phone is the largest line with a round call button (highlight-one-phone
   rule), then the e-mail; the whole row is the link. */
/* v16: no rules between the contact rows (the laser grid already draws enough lines); the round button stands
   left of its line, both buttons one size so the number and the address start on one vertical */
.crows { margin-top: clamp(26px, 3vw, 40px); display: grid; gap: clamp(10px, 1.4vw, 18px); }
.crow { display: flex; align-items: center; justify-content: flex-start; gap: clamp(14px, 2vw, 22px); padding: 4px 0; color: #fff; text-decoration: none; }
.crow-v { min-width: 0; font-stretch: 122%; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 6px; transition: background-size 0.6s var(--ease); }
.crow-phone .crow-v { font-size: min(3.6rem, 8cqi); }
.crow-mail .crow-v { font-size: min(2rem, 5.8cqi); }
.crow-go { order: -1; flex: none; display: grid; place-items: center; width: clamp(46px, 10cqi, 62px); aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--finale); transition: background-color var(--t-med) ease, color var(--t-med) ease, transform var(--t-med) var(--ease); }
.crow-mail .crow-go { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.6); }
.crow-go .icon { width: 42%; height: 42%; }
.crow:hover .crow-v, .crow:focus-visible .crow-v { background-size: 100% 2px; }
.crow:hover .crow-go { background: var(--ink); color: #fff; transform: rotate(-12deg); box-shadow: none; }
.place-line { display: grid; gap: 12px; margin-top: clamp(18px, 2vw, 24px); }
.place { font-size: 1.1rem; font-weight: 500; }
.place-links { display: flex; flex-wrap: wrap; gap: 10px; }
.place-links .icon { width: 17px; height: 17px; }
.requisites { margin-top: clamp(28px, 3.4vw, 40px); padding: clamp(18px, 2.2vw, 26px); border-radius: var(--r); background: var(--graphite); color: var(--on-dark); box-shadow: 0 26px 44px -26px rgb(40 0 0 / 0.75); }
.requisites-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.requisites h3 { font-size: 1.25rem; font-weight: 560; letter-spacing: -0.03em; color: #fff; }
.requisites dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 18px; font-size: 0.95rem; line-height: 1.4; }
.requisites dl div { display: contents; }
.requisites dt { color: var(--on-dark-2); }
.requisites dd { font-weight: 500; color: #fff; overflow-wrap: anywhere; }
.req-status { min-height: 1.5em; margin-top: 8px; font-size: 0.9rem; color: #c9cbce; }
.req-status:empty { min-height: 0; margin-top: 0; }
/* In a narrow column (phone, or 1024-1279 side by side) each label sits above its value, so no code breaks inside. */
@container (max-width: 500px) { .requisites dl { grid-template-columns: 1fr; gap: 0; } .requisites dl div + div dt { margin-top: 10px; } }
/* Side by side the columns end on one line: the form card stretches and its description field takes the slack. */
@media (min-width: 1024px) {
  .finale-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .finale-info { display: flex; flex-direction: column; }
  .place-line { margin-bottom: clamp(28px, 3.4vw, 40px); }
  .requisites { margin-top: auto; }
  .composer-card { display: flex; flex-direction: column; }
  .composer { flex: 1; grid-template-rows: auto auto 1fr; }
  .composer .field-grow { grid-template-rows: auto 1fr auto; }
  .composer .field-grow textarea { height: 100%; }
}

.composer-card { color: var(--ink); background: var(--white); border-radius: var(--r); box-shadow: 0 30px 60px -30px rgb(60 0 0 / 0.55); padding: clamp(22px, 3vw, 40px); }
.composer { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field > span, .field legend { font-size: 0.95rem; font-weight: 560; }
.field legend { padding: 0; margin-bottom: 10px; }
.field em { font-weight: 400; color: var(--ink-2); }
.field input, .field textarea { width: 100%; min-height: 52px; padding: 13px 16px; background: var(--paper); border: 1px solid transparent; border-radius: var(--r); transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease, background-color var(--t-fast) ease; }
.field textarea { resize: vertical; min-height: 128px; line-height: 1.5; }
.field input:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; background: var(--white); border-color: var(--ink); box-shadow: 0 0 0 3px rgb(18 18 18 / 0.12); }
.field textarea[aria-invalid="true"] { border-color: var(--red-deep); box-shadow: 0 0 0 3px rgb(211 18 27 / 0.15); }
.field-row { display: grid; gap: 20px; }
@media (min-width: 640px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 0.94rem; font-weight: 500; line-height: 1.25; transition: background-color var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.choice:hover span { box-shadow: inset 0 0 0 1px var(--ink); }
.choice input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
[data-group][aria-invalid="true"] .choice span { box-shadow: inset 0 0 0 1px var(--red-deep); }
.error { display: none; font-size: 0.9rem; font-weight: 560; color: var(--red-deep); }
.error.is-visible { display: block; }
.subcontract { padding: 12px 16px; background: var(--paper); border-radius: var(--r); font-size: 0.93rem; color: var(--ink-2); line-height: 1.45; }
.composer-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.composer-note { font-size: 0.86rem; color: var(--ink-2); line-height: 1.45; }
.composer-status { min-height: 1.4em; font-size: 0.95rem; font-weight: 560; color: var(--red-deep); }
.composer-status.is-ok { color: #1f6b3a; }

/* Footer: one composition on one background (user rule 2026-10-02). Logo, sections and "to top" on one midline;
   under the sections, centred, the legal name, codes and "Sukūrė" in one line divided by thin vertical rules.
   Narrow screens: logo and "to top" first, sections next; the legal line stacks centred, so no wrapped line ever
   starts with a rule, and no code breaks inside. */
.site-footer { background: var(--white); border-top: 1px solid var(--line); font-size: 0.95rem; }
.footer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 32px; padding-block: 26px 10px; }
.footer-row .to-top { justify-self: end; }
.footer-logo { display: block; height: 42px; width: auto; flex: none; }
.footer-nav { display: flex; justify-content: center; }
.footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.footer-nav a { display: block; padding: 10px 12px; font-weight: 520; text-decoration: none; white-space: nowrap; transition: color var(--t-fast) ease; }
.footer-nav a:hover { color: var(--red-deep); }
.to-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex: none; font-weight: 560; text-decoration: none; }
.to-top .icon { width: 18px; height: 18px; color: var(--red); transition: transform var(--t-med) var(--ease); }
.to-top:hover { color: var(--red-deep); }
.to-top:hover .icon { transform: translateY(-3px); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; padding: 10px 0 30px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.footer-legal > span { white-space: nowrap; padding: 2px 16px; }
.footer-legal > span + span { border-left: 1px solid var(--line-strong); }
.footer-credit a { color: var(--ink); font-weight: 560; text-underline-offset: 3px; }
.footer-credit a:hover { color: var(--red-deep); }
@media (max-width: 999px) {
  .footer-row { grid-template-columns: minmax(0, 1fr) auto; }
  .footer-logo { height: 38px; }
  .footer-nav { grid-column: 1 / -1; grid-row: 2; }
  .footer-legal { flex-direction: column; align-items: center; gap: 4px; }
  .footer-legal > span + span { border-left: 0; }
}
@media (max-width: 559px) {
  .footer-logo { height: 34px; }
  .footer-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; text-align: center; }
}

/* Viewer */
.viewer { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(14 14 14 / 0.97); color: var(--on-dark); }
.viewer::backdrop { background: rgb(14 14 14 / 0.6); }
.is-viewing { overflow: hidden; }
.viewer-inner { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; padding: 16px clamp(12px, 3vw, 32px) 12px; }
.viewer-figure { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-height: 0; }
.viewer-img { width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; align-self: center; object-fit: contain; transition: opacity var(--t-fast) ease; will-change: transform; }
/* the photo follows the finger and is swiped to the next / previous one (rule 18.10, all sites) */
.viewer-figure { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.viewer-img { -webkit-user-drag: none; }
.viewer-img.is-settling { transition: transform 0.32s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 0.32s ease; }
.viewer-img.is-loading { opacity: 0.35; }
.viewer figcaption { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: center; text-align: center; max-width: 72ch; margin-inline: auto; }
.viewer-caption { font-weight: 500; }
.viewer-meta { color: var(--on-dark-2); font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; }
.viewer-pdf { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 560; font-size: 0.95rem; }
.viewer-controls { display: flex; justify-content: center; align-items: center; gap: 10px; padding-top: 12px; }
.viewer-count { min-width: 5.5em; text-align: center; font-family: var(--mono); font-size: 0.78rem; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.viewer-btn { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: var(--r-pill); background: var(--graphite-2); color: #fff; cursor: pointer; transition: background-color var(--t-fast) ease; }
.viewer-btn:hover { background: #3a3a3a; }
.viewer-btn:focus-visible { outline-color: #fff; }
.viewer-close { position: absolute; top: 14px; right: 14px; }

/* Intro fail-safe: if the script never runs, everything in the first screen shows after 2.6 s. */
.js [data-intro]:not(.is-built) .tp-ph:not(.is-built):not([data-building]) img { opacity: 0; animation: failsafe 0.01s 2.6s forwards; }
@keyframes failsafe { to { opacity: 1; transform: none; clip-path: none; } }

@media print {
  .site-header, .viewer, .composer-card, .to-top, .tablist, .beam, .finale-bg, .footer-nav, .wg-arrows { display: none !important; }
  .finale .requisites { box-shadow: none; }
  .steel .section-title .w > span { background: none; -webkit-text-fill-color: currentColor; }
  .tab-panel[hidden] { display: block !important; }
  .on-dark, .finale { background: #fff; color: #000; }
  .strip { overflow: visible; }
  .strip-track { flex-wrap: wrap; width: auto; }
}

/* Display face: Titillium Web (as Mapresta Display), chosen by the owner on 5 October 2026. Light 300 for the big
   headings and lines, Regular 400 where a heading is small (Light would be too thin there). The accent word keeps
   the weight of its heading in the logo red. Text and interface stay in Readex Pro. */
.hero-title, .section-title, .stage-title, .tk, .docs-title, .crow-v, .finale-title {
  font-family: var(--display); font-weight: 300; font-stretch: normal; font-synthesis: none;
}
.dir strong, .tab, .requisites h3, .tp-title, .js .nav-list a {
  font-family: var(--display); font-weight: 400; font-stretch: normal; font-synthesis: none;
}
.hero-title { letter-spacing: -0.02em; }
.section-title, .stage-title, .finale-title { letter-spacing: -0.015em; }
.tk, .docs-title, .crow-v { letter-spacing: -0.01em; }
.dir strong, .tab, .tp-title { letter-spacing: 0; }
.lz-t em, .finale-title em, .tk-em { font-family: var(--display); font-weight: inherit; font-stretch: normal; letter-spacing: inherit; }
.hero-title { line-height: 1.06; }
.section-title, .finale-title { line-height: 1.08; }
.stage-title { line-height: 1.1; }

/* 2026-10-08: the exact author notice requested by the user. */
.design-credit, .nf-credit.design-credit { margin: 0; max-width: 100%; font-family: inherit; font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; white-space: normal; }
 .site-footer .footer-legal { padding-bottom: 12px; }
.site-footer .design-credit { padding: 0 var(--gutter) 30px; color: var(--ink-2); text-align: center; }

/* v22: language switch LT | EN — in the header (from 760 px), in the open menu (phones) and above the footer line */
.lang { display: inline-flex; align-items: baseline; gap: 0; font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; }
.lang a { display: inline-block; line-height: 44px; min-height: 44px; padding: 0 7px; color: var(--ink-2); text-decoration: none; transition: color var(--t-fast) ease; }
.lang a[aria-current] { color: var(--ink); }
.lang a:hover, .lang a:active { color: var(--red); }
.lang-sep { color: var(--line-strong); }
.nav-lang { display: none; }
.nav-list .lang a { padding: 0 7px; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; gap: 0; }
.nav-list .lang a::after { display: none; }
.footer-lang { display: flex; justify-content: center; padding-top: 2px; }
@media (max-width: 759px) {
  .js .lang-head { display: none; }
  .js .nav-lang { display: block; }
  .js .nav-list .lang a { padding: 0 12px 0 0; font-size: 1rem; letter-spacing: 0.08em; font-stretch: normal; font-weight: 500; }
  .js .nav-list .lang a + .lang-sep + a { padding-left: 12px; }
}
/* social profiles beside the language switch (footer, open menu) */
.soc { display: inline-flex; align-items: center; margin-left: 12px; padding-left: 8px; border-left: 1px solid var(--line); }
.soc a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink-2); transition: color var(--t-fast) ease; }
.soc a:hover, .soc a:active { color: var(--red); }
.soc .icon { width: 18px; height: 18px; }
.nav-lang { align-items: center; }
.js .nav-list .soc a { padding: 0; }
.js .nav-list .soc a::after { display: none; }
@media (max-width: 759px) { .js .nav-lang { display: flex; } }
/* the narrowest phones: the Facebook button keeps one line — the page name stays for screen readers only */
@media (max-width: 374px) { .fb-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* «Шапка без каши» (rule 18.10, playbook): up to 600 px the bar holds only the logo and the menu button; the phone (a
   large button) and the languages live in the open menu */
.nav-phone { display: none; }
@media (max-width: 600px) {
  .header-phone { display: none; }
  .header-row, .header-actions { gap: 16px; }
  .js .nav-phone { display: block; padding: 18px 0 8px; }
  .js .nav-list .nav-call { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; font-size: 1.15rem; font-weight: 600; font-stretch: normal; letter-spacing: 0.01em; color: #fff; }
  .js .nav-list .nav-call::after { display: none; }
  .js .nav-list .nav-call .icon { width: 20px; height: 20px; }
}
/* the open menu is its own full sheet down to the bottom of the screen: the page never shows under it (rule 15.10) */
@media (max-width: 1239px) { .js .nav-list { height: calc(100svh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; } }

/* «Открытое меню без каши» (rule 18.10, sample vejukai v11): one left-aligned column — the sections, then the language,
   then the call button, then the social icons in a row; groups 24 px apart, no rules between the lower groups */
.nav-soc { display: none; }
@media (max-width: 759px) {
  .js .nav-list .nav-lang, .js .nav-list .nav-phone, .js .nav-list .nav-soc { border-top: 0; }
  .js .nav-lang { display: block; padding-top: 24px; }
  .js .nav-lang .lang a:first-child { padding-left: 0; }
  .js .nav-soc { display: block; padding-top: 24px; }
  .js .nav-soc .soc { margin-left: -12px; padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .js .nav-phone { padding: 24px 0 0; }
}
@media (min-width: 601px) and (max-width: 759px) {
  .js .nav-list .nav-phone { display: none; }
}
/* phones: the header actions are all hidden here (language, phone, request), so their empty box must not take a gap */
@media (max-width: 559px) { .header-actions { display: none; } }

/* the open menu names the social network beside its icon */
.js .nav-list .soc a:has(.soc-name) { width: auto; gap: 10px; padding: 0 12px; justify-content: flex-start; font-size: 1rem; font-weight: 500; color: var(--ink); }
.soc-name { line-height: 1; }

/* ===== v30 (rule 25.10 «Шапка: крупный логотип и ничего лишнего»): on every width the bar holds the whole logo and the
   «Meniu» button only; sections, language, phone and social live in the sheet. The bar is 88/80 px high at the top
   and 72/64 px when it sticks (it is pinned 16 px above the screen edge, so nothing shifts while it settles). No line,
   no shadow under it: it is parted from the page by its own solid ground. ===== */
:root { --header-h: 72px; --logo-h: 56px; }
.site-header { position: sticky; top: -16px; z-index: 60; background: var(--white); border: 0; box-shadow: none; }
.header-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; min-height: 88px; padding-top: 16px; }
.brand { margin-right: auto; }
.brand::before { display: none; }
.brand img { display: block; height: var(--logo-h); width: auto; }
.nav { flex: none; order: 0; display: block; }
.header-actions, .beam { display: none; }
.site-header .nav-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 18px; background: var(--ink); color: #fff; border: 0; border-radius: var(--r-pill); box-shadow: none; font-weight: 560; cursor: pointer; width: auto; justify-content: flex-start; }
.site-header .nav-toggle .mb-l { position: static; width: auto; height: auto; clip: auto; overflow: visible; line-height: 1; }
.site-header .nav-toggle:hover, .site-header .nav-toggle[aria-expanded="true"] { background: var(--red); color: #fff; }
@media (max-width: 1023px) {
  :root { --header-h: 64px; --logo-h: 52px; }
  .header-row { min-height: 80px; }
}
@media (max-width: 599px) {
  :root { --logo-h: clamp(38px, calc((100vw - 120px) / 5.94), 46px); }
  .header-row { gap: 12px; }
  .site-header .nav-toggle { width: 48px; padding: 0; justify-content: center; }
  .site-header .nav-toggle .mb-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* the sheet: its own dark ground from the bar down to the bottom of the screen, never blending with the page */
.js .nav-list { position: fixed; left: 0; right: 0; top: var(--sheet-top, 72px); bottom: 0; height: auto; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: min-content; align-content: start; gap: 0; margin: 0; padding: clamp(12px, 3vh, 36px) var(--gutter) 48px; background: var(--graphite); color: var(--on-dark); overflow-y: auto; overscroll-behavior: contain; box-shadow: none; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity var(--t-fast) ease, transform var(--t-fast) ease, visibility 0s linear var(--t-fast); }
.js .nav-list.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
html.is-menu { overflow: hidden; }
.js .nav-list li, .js .nav-list li + li { border: 0; }
.js .nav-list a { position: static; display: flex; align-items: baseline; gap: 14px; padding: clamp(10px, 1.6vh, 18px) 0; font-family: var(--display); font-weight: 300; font-stretch: normal; font-size: clamp(2rem, 1.3rem + 2.6vw, 4rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--on-dark); text-decoration: none; white-space: nowrap; }
.js .nav-list a::after { display: none; }
.js .nav-list .nav-i { align-self: flex-start; padding-top: 0.5em; font-size: 0.72rem; color: var(--red-on-dark); }
.js .nav-list a:hover, .js .nav-list a:active, .js .nav-list a[aria-current] { color: var(--red-on-dark); }
.js .nav-lang, .js .nav-phone, .js .nav-soc { display: block; padding-top: 28px; }
.js .nav-lang { display: block; }
.js .nav-list .lang { display: inline-flex; align-items: center; margin: 0; }
.js .nav-list .lang a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px 0 0; font-family: var(--mono); font-size: 1rem; font-weight: 500; letter-spacing: 0.1em; color: rgb(255 255 255 / 0.62); }
.js .nav-list .lang a[aria-current] { color: #fff; }
.js .nav-list .lang a:hover { color: var(--red-on-dark); }
.js .nav-list .lang-sep { color: rgb(255 255 255 / 0.3); padding-right: 14px; }
.js .nav-list .nav-call { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 28px; font-family: var(--sans); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.01em; color: #fff; }
.js .nav-list .nav-call .icon { width: 22px; height: 22px; }
.js .nav-soc .soc { display: inline-flex; margin: 0 0 0 -12px; padding: 0; border: 0; }
.js .nav-list .soc a { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; font-family: var(--sans); font-size: 1.05rem; font-weight: 500; letter-spacing: 0; color: #fff; }
.js .nav-list .soc a:hover { color: var(--red-on-dark); }
.js .nav-list .soc .icon { width: 22px; height: 22px; }
@media (min-width: 900px) {
  .js .nav-list { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 120px); padding-top: clamp(24px, 6vh, 72px); }
  .js .nav-list > li:nth-child(1) { grid-column: 1; grid-row: 1; }
  .js .nav-list > li:nth-child(2) { grid-column: 1; grid-row: 2; }
  .js .nav-list > li:nth-child(3) { grid-column: 1; grid-row: 3; }
  .js .nav-list > li:nth-child(4) { grid-column: 1; grid-row: 4; }
  .js .nav-list > li:nth-child(5) { grid-column: 1; grid-row: 5; }
  .js .nav-lang { grid-column: 2; grid-row: 1; align-self: center; padding-top: 0; }
  .js .nav-phone { grid-column: 2; grid-row: 2; align-self: center; padding-top: 0; }
  .js .nav-soc { grid-column: 2; grid-row: 3; align-self: center; padding-top: 0; }
}
/* without scripts the sections stay in a plain row under the logo */
html:not(.js) .header-row { flex-wrap: wrap; }
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .nav { width: 100%; }
html:not(.js) .nav-list { display: flex; flex-wrap: wrap; gap: 4px 22px; position: static; }
html:not(.js) .nav-lang, html:not(.js) .nav-phone, html:not(.js) .nav-soc { display: none; }

.hiring { margin: clamp(14px, 2vw, 22px) 0 0; max-width: 28em; font-size: 1rem; line-height: 1.5; color: rgb(255 255 255 / 0.92); }

/* the open menu's Facebook link: light on the dark sheet (the generic icon-link rule is dark) */
.js .nav-list .soc a:has(.soc-name), .js .nav-list .soc a:has(.soc-name) .soc-name { color: #fff; }
.js .nav-list .soc a:has(.soc-name):hover, .js .nav-list .soc a:has(.soc-name):hover .soc-name { color: var(--red-on-dark); }

/* ===== v33 (owner 26.10: «меню плохо сделано… не выровнено, логотип должен уменьшаться при скролле, должна быть
   тень от меню, сейчас всё сливается с фоном»). The bar is fixed: 96/80 px at the top of the page with the large
   logo, 72/64 px once the page moves, the logo shrinking with it; logo and button sit on the bar's centre line at
   every state. The page keeps its place (body padding), so nothing jumps. A soft shade under the bar parts it from
   the page — a 22 px fade, not a pixel line (the rule against lines stays). ===== */
:root { --bar: 96px; --bar-s: 72px; --header-h: 72px; --logo-h: 58px; --logo-s: 44px; }
body { padding-top: var(--bar); }
.site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--bar); z-index: 60; background: var(--white); transition: height 0.35s var(--ease); }
.site-header.is-scrolled { height: var(--bar-s); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none; background: linear-gradient(rgb(18 18 18 / 0.075), rgb(18 18 18 / 0)); transition: opacity 0.35s ease; opacity: 0.6; }
.site-header.is-scrolled::after { opacity: 1; }
.site-header .header-row { height: 100%; min-height: 0; padding-top: 0; align-items: center; }
.site-header .brand img { height: var(--logo-h); transition: height 0.35s var(--ease); }
.site-header.is-scrolled .brand img { height: var(--logo-s); }
@media (max-width: 1023px) {
  :root { --bar: 84px; --bar-s: 64px; --header-h: 64px; --logo-h: 50px; --logo-s: 40px; }
}
@media (max-width: 599px) {
  :root { --bar: 80px; --bar-s: 64px; --logo-h: clamp(40px, calc((100vw - 120px) / 5.94), 46px); --logo-s: 38px; }
}
html.is-menu .site-header { height: var(--bar-s); }
html.is-menu .site-header .brand img { height: var(--logo-s); }
/* the open sheet starts right under the compact bar */
html.is-menu .site-header, html.is-menu .site-header .brand img { transition: none; }
.js .nav-list { top: var(--bar-s); }
/* the logo stays large while shrinking (rule 25.10: ≥ 52 px on desktop, ≥ 40 px on a phone, also in the sticky bar) */
:root { --logo-h: 64px; --logo-s: 52px; }
@media (max-width: 1023px) { :root { --logo-h: 58px; --logo-s: 48px; } }
@media (max-width: 599px) { :root { --logo-h: 46px; --logo-s: 40px; } }

/* ===== v35 (rules 27–28.10 «Шапка: всё нужное видно сразу, логотип средний»; supersedes v30–v34 for the bar). Bar =
   logo · sections (≥ 1400 px; below that «Meniu» opens the dark sheet) · LT|EN · phone · contact button. The phone shows
   logo · LT|EN · phone icon · menu icon. The bar sticks: it is 80/72/64 px high at the top and 64/60/56 px once the page
   moves, the logo shrinks with it, a 20 px soft fade (not a line) parts it from the page. ===== */
:root { --bar: 80px; --bar-s: 64px; --header-h: 64px; --logo-h: 48px; --logo-s: 42px; }
.site-header { height: var(--bar); }
.site-header.is-scrolled { height: var(--bar-s); }
.site-header::after { height: 20px; }
.site-header .header-row { gap: 16px; }
.site-header .brand { margin-right: auto; }
.site-header .brand img { height: var(--logo-h); }
.site-header.is-scrolled .brand img, html.is-menu .site-header .brand img { height: var(--logo-s); }
.site-header .nav { order: 3; flex: none; display: block; }
.site-header .header-actions { order: 2; display: flex; align-items: center; gap: 16px; flex: none; }
.site-header .lang-head, .js .lang-head { display: inline-flex; }
.site-header .header-phone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0; width: 44px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font-family: var(--display); font-weight: 400; font-size: 1.1rem; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; }
.site-header .header-phone .icon { width: 18px; height: 18px; color: var(--red); align-self: center; }
.site-header .header-phone-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; line-height: 1; }
.site-header .header-cta { display: none; }
.site-header .nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 44px; min-height: 44px; padding: 0; border-radius: 999px; background: var(--ink); color: #fff; box-shadow: none; }
.site-header .nav-toggle .mb-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.site-header .nav-toggle:hover, .site-header .nav-toggle[aria-expanded="true"] { background: var(--red); }
@media (min-width: 760px) {
  :root { --bar: 72px; --bar-s: 60px; --header-h: 60px; --logo-h: 44px; --logo-s: 38px; }
  .site-header .nav-toggle { width: auto; padding: 0 20px 0 16px; }
  .site-header .nav-toggle .mb-l { position: static; width: auto; height: auto; clip: auto; overflow: visible; line-height: 1; }
}
@media (min-width: 900px) {
  .site-header .header-phone { width: auto; padding: 0 4px; box-shadow: none; }
  .site-header .header-phone-text { position: static; width: auto; height: auto; clip: auto; overflow: visible; line-height: 44px; }
  .site-header .header-cta { display: inline-flex; }
}
@media (min-width: 1400px) {
  :root { --bar: 80px; --bar-s: 64px; --header-h: 64px; --logo-h: 48px; --logo-s: 42px; }
  .site-header .brand { margin-right: 0; }
  .site-header .nav { order: 1; flex: 1; display: flex; justify-content: center; }
  .site-header .nav-toggle { display: none; }
  .js .nav-list, .nav-list { position: static; inset: auto; display: flex; flex-wrap: nowrap; gap: 20px; padding: 0; margin: 0; background: none; color: inherit; overflow: visible; visibility: visible; opacity: 1; transform: none; height: auto; transition: none; }
  .js .nav-list > li, .js .nav-list li + li { border: 0; padding: 0; }
  .js .nav-list > li.nav-lang, .js .nav-list > li.nav-phone, .js .nav-list > li.nav-soc { display: none; }
  .js .nav-list a { position: relative; display: flex; align-items: baseline; gap: 5px; padding: 10px 6px; font-family: var(--sans); font-size: 0.98rem; font-weight: 520; letter-spacing: -0.005em; line-height: 1.2; color: var(--ink); white-space: nowrap; }
  .js .nav-list a::after { display: block; content: ""; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 1px; background: var(--laser); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease); }
  .js .nav-list a:hover::after, .js .nav-list a[aria-current]::after { transform: scaleX(1); }
  .js .nav-list .nav-i { align-self: flex-start; padding-top: 2px; font-size: 0.62rem; line-height: 1; color: var(--ink-2); }
  .js .nav-list a:hover, .js .nav-list a:active, .js .nav-list a[aria-current] { color: var(--ink); }
  .js .nav-list a:hover .nav-i, .js .nav-list a[aria-current] .nav-i { color: var(--red); }
}
@media (max-width: 759px) {
  /* phone: logo · LT|EN · phone icon · menu icon on one line, ≥ 10 px apart; the logo takes what is left (28–44 px) */
  :root { --bar: 64px; --bar-s: 56px; --header-h: 56px; --logo-h: clamp(28px, calc((100vw - 2 * var(--gutter) - 56px - 88px - 30px) / 5.94), 40px); --logo-s: max(28px, calc(var(--logo-h) * 0.88)); }
  .site-header .header-row { gap: 10px; }
  .site-header .header-actions { gap: 10px; }
  .site-header .header-phone, .site-header .nav-toggle { width: 40px; min-height: 40px; }
  .site-header .lang-head a { min-height: 40px; padding: 0 5px; font-size: 0.74rem; letter-spacing: 0.04em; }
  .site-header .lang-head .lang-sep { padding: 0; }
}
@media (max-width: 380px) {
  .site-header .header-row { padding-inline: 12px; }
  .js .nav-list { padding-inline: 12px; }
}

/* ===== v36 revision (coordinator 29.10, «каждый блок свой»): hero shows its photos on the first screen; the final screen
   loses the white form card and the round icon plates — fields are underlined on the wall, the phone and e-mail are
   type with a small arrow; text where the review found it small gets 15–16 px. ===== */
.hero-grid { margin-top: clamp(14px, 2.4vw, 30px); gap: clamp(14px, 2vw, 24px); }
.hero-title .lz-t { font-size: min(9.4rem, 11.2cqi); }
.hero-title:lang(en) .lz-t { font-size: min(9.4rem, 9.6cqi); }
.triptych { margin-top: clamp(18px, 2.4vw, 32px); height: clamp(340px, 62svh, 680px); }
@media (max-width: 559px) {
  .hero-actions .btn-line { display: none; }
  .hero-lead { font-size: 1rem; }
  .triptych { height: clamp(300px, 46svh, 420px); }
}
.finale .composer-card { background: transparent; border-radius: 0; box-shadow: none; color: #fff; padding: 0; }
.finale .field > span, .finale .field legend { font-size: 1rem; color: #fff; }
.finale .field em { color: rgb(255 255 255 / 0.7); }
.finale .field input, .finale .field textarea { background: transparent; border: 0; border-bottom: 2px solid rgb(255 255 255 / 0.55); border-radius: 0; color: #fff; padding: 12px 0; font-size: 1.05rem; }
.finale .field input:hover, .finale .field textarea:hover { border-bottom-color: #fff; }
.finale .field input:focus-visible, .finale .field textarea:focus-visible { background: transparent; border-bottom-color: #fff; box-shadow: none; outline: none; }
.finale .field textarea { min-height: 112px; }
.finale .choice span { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.6); }
.finale .choice:hover span { box-shadow: inset 0 0 0 1.5px #fff; }
.finale .choice input:checked + span { background: #fff; color: var(--finale); box-shadow: none; }
.finale .error, .finale .composer-status { color: #fff; }
.finale .composer-note { color: rgb(255 255 255 / 0.82); font-size: 0.92rem; }
.finale .subcontract { background: transparent; color: rgb(255 255 255 / 0.9); padding: 0; font-size: 1rem; }
.finale .crow-go { order: 2; width: auto; aspect-ratio: auto; border-radius: 0; background: transparent; color: #fff; box-shadow: none; opacity: 0.85; }
.finale .crow-mail .crow-go { background: transparent; box-shadow: none; }
.finale .crow-go .icon { width: clamp(22px, 4cqi, 34px); height: auto; aspect-ratio: 1; }
.finale .crow:hover .crow-go { background: transparent; color: #fff; transform: translateX(6px); }
.steel-lead { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); }
.steel-trade p, .steel-access, .about-text p { font-size: 1rem; }
.shot-tag { font-size: 0.8rem; }
@media (min-width: 1000px) { .about-text p { font-size: 1.06rem; } }