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

.eyebrow{
  display:flex; align-items:center; gap:.75rem;
  margin:0 0 1.5rem;
  font: 400 var(--t-mono)/1 var(--font-mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--cream-3);
}
.eyebrow-no{
  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; }

.nav-toggle{
  display:none; 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;
}
.nav-toggle span{ display:block; width:16px; height:1px; background: var(--cream); margin:3px auto; }

@media (max-width: 980px){
  .nav-toggle{ display:grid; }
  .nav-cta{ display:none; }
  .main-nav{
    position:fixed; inset: 64px 0 auto 0;
    flex-direction: column; gap:0;
    background: rgba(16,12,8,.96);
    backdrop-filter: blur(24px);
    border-block: 1px solid var(--rule);
    padding: .5rem var(--gutter) 1.25rem;
    transform: translateY(-130%);
    transition: transform .4s var(--ease);
  }
  .main-nav.open{ transform:none; }
  .main-nav a{ padding: 1rem 0; border-bottom:1px dashed var(--rule); 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; } }
.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; }
/* the forest is a memory now, not wallpaper */
.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(.7) brightness(.22) contrast(1.1) sepia(.35);
  opacity:.5;
}
.hero-canvas-wrap::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(58% 48% at 50% 46%, rgba(201,162,39,.09) 0%, transparent 70%),
    radial-gradient(120% 92% at 50% 44%, transparent 28%, rgba(16,12,8,.72) 70%, rgba(16,12,8,.97) 100%),
    linear-gradient(to bottom, rgba(16,12,8,.8) 0%, rgba(16,12,8,.1) 40%, rgba(16,12,8,.95) 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; }

.hero-content{ position:relative; z-index:5; align-self:center; max-width:52rem; min-height:0; }
.hero-title{ color: var(--cream); }
.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;
  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
   ========================================================= */
.showcase-tabs{
  display:flex; flex-wrap:wrap; gap: clamp(1rem,2.5vw,2rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--rule);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.showcase-tab{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:44px; padding:.4rem 0;
  background:none; border:0; cursor:pointer;
  border-bottom: 1px dashed transparent;
  font: 400 var(--t-mono)/1 var(--font-mono);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--cream-3);
  transition: color .2s ease, border-color .2s ease;
}
.showcase-tab:hover{ color: var(--cream-2); }
.showcase-tab.is-active{ color: var(--cream); border-bottom-color: var(--gold); }
.tab-index{ color: var(--cream-3); }
.showcase-tab.is-active .tab-index{ color: var(--cream); }

.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;
}
.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 — the one inverted band
   ========================================================= */
.testimonial-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  border-top: 1px dashed var(--rule-lt);
}
/* `display:grid` would otherwise beat the hidden attribute */
.testimonial-grid[hidden], .review-empty[hidden]{ display:none; }
.testimonial-card{
  margin:0; padding: 2.25rem 1.75rem 0 0;
  display:flex; flex-direction:column; gap:1.5rem;
}
.testimonial-card + .testimonial-card{ padding-left:1.75rem; border-left:1px dashed var(--rule-lt); }
.testimonial-card blockquote{
  margin:0;
  font-family: var(--font-display); font-weight:300;
  font-size: 1.25rem; line-height:1.35; letter-spacing:-0.012em;
  color: var(--on-light);
  text-wrap: pretty;
}
.testimonial-card figcaption{
  margin-top:auto;
  display:flex; gap:.7rem; align-items:baseline; flex-wrap:wrap;
  font: 400 var(--t-mono)/1 var(--font-mono);
  letter-spacing: var(--track-label); text-transform:uppercase;
}
.review-name{ color: var(--on-light); }
.review-role,
.review-date{ color:#665D50; }

/* ---------- empty state: an invitation, not a hole ----------
   Nothing is published until a real client sends something in, so the
   default state of this section has to earn its space on its own. */
.review-empty{
  max-width: 40rem;
  padding-top: 2.25rem;
  border-top: 1px dashed var(--rule-lt);
  display:flex; flex-direction:column; gap:1rem;
}
.review-empty-title{
  font-family: var(--font-display); font-weight:300;
  font-size: 1.5rem; line-height:1.15; letter-spacing:-0.012em;
  color: var(--on-light);
  text-wrap: balance;
}
.review-empty-text{
  font-weight:300; font-size: var(--t-base); line-height:1.55;
  color:#5B5245;
  text-wrap: pretty;
}

/* ---------- "leave a review" form — footer form, light-band palette ---------- */
.review-form{
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px dashed var(--rule-lt);
  max-width: 40rem;
  display:flex; flex-direction:column; gap:1.25rem;
}
.review-form-title{ font-size:1.375rem; }
.review-form-intro{
  margin-top:-.5rem;
  font: 300 var(--t-sm)/1.55 var(--font-sans);
  color:#5B5245;
}
.review-form label{
  font: 400 var(--t-mono)/1 var(--font-mono);
  letter-spacing: var(--track-label); text-transform:uppercase;
  color:#665D50;
}
.review-form input[type="text"],
.review-form textarea{
  width:100%;
  min-height:44px;                     /* touch target */
  background: transparent;
  border:0; border-bottom:1px solid var(--rule-lt-field);
  border-radius:0;
  padding:.75rem 0;
  color: var(--on-light);
  font-family: var(--font-sans); font-size: var(--t-base);
  transition: border-color .2s ease;
}
.review-form input[type="text"]::placeholder,
.review-form textarea::placeholder{ color:#675E52; }
.review-form input[type="text"]:focus,
.review-form textarea:focus{ border-bottom-color: var(--on-light); }
.review-form textarea{ resize:vertical; min-height:120px; line-height:1.5; }

/* consent is required by law and by decency — give it a real target */
.review-form .review-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:#5B5245;
  text-wrap: pretty;
}
.review-check{
  flex:0 0 auto;
  width:44px; height:44px;
  margin-left:-11px;                   /* keep the text optically flush left */
  display:grid; place-items:center;
}
.review-consent input[type="checkbox"]{
  width:22px; height:22px; margin:0;
  accent-color: var(--on-light);
  cursor:pointer;
}
.review-form .btn{ align-self:flex-start; }
.band--light .form-note{ color: var(--gold-ink); }
.band--light .form-note.is-error{ color:#9A3B18; }
.review-form button[disabled]{ opacity:.55; cursor:progress; }

/* =========================================================
   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; }
  .showcase-tabs{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .showcase-tab{ flex:0 0 auto; }
  /* 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; }
  .testimonial-card{ padding-right:0; }
  .testimonial-card + .testimonial-card{ padding-left:0; border-left:0; border-top:1px dashed var(--rule-lt); 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 (dark footer twin of .review-consent)
   ========================================================= */
.footer-form .review-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 .review-consent input[type="checkbox"]{ accent-color: var(--cream); }
.footer-form .review-consent a{ color: var(--cream); text-underline-offset:.2em; }
.footer-form .review-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; }
}