/* =========================================================
   Emmpire Forest — "Dirbtuvė po tamsa" / workshop in the dark
   v50 — warm-dark void, three typographic voices, flat elevation.

   Fused from two references:
   · ORYZO      — warm-dark canvas, a lone object floating in it,
                  cream-not-white type, dashed hairline dividers,
                  a single accent that earns its rarity.
   · Origin Fin.— three-voice type (serif display 300 / sans UI / mono data),
                  display line-height 0.9, elevation by surface step not shadow,
                  one high-contrast primary action, glass sticky nav,
                  one inverted light band to break the dark rhythm.
   ========================================================= */

:root{
  /* --- surfaces: elevation by colour step, never by shadow --- */
  --void:      #100C08;   /* 0 · page canvas — warm near-black */
  --void-2:    #171310;   /* 1 · banded section, one step up */
  --surface:   #241C15;   /* 2 · elevated solid, media wells */
  --surface-2: #2F251C;   /* 3 · hover / pressed */
  --inverted:  #E8E2D6;   /* 4 · the single light band */

  /* --- type colours: never pure white --- */
  --cream:    #F4EADA;    /* headings, primary text */
  --cream-2:  #A79C8C;    /* body copy, descriptions */
  --cream-3:  #9E9384;    /* muted labels — AA 4.5:1 on void/void-2/surface */
  --on-light: #1A140E;    /* text inside the inverted band */

  /* --- the one accent: gold is a signal, not a decoration --- */
  --gold:     #C9A227;    /* monogram, data signals, dimension lines */
  --gold-lt:  #E4C766;    /* gold as text on dark */
  --gold-ink: #6E5410;    /* gold that passes contrast on the light band */

  /* --- lines --- */
  --rule:     #372E24;
  --rule-2:   #4A3F32;
  --rule-field: #7A6B55;  /* interactive borders — 3:1 non-text contrast */
  --rule-lt:  #C3BCAD;    /* rules inside the inverted band */
  --rule-lt-field: #7F7568; /* interactive borders on the light band — 3:1 */

  /* --- three voices --- */
  --font-display: "IBM Plex Serif", Georgia, serif;
  --font-sans:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --t-mono: 0.6875rem;                              /* 11px uppercase labels */
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;                               /* 18px subhead, weight 300 */
  --t-lg:   clamp(2rem, 1.1rem + 3vw, 3.25rem);     /* 32 → 52px */
  --t-xl:   clamp(3rem, 1.2rem + 7.2vw, 6rem);      /* 48 → 96px */

  --track-label: 0.18em;                            /* widest tracking in the system */

  /* --- space --- */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --band-y: clamp(5rem, 10vw, 8.75rem);
  --wrap:   1200px;
  --rail:   0px;

  /* --- radius: milled edge, not a web app --- */
  --r-btn:  8px;
  --r-card: 16px;
  --r-pill: 999px;

  --ease:  cubic-bezier(.22,.61,.36,1);
  --ease-slow: cubic-bezier(.455,.03,.515,.955);    /* Origin's atmospheric curve */
}

@media (min-width: 1180px){ :root{ --rail: 96px; } }

*,*::before,*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
section[id], footer[id]{ scroll-margin-top: 84px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  background: var(--void);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }

:focus-visible{ outline: 2px solid var(--gold-lt); outline-offset: 3px; }
.band--light :focus-visible{ outline-color: var(--gold-ink); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background: var(--cream); color: var(--void);
  padding:.75rem 1.25rem; border-radius: var(--r-btn);
  font: 500 var(--t-sm)/1 var(--font-mono);
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------- layout primitives ---------- */
.wrap{
  width:100%; max-width: var(--wrap);
  margin-inline:auto; padding-inline: var(--gutter);
}
.band{
  padding-block: var(--band-y);
  padding-left: var(--rail);
  position: relative;
  background: var(--void);
}
.band--sunk  { background: var(--void-2); }
.band--light { background: var(--inverted); color: var(--on-light); }

/* dashed hairline is the only divider in the system */
.band + .band{ border-top: 1px dashed var(--rule); }
.band--light + .band, .band + .band--light{ border-top-color: transparent; }

/* =========================================================
   TYPE — three voices
   ========================================================= */
h1,h2,h3{
  font-family: var(--font-display);
  font-weight: 300;                 /* never bold the display */
  margin: 0;
  text-wrap: balance;
}
h1{ font-size: var(--t-xl); line-height: .9; letter-spacing: -0.028em; }
h2{ font-size: var(--t-lg); line-height: .95; letter-spacing: -0.02em; }
h3{ font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.012em; }
h1 em, h2 em{ font-style: italic; }   /* editorial tension inside one headline */
p{ margin: 0; }

/* Sekcijos etiketė („050 UŽKLAUSA"). Sąmoningai stipresnė už kitas mono
   etiketes: 13px vietoj 11 ir 500 vietoj 400. Tai vienintelis orientyras,
   pagal kurį skaitytojas supranta, kurioje puslapio vietoje yra, todėl jai
   leidžiama skambėti garsiau nei mygtukų ar duomenų užrašams.
   Dydis rašomas tiesiogiai, o ne per --t-mono: tas kintamasis aptarnauja ir
   mygtukus, ir matmenų juostą, ir juos padidinti nereikia. */
.eyebrow{
  display:flex; align-items:center; gap:.75rem;
  margin:0 0 1.5rem;
  font: 500 .8125rem/1 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--cream-2);
}
/* Numeriai (010, 020, …) yra matmenų juostos kairėje atkartojimas — jie
   turi prasmę tik tada, kai ta juosta matoma. Žemiau 1180px juostos nėra,
   todėl numeriai neturėtų į ką rodyti; slepiame juos kartu su ja. */
.eyebrow-no{
  display:none;
  padding: .45rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(244,234,218,.09);
  border: 1px solid rgba(244,234,218,.16);
  color: var(--cream-2);
  letter-spacing: .1em;
}
.band--light .eyebrow{ color:#665D50; }
.band--light .eyebrow-no{
  background: rgba(26,20,14,.06);
  border-color: rgba(26,20,14,.16);
  color: var(--on-light);
}

.section-head{ max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-sub{
  margin-top: 1.5rem;
  font-size: var(--t-md);
  font-weight: 300;
  line-height: 1.5;
  color: var(--cream-2);
  max-width: 36rem;
}
.band--light .section-sub{ color:#5B5245; }

/* =========================================================
   BUTTONS — one high-contrast primary, everything else recedes
   ========================================================= */
.btn{
  --btn-bg: transparent;
  --btn-fg: var(--cream);
  --btn-bd: rgba(244,234,218,.45);
  display:inline-flex; align-items:center; gap:.6rem;
  min-height: 46px;
  padding: .75rem 1.25rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-btn);
  font: 400 var(--t-sm)/1 var(--font-sans);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn::after{ content:'→'; font-family: var(--font-mono); }
.btn-solid{ --btn-bg: var(--cream); --btn-fg: var(--void); --btn-bd: var(--cream); }
.btn-solid:hover{ --btn-bg:#fff; --btn-bd:#fff; }
.btn-ghost:hover{ --btn-bd: var(--cream); }
.band--light .btn-solid{ --btn-bg: var(--on-light); --btn-fg: var(--inverted); --btn-bd: var(--on-light); }

/* =========================================================
   HEADER — frosted glass over the void
   ========================================================= */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  isolation: isolate;
  transition: background .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header::before{
  content:''; position:absolute; inset:-1px 0 -40px 0; z-index:-1;
  background: linear-gradient(to bottom, rgba(16,12,8,.92) 0%, rgba(16,12,8,.6) 55%, transparent 100%);
  transition: opacity .35s var(--ease);
  pointer-events:none;
}
.site-header.scrolled::before{ opacity:0; }
.site-header.scrolled{
  background: rgba(16,12,8,.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom-color: var(--rule);
}
.header-inner{
  max-width: var(--wrap); margin-inline:auto;
  padding: .9rem var(--gutter);
  display:flex; align-items:center; gap: clamp(1rem, 3vw, 2.5rem);
}

.logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex-shrink:0; }
/* <picture> must not become a flex item — otherwise the mark stops aligning */
.logo picture, .footer-logo picture{ display:contents; }
.logo-mark-img{ width: 26px; height:auto; }
.logo-text{ display:flex; flex-direction:column; line-height:1; }
.logo-line1{ font-family: var(--font-display); font-size:1.05rem; font-weight:400; color: var(--cream); }
.logo-line2{
  font: 400 .5625rem/1 var(--font-mono);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); margin-top:.32rem;
}

.main-nav{ display:flex; gap: clamp(.9rem, 2vw, 1.75rem); margin-left:auto; }
.main-nav a{
  font: 400 var(--t-sm)/1 var(--font-sans);
  text-decoration:none;
  color: var(--cream-2);
  display:inline-flex; align-items:center; min-height:44px;
  padding: .5rem 0;
  border-bottom: 1px dashed transparent;
  transition: color .2s ease, border-color .2s ease;
}
.main-nav a:hover{ color: var(--cream); border-bottom-color: var(--rule-2); }

.header-right{ display:flex; align-items:center; gap: clamp(.75rem, 2vw, 1.25rem); }

.lang-switch{ display:flex; gap:.1rem; }
.lang-switch button{
  background:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px;
  padding:.4rem .6rem;
  font: 400 var(--t-mono)/1 var(--font-mono);
  letter-spacing:.1em; text-transform: uppercase;
  color: var(--cream-3);
  transition: color .2s ease;
}
.lang-switch button:hover{ color: var(--cream-2); }
.lang-switch button.active{ color: var(--cream); }

.nav-cta{ min-height: 40px; padding: .55rem 1rem; }
/* Tiesioginis skambutis rodomas tik telefone — kompiuteryje numeris jau
   yra poraštėje, o antraštėje jis tik triukšmautų. */
.main-nav .nav-mail{ display:none; }   /* specifiškiau nei .main-nav a */

.nav-toggle{
  display:none; position:relative;      /* brūkšniai dedami absoliučiai */
  width:44px; height:44px;
  background: rgba(244,234,218,.08);
  border:1px solid rgba(244,234,218,.18);
  border-radius: var(--r-btn);
  cursor:pointer; padding:0; place-items:center;
}
/* =========================================================
   BURGER → KRYŽIUS
   Perrašyta tiesiai iš pateikto Lottie failo (600x600, 60 fps,
   0–78 kadrai), o ne „iš akies". Bibliotekos nereikia: visą judesį
   sudaro mastelis, poslinkis, posūkis ir horizontalus suspaudimas —
   viską moka pats CSS.

   ORIGINALO LAIKO JUOSTA
     ScaleCTRL (visa trijulė): 100% → f13 105% → f27 80% (laikoma)
                               → f58 75% → f72 100%
     Line01/03: f15–f24 suvažiuoja į centrą, f24–f32 pasisuka iki ∓48°
                (persisukimas), f32–f37 nusėda ties ∓45°
     Line02: f1–f20 „Trim Paths" nukerpa liniją iš abiejų galų į tašką
             (todėl čia scaleX, o ne permatomumas — originale linija
             susitraukia, o ne išblunka)

   Atidarymas = kadrai 0–37 (617 ms), uždarymas = 47–78 (517 ms).
   Kadrai perskaičiuoti į procentus žemiau esančiuose @keyframes.
   Linijos poslinkis 6px atitinka originalo 30,5 vienetų, perskaičiuotų
   pagal mūsų 18px liniją (30,5 × 18 / 106,5 ≈ 5,2px; suapvalinta).
   ========================================================= */
.burger{ position:absolute; inset:0; display:block; transform: scale(1); }
.burger i{
  position:absolute; left:50%; top:50%;
  display:block; width:18px; height:2px;
  border-radius:2px;                 /* originalo lc:2 = apvalūs galai */
  background: var(--cream);
  transform-origin: 50% 50%;
}
/* --dir: viršutinė ir apatinė linijos yra veidrodinės, tad viena
   kreivių aibė aptarnauja abi */
.burger i:nth-child(1){ --dir: -1; transform: translate(-50%,-50%) translateY(-6px); }
.burger i:nth-child(2){ transform: translate(-50%,-50%) scaleX(1); }
.burger i:nth-child(3){ --dir:  1; transform: translate(-50%,-50%) translateY(6px); }

/* `is-armed` uždedamas per pirmą paspaudimą: be jo uždarymo animacija
   nuskambėtų iškart įkėlus puslapį, nors niekas nieko neuždarinėjo. */
.nav-toggle.is-armed .burger  { animation: ef-burger-scale-close .517s cubic-bezier(.33,0,.67,1) forwards; }
.nav-toggle.is-armed .burger i:nth-child(1),
.nav-toggle.is-armed .burger i:nth-child(3){ animation: ef-burger-bar-close .517s cubic-bezier(.33,0,.67,1) forwards; }
.nav-toggle.is-armed .burger i:nth-child(2){ animation: ef-burger-mid-close .517s cubic-bezier(.33,0,.67,1) forwards; }

.nav-toggle.is-armed[aria-expanded="true"] .burger  { animation: ef-burger-scale-open .617s cubic-bezier(.33,0,.67,1) forwards; }
.nav-toggle.is-armed[aria-expanded="true"] .burger i:nth-child(1),
.nav-toggle.is-armed[aria-expanded="true"] .burger i:nth-child(3){ animation: ef-burger-bar-open .617s cubic-bezier(.33,0,.67,1) forwards; }
.nav-toggle.is-armed[aria-expanded="true"] .burger i:nth-child(2){ animation: ef-burger-mid-open .617s cubic-bezier(.33,0,.67,1) forwards; }

@keyframes ef-burger-scale-open{      /* f0 → f13 → f27 → f37 */
  0%    { transform: scale(1); }
  35.1% { transform: scale(1.05); }
  73%   { transform: scale(.8); }
  100%  { transform: scale(.8); }
}
@keyframes ef-burger-bar-open{        /* f15 → f24 → f32 → f37 */
  0%,
  40.5% { transform: translate(-50%,-50%) translateY(calc(var(--dir) * 6px)) rotate(0deg); }
  64.9% { transform: translate(-50%,-50%) rotate(0deg); }
  86.5% { transform: translate(-50%,-50%) rotate(calc(var(--dir) * 48deg)); }
  100%  { transform: translate(-50%,-50%) rotate(calc(var(--dir) * 45deg)); }
}
@keyframes ef-burger-mid-open{        /* f1 → f20 */
  0%,
  2.7%  { transform: translate(-50%,-50%) scaleX(1); }
  54.1% { transform: translate(-50%,-50%) scaleX(0); }
  100%  { transform: translate(-50%,-50%) scaleX(0); }
}

@keyframes ef-burger-scale-close{     /* f45 → f58 → f72 */
  0%    { transform: scale(.8); }
  35.5% { transform: scale(.75); }
  80.6% { transform: scale(1); }
  100%  { transform: scale(1); }
}
@keyframes ef-burger-bar-close{       /* f47 → f52 → f60 → f69 */
  0%    { transform: translate(-50%,-50%) rotate(calc(var(--dir) * 45deg)); }
  16.1% { transform: translate(-50%,-50%) rotate(calc(var(--dir) * 48deg)); }
  41.9% { transform: translate(-50%,-50%) rotate(0deg); }
  71%,
  100%  { transform: translate(-50%,-50%) translateY(calc(var(--dir) * 6px)) rotate(0deg); }
}
@keyframes ef-burger-mid-close{       /* f58 → f78 */
  0%,
  35.5% { transform: translate(-50%,-50%) scaleX(0); }
  100%  { transform: translate(-50%,-50%) scaleX(1); }
}

@media (max-width: 980px){
  .nav-toggle{ display:grid; }
  .nav-cta{ display:none; }
  /* .main-nav čia iškrenta iš srauto (position:fixed), tad jo margin-left:auto
     nustoja veikti ir .header-right prilipdavo prie logotipo. Stumiame patį
     .header-right į dešinį kraštą — mygtukas atsiduria po nykščiu. */
  .header-right{ margin-left:auto; }
  /* MENIU ATSIVĖRIMAS
     Anksčiau visas nepermatomas skydas atslinkdavo iš viršaus — didelis
     plotas, judantis vienu gabalu, atrodė kaip užkritęs langas.

     Dabar meniu ne atslenka, o IŠSIVYNIOJA: clip-path nukerpa jį apačioje ir
     riba nubėga žemyn, tarsi būtų ištraukiama juosta. Skydas stovi vietoje —
     juda tik kirpimo riba, todėl fono blur nešokinėja.

     Turinys pasirodo ne kartu su skydu, o pakopomis (žr. transition-delay
     žemiau): akis spėja perbėgti nuorodas nuo viršaus žemyn. Vėlavimai
     surašyti pagal MATOMĄ eilę, o ne DOM tvarką — meniu elementus perstato
     `order`, todėl nth-child skaičiai ir vėlavimai nesutampa tyčia. */
  .main-nav{
    position:fixed; inset: 64px 0 auto 0;
    flex-direction: column; gap:0;
    background: rgba(16,12,8,.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-block: 1px solid var(--rule);
    padding: .5rem var(--gutter) 1.25rem;
    transform:none;
    clip-path: inset(0 0 100% 0);
    /* uždarytas meniu neturi gaudyti nei bakstelėjimų, nei klaviatūros */
    visibility: hidden;
    transition:
      clip-path .44s var(--ease),
      visibility 0s .44s;
  }
  .main-nav.open{
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path .44s var(--ease), visibility 0s;
  }

  .main-nav > *{
    opacity:0; transform: translateY(-8px);
    transition: opacity .28s ease, transform .32s var(--ease);
    transition-delay: 0s;      /* užsidarant pakopų nereikia — visi kartu */
  }
  .main-nav.open > *{ opacity:1; transform:none; }
  /* nth-child = DOM eilė: 1–5 nuorodos, 6 el. paštas, 7 kalbos, 8 mygtukas.
     Vėlavimai parinkti taip, kad ATSIRASTŲ matoma tvarka: nuorodos, mygtukas,
     paštas, kalbos. */
  .main-nav.open > *:nth-child(1){ transition-delay: .08s; }
  .main-nav.open > *:nth-child(2){ transition-delay: .11s; }
  .main-nav.open > *:nth-child(3){ transition-delay: .14s; }
  .main-nav.open > *:nth-child(4){ transition-delay: .17s; }
  .main-nav.open > *:nth-child(5){ transition-delay: .20s; }
  .main-nav.open > *:nth-child(8){ transition-delay: .24s; }   /* mygtukas */
  .main-nav.open > *:nth-child(6){ transition-delay: .28s; }   /* el. paštas */
  .main-nav.open > *:nth-child(7){ transition-delay: .31s; }   /* kalbos */

  .main-nav a{ padding: 1rem 0; border-bottom:1px dashed var(--rule); color: var(--cream); }

  /* Meniu turinio tvarka nustatoma čia, o ne DOM'e: pagrindinis veiksmas,
     tada el. paštas, tada kalbos. Taip JS gali tiesiog prikabinti elementus
     meniu gale, o eiliškumas lieka apgalvotas. */
  .main-nav .nav-cta{
    order:1;
    display:inline-flex; justify-content:center;
    margin-top:1.5rem;
    min-height:54px; padding:.9rem 1.25rem;
    border-bottom:1px solid var(--cream);      /* ne brūkšninė nuorodų linija */
    color: var(--btn-fg);                      /* .main-nav a nuspalvintų kremu ant kremo */
    font-size: var(--t-base);
    letter-spacing:.01em;
  }
  .main-nav .nav-mail{
    order:2;
    display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    margin-top:.75rem;
    min-height:48px; padding:.75rem 1.25rem;
    border:1px solid var(--rule-2); border-radius: var(--r-btn);
    color: var(--cream-2); text-decoration:none;
    font: 400 var(--t-sm)/1 var(--font-mono); letter-spacing:.12em;
  }
  .main-nav .nav-mail svg{ width:15px; height:15px; fill: var(--gold); flex:0 0 auto; }
  .main-nav .nav-mail:hover{ color: var(--cream); border-color: var(--rule-field); }

  /* kalbų eilutė meniu apačioje — trys vienodo pločio mygtukai;
     paskutinės nuorodos brūkšninė linija juos ir atskiria */
  .main-nav .lang-switch{ order:3; gap:.5rem; padding-top:1.25rem; }
  .main-nav .lang-switch button{
    flex:1;
    border:1px solid var(--rule-2);
    border-radius: var(--r-btn);
    color: var(--cream-2);
  }
  .main-nav .lang-switch button.active{
    color: var(--void);
    background: var(--cream);
    border-color: var(--cream);
  }
}

/* =========================================================
   EDGE MARKS — dimension rail (left) + serial label (right)
   ========================================================= */
.dim-rail{
  display:none;
  position: fixed; left:0; top:0; bottom:0; width: var(--rail);
  z-index: 150;
  padding-block: 22vh;
  flex-direction: column; justify-content: space-between;
  pointer-events:none;
}
@media (min-width: 1180px){ .dim-rail{ display:flex; } .eyebrow-no{ display:inline-block; } }
.dim-rail-line{
  position:absolute; left:36px; top:22vh; bottom:22vh;
  width:1px;
  background: repeating-linear-gradient(to bottom, var(--rule) 0 5px, transparent 5px 10px);
}
.dim-tick{
  position:relative; pointer-events:auto;
  display:flex; align-items:center; min-height:44px;
  padding-left:36px; text-decoration:none;
  font: 400 var(--t-mono)/1 var(--font-mono);
  letter-spacing:.14em;
  color: var(--cream-3);
  transition: color .3s ease;
}
.dim-tick i{
  position:absolute; left:36px; top:50%;
  width:10px; height:1px; background: currentColor;
  transform: translateY(-50%);
  transition: width .35s var(--ease), height .3s ease;
}
.dim-tick b{ font-weight:400; padding-left:22px; }
.dim-tick em{
  position:absolute; left:58px; top:calc(50% + 6px);
  font-style:normal; font-size:.5625rem; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s ease;
  white-space:nowrap;
}
.dim-tick:hover{ color: var(--cream-2); }
.dim-tick:hover em, .dim-tick.is-current em{ opacity:.7; transform:none; }
.dim-tick.is-current{ color: var(--gold-lt); }
.dim-tick.is-current i{ width:26px; height:2px; background: var(--gold); }

/* rail inverts inside the light band */
body.rail-dark .dim-tick{ color:#665D50; }
body.rail-dark .dim-tick:hover{ color: var(--on-light); }
body.rail-dark .dim-tick.is-current{ color: var(--gold-ink); }
body.rail-dark .dim-tick.is-current i{ background: var(--gold-ink); }
body.rail-dark .dim-rail-line{
  background: repeating-linear-gradient(to bottom, var(--rule-lt) 0 5px, transparent 5px 10px);
}

/* serial stamp on the right edge — like a mark on the back of a cabinet */
.serial-mark{
  display:none;
  position: fixed; right: 20px; top: 50%; z-index:150;
  transform: translateY(-50%) rotate(90deg); transform-origin: right center;
  font: 400 .5625rem/1 var(--font-mono);
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--cream-3);
  pointer-events:none; white-space:nowrap;
}
@media (min-width: 1180px){ .serial-mark{ display:block; } }
body.rail-dark .serial-mark{ color:#665D50; }

/* =========================================================
   HERO — a lone object floating in warm darkness
   ========================================================= */
.hero{ position:relative; height: 250vh; background: var(--void); }
.hero-pin{
  position: sticky; top:0;
  height: 100svh; min-height: 560px;
  overflow:hidden;
  display:grid; grid-template-rows: 1fr auto; row-gap: 1.5rem;
  padding: clamp(5.5rem,10vh,8rem) var(--gutter) clamp(2.25rem,5vh,3.25rem);
  padding-left: max(var(--gutter), var(--rail));
}
.hero-canvas-wrap{ position:absolute; inset:0; }
/* Miškas dabar matomas, o ne vien nuojauta.
   Anksčiau nuotrauka buvo prislopinta dvigubai — ir pačiu filtru
   (brightness .22), ir permatomumu (.5), — todėl fone likdavo beveik
   vien tamsa. Dabar ji šviesesnė ir mažiau nuspalvinta pilkai, kad
   matytųsi eglės, kaip pradiniame ekrane.

   Tekstas skaitomas ne dėl to, kad viskas tamsu, o dėl atskiro
   „šešėlio" po juo (žr. ::after gradientą iš kairės): fonas gali būti
   šviesus ten, kur teksto nėra. */
.hero-canvas-wrap::before{
  content:''; position:absolute; inset:0;
  background: url('../assets/img/bg-forest.jpg') center/cover no-repeat;
  background-image: image-set(
    url('../assets/img/bg-forest.webp') type('image/webp'),
    url('../assets/img/bg-forest.jpg') type('image/jpeg'));
  filter: grayscale(.42) brightness(.46) contrast(1.06) sepia(.3);
  opacity:.78;
}
.hero-canvas-wrap::after{
  content:''; position:absolute; inset:0;
  background:
    /* šiltas atšvaitas ties modeliu — nepakito */
    radial-gradient(58% 48% at 50% 46%, rgba(201,162,39,.09) 0%, transparent 70%),
    /* skaitymo šešėlis: tamsu ten, kur guli antraštė (kairėje), ir
       skaidru dešinėje, kur miškas gali likti matomas */
    linear-gradient(to right, rgba(16,12,8,.82) 0%, rgba(16,12,8,.55) 32%, rgba(16,12,8,.12) 62%, transparent 100%),
    /* vinjetė — atlaisvinta, kad kraštai nebeužsidarytų beveik juodai */
    radial-gradient(125% 96% at 50% 44%, transparent 34%, rgba(16,12,8,.42) 74%, rgba(16,12,8,.8) 100%),
    /* viršus po antrašte ir apačia po skiriamąja linija */
    linear-gradient(to bottom, rgba(16,12,8,.7) 0%, rgba(16,12,8,.06) 42%, rgba(16,12,8,.88) 100%);
}
/* Telefone tekstas užima visą plotį, todėl šešėlis iš kairės uždengdavo
   visą miško nuotrauką. Čia jį keičiame horizontalia juosta: tamsu tik
   ten, kur guli antraštė, o virš ir po ja eglės lieka matomos. */
@media (max-width: 860px){
  .hero-canvas-wrap::before{
    filter: grayscale(.36) brightness(.54) contrast(1.06) sepia(.28);
    opacity:.86;
  }
  .hero-canvas-wrap::after{
    background:
      radial-gradient(70% 40% at 50% 44%, rgba(201,162,39,.08) 0%, transparent 72%),
      linear-gradient(to bottom,
        rgba(16,12,8,.74) 0%,
        rgba(16,12,8,.24) 15%,
        rgba(16,12,8,.26) 24%,
        rgba(16,12,8,.72) 36%,
        rgba(16,12,8,.74) 58%,
        rgba(16,12,8,.20) 71%,
        rgba(16,12,8,.34) 84%,
        rgba(16,12,8,.9) 100%),
      radial-gradient(140% 90% at 50% 44%, transparent 42%, rgba(16,12,8,.3) 80%, rgba(16,12,8,.62) 100%);
  }
}
#heroCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.hero-grid{
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(to right, rgba(201,162,39,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201,162,39,.09) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(62% 52% at 50% 45%, #000 20%, transparent 76%);
  mask-image: radial-gradient(62% 52% at 50% 45%, #000 20%, transparent 76%);
}
.hero-vignette{ display:none; }

/* min-width:0 — grid vaikas pagal nutylėjimą negali susitraukti siauriau nei
   jo ilgiausias nedalomas žodis (min-width:auto). Ilgesnėse kalbose antraštė
   dėl to išlįsdavo už telefono ekrano, o .hero-pin (overflow:hidden) tekstą
   nukirpdavo. Su min-width:0 blokas laisvai siaurėja iki ekrano pločio. */
.hero-content{ position:relative; z-index:5; align-self:center; max-width:52rem; min-height:0; min-width:0; }
/* saugiklis: joks vienas žodis niekada neišlįs už ekrano, kad ir kokia
   kalba ar formuluotė čia atsirastų ateityje */
.hero-title{ color: var(--cream); overflow-wrap: break-word; }
.hero-sub{
  margin-top: 1.75rem; max-width: 28rem;
  font-size: var(--t-md); font-weight:300; line-height:1.5;
  color: var(--cream-2);
}
.hero-footer{
  position:relative; z-index:5; min-width:0;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
  border-top: 1px dashed var(--rule);
  padding-top: 1.25rem;
}
.assembly{ display:flex; flex-direction:column; gap:.65rem; }
.assembly-bar{
  position:relative; height:2px; background: rgba(244,234,218,.2);
  width: clamp(160px, 22vw, 280px);
}
.assembly-bar i{
  position:absolute; inset:0 auto 0 0; width:0%;
  background: var(--gold);
  transition: width .18s linear;
}
.assembly-readout{
  font: 400 var(--t-mono)/1 var(--font-mono);
  letter-spacing: var(--track-label); text-transform:uppercase;
  color: var(--gold-lt);
}

.hero-loader{
  position:absolute; inset:0; z-index:6;
  display:grid; place-content:center; justify-items:center; gap:1rem;
  background: rgba(16,12,8,.72);
  color: var(--cream-3);
  font: 400 var(--t-mono)/1 var(--font-mono);
  letter-spacing: var(--track-label); text-transform: uppercase;
  transition: opacity .6s var(--ease-slow);
}
.hero-loader.hidden, .card-loader.hidden{ opacity:0; pointer-events:none; }
.loader-ring{
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--rule-2); border-top-color: var(--gold);
  animation: spin 1s linear infinite;
}
.loader-ring.small{ width:18px; height:18px; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* =========================================================
   INTRO
   ========================================================= */
.intro-lede{
  font-family: var(--font-display);
  font-weight:300;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
  max-width: 42rem;
  color: var(--cream);
  text-wrap: pretty;
}
.intro-stats{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px dashed var(--rule);
}
.stat{ padding: 2rem 1.5rem 0 0; display:flex; flex-direction:column; gap:.65rem; }
.stat + .stat{ padding-left:1.5rem; border-left: 1px dashed var(--rule); }
.stat-num{
  font-family: var(--font-mono); font-weight:400;
  font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.75rem);
  letter-spacing:-0.02em; line-height:1;
  color: var(--cream);
}
.stat-label{
  font: 400 var(--t-mono)/1.5 var(--font-mono);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--cream-3); max-width: 14rem;
}

/* =========================================================
   SHOWCASE — object in the void, text flanking
   ========================================================= */
/* Kategorijų tinklelis — lyg medžiagų pavyzdžių lenta.
   Anksčiau tai buvo viena horizontali juosta: telefone ji išeidavo už
   ekrano ir apie tai niekaip nepranešdavo, tad dalis kategorijų likdavo
   nepastebėtos. Dabar matomos visos penkios.

   Telefone — du stulpeliai, o penktoji plytelė užima visą paskutinę
   eilutę (tas pats sprendimas, kaip galerijoje, todėl atrodo savas).
   Nuo 880px — viena eilutė, kurioje kiekviena plytelė pasiima tiek
   pločio, kiek reikia jos pavadinimui: `flex-basis: auto` + `grow`.
   Todėl kompiuteryje joks pavadinimas nesilaužo per kelias eilutes. */
.showcase-tabs{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
/* penkios plytelės = nelyginis skaičius: paskutinė driekiasi per abu stulpelius */
.showcase-tabs > .showcase-tab:last-child:nth-child(odd){ grid-column: 1 / -1; }

.showcase-tab{
  display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;
  min-height:76px; padding:.8rem .9rem;
  background: var(--void-2);
  border:1px solid var(--rule);
  border-radius: var(--r-btn);
  cursor:pointer; text-align:left;
  hyphens: manual;               /* niekada nelaužome žodžio brūkšneliu */
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.showcase-tab:hover{ background: var(--surface); border-color: var(--rule-2); }
.showcase-tab.is-active{ background: var(--surface); border-color: var(--rule-field); }

.tab-index{
  font: 400 var(--t-mono)/1 var(--font-mono);
  letter-spacing: var(--track-label);
  color: var(--cream-3);
}
/* vienintelis auksas plytelėje — aktyvios kategorijos numeris */
.showcase-tab.is-active .tab-index{ color: var(--gold-lt); }

.tab-name{
  font: 400 var(--t-sm)/1.3 var(--font-sans);
  letter-spacing:.01em;
  color: var(--cream-2);
  text-wrap: balance;
}
.showcase-tab.is-active .tab-name{ color: var(--cream); }

@media (min-width: 880px){
  .showcase-tabs{
    display:flex; flex-wrap:nowrap; gap:10px;
  }
  .showcase-tab{ flex:1 1 auto; min-height:0; padding:.85rem 1rem; }
  .tab-name{ white-space:nowrap; }   /* vietos užtenka — laikome vienoje eilutėje */
}

.showcase-stage{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.5fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items:center;
}
@media (max-width: 900px){ .showcase-stage{ grid-template-columns: 1fr; } }

.showcase-viewer{
  position:relative; order:2;
  aspect-ratio: 4/3;
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(201,162,39,.07), transparent 72%),
    var(--surface);
  border-radius: var(--r-card);
  overflow:hidden;
}
#showcaseCanvas{ position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.card-loader{
  position:absolute; inset:0; z-index:4;
  display:grid; place-content:center;
  background: rgba(36,28,21,.8);
  transition: opacity .4s var(--ease);
}
.viewer-hint{
  position:absolute; right:1rem; bottom:.9rem; z-index:3;
  font: 400 .5625rem/1 var(--font-mono);
  letter-spacing: var(--track-label); text-transform:uppercase;
  color: var(--cream-3);
  transition: opacity .3s ease;
}
/* Tik iOS: leidimo paprašyti galima vien iš tikro paspaudimo, todėl
   mygtukas. Android'e jo nėra — jutiklis ten veikia be klausimų. */
.tilt-enable{
  position:absolute; left:1rem; bottom:.9rem; z-index:4;
  min-height:36px; padding:.5rem .85rem;
  background: rgba(16,12,8,.72);
  border:1px solid var(--rule-field);
  border-radius: var(--r-pill);
  color: var(--cream-2);
  font: 400 var(--t-mono)/1 var(--font-mono);
  letter-spacing: var(--track-label); text-transform: uppercase;
  cursor:pointer;
}
.tilt-enable:hover{ color: var(--cream); }
.tilt-enable:disabled{ opacity:.4; cursor:default; }

.showcase-drawing{
  position:absolute; inset:0; z-index:3;
  opacity:0; pointer-events:none;
  transition: opacity .5s var(--ease-slow);
  color: var(--rule-2);
}
.showcase-drawing.is-visible{ opacity:1; }
.showcase-drawing.is-visible + .viewer-hint{ opacity:0; }
.showcase-drawing svg{ width:100%; height:100%; }

.showcase-copy{ order:1; }
.showcase-copy h3{ margin-bottom:1.25rem; color: var(--cream); }
.showcase-copy p{ color: var(--cream-2); font-weight:300; font-size: var(--t-md); line-height:1.5; }
.showcase-points{ list-style:none; margin:2rem 0 0; padding:0; }
.showcase-points li{
  position:relative;
  padding:.85rem 0 .85rem 2.25rem;
  border-top: 1px dashed var(--rule);
  font: 400 var(--t-mono)/1.5 var(--font-mono);
  letter-spacing:.1em; text-transform: uppercase;
  color: var(--cream-2);
}
.showcase-points li::before{
  content:''; position:absolute; left:0; top:1.45rem;
  width:14px; height:1px; background: var(--rule-2);
}

/* =========================================================
   PROCESS
   ========================================================= */
.process-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  border-top: 1px dashed var(--rule);
  position:relative;
}
.process-steps li{
  position:relative;
  padding: 2.25rem 1.5rem 0 0;
  display:flex; flex-direction:column; gap:.85rem;
}
.process-steps li + li{ padding-left:1.5rem; border-left:1px dashed var(--rule); }
.process-steps li::before{
  content:''; position:absolute; left:0; top:-1px; width:22px; height:1px; background: var(--gold);
}
.process-steps li + li::before{ left:-1px; }
.step-index{
  font: 400 var(--t-mono)/1 var(--font-mono);
  letter-spacing: var(--track-label); color: var(--gold-lt);
}
.process-steps h3{ color: var(--cream); }
.process-steps p{ font-size: var(--t-sm); color: var(--cream-2); line-height:1.6; }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-grid{
  display:grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: clamp(2rem, 4vw, 3rem);
}
/* нечётное число фото: последнее занимает всю ширину, чтобы ряд не зиял дырой */
.gallery-item:last-child:nth-child(odd){ grid-column: 1 / -1; aspect-ratio: 16/7; }
.gallery-item{
  position:relative; padding:0; border:0; cursor:pointer;
  background: var(--surface);
  border-radius: var(--r-card);
  aspect-ratio: 5/4;
  overflow:hidden;
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  filter: saturate(.8) brightness(.82) contrast(1.06);
  transition: transform .8s var(--ease-slow), filter .4s ease;
}
.gallery-item:hover img{ transform: scale(1.03); filter: saturate(.95) brightness(.95) contrast(1.02); }
.gallery-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding: 3rem 1.25rem 1.1rem;
  background: linear-gradient(to top, rgba(16,12,8,.92), transparent);
  color: var(--cream);
  font: 400 var(--t-mono)/1.3 var(--font-mono);
  letter-spacing: var(--track-label); text-transform:uppercase;
  text-align:left;
}
@media (max-width: 620px){ .gallery-grid{ grid-template-columns:1fr; } }

/* =========================================================
   TESTIMONIALS — vienintelė šviesi juosta
   Sava atsiliepimų sistema (tinklelis, tuščia būsena, forma) pašalinta:
   atsiliepimai renkami Google profilyje. Liko vienas blokas su dviem
   veiksmais — parašyti ir perskaityti.
   ========================================================= */
.review-google{
  max-width: 44rem;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px dashed var(--rule-lt);
  display:flex; flex-direction:column; align-items:flex-start; gap:1.75rem;
}
.review-google-lede{
  color:#5B5245;
  font-size: var(--t-md); font-weight:300; line-height:1.55;
}
.review-google-actions{ display:flex; flex-wrap:wrap; gap:.75rem; }
/* šviesioje juostoje pilkšva riba per silpna — imame tą pačią, kuri jau
   naudojama laukų kraštams, kad išliktų 3:1 kontrastas */
.band--light .btn-ghost{ --btn-bd: var(--rule-lt-field); --btn-fg: var(--on-light); }
.band--light .btn-ghost:hover{ --btn-bd: var(--on-light); }
.review-google-note{
  font: 400 var(--t-mono)/1.6 var(--font-mono);
  letter-spacing:.06em;
  color:#665D50;
}

/* Sutikimo langelis: pakankamai didelis pirštui ir optiškai lygiuotas
   su tekstu kairėje. Anksčiau tas pats stilius aptarnavo ir atsiliepimų
   formą — jos nebeliko, tad vardas pakeistas į neutralų. */
.form-consent{
  display:flex; align-items:flex-start; gap:.75rem;
  font-size: var(--t-sm); line-height:1.5;
  cursor:pointer;
}
.form-check{
  flex:0 0 auto;
  width:44px; height:44px;
  margin-left:-11px;                   /* tekstas lieka optiškai prie krašto */
  display:grid; place-items:center;
}
.form-consent input[type="checkbox"]{
  width:22px; height:22px; margin:0;
  accent-color: var(--on-light);
  cursor:pointer;
}

/* =========================================================
   BESPOKE
   ========================================================= */
.bespoke-inner{ max-width: 44rem; display:flex; flex-direction:column; align-items:flex-start; gap:1.75rem; }
.bespoke-inner p{ color: var(--cream-2); font-size: var(--t-md); font-weight:300; line-height:1.5; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: var(--void-2);
  color: var(--cream);
  padding-top: clamp(4rem, 8vw, 6.5rem);
  padding-left: var(--rail);
  border-top: 1px dashed var(--rule);
}
.footer-inner{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}
@media (max-width: 800px){ .footer-inner{ grid-template-columns:1fr; } }

.footer-logo{ display:flex; align-items:center; gap:.9rem; flex-direction:row; }
.footer-logo .logo-mark-img{ width:44px; }
.footer-logo .logo-line1{ font-size:1.6rem; }
.footer-brand > p{ margin-top:1.5rem; color: var(--cream-2); font-size: var(--t-sm); line-height:1.7; }

/* contacts — the workshop's main line, not fine print */
.footer-contacts{
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.25rem;
}
.footer-contacts a{
  display:inline-flex; align-items:center; gap:.7rem;
  min-height:44px; padding-inline:.15rem;
  text-decoration:none; color: var(--cream);
  transition: color .2s ease;
}
.footer-contacts svg{
  width:16px; height:16px; flex-shrink:0;
  fill: var(--gold);
  transition: fill .2s ease;
}
.footer-contacts .contact-value{
  font-family: var(--font-mono);
  font-size: var(--t-base);
  letter-spacing:.03em;
  overflow-wrap:anywhere;
  border-bottom:1px solid transparent;
  transition: border-color .2s ease;
}
.footer-contacts a:hover{ color: var(--gold-lt); }
.footer-contacts a:hover svg{ fill: var(--gold-lt); }
.footer-contacts a:hover .contact-value,
.footer-contacts a:focus-visible .contact-value{ border-bottom-color: currentColor; }

.footer-social{ display:flex; gap:.6rem; margin-top:2rem; }
.footer-social a{
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--rule); border-radius: var(--r-btn);
  color: var(--cream-3);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.footer-social a:hover{ color: var(--cream); border-color: var(--rule-2); background: var(--surface); }
.footer-social svg{ width:17px; height:17px; fill: currentColor; }

.footer-form{ display:flex; flex-direction:column; gap:1.25rem; }
/* honeypot — hidden from people, visible to naive bots */
.hp-field{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.footer-form label{
  font: 400 var(--t-mono)/1 var(--font-mono);
  letter-spacing: var(--track-label); text-transform:uppercase;
  color: var(--cream-3);
}
.footer-form input, .footer-form textarea{
  width:100%;
  background: transparent;
  border:0; border-bottom:1px solid var(--rule-field);
  border-radius:0;
  padding:.75rem 0;
  color: var(--cream);
  font-family: var(--font-sans); font-size: var(--t-base);
  transition: border-color .2s ease;
}
.footer-form input::placeholder, .footer-form textarea::placeholder{ color:#8F857A; }
.footer-form input:focus, .footer-form textarea:focus{ border-bottom-color: var(--cream-2); }
.footer-form textarea{ resize:vertical; min-height:110px; }
.footer-form .btn{ align-self:flex-start; margin-top:.5rem; }
.form-note{ font: 400 var(--t-sm)/1.5 var(--font-mono); color: var(--gold-lt); min-height:1.2em; }
.form-note.is-error{ color:#E28A6B; }
.footer-form button[disabled]{ opacity:.55; cursor:progress; }

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  gap:1.25rem; flex-wrap:wrap;
  padding-block:1.75rem;
  border-top:1px dashed var(--rule);
  font: 400 var(--t-mono)/1.4 var(--font-mono);
  letter-spacing:.12em; text-transform: uppercase;
  color: var(--cream-3);
}
/* copyright + company registration data, stacked so the long VAT line
   never fights the copyright for the same row */
.footer-legal{ display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.footer-reg{
  font-size: .625rem;
  letter-spacing: .06em;
  text-transform: none;
  color:#8A8072;
  overflow-wrap: anywhere;
}
.footer-links{ display:flex; flex-wrap:wrap; gap:1.5rem; }
.footer-links a{
  display:inline-flex; align-items:center; min-height:44px; padding-inline:.25rem;
  text-decoration:none; color: var(--cream-3);
}
.footer-links a:hover{ color: var(--cream); }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:300;
  display:none; place-items:center;
  background: rgba(16,12,8,.96);
  padding: clamp(1rem,4vw,3rem);
}
.lightbox.open{ display:grid; }
.lightbox img{ max-width:100%; max-height:88vh; object-fit:contain; border-radius: var(--r-card); }
.lightbox-close{
  position:absolute; top:1rem; right:1.25rem;
  width:44px; height:44px;
  background: rgba(244,234,218,.08);
  border:1px solid rgba(244,234,218,.2);
  border-radius: var(--r-btn);
  color: var(--cream); font-size:1.4rem; line-height:1; cursor:pointer;
}
.lightbox-close:hover{ background: var(--surface-2); }

/* =========================================================
   MOTION — quick states, slow atmospheric reveals
   ========================================================= */
.reveal{ opacity:0; transform: translateY(20px); }
.reveal-in{
  opacity:1; transform:none;
  transition: opacity 1.4s var(--ease-slow), transform 1.4s var(--ease-slow);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* =========================================================
   SMALL SCREENS
   ========================================================= */
@media (max-width: 700px){
  .hero{ height: 200vh; }
  /* stacked, the divider is a border-top on the next stat — without a little
     room below, a label ending in ą/į/ų drops its ogonek onto that line */
  .stat{ padding-right:0; padding-bottom:.75rem; }
  .stat + .stat{ padding-left:0; border-left:0; border-top:1px dashed var(--rule); padding-top:2rem; }
  .process-steps li{ padding-right:0; }
  .process-steps li + li{ padding-left:0; border-left:0; border-top:1px dashed var(--rule); padding-top:2.25rem; }
  .footer-bottom{ align-items:flex-start; }
}

/* =========================================================
   DOCUMENT PAGE — privacy.html
   The system already owns exactly one light surface (--inverted,
   the testimonials band). A legal text is the one thing on this
   site that is genuinely a *document*, so it gets that surface for
   its whole length: a sheet of paper laid out in the dark workshop.
   Header and footer stay dark, so the page still reads as the same
   site. No new colours are invented — everything below reuses the
   light-band tokens (--on-light, --rule-lt, --rule-lt-field,
   --gold-ink) that already pass contrast on --inverted.
   ========================================================= */
body.page-doc{ --rail: 0px; }          /* no dimension rail on this page */

/* the header has no hero to float over here — it wears its plaque
   from the first pixel, otherwise cream type would sit on paper */
body.page-doc .site-header{
  background: rgba(16,12,8,.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom-color: var(--rule);
}
body.page-doc .site-header::before{ opacity:0; }

.doc{ padding-top: calc(var(--band-y) + 3.5rem); }   /* clear the fixed header */
.doc-inner{ max-width: 46rem; }
.doc-title{
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
  margin-bottom: 1.5rem;
  /* "Политика конфиденциальности" is one 18-character word — without this
     it runs off the right edge of a 320px phone */
  hyphens: auto; overflow-wrap: break-word;
}
.doc-meta{
  font: 400 var(--t-mono)/1.4 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color:#665D50;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.doc-lede{
  margin-top: 2rem;
  font-size: var(--t-md); font-weight:300; line-height:1.6;
  color:#3F382F; text-wrap: pretty;
}

/* every clause sits under its own dashed rule — the only divider
   this system has ever used */
.doc > .wrap > section{
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px dashed var(--rule-lt);
}
.doc h2{ font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
.doc h3{
  font-family: var(--font-sans); font-weight:500;
  font-size: 1.0625rem; letter-spacing: 0; line-height:1.4;
  margin: 2.25rem 0 0;
}
.doc p{ margin-top: 1rem; color:#3F382F; line-height:1.65; text-wrap: pretty; }
.doc h2, .doc h3, .doc p, .doc li{ overflow-wrap: break-word; }
.doc ul{ margin:1rem 0 0; padding-left:1.15rem; color:#3F382F; line-height:1.65; }
.doc li{ margin-top:.65rem; }
.doc li::marker{ color:#8A7F6E; }
/* :not(.btn) — the back button keeps the light-band button colours,
   otherwise the link ink would land dark-on-dark inside it */
.doc a:not(.btn){ color: var(--gold-ink); text-underline-offset: .2em; }
.doc a:not(.btn):hover{ color: var(--on-light); }

/* legal basis / authority lines — data voice, like the dimension marks */
.doc-basis{
  font: 400 var(--t-sm)/1.6 var(--font-mono);
  color:#5B5245 !important;
  letter-spacing: .01em;
}

/* company details: label / value rows, mono values like the serial marks */
.doc-facts{ margin:1.5rem 0 0; display:flex; flex-direction:column; gap:.15rem; }
.doc-facts > div{
  display:flex; flex-wrap:wrap; gap:.35rem 1rem;
  padding:.55rem 0;
  border-bottom:1px dashed var(--rule-lt);
}
.doc-facts dt{
  flex:0 0 12rem;
  font: 400 var(--t-mono)/1.6 var(--font-mono);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color:#665D50;
}
.doc-facts dd{
  margin:0; min-width:0;
  font-family: var(--font-mono); font-size: var(--t-sm); line-height:1.6;
  color: var(--on-light); overflow-wrap: anywhere;
}
@media (max-width: 560px){ .doc-facts dt{ flex-basis:100%; } }

/* the "draft — have a lawyer read this" block: an inset note, not a section */
.doc-note{
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: rgba(26,20,14,.05);
  border: 1px dashed var(--rule-lt-field);
  border-radius: var(--r-card);
}
.doc-note-title{
  margin:0 !important;
  font: 400 var(--t-mono)/1.4 var(--font-mono);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--gold-ink);
}
.doc-back{ margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* footer's second column on the document page (no enquiry form here) */
.footer-aside{ display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem; }
.footer-aside p{ color: var(--cream-2); font-size: var(--t-sm); line-height:1.7; max-width:32rem; }
.footer-aside .eyebrow{ margin-bottom:0; }

/* =========================================================
   ENQUIRY-FORM CONSENT — vienintelis sutikimo langelis svetainėje
   ========================================================= */
.footer-form .form-consent{
  display:flex; align-items:center; gap:.5rem;
  min-height:44px; cursor:pointer;
  font: 300 var(--t-sm)/1.5 var(--font-sans);
  letter-spacing:0; text-transform:none;
  color: var(--cream-2);
  text-wrap: pretty;
}
.footer-form .form-consent input[type="checkbox"]{ accent-color: var(--cream); }
.footer-form .form-consent a{ color: var(--cream); text-underline-offset:.2em; }
.footer-form .form-consent a:hover{ color: var(--gold-lt); }

/* 320px: at the narrowest phones the logo + language switch + burger
   together overran the viewport and pushed the menu button off-screen
   (body's overflow-x:hidden was quietly clipping it). Tighten the
   header's own spacing rather than dropping any control — every button
   keeps its 44px touch height. */
@media (max-width: 400px){
  .header-inner{ padding-inline: 1rem; gap:.75rem; }
  .lang-switch button{ min-width: 34px; padding-inline:.25rem; }
  .logo-line1{ font-size:.95rem; }
}