:root{
  --maxw:1120px;--pad:24px;--gap:56px;--line:#e5e7eb;
  --gold:#D4AF37; --gold-brown:#9C7B26; --text:#0B0B0B;
}
*{box-sizing:border-box} html,body{height:100%}
html{scroll-behavior:smooth}
body{margin:0;font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;background:#F2EAE1;color:var(--text);line-height:1.65}
h1,h2,h3{font-family:'Playfair Display',serif}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:auto;padding:0 var(--pad)}
.section{padding:var(--gap) 0}

/* HERO */
.hero{position:relative;min-height:90vh;background:url('images/katie-harp-oZgj_nQQvuo-unsplash.jpg') center/cover no-repeat;display:flex;flex-direction:column}
.topbar{position:relative;display:flex;justify-content:center;align-items:center;padding:18px var(--pad)}
.nav{display:flex;gap:36px;font-weight:700;letter-spacing:.2px}
.nav a{font-size:clamp(16px,1.6vw,20px)}
.social-right{position:absolute;right:20px;top:18px;display:flex;gap:12px}
.social-right img{width:32px;height:32px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.hero-center{flex:1;display:grid;place-items:center;text-align:center;padding:0 var(--pad)}
.logo-hero{height:min(280px,30vw);margin-bottom:18px;filter:drop-shadow(0 5px 12px rgba(0,0,0,.4))}
.hero h1{font-size:clamp(56px,6.8vw,86px);margin:0 0 12px}
.subtitle{font-size:clamp(20px,2.2vw,26px);line-height:1.6}
.subtitle span{display:block;opacity:0;transform:translateY(16px) scale(.96);animation:popSlide .75s cubic-bezier(.22,.7,.2,1) forwards}
.subtitle span:nth-child(1){animation-delay:.1s}
.subtitle span:nth-child(2){animation-delay:.85s}
.subtitle span:nth-child(3){animation-delay:1.6s}
@keyframes popSlide{50%{transform:translateY(4px) scale(1.02);opacity:.9}100%{transform:translateY(0) scale(1);opacity:1}}

/* Badges */
.badges{margin-top:-10px}
.badge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.badge{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 10px rgba(2,6,23,.06);padding:16px;display:flex;gap:12px;align-items:center;color:var(--gold-brown)}
.badge i{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:inline-grid;place-items:center;font-style:normal;font-weight:800}
.badge strong{color:var(--gold-brown)}

/* Services */
.section h2{color:var(--gold-brown)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 2px 10px rgba(2,6,23,.06);overflow:hidden}
.card img{height:280px;width:100%;object-fit:cover}
.card .body{padding:18px}
.card .body h3{margin:0 0 6px;font-size:22px;color:var(--gold-brown)}
.card .body p{margin:0;color:#4b5563}

/* Pricing */
.pricing-wrap{display:grid;grid-template-columns:40% 60%;min-height:78vh}
.price-panel{background:#0b0b0b;color:#fff;padding:24px 14px 26px 20px}
.price-panel h2{text-align:center;margin:0 0 12px;font-size:36px}
.category{margin:12px 0}
.category h3{margin:0 0 6px;color:#f1e7d0;font-weight:600;font-size:22px}
.list{list-style:none;margin:0;padding:0}
.item{display:grid;grid-template-columns:1fr auto;gap:4px;align-items:center;padding:6px 0;border-top:1px dashed rgba(255,255,255,.18)}
.item .name{position:relative;padding-right:4px}
.item .name:after{content:'';position:absolute;left:0;right:-4px;bottom:.55em;border-bottom:1px dotted rgba(255,255,255,.25);transform:translateY(50%);z-index:0}
.item span, .item strong{position:relative;z-index:1;background:#0b0b0b;padding:0 .2em}
.price-image{background:url('images/pexels-linda-markaj-449376348-15491629.jpg') center/cover no-repeat}

/* Rezervacija */
.cta{padding:40px 0;text-align:center}
.cta a{display:inline-block;padding:14px 20px;border:1px solid var(--gold);border-radius:14px;font-family:'Playfair Display',serif;font-weight:700}
.address{margin-top:10px;font-family:'Playfair Display',serif;font-weight:700;color:var(--gold-brown)}

/* Footer */
footer{margin-top:var(--gap);padding:24px 0;border-top:1px solid var(--line);font-size:14px}
footer .foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
@media (max-width:640px){.grid{grid-template-columns:1fr} .pricing-wrap{grid-template-columns:1fr} .price-image{display:none} footer .foot{grid-template-columns:1fr} .logo-hero{height:180px}}
@media (max-width:1024px){.grid{grid-template-columns:repeat(2,1fr)}}

/* v9 Pricing fonts */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
.price-panel h2{font-family:'Great Vibes', cursive;font-size:48px;letter-spacing:.5px}
.category h3{font-family:'Playfair Display',serif;font-style:italic;font-weight:600;letter-spacing:.3px;color:#e8dcbf}
.list .item{font-family:Manrope,system-ui,Arial;font-weight:500}


/* v10 luxury hero title */
.hero h1{
  font-family:'DM Serif Display', serif;
  font-weight:400;
  letter-spacing:.6px;
  text-transform:none;
}


/* v11: nav & hero luxury font + refined animation + social placement */
.nav a{
  font-family:'Cormorant Garamond', serif;
  font-weight:700;
  letter-spacing:.06em;
}
.hero h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:700;
  letter-spacing:.02em;
}
.topbar{padding-right:96px} /* space for icons */
.social-right{position:absolute;right:20px;top:10px;z-index:5}
.social-right img{width:34px;height:34px}

/* smoother sequential subtitle animation */
.subtitle span{
  display:block;opacity:0;transform:translateY(10px) scale(.98);
  animation:popSlide .7s cubic-bezier(.22,.7,.2,1) forwards;
}
.subtitle span:nth-child(1){animation-delay:.05s}
.subtitle span:nth-child(2){animation-delay:.55s}
.subtitle span:nth-child(3){animation-delay:1.05s}
@keyframes popSlide{
  40%{transform:translateY(3px) scale(1.01);opacity:.85}
  100%{transform:translateY(0) scale(1);opacity:1}
}


/* v12: fixed social icons top-right, Spectral headings, refined animation, tagline band */
.social-right{
  position:fixed; /* pin to viewport */
  right:14px; top:10px; z-index:50;
  display:flex; gap:12px;
}
.topbar{padding-right:0} /* no need to reserve space in bar */

/* Spectral luxury headings */
.nav a{font-family:'Spectral', serif;font-weight:700;letter-spacing:.06em}
.hero h1{font-family:'Spectral', serif;font-weight:700;letter-spacing:.02em}
.section h2{font-family:'Spectral', serif;font-weight:700}

/* smoother sequential subtitle animation */
.subtitle span{
  will-change:transform,opacity;
  display:block; opacity:0; transform:translateY(14px) scale(.98);
  animation:popSlide .6s cubic-bezier(.25,.7,.2,1) forwards;
}
.subtitle span:nth-child(1){animation-delay:.05s}
.subtitle span:nth-child(2){animation-delay:.45s}
.subtitle span:nth-child(3){animation-delay:.85s}
@keyframes popSlide{
  40%{transform:translateY(4px) scale(1.01);opacity:.9}
  100%{transform:translateY(0) scale(1);opacity:1}
}

/* Tagline gold band */
.tagline-band{background:url('/images/katie-harp-oZgj_nQQvuo-unsplash.jpg') center/cover no-repeat; padding:30px 0; position:relative}
.tagline-band:before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.1)}
.tagline-band .tagline{
  position:relative; font-family:'Spectral', serif; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  font-size:clamp(22px,3.2vw,36px);
}


/* v13: stronger gold accents */
:root{
  --gold-strong:#C69C2E;           /* richer mid-gold for text */
  --gold-strong-light:#E6C767;     /* brighter light-gold for headings */
}
.badge, .badge strong{color:var(--gold-strong)}
.section h2{color:var(--gold-strong)}
.category h3{color:var(--gold-strong-light)}


/* v14: hero logo-only, centered pricing, no side image, no service body text */
.hero h1,.subtitle{display:none !important}
.logo-hero{height:min(360px,34vw) !important}

.pricing-wrap{display:block !important}
.price-panel{width:min(860px,92vw);margin:0 auto 10px auto;border-radius:16px}
.price-image{display:none !important}

/* service cards: tighten body since text removed */
.card .body{padding:16px 18px}


/* v15: logo ~3× larger */
.logo-hero{
  height:min(720px,60vw) !important;
}


/* v16: stronger gold for badges */
:root{ --gold-strong:#B8860B; } /* darker, more visible gold */
.badge, .badge strong{ color: var(--gold-strong) !important; }
.badge i{ border-color: rgba(184,134,11,.35); }

/* === Responsive addon v1 (non-breaking) === */

/* Global media responsiveness */
img, video { max-width:100%; height:auto; }
iframe { max-width:100%; }

/* Prevent horizontal scroll */
html, body { overflow-x:hidden; }

/* Improve tap targets and wrapping in nav without changing HTML */
.nav { flex-wrap: wrap; }
.nav a { display:inline-block; padding:12px 10px; }

/* Fluid typography helpers */
h1, .hero h1 { font-size: clamp(42px, 6.5vw, 86px); }
.subtitle { font-size: clamp(16px, 2.4vw, 26px); }

/* Hero becomes more compact on small screens */
@media (max-width: 640px){
  .hero{ min-height:70vh; background-position:center; }
  .topbar{ padding:14px var(--pad); }
  .nav{ gap:18px; justify-content:center; }
  .social-right{ right:12px; top:12px; }
  .logo-hero{ height: min(180px, 32vw); margin-bottom: 12px; }
  .grid{ grid-template-columns: 1fr; }
}

/* Tablet layout */
@media (min-width: 641px) and (max-width: 1024px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Desktop keeps existing 3–4 columns (already defined), ensure spacing */
@media (min-width: 1025px){
  .grid{ grid-template-columns: repeat(4, 1fr); }
}
/* === end addon === */

/* SEO task: Position social icons bottom-right */
.social-right{ position:fixed !important; right:20px; bottom:20px; top:auto !important; z-index:9999; }
@media (max-width:380px){ .social-right{ right:12px; bottom:12px; } }