/* YABI 2.0 v3 – základ: tokeny, písmo, typografia, tlačidlá, chip, navigácia + menu, kontakt, footer, FAQ.
   Štýly jednotlivých stránok sú v css/<stránka>.css. Breakpointy: desktop ≥ 1200 (návrh 1440), 1024–1199,
   tablet 768–1023, mobil < 768 (návrh 390). */

/* ---------- Písmo: Cabin, variabilný rez 400–700, lokálne ---------- */
@font-face{font-family:"Cabin";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/cabin-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cabin";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/cabin-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokeny ---------- */
:root{
  --ink:#000b16;--ink-gray:rgba(0,11,22,.6);--paper:#fff;--paper-dark:#f1f6f8;
  --primary:#06f;--red:#ee1c23;--green:#72aa4c;--orange:#f8a70f;
  --grey-3:rgba(0,11,22,.03);--grey-20:rgba(31,29,30,.2);--white-5:rgba(255,255,255,.05);--white-20:rgba(255,255,255,.6);
  --field-border:#8e8d8e;
  --r-chip:8px;--r-btn:12px;--r-main:22px;--r-full:999px;
  --gutter:80px;--section-y:96px;--content:1280px;
  --font:"Cabin",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (max-width:1199px){:root{--gutter:48px}}
@media (max-width:1023px){:root{--gutter:32px;--section-y:80px}}
@media (max-width:767px){:root{--gutter:20px;--section-y:64px}}

/* ---------- Reset / základ ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:120px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font-family:var(--font);font-weight:400;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote{margin:0}
h1,h2,h3,h4,h5{font-weight:400}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Text len pre desktop / len pre mobil (< 768 px) – napr. mobilná varianta kontaktu (build: contactMobile) */
.v-mob{display:none}
@media (max-width:767px){.v-desk{display:none}.v-mob{display:inline}}
.container{width:100%;max-width:calc(var(--content) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.link{color:var(--primary);text-decoration:underline;text-underline-offset:3px}

/* ---------- Typografia (tokeny návrhu; letter-spacing = veľkosť × % / 100) ---------- */
.t-display-xl{font-size:clamp(48px,8.334vw,120px);--lh:1em;line-height:var(--lh);letter-spacing:-.05em}
.t-display{font-size:clamp(44px,6.667vw,96px);--lh:1em;line-height:var(--lh);letter-spacing:-.05em}
.t-h1{font-size:clamp(40px,4.445vw,64px);--lh:1em;line-height:var(--lh);letter-spacing:-.04em}
.t-h2{font-size:clamp(32px,calc(1.5rem + 1.667vw),48px);--lh:1em;line-height:var(--lh);letter-spacing:-.045em}
.t-h3{font-size:32px;--lh:32px;line-height:var(--lh);letter-spacing:-.8px}
.t-h4{font-size:24px;--lh:26px;line-height:var(--lh);letter-spacing:-.7px}
.t-p-lg{font-size:18px;--lh:24px;line-height:var(--lh);letter-spacing:-.36px}
.t-p-md{font-size:16px;--lh:24px;line-height:var(--lh);letter-spacing:-.16px}
.t-p-sm{font-size:14px;--lh:20px;line-height:var(--lh);letter-spacing:-.14px}
.t-eyebrow{font-size:12px;font-weight:500;--lh:1.215em;line-height:var(--lh);letter-spacing:-.4px;text-transform:uppercase}
.t-label-s{font-size:14px;font-weight:500;--lh:20px;line-height:var(--lh);letter-spacing:-.14px}
.muted{color:var(--ink-gray)}

/* Orezanie riadkovej výšky na výšku verzálok (text-box-trim: cap / alphabetic).
   Fallback počíta s metrikami Cabin: ascent .965, descent .25, cap height .7 em. */
.trim{display:block;margin-block:calc(.3425em - var(--lh,1.215em) / 2) calc(.3575em - var(--lh,1.215em) / 2)}
@supports (text-box:trim-both cap text){.trim{margin-block:0;text-box:trim-both cap text}}

/* Zástupné miesta */
.placeholder{display:inline-block;padding:2px 6px;border-radius:4px;background:#fff1c2;color:#4a3800;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;text-transform:none;vertical-align:middle}
.placeholder-link{cursor:default}

/* ---------- YB/Chip ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--grey-20);border-radius:var(--r-chip);background:var(--grey-3);-webkit-backdrop-filter:blur(1.25px);backdrop-filter:blur(1.25px);white-space:nowrap;color:var(--ink)}
.chip::before{content:"";flex:none;width:4px;height:4px;border-radius:2px;background:var(--chip-dot,currentColor)}
.chip--white{background:var(--paper)}
.chip--on-blue{background:var(--white-5);border-color:var(--white-20);color:var(--paper-dark);--chip-dot:var(--paper)}
.chip--on-blue::before{border-radius:var(--r-full)}

/* ---------- YB/Button ---------- */
/* Hover ako www.yabi.sk (btn-blue / btn-white): pozadie priehľadné, text a rámik vo farbe pôvodného pozadia,
   prechod farieb .15 s (pri reduced-motion okamžite – pravidlo nižšie). Rámik 1 px je súčasťou rozmeru
   (padding 12/16 + 1 px = pôvodných 13/17 px), tlačidlo sa pri hover nehýbe. */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border:1px solid var(--primary);border-radius:var(--r-btn);background:var(--primary);color:var(--paper);font-size:14px;letter-spacing:-.14px;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.btn>.trim{--lh:1em;line-height:1}
.btn:not(:disabled):hover{background:transparent;color:var(--primary)}
.btn--white{border-color:var(--paper);background:var(--paper);color:var(--primary)}
.btn--white:not(:disabled):hover{background:transparent;color:var(--paper)}
.btn--outline{border-color:transparent;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--grey-20)}
.btn--outline:not(:disabled):hover{background:var(--paper-dark);color:var(--ink)}
.btn--block{display:flex;width:100%}

/* ---------- Navigácia (plávajúca lišta) + otvorené menu ---------- */
.site-nav{
  --icon:26px;
  position:fixed;z-index:50;top:18px;left:50%;transform:translateX(-50%);isolation:isolate;
  width:416px;max-width:calc(100% - 32px);padding:9px 25px;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.15));
}
/* Papier: biela plocha s okrajom, zaoblená 22 px – zatvorená lišta aj otvorené menu (návrh: bez odrezaného rohu). */
.site-nav::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid var(--grey-20);border-radius:var(--r-main);background:var(--paper)}
.site-nav__bar{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.site-nav__logo{display:flex;align-items:center;justify-content:center;flex:none;width:64px;height:64px;border-radius:var(--r-full);color:var(--ink)}
/* Logo je inline SVG (fill currentColor, oko biele) – pri hover / fokuse klávesnicou CTA modrá (návrh nav-logo-hover). */
.site-nav__logo:hover,.site-nav__logo:focus-visible{color:var(--primary)}
.site-nav__logo svg{display:block;width:46px;height:44px}
.site-nav__toggle{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;padding:0;border:0;border-radius:var(--r-btn);background:transparent;cursor:pointer}
.site-nav__icon{position:relative;width:var(--icon);height:var(--icon)}
.site-nav__icon>span{position:absolute;left:0;width:100%;height:calc(var(--icon) * 2 / 26);background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.site-nav__icon>span:nth-child(1){top:calc(var(--icon) * 5 / 26)}
.site-nav__icon>span:nth-child(2){top:calc(var(--icon) * 12 / 26)}
.site-nav__icon>span:nth-child(3){top:calc(var(--icon) * 19 / 26)}
.site-nav.is-open .site-nav__icon>span:nth-child(1){transform:translateY(calc(var(--icon) * 7 / 26)) rotate(45deg)}
.site-nav.is-open .site-nav__icon>span:nth-child(2){opacity:0}
.site-nav.is-open .site-nav__icon>span:nth-child(3){transform:translateY(calc(var(--icon) * -7 / 26)) rotate(-45deg)}

/* Otvorený panel nie je scroll kontajner (žiadny V/H scrollbar) – obsah sa zmestí vďaka výškovým premenným
   --mn-* nižšie; stránka pod menu nescrolluje (html.menu-open / :target). */
.site-nav.is-open{width:672px;padding:8px 24px var(--mn-pb)}
html.menu-open,html.menu-open body{overflow:hidden}
html.menu-open{scrollbar-gutter:stable}
.site-nav.is-open .site-nav__bar{min-height:66px}

.site-menu[hidden]{display:none}
/* Bez JS: tlačidlo nahradia odkazy #site-menu / #site-nav a menu sa otvára cez :target (rovnaký vzhľad ako .is-open). */
.site-nav__nojs{display:none}
@media (scripting:none){
  button.site-nav__toggle{display:none}
  .site-nav__nojs--open{display:flex}
  .site-nav:has(#site-menu:target) .site-nav__nojs--open{display:none}
  .site-nav:has(#site-menu:target) .site-nav__nojs--close{display:flex}
  .site-menu:target{display:block}
  .site-nav:has(#site-menu:target){width:672px;padding:8px 24px var(--mn-pb)}
  html:has(#site-menu:target),html:has(#site-menu:target) body{overflow:hidden}
  html:has(#site-menu:target){scrollbar-gutter:stable}
  .site-nav:has(#site-menu:target) .site-nav__bar{min-height:66px}
  .site-nav__nojs--close .site-nav__icon>span:nth-child(1){transform:translateY(calc(var(--icon) * 7 / 26)) rotate(45deg)}
  .site-nav__nojs--close .site-nav__icon>span:nth-child(2){opacity:0}
  .site-nav__nojs--close .site-nav__icon>span:nth-child(3){transform:translateY(calc(var(--icon) * -7 / 26)) rotate(-45deg)}
}
@media (scripting:none) and (max-width:767px){
  .site-nav:has(#site-menu:target){width:min(328px,calc(100% - 32px));padding:8px 20px var(--mn-pb)}
  .site-nav:has(#site-menu:target)::before{border-color:var(--grey-20)}
  .site-nav:has(#site-menu:target) .site-nav__bar{min-height:54px}
  .site-nav:has(#site-menu:target) .site-nav__logo{width:54px;height:54px}
  .site-nav:has(#site-menu:target) .site-nav__logo svg{width:39.1px;height:37.4px}
}
.site-menu__links{display:flex;flex-direction:column;gap:4px;padding:var(--mn-list) 0}
.site-menu__link{display:flex;align-items:center;gap:16px;padding:var(--mn-py) 12px;border-radius:var(--r-btn);color:var(--ink);transition:background-color .15s ease}
.site-menu__label{flex:1 1 auto;min-width:0;font-size:var(--mn-fs);--lh:var(--mn-lh);line-height:var(--lh);letter-spacing:-.8px}
.site-menu__star{display:none;flex:none;height:1em;font-size:var(--mn-fs);line-height:1;letter-spacing:0}
.site-menu__arrow{display:none;flex:none;width:20px;height:16px;margin:-1px;background:url(/assets/shared/icon-arrow-right.svg) center/20px 16px no-repeat}
.site-menu__link[aria-current="page"] .site-menu__star{display:block}
.site-menu__link:hover,.site-menu__link:focus-visible{background:var(--paper-dark)}
.site-menu__link:not([aria-current]):hover .site-menu__arrow,.site-menu__link:not([aria-current]):focus-visible .site-menu__arrow{display:block}
.site-menu__link:focus-visible{outline-offset:-2px}
.site-menu__bottom{display:flex;flex-direction:column;gap:var(--mn-gap);padding-top:var(--mn-gap)}
.site-menu__note{color:var(--ink)}
/* Poznámka „YABI Studio 2026“ + prepínač SK | EN v jednom riadku (výška menu sa nemení) */
.site-menu__meta{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* ---------- Prepínač jazyka SK | EN (vzor www.yabi.sk .nav__lang: aktívny a hover Primary, .15 s) ---------- */
.lang-switch{display:inline-flex;align-items:center;gap:8px}
.lang-switch a{color:inherit;transition:color .15s ease}
.lang-switch a:hover,.lang-switch a[aria-current]{color:var(--primary)}
.lang-switch__sep{opacity:.4}
/* Dotyková plocha 24 px (target-size) bez zmeny výšky riadku */
.lang-switch a{position:relative}
.lang-switch a::after{content:"";position:absolute;inset:50% auto auto 50%;width:24px;height:24px;transform:translate(-50%,-50%)}
.site-menu__lang{color:var(--ink)}
.footer__lang .lang-switch a[aria-current]{color:var(--paper)}
.footer__lang .lang-switch a:hover{color:var(--primary)}
@supports (text-box:trim-both cap text){.site-menu__label{text-box:trim-both cap text}}
@supports not (text-box:trim-both cap text){.site-menu__label{margin-block:calc(.3425em - var(--lh) / 2) calc(.3575em - var(--lh) / 2)}}

/* Mobil: lišta podľa návrhu 390 px (mierka 0,84), menu 328 px */
@media (max-width:767px){
  .site-nav{--icon:21.84px;top:19.56px;width:min(84%,416px);max-width:none;padding:6.72px 20.16px;filter:drop-shadow(0 6.72px 10.08px rgba(0,0,0,.15))}
  .site-nav::before{border-color:transparent}
  .site-nav__bar{min-height:53.76px}
  .site-nav__logo{width:53.76px;height:53.76px}
  .site-nav__logo svg{width:38.64px;height:36.96px}
  .site-nav__toggle{width:38.64px;height:38.64px}

  .site-nav.is-open{width:min(328px,calc(100% - 32px));padding:8px 20px var(--mn-pb)}
  .site-nav.is-open::before{border-color:var(--grey-20)}
  .site-nav.is-open .site-nav__bar{min-height:54px}
  .site-nav.is-open .site-nav__logo{width:54px;height:54px}
  .site-nav.is-open .site-nav__logo svg{width:39.1px;height:37.4px}
  .site-menu__label{margin-block:0;text-box:none}
}

/* Výška otvoreného menu: panel sa vždy zmestí do okna (top + rovnaký okraj dole). Veľkosti podľa návrhu
   (desktop 32/32 px, mobil 32/36 px) platia, kým je okno dosť vysoké; pod tým sa najprv plynulo zmenšuje
   padding položiek (clamp podľa dvh), potom pri nízkej výške písmo a medzery, pri ≤ 440 px dva stĺpce.
   Konštanty v calc() = výška zvyšku panelu + okraje okna; 14 = 7 položiek × 2 (padding hore a dole). */
.site-nav{--vh:100dvh;--mn-fs:32px;--mn-lh:32px;--mn-list:24px;--mn-gap:24px;--mn-pb:32px;--mn-py:clamp(6px,calc((var(--vh) - 466px) / 14),12px)}
@supports not (height:1dvh){.site-nav{--vh:100vh}}
@media (min-width:768px) and (max-height:560px){
  .site-nav{--mn-fs:24px;--mn-lh:24px;--mn-list:12px;--mn-gap:12px;--mn-pb:20px;--mn-py:clamp(4px,calc((var(--vh) - 367px) / 14),10px)}
}
@media (max-width:767px){
  .site-nav{--mn-lh:36px;--mn-list:16px;--mn-gap:20px;--mn-pb:24px;--mn-py:clamp(4px,calc((var(--vh) - 521px) / 14),10px)}
}
@media (max-width:767px) and (max-height:600px){
  .site-nav{--mn-fs:24px;--mn-lh:28px;--mn-list:10px;--mn-gap:12px;--mn-pb:16px;--mn-py:clamp(4px,calc((var(--vh) - 429px) / 14),10px)}
}
@media (max-width:559px) and (max-height:484px){
  .site-nav{--mn-fs:20px;--mn-lh:24px;--mn-list:8px;--mn-gap:10px;--mn-pb:12px;--mn-py:clamp(2px,calc((var(--vh) - 389px) / 14),8px)}
}
/* Nízke a dosť široké okno (napr. mobil na šírku): položky v 2 stĺpcoch, tlačidlo a poznámka v riadku */
@media (min-width:560px) and (max-height:440px){
  .site-nav{--mn-fs:22px;--mn-lh:24px;--mn-list:8px;--mn-gap:8px;--mn-pb:12px;--mn-py:clamp(4px,calc((var(--vh) - 258px) / 8),10px)}
  .site-nav.is-open{width:min(672px,calc(100% - 32px))}
  .site-menu__links{display:grid;grid-template-columns:1fr 1fr;column-gap:8px}
  .site-menu__bottom{flex-direction:row;align-items:center;gap:16px}
  .site-menu__bottom .btn{flex:1 1 auto;width:auto}
  .site-menu__note,.site-menu__meta{flex:none}
}
/* Plynulé otvorenie / zatvorenie menu ako na www.yabi.sk: lišta 0,2 s cubic-bezier(.22,1,.36,1) pre šírku aj výšku.
   Výšku animuje JS (site.js): zmeria cieľovú výšku a nastaví ju v px, po transitionend vráti auto. Obsah menu
   sa pri otvorení zobrazí s oneskorením (opacity .15s ease .06s), pri zatvorení zmizne skôr, než sa lišta zmenší.
   Lišta orezáva obsah (overflow:clip, nie je scroll kontajner – žiadny scrollbar).
   Bez JS (:target) sa animuje šírka a padding, výška skočí. Pri prefers-reduced-motion bez animácie (okamžite). */
@media (prefers-reduced-motion:no-preference){
  .site-nav{--mn-t:.2s cubic-bezier(.22,1,.36,1);overflow:clip;transition:width var(--mn-t),max-width var(--mn-t),padding var(--mn-t),height var(--mn-t),top var(--mn-t)}
  .site-nav::before{transition:border-color var(--mn-t)}
  .site-nav__bar{transition:min-height var(--mn-t)}
  .site-nav__logo{transition:color .15s ease,width var(--mn-t),height var(--mn-t)}
  .site-nav__logo svg{transition:width var(--mn-t),height var(--mn-t)}
  .site-menu{transition:opacity .15s ease .06s}
  .site-menu[hidden]:not(:target){opacity:0;transition:opacity .08s ease,display .08s allow-discrete}
  @starting-style{.site-menu{opacity:0}}
  /* Meranie cieľovej výšky v JS – na okamih bez prechodov */
  .site-nav--measure,.site-nav--measure *,.site-nav--measure::before{transition:none!important}
}

/* Skrytie lišty úmerné skrolovaniu: site.js nastavuje inline transform translate(-50 %, -N px) presne
   podľa skutočného posunu stránky – žiadna časová animácia, preto transform nie je v prechode vyššie.
   Centrovanie translateX(-50 %) ostáva zachované; pri otvorenom menu sa lišta neskryva. */
@media (min-width:560px) and (max-width:767px) and (max-height:440px){
  .site-nav{--mn-py:clamp(4px,calc((var(--vh) - 283px) / 8),10px)}
}
@media (scripting:none) and (min-width:560px) and (max-height:440px){
  .site-nav:has(#site-menu:target){width:min(672px,calc(100% - 32px))}
}

/* ---------- Kontaktná sekcia (modrá) ---------- */
.contact{padding-block:80px;border:1px solid var(--grey-20);border-radius:var(--r-main) var(--r-main) 0 0;background:var(--primary);color:var(--paper);overflow:hidden}
.contact :focus-visible{outline-color:var(--paper)}
.contact__inner{position:relative;display:flex;flex-direction:column;gap:276px;max-width:calc(var(--content) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.contact__path{position:absolute;left:579.5px;top:153.5px;width:376px;height:301px;max-width:none;pointer-events:none}
.contact__bird{position:absolute;left:786px;top:172.5px;width:130px;height:126.18px;max-width:none;pointer-events:none}
.contact__art{display:none}
/* EN kontakt: dlhší druhý riadok nadpisu ("...your project.") siaha pod ilustráciu; posun ju doprava */
@media (min-width:1280px){
  :lang(en) .contact__path{left:759.5px}
  :lang(en) .contact__bird{left:966px}
}
.contact__head{position:relative;display:grid;grid-template-columns:160px minmax(0,1fr);gap:32px;align-items:start}
.contact__head>.chip{justify-self:start}
.contact__title{font-size:96px;--lh:96px;line-height:var(--lh);letter-spacing:-4.8px}
.contact__subtitle{font-size:48px;--lh:48px;line-height:var(--lh);letter-spacing:-2.16px}
.contact__title,.contact__subtitle{margin-block:calc(.3425em - var(--lh) / 2) calc(.3575em - var(--lh) / 2)}
@supports (text-box:trim-both cap text){.contact__title,.contact__subtitle{margin-block:0;text-box:trim-both cap text}}
.contact__body{position:relative;display:flex;align-items:flex-start;gap:32px;padding-left:192px}
.contact__copy{flex:0 0 420px;display:flex;flex-direction:column;gap:32px}
.contact__copy p{max-width:330px}

.form{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:32px;padding:24px}
.form__fields{display:flex;flex-direction:column;gap:12px}
.form__row--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.form__checks{display:flex;flex-direction:column;gap:32px}
.field{display:flex;flex-direction:column;gap:8px}
/* Návrh zaokrúhľuje orezaný label (12 px, cap 8,4 px) na 8 px – bez toho sa formulár posúva o 0,4 px na riadok. */
.field>.t-eyebrow{height:8px}
.field__control{width:100%;margin:0;padding:7px 17px;border:1px solid var(--white-20);border-radius:var(--r-btn);background:transparent;color:var(--paper);font-size:14px;line-height:20px;letter-spacing:-.14px;-webkit-appearance:none;appearance:none;scroll-margin-top:120px;scroll-margin-bottom:24px}
.field__control::placeholder{color:var(--white-20);opacity:1}
.field__control:focus{outline:none;border-color:var(--paper);box-shadow:0 0 0 1px var(--paper)}
.field__control--area{height:120px;padding-top:8px;resize:vertical;scroll-margin-top:120px;scroll-margin-bottom:24px}
.field__select{position:relative}
.field__select::after{content:"";position:absolute;right:18px;top:50%;width:5.06px;height:8.71px;transform:translateY(-50%) rotate(90deg);background:var(--paper);-webkit-mask:url(/assets/home/vector.svg) center/contain no-repeat;mask:url(/assets/home/vector.svg) center/contain no-repeat;pointer-events:none}
.field__select select{padding-right:40px;cursor:pointer}
.field__select select:has(option[value=""]:checked){color:var(--white-20)}
.field__select option{color:var(--ink)}
/* Vlastný dropdown (site.js): natívny select je skrytý, tlačidlo + listbox v štýle YABI – len pri pointer:fine */
.field__select>select.select__native{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.select__trigger{display:flex;align-items:center;width:100%;margin:0;padding:7px 17px;padding-right:40px;border:1px solid var(--white-20);border-radius:var(--r-btn);background:transparent;color:var(--paper);font-size:14px;line-height:20px;letter-spacing:-.14px;text-align:left;cursor:pointer}
.select__trigger:focus{outline:none;border-color:var(--paper);box-shadow:0 0 0 1px var(--paper)}
.select__trigger--placeholder{color:var(--white-20)}
.field__select:has(select[aria-invalid="true"]) .select__trigger{border-color:var(--paper);box-shadow:0 0 0 2px var(--orange)}
.select__list{position:absolute;z-index:60;top:calc(100% + 8px);left:0;right:0;max-height:280px;margin:0;padding:6px;overflow:auto;list-style:none;border:1px solid var(--grey-20);border-radius:var(--r-btn);background:var(--paper);box-shadow:0 16px 32px -12px rgba(0,11,22,.25)}
.select__option{padding:8px 12px;border-radius:calc(var(--r-btn) - 6px);color:var(--ink);font-size:14px;line-height:20px;letter-spacing:-.14px;cursor:pointer}
.select__option:hover,.select__option--active{background:var(--paper-dark)}
.select__option[aria-selected="true"],.select__option[aria-selected="true"].select__option--active{background:var(--primary);color:var(--paper)}
.field__control[aria-invalid="true"]{border-color:var(--paper);box-shadow:0 0 0 2px var(--orange)}

.check{display:flex;align-items:flex-start;gap:8px;cursor:pointer}
.check>span{max-width:330px}
.check strong{font-weight:700}
.check input{flex:none;width:13px;height:13px;margin:0;border:1px solid var(--white-20);border-radius:2.5px;background:var(--paper) center/100% no-repeat;-webkit-appearance:none;appearance:none;cursor:pointer}
.check input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M3 6.6l2.3 2.3L10 4.1' fill='none' stroke='%230066ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.check input[aria-invalid="true"]{box-shadow:0 0 0 2px var(--orange)}

.btn-submit{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 17px;border:1px solid var(--white-20);border-radius:var(--r-btn);background:var(--paper);color:var(--primary);cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
/* Outline hover ako pri .btn--white */
.btn-submit:not(:disabled):hover{background:transparent;color:var(--paper);border-color:var(--paper)}
.btn-submit:disabled{opacity:.6;cursor:not-allowed}
.form__status{padding:12px 16px;border-radius:var(--r-btn);background:var(--white-5);border:1px solid var(--white-20)}
.form__call{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 6px;text-align:center}
.form__call .placeholder-link{font-weight:500;text-decoration:underline;text-underline-offset:2px}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--white-5);background:var(--ink);color:var(--paper)}
.site-footer__inner{max-width:calc(var(--content) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.footer__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.footer__col{display:flex;flex-direction:column;gap:16px;padding:64px 24px 64px 32px;border-left:1px solid var(--white-5)}
.footer__col--brand{padding-left:0;border-left:0}
.footer__logo{display:block;width:82px;padding-bottom:3px}
.footer__logo img{width:82px;height:37px;max-width:none}
.footer__label{color:var(--white-20)}
.footer__links{display:flex;flex-direction:column;gap:16px}
.footer__links a,.footer__links span{white-space:nowrap}
/* Hover ako www.yabi.sk (footer__nav / social): farba Primary, prechod .15 s */
.footer__links a{transition:color .15s ease}
.footer__links a:hover{color:var(--primary)}
/* Sociálne siete: ikona 24 px (maska, farba = farba textu, aj pri hover) pred názvom; výška riadku sa nemení. */
.footer__social{position:relative;padding-left:32px}
.footer__social::before{content:"";position:absolute;left:0;top:50%;width:24px;height:24px;margin-top:-12px;background:currentColor;-webkit-mask:var(--icon) center top/24px 28px no-repeat;mask:var(--icon) center top/24px 28px no-repeat}
.footer__social--instagram{--icon:url(/assets/shared/icon-instagram.svg)}
.footer__social--behance{--icon:url(/assets/shared/icon-behance.svg)}
.footer__bar{display:flex;justify-content:space-between;gap:16px;padding:24px 0;border-top:1px solid var(--white-5);color:var(--white-20)}

/* ---------- Spodný blok (kontakt + footer) sa pri scrolle vysúva nad obsah (J4) ----------
   Progressive enhancement, len CSS scroll-driven animation. Kým kontakt vchádza do viewportu (horná hrana zdola
   nahor), obsah <main> pred ním zaostáva (translateY do min(25vh, 180px)) a kontakt s vyšším z-index ho prekrýva.
   Kontakt ani footer sa nehýbu: kotvy (#kontakt), fokus, poradie Tab a čítačky ostávajú bez zmeny. Posun je menší
   ako výška kontaktu, takže obsah nikdy nesiahne pod footer (bez zmeny scrollHeight, CLS 0).
   Bez podpory (timeline-scope), pri prefers-reduced-motion a v tlači = bežné zobrazenie. Kým je v obsahu nad kontaktom
   fokus klávesnice, programový fokus (tabindex=-1, napr. karty O nás pod sebou) alebo :target, efekt je vypnutý
   (obsah na pôvodnom mieste): kontakt neprekryje fokusovaný prvok a scrollIntoView/kotvy cielia na skutočnú polohu. */
.contact,.site-footer{position:relative;z-index:1}
@media screen and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()) and (timeline-scope:none){
    main:has(>.contact){timeline-scope:--bottom-reveal}
    main>.contact{view-timeline:--bottom-reveal block}
    /* Oprava: bottom-reveal zatlačí obsah nad kontaktom až o min(25vh, 180px) dole; kontakt preto
       potrebuje rovnaký vrchný margin, inak pri plnom vstupe do viewportu prekryje koniec predchádzajúcej
       sekcie (napr. otvorené FAQ). Mimo tejto podpory / pri reduced-motion ostáva bežné zobrazenie. */
    main:has(>.contact)>.contact{margin-top:min(25vh,180px)}
    main:has(>.contact)>:not(.contact,script){animation:bottom-reveal linear both;animation-timeline:--bottom-reveal;animation-range:entry 0% entry 100%}
    /* Oprava: s otvoreným menu je na <html> overflow:hidden, čím view() os kontaktu vyskočí na 100 %
       a obsah <main> sa zatlačí o min(25vh, 180px) dole. Pri otvorenom menu (JS trieda aj no-JS :target)
       je bottom-reveal vypnutý a obsah sa plynulo vráti na pôvodné miesto. */
    html.menu-open main:has(>.contact)>:not(.contact,script),html:has(#site-menu:target) main:has(>.contact)>:not(.contact,script){animation:none;transition:transform .2s ease}
    main:has(>:not(.contact,script) :is(:focus-visible,[tabindex="-1"]:focus,:target),>:not(.contact,script):is(:focus-visible,:target))>:not(.contact,script){animation:none}
  }
}
@keyframes bottom-reveal{to{transform:translateY(min(25vh,180px))}}

/* ---------- FAQ akordeón (generický): <details class="faq__item"> alebo [data-accordion] s aria-expanded ---------- */
.faq{display:flex;flex-direction:column;gap:8px}
.faq__item{padding:0;border-radius:var(--r-main);background:var(--paper-dark);cursor:pointer}
.faq__item summary,.faq__trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:20px;padding:0;border:0;background:none;text-align:left;list-style:none;cursor:pointer}
.faq__item summary{padding:24px}
@media(hover:hover) and (pointer:fine){.faq__item:hover summary{color:var(--primary)}}
.faq__item summary::-webkit-details-marker{display:none}
@media(hover:hover) and (pointer:fine){.faq__item summary:hover,.faq__trigger:hover{color:var(--primary)}}
.faq__icon{position:relative;flex:none;width:20px;height:20px;transition:transform .2s ease}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--ink)}
.faq__icon::before{left:4.5px;top:9.5px;width:11px;height:1px}
.faq__icon::after{left:9.5px;top:4.5px;width:1px;height:11px}
/* Otvorená položka: „+“ sa otočí o 45° na „ד (pri reduced-motion bez prechodu – pravidlo nižšie) */
.faq__item[open] .faq__icon,.faq__trigger[aria-expanded="true"] .faq__icon{transform:rotate(45deg)}
.faq__answer{padding:0 24px 24px;color:var(--ink-gray);max-width:848px}

/* ---------- Dočasné stránky (kostry pred doplnením obsahu) ---------- */
.page-stub{display:flex;flex-direction:column;align-items:flex-start;gap:32px;max-width:calc(var(--content) + 2 * var(--gutter));margin-inline:auto;padding:160px var(--gutter) 96px}
@media (max-width:767px){.page-stub{padding-top:112px;padding-bottom:64px}}
/* /dakujeme/ (SK + EN): text 16 px pod sebou, na mobile CTA na celú šírku */
.thanks__copy{display:flex;flex-direction:column;gap:16px;max-width:640px}
@media (max-width:767px){.thanks .btn{align-self:stretch}}

/* ---------- Responzivita ---------- */
@media (min-width:1200px){
  /* flex 1 0 0 delí voľné miesto až po odpočítaní paddingov → stĺpec s logom je užší (295/328/328/328 ako v návrhu). */
  .footer__cols{display:flex}
  .footer__col{flex:1 0 0;min-width:0}
}
@media (max-width:1279px){
  .contact__path,.contact__bird{display:none}
  .contact__inner{gap:120px}
}
@media (max-width:1199px){
  .contact__body{padding-left:0}
  .contact__copy{flex-basis:360px}
  .contact__head{grid-template-columns:140px minmax(0,1fr);gap:24px}
  .contact__title{font-size:80px;--lh:80px;letter-spacing:-4px}
}
@media (max-width:1023px){
  .contact{padding-block:64px}
  .contact__inner{gap:64px}
  .contact__head{grid-template-columns:minmax(0,1fr);gap:32px}
  .contact__title{font-size:64px;--lh:64px;letter-spacing:-2.56px}
  .contact__body{flex-direction:column;gap:32px}
  .contact__copy{flex:none}
  .form{width:100%;max-width:640px;padding:0}

  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__col{padding:32px 16px 32px 0;border-left:0;border-top:1px solid var(--white-5)}
  .footer__col--brand{grid-column:1/-1;border-top:0;padding-top:48px}
}
@media (max-width:767px){
  /* Kontakt podľa návrhu „Home / Contact / Mobile“ (390 px) */
  .contact{padding-block:64px;border:0;border-radius:var(--r-main) var(--r-main) 0 0}
  .contact__inner{gap:32px}
  .contact__head{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
  .contact__title{font-size:44px;--lh:48px;letter-spacing:-1.32px;margin-block:0;text-box:none}
  .contact__art{display:block;position:relative;width:100%;max-width:350px;height:230px}
  .contact__art-path{position:absolute;left:7%;top:4.5px;width:83.14%;height:auto;max-width:none}
  .contact__art-bird{position:absolute;left:60%;top:0;width:25.71%;height:auto;max-width:none}
  .contact__body{gap:32px;padding-left:0;width:100%}
  .contact__copy{width:100%}
  .contact__copy p{max-width:none}
  .contact__subtitle{font-size:32px;--lh:36px;letter-spacing:-.8px;margin-block:0;text-box:none}
  .contact .form{width:100%;padding:0}
  .contact .form__row--2{gap:16px}
  .field__control--area{height:56px;padding-top:7px}
  .check br{display:none}

  .site-footer__inner{padding-top:64px}
  .footer__cols{display:flex;flex-direction:column}
  .footer__col{gap:12px;padding:24px 0;border-top:1px solid var(--white-5)}
  .footer__col--brand{padding:0 0 24px;border-top:0}
  .footer__links{gap:13px}
  .footer__bar{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}
/* Dotyková plocha odkazov vo footeri ≥ 24 px (WCAG 2.5.8); na mobile medzera 13 px namiesto 12 px z návrhu */
.footer__links a.trim{width:max-content;max-width:100%;padding-block:6.5px;margin-block:calc(.3425em - var(--lh,1.215em) / 2 - 6.5px) calc(.3575em - var(--lh,1.215em) / 2 - 6.5px)}
@supports (text-box:trim-both cap text){.footer__links a.trim{margin-block:-6.5px}}


/* ====== Motion pass: ozivenie identity (meni sa pohyb, nie obsah/vzhlad).
   Vsetko iba pri prefers-reduced-motion:no-preference; scroll efekty navyse len s animation-timeline. ====== */
@keyframes yabi-rise{from{opacity:0;translate:0 34px}to{opacity:1;translate:0 0}}
@keyframes yabi-pop{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
/* ciara sa kresli zlava doprava */
@keyframes yabi-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* vtak doleti zlava do navrhovanej pozicie na ciare (relativne posunutia - funguje pre SK aj EN) */
@keyframes yabi-glide{0%{translate:-266px -27px;opacity:0}10%{opacity:1}24%{translate:-232px 0}100%{translate:0 0;opacity:1}}

@media (prefers-reduced-motion:no-preference){
  /* Load intro: hlavne nadpisy hore na strankach bez vnutornych riadkov (home ma vlastne v home.css) */
  .hero__title:not(:has(.hero__line)),.svc-intro__title,.c-hero__title,.k-title{animation:yabi-rise .8s cubic-bezier(.22,1,.36,1) .05s both}
  /* Pruzne mikrointerakcie (translate vlastnost - nerusi existujuce transform pravidla) */
  .btn{transition:background-color .15s ease,color .15s ease,border-color .15s ease,translate .4s cubic-bezier(.34,1.56,.64,1)}
  .btn:not(:disabled):hover{translate:0 -2px}
  .btn:not(:disabled):active{translate:0 1px}
  /* FAQ hover: odklopený roh papiera (modrý záhyb) + otočenie plusu. Bez tieňa a bez skoku riadka. */
  .faq__item{position:relative;overflow:hidden}
  .faq__item::after{content:"";position:absolute;top:0;right:0;width:0;height:0;pointer-events:none;background:linear-gradient(to bottom left,var(--paper) 50%,var(--primary) 50%);border-bottom-left-radius:6px;transition:width .3s cubic-bezier(.34,1.56,.64,1),height .3s cubic-bezier(.34,1.56,.64,1)}
  .faq__icon{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
  @media (hover:hover) and (pointer:fine){
    .faq__item:hover::after{width:30px;height:30px}
  }
  .faq__item[open]::after,.faq__item:has(summary:focus-visible)::after{width:30px;height:30px}

  @supports (animation-timeline:view()){
    /* Scroll reveal: obsah jemne vystupi zdola, zoznamy s malym odstupom */
    .intro__label,.intro>.chip{animation:yabi-rise both;animation-timeline:view();animation-range:entry 0 entry 45%}
    .intro__title{animation:yabi-rise both;animation-timeline:view();animation-range:entry 5% entry 55%}
    .intro__summary{animation:yabi-rise both;animation-timeline:view();animation-range:entry 10% entry 60%}
    .step,.project-tile,.tag,.b-featured,.b-list>*,.c-content>*,.contact__head{animation:yabi-rise both;animation-timeline:view();animation-range:entry 0 entry 40%}
    .b-list>*:nth-child(2),.faq__item:nth-child(2){animation-range:entry 4% entry 44%}
    .b-list>*:nth-child(3),.faq__item:nth-child(3){animation-range:entry 8% entry 48%}
    .b-list>*:nth-child(4),.faq__item:nth-child(4){animation-range:entry 12% entry 52%}
    .faq__item{animation:yabi-rise both;animation-timeline:view();animation-range:entry 0 entry 40%}
    .pricing__cta{animation:yabi-rise both;animation-timeline:view();animation-range:entry 10% entry 60%}
    /* Kontakt sekcia (vsetky stranky): nadpis vstupi, ciara sa kresli, vtak doleti, obsah nasleduje */
    .contact__path{animation:yabi-wipe 1s cubic-bezier(.22,1,.36,1) both;animation-timeline:view();animation-range:entry 20% entry 75%}
    .contact__bird{animation:yabi-glide 1.1s cubic-bezier(.3,.9,.3,1) both;animation-timeline:view();animation-range:entry 20% entry 82%}
    .contact__copy,.contact .form{animation:yabi-rise both;animation-timeline:view();animation-range:entry 35% entry 92%}
  }
}


/* YB/Lang switch, Figma 901:85061. 143 x 44, 4px inset, 2px gap. */
.language-pill{position:static;z-index:auto;margin-left:auto;margin-right:12px;flex:none;display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--ink);border-radius:999px;background:var(--paper);height:44px;font-size:14px;line-height:20px;white-space:nowrap}
.language-pill__link{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 12px;border-radius:999px;color:#80868b;text-decoration:none;transition:background-color .15s ease,color .15s ease}
.language-pill__link[aria-current]{background:var(--ink);color:#fff}
.language-pill__dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--orange)}
.language-pill__link:hover{background:var(--paper-dark);color:var(--ink)}
.language-pill__link[aria-current]:hover{background:var(--ink);color:#fff}
.language-pill:focus-within{outline:2px solid var(--primary);outline-offset:2px}
.language-pill__link:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.site-menu__lang[hidden]{display:none}

@media(prefers-reduced-motion:reduce){.language-pill__link{transition:none}}
.language-pill{width:143px}
.language-pill__link{flex:1;padding-inline:8px;min-width:0}
.language-pill__link[aria-current]{flex:1.2}

/* Button typography trial, shared across both languages. */
.btn,.btn>.trim,.btn-submit,.btn-submit>.trim{font-size:16px;line-height:24px;letter-spacing:-.16px}
.btn{white-space:normal;text-align:center}
/* Language choice belongs to the open navigation only. */
.site-nav:not(.is-open) .language-pill{display:none}
@supports selector(:has(*)){
  .site-nav:has(#site-menu:target) .language-pill{display:inline-flex}
}
/* Give animated heading layers room for rounded caps, accents and descenders. */
.intro__title{padding-block:.08em;margin-block:-.08em}
@media(max-width:767px){.contact .field__control--area{height:96px;min-height:96px}}
@media(max-width:359px){.contact .form__row--2{grid-template-columns:1fr}}

.hero-morph{position:relative;isolation:isolate;z-index:20}
.hero-morph__pin{position:relative;isolation:isolate}
/* Start from a full-viewport clip with zero radius, so the first animated frame matches the shape JS writes. */
.hero-morph__blue{position:fixed;inset:0 0 auto;height:100vh;height:100dvh;min-height:0;z-index:3;overflow:hidden;background:var(--morph-colour);color:var(--morph-ink);pointer-events:none;clip-path:inset(0 round 0);will-change:clip-path;contain:paint}
/* The copy moves every frame with scroll; its own layer makes that a composite, not a repaint. */
.hero-morph__blue>*{will-change:transform}
.hero-morph__blue :is(h1,h2,p,a,span,li){color:inherit}
.hero-morph__blue .art-hero__card{background:var(--morph-colour);box-shadow:none}
.hero-morph__blue .art-back img{filter:brightness(0) invert(1)}
.hero-morph__blue .hero__perex,.hero-morph__blue .ticker__list{color:var(--morph-ink)}
.hero-morph__blue .chip{background:transparent;color:var(--morph-ink);border-color:currentColor;backdrop-filter:none}
.hero-morph__blue .hero__arrow,.hero-morph__blue .hero__bird{filter:brightness(0) invert(1)}
.hero-morph__blue .hero__aside>.btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.hero-morph__blue .hero__bird{visibility:hidden}
/* One entrance, not two competing reveals. Keep both visual layers pixel-aligned. */
.hero-morph{animation:none!important}
.hero-morph__pin>* *{animation:none!important}

.hero-morph__blue .btn,.hero-morph__blue .btn>.trim{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.hero-morph__blue [data-morph-target]{visibility:hidden}
.morph-mark{display:block;width:60px;height:58px;margin-top:24px}
.svc-morph-intro{max-width:calc(var(--content) + 2 * var(--gutter));margin-inline:auto;padding:220px var(--gutter) 0}
.svc-page.svc-page--after-intro{padding-top:160px}
@media(max-width:767px){.svc-morph-intro{padding-top:216px}}
@media(min-width:768px) and (max-width:1099px){.svc-page.svc-page--after-intro{padding-top:120px}}

.hero-morph__blue .svc-badge{color:var(--ink)}
.hero-morph__blue .k-line{filter:brightness(0) invert(1)}

/* Ripple layer: viewport-fixed, sized inline to the visible viewport, clips the ring so it can never
   widen the document. No pointer events, so it never captures taps or scroll gestures.
   z-index 4 inside the scene: same stacking as the previous ring, navigation stays above. */

.hero-morph__ripple-layer{position:fixed;left:0;top:0;width:0;height:0;z-index:4;overflow:hidden;overflow:clip;pointer-events:none;contain:strict}
/* Track: zero-size origin moved by -scroll each frame, so ring coordinates are document coordinates. */
.hero-morph__ripple-track{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
/* Impact ring: unchanged look; removed together with its layer after it plays. */
.hero-morph__ripple{position:absolute;z-index:4;box-sizing:border-box;border:2px solid var(--morph-colour);border-radius:50%;pointer-events:none;opacity:0;will-change:transform,opacity}

@media(prefers-reduced-motion:reduce){.hero-morph__pin{position:static;min-height:0}.hero-morph__blue,.hero-morph__ripple-layer{display:none}}
@media print{.hero-morph{height:auto!important}.hero-morph__pin{position:static;min-height:0}.hero-morph__blue,.hero-morph__ripple-layer{display:none}}
/* Contact normally hides its large decorative bird on mobile; keep a small visible endpoint. */
@media(max-width:767px){.hero-morph .k-bird{display:block;position:absolute;left:auto;right:var(--gutter);top:auto;bottom:0;width:60px;height:58px;max-width:none}}

.hero-morph.is-complete{z-index:auto}


@media (max-width:767px){
  /* Bird feet (graphic1-x.svg y 87.3512) onto the top edge of the line stroke
     (illustration.svg y ~112.87 − 5.5 = 107.37). Feet = 0.249534·W, stroke top = 4.5px + 0.30676·W,
     difference = 4.5px + 0.057226·W. Margin % resolves against the container WIDTH, the same basis
     as left/width %, so this holds at every width. W = 350 → 24.53px.
     The translate property is untouched; the box is absolute inside a fixed-height .contact__art. */
  .contact__art .contact__art-bird{top:4.5px;margin-top:5.72%}

  /* Subtitle is not referenced by aria-labelledby (the section uses #kontakt-title).
     The flex gap of .contact__copy only applies between rendered items → no empty space. */
  .contact__copy .contact__subtitle{display:none}
}

/* PATCH → append to the very END of css/base.css (separate change, FAQ fold colour only).
   Neutral fold, a step darker than the card (--paper-dark #f1f6f8) so it stays visible.
   Background only: shape, size, hover/open/focus rules and transitions are untouched. */
.faq__item::after{background:linear-gradient(to bottom left,var(--paper) 50%,#dbe4e8 50%)}
/* ================================================================
   PATCH → append to the very END of css/base.css
   Blue shared contact block (.contact), desktop illustration only (>=1280 px).
   1279 px and below are untouched: path + bird stay hidden there, mobile .contact__art keeps its own rules.
   No markup change: path and bird stay direct children of .contact__inner and share one grid cell.
   ================================================================ */
@media (min-width:1280px){
  /* One source for the body columns; the illustration offset is derived from the same values. */
  .contact{--contact-lead:192px;--contact-copy:420px;--contact-col-gap:32px;--contact-art-x:calc(var(--contact-lead) + var(--contact-copy) + var(--contact-col-gap))}
  .contact__body{padding-left:var(--contact-lead);gap:var(--contact-col-gap)}  /* same values as before */
  .contact__copy{flex-basis:var(--contact-copy)}                                /* same value as before */

  /* Rows follow the real heights: head (1, 2 or more lines) → illustration → body. Replaces the 276px gap. */
  .contact__inner{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  .contact__head{grid-area:1/1}
  .contact__body{grid-area:3/1}

  /* Illustration in flow, above the form column. position:static also neutralises the old absolute
     left/top and the :lang(en) left override (same specificity, this rule is later). */
  .contact__inner>.contact__path,
  .contact__inner>.contact__bird{grid-area:2/1;position:static;justify-self:start;align-self:start}
  /* 24px below the head, 24px between the arrow tip (path y ≈ 301) and the form box. */
  .contact__inner>.contact__path{margin:24px 0 24px var(--contact-art-x)}
  /* Bird keeps its exact offset to the line: dx 786 − 579.5 = 206.5px, dy 172.5 − 153.5 = 19px. */
  .contact__inner>.contact__bird{margin:calc(24px + 19px) 0 0 calc(var(--contact-art-x) + 206.5px)}
}

/* Recommended cleanup in css/base.css (optional, the patch already neutralises it):
   delete the now unused EN override
     @media (min-width:1280px){ :lang(en) .contact__path{left:759.5px} :lang(en) .contact__bird{left:966px} } */

/* Shared CTA: Figma Home/Blog path x586 and About x640 at1440.
   Keep an8px vertical gap (instead of24) so translated headings never collide.
   Mobile keeps its Figma32px gap; tablet artwork remains hidden. */
@media(min-width:1280px){
 .contact{--contact-art-x:500.5px}
 .page-o-nas .contact{--contact-art-x:554.5px}
 .contact__inner>.contact__path{margin:8px 0 24px var(--contact-art-x)}
 .contact__inner>.contact__bird{margin:27px 0 0 calc(var(--contact-art-x) + 206.5px)}
}

.check a,.k-check a,.nl__consent a{text-decoration:underline;text-underline-offset:2px}