/* Otoka-Bambus Website 2.0 — visible public-site redesign layer. */
:root{
  --ob-v2-red:#c8212b;--ob-v2-red-dark:#9d1720;--ob-v2-green:#174934;
  --ob-v2-green-2:#246448;--ob-v2-mint:#edf6f0;--ob-v2-cream:#fbf8f2;
  --ob-v2-ink:#14251c;--ob-v2-muted:#627067;--ob-v2-line:rgba(23,73,52,.13);
  --ob-v2-radius:28px;--ob-v2-control:50px;--ob-v2-content:1280px;
  --ob-v2-shadow:0 24px 70px rgba(20,37,28,.11)
}
html{scroll-padding-top:100px}body{min-width:320px;background:#fff;color:var(--ob-v2-ink)}
main{overflow:clip}main section>.mx-auto{width:min(100%,var(--ob-v2-content));margin-inline:auto}
main :is(a,button,input,select,textarea):focus-visible{outline:3px solid rgba(200,33,43,.3)!important;outline-offset:4px}
main :is(input,select,textarea,button){min-height:var(--ob-v2-control)}

/* A cleaner, more distinctive navigation shell. */
header{height:84px!important;background:rgba(255,255,255,.94)!important;border-bottom:1px solid var(--ob-v2-line)!important;box-shadow:0 8px 35px rgba(20,37,28,.06)!important}
header nav{max-width:1320px!important}header nav>a:first-child img{height:48px!important;width:auto!important}
header nav ul{padding:7px;border:1px solid rgba(23,73,52,.09);border-radius:999px;background:rgba(237,246,240,.72)}
header nav ul a{padding:8px 13px!important;border-radius:999px;font-size:11px!important;letter-spacing:.12em!important}
header nav ul a:hover{background:#fff;color:var(--ob-v2-red)!important;box-shadow:0 5px 15px rgba(20,37,28,.07)}
header a[href="/kontakt"]{background:var(--ob-v2-red)!important;color:#fff!important;padding-inline:25px!important;box-shadow:0 12px 28px rgba(200,33,43,.23)!important}

/* 2.0 hero: editorial, left aligned and visibly different from the old centered hero. */
main>section:first-child{min-height:760px!important;justify-content:flex-start!important;background:var(--ob-v2-green)}
main>section:first-child>.absolute:first-child:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,31,21,.92) 0%,rgba(8,31,21,.76) 43%,rgba(8,31,21,.18) 76%,rgba(8,31,21,.35) 100%)}
main>section:first-child>.absolute:first-child>div{opacity:.25!important}
main>section:first-child>.relative{width:min(100%,1320px);margin-inline:auto;align-items:flex-start!important;text-align:left!important;padding:150px 42px 100px!important}
main>section:first-child>.relative>p:first-child{margin-bottom:18px!important;padding:0;border:0;border-radius:0;background:transparent;color:#fff!important;backdrop-filter:none;font-weight:700!important}
main>section:first-child>.relative>div:nth-child(2){position:absolute;right:46px;bottom:64px;padding:0;border:0;border-radius:0;background:transparent;backdrop-filter:none}
main>section:first-child>.relative>div:nth-child(2) img{height:82px!important}
main>section:first-child h1{max-width:820px!important;margin-top:8px!important;color:#fff;font-size:clamp(3.6rem,6.6vw,6.7rem)!important;line-height:.88!important;letter-spacing:-.045em;text-shadow:0 5px 30px rgba(0,0,0,.25)}
main>section:first-child h1:after{content:"";display:block;width:92px;height:5px;margin-top:30px;border-radius:10px;background:var(--ob-v2-red)}
main>section:first-child h1+p{max-width:720px!important;margin-top:28px!important;color:rgba(255,255,255,.86)!important;font-size:18px!important;line-height:1.75!important}
main>section:first-child h1+p strong{color:#fff}
main>section:first-child .mt-10{margin-top:32px!important}
main>section:first-child .mt-10 a{min-height:54px;padding:16px 26px!important;border-width:1px!important}
main>section:first-child .mt-10 a:first-child{background:var(--ob-v2-red)!important;color:#fff!important;box-shadow:0 15px 35px rgba(200,33,43,.3)}
main>section:first-child .mt-10 a:last-child{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)!important}
main>section:first-child a[href^="tel:"]{margin-top:25px!important;color:#fff!important;font-weight:600}

/* Section rhythm, editorial titles and alternating visual planes. */
main>section:not(:first-child){position:relative;border:0!important;padding-block:clamp(78px,8vw,124px)!important}
main>section:nth-child(4n+2):not(:first-child){background:var(--ob-v2-cream)!important}
main>section:nth-child(4n+3):not(:first-child){background:#fff!important}
main>section:not(:first-child) h2{max-width:850px;margin-inline:auto;color:var(--ob-v2-ink)!important;font-size:clamp(2.7rem,5vw,5.2rem)!important;line-height:.96!important;letter-spacing:-.035em}
main>section:not(:first-child) h2+p,main>section:not(:first-child) p+ h2{color:var(--ob-v2-muted)}
main>section:not(:first-child) .text-terracotta:not(.whitespace-nowrap){display:inline-flex;align-items:center;gap:10px;font-size:11px!important;font-weight:700!important;letter-spacing:.22em!important}
main>section:not(:first-child) .text-terracotta:before{content:"";width:28px;height:2px;background:var(--ob-v2-red)}
main>section:nth-of-type(2)>.mx-auto:before{content:"OTOKA · BAMBUS  /  SARAJEVO";display:block;margin-bottom:26px;color:var(--ob-v2-green);font-size:11px;font-weight:700;letter-spacing:.22em;text-align:center}

/* Cards now read as an intentional design system instead of default grid tiles. */
main article,main a:has(>img){border:1px solid var(--ob-v2-line)!important;border-radius:var(--ob-v2-radius)!important;background:#fff;box-shadow:0 10px 34px rgba(20,37,28,.06);overflow:hidden}
main article{padding:clamp(22px,2.3vw,34px)!important}
main article,main a:has(>img){transition:transform .45s cubic-bezier(.2,.75,.2,1),box-shadow .45s ease,border-color .45s ease!important}
main article:hover,main a:has(>img):hover{transform:translateY(-9px);box-shadow:var(--ob-v2-shadow);border-color:rgba(200,33,43,.28)!important}
main article img,main a:has(>img) img{transition:transform .8s cubic-bezier(.2,.75,.2,1),filter .4s ease!important}
main article:hover img,main a:has(>img):hover img{transform:scale(1.045);filter:saturate(1.08)}

/* Dark feature sections use true brand green and white text again. */
main>section.bg-evergreen:not(:has(.ob-contact-form)){background:linear-gradient(135deg,#113d2b 0%,#1d5a40 100%)!important;color:#fff!important}
main>section.bg-evergreen:not(:has(.ob-contact-form)) h2,main>section.bg-evergreen:not(:has(.ob-contact-form)) h3,main>section.bg-evergreen:not(:has(.ob-contact-form)) [class*="text-linen"]{color:#fff!important}
main>section.bg-evergreen:not(:has(.ob-contact-form)) p{color:rgba(255,255,255,.74)!important}
main>section.bg-evergreen:not(:has(.ob-contact-form)):before{content:"";position:absolute;width:440px;height:440px;right:-170px;top:-210px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.02)}
main>section.bg-evergreen:not(:has(.ob-contact-form)) article{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.16)!important;backdrop-filter:blur(10px)}

/* Social feed: exactly 4 on desktop, 2 on mobile, scalable to 20+. */
.ob-social-track{display:flex!important;grid-template-columns:none!important;gap:18px!important;overflow-x:auto!important;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--ob-v2-red) var(--ob-v2-mint);padding:8px 4px 20px!important}
.ob-social-track>article{flex:0 0 calc((100% - 54px)/4)!important;min-width:0!important;padding:0!important;scroll-snap-align:start;scroll-snap-stop:always;border-radius:20px!important}
.ob-social-track iframe{display:block;width:100%!important;height:auto!important;aspect-ratio:267/476;border:0}
.ob-social-controls{margin:-8px 0 22px!important}.ob-social-controls button{width:48px!important;height:48px!important;border-color:var(--ob-v2-line)!important;background:#fff!important}

footer{position:relative;background:#0e3526!important;color:#fff!important;border-top:6px solid var(--ob-v2-red)}

@media(max-width:1023px){
  header{height:74px!important}header nav ul{border:0;background:transparent;padding:0}
  main>section:first-child{min-height:720px!important}
  main>section:first-child>.relative{padding:130px 30px 85px!important}
  main>section:first-child>.relative>div:nth-child(2){right:28px;bottom:35px}
  main>section:first-child h1{font-size:clamp(3.2rem,8vw,5.3rem)!important}
}
@media(max-width:767px){
  main>section:first-child{min-height:820px!important}
  main>section:first-child>.absolute:first-child:after{background:linear-gradient(180deg,rgba(8,31,21,.48),rgba(8,31,21,.92) 72%)}
  main>section:first-child>.relative{align-items:center!important;text-align:center!important;padding:96px 20px 62px!important}
  main>section:first-child>.relative>div:nth-child(2){position:static;order:-1;margin-bottom:16px;padding:0;border:0;border-radius:0;background:transparent;backdrop-filter:none}
  main>section:first-child>.relative>div:nth-child(2) img{height:54px!important}
  main>section:first-child h1{font-size:clamp(2.7rem,13vw,4.3rem)!important;line-height:.92!important}
  main>section:first-child h1:after{width:62px;height:4px;margin:22px auto 0}
  main>section:first-child h1+p{margin-top:20px!important;font-size:14px!important;line-height:1.55!important}
  main>section:first-child .mt-10{width:100%;gap:10px!important}
  main>section:first-child .mt-10 a{width:100%;justify-content:center}
  main>section:not(:first-child){padding-block:72px!important}
  main>section:not(:first-child) h2{font-size:clamp(2.45rem,12vw,3.6rem)!important}
  main article:hover,main a:has(>img):hover{transform:none}
  .ob-social-track{gap:10px!important}.ob-social-track>article{flex-basis:calc((100% - 10px)/2)!important}.ob-social-controls{position:relative;z-index:2}
}
@media(max-width:420px){main section>.mx-auto{padding-inline:18px}.ob-social-track{margin-inline:-2px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}