/* MAT-PROJEKT · verzija 2 (Winkla 2026). Sve u rem, root se skalira s ekranom. */

/* ── Winkla – osnova responzivnosti ── */
html,body{overscroll-behavior:none}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:100%}
@media (max-width:359px){html{font-size:87.5%}}
@media (min-width:1600px){html{font-size:clamp(16px,calc(16px + (min(100vw,177.78vh) - 1600px) * .0094),27px)}}
:root{--wrap:87.5rem;--gutter:2.5rem}
@media (max-width:900px){:root{--gutter:1rem}}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
img,video,iframe,svg{max-width:100%}
img{height:auto}

/* ── Tokeni (isti svijet kao verzija 1: grafit, mramor, zlato; Newsreader + DM Mono) ── */
:root{
  --crna:#111110;--crna-2:#1a1a18;--crna-3:#2b2b28;
  --papir:#eeeae1;--papir-2:#e3ddd1;--papir-3:#d2cabb;
  --t-svj:#efe9dc;--t-svj-2:#aaa69c;
  --t-tam:#161614;--t-tam-2:#5d5a52;
  --zlato:#e2c463;--zlato-2:#ecd389;
  --serif:"Newsreader",ui-serif,Georgia,serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.8,.22,1);--ease-panel:cubic-bezier(.76,0,.24,1);
  --r:1rem;--rub:1.5rem;
  --linija:rgba(239,233,220,.12);--linija-t:rgba(22,22,20,.14);
  /* nazivi koje koristi traka za kolačiće */
  --mramor:var(--papir);--mramor-2:var(--papir-2);--mramor-3:var(--papir-3);--tamna:var(--crna);--tam-tekst:var(--t-tam);--tam-tekst-2:var(--t-tam-2);
}
@media (max-width:900px){:root{--rub:1rem}}
html{background:var(--crna);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crna);color:var(--t-svj);font-family:var(--serif);font-size:1.1875rem;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:clip;font-optical-sizing:auto}
::selection{background:var(--zlato);color:var(--crna)}
:focus-visible{outline:2px solid var(--zlato);outline-offset:3px;border-radius:.25rem}
a{color:inherit}
h1,h2,h3,p,dl,dd,figure{margin:0}
em{font-style:italic}
.mono{font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;line-height:1.5}
.skriveno{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.preskoci{position:absolute;left:1rem;top:-4rem;z-index:100;padding:.75rem 1rem;border-radius:999rem;background:var(--zlato);color:var(--crna);font-family:var(--mono);font-size:.75rem}
.preskoci:focus{top:1rem}
.ik{width:1.125rem;height:1.125rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.velik{font-weight:300;font-size:clamp(3rem,1.4rem + 5.4vw,7rem);letter-spacing:-.045em;line-height:.92}
.velik em{color:var(--zlato)}
picture{display:block}

/* Gumbi */
.gumbi{display:flex;flex-wrap:wrap;gap:.625rem}
.gumb{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:3.25rem;padding:0 1.5rem;border-radius:999rem;border:1px solid transparent;font:400 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .3s var(--ease),color .3s,border-color .3s}
.gumb .ik{width:1rem;height:1rem;transition:transform .45s var(--ease)}
.gumb:hover .ik:last-child{transform:translateX(.25rem)}
.gumb--zlato{background:var(--zlato);color:var(--crna)}
.gumb--zlato:hover{background:var(--zlato-2)}
.gumb--obrub{border-color:rgba(239,233,220,.3);color:var(--t-svj)}
.gumb--obrub:hover{border-color:var(--t-svj)}
.gumb--tamni{background:var(--crna);color:var(--t-svj)}
.gumb--tamni:hover{background:#2b2b28}
.gumb--obrub-t{border-color:rgba(22,22,20,.3);color:var(--t-tam)}
.gumb--obrub-t:hover{border-color:var(--t-tam)}
.gumb--puni{width:100%}
.gumb--mali{min-height:2.75rem;padding:0 1.125rem}

/* Točkasti raster (tiskani poluton) */
.raster{position:absolute;inset:8% 12%;border-radius:1.5rem;background-image:radial-gradient(rgba(239,233,220,.16) .055rem,transparent .075rem);background-size:.5rem .5rem;-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);pointer-events:none}
.raster--uski{inset:4% 22%}

/* ══ Gornja linija ══════════════════════════════════════════════════════ */
.vrh{position:relative;z-index:5;display:flex;align-items:center;gap:1.25rem;padding:var(--rub) var(--gutter) 0;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t-svj)}
.vrh>i{flex:1 1 0;height:1px;background:rgba(239,233,220,.3);min-width:1rem}
.vrh__logo{display:inline-flex;align-items:center;gap:.75rem;min-height:2.75rem;text-decoration:none;letter-spacing:.3em;--logo-crna:var(--t-svj);--logo-siva:#77756e}
.vrh__znak{width:1.375rem;height:1.625rem;flex:none}
.vrh__oznaka{color:var(--t-svj-2)}
.vrh__tel{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;text-decoration:none}
.vrh__tel .ik{width:.9375rem;height:.9375rem;color:var(--zlato)}
.vrh__tel:hover{color:var(--zlato)}

/* ══ 3D ploča ═══════════════════════════════════════════════════════════ */
.scena{position:relative;z-index:2;display:grid;place-items:center;perspective:140rem;perspective-origin:50% 30%}
/* NAPOMENA: ne animirati prozirnost na .ploca, to spljošti 3D */
.ploca{--w:min(25rem,58vw);--raz:0;--rx:54deg;--rz:-36deg;position:relative;width:var(--w);aspect-ratio:1;transform-style:preserve-3d;transform:translateY(calc(var(--raz) * .9rem)) rotateX(var(--rx)) rotateZ(var(--rz))}
.ploca__sjena{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,0));filter:blur(.75rem);transform:translateZ(-.2rem)}
.sloj{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--z) * 1rem + var(--i) * var(--raz) * 1rem))}
.lice{position:absolute;display:block;backface-visibility:hidden}
.lice--vrh{inset:0;transform:translateZ(calc(var(--t) * 1rem))}
.lice--pr{left:0;width:100%;height:calc(var(--t) * 1rem);top:100%;transform-origin:top;transform:rotateX(90deg);backface-visibility:visible}
.lice--de{top:0;height:100%;width:calc(var(--t) * 1rem);left:100%;transform-origin:left;transform:rotateY(-90deg);backface-visibility:visible}
.lice--pr::after,.lice--de::after{content:"";position:absolute;inset:0}
.lice--pr::after{background:rgba(0,0,0,.18)}
.lice--de::after{background:rgba(0,0,0,.42)}
.sloj--beton .lice{background:#8a857b url(/img/sloj-beton.webp) center/cover}
.sloj--temelj .lice{background:linear-gradient(180deg,#d1a55a,#9c7230)}
.sloj--temelj .lice--vrh{background:linear-gradient(135deg,rgba(214,170,92,.95),rgba(160,116,48,.95))}
.sloj--osnova .lice{background:#5c5a55 url(/img/sloj-osnova.webp) center/cover}
.sloj--lak .lice{background:linear-gradient(180deg,#f4f1ea,#d9d4ca)}
.sloj--lak .lice--vrh{background:#e9e5dc url(/img/uzorak-zavrsni.webp) center/cover;overflow:hidden}
.sloj--lak .lice--vrh::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.45) 48%,rgba(255,255,255,0) 60%)}
.natpis{position:absolute;left:100%;top:100%;display:flex;align-items:center;gap:.75rem;white-space:nowrap;transform-origin:left center;transform:translateZ(calc(var(--t) * .5rem)) rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1)) translateX(1.25rem);font:400 1.25rem/1 var(--serif);letter-spacing:-.01em;color:var(--t-svj);opacity:var(--natpisi,0);transition:opacity .4s}
.natpis::before{content:"";width:2.5rem;height:1px;background:rgba(239,233,220,.45);order:-1}
.natpis b{font:400 .75rem/1 var(--mono);letter-spacing:.08em;color:var(--zlato)}

/* ══ Naslovna: uvod ═════════════════════════════════════════════════════ */
.h{position:relative;min-height:max(100svh,44rem);display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-bottom:6.5rem;overflow:hidden}
.h__scena{position:relative;display:grid;place-items:center;min-height:22rem;margin:1.25rem var(--gutter) 0}
.h__rijec{position:absolute;inset:0;z-index:1;display:grid;align-content:space-between;justify-content:center;text-align:center;font-weight:300;font-size:clamp(4.5rem,1rem + 12vw,15.5rem);line-height:.82;letter-spacing:-.055em;pointer-events:none}
.h__rijec em{color:var(--zlato)}
.h .scena{transform:translateY(3%)}
.h .ploca{--w:min(20rem,46vw)}
.h__dno{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;padding:1.75rem var(--gutter) 0}
.h__naslov{max-width:30rem;margin-bottom:1.5rem;font-weight:400;font-size:clamp(1.375rem,1.1rem + .9vw,1.875rem);letter-spacing:-.02em;line-height:1.2}
.h__jamstva{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;text-align:right;color:var(--t-svj-2)}
.h__jamstva li::before{content:"";display:inline-block;width:.375rem;height:.375rem;margin:0 .625rem .1rem 0;border-radius:50%;background:var(--zlato);vertical-align:middle}
.kretanje .h .vrh,.kretanje .h__dno{animation:ulaz 1.2s .5s var(--ease) both}
.kretanje .h__rijec{animation:ulaz-rijec 1.6s .1s var(--ease) both}
.kretanje .h .scena{animation:ulaz-ploca 1.8s .25s var(--ease) both}
@keyframes ulaz{from{opacity:0;transform:translateY(1rem)}}
@keyframes ulaz-rijec{from{opacity:0;filter:blur(.5rem)}}
@keyframes ulaz-ploca{from{opacity:0;translate:0 3rem}}

/* ══ Fuge: rečenica se pali riječ po riječ ══════════════════════════════ */
.fuge{position:relative;padding:clamp(5rem,10vw,9rem) var(--gutter)}
.fuge__pin{display:grid;place-items:center}
.fuge__tekst{max-width:20em;text-align:center;font-weight:300;font-size:clamp(2rem,1rem + 3.4vw,4.75rem);letter-spacing:-.035em;line-height:1.08;color:var(--t-svj)}
.kretanje .fuge{height:190svh;padding:0}
.kretanje .fuge__pin{position:sticky;top:0;height:100svh;padding:0 var(--gutter)}
.kretanje .fuge__tekst span{opacity:.16;transition:opacity .5s var(--ease)}
.kretanje .fuge__tekst span.je-upaljena{opacity:1}

/* ══ Kategorije (kao MB Stakor: izbornik lijevo, puno stvarnih radova) ══ */
.kat{padding:clamp(4rem,8vw,7rem) 0}
.kat__in{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
.kat__izbornik{position:sticky;top:2rem;align-self:start;display:grid;gap:1.25rem;justify-items:start}
.kat__izbornik>.mono{color:var(--t-svj-2)}
.kat__izbornik ol{list-style:none;margin:0;padding:0;display:grid;gap:.25rem;width:100%}
.kat__izbornik ol a{display:flex;align-items:center;gap:.875rem;min-height:2.75rem;padding:0 .875rem;border-radius:.625rem;text-decoration:none;font-size:1.125rem;color:var(--t-svj-2);transition:background .3s,color .3s}
.kat__izbornik ol a .mono{color:inherit}
.kat__izbornik ol a:hover{color:var(--t-svj)}
.kat__izbornik a.je-aktivna{background:rgba(239,233,220,.07);color:var(--t-svj)}
.kat__izbornik a.je-aktivna .mono{color:var(--zlato)}
.kat__popis{display:grid;gap:clamp(5rem,9vw,8rem)}
.kat__st{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:center;scroll-margin-top:2rem}
.kat__fotke{position:relative;min-width:0}
.kat__fotke--hrpa{aspect-ratio:1;min-height:20rem}
.kat__foto{border-radius:.75rem;overflow:hidden;background:var(--crna-2);box-shadow:0 1.5rem 3rem rgba(0,0,0,.45)}
.kat__foto picture,.kat__foto img{width:100%;height:100%;object-fit:cover}
.kat__fotke--hrpa .kat__foto{position:absolute;top:50%;left:50%;width:58%;aspect-ratio:3/4;transform:translate(-50%,-50%) translateX(calc((var(--i) - (var(--n) - 1) / 2) * 22%)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 6deg));transition:transform .8s var(--ease)}
.kat__fotke--hrpa .kat__foto:nth-child(1){z-index:3}
.kat__fotke--hrpa .kat__foto:nth-child(2){z-index:2}
.kat__fotke--hrpa:hover .kat__foto{transform:translate(-50%,-50%) translateX(calc((var(--i) - (var(--n) - 1) / 2) * 34%)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 9deg))}
.kat__fotke--jedna .kat__foto{aspect-ratio:4/5}
.kat__fotke--jedna .kat__foto img{object-position:50% 38%}
.kat__br{color:var(--t-svj-2);margin-bottom:1rem}
.kat__ime{font-weight:300;font-size:clamp(2.75rem,1.4rem + 3.6vw,5.5rem);letter-spacing:-.045em;line-height:.95;margin-bottom:1.5rem}
.kat__ime em{color:var(--zlato)}
.kat__tekst>p:not(.mono){max-width:30rem;margin-bottom:1.5rem;color:#d4cdbd;line-height:1.45}
.kat__za{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.kat__za li{padding:.4rem .75rem;border:1px solid var(--linija);border-radius:999rem;color:var(--t-svj-2)}

/* ══ Presjek ════════════════════════════════════════════════════════════ */
.presjek{position:relative;overflow-x:clip}
.presjek__pin{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:1.5rem;padding:3rem 0 4rem}
.presjek__glava{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.presjek__glava p{max-width:20rem;color:var(--t-svj-2);line-height:1.4}
.presjek__scena{position:relative;display:grid;place-items:center;min-height:30rem}
.scena--presjek .ploca{--raz:2.4;--natpisi:1}
.presjek__popis{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.presjek__popis li{display:grid;align-content:start;gap:.25rem;padding:1rem 1.25rem 0 0;border-top:1px solid var(--linija)}
.presjek__popis .mono{color:var(--zlato)}
.presjek__popis b{font-weight:400;font-size:1.25rem;letter-spacing:-.01em}
.presjek__popis span:last-child{color:var(--t-svj-2);font-size:1rem;line-height:1.4}
@media (min-width:901px){
  .kretanje .presjek:not(.presjek--staticni){height:260svh}
  .kretanje .presjek:not(.presjek--staticni) .presjek__pin{position:sticky;top:0;height:100svh;padding:2rem 0 6rem}
  .kretanje .presjek:not(.presjek--staticni) .scena--presjek .ploca{--raz:var(--raz-js,0);--natpisi:var(--natpisi-js,0)}
  .presjek__popis:not(.presjek__popis--vidljiv){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media (min-width:901px) and (max-width:1240px){.scena--presjek .ploca{--w:min(25rem,36vw)}.scena--presjek{transform:translateX(-10vw)}}
@media (max-width:900px){
  .natpis{display:none}
  .presjek__glava{flex-direction:column;align-items:flex-start}
  .presjek__scena{padding-top:4.5rem;min-height:26rem}
  .scena--presjek .ploca{--raz:1.8}
  .presjek__popis{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1rem}
}
@media (max-width:420px){.presjek__popis{grid-template-columns:minmax(0,1fr)}}

/* ══ Suradnja ═══════════════════════════════════════════════════════════ */
.suradnja{padding:clamp(4rem,8vw,7rem) 0}
.suradnja__koraci{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linija)}
.suradnja__koraci li{display:grid;align-content:start;gap:.75rem;padding:1.5rem 1.5rem 0 0}
.suradnja__koraci li+li{padding-left:1.5rem;border-left:1px solid var(--linija)}
.suradnja__koraci .mono{color:var(--zlato)}
.suradnja__koraci h3{font-weight:400;font-size:clamp(1.625rem,1.2rem + 1vw,2.25rem);letter-spacing:-.03em;line-height:1.05}
.suradnja__koraci p{color:var(--t-svj-2);line-height:1.45}
.suradnja__zima{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.25rem;margin-top:clamp(3rem,6vw,5rem);padding:1.5rem 1.75rem;border:1px solid rgba(226,196,99,.35);border-radius:var(--r);font-size:clamp(1.25rem,1rem + .6vw,1.625rem);line-height:1.3;background:linear-gradient(90deg,rgba(226,196,99,.08),transparent 70%)}
.suradnja__zima .mono{color:var(--zlato)}

/* ══ Radovi (popis) ═════════════════════════════════════════════════════ */
.radovi{position:relative;background:var(--papir);color:var(--t-tam);padding:clamp(4.5rem,8vw,8rem) 0;border-radius:var(--r)}
.radovi .velik em{color:var(--t-tam-2)}
.radovi__glava{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.radovi__glava .mono{color:var(--t-tam-2)}
.list__red{display:grid;grid-template-columns:minmax(0,.45fr) minmax(0,1.2fr) minmax(0,1fr);gap:1rem;align-items:center}
.list__red--glava{padding-bottom:.875rem;border-bottom:1px solid var(--linija-t);color:var(--t-tam-2)}
.list__red--glava span:last-child,.list__pr{text-align:right}
.list__stavka{position:relative;min-height:3.75rem;padding:.75rem 0;border-bottom:1px solid var(--linija-t);text-decoration:none;font-size:1.25rem;transition:padding .5s var(--ease)}
.list__stavka::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--t-tam);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.list__stavka:hover::before,.list__stavka:focus-visible::before{transform:scaleX(1)}
.list__stavka:hover{padding-left:.75rem}
.list__stavka b{font-weight:400;letter-spacing:-.01em}
.list__br,.list__pr{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--t-tam-2)}
.list__stavka img{display:none}
.radovi__dno{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-top:clamp(2rem,4vw,3.5rem)}
.radovi__dno p{max-width:28rem;color:var(--t-tam-2)}
.lebdi{position:fixed;left:0;top:0;z-index:30;width:clamp(13rem,18vw,20rem);aspect-ratio:4/5;border-radius:.5rem;overflow:hidden;pointer-events:none;opacity:0;scale:.8;translate:-50% -50%;transition:opacity .3s,scale .5s var(--ease);box-shadow:0 1.5rem 3.5rem rgba(0,0,0,.3)}
.lebdi.je-aktivan{opacity:1;scale:1}
.lebdi img{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:none),(max-width:900px){
  .lebdi{display:none}
  .list__red{grid-template-columns:4rem minmax(0,1fr)}
  .list__red--glava{display:none}
  .list__stavka{grid-template-rows:auto auto;gap:.125rem 1rem}
  .list__stavka img{display:block;grid-row:1/3;width:4rem;aspect-ratio:1;object-fit:cover;border-radius:.375rem}
  .list__br{display:none}
  .list__stavka b{align-self:end;font-size:1.125rem}
  .list__pr{text-align:left;align-self:start}
}

/* ══ Upit ═══════════════════════════════════════════════════════════════ */
.upit{padding:clamp(5rem,9vw,8rem) 0;scroll-margin-top:0}
.upit__glava{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:2rem;align-items:end;margin-bottom:clamp(2rem,4vw,3.5rem)}
.upit__naslov{font-weight:300;font-size:clamp(3.25rem,1.5rem + 5.4vw,7rem);letter-spacing:-.05em;line-height:.9}
.upit__naslov em{color:var(--zlato)}
.upit__glava p{color:var(--t-svj-2);margin-bottom:1.5rem}
.upit__tel{display:grid;gap:.375rem;width:fit-content;font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);letter-spacing:-.03em;line-height:1;text-decoration:none;padding-bottom:.375rem;border-bottom:1px solid var(--zlato)}
.upit__tel .mono{color:var(--t-svj-2)}
.upit__tel:hover{color:var(--zlato)}
.upit__ploca{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);border:1px solid var(--linija);border-radius:var(--r);background:var(--crna-2);overflow:hidden}
.sazetak{display:flex;flex-direction:column;gap:1.75rem;padding:clamp(1.5rem,3vw,2.75rem);border-right:1px solid var(--linija);background:linear-gradient(180deg,rgba(226,196,99,.05),transparent 60%)}
.sazetak__naslov{font-weight:300;font-style:italic;font-size:clamp(1.75rem,1.3rem + 1.2vw,2.5rem);letter-spacing:-.03em}
.sazetak dl{display:grid}
.sazetak dl div{display:grid;gap:.25rem;padding:1rem 0;border-top:1px solid var(--linija)}
.sazetak dt{font-size:.9375rem;color:var(--t-svj-2)}
.sazetak dd{font-size:1.3125rem;color:#8f8b81;transition:color .4s}
.sazetak div.je-popunjen dd{color:var(--t-svj)}
.sazetak div.je-popunjen dd::before{content:"";display:inline-block;width:.4375rem;height:.4375rem;margin:0 .625rem .1875rem 0;border-radius:50%;background:var(--zlato);vertical-align:middle}
.sazetak__napomena{margin-top:auto;font-size:1rem;color:var(--t-svj-2)}
.koraci{position:relative;padding:clamp(1.5rem,3vw,2.75rem);min-width:0}
.koraci__vrh{display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem;color:var(--t-svj-2)}
.koraci__crte{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.375rem}
.koraci__crte i{height:2px;border-radius:2px;background:var(--crna-3);transition:background .5s var(--ease)}
.koraci__crte i.je-gotov{background:var(--zlato)}
.korak{margin:0;padding:0;border:0;min-width:0;display:grid;gap:.5rem}
.korak legend{float:left;width:100%;margin-bottom:1.25rem;padding:0;font-weight:300;font-size:clamp(1.875rem,1.3rem + 1.6vw,2.75rem);letter-spacing:-.035em;line-height:1.05}
.opc{position:relative;display:flex;align-items:center;gap:1rem;min-height:4rem;padding:.75rem 1.125rem;border:1px solid var(--linija);border-radius:.75rem;cursor:pointer;transition:border-color .3s,background .3s,padding .4s var(--ease)}
.opc input{position:absolute;opacity:0;width:1px;height:1px}
.opc__t{display:grid;gap:.125rem;flex:1;min-width:0}
.opc__t span{font-size:1.25rem;line-height:1.25}
.opc__t small{font-size:1rem;color:var(--t-svj-2)}
.opc .ik{color:var(--t-svj-2);transition:transform .45s var(--ease),color .3s}
.opc:hover{border-color:rgba(239,233,220,.35);padding-left:1.5rem}
.opc:hover .ik{transform:translateX(.3rem);color:var(--zlato)}
.opc:has(input:checked){border-color:var(--zlato);background:rgba(226,196,99,.07)}
.opc:has(input:focus-visible){outline:2px solid var(--zlato);outline-offset:2px}
.polja{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.polje{display:grid;gap:.375rem}
.polje--puno{grid-column:1/-1}
.polje>span{font-size:.9375rem;color:var(--t-svj-2)}
.polje>span i{font-style:italic;opacity:.85}
.polje input,.polje textarea{width:100%;min-height:3.25rem;padding:.75rem 1rem;border:1px solid var(--linija);border-radius:.625rem;background:var(--crna);color:var(--t-svj);font:inherit;font-size:1.125rem;caret-color:var(--zlato);resize:vertical}
.polje input::placeholder{color:#8f8b81}
.polje input:focus,.polje textarea:focus{outline:none;border-color:var(--zlato)}
.privola{display:flex;gap:.75rem;align-items:flex-start;margin:1rem 0 .5rem;font-size:1rem;line-height:1.45;color:var(--t-svj-2);cursor:pointer}
.privola input{flex:none;width:1.25rem;height:1.25rem;margin:.15rem 0 0;accent-color:var(--zlato)}
.greska{color:#f0a58f;font-size:1rem}
.natrag{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;margin-top:.75rem;padding:0;border:0;background:none;color:var(--t-svj-2);font:inherit;font-size:1rem;cursor:pointer}
.natrag:hover{color:var(--t-svj)}
.koraci.je-aktivan .korak{display:none}
.koraci.je-aktivan .korak.je-trenutni{display:grid;animation:korak .55s var(--ease) both}
@keyframes korak{from{opacity:0;transform:translateX(1rem)}}
.koraci:not(.je-aktivan) .korak+.korak{margin-top:2.5rem}
.upit--kontakt{padding-top:0}

/* ══ Podstranice: zaglavlje ═════════════════════════════════════════════ */
.glava{position:relative;overflow:hidden;padding-bottom:clamp(4rem,8vw,7rem)}
.glava .raster{inset:-10% 0 auto 30%;height:120%}
.glava__in{position:relative;padding-top:clamp(4rem,9vw,8rem)}
.glava__naslov{font-weight:300;font-size:clamp(3.5rem,1.2rem + 8vw,10rem);letter-spacing:-.055em;line-height:.88}
.glava__naslov em{color:var(--zlato)}
.glava__uvod{max-width:34rem;margin:1.75rem 0 2.25rem;font-size:clamp(1.25rem,1.05rem + .5vw,1.5rem);line-height:1.4;color:#d4cdbd}
.glava__uvod a{text-decoration-color:var(--zlato)}
.glava--puna{min-height:100svh;display:grid;grid-template-rows:auto 1fr}
.glava--puna .glava__in{align-self:center;padding-top:0}
.glava__tel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;max-width:40rem;padding:1.25rem 0;border-block:1px solid var(--linija);text-decoration:none;font-size:clamp(2.25rem,1.4rem + 3vw,4rem);letter-spacing:-.035em;line-height:1}

/* Usluge */
.usluge{background:var(--papir);color:var(--t-tam);padding:clamp(4rem,8vw,7rem) 0;border-radius:var(--r) var(--r) 0 0}
.usluga{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5.5rem);align-items:center;scroll-margin-top:2rem}
.usluga+.usluga{margin-top:clamp(4rem,8vw,7rem)}
.usluga--obrnuto .usluga__slika{order:2}
.usluga__slika{aspect-ratio:4/5;border-radius:.75rem;overflow:hidden;background:var(--papir-2)}
.usluga__slika picture,.usluga__slika img{width:100%;height:100%;object-fit:cover}
#terase .usluga__slika img{object-position:50% 38%}
.usluga__tekst .mono{color:var(--t-tam-2);margin-bottom:1rem}
.usluga__tekst h2{font-weight:300;font-size:clamp(2.75rem,1.4rem + 3.6vw,5.5rem);letter-spacing:-.045em;line-height:.95;margin-bottom:1.5rem}
.usluga__tekst h2 em{color:#8a6a16}
.usluga__tekst>p:not(.mono){max-width:30rem;margin-bottom:1.5rem;color:var(--t-tam-2)}
.usluge .kat__za li{border-color:var(--linija-t);color:var(--t-tam-2)}
.presjek--staticni{padding:clamp(3rem,6vw,5rem) 0}

/* Projekti: galerija */
.galerija-sek{background:var(--papir);color:var(--t-tam);padding:clamp(3rem,6vw,5rem) 0 clamp(4rem,8vw,7rem);border-radius:var(--r) var(--r) 0 0}
.filteri{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:2rem}
.cip{min-height:2.75rem;padding:0 1.125rem;border:1px solid var(--linija-t);border-radius:999rem;background:none;color:var(--t-tam);font:400 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.cip:hover{border-color:var(--t-tam)}
.cip[aria-pressed="true"]{background:var(--t-tam);color:var(--papir);border-color:var(--t-tam)}
.filteri__broj{margin-left:auto;color:var(--t-tam-2)}
.galerija{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.galerija__st.je-sakriven{display:none}
.galerija__gumb{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:zoom-in;font:inherit}
.galerija__gumb picture{aspect-ratio:4/5;border-radius:.625rem;overflow:hidden;background:var(--papir-2)}
.galerija__gumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.galerija__gumb:hover img{transform:scale(1.04)}
.galerija__natpis{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding-top:.75rem}
.galerija__natpis b{font-weight:400;font-size:1.25rem}
.galerija__natpis .mono{color:var(--t-tam-2)}
.lightbox{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:clamp(1rem,4vw,3rem);border:0;background:rgba(17,17,16,.96);color:var(--t-svj)}
.lightbox[open]{display:grid;place-items:center}
.lightbox::backdrop{background:rgba(17,17,16,.6)}
.lightbox figure{display:grid;gap:1rem;justify-items:center;max-width:min(80rem,100%)}
.lightbox img{max-width:100%;max-height:78svh;width:auto;height:auto;border-radius:.5rem}
.lightbox figcaption{color:var(--t-svj-2)}
.lb-gumb{position:absolute;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;border:1px solid var(--linija);background:rgba(26,26,24,.8);color:var(--t-svj);cursor:pointer}
.lb-gumb:hover{border-color:var(--zlato);color:var(--zlato)}
.lb-gumb--x{top:1rem;right:1rem}
.lb-gumb--l{left:1rem;top:50%;translate:0 -50%}
.lb-gumb--d{right:1rem;top:50%;translate:0 -50%}

/* O nama */
.onama{background:var(--papir);color:var(--t-tam);padding:clamp(4rem,8vw,7rem) 0;border-radius:var(--r) var(--r) 0 0}
.onama__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.onama__tekst h2{font-weight:300;font-size:clamp(2.5rem,1.3rem + 3.6vw,5rem);letter-spacing:-.045em;line-height:.95;margin-bottom:1.5rem}
.onama__tekst h2 em{color:#8a6a16}
.onama__tekst>p{max-width:30rem;color:var(--t-tam-2);margin-bottom:2rem}
.onama__popis{list-style:none;margin:0;padding:0;border-top:1px solid var(--linija-t)}
.onama__popis li{display:flex;gap:1.25rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--linija-t);font-size:1.25rem}
.onama__popis .mono{color:var(--t-tam-2)}
.onama__foto{aspect-ratio:4/5;border-radius:.75rem;overflow:hidden}
.onama__foto picture,.onama__foto img{width:100%;height:100%;object-fit:cover}
.onama-foto{padding:clamp(4rem,8vw,7rem) 0}
.onama-foto__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.onama-foto figure picture{aspect-ratio:4/5;border-radius:.75rem;overflow:hidden}
.onama-foto img{width:100%;height:100%;object-fit:cover}
.onama-foto figcaption{margin-top:.875rem;color:var(--t-svj-2)}

/* Kontakt: dolazak i karta */
.dolazak{background:var(--papir);color:var(--t-tam);padding:.5rem;border-radius:var(--r) var(--r) 0 0}
.dolazak__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);max-width:none;padding:0}
.dolazak__tekst{display:grid;align-content:space-between;gap:3rem;padding:clamp(2.5rem,6vw,6rem) 0 clamp(1.5rem,3vw,3rem) clamp(1rem,4vw,4.5rem)}
.dolazak__tekst h2{font-weight:300;font-size:clamp(2.5rem,1.3rem + 3.6vw,5rem);letter-spacing:-.045em;line-height:.95}
.dolazak__tekst h2 em{color:#8a6a16}
.dolazak dl div{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);align-items:baseline;gap:1rem;padding:1.125rem 0;border-top:1px solid var(--linija-t)}
.dolazak dt{font-size:1rem;color:var(--t-tam-2)}
.dolazak dd{font-size:clamp(1.375rem,1.1rem + .9vw,2rem);letter-spacing:-.02em;line-height:1.15;overflow-wrap:anywhere}
.dolazak dd a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.dolazak dd a:hover{background-size:100% 1px}
.karta{position:relative;min-height:clamp(26rem,60svh,40rem);border-radius:var(--r);overflow:hidden;background:#141412;color:var(--t-svj)}
.karta__mramor{position:absolute;inset:0}
.karta__mramor img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;transform:scale(-1,1);filter:brightness(.7) saturate(.9)}
.karta__zamjena{position:relative;min-height:inherit;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:1.25rem;padding:clamp(1.75rem,4vw,3.5rem)}
.karta__pin{width:2.5rem;height:2.5rem;margin-bottom:auto;fill:none;stroke:var(--zlato);stroke-width:1.4}
.karta__adresa{font-weight:300;font-size:clamp(2rem,1.2rem + 2.4vw,3.75rem);letter-spacing:-.04em;line-height:1}
.karta__napomena{max-width:24rem;font-size:1rem;color:#bdb8ad}
.karta iframe{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;filter:grayscale(.9) contrast(1.05)}

/* Poziv prije podnožja */
.poziv{background:var(--papir);color:var(--t-tam);padding:clamp(4rem,8vw,7rem) 0;border-top:1px solid var(--linija-t)}
.usluge+.presjek+.poziv,.onama-foto+.poziv{border-radius:var(--r) var(--r) 0 0;border-top:0}
.poziv__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem;align-items:end}
.poziv__naslov{font-weight:300;font-size:clamp(3rem,1.4rem + 5.4vw,7rem);letter-spacing:-.05em;line-height:.9}
.poziv__naslov em{color:#8a6a16}
.poziv__desno p{max-width:26rem;margin-bottom:1.75rem;color:var(--t-tam-2)}

/* Pravne stranice */
.pravno-sek{background:var(--papir);color:var(--t-tam);padding:clamp(3rem,6vw,5rem) 0 clamp(4rem,8vw,7rem);border-radius:var(--r) var(--r) 0 0}
.pravno{max-width:48rem}
.pravno__datum{color:var(--t-tam-2);margin-bottom:2rem}
.pravno h2{font-weight:400;font-size:clamp(1.625rem,1.3rem + .9vw,2.125rem);letter-spacing:-.025em;margin:2.5rem 0 .75rem}
.pravno p,.pravno li{line-height:1.6;color:#3d3a34}
.pravno p+p{margin-top:.75rem}
.pravno ul{padding-left:1.25rem;margin:.75rem 0}
.pravno li+li{margin-top:.5rem}
.pravno a{text-decoration-color:#8a6a16}
.pravno code{font-family:var(--mono);font-size:.85em}
.pravno table{width:100%;border-collapse:collapse;font-size:1rem;margin:.5rem 0 1.25rem}
.pravno th,.pravno td{text-align:left;padding:.75rem;border-bottom:1px solid var(--papir-3);vertical-align:top}
.pravno th{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;font-weight:400;color:var(--t-tam-2)}
.veza-gumb{display:inline;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.veza-gumb--podvuceno{text-decoration:underline;text-decoration-color:#8a6a16}
@media (max-width:600px){.pravno table,.pravno tbody,.pravno tr,.pravno td{display:block}.pravno thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.pravno tbody th{display:none}.pravno tr{border:1px solid var(--papir-3);border-radius:.75rem;padding:.25rem .875rem;margin-bottom:.5rem}.pravno td{display:grid;grid-template-columns:minmax(0,5.5rem) minmax(0,1fr);gap:.75rem;padding:.625rem 0}.pravno td::before{content:attr(data-l);font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t-tam-2)}.pravno tr td:last-child{border-bottom:0}}

/* ══ Podnožje ═══════════════════════════════════════════════════════════ */
.kraj{background:var(--papir);color:var(--t-tam);padding:clamp(4rem,7vw,6rem) 0 7rem;border-top:1px solid var(--linija-t)}
.str-naslovnica .kraj{border-radius:var(--r) var(--r) 0 0;border-top:0}
.kraj__stupci{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.kraj__stupci .mono{color:var(--t-tam-2);margin-bottom:.75rem}
.kraj__stupci p:not(.mono){font-size:1.1875rem;line-height:1.7}
.kraj__stupci a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease);overflow-wrap:anywhere}
.kraj__stupci a:hover{background-size:100% 1px}
.kraj__ime{margin:clamp(3rem,6vw,5rem) 0 1.5rem;font-weight:300;font-size:calc((min(100vw,var(--wrap)) - 2 * var(--gutter)) / 6.6);letter-spacing:-.06em;line-height:.85;white-space:nowrap}
.kraj__ime span{color:var(--t-tam-2)}
.kraj__dno{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;padding-top:1.25rem;border-top:1px solid var(--linija-t);font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t-tam-2)}
.kraj__dno ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 1.25rem}
.kraj__dno a,.kraj__dno .veza-gumb{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none;color:var(--t-tam);font:inherit;letter-spacing:inherit;text-transform:inherit}
.kraj__dno a:hover,.kraj__dno .veza-gumb:hover{text-decoration:underline}
.kraj .wk-potpis{font-size:.75rem;white-space:normal;color:var(--t-tam-2);text-transform:none}
.kraj .wk-potpis a.winkla{font-size:.75rem;color:var(--t-tam)}

/* ══ Plutajući izbornik na dnu ══════════════════════════════════════════ */
.pn{position:fixed;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;gap:.25rem;padding:.375rem;border-radius:999rem;background:rgba(26,26,24,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(239,233,220,.1);box-shadow:0 1rem 2.5rem rgba(0,0,0,.35);transform:translateX(-50%);white-space:nowrap;transition:opacity .3s}
.pn__znak{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;--logo-crna:var(--t-svj);--logo-siva:#77756e}
.pn__svg{width:1.25rem;height:1.5rem}
.pn__znak:hover{background:rgba(239,233,220,.08)}
.pn__meni{position:relative}
.pn__gumb{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1.125rem;border:0;border-radius:999rem;background:none;color:var(--t-svj);font:400 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.pn__gumb .ik{width:.875rem;height:.875rem;transition:transform .35s var(--ease)}
.pn__gumb[aria-expanded="true"] .ik{transform:rotate(180deg)}
.pn__gumb:hover{background:rgba(239,233,220,.06)}
.pn__lista{position:absolute;left:50%;bottom:calc(100% + .875rem);min-width:14rem;margin:0;padding:.375rem;list-style:none;border-radius:1rem;background:rgba(26,26,24,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(239,233,220,.1);box-shadow:0 1rem 2.5rem rgba(0,0,0,.35);transform:translateX(-50%);animation:pn .3s var(--ease) both}
@keyframes pn{from{opacity:0;transform:translate(-50%,.5rem)}}
.pn__lista a{display:flex;align-items:center;gap:.625rem;min-height:2.75rem;padding:0 1rem;border-radius:.625rem;text-decoration:none;color:var(--t-svj);font-size:1.125rem}
.pn__lista a:hover{background:rgba(239,233,220,.08)}
.pn__lista a[aria-current="page"]{color:var(--zlato)}
.pn__tel{margin-top:.25rem;padding-top:.25rem;border-top:1px solid var(--linija)}
.pn__tel a{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em}
.pn__tel .ik{width:1rem;height:1rem;color:var(--zlato)}
.pn__cta{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1.125rem;border-radius:999rem;background:var(--zlato);color:var(--crna);font:400 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .3s}
.pn__cta .ik{width:.9375rem;height:.9375rem;transition:transform .35s var(--ease)}
.pn__cta:hover{background:var(--zlato-2)}
.pn__cta:hover .ik{transform:translateX(.2rem)}
body:has(.pk-traka.je-vidljiva) .pn{opacity:0;pointer-events:none}

/* ══ Prijelomi ══════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .kat__in{grid-template-columns:minmax(0,1fr)}
  .kat__izbornik{display:none}
}
@media (max-width:1000px){
  .upit__ploca{grid-template-columns:minmax(0,1fr)}
  .sazetak{border-right:0;border-bottom:1px solid var(--linija);gap:1rem;padding-bottom:1.25rem}
  .sazetak dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
  .sazetak dl div{padding:.75rem 0 0}
  .sazetak dd{font-size:1.0625rem}
  .sazetak__napomena{display:none}
  .galerija{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .vrh__oznaka,.vrh>i:nth-of-type(2){display:none}
  .vrh__logo span{display:none}
  .h__scena{min-height:20rem}
  .ploca,.h .ploca{--w:min(15rem,56vw)}
  .h__dno{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .h__jamstva{text-align:left}
  .kat__st{grid-template-columns:minmax(0,1fr)}
  .kat__fotke--hrpa{min-height:0;aspect-ratio:5/4}
  .kat__fotke--hrpa .kat__foto{width:52%}
  .suradnja__koraci{grid-template-columns:minmax(0,1fr)}
  .suradnja__koraci li+li{padding-left:0;border-left:0;border-top:1px solid var(--linija);margin-top:1.5rem}
  .upit__glava{grid-template-columns:minmax(0,1fr);align-items:start}
  .usluga,.onama__in,.dolazak__in,.poziv__in{grid-template-columns:minmax(0,1fr)}
  .usluga--obrnuto .usluga__slika{order:0}
  .usluga__slika{aspect-ratio:4/3}
  .dolazak__tekst{padding:2.5rem .75rem 0}
  .dolazak dl div{grid-template-columns:minmax(0,1fr);gap:.25rem}
  .kraj__stupci{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .polja{grid-template-columns:minmax(0,1fr)}
  .sazetak dl{grid-template-columns:minmax(0,1fr);gap:0}
  .sazetak dl div{grid-template-columns:minmax(0,6rem) minmax(0,1fr);align-items:baseline;padding:.5rem 0}
  .galerija{grid-template-columns:minmax(0,1fr)}
  .onama-foto__in{grid-template-columns:minmax(0,1fr)}
  .kraj__stupci{grid-template-columns:minmax(0,1fr)}
  .gumbi .gumb{flex:1 1 100%}
  .glava__tel .gumb{flex:none}
  .filteri__broj{width:100%;margin-left:0}
}
@media (max-width:420px){
  .pn__gumb{padding:0 .75rem}
  .pn__cta{padding:0 .875rem}
}
@media (max-width:359px){
  .pn__gumb{font-size:0;gap:0}
  .pn__gumb .ik{width:1.125rem;height:1.125rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ══ Kolačići: traka i postavke u izgledu stranice, u rem (raste s ekranom) ══ */
html body .pk-traka,html body .pk-prozor{font-family:var(--serif)}
html body .pk-traka{left:var(--rub);right:auto;bottom:max(var(--rub),env(safe-area-inset-bottom));width:min(31rem,calc(100% - var(--rub) * 2));transform:translateY(calc(100% + 2.5rem));background:var(--mramor);color:var(--tam-tekst);border:1px solid rgba(19,19,17,.08);border-radius:var(--r);box-shadow:0 1.5rem 3.5rem rgba(0,0,0,.35)}
html body .pk-traka.je-vidljiva{transform:none}
html body .pk-traka__unutra{flex-direction:column;align-items:stretch;gap:1.25rem;padding:1.5rem 1.5rem 1.25rem}
html body .pk-traka__naslov{margin:0 0 .5rem!important;font-size:1.5rem;font-weight:400;letter-spacing:-.02em;line-height:1.1;color:var(--tam-tekst)}
html body .pk-traka__opis{margin:0 0 .75rem!important;font-size:1.0625rem;line-height:1.45;color:var(--tam-tekst-2)}
html body .pk-traka__veze{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tam-tekst-2)}
html body .pk-traka__veze a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--tam-tekst);text-underline-offset:.25em}
html body .pk-traka__gumbi{flex-direction:row;width:auto;gap:.5rem}
html body .pk-gumb{flex:1 1 0;min-height:2.75rem;padding:0 1.25rem;border-radius:999rem;font:400 .75rem/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
html body .pk-gumb--pun{background:var(--tamna);color:var(--mramor)}
html body .pk-gumb--pun:hover{background:#2e2e2a}
html body .pk-gumb--prazan{border-color:rgba(19,19,17,.25);color:var(--tam-tekst)}
html body .pk-gumb--prazan:hover{border-color:var(--tamna);background:transparent}
html body .pk-gumb:focus-visible,html body .pk-sklopka input:focus-visible+.pk-sklopka__traka{outline:2px solid var(--zlato);outline-offset:2px}
/* traka s gumbima Nazovi / Pošalji upit se skloni dok je obavijest otvorena */

html body .pk-prozor{padding:var(--rub)}
html body .pk-prozor__zastor{background:rgba(19,19,17,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
html body .pk-prozor__ploca{width:min(38rem,100%);max-height:min(86svh,48rem);background:var(--mramor);color:var(--tam-tekst);border-radius:var(--r);box-shadow:0 2rem 5rem rgba(0,0,0,.4)}
html body .pk-prozor__vrh{gap:1rem;padding:1.25rem 1.5rem;border-bottom-color:var(--mramor-3)}
html body .pk-prozor__naslov{font-size:1.75rem;font-weight:400;letter-spacing:-.02em;color:var(--tam-tekst)}
html body .pk-prozor__x{display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border-radius:50%;color:var(--tam-tekst-2)}
html body .pk-prozor__x svg{width:1.25rem;height:1.25rem}
html body .pk-prozor__x:hover{color:var(--tam-tekst);background:rgba(19,19,17,.06)}
html body .pk-prozor__tijelo{padding:.5rem 1.5rem .25rem}
html body .pk-vrsta{padding:1.125rem 0;border-bottom-color:var(--mramor-3)}
html body .pk-vrsta__vrh{gap:1rem;margin-bottom:.5rem}
html body .pk-vrsta__ime{font-size:1.25rem;font-weight:400;color:var(--tam-tekst)}
html body .pk-vrsta__fiksno{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tam-tekst-2)}
html body .pk-vrsta__opis{font-size:1rem;line-height:1.5;color:var(--tam-tekst-2)}
html body .pk-vrsta__opis code{font-family:var(--mono);font-size:.8125rem;padding:.0625rem .3125rem;border-radius:.3125rem;background:var(--mramor-2)}
html body .pk-sklopka__traka{width:2.875rem;height:1.625rem;background:var(--mramor-3)}
html body .pk-sklopka__traka::after{top:.1875rem;left:.1875rem;width:1.25rem;height:1.25rem}
html body .pk-sklopka input:checked+.pk-sklopka__traka{background:var(--tamna)}
html body .pk-sklopka input:checked+.pk-sklopka__traka::after{transform:translateX(1.25rem)}
html body .pk-prozor__dno{gap:.5rem;padding:1.125rem 1.5rem;border-top-color:var(--mramor-3)}
@media (max-width:600px){
  html body .pk-traka{left:.5rem;width:calc(100% - 1rem);bottom:max(.5rem,env(safe-area-inset-bottom))}
  html body .pk-traka__unutra{padding:1.25rem 1.25rem 1rem;gap:1rem}
  html body .pk-traka__naslov{font-size:1.3125rem}
  html body .pk-traka__opis{font-size:1rem}
}
@media (max-width:359px){html body .pk-traka__gumbi{flex-direction:column}}
html body .pk-gumb,html body .pk-traka__veze a{min-height:max(2.75rem,44px)}
.skriveno input{width:1px}
@media (max-width:900px){.h__scena{min-height:27rem}.h .ploca{--w:min(12rem,46vw)}.h__rijec{font-size:clamp(4.5rem,1rem + 17vw,9rem)}}

/* Tekstovi po uzoru na MB Stakor */
.h__bez{display:flex;align-items:center;gap:.625rem;color:var(--t-svj-2);align-self:end}
.h__bez::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:var(--zlato)}
.kat__kratko{max-width:26rem;margin-bottom:.5rem;font-size:clamp(1.25rem,1.05rem + .5vw,1.5rem);line-height:1.3;color:var(--t-svj)}
.kat__idealno{max-width:26rem;margin-bottom:2rem;color:var(--t-svj-2)}
.usluga__idealno{margin:-.5rem 0 2rem;font-style:italic;color:var(--t-tam)}
.korak__oznaka{color:var(--t-svj-2);margin-bottom:.5rem}
.korak .polje{margin-top:.5rem}
.korak .gumbi{margin-top:.5rem}
.korak>.gumb--puni{margin-top:.5rem}
.kraj__opis{max-width:40rem;margin-bottom:clamp(2.5rem,5vw,4rem);font-weight:300;font-size:clamp(1.75rem,1.2rem + 1.8vw,3rem);letter-spacing:-.03em;line-height:1.1}

/* ══ Pojednostavljeno (kostur kao MB Stakor) ════════════════════════════ */
.vrh{justify-content:space-between;padding:var(--rub) var(--gutter)}
.vrh__logo span{display:inline}
@media (max-width:420px){.vrh__logo span{display:none}}
.h{grid-template-rows:auto minmax(0,1fr) auto}
.h__dno{flex-direction:column;align-items:center;text-align:center;gap:1.75rem;padding-top:2rem}
.h__naslov{max-width:34rem;margin:0}
/* podovi */
.pod{padding:clamp(4rem,8vw,7rem) 0 clamp(5rem,9vw,8rem);text-align:center;overflow-x:clip}
.pod__ime{font-weight:300;font-size:clamp(3rem,1.4rem + 5vw,6.5rem);letter-spacing:-.045em;line-height:.95;margin-bottom:1.25rem}
.pod__ime em{color:var(--zlato)}
.pod__tekst p{max-width:32rem;margin-inline:auto;font-size:clamp(1.125rem,1rem + .3vw,1.3125rem);line-height:1.5;color:var(--t-svj-2)}
.pod__fotke{position:relative;height:clamp(22rem,36vw,34rem);margin-top:clamp(2.5rem,5vw,4rem)}
.pod__foto{position:absolute;left:50%;top:50%;width:clamp(14rem,24vw,23rem);aspect-ratio:3/4;border-radius:.875rem;overflow:hidden;background:var(--crna-2);box-shadow:0 1.5rem 3rem rgba(0,0,0,.5);z-index:calc(5 - var(--a));transform:translate(-50%,-50%) translateX(calc(var(--o) * 72%)) rotate(calc(var(--o) * 4deg)) scale(calc(1 - var(--a) * .08));transition:transform .8s var(--ease)}
.pod__foto picture,.pod__foto img{width:100%;height:100%;object-fit:cover}
.pod__fotke--hrpa:hover .pod__foto{transform:translate(-50%,-50%) translateX(calc(var(--o) * 84%)) rotate(calc(var(--o) * 5deg)) scale(calc(1 - var(--a) * .06))}
.pod__fotke--jedna .pod__foto{width:clamp(16rem,30vw,27rem);aspect-ratio:4/5}
.pod__fotke--jedna .pod__foto img{object-position:50% 38%}
#terase .pod__fotke{height:clamp(26rem,42vw,38rem)}
.pod__vise{position:absolute;left:50%;bottom:-1.75rem;z-index:6;display:grid;place-items:center;width:5rem;height:5rem;border-radius:50%;background:var(--zlato);color:var(--crna);font:400 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transform:translateX(-50%);box-shadow:0 .75rem 1.75rem rgba(0,0,0,.4);transition:background .3s,transform .4s var(--ease)}
.pod__vise:hover{background:var(--zlato-2);transform:translateX(-50%) scale(1.06)}
@media (max-width:600px){.pod__foto{width:52vw}.pod__fotke{height:76vw}.pod__fotke--jedna .pod__foto{width:64vw}#terase .pod__fotke{height:92vw}}
/* upit u jednom stupcu */
.upit__in{max-width:44rem}
.upit .upit__naslov{text-align:center;margin-bottom:clamp(1.75rem,4vw,3rem)}
.upit__ploca{grid-template-columns:minmax(0,1fr)}
.upit__dno{display:grid;gap:.75rem;justify-items:center;text-align:center;padding:1.75rem 1.5rem;border-top:1px solid var(--linija)}
.upit__dno .mono{color:var(--zlato)}
.upit__dno p:last-child{line-height:1.7}
.upit__dno a{text-decoration:none}
.upit__dno a:hover{color:var(--zlato)}
/* podnožje: kratko i centrirano */
.kraj{padding:clamp(3.5rem,7vw,5.5rem) 0 7.5rem;text-align:center}
.kraj__in{display:grid;justify-items:center;gap:1.5rem}
.kraj__logo{display:inline-flex;align-items:center;gap:.75rem;text-decoration:none;font:400 .8125rem/1 var(--mono);letter-spacing:.3em;--logo-crna:var(--t-tam);--logo-siva:#8a8780}
.kraj__znak{width:1.75rem;height:2.0625rem}
.kraj .kraj__opis{max-width:34rem;margin:0;font-size:clamp(1.375rem,1.1rem + 1vw,2rem)}
.kraj__kontakt{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.75rem;font-size:1.25rem}
.kraj__kontakt a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none;overflow-wrap:anywhere}
.kraj__kontakt a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.kraj__pravno{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.25rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase}
.kraj__pravno a,.kraj__pravno .veza-gumb{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none;color:var(--t-tam-2);font:inherit;letter-spacing:inherit;text-transform:inherit}
.kraj__pravno a:hover,.kraj__pravno .veza-gumb:hover{color:var(--t-tam)}
.kraj p.kraj__dno{display:block;padding:0;border:0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--t-tam-2)}
/* podstranice */
.glava__in>.gumb{margin-top:.5rem}
@media (min-width:901px){.h .ploca{--w:min(17rem,38vw)}.h .scena{transform:translateY(9%)}}
@media (max-width:600px){.pod__foto{width:44vw;transform:translate(-50%,-50%) translateX(calc(var(--o) * 58%)) rotate(calc(var(--o) * 4deg)) scale(calc(1 - var(--a) * .08))}.pod__foto[style*="--a:2"]{display:none}.pod__fotke--jedna .pod__foto{width:64vw}.pod__fotke{height:70vw}}

/* ══════════════════════════════════════════════════════════════════════
   NASLOVNICA PO KOSTURU MB STAKORA (bočni izbornik, pozadina sa sjajem,
   hero koji blijedi, lepeza, podovi s trakom, upit u redovima, podnožje)
   ══════════════════════════════════════════════════════════════════════ */
.str-naslovnica{background:#0a0a09;--bok-w:16rem;--bok-r:1.25rem}
.pozadina{position:fixed;inset:0;z-index:0;background:#0a0a09 url(/img/pozadina-sjaj-2400.webp) center/cover no-repeat;pointer-events:none}
.kretanje .pozadina{animation:poz-ulaz 1.2s var(--ease) both}
@keyframes poz-ulaz{from{opacity:0;transform:translateX(6rem)}}
@media (max-width:600px){.pozadina{background-image:url(/img/pozadina-sjaj-900.webp)}}
.glavno{position:relative;z-index:1}
.sidro{position:absolute;top:0}

/* Zaglavlje (verzija 3): plutajuća kapsula s tankim zlatnim rubom.
   Na vrhu je prozirna, pri pomicanju dolje se skloni, pri pomicanju gore vrati. */
.zag{position:fixed;top:0;left:0;right:0;z-index:60;padding:1rem var(--gutter);pointer-events:none;transition:transform .6s var(--ease)}
.zag.je-skriven{transform:translateY(-130%)}
.zag__traka{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:var(--wrap);margin:0 auto;padding:.375rem .375rem .375rem 1.25rem;border:1px solid transparent;border-radius:999rem;transition:background .5s,border-color .5s,box-shadow .5s}
.zag__traka::before{content:"";position:absolute;left:14%;right:14%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(226,196,99,.6),transparent);opacity:0;transition:opacity .6s;pointer-events:none}
.zag.je-skrolano .zag__traka{background:rgba(14,14,13,.62);border-color:rgba(226,196,99,.14);box-shadow:0 1rem 2.5rem rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
.zag.je-skrolano .zag__traka::before{opacity:1}
.je-izb .zag .zag__traka{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.je-izb .zag .zag__traka::before{opacity:0}

.zag__logo{display:inline-flex;align-items:center;gap:.75rem;min-height:2.75rem;min-width:0;text-decoration:none;color:var(--t-svj);--logo-crna:var(--t-svj);--logo-siva:#77756e}
.zag__znak{width:1.75rem;height:2rem;flex:none}
.zag__ime{display:grid;gap:.375rem}
.zag__ime b{font:400 .875rem/1 var(--mono);letter-spacing:.28em}
.zag__ime small{font:400 .625rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:rgba(226,196,99,.75)}

.zag__veze{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);gap:.25rem;transition:opacity .3s}
.zag__veze a{position:relative;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1.125rem;text-decoration:none;font:400 .8125rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(239,233,220,.7);transition:color .3s}
.zag__veze a::after{content:"";position:absolute;left:1.125rem;right:1.125rem;bottom:.625rem;height:1px;background:var(--zlato);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.zag__veze a:hover,.zag__veze a:focus-visible{color:var(--t-svj)}
.zag__veze a:hover::after,.zag__veze a:focus-visible::after{transform:none}
@media (min-width:1240px){.zag__veze{display:flex}}
.je-izb .zag__veze{opacity:0;pointer-events:none}

.zag__desno{display:flex;align-items:center;gap:.5rem}
.zag__tel{display:inline-flex;align-items:center;gap:.625rem;min-height:2.75rem;padding:0 .75rem;text-decoration:none;font:400 .9375rem/1 var(--mono);letter-spacing:.06em;color:var(--t-svj);transition:color .3s}
.zag__tel .ik{width:1.0625rem;height:1.0625rem;color:var(--zlato)}
.zag__tel:hover{color:var(--zlato)}
/* Gumb: tri crte različite duljine (neravna podloga); na prelazak se izravnaju kao izliven pod, otvoren je X */
.zag__gumb{display:inline-flex;align-items:center;gap:.875rem;min-height:2.75rem;padding:0 0 0 .75rem;border:0;border-radius:999rem;background:none;color:var(--t-svj);font:400 .8125rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.zag__ik{position:relative;display:block;flex:none;width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(226,196,99,.45);background:rgba(226,196,99,.06);transition:background .4s var(--ease),border-color .4s}
.zag__ik i{position:absolute;right:calc(50% - .5625rem);height:1.5px;border-radius:1px;background:var(--zlato);transition:transform .5s var(--ease),width .5s var(--ease),top .5s var(--ease),opacity .3s,background .3s}
.zag__ik i:nth-child(1){top:calc(50% - .4375rem);width:1.125rem}
.zag__ik i:nth-child(2){top:calc(50% - .75px);width:.75rem}
.zag__ik i:nth-child(3){top:calc(50% + .4375rem - 1.5px);width:.4375rem}
.zag__gumb:hover .zag__ik,.zag__gumb:focus-visible .zag__ik{background:var(--zlato);border-color:var(--zlato)}
.zag__gumb:hover .zag__ik i,.zag__gumb:focus-visible .zag__ik i{width:1.125rem;background:#111110}
.zag__gumb[aria-expanded="true"] .zag__ik i{width:1.125rem}
.zag__gumb[aria-expanded="true"] .zag__ik i:nth-child(1){top:calc(50% - .75px);transform:rotate(45deg)}
.zag__gumb[aria-expanded="true"] .zag__ik i:nth-child(2){opacity:0;transform:scaleX(0)}
.zag__gumb[aria-expanded="true"] .zag__ik i:nth-child(3){top:calc(50% - .75px);transform:rotate(-45deg)}
@media (max-width:600px){
  .zag{padding:.625rem .75rem}
  .zag__traka{padding-left:.75rem}
  .zag__tel{width:2.75rem;padding:0;justify-content:center}
  .zag__tel span{display:none}
  .zag__desno{gap:.25rem}
  .zag__gumb{gap:.625rem;padding-left:.25rem}
}
.zag__ime b,.zag__ime small{white-space:nowrap}
@media (max-width:440px){.zag__ime small{display:none}.zag__ime b{letter-spacing:.2em}}
@media (max-width:374px){.zag__ime{display:none}}

/* Izbornik (verzija 3): tamni mramor koji se izlije odozgo; zlatna crta je rub tekućine */
.izb{position:fixed;inset:0;z-index:55;overflow-y:auto;overscroll-behavior:contain;color:var(--t-svj);background:radial-gradient(110% 70% at 85% 0%,rgba(226,196,99,.08),transparent 60%),linear-gradient(rgba(11,11,10,.84),rgba(11,11,10,.93)),url(/img/mramor-tamni-2400.webp) center/cover,#0b0b0a;animation:izlij .9s var(--ease-panel) both}
.izb.je-zatvara{animation:izlij-van .55s var(--ease-panel) both}
@keyframes izlij{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes izlij-van{from{clip-path:inset(0)}to{clip-path:inset(0 0 100% 0)}}
.izb__crta{position:fixed;left:0;right:0;top:0;z-index:2;height:1px;translate:0 -100%;background:linear-gradient(90deg,transparent,var(--zlato) 25%,#fff1bd 50%,var(--zlato) 75%,transparent);box-shadow:0 0 1.25rem rgba(226,196,99,.55);pointer-events:none;animation:crta-tece .9s var(--ease-panel) both}
@keyframes crta-tece{0%{top:0;opacity:1}80%{opacity:1}100%{top:100%;opacity:0}}
.izb.je-zatvara .izb__crta{animation:crta-natrag .55s var(--ease-panel) both}
@keyframes crta-natrag{0%{top:100%;opacity:0}20%{opacity:1}100%{top:0;opacity:1}}

.izb__in{position:relative;min-height:100%;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:2.5rem clamp(2rem,6vw,7rem);max-width:var(--wrap);margin:0 auto;padding:clamp(7rem,15vh,9rem) var(--gutter) max(1.5rem,env(safe-area-inset-bottom))}
.izb__glavno{align-self:center;min-width:0}
.izb__oznaka{display:flex;align-items:center;gap:.875rem;margin:0 0 1rem;font:400 .6875rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(226,196,99,.8)}
.izb__oznaka::after{content:"";flex:1;max-width:6rem;height:1px;background:linear-gradient(90deg,rgba(226,196,99,.5),transparent)}
.izb__lista{list-style:none;margin:0 0 clamp(2rem,6vh,3.5rem);padding:0;display:grid;justify-items:start;gap:clamp(.25rem,1.4vh,.875rem)}
.izb__lista li,.izb__mala li{animation:izb-ulaz .9s calc(.35s + var(--i) * .06s) var(--ease) both}
@keyframes izb-ulaz{from{opacity:0;transform:translateY(1.25rem);filter:blur(6px)}}
.str-naslovnica .izb .izb__lista a{position:relative;display:inline-flex;align-items:flex-start;gap:1rem;padding:.08em 0 .16em;text-decoration:none;font-size:clamp(2.25rem,min(1.2rem + 3.6vw,8.5svh),5.25rem);line-height:1;letter-spacing:-.025em;color:var(--t-svj);transition:color .35s,transform .6s var(--ease)}
.izb__br{padding-top:.55em;font:400 .6875rem/1 var(--mono);letter-spacing:.1em;color:var(--zlato)}
.izb__rijec{position:relative;display:block}
/* odraz riječi na sjajnom podu, kao naslov na vrhu */
.izb__rijec::after{content:attr(data-t);position:absolute;left:0;top:100%;margin-top:-.1em;white-space:nowrap;transform:scaleY(-1);opacity:0;pointer-events:none;-webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.42),transparent 60%);mask-image:linear-gradient(0deg,rgba(0,0,0,.42),transparent 60%);transition:opacity .5s var(--ease)}
@media (hover:hover){
  .izb__lista a:hover{transform:translateX(.75rem)}
  .izb__lista a:hover .izb__rijec::after{opacity:1}
  .izb__lista:hover a:not(:hover){color:rgba(239,233,220,.36)}
}
.izb__lista a:focus-visible .izb__rijec::after{opacity:1}
.izb__mala{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 2.25rem}
.izb__mala a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none;font-family:var(--grotesk);font-size:clamp(1.125rem,1rem + .4vw,1.375rem);color:rgba(239,233,220,.75);transition:color .3s}
.izb__mala a:hover,.izb__mala a:focus-visible{color:var(--zlato)}

.izb__fotke{position:relative;align-self:center;justify-self:end;width:100%;max-width:30rem;aspect-ratio:4/5;max-height:60svh;border-radius:1.25rem;overflow:hidden;background:var(--crna-2);outline:1px solid rgba(226,196,99,.18);outline-offset:-1px;-webkit-box-reflect:below .75rem linear-gradient(transparent 76%,rgba(255,255,255,.14));animation:izb-ulaz 1s .45s var(--ease) both}
.izb__fotke figure{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.05);transition:opacity .6s,transform 1.2s var(--ease)}
.izb__fotke figure.je-vidljiva{opacity:1;transform:none}
.izb__fotke picture,.izb__fotke img{width:100%;height:100%;object-fit:cover}

.izb__dno{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.25rem 3rem;padding-top:1.5rem;border-top:1px solid rgba(239,233,220,.1);animation:izb-ulaz .8s .6s var(--ease) both}
.izb__dno div{display:grid;gap:.25rem;min-width:0}
.izb__dno span{font:400 .625rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(239,233,220,.45)}
.izb__dno div a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none;font:400 .875rem/1.3 var(--mono);color:var(--t-svj);overflow-wrap:anywhere;transition:color .3s}
.izb__dno div a:hover{color:var(--zlato)}
.izb__dno p{margin:0;padding-block:.75rem;font:400 .875rem/1.3 var(--mono);color:var(--t-svj)}
.izb__upit{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:3.25rem;padding:0 1.5rem;border-radius:999rem;background:var(--zlato);color:#111110;text-decoration:none;font:500 .75rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:background .3s}
.izb__upit:hover{background:#efd57e}
.izb__upit .ik{width:1rem;height:1rem}
@media (max-width:900px){
  .izb__in{grid-template-columns:minmax(0,1fr);align-content:start;padding-top:6.5rem}
  .izb__fotke{display:none}
  .izb__glavno{align-self:start}
  .izb__dno{align-items:stretch}
  .izb__upit{margin-left:0;width:100%}
}
@media (max-width:600px){
  .str-naslovnica .izb .izb__lista a{font-size:clamp(1.75rem,9vw,2.5rem);gap:.625rem}
  .izb__dno{gap:.75rem 2rem}
}
@media (prefers-reduced-motion:reduce){
  .izb,.izb.je-zatvara,.izb__lista li,.izb__mala li,.izb__fotke,.izb__dno{animation:none}
  .izb__crta{display:none}
}


/* Razine: na desnom rubu, kao slojevi poda; pokazuju dio stranice na kojem ste */
.razine{position:fixed;right:var(--gutter);top:50%;z-index:40;display:none;flex-direction:column;align-items:flex-end;gap:.25rem;transform:translateY(-50%);transition:opacity .4s}
.razine a{display:flex;align-items:center;gap:.75rem;min-height:2.75rem;text-decoration:none;font:400 .6875rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(239,233,220,.45)}
.razine span{opacity:0;transform:translateX(.5rem);transition:opacity .3s,transform .4s var(--ease)}
.razine i{display:block;width:1.25rem;height:2px;border-radius:2px;background:rgba(239,233,220,.3);transition:width .5s var(--ease),background .3s}
.razine a:hover span,.razine a.je-aktivna span{opacity:1;transform:none}
.razine a.je-aktivna{color:var(--t-svj)}
.razine a.je-aktivna i{width:2.75rem;background:var(--zlato)}
.razine.je-skrivena{opacity:0;pointer-events:none}
@media (min-width:1100px){.razine{display:flex}}

/* Uvod: ostaje na mjestu, a sadržaj prelazi preko njega */
.uvod{position:sticky;top:0;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(6.5rem,15vh,9rem) var(--gutter) 2.5rem;transform-origin:50% 0}
@media (min-width:1100px){.uvod{padding-top:clamp(3.5rem,9vh,6rem)}}
.uvod__mjesto{position:relative;margin-bottom:1.75rem;padding:.3125rem .875rem;border-radius:999rem;background:radial-gradient(ellipse at center,rgba(30,28,22,.6),rgba(12,12,11,.9));font:400 .6875rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(239,233,220,.85);overflow:hidden}
.uvod__mjesto::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 50% 20%,rgba(226,196,99,.25),transparent 70%)}
.uvod__mjesto::after{content:"";position:absolute;left:0;right:0;top:0;height:50%;border:1px solid rgba(226,196,99,.4);border-bottom:0;border-radius:999rem 999rem 0 0}
.uvod__naslov{margin-bottom:1.25rem;font-style:italic;font-weight:300;font-size:clamp(3.25rem,1.6rem + 5.4vw,6.25rem);letter-spacing:-.03em;line-height:1.02;color:rgba(239,233,220,.92)}
.uvod__opis{max-width:34rem;margin-bottom:2.25rem;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.55;color:rgba(239,233,220,.62)}
.gumb-svj{display:inline-flex;align-items:center;min-height:2.875rem;padding:0 1.5rem;border-radius:999rem;background:#f3efe6;color:#111110;font-size:1.0625rem;text-decoration:none;box-shadow:0 0 .875rem rgba(255,255,255,.28);transition:transform .3s var(--ease),box-shadow .3s}
.gumb-svj:hover{transform:translateY(-.125rem);box-shadow:0 0 1.25rem rgba(255,255,255,.45),0 .5rem 1.5rem rgba(255,255,255,.15)}
.kretanje .uvod>*{animation:ulaz 1.1s var(--ease) both}
.kretanje .uvod>*:nth-child(2){animation-delay:.12s}
.kretanje .uvod>*:nth-child(3){animation-delay:.24s}
.kretanje .uvod>*:nth-child(4){animation-delay:.36s}

/* Lepeza: tri fotografije se slože u hrpu kad krene pomicanje */
.lepeza{position:relative;z-index:2;display:grid;place-items:center;height:clamp(34rem,42rem,48rem);margin-bottom:clamp(2rem,6vw,5rem)}
.lepeza__hrpa{position:relative;width:20.625rem;aspect-ratio:2/3}
.lepeza__k{position:absolute;inset:0;border-radius:1rem;overflow:hidden;background:var(--crna-2);box-shadow:-.75rem .75rem .75rem rgba(0,0,0,.2),.75rem .75rem .75rem rgba(0,0,0,.2);transition:transform .8s cubic-bezier(.4,0,.2,1)}
.lepeza__k picture,.lepeza__k img{width:100%;height:100%;object-fit:cover}
.lepeza__k--1{z-index:1;transform:translate(-45%,17%) rotate(-25deg)}
.lepeza__k--2{z-index:2;transform:translate(0,-2%) rotate(-15.5deg)}
.lepeza__k--3{z-index:3;transform:translate(60%,-12%) rotate(-5deg)}
.lepeza__hrpa.je-slozena .lepeza__k{transform:none}
@media (max-width:700px){
  .lepeza{height:clamp(24rem,108vw,34rem)}
  .lepeza__hrpa{width:46vw}
  .lepeza__k--1{transform:translate(-22%,12%) rotate(-20deg)}
  .lepeza__k--2{transform:translate(0,-2%) rotate(-12deg)}
  .lepeza__k--3{transform:translate(32%,-8%) rotate(-4deg)}
}
.str-naslovnica .fuge{z-index:2}

/* Podovi: naslov, dva retka, traka fotografija iza i velika fotografija u sredini */
.pod2{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:clamp(3rem,6vw,4.5rem) var(--gutter);overflow-x:clip}
.pod2__glava{position:relative;z-index:2;text-align:center;margin-bottom:2.25rem}
.pod2__ime{margin-bottom:.875rem;font-style:italic;font-weight:300;font-size:clamp(3rem,1.8rem + 4vw,4.5rem);letter-spacing:-.025em;line-height:1.05;color:rgba(239,233,220,.92)}
.pod2__glava p{max-width:34rem;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.6;color:rgba(239,233,220,.62)}
.pod2__glava strong{font-weight:500;color:rgba(239,233,220,.92)}
.pod2__scena{position:relative;width:100%;display:grid;place-items:center}
.traka{position:absolute;top:50%;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);z-index:1;height:26.5rem;transform:translateY(-50%);overflow:hidden;opacity:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);pointer-events:none}
.traka__put{display:flex;gap:.625rem;width:max-content;padding-right:.625rem;height:100%}
.kretanje .traka__put{animation:traka 44s linear infinite}
@keyframes traka{to{transform:translateX(-50%)}}
.traka__k{flex:none;width:17.75rem;height:100%;border-radius:.75rem;overflow:hidden}
.traka__k picture,.traka__k img{width:100%;height:100%;object-fit:cover}
.pod2__foto{position:relative;z-index:3;display:block;width:20.625rem;aspect-ratio:2/3;border-radius:1rem;overflow:hidden;background:var(--crna-2);transform:scale(var(--s,.9));box-shadow:-3rem 3rem 3rem rgba(0,0,0,.5),3rem 3rem 3rem rgba(0,0,0,.5),-.375rem .375rem .75rem rgba(0,0,0,.5)}
.pod2__foto picture,.pod2__foto img{width:100%;height:100%;object-fit:cover}
.pod2__foto img{transition:transform 1.2s var(--ease)}
.pod2__foto:hover img{transform:scale(1.05)}
#terase .pod2__foto img{object-position:50% 40%}
.vise{position:absolute;left:var(--mx,50%);top:var(--my,50%);z-index:2;display:grid;place-items:center;width:5rem;height:5rem;border-radius:50%;background:var(--zlato);color:#111110;font:500 .75rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;pointer-events:none;transform:translate(-50%,-50%) scale(0);transition:transform .45s var(--ease)}
.pod2__foto:focus-visible .vise{left:50%;top:50%;transform:translate(-50%,-50%) scale(1)}
@media (hover:hover) and (pointer:fine){
  .pod2__foto{cursor:none}
  .pod2__foto.je-iznad .vise{transform:translate(-50%,-50%) scale(1)}
}
@media (hover:none),(pointer:coarse){
  .vise{width:4rem;height:4rem;font-size:.6875rem;transform:translate(-50%,-50%) scale(1);animation:pluta 16s ease-in-out infinite alternate}
  @keyframes pluta{0%{left:30%;top:28%}25%{left:68%;top:42%}50%{left:38%;top:70%}75%{left:66%;top:78%}100%{left:34%;top:46%}}
}
@media (max-width:700px){
  .pod2{min-height:0;padding-block:clamp(3rem,10vw,4rem)}
  .pod2__foto{width:min(20.625rem,64vw)}
  .traka{height:19.5rem}
  .traka__k{width:13rem}
}
@media (prefers-reduced-motion:reduce){.traka__put,.vise{animation:none!important}.traka{opacity:.45}.pod2__foto{transform:none}}
html:not(.kretanje) .traka{opacity:.45}
html:not(.kretanje) .pod2__foto{transform:none}

/* Upit u redovima (isti obrazac i na Kontaktu) */
.upit--mb{position:relative;z-index:2;padding:clamp(4rem,8vw,6.5rem) var(--gutter)}
.upit--mb .upit__in{max-width:46rem;margin-inline:auto}
.upit--mb .upit__naslov{margin-bottom:2.5rem;text-align:left;font-style:italic;font-weight:300;font-size:clamp(2.5rem,1.6rem + 3vw,4rem);letter-spacing:-.025em;line-height:1.05;color:rgba(239,233,220,.92)}
.upit--mb .upit__ploca{display:block;border:0;border-radius:0;background:none;overflow:visible}
.upit--mb .koraci{padding:0}
.koraci__vrh{margin-bottom:2.5rem}
.koraci__crte{gap:.3125rem}
.koraci__crte i{height:1.5px;background:rgba(239,233,220,.1)}
.koraci__crte i.je-gotov{background:rgba(226,196,99,.8)}
.korak{gap:0}
.korak__oznaka{margin-bottom:.75rem;font-size:.6875rem;letter-spacing:.2em;color:rgba(226,196,99,.75)}
.korak legend{margin-bottom:2rem;font-style:italic;font-weight:300;font-size:clamp(1.75rem,1.3rem + 1.5vw,2.5rem);letter-spacing:-.02em;line-height:1.15;color:rgba(239,233,220,.9)}
.opc{width:100%;min-height:3.75rem;padding:1.125rem 0 1.125rem 1rem;border:0;border-bottom:1px solid rgba(239,233,220,.08);border-radius:0;background:none;color:inherit;font:inherit;text-align:left}
.opc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(226,196,99,.6);transition:width .3s}
.opc:hover{padding-left:1rem;border-color:rgba(239,233,220,.08)}
.opc:hover::before,.opc:has(input:checked)::before{width:2px}
.opc__t span{font-size:1.125rem;color:rgba(239,233,220,.72);transition:color .25s}
.opc__t small{font-size:.9375rem;color:rgba(239,233,220,.4)}
.opc:hover .opc__t span{color:var(--t-svj)}
.opc .ik{color:rgba(239,233,220,.3)}
.opc:has(input:checked){background:none;border-color:rgba(239,233,220,.08)}
.opc:has(input:checked) .opc__t span{color:var(--zlato)}
.opc:has(input:checked) .ik{color:var(--zlato);transform:translateX(.3rem)}
.red-unos{position:relative;display:flex;align-items:center;gap:.5rem;padding-left:1rem;border-bottom:1px solid rgba(239,233,220,.08);transition:border-color .3s}
.red-unos:focus-within{border-bottom-color:rgba(226,196,99,.45)}
.red-unos label{flex:1;min-width:0}
.red-unos input{width:100%;min-height:3.75rem;padding:0;border:0;background:none;color:var(--t-svj);font:inherit;font-size:1.125rem;caret-color:var(--zlato)}
.red-unos input::placeholder{color:rgba(239,233,220,.38)}
.red-unos input:focus{outline:none}
.red-unos__str{display:grid;place-items:center;width:2.75rem;height:2.75rem;flex:none;padding:0;border:0;background:none;color:rgba(239,233,220,.4);cursor:pointer}
.red-unos__str:hover{color:var(--zlato)}
.red-unos[data-podmjesto]{margin-left:1rem;animation:ulaz .45s var(--ease) both}
.korak .polja{gap:1.25rem 1.5rem}
.korak .polje input{min-height:3.25rem;padding:.5rem 0;border:0;border-bottom:1px solid rgba(239,233,220,.14);border-radius:0;background:none}
.korak .polje input:focus{border-bottom-color:var(--zlato)}
.korak .privola{margin-top:1.5rem}
.korak>.gumb--puni{margin-top:1rem}
.upit--mb .upit__dno{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;padding:2rem 0 0;border:0;text-align:left}
.upit--mb .upit__dno .mono{color:rgba(239,233,220,.45);letter-spacing:.14em}
.upit--mb .upit__dno p:last-child{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;line-height:1.4}
.upit--mb .upit__dno br{display:none}
.upit--mb .upit__dno a{display:inline-flex;align-items:center;min-height:2.75rem;font-size:.9375rem;color:rgba(239,233,220,.5);overflow-wrap:anywhere}
.upit--mb .upit__dno a:hover{color:var(--zlato)}

/* Podnožje naslovnice: logo i rečenica, kontakt, veliko ime, pravno */
.kraj2{position:relative;z-index:2;container-type:inline-size;padding:clamp(3rem,6vw,4.5rem) var(--gutter) max(1.5rem,env(safe-area-inset-bottom));color:var(--t-svj)}
.kraj2__vrh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem}
.kraj2__brend{max-width:28rem}
.kraj2__logo{display:inline-flex;align-items:center;gap:.75rem;min-height:2.75rem;text-decoration:none;font:400 .75rem/1 var(--mono);letter-spacing:.3em;--logo-crna:var(--t-svj);--logo-siva:#77756e}
.kraj2__znak{width:1.625rem;height:1.875rem}
.kraj2__brend p{margin-top:1rem;font-size:1.0625rem;line-height:1.6;color:rgba(239,233,220,.55)}
.kraj2__kontakt{display:grid;align-content:start;gap:.25rem}
.kraj2__kontakt a{display:inline-flex;align-items:center;gap:.625rem;min-height:2.75rem;text-decoration:none;font-size:1.0625rem;color:rgba(239,233,220,.75);overflow-wrap:anywhere}
.kraj2__kontakt .ik{width:1rem;height:1rem;color:var(--zlato)}
.kraj2__kontakt a:hover{color:var(--t-svj)}
.kraj2__ime{margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:clamp(.75rem,2cqw,1.5rem) 0;border-block:1px solid rgba(239,233,220,.1);text-align:center;font-weight:300;font-size:14.4cqw;letter-spacing:-.04em;line-height:1;white-space:nowrap;color:rgba(239,233,220,.9)}
.kraj2__dno{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;padding-top:1rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(239,233,220,.45)}
.kraj2__dno ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 1.25rem}
.kraj2__dno a,.kraj2__dno .veza-gumb{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none;color:rgba(239,233,220,.6);font:inherit;letter-spacing:inherit;text-transform:inherit}
.kraj2__dno a:hover,.kraj2__dno .veza-gumb:hover{color:var(--t-svj)}
.kraj2 .wk-potpis{font-size:.75rem;text-transform:none;color:rgba(239,233,220,.45)}
.kraj2 .wk-potpis a.winkla{font-size:.75rem;color:rgba(239,233,220,.75)}
@media (max-width:700px){.kraj2__dno{flex-direction:column;align-items:flex-start}}

/* ══ Vlastiti štih MAT-PROJEKTA (razlika od MB Stakora) ═══════════════ */
/* Pozadina: tamni mramor pod slojem laka; preko njega polako prelazi odsjaj */
.pozadina{background:#0a0a09;overflow:hidden}
.pozadina::before{content:"";position:absolute;inset:-4%;background:url(/img/mramor-tamni-2400.webp) center/cover no-repeat;opacity:.2;filter:saturate(.8);transform:scaleX(-1)}
.pozadina::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(10,10,9,.85) 100%),linear-gradient(180deg,rgba(10,10,9,0) 60%,rgba(10,10,9,.6))}
.pozadina__sjaj{position:absolute;inset:-50% -30%;background:linear-gradient(105deg,transparent 42%,rgba(239,233,220,.06) 48%,rgba(239,233,220,.11) 50%,rgba(239,233,220,.06) 52%,transparent 58%);transform:translateX(-30%)}
.kretanje .pozadina__sjaj{animation:lak 14s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes lak{to{transform:translateX(30%)}}
@media (max-width:600px){.pozadina::before{background-image:url(/img/mramor-tamni-1200.webp);opacity:.16}}

/* Uvod: mjesto kao mono natpis s crtom, naslov s odrazom u sjajnom podu */
.uvod{padding-top:clamp(7.5rem,17vh,10.5rem)}
.uvod__mjesto{display:flex;align-items:center;gap:.875rem;padding:0;background:none;overflow:visible;color:rgba(239,233,220,.7)}
.uvod__mjesto::before,.uvod__mjesto::after{content:"";position:static;inset:auto;width:2.5rem;height:1px;border:0;border-radius:0;background:linear-gradient(90deg,transparent,rgba(226,196,99,.8))}
.uvod__mjesto::after{background:linear-gradient(90deg,rgba(226,196,99,.8),transparent)}
.uvod__naslov{margin-bottom:0}
.uvod__odraz{display:block;height:.42em;margin:0 0 1.5rem;overflow:hidden;font-style:italic;font-weight:300;font-size:clamp(3.25rem,1.6rem + 5.4vw,6.25rem);letter-spacing:-.03em;line-height:1.02;color:rgba(239,233,220,.92);pointer-events:none;user-select:none}
.uvod__odraz span{display:block;transform:scaleY(-1) translateY(.06em);opacity:.3;filter:blur(.035em);-webkit-mask-image:linear-gradient(180deg,transparent 52%,#000 100%);mask-image:linear-gradient(180deg,transparent 52%,#000 100%)}
.gumb-svj{gap:.75rem;background:var(--zlato);color:#111110;box-shadow:0 0 1.5rem rgba(226,196,99,.25)}
.gumb-svj:hover{box-shadow:0 0 2rem rgba(226,196,99,.45),0 .5rem 1.5rem rgba(226,196,99,.15)}
.gumb-svj .ik{width:1rem;height:1rem;transition:transform .45s var(--ease)}
.gumb-svj:hover .ik{transform:translateX(.25rem)}

/* Lepeza: blagi zlatni rub kao na rubu izlivene plohe */
.lepeza__k,.pod2__foto{outline:1px solid rgba(226,196,99,.18);outline-offset:-1px}

/* Podovi: naslov dobiva sjaj laka koji prođe kad se sekcija pojavi */
.pod2__ime{background:linear-gradient(100deg,rgba(239,233,220,.92) 40%,#fff6d6 50%,rgba(239,233,220,.92) 60%) 100% 0/250% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent}
.kretanje .pod2.je-u-vidu .pod2__ime{animation:sjaj-naslov 1.8s .2s var(--ease) both}
@keyframes sjaj-naslov{from{background-position:100% 0}to{background-position:0 0}}
.vise{background:radial-gradient(circle at 35% 30%,#f3dc8c,var(--zlato) 55%,#c9a640)}

/* Podnožje: ime ispunjeno sjajem laka */
.kraj2__ime{background:linear-gradient(100deg,rgba(239,233,220,.9) 35%,#fff3cc 48%,var(--zlato) 50%,#fff3cc 52%,rgba(239,233,220,.9) 65%) 100% 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent}
.kretanje .kraj2__ime{animation:sjaj-ime 9s ease-in-out infinite alternate}
@keyframes sjaj-ime{to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.pozadina__sjaj,.kraj2__ime,.pod2__ime{animation:none!important}}

/* ══ Pismo naslovnice: Bodoni Moda (naslovi, uspravno) + Schibsted Grotesk (tekst) + DM Mono (oznake) ══ */
.str-naslovnica{--bodoni:"Bodoni Moda","Didot","Bodoni 72",ui-serif,serif;--grotesk:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;font-family:var(--grotesk);font-size:1.0625rem;line-height:1.55}
.str-naslovnica :is(.uvod__naslov,.uvod__odraz,.pod2__ime,.upit__naslov,.korak legend,.izb__lista a,.kraj2__ime,.fuge__tekst){font-family:var(--bodoni);font-style:normal;font-optical-sizing:auto}
.str-naslovnica .uvod__naslov,.str-naslovnica .uvod__odraz{font-weight:400;font-size:clamp(3rem,1.2rem + 6vw,6.75rem);letter-spacing:-.035em;line-height:1}
.str-naslovnica .uvod__naslov em,.str-naslovnica .uvod__odraz em{font-style:italic;color:var(--zlato)}
.str-naslovnica .pod2__ime{font-weight:400;font-size:clamp(2.75rem,1.6rem + 3.8vw,4.5rem);letter-spacing:-.03em;line-height:1.02}
.str-naslovnica .upit--mb .upit__naslov{font-weight:400;letter-spacing:-.03em}
.str-naslovnica .korak legend{font-weight:400;letter-spacing:-.025em}
.str-naslovnica .izb__lista a{font-weight:400;letter-spacing:-.035em}
.str-naslovnica .kraj2__ime{font-weight:400;font-size:13.2cqw;letter-spacing:-.05em}
.str-naslovnica .fuge__tekst{font-weight:400;letter-spacing:-.035em;line-height:1.1}
.str-naslovnica :is(.uvod__opis,.pod2__glava p){font-size:clamp(1rem,.95rem + .3vw,1.1875rem);letter-spacing:-.005em}
.str-naslovnica .pod2__glava strong{font-weight:600}
.str-naslovnica :is(.opc__t span,.red-unos input,.polje input,.gumb-svj,.kraj2__kontakt a,.kraj2__brend p){font-family:var(--grotesk)}
.str-naslovnica .opc__t span{font-size:1.0625rem}
.str-naslovnica .gumb-svj{font-size:.9375rem;font-weight:500}
.izb__lista li{padding:.04em 0 .14em}
.izb__lista a{font-size:clamp(1.875rem,min(1rem + 2.8vw,6.6svh),4rem);line-height:1.04}

/* Gloock umjesto Bodonija (čvršći potezi, čitljiv i u velikom tekstu) */
.str-naslovnica{--bodoni:"Gloock",ui-serif,Georgia,serif}
.str-naslovnica :is(.uvod__naslov,.uvod__odraz,.pod2__ime,.upit__naslov,.korak legend,.izb__lista a,.kraj2__ime,.fuge__tekst){font-weight:400;font-synthesis:none}
.str-naslovnica .uvod__naslov em,.str-naslovnica .uvod__odraz em{font-style:normal}
.str-naslovnica .uvod__naslov,.str-naslovnica .uvod__odraz{font-size:clamp(2.75rem,1rem + 5.6vw,6.25rem);letter-spacing:-.025em}
.str-naslovnica .pod2__ime{letter-spacing:-.02em}
.str-naslovnica .fuge__tekst{font-size:clamp(1.875rem,.9rem + 3.1vw,4.25rem);letter-spacing:-.02em;line-height:1.12}
.str-naslovnica .kraj2__ime{font-size:12.4cqw;letter-spacing:-.03em}
.str-naslovnica .izb__lista a{letter-spacing:-.02em}

/* ══════════════════════════════════════════════════════════════════════
   VERZIJA 3: SJAJNI POD. Sve na naslovnici stoji na sjajnom podu i odražava se.
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Naslov izranja iz crte poda, odraz raste prema dolje u istom trenutku */
.kretanje .uvod>.uvod__naslov,.kretanje .uvod>.uvod__odraz{animation:none}
.uvod__naslov{overflow:hidden;padding-top:.16em;margin-top:-.16em}
.izron{display:block}
.kretanje .izron{animation:izron 1.5s .15s cubic-bezier(.16,1,.3,1) both}
@keyframes izron{from{transform:translateY(108%)}}
.kretanje .uvod__odraz span{animation:odraz-raste 1.5s .15s cubic-bezier(.16,1,.3,1) both}
@keyframes odraz-raste{from{translate:0 -108%}}
.uvod__odraz{position:relative}
.uvod__odraz::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(226,196,99,.35),transparent);transform-origin:center}
.kretanje .uvod__odraz::before{animation:crta-poda 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes crta-poda{from{transform:scaleX(0)}}

/* 2. Scena: lepeza se složi, gornja fotografija se raširi u pod preko cijelog ekrana, preko nje tekst o fugama */
.scena-pod{position:relative;z-index:2}
.scena-pod__pin{position:relative;display:grid;place-items:center;gap:3rem;padding:4rem var(--gutter)}
.scena-pod .lepeza__hrpa{margin-block:clamp(3rem,10vh,6rem)}
.scena-pod__puna{display:none}
.scena-pod__tekst{max-width:20em;text-align:center}
.kretanje .scena-pod{height:200svh}
.kretanje .scena-pod__pin{position:sticky;top:0;height:100svh;padding:0;overflow:hidden;display:grid;place-items:center}
.kretanje .scena-pod .lepeza__hrpa{grid-area:1/1;margin:0}
.kretanje .scena-pod__puna{display:block;position:absolute;inset:0;z-index:4;visibility:hidden;clip-path:inset(50% 50% 50% 50%);will-change:clip-path;contain:paint}
.scena-pod__puna picture,.scena-pod__puna img{width:100%;height:100%;object-fit:cover}
.scena-pod__puna img{transform:scale(var(--zum,1.12));transform-origin:50% 60%;will-change:transform}
.scena-pod__zastor{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,rgba(10,10,9,.55),rgba(10,10,9,.88));opacity:var(--zastor,0)}
.kretanje .scena-pod__tekst{grid-area:1/1;position:relative;z-index:5;padding:0 var(--gutter);opacity:var(--tekst,0);text-shadow:0 .125rem 1.5rem rgba(0,0,0,.45)}
.kretanje .scena-pod__tekst span{opacity:.18;transition:opacity .45s var(--ease)}
.kretanje .scena-pod__tekst span.je-upaljena{opacity:1}
.str-naslovnica .scena-pod__tekst{font-family:var(--bodoni);font-weight:400;font-size:clamp(1.875rem,.9rem + 3.1vw,4.25rem);letter-spacing:-.02em;line-height:1.12;color:var(--t-svj)}
.lepeza__k{-webkit-box-reflect:below .5rem linear-gradient(transparent 72%,rgba(255,255,255,.16))}

/* 3. Podovi: velika fotografija na sjajnom podu (odraz), bočne istog poda u perspektivi se razmaknu */
.pod3{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:clamp(4rem,9vw,7rem) var(--gutter) clamp(3rem,6vw,5rem);overflow-x:clip}
.pod3 .pod2__glava{margin-bottom:clamp(2rem,4vw,3rem)}
.pod3__scena{--bw:13.5rem;--pomak:17.5rem;position:relative;width:100%;display:grid;place-items:center;perspective:70rem;padding-bottom:clamp(6rem,14vw,10rem)}
.pod3__glavna{z-index:3;-webkit-box-reflect:below .625rem linear-gradient(transparent 62%,rgba(255,255,255,.22))}
.pod3--jedna .pod3__glavna{width:min(34rem,86vw);aspect-ratio:4/3}
.pod3__bok{position:absolute;left:50%;top:calc(50% - clamp(3rem,7vw,5rem));z-index:1;width:var(--bw);aspect-ratio:3/4;margin:0;border-radius:.875rem;overflow:hidden;background:var(--crna-2);outline:1px solid rgba(226,196,99,.14);outline-offset:-1px;box-shadow:0 1.5rem 3rem rgba(0,0,0,.5);transform:translate(-50%,-50%) translateX(calc(var(--smjer) * var(--r,1) * var(--pomak))) rotateY(calc(var(--smjer) * var(--r,1) * -24deg)) scale(calc(.78 + var(--r,1) * .1));filter:brightness(calc(.55 + var(--r,1) * .3));-webkit-box-reflect:below .5rem linear-gradient(transparent 70%,rgba(255,255,255,.14))}
.pod3__bok picture,.pod3__bok img{width:100%;height:100%;object-fit:cover}
.pod3__sjaj{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 48%,rgba(255,255,255,.06) 54%,transparent 62%);transform:translateX(-110%)}
.kretanje .pod3.je-u-vidu .pod3__sjaj{animation:sjaj-foto 1.6s .45s cubic-bezier(.65,0,.35,1) both}
@keyframes sjaj-foto{to{transform:translateX(110%)}}
.pod3__tekst{max-width:32rem;margin-top:0;text-align:center;font-size:clamp(1rem,.95rem + .3vw,1.1875rem);line-height:1.6;color:rgba(239,233,220,.62)}
@media (max-width:900px){.pod3__scena{--bw:30vw;--pomak:34vw}}
@media (max-width:600px){.pod3__scena{--bw:30vw;--pomak:31vw}.pod3__glavna{width:min(20.625rem,56vw)}.pod3--jedna .pod3__glavna{width:86vw}}

/* 4. Upit: odabrani pod kao blaga pozadina */
.upit__poz{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent)}
.upit__poz figure{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.6s var(--ease)}
.upit__poz figure.je-vidljiva{opacity:.16;transform:none}
.upit__poz picture,.upit__poz img{width:100%;height:100%;object-fit:cover;filter:blur(.375rem) saturate(.8)}
.upit--mb{isolation:isolate}

@media (prefers-reduced-motion:reduce){.pod3__sjaj{display:none}.izron,.uvod__odraz span{animation:none!important}}
/* bočne fotografije stoje na istoj crti poda kao glavna */
.pod3__scena{--pb:clamp(5rem,10vw,7.5rem);padding-bottom:var(--pb)}
.pod3__bok{top:auto;bottom:var(--pb);transform:translateX(-50%) translateX(calc(var(--smjer) * var(--r,1) * var(--pomak))) rotateY(calc(var(--smjer) * var(--r,1) * -26deg)) scale(calc(.82 + var(--r,1) * .1));transform-origin:50% 100%}
/* fotografija preko ekrana: pod sa sunčevim odsjajem u kadru */
.scena-pod__puna img{object-position:50% 72%}
.lepeza__k--3 img{object-position:46% 60%}

/* Tekst o fugama: lagani Newsreader (prije Gloock) */
.str-naslovnica .scena-pod__tekst.fuge__tekst{font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 72;font-size:clamp(2rem,1rem + 3.3vw,4.5rem);letter-spacing:-.022em;line-height:1.12;max-width:19em}

/* Karte odmah ispod naslova (kao kod MB Stakora), a u sceni i dalje stoje na sredini ekrana */
.kretanje .scena-pod{--kh:31rem;margin-top:calc((var(--kh) - 100svh) / 2 + 4.5rem);pointer-events:none}
@media (max-width:700px){.kretanje .scena-pod{--kh:69vw;margin-top:calc((var(--kh) - 100svh) / 2 + 2.5rem)}}

/* ══════════════════════════════════════════════════════════════════════
   PODSTRANICE (verzija 3): ista tamna mramorna podloga, zaglavlje, izbornik
   i podnožje kao naslovnica. Svijetle ploče postaju tamne, naslovi u Gloocku.
   ══════════════════════════════════════════════════════════════════════ */
.kretanje .str-pod .pozadina{animation:poz-blijedi 1s var(--ease) both}
@keyframes poz-blijedi{from{opacity:0}}

/* Uvod: oznaka s crtama, naslov s odrazom, kratki opis, gumb */
.glava3{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(8.5rem,20vh,12rem) var(--gutter) clamp(3.5rem,8vw,6rem)}
.glava3 .uvod__mjesto{margin-bottom:1.5rem}
.str-pod .glava3 :is(.uvod__naslov,.uvod__odraz){font-size:clamp(2.75rem,1rem + 5vw,5.75rem)}
.glava3 .uvod__naslov{max-width:16em;text-wrap:balance}
.glava3 .uvod__odraz{max-width:16em;text-wrap:balance}
.glava3 .uvod__opis{max-width:34rem}
.glava3--puna{min-height:100svh;justify-content:center}
.glava3__gumbi{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.glava3__gumbi .gumb--zlato{background:var(--zlato);color:#111110}
.glava3__tel{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:.25rem;text-decoration:none;color:var(--t-svj)}
.glava3__oznaka{font:400 .6875rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(226,196,99,.8)}
.glava3__broj{font-family:var(--bodoni);font-size:clamp(2.25rem,1.2rem + 3.6vw,4rem);letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums;transition:color .3s}
.glava3__tel .gumb-svj{margin-top:.75rem}
.glava3__tel:hover .glava3__broj{color:var(--zlato)}

/* Svijetle ploče postaju tamne: iste boje preko varijabli, prozirna podloga */
.str-pod :is(.usluge,.galerija-sek,.onama,.onama-foto,.dolazak,.poziv,.pravno-sek){--papir:transparent;--papir-2:#1a1a18;--papir-3:rgba(239,233,220,.12);--t-tam:#efe9dc;--t-tam-2:rgba(239,233,220,.62);--linija-t:rgba(239,233,220,.12);position:relative;z-index:1;background:transparent;color:var(--t-svj);border-radius:0}
.str-pod .gumb--tamni{background:var(--zlato);color:#111110}
.str-pod .gumb--tamni:hover{background:#efd57e}
.str-pod .gumb--obrub-t{border-color:rgba(239,233,220,.3);color:var(--t-svj)}
.str-pod .gumb--obrub-t:hover{border-color:var(--zlato)}
.str-pod .cip:hover{border-color:var(--zlato)}
.str-pod .cip[aria-pressed="true"]{background:var(--zlato);border-color:var(--zlato);color:#111110}
.str-pod .presjek{position:relative;z-index:1}
.str-pod :is(.usluga__slika,.onama__foto,.onama-foto figure picture,.galerija__gumb picture){outline:1px solid rgba(226,196,99,.16);outline-offset:-1px}
.str-pod .usluga__slika{-webkit-box-reflect:below .625rem linear-gradient(transparent 80%,rgba(255,255,255,.12))}

/* Naslovi kao na naslovnici: Gloock, uspravno, zlatni naglasak */
.str-pod :is(.velik,.usluga__tekst h2,.onama__tekst h2,.dolazak h2,.poziv__naslov,.upit__naslov,.pravno h2){font-family:var(--bodoni);font-weight:400;font-style:normal;font-synthesis:none;letter-spacing:-.02em}
.str-pod :is(.velik,.usluga__tekst h2,.onama__tekst h2,.dolazak h2,.poziv__naslov) em{font-style:normal;color:var(--zlato)}
.str-pod .pravno h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.str-pod .pravno a{color:var(--zlato)}
/* Trenutna stranica u zaglavlju i izborniku */
.zag__veze a[aria-current="page"]{color:var(--t-svj)}
.zag__veze a[aria-current="page"]::after{transform:none}
.izb__mala a[aria-current="page"]{color:var(--zlato)}

/* Fotografije nikad veće nego što izvornik podnosi (originali su široki ~738 px):
   uži stupac za sliku, terasa bez dodatnog obrezivanja (4:3 kao izvornik) */
@media (min-width:901px){
  .str-pod .usluga{grid-template-columns:minmax(0,25rem) minmax(0,1fr)}
  .str-pod .usluga--obrnuto{grid-template-columns:minmax(0,1fr) minmax(0,25rem)}
  .str-pod #terase.usluga{grid-template-columns:minmax(0,30rem) minmax(0,1fr)}
  .str-pod #terase .usluga__slika{aspect-ratio:4/3}
  .str-pod #terase .usluga__slika img{object-position:50% 50%}
  .str-pod .usluga{max-width:72rem;margin-inline:auto}
  .str-pod .onama__in{grid-template-columns:minmax(0,1fr) minmax(0,25rem)}
  .str-pod .onama-foto__in{max-width:54rem;margin-inline:auto}
}
.izb__fotke{max-width:25rem}
.pod3--jedna .pod3__glavna{width:min(28rem,86vw)}
.str-pod .presjek__glava{position:relative;z-index:2;margin-bottom:clamp(3rem,8vw,7rem)}
/* Repovi slova (J, g, j, p) ne smiju biti odrezani: prostor ispod naslova unutar maske, raspored isti */
.uvod__naslov{padding-bottom:.28em;margin-bottom:-.28em}

/* MP znak s majice (12. 11. 2026.): širi od starog znaka, visina određuje veličinu */
:is(.zag__znak,.kraj__znak,.kraj2__znak,.vrh__znak,.pn__svg){width:auto;aspect-ratio:2639/1736;flex:none}
.zag__znak{height:1.875rem}
.kraj2__znak,.kraj__znak{height:1.875rem}
.vrh__znak{height:1.5rem}
.pn__svg{height:1.25rem}
.kraj__logo{--logo-m:var(--t-tam)}
.str-pod .kraj__logo{--logo-m:#eeeae1}
@media (max-width:460px){.zag__ime{display:none}}

/* Raširena slika raste iz karte (v3.js postavlja veličinu i transform), bez object-fit reza i bez dodatnog zuma */
.kretanje .scena-pod__puna picture{display:block;width:100%;height:100%}
.kretanje .scena-pod__puna img{position:absolute;left:0;top:0;max-width:none;object-fit:fill;transform-origin:0 0;will-change:transform}
.lepeza__k--3 img{object-position:46% 60%}

/* Scena: okvir se širi transformom (ne clip-pathom), da iPhone ne crta sliku iznova u svakom kadru */
.kretanje .scena-pod__puna{clip-path:none;contain:none;overflow:hidden;transform-origin:0 0;will-change:transform;backface-visibility:hidden}
.kretanje .scena-pod__zastor{will-change:opacity}
/* Skrivena traka kolačića ne smije bojiti donju traku Safarija */
html body .pk-traka:not(.je-vidljiva){visibility:hidden;transition:transform .42s cubic-bezier(.22,.7,.3,1),opacity .42s ease,visibility 0s linear .42s}

/* Bočne slike i glavna fotografija podova: animacija vezana uz pomicanje (bez JS-a u svakom kadru).
   Bočne se rašire dok sekcija ulazi u ekran i ostanu raširene; pri povratku se same slože natrag. */
@supports (animation-timeline: view()) {
  .kretanje .pod3__bok{animation:bok-ulaz linear both;animation-timeline:view();animation-range:entry 0% cover 40%;will-change:transform}
  .kretanje .pod3__glavna{animation:glavna-ulaz linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  @keyframes bok-ulaz{
    from{transform:translateX(-50%) translateX(0) rotateY(0deg) scale(.82)}
    to{transform:translateX(-50%) translateX(calc(var(--smjer) * var(--pomak))) rotateY(calc(var(--smjer) * -26deg)) scale(.92)}
  }
  @keyframes glavna-ulaz{from{transform:scale(.9)}to{transform:scale(1)}}
}

/* Mobitel: karta se jednoliko povećava do punog ekrana, animacija vezana uz pomicanje (bez JS-a po kadru) */
.scena-css .scena-pod{view-timeline:--scena}
.kretanje.scena-css .scena-pod__puna{inset:auto;left:var(--kl);top:var(--kt);width:var(--kw);height:var(--kh);border-radius:var(--kr,1rem);overflow:hidden;visibility:visible;transform-origin:50% 50%;will-change:transform,opacity;animation:puna-rast ease-in-out both;animation-timeline:--scena;animation-range:contain 4% contain 42%}
.kretanje.scena-css .scena-pod__puna picture{display:block;width:100%;height:100%}
.kretanje.scena-css .scena-pod__puna img{position:static;width:100%;height:100%;max-width:none;object-fit:cover;object-position:46% 60%;transform:none;will-change:auto}
.kretanje.scena-css .scena-pod__zastor{animation:pali-se linear both;animation-timeline:--scena;animation-range:contain 34% contain 50%}
.kretanje.scena-css .scena-pod__tekst{animation:pali-se linear both;animation-timeline:--scena;animation-range:contain 40% contain 50%}
@keyframes puna-rast{0%{opacity:0;transform:translate(0,0) scale(var(--kk0))}6%{opacity:1}100%{opacity:1;transform:translate(var(--kx),var(--ky)) scale(1)}}
@keyframes pali-se{from{opacity:0}to{opacity:1}}

/* Odraz glavne fotografije kao prava kopija (Safari krivo smjesti -webkit-box-reflect kad se slika animira) */
.pod3__omot{position:relative;z-index:3;display:grid;transform:scale(var(--s,.9))}
.pod3__glavna{-webkit-box-reflect:none;transform:none}
.pod3__odraz{position:absolute;left:0;right:0;top:calc(100% + .625rem);height:100%;border-radius:1rem;overflow:hidden;transform:scaleY(-1);pointer-events:none;-webkit-mask-image:linear-gradient(transparent 62%,rgba(0,0,0,.22));mask-image:linear-gradient(transparent 62%,rgba(0,0,0,.22))}
.pod3__odraz picture,.pod3__odraz img{width:100%;height:100%;object-fit:cover}
#terase .pod3__odraz img{object-position:50% 40%}
html:not(.kretanje) .pod3__omot{transform:none}
@supports (animation-timeline: view()) {
  .kretanje .pod3__glavna{animation:none}
  .kretanje .pod3__omot{animation:glavna-ulaz linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
}

/* Zaglavlje na mobitelu: MP znak + MAT-PROJEKT kao u podnožju (vlasnik, 13. 11. 2026.).
   Riječ "Izbornik" ostaje samo za čitače zaslona, gumb s crticama ostaje. */
@media (max-width:460px){
  .zag__ime{display:grid}
  .zag__ime b{font-size:.8125rem;letter-spacing:.2em}
  .zag__logo{gap:.625rem}
  .zag__znak{height:1.625rem}
  .zag__tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .zag__gumb{padding-left:0}
}
@media (max-width:374px){.zag__ime{display:grid}.zag__ime b{font-size:.6875rem;letter-spacing:.14em}}
@media (max-width:330px){.zag__tel{display:none}}

/* Zaglavlje kao podnožje: samo MP znak i MAT-PROJEKT (vlasnik, 13. 11. 2026.) */
.zag__ime{display:flex;align-items:center}
@media (min-width:461px){.zag__ime b{letter-spacing:.3em}}

/* Galerija: fotografije su s mobitela (oko 740 px), pa su kartice manje i kvadratne,
   da se slika ne rasteže preko svoje stvarne veličine (13. 11. 2026.) */
.galerija{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.galerija__gumb picture{aspect-ratio:1/1}
.galerija__natpis{flex-wrap:wrap;gap:.25rem .75rem}
.galerija__natpis b{font-size:1.0625rem}
.galerija__natpis .mono{font-size:.6875rem}
@media (max-width:1100px){.galerija{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.galerija{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.galerija__natpis b{font-size:.9375rem}}
@media (max-width:359px){.galerija{grid-template-columns:minmax(0,1fr)}}