/* SIMU tema — išdėstymas ir komponentai.
   Šriftus registruoja theme.json (fontFace), todėl @font-face čia nėra.
   Spalvos ateina iš tokens.css. Šiame faile nėra nė vienos hex reikšmės. */

/* --- Pagrindas --- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Atidarytas mobile meniu — fonas neturi slinktis po juo. */
body.has-open-nav {
  overflow: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul, ol, dl {
  margin: 0;
  padding: 0;
  list-style: none;
}

dd {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--simu-orange);
  outline-offset: 3px;
}

/* Ant užlietos Electric Blue oranžinis žiedas duotų 1,8:1.
   Baltas duoda 5,1:1. Laukelių žiedas lieka Navy ant balto fono. */
.cta :focus-visible {
  outline-color: var(--simu-white);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--simu-orange);
  color: var(--simu-on-orange);
  font-weight: 500;
}

.skip-link:focus {
  left: 0;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Konteineris ir tinklelis ---
   Linijos brėžiamos to paties konteinerio viduje, todėl 25/50/75%
   sutampa su tikrais turinio stulpelių kraštais. Tinklelis yra
   struktūra, o ne fono tekstūra. */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  /* Ašių linijos piešiamos ties var(--space-3), o turinys atsitraukia nuo jų
     per --grid-gutter. Todėl joks tekstas neremiasi į kraštinę liniją. */
  padding-inline: calc(var(--space-3) + var(--grid-gutter));
}

/* Tinkleliai privalo likti ant ašių, o .wrap juos ką tik pastūmė per
   --grid-gutter. Šitie yra .wrap VIDUJE, tad juos grąžina neigiama paraštė. */
.ledger-row,
.path,
.plan,
.steps,
.product-grid,
.work-grid,
.about {
  margin-inline: calc(var(--grid-gutter) * -1);
}

/* O šitie PATYS yra .wrap — jų žymos yra „wrap hero-inner", „wrap cta-inner",
   „wrap footer-inner". Neigiama paraštė juos ištemptų už konteinerio, todėl
   vietoj jos tiesiog grąžinam originalų vidinį tarpą: turinio dėžė vėl
   sutampa su ašimis, o tarpą duoda vaikai. */
.hero-inner,
.cta-inner,
.footer-inner {
  padding-inline: var(--space-3);
}

/* Tarpas simetriškas: stulpelio turinys atsitraukia ir nuo kairės, ir nuo
   dešinės savo ašies. Be padding-right paskutinė skiltis remdavosi tiesiai
   į dešinę kraštinę liniją, nors kairėje tarpą turėjo. */
.hero-inner > *,
.cta-inner > *,
.footer-inner > * {
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);
}

/* Eilučių stulpeliai atsitraukia nuo savo vidinių ašių. Bazinis lygis —
   galioja ir telefone, kur eilutė yra vieno stulpelio. */
.path > *,
.plan > *,
.ledger-row > *,
.steps > *,
.about > * {
  padding-left: var(--grid-gutter);
}

/* DUK anksčiau sėdėjo siauresniame centruotame konteineryje, todėl jo
   kairysis kraštas nepataikydavo į ašį. Dabar tai įprastas konteineris,
   o siaurumą duoda trys stulpeliai iš keturių — kraštas lieka ant ašies. */
.wrap-narrow {
  max-width: 1120px;
}

.faq {
  /* 75% nuo .wrap turinio duoda 982 px — 6 px pro ketvirtą ašį ties 988,
     ir horizontalios DUK linijos baigiasi beveik, bet ne ant jos.
     Skaičiuojam nuo tinklelio pločio (turinys + du tarpai), tada atimam
     vieną tarpą — kraštas atsistoja tiksliai ten, kur ašis. */
  max-width: calc((100% + 2 * var(--grid-gutter)) * 0.75 - var(--grid-gutter));
}

.lined {
  position: relative;
}

.lined::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1120px;
  padding-inline: var(--space-3);
  pointer-events: none;

  /* Keturios ašys: abi kraštinės plius 25% ir 75%.
     Vidurinės, ties 50%, nėra sąmoningai.

     Anksčiau linijos buvo piešiamos vienu kartojamu 25% pločio raštu, todėl
     ties 50% ji atsirasdavo savaime. Praktikoje būtent ji ir kliuvo: tai
     vienintelė linija, kuri perskiria visą puslapį per pusę, ir akis ją
     skaito ne kaip tinklelį, o kaip perskyrimą. Telefone, kur turinys yra
     vienas stulpelis, ji dar ir eidavo tiesiai per tekstą.

     Likusios dvi vidinės žymi tikras turinio ribas: 25% — portreto stulpelį
     sekcijoje „Apie“, 75% — hero kopijos ir ekranvaizdžio sandūrą.

     Kiekviena linija dabar yra atskiras 1 px sluoksnis su savo padėtimi.
     Ilgiau parašyta, bet pasakyta tiksliai: pridėti ar atimti ašį reiškia
     pridėti ar atimti vieną eilutę, o ne perskaičiuoti rašto plotį. */
  --grid-line: var(--grid-on-dark);
  background-image:
    linear-gradient(var(--grid-line), var(--grid-line)),
    linear-gradient(var(--grid-line), var(--grid-line)),
    linear-gradient(var(--grid-line), var(--grid-line)),
    linear-gradient(var(--grid-line), var(--grid-line));
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: 0 0, 25% 0, 75% 0, 100% 0;
  background-origin: content-box;
  background-clip: content-box;
}

.lined > * {
  position: relative;
}

.section {
  border-top: 1px solid var(--line-on-dark);
  padding-block: var(--space-12);
}

/* Indeksas anksčiau sėdėjo 4rem stulpelyje, todėl pavadinimas prasidėdavo
   88 px nuo ašies. Dabar abu flush ant tos pačios ašies. */
.section-head {
  margin-bottom: var(--space-8);
}

.section-index {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted-on-dark);
}

.section-title {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--step-4));
  max-width: 20ch;
}

.price-emphasis {
  position: relative;
  display: inline-block;
}

.price-emphasis::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 3px;
  background: var(--accent);
  transform: none;
  transform-origin: left;
}

.has-js .section-head.reveal .price-emphasis::after {
  transform: scaleX(0);
  transition: transform 640ms cubic-bezier(0.4, 0, 0.2, 1);
}

.has-js .section-head.reveal.is-line-visible .price-emphasis::after {
  transform: scaleX(1);
  transition-delay: 180ms;
}

.section-lead {
  margin-top: var(--space-3);
  max-width: 60ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted-on-dark);
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eyebrow-on-dark);
}

/* --- Mygtukai ---
   .btn-primary yra vienintelis oranžinis elementas ekrane. Tekstas ant jos
   visada Navy: baltas duoda 2,8:1 ir nepraeina WCAG AA, Navy duoda 6,6:1. */

.btn,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}

.btn-primary .wp-block-button__link,
.btn-primary {
  background: var(--simu-orange);
  color: var(--simu-on-orange);
}

.btn-primary .wp-block-button__link:hover,
.btn-primary:hover {
  background: var(--simu-orange-hover);
}

.btn-ghost .wp-block-button__link,
.btn-ghost {
  background: transparent;
  color: inherit;
  border-color: var(--line-interactive);
}

.btn-ghost .wp-block-button__link:hover,
.btn-ghost:hover {
  border-color: currentColor;
}

.btn-sm .wp-block-button__link,
.btn-sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--step--1);
}

.btn-block .wp-block-button__link,
.btn-block {
  width: 100%;
}

.link-arrow {
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--line-interactive);
  /* Optinis atstumas iki pabraukimo, ne išdėstymo tarpas — todėl ne iš skalės. */
  padding-bottom: 2px;
  transition: border-color var(--ease);
}

.link-arrow::after {
  content: " →";
}

.link-arrow:hover {
  border-color: currentColor;
}

/* --- Antraštė: lipni, todėl CTA joje kontūrinis --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--line-on-dark);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 76px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-15);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.logo-mark-image,
.logo-word-image {
  display: block;
  flex: 0 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.logo-mark-image {
  width: 24px;
  height: 34px;
  background-image: url("../assets/images/simu-logo-mark.png");
}

.logo-word-image {
  width: 72px;
  height: 16px;
  background-image: url("../assets/images/simu-logo-word.png");
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Header CTA: kol matomas hero — apvedžiotas baltas, nes hero CTA jau
   oranžinis ir ekrane privalo likti vienas oranžinis elementas.
   Nuskrolinus žemiau hero jis perima oranžinį vaidmenį. */
.nav-cta {
  background: transparent;
  color: var(--text-on-dark);
  border-color: var(--text-on-dark);
}

.nav-cta:hover {
  background: var(--simu-white);
  color: var(--simu-navy);
}

.is-past-hero .nav-cta {
  background: var(--simu-orange);
  color: var(--simu-on-orange);
  border-color: var(--simu-orange);
}

.is-past-hero .nav-cta:hover {
  background: var(--simu-orange-hover);
  color: var(--simu-on-orange);
}

/* Antraštės CTA temoje. Būtina atskirai, nes .nav-cta kabo ant
   <div class="wp-block-button">, kuris turi display: contents — jo fonas
   niekada nepiešiamas. Matomas yra vidinis <a class="wp-block-button__link">,
   o jį theme.json elements.button nudažo oranžine. Be šitų keturių taisyklių
   antraštės mygtukas oranžinis jau puslapio viršuje, ir pirmame ekrane
   atsiranda du užpildyti oranžiniai elementai vietoj vieno. */
.nav-cta .wp-block-button__link {
  background: transparent;
  color: var(--text-on-dark);
  border-color: var(--text-on-dark);
}

.nav-cta .wp-block-button__link:hover {
  background: var(--simu-white);
  color: var(--simu-navy);
}

.is-past-hero .nav-cta .wp-block-button__link {
  background: var(--simu-orange);
  color: var(--simu-on-orange);
  border-color: var(--simu-orange);
}

.is-past-hero .nav-cta .wp-block-button__link:hover {
  background: var(--simu-orange-hover);
  color: var(--simu-on-orange);
}

.nav-list {
  display: flex;
  gap: var(--space-3);
  font-size: var(--step--1);
}

.nav-list a {
  text-decoration: none;
  color: var(--text-muted-on-dark);
  padding-block: var(--space-1);
}

.nav-list a:hover {
  color: var(--text-on-dark);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-interactive);
  color: inherit;
  font-size: var(--step--1);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}

/* --- Hero: antraštė yra vizualas --- */

.hero {
  position: relative;
  min-height: calc(100svh - 76px);
  display: grid;
  align-content: center;
  /* justify-content: center čia buvo nereikalingas ir žalingas: su juo `auto`
     tinklelio takelis nustoja tįsti per visą plotį ir susitraukia iki turinio,
     todėl hero tapdavo 1114 px vietoj 1120 ir nusislinkdavo 3 px į dešinę.
     .wrap centruojasi pats per margin-inline: auto. */
  padding-block: var(--space-12);
}

/* Vertikali juosta kairiajame lango krašte — laiko kompoziciją
   ir nekartoja nė vieno įprasto hero sprendimo. */
.hero-rail {
  position: absolute;
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 0.6875rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-faint);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: var(--space-8) 0;
}

.hero-copy {
  grid-column: 1 / 4;
}

/* Ilgiausia eilutė „automatizuojame." užima 8,03 x šrifto dydžio.
   Stulpelis yra 804 px, tad riba — 100 px. Vietoj fiksuoto skaičiaus dydis
   pririštas prie paties stulpelio pločio (cqw), kad pakeitus tinklelį
   antraštė nebeišlįstų niekada. Pirmoji eilutė — atsarginė senesnėms
   naršyklėms, kurios cqw nemoka. */
.hero-copy {
  container-type: inline-size;
}

.hero-title {
  margin-block: var(--space-4) var(--space-6);
  /* Ilgiausia eilutė „automatizuojame." užima ~8x šrifto dydžio, o
     .hero-word yra flex su nowrap — persikelti į kitą eilutę ji negali.
     Todėl dydį riboja pats stulpelis (cqw), o ne fiksuotas skaičius:
     11.8cqw x 8 = 94% stulpelio, tad netelpa niekada.
     Pirma eilutė — atsarginė naršyklėms be cqw palaikymo. */
  font-size: clamp(1.75rem, 0.5rem + 9vw, 6.1rem);
  font-size: min(max(1.75rem, 0.5rem + 9vw), 11.8cqw, var(--step-7));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  hyphens: auto;
  max-width: none;
}

.hero-title > span {
  display: block;
}

.hero-title .hero-word {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
}

.hero-letter {
  display: inline-block;
  flex: 0 0 auto;
}

/* Mėlyna ant Navy duoda 3,6:1 — tinka tik dideliam tekstui.
   Todėl ji naudojama antraštėje ir 3 px linijose, niekada smulkiame tekste. */
.hero-title .accent {
  color: var(--accent);
}

.hero-lead {
  max-width: 54ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted-on-dark);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

/* Dešinė kolona: viršuje realaus darbo įrodymas, po juo informacinė juosta.
   align-items: start visam tinkleliui — juostos viršus lygiuojasi su eyebrow,
   todėl virš jos nebelieka tuščios zonos. */
.hero-aside {
  grid-column: 4 / 5;
  align-self: start;
}

.hero-shot {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-on-dark);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.hero-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ta pati priežastis kaip darbų kortelėse: viso puslapio ekranvaizdis,
     nukirptas per vidurį, rodo atsitiktinę juostą. Nuo viršaus visada
     matyti pirmas ekranas. */
  object-position: top center;
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --- Pirmo ekrano ekranvaizdis kaip nuoroda ---

   Rėmelis ir proporcijos tos pačios, tad įjungus ar išjungus žymę
   „Pirmas ekranas“ maketas nepajuda. Skiriasi tik tai, kad dabar tai
   pasiekiamas elementas: display: block reikalingas, nes <a> pagal
   nutylėjimą yra inline ir aspect-ratio jam negaliotų. */

.hero-shot-link {
  display: block;
  text-decoration: none;
}

.hero-shot-link:hover img,
.hero-shot-link:focus-visible img {
  transform: scale(1.03);
}

/* Projekto vardas po ekranvaizdžiu. Iki šiol čia buvo „Neseniai paleistas
   darbas“ — tiesa, bet bevardė. Įvardijus projektą, nuotrauka iš dekoracijos
   virsta patikrinamu teiginiu. */
.hero-shot-type {
  display: block;
  margin-top: var(--space-05);
  letter-spacing: 0.1em;
  color: var(--text-muted-on-dark);
}

/* Vieta ekranvaizdžiui, kol jo nėra. Matmenys fiksuoti aspect-ratio,
   todėl įdėjus tikrą failą layoutas nešoks (jokio CLS). */
/* Tai statybinė anga, ne tuščia būsena. Skirtumas svarbus: tuščia būsena yra
   pranešimas lankytojui ir todėl centruojama, o anga — techninė žyma tam, kas
   pildys turinį, ir ji priklauso kampui.

   Centruota etiketė 244x305 dėžėje užėmė 9% ploto ir skaitėsi kaip „šitas
   elementas taip suprojektuotas". Kampe prisegta žyma skaitosi kaip „čia dar
   tuščia" — o tai ir yra tiesa. Tarpas tas pats --grid-gutter, kad net
   laikinas elementas paklustų tinkleliui. */
.shot-todo {
  display: block;
  width: 100%;
  height: 100%;
  padding: var(--grid-gutter);
  text-align: left;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 10px,
    var(--grid-on-dark) 10px 11px
  );
}

.hero-shot-caption {
  margin-top: calc(var(--space-4) * -1 + var(--space-1));
  margin-bottom: var(--space-4);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero-meta {
  font-size: var(--step--1);
}

.hero-meta dt {
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-on-dark);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero-meta dd {
  margin-bottom: var(--space-4);
  color: var(--text-muted-on-dark);
  line-height: 1.45;
}

/* --- Trys keliai --- */

/* Trys keliai — pilno pločio eilutės. Trys stulpeliai dalytųsi ties 33/66%
   ir kirstų tinklelio ašis; eilutės jų nekerta iš viso. */
.path-grid {
  border-top: 1px solid var(--line-on-dark);
}

/* Stulpelių tarpas 0: kiekvieno stulpelio kairysis kraštas lieka ant ašies.
   Kvėpavimas daromas dešiniuoju padding'u, ne gap'u. */
.path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line-on-dark);
  text-decoration: none;
  transition: background-color var(--ease);
}

.path::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 260ms ease;
}

.path:hover,
.path:focus-visible {
  background: var(--surface-dark);
}

.path:hover::before,
.path:focus-visible::before {
  transform: scaleY(1);
}

.path > * {
  padding-right: var(--space-3);
}

.path-label {
  padding-left: var(--grid-gutter);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eyebrow-on-dark);
}

.path-title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.path-text {
  grid-column: 3 / 4;
  /* Trečias stulpelis stovėdavo tiksliai ant vidurinės ašies linijos —
     tekstas atrodė prilipęs. Duodam tą patį tarpą, kurį turi antras. */
  padding-left: var(--grid-gutter);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-muted-on-dark);
}

.path-more {
  grid-column: 4 / 5;
  font-size: var(--step--1);
  font-weight: 500;
}

.path-more::after {
  content: " →";
  display: inline-block;
  transition: transform var(--ease);
}

.path:hover .path-more::after,
.path:focus-visible .path-more::after {
  transform: translateX(6px);
}

/* --- Paslaugos: penkios kryptys kaip registras, ne kortelės --- */

.ledger {
  border-top: 1px solid var(--line-on-dark);
}

.ledger-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line-on-dark);
  transition: background-color var(--ease);
}

.ledger-row:hover {
  background: var(--surface-dark);
}

.ledger-row > * {
  padding-right: var(--space-3);
}

.ledger-body {
  grid-column: 3 / -1;
  /* Tas pats, kaip .path-text: be šito tekstas remdavosi į ašies liniją. */
  padding-left: var(--grid-gutter);
}

.ledger-num {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--text-faint);
}

.ledger-title {
  font-size: var(--step-2);
}

/* Orientacinė kaina ir terminas po paslaugos pavadinimu. Atskira eilutė,
   smulkiu tekstu: tai atsakymas į dažniausią klausimą prieš susisiekiant,
   bet ne pats pavadinimas — hierarchija turi likti aiški. Rodoma tik ten,
   kur skaičius realus (žr. patterns/services.php). */
.ledger-from {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted-on-dark);
  font-variant-numeric: tabular-nums;
}

.ledger-text {
  color: var(--text-muted-on-dark);
  line-height: 1.6;
}

.ledger-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--text-faint);
}

.ledger-tags li::before {
  content: "· ";
}

/* --- Produktai --- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line-on-dark);
  border-left: 1px solid var(--line-on-dark);
}

.product {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6);
  border-right: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
}

.badge {
  padding: var(--space-05) var(--space-1);
  border: 1px solid currentColor;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.badge-live {
  color: var(--eyebrow-on-dark);
}

.badge-soon {
  color: var(--text-faint);
}

.product-title {
  font-size: var(--step-2);
}

.product-text {
  color: var(--text-muted-on-dark);
  line-height: 1.6;
}

.product-price {
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
}

.price-unit {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--text-muted-on-dark);
}

/* --- Darbai --- */

/* Du stulpeliai — riba ties 50% sutampa su vidurine tinklelio ašimi.
   Pirmas darbas per abu, kad trys elementai nesukurtų 33/66% dalybos. */
/* Keturios ašys, kiekvienas darbas per dvi. Tarpas tarp jų — dešinysis
   padding, kad kairieji kraštai liktų ant ašių. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6) 0;
}

.work {
  position: relative;
  grid-column: span 2;
  padding-right: var(--space-4);
}

/* Ankstesnis vertikalus hover akcentas nebenaudojamas. Aiškus reset'as
   neleidžia jam sugrįžti, jei puslapyje lieka senesnis CSS sluoksnis. */
.work::before {
  content: none;
}

/* Per visą plotį — tik pirmoji kortelė. Vienas didelis momentas sekcijoje,
   ir tik vienas: jis yra hierarchijos pareiškimas („štai naujausias darbas"),
   o antras toks pat platus elementas tą pareiškimą panaikintų.

   Anksčiau čia buvo ir „paskutinė nelyginė kortelė per visą plotį" taisyklė,
   skirta išvengti pusiau tuščios eilutės. Ji buvo klaidinga dviem būdais:
   paritetas apverstas (lead kortelė viena suvalgo eilutę, todėl likusios
   poruojasi 2+3, 4+5 — vieniša lieka LYGINĖ), o ištempta kortelė išlaikydavo
   4:3 proporciją ir virsdavo ~1120x840 px dėže. Vieniša kortelė dabar tiesiog
   lieka pusės pločio: tuščia pusė šitame ašių tinklelyje skaitosi kaip oras,
   ne kaip klaida — lygiai kaip hero, kur turinys užima 3 stulpelius iš 4. */
.work-lead {
  grid-column: 1 / -1;
  padding-right: 0;
}

.work-lead .work-shot {
  aspect-ratio: 21 / 9;
}

.work {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
}

.work-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-on-dark);
  overflow: hidden;
  /* Kadras prilipdomas prie kortelės apačios. Tekstas yra virš jo ir jo
     ilgis kortelėse skiriasi (aprašymas ir rezultatas — neprivalomi laukai),
     todėl be šito darbas be aprašymo pakeltų savo kadrą aukščiau už kaimyno
     ir eilutės ritmas subyrėtų. Tinklelis korteles ištempia iki vienodo
     aukščio, o vienodo aukščio kadras, prilipdytas prie apačios, visada
     prasideda tame pačiame taške. Skirtumą sugeria tarpas virš kadro.
     Telefone kortelė eilutėje viena, tempimo nėra — auto virsta nuliu ir
     niekas nesikeičia. */
  margin-top: auto;
}

.work-shot::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 1px;
  pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 0 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 2px 0 no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 0 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 2px 0 no-repeat;
  /* 220 ms, ne 720. Su beveik sekundės trukme rėmelis vis dar piešėsi tada,
     kai pelė jau buvo nuvesta kitur, ir hover nustodavo būti atsakymu į
     veiksmą. Slinkties animacijoms ilgesnė trukmė tinka — ten ji pasakoja;
     hover turi tik patvirtinti, kad elementas gyvas. */
  transition: background-size 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.work:hover .work-shot::before,
.work:focus-visible .work-shot::before {
  background-size:
    100% 2px,
    2px 100%,
    100% 2px,
    2px 100%;
}

/* Kortelėje veikia du hover ženklai: brėžiamas rėmelis ir judanti rodyklė.
   Trečias — paveikslėlio priartinimas — pašalintas. Trys signalai tam pačiam
   „čia galima spausti“ vienas kitą nustelbia, o iš jų priartinimas silpniausias:
   jis dar ir verčia naršyklę perpiešti didžiausią kortelės elementą. */
.work-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Viršutinis lygiavimas, ne centras. Darbų ekranvaizdžiai yra viso puslapio
     nuotraukos, kartais 6000 px aukščio. Centruotas kadras iš tokios nuotraukos
     iškerpa atsitiktinę vidurinę juostą — dažniausiai pusę poraštės ir pusę
     paskutinės sekcijos. Lankytojui tai neatpažįstama. Viršus visada rodo pirmą
     ekraną: būtent tą vaizdą, pagal kurį svetainė ir atpažįstama. */
  object-position: top center;
}

.work-meta {
  padding-left: var(--grid-gutter);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.work-title {
  padding-left: var(--grid-gutter);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.work-title::after {
  content: " →";
  display: inline-block;
  transition: transform var(--ease);
}

.work:hover .work-title::after,
.work:focus-visible .work-title::after {
  transform: translateX(6px);
}

/* --- Procesas --- */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-on-dark);
}

.steps::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform: none;
  transform-origin: left;
}

.has-js .motion-track::after {
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.has-js .motion-track.is-visible::after {
  transform: scaleX(1);
}

.step {
  padding: var(--space-4) var(--space-3) 0 var(--grid-gutter);
  border-right: 1px solid var(--line-on-dark);
}

.step:last-child {
  border-right: 0;
}

.step-num {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.step-title {
  margin-bottom: var(--space-1);
  font-size: var(--step-1);
}

.step-text {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-muted-on-dark);
}

/* --- Planai --- */

/* Planai — eilutės, vidus dalijasi į tas pačias keturias ašis. */
.plan-grid {
  border-top: 1px solid var(--line-on-dark);
}

.plan {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line-on-dark);
}

/* Kiekvieną planą užbaigia tas pats mėlynas akcentas. */
.plan::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform: none;
  transform-origin: left;
}

.has-js .plan::after {
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 160ms ease,
              transform 720ms cubic-bezier(0.4, 0, 0.2, 1);
}

.has-js .plan.is-line-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.plan > * {
  padding-right: var(--space-3);
}

.plan-name {
  font-size: var(--step-1);
}

.plan-price {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.plan-list {
  grid-column: 3 / 4;
  /* Tas pats, kaip .path-text ir .ledger-body. */
  padding-left: var(--grid-gutter);
  font-size: var(--step--1);
  color: var(--text-muted-on-dark);
}

.plan-cta {
  grid-column: 4 / 5;
}

.plan-list li {
  padding-block: var(--space-1);
  border-top: 1px solid var(--line-on-dark);
}

.plan-note {
  margin-top: var(--space-4);
  font-size: var(--step--1);
  color: var(--text-faint);
}

/* --- Apie: konkretus žmogus --- */

.about {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
}

.about-portrait {
  grid-column: 1 / 2;
  border: 1px solid var(--line-on-dark);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.about-copy {
  grid-column: 2 / -1;
}

/* Vieta ir CTA — paskutinės eilutės prieš kontaktų sekciją. */
.about-vieta {
  margin-top: var(--space-6);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.about-cta {
  margin-top: var(--space-4);
}

.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-name {
  font-size: var(--step-2);
}

.about-role {
  margin-top: var(--space-1);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eyebrow-on-dark);
}

.about-body {
  margin-top: var(--space-4);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted-on-dark);
  max-width: 56ch;
}

.about-body p + p {
  margin-top: var(--space-3);
}

.about-why-title {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
}

.about-why {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
  font-size: var(--step-0);
  color: var(--text-muted-on-dark);
}

.about-why li {
  padding-left: var(--space-3);
  position: relative;
}

.about-why li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.about-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
  margin-top: var(--space-6);
  font-size: var(--step--1);
}

.about-facts dt {
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-on-dark);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.about-facts dd {
  margin-bottom: var(--space-3);
  color: var(--text-muted-on-dark);
}

/* --- DUK --- */

.faq-item {
  border-top: 1px solid var(--line-on-dark);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line-on-dark);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  display: inline-block;
  font-weight: 400;
  color: var(--text-muted-on-dark);
  transform: rotate(0deg);
  transition: transform 260ms ease, color var(--ease);
}

.faq-item[open] summary::after {
  color: var(--accent);
  transform: rotate(45deg);
}

.faq-item > p {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-bottom: 0;
  max-width: 68ch;
  color: var(--text-muted-on-dark);
  transition: max-height 360ms cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 220ms ease,
              padding-bottom 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.faq-item[open] > p {
  max-height: 18rem;
  opacity: 1;
  padding-bottom: var(--space-3);
}

/* --- Baigiamasis CTA: vienintelė užlieta Electric Blue sekcija --- */

.cta {
  background: var(--flood);
  color: var(--text-on-dark);
  padding-block: var(--space-12);
}

/* Ant mėlynos 7% baltumo linijos dingsta — šiai sekcijai atskiras
   kintamasis. Storis ir ašių padėtis nesikeičia. */
.cta.lined::before {
  --grid-line: var(--grid-on-flood);
}

.cta-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
}

.cta-copy {
  grid-column: 1 / 3;
  padding-right: var(--space-6);
}

.cta-inner .form {
  grid-column: 3 / -1;
}

.cta-title {
  font-size: clamp(2rem, 1.1rem + 3.8vw, var(--step-5));
  line-height: 1;
}

.cta-text {
  margin-top: var(--space-3);
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: 1.5;
}

.cta-contacts {
  margin-top: var(--space-6);
  font-size: var(--step--1);
}

.cta-contacts li {
  padding-block: var(--space-1);
  border-top: 1px solid var(--line-on-dark);
}

/* --- Forma --- */

.field {
  margin-bottom: var(--space-3);
}

.field label {
  display: block;
  margin-bottom: var(--space-075);
  font-size: var(--step--1);
  font-weight: 500;
}

.field input,
.field textarea {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius);
  background: var(--simu-white);
  color: var(--simu-graphite);
  font-family: var(--font-body);
  font-size: var(--step-0);
}

/* Laukelio aukštis — pirštui patogus taikinys ir pakankamas kvėpavimas
   aplink tekstą. Žemesnis nei 48 px laukas mobiliajame jaučiasi ankštas. */
.field input {
  min-height: 50px;
}

.field textarea {
  resize: vertical;
  min-height: 140px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--simu-n-500);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--simu-navy);
  outline-offset: 2px;
}

/* Užlietoje mėlynoje sekcijoje mygtukas baltas su Navy tekstu.
   Oranžinis šioje vietoje būtų antras ekrane — header CTA jau oranžinis. */
.btn-invert {
  background: var(--simu-white);
  color: var(--simu-navy);
}

.btn-invert:hover {
  background: var(--simu-gray);
}

.form-note {
  margin-top: var(--space-2);
  font-size: var(--step--1);
}

/* --- Poraštė --- */

.site-footer {
  border-top: 1px solid var(--line-on-dark);
  padding-block: var(--space-8) var(--space-4);
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6) 0;
}

.footer-brand {
  grid-column: 1 / 2;
  padding-right: var(--space-3);
}

.footer-tag {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--text-muted-on-dark);
}

.footer-brand .logo-mark-image {
  width: 29px;
  height: 42px;
}

.footer-brand .logo-word-image {
  width: 90px;
  height: 20px;
}

/* display: contents — trys poraštės grupės tampa tiesioginiais
   .footer-inner vaikais ir atsistoja ant 2, 3 ir 4 ašies. */
.footer-nav {
  display: contents;
}

.footer-nav > * {
  padding-right: var(--space-3);
}

.footer-head {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer-nav a {
  font-size: var(--step--1);
  line-height: 2;
  text-decoration: none;
  color: var(--text-muted-on-dark);
}

.footer-nav a:hover {
  color: var(--text-on-dark);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--step--1);
  color: var(--text-faint);
}

/* --- Judesys: fail-safe ---
   Turinys matomas be JavaScript. Animacija įsijungia TIK tada, kai
   boot.js uždeda .has-js ant <html> ir main.js patvirtina, kad startavo.
   Jei JS lūžta, .has-js nuimama ir puslapis lieka matomas. */

.reveal {
  opacity: 1;
  transform: none;
}

.has-js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.has-js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero eilutės juda atskirai, kad pirmas ekranas turėtų aiškią pradžią.
   Pats h1 lieka matomas kaip konteineris — slepiamos tik jo eilutės. */
.has-js .hero-title.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.has-js .hero-title.reveal > span {
  opacity: 0;
  transform: translateY(0.45em);
  transition: opacity 520ms ease,
              transform 520ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.has-js .hero-title.reveal.is-visible > span {
  opacity: 1;
  transform: none;
}

.has-js .hero-title.reveal > span:nth-child(2) {
  transition-delay: 80ms;
}

.has-js .hero-title.reveal > .hero-word {
  opacity: 1;
  transform: none;
  transition: none;
}

.has-js .hero-title.reveal .hero-letter {
  opacity: 0;
  transform: translateY(-0.5em);
}

.has-js .hero-word.is-word-visible .hero-letter {
  animation: hero-letter-in 440ms cubic-bezier(0.22, 0.78, 0.28, 1) var(--letter-delay, 0ms) both;
}

.hero-letter:nth-child(1) { --letter-delay: 120ms; }
.hero-letter:nth-child(2) { --letter-delay: 180ms; }
.hero-letter:nth-child(3) { --letter-delay: 240ms; }
.hero-letter:nth-child(4) { --letter-delay: 300ms; }
.hero-letter:nth-child(5) { --letter-delay: 360ms; }
.hero-letter:nth-child(6) { --letter-delay: 420ms; }
.hero-letter:nth-child(7) { --letter-delay: 480ms; }
.hero-letter:nth-child(8) { --letter-delay: 540ms; }
.hero-letter:nth-child(9) { --letter-delay: 600ms; }
.hero-letter:nth-child(10) { --letter-delay: 660ms; }
.hero-letter:nth-child(11) { --letter-delay: 720ms; }
.hero-letter:nth-child(12) { --letter-delay: 780ms; }
.hero-letter:nth-child(13) { --letter-delay: 840ms; }
.hero-letter:nth-child(14) { --letter-delay: 900ms; }
.hero-letter:nth-child(15) { --letter-delay: 960ms; }
.hero-letter:nth-child(16) { --letter-delay: 1020ms; }

@keyframes hero-letter-in {
  from {
    opacity: 0;
    transform: translateY(-0.5em);
  }

  68% {
    opacity: 1;
    transform: translateY(0.055em);
  }

  84% {
    opacity: 1;
    transform: translateY(-0.018em);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .has-js .hero-title.reveal > span,
  .has-js .hero-title.reveal .hero-letter {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  /* Ašys nepiešiamos — jos tiesiog yra. main.js šito režimo net nepradeda,
     bet taisyklė lieka tam atvejui, jei nuostata pasikeistų per seansą. */
  .has-js .hero.lined.is-drawing::before,
  .has-js .hero.lined.is-drawing.is-drawn::before {
    transform: translateX(-50%) scaleY(1);
    transition: none;
  }

  .has-js .section-head.reveal .price-emphasis::after,
  .has-js .plan::after {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .has-js .motion-track::after {
    transform: none;
    transition: none;
  }

  .work-shot::before {
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Responsive: mobile-first ---
   Vieno stulpelio telefono išdėstymas yra numatytoji būsena. Platesni
   ekranai tik prideda struktūrą per min-width breakpointus. */

.section {
  padding-block: var(--space-8);
}

.hero {
  min-height: 0;
  padding-block: var(--space-8) var(--space-12);
}

/* Mobiliajame dvi vidinės ašys vietoj keturių, bet dešinė kraštinė
   linija lieka prie turinio krašto. */
/* Telefone lieka tik rėmas. Vienam stulpeliui vidinės ašys neturi ko žymėti:
   jos nesutampa su jokia turinio riba, o tik kerta tekstą. Sluoksnių skaičius
   nekeičiamas — abi vidinės suvedamos ant kraštinių, todėl `.cta` spalvos
   perrašymas veikia vienodai visuose pločiuose. */
.lined::before {
  background-position: 0 0, 0 0, 100% 0, 100% 0;
}

.header-inner {
  position: relative;
}

.nav-toggle {
  display: inline-flex;
}

.site-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: var(--space-2) 0 var(--space-4);
  background: var(--bg-dark);
  border-bottom: 1px solid var(--line-on-dark);
}

.site-nav.is-open {
  display: flex;
}

.nav-list {
  flex-direction: column;
  gap: 0;
  font-size: var(--step-0);
}

.nav-list a {
  display: block;
  padding-block: var(--space-2);
  border-top: 1px solid var(--line-on-dark);
}

.nav-cta {
  margin-top: var(--space-3);
}

.hero-rail {
  display: none;
}

.hero-inner,
.work-grid,
.about,
.cta-inner,
.footer-inner,
.product-grid,
.steps,
.about-facts {
  grid-template-columns: 1fr;
}

.hero-copy,
.hero-aside,
.about-portrait,
.about-copy,
.footer-brand,
.footer-nav > *,
.work,
.work-lead,
.cta-copy,
.cta-inner .form {
  grid-column: 1 / -1;
}

.hero-shot {
  max-width: 22rem;
}

.work-lead .work-shot {
  aspect-ratio: 4 / 3;
}

.about-portrait,
.about-copy,
.footer-brand,
.footer-nav > *,
.work,
.work-lead,
.cta-copy,
.cta-inner .form {
  padding-right: 0;
}

.about-portrait {
  /* Telefone portretas neturi virsti per visą ekraną — 80 % turinio pločio
     pakanka, kad veidas būtų aiškus, bet sekcija netaptų begaline asmenuke. */
  max-width: 80%;
  margin-bottom: var(--space-4);
}

/* Eilučių turinys telefone išsidėsto vertikaliai. */
.path,
.plan,
.ledger-row {
  grid-template-columns: 1fr;
  gap: var(--space-1);
}

.path-text,
.path-more,
.plan-list,
.plan-cta,
.ledger-body {
  grid-column: 1;
}

.path > *,
.plan > *,
.ledger-row > * {
  padding-right: 0;
}

.path > * {
  padding-left: var(--grid-gutter);
}

.plan-cta,
.plan-list {
  margin-top: var(--space-2);
}

.step {
  padding: var(--space-3) 0 var(--space-3) var(--grid-gutter);
  border-right: 0;
  border-bottom: 1px solid var(--line-on-dark);
}

.product {
  padding: var(--space-4) var(--space-3);
}

/* Vienoje kolonoje kortelės nebesilygiuoja tarpusavyje, tad margin-top:auto
   nebeturi ką lygiuoti — jis tik prastumia kainą žemyn ir ištempia kortelę.
   Desktop tinklelyje jis lieka, nes ten dvi kortelės tikrai turi baigtis
   vienodai. */
.product-price {
  margin-top: 0;
  padding-top: var(--space-1);
}

.plan,
.path {
  padding-block: var(--space-4);
  padding-inline: 0;
}

.ledger-row {
  padding-block: var(--space-3);
}

.faq {
  max-width: none;
}

/* Planšetė: grąžinamas erdvesnis ritmas ir dviejų stulpelių blokai. */
@media (min-width: 721px) {
  .section {
    padding-block: var(--space-12);
  }

  .hero {
    min-height: calc(100svh - 76px);
    padding-block: var(--space-12);
  }

  .lined::before {
    background-position: 0 0, 25% 0, 75% 0, 100% 0;
  }

  .header-inner {
    position: static;
  }

  .nav-toggle {
    display: none;
  }

  .site-nav,
  .site-nav.is-open {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: 0;
    background: transparent;
    border-bottom: 0;
  }

  .nav-list {
    flex-direction: row;
    gap: var(--space-3);
    font-size: var(--step--1);
  }

  .nav-list a {
    display: inline;
    padding-block: var(--space-1);
    border-top: 0;
  }

  .nav-cta {
    margin-top: 0;
  }

  .product-grid,
  .steps,
  .about-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step {
    padding: var(--space-4) var(--space-3) 0 var(--grid-gutter);
    border-right: 1px solid var(--line-on-dark);
    border-bottom: 0;
  }

  .step:last-child {
    border-right: 0;
  }

  .product {
    padding: var(--space-6);
  }

  /* Nuo dviejų stulpelių kainos vėl privalo baigtis vienoje linijoje. */
  .product-price {
    margin-top: auto;
    padding-top: var(--space-3);
  }

  .ledger-row {
    padding-block: var(--space-4);
  }

  .faq {
    /* Ta pati matematika kaip baziniame lygyje: skaičiuojam nuo tinklelio
       pločio (turinys + du tarpai) ir atimam vieną tarpą, kad dešinysis
       kraštas atsistotų tiksliai ant ketvirtos ašies. */
    max-width: calc((100% + 2 * var(--grid-gutter)) * 0.75 - var(--grid-gutter));
  }
}

/* Kompiuteris: keturios ašys ir pilna horizontali kompozicija. */
@media (min-width: 941px) {
  /* Pagrindinis tekstas 17 px vietoj 16. Ilgesnėse pastraipose — „Apie“,
     DUK atsakymai, paslaugų aprašymai — vieno pikselio skirtumas pastebimas
     ne kaip didesnis šriftas, o kaip mažesnė įtampa skaitant.

     Keičiamas tik --step-0. --step--1 (14 px) lieka: etiketės, žymos ir
     smulkūs užrašai savo dydį turi dėl hierarchijos, ne dėl vietos trūkumo,
     tad kelti juos kartu reikštų tą hierarchiją suplokštinti.

     Telefone lieka 16 px — ten eilutė ir taip trumpa, o kiekvienas pikselis
     kainuoja žodį eilutėje. */
  :root {
    --step-0: 1.0625rem;
  }

  .hero-rail {
    display: block;
  }

  .hero-inner,
  .work-grid,
  .about,
  .cta-inner,
  .footer-inner {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero-copy {
    grid-column: 1 / 4;
  }

  .hero-aside {
    grid-column: 4 / 5;
  }

  .hero-shot {
    max-width: none;
  }

  .work {
    grid-column: span 2;
    padding-right: var(--space-4);
  }

  /* Žr. komentarą prie bazinės taisyklės: per visą plotį tik pirmoji. */
  .work-lead {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  .work-lead .work-shot {
    aspect-ratio: 21 / 9;
  }

  /* Portretas užima du stulpelius, bet pati nuotrauka apribota — vizualiai
     ji gauna ~34 % pločio (prašyta 35–40 %), o visi struktūriniai kraštai
     lieka ant ašių: nuotraukos kairysis kraštas ant konteinerio, teksto
     kairysis — tiksliai ant vidurinės ašies. Tarpas tarp jų yra oras, ne
     nulūžęs lygiavimas. */
  .about-portrait {
    grid-column: 1 / 3;
    max-width: 380px;
    margin-bottom: 0;
    padding-right: 0;
  }

  .about-copy {
    grid-column: 3 / -1;
    padding-left: var(--grid-gutter);
    /* Ilga eilutė sunkiai skaitoma — riba pagal skaitymo patogumą. */
    max-width: 660px;
  }

  .footer-brand {
    grid-column: 1 / 2;
    padding-right: var(--space-3);
  }

  .footer-nav > * {
    grid-column: auto;
    padding-right: var(--space-3);
  }

  .cta-copy {
    grid-column: 1 / 3;
    padding-right: var(--space-6);
  }

  .cta-inner .form {
    grid-column: 3 / -1;
    /* Bazinis blokas nuima padding-right visiems .cta-inner .form, nes
       telefone stulpelis vienas. Kompiuteryje jį būtina grąžinti — kitaip
       įvedimo laukeliai ir siuntimo mygtukas remiasi tiesiai į dešinę
       kraštinę ašies liniją. */
    padding-right: var(--grid-gutter);
  }

  .path,
  .plan,
  .ledger-row,
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .path,
  .plan,
  .ledger-row {
    gap: 0;
  }

  .path-text,
  .plan-list {
    grid-column: 3 / 4;
  }

  .path-more,
  .plan-cta {
    grid-column: 4 / 5;
  }

  .ledger-body {
    grid-column: 3 / -1;
  }

  .path > *,
  .plan > *,
  .ledger-row > * {
    padding-right: var(--space-3);
  }

  /* Kiekvieno stulpelio turinys atsitraukia nuo savo ašies linijos vienodai.
     Anksčiau tarpą gaudavo tik .path-label, todėl „Paslaugų" ir „Planų"
     pirmi du stulpeliai stovėdavo tiksliai ant linijos ir tekstas atrodė
     prilipęs. Ašys yra 184 · 452 · 720 · 988 · 1256. */
  .path > *,
  .plan > *,
  .ledger-row > * {
    padding-left: var(--grid-gutter);
  }

  .plan-cta,
  .plan-list {
    margin-top: 0;
  }
}

/* --- Tiltas į WordPress blokų apvalkalus ---
   Core blokai prideda savo <div> sluoksnius. Čia jie ištirpinami, kad
   tinklelio ašys ir flex eilutės liktų tokios pat kaip prototipe. */

.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

/* Mygtuko klasės (.btn, .btn-primary, .btn-ghost) blokų redaktoriuje atsiduria
   ant APVALKALO <div class="wp-block-button">, o ne ant vidinio <a>. Todėl
   apvalkalas nusipiešdavo savo dėžę su savo padding'u, fonu ir riba, o vidinis
   <a> — dar vieną tokią pat. Rezultatas: mygtukas mygtuke, o ghost variantuose
   dvi lygiagrečios ribos.

   Apvalkalo iš išdėstymo neišimam (display: contents sulaužytų branduolio
   taisyklę .wp-block-buttons .wp-block-button__link { width: 100% } — ji imtų
   reikšti visos eilutės plotį). Vietoj to nuimam nuo jo pačią išvaizdą.
   Specifiškumas 0,2,0 nugali .btn ir .btn-primary su 0,1,0. */
.wp-block-button.btn {
  padding: 0;
  border: 0;
  background: none;
}

/* Šablono dalis apvyniojama į <div class="wp-block-template-part">, o jo
   aukštis lygus antraštės aukščiui — 74 px. Lipnus elementas gali kabėti
   tik savo tėvo dėžės ribose, tad antraštė nuplaukdavo kartu su tuo divu.
   display: contents pašalina apvalkalą iš išdėstymo, ir antraštės tėvu
   tampa .wp-site-blocks — viso puslapio ilgio, kaip body prototipe. */
.wp-site-blocks > .wp-block-template-part {
  display: contents;
}

.wp-block-group,
.wp-block-column {
  min-width: 0;
}

/* Blokų redaktorius kartais įdeda tuščią pastraipą — ji neturi griauti tinklelio. */
.wp-block-group > p:empty {
  display: none;
}


/* ══════════════════════════════════════════════════════════════════
   SĄVEIKOS BŪSENOS IR SMULKI AMATO HIGIENA
   ══════════════════════════════════════════════════════════════════ */

/* Paspaudimo atsakas. Telefone :hover neegzistuoja — be :active
   bakstelėjimas neduoda jokio ženklo ir mygtukas atrodo neveikiantis. */
/* .plan-cta yra <p> apvalkalas, o mygtukas jo viduje turi .btn —
   todėl jį jau dengia .btn:active ir atskiros taisyklės nereikia. */
.btn:active,
.nav-toggle:active,
.path:active {
  transform: translateY(1px);
  transition: transform 80ms ease-out;
}

.btn-primary:active { background: var(--simu-orange-hover); }
.btn-ghost:active   { background: rgba(255, 255, 255, 0.08); }

/* DUK eilutė yra 804×81 px taikinys, bet užvedus nieko nevykdavo.
   Dizaino hover kalba čia dvejopa: nuorodos šviesėja iki baltos,
   ribos iš 0.14 kyla iki --line-interactive. Naudojam abi. */
.faq-item:hover {
  border-top-color: var(--line-interactive);
}

.faq-item:last-child:hover {
  border-bottom-color: var(--line-interactive);
}

.faq-item summary:hover::after {
  color: var(--text-on-dark);
}

/* Poraštės apačios nuorodos („Privatumo politika", „Taisyklės") buvo
   vienintelės poraštėje be hover — .footer-nav a jį turėjo, šitos ne. */
.footer-bottom a:hover {
  color: var(--text-on-dark);
}

/* Kainos stovi stulpeliu. Proporciniuose skaitmenyse „1" siauresnis
   už „8", tad be tabular-nums stulpelio kraštas banguoja. */
.plan-price,
.price-emphasis,
.price-unit {
  font-variant-numeric: tabular-nums;
}

/* Kortelė turi vidinį z-index (2 ir 1). Uždarom kontekstą, kad jis
   niekada nesivaržytų su lipnia antrašte ar mobiliu meniu. */
.work {
  isolation: isolate;
}

/* Pirštu valdomi taikiniai. WCAG 2.2 AA riba yra 24 px (SC 2.5.8),
   AAA — 44 px. Laikomės 44, nes tai kainuoja kelias eilutes.
   Medaus puodynės (.simu-trap input) neliečiam — ji stovi už ekrano
   ribų, pirštu nepasiekiama, o bet koks jos keitimas sugadintų spąstus.
   Temoje mygtukas yra <a class="wp-block-button__link">, o .wp-block-button
   turi display: contents — todėl aukštis privalo eiti ant paties <a>. */
@media (max-width: 720px) {
  .site-footer {
    padding-block: var(--space-6) var(--space-3);
  }

  .footer-inner {
    gap: var(--space-4);
  }

  .footer-brand {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--line-on-dark);
  }

  .footer-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .footer-head {
    margin-bottom: var(--space-1);
  }

  .site-footer a,
  .about-facts dd a,
  .cta-contacts a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-nav a {
    width: 100%;
    min-height: 48px;
    border-bottom: 1px solid var(--line-on-dark);
    line-height: 1.35;
  }

  /* Telefone eilutė virsta sąrašu: septynios nuorodos šalia viena kitos
     duotų po dvi trumpas ir vieną lūžtančią per tris eilutes. Vertikaliai
     kiekviena lieka viena eilute ir gauna tokį patį paspaudimo plotą kaip
     kitos poraštės nuorodos. */
  .site-footer .service-links ul {
    display: block;
  }

  .site-footer .service-links a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    border-bottom: 1px solid var(--line-on-dark);
    line-height: 1.35;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    margin-top: var(--space-6);
    padding-top: var(--space-2);
    line-height: 1.6;
  }

  .footer-bottom p {
    margin: 0;
  }

  .logo,
  .nav-toggle,
  .btn-sm,
  .btn-sm .wp-block-button__link,
  .nav-cta .wp-block-button__link {
    min-height: 44px;
  }

  .btn-sm .wp-block-button__link,
  .nav-cta .wp-block-button__link {
    display: inline-flex;
    align-items: center;
  }
}


/* ══════════════════════════════════════════════════════════════════
   MEISTRYSTĖS DETALĖS
   Nė viena iš jų nepastebima iš karto. Visos jaučiamos.
   ══════════════════════════════════════════════════════════════════ */

/* Slinkimas tarp sekcijų. Meniu nuorodos yra inkarai, o iki šiol
   puslapis persimesdavo akimirksniu — vienintelė vieta, kur nieko
   nevykdavo. prefers-reduced-motion blokas tai perrašo į auto. */
html {
  scroll-behavior: smooth;
  /* Naršyklė nudažo slankiklį, formų valdiklius ir automatinį užpildymą
     pagal šitą reikšmę. Be jos jie lieka šviesūs tamsiame puslapyje. */
  color-scheme: dark;
}

/* Lipni antraštė yra 77 px. Be šito inkaras nuveda taip, kad sekcijos
   viršus ir ją skirianti linija lieka po antrašte. */
section[id],
#turinys {
  scroll-margin-top: var(--space-12);
}

/* Teksto žymėjimas buvo vienintelė vieta puslapyje su ne tavo spalva —
   numatytąja naršyklės mėlyna. Oranžinė su Navy tekstu duoda 6,68:1 ir
   veikia tiek ant tamsaus fono, tiek ant užlietos mėlynos sekcijos. */
::selection {
  background: var(--simu-orange);
  color: var(--simu-on-orange);
}

/* Sekcijų elementai iki šiol pasirodydavo visi vienu metu. 60 ms tarpai
   yra tas skirtumas, kurį akis mato, bet neįvardija. Pakopos ribojamos
   iki 300 ms — ilgiau laukiama jau pastebima kaip vėlavimas.
   prefers-reduced-motion blokas nuima visą transition, taigi ir šiuos. */
.has-js :is(.ledger, .path-grid, .product-grid, .plan-grid,
             .steps, .work-grid, .faq) > .reveal:nth-child(1) { transition-delay: 0ms; }
.has-js :is(.ledger, .path-grid, .product-grid, .plan-grid,
             .steps, .work-grid, .faq) > .reveal:nth-child(2) { transition-delay: 60ms; }
.has-js :is(.ledger, .path-grid, .product-grid, .plan-grid,
             .steps, .work-grid, .faq) > .reveal:nth-child(3) { transition-delay: 120ms; }
.has-js :is(.ledger, .path-grid, .product-grid, .plan-grid,
             .steps, .work-grid, .faq) > .reveal:nth-child(4) { transition-delay: 180ms; }
.has-js :is(.ledger, .path-grid, .product-grid, .plan-grid,
             .steps, .work-grid, .faq) > .reveal:nth-child(5) { transition-delay: 240ms; }
.has-js :is(.ledger, .path-grid, .product-grid, .plan-grid,
             .steps, .work-grid, .faq) > .reveal:nth-child(n+6) { transition-delay: 300ms; }

/* Hero ašys nusipiešia iš viršaus į apačią, kai užeinama pirmą kartą per
   seansą.

   Bazinė būsena — linijos MATOMOS ir be jokio perėjimo. Tai svarbu: be
   JavaScript, su prefers-reduced-motion arba grįžus tame pačiame seanse
   .is-drawing niekada neuždedama, ir linijos tiesiog yra. Slėpimas įjungiamas
   tik tada, kai tikrai ketinam piešti.

   Ankstesnė versija slėpė linijas iš karto per .has-js, o tai sukūrė
   lenktynes: šaltai kraunant naršyklė nespėdavo nupiešti paslėptos būsenos
   ir perėjimo nebūdavo, o perkrovus spėdavo — todėl animacija veikdavo
   kaip tik ne tada, kada reikia.

   transform kartoja translateX(-50%), nes .lined::before juo centruojasi.
   scaleY pigus — layout neperskaičiuojamas. */
.has-js .hero.lined.is-drawing::before {
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
}

.has-js .hero.lined.is-drawing.is-drawn::before {
  transform: translateX(-50%) scaleY(1);
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* --- Paveikslėlių vietos ---
   Kiekvienas rėmelis turi ir žymę, ir tuščią wp:image bloką. Redaktoriuje
   matomas įprastas medijos įkėlimas; įkėlus failą žyma pati dingsta, o
   tuščias <figure> nerodomas, kad nebūtų tuščio inline elemento.
   :has() palaikomas visose dabartinėse naršyklėse. */

.hero-shot .shot-image,
.about-portrait .shot-image {
  margin: 0;
  width: 100%;
  height: 100%;
}

.hero-shot .shot-image img,
.about-portrait .shot-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kol paveikslėlio nėra — figūros nerodom. */
.shot-image:not(:has(img[src])) {
  display: none;
}

/* Kai rėmelyje atsiranda paveikslėlis — statybinė žyma dingsta.
   Sąmoningai netikrinam .shot-image klasės: įkeliant nuotrauką per
   Rengyklę WordPress tos klasės gali ir nepalikti (pvz. įdėjus naują
   paveikslėlio bloką vietoj esamo pakeitimo), ir tada žyma likdavo
   matoma ant tikros nuotraukos. Svarbu tik tai, ar paveikslėlis yra. */
.hero-shot:has(img[src]) .shot-todo,
.about-portrait:has(img[src]) .shot-todo,
.work-shot:has(img[src]) .shot-todo {
  display: none;
}

/* Trumpas kontekstas tarp pavadinimo ir rezultato — kodėl darbas svarbus,
   ne vien kaip atrodo. Prigesintas, kad nesivaržytų su pavadinimu dėl
   dėmesio: hierarchija lieka title > desc > result pagal kontrastą. */
.work-desc {
  padding-left: var(--grid-gutter);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-muted-on-dark);
}

/* Matuojamas rezultatas darbo kortelėje. Balta, ne mėlyna: mėlyna ant Navy
   duoda 3,6:1 ir smulkiam tekstui nepraeina — tai aprašyta tokens.css. */
.work-result {
  padding-left: var(--grid-gutter);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-on-dark);
  font-variant-numeric: tabular-nums;
}

/* Ekranvaizdis kortelėje užpildo rėmelį taip pat, kaip hero. */
.work-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Telefone vienodi rėmeliai, o ekranvaizdžiai matomi be apkarpymo. */
@media (max-width: 940px) {
  /* Anksčiau čia buvo object-fit: contain — visas puslapis sutalpinamas į
     kadrą, nieko nenukerpant. Tikslas buvo teisingas (vienodi rėmeliai), bet
     rezultatas priešingas: 1600x6000 px ekranvaizdis, suspaustas į 4:3 dėžę,
     virsta plona nematoma juostele. Nenukirptas, bet ir neįskaitomas.

     Dabar tas pats sprendimas kaip ir dideliame ekrane: cover nuo viršaus.
     Rėmeliai lieka vienodi, nes juos laiko aspect-ratio, o matoma dalis tampa
     pirmuoju svetainės ekranu. */
  .work .work-shot {
    aspect-ratio: 4 / 3;
    background: var(--surface-dark);
  }

  .work .work-shot img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .work .work-shot img,
  .work:hover .work-shot img,
  .work:focus-visible .work-shot img {
    transform: none;
  }
}

/* SEO antraštė lieka vienu tekstu; animuojamos eilutės, ne raidžių kopijos. */
.hero-title.hero-title-seo { font-size: clamp(1.75rem, 7.3cqw, 4.5rem); overflow-wrap: anywhere; }
.page-turinys { max-width: 72ch; }
.page-turinys h2 { margin-top: var(--space-8); font-size: var(--step-2); line-height: 1.25; }
.page-turinys p { margin-block: var(--space-4); line-height: 1.75; }
.page-turinys a:not(.btn), .page-turinys .service-links a { text-decoration: underline; text-underline-offset: .2em; }
.service-links { margin-block: var(--space-6); }
.service-links ul { display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding: 0; margin: 0; list-style: none; }

.service-links-head {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}


/* --- Vidinių nuorodų sąrašas poraštėje ---

   Sąrašas įterpiamas filtru po „footer-brand“ grupe, tad tinklelyje jis
   atsistodavo savaime — į antrą iš keturių stulpelių. Septynios ilgos SEO
   antraštės ~250 px stulpelyje virsdavo nelygiu, suspaustu kamuoliu, o kadangi
   jis vienintelis neturėjo antraštės, jo pirmoji nuoroda prasidėdavo viena
   eilute aukščiau už kaimyninių stulpelių nuorodas.

   Dabar tai atskira eilutė per visą plotį po stulpeliais, atskirta linija.
   Taip ji ir skaitosi teisingai: ne ketvirtas navigacijos stulpelis, o viso
   puslapių sąrašo juosta. order: 1 pastato ją paskutinę nekeičiant žymėjimo —
   svarbu, nes poraštės šablono dalis duomenų bazėje užšaldyta.

   Taisyklės apribotos .site-footer: tas pats sąrašas per trumpinį naudojamas
   ir puslapių turinyje, kur jis lieka toks, koks buvo. */

.site-footer .service-links {
  grid-column: 1 / -1;
  order: 1;
  margin-block: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-on-dark);
}

.site-footer .service-links ul {
  gap: var(--space-1) var(--space-4);
}

.site-footer .service-links a {
  font-size: var(--step--1);
  line-height: 2;
  text-decoration: none;
  color: var(--text-muted-on-dark);
  transition: color var(--ease);
}

.site-footer .service-links a:hover,
.site-footer .service-links a:focus-visible {
  color: var(--text-on-dark);
}
.page-turinys .section .wrap { width: 100%; padding-inline: 0; }
.page-turinys .plan-grid { grid-template-columns: 1fr; }

/* --- Naršymo kelias ---
   Subtilus ir mažas: tai orientacinis elementas, o ne navigacija, dėl kurios
   žmonės ateina. Ant mobiliojo leidžiama slinkti horizontaliai pačiam keliui,
   kad ilgas puslapio pavadinimas nelaužytų maketo. */

.breadcrumbs {
  margin-bottom: var(--space-2);
  font-size: var(--step--1);
  color: var(--text-muted);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-inline-end: var(--space-1);
  color: var(--line-interactive);
}

.breadcrumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.breadcrumbs a:hover {
  border-bottom-color: currentColor;
}

.breadcrumbs [aria-current="page"] {
  color: var(--text);
}

/* Paslaugos eilutės antraštė-nuoroda ir „Visi darbai".
   Spalva paveldima, kad registro ritmas nesubyrėtų į mėlynų nuorodų sąrašą —
   tai, kad elementas paspaudžiamas, parodo pabraukimas užvedus. */

.ledger-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ledger-title a:hover {
  border-bottom-color: currentColor;
}

.section-more {
  margin-top: var(--space-1);
}

/* Ta pati nuoroda sekcijos pabaigoje. Atskiriama linija ir lygiuojama ant
   tos pačios ašies kaip kortelių tekstas — kitaip ji kabotų ore ir atrodytų
   kaip pamiršta eilutė, o ne kaip kitas žingsnis. */
.section-more-end {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  padding-left: var(--grid-gutter);
  border-top: 1px solid var(--line-on-dark);
}

/* --- Darbų aprašymų vizualai ---
   Ekranvaizdis čia yra įrodymas, ne dekoracija: pagrindinis rodomas per visą
   turinio plotį, o detalės – poromis. Rėmelis ir šviesus fonas atskiria
   projekto vaizdą nuo mūsų pačių puslapio, kad nesusilietų į vieną. */

.case-live {
  margin: var(--space-3) 0;
}

.case-live .btn {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.case-live-host {
  font-size: var(--step--1);
  opacity: 0.75;
}

.case-figure {
  margin: var(--space-3) 0;
}

.case-figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-muted, #f4f5f7);
}

.case-figure figcaption {
  margin-top: var(--space-1);
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* Pagrindinis vaizdas išeina už siauro teksto stulpelio: tekstą patogu
   skaityti siaurą, o ekranvaizdį – matyti platų. */
.case-figure-lead {
  margin-block: var(--space-4);
}

@media (min-width: 900px) {
  .case-figure-lead {
    inline-size: min(100vw - 2 * var(--grid-gutter), 1120px);
    margin-inline: calc(50% - min(50vw - var(--grid-gutter), 560px));
  }
}

/* Detalės po dvi. auto-fit su minmax reiškia, kad siaurame ekrane jos
   pačios susideda į vieną stulpelį – be atskiro media query. */
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.case-grid .case-figure {
  margin: 0;
}

/* Mobiliosios versijos ekranvaizdis yra vertikalus ir šalia horizontalių
   atrodytų neproporcingai didelis, tad ribojamas jo aukštis. */
.case-grid .case-figure img[width][height] {
  max-block-size: 640px;
  object-fit: contain;
  object-position: top center;
}


/* ══════════════════════════════════════════════════════════════════
   PRADŽIOS PUSLAPIO PERTVARKA
   Nauji komponentai. Spalvos, kampai ir tarpai — iš tokenų, be išimčių.
   ══════════════════════════════════════════════════════════════════ */

/* --- Hero: pasitikėjimo eilutė ---

   Stovi po mygtukais, ne dešinėje kolonoje.

   Telefone kiekvienas įrašas yra viena eilutė: pavadinimas kairėje, reikšmė
   dešinėje. Sukrauti juos vienas po kitu dviem eilutėmis reikštų šešias
   teksto eilutes iškart po mygtukų — tiek, kad darbai nusistumtų už ekrano
   ribos. Horizontali pora užima pusę to ploto ir išlaiko svarbiausią dalyką:
   kiekviena kaina turi savo pavadinimą šalia, todėl „nuo 500 €“ niekada
   neatrodo kaip parduotuvės kaina.

   Nuo planšetės trys įrašai išsidėsto per tris ašis iš keturių — tiek pat,
   kiek užima hero kopija virš jų. */

.hero-trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--space-4);
  border-top: 1px solid var(--line-on-dark);
}

.hero-trust-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-15) 0 var(--space-15) var(--grid-gutter);
  border-bottom: 1px solid var(--line-on-dark);
}

.hero-trust-item:last-child {
  border-bottom: 0;
}

.hero-trust dt {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Kaina yra atsakymas, kurio žmogus ieško — todėl ji display šriftu ir
   šviesesnė už etiketę šalia savęs. Ne akcentinė spalva: greta oranžinio CTA
   dar viena spalvota dėmė atimtų iš mygtuko pirmumą. */
.hero-trust dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-on-dark);
}

/* --- Paslaugos: antraeilė eilutė ---

   Priežiūra, AI ir mokymai yra realios paslaugos su savo puslapiais, bet
   kortelė šalia svetainių kūrimo prilygintų jas pagrindinei krypčiai. Viena
   eilutė išlaiko jas pasiekiamas, neatimdama dėmesio. */

.services-more {
  margin-top: var(--space-6);
  padding-left: var(--grid-gutter);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--step--1);
  color: var(--text-faint);
}

.services-more a {
  color: var(--text-muted-on-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line-interactive);
  transition: color var(--ease), text-decoration-color var(--ease);
}

.services-more a:hover,
.services-more a:focus-visible {
  color: var(--text-on-dark);
  text-decoration-color: var(--accent);
}

/* --- Kodėl SIMU: 2x2 ---

   Keturi argumentai dešinėje kolonoje po tekstu. Dvi eilutės po du: sąrašas
   vienu stulpeliu būtų nuslinkęs žemiau portreto ir argumentai būtų atsiskyrę
   nuo veido, dėl kurio jie ir patikimi. */

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: var(--space-6) 0 0;
}

.why-item {
  padding: var(--space-3) 0 var(--space-3) var(--grid-gutter);
  border-top: 1px solid var(--line-on-dark);
}

.why-title {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--text-on-dark);
}

/* Trumpas mėlynas brūkšnys prieš pavadinimą — tas pats ženklas, kuris jau
   naudojamas .about-why sąraše. Dekoratyvus, todėl aria-hidden nereikia:
   tai CSS turinys, ekrano skaitytuvas jo neskaito. */
.why-title::before {
  content: "";
  position: absolute;
  left: calc(var(--grid-gutter) * -1);
  top: 0.65em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.why-text {
  margin: var(--space-1) 0 0;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-muted-on-dark);
}

/* --- Kainos: projektų kortelės ---

   Tas pats registro principas kaip .plan, bet be išskirto varianto: nė viena
   iš trijų kortelių nėra „rekomenduojama“. Skirtingas verslas renkasi
   skirtingą, ir paryškinta kortelė čia būtų spaudimas, ne pagalba. */

.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line-on-dark);
}

.price {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0 var(--space-4) var(--grid-gutter);
  border-bottom: 1px solid var(--line-on-dark);
}

.price:last-child {
  border-bottom: 0;
}

.price-name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.price-figure {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--accent);
}

/* „Vertinama individualiai“ yra sakinys, ne skaičius. Tokio pat dydžio kaip
   500 € jis atrodytų kaip kaina, kurios nėra. */
.price-figure:not(:has(.price-unit)) {
  font-size: var(--step-2);
}

.price-figure .price-unit {
  display: block;
  margin-top: var(--space-05);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-faint);
}

.price-text {
  margin: var(--space-2) 0 0;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--text-muted-on-dark);
}

.price-label {
  margin: var(--space-4) 0 var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-on-dark);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.price-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-1);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-muted-on-dark);
}

.price-list li {
  position: relative;
  padding-left: var(--space-3);
}

.price-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

/* margin-top: auto prilipdo mygtuką prie kortelės apačios — sąrašų ilgis
   skiriasi, o mygtukai vis tiek lieka vienoje linijoje. */
.price-cta {
  margin: var(--space-4) 0 0;
}

/* --- Priežiūros planai po projektų kainomis ---

   Planai yra tos pačios kainų temos tęsinys, ne nauja sekcija. Viršutinė
   sekcijos linija paliekama (ji skiria fazes), bet viršutinis tarpas
   sumažinamas, kad abu blokai skaitytųsi kaip vienas atsakymas. */

#kainos + #planai {
  padding-top: var(--space-8);
}

#kainos + #planai .section-title {
  font-size: var(--step-2);
}


/* ══════════════════════════════════════════════════════════════════
   TELEFONAS PIRMA
   Bazinis lygis šiame faile yra telefonas, tad čia — jo taisyklės.
   Platesni ekranai jas perrašo žemiau esančiuose min-width blokuose.
   ══════════════════════════════════════════════════════════════════ */

/* --- Hero mygtukai per visą plotį ---

   Telefone du mygtukai vienas šalia kito palieka kiekvienam apie 150 px, ir
   „Peržiūrėti darbus“ lūžta per dvi eilutes. Per visą plotį jie tampa dviem
   aiškiais taikiniais, kurių nereikia taikytis nykščiu. Pagrindinis lieka
   viršuje — eiliškumas ekrane yra ir prioriteto pareiškimas. */

.hero-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-15);
}

.hero-actions .btn,
.hero-actions .wp-block-button__link {
  width: 100%;
  min-height: 52px;
}

/* --- Paslaugų eilutė telefone: visa eilutė yra taikinys ---

   Iki šiol paspaudžiamas buvo tik pavadinimas — apie 200x30 px plotas eilutėje,
   kuri pati užima visą ekrano plotį. Pelei to pakanka, pirštui ne.

   Perdengimas per ::after paverčia visą eilutę nuoroda nekeičiant žymėjimo:
   sąrašo semantika lieka tokia pati, o antraštės nuoroda toliau yra vienintelė
   fokusuojama vieta. Veikia tik ten, kur nuoroda tikrai yra — paslaugos be
   savo puslapio antraštės į nuorodą neverčia (žr. patterns/services.php). */

.ledger-row {
  position: relative;
}

.ledger-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Rodyklė sako, kad eilutė veda toliau. Ji dedama prie kainos, o ne prie
   pavadinimo: akis telefone nusileidžia iki eilutės pabaigos, ir ženklas
   turi būti ten, kur ji sustoja. */
.ledger-title a::before {
  content: "→";
  float: right;
  margin-left: var(--space-2);
  color: var(--accent);
  transition: transform var(--ease);
}

.ledger-row:active {
  background: var(--surface-dark);
}

/* --- Mokėjimo ir kontaktų taikiniai ---
   WCAG 2.5.5: mažiausias paspaudimo plotas 44x44 px. */

.price-cta .btn,
.plan-cta .btn,
.services-more a,
.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


/* ══════════════════════════════════════════════════════════════════
   PLANŠETĖ IR PLAČIAU
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 721px) {
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .hero-actions .btn,
  .hero-actions .wp-block-button__link {
    width: auto;
    min-height: 0;
  }

  /* Nuo planšetės eilutė vėl turi tris ašis ir vertikalų ritmą: pavadinimas
     virš reikšmės, kaip ir kituose šio puslapio registruose. */
  .hero-trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--space-6);
  }

  .hero-trust-item {
    display: block;
    padding: var(--space-2) var(--space-3) 0 var(--grid-gutter);
    border-bottom: 0;
    border-right: 1px solid var(--line-on-dark);
  }

  .hero-trust-item:last-child {
    border-right: 0;
  }

  .hero-trust dd {
    margin-top: var(--space-05);
  }

  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-item {
    padding-right: var(--space-4);
  }

  .why-item:nth-child(odd) {
    border-right: 1px solid var(--line-on-dark);
  }

  /* Pelė turi hover, o visos eilutės perdengimas jai nereikalingas: čia
     nuoroda vėl yra tik pavadinimas, ir rodyklė nebereikalinga. */
  .ledger-title a::after,
  .ledger-title a::before {
    content: none;
  }
}


/* ══════════════════════════════════════════════════════════════════
   KOMPIUTERIS
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 941px) {
  .price-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .price {
    padding-right: var(--space-4);
    border-bottom: 0;
    border-right: 1px solid var(--line-on-dark);
  }

  .price:last-child {
    border-right: 0;
  }

  /* Mygtukas prilipdomas prie kortelės apačios — sąrašų ilgis skiriasi, o
     mygtukai turi baigtis vienoje linijoje. Telefone kortelė eilutėje viena,
     tempimo nėra, tad auto ten virsta nuliu ir taisyklė nereikalinga. */
  .price-cta {
    margin-top: auto;
    padding-top: var(--space-6);
  }

  /* Keturi projekto žingsniai telpa į keturias tinklelio ašis. Penktas —
     priežiūra — prasideda po paleidimo, tai yra po projekto. Todėl jis stovi
     atskiroje eilutėje per dvi ašis: ne dėl to, kad nebetilpo, o dėl to, kad
     tai kita darbo fazė. Penkios lygios kolonos būtų sulaužiusios 25% ašių
     tinklelį, ant kurio laikosi visas puslapis. */
  .step:nth-child(4) {
    border-right: 0;
  }

  .step:nth-child(5) {
    grid-column: span 2;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line-on-dark);
    border-right: 0;
  }
}