/* ASFALT Spiš: návrh webu. Farby z loga: čierna, zlatá, biela. */
:root{
  --zaobl:clamp(24px,2.6vw,44px);
  --cierna:#0b0b0b;
  --asfalt:#181818;
  --asfalt2:#202020;
  --zlata:#c99700;
  --biela:#fff;
  --t2:rgba(255,255,255,.8);
  --t3:rgba(255,255,255,.56);
  --hair:rgba(255,255,255,.16);
  --gx:clamp(20px,5vw,72px);
  --nadpis:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --text:"Barlow",system-ui,-apple-system,sans-serif;
  --e:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--cierna);-webkit-text-size-adjust:100%}
body{background:var(--cierna);color:var(--biela);font-family:var(--text);font-weight:500;font-size:17px;line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--zlata);outline-offset:3px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
h1,h2,h3{font-family:var(--nadpis);font-weight:900;text-transform:uppercase;line-height:.94;letter-spacing:.004em}
[hidden]{display:none!important}
.ik{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ik-f{fill:currentColor;stroke:none}

/* výmena textu pri prechode myšou */
.sw{display:inline-block;position:relative;overflow:hidden;vertical-align:top;line-height:1.34}
.sw>span{display:block;transition:transform .38s cubic-bezier(.33,1,.68,1)}
.sw::after{content:attr(data-t);position:absolute;left:0;top:135%;white-space:nowrap;transition:transform .38s cubic-bezier(.33,1,.68,1)}
@media (hover:hover){
  a:hover>.sw>span,button:hover>.sw>span,.sw:hover>span,.o:hover .sw>span,.s:hover .sw>span{transform:translateY(-135%)}
  a:hover>.sw::after,button:hover>.sw::after,.sw:hover::after,.o:hover .sw::after,.s:hover .sw::after{transform:translateY(-135%)}
}

/* tlačidlá */
.btn{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:6px;
  font-family:var(--nadpis);font-weight:800;font-size:20px;letter-spacing:.05em;text-transform:uppercase;color:#fff;white-space:nowrap;
  background:rgba(11,11,11,.5);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.62);transition:transform .3s var(--e),background-color .25s,box-shadow .25s}
.btn.lg{height:58px;padding:0 34px;font-size:24px}
.btn:active{transform:scale(.97)}
.btn.zlate{color:#0b0b0b;background:var(--zlata);box-shadow:none}
@media (hover:hover){
  .btn:hover{background:rgba(11,11,11,.72);box-shadow:inset 0 0 0 1.5px var(--zlata)}
  .btn.zlate:hover{background:#e3af12;box-shadow:none}
}

/* hlavička */
.top{position:fixed;left:0;right:0;top:0;z-index:30;height:0}
.brand{position:absolute;left:var(--gx);top:13px;width:158px;display:block}
.brand img{display:block;width:100%;height:auto}
.nav{position:absolute;left:50%;top:18px;height:46px;translate:-50% 0;display:flex;align-items:center;gap:clamp(24px,2.8vw,44px);
  font-family:var(--nadpis);font-weight:800;font-size:20px;letter-spacing:.05em;text-transform:uppercase}
.nav a{display:block;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6)}
/* centrovanie cez translate, lebo animácia rise prepisuje transform; na úzkom PC menšie písmo, aby menu nezapadlo pod telefón */
@media (max-width:1060px){.nav{gap:20px;font-size:17px}}
.nav .sw::after{color:var(--zlata)}
.vrch{position:absolute;right:var(--gx);top:18px}
.vrch .ik{width:18px;height:18px;margin-right:8px;stroke-width:1.8}
.mbtn{display:none;position:absolute;right:16px;top:14px;width:48px;height:48px;z-index:32}
.mbtn span{position:absolute;left:14px;right:14px;height:2px;background:#fff;border-radius:2px;top:19px;transition:transform .35s var(--e)}
.mbtn span+span{top:27px}
.mbtn[aria-expanded="true"] span{transform:translateY(4px) rotate(45deg)}
.mbtn[aria-expanded="true"] span+span{transform:translateY(-4px) rotate(-45deg)}
body.nazlatej .nav a{color:#0b0b0b;text-shadow:none}
body.nazlatej .nav .sw::after{color:#fff}
body.nazlatej .btn.vrch{background:#0b0b0b;color:#fff}
body.nazlatej .mbtn span{background:#0b0b0b}
.menu{position:fixed;inset:0;z-index:28;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  background:var(--cierna)}
body.menu-otv .mbtn span{background:#fff}
.menu a{font-family:var(--nadpis);font-weight:900;font-size:46px;text-transform:uppercase;line-height:1.16}
.menu .btn{margin-top:22px;height:54px;padding:0 30px;font-size:24px;line-height:1}
.menu .btn .ik{width:20px;height:20px;margin-right:10px;stroke-width:1.8}
.menu .menu-mail{display:flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--text);font-size:17px;font-weight:600;text-transform:none;line-height:1.3;color:var(--t2)}
.menu-mail .ik{width:20px;height:20px;color:var(--zlata)}

/* film */
.film{position:relative;height:1300vh}   /* presnú výšku dá site.js; táto drží Vozový park pod úvodom, kým sa JS načíta */
.plocha{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:var(--cierna)}
.film .plocha{background:var(--cierna) var(--prva) 50% 50%/cover no-repeat}
#film{position:absolute;inset:0;width:100%;height:100%;display:block;visibility:hidden}
.tien{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(0,0,0,.52) 0,rgba(0,0,0,0) 20%),
  linear-gradient(0deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.3) 24%,rgba(0,0,0,0) 44%)}
.kf{position:absolute;left:0;right:0;bottom:0;height:72%;background:linear-gradient(rgba(0,0,0,0),#000 86%);opacity:0;pointer-events:none}
.sc{position:absolute;inset:0;pointer-events:none;visibility:hidden}
.sc.uvod{visibility:visible}
.sc a,.sc button{pointer-events:auto}
.uvod{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0 var(--gx) 92px}
/* nadpis v troch riadkoch vľavo od kamióna: ten je pri širokom okne od 42 % šírky, pri užšom okne sa posúva doľava (50 % - 14,2 % výšky/šírky) */
/* --h1 je rovnaké aj v kostre v index.html */
.film{--h1:clamp(46px,min(6.1vw,calc(8.2vw - 2.55vh - 12px),calc((100vh - 380px) / 2.7)),170px)}
.uvod h1{font-size:var(--h1);line-height:.9;white-space:nowrap;filter:drop-shadow(0 4px 24px rgba(0,0,0,.45))}
.uvod .hm{display:block;overflow:hidden;vertical-align:top;padding:.08em .03em .03em;margin:-.08em -.03em -.03em}
.uvod .hr{display:inline-block}
.uvod h1 .z{color:var(--zlata)}
.hl{display:block;width:72px;height:4px;margin-top:18px;border-top:1px solid var(--zlata);border-bottom:1px solid var(--zlata);transform-origin:0 50%}
.uvod br.m{display:none}
.uvod p{margin-top:12px;text-wrap:balance;font-size:clamp(17px,1.5vw,22px);font-weight:600;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.rad{display:flex;gap:12px;margin-top:24px}
.st{position:absolute;left:var(--gx);bottom:92px}
.st .t{position:relative;display:inline-block;white-space:nowrap;font-size:clamp(60px,min(8.4vw,15vh),150px);text-shadow:0 6px 36px rgba(0,0,0,.45)}
.st .t i{position:absolute;left:-.06em;right:-.06em;top:-.22em;bottom:.02em;background:var(--zlata);transform:scaleX(0);transform-origin:0 50%}
.st p::before{content:"";display:block;width:56px;height:4px;margin:2px 0 12px;border-top:1px solid var(--zlata);border-bottom:1px solid var(--zlata)}
.vpravo .st p::before,.hore .st p::before{margin-left:auto}
.st p{text-wrap:balance;margin-top:12px;max-width:44ch;font-size:clamp(17px,1.35vw,20px);font-weight:600;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.vpravo .st{left:auto;right:var(--gx);text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.vpravo .panel{right:auto!important;left:var(--gx)}
.hore .st{left:auto;right:var(--gx);top:clamp(96px,14vh,130px);bottom:auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.hore .st p{max-width:24ch}
@media (min-aspect-ratio:9/5) and (min-width:821px){.hore .st .t{font-size:clamp(56px,4.8vw,92px)}}
.panel{padding:12px 20px 14px;border-radius:18px;background:rgba(11,11,11,.8);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.2),0 20px 44px -22px rgba(0,0,0,.7)}
.sc .panel{position:absolute;right:var(--gx);top:92px;width:330px}
.r{display:flex;justify-content:space-between;gap:18px;padding:9px 0;font-size:16px;font-weight:600}
.r+.r{border-top:1px solid var(--hair)}
.r b{font-weight:700;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
#miery{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#miery line{stroke:var(--zlata);stroke-width:2;opacity:0}
.miera{position:absolute;left:0;top:0;font-weight:700;font-size:15px;color:#fff;background:rgba(11,17,24,.84);padding:2px 8px;border-radius:6px;opacity:0;white-space:nowrap;pointer-events:none}

/* koľaj postupu: dvojitá zlatá čiara z loga */
.kolaj{position:absolute;left:var(--gx);right:var(--gx);bottom:max(20px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:18px}
.kolaj a{font-size:14px;font-weight:600;color:var(--t3);padding-top:12px;transition:color .3s,opacity .2s ease}
.kolaj a.on{color:#fff}
.ciara{position:absolute;left:0;right:0;top:0;height:4px;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}
.ciara i{position:absolute;left:0;right:0;top:-1px;bottom:-1px;border-top:1px solid var(--zlata);border-bottom:1px solid var(--zlata);transform:scaleX(0);transform-origin:0 50%}

/* vozový park */
.park{position:relative;height:320vh;background:#000}
/* Vozový park sa vysunie cez koniec filmu ako ďalšia vrstva, bez čiernej medzery */
.rad-strojov{z-index:2;margin-top:-40vh;margin-top:-40lvh;border-radius:var(--zaobl) var(--zaobl) 0 0;box-shadow:0 -30px 60px -30px rgba(0,0,0,.7)}
.rad-strojov .plocha{border-radius:inherit}
.park .plocha{background:#000}
#orbit{position:absolute;inset:0;width:100%;height:100%;display:block}
.ph{position:absolute;left:var(--gx);bottom:40px;max-width:min(560px,46vw)}
.ph h1,.ph h2{font-size:clamp(56px,min(7vw,13vh),120px)}
.park.bez{height:100vh;height:100lvh}
.cen-rad{margin-top:clamp(20px,4vh,36px)}
.cen-tel{background:#0b0b0b;box-shadow:none}
.cen-vse{color:#0b0b0b;background:none;box-shadow:inset 0 0 0 1.5px #0b0b0b}
.udaje{display:none}
.dalsi-s{display:flex;justify-content:space-between;align-items:center;gap:24px;background:#000;padding:clamp(28px,5vh,56px) var(--gx);border-top:1px solid var(--hair)}
.dalsi-s span{display:block;font-size:17px;font-weight:600;color:var(--t2)}
.dalsi-s b{display:block;font-family:var(--nadpis);font-weight:900;font-size:clamp(34px,4.4vw,76px);line-height:1;text-transform:uppercase}
.ph p{margin-top:12px;max-width:42ch;font-size:clamp(17px,1.35vw,20px);font-weight:600;color:var(--t2)}
.ph .pren{margin-top:14px;max-width:none;font-family:var(--nadpis);font-weight:800;font-size:clamp(30px,min(3vw,5.4vh),52px);line-height:1.04;text-transform:uppercase;letter-spacing:.01em;color:#fff}
.ph .pren b{font-weight:900;color:var(--zlata);white-space:nowrap}
.ph .rad{margin-top:16px}
#rad{position:absolute;inset:0;width:100%;height:100%;display:block}
.ph.dr-uvod{left:var(--gx);right:var(--gx);top:clamp(84px,12vh,120px);bottom:auto;max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap}
.ph.dr-uvod h2{font-size:clamp(56px,min(6.4vw,14vh),120px)}
.ph.dr-uvod .pren{margin:0;flex:1 1 auto;text-align:right}
.ph.dr-uvod .rad{margin:0}
.dr-ciara{position:absolute;left:var(--gx);right:var(--gx);bottom:clamp(20px,3.4vh,34px)}
.dr-ciara .ciara i{transform:scaleX(0)}
.pp{position:absolute;right:var(--gx);bottom:40px;width:330px}
.pp h3{font-size:30px;padding-top:8px;margin-bottom:6px}
.pp .btn{width:100%;margin-top:10px}

.stroje{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.1vw,18px);background:#000;padding:clamp(36px,6vh,72px) var(--gx) clamp(60px,10vh,120px)}
.kst{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:8px;background:#000;box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .15s}
.kst canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.st-z{position:absolute;left:14px;top:14px;padding:4px 11px 5px;border-radius:5px;background:var(--zlata);color:#0b0b0b;font-family:var(--nadpis);font-weight:800;font-size:18px;letter-spacing:.05em;text-transform:uppercase}
.st-t{position:absolute;left:0;right:0;bottom:0;padding:60px 18px 16px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.88) 60%)}
.st-t strong{display:block;font-family:var(--nadpis);font-weight:800;font-size:clamp(26px,2.1vw,40px);line-height:1;text-transform:uppercase}
.st-i{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.2,.9,.25,1)}   /* údaje vyskočia hneď pri myši */
.st-i>span{overflow:hidden;min-height:0}
.st-r span{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-top:1px solid var(--hair);font-size:16px}
.st-r span:first-child{margin-top:10px}
.st-r i{font-style:normal;color:var(--t2)}
.st-r b{font-weight:700}
.st-i em{display:block;padding-top:8px;font-style:normal;font-weight:700;font-size:16px;color:var(--zlata)}
@media (hover:hover){.kst:hover{box-shadow:inset 0 0 0 1.5px var(--zlata)}.kst:hover .st-i{grid-template-rows:1fr}}
.kst:focus-visible .st-i{grid-template-rows:1fr}
@media (max-width:1100px){.stroje{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* veľké nadpisy sekcií */
.vel{font-size:clamp(84px,min(17vw,30vh),300px);line-height:.86}

/* služby */
.sluzby{position:relative;background:var(--asfalt);padding:clamp(70px,12vh,130px) var(--gx)}
.zoz{position:relative;margin-top:clamp(28px,5vh,56px)}
.pruh{position:absolute;left:calc(var(--gx)*-1);right:calc(var(--gx)*-1);top:0;height:0;background:var(--zlata);opacity:0;pointer-events:none}
.zr{position:relative;display:grid;grid-template-columns:auto minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:center;width:100%;padding:16px 0;border-top:1px solid var(--hair)}
.zr:last-of-type{border-bottom:1px solid var(--hair)}
.zr b{font-family:var(--nadpis);font-weight:800;font-size:clamp(30px,3.8vw,58px);text-transform:uppercase;line-height:1.04;transition:color .3s}
.zr .zr-p{font-size:16px;line-height:1.4;color:var(--t2);transition:color .3s}
.zr .ik{width:clamp(30px,2.6vw,44px);height:clamp(30px,2.6vw,44px);color:var(--zlata);stroke-width:1.3;transition:color .3s}
.zr.on b,.zr.on .zr-p,.zr.on .ik{color:#0b0b0b}
.nahlad{position:fixed;left:0;top:0;width:300px;height:356px;z-index:20;pointer-events:none;will-change:transform}
.nahlad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(50%);visibility:hidden;filter:saturate(.92) contrast(1.04)}

/* cenník */
.cennik{background:var(--zlata);color:#0b0b0b;padding:clamp(70px,12vh,130px) var(--gx)}
.tab{margin-top:clamp(28px,5vh,56px)}
.tab3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:28px clamp(28px,3.4vw,64px)}
.sk h3{font-size:clamp(22px,1.7vw,30px);letter-spacing:.03em;padding-bottom:10px;border-bottom:2px solid #0b0b0b}
.p{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(11,11,11,.22);font-weight:700;font-size:clamp(17px,1.25vw,22px)}
.tab:not(.tab3) .p:first-child{border-top:1px solid rgba(11,11,11,.22)}
.p .ik{width:24px;height:24px;stroke-width:1.6}
.p span{flex:1;min-width:0}
.p b{font-weight:800;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.pozn{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:15px;font-weight:600}
.pozn .ik{width:22px;height:22px}

/* kontakt */
/* časté otázky: riadky ako pri službách, po kliknutí sa rozbalí odpoveď */
.otazky{background:var(--asfalt);padding:clamp(70px,12vh,130px) var(--gx)}
.ot-pod{margin-top:14px;font-size:clamp(17px,1.4vw,21px);font-weight:600;color:var(--t2)}
.ot{margin-top:clamp(28px,5vh,56px);border-bottom:1px solid var(--hair)}
.ot-i{border-top:1px solid var(--hair)}
.ot-i summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;cursor:pointer;list-style:none}
.ot-i summary::-webkit-details-marker{display:none}
.ot-i h3{font-family:var(--nadpis);font-weight:800;font-size:clamp(26px,3vw,48px);line-height:1.06;letter-spacing:0;transition:color .2s}
.ot-i summary i{flex:none;position:relative;width:24px;height:24px}
.ot-i summary i::before,.ot-i summary i::after{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:var(--zlata);transition:transform .3s var(--e)}
.ot-i summary i::after{transform:rotate(90deg)}
.ot-i[open] summary i::after{transform:rotate(0)}
.ot-i p{max-width:78ch;padding:0 0 24px;font-size:17px;line-height:1.55;color:var(--t2)}
@media (hover:hover){.ot-i summary:hover h3{color:var(--zlata)}}
.kontakt{background:var(--cierna);padding:clamp(70px,12vh,130px) var(--gx) clamp(50px,8vh,90px)}
.kon-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,4vh,40px)}
.ludia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(28px,5vh,52px)}
.o{display:flex;flex-direction:column;gap:4px;padding:20px 22px;border-radius:12px;background:var(--asfalt);box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .3s}
.o b{display:block;font-family:var(--nadpis);font-weight:800;font-size:clamp(24px,2vw,36px);text-transform:uppercase;line-height:1.04;color:#fff}
.o>span{font-size:14px;color:var(--t3);line-height:1.3}
.o em{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;font-style:normal;font-family:var(--nadpis);font-weight:800;font-size:clamp(22px,1.8vw,30px);color:var(--zlata);white-space:nowrap;font-variant-numeric:tabular-nums}
.o em i{font-style:normal}
.o em .ik{width:20px;height:20px;stroke-width:1.7}
@media (hover:hover){.o:hover{box-shadow:inset 0 0 0 1.5px var(--zlata)}}
.dole{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:clamp(32px,5vh,56px)}
.kk{display:flex;gap:14px}
.kk>.ik{width:28px;height:28px;color:var(--zlata);margin-top:2px}
.dole h3{font-size:22px;margin-bottom:6px;color:#fff}
.dole p{font-size:16px;line-height:1.42;color:var(--t2)}
.kariera-k{display:flex;align-items:center;gap:20px;margin-top:clamp(28px,5vh,48px);padding:22px 26px;border-radius:14px;
  background:linear-gradient(90deg,rgba(201,151,0,.14),rgba(201,151,0,.02));box-shadow:inset 0 0 0 1.5px var(--zlata)}
.kar-ik{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:14px;background:rgba(201,151,0,.1);box-shadow:inset 0 0 0 1px rgba(201,151,0,.38);color:var(--zlata)}
.kar-ik .ik{width:36px;height:36px;stroke-width:1.5}
.kariera-k>div{flex:1}
.kariera-k h3{font-size:clamp(24px,2vw,32px)}
.kariera-k p{margin-top:4px;font-size:16px;color:var(--t2);text-wrap:balance}
.link{display:inline-block;margin-top:6px;font-weight:700;color:#fff}
.dole p .link{margin-top:0}

/* horný rad päty zrkadlí spodný pás: Adresy vľavo nad logom, Na prenájom vpravo nad údajmi firmy (odkazy sú v menu) */
.pata{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px clamp(28px,4vw,80px);padding:clamp(44px,7vh,80px) var(--gx) 0;
  background:var(--cierna);border-top:1px solid var(--hair);font-size:16px;line-height:1.5;color:var(--t2)}
.pata h3{font-size:20px;letter-spacing:.04em;color:var(--zlata);margin-bottom:12px}
/* na PC sú obe adresy vedľa seba, nech horný rad nie je v strede prázdny */
.pata-k{justify-self:start;display:grid;grid-template-columns:repeat(2,auto);gap:10px clamp(36px,4.5vw,80px);align-content:start}
.pata-k h3{grid-column:1/-1}
.pata-p{justify-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pata-p a{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;line-height:1.4;transition:color .25s}
.pata-p a:hover{color:var(--zlata)}
.pata-p .ik{width:20px;height:20px;color:var(--zlata)}
.pata-p .pata-c{color:var(--zlata);font-weight:700}
.pata-p .pata-c:hover{color:#fff}
.pata-k p{display:flex;align-items:flex-start;gap:10px;line-height:1.4}
.pata-k .ik{width:20px;height:20px;color:var(--zlata);margin-top:2px}
/* spodný pás: logo vľavo, siete v strede, profiq vpravo (odkaz na WhatsApp), pod tým firemné údaje na celú šírku */
.pata-spodok{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"logo soc prof" "firma firma firma";align-items:center;gap:18px 16px;
  padding:22px 0 calc(22px + env(safe-area-inset-bottom));border-top:1px solid var(--hair)}
.pata-logo{grid-area:logo;justify-self:start;display:block}
.pata-logo img{width:clamp(130px,10vw,190px);height:auto;display:block}
.soc{grid-area:soc;justify-self:center;display:flex;gap:10px}
.pata-profiq{grid-area:prof;justify-self:end;display:block;padding:10px 0 10px 14px;color:var(--t3);transition:color .25s}
.pata-profiq svg{display:block;height:20px;width:55.4px;fill:currentColor}
@media (hover:hover){.pata-profiq:hover{color:#fff}}
.soc a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair);color:#fff;transition:color .25s,box-shadow .25s}
.soc .ik{width:18px;height:18px}
@media (hover:hover){.soc a:hover{color:var(--zlata);box-shadow:inset 0 0 0 1px var(--zlata)}}
.pata-firma{grid-area:firma;justify-self:center;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;text-align:center;font-size:13px;line-height:1.45;color:var(--t3)}
.pata-firma a{text-decoration:underline;text-underline-offset:2px}.pata-firma a:hover{color:var(--zlata)}
.pata-firma i{font-style:normal}

/* sekcie sa prekrývajú ako vrstvy so zaoblením, nie tvrdým strihom */
.sluzby,.cennik,.otazky,.kontakt{z-index:1;border-radius:var(--zaobl) var(--zaobl) 0 0;margin-top:calc(var(--zaobl) * -1);box-shadow:0 -30px 60px -30px rgba(0,0,0,.65)}
.cennik,.otazky,.kontakt{position:relative}


/* kostra prvej obrazovky: vzhľad je priamo v index.html, aby išla hneď s HTML. Tu je len odkrývanie skutočného obsahu. */
/* skutočný obsah sa ukáže až s písmom, aby neposkočil (písmo má font-display:swap) */
html.kostra .uvod h1,html.kostra .uvod .hl,html.kostra .uvod-dole{opacity:0;transition:opacity .2s ease}
html.kostra .kolaj a{opacity:0}
html.k-pismo .uvod h1,html.k-pismo .uvod .hl,html.k-pismo .uvod-dole,html.k-pismo .kolaj a{opacity:1}
html.kostra:not(.k-hlava) .top{opacity:0}
/* intro s rolkou ostáva, len nezačne strihom: za 0,3 s prekryje kostru (namiesto čiernej obrazovky pred ním) */
html.kostra body.intro::before{display:none}
html.kostra body.intro:not(.intro-gl) #intro{opacity:0}

/* otvorenie stránky */
#intro{position:fixed;inset:0;z-index:50;background:none;transition:opacity .3s ease;cursor:pointer}
body.intro::before{content:"";position:fixed;inset:0;z-index:49;background:#0b0b0b;pointer-events:none}
body.intro-gl::before{display:none}
#intro canvas{position:absolute;inset:0;width:100%;height:100%}
#intro.out{opacity:0;pointer-events:none}
body.intro .top{opacity:0}
body.ready .nav,body.ready .vrch,body.ready .mbtn{animation:rise .9s var(--e) both}
@keyframes rise{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* mobil */
@media (max-width:820px){
  .brand{left:16px;top:11px;width:124px}
  .nav,.vrch{display:none}
  .mbtn{display:block}
  .uvod h1{filter:drop-shadow(0 3px 14px rgba(0,0,0,.45))}
  .tien{background:
    linear-gradient(180deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.34) 26%,rgba(0,0,0,0) 44%),
    linear-gradient(0deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 30%)}
  .uvod{justify-content:flex-start;align-items:center;text-align:center;padding:calc(70px + 2vh) 16px 0}
  .film{--h1:clamp(44px,14vw,80px)}
  .uvod h1{white-space:normal;line-height:.9}
  .uvod h1 .hm{display:block}
  .hl{margin:16px auto 0;transform-origin:50% 50%}
  .uvod p{margin-top:12px;font-size:16px;line-height:1.45;max-width:30ch;color:rgba(255,255,255,.9)}
  .uvod br.m{display:inline}
  .rad{flex-direction:column;width:100%;max-width:340px;gap:10px;margin-top:20px}
  .rad .btn{width:100%}
  /* nadpis hore, kamión v strede voľný, podnadpis s tlačidlami dole nad cestou */
  .uvod-dole{position:absolute;z-index:0;left:16px;right:16px;bottom:calc(34px + 100lvh - 100svh);display:flex;flex-direction:column;align-items:center}
  .uvod-dole::before{content:"";position:absolute;z-index:-1;left:-16px;right:-16px;top:-90px;bottom:calc(-34px - 100lvh + 100svh);background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,.36) 55%,rgba(0,0,0,0));pointer-events:none}
  .uvod .uvod-dole p{margin:0 0 16px}
  .uvod .rad{flex-direction:row;max-width:none;width:100%;margin:0}
  .uvod .rad>*{flex:1;min-width:0}
  .st,.hore .st,.vpravo .st{left:16px;right:16px;top:calc(76px + 2vh);bottom:auto;text-align:center;display:block}
  .vpravo .panel{left:16px!important;right:16px!important}
  .st .t{font-size:clamp(46px,14.6vw,84px);white-space:normal}
  .st .t{text-shadow:0 3px 18px rgba(0,0,0,.45)}
  .st .rad{flex-direction:row;justify-content:center;width:auto;max-width:none;gap:10px;margin:16px auto 0}
  .st .rad .btn{width:auto;height:50px;padding:0 24px;font-size:21px}
  .st p,.hore .st p{margin:10px auto 0;font-size:16px;line-height:1.45;max-width:30ch;color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.7)}
  .st p::before,.vpravo .st p::before,.hore .st p::before{margin:0 auto 10px}
  .spodok .st{top:auto;bottom:calc(112px + 100lvh - 100svh)}
  .spodok::before{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(transparent,rgba(0,0,0,.74))}
  .sc .panel{left:16px;right:16px;top:auto;bottom:calc(30px + 100lvh - 100svh);width:auto}
  .kolaj{bottom:calc(14px + 100lvh - 100svh)}
  .kolaj a{display:none}
  .ph{left:16px;right:16px;top:calc(76px + 2vh);bottom:auto;max-width:none;text-align:center}
  .ph h1,.ph h2{font-size:clamp(46px,13vw,80px)}
  .dalsi-s{flex-direction:column;text-align:center;align-items:center}
  .ph p{margin:8px auto 0;font-size:17px;max-width:32ch}
  @media (max-height:700px){.ph p:not(.pren){display:none}}
  .ph .pren{font-size:clamp(28px,8.4vw,44px);max-width:none}
  .ph .rad{margin:14px auto 0}
  .ph.dr-uvod{left:16px;right:16px;top:calc(76px + 2vh);display:block}
  .ph.dr-uvod .pren{text-align:center;margin-top:10px}
  .ph.dr-uvod .rad{flex-direction:row;justify-content:center;margin:14px auto 0;width:auto;max-width:none}
  .ph.dr-uvod .btn{width:auto;height:50px;padding:0 22px;font-size:21px}
  .pp{display:none}
  .udaje{display:block;background:#000;padding:8px 16px 26px}
  .udaje .r{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--hair)}
  .dr-ciara{left:16px;right:16px;bottom:calc(18px + 100lvh - 100svh)}
  .pp{left:16px;right:16px;bottom:calc(16px + 100lvh - 100svh);width:auto}
  .stroje{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;padding:20px 12px 52px}
  .kst{aspect-ratio:auto;overflow:visible;border-radius:0;background:none;box-shadow:none}
  .kst canvas{position:relative;inset:auto;height:auto;aspect-ratio:16/10;border-radius:8px;background:#000;outline:1px solid var(--hair);outline-offset:-1px}
  .st-t{position:static;padding:8px 2px 0;background:none}
  .st-t strong{font-size:18px;line-height:1.02}
  .st-r{display:none}
  .st-i{grid-template-rows:1fr}
  .st-i em{padding-top:3px;font-size:13px}
  .st-z{left:6px;top:6px;padding:2px 7px 3px;font-size:12px;border-radius:4px}
  .zr{grid-template-columns:auto minmax(0,1fr) auto;gap:0 14px;padding:12px 0;text-align:left;align-items:center}
  .zr::after{content:"";width:14px;height:14px;background:linear-gradient(var(--zlata),var(--zlata)) 50%/14px 1.5px no-repeat,linear-gradient(var(--zlata),var(--zlata)) 50%/1.5px 14px no-repeat;transition:transform .3s var(--e)}
  .zr:not(:has(.zr-p))::after{visibility:hidden}
  .zr.otv::after{transform:rotate(45deg)}
  .zr .ik{width:44px;height:44px;padding:10px;border-radius:10px;background:rgba(201,151,0,.08);box-shadow:inset 0 0 0 1px rgba(201,151,0,.32);stroke-width:1.5}
  .zr b{font-size:21px;line-height:1.08}
  .zr::after{grid-column:3;grid-row:1}
  .zr .zr-p{grid-column:2/4;grid-row:2;display:block;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--e),opacity .3s,margin .4s var(--e)}
  .zr.otv .zr-p{max-height:140px;opacity:1;margin-top:6px}
  .zr img{grid-column:1/-1;grid-row:3;display:block;width:100%;aspect-ratio:3/2;object-fit:cover;margin-top:10px;border-radius:12px}
  .vel{text-align:center;font-size:clamp(84px,27vw,170px)}
  .ot-pod{text-align:center;font-size:16px}
  .ot-i summary{gap:14px;padding:14px 0}
  .ot-i h3{font-size:21px;line-height:1.1}
  .ot-i summary i{width:20px;height:20px}.ot-i summary i::before,.ot-i summary i::after{top:9px}
  .ot-i p{font-size:15.5px;padding-bottom:16px}
  .rm{margin-inline:auto}
  .tab3{gap:26px}
  .sk h3{font-size:22px}
  .p{font-size:16px;padding:12px 0;gap:10px}
  .p .ik{width:22px;height:22px}
  .p b{white-space:normal;max-width:46%}
  .kon-cta{flex-wrap:nowrap}
  .kon-cta .btn{flex:1;width:auto;height:52px;padding:0 10px;font-size:21px}
  .ludia{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .o{padding:14px 14px 13px;border-radius:10px}
  .o b{font-size:20px}
  .o>span{font-size:12.5px}
  .o em{font-size:18px;gap:6px;padding-top:10px}
  .o em .ik{width:16px;height:16px}
  .dole{grid-template-columns:1fr;gap:18px}
  .kk>.ik{width:24px;height:24px}
  .kariera-k{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ik nad" "txt txt" "btn btn";align-items:center;gap:14px 14px;padding:18px}
  .kariera-k>div{display:contents}
  .kar-ik{grid-area:ik;width:48px;height:48px;border-radius:12px}
  .kar-ik .ik{width:28px;height:28px}
  .kariera-k h3{grid-area:nad;font-size:30px}
  .kariera-k p{grid-area:txt;margin-top:0}
  .kariera-k .btn{grid-area:btn;width:100%;height:50px;font-size:21px}
  /* päta na mobile (Max vybral spodok návrhu D): Adresy a Na prenájom v dvoch rovnakých stĺpcoch, dole logo, siete a údaje na celú šírku */
  .pata{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;padding:28px 16px 0;font-size:14px}
  .pata h3{font-size:17px;margin-bottom:8px}
  .pata-k{grid-column:1;grid-row:1;justify-self:stretch;display:flex;flex-direction:column;gap:8px}
  .pata-p{grid-column:2;grid-row:1;justify-self:stretch;gap:7px}
  .pata-p .ik{width:16px;height:16px}
  .pata-p a{align-items:flex-start;line-height:1.35}.pata-p a .ik{margin-top:1px}
  .pata-k p{gap:7px}
  .pata-k .ik{width:16px;height:16px;margin-top:1px}
  .pata-spodok{margin-top:24px;gap:12px 10px;padding-top:18px}
  .pata-logo{grid-area:logo}
  .pata-firma{justify-self:stretch;gap:2px 12px}
  .pata-profiq{padding:10px 0 10px 10px}
  .pata-profiq svg{height:16px;width:44.3px}
  .pata-logo img{width:84px}
  .soc{gap:4px}
  .soc a{width:32px;height:32px}
  .soc .ik{width:15px;height:15px}
  .pata-firma{font-size:10.5px;line-height:1.45}
  .pata-firma .cr{display:none}
}
@media (prefers-reduced-motion:reduce){
  body.ready .nav,body.ready .vrch,body.ready .mbtn{animation:none}
  .btn,.sw>span,.sw::after{transition:none}
}

/* iPhone: Safari vyplní hornú lištu a spodný panel farbou pevného prvku pri okraji. Menu je pod týmito pásmi (28 < 29), lebo prvok cez celú obrazovku Safari ignoruje a nechá starú farbu. */
.iosp{display:none}
@supports (-webkit-touch-callout:none){
  @media (max-width:820px){
    .iosp{display:block;position:fixed;left:0;right:0;height:166px;z-index:29;background:var(--cierna)}
    .iosp.h{top:-130px;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
    .iosp.d{bottom:-130px;-webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}
    body.za-filmom .iosp{background:#000!important}
    body.nazlatej .iosp{background:var(--zlata)!important}
    body.menu-otv .iosp.h,body.menu-otv .iosp.d{background:var(--cierna)!important}
    html.kostra .iosp.h{background:#102236}html.kostra .iosp.d{background:#222838}
  }
}

/* stránka 404 */
.chyba{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px var(--gx) 80px;background:var(--cierna)}
.chyba-c{font-family:var(--nadpis);font-weight:900;font-size:clamp(120px,22vw,320px);line-height:.8;color:var(--zlata)}
.chyba h1{margin-top:18px;font-size:clamp(40px,6vw,96px);line-height:.95}
.chyba>p:not(.chyba-c){max-width:46ch;margin-top:16px;font-size:clamp(17px,1.5vw,21px);color:var(--t2)}
.chyba .rad{margin-top:28px}
@media (max-width:820px){.chyba{text-align:center;align-items:center}.chyba .rad{flex-direction:row;width:100%;max-width:none}.chyba .rad .btn{flex:1;width:auto;padding:0 10px;font-size:21px}}

/* právne stránky: ochrana osobných údajov */
.pravne{max-width:820px;padding:140px var(--gx) 90px;margin:0 auto;background:var(--cierna)}
.pravne h1{font-size:clamp(44px,6vw,88px);line-height:.95}
.pravne .pr-uv{margin-top:16px;font-size:clamp(17px,1.4vw,20px);color:var(--t2)}
.pravne h2{margin-top:40px;font-size:clamp(26px,2.6vw,36px);color:var(--zlata)}
.pravne p{margin-top:12px;font-size:17px;line-height:1.6;color:var(--t2)}
.pravne b{color:#fff}
@media (max-width:820px){.pravne{padding-top:110px}.pravne p{font-size:15.5px}}