:root{
    /* --night/--night-2 objedinjeni s --marian: cijela tema koristi
       isključivo #404472 kao plavu (Knjiga grafičkih standarda) — nema više
       zasebne tamnije "noćne" nijanse za pozadine (topbar/footer/hero/
       mobilni i mega-izbornik). */
    --night:#404472; --night-2:#404472; --marian:#404472;
    --stone:#efe9df; --stone-2:#e3dacb; --paper:#f7f3ec;
    /* Zlatna ljestvica centrirana na točnu brend boju (--gold-soft = #b29758
       iz Knjige grafičkih standarda); --gold/--gold-ink izvedeni istim
       omjerom svjetline kao u prijašnjoj ljestvici, radi dosljednog kontrasta. */
    --gold:#927b43; --gold-soft:#b29758; --gold-ink:#63532e; --ink:#231f20; --muted:#5d6470;
    --line:rgba(64,68,114,.14);
    /* radius */
    --r-sm:3px; --r-md:8px; --r-lg:14px; --r-pill:999px;
    /* elevacija — jedan --marian ton */
    --shadow-sm:0 4px 12px rgba(64,68,114,.08);
    --shadow-md:0 14px 36px rgba(64,68,114,.13);
    --shadow-lg:0 28px 60px rgba(64,68,114,.22);
    /* tipografska skala */
    --fs-h1:clamp(2.6rem,6vw,4.6rem); --fs-h2:clamp(1.9rem,5vw,2.75rem); --fs-h3:1.5rem;
    /* vertikalni ritam sekcija */
    --space-section:clamp(64px,8vw,96px);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  [id]{scroll-margin-top:96px}  /* sticky header ne prekriva vrh sidrene sekcije */
  .skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--marian);color:#fff;padding:10px 16px;border-radius:var(--r-md);font-size:.85rem;font-weight:600;transition:top .2s}
  .skip-link:focus{top:12px}
  body{font-family:'Neue Haas Grotesk',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{font-family:'Henriette',serif;font-weight:500;line-height:1.1;letter-spacing:.2px}
  /* Reveal-on-scroll: skriveno SAMO kad je IO aktivan (klasa reveal-ready); inače uvijek vidljivo */
  .reveal-ready [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal-ready [data-reveal].in{opacity:1;transform:none}

  /* TOP BAR */
  .topbar{background:var(--night);color:var(--stone);font-size:.82rem}
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:18px}
  .topbar a{opacity:.82;transition:opacity .2s}.topbar a:hover{opacity:1}
  .topbar .right{display:flex;gap:18px;align-items:center}
  .topbar-item{display:inline-flex;align-items:center;gap:6px}
  .topbar-item svg{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

  /* HEADER */
  header{position:sticky;top:0;z-index:50;isolation:isolate;background:rgba(247,243,236,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;min-height:84px}
  .brand{display:flex;align-items:center;gap:14px}
  /* Logo isključivo iz Prilagodi → Identitet web stranice (the_custom_logo());
     tema ne nameće nikakav zadani logo/ikonu. max-height (ne fiksni height!) +
     width:auto;height:auto — omjer stranica se čuva bez obzira je li logotip
     širok, kvadratan ili uspravan. max-width:100% je sigurnosni pod za slučaj
     da vrlo širok logotip ne stane u header red na uskom ekranu: kad OBA
     max-* ograničenja djeluju istovremeno, height:auto jamči da se visina
     preračuna razmjerno prema stvarno primijenjenoj širini — nikad rastezanje. */
  .brand img.custom-logo{display:block;height:auto;width:auto;max-height:65px;max-width:100%}
  /* .crest NIJE fiksni kvadratni okvir — logotip može biti bilo kojeg omjera
     (korisnički upload preko Prilagodi), pa se skalira po VISINI kao i
     .brand img.custom-logo. Kvadratni okvir + object-fit:contain bi širok
     lockup-logotip prikazao daleko niže od 50px minimuma (audit vizualnog
     identiteta): npr. omjer 2.6:1 u kvadratu 38×38 ispadne ~15px visok. */
  .crest{flex:0 0 auto;display:flex;align-items:center;overflow:hidden}
  /* max-height (ne fiksni height) čuva omjer stranica bez rastezanja i za
     najšire logotipe; 50px minimum se zadržava jer je 70px viši strop. */
  .crest img{display:block;height:auto;width:auto;max-height:70px;max-width:100%}
  .crest a{display:flex;align-items:center}
  /* Tekstualni fallback kad korisnik nije postavio logo — bez ikakve zamjenske slike */
  .brand--text{display:flex;flex-direction:column;justify-content:center}
  .brand--text .t1{font-family:'Henriette',serif;font-size:1.4rem;color:var(--marian);line-height:1}
  .brand--text .t2{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:3px}
  /* ===== GOS-NAV — desktop mega-izbornik (>880px). Mobilni meni ostaje netaknut. ===== */
  .gos-nav{display:none}
  @media(min-width:881px){
    .gos-nav{display:block}
    .gos-nav__list{display:flex;gap:6px;list-style:none;margin:0;padding:0}
    .gos-nav__item{position:static}
    .gos-nav__top{display:inline-flex;align-items:center;gap:7px;font-family:'Neue Haas Grotesk',sans-serif;font-size:.9rem;font-weight:500;color:var(--ink);padding:10px 16px;border-radius:var(--r-md);position:relative;transition:color .2s ease,background .2s ease;white-space:nowrap}
    .gos-nav__top:hover{color:var(--marian);background:rgba(64,68,114,.055)}
    .gos-nav__top::after{content:'';position:absolute;left:16px;right:16px;bottom:6px;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
    .gos-nav__top:hover::after{transform:scaleX(1)}
    .gos-caret{width:6px;height:6px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translateY(-1px);transition:transform .25s ease,border-color .25s ease}
    .gos-nav__item.is-open>.gos-nav__top,.gos-nav__item:focus-within>.gos-nav__top{color:var(--marian)}
    .gos-nav__item.is-open>.gos-nav__top::after,.gos-nav__item:focus-within>.gos-nav__top::after{transform:scaleX(1)}
    .gos-nav__item.is-open>.gos-nav__top .gos-caret,.gos-nav__item:focus-within>.gos-nav__top .gos-caret{transform:rotate(225deg) translateY(1px);border-color:var(--gold)}

    .gos-mega{position:absolute;top:100%;left:0;right:0;z-index:45;display:flex;justify-content:center;padding:0 28px 40px;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .26s ease,transform .26s cubic-bezier(.2,.7,.2,1),visibility 0s linear .26s}
    .gos-mega__inner{width:100%;max-width:1180px;display:grid;grid-template-columns:1fr minmax(280px,340px);align-items:stretch;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
    .gos-mega__cols,.gos-mega__feature{align-self:stretch;margin:0;min-height:0}
    .gos-nav__item.is-open>.gos-mega,.gos-nav__item:focus-within>.gos-mega,.gos-nav__item:hover>.gos-mega{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition-delay:0s}
    .gos-nav[data-js="1"] .gos-nav__item:hover>.gos-mega{opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none}
    .gos-nav[data-js="1"] .gos-nav__item.is-open>.gos-mega{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
    .gos-nav[data-js="1"] .gos-nav__item:focus-within:not(.is-open)>.gos-mega{opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none}

    .gos-mega__cols{padding:30px 34px 32px}
    .gos-mega__eyebrow{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 16px;font-weight:600}
    .gos-mega__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
    .gos-mega__links a{display:block;padding:11px 14px;border-radius:var(--r-md);transition:background .18s ease;position:relative}
    .gos-mega__links a::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .2s ease}
    .gos-mega__links a:hover,.gos-mega__links a:focus-visible{background:var(--stone)}
    .gos-mega__links a:hover::before,.gos-mega__links a:focus-visible::before{transform:scaleY(1)}
    .gos-mega__lt{display:block;font-family:'Henriette',serif;font-size:1.24rem;color:var(--marian);line-height:1.15}
    .gos-mega__ld{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}

    .gos-mega__feature{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 30px;color:var(--stone);overflow:hidden;min-height:230px;background:linear-gradient(158deg,var(--marian),var(--night) 82%)}
    .gos-mega__feature--gold{background:linear-gradient(158deg,var(--marian),var(--night-2) 78%)}
    .gos-mega__feature::after{content:'';position:absolute;right:-30%;top:-30%;width:80%;height:80%;background:radial-gradient(closest-side,rgba(178,151,88,.28),transparent 70%);pointer-events:none}
    .gos-mega__fart{position:absolute;right:-6px;top:6px;width:120px;opacity:.7;pointer-events:none}
    .gos-mega__fart svg{width:100%;height:auto}
    .gos-mega__fbadge{position:absolute;right:26px;top:24px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(178,151,88,.16);border:1px solid rgba(178,151,88,.45);font-family:'Henriette',serif;font-size:1.5rem;color:var(--gold-soft)}
    .gos-mega__ftag{position:relative;z-index:1;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:9px}
    .gos-mega__ftitle{position:relative;z-index:1;font-family:'Henriette',serif;font-size:1.65rem;color:#fff;line-height:1.1;font-weight:500}
    .gos-mega__fmeta{position:relative;z-index:1;font-size:.85rem;color:rgba(247,243,236,.8);margin-top:8px}
    .gos-mega__flink{position:relative;z-index:1;margin-top:16px;font-size:.82rem;font-weight:600;color:var(--gold-soft);display:inline-flex;align-items:center;gap:6px}
    .gos-mega__flink em{font-style:normal;transition:transform .2s ease}
    .gos-mega__feature:hover .gos-mega__flink em,.gos-mega__feature:focus-visible .gos-mega__flink em{transform:translateX(4px)}
    .gos-mega__feature:focus-visible{outline:2px solid var(--gold-soft);outline-offset:-4px}
  }
  @media(prefers-reduced-motion:reduce){
    .gos-mega,.gos-nav__top::after,.gos-caret,.gos-mega__links a,.gos-mega__flink em{transition:none}
  }
  .menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:11px 12px;cursor:pointer;line-height:0}
  .menu-btn span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;margin:5px 0}

  /* ===== FULLSCREEN MOBILE MENU (suza-portal + uzvišenje) =====
     Otvaranje NE koristi clip-path (skupo za GPU/WebKit — svaki frame
     zahtijeva ponovni izračun maske na glavnoj niti). Umjesto toga: cijeli
     panel se otkriva kroz opacity (compositor-only), a "širenje svjetla iz
     hamburgera" simulira .menu-portal — malen krug koji se transform:scale()
     uveća preko cijelog zaslona pa nestane (i scale i opacity su
     compositor-only svojstva, bez layouta/repainta po frameu). */
  .menu-overlay{
    position:fixed;inset:0;z-index:100;
    background:radial-gradient(130% 110% at 50% -10%,#404472 0%,#1d2645 48%,#10162a 100%);
    color:#fff;display:flex;flex-direction:column;padding:24px 28px 30px;
    overflow:hidden;visibility:hidden;pointer-events:none;
    opacity:0;will-change:opacity;
  }
  .menu-overlay.open{visibility:visible;pointer-events:auto}
  /* Portal svjetla: baza je namjerno malena (40px) i uveća se transform:scale()-om
     na potreban faktor (izračunat u JS-u iz udaljenosti gumba do najdaljeg kuta
     zaslona) — tako preglednik nikad ne rasterizira veliku površinu odjednom
     (usporedi: sizing na punu veličinu i scale 0→1 bio bi znatno sporiji). */
  .menu-portal{
    position:absolute;top:0;left:0;z-index:1;pointer-events:none;
    width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
    background:radial-gradient(circle at 50% 50%,rgba(238,220,175,.95) 0%,rgba(178,151,88,.55) 42%,rgba(178,151,88,0) 72%);
    opacity:0;transform:translate3d(0,0,0) scale(0);will-change:transform,opacity;
  }
  /* stup svjetla — uzvišenje */
  .menu-shaft{position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(13% 46% at 50% 30%, rgba(233,212,160,.20), rgba(233,212,160,0) 70%),
      radial-gradient(34% 60% at 50% 33%, rgba(178,151,88,.22), rgba(178,151,88,0) 72%),
      radial-gradient(135% 42% at 50% -14%, rgba(178,151,88,.18), rgba(178,151,88,0) 60%);
    animation:shaftBreathe 6.5s ease-in-out infinite}
  @keyframes shaftBreathe{0%,100%{opacity:.85}50%{opacity:1}}
  .menu-motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .menu-ray{position:absolute;top:-20%;height:150%;transform-origin:50% 0%;filter:blur(20px);mix-blend-mode:screen;background:linear-gradient(180deg,rgba(178,151,88,.30),rgba(178,151,88,0) 66%);opacity:.2;pointer-events:none;will-change:opacity,transform}
  .menu-ray.mr1{left:22%;width:130px;transform:rotate(7deg)}
  .menu-ray.mr2{left:46%;width:210px;transform:rotate(-5deg)}
  .menu-ray.mr3{left:70%;width:120px;transform:rotate(12deg)}
  .menu-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
  .menu-top .mb{display:flex;align-items:center;gap:12px}
  /* Naziv svetišta istaknutiji od navigacije ispod (vizualna hijerarhija):
     t1 1.25rem→1.5rem (+4px), t2 .6rem→.85rem (+4px). */
  .menu-top .mb .t1{font-family:'Henriette',serif;font-size:1.6875rem;font-weight:600;color:#fff;line-height:1.15}
  .menu-top .mb .t2{font-size:.6625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);margin-top:4px}
  .menu-close{background:none;border:1px solid rgba(247,243,236,.3);border-radius:50%;width:44px;height:44px;cursor:pointer;position:relative;flex:0 0 auto;transition:border-color .2s}
  .menu-close:hover{border-color:var(--gold-soft)}
  .menu-close::before,.menu-close::after{content:'';position:absolute;left:50%;top:50%;width:17px;height:1.6px;background:var(--stone);border-radius:2px}
  .menu-close::before{transform:translate(-50%,-50%) rotate(45deg)}
  .menu-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

  .menu-nav{margin:auto 0;display:flex;flex-direction:column;gap:2px;position:relative;z-index:2}
  /* Malo suptilnija od logotipa/naziva iznad (vizualna hijerarhija) — clamp
     spušten za ~4-5px na tipičnim mobilnim širinama (360-430px), i dalje
     jasno čitljivo i dostupno za dodir. */
  .menu-nav .m-row{font-family:'Henriette',serif;font-weight:500;font-size:clamp(1.8375rem,7vw,2.5875rem);color:#fff;display:flex;align-items:center;gap:14px;padding:8px 0;line-height:1.05;width:100%;background:none;border:none;text-align:left;cursor:pointer}
  .menu-nav .m-row .lbl{flex:1 1 auto}
  /* Stavka s podizbornikom: naziv (link, ide na roditeljsku stranicu) i strelica
     (gumb, otvara/zatvara podizbornik) su odvojeni klikabilni ciljevi — vidi
     gos_render_mobile_nav(). .m-row je sad div-omotač oko oba. */
  .m-item.has-sub .m-row-link{display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:0;color:inherit;text-decoration:none}
  .m-item.has-sub .m-row-toggle{background:none;border:none;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:16px 6px 16px 20px;margin:-16px -6px -16px -20px}
  .menu-nav .drop{width:10px;height:13px;flex:0 0 auto;opacity:.55;transition:opacity .2s,transform .2s}
  .menu-nav .m-row:hover .drop,.menu-nav .m-row:active .drop{opacity:1;transform:translateY(-2px)}
  .menu-nav .drop path{fill:var(--gold-soft)}
  .menu-nav .chev{width:11px;height:11px;border-right:2px solid var(--gold-soft);border-bottom:2px solid var(--gold-soft);transform:rotate(45deg);transition:transform .25s;opacity:.85;flex:0 0 auto}
  .m-item.open>.m-row .chev{transform:rotate(-135deg)}
  .m-sub{height:0;overflow:hidden;opacity:0;padding-left:24px;display:flex;flex-direction:column;gap:1px}
  .m-sub a{font-family:'Henriette',serif;font-weight:500;font-size:1.18rem;color:rgba(247,243,236,.82);padding:8px 0;display:block}
  .m-sub a:hover{color:var(--gold-soft)}

  .menu-foot{border-top:1px solid rgba(247,243,236,.16);padding-top:20px;display:flex;flex-direction:column;gap:16px;position:relative;z-index:2}
  .menu-foot .info{font-size:.9rem;color:rgba(247,243,236,.78);display:flex;flex-direction:column;gap:8px}
  /* Svaki kontakt (adresa/telefon/e-mail) u vlastitom redu — prije su bili u
     jednom <p> odvojeni s " · ", pa se na uskim ekranima e-mail lomio u novi
     red na neugodnom mjestu. flex:0 0 auto na ikoni jamči da ikona i tekst
     ostanu zajedno; sam tekst se smije prelomiti unutar svog reda. */
  .menu-foot .info-row{display:flex;align-items:flex-start;gap:9px}
  /* stroke-width je u SVG-ovom vlastitom 24×24 koordinatnom sustavu, pa se
     stvarna debljina linije na ekranu smanjuje razmjerno s prikaznom
     veličinom — ista stroke-width vrijednost kao na većim (22px) ikonama
     Kontakt stranice ovdje ispadne vizualno tanja. 2.2 + 1px veća ikona
     nadoknađuje to bez upadljive promjene veličine. */
  .menu-foot .info-row svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
  .menu-foot .info-row span,.menu-foot .info-row a{min-width:0;overflow-wrap:break-word}
  .menu-foot .info-row a{color:inherit}
  .menu-foot .row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .menu-foot .socials{display:flex;gap:10px}
  .menu-foot .socials a{width:38px;height:38px;border:1px solid rgba(247,243,236,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}
  .menu-foot .socials a:hover{background:var(--gold);border-color:var(--gold)}
  .menu-foot .socials svg{width:17px;fill:currentColor}
  .menu-foot .oldlink{color:var(--gold-soft);font-weight:600;font-size:.9rem;white-space:nowrap}

  /* HERO */
  .hero{position:relative;min-height:74vh;display:flex;align-items:flex-end;
    background:linear-gradient(180deg,rgba(64,68,114,.32) 0%,rgba(64,68,114,.62) 70%,rgba(64,68,114,.85) 100%),radial-gradient(120% 90% at 70% 10%,#404472 0%,var(--night) 70%);overflow:hidden}
  .hero-bg{position:absolute;inset:0;z-index:0;background-image:var(--hero-bg,none);background-size:cover;background-position:center}
  .hero-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(64,68,114,.35) 0%,rgba(64,68,114,.55) 62%,rgba(64,68,114,.8) 100%)}
  .teardrop{position:absolute;right:8%;top:6%;width:340px;height:440px;opacity:.16;pointer-events:none}
  .hero-light{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
  .ray{position:absolute;top:-25%;height:150%;transform-origin:top center;filter:blur(16px);mix-blend-mode:screen;background:linear-gradient(180deg,rgba(178,151,88,.26),rgba(178,151,88,0) 68%);opacity:.18;will-change:opacity,transform}
  .ray.r1{left:54%;width:130px;transform:rotate(9deg)}
  .ray.r2{left:66%;width:230px;transform:rotate(-7deg)}
  .ray.r3{left:82%;width:90px;transform:rotate(15deg)}
  .motes{position:absolute;inset:0;width:100%;height:100%}
  .hero-inner{position:relative;z-index:2;padding:0 28px 66px;color:var(--stone)}
  .hero .eyebrow{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:20px}
  .hero h1{font-size:clamp(2.6rem,6vw,4.6rem);color:#fff;font-weight:400;max-width:14ch}
  .hero h1 em{font-style:italic;color:var(--gold-soft)}
  .hero p.lead{margin-top:22px;max-width:52ch;font-size:1.08rem;color:rgba(247,243,236,.88)}
  .hero .cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
  .btn{display:inline-block;padding:13px 26px;border-radius:2px;font-size:.86rem;font-weight:600;letter-spacing:.02em;transition:all .22s;cursor:pointer}
  .btn-primary{background:var(--gold-soft);color:#fff}.btn-primary:hover{background:var(--gold)}
  .btn-ghost{border:1px solid rgba(247,243,236,.45);color:var(--stone)}.btn-ghost:hover{background:rgba(247,243,236,.1);border-color:var(--stone)}

  /* SCROLL-SCALE REVEAL */
  .reveal-section{height:100vh;position:relative;background:#ffffff;overflow:hidden}
  .reveal-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
  .reveal-media{position:relative;width:100%;height:100%;overflow:hidden;border-radius:0;will-change:transform;transform:none}
  .reveal-sky{position:absolute;inset:0;background:linear-gradient(180deg,#0d1428 0%,#16203c 34%,#283457 56%,#5c4a3e 78%,#8f6a3f 90%,#caa05c 100%)}
  .reveal-silhouette{position:absolute;inset:0;width:100%;height:100%}
  .reveal-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .reveal-video.errored{opacity:0}
  .reveal-grain{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 110%,rgba(202,160,92,.35),transparent 60%);mix-blend-mode:screen;opacity:.7}
  .reveal-caption{position:absolute;left:0;right:0;bottom:14%;z-index:3;text-align:center;color:#fff;padding:0 24px;opacity:1}
  .reveal-caption .eyebrow{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px}
  .reveal-caption h2{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:400;color:#fff;max-width:18ch;margin:0 auto}
  .reveal-caption h2 em{font-style:italic;color:var(--gold-soft)}
  .scroll-hint{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:4;color:var(--muted);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
  .scroll-hint .line{width:1px;height:30px;background:linear-gradient(var(--gold-soft),transparent)}

  /* MISE */
  .mise{background:var(--night-2);color:var(--stone)}
  .mise .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:0}
  .mise-left{padding:64px 56px 64px 0}
  .mise-left .eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:16px}
  .mise-left h2{font-size:var(--fs-h2);color:#fff;margin-bottom:18px}
  .mise-left p{color:rgba(247,243,236,.78);max-width:40ch;font-size:.97rem}
  .mise-right{border-left:1px solid rgba(247,243,236,.16);padding:54px 0 54px 56px}
  .mrow{display:flex;justify-content:space-between;align-items:baseline;padding:15px 0;border-bottom:1px solid rgba(247,243,236,.1)}
  .mrow:last-child{border-bottom:none}
  .mrow .day{font-family:'Henriette',serif;font-size:1.35rem;color:var(--stone)}
  .mrow .day small{display:block;font-family:'Neue Haas Grotesk';font-size:.72rem;letter-spacing:.04em;color:rgba(247,243,236,.55);text-transform:uppercase;margin-top:2px}
  .mrow .time{font-size:1.05rem;font-weight:500;color:var(--gold-soft);letter-spacing:.04em}

  /* NOVOSTI */
  .news{padding:var(--space-section) 0}
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px}
  .sec-head .eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:8px}
  .sec-head h2{font-size:var(--fs-h2);color:var(--marian)}
  .sec-head .more{font-size:.85rem;font-weight:600;color:var(--marian);border-bottom:1px solid var(--gold);padding-bottom:2px}
  .news-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:28px}
  .feat{position:relative;border-radius:3px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end;background:linear-gradient(180deg,rgba(64,68,114,0) 30%,rgba(64,68,114,.9) 100%),linear-gradient(135deg,#404472,var(--night-2));color:#fff}
  .feat .body{padding:34px 32px;position:relative;z-index:2}
  .feat .tag{display:inline-block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:12px}
  .feat h3{font-size:1.9rem;color:#fff;max-width:20ch;font-weight:500}
  .feat p{margin-top:10px;color:rgba(247,243,236,.82);font-size:.92rem;max-width:46ch}
  .feat .date{margin-top:14px;font-size:.78rem;color:rgba(247,243,236,.6)}
  .minor-col{display:flex;flex-direction:column;gap:18px}
  .minor{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .minor:last-child{border-bottom:none}
  .minor .thumb{width:96px;height:84px;border-radius:3px;background:linear-gradient(135deg,#d9cfba,#c3b69b)}
  .minor .thumb.t2{background:linear-gradient(135deg,#cdbfa0,#a9966f)}
  .minor .thumb.t3{background:linear-gradient(135deg,#bcc6da,#8c9ec2)}
  .minor .tag{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);display:block;margin-bottom:5px}
  .minor h4{font-family:'Henriette',serif;font-weight:600;font-size:1.18rem;line-height:1.2;color:var(--ink)}
  .minor .date{font-size:.74rem;color:var(--muted);margin-top:6px}

  /* DOBRODOSLICA */
  .welcome{background:var(--stone);padding:var(--space-section) 0}
  .welcome .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .welcome .eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:14px}
  .welcome h2{font-size:var(--fs-h2);color:var(--marian);margin-bottom:20px;line-height:1.15}
  .welcome p{color:var(--muted);margin-bottom:16px;font-size:1.02rem}
  .welcome .sig{font-family:'Henriette',serif;font-style:italic;font-size:1.3rem;color:var(--ink);margin-top:8px}
  .welcome-art{aspect-ratio:4/5;border-radius:3px;background:radial-gradient(80% 60% at 50% 30%,rgba(146,123,67,.25),transparent),linear-gradient(160deg,#404472,var(--night));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
  .welcome-art svg{width:150px;opacity:.9}

  /* FOOTER */
  footer{background:var(--night);color:rgba(247,243,236,.78);padding:64px 0 28px}
  .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;padding-bottom:40px;border-bottom:1px solid rgba(247,243,236,.14)}
  footer h4{font-family:'Neue Haas Grotesk';font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:18px;font-weight:600}
  /* Lijeva strana footera (naziv, adresa, kontakt) — puna bijela, ne prigušena krem nijansa */
  .fbrand{color:#fff}
  footer .fbrand .t1{font-family:'Henriette',serif;font-size:1.5rem;color:#fff;margin-bottom:10px}
  footer p,footer li{font-size:.9rem;line-height:1.9}
  .finfo-row{display:inline-flex;align-items:center;gap:7px}
  .finfo-row svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
  footer ul{list-style:none}
  /* Stavke pod "Rubrike" i "Svetište" — puna bijela; opacity/hover ponašanje nedirano */
  .footer-menu{color:#fff}
  footer ul a{opacity:.8;transition:opacity .2s}footer ul a:hover{opacity:1;color:var(--gold-soft)}
  .socials{display:flex;gap:12px;margin-top:16px}
  .socials a{width:38px;height:38px;border:1px solid rgba(247,243,236,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}
  .socials a:hover{background:var(--gold);border-color:var(--gold)}
  .socials svg{width:17px;fill:currentColor}
  /* "Tražite raniji sadržaj?" — puna bijela; poveznica ispod zadržava zlatnu (pravilo ispod) */
  .archive-note{background:rgba(247,243,236,.06);border:1px solid rgba(247,243,236,.14);border-radius:3px;padding:16px 20px;margin-top:18px;font-size:.86rem;color:#fff}
  .archive-note a{color:var(--gold-soft);font-weight:600}
  .fbot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:.8rem;opacity:.6;flex-wrap:wrap;gap:10px}

  /* ===== HEADER ACTIONS / SEARCH ICON ===== */
  .head-actions{display:flex;align-items:center;gap:10px}
  .icon-btn{background:none;border:1px solid var(--line);border-radius:8px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:border-color .2s,background .2s;flex:0 0 auto}
  .icon-btn:hover{border-color:var(--gold)}
  .icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

  /* ===== SEARCH OVERLAY ===== */
  .search-overlay{position:fixed;inset:0;z-index:90;background:rgba(16,22,42,.5);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
  .search-overlay.open{opacity:1;visibility:visible}
  .search-panel{background:var(--paper);transform:translateY(-26px);opacity:0;transition:transform .34s cubic-bezier(.2,.7,.2,1),opacity .3s;padding:28px 28px 32px;box-shadow:0 24px 60px rgba(16,22,42,.32)}
  .search-overlay.open .search-panel{transform:translateY(0);opacity:1}
  .search-inner{max-width:760px;margin:0 auto}
  .search-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
  .search-top .lbl{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft)}
  .search-field{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--marian);padding-bottom:12px}
  .search-field svg{width:24px;height:24px;stroke:var(--marian);fill:none;stroke-width:2;stroke-linecap:round;flex:0 0 auto}
  .search-field input{flex:1;min-width:0;border:none;background:none;outline:none;font-family:'Henriette',serif;font-size:1.9rem;color:var(--ink)}
  .search-field input::placeholder{color:#5f6672}
  .search-quick{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
  .search-quick .q{font-size:.82rem;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--marian);cursor:pointer;transition:all .2s}
  .search-quick .q:hover{background:var(--stone);border-color:var(--gold)}
  .search-overlay .search-results{margin-top:14px;list-style:none;max-height:46vh;overflow:auto}
  .search-overlay .search-results a{display:flex;align-items:baseline;gap:12px;padding:12px 6px;border-bottom:1px solid var(--line);color:var(--ink);font-size:.98rem}
  .search-overlay .search-results a:hover{background:var(--stone)}
  .search-overlay .search-results .cat{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);flex:0 0 auto;min-width:80px}
  .search-overlay .search-empty{padding:16px 6px;color:var(--muted);font-size:.92rem}

  /* ===== DEVETNICA BANNER ===== */
  .devetnica{background:var(--stone);border-top:2px solid var(--gold);border-bottom:2px solid var(--gold)}
  .devetnica[hidden]{display:none}
  .devetnica .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;flex-wrap:wrap}
  .devetnica .d-main{display:flex;align-items:center;gap:20px;min-width:0}
  .devetnica .d-badge{flex:0 0 auto;width:64px;height:64px;border-radius:50%;background:var(--marian);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gold-soft);box-shadow:0 8px 20px rgba(64,68,114,.28)}
  .devetnica .d-badge b{font-family:'Henriette',serif;font-size:1.65rem;line-height:1}
  .devetnica .d-badge span{font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;margin-top:1px;color:rgba(247,243,236,.75)}
  .devetnica .d-txt .lbl{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:5px}
  .devetnica .d-txt h3{font-family:'Henriette',serif;font-size:1.55rem;color:var(--marian);font-weight:500;line-height:1.12}
  .devetnica .d-txt p{font-size:.88rem;color:var(--muted);margin-top:5px}
  .devetnica .d-cta{flex:0 0 auto;background:var(--gold-soft);color:#fff;padding:12px 24px;border-radius:2px;font-size:.82rem;font-weight:600;white-space:nowrap;transition:background .2s}
  .devetnica .d-cta:hover{background:var(--gold)}

  /* ===== INFO SLIDER ===== */
  .infoslider{background:var(--stone);padding:var(--space-section) 0}
  .infoslider .sec-head{max-width:1180px;margin:0 auto 24px;padding:0 24px;display:block}
  /* padding (lijevo/desno) namjerno JEDNAK gap-u ispod — cijeli slider (margina
     prije 1. kartice, razmak između kartica, margina nakon zadnje) mora imati
     dosljedan, jednak razmak na svim širinama. */
  .is-track{position:relative;display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:14px 24px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .is-track::-webkit-scrollbar{display:none}
  /* Vlastita (uža) sjena umjesto --shadow-md: --shadow-md-ov blur (36px) vidljivo
     "curi" u prostor prema .is-nav ispod i stvara privid dvije nijanse pozadine
     unutar iste komponente iako je boja identična — vidi .is-nav niže. */
  /* min-width:0 — bez ovoga, flex-itemov default min-width:auto sprječava karticu
     da bude uža od svog najdužeg neprelomivog sadržaja (npr. e-mail adresa u
     .is-row .d), pa bi ta jedna kartica bila šira od ostalih na uskim ekranima.
     max-width podignut sa 380px na 560px — na tabletima/manjim telefonima u
     pejzažu kartica sad koristi puno više raspoloživog prostora umjesto da
     ostane zaglavljena na "telefonskoj" širini sve do desktop grida (881px). */
  .is-card{flex:0 0 88%;max-width:560px;min-width:0;scroll-snap-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:30px 28px 26px;box-shadow:0 6px 16px rgba(64,68,114,.10);display:flex;flex-direction:column}
  /* Mekan prijelaz svjetla odozgo prema dolje — tamnije (plava→crna) pri vrhu,
     čista brend plava u sredini, blago posvijetljeno (plava→bijela) pri dnu.
     Sve nijanse dobivene isključivo miješanjem odobrenih boja teme
     (color-mix, ne nove hex vrijednosti). Fallback color:#404472 za starije
     preglednike bez podrške za color-mix(). */
  .is-card .ic-img{background:#404472;background:linear-gradient(180deg,color-mix(in srgb,#404472 78%,#000000 22%) 0%,#404472 48%,color-mix(in srgb,#404472 75%,#ffffff 25%) 100%);width:94px;height:94px;border-radius:50%;margin:0 auto 18px;display:flex;align-items:center;justify-content:center}
  .is-card .ic-img svg{width:42px;height:42px;stroke:var(--gold-soft);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .is-card h3{font-family:'Henriette',serif;font-size:1.7rem;color:var(--marian);text-align:center;margin-bottom:16px;font-weight:500}
  /* .is-row je UGNIJEŽĐEN flex-item unutar .is-card (koji je i sam flex/grid-item) —
     "min-width:0" na samoj .is-card NIJE dovoljan: bez min-width:0 i ovdje, .is-row
     (i .d unutra) nose vlastiti auto-min-width temeljen na najdužoj neprelomivoj
     riječi (npr. e-mail), pa sadržaj zna izbiti izvan kartice iako je kartica
     izvana ispravne širine. overflow-wrap:anywhere (ne samo break-word) je bitan
     jer JEDINO on stvarno smanjuje min-content veličinu koju flex/grid vidi —
     break-word to ne radi, pa je tekst prije samo naizgled bio "siguran". */
  .is-row{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);min-width:0}
  .is-row:last-child{border-bottom:none}
  .is-row .t{flex:0 0 auto;min-width:78px;font-weight:600;color:var(--ink);font-size:.92rem}
  .is-row .t small{display:block;font-weight:400;color:var(--muted);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase}
  .is-row .d{color:var(--muted);font-size:.92rem;border-left:2px solid var(--gold-soft);padding-left:14px;line-height:1.5;overflow-wrap:anywhere;min-width:0;flex:1 1 auto}
  .is-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px}
  .is-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--stone);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--marian);transition:all .2s}
  .is-arrow:hover{border-color:var(--gold);color:var(--gold)}
  .is-arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .is-dots{display:flex;gap:9px}
  .is-dot{width:8px;height:8px;border-radius:50%;background:#cfc6b5;cursor:pointer;transition:all .25s;border:none;padding:0}
  .is-dot.active{background:var(--gold);width:24px;border-radius:4px}
  /* desktop: statični 3-stupčani grid; slider (strelice/točkice) samo na mobitelu */
  @media(min-width:881px){
    .is-track{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;overflow:visible;max-width:1180px;margin:0 auto;padding:14px 24px}
    .is-card{max-width:none}
    .is-nav{display:none}
  }

  @media(max-width:880px){
    .search-field input{font-size:1.5rem}
    .devetnica .wrap{gap:16px}
    .devetnica .d-cta{width:100%;text-align:center}
  }

  @media(max-width:880px){
    .topbar{display:none}
    nav ul{display:none}
    .menu-btn{display:block}
    /* Bez ovoga, .nav{justify-content:space-between} ne jamči NIKAKAV razmak —
       na uskim mobilnim širinama brand blok i head-actions znaju zbrojeno točno
       popuniti dostupan prostor, pa se dotiču (izmjereno: 0px razmaka na
       360-430px). gap postavlja zajamčeni minimum; suženi brand (niže) daje mu
       prostora bez da search/hamburger gumbi ikad postanu manji za dodir. */
    .nav{gap:12px}
    .brand{gap:10px;min-width:0}
    /* Bočni razmak headera smanjen (bilo 28px, kao i .wrap posvuda drugdje na
       stranici) SAMO ovdje, samo na mobitelu — daje logotipu ~32px više
       raspoložive širine. Bez ovoga, izmjereno na stvarnom (širokom, omjer
       ~4.29:1) uploadanom logotipu: 43.9px na 360px i 47.3px na 375px širine
       — ISPOD 50px minimuma iz Knjige grafičkih standarda (str. 16). S ovim
       razmakom: 51.4px na 360px, 55px na 390px — dosljedno iznad minimuma.
       Ne dira .wrap izvan headera (selektor je specifičan na header .wrap). */
    header .wrap{padding:0 12px}
    /* max-height (ne fiksni height) + width:auto;height:auto na .brand img —
       omjer stranica se čuva bez rastezanja bez obzira širi/kvadratni/uspravni
       logotip; max-width:100% je sigurnosni pod za ekstremno široke omjere. */
    .brand img.custom-logo{max-height:65px}
    .brand--text{min-width:0}
    .brand--text .t1{font-size:1.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .brand--text .t2{font-size:.62rem}
    .mise .wrap{grid-template-columns:1fr}
    .mise-left{padding:48px 0 24px}
    .mise-right{border-left:none;border-top:1px solid rgba(247,243,236,.16);padding:24px 0 48px}
    .news-grid{grid-template-columns:1fr}
    .feat{min-height:340px}
    .welcome .wrap{grid-template-columns:1fr;gap:36px}
    .welcome-art{aspect-ratio:16/10}
    .fgrid{grid-template-columns:1fr;gap:32px}
    .teardrop{width:200px;right:-30px;opacity:.1}
    /* .hero-inner nema gornji padding (samo 66px donji, za razmak iznad CTA gumba).
       Na visokim desktop ekranima to ne smeta (74vh ostavlja puno praznog prostora
       iznad sadržaja), ali na niskim mobilnim viewportima hero-sadržaj zna sjesti
       tik uz header, bez ikakvog razmaka. Mali gornji padding to ublažava. */
    .hero-inner{padding-top:40px}
  }
  @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.menu-shaft{animation:none}}
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px}