/* Bujtina Kaçaku — concept by KERA Tech Solutions.
   Rebuilt section by section after the Teton Cabins home page: 1vw type base, Roslindale-style narrow serif
   (Instrument Serif) + extended grotesk (Archivo wdth 125), cream / walnut / pine rhythm. */

:root {
  --beige: #f2efe9;
  --ink: #43271f;          /* walnut, replaces the reference cherry */
  --ink-2: #5a382d;
  --pine: #24493a;         /* Rugova pine, replaces the reference green */
  --light: #ab9e94;
  --sketch: #8c837b;
  --gold: #d1a62b;
  --white: #fff;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cutive Mono", "Courier New", monospace;
  --hand: "Permanent Marker", "Comic Sans MS", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--beige); }
body {
  margin: 0; background: var(--beige); color: var(--ink);
  font-family: var(--sans); font-stretch: 125%; font-size: 1vw; line-height: 1.5;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 500; background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 99px; font-size: 14px; text-decoration: none; }
.skip:focus { top: 1rem; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- type (reference scale: h1 10em / h2 5em / h3 3em / h4 2em / par .8em) ---------- */
.h1, .h2, .h3, .h4 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.005em; }
.h1 { font-size: 10em; line-height: 1; }
.h2 { font-size: 5em; line-height: 1; }
.h3 { font-size: 3em; line-height: 1.1; color: var(--ink); }
.h4 { font-size: 2em; line-height: 1.2; color: var(--ink); }
.white { color: #fff !important; }
.center { text-align: center; }
.par { font-family: var(--sans); font-size: max(.8em, 11.5px); line-height: 1.5; color: var(--ink); margin: 0; }
.par b, .par strong { font-weight: 600; }
.par + .par { margin-top: 1.5em; }
.sub { font-family: var(--sans); font-size: max(.8em, 10.5px); font-weight: 600; letter-spacing: .5em; text-transform: uppercase; line-height: 1.4; color: var(--ink); margin: 0; }
.sub-bold { font-family: var(--sans); font-size: max(.8em, 11px); font-weight: 600; text-transform: uppercase; line-height: 1.6; margin: 0; }

/* pill buttons (b-main / but-white): outline, fill on hover */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  border: 1px solid var(--ink); border-radius: 100px; padding: 1vw 2vw; min-height: 40px;
  font-family: var(--sans); font-size: max(.8em, 11.5px); font-weight: 500; line-height: 1; color: var(--ink);
  text-decoration: none; background: transparent;
  transition: background-color .2s ease-out, color .2s ease-out;
}
.btn:hover { background: var(--ink); color: #fff; transition-duration: .3s; transition-timing-function: ease-in; }
.btn--white { border-color: #fff; color: #fff; }
.btn--white:hover { background: #fff; color: var(--ink); }

/* ---------- preloader (green, mark rises, panel slides away) ---------- */
.preloader { display: none; }
.js .preloader {
  animation: preFail .01s 6s forwards;
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: var(--pine);
}
.pre-mark { color: var(--beige); text-align: center; opacity: 0; transform: translateY(20px); }
.pre-mark b { display: block; font-family: var(--serif); font-weight: 400; font-size: 2.6em; line-height: 1; }
.pre-mark small { display: block; margin-top: .9em; font-size: max(.55em, 9px); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.reduced .preloader, .no-anim .preloader, .ready .preloader.done { display: none !important; }
@keyframes preFail { to { visibility: hidden; opacity: 0; } }

/* ---------- header / nav ---------- */
.nav {
  position: absolute; z-index: 20; left: 0; right: 0; top: 25px; height: 4vw; min-height: 48px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 3vw;
}
.burger { width: 23px; height: 23px; display: flex; flex-direction: column; justify-content: center; gap: 4px; position: relative; }
.burger span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s; }
.nav .burger { color: #fff; width: 1.6vw; min-width: 22px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.logo { font-family: var(--serif); font-size: 2.35em; line-height: 1; color: #fff; text-decoration: none; white-space: nowrap; letter-spacing: -.01em; }
.nav__right { justify-self: end; display: flex; align-items: center; gap: 2.2vw; }
.lang { display: inline-flex; align-items: center; gap: .15em; font-size: max(.8em, 11px); font-weight: 600; letter-spacing: .12em; color: #fff; }
.lang button { padding: .5em .35em; opacity: .55; transition: opacity .3s; }
.lang button[aria-pressed="true"] { opacity: 1; }
.lang button:hover { opacity: 1; }
.lang i { font-style: normal; opacity: .5; }
.menu-b { position: relative; font-size: 1.2vw; font-weight: 500; color: #fff; text-decoration: none; padding: .4em 0; white-space: nowrap; }
.menu-b .line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scale(0); opacity: 0; transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .9s cubic-bezier(.22,1,.36,1); }
.menu-b:hover .line, .menu-b:focus-visible .line { transform: scale(1); opacity: 1; transition-duration: .5s; }

/* fullscreen menu (beige, links | image | extra) */
.menu { position: fixed; inset: 0; z-index: 100; background: var(--beige); display: none; flex-direction: column; justify-content: center; }
.menu.is-open { display: flex; }
.menu .nav { position: absolute; color: var(--ink); }
.menu .nav .burger, .menu .logo, .menu .lang, .menu .menu-b { color: var(--ink); }
.menu__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 7vw; align-items: center; padding: 5vw 7vw 0; }
.menu__links { display: flex; flex-direction: column; align-items: flex-start; }
.menu__links a { font-family: var(--serif); font-size: 3.4em; line-height: 1.05; color: var(--ink); text-decoration: none; margin-bottom: .32em; transition: opacity .5s; }
.menu__links a:hover { opacity: .5; }
.menu__img { width: 25vw; justify-self: center; overflow: hidden; aspect-ratio: 4 / 5; }
.menu__img img { width: 100%; height: 100%; object-fit: cover; }
.menu__extra { width: 80%; }
.menu__extra a { display: block; font-size: max(.8em, 11px); font-weight: 600; text-transform: uppercase; text-decoration: none; color: var(--ink); margin-bottom: .9em; transition: opacity .5s; }
.menu__extra a:hover { opacity: .5; }
.menu__extra p { margin-top: 3vw; color: var(--light); font-size: max(.7em, 11px); line-height: 1.55; }
.menu__extra p b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 1.2em; letter-spacing: .04em; }

/* ---------- hero (140vh, scaled photo, two masked lines, badges) ---------- */
.hero { position: relative; height: 140vh; overflow: hidden; background: #2e3b30; }
.hero__media { position: absolute; inset: 0; z-index: 1; will-change: transform; }
.hero__media img { width: 100%; height: 140vh; object-fit: cover; object-position: 52% 30%; }
.hero__cover { position: absolute; inset: 0; z-index: 2; background: #000; opacity: .2; }
.hero__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,.25) 100%); }
.hero__txt { position: absolute; z-index: 3; left: 0; right: 0; top: 40%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__title { color: #fff; font-size: 5em; line-height: 1; margin-bottom: .4em; }
.hero__title .ln { display: block; overflow: hidden; padding-bottom: 5px; }
.hero__title .ln > span { display: block; }
.hero__par { width: 15%; min-width: 210px; color: #fff; text-align: center; }
.hero__cta { display: none; }
.hero__badges { position: absolute; z-index: 3; left: 0; right: 0; bottom: 6vw; display: flex; justify-content: center; gap: 2vw; color: #fff; }
.badge { width: 6.6vw; height: 6.6vw; min-width: 64px; min-height: 64px; }
.badge text { font-family: var(--sans); font-stretch: 125%; fill: currentColor; }

/* ---------- blocks ---------- */
.block { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 10vw 3vw; }
.two { display: grid; grid-template-columns: 47vw 1fr; column-gap: 10vw; align-items: center; width: 100%; }

/* intro: image left 47vw, text right */
.intro__img { width: 47vw; overflow: hidden; aspect-ratio: 677 / 588; }
.intro__img img, .types__img img, .gate__img img, .fam__img img { width: 100%; height: 100%; object-fit: cover; }
.intro__txt { margin-left: 5vw; }
.intro__txt .h3 { width: 80%; }
.c-par { width: 50%; margin: 7% 0; }
.c-par.w60 { width: 60%; }
.c-par.w70 { width: 70%; }

/* lodge: walnut panel + slider */
.lodge { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); height: 100vh; min-height: 560px; }
.lodge__txt { align-self: center; margin-left: 7vw; color: #fff; }
.lodge__txt .sub { color: #fff; margin-bottom: 5%; line-height: 1.8; }
.lodge__txt .c-par { width: 47%; margin: 7% 0; }
.lodge__txt .par { color: #fff; }
.slider { position: relative; overflow: hidden; height: 100%; }
.slider__track { position: relative; height: 100%; }
.slide { position: absolute; inset: 0; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.js .slider .slide:not(:first-child) { transform: translateX(100%); }
.pill {
  width: 4vw; height: 3vw; min-width: 46px; min-height: 36px; border-radius: 50px; background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: max(.7em, 11px); font-weight: 500;
  transition: transform .4s cubic-bezier(.22,1,.36,1), background-color .3s;
}
.pill:hover { transform: scale(1.08); }
.slider .pill { position: absolute; bottom: 7%; z-index: 3; }
.slider .pill--prev { right: 22%; }
.slider .pill--next { right: 10%; }
.slider__count { position: absolute; left: 3vw; bottom: 7%; z-index: 3; color: #fff; font-size: max(.7em, 11px); font-weight: 600; letter-spacing: .3em; text-shadow: 0 1px 8px rgba(0,0,0,.35); }

/* amenities */
.amen { padding-top: 15vw; padding-bottom: 15vw; }
.benefits { display: flex; justify-content: space-between; align-items: flex-start; width: 52vw; margin-top: 8vw; }
.benefit { width: 22%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.benefit svg { width: 3.2vw; height: 3.2vw; min-width: 34px; min-height: 34px; margin-bottom: 2vw; color: var(--ink); }
.benefit b { display: block; font-size: max(.75em, 10.5px); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 1.4em; color: var(--ink); }
.benefit .par { font-size: max(.7em, 11px); }

/* types (2-col) + mountain illustration */
.types { align-items: flex-end; padding-top: 0; }
.types__img { width: 47vw; overflow: hidden; aspect-ratio: 677 / 492; }
.illo-wrap { width: 25vw; margin-top: -30px; margin-right: -3vw; color: var(--sketch); will-change: transform; }
.illo-peaks { width: 100%; height: auto; overflow: visible; }
.sketchy { filter: url(#wobble); }

/* plans slider ("find your perfect room") */
.plans { padding-top: 0; }
.plans .h3 { margin-top: .8em; }
.plans__slider { position: relative; width: 100%; margin-top: 4%; }
.plans__slider { display: grid; }
.plan { display: flex; align-items: center; justify-content: center; }
.plan + .plan { margin-top: 6vw; }
.js .plan { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.js .plan + .plan { margin-top: 0; }
.js .plan.is-active { visibility: visible; opacity: 1; }
.plans .pill { display: none; }
.js .plans .pill { display: flex; }
.plan__art { width: 35vw; color: var(--sketch); }
.plan__art svg { width: 100%; height: auto; overflow: visible; }
.plan__art text { font-family: var(--mono); fill: var(--sketch); stroke: none; }
.plan__art .hand { font-family: var(--hand); fill: #77706a; }
.plan__info { width: 25%; margin-left: 10vw; }
.plan__info .h4 { width: 70%; margin-bottom: .8em; }
.kv { display: flex; gap: .5em; margin-bottom: 5%; }
.kv b, .cms-name { font-size: max(.8em, 11.5px); font-weight: 600; color: var(--ink); }
.cms-name { display: block; margin: 0 0 .6em; }
.plan__info ul { list-style: none; margin: 0 0 8%; padding: 0; }
.plan__info li { font-size: max(.8em, 11.5px); line-height: 1.6; }
.plan__info li::before { content: "• "; }
.plan__info .c-block { margin-bottom: 1.4em; }
.plans .pill { position: absolute; bottom: 45%; z-index: 4; }
.plans .pill--prev { left: 0; }
.plans .pill--next { right: 0; }

/* green block: memories */
.green { background: var(--pine); padding-top: 15vw; padding-bottom: 5%; color: var(--beige); }
.mem__txt { display: flex; flex-direction: column; align-items: center; width: 80%; }
.submark { width: 4vw; min-width: 40px; margin-bottom: 3%; color: var(--beige); }
.green .sub { color: var(--beige); margin-bottom: 7vw; line-height: 1.8; }
.mem__title { color: #fff; font-size: 10em; line-height: 1; text-align: center; }
.mem__title .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.mem__title .ln > span { display: block; }
.mem__quote { width: 26%; margin: 5% 0; color: var(--beige); text-align: center; }
.mem__quote cite { display: block; font-style: normal; font-weight: 500; opacity: .75; margin-top: .6em; letter-spacing: .05em; }
.fan { display: flex; justify-content: center; align-items: center; margin: 5% 0; }
.fan__img { position: relative; z-index: 5; overflow: hidden; }
.fan__img img { width: 100%; height: 100%; object-fit: cover; }
.fan__img--l, .fan__img--r { z-index: 2; width: 23vw; aspect-ratio: 331 / 441; }
.fan__img--l { margin-right: -7vw; transform: rotate(-12deg) translateY(-65px); }
.fan__img--r { margin-left: -7vw; transform: rotate(12deg) translateY(-65px); }
.fan__img--c { width: 35vw; aspect-ratio: 504 / 528; transform: translateY(-65px); }
.mem__ben { display: flex; justify-content: space-between; align-items: flex-start; width: 70%; padding-bottom: 10%; }
.ben { display: flex; flex-direction: column; align-items: center; text-align: center; width: 25%; }
.ben:first-child { width: 20%; }
.ben svg { height: 3.3vw; min-height: 34px; width: auto; margin-bottom: 1.6vw; color: var(--beige); }
.ben b { font-size: max(.75em, 10.5px); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 1.6em; color: #fff; }
.ben .par { color: var(--beige); text-align: center; font-size: max(.75em, 11px); }

/* location: text + hand-drawn map + "miles" */
.loc { display: block; padding-top: 10vw; }
.loc__txt { position: relative; z-index: 3; width: 38%; margin-left: 10vw; }
.loc__txt .h3 { width: 60%; }
.loc__txt .c-par { width: 80%; }
.map { position: relative; z-index: 1; width: 84vw; margin: -10vw 0 0 10vw; color: var(--sketch); }
.map svg { width: 100%; height: auto; overflow: visible; }
.map text { font-family: var(--mono); fill: var(--sketch); stroke: none; font-size: 15px; }
.map .hand { font-family: var(--hand); fill: #7c746d; }
.miles { display: flex; margin-top: 5vw; }
.miles > div { width: 10vw; margin-left: 10vw; }
.miles > div + div { margin-left: 5vw; }
.miles b { display: block; font-weight: 600; margin-bottom: 1.4em; }

/* adventures: three tall cards */
.adv-block { padding-top: 10vw; padding-bottom: 0; }
.adv-block .sub { margin-top: 2.2em; }
.advs { display: flex; justify-content: center; width: 100%; margin-top: 5%; }
.adv { position: relative; flex: 1; height: 90vh; min-height: 520px; margin-right: 2vw; overflow: hidden; color: #fff; text-decoration: none; }
.adv:last-child { margin-right: 0; }
.adv__img { position: absolute; inset: 0; }
.adv__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s cubic-bezier(.45,0,.55,1); }
.adv:hover .adv__img img { transform: scale(1.1); transition-duration: .45s; }
.adv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.22) 40%, rgba(0,0,0,.3)); z-index: 2; }
.adv__txt { position: absolute; z-index: 5; inset: 30% 0 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.adv__txt .h3 { color: #fff; }
.adv__txt .par { width: 40%; margin-top: auto; margin-bottom: 30%; color: #fff; font-weight: 600; text-align: center; }
.adv-end { display: flex; flex-direction: column; align-items: center; padding: 6vw 0 0; }
.adv-end .par { width: 35vw; text-align: center; margin-bottom: 3vw; }

/* gateway */
.gate .two { grid-template-columns: 45vw 1fr; }
.gate__img { width: 35vw; margin-left: 10vw; overflow: hidden; aspect-ratio: 504 / 654; }
.gate__txt { margin-left: 0; }
.gate__txt .sub { margin-bottom: 5%; }
.gate__txt .h3 { width: 70%; }
.gate__txt .c-par { width: 60%; }

/* reviews */
.review { padding-top: 0; padding-bottom: 10vw; }
.reviews { display: flex; flex-direction: column; align-items: center; width: 100%; }
.stars { display: flex; gap: .45em; margin-top: 2.2em; color: var(--gold); }
.stars svg { width: 1.05em; height: 1.05em; min-width: 14px; min-height: 14px; }
.reviews blockquote { width: 30%; margin: 2em 0 0; }
.reviews blockquote .par { text-align: center; }
.reviews cite { display: block; margin-top: 1.2em; font-style: normal; font-weight: 600; font-size: max(.75em, 11px); text-align: center; }
.rating-line { margin: 1.4em 0 3.4em; font-size: max(.7em, 10.5px); font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--light); }

/* western beauty (full-bleed, tracked caps) */
.beauty { position: relative; height: 110vh; overflow: hidden; }
.beauty__img { position: absolute; inset: -6% 0; will-change: transform; }
.beauty__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.beauty__color { position: absolute; inset: 0; z-index: 2; background: #000; opacity: .22; }
.beauty__txt { position: absolute; z-index: 3; left: 0; right: 0; top: 15vh; text-align: center; color: #fff; font-size: 1.5em; font-weight: 600; letter-spacing: 3em; line-height: 1; text-transform: uppercase; padding-left: 3em; white-space: nowrap; }

/* family */
.fam .two { grid-template-columns: 1fr 47vw; }
.fam__txt { padding-left: 10vw; }
.fam__txt .c-par { width: 70%; }
.fam__img { width: 47vw; overflow: hidden; aspect-ratio: 677 / 657; }
.fam__img img { filter: grayscale(1) contrast(1.05); }

/* CTA: no more words */
.cta-block { padding-top: 0; padding-bottom: 3vw; }
.cta-block .sub { margin-bottom: 4vw; }
.cta { display: inline-block; text-decoration: none; color: var(--ink); }
.cta span { display: block; font-size: 4em; font-weight: 500; line-height: 1; padding-bottom: .08em; }
.cta i { display: block; height: 3px; background: var(--ink); transform-origin: 50% 50%; }
.cta-img { width: 30vw; margin-top: 5vh; overflow: hidden; aspect-ratio: 432 / 380; }
.cta-img img { width: 100%; height: 100%; object-fit: cover; }

/* food intro (brands block) */
.brands { padding-top: 10vw; padding-bottom: 5vw; }
.brands .surt { font-size: 3em; font-weight: 500; line-height: 1.2; text-align: center; margin: 0 0 4%; color: var(--ink); }
.brands .par { width: 32vw; text-align: center; }

/* two food cards (dcr): hover drops the photo in */
.cards { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 90vh; min-height: 520px; padding-top: 5vw; }
.card { position: relative; overflow: hidden; display: block; text-decoration: none; }
.card__img { position: absolute; inset: 0; z-index: 1; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__img::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.28); }
.card__txt { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vw; }
.card__txt .h4 { width: 40%; text-align: center; color: #fff; transition: color .7s cubic-bezier(.22,1,.36,1); }
.card__txt .btn { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .js .card .card__img { opacity: .13; transform: none; transition: opacity 1.6s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.16,1,.3,1); }
  .js .card .h4 { color: var(--ink); }
  .js .card .btn { opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.22,1,.36,1) .3s, transform .4s cubic-bezier(.22,1,.36,1) .3s; }
  .js .card:hover .card__img, .js .card:focus-visible .card__img { opacity: 1; transform: none; }
  .js .card:hover .h4, .js .card:focus-visible .h4 { color: #fff; }
  .js .card:hover .btn, .js .card:focus-visible .btn { opacity: 1; transform: none; }
  .js .card .card__img { transition-property: opacity, transform; }
  .js .card:not(:hover) .card__img { transition: opacity .3s ease, transform .3s ease; }
  .js .card:hover .card__img img { animation: dropIn .35s cubic-bezier(.16,1,.3,1); }
  .js .card .card__img::after { opacity: 0; transition: opacity .5s; }
  .js .card:hover .card__img::after { opacity: 1; }
}

/* social grid */
.ig { padding-bottom: 3vw; }
.ig__txt { margin: 2vh 0 7vh; }
.ig__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2vw; width: 70vw; margin-bottom: 3%; }
.ig__pic { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.ig__pic img { width: 100%; height: 100%; object-fit: cover; }
.ig__hover { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .5s cubic-bezier(.22,1,.36,1); }
.ig__hover svg { width: 15%; color: #fff; transform: translateY(50px); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.ig__pic:hover .ig__hover, .ig__pic:focus-visible .ig__hover { opacity: 1; }
.ig__pic:hover .ig__hover svg, .ig__pic:focus-visible .ig__hover svg { transform: none; }

.totop-wrap { display: flex; justify-content: flex-end; padding: 2vw 5vw 3vw; }
.totop { width: 3vw; height: 4.9vw; min-width: 40px; min-height: 64px; border-radius: 1.2vw; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.totop svg { width: 46%; height: auto; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.totop:hover svg { transform: translateY(-6px); }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #fff; padding: 7% 10vw 4% 13vw; }
.footer__grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; column-gap: 2vw; row-gap: 7vh; }
.f-title { font-size: max(.8em, 11px); font-weight: 600; text-transform: uppercase; line-height: 20px; margin: 0 0 2.2em; }
.f-link { display: block; color: #fff; font-size: max(.6em, 10px); text-transform: uppercase; text-decoration: none; margin-bottom: 1.25em; transition: opacity .5s; }
.f-link:hover { opacity: .5; }
.f-par { font-size: max(.7em, 11px); line-height: 1.55; color: #fff; margin: 0; }
.f-visit dl { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 1.6em; row-gap: .9em; }
.f-visit dt { font-size: max(.6em, 10px); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; opacity: .65; padding-top: .2em; }
.f-visit dd { margin: 0; font-size: max(.7em, 11px); line-height: 1.5; }
.f-visit dd a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); transition: border-color .3s; }
.f-visit dd a:hover { border-color: #fff; }
.f-visit .btn { margin-top: 2.2em; }
.f-tag { display: grid; grid-template-columns: 3.2em 1fr; align-items: center; margin-bottom: 1.6em; text-decoration: none; color: #fff; transition: opacity .5s; }
a.f-tag:hover { opacity: .5; }
.f-tag svg { width: 20px; height: 20px; }
.s-logo { width: 75%; margin-top: 10%; color: #fff; text-align: center; }
.s-logo svg { width: 46%; margin: 0 auto .6em; }
.s-logo b { display: block; font-family: var(--serif); font-weight: 400; font-size: 2.6em; line-height: 1; }
.s-logo small { display: block; margin-top: .7em; font-size: max(.55em, 9px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 1.2em 3em; justify-content: space-between; margin-top: 7vh; }
.footer__bottom a, .footer__bottom span { font-size: max(.6em, 10px); font-weight: 600; text-transform: uppercase; color: #fff; text-decoration: none; letter-spacing: .02em; }
.footer__bottom a { border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 2px; transition: opacity .5s; }
.footer__bottom a:hover { opacity: .5; }

/* ---------- concept toast ---------- */
.toast {
  position: fixed; left: 16px; bottom: 16px; z-index: 400; max-width: min(380px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 18px; border-radius: 14px;
  background: rgba(36, 73, 58, .96); color: var(--beige); box-shadow: 0 12px 34px rgba(0,0,0,.22);
  font-size: 13px; line-height: 1.45; transform: translateY(16px); opacity: 0; transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .6s;
}
.toast[hidden] { display: none; }
.toast.is-in { transform: none; opacity: 1; }
.toast p { margin: 0; }
.toast a { color: #fff; }
.toast__x { flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; }
.toast__x svg { width: 11px; height: 11px; }
.toast__x:hover { background: rgba(255,255,255,.28); }

/* ---------- pre-reveal states (JS only) ---------- */
.js:not(.reduced):not(.no-anim) .reveal-par { opacity: 0; transform: translateY(20px); }
.js:not(.reduced):not(.no-anim) .an-left img, .js:not(.reduced):not(.no-anim) .an-right img { opacity: 0; }
.js:not(.reduced):not(.no-anim) .benefits { opacity: 0; transform: translateY(20px); }
.js:not(.reduced):not(.no-anim) .map { opacity: 0; }
.js:not(.reduced):not(.no-anim) .reviews { opacity: 0; transform: scale(1.2); }
.js:not(.reduced):not(.no-anim) .brands__in { opacity: 0; transform: scale(1.2); }
.js:not(.reduced):not(.no-anim) .fan__img { opacity: 0; }
.js:not(.reduced):not(.no-anim) .hero__badges, .js:not(.reduced):not(.no-anim) .hero__par, .js:not(.reduced):not(.no-anim) .hero .nav { opacity: 0; }

/* ---------- tablet ---------- */
@media (max-width: 991px) {
  body { font-size: 1.25vw; }
  .hero__par { width: 26%; }
  .fan__img--l, .fan__img--r { width: 30vw; }
  .fan__img--c { width: 40vw; }
  .lodge__txt .c-par { width: 70%; }
  .plan__info { width: 36%; margin-left: 6vw; }
  .menu-b { font-size: 1.6vw; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  body { font-size: 3.6vw; }
  .par, .plan__info li, .kv b, .cms-name { font-size: 14px; }
  .sub { font-size: 11px; letter-spacing: .4em; }
  .btn { padding: 12px 22px; font-size: 13px; }
  .block { padding: 18vw 6vw; }
  .nav { top: 14px; padding: 0 5vw; grid-template-columns: auto 1fr auto; column-gap: 12px; }
  .nav .logo { justify-self: start; font-size: 26px; }
  .nav .burger { order: 3; width: 26px; }
  .nav__right { order: 2; gap: 14px; }
  .nav__right .menu-b { display: none; }
  .menu .nav__right .menu-b { display: none; }
  .hero { height: 100svh; min-height: 620px; }
  .hero__media img { height: 100svh; min-height: 620px; object-position: 58% 40%; }
  .hero__txt { top: 34%; }
  .hero__title { font-size: 12vw; }
  .hero__par { width: 70%; font-size: 13px; }
  .hero__cta { display: inline-flex; margin-top: 28px; }
  .hero__badges { bottom: 7vh; gap: 16px; }
  .badge { width: 74px; height: 74px; }
  .h3 { font-size: 9.6vw; }
  .h4 { font-size: 7.4vw; }
  .two, .gate .two, .fam .two { grid-template-columns: 1fr; row-gap: 9vw; }
  .intro__img, .types__img, .gate__img, .fam__img { width: 100%; margin: 0; }
  .intro__txt, .gate__txt, .fam__txt { margin: 0; padding: 0; }
  .intro__txt .h3, .gate__txt .h3 { width: 100%; }
  .c-par, .c-par.w60, .c-par.w70, .gate__txt .c-par, .fam__txt .c-par, .loc__txt .c-par { width: 100%; margin: 6vw 0 8vw; }
  .fam__txt { order: 2; }
  .lodge { grid-template-columns: 1fr; height: auto; }
  .lodge__txt { margin: 0; padding: 18vw 6vw 14vw; }
  .lodge__txt .c-par { width: 100%; }
  .lodge .slider { height: 112vw; }
  .slider .pill--prev { right: 26%; }
  .slider .pill--next { right: 6%; }
  .amen { padding: 20vw 6vw; }
  .benefits { width: 100%; flex-wrap: wrap; row-gap: 12vw; margin-top: 12vw; }
  .benefit { width: 46%; }
  .benefit svg { width: 40px; height: 40px; margin-bottom: 18px; }
  .benefit b { font-size: 11px; }
  .types { align-items: stretch; }
  .illo-wrap { width: 70vw; align-self: flex-end; margin: 6vw -6vw 0 0; }
  .plan { flex-direction: column; }
  .plan__art { width: 100%; }
  .plan__info { width: 100%; margin: 6vw 0 0; }
  .plans .pill { bottom: auto; top: 30vw; }
  .green { padding-top: 22vw; }
  .mem__txt { width: 100%; }
  .mem__title { font-size: 15.5vw; }
  .mem__quote { width: 84%; margin: 10vw 0; font-size: 12px; }
  .fan { margin: 6vw 0 4vw; }
  .fan__img--l, .fan__img--r { width: 38vw; }
  .fan__img--l { margin-right: -14vw; }
  .fan__img--r { margin-left: -14vw; }
  .fan__img--c { width: 52vw; }
  .mem__ben { width: 100%; flex-direction: column; align-items: center; row-gap: 12vw; padding-bottom: 16vw; }
  .ben, .ben:first-child { width: 78%; }
  .ben b { font-size: 12px; }
  .loc__txt { width: 100%; margin: 0; padding: 0 6vw; }
  .loc__txt .h3 { width: 100%; }
  .map { width: 150vw; margin: 4vw 0 0 -22vw; }
  .miles { padding: 0 6vw; }
  .miles > div, .miles > div + div { width: 44%; margin: 0; }
  .miles > div + div { margin-left: 8%; }
  .advs { flex-direction: column; gap: 4vw; padding: 0 6vw; }
  .adv { flex: none; height: 70vh; min-height: 460px; margin: 0; }
  .adv__txt .h3 { font-size: 10vw; }
  .adv__txt .par { width: 60%; }
  .adv-end { padding: 14vw 6vw 0; }
  .adv-end .par { width: 100%; }
  .gate__txt .sub { margin-bottom: 4vw; }
  .reviews blockquote { width: 100%; }
  .beauty { height: 80vh; }
  .beauty__txt { top: 12vh; font-size: 13px; letter-spacing: 1.2em; padding-left: 1.2em; white-space: normal; line-height: 2.4; padding-right: 0; }
  .cta span { font-size: 7.4vw; text-align: center; }
  .js .card .card__img, .js .card .btn { opacity: 1 !important; transform: none !important; }
  .js .card .card__img::after { opacity: 1 !important; }
  .js .card .h4 { color: #fff !important; }
  .cta-img { width: 76vw; }
  .brands .surt { font-size: 8.4vw; }
  .brands .par { width: 100%; }
  .cards { grid-template-columns: 1fr; height: auto; padding-top: 0; }
  .card { height: 92vw; }
  .card__txt .h4 { width: 76%; }
  .ig__grid { width: 100%; grid-template-columns: 1fr 1fr; gap: 3vw; }
  .ig { padding: 16vw 6vw 6vw; }
  .footer { padding: 18vw 6vw 12vw; }
  .footer__grid { grid-template-columns: 1fr; row-gap: 12vw; }
  .f-link { font-size: 12px; margin-bottom: 1.1em; }
  .f-title { font-size: 12px; }
  .f-par, .f-visit dd { font-size: 14px; }
  .f-visit dt { font-size: 11px; }
  .s-logo { width: 100%; }
  .s-logo b { font-size: 34px; }
  .footer__bottom a, .footer__bottom span { font-size: 11px; }
  .menu__grid { grid-template-columns: 1fr; padding: 24vw 8vw 0; row-gap: 8vw; }
  .menu__img { display: none; }
  .menu__links a { font-size: 10.5vw; }
  .menu__extra { width: 100%; }
  .menu__extra a { font-size: 12px; }
  .menu__extra p { font-size: 13px; }
  .totop { border-radius: 12px; }
}

@media (max-width: 380px) {
  .hero__badges { gap: 10px; }
  .badge { width: 66px; height: 66px; min-width: 0; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

html[lang="sq"] .beauty__txt { letter-spacing: 2.1em; padding-left: 2.1em; }
@media (max-width: 767px) { html[lang="sq"] .beauty__txt { letter-spacing: .9em; padding-left: .9em; } }

@keyframes dropIn { from { transform: translateY(-460px); } to { transform: none; } }

/* no horizontal scroll: clip reveal offsets (scale 1.2 / slide-ins / wide map) without creating scroll containers */
html, body { overflow-x: clip; }
main > section, .footer { overflow-x: clip; }