:root{
  color-scheme:dark;
  --ink:#04070C;
  --paper:#FFFFFF;
  --muted:#D6DEE6;
  /* zlatna preuzeta iz logoa (assets/logo.png) */
  --brass:#F2D47A;
  --brass-rgb:242,212,122;
  --brass-lit:#F8E2A0;   /* hover, svetlija */
  --brass-deep:#B6932B;  /* na beloj podlozi */
  --brass-ink:#000;      /* tekst preko zlatne */
  --btn-r:12px;          /* radijus dugmadi */
  --panel-w:min(34vw,400px);
}
*{margin:0;padding:0;box-sizing:border-box}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{display:block;color:inherit}
body{
  background:var(--ink);color:var(--paper);
  font-family:'Outfit',system-ui,sans-serif;font-weight:400;
  font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2{font-family:'Outfit',sans-serif;font-weight:600;line-height:1.05}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

#boot{position:fixed;inset:0;z-index:60;background:var(--ink);display:grid;place-items:center;
  align-content:center;gap:30px;transition:opacity .8s ease}
#boot img{width:min(50vw,280px);height:auto;display:block}
.boot-bar{width:min(44vw,210px);height:2px;border-radius:2px;background:rgba(var(--brass-rgb),.16);overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:var(--brass);transition:width .3s ease}
#boot.gone{opacity:0;pointer-events:none}

/* video pinned */
.tour{position:relative;height:var(--tour-h,720svh)}
.stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:flex-end;
  padding-right:6vw;pointer-events:none;z-index:1}
.frame{position:relative;width:var(--panel-w);aspect-ratio:9/16;max-height:82svh;overflow:hidden;background:#000;
  box-shadow:0 40px 130px -30px rgba(0,0,0,.95),0 0 0 1px rgba(var(--brass-rgb),.25)}
.frame video{width:100%;height:100%;object-fit:cover;display:block}

/* the scrim that makes text readable over bright footage */
.scrim{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(4,7,12,.86) 0%,rgba(4,7,12,.62) 30%,rgba(4,7,12,.14) 52%,transparent 66%)}

/* copy is pinned over the video too; each beat fades in while the film is inside its scene */
.copy{position:sticky;top:0;height:100svh;margin-top:-100svh;z-index:3;pointer-events:none}
.beat{position:absolute;inset:0;display:flex;align-items:center;padding:0 6vw}
.beat > div{max-width:33rem;opacity:0;visibility:hidden;transform:translateY(18px);
  transition:opacity .5s ease,visibility .5s,transform .6s cubic-bezier(.2,.7,.3,1);pointer-events:auto;
  text-shadow:0 2px 26px rgba(0,0,0,.75)}
.beat.live > div{opacity:1;visibility:visible;transform:none}

h1{font-size:clamp(56px,8.5vw,120px);letter-spacing:-.015em}
h1 span{display:block;font-family:'Outfit',sans-serif;font-size:.28em;font-weight:500;
  letter-spacing:.4em;color:var(--brass);margin-bottom:24px;line-height:1;text-shadow:none}
.beat h2{font-size:clamp(36px,4.6vw,62px);margin-bottom:22px}
.beat h2 em{font-style:italic;font-weight:400}
.beat p{color:var(--muted);max-width:28rem;font-size:17px}
.beat p + p{margin-top:14px}

.slot{border-left:2px solid var(--brass);padding-left:22px;color:var(--brass);
  font-size:13px;letter-spacing:.22em;text-shadow:none}
.slot b{display:block;font-family:'Outfit',sans-serif;font-weight:500;font-size:30px;
  letter-spacing:0;color:var(--paper);margin-bottom:8px}

.scrollcue{position:absolute;left:6vw;bottom:7vh;display:flex;align-items:center;gap:14px;
  font-size:12px;letter-spacing:.26em;color:var(--muted);z-index:4}
.scrollcue i{display:block;width:54px;height:1px;background:linear-gradient(to right,var(--brass),transparent);
  animation:pull 2.4s ease-in-out infinite}
@keyframes pull{0%,100%{transform:translateX(0);opacity:.4}50%{transform:translateX(12px);opacity:1}}

@media (max-width:820px){
  .stage{padding:0;justify-content:center}
  .frame{width:100%;height:100svh;max-height:none;aspect-ratio:auto;box-shadow:none}
  .scrim{background:linear-gradient(to top,rgba(4,7,12,.9) 0%,rgba(4,7,12,.72) 22%,rgba(4,7,12,.28) 46%,transparent 68%)}
  .beat{align-items:flex-end;padding:0 7vw 16vh}
  .beat > div{max-width:100%}
  .beat > div:not(.hero){background:rgba(8,13,20,.03);backdrop-filter:blur(4px) saturate(115%);-webkit-backdrop-filter:blur(4px) saturate(115%);
    border:1px solid rgba(255,255,255,.04);border-radius:18px;padding:26px 24px;box-shadow:none;
    text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.85),0 4px 30px rgba(0,0,0,.8)}
  .scrollcue{bottom:10.5vh;left:7vw}
}
/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:26px 6vw;transition:background .5s ease,padding .5s ease,box-shadow .5s ease}
.nav::after{content:"";position:absolute;left:6vw;right:6vw;bottom:0;height:1px;
  background:linear-gradient(to right,transparent,rgba(var(--brass-rgb),.34),transparent);opacity:0;transition:opacity .5s}
.nav.solid{background:rgba(4,7,12,.62);backdrop-filter:blur(18px) saturate(140%);padding:16px 6vw}
.nav.solid::after{opacity:1}
.nav a.logo{display:flex;align-items:center;text-decoration:none}
.nav a.logo img{height:36px;width:auto;display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))}
.nav ul{display:flex;gap:30px;list-style:none;align-items:center}
.nav ul a{position:relative;color:rgba(255,255,255,.82);text-decoration:none;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;padding:6px 2px;transition:color .3s;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}
.nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--brass);transition:right .35s cubic-bezier(.2,.7,.3,1)}
.nav ul a:hover,.nav ul a:focus-visible{color:#fff}
.nav ul a:hover::after,.nav ul a:focus-visible::after{right:0}
.nav ul li:last-child a{border:1px solid rgba(var(--brass-rgb),.5);color:var(--brass);padding:10px 20px;border-radius:var(--btn-r)}
.nav ul li:last-child a::after{display:none}
.nav ul li:last-child a:hover{background:rgba(var(--brass-rgb),.12);color:var(--brass)}
.nav .call{display:none}

/* ---------- scroll-reveal statement ---------- */
.glow{position:relative;z-index:4;background:var(--ink);height:260vh}
.glow-stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.glow-text{position:relative;max-width:54rem;padding:0 6vw;text-align:center;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(26px,4vw,52px);
  line-height:1.34;letter-spacing:-.01em;
  background-image:linear-gradient(180deg,
    var(--ink) 0%,var(--ink) 24%,
    var(--brass) 38%,var(--brass) 62%,
    var(--ink) 76%,var(--ink) 100%);
  background-size:100% 380%;background-position:0% 0%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

@media (prefers-reduced-motion:reduce){
  .glow-text{background:none;color:var(--brass);-webkit-text-fill-color:var(--brass)}
}
@media (max-width:820px){
  .glow{height:220vh}
}

/* ---------- shared section chrome ---------- */
.sec{position:relative;z-index:4;background:var(--ink);padding:14vh 6vw}
.sec + .sec{border-top:1px solid rgba(var(--brass-rgb),.14)}
.sec h2{font-family:'Outfit',sans-serif;font-weight:600;font-size:clamp(32px,4vw,54px);line-height:1.06;margin-bottom:16px}
.sec h2 em{font-style:italic;font-weight:400}
.sec .intro{color:var(--muted);max-width:34rem;margin-bottom:60px;font-size:17px}

/* gallery */
.gallery-pin{position:relative}
.gallery-stage{overflow:visible}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.shots figure{position:relative;overflow:hidden;background:#0B141E;border-radius:20px;border:1px solid rgba(255,255,255,.08)}
.shots img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.shots figure:hover img{transform:scale(1.04)}
.shots figcaption{position:absolute;left:14px;bottom:14px;font-size:11px;letter-spacing:.14em;
  color:#fff;padding:8px 16px;border-radius:999px;background:rgba(8,13,20,.3);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.18)}
.shots .wide{grid-column:span 2}
.note{margin-top:22px;font-size:13.5px;color:var(--muted)}

/* mega metraza — apple-style scroll zoom into white */
.mega{position:relative;height:340vh;background:var(--ink);z-index:4}
.mega-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.mega-num{font-family:'Outfit',sans-serif;font-weight:700;font-size:clamp(140px,34vw,480px);line-height:.9;
  letter-spacing:-.03em;color:var(--paper);will-change:transform,opacity}
.mega-label{margin-top:22px;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass);will-change:opacity}
.mega-white{position:absolute;inset:0;background:#fff;opacity:0;display:flex;align-items:center;justify-content:center;will-change:opacity}
.mega-benefits{display:flex;flex-direction:column;align-items:center;gap:36px;opacity:0;transform:translateY(26px);will-change:opacity,transform}
.mega-benefit{display:flex;flex-direction:column;align-items:center;gap:8px}
.mega-benefit svg{width:28px;height:28px;color:var(--brass-deep)}
.mega-benefit b{font-family:'Outfit',sans-serif;font-weight:600;font-size:46px;line-height:1;color:#0B0F14}
.mega-benefit span{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:#6b6f76}
@media (max-width:820px){
  .mega{height:280vh}
  .mega-num{font-size:clamp(96px,40vw,220px)}
  .mega-benefits{gap:26px}
  .mega-benefit b{font-size:38px}
}
@media (prefers-reduced-motion:reduce){
  .mega{height:auto}
  .mega-stage{position:relative;height:auto;padding:16vh 6vw}
  .mega-num{transform:none!important;opacity:0!important}
  .mega-label{opacity:0!important}
  .mega-white{position:relative;inset:auto;opacity:1!important;padding:10vh 6vw;border-radius:20px}
  .mega-benefits{opacity:1!important;transform:none!important}
}

/* location */
.place{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:stretch}
.place-card{background:rgba(255,255,255,.03);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:34px 32px}
.place-card h3{font-size:12.5px;letter-spacing:.2em;color:var(--brass);font-weight:400;text-transform:uppercase}
.place-list{list-style:none;margin-top:22px}
.place-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(226,232,240,.08)}
.place-list li:last-child{border-bottom:0}
.place-item{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--paper)}
.place-item svg{width:18px;height:18px;flex:0 0 auto;color:var(--brass)}
.place-dist{font-size:12.5px;letter-spacing:.05em;color:var(--muted);border:1px solid rgba(var(--brass-rgb),.3);
  padding:5px 13px;border-radius:999px;white-space:nowrap;flex:0 0 auto}
.map{aspect-ratio:4/3;border:1px solid rgba(var(--brass-rgb),.2);border-radius:20px;overflow:hidden;background:#0B141E;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.4) invert(.92) hue-rotate(180deg)}
@media (max-width:820px){
  .place-card{padding:26px 22px}
}

/* amenities */
.facility-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:34px 40px}
.facility-groups h3{font-size:12.5px;letter-spacing:.2em;margin-bottom:14px;color:var(--brass);font-weight:400;text-transform:uppercase}
.facility-list{list-style:none;font-size:16px;color:var(--muted)}
.facility-list li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(226,232,240,.06)}
.facility-list li:last-child{border-bottom:0}
.facility-list svg{width:19px;height:19px;flex:0 0 auto;color:var(--brass);opacity:.9}

/* reviews */
.score-card{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:44px;
  background:rgba(255,255,255,.03);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:26px 30px}
.score-badge{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;border-radius:14px;
  background:var(--brass);color:var(--brass-ink);font-family:'Outfit',sans-serif;font-weight:600;font-size:26px}
.score-info{margin-right:auto}
.score-info b{display:block;font-family:'Outfit',sans-serif;font-weight:500;font-size:20px;margin-bottom:4px}
.score-info span{color:var(--muted);font-size:13.5px}
.booking-badge{display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.booking-dot{width:22px;height:22px;border-radius:50%;background:#003580;color:#fff;
  display:grid;place-items:center;font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;flex:0 0 auto}
.booking-name{font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;color:var(--paper);letter-spacing:.01em}
.booking-name em{font-style:normal;font-weight:400;color:var(--muted)}

.says{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.review-card{position:relative;background:rgba(255,255,255,.03);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:30px 28px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s ease,background .35s ease}
.review-card:hover{transform:translateY(-6px);border-color:rgba(var(--brass-rgb),.4);background:rgba(var(--brass-rgb),.05)}
.review-card .quote{width:28px;height:22px;color:var(--brass);opacity:.85;margin-bottom:16px;display:block}
.review-card p{color:var(--paper);font-size:15.5px;line-height:1.6}
.review-card cite{display:flex;align-items:baseline;gap:10px;margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(226,232,240,.08);font-style:normal}
.review-card cite b{font-family:'Outfit',sans-serif;font-weight:500;font-size:13.5px;color:var(--paper)}
.review-card cite span{font-size:12px;letter-spacing:.08em;color:var(--muted)}

@media (max-width:820px){
  .review-card{padding:26px 22px}
}
@media (max-width:480px){
  .score-card{flex-direction:column;align-items:flex-start}
  .score-info{margin-right:0}
}
@media (prefers-reduced-motion:reduce){ .review-card{transition:none} .review-card:hover{transform:none} }

/* booking */
.book-sec{background:#000}
.book-sec h2{max-width:16ch;font-size:clamp(40px,5.4vw,72px)}
.live-dot{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);margin-bottom:26px}
.live-dot i{width:8px;height:8px;border-radius:50%;background:#5FD37D;position:relative;flex:0 0 auto}
.live-dot i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid #5FD37D;
  animation:pulse-ring 2.2s ease-out infinite}
@keyframes pulse-ring{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.cta-meta{font-size:13px;color:var(--muted);opacity:.75;margin:14px 0 40px;max-width:40rem}
.cta{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:58px;padding:0 34px;border-radius:var(--btn-r);text-decoration:none;
  font-family:'Outfit',sans-serif;font-weight:500;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s,border-color .25s,box-shadow .25s}
.btn .ico{width:19px;height:19px;flex:0 0 auto}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}

.btn.gold{background:var(--brass);color:var(--brass-ink)}
.btn.gold:hover,.btn.gold:focus-visible{background:var(--brass-lit);box-shadow:0 16px 34px -14px rgba(var(--brass-rgb),.6)}

.btn.ghost{background:rgba(255,255,255,.045);border-color:rgba(var(--brass-rgb),.3);color:var(--paper)}
.btn.ghost .ico{color:var(--brass)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:rgba(var(--brass-rgb),.1);border-color:rgba(var(--brass-rgb),.62)}

@media (max-width:640px){
  .cta{gap:10px}
  .btn{padding:0 18px;letter-spacing:.11em;font-size:12px}
  .btn.gold{flex:1 0 100%}
  .btn.ghost{flex:1 1 calc(50% - 6px);min-width:0}
}
.todo{margin-top:30px;font-size:13px;color:#E08A5B}
@media (prefers-reduced-motion:reduce){ .live-dot i::after{animation:none} }

/* ---------- footer finale: word behind the ridge ---------- */
.foot{position:relative;z-index:4;background:#000}

.ridge-scene{position:relative;overflow:hidden;padding-top:11vw;background:#000}

.ridge-word{position:absolute;left:0;top:0;width:100%;height:auto;z-index:2;display:block;overflow:visible;
  opacity:0;will-change:transform,opacity}
.ridge-word text{font-family:'Outfit',sans-serif;font-weight:700;font-size:237px;fill:#fff}

.ridge-img{position:relative;z-index:4;display:block;width:100%;height:auto;
  /* the cap bites only on wide screens (natural height there is ~660px); on a phone the
     natural height is already under it, so the frame shows whole, uncropped */
  max-height:500px;object-fit:cover;object-position:50% 0%;
  transform-origin:50% 100%;will-change:transform,opacity;
  -webkit-mask-image:linear-gradient(180deg,#000 38%,rgba(0,0,0,.55) 72%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 38%,rgba(0,0,0,.55) 72%,transparent 100%)}

.foot-base{position:relative;z-index:6;background:#000;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px 34px;flex-wrap:wrap;
  padding:30px 6vw 58px;font-size:13px;color:var(--muted)}
.foot-name{font-family:'Outfit',sans-serif;font-weight:600;font-size:15px;color:var(--paper);letter-spacing:.06em}
.foot-what{margin-right:auto}
.foot-base a{color:var(--brass);text-decoration:none}
.foot-base a:hover,.foot-base a:focus-visible{color:var(--brass-lit)}

@media (max-width:820px){
  .ridge-scene{padding-top:7.5vw}
}
@media (prefers-reduced-motion:reduce){
  .ridge-word{opacity:1!important;transform:none!important}
  .ridge-img{opacity:1!important;transform:none!important}
}

/* sticky mobile bar */
.bar{display:none}

@media (prefers-reduced-motion:reduce){ .scrollcue i{animation:none} .shots figure:hover img{transform:none} }

@media (max-width:820px){
  .nav ul{display:none}
  .nav{padding:18px 7vw}
  .nav a.logo img{height:28px}
  .nav .call{display:inline-block;font-size:10.5px;letter-spacing:.22em;color:var(--brass);text-decoration:none;
    border:1px solid rgba(var(--brass-rgb),.45);padding:9px 15px;border-radius:var(--btn-r)}
  .gallery-stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;
    margin:0 -7vw}
  .shots{display:flex;grid-template-columns:unset;gap:14px;overflow:hidden;padding:0 5vw;width:100%;will-change:transform}
  .shots figure{flex:0 0 88%;border-radius:16px}
  .shots .wide{grid-column:unset;flex:0 0 88%}
  .place{grid-template-columns:1fr;gap:36px}
  .sec{padding:11vh 7vw}
  #galerija{padding-bottom:0}
  .foot-base{padding:24px 7vw 120px}
  .bar{display:flex;position:fixed;left:14px;right:14px;bottom:14px;z-index:55;
    background:rgba(8,13,20,.74);backdrop-filter:blur(20px) saturate(150%);
    border:1px solid rgba(var(--brass-rgb),.32);border-radius:16px;overflow:hidden;
    box-shadow:0 18px 46px -14px rgba(0,0,0,.85)}
  .bar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    padding:11px 6px;color:rgba(255,255,255,.9);text-decoration:none}
  .bar a .ico{width:19px;height:19px}
  .bar a b{font-family:'Outfit',sans-serif;font-weight:500;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase}
  .bar a + a{border-left:1px solid rgba(var(--brass-rgb),.24)}
  /* the call sits in the middle on solid black, so it reads as its own key against the
     frosted bar without shouting over the gold */
  .bar a.call-out{background:#000;color:var(--brass);flex:1.15}
  .bar a.call-out .ico{color:var(--brass)}
}