@import url('https://fonts.googleapis.com/css2?family=Ballet:opsz@16..72&family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600&family=Playfair+Display:wght@500;600&display=swap');

:root {
  --pine: #0d443d;
  --pine-dark: #072f2b;
  --teal: #4f8e88;
  --ivory: #f6f1e7;
  --paper: #fffdf8;
  --ink: #142a27;
  --muted: #6c7772;
  --clay: #d56843;
  --clay-dark: #b95132;
  --line: rgba(20, 42, 39, .15);
  --radius: 28px;
  --pill: 999px;
  --shadow: 0 24px 70px rgba(7, 47, 43, .14);
  --glass: rgba(255, 253, 248, .72);
  --glass-strong: rgba(255, 253, 248, .9);
  --glow-a: rgba(88, 200, 188, .22);
  --glow-b: rgba(255, 153, 105, .18);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', Arial, sans-serif;
  --script: 'Ballet', 'Snell Roundhand', cursive;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ivory: #061c1a;
  --paper: #0b2926;
  --ink: #fffdf8;
  --muted: #d1ded8;
  --line: rgba(255,255,255,.14);
  --glass: rgba(10, 43, 39, .68);
  --glass-strong: rgba(10, 43, 39, .9);
  --shadow: 0 24px 70px rgba(0,0,0,.35);
  --glow-a: rgba(53, 177, 165, .2);
  --glow-b: rgba(213, 104, 67, .15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--ivory); font-family: var(--sans); line-height: 1.55; transition: color .35s, background .35s; }
body::before { content:''; position:fixed; inset:-20%; z-index:-2; pointer-events:none; background:radial-gradient(circle at 18% 22%, var(--glow-a), transparent 24%),radial-gradient(circle at 82% 38%, var(--glow-b), transparent 22%),radial-gradient(circle at 50% 88%, rgba(88,145,220,.1), transparent 28%); filter:blur(24px); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

/* V1 opening sequence */
.site-loader { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; overflow:hidden; color:#1d2822; background:linear-gradient(145deg,#f8f4ea,#eef2e9 58%,#e8eee7); transition:transform .9s cubic-bezier(.76,0,.24,1),border-radius .72s cubic-bezier(.22,1,.36,1),visibility 0s linear .94s; animation:loaderFailsafe .01s 6s forwards; }
.site-loader.is-active { animation:none; }
.site-loader.is-dark { color:#f7f2e9; background:radial-gradient(circle at 18% 18%,rgba(79,142,136,.22),transparent 30%),linear-gradient(145deg,#061c1a,#0b2926 58%,#08211e); }
.site-loader.is-dark .loader-mark { stroke:#a9d2c8; }
.site-loader.is-dark .loader-word { color:#f7f2e9; }
.site-loader.is-dark .loader-line { background:rgba(247,242,233,.18); }
.site-loader.is-dark .loader-line span { background:linear-gradient(90deg,#4f8e88 0%,#a9d2c8 62%,#f29a78 100%); }
.site-loader.is-dark .loader-inner::after { color:rgba(247,242,233,.54); }
.loader-inner { width:220px; display:flex; flex-direction:column; align-items:center; transition:opacity .42s,transform .72s cubic-bezier(.22,1,.36,1),filter .55s; }
.loader-mark { width:76px; height:43px; fill:none; overflow:visible; }
.loader-mark polyline { stroke-dasharray:190; stroke-dashoffset:190; animation:loaderDraw .82s cubic-bezier(.22,1,.36,1) forwards; }
.loader-mark polyline:nth-child(1) { animation-delay:.14s; }
.loader-mark polyline:nth-child(2) { animation-delay:.38s; }
.loader-mark polyline:nth-child(3) { animation-delay:.62s; }
.loader-word { margin-top:10px; color:#214c3e; font-size:13px; font-weight:700; line-height:1.5; letter-spacing:4.42px; opacity:0; transform:translateY(5px); animation:loaderText .82s .78s cubic-bezier(.22,1,.36,1) forwards; }
.loader-line { width:158px; height:1px; margin-top:16px; overflow:hidden; background:rgba(33,76,62,.13); }
.loader-line span { display:block; width:100%; height:100%; background:linear-gradient(90deg,#52785b 0%,#789778 62%,#c7a676 100%); transform:scaleX(0); transform-origin:left; animation:loaderProgress 1.28s .32s cubic-bezier(.65,0,.35,1) forwards; }
.loader-inner::after { content:'PËRMET · ALBANIA'; margin-top:13px; color:rgba(33,76,62,.48); font-size:7px; font-weight:700; letter-spacing:2.5px; opacity:0; animation:loaderText .55s .92s cubic-bezier(.22,1,.36,1) forwards; }
.site-loader.is-leaving { transform:translateY(-101%); border-radius:0 0 48% 48%; }
.site-loader.is-leaving .loader-inner { opacity:0; transform:translateY(-18px) scale(.96); filter:blur(7px); }
.site-loader.is-fast { transition-duration:.46s,.36s,0s; }
.site-loader.is-fast .loader-mark polyline { animation-duration:.2s; }
.site-loader.is-fast .loader-mark polyline:nth-child(1) { animation-delay:.03s; }
.site-loader.is-fast .loader-mark polyline:nth-child(2) { animation-delay:.11s; }
.site-loader.is-fast .loader-mark polyline:nth-child(3) { animation-delay:.19s; }
.site-loader.is-fast .loader-word { animation-duration:.3s; animation-delay:.12s; }
.site-loader.is-fast .loader-line span { animation-duration:.48s; animation-delay:.1s; }
.site-loader.is-fast .loader-inner::after { animation-duration:.22s; animation-delay:.2s; }
.site-loader.is-fast.is-leaving .loader-inner { transform:translateY(-10px) scale(.98); filter:blur(4px); }
html.loader-active body { overflow:hidden; }
@keyframes loaderDraw { to { stroke-dashoffset:0; } }
@keyframes loaderText { to { opacity:1; transform:none; } }
@keyframes loaderProgress { to { transform:scaleX(1); } }
@keyframes loaderFailsafe { to { opacity:0; visibility:hidden; pointer-events:none; } }

.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 110px 0; position:relative; }
.section.compact { padding: 70px 0; }
.section.dark { color:#fffdf8; background: var(--pine-dark); }
.section.dark :is(h1,h2,h3,h4,h5,h6,p,small,b,strong,span,li,dt,dd,td,th,summary,label,.title,.display,.subtitle,a) { color:#fffdf8; }
.section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4, .section.dark .title, .section.dark .display { color:#fffdf8; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 42px; }
.section-head p { max-width: 460px; color: var(--muted); }
.section.dark .section-head p, .section.dark .timeline small { color:rgba(255,253,248,.8); }
.eyebrow { margin: 0 0 14px; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; font-weight: 700; }
.display { margin: 0; font-family: var(--serif); font-size: clamp(46px, 6.3vw, 92px); font-weight: 500; line-height: .98; letter-spacing: -.045em; }
.title { margin: 0; font-family: var(--serif); font-size: clamp(38px, 5vw, 66px); font-weight: 500; line-height: 1.03; letter-spacing: -.035em; }
.script-accent { display:inline-block; color:inherit; font-family:var(--script); font-size:1.38em; font-weight:400; line-height:.55; letter-spacing:.01em; transform:translateY(.08em) rotate(-2deg); white-space:nowrap; }
.subtitle { max-width: 640px; font-size: 18px; color: var(--muted); }
.round { border-radius: var(--radius); overflow: hidden; }
.surface { background: var(--glass); border: 1px solid rgba(255,255,255,.44); border-radius: var(--radius); box-shadow:0 10px 40px rgba(7,47,43,.08), inset 0 1px 0 rgba(255,255,255,.38); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); }
.topo { background-image: repeating-radial-gradient(ellipse at 100% 0, transparent 0 18px, rgba(255,255,255,.035) 19px 20px); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 23px; border: 1px solid transparent; border-radius: var(--pill); background: var(--clay); color: white; font-weight: 600; transition: .25s ease; }
.btn:hover { transform: translateY(-2px); background: var(--clay-dark); box-shadow: 0 12px 28px rgba(213,104,67,.28); }
.btn-outline { color: currentColor; background: transparent; border-color: currentColor; }
.btn-outline:hover { color: var(--ink); background: var(--paper); }
.btn-light { color: var(--ink); background: var(--paper); }
.btn-sm { min-height: 44px; padding-inline: 18px; font-size: 13px; }
.btn-icon { width: 34px; height: 34px; display: inline-grid; place-items: center; margin-right: -13px; border-radius: 50%; background: rgba(255,255,255,.22); }
.ui-icon { width: 18px; height: 18px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn-icon .ui-icon { width:16px; height:16px; transition:transform .25s ease; }
.btn:hover .btn-icon .ui-icon { transform:translateX(2px); }
.icon-premium { width:31px; height:31px; display:block; margin-bottom:10px; color:var(--clay); fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.circle-btn { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; transition: .2s; }
.circle-btn:hover { transform: rotate(-12deg); background: var(--paper); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--pill); background: transparent; color: var(--ink); }
.chip.active, .chip:hover { color: white; background: var(--pine); }

/* Dark mode: enforce readable, quiet-white typography across all surfaces. */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .title, html[data-theme="dark"] .display, html[data-theme="dark"] .footer-links a, html[data-theme="dark"] .nav-links a, html[data-theme="dark"] .language-control, html[data-theme="dark"] .theme-toggle, html[data-theme="dark"] .chip, html[data-theme="dark"] .input, html[data-theme="dark"] .booking-field input, html[data-theme="dark"] .booking-field select { color:#fffdf8; }
html[data-theme="dark"] p, html[data-theme="dark"] .subtitle, html[data-theme="dark"] .section-head p, html[data-theme="dark"] .story-copy p, html[data-theme="dark"] .feature-icon small, html[data-theme="dark"] .info-strip small, html[data-theme="dark"] .trust-item small, html[data-theme="dark"] .review-card cite, html[data-theme="dark"] .experience-extra small, html[data-theme="dark"] .experience-extra ul, html[data-theme="dark"] .faq p, html[data-theme="dark"] .booking-field label { color:rgba(255,253,248,.78); }
html[data-theme="dark"] .eyebrow { color:#d9ebe3; }
html[data-theme="dark"] .surface, html[data-theme="dark"] .input { background:rgba(16,54,49,.7); }
html[data-theme="dark"] .response-promise { color:#fffdf8; background:rgba(113,193,181,.16); }
html[data-theme="dark"] .btn-outline { color:#fffdf8; }
html[data-theme="dark"] option { color:#fffdf8; background:#0b2926; }

/* Contrast guard: keep every content-bearing label readable on dark surfaces,
   including legacy inline styles and dynamically injected cards. */
html[data-theme="dark"] main :where(h1,h2,h3,h4,h5,h6,strong,b,.title,.display) { color:#fffdf8 !important; }
html[data-theme="dark"] main :where(p,small,li,dt,dd,cite,figcaption,label,.subtitle) { color:rgba(255,253,248,.82) !important; }
html[data-theme="dark"] main :where(.eyebrow,.timeline strong,.menu-item b,.menu-item span,.room-spec small,.villa-specs li,.booking-field input,.booking-field select) { color:#fffdf8 !important; }
html[data-theme="dark"] main :where(.muted,.room-info > p:not(.eyebrow),.villa-booking-copy > p:not(.eyebrow),.villa-booking-note,.experience-extra small,.experience-extra ul) { color:rgba(255,253,248,.78) !important; }
html[data-theme="dark"] .timeline strong { text-shadow:0 1px 18px rgba(255,253,248,.08); }
html[data-theme="dark"] .site-footer :where(h1,h2,h3,h4,h5,h6,strong,b,a) { color:#fffdf8 !important; }
html[data-theme="dark"] .site-footer :where(p,small,li,cite,figcaption,span) { color:rgba(255,253,248,.8) !important; }

.site-header { position: fixed; top: 18px; left: 0; right: 0; z-index: 50; }
.nav-shell { position:relative; width: min(1280px, calc(100% - 28px)); min-height: 68px; margin: auto; padding: 9px 10px 9px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid rgba(255,255,255,.48); border-radius: var(--pill); background:var(--glass-strong); box-shadow:0 14px 36px rgba(7,47,43,.12),inset 0 1px 0 rgba(255,255,255,.5); backdrop-filter:blur(26px) saturate(145%); -webkit-backdrop-filter:blur(26px) saturate(145%); }
.site-header, .nav-shell, .brand, .nav-links a, .nav-actions { transition: .35s cubic-bezier(.22,.8,.28,1); }
.site-header.is-scrolled { top: 9px; }
.site-header.is-scrolled .nav-shell { min-height: 56px; width:min(1040px,calc(100% - 24px)); padding-block:5px; background:var(--glass-strong); box-shadow:0 12px 34px rgba(7,47,43,.16),inset 0 1px 0 rgba(255,255,255,.52); }
.site-header.is-scrolled .brand img { width:104px; }
.site-header.is-scrolled .nav-links a { padding-block:8px; }
.nav-shell > .utility-pill { order:1; flex:0 0 auto; }
.brand { position:absolute; left:50%; z-index:2; display:flex; align-items:center; flex:0 0 auto; order:2; transform:translateX(-50%); }
.brand img { width:112px; height:auto; display:block; transition:width .35s cubic-bezier(.22,.8,.28,1); }
html[data-theme="dark"] .site-header .brand img { content:url('assets/logo-nemercka-light.svg'); }
.footer-brand img { width:180px; height:auto; display:block; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links { order:3; margin-left:12px; margin-right:auto; }
.mobile-nav-overlay { display:none; }
.menu-close { position:absolute; top:max(24px,env(safe-area-inset-top)); right:max(24px,env(safe-area-inset-right)); z-index:2; width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.4); border-radius:999px; background:#f7f2e9; color:#072f2b; cursor:pointer; }
.menu-close:hover { background:#fff; }
.menu-close:focus-visible { outline:3px solid #f29a78; outline-offset:5px; }
.nav-links a { padding: 9px 10px; border-radius: var(--pill); font-size: 13px; white-space:nowrap; }
.nav-links a:hover, .nav-links a.active { background: rgba(13,68,61,.09); }
.nav-actions { display: flex; align-items: center; gap: 8px; order:4; margin-left:auto; }
.utility-pill { display:flex; align-items:center; min-height:52px; padding:3px; border:1px solid var(--line); border-radius:var(--pill); background:rgba(255,255,255,.16); }
.language-control { width:46px; display:flex; align-items:center; justify-content:center; height:46px; padding:0; border-right:1px solid var(--line); color:var(--ink); }
.language-select { appearance:none; width:46px; min-width:0; border:0; outline:0; color:inherit; background:transparent; font-size:11px; font-weight:700; letter-spacing:.08em; text-align:center; cursor:pointer; }
.utility-pill .theme-toggle { width:46px; height:46px; border:0; background:transparent; }
.theme-toggle { width:46px; height:46px; display:grid; place-items:center; flex:0 0 auto; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:rgba(255,255,255,.18); transition:.25s; }
.theme-toggle:hover { transform:rotate(12deg); background:rgba(255,255,255,.35); }
.menu-toggle { display: none; width: 46px; height: 46px; place-items: center; border: 0; border-radius: 50%; background: var(--pine); color: white; font-size: 19px; }

/* Keep the desktop header editorial and breathable. Home remains available
   through the logo, while Gallery stays discoverable from the footer/menu. */
@media (min-width: 1101px) {
  .nav-links a[href="index.html"],
  .nav-links a[href="gallery.html"] { display:none; }
  .nav-links { gap:4px; }
  .nav-links a { padding-inline:9px; }
}

.hero { min-height: 92vh; display: flex; align-items: end; position: relative; color: white; background-position: center; background-size: cover; overflow:hidden; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,30,27,.82), rgba(4,30,27,.2) 68%), linear-gradient(0deg, rgba(4,30,27,.48), transparent 45%); }
.hero-home { background-image: url('assets/images/hotel-exterior.jpg'); }
.hero-hotel { background-image: url('assets/images/restaurant.jpg'); }
.hero-rooms { background-image: url('assets/images/room-mountain.jpg'); }
.hero-experiences { background-image: url('assets/images/rafting-3.jpg'); }
.hero-dining { background-image: url('assets/images/breakfast.jpg'); }
.hero-gallery { background-image: url('assets/images/rafting-2.jpg'); }
.hero-villas { background-image: url('assets/media/villas-hero.jpg'); background-position:center 58%; }
.hero-booking { min-height: 58vh; background-image: url('assets/images/hotel-exterior.jpg'); }
.hero-content { position: relative; z-index: 2; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 170px 0 130px; will-change:transform,opacity; }
.hero-content p { max-width: 560px; margin: 24px 0 32px; font-size: 18px; color: rgba(255,255,255,.88); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-badge { position: absolute; z-index: 2; right: max(24px, calc((100vw - 1180px)/2)); bottom: 54px; width: 126px; height: 126px; display: grid; place-items: center; text-align: center; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; font-size: 11px; text-transform: uppercase; letter-spacing: .18em; backdrop-filter: blur(10px); }

.booking-bar { position: relative; z-index: 4; margin: -48px auto 0; padding: 12px; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 8px; box-shadow: var(--shadow); background:var(--glass-strong); }
.villas-home + .booking-bar { width:min(1180px,calc(100% - 40px)); margin:32px auto 0; }
.booking-field { padding: 13px 20px; border-right: 1px solid var(--line); }
.booking-field label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.booking-field input, .booking-field select { width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }

.story-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; }
.story-copy p { color: var(--muted); }
.story-media { min-height: 560px; position: relative; background: url('assets/images/room-balcony.jpg') center/cover; }
.story-media .quote { position: absolute; right: -24px; bottom: 28px; width: 220px; padding: 28px; color: white; background: var(--pine); border-radius: 26px; font-family: var(--serif); font-size: 22px; }
.feature-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }
.feature-icon { padding-top: 20px; border-top: 1px solid var(--line); }
.feature-icon span { display: block; font-size: 28px; }
.feature-icon b { display:block; }
.feature-icon small { color: var(--muted); }

.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.media-card { position: relative; min-height: 470px; display: flex; align-items: end; color: white; background-position: center; background-size: cover; border:1px solid rgba(255,255,255,.35); border-radius: var(--radius); overflow: hidden; box-shadow:0 20px 45px rgba(7,47,43,.12); }
.media-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,35,31,.78), transparent 65%); }
.media-card-content { position: relative; z-index: 2; width: 100%; padding: 26px; }
.media-card h3 { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 500; }
.media-card p { margin: 8px 0 0; color: rgba(255,255,255,.76); }
.media-card .circle-btn { position: absolute; right: 22px; top: 22px; z-index: 3; }
.media-card, .editorial-card, .gallery-item, .room-photo, .experience-card img { transform:translateZ(0); }
.media-card, .editorial-card, .room-row, .experience-card { transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease; }
.media-card:hover, .editorial-card:hover, .room-row:hover, .experience-card:hover { transform:translateY(-7px); box-shadow:0 28px 70px rgba(7,47,43,.16); }
.room-one { background-image: url('assets/images/room-mountain.jpg'); }
.room-two { background-image: url('assets/images/room-family.jpg'); }
.room-three { background-image: url('assets/images/room-suite.jpg'); }
.exp-one { background-image: url('assets/images/rafting-3.jpg'); }
.exp-two { background-image: url('assets/images/rafting-2.jpg'); }
.exp-three { background-image: url('assets/images/rafting-group.jpg'); }

.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 630px; }
.split > div { padding: clamp(40px, 7vw, 100px); display: flex; flex-direction: column; justify-content: center; }
.split-image { background-position: center; background-size: cover; }
.split-image.rafting { background-image: url('assets/images/rafting-4.jpg'); }
.split-image.dining { background-image: url('assets/images/food.jpg'); }
.split-image.villas-home-image { background-image:url('assets/media/villa-row.jpg'); background-position:center; }
.villas-home .split-copy { background:linear-gradient(145deg,#0b3934,#0d443d); color:#f7f2e9; }
.villas-home .split-copy p { color:rgba(247,242,233,.72); }
.experience-manifesto { overflow:hidden; }
.feeling-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feeling-card { position:relative; min-height:520px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; overflow:hidden; border-radius:var(--radius); color:#f7f2e9; background-color:var(--pine-dark); background-position:center; background-size:cover; box-shadow:var(--shadow); isolation:isolate; transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease; }
.feeling-card::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(3,20,18,.04),rgba(3,20,18,.86)); }
.feeling-card:hover { transform:translateY(-7px); box-shadow:0 28px 72px rgba(7,47,43,.24); }
.feeling-card span,.feeling-card i { font-size:10px; font-style:normal; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.feeling-card span { position:absolute; top:24px; left:26px; color:rgba(247,242,233,.78); }
.feeling-card h3 { margin:0 0 17px; font-family:var(--serif); font-size:clamp(30px,3vw,44px); font-weight:500; line-height:1; letter-spacing:-.04em; }
.feeling-card i { width:max-content; padding:9px 12px; border:1px solid rgba(255,255,255,.36); border-radius:999px; background:rgba(255,255,255,.1); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.feeling-light { background-image:url('assets/images/room-balcony.jpg'); }
.feeling-river { background-image:url('assets/images/rafting-aerial.jpg'); }
.feeling-table { background-image:url('assets/images/food.jpg'); }
.split-copy { color: white; background: var(--pine); }
.split-copy p { color: rgba(255,255,255,.72); }

.timeline { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 36px; }
.timeline > div { padding: 25px; border-top: 1px solid rgba(255,255,255,.28); }
.timeline strong { display: block; margin-bottom: 10px; font-family: var(--serif); font-size: 28px; font-weight: 500; }
.timeline small { color: rgba(255,255,255,.65); }

.editorial-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.editorial-grid .wide { grid-column: span 7; }
.editorial-grid .narrow { grid-column: span 5; }
.editorial-grid .half { grid-column: span 6; }
.editorial-card { min-height: 380px; padding: 35px; display: flex; flex-direction: column; justify-content: end; position: relative; color: white; background-position: center; background-size: cover; border-radius: var(--radius); overflow: hidden; }
.editorial-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,35,31,.75), transparent 72%); }
.editorial-card > * { position: relative; z-index: 2; }
.editorial-card h3 { margin: 0; font-family: var(--serif); font-size: 38px; font-weight: 500; }

.room-row { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; margin-bottom: 20px; background: var(--glass); border:1px solid rgba(255,255,255,.4); border-radius: var(--radius); overflow: hidden; box-shadow:0 18px 50px rgba(7,47,43,.08); backdrop-filter:blur(18px); }
.room-row:nth-child(even) .room-photo { order: 2; }
.room-photo { min-height: 470px; background-position: center; background-size: cover; }
.room-carousel { position:relative; overflow:hidden; background:var(--pine-dark); }
.room-slides, .room-slides img { position:absolute; inset:0; width:100%; height:100%; }
.room-slides img { object-fit:cover; opacity:0; transform:scale(1.045); transition:opacity .55s ease,transform 1s cubic-bezier(.2,.8,.2,1); }
.room-slides img.is-active { opacity:1; transform:scale(1); }
.room-carousel-controls { position:absolute; right:18px; bottom:18px; z-index:2; display:flex; align-items:center; gap:8px; padding:6px; border:1px solid rgba(255,255,255,.3); border-radius:var(--pill); color:#fffdf8; background:rgba(5,35,31,.46); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.room-carousel-controls button { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:50%; color:#fffdf8; background:rgba(255,255,255,.12); font-size:18px; transition:background .2s,transform .2s; }
.room-carousel-controls button:hover { color:var(--pine-dark); background:#fffdf8; transform:scale(1.07); }
.room-slide-count { min-width:38px; font-size:10px; font-weight:700; letter-spacing:.08em; text-align:center; }
.room-meta { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; }
.room-spec { min-height:42px; display:inline-flex; align-items:center; gap:8px; padding:0 12px; border:1px solid var(--line); border-radius:var(--pill); background:rgba(255,255,255,.22); }
.room-spec .ui-icon { width:15px; height:15px; color:var(--clay); }
.room-spec small { color:var(--ink); font-size:11px; font-weight:600; white-space:nowrap; }
html[data-theme="dark"] .room-spec { background:rgba(255,255,255,.06); }
html[data-theme="dark"] .room-spec small { color:#fffdf8; }
.room-info { padding: 54px; display: flex; flex-direction: column; justify-content: center; }
.room-info h2 { margin: 0 0 14px; font-family: var(--serif); font-size: 45px; font-weight: 500; }
.room-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.room-meta span { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--pill); font-size: 12px; }
.room-price { margin-bottom: 20px; font-family: var(--serif); font-size: 32px; }
.compare { width: 100%; border-collapse: collapse; color: white; }
.compare th, .compare td { padding: 15px; border-bottom: 1px solid rgba(255,255,255,.18); text-align: left; }

.experience-list { display: grid; gap: 20px; }
.experience-card { display: grid; grid-template-columns: .9fr 1.1fr; background: var(--glass); border:1px solid rgba(255,255,255,.4); border-radius: var(--radius); overflow: hidden; box-shadow:0 18px 50px rgba(7,47,43,.08); backdrop-filter:blur(18px); }
.experience-card img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; }
.experience-info { padding: 48px; }
.experience-info h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 48px; font-weight: 500; }
.info-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 28px 0; }
.info-strip div { padding: 15px; border: 1px solid var(--line); border-radius: 20px; }
.info-strip small { display:block; color: var(--muted); }

.menu-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 60px; }
.menu-list { display: grid; gap: 0; }
.menu-item { padding: 18px 0; display: grid; grid-template-columns: 1fr auto; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.18); }
.menu-item small { display: block; color: rgba(255,255,255,.55); }
.section.dark .menu-item b, .section.dark .menu-item span { color:#fffdf8 !important; }
.section.dark .menu-item small { color:rgba(255,253,248,.76) !important; }

.gallery-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 14px; margin-top: 30px; }
.gallery-item { grid-column: span 4; min-height: 340px; position: relative; border: 0; border-radius: 24px; overflow: hidden; background: #ddd; }
.gallery-item.tall { min-height: 500px; }
.gallery-item.wide { grid-column: span 8; }
.gallery-item img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .6s; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item[hidden] { display: none; }

.booking-layout { display: grid; grid-template-columns: 1.4fr .7fr; gap: 28px; align-items: start; }
.booking-form, .booking-summary, .contact-card { padding: 34px; }
.form-step { display: flex; gap: 12px; margin-bottom: 30px; }
.form-step span { width: 34px; height: 34px; display:grid; place-items:center; border-radius: 50%; background: #e8e7df; }
.form-step span.active { color: white; background: var(--pine); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: grid; gap: 7px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 12px; font-weight: 700; }
.input { width: 100%; min-height: 52px; padding: 0 17px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.48); color:var(--ink); outline: none; }
textarea.input { min-height: 120px; padding-top: 14px; resize: vertical; }
.input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(79,142,136,.12); }
.booking-summary { position: sticky; top: 105px; }
.summary-image { height: 210px; border-radius: 22px; object-fit: cover; }
.summary-line { display:flex; justify-content:space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact-list { display: grid; gap: 10px; margin-top: 20px; }
.contact-link { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--pill); background: rgba(13,68,61,.07); }
.contact-link i { width: 36px; height: 36px; display:grid; place-items:center; color:white; background:var(--pine); border-radius:50%; font-style:normal; }

.map-card { min-height: 450px; position:relative; isolation:isolate; overflow:hidden; padding:50px; display:flex; align-items:end; color:white; background:#0b2926; border-radius:var(--radius); }
.map-embed { position:absolute; inset:-1px; z-index:0; width:calc(100% + 2px); height:calc(100% + 2px); border:0; filter:saturate(.74) contrast(1.05) brightness(.78); }
.map-card::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,rgba(4,35,31,.84),rgba(4,35,31,.28) 72%),linear-gradient(0deg,rgba(4,35,31,.58),transparent 56%); }
.map-card .surface { position:relative; z-index:2; max-width:480px; padding:28px; color:var(--ink); }
html[data-theme="dark"] .map-card .surface { color:#fffdf8; background:rgba(9,42,38,.82); }
.faq { border-top: 1px solid var(--line); }
.faq details { padding: 20px 0; border-bottom: 1px solid var(--line); }
.faq summary { cursor:pointer; font-weight:600; list-style:none; }
.faq summary::after { content:'+'; float:right; font-size:22px; }
.faq details[open] summary::after { content:'−'; }
.faq p { color: var(--muted); }

.cta-band { padding: 90px 0; color: white; background: linear-gradient(90deg, rgba(7,47,43,.94), rgba(7,47,43,.48)), url('assets/images/rafting-1.jpg') center/cover; }
.cta-band .container { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.site-footer { padding: 60px 0 28px; color: rgba(255,255,255,.72); background: var(--pine-dark); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 2fr 1fr; gap: 50px; }
.footer-links { display:grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.footer-links a:hover { color:white; }
.footer-social { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:42px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }
.footer-email { color:#f7f2e9; font-size:13px; font-weight:600; letter-spacing:.02em; }
.footer-email:hover { color:#f29a78; }
.social-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.social-links a { min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 11px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:#f7f2e9; background:rgba(255,255,255,.06); font-size:10px; font-weight:700; letter-spacing:.06em; transition:transform .22s ease,background .22s ease,border-color .22s ease; }
.social-links a:hover { border-color:rgba(242,154,120,.6); background:rgba(242,154,120,.15); transform:translateY(-2px); }
.social-links .ui-icon { width:16px; height:16px; }
.copyright { display:flex; justify-content:space-between; gap:16px; margin-top:18px; color:rgba(247,242,233,.5); font-size:12px; }
.copyright b { color:#f7f2e9; font-weight:600; }
.villas-portrait { min-height:560px; background:url('assets/media/villas-night.jpg') center/cover; }
.villas-features { grid-template-columns:repeat(4,1fr); }
.villas-gallery-head { margin-bottom:26px; }
.villa-booking { background:linear-gradient(140deg,rgba(207,188,143,.1),transparent 48%),var(--paper); }
.villa-booking-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.villa-booking-card { display:grid; grid-template-columns:.95fr 1.05fr; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); box-shadow:var(--shadow); }
.villa-booking-card.featured { border-color:rgba(207,188,143,.6); }
.villa-booking-image { min-height:440px; position:relative; background:center/cover; }
.villa-booking-image .room-slides, .villa-booking-image .room-slides img { position:absolute; inset:0; width:100%; height:100%; }
.villa-booking-image .room-slides img { object-fit:cover; opacity:0; transform:scale(1.045); transition:opacity .55s ease,transform 1s cubic-bezier(.2,.8,.2,1); }
.villa-booking-image .room-slides img.is-active { opacity:1; transform:scale(1); }
.villa-booking-image::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,31,28,.58),transparent 55%); }
.villa-booking-image span { position:absolute; z-index:1; left:18px; bottom:18px; padding:8px 12px; border:1px solid rgba(255,255,255,.35); border-radius:var(--pill); color:#fffdf8; background:rgba(5,31,28,.32); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; backdrop-filter:blur(12px); }
.villa-booking-image .room-carousel-controls { right:18px; bottom:18px; }
.villa-booking-copy { padding:34px; }
.villa-booking-copy h3 { margin:0 0 12px; font-family:var(--serif); font-size:clamp(30px,3vw,42px); font-weight:500; letter-spacing:-.035em; }
.villa-booking-copy > p:not(.eyebrow) { color:var(--muted); }
.villa-specs { display:grid; gap:10px; margin:24px 0 28px; padding:0; list-style:none; }
.villa-specs li { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; }
.villa-specs .ui-icon { width:17px; height:17px; color:var(--clay); }
.villa-booking-note { margin:20px 0 0; color:var(--muted); font-size:12px; text-align:center; }
html[data-theme="dark"] .villa-booking { background:linear-gradient(140deg,rgba(207,188,143,.12),transparent 48%),var(--ivory); }
html[data-theme="dark"] .villa-booking-copy > p:not(.eyebrow), html[data-theme="dark"] .villa-booking-note { color:rgba(255,253,248,.78); }
.villas-gallery { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:170px; gap:16px; }
.villas-gallery figure { position:relative; min-height:0; margin:0; overflow:hidden; border-radius:28px; background:var(--pine-dark); }
.villas-gallery-main { grid-column:span 7; grid-row:span 3; }
.villas-garden { grid-column:span 5; grid-row:span 2; }
.villas-interior { grid-column:span 5; grid-row:span 1; }
.villas-living { grid-column:span 4; grid-row:span 3; }
.villas-loft { grid-column:span 4; grid-row:span 2; }
.villas-spa { grid-column:span 4; grid-row:span 2; }
.villas-water { grid-column:span 4; grid-row:span 1; }
.villas-night { grid-column:span 8; grid-row:span 2; }
.villas-garden-row { grid-column:span 4; grid-row:span 2; }
.villas-spa-interior { grid-column:span 4; grid-row:span 3; }
.villas-gallery img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.villas-gallery figure:hover img { transform:scale(1.045); }
.villas-gallery figcaption { position:absolute; right:16px; bottom:16px; left:16px; z-index:1; padding:10px 13px; border:1px solid rgba(255,255,255,.26); border-radius:999px; color:#f7f2e9; background:rgba(7,47,43,.36); font-size:10px; font-weight:700; letter-spacing:.1em; text-align:center; text-transform:uppercase; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.scroll-reveal { opacity:0; transform:translateY(34px) scale(.985); transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1); transition-delay:var(--reveal-delay,0ms); }
.scroll-reveal.visible { opacity:1; transform:none; }
.scroll-progress { position:fixed; top:0; left:0; z-index:80; width:100%; height:3px; pointer-events:none; }
.scroll-progress span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--clay),#f4b88e,var(--teal)); box-shadow:0 0 18px rgba(213,104,67,.35); will-change:transform; }
.back-to-top { position:fixed; right:24px; bottom:24px; z-index:60; width:54px; height:54px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; color:var(--ink); background:var(--glass-strong); box-shadow:0 16px 40px rgba(7,47,43,.18),inset 0 1px 0 rgba(255,255,255,.5); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); opacity:0; visibility:hidden; transform:translateY(16px) scale(.85); transition:.3s cubic-bezier(.2,.8,.2,1); }
.back-to-top.show { opacity:1; visibility:visible; transform:none; }
.back-to-top:hover { color:white; background:var(--clay); transform:translateY(-3px); }
.back-to-top svg { width:20px; height:20px; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 100; padding: 16px 20px; border-radius: var(--pill); background: var(--pine); color: white; box-shadow: var(--shadow); transform: translateY(120px); opacity:0; transition:.3s; }
.toast.show { transform:none; opacity:1; }
.trust-strip { position:relative; z-index:4; width:min(1180px,calc(100% - 40px)); margin:18px auto 0; padding:16px 22px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; background:var(--glass); border:1px solid rgba(255,255,255,.45); border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter:blur(18px); }
.trust-item { display:flex; align-items:center; gap:10px; padding:5px 10px; font-size:12px; font-weight:700; }
.trust-item .ui-icon { color:var(--clay); flex:0 0 auto; }
.trust-item small { display:block; color:var(--muted); font-size:10px; font-weight:500; }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.review-card { padding:28px; border:1px solid rgba(255,255,255,.5); border-radius:var(--radius); background:var(--glass); box-shadow:0 12px 34px rgba(7,47,43,.07); }
.review-stars { color:var(--clay); letter-spacing:.16em; font-size:12px; }
.review-card blockquote { margin:18px 0; font-family:var(--serif); font-size:24px; line-height:1.22; }
.review-card cite { color:var(--muted); font-size:12px; font-style:normal; }
.itinerary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
.itinerary-card { padding:26px; border-top:1px solid var(--line); }
.itinerary-card span { display:block; color:var(--clay); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.itinerary-card h3 { margin:10px 0 8px; font-family:var(--serif); font-size:28px; font-weight:500; }
.experience-extra { margin:-6px 0 24px; padding:16px; display:grid; grid-template-columns:1fr 1.6fr; gap:16px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.22); }
.experience-extra strong { font-family:var(--serif); font-size:25px; font-weight:500; }
.experience-extra small { color:var(--muted); }
.experience-extra ul { margin:0; padding-left:17px; color:var(--muted); font-size:12px; }
.response-promise { margin-top:16px; padding:14px 16px; border-radius:18px; color:var(--ink); background:rgba(79,142,136,.1); font-size:13px; }
.room-reel { padding-top: 20px; }
.media-reel-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(28px,7vw,96px); align-items:center; }
.media-reel-copy { max-width:470px; }
.media-reel-copy .subtitle { max-width:420px; }
.media-reel-frame { position:relative; min-height:620px; margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.48); border-radius:clamp(28px,4vw,56px); background:var(--pine-dark); box-shadow:var(--shadow); isolation:isolate; }
.media-reel-frame::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,transparent 52%,rgba(7,47,43,.78)); }
.media-reel-frame video { width:100%; height:100%; min-height:620px; display:block; object-fit:cover; }
.media-reel-frame figcaption { position:absolute; z-index:2; left:30px; right:30px; bottom:26px; display:flex; align-items:end; justify-content:space-between; gap:18px; color:#f7f2e9; }
.media-reel-frame figcaption span { font-family:var(--serif); font-size:clamp(28px,3vw,46px); line-height:1; }
.media-reel-frame figcaption small { color:rgba(247,242,233,.72); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
html[data-theme="dark"] .media-reel-frame { border-color:rgba(169,210,200,.25); }
.gallery-item { position:relative; }
.gallery-item::after { content:'View'; position:absolute; right:14px; bottom:14px; z-index:1; padding:8px 11px; border:1px solid rgba(255,255,255,.4); border-radius:999px; color:#f7f2e9; background:rgba(7,47,43,.28); font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; opacity:0; transform:translateY(8px); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:opacity .28s ease,transform .28s ease; }
.gallery-item:hover::after,.gallery-item:focus-visible::after { opacity:1; transform:none; }
.gallery-lightbox { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:28px; opacity:0; visibility:hidden; transition:opacity .32s ease,visibility 0s linear .32s; }
.gallery-lightbox.open { opacity:1; visibility:visible; transition-delay:0s; }
.gallery-lightbox-backdrop { position:absolute; inset:0; background:rgba(3,20,18,.82); backdrop-filter:blur(16px) saturate(115%); -webkit-backdrop-filter:blur(16px) saturate(115%); }
.gallery-lightbox-dialog { position:relative; z-index:1; width:min(100%,1100px); max-height:calc(100vh - 56px); display:grid; gap:12px; transform:translateY(20px) scale(.98); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.gallery-lightbox.open .gallery-lightbox-dialog { transform:none; }
.gallery-lightbox-dialog img { width:100%; max-height:calc(100vh - 110px); display:block; object-fit:contain; border:1px solid rgba(255,255,255,.26); border-radius:30px; background:#0b2926; box-shadow:0 28px 90px rgba(0,0,0,.38); }
.gallery-lightbox-dialog p { margin:0; color:rgba(247,242,233,.8); font-size:12px; letter-spacing:.08em; text-align:center; text-transform:uppercase; }
.gallery-lightbox-close { position:absolute; top:14px; right:14px; z-index:2; width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.48); border-radius:50%; color:var(--pine-dark); background:rgba(247,242,233,.94); box-shadow:0 10px 26px rgba(0,0,0,.18); transition:transform .24s ease,background .24s ease; }
.gallery-lightbox-close:hover { color:#f7f2e9; background:var(--clay); transform:rotate(90deg); }
html.lightbox-open body { overflow:hidden; }
.page-transition { position:fixed; inset:0; z-index:9998; pointer-events:none; background:var(--pine-dark); transform:translateY(100%); transition:transform .5s cubic-bezier(.76,0,.24,1); }
.page-transition.show { transform:none; }

@media (max-width: 1100px) {
  .container { width: min(100% - 28px, 720px); }
  .section { padding: 76px 0; }
  .section-head { display:block; }
  .nav-shell { padding-left:18px; position:relative; }
  .brand { position:absolute; left:50%; z-index:62; transform:translateX(-50%); }
  .nav-actions { position:relative; z-index:62; }
  .nav-shell>.nav-links,.nav-actions .btn { display:none; }
  .utility-pill { background:rgba(255,255,255,.16); }
  .menu-toggle { display:grid; position:relative; z-index:63; }
  .mobile-nav-overlay { position:fixed; inset:0; z-index:58; display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:0; padding:112px max(28px,7vw) 76px; color:#f7f2e9; background:radial-gradient(circle at 85% 18%,rgba(79,142,136,.28),transparent 30%),radial-gradient(circle at 12% 88%,rgba(213,104,67,.2),transparent 28%),rgba(7,47,43,.97); backdrop-filter:blur(26px) saturate(130%); -webkit-backdrop-filter:blur(26px) saturate(130%); opacity:0; visibility:hidden; transform:translateX(100%); transition:transform .82s cubic-bezier(.76,0,.24,1),opacity .45s ease,visibility 0s linear .82s; }
  .mobile-nav-overlay::before { content:'Explore Nemercka'; position:absolute; top:105px; left:max(28px,7vw); color:rgba(247,242,233,.48); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.24em; }
  .mobile-nav-overlay::after { content:'Përmet · Albania'; position:absolute; left:max(28px,7vw); bottom:34px; color:rgba(247,242,233,.48); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.22em; }
  .mobile-nav-overlay a { width:100%; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.13); border-radius:0; font-family:var(--serif); font-size:clamp(34px,8vw,54px); line-height:1.04; letter-spacing:-.035em; opacity:0; transform:translateX(38px); transition:opacity .42s ease,transform .62s cubic-bezier(.22,1,.36,1),color .2s; }
  .mobile-nav-overlay a:hover,.mobile-nav-overlay a.active { color:#f29a78; background:transparent; }
  .mobile-nav-overlay.open { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .mobile-nav-overlay.open a { opacity:1; transform:none; }
  .mobile-nav-overlay.open a:nth-child(1) { transition-delay:.22s; }
  .mobile-nav-overlay.open a:nth-child(2) { transition-delay:.27s; }
  .mobile-nav-overlay.open a:nth-child(3) { transition-delay:.32s; }
  .mobile-nav-overlay.open a:nth-child(4) { transition-delay:.37s; }
  .mobile-nav-overlay.open a:nth-child(5) { transition-delay:.42s; }
  .mobile-nav-overlay.open a:nth-child(6) { transition-delay:.47s; }
  .mobile-nav-overlay.open a:nth-child(7) { transition-delay:.52s; }
  .mobile-nav-overlay.open a:nth-child(8) { transition-delay:.57s; }
  .mobile-menu-tools { display:flex; margin-top:22px; opacity:0; transform:translateX(38px); transition:opacity .42s ease .62s,transform .62s cubic-bezier(.22,1,.36,1) .62s; }
  .mobile-nav-overlay.open .mobile-menu-tools { opacity:1; transform:none; }
  .mobile-menu-tools .utility-pill { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); }
  .mobile-menu-tools .language-control { border-color:rgba(255,255,255,.18); color:#f7f2e9; }
  .mobile-menu-tools .theme-toggle { color:#f7f2e9; }
  html.menu-open body { overflow:hidden; }
  html.menu-open .nav-shell { background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  html.menu-open .site-header .brand img { content:url('assets/logo-nemercka-light.svg'); }
  html.menu-open .theme-toggle { color:#f7f2e9; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.08); }
  html.menu-open .menu-toggle { color:var(--pine-dark); background:#f7f2e9; }
  .hero { min-height: 78vh; }
  .trust-strip { width:calc(100% - 28px); grid-template-columns:repeat(2,1fr); }
  .hero-content { width: calc(100% - 32px); padding-bottom: 110px; }
  .hero-content p { font-size:16px; }
  .hero-badge { display:none; }
  .booking-bar { width: calc(100% - 28px); margin-top:-65px; grid-template-columns:1fr; border-radius:28px; }
  .villas-home + .booking-bar { width:calc(100% - 28px); margin:22px auto 0; }
  .booking-field { border-right:0; border-bottom:1px solid var(--line); }
  .story-grid, .split, .room-row, .experience-card, .menu-grid, .booking-layout { grid-template-columns:1fr; }
  .villas-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:270px; }
  .villa-booking-grid { grid-template-columns:1fr; }
  .villa-booking-card { grid-template-columns:1fr 1fr; }
  .villas-gallery figure,.villas-gallery-main,.villas-garden,.villas-interior,.villas-living,.villas-loft,.villas-spa,.villas-water,.villas-night,.villas-garden-row,.villas-spa-interior { grid-column:span 1; grid-row:span 1; }
  .villas-gallery-main,.villas-living,.villas-spa-interior { grid-column:span 2; }
  .media-reel-grid { grid-template-columns:1fr; gap:34px; }
  .media-reel-copy { max-width:620px; }
  .media-reel-frame, .media-reel-frame video { min-height:520px; }
  .story-grid { gap:32px; }
  .story-media { min-height:420px; }
  .story-media .quote { right:14px; bottom:14px; }
  .feature-icons { grid-template-columns:repeat(2,1fr); }
  .feeling-grid { grid-template-columns:1fr; }
  .feeling-card { min-height:420px; }
  .cards-3 { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; }
  .cards-3 { overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; }
  .cards-3::-webkit-scrollbar { display:none; }
  .media-card { min-width:84%; scroll-snap-align:center; }
  .split-image { min-height:480px; order:-1; }
  .timeline { grid-template-columns:1fr 1fr; }
  .editorial-grid .wide, .editorial-grid .narrow, .editorial-grid .half { grid-column:1 / -1; }
  .room-row:nth-child(even) .room-photo { order:0; }
  .room-info, .experience-info { padding:30px; }
  .room-photo, .experience-card img { min-height:330px; }
  .info-strip { grid-template-columns:1fr 1fr; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .gallery-item::after { opacity:1; transform:none; }
  .gallery-item, .gallery-item.wide { grid-column:auto; min-height:260px; }
  .gallery-item.tall { min-height:380px; }
  .booking-summary { position:static; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-social { align-items:flex-start; flex-direction:column; }
  .social-links { justify-content:flex-start; }
  .cta-band .container { display:block; }
  .cta-band .btn { margin-top:24px; }
  .site-footer { padding-bottom:36px; }
  .back-to-top { right:14px; bottom:14px; width:50px; height:50px; }
  .site-header.is-scrolled .nav-shell { width:calc(100% - 20px); }
}

@media (max-width: 560px) {
  .loader-inner { transform:scale(.92); }
  .site-loader.is-leaving .loader-inner { transform:translateY(-18px) scale(.88); }
  .mobile-nav-overlay { padding-top:118px; padding-bottom:66px; }
  .mobile-nav-overlay::before { top:104px; }
  .mobile-nav-overlay a { padding:9px 0; font-size:clamp(34px,10.5vw,46px); }
  .trust-strip,.review-grid,.itinerary-grid { grid-template-columns:1fr; }
  .experience-extra { grid-template-columns:1fr; }
  .display { font-size: 52px; }
  .title { font-size: 40px; }
  .hero { min-height: 720px; border-radius:0 0 32px 32px; overflow:hidden; }
  .hero-content { padding-top:140px; }
  .hero-actions .btn { width:100%; }
  .feature-icons, .timeline, .form-grid, .gallery-grid { grid-template-columns:1fr; }
  .feature-icons { grid-template-columns:repeat(2,1fr); }
  .gallery-item, .gallery-item.wide, .gallery-item.tall { min-height:360px; }
  .gallery-lightbox { padding:16px; }
  .gallery-lightbox-dialog img { max-height:calc(100vh - 92px); border-radius:22px; }
  .gallery-lightbox-close { top:10px; right:10px; width:44px; height:44px; }
  .room-info h2, .experience-info h2 { font-size:38px; }
  .room-reel { padding-top:8px; }
  .media-reel-frame, .media-reel-frame video { min-height:470px; }
  .media-reel-frame figcaption { left:20px; right:20px; bottom:20px; display:block; }
  .media-reel-frame figcaption small { display:block; margin-top:8px; }
  .info-strip { grid-template-columns:1fr 1fr; }
  .villas-features { grid-template-columns:repeat(2,1fr); }
  .villas-gallery { grid-template-columns:1fr; grid-auto-rows:320px; }
  .villa-booking-card { grid-template-columns:1fr; }
  .villa-booking-image { min-height:320px; }
  .villas-gallery figure,.villas-gallery-main,.villas-living,.villas-spa-interior { grid-column:span 1; grid-row:span 1; }
  .form-group.full { grid-column:auto; }
  .booking-form, .booking-summary, .contact-card { padding:22px; }
  .copyright { display:block; }
  .copyright span + span { display:block; margin-top:8px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } .site-loader{display:none!important;} .reveal,.scroll-reveal{opacity:1;transform:none;} }