/* ==========================================================================
   Luit Homes — design tokens
   Forest green + amber-gold, Fraunces / Work Sans / IBM Plex Mono
   ========================================================================== */

:root {
  --ink: #16261D;        /* deep forest — headers, footer, overlays */
  --pine: #234A34;       /* mid green — buttons, links */
  --pine-light: #3C6B4F;
  --gold: #C9973C;       /* amber accent */
  --gold-light: #E7C36F;
  --terracotta: #B85C38; /* secondary accent, sparingly */
  --cream: #FBF7EE;      /* section background */
  --paper: #FFFFFF;
  --mist: #F0EEE3;       /* muted alt-section background */
  --line: rgba(22, 38, 29, 0.12);
  --text: #1E2A21;
  --text-muted: #5B6A5D;
  --text-on-dark: #F4F1E6;
  --text-on-dark-muted: rgba(244, 241, 230, 0.72);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 20px 45px -20px rgba(22, 38, 29, 0.35);
  --shadow-soft: 0 10px 30px -15px rgba(22, 38, 29, 0.25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); margin: 0; line-height: 1.12; font-weight: 600; }
p { margin: 0; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Focus visibility (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Top bar
   ========================================================================== */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 247, 238, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}

.wordmark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600; color: var(--ink);
}

.wordmark .sun {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--gold-light), var(--gold) 55%, var(--pine) 100%);
  flex-shrink: 0;
}

.wordmark-block { display: flex; align-items: center; gap: 10px; }
.wordmark-logo { object-fit: contain; flex-shrink: 0; }
.wordmark-block .wordmark-logo { width: 40px; height: 40px; }
.wordmark .wordmark-logo { width: 28px; height: 28px; }
.wordmark-text { display: flex; flex-direction: column; line-height: 1.15; }
.wordmark-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); }
.wordmark-tag { font-size: 10.5px; color: var(--text-muted); letter-spacing: 0.02em; }

.topbar nav { display: flex; align-items: center; gap: 26px; }

.topbar nav > a:not(.btn-bookings):not(.btn-staff) {
  font-size: 14.5px; font-weight: 500; color: var(--text);
  position: relative; padding: 4px 0;
}
.topbar nav > a:not(.btn-bookings):not(.btn-staff)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gold); transform: scaleX(0); transition: transform 0.2s ease;
}
.topbar nav > a:not(.btn-bookings):not(.btn-staff):hover::after { transform: scaleX(1); }

.btn-bookings {
  background: var(--ink); color: var(--text-on-dark);
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
  transition: background 0.2s ease;
}
.btn-bookings:hover { background: var(--pine); }

.btn-staff {
  border: 1.5px solid var(--line); color: var(--text);
  padding: 9px 17px; border-radius: 999px; font-size: 14px; font-weight: 500;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-staff:hover { border-color: var(--ink); background: var(--paper); }

@media (max-width: 860px) {
  .topbar nav { gap: 12px; }
  .topbar nav a:not(.btn-bookings):not(.btn-staff) { display: none; }
  .btn-staff { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 48vh; /* 30% shorter than the original 69vh */
  display: flex; align-items: center;
  overflow: hidden;
  padding-top: 76px;
}

.hero-bg { position: absolute; inset: 0; }

.hb-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  animation: hero-crossfade 42s infinite;
}
.hb-img:nth-child(1) { animation-delay: 0s; }
.hb-img:nth-child(2) { animation-delay: 6s; }
.hb-img:nth-child(3) { animation-delay: 12s; }
.hb-img:nth-child(4) { animation-delay: 18s; }
.hb-img:nth-child(5) { animation-delay: 24s; }
.hb-img:nth-child(6) { animation-delay: 30s; }
.hb-img:nth-child(7) { animation-delay: 36s; }
.hb-img.hb-img-solo { opacity: 1; animation: none; }

@keyframes hero-crossfade {
  0% { opacity: 0; }
  3% { opacity: 1; }
  14% { opacity: 1; }
  17% { opacity: 0; }
  100% { opacity: 0; }
}

.hero-scrim {
  position: absolute; inset: 0;
  /* Plain neutral dark fade - no color tint - so it darkens the photo for
     text contrast without discoloring it. (A previous version added an
     amber radial glow here for an older, darker set of hero photos; mixed
     with a brighter image that reads as a dusty yellow-grey wash, so it's
     gone.) */
  background:
    linear-gradient(100deg, rgba(8, 14, 10, 0.82) 15%, rgba(8, 14, 10, 0.42) 50%, rgba(8, 14, 10, 0.08) 75%),
    linear-gradient(0deg, rgba(8, 14, 10, 0.4) 0%, transparent 35%);
}

.hero-content {
  position: relative; z-index: 2;
  max-width: 660px;
  padding: 0 28px;
  margin-top: -40px;
}

.hero-content h1 {
  color: var(--text-on-dark);
  font-size: clamp(38px, 5.4vw, 62px);
  margin-bottom: 18px;
}

.hero-script {
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 29px);
  color: var(--gold-light);
  line-height: 1.3;
  margin: 0 0 18px;
}

.hero-content .lede {
  color: var(--text-on-dark-muted);
  font-size: 17px;
  max-width: 540px;
  margin-bottom: 30px;
}

.btn-hero {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 26px; border-radius: 999px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  background: var(--gold); color: var(--ink);
  border: none; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(201,151,60,0.55); background: var(--gold-light); }

.city-ticker {
  display: flex; align-items: center; gap: 14px;
  background: var(--ink); color: #fff;
  padding: 10px 16px; overflow: hidden;
}
.city-ticker[hidden] { display: none; }
.city-ticker-label {
  flex-shrink: 0; font-weight: 600; font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--gold-light);
}
.city-ticker-viewport { overflow: hidden; flex: 1; min-width: 0; }
.city-ticker-track {
  display: flex; width: max-content;
  animation: city-ticker-scroll 40s linear infinite;
}
.city-ticker-track:hover { animation-play-state: paused; }
.city-ticker-item { white-space: nowrap; font-size: 14px; padding-right: 64px; }
@keyframes city-ticker-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .city-ticker-track { animation: none; }
  .city-ticker-viewport { overflow-x: auto; }
}

.hero-trust {
  list-style: none; display: flex; gap: 12px; flex-wrap: wrap;
  margin: 0; padding: 0;
}
.hero-trust li {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-on-dark-muted); font-size: 13px; line-height: 1.35;
  /* A solid backing behind each badge so the text stays legible no matter
     what's directly behind it in the hero photo (busy/bright photos were
     making this text unreadable in the PWA build). */
  background: rgba(8, 14, 10, 0.55);
  border-radius: 999px;
  padding: 10px 16px;
}
.hero-trust svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--text-on-dark); }
.hero-trust li.is-gold svg { color: var(--gold-light); }
.hero-trust li.is-gold span { color: var(--gold-light); }

@media (max-width: 640px) {
  /* align-items:flex-start (not the desktop default of centered) - with
     the hero shortened to 75vh, centered text was landing low enough to
     collide with the search card that overlaps the hero's bottom edge,
     hiding it. Anchoring to the top keeps it clear of that overlap.
     .hero's own padding-top:76px (set above, for desktop) is dead space
     here too - .topbar is sticky, not fixed, so it already reserves its
     own 76px in normal document flow above .hero; that padding was extra
     on top of that, not compensating for an overlapping header. On a
     shortened 75vh mobile hero that wasted space was enough to push the
     last trust badge down into the search card's overlap zone, hiding
     it - removing it here gives that content room to actually fit. */
  .hero { min-height: 52.5vh; align-items: flex-start; padding-top: 0; } /* 30% shorter than the original 75vh - also the height used by the installed PWA/TWA (phone-width viewport) */
  .hero-content { margin-top: 0; padding-top: 20px; }
  .hero-trust { gap: 10px; }
}

/* ==========================================================================
   Search block — floating card over the hero
   ========================================================================== */

/* -24px, not the original -64px: the hero is now 30% shorter (see .hero
   above), so the same fixed overlap ate a bigger share of the remaining
   height and started covering the last hero-trust badge (verified by
   screenshot - "Instant Confirmation / quick & hassle-free" was being
   clipped by this card at normal desktop widths). */
#search { position: relative; z-index: 3; margin-top: -24px; }

.search-block {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 10px 10px 22px;
}

.search-tabs {
  display: flex; gap: 6px;
  padding: 10px 10px 0;
}

.search-tab {
  font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
  padding: 12px 20px; border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; transition: color 0.18s ease, background 0.18s ease;
}
.search-tab.is-active { color: var(--pine); background: var(--mist); }

.search-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
  align-items: end;
  gap: 18px;
  padding: 22px 22px 4px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* A plain `.field { display: flex }` rule has the same specificity as the
   browser's built-in `[hidden] { display: none }` UA rule, and author
   styles win ties over UA styles - so #dish-field's `hidden` attribute was
   silently being ignored and the field stayed visible even in hotel-search
   mode. This restores hidden's actual effect. */
.field[hidden] { display: none; }

/* .field-actions (the div wrapping "Use my location" + "Find stays") has
   no explicit grid placement, so it lands in whichever column plain
   left-to-right auto-placement reaches - which one that is depends on how
   many OTHER fields are visible (checkin/checkout/dish toggle per search
   mode), and that column is only "1fr" wide, not the wide "auto" track.
   (Tried spanning it into the auto track with `grid-column: -3 / -1`
   first, expecting the two tracks' widths to add together - but the auto
   track doesn't reliably grow for a spanning item with no other content
   of its own, so the span didn't actually gain any width. A concrete
   min-width is far more predictable: it forces whichever 1fr track this
   lands in to actually grow to fit, borrowing space from the other 1fr
   columns.) The two buttons plus their 10px gap measure ~305px in
   practice - 340px gives real breathing room instead of sitting right at
   the wrap threshold. flex-wrap on .locate-row (below) stays as a
   last-resort safety net for anything even narrower than that. */
.field-actions { min-width: 340px; }

.field label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}

.field select, .field input[type="date"], .field input[type="text"] {
  font-family: var(--font-body); font-size: 15px; color: var(--text);
  border: none; border-bottom: 1.5px solid var(--line);
  padding: 6px 2px; background: transparent; width: 100%; min-width: 0;
  transition: border-color 0.18s ease;
}
.field select:focus, .field input:focus { border-color: var(--pine); outline: none; }

/* flex-wrap:wrap as a safety net regardless of exact viewport width: if
   these two nowrap, non-shrinking buttons ever don't fit their row's
   available width (any screen size, not just the specific breakpoints
   below), "Find stays" drops to its own line inside this box instead of
   spilling out past the search card's edge. */
.locate-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-locate {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--pine); background: var(--mist);
  border: none; border-radius: 999px; padding: 12px 18px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: background 0.18s ease;
}
.btn-locate:hover { background: #E3E4D3; }

.btn-primary {
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  background: var(--pine); color: var(--text-on-dark);
  border: none; border-radius: 999px; padding: 15px 30px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}
.btn-primary:hover { background: var(--ink); transform: translateY(-1px); }

.search-status {
  /* #search-status is the last child of the .search-card grid, so without
     an explicit column span it auto-flows into whatever column happens to
     be free - which column that is changes depending on how many fields
     are hidden (hotel vs restaurant mode), so it was landing squeezed next
     to the buttons instead of on its own row. Spanning every column
     guarantees it always sits on its own full-width row below the fields,
     regardless of search mode. */
  grid-column: 1 / -1;
  font-size: 13px; color: var(--text-muted); padding: 10px 22px 0; margin: 0;
}

.results { margin-top: 26px; display: grid; gap: 18px; }

/* ==========================================================================
   Result cards — hotels & restaurants, rendered by app.js
   (renderResults / renderRestaurantResults)
   ========================================================================== */

.result-card {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 20px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.result-card:hover, .result-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  outline: none;
}

.result-photo {
  border-radius: var(--radius-md);
  background-size: cover; background-position: center;
  background-color: var(--mist);
  min-height: 160px;
}

.result-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.result-distance { font-size: 12.5px; color: var(--text-muted); }
.result-map-link { color: var(--pine); font-weight: 600; }
.result-body h3 { font-size: 19px; margin: 2px 0 0; }
.result-meta { font-size: 13.5px; color: var(--text-muted); }

.result-rating {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); width: fit-content;
}
.stars { color: var(--gold); font-size: 14px; letter-spacing: 1px; }
.rating-value { font-weight: 600; font-size: 13.5px; color: var(--text); }
.rating-count { font-size: 12.5px; color: var(--text-muted); text-decoration: underline; }
.result-rating.no-reviews { color: var(--text-muted); font-size: 13px; }

.result-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.result-badge {
  font-size: 11.5px; padding: 5px 10px; border-radius: 999px;
  background: var(--mist); color: var(--pine); font-weight: 500;
}
.result-badge.kitchen-closed { background: rgba(184, 92, 56, 0.14); color: var(--terracotta); }

.result-price-col {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
  text-align: right; min-width: 150px;
}
.result-price { margin-bottom: 12px; }
.price-from { font-size: 11.5px; color: var(--text-muted); }
.price-amount { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); }
.price-unit { font-size: 11.5px; color: var(--text-muted); }
.price-unavailable { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }

.btn-view-rooms {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  background: var(--pine); color: var(--text-on-dark); border: none;
  border-radius: 999px; padding: 10px 18px; cursor: pointer; white-space: nowrap;
  transition: background 0.18s ease;
}
.btn-view-rooms:hover { background: var(--ink); }

.empty-state {
  background: var(--mist); border-radius: var(--radius-lg);
  padding: 30px; text-align: center; color: var(--text-muted); font-size: 14.5px;
}

@media (max-width: 760px) {
  .result-card { grid-template-columns: 1fr; }
  .result-photo { min-height: 180px; }
  .result-price-col {
    flex-direction: row; align-items: center; justify-content: space-between;
    text-align: left; min-width: 0;
  }
  .result-price { margin-bottom: 0; }
}

@media (max-width: 900px) {
  .search-card { grid-template-columns: 1fr 1fr; }
  /* .field-actions holds both buttons via .locate-row (display:flex,
     white-space:nowrap, flex-shrink:0 on each button - needed so "Use my
     location" doesn't wrap into 3 cramped lines). At 2 columns, that row
     no longer has room for both non-shrinking buttons side by side, so
     without this it overflows its grid cell and "Find stays" visibly
     spills out past the white card's edge. Spanning both columns gives
     the row the full card width to lay the buttons out in instead. */
  .field-actions { grid-column: 1 / -1; min-width: 0; }
}

@media (max-width: 560px) {
  .search-tabs { gap: 4px; }
  .search-tab {
    flex: 1 1 0; padding: 12px 8px; font-size: 13px;
    white-space: nowrap; text-align: center;
  }
  .search-card { grid-template-columns: 1fr; padding: 20px 18px 4px; gap: 16px; }
  .search-card .btn-primary { grid-column: auto; }
  .locate-row { flex-direction: column; gap: 10px; }
  .btn-locate, .search-card .btn-primary {
    width: 100%; text-align: center; padding: 14px 18px;
  }
}

/* ==========================================================================
   Destination strip — 6 small photo cards under the hero search
   ========================================================================== */

.dest-strip { padding: 30px 0 10px; position: relative; z-index: 2; }

.dest-strip-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}

.dest-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 3 / 4; padding: 14px;
  border-radius: var(--radius-md); overflow: hidden;
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-soft);
  transition: transform 0.22s ease;
}
.dest-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,26,18,0.88) 0%, rgba(15,26,18,0.05) 60%);
}
.dest-card h3, .dest-card p { position: relative; z-index: 1; margin: 0; }
.dest-card h3 { color: var(--text-on-dark); font-size: 15.5px; margin-bottom: 2px; }
.dest-card p { color: var(--text-on-dark-muted); font-size: 11px; }
.dest-card:hover { transform: translateY(-4px); }

@media (max-width: 900px) {
  .dest-strip-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .dest-strip-grid { grid-template-columns: repeat(2, 1fr); }
}

.trail-head-center { text-align: center; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Contour divider
   ========================================================================== */

.contour-divider { color: var(--line); line-height: 0; padding: 30px 0 0; }

/* ==========================================================================
   Stats
   ========================================================================== */

.stats { padding: 70px 0 20px; }

.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat {
  text-align: center; padding: 0 12px;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: none; }

.stat-num {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(30px, 4vw, 42px); color: var(--pine);
}
.stat-unit { font-size: 0.5em; margin-left: 2px; color: var(--gold); }

.stat-label { display: block; margin-top: 8px; font-size: 13px; color: var(--text-muted); }

@media (max-width: 700px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .stat { border-left: none; }
}

/* ==========================================================================
   About Assam — polaroid stack
   ========================================================================== */

.about-assam { padding: 90px 0; }

.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
}

.about-copy h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 20px; }
.about-copy p { color: var(--text-muted); font-size: 15.5px; margin-bottom: 16px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--pine); font-size: 14.5px;
  margin-top: 8px; position: relative;
}
.link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: var(--pine); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; }
.link-arrow:hover::after { transform: scaleX(1); }

.about-photos { position: relative; height: 380px; }

.polaroid {
  position: absolute; margin: 0;
  background: var(--paper); padding: 10px 10px 34px;
  border-radius: 4px; box-shadow: var(--shadow-soft);
  width: 46%; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.polaroid img { border-radius: 2px; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.polaroid figcaption {
  position: absolute; left: 0; right: 0; bottom: 10px; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--ink);
}
.polaroid:hover { transform: translateY(-6px) rotate(0deg) !important; z-index: 5; }

.polaroid-a { left: 0; top: 20px; transform: rotate(-6deg); z-index: 1; }
.polaroid-b { left: 26%; top: 0; transform: rotate(4deg); z-index: 2; }
.polaroid-c { left: 52%; top: 40px; transform: rotate(-3deg); z-index: 3; }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-photos { height: 320px; }
}

/* ==========================================================================
   Regions — full-bleed photo cards
   ========================================================================== */

.regions { padding: 20px 0 90px; }

.trail-head { max-width: 640px; margin: 0 0 40px; }
.trail-head h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 12px; }
.trail-head p { color: var(--text-muted); font-size: 15.5px; }

.regions-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}

.region-card {
  position: relative; border-radius: var(--radius-lg);
  background-size: cover; background-position: center;
  min-height: 380px; padding: 26px;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease;
}
.region-card:hover { transform: translateY(-4px); }

.region-eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-light); margin-bottom: 6px;
}
.region-card h3 { color: var(--text-on-dark); font-size: 24px; margin-bottom: 10px; }
.region-card p { color: var(--text-on-dark-muted); font-size: 14px; margin-bottom: 16px; }

.link-arrow-light { color: var(--text-on-dark); }
.link-arrow-light::after { background: var(--gold-light); }

@media (max-width: 860px) {
  .regions-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Trail — horizontal waypoint scroller
   ========================================================================== */

.trail { padding: 70px 0 90px; }
.trail .trail-head { padding: 0 28px; }

.trail-scroll {
  display: flex; gap: 4px; overflow-x: auto; padding: 30px 28px 20px;
  -webkit-overflow-scrolling: touch;
}
.trail-scroll::-webkit-scrollbar { height: 6px; }
.trail-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.waypoint {
  flex: 0 0 130px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; padding-top: 4px;
}
.waypoint:not(:last-child)::after {
  content: "";
  position: absolute; top: 48px; left: 50%; width: 100%; height: 0;
  border-top: 2px dashed var(--line); z-index: 0;
}
.waypoint-photo {
  width: 88px; height: 88px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 3px solid var(--paper); box-shadow: var(--shadow-soft);
  position: relative; z-index: 1; margin-bottom: 12px;
  transition: transform 0.2s ease;
}
.waypoint:hover .waypoint-photo { transform: scale(1.06); }
.waypoint h3 { font-size: 14.5px; margin-bottom: 2px; color: var(--ink); }
.waypoint p { font-size: 11.5px; color: var(--text-muted); margin: 0; }

@media (max-width: 640px) {
  .waypoint { flex: 0 0 110px; }
  .waypoint-photo { width: 70px; height: 70px; }
  .waypoint:not(:last-child)::after { top: 38px; }
}

/* ==========================================================================
   Values
   ========================================================================== */

.values { padding: 80px 0; background: var(--mist); }

.values-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px;
  text-align: center; margin-top: 10px;
}
.value .icon {
  width: 50px; height: 50px; padding: 13px; border-radius: 50%;
  background: var(--ink); color: var(--gold-light); margin: 0 auto 16px;
}
.value h3 { font-size: 15.5px; margin-bottom: 6px; }
.value p { color: var(--text-muted); font-size: 13px; }

@media (max-width: 900px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { padding: 90px 0 110px; }
.faq-list { max-width: 780px; margin-top: 30px; }

.faq-list details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.faq-list summary {
  cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 20px; color: var(--gold);
  flex-shrink: 0; transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list p { margin-top: 14px; color: var(--text-muted); font-size: 14.5px; max-width: 640px; }

/* ==========================================================================
   Footer
   ========================================================================== */

footer { background: var(--ink); color: var(--text-on-dark-muted); }

.footer-cta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  padding: 50px 0; border-bottom: 1px solid rgba(244, 241, 230, 0.14);
}
.footer-cta h2 { color: var(--text-on-dark); font-size: clamp(24px, 3vw, 32px); margin-bottom: 8px; }
.footer-cta p { color: var(--text-on-dark-muted); font-size: 15px; }

.footer-main {
  display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 30px;
  padding: 50px 0;
}
.footer-col h3 {
  color: var(--text-on-dark); font-size: 13.5px; margin-bottom: 16px;
  font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.footer-col a, .footer-col p { display: block; font-size: 13.5px; margin: 0 0 10px; color: var(--text-on-dark-muted); }
.footer-col a:hover { color: var(--gold-light); text-decoration: underline; }
.footer-brand .wordmark { color: var(--text-on-dark); margin-bottom: 12px; }
.footer-tagline {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-light); margin-bottom: 14px;
}

.footer-bottom {
  text-align: center; padding: 20px 0; border-top: 1px solid rgba(244, 241, 230, 0.14);
}
.footer-bottom p { font-size: 12.5px; margin: 4px 0; }

footer a { color: var(--gold-light); }
footer a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .footer-main { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Overlays / lightbox — keep functional, on-brand
   ========================================================================== */

.stay-overlay, .lightbox { position: fixed; inset: 0; z-index: 60; display: none; }
.stay-overlay[aria-hidden="false"], .lightbox[aria-hidden="false"] { display: block; }

.stay-overlay-scrim { position: absolute; inset: 0; background: rgba(15, 26, 18, 0.68); }

.stay-panel {
  position: relative; z-index: 2; max-width: 720px; margin: 5vh auto; max-height: 90vh;
  overflow-y: auto; background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 32px;
}

.stay-close {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--mist); color: var(--ink); cursor: pointer; font-size: 16px;
  box-shadow: var(--shadow-soft);
}

/* ==========================================================================
   Stay / restaurant detail panel - gallery, rooms, booking flow
   (rendered by app.js: openHotelPanel / renderRoomList / renderGuestForm /
   openRestaurantPanel - none of this had any CSS at all before, so it
   rendered as unstyled stacked full-width images and plain text)
   ========================================================================== */

.stay-gallery {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 6px;
  height: 300px; margin: -32px -32px 24px; overflow: hidden;
}
.stay-gallery > img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; display: block; }
.stay-gallery-side { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; }
.stay-gallery-side img { flex: 1; width: 100%; object-fit: cover; cursor: pointer; min-height: 0; }
.stay-gallery-empty { height: 12px; }

.stay-title { font-size: 25px; margin: 4px 0 4px; }
.stay-address { color: var(--text-muted); font-size: 14px; margin: 0 0 14px; }
.stay-dates-bar {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mist); border-radius: 999px; padding: 8px 16px;
  font-size: 13.5px; margin-bottom: 18px;
}

.stay-feedback-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--mist); border: none; border-radius: var(--radius-md);
  padding: 12px 16px; margin: 0 0 18px; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink);
}
.stay-feedback-toggle .toggle-arrow { margin-left: auto; transition: transform 0.2s ease; }
.stay-feedback-toggle[aria-expanded="true"] .toggle-arrow { transform: rotate(180deg); }

.no-rooms-msg { color: var(--text-muted); font-size: 14px; padding: 16px 0; }

#room-list { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }

.room-card { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius-md); padding: 18px; }
/* Distinct tint + accent border per room type, cycling through 4 brand
   colors, so a hotel with several room types is easy to tell apart at a
   glance instead of every card looking identical. */
.room-card:nth-of-type(4n+1) { background: rgba(35, 74, 52, 0.05); border-left-color: var(--pine); }
.room-card:nth-of-type(4n+2) { background: rgba(201, 151, 60, 0.08); border-left-color: var(--gold); }
.room-card:nth-of-type(4n+3) { background: rgba(184, 92, 56, 0.06); border-left-color: var(--terracotta); }
.room-card:nth-of-type(4n+4) { background: rgba(74, 143, 194, 0.07); border-left-color: #4A8FC2; }
.room-photo-strip { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; }
.room-photo { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0; }
.room-card h4 { font-size: 17px; margin-bottom: 4px; }
.room-desc { color: var(--text-muted); font-size: 13.5px; margin: 0 0 6px; }
.room-meta { color: var(--text-muted); font-size: 13px; margin: 0 0 10px; }
.room-count-row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
.room-count-select { padding: 6px 10px; border: 1px solid var(--border, #d8d4c8); border-radius: 8px; background: #fff; font: inherit; color: inherit; }
.room-facilities { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.room-facility {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  background: var(--mist); color: var(--pine);
}

.rate-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line); flex-wrap: wrap;
}
.rate-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rate-name { font-weight: 600; font-size: 14px; }
.breakfast-badge { font-size: 11px; color: var(--pine); font-weight: 500; }
.discount-badge {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--paper);
  background: var(--terracotta); border-radius: 999px; padding: 1px 8px; margin-left: 4px;
}
.rate-cancellation { font-size: 12px; color: var(--text-muted); }
.rate-price-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rate-total { text-align: right; }
.rate-total .amount { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); }
.rate-total .per-night { display: block; font-size: 11px; color: var(--text-muted); }
.original-price {
  text-decoration: line-through; color: #C0392B; font-weight: 700; margin-right: 6px;
}
.rate-total .amount .original-price { font-size: 14px; }
.rate-total .per-night .original-price { opacity: 0.9; font-size: inherit; margin-right: 4px; }

.btn-book, .btn-secondary {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  border: none; border-radius: 999px; padding: 9px 20px; cursor: pointer;
  white-space: nowrap; transition: background 0.18s ease;
}
.btn-book { background: var(--pine); color: var(--text-on-dark); }
.btn-book:hover { background: var(--ink); }
.btn-secondary { background: var(--mist); color: var(--pine); }
.btn-secondary:hover { background: #E3E4D3; }

.link-back {
  background: none; border: none; color: var(--pine); font-weight: 600;
  font-size: 13.5px; cursor: pointer; padding: 0; margin-bottom: 16px;
  font-family: var(--font-body); display: block;
}

.guest-form h4 { font-size: 18px; margin-bottom: 10px; }
.guest-form .field { margin-bottom: 14px; }
.guest-form .field input {
  font-family: var(--font-body); font-size: 15px; color: var(--text);
  border: none; border-bottom: 1.5px solid var(--line);
  padding: 8px 2px; background: transparent; width: 100%;
}
.guest-form .field input:focus { border-color: var(--pine); outline: none; }
.form-note { font-size: 12px; color: var(--text-muted); margin: 4px 0 12px; }

.booking-summary-line {
  display: flex; justify-content: space-between; font-size: 14px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.booking-summary-line.total { font-weight: 600; color: var(--ink); }

.taxi-highlight {
  background: var(--mist); border-radius: var(--radius-md);
  padding: 14px 16px; margin: 14px 0;
}
.taxi-highlight label { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.taxi-estimate-row { margin: 8px 0; }

.guest-details-card {
  background: rgba(35, 74, 52, 0.06);
  border: 1.5px solid rgba(35, 74, 52, 0.22);
  border-radius: var(--radius-md);
  padding: 16px 16px 4px;
  margin: 8px 0 16px;
}
.guest-details-card > .guest-details-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--pine); margin: 0 0 12px;
}
.guest-details-card .field:last-of-type { margin-bottom: 10px; }

.payment-choice-card {
  background: rgba(201, 151, 60, 0.10);
  border: 1.5px solid rgba(201, 151, 60, 0.45);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 16px 0;
}
.payment-choice-card > .payment-choice-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--pine); margin: 0 0 10px;
}
.payment-choice-option {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--text);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.payment-choice-option:last-of-type { margin-bottom: 0; }
.payment-choice-option input[type="radio"] { accent-color: var(--gold); width: 16px; height: 16px; flex-shrink: 0; }
.payment-choice-option:hover { border-color: var(--gold-light); }
.payment-choice-option.is-selected {
  border-color: var(--gold); background: rgba(201, 151, 60, 0.16);
}
.payment-choice-card .form-note { margin: 8px 0 0; }

.guest-form-actions { margin-top: 18px; }
.guest-form-actions .btn-primary { width: 100%; }

#guest-form-error:not(:empty) {
  background: rgba(184, 92, 56, 0.12); color: var(--terracotta);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px;
}

.form-error {
  background: rgba(184, 92, 56, 0.12); color: var(--terracotta);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px;
}

.menu-category { margin-bottom: 26px; }
.menu-category h4 { font-size: 16px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.menu-item-list { display: flex; flex-direction: column; gap: 14px; }
.menu-item-row { display: flex; align-items: center; gap: 12px; }
.menu-item-row-unavailable { opacity: 0.5; }
.menu-item-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.menu-item-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.menu-item-veg { width: 11px; height: 11px; border: 1.5px solid; display: inline-block; position: relative; margin-right: 4px; }
.menu-item-veg.veg { border-color: #2E7D32; }
.menu-item-veg.veg::after { content: ""; position: absolute; inset: 2px; background: #2E7D32; border-radius: 50%; }
.menu-item-veg.non-veg { border-color: #C62828; }
.menu-item-veg.non-veg::after { content: ""; position: absolute; inset: 2px; background: #C62828; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.menu-item-name { font-weight: 600; font-size: 14px; }
.menu-item-desc { display: block; font-size: 12.5px; color: var(--text-muted); }
.menu-item-hours { display: block; font-size: 11.5px; color: var(--terracotta); }
.menu-item-price { font-family: var(--font-mono); font-weight: 500; font-size: 14px; flex-shrink: 0; }

.cart-qty-stepper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cart-qty-btn {
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
.cart-qty-value { min-width: 18px; text-align: center; font-weight: 600; font-size: 13.5px; }

.cart-summary-bar {
  margin-top: 18px; padding: 14px 16px 6px;
  background: var(--paper); border-top: 1px solid var(--line);
  border-radius: var(--radius-md);
}

@media (max-width: 640px) {
  .stay-gallery { height: 220px; margin: -20px -20px 20px; }
  .stay-panel { padding: 20px; }
}

.lightbox-img { max-width: 90vw; max-height: 85vh; margin: 6vh auto; display: block; border-radius: var(--radius-md); }
.lightbox-close, .lightbox-nav {
  position: fixed; z-index: 3; background: rgba(251,247,238,0.9); border: none;
  border-radius: 50%; width: 44px; height: 44px; cursor: pointer; color: var(--ink); font-size: 18px;
}
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-caption { position: fixed; bottom: 24px; left: 0; right: 0; text-align: center; color: var(--text-on-dark); font-size: 14px; }

.stay-dates-bar input[type="date"] {
  border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; padding: 4px 8px;
  font: inherit; font-weight: 600; background: #fff; max-width: 150px;
}

.confirm-modal-backdrop {
  position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.confirm-modal {
  background: #fff; border-radius: 16px; padding: 22px; width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
}
.confirm-modal h3 { margin: 0 0 14px; }
.confirm-modal-rows > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 14px;
}
.confirm-modal-rows dt { color: #666; margin: 0; }
.confirm-modal-rows dd { margin: 0; text-align: right; font-weight: 600; word-break: break-word; }
.confirm-modal-actions { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }