/* ============================================================================
   FINCLARITY — vizualinė sistema
   Žetonai (tokens) → bazė → komponentai → sekcijos → responsyvumas
   Kontrastai patikrinti pagal WCAG 2.2 AA. Pastabos prie spalvų.
   ========================================================================== */

/* ---------- 1. ŽETONAI ---------------------------------------------------- */
:root {
  /* Spalvos pagal vaidmenį */
  --brand:        #1E3A34;  /* gilus žalsvai pilkas */
  --brand-deep:   #16302A;  /* tamsios sekcijos */
  --bg:           #F7F5F0;  /* šiltas popierius */
  --surface:      #FFFFFF;
  --surface-sunk: #F1EEE6;
  /* Pirmo ekrano gradiento virsus — firmines zalios atspalvis.
     Patikrintas kiekvienas tekstas, kuris ant jo atsiduria (hero, "Ar tinkame"
     ir permatoma antraste): silpniausia pora #4A524E duoda 5,49:1 ✓.
     --bg-mid yra 85 % kelio nuo --bg-top iki --surface-sunk: tiek sudaro hero
     visame ruoze iki "Ar tinkame" vidurio, todel spalva kinta tolygiai. */
  --bg-top: #C7DACB;
  --bg-mid: #EBEBE2;

  --ink:          #1C1F1E;  /* 15.8:1 ant --bg ✓ */
  --ink-2:        #4A524E;  /*  7.4:1 ant --bg ✓ */
  --ink-3:        #6B7370;  /*  4.9:1 ant --bg ✓ (tik smulkiam, ne gyvybiškai svarbiam) */

  /* VEIKSMO spalva. Pradinis #C2571A su baltu tekstu = 4.47:1 → NEPRAEINA AA.
     Patamsinta iki #B04E15 = 5.33:1 su baltu ✓ ir 4.89:1 kaip nuoroda ant --bg ✓ */
  --action:       #B04E15;
  --action-hover: #96410F;
  --action-ink:   #FFFFFF;

  --accent:       #D9C9A3;  /* prislopintas žalvaris — TIK dekoratyvus, niekada ne mygtukas */
  --rule:         #DED9CC;  /* plonos skiriamosios linijos (dekoratyvu) */
  --rule-strong:  #C3BDAC;
  --border-input: #6B7D77;  /* 4.4:1 ant balto ✓ (reikalavimas 3:1) */

  --on-dark:      #FFFFFF;  /* 14.1:1 ant --brand-deep ✓ */
  --on-dark-2:    #CFCABB;  /*  8.6:1 ✓ */
  --on-dark-rule: #37544C;

  --state-error:  #A32B1E;  /* 6.2:1 ant balto ✓ */
  --state-ok:     #1E5E3E;
  --focus:        #1E3A34;

  /* Tipografija */
  --font-ui:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(2.125rem, 1.35rem + 2.9vw, 3.5rem);
  --fs-h2:      clamp(1.625rem, 1.23rem + 1.45vw, 2.25rem);
  --fs-h3:      1.1875rem;
  --fs-body:    1.0625rem;   /* 17px — auditorijoje yra žmonių, kuriems reikia aiškaus teksto */
  --fs-small:   0.9375rem;
  --fs-label:   0.75rem;

  /* Tarpai — 4px bazė */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --sec-pad: clamp(var(--s-7), 5vw, var(--s-9));

  /* Konteineriai */
  --w-content: 1290px;
  --w-reading: 68ch;
  --gutter: clamp(16px, 4vw, 40px);

  /* Forma */
  --r-sm: 3px; --r-md: 4px; --r-lg: 6px;

  --header-h: 64px;
  --ease: cubic-bezier(.2,.6,.3,1);
}

/* ---------- 2. BAZĖ ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* [hidden] turi nugalėti bet kokį display, nustatytą komponentų taisyklėse */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* Virsutine juosta po permatoma antraste dazoma gradiento pradzios spalva,
     kad tarp antrastes ir hero neliktu matomos ribos. Zemiau viska uzdengia
     pacios sekcijos, todel likusiam puslapiui galioja iprastas --bg. */
  background-color: var(--bg);
  background-image: linear-gradient(var(--bg-top), var(--bg-top));
  background-repeat: no-repeat;
  background-size: 100% var(--header-h);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.18; margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: var(--fs-display); font-weight: 600; line-height: 1.1; }
h2 { font-size: var(--fs-h2);      font-weight: 600; }
h3 { font-size: var(--fs-h3);      font-weight: 600; letter-spacing: -0.005em; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--action); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--action-hover); }

/* Skaičiai — ženklinė tipografinė priemonė: monospace, lentelinės formos */
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

.label {
  font-family: var(--font-num);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--s-3);
}
.label--on-dark { color: var(--accent); }

.muted { color: var(--ink-2); font-size: var(--fs-small); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--brand); color: var(--on-dark);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md); text-decoration: none;
}
.skip-link:focus { top: var(--s-3); color: var(--on-dark); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.handover :focus-visible, .site-footer :focus-visible { outline-color: var(--accent); }

.wrap { width: 100%; max-width: var(--w-content); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--reading > * { max-width: var(--w-reading); }

/* ---------- 3. MYGTUKAI IR NUORODOS --------------------------------------- */
.btn {
  --btn-pad-y: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px;
  padding: var(--btn-pad-y) var(--s-5);
  font: inherit; font-size: var(--fs-small); font-weight: 600;
  border: 1px solid transparent; border-radius: var(--r-md);
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn--sm { min-height: 40px; padding: 9px var(--s-4); }

.btn--primary { background: var(--action); color: var(--action-ink); }
.btn--primary:hover { background: var(--action-hover); color: var(--action-ink); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--surface); border-color: var(--brand); color: var(--ink); }

.btn[disabled], .btn[aria-busy="true"] { cursor: progress; opacity: .85; }

.btn__spinner { display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; }
.btn[aria-busy="true"] .btn__spinner { display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"] .btn__spinner { animation-duration: 2s; } }

.link-arrow { font-weight: 600; font-size: var(--fs-small); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link-arrow::after { content: " →"; }
.link-arrow--on-dark { color: var(--accent); }
.link-arrow--on-dark:hover { color: var(--on-dark); }

.linklike { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-small);
  color: var(--action); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- 4. ANTRAŠTĖ --------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,245,240,.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--rule);
  transition: transform .25s var(--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }
/* Puslapio virsuje antraste susilieja su hero gradientu; vos pajudinus —
   fonas grazinamas. Be JS klase neprideda, tad lieka dabartinis nepermatomas fonas. */
.site-header.is-top { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } .site-header.is-hidden { transform: none; } }

.site-header__inner {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--brand); text-decoration: none; }
.brand__mark { flex: none; }
.brand__name { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; color: var(--ink); }

.site-nav { margin-left: auto; }
.site-nav__list { display: flex; gap: var(--s-5); }
.site-nav a {
  color: var(--ink-2); text-decoration: none; font-size: var(--fs-small); font-weight: 500;
  padding: var(--s-2) 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.site-nav a.is-active { color: var(--ink); border-bottom-color: var(--action); font-weight: 600; }

.site-header__actions { display: flex; align-items: center; gap: var(--s-3); margin-left: var(--s-2); }
.header-phone { display: none; text-decoration: none; color: var(--ink); font-size: var(--fs-small); white-space: nowrap; }
.header-phone__label { color: var(--ink-2); margin-right: 4px; }
.header-cta { white-space: nowrap; }

.nav-toggle {
  display: none; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-2) var(--s-3);
  background: transparent; border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--ink); cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; }
.nav-toggle__bars span { display: block; width: 18px; height: 2px; background: var(--ink); }
.nav-toggle[aria-expanded="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-dark); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { background: var(--on-dark); }

.mobile-nav { border-top: 1px solid var(--rule); background: var(--bg); padding: var(--s-4) 0 var(--s-5); }
.mobile-nav__list { padding-inline: var(--gutter); }
.mobile-nav__list a {
  display: block; padding: var(--s-3) 0; min-height: 44px;
  color: var(--ink); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid var(--rule);
}
.mobile-nav__list li:last-child a { color: var(--action); font-weight: 600; }
.mobile-nav__contact { padding: var(--s-4) var(--gutter) 0; display: grid; gap: var(--s-2); font-size: var(--fs-small); }
.mobile-nav__hours { color: var(--ink-2); }

/* ---------- 5. HERO ------------------------------------------------------- */
/* Pirmo ekrano gradientas. Sviesa krinta is virsaus: hero prasideda balta
   paviriaus spalva ir pereina i puslapio fona, o "Ar tinkame" sekcija ta perejima
   pabaigia ir ties savo viduriu nusistovi ties #F1EEE6. Naudojami tie patys
   zetonai, kurie jau yra sistemoje — naujos spalvos neivedamos. */
.hero {
  padding: clamp(var(--s-7), 6vw, var(--s-9)) 0 var(--sec-pad);
  background: linear-gradient(to bottom, var(--bg-top) 0%, var(--bg-mid) 100%);
}
.hero__grid { display: grid; gap: clamp(var(--s-6), 5vw, var(--s-8)); }

/* Hero turinio eiliškumas skiriasi mobiliajame: veiksmas keliauja aukščiau faktų,
   kad pirmame ekrane visada matytųsi, ką daryti. DOM eiliškumas lieka logiškas. */
.hero__message { display: flex; flex-direction: column; }
.hero__message h1            { order: 2; }
.hero__sub                   { order: 3; }
.hero__actions               { order: 4; }
.hero__reassure              { order: 5; }
.hero__facts                 { order: 6; margin-top: var(--s-6); }

.hero__message h1 em { font-style: normal; color: var(--brand); }
.hero__sub {
  margin-top: var(--s-5); max-width: 54ch;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); color: var(--ink-2);
}

.hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.hero__facts li { display: grid; gap: 2px; max-width: 24ch; }
.hero__facts .num { font-size: 1.375rem; font-weight: 600; color: var(--brand); }
.hero__facts span:last-child { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__reassure { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-2); }

/* ---------- 5b. ŽENKLINIS ELEMENTAS: TERMINŲ KALENDORIUS ------------------ */
.deadlines {
  background: var(--brand-deep); color: var(--on-dark);
  border-radius: var(--r-lg);
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  box-shadow: 0 1px 2px rgba(28,31,30,.06), 0 12px 32px -16px rgba(22,48,42,.45);
  align-self: start;
}
.deadlines__head h2 { font-size: 1.125rem; color: var(--on-dark); }
.deadlines__head .label { color: var(--accent); margin-bottom: var(--s-2); }

.deadlines__list { margin-top: var(--s-5); display: grid; }
.deadline {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--on-dark-rule);
}
.deadline:last-child { border-bottom: 1px solid var(--on-dark-rule); }
.deadline__date {
  font-size: 1.5rem; font-weight: 600; color: var(--accent);
  min-width: 4.5ch; text-align: right;
}
.deadline__body { display: grid; gap: 2px; }
.deadline__body strong { font-weight: 600; font-size: var(--fs-small); }
.deadline__body span { font-size: var(--fs-small); color: var(--on-dark-2); }
.deadline__in { font-family: var(--font-num); font-size: 0.8125rem; color: var(--accent); }

.deadlines__note { margin-top: var(--s-4); font-size: 0.8125rem; color: var(--on-dark-2); line-height: 1.5; }
.deadlines__note a { color: var(--accent); }

/* ---------- 6. AR TAI MAN? (kompaktiška juosta) --------------------------- */
.fit {
  padding: var(--s-7) 0;
  background-color: var(--surface-sunk);
  background-image: linear-gradient(to bottom, var(--bg-mid) 0%, var(--surface-sunk) 50%);
}
.fit__h { font-size: var(--fs-h3); margin-bottom: var(--s-5); }
.fit__cols { display: grid; gap: var(--s-6); }

.plain-list { display: grid; gap: var(--s-2); font-size: var(--fs-small); color: var(--ink-2); }
.plain-list li { line-height: 1.5; }
.fit__no .plain-list li { padding-left: var(--s-4); position: relative; }
.fit__no .plain-list li::before {
  content: ""; position: absolute; left: 0; top: .65em;
  width: 8px; height: 1px; background: var(--rule-strong);
}

/* ---------- 7. KAINA ------------------------------------------------------ */
.price { padding: var(--sec-pad) 0; }
.price__grid { display: grid; gap: var(--s-6); }
.price__intro h2 { margin-bottom: var(--s-4); }
.price__intro p { color: var(--ink-2); max-width: 56ch; }

.price-table { width: 100%; border-collapse: collapse; text-align: left; font-size: var(--fs-small); }
.price-table thead th {
  font-family: var(--font-num); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule-strong);
}
.price-table tbody th { font-weight: 600; color: var(--ink); width: 34%; }
.price-table tbody th, .price-table tbody td {
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.price-table tbody td { color: var(--ink-2); }

.price__onetime { grid-column: 1 / -1; }
.price__onetime h3 { margin-bottom: var(--s-4); }
.onetime-list { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.onetime-list li {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s-4); display: grid; gap: var(--s-1); align-content: start;
}
.onetime-list__name { font-weight: 600; font-size: var(--fs-small); }
.onetime-list__price { font-size: 1.0625rem; color: var(--brand); font-weight: 600; }
.onetime-list__note { font-size: 0.8125rem; color: var(--ink-2); }

.price__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.price__cta-note { font-size: var(--fs-small); color: var(--ink-2); }

/* ---------- 8. KAS ĮEINA -------------------------------------------------- */
.included { padding: var(--sec-pad) 0; background: var(--surface-sunk); }
.included h2 { margin-bottom: var(--s-6); max-width: 24ch; }
.included__grid { display: grid; gap: var(--s-6); }

.check-list { display: grid; gap: 0; }
.check-list li {
  position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--rule-strong); font-size: var(--fs-small);
}
.check-list li::before {
  content: ""; position: absolute; left: 2px; top: 1.05em;
  width: 11px; height: 6px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}
/* Trumpiems punktams (veiklos formos): mazesnis vertikalus ritmas,
   paskutine eilute be linijos, kad sarasas neatrodytu nukirstas. */
.check-list--card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-5);
}
.check-list--tight li { padding-top: var(--s-2); padding-bottom: var(--s-2); }
.check-list--tight li::before { top: .85em; }
.check-list--tight li:last-child { border-bottom: 0; }

.included__aside {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s-5); align-self: start;
}
.included__aside h3 { font-size: var(--fs-small); margin-bottom: var(--s-3); }
.included__prog { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule);
  font-size: var(--fs-small); color: var(--ink-2); }

/* ---------- 9. PERĖJIMAS (tamsi sekcija, path draw) ----------------------- */
.handover { padding: var(--sec-pad) 0; background: var(--brand-deep); color: var(--on-dark); }
.handover h2 { color: var(--on-dark); max-width: 22ch; }
.handover__lead { margin-top: var(--s-4); max-width: 58ch; color: var(--on-dark-2); }

.steps { position: relative; margin-top: var(--s-8); display: grid; gap: var(--s-6); }
.steps__line { position: absolute; inset: 0; width: 100%; height: 100%; color: #4E7368;
  pointer-events: none; overflow: visible; }
.steps__line path { stroke-dasharray: var(--dash, 0); stroke-dashoffset: var(--dash, 0); }
.steps.is-drawn .steps__line path {
  transition: stroke-dashoffset 1.4s var(--ease);
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .steps__line path { stroke-dashoffset: 0 !important; transition: none !important; }
}

.step { position: relative; }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-deep); border: 1px solid var(--accent);
  color: var(--accent); font-size: 0.8125rem; font-weight: 600;
  margin-bottom: var(--s-3); position: relative; z-index: 1;
}
.step__h { color: var(--on-dark); font-size: 1.0625rem; }
.step__who {
  display: inline-block; margin: var(--s-2) 0;
  font-family: var(--font-num); font-size: 0.75rem; letter-spacing: .04em;
  padding: 3px var(--s-2); border-radius: 2px;
}
/* Nepermatoma bazine spalva + persvieciamas sluoksnis ant jos: kitaip
   po zyma matytusi linija (zr. .step__h / .step__text komentara). */
.step__who--you {
  background-color: var(--brand-deep);
  background-image: linear-gradient(rgba(217,201,163,.18), rgba(217,201,163,.18));
  color: var(--accent); border: 1px solid var(--on-dark-rule);
}
.step__who--us {
  background-color: var(--brand-deep);
  background-image: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08));
  color: var(--on-dark-2); border: 1px solid var(--on-dark-rule);
}
.step__text { font-size: var(--fs-small); color: var(--on-dark-2); line-height: 1.55; }

/* Proceso linija piesiama uz zingsniu, o siauruose ekranuose stulpelis vienas,
   todel ji nusileidzia tiesiai per teksta. Tekstas gauna sekcijos fono spalva
   ir uzdengia linija toje vietoje, kur ji butu perskrodusi raides.
   Neigiama parastes reiksme grazina optini kairiji krasta i stulpelio linija. */
.step__h, .step__text {
  background: var(--brand-deep);
  padding: 5px; margin-inline: -5px;
}

.handover__after {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--on-dark-rule);
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center;
  color: var(--on-dark-2); font-size: var(--fs-small);
}

/* ---------- 10. KOMANDA --------------------------------------------------- */
.team { padding: var(--sec-pad) 0; }
.team h2 { max-width: 26ch; margin-bottom: var(--s-7); }
.team__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); width: 100%; }
.person__photo {
  aspect-ratio: 1 / 1; background: var(--surface-sunk);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  overflow: hidden; margin-bottom: var(--s-4);
}
/* Nuotraukos kvadratines ir remelis kvadratinis — niekas nekerpama,
   todel kadras lieka toks, koks nufotografuotas. */
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.person__name { font-size: var(--fs-h3); }
.person__role { font-size: var(--fs-small); color: var(--brand); font-weight: 500; margin-top: 2px; }
.person__does { font-size: var(--fs-small); color: var(--ink-2); margin-top: var(--s-2); }
.person__cred { font-size: var(--fs-small); color: var(--ink-2); margin-top: var(--s-2); }

/* ---------- 11. RIZIKA ---------------------------------------------------- */
.risk { padding: 0 0 var(--sec-pad); }
.risk h2 { margin-bottom: var(--s-4); }
.risk p { color: var(--ink-2); }
.facts { margin: var(--s-5) 0 0; display: grid; gap: 0; }
.facts > div {
  display: grid; grid-template-columns: minmax(180px, 38%) 1fr; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-small);
}
.facts dt { color: var(--ink-2); margin: 0; }
.facts dd { margin: 0; font-weight: 500; }

/* ---------- 12. FORMA ----------------------------------------------------- */
.quote { padding: var(--sec-pad) 0; background: var(--surface-sunk); border-top: 1px solid var(--rule); }
.quote__grid { display: grid; gap: var(--s-7); align-items: start; }
.quote__side h2 { margin-bottom: var(--s-5); max-width: 20ch; }
.quote__points { display: grid; gap: var(--s-2); font-size: var(--fs-small); color: var(--ink-2); }
.quote__points li { padding-left: var(--s-4); position: relative; }
.quote__points li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%; }
.quote__points strong { color: var(--ink); }

.quote__alt { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule-strong); }
.quote__alt h3 { font-size: var(--fs-small); margin-bottom: var(--s-2); }
.quote__alt p { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--s-3); }
.contact-list { display: grid; gap: var(--s-2); font-size: var(--fs-small); }

.qform {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: clamp(var(--s-5), 3vw, var(--s-6));
}

/* Stepper */
.stepper { display: flex; gap: var(--s-2); margin-bottom: var(--s-6); }
.stepper__item {
  display: flex; align-items: center; gap: var(--s-2); flex: 1;
  padding-bottom: var(--s-3); border-bottom: 2px solid var(--rule-strong);
  font-size: var(--fs-small); color: var(--ink-3);
}
.stepper__item.is-current { border-bottom-color: var(--action); color: var(--ink); font-weight: 600; }
.stepper__item.is-done { border-bottom-color: var(--brand); color: var(--ink-2); }
.stepper__num {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-sunk); border: 1px solid var(--rule-strong); font-size: 0.75rem;
}
.stepper__item.is-current .stepper__num { background: var(--action); border-color: var(--action); color: #fff; }
.stepper__item.is-done .stepper__num { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Laukai */
.field { margin-bottom: var(--s-5); border: 0; padding: 0; min-width: 0; }
.field > label, .field legend {
  display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: var(--s-2); padding: 0;
}
.field__hint, .field__group-hint { font-size: 0.8125rem; color: var(--ink-2); margin: -4px 0 var(--s-3); }
.field__group-hint { margin: calc(-1 * var(--s-3)) 0 var(--s-4); }
.req { color: var(--action); }
.opt { font-weight: 400; color: var(--ink-2); }

input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-input); border-radius: var(--r-md);
  padding: 12px var(--s-3); min-height: 48px;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input:hover, textarea:hover { border-color: var(--brand); }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--brand); }
::placeholder { color: var(--ink-3); opacity: 1; }

.radio-grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.radio-grid--compact { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.radio-card {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: var(--s-3);
  background: var(--surface); border: 1px solid var(--border-input); border-radius: var(--r-md);
  font-size: var(--fs-small); cursor: pointer;
}
.radio-card:hover { border-color: var(--brand); background: var(--surface-sunk); }
.radio-card input { accent-color: var(--brand); width: 18px; height: 18px; margin: 0; flex: none; }
.radio-card:has(input:checked) {
  border-color: var(--brand); border-width: 2px; padding: calc(var(--s-3) - 1px);
  background: #EFF2F0; font-weight: 600;
}
.radio-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.field--consent { background: var(--surface-sunk); border-radius: var(--r-md); padding: var(--s-4); }
.consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-small);
  font-weight: 400; cursor: pointer; margin: 0; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }

/* Klaidos */
.field__error {
  display: flex; gap: var(--s-2); align-items: flex-start;
  margin-top: var(--s-2); font-size: 0.8125rem; color: var(--state-error); font-weight: 500;
}
.field__error::before { content: "!"; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--state-error); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; margin-top: 2px; }
.field.has-error input, .field.has-error textarea { border-color: var(--state-error); border-width: 2px; }
.field.has-error .radio-card { border-color: var(--state-error); }

.qform__nav { margin-top: var(--s-6); }
.qform__nav--split { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; }
.qform__nav .btn { flex: 1 1 auto; }
.qform__reassure { margin-top: var(--s-4); font-size: 0.8125rem; color: var(--ink-2); }

.qform__status {
  margin-top: var(--s-5); padding: var(--s-4);
  background: #FDF1EF; border: 1px solid #E8B9B2; border-left: 3px solid var(--state-error);
  border-radius: var(--r-md); font-size: var(--fs-small); color: var(--ink);
}
.qform__success { text-align: left; }
.qform__success h3 { margin-bottom: var(--s-3); color: var(--state-ok); }
.qform__success p { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--s-3); }

.form-success__demo {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px dashed var(--rule-strong);
  font-family: var(--font-num); font-size: 0.75rem; color: var(--ink-3);
}

/* ---------- 13. D.U.K. ---------------------------------------------------- */
.faq { padding: var(--sec-pad) 0; }
.faq h2 { margin-bottom: var(--s-6); }
.accordion { border-top: 1px solid var(--rule-strong); }
.acc { border-bottom: 1px solid var(--rule-strong); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0; min-height: 52px;
  font-weight: 600; font-size: var(--fs-small); cursor: pointer; list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s var(--ease);
}
.acc[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.acc summary:hover { color: var(--brand); }
.acc__body { padding: 0 0 var(--s-4); font-size: var(--fs-small); color: var(--ink-2); max-width: 62ch; }
.faq__cta { margin-top: var(--s-6); font-size: var(--fs-small); color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ---------- 14. PORAŠTĖ --------------------------------------------------- */
.site-footer { background: var(--brand-deep); color: var(--on-dark-2); padding: var(--sec-pad) 0 var(--s-6); font-size: var(--fs-small); }
.site-footer__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.site-footer__brand p { margin-top: var(--s-3); max-width: 34ch; }
.brand__name--footer { color: var(--on-dark); font-size: 1.125rem; font-weight: 700; }
.site-footer__h { font-family: var(--font-num); font-size: var(--fs-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: var(--s-3); }
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--accent); }
.site-footer .linklike { color: var(--on-dark); }
.site-footer__bottom { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--on-dark-rule); font-size: 0.8125rem; }

/* ---------- 15. SLAPUKAI -------------------------------------------------- */
.cookie {
  position: fixed; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 60;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  box-shadow: 0 16px 40px -20px rgba(22,48,42,.5);
  padding: var(--s-4);
}
.cookie__inner { display: grid; gap: var(--s-4); max-width: var(--w-content); margin-inline: auto; }
.cookie__h { font-size: var(--fs-small); margin-bottom: var(--s-2); }
.cookie p { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.5; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cookie__actions .btn { flex: 1 1 auto; }

/* ---------- 16. TEISINIAI PUSLAPIAI --------------------------------------- */
.legal { padding: var(--s-8) 0 var(--sec-pad); }
.legal h1 { font-size: var(--fs-h2); margin-bottom: var(--s-5); }
.legal h2 { font-size: var(--fs-h3); margin: var(--s-6) 0 var(--s-3); }
.legal p, .legal li { font-size: var(--fs-small); color: var(--ink-2); }
.legal p + p { margin-top: var(--s-3); }
.legal ul { display: grid; gap: var(--s-2); margin-top: var(--s-3); padding-left: var(--s-5); list-style: disc; }
.legal .back { display: inline-block; margin-bottom: var(--s-5); font-size: var(--fs-small); }

/* ============================================================================
   17. RESPONSYVUMAS
   Lūžiai parinkti ten, kur lūžta turinys, o ne pagal įrenginių pavadinimus.
   ========================================================================== */

/* 560px: pakanka pločio dviem stulpeliams „Ar tinkame" ir kontaktams antraštėje */
@media (min-width: 35em) {
  .fit__cols { grid-template-columns: 1.4fr 1fr; gap: var(--s-7); }
  .cookie__inner { grid-template-columns: 1fr auto; align-items: center; }
  .cookie__actions .btn { flex: 0 0 auto; }
  .qform__nav .btn { flex: 0 0 auto; }
}

/* 760px: proceso žingsniai telpa į du stulpelius, forma – šalia argumentų */
@media (min-width: 47.5em) {
  :root { --header-h: 72px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-6); }
  .included__grid { grid-template-columns: 1.1fr .9fr; gap: var(--s-7); }
  .quote__grid { grid-template-columns: 1fr 1.15fr; gap: var(--s-8); }
  .price__grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: start; }
}

/* 1000px: hero telpa į dvi kolonas be per ilgų eilučių; procesas – į tris */
@media (min-width: 62.5em) {
  .hero__grid { grid-template-columns: 1.25fr .85fr; align-items: start; }
  /* Plačiau faktai grįžta prieš veiksmą – jie yra argumentas prieš paspaudimą */
  .hero__facts   { order: 4; margin-top: var(--s-6); }
  .hero__actions { order: 5; }
  .hero__reassure{ order: 6; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .price__grid { grid-template-columns: 1fr 1.1fr; }
}

/* 880px: inkarų meniu, telefonas ir CTA telpa į vieną eilutę nesusigrūdę.
   768 px planšetėje sąmoningai lieka kompaktiškas meniu (tablet.md §3). */
@media (min-width: 55em) {
  .nav-toggle { display: none !important; }
  .mobile-nav { display: none !important; }
  .site-nav { display: block; }
}

/* 1100px: atsiranda vietos ir telefono numeriui antraštėje */
@media (min-width: 68.75em) {
  .header-phone { display: inline-block; }
}

/* Kompaktiška antraštė iki 880px */
@media (max-width: 54.9375em) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { gap: var(--s-3); }
}

/* Telefonas: antraštėje lieka tik CTA; „Meniu“ užrašas slepiamas vizualiai,
   bet išlieka prieinamas pagalbinėms technologijoms. Apatinės veiksmų juostos
   sąmoningai nededame – ji susidurtų su slapukų juosta (mobile.md §3.3). */
@media (max-width: 47.4375em) {
  .header-cta { padding-inline: var(--s-3); font-size: 0.875rem; }
  .nav-toggle { padding-inline: var(--s-3); }
  .nav-toggle__text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .stepper__label { display: none; }
  .stepper__item { justify-content: center; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .deadlines { order: 2; }

  /* Vienas stulpelis: proceso linija leidziasi tiesiai per zingsnio turini,
     todel tarp antrastes, zymes ir teksto likdavo linijos atkarpos.
     Visas zingsnis gauna sekcijos fona ir uzdengia linija istisai — ji lieka
     matoma tik tarpuose tarp zingsniu, kur ir atlieka jungties darba. */
  .step { background: var(--brand-deep); }
  .step__h, .step__text { background: none; padding: 0; margin-inline: 0; }
}

/* 320–360px: antraštėje netelpa logotipo užrašas kartu su CTA ir meniu.
   Užrašas slepiamas – prieinamą pavadinimą išlaiko nuorodos aria-label. */
@media (max-width: 22.5em) {
  :root { --gutter: 14px; }
  .brand__name { display: none; }
  .header-cta { font-size: 0.8125rem; padding-inline: 10px; }
  .site-header__inner { gap: var(--s-2); }
  .hero__facts { gap: var(--s-4); }
  .deadline { grid-template-columns: 1fr; gap: var(--s-1); }
  .deadline__date { text-align: left; }
}

/* Spausdinimas */
@media print {
  .site-header, .cookie, .hero__actions, .qform, .nav-toggle { display: none !important; }
  body { background: #fff; }
  .handover, .site-footer, .deadlines { background: #fff !important; color: #000 !important; }
  .handover h2, .step__h, .deadlines__head h2 { color: #000 !important; }
}