/* BUMIRA · návrh D: vzdušný web podľa Deprostavu, RD STYL a Fowler Homes v našich farbách.
 * Biela plocha, veľké fotky pri okraji stránky, krátky text, jedno tlačidlo.
 * Scroll je vždy natívny. Fotky sa hýbu len podľa posunu (CSS scroll timeline), nič scroll nedrží. */
@font-face{font-family:"Instrument Sans";src:url(../fonts/InstrumentSans.woff2) format("woff2");font-weight:400 600;font-display:swap}

:root{
  --navy:#16245C;--navy-t:#0F1A45;--tehla:#C4502C;--tehla-t:#B5431F;--tehla-s:#E58A63;--papier:#F4F1EB;--hmla:#9AA6C9;--biela:#fff;
  --text:rgba(22,36,92,.84);
  --okraj:clamp(20px,5vw,72px);
  --medzera:clamp(64px,9vw,128px);
  --hlava:72px;
  --r-velky:clamp(64px,11vw,176px);
  --r-maly:clamp(16px,2vw,28px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hlava) + 16px);-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--biela);color:var(--text);font:400 1.0625rem/1.6 "Instrument Sans",system-ui,sans-serif;overflow-x:clip}
[hidden]{display:none!important}
img,video{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
h1,h2,h3{color:var(--navy);font-weight:600;line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
h2{font-size:clamp(2rem,3.5vw,3.125rem)}
h3{font-size:1.25rem;line-height:1.25;letter-spacing:-.012em}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--navy);color:var(--biela);padding:10px 16px;border-radius:8px}
.skip:focus{top:12px}
main:focus{outline:0}

/* podnadpis: to, čo robí na Fowleri farebný druhý riadok */
.pod{margin-top:10px;color:var(--tehla-t);font-size:clamp(1.125rem,1.5vw,1.375rem);font-weight:600;line-height:1.3;letter-spacing:-.008em}
.pod + p{margin-top:18px}
.navrh{margin-top:12px;font-size:.875rem;color:var(--tehla-t)}
.tlacidla{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;border:0;border-radius:10px;font:600 1rem/1.2 "Instrument Sans",system-ui,sans-serif;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .18s ease,color .18s ease}
.btn-tehla{background:var(--tehla);color:var(--biela)}
.btn-tehla:hover{background:var(--tehla-t)}
.btn-navy{background:var(--navy);color:var(--biela)}
.btn-navy:hover{background:var(--navy-t)}
.btn-biele{background:var(--biela);color:var(--navy)}
.btn-biele:hover{background:var(--papier)}

.stitok{position:absolute;z-index:2;left:14px;bottom:14px;padding:4px 10px;border-radius:999px;background:rgba(15,26,69,.72);color:var(--biela);font-size:.75rem;line-height:1.35}

/* ---------- hlavička ---------- */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);height:var(--hlava);padding-inline:var(--okraj);background:var(--biela);transition:transform .25s ease,box-shadow .2s ease}
.top.solid{box-shadow:0 1px 0 rgba(22,36,92,.1)}
.top.hide{transform:translateY(-100%)}
.brand{display:block;flex:none;margin-right:auto;border-radius:4px}
.logo{width:auto;height:34px}
.nav ul{display:flex;gap:clamp(14px,2.2vw,32px)}
.nav a{white-space:nowrap;color:var(--navy);font-weight:500;font-size:.9875rem;text-decoration:none;padding-block:8px;background:linear-gradient(var(--tehla),var(--tehla)) 0 100%/0 2px no-repeat;transition:background-size .2s ease}
.nav a:hover{background-size:100% 2px}
.top-tel{display:none;color:var(--navy);font-weight:600;font-size:.9375rem;text-decoration:none;white-space:nowrap}
.top-cta{min-height:44px;padding:8px 18px;font-size:.9375rem;white-space:nowrap}
.menu-btn{display:none;align-items:center;gap:0;min-height:44px;padding:8px 2px 8px 10px;border:0;background:none;color:var(--navy);font:600 1rem "Instrument Sans",system-ui,sans-serif;cursor:pointer;position:relative;padding-right:34px}
.menu-btn i{position:absolute;right:2px;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s ease}
.menu-btn i:nth-of-type(1){top:17px}
.menu-btn i:nth-of-type(2){top:25px}
.menu-btn[aria-expanded="true"] i:nth-of-type(1){transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-of-type(2){transform:translateY(-4px) rotate(-45deg)}
@media (min-width:1360px){.top-tel{display:block}}
.nav a[aria-current="page"]{background-size:100% 2px}
.mmenu a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--tehla);text-decoration-thickness:3px;text-underline-offset:8px}
@media (max-width:1139px){
  .nav,.top-cta{display:none!important}
  .menu-btn{display:inline-flex}
}
.mmenu{position:fixed;inset:var(--hlava) 0 0;z-index:39;overflow:auto;padding:12px var(--okraj) 32px;background:var(--biela)}
.mmenu li a{display:block;padding:14px 0;color:var(--navy);font-size:1.5rem;font-weight:600;letter-spacing:-.015em;text-decoration:none;border-bottom:1px solid rgba(22,36,92,.1)}
.mmenu .btn{width:100%;margin-top:24px}
html.menu-open{overflow:hidden}

/* ---------- úvod s videom ---------- */
.uvod{position:relative;isolation:isolate;display:flex;margin-inline:clamp(8px,1vw,16px);min-height:min(calc(100svh - var(--hlava) - 12px),60rem);overflow:hidden;border-radius:var(--r-maly);background:var(--navy-t);color:var(--biela)}
.uvod-bg{position:absolute;inset:0;z-index:-2}
.uvod-bg picture{position:absolute;inset:0;display:block}
.uvod-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.b-v{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 70%;opacity:0}
.b-video.hraje .b-v{opacity:1}
.b-start{display:none!important}
html[data-motion="full"] .b-start,html[data-motion="lite"] .b-start{display:block!important}
html[data-motion="full"] .b-end,html[data-motion="lite"] .b-end{display:none}
.b-video.je-koniec .b-start{display:none!important}
.b-video.je-koniec .b-end{display:block!important}
.uvod-tien{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,26,69,.7) 0,rgba(15,26,69,.42) 34%,rgba(15,26,69,0) 56%,rgba(15,26,69,0) 74%,rgba(15,26,69,.5) 100%)}
.uvod-obsah{display:flex;flex-direction:column;justify-content:space-between;gap:32px;width:100%;padding:clamp(28px,5vw,72px) clamp(20px,5vw,72px) 46px}
.uvod h1{max-width:9.5ch;color:var(--biela);font-size:clamp(2.75rem,6.4vw,5.5rem);line-height:1;letter-spacing:-.03em}
.uvod-text p{margin-top:16px;max-width:32rem;font-size:clamp(1.0625rem,1.5vw,1.3125rem);line-height:1.45;color:var(--biela)}
.uvod-tlacidla{display:flex;flex-wrap:wrap;gap:12px}
.uvod :focus-visible{outline-color:var(--biela)}
@media (max-width:699px){.uvod-tien{background:linear-gradient(180deg,rgba(15,26,69,.72) 0,rgba(15,26,69,.56) 260px,rgba(15,26,69,0) 420px,rgba(15,26,69,0) 74%,rgba(15,26,69,.5) 100%)}}
@media (max-width:699px) and (max-height:660px){.uvod-bg{inset:-72px 0 72px}.uvod-tien{background:linear-gradient(180deg,rgba(15,26,69,.72) 0,rgba(15,26,69,.56) 230px,rgba(15,26,69,0) 300px,rgba(15,26,69,0) calc(100% - 150px),rgba(15,26,69,1) calc(100% - 72px))}}
@media (min-width:700px) and (max-width:1359px){.uvod-text p{max-width:26rem}}
.uvod-stitok{left:auto;right:14px;bottom:12px}
@media (max-width:559px){
  .uvod-tlacidla .btn{flex:1 1 100%}
  .uvod-stitok{right:auto;left:20px}
}
@media (min-width:700px){
  .uvod-bg img,.b-v{object-position:70% 55%}
  .uvod-tien{background:linear-gradient(90deg,rgba(15,26,69,.78) 0,rgba(15,26,69,.5) 38%,rgba(15,26,69,0) 68%)}
  .uvod-obsah{justify-content:center}
}
@media (min-width:700px) and (max-width:1099px){
  .uvod-tien{background:linear-gradient(90deg,rgba(15,26,69,.74) 0,rgba(15,26,69,.5) 460px,rgba(15,26,69,0) 760px)}
}

/* ---------- úvodný text ---------- */
.uvodne{padding:var(--medzera) var(--okraj) clamp(40px,5vw,72px)}
.uvodne > *{max-width:40rem}

/* ---------- riadky: fotka pri okraji stránky a text vedľa nej ---------- */
.riadok{display:grid;grid-template-columns:minmax(0,1fr);row-gap:32px;padding-bottom:var(--medzera);overflow-x:clip}
.riadok-prvy{padding-top:var(--medzera)}
.foto{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:0 0 var(--r-velky) 0;background:var(--papier)}
.foto picture,.foto img{display:block;width:100%;height:100%}
.foto img{object-fit:cover}
.riadok-opak .foto{border-radius:0 0 0 var(--r-velky)}
.foto .stitok{left:auto;right:14px;bottom:auto;top:14px}
.riadok-opak .foto .stitok{right:auto;left:14px}
.riadok-text{padding-inline:var(--okraj)}
.riadok-text > :not(.tlacidla):not(.viac){max-width:34rem}
@media (min-width:900px){
  .riadok{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;column-gap:clamp(40px,6vw,104px)}
  .riadok-text{padding-inline:0 var(--okraj)}
  .riadok-opak{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .riadok-opak .foto{order:2}
  .riadok-opak .riadok-text{padding-inline:var(--okraj) 0}
  .foto{width:100%;height:min(46vw,720px);aspect-ratio:auto;border-radius:0 var(--r-maly) var(--r-velky) 0}
  #domy .foto img{object-position:50% 70%}
  .riadok-opak .foto{border-radius:var(--r-maly) 0 0 var(--r-velky)}
}

/* ---------- čo je v cene: vrstvy sa rozbaľujú, stránka ostáva krátka ---------- */
.rozsah{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:0 var(--okraj) var(--medzera)}
.rozsah-uvod > *{max-width:30rem}
.vrstva{border-top:1px solid rgba(22,36,92,.16)}
.vrstva:last-child{border-bottom:1px solid rgba(22,36,92,.16)}
.vrstva summary{display:flex;align-items:center;gap:14px;min-height:64px;color:var(--navy);font-size:1.25rem;font-weight:600;letter-spacing:-.012em;cursor:pointer;list-style:none}
.vrstva summary::-webkit-details-marker{display:none}
.vrstva summary::after{content:"";flex:none;margin-left:auto;width:14px;height:14px;background:linear-gradient(var(--tehla-t),var(--tehla-t)) center/100% 2px no-repeat,linear-gradient(var(--tehla-t),var(--tehla-t)) center/2px 100% no-repeat;transition:transform .2s ease}
.vrstva[open] summary::after{transform:rotate(45deg)}
.vrstva-n{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--papier);color:var(--navy);font-size:.9375rem}
.vrstva-telo{padding:0 0 24px}
.stlpce{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:16px}
.stlpce h3{font-size:1rem;margin-bottom:6px}
.stlpce li{position:relative;padding-left:24px;margin-top:4px;line-height:1.45}
.stlpce li::before{content:"";position:absolute;left:2px;top:.38em;width:14px;height:14px;background:center/contain no-repeat}
.je li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 7.5l3.5 3.5 7.5-8' fill='none' stroke='%2316245C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.nie li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' fill='none' stroke='%23B5431F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.skryte{margin-top:16px;padding:12px 16px;border-radius:12px;background:var(--papier);font-size:1rem;line-height:1.45}
.skryte b{color:var(--navy);font-weight:600}
@media (min-width:640px){.stlpce{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media (min-width:1000px){.rozsah{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px);align-items:start}}

/* ---------- orientačná cena ---------- */
.cena{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin:0 clamp(8px,1vw,16px) var(--medzera);padding:clamp(32px,5vw,72px) clamp(20px,5vw,72px);border-radius:var(--r-maly);background:var(--papier)}
.cena-text > *{max-width:30rem}
.cena-box{width:100%;max-width:44rem;justify-self:end;min-width:0;padding:clamp(20px,3vw,32px);border-radius:var(--r-maly);background:var(--biela)}
.cena-demo{margin-bottom:16px;padding:10px 14px;border-radius:10px;background:var(--papier);color:var(--navy);font-size:.9375rem;line-height:1.4}
.cena-demo b{font-weight:600;color:var(--tehla-t)}
.cena-form{display:none}
.calc-on .cena-form{display:block}
.calc-on .cena-nojs{display:none}
.prepinac{display:flex;gap:4px;margin-bottom:16px;padding:4px;border-radius:12px;background:var(--papier)}
.prepinac label{flex:1;cursor:pointer}
.prepinac input{position:absolute;opacity:0;width:1px;height:1px}
.prepinac span{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:9px;color:var(--navy);font-weight:600;transition:background-color .15s ease,color .15s ease}
.prepinac input:checked + span{background:var(--navy);color:var(--biela)}
.prepinac input:focus-visible + span{outline:3px solid var(--navy);outline-offset:2px}
.cena-vysledok{display:block;margin:4px 0 16px;color:var(--text);font-size:.9375rem;line-height:1.4}
.cena-vysledok strong{display:block;margin:2px 0 6px;color:var(--navy);font-size:clamp(1.625rem,3vw,2.25rem);font-weight:600;line-height:1.1;letter-spacing:-.02em}
.cena-box .btn{width:100%}
@media (max-width:899px){.cena-box{padding:0;background:none}.cena-demo{padding:0;background:none}.prepinac{background:rgba(22,36,92,.08)}.cena-text > *{max-width:none}}
@media (min-width:900px){.cena{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center}}

/* ---------- postup: panel prekrýva širokú fotku, ako Plans Range na Fowleri ---------- */
.postup{padding-bottom:var(--medzera)}
.foto-plna{position:relative;overflow:hidden;height:clamp(280px,46vw,640px)}
.foto-plna picture,.foto-plna img{display:block;width:100%;height:100%}
.foto-plna img{object-fit:cover;object-position:50% 40%}
.foto-plna .stitok{bottom:auto;top:14px}
@media (min-width:2200px){.foto-plna img{object-position:50% 62%}}
.postup-panel{position:relative;z-index:1;width:min(1240px,calc(100% - 2*clamp(8px,3vw,48px)));margin:clamp(-120px,-9vw,-48px) auto 0;padding:clamp(28px,4.4vw,64px) clamp(20px,4.4vw,64px);border-radius:var(--r-maly);background:var(--papier)}
.kroky{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-top:36px}
.kroky li{position:relative;padding-left:60px}
.kroky h3{padding-top:8px}
.cislo{position:absolute;left:0;top:0;z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--biela);font-weight:600}
.kroky dl{margin-top:8px;font-size:1rem;line-height:1.45}
.kroky dl > div{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:8px;margin-top:6px}
.kroky dt{color:var(--navy);font-weight:600}
.kroky li:not(:last-child)::before,.kroky li:not(:last-child)::after{content:"";position:absolute;left:20px;top:42px;bottom:-32px;width:2px;background:rgba(22,36,92,.16)}
.kroky li:not(:last-child)::after{background:var(--tehla);transform-origin:50% 0}
@media (min-width:1000px){
  .kroky{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
  .kroky li{padding:60px 0 0}
  .kroky h3{padding-top:0}
  .kroky dl > div{display:block;margin-top:10px}
  .kroky li:not(:last-child)::before,.kroky li:not(:last-child)::after{left:42px;right:calc(-1*clamp(20px,2.6vw,40px));top:20px;bottom:auto;width:auto;height:2px}
  .kroky li:not(:last-child)::after{transform-origin:0 50%}
}

@media (max-width:359px){.kroky dl > div{display:block}.kroky li{padding-left:52px}}

/* ---------- pre koho: tri stĺpce bez rámčekov ---------- */
.pre-koho{padding:0 var(--okraj) var(--medzera);text-align:center}
.pre-koho h2{max-width:24ch;margin-inline:auto}
.koho{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;max-width:1120px;margin:40px auto 0}
.koho p{margin-top:8px;max-width:30rem;margin-inline:auto}
.pre-koho .odkaz{display:inline-block;padding-block:6px}
.pre-koho > .navrh{text-align:center}
.odkaz{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--tehla);text-decoration-thickness:2px;text-underline-offset:3px}
.odkaz:hover{color:var(--tehla-t)}
@media (min-width:760px){.koho{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}}

/* ---------- denník stavby ---------- */
.dennik{padding:0 var(--okraj) var(--medzera)}
.dennik-uvod > *{max-width:38rem}
.etapy{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:36px}
.etapy li{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,11fr);gap:16px;align-items:center}
.etapa-foto{position:relative;overflow:hidden;aspect-ratio:1;border-radius:var(--r-maly) var(--r-maly) clamp(40px,6vw,72px) var(--r-maly);background:var(--papier)}
.etapa-foto picture,.etapa-foto img{display:block;width:100%;height:100%}
.etapa-foto img{object-fit:cover}
.etapa-foto .stitok{left:6px;bottom:auto;top:6px;white-space:nowrap;font-size:.625rem;padding:2px 6px}
.etapa-kedy{margin-bottom:4px;color:var(--tehla-t);font-size:.9375rem;font-weight:600}
.etapa-text h3 + p{margin-top:6px;font-size:1rem;line-height:1.45}
@media (min-width:760px){
  .etapy{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,40px)}
  .etapy li{display:block}
  .etapa-foto{aspect-ratio:4/3;margin-bottom:18px}
  .etapa-foto .stitok{left:12px;top:12px;font-size:.75rem;padding:4px 10px}
}

/* ---------- o nás ---------- */
.onas{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:0 var(--okraj) var(--medzera)}
.onas-pribeh > *{max-width:38rem}
.onas-pribeh p + p,.onas-pribeh ul + p{margin-top:14px}
.onas-pripady{margin:14px 0 0;padding-left:1.1em;list-style:disc}
.onas-pripady li + li{margin-top:6px}
.onas-pripady strong{color:var(--navy);font-weight:600}
.onas blockquote{margin:24px 0 0;color:var(--navy);font-size:clamp(1.5rem,2.6vw,2.125rem);font-weight:600;line-height:1.2;letter-spacing:-.018em}
@media (min-width:900px){.onas{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,104px)}}

/* ---------- kde staviame ---------- */
.kde{padding:0 var(--okraj) var(--medzera);text-align:center}
.kde > p{max-width:36rem;margin:14px auto 0}
.kde-zoznam{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px;margin:28px auto 0}
.kde-zoznam li{padding:8px 16px;border-radius:999px;background:var(--papier);color:var(--navy);font-weight:500;line-height:1.3}
.kde-zoznam .ph-chip{background:none;border:1.5px dashed rgba(22,36,92,.35);font-weight:400}
.tlacidla-stred{justify-content:center}

/* ---------- kontakt ---------- *//* ---------- kontakt ---------- */
.kontakt{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin-inline:clamp(8px,1vw,16px);padding:clamp(40px,6vw,88px) clamp(20px,5vw,72px);border-radius:var(--r-maly);background:var(--navy);color:var(--biela)}
.kontakt h2{color:var(--biela)}
.kontakt-lead{margin-top:14px;max-width:26rem;font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.4}
.kontakt-info{margin-top:18px;max-width:26rem;color:var(--papier);font-size:.9375rem}
.kontakt-udaje{margin-top:18px}
.po-ruke{margin-top:28px;max-width:26rem;font-size:1rem;line-height:1.45}
.po-ruke h3{color:var(--biela);font-size:1.125rem}
.po-ruke ul{margin:8px 0;padding-left:1.1em;list-style:disc}
.po-ruke li{margin-top:4px}
.kontakt-udaje dt{color:var(--hmla);font-size:.875rem}
.kontakt-udaje dd{font-size:1.25rem;font-weight:600}
.kontakt :focus-visible{outline-color:var(--tehla-s)}
.form{width:100%;max-width:44rem;justify-self:end;min-width:0;padding:clamp(20px,3vw,36px);border-radius:var(--r-maly);background:var(--biela);color:var(--text)}
.form :focus-visible{outline-color:var(--navy)}
@media (min-width:900px){.kontakt{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}}

.fsteps{display:none;gap:18px;margin-bottom:20px;color:rgba(22,36,92,.7);font-size:.875rem;font-weight:500}
.fsteps-on .fsteps{display:flex;flex-wrap:wrap}
.fsteps li{display:flex;align-items:center;gap:7px}
.fsteps b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(22,36,92,.1);color:var(--navy);font-weight:600;font-size:.8125rem}
.fsteps li.on{color:var(--navy);font-weight:600}
.fsteps li.on b,.fsteps li.done b{background:var(--navy);color:var(--biela)}
fieldset{margin:0;padding:0;border:0;min-width:0}
.fstep:focus{outline:0}
.fstep + .fstep{margin-top:32px}
.fsteps-on .fstep + .fstep{margin-top:0}
.fstep-h{padding:0;color:var(--navy);font-size:1.3125rem;font-weight:600;letter-spacing:-.012em;margin-bottom:16px}
.chips{margin-bottom:18px}
.chips legend,.f label{display:block;padding:0;margin-bottom:8px;color:var(--navy);font-weight:600;font-size:.9875rem}
.opt{color:rgba(22,36,92,.72);font-weight:400}
.chips label{display:inline-block;margin:0 8px 8px 0;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label > span{display:flex;align-items:center;min-height:44px;padding:8px 16px;border:1.5px solid rgba(22,36,92,.28);border-radius:10px;color:var(--navy);font-weight:500;transition:background-color .15s ease,color .15s ease}
.chips label > input:checked + span{background:var(--navy);border-color:var(--navy);color:var(--biela)}
.chips label > input:focus-visible + span{outline:3px solid var(--navy);outline-offset:2px}
.f{margin-bottom:16px}
.f input:not([type=file]),.f textarea,.f select{width:100%;min-height:48px;padding:10px 12px;border:1.5px solid rgba(22,36,92,.32);border-radius:10px;background:var(--biela);color:var(--navy);font:400 1rem/1.4 "Instrument Sans",system-ui,sans-serif}
.f input[type=file]{width:100%;font:400 .9375rem "Instrument Sans",system-ui,sans-serif}
.f input[type=file]::file-selector-button{font:inherit;font-weight:600;background:var(--papier);color:var(--navy);border:0;border-radius:10px;padding:12px 14px;margin-right:10px;cursor:pointer}
.f input::placeholder,.f textarea::placeholder{color:rgba(22,36,92,.72)}
#f-rozsah{min-height:136px}
.f [aria-invalid="true"]{border-color:var(--tehla-t)}
.f-hint{margin:-4px 0 14px;color:rgba(22,36,92,.76);font-size:.875rem}
.f .f-hint{margin:6px 0 0}
.f-err{margin-top:6px;color:var(--tehla-t);font-size:.875rem;font-weight:500}
.f-files{margin-top:6px;font-size:.875rem}
.f-files li{display:flex;align-items:center;gap:10px;margin-top:6px;min-width:0;overflow-wrap:anywhere}
.f-files img{flex:none;width:56px;height:56px;object-fit:cover;border-radius:8px}
.fnav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.fnav .btn{margin-left:auto;background:var(--tehla);color:var(--biela)}
.fnav .btn:hover{background:var(--tehla-t)}
.fnav .btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-back{min-height:44px;padding:8px 4px;border:0;background:none;color:var(--navy);font:600 1rem "Instrument Sans",system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.form-errors{margin-bottom:16px;padding:12px 14px;border-radius:10px;background:var(--papier);color:var(--navy)}
.form-errors:focus{outline:2px solid var(--tehla-t)}
.form-errors ul{margin-top:6px}
.form-mode,.privacy{margin-top:12px;color:rgba(22,36,92,.76);font-size:.875rem}
.form-msg{margin-top:10px;color:var(--navy);font-weight:600}
.form-msg:empty{display:none}
.form-nojs{display:none;margin-top:12px;color:var(--tehla-t);font-weight:500;font-size:.9375rem}
.no-js .form-nojs{display:block}

/* ---------- pätička ---------- */
.foot{display:grid;gap:8px;padding:clamp(32px,5vw,56px) var(--okraj) clamp(36px,5vw,64px);font-size:.9375rem}
.foot-hore{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;margin-bottom:12px}
.foot .logo{height:30px}
.foot ul{display:flex;flex-wrap:wrap;gap:0 22px}
.foot li a{display:inline-block;padding-block:10px;color:var(--navy);font-weight:500}

/* ---------- spodná lišta na telefóne: kontakt stále pod palcom ---------- */
.cbar{display:none}
@media (max-width:899px){
  .has-cbar{scroll-padding-bottom:84px}
  .cbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:6px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));background:var(--biela);box-shadow:0 -1px 0 rgba(22,36,92,.14);transform:translateY(110%);visibility:hidden;transition:transform .22s ease,visibility .22s}
  .cbar.show{transform:none;visibility:visible}
  .cbar-a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:52px;padding:4px;border-radius:10px;background:var(--papier);color:var(--navy);font-size:.875rem;font-weight:600;line-height:1.2;text-align:center;text-decoration:none}
  .cbar-a svg{width:18px;height:18px;fill:currentColor}
  .cbar-a small{font-size:.6875rem;font-weight:400;line-height:1.1}
  .cbar-go{background:var(--tehla);color:var(--biela)}
}

/* ---------- telefón v hlavičke: po doplnení čísla je kam ťuknúť hneď na prvej obrazovke ---------- */
@media (max-width:1139px){
  .top-tel:not([hidden]){display:inline-flex;align-items:center;min-height:44px;font-size:0}
  .top-tel:not([hidden])::before{content:"Zavolať";font-size:1rem}
}
@media (max-width:379px){
  .top{gap:12px}
  .logo{height:28px}
  .menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .menu-btn{min-width:44px}
}
/* bez JavaScriptu nič, čo by nič nerobilo */
.no-js .menu-btn,.no-js [data-next],.no-js [data-prev]{display:none}
.no-js .top-cta{display:inline-flex!important}
.no-js [data-nahlad]{display:none}

/* ---------- stránka pre obce ---------- */
.obce-uvod{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;padding-block:clamp(24px,5vw,72px) var(--medzera)}
.obce-uvod-text{padding-inline:var(--okraj)}
.obce-uvod-text > *{max-width:34rem}
.obce-uvod h1{font-size:clamp(2.25rem,4.6vw,4rem);line-height:1.04;letter-spacing:-.028em}
.obce-uvod-text h1 + p{margin-top:16px;font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.5}
.obce-uvod .foto{order:0;border-radius:0 0 0 var(--r-velky)}
.obce-uvod .foto .stitok{right:auto;left:14px}
.obce-postup .postup-panel{margin-top:0}
.obce-doklady{padding-bottom:var(--medzera)}
@media (min-width:900px){
  .obce-uvod{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;column-gap:clamp(40px,6vw,104px);overflow-x:clip}
  .obce-uvod-text{padding-inline:var(--okraj) 0}
  .obce-uvod .foto{border-radius:var(--r-maly) 0 0 var(--r-velky)}
}

/* ---------- pohyb pri posúvaní: nikde nie je pin ani brzdenie, len transformácie viazané na polohu ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .foto{animation:d-von linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
    .riadok-opak .foto{animation-name:d-von-p}
    .foto img,.foto-plna img{scale:1.1;animation:d-para linear both;animation-timeline:view();animation-range:cover}
    .obce-uvod .foto{animation:none}
    .kroky{view-timeline:--kroky block}
    .kroky li:not(:last-child)::after{animation:d-ciara-y linear both;animation-timeline:--kroky}
    .kroky li:nth-child(1)::after{animation-range:entry 55% cover 34%}
    .kroky li:nth-child(2)::after{animation-range:cover 34% cover 48%}
    .kroky li:nth-child(3)::after{animation-range:cover 48% cover 62%}
    @media (min-width:1000px){.kroky li:not(:last-child)::after{animation-name:d-ciara-x}}
  }
}
@keyframes d-von{from{transform:translateX(-8%)}to{transform:none}}
@keyframes d-von-p{from{transform:translateX(8%)}to{transform:none}}
@keyframes d-para{from{translate:0 -4.5%}to{translate:0 4.5%}}
@keyframes d-ciara-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes d-ciara-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- technológie (technologie.html) ---------- */
.rozsah-tech{margin-top:6px}
.rozsah-tech .odkaz,.tech-dalej .odkaz{display:inline-block;padding-block:12px}
.tech-uvod .foto img{object-position:50% 35%}
.tech-skok{margin-top:28px}
.tech-skok ul{display:flex;flex-wrap:wrap;gap:8px}
.tech-skok a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;background:var(--papier);color:var(--navy);font-weight:500;line-height:1.25;text-decoration:none;transition:background-color .18s ease}
.tech-skok a:hover{background:#ebe5d8}
.tech-skupina{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:var(--medzera) var(--okraj) 0}
.tech-hlava > p:not(.pod){margin-top:14px;max-width:34rem}
.tech-foto{position:relative;overflow:hidden;margin-top:24px;aspect-ratio:16/10;border-radius:0 0 clamp(40px,6vw,88px) 0;background:var(--papier)}
.tech-foto picture,.tech-foto img{display:block;width:100%;height:100%}
.tech-foto img{object-fit:cover}
.tech-foto .stitok{bottom:auto;top:12px}
.tech-zoznam{display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(24px,3vw,48px)}
.tech-zoznam li{padding:20px 0 24px;border-top:1px solid rgba(22,36,92,.14)}
.tech-zoznam p{margin-top:8px;max-width:36rem}
.tech-mat{color:var(--navy);font-weight:600}
p.tech-spec{margin-top:8px;color:var(--tehla-t);font-size:.875rem;line-height:1.4}
.tech-skupina{scroll-margin-top:calc(8px - var(--medzera))}
@media (max-width:699px){.tech-skok ul{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--okraj));padding:4px var(--okraj);scroll-padding-inline:var(--okraj);scrollbar-width:none}.tech-skok ul::-webkit-scrollbar{display:none}.tech-skok li{flex:none}}
@media (min-width:700px) and (max-width:1099px){.tech-hlava:has(.tech-foto){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:32px;align-items:start}.tech-hlava:has(.tech-foto) > :not(.tech-foto){grid-column:1}.tech-hlava .tech-foto{grid-column:2;grid-row:1 / -1;margin-top:0}}
.tech-koniec{padding:var(--medzera) var(--okraj);text-align:center}
.tech-koniec h2{max-width:22ch;margin-inline:auto}
.tech-koniec > p{max-width:36rem;margin:14px auto 0}
.tech-koniec .tlacidla{justify-content:center}
.tech-koniec p.tech-dalej{margin-top:10px}
@media (min-width:700px){.tech-zoznam{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){
  .tech-skupina{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(40px,6vw,104px);align-items:start}
  .tech-hlava{position:sticky;top:calc(var(--hlava) + 24px)}
  .tech-zoznam{padding-top:8px}
}
