/* fontovi hostani na sajtu (SIL Open Font License), bez Googlea */
@font-face{font-family:'Syncopate';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/syncopate-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Syncopate';font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/syncopate-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 500;font-display:swap;src:url(../assets/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 500;font-display:swap;src:url(../assets/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#0e0e0e; --fg:#f1efea; --muted:rgba(241,239,234,.62);
  --font-head:'Syncopate',sans-serif; --font-body:'Archivo',sans-serif;
  --kern-gap:0.10; /* razmak između tinte susjednih slova, u em */
  --gutter:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:20px var(--gutter);color:#fff;text-shadow:0 0 14px rgba(0,0,0,.6),0 0 3px rgba(0,0,0,.45)}
/* tamni prijelaz iza headera da se vidi na svijetlim slikama */
.site-header::before{content:"";position:absolute;inset:0 0 -70px 0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.32) 55%,rgba(0,0,0,0) 100%)}
.brand{display:block;line-height:0}
.brand img{width:56px;height:56px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));transition:transform .4s ease}
.brand:hover img{transform:rotate(-8deg)}
@media (max-width:760px){.brand img{width:46px;height:46px}}
.nav{display:flex;gap:34px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.nav a{position:relative;opacity:.85;padding:6px 0;transition:opacity .25s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.nav a:hover,.nav a[aria-current]{opacity:1}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
@media (max-width:760px){.nav{display:none}}

/* hero: scene naslagane jedna preko druge */
.hero{position:relative;height:100vh;overflow:hidden}
.scene{position:absolute;inset:0}
.scene-img{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform,opacity}
.scene-img picture{display:block;width:100%;height:100%}
.scene-img img{width:100%;height:100%;object-fit:cover}
.scene-img::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.05) 0%,rgba(0,0,0,.42) 100%)}

/* tekst: položaj po sceni, raste iz vlastitog središta */
.scene-text{position:absolute;inset:0;display:flex;padding:130px var(--gutter) 130px;
  text-shadow:0 0 18px rgba(0,0,0,.55),0 0 4px rgba(0,0,0,.35)}
.scene-text[data-pos=left]{justify-content:flex-start;align-items:flex-start}
.scene-text[data-pos=right]{justify-content:flex-end;align-items:flex-end;text-align:right}
.scene-text[data-pos=right] .lead{margin-left:auto}
.scene-text[data-pos=center]{justify-content:center;align-items:center;text-align:center}
.scene-text[data-pos=center] .lead{margin-left:auto;margin-right:auto}
.scene-text[data-pos=center] .title{margin-left:auto;margin-right:auto}
/* bez will-change: browser tekst iscrtava ponovno na svakoj veličini, pa ostaje oštar */
.copy{width:fit-content;transform-origin:50% 50%}
.overline{font-family:var(--font-head);font-size:11px;letter-spacing:.32em;text-transform:uppercase;opacity:.8;margin-bottom:22px}
.title{font-family:var(--font-head);font-weight:400;font-size:clamp(34px,6.2vw,96px);line-height:1.02;text-transform:uppercase;margin:0;max-width:12ch}
.lead{font-size:clamp(16px,1.35vw,21px);line-height:1.6;max-width:38ch;margin:30px 0 0;color:rgba(241,239,234,.82)}
.meta{position:absolute;left:var(--gutter);bottom:40px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.scroll-hint{position:absolute;right:var(--gutter);bottom:40px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
/* samo prva scena vidljiva prije JS-a, pa slika stoji odmah */
.scene+.scene .scene-img,.scene+.scene .copy,.scene+.scene .meta{opacity:0}

/* sadržaj nakon heroa klizi preko njega */
.after-hero{position:relative;z-index:2;background:var(--bg);min-height:100vh;display:flex;flex-direction:column;box-shadow:0 -30px 60px rgba(0,0,0,.45)}
.after-hero .teaser{flex:1;align-content:center}
.hero-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:3}

/* uvodna animacija početne: sakrij dok JS ne preuzme */
.intro-pending .site-header .brand,.intro-pending .site-header .nav a,
.intro-pending .scene:first-child .overline,.intro-pending .scene:first-child .title,
.intro-pending .scene:first-child .lead,.intro-pending .scene:first-child .meta,
.intro-pending .scene:first-child .scroll-hint{opacity:0}
.intro-pending .scene:first-child .scene-img img{filter:blur(24px);transform:scale(1.12)}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* optičko ravnanje: svako slovo je span s margin-left u em */
/* riječ ima stalni nevidljivi okvir (padding + negativna margina), pa se pri
   izranjanju naslova mijenja samo rezanje, a ne položaj slova */
.kern .w{white-space:nowrap;display:inline-block;vertical-align:top;
  padding:.12em .25em .08em;margin:-.12em calc(.32em - .25em) -.08em -.25em}
.kern .w:last-child{margin-right:-.25em}
.kern .c{display:inline-block}

/* teaser ispod heroa */
.teaser{padding:140px var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}
.teaser h2{font-family:var(--font-head);font-weight:400;font-size:clamp(22px,2.6vw,40px);text-transform:uppercase;line-height:1.1;margin:0}
.teaser p{color:var(--muted);font-size:18px;line-height:1.6;max-width:44ch;margin:0 0 28px}
.btn{display:inline-block;font-family:var(--font-head);font-size:11px;letter-spacing:.3em;text-transform:uppercase;border:1px solid rgba(241,239,234,.35);padding:16px 26px}
.btn:hover{background:var(--fg);color:var(--bg)}
@media (max-width:760px){.teaser{grid-template-columns:1fr;padding:90px var(--gutter)}}

/* footer */
.site-footer{border-top:1px solid rgba(241,239,234,.12);padding:28px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.credit{display:flex;align-items:center;gap:10px}
.credit img{height:18px;width:auto}
@media (max-width:560px){.site-footer{flex-direction:column;align-items:flex-start}}

/* naslov izranja iz nevidljive podloge: svaka riječ je maska, slova se dižu odozdo */
.mask .w{overflow:hidden}
.intro-pending .title{visibility:hidden}

/* ============ PODSTRANICE ============ */
.subhero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;display:flex;align-items:flex-end}
.subhero-img{position:absolute;inset:0;overflow:hidden}
.subhero-img img{width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}
.subhero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.08) 40%,rgba(0,0,0,.5) 100%)}
.subhero-copy{position:relative;z-index:2;padding:0 var(--gutter) 72px;text-shadow:0 0 18px rgba(0,0,0,.55),0 0 4px rgba(0,0,0,.35);width:100%}
.subhero .title{font-size:clamp(34px,5.6vw,88px);max-width:none}
.subhero .lead{margin-top:22px}
.intro-pending .subhero-img img{filter:blur(24px);transform:scale(1.12)}
.intro-pending .subhero-copy .overline,.intro-pending .subhero-copy .lead{opacity:0}

.section{padding:120px var(--gutter)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:56px;flex-wrap:wrap}
.section-head h2{font-family:var(--font-head);font-weight:400;font-size:clamp(22px,2.4vw,36px);text-transform:uppercase;line-height:1.1;margin:0}
.eyebrow{font-family:var(--font-head);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
[data-reveal]{opacity:0;transform:translateY(40px)}

/* filter */
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filters button{font:500 11px/1 var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--fg);background:none;border:1px solid rgba(241,239,234,.25);padding:13px 20px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.filters button:hover{border-color:var(--fg)}
.filters button[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* grid projekata: lijevo-desno, nikad masonry */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 28px}
@media (max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card{display:block}
.card.is-hidden{display:none}
.card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0b0b0b}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .7s ease}
.card-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72) 100%);transition:opacity .6s}
/* sav tekst kartice u donjem lijevom kutu slike. Na hover svaki redak ide
   ravnom linijom do sredine (pomak izmjeri page.js), raspored se ne mijenja,
   pa nema preskakanja. Slika izblijedi. */
.card-text{position:absolute;z-index:2;left:22px;bottom:20px;max-width:calc(100% - 44px);text-align:left;
  text-shadow:0 0 14px rgba(0,0,0,.6)}
.card-text>*{width:fit-content;max-width:100%}
.card-text .award{display:block}
@media (hover:hover){
  .card-text>*{transition:transform .8s cubic-bezier(.65,0,.25,1)}
  .card:hover .card-img img{opacity:.38;transform:scale(1.05)}
  .card:hover .card-img::after{opacity:0}
  .card:hover .card-text>*{transform:translate(var(--tx,0px),var(--ty,0px))}
  .card:hover .card-text h3{transform:translate(var(--tx,0px),var(--ty,0px)) scale(1.12)}
}
.card-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 8px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,239,234,.8)}
.card h3{font-family:var(--font-head);font-weight:400;font-size:17px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:#fff}
.award{display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#d8c39a}

/* jedan projekat */
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-top:1px solid rgba(241,239,234,.14);border-bottom:1px solid rgba(241,239,234,.14)}
.facts div{padding:28px 0 28px 24px;border-right:1px solid rgba(241,239,234,.14)}
.facts div:first-child{padding-left:0}.facts div:last-child{border-right:0}
.facts dt{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.facts dd{margin:0;font-family:var(--font-head);font-size:15px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}.facts div{padding-left:0;border-right:0}}
.project-intro{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;padding-top:80px}
.project-intro p{font-size:clamp(18px,1.6vw,24px);line-height:1.55;margin:0;max-width:40ch}
@media (max-width:760px){.project-intro{grid-template-columns:1fr;gap:20px}}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery button{padding:0;border:0;background:#1a1a1a;cursor:zoom-in;aspect-ratio:3/2;overflow:hidden}
.gallery button{position:relative}
/* slika je viša od okvira, pa ima prostora za parallax gore-dolje */
.gallery img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;transition:filter .5s}
.gallery button:hover img{filter:brightness(1.12)}
.gallery button:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media (max-width:760px){.gallery{grid-template-columns:1fr 1fr}.gallery button:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:3/2}}
.next-project{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:70px var(--gutter);border-top:1px solid rgba(241,239,234,.14)}
.next-project .title{font-size:clamp(24px,3.4vw,52px);max-width:none}
.next-project:hover .arrow{transform:translateX(10px)}
.arrow{font-size:34px;transition:transform .4s}

/* lightbox: X gore desno, strelice i broj u traci na dnu (radi i za okomite slike) */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(8,8,8,.985);display:none;opacity:0;transition:opacity .35s}
.lightbox.open{display:block;animation:lbIn .35s forwards}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-stage{position:absolute;inset:84px var(--gutter) 104px;display:flex;align-items:center;justify-content:center}
.lb-stage img{width:100%;height:100%;object-fit:contain;display:block}
.lb-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;background:none;border:0;color:var(--fg);cursor:pointer;opacity:.8;transition:opacity .3s}
.lb-btn:hover,.lb-btn:focus-visible{opacity:1}
.lb-btn svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.65,0,.25,1)}
.lb-btn:focus-visible{outline:1px solid var(--fg);outline-offset:2px}
.lb-close{position:absolute;top:18px;right:calc(var(--gutter) - 12px)}
.lb-close:hover svg{transform:rotate(90deg)}
.lb-nav{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:22px}
.lb-prev:hover svg{transform:translateX(-4px)}
.lb-next:hover svg{transform:translateX(4px)}
.lb-count{min-width:64px;text-align:center;font-size:12px;letter-spacing:.24em;color:var(--muted)}
@media (max-width:760px){.lb-stage{inset:76px 12px 100px}}

/* usluge */
.services{border-top:1px solid rgba(241,239,234,.14)}
.service{display:grid;grid-template-columns:110px 1fr 1.1fr 260px;gap:40px;align-items:center;padding:44px 0;border-bottom:1px solid rgba(241,239,234,.14)}
.service .num{font-family:var(--font-head);font-size:13px;letter-spacing:.2em;color:var(--muted)}
.service h3{font-family:var(--font-head);font-weight:400;font-size:clamp(18px,1.9vw,28px);text-transform:uppercase;margin:0;line-height:1.15}
.service p{margin:0;color:var(--muted);font-size:17px;line-height:1.6;max-width:46ch}
.service .thumb{aspect-ratio:4/3;overflow:hidden}
.service .thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.75);transition:filter .6s,transform 1s}
.service:hover .thumb img{filter:none;transform:scale(1.05)}
@media (max-width:900px){.service{grid-template-columns:60px 1fr;gap:18px 24px}.service p,.service .thumb{grid-column:2}}

/* o studiju */
.about{display:grid;grid-template-columns:1fr 1fr;gap:70px}
.about p{font-size:clamp(17px,1.4vw,21px);line-height:1.65;margin:0 0 22px;color:rgba(241,239,234,.85)}
.about p.big{font-size:clamp(22px,2.2vw,34px);line-height:1.4;color:var(--fg)}
@media (max-width:860px){.about{grid-template-columns:1fr;gap:20px}}
.founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.founder img{width:100%;aspect-ratio:68/60;object-fit:cover}
.founder h3{font-family:var(--font-head);font-weight:400;font-size:clamp(24px,2.6vw,40px);text-transform:uppercase;margin:0 0 10px}
.founder .role{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.founder p{color:rgba(241,239,234,.82);font-size:17px;line-height:1.65;margin:0 0 16px;max-width:56ch}
@media (max-width:860px){.founder{grid-template-columns:1fr;gap:28px}}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media (max-width:1000px){.team{grid-template-columns:repeat(2,1fr)}}
.member img{width:100%;aspect-ratio:68/60;object-fit:cover;filter:grayscale(1);transition:filter .6s}
.member:hover img{filter:none}
.member h4{font-family:var(--font-head);font-weight:400;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:18px 0 6px}
.member span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.member p{font-size:15px;line-height:1.55;color:var(--muted);margin:12px 0 0}

/* kontakt */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:80px}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:50px}}
.contact dl{margin:0}
.contact dt{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.contact dd{margin:0 0 34px;font-family:var(--font-head);font-size:clamp(15px,1.4vw,20px);letter-spacing:.04em;text-transform:uppercase;line-height:1.5}
.contact dd a:hover{opacity:.7}
.form{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.form label{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.form .full{grid-column:1/-1}
.form input,.form textarea,.form select{display:block;width:100%;margin-top:12px;background:transparent;border:0;border-bottom:1px solid rgba(241,239,234,.3);color:var(--fg);font:300 18px var(--font-body);padding:10px 0;outline:none;transition:border-color .3s;border-radius:0}
.form select option{background:var(--bg)}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--fg)}
.form textarea{resize:vertical;min-height:120px}
.form .btn{background:none;color:var(--fg);cursor:pointer;justify-self:start}
.form-note{grid-column:1/-1;font-size:14px;color:#d8c39a;min-height:1.4em;margin:0}
@media (max-width:640px){.form{grid-template-columns:1fr}}

/* mobilni meni */
.menu-btn{display:none;position:relative;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0;filter:drop-shadow(0 0 6px rgba(0,0,0,.5))}
.menu-btn span{position:absolute;left:9px;right:9px;height:1.5px;background:#fff;transition:transform .45s cubic-bezier(.7,0,.2,1),top .45s cubic-bezier(.7,0,.2,1)}
.menu-btn span:first-child{top:17px}.menu-btn span:last-child{top:26px}
.menu-open .menu-btn span:first-child{top:21.5px;transform:rotate(45deg)}
.menu-open .menu-btn span:last-child{top:21.5px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:49;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:110px var(--gutter) 40px;clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1);visibility:hidden}
.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu-links{display:flex;flex-direction:column;gap:6px}
.menu-links a{display:block;font-family:var(--font-head);font-size:clamp(26px,8vw,40px);text-transform:uppercase;line-height:1.25;letter-spacing:.02em}
.menu-links a[aria-current]{color:var(--muted)}
.menu-foot{margin-top:auto;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.menu-open .site-header::before{opacity:0}
.site-header::before{transition:opacity .4s}
@media (max-width:760px){.menu-btn{display:block}}

/* nikad horizontalni skrol */
html,body{overflow-x:clip}

/* ScrollTrigger pin upisuje širinu u px pri učitavanju. Ako se prozor
   kasnije suzi, hero bi ostao širok i gurao stranicu, pa ga držimo na ekranu. */
.pin-spacer{max-width:100%!important}
.hero{width:100%!important;max-width:100%!important}

/* demo poruka na nepopunjenim projektima */
.demo-note{max-width:720px;padding:20px 0 40px}
.demo-note-big{font-family:var(--font-head);font-size:clamp(20px,2.2vw,32px);text-transform:uppercase;line-height:1.25;margin:0 0 24px}
.demo-note p:not(.demo-note-big){color:var(--muted);font-size:18px;line-height:1.6;margin:0 0 34px;max-width:52ch}

/* padajući izbornik u stilu sajta */
.field-label{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.select{position:relative;margin-top:12px}
.select-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;border-bottom:1px solid rgba(241,239,234,.3);color:var(--fg);font:300 18px var(--font-body);padding:10px 0;cursor:pointer;text-align:left;transition:border-color .3s}
.select-btn:hover,.select.open .select-btn,.select-btn:focus-visible{border-color:var(--fg);outline:none}
.select-arrow{width:9px;height:9px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .45s cubic-bezier(.7,0,.2,1)}
.select.open .select-arrow{transform:translateY(2px) rotate(-135deg)}
.select-list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;margin:0;padding:8px 0;list-style:none;background:#161616;border:1px solid rgba(241,239,234,.14);box-shadow:0 24px 50px rgba(0,0,0,.5);outline:none;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .5s cubic-bezier(.7,0,.2,1),visibility 0s .5s}
.select.open .select-list{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .5s cubic-bezier(.7,0,.2,1),visibility 0s}
.select-list li{position:relative;padding:14px 22px 14px 44px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color .25s,background .25s}
.select-list li::before{content:"";position:absolute;left:22px;top:50%;width:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.select-list li.is-active{color:var(--fg);background:rgba(241,239,234,.04)}
.select-list li.is-active::before,.select-list li[aria-selected=true]::before{transform:scaleX(1)}
.select-list li[aria-selected=true]{color:var(--fg)}

/* mrvice na projektu i navigacija na dnu */
.crumbs{display:flex;align-items:center;gap:14px;margin-bottom:28px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.crumbs a{position:relative;color:var(--fg);padding:4px 0}
.crumbs a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.crumbs a:hover::after{transform:scaleX(1)}
.crumb-sep{opacity:.5}
.project-nav{display:flex;align-items:stretch;border-top:1px solid rgba(241,239,234,.14)}
.project-nav .next-project{flex:1;border-top:0;border-left:1px solid rgba(241,239,234,.14)}
.all-projects{display:flex;align-items:center;gap:18px;padding:70px var(--gutter);font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.all-projects .arrow{font-size:28px}
.all-projects:hover .arrow{transform:translateX(-10px)}
@media (max-width:760px){.project-nav{flex-direction:column}.project-nav .next-project{border-left:0;border-top:1px solid rgba(241,239,234,.14)}.all-projects{padding:36px var(--gutter)}}

/* karta na kontakt stranici */
.map-frame{border:1px solid rgba(241,239,234,.14)}
.map{height:min(70vh,560px);background:#0e0e0e}
.map .leaflet-tile-pane{filter:grayscale(1) contrast(1.08) brightness(.95)}
.map-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:26px 30px;border-top:1px solid rgba(241,239,234,.14)}
.map-addr{font-family:var(--font-head);font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.map-pin{background:none;border:0}
.map-pin img{position:absolute;inset:8px;width:48px;height:48px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.map-pulse{position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(255,255,255,.7);animation:mapPulse 2.4s ease-out infinite}
@keyframes mapPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.map .leaflet-control-zoom{border:0!important;box-shadow:none!important;margin:0 18px 18px 0!important}
.map .leaflet-control-zoom a{width:40px!important;height:40px!important;line-height:38px!important;background:rgba(14,14,14,.85)!important;color:var(--fg)!important;border:1px solid rgba(241,239,234,.3)!important;border-radius:0!important;font:300 20px var(--font-body)!important;transition:background .3s,color .3s}
.map .leaflet-control-zoom a+a{border-top:0!important}
.map .leaflet-control-zoom a:hover{background:var(--fg)!important;color:var(--bg)!important}
.map .leaflet-control-attribution{background:rgba(14,14,14,.7)!important;color:rgba(241,239,234,.45)!important;font:10px var(--font-body)!important;letter-spacing:.04em}
.map .leaflet-control-attribution a{color:rgba(241,239,234,.6)!important}
.map .leaflet-control-attribution .leaflet-attribution-flag{display:none!important}
.map .leaflet-container a.leaflet-popup-close-button{color:var(--fg)}
@media (prefers-reduced-motion:reduce){.map-pulse{animation:none}}
.map{position:relative}
.map-hint{position:absolute;left:18px;bottom:18px;z-index:500;pointer-events:none;padding:10px 14px;background:rgba(14,14,14,.78);border:1px solid rgba(241,239,234,.18);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,239,234,.7);transition:color .3s,border-color .3s,background .3s}
.map-hint.is-loud{color:var(--fg);border-color:var(--fg);background:rgba(14,14,14,.92)}

/* linija ispod slike kartice: iz nje se slika razvuče prema gore */
.card-line{display:block;height:1px;background:rgba(241,239,234,.45);transform-origin:left center}
.card-img{will-change:clip-path}
.home-projects{padding-top:0}
@media (prefers-reduced-motion:reduce){.menu,.select-list{transition:none}}

.desc-note{margin-top:22px!important;font-size:13px!important;line-height:1.5!important;color:var(--muted);font-style:italic;max-width:52ch}

/* podstranice: hero stoji, sadržaj ispod klizi preko njega (kao na početnoj) */
.subhero{position:sticky;top:0;z-index:0}
.subhero ~ :not(.lightbox):not(script){position:relative;z-index:1;background:var(--bg)}
.subhero + *{box-shadow:0 -30px 60px rgba(0,0,0,.45)}
.site-footer{position:relative;z-index:1;background:var(--bg)}
.subhero-dim{position:absolute;inset:0;z-index:1;background:#000;opacity:0;pointer-events:none}

/* ============ FOOTER ============ */
.site-footer{display:block;padding:0;border-top:1px solid rgba(241,239,234,.12);color:var(--fg);font-size:inherit;letter-spacing:normal}
.footer-cta{display:block;padding:90px var(--gutter) 80px;border-bottom:1px solid rgba(241,239,234,.12)}
.footer-cta .eyebrow{display:block}
.footer-cta-row{display:flex;align-items:center;justify-content:space-between;gap:30px}
.footer-title{font-family:var(--font-head);font-weight:400;font-size:clamp(28px,5.2vw,84px);line-height:1.05;text-transform:uppercase}
.footer-cta .arrow{font-size:clamp(28px,4vw,60px);transition:transform .5s cubic-bezier(.65,0,.25,1)}
.footer-cta:hover .arrow{transform:translateX(14px)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding:70px var(--gutter) 60px}
.footer-brand img{width:64px;height:64px;margin-bottom:24px}
.footer-brand p{margin:0;max-width:30ch;color:var(--muted);font-size:15px;line-height:1.6}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:15px;line-height:1.55}
.footer-col h4{margin:0 0 8px;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.footer-col .footer-h-gap{margin-top:22px}
.footer-col span{color:rgba(241,239,234,.85)}
.footer-col a{position:relative;color:rgba(241,239,234,.85);transition:color .3s}
.footer-col a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.footer-col a:hover{color:var(--fg)}
.footer-col a:hover::after{transform:scaleX(1)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px var(--gutter);border-top:1px solid rgba(241,239,234,.12);font-size:12px;letter-spacing:.08em;color:var(--muted)}
@media (max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;gap:36px;padding:56px var(--gutter) 44px}.footer-cta{padding:64px var(--gutter) 56px}.footer-bottom{flex-direction:column;align-items:flex-start}}


/* ikone društvenih mreža: samo tanka linija, bez okvira */
.socials{display:flex;gap:14px;margin-left:-6px}
.footer-col .social{display:grid;place-items:center;padding:6px;color:var(--fg);opacity:.75;transition:opacity .3s}
.footer-col .social::after{display:none}
.social svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.65,0,.25,1)}
.social svg .dot{fill:currentColor;stroke:none}
.footer-col .social:hover{opacity:1}
.social:hover svg{transform:scale(1.12)}
.social:focus-visible{outline:1px solid var(--fg);outline-offset:2px}

/* prostor ispod heroja zadan odmah (isto kao hero.js: 4,1 jedinica x 0,9 ekrana),
   pa se sadržaj ne pomiče kad se skripta učita */
.hero-spacer{height:369vh}
.notfound{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:140px var(--gutter) 100px}
.notfound .title{font-size:clamp(30px,5vw,76px);max-width:16ch;margin-bottom:10px}
.notfound .btn{margin-top:36px}

/* mobilni meni: riječi su maske, slova izranjaju kao u naslovu heroja */
.menu-links .w{overflow:hidden}
/* mobitel: tekst heroja podstranica centriran i malo iznad sredine */
@media (max-width:760px){
  .subhero{align-items:center}
  .subhero-copy{text-align:center;padding:0 var(--gutter) 14vh}
  .subhero .lead{margin-left:auto;margin-right:auto}
}

/* početna: bočni tekstovi uz os pogleda. Lijevi završava malo prije sredine
   ekrana (poravnat desno), desni počinje malo iza nje (poravnat lijevo), pa
   pri rastu iz središnje točke unutarnji rub ostaje uz sredinu. */
@media (min-width:761px){
  .scene-text[data-pos=left]{justify-content:flex-end;align-items:center;padding-right:calc(50% + 28px);text-align:right}
  .scene-text[data-pos=left] .lead{margin-left:auto}
  .scene-text[data-pos=right]{justify-content:flex-start;align-items:center;padding-left:calc(50% + 28px);text-align:left}
  .scene-text[data-pos=right] .lead{margin-left:0}
  .scene-text[data-pos=left] .title,.scene-text[data-pos=right] .title{font-size:clamp(30px,4.4vw,72px)}
}
@media (max-width:760px){
  .scene-text[data-pos]{justify-content:center;align-items:center;text-align:center;padding-left:var(--gutter);padding-right:var(--gutter)}
  .scene-text[data-pos] .lead,.scene-text[data-pos] .title{margin-left:auto;margin-right:auto}
}

/* stranica projekta na mobitelu: cijela slika u širokom kadru, ostatak ekrana
   popunjava ista slika zamućena i zatamnjena, naslov ispod slike */
@media (max-width:760px){
  [data-project] .subhero{align-items:flex-end}
  [data-project] .subhero-img::before{content:"";position:absolute;inset:-40px;z-index:0;
    background:var(--hero-bg) center/cover no-repeat;filter:blur(26px) brightness(.45) saturate(.9)}
  [data-project] .subhero-img img{position:relative;z-index:1;object-fit:contain;object-position:center 36%}
  [data-project] .subhero-img::after{z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
  [data-project] .subhero-copy{padding-bottom:9vh}
}