/* ============================================================
   NT BROKERIS — style.css
   Paletė: balta / šviesiai pilka / beveik juoda mėlyna
           + „Ober-Haus" raudonas akcentas
   ============================================================ */

/* ---------- 1. TOKENAI ---------- */
:root{
  /* spalvos */
  --white:      #FFFFFF;
  --grey-50:    #F6F7F9;
  --grey-100:   #EDEFF3;
  --grey-200:   #DFE3E9;
  --grey-300:   #C7CDD7;
  --muted:      #6B7684;
  --navy:       #16283F;
  --ink-2:      #0F1929;
  --ink:        #0A0F1A;
  --red:        #C44E5C;
  --red-dark:   #A83E4B;
  --red-soft:   rgba(196,78,92,.12);

  /* tipografija */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* ritmas */
  --wrap:      1440px;
  --gutter:    clamp(20px, 4.2vw, 72px);
  --sec-y:     clamp(88px, 12vw, 190px);
  --radius:     10px;   /* mygtukai, laukeliai */
  --radius-lg:  16px;   /* kortelės, formos, dideli CTA */
  --radius-xl:  24px;   /* video blokas */

  /* header */
  --header-h:  76px;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul{ margin:0; }
ul{ padding:0; list-style:none; }
img,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font-text);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.62;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-loading{ overflow:hidden; }
body.menu-open{ overflow:hidden; }

::selection{ background:var(--red); color:#fff; }

:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- 3. TIPOGRAFIJA ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.display{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:.98;
  text-wrap:balance;
}
.display--xxl{ font-size:clamp(2.6rem,7.4vw,6.4rem); }
.display--xl { font-size:clamp(2.3rem,5.6vw,5.1rem); }
.display--l  { font-size:clamp(1.9rem,3.9vw,3.5rem); line-height:1.03; }
.display--m  { font-size:clamp(1.6rem,2.9vw,2.6rem); line-height:1.08; }

.accent{ color:var(--red); }

.mono{
  font-family:var(--font-mono);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
}

.lead{
  font-size:clamp(1rem,1.25vw,1.175rem);
  line-height:1.68;
  color:var(--muted);
  max-width:46ch;
}

.dim{ color:var(--muted); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono);
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:clamp(18px,2vw,30px);
}
.eyebrow .dot{ width:6px; height:6px; background:var(--red); border-radius:50%; flex:none; }

.section-label{
  display:flex; align-items:center; gap:12px;
  color:var(--muted);
  margin-bottom:clamp(22px,2.4vw,36px);
}
.section-label .num{
  color:var(--red); font-weight:600;
  padding-right:12px; border-right:1px solid var(--grey-200);
}
.section-label.light{ color:rgba(255,255,255,.55); }
.section-label.light .num{ border-color:rgba(255,255,255,.18); }

/* eilučių reveal kaukė */
.line{ display:block; overflow:hidden; padding-bottom:.06em; }
.line > span{ display:block; will-change:transform; }

/* ---------- 4. MYGTUKAI ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; min-height:44px;
  padding:13px 24px;
  font-family:var(--font-display);
  font-size:.9375rem; font-weight:600; letter-spacing:-.01em;
  color:var(--btn-fg); background:var(--btn-bg);
  border:1px solid var(--btn-bd);
  border-radius:var(--radius);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--sm{ padding:9px 16px; min-height:40px; font-size:.8125rem; }
.btn--lg{ padding:17px 32px; min-height:56px; font-size:1rem; }
.btn--full{ width:100%; }

.btn--red{ --btn-bg:var(--red); --btn-bd:var(--red); }
.btn--red:hover{ --btn-bg:var(--red-dark); --btn-bd:var(--red-dark); }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--grey-300); }
.btn--ghost:hover{ --btn-bd:var(--ink); }

/* ---------- 5. PRELOADER ---------- */
.loader{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:var(--ink);
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__inner{ display:flex; align-items:center; gap:18px; padding-inline:24px; }
.loader__logo{ height:24px; width:auto; flex:none; }
.loader__rail{ width:min(240px,42vw); height:2px; background:rgba(255,255,255,.16); overflow:hidden; }
.loader__rail i{ display:block; height:100%; width:0%; background:var(--red); transition:width .25s linear; }
.loader__pct{ color:rgba(255,255,255,.55); min-width:2.4em; }

/* ---------- 6. HEADER ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:120;
  height:var(--header-h);
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  padding-inline:var(--gutter);
  color:#fff;
  transition:background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
.site-header::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(10,15,26,.55), rgba(10,15,26,0));
  transition:opacity .45s var(--ease);
}
.site-header.is-solid{
  height:64px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--ink);
  box-shadow:0 1px 0 var(--grey-200);
}
.site-header.is-solid::after{ opacity:0; }
.site-header.is-hidden{ transform:translateY(-102%); }
.site-header{ transition:background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease), transform .5s var(--ease); }

.brand{ display:flex; align-items:center; gap:16px; margin-right:auto; }
.brand__name{ font-family:var(--font-display); font-weight:700; letter-spacing:-.022em; font-size:1.3125rem; }
.brand__div{ width:1px; height:22px; background:currentColor; opacity:.3; }
/* Ober-Haus logotipas: sviesi versija ant tamsaus, originali ant balto */
.brand__logo{ position:relative; display:block; height:28px; flex:none; }
.brand__logo .logo{
  display:block; height:100%; width:auto;
  transition:opacity .45s var(--ease);
}
.brand__logo .logo--dark{ position:absolute; left:0; top:0; opacity:0; }
.site-header.is-solid .brand__logo .logo--light{ opacity:0; }
.site-header.is-solid .brand__logo .logo--dark{ opacity:1; }

.site-nav{ display:flex; gap:clamp(14px,1.8vw,30px); }
.site-nav a{
  position:relative; font-size:.875rem; font-weight:500; padding:6px 0;
  opacity:.82; transition:opacity .3s;
}
.site-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.site-nav a:hover{ opacity:1; }
.site-nav a:hover::after{ transform:scaleX(1); }

.header-cta{ flex:none; }

.burger{ display:none; width:44px; height:44px; place-items:center; margin-right:-10px; }
.burger span{ display:block; width:22px; height:1.5px; background:currentColor; transition:transform .4s var(--ease), opacity .3s; }
.burger span + span{ margin-top:6px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

/* mobilus meniu */
.mobile-menu{
  position:fixed; inset:0; z-index:110;
  background:var(--ink); color:#fff;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:calc(var(--header-h) + 24px) var(--gutter) 40px;
  opacity:0; transition:opacity .4s var(--ease);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu.is-open{ opacity:1; }
.mobile-menu nav{ display:flex; flex-direction:column; margin-bottom:32px; }
.mobile-menu nav a{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.6rem,7vw,2.4rem); letter-spacing:-.03em;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.1);
}
.mobile-menu nav a .mono{ color:var(--red); font-size:.625rem; }

/* ============================================================
   7. HERO — pinned + scroll-scrubbed video
   ============================================================ */
/* Sluoksniu tvarka: hero visada apacioje, visos velesnes sekcijos - virsuje.
   Be sito, jei ScrollTrigger matmenys issiderina, prisegta hero drobe
   (vaizdo irasas su brokeriu) gali uzlipti ant miestu sekcijos. */
.hero{ position:relative; z-index:0; background:var(--ink); color:#fff; }
.ober, .cities, .reviews, .faq, .final, .contact, .valuation, .site-footer{
  position:relative; z-index:1;
}
.hero__pin{
  position:relative; height:100svh; min-height:600px;
  display:grid; grid-template-columns:1fr 44%;
  overflow:hidden;
}

.hero__copy{
  position:relative; z-index:3;
  display:grid; align-content:center;
  padding:calc(var(--header-h) + 24px) clamp(28px,4vw,64px) 96px var(--gutter);
}
.hero__chapter{
  grid-area:1/1; align-self:center;
  max-width:660px;
  will-change:transform,opacity;
}
/* Slepiame tik tada, kai scenarijus tikrai veikia ir juos parodys. */
.js .hero__chapter{ opacity:0; visibility:hidden; pointer-events:none; }
/* Animuotoje versijoje kadrai piesiami ant drobes pagal scroll, todel
   filmuko ir skyriu perjungimo nereikia. */
.hero__video, .hero__dots{ display:none; }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* tik ekrano skaityklems */
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
     overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.hero__chapter.is-active{ opacity:1; visibility:visible; pointer-events:auto; }

.hero h1.display{ font-size:clamp(2rem,4.4vw,4.1rem); }
.hero h1.display, .hero h2.display{ margin-bottom:clamp(20px,2.2vw,32px); }
.hero .lead{ color:rgba(255,255,255,.66); }

.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3vw,42px); }
.hero .btn--ghost{ --btn-fg:#fff; --btn-bd:rgba(255,255,255,.28); }
.hero .btn--ghost:hover{ --btn-bd:#fff; }

.hero__meta{
  position:absolute; left:var(--gutter); bottom:34px; z-index:4;
  display:flex; flex-wrap:wrap; gap:clamp(12px,1.6vw,26px);
  color:rgba(255,255,255,.42);
}
.hero__meta .mono{ position:relative; padding-left:14px; }
.hero__meta .mono::before{
  content:''; position:absolute; left:0; top:50%; width:5px; height:1px;
  background:var(--red); transform:translateY(-50%);
}

/* — media — */
.hero__media{ position:relative; overflow:hidden; background:#05080F; }
.hero__canvas{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
}
.hero__grad{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, var(--ink) 0%, rgba(10,15,26,.45) 12%, rgba(10,15,26,0) 34%),
    linear-gradient(to top, rgba(10,15,26,.6) 0%, rgba(10,15,26,0) 42%);
  pointer-events:none;
}

/* parašo elementas — matavimo bėgis */
.rail--v{
  position:absolute; right:clamp(16px,1.8vw,30px); top:calc(var(--header-h) + 40px); bottom:96px;
  display:flex; gap:14px; z-index:3;
}
.rail__track{ position:relative; width:2px; background:rgba(255,255,255,.16); }
.rail__fill{
  position:absolute; left:0; top:0; width:100%; height:0%;
  background:var(--red);
}
.rail__labels{
  display:flex; flex-direction:column; justify-content:space-between;
  color:rgba(255,255,255,.4);
}
.rail__labels .mono{ writing-mode:vertical-rl; font-size:.625rem; letter-spacing:.2em; }

.hero__readout{
  position:absolute; right:clamp(16px,1.8vw,30px); bottom:36px; z-index:3;
  color:rgba(255,255,255,.6); font-size:.6875rem; letter-spacing:.1em;
}

.scroll-hint{
  position:absolute; left:50%; bottom:26px; z-index:5;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
  color:rgba(255,255,255,.4);
  transition:opacity .4s;
}
.scroll-hint i{ display:block; width:44px; height:1px; background:rgba(255,255,255,.28); position:relative; overflow:hidden; }
.scroll-hint i::after{
  content:''; position:absolute; inset:0; background:var(--red);
  transform:translateX(-100%); animation:sweep 2.2s var(--ease) infinite;
}
@keyframes sweep{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }
.scroll-hint.is-gone{ opacity:0; }

/* ============================================================
   8. OBER-HAUS
   ============================================================ */
.ober{ padding-block:var(--sec-y); background:var(--white); }
.ober__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,110px); align-items:start; }
.ober__copy .lead{ max-width:52ch; margin-top:clamp(20px,2.4vw,32px); }
.ober h2.display{ margin-bottom:0; }

.benefits{
  margin-top:clamp(44px,5vw,76px);
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--grey-200);
  border-top:1px solid var(--grey-200); border-left:1px solid var(--grey-200);
}
.benefit{
  position:relative; background:var(--white);
  padding:clamp(22px,2.2vw,32px) clamp(20px,2vw,30px) clamp(26px,2.6vw,36px);
  transition:background .4s var(--ease);
}
.benefit::after{
  content:''; position:absolute; left:0; top:0; width:2px; height:100%;
  background:var(--red); transform:scaleY(0); transform-origin:top;
  transition:transform .5s var(--ease);
}
.benefit:hover{ background:var(--grey-50); }
.benefit:hover::after{ transform:scaleY(1); }
.benefit--wide{ grid-column:1/-1; }
.benefit__num{ display:block; color:var(--red); margin-bottom:14px; }
.benefit h3{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.0625rem,1.35vw,1.25rem); letter-spacing:-.02em;
  line-height:1.24; margin-bottom:8px;
}
.benefit p{ font-size:.9375rem; line-height:1.58; color:var(--muted); }

.ober__sticky{ position:sticky; top:calc(var(--header-h) + 28px); }
.ober__videobox{
  position:relative; overflow:hidden;
  border-radius:var(--radius-xl); background:var(--ink);
  aspect-ratio:4/3;              /* šaltinis 16:9 - kerpame minimaliai */
  isolation:isolate;             /* kad Safari nepraleistų kampų */
}
.ober__video{
  width:100%; height:100%; object-fit:cover;
  border-radius:inherit;
}
.ober__videobox::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,15,26,.72) 0%, rgba(10,15,26,0) 46%);
}
.ober__chip{
  position:absolute; left:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; gap:4px;
  padding:22px 24px 24px; color:#fff;
}
.ober__chip .mono{ color:var(--red); }
.ober__chip strong{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.0625rem,1.5vw,1.3rem);
}

/* ============================================================
   9. MIESTAI — pinned, mask reveal
   ============================================================ */
.cities{ position:relative; background:var(--ink); }
.cities__pin{
  position:relative; height:100svh; min-height:560px; overflow:hidden;
  color:#fff;
  background:var(--ink);   /* niekada neperšviečia to, kas yra po sekcija */
  isolation:isolate;
}
.cities__stage{ position:absolute; inset:0; }
.city{
  position:absolute; inset:0; margin:0;
  will-change:clip-path;
}
.city__mask{ position:absolute; inset:0; overflow:hidden; }
.city__img{
  position:absolute; left:0; top:-9%;
  width:100%; height:118%;
  object-fit:cover;
  will-change:transform;
}
.cities__scrim{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    linear-gradient(to right, rgba(10,15,26,.86) 0%, rgba(10,15,26,.5) 40%, rgba(10,15,26,.12) 72%, rgba(10,15,26,.35) 100%),
    linear-gradient(to top, rgba(10,15,26,.7) 0%, rgba(10,15,26,0) 45%);
}

.cities__copy{
  position:absolute; z-index:3;
  left:var(--gutter); right:var(--gutter);
  top:50%; transform:translateY(-50%);
  max-width:min(760px,60vw);
  pointer-events:none;
}
.cities__label{ color:rgba(255,255,255,.55); }
.cities__label .num{ border-color:rgba(255,255,255,.2); }

.cities__copyset{ display:grid; }
.city-copy{
  grid-area:1/1; align-self:start;
}
.js .city-copy{ opacity:0; visibility:hidden; }
.city-copy.is-active{ opacity:1; visibility:visible; }

.city-name{
  font-size:clamp(2.6rem,8vw,7rem);
  line-height:.92; margin-bottom:clamp(14px,1.8vw,26px);
  text-transform:uppercase; letter-spacing:-.04em;
  overflow:hidden; padding-bottom:.06em;
}
.city-name .ch{ display:inline-block; will-change:transform; }
.city-text{
  font-size:clamp(1rem,1.25vw,1.175rem); line-height:1.62;
  color:rgba(255,255,255,.74); max-width:44ch;
}

.cities__index{
  position:absolute; z-index:4; right:var(--gutter); top:calc(var(--header-h) + 40px);
  display:flex; align-items:baseline; gap:6px;
  font-family:var(--font-mono);
}
.cities__cur{ font-size:clamp(1.5rem,2.6vw,2.4rem); color:#fff; letter-spacing:.02em; }
.cities__slash{ font-size:1rem; color:var(--red); }
.cities__tot{ font-size:.875rem; color:rgba(255,255,255,.45); }

.rail--h{
  position:absolute; z-index:4;
  left:var(--gutter); right:var(--gutter); bottom:36px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
}
.rail--h .seg{ display:block; height:2px; background:rgba(255,255,255,.18); overflow:hidden; }
.rail--h .seg b{ display:block; height:100%; width:0%; background:var(--red); }

/* ============================================================
   10. ATSILIEPIMAI — stacked cards
   ============================================================ */
.reviews{ padding-block:var(--sec-y) calc(var(--sec-y) + 4vh); background:var(--grey-50); }
.reviews__head{ margin-bottom:clamp(40px,5vw,72px); max-width:820px; }

.stack{ position:relative; }
.rcard{
  position:sticky; top:calc(var(--header-h) + 5vh + (var(--i,0) * 16px));
  background:var(--white);
  border:1px solid var(--grey-200);
  border-radius:var(--radius-lg);
  padding:clamp(30px,4.2vw,64px) clamp(26px,4.2vw,64px) clamp(28px,3.4vw,52px);
  box-shadow:0 24px 60px -40px rgba(10,15,26,.4);
  transform-origin:center top;
  will-change:transform;
}
.rcard + .rcard{ margin-top:clamp(240px,44vh,460px); }
.rcard:nth-child(2n){ border-left:2px solid var(--red); }
.rcard:nth-child(1){ --i:0 } .rcard:nth-child(2){ --i:1 }
.rcard:nth-child(3){ --i:2 } .rcard:nth-child(4){ --i:3 }
.rcard:nth-child(5){ --i:4 } .rcard:nth-child(6){ --i:5 }

.rcard__num{
  position:absolute; right:clamp(26px,4.2vw,64px); top:clamp(30px,4.2vw,64px);
  font-size:clamp(1.5rem,3vw,2.6rem); color:var(--grey-200); letter-spacing:0;
}
.rcard__topic{ color:var(--red); margin-bottom:clamp(18px,2vw,28px); }
.rcard__quote{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.25rem,2.7vw,2.15rem);
  line-height:1.28; letter-spacing:-.025em;
  max-width:22ch; max-width:min(24ch,100%);
  text-wrap:balance;
}
@media (min-width:900px){ .rcard__quote{ max-width:19ch; } }
.rcard__who{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px;
  margin-top:clamp(24px,3vw,44px);
  padding-top:20px; border-top:1px solid var(--grey-200);
}
.rcard__name{ font-family:var(--font-display); font-weight:600; letter-spacing:-.015em; }
.rcard__role{ color:var(--muted); }

/* ============================================================
   10b. DUK
   ============================================================ */
.faq{ padding-block:var(--sec-y); background:var(--white); }
.faq__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,110px); align-items:start; }
.faq__intro{ position:sticky; top:calc(var(--header-h) + 40px); }
.faq__intro .lead{ margin-top:clamp(20px,2.4vw,32px); }
.faq__phone{ margin-top:clamp(24px,2.6vw,34px); letter-spacing:.01em; }

.faq__list{ border-top:1px solid var(--grey-200); }
.faq__item{ border-bottom:1px solid var(--grey-200); }
.faq__item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:20px;
  padding:clamp(20px,2.2vw,28px) 0;
  transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--red); }
.faq__q{
  flex:1;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.0625rem,1.45vw,1.3125rem);
  line-height:1.3; letter-spacing:-.02em;
}
.faq__ico{
  position:relative; flex:none; width:18px; height:18px; margin-top:4px;
}
.faq__ico::before, .faq__ico::after{
  content:''; position:absolute; left:50%; top:50%;
  background:var(--red); transform:translate(-50%,-50%);
  transition:transform .4s var(--ease), opacity .3s;
}
.faq__ico::before{ width:14px; height:1.5px; }
.faq__ico::after{ width:1.5px; height:14px; }
.faq__item[open] .faq__ico::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq__a{ padding:0 46px clamp(24px,2.6vw,32px) 0; }
.faq__a p{ color:var(--muted); font-size:clamp(.9375rem,1.05vw,1rem); line-height:1.7; max-width:62ch; }
.faq__item[open] summary .faq__q{ color:var(--ink); }

/* Ober-Haus profilio nuoroda */
.ober__link{ margin-top:clamp(22px,2.4vw,32px); }
.ober__link a{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-weight:600; font-size:.9375rem;
  padding-bottom:6px; border-bottom:1px solid var(--grey-300);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.ober__link a:hover{ color:var(--red); border-color:var(--red); }
.ober__link .arrow{ transition:transform .35s var(--ease); }
.ober__link a:hover .arrow{ transform:translateX(4px); }

/* ============================================================
   11. GALUTINĖ CTA
   ============================================================ */
.final{ background:var(--ink-2); color:#fff; padding-block:calc(var(--sec-y) + 2vh); }
.final__inner{ max-width:1180px; }
.final__sub{
  margin-top:clamp(22px,2.6vw,34px);
  font-size:clamp(1rem,1.3vw,1.2rem); line-height:1.62;
  color:rgba(255,255,255,.6); max-width:52ch;
}
.final__actions{
  margin-top:clamp(40px,5vw,72px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.6vw,22px);
}
.cta-big{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:8px;
  min-height:clamp(140px,15vw,200px);
  padding:clamp(24px,2.6vw,38px);
  border-radius:var(--radius-lg);
  transition:transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.cta-big__label{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(1.3rem,2.3vw,2rem); line-height:1.1; max-width:14ch;
}
.cta-big__sub{ color:rgba(255,255,255,.55); margin-top:auto; }
.cta-big__arrow{
  position:absolute; right:clamp(24px,2.6vw,38px); top:clamp(24px,2.6vw,38px);
  font-size:1.5rem; line-height:1;
  transition:transform .45s var(--ease);
}
.cta-big:hover{ transform:translateY(-4px); }
.cta-big:hover .cta-big__arrow{ transform:translate(6px,-6px); }

.cta-big--red{ background:var(--red); border:1px solid var(--red); }
.cta-big--red:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.cta-big--red .cta-big__sub{ color:rgba(255,255,255,.78); }

.cta-big--line{ background:transparent; border:1px solid rgba(255,255,255,.22); }
.cta-big--line:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.5); }

/* ============================================================
   12. KONTAKTAI
   ============================================================ */
.contact{ padding-block:var(--sec-y); background:var(--white); }
.contact__grid{ display:grid; grid-template-columns:1fr .9fr; gap:clamp(40px,6vw,110px); align-items:start; }
.contact__list{ margin-top:clamp(34px,4vw,56px); display:grid; gap:1px; background:var(--grey-200); border-block:1px solid var(--grey-200); }
.contact__list > div{
  background:var(--white); padding:20px 0 22px;
  display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:baseline;
}
.contact__list dt{ color:var(--muted); }
.contact__list dd{ font-size:1.0625rem; line-height:1.5; }
.contact__list a{ border-bottom:1px solid var(--grey-300); padding-bottom:1px; transition:border-color .3s, color .3s; }
.contact__list a:hover{ color:var(--red); border-color:var(--red); }

/* formos */
.form{
  background:var(--grey-50);
  border:1px solid var(--grey-200);
  border-radius:var(--radius-lg);
  padding:clamp(24px,2.8vw,40px);
  display:flex; flex-direction:column; gap:18px;
}
.form__title{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(1.25rem,1.8vw,1.6rem); margin-bottom:2px;
}
.field{ display:flex; flex-direction:column; gap:7px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field label{
  font-family:var(--font-mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; min-height:48px;
  background:var(--white);
  border:1px solid var(--grey-200); border-radius:var(--radius);
  font-size:.9375rem; line-height:1.4;
  transition:border-color .3s, box-shadow .3s;
}
.field textarea{ resize:vertical; min-height:104px; }
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-right:38px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--grey-300); }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:var(--red); }

.form__note{ font-size:.8125rem; line-height:1.5; color:var(--muted); }
.form__note.light{ color:rgba(255,255,255,.45); }
.form__status{ font-size:.875rem; min-height:1.2em; }
.form__status.ok{ color:#1E7F45; }
.form__status.err{ color:var(--red); }
.form--dark .form__status.ok{ color:#63D294; }

/* ============================================================
   13. NT VERTINIMAS
   ============================================================ */
.valuation{ background:var(--ink); color:#fff; padding-block:var(--sec-y); }
.valuation__grid{ display:grid; grid-template-columns:1fr .95fr; gap:clamp(40px,6vw,110px); align-items:start; }
.valuation__lead{
  margin-top:clamp(20px,2.4vw,32px);
  font-size:clamp(1rem,1.25vw,1.15rem); line-height:1.66;
  color:rgba(255,255,255,.62); max-width:48ch;
}
.valuation__points{ margin-top:clamp(30px,3.4vw,48px); display:grid; gap:1px; background:rgba(255,255,255,.12); }
.valuation__points li{
  background:var(--ink); padding:16px 0;
  display:flex; align-items:baseline; gap:16px;
  font-size:.9375rem; color:rgba(255,255,255,.8);
}
.valuation__points .mono{ color:var(--red); flex:none; }

.form--dark{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.13); }
.form--dark .field label{ color:rgba(255,255,255,.5); }
.form--dark .field input,
.form--dark .field select,
.form--dark .field textarea{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.15); color:#fff;
}
.form--dark .field select option{ background:var(--ink); color:#fff; }
.form--dark .field input::placeholder{ color:rgba(255,255,255,.3); }
.form--dark .field select{
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
}

/* ============================================================
   14. FOOTER
   ============================================================ */
.site-footer{ background:var(--ink-2); color:rgba(255,255,255,.7); padding-block:clamp(40px,5vw,64px); border-top:1px solid rgba(255,255,255,.08); }
.footer__grid{ display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,48px); align-items:center; justify-content:space-between; }
.footer__brand{ display:flex; flex-direction:column; gap:6px; }
.footer__name{ font-family:var(--font-display); font-weight:700; color:#fff; letter-spacing:-.02em; font-size:1.0625rem; }
.footer__org{ color:rgba(255,255,255,.45); }
.footer__nav{ display:flex; flex-wrap:wrap; gap:8px 24px; font-size:.875rem; }
.footer__nav a{ opacity:.8; transition:opacity .3s, color .3s; }
.footer__nav a:hover{ opacity:1; color:var(--red); }
.footer__legal{ color:rgba(255,255,255,.35); width:100%; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); }

/* ============================================================
   15. REVEAL pradinės būsenos (JS pridės .is-in)
   ============================================================ */
.js .reveal{ opacity:0; transform:translateY(18px); }
.js .line > span{ transform:translateY(105%); }

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .hero__pin{ grid-template-columns:1fr 40%; }
  .ober__grid, .contact__grid, .valuation__grid{ grid-template-columns:1fr; }
  .ober__media{ order:-1; }
  .ober__sticky{ position:static; }
  .ober__videobox{ aspect-ratio:16/10; }
  .ober__grid{ gap:clamp(32px,5vw,56px); }
  .contact__list > div{ grid-template-columns:130px 1fr; }
}

@media (max-width:940px){
  .site-nav, .header-cta{ display:none; }
  .burger{ display:grid; }
  .hero__pin{ grid-template-columns:1fr; }
  .hero__media{ position:absolute; inset:0; z-index:1; }
  .hero__grad{
    background:
      linear-gradient(to bottom, rgba(10,15,26,.92) 0%, rgba(10,15,26,.72) 38%, rgba(10,15,26,.55) 62%, rgba(10,15,26,.92) 100%);
  }
  .hero__copy{
    z-index:3; align-content:end;
    padding:calc(var(--header-h) + 40px) var(--gutter) 130px;
  }
  .footer__nav a{ padding:11px 0; }
  .contact__list dd a{ display:inline-block; padding:6px 0; }
  .hero__chapter{ right:var(--gutter); }
  .rail--v{ display:none; }
  .hero__readout{ display:none; }   /* kadrų skaitiklio telefone nerodome */
  .hero__meta{ bottom:44px; }
  .scroll-hint{ display:none; }

  .benefits{ grid-template-columns:1fr; }
  .benefit--wide{ grid-column:auto; }

  .faq__grid{ grid-template-columns:1fr; gap:clamp(32px,5vw,48px); }
  .faq__intro{ position:static; }
  .faq__a{ padding-right:0; }

  .cities__copy{ max-width:none; top:auto; bottom:96px; transform:none; }
  .cities__scrim{
    background:linear-gradient(to top, rgba(10,15,26,.94) 8%, rgba(10,15,26,.5) 46%, rgba(10,15,26,.28) 100%);
  }
  .final__actions{ grid-template-columns:1fr; }
  .cta-big{ min-height:130px; }
}

@media (max-width:640px){
  :root{ --header-h:64px; }
  .brand{ gap:10px; }
  .brand__name{ font-size:1.0625rem; }
  .brand__div{ height:18px; }
  .brand__logo{ height:22px; }
  .field-row{ grid-template-columns:1fr; }
  .contact__list > div{ grid-template-columns:1fr; gap:6px; }
  .rcard{ top:calc(var(--header-h) + 3vh); }
  .rcard__num{ position:static; display:block; margin-bottom:10px; }
  .rcard__topic{ margin-bottom:14px; }
  .footer__grid{ flex-direction:column; align-items:flex-start; }
  .hero__meta{ gap:10px 16px; }
}

/* ============================================================
   17. SUMAŽINTAS JUDESYS
   ------------------------------------------------------------
   Jei sistemoje isjungti animacijos efektai (Windows: Pritaikymas
   negaliai -> Vaizdo efektai -> Animacijos efektai; macOS: Sumazinti
   judesi), narsykle praneša prefers-reduced-motion: reduce ir mes
   nebeprisegame sekciju bei nebesukame kadru sekos.

   Tokiu atveju NEUZTENKA tiesiog isjungti judesi: prisegtos sekcijos
   yra sukrautos viena ant kitos (grid-area:1/1) ir be scenarijaus
   virstu tekstu kruva ant juodo fono. Todel cia perstatome ju maketa
   i normalu, statini puslapi - su nuotraukomis ir teisingais plociais.
   ============================================================ */
/* Pats judesio isjungimas. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .js .line > span{ transform:none; }
}

/* ------------------------------------------------------------
   STATINIS MAKETAS
   .no-motion uzdedamas, kai (a) sistemoje isjungtos animacijos arba
   (b) neuzsikrove GSAP. :not(.js) - kai scenarijai visai isjungti.
   Visais trim atvejais reikia to paties: isskleisti prisegtas
   sekcijas i normalu puslapi.
   ------------------------------------------------------------ */
:is(.no-motion, html:not(.js)) .scroll-hint{ display:none; }

/* — HERO isjungus animacijas: maketas lieka toks pat kaip animuotoje
     versijoje, tik kadru seka nebesukama pagal scroll - vietoj drobes
     groja tas pats filmukas, o skyriai salia keiciasi patys.
     Todel cia beveik nieko neperrasinejame - uztenka sukeisti drobe su
     filmuku ir parodyti skyriu taskelius. — */
.no-motion .hero__canvas{ display:none; }
.no-motion .hero__video{ display:block; }

.no-motion .hero__dots{
  display:flex; gap:10px;
  position:absolute; left:var(--gutter); bottom:84px; z-index:4;
}
.no-motion .hero__dot{
  width:34px; height:3px; padding:0;
  background:rgba(255,255,255,.24);
}
.no-motion .hero__dot.is-on{ background:var(--red); }
.no-motion .hero__dot:hover{ background:rgba(255,255,255,.5); }
.no-motion .hero__dot.is-on:hover{ background:var(--red); }

/* Scrollo eigos rodikliai netenka prasmes - nieko nebeprisegame. */
:is(.no-motion, html:not(.js)) :is(.rail--v, .hero__readout, .scroll-hint){ display:none; }

/* — Visai be scenarijų (JS isjungtas): filmuko paleisti nera kam ir
     skyriu niekas neperjungtu, todel juos tiesiog isskleidziame. — */
html:not(.js) .hero__pin{ height:auto; min-height:0; overflow:visible; }
html:not(.js) .hero__copy{ align-content:start; padding-top:calc(var(--header-h) + 32px); }
html:not(.js) .hero__chapter{
  grid-area:auto; align-self:start;
  padding-block:clamp(28px,4vh,52px);
}
html:not(.js) .hero__chapter + .hero__chapter{ border-top:1px solid rgba(255,255,255,.12); }
html:not(.js) .hero__media{ display:none; }
html:not(.js) .hero__meta{ position:static; padding-top:32px; }


/* — MIESTAI: keturios korteles vietoj prisegtos skaidriu juostos — */
:is(.no-motion, html:not(.js)) .cities__pin{
  height:auto; min-height:0; overflow:visible;
  display:flex; flex-direction:column; gap:clamp(18px,2.2vw,30px);
  padding:var(--sec-y) var(--gutter);
}
/* display:contents - kad antraste ir tekstai taptu tiesioginiais
   .cities__pin vaikais ir galetume juos sudelioti aplink nuotraukas. */
:is(.no-motion, html:not(.js)) .cities__copy{ display:contents; }
:is(.no-motion, html:not(.js)) .cities__label{ order:1; pointer-events:auto; }
:is(.no-motion, html:not(.js)) .cities__stage{
  order:2; position:relative; inset:auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1vw,16px);
}
:is(.no-motion, html:not(.js)) .city{ position:relative; inset:auto; aspect-ratio:3/4; overflow:hidden; }
:is(.no-motion, html:not(.js)) .city__img{ position:absolute; left:0; top:0; width:100%; height:100%; }
:is(.no-motion, html:not(.js)) .cities__scrim{ display:none; }
:is(.no-motion, html:not(.js)) .cities__copyset{
  order:3; pointer-events:auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1vw,16px);
}
:is(.no-motion, html:not(.js)) .city-copy{ grid-area:auto; opacity:1 !important; visibility:visible !important; }
:is(.no-motion, html:not(.js)) .city-name{ font-size:clamp(1.25rem,2.1vw,1.95rem); margin-bottom:10px; }
:is(.no-motion, html:not(.js)) .city-text{ font-size:.9375rem; max-width:none; }
:is(.no-motion, html:not(.js)) :is(.cities__index, .rail--h){ display:none; }

:is(.no-motion, html:not(.js)) .rcard{ position:relative; top:auto; }
/* Prisegtame variante tarp korteliu paliekamas didelis tarpas - jo
   reikia, kad slenkant jos suslinktu viena ant kitos. Kai nieko
   nebeprisegame, tas tarpas virsta tuscia ekranu, todel sumazinam. */
:is(.no-motion, html:not(.js)) .rcard + .rcard{ margin-top:clamp(18px,2.4vw,32px); }
:is(.no-motion, html:not(.js)) .rcard{ box-shadow:0 14px 34px -28px rgba(10,15,26,.4); }

/* Siauresni ekranai: kadras virsta normaliu bloku, o miestai - vienas po
   kito. Nuotrauku ir tekstu tinkleliai paverciami display:contents, kad
   visi jie taptu .cities__pin vaikais ir per „order" galetume sudeti
   pora „nuotrauka -> tekstas" - kitaip stulpeliuose jie issiskirtu. */
@media (max-width:940px){
  /* Siaurame ekrane filmukas uzima visa hero fona (taip pat kaip
     animuotoje versijoje), tad taskeliai keliasi virs miestu juostos. */
  .no-motion .hero__dots{ bottom:96px; }
  :is(.no-motion, html:not(.js)) :is(.cities__stage, .cities__copyset){ display:contents; }
  :is(.no-motion, html:not(.js)) .city{ aspect-ratio:16/10; }
  :is(.no-motion, html:not(.js)) .city[data-city="0"]{ order:2; }
  :is(.no-motion, html:not(.js)) .city-copy[data-city="0"]{ order:3; }
  :is(.no-motion, html:not(.js)) .city[data-city="1"]{ order:4; }
  :is(.no-motion, html:not(.js)) .city-copy[data-city="1"]{ order:5; }
  :is(.no-motion, html:not(.js)) .city[data-city="2"]{ order:6; }
  :is(.no-motion, html:not(.js)) .city-copy[data-city="2"]{ order:7; }
  :is(.no-motion, html:not(.js)) .city[data-city="3"]{ order:8; }
  :is(.no-motion, html:not(.js)) .city-copy[data-city="3"]{ order:9; }
  :is(.no-motion, html:not(.js)) .city-copy{ margin-bottom:clamp(10px,3vw,20px); }
  :is(.no-motion, html:not(.js)) .city-name{ font-size:clamp(1.75rem,6.5vw,2.4rem); }
}