/* Separate pages and the Croatian version: language switch, page titles, contact band. */
/* The top bar stays visible while scrolling. Its background spans the full window width
   (the bar itself is capped at 1600px), and anchored sections stop below it. */
.header{position:sticky;top:0;z-index:60;background:#111313eb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 100vmax #111313eb;clip-path:inset(0 -100vmax);border-bottom:0}
.header:after{content:'';position:absolute;left:-100vmax;right:-100vmax;bottom:0;height:1px;background:#ffffff0d}
/* Firefox scroll anchoring re-adjusts the page after a jump (the section rail label and entrance
   animations change while scrolling), leaving products 50–200px too low. Images have fixed sizes,
   so the page does not need anchoring. */
html,body{overflow-anchor:none}
:root{--header-h:106px}
@media(max-width:800px){:root{--header-h:83px}}
@media(max-width:480px){:root{--header-h:107px}}
[id]{scroll-margin-top:calc(var(--header-h) + 20px)}
/* Product cards fill the screen below the bar, so the section rail lands each one exactly under it. */
.product-card[id]{scroll-margin-top:var(--header-h);min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h))}
.lang-switch{font-family:'DM Sans',Arial,sans-serif;font-size:11px;letter-spacing:1.4px;color:var(--muted);border:1px solid var(--border);border-radius:100px;padding:6px 10px;line-height:1}
.lang-switch:hover{color:var(--lime);border-color:var(--lime)}
nav>a.lang-switch:after{display:none}
nav a[aria-current="page"]:not(.nav-cta){color:var(--lime)}

/* Page titles keep the look of the section headings they replace. */
.page-top{padding-top:70px}
.studio h1.page-title{font-size:clamp(45px,4.7vw,65px);letter-spacing:-2.6px;font-weight:500;line-height:1.12;margin:0}
.about .studio-grid h1{position:sticky;top:48px;align-self:start}
.contact-intro h1.page-title{font-size:clamp(45px,4.7vw,67px);letter-spacing:-2.6px;font-weight:500;line-height:1.12;margin:28px 0 23px}
/* About page subtitles are h2 now; keep them as small labels, not section headings. */
.studio h2.about-subtitle{font-size:12px;letter-spacing:1.8px;line-height:1.6;margin:0 0 20px}
.studio h2.about-subtitle:not(:first-child){margin-top:38px}
.contact .contact-address{font-style:normal;display:flex;flex-direction:column;gap:2px;margin-top:28px;font-size:13px;color:#42572d}
.contact .contact-address strong{color:#172010}

/* Home and About: a lime band that leads to the contact page. */
.contact-teaser{align-items:center}
.contact-cta{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.contact-cta .button{background:#192113;color:#e6f5d2;padding:16px 26px}
.contact-cta .button:hover{box-shadow:0 7px 20px #24381d25}
.contact-cta .contact-detail{margin-top:0}

@media(max-width:800px){
  /* On small screens the products link gives way, so About stays reachable. */
  nav a:nth-child(1){display:none}
  nav a:nth-child(2){display:inline}
  .page-top{padding-top:45px}
  .studio h1.page-title{font-size:43px;letter-spacing:-2px}
  .contact-intro h1.page-title{font-size:44px;letter-spacing:-2px}
  .about .studio-grid h1{position:static}
  .contact-teaser{gap:30px}
}
@media(max-width:480px){
  .lang-switch{padding:6px 8px;font-size:10px}
  .studio h1.page-title,.contact-intro h1.page-title{font-size:38px}
}