@font-face{font-family:'Gloock';src:url('../fonts/gloock-latin.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Gloock';src:url('../fonts/gloock-latin-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';src:url('../fonts/figtree-latin.woff2') format('woff2');font-weight:300 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';src:url('../fonts/figtree-latin-ext.woff2') format('woff2');font-weight:300 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --tlo:#06302b;--tlo-2:#0a3d36;--tlo-3:#0e4a41;--tlo-4:#135a4f;
  --rub:#1b8f78;--rub-svijetli:#7fe3c8;--magla:#e6f6f0;--magla-2:#b9d6cd;
  --greska:#ffc9b8;
  --sirina:1320px;--gutter:clamp(20px,4vw,56px);--razmak:clamp(72px,10vw,152px);
  --prijelaz:cubic-bezier(.16,1,.3,1);
  --nag:'Gloock',Georgia,serif;--tekst:'Figtree',system-ui,sans-serif;
  --uspavano:#4fa893;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tlo);color:var(--magla);font:400 1.125rem/1.6 var(--tekst);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure,fieldset{margin:0;padding:0;border:0}
ul,ol{list-style:none}
a{color:inherit}
::selection{background:var(--rub-svijetli);color:var(--tlo)}
:focus-visible{outline:2px solid var(--rub-svijetli);outline-offset:3px}
html{scrollbar-color:var(--tlo-4) var(--tlo)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(112deg,transparent 12%,rgb(127 227 200 / .05) 12% 27%,transparent 27% 44%,rgb(127 227 200 / .03) 44% 50%,transparent 50%)}
.ik{width:1.2em;height:1.2em;fill:currentColor;flex:none}
.skok{position:absolute;left:16px;top:-80px;background:var(--magla);color:var(--tlo);padding:12px 18px;z-index:60}
.skok:focus{top:12px}
@media (prefers-reduced-motion:no-preference){
  .js figure.otkrij>*{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--prijelaz)}
  .js figure.otkrij.vidljivo>*{clip-path:inset(0)}
  .js .mjera-kota.otkrij{transform:scaleX(0);transition:transform 1.2s .2s var(--prijelaz)}
  .js .mjera-kota.otkrij.vidljivo{transform:none}
  .js .tok ol::before{transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--prijelaz)}
  .js .tok ol.vidljivo::before{transform:none}
  .js .tok li{opacity:0;transform:translateY(16px);transition:opacity .7s var(--prijelaz),transform .7s var(--prijelaz);transition-delay:calc(var(--i,0)*140ms + 200ms)}
  .js .tok ol.vidljivo li{opacity:1;transform:none}
}

h1,h2{font-family:var(--nag);font-weight:400;letter-spacing:-.012em;line-height:1.04;text-wrap:balance}
h2{font-size:clamp(2.375rem,5vw,4.5rem)}
h3{font-family:var(--nag);font-weight:400;font-size:1.625rem;line-height:1.2}

.dugme{display:inline-flex;align-items:center;gap:.6em;padding:.75em 1.15em;font:600 1.0625rem/1.2 var(--tekst);text-decoration:none;white-space:nowrap;border:0;cursor:pointer;transition:background-color .25s var(--prijelaz),color .25s var(--prijelaz),transform .25s var(--prijelaz)}
.dugme:active{transform:translateY(1px)}
.dugme-svijetlo{background:var(--magla);color:var(--tlo)}
.dugme-svijetlo:hover{background:var(--rub-svijetli)}
.dugme-svijetlo .ik{transition:transform .35s var(--prijelaz)}
.dugme-svijetlo:hover .ik{transform:translateX(4px)}
.dugme-obrub{background:rgb(6 48 43 / .62);color:var(--magla);box-shadow:inset 0 0 0 1.5px var(--magla)}
.dugme-veliko{padding:1em 1.5em;font-size:1.1875rem}
.veza-tiha{color:var(--magla);text-underline-offset:.3em;text-decoration-color:var(--rub-svijetli);font-weight:500}
.veza-strelica{display:inline-flex;align-items:center;gap:.5em;font-weight:600;text-underline-offset:.3em;text-decoration-color:var(--rub-svijetli)}

.straza{position:absolute;top:0;left:0;width:1px;height:calc(100svh - 90px);pointer-events:none}
main{overflow-x:clip}

/* zaglavlje */
.zaglavlje{position:fixed;inset:0 0 auto;z-index:40;height:76px;display:flex;align-items:center;gap:32px;padding:0 var(--gutter);transition:background-color .35s var(--prijelaz),height .35s var(--prijelaz)}
.zaglavlje::before{content:"";position:absolute;inset:0 0 -32px;background:linear-gradient(rgb(4 30 27 / .78),rgb(4 30 27 / 0));pointer-events:none;transition:opacity .3s}
.zaglavlje.pomaknuto{background:var(--tlo);height:66px;box-shadow:0 1px 0 var(--tlo-4)}
.zaglavlje.pomaknuto::before{opacity:0}
.zaglavlje>*{position:relative}
.znak-ik{width:42px;height:42px;flex:none}
.znak{display:flex;align-items:center;gap:12px;text-decoration:none;font:400 1.3125rem/1 var(--nag);white-space:nowrap}
.meni{display:flex;align-items:center;gap:26px;margin-left:12px}
.meni-veza{display:inline-flex;align-items:center;gap:.3em;text-decoration:none;font-weight:500;font-size:1.0625rem;padding:8px 0;white-space:nowrap}
.meni-veza:hover{color:var(--rub-svijetli)}
.meni-mob{display:none}
.padajuci{position:relative;display:flex;align-items:center}
.padajuci-dugme{background:none;border:0;color:inherit;padding:8px 4px;cursor:pointer;display:flex}
.padajuci ul{position:absolute;top:100%;left:-16px;min-width:252px;background:var(--tlo-2);box-shadow:0 18px 40px rgb(2 20 18 / .5);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s var(--prijelaz),transform .2s var(--prijelaz),visibility .2s}
.padajuci:hover ul,.padajuci:focus-within ul,.padajuci.otvoreno ul{opacity:1;visibility:visible;transform:none}
.padajuci li a{display:block;padding:10px 16px;text-decoration:none}
.padajuci li a:hover{background:var(--tlo-3)}
.zaglavlje-desno{margin-left:auto;display:flex;align-items:center;gap:22px}
.telefon{display:inline-flex;align-items:center;gap:.4em;text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.hamburger{display:none;width:44px;height:44px;background:none;border:0;position:relative;cursor:pointer;color:inherit}
.hamburger span{position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .3s var(--prijelaz)}
.hamburger span:first-child{top:17px}.hamburger span:last-child{top:25px}
.hamburger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* heroj: dvije strane razdvaja ivica stakla */
.heroj{--dio:64%;position:relative;height:100svh;min-height:640px;max-height:1080px;overflow:hidden;background:var(--tlo)}
.heroj[data-aktivno="lijevo"]{--dio:69%}
.heroj[data-aktivno="desno"]{--dio:57%}
.heroj-kabine,.heroj-ograde{position:absolute;inset:0}
.heroj-ograde{clip-path:inset(0 calc(100% - var(--dio)) 0 0);transition:clip-path .75s var(--prijelaz)}
.heroj-ograde>img{position:absolute;left:0;top:0;width:var(--slika-l,72%);height:100%;object-fit:cover;object-position:62% 60%}
.heroj-ograde::after{content:"";position:absolute;inset:0 auto 0 0;width:72%;background:linear-gradient(180deg,rgb(4 30 27 / 0) 34%,rgb(4 30 27 / .84) 82%),linear-gradient(90deg,rgb(4 30 27 / .5),rgb(4 30 27 / 0) 62%)}
.ograde-tekst{position:absolute;z-index:1;left:var(--gutter);bottom:clamp(36px,6.5vh,72px);width:min(54vw,820px)}
h1{font-size:clamp(3rem,7.4vw,7rem);line-height:1}
.ograde-tekst p{font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.4;margin-top:1.15em;max-width:30em}
.heroj-akcije{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;margin-top:1.5em}
.kota{position:relative;display:inline-block}
.kota::after{content:"";position:absolute;left:0;right:0;bottom:-.13em;height:.17em;border-inline:2px solid var(--rub-svijetli);background:linear-gradient(var(--rub-svijetli),var(--rub-svijetli)) center/100% 2px no-repeat}
.heroj-kabine{display:block;text-decoration:none;color:var(--magla)}
.heroj-kabine img{position:absolute;right:0;top:0;width:43%;height:100%;object-fit:cover;object-position:50% 42%}
.heroj-kabine::after{content:"";position:absolute;right:0;top:0;bottom:0;width:43%;background:linear-gradient(180deg,rgb(4 30 27 / 0) 40%,rgb(4 30 27 / .86) 84%)}
.kabine-tekst{position:absolute;z-index:1;right:var(--gutter);bottom:clamp(36px,6.5vh,72px);width:min(24vw,340px);display:flex;flex-direction:column;align-items:flex-start;gap:.6em}
.kabine-naslov{font:400 clamp(2rem,3.6vw,3.25rem)/1 var(--nag)}
.kabine-opis{line-height:1.35}
.kabine-tekst .dugme{margin-top:.5em}
.heroj-kabine:hover .dugme-obrub{background:var(--magla);color:var(--tlo)}
.ivica{position:absolute;top:0;bottom:0;left:var(--dio);width:14px;margin-left:-7px;pointer-events:none;background:linear-gradient(90deg,#c9f7e9 0,#3fc4a4 22%,#178a73 58%,#0a4d42 100%);transition:left .75s var(--prijelaz);overflow:hidden}
.ivica::after{content:"";position:absolute;left:0;right:0;top:-40%;height:40%;background:linear-gradient(transparent,rgb(255 255 255 / .75),transparent)}
@media (prefers-reduced-motion:no-preference){
  .ivica{animation:ivica-ulaz 1.1s var(--prijelaz) both;transform-origin:top}
  .ivica::after{animation:bljesak 1.8s .7s var(--prijelaz) both}
  .kota::after{animation:kota-crta 1.1s .55s var(--prijelaz) both;transform-origin:left}
}
@keyframes kota-crta{from{transform:scaleX(0)}to{transform:none}}
@keyframes ivica-ulaz{from{transform:scaleY(0)}to{transform:none}}
@keyframes bljesak{to{top:110%}}

/* vrste: hijerarhija velicinom */
.vrste,.izvedba,.tok,.pitanja,.ponuda,.harun{max-width:var(--sirina);margin-inline:auto;padding-inline:var(--gutter)}
.vrste{padding-block:var(--razmak) clamp(48px,6vw,80px)}
.vrste-glava{max-width:40rem}
.vrste-glava p,.izvedba-glava p{margin-top:1em;color:var(--magla-2)}
.vrste-tijelo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);margin-top:clamp(40px,5vw,72px);align-items:start}
.vrste-lista li{padding-block:clamp(6px,.7vw,10px)}
.vrste-lista a{display:block;text-decoration:none;font:400 clamp(3rem,7vw,6.5rem)/1.06 var(--nag);color:var(--uspavano);transition:color .35s var(--prijelaz)}
.vrste-lista a{display:flex;align-items:center;gap:.28em}
.vrste-lista a .ik{width:.5em;height:.5em;color:var(--rub-svijetli);opacity:0;transform:translateX(-.3em);transition:opacity .35s var(--prijelaz),transform .5s var(--prijelaz)}
.vrste-lista li.aktivna a{color:var(--magla)}
.vrste-lista li.aktivna a .ik{opacity:1;transform:none}
.vrste-lista a:focus-visible{outline-offset:6px}
.vrste-lista p{max-width:27em;color:var(--magla-2);max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--prijelaz),opacity .4s var(--prijelaz),margin .5s var(--prijelaz)}
.vrste-lista li.aktivna p{max-height:5em;opacity:1;margin-block:.4em .6em}
.vrsta-mob{display:none}
.vrste-slike{position:sticky;top:96px;aspect-ratio:1/1;max-height:calc(100svh - 128px);width:100%;overflow:hidden;background:var(--tlo-2)}
.vrste-slike img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .6s var(--prijelaz),transform 1.2s var(--prijelaz)}
.vrste-slike img.prikazana{opacity:1;transform:none}
.napomena{margin-top:20px;font-size:.9375rem;color:var(--magla-2);text-align:right}

/* mjera: puna sirina, ivica stakla */
.mjera{position:relative;margin-top:clamp(40px,6vw,88px);min-height:clamp(520px,78vh,780px);display:flex;align-items:flex-end}
.mjera>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.mjera-tekst{position:relative;z-index:1;margin:0 max(var(--gutter),calc((100vw - var(--sirina))/2 + var(--gutter))) clamp(32px,5vw,64px) auto;width:min(100%,520px);padding:clamp(24px,3vw,40px);background:rgb(6 48 43 / .74);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.mjera-tekst::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,#c9f7e9,#3fc4a4 30%,#178a73 70%,#0a4d42)}
.mjera-kota{position:absolute;z-index:1;left:clamp(20px,9vw,150px);bottom:15%;width:30%;height:18px;border-inline:2px solid var(--rub-svijetli);background:linear-gradient(var(--rub-svijetli),var(--rub-svijetli)) center/100% 2px no-repeat;color:var(--magla);transform-origin:left}
.mjera-kota span{position:absolute;left:50%;top:-1.9em;transform:translateX(-50%);font-weight:600;font-size:1.0625rem;white-space:nowrap;background:var(--tlo);padding:.1em .6em}
.mjera-tekst p{margin-top:1em;font-size:1.25rem;line-height:1.5}

/* izvedba */
.izvedba{padding-block:var(--razmak) 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px) clamp(32px,6vw,88px)}
.izvedba-tabovi{grid-column:1;display:flex;flex-direction:column;align-items:flex-start}
.izvedba-tabovi button{background:none;border:0;color:var(--magla-2);font:400 clamp(1.5rem,2.3vw,2rem)/1.2 var(--nag);padding:.4em 0;cursor:pointer;text-align:left;transition:color .25s var(--prijelaz)}
.izvedba-tabovi button[aria-selected="true"]{color:var(--magla);text-decoration:underline;text-decoration-color:var(--rub-svijetli);text-decoration-thickness:3px;text-underline-offset:.3em}
.izvedba-tabovi button:hover{color:var(--magla)}
.izvedba-panel{grid-column:2;grid-row:1/span 2;background:var(--tlo-2);display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.izvedba-panel[hidden]{display:none}
.izvedba-panel svg{display:block;width:100%;height:auto;background:var(--tlo-3)}
.izvedba-panel>div{padding:clamp(20px,3vw,32px)}
.izvedba-panel p{margin-top:.4em;color:var(--magla-2)}
.s-pod{fill:#0a3d36}.s-profil{fill:#b9d6cd}.s-vod{stroke:#7fe3c8;stroke-width:1.2;stroke-dasharray:3 5;fill:none}.s-nat{fill:#e6f6f0;font:500 17px var(--tekst)}

/* tok */
.tok{padding-block:var(--razmak) 0}
.tok ol{counter-reset:k;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,64px);position:relative;padding-top:30px}
.tok ol::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(180deg,#7fe3c8,#178a73 60%,#0a4d42)}
.tok li{position:relative}
.tok li::before{counter-increment:k;content:counter(k);display:block;font:400 2.75rem/1 var(--nag);color:var(--rub-svijetli);margin-bottom:.35em}
.tok p{margin-top:.4em;color:var(--magla-2)}

/* harun: asimetricno */
.harun{padding-block:var(--razmak) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.harun-tekst{grid-column:1/7;grid-row:1;align-self:center;padding-right:clamp(0px,3vw,40px)}
.harun-tekst h2{font-size:clamp(2.125rem,3.9vw,3.5rem)}
.harun-tekst p{margin-block:1.1em 1.3em;color:var(--magla-2)}
.harun figure img{width:100%;aspect-ratio:3/4;object-fit:cover}
.harun figcaption{margin-top:10px;font-size:.9375rem;color:var(--magla-2)}
.f1{grid-column:7/10;grid-row:1;margin-bottom:clamp(40px,7vw,96px)}
.f2{grid-column:10/13;grid-row:1}

/* pitanja */
.pitanja{padding-block:var(--razmak) 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(32px,6vw,88px)}
.pitanja-lista details{box-shadow:0 1px 0 var(--tlo-4)}
.pitanja-lista summary{display:flex;justify-content:space-between;align-items:center;gap:20px;list-style:none;cursor:pointer;font-weight:600;font-size:1.25rem;line-height:1.3;padding:1.05em 0;min-height:48px}
.pitanja-lista summary::-webkit-details-marker{display:none}
.pitanja-lista summary .ik{color:var(--rub-svijetli);transition:transform .35s var(--prijelaz)}
.pitanja-lista details[open] summary .ik{transform:rotate(45deg)}
.pitanja-lista p{padding-bottom:1.2em;color:var(--magla-2);max-width:36em}
.pitanja-lista a{color:var(--magla)}

/* ponuda */
.ponuda{margin-top:var(--razmak);padding-block:clamp(48px,6vw,88px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,88px);position:relative}
.ponuda::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:var(--tlo-2);z-index:-1;border-top:8px solid var(--rub)}
.ponuda-uvod p{margin-block:1em 1.5em;color:var(--magla-2)}
.ponuda-uvod a{display:flex;width:fit-content;margin-top:.7em}
.kontakt-veliki{font:400 clamp(1.875rem,3.2vw,2.75rem)/1.1 var(--nag);text-decoration:none;font-variant-numeric:tabular-nums}
.kontakt-veliki:hover{color:var(--rub-svijetli)}
.forma{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.izbor{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.izbor legend{font-weight:600;margin-bottom:10px;padding:0}
.izbor input{position:absolute;opacity:0}
.izbor span{display:inline-block;padding:.6em 1.1em;box-shadow:inset 0 0 0 1.5px var(--rub);cursor:pointer;font-weight:500;min-height:44px;transition:background-color .2s var(--prijelaz),color .2s var(--prijelaz)}
.izbor input:checked+span{background:var(--magla);color:var(--tlo);box-shadow:none}
.izbor input:focus-visible+span{outline:2px solid var(--rub-svijetli);outline-offset:3px}
.polje label{display:block;font-weight:600;margin-bottom:6px}
.polje label span{font-weight:400;color:var(--magla-2)}
.polje input,.polje textarea{width:100%;background:var(--tlo);color:var(--magla);border:0;box-shadow:inset 0 0 0 1.5px var(--tlo-4);padding:.8em .9em;font:inherit;min-height:52px;caret-color:var(--rub-svijetli);transition:box-shadow .2s var(--prijelaz)}
.polje textarea{resize:vertical}
.polje input::placeholder{color:var(--magla-2);opacity:1}
.polje input:hover,.polje textarea:hover{box-shadow:inset 0 0 0 1.5px var(--rub)}
.polje input:focus,.polje textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--rub-svijetli)}
.polje input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--greska)}
.greska{color:var(--greska);font-size:1rem;margin-top:6px}
.polje-puno,.forma-kraj{grid-column:1/-1}
.forma-kraj{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px}
.uspjeh[hidden]{display:none}
.uspjeh{display:flex;align-items:center;gap:.5em;font-weight:600;color:var(--rub-svijetli)}

/* podnozje */
.podnozje{padding:clamp(48px,6vw,80px) var(--gutter) 28px;max-width:calc(var(--sirina));margin-inline:auto}
.podnozje-gore{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.podnozje h2{font:600 1.0625rem/1.3 var(--tekst);letter-spacing:0;color:var(--magla-2);margin-bottom:.7em}
.podnozje nav a,.podnozje-gore div a{display:block;padding:.28em 0;text-decoration:none}
.podnozje nav a:hover,.podnozje-gore div a:hover{color:var(--rub-svijetli)}
.podnozje-gore p{margin-top:.3em;color:var(--magla-2)}
.podnozje-dole{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;margin-top:40px;padding-top:20px;box-shadow:0 -1px 0 var(--tlo-4);font-size:1rem;color:var(--magla-2)}
.podnozje-dole a{color:inherit;text-underline-offset:.25em;margin-right:14px}
.podnozje-dole p:last-child a{margin-right:0}
.traka{display:none}

@media (max-width:1180px){
  .telefon{display:none}
  .meni{gap:20px}
}
@media (max-width:980px){
  .zaglavlje{height:66px}
  .meni{position:fixed;inset:66px 0 0;background:var(--tlo);flex-direction:column;align-items:flex-start;gap:6px;margin:0;padding:24px var(--gutter);overflow:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s var(--prijelaz),transform .25s var(--prijelaz),visibility .25s}
  .meni.otvoren{opacity:1;transform:none;visibility:visible}
  .meni-veza{font:400 2.25rem/1.15 var(--nag);padding:10px 0}
  .meni>*{opacity:0;transform:translateY(14px);transition:opacity .4s var(--prijelaz),transform .5s var(--prijelaz)}
  .meni.otvoren>*{opacity:1;transform:none}
  .meni.otvoren>:nth-child(2){transition-delay:60ms}.meni.otvoren>:nth-child(3){transition-delay:120ms}.meni.otvoren>:nth-child(4){transition-delay:180ms}.meni.otvoren>:nth-child(5){transition-delay:240ms}
  html.meni-otvoren{overflow:hidden}
  .meni-mob{display:inline-flex;font:600 1.25rem/1.2 var(--tekst);margin-top:auto;color:var(--rub-svijetli)}
  .padajuci{flex-wrap:wrap;width:100%}
  .padajuci ul{position:static;width:100%;opacity:1;visibility:visible;transform:none;background:none;box-shadow:none;display:none;padding:0 0 8px}
  .padajuci.otvoreno ul{display:block}
  .padajuci li a{padding:10px 0;font-size:1.1875rem}
  .padajuci-dugme{padding:12px;margin-left:6px}
  .hamburger{display:block}
  .zaglavlje-desno .dugme{display:none}
}
@media (max-width:860px){
  html{scroll-padding-top:76px}
  .straza{height:48px}
  body{padding-bottom:64px;font-size:1.0625rem}
  .znak-ik{width:38px;height:38px}
  .znak{font-size:1.25rem}

  .heroj{display:grid;grid-template-rows:minmax(0,1fr) auto auto;height:calc(100svh - 64px);min-height:600px;max-height:none}
  .heroj-ograde,.heroj-kabine{position:relative;inset:auto;clip-path:none}
  .heroj-ograde{grid-row:1;display:flex;align-items:flex-end;overflow:hidden}
  .heroj-ograde>img{width:100%;object-position:58% 40%}
  .heroj-ograde::after{width:100%;background:linear-gradient(180deg,rgb(4 30 27 / .1) 12%,rgb(4 30 27 / .62) 42%,rgb(4 30 27 / .92) 80%)}
  .ivica{grid-row:2;position:static;width:100%;height:8px;margin:0;background:linear-gradient(180deg,#c9f7e9,#3fc4a4 25%,#178a73 60%,#0a4d42);animation:none}
  .ivica::after{display:none}
  .ograde-tekst{position:relative;left:auto;bottom:auto;width:100%;padding:0 var(--gutter) 24px}
  h1{font-size:clamp(3rem,14.4vw,5rem)}
  .ograde-tekst p{font-size:1.0625rem;margin-top:1em}
  .heroj-akcije{margin-top:1.1em;gap:12px 20px}
  .heroj-akcije .dugme{flex:1 1 100%;justify-content:space-between}

  .heroj-kabine{grid-row:3;height:124px;display:flex;align-items:center;overflow:hidden}
  .heroj-kabine img{width:100%;height:100%;object-position:50% 30%}
  .heroj-kabine::after{width:100%;background:linear-gradient(90deg,rgb(4 30 27 / .92) 34%,rgb(4 30 27 / .35))}
  .kabine-tekst{position:relative;right:auto;bottom:auto;width:100%;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:2px;align-items:center}
  .kabine-naslov{font-size:1.875rem}
  .kabine-opis{grid-column:1;font-size:.9375rem}
  .kabine-tekst .dugme{grid-column:2;grid-row:1/span 2;margin:0;width:52px;height:52px;padding:0;justify-content:center;background:var(--magla);color:var(--tlo);box-shadow:none}
  .kabine-tekst .dugme .dt{display:none}

  .vrste{padding-top:72px}
  .vrste-tijelo{display:block;margin-top:32px}
  .vrste-slike{display:none}
  .vrste-lista{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .vrste-lista::-webkit-scrollbar{display:none}
  .vrste-lista li{position:relative;flex:0 0 min(80vw,340px);scroll-snap-align:start;display:flex;flex-direction:column;background:var(--tlo-2);padding:0 0 20px}
  .vrste-lista a{order:2;font-size:2.25rem;color:var(--magla);padding:16px 18px 0;justify-content:space-between}
  .vrste-lista a::after{content:"";position:absolute;inset:0}
  .vrste-lista a .ik{opacity:1;transform:none;width:.72em;height:.72em}
  .vrste-lista p,.vrste-lista li.aktivna p{order:3;max-height:none;opacity:1;margin:.4em 0 0;padding-inline:18px;font-size:1rem;line-height:1.45}
  .vrsta-mob{display:block;order:1;width:100%;aspect-ratio:1/1;object-fit:cover}
  .napomena{text-align:left}

  .mjera{display:block;min-height:0;margin-top:56px}
  .mjera>img{position:static;height:auto;aspect-ratio:1/1;object-position:32% 50%}
  .mjera-kota{left:20px;top:82vw;bottom:auto;width:46%}
  .mjera-kota span{font-size:.9375rem}
  .mjera-tekst{margin:-48px var(--gutter) 0;width:auto;padding:26px 22px}
  .mjera-tekst p{font-size:1.0625rem}

  .izvedba,.pitanja,.ponuda{grid-template-columns:minmax(0,1fr)}
  .izvedba-tabovi{grid-column:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--tlo-2)}
  .izvedba-tabovi button{font:600 .9375rem/1.2 var(--tekst);padding:.5em .3em;min-height:52px;text-align:center}
  .izvedba-tabovi button[aria-selected="true"]{background:var(--magla);color:var(--tlo);text-decoration:none}
  .izvedba-panel{grid-column:1;grid-row:auto}
  .s-nat{font-size:24px}

  .tok ol{grid-template-columns:minmax(0,1fr);padding:0 0 0 26px;gap:30px}
  .tok ol::before{left:0;right:auto;top:0;bottom:0;width:6px;height:auto;background:linear-gradient(90deg,#c9f7e9,#3fc4a4 40%,#178a73);transform-origin:top}
  .js .tok ol::before{transform:scaleY(0)}
  .js .tok ol.vidljivo::before{transform:none}
  .tok li::before{font-size:2.25rem}

  .harun{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .harun-tekst{grid-column:1/-1;grid-row:auto;padding-right:0;margin-bottom:12px}
  .f1,.f2{grid-column:auto;grid-row:auto;margin:0}
  .f2{margin-top:44px}

  .pitanja-lista summary{font-size:1.125rem}

  .izbor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .izbor legend{grid-column:1/-1}
  .izbor span{display:flex;align-items:center;justify-content:center;min-height:52px}
  .forma{grid-template-columns:minmax(0,1fr)}
  .forma-kraj .dugme{width:100%;justify-content:space-between}

  .podnozje-gore{grid-template-columns:repeat(2,minmax(0,1fr))}
  .znak-veliki{grid-column:1/-1}
  .podnozje-dole{flex-direction:column}

  .traka{display:grid;grid-template-columns:1fr 1fr 1.15fr;position:fixed;inset:auto 0 0;z-index:30;background:var(--tlo-2);box-shadow:0 -1px 0 var(--tlo-4);padding-bottom:env(safe-area-inset-bottom);transition:transform .35s var(--prijelaz)}
  .traka.skrivena{transform:translateY(110%)}
  .traka a{display:flex;align-items:center;justify-content:center;gap:.35em;min-height:64px;text-decoration:none;font-weight:600;font-size:clamp(.875rem,4.2vw,1rem)}
  .traka-glavna{background:var(--magla);color:var(--tlo)}
}
@media (min-width:600px) and (max-width:860px){
  .mjera>img{aspect-ratio:16/10}
  .mjera-kota{top:47vw}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
}

/* unutrasnje stranice */
.strana-glava{position:relative;min-height:clamp(440px,64vh,640px);display:flex;align-items:flex-end;overflow:hidden}
.strana-glava>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.strana-glava::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(4 30 27 / .42),rgb(4 30 27 / .1) 30%,rgb(4 30 27 / .88) 86%)}
.strana-glava-tekst{position:relative;z-index:1;width:100%;max-width:var(--sirina);margin-inline:auto;padding:110px var(--gutter) clamp(32px,4vw,56px)}
.strana-glava h1,.strana-glava-prosta h1{font-size:clamp(2.75rem,6vw,5.25rem);max-width:15em}
.strana-glava-tekst p:last-child,.strana-glava-prosta>p{margin-top:.8em;max-width:34em;font-size:clamp(1.125rem,1.6vw,1.3125rem);line-height:1.45}
.ivica-vodoravna{position:absolute;z-index:1;left:0;right:0;bottom:0;height:8px;background:linear-gradient(180deg,#c9f7e9,#3fc4a4 25%,#178a73 60%,#0a4d42)}
.strana-glava-prosta{max-width:var(--sirina);margin-inline:auto;padding:136px var(--gutter) 24px}
.mrvice{font-size:1rem;color:var(--magla-2);margin-bottom:14px}
.mrvice a{display:inline-block;padding-block:.2em;color:var(--magla);text-underline-offset:.25em;text-decoration-color:var(--rub-svijetli)}
.mrvice span[aria-hidden]{margin-inline:.35em}
.strana-404{min-height:60vh}
.strana-404 .dugme{margin-top:1.2em}

.proza{max-width:calc(46rem + 2*var(--gutter));margin-inline:auto;padding:clamp(40px,6vw,80px) var(--gutter) 0}
.proza>*+*{margin-top:1.05em}
.proza h2{font-size:clamp(1.875rem,3.4vw,2.75rem);margin-top:1.5em;margin-bottom:.1em}
.proza h3{margin-top:1.4em}
.proza p,.proza li{color:#d3e8e1}
.proza a{color:var(--magla);text-underline-offset:.25em;text-decoration-color:var(--rub-svijetli)}
.proza a:hover{color:var(--rub-svijetli)}
.proza ul{display:grid;gap:.5em}
.proza ul li{position:relative;padding-left:1.4em}
.proza ul li::before{content:"";position:absolute;left:0;top:.72em;width:.8em;height:2px;background:var(--rub-svijetli)}
.proza strong{color:var(--magla);font-weight:600}
.proza details{box-shadow:0 1px 0 var(--tlo-4);margin-top:0}
.proza h2+details{margin-top:.6em}
.proza summary{position:relative;list-style:none;cursor:pointer;font-weight:600;font-size:1.1875rem;line-height:1.3;padding:1em 2.2em 1em 0;min-height:48px;color:var(--magla)}
.proza summary::-webkit-details-marker{display:none}
.proza summary::before,.proza summary::after{content:"";position:absolute;right:2px;top:calc(1em + .6em);width:14px;height:1.5px;background:var(--rub-svijetli);transition:transform .35s var(--prijelaz)}
.proza summary::after{transform:rotate(90deg)}
.proza details[open] summary::after{transform:rotate(0)}
.proza details p{padding-bottom:1.1em;margin-top:0}
.proza .napomena{text-align:left;margin-top:2.4em}

.srodno{max-width:calc(46rem + 2*var(--gutter));margin:clamp(40px,5vw,64px) auto 0;padding-inline:var(--gutter);display:grid}
.srodno a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:.7em 0;text-decoration:none;font:400 clamp(1.5rem,2.6vw,2rem)/1.2 var(--nag);box-shadow:0 1px 0 var(--tlo-4);transition:color .25s var(--prijelaz)}
.srodno a .ik{color:var(--rub-svijetli);transition:transform .35s var(--prijelaz)}
.srodno a:hover{color:var(--rub-svijetli)}
.srodno a:hover .ik{transform:translateX(5px)}

.mamac{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.forma-napomena{grid-column:1/-1;font-size:.9375rem;color:var(--magla-2)}
.forma-napomena a{color:var(--magla);text-underline-offset:.2em}
.greska-slanja{color:var(--greska);font-weight:600}
.forma button[aria-busy="true"]{opacity:.7;cursor:progress}

@media (max-width:860px){
  .strana-glava{min-height:62svh}
  .strana-glava-tekst{padding-top:96px}
  .strana-glava-prosta{padding-top:104px}
  .proza{font-size:1.0625rem}
}