/* ==========================================================================
   Hotel Brisha — Sarangkot, Pokhara
   Redesign stylesheet. Brand colour (#ff401b) and fonts (Playfair Display +
   Poppins) carried over from the original WordPress theme.
   ========================================================================== */

:root {
  --brand: #ff401b;
  --brand-deep: #d8300f;
  --brand-soft: #fff0eb;
  --sun: #f6b343;
  --ink: #0c1626;
  --ink-2: #14223a;
  --ink-3: #1d2e4a;
  --cream: #fbf7f1;
  --sand: #f3ebdf;
  --line: #e7ddcf;
  --text: #2b3242;
  --muted: #6b7280;
  --white: #ffffff;

  --serif: "Alegreya Sans", "SimHei", sans-serif;
  --sans: "Alegreya Sans", "SimHei", sans-serif;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px -18px rgba(12, 22, 38, .35);
  --shadow-sm: 0 8px 24px -12px rgba(12, 22, 38, .25);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --container: 1240px;
  --header-h: 84px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; transition: color .25s; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon.fill { fill: currentColor; stroke: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 120px 0; position: relative; }
.section--sand { background: var(--sand); }
.section--dark { background: var(--ink); color: #c9d2e0; }
.section--dark h2, .section--dark h3 { color: #fff; }

/* ---------- Section headings ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: currentColor; border-radius: 2px; }
.heading { font-size: clamp(2.1rem, 4.2vw, 3.4rem); letter-spacing: -.01em; }
.heading em { font-style: italic; color: var(--brand); font-weight: 600; }
.section--dark .heading em { color: var(--sun); }
.lead { font-size: 1.08rem; color: var(--muted); max-width: 640px; }
.section--dark .lead { color: #a9b5c8; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.section-head .eyebrow::after { content: ""; width: 34px; height: 2px; background: currentColor; border-radius: 2px; }
.section-head .lead { margin: 0 auto; }
.section-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; text-align: left; max-width: none; }
.section-head--split .eyebrow::after { display: none; }
.section-head--split .heading { margin-bottom: 0; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--brand); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px; border: 2px solid var(--bg);
  background: var(--bg); color: var(--fg);
  font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; position: relative; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(255, 64, 27, .65); }
.btn:hover::after { transform: translateX(120%); }
.btn .icon { transition: transform .35s var(--ease); }
.btn:hover .icon { transform: translateX(4px); }
.btn--ghost { --bg: transparent; --fg: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost:hover { background: #fff; color: var(--ink); box-shadow: none; }
.btn--outline { --bg: transparent; --fg: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; box-shadow: none; }
.btn--dark { --bg: var(--ink); }
.btn--dark:hover { box-shadow: 0 14px 30px -10px rgba(12,22,38,.6); }
.btn--sm { padding: 11px 22px; font-size: 12.5px; }
.btn--block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--brand); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
.link-arrow .icon { transition: transform .3s var(--ease); }
.link-arrow:hover .icon { transform: translateX(5px); }

/* ---------- Top bar ---------- */
.topbar { background: var(--ink); color: #b6c1d3; font-size: 13px; position: relative; z-index: 60; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; min-height: 42px; gap: 24px; }
.topbar ul { display: flex; gap: 28px; }
.topbar li, .topbar a { display: inline-flex; align-items: center; gap: 8px; }
.topbar .icon { color: var(--brand); width: 15px; height: 15px; }
.topbar a:hover { color: #fff; }
.topbar .social { gap: 14px; }

/* ---------- Header ---------- */
.header {
  position: fixed; left: 0; right: 0; top: 42px; z-index: 50;
  height: var(--header-h);
  transition: background .4s, top .4s var(--ease), box-shadow .4s, height .4s;
}
.header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,12,22,.55), transparent); pointer-events: none; transition: opacity .4s; }
.header.is-scrolled { top: 0; height: 72px; background: rgba(12, 22, 38, .88); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 10px 30px -15px rgba(0,0,0,.6); }
.header.is-scrolled::before { opacity: 0; }
.header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; }
.logo img { height: 54px; width: auto; transition: height .4s; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.header.is-scrolled .logo img { height: 46px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative; padding: 10px 14px; color: rgba(255,255,255,.9);
  font-size: 13.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav a:hover, .nav a.is-active { color: #fff; }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-call { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; line-height: 1.3; }
.header-call span { display: block; color: rgba(255,255,255,.65); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.header-call .icon-wrap { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; cursor: pointer; place-items: center; }
.burger .icon { width: 22px; height: 22px; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(6,12,22,.6); opacity: 0; transition: opacity .4s; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw);
  background: var(--ink); color: #fff; padding: 28px; display: flex; flex-direction: column; gap: 28px;
  transform: translateX(100%); transition: transform .5s var(--ease); overflow-y: auto;
}
.drawer.is-open { pointer-events: auto; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; }
.drawer__top img { height: 44px; width: auto; }
.drawer__nav a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--serif); font-size: 1.35rem; }
.drawer__nav a.is-active, .drawer__nav a:hover { color: var(--brand); }
.drawer__info { font-size: 14px; color: #a9b5c8; display: grid; gap: 10px; margin-top: auto; }
.drawer__info a { display: flex; gap: 10px; align-items: center; }
.drawer__info .icon { color: var(--brand); }

/* ---------- Home hero ---------- */
.hero { position: relative; height: 100vh; min-height: 680px; max-height: 1100px; color: #fff; overflow: hidden; background: var(--ink); }
.hero__slides, .hero__slide { position: absolute; inset: 0; }
.hero__slide { opacity: 0; transition: opacity 1.6s ease; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.hero__slide.is-active { opacity: 1; }
.hero__slide.is-active img { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.14) translate3d(1%, 1%, 0); } to { transform: scale(1.02) translate3d(0, 0, 0); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,12,22,.35) 0%, rgba(6,12,22,.15) 40%, rgba(6,12,22,.75) 100%), radial-gradient(ellipse at 20% 60%, rgba(6,12,22,.55), transparent 60%); }
.hero__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 60px; padding-bottom: 140px; }
.hero__kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--sun); font-weight: 600; margin-bottom: 22px; }
.hero__kicker::before { content: ""; width: 44px; height: 2px; background: currentColor; }
.hero__title { color: #fff; font-size: clamp(2.8rem, 7.4vw, 6.4rem); line-height: 1.02; max-width: 900px; margin-bottom: 26px; letter-spacing: -.02em; text-shadow: 0 6px 40px rgba(0,0,0,.35); }
.hero__title em { color: var(--brand); font-style: italic; font-weight: 600; }
.hero__text { font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 560px; color: rgba(255,255,255,.88); margin-bottom: 38px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__captions { position: relative; min-height: 1.2em; }
.hero__caption { transition: opacity .8s, transform .8s var(--ease); }
.hero__caption:not(.is-active) { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); pointer-events: none; }

.hero__dots { position: absolute; z-index: 3; right: 40px; top: 50%; transform: translateY(-50%); display: grid; gap: 14px; }
.hero__dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: transparent; cursor: pointer; padding: 0; transition: all .3s; }
.hero__dot.is-active { background: var(--brand); border-color: var(--brand); transform: scale(1.3); }
.hero__scroll { position: absolute; z-index: 3; left: 50%; bottom: 150px; transform: translateX(-50%); display: none; }

.hero__meta { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; }
.hero__meta .container { display: flex; justify-content: flex-end; }
.altitude-badge { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-radius: var(--radius) var(--radius) 0 0; background: rgba(12,22,38,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; color: #c9d2e0; }
.altitude-badge strong { font-family: var(--serif); font-size: 2rem; color: #fff; line-height: 1; }

/* Booking bar */
.booking-bar-wrap { position: relative; z-index: 5; margin-top: -70px; }
.booking-bar {
  display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 0; align-items: stretch;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px;
}
.booking-bar .field { padding: 10px 22px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.booking-bar .field:nth-child(4) { border-right: 0; }
.booking-bar label { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.booking-bar label .icon { color: var(--brand); width: 15px; height: 15px; }
.booking-bar input, .booking-bar select { border: 0; padding: 4px 0 0; font-size: 16px; font-weight: 500; color: var(--ink); background: transparent; outline: none; width: 100%; cursor: pointer; }
.booking-bar .btn { border-radius: 12px; padding: 0 34px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; min-height: 520px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--ink); padding: 200px 0 90px; }
.page-hero__bg { position: absolute; inset: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 14s ease-out forwards; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,12,22,.55) 0%, rgba(6,12,22,.35) 45%, rgba(6,12,22,.85) 100%); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 4.8rem); margin-bottom: 14px; }
.page-hero h1 em { color: var(--brand); font-weight: 600; }
.page-hero p { color: rgba(255,255,255,.85); max-width: 620px; font-size: 1.08rem; }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--sun); }
.breadcrumb .icon { width: 14px; height: 14px; color: var(--brand); }

/* ---------- Intro / About split ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 90px; align-items: center; }
.split--reverse > :first-child { order: 2; }
.collage { position: relative; padding: 0 60px 70px 0; }
.collage__main { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 5; }
.collage__main img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.collage:hover .collage__main img { transform: scale(1.05); }
.collage__small { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; border: 8px solid var(--cream); box-shadow: var(--shadow); }
.section--sand .collage__small { border-color: var(--sand); }
.collage__small img { width: 100%; height: 100%; object-fit: cover; }
.collage__badge {
  position: absolute; left: -28px; top: 40px; z-index: 2;
  background: var(--brand); color: #fff; border-radius: var(--radius); padding: 22px 26px; box-shadow: 0 20px 40px -15px rgba(255,64,27,.7);
  animation: float 6s ease-in-out infinite;
}
.collage__badge strong { display: block; font-family: var(--serif); font-size: 2.6rem; line-height: 1; }
.collage__badge span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.dropcap::first-letter { float: left; font-family: var(--serif); font-size: 4.6rem; line-height: .8; padding: 8px 12px 0 0; color: var(--brand); font-weight: 700; }
.peaks { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 34px; }
.peaks li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: var(--ink); }
.peaks .icon { color: var(--brand); width: 16px; height: 16px; }
.signature { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 90px; border-radius: var(--radius); overflow: hidden; background: var(--ink); color: #fff; box-shadow: var(--shadow); }
.stat { padding: 40px 30px; position: relative; text-align: center; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; background: rgba(255,255,255,.12); }
.stat strong { display: block; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: #fff; }
.stat strong sup { font-size: .45em; color: var(--brand); margin-left: 4px; }
.stat span { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: #9fb0c8; }

/* ---------- Room cards ---------- */
.rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.room-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.room-card:hover { transform: translateY(-10px); box-shadow: var(--shadow); }
.room-card__media { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.room-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.room-card:hover .room-card__media img { transform: scale(1.08); }
.room-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,12,22,.6), transparent 50%); }
.room-card__price { position: absolute; z-index: 2; left: 20px; bottom: 18px; color: #fff; font-size: 13px; }
.room-card__price strong { font-family: var(--serif); font-size: 1.9rem; color: #fff; margin-right: 4px; }
.room-card__tag { position: absolute; z-index: 2; top: 18px; right: 18px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.room-card__body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.room-card__body h3 { font-size: 1.6rem; margin-bottom: 10px; }
.room-card__body h3 a:hover { color: var(--brand); }
.room-card__body p { color: var(--muted); font-size: 15px; }
.room-features { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 24px; font-size: 13.5px; color: var(--ink); }
.room-features li { display: inline-flex; align-items: center; gap: 7px; }
.room-features .icon { color: var(--brand); width: 17px; height: 17px; }
.room-card__actions { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 22px; border-top: 1px dashed var(--line); }

/* Rooms list page (wide cards) */
.room-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 40px; transition: box-shadow .5s var(--ease); }
.room-row:hover { box-shadow: var(--shadow); }
.room-row:nth-child(even) .room-row__media { order: 2; }
.room-row__media { position: relative; min-height: 440px; overflow: hidden; }
.room-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.room-row:hover .room-row__media img { transform: scale(1.06); }
.room-row__body { padding: 56px; display: flex; flex-direction: column; justify-content: center; }
.room-row__num { font-family: var(--serif); font-size: 4.5rem; line-height: 1; color: var(--sand); font-weight: 700; margin-bottom: -10px; }
.room-row__body h2 { font-size: 2.4rem; }
.room-row__price { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.room-row__price strong { font-family: var(--serif); font-size: 2rem; color: var(--brand); margin-right: 4px; }
.room-row__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Parallax band ---------- */
.parallax { position: relative; padding: 170px 0; color: #fff; text-align: center; overflow: hidden; background: var(--ink); }
.parallax__bg { position: absolute; inset: -20% 0; background-size: cover; background-position: center; will-change: transform; }
.parallax::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,12,22,.55), rgba(6,12,22,.7)); }
.parallax .container { position: relative; z-index: 2; }
.parallax h2 { color: #fff; font-size: clamp(2.4rem, 5.5vw, 4.6rem); max-width: 900px; margin: 0 auto 22px; }
.parallax h2 em { color: var(--sun); font-weight: 600; }
.parallax p { max-width: 620px; margin: 0 auto 36px; color: rgba(255,255,255,.85); font-size: 1.1rem; }
.play-ring { width: 86px; height: 86px; margin: 0 auto 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); position: relative; }
.play-ring::before, .play-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand); animation: ripple 2.6s ease-out infinite; }
.play-ring::after { animation-delay: 1.3s; }
.play-ring .icon { width: 36px; height: 36px; color: #fff; }
@keyframes ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }

/* ---------- Services ---------- */
.services-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.service {
  position: relative; padding: 34px 24px 30px; border-radius: var(--radius); background: #fff; text-align: center;
  border: 1px solid var(--line); overflow: hidden; isolation: isolate;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), color .4s, border-color .4s;
}
.service::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, var(--brand), var(--brand-deep)); transform: translateY(101%); transition: transform .55s var(--ease); }
.service:hover { transform: translateY(-8px); box-shadow: 0 22px 40px -18px rgba(255,64,27,.55); border-color: transparent; color: #fff; }
.service:hover::before { transform: none; }
.service__icon { width: 70px; height: 70px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); transition: background .4s, color .4s, transform .6s var(--ease); }
.service__icon .icon { width: 32px; height: 32px; stroke-width: 1.6; }
.service:hover .service__icon { background: rgba(255,255,255,.18); color: #fff; transform: rotateY(360deg); }
.service h3 { font-family: var(--sans); font-size: 15.5px; font-weight: 600; line-height: 1.45; margin: 0; transition: color .4s; }
.service:hover h3 { color: #fff; }
.service p { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; transition: color .4s; }
.service:hover p { color: rgba(255,255,255,.88); }
.section--dark .service { background: var(--ink-2); border-color: rgba(255,255,255,.06); }
.section--dark .service h3 { color: #fff; }
.section--dark .service__icon { background: rgba(255,64,27,.14); }

/* Feature checklist (Why choose us) */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 26px; margin: 30px 0 38px; }
.features li { display: flex; align-items: center; gap: 14px; font-weight: 500; color: var(--ink); font-size: 15px; }
.features .tick { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex-shrink: 0; }
.features .tick .icon { width: 20px; height: 20px; }
.section--dark .features li { color: #e3e8f0; }
.section--dark .features .tick { background: rgba(255,64,27,.15); }

/* ---------- Experiences ---------- */
.exp-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 22px; }
.exp { position: relative; border-radius: var(--radius); overflow: hidden; color: #fff; display: flex; align-items: flex-end; padding: 30px; isolation: isolate; }
.exp:first-child { grid-row: span 2; }
.exp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.exp::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,12,22,.88) 0%, rgba(6,12,22,.15) 60%); transition: background .5s; }
.exp:hover img { transform: scale(1.08); }
.exp:hover::after { background: linear-gradient(to top, rgba(255,64,27,.85) 0%, rgba(6,12,22,.2) 70%); }
.exp h3 { color: #fff; font-size: 1.6rem; margin-bottom: 6px; }
.exp p { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.85); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .5s; }
.exp:hover p, .exp:focus-within p { max-height: 160px; opacity: 1; }
.exp__tag { display: inline-block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--sun); margin-bottom: 8px; }

/* ---------- Trekking partner band ---------- */
.trek-band { display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; overflow: hidden; background: var(--ink); color: #c9d2e0; box-shadow: var(--shadow); }
.trek-band__media { position: relative; min-height: 420px; }
.trek-band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trek-band__body { padding: 64px; display: flex; flex-direction: column; justify-content: center; }
.trek-band__body h2 { color: #fff; }

/* ---------- Gallery ---------- */
.masonry { columns: 4 260px; column-gap: 18px; }
.masonry__item { break-inside: avoid; margin-bottom: 18px; position: relative; border-radius: 14px; overflow: hidden; display: block; cursor: zoom-in; background: var(--sand); }
.masonry__item img { width: 100%; transition: transform 1s var(--ease), filter .5s; }
.masonry__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,12,22,.75), transparent 55%); opacity: 0; transition: opacity .45s; }
.masonry__item:hover img { transform: scale(1.07); }
.masonry__item:hover::after { opacity: 1; }
.masonry__cap { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; color: #fff; font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 10px; opacity: 0; transform: translateY(12px); transition: all .45s var(--ease); }
.masonry__cap .icon { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--brand); }
.masonry__item:hover .masonry__cap { opacity: 1; transform: none; }
.masonry__item.is-hidden { display: none; }

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 46px; }
.filter { padding: 10px 22px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 13.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); transition: all .3s; }
.filter span { color: var(--muted); font-weight: 500; margin-left: 4px; transition: color .3s; }
.filter:hover { border-color: var(--brand); color: var(--brand); }
.filter.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.filter.is-active span { color: rgba(255,255,255,.8); }

/* Home gallery mosaic */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 16px; }
.mosaic .masonry__item { margin: 0; height: 100%; }
.mosaic .masonry__item img { height: 100%; object-fit: cover; }
.mosaic .m-wide { grid-column: span 2; }
.mosaic .m-tall { grid-row: span 2; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(5,10,18,.95); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .35s; }
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__figure { margin: 0; max-width: 92vw; max-height: 86vh; text-align: center; }
.lightbox__img { max-width: 92vw; max-height: 78vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.6); margin: 0 auto; transition: opacity .3s, transform .4s var(--ease); }
.lightbox__img.is-loading { opacity: 0; transform: scale(.97); }
.lightbox__cap { color: #c9d2e0; margin-top: 16px; font-size: 14px; }
.lightbox__cap b { color: var(--brand); font-weight: 600; margin-right: 10px; }
.lightbox__btn { position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .3s, border-color .3s; }
.lightbox__btn:hover { background: var(--brand); border-color: var(--brand); }
.lightbox__btn .icon { width: 24px; height: 24px; }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 24px; top: 50%; transform: translateY(-50%); }

/* ---------- Testimonials ---------- */
.testi { position: relative; overflow: hidden; }
.testi__bg { position: absolute; inset: 0; opacity: .14; background-size: cover; background-position: center; }
.testi .container { position: relative; }
.testi-slider { max-width: 900px; margin: 0 auto; text-align: center; position: relative; }
.testi-track { display: grid; }
.testi-slide { grid-area: 1 / 1; opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s var(--ease); pointer-events: none; }
.testi-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.testi-quote-mark { width: 64px; height: 64px; margin: 0 auto 26px; color: var(--brand); }
.testi-slide blockquote { margin: 0 0 34px; font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.55; color: #fff; font-style: italic; }
.testi-person { display: inline-flex; align-items: center; gap: 16px; text-align: left; }
.avatar { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand), var(--sun)); box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.testi-person strong { display: block; color: #fff; font-size: 1.05rem; text-transform: capitalize; }
.testi-person span { font-size: 13px; color: #9fb0c8; letter-spacing: .1em; text-transform: uppercase; }
.testi-nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 46px; }
.round-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; transition: all .3s; }
.round-btn:hover { background: var(--brand); border-color: var(--brand); }
.testi-dots { display: flex; gap: 8px; }
.testi-dots button { width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0; background: rgba(255,255,255,.3); cursor: pointer; transition: all .4s var(--ease); }
.testi-dots button.is-active { width: 34px; background: var(--brand); }

/* Testimonial cards (testimonials page) */
.testi-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.testi-card { background: #fff; border-radius: var(--radius); padding: 40px 34px; box-shadow: var(--shadow-sm); position: relative; display: flex; flex-direction: column; transition: transform .5s var(--ease), box-shadow .5s; }
.testi-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.testi-card .quote-icon { position: absolute; top: 28px; right: 30px; width: 54px; height: 54px; color: var(--brand-soft); }
.testi-card p { font-size: 15.5px; color: var(--text); font-style: italic; flex: 1; position: relative; }
.testi-card .testi-person strong { color: var(--ink); }
.testi-card .testi-person span { color: var(--muted); }
.testi-card .avatar { box-shadow: none; }

/* ---------- Partners ---------- */
.partners { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; }
.partner { display: grid; place-items: center; height: 76px; padding: 0 26px; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s; }
.partner:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.partner img { max-height: 44px; width: auto; }
.partner--fb { color: #1877f2; gap: 10px; display: flex; font-weight: 600; }
.partner--fb .icon { width: 30px; height: 30px; }

/* ---------- CTA band ---------- */
.cta { position: relative; border-radius: 28px; overflow: hidden; padding: 80px 70px; color: #fff; display: grid; grid-template-columns: 1.4fr auto; gap: 40px; align-items: center; background: var(--ink); isolation: isolate; }
.cta__bg { position: absolute; inset: 0; z-index: -2; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(12,22,38,.95) 30%, rgba(255,64,27,.55)); }
.cta h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 12px; }
.cta p { margin: 0; color: rgba(255,255,255,.85); max-width: 560px; }
.cta__actions { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Room detail ---------- */
.room-detail { display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: start; }
.room-gallery__main { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 11; background: var(--sand); box-shadow: var(--shadow-sm); }
.room-gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; cursor: zoom-in; }
.room-gallery__main .round-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(12,22,38,.45); backdrop-filter: blur(6px); z-index: 2; }
.room-gallery__main .round-btn:hover { background: var(--brand); }
.room-gallery__main .prev { left: 18px; }
.room-gallery__main .next { right: 18px; }
.room-gallery__count { position: absolute; z-index: 2; left: 18px; bottom: 18px; background: rgba(12,22,38,.6); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 13px; backdrop-filter: blur(6px); }
.room-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.room-gallery__thumbs button { padding: 0; border: 3px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background: none; transition: border-color .3s, opacity .3s; opacity: .65; }
.room-gallery__thumbs button.is-active, .room-gallery__thumbs button:hover { border-color: var(--brand); opacity: 1; }
.room-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.room-info { margin-top: 48px; }
.room-info__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.room-info__head h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0; }
.price-tag { text-align: right; }
.price-tag strong { font-family: var(--serif); font-size: 2.4rem; color: var(--brand); line-height: 1; }
.price-tag span { display: block; font-size: 13px; color: var(--muted); }
.quick-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 36px; }
.quick-facts li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.quick-facts .icon { color: var(--brand); width: 24px; height: 24px; }
.quick-facts strong { color: var(--ink); font-size: 15px; }
.room-info h3 { font-size: 1.6rem; margin-top: 40px; }
.amenities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 30px; }
.amenities li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--line); font-weight: 500; color: var(--ink); }
.amenities .icon { color: var(--brand); width: 22px; height: 22px; }
.policies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.policies div { background: var(--sand); border-radius: 14px; padding: 20px; font-size: 14px; }
.policies strong { display: block; color: var(--ink); margin-bottom: 4px; }

.sidebar { position: sticky; top: 100px; display: grid; gap: 24px; }
.book-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.book-card__head { background: var(--ink); color: #fff; padding: 26px 30px; display: flex; justify-content: space-between; align-items: center; }
.book-card__head h3 { color: #fff; margin: 0; font-size: 1.4rem; }
.book-card__head .price-tag strong { font-size: 1.8rem; color: var(--sun); }
.book-card__head .price-tag span { color: #9fb0c8; }
.book-card form { padding: 28px 30px 30px; }
.help-card { background: linear-gradient(150deg, var(--brand), var(--brand-deep)); color: #fff; border-radius: var(--radius); padding: 30px; }
.help-card h3 { color: #fff; font-size: 1.35rem; }
.help-card a { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 1.1rem; margin-top: 8px; }
.help-card p { color: rgba(255,255,255,.88); font-size: 14.5px; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.form-field label .req { color: var(--brand); }
.input-wrap { position: relative; }
.input-wrap .icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--brand); width: 18px; height: 18px; pointer-events: none; }
.input-wrap textarea ~ .icon { top: 22px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 14px 16px 14px 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--cream);
  font-size: 15px; color: var(--ink); outline: none; transition: border-color .3s, box-shadow .3s, background .3s;
  -webkit-appearance: none; appearance: none;
}
.form-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ff401b' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; cursor: pointer; }
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(255,64,27,.12); }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: #e11d48; }
.form-field .err { font-size: 12.5px; color: #e11d48; min-height: 0; }
.form-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; display: flex; gap: 8px; align-items: flex-start; }
.form-note .icon { color: var(--brand); margin-top: 3px; width: 16px; height: 16px; }
.estimate { display: none; justify-content: space-between; align-items: center; padding: 14px 18px; border-radius: 12px; background: var(--brand-soft); color: var(--ink); font-size: 14px; margin-top: 16px; }
.estimate.is-visible { display: flex; }
.estimate strong { font-family: var(--serif); font-size: 1.35rem; color: var(--brand); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .35s; }
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(5,10,18,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal__dialog { position: relative; width: min(920px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #fff; border-radius: 24px; display: grid; grid-template-columns: 330px 1fr; box-shadow: 0 40px 100px -20px rgba(0,0,0,.6); transform: translateY(30px) scale(.97); transition: transform .5s var(--ease); }
.modal.is-open .modal__dialog { transform: none; }
.modal__aside { position: relative; color: #fff; padding: 40px 32px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; min-height: 100%; }
.modal__aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.modal__aside::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(12,22,38,.95), rgba(12,22,38,.25)); }
.modal__aside h3 { color: #fff; font-size: 1.9rem; }
.modal__aside ul { display: grid; gap: 10px; font-size: 14px; margin-top: 12px; }
.modal__aside li { display: flex; gap: 10px; align-items: center; }
.modal__aside .icon { color: var(--sun); width: 18px; height: 18px; }
.modal__body { padding: 42px 40px 36px; }
.modal__body h2 { font-size: 2rem; margin-bottom: 6px; }
.modal__body > p { color: var(--muted); font-size: 14.5px; margin-bottom: 26px; }
.modal__close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sand); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .3s, color .3s, transform .4s var(--ease); }
.modal__close:hover { background: var(--brand); color: #fff; transform: rotate(90deg); }

/* Success state */
.success { display: none; text-align: center; padding: 10px 0; }
.success.is-visible { display: block; animation: pop .6s var(--ease); }
.success__icon { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 22px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.success__icon .icon { width: 40px; height: 40px; stroke-width: 2.4; }
.success pre { text-align: left; white-space: pre-wrap; font-family: var(--sans); font-size: 13.5px; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin: 18px 0 22px; color: var(--ink); max-height: 220px; overflow: auto; }
.success__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn--wa { --bg: #25d366; }
.btn--wa:hover { box-shadow: 0 14px 30px -10px rgba(37,211,102,.6); }
@keyframes pop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }

/* ---------- Contact ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: -80px; position: relative; z-index: 3; }
.contact-card { background: #fff; border-radius: var(--radius); padding: 34px 28px; box-shadow: var(--shadow); text-align: center; transition: transform .5s var(--ease); }
.contact-card:hover { transform: translateY(-8px); }
.contact-card .service__icon { margin-bottom: 18px; }
.contact-card h3 { font-family: var(--sans); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.contact-card p, .contact-card a { color: var(--ink); font-weight: 500; margin: 0; display: block; }
.contact-card a:hover { color: var(--brand); }
.contact-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.contact-wrap__form { padding: 56px; }
.map { position: relative; min-height: 100%; background: var(--sand); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(1.1); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #9fb0c8; position: relative; overflow: hidden; font-size: 15px; }
.footer__mountains { position: absolute; left: 0; right: 0; top: 0; height: 120px; color: var(--cream); }
.footer__top { position: relative; padding: 170px 0 70px; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: 50px; }
.footer h4 { font-family: var(--sans); color: #fff; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 26px; position: relative; padding-bottom: 14px; }
.footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--brand); }
.footer__logo img { height: 60px; width: auto; margin-bottom: 22px; }
.footer__links li + li { margin-top: 10px; }
.footer__links a { display: inline-flex; align-items: center; gap: 8px; transition: color .3s, transform .3s var(--ease); }
.footer__links a .icon { width: 14px; height: 14px; color: var(--brand); }
.footer__links a:hover { color: #fff; transform: translateX(5px); }
.footer__contact li { display: flex; gap: 14px; margin-bottom: 18px; }
.footer__contact .icon { color: var(--brand); margin-top: 4px; }
.footer__contact a:hover { color: #fff; }
.footer__contact small { display: block; color: #6f819c; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.footer__partners { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.footer__partners a, .footer__partners span { background: #fff; border-radius: 10px; height: 52px; padding: 0 14px; display: grid; place-items: center; transition: transform .3s var(--ease); }
.footer__partners a:hover { transform: translateY(-3px); }
.footer__partners img { max-height: 30px; width: auto; }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); color: #fff; transition: all .3s; }
.socials a:hover { background: var(--brand); border-color: var(--brand); transform: translateY(-3px); }
.socials .icon { width: 18px; height: 18px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 26px 0; font-size: 13.5px; }
.footer__bottom .container { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer__bottom a:hover { color: #fff; }

/* ---------- Floating buttons ---------- */
.fab-wa { position: fixed; right: 24px; bottom: 24px; z-index: 70; width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(37,211,102,.7); transition: transform .4s var(--ease); }
.fab-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: ripple 2.4s ease-out infinite; }
.fab-wa:hover { transform: scale(1.08); }
.fab-wa .icon { width: 30px; height: 30px; }
.to-top { position: fixed; right: 32px; bottom: 100px; z-index: 70; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(20px); pointer-events: none; transition: all .4s var(--ease); box-shadow: var(--shadow-sm); }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--brand); }
.mobile-book { display: none; }

/* ---------- Reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal--left { transform: translateX(-50px); }
.reveal--right { transform: translateX(50px); }
.reveal--zoom { transform: scale(.92); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Preloader */
.preloader { position: fixed; inset: 0; z-index: 200; background: var(--ink); display: grid; place-items: center; transition: opacity .7s, visibility .7s; }
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__inner { text-align: center; }
.preloader img { height: 64px; width: auto; margin: 0 auto 22px; animation: breathe 1.6s ease-in-out infinite; }
.preloader__bar { width: 160px; height: 2px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; margin: 0 auto; }
.preloader__bar::after { content: ""; display: block; height: 100%; width: 40%; background: var(--brand); animation: load 1.1s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .6; transform: scale(.96); } }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .nav a { padding: 10px 10px; font-size: 12.5px; }
  .header-call { display: none; }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .room-detail { grid-template-columns: 1fr 360px; gap: 40px; }
}

@media (max-width: 980px) {
  :root { --header-h: 76px; }
  .section { padding: 90px 0; }
  .nav, .header-actions .btn { display: none; }
  .burger { display: grid; }
  .split { grid-template-columns: 1fr; gap: 60px; }
  .split--reverse > :first-child { order: 0; }
  .collage { max-width: 560px; margin: 0 auto; width: 100%; }
  .collage__badge { left: 0; }
  .rooms-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3)::before { display: none; }
  .booking-bar { grid-template-columns: 1fr 1fr; gap: 6px; }
  .booking-bar .field { border-right: 0; border-bottom: 1px solid var(--line); }
  .booking-bar .btn { grid-column: 1 / -1; padding: 16px; margin-top: 6px; }
  .exp-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 340px 260px 260px; }
  .exp:first-child { grid-column: span 2; grid-row: auto; }
  .exp p { max-height: 160px; opacity: 1; }
  .trek-band, .contact-wrap { grid-template-columns: 1fr; }
  .trek-band__media { min-height: 300px; }
  .map { min-height: 380px; }
  .room-row, .room-row:nth-child(even) { grid-template-columns: 1fr; }
  .room-row:nth-child(even) .room-row__media { order: 0; }
  .room-row__media { min-height: 320px; }
  .room-detail { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .testi-cards { grid-template-columns: 1fr 1fr; }
  .contact-cards { grid-template-columns: 1fr 1fr; }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .cta { grid-template-columns: 1fr; padding: 60px 40px; }
  .cta__actions { flex-direction: row; flex-wrap: wrap; }
  .modal__dialog { grid-template-columns: 1fr; }
  .modal__aside { display: none; }
  .hero__dots { right: 20px; }
  .section-head--split { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 760px) {
  .topbar { display: none; }
  .header { top: 0; }
  body { font-size: 15.5px; }
  .container { padding: 0 16px; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 44px; }
  .hero { min-height: 640px; }
  .hero__content { padding-bottom: 120px; }
  .hero__dots { display: none; }
  .altitude-badge { padding: 14px 18px; }
  .altitude-badge strong { font-size: 1.5rem; }
  .booking-bar-wrap { margin-top: -40px; }
  .booking-bar { grid-template-columns: 1fr; padding: 10px; }
  .booking-bar .field { padding: 10px 14px; }
  .rooms-grid, .testi-cards, .contact-cards, .features, .amenities, .policies, .form-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .service { padding: 26px 14px; }
  .stats { margin-top: 60px; }
  .stat { padding: 30px 14px; }
  .exp-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 300px; }
  .exp:first-child { grid-column: auto; }
  .trek-band__body, .contact-wrap__form, .room-row__body { padding: 36px 24px; }
  .collage { padding: 0 30px 50px 0; }
  .collage__badge { padding: 16px 18px; top: 20px; }
  .collage__badge strong { font-size: 2rem; }
  .page-hero { min-height: 420px; padding: 150px 0 60px; }
  .quick-facts { grid-template-columns: 1fr 1fr; }
  .masonry { columns: 2 140px; column-gap: 12px; }
  .masonry__item { margin-bottom: 12px; }
  .mosaic { grid-auto-rows: 160px; gap: 10px; }
  .mosaic .m-tall { grid-row: span 1; }
  .cta { padding: 48px 24px; border-radius: 20px; }
  .footer__top { grid-template-columns: 1fr; gap: 40px; padding-top: 140px; }
  .modal { padding: 0; align-items: end; }
  .modal__dialog { border-radius: 24px 24px 0 0; max-height: 92vh; }
  .modal__body { padding: 36px 20px 28px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 24px; transform: none; }
  .lightbox__prev { left: calc(50% - 70px); }
  .lightbox__next { right: calc(50% - 70px); }
  .fab-wa { bottom: 84px; right: 16px; width: 54px; height: 54px; }
  .to-top { display: none; }
  .mobile-book { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(12,22,38,.94); backdrop-filter: blur(10px); gap: 10px; }
  .mobile-book .btn { flex: 1; padding: 14px 10px; }
  .footer__bottom { padding-bottom: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Nepal touches — prayer flags, Namaste, Himalayan ridgelines
   ========================================================================== */
.prayer-flags { position: relative; height: 46px; overflow: hidden; pointer-events: none; }
.prayer-flags svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.prayer-flags .flag { transform-origin: top center; animation: flutter 3.2s ease-in-out infinite; }
.prayer-flags .flag:nth-child(odd) { animation-delay: -1.1s; }
.prayer-flags .flag:nth-child(3n) { animation-delay: -2s; }
@keyframes flutter { 0%, 100% { transform: skewX(0deg) rotate(0deg); } 50% { transform: skewX(6deg) rotate(2deg); } }
.prayer-flags--hero { position: absolute; left: 0; right: 0; top: 118px; z-index: 2; opacity: .9; }
.prayer-flags--top { margin-bottom: -10px; }

.namaste { display: inline-flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.namaste__dev { font-family: "Tiro Devanagari Hindi", "Noto Serif Devanagari", serif; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--brand); line-height: 1; }
.namaste__en { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.section--dark .namaste__en { color: #9fb0c8; }
.hero .namaste__dev { color: var(--sun); text-shadow: 0 4px 20px rgba(0,0,0,.35); }
.hero .namaste__en { color: rgba(255,255,255,.8); }

.ridge { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; line-height: 0; pointer-events: none; }
.ridge svg { width: 100%; height: clamp(60px, 9vw, 140px); display: block; }

.peak-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 36px; padding: 26px 0 0; font-family: var(--serif); font-style: italic; color: #9fb0c8; font-size: 1.05rem; }
.peak-strip span { display: inline-flex; align-items: center; gap: 10px; }
.peak-strip b { font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: .14em; color: var(--sun); font-weight: 600; }

.mandala { position: absolute; width: 520px; height: 520px; color: var(--brand); opacity: .06; pointer-events: none; animation: spin 120s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.sunrise-text { background: linear-gradient(90deg, var(--sun), var(--brand) 60%, #ff7a45); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.hero__meta { bottom: clamp(90px, 11vw, 170px); }
.altitude-badge { border-radius: var(--radius); border: 1px solid rgba(255,255,255,.15); }
.altitude-badge .icon { width: 30px; height: 30px; color: var(--sun); }
.page-hero .breadcrumb a + .icon, .page-hero .breadcrumb span .icon { margin: 0 2px; }
.room-gallery__links { display: none; }
@media (max-width: 760px) { .hero__meta { display: none; } .prayer-flags--hero { top: 78px; } }

/* stats: number span must not inherit the small label style */
.stat strong span { font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
/* grid children must be allowed to shrink (date inputs have a large min-content) */
.form-grid > *, .input-wrap, .form-field input, .form-field select { min-width: 0; }
.namaste { flex-wrap: wrap; row-gap: 6px; }
.dropcap::first-letter { line-height: .72; padding-top: 10px; }

/* ==========================================================================
   Typography — Alegreya Sans
   ========================================================================== */
body { font-size: 18px; line-height: 1.7; letter-spacing: .005em; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; }
.heading { font-size: clamp(2.5rem, 5vw, 4.2rem); line-height: 1; }
.heading em, .hero__title em, .page-hero h1 em, .parallax h2 em, .cta h2 em, .panorama h2 em { font-weight: 300; font-style: italic; letter-spacing: -.01em; }
.hero__title { font-size: clamp(3.4rem, 8.6vw, 7.8rem); line-height: .92; letter-spacing: -.035em; font-weight: 900; }
.page-hero h1 { font-size: clamp(3.2rem, 7.4vw, 6.2rem); font-weight: 900; letter-spacing: -.03em; line-height: .95; }
.parallax h2 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); }
.eyebrow { font-weight: 700; letter-spacing: .26em; font-size: 13.5px; }
.btn { font-weight: 700; letter-spacing: .14em; font-size: 14px; }
.nav a { font-weight: 700; font-size: 14px; letter-spacing: .12em; }
.filter { font-weight: 700; }
.room-card__body h3, .exp h3 { font-size: 1.85rem; }
.room-row__body h2 { font-size: 2.8rem; }
.testi-slide blockquote { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 300; font-style: italic; letter-spacing: -.005em; }
.stat strong, .collage__badge strong, .altitude-badge strong { font-weight: 900; letter-spacing: -.03em; }
.room-card__price strong, .price-tag strong, .room-row__price strong, .estimate strong { font-weight: 900; letter-spacing: -.02em; }
.service h3 { font-size: 17.5px; font-weight: 700; letter-spacing: 0; }
.dropcap::first-letter { font-size: 5.6rem; font-weight: 900; line-height: .78; padding-top: 6px; }
.drawer__nav a { font-size: 1.6rem; font-weight: 800; }
.contact-card h3, .footer h4 { font-weight: 700; }
.peak-strip { font-size: 1.15rem; font-weight: 300; }
.lead { font-size: 1.15rem; }

/* ==========================================================================
   Home v2 — marquee, statement, panorama, room tiles, journey
   ========================================================================== */
.marquee-wrap { overflow: hidden; padding: 34px 0 10px; position: relative; z-index: 4; }
.marquee { background: var(--brand); color: #fff; transform: rotate(-1.6deg); margin: 0 -40px; padding: 16px 0; box-shadow: 0 20px 40px -20px rgba(255,64,27,.6); }
.marquee--alt { background: var(--ink); transform: rotate(1.2deg); margin-top: -46px; position: relative; z-index: -1; opacity: .95; }
.marquee__track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.marquee--alt .marquee__track { animation-direction: reverse; animation-duration: 60s; }
.marquee__track span { display: inline-flex; align-items: center; gap: 34px; padding-right: 34px; font-weight: 900; font-size: clamp(1.2rem, 2.2vw, 1.75rem); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.marquee__track span i { font-style: italic; font-weight: 300; text-transform: none; letter-spacing: 0; }
.marquee__track span::after { content: ""; width: 14px; height: 14px; background: var(--sun); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes marquee { to { transform: translateX(-50%); } }

.statement { font-size: clamp(1.75rem, 3.7vw, 3.35rem); font-weight: 800; line-height: 1.22; letter-spacing: -.025em; color: var(--ink); max-width: 1180px; margin: 0 0 80px; }
.statement em { font-style: italic; font-weight: 300; color: var(--brand); }
.statement .w { opacity: .14; transition: opacity .35s ease; }
.statement .w.on { opacity: 1; }
.no-js .statement .w { opacity: 1; }
.pill-img { display: inline-block; width: 2.3em; height: 1.05em; border-radius: 999px; overflow: hidden; vertical-align: middle; margin: 0 .12em; position: relative; top: -.08em; box-shadow: 0 8px 20px -8px rgba(12,22,38,.5); }
.pill-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); transition: transform 1.2s var(--ease); }
.pill-img.on img { transform: scale(1); }

.intro-grid { display: grid; grid-template-columns: .9fr 1.1fr .8fr; gap: 50px; align-items: center; }
.intro-img { border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); position: relative; }
.intro-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.intro-img:hover img { transform: scale(1.06); }
.intro-img--tall { aspect-ratio: 3 / 4.3; }
.intro-img--sq { aspect-ratio: 1; }
.intro-side { display: grid; gap: 22px; }
.intro-badge { background: var(--ink); color: #fff; border-radius: 22px; padding: 26px; position: relative; overflow: hidden; }
.intro-badge strong { display: block; font-size: 3.4rem; line-height: 1; font-weight: 900; letter-spacing: -.04em; }
.intro-badge strong sup { color: var(--brand); font-size: .4em; letter-spacing: 0; }
.intro-badge span { color: #9fb0c8; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.intro-badge svg { position: absolute; right: -10px; bottom: -6px; width: 140px; height: 70px; color: var(--sun); opacity: .25; }

.panorama { position: relative; height: 88vh; min-height: 560px; max-height: 900px; overflow: hidden; color: #fff; display: flex; align-items: flex-end; background: var(--ink); }
.panorama__img { position: absolute; inset: 0; }
.panorama__img img { height: 100%; width: 135%; max-width: none; object-fit: cover; animation: pan 38s ease-in-out infinite alternate; }
@keyframes pan { from { transform: translateX(0); } to { transform: translateX(-25.9%); } }
.panorama::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,12,22,.15) 0%, rgba(6,12,22,.1) 45%, rgba(6,12,22,.85) 100%); }
.panorama .container { position: relative; z-index: 2; padding-bottom: 80px; }
.panorama h2 { color: #fff; font-size: clamp(3rem, 8vw, 7.4rem); line-height: .92; font-weight: 900; letter-spacing: -.04em; max-width: 1000px; margin-bottom: 26px; }
.panorama h2 em { color: var(--sun); }
.panorama__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.panorama__row p { max-width: 520px; color: rgba(255,255,255,.85); margin: 0; font-size: 1.15rem; }
.peak-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.peak-card { padding: 14px 20px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); min-width: 140px; }
.peak-card b { display: block; font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
.peak-card span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--sun); font-weight: 700; }

.room-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.room-tile { position: relative; aspect-ratio: 3 / 4.15; border-radius: 26px; overflow: hidden; color: #fff; display: flex; align-items: flex-end; isolation: isolate; box-shadow: var(--shadow-sm); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.room-tile:nth-child(2) { transform: translateY(40px); }
.room-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.room-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,12,22,.92) 0%, rgba(6,12,22,.35) 45%, rgba(6,12,22,0) 70%); transition: background .6s; }
.room-tile:hover { box-shadow: var(--shadow); }
.room-tile:hover img { transform: scale(1.08); }
.room-tile:hover::after { background: linear-gradient(to top, rgba(6,12,22,.95) 0%, rgba(6,12,22,.55) 60%, rgba(6,12,22,.15) 100%); }
.room-tile__top { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.room-tile__price { padding: 8px 16px; border-radius: 999px; background: rgba(12,22,38,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 14px; border: 1px solid rgba(255,255,255,.18); }
.room-tile__price b { font-size: 1.2rem; font-weight: 900; }
.room-tile__num { font-size: 4.4rem; font-weight: 900; line-height: .8; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.7); }
.room-tile__body { padding: 30px; width: 100%; }
.room-tile h3 { color: #fff; font-size: 2.2rem; margin-bottom: 6px; }
.room-tile .room-features { color: rgba(255,255,255,.9); margin-bottom: 0; }
.room-tile .room-features .icon { color: var(--sun); }
.room-tile__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease), opacity .5s; opacity: 0; }
.room-tile__more > div { overflow: hidden; }
.room-tile__more p { color: rgba(255,255,255,.82); font-size: 15.5px; margin: 14px 0 18px; }
.room-tile__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.room-tile:hover .room-tile__more, .room-tile:focus-within .room-tile__more { grid-template-rows: 1fr; opacity: 1; }
@media (hover: none) { .room-tile__more { grid-template-rows: 1fr; opacity: 1; } }

.journey { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: stretch; }
.journey__steps { position: relative; align-self: center; }
.journey__rail { position: absolute; left: 33px; top: 34px; bottom: 34px; width: 2px; background: repeating-linear-gradient(to bottom, var(--line) 0 8px, transparent 8px 15px); }
.section--dark .journey__rail { background: repeating-linear-gradient(to bottom, rgba(255,255,255,.18) 0 8px, transparent 8px 15px); }
.journey__rail > span { position: absolute; inset: 0; background: linear-gradient(var(--sun), var(--brand)); transform-origin: top; transform: scaleY(0); transition: transform 2.8s cubic-bezier(.6,.1,.3,1) .3s; border-radius: 2px; }
.journey.is-in .journey__rail > span { transform: scaleY(1); }
.journey__traveler { position: absolute; left: -7px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--brand); box-shadow: 0 0 0 8px rgba(255,64,27,.18); opacity: 0; }
.journey.is-in .journey__traveler { animation: travel 5.5s ease-in-out 3.2s infinite; }
@keyframes travel { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 16px); opacity: 0; } }
.journey__step { display: grid; grid-template-columns: 68px 1fr; gap: 24px; position: relative; padding-bottom: 40px; }
.journey__step:last-child { padding-bottom: 0; }
.journey__icon { width: 68px; height: 68px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: grid; place-items: center; color: var(--brand); position: relative; z-index: 2; }
.section--dark .journey__icon { background: var(--ink-2); border-color: rgba(255,255,255,.12); }
.journey__icon .icon { width: 28px; height: 28px; }
.journey.is-in .journey__icon { animation: stepOn .7s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes stepOn { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 12px 26px -8px rgba(255,64,27,.65); } }
.journey__step:last-child .journey__icon::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--brand); opacity: 0; }
.journey.is-in .journey__step:last-child .journey__icon::after { animation: ripple 2.2s ease-out 3s infinite; }
.journey__text { opacity: 0; transform: translateX(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.journey.is-in .journey__text { opacity: 1; transform: none; }
.journey__meta { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.section--dark .journey__meta { background: rgba(255,64,27,.15); }
.journey__text h3 { font-size: 1.55rem; margin-bottom: 4px; }
.journey__text p { margin: 0; color: var(--muted); font-size: 16.5px; }
.section--dark .journey__text p { color: #a9b5c8; }
.journey__map { position: relative; border-radius: 28px; overflow: hidden; min-height: 560px; box-shadow: var(--shadow); background: var(--sand); }
.journey__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.journey__card { position: absolute; left: 20px; bottom: 20px; right: 20px; max-width: 420px; background: rgba(12,22,38,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; border-radius: 20px; padding: 18px 20px; display: flex; gap: 16px; align-items: center; box-shadow: 0 20px 40px -15px rgba(0,0,0,.5); }
.journey__card img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.journey__card strong { display: block; font-size: 1.15rem; }
.journey__card span { font-size: 14px; color: #9fb0c8; }
.journey__card .btn { margin-left: auto; flex-shrink: 0; }
.map-pulse { position: absolute; top: 18px; right: 18px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: var(--ink); box-shadow: var(--shadow-sm); }
.map-pulse i { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: live 1.8s infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* Taller, richer page heroes */
.page-hero { min-height: 640px; }
.page-hero--room { min-height: 88vh; max-height: 980px; }
.page-hero--room::after { background: linear-gradient(180deg, rgba(6,12,22,.5) 0%, rgba(6,12,22,.2) 40%, rgba(6,12,22,.88) 100%); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; padding-bottom: 30px; }
.hero-facts li { display: inline-flex; gap: 10px; align-items: center; padding: 11px 20px; border-radius: 999px; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 500; font-size: 16px; }
.hero-facts .icon { color: var(--sun); }
.hero-facts li.price { background: var(--brand); border-color: var(--brand); font-weight: 800; }
.hero-facts li.price .icon { color: #fff; }

@media (max-width: 1080px) {
  .intro-grid { grid-template-columns: 1fr 1fr; }
  .intro-side { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .journey { grid-template-columns: 1fr; gap: 50px; }
  .journey__map { min-height: 440px; }
  .room-tiles { grid-template-columns: 1fr 1fr; }
  .room-tile:nth-child(2) { transform: none; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .intro-grid, .intro-side { grid-template-columns: 1fr; }
  .intro-img--tall { aspect-ratio: 4 / 3.4; }
  .statement { margin-bottom: 50px; }
  .room-tiles { grid-template-columns: 1fr; }
  .room-tile { aspect-ratio: 4 / 4.6; }
  .panorama { height: 78vh; }
  .panorama__img img { width: 260%; animation-name: panm; }
  @keyframes panm { from { transform: translateX(0); } to { transform: translateX(-61%); } }
  .peak-card { min-width: 0; flex: 1 1 40%; }
  .journey__step { grid-template-columns: 56px 1fr; gap: 18px; }
  .journey__icon { width: 56px; height: 56px; }
  .journey__rail { left: 27px; }
  .journey__card { flex-wrap: wrap; }
  .journey__card .btn { margin-left: 0; width: 100%; }
  .page-hero--room { min-height: 640px; }
  .hero-facts li { font-size: 14.5px; padding: 9px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .statement .w { opacity: 1; }
  .journey__text { opacity: 1; transform: none; }
}

/* ==========================================================================
   Animated Himalayan sunrise hero
   ========================================================================== */
.hero--scene { background: #060b1a; height: 100vh; min-height: 720px; max-height: none; }
.hero--scene::after { background: linear-gradient(90deg, rgba(6,11,26,.55) 0%, rgba(6,11,26,.15) 55%, transparent 75%); }
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene__svg { width: 100%; height: 100%; display: block; }
.scene .layer { transition: transform .9s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.scene__night { animation: nightFade 5.5s ease-in-out .2s forwards; }
@keyframes nightFade { to { opacity: 0; } }
.scene__stars circle { animation: twinkle var(--tw) ease-in-out var(--td) infinite alternate, starsOut 6s ease-in 1s forwards; }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }
@keyframes starsOut { to { fill-opacity: 0; } }
.scene__sun { transform: translateY(330px); animation: sunrise 6.5s cubic-bezier(.25,.6,.3,1) .4s forwards; }
@keyframes sunrise { to { transform: translateY(0); } }
.scene__rays { transform-origin: 1150px 330px; opacity: .22; animation: spin 90s linear infinite; }
.scene__alpenglow { opacity: 0; mix-blend-mode: soft-light; animation: alpen 5s ease-in-out 3s forwards; }
@keyframes alpen { to { opacity: .95; } }
.cloud { animation: drift 60s ease-in-out infinite alternate; }
.cloud.c2 { animation-duration: 80s; animation-direction: alternate-reverse; }
.cloud.c3 { animation-duration: 50s; opacity: .8; }
@keyframes drift { from { transform: translateX(-80px); } to { transform: translateX(120px); } }
.scene__clouds { opacity: .9; }
.bird { transform: translate(-60px, var(--by)) scale(var(--bs)); animation: fly 26s linear var(--bd) infinite; }
@keyframes fly { 0% { transform: translate(-60px, var(--by)) scale(var(--bs)); } 50% { transform: translate(760px, calc(var(--by) - 40px)) scale(var(--bs)); } 100% { transform: translate(1520px, var(--by)) scale(var(--bs)); } }
.scene__glider { transform: translate(1500px, 420px); animation: glide 34s ease-in-out 2s infinite; }
@keyframes glide { 0% { transform: translate(1500px, 360px) rotate(-6deg); } 50% { transform: translate(700px, 470px) rotate(4deg); } 100% { transform: translate(-120px, 560px) rotate(-4deg); } }
.scene__flags .flag { transform-box: fill-box; transform-origin: top center; animation: flutter 2.8s ease-in-out infinite; }
.scene__flags .flag:nth-child(odd) { animation-delay: -1.2s; }
.scene__flags .flag:nth-child(3n) { animation-delay: -.6s; }

.hero-in { opacity: 0; transform: translateY(30px); animation: heroIn 1.1s var(--ease) var(--d, 0s) forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
.hero--scene .hero__title { text-shadow: 0 8px 40px rgba(6,11,26,.5); }
.hero--scene .hero__title em { color: var(--sun); }
.hero--scene .hero__text { max-width: 600px; }
.hero--scene .hero__content { padding-bottom: 220px; }

/* ==========================================================================
   Scroll progress bar in prayer-flag colours
   ========================================================================== */
.scroll-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 55; height: 5px; pointer-events: none; transform: translateY(calc(42px + var(--header-h))); transition: transform .4s var(--ease); }
.scroll-progress span { display: block; height: 100%;
  background: linear-gradient(90deg, #1f5fbf 0 20%, #f4f1e8 20% 40%, #d62d20 40% 60%, #1e8a4c 60% 80%, #f5c518 80% 100%);
  clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); transition: clip-path .25s ease-out; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.header.is-scrolled ~ .scroll-progress, .scroll-progress.is-compact { transform: translateY(72px); }
@media (max-width: 760px) { .scroll-progress { transform: translateY(var(--header-h)); } .scroll-progress.is-compact { transform: translateY(72px); } }

/* ==========================================================================
   Dhaka-textile inspired band (Nepali divider)
   ========================================================================== */
.dhaka { height: 22px; background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cpath d='M0 11 L11 0 L22 11 L11 22Z' fill='%23d62d20'/%3E%3Cpath d='M22 11 L33 0 L44 11 L33 22Z' fill='%23f5c518'/%3E%3Cpath d='M7 11 L11 7 L15 11 L11 15Z' fill='%230c1626'/%3E%3Cpath d='M29 11 L33 7 L37 11 L33 15Z' fill='%231e8a4c'/%3E%3Ccircle cx='22' cy='11' r='2' fill='%23f4f1e8'/%3E%3Ccircle cx='0' cy='11' r='2' fill='%23f4f1e8'/%3E%3Ccircle cx='44' cy='11' r='2' fill='%23f4f1e8'/%3E%3C/svg%3E");
  background-size: 44px 22px; background-repeat: repeat-x; border-top: 3px solid var(--brand); border-bottom: 3px solid var(--sun); position: relative; z-index: 2; }
.dhaka + .footer .footer__mountains { display: none; }
.dhaka + .footer .footer__top { padding-top: 100px; }

@media (max-width: 760px) {
  .hero--scene { min-height: 680px; }
  .hero--scene .hero__content { padding-bottom: 170px; justify-content: flex-end; }
  .hero--scene::after { background: linear-gradient(180deg, rgba(6,11,26,.1) 30%, rgba(6,11,26,.7) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .scene__night, .scene__stars circle { opacity: 0; }
  .scene__sun { transform: none; }
  .scene__alpenglow { opacity: .95; }
  .hero-in { opacity: 1; transform: none; }
}
.hero--scene { max-height: 1080px; }
/* hero scene tuning */
.hero--scene { background: #0c1626; }
.hero--scene .scene { bottom: clamp(50px, 7vw, 110px); }
.hero--scene .hero__content { padding-top: 150px; padding-bottom: 200px; }
.hero--scene .hero__title { font-size: clamp(3rem, 6.2vw, 6.2rem); line-height: .95; margin-bottom: 22px; }
.scene__rays { opacity: .1; }
.hero--scene .hero__meta { bottom: clamp(120px, 13vw, 200px); }
@media (max-width: 760px) {
  .hero--scene .hero__content { padding-top: 120px; padding-bottom: 130px; }
  .hero--scene .hero__title { font-size: clamp(2.6rem, 11vw, 3.6rem); }
}
.intro-badge strong span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
/* Phones/tablets portrait: frame the scene on the sun + fishtail peak instead of the centre */
@media (max-width: 900px) and (orientation: portrait), (max-width: 600px) {
  .hero--scene .scene__svg { position: absolute; top: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 1440 / 900; max-width: none; transform: translateX(-72%); }
  .scene__flags { display: none; }
  .hero--scene .hero__content { justify-content: flex-end; }
  .hero--scene::after { background: linear-gradient(180deg, rgba(6,11,26,0) 25%, rgba(6,11,26,.55) 60%, rgba(6,11,26,.85) 100%); }
}
/* progress bar: small repeating prayer-flag blocks instead of five wide bands */
.scroll-progress { height: 6px; }
.scroll-progress span {
  background: repeating-linear-gradient(90deg,
    #1f5fbf 0 22px, transparent 22px 24px,
    #f4f1e8 24px 46px, transparent 46px 48px,
    #d62d20 48px 70px, transparent 70px 72px,
    #1e8a4c 72px 94px, transparent 94px 96px,
    #f5c518 96px 118px, transparent 118px 120px);
  box-shadow: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}

/* ==========================================================================
   v3 — realistic scene, birds, paragliders
   ========================================================================== */
.scene__sun { transform: translateY(300px); animation: sunrise 7s cubic-bezier(.22,.6,.3,1) .4s forwards; }
.scene__horizon { opacity: 0; animation: alpen 5s ease 2.5s forwards; }
.scene__alpenglow { mix-blend-mode: normal; animation: alpenGlow 6s ease-in-out 3s forwards; }
@keyframes alpenGlow { to { opacity: .55; } }
.hero--scene .hero__content { justify-content: center; padding-top: 190px; padding-bottom: 170px; }
.hero--scene .hero__title { font-size: clamp(2.8rem, 5.6vw, 5.6rem); }
.hero--scene .hero__meta { bottom: clamp(110px, 12vw, 180px); }

.flock { animation: flock 48s linear infinite; }
.flock.f1 { --fy: 250px; --fy2: 200px; }
.flock.f2 { --fy: 330px; --fy2: 300px; animation-duration: 62s; animation-delay: -30s; }
.flock.f3 { --fy: 190px; --fy2: 240px; animation-duration: 75s; animation-delay: -12s; }
@keyframes flock { 0% { transform: translate(-120px, var(--fy)); } 50% { transform: translate(720px, var(--fy2)); } 100% { transform: translate(1560px, var(--fy)); } }

.glider { animation: glide var(--gd, 60s) linear var(--gdel, 0s) infinite; }
.glider__sway { animation: sway 5s ease-in-out infinite; transform-origin: 0 30px; }
.glider.g1 { --gd: 70s; --gdel: -18s; --s: 1;   --y0: 300px; --y1: 380px; --y2: 470px; }
.glider.g2 { --gd: 90s; --gdel: -55s; --s: .7; --y0: 250px; --y1: 300px; --y2: 360px; }
.glider.g3 { --gd: 110s; --gdel: -8s; --s: .5; --y0: 340px; --y1: 360px; --y2: 420px; animation-direction: reverse; }
.glider.g4 { --gd: 130s; --gdel: -90s; --s: .4; --y0: 220px; --y1: 280px; --y2: 330px; }
.glider.g5 { --gd: 100s; --gdel: -40s; --s: .32; --y0: 400px; --y1: 430px; --y2: 470px; animation-direction: reverse; }
@keyframes glide {
  0% { transform: translate(1520px, var(--y0)) scale(var(--s)); }
  50% { transform: translate(720px, var(--y1)) scale(var(--s)); }
  100% { transform: translate(-100px, var(--y2)) scale(var(--s)); }
}
@keyframes sway { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(6px); } }

.hero-gliders { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hero-gliders .glider.g2 { --y0: 120px; --y1: 170px; --y2: 210px; --s: .9; --gd: 60s; --gdel: -20s; }
.hero-gliders .glider.g3 { --y0: 220px; --y1: 200px; --y2: 260px; --s: .55; --gd: 80s; --gdel: -50s; }
.hero-gliders .flock.f2 { --fy: 160px; --fy2: 120px; }
.page-hero .container { z-index: 3; }

@media (max-width: 900px) and (orientation: portrait), (max-width: 600px) {
  .hero--scene .scene__svg { transform: translateX(-70%); }
  .hero--scene .hero__content { justify-content: flex-end; padding-top: 120px; padding-bottom: 150px; }
}

/* ==========================================================================
   Illustrated map
   ========================================================================== */
.map-card { position: relative; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.map { display: block; width: 100%; height: auto; }
.map__label { font: 800 15px var(--sans); fill: #0c1626; }
.map__small { font: 600 11.5px var(--sans); fill: #5d6577; letter-spacing: .04em; }
.map__peaklabel { font: italic 600 12px var(--sans); fill: #6c7896; }
.map__water { font: italic 700 17px var(--sans); fill: #fff; letter-spacing: .06em; }
.map__ico { font-size: 13px; fill: #fff; }
.map__hname { font: 800 15px var(--sans); fill: #fff; }
.map__hsub { font: 600 11.5px var(--sans); fill: #f6b343; }
.map__road-base { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.map__road { fill: none; stroke: var(--brand); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.journey.is-in .map__road, .contact-wrap.is-in .map__road { animation: drawRoad 3.2s cubic-bezier(.6,.1,.3,1) .6s forwards; }
@keyframes drawRoad { to { stroke-dashoffset: 0; } }
.map__car { opacity: 0; }
.journey.is-in .map__car, .contact-wrap.is-in .map__car { animation: alpen .6s ease 3.6s forwards; }
.map__pulse { fill: rgba(255,64,27,.35); transform-box: fill-box; transform-origin: center; animation: mapPulse 2.4s ease-out infinite; }
.map__pulse--2 { animation-delay: 1.2s; }
@keyframes mapPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.map__hotel > path { transform-box: fill-box; transform-origin: 50% 100%; animation: pinBounce 2.4s var(--ease) infinite; }
@keyframes pinBounce { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-8px); } 90% { transform: translateY(0); } }
.map__poi { cursor: default; transition: transform .3s; transform-box: fill-box; transform-origin: center; }
.map__poi:hover, .map__poi:focus { transform: scale(1.12); outline: none; }
.map__peak { transition: transform .4s var(--ease); transform-box: fill-box; transform-origin: bottom; }
.map__peak:hover { transform: translateY(-4px); }
.map-card__bar { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--ink); color: #fff; flex-wrap: wrap; }
.map-card__bar img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.map-card__bar strong { display: block; font-size: 1.1rem; }
.map-card__bar span { font-size: 14px; color: #9fb0c8; }
.map-card__bar > div { flex: 1; min-width: 160px; }
.map-card__bar .btn--outline { --fg: #fff; border-color: rgba(255,255,255,.45); }
.map-card__bar .btn--outline:hover { background: #fff; color: var(--ink); }
.journey { align-items: center; }
.contact-wrap .map { min-height: 0; }
.contact-wrap .map-card { border-radius: 0; box-shadow: none; height: 100%; justify-content: space-between; background: #e6ecdc; }
.contact-wrap > .map { display: flex; }

/* ==========================================================================
   Flatpickr — Himalayan theme
   ========================================================================== */
.flatpickr-calendar { font-family: var(--sans); border-radius: 20px; border: 0; box-shadow: 0 30px 70px -20px rgba(12,22,38,.45); padding: 10px; width: auto !important; }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { display: none; }
.flatpickr-months { padding: 6px 4px 10px; }
.flatpickr-months .flatpickr-month { height: 44px; color: var(--ink); }
.flatpickr-current-month { font-size: 1.15rem; font-weight: 800; padding-top: 8px; }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 800; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { top: 14px; padding: 8px; border-radius: 50%; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--brand); }
span.flatpickr-weekday { color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.flatpickr-day { border-radius: 12px; font-weight: 500; color: var(--ink); height: 40px; line-height: 40px; max-width: 40px; margin: 1px 0; }
.flatpickr-day:hover { background: var(--brand-soft); border-color: transparent; }
.flatpickr-day.today { border-color: var(--sun); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 8px 18px -6px rgba(255,64,27,.6); }
.flatpickr-day.inRange { background: var(--brand-soft); border-color: var(--brand-soft); box-shadow: -5px 0 0 var(--brand-soft), 5px 0 0 var(--brand-soft); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #c3c7d0; }
.fp-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 10px 4px; border-top: 1px dashed var(--line); margin-top: 8px; font-size: 14px; color: var(--muted); }
.fp-foot b { color: var(--brand); font-size: 1.05rem; }
.fp-foot span::before { content: "🏔 "; }
.form-field input.flatpickr-input[readonly] { cursor: pointer; background-color: var(--cream); }

/* progress bar — wider flag blocks */
.scroll-progress span {
  background: repeating-linear-gradient(90deg,
    #1f5fbf 0 40px, transparent 40px 43px,
    #f4f1e8 43px 83px, transparent 83px 86px,
    #d62d20 86px 126px, transparent 126px 129px,
    #1e8a4c 129px 169px, transparent 169px 172px,
    #f5c518 172px 212px, transparent 212px 215px);
}
@media (max-width: 760px) { .map-card__bar .btn { flex: 1; } }

/* ==========================================================================
   v3.1 — living foreground: pines, rhododendron, grass, wind gusts
   ========================================================================== */
.foreground { position: absolute; left: 0; right: 0; bottom: clamp(30px, 5vw, 90px); height: clamp(220px, 24vw, 360px); z-index: 1; pointer-events: none; }
.foreground svg { width: 100%; height: 100%; display: block; }
.grass { transform-box: fill-box; transform-origin: 50% 100%; animation: gust 7s ease-in-out var(--wd, 0s) infinite; }
.sway-bush { animation: gustBush 7s ease-in-out var(--wd, 0s) infinite; }
.sway-tree { animation: gustTree 7s ease-in-out var(--wd, 0s) infinite; }
@keyframes gust { 0%, 100% { transform: rotate(0deg); } 14% { transform: rotate(4deg); } 28% { transform: rotate(11deg); } 36% { transform: rotate(6deg); } 46% { transform: rotate(13deg); } 62% { transform: rotate(3deg); } 78% { transform: rotate(-2deg); } }
@keyframes gustBush { 0%, 100% { transform: rotate(0deg) skewX(0deg); } 28% { transform: rotate(2deg) skewX(3deg); } 46% { transform: rotate(3deg) skewX(4deg); } 70% { transform: rotate(-.5deg) skewX(-1deg); } }
@keyframes gustTree { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(1.6deg); } 46% { transform: rotate(2.4deg); } 72% { transform: rotate(-.6deg); } }
.wind { stroke-dasharray: 140 1000; stroke-dashoffset: 1140; opacity: 0; animation: windline 7s ease-in-out var(--wn, 0s) infinite; }
@keyframes windline { 0% { stroke-dashoffset: 1140; opacity: 0; transform: translateX(0); } 20% { opacity: 1; } 70% { opacity: .8; } 100% { stroke-dashoffset: 0; opacity: 0; transform: translateX(1100px); } }
.scene__flags .flag { animation-duration: 1.6s; }
.flock.f4 { animation: flockNear 30s linear -6s infinite; }
@keyframes flockNear { 0% { transform: translate(-200px, 150px) scale(1.9); } 50% { transform: translate(700px, 110px) scale(1.9); } 100% { transform: translate(1600px, 140px) scale(1.9); } }
.glider__sway { animation-duration: 4.2s; }
@media (prefers-reduced-motion: reduce) { .grass, .sway-bush, .sway-tree, .wind, .flock, .glider { animation: none !important; } }

/* ==========================================================================
   v4 — real Annapurna photo with animated dawn
   ========================================================================== */
.scene--photo .scene__photo { position: absolute; inset: -3%; }
.scene--photo .scene__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; animation: kenburns 30s ease-out forwards; }
.scene__nightsky { position: absolute; inset: 0; background: linear-gradient(180deg, #040814 0%, #0a1430 55%, #161b3a 100%); mix-blend-mode: multiply; animation: nightFade 6s ease-in-out .3s forwards; }
.scene__grade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(48,36,104,.55) 0%, rgba(150,70,120,.28) 32%, rgba(255,150,90,.22) 55%, rgba(12,18,40,.45) 100%); mix-blend-mode: soft-light; }
.scene--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,14,34,.35) 0%, rgba(10,14,34,0) 30%, rgba(10,14,34,0) 60%, rgba(10,14,34,.55) 100%); pointer-events: none; }
.scene__sunglow { position: absolute; inset: 0; opacity: 0; transform: translateY(14%);
  background: radial-gradient(circle at 74% 26%, rgba(255,246,214,1) 0, rgba(255,226,160,.9) 2.6%, rgba(255,190,110,.55) 7%, rgba(255,140,80,.25) 18%, rgba(255,110,70,0) 42%);
  mix-blend-mode: screen; animation: sunUp 8s cubic-bezier(.22,.6,.3,1) .6s forwards; }
@keyframes sunUp { to { opacity: 1; transform: translateY(0); } }
.scene--photo .scene__svg { position: absolute; inset: 0; z-index: 2; }
.scene--photo .scene__stars circle { animation: twinkle var(--tw) ease-in-out var(--td) infinite alternate, starsOut 5s ease-in .8s forwards; }
.hero--scene .scene { bottom: 0; }
.hero--scene .foreground { z-index: 2; }
.hero--scene .hero__content { z-index: 3; }
.hero--scene .hero__meta { z-index: 4; }
@media (max-width: 900px) and (orientation: portrait), (max-width: 600px) {
  .scene--photo .scene__photo img { object-position: 62% 40%; }
  .scene--photo .scene__svg { left: 0; width: 100%; transform: none; aspect-ratio: auto; }
  .scene__sunglow { background: radial-gradient(circle at 70% 22%, rgba(255,246,214,1) 0, rgba(255,226,160,.9) 4%, rgba(255,190,110,.5) 11%, rgba(255,140,80,.2) 26%, rgba(255,110,70,0) 50%); }
}
@media (prefers-reduced-motion: reduce) { .scene__nightsky { opacity: 0; } .scene__sunglow { opacity: 1; transform: none; } }
.hero--scene .foreground { bottom: clamp(14px, 3vw, 48px); }
.contact-wrap .map-card svg.map { flex: 1 1 auto; height: 100%; min-height: 380px; }
.map-card__bar > div { flex: 1 1 calc(100% - 70px); }
.map-card__bar .btn { flex: 1 1 0; white-space: nowrap; }

/* ==========================================================================
   v5 — natural wind: individual rhythms, petals, mist, flags
   ========================================================================== */
.wind, .winds { display: none; }
.grass { animation: breeze var(--wdur, 7s) cubic-bezier(.45,.05,.55,.95) var(--wd, 0s) infinite; }
@keyframes breeze {
  0%   { transform: rotate(calc(var(--amp, 1) * 1deg)); }
  12%  { transform: rotate(calc(var(--amp, 1) * 4deg)); }
  24%  { transform: rotate(calc(var(--amp, 1) * 9deg)); }
  31%  { transform: rotate(calc(var(--amp, 1) * 6.5deg)); }
  40%  { transform: rotate(calc(var(--amp, 1) * 11deg)); }
  52%  { transform: rotate(calc(var(--amp, 1) * 5deg)); }
  66%  { transform: rotate(calc(var(--amp, 1) * 2.5deg)); }
  80%  { transform: rotate(calc(var(--amp, 1) * -1.5deg)); }
  100% { transform: rotate(calc(var(--amp, 1) * 1deg)); }
}
.sway-bush { animation-duration: 8.4s; animation-timing-function: cubic-bezier(.45,.05,.55,.95); }
.sway-tree { animation-duration: 9.6s; animation-timing-function: cubic-bezier(.45,.05,.55,.95); }
.scene__flags .flag { transform-box: fill-box; transform-origin: 50% 0; animation: flagWave var(--fd, 1.8s) ease-in-out var(--fdl, 0s) infinite; }
@keyframes flagWave {
  0%, 100% { transform: skewY(0deg) scaleX(1) rotate(0deg); }
  25% { transform: skewY(7deg) scaleX(.9) rotate(4deg); }
  50% { transform: skewY(-3deg) scaleX(1) rotate(9deg); }
  75% { transform: skewY(5deg) scaleX(.94) rotate(3deg); }
}
.mist { opacity: 0; animation: mistDrift var(--md, 50s) ease-in-out var(--mdl, 0s) infinite alternate; }
@keyframes mistDrift {
  0%   { transform: translateX(-140px); opacity: calc(var(--mo, .15) * .4); }
  50%  { opacity: var(--mo, .15); }
  100% { transform: translateX(220px); opacity: calc(var(--mo, .15) * .6); }
}
.scene__petals { pointer-events: none; }
@media (max-width: 760px) { .scene__petals g:nth-child(n+11) { display: none; } }
@media (prefers-reduced-motion: reduce) { .scene__petals, .mist { display: none; } .scene__flags .flag { animation: none; } }

/* v6 — foreground headroom (no clipped tree tops) + sky kept below the menu */
.hero--scene .foreground { height: clamp(340px, 38vw, 570px); bottom: clamp(0px, 1.5vw, 24px); }
.flock.f1 { --fy: 330px; --fy2: 300px; }
.flock.f2 { --fy: 390px; --fy2: 360px; }
.flock.f3 { --fy: 300px; --fy2: 330px; }
@keyframes flockNear { 0% { transform: translate(-200px, 300px) scale(1.7); } 50% { transform: translate(700px, 270px) scale(1.7); } 100% { transform: translate(1600px, 290px) scale(1.7); } }
.glider.g1 { --s: 1.15; --y0: 380px; --y1: 430px; --y2: 500px; }
.glider.g2 { --s: .62;  --y0: 320px; --y1: 350px; --y2: 400px; }
.glider.g3 { --s: .48;  --y0: 360px; --y1: 380px; --y2: 430px; }
.glider.g4 { --s: .36;  --y0: 300px; --y1: 320px; --y2: 350px; }
.glider.g5 { --s: .3;   --y0: 420px; --y1: 440px; --y2: 470px; }
.glider__sway { transform-origin: 0 0; animation: bank 9s ease-in-out infinite; }
@keyframes bank { 0%, 100% { transform: rotate(-6deg) translateY(0); } 30% { transform: rotate(4deg) translateY(5px); } 55% { transform: rotate(8deg) translateY(2px); } 80% { transform: rotate(-2deg) translateY(-3px); } }
.hero-gliders .glider.g2 { --y0: 220px; --y1: 250px; --y2: 280px; --s: .8; }
.hero-gliders .glider.g3 { --y0: 290px; --y1: 270px; --y2: 310px; --s: .5; }
.hero-gliders .flock.f2 { --fy: 240px; --fy2: 215px; }
/* birds v2 — formations drift and tilt as a group */
.flock__tilt { animation: flockTilt 14s ease-in-out infinite; transform-origin: 0 0; }
@keyframes flockTilt { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-12px); } }
.flock.f1 { animation-duration: 58s; }
.flock.f2 { animation-duration: 66s; animation-delay: -34s; }
.flock.f3 { animation-duration: 80s; animation-delay: -14s; }

/* ==========================================================================
   Namaste lady icon (SVG drawn inline, animated with CSS)
   ========================================================================== */
.namaste { align-items: center; }
.namaste__icon { position: relative; width: 58px; height: 58px; flex-shrink: 0; display: inline-grid; place-items: center; }
.namaste__icon::before, .namaste__icon::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(246,179,67,.7); animation: nlRing 3s ease-out infinite; }
.namaste__icon::after { animation-delay: 1.5s; }
@keyframes nlRing { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.namaste-lady { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 10px 26px -10px rgba(246,162,58,.8), 0 0 0 3px rgba(255,255,255,.85); }
.hero .namaste__icon, .page-hero .namaste__icon { width: 66px; height: 66px; }
.nl-head { transform-box: view-box; transform-origin: 40px 52px; animation: nlBow 4.5s ease-in-out infinite; }
.nl-hands { transform-box: view-box; transform-origin: 40px 70px; animation: nlHands 4.5s ease-in-out infinite; }
.nl-braid { transform-box: view-box; transform-origin: 48px 30px; animation: nlBow 4.5s ease-in-out infinite; }
@keyframes nlBow { 0%, 22%, 78%, 100% { transform: translateY(0) rotate(0deg) scaleY(1); } 40%, 58% { transform: translateY(2.6px) rotate(-2deg) scaleY(.96); } }
@keyframes nlHands { 0%, 22%, 78%, 100% { transform: translateY(0); } 40%, 58% { transform: translateY(-1.6px); } }
.namaste__icon:hover .nl-head, .namaste__icon:hover .nl-braid { animation-duration: 1.6s; }
@media (max-width: 760px) { .namaste__icon, .hero .namaste__icon { width: 50px; height: 50px; } }
@media (prefers-reduced-motion: reduce) { .nl-head, .nl-hands, .nl-braid, .namaste__icon::before, .namaste__icon::after { animation: none; } }

/* Namaste v2 — one-line art (replaces the cartoon badge) */
.namaste__icon { width: 54px; height: 64px; color: var(--brand); }
.namaste__icon::before, .namaste__icon::after { display: none; }
.hero .namaste__icon, .page-hero .namaste__icon, .section--dark .namaste__icon, .cta .namaste__icon { color: var(--sun); }
.hero .namaste__icon { width: 62px; height: 74px; }
.namaste-line { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 2px 8px rgba(0,0,0,.18)); }
.namaste-line path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nlDraw 1.1s cubic-bezier(.6,.1,.3,1) forwards; animation-delay: calc(.35s + var(--i) * .12s); }
.namaste-line .nl-dot { opacity: 0; animation: nlFade .4s ease forwards 1.9s; }
@keyframes nlDraw { to { stroke-dashoffset: 0; } }
@keyframes nlFade { to { opacity: 1; } }
.namaste-line .nl-head { transform-box: view-box; transform-origin: 30px 40px; animation: nlBow2 5s ease-in-out 2.4s infinite; }
.namaste-line .nl-body { transform-box: view-box; transform-origin: 47px 60px; }
@keyframes nlBow2 { 0%, 25%, 75%, 100% { transform: rotate(0deg); } 42%, 58% { transform: rotate(9deg) translate(1px, 1px); } }
.namaste__icon:hover .nl-head { animation-duration: 2s; }
@media (max-width: 760px) { .namaste__icon, .hero .namaste__icon { width: 46px; height: 56px; } }
@media (prefers-reduced-motion: reduce) { .namaste-line path { stroke-dashoffset: 0; animation: none; } .namaste-line .nl-dot { opacity: 1; animation: none; } .namaste-line .nl-head { animation: none; } }
/* Namaste v3 — front-facing, smaller */
.namaste__icon { width: 38px; height: 54px; }
.hero .namaste__icon { width: 44px; height: 62px; }
.namaste-line--front .nl-head { transform-origin: 30px 33px; animation: nlNod 5s ease-in-out 2.4s infinite; }
.namaste-line--front .nl-body path:nth-last-child(-n+4) { transform-box: view-box; transform-origin: 30px 58px; }
@keyframes nlNod { 0%, 25%, 75%, 100% { transform: translateY(0) scaleY(1); } 42%, 58% { transform: translateY(1.6px) scaleY(.95); } }
@media (max-width: 760px) { .namaste__icon, .hero .namaste__icon { width: 34px; height: 48px; } }

/* ==========================================================================
   Real map v2 — Leaflet, Google-Maps-style pins and popups
   ========================================================================== */
.lmap-wrap { position: relative; }
.lmap { height: 540px; width: 100%; background: #e9ecef; z-index: 0; font-family: var(--sans); }
.lmap__fallback { display: flex; align-items: center; justify-content: center; gap: 10px; height: 100%; color: var(--ink); font-weight: 700; }
.leaflet-container { font-family: var(--sans); }
.leaflet-control-attribution { font-size: 10.5px; background: rgba(255,255,255,.8) !important; }
.leaflet-bar a { width: 38px !important; height: 38px !important; line-height: 38px !important; color: var(--ink) !important; font-size: 18px; }
.leaflet-bar { border: 0 !important; box-shadow: var(--shadow-sm) !important; border-radius: 12px !important; overflow: hidden; }
.mpin-wrap { background: none; border: 0; }
.mpin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; border: 2.5px solid #fff;
  box-shadow: 0 6px 14px -4px rgba(12,22,38,.55); transition: transform .25s var(--ease); background: #5f6b80; }
.mpin .icon { width: 17px; height: 17px; }
.mpin:hover { transform: scale(1.15); }
.mpin--view { background: #f59e0b; } .mpin--lake { background: #1f8fd6; } .mpin--city { background: #0c1626; }
.mpin--temple { background: #b4232f; } .mpin--nature { background: #1e8a4c; } .mpin--air { background: #6d4ad1; }
.mpin--hotel { position: relative; width: 46px; height: 56px; border: 0; background: none; box-shadow: none; display: block; }
.mpin--hotel .mpin__head { position: absolute; left: 0; top: 0; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--brand); border: 3px solid #fff; box-shadow: 0 10px 22px -6px rgba(255,64,27,.7); }
.mpin--hotel .mpin__head .icon { transform: rotate(45deg); width: 20px; height: 20px; color: #fff; }
.mpin__pulse { position: absolute; left: 50%; bottom: -4px; width: 18px; height: 8px; margin-left: -9px; border-radius: 50%; background: rgba(255,64,27,.45); animation: mpPulse 2s ease-out infinite; }
@keyframes mpPulse { from { transform: scale(1); opacity: 1; } to { transform: scale(4); opacity: 0; } }
.mpin__label { position: absolute; left: 54px; top: 10px; white-space: nowrap; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 8px; box-shadow: var(--shadow-sm); }
.leaflet-popup-content-wrapper { border-radius: 16px; box-shadow: 0 18px 40px -14px rgba(12,22,38,.45); padding: 0; }
.leaflet-popup-content { margin: 14px 16px; }
.mpop strong { display: block; font-size: 16px; color: var(--ink); margin: 4px 0 2px; }
.mpop p { margin: 0 0 6px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.mpop a { font-weight: 800; color: var(--brand) !important; font-size: 13.5px; }
.mpop__cat { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: #fff; background: #5f6b80; }
.mpop__cat--hotel { background: var(--brand); } .mpop__cat--view { background: #f59e0b; } .mpop__cat--lake { background: #1f8fd6; } .mpop__cat--city { background: #0c1626; }
.mpop__cat--temple { background: #b4232f; } .mpop__cat--nature { background: #1e8a4c; } .mpop__cat--air { background: #6d4ad1; }
.lmap-chips { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 500; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.lmap-chips::-webkit-scrollbar { display: none; }
.lmap-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 0; background: #fff; color: var(--ink);
  font: 700 13px var(--sans); box-shadow: 0 4px 12px -4px rgba(12,22,38,.35); cursor: pointer; transition: transform .2s, background .2s, color .2s; }
.lmap-chip .icon { width: 15px; height: 15px; color: var(--brand); }
.lmap-chip:hover { transform: translateY(-2px); }
.lmap-chip.is-active { background: var(--ink); color: #fff; }
.lmap-chip.is-active .icon { color: var(--sun); }
.contact-wrap .lmap { height: 100%; min-height: 520px; }
.contact-wrap .lmap-wrap { flex: 1; display: flex; flex-direction: column; }
@media (max-width: 760px) { .lmap { height: 420px; } .mpin__label { display: none; } }

/* Namaste icon: exactly the height of the नमस्ते text */
.namaste__dev { display: inline-block; }
.namaste__icon, .hero .namaste__icon { font-size: clamp(1.8rem, 3vw, 2.4rem); height: 1.12em; width: .78em; }
@media (max-width: 760px) { .namaste__icon, .hero .namaste__icon { font-size: 1.8rem; height: 1.12em; width: .78em; } }
/* map: lush satellite look + layer switch */
.tiles-sat { filter: saturate(1.25) brightness(1.06) contrast(1.04); }
.lmap-switch { position: absolute; left: 12px; bottom: 26px; z-index: 500; display: flex; background: #fff; border-radius: 12px; padding: 4px; box-shadow: var(--shadow-sm); }
.lmap-switch button { border: 0; background: none; padding: 7px 14px; border-radius: 9px; font: 700 13px var(--sans); color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.lmap-switch button.is-active { background: #1e8a4c; color: #fff; }
.mpin__label { background: rgba(12,22,38,.88); }
/* styled MapLibre map */
.lmap .maplibregl-canvas { outline: none; }
.lmap-switch { display: none; }
.maplibregl-popup-content { border-radius: 16px; padding: 14px 16px; box-shadow: 0 18px 40px -14px rgba(12,22,38,.45); font-family: var(--sans); }
.maplibregl-popup-tip { border-top-color: #fff !important; }
.maplibregl-ctrl-group { border-radius: 12px !important; box-shadow: var(--shadow-sm) !important; overflow: hidden; }
.maplibregl-ctrl-group button { width: 36px; height: 36px; }
.mpin-wrap { cursor: pointer; }
.lmap { background: #e3efd3; }

/* ==========================================================================
   Clean inner-page banner (breadcrumb hero)
   ========================================================================== */
.page-hero { min-height: 460px; padding: 190px 0 80px; align-items: flex-end; }
.page-hero--room { min-height: 560px; max-height: none; }
.page-hero::after { background: linear-gradient(180deg, rgba(8,14,28,.62) 0%, rgba(8,14,28,.42) 45%, rgba(8,14,28,.78) 100%); }
.page-hero__bg img { animation: none; transform: scale(1.02); }
.page-hero h1 { font-size: clamp(2.8rem, 5.6vw, 4.6rem); margin-bottom: 12px; }
.page-hero p { margin-bottom: 0; }
.page-hero .breadcrumb { display: inline-flex; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); margin-bottom: 20px; }
.page-hero .hero-facts { padding-bottom: 0; }
.page-hero + .section, .page-hero + section { position: relative; }
@media (max-width: 760px) { .page-hero { min-height: 380px; padding: 140px 0 56px; } .page-hero--room { min-height: 480px; } }

/* ==========================================================================
   Performance
   ========================================================================== */
/* grass now sways in clumps (≈70 animated groups instead of 557 single blades) */
.grass-g { transform-box: fill-box; transform-origin: 50% 100%; animation: breezeG var(--wdur, 7s) cubic-bezier(.45,.05,.55,.95) var(--wd, 0s) infinite; }
@keyframes breezeG {
  0%, 100% { transform: skewX(calc(var(--amp, 1) * -1deg)); }
  24% { transform: skewX(calc(var(--amp, 1) * -7deg)); }
  31% { transform: skewX(calc(var(--amp, 1) * -5deg)); }
  40% { transform: skewX(calc(var(--amp, 1) * -9deg)); }
  62% { transform: skewX(calc(var(--amp, 1) * -3deg)); }
  80% { transform: skewX(calc(var(--amp, 1) * 1.5deg)); }
}
/* pause everything in the hero when it is off screen / tab hidden */
.hero--scene.is-paused *, .hero--scene.is-paused *::before, .hero--scene.is-paused *::after { animation-play-state: paused !important; }
/* phones: lighter scene, same look */
@media (max-width: 760px) {
  .scene__stars circle:nth-child(n+45) { display: none; }
  .scene__mist { display: none; }
  .scene__petals > g:nth-child(n+8) { display: none; }
  .flock.f3, .glider.g4, .glider.g5 { display: none; }
  .foreground g[filter] { filter: none; }
  .scene--photo .scene__photo img { animation: none; }
}
/* Data-saver / 2G: still sunrise, no motion */
.lite .hero--scene *, .lite .hero--scene *::before, .lite .hero--scene *::after { animation: none !important; transition: none !important; }
.lite .scene__nightsky, .lite .scene__stars, .lite .scene__petals, .lite .scene__mist, .lite .scene__birds { display: none; }
.lite .scene__sunglow { opacity: 1; transform: none; }
.lite .hero-in { opacity: 1; transform: none; }
.lite .namaste-line path { stroke-dashoffset: 0; } .lite .namaste-line .nl-dot { opacity: 1; }

/* ==========================================================================
   Backend version — server forms, notices, "sent" animation, AJAX gallery
   ========================================================================== */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* button while the form is being sent */
.btn.is-sending { pointer-events: none; opacity: .85; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; display: inline-block; animation: spin .8s linear infinite; }

/* notices (errors from the server) */
.site-toasts { position: fixed; z-index: 130; left: 50%; top: 90px; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); display: grid; gap: 10px; }
.site-toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 20px 50px -18px rgba(12,22,38,.5); border-left: 4px solid var(--brand); font-size: 15.5px; animation: toastIn .5s var(--ease); }
.site-toast--success { border-left-color: #1e8a4c; }
.site-toast .icon { color: var(--brand); margin-top: 3px; }
.site-toast--success .icon { color: #1e8a4c; }
.site-toast span { flex: 1; }
.site-toast__x { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 2px; }
.site-toast.is-out { opacity: 0; transform: translateY(-10px); transition: all .4s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* "sent" panel */
.sent { position: relative; text-align: center; padding: 26px 10px 8px; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.sent.is-on { opacity: 1; transform: none; }
.sent__check { width: 96px; height: 96px; margin: 0 auto 18px; display: block; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sent__check circle { stroke: var(--brand); stroke-width: 4; stroke-dasharray: 230; stroke-dashoffset: 230; transform: rotate(-90deg); transform-origin: center; }
.sent__check path { stroke: #1e8a4c; stroke-width: 6; stroke-dasharray: 60; stroke-dashoffset: 60; }
.sent.is-on .sent__check circle { animation: drawStroke .8s var(--ease) .15s forwards; }
.sent.is-on .sent__check path { animation: drawStroke .5s var(--ease) .85s forwards; }
@keyframes drawStroke { to { stroke-dashoffset: 0; } }
.sent__burst { position: absolute; left: 50%; top: 74px; width: 0; height: 0; pointer-events: none; }
.sent__burst i { position: absolute; left: -5px; top: -7px; width: 10px; height: 14px; border-radius: 2px; background: var(--c); opacity: 0; }
.sent.is-on .sent__burst i { animation: confetti 1.4s cubic-bezier(.15,.7,.3,1) calc(.9s + var(--d)) forwards; }
@keyframes confetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 120px)) rotate(var(--r)) scale(1); }
}
.sent h3 { font-size: 1.9rem; margin-bottom: 8px; opacity: 0; transform: translateY(8px); transition: all .6s var(--ease) 1s; }
.sent p { color: var(--muted); max-width: 440px; margin: 0 auto 22px; opacity: 0; transform: translateY(8px); transition: all .6s var(--ease) 1.15s; }
.sent p b { color: var(--brand); }
.sent .sent__again { opacity: 0; transition: opacity .6s 1.35s, background .3s, color .3s; }
.sent.is-on h3, .sent.is-on p, .sent.is-on .sent__again { opacity: 1; transform: none; }
.contact-wrap__form .sent { padding: 40px 10px; }

/* review stars */
.stars { display: inline-block; color: var(--sun); letter-spacing: 3px; font-size: 18px; margin-bottom: 14px; }
.stars i { font-style: normal; color: rgba(255,255,255,.25); }
.testi-card .stars i { color: var(--line); }

/* gallery: skeleton placeholders + load more */
.masonry__item.is-skeleton { height: var(--h, 220px); cursor: default; background: linear-gradient(100deg, #ece4d7 30%, #f7f2ea 50%, #ece4d7 70%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.masonry__item.is-loading img { opacity: 0; }
.masonry__item img { transition: opacity .6s ease, transform 1s var(--ease), filter .5s; }
.gallery-more { text-align: center; margin-top: 34px; }
.gallery-sentinel { height: 1px; }
.gallery-more__end { font-size: 14px; }

/* 404 quick links */
.page-hero .hero-facts a { color: inherit; display: inline-flex; gap: 10px; align-items: center; }
.gallery-more [hidden] { display: none !important; }

/* ==========================================================================
   Mobile fixes
   ========================================================================== */
/* 1. never slide left/right: clip anything wider than the screen (clip keeps sticky elements working) */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
.hero, .page-hero, .marquee-wrap, .panorama, .section, .footer { max-width: 100vw; }
/* 2. no zoom when tapping a form field (iPhone zooms on fields below 16px) */
input, select, textarea, .form-field input, .form-field select, .form-field textarea, .flatpickr-input { font-size: 16px !important; }
@supports (-webkit-touch-callout: none) { input, select, textarea { font-size: max(16px, 1em) !important; } }

/* review stars */
.stars { display: inline-flex; gap: 3px; margin-bottom: 14px; letter-spacing: 0; }
.stars svg { width: 20px; height: 20px; fill: var(--sun); filter: drop-shadow(0 2px 6px rgba(246,179,67,.35)); }
.stars svg.off { fill: rgba(255,255,255,.22); filter: none; }
.testi-card .stars svg.off { fill: var(--line); }
.testi-slide .stars { justify-content: center; display: flex; }
.testi-slide .stars svg { width: 24px; height: 24px; }

/* Booking pop-up on phones: fit the visible screen, × always visible while the form scrolls */
@media (max-width: 980px) {
  .modal { padding: 0; align-items: end; }
  .modal__dialog { display: block; width: 100%; max-height: 94vh; max-height: calc(100dvh - 10px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 22px 22px 0 0; }
  .modal__close { position: sticky; top: 10px; display: grid; margin: 10px 10px -54px auto; z-index: 6; background: #fff; box-shadow: 0 6px 18px -6px rgba(12,22,38,.35); }
  .modal__body { padding: 30px 20px calc(28px + env(safe-area-inset-bottom)); }
  .modal__body > h2 { padding-right: 56px; }
}

/* ==========================================================================
   Phone sizing (buttons + titles). The home hero is left exactly as designed.
   ========================================================================== */
/* buttons never wrap their label onto two lines (that is what made them tall) */
.btn:not(.hero .btn) { white-space: nowrap; line-height: 1.2; }

@media (max-width: 760px) {
  /* lighter, better-proportioned titles */
  h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; }
  .heading { font-size: clamp(2rem, 8.4vw, 2.6rem); line-height: 1.08; }
  .page-hero h1 { font-size: clamp(2.3rem, 10vw, 3.2rem); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; }
  .panorama h2, .parallax h2 { font-size: clamp(2.2rem, 9.4vw, 3rem); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; }
  .statement { font-size: clamp(1.45rem, 6vw, 1.9rem); font-weight: 700; line-height: 1.28; letter-spacing: -.015em; }
  .cta h2 { font-size: clamp(1.8rem, 7.6vw, 2.3rem); }
  .room-row__body h2 { font-size: 2.1rem; }

  /* buttons: same slim height on every phone width */
  .btn:not(.hero .btn) { padding: 13px 22px; font-size: 13px; letter-spacing: .1em; gap: 8px; }
  .btn--sm:not(.hero .btn) { padding: 10px 18px; font-size: 12px; }
}

/* narrow phones (Oppo / Android ~360–393px) */
@media (max-width: 400px) {
  .page-hero h1 { font-size: clamp(2.1rem, 9.6vw, 2.6rem); }
  .btn:not(.hero .btn) { padding: 12px 18px; font-size: 12.5px; letter-spacing: .08em; }
  .mobile-book .btn { padding: 12px 8px; font-size: 12px; letter-spacing: .06em; }
}

/* ==========================================================================
   Home room cards (phones only): dark overlay over the whole photo so white text reads
   ========================================================================== */
@media (max-width: 760px) {
  .room-tile::after, .room-tile:hover::after, .room-tile:focus-within::after {
    background: linear-gradient(to top, rgba(6,12,22,.92) 0%, rgba(6,12,22,.75) 40%, rgba(6,12,22,.6) 70%, rgba(6,12,22,.55) 100%);
  }
  .room-tile h3 { text-shadow: 0 2px 14px rgba(6,12,22,.55); }
  .room-tile .room-features, .room-tile__more p { color: #fff; text-shadow: 0 1px 3px rgba(6,12,22,.6); }
  .room-tile .eyebrow { text-shadow: 0 1px 3px rgba(6,12,22,.6); }
  .room-tile__num { -webkit-text-stroke-color: rgba(255,255,255,.85); }
}

/* Map: keep the place chips / map switch inside the map's own layer,
   so they scroll underneath the fixed header instead of over it */
.lmap-wrap { position: relative; z-index: 0; isolation: isolate; }

/* Floating buttons: WhatsApp on the left, back-to-top on the right (desktop + phones) */
.fab-wa { right: auto; left: 24px; }
.to-top { right: 24px; bottom: 24px; }
@media (max-width: 760px) {
  .fab-wa { right: auto; left: 16px; bottom: 84px; }
  .to-top { display: grid; right: 16px; bottom: 89px; }
}

/* Phones: hero buttons centred + equal size; room card buttons View room (left) / Book (right) */
@media (max-width: 760px) {
  .hero__ctas { justify-content: center; gap: 10px; flex-wrap: nowrap; }
  .hero__ctas .btn { flex: 1 1 0; min-width: 0; max-width: 220px; white-space: nowrap; line-height: 1.2; padding: 13px 10px; font-size: 12px; letter-spacing: .05em; gap: 6px; }
  .hero__ctas .btn .icon { width: 15px; height: 15px; }

  .room-tile__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .room-tile__actions .btn { width: 100%; min-width: 0; padding: 12px 10px; font-size: 12px; letter-spacing: .06em; gap: 6px; }
  .room-tile__actions .btn .icon { width: 15px; height: 15px; }
}
/* very small phones (≤ 340px): stack the hero buttons, still centred */
@media (max-width: 340px) {
  .hero__ctas { flex-direction: column; align-items: center; }
  .hero__ctas .btn { flex: none; width: 100%; max-width: 280px; }
}