/* Archko v7 "Maketas" — white model, black poché, one red section line.
   Display: Bai Jamjuree, text: Golos Text, labels: Chivo Mono. All OFL, self-hosted subsets. */
@font-face { font-family: "Bai Jamjuree"; src: url("fonts/baijamjuree-500.woff2?v=26") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bai Jamjuree"; src: url("fonts/baijamjuree-600.woff2?v=26") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archko Text"; src: url("fonts/golostext.woff2?v=26") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Chivo Mono"; src: url("fonts/chivomono.woff2?v=26") format("woff2"); font-weight: 300 600; font-display: swap; }

@property --p { syntax: "<percentage>"; inherits: true; initial-value: 100%; }

:root {
  --paper: #F2F2EF;
  --white: #FFFFFF;
  --ink: #111111;
  --ink-2: #4A4A43;
  --hair: #CFCFC8;
  --black: #0E0E0E;
  --on-black: #EDEDE8;
  --on-black-2: #9B9B95;
  --hair-d: #2C2C2A;
  --red: #D42A1E;
  --red-ink: #B4241A;
  --on-red: #FFFFFF;
  --on-red-2: #FFF1EF;
  --f-d: "Bai Jamjuree", "Archko Text", system-ui, sans-serif;
  --f-t: "Archko Text", system-ui, sans-serif;
  --f-m: "Chivo Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --gut: clamp(20px, 4vw, 64px);
  --maxw: 1520px;
  --rail: max(var(--gut), (100% - var(--maxw)) / 2); /* side inset of the .wrap rail; % = the full-width container, unlike vw it excludes the scrollbar */
  --sec: clamp(96px, 12vw, 200px);
  --vel: 0;
}

*, *::before, *::after { box-sizing: border-box; }
/* no blue flash on tap (user, 2026-10-05): a pressed control shows its own :active state */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scrollbar-color: var(--ink) var(--paper); }
body { margin: 0; font-family: var(--f-t); font-size: 1.125rem; line-height: 1.6; font-weight: 400; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--red); overflow-x: clip; }
::selection { background: var(--red); color: #fff; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 500; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; }
.cq { container-type: inline-size; min-width: 0; }
.mono { font-family: var(--f-m); font-size: .8rem; font-weight: 400; letter-spacing: .02em; line-height: 1.5; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; transition: top .3s var(--ease); }
.skip:focus { top: 12px; }
.arr { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .5s var(--ease); flex: none; }

/* ------------------------------------------------------------ display type: fitted to the column (--lw = widest word in em) */
.xh { position: relative; display: block; width: fit-content; max-width: 100%; font-family: var(--f-d); font-size: min(var(--fs), calc(100cqi / var(--lw))); line-height: 1.12; text-wrap: balance; }
.xh--hero { --fs: clamp(2.7rem, 7.4vw, 9rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; }
.xh--h2 { --fs: clamp(2.4rem, 5.8vw, 6.6rem); font-weight: 600; letter-spacing: -.02em; }
.xh--card { --fs: clamp(1.35rem, 2vw, 2.15rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.16; }
.xh--name { --fs: clamp(1.35rem, 1.9vw, 2rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.16; }
.xh--stmt { --fs: 8rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.xh--lines .xl { display: block; white-space: nowrap; }

/* heading rule: the section line passes left to right, the heading appears behind it */
.xh::after, .xh--lines .xl::after { content: ""; position: absolute; top: .02em; bottom: .02em; left: var(--p); width: 2px; margin-left: -2px; background: var(--red); opacity: 0; pointer-events: none; }
.xh--lines::after { display: none; }
.xh--lines .xl { position: relative; }
.js .xh:not(.xh--lines):not(.done):not(.xh--static), .js .xh--lines:not(.done) .xl { --p: 0%; clip-path: inset(-.3em calc(100% - var(--p)) -.3em -.3em); }
.js .xh.in:not(.xh--lines):not(.done), .js .xh--lines.in:not(.done) .xl { animation: xcut .75s var(--ease-io) both; }
.js .xh--lines.in:not(.done) .xl { animation-delay: calc(var(--i) * 140ms); }
.js .xh.in:not(.xh--lines):not(.done)::after, .js .xh--lines.in:not(.done) .xl::after { animation: xline .75s var(--ease-io) both; }
.js .xh--lines.in:not(.done) .xl::after { animation-delay: calc(var(--i) * 140ms); }
@keyframes xcut { from { --p: 0%; } to { --p: 100%; } }
@keyframes xline { 0% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
.js:not(.app-ready) .xh, .js:not(.app-ready) .xh .xl { animation: show-x 0s 2.6s forwards; }
@keyframes show-x { to { clip-path: none; } }

/* photo rule: a section plane passes top to bottom, its red cut line rides the edge */
.cutin { display: block; position: relative; overflow: hidden; background: #E4E4DF; }
.cutin img { width: 100%; height: 100%; object-fit: cover; }
.js .cutin { clip-path: inset(0 0 100% 0); }
.js .cutin.in { clip-path: inset(0 0 0 0); transition: clip-path 1.15s var(--ease-io); }
.cutin::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); opacity: 0; pointer-events: none; }
.js .cutin.in:not(.done)::after { animation: cut-line 1.15s var(--ease-io) forwards; }
@keyframes cut-line { 0% { top: 0; opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } }
.js:not(.app-ready) .cutin { animation: show-cut 0s 2.6s forwards; }
@keyframes show-cut { to { clip-path: inset(0 0 0 0); } }

/* ------------------------------------------------------------ links, buttons, chips */
.link { position: relative; font-weight: 600; padding-bottom: 2px; transition: color .3s; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .6s var(--ease); }
.link:hover { color: var(--red-ink); }
.link:hover::after { transform: scaleX(0); }
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; padding: 15px 22px 15px 26px; border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--paper); font-weight: 600; font-size: .95rem; line-height: 1.1; cursor: pointer; transition: color .4s var(--ease), border-color .4s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:hover { border-color: var(--red); color: #fff; }
.btn:hover .arr { transform: translateX(5px); }
.btn--light { background: transparent; border-color: rgba(237, 237, 232, .5); color: var(--on-black); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--ink::before { background: var(--white); }
.btn--ink:hover { color: var(--ink); border-color: var(--white); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--hair); border-radius: 0; background: transparent; font-size: .88rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------ header */
/* one quiet bar from the first frame (user, 2026-10-05: no gradient, no bar appearing later): paper over a soft blur of
   what passes below, a hairline under it; dark and red sections only change its colour */
.hdr { position: fixed; inset: 0 0 auto; z-index: 60; color: var(--ink); transition: color .45s var(--ease); }
/* the bar is a layer of its own: a backdrop-filter on .hdr would trap the fixed menu inside the bar's box */
.hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(242, 242, 239, .93); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); transition: background .45s var(--ease), opacity .3s var(--ease); } /* v36: no 1 px rule under the sticky bar (rule «шапка без каши»): the edge is the change of ground */
/* v39 (rule 27–28.10: «языки, меню и телефон сразу видны, логотип средний, при стике уменьшается, тень под липкой»): desktop ≥ 1280 —
   logo · nav · LT|EN · phone · contact button on one centre line; below — logo · LT|EN · phone icon · «Meniu»; phone the same, smaller logo.
   Logo 160 px = 54 px tall on top, 124 px = 42 px when stuck (−22 %); bar 84 → 58 px; soft 22 px shade under the stuck bar, never a 1 px line */
.hdr__in { --logo-w: 160px; display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; padding: 15px 0; transition: padding .45s var(--ease); } /* the .wrap rail (one rail rule) */
.hdr[data-tone="dark"] { color: var(--on-black); }
.hdr[data-tone="dark"]::before { background: rgba(14, 14, 14, .95); }
.hdr[data-tone="red"] { color: #fff; }
.hdr[data-tone="red"]::before { background: var(--red); }
.brand { display: inline-flex; flex-direction: column; margin-right: auto; padding-bottom: calc(var(--logo-w) * .1035); } /* the box holds the whole logo (≥ 52 px desktop, ≥ 40 px phone) */
/* the mark box ends at the baseline of R C H K O (69.4 % of the logo height), so the flex baseline is the lettering's;
   the dashed axis and the foot of the A hang below it, inside the brand padding. Logo 172 px wide: 58 px tall, capitals ≈ 18 px */
.brand__mark { display: block; height: calc(var(--logo-w) * .2348); }
.brand .logo { width: var(--logo-w); height: auto; transition: width .45s var(--ease); }
.logo { width: 128px; height: auto; }
/* v36: first screen ≈ 80 px (logo 140, tagline), sticky after scrolling ≈ 62 px (tagline folds away, logo intact) */
.hdr.is-stuck .hdr__in { --logo-w: 124px; padding: 8px 0; }
.hdr::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; background: linear-gradient(rgba(10, 10, 10, .16), rgba(10, 10, 10, 0)); pointer-events: none; opacity: 0; transition: opacity .45s var(--ease); }
.hdr.is-stuck::after { opacity: 1; }
.hdr.menu-open::after { opacity: 0; }
.langs { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--f-m); font-size: .9rem; font-weight: 500; }
.langs i { font-style: normal; opacity: .4; }
.langs__cur { padding: 8px 0; } /* the current language is plain ink, the other one is the link */
.lang { font-family: var(--f-m); font-size: .9rem; font-weight: 500; padding: 8px 0; color: var(--ink-2); }
.hdr[data-tone="dark"] .lang { color: var(--on-black-2); }
.hdr[data-tone="red"] .lang { color: rgba(255, 255, 255, .8); }
.lang:hover { color: var(--red); }
.hdr[data-tone="red"] .lang:hover { color: var(--ink); }
.nav { display: none; }
.nav ul { display: flex; gap: clamp(22px, 2.4vw, 40px); }
.nav a { position: relative; font-size: 1.02rem; font-weight: 500; padding: 8px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 0; border-top: 1px dashed var(--red); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); } /* the drawing's dashed axis under the item on hover (not a bar rule) */
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr[data-tone="red"] .nav a::after { border-color: #fff; }
.call { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 44px; height: 44px; border: 1px solid currentColor; font-size: .98rem; font-weight: 600; white-space: nowrap; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.call svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.call__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.call:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hdr[data-tone="dark"] .call:hover { background: var(--on-black); border-color: var(--on-black); color: var(--black); }
.hdr__cta { display: none; position: relative; isolation: isolate; overflow: hidden; align-items: center; padding: 14px 22px; background: var(--red); color: #fff; font: 600 .86rem/1 var(--f-m); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: color .4s var(--ease); }
.hdr__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); }
.hdr__cta:hover::before, .hdr__cta:focus-visible::before { transform: scaleY(1); }
.hdr[data-tone="red"] .hdr__cta { background: #fff; color: var(--red-ink); }
.hdr[data-tone="red"] .hdr__cta:hover { color: #fff; }
@media (min-width: 1280px) {
  .nav { display: block; margin-left: clamp(8px, 3vw, 56px); margin-right: auto; }
  .call { width: auto; padding: 0 18px; }
  .call__t { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  .hdr__cta { display: inline-flex; }
  .burger { display: none; }
  .brand { margin-right: 0; }
}
@media (max-width: 1279px) { .hdr__in > .langs { margin-left: auto; } .brand { margin-right: 0; } }
/* pressed: fill in place */
.burger:active { color: var(--red); }
.hdr[data-tone="dark"] .burger:active, .hdr[data-tone="red"] .burger:active { color: inherit; opacity: .7; }
.btn:active::before { transform: scaleX(1); transition-duration: .2s; }
.lang:active, .menu ul a:active { color: var(--red); }
/* menu button: two lines come together into a cross while the menu is open and part when it closes; the label follows */
.burger { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: 600 .95rem/1 var(--f-t); white-space: nowrap; } /* v37: three equal lines, no ring (FIRST_TIME_RIGHT B1); the label is the word «Meniu» */
.ic-menu { display: block; width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: butt; }
.ic-menu path { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease-io); }
.burger[aria-expanded="true"] .mb-a { transform: translateY(6px) rotate(45deg); }
.ic-menu .mb-c { transition: transform .5s var(--ease-io); }
.burger[aria-expanded="true"] .mb-c { transform: translateY(-6px) rotate(-45deg); }
.ic-menu .mb-b { transition: opacity .25s var(--ease); }
.burger[aria-expanded="true"] .mb-b { opacity: 0; }
.mb-l { display: inline-grid; }
.mb-l > span { grid-area: 1 / 1; transition: opacity .3s var(--ease), transform .45s var(--ease); }
.mb-close { opacity: 0; transform: translateY(.5em); }
.burger[aria-expanded="true"] .mb-open { opacity: 0; transform: translateY(-.5em); }
.burger[aria-expanded="true"] .mb-close { opacity: 1; transform: none; }
.menu { position: fixed; inset: 0; z-index: -1; background: var(--paper); color: var(--ink); padding: 120px max(var(--gut), (100% - var(--maxw)) / 2) 40px; display: flex; flex-direction: column; justify-content: flex-start; gap: 28px; overflow-y: auto; } /* v36: one left column — items, the language right under them, the phone button, the mail */
.menu[hidden] { display: none; }
.menu ul { display: grid; max-width: 720px; } /* v37: on wide screens the rows stop at the column, not at the far edge */
.menu ul a { display: block; font-family: var(--f-d); font-size: clamp(1.8rem, 8vw, 3.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.menu ul li:last-child a { border-bottom: 0; }
.menu__foot { display: grid; justify-items: start; gap: 24px; }
.menu__soc { display: flex; gap: 16px; }
.menu__soc a { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 0; }
.menu__soc svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.menu__soc a:active { background: rgba(21, 21, 21, .1); }
.menu__tel { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px 16px 22px; border: 1px solid currentColor; border-radius: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.menu__tel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.menu__tel:active { background: rgba(21, 21, 21, .1); }
.menu__lang { font-size: 1.05rem; padding: 6px 0; }
.hdr.menu-open { color: var(--ink); }
.hdr.menu-open::before { opacity: 0; }

/* ------------------------------------------------------------ scene: the white model + the object tour */
/* overflow: clip (not hidden: no scroll container, the sticky stage still pins): the stage's negative margin let it hang
   a whole screen below the scene over the next sections (user, 2026-10-05: „здесь съехало“) */
.scene { position: relative; background: var(--paper); overflow: clip; }
.scene__stage { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; z-index: 0; }
.scene__c { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__c { opacity: 0; transition: opacity .5s var(--ease); }
.no-js .scene__c, .scene.no-gl .scene__c { display: none; }
.scene.is-ready .scene__c { opacity: 1; }
.scene.no-gl .scene__fade, .scene.no-gl .scene__pins { display: none; }
/* „Stogas“ first screen: the offer on its own paper field (5 of 12 columns, a hairline edge), the model beside it —
   no white fade under the text (judge, concept round 1) */
/* one paper field on the left for the whole first screen and the tour (judge: an information field and a model field,
   no card floating over the scene); the cards of the tour pass through it, the model flies on the right */
.scene__field { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: calc(var(--rail) + (100% - 2 * var(--rail)) * .42); background: var(--paper); box-shadow: 1px 0 0 var(--ink); pointer-events: none; transition: opacity .5s var(--ease); }
.scene__hero { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 110px 0 clamp(40px, 8vh, 96px); pointer-events: none; }
.hero__in { width: calc(42% - clamp(24px, 3vw, 48px)); pointer-events: auto; }
.hero__t { margin-bottom: clamp(18px, 2.6vh, 32px); }
.hero__lead { margin: 0 0 clamp(20px, 3vh, 32px); font-size: clamp(1.05rem, 1.25vw, 1.15rem); line-height: 1.55; color: var(--ink); }
.hero__kick { margin: 0 0 clamp(12px, 2vh, 22px); color: var(--red-ink); }
.hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hero__tel { font-family: var(--f-d); font-weight: 600; font-size: clamp(1.3rem, 1.7vw, 1.7rem); letter-spacing: -.01em; white-space: nowrap; }
.hero__tel:hover { color: var(--red); }
/* title block (spaudas) of a drawing sheet: hairline rows, monospace keys */
.sheet { display: grid; margin: 12px 0 16px; } /* v30 (user: «везде в таких местах убери самую верхнюю линию и самую нижнюю»): lists and tables keep only the rules between rows */
.sheet > div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.sheet > div:last-child { border-bottom: 0; }
.sheet dt { font-family: var(--f-m); font-size: .92rem; line-height: 1.45; color: var(--ink-2); }
.sheet dd { margin: 0; font-size: 1.06rem; line-height: 1.4; }
/* hierarchy: the first row (the object) in the display face, the rest one quiet level */
@media (max-width: 1099px) { .hero__tel { display: inline-block; } }
/* the paper of a far jump covers the model field only (right of the information field) */
.scene__fade { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transform-origin: 62% 50%; } /* far jump: the old view dissolves into the new one */
.scene__pins { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); }
.scene.on-tour .scene__pins { opacity: 1; }
/* the note of a lifted roof: a hairline leader up and to the right from the opened atrium, a mono label */
.roofnote { position: absolute; left: 0; top: 0; z-index: 1; margin: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.roofnote i { position: absolute; left: 0; bottom: 0; width: 64px; height: 64px; border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); transform: translate(0, 0); }
.roofnote i::after { content: ""; position: absolute; left: -3px; bottom: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.roofnote span { position: absolute; left: 70px; bottom: 64px; padding: 5px 9px; white-space: nowrap; font-size: .9rem; color: var(--ink); background: rgba(242, 242, 239, .94); transform: translateY(50%); }
.roofnote--l i { left: auto; right: 0; border-left: 0; border-right: 1px solid var(--ink); }
.roofnote--l i::after { left: auto; right: -3px; }
.roofnote--l span { left: auto; right: 70px; }
@media (max-width: 760px) { .roofnote span { white-space: normal; width: 150px; font-size: .74rem; } }
.scene.no-gl .roofnote { display: none; }
.pin3 { position: absolute; left: 0; top: 0; display: flex; align-items: center; transform-origin: left center; will-change: transform; }
.pin3 b { display: grid; place-items: center; min-width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0 5px; background: var(--red); color: #fff; font: 500 .72rem/1 var(--f-m); box-shadow: 0 0 0 2px var(--paper); }
.pin3 i { font: 600 .88rem/1 var(--f-t); font-style: normal; margin: -13px 0 0 6px; padding: 6px 9px; background: var(--ink); color: #fff; white-space: nowrap; clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--ease); }
.pin3.on i { clip-path: inset(0 0 0 0); }
.pin3--quiet i { display: none; }
.pin3.on b { background: var(--ink); }
.pin3--a b { background: var(--ink); }
.pin3--l i { order: -1; margin: -13px 6px 0 0; }
.pin3--l b { margin: -13px 0 0 0; }
/* the red stem stands on the object's roof (the anchor) and holds the number 40 px above it */
.pin3::before { content: ""; position: absolute; left: -1px; top: -40px; width: 2px; height: 40px; background: var(--red); }
.pin3 b, .pin3 i { position: relative; top: -53px; }
.pin3.pin3--l::before { left: auto; right: 12px; } /* the stem stays under the number when the label opens to the left */
/* v25: a readable project list on one hairline rail; the active project carries the red segment (judge: the loose numbers read as debug) */
.scene__nav { position: absolute; left: calc(var(--rail) + (100% - 2 * var(--rail)) * .42 + 22px); bottom: clamp(28px, 5vh, 56px); z-index: 3; opacity: 0; transition: opacity .6s var(--ease); } /* v27: bottom left of the model field; the active mark sits on the paper field's edge line */
.scene.on-tour .scene__nav, .scene__nav:focus-within { opacity: 1; }
.scene__nav a { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 6px 0; font-size: .98rem; line-height: 1.25; color: var(--ink); white-space: nowrap; transition: color .3s; -webkit-tap-highlight-color: transparent; }
.scene__nav a::before { content: ""; position: absolute; left: -23px; top: 0; bottom: 0; width: 3px; background: var(--red); transform: scaleY(0); transition: transform .45s var(--ease); }
.scene__nav a .mono { font-size: .8rem; color: var(--ink-2); }
.scene__nav a.on { color: var(--ink); font-weight: 600; }
.scene__nav a.on::before { transform: scaleY(1); }
.scene__nav a.on .mono { color: var(--red); }
.scene__nav a:hover { color: var(--red-ink); }
.scene__attr { position: absolute; right: 10px; bottom: 8px; z-index: 3; margin: 0; font-size: .72rem; color: var(--ink-2); }
.stops { --tour-gap: clamp(40px, 5vh, 64px); position: relative; z-index: 2; padding-bottom: var(--tour-gap); pointer-events: none; }
.no-js .stops, .scene.no-gl .stops { background: var(--paper); }
.stop, .stop--r { display: flex; align-items: center; justify-content: flex-start; padding: calc(var(--tour-gap) / 2) var(--rail); }
/* a tour card lives in the paper field: photo, title, title block (spaudas) — no frame, no shadow */
.card { pointer-events: auto; width: calc(42% - clamp(24px, 3vw, 48px)); max-width: 560px; } /* % of the stop's content box = the .wrap rail */
.card__b { padding: 18px 0 0; }
/* v25b: the title and the line first, then the photo (judge: text under the photo broke the composition rule); the photo proportion varies along the tour */
@media (min-width: 761px) {
  .card { display: flex; flex-direction: column; container-type: inline-size; }
  .card__b { display: contents; }
  .card__t { order: 1; }
  .card .card__p { order: 2; margin: 2px 0 18px; }
  .card__ph { order: 3; }
  .card .sheet { order: 4; margin-top: 18px; }
  .card .link { order: 5; align-self: flex-start; }
  .stop:nth-child(3n+2) .card__img { aspect-ratio: 16 / 9; }
  .stop:nth-child(3n) .card__img { aspect-ratio: 5 / 4; }
}
.card__p { margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.card__ph { display: block; }
.card__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #E4E4DF; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.stop[data-slug="palangos-perliukas"] .card__img img { object-position: 50% 38%; } /* v38: the portrait façade in a landscape card keeps the statue's head and the balconies */
.card__ph img { transition: transform 1.2s var(--ease); }
.card__ph:hover img { transform: scale(1.04); }
.card__t { margin-bottom: 8px; }
@media (max-width: 1099px) { .scene__nav { display: none; } .scene__field { width: calc(var(--rail) + (100% - 2 * var(--rail)) * .56); } .hero__in { width: calc(56% - 24px); } .card { width: calc(56% - 24px); } }
@media (max-width: 760px) {
  .hdr__in { --logo-w: 112px; padding: 16px 0; }
  .hdr.is-stuck .hdr__in { --logo-w: 92px; padding: 9px 0; }
  .stop, .stop--r { align-items: flex-start; justify-content: center; padding: 32px var(--rail); min-height: calc(var(--field-frac, .48) * 100svh - 84px); } /* v25b: one card per paper field, the next title never peeks in */
  /* phones: the title over the full width, then the photo beside a compact title block */
  /* phones: the title over the full width, then the photo beside a compact title block */
  .card { width: 100%; max-width: none; display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "t t" "ph s" "ph l"; gap: 8px 14px; }
  .card__b { display: contents; }
  .card__b .card__t { grid-area: t; margin: 0; }
  .card__b .sheet { grid-area: s; align-self: start; }
  .card__b .link { grid-area: l; align-self: end; }
  .card__p { display: none; }
  /* phones: the field is the upper panel of the tour; the model fills the lower part */
  .scene__field { height: calc(var(--field-frac, .48) * 100%); width: 100%; box-shadow: 0 1px 0 var(--ink); opacity: 0; }
  .scene.on-tour .scene__field { opacity: 1; }
  .stops { padding-bottom: max(64px, calc(100svh - var(--tour-last-h, 300px) - 52px)); }
  .scene.is-ready:not(.no-gl) .stops { clip-path: inset(var(--tour-clip-top, 0px) 0 var(--tour-clip-bottom, 0px) 0); }
  .card__ph { grid-area: ph; margin: 10px 0 0; } /* v31 (user: «квадратик фото опусти пониже, чтобы равнялся со словом stadija»): row padding 5 + cap top 4.7 in Chivo Mono */
  .card__img { aspect-ratio: 1; }
  .card .sheet { margin: 0; }
  .card .sheet > div { grid-template-columns: 1fr; gap: 0; padding: 5px 0; }
  .card .link { font-size: .92rem; }
  /* phones: the offer and the phone first, on a paper block with a hairline; the model below it */
  .pin3 { display: none; }
  .scene__hero { justify-content: flex-start; padding-top: 0; }
  .hero__in { width: auto; margin-inline: calc(-1 * var(--gut)); padding: 108px var(--gut) 16px; background: var(--paper); box-shadow: 0 1px 0 var(--ink); }
  .hero__kick { display: none; }
  .hero__t { margin-bottom: 12px; }
  .hero__lead { margin-bottom: 16px; font-size: .95rem; }
  .hero__act { gap: 10px 16px; }
  .hero__tel { font-size: 1.15rem; }
}

/* ------------------------------------------------------------ other projects */
.others { padding: clamp(40px, 6vw, 96px) 0 var(--sec); background: var(--paper); }
.others__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.others__h { grid-column: 1 / -1; color: var(--ink-2); margin-bottom: 8px; }
.otile { grid-column: 1 / 5; display: grid; grid-template-rows: 1fr auto auto; gap: 10px; align-self: stretch; } /* v39: the photo fills the list's height, no void under it */
.otile__ph { min-height: 320px; }
.otile__ph img { height: 100%; object-fit: cover; }
.otile__ph img { transition: transform 1.2s var(--ease); }
.otile:hover .otile__ph img { transform: scale(1.04); }
.otile__k { color: var(--ink-2); }
.otile__t { font-family: var(--f-d); font-weight: 600; font-size: 1.3rem; line-height: 1.2; }
.otile:hover .otile__t { color: var(--red-ink); }
.arch { grid-column: 6 / 13; }
.arch li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.arch li:last-child { border-bottom: 0; }
.arch__t { line-height: 1.4; }
.arch__m { color: var(--ink-2); }
@media (max-width: 900px) { .otile, .arch { grid-column: 1 / -1; } .arch li { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ statement: lines widen as they cross the screen */
.stmt { background: var(--black); color: var(--on-black); padding: var(--sec) 0; overflow: hidden; }
.stmt__k { color: var(--on-black-2); margin-bottom: clamp(24px, 4vw, 56px); }
.stmt__x .xl:nth-child(2) { color: var(--red); }
.stmt__p { max-width: 36em; margin: clamp(32px, 5vw, 72px) 0 0 auto; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.5; color: var(--on-black-2); }

/* ------------------------------------------------------------ case: rehabilitation centre */
.case { background: var(--white); padding: var(--sec) 0 clamp(48px, 7vw, 110px); overflow: hidden; }
.case__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.case__h { grid-column: 1 / -1; margin-bottom: clamp(16px, 3vw, 40px); }
.case__text { grid-column: 1 / 7; font-size: clamp(1.05rem, 1.2vw, 1.15rem); }
.case__side { grid-column: 8 / 13; display: grid; gap: 28px; justify-items: start; }
.spec { margin: 0; width: 100%; }
.spec div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.spec div:last-child { border-bottom: 0; }
.spec dt { font-family: var(--f-m); font-size: .78rem; color: var(--ink-2); padding-top: 3px; }
.spec dd { margin: 0; font-weight: 500; }
@media (max-width: 900px) { .case__text, .case__side { grid-column: 1 / -1; } }

/* strip: drifts by itself, faster towards the edge under the mouse; drag, buttons and keys move it */
.strip { position: relative; margin-top: clamp(48px, 6vw, 96px); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.strip.is-drag { cursor: grabbing; }
.strip__track { display: flex; gap: clamp(12px, 1.4vw, 20px); width: max-content; will-change: transform; }
.strip__i { flex: none; height: clamp(260px, 38vw, 600px); }
.strip__i img { height: 100%; width: auto; max-width: none; pointer-events: none; transform: skewX(calc(var(--sv, 0) * -2deg)); transition: transform .4s var(--ease); }
.strip__b { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; border: 0; border-radius: 0; background: var(--white); cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .4); transition: background .3s var(--ease), color .3s; }
.strip__b svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.strip__b:hover { background: var(--red); color: #fff; }
.strip__b--prev { left: var(--gut); } .strip__b--next { right: var(--gut); }
@media (hover: none) { .strip__b { display: none; } }

/* ------------------------------------------------------------ building under a hill */
.hill { padding: var(--sec) 0; }
.hill__head { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: clamp(36px, 5vw, 72px); }
.hill__head .cq { grid-column: 1 / 8; }
.hill__lead { grid-column: 8 / 13; margin: 0; color: var(--ink-2); }
.cut__frame, .cmp__frame { position: relative; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.cut__frame { background: #fff; padding: clamp(10px, 2vw, 28px) 0; }
.cut__img, .cmp__img { width: 100%; height: auto; }
.cut__sec { position: absolute; inset: clamp(10px, 2vw, 28px) 0; clip-path: inset(0 0 0 var(--cut)); background: #fff; }
.cmp__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cut)); }
.cut__line { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 0; border-left: 2px dashed var(--red); pointer-events: none; z-index: 2; }
.cut__line i { position: absolute; top: 50%; left: -21px; width: 40px; height: 40px; margin-top: -20px; border-radius: 0; background: var(--red); transition: transform .3s var(--ease); }
.cut__line i::before, .cut__line i::after { content: ""; position: absolute; top: 15px; width: 0; height: 0; border: 5px solid transparent; }
.cut__line i::before { left: 5px; border-right: 6px solid #fff; }
.cut__line i::after { right: 5px; border-left: 6px solid #fff; }
.cut__frame:hover .cut__line i, .cmp__frame:hover .cut__line i { transform: scale(1.12); }
.cut__tag { position: absolute; top: 12px; z-index: 3; padding: 6px 10px; border-radius: 0; background: var(--ink); color: #fff; pointer-events: none; }
.cut__tag--f { left: 12px; } .cut__tag--s { right: 12px; background: var(--red); }
.cut__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }
.cut__frame:has(:focus-visible), .cmp__frame:has(:focus-visible) { outline: 2px solid var(--red); outline-offset: 4px; }
/* film "Kalva": a building laminated into a hill, then cut — pinned and scrubbed */
.film { position: relative; height: 260vh; height: 260svh; margin: calc(-1 * clamp(0px, 24svh, 260px)) calc(-1 * var(--gut)) clamp(36px, 5vw, 72px); } /* v39: the stage starts under the heading, no 650 px of empty paper */
.no-js .film { display: none; }
.film__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--paper); }
.film__c { position: absolute; inset: 0; }
.film__steps { position: absolute; left: var(--gut); bottom: clamp(28px, 6vh, 64px); z-index: 1; display: grid; gap: 10px; counter-reset: s; }
.film__steps li { display: flex; align-items: baseline; gap: 14px; font-family: var(--f-d); font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.5rem); line-height: 1.2; color: var(--ink-2); opacity: .45; transition: opacity .5s var(--ease), color .5s var(--ease), transform .7s var(--ease); }
.film__steps li .mono { color: var(--ink-2); }
.film__steps li.on { opacity: 1; color: var(--ink); transform: translateX(10px); }
.film__steps li.on .mono { color: var(--red); }
@media (max-width: 760px) { .film { height: 220vh; height: 220svh; } .film__steps { right: var(--gut); } }
.hill__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(36px, 5vw, 72px); }
.hill__f { margin: 0; }
.hill__f .cutin { aspect-ratio: 3 / 2; }
.hill__f figcaption { margin-top: 10px; color: var(--ink-2); }
.hill__more { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin-top: 28px; color: var(--ink-2); }
@media (max-width: 760px) {
  .hill__head .cq, .hill__lead { grid-column: 1 / -1; }
  .cut { overflow: hidden; }
  .cut__frame { width: 210%; margin-left: -62%; }
  .cut[data-cut] .cut__tag--f { left: 31%; } .cut[data-cut] .cut__tag--s { right: 22%; }
  .hill__pair { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ theatre */
.theatre { background: var(--black); color: var(--on-black); padding: var(--sec) 0; }
.th__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: clamp(36px, 5vw, 72px); }
.th__head .cq { grid-column: 1 / 7; }
.th__text { grid-column: 7 / 13; color: var(--on-black-2); }
.th__meta { margin: 0; max-width: 60ch; }
.cmp .cut__tag--f { background: var(--on-black); color: var(--black); }
.th__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin: clamp(48px, 7vw, 110px) 0; }
.th__f { margin: 0; transform: skewY(calc(var(--vel) * -1deg)); }
.th__f--t1 { grid-column: 1 / 9; } .th__f--t1 .cutin { aspect-ratio: 3 / 2; }
.th__f--t2 { grid-column: 9 / 13; align-self: end; } .th__f--t2 .cutin { aspect-ratio: 3 / 4; }
.th__f--t3 { grid-column: 2 / 7; } .th__f--t3 .cutin { aspect-ratio: 4 / 3; }
.th__f--t4 { grid-column: 7 / 13; margin-top: 8vw; } .th__f--t4 .cutin { aspect-ratio: 16 / 10; }
.th__end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.quote { margin: 0; max-width: min(100%, 15.5em); font-family: var(--f-d); font-size: clamp(1.5rem, 3vw, 3.2rem); line-height: 1.3; font-weight: 500; letter-spacing: -.015em; }
.quote p { margin-bottom: 18px; }
.quote footer { color: var(--on-black-2); font-family: var(--f-m); font-size: .8rem; letter-spacing: .02em; }
.theatre .btn--light:hover { color: #fff; }
.theatre :focus-visible, .stmt :focus-visible, .ftr :focus-visible { outline-color: #FF6A5C; }
@media (max-width: 900px) {
  .th__head .cq, .th__text { grid-column: 1 / -1; }
  .th__f--t1, .th__f--t2, .th__f--t3, .th__f--t4 { grid-column: 1 / -1; margin-top: 0; }
}

/* ------------------------------------------------------------ services */
.services { background: var(--white); padding: var(--sec) 0; }
.services > .wrap > .cq { margin-bottom: clamp(36px, 5vw, 72px); }
.svc:last-child { border-bottom: 0; }
.svc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; padding: clamp(28px, 3.4vw, 52px) 0; border-bottom: 1px solid var(--hair); align-items: start; }
.svc__no { grid-column: 1 / 2; color: var(--red); padding-top: .5em; }
.svc__h { grid-column: 2 / 6; }
.svc__body { grid-column: 6 / 13; }
/* v39: the demo sits under the title, the text on the right — no empty column under the heading */
.svc--demo .svc__h { grid-column: 2 / 7; grid-row: 1; }
.svc--demo .svc__demo { grid-column: 2 / 7; grid-row: 2; }
.svc--demo .svc__body { grid-column: 8 / 13; grid-row: 1 / span 2; }
.dm--types .chips { display: grid; grid-template-columns: 1fr 1fr; }
.svc__body p { margin-bottom: 14px; }
.svc__items { display: grid; gap: 6px; color: var(--ink-2); font-size: .96rem; }
.svc__items li { padding-left: 18px; position: relative; }
.svc__items li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 1px; background: var(--red); }
@media (max-width: 900px) { .svc__no { grid-column: 1 / -1; padding: 0; } .svc__h, .svc__body, .svc--demo .svc__h, .svc--demo .svc__body, .svc--demo .svc__demo, .svc__demo { grid-column: 1 / -1; grid-row: auto; }
  .svc__no { order: 0; } .svc__h { order: 1; } .svc--demo .svc__demo { order: 2; } .svc__body { order: 3; } }
.sw { display: grid; justify-items: start; gap: 14px; width: 100%; }
.sw__frame { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--white); }
.sw__f { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; }
.sw__f.is-on { opacity: 1; visibility: visible; z-index: 1; }
.sw__f.is-entering { z-index: 2; animation: sw-in 1.1s var(--ease-io) forwards; }
@keyframes sw-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sw__img { width: 100%; height: 100%; object-fit: cover; }
.sw__img[src*="variantai"] { object-fit: contain; background: #fff; }
.energy { position: relative; width: 100%; max-width: 520px; }
.energy__bars { display: grid; gap: 5px; }
.energy__bars li { --cl: #2E7D32; height: 34px; width: var(--w); display: flex; align-items: center; padding-left: 12px; color: #fff; font-weight: 600; font-size: .9rem; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); background: var(--cl); transform-origin: left; transform: scaleX(var(--e, 1)); transition: transform .9s var(--ease) calc(var(--k) * 70ms); }
.js .energy:not(.in) .energy__bars li { --e: .08; }
.js:not(.app-ready) .energy__bars li { --e: 1; }
.energy__bars li:nth-child(1) { --cl: #1E6B2E; } .energy__bars li:nth-child(2) { --cl: #2F8A35; } .energy__bars li:nth-child(3) { --cl: #4FA23A; }
.energy__bars li:nth-child(4) { --cl: #8FB536; color: #1C2410; } .energy__bars li:nth-child(5) { --cl: #D6C42E; color: #2A2508; } .energy__bars li:nth-child(6) { --cl: #E8A62C; color: #2A1D06; }
.energy__bars li:nth-child(7) { --cl: #E07A27; } .energy__bars li:nth-child(8) { --cl: #D1491F; } .energy__bars li:nth-child(9) { --cl: #B5231B; }
.energy__arrow { position: absolute; right: 0; top: 0; height: 34px; display: flex; align-items: center; padding: 0 12px 0 24px; background: var(--ink); color: #fff; font-weight: 500; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); transform: translateY(calc(var(--ea, 0) * 1px)); transition: transform 1.4s var(--ease) .5s; }
.js .energy:not(.in) .energy__arrow { --ea: 312; }
.energy__bars li { cursor: pointer; transition: opacity .35s var(--ease), transform .9s var(--ease), filter .35s var(--ease); }
.energy__bars li:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.energy:has(.is-sel) .energy__bars li:not(.is-sel) { opacity: .78; }
.energy__arrow { right: auto; left: min(calc(var(--sw, 34%) + 8px), calc(100% - 68px)); top: calc(var(--sel, 0) * 39px); transition: transform 1.4s var(--ease), top .5s var(--ease), left .5s var(--ease); }
.js .energy:not(.in) .energy__arrow { --ea: 0; opacity: 0; }
.energy .energy__arrow { opacity: 1; }
/* v39 demos: one drawn sheet per service — layers, elevations, steps (thin ink lines, the red axis of the drawings) */
.dm { display: grid; gap: 18px; width: 100%; max-width: 520px; color: var(--ink); }
.dm__svg { width: 100%; height: auto; display: block; background: var(--white); }
.dm__l, .dm__e { opacity: 0; transition: opacity .5s var(--ease); }
.dm.has-parcel .dm__l--parcel, .dm.has-zones .dm__l--zones, .dm.has-nets .dm__l--nets { opacity: 1; }
.dm[data-state="res"] .dm__e--res, .dm[data-state="adm"] .dm__e--adm, .dm[data-state="shop"] .dm__e--shop, .dm[data-state="ind"] .dm__e--ind { opacity: 1; }
.dm__svg--el { aspect-ratio: 480 / 280; }
.dm__svg--el .dm__e { opacity: 0; } .dm__svg--el { position: relative; }
.dm__axis { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 22px; }
.dm__axis::before { content: ""; position: absolute; left: 8px; right: 8px; top: 29px; border-top: 2px dashed var(--red); }
.dm__n { position: relative; display: grid; justify-items: start; gap: 12px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.dm__n i { width: 15px; height: 15px; border: 2px solid var(--red); background: var(--paper); transition: background .35s var(--ease), transform .35s var(--ease); }
.dm__n[aria-pressed="true"] i { background: var(--red); transform: scale(1.25); }
.dm__n span { font-size: .8rem; transition: color .3s var(--ease); } .dm__n:not([aria-pressed="true"]) span { color: var(--ink-2); }
.dm__txt { position: relative; min-height: 4.6em; }
.dm__t { position: absolute; inset: 0 auto auto 0; margin: 0; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.dm[data-state="c1"] .dm__t--c1, .dm[data-state="c2"] .dm__t--c2, .dm[data-state="c3"] .dm__t--c3 { opacity: 1; transform: none; }

/* ------------------------------------------------------------ team */
.team { background: var(--paper); padding: var(--sec) 0; }
.team .wrap > .cq { margin-bottom: clamp(36px, 5vw, 72px); }
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.person { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.6vw, 36px) 0; border-top: 1px solid var(--hair); }
.person:nth-child(-n+3) { border-top: 0; }
/* portrait: one toned set (ink → paper), small because the 2014 sources are 380 px; it opens with the photo cut */
.person__ph { width: 168px; aspect-ratio: 4 / 5; margin-bottom: 10px; }
.person__ph img { display: block; }
.person__in { display: grid; place-items: center; width: 100%; height: 100%; font: 600 2.6rem/1 var(--f-d); letter-spacing: -.02em; color: var(--ink-2); }
.person__r { color: var(--red-ink); margin: 0; font-size: .85rem; }
.person__d { margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.5; }
.person__c { display: grid; gap: 6px; font-size: .92rem; line-height: 1.45; color: var(--ink-2); padding-left: 14px; border-left: 2px solid var(--hair); }
.person__k { display: grid; gap: 6px; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 1.02rem; font-weight: 600; }
.person__k a:hover { color: var(--red-ink); }
.partners { gap: 14px; }
.partners__h { margin: 0; color: var(--ink-2); font-weight: 400; font-size: .85rem; }
.partners ul { display: grid; gap: 0; }
.partners li { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.partners li:last-child { border-bottom: 0; }
.partners li .mono { color: var(--ink-2); }
@media (max-width: 1099px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } .person:nth-child(3) { border-top: 1px solid var(--hair); } }
@media (max-width: 760px) {
  .people { grid-template-columns: 1fr; }
  .person:nth-child(2) { border-top: 1px solid var(--hair); }
  .person__ph { width: 132px; }
}

/* ------------------------------------------------------------ contact: the red field */
.contact { background: var(--red); color: var(--on-red); padding: var(--sec) 0; }
.contact__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; align-items: stretch; }
.contact__main { grid-column: 1 / 8; display: flex; flex-direction: column; }
.contact__lead { max-width: 30em; margin: clamp(18px, 2vw, 28px) 0 clamp(24px, 3vw, 40px); font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: var(--on-red-2); }
.contact__phone { position: relative; display: inline-block; font-family: var(--f-d); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; font-size: min(5.6rem, calc(100cqi / var(--lw))); padding-bottom: 6px; }
.contact__phone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.contact__phone:hover::after { transform: scaleX(1); }
.contact__mails { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 18px 0 28px; font-size: 1.1rem; font-weight: 500; }
.contact__mails a { border-bottom: 1px solid rgba(255, 255, 255, .5); }
.contact__mails a:hover { border-color: #fff; }
.contact__dl { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: auto 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .35); }
.contact__dl dt { color: var(--on-red-2); margin-bottom: 4px; }
.contact__dl dd { margin: 0; }
.contact__dl a { text-decoration: underline; text-underline-offset: 3px; }
.form { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 18px; }
.form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__row { display: grid; gap: 6px; }
.form label { font-family: var(--f-m); font-size: .76rem; color: var(--on-red-2); }
.form input, .form select, .form textarea { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .6); border-radius: 0; background: transparent; color: #fff; outline: none; transition: border-color .3s; }
.form select { appearance: none; -webkit-appearance: none; padding-right: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") right 2px center / 18px no-repeat; cursor: pointer; }
.form select option { color: var(--ink); }
.form textarea { resize: none; min-height: 48px; overflow: hidden; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: #fff; box-shadow: 0 1px 0 #fff; }
.form [aria-invalid="true"] { border-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.form__err { font-size: .85rem; color: var(--ink); font-weight: 600; margin: 4px 0 0; }
.form .btn { align-self: flex-start; margin-top: 6px; }
.form__note { font-size: .85rem; color: var(--on-red-2); margin: auto 0 0; }
.form__status { font-weight: 600; margin: 0; min-height: 1.4em; }
.contact :focus-visible { outline-color: #fff; }
@media (max-width: 900px) { .contact__main, .form { grid-column: 1 / -1; } }
@media (max-width: 520px) { .form__pair, .contact__dl { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ footer: one centred composition */
.ftr { background: var(--black); color: var(--on-black-2); padding: clamp(48px, 6vw, 80px) 0 36px; font-size: .9rem; }
.ftr__in { display: grid; justify-items: center; gap: 28px; text-align: center; }
.ftr__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px clamp(28px, 4vw, 64px); color: var(--on-black); }
.ftr__logo .logo { width: 140px; }
.ftr__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(18px, 2vw, 32px); }
.ftr__nav a:hover, .ftr .lang:hover { color: var(--red); }
.ftr__soc { display: inline-flex; align-items: center; gap: 8px; }
.ftr__soc svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.ftr__legal { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1100px; padding-top: 22px; border-top: 1px solid var(--hair-d); font-family: var(--f-m); font-size: .74rem; line-height: 1.6; }
.ftr__legal li { padding: 0 14px; border-left: 1px solid var(--hair-d); }
.ftr__legal li:first-child { border-left: 0; }
.ftr__legal a { color: var(--on-black); text-decoration: underline; text-underline-offset: 3px; }
.ftr__legal a:hover { color: #fff; }
@media (max-width: 760px) { .ftr__legal { display: grid; gap: 4px; } .ftr__legal li { border-left: 0; } }

/* ------------------------------------------------------------ project page */
/* v37 (rule «текст не ложится на фото», no scrim over photos): the cover photo is bright and whole, the title stands on its own black field under it */
.ph { --phh: max(420px, 62vh); --phh: max(420px, 62svh); position: relative; background: var(--black); color: var(--on-black); overflow: hidden; }
.ph__frame { position: relative; height: var(--phh); margin: 0; overflow: hidden; }
.ph__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.js .ph__frame { clip-path: inset(62% 0 38% 0); }
.js .ph.is-open .ph__frame { clip-path: inset(0 0 0 0); transition: clip-path 1.25s var(--ease-io) .42s; }
.js .ph.is-open.fast .ph__frame { transition-duration: .25s; transition-delay: 0s; }
.ph__axis { position: absolute; left: 0; right: 0; top: calc(var(--phh) * .62); height: 0; border-top: 2px dashed var(--red); transform: scaleX(0); transform-origin: left; pointer-events: none; z-index: 2; }
.js .ph.is-open .ph__axis { animation: axis 1.9s var(--ease) forwards; }
.js .ph.is-open.fast .ph__axis { animation-duration: .3s; }
@keyframes axis { 0% { transform: scaleX(0); opacity: 1; } 24% { transform: scaleX(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.no-js .ph__axis { display: none; }
.js:not(.app-ready) .ph__frame { animation: show-cut 0s 2.6s forwards; }
.ph__copy { position: relative; padding: clamp(28px, 3vw, 44px) 0 clamp(36px, 5vw, 72px); }
.ph__crumb { display: flex; gap: 18px; margin-bottom: 20px; color: var(--on-black-2); }
.ph__crumb a::before { content: "← "; }
.ph__crumb a:hover { color: #fff; }
.ph__h { max-width: 16em; margin-bottom: 16px; }
.ph__sub { color: var(--on-black-2); margin: 0; }
.ph__crumb, .ph__sub { transition: opacity 1s var(--ease) 1s, transform 1s var(--ease) 1s; }
.js .ph:not(.is-open) :is(.ph__crumb, .ph__sub) { opacity: 0; transform: translateY(12px); }
.js:not(.app-ready) :is(.ph__crumb, .ph__sub) { animation: show-o .6s 2.6s forwards; }
@keyframes show-o { to { opacity: 1; transform: none; } }
.nw { white-space: nowrap; }
@media (max-width: 760px) { .ph { --phh: max(320px, 58vh); --phh: max(320px, 58svh); } .ph__copy { padding-bottom: 28px; } }
.pinfo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: var(--sec) 0 calc(var(--sec) * .6); }
.spec--page { grid-column: 1 / 6; }
.pinfo__text { grid-column: 7 / 13; }
.pinfo__text p { font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.6; max-width: 38em; }
.pinfo__text p:first-child { font-family: var(--f-d); font-size: clamp(1.3rem, 1.9vw, 1.9rem); line-height: 1.38; font-weight: 500; }
@media (max-width: 900px) { .spec--page, .pinfo__text { grid-column: 1 / -1; } }
.glist { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); padding-bottom: var(--sec); }
.g { grid-column: span 6; margin: 0; }
.g--0 { grid-column: 1 / -1; } .g--1 { grid-column: span 7; } .g--2 { grid-column: span 5; margin-top: 8vw; } .g--3 { grid-column: 2 / span 5; } .g--4 { grid-column: span 6; }
.g__b { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #E2E2DE; cursor: zoom-in; }
.g__b img { transition: transform 1.2s var(--ease); }
.g__b:hover img { transform: scale(1.03); }
/* v39: a two-photo gallery is two equal halves (no hole, no photo stretched past its resolution) */
@media (min-width: 761px) { .glist:has(.g:nth-child(2):last-child) .g { grid-column: span 6; margin-top: 0; } }
@media (max-width: 760px) { .g, .g--0, .g--1, .g--2, .g--3, .g--4 { grid-column: 1 / -1; margin-top: 0; } }
.drawings { padding: 24px 0 var(--sec); }
.drawings__h, .credits__h { color: var(--ink-2); margin-bottom: 18px; font-weight: 400; }
.drw { margin: 0 0 32px; background: #fff; padding: clamp(16px, 3vw, 40px); }
.drw figcaption { margin-top: 12px; color: var(--ink-2); }
.credits { padding: 24px 0 var(--sec); }
.credits ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.credits a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.credits a:hover { color: var(--red-ink); }
/* v37: the next project is a type-only band (its cover is the next page's first screen — one photo, one place; no dimmed photo under text) */
.next { position: relative; display: block; padding: clamp(56px, 9vw, 140px) 0; overflow: hidden; color: var(--on-black); background: var(--black); }
.next__in { display: grid; gap: 14px; }
.next__k { display: inline-flex; align-items: center; gap: 12px; color: var(--on-black-2); }
.next__t { display: block; transition: color .4s var(--ease); }
.next:hover .next__t { color: var(--red); }

/* ------------------------------------------------------------ lightbox */
.lb { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 10, 10, .97); color: var(--on-black); }
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: transparent; }
.lb__fig { margin: 0; display: grid; gap: 12px; justify-items: center; padding: 70px 84px 60px; max-height: 100vh; }
.lb__img { max-width: 100%; max-height: calc(100vh - 170px); width: auto; height: auto; object-fit: contain; }
.lb__cap { font-size: .92rem; color: var(--on-black-2); text-align: center; max-width: 70ch; margin: 0; }
.lb__x { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border: 1px solid var(--on-black-2); border-radius: 0; background: transparent; cursor: pointer; }
.lb__x i { position: absolute; left: 13px; right: 13px; top: 22px; height: 1.5px; background: var(--on-black); }
.lb__x i:first-child { transform: rotate(45deg); } .lb__x i:last-child { transform: rotate(-45deg); }
.lb__nav { position: absolute; top: 50%; margin-top: -26px; width: 52px; height: 52px; border: 1px solid var(--on-black-2); border-radius: 0; background: transparent; cursor: pointer; display: grid; place-items: center; transition: background .3s var(--ease), border-color .3s; }
.lb__nav:hover, .lb__x:hover { background: var(--red); border-color: var(--red); }
.lb__nav svg { width: 22px; height: 22px; fill: none; stroke: var(--on-black); stroke-width: 1.6; }
.lb__prev { left: 18px; } .lb__next { right: 18px; }
.lb__count { position: absolute; left: 24px; top: 28px; margin: 0; font-family: var(--f-m); font-size: .82rem; }
@media (max-width: 760px) { .lb__fig { padding: 70px 14px 90px; } .lb__nav { top: auto; bottom: 18px; margin: 0; } }

/* ------------------------------------------------------------ 404: the section plane cuts the number
   black poché behind the red line, the outline of the white model beyond it; it plays once and rests */
.nf { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: 140px 0 clamp(48px, 8vh, 96px); }
.nf__num { position: relative; display: inline-block; margin: 0 0 clamp(28px, 5vh, 56px); font: 600 clamp(8rem, 30vw, 26rem)/.8 var(--f-d); letter-spacing: -.03em; }
.nf__o { display: block; color: transparent; -webkit-text-stroke: max(1px, .005em) var(--ink); }
.nf__f { position: absolute; inset: 0; color: var(--ink); clip-path: inset(-10% 42% -10% -10%); }
.nf__line { position: absolute; top: -8%; bottom: -8%; left: 58%; width: 2px; background: var(--red); }
.js .nf__f { animation: nf-cut 1.8s var(--ease-io) .35s both; }
.js .nf__line { animation: nf-line 1.8s var(--ease-io) .35s both; }
@keyframes nf-cut { from { clip-path: inset(-10% 100% -10% -10%); } }
@keyframes nf-line { from { left: 0; } }
.nf__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px clamp(32px, 6vw, 120px); padding-top: clamp(20px, 3vh, 32px); border-top: 1px solid var(--ink); }
.nf__t { display: grid; justify-items: start; gap: 18px; max-width: 34em; }
.nf__t[lang="en"], .nf-en .nf__t[lang="lt"], .nf__call .mono[lang="en"], .nf-en .nf__call .mono[lang="lt"] { display: none; }
.nf-en .nf__t[lang="en"] { display: grid; }
.nf-en .nf__call .mono[lang="en"] { display: inline; }
.nf__h { margin: 0; font: 600 clamp(1.8rem, 3.4vw, 3rem)/1.05 var(--f-d); letter-spacing: -.02em; }
.nf__p { margin: 0; color: var(--ink-2); }
.nf__call { display: grid; gap: 10px; justify-items: end; text-align: right; }
.nf__call .mono { color: var(--red-ink); font-size: .85rem; }
.nf__call b { font: 600 clamp(2rem, 5.2vw, 4.4rem)/1 var(--f-d); letter-spacing: -.02em; white-space: nowrap; transition: color .35s var(--ease); }
.nf__call:hover b { color: var(--red); }
@media (max-width: 760px) {
  .nf__row { grid-template-columns: 1fr; }
  .nf__call { justify-items: start; text-align: left; }
}

/* 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; }

@media (min-width: 1280px) { .burger { display: none; } } /* v39: the bar carries the nav from 1280 px; the burger takes over below */