/* Hlavička. Telefon a tablet: plovoucí kapsle s V a tlačítkem, menu se z ní rozbalí do karty.
   Počítač: lišta v hero na šířku obsahu, po odrolování stejná kapsle a karta jako na telefonu. */
:root{--hl-ink:#161817;--hl-mint:#14cf93;--hl-grey:#5a615e;--hl-line:rgba(22,24,23,.09);--hl-ease:cubic-bezier(.16,1,.3,1);--hl-h:56px;--hl-kapsle:84px}
@media (min-width:992px){:root{--hl-h:80px}}
@media (max-width:991.98px){main.pt-80{padding-top:var(--hl-h)!important}}

/* ikony služeb */
.ik{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.services-boxs .item-box .icon .ik{width:32px;height:32px;color:var(--hl-ink)}
.hl-ik{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:rgba(20,207,147,.14);color:var(--hl-ink);transition:background .16s}
.hl-ik .ik{width:20px;height:20px}

/* lišta */
.hl{position:absolute;z-index:60;top:0;left:0;right:0;display:none;height:var(--hl-h);color:var(--hl-ink);font:500 14.5px/1 Geist,ui-sans-serif,system-ui,sans-serif}
.hl-dark{color:#fff}
.hl-in{display:flex;align-items:center;gap:32px;height:100%}
.hl a,.hl-kapsle a,.hl-menu a{color:inherit;text-decoration:none}
.hl-logo{display:flex;align-items:center;flex:none;width:100px}
.hl-logo svg{display:block;width:100%;height:auto;fill:currentColor}
.hl-nav{margin-left:clamp(12px,3vw,48px)}
.hl-nav ul{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px);margin:0;padding:0;list-style:none}
.hl-nav li{position:relative}
.hl-nav a{position:relative;display:flex;align-items:center;gap:6px;height:44px;white-space:nowrap}
.hl-nav>ul>li>a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--hl-mint);transform:scaleX(0);transform-origin:0 50%;transition:transform .24s var(--hl-ease)}
.hl-nav>ul>li:hover>a::after,.hl-nav>ul>li>a:focus-visible::after{transform:scaleX(1)}
.hl-nav .ch{width:7px;height:7px;margin-top:-3px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.hl-dd{position:absolute;top:100%;left:-18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;width:540px;padding:8px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--hl-line),0 26px 50px -24px rgba(14,32,24,.4);color:var(--hl-ink);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .14s,transform .18s var(--hl-ease),visibility .14s}
.hl-nav li:hover>.hl-dd,.hl-nav li:focus-within>.hl-dd{opacity:1;visibility:visible;transform:none}
.hl .hl-dd a{gap:12px;height:auto;padding:7px 10px;border-radius:10px;line-height:1.25;white-space:normal}
.hl .hl-dd a:hover{background:#f2f6f4}
.hl .hl-dd a:hover .hl-ik{background:rgba(20,207,147,.26)}
.hl-info{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);margin-left:auto}
.hl-info a{white-space:nowrap}
.hl-info a:hover{color:var(--hl-mint-ink,#0a845d)}
.hl-dark .hl-info a:hover{color:var(--hl-mint)}
.hl-cap{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hl-cap b{font-weight:600}
.hl-cap .kr{display:none}
.hl-dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--hl-mint)}
.hl-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:var(--hl-mint);opacity:.45;animation:hlPulse 1.8s ease-out infinite}
@keyframes hlPulse{0%{transform:scale(.45);opacity:.5}70%,100%{transform:scale(1.15);opacity:0}}

/* logo: mátové rameno V vyletí doprava a za sebou odkryje IZE. Každý díl je samostatné svg a jede jen transformem,
   pohyb tak počítá grafická karta a stránka se nepřekresluje. Šikmé okno jede s ramenem a .hl-lg-proti jeho posun ruší,
   písmena proto stojí a odkrývá je jen hrana okna. Přehrávání je v hlavicka.js */
.hl-lg{position:relative;display:block;width:100%;aspect-ratio:762.01/246.49;overflow:hidden;--ven:.72s cubic-bezier(.4,.1,.25,1);--dovnitr:.5s cubic-bezier(.6,0,.2,1)}
.hl-lg svg,.hl-lg-okno,.hl-lg-proti{position:absolute;inset:0;width:100%;height:100%}
.hl-lg svg{fill:currentColor}
.hl-lg .hl-lg-rameno{fill:var(--hl-mint)}
.hl-lg-rameno,.hl-lg-okno{transform:translateX(144.35%);transition:transform var(--ven)}
.hl-lg-okno{clip-path:polygon(-200% 0,26.25% 0,11.55% 100%,-200% 100%)}
.hl-lg-proti{transform:translateX(-144.35%);transition:transform var(--ven)}
.hl-lg-ize{transition:transform .86s var(--hl-ease)}
.hl-lg.je-v .hl-lg-rameno,.hl-lg.je-v .hl-lg-okno,.hl-lg.je-v .hl-lg-proti{transform:none;transition:transform var(--dovnitr)}
.hl-lg.je-v .hl-lg-ize{transform:translateX(-3.94%);transition:transform var(--dovnitr)}
/* v kapsli je V vidět pořád, mátová z něj proto po dosednutí zmizí */
.hl-mark .hl-lg.je-v .hl-lg-rameno{opacity:0;transition:transform var(--dovnitr),opacity .5s linear .8s}

/* kapsle */
.hl-kapsle{position:fixed;z-index:9996;top:8px;right:8px;display:flex;align-items:center;width:var(--hl-kapsle);height:44px;border-radius:22px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 0 0 1px var(--hl-line),0 12px 24px -14px rgba(14,32,24,.4);color:var(--hl-ink);--hl-w:.34s cubic-bezier(.6,0,.2,1);transition:width var(--hl-w);-webkit-tap-highlight-color:transparent}
.hl-kapsle.hl-cele{width:125px;--hl-w:.5s var(--hl-ease)}
.hl-kapsle.hl-cele~.hl-menu{--hl-kapsle:125px}
.hl-mark{display:flex;align-items:center;flex:1;min-width:0;height:44px;padding-left:13.5px;overflow:hidden}
.hl-mark .hl-lg{flex:none;width:57.5px}
html.hl-open .hl-kapsle{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
html.hl-open .hl-mark{visibility:hidden}
.hl-btn{position:relative;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hl-btn i{position:absolute;left:50%;top:50%;width:20px;height:2px;margin:-1px 0 0 -10px;border-radius:2px;background:currentColor;transition:transform .24s var(--hl-ease)}
.hl-btn i:first-child{transform:translateY(-4px)}
.hl-btn i:last-child{transform:translateY(4px)}
html.hl-open .hl-btn i:first-child{transform:rotate(45deg)}
html.hl-open .hl-btn i:last-child{transform:rotate(-45deg)}
.hl :focus-visible,.hl-kapsle :focus-visible,.hl-menu :focus-visible{outline:2px solid var(--hl-mint);outline-offset:2px;border-radius:8px}
.hl-btn:focus-visible{border-radius:50%}
html.hl-open .progress-wrap{opacity:0!important;visibility:hidden!important}

/* karta menu */
.hl-scrim{position:fixed;z-index:9980;inset:0;background:rgba(14,18,16,.36);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;-webkit-tap-highlight-color:transparent}
html.hl-open .hl-scrim{opacity:1;visibility:visible}
.hl-menu{position:fixed;z-index:9990;top:8px;left:8px;right:8px;display:flex;flex-direction:column;max-height:calc(100vh - 16px);padding-top:48px;overflow:auto;overscroll-behavior:contain;border-radius:24px;background:#fff;color:var(--hl-ink);font:400 15px/1.4 Geist,ui-sans-serif,system-ui,sans-serif;visibility:hidden;clip-path:inset(0 0 calc(100% - 44px) calc(100% - var(--hl-kapsle)) round 22px);transition:clip-path .18s cubic-bezier(.4,0,1,1),visibility 0s .18s;-webkit-tap-highlight-color:transparent}
html.hl-open .hl-menu{visibility:visible;clip-path:inset(0 0 0 0 round 24px);transition:clip-path .34s var(--hl-ease)}
.hl-menu-in{display:contents}
.hl-menu .hl-logo{position:absolute;left:20px;top:10px;width:78px}
.hl-links{flex:none;margin:0;padding:0;list-style:none}
.hl-links>li{border-top:1px solid var(--hl-line)}
.hl-l{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0 20px;overflow:hidden;border:0;background:none;color:inherit;font:600 clamp(21px,6.2vw,26px)/1.1 "Mona Sans",ui-sans-serif,system-ui,sans-serif;font-stretch:125%;letter-spacing:-.012em;text-align:left;cursor:pointer}
.hl-l>span{display:block;transform:translateY(120%);transition:transform .16s ease-in}
html.hl-open .hl-l>span{transform:none;transition:transform .36s var(--hl-ease) calc(.05s + var(--i)*.028s)}
.hl-l-s{min-height:48px}
.hl-sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px;padding:0 14px 12px;opacity:0;transition:opacity .12s}
html.hl-open .hl-sub{opacity:1;transition:opacity .3s .12s}
.hl-sub a{display:flex;align-items:center;gap:10px;min-height:46px;padding:5px 6px;border-radius:12px;font-size:14px;font-weight:600;line-height:1.16}
.hl-foot{display:grid;gap:8px;padding:18px 20px 16px;border-top:1px solid var(--hl-line);opacity:0;transform:translateY(10px);transition:opacity .12s,transform .12s}
html.hl-open .hl-foot{opacity:1;transform:none;transition:opacity .3s .2s,transform .36s var(--hl-ease) .2s}
.hl-foot .hl-cap{margin-bottom:6px;color:var(--hl-grey);font-size:14px}
.hl-foot .hl-cap b{color:var(--hl-ink)}
.hl-act{display:flex;align-items:center;gap:12px;height:50px;padding:0 16px;border-radius:14px;background:#f2f6f4;font-size:16px;font-weight:600}
.hl-act svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@supports (height:100svh){.hl-menu{max-height:calc(100svh - 16px)}}
@media (min-width:600px){.hl-menu{left:auto;width:420px}}

/* počítač */
@media (min-width:992px){.hl{display:block}
.hl-kapsle{top:14px;right:18px;transform-origin:calc(100% - 22px) 50%;visibility:hidden;opacity:0;transform:scale(.6);transition:opacity .18s,transform .24s var(--hl-ease),visibility 0s .18s,width var(--hl-w)}
html.hl-past .hl-kapsle,html.hl-open .hl-kapsle{visibility:visible;opacity:1;transform:none;transition:opacity .18s,transform .24s var(--hl-ease),width var(--hl-w)}
.hl-scrim{background:rgba(14,18,16,.2)}
.hl-menu{top:14px;right:18px;width:448px;max-height:calc(100vh - 28px);padding-top:56px;box-shadow:0 0 0 1px var(--hl-line)}
html.hl-open .hl-menu{clip-path:inset(-1px -1px -1px -1px round 25px)}
.hl-menu .hl-logo{top:12px;left:22px;width:84px}
.hl-l{padding:0 22px}
.hl-l:hover{color:#0a845d}
.hl-sub{padding-inline:16px}
.hl-sub a{transition:background .14s}
.hl-sub a:hover{background:#f2f6f4}
.hl-sub a:hover .hl-ik{background:rgba(20,207,147,.26)}
/* posun by na počítači během otevírání ukázal posuvník karty */
.hl-foot{padding-inline:22px;transform:none}
.hl-act{transition:background .14s}
.hl-act:hover{background:#e6eeea}}
@media (min-width:992px) and (max-width:1279.98px){.hl-info a[href^="mailto"]{display:none}
.hl-cap .pl{display:none}
.hl-cap .kr{display:inline}}
@media (min-width:992px) and (max-width:1099.98px){.hl-info a[href^="tel"]{display:none}}
@media (prefers-reduced-motion:reduce){.hl-dot::after{animation:none}
.hl-l>span,.hl-foot,.hl-menu,.hl-kapsle{transition:none!important}}