/* Etno Kuća Drina v3.4.1
   Visual system: clean hospitality layout + restrained Jadar cross-stitch reference + Drina palette.
   No pseudo-ethno repeating ribbons, no display/script fonts, no decorative icons in the main menu. */
:root{
  --forest:#203d31;
  --forest-2:#315547;
  --forest-dark:#152c24;
  --drina:#2c7880;
  --drina-dark:#205f66;
  --drina-soft:#8ab9bc;
  --walnut:#6d482d;
  --walnut-dark:#4d321f;
  --terracotta:#92533c;
  --linen:#f2ecdf;
  --paper:#faf7ef;
  --cream:#fffdf8;
  --sand:#dbc8a2;
  --ink:#27342e;
  --muted:#68716b;
  --line:rgba(39,58,49,.16);
  --warm-line:rgba(95,65,39,.22);
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',Arial,Helvetica,sans-serif;
  --shadow:0 18px 48px rgba(29,45,37,.13);
  --shadow-sm:0 8px 24px rgba(29,45,37,.10);
}
html{scroll-padding-top:112px}
body{font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--ink);background:var(--paper)}
h1,h2,h3,.fact b,.stay-card h3,.river-feature-grid b,.experience-grid h3,.site-footer h3,.booking-heading h2{font-family:var(--serif);font-style:normal;font-weight:600;letter-spacing:-.022em}
p,.btn,.topbar,.primary-nav,.booking-form,.dropdown{font-family:var(--sans)}
.drina-accent,.drina-text{color:var(--drina)!important}
.section-italic,.hero-subtitle,.script-heading,.hero-script{font-family:inherit!important;font-style:normal!important;color:inherit!important;letter-spacing:inherit!important}
.eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;font-weight:800;color:var(--forest-2)}
.eyebrow.light{color:#ead6a9}

/* Header */
.site-header{position:relative;z-index:2000}
.topbar{background:#463220;color:#f7eee2;border-bottom:1px solid rgba(255,255,255,.08)}
.topbar::after{display:none}
.topbar-inner{height:32px}
.topbar-info{gap:20px}.top-item{font-size:.72rem;color:#f7eee2}.top-item .icon{width:14px;height:14px;color:#d7be8a;stroke-width:2.5}
.lang-switch{font-size:.7rem}.lang-switch a.active{color:#f2d596}
.nav-shell{position:sticky;top:0;min-height:92px;background:rgba(250,247,239,.99);border-bottom:1px solid rgba(32,61,49,.16);box-shadow:0 8px 26px rgba(28,44,36,.08);overflow:visible;isolation:isolate}
.nav-shell::before{display:none!important}
.nav-shell::after{content:""!important;display:block!important;position:absolute;inset:10px 18px;background-image:url('../brand/jadar-vez-vertical.svg'),url('../brand/jadar-vez-vertical.svg');background-repeat:no-repeat,no-repeat;background-size:24px 68px,24px 68px;background-position:left center,right center;opacity:.58;pointer-events:none;z-index:-1}
.nav-inner{min-height:92px;display:grid;grid-template-columns:104px minmax(0,1fr) auto auto;align-items:center;gap:22px;position:relative}
.brand{position:relative!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;align-self:center!important;width:96px!important;height:82px!important;z-index:3}
.brand picture{position:static!important;transform:none!important;width:80px!important;height:80px!important;padding:3px;border-radius:50%;overflow:hidden;background:#f4eee2;border:1px solid rgba(74,55,35,.22);box-shadow:0 5px 15px rgba(35,45,39,.13)}
.brand img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.primary-nav{display:flex;align-items:center;justify-content:center;gap:4px;padding:0;margin:0;min-width:0}
.primary-nav>a,.nav-parent>a{display:flex;align-items:center;gap:5px;padding:10px 11px!important;border-radius:7px!important;background:transparent!important;color:#27382f!important;font-family:var(--sans)!important;font-size:.85rem!important;font-weight:650!important;line-height:1.15!important;white-space:nowrap!important;transition:background .18s ease,color .18s ease!important}
.primary-nav>a::after,.nav-parent>a::after{display:none!important}
.primary-nav>a:hover,.primary-nav>a:focus-visible,.nav-parent>a:hover,.nav-parent>a:focus-visible{background:#eee6d7!important;color:var(--forest-dark)!important;outline:none!important}
.primary-nav .nav-home{background:#eee6d7!important;color:var(--forest)!important}
.primary-nav .nav-drina{color:var(--drina-dark)!important;font-weight:800!important;box-shadow:inset 0 -2px 0 var(--drina)}
.primary-nav .nav-drina:hover{background:#e5efee!important;color:var(--drina-dark)!important}
.nav-chevron{width:12px!important;height:12px!important;color:#6f624e!important;stroke-width:2.7!important}
.nav-parent{position:relative;padding-bottom:10px;margin-bottom:-10px}
.nav-parent::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.dropdown{position:absolute;top:calc(100% + 5px);left:0!important;transform:translateY(5px)!important;width:224px;padding:8px;background:#fffdf8;border:1px solid rgba(45,63,54,.17);border-radius:8px;box-shadow:var(--shadow-sm);opacity:0;visibility:hidden;pointer-events:none;transition:.18s ease}
.nav-parent:hover .dropdown,.nav-parent:focus-within .dropdown,.nav-parent.open .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:none!important}
.dropdown a{display:block;padding:11px 12px;border-radius:5px;color:#2f4038!important;background:transparent!important;font-family:var(--sans)!important;font-size:.8rem!important;font-weight:650!important;border-left:3px solid transparent}
.dropdown a:hover,.dropdown a:focus-visible{background:#f1eadf!important;color:#203d31!important;border-left-color:var(--drina)!important;outline:none}
.nav-book{min-height:44px;padding:9px 16px;border-radius:7px;background:var(--forest)!important;color:#fff!important;border:1px solid var(--forest);box-shadow:none;font-size:.8rem;font-weight:800}
.nav-book:hover,.nav-book:focus-visible{background:var(--forest-2)!important;color:#fff!important;transform:none}
.nav-book .icon{width:18px;height:18px;stroke-width:2.5}
.menu-toggle{display:none;color:var(--forest);width:44px;height:44px;padding:8px;border:1px solid rgba(32,61,49,.18);border-radius:7px;background:#fffdf8}
.menu-toggle span{width:25px;height:2px;background:currentColor;margin:4px auto}

/* Regionally grounded embroidery reference: Jadar/Loznica cross-stitch, used only as an accent. */
.jadar-divider{width:168px;height:38px;margin:18px 0 20px;background:url('../brand/jadar-vez.svg') center/168px 37px no-repeat;opacity:.94}
.jadar-divider-dark{filter:none;opacity:.76}
.booking-ornament{width:150px;height:34px;margin:0 auto 8px;background:url('../brand/jadar-vez.svg') center/150px 33px no-repeat;opacity:.9}

/* Hero */
.hero{min-height:700px;background-position:center 45%}
.hero::before{background:linear-gradient(90deg,rgba(15,42,34,.92) 0%,rgba(17,48,39,.82) 43%,rgba(26,63,55,.38) 72%,rgba(22,53,48,.18) 100%)}
.hero::after{height:125px;bottom:-82px}
.hero-grid{grid-template-columns:minmax(0,1.14fr) minmax(390px,.64fr);gap:58px;padding:72px 0 106px}
.hero-copy{max-width:780px}.hero-copy h1{font-size:clamp(3.35rem,4.8vw,5.25rem);line-height:1.02;margin:0 0 16px;color:#fff;font-weight:600;text-shadow:0 4px 24px rgba(0,0,0,.16)}
.hero-deck{max-width:710px;margin:0 0 6px;font-family:var(--serif);font-size:clamp(1.3rem,1.8vw,1.72rem);line-height:1.36;color:#f0e2c4}
.hero-lead{max-width:720px;color:rgba(255,255,255,.9);font-family:var(--sans);font-size:1.04rem;line-height:1.72}
.hero-actions{margin-top:25px}.hero .btn-primary{background:var(--drina-dark)!important;border-color:var(--drina-dark)!important;border-radius:7px;box-shadow:none}.hero .btn-primary:hover{background:#2b7278!important}
.hero .btn-ghost{border-radius:7px;background:rgba(17,43,35,.34);color:#fff}
.hero-notes{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:11px 20px}.hero-notes li{display:flex;align-items:center;gap:8px;color:#f2e6ce;font-size:.76rem;font-weight:700}.hero-notes .icon{width:18px;height:18px;color:#d9c28c;stroke-width:2.7}.hero-notes li:first-child .icon{color:#91c8cb}

/* Booking */
.booking-card{position:relative;overflow:visible;scroll-margin-top:112px;padding:25px 27px 23px;background:rgba(252,249,241,.99);border:1px solid rgba(85,62,38,.20);border-radius:13px;box-shadow:0 26px 62px rgba(13,33,27,.24)}
.booking-card::before{display:none!important}.booking-heading{margin:0 0 18px;text-align:left}.booking-heading::before{display:none!important}
.booking-kicker{display:block;margin-bottom:6px;color:var(--walnut);font-size:.66rem;font-weight:850;letter-spacing:.16em}
.booking-heading h2{margin:0;color:var(--ink);font-size:1.62rem;line-height:1.2}.booking-heading p{margin:9px 0 0;color:var(--muted);font-size:.77rem;line-height:1.52}
.booking-form{display:grid;grid-template-columns:1fr;gap:12px}.booking-form .full{grid-column:1/-1}.booking-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.date-field>span,.guest-field>span{display:block;margin-bottom:6px;color:#657068;font-size:.69rem;font-weight:800}
.date-picker-trigger,.booking-form select{width:100%;height:50px;border:1px solid rgba(36,59,49,.20);border-radius:7px;background:#fff;color:#34423b;outline:0}
.date-picker-trigger{display:flex;align-items:center;gap:10px;padding:0 13px;text-align:left;cursor:pointer}.date-picker-trigger .icon{width:18px;height:18px;color:var(--drina-dark);stroke-width:2.5}.date-picker-trigger strong{font-family:var(--sans);font-size:.83rem;font-weight:650;color:#4c5650}
.date-picker-trigger:hover,.date-picker-trigger:focus-visible,.date-picker-trigger[aria-expanded="true"],.booking-form select:focus{border-color:var(--drina);box-shadow:0 0 0 3px rgba(44,120,128,.11)}
.booking-form select{padding:0 12px;font-size:.86rem}.booking-calendar{border:1px solid rgba(77,52,32,.22);border-radius:9px;background:#fffdf8;padding:12px;box-shadow:0 10px 28px rgba(28,42,34,.11)}.booking-calendar[hidden]{display:none!important}
.calendar-toolbar{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:7px;margin-bottom:8px}.calendar-toolbar strong{font-family:var(--serif);font-size:1rem;text-align:center;color:var(--forest);text-transform:none}.calendar-toolbar button{width:36px;height:36px;border:1px solid var(--line);border-radius:6px;background:#f3ecdf;color:var(--forest);display:grid;place-items:center}.calendar-toolbar button:disabled{opacity:.3}.calendar-toolbar .icon{width:17px;height:17px;stroke-width:2.8}
.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.calendar-weekdays span{text-align:center;padding:4px 0;font-size:.6rem;font-weight:800;color:#77776f}.calendar-blank{display:block}.calendar-day{aspect-ratio:1;border:1px solid transparent;border-radius:5px;background:transparent;color:#354239;font-family:var(--sans);font-size:.76rem;font-weight:700}.calendar-day:hover:not(:disabled){background:#e9f0ee}.calendar-day.today{border-color:rgba(109,72,45,.35)}.calendar-day.selected{background:var(--drina-dark);color:#fff}.calendar-day.in-range{background:#dcebea}.calendar-day:disabled{opacity:.25;cursor:not-allowed}.calendar-hint{margin:8px 2px 0;color:#77736a;font-size:.65rem}
.booking-error{display:none;margin:0;padding:9px 10px;border-radius:6px;background:#fff0ea;color:#81442f;font-size:.72rem}.booking-error.show{display:block}
.booking-submit{min-height:53px;border-radius:7px;background:var(--drina-dark)!important;color:#fff!important;font-size:.84rem;font-weight:850;box-shadow:none!important}.booking-submit:hover{background:#2b7278!important}.booking-submit .icon-whatsapp{width:25px;height:25px;stroke-width:2.8}.booking-submit .icon-arrow{margin-left:auto}
.booking-separator{margin:14px 0 12px}.booking-external{border-radius:7px;background:#fffdf8}.booking-note{font-size:.67rem}

/* Approved iconography A: carved walnut plaque. The badge is deliberately heavier than a UI icon:
   wood texture, beveled octagon, carved geometric frame, and bold woodcut symbol. */
.wood-badge{
  --badge-size:74px;
  width:var(--badge-size);height:var(--badge-size);flex:0 0 var(--badge-size);
  display:grid;place-items:center;position:relative;isolation:isolate;
  color:#2e2117;
  clip-path:polygon(15% 0,85% 0,100% 15%,100% 85%,85% 100%,15% 100%,0 85%,0 15%);
  background:
    linear-gradient(155deg,rgba(248,220,166,.16),rgba(73,43,24,.12)),
    url('../brand/wood-texture.jpg') center/cover no-repeat;
  box-shadow:0 5px 0 #4c3423,0 8px 16px rgba(48,33,21,.20),inset 0 0 0 2px rgba(250,218,161,.18);
}
.wood-badge::before{
  content:"";position:absolute;inset:4px;z-index:-1;clip-path:inherit;
  background:linear-gradient(150deg,rgba(255,231,185,.08),rgba(65,38,21,.09));
  box-shadow:inset 0 0 0 3px rgba(58,38,24,.58),inset 0 0 0 5px rgba(217,174,112,.18);
}
.wood-badge::after{
  content:"";position:absolute;inset:8px;z-index:-1;clip-path:inherit;
  box-shadow:inset 0 0 12px rgba(36,24,16,.16);
}
.wood-badge-frame,.wood-badge-symbol{position:absolute;inset:0;width:100%!important;height:100%!important;overflow:visible;pointer-events:none}
.wood-badge-frame{z-index:1;fill:none;stroke:#302116;stroke-width:1.65;stroke-linejoin:miter;opacity:.74}
.wood-badge-frame .frame-mark{fill:#342317;stroke:none;opacity:.72}
.wood-badge-symbol{z-index:2;width:69%!important;height:69%!important;inset:15.5%;overflow:visible;filter:drop-shadow(0 1px 0 rgba(235,199,139,.13))}
.wood-badge-symbol .cut-stroke{fill:none;stroke:currentColor;stroke-width:6.6;stroke-linecap:round;stroke-linejoin:round}
.wood-badge-symbol .cut-fill{fill:currentColor;stroke:none}
.wood-badge-symbol .cut-fill-soft{fill:currentColor;fill-opacity:.94;stroke:none}
.wood-badge-symbol .cut-light{stroke:#d6b678}
.wood-badge-symbol .cut-light-fill{fill:#d6b678;stroke:none}
.wood-badge-river,.wood-badge-fish{color:var(--drina-dark)}
.wood-badge-fire,.wood-badge-grill{color:#743e2c}
.wood-badge-parking{color:#342318}
.wood-badge-pet{color:#3e3022}

/* Facts and amenity badges use the approved larger proportions from the graphic-system board. */
.fact>.wood-badge{--badge-size:82px!important}
.amenity .wood-badge{--badge-size:82px!important}
.river-feature-grid .wood-badge{--badge-size:62px!important}

/* The approved board used a small carved textile mark beneath the fact copy. This is intentionally
   a single centered motif, not a repeating decorative stripe. */
.fact::after{
  content:"";position:absolute;left:50%;bottom:11px;width:28px;height:9px;transform:translateX(-50%);
  opacity:.58;background:
    linear-gradient(45deg,transparent 42%,#76533a 43% 57%,transparent 58%) 0 0/9px 9px,
    linear-gradient(-45deg,transparent 42%,#76533a 43% 57%,transparent 58%) 4.5px 0/9px 9px;
}
.fact{position:relative;padding-bottom:25px!important}
.fact-drina::after{filter:hue-rotate(135deg) saturate(.8)}

/* Quick facts */
.quick-facts{position:relative;z-index:5;margin-top:-28px;padding:0 0 54px;background:linear-gradient(180deg,transparent 0,#f7f1e5 38%,#f7f1e5 100%)}
.facts-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;background:transparent;border:0;box-shadow:none;overflow:visible}.fact{min-height:126px;padding:16px 18px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:16px;text-align:left;background:var(--cream);border:1px solid var(--warm-line)!important;border-radius:10px;box-shadow:0 7px 20px rgba(61,49,35,.055)}.fact>.wood-badge{--badge-size:70px;display:grid!important;margin-top:0!important;color:#352417!important;text-transform:none!important;letter-spacing:0!important}.fact b{display:block;font-size:1.32rem;line-height:1.12;color:var(--forest);font-weight:600}.fact>div>span{display:block;margin-top:4px;color:#727872;font-size:.62rem;line-height:1.28;letter-spacing:.045em;text-transform:uppercase}.fact-price{background:#f7f0e2}

/* Sections and typography */
.section{padding:92px 0}.section-story{padding-top:82px}.story-grid{gap:70px}.section-copy h2,.section-head h2{font-family:var(--serif);font-weight:600;line-height:1.08;color:var(--forest)}.section-copy h2{font-size:clamp(2.8rem,4vw,4.4rem)}.section-head h2{font-size:clamp(2.65rem,3.8vw,4.15rem)}.section-head>p,.prose p{color:var(--muted);font-size:1rem;line-height:1.7;text-align:left}.section-head{gap:65px;margin-bottom:44px}.section-head.centered{max-width:920px;margin-bottom:46px}.section-head.centered>p{max-width:760px;margin-top:16px}.story-signature{display:none}
.accommodation-section{background:#f1eadf}.stay-card{border-radius:12px}.stay-card-copy{padding:23px}.stay-card h3{font-weight:600}

/* River */
.river-section{padding:96px 0;background:var(--forest-dark)}.river-section::before{opacity:.12}.river-overlay{background:linear-gradient(90deg,rgba(17,48,39,.98) 0%,rgba(17,48,39,.93) 50%,rgba(17,48,39,.75) 100%)}.river-lines{display:none}.river-grid{gap:75px}.river-copy h2{font-size:clamp(2.9rem,4.2vw,4.7rem);line-height:1.06}.river-copy p{font-family:var(--sans);font-size:1.02rem;line-height:1.72}.river-feature-grid{margin-top:30px;gap:10px;border:0}.river-feature-grid>div{min-height:102px;padding:13px 14px;border:1px solid rgba(236,219,180,.16)!important;border-radius:9px;background:rgba(255,255,255,.035)}.river-feature-grid .wood-badge{--badge-size:54px}.river-feature-grid b{font-size:1rem;font-weight:600}.river-feature-grid small{font-size:.67rem}.river-visual{padding:0 0 58px 64px}.river-photo-main,.river-photo-small{border-radius:8px;overflow:hidden}.river-photo-small{border-width:6px;border-color:var(--forest-dark)}.river-stamp{display:none}

/* Amenities */
.amenities{background:#f8f3e9}.amenity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;border:0;background:transparent}.amenity{min-height:126px;padding:14px 15px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:13px;text-align:left;background:#fffdf8;border:1px solid var(--warm-line)!important;border-radius:10px;box-shadow:0 5px 16px rgba(61,49,35,.045)}.amenity .wood-badge{--badge-size:72px}.amenity b{font-family:var(--sans);font-size:.91rem;font-weight:750;line-height:1.25;color:#314239}

/* Gallery */
.gallery-section{background:#eee6d9}.gallery-item{border-radius:8px}.gallery-item::after{background:linear-gradient(0deg,rgba(8,31,25,.70),transparent 48%)}

/* Instagram */
.instagram-section{background:linear-gradient(115deg,#1a3b31 0%,#1d4c42 58%,#205f66 100%);padding:94px 0}.instagram-copy h2{font-size:clamp(2.9rem,4.2vw,4.7rem);line-height:1.06}.instagram-copy p{font-family:var(--sans);font-size:1rem;line-height:1.7}.btn-instagram{background:#f1dfba;color:var(--forest);border-radius:7px}

/* Region / reviews / practical */
.experience-grid article{min-height:220px;padding:26px}.experience-icon{border-radius:10px;background:#eee5d4;color:var(--walnut)}
.reviews-section{padding:94px 0}.reviews-copy h2{font-size:clamp(2.9rem,4.2vw,4.8rem);line-height:1.06}.reviews-copy blockquote{font-size:1.2rem}.review-card{border-radius:10px}.review-card>strong{font-size:4.9rem}
.info-section{background:#faf7ef}.info-copy h2{font-size:clamp(2.8rem,4vw,4.3rem)}
.final-cta{min-height:540px;padding:82px 0}.final-cta h2{font-size:clamp(2.9rem,4.5vw,5rem);line-height:1.07}.final-cta p:not(.eyebrow){font-family:var(--sans);font-size:1rem;line-height:1.7}

/* Floating contact: standard marks, restrained rustic container. */
.floating-contact{position:fixed;right:18px;bottom:104px;z-index:1100;display:flex;flex-direction:column;gap:8px;padding:8px;background:rgba(250,247,239,.94);border:1px solid rgba(66,55,40,.16);border-radius:26px;box-shadow:0 9px 24px rgba(28,42,34,.15);backdrop-filter:blur(8px)}
.floating-contact a{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%!important;color:#fff!important;background:var(--walnut)!important;box-shadow:none!important}.floating-contact a .icon{width:21px;height:21px;stroke-width:2.6}.floating-contact .float-wa{background:#2e7d57!important}.floating-contact .float-ig{background:var(--drina-dark)!important}.floating-contact .social-label{position:absolute;right:54px;top:50%;transform:translate(5px,-50%);white-space:nowrap;padding:6px 9px;border-radius:5px;background:var(--forest-dark);color:#fff;font-size:.68rem;font-weight:750;opacity:0;visibility:hidden;transition:.16s}.floating-contact a:hover .social-label{opacity:1;visibility:visible;transform:translate(0,-50%)}
.back-to-top{position:fixed;right:22px;bottom:38px;z-index:1090;width:48px;height:48px;padding:0!important;border-radius:50%!important;border:2px solid #b98e5f!important;background:var(--forest)!important;color:#fff!important;box-shadow:0 8px 22px rgba(25,38,31,.18)!important;display:grid!important;place-items:center!important;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}.back-to-top.visible{opacity:1;visibility:visible;transform:none}.back-to-top .icon{width:20px;height:20px;stroke-width:3}.back-to-top .wood-badge{display:none!important}

/* Footer */
.site-footer{background:var(--forest-dark)}.footer-river{display:none}.footer-logo{background:#efe6d4}.footer-instagram .icon{color:var(--drina-soft)}

@media(max-width:1240px){
  .nav-inner{grid-template-columns:92px minmax(0,1fr) auto auto;gap:13px}.brand{width:86px!important}.brand picture{width:74px!important;height:74px!important}.primary-nav>a,.nav-parent>a{padding-inline:8px!important;font-size:.8rem!important}.nav-book{padding-inline:12px}.hero-grid{gap:42px}
}
@media(max-width:1180px){
  html{scroll-padding-top:80px}.nav-shell{min-height:78px}.nav-shell::after{display:none!important}.nav-inner{min-height:78px;grid-template-columns:82px 1fr auto auto;gap:10px}.brand{width:76px!important;height:72px!important}.brand picture{width:66px!important;height:66px!important}.menu-toggle{display:block;grid-column:4}.nav-book{grid-column:3;min-height:42px}.primary-nav{position:absolute;top:100%;left:0;right:0;display:block!important;max-height:calc(100vh - 78px);overflow:auto;padding:12px 22px 26px;background:#fffdf8;border-top:1px solid var(--line);box-shadow:0 18px 40px rgba(25,43,35,.16);transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:.18s}.primary-nav.open{transform:none;opacity:1;visibility:visible;pointer-events:auto}.primary-nav>a,.nav-parent>a{width:100%;justify-content:flex-start;padding:14px 10px!important;border-bottom:1px solid var(--line);border-radius:0!important;font-size:.95rem!important;color:var(--forest)!important}.primary-nav .nav-home{background:transparent!important}.primary-nav .nav-drina{box-shadow:none}.nav-parent{padding:0;margin:0}.nav-parent::after{display:none}.nav-chevron{margin-left:auto}.dropdown{position:static;width:auto;display:none;opacity:1;visibility:visible;pointer-events:auto;transform:none!important;box-shadow:none;border:0;border-radius:0;margin:0 0 5px 10px;padding:4px 0;background:#f6f0e5}.nav-parent.open .dropdown{display:block}.dropdown a{padding:10px 12px!important;font-size:.86rem!important}.hero-grid{grid-template-columns:1fr;padding:66px 0 110px}.booking-card{max-width:650px}.facts-grid{grid-template-columns:repeat(3,1fr)}.amenity-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:780px){
  :root{--container:calc(100% - 34px)}.topbar{display:none}.nav-shell{min-height:72px}.nav-inner{min-height:72px;grid-template-columns:64px 1fr auto auto;gap:7px}.brand{width:60px!important;height:62px!important}.brand picture{width:58px!important;height:58px!important}.nav-book{min-height:40px;padding:8px 10px;font-size:.74rem}.menu-toggle{width:40px;height:40px}.primary-nav{max-height:calc(100vh - 72px)}
  .hero{min-height:auto}.hero-grid{padding:52px 0 94px;gap:32px}.hero-copy h1{font-size:clamp(2.65rem,11.2vw,3.65rem)}.hero-deck{font-size:1.24rem}.hero-lead{font-size:.98rem}.jadar-divider{width:210px;background-size:198px 24px}.hero-actions{display:grid}.hero-actions .btn{width:100%}.hero-notes{display:grid;grid-template-columns:1fr;gap:8px}.booking-card{padding:21px 17px 19px}.booking-ornament{margin-bottom:9px}.booking-date-grid{grid-template-columns:1fr 1fr}.quick-facts{margin-top:-18px;padding-bottom:42px}.facts-grid{grid-template-columns:1fr 1fr;gap:9px}.fact{min-height:104px;padding:12px;gap:10px}.fact:last-child{grid-column:1/-1}.fact .wood-badge{--badge-size:52px}.fact b{font-size:1.12rem}.section{padding:68px 0}.section-copy h2,.section-head h2{font-size:clamp(2.25rem,9vw,2.95rem)}.section-head{display:block}.section-head>p{margin-top:14px}.story-grid{gap:48px}.river-section{padding:72px 0}.river-grid{gap:48px}.river-copy h2{font-size:clamp(2.45rem,9.5vw,3.1rem)}.river-feature-grid{grid-template-columns:1fr 1fr}.river-feature-grid>div{min-height:122px;display:flex;flex-direction:column;align-items:flex-start}.river-feature-grid .wood-badge{--badge-size:50px}.river-visual{padding-left:32px}.amenity-grid{grid-template-columns:1fr 1fr;gap:9px}.amenity{min-height:106px;padding:11px;gap:10px}.amenity .wood-badge{--badge-size:54px}.floating-contact{left:50%;right:auto;bottom:11px;transform:translateX(-50%);flex-direction:row;padding:6px}.floating-contact a{width:42px;height:42px}.floating-contact .float-ig{display:none}.floating-contact .social-label{display:none}.back-to-top{right:12px;bottom:67px;width:44px;height:44px}.instagram-copy h2,.reviews-copy h2,.final-cta h2{font-size:clamp(2.4rem,9.2vw,3.15rem)}
}
@media(max-width:470px){
  :root{--container:calc(100% - 28px)}.nav-inner{grid-template-columns:58px 1fr 40px 40px}.nav-book{width:40px;padding:0}.nav-book span{display:none}.hero-copy h1{font-size:2.68rem}.booking-date-grid{grid-template-columns:1fr}.calendar-weekdays span{font-size:.56rem}.facts-grid{grid-template-columns:1fr}.fact:last-child{grid-column:auto}.fact{min-height:92px}.amenity-grid{grid-template-columns:1fr 1fr}.amenity{display:flex;flex-direction:column;text-align:center;min-height:132px}.gallery-grid{display:grid!important;grid-template-columns:1fr 1fr!important;grid-auto-rows:145px!important;gap:8px!important}.gallery-item,.gallery-item.g1,.gallery-item.g2,.gallery-item.g3,.gallery-item.g4,.gallery-item.g5,.gallery-item.g6,.gallery-item.g7,.gallery-item.g8,.gallery-item.g9,.gallery-item.g10{display:block!important;width:auto!important;height:auto!important;margin:0!important;grid-column:span 1!important;grid-row:span 1!important}.gallery-item.g1{grid-column:1/-1!important;grid-row:span 2!important}.gallery-item.g4,.gallery-item.g8{grid-column:1/-1!important}
}


/* v3.4.2 MENU-ONLY PATCH: neutral Drina default state; hover/active only on interaction. */
@media (min-width:1181px){
  .nav-inner{grid-template-columns:104px minmax(0,1fr) auto auto;gap:18px}
  .primary-nav{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    min-width:0;
    padding:0!important;
    margin:0!important;
  }
  .primary-nav>a,.nav-parent>a{
    min-height:48px!important;
    padding:0 16px!important;
    border:1px solid transparent!important;
    border-radius:999px!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#334039!important;
    font-family:var(--sans)!important;
    font-size:.94rem!important;
    font-weight:720!important;
    line-height:1!important;
    letter-spacing:-.012em!important;
    white-space:nowrap!important;
    transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease!important;
  }
  .primary-nav>a span,.nav-parent>a span{color:inherit!important}
  .primary-nav>a:hover,.primary-nav>a:focus-visible,
  .nav-parent>a:hover,.nav-parent>a:focus-visible,
  .nav-parent:hover>a,.nav-parent:focus-within>a{
    background:#e9e6d6!important;
    color:#334039!important;
    border-color:rgba(55,66,57,.10)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)!important;
    outline:none!important;
  }
  .primary-nav>a.is-active,.nav-parent.is-active>a,
  .primary-nav>a.is-active:hover,.primary-nav>a.is-active:focus-visible,
  .nav-parent.is-active>a:hover,.nav-parent.is-active>a:focus-visible{
    background:#3f5747!important;
    color:#fffdf7!important;
    border-color:#3f5747!important;
    box-shadow:0 8px 18px rgba(43,62,50,.14)!important;
  }
  .primary-nav .nav-drina{
    min-height:48px!important;
    padding-inline:16px!important;
    background:transparent!important;
    color:var(--drina-dark)!important;
    border-color:transparent!important;
    box-shadow:none!important;
    font-weight:720!important;
  }
  .primary-nav .nav-drina:hover,.primary-nav .nav-drina:focus-visible{
    background:#e2ece9!important;
    color:var(--drina-dark)!important;
    border-color:rgba(45,102,109,.14)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)!important;
  }
  .primary-nav .nav-drina.is-active{
    background:#35646b!important;
    color:#fff!important;
    border-color:#35646b!important;
    box-shadow:0 8px 18px rgba(42,89,95,.15)!important;
  }
  .nav-home{gap:9px!important;padding-left:13px!important}
  .nav-home .nav-item-icon{width:19px!important;height:19px!important;color:currentColor!important;stroke-width:2.45!important;flex:0 0 auto}
  .nav-chevron{width:15px!important;height:15px!important;margin-left:2px!important;color:currentColor!important;stroke-width:2.7!important}
  .nav-parent{padding-bottom:12px!important;margin-bottom:-12px!important}
  .nav-parent::after{height:14px!important}
  .dropdown{
    top:calc(100% + 7px)!important;
    left:0!important;
    width:238px!important;
    padding:9px!important;
    transform:translateY(5px)!important;
    background:#fffdf7!important;
    border:1px solid rgba(54,66,57,.12)!important;
    border-radius:16px!important;
    box-shadow:0 16px 36px rgba(43,55,47,.13)!important;
  }
  .nav-parent:hover .dropdown,.nav-parent:focus-within .dropdown,.nav-parent.open .dropdown{transform:none!important}
  .dropdown a{
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    padding:10px 13px!important;
    border:0!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#334039!important;
    font-family:var(--sans)!important;
    font-size:.88rem!important;
    font-weight:650!important;
    line-height:1.25!important;
  }
  .dropdown a:hover,.dropdown a:focus-visible{
    background:#eeeadd!important;
    color:#283a31!important;
    outline:none!important;
  }
  .nav-book{
    min-height:48px!important;
    padding:0 20px!important;
    border-radius:999px!important;
    background:#3f5747!important;
    color:#fffdf7!important;
    border:1px solid #3f5747!important;
    box-shadow:0 8px 18px rgba(43,62,50,.14)!important;
    font-size:.9rem!important;
    font-weight:750!important;
  }
  .nav-book:hover,.nav-book:focus-visible{
    background:#31483a!important;
    color:#fff!important;
    border-color:#31483a!important;
    transform:none!important;
  }
  .nav-book .icon{width:18px!important;height:18px!important;color:currentColor!important;stroke-width:2.45!important}
}

@media (max-width:1180px){
  .primary-nav>a,.nav-parent>a{
    min-height:48px!important;
    color:#334039!important;
    font-family:var(--sans)!important;
    font-weight:700!important;
  }
  .primary-nav>a span,.nav-parent>a span{color:inherit!important}
  .primary-nav>a:hover,.primary-nav>a:focus-visible,.nav-parent>a:hover,.nav-parent>a:focus-visible{
    background:#ece8da!important;color:#334039!important;
  }
  .primary-nav>a.is-active,.nav-parent.is-active>a{
    background:#3f5747!important;color:#fffdf7!important;border-radius:12px!important;
  }
  .primary-nav .nav-drina{background:transparent!important;color:var(--drina-dark)!important;border-radius:12px!important;box-shadow:none!important}
  .primary-nav .nav-drina:hover,.primary-nav .nav-drina:focus-visible{background:#e2ece9!important;color:var(--drina-dark)!important}
  .primary-nav .nav-drina.is-active{background:#35646b!important;color:#fff!important}
  .nav-home .nav-item-icon{width:19px!important;height:19px!important;color:currentColor!important;stroke-width:2.45!important}
  .nav-chevron{color:currentColor!important}
}

/* v3.5.2 floating-contact icon alignment with approved carved-wood iconography A. */
.floating-contact{background:rgba(250,247,239,.92);border-color:rgba(92,62,37,.18);border-radius:18px;padding:7px;gap:7px}
.floating-contact a{width:50px;height:50px;border-radius:9px!important;background:transparent!important;box-shadow:none!important;color:inherit!important}
.floating-contact a .wood-badge{--badge-size:48px;display:grid!important}
.floating-contact .float-wa,.floating-contact .float-ig{background:transparent!important}
.floating-contact .float-wa .wood-badge{color:#2e2117}
.floating-contact .float-ig .wood-badge{color:var(--drina-dark)}
.floating-contact .social-label{right:58px}
.fact.fact-drina>.wood-badge{color:var(--drina-dark)!important}

@media (max-width:720px){
  .floating-contact a{width:46px;height:46px}
  .floating-contact a .wood-badge{--badge-size:44px}
}

/* v3.5.4 FLOATING CONTACT ONLY
   Exact implementation of the approved compact carved-wood UI:
   no white capsule on desktop, three independent plaques, and a matching
   carved-wood back-to-top plaque. No other site component is changed. */
@media (min-width:781px){
  .floating-contact{
    position:fixed!important;
    right:18px!important;
    bottom:96px!important;
    left:auto!important;
    z-index:1100!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:7px!important;
    width:auto!important;
    padding:0!important;
    margin:0!important;
    transform:none!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  .floating-contact a{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:inherit!important;
    box-shadow:none!important;
    transition:transform .16s ease,filter .16s ease!important;
  }
  .floating-contact a .wood-badge{
    --badge-size:44px!important;
    display:grid!important;
  }
  .floating-contact a .wood-badge-symbol{
    width:56%!important;
    height:56%!important;
    inset:22%!important;
  }
  .floating-contact a:hover,
  .floating-contact a:focus-visible{
    transform:translateY(-2px)!important;
    filter:drop-shadow(0 4px 5px rgba(58,42,29,.15));
    outline:none!important;
  }
  .floating-contact .float-phone .wood-badge{color:#38291e!important}
  .floating-contact .float-wa .wood-badge{color:#356a4a!important}
  .floating-contact .float-ig .wood-badge{color:#2f6f73!important}
  .floating-contact .social-label{
    position:absolute!important;
    right:52px!important;
    top:50%!important;
    transform:translate(4px,-50%)!important;
    white-space:nowrap!important;
    padding:5px 8px!important;
    border-radius:6px!important;
    background:#2f4037!important;
    color:#fff!important;
    font-size:.67rem!important;
    font-weight:700!important;
    opacity:0!important;
    visibility:hidden!important;
    box-shadow:0 5px 14px rgba(21,31,26,.12)!important;
    transition:.16s ease!important;
  }
  .floating-contact a:hover .social-label,
  .floating-contact a:focus-visible .social-label{
    opacity:1!important;
    visibility:visible!important;
    transform:translate(0,-50%)!important;
  }

  .back-to-top{
    position:fixed!important;
    right:18px!important;
    bottom:38px!important;
    z-index:1090!important;
    display:grid!important;
    place-items:center!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#38291e!important;
    box-shadow:none!important;
    opacity:0;
    visibility:hidden;
    transform:translateY(7px);
    transition:opacity .18s ease,visibility .18s ease,transform .18s ease,filter .16s ease!important;
  }
  .back-to-top.visible{opacity:1!important;visibility:visible!important;transform:none!important}
  .back-to-top .wood-badge{--badge-size:44px!important;display:grid!important;color:#38291e!important}
  .back-to-top .wood-badge-symbol{width:54%!important;height:54%!important;inset:23%!important}
  .back-to-top .icon{display:none!important}
  .back-to-top:hover,
  .back-to-top:focus-visible{
    transform:translateY(-2px)!important;
    filter:drop-shadow(0 4px 5px rgba(58,42,29,.15));
    outline:none!important;
  }
}

@media (max-width:780px){
  .floating-contact{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:10px!important;
    z-index:1100!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:7px!important;
    width:auto!important;
    padding:0!important;
    margin:0!important;
    transform:translateX(-50%)!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  .floating-contact a{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .floating-contact a .wood-badge{--badge-size:42px!important;display:grid!important}
  .floating-contact a .wood-badge-symbol{width:56%!important;height:56%!important;inset:22%!important}
  .floating-contact .float-phone .wood-badge{color:#38291e!important}
  .floating-contact .float-wa .wood-badge{color:#356a4a!important}
  .floating-contact .float-ig{display:grid!important}
  .floating-contact .float-ig .wood-badge{color:#2f6f73!important}
  .floating-contact .social-label{display:none!important}

  .back-to-top{
    position:fixed!important;
    right:12px!important;
    bottom:62px!important;
    z-index:1090!important;
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#38291e!important;
    box-shadow:none!important;
  }
  .back-to-top .wood-badge{--badge-size:42px!important;display:grid!important;color:#38291e!important}
  .back-to-top .wood-badge-symbol{width:54%!important;height:54%!important;inset:23%!important}
  .back-to-top .icon{display:none!important}
}

/* v3.6.0 - hero visual impact, regional guide and practical-info layout.
   Uses only the already approved carved-wood icon system and the Jadar cross-stitch accent. */
.hero-mobile-photo{display:none}
@media (min-width:1241px){
  .hero{min-height:760px;background-position:center 47%}
  .hero::before{background:linear-gradient(90deg,rgba(12,36,29,.94) 0%,rgba(14,40,32,.86) 28%,rgba(18,49,40,.58) 43%,rgba(18,49,40,.16) 58%,rgba(18,49,40,.08) 100%)}
  .hero-grid{grid-template-columns:minmax(470px,.88fr) minmax(380px,.58fr);gap:clamp(120px,13vw,235px);padding:72px 0 112px}
  .hero-copy{max-width:620px}
  .hero-copy h1{font-size:clamp(3.25rem,4.25vw,5rem)}
  .hero-deck,.hero-lead{max-width:610px}
  .booking-card{max-width:430px;justify-self:end}
}

.section-ethno-mark{width:178px;height:38px;margin-top:18px;background:url('../brand/jadar-vez.svg') left center/168px 37px no-repeat;opacity:.88}

/* Explore / region */
.podrinje-section{background:linear-gradient(180deg,#fbf8f0 0%,#f6f0e5 100%)}
.experience-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.72fr);gap:72px;align-items:end;margin-bottom:38px}
.experience-head-copy h2{max-width:790px;margin:0;font-family:var(--serif);font-size:clamp(2.65rem,3.6vw,4.05rem);line-height:1.08;color:var(--forest)}
.experience-head-side{padding:0 0 7px}
.experience-head-side>p{margin:0;color:var(--muted);font-size:1rem;line-height:1.72}
.regional-map-link{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:10px 14px;border:1px solid var(--warm-line);border-radius:8px;background:#fffdf8;color:var(--forest);font-size:.75rem;font-weight:800;box-shadow:0 5px 14px rgba(52,45,34,.05)}
.regional-map-link .icon{width:17px;height:17px;color:var(--drina-dark);stroke-width:2.6}.regional-map-link .icon-arrow{margin-left:3px;color:var(--walnut)}
.regional-map-link:hover{border-color:rgba(44,120,128,.45);background:#f7fbfa}

.experience-grid-rich{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border:0!important}
.experience-grid-rich article{display:flex;flex-direction:column;min-height:390px;padding:25px 26px 22px!important;border:1px solid var(--warm-line)!important;border-radius:12px;background:#fffdf8;box-shadow:0 7px 22px rgba(49,43,33,.05);overflow:hidden}
.experience-grid-rich article::before{content:"";position:absolute;right:17px;bottom:12px;width:92px;height:34px;border:0;border-radius:0;background:url('../brand/jadar-vez.svg') center/92px 21px no-repeat;opacity:.10}
.experience-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.experience-card-top .wood-badge{--badge-size:70px}
.experience-card-top>span{font-family:var(--serif);font-size:2rem;line-height:1;color:rgba(32,61,49,.14);padding-top:5px}
.experience-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px 10px;margin:15px 0 0;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em}
.experience-meta b{font-size:.60rem;color:var(--drina-dark)}
.experience-meta small{font-size:.58rem;color:#8b8174}
.experience-grid-rich h3{margin:9px 0 8px!important;font-size:1.62rem!important;line-height:1.15;color:var(--forest)}
.experience-grid-rich p{max-width:none!important;margin:0!important;color:var(--muted);font-size:.88rem!important;line-height:1.62;flex:1}
.experience-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:15px;border-top:1px solid rgba(78,67,51,.12);position:relative;z-index:2}
.experience-actions a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 10px;border-radius:7px;border:1px solid rgba(76,61,43,.16);background:#f7f1e6;color:var(--forest);font-size:.68rem;font-weight:800}
.experience-actions a:first-child{color:var(--drina-dark);background:#eef5f4;border-color:rgba(44,120,128,.20)}
.experience-actions a .icon{width:14px;height:14px;stroke-width:2.7}.experience-actions a:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(45,42,34,.06)}
.podrinje-section .section-note{margin:22px 0 0;padding-left:2px;color:#6e706b;font-size:.92rem}

/* Practical info: full-width heading, then aligned content and map. */
.info-section{background:#faf7ef;padding-top:84px}
.info-section-head{max-width:1120px;margin:0 0 40px}
.info-section-head h2{max-width:1000px;margin:0;font-family:var(--serif);font-size:clamp(2.6rem,3.6vw,4rem);line-height:1.08;color:var(--forest)}
.info-section-head>p:not(.eyebrow){max-width:780px;margin:17px 0 0;color:var(--muted);font-size:1rem;line-height:1.7}
.info-body-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(500px,1.05fr);gap:48px;align-items:start}
.info-copy{min-width:0}.info-list-rich{margin:0;border-top:1px solid var(--line)}
.info-list-rich>div{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);gap:22px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.info-list-rich dt{display:flex;align-items:center;gap:12px;font-weight:750;color:var(--forest);font-size:.80rem;line-height:1.3}
.info-list-rich dt .wood-badge{--badge-size:44px!important;flex:0 0 44px}.info-list-rich dt .wood-badge-symbol{width:60%!important;height:60%!important;inset:20%!important}
.info-list-rich dd{margin:0;text-align:left;color:#727972;font-size:.80rem;line-height:1.55}
.info-actions{margin-top:22px}
.map-card{align-self:start;margin-top:0;border-radius:12px;overflow:hidden;padding:9px;background:#fffdf8}
.map-card iframe{height:455px}
.map-caption{grid-template-columns:auto minmax(0,1fr) auto;padding:13px 10px 7px}.map-caption>.wood-badge{--badge-size:45px!important}.map-caption>.wood-badge .wood-badge-symbol{width:58%!important;height:58%!important;inset:21%!important}

@media (max-width:1240px){
  .experience-head{grid-template-columns:1fr;gap:18px}.experience-head-side{max-width:760px}
  .experience-grid-rich{grid-template-columns:repeat(2,minmax(0,1fr))}
  .info-body-grid{grid-template-columns:1fr 1fr;gap:34px}.info-list-rich>div{grid-template-columns:1fr;gap:8px}
}

@media (max-width:780px){
  .hero{display:block!important;min-height:auto!important;background-image:none!important;background-color:var(--forest-dark)!important;color:#fff}
  .hero::before{display:none!important}.hero::after{height:72px!important;bottom:-52px!important}
  .hero-mobile-photo{display:block;position:relative;width:100%;height:62vw;min-height:260px;max-height:410px;overflow:hidden;background:#213a31}
  .hero-mobile-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 46%}
  .hero-mobile-photo::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(0deg,rgba(21,44,36,.88),rgba(21,44,36,0));pointer-events:none}
  .hero-grid{display:grid!important;grid-template-columns:1fr!important;gap:30px!important;padding:32px 0 88px!important}
  .hero-copy{max-width:none!important}.hero-copy h1{font-size:clamp(2.55rem,11vw,3.45rem)!important}.hero-deck{font-size:1.2rem!important}.hero-lead{font-size:.96rem!important}
  .booking-card{max-width:none!important;width:100%!important}

  .experience-head{margin-bottom:27px}.experience-head-copy h2{font-size:clamp(2.25rem,9vw,3rem)}.section-ethno-mark{width:145px;background-size:145px 32px;height:32px}
  .experience-grid-rich{grid-template-columns:1fr;gap:11px}.experience-grid-rich article{min-height:0;padding:20px!important}.experience-card-top .wood-badge{--badge-size:62px}.experience-grid-rich p{font-size:.86rem!important}.experience-actions{margin-top:15px}

  .info-section{padding-top:66px}.info-section-head{margin-bottom:28px}.info-section-head h2{font-size:clamp(2.2rem,9vw,2.95rem)}.info-section-head>p:not(.eyebrow){font-size:.96rem}
  .info-body-grid{grid-template-columns:1fr;gap:28px}.info-list-rich>div{grid-template-columns:1fr;gap:8px;padding:12px 0}.info-list-rich dt{font-size:.80rem}.info-list-rich dd{padding-left:56px;font-size:.79rem}.map-card iframe{height:360px}.map-caption{grid-template-columns:auto 1fr}.map-caption a{grid-column:1/-1;margin-left:57px}
}

@media (max-width:480px){
  .hero-mobile-photo{height:68vw;min-height:235px}
  .experience-actions{display:grid;grid-template-columns:1fr 1fr}.experience-actions a{justify-content:center}
  .info-list-rich dd{padding-left:0}.map-card iframe{height:315px}
}

/* ==========================================================
   v3.6.3 FINAL GRAPHIC SYSTEM
   Source of truth: approved "Korekcija grafičkog sistema" board.
   No re-interpretation: approved plaques and textile motifs are
   used as image assets extracted from the approved board itself.
   ========================================================== */
.wood-badge{
  --badge-size:74px;
  width:var(--badge-size)!important;
  height:var(--badge-size)!important;
  min-width:var(--badge-size)!important;
  min-height:var(--badge-size)!important;
  flex:0 0 var(--badge-size)!important;
  display:grid!important;
  place-items:center!important;
  position:relative!important;
  padding:0!important;
  margin:0!important;
  background:none!important;
  box-shadow:none!important;
  clip-path:none!important;
  overflow:visible!important;
  color:inherit!important;
}
.wood-badge::before,.wood-badge::after,.wood-badge-frame,.wood-badge-symbol{display:none!important}
.wood-badge-img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:contain!important;
  filter:drop-shadow(0 5px 7px rgba(55,38,23,.13));
}
.fact>.wood-badge{--badge-size:94px!important}
.amenity .wood-badge{--badge-size:88px!important}
.river-feature-grid .wood-badge{--badge-size:82px!important}
.experience-card-top .wood-badge{--badge-size:78px!important}
.info-list-rich dt .wood-badge{--badge-size:52px!important;flex:0 0 52px!important}
.map-caption>.wood-badge{--badge-size:50px!important}

/* Approved textile motif. The previous CSS-generated "x" pattern is removed. */
.fact::after{
  width:34px!important;height:34px!important;bottom:4px!important;
  background:url('../final/motifs/diamond.png') center/contain no-repeat!important;
  opacity:.50!important;filter:none!important;
}
.fact{padding-bottom:31px!important}
.fact-drina::after{opacity:.63!important}
.section-ethno-mark{
  width:86px!important;height:78px!important;margin:18px 0 16px!important;
  background:url('../final/motifs/diamond.png') center/contain no-repeat!important;
  opacity:.92!important;
}
.jadar-divider{
  width:250px!important;height:70px!important;margin:12px 0 16px!important;
  background:
    linear-gradient(var(--sand),var(--sand)) left center/82px 1px no-repeat,
    url('../final/motifs/diamond.png') center/64px 62px no-repeat,
    linear-gradient(var(--sand),var(--sand)) right center/82px 1px no-repeat!important;
  opacity:.96!important;
}
.booking-ornament{
  width:190px!important;height:62px!important;margin:0 auto 3px!important;
  background:
    linear-gradient(rgba(109,72,45,.34),rgba(109,72,45,.34)) left center/52px 1px no-repeat,
    url('../final/motifs/diamond-terracotta.png') center/64px 60px no-repeat,
    linear-gradient(rgba(109,72,45,.34),rgba(109,72,45,.34)) right center/52px 1px no-repeat!important;
  opacity:.92!important;
}

/* Keep the already approved menu behaviour and geometry; only replace the decorative source. */
.nav-shell::after{
  content:""!important;display:block!important;position:absolute!important;inset:8px 18px!important;
  background-image:url('../final/motifs/diamond.png'),url('../final/motifs/diamond.png')!important;
  background-repeat:no-repeat,no-repeat!important;
  background-size:48px 44px,48px 44px!important;
  background-position:left center,right center!important;
  opacity:.62!important;pointer-events:none!important;z-index:-1!important;
}

/* Region: make the approved motif visible as a real section divider. */
.podrinje-section{position:relative!important;padding-top:124px!important}
.podrinje-section::before{
  content:"";position:absolute;top:34px;left:50%;transform:translateX(-50%);
  width:min(540px,72vw);height:52px;
  background:url('../final/motifs/band.png') center/contain no-repeat;
  opacity:.78;pointer-events:none;
}
.experience-grid-rich article::before{
  width:62px!important;height:58px!important;right:18px!important;bottom:13px!important;
  background:url('../final/motifs/diamond.png') center/contain no-repeat!important;
  opacity:.16!important;border:0!important;border-radius:0!important;
}

/* Info section: same approved motif, no pseudo-etno CSS geometry. */
.info-section{position:relative!important}
.info-section::after{
  content:"";display:block;width:min(520px,72vw);height:48px;margin:62px auto 0;
  background:url('../final/motifs/band.png') center/contain no-repeat;opacity:.58;
}

/* Amenities use only icons that exist in the locked board; proportions match the board. */
.amenity-grid{grid-template-columns:repeat(5,1fr)!important;gap:14px!important}
.amenity{min-height:154px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;text-align:center!important;gap:9px!important;padding:14px 12px!important}
.amenity b{font-family:var(--serif)!important;font-size:.98rem!important;font-weight:600!important}

/* River cards: approved plaque size and calmer card treatment. */
.river-feature-grid>div{min-height:132px!important;padding:18px!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:18px!important}
.river-feature-grid b{font-size:1.12rem!important}.river-feature-grid small{font-size:.75rem!important;line-height:1.5!important}

/* Floating UI: exact approved social/back-to-top plaques, no extra capsule or alternative frame. */
.floating-contact{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;gap:7px!important;backdrop-filter:none!important}
.floating-contact a{width:46px!important;height:46px!important;background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;color:inherit!important}
.floating-contact a .wood-badge{--badge-size:46px!important}
.floating-contact .float-phone .wood-badge,.floating-contact .float-wa .wood-badge,.floating-contact .float-ig .wood-badge{color:inherit!important}
.back-to-top{width:46px!important;height:46px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:inherit!important}
.back-to-top .wood-badge{--badge-size:46px!important;display:grid!important;color:inherit!important}

/* Footer gets the approved woven strip as a controlled ending, not a repeating CSS pattern. */
.site-footer{position:relative!important;padding-top:78px!important}
.site-footer::before{
  content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:min(620px,78vw);height:50px;background:url('../final/motifs/band.png') center/contain no-repeat;opacity:.72;
}

@media(max-width:1100px){
  .amenity-grid{grid-template-columns:repeat(2,1fr)!important}
  .fact>.wood-badge{--badge-size:82px!important}
  .experience-card-top .wood-badge{--badge-size:72px!important}
}
@media(max-width:780px){
  .nav-shell::after{background-size:34px 32px,34px 32px!important;opacity:.45!important}
  .jadar-divider{width:210px!important;height:58px!important;background-size:64px 1px,54px 54px,64px 1px!important}
  .booking-ornament{width:166px!important;height:56px!important;background-size:44px 1px,56px 54px,44px 1px!important}
  .fact>.wood-badge{--badge-size:72px!important}
  .amenity .wood-badge{--badge-size:72px!important}
  .river-feature-grid .wood-badge{--badge-size:68px!important}
  .experience-card-top .wood-badge{--badge-size:66px!important}
  .podrinje-section{padding-top:104px!important}.podrinje-section::before{top:28px;width:82vw;height:44px}
  .amenity-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}.amenity{min-height:126px!important}
  .river-feature-grid>div{min-height:118px!important;gap:12px!important;padding:14px!important}
  .floating-contact a,.back-to-top{width:42px!important;height:42px!important}.floating-contact a .wood-badge,.back-to-top .wood-badge{--badge-size:42px!important}
  .site-footer{padding-top:68px!important}.site-footer::before{top:14px;width:84vw;height:42px}
}


/* v3.6.3 ASSET FIT + SAFE AREA
   Exact approved plaques are now clean transparent crops.
   Keep the whole source graphic visible; never crop it in cards or floating UI. */
.wood-badge,.wood-badge-img{overflow:visible!important}
.wood-badge-img{object-fit:contain!important;object-position:center!important}
.fact,.amenity,.river-feature-grid>div,.experience-card-top,.floating-contact a,.back-to-top{overflow:visible!important}


/* ==========================================================
   v3.6.4 VISUAL RHYTHM + MOTIF PLACEMENT
   Step 2 after final asset integration: spacing, motif scale,
   floating controls and removal of redundant watermark motifs.
   No text or content changes in this pass.
   ========================================================== */

/* Reduce the excessive empty transition between hero facts and story. */
.quick-facts{padding-bottom:24px!important}
.section-story{padding-top:44px!important}
.story-grid{align-items:center!important}

/* Fact-card ornament should read as a small textile signature, not a watermark. */
.fact{padding-bottom:23px!important}
.fact::after{width:24px!important;height:24px!important;bottom:6px!important;opacity:.46!important}
.fact-drina::after{opacity:.58!important}

/* Section diamond: smaller, calmer and closer to the copy. */
.section-ethno-mark{width:56px!important;height:52px!important;margin:14px 0 14px!important;opacity:.84!important}
.jadar-divider{
  width:216px!important;height:48px!important;margin:10px 0 13px!important;
  background:
    linear-gradient(var(--sand),var(--sand)) left center/70px 1px no-repeat,
    url('../final/motifs/diamond.png') center/42px 42px no-repeat,
    linear-gradient(var(--sand),var(--sand)) right center/70px 1px no-repeat!important;
}
.booking-ornament{
  width:174px!important;height:48px!important;margin:0 auto 4px!important;
  background:
    linear-gradient(rgba(109,72,45,.34),rgba(109,72,45,.34)) left center/54px 1px no-repeat,
    url('../final/motifs/diamond-terracotta.png') center/44px 44px no-repeat,
    linear-gradient(rgba(109,72,45,.34),rgba(109,72,45,.34)) right center/54px 1px no-repeat!important;
}

/* One textile band at a section boundary is enough. */
.podrinje-section{padding-top:92px!important}
.podrinje-section::before{top:22px!important;width:min(520px,68vw)!important;height:48px!important;opacity:.78!important}
.experience-grid-rich article::before{display:none!important}
.info-section::after{display:none!important}

/* Region cards: reduce dead space while preserving the six-card grid. */
.experience-grid-rich article{min-height:356px!important;padding:23px 24px 20px!important}
.experience-card-top .wood-badge{--badge-size:72px!important}
.experience-grid-rich p{line-height:1.58!important}
.experience-actions{margin-top:16px!important;padding-top:13px!important}

/* Amenities: keep the approved icons, but make cards less empty. */
.amenity{min-height:138px!important;padding:12px 10px!important;gap:7px!important}
.amenity .wood-badge{--badge-size:76px!important}
.amenity b{font-size:.94rem!important;line-height:1.2!important}
.amenities .section-head{margin-bottom:34px!important}

/* Practical information: tighten the section and remove the decorative void. */
.info-section{padding-bottom:76px!important}
.info-section-head{margin-bottom:30px!important}
.info-body-grid{align-items:start!important}

/* Floating actions remain secondary, but must be clearly legible on desktop. */
.floating-contact{gap:8px!important;right:20px!important;bottom:126px!important}
.floating-contact a{width:52px!important;height:52px!important}
.floating-contact a .wood-badge{--badge-size:52px!important}
.back-to-top{width:52px!important;height:52px!important;right:20px!important;bottom:54px!important}
.back-to-top .wood-badge{--badge-size:52px!important}

/* Only one woven strip at the footer transition. */
.site-footer{padding-top:72px!important}
.site-footer::before{top:15px!important;width:min(500px,66vw)!important;height:40px!important;opacity:.76!important}

@media(max-width:1100px){
  .section-story{padding-top:38px!important}
  .experience-grid-rich article{min-height:340px!important}
  .amenity{min-height:132px!important}
}
@media(max-width:780px){
  .quick-facts{padding-bottom:14px!important}
  .section-story{padding-top:34px!important}
  .fact{padding-bottom:19px!important}.fact::after{width:20px!important;height:20px!important;bottom:4px!important}
  .section-ethno-mark{width:46px!important;height:44px!important;margin:11px 0!important}
  .podrinje-section{padding-top:72px!important}.podrinje-section::before{top:18px!important;width:72vw!important;height:30px!important}
  .experience-grid-rich article{min-height:0!important}
  .experience-card-top .wood-badge{--badge-size:62px!important}
  .amenity{min-height:118px!important}.amenity .wood-badge{--badge-size:66px!important}
  .info-section{padding-bottom:58px!important}
  .floating-contact{right:10px!important;bottom:110px!important;gap:6px!important}
  .floating-contact a,.back-to-top{width:44px!important;height:44px!important}
  .floating-contact a .wood-badge,.back-to-top .wood-badge{--badge-size:44px!important}
  .back-to-top{right:10px!important;bottom:48px!important}
  .site-footer{padding-top:60px!important}.site-footer::before{top:12px!important;width:74vw!important;height:32px!important}
}


/* ==========================================================
   v3.6.6 MOBILE QA FIX
   Based on real-phone screenshots: keep the approved graphic
   system, but correct mobile layout, typography and fixed UI.
   No content/text changes in this pass.
   ========================================================== */
@media (max-width:780px){
  /* 1. Mobile type scale: large editorial headings must wrap cleanly. */
  .section-copy h2,
  .section-head h2,
  .river-copy h2,
  .experience-head-copy h2,
  .info-section-head h2,
  .instagram-copy h2,
  .reviews-copy h2,
  .final-cta h2{
    font-size:clamp(2.15rem,8.7vw,2.85rem)!important;
    line-height:1.06!important;
    letter-spacing:-.018em!important;
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .river-copy h2{font-size:clamp(2.2rem,9vw,2.9rem)!important;line-height:1.04!important}
  .section-copy p,.river-copy p,.info-section-head>p:not(.eyebrow){font-size:.98rem!important;line-height:1.66!important}

  /* 2. Top facts: compact cards; the motif is a section accent, not repeated noise. */
  .quick-facts{margin-top:-12px!important;padding-bottom:10px!important}
  .facts-grid{grid-template-columns:1fr!important;gap:9px!important}
  .fact{
    min-height:104px!important;
    padding:13px 16px!important;
    gap:14px!important;
    border-radius:12px!important;
  }
  .fact>.wood-badge{--badge-size:68px!important}
  .fact b{font-size:1.28rem!important;line-height:1.08!important}
  .fact>div>span{font-size:.64rem!important;line-height:1.25!important}
  .fact::after{display:none!important}

  /* 3. Story rhythm: remove the large mobile void between image and copy. */
  .section-story{padding-top:26px!important}
  .story-grid{gap:30px!important;align-items:start!important}
  .story-visual{padding-bottom:22px!important}
  .section-ethno-mark{width:42px!important;height:40px!important;margin:10px 0 15px!important}
  .jadar-divider{margin:8px 0 12px!important}

  /* 4. Drina section: one readable card per row and a calmer text block. */
  .river-section{padding:64px 0!important}
  .river-grid{gap:34px!important}
  .river-copy p{font-size:.98rem!important;line-height:1.68!important}
  .river-feature-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:24px!important;
  }
  .river-feature-grid>div{
    min-height:0!important;
    display:grid!important;
    grid-template-columns:70px minmax(0,1fr)!important;
    align-items:center!important;
    gap:14px!important;
    padding:14px 15px!important;
  }
  .river-feature-grid .wood-badge{--badge-size:68px!important}
  .river-feature-grid>div>span{min-width:0!important}
  .river-feature-grid b{display:block!important;font-size:1.12rem!important;line-height:1.15!important}
  .river-feature-grid small{display:block!important;margin-top:5px!important;font-size:.78rem!important;line-height:1.48!important}
  .river-visual{padding:0 18px 26px 24px!important}

  /* 5. Amenities: keep two compact columns on normal phones; one on very narrow screens only. */
  .amenities .section-head{margin-bottom:25px!important}
  .amenity-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .amenity{min-height:112px!important;padding:10px 8px!important;gap:6px!important}
  .amenity .wood-badge{--badge-size:60px!important}
  .amenity b{font-size:.88rem!important;line-height:1.18!important}

  /* 6. Regional cards: denser mobile cards and stable actions. */
  .podrinje-section{padding-top:66px!important}
  .podrinje-section::before{top:16px!important;width:66vw!important;height:28px!important;opacity:.7!important}
  .experience-head{gap:13px!important;margin-bottom:22px!important}
  .experience-head-side>p{font-size:.94rem!important;line-height:1.58!important}
  .regional-map-link{margin-top:13px!important}
  .experience-grid-rich{grid-template-columns:1fr!important;gap:10px!important}
  .experience-grid-rich article{min-height:0!important;padding:18px 18px 16px!important;border-radius:11px!important}
  .experience-card-top .wood-badge{--badge-size:58px!important}
  .experience-card-top>span{font-size:1.72rem!important}
  .experience-meta{margin-top:10px!important}
  .experience-grid-rich h3{font-size:1.48rem!important;margin:7px 0 7px!important}
  .experience-grid-rich p{font-size:.85rem!important;line-height:1.53!important}
  .experience-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:13px!important;padding-top:12px!important}
  .experience-actions a{justify-content:center!important;min-height:40px!important;padding:7px 8px!important}

  /* 7. Practical information: compact rows and map sized for a phone. */
  .info-section{padding-top:58px!important;padding-bottom:48px!important}
  .info-section-head{margin-bottom:22px!important}
  .info-body-grid{grid-template-columns:1fr!important;gap:24px!important}
  .info-list-rich>div{grid-template-columns:1fr!important;gap:7px!important;padding:11px 0!important}
  .info-list-rich dt{gap:11px!important;font-size:.83rem!important}
  .info-list-rich dt .wood-badge{--badge-size:48px!important;flex:0 0 48px!important}
  .info-list-rich dd{padding-left:0!important;font-size:.84rem!important;line-height:1.52!important}
  .info-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:18px!important}
  .info-actions .btn{width:100%!important;min-width:0!important;justify-content:center!important;padding-inline:10px!important}
  .map-card{padding:7px!important;border-radius:11px!important}
  .map-card iframe{height:300px!important}
  .map-caption{grid-template-columns:auto 1fr!important;gap:9px!important;padding:10px 7px 6px!important}
  .map-caption a{grid-column:1/-1!important;margin:3px 0 0 54px!important}

  /* 8. Floating contact: a real bottom dock, not loose icons over the copy. */
  .floating-contact{
    position:fixed!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
    transform:translateX(-50%)!important;
    z-index:1200!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:5px!important;
    width:auto!important;
    padding:5px 7px!important;
    background:rgba(250,247,239,.97)!important;
    border:1px solid rgba(79,58,39,.18)!important;
    border-radius:16px!important;
    box-shadow:0 8px 24px rgba(24,37,30,.18)!important;
    backdrop-filter:blur(8px)!important;
  }
  .floating-contact a{
    width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
  }
  .floating-contact a .wood-badge{--badge-size:40px!important}
  .floating-contact .float-ig{display:grid!important}
  .floating-contact .social-label{display:none!important}

  /* Back-to-top is separate from the dock and respects the mobile safe area. */
  .back-to-top{
    right:10px!important;
    left:auto!important;
    bottom:calc(70px + env(safe-area-inset-bottom,0px))!important;
    width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
    z-index:1190!important;
  }
  .back-to-top .wood-badge{--badge-size:40px!important}

  /* Leave room at the true end of the page for the fixed mobile dock. */
  .site-footer{padding-bottom:86px!important}
}

@media (max-width:480px){
  .hero-copy h1{font-size:clamp(2.35rem,11vw,2.9rem)!important;line-height:1.02!important}
  .hero-deck{font-size:1.05rem!important;line-height:1.38!important}
  .section-copy h2,
  .section-head h2,
  .river-copy h2,
  .experience-head-copy h2,
  .info-section-head h2,
  .instagram-copy h2,
  .reviews-copy h2,
  .final-cta h2{font-size:clamp(2rem,10vw,2.55rem)!important;line-height:1.05!important}
  .fact{min-height:98px!important;padding:12px 14px!important}.fact>.wood-badge{--badge-size:64px!important}.fact b{font-size:1.2rem!important}
  .story-grid{gap:24px!important}.story-visual{padding:0 25px 18px 0!important}
  .river-feature-grid>div{grid-template-columns:64px minmax(0,1fr)!important;padding:12px 13px!important;gap:12px!important}.river-feature-grid .wood-badge{--badge-size:62px!important}
  .amenity-grid{grid-template-columns:1fr 1fr!important}.amenity{min-height:106px!important}.amenity .wood-badge{--badge-size:56px!important}.amenity b{font-size:.82rem!important}
  .experience-actions{grid-template-columns:1fr 1fr!important}
  .info-actions{grid-template-columns:1fr!important}.info-actions .btn{min-height:46px!important}
  .map-card iframe{height:275px!important}
  .floating-contact{bottom:calc(7px + env(safe-area-inset-bottom,0px))!important}
  .back-to-top{bottom:calc(67px + env(safe-area-inset-bottom,0px))!important}
}

@media (max-width:360px){
  .amenity-grid{grid-template-columns:1fr!important}
  .experience-actions{grid-template-columns:1fr!important}
}

/* ==========================================================
   v3.6.7 LOCKED VISUAL SYSTEM — FINAL ASSET NORMALIZATION
   Source of truth: the approved Etno Kuća Drina presentation.
   Text/content is untouched. This pass standardizes all icon
   groups, destination symbols, folk ornaments and contact UI.
   ========================================================== */

/* One rendering rule for every raster plaque. The files themselves are
   normalized 512×512 assets with hard-clean alpha, so no source edge may
   be clipped or expose AI fringe pixels. */
.wood-badge{
  display:grid!important;
  place-items:center!important;
  width:var(--badge-size)!important;
  height:var(--badge-size)!important;
  min-width:var(--badge-size)!important;
  min-height:var(--badge-size)!important;
  flex:0 0 var(--badge-size)!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
  clip-path:none!important;
}
.wood-badge-img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  image-rendering:auto!important;
  filter:drop-shadow(0 5px 7px rgba(48,35,23,.13))!important;
  transform:none!important;
}

/* Locked optical scale by group. Every icon inside one group is the same size. */
.fact>.wood-badge{--badge-size:92px!important}
.amenity .wood-badge{--badge-size:96px!important}
.river-feature-grid .wood-badge{--badge-size:104px!important}
.experience-card-top .wood-badge{--badge-size:90px!important}
.info-list-rich dt .wood-badge{--badge-size:52px!important;flex-basis:52px!important}
.map-caption>.wood-badge{--badge-size:54px!important}

/* Five summary cards: visually match the approved cards and keep the ornament
   as a deliberate signature rather than a tiny raster watermark. */
.facts-grid{align-items:stretch!important}
.fact{
  min-height:164px!important;
  display:grid!important;
  grid-template-columns:auto 1fr!important;
  align-items:center!important;
  column-gap:18px!important;
  row-gap:4px!important;
  padding:20px 22px 34px!important;
  overflow:visible!important;
}
.fact>div{min-width:0!important}
.fact b{line-height:1.05!important}
.fact::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:8px!important;
  transform:translateX(-50%)!important;
  width:28px!important;
  height:28px!important;
  background:url('../final/motifs/mini-diamond.svg') center/contain no-repeat!important;
  opacity:.78!important;
}

/* Amenities: approved 5×2 gallery of plaques. */
.amenity-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:18px!important}
.amenity{
  min-height:196px!important;
  padding:18px 14px 16px!important;
  gap:10px!important;
  border-radius:15px!important;
  overflow:visible!important;
}
.amenity b{max-width:92%!important;line-height:1.18!important}

/* Drina feature cards: the icon is a true visual anchor, not a miniature stamp. */
.river-feature-grid{gap:16px!important}
.river-feature-grid>div{
  min-height:178px!important;
  padding:22px!important;
  gap:20px!important;
  align-items:center!important;
  overflow:visible!important;
}
.river-feature-grid>div>span{min-width:0!important}
.river-feature-grid b{font-size:1.32rem!important;line-height:1.14!important}
.river-feature-grid small{font-size:.86rem!important;line-height:1.55!important}

/* Destination cards: each place now has a dedicated plaque from the approved
   visual family.  The card header keeps the same baseline and optical scale. */
.experience-card-top{
  min-height:94px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  overflow:visible!important;
}
.experience-card-top>span{line-height:1!important;padding-top:4px!important}
.experience-grid-rich article{overflow:visible!important}

/* Practical information: dedicated compact family, all exactly equal. */
.info-list-rich dt{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
}
.info-list-rich dt .wood-badge{align-self:center!important}

/* Approved ornament language: full motif for editorial sections, vector mini
   motif for tiny accents, and one woven band at structural transitions. */
.section-ethno-mark{
  width:82px!important;height:82px!important;
  background:url('../final/motifs/diamond.png') center/contain no-repeat!important;
  opacity:.96!important;
}
.jadar-divider{
  width:260px!important;height:64px!important;
  background:
    linear-gradient(rgba(112,78,49,.38),rgba(112,78,49,.38)) left center/82px 1px no-repeat,
    url('../final/motifs/diamond.png') center/58px 58px no-repeat,
    linear-gradient(rgba(112,78,49,.38),rgba(112,78,49,.38)) right center/82px 1px no-repeat!important;
}
.booking-ornament{
  width:230px!important;height:56px!important;
  background:url('../final/motifs/band.png') center/contain no-repeat!important;
  opacity:.92!important;
}
.podrinje-section::before,
.site-footer::before{
  background:url('../final/motifs/band.png') center/contain no-repeat!important;
}
.podrinje-section::before{width:min(720px,72vw)!important;height:58px!important}
.site-footer::before{width:min(760px,72vw)!important;height:58px!important}

/* Header ornament: no repeated noisy mini-pattern. One clean approved diamond
   on each side of the navigation shell. */
.nav-shell::after{
  inset:8px 14px!important;
  background-image:url('../final/motifs/mini-diamond.svg'),url('../final/motifs/mini-diamond.svg')!important;
  background-size:44px 44px,44px 44px!important;
  opacity:.58!important;
}

/* Desktop quick-contact = approved linen capsule with three wooden plaques. */
.floating-contact{
  position:fixed!important;
  left:auto!important;
  right:18px!important;
  bottom:122px!important;
  transform:none!important;
  z-index:1100!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  padding:9px!important;
  background:#f7f2e7!important;
  border:1px solid rgba(83,63,42,.22)!important;
  border-radius:28px!important;
  box-shadow:0 12px 28px rgba(25,35,28,.15)!important;
  backdrop-filter:none!important;
}
.floating-contact a{
  width:52px!important;height:52px!important;
  display:grid!important;place-items:center!important;
  padding:0!important;margin:0!important;
  border:0!important;background:transparent!important;
  border-radius:0!important;box-shadow:none!important;
}
.floating-contact a .wood-badge{--badge-size:52px!important}
.floating-contact .social-label{display:none!important}

/* Back-to-top uses the approved round green control and remains independent. */
.back-to-top{
  position:fixed!important;
  right:20px!important;
  bottom:48px!important;
  width:54px!important;height:54px!important;
  padding:0!important;
  border:0!important;border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  display:grid!important;place-items:center!important;
}
.back-to-top .wood-badge{--badge-size:54px!important;display:grid!important}
.back-to-top .icon{display:none!important}

/* Mobile: preserve group proportions but remove fixed contact controls from the
   reading column. The contact capsule becomes a normal-flow dock after footer;
   only the small back-to-top control floats. */
@media(max-width:780px){
  .fact>.wood-badge{--badge-size:82px!important}
  .fact{
    min-height:126px!important;
    grid-template-columns:90px minmax(0,1fr)!important;
    padding:15px 16px 28px!important;
    column-gap:10px!important;
  }
  .fact::after{display:block!important;width:22px!important;height:22px!important;bottom:5px!important}
  .fact b{font-size:1.38rem!important}

  .amenity-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .amenity{min-height:146px!important;padding:12px 8px!important}
  .amenity .wood-badge{--badge-size:82px!important}
  .amenity b{font-size:.92rem!important}

  .river-feature-grid{grid-template-columns:1fr!important}
  .river-feature-grid>div{
    min-height:136px!important;
    display:grid!important;
    grid-template-columns:90px minmax(0,1fr)!important;
    gap:14px!important;
    padding:16px!important;
  }
  .river-feature-grid .wood-badge{--badge-size:86px!important}
  .river-feature-grid b{font-size:1.22rem!important}
  .river-feature-grid small{font-size:.88rem!important}

  .experience-card-top .wood-badge{--badge-size:80px!important}
  .experience-card-top{min-height:82px!important}

  .info-list-rich dt{grid-template-columns:58px minmax(0,1fr)!important;gap:12px!important}
  .info-list-rich dt .wood-badge{--badge-size:56px!important;flex-basis:56px!important}

  .section-ethno-mark{width:62px!important;height:62px!important}
  .jadar-divider{width:220px!important;height:54px!important;background-size:68px 1px,50px 50px,68px 1px!important}
  .booking-ornament{width:190px!important;height:48px!important}
  .podrinje-section::before{width:82vw!important;height:42px!important}
  .site-footer::before{width:86vw!important;height:42px!important}

  .nav-shell::after{display:none!important}

  .floating-contact{
    position:relative!important;
    left:auto!important;right:auto!important;bottom:auto!important;
    transform:none!important;
    width:max-content!important;
    margin:18px auto 16px!important;
    flex-direction:row!important;
    gap:7px!important;
    padding:8px 10px!important;
    border-radius:24px!important;
    z-index:20!important;
  }
  .floating-contact a{width:48px!important;height:48px!important}
  .floating-contact a .wood-badge{--badge-size:48px!important}

  .back-to-top{
    right:12px!important;
    bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
    width:48px!important;height:48px!important;
    z-index:1100!important;
  }
  .back-to-top .wood-badge{--badge-size:48px!important}
}

@media(max-width:430px){
  .amenity-grid{grid-template-columns:1fr 1fr!important}
  .amenity .wood-badge{--badge-size:76px!important}
  .fact{grid-template-columns:84px minmax(0,1fr)!important}
  .fact>.wood-badge{--badge-size:78px!important}
  .experience-card-top .wood-badge{--badge-size:74px!important}
}

@media(max-width:360px){
  .amenity-grid{grid-template-columns:1fr!important}
  .amenity{min-height:132px!important;display:grid!important;grid-template-columns:78px minmax(0,1fr)!important;text-align:left!important}
  .amenity .wood-badge{--badge-size:74px!important}
}

/* v3.6.7 contact panel correction: use the approved complete capsule as one
   graphic, while retaining three independent accessible link hit areas. */
.floating-contact{
  width:88px!important;
  height:254px!important;
  min-width:88px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:url('../final/contact/panel.png') center/contain no-repeat!important;
  box-shadow:none!important;
  display:block!important;
}
.floating-contact a{
  position:absolute!important;
  left:18px!important;
  width:52px!important;
  height:58px!important;
  display:block!important;
  background:transparent!important;
}
.floating-contact .float-phone{top:24px!important}
.floating-contact .float-wa{top:99px!important}
.floating-contact .float-ig{top:174px!important}
.floating-contact a .wood-badge{display:none!important}
.back-to-top .wood-badge{--badge-size:52px!important}

@media(max-width:780px){
  .floating-contact{
    width:74px!important;
    height:214px!important;
    margin:18px auto 18px!important;
  }
  .floating-contact a{left:14px!important;width:46px!important;height:50px!important}
  .floating-contact .float-phone{top:19px!important}
  .floating-contact .float-wa{top:82px!important}
  .floating-contact .float-ig{top:145px!important}
}


/* ==========================================================
   v3.6.8 CONTACT CONTROLS ONLY
   Approved standalone wooden plaques. No shared capsule.
   No text/content/layout changes outside these controls.
   ========================================================== */
.floating-contact{
  position:fixed!important;
  left:auto!important;
  right:18px!important;
  bottom:118px!important;
  transform:none!important;
  z-index:1100!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.floating-contact a{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.floating-contact a .wood-badge{
  --badge-size:46px!important;
  display:grid!important;
}
.floating-contact .social-label{display:none!important}

.back-to-top{
  position:fixed!important;
  right:18px!important;
  bottom:56px!important;
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  z-index:1100!important;
}
.back-to-top .wood-badge{
  --badge-size:46px!important;
  display:grid!important;
}
.back-to-top .icon{display:none!important}

@media(max-width:780px){
  .floating-contact{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:max-content!important;
    height:auto!important;
    margin:14px auto 12px!important;
    display:flex!important;
    flex-direction:row!important;
    gap:10px!important;
  }
  .floating-contact a{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
  }
  .floating-contact a .wood-badge{--badge-size:44px!important}

  .back-to-top{
    right:12px!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
  }
  .back-to-top .wood-badge{--badge-size:44px!important}

  .site-footer{padding-bottom:24px!important}
}

@media(max-width:430px){
  .floating-contact{gap:8px!important;margin-top:12px!important}
  .floating-contact a,
  .back-to-top{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
  .floating-contact a .wood-badge,
  .back-to-top .wood-badge{--badge-size:42px!important}
}

/* ==========================================================
   v3.6.9 CONTACT CONTROLS FINAL ALIGNMENT
   Only the four wooden controls are affected here.
   Desktop: one stable vertical rail.
   Mobile: one compact horizontal footer band.
   ========================================================== */
.floating-tools{
  position:fixed!important;
  right:18px!important;
  top:50%!important;
  bottom:auto!important;
  left:auto!important;
  transform:translateY(-50%)!important;
  z-index:1100!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
}
.floating-tools .floating-contact{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:auto!important;
}
.floating-tools .floating-contact a,
.floating-tools .back-to-top{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  pointer-events:auto!important;
}
.floating-tools .floating-contact a .wood-badge,
.floating-tools .back-to-top .wood-badge{
  --badge-size:54px!important;
  width:54px!important;
  height:54px!important;
  display:grid!important;
  overflow:visible!important;
}
.floating-tools .wood-badge-img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  overflow:visible!important;
  filter:drop-shadow(0 4px 6px rgba(48,35,23,.14))!important;
}
.floating-tools .social-label{display:none!important}
.floating-tools .back-to-top{margin-top:4px!important}
.floating-tools .back-to-top:not(.visible){opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.floating-tools .back-to-top.visible{opacity:1!important;visibility:visible!important}

@media(max-width:780px){
  .floating-tools{
    position:relative!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    width:100%!important;
    min-height:82px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    margin:0!important;
    padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px))!important;
    background:#f7f2e8!important;
    border-top:1px solid rgba(91,70,43,.12)!important;
    pointer-events:auto!important;
  }
  .floating-tools .floating-contact{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
  }
  .floating-tools .floating-contact a,
  .floating-tools .back-to-top{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    min-height:50px!important;
  }
  .floating-tools .floating-contact a .wood-badge,
  .floating-tools .back-to-top .wood-badge{
    --badge-size:50px!important;
    width:50px!important;
    height:50px!important;
  }
  .floating-tools .back-to-top{margin:0 0 0 2px!important}
  .site-footer{padding-bottom:24px!important}
}

@media(max-width:390px){
  .floating-tools{gap:9px!important;padding-left:14px!important;padding-right:14px!important}
  .floating-tools .floating-contact{gap:9px!important}
  .floating-tools .floating-contact a,
  .floating-tools .back-to-top{
    width:47px!important;height:47px!important;min-width:47px!important;min-height:47px!important;
  }
  .floating-tools .floating-contact a .wood-badge,
  .floating-tools .back-to-top .wood-badge{
    --badge-size:47px!important;width:47px!important;height:47px!important;
  }
}

/* ==========================================================
   v3.6.10 QUICK CONTROLS — APPROVED INDIVIDUAL ASSETS
   Only phone / WhatsApp / Instagram / back-to-top are touched.
   Dedicated generated plaques are padded inside transparent 1024px canvases,
   so the full carved frame always remains visible and all four controls share
   the same optical footprint.
   ========================================================== */
.floating-tools{
  right:22px!important;
  gap:12px!important;
}
.floating-tools .floating-contact{gap:10px!important}
.floating-tools .floating-contact a,
.floating-tools .back-to-top{
  width:66px!important;
  height:66px!important;
  min-width:66px!important;
  min-height:66px!important;
  overflow:visible!important;
}
.floating-tools .floating-contact a .wood-badge,
.floating-tools .back-to-top .wood-badge{
  --badge-size:66px!important;
  width:66px!important;
  height:66px!important;
  overflow:visible!important;
}
.floating-tools .wood-badge-img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  clip-path:none!important;
  border-radius:0!important;
  overflow:visible!important;
  filter:drop-shadow(0 5px 8px rgba(48,35,23,.15))!important;
}
.floating-tools .back-to-top{margin-top:6px!important}

@media(max-width:780px){
  .floating-tools{
    gap:16px!important;
    min-height:94px!important;
    padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px))!important;
  }
  .floating-tools .floating-contact{
    gap:16px!important;
    flex-wrap:nowrap!important;
  }
  .floating-tools .floating-contact a,
  .floating-tools .back-to-top{
    width:60px!important;
    height:60px!important;
    min-width:60px!important;
    min-height:60px!important;
    flex:0 0 60px!important;
  }
  .floating-tools .floating-contact a .wood-badge,
  .floating-tools .back-to-top .wood-badge{
    --badge-size:60px!important;
    width:60px!important;
    height:60px!important;
  }
  .floating-tools .back-to-top{margin:0 0 0 2px!important}
}

@media(max-width:390px){
  .floating-tools{gap:11px!important;padding-left:12px!important;padding-right:12px!important}
  .floating-tools .floating-contact{gap:11px!important}
  .floating-tools .floating-contact a,
  .floating-tools .back-to-top{
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    min-height:56px!important;
    flex-basis:56px!important;
  }
  .floating-tools .floating-contact a .wood-badge,
  .floating-tools .back-to-top .wood-badge{
    --badge-size:56px!important;
    width:56px!important;
    height:56px!important;
  }
}